/* Agence Switch · feuille de style du site · v14.0 (issue du prototype v13.22) */

/* =====================================================================
   1 · TOKENS : copie conforme de tokens.css v1.0
   Aucun token renommé, ajouté ou modifié. [DA] = fichier
   DA_Switch_et_Switch_School.docx. [HORS DA] = transposition print → web.
   ===================================================================== */
:root{
  /* la marque est claire par construction : on neutralise toute inversion
     automatique du thème de l'hôte, le fond reste --bg partout.          */
  color-scheme: light;

  /* ---------- ENCRE & NEUTRES ------------------------------------- */
  --ink:#2B2B2B;            /* [DA] corps de texte, encre principale     */
  --navy:#14385F;           /* [DA] titres majeurs, bouton primaire      */
  --label:#5B6770;          /* [DA] labels, kickers, sous-textes         */
  --muted:#8A939B;          /* [DA] gris repère, légendes                */
  --footer-ink:#3F4347;     /* [DA] texte de pied de page                */

  /* ---------- RAMPE BLEUE ----------------------------------------- */
  --blue-900:#14385F;       /* [DA] navy : départ de dégradé             */
  --blue-800:#1F4E79;       /* [DA] bleu section : filets, étiquettes    */
  --blue-700:#1F5FA8;       /* [DA] bleu bloc : sous-titres              */
  --blue-600:#2E74B5;       /* [DA] bleu clair : PLAFOND DE CLARTÉ texte */
  --blue-100:#DFE9F4;       /* [DA] fond de tuile d'icône, survol        */
  --blue-soft:#A9C6E6;      /* [HORS DA] décor UNIQUEMENT, jamais texte  */

  /* ---------- AMBRE : accent de marque ---------------------------- */
  --amber:#E8A33D;          /* [DA] barre de titre, point d'étiquette,
                                    anneau de focus                      */
  --amber-wash:#FBF0DA;     /* [DA] surlignage d'un mot clé              */
  --amber-ink:#8A5A12;      /* [DA] texte sur fond ambre pâle            */

  /* ---------- SURFACES -------------------------------------------- */
  --bg:#F6F8FA;             /* [DA] fond de page                         */
  --bg-tint:#EEF2F6;        /* [DA] section alternée                     */
  --surface:#FFFFFF;
  --surface-dark:#14385F;   /* [DA] intérieur de mockup UNIQUEMENT       */

  /* ---------- FILETS ---------------------------------------------- */
  --hairline:#E2E7EC;
  --hairline-strong:#D4DAE0;
  --rule:2px solid var(--blue-800);

  /* ---------- ÉTATS SÉMANTIQUES ----------------------------------- */
  --alert:#A5342A;  --alert-bg:#FDF5F4;
  --ok:#146B3F;     --ok-bg:#F4FAF6;
  --watch:#8A5A12;  --watch-bg:#FFFAF0;

  /* ---------- RAYONS ---------- [HORS DA] ------------------------- */
  --r-pill:999px; --r-lg:16px; --r-md:10px; --r-sm:6px; --r-none:0;

  /* ---------- OMBRES ---------- [HORS DA] teintées navy ----------- */
  --sh-pill:0 1px 3px rgba(20,56,95,.06), 0 12px 28px rgba(20,56,95,.08);
  --sh-btn:0 2px 4px rgba(20,56,95,.18), 0 10px 22px rgba(20,56,95,.22);
  --sh-card:0 6px 20px rgba(20,56,95,.07);
  --sh-float:0 18px 46px rgba(20,56,95,.13);

  /* ---------- ESPACEMENT ------------------------------------------ */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-6:1.5rem; --s-8:2rem;   --s-12:3rem;  --s-16:4rem; --s-24:6rem;

  /* ---------- TYPOGRAPHIE : UNE SEULE FAMILLE --------------------- */
  --font-ui:"Liberation Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display:var(--font-ui);

  /* ---------- GRILLE ---------------------------------------------- */
  --container:1200px;
  --gutter:clamp(1.25rem, 4vw, 2.5rem);
  --section-y:clamp(4.5rem, 9vw, 9rem);

  /* ---------- MOUVEMENT ------------------------------------------- */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:560ms;
}

/* =====================================================================
   2 · ÉCHELLE TYPOGRAPHIQUE : copie conforme de tokens.css
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{background:var(--bg);}
body{background:var(--bg); color:var(--ink);
  font:400 clamp(1rem,1.1vw,1.125rem)/1.65 var(--font-ui);
  margin:0; -webkit-font-smoothing:antialiased;}

/* Une grotesque a besoin d'un crénage négatif franc en grand corps. */
h1{margin:0; color:var(--navy);
   font:700 clamp(2.375rem,5.4vw,4.25rem)/1.08 var(--font-display);
   letter-spacing:-.032em; text-wrap:balance;}
h2{margin:0; color:var(--navy);
   font:700 clamp(1.75rem,3.6vw,2.75rem)/1.12 var(--font-display);
   letter-spacing:-.026em; text-wrap:balance;}
h3{margin:0; color:var(--blue-700);
   font:700 clamp(1.125rem,1.7vw,1.375rem)/1.3 var(--font-display);
   letter-spacing:-.012em;}

/* L'italique est proscrite : l'oblique mécanique des grotesques
   Helvetica n'est pas une italique dessinée.                          */
em,i{font-style:normal; font-weight:700;}

p{margin:0; color:var(--ink); max-width:62ch;}
.lede{font-size:clamp(1.0625rem,1.25vw,1.1875rem); line-height:1.6; color:var(--label);}
.small{font-size:.9375rem; line-height:1.55; color:var(--muted);}
.centered-note{
  width:100%; max-width:52rem; margin-left:auto; margin-right:auto; text-align:center;
}
ul,ol{margin:0; padding:0;}

/* Dégradé du titre : SEUL emploi du dégradé sur du texte, et seul
   dégradé autorisé par écran. Il porte à lui seul la distinction entre
   la ligne 1 et la ligne 2, puisqu'il n'y a plus d'italique.           */
.grad{
  background:linear-gradient(100deg,
    var(--blue-800) 0%, var(--blue-600) 46%, var(--blue-700) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.08em;}
@supports not (background-clip:text){ .grad{color:var(--blue-800);} }

/* Surlignage ambre d'un mot clé : un seul par page. */
.mark{background:linear-gradient(transparent 62%, var(--amber-wash) 62%);}

/* =====================================================================
   3 · NAVIGATION FLOTTANTE : composants.html §1
   ===================================================================== */
.nav{position:fixed; top:1rem; left:50%; transform:translateX(-50%); z-index:50;
  width:min(var(--container), calc(100% - 2*var(--gutter)));
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem .5rem .5rem 1.25rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.88); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--sh-pill);
  transition:box-shadow var(--dur) var(--ease);}
.nav.is-scrolled{box-shadow:var(--sh-float);}
.nav__links{display:flex; gap:var(--s-6); list-style:none; margin:0; padding:0;}
.nav a{font:500 .9375rem/1 var(--font-ui); color:var(--ink); text-decoration:none;}
.nav a:hover{color:var(--blue-800);}
.nav a[aria-current="page"]{color:var(--blue-800); font-weight:700;}
/* spécificité : .nav a écrasait .btn--primary, le libellé sortait en
   encre grise sur navy. Ne pas retirer.                              */
.nav a.btn--primary{color:#fff;}
.logo{display:flex; align-items:center; gap:.625rem;
  font:700 1.0625rem/1 var(--font-ui); color:var(--navy); text-decoration:none;}
.logo__tile{width:30px; height:30px; border-radius:var(--r-sm); flex:0 0 auto;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(145deg, var(--blue-700) 0%, var(--navy) 100%);
  box-shadow:0 3px 8px rgba(20,56,95,.30);}

/* Bouton hamburger : [HORS DA] mécanique de navigation mobile.
   Sous 1080 px les liens passent dans un panneau ; sous 640 px le CTA
   quitte la pilule, il n'y tient pas et celui du hero est juste dessous. */
.burger{display:none; width:42px; height:42px; border:0; border-radius:var(--r-pill);
  background:var(--surface); box-shadow:var(--sh-pill); color:var(--navy);
  cursor:pointer; place-items:center;}
@media(max-width:1080px){
  .nav__links{position:absolute; top:calc(100% + .625rem); left:0; right:0;
    flex-direction:column; gap:0; padding:.5rem; border-radius:var(--r-lg);
    background:var(--surface); box-shadow:var(--sh-float); display:none;}
  .nav__links.is-open{display:flex;}
  .nav__links a{display:block; padding:.875rem 1rem; font-size:1rem;}
  .burger{display:grid;}
}
@media(max-width:640px){ .nav .btn--primary{display:none;} }

/* =====================================================================
   4 · BOUTONS : composants.html §2
   ===================================================================== */
.btn{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font:500 .9375rem/1.25 var(--font-ui); padding:.875rem 1.375rem;
  border:0; border-radius:var(--r-pill); cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background .35s var(--ease);}
.btn--primary{background:var(--navy); color:#fff; box-shadow:var(--sh-btn);}
.btn--primary:hover{background:var(--blue-800); transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(20,56,95,.20), 0 16px 32px rgba(20,56,95,.26);}
.btn--ghost{background:var(--surface); color:var(--navy); box-shadow:var(--sh-pill);}
.btn--ghost:hover{transform:translateY(-2px); box-shadow:var(--sh-float);}
.btn:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}
.btn svg{flex:0 0 auto; transition:transform .35s var(--ease);}
.btn--primary:hover svg{transform:translate(2px,-2px);}
.btn--ghost:hover svg{transform:translate(2px,-2px);}
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--amber); outline-offset:3px; border-radius:var(--r-sm);}

/* =====================================================================
   5 · PILULE D'ÉTIQUETTE : composants.html §3
   SEUL emploi des capitales du système, avec les en-têtes de tableau.
   ===================================================================== */
.eyebrow{display:inline-flex; align-items:center; gap:0;
  padding:.4375rem .875rem; border-radius:var(--r-pill);
  background:var(--surface); box-shadow:var(--sh-pill);
  font:700 .6875rem/1 var(--font-ui); letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue-800);}
/* v9.1 · Le point ambre de l'étiquette est retiré sur demande.
   La pilule conserve sa forme, son ombre et son lettrage : elle reste
   identifiable sans marqueur coloré. */

/* =====================================================================
   6 · BLOC DE TITRE À BARRE AMBRE : composants.html §4
   Marqueur d'identité n°1. Une seule occurrence par page.
   ===================================================================== */
/* v9.1 · La barre ambre verticale est retirée sur demande. Le retrait du
   filet supprime aussi le retrait d'alignement : le titre revient au bord
   du conteneur, comme le reste du contenu. */
.titleblock{padding-left:0;}
.titleblock .eyebrow{margin-bottom:var(--s-6);}
.titleblock h1{margin-bottom:var(--s-6);}
.titleblock .lede{max-width:44rem;}
@media(max-width:640px){ .titleblock{padding-left:0;} }

/* =====================================================================
   7 · MISE EN PAGE : composants.html §5
   Le halo radial du hero est RETIRÉ : la loi 8 n'autorise qu'un seul
   dégradé par écran, et ce dégradé est celui de la ligne 2 du titre,
   imposé par la loi 2. Le hero respire par le vide, pas par l'effet.
   ===================================================================== */
.wrap{width:min(var(--container), calc(100% - 2*var(--gutter))); margin-inline:auto;}
section{padding-block:var(--section-y);}
.hero{padding:calc(var(--section-y) + 3.5rem) 0 var(--section-y);}
.hero__actions{display:flex; gap:var(--s-3); flex-wrap:wrap; margin-top:var(--s-8);}
.tinted{background:var(--bg-tint);}

/* Section fendue : [HORS DA : À VALIDER] proportion 45/55 issue du brief.
   Le visuel occupe la colonne large sur les compositions inversées.     */
.split{display:grid; grid-template-columns:minmax(0,45fr) minmax(0,55fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;}
.split--wide{grid-template-columns:minmax(0,55fr) minmax(0,45fr);}
@media(max-width:900px){ .split,.split--wide{grid-template-columns:1fr;} }

/* =====================================================================
   8 · TITRE DE SECTION FILETÉ : composants.html §6, DA §4.5
   Traitement PAR DÉFAUT des sections de contenu. Il porte une part de la
   signature depuis que l'italique a disparu. Exceptions : le H1 du hero
   et le H2 du CTA final, qui restent nus.
   ===================================================================== */
/* v12.3 · Disposition en bloc et non flexible : le fragment en dégradé suit
   le texte au fil de la ligne au lieu d'être posé à côté comme un second
   élément. La numérotation .num qui justifiait le flex n'est plus employée
   dans aucun titre. */
.h2--ruled{padding-bottom:.5rem; border-bottom:var(--rule); display:block;}
.h2--ruled .num{color:var(--blue-600);}
.sechead{margin-bottom:var(--s-12);}
.sechead .eyebrow{margin-bottom:var(--s-6);}
.sechead .lede{margin-top:var(--s-6);}

/* =====================================================================
   9 · LISTE NUMÉROTÉE ÉDITORIALE : composants.html §7
   À n'employer QUE si le contenu est réellement une séquence.
   ===================================================================== */
.rows{margin-top:var(--s-12); list-style:none;}
.row{display:grid; grid-template-columns:4.5rem 1fr; gap:var(--s-6);
  padding:var(--s-8) 0; border-top:1px solid var(--hairline);}
.row__n{font:700 2.75rem/1 var(--font-display); color:var(--blue-600);
  letter-spacing:-.03em;}
.row p{margin-top:var(--s-3); color:var(--label);}
.row__link{display:inline-flex; align-items:center; gap:.375rem; margin-top:var(--s-4);
  font:700 .9375rem/1 var(--font-ui); color:var(--blue-800); text-decoration:none;}
.row__link:hover{color:var(--navy);}
.row__link svg{transition:transform .35s var(--ease);}
.row__link:hover svg{transform:translate(2px,-2px);}
@media(max-width:640px){
  .row{grid-template-columns:1fr; gap:var(--s-2);}
  .row__n{font-size:2rem;}}

/* =====================================================================
   10 · MOCKUP ET PASTILLES D'ANNOTATION : composants.html §8
   Marqueur d'identité n°2 : la capture produit est toujours annotée.
   Ici le mockup est DESSINÉ en HTML/CSS : aucune image, aucune photo de
   stock, aucune requête externe. Le navy plein est autorisé à
   l'intérieur du mockup, et nulle part ailleurs.
   ===================================================================== */
.shotwrap{position:relative;}
.shot{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-float);
  background:var(--surface-dark);}
.mock{color:#fff; font-size:.875rem;}
.mock__bar{display:flex; align-items:center; gap:.375rem;
  padding:.75rem 1rem; background:rgba(255,255,255,.06);}
.mock__dot{width:9px; height:9px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.28);}
.mock__title{margin-left:.625rem; font-size:.75rem; letter-spacing:.04em;
  color:rgba(255,255,255,.62);}
.mock__body{padding:clamp(1.5rem,3vw,2.5rem);
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);}
.mock__kpi{display:flex; flex-direction:column; gap:1.25rem;}
.mock__kpi b{display:block; font-size:1.75rem; line-height:1.05; letter-spacing:-.025em;}
.mock__kpi span{font-size:.75rem; color:rgba(255,255,255,.62);}
.mock__lines{display:flex; flex-direction:column; gap:1.125rem;}
.mock__line{display:grid; grid-template-columns:1fr auto; gap:.5rem 1rem;}
.mock__label{font-size:.8125rem; color:rgba(255,255,255,.86);}
.mock__track{grid-column:1/-1; height:6px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.14); overflow:hidden;}
.mock__fill{display:block; height:100%; border-radius:var(--r-pill);
  background:var(--blue-soft);}
.mock__fill--accent{background:var(--amber);}
.mock__val{font-size:.8125rem; text-align:right; color:rgba(255,255,255,.62);}
@media(max-width:768px){
  .mock__body{grid-template-columns:1fr;}
  .mock__kpi{flex-direction:row; gap:1.5rem; padding-bottom:1.25rem;
    border-bottom:1px solid rgba(255,255,255,.12);}
  .mock__kpi b{font-size:1.375rem;}}
.caption{margin-top:var(--s-16); color:var(--muted); font-size:.8125rem;}

.chip{position:absolute; display:flex; align-items:center; gap:.625rem;
  padding:.625rem .875rem; border-radius:var(--r-md); max-width:16rem;
  background:var(--surface); box-shadow:var(--sh-float);}
.chip__icon{width:28px; height:28px; border-radius:var(--r-sm); flex:0 0 auto;
  display:grid; place-items:center; background:var(--blue-100); color:var(--blue-800);}
