/* =========================================================================
   MOSAÏCA — FICHE DE FORMATION
   Préfixe : .fc-   ·   Système partagé par toutes les fiches /formations/.

   Feuille commune au système de fiche Formation, chargée par chaque fiche
   (intelligence-culturelle, recrutement-international, leadership-inclusif,
   kpi-diversite, diagnostic-integrametre, cles-succes-travailleurs-
   internationaux, adn-culturel). Les règles de base (héros, navigation,
   objectifs/programme, formats, approche, planifier, fiche imprimable)
   sont strictement communes : ne jamais les dupliquer par fiche. Seul
   l'élément signature (section 3, ancienne section « dimensions ») varie
   dans sa forme d'une fiche à l'autre — voir les variantes .fc-mosaic
   (quatre tesselles autour d'un noyau) et .fc-stages (rangée d'étapes)
   plus bas : choisir celle qui correspond honnêtement au modèle réel de
   la formation plutôt que d'en forcer une par défaut.

   PRINCIPES
   · Le bleu Mosaïca porte la page. L'or est un accent, jamais un aplat.
   · Hauteur donnée par le contenu. Aucun min-height d'écran, aucun vide.
   · Toute information reste lisible : pas de gris pâle décoratif.
   · Une seule intention animée par section, courte et discrète.
   ========================================================================= */

.fc{
  /* --- Identité Mosaïca --- */
  --navy:#0E4D6C;
  --navy-deep:#08293C;
  --navy-ink:#061F33;
  --navy-tile:#0B2C42;
  --gold:#C9A45C;
  --gold-deep:#A9803F;
  /* Or assombri pour les petits textes sur fond clair : 5,2:1 sur blanc. */
  --gold-text:#8A6626;
  /* Or éclairci pour les petits textes sur le bleu moyen : 5,6:1. */
  --gold-soft:#E3C489;

  /* --- Encres : toutes vérifiées ≥ 4,5:1 sur blanc --- */
  --ink:#0A1C28;
  --ink-soft:#3B5766;   /* 7,7:1 */
  --ink-mute:#4A6475;   /* 6,2:1 */
  --on-dark:#C8D8E1;    /* 11,9:1 sur navy-ink */
  --on-dark-soft:#9FB9C8;

  --paper:#FFFFFF;
  --paper-alt:#F2F5F8;
  --rule:rgba(10,28,40,.18);
  --rule-soft:rgba(10,28,40,.10);
  --rule-dark:rgba(255,255,255,.16);

  --gut:clamp(20px,3.4vw,56px);
  --maxw:1240px;
  /* Distance du bord de la colonne au bord de l'écran : sert au débord
     éditorial de la photographie du héros. */
  --bleed:max(var(--gut),(100vw - var(--maxw)) / 2);

  --subnav-h:50px;
  --shell:calc(var(--nav-h,68px) + var(--subnav-h));

  --sec:clamp(48px,6.4vh,84px);
  --sec-tight:clamp(40px,5vh,62px);

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

  background:var(--paper);
  color:var(--ink);
  overflow-x:clip;
  font-family:'Space Grotesk',Arial,sans-serif;
}

.fc-wrap{width:min(var(--maxw),100% - var(--gut)*2);margin-inline:auto}
.fc ::selection{background:var(--gold);color:#08293C}

.fc-sec{position:relative;padding-block:var(--sec);scroll-margin-top:var(--shell)}
.fc-sec--tight{padding-block:var(--sec-tight)}
.fc-sec--alt{background:var(--paper-alt)}
.fc-sec--ink{background:var(--navy-ink);color:var(--on-dark)}

/* ---------- Titraille ---------------------------------------------------- */

.fc-head{margin-bottom:clamp(22px,2.6vw,34px);max-width:60ch}
.fc-head--mid{margin-inline:auto;text-align:center}
.fc-kicker{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-text);margin-bottom:.7rem;
}
.fc-sec--ink .fc-kicker{color:var(--gold)}
.fc h2{
  font-family:'Ibarra Real Nova',Georgia,serif;font-weight:600;
  font-size:clamp(1.6rem,2.7vw,2.4rem);line-height:1.14;letter-spacing:-.02em;
  margin:0;color:var(--ink);max-width:24ch;text-wrap:balance;
}
.fc-sec--ink h2{color:#fff}
.fc-head--mid h2{margin-inline:auto}
.fc-lead{font-size:1rem;line-height:1.6;color:var(--ink-soft);max-width:60ch;margin:.8rem 0 0}
.fc-sec--ink .fc-lead{color:var(--on-dark)}
.fc-head--mid .fc-lead{margin-inline:auto}

/* ---------- Boutons Mosaïca ---------------------------------------------
   Pas de capitales, pas de flèche systématique, pas d'arrondi SaaS.
   La signature : un liseré doré posé sous le bleu, qui s'épaissit au survol.
   ------------------------------------------------------------------------ */

.fc-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.78rem 1.35rem;border-radius:0;border:1px solid transparent;
  font-family:inherit;font-size:.93rem;font-weight:600;letter-spacing:.004em;
  line-height:1.2;text-decoration:none;cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),
             border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.fc-cta--solid{
  background:var(--navy);color:#fff;border-color:var(--navy);
  box-shadow:inset 0 -2px 0 var(--gold);
}
.fc-cta--solid:hover{background:var(--navy-deep);border-color:var(--navy-deep);box-shadow:inset 0 -4px 0 var(--gold)}
.fc-cta--line{background:transparent;color:var(--navy);border-color:var(--rule);box-shadow:inset 0 -2px 0 transparent}
.fc-cta--line:hover{border-color:var(--navy);background:rgba(14,77,108,.05);box-shadow:inset 0 -2px 0 var(--gold)}
/* Sur fond bleu : l'or devient la surface. */
.fc-cta--gold{background:var(--gold);color:#08293C;border-color:var(--gold);box-shadow:inset 0 -2px 0 rgba(8,41,60,.35)}
.fc-cta--gold:hover{background:#DCBB79;border-color:#DCBB79;box-shadow:inset 0 -4px 0 rgba(8,41,60,.35)}
.fc-cta:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.fc-sec--ink .fc-cta:focus-visible,.fc-plan-org .fc-cta:focus-visible{outline-color:var(--gold)}

/* Actions secondaires : discrètes, jamais une barre d'outils. */
.fc-mini{
  display:inline-flex;align-items:center;gap:.42rem;position:relative;
  background:none;border:0;padding:.4rem 0;cursor:pointer;font-family:inherit;
  font-size:.85rem;font-weight:600;color:var(--ink-soft);text-decoration:none;
  transition:color .2s;
}
.fc-mini svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fc-mini::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ease)}
.fc-mini:hover{color:var(--navy)}
.fc-mini:hover::after{transform:scaleX(1)}
.fc-mini:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* ---------- Révélation --------------------------------------------------- */

