/* ══ Jetons ════════════════════════════════════════════════════════════════════
   Un seul monde visuel, assumé : encre chaude pour l'autorité, papier chaud pour
   la lecture. Tout est peint explicitement — la page ne suppose jamais le fond
   de son hôte.

   Ce fichier est PARTAGÉ par les pages du site (accueil, tarifs, cabinets). Il
   reste volontairement sans dépendance : une seule feuille, pas de framework. */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2")}

:root{
  --paper:#FBF6EE; --paper-2:#F7F0E4; --paper-3:#F3EBDD;
  --ink:#241A10; --muted:#6E6154; --faint:#7B6F5F;
  /* --ember APLAT (bouton, filet) : 2,61:1 sur le papier, il ne porte donc jamais de texte.
     --ember-text est sa déclinaison lisible sur clair (4,98:1) : liens, mots accentués. */
  --ember:#F97316; --ember-soft:#FF8A3D; --ember-text:#AF4E0D; --on-ember:#1A0F05;
  /* Cartes, rayons et ombres de la charte : le papier porte des cartes blanches
     aux angles très arrondis, et l'orange n'éclaire que ce qui appelle à l'action. */
  --card:#FFFFFF; --card-tint:#FFF3E6;
  --line-soft:rgba(36,26,16,.10); --line-firm:rgba(36,26,16,.22);
  --r-xl:28px; --r-lg:24px; --r-md:22px; --r-sm:14px; --pill:999px;
  --shade-card:0 24px 60px rgba(36,26,16,.16);
  --shade-cta:0 8px 28px rgba(249,115,22,.35);
  --verified:#1E6B45; --verified-bg:#E0EBDD;
  --open:#8A6100;
  --pending:#6E6154; --pending-bg:#EEE9E1;
  --rule:#EAE4DC;

  /* Mêmes familles que l'application, auto-hébergées ici aussi : le site et l'app ne peuvent
     pas parler deux typographies. Instrument Serif ne sert QUE aux mots accentués d'un titre. */
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;

  /* Le site est clair, assumé. Le déclarer fait aussi rendre les contrôles natifs
     — curseur, sélecteur de date, ascenseurs — dans leurs teintes claires, au lieu
     du gris sombre que le navigateur sort quand le système est en mode sombre. */
  color-scheme:light;

  --gut:clamp(1.25rem,5vw,2rem);
  --max:1180px;
  --step:clamp(3.5rem,8vw,6.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--sans); font-weight:700; letter-spacing:-.025em; line-height:1.1;
  text-wrap:balance; margin:0}
/* Le mot accentué d'un titre : serif italique orange. C'est la seule place du serif. */
h1 em,h2 em,h3 em{font-family:var(--display); font-style:italic; font-weight:400;
  letter-spacing:0; color:var(--ember-text)}
p{margin:0}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--ember-text); outline-offset:3px; border-radius:2px}

.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
/* padding-block, jamais la forme courte : `padding: X 0` remettrait à zéro la
   marge horizontale de .wrap et collerait le texte au bord de l'écran. */
.section{padding-block:var(--step)}
/* Une section qui suit immédiatement une tête de page déjà rembourrée : sans ça,
   deux respirations pleines s'additionnent et creusent un trou au milieu. */
.section--tight{padding-top:clamp(1rem,2vw,1.75rem)}

.eyebrow{
  font-family:var(--sans); font-size:.6875rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ember-text);
}
/* Le badge pays du héros : même mot, mais posé comme une pastille sur la photo. */
.eyebrow--pill{
  display:inline-flex; align-items:center; gap:.5rem; letter-spacing:.02em;
  text-transform:none; font-size:.8125rem; font-weight:500;
  border:1px solid rgba(249,115,22,.35); background:rgba(249,115,22,.08);
  border-radius:var(--pill); padding:.4rem .85rem;
}
.eyebrow--pill::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ember); flex:none}
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}

