/* ============================================================
   KrenoW · système de design « Ivoire »
   Refonte 2026-09. Remplace le build Tailwind purgé (style.css),
   dont 24 classes utilisées manquaient au CSS compilé.
   Un seul fichier, des variables, aucune dépendance.
   ============================================================ */

/* ---------- 1. Jetons ---------- */
/* ---------- Polices auto-hébergées ----------
   Inter et Syne servies depuis le site : plus aucun appel à Google avant
   consentement, deux origines tierces en moins sur le chemin critique,
   et le cache d'un an du .htaccess s'applique. Sous-ensembles latin et
   latin-ext : le site est en français, le latin couvre é, œ, €, ’ et
   l'espace fine insécable. Les deux fichiers latin sont préchargés. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-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:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-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:'Syne';font-style:normal;font-weight:600 800;font-display:swap;src:url(fonts/syne-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:'Syne';font-style:normal;font-weight:600 800;font-display:swap;src:url(fonts/syne-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}

/* Sans repli calibré, les titres s'affichent 16 % trop étroits avant l'arrivée de
   Syne, puis s'élargissent : le H1 change de nombre de lignes et toute la page
   descend. size-adjust aligne les chasses du repli sur celles de Syne (écart
   mesuré : 0,01 %). La hauteur de ligne est fixée en CSS et ne bouge pas.
   Recalibrer si la police change : comparer la largeur d'une même phrase à 100 px
   en 'Syne' et en 'Syne repli', puis corriger size-adjust du rapport obtenu. */
/* Même méthode pour Inter, qui porte tout le corps de texte : sans ce repli,
   les paragraphes s'affichaient 7 % trop étroits avant l'arrivée de la police.
   Mesuré sur une phrase du site à 100 px : 106,7 % en 400, 108,6 % en 600. */
@font-face{
  font-family:'Inter repli';
  src:local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust:107.7%;
  font-weight:400 700;
  font-display:swap;
}
@font-face{
  font-family:'Syne repli';
  src:local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust:120.5%;
  font-weight:600 800;
  font-display:swap;
}
:root{
  /* Palette : primitives immuables, jamais redéfinies ailleurs. Toute couleur de la
     feuille pointe vers elles, les triplets -rgb servent aux transparences.
     Les jetons sémantiques (--ink, --bg…) changent selon la zone ; elles, jamais. */
  --p-blanc:#FFFFFF;          --p-blanc-rgb:255,255,255;
  --p-ivoire:#F1ECDF;         --p-ivoire-rgb:241,236,223;
  --p-lin:#EDE8DE;
  --p-sable:#E7E0D0;
  --p-craie:#E2DCD0;
  --p-grege:#DCD3C0;
  --p-mastic:#CDC5B6;
  --p-galet:#8F8776;
  --p-taupe-clair:#6F685C;
  --p-taupe:#5A5349;
  --p-gris:#444444;
  --p-encre:#1A1714;          --p-encre-rgb:26,23,20;
  --p-noir:#000000;           --p-noir-rgb:0,0,0;

  --p-lait-peche:#FCEDE3;
  --p-rose-poudre:#FBE9DF;
  --p-peche:#F6C6A8;
  --p-peche-douce:#F6C6AC;
  --p-abricot:#FFB38A;
  --p-orange:#F28856;         --p-orange-rgb:242,136,86;
  --p-orange-brule:#E0763F;
  --p-rouille:#A34A1A;        --p-rouille-rgb:163,74,26;
  --p-rouille-sombre:#93411A;
  --p-cuivre:#78421A;         --p-cuivre-rgb:120,66,26;
  --p-brun:#231A12;

  --p-vert-brume:#D5E8DC;
  --p-vert-sauge:#BFDCC9;
  --p-menthe:#8FD1A8;
  --p-vert:#2E7D4F;           --p-vert-rgb:46,125,79;
  --p-vert-sombre:#1F6B43;

  /* surfaces, du plus clair au plus dense */
  --bg:var(--p-ivoire);
  --surface:var(--p-blanc);
  --sunken:var(--p-sable);
  --deep:var(--p-grege);

  /* encres, contrastes WCAG mesurés sur --bg */
  --ink:var(--p-encre);      /* 16.1 · AAA */
  --ink-2:var(--p-taupe);    /*  6.9 · AA  */
  --ink-3:var(--p-taupe-clair);    /*  5.0 · AA  */

  --line:var(--p-craie);
  --line-2:var(--p-mastic);
  --line-3:var(--p-galet);   /* 3,1 sur ivoire : bordures de composants (WCAG 1.4.11) */

  /* orange : aplat pour les fonds, encre pour le texte.
     #F28856 en texte sur ivoire = 2.25, insuffisant. Ne jamais l'utiliser en couleur de texte. */
  --accent:var(--p-orange);
  --accent-hover:var(--p-orange-brule);
  --accent-ink:var(--p-rouille);   /* 5.3 · AA */
  --accent-soft:var(--p-peche);
  --accent-wash:var(--p-lait-peche);
  --on-accent:var(--p-brun);    /* 7.2 sur l'aplat orange · AAA */

  --focus:var(--p-rouille);

  /* typographie */
  --display:'Syne', 'Syne repli', system-ui, sans-serif;
  --text:'Inter', 'Inter repli', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* rythme */
  --gutter:clamp(18px, 4vw, 32px);
  --section:clamp(52px, 7vw, 96px);
  /* Échelle du texte courant : six paliers distincts, au lieu de seize tailles entre
     9,5 et 19 px que l’œil ne distinguait pas. */
  --fs-label:11px;     /* sur-titres, pastilles, étiquettes des maquettes */
  --fs-caption:12.5px; /* légendes, en-têtes de tableau, mentions du pied */
  --fs-small:14px;     /* texte fin porteur d’information, fil d’Ariane, boutons compacts */
  --fs-ui:15.5px;      /* texte des cartes, listes, boutons */
  --fs-body:17px;      /* corps des articles, questions de FAQ */
  --fs-lead:19px;      /* intertitres des articles */
  /* Rayons : quatre paliers, plus le cercle. */
  --radius-xs:8px;
  --radius-pill:999px;
  --radius:14px;
  --radius-s:10px;
  --shell:1080px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
:target,main :focus-visible{scroll-margin-top:88px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--text);
  font-size:16px;
  line-height:1.62;
  -webkit-text-size-adjust:100%;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
ul,ol{margin:0;padding:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-soft);color:var(--ink)}

/* ---------- 3. Typographie ---------- */
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.028em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(32px,5.2vw,56px);font-weight:700;letter-spacing:-.038em;line-height:1.03}
h2{font-size:clamp(26px,3.6vw,40px);font-weight:700}
h3{font-size:clamp(18px,2.1vw,22px);font-weight:700;letter-spacing:-.022em}
h4{font-size:16px;font-weight:700;letter-spacing:-.015em}
.accent{color:var(--accent-ink);display:block}
.kicker{
  font-size:var(--fs-label);font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-ink);
}
.lede{font-size:clamp(16px,1.8vw,18px);color:var(--ink-2);max-width:60ch}
.small{font-size:var(--fs-small);color:var(--ink-2)}
.fine{font-size:var(--fs-small);color:var(--ink-3);max-width:64ch}
strong{font-weight:600;color:var(--ink)}

