/* =============================================================================
   about-grid.css — grille editoriale a quatre zones (page Charte)
   =============================================================================
   Repris de la maquette figee (style.css l. 1013-1120). Les commentaires d'origine sont conserves :
   ils portent des motifs de conception qu'aucune autre source ne documente.

   ⚠️ TOUT le CSS de ce type de bloc vit ici — y compris ses @media. Rien dans
   le CSS d'une page : un bloc duplique vers une page vierge doit rester correct.
   ============================================================================= */


/* =============================================================================
   ✅ MOTEUR PORTE LE 2026-10-01 — les 10 inversions sont LEVEES
   =============================================================================
   Ce fichier a vecu deux semaines avec ses valeurs par defaut INVERSEES par
   rapport a la maquette, exactement DIX : `--pl` a 1 au lieu de 0 (x1), le repli de
   `--lp` a 1 au lieu de 0 (x6), celui de `--frame` a 1 au lieu de 0 (x2), et
   `circle(150%)` au lieu de `circle(0%)` (x1). C'etait
   juste : sans moteur, les valeurs de la maquette auraient rendu les traits et les
   photos INVISIBLES, sans erreur et sans que rien ne le signale.

   `js/scroll-reveal.js` existe maintenant et pose `--pl` puis `--p` (D121) : les
   valeurs sont donc remises a celles de la maquette, relevees une par une dans
   `style.css` (l. 1058, 1070, 1073, 1076, 1079, 1081, 1092, 1095-1097) et non
   deduites de memoire.

   ⚠️ L'ETAT « VISIBLE AU REPOS » NE TIENT PLUS PAR LE CSS, IL TIENT PAR LE JS.
   Deux consequences a connaitre avant de toucher a quoi que ce soit ici :
   · le moteur n'arme que si le type de bloc est inscrit dans `$scrollEngineTypes`
     de `PageLoaderTrait` — l'en retirer rendrait cette grille INVISIBLE, pas
     seulement figee ;
   · un etat masque au repos ne vaut que s'il est CONDITIONNE a la presence du JS.
     C'est la « regle d'or » que la maquette enonce dans son propre CSS — « l'etat
     cache n'est pose QUE si JS arme » — et qu'elle NE TIENT PAS ici : ses valeurs
     masquantes sont dans les regles de BASE. Trois chemins la rendraient donc
     invisible : `prefers-reduced-motion` (le moteur sort avant d'armer), un type
     retire de `$scrollEngineTypes`, une erreur JS en amont.
     ✅ Corrige en bas de fichier par un bloc `:not(.rv-armed)` : `scroll-reveal.js`
     pose `rv-armed` sur la grille, et sans cette classe la grille est DESSINEE.
     ⚠️ Ne pas retirer ce bloc en le prenant pour une redondance — c'est lui qui
     remplace les 10 inversions, et il couvre les trois chemins d'un coup.
   ============================================================================= */

.about{ background:var(--creme); padding:0 !important; }

/* ===== PIN 2 PHASES de la section "Qui sommes-nous" =====
   .about-pin est HAUTE (1 + PIN écrans). .about-pin__sticky se fige sous le header.
   PHASE A (avant que le sticky n'accroche réellement) : les TRAITS se dessinent un par un (--pl).
   PHASE B (sticky figé, plein écran sous header) : les ÉLÉMENTS internes apparaissent un par un (--p).
   JS pose --pl (lignes) et --p (contenus) via la timeline playAbout (main.js). */
/* Depuis le 03/07 : PLUS DE PIN STICKY (la cliente ne veut pas de zone qui bloque le scroll).
   La section fait 1 écran ; l'animation (traits puis contenus) se JOUE UNE FOIS à l'arrivée,
   déclenchée par IntersectionObserver dans main.js, le scroll reste totalement libre. */
.about-pin{ position:relative; }
/* ⚠️ `min-height` et NON `height` — ECART VOULU avec la maquette (style.css), 2026-11-09,
   fiche Notion sprint 2026-11-09 n° 9. La maquette fige la section a la hauteur de l'ecran :
   ses textes de demonstration y tenaient. Les notres, saisis au backoffice, n'y tiennent pas
   toujours — mesure a 773 px de haut : grille 689 px pour 1 179 px de contenu. Le surplus
   debordait, et la citation qui suit RECOUVRAIT la cellule « agence » (capture de la
   cliente, ecran 1892×848). Un plancher garde l'ecran plein quand le contenu y tient, et
   laisse la section grandir sinon. La grille suit par `align-items:stretch` (flex sur une
   ligne : l'element remplit la hauteur du conteneur, plancher compris). */