/* ══ En-tête ═════════════════════════════════════════════════════════════════ */
/* La barre est posée sur le papier, pas sur une bande sombre : le héros commence
   à la première ligne de la page, et rien ne coupe la photo qui suit. */
.top{background:var(--paper); color:var(--ink); position:relative; z-index:2}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1.35rem}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--sans); font-weight:700; font-size:1.2rem; letter-spacing:-.02em; text-decoration:none}
.brand svg{display:block; flex:none}
.topnav{display:flex; align-items:center; gap:1.75rem; font-size:.9375rem; color:var(--muted)}
.topnav a{text-decoration:none; padding-block:.25rem; border-bottom:1px solid transparent; transition:color .15s,border-color .15s}
.topnav a:hover{color:var(--ink); border-bottom-color:var(--ember)}
/* La page courante est marquée dans la barre : on sait toujours où l'on est. */
.topnav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--ember)}
@media (max-width:760px){.topnav{display:none}}
.topcta{display:flex; align-items:center; gap:.75rem}
.login-link{
  color:var(--ink); text-decoration:none; font-size:.9375rem; font-weight:500;
  padding:.55rem .9rem; border-radius:var(--pill); white-space:nowrap;
  transition:background .15s;
}
.login-link:hover{background:var(--paper-3)}
/* Le bouton d'inscription tient dans la barre ; sur mobile il cède la place à
   « Se connecter », qui ne doit jamais disparaître. */
.top .btn{padding:.65rem 1.3rem; font-size:.9375rem}
@media (max-width:560px){.top .btn{display:none}}

/* ══ Héros ═══════════════════════════════════════════════════════════════════
   Une photo pleine largeur, et un dégradé crème qui l'efface là où le texte se
   lit. Le voile n'est pas décoratif : c'est lui qui garantit le contraste, donc
   il est OPAQUE sous la colonne de texte et ne s'ouvre qu'à droite. */
.hero{position:relative; overflow:hidden; background:var(--paper)}
.hero-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:right center;
}
.hero-veil{
  position:absolute; inset:0;
  /* Le voile reste quasi opaque sur TOUTE la largeur de la colonne de texte, puis
     s'ouvre d'un coup : c'est ce palier — et non le goût — qui tient le 4,5:1. */
  background:linear-gradient(90deg,
    rgba(251,246,238,.985) 0%, rgba(251,246,238,.962) 54%,
    rgba(251,246,238,.5) 64%, rgba(251,246,238,0) 80%);
}
.hero-copy{
  position:relative;
  /* flex-start, pas stretch : sinon chaque bloc s'étire jusqu'au bord du
     conteneur et le voile devrait couvrir toute la largeur pour rien. */
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding-block:clamp(3rem,7vw,4.5rem) clamp(3.5rem,8vw,5.5rem);
  min-height:min(660px,84vh);
}
/* Sous 960px la photo passe DERRIÈRE le texte : le dégradé horizontal ne protège
   plus rien, il devient un aplat presque plein. */
@media (max-width:960px){
  .hero-copy{min-height:0}
  .hero-veil{background:linear-gradient(180deg,rgba(251,246,238,.97) 0%,rgba(251,246,238,.99) 45%,var(--paper) 100%)}
}

.hero h1{
  font-size:clamp(2.6rem,6.4vw,3.9rem); letter-spacing:-.03em; line-height:1.04;
  margin-block:1.35rem 1.05rem; color:var(--ink); max-width:600px;
}
.lede{font-size:clamp(1.0625rem,1.6vw,1.125rem); color:var(--muted); max-width:32em}
.lede strong{color:var(--ink); font-weight:600}

.cta{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem}
.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.9rem 1.6rem;
  border-radius:var(--pill); text-decoration:none; font-size:1rem; font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:background .15s,border-color .15s,color .15s;
}
/* UNE seule lueur orange par page, sur l'action principale du héros. Six boutons
   qui rayonnent ne hiérarchisent plus rien : ils font crier la page. Ailleurs,
   l'orange est un aplat franc — c'est déjà assez visible. */