/* ---------- 4. Structure ---------- */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.band{background:var(--bg)}
.band--sunken{
  background:var(--sunken);
  /* Le palier a été assombri en même temps que la base : les encres les plus
     claires y retombent sous 4,5 (#6F685C donne 4,19 et #A34A1A 4,50 tout juste). */
  --ink-3:var(--p-taupe);      /* 5,77 */
  --accent-ink:var(--p-rouille-sombre); /* 5,30 */
}
.band--deep{
  background:var(--deep);
  /* fond plus dense : les encres claires y tombent sous le seuil AA.
     #6F685C donne 4,04 et #A34A1A 4,34 sur #E3DCCF, il faut 4,5. */
  --ink-3:var(--p-taupe);      /* 5,56 */
  --accent-ink:var(--p-rouille-sombre); /* 5,11 */
}
.band--surface{background:var(--surface)}
.band + .band{border-top:1px solid var(--line)}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(38px,5vw,60px)}
.stack{display:flex;flex-direction:column;gap:clamp(24px,3.2vw,38px)}
.stack--s{gap:14px}
.stack--xs{gap:9px}
.grid{display:grid;gap:16px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.center{text-align:center;align-items:center}
.center .lede,.fine.center{margin-inline:auto}

/* ---------- 5. Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--text);font-size:var(--fs-ui);font-weight:600;line-height:1;
  padding:14px 22px;border-radius:var(--radius-s);border:1px solid transparent;
  cursor:pointer;transition:background-color .18s,border-color .18s,color .18s,transform .12s;
  white-space:nowrap;text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--primary:hover{background:var(--accent-hover)}
.btn--ghost{border-color:var(--line-3);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink-3);background:var(--surface)}
.btn--small{padding:10px 17px;font-size:var(--fs-small)}
.btn--wide{width:100%}
.btn svg{width:14px;height:14px;flex:none}
.actions{display:flex;flex-wrap:wrap;gap:11px}

/* ---------- 6. Composants ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:12px;
}
.card--lead{border-color:var(--line-2);box-shadow:0 1px 2px rgba(var(--p-encre-rgb),.05),0 8px 24px -18px rgba(var(--p-encre-rgb),.28)}
.card p{color:var(--ink-2);font-size:var(--fs-ui)}
.card h3 + p{margin-top:-2px}
/* Un bouton enfant direct d'une carte ou d'une pile s'étirait sur toute la largeur
   et se lisait comme un champ de formulaire. */
.card:not(.center) > .btn,.stack:not(.center) > .btn{align-self:start}

.badge{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:7px 15px;width:fit-content;
}
.badge i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.badge--wash{background:var(--accent-wash);border-color:var(--accent-soft);color:var(--accent-ink)}

.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price b{font-family:var(--display);font-size:clamp(32px,4.2vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1}
.price span{font-size:var(--fs-small);color:var(--ink-2)}

.ticks{list-style:none;display:grid;gap:10px;font-size:var(--fs-ui);color:var(--ink-2)}
.ticks li{display:flex;gap:11px;align-items:flex-start}
.ticks li::before{
  content:"";width:16px;height:16px;border-radius:50%;flex:none;margin-top:4px;
  background:var(--accent-wash);border:1.5px solid var(--accent);
}
.crosses{list-style:none;display:grid;gap:12px}
.crosses li{
  display:flex;gap:12px;align-items:baseline;font-size:var(--fs-ui);color:var(--ink-2);
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.crosses li:last-child{border-bottom:0;padding-bottom:0}
.crosses li::before{content:"";width:14px;height:2px;border-radius:1px;background:var(--accent-ink);flex:none;margin-top:.72em}

.rows{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.rows > div{display:flex;gap:15px;align-items:baseline;padding:18px 20px;font-size:var(--fs-ui)}
.rows > div + div{border-top:1px solid var(--line)}
.rows b{font-family:var(--display);font-size:var(--fs-caption);color:var(--accent-ink);flex:none;letter-spacing:.02em}

.who{display:flex;align-items:center;gap:13px}
.who .initials{
  width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:var(--fs-caption);
  background:var(--accent-wash);border:1px solid var(--accent-soft);color:var(--accent-ink);
}
.who b{display:block;font-size:var(--fs-small)}
.who span{font-size:var(--fs-caption);color:var(--ink-3)}

/* ---------- 7. En-tête ---------- */
.masthead{
  /* Transparent en haut de page, opaque une fois la page défilée (voir « .is-scrolled »).
     Sans JavaScript, la classe html.js est retirée et l'en-tête reste opaque. */
  position:sticky;top:0;z-index:60;
  border-bottom:1px solid transparent;
}
.masthead__in{
  max-width:var(--shell);margin-inline:auto;padding:12px var(--gutter);
  display:flex;align-items:center;gap:20px;
}
.brand{display:block;color:var(--ink);flex:none;width:122px}
.brand img{width:100%;height:auto}
.mainnav{display:flex;gap:22px;margin-left:auto;font-size:var(--fs-small)}
.mainnav a{color:var(--ink-2);font-weight:500;padding-block:6px;border-bottom:2px solid transparent;white-space:nowrap}
/* Sept entrées : on resserre l’espacement avant le passage au menu mobile, puis on retire
   « Accueil » de la barre sous 880 px (le logo y mène) plutôt que de couper un libellé. */
@media (max-width:1100px){.mainnav{gap:14px}}
@media (max-width:880px){.mainnav a[href="index.html"]{display:none}}
.mainnav a:hover{color:var(--ink)}
.mainnav a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.burger{
  display:none;margin-left:auto;background:none;border:0;padding:8px;color:var(--ink);cursor:pointer;
}
.burger svg{width:24px;height:24px}
.drawer{display:none}
@media (max-width:820px){
  .mainnav{display:none}
  .burger{display:block}
  .masthead__in .btn{display:none}
  .drawer{
    display:block;max-height:0;overflow:hidden;visibility:hidden;background:var(--bg);
    border-bottom:1px solid var(--line);transition:max-height .3s ease,visibility 0s .3s;
  }
  .drawer[data-open="true"]{max-height:480px;visibility:visible;transition:max-height .3s ease,visibility 0s}
  .drawer ul{list-style:none;padding:8px var(--gutter) 20px;display:grid;gap:2px;max-width:var(--shell);margin-inline:auto}
  .drawer a{display:block;padding:13px 0;font-size:16px;color:var(--ink-2);border-bottom:1px solid var(--line)}
  .drawer a[aria-current="page"]{color:var(--ink);font-weight:600}
  .drawer a.btn--primary{color:var(--on-accent);border-bottom:0}
  .drawer .btn{margin-top:14px}
}

/* ---------- 8. Pied ---------- */
.sitefoot{
  background:var(--deep);border-top:1px solid var(--line-2);
  /* même correction de contraste que .band--deep, ce fond est plus dense */
  --ink-3:var(--p-taupe);--accent-ink:var(--p-rouille-sombre);
}
.sitefoot__in{
  max-width:var(--shell);margin-inline:auto;padding:clamp(32px,4vw,46px) var(--gutter);
  display:grid;gap:26px;
}
.sitefoot__top{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
.sitefoot nav{display:flex;flex-wrap:wrap;gap:9px 22px;margin-left:auto;font-size:var(--fs-small)}
.sitefoot nav a{color:var(--ink-2)}
.sitefoot nav a:hover{color:var(--ink)}
.sitefoot__legal{
  display:flex;flex-wrap:wrap;gap:9px 20px;align-items:center;
  padding-top:20px;border-top:1px solid var(--line-2);font-size:var(--fs-caption);color:var(--ink-3);
}
.sitefoot__legal a{color:var(--ink-3)}
.sitefoot__legal a:hover{color:var(--ink-2)}
.linkbtn{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--ink-3);cursor:pointer;text-align:left}
.linkbtn:hover{color:var(--ink-2)}
.social{display:flex;gap:12px;margin-left:auto}
.social a{color:var(--ink-3);display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-xs)}
.social a:hover{color:var(--accent-ink);background:var(--sunken)}
.social svg{width:18px;height:18px}

/* ---------- 9. Utilitaires ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--bg);
  padding:12px 18px;border-radius:0 0 var(--radius-s) 0;font-size:var(--fs-small);font-weight:600;
}
.skip:focus{left:0}
.mt-auto{margin-top:auto}
.nowrap{white-space:nowrap}

/* ---------- 10. Accueil ---------- */

.chat{
  margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 1px 2px rgba(var(--p-encre-rgb),.05),0 18px 40px -30px rgba(var(--p-encre-rgb),.5);
}
.chat__head{display:flex;align-items:center;gap:10px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.chat__avatar{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);font-family:var(--display);font-weight:800;font-size:var(--fs-small);
}
.chat__id b{display:block;font-size:var(--fs-small);line-height:1.25}
.chat__id span{display:block;font-size:var(--fs-caption);color:var(--ink-3)}
.chat__live{
  margin-left:auto;font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-ink);
}
.bubble{padding:11px 14px;border-radius:var(--radius);font-size:var(--fs-small);line-height:1.45;max-width:90%}
.bubble--in{background:var(--sunken);border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start}
.bubble--out{background:var(--accent);color:var(--on-accent);border-bottom-right-radius:5px;align-self:flex-end}
.chat__tag{
  font-size:var(--fs-label);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);
  border:1px dashed var(--line-2);border-radius:var(--radius-s);padding:9px 12px;text-align:center;
}

.lnk{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:500}
.lnk:hover{text-decoration-thickness:2px}


.founders{display:grid;gap:clamp(24px,4vw,44px);align-items:stretch;grid-template-columns:minmax(0,340px) minmax(0,1fr)}
@media (max-width:720px){.founders{grid-template-columns:1fr}}
.founders__photo{border-radius:var(--radius);border:1px solid var(--line);width:100%;height:100%;object-fit:cover}
.founders .photo{display:flex}
/* « Président, cofondateur » passe sur deux lignes, « Cofondateur » sur une :
   sans cette réserve, les deux paragraphes ne partaient pas de la même ligne. */
.founders .card > .kicker{min-height:2.6em}

/* ---------- 11. Formulaire ---------- */
.form{display:grid;gap:17px}
.field{display:grid;gap:6px}
.field label{font-size:var(--fs-small);font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{
  font-family:var(--text);font-size:16px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-3);border-radius:var(--radius-s);
  padding:13px 15px;width:100%;transition:border-color .18s,box-shadow .18s;
}
.field textarea{resize:vertical;min-height:110px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:1}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--accent-ink);outline-offset:2px;border-color:var(--accent-ink);
}
.req{color:var(--accent-ink)}
.opt{font-weight:400;color:var(--ink-3);font-size:var(--fs-caption)}
.notice{
  background:var(--accent-wash);border:1px solid var(--accent-soft);
  border-radius:var(--radius);padding:18px 20px;color:var(--ink);
}

