/* ==========================================================================
   Berrest Conseil — feuille de styles du site
   Fichier unique partagé par les 13 pages du dossier déployé, lié via <link>
   dans chaque <head>. (Le gabarit d'article le charge aussi, mais il n'est pas
   déployé : voir section 1 de etat-site-berrest.md.)

   LIRE AVANT DE MODIFIER
   ----------------------
   • Les règles NON préfixées s'appliquent à toutes les pages.
   • Les règles préfixées :where(body.p-<page>) ne concernent que cette page.
     Le :where() n'ajoute AUCUNE spécificité : il sert uniquement à cibler une
     page, sans changer qui gagne la cascade. Ne pas le remplacer par
     body.p-<page> — ça casserait la cascade.
   • L'ORDRE DES RÈGLES EST SIGNIFIANT. Il a été reconstruit pour reproduire à
     l'identique la cascade des 10 anciens blocs <style>. Déplacer une règle
     peut changer le rendu. Ajouter une règle : la placer près de ses voisines
     de même composant, pas en fin de fichier.
   • Une règle « propre à une page » qui devient utile ailleurs doit être
     DÉ-préfixée, pas recopiée sous un second :where().

   ÉTAT
   ----
   Ce fichier est le résultat d'une extraction à rendu strictement identique.
   Les nombreux blocs :where(...) reflètent des divergences héritées entre les
   pages (trois générations de la charte). Une passe de normalisation doit les
   réduire fortement — après quoi ce fichier pourra être rangé par composants.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root{
  --ink:#14202B;
  --ink-soft:#26333F;
  --paper:#F1EFE6;
  --paper-dim:#E4E0D2;
  --bronze:#B8863E;
  --crimson:#C23B3B;
  --slate:#3A5A6B;
  --line: rgba(20,32,43,0.14);
  --radius: 2px;
  --display: 'Archivo Expanded', 'Archivo', sans-serif;
  --display-tight: 'Archivo', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

/* ==========================================================================
   2. RÈGLES
   Ordre reconstruit par tri topologique des 10 ordres d'origine : à
   spécificité égale seul l'ordre tranche, il est donc préservé tel quel.
   Les règles préfixées :where(body.p-<page>) sont propres à une page.
   Le :where() n'ajoute AUCUNE spécificité — la cascade est identique.
   ========================================================================== */

/* ---------- COMMUN — toutes les pages  (316 règles) ---------- */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html{
  scroll-behavior:smooth;
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.55;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }
  *{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}
a{
  color:inherit;
}
img{
  display:block;
  max-width:100%;
  /* height:auto indispensable : les <img> du site portent des attributs
     width="" height="" (bon pour reserver la place et eviter le CLS), mais ces
     attributs agissent comme hint de presentation sur la HAUTEUR. Des qu'une
     regle CSS reduit la largeur, la hauteur restait collee a l'attribut et
     l'image etait ecrasee. Ajoute le 16/07 (soiree) apres deformation constatee
     par Cedric sur la page methode. Sans effet sur les composants qui posent
     deja leur hauteur (.session-visual/.article-photo/.photo-slot/.program-photo
     en height:100%+object-fit, .article-index/.detail-strip en aspect-ratio,
     .bete-list en 26px) : leur specificite est superieure. */
  height:auto;
}
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:640px){
  .wrap{
    padding:0 20px;
  }
}
.studs{
  position:absolute;
  inset:0;
  background-image: radial-gradient(circle, currentColor 1.6px, transparent 1.6px);
  background-size: 22px 22px;
  opacity:0.08;
  pointer-events:none;
}
.tower{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column-reverse;
  gap:5px;
  z-index:60;
}
.tower .block{
  width:12px;
  height:16px;
  background:transparent;
  border:1.5px solid rgba(20,32,43,0.25);
  transition: background .25s ease, border-color .25s ease;
}
.tower .block.fill{
  background:var(--crimson);
  border-color:var(--crimson);
}
@media (max-width:900px){
  .tower{
    display:none;
  }
}
header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  background:rgba(241,239,230,0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.navrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}
.logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.logo img{
  height:26px;
  width:auto;
  max-width:100%;
  display:block;
}
/* Sous 480px, on masque le mot-logo au profit de la marque carree (favicon) :
   a 430px, "CEDRIC BERREST" (~257px) + burger + Echanger saturent la barre.
   Selecteurs en .logo img.logo-xxx (0,2,1) pour battre .logo img (0,1,1), qui
   porte display:block — sinon la marque s'afficherait aussi en desktop. */
.logo img.logo-mark{
  display:none;
}
@media (max-width:480px){
  .logo img.logo-word{
    display:none;
  }
  .logo img.logo-mark{
    display:block;
  }
}
nav ul{
  list-style:none;
  display:flex;
  gap:30px;
}
nav a{
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  text-decoration:none;
  color:var(--ink-soft);
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
nav a:hover{
  border-color:var(--crimson);
  color:var(--ink);
}
.navcta{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.04em;
  background:var(--ink);
  color:var(--paper);
  padding:10px 18px;
  text-decoration:none;
  white-space:nowrap;
}
.navcta:hover{
  background:var(--crimson);
}
/* Menu mobile (burger). Bouton + classe .open pilotee en JS ; aucune
   dependance a <details>, display:contents, ou a l'etat natif d'un element :
   uniquement display:none/flex commutes par media query et par la classe
   .open. Desktop (>900px) : .burger masque, la nav s'affiche normalement
   (regle de base nav ul{display:flex}). Le selecteur .navrow nav ne touche
   jamais .footer-nav (hors de .navrow). Sans JS : la nav haute reste masquee
   sous 900px, le pied de page assure la navigation de repli. */
.burger{
  display:none;
}
@media (max-width:900px){
  .burger{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:32px;
    height:32px;
    padding:0;
    background:none;
    border:none;
    cursor:pointer;
  }
  .burger span{
    display:block;
    width:20px;
    height:2px;
    background:var(--ink);
    transition:transform .2s ease, opacity .2s ease;
  }
  .burger[aria-expanded="true"] span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }
  .burger[aria-expanded="true"] span:nth-child(2){
    opacity:0;
  }
  .burger[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }
  .navrow nav{
    display:none;
  }
  /* position:absolute : header est position:fixed, il sert donc de bloc
     conteneur non ambigu ; on evite toute dependance au comportement de
     backdrop-filter sur les descendants fixed (piege WebKit). */
  .navrow nav.open{
    display:block;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:24px 32px;
    box-shadow:0 12px 24px rgba(20,32,43,0.16);
    max-height:calc(100vh - 72px);
    overflow-y:auto;
  }
  .navrow nav.open ul{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .navrow nav.open li{
    border-bottom:1px solid var(--line);
  }
  .navrow nav.open li:last-child{
    border-bottom:none;
  }
  .navrow nav.open a{
    display:block;
    padding:16px 2px;
  }
}
@media (max-width:640px){
  .navrow nav.open{
    padding:20px 20px;
  }
}
.hero{
  position:relative;
  padding:150px 0 70px;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
}
.hero--home{
  padding:168px 0 100px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap:60px;
  align-items:end;
  position:relative;
  z-index:2;
}
@media (max-width:900px){
  .hero-grid{
    grid-template-columns:1fr;
  }
}
.eyebrow .brick-nod{
  flex-shrink:0;
  animation:brick-pulse 3.5s ease-in-out infinite;
}
@keyframes brick-pulse{
  0%, 100%{filter:brightness(1);}
  50%{filter:brightness(1.45);}
}
.hero h1{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.01em;
  font-size:clamp(38px, 5.4vw, 68px);
  line-height:1.04;
}
.hero h1 .assemble{
  display:inline-block;
  opacity:0;
  transform:translateY(18px);
  animation: rise .7s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes rise{
  to{opacity:1;transform:translateY(0);}
}
.hero-cta{
  display:flex;
  gap:14px;
  margin-top:38px;
  flex-wrap:wrap;
}
.btn{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.03em;
  padding:14px 24px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:transform .18s ease, background .18s ease, color .18s ease;
  border:1px solid transparent;
}
.btn-primary{
  background:var(--crimson);
  color:var(--paper);
}
.btn-primary:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 8px 18px rgba(194,59,59,0.4);
}
.btn-ghost{
  border-color:rgba(241,239,230,0.4);
  color:var(--paper);
}
.btn-ghost:hover{
  border-color:var(--bronze);
  color:var(--bronze);
  transform:translateY(-3px) scale(1.03);
}
/* Bouton a contour sur fond CLAIR — 17/07. La famille .btn n'avait que
   .btn-primary (crimson plein) et .btn-ghost, dont le filet et le texte sont
   clairs : il est calibre pour un fond SOMBRE. .btn-ghost-dark existe et vise
   bien le fond clair, mais c'est un bouton autonome de 12px cale sur le lien
   discret du certificat Qualiopi (index) — trop petit pour un vrai bouton.
   Il manquait donc ce cas : pleine taille, lisible sur beige, et volontairement
   PAS en crimson pour ne pas concurrencer le CTA de conversion. */
.btn-outline{
  border-color:var(--ink);
  color:var(--ink);
}
.btn-outline:hover{
  border-color:var(--bronze);
  color:var(--bronze);
  transform:translateY(-3px) scale(1.03);
}
.hero-badge{
  justify-self:end;
  text-align:right;
}
.credential{
  border:1px solid rgba(241,239,230,0.25);
  padding:22px;
  font-family:var(--mono);
  font-size:12px;
  color:rgba(241,239,230,0.75);
  line-height:1.7;
}
.credential strong{
  display:block;
  font-family:var(--display-tight);
  font-size:15px;
  color:var(--paper);
  font-weight:700;
  margin-bottom:6px;
  letter-spacing:0;
}
section{
  padding:96px 0;
  position:relative;
}
.section-head{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:24px;
  align-items:baseline;
  margin-bottom:56px;
}
/* .section-head est une grille "auto 1fr" heritee de la numerotation de sections,
   supprimee depuis. Sans numero, elle met le titre et le chapo cote a cote : sur
   programmes-agileom le chapo tombait dans un couloir de quelques dizaines de pixels.
   .cta-block .section-head corrigeait deja ce defaut en display:block, mais pour un
   seul bloc. Ici on le corrige pour les 13, en mobile uniquement : le desktop n'est
   pas touche.
   ATTENTION : cette media query DOIT rester APRES la regle .section-head ci-dessus.
   Une media query n'ajoute aucune specificite : a specificite egale, c'est la
   derniere declaree qui gagne. Posee plus haut dans le fichier le 17/07, elle etait
   ecrasee par display:grid et n'a jamais rien fait. Ne pas la deplacer. */
@media (max-width:900px){
  .section-head{
    display:block;
  }
}
h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(28px,3.4vw,42px);
  letter-spacing:-0.01em;
  position:relative;
  display:inline-block;
}
.tiles .tile, .usecases .usecase, .testimonials .testimonial{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.2,0,0,1), transform .5s cubic-bezier(.2,0,0,1);
}
:where(html.js) .reveal.in .tile, :where(html.js) .reveal.in .usecase, :where(html.js) .reveal.in .testimonial{
  opacity:1;
  transform:translateY(0);
}
.tiles .tile:nth-child(1), .usecases .usecase:nth-child(1), .testimonials .testimonial:nth-child(1){
  transition-delay:.55s;
}
.tiles .tile:nth-child(2), .usecases .usecase:nth-child(2), .testimonials .testimonial:nth-child(2){
  transition-delay:.63s;
}
.tiles .tile:nth-child(3), .usecases .usecase:nth-child(3), .testimonials .testimonial:nth-child(3){
  transition-delay:.71s;
}
.tiles .tile:nth-child(4), .usecases .usecase:nth-child(4){
  transition-delay:.79s;
}
.tiles .tile:nth-child(5){
  transition-delay:.87s;
}
.tiles .tile:nth-child(6){
  transition-delay:.95s;
}
.tiles .tile:nth-child(7){
  transition-delay:1.03s;
}
.tiles .tile:nth-child(8){
  transition-delay:1.11s;
}
.section-sub{
  max-width:64ch;
  color:var(--ink-soft);
  font-size:16px;
  margin-top:14px;
  transition:color .25s ease;
}
/* Le grout ne vient plus du fond de la grille mais de la bordure de chaque
   tuile (16/07). Motif : avec background:var(--line) + gap, toute case vide
   laissait voir le fond — depuis le passage de 8 a 7 tuiles (16/07 01h17), la
   8e case affichait un bloc fonce. La bordure rend le rendu independant du
   nombre de tuiles. Meme solution que .program-grid (agileom, 13/07). */
