/* ══════════════════════════════════════════════════════════════════
   LES PAGES INTERNES — en-tete, retour, suite
   ──────────────────────────────────────────────────────────────────
   POURQUOI CE FICHIER. Le 10 septembre 2026, le portfolio, les
   services, la presentation et la FAQ sont sortis de l'accueil pour
   devenir de vraies pages. Elles partagent trois dispositifs, et
   seulement trois :

     .pg-retour   le lien qui remonte d'ou l'on vient
     .pg-tete     l'en-tete de page : rang, titre, chapeau, filet
     .suite       la sortie, en bas : ou aller ensuite

   TROIS, ET PAS QUATRE. Une page interne n'a pas besoin d'un
   vocabulaire a elle : tout le reste de son contenu vient de
   l'accueil et porte deja ses classes, donc son style. Ce fichier ne
   redecrit rien de ce que mdg.css dessine.

   PAS DE CADRE, PAS DE CARTE, PAS DE GRILLE D'IMAGES. C'est la
   direction du site : ce qui separe, c'est le vide et le filet, pas la
   bordure. Un « ou aller ensuite » ecrit en trois cartes aurait
   ressemble a n'importe quel gabarit ; ecrit en trois lignes de
   registre, il ressemble au reste du site.
   ══════════════════════════════════════════════════════════════════ */

/* ─── LE RETOUR ─────────────────────────────────────────────────────
   Il porte data-retour : assets/retour.js lui rend l'adresse ET la
   position d'ou l'on est parti. Son href ecrit reste le repli, pour
   qui arrive ici par un moteur de recherche. */
.pg-retour{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:700;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); text-decoration:none;
  transition:color .22s;
}
.pg-retour i{ font-style:normal; transition:transform .28s cubic-bezier(.16,1,.3,1) }
.pg-retour:hover{ color:var(--accent) }
.pg-retour:hover i{ transform:translateX(-4px) }
.pg-retour:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:2px }

/* ─── L'EN-TETE DE PAGE ─────────────────────────────────────────────
   Le rang (01…) est en chiffre romain de la maison : gros, creux,
   pose a gauche du titre. Sur telephone il passe au-dessus, en petit :
   un chiffre de 6 rem qui vole la moitie d'un ecran de 375 px n'est
   plus un reperage, c'est un obstacle. */
.pg-tete{
  padding:clamp(6rem,11vh,9rem) var(--gutter,1.5rem) clamp(2.4rem,5vw,4rem);
  max-width:1180px; margin:0 auto;
}
.pg-tete-haut{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  padding-bottom:clamp(2.2rem,5vw,3.6rem);
}
.pg-eti{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-display); font-weight:700;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent);
}
.pg-eti::before{ content:''; width:26px; height:1.5px; background:var(--accent); flex:none }

.pg-corps{ display:flex; align-items:flex-start; gap:clamp(1.5rem,4vw,3.4rem) }
.pg-rang{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.6rem,6vw,5.4rem); line-height:.8;
  color:transparent; -webkit-text-stroke:1px var(--border2);
  flex:none; user-select:none;
}
.pg-txt{ min-width:0; flex:1 }
.pg-h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.3rem,5.6vw,4.4rem); line-height:.98;
  letter-spacing:-.02em; color:var(--light); margin:0;
}
.pg-h1 em{
  display:block; font-family:var(--font-accent); font-style:italic;
  font-weight:400; color:var(--accent); letter-spacing:-.01em;
}
.pg-lede{
  font-family:var(--font-body); font-weight:300;
  font-size:clamp(.92rem,1.5vw,1.06rem); line-height:1.7;
  color:var(--off); max-width:56ch; margin:clamp(1.1rem,2.4vw,1.7rem) 0 0;
}
.pg-filet{
  display:block; height:1px; background:var(--border);
  margin-top:clamp(2.2rem,5vw,3.4rem);
}
/* Le compte de ce que la page contient. Il tient sur une ligne et se
   lit comme un cartel de musee, pas comme un tableau de bord. */