/* ---------- 12. Pages légales ---------- */
.legal{display:grid;gap:2px}
.legal h2{
  font-size:clamp(19px,2.2vw,23px);margin:34px 0 10px;color:var(--ink);
  padding-top:22px;border-top:1px solid var(--line);
}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal h3{font-size:var(--fs-body);margin:20px 0 6px}
.legal p,.legal li{color:var(--ink-2);font-size:var(--fs-ui);margin:0 0 12px}
.legal ul{padding-left:22px;margin:0 0 14px}
.legal li{margin-bottom:7px}
.legal ul{list-style:disc}
.legal a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.legal strong{color:var(--ink)}
.legal table{width:100%;border-collapse:collapse;font-size:var(--fs-small);margin:0 0 16px}
.legal .table-wrap{margin:0 0 16px}
.legal th,.legal td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.legal th{background:var(--sunken);font-weight:600}

/* ---------- 13. Confort tactile ---------- */
@media (pointer:coarse){
  .btn{min-height:44px}
  .btn--small{padding-block:12px}
  .mainnav a,.sitefoot nav a,.sitefoot__legal a{padding-block:10px}
}

/* ---------- 14. Guides ---------- */
.byline{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--fs-small);color:var(--ink-3)}
.prose{max-width:40rem;margin-inline:auto;font-size:var(--fs-body);line-height:1.72}
.guide-head{max-width:40rem;margin-inline:auto}
.guide-offer{max-width:40rem;margin-inline:auto}

/* Fil d’Ariane visible des pages intérieures, reflet du BreadcrumbList balisé */
.crumbs{background:var(--bg);padding-top:14px;font-size:var(--fs-small);color:var(--ink-3)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;list-style:none;margin-block:0}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li + li::before{content:"›";color:var(--ink-3)}
.crumbs a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;padding-block:8px}
.crumbs a:hover{color:var(--ink)}
.crumbs + .band.section{padding-top:clamp(28px,4.5vw,64px)}
/* Pastille « 1 » affichée d’office par le widget : elle annonce un message qui n’existe pas. */
.bk-notification-badge{display:none!important}
/* Mention « assistant automatisé » (règlement européen sur l’IA, article 50), posée par krenow.js. */
.krw-ia-notice{margin:0;padding:8px 14px;font-size:var(--fs-caption);line-height:1.45;color:var(--ink-2);background:var(--bg);border-bottom:1px solid var(--line)}
/* La barre d’action fixe du mobile ne doit jamais masquer l’élément qui a le focus (WCAG 2.4.11). */
@media (max-width:820px){html{scroll-padding-bottom:84px}}
.prose > p:first-of-type{font-size:clamp(17px,1.9vw,19.5px);color:var(--ink);line-height:1.6}
.prose h2{margin:46px 0 14px;font-size:clamp(23px,2.7vw,30px)}
.prose h3{margin:30px 0 10px;font-size:var(--fs-lead)}
.prose p{margin:0 0 18px;color:var(--ink-2)}
.prose ul,.prose ol{padding-left:24px;margin:0 0 20px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin:0 0 9px;color:var(--ink-2)}
.prose li::marker{color:var(--accent-ink)}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:var(--fs-ui);margin:0 0 20px}
.prose .table-wrap{margin:0 0 20px}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--sunken);font-weight:600;color:var(--ink)}

/* ============================================================
   Refonte craft 2026-09-07 · sections 15 à 24.
   Politique de mouvement : huit mouvements autorisés (apparition
   au défilement une fois, survol de carte, pastille qui bat,
   bulles séquencées une fois, points de frappe, flottement des
   cartes ±6 px, bandeau 48 s en pause au survol, anneaux lents).
   Tout passe par prefers-reduced-motion. Rien ne bouge en continu
   au-delà de 6 px. Aucune animation sur le texte de contenu.
   ============================================================ */

