/* ==========================================================================
   MOSAÏCA — À PROPOS
   Préfixe : .ab-   ·   Page : a-propos.html

   Page manifeste. La typographie porte la page ; aucun bloc décoratif ne
   la porte à sa place. Pas de carte blanche répétée, pas d'icône, pas de
   gros bouton : le message et la mosaïque tiennent l'écran.

   PALETTE
   Bleu nuit, bleu profond, bleu acier, gris pierre, blanc, or patiné.
   Jamais de crème dominant.

   ARCHITECTURE ÉDITORIALE (haut en bas)
   Héros (sombre/mosaïque) → Histoire (clair) → Ce que nous en avons
   compris (sombre) → Les personnes (clair) → Notre manière d'agir
   (sombre) → Ce que nous voulons construire (clair) → CTA (sombre).
   Le rythme clair/sombre alterne à CHAQUE section : c'est lui, avant
   tout texte, qui signale le passage d'une section à l'autre.

   SOMMAIRE
   1. Jetons et socle
   2. Héros
   3. Trames de section
   4. Histoire — la frise (fond clair)
   5. Ce que nous en avons compris — les trois plans et leurs écarts (sombre)
   6. Les personnes (clair)
   7. Notre manière d'agir — la progression (sombre)
   8. Ce que nous voulons construire (clair)
   9. CTA final (sombre)
   10. Animations
   11. Paliers
   ========================================================================== */

.ab{
  /* --- Encres --- */
  --ab-ink:#071726;           /* bleu nuit, fond des zones sombres */
  --ab-ink-2:#0C2438;         /* bleu profond */
  --ab-steel:#1B3B55;         /* bleu acier */
  --ab-stone:#F4F6F8;         /* gris pierre, jamais crème */
  --ab-line:#DCE3E9;
  --ab-line-dark:rgba(238,243,247,.16);
  --ab-gold:#C9A227;          /* or patiné — texte sur fond sombre : 7,5:1+ */
  --ab-gold-warm:#DFC077;
  /* Le même or sur blanc ou gris pierre tombe a 2,2-2,4:1 (verifie par
     calcul WCAG), tres en dessous du seuil AA. Variante assombrie pour
     les libelles et numeros affiches sur fond clair : 4,8-5,3:1. */
  --ab-gold-deep:#836919;
  --ab-text:#12222F;
  --ab-text-soft:#4E5F6D;
  --ab-on-ink:#EEF3F7;
  --ab-on-ink-soft:rgba(238,243,247,.74);

  --ab-ease:cubic-bezier(.22,.61,.36,1);

  color:var(--ab-text);
  background:#fff;
}

/* Conteneur unique. Toutes les sections partagent le même bord gauche :
   c'est ce rail, et non un cadre, qui tient la page du héros au pied de
   page. La mesure de lecture est portée par les éléments eux-mêmes
   (titre 24ch, chapô 58ch), jamais par un conteneur plus étroit. */
.ab-wrap{
  max-width:1140px;margin-inline:auto;
  padding-inline:clamp(1.35rem,4vw,2.75rem);
}

.ab-skip{
  position:absolute;left:-9999px;top:0;z-index:300;
  padding:.85rem 1.4rem;background:var(--ab-ink);color:#fff;
  font-size:.9rem;font-weight:600;text-decoration:none;
}
.ab-skip:focus{left:.75rem;top:.75rem}

.ab a:focus-visible,.ab button:focus-visible{
  outline:2px solid var(--ab-gold);outline-offset:3px;border-radius:1px;
}


/* ==========================================================================
   2. HÉROS
   Le symbole de la mosaïque occupe la droite du cadre : la colonne de
   lecture reste à gauche et ne le recouvre jamais.
   ========================================================================== */

.ab-hero{
  position:relative;
  display:flex;align-items:center;
  min-height:clamp(32rem,78svh,50rem);
  overflow:hidden;isolation:isolate;
  background:var(--ab-ink);
  color:var(--ab-on-ink);
}

.ab-hero-media{position:absolute;inset:0;z-index:0}
.ab-hero-media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:62% 50%;
  display:block;
}

/* Voile de lecture : ancre la colonne gauche sans éteindre la mosaïque
   ni masquer le symbole doré, qui reste à droite. */
.ab-hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(7,23,38,.93) 0%,
      rgba(7,23,38,.86) 24%,
      rgba(7,23,38,.58) 42%,
      rgba(7,23,38,.18) 58%,
      rgba(7,23,38,0) 72%),
    linear-gradient(180deg,
      rgba(7,23,38,.34) 0%,
      rgba(7,23,38,0) 30%,
      rgba(7,23,38,0) 64%,
      rgba(7,23,38,.44) 100%);
}

.ab-hero-inner{
  position:relative;z-index:2;
  width:100%;max-width:1140px;
  margin-inline:auto;
  padding:clamp(3rem,7vw,6rem) clamp(1.35rem,4vw,2.75rem);
  box-sizing:border-box;

  /* Couloir de lecture. Le symbole doré occupe 56,7 % à 80,5 % de la
     largeur de l'image (mesuré sur les pixels de la bannière). La colonne
     est bornée en vw pour s'arrêter avant lui à toutes les tailles.
     Sans cette borne, le titre débordait de 98 px sur le symbole. */
  --ab-col:min(40rem,42vw);
}

.ab-eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ab-gold);
  margin-bottom:clamp(1rem,2vw,1.5rem);
}
.ab-eyebrow::before{content:"";width:2rem;height:1px;background:var(--ab-gold);flex:none}

.ab-hero-title{
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-weight:600;
  font-size:clamp(2.35rem,4.8vw,4.15rem);
  line-height:1.06;letter-spacing:-.022em;
  margin:0;
  color:var(--ab-on-ink);
  max-width:var(--ab-col);
  text-wrap:balance;
}