.pg-compte{
  display:flex; flex-wrap:wrap; gap:clamp(1.1rem,3vw,2.4rem);
  margin-top:clamp(1.4rem,3vw,2rem);
  font-family:var(--font-display); font-size:.64rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.pg-compte b{ color:var(--light); font-variant-numeric:tabular-nums }

@media(max-width:767px){
  .pg-corps{ flex-direction:column; gap:.9rem }
  .pg-rang{ font-size:1.6rem; -webkit-text-stroke:1px var(--accent); opacity:.7 }
}

/* ─── LA SUITE ──────────────────────────────────────────────────────
   Aucune page ne doit etre un cul-de-sac. Trois destinations au plus,
   en lignes de registre : un rang, un nom, une phrase, une fleche.
   Le survol pousse la fleche et allume le nom — rien de plus, parce
   qu'il n'y a rien de plus a dire. */
.suite{
  border-top:1px solid var(--border);
  padding:clamp(3rem,7vw,5rem) var(--gutter,1.5rem) clamp(3.4rem,8vw,6rem);
  max-width:1180px; margin:0 auto;
}
.suite-eti{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); margin-bottom:clamp(1.4rem,3vw,2.2rem);
}
.suite-l{ display:flex; flex-direction:column }
.suite-i{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline;
  gap:clamp(14px,2.4vw,28px);
  padding:clamp(1.15rem,2.6vw,1.7rem) 0;
  border-bottom:1px solid var(--border);
  text-decoration:none; color:inherit;
  transition:padding-left .3s cubic-bezier(.16,1,.3,1);
}
.suite-i:hover{ padding-left:10px }
.suite-n{
  font-family:var(--font-accent); font-style:italic;
  font-size:1rem; color:var(--accent); flex:none;
}
.suite-t{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.15rem,2.4vw,1.7rem); line-height:1.15;
  letter-spacing:-.012em; color:var(--light);
  transition:color .22s;
}
.suite-t span{
  display:block; margin-top:.4rem;
  font-family:var(--font-body); font-weight:300; font-size:.84rem;
  line-height:1.55; letter-spacing:0; color:var(--dim);
}
.suite-i:hover .suite-t{ color:var(--accent) }
.suite-f{
  font-family:var(--font-display); font-size:1.1rem; color:var(--dim);
  flex:none; transition:transform .3s cubic-bezier(.16,1,.3,1), color .22s;
}
.suite-i:hover .suite-f{ transform:translateX(6px); color:var(--accent) }
.suite-i:focus-visible{ outline:2px solid var(--accent); outline-offset:4px }

/* ─── L'APERCU, COTE ACCUEIL ────────────────────────────────────────
   Le pendant de .suite : la ligne qui, sous un extrait, mene a la page
   qui developpe. Une seule action, alignee a droite du filet qui ferme
   la section — c'est la meme grammaire que .section-cta-band, en plus
   sobre, et elle sert partout ou l'accueil ne montre qu'un extrait. */
.vers{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.2rem; flex-wrap:wrap;
  border-top:1px solid var(--border);
  margin-top:clamp(1.8rem,4vw,3rem);
  padding-top:clamp(1.2rem,2.6vw,1.8rem);
}
.vers-mot{
  font-family:var(--font-body); font-weight:300; font-size:.88rem;
  line-height:1.5; color:var(--dim); margin:0; max-width:46ch;
}
.vers-lien{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700;
  font-size:.78rem; letter-spacing:.04em;
  color:var(--accent); text-decoration:none; white-space:nowrap;
}
.vers-lien i{ font-style:normal; transition:transform .28s cubic-bezier(.16,1,.3,1) }
.vers-lien:hover i{ transform:translateX(5px) }
.vers-lien:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:2px }

/* ══════════════════════════════════════════════════════════════════
   L'ACCUEIL, VERSION VITRINE
   ──────────────────────────────────────────────────────────────────
   Depuis le 10 septembre 2026, l'accueil ne porte plus les catalogues :
   il porte des EXTRAITS, et chaque extrait mene a la page qui le
   developpe. Ces classes dessinent les quatre extraits qui n'avaient
   aucun balisage a reprendre — tout le reste de la page garde le sien,
   donc son dessin, au caractere pres.

   `ap-` pour apercu. Prefixe verifie libre dans mdg.css avant d'etre
   choisi : une collision de nom serait restee invisible jusqu'au jour
   ou l'une des deux regles aurait gagne.
   ══════════════════════════════════════════════════════════════════ */

/* ─── LA TETE D'UNE SECTION D'ACCUEIL ───────────────────────────── */
.ap{
  max-width:1180px; margin:0 auto;
  padding:clamp(3.4rem,8vw,6.4rem) var(--gutter,1.5rem);
}
.ap-tete{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(1.4rem,4vw,3rem); flex-wrap:wrap;
  padding-bottom:clamp(1.6rem,3.6vw,2.6rem);
  border-bottom:1px solid var(--border);
}
.ap-h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem,4.2vw,3.2rem); line-height:1;
  letter-spacing:-.02em; color:var(--light); margin:.7rem 0 0;
}
.ap-h2 em{
  display:block; font-family:var(--font-accent); font-style:italic;
  font-weight:400; color:var(--accent); letter-spacing:-.01em;
}
.ap-mot{
  font-family:var(--font-body); font-weight:300; font-size:.92rem;
  line-height:1.65; color:var(--off); max-width:40ch; margin:0;
}