.tiles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  background:transparent;
}
@media (max-width:900px){
  .tiles{
    grid-template-columns:repeat(2,1fr);
  }
}
.tile{
  background:var(--paper);
  border:1px solid var(--line);
  margin-right:-1px;
  margin-bottom:-1px;
  padding:30px 24px;
  position:relative;
}
.tile .yr{
  font-family:var(--mono);
  font-size:13px;
  color:var(--bronze);
  display:block;
  margin-bottom:10px;
}
.tile h3{
  font-family:var(--display-tight);
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
}
.tile p{
  font-size:14px;
  color:var(--ink-soft);
}
.photo-slot{
  background:linear-gradient(135deg, var(--slate), var(--ink));
  aspect-ratio: 4/5;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:rgba(241,239,230,0.55);
  position:relative;
  overflow:hidden;
}
.photo-slot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.cred-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2px;
  background:var(--line);
  margin-top:64px;
}
@media (max-width:900px){
  .cred-grid{
    grid-template-columns:1fr;
  }
}
.cred-col{
  background:var(--paper);
  padding:32px 30px;
}
.cred-col h4{
  font-family:var(--display-tight);
  font-size:16px;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.cred-col ul{
  list-style:none;
}
.cred-col li{
  font-size:14px;
  color:var(--ink-soft);
  padding:9px 0;
  border-top:1px solid var(--line);
}
.cred-col li:first-child{
  border-top:none;
}
.cred-col li strong{
  color:var(--ink);
  font-weight:600;
}
.amt-logo{
  width:102px;
  height:102px;
  flex-shrink:0;
  border-radius:50%;
}
/* flex fabrique une boite par enfant, y compris par fragment de texte anonyme :
   "<img>Coach certifie ACC · <strong>ICF</strong> (ICF)" donnait QUATRE colonnes,
   invisible en large, illisible a 390px. Le texte est desormais enveloppe dans un
   <span> unique cote HTML : deux enfants, l'icone et la phrase. Ne pas retirer ce
   <span>, le defaut reviendrait. Constate sur iPhone le 17/07. */
.cred-col li.with-ico{
  display:flex;
  align-items:center;
  gap:11px;
}
.cred-col li.with-ico > span{
  min-width:0;
}
.cred-ico{
  width:27px;
  height:27px;
  flex-shrink:0;
  object-fit:contain;
}
.cred-ico.round{
  border-radius:50%;
}
.cred-ico-wide{
  height:18px;
  width:auto;
  flex-shrink:0;
}
/* Mur de logos "Ils m'ont fait confiance" (index.html) — 17/07.
   Bande ouverte en flex-wrap et NON grille a filets comme .cred-grid : 14 logos
   ne se divisent proprement qu'en 7 ou 2 colonnes, tout autre palier laisserait
   des cellules vides et des filets orphelins. Le flex-wrap centre la derniere
   ligne quel que soit le nombre de logos — ajouter ou retirer une reference ne
   demande aucun ajustement de breakpoint.
   Les fichiers de images/logos/ sont deja aplatis en monochrome var(--ink) en
   amont (canal alpha detoure) : le CSS ne fait que les dimensionner. Ne PAS
   ajouter de filter: grayscale() ici, ce serait redondant et destructeur.
   Le double plafond max-height/max-width est volontaire : les logotypes larges
   (Airbus, Pullman) butent sur la largeur, les marques carrees (Amex, DEKRA)
   sur la hauteur. C'est l'equilibre optique qui est vise, pas une hauteur
   strictement egale — a hauteur egale, un logotype large ecraserait la bande. */
.logo-wall{
  margin-top:64px;
  background:var(--paper);
  border:1px solid var(--line);
  padding:34px 30px 38px;
}
.logo-wall h4{
  font-family:var(--display-tight);
  font-size:16px;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--bronze);
  text-align:center;
  margin-bottom:32px;
}
.logo-wall ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:32px 50px;
}
.logo-wall img{
  display:block;
  width:auto;
  height:auto;
  max-height:40px;
  max-width:150px;
  opacity:0.78;
}
@media (max-width:560px){
  .logo-wall{
    padding:28px 20px 30px;
  }
  .logo-wall ul{
    gap:26px 34px;
  }
  .logo-wall img{
    max-height:32px;
    max-width:118px;
  }
}
/* Carte Qualiopi (index.html) — 4e cellule de .cred-grid, a la place de
   l'ancienne colonne "References" (partie au mur de logos). Elle fait donc
   exactement la moitie de la largeur, calee sur la grille, sans max-width
   arbitraire, et repasse en pleine largeur sous 880px avec elle.
   Pas de margin-top ni de border : le gap:2px de .cred-grid fournit deja les
   filets, les redoubler creerait une ligne epaisse.
   FOND BEIGE depuis le 17/07 (demande Cedric) : en blanc, la carte faisait un
   pave clair de 557x393 qui ecrasait les trois colonnes voisines. Le blanc est
   desormais REDUIT A L'IMAGE, qui en a besoin : le logo Qualiopi officiel est
   fourni sur fond blanc et ne doit pas etre retouche. Le padding autour de
   l'image est ce qui fait la difference entre un panneau blanc assume et un
   rectangle blanc qui aurait l'air d'un bug de detourage — ne pas le retirer.
   L'image porte deja la mention obligatoire ("categorie d'action suivante :
   actions de formation"), elle n'est pas repetee en texte.
   Le fond n'est plus declare ici : .cred-col pose deja var(--paper). */