.ab-hero-sub{
  margin:clamp(1.2rem,2.4vw,1.75rem) 0 0;
  font-size:clamp(1.02rem,1.32vw,1.22rem);
  line-height:1.62;
  color:var(--ab-on-ink-soft);
  /* 46ch plaçait la deuxième idée — la plus longue des trois — à 99 % de
     la largeur disponible : mesuré à 1920, 1600, 1440, 1366 et 1280, elle
     tenait de justesse. La moindre variation de rendu (police non encore
     chargée, métriques d'Edge) la faisait basculer et laissait
     « des pratiques, » seule sur une ligne. 52ch lui rend une marge
     réelle sans élargir le couloir : --ab-col, calé sur le symbole doré,
     reste la borne haute et n'est jamais dépassé. */
  max-width:min(var(--ab-col),52ch);
  text-wrap:pretty;
}

/* Retours éditoriaux maîtrisés : une idée complète par ligne. Sous 1080px
   le couloir ne tient plus la plus longue : le texte redevient courant.
   text-wrap:balance est le filet de sécurité : si une idée doit malgré
   tout se replier, elle se répartit sur deux lignes équilibrées au lieu
   d'abandonner un fragment de trois mots. */
.ab-l{display:block;text-wrap:balance}


/* ==========================================================================
   3. TRAMES DE SECTION
   Rythme vertical : chaque section reçoit un espacement selon sa densité,
   pas une valeur générique répétée sept fois.
     section compacte (défaut) : 56–72px  — .ab-build
     section majeure            : 72–96px  — .ab-conv, .ab-team, .ab-story
     CTA final                  : 64–80px  — .ab-cta
   L'alternance de fond clair/sombre à chaque section (voir sommaire plus
   haut) fait déjà tout le travail de transition : aucune section n'a
   besoin d'un padding-top spécial pour se distinguer de la précédente.
   ========================================================================== */

.ab-sec{padding-block:clamp(3.5rem,5vw,4.5rem)}
.ab-head{max-width:46rem;margin-bottom:clamp(2.25rem,4.5vw,3.5rem)}

.ab-kicker{
  display:inline-flex;align-items:center;gap:.65rem;
  font-size:.7rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ab-gold);margin-bottom:1rem;
}
/* Le filet decoratif reste le meme or vibrant partout : purement
   graphique, il n'est pas soumis au seuil de contraste du texte. */
.ab-kicker::before{content:"";width:1.6rem;height:1px;background:var(--ab-gold);flex:none}

/* .ab-kicker est partagee entre sections sombres et claires. Le texte de
   ce label doit donc changer de teinte selon le fond : --ab-gold sur
   .ab-conv/.ab-act/.ab-cta (sombres, non listes ici — c'est deja la
   valeur par defaut), --ab-gold-deep sur .ab-story/.ab-team/.ab-build
   (blanc ou gris pierre), calcule pour rester au-dessus du seuil AA sur
   ces deux fonds clairs. */
.ab-story .ab-kicker,.ab-team .ab-kicker,.ab-build .ab-kicker{
  color:var(--ab-gold-deep);
}

.ab-h2{
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-weight:600;
  font-size:clamp(1.72rem,3.1vw,2.55rem);
  line-height:1.17;letter-spacing:-.018em;
  margin:0;
  max-width:24ch;
  text-wrap:balance;
}
/* Phrase manifeste : elle doit tenir l'écran seule. */
.ab-h2--manifest{
  font-size:clamp(1.95rem,3.7vw,3.05rem);
  line-height:1.12;
  max-width:20ch;
}

.ab-lead{
  margin:1.15rem 0 0;
  font-size:clamp(1rem,1.25vw,1.1rem);
  line-height:1.72;
  color:var(--ab-text-soft);
  max-width:58ch;
  text-wrap:pretty;
}


/* ==========================================================================
   4. HISTOIRE — FRISE ÉDITORIALE (fond clair)
   Immédiatement après le héros : le lecteur vient de lire « Mosaïca est
   née... », cette section répond « comment ». Fond gris pierre très
   léger — la bascule depuis le bleu nuit du héros est déjà, à elle
   seule, une transition franche.
   ========================================================================== */

.ab-story{background:var(--ab-stone);padding-block:clamp(3.75rem,5.5vw,5rem)}

.ab-time{
  position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.75rem);
  margin:0;padding:0;list-style:none;
}

/* LE FILET
   Un rail unique traversant les quatre étapes donnait à la section
   l'allure d'une frise de rapport annuel — et il ne survivait pas au
   passage en deux rangées. Chaque étape porte donc son propre filet,
   posé sous sa date : quatre traits fins alignés, qui se remplissent
   d'or l'un après l'autre au défilement. La progression se lit dans le
   décalage des entrées, pas dans une barre de chronologie.
   Le filet au repos est en --ab-line (fond clair) ; --ab-line-dark,
   pensé pour un fond sombre, y serait quasi invisible. */