.about-pin__sticky{
  position:relative;
  min-height:calc(100vh - var(--header-h, 112px));
  display:flex; align-items:stretch;
  overflow:hidden;
}

/* ===== GRILLE éditoriale "Qui sommes-nous" (template client) =====
   col gauche (guépard, PLEINE box) | col droite [intro en haut, (agence | photographe) en bas].
   Les TRAITS sont des bordures de cellules (pseudo-éléments) -> ils tombent TOUJOURS sur les
   gouttières, jamais dans le texte. Les PHOTOS remplissent leur box bord à bord (pas de cadre). */
.about__grid{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:1.15fr .85fr .55fr;      /* guépard large | texte droite | photo droite */
  grid-template-rows:1.2fr 1fr;                  /* intro un peu plus haute que le bas */
  grid-template-areas:
    "guepard intro   intro"
    "guepard agence  photographe";
  /* ⚠️ PLUS de `height:100%` (maquette) : il bloquait la grille a la hauteur de l'ecran et
     faisait deborder le contenu sous la citation. La hauteur vient desormais de l'etirement
     flex du sticky (cf. son encadre) — au moins un ecran, davantage si le texte l'exige. */
}
.about__cell{ position:relative; display:flex; flex-direction:column; justify-content:center; }
.about__cell--guepard{ grid-area:guepard; }
.about__cell--intro{ grid-area:intro;  padding:clamp(34px,4.5vw,72px) clamp(34px,4vw,64px); }
.about__cell--agence{ grid-area:agence; padding:clamp(34px,4vw,60px) clamp(30px,3.4vw,52px); }
.about__cell--photographe{ grid-area:photographe; }

/* PHOTOS : remplissent toute leur box (plein écran dans la box), PAS de cadre, PAS de radius.
   Révélation par masque CERCLE qui se déploie (technique des pays du planisphère). */
.about__circle{
  position:absolute; inset:0;                     /* plein box bord à bord */
  width:100%; height:100%;
  background:#241d12 center/cover no-repeat;
  /* ⚠️ 0% — valeur de la maquette (style.css:1058), RESTAUREE le 2026-10-01 avec le
     moteur. Elle masque la photo au repos ; `scroll-reveal.js` pose `.ab`, et les
     deux regles de deploiement en bas de fichier reprennent la main sur le rayon.
     ⚠️ CE CAS EST LE PLUS SOURNOIS DU FICHIER, et il le reste : la dependance a
     l'animation n'est pas dans un `var(--x, 0)` reperable, elle est EN DUR ici. Si
     un jour la photo parait vide, c'est ici qu'il faut regarder — pas dans les
     variables. Chercher les `clip-path`, `opacity` et `transform` a zero. */
  clip-path:circle(0% at 50% 50%);
}
.about__cell--guepard, .about__cell--photographe{ overflow:hidden; }
.about__cell--photographe{ min-height:min(40vh,360px); }

/* ===== TRAITS = bordures de cellules (toujours sur la gouttière) qui se TRACENT =====
   Chaque trait est un pseudo-élément posé sur un bord de box ; scaleX/Y 0->1 piloté par --pp.
   --lp = progression locale du trait (posée par .ab via --pp). */
.about__cell::before, .about__cell::after{ content:""; position:absolute; background:var(--noir);
  z-index:3; pointer-events:none; }
/* trait VERTICAL entre guépard et la colonne droite : bord droit du guépard */
.about__cell--guepard::after{ top:0; right:0; width:1px; height:100%;
  transform:scaleY(var(--lp, 0)); transform-origin:top; }
/* trait HORIZONTAL entre intro (haut) et le bas (agence+photographe) : bord bas de l'intro */
.about__cell--intro::after{ left:0; right:0; bottom:0; height:1px;
  transform:scaleX(var(--lp, 0)); transform-origin:left; }
/* trait VERTICAL entre agence (texte) et photographe : bord droit de l'agence */
.about__cell--agence::after{ top:0; right:0; width:1px; height:100%;
  transform:scaleY(var(--lp, 0)); transform-origin:top; }