.qualiopi-card{
  padding:32px 30px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.qualiopi-card img{
  width:100%;
  max-width:300px;
  height:auto;
  background:#FFFFFF;
  padding:16px 18px;
  margin:0 auto 18px;
  display:block;
}
.qualiopi-kicker{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--bronze);
  font-weight:700;
}
.qualiopi-meta{
  font-size:13px;
  color:var(--ink-soft);
  margin:6px 0 16px;
}
.btn-ghost-dark{
  border:1px solid var(--ink);
  color:var(--ink);
  font-family:var(--mono);
  font-size:12px;
  padding:10px 18px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .18s ease, border-color .18s ease, color .18s ease;
}
.btn-ghost-dark:hover{
  border-color:var(--bronze);
  color:var(--bronze);
  transform:translateY(-3px) scale(1.03);
}
.lsp-more-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:22px;
  color:var(--bronze);
  font-family:var(--mono);
  font-size:17px;
  font-weight:700;
  letter-spacing:0.04em;
  text-decoration:none;
  border-bottom:1px solid var(--bronze);
  padding-bottom:3px;
  transition:gap .25s ease, color .25s ease;
}
.lsp-more-link:hover{
  gap:13px;
  color:var(--paper);
}
.detail-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  background:rgba(241,239,230,0.16);
  margin-top:2px;
}
@media (max-width:640px){
  .detail-strip{
    grid-template-columns:repeat(2,1fr);
  }
}
.detail-strip img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}
.offer-compare{
  margin-top:64px;
}
.offer-compare > h3{
  font-family:var(--display-tight);
  font-size:22px;
  font-weight:800;
  letter-spacing:0.02em;
  text-transform:none;
  color:var(--bronze);
  margin-bottom:10px;
}
.offer-compare > .offer-sub{
  font-size:15px;
  color:rgba(241,239,230,0.75);
  max-width:60ch;
  margin-bottom:26px;
}
.offer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:2px;
  background:rgba(241,239,230,0.16);
}
@media (max-width:900px){
  .offer-grid{
    grid-template-columns:1fr;
  }
}
/* Carte dominante : l'offre de formation prime sur index (cf. suivi 5 quater #4) */
.offer-card--lead{
  background:linear-gradient(180deg, rgba(184,134,62,0.10), rgba(241,239,230,0.03));
  box-shadow:inset 0 3px 0 var(--bronze);
}
.offer-card--lead h4{
  font-size:26px;
}
.offer-card--lead .otag{
  color:var(--bronze);
}
.offer-card .onote{
  font-size:13px;
  line-height:1.6;
  color:rgba(241,239,230,0.72);
  border-left:2px solid rgba(241,239,230,0.22);
  padding-left:14px;
  margin-bottom:22px;
}
.offer-card .onote strong{
  color:var(--paper);
}
/* Revendication propre a l'offre de formation : la consequence du statut AMT,
   pas une redite du badge de l'intro (cf. suivi 5 quater #4). */
.offer-card .oclaim{
  font-family:var(--display-tight);
  font-weight:800;
  font-size:16.5px;
  line-height:1.4;
  color:var(--bronze);
  border-left:2px solid var(--bronze);
  padding-left:14px;
  margin:-4px 0 16px;
}
/* Tarif affiche pour qualifier tot (decision Cedric, 16/07). Doit rester
   synchronise avec la barre de stats de fiche-formation-lsp.html. */
.offer-card .oprice{
  font-family:var(--mono);
  font-size:13px;
  color:rgba(241,239,230,0.75);
  padding:14px 0;
  margin-bottom:4px;
  border-top:1px solid rgba(241,239,230,0.16);
  border-bottom:1px solid rgba(241,239,230,0.16);
}
.offer-card .oprice-n{
  font-family:var(--display);
  font-size:24px;
  font-weight:800;
  color:var(--paper);
  margin-right:4px;
}
.offer-card .oprice-s{
  display:block;
  margin-top:5px;
  font-size:12px;
  color:rgba(241,239,230,0.58);
}
/* Les deux sorties de l'offre formation sont au meme niveau (decision Cedric,
   16/07) : deux boutons identiques, pas un bouton + un lien. */
.offer-actions{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:auto;
}
/* 4px manquaient pour tenir sur une ligne a 1440. Local a cette zone. */
.offer-actions .btn{
  padding:14px 20px;
}
/* Phrase pivot : "arretez de lire, choisissez". Vaut pour les deux publics,
   donc placee juste avant la bifurcation, au-dessus des CTA. */
.lsp-pivot{
  font-family:var(--display-tight);
  font-weight:800;
  font-size:21px;
  line-height:1.35;
  color:var(--paper);
  max-width:34ch;
  margin-top:64px;
  padding-left:18px;
  border-left:3px solid var(--crimson);
}
.lsp-pivot + .offer-compare{
  margin-top:32px;
}
@media (max-width:640px){
  .lsp-pivot{
    font-size:18px;
  }
}
.offer-card a.btn{
  text-decoration:none;
  font-size:13px;
  color:var(--paper);
}
.offer-card a.btn-primary:hover{
  color:var(--paper);
}
.offer-card{
  background:var(--ink);
  padding:32px 28px;
  display:flex;
  flex-direction:column;
}
.offer-card .otag{
  font-family:var(--mono);
  font-size:12px;
  color:var(--crimson);
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.offer-card h4{
  font-family:var(--display);
  font-size:22px;
  font-weight:800;
  color:var(--paper);
  margin-bottom:14px;
}
.offer-card .ofor{
  font-size:14.5px;
  color:rgba(241,239,230,0.85);
  margin-bottom:18px;
  font-style:italic;
}
.offer-card ul{
  list-style:none;
  margin-bottom:22px;
  flex-grow:1;
}
.offer-card li{
  font-size:13.5px;
  color:rgba(241,239,230,0.72);
  padding:7px 0 7px 18px;
  position:relative;
}
.offer-card li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--bronze);
}
.offer-card a{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--paper);
  text-decoration:underline;
  text-underline-offset:3px;
}
.offer-card a:hover{
  color:var(--bronze);
}
.bio-layout{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:56px;
  align-items:start;
}
@media (max-width:900px){
  .bio-layout{
    grid-template-columns:1fr;
  }
}
/* Colonne gauche du bloc bio : la photo, puis le paragraphe de synthese.
   Il ne peut pas vivre DANS .photo-slot (aspect-ratio:4/5 + flex centre +
   overflow:hidden : le texte serait rogne), ni en 3e enfant direct de .bio-layout
   (la grille le placerait en ligne 2, donc sous les tuiles et non sous la photo,
   la ligne 1 ayant la hauteur de la colonne de droite). D'ou ce conteneur.
   text-align:justify retire au passage : la colonne fait ~430px, la justification
   y creusait des rivieres de blancs. Meme defaut que le chapo LSP du 17/07. */
