/* ==========================================================================
   Appskillia — feuille de style du site marchand
   Identité « piste 1B — le A validé », intégrée le 24/08/2026.

   Aucune ressource externe : les deux polices de l'identité sont
   AUTO-HÉBERGÉES (assets/polices/). Un logiciel qui vend la conformité ne peut
   pas expédier l'adresse IP de ses visiteurs à un serveur de polices étranger
   dès le chargement — et le pied de page l'affiche, donc ça doit rester vrai.
   ========================================================================== */

@import url('polices.css');

:root{
  /* ---- identité : les quatre couleurs de la marque ---- */
  --encre:#0C2B2E;      /* texte, symbole, fonds sombres */
  --teal:#12595E;       /* liens, accents d'interface, état validé */
  --corail:#F0563A;     /* marque : symbole, barres, accents, grands chiffres */
  --corail-texte:#C62B0F; /* le même corail, assombri pour le PETIT texte (4,53:1) */
  --sable:#EDE7DC;      /* fonds */

  /* encre */
  --ink:#0C2B2E;
  --ink-2:#4A5F60;
  --ink-3:#5C6B6B;
  /* fonds */
  --paper:#EDE7DC;
  --surface:#FFFFFF;
  --surface-2:#E4DDD0;
  --surface-3:#DED6C7;
  /* traits */
  --line:#DCD4C6;
  --line-2:#C3B9A6;
  /* marque */
  --brand:#0C2B2E;
  --brand-2:#12595E;
  --brand-soft:#DFEAE9;
  --brand-ink:#061B1D;
  /* action */
  --act:#F0563A;
  --act-hover:#DB4A2E;
  --act-soft:#FFE9E3;
  /* sémantique — le teal porte l'état « validé », comme dans la planche */
  --good:#12595E;
  --good-soft:#E2EDEC;
  --warn:#9A6212;
  --warn-soft:#F7EEDD;
  --bad:#9E3226;
  --bad-soft:#F8E7E3;
  /* divers */
  --radius:12px;
  --radius-lg:20px;
  --shadow-1:0 1px 2px rgba(12,43,46,.05), 0 2px 8px -4px rgba(12,43,46,.10);
  --shadow-2:0 2px 4px rgba(12,43,46,.06), 0 18px 40px -22px rgba(12,43,46,.30);
  --shadow-3:0 4px 8px rgba(12,43,46,.07), 0 40px 80px -40px rgba(12,43,46,.40);
  /* typographie de l'identité */
  --display:'Space Grotesk','Instrument Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:var(--display);         /* les titres passent du serif au grotesk */
  --sans:'Instrument Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;
  --wrap:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--brand-2);text-underline-offset:3px}
a:hover{color:var(--brand)}

/* ---------- rythme typographique ---------- */
h1,h2,h3,h4{margin:0 0 .5em;letter-spacing:-.018em;text-wrap:balance;font-weight:600}
h1{font-family:var(--display);font-weight:600;font-size:clamp(33px,5.2vw,56px);line-height:1.04;letter-spacing:-.032em}
h2{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.5vw,38px);line-height:1.12;letter-spacing:-.026em}
h3{font-family:var(--display);font-weight:600;font-size:clamp(18px,2.1vw,22px);line-height:1.28;letter-spacing:-.015em}
h4{font-family:var(--display);font-weight:600;font-size:15.5px;line-height:1.34;letter-spacing:-.008em}
p{margin:0 0 1.1em}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.55;color:var(--ink-2);max-width:62ch}
.small{font-size:14px;line-height:1.55;color:var(--ink-2)}
.tiny{font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.mono{font-family:var(--mono);font-size:.92em}
.eyebrow{
  font-family:var(--display);
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--corail-texte);margin:0 0 14px;
}
.eyebrow.b{color:var(--teal)}
strong,b{font-weight:650}
.nowrap{white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* ---------- ossature ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 22px}
section{padding:clamp(52px,7vw,96px) 0}
section.tight{padding:clamp(36px,4.5vw,60px) 0}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.center{text-align:center}