/* cadre extérieur (haut + bas de la grille) qui se trace aussi */
.about__grid::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--noir); z-index:3; transform:scaleX(var(--frame, 0)); transform-origin:left; }
.about__grid::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--noir); z-index:3; transform:scaleX(var(--frame, 0)); transform-origin:left; }

.about__head{ text-align:left; max-width:none; margin:0 0 clamp(18px,2.2vw,28px); }
.about__lead--sm{ font-size:clamp(20px,2vw,28px); }

/* ===== ANIMATION 2 PHASES =====
   PHASE A (--pl 0->1, AVANT le pin) : le cadre + chaque trait se dessinent un par un.
     --frame = cadre extérieur ; chaque cellule-trait a sa fenêtre [--lf,--ls] dans --pl.
   PHASE B (--p, PENDANT le pin) : chaque élément interne apparaît un par un [--from,--span]. */

/* -- PHASE A : traits (tous finis à --pl≈0.78, AVANT l'accroche à --pl=1) -- */
.about-pin{ --pl:0; }   /* progression « dessin des traits » — posee par scroll-reveal.js */
.about__grid{ --frame:max(0, min(1, calc(var(--pl, 0) / 0.16))); }  /* cadre extérieur en tout premier */
.about__cell.ab-line{ --lp:max(0, min(1, calc((var(--pl, 0) - var(--lf, 0)) / var(--ls, .2)))); }
.about__cell--guepard::after{ transform:scaleY(var(--lp, 0)); }
.about__cell--intro::after{   transform:scaleX(var(--lp, 0)); }
.about__cell--agence::after{  transform:scaleY(var(--lp, 0)); }

/* -- PHASE B : contenus -- */
.about__grid .ab{
  --pp:max(0, min(1, calc((var(--p, 0) - var(--from, 0)) / var(--span, .26))));
}
/* déploiement des images en CERCLE concentrique depuis un COIN (rayon final = diagonale ~150%) :
   - guépard (haut-gauche)   : le cercle naît en haut-gauche et s'étend vers le bas-droite.
   - photographe (bas-droite): le cercle naît en bas-droite et s'étend vers le haut-gauche. */
.about__cell--guepard .about__circle.ab{
  clip-path:circle(calc(var(--pp, 0) * 150%) at 0% 0%); }
.about__cell--photographe .about__circle.ab{
  clip-path:circle(calc(var(--pp, 0) * 150%) at 100% 100%); }

.about__lead{ font-family:var(--serif); font-size:clamp(26px,3.2vw,44px); line-height:1.12;
  color:var(--noir); margin-bottom:20px; }