.bio-side{
  display:flex;
  flex-direction:column;
}
.bio-conclusion{
  margin-top:30px;
  color:var(--ink-soft);
}
.lsp{
  background:var(--ink);
  color:var(--paper);
}
.lsp h2{
  color:var(--paper);
}
.lsp-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  margin-bottom:60px;
}
@media (max-width:900px){
  .lsp-grid{
    grid-template-columns:1fr;
  }
}
.lsp-badge{
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--bronze);
  color:var(--bronze);
  font-family:var(--body);
  font-size:15px;
  line-height:1.55;
  padding:18px 20px;
  margin-top:22px;
  max-width:52ch;
}
.usecases{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  background:rgba(241,239,230,0.16);
}
@media (max-width:900px){
  .usecases{
    grid-template-columns:repeat(2,1fr);
  }
}
.usecase{
  background:var(--ink);
  padding:28px 20px;
}
.usecase h4{
  font-family:var(--display-tight);
  font-size:16px;
  margin:10px 0 8px;
  font-weight:700;
}
.usecase p{
  font-size:13.5px;
  color:rgba(241,239,230,0.72);
}
.activity{
  display:grid;
  grid-template-columns:0.55fr 1fr;
  gap:48px;
  align-items:center;
  padding:56px 0;
  border-top:1px solid var(--line);
}
.activity:last-child{
  border-bottom:1px solid var(--line);
}
@media (max-width:900px){
  .activity{
    grid-template-columns:1fr;
  }
}
.activity-tag{
  font-family:var(--mono);
  font-size:12px;
  color:var(--crimson);
  letter-spacing:0.05em;
  margin-bottom:12px;
  display:block;
}
.activity h3{
  font-family:var(--display);
  font-size:clamp(22px,2.6vw,30px);
  font-weight:800;
  margin-bottom:14px;
}
.activity p{
  color:var(--ink-soft);
  max-width:56ch;
}
.activity.reverse{
  direction:rtl;
}
.activity.reverse > *{
  direction:ltr;
}
.activity-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  color:var(--bronze);
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.03em;
  text-decoration:none;
  border-bottom:1px solid var(--bronze);
  padding-bottom:3px;
  transition:gap .25s ease, color .25s ease, border-color .25s ease;
}
.activity-link:hover{
  gap:13px;
  color:var(--crimson);
  border-color:var(--crimson);
}
.testimonials{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--line);
}
@media (max-width:900px){
  .testimonials{
    grid-template-columns:1fr;
  }
}
.testimonial{
  background:var(--paper);
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.testimonial q{
  display:block;
  min-height:286px;
}
/* Le min-height égalise la hauteur des 3 colonnes de témoignages en desktop.
   Empilés en 1 colonne sous 900, il creuse un grand vide sous les citations
   courtes avant le nom : on l'annule. Constaté en tablette le 17/07. */
@media (max-width:900px){
  .testimonial q{
    min-height:0;
  }
}
.testimonial q{
  font-family:'Lora', serif;
  font-size:16px;
  line-height:1.6;
  font-style:italic;
  font-weight:500;
  quotes:"« " " »";
}
.testimonial cite{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
  font-style:normal;
  margin-top:20px;
  display:block;
}
.contact{
  background:var(--ink);
  color:var(--paper);
}
.contact .section-sub:hover{
  color:var(--paper);
}
/* Colonne gauche le pitch et les canaux, colonne droite le formulaire (17/07).
   Auparavant : titre + liste + formulaire empiles a gauche, et un .ig-block
   encadre a droite. Mesure avant refonte : l'encart faisait 477x945 pour 178px
   de contenu, soit 767px de vide, 81% de sa hauteur. La grille l'etirait sur la
   hauteur de la colonne formulaire et sa bordure encadrait le trou.
   0.9fr / 1.1fr et non l'inverse : le pitch est court, le formulaire a besoin
   de la largeur. align-items:start pour que plus rien ne s'etire sur la hauteur
   du voisin, ce qui est exactement ce qui avait cree le trou. */
.contact-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:56px;
  align-items:start;
}
@media (max-width:900px){
  .contact-grid{
    grid-template-columns:1fr;
  }
}
.contact h2{
  color:var(--paper);
}
.contact-list{
  list-style:none;
  margin-top:28px;
}
.contact-list li{
  padding:16px 0;
  border-top:1px solid rgba(241,239,230,0.15);
  font-family:var(--mono);
  font-size:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.contact-list li > span:first-child{
  flex-shrink:0;
  white-space:nowrap;
}
.contact-list li > span:last-child{
  text-align:right;
  max-width:60%;
}
.contact-list li:last-child{
  border-bottom:1px solid rgba(241,239,230,0.15);
}
.contact-list a{
  text-decoration:none;
}
.contact-list a:hover{
  color:var(--bronze);
}
/* Cible directe des 7 liens "?demande=…#contact-form". Contrairement aux <section>
   (padding:96px, qui absorbe le header fixe), le formulaire n'a rien au-dessus de
   lui : sans scroll-margin-top il atterrirait sous le header. 96px = hauteur du
   header + une respiration. */
.contact-form{
  scroll-margin-top:96px;
  margin-top:36px;
}
.contact-form .cf-row{
  margin-bottom:20px;
}
.contact-form label{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:8px;
}
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%;
  font-family:var(--body);
  font-size:15px;
  color:var(--paper);
  background:rgba(241,239,230,0.04);
  border:1px solid rgba(241,239,230,0.22);
  border-radius:var(--radius);
  padding:12px 14px;
  transition:border-color .2s ease, background .2s ease;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{
  color:rgba(241,239,230,0.35);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:none;
  border-color:var(--bronze);
  background:rgba(241,239,230,0.07);
}
.contact-form textarea{
  resize:vertical;
  min-height:130px;
}
/* Champ "Votre demande" (16/07). Le select natif ignore les couleurs du
   formulaire sombre : appearance:none + chevron dessine, et couleurs forcees
   sur les <option>/<optgroup> (rendus par l'OS, pas par la page). */
.contact-form select{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23B8863E' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
}
.contact-form select option,
.contact-form select optgroup{
  background:var(--ink);
  color:var(--paper);
}
.contact-form .cf-consent{
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.6;
  color:rgba(241,239,230,0.6);
  margin:4px 0 22px;
}
.contact-form button{
  border:none;
  cursor:pointer;
}
.cf-status{
  font-family:var(--mono);
  font-size:13px;
  line-height:1.6;
  margin-top:18px;
  padding:12px 14px;
  border-left:2px solid var(--bronze);
  color:var(--paper);
}
.cf-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
/* Le fond sombre du footer etait porte par 9 regles :where(body.p-X) footer{}
   identiques, une par page (fossiles de l'extraction du 15/07). Les pages qui
   n'avaient pas la leur affichaient un footer clair : les 4 articles (passes en
   body.p-article, alors que les regles visaient encore p-blog-bete-noire etc.)
   et programmes-agileom, qui n'en a jamais eu. Regle unique ici — constat et
   correctif du 16/07. */
.site-footer{
  display:block;
  padding:0;
  font-family:var(--body);
  background:var(--ink);
  color:rgba(241,239,230,0.5);
  border-top:1px solid rgba(241,239,230,0.16);
}
/* padding-block et non padding (17/07). Ces deux conteneurs portent la classe
   .wrap, qui donne padding:0 32px (20px sous 640). Mais ils declaraient
   padding:58px 0 42px et padding:20px 0 28px : les zeros horizontaux ecrasaient
   celui du .wrap, meme specificite, ecrits plus loin dans la feuille. Resultat
   mesure avant correction : corps de page a 1116px, footer a 1180px, decalage
   de 32px de chaque cote sur les 13 pages a toutes les largeurs, et le texte du
   footer collant le bord de l'ecran a 390px. Le .wrap etait bien pose et ne
   servait a rien.
   En ne declarant que le vertical, le padding horizontal du .wrap reprend la
   main, point de rupture a 640 compris, sans avoir a le redupliquer ici.
   C'est ce bug que la rustine :where(body.p-programmes-agileom) .footer-*
   soignait sur une seule page. Rustine supprimee le 17/07 : elle traitait le
   symptome d'un defaut qui etait sur les treize. */
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:48px;
  padding-block:58px 42px;
}
@media (max-width:900px){
  /* Bascule tablette unifiée à 900 (17/07 soir). Footer en 2 colonnes : la marque
     prend toute la largeur, Naviguer et Contact se placent côte à côte. Évite la
     colonne unique alignée à gauche qui laissait la moitié droite vide sur tablette. */
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:34px 48px;
  }
  .footer-brand{
    grid-column:1 / -1;
  }
}
@media (max-width:560px){
  .footer-grid{
    grid-template-columns:1fr;
  }
}
/* 56px et non 34 (17/07) : a 34 le logo faisait la hauteur d'une capitale de
   "Cedric Berrest" juste en dessous, et le RR quadrichrome se lisait comme une
   tache plutot que comme un logo. Le fichier source est le filigrane, affiche
   a 420px ailleurs : aucun risque de flou. */
.footer-logo{
  width:56px;
  height:56px;
  opacity:0.9;
  margin-bottom:16px;
}
.footer-name{
  font-family:var(--display-tight);
  font-weight:800;
  font-size:18px;
  color:var(--paper);
  letter-spacing:0.01em;
}
.footer-sub{
  font-size:12.5px;
  color:rgba(241,239,230,0.55);
  line-height:1.65;
  margin-top:8px;
}
.footer-h{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--bronze);
  margin-bottom:16px;
}
.footer-nav, .footer-contact{
  display:flex;
  flex-direction:column;
  gap:11px;
}
.footer-nav a, .footer-contact a{
  font-size:13.5px;
  color:rgba(241,239,230,0.75);
  text-decoration:none;
  width:fit-content;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.footer-nav a:hover, .footer-contact a:hover{
  color:var(--paper);
  border-color:var(--bronze);
}
/* Deux lignes assumees, pas subies (17/07). Les 3 blocs font 308 + 397 + 513
   = 1218px de texte, plus les gouttieres : 1266px a faire tenir dans un .wrap
   de 1180px. Il manque 86px, ca n'a jamais pu tenir sur une ligne et aucune
   regle ne le fera : la police est deja a 11px, la plus petite du site.
   space-between ecartelait la ligne 1 aux deux bords et laissait la ligne 2
   orpheline a gauche avec 1400px de vide a sa droite : ca se lisait comme des
   debris. Centre, les blocs se regroupent : ligne 1 le copyright et le
   Qualiopi, ligne 2 les liens legaux. Gouttiere de colonne portee a 32px pour
   que les deux blocs de la ligne 1 ne se lisent pas comme une seule phrase. */
.footer-bottom{
  display:flex;
  justify-content:center;
  /* Sans ceci, justify-content centre les boites mais pas le texte a l'interieur :
     des qu'un span passe a la ligne, il se cale a gauche et la ligne 1 parait seule
     centree. Constate sur iPhone le 17/07. */
  text-align:center;
  flex-wrap:wrap;
  gap:10px 32px;
  padding-block:20px 28px;
  border-top:1px solid rgba(241,239,230,0.12);
  font-family:var(--mono);
  font-size:11px;
  color:rgba(241,239,230,0.5);
  letter-spacing:0.02em;
}
.footer-bottom a{
  color:rgba(241,239,230,0.62);
  text-decoration:underline;
  text-underline-offset:2px;
}
.footer-bottom a:hover{
  color:var(--bronze);
}
:where(html.js) .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.2,0,0,1), transform .6s cubic-bezier(.2,0,0,1);
}
:where(html.js) .reveal.in{
  opacity:1;
  transform:translateY(0);
}
.back-link{
  align-items:center;
  display:inline-flex;
  font-family:var(--mono);
  font-size:12px;
  gap:8px;
  letter-spacing:0.05em;
  text-decoration:none;
}
.back-link:hover{
  opacity:0.8;
}
.meeting-compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:rgba(241,239,230,0.16);
  margin-top:40px;
}
@media (max-width:900px){
  .meeting-compare{
    grid-template-columns:1fr;
  }
}
.meeting-card{
  background:var(--ink);
  padding:26px 24px;
}
.meeting-card .mtag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.meeting-card.back .mtag{
  color:rgba(241,239,230,0.5);
}
.meeting-card.forward .mtag{
  color:var(--bronze);
}
.meeting-card p{
  margin-top:10px;
  font-size:14.5px;
  color:rgba(241,239,230,0.78);
  line-height:1.6;
}
.reasons{
  counter-reset:reason;
}
.reason{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:22px;
  padding:26px 0;
  border-top:1px solid var(--line);
}
.reason:last-child{
  border-bottom:1px solid var(--line);
}
.reason .rn{
  font-family:var(--display);
  font-size:28px;
  font-weight:800;
  color:var(--bronze);
}
.reason h4{
  font-family:var(--display-tight);
  font-size:17px;
  font-weight:700;
  margin-bottom:8px;
}
.reason p{
  color:var(--ink-soft);
  font-size:14.5px;
  max-width:66ch;
}
.pullquote{
  border-left:3px solid var(--crimson);
  padding:6px 0 6px 26px;
  margin:44px 0;
  max-width:60ch;
}
.pullquote p{
  font-family:var(--display-tight);
  font-size:19px;
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
}
.pullquote cite{
  display:block;
  margin-top:10px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
  font-style:normal;
}
/* Bloc des curseurs (#cadre, page methode). Passe de 3 a 2 colonnes le 17/07.
   La 3e tuile "Domaines abordes" rendait une enumeration de 8 items dans .pval,
   qui est un style de TITRE (display-tight 800, 19px) : 6 lignes de gras contre
   1 ligne pour ses deux voisines. Le desequilibre ne venait pas des colonnes,
   il venait de ce qu'un style de titre recevait une liste. La liste est
   descendue en .situations dans #applications, sa vraie place. */