/* ---------- 15. Jetons de matière ---------- */
:root{
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.2,.7,.2,1);
  --rise:14px; --dur:.5s;
  --dot:rgba(var(--p-encre-rgb),.085); --dot-on-ink:rgba(var(--p-ivoire-rgb),.07);
  --halo:rgba(var(--p-orange-rgb),.14); --halo-strong:rgba(var(--p-orange-rgb),.28);
  --ok:var(--p-vert-sombre); --ok-dot:var(--p-vert); --ok-wash:var(--p-vert-brume); --ok-line:var(--p-vert-sauge);
  --shadow-1:0 1px 2px rgba(var(--p-encre-rgb),.05),0 8px 24px -18px rgba(var(--p-encre-rgb),.28);
  --shadow-2:0 2px 4px rgba(var(--p-encre-rgb),.06),0 28px 56px -28px rgba(var(--p-encre-rgb),.38);
  --shadow-warm:0 1px 2px rgba(var(--p-encre-rgb),.05),0 14px 30px -20px rgba(var(--p-cuivre-rgb),.38);
  --shadow-warm-lg:0 2px 4px rgba(var(--p-encre-rgb),.05),0 22px 44px -24px rgba(var(--p-cuivre-rgb),.45);
  --shell-wide:1240px; --shell-narrow:760px;
}
.shell--wide{max-width:var(--shell-wide)}
.shell--narrow{max-width:var(--shell-narrow)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:center}
.split--even{grid-template-columns:1fr 1fr}
.split--top{align-items:start}
@media (max-width:880px){.split,.split--even{grid-template-columns:1fr}}
.display{font-size:clamp(40px,5vw,64px);letter-spacing:-.04em;line-height:1}
.h2--xl{font-size:clamp(32px,4.8vw,56px)}
.accent{
  text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.075em;
  text-underline-offset:.13em;text-decoration-skip-ink:none;
}

/* ---------- 16. Trame, halos, bande encre ---------- */
.dot-grid{background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);background-size:24px 24px;background-position:12px 12px}
.dot-grid--fade{
  -webkit-mask-image:radial-gradient(ellipse 72% 64% at 50% 42%,var(--p-noir) 35%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 64% at 50% 42%,var(--p-noir) 35%,transparent 100%);
}
.has-halo{position:relative;isolation:isolate;overflow:hidden}
.has-halo::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 46% 52% at 78% 44%,var(--halo-strong) 0%,transparent 68%),
             radial-gradient(ellipse 60% 40% at 12% 8%,rgba(var(--p-encre-rgb),.045) 0%,transparent 62%);
}
.has-halo--right::before{background:radial-gradient(ellipse 40% 60% at 82% 50%,var(--halo-strong) 0%,transparent 66%)}
.band--ink{
  background:var(--p-encre);color:var(--p-ivoire);
  --bg:var(--p-encre);--ink:var(--p-ivoire);--ink-2:rgba(var(--p-ivoire-rgb),.72);--ink-3:rgba(var(--p-ivoire-rgb),.58);
  --accent-ink:var(--p-orange);--focus:var(--p-orange);
  --line:rgba(var(--p-ivoire-rgb),.12);--line-2:rgba(var(--p-ivoire-rgb),.22);--line-3:rgba(var(--p-ivoire-rgb),.4);
  --surface:rgba(var(--p-ivoire-rgb),.05);--sunken:rgba(var(--p-ivoire-rgb),.035);--deep:rgba(var(--p-ivoire-rgb),.02);
  --accent-wash:rgba(var(--p-orange-rgb),.14);--accent-soft:rgba(var(--p-orange-rgb),.32);
  --dot:var(--dot-on-ink);--shadow-2:0 28px 56px -28px rgba(var(--p-noir-rgb),.6);--shadow-warm:0 18px 40px -22px rgba(var(--p-noir-rgb),.6);
}
.band + .band--ink,.band--ink + .band{border-top:0}
.band--ink .btn--ghost{border-color:rgba(var(--p-ivoire-rgb),.32);color:var(--p-ivoire)}
.band--ink .btn--ghost:hover{background:rgba(var(--p-ivoire-rgb),.08);border-color:rgba(var(--p-ivoire-rgb),.6)}
.band--ink .card{background:var(--surface);border-color:var(--line)}
.band--ink .kicker{color:var(--p-orange)}
.band--ink .grad{background:linear-gradient(115deg,var(--p-orange),var(--p-abricot));-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){.band--ink .grad{color:var(--p-orange)}}
.band--ink .badge--live{background:rgba(var(--p-vert-rgb),.18);border-color:rgba(var(--p-vert-rgb),.4);color:var(--p-menthe)}
.band--ink .badge--live i{background:var(--p-menthe)}
.band--ink .tile{background:rgba(var(--p-ivoire-rgb),.08);border-color:rgba(var(--p-ivoire-rgb),.18);color:var(--p-orange)}
.band--ink .fine{color:var(--ink-3)}
.band--ink .lede{color:var(--ink-2)}

/* ---------- 17. Icônes, tuiles, coches, badges vivants ---------- */
.ico{width:20px;height:20px;flex:none;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ico--s{width:16px;height:16px;stroke-width:2}
.tile{width:42px;height:42px;border-radius:var(--radius-s);flex:none;display:grid;place-items:center;background:var(--accent-wash);border:1px solid var(--accent-soft);color:var(--accent-ink);transition:background-color .2s,border-color .2s}
.tile .ico{width:22px;height:22px;stroke-width:1.6}
.tile--ink{background:var(--sunken);border-color:var(--line-2);color:var(--ink)}
.card .tile{margin-bottom:2px}
.btn .ico{width:16px;height:16px;stroke-width:2;transition:transform .2s var(--ease-out)}
.btn:hover .ico{transform:translateX(2px)}
.ticks li::before{
  content:"";width:16px;height:16px;flex:none;margin-top:3px;border:0;border-radius:0;background:var(--accent-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
.ticks--no li::before{background:var(--ink-3);-webkit-mask:none;mask:none;width:14px;height:2px;border-radius:1px;margin-top:10px}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;margin:0;padding:0}
.facts li{display:flex;align-items:center;gap:9px;font-size:var(--fs-small);font-weight:500;color:var(--ink-2)}
.facts .ico{width:18px;height:18px;color:var(--accent-ink)}
.social svg,.burger svg{stroke-width:1.75}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.badge i{animation:blink 2.2s ease-in-out infinite}
.badge--live{background:var(--ok-wash);border-color:var(--ok-line);color:var(--ok)}
.badge--live i{background:var(--ok-dot);animation:pulse 1.8s ease-in-out infinite}
.chat__live{display:inline-flex;align-items:center;gap:7px}
.chat__live i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;position:relative}
.chat__live i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.25px solid var(--accent);opacity:0;transform:scale(.5);animation:ping 2.4s cubic-bezier(.16,.7,.3,1) infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.8}70%,100%{transform:scale(1.9);opacity:0}}
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pill{font-size:var(--fs-caption);font-weight:500;padding:5px 11px;border-radius:var(--radius-pill);border:1px solid var(--line-2);color:var(--ink-2);background:var(--surface)}