.fc-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.fc-reveal.is-in{opacity:1;transform:none}
.fc-reveal[data-d="1"]{transition-delay:.07s}
.fc-reveal[data-d="2"]{transition-delay:.14s}
.fc-reveal[data-d="3"]{transition-delay:.21s}

/* =========================================================================
   HÉROS — composition éditoriale : texte + photographie en débord
   ========================================================================= */

.fc-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#FFFFFF 0%,var(--paper-alt) 58%,#E8EEF3 100%);
  border-bottom:1px solid var(--rule-soft);
}
.fc-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(28px,3.6vw,60px);align-items:center;
}
/* Fiche sans photo dédiée réellement disponible (ex. diagnostic-integrametre) :
   la colonne de texte occupe toute la largeur plutôt que de laisser un vide
   ou d'emprunter la photo d'une autre formation. */
.fc-hero-grid--solo{grid-template-columns:1fr}
.fc-hero-grid--solo .fc-hero-text{max-width:46rem;margin-inline:auto}
.fc-hero-text{padding-block:clamp(34px,4.6vh,58px);min-width:0}

.fc-crumb{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  font-size:.74rem;letter-spacing:.05em;color:var(--ink-mute);margin-bottom:clamp(16px,2vw,24px);
}
.fc-crumb a{color:var(--ink-mute);text-decoration:none;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.fc-crumb a:hover{color:var(--navy);border-bottom-color:var(--gold)}
.fc-crumb i{font-style:normal;color:var(--rule)}
.fc-crumb [aria-current]{color:var(--ink-soft)}

.fc-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.71rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:clamp(14px,1.8vw,20px);
}
.fc-eyebrow::before{content:"";width:26px;height:2px;background:var(--gold)}

.fc-hero h1{
  font-family:'Ibarra Real Nova',Georgia,serif;font-weight:600;
  font-size:clamp(2.3rem,4.4vw,3.7rem);line-height:1.05;letter-spacing:-.018em;
  margin:0;color:var(--navy-ink);max-width:13ch;text-wrap:balance;
}
.fc-hero-sub{
  margin:clamp(14px,1.7vw,20px) 0 0;max-width:45ch;
  font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.5;color:var(--ink-soft);
}

/* Informations pratiques : un bloc de spécifications, lisible d'un coup. */
.fc-spec{
  margin:clamp(20px,2.4vw,28px) 0 0;padding:clamp(14px,1.6vw,18px) 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:grid;gap:.55rem;max-width:34rem;
}
.fc-spec > div{display:grid;grid-template-columns:7.2rem 1fr;gap:.7rem;align-items:baseline}
.fc-spec dt{
  margin:0;font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-text);
}
.fc-spec dd{margin:0;font-size:.94rem;font-weight:600;line-height:1.4;color:var(--ink)}
.fc-spec dd b{font-weight:600}
.fc-spec dd i{font-style:normal;color:var(--rule);padding:0 .3rem}

.fc-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(20px,2.3vw,26px) 0 0}
.fc-hero-mini{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.3rem;
  margin:clamp(14px,1.6vw,18px) 0 0;
}

/* Photographie : elle file jusqu'au bord droit de l'écran. */
.fc-hero-media{position:relative;align-self:stretch;min-height:clamp(280px,42vh,460px);margin-right:calc(var(--bleed) * -1)}
.fc-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* Liseré doré à la jonction + fondu vers le texte : la photo n'est pas collée. */
.fc-hero-media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(232,238,243,.92) 0%,rgba(232,238,243,0) 22%);
}
.fc-hero-media::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);z-index:2}