.btn-primary{background:var(--ember); color:var(--on-ember); border-color:var(--ember)}
.hero .btn-primary{box-shadow:var(--shade-cta)}
.btn-primary:hover{background:var(--ember-soft); border-color:var(--ember-soft)}
/* Sur le papier, le bouton secondaire est une pastille contournée d'encre. */
.btn-ghost{color:var(--ink); border-color:var(--line-firm); font-weight:500}
.btn-ghost:hover{border-color:rgba(36,26,16,.5)}
.btn-ember-ghost{color:var(--ember-text); border-color:rgba(249,115,22,.5)}
.btn-ember-ghost:hover{border-color:var(--ember); background:rgba(249,115,22,.07)}
/* Le bouton posé DANS l'aplat orange : l'inverse exact, encre pleine sur orange. */
.btn-on-ember{background:var(--on-ember); color:#FFD9B8; border-color:var(--on-ember); box-shadow:none}
.btn-on-ember:hover{background:#2C1A08; border-color:#2C1A08}

.tally{display:flex; flex-wrap:wrap; gap:2.25rem; margin-top:2.75rem; padding-top:1.75rem; border-top:1px solid var(--line-soft); max-width:36rem}
.tally div{display:flex; flex-direction:column; gap:.15rem}
.tally b{font-family:var(--sans); font-size:1.85rem; font-weight:700; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums}
.tally span{font-size:.8125rem; color:var(--muted)}

/* ══ Tête de sous-page ════════════════════════════════════════════════════════
   Tarifs et Cabinets s'ouvrent sur une bande sombre courte — même signature que
   le héros, sans la démonstration. */
.page-head{background:var(--paper); color:var(--ink); position:relative}
.page-head .wrap{padding-block:clamp(2.5rem,5vw,3.75rem) clamp(2.75rem,6vw,4.5rem)}
.page-head h1{font-size:clamp(2.1rem,5vw,3.35rem); letter-spacing:-.03em; margin-block:1rem .95rem; max-width:20ch}
.page-head .lede{max-width:52ch}
/* Tête de page à deux colonnes : le texte, et la photo qui porte le prix. */
.page-head--split{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,3.5rem); align-items:center;
}
@media (max-width:900px){.page-head--split{grid-template-columns:1fr; gap:2rem}}
.page-head__art{position:relative}
.page-head__art img{
  display:block; width:100%; height:clamp(15rem,30vw,23.75rem); object-fit:cover;
  border-radius:var(--r-xl); border:1px solid rgba(36,26,16,.12);
}
/* La pastille de prix flotte SUR la photo. La maquette la veut translucide à 92 % ;
   mesuré sur le pixel rendu, une zone sombre de la photo traverse et fait tomber
   « À partir de » à 3,25:1. Le fond est donc OPAQUE : la règle de contraste
   l'emporte quand elle contredit l'effet, et à cette taille la différence de
   rendu est invisible là où l'illisibilité, elle, ne l'est pas. */
.price-tag{
  position:absolute; left:1.375rem; bottom:1.375rem;
  background:var(--card); border:1px solid rgba(36,26,16,.14);
  border-radius:var(--r-sm); padding:.85rem 1.15rem; pointer-events:none;
  box-shadow:0 6px 18px rgba(36,26,16,.14);
}
.price-tag span{display:block; font-size:.8125rem; color:var(--muted)}
.price-tag b{font-size:1.375rem; font-weight:700; letter-spacing:-.02em; color:var(--ember-text)}
.price-tag small{font-size:.875rem; font-weight:500; color:var(--ink)}
.crumb{display:inline-flex; align-items:center; gap:.5rem; font-size:.8125rem; color:var(--faint); text-decoration:none}
.crumb:hover{color:var(--muted)}

/* Lien « voir plus » vers une page dédiée. */
.more-link{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:2.25rem;
  font-size:.9375rem; font-weight:500; color:var(--ember-text); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .15s,gap .15s;
}
.more-link:hover{border-bottom-color:var(--ember); gap:.65rem}

/* ══ Le bulletin vivant ══════════════════════════════════════════════════════
   Sa propre bande, juste sous le héros : le premier écran présente, le second
   démontre. La page n'illustre pas le produit, elle l'exécute — le barème réel
   du pays, recalculé à chaque frappe.

   Sur un écran étroit les deux colonnes s'empilent dans l'ordre du document —
   le titre annonce la carte. Les réordonner visuellement aurait fait mentir
   l'ordre de lecture d'un lecteur d'écran pour un gain d'un demi-écran. */
.sim-split{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
@media (max-width:900px){.sim-split{grid-template-columns:1fr; gap:1.75rem}}
.sim-lede h2{font-size:clamp(1.75rem,3.4vw,2.35rem); letter-spacing:-.025em; margin-block:.85rem .8rem}
.sim-lede p{color:var(--muted); max-width:38ch}
.sim-lede .sim-hint{font-size:.9375rem; margin-top:.9rem}
.sim-lede .more-link{margin-top:1.5rem}
.slip{
  background:var(--card); color:var(--ink); border:1px solid var(--line-soft);
  border-radius:18px; box-shadow:var(--shade-card); overflow:hidden;
}
.slip-head{padding:1.15rem 1.35rem .95rem; border-bottom:1px solid var(--rule); background:var(--paper-2)}
.slip-head .eyebrow{display:block; margin-bottom:.7rem}
.seg{display:inline-flex; border:1px solid var(--rule); border-radius:var(--pill); overflow:hidden; background:var(--paper)}
.seg button{
  appearance:none; background:transparent; border:0; cursor:pointer;
  padding:.42rem .85rem; font-size:.8125rem; font-weight:500; color:var(--muted);
  transition:background .15s,color .15s;
}
.seg button + button{border-left:1px solid var(--rule)}
.seg button[aria-pressed="true"]{background:var(--ember); color:var(--on-ember)}
.seg button:not([aria-pressed="true"]):hover{background:var(--paper-3); color:var(--ink)}

.slip-controls{padding:1.15rem 1.35rem; border-bottom:1px solid var(--rule); display:grid; gap:1.05rem}
.field label{display:block; font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.45rem}
.field-row{display:flex; align-items:baseline; gap:.5rem}
.field input[type=number]{
  width:100%; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.25rem;
  padding:.4rem .6rem; border:1px solid var(--rule); border-radius:12px;
  background:var(--paper); color:var(--ink); -moz-appearance:textfield;
}
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.field .unit{font-size:.8125rem; color:var(--muted); white-space:nowrap}
/* Le curseur est repeint : le rail natif de Chrome est un gris sombre qui jure
   avec la palette. La part parcourue vient de --fill, posée par payslip.js — sans
   script, le rail reste simplement uni, jamais invisible. */
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; margin-top:.9rem; height:6px; border-radius:var(--pill); cursor:pointer;
  background:linear-gradient(90deg,var(--ember) 0 var(--fill,0%),var(--rule) var(--fill,0%) 100%);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--ember); border:2px solid var(--paper);
  box-shadow:0 1px 4px rgba(36,26,16,.35);
}
input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--ember); border:2px solid var(--paper);
  box-shadow:0 1px 4px rgba(36,26,16,.35);
}
.parts{display:flex; gap:.35rem; flex-wrap:wrap}
.parts button{
  appearance:none; cursor:pointer; background:var(--paper); border:1px solid var(--rule);
  border-radius:var(--pill); padding:.3rem .7rem; font-family:var(--mono); font-size:.8125rem; color:var(--muted);
}
.parts button[aria-pressed="true"]{background:var(--ember); color:var(--on-ember); border-color:var(--ember)}