/* ---------- en-tete ---------- */
.top{
  position:sticky;top:0;z-index:60;background:rgba(237,231,220,.90);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);
}
.top-in{display:flex;align-items:center;gap:20px;height:66px;max-width:var(--wrap);margin:0 auto;padding:0 22px}
/* Réservé au logo (lien) : « .note.brand » est un encadré, pas un logo. Sans le « a », il héritait
   de display:flex et passait sur deux colonnes (panier, accueil). */
a.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.035em}
/* Le lockup : « App » en 400 gris, « skillia » en 700 encre. C'est la règle de
   la planche — le mot se lit en deux temps, comme le symbole. */
.brand .l1{font-weight:400;color:var(--ink-2)}
.brand .l2{font-weight:700}
.brand .word{display:inline-flex;align-items:baseline}
/* Le logo EST le A du mot : hauteur des capitales, posé sur la ligne de base, collé au « pp ». */
.brand .mark{width:.98em;height:.98em;flex:0 0 auto;transform:translateY(.1em);margin-right:.02em}
.top nav{display:none;margin-left:auto;gap:4px}
@media(min-width:1000px){.top nav{display:flex}}
.top nav a{
  color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:500;
  padding:8px 11px;border-radius:8px;transition:background .14s,color .14s;
}
.top nav a:hover{background:var(--surface-2);color:var(--ink)}
.top nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.top-cta{margin-left:auto;display:none;align-items:center;gap:10px}
@media(min-width:1000px){.top-cta{display:flex;margin-left:14px}}
.burger{
  margin-left:auto;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-2);
  border-radius:9px;background:var(--surface);cursor:pointer;
}
@media(min-width:1000px){.burger{display:none}}
.burger span{display:block;width:17px;height:1.6px;background:var(--ink);box-shadow:0 -5px 0 var(--ink),0 5px 0 var(--ink)}
.drawer{display:none;border-bottom:1px solid var(--line);background:var(--surface)}
.drawer.open{display:block}
.drawer a{display:block;padding:13px 22px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500}
.drawer .btn{margin:16px 22px}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:15.5px;font-weight:600;line-height:1;
  padding:14px 22px;border-radius:9px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .16s,background .16s,border-color .16s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
/* Aplat corail + texte encre : le couple de la tuile studio de la planche.
   À 18,7 px en 700, le seuil applicable est 3:1 — le couple donne 4,35:1.
   La taille n'est donc pas cosmétique, elle fait partie de la conformité. */
.btn-act{
  background:var(--act);color:var(--encre);
  font-size:18.7px;font-weight:700;padding:15px 26px;
  box-shadow:0 1px 2px rgba(12,43,46,.14),0 8px 20px -10px rgba(240,86,58,.55);
}
.btn-act:hover{background:var(--act-hover);color:var(--encre);box-shadow:0 2px 4px rgba(12,43,46,.16),0 14px 28px -12px rgba(240,86,58,.6)}
/* Bouton d'action réduit — en-tête, barre collante. Trop petit pour porter du
   texte sur corail : il prend l'encre, et le corail reste un signal rare. */
