/* ============================================================
   DIGITAL CORAIL : système de design
   Un seul fichier, aucune dépendance externe, aucune requête tierce.

   Registre : prestige sombre. Fond near-black de la marque, corail et
   bleu en accents. Titres en Montserrat très grasse, même construction
   géométrique que le logo, avec un mot en corail comme signature.
   Texte courant en Archivo. Halos atmosphériques, angles arrondis, de l'air.

   Structure : des « plaques » (.plate) pleine largeur qui redéfinissent
   chacune quatre variables de rôle (--pl-bg, --pl-fg, --pl-fg2,
   --pl-accent). Tous les composants s'y adaptent automatiquement :
   pour changer l'ambiance d'une section, il suffit de changer sa classe.

   Réglages rapides : section « Jetons » ci-dessous.
   ============================================================ */

/* ---------- Police auto-hébergée (aucune requête tierce) ---------- */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';font-style:italic;font-weight:400 900;font-display:swap;
  src:url('../fonts/montserrat-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Jetons ---------- */
:root{
  /* Charte Digital Corail, reprise du site existant */
  --ink:#0C0F0E;        /* fond principal */
  --ink-2:#111614;      /* fond alterné */
  --ink-3:#161C1A;      /* fond alterné clair */
  --paper:#F5F2EE;      /* encre claire : texte sur fond sombre, plaque claire rare */
  --paper-2:#E4E0D9;
  --coral:#ED7969;
  --coral-ink:#B8452F;  /* corail lisible sur fond clair */
  --blue:#83B4C4;
  --blue-ink:#2C6379;   /* bleu lisible sur fond clair */

  --wrap:1180px;
  --gut:clamp(20px,5vw,64px);
  --plate-y:clamp(64px,9vw,132px);

  --ease:cubic-bezier(.16,1,.3,1);

  /* Rôles de plaque, redéfinis par chaque .plate--* */
  --pl-bg:var(--ink);
  --pl-fg:var(--paper);
  --pl-fg2:rgba(245,242,238,.68);
  --pl-accent:var(--coral);
  --pl-rule:rgba(245,242,238,.18);
  --pl-soft:rgba(245,242,238,.05);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  background:var(--ink);
  color-scheme:dark;
  scrollbar-color:var(--coral) var(--ink-2);
}
body{
  font-family:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-variation-settings:'wdth' 100;
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.65;
  color:var(--paper);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* ---------- Surfaces navigateur (elles font partie du design) ---------- */
::selection{background:var(--coral);color:var(--ink)}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.plate--paper :focus-visible{outline-color:var(--coral-ink)}
.plate--coral :focus-visible,.plate--blue :focus-visible{outline-color:var(--ink)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--ink-2)}
::-webkit-scrollbar-thumb{background:var(--coral);border:3px solid var(--ink-2)}
::-webkit-scrollbar-thumb:hover{background:var(--paper)}

/* ---------- Filet de marque ---------- */
.colorbar{height:3px;width:100%;background:linear-gradient(90deg,var(--coral) 0%,var(--coral) 32%,var(--blue) 78%,var(--blue) 100%)}
.colorbar i{display:none}

/* ---------- Plaques ---------- */
.plate{
  background:var(--pl-bg);color:var(--pl-fg);
  padding:var(--plate-y) var(--gut);
  position:relative;
}
.plate--ink{--pl-bg:var(--ink);--pl-fg:var(--paper);--pl-fg2:rgba(245,242,238,.68);--pl-accent:var(--coral);--pl-rule:rgba(245,242,238,.18);--pl-soft:rgba(245,242,238,.05)}
.plate--ink2{--pl-bg:var(--ink-2);--pl-fg:var(--paper);--pl-fg2:rgba(245,242,238,.68);--pl-accent:var(--coral);--pl-rule:rgba(245,242,238,.18);--pl-soft:rgba(245,242,238,.05)}
.plate--ink3{--pl-bg:var(--ink-3);--pl-fg:var(--paper);--pl-fg2:rgba(245,242,238,.7);--pl-accent:var(--coral);--pl-rule:rgba(245,242,238,.2);--pl-soft:rgba(245,242,238,.06)}
.plate--paper{--pl-bg:var(--paper);--pl-fg:var(--ink);--pl-fg2:rgba(12,15,14,.72);--pl-accent:var(--coral-ink);--pl-rule:rgba(12,15,14,.2);--pl-soft:rgba(12,15,14,.05)}
.plate--coral{--pl-bg:var(--coral);--pl-fg:var(--ink);--pl-fg2:rgba(12,15,14,.78);--pl-accent:var(--ink);--pl-rule:rgba(12,15,14,.3);--pl-soft:rgba(12,15,14,.08)}
.plate--blue{--pl-bg:var(--blue);--pl-fg:var(--ink);--pl-fg2:rgba(12,15,14,.76);--pl-accent:var(--ink);--pl-rule:rgba(12,15,14,.28);--pl-soft:rgba(12,15,14,.07)}
.plate--tight{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}
.wrap{max-width:var(--wrap);margin-inline:auto;width:100%}
.wrap--narrow{max-width:760px}

/* Halo atmosphérique (profondeur, pas décoration) */
.plate--glow{overflow:hidden}
.plate--glow::before,.plate--glow::after{
  content:"";position:absolute;pointer-events:none;z-index:0;border-radius:50%;
  filter:blur(10px);
}
.plate--glow::before{
  width:min(760px,90vw);height:min(560px,70vw);top:-14%;right:-12%;
  background:radial-gradient(ellipse at center,rgba(237,121,105,.16) 0%,transparent 68%);
}
.plate--glow::after{
  width:min(640px,80vw);height:min(480px,60vw);bottom:-16%;left:-10%;
  background:radial-gradient(ellipse at center,rgba(131,180,196,.12) 0%,transparent 68%);
}
.plate--glow>*{position:relative;z-index:1}
.plate--marks::before,.plate--marks::after{content:none}

/* ---------- Typographie ---------- */
/* Titres : Montserrat très grasse, même construction que le logo. */
.display,h1,h2,h3{
  font-family:'Montserrat','Archivo',sans-serif;
  font-weight:800;letter-spacing:-.03em;line-height:1.04;text-wrap:balance;text-transform:none;
}
h1,.h1{font-size:clamp(34px,4.4vw,62px);line-height:1.02;letter-spacing:-.035em}
h2,.h2{font-size:clamp(27px,3.4vw,45px);line-height:1.06;letter-spacing:-.032em}
h3,.h3{font-size:clamp(18px,1.6vw,22px);line-height:1.24;letter-spacing:-.02em;font-weight:700}
h4,.h4{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:clamp(15px,1.3vw,17px);letter-spacing:-.01em;line-height:1.2;text-transform:none;
}
/* L'accent de marque : un mot en corail */
em,.em{font-style:normal;color:var(--pl-accent);font-family:inherit;font-weight:inherit}
.h-coral{color:var(--pl-accent)}

.deck{
  font-size:clamp(17.5px,1.75vw,22px);line-height:1.58;font-weight:400;
  letter-spacing:-.004em;max-width:36ch;text-wrap:pretty;color:var(--pl-fg2);
}
.deck strong{color:var(--pl-fg);font-weight:600}
p,li{max-width:68ch;text-wrap:pretty}
.lede{font-size:clamp(16.5px,1.35vw,19px);line-height:1.68;color:var(--pl-fg2)}
.muted{color:var(--pl-fg2)}
strong,b{font-weight:600;color:var(--pl-fg)}
.tag{
  display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;padding:7px 14px;border-radius:50px;
  background:var(--pl-soft);color:var(--pl-fg2);border:1px solid var(--pl-rule);
}
.tag--accent{background:rgba(237,121,105,.1);border-color:rgba(237,121,105,.28);color:var(--pl-accent)}

/* Filet d'affiche */
.rule{height:1px;background:var(--pl-rule);border:0;margin:0}
.rule--thin{height:1px;background:var(--pl-rule);opacity:1}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;border-radius:50px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.005em;
  padding:14px 28px;text-decoration:none;border:1px solid transparent;
  background:var(--coral);color:#12100F;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(237,121,105,.6)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--pl-fg);border-color:var(--pl-rule)}
.btn--ghost:hover{border-color:var(--pl-fg);background:var(--pl-soft);box-shadow:none}
.btn--solid{background:var(--pl-fg);color:var(--pl-bg)}
.btn--solid:hover{box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.btn--sm{padding:11px 20px;font-size:13px}
.btn .i{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btns{display:flex;flex-wrap:wrap;gap:13px}

.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Lien texte souligné proprement */
.lnk{color:var(--pl-accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;font-weight:600}
.lnk:hover{background:var(--pl-accent);color:var(--pl-bg);text-decoration-color:transparent}

/* ---------- En-tête ---------- */
.mast{position:sticky;top:0;z-index:90;background:rgba(12,15,14,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(245,242,238,.09);color:var(--paper);--pl-fg:var(--paper);--pl-fg2:rgba(245,242,238,.62);--pl-rule:rgba(245,242,238,.14);--pl-soft:rgba(245,242,238,.05)}
.mast-in{max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut);height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.mast-logo{display:block;flex:none}
.mast-logo img{height:40px;width:auto}
.mast-nav{display:flex;align-items:center;gap:clamp(12px,1.7vw,26px);list-style:none}
.mast-nav a{
  text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.005em;
  padding:6px 0;color:var(--pl-fg2);white-space:nowrap;transition:color .2s;
}
.mast-nav a:hover,.mast-nav a[aria-current="page"]{color:var(--paper)}
.mast-nav .is-cta{background:var(--coral);color:#12100F;padding:10px 20px;border-radius:50px;font-weight:600}
.mast-nav .is-cta:hover{background:var(--coral);color:#12100F;box-shadow:0 10px 26px -10px rgba(237,121,105,.7)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid rgba(245,242,238,.2);border-radius:50%}
.burger span{display:block;width:20px;height:2px;background:var(--paper);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--paper);transition:transform .28s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.drawer{
  position:fixed;inset:75px 0 0;z-index:80;background:var(--ink);color:var(--paper);
  padding:32px var(--gut) 48px;overflow-y:auto;
  transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);
}
.drawer[data-open="true"]{opacity:1;transform:none;pointer-events:auto}
.drawer a{
  display:block;text-decoration:none;font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:clamp(22px,5.4vw,30px);letter-spacing:-.03em;
  padding:14px 0;border-bottom:1px solid rgba(245,242,238,.12);
}
.drawer a:hover{color:var(--coral)}
.drawer .drawer-cta{margin-top:28px;border:0;border-radius:50px;background:var(--coral);color:#12100F;text-align:center;padding:16px;font-family:'Archivo',sans-serif;font-size:16px;font-weight:600}

/* ---------- Héros ---------- */
.hero{padding-top:clamp(44px,6vw,80px);padding-bottom:clamp(52px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{margin-bottom:22px}
.hero .deck{max-width:34ch;color:var(--pl-fg2)}
.hero-actions{margin-top:30px}
.hero-note{margin-top:18px;font-size:13.5px;color:var(--pl-fg2);font-weight:500}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;align-items:start}}

/* ---------- Comparateur d'épreuve (avant / après) ---------- */
.proof{position:relative;border:1px solid var(--pl-rule);border-radius:18px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.85);background:var(--ink);max-width:360px;width:100%;margin-inline:auto}
.proof-slab{position:relative;aspect-ratio:572/1028;overflow:hidden;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
/* Le <picture> doit être une vraie boîte : sinon le clip-path porte sur une boîte
   inline de 0×0, l'image est intégralement masquée et le chargement différé
   ne se déclenche jamais. */
.proof-slab picture{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
/* Sans ceci, un clic-glisser déclenche le glisser-déposer natif de l'image
   au lieu de déplacer le curseur du comparateur. */
.proof-slab img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;
}
.proof-after{clip-path:inset(0 0 0 50%)}
.proof-bar{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--paper);transform:translateX(-1px);pointer-events:none;z-index:3}
.proof-knob{
  position:absolute;top:50%;left:50%;z-index:4;pointer-events:none;
  width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;
  background:var(--coral);box-shadow:0 6px 22px -4px rgba(237,121,105,.7);
  display:grid;place-items:center;color:#12100F;
}
.proof-knob svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.proof-lab{position:absolute;top:14px;z-index:3;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;padding:6px 12px;border-radius:50px;backdrop-filter:blur(8px)}
.proof-lab.is-before{left:14px;background:rgba(12,15,14,.62);color:rgba(245,242,238,.9);border:1px solid rgba(245,242,238,.18)}
.proof-lab.is-after{right:14px;background:var(--coral);color:#12100F}
.proof-foot{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--pl-rule);background:var(--pl-bg);color:var(--pl-fg)}
.proof-foot div{padding:13px 16px}
.proof-foot div+div{border-left:1px solid var(--pl-rule)}
.proof-foot b{display:block;font-size:13.5px;font-weight:600}
.proof-foot span{font-size:12.5px;color:var(--pl-fg2)}
.proof-hint{margin-top:12px;font-size:12.5px;color:var(--pl-fg2);display:flex;align-items:center;gap:8px}
.proof-hint svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Listing (services, prestations) ---------- */
.listing{border-top:1px solid var(--pl-rule);margin-top:clamp(32px,4vw,52px)}
.listing-row{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) auto;
  gap:10px clamp(24px,3.4vw,52px);align-items:baseline;
  padding:clamp(26px,3vw,38px) 0;border-bottom:1px solid var(--pl-rule);border-radius:14px;
  text-decoration:none;color:inherit;transition:background .2s,padding-inline .25s var(--ease);
}
.listing-row:hover,.listing-row:focus-visible{background:var(--pl-soft);padding-inline:16px}
.listing-row:hover .listing-t{color:var(--pl-accent)}
.listing-t{font-family:'Montserrat',sans-serif;font-size:clamp(20px,2vw,27px);font-weight:700;letter-spacing:-.025em;line-height:1.12;transition:color .25s}
.listing-d{font-size:15.5px;line-height:1.55;color:var(--pl-fg2);max-width:52ch}
.listing-m{font-size:13px;font-weight:500;color:var(--pl-fg2);white-space:nowrap;display:flex;align-items:center;gap:9px}
.listing-m svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.listing-row:hover .listing-m svg{transform:translateX(5px)}
@media(max-width:820px){
  .listing-row{grid-template-columns:1fr;padding-block:22px;gap:8px}
  .listing-m{margin-top:6px}
}

/* ---------- Affiche de secteurs (billing block) ---------- */
.lineup{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.4em 1.6em;text-align:center;margin-top:clamp(28px,3.5vw,44px)}
.lineup a{
  font-family:'Montserrat',sans-serif;font-weight:700;text-decoration:none;
  letter-spacing:-.028em;line-height:1.15;
  font-size:calc(clamp(20px,2.5vw,32px) * var(--s,1));
  transition:color .25s;
}
.lineup a:hover{color:var(--pl-accent)}
.lineup span{display:none}

/* ---------- Fiche de faits (colophon) ---------- */
.facts{display:grid;grid-template-columns:minmax(130px,auto) 1fr;border-top:1px solid var(--pl-rule)}
.facts dt{
  padding:13px 18px 13px 0;border-bottom:1px solid var(--pl-rule);
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--pl-fg2);
}
.facts dd{padding:14px 0;border-bottom:1px solid var(--pl-rule);font-size:16px;font-weight:400}
.facts dd a{color:var(--pl-accent);text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){
  .facts{grid-template-columns:1fr}
  .facts dt{padding-bottom:2px;border-bottom:0}
  .facts dd{padding-top:0;padding-bottom:14px}
}

/* ---------- Étapes (la séquence porte l'information) ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(36px,4.4vw,58px);border-top:1px solid var(--pl-rule)}
.step{padding:30px clamp(18px,2.2vw,32px) 34px 0;border-right:1px solid var(--pl-rule)}
.step:last-child{border-right:0}
.step-n{font-family:'Montserrat',sans-serif;font-size:clamp(34px,3.6vw,46px);font-weight:800;letter-spacing:-.04em;line-height:.9;color:var(--pl-accent);display:block;margin-bottom:16px}
.step h3{margin-bottom:8px}
.step p{font-size:14.5px;line-height:1.6;color:var(--pl-fg2)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}.step:nth-child(2n){border-right:0}.step{padding-right:clamp(14px,3vw,24px)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--pl-rule)}.step:last-child{border-bottom:0}}

/* ---------- Vidéos : façade cliquable (aucun script tiers au chargement) ---------- */
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(28px,3.4vw,44px)}
@media(max-width:900px){.reels{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.reels{grid-template-columns:1fr}}
.vf{position:relative;width:100%;padding:0;border:1px solid var(--pl-rule);border-radius:16px;background:var(--ink);overflow:hidden;display:block;line-height:0;transition:border-color .3s,transform .3s var(--ease)}
.vf:hover{border-color:rgba(237,121,105,.45);transform:translateY(-3px)}
.vf img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.vf-16x9{aspect-ratio:16/9}
.vf-9x16{aspect-ratio:9/16}
.vf iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vf-play{
  position:absolute;inset:0;display:grid;place-items:center;transition:background .25s;
  background:linear-gradient(180deg,rgba(15,37,48,.18),rgba(15,37,48,.5));
}
.vf-play i{
  width:64px;height:64px;background:var(--coral);border-radius:50%;
  box-shadow:0 10px 30px -8px rgba(237,121,105,.75);
  display:grid;place-items:center;transition:transform .25s var(--ease);
}
.vf-play i svg{width:23px;height:23px;fill:#12100F;stroke:none;margin-left:3px}
.vf:hover .vf-play i{transform:scale(1.09)}
.vf:hover .vf-play{background:linear-gradient(180deg,rgba(15,37,48,.05),rgba(15,37,48,.38))}
.vf-cap{
  position:absolute;left:0;right:0;bottom:0;padding:16px 16px 14px;line-height:1.35;
  background:linear-gradient(transparent,rgba(12,15,14,.92) 42%);color:var(--paper);text-align:left;
}
.vf-cap b{display:block;font-size:13.5px;font-weight:600}
.vf-cap span{font-size:11.5px;color:rgba(245,242,238,.66)}

/* ---------- Citation client ---------- */
.quote{border-top:1px solid var(--pl-rule);border-bottom:1px solid var(--pl-rule);padding:clamp(28px,3.6vw,44px) 0;margin-top:clamp(28px,3.4vw,40px)}
.quote blockquote{font-family:'Montserrat',sans-serif;font-size:clamp(20px,2.4vw,31px);font-weight:600;line-height:1.32;letter-spacing:-.022em;max-width:26ch;text-wrap:balance}
.quote figcaption{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.quote-av{width:46px;height:46px;border-radius:50%;background:var(--pl-accent);color:#12100F;display:grid;place-items:center;font-weight:700;font-size:18px;flex:none}
.plate--ink .quote-av{color:var(--ink)}
.quote-n{font-size:15px;font-weight:600;line-height:1.3}
.quote-r{font-size:12.5px;color:var(--pl-fg2)}
.quote-stars{display:flex;gap:3px;margin-bottom:16px}
.quote-stars svg{width:17px;height:17px;fill:var(--pl-accent);stroke:none}

/* ---------- FAQ native (accessible, indexable, sans JS) ---------- */
.faq{border-top:1px solid var(--pl-rule);margin-top:clamp(28px,3.4vw,44px)}
.faq details{border-bottom:1px solid var(--pl-rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 0;display:flex;gap:20px;align-items:flex-start;
  justify-content:space-between;font-size:clamp(17px,1.5vw,20px);font-weight:500;letter-spacing:-.008em;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--pl-accent)}
.faq-sign{position:relative;width:22px;height:22px;flex:none;margin-top:3px}
.faq-sign::before,.faq-sign::after{content:"";position:absolute;background:currentColor;transition:transform .3s var(--ease),opacity .3s}
.faq-sign::before{top:10px;left:0;width:22px;height:2px}
.faq-sign::after{left:10px;top:0;width:2px;height:22px}
.faq details[open] .faq-sign::after{transform:rotate(90deg);opacity:0}
.faq details[open] summary{color:var(--pl-accent)}
.faq-a{padding:0 0 24px;max-width:70ch}
.faq-a p+p{margin-top:12px}
.faq-a p{color:var(--pl-fg2);font-size:16px;line-height:1.68}

/* ---------- Blocs de texte ---------- */
.prose h2{margin:clamp(36px,4vw,54px) 0 16px}
.prose h3{margin:32px 0 10px}
.prose p{margin-bottom:16px;color:var(--pl-fg2);line-height:1.72}
.prose p strong{color:var(--pl-fg)}
.prose ul,.prose ol{margin:0 0 18px 20px;color:var(--pl-fg2)}
.prose li{margin-bottom:9px;line-height:1.65}
.prose li::marker{color:var(--pl-accent);font-weight:700}
.prose>:first-child{margin-top:0}

/* Grille de colonnes de texte, sans cartes */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);margin-top:clamp(32px,4vw,52px)}
.cols>*{border-top:1px solid var(--pl-rule);padding-top:22px}
.cols h3{margin-bottom:10px}
.cols p{font-size:15px;line-height:1.62;color:var(--pl-fg2)}
.cols--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.cols,.cols--2{grid-template-columns:1fr;gap:26px}}

/* Tableau (tarifs, comparatifs) : éligible aux extraits enrichis */
.tbl{width:100%;border-collapse:collapse;margin-top:clamp(26px,3vw,40px);font-size:15.5px}
.tbl caption{text-align:left;padding-bottom:14px;color:var(--pl-fg2);font-size:14px}
.tbl th,.tbl td{padding:15px 16px 15px 0;text-align:left;border-bottom:1px solid var(--pl-rule);vertical-align:top}
.tbl thead th{border-bottom:1px solid var(--pl-rule);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--pl-fg2)}
.tbl tbody th{font-weight:600;width:34%}
.tbl td{color:var(--pl-fg2)}
.tbl .num{font-variant-numeric:tabular-nums;font-weight:500;color:var(--pl-accent);white-space:nowrap}
.tbl-scroll{overflow-x:auto}
@media(max-width:560px){
  .tbl{font-size:14.5px}
  .tbl th,.tbl td{padding:12px 12px 12px 0}
  .tbl tbody th{width:auto}
}

/* Sections en deux colonnes (se réempilent sur mobile) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:start}
.split--media{grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:center}
@media(max-width:880px){.split,.split--media{grid-template-columns:1fr;gap:32px}}

/* Bandeau d'appel */
.callout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:860px){.callout{grid-template-columns:1fr}}

/* Fil d'ariane */
.crumb{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--pl-fg2);margin-bottom:20px;display:flex;gap:9px;flex-wrap:wrap}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--pl-accent)}
.crumb span{opacity:.45}