.slip-lines{padding:.35rem 1.35rem .5rem}
.line{
  display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:baseline;
  width:100%; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--rule);
  padding:.62rem 0; cursor:pointer; transition:background .15s;
}
.line:last-child{border-bottom:0}
.line:hover,.line[aria-current="true"]{background:var(--paper-2)}
/* La marque (taux, nombre de parts) ne doit jamais se couper en deux : c'est le
   libellé qui passe à la ligne sur un écran étroit, pas « 2,5 parts ». */
.line-label{display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .4rem; font-size:.875rem}
.line-label .mark{font-family:var(--mono); font-size:.625rem; color:var(--ember-text); letter-spacing:.03em; white-space:nowrap}
.line-amt{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.9375rem}
.line--minus .line-amt{color:var(--muted)}
.line--basis{color:var(--muted)}
.line--basis .line-label{font-style:italic}
.line--net{border-top:2px solid var(--line-firm); border-bottom:0; margin-top:.35rem; padding-top:.85rem}
.line--net .line-label{font-family:var(--sans); font-size:1.0625rem; font-weight:700}
.line--net .line-amt{font-size:1.35rem; font-weight:700; color:var(--ember-text)}
/* Le coût employeur n'est pas une retenue : il s'ajoute au brut au lieu d'en sortir.
   Il lui faut sa propre respiration sous le net, sinon on le lit comme une ligne du
   bulletin du salarié. */