.fc-hero[data-motion="on"] .fc-anim{opacity:0;transform:translateY(11px)}
.fc-hero.is-lit .fc-anim{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--i,0) * 1ms);
}
.fc-hero[data-motion="on"] .fc-hero-media img{opacity:0;transform:scale(1.03)}
.fc-hero.is-lit .fc-hero-media img{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:.15s}

/* =========================================================================
   NAVIGATION DE FICHE — fine, jamais une seconde barre administrative
   ========================================================================= */

.fc-nav-wrap{
  position:sticky;top:var(--nav-h,68px);z-index:70;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule-soft);
}
.fc-nav{display:flex;gap:clamp(12px,1.9vw,28px);overflow-x:auto;scrollbar-width:none;height:var(--subnav-h);align-items:stretch}
.fc-nav::-webkit-scrollbar{display:none}
.fc-nav a{
  flex-shrink:0;position:relative;display:flex;align-items:center;
  font-size:.82rem;font-weight:600;color:var(--ink-mute);text-decoration:none;
  white-space:nowrap;transition:color .18s;
}
.fc-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.fc-nav a:hover{color:var(--ink)}
.fc-nav a.is-active{color:var(--navy)}
.fc-nav a.is-active::after{transform:scaleX(1)}
.fc-nav a:focus-visible{outline:2px solid var(--navy);outline-offset:-4px}

/* =========================================================================
   SITUATIONS — je vois / j'interprète / je questionne
   Quatre lignes éditoriales, pas quatre cartes identiques.
   ========================================================================= */

/* Le mécanisme est énoncé une fois, en tête de section. */
.fc-mech{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;margin-bottom:clamp(20px,2.4vw,28px)}
.fc-mech span{
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-mute);
}
.fc-mech span:last-child{color:var(--navy)}
.fc-mech em{font-style:normal;color:var(--gold-text);font-weight:700}

.fc-sits{border-top:1px solid var(--rule)}
.fc-sit{
  display:grid;grid-template-columns:2.4rem minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(14px,2vw,30px);align-items:baseline;
  padding:clamp(15px,1.9vw,22px) 0;border-bottom:1px solid var(--rule-soft);
  transition:background .22s var(--ease);
}
.fc-sit:hover{background:rgba(14,77,108,.035)}
.fc-sit-n{
  font-family:'Ibarra Real Nova',Georgia,serif;font-weight:600;font-size:1.05rem;
  color:var(--gold-text);line-height:1.2;
}
.fc-sit-fact{
  margin:0;font-family:'Ibarra Real Nova',Georgia,serif;font-weight:600;
  font-size:clamp(1.04rem,1.35vw,1.2rem);line-height:1.32;color:var(--ink);
}
.fc-sit-q{
  margin:0;position:relative;padding-left:clamp(12px,1.2vw,16px);
  border-left:2px solid var(--gold);
  font-size:.93rem;line-height:1.55;color:var(--ink-soft);
}
.fc-sit-close{
  margin:clamp(22px,2.5vw,30px) 0 0;padding-left:clamp(14px,1.5vw,20px);
  border-left:3px solid var(--navy);
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-size:clamp(1.1rem,1.6vw,1.34rem);line-height:1.32;color:var(--navy-ink);max-width:52ch;
}

/* =========================================================================
   OBJECTIFS & PROGRAMME — compact, numéroté, jamais cinq grosses cartes
   Deux zones complémentaires : ce que vous saurez faire, comment on y
   arrive. Même rythme visuel des deux côtés pour que l'œil les lise en
   parallèle plutôt que comme deux sections séparées.
   ========================================================================= */

.fc-obj-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,56px);align-items:start}
.fc-obj-intro{margin:0 0 1.1rem;font-family:'Ibarra Real Nova',Georgia,serif;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.34;color:var(--ink)}
.fc-obj-intro b{display:block;font-weight:600;color:var(--navy)}
.fc-obj{list-style:none;margin:0;padding:0;counter-reset:o;border-top:1px solid var(--rule)}
.fc-obj li{
  counter-increment:o;position:relative;
  padding:.72rem 0 .72rem 2.5rem;border-bottom:1px solid var(--rule-soft);
  font-size:.94rem;line-height:1.48;color:var(--ink-soft);
}
.fc-obj li::before{
  content:counter(o,decimal-leading-zero);position:absolute;left:0;top:.78rem;
  font-family:'Ibarra Real Nova',Georgia,serif;font-size:.88rem;font-weight:600;color:var(--gold-deep);
}