/* ---------- 18. Mouvement ---------- */
html.js .reveal:not(.is-done){opacity:0;transform:translateY(var(--rise))}
html.js .reveal.is-in:not(.is-done){opacity:1;transform:none;transition:opacity var(--dur) ease-out,transform var(--dur) var(--ease-out)}
html.js .reveal-group:not(.is-done) > *{opacity:0;transform:translateY(var(--rise))}
html.js .reveal-group.is-in:not(.is-done) > *{opacity:1;transform:none;transition:opacity var(--dur) ease-out,transform var(--dur) var(--ease-out)}
html.js .reveal-group.is-in:not(.is-done) > :nth-child(2){transition-delay:70ms}
html.js .reveal-group.is-in:not(.is-done) > :nth-child(3){transition-delay:140ms}
html.js .reveal-group.is-in:not(.is-done) > :nth-child(n+4){transition-delay:210ms}
.btn{transition:background-color .18s,border-color .18s,color .18s,transform .15s var(--ease-out),box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn--primary:hover{box-shadow:0 8px 18px -10px rgba(var(--p-rouille-rgb),.6)}
.btn--ghost:hover{box-shadow:0 6px 16px -12px rgba(var(--p-encre-rgb),.35)}
.btn:active{transform:translateY(0);box-shadow:none;transition-duration:.06s}
.card{transition:transform .22s var(--ease-out),box-shadow .25s,border-color .2s}
.card:has(a):hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:var(--shadow-warm)}
.card--lead:has(a):hover{box-shadow:var(--shadow-warm-lg)}
.card:has(a):hover .tile{background:var(--accent-soft);border-color:var(--accent)}
.card--accent{position:relative;overflow:hidden}
.card--accent::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent 0,var(--accent) 22%,var(--accent) 78%,transparent 100%)}
.glass{background:rgba(var(--p-blanc-rgb),.72);border:1px solid rgba(var(--p-blanc-rgb),.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-2),inset 0 1px 0 rgba(var(--p-blanc-rgb),.9);border-radius:var(--radius)}
.mainnav a{transition:color .15s,border-color .15s}
.mainnav a:hover{border-bottom-color:var(--line-2)}
.masthead{transition:background-color .3s,border-color .3s,box-shadow .3s}
.masthead.is-scrolled{box-shadow:0 10px 24px -20px rgba(var(--p-encre-rgb),.35)}
@keyframes bubble-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat{box-shadow:var(--shadow-2)}
.chat .bubble,.chat .chat__tag{animation:bubble-in .45s var(--ease-out) both}
/* Dans une section à révéler, la séquence attend que la section arrive à l'écran :
   sinon elle se joue au chargement, quatre écrans plus haut que le lecteur. */
html.js .reveal:not(.is-in) .chat .bubble,
html.js .reveal:not(.is-in) .chat .chat__tag,
html.js .reveal:not(.is-in) .typing{animation-play-state:paused}
.chat .bubble:nth-of-type(1){animation-delay:.2s}
.chat .bubble:nth-of-type(2){animation-delay:.65s}
.chat .bubble:nth-of-type(3){animation-delay:1.1s}
.chat .chat__tag{animation-delay:1.5s}
.typing{display:inline-flex;gap:4px;padding:11px 14px;background:var(--sunken);border:1px solid var(--line);border-radius:var(--radius);border-bottom-left-radius:5px;align-self:flex-start;animation:bubble-in .45s var(--ease-out) .9s both}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:typing 1.2s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-3px);opacity:1}}
.chat__foot{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;margin-top:4px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--sunken);font-size:var(--fs-caption);color:var(--ink-2)}   /* ink-3 tombe à 4,19 sur ce palier */
.chat__foot .ico{color:var(--accent-ink)}
.chat-wrap{position:relative;padding:62px 0}
.float{position:absolute;z-index:3;padding:12px 14px;min-width:150px}
.float small{display:block;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.float b{display:block;font-family:var(--display);font-size:20px;letter-spacing:-.03em;line-height:1}
.float span{display:block;font-size:var(--fs-label);color:var(--ink-2);margin-top:3px}
.float--tl{top:0;left:18px;animation:float-a 5.5s ease-in-out infinite}
.float--br{bottom:0;right:18px;animation:float-b 6s ease-in-out .5s infinite}
@keyframes float-a{50%{transform:translateY(-6px)}}
@keyframes float-b{50%{transform:translateY(6px)}}
@media (max-width:880px){.chat-wrap{padding:0}.float{display:none}}

/* ---------- 19. Composants de mise en page ---------- */
.feat{list-style:none;display:grid}
.feat li{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--fs-small);color:var(--ink-2);line-height:1.45}
.feat li:last-child{border-bottom:0}
.feat .ico{width:16px;height:16px;flex:none;margin-top:3px;color:var(--accent-ink)}
.feat span{flex:1}
.tier{flex:none;font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:var(--radius-pill);line-height:1.2;margin-top:2px}
.tier--std{background:var(--accent-wash);border:1px solid var(--accent-soft);color:var(--accent-ink)}
.tier--int{background:var(--ink);border:1px solid var(--ink);color:var(--bg)}
/* Trois lignes, pas trois colonnes : la page n'a nulle part ailleurs cette forme,
   et le texte s'y lit à 20 px au lieu de 15 px dans une colonne de 338 px. */
.cases{list-style:none;display:grid;gap:0;margin:0;padding:0}
.cases li{
  display:grid;grid-template-columns:minmax(150px,3fr) minmax(0,7fr) auto;
  gap:clamp(18px,4vw,56px);align-items:baseline;
  padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--line-2);
}
.cases li:last-child{border-bottom:1px solid var(--line-2)}
.cases b{font-family:var(--display);font-weight:700;color:var(--accent-ink);font-size:clamp(34px,5.6vw,76px);line-height:.92;letter-spacing:-.05em}
.cases p{font-size:clamp(17px,1.6vw,20px);line-height:1.42;color:var(--ink);max-width:44ch;text-wrap:pretty}
.cases .lnk{white-space:nowrap;align-self:center}
@media (max-width:820px){
  .cases li{grid-template-columns:1fr;gap:10px;align-items:start;padding:20px 0}
  .cases b{font-size:38px}
  .cases .lnk{align-self:start;justify-self:start}
}
/* Les chiffres du contrat à l'échelle d'un titre, faute d'images. Filets
   verticaux seulement : la bande encre fait déjà le cadre. */
.ledger{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:clamp(48px,6vw,86px)}
.ledger > div{padding-inline:clamp(14px,2.2vw,30px);border-left:1px solid var(--line-2)}
.ledger > div:first-child{padding-left:0;border-left:0}
.ledger b{display:block;font-family:var(--display);font-weight:700;color:var(--ink);font-size:clamp(46px,8.4vw,118px);line-height:.86;letter-spacing:-.055em}
.ledger b i{font-style:normal;font-size:.26em;color:var(--accent-ink);letter-spacing:-.01em;margin-left:.1em;vertical-align:.36em}
.ledger span{display:block;margin-top:16px;font-size:var(--fs-small);line-height:1.45;color:var(--ink-2);max-width:20ch}
@media (max-width:900px){.ledger{grid-template-columns:1fr 1fr;gap:34px 0}.ledger > div:nth-child(odd){padding-left:0;border-left:0}}
@media (max-width:480px){.ledger{grid-template-columns:1fr;gap:26px}.ledger > div{padding-left:0;border-left:0}.ledger b{font-size:clamp(56px,17vw,76px)}}
/* La seule voix humaine de la page prend toute la largeur utile, sans cadre. */
.say{margin:0}
.say blockquote{margin:0;font-family:var(--display);font-weight:700;color:var(--ink);font-size:clamp(26px,3.4vw,44px);line-height:1.12;letter-spacing:-.03em;max-width:30ch;text-wrap:balance}
.say blockquote::before{content:"«\00a0";color:var(--accent)}
.say blockquote::after{content:"\00a0»";color:var(--accent)}
.say figcaption{display:grid;gap:3px;max-width:60ch;margin-top:clamp(30px,4.4vw,56px);padding-top:18px;border-top:1px solid var(--line-2)}
.say figcaption b{font-family:var(--text);font-size:var(--fs-ui);font-weight:600}
.say figcaption > span{font-size:var(--fs-caption);color:var(--ink-3)}
.say figcaption .fine{margin-top:12px}
@media (max-width:640px){.say blockquote{max-width:none;font-size:clamp(23px,6.4vw,30px);letter-spacing:-.025em}}
/* contain:paint : sans lui, le débordement du tableau se propageait au document
   et la page défilait horizontalement à 320 px, malgré overflow-x:auto. */