.ab-t-item{
  position:relative;padding-top:3.35rem;
  background:linear-gradient(var(--ab-line),var(--ab-line)) 0 2.2rem/100% 1px no-repeat;
}
.ab-t-item::after{
  content:"";position:absolute;left:0;right:0;top:2.2rem;height:1px;
  background:linear-gradient(90deg,var(--ab-gold-deep),var(--ab-gold));
  transform:scaleX(0);transform-origin:left;
  transition:transform .85s var(--ab-ease);
}
.ab-t-item::before{
  content:"";position:absolute;left:0;top:1.92rem;
  width:.58rem;height:.58rem;border-radius:50%;
  background:var(--ab-gold-deep);
  transform:scale(0);transition:transform .4s var(--ab-ease);
}
.ab-time.is-in .ab-t-item::after{transform:scaleX(1)}
.ab-time.is-in .ab-t-item::before{transform:scale(1)}
.ab-time.is-in .ab-t-item:nth-child(2)::before,
.ab-time.is-in .ab-t-item:nth-child(2)::after{transition-delay:.14s}
.ab-time.is-in .ab-t-item:nth-child(3)::before,
.ab-time.is-in .ab-t-item:nth-child(3)::after{transition-delay:.28s}
.ab-time.is-in .ab-t-item:nth-child(4)::before,
.ab-time.is-in .ab-t-item:nth-child(4)::after{transition-delay:.42s}

.ab-t-date{
  position:absolute;top:0;left:0;
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:600;
  color:var(--ab-gold-deep);letter-spacing:-.01em;
}
.ab-t-item h3{
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-weight:600;font-size:clamp(1.05rem,1.5vw,1.22rem);
  line-height:1.28;margin:0 0 .55rem;color:var(--ab-text);
  text-wrap:balance;
}
.ab-t-item p{margin:0;font-size:.93rem;line-height:1.6;color:var(--ab-text-soft);text-wrap:pretty}
.ab-t-item--now h3{color:var(--ab-steel)}


/* ==========================================================================
   5. CE QUE NOUS EN AVONS COMPRIS — LES TROIS PLANS (fond sombre)
   L'objet de la section n'est pas les trois catégories : c'est l'ÉCART
   entre elles. Les plans sont donc décalés les uns des autres, et le
   décalage lui-même est nommé. Cette phrase arrive maintenant après
   l'histoire : elle en est la conclusion, pas une théorie posée
   gratuitement.
   ========================================================================== */

.ab-conv{background:var(--ab-ink);color:var(--ab-on-ink);padding-block:clamp(3rem,4.4vw,4rem)}
.ab-conv .ab-h2{color:var(--ab-on-ink)}
/* Le chapô se lit sur une ligne de plus qu'il ne lui en faut : à 58ch il
   tombait sur quatre lignes alors que la colonne disponible en tient
   trois. 64ch reste sous la largeur de l'en-tête et dans la plage de
   confort de lecture. */
.ab-conv .ab-lead{color:var(--ab-on-ink-soft);max-width:64ch}
.ab-conv .ab-head{margin-bottom:clamp(1.5rem,3vw,2.25rem)}

.ab-planes{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:start;
  gap:0;margin:0;padding:0;list-style:none;
}

.ab-plane{
  position:relative;
  padding:1.3rem 1.5rem 1.1rem 0;
  border-top:2px solid var(--ab-gold);
}
/* Le décalage vertical matérialise l'écart : les trois plans ne sont
   jamais alignés, exactement comme les trois récits d'une organisation.
   2,6rem / 5,2rem disaient la même chose mais poussaient la section très
   au-delà d'un écran : l'idée était lue bien avant que le décalage ne
   soit épuisé. Réduit de moitié, l'escalier reste immédiatement
   perceptible et la section se saisit d'un seul regard. */
.ab-plane[data-plane="2"]{margin-top:1.4rem}
.ab-plane[data-plane="3"]{margin-top:2.8rem}

.ab-plane-n{
  display:block;
  font-size:.7rem;font-weight:700;letter-spacing:.16em;
  color:var(--ab-gold);margin-bottom:.7rem;
}
.ab-plane h3{
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-weight:600;font-size:clamp(1.15rem,1.8vw,1.45rem);
  line-height:1.25;margin:0 0 .55rem;color:var(--ab-on-ink);
}
.ab-plane-d{margin:0 0 .45rem;font-size:.95rem;line-height:1.55;color:var(--ab-on-ink-soft)}
/* .5 donnait 4,82:1 sur ab-ink — au-dessus du seuil AA mais avec une
   marge etroite pour un texte italique secondaire. .55 -> 5,57:1. */
.ab-plane-s{margin:0;font-size:.92rem;line-height:1.5;color:rgba(238,243,247,.55);font-style:italic}

/* La colonne « écart » : un filet vertical et un mot, rien de plus. */
.ab-gap{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:clamp(3.25rem,5.5vw,5.25rem);
  align-self:stretch;
  list-style:none;
}
.ab-gap::before{
  content:"";position:absolute;top:2rem;bottom:.75rem;left:50%;
  width:1px;background:linear-gradient(180deg,var(--ab-gold),rgba(201,162,39,.12));
}
.ab-gap span{
  position:relative;
  font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ab-gold-warm);
  background:var(--ab-ink);padding:.4rem 0;
  writing-mode:vertical-rl;
}

.ab-punch{
  margin:clamp(1.6rem,3vw,2.25rem) 0 0;
  padding-top:clamp(1.1rem,2.1vw,1.5rem);
  border-top:1px solid var(--ab-line-dark);
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-size:clamp(1.3rem,2.4vw,1.85rem);
  line-height:1.35;color:var(--ab-gold-warm);
  max-width:34ch;
}


/* ==========================================================================
   6. LES PERSONNES — TRIPTYQUE ÉDITORIAL (fond clair)

   La section affirme « trois regards ». Trois blocs pleine largeur
   empilés la contredisaient : on ne voyait jamais les trois ensemble, et
   la section pesait à elle seule un tiers de la page au téléphone.

   Trois territoires ouverts, séparés par un filet vertical d'un pixel.
   Pas de carte, pas de fond propre, pas d'ombre, pas d'arrondi, pas de
   portrait rond. Les trois colonnes partagent la même grille
   typographique : c'est l'alignement, et non un cadre, qui leur donne un
   poids visuel identique.
   ========================================================================== */