.fc-prog{padding-left:clamp(22px,2.6vw,32px);border-left:1px solid var(--rule)}
.fc-prog-list{list-style:none;margin:0;padding:0;counter-reset:p;border-top:1px solid var(--rule)}
.fc-prog-list li{
  counter-increment:p;position:relative;
  padding:.72rem 0 .72rem 2.5rem;border-bottom:1px solid var(--rule-soft);
  font-size:.94rem;line-height:1.48;color:var(--ink-soft);
}
.fc-prog-list li::before{
  content:counter(p);position:absolute;left:0;top:.78rem;
  font-family:'Ibarra Real Nova',Georgia,serif;font-size:.88rem;font-weight:600;color:var(--gold-deep);
}
.fc-prog-list li strong{display:block;font-weight:600;color:var(--navy);margin-bottom:.1rem}

/* =========================================================================
   LES 4 DIMENSIONS — la mosaïque signature
   Un noyau au centre, quatre tesselles articulées autour. Tout le texte est
   lisible sans interaction ; le survol ne fait qu'accentuer.
   ========================================================================= */

.fc-mosaic{
  display:grid;grid-template-columns:1fr .74fr 1fr;gap:1px;
  background:rgba(201,164,92,.30);border:1px solid rgba(201,164,92,.30);
}
.fc-core{
  grid-column:2;grid-row:1 / span 2;background:var(--navy);
  display:grid;align-content:center;justify-items:center;text-align:center;
  padding:clamp(20px,2.2vw,30px);gap:.5rem;
}
.fc-core-k{font-size:.63rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}
.fc-core-t{
  margin:0;font-family:'Ibarra Real Nova',Georgia,serif;font-weight:600;
  font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.15;color:#fff;letter-spacing:-.01em;
}
.fc-core-s{margin:0;font-size:.82rem;line-height:1.5;color:var(--on-dark)}
.fc-core-rule{width:34px;height:2px;background:var(--gold);margin:.15rem 0}

.fc-tes{
  background:var(--navy-tile);padding:clamp(18px,2vw,26px);
  display:grid;align-content:start;gap:.42rem;position:relative;
  transition:background .26s var(--ease);
}
.fc-tes[data-n="1"]{grid-column:1;grid-row:1}
.fc-tes[data-n="2"]{grid-column:3;grid-row:1}
.fc-tes[data-n="3"]{grid-column:1;grid-row:2}
.fc-tes[data-n="4"]{grid-column:3;grid-row:2}
.fc-tes::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.fc-tes:hover{background:#0F3852}
.fc-tes:hover::before{transform:scaleX(1)}
.fc-tes-n{
  font-family:'Ibarra Real Nova',Georgia,serif;font-weight:600;font-size:1.32rem;
  line-height:1;color:var(--gold);
}
.fc-tes-name{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft)}
.fc-tes:hover .fc-tes-name{color:var(--gold)}
.fc-tes-claim{
  margin:.1rem 0 0;font-family:'Ibarra Real Nova',Georgia,serif;
  font-size:clamp(1rem,1.28vw,1.14rem);line-height:1.26;color:#fff;
}
.fc-tes-desc{margin:.15rem 0 0;font-size:.855rem;line-height:1.55;color:var(--on-dark)}

/* =========================================================================
   VARIANTE SIGNATURE — .fc-stages
   Pour les formations dont le modèle réel est un enchaînement d'étapes
   (un processus) plutôt que des dimensions parallèles autour d'un noyau.
   Même grammaire visuelle que .fc-mosaic/.fc-tes (tuiles navy, liseré doré
   qui s'acquiert au survol) mais en rangée simple, sans grille figée à
   quatre cases : le nombre de tuiles suit le contenu réel de la formation.
   ========================================================================= */