/* ─── 02 · MOI ──────────────────────────────────────────────────────
   Le portrait a gauche, la parole a droite. Aucun cadre autour : c'est
   le filet du bas et le vide qui separent. */
.moi{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(1.6rem,5vw,4.4rem); align-items:center;
}
.moi-portrait{ margin:0; position:relative }
.moi-portrait img{
  width:100%; height:auto; display:block; aspect-ratio:4/5;
  object-fit:cover; object-position:center 18%; border-radius:2px;
  filter:grayscale(1) contrast(1.04);
}
.moi-portrait figcaption{
  margin-top:.7rem;
  font-family:var(--font-display); font-weight:700; font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
.moi-h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem,4vw,3rem); line-height:1;
  letter-spacing:-.02em; color:var(--light); margin:.9rem 0 0;
}
.moi-h2 em{
  font-family:var(--font-accent); font-style:italic; font-weight:400;
  color:var(--accent);
}
.moi-p{
  font-family:var(--font-body); font-weight:300; font-size:.95rem;
  line-height:1.72; color:var(--off); margin:1.3rem 0 0; max-width:52ch;
}
.moi-p b{ color:var(--light); font-weight:600 }
.moi-n{
  display:flex; flex-wrap:wrap; gap:clamp(1.4rem,4vw,2.8rem);
  margin:clamp(1.5rem,3.4vw,2.2rem) 0 0;
  padding-top:clamp(1.2rem,2.6vw,1.6rem); border-top:1px solid var(--border);
}
.moi-n span{
  display:flex; flex-direction:column; gap:.25rem;
  font-family:var(--font-display); font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.moi-n b{
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1; letter-spacing:-.01em;
  color:var(--light); font-variant-numeric:tabular-nums;
}
@media(max-width:860px){ .moi{ grid-template-columns:1fr } }

/* ─── 04 · LES SITES ────────────────────────────────────────────────
   Une capture de site ne se lit pas dans une vignette de 80 px — c'est
   deja ce que dit le chapitre Web du portfolio. Ici elles sont en
   grand, une par ligne, cartel a cote. Trois lignes, trois sites : le
   compte exact de ce qui existe. */
/* TROIS DE FRONT, PAS TROIS L'UN SOUS L'AUTRE. Chaque site occupait
   une ligne entiere, capture a gauche et cartel a droite : mille
   quatre cents pixels pour trois projets, sur une page qui promet un
   apercu. En rangee, la section se lit d'un regard et tient dans un
   ecran — et une capture de site reste parfaitement lisible a un tiers
   de la largeur, ce qu'une vignette de 80 px ne permettait pas. */
.apw{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
      gap:clamp(1rem,2.6vw,2rem) }
.apw-i{
  display:block;
  padding:0 0 clamp(1rem,2vw,1.4rem); border-bottom:1px solid var(--border);
  text-decoration:none; color:inherit;
}
.apw-vue{ position:relative; overflow:hidden; border-radius:3px; background:var(--surface) }
.apw-vue img{
  width:100%; height:auto; display:block; aspect-ratio:16/10;
  object-fit:cover; object-position:center top;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.apw-i:hover .apw-vue img{ transform:scale(1.03) }
.apw-ici{
  position:absolute; top:12px; left:12px;
  font-family:var(--font-display); font-weight:700; font-size:.55rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:#101206; background:var(--accent); padding:4px 9px; border-radius:9999px;
}
.apw-n{ font-family:var(--font-accent); font-style:italic; font-size:1rem; color:var(--accent) }
.apw-t{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.05rem,1.9vw,1.35rem); line-height:1.15;
  letter-spacing:-.012em; color:var(--light); margin:.35rem 0 0;
  transition:color .22s;
}
.apw-i:hover .apw-t{ color:var(--accent) }
.apw-s{
  font-family:var(--font-body); font-weight:300; font-size:.8rem;
  line-height:1.5; color:var(--dim); margin:.4rem 0 0;
}
.apw-go{
  display:inline-flex; align-items:center; gap:8px; margin-top:.7rem;
  font-family:var(--font-display); font-weight:700; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.apw-go i{ font-style:normal; transition:transform .28s cubic-bezier(.16,1,.3,1) }
.apw-i:hover .apw-go i{ transform:translateX(5px) }
/* LE FORMAT DE LA CAPTURE, PAS UN FORMAT CHOISI. Les trois captures
   font 1600x1000 et 1600x963, soit 16/10. Le cadre etait a 16/11 :
   `cover` rognait donc le bas de chaque page d'accueil et donnait
   l'impression d'un zoom. On montre la capture, pas un detail. */
.apw-vue img{ aspect-ratio:16/10 }
.apw-n{ display:block; margin-bottom:.2rem }
@media(max-width:900px){ .apw{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:600px){ .apw{ grid-template-columns:1fr } }

/* ─── 08 · LE CADRE DE COLLABORATION ────────────────────────────────
   Un apercu, pas un contrat : quatre mentions sur une ligne, et le
   lien vers la page qui les detaille. Le reste — urgence, moyens de
   paiement, propriete des fichiers — vit sur /tarifs. */
.apc{
  max-width:1180px; margin:0 auto;
  padding:clamp(2.4rem,5vw,3.6rem) var(--gutter,1.5rem);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1.2rem,3vw,2.4rem); flex-wrap:wrap;
}
.apc-t{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.25rem,2.4vw,1.8rem); line-height:1.1;
  letter-spacing:-.015em; color:var(--light); margin:0;
}
.apc-t em{ font-family:var(--font-accent); font-style:italic; font-weight:400; color:var(--accent) }
.apc-l{
  display:flex; flex-wrap:wrap; gap:.55rem 1.5rem; margin:.9rem 0 0;
  font-family:var(--font-display); font-size:.66rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.apc-l b{ color:var(--light) }

/* ─── 09 · LE LEARNING CENTER ───────────────────────────────────────
   La tuile du heros dit deja « Comprends la lumiere en 3D » en une
   ligne. Ici on montre ce que ca veut dire : l'etude Rim Light qui
   sert de sujet aux lecons, en grand, a cote de ce qu'on y apprend. */
.apl{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,3.4rem); align-items:center;
}
.apl-vue{ position:relative; overflow:hidden; border-radius:3px }
/* 16/9 : c'est le format de la video dont vient la vignette. Un cadre
   en 4/3 lui aurait rogne les cotes, et le sujet est excentre. */
.apl-vue img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover }
.apl-libre{
  position:absolute; top:12px; left:12px;
  font-family:var(--font-display); font-weight:700; font-size:.55rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:#101206; background:var(--accent); padding:4px 9px; border-radius:9999px;
}
.apl-l{
  display:flex; flex-direction:column; gap:.5rem; margin:1.3rem 0 0;
  padding-top:1.1rem; border-top:1px solid var(--border);
  font-family:var(--font-body); font-weight:300; font-size:.88rem;
  line-height:1.5; color:var(--off);
}
.apl-l span{ display:flex; gap:.7rem }
.apl-l i{ font-style:normal; color:var(--accent); font-family:var(--font-accent) }
@media(max-width:860px){ .apl{ grid-template-columns:1fr } }