.about__lead em{ font-style:italic; color:var(--jaune-d, #c98f00); }
.about__body{ font-size:var(--fs-body); line-height:1.7; color:var(--noir-50); max-width:52ch; }
.about__cta{ margin-top:22px; width:fit-content; align-self:flex-start; }   /* lien vers la page Présentation (demande Fix 06/07) */

/* citation pleine largeur sur grande image — COLLÉE bord à bord (aucune marge autour) */
.about__quote{ position:relative; min-height:min(78vh,640px); display:flex; align-items:center;
  margin:0; overflow:hidden; }
.about__quote-img{ position:absolute; inset:0; background:#241d12 center/cover no-repeat; }
.about__quote-veil{ position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.15) 100%); }
.about__quote-txt{ position:relative; color:var(--blanc); }
.about__quote-txt p{ font-size:clamp(28px,4vw,58px); line-height:1.12; max-width:18ch; margin-bottom:18px; }
.about__quote-txt cite{ font-style:normal; font-size:var(--fs-small); letter-spacing:.04em;
  text-transform:uppercase; color:rgba(255,255,255,.8); }

/* =============================================================================
   ⚠️ LES QUATRE REGLES CI-DESSUS MANQUAIENT, du 2026-09-28 au 2026-10-05
   =============================================================================
   Elles sont le mode de defaillance que `CLAUDE.md` decrit : l'extraction par
   PLAGES DE LIGNES s'est arretee UNE REGLE TROP TOT. La plage prise allait
   jusqu'a `style.css:1120` (`.about__quote-img`) ; le bloc citation court en
   realite jusqu'a 1126. Le CSS restait parfaitement VALIDE, d'ou le silence.

   ⚠️ ET AUCUN DES DEUX GESTES AUTOMATIQUES NE POUVAIT LE VOIR : la seule page
   qui portait ce type (la Charte) n'a PAS de citation, donc aucune classe
   orpheline chez nous, et le geste 2 ne compare que des classes que nos vues
   portent. L'ecart n'est apparu qu'en PREPARANT la section de l'accueil, qui
   est le premier consommateur du bloc citation.

   Sans elles : pas de voile, et `.about__quote-txt` sans `color:var(--blanc)`
   ⇒ citation en texte SOMBRE sur une photo SOMBRE. Illisible, sans erreur.

   Bornes CALCULEES et non comptees : de la ligne de commentaire
   « citation pleine largeur » (1117) au dernier `}` de `cite` (1126), le repere
   suivant etant `@media (max-width:860px)` (1128).
   ============================================================================= */

/* =============================================================================
   REPLI SANS MOTEUR — la regle d'or, appliquee pour de bon
   =============================================================================
   `scroll-reveal.js` pose `rv-armed` sur `.about__grid` juste avant d'armer. Tant
   que la classe n'est pas la, on remet ce que les regles ci-dessus masquent :
   les traits sont traces, les photos entieres. La grille est donc correcte sans
   JS, sans moteur, et pour qui demande `prefers-reduced-motion`.

   ⚠️ CE BLOC REMPLACE LES 10 INVERSIONS, il ne s'y ajoute pas. Les inversions
   protegeaient la meme chose, mais en PERDANT l'animation une fois le moteur la ;
   ici les deux coexistent. Ne pas « simplifier » en supprimant l'un des deux.

   ⚠️ `transform:none` et non `scale(1)` : les traits ont des `transform-origin`
   differents et certains portent deja une translation. `none` neutralise sans
   avoir a rejouer chaque cas.

   ⚠️ Specificite verifiee, elle n'est pas accidentelle : `.about__grid:not(.rv-armed)
   .about__cell::after` fait (0,3,1) contre (0,2,1) pour `.about__cell--guepard::after`,
   y compris sa reecriture de la phase A. Un selecteur plus court ne mordrait pas.
   ============================================================================= */
.about__grid:not(.rv-armed) .about__circle{ clip-path:circle(150% at 50% 50%); }
.about__grid:not(.rv-armed)::before,
.about__grid:not(.rv-armed)::after,
.about__grid:not(.rv-armed) .about__cell::before,
.about__grid:not(.rv-armed) .about__cell::after{ transform:none; }

/* =============================================================================
   RESPONSIVE — DEUX blocs, et ils ne font PAS la meme chose
   =============================================================================
   ⚠️ CES DEUX BLOCS MANQUAIENT JUSQU'AU 2026-10-01, et ce fichier etait le SEUL
   CSS de bloc du projet sans aucun `@media` (les douze autres en ont 1 a 3). La
   consequence etait un defaut VISIBLE en preproduction : sur telephone, la grille
   gardait `height:calc(100vh - header)` et `overflow:hidden`, donc son contenu etait
   COUPE. Personne ne l'avait vu parce que les quatre pages ont ete comparees a la
   maquette sur ecran, et parce qu'une exception du controle de couverture masquait
   l'ecart (`about-pin__sticky`, retiree le meme jour).

   ⚠️ ILS DOIVENT RESTER DANS CET ORDRE ET EN FIN DE FICHIER. Une `@media` n'ajoute
   AUCUNE specificite : c'est l'ordre d'apparition qui tranche. Places avant le bloc
   `:not(.rv-armed)` ci-dessus, ils perdraient contre lui a egalite.

   Repris de `style.css` l. 1128-1146 et `mobile.css` l. 492-503.
   ============================================================================= */

/* -- jusqu'a 860px : on DEPIN et on empile en une colonne -- */
@media (max-width:860px){
  /* mobile : PAS de pin (la grille empilée est haute) -> scroll normal */
  .about-pin{ height:auto; }
  .about-pin__sticky{ position:static; height:auto; min-height:0; display:block; overflow:visible; }

  /* grille "Qui sommes-nous" : empilement 1 colonne, ordre logique intro -> guépard -> agence -> photographe */
  .about__grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    grid-template-areas:"intro" "guepard" "agence" "photographe";
    height:auto; max-height:none; min-height:0;
  }
  /* traits internes (pseudo-éléments) inutiles une fois empilé */
  .about__cell::before, .about__cell::after,
  .about__grid::before, .about__grid::after{ display:none; }
  .about__cell{ padding:clamp(20px,6vw,32px) !important; }
  .about__cell--guepard, .about__cell--photographe{ min-height:300px; }
  .about__circle{ position:relative; min-height:300px; }
}