.fc-stages{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.fc-stage{
  background:var(--navy-tile);padding:clamp(18px,2vw,26px);
  display:grid;align-content:start;gap:.42rem;position:relative;
  /* Liseré porté par la tuile elle-même (pas par le conteneur) : quand le
     nombre de tuiles ne remplit pas exactement la dernière rangée, les
     cellules vides du grid restent transparentes plutôt que de peindre un
     bloc de couleur orphelin sur le fond encre. */
  outline:1px solid rgba(201,164,92,.30);outline-offset:-1px;
  transition:background .26s var(--ease);
}
.fc-stage::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.fc-stage:hover{background:#0F3852}
.fc-stage:hover::before{transform:scaleX(1)}
.fc-stage-n{
  font-family:'Ibarra Real Nova',Georgia,serif;font-weight:600;font-size:1.32rem;
  line-height:1;color:var(--gold);
}
.fc-stage-name{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft)}
.fc-stage:hover .fc-stage-name{color:var(--gold)}
.fc-stage-claim{
  margin:.1rem 0 0;font-family:'Ibarra Real Nova',Georgia,serif;
  font-size:clamp(1rem,1.28vw,1.14rem);line-height:1.26;color:#fff;
}
.fc-stage-desc{margin:.15rem 0 0;font-size:.855rem;line-height:1.55;color:var(--on-dark)}

@media(max-width:1080px){
  .fc-stages{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .fc-stages{grid-template-columns:1fr}
  .fc-stage::before{transform:scaleX(1)}
}

/* L'autoévaluation est un avantage de la formation, pas une note de bas de page. */
.fc-selfcheck{
  margin-top:clamp(16px,1.8vw,22px);
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem clamp(14px,1.6vw,20px);
  padding:clamp(14px,1.5vw,18px) clamp(16px,1.8vw,22px);
  background:rgba(201,164,92,.12);border-left:3px solid var(--gold);
}
.fc-selfcheck b{
  flex:none;font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);
}
.fc-selfcheck p{margin:0;font-size:.92rem;line-height:1.5;color:#fff;max-width:70ch}
.fc-src{margin:clamp(12px,1.4vw,16px) 0 0;font-size:.76rem;line-height:1.5;color:var(--on-dark-soft)}
.fc-src cite{font-style:italic}

/* =========================================================================
   FORMATS — trois degrés d'approfondissement
   La barre de tête se remplit d'une colonne à l'autre : la progression se voit.
   ========================================================================= */

.fc-fmts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft)}
.fc-fmt{background:var(--paper);padding:clamp(20px,2.2vw,28px);display:grid;align-content:start;gap:.5rem;position:relative}
.fc-sec--alt .fc-fmt{background:#fff}
/* Jauge de profondeur : piste + remplissage bleu croissant. */
.fc-fmt-gauge{height:4px;background:rgba(10,28,40,.10);position:relative;margin-bottom:.55rem}
.fc-fmt-gauge span{position:absolute;left:0;top:0;bottom:0;background:var(--navy);transition:width .5s var(--ease)}
.fc-fmt[data-step="1"] .fc-fmt-gauge span{width:33.33%}
.fc-fmt[data-step="2"] .fc-fmt-gauge span{width:66.66%}
.fc-fmt[data-step="3"] .fc-fmt-gauge span{width:100%}
.fc-fmt-top{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.fc-fmt-h{font-family:'Ibarra Real Nova',Georgia,serif;font-weight:600;font-size:clamp(1.75rem,2.3vw,2.2rem);line-height:1;letter-spacing:-.02em;color:var(--navy)}
.fc-fmt-verb{font-size:.67rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
.fc-fmt-desc{margin:.1rem 0 0;font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.fc-fmt-list{margin:.35rem 0 0;padding:0;list-style:none;display:grid;gap:.3rem}
.fc-fmt-list li{position:relative;padding-left:.95rem;font-size:.845rem;line-height:1.45;color:var(--ink-soft)}
.fc-fmt-list li::before{content:"";position:absolute;left:0;top:.62rem;width:5px;height:1px;background:var(--gold-deep)}
.fc-fmt-for{
  margin:.5rem 0 0;padding-top:.6rem;border-top:1px solid var(--rule-soft);
  font-size:.83rem;line-height:1.45;color:var(--ink-mute);
}
.fc-fmt-for b{color:var(--navy);font-weight:600}

.fc-progress{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.4rem .8rem;
  margin-top:clamp(16px,1.8vw,22px);
}
.fc-progress span{font-family:'Ibarra Real Nova',Georgia,serif;font-size:clamp(.98rem,1.2vw,1.1rem);color:var(--navy-ink)}
.fc-progress i{font-style:normal;color:var(--gold-text);font-weight:700}

/* =========================================================================
   APPROCHE — cinq gestes reliés
   ========================================================================= */

.fc-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.3vw,18px)}
.fc-path li{position:relative;padding-top:1.75rem}
/* La ligne qui relie les cinq gestes. */
.fc-path li::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--rule)}
.fc-path li:first-child::before{left:0}
.fc-path li:last-child::before{right:calc(100% - 13px)}
.fc-path li::after{
  content:"";position:absolute;left:0;top:2px;width:9px;height:9px;
  background:var(--paper-alt);border:2px solid var(--navy);border-radius:50%;
}
.fc-path li[data-last]::after{background:var(--navy)}
.fc-path b{
  display:block;font-family:'Ibarra Real Nova',Georgia,serif;font-weight:600;
  font-size:clamp(1rem,1.22vw,1.12rem);color:var(--navy-ink);margin-bottom:.25rem;
}
.fc-path p{margin:0;font-size:.85rem;line-height:1.45;color:var(--ink-soft)}

.fc-tools{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:clamp(20px,2.3vw,28px) 0 0;padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--rule);
}
.fc-tools span{
  font-size:.82rem;font-weight:600;color:var(--ink-soft);
  padding:.36rem .7rem;border:1px solid var(--rule);background:#fff;
}
.fc-tools span:first-child{border-color:var(--gold);color:var(--navy)}
.fc-adapt{margin:clamp(14px,1.6vw,18px) 0 0;font-size:.95rem;line-height:1.55;color:var(--ink-soft);max-width:64ch}

/* =========================================================================
   PLANIFIER — deux blocs : l'organisation, puis la programmation publique
   ========================================================================= */

.fc-plan{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,24px);align-items:stretch}