/* ─── LA SELECTION COMPACTE DE L'ACCUEIL ────────────────────────────
   Les chapitres du portfolio prennent leur grille au lieu de leur
   scene — voir `data-chap-compact` dans assets/accueil.js. Ce qui
   suit ne fait que resserrer : le dessin des vignettes reste celui de
   mdg.css, au pixel pres. */
/* LES DEUX DISCIPLINES COTE A COTE. L'une sous l'autre, la selection
   reprenait mille cinq cents pixels — la moitie de ce que prenaient les
   scenes, mais toujours une page entiere pour huit vignettes. En deux
   colonnes, les huit tiennent sur UNE rangee : on en fait le tour d'un
   regard, et c'est exactement ce qu'un echantillon doit permettre. */
.chap-wrap--compact{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(1.6rem,3.4vw,3.2rem);
  padding-top:0; padding-bottom:clamp(1rem,2vw,1.6rem);
}
.chap-wrap--compact .chap{ padding:clamp(1rem,2vw,1.6rem) 0 0; border-top:none }
.chap-wrap--compact .chap-head{ margin-bottom:10px }
.chap-wrap--compact .chap-grid{ gap:8px }
@media(max-width:760px){
  .chap-wrap--compact{ grid-template-columns:1fr; gap:0 }
  .chap-wrap--compact .chap + .chap{ padding-top:clamp(1.4rem,3vw,2rem) }
}

/* Quatre pieces dans une grille de cinq laissaient une colonne vide a
   droite : ca se lit comme un trou, pas comme du vide. */