.ab-team{background:#fff;padding-block:clamp(3.75rem,5.5vw,5rem)}

.ab-trio{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,3.4vw,3rem);
}


.ab-person{
  position:relative;
  display:flex;flex-direction:column;
  min-width:0;
}
.ab-person-body{
  display:flex;flex-direction:column;align-items:flex-start;
  flex:1;min-width:0;
}
/* Le filet de séparation est tracé au milieu de la gouttière par un
   pseudo-élément : aucune colonne n'est rétrécie ni décalée, et les
   trois territoires gardent exactement la même largeur. */
.ab-trio > .ab-person + .ab-person::before{
  content:"";position:absolute;top:0;bottom:0;
  left:calc(clamp(1.75rem,3.4vw,3rem) / -2);
  width:1px;background:var(--ab-line);
}

/* Les trois photographies n'ont pas le même format d'origine (600×315,
   700×723, 600×400). Un cadre unique en 4/3 leur donne la même surface
   — donc le même poids — sans qu'aucune ne soit rognée au point de
   perdre son sujet. */
.ab-person-media{margin:0 0 1.15rem;overflow:hidden;background:var(--ab-stone);width:100%}
.ab-person-media img{
  width:100%;height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:50% 30%;            /* garde les visages haut dans le cadre */
  display:block;
}

.ab-person-angle{
  display:block;
  font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ab-gold-deep);margin-bottom:.7rem;line-height:1.45; /* fond blanc */
}
/* Les trois angles occupent deux lignes dans une colonne du triptyque :
   le plancher garantit que les trois noms démarrent sur la même ligne
   même si l'un d'eux tient sur une seule. Hors triptyque, la hauteur
   redevient naturelle. */
.ab-trio .ab-person-angle{min-height:2.9em}
.ab-person h3{
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-weight:600;font-size:clamp(1.3rem,1.9vw,1.6rem);
  line-height:1.15;margin:0 0 .25rem;color:var(--ab-text);
  text-wrap:balance;
}
.ab-person-role{
  margin:0 0 .85rem;font-size:.86rem;font-weight:600;color:var(--ab-steel);line-height:1.4;
}
.ab-person-txt{
  margin:0 0 .85rem;font-size:.95rem;line-height:1.65;
  color:var(--ab-text-soft);text-wrap:pretty;
}
/* Une preuve, une seule : la ligne qui ancre le regard dans un fait
   vérifiable. Empiler les mandats aurait ramené le mini-CV. */
.ab-person-proof{
  margin:0 0 1.1rem;padding-left:.9rem;
  border-left:2px solid var(--ab-gold-deep);
  font-size:.9rem;line-height:1.5;color:var(--ab-text);
}

.ab-person-link{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:auto;                    /* les trois liens s'alignent en bas */
  font-size:.85rem;font-weight:600;
  color:var(--ab-steel);text-decoration:none;
  padding-bottom:.2rem;border-bottom:1px solid var(--ab-line);
  transition:color .22s,border-color .22s;
}
.ab-person-link svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ab-ease)}
.ab-person-link:hover{color:var(--ab-gold-deep);border-bottom-color:var(--ab-gold-deep)}
.ab-person-link:hover svg{transform:translateX(3px)}


/* ==========================================================================
   7. NOTRE MANIÈRE D'AGIR — PROGRESSION CONTINUE (fond sombre)
   Trois mouvements reliés par un seul filet, pas trois blocs autonomes.
   Fond bleu profond : troisième bascule sombre de la page, distincte du
   bleu nuit de « Ce que nous en avons compris » pour garder du rythme.
   ========================================================================== */

.ab-act{background:var(--ab-ink-2);color:var(--ab-on-ink)}
/* Les trois lignes du H2 doivent tenir chacune sur une seule ligne :
   « Rendre visibles les écarts. » fait 28 caractères, au-delà du
   max-width:20ch hérité de .ab-h2--manifest (pensé pour une phrase
   unique qui se répartit elle-même). */
.ab-act .ab-h2{color:var(--ab-on-ink);max-width:34ch}

.ab-moves{
  position:relative;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3.5vw,3rem);
  margin:0;padding:0;list-style:none;
}
/* Le filet traverse les trois mouvements : la progression est continue.
   Le trait s'estompe vers --ab-line-dark (calé pour un fond sombre) et
   non --ab-line (pensé pour un fond clair). */
.ab-moves::before{
  content:"";position:absolute;left:0;right:0;top:1.05rem;height:1px;
  background:linear-gradient(90deg,var(--ab-gold) 0%,var(--ab-gold) 66%,var(--ab-line-dark) 100%);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ab-ease);
}
.ab-moves.is-in::before{transform:scaleX(1)}

.ab-move{position:relative;padding-top:2.9rem}
.ab-move::before{
  content:"";position:absolute;left:0;top:.68rem;
  width:.78rem;height:.78rem;
  background:var(--ab-gold);
  transform:rotate(45deg) scale(0);
  transition:transform .5s var(--ab-ease);
}
.ab-moves.is-in .ab-move::before{transform:rotate(45deg) scale(1)}
.ab-moves.is-in .ab-move:nth-child(2)::before{transition-delay:.22s}
.ab-moves.is-in .ab-move:nth-child(3)::before{transition-delay:.44s}

.ab-move-n{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  color:var(--ab-gold);margin-bottom:.7rem; /* fond sombre : or vibrant */
}
.ab-move h3{
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-weight:600;font-size:clamp(1.18rem,1.9vw,1.5rem);
  line-height:1.24;margin:0 0 .75rem;color:var(--ab-on-ink);
}
.ab-move p{margin:0;font-size:.97rem;line-height:1.7;color:var(--ab-on-ink-soft)}