.fc-plan-org{
  background:var(--navy-ink);color:var(--on-dark);
  padding:clamp(24px,2.6vw,34px);display:grid;align-content:start;gap:.6rem;
  border-top:3px solid var(--gold);
}
.fc-plan-org h3{margin:0;font-family:'Ibarra Real Nova',Georgia,serif;font-weight:600;font-size:clamp(1.24rem,1.7vw,1.5rem);line-height:1.2;color:#fff}
.fc-plan-k{font-size:.65rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.fc-plan-org p{margin:0;font-size:.93rem;line-height:1.55;color:var(--on-dark);max-width:40ch}
.fc-plan-spec{margin:.4rem 0 .2rem;display:grid;gap:.4rem}
.fc-plan-spec > div{display:grid;grid-template-columns:6.4rem 1fr;gap:.6rem;align-items:baseline}
.fc-plan-spec dt{margin:0;font-size:.63rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-soft)}
.fc-plan-spec dd{margin:0;font-size:.9rem;font-weight:600;color:#fff}
.fc-plan-org .fc-cta{margin-top:.5rem;justify-self:start}

.fc-plan-pub{
  background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--navy);
  padding:clamp(24px,2.6vw,34px);display:grid;align-content:start;gap:.55rem;
}
.fc-sec--alt .fc-plan-pub{background:#fff}
.fc-plan-pub h3{margin:0;font-family:'Ibarra Real Nova',Georgia,serif;font-weight:600;font-size:clamp(1.24rem,1.7vw,1.5rem);line-height:1.2;color:var(--ink)}
.fc-plan-pub .fc-plan-k{color:var(--gold-text)}
.fc-date{
  margin:.1rem 0 0;font-family:'Ibarra Real Nova',Georgia,serif;font-weight:600;
  font-size:clamp(1.5rem,2.1vw,1.9rem);line-height:1.1;color:var(--navy);letter-spacing:-.015em;
}
.fc-plan-pub .fc-note{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-soft);max-width:42ch}
/* Grille de programmation : prête à recevoir une vraie session. */
.fc-sched{margin:.45rem 0 .2rem;border-top:1px solid var(--rule-soft)}
.fc-sched > div{display:grid;grid-template-columns:6.4rem 1fr;gap:.6rem;align-items:baseline;padding:.42rem 0;border-bottom:1px solid var(--rule-soft)}
.fc-sched dt{margin:0;font-size:.63rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute)}
.fc-sched dd{margin:0;font-size:.89rem;font-weight:600;color:var(--ink-soft)}
/* Ligne Tarif : le montant porte l'accent, « par participant » reste secondaire. */
.fc-sched .fc-prix-montant{color:var(--gold-text);font-weight:600}
.fc-sched .fc-prix-unite{color:var(--ink-mute);font-weight:500;font-size:.85em}
.fc-plan-pub .fc-cta{margin-top:.5rem;justify-self:start}

.fc-plan-tail{margin:clamp(18px,2vw,24px) 0 0;font-size:.96rem;line-height:1.55;color:var(--ink-soft)}
.fc-plan-tail a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold)}
.fc-plan-tail a:hover{color:var(--gold-text)}

.fc-more{
  margin-top:clamp(20px,2.3vw,28px);padding-top:clamp(14px,1.6vw,18px);border-top:1px solid var(--rule-soft);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.3rem;
}
.fc-more b{font-size:.65rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.fc-more a{font-size:.88rem;font-weight:600;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:1px}
.fc-more a:hover{color:var(--gold-text)}

/* =========================================================================
   PARTAGE — repli quand l'API native n'est pas disponible
   ========================================================================= */

.fc-share{position:relative}
.fc-share-menu{
  position:absolute;left:0;top:calc(100% + 8px);z-index:90;min-width:230px;
  background:#fff;border:1px solid var(--rule);box-shadow:0 18px 44px rgba(6,31,51,.18);
  padding:5px;display:none;
}
.fc-share-menu.is-open{display:block}
.fc-share-menu button,.fc-share-menu a{
  display:flex;align-items:center;gap:.6rem;width:100%;
  background:none;border:0;padding:.62rem .7rem;cursor:pointer;
  font-family:inherit;font-size:.88rem;font-weight:600;color:var(--ink-soft);
  text-align:left;text-decoration:none;transition:background .16s,color .16s;
}
.fc-share-menu button:hover,.fc-share-menu a:hover{background:var(--paper-alt);color:var(--navy)}
.fc-share-menu button:focus-visible,.fc-share-menu a:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.fc-share-menu svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.fc-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:400;
  background:var(--navy-ink);color:#fff;padding:.7rem 1.15rem;
  font-size:.86rem;font-weight:600;box-shadow:0 14px 36px rgba(6,31,51,.3);
  border-bottom:2px solid var(--gold);
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.fc-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- Divers ------------------------------------------------------- */

.fc-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:.85rem 1.3rem;font-size:.85rem;font-weight:600;text-decoration:none}
.fc-skip:focus{left:1rem;top:calc(var(--nav-h,68px) + .6rem)}

/* La fiche imprimable n'existe qu'à l'impression. */
.fc-sheet{display:none}

/* =========================================================================
   PALIERS
   ========================================================================= */