.chap-grid--court{ grid-template-columns:repeat(4,1fr) }
/* Une pochette est carree. Rognee au format 4/5 des visuels, elle perd
   sa marge basse — celle ou le titre de l'album est souvent pose. */
.chap-grid--carre .chap-it{ aspect-ratio:1/1 }
@media(max-width:900px){ .chap-grid--court{ grid-template-columns:repeat(4,1fr) } }
@media(max-width:600px){ .chap-grid--court{ grid-template-columns:repeat(2,1fr) } }

/* ─── 06 · LE VOILE DE #collabs NE DOIT PLUS COUVRIR LA BANDE ───────
   #collabs porte deux decorations : une photo de fond a 18 %
   (::before) et un degrade sombre qui la rend lisible (::after,
   rgba(14,14,14,.88) en haut et en bas). Toutes deux sont en
   `position:absolute; z-index:0`.

   Un pseudo-element est le DERNIER enfant : a z-index egal, il peint
   par-dessus tout ce qui le precede. C'etait sans consequence tant que
   la section ne contenait que du texte clair sur fond noir — le voile
   n'y ajoutait qu'une vignette.

   Depuis que la bande « Ils m'ont confie leur image » et les
   temoignages ont rejoint cette section, ce voile passait SUR une
   bande creme : #eceae3 s'affichait a peu pres #303030, et les neuf
   logos, deja poses en noir a 50 %, devenaient illisibles. Un aplat
   rouge vif teste au meme endroit ressortait bordeaux — la mesure qui
   a designe le coupable.

   Les deux blocs remontent d'un cran. Le voile reste, derriere, ou il
   fait ce pour quoi il existe : tenir la photo de fond. */
#collabs > .conf,
#collabs > #social-proof,
#collabs > .ap{ position:relative; z-index:1 }

/* ══════════════════════════════════════════════════════════════════
   LE RYTHME VERTICAL DE L'ACCUEIL
   ──────────────────────────────────────────────────────────────────
   MESURE AVANT ECRITURE, sur les treize sections de la page :

       hero      98 / 35      services   96 / 96
       carte     90 / 83      collabs    96 / 96
       about   19,5 / 19,5    process    96 / 96
       preuve    69 / 97      conditions  0 / 0
       selection 56 / 80      learning    0 / 0
       web        0 / 0       faq        96 / 96

   Trois familles cohabitaient : les sections d'origine a 96 px, les
   sections neuves a 0 — elles s'en remettaient au rembourrage interne
   de `.ap` — et `#about`, a 19,5 px, qui n'en avait pour ainsi dire
   aucun. L'intervalle reel entre deux titres allait donc du simple au
   quintuple selon l'endroit, et la page se lisait par a-coups.

   UNE SEULE MESURE, ET C'EST LA SECTION QUI LA PORTE. `.ap` n'ajoute
   plus rien verticalement : deux rembourrages empiles ne se lisent pas
   comme un intervalle, ils se lisent comme une erreur. 96 px au large,
   56 px sur telephone — les valeurs des sections d'origine, qui sont
   deja celles du site.
   ══════════════════════════════════════════════════════════════════ */
:root{ --rythme:clamp(3.5rem,6vw,6rem) }

/* Le rembourrage interne de `.ap` disparait : il faisait doublon avec
   celui de la section des que les deux existaient. */
main > section > .ap{ padding-top:0; padding-bottom:0 }

/* TOUTES LES SECTIONS DE CONTENU, y compris celles qui portaient deja
   96 px en dur. Une valeur fixe et une valeur fluide ne se rejoignent
   qu'a une seule largeur d'ecran : a 1 200 px, les neuves mesuraient
   72 px et les anciennes 96. L'ecart etait plus petit qu'avant, il
   restait visible. Une seule regle, une seule mesure.

   TROIS SECTIONS RESTENT A LEUR ECRITURE : le heros, la fiche et « La
   preuve ». Ce sont des scenes, pas des chapitres — la fiche est
   epinglee au defilement et son rembourrage fait partie de la
   mecanique, et « La preuve » est un bloc detache qui flotte dans le
   noir avec ses propres marges. Les normaliser deplacerait leur
   dispositif, pas leur intervalle. */
#about, #web, #learning, #portfolio-accordion,
#services, #collabs, #process, #faq, #contact{
  padding-top:var(--rythme)!important;
  padding-bottom:var(--rythme)!important;
}

/* LE CADRE DE COLLABORATION EST UN FILET, PAS UNE SECTION. Il tient en
   une ligne, entre deux traits : lui donner l'intervalle plein le
   ferait flotter au milieu d'un vide de trois cents pixels. Il prend
   la moitie, de part et d'autre de ses propres bordures. */
