/* =============================================================================
   SkanFact — feuille de style du site
   Direction « Atelier » : blanc franc, vert profond, safran.
   Pas de framework, pas de build : un navigateur suffit à lire ce fichier.
   ============================================================================= */

/* ------------------------------------------------------------------ polices
   Servies depuis ce site, plus depuis Google. Deux raisons, dans cet ordre :
   la feuille de Google était une requête BLOQUANTE vers un tiers avant le
   premier pixel de texte, et l'adresse IP de chaque visiteur partait chez lui
   sans qu'on le lui ait demandé — sur un site dont l'argument est « vos données
   restent chez vous ».
   Ce sont des polices variables : un seul fichier couvre toute la plage de
   graisses, d'où `font-weight: 600 800` plutôt qu'un bloc par graisse. */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800;
  font-stretch: 100%; font-display: swap;
  src: url(polices/bricolage-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: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800;
  font-stretch: 100%; font-display: swap;
  src: url(polices/bricolage-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: "Lexend"; font-style: normal; font-weight: 300 600;
  font-display: swap;
  src: url(polices/lexend-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: "Lexend"; font-style: normal; font-weight: 300 600;
  font-display: swap;
  src: url(polices/lexend-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;
}

:root {
  --blanc: #ffffff;
  --creme: #f4f7f5;
  --vert: #0a4a43;
  --vert2: #073a34;
  --vert-clair: #e6f2ef;
  --safran: #e8a33d;
  --safran-fonce: #9a6410;
  --safran-clair: #fdf3e2;
  --encre: #16221f;
  --gris: #5e6e6a;
  /* 4,89 sur blanc et 4,53 sur crème. L'ancien #8b9995 tombait à 2,96 et 2,75 :
     le fil d'Ariane, l'adresse du pied, le nom du fichier à télécharger et les « — »
     du tableau des offres étaient sous le seuil de lisibilité, sur TOUTES les pages. */
  --gris-clair: #667470;
  --filet: #dfe8e5;
  --ombre: 0 24px 56px -24px rgba(10, 74, 67, .30);
  --ombre-douce: 0 10px 26px -12px rgba(10, 74, 67, .22);
  --rayon: 20px;
  --large: 1180px;
  /* La hauteur de l'en-tête collant. Elle servait à deux endroits, écrite deux fois : la
     réserve de défilement des ancres, et la hauteur disponible pour le menu du burger. Deux
     nombres qui doivent rester égaux et qui ne se voient pas l'un l'autre finissent par
     diverger. */
  --h-entete: 72px;
}

* { box-sizing: border-box; }

/* L'en-tête est collant sur 71 px : sans cette réserve, « Aller au contenu » et
   toute ancre déposent la cible DERRIÈRE l'en-tête — le lien d'évitement, dont le
   seul rôle est d'amener au contenu, amenait sous une barre opaque. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--h-entete) + 14px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Sans `height: auto`, l'attribut height du HTML garde sa valeur pendant que la
   largeur se réduit : l'image est étirée en hauteur, et rien ne le signale. */
img { max-width: 100%; height: auto; display: block; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
a { color: var(--vert); text-decoration: none; }
a:hover { color: var(--safran-fonce); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--safran);
  outline-offset: 2px;
  border-radius: 4px;
}

.conteneur { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: 22px; }

.saut-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--vert); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0; z-index: 100;
}
.saut-contenu:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------------ en-tête */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.entete.collee { border-bottom-color: var(--filet); }
.entete .conteneur { display: flex; align-items: center; gap: 26px; padding-block: 14px; }

.marque { display: flex; align-items: center; gap: 11px; margin-right: auto; color: var(--encre); }
.marque:hover { color: var(--encre); }
.marque .mot { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -.035em; }

.nav-site { display: flex; align-items: center; gap: 24px; }
/* Le `:not(.btn)` n'est pas une précaution : sans lui, `.nav-site a` (deux sélecteurs)
   l'emporte sur `.btn-vert` (un seul) et repeint le texte du bouton en gris — gris sur
   vert foncé, contraste 1,89, illisible. Le HTML était juste, c'est la cascade qui
   décidait, et ça ne se voit qu'en mesurant la couleur calculée. */
.nav-site a:not(.btn) { color: var(--gris); font-size: 15px; font-weight: 400; }
.nav-site a:not(.btn):hover { color: var(--vert); }
.nav-site a:not(.btn)[aria-current="page"] { color: var(--vert); font-weight: 500; }

.burger {
  display: none; appearance: none; border: 1px solid var(--filet); background: #fff;
  width: 44px; height: 44px; border-radius: 12px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--encre); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--encre);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