.table-wrap{overflow-x:auto;overscroll-behavior-x:contain;contain:paint}
.table-wrap:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius-s)}
.compare{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);font-size:var(--fs-small)}
.compare th{font-family:var(--display);font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;padding:14px 18px;background:var(--sunken);text-align:left}
.compare th + th{text-align:center;width:20%}
.compare th.hi{color:var(--p-rouille-sombre)}   /* 5,30 sur le palier sunken, contre 4,50 tout juste pour --accent-ink */
.compare td{padding:12px 18px;border-top:1px solid var(--line);vertical-align:top}
.compare td:first-child{color:var(--ink-2)}
.compare td + td{text-align:center}
.compare .ico{width:16px;height:16px;color:var(--accent-ink);stroke-width:2.5;margin-inline:auto}
.compare .no{color:var(--ink-3)}
.compare--4 th + th{width:22%}
.compare--4 td + td{text-align:left;font-size:var(--fs-small);color:var(--ink-2)}
.compare--4 td.hi{color:var(--ink);background:var(--accent-wash)}
.compare--4 th.hi{background:var(--accent-wash)}
.editorial{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px}
.editorial article{position:relative;padding-top:74px;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:10px}
.editorial article::before{content:attr(data-n);position:absolute;top:2px;right:0;font-family:var(--display);font-weight:700;font-size:64px;line-height:1;letter-spacing:-.05em;color:var(--accent-soft);z-index:0}
.editorial h3{position:relative;z-index:1;font-size:var(--fs-lead)}
.editorial h3 a{color:inherit}
.editorial h3 a:hover{color:var(--accent-ink)}
.editorial p{color:var(--ink-2);font-size:var(--fs-small)}
.editorial .fine{margin-top:auto;padding-top:4px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
.steps li{position:relative;padding-top:58px;display:grid;gap:8px;align-content:start}
.steps li::before{counter-increment:s;content:"0" counter(s);position:absolute;top:0;left:0;width:40px;height:40px;border-radius:var(--radius-s);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:var(--fs-caption);background:var(--accent-wash);border:1px solid var(--accent-soft);color:var(--accent-ink)}
.steps li::after{content:"";position:absolute;top:20px;left:52px;right:-28px;height:1px;background:var(--line-2)}
.steps li:last-child::after{display:none}
.steps small{font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.steps p{color:var(--ink-2);font-size:var(--fs-ui)}
@media (max-width:760px){.steps{grid-template-columns:1fr}.steps li::after{display:none}}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.bento > *{grid-column:span 12}
@media (min-width:760px){.span-7{grid-column:span 7}.span-5{grid-column:span 5}.span-6{grid-column:span 6}}
.milestones{display:flex;align-items:center;gap:0;margin-top:auto;padding-top:14px}
.milestones span{position:relative;flex:1;font-size:var(--fs-label);color:var(--ink-3);padding-top:18px}
.milestones span::before{content:"";position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;border:2px solid var(--line-2);background:var(--surface)}
.milestones span::after{content:"";position:absolute;top:5px;left:12px;right:0;height:2px;background:var(--line)}
.milestones span:last-child::after{display:none}
.milestones .done::before{background:var(--ink);border-color:var(--ink)}
.milestones .now::before{background:var(--accent);border-color:var(--accent)}
.week{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:auto;padding-top:14px}
.week span{font-size:var(--fs-label);text-align:center;padding:9px 4px;border-radius:var(--radius-xs);border:1px solid var(--line);color:var(--ink-3);background:var(--surface)}
.week span b{display:block;font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px;font-weight:600}
.week span.on{background:var(--accent-wash);border-color:var(--accent-soft);color:var(--accent-ink)}
.week span.on b{color:var(--accent-ink)}
.pricebox{border:1px solid var(--accent-soft);background:var(--accent-wash);border-radius:var(--radius-s);padding:14px 16px;display:grid;gap:10px}
.pricebox > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pricebox > div + div{border-top:1px solid var(--accent-soft);padding-top:10px}
.pricebox small{font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.pricebox b{font-family:var(--display);font-size:22px;letter-spacing:-.03em}
.pricebox b.big{font-size:clamp(34px,4vw,44px)}
.pricebox b.big i{font-style:normal;font-size:var(--fs-ui);color:var(--ink-2);letter-spacing:0;margin-left:4px}
.pricebox b.big--txt{font-size:clamp(26px,3vw,34px);letter-spacing:-.025em}
.card--int .pricebox{background:var(--sunken);border-color:var(--line-2)}
.card--int .pricebox > div + div{border-color:var(--line-2)}
@media (max-width:560px){
  .pricebox > div{display:grid;grid-template-columns:1fr;gap:2px}
  .pricebox b{white-space:nowrap}
}
.ribbon{position:absolute;top:14px;right:14px}
.badge--wash{background:var(--accent-wash);border-color:var(--accent-soft);color:var(--accent-ink)}
.photo{position:relative}
.photo::before{content:"";position:absolute;inset:0;transform:translate(12px,12px);border:1.5px solid var(--accent);border-radius:var(--radius);z-index:0}
.photo img{position:relative;z-index:1;border-radius:var(--radius);border:1px solid var(--line-2);box-shadow:var(--shadow-1)}
/* <picture> (WebP avec repli JPEG) ne doit rien changer à la mise en page de la photo. */
.photo picture{display:contents}
.acc{border-bottom:1px solid var(--line)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;font-size:var(--fs-body);letter-spacing:-.015em}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ico{width:20px;height:20px;color:var(--ink-3);transition:transform .3s var(--ease),color .2s}
.acc[open] summary .ico{transform:rotate(45deg);color:var(--accent-ink)}
.acc p{padding:0 0 18px;color:var(--ink-2);font-size:var(--fs-ui);max-width:70ch}
.compare--2{display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(22px,4vw,44px)}
.compare--2 > i{background:var(--line-2)}
.compare--2 h3{font-size:var(--fs-ui);letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
@media (max-width:720px){.compare--2{grid-template-columns:1fr}.compare--2 > i{display:none}}
/* Le bandeau métiers n'est plus une section : c'est le bord haut de la bande
   encre. Il coûtait une frontière de fond, 107 px de hauteur et le seul geste
   pleine largeur de la page, pour 50 mots sans information. */
.rail{
  /* overflow-x:clip : le bandeau des métiers laissait fuir un pixel dans la page. */
  overflow-x:clip;
  display:flex;align-items:center;gap:clamp(18px,3vw,40px);padding-block:14px;
  padding-inline:max(var(--gutter), calc((100% - var(--shell-wide)) / 2));
  border-bottom:1px solid var(--line);
}
.rail__lbl{flex:none;font-size:var(--fs-label);font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-ink)}
.rail .marquee{flex:1;min-width:0;--mdur:64s;--gap:36px}
.rail .marquee li{font-size:var(--fs-small);font-weight:500;color:var(--ink-3)}
@media (max-width:760px){.rail{display:block;padding-block:12px}.rail__lbl{margin-bottom:8px}}
.marquee{--gap:44px;--mdur:48s;contain:paint;display:flex;gap:var(--gap);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,var(--p-noir) 12%,var(--p-noir) 88%,transparent);mask-image:linear-gradient(90deg,transparent,var(--p-noir) 12%,var(--p-noir) 88%,transparent)}
.marquee__track{list-style:none;margin:0;padding:0;flex:none;display:flex;gap:var(--gap);animation:marquee var(--mdur) linear infinite}
.marquee li{display:flex;align-items:center;gap:var(--gap);white-space:nowrap;font-family:var(--display);font-weight:600;font-size:var(--fs-ui);letter-spacing:-.01em;color:var(--ink-2)}
.marquee li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track,.marquee:focus .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-100% - var(--gap)))}}
.mail{border:1px solid var(--line-2);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-2);overflow:hidden;font-size:var(--fs-small)}
.mail__head{display:grid;gap:4px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--sunken)}
.mail__head span{color:var(--ink-3);font-size:var(--fs-caption)}
.mail__head b{font-size:var(--fs-small)}
.mail__body{padding:16px;display:grid;gap:8px;color:var(--ink-2)}
.mail__body dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:6px 0 0}
.mail__body dt{color:var(--ink-3);font-size:var(--fs-caption)}
.mail__body dd{margin:0;color:var(--ink);font-weight:500}