.chip strong{display:block; font:600 .8125rem/1.2 var(--font-ui); color:var(--navy);}
.chip span{font:400 .75rem/1.35 var(--font-ui); color:var(--muted);}
.chip--accent{background:var(--navy);}
.chip--accent .chip__icon{background:rgba(255,255,255,.16); color:#fff;}
.chip--accent strong{color:#fff;}
.chip--accent span{color:rgba(255,255,255,.76);}
/* Les pastilles chevauchent les BORDS du mockup, jamais ses données :
   une annotation qui recouvre le chiffre qu'elle commente ne sert à rien. */
.chip--a{top:-1.5rem; right:2rem;}
.chip--b{bottom:-1.5rem; left:17rem;}   /* au-delà de la colonne d'indicateurs */
.chip--c{bottom:-1.5rem; right:2rem;}
/* Sous 1100 px les deux pastilles basses se chevaucheraient : on retombe à
   deux annotations, ce que le système autorise (1 à 3).                   */
@media(max-width:1100px){ .chip--c{display:none;} }
@media(max-width:768px){ .chip{display:none;} }   /* jamais superposées sur mobile */

/* =====================================================================
   11 · TABLEAU : composants.html §9
   ===================================================================== */
table{width:100%; border-collapse:collapse; margin:var(--s-6) 0;}
th{background:var(--navy); color:#fff; text-align:left;
  font:700 .75rem/1 var(--font-ui); letter-spacing:.1em; text-transform:uppercase;
  padding:.75rem .875rem;}
td{background:var(--bg); font-size:.9375rem; padding:.75rem .875rem;
  border-bottom:1px solid var(--hairline); vertical-align:top;}
.tinted td{background:var(--surface);}
td .chg{font-weight:700; color:var(--alert);}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
@media(max-width:640px){
  table{min-width:34rem;}
  .table-scroll{mask-image:linear-gradient(to right,#000 88%,transparent 100%);
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent 100%);}}

/* =====================================================================
   12 · ENCADRÉS : composants.html §10, DA §4.3
   Fond plein, aucune bordure, première phrase en gras dans la couleur.
   ===================================================================== */
.note{padding:.875rem 1.125rem; margin:var(--s-6) 0; font-size:.9375rem;
  border-radius:var(--r-md); max-width:62ch;}
.note b{font-weight:700;}
.note--alert{background:var(--alert-bg);} .note--alert b{color:var(--alert);}
.note--ok{background:var(--ok-bg);}       .note--ok b{color:var(--ok);}
.note--watch{background:var(--watch-bg);} .note--watch b{color:var(--watch);}

/* =====================================================================
   13 · GRILLE DE VIGNETTES : composants.html §11
   Aucune bordure : les blocs se détachent par l'ombre.
   ===================================================================== */
.grid{display:grid; gap:var(--s-4);
  grid-template-columns:repeat(auto-fill, minmax(15rem,1fr)); list-style:none;}
.tile{border-radius:var(--r-md); overflow:hidden; background:var(--surface);
  box-shadow:var(--sh-card); padding:var(--s-6);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.tile:hover{transform:translateY(-4px); box-shadow:var(--sh-float);}
/* modificateurs de comptage : le composant de base est inchangé. */
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:900px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.grid--3,.grid--2{grid-template-columns:1fr;}}
.tile h3{margin-bottom:var(--s-3);}
.tile p{color:var(--label); font-size:.9375rem;}

/* =====================================================================
   14 · FAQ : [HORS DA : À VALIDER] transposition print → web.
   <details> natif : fonctionne sans JavaScript, pas de carte, filet 1 px.
   ===================================================================== */
.faq{max-width:52rem; margin-top:var(--s-8);}
.faq details{border-top:1px solid var(--hairline);}
.faq summary{display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s-4); padding:var(--s-6) 0; cursor:pointer; list-style:none;
  font:700 1.0625rem/1.4 var(--font-ui); color:var(--navy);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary svg{flex:0 0 auto; margin-top:.25rem; color:var(--blue-600);
  transition:transform .35s var(--ease);}
.faq details[open] summary svg{transform:rotate(45deg);}
.faq p{padding-bottom:var(--s-6); color:var(--label);}

/* =====================================================================
   15 · SCHÉMA D'ARCHITECTURE : [HORS DA : À VALIDER]
   SVG inline, aucune icône tierce.
   ===================================================================== */
.diagram{width:100%; height:auto; display:block;}
/* v11.2 · Le schéma bascule en disposition verticale sous 48rem : un
   schéma horizontal compressé à 375 px devient illisible. */
.diagram--small{display:block; max-width:22rem; margin-inline:auto;}
.diagram--large{display:none;}
@media(min-width:48rem){
  .diagram--small{display:none;}
  .diagram--large{display:block;}
}
.diagram .dg-box{fill:var(--surface); stroke:none;}
.diagram .dg-label{font:700 13px var(--font-ui); fill:var(--navy);}
.diagram .dg-sub{font:400 11.5px var(--font-ui); fill:var(--label);}
.diagram .dg-flow{stroke:var(--blue-600); stroke-width:1.75; fill:none;}
.diagram .dg-tick{font:700 11px var(--font-ui); fill:var(--blue-800);
  letter-spacing:.14em;}

/* v11.15 · Le socle garde sa place centrale sans aplat sombre : il est
   simplement plus haut que les autres blocs et posé sur un bleu très
   clair de la rampe. Aucun aplat foncé, conformément à la charte. */
.diagram .dg-socle{fill:var(--blue-100);}

/* Icônes de schéma : tracé seul. Aucune icône tierce, aucun logo
   d'éditeur — un logo impliquerait un partenariat non établi. */
.diagram .dg-ico{fill:none; stroke:var(--blue-600); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;}

/* =====================================================================
   15 ter · PAGE AGENCE : rôle de fondateur et emplacements de visuels
   Aucune banque d'images : photographies réelles, ou visuels générés
   signalés comme tels sous la légende (article 50 du règlement européen).
   ===================================================================== */
/* v11.5 · Emplacement de portrait. Rapport 1:1, en attente des
   photographies professionnelles des fondateurs. Aucune image de
   substitution n'est affichée : un aplat neutre vaut mieux qu'un
   visuel générique. */
.portrait{aspect-ratio:1/1; width:5.5rem; border-radius:var(--r-md);
  background:var(--bg-tint); margin-bottom:var(--s-6);}
.portrait img{width:100%; height:100%; object-fit:cover;
  border-radius:var(--r-md); display:block;}

.role{font:700 .6875rem/1 var(--font-ui); letter-spacing:.16em;
  text-transform:uppercase; color:var(--label); margin:0 0 var(--s-3);}
.visuels{display:grid; gap:var(--s-6); margin:var(--s-12) 0 0; padding:0;}
@media(min-width:48rem){.visuels{grid-template-columns:repeat(2,1fr);}}
.visuels figcaption{
  grid-column:1/-1; width:100%; max-width:72rem;
  margin:var(--s-2) auto 0; text-align:center;
}
.visuel__ph{aspect-ratio:3/2; background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--sh-card); display:grid; place-items:center; padding:var(--s-6);
  text-align:center; font-size:.8125rem; color:var(--muted);}
.visuel img{width:100%; height:auto; display:block; aspect-ratio:3/2;
  object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--sh-float);}

/* =====================================================================
   15 bis · TUNNEL DE CONVERSION : page /rendez-vous
   Ni navigation, ni pied de page : chaque lien affiché est une occasion
   de repartir explorer et de ne jamais réserver.
   ===================================================================== */
.tunnel{width:min(42rem, calc(100% - 2*var(--gutter))); margin-inline:auto;
  padding-block:var(--s-16);}
.tunnel h3{margin:var(--s-8) 0 var(--s-3);}
/* v11.24 · Liste à puces du workshop : même encre que le corps, retrait
   sobre, pas de carte — elle appartient au paragraphe qui la précède. */
.tunnel-liste{margin:0 0 var(--s-4); padding-left:1.15rem; color:var(--label);}
.tunnel-liste li{margin-bottom:.4rem;}

/* v12.14 · Tunnel de conversion : une seule échelle typographique sur toute
   la page. Les intertitres prennent le corps du titre principal, les
   paragraphes et les listes celui du chapô d'introduction. */
.tunnel h3{font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.12;
  letter-spacing:-.025em;}
.tunnel p,
.tunnel .tunnel-liste li,
.tunnel .rdv-detail li{font-size:clamp(1.06rem,1.4vw,1.28rem); line-height:1.62;
  color:var(--label);}
/* Les libellés en gras du récapitulatif gardent leur encre soutenue. */
.tunnel .rdv-detail b{color:var(--navy);}
/* Les mots en gras d'un paragraphe aussi — sauf lorsqu'ils sont un lien,
   qui doit rester identifiable comme tel. */
.tunnel p b{color:var(--navy);}
.tunnel p a:not(.btn),
.tunnel p a:not(.btn) b{color:#1F5DE2; text-decoration:underline;
  text-underline-offset:.18em;}
/* Le lien de retour n'est ni un lien éditorial, ni un bouton : pas de
   soulignement, pas de bulle autour. */
.tunnel p.retour a{text-decoration:none;}
.tunnel p.retour a:hover{text-decoration:underline;}

/* v12.20 · Encadrés de méthodologie : l'intitulé passe à l'encre du corps
   plutôt qu'au vert d'état, et le lien prend le bleu éditorial du site. */
.note--ok b{color:var(--ink);}
.note--ok a,
.note--ok a b{color:#1F5DE2; text-decoration:underline; text-underline-offset:.18em;}
.note--ok a:hover,
.note--ok a:hover b{color:#153EAD;}
.tunnel p a:not(.btn):hover,
.tunnel p a:not(.btn):hover b{color:#153EAD;}
.rdv-detail{list-style:none; margin:var(--s-8) 0; padding:var(--s-2) var(--s-6);
  background:var(--surface); border-radius:var(--r-md); box-shadow:var(--sh-card);
  font-size:.9375rem;}
.rdv-detail li{padding:.75rem 0; border-bottom:1px solid var(--hairline);
  color:var(--label);}
.rdv-detail li:last-child{border-bottom:0;}
.rdv-detail b{color:var(--navy);}
#page-rendez-vous .rdv-cta{
  width:100%;
  max-width:none;
  margin:var(--s-8) auto 0;
  text-align:center;
}
#page-rendez-vous .rdv-cta .btn{
  justify-content:center;
}
.embed-rdv{background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--sh-card); padding:var(--s-16) var(--s-6); text-align:center;
  color:var(--muted); font-size:.9375rem; margin:var(--s-8) 0;}
body.mode-tunnel .nav, body.mode-tunnel footer,
body.mode-tunnel #menu-mobile{display:none;}
/* v12.95 · Page CGV : le bouton Retour remplace la navigation, le pied de
   page (liens légaux) reste visible. */
body.mode-document .nav, body.mode-document #menu-mobile{display:none;}

/* =====================================================================
   16 · PIED DE PAGE : composants.html §13
   ===================================================================== */
footer{border-top:1px solid var(--hairline-strong); padding-block:var(--s-12);
  color:var(--footer-ink); font-size:.875rem;}
footer a{color:var(--footer-ink); text-decoration:none;}
footer a:hover{color:var(--blue-800);}
.foot{display:grid; grid-template-columns:1.4fr repeat(3,1fr);
  gap:var(--s-8); align-items:start;}
.foot h4, .foot .foot__h{margin:0 0 var(--s-4); font:700 .75rem/1 var(--font-ui);
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy);}
.foot ul{list-style:none;}
.foot li{margin-bottom:var(--s-3);}
.foot__legal{margin-top:var(--s-12); padding-top:var(--s-6);
  border-top:1px solid var(--hairline); display:flex; flex-wrap:wrap;
  gap:var(--s-6); justify-content:space-between; color:var(--muted);}
@media(max-width:768px){ .foot{grid-template-columns:1fr 1fr;} }
@media(max-width:480px){ .foot{grid-template-columns:1fr;} }

/* =====================================================================
   17 · ROUTAGE ET MOUVEMENT : composants.html §12
   Une seule mécanique de mouvement sur tout le site : révélation à
   l'entrée. Interdits : parallaxe, compteurs animés, carrousels.
   ===================================================================== */
.page{padding-top:0;}
/* Sans JS, toutes les pages restent visibles, empilées et séparées.
   Le routage ne s'active que si le drapeau .js a été posé.             */
.js .page{display:none;}
.js .page.is-active{display:block;}
.page + .page{border-top:1px solid var(--hairline-strong);}
.js .page + .page{border-top:0;}

.js .reveal{opacity:0; transform:translateY(16px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);}
.js .reveal.is-in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none;}
  *{animation:none !important; transition:none !important;
    scroll-behavior:auto !important;}}

.skip{position:absolute; left:-9999px; top:0; z-index:60;
  background:var(--surface); color:var(--navy); padding:.75rem 1rem;
  border-radius:var(--r-md); box-shadow:var(--sh-float);}
.skip:focus{left:1rem; top:1rem;}

/* [HORS DA : À VALIDER] : seul écart à l'échelle de tokens.css, réservé
   au H1 de l'accueil. Le brief demande un display de 72 à 104 px ;
   tokens.css plafonne à 68 px. Plafond porté ici à 80 px sans toucher au
   fichier de tokens : classe d'opt-in, réversible en une ligne.        */
.h1--display{font-size:clamp(2.5rem,6.2vw,5rem); line-height:1.02;
  letter-spacing:-.042em;}


/* =====================================================================
   v9.2 · DIRECTION ARTISTIQUE "EDITORIAL TECH"
   Refonte visuelle inspirée des références fournies : navigation flottante,
   grands titres serif, accents bleus italiques, surfaces très claires,
   boutons noirs et cartes produit généreuses. Le contenu et le routage
   restent inchangés.
   ===================================================================== */