/* ------------------------------------------------------------------ boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-weight: 500; font-size: 16px; line-height: 1.2;
  padding: 14px 26px; border-radius: 100px; border: 1.5px solid transparent;
  cursor: pointer; text-align: center; min-height: 48px;
  transition: transform .12s, box-shadow .2s, background .2s, border-color .2s;
}
.btn-vert { background: var(--vert); color: #fff; box-shadow: 0 10px 24px -10px rgba(10, 74, 67, .55); }
.btn-vert:hover { background: var(--vert2); color: #fff; transform: translateY(-1px); }
.btn-safran { background: var(--safran); color: #40280a; }
.btn-safran:hover { background: #d8933080; background: #d89330; color: #40280a; transform: translateY(-1px); }
.btn-creux { border-color: var(--filet); color: var(--vert); background: #fff; }
.btn-creux:hover { border-color: var(--vert); color: var(--vert); }
.btn-clair { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .28); }
.btn-clair:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.btn-petit { font-size: 14.5px; padding: 10px 20px; min-height: 42px; }

/* ------------------------------------------------------------------ sections */
.section { padding-block: clamp(56px, 9vw, 96px); }
.section-creme { background: var(--creme); }
.section-vert { background: var(--vert); color: #dcebe8; }
.section-safran { background: var(--safran-clair); }

.oeil {
  font-size: 14px; font-weight: 500; color: var(--safran-fonce);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px;
}
.section-vert .oeil { color: var(--safran); }
h2 { font-size: clamp(28px, 4.2vw, 42px); }
.section-vert h2 { color: #fff; }
.chapeau { font-size: clamp(16px, 1.6vw, 18px); color: var(--gris); margin-top: 16px; max-width: 62ch; }
.section-vert .chapeau { color: #9fc3bd; }
/* `.sous-actions` est écrite pour le fond clair (`--gris`). Posée sur le vert foncé, elle
   tombe à 1,89 — illisible. La bande de fin avait déjà sa règle ; la section verte, non,
   et ça ne s'est vu que le jour où une page a mis les deux ensemble. */
.section-vert .sous-actions { color: #9fc3bd; }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 62px); align-items: center; }

.capture {
  border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--filet);
  box-shadow: var(--ombre); background: #fff;
}
.section-vert .capture { border-color: rgba(255, 255, 255, .12); }

/* ------------------------------------------------------------------ hero */
.hero { padding-block: clamp(36px, 5vw, 56px) clamp(56px, 8vw, 90px); }
.hero .duo { align-items: center; }
.etiquette {
  display: inline-block; background: var(--safran-clair); color: var(--safran-fonce);
  border-radius: 100px; padding: 7px 16px; font-size: 14px; font-weight: 400; margin-bottom: 20px;
}
h1 { font-size: clamp(34px, 5.4vw, 58px); line-height: 1.04; }
h1 .surligne { background: linear-gradient(transparent 58%, rgba(232, 163, 61, .5) 58%); padding: 0 3px; }
.hero .chapeau { font-size: clamp(16.5px, 1.8vw, 19px); max-width: 46ch; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.sous-actions { color: var(--gris); font-size: 14px; margin-top: 16px; max-width: 72ch; }

.cadre-hero { position: relative; }
.bulle {
  position: absolute; left: -34px; bottom: -130px; max-width: 290px;
  background: #fff; border: 1px solid var(--filet); border-radius: 18px; padding: 18px 20px;
  box-shadow: var(--ombre-douce);
}
.bulle .i {
  width: 28px; height: 28px; border-radius: 50%; background: var(--vert); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px;
  font-family: "Bricolage Grotesque", sans-serif;
}
.bulle b { display: block; font-weight: 600; font-size: 15px; margin-top: 12px; }
.bulle p { color: var(--gris); font-size: 14px; margin-top: 5px; line-height: 1.55; }

/* ------------------------------------------------------------------ étapes */
.etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; margin-top: 44px; }
.etape { position: relative; padding-top: 44px; }
.etape::before { content: ""; position: absolute; top: 15px; left: 0; right: -22px; height: 2px; background: var(--filet); }
.etape:last-child::before { right: 0; }
.etape .n {
  position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--vert); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 14px;
}
.etape b { display: block; font-weight: 600; font-size: 17px; font-family: "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; }
.etape p { color: var(--gris); font-size: 14.5px; margin-top: 6px; }

/* ------------------------------------------------------------------ puces */
.puces { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.puce { display: flex; gap: 13px; align-items: flex-start; }
.puce .rond {
  width: 24px; height: 24px; border-radius: 50%; background: var(--vert-clair); flex: none;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.section-vert .puce .rond { background: rgba(255, 255, 255, .12); }
.puce b { font-weight: 600; font-size: 16px; display: block; }
.puce .t { color: var(--gris); font-size: 15px; display: block; }
.section-vert .puce .t { color: #9fc3bd; }

/* ------------------------------------------------------------------ blocs (règles) */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 46px; }
.bloc { background: var(--vert2); border-radius: var(--rayon); padding: 30px; }
.bloc .val { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 34px); color: var(--safran); letter-spacing: -.035em; }
.bloc h3 { color: #fff; font-size: 19px; margin-top: 14px; font-weight: 600; }
.bloc p { color: #9fc3bd; font-size: 15px; margin-top: 8px; }
.rassure {
  margin-top: 30px; background: rgba(255, 255, 255, .07); border-radius: 18px; padding: 24px 28px;
  display: flex; gap: 18px; align-items: flex-start;
}
.rassure svg { flex: none; }
.rassure p { color: #cfe3df; font-size: 15.5px; max-width: 70ch; }
.rassure b { color: #fff; font-weight: 600; }

/* ------------------------------------------------------------------ comptable */
.liste-cab { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.lc { display: flex; gap: 14px; background: #fff; border-radius: 16px; padding: 18px 20px; align-items: flex-start; }
.lc .num { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 18px; color: var(--safran-fonce); flex: none; width: 26px; }
.lc b { font-weight: 600; font-size: 16px; display: block; }
.lc span { color: var(--gris); font-size: 15px; }

/* ------------------------------------------------------------------ modules */
.modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 40px; }
.module { border: 1px solid var(--filet); border-radius: 16px; padding: 18px 20px; background: #fff; }
.module b { display: block; font-weight: 600; font-size: 16px; }
.module span { display: block; color: var(--gris); font-size: 14px; margin-top: 4px; line-height: 1.5; }

/* ------------------------------------------------------------------ tarifs */
.grille-prix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.offre {
  border: 1.5px solid var(--filet); border-radius: 24px; padding: 32px; background: #fff;
  display: flex; flex-direction: column;
}
.offre.phare { background: var(--vert); color: #dcebe8; border-color: var(--vert); box-shadow: var(--ombre); }
.offre .haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offre .nom { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -.02em; }
.offre.phare .nom { color: #fff; }
.offre .ruban { background: var(--safran); color: #40280a; font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: 100px; }
.offre .prix { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.offre .prix .v { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(38px, 4.5vw, 48px); letter-spacing: -.04em; line-height: 1; }
.offre.phare .prix .v { color: #fff; }
.offre .prix .u { font-size: 15px; color: var(--gris); }
.offre.phare .prix .u { color: #9fc3bd; }
.offre .pour { color: var(--gris); font-size: 15px; margin-top: 14px; }
.offre.phare .pour { color: #9fc3bd; }
.offre ul { flex: 1; list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; }
.offre li { display: flex; gap: 11px; font-size: 15px; align-items: flex-start; }
.offre li svg { flex: none; margin-top: 4px; }
.offre .prendre { margin-top: 26px; width: 100%; }

.note-prix {
  margin-top: 28px; border-radius: var(--rayon); background: var(--creme); padding: 26px 30px;
  display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap;
}
.note-prix p { color: var(--gris); font-size: 14.5px; max-width: 74ch; }
.note-prix b { color: var(--encre); font-weight: 600; }

/* ------------------------------------------------------------------ faq */
.questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 42px; align-items: start; }
.qq { background: #fff; border: 1px solid var(--filet); border-radius: 18px; padding: 0; }
.section-creme .qq { border-color: transparent; }
.qq summary {
  list-style: none; cursor: pointer; padding: 22px 26px;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 17.5px; letter-spacing: -.02em;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.qq summary::-webkit-details-marker { display: none; }
.qq summary::after {
  content: ""; flex: none; width: 11px; height: 11px; margin-top: 7px;
  border-right: 2px solid var(--safran); border-bottom: 2px solid var(--safran);
  transform: rotate(45deg); transition: transform .2s;
}
.qq[open] summary::after { transform: rotate(-135deg); }
.qq .rep { padding: 0 26px 24px; color: var(--gris); font-size: 15px; }

/* ------------------------------------------------------------------ contact */
.contact-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(32px, 5vw, 60px); margin-top: 42px; }
.formulaire { background: rgba(255, 255, 255, .06); border-radius: 24px; padding: clamp(24px, 3vw, 32px); }
fieldset { border: 0; margin: 0 0 22px; padding: 0; }
legend { font-size: 14px; color: #a8ccc6; padding: 0 0 10px; }
.qui { display: flex; gap: 12px; flex-wrap: wrap; }
.qui label {
  flex: 1; min-width: 180px; border: 1.5px solid rgba(255, 255, 255, .18); border-radius: 100px;
  padding: 12px 18px; font-size: 15px; display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.qui input { accent-color: var(--safran); width: 17px; height: 17px; }
.qui label:has(input:checked) { border-color: var(--safran); background: rgba(232, 163, 61, .14); color: #fff; }
.champ { margin-bottom: 18px; }
.champ label { display: block; font-size: 14px; color: #a8ccc6; margin-bottom: 8px; }
.champ input, .champ textarea {
  width: 100%; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px; padding: 13px 16px; color: #fff; font: inherit; font-size: 15px;
}
.champ input::placeholder, .champ textarea::placeholder { color: #9fc3bd; }
.champ textarea { min-height: 116px; resize: vertical; }
.paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Le safran ordinaire tombe à 3,97 sur le fond du formulaire : l'étoile qui désigne un champ
   obligatoire doit se voir, c'est toute sa fonction. */
.oblig { color: #f0bd6e; }
.aide-form { color: #a8ccc6; font-size: 13.5px; margin-top: 14px; }
/* Le refus se LIT, il ne se devine pas à la couleur d'une bordure : un daltonien,
   et un lecteur d'écran, n'ont que cette phrase. */
.dit-faute { color: var(--safran); font-size: 14px; margin-top: 7px; }
/* Le piège à robots. Il n'est pas `display: none` : certains robots ignorent les champs
   ainsi masqués, justement parce que c'est le piège le plus connu. Il est hors de l'écran,
   hors du parcours au clavier (`tabindex=-1`) et hors du parcours vocal (`aria-hidden`). */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dit-envoi { margin-top: 14px; font-size: 15px; border-radius: 12px; padding: 12px 16px; }
.dit-envoi.ok { background: rgba(255, 255, 255, .12); color: #fff; }
.dit-envoi.rate { background: rgba(232, 163, 61, .16); color: #fbe3bd; }
.aide-form a { color: #fff; text-decoration: underline; }

.infos .bloc-info { border-bottom: 1px solid rgba(255, 255, 255, .12); padding: 20px 0; }
.infos .bloc-info:last-child { border-bottom: none; }
.infos .bloc-info .t { color: #9fc3bd; font-size: 14px; }
.infos .bloc-info b { display: block; font-size: 17px; font-weight: 600; margin-top: 4px; color: #fff; }
.infos .bloc-info b a { color: #fff; display: inline-block; padding-block: 6px; }
.infos .bloc-info span { display: block; color: #9fc3bd; font-size: 14px; margin-top: 3px; }

/* ------------------------------------------------------------------ pied */
.pied { padding-block: 54px 40px; background: #fff; border-top: 1px solid var(--filet); }
.pied-grille { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 40px; }
.pied .pied-titre { font-family: "Lexend", sans-serif; font-size: 14px; font-weight: 600; color: var(--encre); margin: 0 0 14px; letter-spacing: 0; }
.pied .col a { display: block; color: var(--gris); font-size: 14.5px; margin-bottom: 9px; }
.pied .bas a { display: inline-block; padding-block: 8px; }
.pied .bas {
  border-top: 1px solid var(--filet); margin-top: 40px; padding-top: 22px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--gris); font-size: 13.5px;
}

/* ------------------------------------------------------------------ page : télécharger */
.page-titre { padding-block: clamp(40px, 6vw, 64px) 0; }
.tele-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.tele {
  border: 1.5px solid var(--filet); border-radius: 24px; padding: 32px; background: #fff;
  display: flex; flex-direction: column;
}
.tele.conseille { border-color: var(--vert); box-shadow: var(--ombre); }
.tele .sys { display: flex; align-items: center; gap: 12px; }
.tele .sys b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 21px; letter-spacing: -.02em; }
.tele .detail { color: var(--gris); font-size: 14.5px; margin-top: 14px; flex: 1; }
.tele .fichier { font-size: 13.5px; color: var(--gris-clair); margin-top: 10px; word-break: break-word; }
.tele .btn { margin-top: 22px; width: 100%; }
.etat-version {
  display: inline-flex; align-items: center; gap: 10px; background: var(--creme);
  border-radius: 100px; padding: 8px 18px; font-size: 14.5px; color: var(--gris); margin-top: 20px;
}
.etat-version b { color: var(--encre); font-weight: 600; }
.install { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 42px; }
.install .pas { background: var(--creme); border-radius: var(--rayon); padding: 26px 28px; }
.install h3 { font-size: 19px; font-weight: 600; margin-bottom: 12px; }
.install ol { margin: 0; padding-left: 20px; color: var(--gris); font-size: 15px; }
.install li { margin-bottom: 8px; }
.install code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13.5px;
  background: #fff; border: 1px solid var(--filet); border-radius: 6px; padding: 2px 7px;
}

/* ------------------------------------------------------------------ page : texte légal */
.texte-legal { max-width: 74ch; }
.texte-legal h2 { font-size: clamp(22px, 2.6vw, 27px); margin-top: 42px; }
.texte-legal h2:first-of-type { margin-top: 28px; }
.texte-legal p, .texte-legal li { color: var(--gris); font-size: 16px; margin-top: 14px; }
.texte-legal ul { padding-left: 22px; }
.texte-legal strong { color: var(--encre); font-weight: 600; }
.avis-legal {
  background: var(--safran-clair); border-radius: 16px; padding: 20px 24px; margin-top: 28px;
  color: var(--safran-fonce); font-size: 15px;
}

/* =============================================================================
   Tailles d'écran — rien ne doit déborder, jamais.
   ============================================================================= */
@media (max-width: 1080px) {
  .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; }
  .etape::before { display: none; }
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

@media (max-width: 900px) {
  .nav-site {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--filet);
    flex-direction: column; align-items: stretch; gap: 0; padding: 10px 22px 20px;
    box-shadow: var(--ombre-douce);
    /* Le menu dépassait de l'écran : 800 px de contenu sous un en-tête de 72, sur un téléphone
       qui en offre 640. « Essayer 30 jours » se trouvait donc hors de l'écran, et le seul moyen
       de l'atteindre était de faire défiler LA PAGE — c'est-à-dire d'emporter l'en-tête avec
       elle. Mesuré, pas déduit.
       `dvh` plutôt que `vh` : sur un téléphone, la barre d'adresse se replie, et `vh` garde la
       hauteur de la page dépliée — donc une centaine de pixels de trop. La ligne `vh` reste
       au-dessus comme repli pour les navigateurs qui ignorent `dvh`.
       `overscroll-behavior: contain` est la moitié qui manquerait sinon : sans elle, arriver au
       bout du menu passe le doigt à la page derrière, qui se met à défiler sous un menu ouvert. */
    max-height: calc(100vh - var(--h-entete));
    max-height: calc(100dvh - var(--h-entete));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-site.ouvert { display: flex; }
  .nav-site a:not(.btn) { padding: 13px 0; font-size: 17px; border-bottom: 1px solid var(--filet); }
  .nav-site a:last-child { border-bottom: none; }
  .nav-site .btn { margin-top: 12px; }
  .burger { display: inline-flex; }
  .entete { border-bottom: 1px solid var(--filet); }
  .entete .conteneur { position: relative; }

  .duo, .contact-duo, .trio, .grille-prix, .questions, .tele-grille, .install {
    grid-template-columns: minmax(0, 1fr);
  }
  .duo .capture { order: 2; }
  .bulle { position: static; max-width: none; margin-top: 16px; }
  .offre.phare { order: -1; }
  .hero .duo { gap: 34px; }
}

@media (max-width: 620px) {
  .etapes { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .paire { grid-template-columns: minmax(0, 1fr); }
  .note-prix { padding: 22px; }
  .pied-grille { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pied .bas a { display: inline-block; padding-block: 8px; }
.pied .bas { flex-direction: column; gap: 8px; }
  .actions .btn { width: 100%; }
  .rassure { flex-direction: column; gap: 12px; }
  .qq summary { padding: 18px 20px; font-size: 16.5px; }
  .qq .rep { padding: 0 20px 20px; }
}

/* =============================================================================
   Site multi-pages — ajouté avec le découpage en pages (septembre 2026).
   Une section = une page ; chaque page a son titre, son fil et sa sortie.
   ============================================================================= */

/* -------------------------------------------------- le menu « Fonctionnalités »
   Un sous-menu vit sous les fenêtres et au-dessus du contenu : couche 30. */
.sous { position: relative; }
.lien-menu {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--gris);
}
.lien-menu:hover, .sous.ouvert .lien-menu { color: var(--vert); }
.lien-menu svg { transition: transform .18s ease; }
.sous.ouvert .lien-menu svg { transform: rotate(180deg); }
.panneau {
  display: none; position: absolute; z-index: 30; top: calc(100% + 14px); left: -18px;
  width: 310px; background: #fff; border: 1px solid var(--filet); border-radius: 18px;
  padding: 10px; box-shadow: var(--ombre);
}
.sous.ouvert .panneau { display: block; }
.panneau a { display: block; padding: 12px 14px; border-radius: 12px; }
.panneau a:hover { background: var(--creme); color: var(--vert); }
.panneau a b { display: block; font-weight: 600; font-size: 15px; color: var(--encre); }
.panneau a:hover b { color: var(--vert); }
.panneau a span { display: block; color: var(--gris); font-size: 13.5px; margin-top: 2px; line-height: 1.45; }

/* ------------------------------------------------------- l'en-tête d'une page */
.fil { font-size: 14px; color: var(--gris-clair); margin-bottom: 18px; }
.fil a { color: var(--gris); }
.fil a:hover { color: var(--vert); }
.fil span { margin: 0 6px; }
.fil-clair { color: #9fc3bd; }
.fil-clair a { color: #9fc3bd; }
.fil-clair a:hover { color: #fff; }
.h1-page { font-size: clamp(30px, 4.6vw, 47px); }
.h1-clair { color: #fff; }
.page-titre .actions { margin-top: 26px; }
.page-titre .chapeau { max-width: 64ch; }

/* ------------------------------------------------- la bande de faits, sous le héros */
.bande { background: var(--vert); color: #dcebe8; padding-block: 26px; }
.bande-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.bande-grille div { display: flex; flex-direction: column; gap: 2px; }
.bande-grille b {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 21px;
  color: var(--safran); letter-spacing: -.03em;
}
.bande-grille span { font-size: 14.5px; color: #9fc3bd; }

/* --------------------------------------------- les quatre cartes de l'accueil
   Une carte entière est cliquable : le titre seul serait une cible minuscule. */
.cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.carte {
  position: relative; display: block; background: #fff; border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: 22px; color: var(--encre);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.carte:hover { border-color: var(--vert); transform: translateY(-2px); box-shadow: var(--ombre-douce); color: var(--encre); }
/* Les quatre vignettes, et pourquoi elles sont comme ça.
   Première version : quatre fenêtres entières. Les titres s'alignaient, mais à 508 px
   une fenêtre d'application entière ne se lit plus — l'image ne servait que de texture.
   Deuxième version : un cadre 16/9 avec `object-fit: cover`. Il alignait les titres en
   COUPANT la droite de l'image : montants tronqués, phrases inachevées. Refusé, à raison.
   Celle-ci : les recadrages déjà faits pour la visite guidée — pensés pour être lus — dans
   un cadre de rapport fixe avec `object-fit: CONTAIN`. `contain` ne coupe jamais : il pose
   l'image entière dans le cadre et laisse du fond autour. Les titres s'alignent, et rien
   n'est perdu. C'est `cover` qui coupait, pas le cadre. */
.carte .vign {
  border-radius: 14px; overflow: hidden; background: var(--creme);
  border: 1px solid var(--filet); aspect-ratio: 12 / 5; padding: 10px;
}
.carte .vign img { width: 100%; height: 100%; object-fit: contain; }
.carte b {
  display: block; margin-top: 20px; font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600; font-size: 21px; letter-spacing: -.025em;
}
.carte p { color: var(--gris); font-size: 15px; margin-top: 8px; max-width: 46ch; }
.carte .fleche { display: inline-block; margin-top: 14px; color: var(--vert); font-size: 18px; }
.carte:hover .fleche { color: var(--safran-fonce); }

/* -------------------------------------------------- les trois prix en résumé */
.prix-resume { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 40px 0 30px; }
.pr {
  display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: 24px; color: var(--encre); text-align: center;
  transition: border-color .18s ease, transform .18s ease;
}
.pr:hover { border-color: var(--vert); transform: translateY(-2px); color: var(--encre); }
.pr .n { font-size: 15px; color: var(--gris); }
.pr .v {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  font-size: clamp(28px, 3.4vw, 36px); letter-spacing: -.04em;
}
.pr .d { font-size: 14px; color: var(--gris); }
.pr.phare { background: var(--vert); border-color: var(--vert); color: #fff; }
.pr.phare:hover { color: #fff; }
.pr.phare .n, .pr.phare .d { color: #9fc3bd; }
.pr.phare .v { color: var(--safran); }

/* ------------------------------------------- « continuer la visite », en bas de page */
.suite { padding-block: clamp(44px, 6vw, 64px); border-top: 1px solid var(--filet); }
.cartes-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.mini {
  display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--filet);
  border-radius: 18px; padding: 22px; color: var(--encre);
  transition: border-color .18s ease, transform .18s ease;
}
.mini:hover { border-color: var(--vert); transform: translateY(-2px); color: var(--encre); }
.mini b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -.02em; }
.mini span { color: var(--gris); font-size: 14.5px; line-height: 1.5; }
.mini .fleche { color: var(--vert); font-size: 17px; margin-top: 4px; }

/* ----------------------------------------------------- le rappel de fin de page */
.bande-fin { background: var(--vert); color: #dcebe8; padding-block: clamp(54px, 7vw, 78px); text-align: center; }
.bande-fin h2 { color: #fff; }
.bande-fin .chapeau { color: #9fc3bd; margin-inline: auto; }
.bande-fin .actions { justify-content: center; }
.bande-fin .sous-actions { color: #9fc3bd; }

/* --------------------------------------------------------- le tableau des offres */
.scroll-x { overflow-x: auto; margin-top: 38px; }
.compare { width: 100%; border-collapse: collapse; min-width: 620px; background: #fff; border-radius: var(--rayon); overflow: hidden; }
.compare th, .compare td { padding: 14px 18px; font-size: 15px; text-align: center; border-bottom: 1px solid var(--filet); }
.compare thead th { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 17px; background: var(--vert); color: #fff; }
/* « Essai » porte sa durée DANS l'en-tête : sans elle, quatorze « Oui » d'affilée
   font passer la colonne gratuite pour la meilleure offre du tableau. */
.compare thead .col-duree { display: block; font-family: "Lexend", sans-serif; font-weight: 400; font-size: 13.5px; color: #9fc3bd; letter-spacing: 0; }
.compare tbody th { text-align: left; font-weight: 400; color: var(--encre); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }
.compare .oui { color: var(--vert); font-weight: 500; }
.compare .non { color: var(--gris-clair); }
.sous-tableau { color: var(--gris); font-size: 14.5px; margin-top: 18px; max-width: 74ch; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ variantes de blocs */
.trio-clair { margin-top: 38px; }
.bloc-clair { background: var(--creme); border-radius: var(--rayon); padding: 28px; }
.bloc-clair h3 { font-size: 19px; font-weight: 600; }
.bloc-clair p { color: var(--gris); font-size: 15px; margin-top: 8px; }
.modules-sombre .module { background: var(--vert2); border-color: rgba(255, 255, 255, .12); }
.modules-sombre .module b { color: #fff; }
.modules-sombre .module span { color: #9fc3bd; }
.avis-large { max-width: 84ch; }
.etapes { list-style: none; padding: 0; }
/* Un seul des deux systèmes reçoit « Votre système » : sans cette règle, l'autre
   garde un ovale vert vide de 24×8 px, visible par tout le monde. */
.repere { background: var(--vert-clair); color: var(--vert); font-size: 13px; padding: 4px 12px; margin-left: auto; }
.repere:empty { display: none; }
.pied-mot { color: var(--gris); font-size: 14px; max-width: 34ch; }
.pied-adresse { color: var(--gris-clair); font-size: 14px; margin-top: 14px; line-height: 1.55; }

/* -------------------------------------------------- tailles d'écran, la suite */
@media (max-width: 1080px) {
  .cartes-mini { grid-template-columns: minmax(0, 1fr); }
  .bande-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
}

@media (max-width: 900px) {
  /* Le sous-menu redevient un volet qu'on déplie, comme sur grand écran. Il était déplié
     d'office — « rien ne se cache » — et c'était tenable à sept entrées. À neuf, le menu
     mesurait 800 px : plus rien ne tenait, et la moitié basse était inatteignable. Un volet
     replié n'est pas une page cachée : il porte son nom, son chevron, et le clavier l'ouvre ;
     c'est exactement ce que fait déjà le grand écran. */
  .sous { width: 100%; }
  .lien-menu {
    display: flex; width: 100%; justify-content: space-between;
    padding: 13px 0; font-size: 17px; border-bottom: 1px solid var(--filet);
  }
  .panneau {
    position: static; width: auto; border: none; border-radius: 0;
    padding: 0 0 6px 14px; box-shadow: none;
  }
  /* Le trait gauche dit que ces lignes appartiennent au volet ouvert au-dessus, sans avoir à
     l'écrire. Sans lui, elles se lisent comme des entrées de même rang. */
  .sous.ouvert .panneau { border-left: 2px solid var(--vert-clair); }
  .panneau a { padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--filet); }
  .panneau a:last-child { border-bottom: none; }
  .panneau a:hover { background: none; }
  .panneau a span { display: none; }
  .panneau a b { font-size: 16px; font-weight: 400; }

  .cartes, .prix-resume { grid-template-columns: minmax(0, 1fr); }
  .carte p { max-width: none; }
}

@media (max-width: 620px) {
  .bande-grille { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bande-fin .actions .btn { width: 100%; }
  /* Un lien de pied faisait 24 px de haut : au doigt, on tombe sur la ligne voisine.
     On ne l'agrandit pas visuellement, on lui donne la place de se faire viser. */
  .pied .col a { padding-block: 9px; margin-bottom: 0; font-size: 15px; }
  .aide-form { font-size: 14.5px; }
}

/* -------------------------------------- les recadrages et les grilles fixes
   Un recadrage n'est pas une fenêtre : il se pose à plat, sans la perspective
   ni l'ombre portée qui font « photo d'écran ». */
.capture-detail { border-radius: 16px; }
.capture-detail img { border-radius: 15px; }

/* Une grille en `auto-fill` finit sur une rangée orpheline dès que le nombre
   d'éléments n'est pas multiple du nombre de colonnes. Quand on connaît le
   compte, on fixe les colonnes. */
.modules-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modules-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* L'en-tête d'une page intérieure porte son image : une page qui démarre sur du
   texte seul ne donne aucune envie de descendre. */
.page-titre .duo { align-items: center; }
.page-titre .fil { margin-bottom: 14px; }

@media (max-width: 1080px) {
  .modules-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
  .modules-3, .modules-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Dans l'en-tête d'une page, l'image passe SOUS le texte et ses boutons. */
  .page-titre .duo .capture { order: 2; }
}

@media (max-width: 620px) {
  .modules-3, .modules-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Une section sur deux met la capture à GAUCHE. Sans cette règle, elle tombe dans
   la colonne étroite et les images du site n'ont pas toutes la même taille :
   584 px d'un côté, 486 px de l'autre. C'est la colonne de l'IMAGE qui est large,
   quel que soit le côté où on l'a posée. */
.duo:has(> .capture:first-child) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

/* =============================================================================
   La visite guidée — ajoutée en septembre 2026.
   Le seul moyen de voir SkanFact était d'installer 220 Mo d'application non signée,
   en passant outre un avertissement de sécurité. Beaucoup s'arrêtaient là.
   ============================================================================= */

/* Le plan des sept étapes, en tête de page : on sait tout de suite où l'on va,
   et on peut sauter à ce qui nous intéresse. */
.plan-visite { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.plan-visite a {
  display: inline-flex; align-items: center; gap: 9px; background: var(--creme);
  border: 1px solid var(--filet); border-radius: 100px; padding: 9px 17px 9px 9px;
  font-size: 14.5px; color: var(--encre); transition: border-color .18s ease, background .18s ease;
}
.plan-visite a:hover { border-color: var(--vert); background: #fff; color: var(--vert); }
.plan-visite .p {
  width: 24px; height: 24px; border-radius: 50%; background: var(--vert); color: #fff; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 13px;
}
.plan-visite a:hover .p { background: var(--safran); color: #40280a; }

.num-etape {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-size: 14px; color: var(--gris);
}
.num-etape span {
  width: 34px; height: 34px; border-radius: 50%; background: var(--vert); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 17px;
}
.detail-etape { color: var(--gris); font-size: 15.5px; margin-top: 18px; max-width: 58ch; }
.detail-etape b { color: var(--encre); font-weight: 600; }

/* Une étape sur deux met la capture à gauche : la page respire, et l'œil ne s'endort pas
   sur sept blocs identiques. */
.pas-visite:nth-child(odd) .duo { direction: rtl; }
.pas-visite:nth-child(odd) .duo > * { direction: ltr; }

.rappel-visite {
  background: var(--vert); color: #dcebe8; border-radius: var(--rayon);
  padding: clamp(30px, 4vw, 48px); text-align: center;
}
.rappel-visite h2 { color: #fff; }
.rappel-visite .chapeau { color: #9fc3bd; margin-inline: auto; }
.rappel-visite .actions { justify-content: center; }

@media (max-width: 900px) {
  /* Renverser les colonnes n'a plus de sens quand il n'y en a qu'une, et `direction: rtl`
     ferait remonter l'image au-dessus de son propre titre. */
  .pas-visite:nth-child(odd) .duo { direction: ltr; }
  .plan-visite a { font-size: 14px; }
}

/* =============================================================================
   « SkanFact ou Excel ? » — la page qu'on cherche quand on hésite.
   Le concurrent réel n'est pas un autre logiciel, c'est le classeur.
   ============================================================================= */
.casse { display: flex; flex-direction: column; gap: 18px; margin-top: 42px; }
.cas { border: 1px solid var(--filet); border-radius: var(--rayon); padding: 26px 28px; background: #fff; }
.cas h3 {
  display: flex; align-items: center; gap: 13px; font-size: 20px; font-weight: 600;
  font-family: "Bricolage Grotesque", sans-serif; letter-spacing: -.02em;
}
.cas-n {
  width: 30px; height: 30px; border-radius: 50%; background: var(--vert-clair); color: var(--vert);
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}
.cas-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.cote { border-radius: 14px; padding: 18px 20px; }
/* Deux colonnes de même poids visuel : ce n'est pas un procès du classeur, c'est une
   comparaison. Un côté en rouge vif et l'autre en vert vif ne se lirait pas. */
.cote .qui { font-size: 13.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.cote p:not(.qui) { font-size: 15px; line-height: 1.6; }
.cote.excel { background: var(--creme); }
.cote.excel .qui { color: var(--gris-clair); }
.cote.excel p:not(.qui) { color: var(--gris); }
.cote.skan { background: var(--vert-clair); }
.cote.skan .qui { color: var(--vert); }
.cote.skan p:not(.qui) { color: var(--encre); }
.cote.skan b { font-weight: 600; }
/* Une case qui n'est ni oui ni non — « compris dans Office », « presque ». Un tableau
   qui force tout en oui/non ment sur les deux lignes où la réponse est nuancée. */
.compare .nuance { color: var(--gris); font-size: 14px; }
/* « Lecture seule » n'est ni un oui ni un non : les pages existent, s'impriment et s'exportent,
   seule la création y attend l'offre du dessus. La peindre en gris comme un « — » redirait le
   défaut qu'on vient de corriger — que le client n'a pas la fonction. */
.compare .lecture { color: var(--safran-fonce); font-size: 14px; font-weight: 500; }

@media (max-width: 760px) {
  .cas-duo { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cas { padding: 22px; }
}

/* Les quatre étapes de l'achat : mêmes repères que « le premier jour » de l'accueil,
   mais quatre colonnes au lieu de cinq. */
.etapes.achat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .etapes.achat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .etapes.achat { grid-template-columns: minmax(0, 1fr); } }

/* Le bandeau de parrainage, sur la page qu'un comptable remet à son client. */
.offre-parrain {
  background: var(--safran-clair); border: 1px solid rgba(232, 163, 61, .35);
  border-radius: var(--rayon); padding: clamp(28px, 4vw, 44px);
}
.offre-parrain h2 { margin-top: 4px; }
.offre-parrain .chapeau { max-width: 68ch; }

/* « À remettre à vos clients » : le cabinet est le canal, pas la cible. */
.kit { background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon); padding: clamp(28px, 4vw, 44px); }
.kit .chapeau + .chapeau { margin-top: 12px; }

/* La porte vers la visite guidée, sous la capture du héros. */
.sous-capture {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: 15px; color: var(--vert); font-weight: 500;
}
.sous-capture:hover { color: var(--safran-fonce); }

/* =============================================================================
   La page Nouveautés. Skander publie plusieurs versions par semaine et personne
   ne le voyait : « Notes de version » envoyait le visiteur sur GitHub.
   ============================================================================= */
.versions { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-direction: column; gap: 0; }
.version {
  display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 24px;
  padding: 22px 0; border-top: 1px solid var(--filet); align-items: start;
}
.version:first-child { border-top: none; }
.v-num {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 21px;
  letter-spacing: -.03em; color: var(--encre); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.v-neuf {
  font-family: "Lexend", sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0;
  background: var(--safran); color: #40280a; border-radius: 100px; padding: 3px 10px;
}
.derniere .v-num { color: var(--vert); }
.v-quoi { font-size: 16.5px; line-height: 1.55; max-width: 66ch; }
.v-quand { color: var(--gris); font-size: 14px; margin-top: 7px; }
.v-quand a { color: var(--gris); text-decoration: underline; }
.v-quand a:hover { color: var(--vert); }

@media (max-width: 620px) {
  .version { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .v-num { font-size: 19px; }
}

/* =============================================================================
   Les guides — les pages qui répondent à une question de recherche.
   Elles n'existaient pas : quelqu'un qui tape « mentions obligatoires facture
   tunisie » ne trouvait rien, parce que `tunisie.html` répond « SkanFact le
   fait » et pas « voici comment ça marche ». Deux intentions, deux pages.
   ============================================================================= */
.guide { max-width: 72ch; }
.guide h2 { font-size: clamp(23px, 2.8vw, 29px); margin-top: 42px; }
.guide h2:first-child { margin-top: 0; }
.guide h3 { font-size: 19px; font-weight: 600; margin-top: 26px; }
.guide p { color: var(--gris); font-size: 16.5px; line-height: 1.7; margin-top: 14px; }
.guide b, .guide strong { color: var(--encre); font-weight: 600; }
.guide a { text-decoration: underline; }
.guide-liste, .guide-puces { color: var(--gris); font-size: 16.5px; line-height: 1.7; margin-top: 18px; padding-left: 22px; }
.guide-liste li, .guide-puces li { margin-bottom: 12px; }
.guide-liste li::marker { color: var(--safran-fonce); font-weight: 600; }

/* Un calcul se lit en colonne, pas dans une phrase. Le dinar s'écrit au millime :
   trois décimales, et les montants alignés à droite pour qu'ils se comparent. */
.calcul {
  margin-top: 22px; background: var(--creme); border-radius: 16px; padding: 20px 24px;
  font-size: 16px;
}
.calcul div { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; color: var(--gris); }
.calcul b { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--encre); font-weight: 500; }
.calcul .st { border-top: 1px solid var(--filet); margin-top: 4px; padding-top: 11px; }
.calcul .tot { border-top: 2px solid var(--vert); margin-top: 4px; padding-top: 11px; color: var(--encre); }
.calcul .tot b { color: var(--vert); font-weight: 700; font-size: 17px; }
.apres-calcul { font-size: 15px !important; }

/* « Et dans SkanFact » : une fois, à la fin, après avoir répondu à la question.
   Une page qui vend avant d'expliquer n'est pas lue jusqu'au bout. */
.guide-produit {
  margin-top: 46px; background: var(--vert); color: #dcebe8;
  border-radius: var(--rayon); padding: clamp(26px, 3.5vw, 38px); max-width: 72ch;
}
.guide-produit .oeil { color: var(--safran); }
.guide-produit p { font-size: 16.5px; line-height: 1.65; }
.guide-produit .actions { margin-top: 22px; }

.cartes-guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.carte-guide {
  display: flex; flex-direction: column; gap: 9px; background: #fff; border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: 26px 28px; color: var(--encre);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.carte-guide:hover { border-color: var(--vert); transform: translateY(-2px); box-shadow: var(--ombre-douce); color: var(--encre); }
.carte-guide b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -.025em; line-height: 1.25; }
.carte-guide span { color: var(--gris); font-size: 15px; line-height: 1.55; }
.carte-guide .fleche { color: var(--vert); font-size: 17px; margin-top: 4px; }

@media (max-width: 760px) { .cartes-guides { grid-template-columns: minmax(0, 1fr); } }

/* Le bandeau d'un chantier en cours. Il ne ressemble ni à une fonctionnalité livrée (vert)
   ni à un avertissement (rouge) : c'est un état, et il doit se lire comme tel. */
.chantier {
  display: flex; gap: 18px; align-items: flex-start; max-width: 72ch;
  background: var(--safran-clair); border: 1px solid rgba(232, 163, 61, .4);
  border-radius: var(--rayon); padding: 24px 26px; margin-bottom: 40px;
}
.chantier-pastille { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; }
.chantier-titre {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 18px;
  letter-spacing: -.02em; color: var(--encre); margin-bottom: 8px;
}
.chantier p:not(.chantier-titre) { color: var(--safran-fonce); font-size: 15.5px; line-height: 1.6; max-width: 72ch; }
.chantier p:not(.chantier-titre) + p { margin-top: 10px; }
.chantier b { color: #6b4409; font-weight: 600; }

/* La date d'un guide. Elle est VISIBLE parce qu'une date qui ne vit que dans le balisage est
   une date que personne ne peut vérifier — ni un lecteur, ni un moteur. */
.guide-date { color: var(--gris-clair); font-size: 14px; margin-bottom: 22px; }
.guide-date a { color: var(--gris); }
.guide-date a:hover { color: var(--vert); }

/* =============================================================================
   La séquence du logiciel — dix écrans du vrai parcours devis → facture.
   Sans JavaScript, `.film` reste une liste de dix figures légendées, lisible de
   bout en bout. Le script lui ajoute `.film-lecteur` et n'en montre qu'une.
   ============================================================================= */
.film {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 26px;
}
.film figure { margin: 0; }
.film img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--filet);
  /* Une capture d'interface posée à plat sur un fond clair paraît flotter : l'ombre
     douce lui rend un bord, sans imiter une fenêtre de système qui, elle, serait fausse. */
  box-shadow: 0 10px 34px rgba(10, 74, 67, .12);
  background: #fff;
}
.film figcaption {
  margin-top: 13px;
  font-size: 15px;
  color: var(--gris);
  line-height: 1.55;
}
.film figcaption b { color: var(--encre); }
.film-num {
  display: inline-block;
  min-width: 22px;
  height: 22px;
  margin-right: 9px;
  border-radius: 999px;
  background: var(--vert);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  vertical-align: 1px;
}

/* --- replié en lecteur. Les vues masquées portent `hidden` (donc invisibles aussi
   pour un lecteur d'écran) ; la hauteur est tenue par le rapport de l'image, pour que
   la page ne saute pas d'un écran à l'autre. */
.film-lecteur { display: block; margin-bottom: 0; cursor: pointer; }
.film-lecteur .film-vue[hidden] { display: none; }
.film-lecteur img { aspect-ratio: 1440 / 900; object-fit: cover; object-position: top left; }
.film-lecteur figcaption { min-height: 46px; }

.film-cmd {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.film-barre {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  flex-wrap: wrap;
}
.film-point {
  width: 26px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #cfd9d6;
  cursor: pointer;
  transition: background .18s ease;
}
.film-point:hover { background: #a9b8b4; }
.film-point.ici { background: var(--safran); }
.film-fleche {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: #fff;
  color: var(--vert);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.film-fleche:hover { border-color: var(--vert); }
.film-jouer { flex: none; }

/* La cible tactile d'un point de 7 px de haut est trop petite au doigt : sur mobile, les
   flèches et le bouton suffisent, et les points redeviennent un simple repère de position. */
@media (max-width: 620px) {
  .film-point { width: 18px; height: 9px; }
  .film-lecteur figcaption { min-height: 0; }
}

/* =============================================================================
   Le formulaire de demande de clé — même langage que celui du contact, sur une
   seule colonne large plutôt que dans le duo formulaire + coordonnées.
   ============================================================================= */
.formulaire-large { max-width: 760px; margin-top: 34px; }
.formulaire-large textarea { min-height: 0; }
/* Dans le formulaire long, une note d'aide tombe ENTRE deux champs : sans marge basse elle se
   colle à l'intitulé suivant, et on la lit comme le début de la question d'après. */
.formulaire-large .aide-form { margin-bottom: 20px; }
.qui-offres { flex-direction: column; align-items: stretch; gap: 10px; }
.qui-offres label {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  border-radius: 13px;
  padding: 14px 18px;
}
/* On ne repeint PAS ces puces en blanc : `.qui label:has(input:checked)` les teinte en safran
   et passe leur texte en blanc, avec une spécificité que la classe seule ne bat pas. Un fond
   blanc posé là-dessus ne s'appliquait qu'aux puces décochées — donc du gris moyen prévu pour
   du blanc se retrouvait sur du vert foncé, à 1,33. On reste dans le langage du composant :
   des puces claires sur fond sombre, comme celles du formulaire de contact. */
.qui-offres label span { color: #a8ccc6; font-size: 14px; }
.qui-offres label:has(input:checked) span { color: #f3e3cb; }

.aide-mf { margin-top: -6px; }