/* ---------- 20. En-tête transparent en haut, opaque au défilement ---------- */
html:not(.js) .masthead,.masthead.is-scrolled{
  background:rgba(var(--p-ivoire-rgb),.9);border-bottom-color:var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}

/* ---------- 21. Hero 3D « Flux clair » (index) : repli SVG immédiat, Three.js au repos ---------- */
.hero-visual{
  position:relative;width:100%;max-width:520px;aspect-ratio:1/1;margin-left:auto;
  isolation:isolate;
}
/* halo blanc très doux derrière la machine : la lumière chaude, pas un néon */
.hero-visual::before{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(var(--p-blanc-rgb),.72) 0%,rgba(var(--p-blanc-rgb),.30) 48%,rgba(var(--p-blanc-rgb),0) 100%);
}
@media (max-width:880px){
  .hero-visual{max-width:none;margin:0;aspect-ratio:4/3}
}

/* Repli CSS/SVG : visible immédiatement, sans JS. Même composition que la 3D
   (cœur, coque, trois stations, rubans, demandes qui arrivent). */
.fb{position:absolute;inset:0;z-index:1;transition:opacity .9s ease}
.fb svg{width:100%;height:100%;display:block;overflow:visible}
.fb .pill{font:600 11px/1 var(--text);letter-spacing:.04em;fill:var(--ink)}
.fb .mark{font:700 11px/1 var(--display);letter-spacing:.18em;fill:var(--ink-2)}
.fb-core{transform-box:fill-box;transform-origin:center;animation:fb-pulse 4s ease-in-out infinite}
.fb-shell{transform-box:fill-box;transform-origin:center;animation:fb-spin 70s linear infinite}
.fb-ribbon{animation:fb-flow 2.6s linear infinite}
.fb-in{animation:fb-flow-in 3.2s linear infinite}
@keyframes fb-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes fb-spin{to{transform:rotate(360deg)}}
@keyframes fb-flow{to{stroke-dashoffset:-34}}
@keyframes fb-flow-in{to{stroke-dashoffset:-22}}

/* Canvas Three.js : fondu par-dessus le repli une fois prêt */
.gl{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity 1.1s ease}
.gl canvas{display:block;width:100%!important;height:100%!important;outline:none;touch-action:pan-y}
.hero-visual.is-3d .gl{opacity:1}
.hero-visual.is-3d .fb{opacity:0}
.hero-visual.is-fallback .fb{opacity:1}   /* WebGL, CDN ou shader KO : le repli reste, marqueur explicite */
.hero-visual.is-3d .fb *{animation-play-state:paused}
.hero-visual.is-3d.can-drag .gl canvas{cursor:grab}
.hero-visual.is-3d.can-drag.is-dragging .gl canvas{cursor:grabbing}

/* Étiquettes HTML positionnées depuis la 3D */
.tags{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .6s ease .35s}
.hero-visual.is-3d .tags{opacity:1}
.hero-visual .tag{
  position:absolute;left:0;top:0;will-change:transform;white-space:nowrap;
  font:600 11px/1 var(--text);letter-spacing:.04em;color:var(--ink);
  background:rgba(var(--p-blanc-rgb),.88);border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px 10px 6px 9px;
  box-shadow:0 1px 2px rgba(var(--p-encre-rgb),.05),0 8px 20px -14px rgba(var(--p-encre-rgb),.45);
  display:inline-flex;align-items:center;gap:7px;
  transition:opacity .35s ease,border-color .2s,color .2s;
}
.hero-visual .tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.hero-visual .tag.is-back{opacity:.58}
.hero-visual .tag.is-hot{border-color:var(--accent);color:var(--accent-ink)}
.hero-visual .tag--mark{font:700 10.5px/1 var(--display);letter-spacing:.2em;color:var(--ink-2);background:transparent;border:0;box-shadow:none;padding:0}
.hero-visual .tag--mark::before{display:none}

@media (prefers-reduced-motion:reduce){
  .fb *,.hero-visual .tag{animation:none!important;transition:none!important}
  .fb,.gl,.tags{transition:none!important}
}

/* ---------- 22. Couches de fond et grille du hero ---------- */
.band--layered{position:relative;isolation:isolate}
.bg-layer{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero-grid > .hero-visual{justify-self:end}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr}.hero-grid > .hero-visual{justify-self:stretch;max-width:520px;margin-inline:auto}}
.hero-copy{display:grid;gap:22px;align-content:center}
.hero-copy .facts{margin-top:6px;padding-top:22px;border-top:1px solid var(--line)}
.band--ink .chat,.band--ink .chat-wrap .glass{--ink:var(--p-encre);--ink-2:var(--p-taupe);--ink-3:var(--p-taupe-clair);--line:var(--p-craie);--line-2:var(--p-mastic);--surface:var(--p-blanc);--sunken:var(--p-lin);--accent-ink:var(--p-rouille);--accent-wash:var(--p-rose-poudre);--accent-soft:var(--p-peche-douce);color:var(--p-encre)}
.band--ink .chat{background:var(--p-blanc);border-color:rgba(var(--p-ivoire-rgb),.18)}
.band--ink .glass{background:rgba(var(--p-blanc-rgb),.96);border-color:rgba(var(--p-blanc-rgb),1)}
.band--ink .compare--2 h3{color:var(--p-ivoire)}
.band--ink .ticks li::before{background:var(--p-orange)}
.band--ink .card--lead{background:rgba(var(--p-ivoire-rgb),.07)}
.band--ink .card h3,.band--ink .card b{color:var(--p-ivoire)}
.band--ink .card p,.band--ink .card li{color:var(--ink-2)}
.card{position:relative}
h1 .accent{color:var(--ink);display:inline}
@media (min-width:981px){.steps--4{grid-template-columns:repeat(4,1fr)}}
@media (max-width:980px) and (min-width:761px){.steps--4{grid-template-columns:1fr 1fr}.steps--4 li:nth-child(2)::after{display:none}}
@media (max-width:760px){.steps--4{grid-template-columns:1fr}}
.chat--s .bubble{font-size:var(--fs-small)}
.chat--s .chat__tag{margin-top:auto}