:root{
  --ink:#20242C;
  --navy:#080B12;
  --label:#626975;
  --muted:#636C77; /* v14.0 · contraste AA (était #8D95A1, 3,0:1) [HORS DA — À VALIDER] */
  --footer-ink:#555D68;
  --blue-900:#0C2F84;
  --blue-800:#1648C8;
  --blue-700:#205BEA;
  --blue-600:#4B84FF;
  --blue-100:#E9F0FF;
  --blue-soft:#AFCBFF;
  --amber:#205BEA;
  --amber-wash:#EAF1FF;
  --amber-ink:#1648C8;
  --bg:#F7F8FA;
  --bg-tint:#F1F5FA;
  --surface:#FFFFFF;
  --surface-dark:#071329;
  --hairline:#E7EAF0;
  --hairline-strong:#DDE2EA;
  --rule:1px solid var(--hairline-strong);
  --r-lg:28px;
  --r-md:18px;
  --r-sm:9px;
  --sh-pill:0 1px 2px rgba(10,18,35,.04),0 10px 30px rgba(26,42,73,.08);
  --sh-btn:0 10px 24px rgba(4,9,20,.16),0 2px 5px rgba(4,9,20,.12);
  --sh-card:0 16px 45px rgba(25,48,88,.07),0 1px 2px rgba(25,48,88,.06);
  --sh-float:0 28px 80px rgba(21,47,93,.15),0 4px 16px rgba(21,47,93,.08);
  --font-ui:"Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-display:"Bodoni MT", Didot, "Iowan Old Style", "Times New Roman", Georgia, serif;
  --container:1220px;
  --gutter:clamp(1.25rem,4vw,2.75rem);
  --section-y:clamp(3.75rem,6vw,6rem);
}
html{background:var(--bg); scroll-behavior:smooth;}
body{
  background:#fff;
  color:var(--ink);
  font:400 clamp(1rem,1.05vw,1.1rem)/1.65 var(--font-ui);
  letter-spacing:-.006em;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(circle at 50% 8%, rgba(89,143,255,.12), transparent 27rem),
    radial-gradient(circle at 82% 34%, rgba(95,172,255,.07), transparent 25rem),
    linear-gradient(180deg,#FAFBFC 0%,#F5F7FA 100%);
}
h1,h2,h3{font-family:var(--font-display); font-weight:400; color:var(--navy);}
h1{
  font-size:clamp(3rem,6vw,5.3rem); line-height:.98; letter-spacing:-.052em;
}
h2{
  font-size:clamp(2.45rem,4.7vw,4.4rem); line-height:1.01; letter-spacing:-.048em;
}
h3{
  font-size:clamp(1.45rem,2vw,2rem); line-height:1.08; letter-spacing:-.025em;
  color:var(--navy);
}
em,i{font-style:italic; font-weight:400;}
p{color:var(--ink);}
.lede{font-size:clamp(1.06rem,1.4vw,1.28rem); line-height:1.62; color:var(--label);}
.small{color:var(--muted);}
.grad{
  display:inline-block;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.05em;
  background:linear-gradient(100deg,#153EAD 0%,#2C68F1 48%,#8EC9FF 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-right:.08em; padding-bottom:.1em;
}
.mark{background:linear-gradient(transparent 64%,rgba(75,132,255,.16) 64%);}

/* navigation */
.nav{
  top:1.35rem;
  width:min(1220px,calc(100% - 2*var(--gutter)));
  padding:.55rem .65rem .55rem 1rem;
  border:1px solid rgba(255,255,255,.88);
  background:rgba(255,255,255,.82);
  box-shadow:0 15px 42px rgba(27,42,66,.10),0 1px 2px rgba(27,42,66,.06);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
.nav.is-scrolled{box-shadow:0 18px 52px rgba(27,42,66,.13),0 1px 3px rgba(27,42,66,.08);}
.nav__links{gap:clamp(.95rem,2vw,1.75rem);}
.nav a{font-size:.9rem; font-weight:600; color:#30343B;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--blue-700);}
.logo{font:700 1.02rem/1 var(--font-ui); letter-spacing:-.02em; color:#11141A;}
.logo__mark{width:32px;height:32px;flex:0 0 auto;display:block;object-fit:contain;border-radius:0;background:transparent;}
.logo__tile{
  position:relative; overflow:hidden; width:34px; height:34px; border-radius:10px;
  font-size:0; background:linear-gradient(145deg,#347BFF 0%,#1957E6 100%);
  box-shadow:0 8px 18px rgba(32,91,234,.28),inset 0 1px 0 rgba(255,255,255,.24);
}
.logo__tile::before,.logo__tile::after{
  content:""; position:absolute; left:8px; width:18px; height:4px; border-radius:999px;
  background:#fff; transform:rotate(-38deg); box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.logo__tile::before{top:10px}.logo__tile::after{top:19px}

/* controls */
.btn{font-weight:650; padding:.93rem 1.5rem; letter-spacing:-.015em;}
.btn--primary{background:#0B0E14; color:#fff; box-shadow:var(--sh-btn);}
.btn--primary:hover{background:#171B23; box-shadow:0 16px 34px rgba(4,9,20,.22);}
.btn--ghost{background:rgba(255,255,255,.9); color:#171B23; border:1px solid rgba(220,225,234,.9); box-shadow:var(--sh-pill);}
.btn--ghost:hover{background:#fff; box-shadow:0 16px 38px rgba(25,48,88,.11);}
.nav a.btn--primary{color:#fff; padding:.87rem 1.35rem;}
.eyebrow{
  position:relative; gap:.55rem; padding:.5rem .9rem;
  background:rgba(255,255,255,.74); border:1px solid rgba(58,104,214,.10);
  box-shadow:0 8px 24px rgba(34,78,162,.08),inset 0 1px 0 rgba(255,255,255,.7);
  color:#2860CC; letter-spacing:.16em; font-size:.67rem;
}
.eyebrow::before{
  content:""; width:7px; height:7px; flex:0 0 7px; border-radius:50%;
  background:#3C7BFF; box-shadow:0 0 0 5px rgba(60,123,255,.10),0 0 14px rgba(60,123,255,.45);
}

/* layout */
.wrap{width:min(var(--container),calc(100% - 2*var(--gutter)));}
section{position:relative; padding-block:var(--section-y);}
.hero{padding:clamp(8.5rem,12vw,11rem) 0 clamp(4rem,6.5vw,6rem); overflow:hidden;}
.hero::before{
  content:""; position:absolute; width:min(82vw,980px); aspect-ratio:1.65; left:50%; top:2rem;
  transform:translateX(-50%); z-index:-1; filter:blur(4px);
  background:radial-gradient(ellipse at center,rgba(80,133,255,.16),rgba(119,191,255,.055) 44%,transparent 72%);
}
.titleblock .eyebrow{margin-bottom:1.8rem;}
.titleblock h1{margin-bottom:1.65rem;}
.titleblock .lede{max-width:48rem;}
.hero__actions{gap:.85rem; margin-top:2rem;}
#page-accueil .hero>.wrap:first-child .titleblock{max-width:1050px; margin:0 auto; text-align:center;}
#page-accueil .hero>.wrap:first-child .titleblock .lede{margin-inline:auto; max-width:48rem;}
#page-accueil .hero>.wrap:first-child .hero__actions{justify-content:center;}
#page-accueil .h1--display{font-size:clamp(3.75rem,7.2vw,6.4rem); line-height:.91; letter-spacing:-.058em;}
#page-accueil .hero>.wrap:nth-of-type(2){margin-top:clamp(3.75rem,7vw,6rem)!important;}
.tinted{
  background:
    radial-gradient(circle at 18% 8%,rgba(92,143,255,.09),transparent 26rem),
    linear-gradient(180deg,#F3F6FA 0%,#F7F9FB 100%);
  border-top:1px solid rgba(226,231,239,.66);
  border-bottom:1px solid rgba(226,231,239,.66);
}
.split{gap:clamp(3rem,7vw,6.5rem);}
.sechead{margin-bottom:clamp(2rem,3.5vw,3rem);}
.sechead .eyebrow{margin-bottom:1.5rem;}
.sechead .lede{margin-top:1.4rem; max-width:48rem;}
.h2--ruled{border:0; padding-bottom:0; gap:.65rem; align-items:flex-start;}
.h2--ruled .num{font-size:.52em; line-height:1.15; padding-top:.2em; color:var(--blue-700); font-style:italic;}

/* product / proof panel */
.shotwrap{margin-inline:auto;}
.shot{
  border-radius:32px; border:1px solid rgba(255,255,255,.95);
  background:#09152B; box-shadow:0 34px 90px rgba(19,44,91,.18),0 4px 12px rgba(19,44,91,.10);
}
.mock{background:linear-gradient(145deg,#061127 0%,#0A1D42 58%,#08295A 100%);}
.mock__bar{padding:.9rem 1.15rem; background:rgba(255,255,255,.045); border-bottom:1px solid rgba(255,255,255,.06);}
.mock__dot{width:8px;height:8px;background:rgba(255,255,255,.23)}
.mock__body{padding:clamp(2rem,4vw,3.25rem); gap:clamp(2rem,5vw,4rem);}
.mock__kpi b{font-family:var(--font-display); font-weight:400; font-size:2.3rem;}
.mock__track{height:7px; background:rgba(255,255,255,.10);}
.mock__fill{background:linear-gradient(90deg,#5A8EFF,#B4CEFF);}
.mock__fill--accent{background:linear-gradient(90deg,#54A2FF,#77D3FF);}
.caption{
  width:100%; max-width:52rem; margin:2.7rem auto 0; text-align:center;
}
.chip{
  border-radius:16px; border:1px solid rgba(223,229,238,.9); background:rgba(255,255,255,.94);
  box-shadow:0 20px 52px rgba(25,48,88,.14); backdrop-filter:blur(16px);
}
.chip__icon{border-radius:10px;background:#EEF4FF;color:#2D68EC}
.chip--accent{background:#245FEA; border-color:#245FEA;}

/* editorial rows */
.rows{margin-top:clamp(2.5rem,5vw,4.5rem);}
.row{grid-template-columns:5.4rem 1fr; gap:clamp(1.4rem,3vw,2.4rem); padding:clamp(1.8rem,3.8vw,3rem) 0; border-top:1px solid #E1E5EB;}
.row__n{font-family:var(--font-display); font-weight:400; font-style:italic; font-size:clamp(2.6rem,4vw,4.1rem); color:#1F5DE2; letter-spacing:-.055em;}
.row p{margin-top:.75rem; color:var(--label); max-width:64ch;}
.row__link{margin-top:1rem; color:#205BEA; font-weight:650;}

/* cards, notes, tables */
.grid{gap:1.25rem;}
.tile{
  padding:clamp(1.6rem,3vw,2.35rem); border-radius:22px; border:1px solid rgba(223,228,236,.86);
  background:rgba(255,255,255,.88); box-shadow:0 14px 38px rgba(25,48,88,.06);
}
.tile:hover{transform:translateY(-5px); box-shadow:0 24px 60px rgba(25,48,88,.11);}
.tile h3{margin-bottom:.85rem;}
.tile p{color:var(--label);}
/* v9.5 · Les encadrés gardent leur respiration visuelle, mais leur texte
   démarre désormais sur le même axe que les paragraphes voisins. */
.note{
  --note-pad-x:1.2rem;
  border-radius:16px;
  padding:1.05rem var(--note-pad-x);
  margin-left:calc(-1 * var(--note-pad-x));
  max-width:calc(62ch + var(--note-pad-x));
}
table{border-radius:18px; overflow:hidden; box-shadow:0 12px 34px rgba(25,48,88,.05);}
/* v12.9 · En-tête de tableau traité comme le bouton de réservation : même
   bleu semi-transparent, même flou d'arrière-plan, même voile lumineux et
   même liseré interne. Le dégradé du voile est vertical, pour qu'il se
   répète à l'identique dans chaque cellule et ne laisse aucune couture
   visible d'une colonne à l'autre. */
th{
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0) 62%),
             rgba(26,65,148,.88);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),
             inset 0 -1px 0 rgba(10,30,80,.18);
  color:#fff;
}
/* Repli sans transparence : la teinte pleine du bouton. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  th{background:#234EAA;}
}
@media(prefers-reduced-transparency:reduce){
  th{background:#234EAA; -webkit-backdrop-filter:none; backdrop-filter:none;}
}
td{background:rgba(255,255,255,.76);}
.tinted td{background:#fff;}

.tab-scroll{overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch;}
.table-scroll{max-width:100%;}

/* FAQ */
.faq{max-width:58rem;}
.faq details{border-top:1px solid #DFE4EB;}
.faq summary{padding:1.45rem 0; font:400 clamp(1.15rem,1.8vw,1.45rem)/1.35 var(--font-display); color:#10131A;}
.faq summary svg{color:#2C68F1;}

/* v12.4 · Questions de FAQ traitées comme les fins de titre : même dégradé,
   même italique d'affichage. Le dégradé s'arrête au texte, l'icône garde
   sa couleur pleine. */
.faq summary .grad--faq{display:inline; padding-bottom:.06em;}
.faq summary:hover .grad--faq{filter:saturate(1.15);}
.faq p{color:var(--label);}

/* agency visuals + tunnel */
.visuel__ph,.visuel img,.embed-rdv,.rdv-detail{border-radius:22px; border:1px solid rgba(225,230,238,.88); box-shadow:var(--sh-card);}
.tunnel{padding-top:7rem; padding-bottom:7rem;}

/* footer */
footer{background:rgba(255,255,255,.74); border-top:1px solid #E1E5EC; padding-block:4rem;}
.foot{gap:clamp(2rem,5vw,4rem);}
.foot h4, .foot .foot__h{color:#11151C; letter-spacing:.12em;}
.foot__legal{border-top:1px solid #E6EAF0;}

@media(max-width:1080px){
  .nav__links{background:rgba(255,255,255,.96); border:1px solid #E6EAF0; padding:.65rem;}
}
@media(max-width:900px){
  .hero{padding-top:8.8rem;}
  #page-accueil .h1--display{font-size:clamp(3.25rem,10vw,5rem);}
  .split,.split--wide{gap:2.75rem;}
}
@media(max-width:640px){
  :root{--section-y:3.25rem;}
  .nav{top:.75rem; width:calc(100% - 1.25rem); padding:.45rem .45rem .45rem .72rem;}
  .logo{font-size:.94rem}.logo__mark{width:30px;height:30px}.logo__tile{width:31px;height:31px}.logo__tile::before,.logo__tile::after{left:7px;width:17px}
  .hero{padding-top:7.2rem; padding-bottom:5rem;}
  #page-accueil .h1--display{font-size:clamp(3rem,15vw,4.3rem);}
  h1{font-size:clamp(2.8rem,13vw,4rem)}
  h2{font-size:clamp(2.35rem,11vw,3.4rem)}
  .hero__actions{justify-content:stretch!important;}
  .hero__actions .btn{width:100%; justify-content:center;}
  .row{grid-template-columns:1fr; gap:.35rem;}
  .row__n{font-size:2.35rem;}
  .shot{border-radius:22px;}
  .mock__body{padding:1.45rem;}
  .sechead{margin-bottom:2.5rem;}
}


/* v13.18 · Mentions légales : document seul, sans sommaire. */
#page-mentions-legales .legal-doc--single{max-width:60rem; margin-inline:auto;}
/* v13.18 · Version et date d'entrée en vigueur des CGV, sous le titre. */
#page-cgv > .hero .legal-meta{margin:var(--s-4) auto 0; color:var(--label);}
/* v13.18 · Annexe C : formulaire de rétractation. */
#page-cgv .legal-form{margin-top:.85rem; padding:1.1rem 1.25rem; border-radius:16px; background:var(--bg-tint); max-width:68ch;}
#page-cgv .legal-form p + p{margin-top:.7rem;}
/* v13.18 · Réservation : prise de connaissance avant l'ouverture de l'agenda. */
#page-rendez-vous #reservation{scroll-margin-top:5.5rem;}
#page-rendez-vous #reservation:focus{outline:none;}
#page-rendez-vous .rdv-ack{width:100%; max-width:38rem; margin:0 auto var(--s-6); padding:1rem 1.2rem;
  border-radius:16px; background:var(--surface); border:1px solid var(--hairline); text-align:left;}
#page-rendez-vous .rdv-ack p{margin:0 0 .75rem; font-size:.95rem; line-height:1.55; color:var(--ink);}
#page-rendez-vous .rdv-ack a,
#page-rendez-vous .rdv-legal-links a{color:var(--blue-800); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px;}
#page-rendez-vous .rdv-ack label{display:flex; gap:.6rem; align-items:flex-start; font-weight:700; color:var(--navy); cursor:pointer;}
#page-rendez-vous .rdv-ack input{flex:0 0 auto; width:1.15rem; height:1.15rem; margin:.15rem 0 0; accent-color:var(--blue-800);}
#page-rendez-vous .rdv-ack__msg{min-height:1.3em; margin:.5rem 0 0 !important; font-size:.9rem !important; color:var(--watch) !important;}
#page-rendez-vous .btn.is-locked{opacity:.55; cursor:not-allowed;}
#page-rendez-vous .rdv-legal-links{margin-top:var(--s-4); font-size:.88rem; color:var(--label);}


/* Switch · Glassmorphism buttons */
.btn{
  border:1px solid rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.12),0 8px 24px rgba(25,48,88,.12);
}
.btn--primary{
  color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,0) 58%),rgba(26,65,148,.88);
  border-color:rgba(255,255,255,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(10,30,80,.18),0 8px 24px rgba(58,106,214,.24);
}
.btn--primary:hover{
  background:linear-gradient(145deg,rgba(255,255,255,.19),rgba(255,255,255,0) 58%),rgba(23,57,132,.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 30px rgba(58,106,214,.3);
  transform:translateY(-2px);
}
.btn--ghost{
  color:#192d51;
  background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.08)),rgba(238,244,255,.64);
  border-color:rgba(255,255,255,.85);
}
.btn--ghost:hover{
  background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.18)),rgba(238,244,255,.78);
  box-shadow:inset 0 1px 0 #fff,0 12px 30px rgba(25,48,88,.17);
  transform:translateY(-2px);
}
.btn:focus-visible{outline:3px solid #3A6AD6;outline-offset:4px;}
.btn:active{transform:translateY(0);box-shadow:inset 0 2px 5px rgba(25,48,88,.18);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .btn--primary{background:#234eaa;}
  .btn--ghost{background:#edf3ff;}
}
@media(prefers-reduced-transparency:reduce){
  .btn{-webkit-backdrop-filter:none;backdrop-filter:none;}
  .btn--primary{background:#234eaa;}
  .btn--ghost{background:#edf3ff;}
}
@media(prefers-reduced-motion:reduce){
  .btn,.btn svg{transition:none;}
  .btn:hover,.btn:active,.btn:hover svg{transform:none;}
}


/* Glass surfaces use only the site's existing white/blue palette. */
.page :is(.titleblock,.sechead,.row,.tile,.note,.rdv-detail),.faq details,.glass-copy{
 background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.42));
 border:1px solid rgba(255,255,255,.88);border-radius:24px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 28px rgba(25,48,88,.10);
 -webkit-backdrop-filter:blur(18px) saturate(135%);backdrop-filter:blur(18px) saturate(135%);
}
.page .titleblock,.page .sechead,.glass-copy{padding:clamp(1.4rem,3vw,2.5rem)}
.page .titleblock{overflow:visible}
.page .row{padding:clamp(1.2rem,2.5vw,2rem);margin-bottom:1.2rem}
.page .rows{padding:0}.page .note{margin-left:0;max-width:100%}
.page .tile{transition:transform .28s ease,box-shadow .28s ease}
.glass-copy>p+p{margin-top:1rem}
.faq details{padding:0 1.4rem;margin-bottom:1rem;transition:box-shadow .28s ease}
.faq summary{padding:1.25rem 0}
.faq details>p{padding-bottom:1.25rem}
/* Existing button colors, padding, fonts and corner radius are untouched. */
.btn{position:relative;isolation:isolate;transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.btn::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;box-shadow:0 9px 24px rgba(58,106,214,.25);transition:opacity .25s ease}
.btn:focus-visible::after{opacity:1}
.btn:active{transform:translateY(1px) scale(.985)}
.glass-disclosure{min-width:0}
.glass-disclosure>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px}
.glass-disclosure>summary::-webkit-details-marker{display:none}
.glass-disclosure>summary::after{content:'+';font:400 1.5rem/1 var(--font-ui);color:var(--blue-800);flex:none}
.glass-disclosure[open]>summary::after{content:'−'}
.glass-disclosure>summary h3{margin:0}
.glass-disclosure[open] .glass-body{animation:glass-open .28s ease both}
.glass-body{padding-top:1rem}.glass-body>p+p{margin-top:1rem}
@keyframes glass-open{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (pointer:fine){
 .btn:hover{transform:translateY(-3px) scale(1.025);filter:brightness(1.04)}
 .btn:hover::after{opacity:1}
 .tile:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 38px rgba(25,48,88,.17)}
 .row:has(.glass-disclosure[open]),.faq details[open]{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 16px 36px rgba(25,48,88,.16)}
}
@media(max-width:640px){.page .titleblock,.page .sechead,.glass-copy{padding:1.25rem;border-radius:20px}.page .row{padding:1.25rem}.faq details{padding-inline:1rem}}
@media(prefers-reduced-motion:reduce){.btn,.btn::after,.page .tile,.faq details{transition:none}.btn:hover,.btn:active,.tile:hover{transform:none;filter:none}.glass-disclosure[open] .glass-body{animation:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.page :is(.titleblock,.sechead,.row,.tile,.note,.rdv-detail),.faq details,.glass-copy{background:var(--surface)}}


:is(#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie,#page-404) .hero .titleblock{
  max-width:1050px;
  margin-inline:auto;
  text-align:center;
}
:is(#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie,#page-404) .hero .titleblock .lede{
  max-width:48rem;
  margin-inline:auto;
}
:is(#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie,#page-404) .hero .hero__actions{
  justify-content:center;
}


/* Block layout restores the explicit line break between both title parts. */
.h2--ruled.h2--two-lines{display:block;}
.h2--two-lines .grad{display:inline;}


/* Soft shadow emphasis: mouse hover, keyboard focus, touch and pen contact. */
.page .glass-shadow-bubble,.glass-shadow-bubble{
 transition:box-shadow .28s ease,transform .28s ease;
}
@media(hover:hover) and (pointer:fine){
 .page .glass-shadow-bubble:hover,.glass-shadow-bubble:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 32px rgba(25,48,88,.18),0 3px 12px rgba(58,106,214,.12);
 }
}
.page .glass-shadow-bubble.is-touch-shadow,.glass-shadow-bubble.is-touch-shadow,
.page .glass-shadow-bubble:focus-within,.glass-shadow-bubble:focus-within{
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 32px rgba(25,48,88,.18),0 3px 12px rgba(58,106,214,.12);
}
@media(prefers-reduced-motion:reduce){.page .glass-shadow-bubble,.glass-shadow-bubble{transition:none}}
@media(forced-colors:active){.page .glass-shadow-bubble,.glass-shadow-bubble{box-shadow:none!important}}


#page-accueil .compliance-stacked{grid-template-columns:minmax(0,1fr);gap:2rem;}
#page-accueil .compliance-stacked h2{display:block;}
#page-accueil .compliance-stacked>.glass-copy{width:100%;box-sizing:border-box;}



/* Headings stay on the page; only prose receives glass surfaces. */
.page :is(.titleblock,.sechead,.row,.tile,.note,.rdv-detail,.glass-copy),.faq details{
 background:transparent!important;border:0!important;box-shadow:none!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0;
}
.page :is(.titleblock,.sechead,.tile,.glass-copy){padding:0;}
.page .row{padding:1.5rem 0;}
.page .tile:hover{transform:none;}
.page .note{margin-left:0;}
.faq details{padding:0;margin-bottom:1.5rem;}
.page .text-stacked{grid-template-columns:minmax(0,1fr);gap:2rem;}
.page .text-glass,.page .note.text-glass,.page .glass-copy.text-glass,.page .rdv-detail.text-glass{
 background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.42))!important;
 border:1px solid rgba(255,255,255,.88)!important;border-radius:24px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 28px rgba(25,48,88,.10)!important;
 backdrop-filter:blur(18px) saturate(135%)!important;-webkit-backdrop-filter:blur(18px) saturate(135%)!important;
 padding:clamp(1.4rem,3vw,2.5rem);margin-top:1.5rem;min-width:0;
 transition:box-shadow .28s ease;
}
.text-glass>p:first-child{margin-top:0!important;}
.text-glass>p+p{margin-top:1rem;}
.text-glass>.hero__actions:first-child{margin-top:0;}
.glass-body{padding-top:0;}
.glass-body>.text-glass{margin-top:1rem;}
@media(hover:hover) and (pointer:fine){.page .text-glass:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 32px rgba(25,48,88,.18),0 3px 12px rgba(58,106,214,.12)!important;}}
.page .text-glass.is-touch-shadow,.page .text-glass:focus-within{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 32px rgba(25,48,88,.18),0 3px 12px rgba(58,106,214,.12)!important;}
@media(max-width:640px){.page .text-glass{padding:1.25rem;border-radius:20px;}}
@media(prefers-reduced-motion:reduce){.page .text-glass{transition:none;}}


.page .accordion-glass{
 background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.42))!important;
 border:1px solid rgba(255,255,255,.88)!important;border-radius:24px!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 28px rgba(25,48,88,.10)!important;
 backdrop-filter:blur(18px) saturate(135%)!important;-webkit-backdrop-filter:blur(18px) saturate(135%)!important;
 padding:clamp(1.25rem,2.5vw,2rem);margin-bottom:1.2rem;
 transition:box-shadow .28s ease;
}
.page .row.accordion-glass{align-items:start;}
.page .accordion-glass .glass-disclosure>summary{min-height:3.5rem;}
.page .accordion-glass .glass-body{padding-top:1rem;}
.page .faq details.accordion-glass{padding:0 clamp(1.25rem,2.5vw,2rem);}
.page .faq details.accordion-glass>summary{padding-block:1.5rem;}
@media(hover:hover) and (pointer:fine){.page .accordion-glass:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 32px rgba(25,48,88,.18),0 3px 12px rgba(58,106,214,.12)!important;}}
.page .accordion-glass.is-touch-shadow,.page .accordion-glass:focus-within{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 32px rgba(25,48,88,.18),0 3px 12px rgba(58,106,214,.12)!important;}
@media(prefers-reduced-motion:reduce){.page .accordion-glass{transition:none;}}


.page .text-glass.centered-text-bubble{
 width:100%;max-width:48rem;box-sizing:border-box;
 margin-left:auto!important;margin-right:auto!important;text-align:center;
}
.page .centered-text-bubble > :is(p,ul,ol){margin-left:auto!important;margin-right:auto!important;text-align:center;}
.page .centered-text-bubble .hero__actions{justify-content:center;}
.page .centered-text-bubble .centered-bubble-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1.5rem;}
.page .centered-text-bubble .btn{max-width:100%;white-space:normal;justify-content:center;text-align:center;}
.page .centered-text-bubble .btn svg{flex-shrink:0;}


/* Laisser l'illustration visible à travers la bulle d'introduction.
   v12.68 · étendu au hero Conseil, v12.73 à Formation, v12.74 à
   Implémentation et Renfort IA : leur fond porte un visuel de marque. */
:is(#page-accueil,#page-conseil,#page-formation,#page-implementation,#page-renfort-ia) > .hero .titleblock .text-glass {
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}


.page .row__n.service-icon{line-height:0;align-self:start;}
.page .service-icon img{display:block;width:86px;height:86px;max-width:100%;object-fit:contain;}
@media(max-width:640px){.page .service-icon img{width:64px;height:64px;}}


#page-accueil > .hero .hero__actions{flex-direction:column;align-items:center;gap:1rem;}
#page-accueil > .hero .hero-booking{display:flex;flex-direction:column;align-items:center;gap:.65rem;max-width:100%;}
#page-accueil > .hero .hero-booking-note{font-size:.9rem;color:var(--label);line-height:1.5;}
:is(#page-accueil > .hero, #page-rendez-vous .sw-card, #page-methodologie > .hero, #page-404 > .hero) .hero-method-link{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9rem;color:var(--label);text-decoration:underline;text-underline-offset:4px;min-height:44px;text-align:center;}
:is(#page-accueil > .hero, #page-rendez-vous .sw-card, #page-methodologie > .hero, #page-404 > .hero) .hero-method-link svg{flex-shrink:0;}
:is(#page-accueil > .hero, #page-rendez-vous .sw-card, #page-methodologie > .hero, #page-404 > .hero) .hero-method-link:hover{color:var(--blue-800);}
:is(#page-accueil > .hero, #page-rendez-vous .sw-card, #page-methodologie > .hero, #page-404 > .hero) .hero-method-link:focus-visible{outline:2px solid var(--blue-800);outline-offset:4px;border-radius:4px;}
@media(max-width:640px){#page-accueil > .hero .hero-booking{width:100%;}}


/* Les héros Conseil et Formation reprennent le rythme de l'accueil, sans visuel de fond. */
:is(#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie,#page-404) > .hero{
  min-height:min(920px,100svh);
  display:flex;
  align-items:center;
}
:is(#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie,#page-404) > .hero .hero__actions{flex-direction:column;align-items:center;gap:.65rem;}
:is(#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie,#page-404) > .hero .hero-booking{display:flex;flex-direction:column;align-items:center;gap:.65rem;max-width:100%;}
:is(#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie,#page-404) > .hero .hero-booking-note{font-size:.9rem;color:var(--label);line-height:1.5;}
:is(#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) > .hero .lede{max-width:43rem;}
@media(max-width:900px){
  :is(#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie,#page-404) > .hero{min-height:auto;}
}
@media(max-width:640px){
  :is(#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie,#page-404) > .hero .hero-booking{width:100%;}
}


/* Trois principes complémentaires, toujours visibles et sans numérotation. */
#page-formation .formation-principles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);
  margin:0;
  padding:0;
  list-style:none;
}
#page-formation .formation-principle-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:clamp(1.35rem,2.4vw,1.8rem);
  border:1px solid rgba(58,106,214,.13);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(241,246,255,.9));
  box-shadow:0 8px 24px rgba(25,48,88,.08),inset 0 1px 0 rgba(255,255,255,.96);
  transition:box-shadow .28s ease,border-color .28s ease;
}
#page-formation .formation-principle-card__icon{
  display:block;
  width:92px;
  height:74px;
  margin:0 0 1rem;
  object-fit:contain;
  object-position:left center;
}
#page-formation .formation-principle-card h3{margin:0;}
#page-formation .formation-principle-card p{
  margin:.65rem 0 0;
  color:var(--label);
}
@media(hover:hover) and (pointer:fine){
  #page-formation .formation-principle-card:hover{
    border-color:rgba(58,106,214,.22);
    box-shadow:0 14px 34px rgba(25,48,88,.14),inset 0 1px 0 rgba(255,255,255,.98);
  }
}
@media(max-width:760px){
  #page-formation .formation-principles{grid-template-columns:minmax(0,1fr);}
  #page-formation .formation-principle-card{border-radius:20px;}
  #page-formation .formation-principle-card__icon{width:84px;height:68px;}
}
@media(prefers-reduced-motion:reduce){
  #page-formation .formation-principle-card{transition:none;}
}


/* Des lignes métier légères remplacent le tableau et restent lisibles sans défilement. */
#page-formation .formation-jobs{
  display:grid;
  gap:.8rem;
  margin:var(--s-6) 0;
}
#page-formation .formation-job-row{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(11rem,.72fr) minmax(18rem,1.45fr) minmax(14rem,1fr);
  gap:clamp(.85rem,1.8vw,1.35rem);
  align-items:center;
  padding:.9rem;
  border:1px solid rgba(58,106,214,.11);
  border-radius:18px;
  background:rgba(255,255,255,.7);
  box-shadow:0 5px 16px rgba(25,48,88,.045);
  transition:box-shadow .25s ease,border-color .25s ease;
}
#page-formation .formation-job-row__identity{
  min-width:0;
  display:flex;
  align-items:center;
  gap:.65rem;
}
#page-formation .formation-job-row__icon{
  flex:0 0 2.35rem;
  width:2.35rem;
  height:2.35rem;
  display:grid;
  place-items:center;
  color:var(--blue-700);
}
#page-formation .formation-job-row__icon svg{
  width:1.65rem;
  height:1.65rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#page-formation .formation-job-row__badge{
  display:inline-flex;
  align-items:center;
  min-height:2.15rem;
  padding:.42rem .78rem;
  border:1px solid rgba(58,106,214,.12);
  border-radius:999px;
  background:rgba(224,235,255,.74);
  color:var(--blue-800);
  font-weight:750;
  line-height:1.2;
}
#page-formation .formation-job-row__examples,
#page-formation .formation-job-row__attention{min-width:0;}
#page-formation .formation-job-row__label{
  display:block;
  margin:0 0 .25rem;
  color:var(--blue-700);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.07em;
  line-height:1.35;
  text-transform:uppercase;
}
#page-formation .formation-job-row p{
  margin:0;
  color:var(--label);
  overflow-wrap:anywhere;
}
#page-formation .formation-job-row__attention{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:.8rem .95rem;
  border-radius:14px;
  background:rgba(234,241,255,.72);
}
@media(hover:hover) and (pointer:fine){
  #page-formation .formation-job-row:hover{
    border-color:rgba(58,106,214,.18);
    box-shadow:0 9px 24px rgba(25,48,88,.085);
  }
}
@media(max-width:800px){
  #page-formation .formation-job-row{
    grid-template-columns:minmax(0,1fr);
    gap:.85rem;
    padding:1rem;
  }
  #page-formation .formation-job-row__examples{padding:0 .15rem;}
  #page-formation .formation-job-row__attention{padding:.85rem .9rem;}
}
@media(prefers-reduced-motion:reduce){
  #page-formation .formation-job-row{transition:none;}
}


/* Un rappel réglementaire compact, cohérent avec l'encart de l'accueil. */
#page-formation .formation-compliance-section{
  padding-block:clamp(2.5rem,5vw,4.5rem);
  background:var(--bg);
}
#page-formation .formation-compliance{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  align-items:center;
  gap:clamp(1.1rem,2.5vw,2rem);
  padding:clamp(1.2rem,2.5vw,1.75rem);
  border:1px solid rgba(58,106,214,.10);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(226,237,255,.9),rgba(243,247,255,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 10px 26px rgba(25,48,88,.07);
}
#page-formation .formation-compliance__icon{
  width:76px;
  height:76px;
  line-height:0;
}
#page-formation .formation-compliance__icon img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:contain;
}
#page-formation .formation-compliance__content{min-width:0;}
#page-formation .formation-compliance h2{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.75rem,3vw,2.65rem);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.035em;
}
#page-formation .formation-compliance p{
  max-width:64rem;
  margin:.75rem 0 0;
  color:var(--label);
}
@media(max-width:640px){
  #page-formation .formation-compliance{
    grid-template-columns:58px minmax(0,1fr);
    gap:.9rem;
    padding:1rem;
    border-radius:18px;
  }
  #page-formation .formation-compliance__icon{width:58px;height:58px;}
}


/* Les quatre axes sont des dimensions observées ensemble, pas une suite d'étapes. */
#page-conseil .analysis-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);
  margin:0;
  padding:0;
  list-style:none;
}
#page-conseil .analysis-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:clamp(1.4rem,2.6vw,2rem);
  border:1px solid rgba(58,106,214,.13);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(241,246,255,.88));
  box-shadow:0 8px 24px rgba(25,48,88,.08),inset 0 1px 0 rgba(255,255,255,.96);
  transition:box-shadow .28s ease,border-color .28s ease;
}
#page-conseil .analysis-card__icon{
  display:block;
  width:74px;
  height:74px;
  margin:0 0 1rem;
  object-fit:contain;
}
#page-conseil .analysis-card h3{margin:0;}
#page-conseil .analysis-card p{
  margin:.65rem 0 0;
  color:var(--label);
  max-width:52ch;
}
@media(hover:hover) and (pointer:fine){
  #page-conseil .analysis-card:hover{
    border-color:rgba(58,106,214,.22);
    box-shadow:0 14px 34px rgba(25,48,88,.13),inset 0 1px 0 rgba(255,255,255,.98);
  }
}
@media(max-width:700px){
  #page-conseil .analysis-cards{grid-template-columns:minmax(0,1fr);}
  #page-conseil .analysis-card{border-radius:20px;}
  #page-conseil .analysis-card__icon{width:64px;height:64px;}
}
@media(prefers-reduced-motion:reduce){
  #page-conseil .analysis-card{transition:none;}
}