.params-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2px;
  background:var(--line);
  margin-top:20px;
}
@media (max-width:760px){
  .params-row{
    grid-template-columns:1fr;
  }
}
.param{
  background:var(--paper);
  padding:26px 22px;
}
.param .plabel{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--bronze);
}
.param .pval{
  font-family:var(--display-tight);
  font-size:19px;
  font-weight:800;
  margin-top:8px;
}
/* Liste des situations (#applications, page methode) — 17/07. Recueille la
   liste sortie du bloc des curseurs, reecrite du registre "domaine" vers le
   registre "situation" : un prospect ne se dit pas "il me faudrait du
   developpement organisationnel", il se dit "on n'est plus d'accord sur ou on
   va". La prose de la section pose le principe et ne doit plus enumerer :
   c'est cette liste qui donne les cas, sinon on enumere deux fois.
   columns:2 et NON grid : la hauteur de chaque item est libre, un item qui
   passe a deux lignes ne creuse pas la cellule d'en face. */
.situations{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  columns:2;
  column-gap:44px;
  max-width:920px;
}
.situations li{
  break-inside:avoid;
  border-top:1px solid var(--line);
  padding:11px 0 11px 20px;
  position:relative;
  font-family:var(--display-tight);
  font-weight:700;
  font-size:15.5px;
  line-height:1.45;
}
.situations li::before{
  content:"";
  position:absolute;
  left:0;
  top:19px;
  width:7px;
  height:7px;
  background:var(--bronze);
}
@media (max-width:760px){
  .situations{
    columns:1;
  }
}
.not-just{
  background:var(--paper-dim);
  padding:36px 34px;
  margin-top:44px;
  border-left:3px solid var(--bronze);
}
.not-just h3{
  font-family:var(--display-tight);
  font-size:16px;
  font-weight:800;
  margin-bottom:12px;
}
.not-just p{
  font-size:14.5px;
  color:var(--ink-soft);
  max-width:70ch;
  line-height:1.65;
}
/* La bande foncee autour des chiffres n'etait pas voulue : .fiche-stats est un
   <section>, il heritait de section{padding:96px 0} et le background:var(--line)
   (qui ne sert qu'a dessiner les filets entre tuiles) remplissait ces 96 px en
   haut et en bas. Padding annule, filets ramenes a 1px — demande Cedric, 16/07. */
.fiche-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  margin:0;
  padding:0;
  border-bottom:1px solid var(--line);
}
@media (max-width:900px){
  .fiche-stats{
    grid-template-columns:repeat(2,1fr);
  }
}
.fstat{
  background:var(--paper);
  padding:18px 22px;
}
.fstat .flabel{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--bronze);
}
.fstat .fval{
  font-family:var(--display-tight);
  font-size:17px;
  font-weight:800;
  margin-top:8px;
  line-height:1.3;
}
.fiche-block{
  padding:56px 0;
  border-top:1px solid var(--line);
}
.fiche-block h2{
  font-family:var(--display);
  font-size:clamp(22px,2.6vw,28px);
  font-weight:800;
  margin-bottom:20px;
}
.fiche-block p{
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.7;
  max-width:72ch;
  margin-bottom:14px;
}
.fiche-list{
  list-style:none;
  max-width:72ch;
}
.fiche-list li{
  padding:8px 0 8px 22px;
  position:relative;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.6;
}
.fiche-list li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--bronze);
}
.fiche-activity{
  margin-bottom:28px;
}
.fiche-activity h3{
  font-family:var(--display-tight);
  font-size:17px;
  font-weight:700;
  margin-bottom:10px;
  color:var(--ink);
}
.hero--center{
  text-align:center;
}
.placeholder-body{
  padding:70px 0;
  text-align:center;
}
.session-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--line);
  margin:48px 0 0;
}

/* Même raison que .article-index : 3 sessions, pas de palier à 2 colonnes qui
   laisserait une cellule vide et sombre. 3 colonnes puis 1 à 900. */
@media (max-width:900px){
  .session-grid{
    grid-template-columns:1fr;
  }
}
.session-card{
  background:var(--paper);
  padding:0;
  display:flex;
  flex-direction:column;
}
.session-visual{
  width:100%;
  aspect-ratio:4/5;
  background:var(--paper-dim);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.session-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
}
.session-body{
  padding:30px 28px 32px;
}
.session-eyebrow{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--bronze);
  display:block;
  margin-bottom:10px;
}
.session-city{
  font-family:var(--display);
  font-weight:800;
  font-size:24px;
  margin-bottom:4px;
}
.session-dates{
  font-family:var(--mono);
  font-size:13px;
  color:var(--ink-soft);
  margin-bottom:20px;
}
.session-meta{
  list-style:none;
  margin-bottom:24px;
}
.session-meta li{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:9px 0;
  border-top:1px solid var(--line);
  font-size:13.5px;
  color:var(--ink-soft);
}
.session-meta li span:first-child{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--ink);
  opacity:0.55;
}
.session-meta li span:last-child{
  text-align:right;
  font-weight:600;
  color:var(--ink);
}
.session-card .btn{
  width:100%;
  text-align:center;
  justify-content:center;
}
.more{
  padding:76px 0 40px;
  text-align:center;
}
.more .kicker{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--bronze);
  display:block;
  margin-bottom:14px;
}
.more h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(24px,3vw,34px);
  letter-spacing:-0.01em;
  margin-bottom:18px;
}
.more p{
  max-width:64ch;
  margin:0 auto 26px;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.7;
}
.more p strong{
  color:var(--ink);
  font-weight:600;
}
.intra{
  background:var(--ink);
  color:var(--paper);
  padding:76px 0;
}
.intra .kicker{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--bronze);
  display:block;
  margin-bottom:14px;
  text-align:center;
}
.intra h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(24px,3vw,34px);
  letter-spacing:-0.01em;
  color:var(--paper);
  text-align:center;
  margin-bottom:16px;
  /* display:block indispensable : la regle h2{} de base pose display:inline-block,
     et une boite inline-block se colle a gauche de son parent — le text-align:center
     ci-dessus ne centrait donc que le texte DANS une boite deja calee a gauche.
     Corrige le 16/07 (soiree). */
  display:block;
}
.intra .intra-lead{
  max-width:62ch;
  margin:0 auto 40px;
  color:rgba(241,239,230,0.82);
  font-size:15px;
  line-height:1.7;
  text-align:center;
}
.intra-points{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:rgba(241,239,230,0.16);
  margin:0 auto 40px;
}
@media (max-width:640px){
  .intra-points{
    grid-template-columns:1fr;
  }
}
.intra-points li{
  background:var(--ink);
  padding:28px 24px;
}
.intra-points .intra-points strong{
  display:block;
  font-family:var(--display-tight);
  font-size:16.5px;
  color:var(--paper);
  font-weight:700;
  margin:10px 0 8px;
}
.intra-points .txt{
  display:block;
  font-size:13.5px;
  color:rgba(241,239,230,0.72);
  line-height:1.55;
}
.intra .intra-cta{
  text-align:center;
}
.agileom-block{
  background:var(--ink);
  color:var(--paper);
  padding:56px;
  display:grid;
  grid-template-columns:0.7fr 1.3fr;
  gap:48px;
  align-items:start;
}
@media (max-width:900px){
  .agileom-block{
    grid-template-columns:1fr;
    padding:36px 28px;
  }
}
.agileom-logo-wrap{
  background:var(--paper);
  padding:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.agileom-logo-wrap img{
  max-width:200px;
  transition:transform .4s cubic-bezier(.2,0,0,1);
}
.agileom-logo-wrap:hover img{
  transform:scale(1.22);
}
.agileom-block p{
  color:rgba(241,239,230,0.82);
  font-size:15.5px;
  margin-bottom:14px;
  max-width:60ch;
}
.agileom-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:22px;
}
/* En flex, chaque bouton prend la largeur de son propre libelle : "Decouvrir les
   capsules de progres" est plus long, passe sur 2 lignes et devient plus large que
   "Ecouter les podcasts". Les deux ne tiennent pas sur une ligne a 390px (libelles
   trop longs), donc on les empile a largeur egale plutot que de les rogner.
   Constate sur iPhone le 17/07. */