.line--employer{border-bottom:0; margin-top:.55rem; padding-top:.75rem; border-top:1px dotted var(--rule); color:var(--muted)}
.line--employer .line-label{font-style:italic}

.cite{
  padding:.9rem 1.35rem 1.15rem; background:var(--card-tint); color:var(--muted);
  border-top:1px solid var(--line-soft);
  font-size:.8125rem; line-height:1.55; min-height:5.4rem;
}
.cite .eyebrow{display:block; margin-bottom:.4rem}
.cite b{color:var(--ink); font-weight:600}

/* ══ Papier ══════════════════════════════════════════════════════════════════ */
.band{background:var(--paper)}
.band--sunk{background:var(--paper-2); border-block:1px solid var(--rule)}
.head{max-width:46ch}
.head h2{font-size:clamp(1.85rem,3.6vw,2.6rem); letter-spacing:-.02em; margin-block:.85rem .8rem}
.head p{color:var(--muted)}

/* Registre : quatre engagements, chacun sur son image. Le numéro est posé sur la
   photo en pastille — c'est la seule place du serif hors des titres. */
.registry{
  margin-top:3rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.375rem;
}
.entry{
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md);
}
.entry-figure{position:relative; aspect-ratio:5/4; background:var(--paper-2); overflow:hidden}
.entry-figure img{width:100%; height:100%; object-fit:cover; display:block}
/* Le numéro : posé sur l'image quand il y en a une, simple filet en tête de carte
   quand il n'y en a pas (les cartes « Porte 2 » de la page Cabinets). */
.entry-mark{
  font-family:var(--display); font-style:italic; font-size:1.2rem; color:var(--ember-text);
  line-height:1.2;
}
.entry-figure .entry-mark{
  position:absolute; top:14px; left:14px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
  border:1px solid var(--line-soft); border-radius:var(--pill); padding:.1rem .7rem;
}
.entry-body > .entry-mark{display:block; margin-bottom:.35rem}
.entry-body{padding:1.35rem 1.4rem 1.6rem}
.entry h3{font-size:1.0625rem; letter-spacing:-.01em; margin-bottom:.55rem}
.entry p{color:var(--muted); font-size:.875rem; line-height:1.62; margin:0}

/* Inventaire des fonctions : neuf cartes sobres, un pictogramme au trait chacune.
   L'orange y est un LISERÉ et un trait, jamais un aplat — neuf pastilles pleines
   côte à côte transformeraient la section en vitrine clignotante. */