@media(max-width:1080px){
  .fc{--subnav-h:46px}
  .fc-hero-grid{grid-template-columns:1fr;gap:0}
  .fc-hero-text{padding-block:clamp(28px,4vh,44px) clamp(20px,2.6vh,28px)}
  /* La photo passe sous les actions : le CTA reste immédiatement visible. */
  .fc-hero-media{order:2;margin-right:calc(var(--gut) * -1);margin-left:calc(var(--gut) * -1);min-height:clamp(220px,32vh,300px)}
  .fc-hero-media::before{background:linear-gradient(180deg,rgba(232,238,243,.85) 0%,rgba(232,238,243,0) 26%)}
  .fc-hero-media::after{left:0;right:0;top:0;bottom:auto;width:auto;height:2px}

  .fc-obj-grid{grid-template-columns:1fr;gap:clamp(16px,2.4vw,22px)}
  .fc-prog{padding-left:0;border-left:0;padding-top:clamp(16px,2.4vw,22px);border-top:1px solid var(--rule)}
  .fc-mosaic{grid-template-columns:1fr 1fr}
  .fc-core{grid-column:1 / -1;grid-row:1}
  .fc-tes[data-n="1"]{grid-column:1;grid-row:2}
  .fc-tes[data-n="2"]{grid-column:2;grid-row:2}
  .fc-tes[data-n="3"]{grid-column:1;grid-row:3}
  .fc-tes[data-n="4"]{grid-column:2;grid-row:3}
  .fc-path{grid-template-columns:repeat(3,1fr);row-gap:clamp(16px,2.2vw,22px)}
  .fc-path li::before{display:none}
}

@media(max-width:760px){
  .fc-sec{padding-block:clamp(40px,7vh,56px)}
  .fc-sec--tight{padding-block:clamp(34px,5.5vh,46px)}

  .fc-spec > div{grid-template-columns:6.2rem 1fr}
  .fc-hero-actions .fc-cta{flex:1 1 100%;justify-content:center}

  .fc-sit{grid-template-columns:1.9rem minmax(0,1fr);row-gap:.5rem}
  .fc-sit-q{grid-column:2}

  .fc-mosaic{grid-template-columns:1fr}
  .fc-core{grid-column:1;grid-row:1}
  .fc-tes[data-n="1"]{grid-column:1;grid-row:2}
  .fc-tes[data-n="2"]{grid-column:1;grid-row:3}
  .fc-tes[data-n="3"]{grid-column:1;grid-row:4}
  .fc-tes[data-n="4"]{grid-column:1;grid-row:5}
  /* Sur téléphone, l'accent doré est acquis : il ne dépend pas du survol. */
  .fc-tes::before{transform:scaleX(1)}

  .fc-fmts{grid-template-columns:1fr}
  .fc-path{grid-template-columns:1fr;gap:0}
  .fc-path li{padding:.7rem 0 .7rem 1.4rem;border-bottom:1px solid var(--rule-soft)}
  .fc-path li::after{top:1.05rem}
  .fc-path li::before{display:none}

  .fc-plan{grid-template-columns:1fr}
  .fc-share-menu{left:auto;right:0}
}

/* -------------------------------------------------------------------------
   Plancher de lisibilité (responsive.css §6) : sous 1080 px, aucun libellé
   en capitales espacées ne descend sous 12,8 px.
   ------------------------------------------------------------------------- */
@media(max-width:1080px){
  .fc .fc-kicker,.fc .fc-eyebrow,.fc .fc-spec dt,.fc .fc-mech span,
  .fc .fc-core-k,.fc .fc-tes-name,.fc .fc-selfcheck b,.fc .fc-fmt-verb,
  .fc .fc-plan-k,.fc .fc-plan-spec dt,.fc .fc-sched dt,.fc .fc-more b,
  .fc .fc-crumb,.fc .fc-src{
    font-size:var(--text-label,.8rem);
  }
}

/* =========================================================================
   MOUVEMENT RÉDUIT
   ========================================================================= */

@media(prefers-reduced-motion:reduce){
  .fc *,.fc *::before,.fc *::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .fc-reveal{opacity:1;transform:none}
  .fc-hero[data-motion="on"] .fc-anim{opacity:1;transform:none}
  .fc-hero[data-motion="on"] .fc-hero-media img{opacity:1;transform:none}
}

/* =========================================================================
   FICHE IMPRIMABLE — une seule page, A4 ou Lettre
   Tout le site disparaît ; seule la fiche est imprimée.
   ========================================================================= */

@page{size:A4 portrait;margin:11mm}