/* Lire l'existant comme un ensemble à préserver avant toute recommandation. */
#page-conseil .existing-systems__layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
  align-items:center;
  gap:clamp(2rem,5vw,5rem);
}
#page-conseil .existing-systems__intro .sechead{margin-bottom:1.25rem;}
#page-conseil .existing-systems__intro .lede{margin:0;max-width:61ch;}
#page-conseil .existing-map{
  position:relative;
  min-width:0;
  margin:0;
  padding:clamp(1.35rem,3vw,2rem);
  border:1px solid rgba(58,106,214,.13);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(235,243,255,.92));
  box-shadow:0 16px 42px rgba(25,48,88,.10),inset 0 1px 0 rgba(255,255,255,.98);
  overflow:hidden;
}
#page-conseil .existing-map::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-76px;
  top:-84px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(95,162,255,.16),rgba(95,162,255,0) 70%);
  pointer-events:none;
}
#page-conseil .existing-map__modules{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr) 58px minmax(0,1fr);
  align-items:center;
  gap:.35rem;
}
#page-conseil .existing-module{
  min-width:0;
  min-height:136px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:1rem .75rem;
  border:1px solid rgba(58,106,214,.15);
  border-radius:20px;
  background:rgba(255,255,255,.8);
  text-align:center;
  box-shadow:0 8px 20px rgba(25,48,88,.06);
}
#page-conseil .existing-module--focus{
  border-color:rgba(36,96,221,.34);
  background:linear-gradient(145deg,rgba(230,240,255,.98),rgba(255,255,255,.92));
  box-shadow:0 12px 28px rgba(36,96,221,.14);
}
#page-conseil .existing-module__glyph{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-radius:12px;
  background:rgba(44,101,224,.1);
  color:var(--blue-800);
}
#page-conseil .existing-module__glyph--tools i{
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 3px rgba(44,101,224,.08);
}
#page-conseil .existing-module__glyph--data{flex-direction:column;gap:3px;}
#page-conseil .existing-module__glyph--data i{
  display:block;
  width:22px;
  height:4px;
  border-radius:99px;
  background:currentColor;
}
#page-conseil .existing-module__title{
  color:var(--ink);
  font-weight:750;
  line-height:1.25;
}
#page-conseil .existing-module__state{
  color:var(--label);
  font-size:.78rem;
  line-height:1.25;
}
#page-conseil .existing-module--focus .existing-module__state{color:var(--blue-800);font-weight:700;}
#page-conseil .existing-map__arrow{
  display:block;
  width:100%;
  height:42px;
  object-fit:contain;
  opacity:.82;
}
#page-conseil .existing-map__arrow--curve{height:50px;}
#page-conseil .existing-module__cycle{
  width:42px;
  height:42px;
  object-fit:contain;
}
#page-conseil .existing-map__principle{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.55rem;
  margin:1.25rem 0 0;
  padding-top:1rem;
  border-top:1px solid rgba(58,106,214,.12);
  color:var(--label);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.015em;
  text-align:center;
}
#page-conseil .existing-map__principle b{color:var(--blue-800);}
#page-conseil .existing-map__principle .step-arrow{color:var(--blue-600);font-size:1.05rem;}
#page-conseil .existing-systems__details{margin-top:clamp(2rem,4vw,3.5rem);}
#page-conseil .conseil-method-card{
  display:grid;
  grid-template-columns:68px minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(1rem,2vw,1.5rem);
  margin:0 0 clamp(1.5rem,3vw,2.25rem);
  padding:clamp(1rem,2vw,1.35rem) clamp(1.1rem,2.5vw,1.65rem);
  border:1px solid rgba(58,106,214,.14);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(231,241,255,.98),rgba(244,248,255,.96));
  box-shadow:0 10px 28px rgba(25,48,88,.08),inset 0 1px 0 rgba(255,255,255,.85);
}
#page-conseil .conseil-method-card__visual{
  position:relative;
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
}
#page-conseil .conseil-method-card__icon{
  display:block;
  width:58px;
  height:58px;
  object-fit:contain;
}
#page-conseil .conseil-method-card__loupe{
  position:absolute;
  right:0;
  bottom:2px;
  width:21px;
  height:21px;
  border:3px solid var(--blue-700);
  border-radius:50%;
  background:rgba(241,247,255,.98);
  box-shadow:0 2px 7px rgba(36,96,221,.16);
}
#page-conseil .conseil-method-card__loupe::after{
  content:"";
  position:absolute;
  width:9px;
  height:3px;
  right:-7px;
  bottom:-4px;
  border-radius:99px;
  background:var(--blue-700);
  transform:rotate(45deg);
  transform-origin:left center;
}
#page-conseil .conseil-method-card__content{min-width:0;}
#page-conseil .conseil-method-card h3{
  margin:0 0 .35rem;
  font-family:var(--sans);
  font-size:clamp(1rem,1.5vw,1.14rem);
  line-height:1.3;
  color:var(--ink);
}
#page-conseil .conseil-method-card p{
  margin:0;
  max-width:66ch;
  color:var(--label);
  font-size:.91rem;
  line-height:1.55;
}
#page-conseil .conseil-method-card__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:44px;
  color:var(--blue-800);
  font-size:.88rem;
  font-weight:750;
  line-height:1.35;
  text-decoration:none;
  text-align:center;
  white-space:nowrap;
}
#page-conseil .conseil-method-card__link:hover{text-decoration:underline;text-underline-offset:4px;}
#page-conseil .conseil-method-card__link:focus-visible{outline:2px solid var(--blue-800);outline-offset:4px;border-radius:5px;}
#page-conseil .diagnostic-visual{
  --diagnostic-marker-image:url("img/img-a8303e2241.webp");
}
#page-conseil .diagnostic-visual__intro{
  margin:0 0 1rem;
  color:var(--label);
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.01em;
}
#page-conseil .diagnostic-list{
  display:grid;
  gap:.8rem;
  margin:0;
  padding:0;
  list-style:none;
}
#page-conseil .diagnostic-row{
  display:grid;
  grid-template-columns:42px minmax(0,.88fr) 72px minmax(0,1.15fr);
  align-items:stretch;
  gap:.75rem;
}
#page-conseil .diagnostic-marker{
  align-self:center;
  width:34px;
  height:34px;
  background-image:var(--diagnostic-marker-image);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