/* ---------- Pied de page ---------- */
.foot{background:var(--ink-2);color:var(--paper);--pl-bg:var(--ink-2);--pl-fg:var(--paper);--pl-fg2:rgba(245,242,238,.68);--pl-accent:var(--coral);--pl-rule:rgba(245,242,238,.2);padding:clamp(48px,6vw,76px) var(--gut) 28px;border-top:2px solid rgba(245,242,238,.14)}
.foot-in{max-width:var(--wrap);margin-inline:auto}
.foot-top{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:clamp(26px,3vw,44px);padding-bottom:38px;border-bottom:1px solid rgba(245,242,238,.2)}
@media(max-width:1180px){.foot-top{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}
.foot-logo img{height:38px;width:auto;margin-bottom:16px}
.foot-tag{font-size:14px;line-height:1.6;color:rgba(245,242,238,.68);max-width:34ch}
.foot .foot-h{font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,242,238,.5);margin-bottom:16px;font-weight:600;line-height:1.2}
.foot-col a{display:block;text-decoration:none;font-size:14.5px;padding:5px 0;color:rgba(245,242,238,.86)}
.foot-col a:hover{color:var(--coral)}
.social{display:flex;gap:10px;margin-top:20px}
.social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(245,242,238,.2);display:grid;place-items:center;transition:background .2s,border-color .2s,color .2s}
.social a svg{width:17px;height:17px;fill:currentColor;stroke:none}
.social a:hover{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:12.5px;color:rgba(245,242,238,.55)}
.foot-bot a{text-decoration:none}
.foot-bot a:hover{color:var(--coral)}
.foot-bot nav{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- Contact flottant ---------- */
.fab{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;gap:10px}
.fab a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(245,242,238,.14);background:var(--coral);color:#12100F;box-shadow:0 6px 20px -6px rgba(0,0,0,.7);transition:transform .2s var(--ease),background .2s,color .2s}
.fab a svg{width:23px;height:23px;fill:currentColor;stroke:none}
.fab a.is-line svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.proof-hint{max-width:360px;margin-inline:auto}
.fab a:hover{transform:translateY(-3px);box-shadow:0 14px 32px -10px rgba(237,121,105,.75)}
.fab a.is-wa{background:#25D366}
.fab a.is-wa:hover{box-shadow:0 14px 32px -10px rgba(37,211,102,.75)}
@media(max-width:520px){.fab{right:12px;bottom:12px}.fab a{width:48px;height:48px}}

/* ---------- Mouvement : une seule intention, le calage d'encre ---------- */
@keyframes pull{
  0%{opacity:0;transform:translateY(18px);filter:blur(6px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes rise{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
/* Filet de sécurité : si dc.js ne démarre pas (erreur réseau, robot qui
   n'exécute pas les scripts différés), le contenu redevient visible au
   bout de 2,5 s au lieu de rester invisible indéfiniment. */
.anim-fallback .pull,.anim-fallback .rise{opacity:1!important;animation:none!important;transform:none!important;filter:none!important}
.js .pull{opacity:0}
.js .pull.is-in{animation:pull 1s var(--ease) forwards}
.js .rise{opacity:0}
.js .rise.is-in{animation:rise .6s var(--ease) forwards}
.js .is-in.d1{animation-delay:.07s}
.js .is-in.d2{animation-delay:.14s}
.js .is-in.d3{animation-delay:.21s}
.js .is-in.d4{animation-delay:.28s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .js .pull,.js .rise{opacity:1!important;animation:none!important}
  .btn:hover{transform:none}
}

/* ---------- Nav mobile ---------- */
@media(max-width:900px){
  .mast-nav{display:none}
  .burger{display:flex}
  body.is-locked{overflow:hidden}
  /* Zones tactiles confortables au doigt */
  .foot-col a{padding:11px 0}
  /* Aucun libellé sous 12 px sur mobile (critère d'accessibilité et de
     lisibilité contrôlé par les outils d'audit). */
  .tag{font-size:12px}
  .proof-lab{font-size:11.5px}
  .foot .foot-h{font-size:12px}
  .vf-cap span{font-size:12px}
  .facts dt{font-size:12px}
  .tbl thead th{font-size:12px}
  .social a{width:44px;height:44px}
  .foot-bot nav a{display:inline-block;padding:10px 0}
  .lineup{gap:.2em .45em}
  .lineup a{display:inline-block;padding:11px 0}
  .listing-row:hover{padding-inline:0}
  .btn{padding:15px 26px}
}

/* ---------- Impression ---------- */
@media print{
  .mast,.fab,.drawer,.colorbar,.vf-play{display:none!important}
  .plate{padding:16pt 0;background:#fff!important;color:#000!important}
  a{text-decoration:underline}
}

/* ---------- Accessibilité : lien d'évitement ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;font-weight:700}
.skip:focus{left:8px;top:8px}

/* ---------- Consentement aux traceurs ---------- */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:16px clamp(16px,4vw,32px);
  background:var(--ink);color:var(--paper);
  border-top:1px solid rgba(245,242,238,.18);
  box-shadow:0 -10px 40px -20px rgba(0,0,0,.9);
}
.consent-txt{margin:0;font-size:14px;line-height:1.55;max-width:70ch;color:rgba(245,242,238,.82)}
.consent-lnk{color:var(--coral);text-decoration:underline;text-underline-offset:3px}
.consent-act{display:flex;gap:10px;flex-shrink:0}
.consent-btn{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;
  padding:11px 26px;border-radius:50px;cursor:pointer;
  background:var(--paper);color:#12100F;border:1px solid var(--paper);
  transition:transform .2s var(--ease),opacity .2s;
}
.consent-btn:hover{transform:translateY(-1px);opacity:.88}
.consent-btn:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
@media(max-width:600px){
  .consent{flex-direction:column;align-items:stretch;gap:14px}
  .consent-act{justify-content:stretch}
  .consent-btn{flex:1}
}