/* ============================================================
   PORTEFOLIO PARTENAIRES ANESTHÉA — deck 16:9 autonome.
   Tokens, typographie et idiomes REPRIS DU SITE (anesthea.css) :
   Fraunces sur tous les titres (650, opsz 60 ; 560/opsz 90 pour les
   grands), Inter Tight pour le corps et les boutons, DM Mono pour
   les eyebrows et les données. L'or en texte = --gold-deep, jamais
   --gold-accent (sauf sur fond navy, où c'est l'inverse).
   Fichier GÉNÉRÉ par build.py : ne pas l'éditer, éditer ce gabarit.
   ============================================================ */


:root{
  --navy-deep:#1E3A5F; --navy-medium:#2D5A80; --navy-soft:#4A7BA7; --navy-ink:#0F2138;
  --orange-action:#E07B39; --orange-ink:#AD5117;
  --gold-accent:#D4A84A; --gold-warm:#7B5912; --gold-deep:#A5822A;
  --teal-success:#2D9B7B; --teal-deep:#1D7A60;
  --gray-surface:#E8EEF2; --gray-warm:#F4F1EC; --border-subtle:#D9E2EA;
  --muted-fg:#2D5A80;
  --font:'Inter Tight',system-ui,-apple-system,sans-serif;
  --font-display:'Fraunces','Iowan Old Style',Georgia,serif;
  --font-mono:'DM Mono','SF Mono',ui-monospace,Menlo,monospace;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:#0B1626; }
body{ font-family:var(--font); color:var(--navy-deep); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:650; letter-spacing:-.005em;
  font-variation-settings:'opsz' 60; margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
em,.accent-i{ font-style:italic; font-weight:480; color:var(--gold-deep); }
.amp{ font-family:var(--font); font-weight:500; font-style:normal; }

/* --- scène : 1280x720 mis à l'échelle du viewport ------------- */
.deck{ position:fixed; inset:0; display:grid; place-items:center; overflow:hidden; }
.slide{ position:absolute; width:1280px; height:720px; overflow:hidden;
  transform:scale(var(--s,1)); transform-origin:center center;
  opacity:0; visibility:hidden; transition:opacity 420ms cubic-bezier(.16,.84,.24,1), visibility 0s linear .44s;
  background:var(--gray-warm); }
.slide.is-on{ opacity:1; visibility:visible; transition-delay:0s; }
.slide.is-on .rise{ animation:rise 620ms cubic-bezier(.16,.84,.24,1) both; }
.slide.is-on .rise:nth-child(2){ animation-delay:60ms; }
.slide.is-on .rise:nth-child(3){ animation-delay:120ms; }
.slide.is-on .rise:nth-child(4){ animation-delay:180ms; }
@keyframes rise{ from{ opacity:0; transform:translate3d(0,18px,0) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .slide{ transition:none } .slide.is-on .rise{ animation:none }
}

/* fonds */
.sl-cream{ background:var(--gray-warm); }
.sl-white{ background:#fff; }
.sl-navy{ background:var(--navy-ink); color:#fff; }
.sl-navy h1,.sl-navy h2,.sl-navy h3{ color:#fff; }
.sl-navy em,.sl-navy .accent-i{ color:var(--gold-accent); }
.sl-navy .eyebrow{ color:rgba(255,255,255,.72); }
.sl-navy .eyebrow .bar{ background:rgba(255,255,255,.28); }
.sl-navy .lede{ color:rgba(255,255,255,.74); }

/* --- chrome de page ------------------------------------------ */
.pad{ position:absolute; inset:0; padding:56px 72px 62px; display:flex; flex-direction:column; }
.chrome{ position:absolute; left:72px; right:72px; bottom:26px; display:flex; align-items:center;
  gap:18px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-fg); }
.sl-navy .chrome{ color:rgba(255,255,255,.55); }
.chrome .line{ flex:1; height:1px; background:var(--border-subtle); }
.sl-navy .chrome .line{ background:rgba(255,255,255,.18); }
.wm{ display:inline-block; position:relative; width:118px; aspect-ratio:318/74; color:var(--navy-ink); }
.sl-navy .wm{ color:#fff; }
.wm span{ position:absolute; inset:0; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; }
.wm .b{ background:currentColor; -webkit-mask-image:url('/assets/images/wm-base.png?v=ca61c509'); mask-image:url('/assets/images/wm-base.png?v=ca61c509'); }
.wm .a{ background:var(--gold-deep); -webkit-mask-image:url('/assets/images/wm-accent.png?v=55a67c81'); mask-image:url('/assets/images/wm-accent.png?v=55a67c81'); }
.sl-navy .wm .a{ background:var(--gold-accent); }

/* --- typographie de section ---------------------------------- */
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono);
  font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-fg); margin-bottom:14px; }
.eyebrow .bar{ width:28px; height:1px; background:var(--border-subtle); }
.eyebrow.gold{ color:var(--gold-warm); }
/* Code couleur des quatre expertises, repris du diagramme 360° du site :
   anesthésie navy, formation vert, numérique or, personnel orange. Le texte
   prend toujours la nuance foncée (lisible à 11,5 px), le filet la claire. */
.eyebrow.k-anesthesie{ color:var(--navy-medium); }
.eyebrow.k-anesthesie .bar{ background:rgba(45,90,128,.45); }
.eyebrow.k-formation{ color:var(--teal-deep); }
.eyebrow.k-formation .bar{ background:rgba(29,122,96,.45); }
.eyebrow.k-numerique{ color:var(--gold-warm); }
.eyebrow.k-numerique .bar{ background:rgba(212,168,74,.65); }
.eyebrow.k-personnel{ color:var(--orange-ink); }
.eyebrow.k-personnel .bar{ background:rgba(173,81,23,.4); }
.t1{ font-size:60px; font-weight:560; line-height:1.03; letter-spacing:-.025em;
  font-variation-settings:'opsz' 90; color:var(--navy-deep); text-wrap:balance; }
.t2{ font-size:44px; font-weight:560; line-height:1.05; letter-spacing:-.025em;
  font-variation-settings:'opsz' 90; color:var(--navy-deep); text-wrap:balance; }
.lede{ font-size:16.5px; line-height:1.6; color:var(--muted-fg); max-width:66ch; text-wrap:pretty; }
.h3{ font-size:20px; font-weight:600; line-height:1.18; color:var(--navy-deep); }
.sl-navy .h3{ color:#fff; }
.p{ font-size:14.5px; line-height:1.58; color:var(--muted-fg); text-wrap:pretty; }
.sl-navy .p{ color:rgba(255,255,255,.72); }

/* --- briques ------------------------------------------------- */
.row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:9999px;
  font-weight:600; font-size:14px; letter-spacing:-.005em; color:#fff;
  background-image:linear-gradient(325deg,#9E4712 0%,#BA5A1E 55%,#9E4712 90%);
  box-shadow:0 5px 14px -6px rgba(196,93,31,.5); }
.btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.btn-ghost{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono);
  font-size:13.5px; color:var(--navy-deep); border-bottom:1px solid rgba(165,130,42,.45); padding-bottom:2px;
  transition:color 180ms ease-out, border-color 180ms ease-out; }
.btn-ghost:hover{ color:var(--orange-ink); border-color:var(--orange-ink); }
.sl-navy .btn-ghost{ color:#fff; border-color:rgba(212,168,74,.6); }
.cgrave-tel:hover,.cgrave-mail:hover,.cgrave-doors a:hover{ color:var(--orange-ink); }
.card{ background:#fff; border:1px solid var(--border-subtle); border-radius:16px; padding:24px 24px 26px;
  box-shadow:0 18px 44px -34px rgba(15,33,56,.32); }
.sl-white .card{ background:var(--gray-warm); border-color:rgba(165,130,42,.22); }
.sl-navy .card{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12); box-shadow:none; }
.ic{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:rgba(30,58,95,.07); color:var(--navy-deep); margin-bottom:14px; }
.ic svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.sl-navy .ic{ background:rgba(255,255,255,.09); color:#fff; }
.ic.k-formation{ background:rgba(29,122,96,.1); color:var(--teal-deep); }
.ic.k-numerique{ background:rgba(165,130,42,.12); color:var(--gold-warm); }
.ic.k-personnel{ background:rgba(173,81,23,.1); color:var(--orange-ink); }
.pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:9999px;
  background:#fff; border:1px solid var(--border-subtle); font-family:var(--font-mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-fg); }
.pill-plein{ background:var(--navy-deep); border-color:var(--navy-deep); color:#fff; }
.pill-plein .dot{ background:var(--gold-accent); }
/* Les onze spécialités débordent sur deux lignes : on centre la rangée, ce
   qui ne déplace pas la première (elle occupe presque toute la largeur) mais
   recentre la seconde, qui pendait à gauche.
   La marge du haut est là pour SURVIVRE au tassement : .spacer vaut flex:1 et
   tombe à zéro dès que le contenu remplit la diapositive, ce qui arrive selon
   la machine et le rendu des polices. La rangée collait alors aux cartes chez
   Loïc alors qu'elle respirait ici. Ce qui est payé par grid-clemain, dont la
   marge haute descend de 26 à 14 px. */
.row-specialites{ justify-content:center; margin-top:18px; }
.grid-clemain{ margin-top:14px; }
/* Appel à l'action logé dans une carte : collé en bas, aligné à gauche, dans
   l'axe du titre et de la liste au-dessus. Le filet du .btn-ghost est une
   bordure de BOÎTE : sur un libellé qui passe à deux lignes, il traversait
   toute la carte au lieu de suivre les mots. On souligne donc le texte, comme
   le fait déjà le repli mobile. */
.carte-lien{ margin-top:auto; padding-top:16px; }
.carte-lien .btn-ghost{ display:inline; border-bottom:0; padding-bottom:0;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px;
  text-decoration-color:rgba(165,130,42,.55); }
.carte-lien .btn-ghost:hover{ text-decoration-color:var(--orange-ink); }
.dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.k-anesthesie .dot,.dot.k-anesthesie{ background:var(--navy-medium); }
.k-formation .dot,.dot.k-formation{ background:var(--teal-success); }
.k-numerique .dot,.dot.k-numerique{ background:var(--gold-accent); }
.k-personnel .dot,.dot.k-personnel{ background:var(--orange-action); }
.tag{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-fg); }
.sl-navy .tag{ color:rgba(255,255,255,.66); }
.list{ margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.list li{ position:relative; padding-left:24px; font-size:14px; line-height:1.5; color:var(--muted-fg); }
.sl-navy .list li{ color:rgba(255,255,255,.76); }
.list li::before{ content:''; position:absolute; left:2px; top:.52em; width:9px; height:9px;
  border-radius:50%; border:1.5px solid var(--gold-deep); }
.sl-navy .list li::before{ border-color:var(--gold-accent); }
.filet{ height:1px; background:var(--border-subtle); }
.sl-navy .filet{ background:rgba(255,255,255,.14); }
.grid4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; }
.grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.spacer{ flex:1; }
.hubrow{ display:flex; align-items:center; gap:44px; margin-top:26px; }
.duo{ display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.92fr); gap:44px; margin-top:24px; align-items:start; }
.duo-large{ grid-template-columns:minmax(0,1.2fr) minmax(0,.88fr); }
/* Colonne de texte large et photo étroite (voie veineuse). En CLASSE et non
   en style sur la balise : un style en ligne bat la media query, et la
   grille restait à deux colonnes en tablette, où elle débordait du cadre. */
.duo-photo{ grid-template-columns:minmax(0,1.68fr) minmax(0,.58fr); }
/* Renfort : la photo prend son propre rapport, sinon elle était bornée à la
   hauteur des trois cartes (280x224) et la diapositive gardait 83 px de vide
   de chaque côté de la rangée. Les cartes restent à leur hauteur, centrées. */
/* Colonne de 224 px et non 280 : la rangée plafonne à 374 px de haut, et
   c'est cette largeur-là qui laisse la photo garder 94 % de son cadre. En
   280 de large elle en perdait 25 %, le plafond ET les soignants du fond. */
.duo-personnel{ grid-template-columns:minmax(0,1fr) 224px; align-items:center; }
.media-fill.media-poignee{ width:100%; aspect-ratio:3/5; }
/* Calée en haut : le peu qui saute est le sol, en bas, qui ne dit rien. */
.media-fill.media-poignee img{ object-position:50% 0%; }
.pile{ display:flex; flex-direction:column; gap:18px; }
/* Flèche circulaire du refresh : tracée ici plutôt qu'importée d'une
   banque d'icônes (couleurs de la maison, aucune attribution à porter dans
   un document commercial, et un rendu net à l'impression là où un GIF ou un
   Lottie se fige sur une image au hasard). Un tour franc, puis une longue
   pause : une rotation continue se lirait comme un indicateur de chargement. */
.ic-refresh{ width:15px; height:15px; flex:none; display:block; color:var(--gold-warm); }
.ic-refresh svg{ width:100%; height:100%; display:block; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transform-origin:50% 50%; }
/* L'animation est portée par .is-on : elle démarre quand la diapositive
   arrive et s'arrête au bout d'un tour. Retirer puis remettre la classe
   relance l'animation, donc elle rejoue à chaque passage sur la page. */
.slide.is-on .ic-refresh svg{ animation:tourne 1s cubic-bezier(.5,0,.2,1) 1 both; }
@keyframes tourne{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .ic-refresh svg{ animation:none } }
.cartes-serrees{ gap:14px; }
.cartes-serrees .card{ padding:20px 22px 22px; }

/* En-tête de carte portant une vignette photo (option voies aériennes) : la
   photo, le titre, puis le prix aligné à droite. En CLASSES et non en style
   en ligne, sinon le repli mobile plus bas ne peut pas les surcharger. */
.carte-tete{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.carte-tete-titre{ display:flex; align-items:center; gap:13px; min-width:0; }
.carte-tete-prix{ text-align:right; white-space:nowrap; }
.vignette-tete{ width:80px; height:58px; flex:none; border-radius:10px;
  object-fit:cover; object-position:32% 50%; }
/* Image qui prend la hauteur de la colonne d'en face (grille en stretch) :
   sert à poser une photo à côté d'une pile de cartes sans lui inventer une
   hauteur fixe qui se décalerait au premier changement de texte. */
/* Bandeau d'image de hauteur imposée : sert à combler le bas d'une colonne
   plus courte que celle d'en face, sans faire grandir la rangée. */
.media-band{ position:relative; height:270px; border-radius:20px; overflow:hidden; margin-top:20px;
  box-shadow:0 20px 48px -34px rgba(15,33,56,.45); }
.media-band img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 60%; display:block; }
.media-fill{ position:relative; margin:0; border-radius:20px; overflow:hidden; min-height:0;  /* margin:0 ICI et non en style= : en ligne il battait le centrage
     automatique du repli mobile, et la photo restait collée à gauche. */
  box-shadow:0 24px 60px -40px rgba(15,33,56,.5); }
/* L'image est SORTIE DU FLUX : en height:100% dans un conteneur sans hauteur
   propre, elle retombait sur sa taille intrinsèque (1288 px) et faisait
   déborder la diapositive de 276 px. En absolu, c'est la colonne d'en face qui
   fixe la hauteur de la rangée, et l'image s'y recadre. */
.media-fill img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; }
/* Cadre portrait pour une photo de personne : la fente héritée de la colonne
   (280x81) ne permettait pas d'y centrer un visage. Le cadrage est calé à
   droite, le sujet occupant la moitié droite de l'original. */
/* Portrait du renfort. Le fichier est PRÉ-RECADRÉ (renfort-telephone.webp,
   810x852, sujet au centre) : le cadrage ne dépend donc plus de la forme du
   cadre, et le rapport du cadre reprend celui du fichier, si bien que rien
   n'est rogné. width explicite car l'image est hors du flux : sans elle la
   figure se rétracte à 60 px dès que la rangée ne l'étire plus. */
.media-fill.media-portrait{ width:100%; aspect-ratio:810/852; }
.sol-grid{ gap:22px; }            /* les 6 solutions autour du hub (03) */
.garanties{ gap:22px 30px; }      /* les 4 garanties de la prise en charge (10) */
.bls-corps{ display:flex; align-items:center; gap:22px; }
.bls-corps .list{ flex:1; min-width:0; }
.bls-corps .src-logo{ flex:none; }

/* --- navigation ---------------------------------------------- */
/* Barre TOUJOURS visible (2026-09-10) : elle n'apparaissait qu'au passage de
   la souris, et un destinataire qui ouvre le dossier sans savoir qu'il faut
   naviguer restait sur la couverture.
   ⚠️ Elle est ancrée DANS la diapositive, pas dans la fenêtre. En position
   fixe elle tombait dans la bande sombre qui encadre le 16:9 dès que l'écran
   n'a pas ce format (16:10 d'un MacBook, 4:3 d'un projecteur) : noir sur noir,
   invisible (constat Loïc). Le calque suit donc la même échelle que la
   diapositive, et la barre se pose toujours dans son coin. */
.nav-wrap{ position:absolute; width:1280px; height:720px; pointer-events:none; z-index:9;
  transform:scale(var(--s,1)); transform-origin:center center; }
.nav{ position:absolute; right:30px; bottom:24px; display:flex; align-items:center; gap:4px;
  pointer-events:auto; padding:6px; border-radius:9999px; background:#000;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.55), 0 0 0 1.5px rgba(255,255,255,.4); }
.nav button{ width:44px; height:44px; border-radius:50%; border:0; background:transparent;
  color:#fff; font:inherit; font-size:20px; font-weight:700; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:background 160ms ease-out; }
.nav button:hover{ background:rgba(255,255,255,.18); }
.nav button:focus-visible{ outline:2px solid var(--gold-accent); outline-offset:2px; }
.nav .count{ font-family:var(--font-mono); font-weight:500; font-size:13px; color:#fff;
  letter-spacing:.08em; min-width:58px; text-align:center; }
/* Sur les diapositives navy, l'aplat sombre se lisait en creux : la barre
   s'inverse pour garder le même degré de présence partout. */
.nav.sur-navy{ background:#fff; box-shadow:0 14px 30px -10px rgba(0,0,0,.5), 0 0 0 1.5px rgba(15,33,56,.25); }
.nav.sur-navy button{ color:#000; }
.nav.sur-navy button:hover{ background:rgba(0,0,0,.1); }
.nav.sur-navy .count{ color:#000; }

/* --- 01 couverture ------------------------------------------- */
.cover{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.82fr); gap:52px; align-items:center; flex:1; }
.cover-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;
  border-top:1px solid rgba(165,130,42,.3); padding-top:18px; margin-top:30px; }
.kpi .n{ font-family:var(--font-display); font-weight:560; font-size:29px; line-height:1;
  letter-spacing:-.02em; color:var(--navy-deep); }
.kpi .l{ display:block; margin-top:6px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-fg); }
/* margin:0 ICI et non en style= : en ligne il battait la media query, et la
   photo restait collée à la ligne des chiffres en pile. */
.cover-media{ position:relative; margin:0; border-radius:20px; overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 40px 70px -46px rgba(15,33,56,.55); }
.cover-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Cadre 4:5 sur une photo large : le centre par défaut coupait la patiente
   hors champ (on ne voyait que le médecin et du mur vide). Le cadrage suit
   le couple, calé sur la droite de l'image. */
.cover-media.vers-droite img{ object-position:92% 50%; }
.cover-media .pill{ position:absolute; left:16px; bottom:16px; background:rgba(255,255,255,.94);
  border-color:transparent; backdrop-filter:blur(6px); }

/* --- 03 le hub 360° ------------------------------------------ */
.hub{ position:relative; width:210px; height:210px; flex:none; display:grid; place-items:center; }
.hub svg{ position:absolute; inset:0; width:100%; height:100%; }
.hub .arc{ fill:none; stroke-width:3; stroke-linecap:round; }
.hub-disc{ width:150px; height:150px; border-radius:50%; background:#fff; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(15,33,56,.08), 0 12px 30px -20px rgba(15,33,56,.4); }
.hub-disc img{ width:74px; height:auto; display:block; }
.exp-col .x{ display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted-fg); margin-bottom:12px; }
.exp-col h3{ font-size:17px; font-weight:600; line-height:1.2; color:var(--navy-deep); }
.exp-col .picto{ width:38px; height:38px; display:block; margin-bottom:12px; }
/* « Vos avantages » en 2 x 2 plutôt qu'en quatre colonnes serrées sous un
   arc : quatre colonnes de 250 px donnaient des paragraphes en escalier et
   laissaient un tiers de la diapositive vide. Les filets remplacent l'arc. */
.grid-avantages{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
.grid-avantages .exp-col{ padding:24px 38px 24px 0; }
.grid-avantages .exp-col:nth-child(2n){ padding:24px 0 24px 38px; border-left:1px solid var(--border-subtle); }
.grid-avantages .exp-col:nth-child(n+3){ border-top:1px solid var(--border-subtle); }
/* Chaque quadrant centre son contenu, horizontalement et verticalement : les
   blocs n'ont pas la même longueur et se calaient sinon en haut de leur case.
   La liste de la formation garde son fer à gauche, sinon ses puces dansent. */
/* Les blocs se calent en HAUT et non au centre : leurs textes n'ont pas la
   même longueur, et un centrage vertical décalait les pictos de deux blocs
   voisins de 5 px. Sur un document, l'alignement d'une rangée à l'autre se
   voit davantage que le centre de chaque case. */
.grid-avantages .exp-col{ display:flex; flex-direction:column; justify-content:flex-start; text-align:center; }
.grid-avantages .exp-col .picto{ margin-left:auto; margin-right:auto; }
.grid-avantages .exp-col .x{ justify-content:center; }
.grid-avantages .exp-col .list{ text-align:left; width:fit-content; margin-left:auto; margin-right:auto; }
.sol-line{ display:flex; align-items:baseline; gap:8px; font-size:13.5px; line-height:1.45;
  color:var(--muted-fg); padding:7px 0; border-top:1px solid var(--border-subtle); }
.sol-line:first-of-type{ border-top:0; }
.sol-line .n{ font-family:var(--font-mono); font-size:10.5px; color:var(--gold-deep); }
/* Écosystème : la TÊTE de colonne est centrée (picto et nom de l'expertise),
   les lignes numérotées gardent leur fer à gauche. Centrées, leurs numéros
   se plaçaient selon la longueur de chaque libellé : 25 px d'écart mesurés
   entre le 01 et le 02. Une colonne de chiffres doit tenir un axe. */
.sol-grid .exp-col .picto{ margin-left:auto; margin-right:auto; }
.sol-grid .exp-col .x{ justify-content:center; }

/* --- 06 la frise --------------------------------------------- */
.frise{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:6px; list-style:none; padding:0; }
.frise li{ padding:0 34px; border-left:1px solid var(--border-subtle); }
.frise li:first-child{ padding-left:0; border-left:0; }
.frise .step{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-warm); display:block; margin-bottom:14px; }
.frise h3{ font-size:23px; font-weight:600; line-height:1.15; color:var(--navy-deep); margin-bottom:10px; }
/* Frise en colonne, quand elle partage la rangée avec une photo : les
   traits verticaux qui séparaient les trois étapes deviennent horizontaux. */
.duo-deroule{ grid-template-columns:340px minmax(0,1fr); align-items:center; }
/* Le téléphone est à GAUCHE : à droite, son débordement passait sous les
   flèches de navigation, qui vivent dans ce coin de la diapositive. */
.duo-appli{ grid-template-columns:300px minmax(0,1fr); align-items:center; }
/* Anesthésie clé en main : le chapeau et la photo se répondent, les trois
   cartes restent en rangée pleine largeur en dessous. Le cadrage suit le bas
   de l'image, là où se trouvent l'enfant et le masque. */
.duo-clemain{ grid-template-columns:minmax(0,1fr) 300px; align-items:stretch; }
.media-fill.media-clemain{ width:100%; }
.media-fill.media-clemain img{ object-position:50% 55%; }
/* iPhone dessiné en CSS plutôt qu'en image : reste net à toute échelle, ne
   pèse rien et ne dépend d'aucun mockup. Le châssis déborde volontairement
   du bas de la diapositive, que .slide rogne. */
/* Le téléphone est plus haut que la rangée : on le coupe à la hauteur du
   cadre et on le fait fondre dans le fond, plutôt que de le laisser déborder
   sur le bouton, le monogramme ou les flèches, qui vivent tous en bas. */
.iphone-cadre{ position:relative; margin:0; height:400px; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 74%, transparent 99%);
  mask-image:linear-gradient(#000 74%, transparent 99%); }
.iphone-cadre .iphone{ position:absolute; top:0; left:0; width:100%; }
.iphone{ position:relative; width:100%; aspect-ratio:390/844; padding:2.4%;
  border-radius:13%/6%; background:linear-gradient(160deg,#24425f,#0F2138 55%);
  box-shadow:0 40px 70px -34px rgba(15,33,56,.65), inset 0 0 0 1px rgba(255,255,255,.14); }
.iphone-ecran{ position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:11%/5.2%; background:var(--navy-deep); }
.iphone-ecran img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center; display:block; }
.iphone-ile{ position:absolute; left:50%; top:2.6%; transform:translateX(-50%);
  width:30%; height:3.1%; border-radius:9999px; background:#060D16; z-index:2; }
.frise-verticale{ grid-template-columns:minmax(0,1fr); gap:18px; margin-top:0; }
.frise-verticale li{ padding:0; border-left:0; }
.frise-verticale li + li{ border-top:1px solid var(--border-subtle); padding-top:18px; }
.frise-verticale .step{ margin-bottom:7px; }
.frise-verticale h3{ font-size:20px; margin-bottom:6px; }

/* --- 08 formation -------------------------------------------- */
.src-logo{ width:104px; height:auto; display:block; }
.badge-new{ display:inline-block; padding:4px 11px; border-radius:9999px; background:var(--teal-deep);
  color:#fff; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }

/* --- 11 témoignages ------------------------------------------ */
.quote-big{ font-family:var(--font-display); font-style:italic; font-weight:470; font-size:22px;
  line-height:1.56; color:var(--navy-deep); text-wrap:pretty; }
.quote-sm{ font-family:var(--font-display); font-style:italic; font-weight:470; font-size:15px;
  line-height:1.55; color:var(--navy-deep); text-wrap:pretty; }
.mark{ font-family:var(--font-display); font-weight:500; font-size:86px; line-height:.5;
  color:rgba(165,130,42,.34); display:block; height:34px; }
.attr .n{ display:block; font-family:var(--font); font-weight:600; font-size:14px; color:var(--navy-deep); }
.attr .r{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  color:var(--muted-fg); margin-top:3px; }
/* Le site d'un confrère cité : un lien doit se voir comme un lien, et `a`
   hérite de la couleur par défaut dans ce socle. */
.attr .r a{ color:var(--gold-warm); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:rgba(123,89,18,.5); }
.portrait{ width:60px; height:60px; border-radius:50%; object-fit:cover; display:block;
  border:2px solid rgba(165,130,42,.35); }

/* --- 12 l'équipe --------------------------------------------- */
.team{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:15px 18px; }
.team figure{ margin:0; }
.team img{ width:100%; height:168px; object-fit:cover; object-position:center 16%;
  border-radius:14px; display:block; filter:saturate(.92); }
.team .n{ display:block; margin-top:9px; font-family:var(--font-display); font-weight:600; font-size:14.5px;
  line-height:1.15; color:#fff; }
.team .r{ display:block; margin-top:3px; font-size:11.5px; line-height:1.3; color:rgba(255,255,255,.6); }

/* --- 13 le carton gravé -------------------------------------- */
.cgrave{ position:relative; width:664px; margin:0 auto; text-align:center; background:var(--gray-warm);
  border:1px solid rgba(165,130,42,.55); border-radius:4px; padding:48px 56px 42px;
  box-shadow:0 24px 48px -32px rgba(15,33,56,.35); }
.cgrave::after{ content:''; position:absolute; inset:9px; border:1px solid rgba(165,130,42,.32);
  border-radius:2px; pointer-events:none; }
.cgrave .wm{ width:186px; }
.cgrave-rule{ display:flex; align-items:center; justify-content:center; gap:12px; margin:16px 0;
  color:var(--gold-deep); font-size:12px; }
.cgrave-rule::before,.cgrave-rule::after{ content:''; width:64px; height:1px; background:rgba(165,130,42,.4); }
.cgrave-sub{ font-family:var(--font); font-size:11px; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-warm); }
.cgrave-invite{ margin-top:12px; font-family:var(--font-display); font-style:italic; font-weight:480;
  font-size:16px; color:var(--muted-fg); }
.cgrave-tel{ display:block; margin:18px 0 2px; font-family:var(--font-mono); font-weight:500;
  font-size:34px; letter-spacing:.01em; color:var(--navy-ink); }
/* align-self:center sur l'étiquette : sans elle, le dt (11px) s'étire sur
   toute la rangée et son texte se cale en HAUT, donc « MATIN » flottait
   au-dessus de sa propre valeur (14px). Le carton du site porte la règle
   depuis toujours, le dossier l'avait perdue en le recopiant. */
.cgrave-hours{ display:grid; grid-template-columns:auto auto; gap:5px 26px; justify-content:center; margin-top:12px; }
.cgrave-hours dt{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-fg); text-align:right; align-self:center; }
.cgrave-hours dd{ margin:0; font-family:var(--font-mono); font-size:14px; color:var(--navy-ink);
  text-align:left; align-self:center; }
.cgrave-note{ margin-top:9px; font-size:12.5px; color:var(--muted-fg); }
.cgrave-mail{ display:block; margin-top:14px; font-family:var(--font-mono); font-size:14px;
  color:var(--navy-deep); text-decoration:underline; text-decoration-color:rgba(165,130,42,.45);
  text-underline-offset:4px; }
.cgrave-doors{ display:flex; justify-content:center; gap:30px; margin-top:18px; font-size:13.5px;
  font-weight:600; color:var(--navy-deep); }
.cgrave-doors span{ text-decoration:underline; text-decoration-color:rgba(165,130,42,.45); text-underline-offset:4px; }
/* --- mobile : le 16:9 devient une page qui se déroule ---------
   Un cadre fixe mis à l'échelle donne une vignette illisible sur un
   téléphone (à 390 px de large, le facteur tombe à 0,30 et le corps de
   texte à 4 px). Sous 900 px on abandonne donc la diapositive : chaque
   écran redevient une section empilée, à la taille réelle du texte.
   Les mises en page viennent de CLASSES et non de styles en ligne,
   sans quoi rien ici ne pourrait les replier. -------------------- */
@media (max-width:900px){
  html,body{ height:auto; background:var(--gray-warm); }
  /* La vignette passe en bandeau au-dessus du titre : à 375 px, la garder
     à gauche laissait 79 px au titre, qui se brisait en quatre lignes. */
  .carte-tete{ flex-direction:column; gap:14px; }
  .carte-tete-titre{ flex-direction:column; align-items:stretch; gap:12px; }
  .carte-tete-prix{ text-align:left; }
  .vignette-tete{ width:100%; height:150px; border-radius:12px; }
  .deck{ position:static; display:block; overflow:visible; }
  .slide{ position:static; width:100%; height:auto; transform:none;
    opacity:1; visibility:visible; transition:none; }
  .slide.is-on .rise{ animation:none; }
  .pad{ position:static; display:block; padding:40px 20px 32px; }
  /* Le ressort élastique du 16:9 n'a plus de sens dans une page qui se
     déroule, mais il portait TOUTE la séparation entre un bloc et le
     suivant (frise et ses appels, cartes et leur note, colonnes et leur
     bandeau) : le masquer collait les textes les uns aux autres. Il
     devient donc une simple respiration de hauteur fixe. */
  .spacer{ flex:none; height:30px; }
  /* Le bas de page de diapositive (logo + nom de section) n'a plus d'objet
     dans une page qui se déroule : l'eyebrow titre déjà chaque section, et
     deux barres se retrouvaient collées à chaque changement de fond. */
  .chrome{ display:none; }
  .nav-wrap{ display:none !important; }

  .t1{ font-size:34px; } .t2{ font-size:27px; }
  .lede{ font-size:15px; } .p{ font-size:14px; } .h3{ font-size:17.5px; }
  .eyebrow{ font-size:10.5px; letter-spacing:.14em; }
  .list li{ font-size:13.5px; }

  .cover{ display:block; }
  /* 24px ne suffisaient pas : en pile, la photo touchait presque la ligne
     « cadre de pratique » des chiffres juste au-dessus. */
  .cover-media{ aspect-ratio:3/2; margin-top:44px; }
  .media-fill{ aspect-ratio:16/10; }
  /* Les photos de personnes partagent UN seul format en pile : trois
     bornages différents donnaient trois tailles et trois formes d'une
     diapositive à l'autre. */
  .media-fill.media-portrait,
  .media-fill.media-poignee,
  .media-fill.media-clemain{ aspect-ratio:4/5; max-width:300px;
    margin-left:auto; margin-right:auto; }
  /* Le téléphone suit la même borne : en pile il occupait 335 px de large,
     plus que les photos des autres diapositives. */
  /* width:100% obligatoire : le châssis est en absolu, donc sans largeur
     imposée les marges auto ramènent le cadre à zéro. */
  .iphone-cadre{ width:100%; max-width:300px;
    margin-left:auto; margin-right:auto; }
  /* Sauf le cadre portrait : en 16/10 la fenêtre devient si large que le
     sujet, qui vit à 68 % de la largeur de l'original, ne peut plus être
     centré sans sortir par la droite. En 4/5 il retombe au milieu. */
  /* Le portrait garde son rapport, mais on le borne : à pleine largeur il
     faisait 560x700 en tablette et écrasait la page. */
  .duo-deroule{ grid-template-columns:minmax(0,1fr); }
  .duo-appli{ grid-template-columns:minmax(0,1fr); }
  .duo-clemain{ grid-template-columns:minmax(0,1fr); }
  /* La photo de l'induction garde son rapport de diapositive : en 16/10 la
     tranche coupait soit les deux soignants, soit l'enfant. */
  .media-band{ height:auto; aspect-ratio:16/9; }
  /* En page qui se déroule, une seule section porte .is-on : l'icône joue
     donc son tour au chargement. */
  .ic-refresh svg{ animation:tourne 1s cubic-bezier(.5,0,.2,1) 1 both; }
  .cover-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  /* En pile, l'écart ENTRE deux blocs doit être franchement plus grand que
     l'écart DANS un bloc (un titre colle à son paragraphe de 6 à 9 px) :
     à 20 px les deux se confondaient et la page se lisait d'un seul tenant.
     Un filet sépare en plus les colonnes d'expertise, qui n'ont pas de carte
     pour les délimiter. */
  .grid2,.grid3,.grid4,.duo,.duo-large,.duo-photo,.sol-grid,.garanties{
    grid-template-columns:minmax(0,1fr); gap:32px; }
  .exp-col + .exp-col{ border-top:1px solid var(--border-subtle); padding-top:28px; }
  /* Écosystème en pile : chaque ligne de solution traînait un filet sur
     toute la largeur pour deux ou trois mots. Seuls les filets qui séparent
     les quatre expertises sont conservés. */
  .sol-grid .sol-line{ border-top:0; padding:5px 0; justify-content:center; text-align:center; }
  /* La grille 2 x 2 redevient une pile : sans ce filet de sécurité, le trait
     vertical de la 2e colonne et ses paddings restaient collés aux blocs (la
     règle de grille est plus spécifique que .exp-col + .exp-col). */
  .grid-avantages .exp-col,
  .grid-avantages .exp-col:nth-child(2n),
  .grid-avantages .exp-col:nth-child(n+3){ padding:0; border-left:0; border-top:0; }
  .grid-avantages .exp-col + .exp-col{ border-top:1px solid var(--border-subtle); padding-top:28px; }
  .garanties > div + div{ border-top:1px solid rgba(255,255,255,.14); padding-top:24px; }
  .bls-corps{ flex-direction:column; align-items:stretch; gap:18px; }
  .bls-corps .src-logo{ align-self:center; }
  .hubrow{ display:block; }
  .hub{ margin:0 auto 24px; }
  /* Même piège pour l'arc des atouts : ses points visent quatre colonnes qui
     n'existent plus en mobile, mais sa hauteur séparait le titre des
     colonnes. On retire le tracé, on garde la respiration. */
  .arcwrap{ height:22px; margin:0; }
  .arcwrap svg{ display:none; }
  .frise{ grid-template-columns:minmax(0,1fr); }
  .frise li{ padding:18px 0 0; border-left:0; border-top:1px solid var(--border-subtle); }
  .frise li:first-child{ padding-top:0; border-top:0; }
  .quote-big{ font-size:18px; }
  .team{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px; }
  .team img{ height:auto; aspect-ratio:1/1; }
  .cgrave{ width:100%; padding:32px 22px 28px; }
  .cgrave .wm{ width:150px; }
  .cgrave-tel{ font-size:26px; padding:6px 0; }
  .cgrave-doors{ flex-direction:column; gap:14px; }
  /* cibles tactiles : 44 px de haut minimum (HIG) */
  .btn{ width:100%; justify-content:center; min-height:46px; }
  /* En pile, le libellé passe sur deux lignes : le filet du dessous se
     retrouvait tout en bas d'une boîte pleine largeur, détaché de son texte,
     et se lisait comme un trait égaré. Sur mobile le lien se souligne. */
  .btn-ghost{ padding:11px 0; border-bottom:0; text-decoration:underline;
    text-decoration-thickness:1px; text-underline-offset:4px;
    text-decoration-color:rgba(165,130,42,.6); }
  .cgrave-mail,.cgrave-doors a{ display:inline-block; padding:10px 0; }
}

/* --- impression : une diapositive = une page ----------------- */
@page{ size:1280px 720px; margin:0; }
@media print{
  html,body{ background:#fff; height:auto; }
  .deck{ position:static; display:block; }
  .slide{ position:static !important; opacity:1 !important; visibility:visible !important;
    transform:none !important; break-after:page; page-break-after:always; }
  .slide:last-child{ break-after:auto; page-break-after:auto; }
  .slide.is-on .rise{ animation:none !important; }
  .nav-wrap{ display:none !important; }
}
/* Tablette et grand téléphone : en pleine largeur, la colonne unique donnait
   des lignes de près de 100 caractères, bien au-delà du confort de lecture
   (65 à 75). On plafonne la colonne et on la centre ; l'équipe repasse à
   trois portraits par rangée, qui restent lisibles à cette largeur. */
@media (min-width:600px) and (max-width:900px){
  .media-fill.media-portrait{ max-width:340px; }
  .pad{ max-width:600px; margin:0 auto; }
  .lede{ font-size:16px; } .p{ font-size:15px; } .list li{ font-size:14.5px; }
  .team{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Filet de secours : si le navigateur ignore la taille de page ci-dessus et
   imprime en A4 paysage (~1123 px de large), la diapositive de 1280 px serait
   coupée à droite. On la réduit alors par « zoom », qui agit sur la mise en
   page elle-même, là où un « transform » laisserait le débordement. */
@media print and (max-width:1200px){
  .slide{ zoom:.86; }
}