/* ===========================================================
   GITTER — Page « Notre histoire »
   (composants existants réutilisés depuis style.css ; ici seulement le neuf)
   =========================================================== */

/* ---------- Mot manuscrit (fil rouge) ---------- */
.hl-script{
  font-family:'Caveat',cursive;font-weight:700;color:var(--orange);
  font-size:1.14em;line-height:.9;display:inline-block;
}

/* ---------- HERO « histoire » — photo plein cadre, texte dans le bas ----------
   Photo source en PORTRAIT (1536x2048) recadree en 1536x1350 : les visages de
   Didier et Damien occupent 34 a 59 % de la hauteur du cadre, les logos brodes
   sur les polos 71 a 82 %.
   object-position RESPONSIVE : c'est indispensable ici. La hauteur du bandeau est
   fixe (880 px) mais l'echelle de l'image depend de la largeur d'ecran, donc la
   bande visible retrecit quand l'ecran s'elargit. Une valeur unique donnerait soit
   trop de plafond en 1440, soit des cranes coupes en 1920. On remonte donc la photo
   au maximum a chaque palier, en gardant toujours un filet de plafond au-dessus
   des tetes. */
.page-hero--story{
  --hv-h:880px; --hv-y:88%; --hv-fade:44%; --hv-t:.86;
  position:relative;padding:0;min-height:var(--hv-h);
  display:flex;align-items:flex-end;background:#15161a;
  overflow:hidden;                       /* le zoom lent ne doit rien laisser deborder */
}
.page-hero--story .hv-full{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center var(--hv-y);
}
/* Zoom lent et continu facon Ken Burns. Le point d'ancrage est place sur les
   visages (45 % de la hauteur) pour qu'ils ne sortent jamais du cadre.
   L'amplitude reste faible : la source ne fait que 1536 px de large, un zoom
   marque la rendrait floue sur un grand ecran. */