/* ==========================================================================
   8. CE QUE NOUS VOULONS CONSTRUIRE (fond clair)
   Deux colonnes : la phrase manifeste tient la gauche, son développement
   la droite. Sur une seule colonne étroite, la section laissait sur grand
   écran un vide que rien ne venait justifier — et le remplir aurait
   demandé d'inventer du contenu. Le titre reste dominant : il occupe la
   colonne la plus large et garde son échelle manifeste.
   ========================================================================== */

.ab-build{background:var(--ab-stone)}
.ab-build-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.ab-build-lead{min-width:0}
.ab-build .ab-h2{max-width:16ch}
.ab-build .ab-lead{
  color:var(--ab-text);font-size:clamp(1.05rem,1.4vw,1.2rem);
  margin-top:0;max-width:44ch;
}
/* La colonne de droite démarre à hauteur de la première ligne du titre,
   pas du libellé qui le surplombe : le libellé et sa marge occupent
   environ 2rem au-dessus du titre. */
.ab-build-grid > .ab-lead{padding-top:2rem}


/* ==========================================================================
   9. CTA FINAL (fond sombre)
   Un seul appel à l'action, compact. Il n'est jamais l'élément le plus
   visible de la section : le titre l'est.
   ========================================================================== */

/* CTA final : compact par nature, jamais un écran presque complet.
   Il partage le conteneur commun : son bord gauche s'aligne sur celui de
   toutes les autres sections et sur le pied de page. Dans un conteneur
   resserré et centré, il décrochait de 160px vers la droite — seule zone
   de la page à rompre le rail de lecture. Sa mesure de texte reste
   courte : ce sont le titre (24ch) et le chapô (58ch) qui la tiennent,
   comme partout ailleurs. */
.ab-cta{background:var(--ab-steel);color:var(--ab-on-ink);padding-block:clamp(4rem,5.5vw,5rem)}
.ab-cta .ab-h2{color:var(--ab-on-ink)}
/* Une seule phrase de treize mots : sur deux lignes, elle abandonnait
   « se passe. » seul en dessous. Assez courte pour être équilibrée. */
.ab-cta .ab-lead{color:var(--ab-on-ink-soft);text-wrap:balance}