#page-conseil .diagnostic-zone{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.28rem;
  min-height:82px;
  padding:.9rem 1.1rem;
  border:1px solid rgba(58,106,214,.11);
  border-radius:17px;
}
#page-conseil .diagnostic-zone--symptom{
  background:linear-gradient(145deg,rgba(238,241,246,.96),rgba(247,249,252,.96));
}
#page-conseil .diagnostic-zone--analysis{
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(235,243,255,.92));
  box-shadow:0 7px 20px rgba(25,48,88,.06);
}
#page-conseil .diagnostic-zone__label{
  color:var(--label);
  font-size:.7rem;
  font-weight:750;
  letter-spacing:.08em;
  line-height:1.2;
  text-transform:uppercase;
}
#page-conseil .diagnostic-zone strong{
  color:var(--ink);
  font-size:clamp(.94rem,1.25vw,1.04rem);
  line-height:1.4;
}
#page-conseil .diagnostic-zone--analysis strong{color:var(--blue-800);}
#page-conseil .diagnostic-connector{
  position:relative;
  align-self:center;
  height:2px;
  background:linear-gradient(90deg,rgba(58,106,214,.28),var(--blue-600));
}
#page-conseil .diagnostic-connector::before{
  content:"";
  position:absolute;
  left:-1px;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue-600);
  transform:translateY(-50%);
}
#page-conseil .diagnostic-connector::after{
  content:"";
  position:absolute;
  right:-1px;
  top:50%;
  width:8px;
  height:8px;
  border-top:2px solid var(--blue-600);
  border-right:2px solid var(--blue-600);
  transform:translateY(-50%) rotate(45deg);
}
@media(max-width:980px){
  #page-conseil .existing-systems__layout{grid-template-columns:minmax(0,1fr);}
  #page-conseil .existing-map{width:100%;max-width:680px;margin-inline:auto;}
}
@media(max-width:620px){
  #page-conseil .existing-map{padding:1rem;border-radius:22px;}
  #page-conseil .existing-map__modules{
    grid-template-columns:minmax(0,1fr);
    gap:.4rem;
  }
  #page-conseil .existing-module{min-height:108px;border-radius:17px;}
  #page-conseil .existing-map__arrow{width:42px;height:34px;margin:auto;transform:rotate(90deg);}
  #page-conseil .existing-map__arrow--curve{width:46px;height:38px;transform:rotate(115deg);}
  #page-conseil .existing-map__principle{font-size:.76rem;gap:.4rem;}
  #page-conseil .conseil-method-card{
    grid-template-columns:58px minmax(0,1fr);
    gap:.85rem 1rem;
    border-radius:19px;
  }
  #page-conseil .conseil-method-card__visual{width:58px;height:58px;}
  #page-conseil .conseil-method-card__icon{width:50px;height:50px;}
  #page-conseil .conseil-method-card__loupe{width:18px;height:18px;border-width:2px;}
  #page-conseil .conseil-method-card__link{
    grid-column:2;
    justify-content:flex-start;
    white-space:normal;
    text-align:left;
  }
  #page-conseil .diagnostic-visual__intro{margin-bottom:.85rem;}
  #page-conseil .diagnostic-list{gap:1rem;}
  #page-conseil .diagnostic-row{
    grid-template-columns:34px minmax(0,1fr);
    gap:.45rem .7rem;
  }
  #page-conseil .diagnostic-marker{width:28px;height:28px;align-self:start;margin-top:.7rem;}
  #page-conseil .diagnostic-zone{min-height:auto;padding:.82rem .95rem;border-radius:15px;}
  #page-conseil .diagnostic-zone--symptom{grid-column:2;}
  #page-conseil .diagnostic-connector{
    grid-column:2;
    width:2px;
    height:25px;
    margin-left:1.15rem;
    background:linear-gradient(180deg,rgba(58,106,214,.28),var(--blue-600));
  }
  #page-conseil .diagnostic-connector::before{left:50%;top:-1px;transform:translateX(-50%);}
  #page-conseil .diagnostic-connector::after{
    left:50%;
    right:auto;
    top:auto;
    bottom:-1px;
    transform:translateX(-50%) rotate(135deg);
  }
  #page-conseil .diagnostic-zone--analysis{grid-column:2;}
}


/* =====================================================================
   v12.36 · ENJEUX — trois situations en blocs compacts
   Règle générale : tout élément « .situation » ajouté plus tard hérite de
   ce traitement, pictogramme compris. Surface blanche détachée par l'ombre,
   aucune bordure. Pictogramme au bleu du système, taille réduite pour rester
   sous les grandes icônes en verre des quatre expertises.
   ===================================================================== */
#page-accueil .situations{
  display:grid; grid-template-columns:1fr;
  gap:clamp(.85rem, 2vw, 1.5rem);
  margin:0; padding:0; list-style:none;
}
#page-accueil .situation{
  display:flex; flex-direction:column; align-items:flex-start; gap:.7rem;
  margin:0; padding:clamp(1.25rem, 2.4vw, 1.75rem);
  border-radius:20px; background:var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px rgba(25,48,88,.09);
}
#page-accueil .situation__picto{color:var(--blue-700); flex:none;}
/* RÈGLE — aucune taille de police définie ici, jamais.
   Le titre et le paragraphe prennent l'échelle typographique globale de la
   page : mêmes corps, mêmes interlignes, mêmes couleurs que partout ailleurs.
   Seules les marges sont neutralisées, parce qu'elles relèvent de la mise en
   page du bloc et non de la typographie. Une taille ad hoc introduite ici
   ferait dériver la page. */
#page-accueil .situation h3{margin:0;}
/* La couleur, elle, suit le rôle du texte : toutes les descriptions de la page
   — .row, .faq, .lede — sont en --label. Aucune valeur nouvelle. */
#page-accueil .situation p{margin:0; color:var(--label);}
/* Trois colonnes seulement quand la largeur les rend lisibles à l'échelle
   typographique de la page. En dessous, une colonne pleine largeur. */
@media(min-width:1000px){
  #page-accueil .situations{grid-template-columns:repeat(3, 1fr);}
}
@media(hover:hover) and (pointer:fine){
  #page-accueil .situation{transition:box-shadow .28s ease;}
  #page-accueil .situation:hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 16px 34px rgba(25,48,88,.14);
  }
}
@media(prefers-reduced-motion:reduce){
  #page-accueil .situation{transition:none;}
}


/* =====================================================================
   v12.38 · ACCOMPAGNEMENT — les quatre expertises en grille de cartes
   Deux par ligne à partir de 760 px, une colonne en dessous. Chaque carte
   montre son icône, son nom, sa phrase et son lien sans aucune interaction.
   RÈGLE — aucune taille de police définie ici : titre, paragraphe et lien
   reprennent l'échelle typographique globale de la page. Le lien conserve la
   classe .row__link du site, donc son corps, sa couleur et son animation de
   flèche restent ceux de tous les autres liens éditoriaux.
   Règle générale : tout .expertise ajouté plus tard hérite du traitement.
   ===================================================================== */
#page-accueil .expertises{
  display:grid; grid-template-columns:1fr;
  gap:clamp(1rem, 2vw, 1.5rem);
  margin:0; padding:0; list-style:none;
}
@media(min-width:760px){
  #page-accueil .expertises{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
/* La carte est une colonne : l'espace libre se loge au-dessus du lien, donc
   les liens s'alignent en bas quelle que soit la longueur du texte. */
#page-accueil .expertise{
  display:flex; flex-direction:column; align-items:flex-start;
  margin:0; padding:clamp(1.5rem, 2.8vw, 2.1rem);
  border-radius:22px; background:var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 12px 30px rgba(25,48,88,.10);
}
#page-accueil .expertise__icon{line-height:0; margin-bottom:var(--s-4);}
#page-accueil .expertise h3{margin:0 0 var(--s-3);}
/* La couleur suit le rôle du texte : description secondaire, donc --label,
   comme toutes les descriptions de la page. Aucune valeur nouvelle. */
#page-accueil .expertise p{margin:0; color:var(--label);}
#page-accueil .expertise__link{margin-top:auto; padding-top:var(--s-4);}
/* Survol : l'ombre se renforce, rien ne bouge. */
@media(hover:hover) and (pointer:fine){
  #page-accueil .expertise{transition:box-shadow .28s ease;}
  #page-accueil .expertise:hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 20px 42px rgba(25,48,88,.16);
  }
}
@media(prefers-reduced-motion:reduce){
  #page-accueil .expertise{transition:none;}
}