@keyframes hv-zoom{ from{transform:scale(1)} to{transform:scale(1.05)} }
.page-hero--story .hv-anim{
  transform-origin:center 25%;
  animation:hv-zoom 26s ease-in-out infinite alternate;
  will-change:transform;
}
@media(prefers-reduced-motion:reduce){
  .page-hero--story .hv-anim{animation:none;transform:none}
}
.page-hero--story::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,
    rgba(18,16,14,.97) 0%,
    rgba(18,16,14,.93) calc(var(--hv-fade) * .62),
    rgba(18,16,14,.3) var(--hv-fade),
    rgba(18,16,14,0) 100%);
}
/* voile discret en haut : le fil d'Ariane reste lisible meme sur le ciel clair */
.page-hero--story::before{
  content:"";position:absolute;left:0;right:0;top:0;height:120px;z-index:1;
  background:linear-gradient(180deg,rgba(18,16,14,.62),rgba(18,16,14,0));
}
.page-hero--story .hv-crumb{position:absolute;top:0;left:0;right:0;z-index:3;padding-top:22px}
.page-hero--story .hv-crumb .crumb{margin:0;text-shadow:0 1px 10px rgba(0,0,0,.85)}
.page-hero--story .hv-txt{position:relative;z-index:2;width:100%;padding-bottom:24px}
.page-hero--story .hero-eyebrow{text-shadow:0 1px 12px rgba(0,0,0,.8)}
.page-hero--story h1{
  font-size:calc(clamp(32px,4.4vw,58px) * var(--hv-t));
  line-height:1.02;letter-spacing:-1.5px;margin-bottom:14px;
  text-shadow:0 2px 22px rgba(0,0,0,.5);
}
.page-hero--story .nowr{white-space:nowrap}
.page-hero--story p{max-width:58ch;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.page-hero--story .page-hero-stats{gap:38px;margin-top:22px}
.page-hero--story .page-hero-stats strong{font-size:34px}
@media(max-width:1024px){ .page-hero--story{--hv-h:620px} }
@media(min-width:1600px){ .page-hero--story{--hv-y:74%} }
@media(min-width:1800px){ .page-hero--story{--hv-y:62%} }
@media(min-width:2100px){ .page-hero--story{--hv-y:54%} }
/* Sous 680 px le titre retomberait sur les visages : photo, puis texte dessous. */
@media(max-width:680px){
  .page-hero--story{display:block;min-height:0;background:var(--dark-2)}
  .page-hero--story::after,
  .page-hero--story::before{content:none}
  /* aspect-ratio exact de la photo = aucun rognage : les deux visages sont garantis */
  .page-hero--story .hv-full{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1536/1350}
  /* pas de zoom sur mobile : la photo est affichee entiere, la rogner serait absurde */
  .page-hero--story .hv-anim{animation:none;transform:none}
  .page-hero--story .hv-crumb{position:static;padding-top:18px;padding-bottom:0}
  .page-hero--story .hv-crumb .crumb{text-shadow:none}
  .page-hero--story .hv-txt{padding-top:14px;padding-bottom:40px}
  .page-hero--story h1,
  .page-hero--story p,
  .page-hero--story .hero-eyebrow{text-shadow:none}
}

/* ---------- SECTION 2 — préambule / manifeste ---------- */
.story-intro{padding:var(--section-y) 0;background:#fff}
.story-intro-inner{max-width:730px;margin:0 auto;text-align:center}
.story-intro h2{
  font-family:'Poppins',sans-serif;font-weight:800;letter-spacing:-.6px;
  font-size:clamp(26px,3vw,40px);line-height:1.18;color:var(--ink);
  margin:10px auto 22px;max-width:20ch;
}
.story-intro p{color:var(--muted);font-size:18px;line-height:1.8}
.story-intro .hl{color:var(--orange)}

/* ---------- SECTION 3 — la frise (timeline) ---------- */
.timeline-section{padding:var(--section-y) 0;background:linear-gradient(180deg,#faf7f2 0%,#f4efe8 100%)}
.timeline{position:relative;max-width:900px;margin:54px auto 0}
.timeline::before{
  content:"";position:absolute;top:6px;bottom:6px;left:50%;width:2px;
  background:var(--cream-line);transform:translateX(-50%);
}
.timeline-progress{
  content:"";position:absolute;top:6px;left:50%;width:2px;height:calc(100% - 12px);
  background:linear-gradient(180deg,var(--orange),#f59b54);
  transform:translateX(-50%) scaleY(0);transform-origin:top center;
  box-shadow:0 0 12px rgba(234,110,30,.5);will-change:transform;
}
.tl-item{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  column-gap:72px;margin-bottom:56px;
}
.tl-item:last-child{margin-bottom:0}
.tl-content{grid-column:1;justify-self:end;text-align:right;max-width:370px}
.tl-item:nth-child(even) .tl-content{grid-column:2;justify-self:start;text-align:left}
.tl-year{
  font-family:'Poppins',sans-serif;font-weight:800;letter-spacing:-1.5px;
  font-size:clamp(38px,5vw,60px);line-height:1;color:var(--ink);
}
.tl-content h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:20px;color:var(--ink);margin:8px 0 8px}
.tl-content p{color:#5e5e5e;font-size:15.5px;line-height:1.7}
.tl-script{font-family:'Caveat',cursive;font-weight:700;color:var(--orange);font-size:1.45em;line-height:.8;display:inline-block}
.tl-photo{
  width:100%;max-width:360px;height:auto;margin-top:15px;display:block;border-radius:12px;
  box-shadow:0 14px 30px rgba(20,18,15,.20);border:1px solid var(--cream-line);
}
.tl-item:nth-child(odd) .tl-photo{margin-left:auto}   /* items à droite alignés près de la colonne */

/* pastille sur la colonne vertébrale */
.tl-dot{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);
  width:18px;height:18px;border-radius:50%;background:var(--orange);z-index:2;
  box-shadow:0 0 0 5px #f6f2ec,0 8px 18px rgba(234,110,30,.45);
  transition:transform .35s ease,box-shadow .35s ease;
}
.tl-dot.is-lit{transform:translateX(-50%) scale(1.25)}

/* jalon d'origine 1986 — naissance de la maison */
.tl-item--origin .tl-content{
  background:var(--dark);color:#fff;border-radius:16px;padding:24px 26px;
  box-shadow:0 18px 40px rgba(20,18,15,.22);max-width:390px;
}
.tl-item--origin .tl-year{color:var(--orange)}
.tl-item--origin .tl-content h3{color:#fff}
.tl-item--origin .tl-content p{color:#cfccc7}
.tl-item--origin .tl-dot{box-shadow:0 0 0 5px #f6f2ec,0 0 0 10px rgba(234,110,30,.32),0 8px 18px rgba(234,110,30,.5)}

@media(max-width:860px){
  .timeline{margin-top:40px}
  .timeline::before,.timeline-progress{left:22px}
  .tl-item{grid-template-columns:1fr;column-gap:0;padding-left:58px;margin-bottom:42px}
  .tl-content,
  .tl-item:nth-child(even) .tl-content{grid-column:1;justify-self:start;text-align:left;max-width:none}
  .tl-item--origin .tl-content{max-width:none}
  .tl-dot{left:22px}
  .tl-year{font-size:clamp(34px,9vw,46px)}
}

/* ---------- SECTION 4 — signature manuscrite ---------- */
.legacy-line{background:var(--dark);color:#fff;padding:clamp(50px,6vw,84px) 0;text-align:center;overflow:hidden}
.legacy-line .container{display:flex;flex-direction:column;align-items:center;gap:18px}
.legacy-script{
  font-family:'Caveat',cursive;font-weight:700;color:var(--orange);
  font-size:clamp(36px,6.4vw,68px);line-height:1.02;transform:rotate(-1.6deg);
  display:inline-block;text-shadow:0 6px 26px rgba(234,110,30,.25);
}
.legacy-sign{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;letter-spacing:.6px;color:#cfcbc4;
}
.legacy-sign .sep{width:5px;height:5px;border-radius:50%;background:var(--orange);display:inline-block}

/* ---------- SECTION 5 — portrait de famille ---------- */
.family-portrait{padding:var(--section-y) 0;background:var(--dark-2);color:#fff}
.family-portrait .about-inner{align-items:center}
.family-portrait .section-eyebrow{text-align:left;color:var(--orange)}
.family-portrait h2{color:#fff}
.family-portrait h2 .hl{color:var(--orange)}
.family-portrait p{color:#cfccc7;font-size:16px;line-height:1.8;margin-bottom:16px}
.family-photo{
  padding:10px;border-radius:18px;max-width:430px;margin:0 auto;
  background:linear-gradient(160deg,#33343a,#23242a);
  box-shadow:0 30px 60px rgba(0,0,0,.5);border:1px solid rgba(244,239,232,.14);
}
.family-photo img{border-radius:12px;width:100%;height:auto;display:block;transition:transform .9s ease}
@media(hover:hover){.family-photo:hover img{transform:scale(1.035)}}
.family-portrait .about-badge{right:auto;left:-14px;bottom:-18px}
@media(max-width:980px){
  .family-portrait .about-media{max-width:430px;margin:0 auto 14px}
  .family-portrait .about-badge{left:auto;right:-10px}
}

/* ---------- SECTION — Notre équipe (cartes individuelles) ---------- */
.team-section{padding:var(--section-y) 0;background:#fff}
.team-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 26px;margin-top:50px}
.team-card{flex:1 1 200px;max-width:248px;text-align:center}
.team-photo{
  width:150px;height:150px;border-radius:50%;margin:0 auto 18px;position:relative;
  overflow:hidden;background:var(--cream);
  box-shadow:0 16px 32px rgba(20,18,15,.16);
}
.team-photo::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 0 var(--orange);transition:box-shadow .3s ease;
}
.team-card:hover .team-photo::after{box-shadow:inset 0 0 0 4px var(--orange)}
.team-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
.team-card:hover .team-photo img{transform:scale(1.07)}
.team-name{font-family:'Poppins',sans-serif;font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.2px}
.team-role{
  display:block;margin-top:5px;font-family:'Poppins',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--orange);
}
.team-desc{margin-top:11px;font-size:14px;color:var(--muted);line-height:1.55}
@media(max-width:560px){
  .team-grid{gap:34px 20px}
  .team-card{flex-basis:42%;max-width:none}
  .team-photo{width:124px;height:124px}
}

/* ===== FRISE — animation cinematique (v9) ===== */
/* axe + remplissage raffines (fondu haut/bas, degrade plus riche) */
.timeline::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,var(--cream-line) 7%,var(--cream-line) 93%,rgba(0,0,0,0) 100%)}
.timeline-progress{background:linear-gradient(180deg,#f7a85a,var(--orange) 55%,#d75f13);box-shadow:0 0 14px rgba(234,110,30,.55),0 0 4px rgba(234,110,30,.9)}

/* comete lumineuse en tete de progression */
.tl-comet{position:absolute;top:6px;left:50%;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#fff 0,#ffd9b8 38%,var(--orange) 78%);transform:translate(-50%,0);will-change:transform;z-index:3;opacity:0;pointer-events:none;box-shadow:0 0 10px 2px rgba(234,110,30,.95),0 0 26px 8px rgba(234,110,30,.5);transition:opacity .45s ease}
.timeline.is-active .tl-comet{opacity:1}
.tl-comet::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(234,110,30,.5);animation:cometPulse 1.6s ease-out infinite}
@keyframes cometPulse{0%{transform:scale(.55);opacity:.9}100%{transform:scale(2.5);opacity:0}}

/* pastilles : allumage plus vivant + onde de choc */
.tl-dot{transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s ease}
.tl-dot.is-lit{transform:translateX(-50%) scale(1.3);box-shadow:0 0 0 5px #f6f2ec,0 0 0 9px rgba(234,110,30,.26),0 0 22px rgba(234,110,30,.85)}
.tl-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(234,110,30,.6);opacity:0}
.tl-dot.is-lit::after{animation:dotPing .7s ease-out}
@keyframes dotPing{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(3)}}

/* annee : vire a l'orange quand la comete l'a depassee */
.tl-year{transition:color .5s ease}
.tl-item.is-reached .tl-year{color:var(--orange)}

/* revelation directionnelle alternee (convergence vers l'axe) */
.tl-item.reveal{transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.js-anim .tl-item.reveal{opacity:0;transform:translateX(-58px) scale(.965)}
.js-anim .tl-item:nth-child(even).reveal{transform:translateX(58px) scale(.965)}
.js-anim .tl-item.reveal.in{opacity:1;transform:none}

/* annee : petit flourish retarde au reveal */
.js-anim .tl-item .tl-year{opacity:0;transform:translateY(14px);transition:opacity .7s ease .15s,transform .7s cubic-bezier(.22,.61,.36,1) .15s,color .5s ease}
.js-anim .tl-item.in .tl-year{opacity:1;transform:none}

/* photo : leger settle facon ken burns */
.js-anim .tl-photo{transform:scale(1.05);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.js-anim .tl-item.in .tl-photo{transform:scale(1)}

/* mobile : reveal vertical (pas de glissement lateral) + comete sur l'axe gauche */
@media(max-width:860px){
  .js-anim .tl-item.reveal,
  .js-anim .tl-item:nth-child(even).reveal{transform:translateY(34px) scale(.98)}
  .js-anim .tl-item.reveal.in{transform:none}
  .tl-comet{left:22px}
}

/* accessibilite : on coupe tout le mouvement si demande */
@media (prefers-reduced-motion: reduce){
  .tl-comet{display:none}
  .tl-dot.is-lit::after,.tl-comet::after{animation:none}
  .js-anim .tl-item.reveal,
  .js-anim .tl-item .tl-year,
  .js-anim .tl-photo{opacity:1;transform:none;transition:none}
}

/* =====================================================================
   CADRAGE-PHOTO-DEBUT
   Bloc ECRIT PAR L'OUTIL admin/cadrage-photo.php — ne pas modifier a la main,
   il est reecrit en entier a chaque enregistrement.
   Il redeclare volontairement les valeurs definies plus haut : place en fin de
   feuille, il gagne. Si on supprime ce bloc, la page retombe sur les valeurs
   par defaut du haut du fichier et reste correcte.
   ===================================================================== */
.page-hero--story{--hv-h:880px;--hv-y:88%;--hv-fade:44%}
@media(min-width:1600px){ .page-hero--story{--hv-y:74%} }
@media(min-width:1800px){ .page-hero--story{--hv-y:62%} }
@media(min-width:2100px){ .page-hero--story{--hv-y:54%} }
@media(max-width:1024px){ .page-hero--story{--hv-h:620px} }
@keyframes hv-zoom{ from{transform:scale(1)} to{transform:scale(1.05)} }
.page-hero--story .hv-anim{
  transform-origin:center 25%;
  animation:hv-zoom 26s ease-in-out infinite alternate;
  will-change:transform;
}
@media(max-width:680px){
  .page-hero--story .hv-full{aspect-ratio:1536/1350;object-position:center 50%}
  .page-hero--story .hv-anim{animation:none;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .page-hero--story .hv-anim{animation:none;transform:none}
}
/* CADRAGE-PHOTO-FIN */