@media (max-width:640px){
  .agileom-links{
    display:grid;
    grid-template-columns:1fr;
  }
}
.testimonial-feature{
  background:var(--paper-dim);
  border-left:3px solid var(--bronze);
  padding:44px 48px;
  margin-top:2px;
}
@media (max-width:640px){
  .testimonial-feature{
    padding:32px 24px;
  }
}
.testimonial-feature .tf-kicker{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:10px;
  display:block;
}
.testimonial-feature .tf-byline{
  font-family:var(--display-tight);
  font-weight:800;
  font-size:15px;
  color:var(--ink);
  margin-bottom:22px;
}
.testimonial-feature .tf-body{
  font-family:'Lora', serif;
  font-size:16.5px;
  line-height:1.75;
  color:var(--ink-soft);
}
.testimonial-feature .tf-body p{
  margin-bottom:16px;
}
.testimonial-feature .tf-body p:last-child{
  margin-bottom:0;
}
.tf-photo{
  margin-top:32px;
}
.tf-photo img{
  width:100%;
  height:auto;
  display:block;
}
.tf-photo figcaption{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.04em;
  color:var(--ink-soft);
  margin-top:10px;
}
.programs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0;
  background:transparent;
  margin-top:2px;
}
.program-card{
  background:var(--paper);
  border:1px solid var(--line);
  margin-right:-1px;
  margin-bottom:-1px;
  display:flex;
  flex-direction:column;
}
.program-photo{
  aspect-ratio:1/1;
  background:linear-gradient(135deg, var(--slate), var(--ink));
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.program-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.program-photo a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  text-decoration:none;
  color:inherit;
}
.program-photo a img{
  transition:transform .4s cubic-bezier(.2,0,0,1);
}
.program-photo a:hover img{
  transform:scale(1.08);
}
.program-body{
  padding:24px 22px;
  flex-grow:1;
  display:flex;
  flex-direction:column;
}
.program-body h3{
  font-family:var(--display-tight);
  font-size:18px;
  font-weight:800;
  margin-bottom:14px;
  line-height:1.3;
}
.program-meta{
  list-style:none;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.program-meta li{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--ink-soft);
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:5px 0;
}
.program-meta li span:first-child{
  color:var(--bronze);
  flex-shrink:0;
}
.program-meta li span:last-child{
  text-align:right;
}
/* CTA de fin de page agileom. Centre le 16/07 (demande Cedric). .cta-block
   n'existe que sur cette page (verifie), donc la regle reste non scopee. */
.cta-block{
  background:var(--ink);
  color:var(--paper);
  text-align:center;
  position:relative;
  overflow:hidden;
}
/* .section-head est une grille "auto 1fr" prevue pour un numero + un titre.
   Ici il n'y a pas de numero : le titre et le sous-titre se retrouvaient en
   deux colonnes cote a cote. En flux normal, ils s'empilent et se centrent. */
.cta-block .section-head{
  display:block;
  margin-bottom:0;
}
.cta-block .section-sub{
  margin:14px auto 0;
  max-width:60ch;
}
.cta-block h2{
  color:var(--paper);
}
.cta-block .section-sub{
  color:rgba(241,239,230,0.78);
}
.cta-block .btn{
  margin-top:26px;
}
nav a.active{
  color:var(--ink);
  border-color:var(--bronze);
}
.article-index{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--line);
}
/* 3 colonnes puis 1, sans palier à 2 : avec 3 articles, une grille à 2 colonnes
   laisse une 4e cellule vide qui révèle le fond --line en sombre (le filet est fait
   par gap:2px sur fond --line). Constaté en tablette le 17/07. À 1 colonne, aucun trou. */
@media (max-width:900px){
  .article-index{
    grid-template-columns:1fr;
  }
}
.article-index a{
  background:var(--paper);
  padding:28px 24px;
  text-decoration:none;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:background .2s ease;
}
.article-index a:hover{
  background:var(--paper-dim);
}
.article-index .ai-tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--crimson);
}
.article-index .ai-arrow{
  font-family:var(--mono);
  font-size:12px;
  color:var(--bronze);
  margin-top:auto;
}
.contact-band{
  background:var(--ink);
  color:var(--paper);
}
.contact-band .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
  padding:64px 32px;
}
.contact-band h2{
  color:var(--paper);
  font-size:clamp(24px,3vw,32px);
}
.contact-band p{
  color:rgba(241,239,230,0.78);
  margin-top:10px;
  max-width:48ch;
}
.article-index h2{
  font-family:var(--display-tight);
  font-size:17px;
  font-weight:700;
  line-height:1.3;
}
.article-index img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  margin-bottom:2px;
}
.article{
  border-top:1px solid var(--line);
  padding:80px 0;
}
.article:first-of-type{
  border-top:none;
}
.article-photo{
  aspect-ratio:16/9;
  overflow:hidden;
  margin-bottom:44px;
  background:linear-gradient(135deg, var(--slate), var(--ink));
  max-width:46%;
}
@media (max-width:640px){
  .article-photo{
    max-width:100%;
  }
}
.article-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.article-body{
  max-width:68ch;
  font-size:17px;
  color:var(--ink-soft);
  line-height:1.75;
}
.article-body p{
  margin-bottom:22px;
}
.article-cta{
  margin-top:36px;
  padding:22px 26px;
  background:var(--paper-dim);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.article-cta p{
  font-family:var(--display-tight);
  font-weight:700;
  font-size:15.5px;
  max-width:44ch;
}
.article-related{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--bronze);
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.03em;
  text-decoration:none;
  border-bottom:1px solid var(--bronze);
  padding-bottom:3px;
  transition:gap .25s ease, color .25s ease, border-color .25s ease;
}
.article-related:hover{
  gap:13px;
  color:var(--crimson);
  border-color:var(--crimson);
}
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
  letter-spacing:0.02em;
}
.breadcrumb a{
  text-decoration:none;
  color:var(--ink-soft);
  border-bottom:1px solid transparent;
}
.breadcrumb a:hover{
  color:var(--ink);
  border-color:var(--bronze);
}
.breadcrumb span[aria-current]{
  color:var(--ink);
}
.article-date{
  display:block;
  margin-top:14px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
}
.article h2{
  font-size:clamp(26px,3.2vw,38px);
}
.article-body h3, .article-body h2{
  font-family:var(--display-tight);
  font-weight:800;
  font-size:20px;
  color:var(--ink);
  margin:38px 0 16px;
}
.bete-list{
  list-style:none;
  margin:28px 0;
}
.bete-list li{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 0;
  font-family:var(--display-tight);
  font-weight:700;
  font-size:16px;
  color:var(--ink);
}
.bete-list img{
  width:26px;
  height:26px;
  flex-shrink:0;
}
.article-photo figcaption{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--ink-soft);
  margin-top:10px;
  letter-spacing:0.02em;
}
.article-body blockquote{
  font-family:'Lora', serif;
  font-style:italic;
  font-weight:500;
  font-size:18px;
  color:var(--ink);
  border-left:3px solid var(--bronze);
  padding:4px 0 4px 24px;
  margin:30px 0;
  line-height:1.6;
}
.article-body blockquote cite{
  display:block;
  font-family:var(--mono);
  font-style:normal;
  font-size:12px;
  color:var(--ink-soft);
  margin-top:12px;
  letter-spacing:0.02em;
}

/* ---------- PAGE : index  (7 règles) ---------- */
:where(body.p-index) .hero .studs{
  color:var(--paper);
}
:where(body.p-index) .eyebrow{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--bronze);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
}
:where(body.p-index) .hero p.lead{
  margin-top:26px;
  font-size:18px;
  max-width:52ch;
  color:rgba(241,239,230,0.82);
}
:where(body.p-index) h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  height:4px;
  width:0;
  background:var(--crimson);
  transition:width 0.6s cubic-bezier(.2,0,0,1);
}
:where(html.js) :where(body.p-index) .reveal.in h2::after{
  width:100%;
  transition-delay:0.45s;
}
:where(body.p-index) h2:hover::after{
  width:100%;
  transition-delay:0s;
}
:where(body.p-index) .section-sub:hover{
  color:var(--ink);
}
.lsp .section-sub{
  color:rgba(241,239,230,0.78);
}
.contact .section-sub{
  color:rgba(241,239,230,0.78);
}
:where(body.p-index) .lsp .section-sub:hover{
  color:var(--paper);
}
/* Coutures clair -> clair (demande Cedric, 17/07). ATTENTION avant de toucher :
   les 5 coutures de l'index font TOUTES 192 px (96 de padding-bottom + 96 de
   padding-top). Il n'y a aucun bug local, c'est le rythme du site.
   Ce qui differe, c'est le fond : #hero, #lsp et #contact sont sombres, les
   trois autres sont clairs. Sur #lsp -> #quisuisje et #temoignages -> #contact,
   la couture est COUPEE EN DEUX par le changement de fond, donc invisible. Les
   deux seules coutures clair -> clair sont #quisuisje -> #activites et
   #activites -> #temoignages : elles affichent 192 px de beige ininterrompu, et
   ce sont exactement les deux que Cedric a signalees.
   Ramenees a 96 (48 + 48), comme la couture #cadre -> #applications de la page
   methode le 16/07. Les deux coutures a changement de fond restent a 192.
   section{padding:96px 0} n'est pas touche : le rythme global est intact.
   Les ID ne sont volontairement PAS enrobes de :where() — enrobes, la regle
   tomberait a 0 de specificite et perdrait contre section{}. Meme motif que sur
   la page methode. */