/* v12.39 · Une pause rassurante et compacte entre les expertises et la FAQ. */
#page-accueil .home-compliance-section{padding-block:clamp(2.5rem,5vw,4.5rem);}
#page-accueil .home-compliance{
  display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;
  gap:clamp(1.25rem,3vw,2.5rem);padding:clamp(1.4rem,3vw,2.2rem);
  border:1px solid rgba(58,106,214,.10);border-radius:24px;
  background:linear-gradient(135deg,rgba(226,237,255,.92),rgba(242,247,255,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 30px rgba(25,48,88,.08);
}
#page-accueil .home-compliance__icon{
  width:88px;height:88px;line-height:0;
}
#page-accueil .home-compliance__icon img{
  display:block;width:100%;height:100%;max-width:100%;object-fit:contain;
}
#page-accueil .home-compliance__content{min-width:0;}
#page-accueil .home-compliance .eyebrow{margin-bottom:.85rem;}
#page-accueil .home-compliance h2{
  margin:0;font-family:var(--font-display);font-size:clamp(2rem,3.5vw,3.25rem);
  font-weight:400;line-height:1.02;letter-spacing:-.04em;
}
#page-accueil .home-compliance p{max-width:62rem;margin:1rem 0 1.15rem;color:var(--label);}
#page-accueil .home-compliance .row__link{display:inline-flex;align-items:center;gap:.45rem;}
@media(hover:hover) and (pointer:fine){
  #page-accueil .home-compliance{transition:box-shadow .28s ease;}
  #page-accueil .home-compliance:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 16px 36px rgba(25,48,88,.13);}
}
@media(max-width:700px){
  #page-accueil .home-compliance{grid-template-columns:1fr;gap:1rem;padding:1.25rem;}
  #page-accueil .home-compliance__icon{width:68px;height:68px;}
  #page-accueil .home-compliance__icon img{width:100%;height:100%;}
}
@media(prefers-reduced-motion:reduce){#page-accueil .home-compliance{transition:none;}}


/* v12.41 · FAQ contrôlée uniquement par clic, toucher ou clavier. */
#page-accueil .faq{width:100%;max-width:52rem;margin:var(--s-8) auto 0;}
#page-accueil .faq summary{color:var(--navy);}
#page-accueil .faq .faq__question{color:inherit;font-style:normal;}
#page-accueil .faq summary svg{
  width:2rem;height:2rem;margin-top:0;padding:.38rem;box-sizing:border-box;
  border-radius:50%;background:rgba(58,106,214,.10);color:var(--blue-700);
}
#page-accueil .faq details[open]{
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(235,242,255,.78))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 14px 34px rgba(25,48,88,.18)!important;
}
#page-accueil .faq details[open] summary{color:#080B12;font-weight:600;}
#page-accueil .faq details[open] summary svg{background:rgba(58,106,214,.16);}
#page-accueil .faq summary:focus-visible{outline:2px solid var(--blue-700);outline-offset:4px;border-radius:8px;}


/* v12.42 · Conclusion visuelle nette centrée sur une seule action. */
:is(#page-accueil,#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-cgv,#page-confidentialite,#page-cookies,#page-methodologie) .home-final-cta{
  padding-block:clamp(5.5rem,10vw,9rem);
  background:linear-gradient(135deg,rgba(218,232,255,.98),rgba(232,241,255,.94));
  text-align:center;
}
:is(#page-accueil,#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-cgv,#page-confidentialite,#page-cookies,#page-methodologie) .home-final-cta .wrap{display:flex;flex-direction:column;align-items:center;}
:is(#page-accueil,#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-cgv,#page-confidentialite,#page-cookies,#page-methodologie) .home-final-cta h2{
  max-width:22ch;margin:var(--s-6) auto var(--s-6);
  font-family:var(--font-display);font-weight:400;
}
:is(#page-accueil,#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-cgv,#page-confidentialite,#page-cookies,#page-methodologie) .home-final-cta .lede{
  max-width:52rem;margin:0 auto var(--s-8);text-align:center;
}
:is(#page-accueil,#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-cgv,#page-confidentialite,#page-cookies,#page-methodologie) .home-final-booking{display:flex;flex-direction:column;align-items:center;gap:.7rem;max-width:100%;}
:is(#page-accueil,#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-cgv,#page-confidentialite,#page-cookies,#page-methodologie) .home-final-note{font-size:.9rem;line-height:1.5;color:var(--label);}
@media(max-width:640px){
  :is(#page-accueil,#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-cgv,#page-confidentialite,#page-cookies,#page-methodologie) .home-final-cta{padding-block:4.5rem;}
  :is(#page-accueil,#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-cgv,#page-confidentialite,#page-cookies,#page-methodologie) .home-final-cta .lede br{display:none;}
  :is(#page-accueil,#page-conseil,#page-formation,#page-implementation,#page-renfort-ia,#page-agence,#page-rendez-vous,#page-cgv,#page-confidentialite,#page-cookies,#page-methodologie) .home-final-booking{width:100%;}
}


/* =====================================================================
   v12.61 · PAGE IMPLÉMENTATION — architecture en blocs, livraison en parcours
   Vocabulaire visuel de la page : des modules qui se connectent. Blocs
   fonctionnels, connecteurs bleus, point de contrôle central, résultats.
   RÈGLE — aucune taille de police définie ici : titres, paragraphes et
   libellés reprennent l'échelle globale (h3, p, .small, .lede). Le style
   des cartes reprend celui des cartes Conseil et Formation.
   ===================================================================== */

/* ---------- Architecture : trois zones reliées ---------- */
#page-implementation .arch{
  position:relative; isolation:isolate; margin:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 56px minmax(0,1.15fr) 56px minmax(0,1fr);
  grid-template-areas:
    "sources in core out results"
    "caption caption caption caption caption";
  align-items:center;
  gap:clamp(.75rem,1.6vw,1.25rem);
  padding:clamp(1.4rem,3vw,2.25rem);
  border:1px solid rgba(58,106,214,.13);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(235,243,255,.92));
  box-shadow:0 16px 42px rgba(25,48,88,.10),inset 0 1px 0 rgba(255,255,255,.98);
  overflow:hidden;
}
#page-implementation .arch__zone--sources{grid-area:sources;}
#page-implementation .arch__link--in{grid-area:in;}
#page-implementation .arch__core{grid-area:core;}
#page-implementation .arch__link--out{grid-area:out;}
#page-implementation .arch__zone--results{grid-area:results;}
#page-implementation .arch__caption{
  grid-area:caption; margin:1.25rem 0 0; padding-top:1rem;
  border-top:1px solid rgba(58,106,214,.12); text-align:center;
}
#page-implementation .arch__zone{min-width:0; align-self:stretch; display:grid; grid-template-rows:auto 1fr;}
#page-implementation .arch__zone .arch__modules{align-self:center;}
#page-implementation .arch__zone-name{
  margin:0 0 .6rem; text-align:center; color:var(--blue-800); font-weight:700;
}
#page-implementation .arch__modules{list-style:none; margin:0; padding:0; display:grid; gap:.5rem;}
#page-implementation .arch__module{
  min-width:0; display:flex; align-items:center; gap:.6rem;
  padding:.7rem .9rem;
  border:1px solid rgba(58,106,214,.18); border-radius:14px;
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 16px rgba(25,48,88,.05);
  color:var(--ink); font-weight:700; line-height:1.25;
}
#page-implementation .arch__module svg{flex:none; color:var(--blue-700);}
#page-implementation .arch__link{
  display:flex; align-items:center; justify-content:center; color:var(--blue-600);
}
/* Le socle : un bloc plus grand, bleu pâle, entouré d'un halo léger.
   Le halo est un pseudo-élément en z-index négatif dans le contexte isolé
   de .arch : il passe derrière le socle, jamais au-dessus du texte. */
#page-implementation .arch__core{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem;
  padding:clamp(1.4rem,2.6vw,2rem) clamp(1rem,2vw,1.5rem);
  border:1px solid rgba(36,96,221,.30); border-radius:22px;
  background:linear-gradient(145deg,rgba(226,237,255,.98),rgba(240,246,255,.95));
  box-shadow:0 12px 30px rgba(36,96,221,.14),inset 0 1px 0 rgba(255,255,255,.95);
}
#page-implementation .arch__core::before{
  content:""; position:absolute; inset:-30px; z-index:-1; border-radius:40px;
  background:radial-gradient(circle,rgba(95,162,255,.24),rgba(95,162,255,0) 70%);
  pointer-events:none;
}
#page-implementation .arch__core-picto{color:var(--blue-800);}
#page-implementation .arch__core-title{margin:.2rem 0 0;}
#page-implementation .arch__core-sub{margin:0; color:var(--blue-800);}

/* Apparition : une seule séquence d'environ une seconde, jouée une fois
   quand le schéma entre à l'écran — sources, connecteurs, socle, résultats.
   Sans JavaScript (pas de classe .js), tout est visible d'emblée. */
.js #page-implementation .arch.reveal :is(.arch__zone--sources,.arch__link,.arch__core,.arch__zone--results){opacity:0;}
.js #page-implementation .arch.reveal.is-in .arch__zone--sources{animation:arch-in .4s ease 0s forwards;}
.js #page-implementation .arch.reveal.is-in .arch__link{animation:arch-in .4s ease .25s forwards;}
.js #page-implementation .arch.reveal.is-in .arch__core{animation:arch-in .45s ease .45s forwards;}
.js #page-implementation .arch.reveal.is-in .arch__zone--results{animation:arch-in .4s ease .7s forwards;}
@keyframes arch-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  #page-implementation .arch{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"sources" "in" "core" "out" "results" "caption";
    padding:1.25rem; border-radius:22px; gap:.6rem;
  }
  #page-implementation .arch__link{height:56px;}
  #page-implementation .arch__link svg{transform:rotate(90deg);}
  #page-implementation .arch__zone--sources .arch__modules{grid-template-columns:repeat(2,minmax(0,1fr));}
  #page-implementation .arch__core::before{inset:-16px;}
}

/* ---------- Livraison : quatre étapes visibles ---------- */
#page-implementation .delivery-steps{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem) clamp(2rem,4vw,3.5rem);
  margin:0; padding:0; list-style:none;
}
#page-implementation .delivery-step{
  position:relative; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(1.4rem,2.6vw,2rem);
  border:1px solid rgba(58,106,214,.13); border-radius:24px;
  background:var(--surface);
  box-shadow:0 8px 24px rgba(25,48,88,.08),inset 0 1px 0 rgba(255,255,255,.96);
  transition:box-shadow .28s ease,border-color .28s ease;
}
/* v12.65 · Même finesse, même taille et même bleu que les pictogrammes de
   référence (Conseil, Formation) et que ceux de Renfort IA et Agence :
   trait 1,15 sur 24 unités, 64 px, #3467D9 [HORS DA : couleur relevée sur
   les visuels validés, pas un token]. */
#page-implementation .delivery-step__picto{color:#3467D9; margin:0 0 1rem;}
#page-implementation .delivery-step h3{margin:0;}
#page-implementation .delivery-step p{margin:.65rem 0 0; color:var(--label);}
/* Connecteur léger entre les deux cartes d'une même ligne : sa largeur est
   exactement celle de l'écart de colonne, il touche donc les deux cartes. */
#page-implementation .delivery-step:nth-child(odd)::after{
  content:""; position:absolute; top:50%; left:100%;
  width:clamp(2rem,4vw,3.5rem); height:0;
  border-top:2px dashed rgba(58,106,214,.38);
  transform:translateY(-50%);
}
@media(hover:hover) and (pointer:fine){
  #page-implementation .delivery-step:hover{
    border-color:rgba(58,106,214,.22);
    box-shadow:0 14px 34px rgba(25,48,88,.13),inset 0 1px 0 rgba(255,255,255,.98);
  }
}
@media(max-width:760px){
  #page-implementation .delivery-steps{grid-template-columns:minmax(0,1fr);}
  #page-implementation .delivery-step{border-radius:20px;}
  #page-implementation .delivery-step::after{display:none;}
}
@media(prefers-reduced-motion:reduce){
  #page-implementation .delivery-step{transition:none;}
  .js #page-implementation .arch.reveal :is(.arch__zone--sources,.arch__link,.arch__core,.arch__zone--results){opacity:1; animation:none;}
}


/* =====================================================================
   v12.63 · CARTES COMMUNES .sw-card — Renfort IA, Agence, Réservation
   Même système que les cartes Conseil, Formation et Implémentation : titre,
   texte et pictogramme toujours visibles, hors accordéon. Une grille, deux
   comptages (--cols), un seul style de carte, un modificateur en ligne pour
   les principes compacts. RÈGLE — aucune taille de police définie ici.
   ===================================================================== */
:is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-cards{
  display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem); margin:0; padding:0; list-style:none;
}
:is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-cards--2{--cols:2;}
:is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-card{
  min-width:0; display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(1.35rem,2.4vw,1.8rem);
  border:1px solid rgba(58,106,214,.13); border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(241,246,255,.9));
  box-shadow:0 8px 24px rgba(25,48,88,.08),inset 0 1px 0 rgba(255,255,255,.96);
  transition:box-shadow .28s ease,border-color .28s ease;
}
/* Pictogrammes : même taille apparente, même finesse de trait et même bleu que
   les pictogrammes PNG des pages Conseil et Formation. Couleur relevée sur ces
   fichiers (#3467D9) — [HORS DA : valeur constatée sur des visuels validés,
   pas un token de tokens.css]. Trait 1,15 sur 24 unités, affiché à 64 px (52 px en carte compacte). */