.features{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1.125rem; margin-top:3rem;
}
.feature{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:1.625rem 1.5rem 1.75rem;
}
.feature__ico{
  display:grid; place-items:center; width:2.5rem; height:2.5rem; margin-bottom:1.1rem;
  border-radius:12px; background:var(--card-tint); color:var(--ember-text);
  border:1px solid rgba(249,115,22,.22);
}
.feature h3{font-size:1.0625rem; letter-spacing:-.01em; margin-bottom:.5rem}
.feature p{color:var(--muted); font-size:.9375rem; line-height:1.6; margin:0}

/* Tableau des pays */
.countries{display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.25rem; margin-top:2.75rem}
.country{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:1.75rem; display:flex; flex-direction:column}
.country--soon{background:transparent; border-style:dashed}
.country-top{display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:1.15rem}
.country h3{font-size:1.3125rem}
.pill{
  font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:.24rem .55rem; border-radius:100px; white-space:nowrap;
}
.pill--live{background:var(--verified-bg); color:var(--verified)}
.pill--soon{background:var(--pending-bg); color:var(--pending)}
.facts{display:grid; gap:.5rem; margin:0; font-size:.875rem}
.fact{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-bottom:1px dotted var(--rule); padding-bottom:.4rem}
.fact dt{color:var(--muted)}
.fact dd{margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums}
.country-note{margin-top:1.15rem; font-size:.8125rem; color:var(--muted); line-height:1.5}
.flagline{display:flex; align-items:baseline; gap:.35rem}
.tick{width:.5rem; height:.5rem; border-radius:100px; flex:none; translate:0 -.1em}
.tick--open{background:var(--open)}

/* Publics */
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); gap:clamp(1.5rem,4vw,3.5rem); margin-top:3rem}
.who h3{font-size:1.375rem; margin-bottom:.65rem}
.who > p{color:var(--muted); font-size:.9375rem}
.who ul{list-style:none; margin:1.35rem 0 0; padding:0; display:grid; gap:.85rem; font-size:.9375rem}
.who li{display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:baseline; color:var(--muted)}
.who li b{color:var(--ink); font-weight:500}
.who li::before{content:"—"; color:var(--ember-text); font-weight:700}

/* Les trois portes */
.doors{display:grid; grid-template-columns:repeat(auto-fit,minmax(18.5rem,1fr)); gap:1.25rem; margin-top:3rem}
.door{
  display:flex; flex-direction:column; padding:2rem 2.125rem 2.125rem;
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-lg);
}
.door .eyebrow{margin-bottom:.55rem}
.door h3{font-size:1.3125rem; margin-bottom:.6rem}
.door-lede{color:var(--muted); font-size:.9375rem}
.door ul{list-style:none; margin:1.25rem 0 1.75rem; padding:0; display:grid; gap:.8rem; font-size:.875rem}
.door li{display:grid; grid-template-columns:auto 1fr; gap:.65rem; align-items:baseline; color:var(--muted)}
.door li b{color:var(--ink); font-weight:500}
.door li::before{content:"—"; color:var(--ember-text); font-weight:700}
/* margin-top:auto aligne les boutons des trois cartes sur le BAS, quelle que soit
   la longueur des listes au-dessus. L'écart minimal vient de la marge basse de la
   liste : le donner ici en `margin-top` écraserait le `auto` et rendrait
   l'alignement au hasard des contenus. */
.door-cta{margin-top:auto; align-self:flex-start}
.btn-ghost-ink{color:var(--ink); border-color:var(--line-firm); font-weight:500}
.btn-ghost-ink:hover{border-color:rgba(36,26,16,.5)}