.btn-act.btn-sm{background:var(--encre);color:#fff;font-size:14px;font-weight:600;padding:10px 15px}
.btn-act.btn-sm:hover{background:var(--brand-ink);color:#fff}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-ink);color:#fff}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink-3);color:var(--ink);background:var(--surface)}
.btn-white{background:#fff;color:var(--brand)}
.btn-white:hover{background:#E4DDD0;color:var(--brand)}
.btn-lg{font-size:18.7px;padding:17px 30px}
.btn-sm{font-size:14px;padding:10px 15px}
.btn-block{display:flex;width:100%}
/* Sur téléphone, un gros bouton garde sa taille (18,7 px / 700, charte) et laisse son libellé
   passer à la ligne plutôt que de sortir de l'écran. */
@media(max-width:560px){.btn-lg,.btn-block{white-space:normal;line-height:1.25;text-align:center}}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.cta-note{font-size:13px;color:var(--ink-3);margin:11px 0 0}

/* ---------- pastilles ---------- */
.pill{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:5px 11px;border-radius:100px;background:var(--surface-2);color:var(--ink-2);
  border:1px solid var(--line);
}
.pill.good{background:var(--good-soft);color:var(--good);border-color:#C9DCDA}
/* Texte un ton plus sombre que --warn : 5,62:1 sur le fond de la pastille (--warn n'y faisait que 4,41:1). */
.pill.warn{background:var(--warn-soft);color:#855310;border-color:#E8D9B6}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:#EBCFC9}
.pill.act{background:var(--act-soft);color:var(--act-hover);border-color:#F3D3C6}
.pill.brand{background:var(--brand-soft);color:var(--brand);border-color:#C6DAD8}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px}

/* ---------- heros ---------- */
.hero{padding:clamp(46px,6vw,88px) 0 clamp(40px,5vw,64px)}
.hero-grid{display:grid;gap:clamp(32px,4vw,56px)}
@media(min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center}}
.hero h1{margin-bottom:20px}
.hero .lede{margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-proof{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.hero-proof b{color:var(--ink);font-weight:650}

/* ---------- cartes ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-1)}
.card.flat{box-shadow:none}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr}
@media(min-width:720px){.g2{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.g4{grid-template-columns:repeat(4,1fr)}}

/* ---------- encadres ---------- */
.note{border-left:3px solid var(--line-2);padding:2px 0 2px 18px;margin:24px 0;color:var(--ink-2);font-size:15.5px}
.note.warn{border-color:var(--warn);background:var(--warn-soft);padding:16px 18px;border-radius:0 var(--radius) var(--radius) 0}
.note.good{border-color:var(--good);background:var(--good-soft);padding:16px 18px;border-radius:0 var(--radius) var(--radius) 0}
.note.brand{border-color:var(--brand-2);background:var(--brand-soft);padding:16px 18px;border-radius:0 var(--radius) var(--radius) 0}
.note .lab{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:7px;color:var(--ink)}
.note p:last-child{margin-bottom:0}

/* ---------- listes de preuve ---------- */
ul.check{list-style:none;padding:0;margin:0}
ul.check li{position:relative;padding-left:29px;margin-bottom:11px;font-size:15.5px;line-height:1.5}
ul.check li::before{
  content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;
  background:var(--good-soft);box-shadow:inset 0 0 0 1px #B9D2D0;
}
ul.check li::after{
  content:"";position:absolute;left:5px;top:.7em;width:5px;height:8px;
  border:solid var(--good);border-width:0 1.8px 1.8px 0;transform:rotate(42deg);
}
ul.cross li::before{background:var(--bad-soft);box-shadow:inset 0 0 0 1px #EBCAC3}
ul.cross li::after{
  left:5.5px;top:.75em;width:5px;height:5px;border:0;transform:rotate(45deg);
  background:
    linear-gradient(var(--bad),var(--bad)) center/100% 1.7px no-repeat,
    linear-gradient(var(--bad),var(--bad)) center/1.7px 100% no-repeat;
}
ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{padding:11px 0;border-bottom:1px solid var(--line)}
ul.plain li:last-child{border-bottom:0}

/* ---------- tableaux ---------- */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
caption{caption-side:bottom;text-align:left;font-size:12.5px;color:var(--ink-3);padding-top:12px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-3);border-bottom:1px solid var(--line-2);
}
tbody tr:hover{background:var(--surface-2)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
/* Un tableau large dans une carte doit défiler sur téléphone : overflow:hidden l'emportait sur .scroller,
   et les colonnes Organisme et Réseau étaient coupées, inaccessibles. */
.scroller.tbl-card{overflow-x:auto}
.tbl-card th:first-child,.tbl-card td:first-child{padding-left:20px}
.tbl-card th:last-child,.tbl-card td:last-child{padding-right:20px}
.hi-col{background:var(--brand-soft)}

/* ---------- tarifs ---------- */
.switch{
  display:inline-flex;background:var(--surface-2);border:1px solid var(--line);
  border-radius:100px;padding:4px;gap:2px;
}
.switch button{
  font:inherit;font-size:14.5px;font-weight:600;padding:9px 18px;border:0;border-radius:100px;
  background:none;color:var(--ink-2);cursor:pointer;transition:background .16s,color .16s;
}
.switch button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.switch .save{font-size:12px;color:var(--good);font-weight:700;margin-left:6px}

/* Cartes de même hauteur : les boutons (margin-top:auto) s'alignent en bas, même quand une ligne de prix passe sur deux lignes. */
.plans{display:grid;gap:18px;align-items:stretch}
@media(min-width:940px){.plans{grid-template-columns:repeat(3,1fr);gap:22px}}
.plan{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px;display:flex;flex-direction:column;box-shadow:var(--shadow-1);position:relative;
}
.plan.hi{border-color:var(--brand);box-shadow:var(--shadow-2);border-width:1.5px}
.plan .tag{
  position:absolute;top:-11px;left:26px;background:var(--brand);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;
}
.plan h3{font-size:19px;margin-bottom:4px}
.plan .who{font-size:14px;color:var(--ink-3);margin:0 0 18px}
.price{display:flex;align-items:baseline;gap:3px;margin:0 0 4px}
.price .amt{font-family:var(--display);font-weight:600;font-size:44px;line-height:1;letter-spacing:-.04em}
@media(min-width:940px) and (max-width:1019px){.price .amt{font-size:40px}}
/* « / mois HT » reste d'un bloc : entre 940 et 1000 px, « 165,83 € » le poussait sur deux lignes. */
.price .per{font-size:14px;color:var(--ink-3);font-weight:500;white-space:nowrap}
.price-sub{font-size:13px;color:var(--ink-3);margin:0 0 20px;min-height:20px}
.price-sub b{color:var(--ink)}
/* Le gain de l'annee, en teal (8,03:1 sur blanc) : jamais en corail en petit texte. */
.price-gain{font-size:13px;font-weight:700;color:var(--good);margin:0 0 20px}
.price-gain.leger{font-weight:600}
.price-sub + .price-gain{margin-top:-14px}
/* Ligne sous la bascule : --ink-2 (5,51:1 sur sable ; --ink-3 n'y fait que 4,53:1). */
.switch-note{font-size:13px;color:var(--ink-2);max-width:62ch;margin:12px auto 0}
/* Tableau du calcul au mois / a l'annee : quatre colonnes qui tiennent a 360 px. */
.annee-grid > *{min-width:0}
.tbl-annee table{min-width:0;font-size:14.5px}
.tbl-annee th,.tbl-annee td{padding:11px 10px}
.tbl-annee th.n{white-space:normal}
.tbl-card.tbl-annee{overflow-x:auto}
@media(max-width:480px){.tbl-annee table{font-size:13.5px}.tbl-annee th,.tbl-annee td{padding:10px 5px}.tbl-annee thead th{font-size:10px;letter-spacing:.03em}.tbl-annee td.n{white-space:normal}.tbl-card.tbl-annee th:first-child,.tbl-card.tbl-annee td:first-child{padding-left:12px}.tbl-card.tbl-annee th:last-child,.tbl-card.tbl-annee td:last-child{padding-right:12px}}
.tbl-annee .gain{color:var(--good);font-weight:700}
/* Tableau des paliers (tarifs.html) : sur téléphone, les trois colonnes tiennent sans défilement caché. */
@media(max-width:480px){.tbl-paliers table{min-width:0;font-size:13.5px}.tbl-paliers th,.tbl-paliers td{padding:10px 5px}.tbl-paliers thead th{font-size:10px;letter-spacing:.03em}.tbl-paliers td.n{white-space:normal}.tbl-paliers th:first-child,.tbl-paliers td:first-child{padding-left:12px}.tbl-paliers th:last-child,.tbl-paliers td:last-child{padding-right:12px}}
@media(max-width:380px){.tbl-paliers table{font-size:12.5px}.tbl-paliers th,.tbl-paliers td{padding:9px 4px}.tbl-paliers thead th{font-size:9.5px;letter-spacing:0}.tbl-paliers th:first-child,.tbl-paliers td:first-child{padding-left:10px}.tbl-paliers th:last-child,.tbl-paliers td:last-child{padding-right:10px}}
.plan ul{margin:0 0 22px;flex:1}
.plan .btn{margin-top:auto}
.strike{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1.5px}

/* ---------- ancrage / comparatif ---------- */
.anchor-bar{display:grid;gap:12px;margin:26px 0}
.anchor-row{
  display:grid;grid-template-columns:minmax(96px,1fr) minmax(0,3fr) auto;gap:14px;align-items:center;
  font-size:14.5px;
}
.anchor-row .bar{height:32px;border-radius:6px;background:var(--surface-3);position:relative;overflow:hidden}
.anchor-row .bar i{position:absolute;inset:0 auto 0 0;display:block;border-radius:6px}
.anchor-row.them .bar i{background:linear-gradient(90deg,#C9C0AE,#B0A692)}
.anchor-row.us .bar i{background:linear-gradient(90deg,var(--brand-2),var(--brand))}
.anchor-row .val{font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- simulateur ---------- */
.sim{background:var(--brand);color:#fff;border-radius:var(--radius-lg);padding:clamp(20px,3vw,30px);box-shadow:var(--shadow-2)}
.sim h3{color:#fff;font-family:var(--display);font-weight:600;font-size:clamp(21px,2.5vw,27px);letter-spacing:-.025em}
.sim label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9BB0AF;margin-bottom:8px}

/* Le resultat reste a l'ecran pendant qu'on manipule les champs.
   Sans ca, le chiffre change hors du champ de vision : le visiteur croit
   que rien ne bouge, et il a raison de le croire. */
.sim-sticky{
  position:sticky;top:74px;z-index:6;background:var(--brand);
  padding:14px 0 15px;margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 18px -14px rgba(0,0,0,.7);
}
.sim-vs{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-size:14px;color:#9BB0AF}
.sim-vs b{color:#fff;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.sim-vs .ar{color:#9BB0AF}
.sim-vs i{font-style:normal;font-size:12px;color:#7D9491}
.sim-gain{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:8px}
.sim-gain .big{font-family:var(--display);font-weight:600;font-size:clamp(29px,4.2vw,42px);line-height:1;letter-spacing:-.035em;color:#fff}
.sim-gain .cap{font-size:13px;color:#9BB0AF;max-width:26ch;line-height:1.35}
.sim-gain .cap b{color:#fff;font-weight:650}

.sim-q{display:grid;gap:13px;margin-top:16px}
.sim-q label{margin-bottom:6px}

/* le detail se replie : il sert la credibilite, il ne doit pas eloigner le
   resultat des champs qui le font varier */
.sim-det{margin-top:14px;border-top:1px solid rgba(255,255,255,.18);padding-top:10px}
.sim-det summary{cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;color:#9BB0AF;padding:4px 0}
.sim-det summary::-webkit-details-marker{display:none}
.sim-det summary::before{content:"+ ";font-weight:700}
.sim-det[open] summary::before{content:"– "}
.sim-det summary:hover{color:#fff}
.sim-hors{font-size:12.5px;line-height:1.5;color:#7D9491;margin:12px 0 0;
  border-top:1px dashed rgba(255,255,255,.16);padding-top:10px}
.sim-hors b{color:#B7C7C4}

/* Le seul encadre du site qui envoie le visiteur ailleurs. */
.sim-alerte{margin-top:14px;padding:14px 16px;border-radius:var(--radius);
  background:rgba(240,86,58,.18);border-left:3px solid #F0563A;
  font-size:14px;line-height:1.5;color:#F6DDD4}
.sim-alerte b{color:#fff}
.sim-alerte[hidden]{display:none}
.sim select,.sim input[type=number]{
  width:100%;font:inherit;font-size:16px;padding:12px 14px;border-radius:9px;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.10);color:#fff;
}
.sim select option{color:var(--ink)}
.sim .out{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.sim .big{font-family:var(--display);font-weight:600;font-size:clamp(33px,4.8vw,50px);line-height:1;letter-spacing:-.035em;color:#fff}
.sim .cap{font-size:13.5px;color:#9BB0AF}
/* cases a cocher des options, sur fond fonce */
.sim .opts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:4px}
.sim .opts label{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;
  text-transform:none;letter-spacing:0;color:#E4E0D6;cursor:pointer;margin:0}
.sim .opts input[type=checkbox]{width:18px;height:18px;accent-color:#F0563A;cursor:pointer;flex:0 0 18px}
/* detail du panier concurrent, ligne a ligne */
.sim-detail{margin:6px 0 0;display:grid;gap:2px}
.sim-detail .sd-l{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  font-size:14px;color:#B7C7C4;padding:5px 0;border-bottom:1px dashed rgba(255,255,255,.14)}
.sim-detail .sd-l i{font-style:normal;font-size:12px;color:#7D9491;display:block}
.sim-detail .sd-l b{color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
/* un chiffre qui change doit se voir changer */
@keyframes sim-flash{0%{background:rgba(240,86,58,.55)}100%{background:transparent}}
.sim .flash{animation:sim-flash .55s ease-out;border-radius:5px}
@media(prefers-reduced-motion:reduce){.sim .flash{animation:none}}

/* ---------- aimant / formulaires ---------- */
.magnet{
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-1);
}
.magnet.dark{background:var(--brand);color:#fff;border-color:transparent}
.magnet.dark h2,.magnet.dark h3{color:#fff}
.magnet.dark .small,.magnet.dark p{color:#A9BCB9}
.field{margin-bottom:14px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.magnet.dark .field label{color:#E4E0D6}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;font:inherit;font-size:16px;padding:13px 14px;border-radius:9px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-2);outline-offset:1px;border-color:var(--brand-2)}
.magnet.dark input{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.25);color:#fff}
.magnet.dark input::placeholder{color:#7D9491}
.inline-form{display:flex;gap:10px;flex-wrap:wrap}
.inline-form input{flex:1 1 220px}
.consent{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:10px}
.magnet.dark .consent{color:#7D9491}
.form-ok{background:var(--good-soft);border:1px solid #C9DCDA;color:var(--good);border-radius:var(--radius);padding:16px 18px;font-size:15px}

/* ---------- order bump ---------- */
.bump{
  border:2px dashed var(--act);background:var(--act-soft);border-radius:var(--radius);
  padding:18px 20px;margin:20px 0;
}
.bump label{display:flex;gap:13px;align-items:flex-start;cursor:pointer}
.bump input[type=checkbox]{width:21px;height:21px;flex:0 0 21px;margin-top:2px;accent-color:var(--act);cursor:pointer}
/* En bloc : en ligne, le titre et le texte se suivaient sans coupure, et le texte prenait l'interligne du corps. */
.bump .h{display:block;font-weight:700;font-size:15.5px;color:var(--corail-texte);margin-bottom:3px}
.bump .d{display:block;font-size:14px;color:var(--ink-2);line-height:1.5}

/* ---------- recapitulatif panier ---------- */
.recap .line{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.recap .line .l{color:var(--ink-2)}
/* Le montant ne se coupe jamais (« 990 € HT par / an ») : c'est le libellé qui passe à la ligne. */
.recap .line .r{white-space:nowrap;text-align:right}
.recap .line.total{border-bottom:0;border-top:1.5px solid var(--ink);margin-top:6px;padding-top:14px;font-size:19px;font-weight:700}
.recap .line.total .r{font-family:var(--display);font-weight:600;font-size:25px;letter-spacing:-.03em}
@media(min-width:960px){.recap-sticky{position:sticky;top:88px}}
.trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font-size:12.5px;color:var(--ink-3)}
.trust span{display:inline-flex;align-items:center;gap:6px}

/* ---------- etapes ---------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding-left:52px;padding-bottom:26px}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);
  font-weight:700;font-size:15px;
}
.steps li::after{content:"";position:absolute;left:17px;top:38px;bottom:4px;width:1px;background:var(--line)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h4{margin-bottom:4px}
.steps p{margin:0;color:var(--ink-2);font-size:15px}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:16px 34px 16px 0;font-weight:600;font-size:16.5px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border:solid var(--ink-3);border-width:0 1.7px 1.7px 0;transform:translateY(-70%) rotate(45deg);
  transition:transform .18s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0 0 16px;color:var(--ink-2);font-size:15.5px;max-width:70ch}

/* ---------- barre collante mobile ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--surface);
  border-top:1px solid var(--line-2);padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  display:none;align-items:center;gap:12px;box-shadow:0 -6px 24px -12px rgba(16,24,34,.3);
}
.sticky-cta.show{display:flex}
@media(min-width:860px){.sticky-cta{display:none!important}}
.sticky-cta .p{flex:1;min-width:0;font-size:13px;line-height:1.3;color:var(--ink-2)}
.sticky-cta .p b{display:block;color:var(--ink);font-size:15px}

/* ---------- modale ---------- */
.modal{
  position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px;
  background:rgba(16,24,34,.55);backdrop-filter:blur(3px);
}
.modal.open{display:grid}
.modal-in{
  background:var(--surface);border-radius:var(--radius-lg);max-width:540px;width:100%;
  padding:clamp(24px,4vw,36px);box-shadow:var(--shadow-3);position:relative;
  max-height:90vh;overflow-y:auto;
}
.modal-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;font-size:18px;line-height:1;color:var(--ink-2);
}
.modal-close:hover{background:var(--surface-2)}

/* ---------- pied ---------- */
footer.site{background:var(--brand);color:#B7C7C4;padding:56px 0 34px;font-size:14.5px}
footer.site h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.13em;margin-bottom:14px}
footer.site a{color:#B7C7C4;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .cols{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:760px){footer.site .cols{grid-template-columns:1.7fr 1fr 1fr 1fr}}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:9px}
footer.site .legal{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);font-size:12.5px;color:#8AA09D;display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between}

/* ---------- bandeau interne ---------- */
.draftbar{background:var(--warn-soft);border-bottom:1px solid #E8D6AE;color:#6E4708;font-size:13px;padding:9px 22px;text-align:center}
.draftbar b{color:#4E3205}

/* ---------- utilitaires ---------- */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}
.maxw{max-width:70ch}
.bg-surface{background:var(--surface)}
.bg-2{background:var(--surface-2)}
/* Sur le sable foncé, --ink-3 ne donne que 4,12:1 : le petit texte passe en --ink-2. */
.bg-2 .tiny{color:var(--ink-2)}
/* Même raison pour les sur-titres : --corail-texte n'y fait que 4,14:1 ; le teal, 5,94:1 (charte : .eyebrow.b). */
.bg-2 .eyebrow{color:var(--teal)}
.bg-brand{background:var(--brand);color:#fff}
.bg-brand h2,.bg-brand h3{color:#fff}
.bg-brand .lede{color:#A9BCB9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}