:where(body.p-index) #quisuisje{
  padding-bottom:48px;
}
:where(body.p-index) #activites{
  padding:48px 0;
}
:where(body.p-index) #temoignages{
  padding-top:48px;
}

/* ---------- PAGE : methode-lego-serious-play  (6 règles) ---------- */
/* ---------- PAGE : fiche-formation-lsp (ajouts 16/07) ---------- */
/* Soulignement crimson des titres de section, repris de l'index (demande
   Cedric, 16/07). Limite a .fiche-block : le h2 du CTA final n'est pas un
   titre de section. Les h2 sont enrobes d'un <div class="reveal"> comme les
   .section-head de l'index — seul le titre s'anime, pas le contenu du bloc. */
:where(body.p-fiche-formation-lsp) .fiche-block h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  height:4px;
  width:0;
  background:var(--crimson);
  transition:width 0.6s cubic-bezier(.2,0,0,1);
}
:where(html.js) :where(body.p-fiche-formation-lsp) .fiche-block .reveal.in h2::after{
  width:100%;
  transition-delay:0.45s;
}
:where(body.p-fiche-formation-lsp) .fiche-block h2:hover::after{
  width:100%;
  transition-delay:0s;
}
/* Lien dore (demande Cedric, 16/07). Nomme .link-gold et non .amt-link :
   sert au lien AMT et au lien vers la page methode dans le CTA final. */
:where(body.p-fiche-formation-lsp) .link-gold{
  color:var(--bronze);
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.03em;
  border-bottom:1px solid transparent;
  transition:border-color .3s cubic-bezier(.2,0,0,1);
}
:where(body.p-fiche-formation-lsp) .link-gold:hover{
  border-bottom-color:var(--bronze);
}
/* Sortie tertiaire du CTA : sous les deux boutons, pas avant — la page doit
   proposer d'agir avant de proposer un detour. */
:where(body.p-fiche-formation-lsp) .cta-aside{
  margin:22px 0 0;
  text-align:center;
}
/* Logo AMT cliquable : zoom au survol, repris de .agileom-logo-wrap. */
:where(body.p-fiche-formation-lsp) .amt-logo-wrap{
  overflow:hidden;
  border-radius:50%;
}
:where(body.p-fiche-formation-lsp) .amt-logo-wrap img{
  width:100%;
  border-radius:50%;
  transition:transform .4s cubic-bezier(.2,0,0,1);
}
:where(body.p-fiche-formation-lsp) .amt-logo-wrap:hover img{
  transform:scale(1.08);
}

/* Sections texte + photo de la fiche, sur deux colonnes (17/07).
   Photo TOUJOURS a droite, jamais en alternance (arbitrage Cedric) : les 3
   sections concernees ne se suivent pas (Conditions d'acces s'intercale entre
   la 1re et la 2e), une alternance se lirait comme un desordre et non comme un
   rythme. Le h2 reste HORS de la grille, pleine largeur : le passer dans la
   colonne texte raccourcirait son soulignement crimson et casserait le rythme
   des cinq autres sections de la page.
   C'est la FIGURE qui porte la largeur, jamais l'image seule : regle du site
   etablie le 16/07 sur .method-figure. Ici la largeur vient de la colonne de
   grille, l'image la remplit a 100%.
   Pas de figcaption sur cette page (arbitrage Cedric, 17/07).
   Colonne image fluide et non fixe (17/07, soir) : a 460px fixes, la colonne
   texte tombait a 360px sur un viewport de 900 et devenait illisible. Le min()
   donne 460px sur grand ecran (largeur voulue par Cedric, les photos sont
   belles et meritent de la place) et redescend proportionnellement ensuite,
   jusqu'a 351px a 900 ou le repli en une colonne prend le relais. Un plancher
   en clamp() avait ete essaye puis retire : entre 880 et 900, la colonne ne
   descend jamais sous 351px, le plancher n'aurait jamais servi.
   Dette assumee : ces regles cousinent avec celles de p-methode. La
   factorisation en classe generique toucherait la page methode, qui est
   validee : a faire apres le lancement. */
:where(body.p-fiche-formation-lsp) .fiche-split{
  display:grid;
  grid-template-columns:1fr min(42%, 460px);
  gap:40px;
  align-items:start;
  margin-top:8px;
}
/* Blocs ou le texte et l'image se centrent l'un sur l'autre.
   C'est la GRILLE qui centre ses deux colonnes, pas la colonne texte qui se
   centre toute seule. Premiere version du 17/07 : align-self:center sur
   .fiche-split-text. Elle marchait sur Public vise et Modalites, ou l'image
   est la plus haute, et ne faisait RIEN sur Objectifs pedagogiques sous
   1100px, ou ce sont les six puces qui sont les plus hautes : un element qui
   definit deja la hauteur de la rangee n'a rien ou se centrer. C'est l'image
   qu'il fallait descendre, pas le texte. align-items:center traite les deux
   cas sans avoir a savoir lequel des deux est le plus haut.
   Mesure a 1000px avant/apres : ecart des centres +83px, puis 0. */
:where(body.p-fiche-formation-lsp) .fiche-split--middle{
  align-items:center;
}
:where(body.p-fiche-formation-lsp) .fiche-split-text > :first-child{
  margin-top:0;
}
:where(body.p-fiche-formation-lsp) .fiche-photo img{
  width:100%;
  height:auto;
  display:block;
}
/* Repli en une colonne : la photo passe SOUS le texte (ordre du DOM), pas
   au-dessus. Elle illustre, elle n'introduit pas. */
@media (max-width:900px){
  :where(body.p-fiche-formation-lsp) .fiche-split{
    grid-template-columns:1fr;
    gap:0;
  }
  :where(body.p-fiche-formation-lsp) .fiche-photo{
    max-width:460px;
    margin:28px auto 0;
  }
}

/* Soulignement crimson des titres de section (16/07). Le HTML porte bien les
   .section-head reveal depuis la seance de nuit, mais la regle correspondante
   etait absente de styles.css — le soulignement n'a jamais pu s'afficher.
   Limite a .section-head h2 : le h2 du CTA final n'est pas un titre de section
   (meme choix que sur la fiche). */
:where(body.p-methode-lego-serious-play) .section-head h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  height:4px;
  width:0;
  background:var(--crimson);
  transition:width 0.6s cubic-bezier(.2,0,0,1);
}
:where(html.js) :where(body.p-methode-lego-serious-play) .section-head.reveal.in h2::after{
  width:100%;
  transition-delay:0.45s;
}
:where(body.p-methode-lego-serious-play) .section-head h2:hover::after{
  width:100%;
  transition-delay:0s;
}

/* Photos de la page methode (methode-lego-serious-play.html).
   .method-photos n'avait aucune regle : les deux figures sortaient a la largeur
   naturelle des fichiers (1000px), empilees, et la 3e photo a 100% du .wrap
   (1116px). Reduction d'un tiers demandee par Cedric le 16/07 (soiree) :
   les trois photos passent a 2/3 de leur taille rendue, centrees. */
/* Figure legendee de la page methode ("Un champ d'application presque sans
   limite"). C'est la FIGURE qui est dimensionnee et centree, pas l'image :
   auparavant l'image portait max-width + margin:0 auto tandis que la figure
   restait pleine largeur, donc la legende se calait a gauche de la figure et
   l'image 186px plus a droite — legende et image desalignees. En contraignant
   la figure, l'image la remplit a 100% et la legende s'aligne naturellement sur
   son bord gauche, a la meme largeur. Corrige le 16/07 (soiree). */
:where(body.p-methode-lego-serious-play) .method-figure{
  max-width:744px;
  margin:36px auto;
}
:where(body.p-methode-lego-serious-play) .method-figure img{
  width:100%;
}
:where(body.p-methode-lego-serious-play) .method-figure figcaption{
  font-size:13px;
  color:var(--ink-soft);
  margin-top:8px;
}
/* Photos legendees de la section "Le derouler du processus". C'est la FIGURE
   qui porte la largeur et le centrage, pas l'image : si l'image etait centree
   seule dans une figure pleine largeur, la legende se calerait a gauche de la
   figure et non sous l'image (meme bug que la figure de #applications, corrige
   le 16/07). Regle du site : on contraint la figure, jamais l'image seule. */