#conditions{
  padding-top:calc(var(--rythme) * .5)!important;
  padding-bottom:calc(var(--rythme) * .5)!important;
}


/* ─── CE QUE COMPTENT LES NOMBRES DE L'EN-TETE ──────────────────────
   Le libelle qui ouvre la ligne, et la phrase qui la ferme. Sans eux,
   « 27 visuels » se lit comme un total de sept ans de travail. */
.pg-compte-mot{
  color:var(--accent); letter-spacing:.2em;
}
.pg-compte-suite{
  margin:clamp(.7rem,1.6vw,1rem) 0 0;
  font-family:var(--font-body); font-weight:300; font-size:.82rem;
  line-height:1.55; color:var(--dim); max-width:60ch;
}
.pg-compte-suite b{ color:var(--off); font-weight:600 }
.pg-compte-suite a{ color:var(--off); text-decoration:none; border-bottom:1px solid var(--border2) }
.pg-compte-suite a:hover{ color:var(--accent); border-bottom-color:var(--accent) }


/* ══════════════════════════════════════════════════════════════════
   LE HEROS, AU CLAIR
   ──────────────────────────────────────────────────────────────────
   IL A ETE DESSINE CLAIR. mdg.css, ligne 7648 : le titre du heros y
   est `color:var(--dark)`, les boutons aussi, la puce aussi. Un bloc
   de retouches pose plus tard l'a bascule au noir, en forcant
   `color:var(--light)!important` sur une quarantaine de regles.

   ON NE DEFAIT PAS CES QUARANTE REGLES. On redefinit les JETONS
   qu'elles lisent, sur la section seule : `--light` devient un noir,
   `--off` et `--dim` des gris de papier, les filets passent au sombre
   transparent. Les regles ne changent pas d'un caractere et le heros
   se retourne d'un coup. Retirer `nhero--clair` du balisage suffit a
   revenir en arriere.

   POURQUOI LE CLAIR. Les deux prises du profil sont sur fond blanc.
   Sur du noir il aurait fallu les detourer, et un detourage sur des
   cheveux courts a contre-jour se voit toujours. Sur du papier, la
   silhouette se pose sans couture.
   ══════════════════════════════════════════════════════════════════ */
#hero.nhero--clair{
  background:#f2f1ec!important;
  --light:#131210;                    /* les titres et le corps */
  --off:#3d3b36;                      /* les descriptions */
  --dim:#6d6960;                      /* les etiquettes */
  --border:rgba(19,18,16,.10);
  --border2:rgba(19,18,16,.20);
  --surface:#e8e6e0;
}
/* Le grain multiplie : sur du clair il pose du papier, sur du noir il
   ne se voyait pas. On le monte d'un cran. */
#hero.nhero--clair .nh-grain{ opacity:.06!important }

/* LE SECOND SOUFFLE DU TITRE RESTE VERT, mais pas le meme vert. Le
   jaune-vert de la marque tombe a 1,4:1 sur du papier — illisible. La
   palette porte deja `--accent-deep`, calibre a 5:1 sur clair : c'est
   exactement le cas pour lequel il existe. */
#hero.nhero--clair .nh-title em{ color:var(--accent-deep)!important }

/* Le bouton plein garde le vert de marque : c'est un APLAT avec du
   texte noir dessus, son contraste ne passe pas par la couleur du
   texte. Le bouton nu prend le filet sombre. */
#hero.nhero--clair .nh-btn--s{
  color:var(--light)!important; border-color:var(--border2)!important;
}
#hero.nhero--clair .nh-tag{
  background:rgba(19,18,16,.9)!important; color:#f2f1ec!important;
  border-color:transparent!important;
}
#hero.nhero--clair .nh-pic{ border-color:#f2f1ec!important; background:var(--surface)!important }

/* ─── LA SCENE A DEUX COUCHES ───────────────────────────────────────
   Les deux prises se superposent au pixel. La seconde arrive par
   l'opacite, sans rien deplacer : un glissement ferait un raccord,
   pas un geste. */
/* ─── SUR TELEPHONE, UNE SEULE MISE EN PAGE A LA FOIS ───────────────
   mdg.css choisit entre les deux versions de la methode et de la
   presentation par le conteneur : `#process > .container{display:none}`
   sous 768 px, et `.process-mob` prend le relais.

   Les sections reconstruites portent `.ap` et non `.container` : la
   regle ne les voyait plus, et la version bureau restait affichee sur
   telephone par-dessus la version telephone. On lui apprend le nouveau
   nom, sans toucher a l'ancienne.

   LA SORTIE, ELLE, RESTE VISIBLE. Le dernier `.ap` de la section porte
   le lien « Comprendre le fonctionnement » : le masquer laisserait la
   methode sans porte, exactement le defaut qu'on vient de corriger sur
   la FAQ. */