.ab-cta-row{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.9rem clamp(1.5rem,3vw,2.25rem);
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
}
.ab-cta-main{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.82rem 1.5rem;
  border:1px solid var(--ab-gold);
  color:var(--ab-gold-warm);
  font-size:.82rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;line-height:1;
  transition:background-color .3s var(--ab-ease),color .3s var(--ab-ease);
}
.ab-cta-main svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .32s var(--ab-ease)}
.ab-cta-main:hover{background:var(--ab-gold);color:#071726}
.ab-cta-main:hover svg{transform:translateX(3px)}

.ab-cta-note{
  margin:clamp(1.5rem,3vw,2rem) 0 0;
  font-size:.88rem;
  /* .56 donnait un contraste de 4,44:1 sur le bleu acier — sous le
     seuil AA (4,5:1) pour un texte courant. .64 -> 5,29:1. */
  color:rgba(238,243,247,.64);
}


/* ==========================================================================
   10. ANIMATIONS
   Une idée d'animation par section. Le mouvement installe la page ; il ne
   se remarque pas.
   ========================================================================== */

/* Rien n'est masqué tant que le script n'a pas pris la main : sans
   JavaScript, la page reste entièrement lisible.
   Le déplacement vertical reste sous 12px : au-delà, la révélation se
   remarque elle-même et la page semble bouger sous le curseur. */
.ab-js .ab-h{opacity:0;transform:translateY(10px)}
.ab-js .ab-r{opacity:0;transform:translateY(11px)}

.ab-hero.is-lit .ab-h{
  opacity:1;transform:none;
  transition:opacity .62s var(--ab-ease),transform .62s var(--ab-ease);
  transition-delay:calc(var(--at,0) * 110ms);
}
/* La mosaïque ouvre la scène, le texte s'installe ensuite. */
.ab-js .ab-hero-media img{opacity:0;transform:scale(1.02)}
.ab-hero.is-lit .ab-hero-media img{
  opacity:1;transform:none;
  transition:opacity 1.05s var(--ab-ease),transform 1.25s var(--ab-ease);
}

.ab-r.is-in{
  opacity:1;transform:none;
  transition:opacity .58s var(--ab-ease),transform .58s var(--ab-ease);
}

@media (prefers-reduced-motion:reduce){
  .ab-js .ab-h,.ab-js .ab-r,.ab-js .ab-hero-media img{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
  .ab-moves::before,.ab-t-item::after{transform:scaleX(1) !important;transition:none !important}
  .ab-t-item::before{transform:scale(1) !important;transition:none !important}
  .ab-move::before{transform:rotate(45deg) scale(1) !important;transition:none !important}
  .ab *,.ab *::before,.ab *::after{transition-duration:.01ms !important}
}


/* ==========================================================================
   11. PALIERS

   Trois bascules structurelles, dans cet ordre :
     1180px — la frise passe en 2 × 2 et le triptyque en 1 + 2.
              Quatre colonnes de 200px ne sont plus une frise, ce sont
              quatre colonnes comprimées ; mesuré à 1024px, chaque
              paragraphe tenait sur onze lignes de quatre mots.
     1080px — le héros change de composition (voir le commentaire dédié).
      760px — tout passe en une colonne : progression verticale.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1180px — LA FRISE EN DEUX RANGÉES, LE TRIPTYQUE EN 1 + 2
   -------------------------------------------------------------------------- */
@media(max-width:1180px){
  /* Deux étapes par rangée : chacune retrouve une largeur de lecture.
     Les filets restent alignés d'une rangée à l'autre, la composition
     reste une frise et non une grille de blocs. */
  .ab-time{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(2rem,4vw,3rem);
    row-gap:clamp(2.25rem,4vw,3rem);
  }

  /* Le triptyque ne tient plus à trois : le premier regard prend la
     largeur avec sa photographie à gauche, les deux autres restent côte
     à côte. Les trois demeurent visibles d'un seul coup d'œil. */
  .ab-trio{
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:clamp(2rem,3.5vw,2.75rem);
  }
  .ab-trio > .ab-person:first-child{
    grid-column:1 / -1;
    flex-direction:row;align-items:flex-start;
    gap:clamp(1.5rem,3vw,2.5rem);
    padding-bottom:clamp(1.75rem,3.5vw,2.5rem);
    border-bottom:1px solid var(--ab-line);
  }
  .ab-trio > .ab-person:first-child .ab-person-media{
    flex:0 0 40%;margin-bottom:0;
  }
  .ab-trio > .ab-person:first-child .ab-person-link{margin-top:.15rem}
  /* Le premier regard n'a plus de voisin de rangée : sa hauteur d'angle
     redevient libre. Les deux du bas restent alignés entre eux. */
  .ab-trio > .ab-person:first-child .ab-person-angle{min-height:0}
  /* Le filet vertical ne sépare plus que les deux colonnes du bas. */
  .ab-trio > .ab-person + .ab-person::before{content:none}
  .ab-trio > .ab-person:last-child::before{
    content:"";position:absolute;top:0;bottom:0;
    left:calc(clamp(1.75rem,3.4vw,3rem) / -2);
    width:1px;background:var(--ab-line);
  }
}

@media(max-width:1080px){
  /* Les retours éditoriaux sont relâchés : le couloir ne tient plus la
     plus longue des idées sur une seule ligne. */
  .ab-l{display:inline}

  /* BASCULE DE COMPOSITION DU HÉROS
     Au-delà de 1080px, le cadre est plus large que la bannière : toute sa
     largeur est visible et le symbole reste à droite, hors de la colonne
     de lecture.

     En dessous, le cadre devient étroit. object-fit:cover recadre alors
     horizontalement et ramène le symbole vers la gauche, dans le texte —
     mesuré : 56px d'empiètement à 1080px, 120px à 900px. Le symbole
     occupant la moitié de la hauteur, aucun réglage de voile ou de
     colonne ne le libère.

     On change donc de composition plutôt que de rogner le message : la
     mosaïque devient une bande pleine largeur, montrée dans ses
     proportions d'origine — symbole entier, aucun recadrage — et le texte
     s'installe dessous, sur le bleu nuit. Le chevauchement devient
     structurellement impossible. */
  .ab-hero{display:block;align-items:initial;min-height:0}
  .ab-hero-media{
    position:relative;inset:auto;
    aspect-ratio:1672 / 941;          /* proportions d'origine, aucun recadrage */
    max-height:min(58svh,30rem);
  }
  .ab-hero-media img{object-position:62% 50%}
  /* Le voile ne couvre plus que la bande : il fond son bas dans le bleu
     nuit du bloc de texte, sans jamais assombrir le symbole. */
  .ab-hero-veil{
    top:auto;bottom:0;height:38%;
    background:linear-gradient(180deg,rgba(7,23,38,0) 0%,rgba(7,23,38,.9) 82%,var(--ab-ink) 100%);
  }
  .ab-hero-inner{
    position:relative;z-index:2;
    --ab-col:100%;
    padding-top:clamp(1.75rem,4vw,2.75rem);
  }
  .ab-hero-sub{max-width:52ch}

  /* Les trois plans passent en colonne ; l'écart devient un intervalle
     vertical nommé, la logique est conservée. */
  .ab-planes{grid-template-columns:minmax(0,1fr);gap:0}
  .ab-plane{padding-right:0;margin-top:0 !important}
  .ab-gap{
    width:auto;height:3.25rem;
    justify-content:flex-start;align-self:auto;
  }
  .ab-gap::before{top:0;bottom:0;left:.34rem}
  .ab-gap span{writing-mode:horizontal-tb;padding:0 .75rem 0 1.25rem}
}

/* --------------------------------------------------------------------------
   900px — LA MÉTHODE PASSE EN PROGRESSION VERTICALE
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .ab-moves{grid-template-columns:minmax(0,1fr);gap:0}
  /* Sur une colonne, le filet devient vertical : la progression reste
     lisible de haut en bas. */
  .ab-moves::before{
    left:.36rem;right:auto;top:0;bottom:0;width:1px;height:auto;
    background:linear-gradient(180deg,var(--ab-gold) 0%,var(--ab-gold) 70%,var(--ab-line-dark) 100%);
    transform:scaleY(0);transform-origin:top;
  }
  .ab-moves.is-in::before{transform:scaleY(1)}
  .ab-move{padding:0 0 1.6rem 2.3rem}
  .ab-move:last-child{padding-bottom:0}
  .ab-move::before{top:.3rem}
  .ab-move-n{margin-bottom:.4rem}
  .ab-move h3{margin-bottom:.4rem}

  /* Deux colonnes seraient encore tenables ici, mais l'ambition se lit
     mieux d'un bloc : le titre puis son développement. */
  .ab-build-grid{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .ab-build .ab-h2{max-width:20ch}
  .ab-build-grid > .ab-lead{padding-top:0;max-width:58ch}
}

/* --------------------------------------------------------------------------
   760px — UNE SEULE COLONNE
   La frise et le triptyque deviennent des progressions verticales. C'est
   ici que se joue la longueur de la page au téléphone : chaque bloc est
   resserré, jamais raccourci.
   -------------------------------------------------------------------------- */
@media(max-width:760px){

  /* --- LA FRISE : progression verticale ---
     Les filets individuels laissent place à un rail unique de haut en
     bas : sur une colonne, c'est lui qui porte la chronologie. */
  .ab-time{grid-template-columns:minmax(0,1fr);gap:0}
  .ab-time::before,.ab-time::after{
    content:"";position:absolute;left:.3rem;top:0;bottom:0;width:1px;
  }
  .ab-time::before{background:var(--ab-line)}
  .ab-time::after{
    background:linear-gradient(180deg,var(--ab-gold-deep),var(--ab-gold));
    transform:scaleY(0);transform-origin:top;
    transition:transform 1.1s var(--ab-ease);
  }
  .ab-time.is-in::after{transform:scaleY(1)}
  .ab-t-item{
    padding:0 0 1.4rem 2.2rem;
    background:none;                    /* le filet individuel s'efface */
  }
  .ab-t-item::after{content:none}
  .ab-t-item:last-child{padding-bottom:0}
  .ab-t-item::before{top:.42rem;left:.01rem}
  .ab-t-date{position:static;display:block;margin-bottom:.3rem;font-size:1.15rem}
  .ab-t-item h3{margin-bottom:.4rem}

  /* --- LES PERSONNES : un profil après l'autre ---
     Photo, angle, nom, fonction, texte, preuve, LinkedIn. Aucune
     tentative de conserver trois colonnes au pouce. */
  .ab-trio{grid-template-columns:minmax(0,1fr);gap:0}
  .ab-trio > .ab-person{
    padding-block:1.4rem;
    border-top:1px solid var(--ab-line);
  }
  .ab-trio > .ab-person:first-child{
    display:flex;flex-direction:column;
    padding-top:0;padding-bottom:1.4rem;
    border-top:0;border-bottom:0;gap:0;
  }
  .ab-trio > .ab-person:first-child .ab-person-media{flex:none;margin-bottom:1rem}
  .ab-trio > .ab-person:last-child{padding-bottom:0}
  .ab-trio > .ab-person::before,
  .ab-trio > .ab-person:last-child::before{content:none}
  .ab-person-media{margin-bottom:.85rem}
  .ab-person-media img{aspect-ratio:16 / 10;object-position:50% 28%}
  .ab-person-angle{margin-bottom:.45rem}
  .ab-person-role{margin-bottom:.5rem}
  .ab-person-txt{margin-bottom:.6rem}
  .ab-person-proof{margin-bottom:.75rem}
  .ab-person-link{margin-top:0}

  /* --- LES TROIS PLANS : l'escalier se referme complètement ---
     Sur une colonne, le décalage vertical n'a plus rien à décaler : le
     mot « écart » suffit à porter l'idée, et la section perd la hauteur
     qu'un escalier invisible lui coûtait. */
  .ab-gap{height:1.75rem}
  .ab-plane{padding-block:.85rem .75rem}
  .ab-punch{margin-top:1.25rem;padding-top:.9rem}

  /* --- Rythme général ---
     La page téléphone était bonne mais beaucoup trop longue : ce sont
     les marges, les décalages et les blocs successifs qui la portaient,
     pas le texte. On resserre donc l'espace, jamais la lecture. */
  .ab-sec,.ab-story,.ab-conv,.ab-team{padding-block:clamp(2.25rem,7vw,3rem)}
  .ab-cta{padding-block:clamp(2.5rem,7.5vw,3.25rem)}
  .ab-head{margin-bottom:1.35rem}
  .ab-conv .ab-head{margin-bottom:1.25rem}
  /* 1,72 est un interlignage d'écran large. Sur une colonne de 346px il
     étire chaque chapô d'une demi-ligne par ligne sans rien apporter à
     la lecture : 1,62 reste très au-dessus du seuil de confort. */
  .ab-lead{line-height:1.62}
  .ab-cta-row{margin-top:1.5rem}
  .ab-cta-note{margin-top:1.35rem}
}

@media(max-width:640px){
  /* La bande garde ses proportions : sur un téléphone, le symbole reste
     entier et lisible au lieu d'être rogné. */
  .ab-hero-media{max-height:none}
  .ab-hero-inner{padding-bottom:clamp(2rem,7vw,2.75rem)}
  .ab-hero-title{font-size:clamp(2.1rem,8.2vw,2.9rem)}
  .ab-hero-sub{max-width:none}
  /* Le portrait garde le cadrage 16/10 hérité du palier précédent. En
     4/3 il pesait 260px de haut dans une colonne de 346 : trois fois de
     suite, c'est la photographie seule qui faisait la longueur de la
     section. Le visage reste largement lisible. */
}


/* ==========================================================================
   5bis · NOTRE UNIVERS VISUEL
   Porte d'entree vers /a-propos/univers-mosaica.html.
   La mosaique est montree entiere : le cadre porte le ratio natif de la
   composition, donc object-fit:contain ne rogne rien et ne laisse aucun vide.
   ========================================================================== */
.ab-univ{background:var(--ab-stone)}
.ab-univ-head{max-width:52rem}
.ab-univ-head .ab-h2{max-width:24ch}

.ab-univ-media{
  position:relative;margin:clamp(2rem,4vw,3rem) 0 0;overflow:hidden;
  background:#fff;border:1px solid var(--ab-line);border-radius:2px;
  box-shadow:0 24px 60px -30px rgba(7,23,38,.38);
}
.ab-univ-media img{display:block;width:100%;height:100%;object-fit:contain}

/* Revelation : quelques tesselles apparaissent, lentement, puis se posent. */
.ab-univ-anim{position:absolute;inset:0;pointer-events:none}
.ab-univ-anim i{
  position:absolute;display:block;background:var(--ab-gold-warm);
  opacity:0;transform:rotate(45deg) scale(.4);
}
.ab-js .ab-univ-media.is-in .ab-univ-anim i{
  animation:ab-univ-tess 1.6s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes ab-univ-tess{
  0%{opacity:0;transform:rotate(45deg) scale(.4)}
  55%{opacity:.8}
  100%{opacity:.3;transform:rotate(45deg) scale(1)}
}

/* Lien editorial : pas un bouton, une invitation a entrer. */
.ab-univ-cta{margin:clamp(1.75rem,3vw,2.4rem) 0 0}
.ab-univ-cta a{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:1rem;font-weight:600;color:var(--ab-ink);text-decoration:none;
  padding-bottom:.35rem;border-bottom:1px solid var(--ab-gold);
  transition:gap .25s var(--ab-ease),color .25s ease;
}
.ab-univ-cta a:hover{gap:1rem;color:var(--ab-gold-deep)}
.ab-univ-cta a:focus-visible{outline:2px solid var(--ab-gold);outline-offset:4px;border-radius:1px}
.ab-univ-cta svg{
  width:1.05rem;height:1.05rem;flex-shrink:0;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

@media(max-width:640px){
  /* La composition reste entiere : on n'ajuste que le rythme autour. */
  .ab-univ-media{margin-top:1.65rem}
}

/* Aucun mouvement : les tesselles sont deja a leur place finale. */
@media(prefers-reduced-motion:reduce){
  .ab-js .ab-univ-media.is-in .ab-univ-anim i{animation:none}
  .ab-univ-anim i{opacity:.3;transform:rotate(45deg) scale(1)}
}

/* =========================================================================
   NOTRE MARRAINE

   Section editoriale autonome, distincte de la grille d'equipe. Deux
   colonnes sur ordinateur, portrait a gauche. Le fond gris pierre
   installe une respiration entre le blanc de l'equipe et le bleu profond
   de « Notre maniere d'agir » : le rythme clair / sombre de la page est
   conserve.

   Aucun composant nouveau : la mesure vient de .ab-wrap, la typographie
   de .ab-h2 et .ab-kicker, le lien reprend le motif de .ab-person-link.
   ========================================================================= */
.ab-marraine{background:var(--ab-stone)}

/* Le kicker suit la convention deja etablie plus haut : teinte foncee sur
   fond clair, pour rester au-dessus du seuil AA. */
.ab-marraine .ab-kicker{color:var(--ab-gold-deep)}

/* 43/57 et non 40/60 : les unites `fr` se partagent l'espace APRES
   deduction de la gouttiere. A 40fr, la colonne image retombait a 37,8 %
   de la mesure une fois les 56 px d'ecart retires — sous la fourchette
   visee. 43fr la ramene a 40,7 %. */
.ab-marraine-grid{
  display:grid;
  grid-template-columns:minmax(0,43fr) minmax(0,57fr);
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:start;
}

/* Cadrage rectangulaire 4/5. La source est carree : a cette proportion,
   le recadrage ne mord que le fond sombre des cotes, jamais le visage. */
.ab-marraine-media{
  margin:0;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--ab-ink);
}
.ab-marraine-media img{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
  display:block;
}

.ab-marraine-sub{
  margin:.6rem 0 1.4rem;
  font-size:clamp(1rem,1.4vw,1.12rem);
  font-weight:600;line-height:1.45;
  color:var(--ab-steel);
}
.ab-marraine-body p{
  margin:0 0 .95rem;
  font-size:.97rem;line-height:1.72;
  color:var(--ab-text-soft);
  max-width:60ch;text-wrap:pretty;
}
.ab-marraine-body em{font-style:italic;color:var(--ab-text)}

.ab-marraine-link{margin:1.5rem 0 0 !important}
.ab-marraine-link a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.85rem;font-weight:600;
  color:var(--ab-steel);text-decoration:none;
  padding-bottom:.2rem;border-bottom:1px solid var(--ab-line);
  transition:color .22s,border-color .22s;
}
.ab-marraine-link svg{
  width:14px;height:14px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--ab-ease);
}
.ab-marraine-link a:hover{color:var(--ab-gold-deep);border-bottom-color:var(--ab-gold-deep)}
.ab-marraine-link a:hover svg{transform:translateX(3px)}
.ab-marraine-link a:focus-visible{outline:2px solid var(--ab-gold-deep);outline-offset:3px}

/* Tablette et telephone : le portrait passe au-dessus du texte.

   Le format 4/5 est conserve, jamais un format paysage. La source est
   carree et le sommet de la chevelure se situe a 1,2 % de la hauteur
   (mesure sur les pixels) : tout cadre plus large que haut recadrerait
   par la hauteur et couperait le haut de la tete. A 4/5, `cover` ajuste
   sur la hauteur et ne mord que le fond sombre des cotes.

   La hauteur est donc bornee par la largeur du portrait, pas par un
   recadrage : c'est `max-width` qui empeche la section de s'etirer. */
@media(max-width:860px){
  .ab-marraine-grid{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .ab-marraine-media{max-width:19rem}
  .ab-marraine-sub{margin-bottom:1.1rem}
  .ab-marraine-body p{margin-bottom:.85rem}
  /* Sur tactile, le lien seul mesurait 32 px de haut. Le trait de
     soulignement reste cale sur le texte : c'est la zone cliquable qui
     s'etend, pas la decoration. */
  .ab-marraine-link a{min-height:44px;align-items:flex-end;padding-bottom:.7rem}
}
@media(max-width:480px){
  .ab-marraine-media{max-width:15.5rem}
  .ab-marraine-body p{font-size:.95rem}
}