:is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-card__picto{flex:none; color:#3467D9; margin:0 0 1rem;}
:is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-card h3{margin:0;}
:is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-card p{margin:.65rem 0 0; color:var(--label);}
:is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-card .role{margin:0 0 .5rem;}
:is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-card .portrait{margin-bottom:1rem;}
/* Deux facettes par carte de mode : quand l'utiliser, ce que vous obtenez. */
:is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-card__facets{margin:.85rem 0 0; display:grid; gap:.75rem;}
:is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-card__facets dt{margin:0 0 .15rem; color:var(--blue-800); font-weight:700;}
:is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-card__facets dd{margin:0; color:var(--label);}
/* Principe compact : pictogramme à gauche, texte à droite. */
:is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-card--row{flex-direction:row; align-items:flex-start; gap:1rem;}
:is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-card--row .sw-card__picto{margin:0;}
:is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-card--row > div{min-width:0;}
/* v12.66 · La note tient sur une seule ligne tant que la largeur le permet :
   elle n'hérite plus du max-width de 62ch appliqué aux paragraphes de corps.
   Elle se replie naturellement sur les écrans étroits. */
:is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-note{margin:1.5rem auto 0; max-width:none; text-align:center; text-wrap:balance;}
@media(hover:hover) and (pointer:fine){
  :is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-card:hover{
    border-color:rgba(58,106,214,.22);
    box-shadow:0 14px 34px rgba(25,48,88,.13),inset 0 1px 0 rgba(255,255,255,.98);
  }
}
@media(max-width:760px){
  :is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-cards{grid-template-columns:minmax(0,1fr);}
  :is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-card{border-radius:20px;}
}
@media(prefers-reduced-motion:reduce){
  :is(#page-renfort-ia,#page-agence,#page-rendez-vous,#page-methodologie) .sw-card{transition:none;}
}


/* =====================================================================
   v12.76 · VISUELS DE HERO — Conseil, Formation, Implémentation, Renfort IA
   Un visuel de marque en fond de hero, centré. Depuis la v12.76 il est
   calé sur le contenu et non sur la section : il commence juste sous
   l'étiquette et s'arrête juste au-dessus du bouton, quelle que soit la
   longueur du titre et du chapô. Sa hauteur est imposée par cette zone, sa
   largeur découle du rapport de forme de l'image — jamais d'écrasement.
   Sur mobile la largeur est plafonnée à l'écran et l'image se centre dans
   la zone. Géométrie et intensité communes ; seuls l'image et son
   rapport de forme changent d'une page à l'autre. Un troisième hero se
   branche en ajoutant son sélecteur aux deux listes et trois lignes.
   Le halo générique est neutralisé sur ces pages : le visuel devient le
   seul motif de fond, et l'écran ne porte plus qu'un dégradé, celui de la
   seconde ligne de titre.
   Chaque visuel est recadré, redimensionné à 760 px et encodé en WebP :
   moins de 90 ko contre 1,4 Mo pour le PNG d'origine, pour un rendu
   identique à cette opacité. Aucune requête externe.
   Intensité : 22 %, 19 % sous 900 px. Contraste du chapô mesuré 10,6:1.
   Une seule valeur à changer ici pour la régler.
   isolation : sans contexte d'empilement, un z-index négatif passe derrière
   le fond opaque du body et devient invisible — c'est ce qui rendait aussi
   le halo générique inopérant.
   ===================================================================== */
:is(#page-conseil,#page-formation,#page-implementation,#page-renfort-ia) > .hero{isolation:isolate;}
:is(#page-conseil,#page-formation,#page-implementation,#page-renfort-ia) > .hero::before{display:none;}
/* Textes posés sur le visuel : encre pleine plutôt que le gris des
   descriptions, seul moyen de tenir le contraste. --ink est un token
   existant, aucune valeur nouvelle. */
:is(#page-conseil,#page-formation,#page-implementation,#page-renfort-ia) > .hero :is(.lede,.hero-booking-note){color:var(--ink);}
:is(#page-conseil,#page-formation,#page-implementation,#page-renfort-ia) .hero-visual-zone{
  position:relative; isolation:isolate;
}
/* La bulle (transparente) qui enveloppe le bouton n'ajoute plus d'espace
   au-dessus : la marge de 2 rem de .hero__actions suffit, et le calage du
   visuel sur le bouton devient exact, avec ou sans JavaScript. */
:is(#page-conseil,#page-formation,#page-implementation,#page-renfort-ia) .hero-visual-zone + .text-glass{padding-top:0!important;}
:is(#page-conseil,#page-formation,#page-implementation,#page-renfort-ia) .hero-visual-zone::before{
  content:"";
  position:absolute; z-index:-1; pointer-events:none;
  /* du bas de l'étiquette au haut du bouton, avec .5 rem d'air de chaque
     côté : l'étiquette a 1,8 rem de marge basse, le bouton 2 rem de marge
     haute. Les visuels sont recadrés au corps solide (marge de 3 %), donc
     les bords de la boîte sont ceux de l'objet visible. */
  top:-1.3rem; bottom:calc(-1 * var(--s-8) + 1rem);
  left:50%; transform:translateX(-50%);
  width:auto; height:auto;
  background-position:center; background-size:contain; background-repeat:no-repeat;
  opacity:.22;
}
#page-conseil .hero-visual-zone::before{
  aspect-ratio:760/768;
  background-image:url("img/img-8ce280fd71.webp");
}
#page-formation .hero-visual-zone::before{
  aspect-ratio:760/536;
  background-image:url("img/img-c7d557708b.webp");
}
#page-implementation .hero-visual-zone::before{
  aspect-ratio:760/768;
  background-image:url("img/img-7c97e3c2e5.webp");
}
#page-renfort-ia .hero-visual-zone::before{
  aspect-ratio:760/657;
  background-image:url("img/img-5e171d04ef.webp");
}
@media(max-width:900px){
  /* Sur écran étroit la zone de texte est haute et étroite : imposer la
     hauteur donnerait une image plus large que l'écran. On plafonne la
     largeur et on centre l'image dans la zone. */
  :is(#page-conseil,#page-formation,#page-implementation,#page-renfort-ia) .hero-visual-zone::before{
    top:50%; bottom:auto; height:auto; width:min(92vw,430px);
    transform:translate(-50%,-50%); opacity:.19;
  }
}


/* =====================================================================
   v12.75 · PAGE DE RÉSERVATION — alignée sur les pages piliers
   Le tunnel reste isolé (ni navigation ni pied de page) mais adopte le
   rythme du site : hero blanc, section teintée, section blanche, section
   teintée, CTA final bleu. Les cartes sont celles de Renfort IA et Agence,
   les pictogrammes au trait de 1,15 comme partout ailleurs.
   RÈGLE — aucune taille de police définie ici.
   ===================================================================== */
/* Le lien de retour tient lieu de navigation : posé en haut du hero, aligné
   à gauche alors que le bloc de titre est centré. */
/* v12.98 · boutons Retour retirés des pages Rendez-vous, CGV, Confidentialité
   et Cookies (la navigation est présente partout) ; règles conservées, sans
   élément à styler, pour le cas où le bouton serait rétabli. */
:is(#page-rendez-vous,#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) > .hero .retour{
  /* v12.96 · la navigation est de retour : le bouton quitte le haut de page
     (où la pilule le recouvrirait) et se place dans le flux, sous elle, à
     la même position horizontale qu'avant sur les deux pages. */
  position:static; width:100%;
  margin:0 auto var(--s-8); text-align:left;
}
/* Même hauteur de départ sur les deux pages : le hero de Rendez-vous ne
   centre plus verticalement son contenu, il part du haut comme celui des CGV. */
#page-rendez-vous > .hero{align-items:flex-start;}
:is(#page-rendez-vous,#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) > .hero .wrap{position:static;}
/* La flèche du retour pointe à gauche : au survol elle glisse à gauche, à
   l'inverse de la flèche des boutons de réservation. */
:is(#page-rendez-vous,#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) > .hero .retour .btn:hover svg{transform:translateX(-2px);}
:is(#page-rendez-vous,#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) > .hero .retour .btn{width:auto;}
/* v12.87 · Noms des fondateurs : prénom en casse normale, nom de famille en
   capitales, écrit directement dans le HTML (« Jean-Marie DILASSER »). Aucune
   transformation CSS. */
/* v12.88 · Portraits des fondateurs. Même boîte carrée pour les deux, même
   échelle de visage (recadrage calé sur la distance yeux–menton), même
   traitement noir et blanc. 7 rem au lieu de 5,5 : à 88 px un visage ne se
   lisait pas. Fichiers de 240 px, soit le double de l'affichage. */
#page-agence .sw-card .portrait{width:7rem; border-radius:20px; overflow:hidden;
  box-shadow:0 8px 20px rgba(25,48,88,.12);}
/* v12.89 · Portraits dézoomés et agrandis. Passage du carré au format portrait
   4:5 : même largeur de visage qu'en v12.88 (la photo de Jean-Marie est déjà
   exploitée sur toute sa largeur), matière gagnée en hauteur — épaules, col,
   veste. 8,5 rem de large au lieu de 7. Fichiers 272 × 340, double de
   l'affichage. Le ratio suit l'attribut width/height de l'image. */
#page-agence .sw-card .portrait{width:8.5rem; aspect-ratio:4/5;}
#page-agence .sw-card .portrait img{border-radius:0;}
/* v12.78 · le lien méthodologie dans la carte de préparation : même style que
   sous le bouton de l'accueil, aligné à gauche, sur sa propre ligne. */
#page-rendez-vous .sw-card .hero-method-link{justify-content:flex-start; text-align:left; margin-top:.35rem; min-height:auto;}
/* Les modalités pratiques, en ligne sous le titre du CTA final : une
   information de réassurance, pas un tableau. */
#page-rendez-vous .rdv-facts{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.6rem clamp(1rem,2.5vw,2.25rem);
  margin:0 auto var(--s-8); padding:0; list-style:none; max-width:60rem;
}
#page-rendez-vous .rdv-facts li{
  display:flex; flex-direction:column; align-items:center; gap:.1rem; min-width:0;
}
#page-rendez-vous .rdv-facts b{color:var(--blue-800);}
#page-rendez-vous .rdv-facts span{color:var(--label);}
@media(max-width:640px){
  #page-rendez-vous .rdv-facts{gap:.85rem 1.25rem;}
}

/* =====================================================================
   v12.93 · PAGE CGV. Aucune taille de police nouvelle : titres h1/h2/h3,
   .role, .small et corps de texte hérités de l'échelle commune.
   Hiérarchie : partie (h2 filet 2 px) → article (étiquette .role + h3)
   → sous-article (numéro bleu en gras) → paragraphe.
   ===================================================================== */
/* Hero : même centrage que les pages piliers, sans la hauteur plein écran
   (le texte juridique doit apparaître vite). */
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) > .hero .titleblock{max-width:1050px; margin-inline:auto; text-align:center;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) > .hero .titleblock .lede{max-width:48rem; margin-inline:auto;}
/* v12.94 · Hero réduit au titre et à la date d'entrée en vigueur, sans
   bulle ; bouton de retour en haut à gauche, comme sur Rendez-vous. */
/* v12.95-96 · Le bouton Retour occupe la même place que celui de la page
   Rendez-vous : mêmes règles (sélecteurs partagés plus haut). */
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) > .hero .retour .btn{text-decoration:none;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-intro{margin-top:var(--s-2);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) sup{line-height:0;}

/* Mise en page : sommaire collant à gauche, document à droite. */
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-layout{display:grid; grid-template-columns:minmax(0,17.5rem) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.75rem); align-items:start;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc{position:sticky; top:7rem; max-height:calc(100vh - 8.5rem); overflow:auto;
  padding:1.25rem 1.1rem; border-radius:24px; background:var(--surface);
  box-shadow:0 14px 34px rgba(25,48,88,.09),inset 0 1px 0 rgba(255,255,255,.98);
  overscroll-behavior:contain;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc summary{cursor:pointer; list-style:none; font-weight:700; color:var(--navy);
  padding:.15rem .4rem .6rem; display:flex; align-items:center; justify-content:space-between;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc summary::-webkit-details-marker{display:none;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc summary::after{content:""; width:.5rem; height:.5rem; margin-right:.2rem;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .2s var(--ease);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc details:not([open]) summary::after{transform:rotate(-45deg);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc__group{margin:1rem .4rem .45rem;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc ol{list-style:none; margin:0; padding:0;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc a{display:flex; gap:.6rem; padding:.3rem .4rem; border-radius:10px;
  color:var(--label); text-decoration:none;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc a:hover{color:var(--blue-800); background:var(--blue-100);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc a[aria-current="true"]{color:var(--blue-800); background:var(--blue-100); font-weight:700;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc a:focus-visible{outline:2px solid var(--blue-800); outline-offset:1px;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc__n{flex:0 0 1.6rem; color:var(--blue-800); font-weight:700; font-variant-numeric:tabular-nums;}

/* Document : une surface par partie, articles séparés par le filet 1 px. */
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-doc{display:grid; gap:clamp(1.5rem,3vw,2.25rem); min-width:0;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-part{padding:clamp(1.5rem,3.2vw,2.75rem); border-radius:24px; background:var(--surface);
  box-shadow:0 14px 34px rgba(25,48,88,.09),inset 0 1px 0 rgba(255,255,255,.98); min-width:0;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-part__head{margin-bottom:var(--s-4);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-part__head .role{margin-bottom:var(--s-3);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-chapo{margin-top:var(--s-4); color:var(--label);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-art{padding:clamp(1.5rem,2.6vw,2rem) 0; border-top:1px solid var(--hairline);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-part__head + .legal-art{border-top:0;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-art:last-child{padding-bottom:0;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-art__n{margin:0 0 .5rem; color:var(--blue-800);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-art h3{margin:0 0 .85rem;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-p{max-width:68ch;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-p + .legal-p,
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-cases + .legal-p,
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-p + .legal-cases{margin-top:.85rem;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-sub{color:var(--blue-800); margin-right:.35rem; font-variant-numeric:tabular-nums;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-ref{color:var(--blue-800); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; overflow-wrap:anywhere;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-ref:hover{color:var(--blue-700);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) strong{color:var(--navy);}

/* Définitions de l'article 1 : une ligne par terme défini. */
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-defs{list-style:none; margin:0; padding:0; max-width:68ch;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-defs li{padding:.7rem 0; border-top:1px solid var(--hairline);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-defs li:first-child{border-top:0; padding-top:0;}

/* Les deux cas de l'article 25.1. */
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-cases{list-style:none; margin:0; padding:0; display:grid; gap:.85rem; max-width:68ch;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-cases li{position:relative; padding:1rem 1.15rem 1rem 2.3rem; border-radius:16px;
  background:var(--blue-100);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-cases li::before{content:""; position:absolute; left:1.05rem; top:1.55rem;
  width:6px; height:6px; border-radius:50%; background:var(--blue-800);}

/* Fiche B8 : champs à compléter. */
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-fiche{margin:0; display:grid; max-width:68ch;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-fiche > div{padding:.8rem 0; border-top:1px solid var(--hairline);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-fiche > div:first-child{border-top:0; padding-top:0;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-fiche dt{color:var(--ink);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-fiche dd{margin:.45rem 0 0; display:flex; align-items:flex-end; gap:.5rem; color:var(--label);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-blank{flex:1 1 auto; max-width:24rem; height:1.35rem; border-bottom:1px dashed var(--hairline-strong);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-fiche__sign dt{font-weight:700; color:var(--navy);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-fiche dd{flex-wrap:wrap;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-checks{display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; color:var(--ink);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-check{display:inline-flex; align-items:center; gap:.5rem;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-box{flex:0 0 auto; width:1rem; height:1rem; border-radius:4px;
  border:1.5px solid var(--blue-800); background:var(--surface);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-fiche .legal-blank{min-width:9rem;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-checks + .legal-blank{flex-basis:12rem;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-fiche__note{margin-top:.45rem; color:var(--label);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* Ancres : le titre n'arrive pas sous la navigation flottante. */
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) [id]{scroll-margin-top:7.5rem;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) [tabindex="-1"]:focus{outline:none;}

@media (max-width:960px){
  :is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-layout{grid-template-columns:minmax(0,1fr);}
  :is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc{position:static; max-height:none;}
  :is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc details[open] ol{columns:2 14rem; column-gap:1.5rem;}
  :is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc li{break-inside:avoid;}
}
@media (max-width:640px){
  :is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-part{border-radius:20px;}
  :is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc{border-radius:20px;}
}
@media (prefers-reduced-motion:reduce){
  :is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) .legal-toc summary::after{transition:none;}
}

/* =====================================================================
   v12.97 · POLITIQUES DE CONFIDENTIALITÉ ET DE COOKIES. Même gabarit que
   la page CGV (hero, sommaire collant, document, CTA final). Hiérarchie :
   section (carte, h2 numéroté à filet 2 px) → sous-titre (h3) →
   paragraphe / liste / tableau. Aucune taille de police nouvelle :
   seuls .role, .small et le corps hérité sont utilisés.
   ===================================================================== */
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-part__head{margin-bottom:var(--s-6);}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .h2--ruled .num{margin-right:.35rem;}
/* v13.01 · Titres de section des deux politiques au niveau des titres
   d'article des CGV : on reprend exactement l'échelle h3 du site (taille,
   interlignage, crénage), sans créer de taille. La balise reste un h2 (ce
   sont les sections de premier niveau du document). */
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-part__head h2{
  font-size:clamp(1.45rem,2vw,2rem); line-height:1.08; letter-spacing:-.025em;}
/* Le numéro suit la taille du titre au lieu d'en faire la moitié. */
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-part__head h2 .num{font-size:1em; line-height:inherit; padding-top:0;}
/* Les sous-titres (Deux rôles distincts, Précisions par métier, Principaux
   prestataires, Ce que nous n'utilisons pas) passent au corps de texte en
   gras : ils restent distincts des titres de section désormais de même
   taille qu'eux. */
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-h3{font-family:var(--font-ui); font-size:inherit;
  font-weight:700; line-height:1.45; letter-spacing:0; color:var(--navy);}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-h3{margin:var(--s-8) 0 .75rem;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-p{max-width:68ch;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-p + .legal-p,
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-list + .legal-p,
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-p + .legal-list,
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table + .legal-p,
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-p + .legal-table,
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-list + .legal-callout,
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-p + .legal-contacts{margin-top:.85rem;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-p--note{color:var(--label);}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-version{margin-top:var(--s-6); padding-top:var(--s-4);
  border-top:1px solid var(--hairline); color:var(--label);}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-meta{margin:var(--s-3) auto 0; max-width:48rem; color:var(--label);}
/* Champ à renseigner avant la mise en ligne : couleur sémantique « vigilance ». */
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-ph{padding:0 .3em; border-radius:4px;
  background:var(--watch-bg); color:var(--watch); font-weight:700; white-space:nowrap;}

/* Listes : une ligne par élément, filet 1 px, puce bleue. */
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-list{list-style:none; margin:0; padding:0; max-width:68ch;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-list li{position:relative; padding:.6rem 0 .6rem 1.35rem;
  border-top:1px solid var(--hairline);}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-list li:first-child{border-top:0;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-list li::before{content:""; position:absolute; left:.2rem; top:1.25rem;
  width:6px; height:6px; border-radius:50%; background:var(--blue-800);}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-list--no li::before{width:9px; height:2px; border-radius:0;
  top:1.45rem; background:var(--label);}
/* Règles d'usage de l'IA : encadré bleu pâle, comme les cas de l'article 25 des CGV. */
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-list--box{padding:.5rem 1.25rem; border-radius:16px; background:var(--blue-100);}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-list--box li{border-top-color:rgba(31,78,121,.12);}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-callout{margin-top:.85rem; padding:1rem 1.15rem;
  border-radius:16px; background:var(--blue-100); max-width:68ch;}

/* « L'essentiel » : première carte du document. */
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-essentiel .legal-art__n{margin:0 0 var(--s-4);}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-points{list-style:none; counter-reset:pt; margin:0; padding:0; max-width:72ch;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-points li{counter-increment:pt; position:relative;
  padding:.75rem 0 .75rem 2.4rem; border-top:1px solid var(--hairline);}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-points li:first-child{border-top:0; padding-top:0;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-points li::before{content:counter(pt); position:absolute; left:0; top:.75rem;
  width:1.6rem; height:1.6rem; border-radius:50%; background:var(--blue-100); color:var(--blue-800);
  font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-points li:first-child::before{top:0;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-checks{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 2rem;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-checks li{position:relative; padding:.75rem 0 .75rem 1.7rem;
  border-top:1px solid var(--hairline);}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-checks li:nth-child(-n+2){border-top:0;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-checks li::before{content:""; position:absolute; left:.15rem; top:1.2rem;
  width:.7rem; height:.38rem; border-left:2px solid var(--ok); border-bottom:2px solid var(--ok); transform:rotate(-45deg);}

/* Tableaux : en-tête du système commun, lignes de groupe bleu pâle. */
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table{margin:var(--s-6) 0;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table table{margin:0; min-width:0;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table td{line-height:1.5;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table td strong{color:var(--navy);}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table .legal-cat{display:block;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table__grp th{background:var(--blue-100); color:var(--blue-800);
  padding:.6rem .875rem;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-tag{display:inline-block; padding:.15rem .6rem; border-radius:999px;
  font-weight:700; white-space:nowrap;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-tag--no{background:var(--ok-bg); color:var(--ok);}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-tag--yes{background:var(--blue-100); color:var(--blue-800);}

/* Coordonnées (cookies, section 7) : deux cartes côte à côte. */
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-contacts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem; max-width:68ch;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-contact{padding:1.1rem 1.2rem; border-radius:16px; background:var(--bg-tint);}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-contact .role{margin-bottom:.6rem;}
:is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

@media (max-width:760px){
  /* Tableaux empilés : chaque ligne devient une fiche, chaque cellule porte
     son intitulé de colonne (attribut data-label). */
  :is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table table,
  :is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table tbody,
  :is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table tr,
  :is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table td,
  :is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table th{display:block; width:100%;}
  :is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table table{box-shadow:none; border-radius:0; overflow:visible; background:none;}
  :is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  :is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table tr{margin:0 0 .85rem; border-radius:16px; overflow:hidden;
    background:var(--bg-tint);}
  :is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table__grp{margin:var(--s-6) 0 .6rem !important; background:none !important;}
  :is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table__grp th{border-radius:999px;}
  :is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table td{background:none; border-bottom:1px solid var(--hairline); padding:.7rem 1rem;}
  :is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table td:last-child{border-bottom:0;}
  :is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-table td::before{content:attr(data-label); display:block; margin-bottom:.25rem;
    font:700 .6875rem/1 var(--font-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--label);}
  :is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-checks{grid-template-columns:minmax(0,1fr);}
  :is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-checks li:nth-child(2){border-top:1px solid var(--hairline);}
  :is(#page-confidentialite,#page-cookies,#page-methodologie,#page-mentions-legales) .legal-contacts{grid-template-columns:minmax(0,1fr);}
}

/* v13.04 · Pages juridiques (CGV, confidentialité, cookies) : espace réduit
   entre le titre et le document. Le hero n'a plus de chapô : le bas du hero,
   la marge du titre et le haut de la section du sommaire sont resserrés,
   sur les pas d'espacement existants (--s-12). */
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) > .hero{padding-bottom:var(--s-12);}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) > .hero .titleblock h1{margin-bottom:0;}
:is(#page-cgv,#page-confidentialite,#page-cookies,#page-mentions-legales) > .legal-body{padding-top:var(--s-12);}

/* =====================================================================
   v13.20 · PAGE MÉTHODOLOGIE — fiche SWITCHSCOPE. Remplace le bloc v13.10
   (frise en cinq étapes, matrice). Composants du site réutilisés : hero,
   sechead, cartes .sw-card (--cols), panneau .meth-panel, CTA final.
   Aucune taille de police nouvelle : corps, .small, .role et h3 hérités.
   ===================================================================== */
#page-methodologie .meth-note{margin-top:var(--s-4); color:var(--label); max-width:72ch;}
#page-methodologie .meth-note--center{margin:var(--s-6) auto 0; text-align:center;}
#page-methodologie .sw-cards + .meth-note--center{margin-top:var(--s-6);}
#page-methodologie .sw-card .row__link{margin-top:auto; padding-top:1rem;}
#page-methodologie .role{line-height:1.45;}
#page-methodologie .sws-cols-4{--cols:4;}
#page-methodologie .sws-cols-5{--cols:5;}
#page-methodologie .sws-sub{margin-top:.35rem !important; color:var(--blue-700) !important; font-weight:700;}
#page-methodologie .sws-kpi{margin:0 !important; color:var(--navy) !important; font-weight:700;}
#page-methodologie .sws-measure::before{content:""; display:block; width:28px; height:3px; border-radius:2px;
  background:var(--blue-600); margin-bottom:.9rem;}

/* Pour qui : bandeau compact, pastilles blanches. */
#page-methodologie .sws-who-section{padding-block:var(--s-12);}
#page-methodologie .sws-who{display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:1rem 2rem; align-items:center;}
#page-methodologie .sws-label{margin:0; font:inherit; font-weight:700; color:var(--navy); letter-spacing:0;}
#page-methodologie .sws-who__head p{margin:.25rem 0 0; color:var(--label);}
#page-methodologie .sws-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem;}
#page-methodologie .sws-chips li{padding:.45rem .9rem; border-radius:var(--r-pill); background:var(--surface);
  color:var(--navy); font-weight:600; box-shadow:var(--sh-pill);}

/* Les quatre phases. */
#page-methodologie .sws-start{display:inline-flex; flex-wrap:wrap; align-items:center; gap:.4rem .75rem; margin:0 0 var(--s-6);
  padding:.55rem 1rem; border-radius:var(--r-pill); background:var(--blue-100); color:var(--ink);}
#page-methodologie .sws-start strong{color:var(--blue-800);}
#page-methodologie .sws-phases, #page-methodologie .sws-school__steps{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.75rem,1.6vw,1.25rem);}
#page-methodologie .sws-phase{display:flex; flex-direction:column; padding:1.4rem 1.3rem; border-radius:20px; background:var(--surface);
  box-shadow:0 14px 34px rgba(25,48,88,.09),inset 0 1px 0 rgba(255,255,255,.98);}
#page-methodologie .sws-phase__num{color:var(--blue-600); font-weight:700; line-height:1; margin-bottom:.9rem;}
#page-methodologie .sws-phase h3{margin:0;}
#page-methodologie .sws-phase__weeks{margin:.4rem 0 0; color:var(--blue-700); font-weight:700;}
#page-methodologie .sws-phase__goal{margin:.75rem 0 0; color:var(--label);}
#page-methodologie .sws-phase .role{margin:auto 0 .35rem; padding-top:1.1rem; border-top:1px solid var(--hairline); width:100%;}
#page-methodologie .sws-phase__goal + .role{margin-top:1.1rem;}
#page-methodologie .sws-phase__out{margin:0; color:var(--ink);}
#page-methodologie .sws-school{margin-top:var(--s-6);}
#page-methodologie .sws-school__head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.4rem 1.5rem; margin-bottom:.75rem;}
#page-methodologie .sws-school__head p{margin:0;}
#page-methodologie .sws-school__head .small{color:var(--label);}
#page-methodologie .sws-school__steps li{padding:.75rem 1rem; border-radius:14px; background:var(--blue-100); color:var(--navy); font-weight:700;}

/* Checklist de démarrage. */
#page-methodologie .sws-check__eyebrow{margin:0 0 .5rem; color:var(--blue-800);}
#page-methodologie .sws-check__title{margin:0;}
#page-methodologie .sws-check__hint{margin:.5rem 0 0; color:var(--label);}
#page-methodologie .sws-check__set{border:0; margin:var(--s-6) 0 0; padding:0; min-width:0;}
#page-methodologie .sws-check__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.25rem 2rem;}
#page-methodologie .sws-check__list label{display:flex; align-items:flex-start; gap:.7rem; padding:.55rem 0; cursor:pointer; color:var(--ink);}
#page-methodologie .sws-check__list input{flex:0 0 auto; width:1.15rem; height:1.15rem; margin:.15rem 0 0; accent-color:var(--blue-800); cursor:pointer;}
#page-methodologie .sws-check__results{list-style:none; margin:var(--s-6) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem;}
#page-methodologie .sws-check__results li{padding:1rem 1.1rem; border-radius:16px; background:var(--bg-tint); transition:background .25s var(--ease), box-shadow .25s var(--ease);}
#page-methodologie .sws-check__results li p{margin:0;}
#page-methodologie .sws-check__results .small{margin-top:.3rem; color:var(--label);}
#page-methodologie .sws-check__range{color:var(--navy); font-weight:700;}
#page-methodologie .sws-check__range span{color:var(--blue-700);}
#page-methodologie .sws-check__results li.is-match{background:var(--blue-100); box-shadow:0 10px 26px rgba(25,48,88,.1);}
#page-methodologie .sws-check__results.is-active li:not(.is-match){opacity:.6;}

@media (max-width:1100px){
  #page-methodologie .sws-phases, #page-methodologie .sws-school__steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  #page-methodologie .sws-cols-4, #page-methodologie .sws-cols-5{--cols:2;}
}
@media (max-width:760px){
  #page-methodologie .sws-who{grid-template-columns:minmax(0,1fr);}
  #page-methodologie .sws-phases{grid-template-columns:minmax(0,1fr);}
  #page-methodologie .sws-check__list, #page-methodologie .sws-check__results{grid-template-columns:minmax(0,1fr);}
  #page-methodologie .sws-start{border-radius:16px;}
}
@media (max-width:480px){
  #page-methodologie .sws-school__steps{grid-template-columns:minmax(0,1fr);}
}
@media (prefers-reduced-motion:reduce){
  #page-methodologie .sws-check__results li{transition:none;}
}

/* =====================================================================
   v13.14 · VIDÉO DE PRÉSENTATION (accueil, entre le chapô et le bouton).
   Surface détachée par l'ombre, sans bordure (loi 4). Contrôles en pilules
   blanches ; anneau de focus ambre (loi 9). Aucune taille de police.
   ===================================================================== */
#page-accueil .hero-video{position:relative; width:min(100%,760px); margin:var(--s-8) auto 0; padding:0;
  border-radius:24px; overflow:hidden; background:var(--surface); aspect-ratio:16 / 9;
  box-shadow:0 22px 50px rgba(25,48,88,.14),0 3px 10px rgba(25,48,88,.06); isolation:isolate;}
#page-accueil .hero-video video{display:block; width:100%; height:100%; object-fit:cover; background:var(--surface);}
#page-accueil .hero-video.is-enhanced video{cursor:pointer;}
#page-accueil .hero-video__hint{display:none; position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px;
  border-radius:50%; background:rgba(255,255,255,.94); color:var(--navy); align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(25,48,88,.18); pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);}
#page-accueil .hero-video__hint svg{width:22px; height:22px; margin-left:3px;}
#page-accueil .hero-video.is-enhanced .hero-video__hint{display:flex;}
#page-accueil .hero-video.is-playing .hero-video__hint{opacity:0; transform:scale(.85);}
#page-accueil .hero-video__controls{display:none; position:absolute; right:12px; bottom:12px; gap:8px;}
#page-accueil .hero-video.is-enhanced .hero-video__controls{display:flex;}
#page-accueil .hero-video__btn{width:40px; height:40px; padding:0; border:0; border-radius:50%; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.94); color:var(--navy);
  box-shadow:0 8px 20px rgba(25,48,88,.16); transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
#page-accueil .hero-video__btn:hover{transform:translateY(-1px); box-shadow:0 12px 26px rgba(25,48,88,.2);}
#page-accueil .hero-video__btn:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:50%;}
#page-accueil .hero-video .ico-pause, #page-accueil .hero-video .ico-sound{display:none;}
#page-accueil .hero-video.is-playing .hero-video__toggle .ico-play{display:none;}
#page-accueil .hero-video.is-playing .hero-video__toggle .ico-pause{display:block;}
#page-accueil .hero-video.has-sound .ico-muted{display:none;}
#page-accueil .hero-video.has-sound .ico-sound{display:block;}
@media (max-width:640px){
  #page-accueil .hero-video{margin-top:var(--s-6); border-radius:18px;}
  #page-accueil .hero-video__hint{width:54px; height:54px; margin:-27px 0 0 -27px;}
  #page-accueil .hero-video__controls{right:8px; bottom:8px;}
}
@media (prefers-reduced-motion:reduce){
  #page-accueil .hero-video__hint, #page-accueil .hero-video__btn{transition:none;}
}


/* =====================================================================
   v13.15 · Corrections issues du test du skill design-taste-frontend.
   Bloc autonome : le supprimer annule les réglages mobiles ci-dessous.
   ===================================================================== */
/* Mobile : un titre sur quatre lignes est une erreur de corps, pas de
   texte. Corps réduits d'environ 15 % sous 640 px, mêmes polices,
   même graisse, même dégradé.                                          */
@media(max-width:640px){
  #page-accueil .h1--display{font-size:clamp(2.5rem,11vw,4.3rem);}
  h1{font-size:clamp(2.3rem,10.5vw,4rem);}
  h2{font-size:clamp(2rem,9vw,3.4rem);}
  /* seconde ligne équilibrée : pas de mot orphelin en fin de titre */
  .grad, .h2--two-lines .grad{display:inline-block; text-wrap:balance;}
}
/* Mobile : le libellé « Réserver un échange stratégique » tient sur une
   ligne dès 360 px (marges intérieures et corps légèrement réduits).  */
@media(min-width:360px) and (max-width:640px){
  .page .btn, .page .centered-text-bubble .btn{white-space:nowrap; padding-inline:1.1rem; font-size:.95rem;}
}


/* =====================================================================
   v13.22 · BANDEAU DE CONSENTEMENT (cookies). Carte flottante en bas
   d'écran, non bloquante (pas de « mur de cookies »), détachée par
   l'ombre (loi 4). Aucune taille de police nouvelle : corps et .small.
   [HORS DA — À VALIDER] « Tout refuser » et « Tout accepter » ont le même
   style (bouton blanc) : la CNIL exige deux choix « au même niveau et sur
   le même format ». La loi 6 (un primaire navy + un secondaire blanc) ne
   s'applique donc pas à ce composant.
   ===================================================================== */
.cc{position:fixed; z-index:80; left:50%; bottom:clamp(.75rem,2vw,1.5rem); transform:translateX(-50%);
  width:min(calc(100% - 2rem), 600px); max-height:calc(100vh - 2rem); overflow:auto;
  padding:clamp(1.25rem,2.6vw,1.6rem); border-radius:20px; background:var(--surface); color:var(--ink);
  box-shadow:0 24px 60px rgba(20,56,95,.22),0 4px 14px rgba(20,56,95,.08);
  animation:cc-in .35s var(--ease) both;}
.cc[hidden]{display:none;}
@keyframes cc-in{from{opacity:0; transform:translate(-50%,12px);} to{opacity:1; transform:translate(-50%,0);}}
.cc__eyebrow{display:flex; align-items:center; gap:.5rem; margin:0 2.5rem .5rem 0; color:var(--navy); font-weight:700;}
.cc__eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); flex:0 0 auto;}
.cc p{margin:0;}
.cc__text{color:var(--label);}
.cc__text + .cc__text{margin-top:.5rem;}
.cc a{color:var(--blue-800); text-decoration:underline; text-underline-offset:2px;}
.cc__close{position:absolute; top:.85rem; right:.85rem; width:36px; height:36px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--label); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
.cc__close:hover{background:var(--bg-tint); color:var(--navy);}
.cc__actions{display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1.1rem;}
.cc__actions .btn{justify-content:center; width:100%; white-space:normal; text-align:center;}
.cc__more{display:block; margin:.85rem auto 0; padding:.25rem .5rem; border:0; background:none; cursor:pointer;
  color:var(--blue-800); font:inherit; text-decoration:underline; text-underline-offset:2px;}
.cc__list{list-style:none; margin:1rem 0 0; padding:0;}
.cc__list li{padding:.85rem 0; border-top:1px solid var(--hairline);}
.cc__list label{display:flex; align-items:flex-start; gap:.75rem; cursor:pointer;}
.cc__list input{flex:0 0 auto; width:1.15rem; height:1.15rem; margin:.2rem 0 0; accent-color:var(--blue-800); cursor:pointer;}
.cc__list input:disabled{cursor:default;}
.cc__list strong{color:var(--navy);}
.cc__list .small{display:block; margin-top:.2rem; color:var(--label);}
.cc__save{margin-top:.25rem;}
.cc__policy{margin-top:.5rem !important; text-align:center;}
@media (max-width:480px){
  .cc{bottom:.5rem; width:calc(100% - 1rem); border-radius:18px;}
  .cc__actions{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){ .cc{animation:none;} }

/* =====================================================================
   v14.0 · Page 404 : même hero que les pages piliers (centré).
   ===================================================================== */
#page-404 > .hero{min-height:calc(100vh - 12rem);}