@media(max-width:767px){
  #process > .ap:not(:last-of-type){ display:none!important }
}

/* ─── URANUS, EN BAS DE PAGE, SUR TELEPHONE ─────────────────────────
   Ses deux rangees sont ecrites en `justify-content:space-between` avec
   `flex-wrap` : sur un ecran large, le texte tient a gauche et l'action
   a droite. Sous 768 px elles passent a la ligne — et `space-between`
   n'a plus rien a repartir. Tout se colle donc a gauche, juste
   au-dessus d'un pied de page entierement centre. Deux alignements
   contraires a trente pixels d'ecart.

   Les styles sont ecrits en ligne dans le balisage : on ne peut pas les
   modifier sans toucher a chaque attribut. On les recouvre ici, pour la
   seule largeur ou ils ne tiennent pas. */
@media(max-width:767px){
  #for-creators > div{
    flex-direction:column;
    align-items:center!important;
    justify-content:center!important;
    text-align:center;
  }
  #for-creators > div > div{
    justify-content:center!important;
    text-align:center;
    width:100%;
  }
  /* LE SURTITRE EST UN FLEX, pas un bloc : il porte un trait et un mot
     cote a cote. `text-align` ne deplace pas des enfants de flex — il
     lui faut son propre axe. C'est la seule ligne qui restait a
     gauche. */
  #for-creators p{ text-align:center; justify-content:center }
}


/* ══════════════════════════════════════════════════════════════════
   LA BARRE DE NAVIGATION — DESEMPILEE, ET SON ACTION VISIBLE
   ──────────────────────────────────────────────────────────────────
   ELLE PASSAIT SUR DEUX LIGNES. Sept entrees, la mention de
   disponibilite, l'heure de Kaolack, le selecteur de langue et DEUX
   pastilles vertes : « À propos » et « Learning Center » se coupaient
   en deux. Une barre qui se plie n'est plus une barre, c'est une
   liste.

   La pastille « Learning Center » est partie : elle repetait, en plus
   gros, une entree du menu situee six centimetres a gauche. Ce qui
   reste tient sur une ligne, et les libelles ne se coupent plus.

   ET SON ACTION ETAIT INVISIBLE. mdg.css pose, avec raison :

       .mob-cta, .nav-cta, .scta-link--accent, .pass-cta
         { color: var(--black) !important }

   « Sur tout aplat vert, le texte est NOIR » — le vert de la marque
   est trop lumineux pour porter du texte clair. Sauf que `.nav-cta`
   n'est PAS un aplat : sa regle de base est `background:transparent`
   avec un contour vert. Du noir sur transparent, au-dessus d'une barre
   noire : le bouton existait, mesurait 112 x 43 px, et ne se voyait
   pas. La pastille Learning Center y echappait parce qu'elle portait
   un style en ligne qui remettait le vert.

   On ne desactive pas la regle : on lui donne raison. L'action devient
   l'aplat qu'elle decrit, et c'est de toute facon ce qu'une action
   principale doit etre — la seule chose remplie de la barre.
   ══════════════════════════════════════════════════════════════════ */
nav .nav-cta--action{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  /* UNE PASTILLE NE SE COUPE PAS. A 1 180 px elle passait sur deux
     lignes — « Un projet » puis « ? » — et deformait la barre entiere.
     L'espace insecable ne protege que le point d'interrogation ; c'est
     la coupure APRES « Un » qu'il fallait interdire. */
  white-space:nowrap;
}
nav .nav-cta--action:hover{
  background:var(--accent-press)!important;
  border-color:var(--accent-press)!important;
}

/* Un libelle de menu ne se coupe pas en deux. « À propos » et
   « Learning Center » le faisaient des que la barre serrait. */
nav .nav-links a{ white-space:nowrap }
nav .nav-links{ column-gap:clamp(.9rem,1.8vw,2rem) }

/* En dessous de 1200 px, l'heure de Kaolack est la premiere chose dont
   on peut se passer : elle est reprise dans le pied de page et dans la
   fenetre de contact. La mention « Disponible », elle, reste. */
@media(max-width:1200px){
  /* mdg.css pose `display:inline-flex!important` sur ces spans : sans
     le meme poids, la regle ne s'applique pas. */
  nav .nav-avail > span:last-child{ display:none!important }
}