/* Prix */
.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.25rem; margin-top:2.75rem}
.tier{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:1.75rem 1.625rem; display:flex; flex-direction:column; position:relative}
.tier--featured{background:var(--card-tint); border-color:var(--ember)}
.tier h3{font-size:1.125rem}
.tier-scope{font-size:.8125rem; color:var(--muted); margin-top:.15rem}
.tier-price{font-family:var(--sans); font-size:2rem; font-weight:700; margin-top:1rem; font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1.15}
.tier-price small{font-family:var(--sans); font-size:.8125rem; font-weight:400; color:var(--muted); letter-spacing:0}
.tier-per{font-size:.8125rem; color:var(--faint); margin-top:.2rem; line-height:1.45}
.tier-note{font-size:.8125rem; color:var(--muted); margin-top:1rem; line-height:1.55; flex:1}
/* Le bouton de chaque formule s'aligne sur le BAS de sa carte, quelle que soit la
   longueur de la description au-dessus — sinon quatre boutons en escalier. */
.tier-cta{margin-top:1.375rem; justify-content:center; font-size:.9375rem; padding:.7rem 1.25rem}
/* Le badge chevauche le bord de la carte, comme dans la maquette : il désigne la
   carte au lieu d'entrer dans sa liste. */
.tier-badge{
  position:absolute; top:-11px; left:22px; font-size:.6875rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--on-ember);
  background:var(--ember); border-radius:var(--pill); padding:.2rem .75rem;
}

/* Bloc « à partir de » : l'orange en aplat, avec l'encre par-dessus. */
.price-call{
  background:var(--ember); color:var(--on-ember); border-radius:var(--r-xl);
  padding:clamp(2rem,4vw,2.75rem); display:flex; flex-direction:column; align-items:flex-start;
}
.price-call .eyebrow{color:rgba(26,15,5,.72)}
.price-call .amount{display:flex; align-items:baseline; gap:.6rem; margin-top:.85rem}
.price-call .amount b{font-size:clamp(2.75rem,6vw,3.6rem); font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.price-call .amount span{font-size:1.25rem; font-weight:600}
.price-call .price-note{font-size:1rem; font-weight:500; margin:.65rem 0 1.6rem; max-width:30ch}
.price-split{display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:clamp(2rem,5vw,3.5rem); align-items:center}

.compare{margin-top:3rem; overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--card)}
.compare table{border-collapse:collapse; width:100%; min-width:34rem; font-size:.875rem}
.compare th,.compare td{padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--rule)}
.compare thead th{
  font-size:.6875rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  font-weight:600; background:var(--paper-2);
}
.compare tbody tr:last-child td{border-bottom:0}
.compare td.n{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.compare tr.us{background:rgba(249,115,22,.08)}
.compare tr.us td{font-weight:600; color:var(--ember-text)}
.compare .src{font-size:.75rem; color:var(--faint)}
.compare-note{font-size:.8125rem; color:var(--muted); margin-top:1rem; max-width:64ch; line-height:1.55}

/* Questions fréquentes : un accordéon natif. `details` répond au clavier et au
   lecteur d'écran sans une ligne de script — et reste ouvrable même si le JS
   de la page ne démarre jamais. */
.faq-split{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,5vw,4rem); align-items:start;
}
@media (max-width:900px){.faq-split{grid-template-columns:1fr; gap:2rem}}
.faq{display:grid; gap:.75rem}
.faq__item{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-sm);
  padding:0 1.375rem;
}
.faq__item summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:1rem;
  padding:1.125rem 0; font-weight:600; font-size:1rem; line-height:1.45;
}
.faq__item summary::-webkit-details-marker{display:none}
/* Le chevron est un pseudo-élément pivoté : pas de glyphe dont le rendu change
   d'un appareil à l'autre, et il tourne à l'ouverture. */
.faq__item summary::after{
  content:""; flex:none; width:.5rem; height:.5rem; margin:.4rem .1rem 0 auto;
  border-right:2px solid var(--ember-text); border-bottom:2px solid var(--ember-text);
  rotate:45deg; transition:rotate .18s ease;
}
.faq__item[open] summary::after{rotate:-135deg; margin-top:.55rem}
.faq__item summary:hover{color:var(--ember-text)}
.faq__answer{padding:0 0 1.25rem; border-top:1px solid var(--rule)}
.faq__answer p{color:var(--muted); font-size:.9375rem; line-height:1.65; margin-top:.9rem; max-width:60ch}