/* -- de 861 a 1024px SEULEMENT : vh -> dvh --
   ⚠️ LA BORNE BASSE N'EST PAS UN DETAIL, ET LA MAQUETTE A PAYE POUR L'APPRENDRE.
   Son commentaire d'origine est conserve tel quel ci-dessous : il raconte le defaut
   exact qu'une MQ non bornee produisait — la grille empilee debordait de ~476 px
   hors de sa section, texte des deux dernieres cellules coupe. Le motif tient en une
   phrase : au-dessous de 861px le bloc precedent a deja DEPINE la section
   (`position:static; height:auto`), et redonner une hauteur EXPLICITE au parent
   rebasculait tout — un debordement n'agrandit jamais la boite parente.
   ⚠️ Ne pas « harmoniser » cette MQ sur les autres en retirant `min-width:861px`. */
/* LOT 1bis (22/07) : .about-pin__sticky vh->dvh RESTREINT à 861-1024px. En dessous, style.css a
   SA PROPRE MQ (max-width:860px) qui DÉPIN déjà la section "Qui sommes-nous" (position:static;
   height:auto) - la mettre ici sans restriction (comme les autres sélecteurs ci-dessus) la
   REBASCULAIT en hauteur FIXE (calc(100dvh - header), soit 595px mesurés à 375x667) par-dessus
   cette dépin, alors que mobile.css est chargé APRÈS style.css et gagne à spécificité égale :
   la grille empilée (4 cellules, 1591px mesurés) débordait alors de ~476px hors de la section
   (position:static + overflow:visible + hauteur EXPLICITE du parent -> le débordement n'agrandit
   jamais la boîte parente), texte des 2 dernières cellules coupé. Au-dessus de 860px la pin
   desktop reste active (pas de dépin côté style.css) : le correctif dvh y garde son utilité. */
@media (min-width:861px) and (max-width:1024px){
  /* `min-height` comme la regle de base (fiche 2026-11-09 n° 9) : une hauteur fixe ici
     recreerait le debordement sous la citation, sur tablette cette fois. */
  .about-pin__sticky{ min-height:calc(100dvh - var(--header-h, 112px)); }
}

/* =============================================================================
   TROISIEME bloc @media — le CTA de l'accueil, et pourquoi il est SEPARE
   =============================================================================
   La maquette centre `.about__cta` sous 1024px (`mobile.css:1355`). Nos deux
   blocs ci-dessus decoupent a `860` et `861-1024` : ensemble ils couvrent
   exactement la meme plage, mais y RECOPIER la regle en ferait deux copies a
   maintenir. Un troisieme bloc, en fin de fichier, dit la meme chose une fois.

   ⚠️ C'est un ARBITRAGE DE FIX QUI EN RENVERSE UN AUTRE, et le commentaire de
   la maquette le dit : le 06/07 le bouton restait aligne a gauche dans sa
   colonne de texte ; le 22/07 Fix l'a fait rejoindre la regle de centrage des
   CTA solitaires. C'est la SECONDE decision qui fait foi.

   ⚠️ REGLE MIXTE — ne pas emporter les voisines. Dans `mobile.css` cette ligne
   partage sa `@media` avec `.band-img__cta` et `.pg-asso__site`, qui
   appartiennent a d'autres blocs (band-img, actions-nature) et ont deja leur
   propre fichier. On ne prend QUE `.about__cta`.

   ⚠️ Et on centre le BOUTON, pas son bloc : `display:flex; width:fit-content;
   margin-inline:auto`. Un `text-align:center` sur la cellule recentrerait aussi
   le titre et les deux paragraphes, qui restent alignes a gauche.

   ⚠️ Sans effet sur la Charte, qui n'a pas de CTA — la classe n'y existe pas.
   ============================================================================= */
@media (max-width:1024px){
  .about__cta{ display:flex; width:fit-content; margin-inline:auto; }
}