/* ══════════════════════════════════════════════════════════════════
   LE TELEPHONE — CINQ CORRECTIONS
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:767px){

  /* ─── 1. LES TROIS DATES TIENNENT SUR UNE LIGNE ───────────────────
     En flex avec retour a la ligne, 2018 et 2019 se calaient cote a
     cote et 2026 tombait seule en dessous : une orpheline, et un bloc
     de 124 px pour trois nombres. Trois colonnes egales, comme sur
     ecran — le corps descend d'un cran pour que ca rentre a 375 px, et
     c'est tout ce qui change. */
  .moi-n{
    display:grid!important; grid-template-columns:repeat(3,1fr);
    gap:.7rem!important;
  }
  .moi-n span{ font-size:.52rem; letter-spacing:.12em }
  .moi-n b{ font-size:clamp(1.15rem,5.6vw,1.5rem) }

  /* ─── 2. « SEPT ANS » NE PREND PLUS UNE PAGE ──────────────────────
     Les trois chiffres passaient en trois cartes empilees de 80 px :
     261 px pour dire 7, 50 et 9. En trois colonnes ils disent la meme
     chose en un coup d'oeil, et la page raccourcit d'autant.

     Le bloc perd aussi ses fonds de carte : a trois par ligne, ce
     sont les chiffres qui separent, pas les cadres. */
  #preuve .pv-grille{
    grid-template-columns:repeat(3,1fr)!important;
    gap:.6rem!important;
  }
  #preuve .pv-c{
    flex-direction:column!important; align-items:flex-start;
    background:transparent!important; padding:0!important;
    gap:.15rem;
  }
  #preuve .pv-c b{ font-size:clamp(1.7rem,9vw,2.4rem)!important; line-height:1 }
  #preuve .pv-c span{ font-size:.56rem; letter-spacing:.1em; line-height:1.3 }
  /* Celui qui portait l'aplat vert le garde en trait, pas en fond :
     un aplat de 100 px de large sur trois se lit comme une erreur. */
  #preuve .pv-c--fort{ border-left:2px solid var(--accent); padding-left:.5rem!important }

  /* ─── 3. LA BANDE GRISE ENTRE LES SERVICES ET LES LOGOS ───────────
     #collabs porte deux decorations : une photo de fond a 18 % et un
     degrade sombre qui la rend lisible. Sur ecran large elles habillent
     une section pleine ; sur telephone, la section commence par 56 px
     de rembourrage avant la bande creme — et ces 56 px n'affichent que
     la photo grise. Un rectangle gris entre le noir et le creme, qui ne
     raccorde rien.

     Les deux decorations partent sous 768 px. Ce qui reste — les
     logos, les temoignages — porte deja son propre fond. */
  #collabs::before,
  #collabs::after{ display:none!important }
  #collabs{ padding-top:0!important }
  /* La bande creme gardait 26 px de marge haute : #collabs est en
     --dark (#0e0e0e) quand la section d'avant est en --black (#060606).
     Ces 26 px affichaient donc une marche d'un noir a l'autre, juste
     sous le badge — le meme defaut que la photo, en plus discret. */
  #collabs > .conf{ margin-top:0!important }

  /* ─── 4. DEUX FILETS POUR UNE SEULE FIN ───────────────────────────
     #social-proof ferme sur un filet bas ; la ligne « Voir les
     collaborations » en ouvre un autre 56 px plus bas. Deux traits
     paralleles, sans rien entre eux. On garde celui qui sert — celui
     de la sortie — et on retire celui qui ne fait que finir. */
  #collabs > #social-proof{ border-bottom:none!important }

  /* ─── 5. LES DEUX BARRES FLOTTANTES RESERVENT LEUR PLACE ──────────
     La barre d'onglets fait 60 px, a 14 px du bord ; la navigation
     rapide 44 px juste au-dessus. Elles couvrent 120 px du bas de
     l'ecran en permanence, et ni `body` ni `main` ne leur reservaient
     un seul pixel : le contenu passait dessous.

     Consequence, mesuree section par section : la ligne de confiance du
     heros, « Decouvrir mon parcours », la tuile du Learning Center, la
     seconde rangee de covers, le deuxieme site — tous coupes. Ce n'est
     pas un defaut par section, c'est le meme, treize fois.

     Le pied de page porte deja son propre degagement ; c'est la fin de
     CHAQUE section qu'il fallait proteger, d'ou le rembourrage sur le
     conteneur plutot que sur le corps. */
  main{ padding-bottom:calc(60px + 44px + 28px)!important }
}