:where(body.p-methode-lego-serious-play) .method-photos figure{
  max-width:667px;
  margin-left:auto;
  margin-right:auto;
}
:where(body.p-methode-lego-serious-play) .method-photos img{
  width:100%;
}
:where(body.p-methode-lego-serious-play) .method-photos figcaption{
  /* Section .lsp = fond sombre : la legende ne peut pas reprendre le
     var(--ink-soft) de celle de #applications, qui est sur fond clair. */
  font-size:13px;
  color:rgba(241,239,230,0.7);
  margin-top:8px;
}
:where(body.p-methode-lego-serious-play) .method-photos figure + figure{
  margin-top:28px;
}
:where(body.p-methode-lego-serious-play) .hero .lead{
  margin-top:22px;
  font-size:17px;
  max-width:62ch;
  color:rgba(241,239,230,0.82);
}
/* Couture #cadre -> #applications : 192 px de vide entre les tuiles et le
   titre suivant (96 de padding-bottom + 96 de padding-top). Ramenee a 96
   (48 + 48) — demande Cedric, 16/07. */
:where(body.p-methode-lego-serious-play) #cadre{
  padding-bottom:48px;
}
:where(body.p-methode-lego-serious-play) #applications{
  padding-top:48px;
}
/* Couture #applications -> #appartenances — 17/07. #appartenances est claire,
   comme les deux sections qui la precedent : trois sections claires d'affilee.
   Aucune de ces coutures n'est coupee par un changement de fond, donc les
   192 px (96 + 96) se lisent comme un vide — c'est le diagnostic de la session
   21 sur index, applique ici a l'avance plutot que constate apres coup.
   Ramenee a 96 (48 + 48), meme forme que #cadre -> #applications ci-dessus.
   #applications se retrouve ainsi a 48 des DEUX cotes : c'est voulu et c'est
   coherent, ses deux voisines sont claires. La couture #appartenances ->
   .deepdive-cta reste a 192 : elle est coupee en deux par le passage au fond
   sombre et ne se lit jamais comme un vide. Comme sur index, les ID ne sont
   PAS enrobes de :where() — enrobes, la regle tomberait a 0 de specificite et
   perdrait contre section{padding:96px 0}. Ne pas "harmoniser" ces paddings :
   la divergence EST le correctif. */
:where(body.p-methode-lego-serious-play) #applications{
  padding-bottom:48px;
}
:where(body.p-methode-lego-serious-play) #appartenances{
  padding-top:48px;
}
/* Section "Deux des communautes autour de la methode" (page methode) — 17/07.
   Remplace le paragraphe de bas de CTA ou les liens AMT et Flow etaient
   soulignes a 13.5px sur 60% d'opacite : illisibles. Ce paragraphe portait la
   mention de propriete intellectuelle de l'AMT — elle est reprise en entier
   dans la carte AMT, elle ne doit pas se perdre.
   Grille a filets (gap 2px sur var(--line)), meme vocabulaire que .params-row
   et .cred-grid. Cartes en flex-column avec le bouton pousse en bas par
   margin-top:auto : les deux textes n'ont pas la meme longueur (il y a moins a
   dire du Flow, et c'est honnete) mais les deux boutons s'alignent. */
.appartenances-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--line);
  margin-top:26px;
}
@media (max-width:900px){
  .appartenances-grid{
    grid-template-columns:1fr;
  }
}
.appartenance{
  background:var(--paper);
  padding:30px 28px 32px;
  display:flex;
  flex-direction:column;
}
.appartenance-logo{
  height:132px;
  display:flex;
  align-items:center;
  margin-bottom:18px;
}
.appartenance-logo img{
  max-height:112px;
  width:auto;
}
/* ⚠️ PIEGE — le blanc du sceau de l'AMT n'est pas un fond, c'est une encre.
   Le visage, la main, les synapses et l'anneau de texte sont du BLANC DESSINE
   SUR le disque noir (verifie au pixel le 17/07 : une coupe au centre donne
   0,0,0,171,255,255,255,255,255,0,0...). Detourer ce blanc n'enleverait pas un
   fond, ca effacerait le dessin. Le sceau doit poser sur du blanc, toujours.
   Le site a deja tranche la FORME de ce blanc deux fois — .amt-logo (index) et
   .amt-logo-wrap (fiche formation) : clip rond, pas de panneau. Meme traitement
   ici, pour ne pas creer une 3e variante de la meme marque sur le meme site.
   Le clip laisse voir des creances blanches entre les dents du sceau sur les 8
   derniers % du rayon : ce n'est pas un raté, c'est le bord dentele de la
   marque. */
.appartenance-logo img.seal{
  height:130px;
  width:130px;
  max-height:130px;
  border-radius:50%;
}
.appartenance h3{
  font-family:var(--display-tight);
  font-size:19px;
  font-weight:800;
  margin:0 0 10px;
}
.appartenance p{
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0 0 24px;
}
.appartenance .btn{
  margin-top:auto;
  align-self:flex-start;
}
/* Bloc CTA de fin de page. Etait scope sur la page methode alors que la fiche
   l'utilise aussi — d'ou un CTA non style, aligne a gauche sur fond clair
   (constat 16/07). Descope : composant partage par les deux seules pages qui
   s'en servent, .deepdive-cta et .cta-row n'existent nulle part ailleurs. */
.deepdive-cta{
  background:var(--ink);
  color:var(--paper);
  padding:64px 0;
  text-align:center;
}
.deepdive-cta h2{
  font-family:var(--display);
  font-size:clamp(24px,3vw,34px);
  font-weight:800;
  margin-bottom:16px;
}
.deepdive-cta p{
  color:rgba(241,239,230,0.78);
  max-width:52ch;
  margin:0 auto 30px;
}
.cta-row{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
:where(body.p-fiche-formation-lsp) .hero p.lead{
  color:rgba(241,239,230,0.82);
  font-size:18px;
  margin-top:26px;
  max-width:52ch;
}

/* ---------- PAGE : calendrier-formations  (5 règles) ---------- */
:where(body.p-calendrier-formations) .hero p{
  margin-top:18px;
  font-size:16px;
  color:rgba(241,239,230,0.78);
  max-width:52ch;
  margin-left:auto;
  margin-right:auto;
}
:where(body.p-calendrier-formations) .placeholder-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--bronze);
  border:1px solid var(--bronze);
  padding:8px 16px;
}
:where(body.p-calendrier-formations) .hero .back-link{
  color:rgba(241,239,230,0.7);
}
:where(body.p-calendrier-formations) .hero .back-link:hover{
  color:var(--paper);
}

/* ---------- PAGE : programmes-agileom  (8 règles) ---------- */
:where(body.p-programmes-agileom) .hero .studs{
  color:var(--paper);
}
:where(body.p-programmes-agileom) .eyebrow{
  align-items:center;
  color:var(--bronze);
  display:flex;
  font-family:var(--mono);
  font-size:13px;
  gap:10px;
  letter-spacing:0.10em;
  margin-bottom:26px;
  text-transform:uppercase;
}
:where(body.p-programmes-agileom) .hero .lead{
  color:rgba(241,239,230,0.82);
  font-size:17px;
  margin-top:22px;
  max-width:62ch;
}
:where(body.p-programmes-agileom) h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  height:4px;
  width:0;
  background:var(--crimson);
  transition:width 0.6s cubic-bezier(.2,0,0,1);
}
:where(html.js) :where(body.p-programmes-agileom) .reveal.in h2::after{
  width:100%;
  transition-delay:0.45s;
}
:where(body.p-programmes-agileom) h2:hover::after{
  width:100%;
  transition-delay:0s;
}
/* ---------- PAGE : blog  (4 règles) ---------- */
:where(body.p-blog) .hero .studs{
  color:var(--paper);
}
:where(body.p-blog) .hero .eyebrow{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:20px;
  position:relative;
  z-index:2;
}
:where(body.p-blog) .hero p.lead{
  color:rgba(241,239,230,0.82);
  font-size:18px;
  margin-top:26px;
  max-width:52ch;
}





/* Variante "LSP en premier" : le hero et la section LSP sont tous deux sur
   var(--ink). Colles, ils laissent 166px de vide sombre a la couture. */
.hero--home + .lsp{
  padding-top:24px;
}
.hero--home:has(+ .lsp){
  padding-bottom:24px;
}
.hero--home + .lsp::before{
  content:"";
  position:absolute;
  top:0; left:50%; transform:translateX(-50%);
  width:min(1200px, calc(100% - 48px));
  border-top:1px solid rgba(241,239,230,0.16);
}

/* ---------- PAGES : articles de blog (body.p-article) ---------- */
/* Refonte du 16/07 : les 4 blocs identiques scopes par article
   (p-blog-bete-noire, p-blog-flow-engagement, p-blog-preparation-mentale,
   p-blog-article-template) sont effondres en un seul. Le HTML portait deja
   body.p-article ; la CSS visait encore les anciennes classes, donc plus
   aucune de ces regles ne s'appliquait. Creer un article reste un copier-coller
   du gabarit, sans toucher a styles.css. */
:where(body.p-article) .hero .studs{
  color:var(--paper);
}
:where(body.p-article) .hero .eyebrow{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:20px;
  position:relative;
  z-index:2;
}
:where(body.p-article) .hero p.lead{
  color:rgba(241,239,230,0.82);
  font-size:18px;
  margin-top:26px;
  max-width:52ch;
}