@media print{
  html,body{background:#fff !important;padding:0 !important;margin:0 !important}
  body > *{display:none !important}
  body > .fc-sheet{display:block !important}

  /* Échelle calibrée pour remplir une page sans jamais la dépasser :
     la fiche mesure ~230 mm de haut, sous les 257 mm utiles du format
     Lettre comme des 275 mm de l'A4. */
  .fc-sheet{
    font-family:'Space Grotesk',Arial,sans-serif;color:#111;
    font-size:10pt;line-height:1.34;
  }
  .fc-sheet h1,.fc-sheet h2,.fc-sheet h3{margin:0}

  .fc-sheet-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10mm;border-bottom:1.6pt solid #0E4D6C;padding-bottom:4mm}
  .fc-sheet-brand{display:flex;align-items:center;gap:3.4mm}
  .fc-sheet-brand img{width:15mm;height:auto}
  .fc-sheet-brand b{font-family:'Ibarra Real Nova',Georgia,serif;font-size:13.5pt;font-weight:600;color:#0E4D6C;letter-spacing:-.01em}
  .fc-sheet-brand span{display:block;font-size:7.6pt;letter-spacing:.14em;text-transform:uppercase;color:#555;font-weight:600;margin-top:.8mm}
  .fc-sheet-tag{font-size:7.6pt;letter-spacing:.15em;text-transform:uppercase;color:#8A6626;font-weight:700;text-align:right}

  .fc-sheet-title{margin-top:5mm}
  /* Un seul <h1> existe dans le document (le titre du Hero) ; cet élément
     reprend son apparence via une classe, jamais un second <h1>. */
  .fc-sheet-h1{margin:0;font-family:'Ibarra Real Nova',Georgia,serif;font-size:23pt;font-weight:600;line-height:1.05;color:#061F33;letter-spacing:-.015em}
  .fc-sheet-sub{margin:2mm 0 0;font-size:10.5pt;line-height:1.36;color:#333;max-width:150mm}

  .fc-sheet-spec{display:flex;flex-wrap:wrap;gap:1.4mm 7mm;margin-top:4mm;padding:2.6mm 0;border-top:.5pt solid #999;border-bottom:.5pt solid #999}
  .fc-sheet-spec div{font-size:9.4pt}
  .fc-sheet-spec dt{display:inline;font-size:7.4pt;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8A6626;margin-right:1.8mm}
  .fc-sheet-spec dd{display:inline;margin:0;font-weight:600;color:#111}

  .fc-sheet-cols{display:grid;grid-template-columns:1fr 1fr;gap:5mm 9mm;margin-top:5mm}
  .fc-sheet-block{break-inside:avoid}
  .fc-sheet-block + .fc-sheet-block{margin-top:5mm}
  .fc-sheet-block h2{
    font-size:7.8pt;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#0E4D6C;
    padding-bottom:1.3mm;margin-bottom:2.2mm;border-bottom:.5pt solid #0E4D6C;
  }
  .fc-sheet ol,.fc-sheet ul{margin:0;padding:0;list-style:none}
  .fc-sheet-obj li{position:relative;padding:0 0 1.8mm 6.5mm;font-size:9.5pt;line-height:1.34}
  .fc-sheet-obj li b{position:absolute;left:0;top:0;font-weight:700;color:#8A6626}
  /* Programme : même grammaire visuelle que les objectifs — numéro en
     marge, titre bref, prolongement en une phrase. Scannable en secondes. */
  .fc-sheet-prog li{position:relative;padding:0 0 1.8mm 6.5mm;font-size:9.3pt;line-height:1.34;color:#333}
  .fc-sheet-prog li b{position:absolute;left:0;top:0;font-family:'Ibarra Real Nova',Georgia,serif;font-weight:700;color:#8A6626}
  .fc-sheet-prog li strong{font-weight:700;color:#0E4D6C}
  .fc-sheet-dim li{padding:0 0 2.1mm 0;font-size:9.4pt;line-height:1.32}
  .fc-sheet-dim b{display:block;font-size:7.4pt;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#0E4D6C;margin-bottom:.4mm}
  .fc-sheet-dim i{font-style:normal;color:#111;font-weight:600}
  .fc-sheet-dim span{color:#444}
  .fc-sheet-fmt li{display:grid;grid-template-columns:14mm 1fr;gap:2.4mm;padding:0 0 1.9mm 0;font-size:9.4pt;line-height:1.32}
  .fc-sheet-fmt b{font-family:'Ibarra Real Nova',Georgia,serif;font-size:12.5pt;font-weight:600;color:#0E4D6C;line-height:1}
  .fc-sheet-fmt i{font-style:normal;display:block;font-size:7.4pt;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#8A6626;margin-bottom:.4mm}
  .fc-sheet-fmt span{color:#333}
  .fc-sheet-flow{margin-top:1.4mm;font-size:9.4pt;color:#111;font-weight:600}
  .fc-sheet-flow i{font-style:normal;color:#8A6626}
  .fc-sheet-tools{margin-top:1.8mm;font-size:9.2pt;color:#333;line-height:1.38}
  .fc-sheet-next{border:.5pt solid #0E4D6C;border-left:2pt solid #0E4D6C;padding:2.8mm 3.6mm}
  .fc-sheet-next b{display:block;font-size:7.4pt;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8A6626}
  .fc-sheet-next strong{display:block;font-family:'Ibarra Real Nova',Georgia,serif;font-size:13.5pt;font-weight:600;color:#061F33;margin:.9mm 0}
  .fc-sheet-next span{font-size:9.2pt;color:#333;line-height:1.34}

  .fc-sheet-foot{
    margin-top:4.5mm;padding-top:2.6mm;border-top:1.6pt solid #0E4D6C;
    display:flex;justify-content:space-between;align-items:flex-end;gap:6mm;font-size:8.2pt;color:#333;
  }
  .fc-sheet-foot b{color:#0E4D6C}
  .fc-sheet-foot .fc-sheet-ver{font-size:7.4pt;color:#666;text-align:right;white-space:nowrap}
}