/* ---------- 23. Équilibre des lignes de titre ---------- */
h1,h2,h3,.display,.h2--xl,blockquote{text-wrap:balance}
.lede,.editorial p{text-wrap:pretty}

/* ---------- 24. Impression ---------- */
@media print{
  html.js .reveal,html.js .reveal-group,html.js .reveal-group > *{opacity:1!important;transform:none!important}
  .masthead,.drawer,.burger,.marquee,.hero-visual,.float,.sitefoot .social,[data-cookies-open]{display:none!important}
  .band,.band--ink,.band--surface,.band--sunken,.band--deep{background:var(--p-blanc)!important;color:var(--p-noir)!important}
  .band--ink *{color:var(--p-noir)!important}
  .section{padding-block:18px}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:var(--fs-label);color:var(--p-gris)}
  .acc[open] p,.acc p{display:block}
  .table-wrap{overflow:visible}
}

/* ---------- 25. Reflow à 320 px (WCAG 1.4.10) ---------- */
/* Un mot plus large que sa colonne faisait déborder toute la page : les titres
   et le corps peuvent couper à l'intérieur d'un mot quand il n'y a plus le choix. */
h1,h2,h3,h4,p,li,td,th,summary,blockquote,.lede,.fine,.kicker{overflow-wrap:break-word}
@media (max-width:400px){
  /* pas de hyphens:auto sur les titres : la coupure automatique met des traits
     d’union dans les titres de marque. overflow-wrap suffit à empêcher le
     débordement, et il ne coupe qu’en dernier recours, sans trait d’union. */
  .pricebox b.big{font-size:clamp(26px,8vw,34px)}
  /* Un libellé de bouton plus long que l'écran imposait sa largeur à toute la
     colonne, et c'est la page entière qui débordait. Sous 400 px il passe à la
     ligne, avec un peu moins de rembourrage. */
  .btn{white-space:normal;line-height:1.25;padding:13px 16px}
  .actions{width:100%}
  .actions > .btn{width:100%}
}

/* ---------- 26. Partition verticale ---------- */
/* Un seul pas de respiration sur 11 sections sur 13 donnait une page métronome.
   Trois valeurs, posées section par section, jamais par défaut. */
.section--open{padding-block:clamp(78px,10vw,148px)}
/* Une section qui continue la précédente : pas de rembourrage haut, pas de filet
   de bande. Cesser de changer de fond à chaque frontière est le seul moyen de
   faire dire quelque chose aux changements qui restent. */
.section--suite{padding-block:0 var(--section)}
.band + .band.section--suite{border-top:0}
.suite{padding-top:clamp(34px,4.4vw,60px);border-top:1px solid var(--line-2)}
/* Titre de rang inférieur, pour les sections de liant. */
.h2--s{font-size:clamp(22px,2.5vw,28px)}
/* Photo documentaire : un rectangle net, sans le cadre décoratif de .photo. */
.photo--doc::before{display:none}

/* ---------- 26. Passe « 90 » : mobile, mouvement, widget ---------- */
/* Semaine type : cinq colonnes qui ne débordent plus à 320 px (WCAG 1.4.12). */
.week{grid-template-columns:repeat(5,minmax(0,1fr))}
.week span{min-width:0;overflow-wrap:anywhere}
/* Le flou de fond coûte cher sur mobile : aplat opaque à la place. */
@media (max-width:880px){
  .masthead.is-scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  .glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(var(--p-blanc-rgb),.96)}
}
/* Animations en pause hors écran, et sur demande du visiteur (WCAG 2.2.2). */
.is-off,.is-off *{animation-play-state:paused!important}
html.is-paused *,html.is-paused *::before,html.is-paused *::after{animation-play-state:paused!important}
html.is-paused .hero-visual .gl{opacity:0!important}
html.is-paused .hero-visual .fb{opacity:1!important}
.rail__pause{flex:none;font-size:var(--fs-caption);white-space:nowrap}
/* Barre d'action mobile : le bouton d'en-tête est masqué sous 820 px, elle le remplace. */
.barre-action{display:none}
@media (max-width:820px){
  .barre-action{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--line-2);
    box-shadow:0 -10px 24px -18px rgba(var(--p-encre-rgb),.35);
  }
  .barre-action .btn{flex:1;justify-content:center}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .bk-launcher-wrapper{bottom:84px!important}
  body:has(.bk-chatbox.active) .barre-action{display:none}
}
@media print{.barre-action{display:none!important}}

/* ---------- 27. Guides : encarts d'offre et relecture ---------- */
.guide-encart{border-color:var(--accent-soft)}
.guide-encart p{max-width:62ch}
.guide-auteur{margin-block:8px 28px}
.guide-auteur p{max-width:66ch;color:var(--ink-2)}

/* ---------- 29. Correctifs de l’audit final ---------- */
/* Bandeau des métiers : sans mouvement, tous les métiers restent lisibles, pas seulement les premiers. */
@media (prefers-reduced-motion:reduce){.marquee{flex-wrap:wrap;row-gap:10px;-webkit-mask-image:none;mask-image:none}.marquee__track{flex-wrap:wrap;animation:none}.marquee__track[aria-hidden]{display:none}}
html.is-paused .marquee{flex-wrap:wrap;row-gap:10px;-webkit-mask-image:none;mask-image:none}
html.is-paused .marquee__track{flex-wrap:wrap;animation:none}
html.is-paused .marquee__track[aria-hidden]{display:none}
/* Zoom à 400 % ou téléphone à l’horizontale : les barres fixes ne mangent plus l’écran (WCAG 1.4.10). */
@media (max-height:480px){.masthead{position:static}.barre-action{display:none!important}html{scroll-padding-top:12px;scroll-padding-bottom:12px}.krw-ia-notice{padding:4px 10px;font-size:var(--fs-label)}.bk-chatbox{max-height:calc(100dvh - 16px)!important;bottom:8px!important}}
/* Widget sur krenow.ai : couleurs d’action au contraste AA avec le blanc (WCAG 1.4.3 et 1.4.11). */
html body .bk-widget-bubble,html body .bk-send-btn{background:var(--p-rouille)!important}
html body .bk-header{background:var(--p-encre)!important}
html body .bk-lang-btn{background:transparent!important;border-color:var(--p-mastic)!important;color:var(--p-blanc)!important}
/* Illustration du hero sur mobile : figée, et libellés lisibles. */
@media (max-width:880px){.fb *{animation-play-state:paused!important}}
@media (max-width:560px){.fb .pill{font-size:17px}}