/* Inscription */
.signup{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4rem); align-items:start}
@media (max-width:860px){.signup{grid-template-columns:1fr}}
.form{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:1.875rem; display:grid; gap:1.1rem}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:520px){.form .row{grid-template-columns:1fr}}
.form label{display:block; font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem}
.form input,.form select{
  width:100%; padding:.6rem .7rem; font:inherit; font-size:.9375rem;
  border:1px solid var(--rule); border-radius:12px; background:var(--paper); color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
.form input:focus,.form select:focus{
  outline:none; border-color:var(--ember); box-shadow:0 0 0 3px rgba(249,115,22,.15);
}
.form input:invalid:not(:placeholder-shown){border-color:var(--danger,#B03A2E)}
.form .hint{font-size:.75rem; color:var(--faint); margin-top:.35rem}
.form-status{font-size:.8125rem; color:var(--verified); min-height:1.2rem}
.form-status[data-state="error"]{color:#B03A2E}

/* Clôture : un encadré centré, halo orange en haut, sur le même papier. */
.close .wrap{padding-block:0 var(--step)}
.close .close-box{
  border:1px solid rgba(36,26,16,.12); border-radius:var(--r-xl);
  padding:clamp(2.5rem,6vw,4rem) clamp(1.5rem,5vw,4rem); text-align:center;
  background:radial-gradient(ellipse at 50% 0%,rgba(249,115,22,.12),transparent 65%);
}
.close h2{font-size:clamp(1.85rem,3.6vw,2.35rem); letter-spacing:-.025em; margin-block:0 .9rem}
.close p{color:var(--muted); max-width:52ch; margin-inline:auto}
.close .cta{margin-top:2rem; justify-content:center}
.mailto{color:var(--ember-text); text-decoration:none; border-bottom:1px solid rgba(175,78,13,.35)}
.mailto:hover{border-bottom-color:var(--ember-text)}

/* Le pied de page dit qui parle et où l'on nous joint. Une ligne et quatre liens
   suffisent à une page perso ; un employeur qui va confier sa paie regarde ici en
   premier pour savoir à qui il a affaire. */
footer{background:var(--paper-2); color:var(--muted); border-top:1px solid var(--line-soft); font-size:.9375rem}
.foot{
  display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3rem); padding-block:clamp(3rem,6vw,4rem) 2.5rem; align-items:start;
}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot{grid-template-columns:1fr}}
.foot__brand .brand{color:var(--ink); margin-bottom:1rem}
.foot__brand p{max-width:38ch; line-height:1.6; font-size:.9375rem}
.foot__flags{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem}
.foot__col{display:flex; flex-direction:column; align-items:flex-start; gap:.7rem}
.foot__col h2{font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); margin-bottom:.25rem}
.foot__col a{color:var(--muted); text-decoration:none}
.foot__col a:hover{color:var(--ink)}
.foot__cta{margin-top:.5rem; font-size:.9375rem; padding:.7rem 1.35rem}
.foot__legal{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
  padding-block:1.25rem 2rem; border-top:1px solid var(--line-soft);
  font-size:.8125rem; color:var(--faint);
}

/* La révélation est OPT-IN : le contenu est visible par défaut, et seul un script
   qui a effectivement démarré a le droit de le masquer le temps de l'animer. Dans
   l'autre sens — masquer d'abord, révéler ensuite — un observateur qui ne se
   déclenche pas laisse une page blanche, ce qui est bien pire que pas d'animation. */
@media (prefers-reduced-motion:no-preference){
  .js-reveal .reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease,transform .6s ease}
  .js-reveal .reveal.seen{opacity:1; transform:none}
}