/* ── polices, servies par le site ──────────────────────────────────
   Rapatriées de Google Fonts (licence SIL OFL) : aucune requête vers un
   tiers, donc aucune adresse IP de visiteur transmise à Google. */
/* Libre Franklin, latin-ext */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(polices/libre-franklin-normal-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;
}
/* Libre Franklin, latin */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(polices/libre-franklin-normal-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;
}
/* Libre Franklin, latin-ext */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(polices/libre-franklin-normal-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;
}
/* Libre Franklin, latin */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(polices/libre-franklin-normal-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;
}
/* Libre Franklin, latin-ext */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/libre-franklin-normal-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;
}
/* Libre Franklin, latin */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/libre-franklin-normal-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;
}
/* Newsreader, latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(polices/newsreader-italic-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;
}
/* Newsreader, latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(polices/newsreader-italic-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;
}
/* Newsreader, latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(polices/newsreader-normal-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;
}
/* Newsreader, latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(polices/newsreader-normal-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;
}
/* Newsreader, latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(polices/newsreader-normal-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;
}
/* Newsreader, latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(polices/newsreader-normal-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;
}
/* Newsreader, latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/newsreader-normal-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;
}
/* Newsreader, latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/newsreader-normal-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;
}

@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════
   GDE SN, feuille de style du site
   Sobre et durable : pas de dégradé, pas d'ombre, un seul accent.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --papier:#f4f5f3; --blanc:#ffffff; --encre:#14181a; --encre-2:#4c5559; --encre-3:#7d8689;
  --trait:#dfe2de; --trait-2:#c6cbc5;
  --vert:#0E7052; --vert-fonce:#0B5740; --vert-clair:#E9F2EF; --vert-trait:#9FC6BA;
  --rouge:#8c2f2f; --rouge-clair:#f8ecec;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Libre Franklin',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.c{max-width:1280px;margin:0 auto;padding:0 clamp(16px,3vw,40px)}
a{color:inherit}
img{max-width:100%}

/* ── accessibilité ─────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.saut{position:absolute;left:-9999px}
.saut:focus{left:8px;top:8px;z-index:60;background:var(--vert);color:#fff;padding:9px 14px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── barre ─────────────────────────────────────────────────────────── */
.barre{border-bottom:1px solid var(--trait);background:var(--papier);position:sticky;top:0;z-index:20}
.barre .c{display:flex;align-items:center;gap:30px;height:66px}
.logo{display:flex;align-items:center;flex-shrink:0;line-height:0}
.logo img{height:40px;width:auto;display:block}
/* Sur telephone la marque entiere reste : c'est elle qui porte le nom. La
   place vient d'ailleurs, du bouton Menu reduit a son chevron et du bouton
   « Essayer » resserre (voir plus bas). */
@media(max-width:560px){.logo img{height:32px}}
@media(max-width:380px){.logo img{height:29px}}
nav{display:flex;gap:24px;margin-left:auto}
nav a{text-decoration:none;font-size:14.5px;color:var(--encre-2)}
nav a:hover{color:var(--vert)}
nav a[aria-current="page"]{color:var(--encre);font-weight:500;box-shadow:inset 0 -2px 0 var(--vert)}
.sepnav{width:1px;height:15px;background:var(--trait-2);align-self:center}
nav{align-items:center}
@media(max-width:860px){.barre .sepnav{width:100%;height:1px;margin:4px 0}}

.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--trait-2);
  padding:7px 11px;font-family:inherit;font-size:14px;cursor:pointer;color:var(--encre)}
/* Ces règles ne visent que le menu de la barre du haut. Sans le préfixe
   « .barre », elles atteignaient aussi le menu du pied de page, et comme
   « footer nav » est plus spécifique que « nav », le display:none ne
   s'appliquait pas : le pied de page se retrouvait collé en haut de
   l'écran, par-dessus le contenu, sur tous les téléphones. */
@media(max-width:860px){
  .barre nav{display:none;position:absolute;top:66px;left:0;right:0;background:var(--papier);
    border-bottom:1px solid var(--trait);flex-direction:column;gap:0;padding:8px 24px 16px}
  .barre nav.ouvert{display:flex}
  .barre nav a{padding:10px 0;border-bottom:1px solid var(--trait)}
  .menu-btn{display:block}
  .barre .bouton{margin-left:12px}
}

/* Sous 560 px, chaque pixel compte dans la barre : le bouton Menu se
   reduit a son chevron (son nom reste pour les lecteurs d'ecran) et
   « Essayer » se resserre. */
@media(max-width:560px){
  .menu-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .menu-btn{padding:8px 10px;line-height:1}
  .menu-btn::before{content:"≡";font-size:19px;line-height:1}
  .barre .bouton{margin-left:10px;padding:8px 13px;font-size:13.5px}
}

/* ── boutons ───────────────────────────────────────────────────────── */
.bouton{display:inline-block;text-decoration:none;font-size:14.5px;font-weight:500;
  padding:9px 17px;border:1px solid var(--encre);color:var(--encre);background:transparent;
  font-family:inherit;cursor:pointer;transition:background .15s,color .15s}
.bouton:hover{background:var(--encre);color:var(--papier)}
.bouton.plein{background:var(--vert);border-color:var(--vert);color:#fff}
.bouton.plein:hover{background:var(--vert-fonce);border-color:var(--vert-fonce)}

/* ── en-tête de page ───────────────────────────────────────────────── */
.hero{padding:74px 0 62px;border-bottom:1px solid var(--trait)}
.hero.court{padding:52px 0 44px}
.eyebrow,.surtitre{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin:0 0 18px}
.eyebrow{color:var(--vert)}
.surtitre{color:var(--encre-3);margin-bottom:14px}
.hero h1{font-family:var(--serif);font-size:clamp(32px,5vw,52px);line-height:1.09;
  font-weight:500;letter-spacing:-.02em;margin:0 0 22px;max-width:18ch;text-wrap:balance}
.hero.court h1{font-size:clamp(28px,4vw,40px);max-width:22ch}
.hero h1 em{font-style:italic;color:var(--vert)}
.hero p{font-size:18px;color:var(--encre-2);max-width:56ch;margin:0 0 30px}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.actions .fine{font-size:13.5px;color:var(--encre-3);margin-left:4px}

/* ── bandeau de chiffres ───────────────────────────────────────────── */
.chiffres{border-bottom:1px solid var(--trait);background:var(--blanc)}
.chiffres .c{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.ch{padding:26px 24px 26px 0;border-right:1px solid var(--trait)}
.ch:last-child{border-right:0}
.ch .v{font-family:var(--serif);font-size:31px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.ch .l{font-size:13.5px;color:var(--encre-2);margin-top:7px;max-width:27ch}
@media(max-width:760px){.ch{border-right:0;border-bottom:1px solid var(--trait);padding-right:0}
  .ch:last-child{border-bottom:0}}

/* ── sections ──────────────────────────────────────────────────────── */
section.bloc{padding:62px 0;border-bottom:1px solid var(--trait)}
section.bloc.pale{background:var(--blanc)}
section.bloc:last-of-type{border-bottom:0}
.titre{font-family:var(--serif);font-size:clamp(24px,3.3vw,33px);font-weight:500;
  line-height:1.19;letter-spacing:-.015em;margin:0 0 14px;max-width:23ch;text-wrap:balance}
.chapeau{font-size:16.5px;color:var(--encre-2);max-width:62ch;margin:0 0 34px}
.texte{max-width:66ch}
.texte p{margin:0 0 15px;color:var(--encre-2)}
.texte h3{font-family:var(--serif);font-size:21px;font-weight:600;margin:30px 0 9px;color:var(--encre)}

/* ── grille de colonnes ────────────────────────────────────────────── */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1px;
  background:var(--trait);border:1px solid var(--trait)}
.col{background:var(--blanc);padding:24px 22px}
.col h3{font-family:var(--serif);font-size:19px;font-weight:600;margin:0 0 9px}
.col p{font-size:14.5px;color:var(--encre-2);margin:0 0 12px}
.col ul{margin:0;padding-left:17px}
.col li{font-size:14px;color:var(--encre-2);margin-bottom:5px}
/* Quatre encadres : la grille automatique n'en tient que trois dans les
   1000 px du conteneur, et le quatrieme restait seul avec une case vide
   a cote. En deux colonnes ils se rangent en carre. */
.cols.deux{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}

/* ── liste à filets ────────────────────────────────────────────────── */
.notes{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:20px}
.notes li{padding-left:16px;border-left:2px solid var(--vert-trait)}
.notes b{display:block;font-size:14.5px;margin-bottom:3px}
.notes span{font-size:14px;color:var(--encre-2)}

/* ── bulletin de démonstration ─────────────────────────────────────── */
.demo{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:start}
@media(max-width:860px){.demo{grid-template-columns:1fr;gap:30px}}
.bulletin{border:1px solid var(--trait-2);background:var(--blanc)}
.bulletin .tete{padding:14px 18px;border-bottom:1px solid var(--trait);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.bulletin .tete b{font-weight:600;font-size:14.5px}
.bulletin .tete span{font-size:12.5px;color:var(--encre-3)}
.bulletin table{width:100%;border-collapse:collapse}
.bulletin td{padding:7px 18px;font-size:13.5px;border-bottom:1px solid #eef0ed}
.bulletin td.n{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12.5px}
.bulletin td.d{color:var(--encre-3);font-size:11.5px;padding-top:0;padding-bottom:9px}
.bulletin tr.sep td{background:#fafbfa;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--encre-3);font-weight:600;padding-top:11px;padding-bottom:5px;border-bottom:0}
.bulletin tr.tot td{font-weight:600;border-top:1px solid var(--trait-2);border-bottom:0;padding-top:11px}
.bulletin tr.net td{background:var(--vert-clair);font-weight:600;border-bottom:0}
.bulletin tr.net td.n{color:var(--vert)}

/* ── tableaux ──────────────────────────────────────────────────────── */
.tw{overflow-x:auto;border:1px solid var(--trait);background:var(--blanc)}
table.t{border-collapse:collapse;width:100%;min-width:520px}
table.t th{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--encre-3);
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--trait-2);font-weight:600}
table.t td{padding:10px 14px;font-size:14px;border-bottom:1px solid var(--trait);vertical-align:top}
table.t tbody tr:last-child td{border-bottom:0}
table.t td.n{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:13px}

/* ── tarifs ────────────────────────────────────────────────────────── */
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(235px,100%),1fr));gap:1px;
  background:var(--trait);border:1px solid var(--trait)}
.tarif{background:var(--blanc);padding:26px 24px;display:flex;flex-direction:column}
.tarif.mis{background:var(--vert-clair)}
.tarif .n{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:var(--encre-3);margin-bottom:14px}
.tarif.mis .n{color:var(--vert)}
.tarif .p{font-family:var(--serif);font-size:33px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.tarif .p small{font-size:14px;font-family:var(--sans);color:var(--encre-2);font-weight:400}
.tarif .q{font-size:13.5px;color:var(--encre-2);margin:9px 0 16px}
.tarif ul{margin:0 0 20px;padding-left:17px;flex:1}
.tarif li{font-size:14px;color:var(--encre-2);margin-bottom:5px}

/* ── questions ─────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--trait)}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{padding:16px 0;font-weight:500;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--vert);font-size:19px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px;color:var(--encre-2);max-width:66ch;font-size:15px}

/* ── formulaire ────────────────────────────────────────────────────── */
.essai{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
@media(max-width:760px){.essai{grid-template-columns:1fr;gap:28px}}
form{display:flex;flex-direction:column;gap:14px}
label{font-size:13px;font-weight:500;margin-bottom:5px;display:block}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--trait-2);
  background:var(--blanc);font-family:inherit;font-size:14.5px;color:var(--encre)}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--vert);outline-offset:-2px;border-color:var(--vert)}
form .fine{font-size:12.5px;color:var(--encre-3);margin:0}
.pot{position:absolute;left:-9999px}
.alerte{padding:13px 16px;border-left:3px solid var(--vert);background:var(--vert-clair);
  font-size:14.5px;margin:0 0 20px}
.alerte.err{border-left-color:var(--rouge);background:var(--rouge-clair);color:var(--rouge)}

/* ── formulaire compact de la page d'accueil ───────────────────────── */
form.mini{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:14px;
  border:1px solid var(--trait-2);background:var(--blanc);padding:17px 18px;margin:0 0 32px}
form.mini > div{flex:1 1 170px}
form.mini label{font-size:12px;font-weight:400;color:var(--encre-3)}
form.mini .bouton{flex:0 0 auto;margin-bottom:1px}

/* ── film ─────────────────────────────────────────────────────────── */
/* Fond blanc, pas papier : une image d'attente pale sur un fond de la
   meme teinte donnait un cadre vide, et l'apercu passait inapercu. */
.film{margin:0;border:1px solid var(--trait-2);background:var(--blanc)}
.film video,.film img{display:block;width:100%;height:auto;background:var(--blanc)}
.film figcaption{padding:11px 16px;border-top:1px solid var(--trait);
  font-size:13px;color:var(--encre-3)}

/* ── pied ──────────────────────────────────────────────────────────── */
footer{padding:34px 0;font-size:13.5px;color:var(--encre-3);border-top:1px solid var(--trait)}
footer .c{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
footer nav{display:flex;gap:22px;margin:0}
footer a{text-decoration:none}
footer a:hover{color:var(--vert)}

/* ── nuancier des thèmes ───────────────────────────────────────────── */
.nuancier{display:flex;flex-wrap:wrap;gap:1px;background:var(--trait);border:1px solid var(--trait);margin:6px 0 0}
.teinte{background:var(--blanc);padding:14px 16px;flex:1 1 150px;min-width:140px}
.teinte .pastille{width:100%;height:34px;margin-bottom:9px}
.teinte b{display:block;font-size:13.5px;font-weight:500}
.teinte span{font-size:11.5px;color:var(--encre-3);font-family:var(--mono)}

/* ── frise d'échéances ─────────────────────────────────────────────── */
.frise{border:1px solid var(--trait);background:var(--blanc)}
.frise .l{display:flex;gap:16px;padding:13px 16px;border-bottom:1px solid var(--trait);align-items:baseline}
.frise .l:last-child{border-bottom:0}
.frise .j{font-family:var(--serif);font-size:19px;font-weight:600;min-width:52px;font-variant-numeric:tabular-nums}
.frise .t{flex:1}
.frise .t b{display:block;font-size:14.5px;font-weight:500}
.frise .t span{font-size:13px;color:var(--encre-2)}
.frise .e{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3);
  border:1px solid var(--trait-2);padding:2px 8px;align-self:center}

/* ── téléphone ─────────────────────────────────────────────────────────
   Une seule règle compte vraiment : les champs à 16 px. En dessous, iOS
   agrandit la page dès qu'on touche un champ, et le visiteur se retrouve
   à moitié hors écran sans comprendre pourquoi. Le reste desserre ce qui
   se marche dessus sur 375 px de large.                                */
@media(max-width:760px){
  input,select,textarea{font-size:16px;padding:11px 12px}
  form.mini{padding:15px 15px;gap:12px}
  form.mini > div{flex:1 1 100%}
  form.mini .bouton{width:100%;text-align:center}

  .actions{gap:10px}
  .actions .bouton{flex:1 1 100%;text-align:center}
  .actions .fine{flex:1 1 100%;margin-left:0}

  .col{padding:20px 16px}
  .bulletin td{padding:8px 14px;font-size:13px}
  .bulletin td.n{font-size:12.5px}
  .bulletin .tete{padding:13px 14px;flex-wrap:wrap;gap:4px}
  .bulletin td.d{font-size:11px}

  .fine,form .fine{font-size:13px}
  .chapeau{font-size:15.5px}
  .titre{font-size:25px}
  .texte h3{font-size:18px}

  .frise .l{flex-wrap:wrap;gap:8px 14px}
  .frise .e{order:3}
  .teinte{flex:1 1 46%;min-width:0}
  footer .c{flex-direction:column;gap:22px}
  footer nav{flex-wrap:wrap;gap:10px 20px}
}

/* ── attente ───────────────────────────────────────────────────────────
   Le site est rendu par le serveur : entre le clic et la page suivante,
   il ne se passe rien a l'ecran. Sur une connexion lente, le visiteur
   croit que son clic n'a pas porte, et il reclique. Ces trois marques
   disent « c'est parti » : un fil en haut de l'ecran, un bouton qui
   tourne, et le film qui previent quand il se remplit.
   Rien ici n'est indispensable : sans JavaScript aucune de ces marques
   n'apparait, et le site fonctionne comme avant.                       */

@keyframes gdesn-glisse{
  0%  {transform:translateX(-100%)}
  100%{transform:translateX(350%)}
}
@keyframes gdesn-tourne{to{transform:rotate(360deg)}}

/* Le fil d'attente, en haut, par-dessus la barre collante (z-index 20). */
.progression{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
  pointer-events:none;opacity:0;transition:opacity .18s}
.progression.active{opacity:1}
.progression span{display:block;height:100%;width:28%;background:var(--vert);
  animation:gdesn-glisse 1.15s ease-in-out infinite}

/* Le bouton qui a recu le clic. On garde sa largeur : le texte ne bouge
   pas, la roue vient devant lui. */
.bouton[aria-busy="true"]{pointer-events:none;opacity:.85}
.bouton[aria-busy="true"]::before{content:"";display:inline-block;
  width:12px;height:12px;margin-right:9px;vertical-align:-1px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:gdesn-tourne .7s linear infinite}

/* Le film, pendant qu'il se remplit. */
.film{position:relative}
.film .attente{position:absolute;top:50%;left:50%;width:34px;height:34px;
  margin:-17px 0 0 -17px;border:2px solid var(--blanc);border-top-color:transparent;
  border-radius:50%;animation:gdesn-tourne .8s linear infinite;
  opacity:.9;pointer-events:none}

/* Qui a demande moins d'animation garde les memes reperes, mais fixes. */
@media (prefers-reduced-motion:reduce){
  .progression span{width:100%;animation:none}
  .bouton[aria-busy="true"]::before,
  .film .attente{animation:none;border-top-color:currentColor;opacity:.55}
  .film .attente{border-top-color:var(--blanc)}
}

/* ── le chemin de l'accueil ─────────────────────────────────────────────
   Trois étapes numérotées : le visiteur voit d'un coup d'œil ce que fait
   le logiciel, dans l'ordre où il s'en sert.                            */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1px;
  background:var(--trait);border:1px solid var(--trait);counter-reset:etape}
.etape{background:var(--blanc);padding:26px 22px 22px;counter-increment:etape}
.etape::before{content:counter(etape);display:block;font-family:var(--serif);
  font-size:30px;line-height:1;color:var(--vert);margin-bottom:12px}
.etape h3{font-family:var(--serif);font-size:20px;font-weight:600;margin:0 0 8px}
.etape p{font-size:14.5px;color:var(--encre-2);margin:0 0 14px}
.etape a{color:var(--vert);font-size:14px}

/* ── le plancher tarifaire ──────────────────────────────────────────────
   Un seul chiffre sur la page : le point de départ. Les paliers, en
   dessous, disent ce que chaque formule contient, sans montant.        */
.plancher{border:1px solid var(--trait-2);background:var(--blanc);
  padding:34px 30px;margin:0 0 30px;text-align:center}
.plancher .depuis{margin:0;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--encre-3)}
.plancher .montant{margin:6px 0 0;font-family:var(--serif);
  font-size:clamp(34px,6vw,50px);line-height:1.05;color:var(--encre)}
.plancher .montant small{font-family:var(--sans);font-size:16px;
  font-weight:400;color:var(--encre-2)}
.plancher .detail{margin:12px auto 0;max-width:46ch;font-size:15px;
  color:var(--encre-2)}
.plancher .actions{justify-content:center;margin-top:22px}

/* ── simulateur ─────────────────────────────────────────────────────────
   Deux onglets pour le profil, puis l'essentiel ; la convention et la
   catégorie attendent dans un bloc replié, puisqu'elles ne servent qu'à
   comparer le salaire au minimum.                                      */
.onglets{display:flex;gap:0;margin:0 0 22px;border-bottom:1px solid var(--trait-2)}
.onglets a{padding:11px 20px;text-decoration:none;color:var(--encre-2);font-size:15px;
  border:1px solid transparent;border-bottom:0;margin-bottom:-1px}
.onglets a:hover{color:var(--vert)}
.onglets a[aria-current="page"]{color:var(--encre);font-weight:500;background:var(--blanc);
  border-color:var(--trait-2);box-shadow:inset 0 2px 0 var(--vert)}
form.simu{gap:20px}
form.simu .col label{font-size:12.5px;color:var(--encre-2)}
form.simu .col .fine{margin:6px 0 0}
details.option{border:1px solid var(--trait);background:var(--blanc);padding:0 18px}
details.option summary{padding:14px 0;cursor:pointer;font-size:14.5px;color:var(--encre-2)}
details.option[open]{padding-bottom:18px}
details.option .cols{border:1px solid var(--trait)}
.js .sans-js{display:none}
@media(max-width:560px){.onglets a{flex:1 1 50%;text-align:center;padding:11px 8px}}
/* La réponse tient en une phrase ; le détail se demande ici. */
.envoi{border:1px solid var(--trait-2);background:var(--blanc);padding:22px 22px 20px;max-width:720px}
.envoi h3{font-family:var(--serif);font-size:20px;font-weight:600;margin:0 0 6px}
.envoi > p{font-size:14.5px;color:var(--encre-2);margin:0 0 14px}
.envoi form.mini{padding:0;border:0;background:none}
/* Dans la comparaison de l'accueil, notre ligne se distingue sans crier. */
table.t tr.nous td{background:var(--vert-clair)}
/* La mention de copyright, sur toute la largeur, sous le reste du pied. */
footer .copyright{flex:1 1 100%;margin:14px 0 0;padding-top:14px;
  border-top:1px solid var(--trait);font-size:12.5px;color:var(--encre-3)}

/* ── bouton WhatsApp flottant ───────────────────────────────────────────
   Le vert de WhatsApp plutôt que celui du site : c'est lui que le visiteur
   reconnaît. Sur téléphone, l'icône seule, pour ne rien masquer du texte. */
.whatsapp{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;align-items:center;
  gap:8px;padding:12px 18px 12px 14px;border-radius:999px;background:#1FA855;color:#fff;
  text-decoration:none;font-size:15px;font-weight:600;border:1px solid #178A45;
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
.whatsapp:hover{background:#178A45;color:#fff}
.whatsapp:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
@media(max-width:560px){
  .whatsapp{right:14px;bottom:14px;padding:12px}
  .whatsapp span{display:none}
}
@media print{.whatsapp{display:none}}

/* ── textes légaux ───────────────────────────────────────────────────── */
footer .copyright .legal{display:inline-flex;flex-wrap:wrap;gap:4px 14px;margin-left:14px}
footer .copyright .legal a{color:var(--encre-3)}
@media(max-width:560px){footer .copyright .legal{display:flex;margin:8px 0 0}}

/* ── case d'accord : jamais cochée d'avance ─────────────────────────── */
.accord{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font-size:13.5px;
  line-height:1.5;color:var(--encre-2);font-weight:400;cursor:pointer;flex-basis:100%}
.accord input{margin:3px 0 0;width:17px;height:17px;flex:none;accent-color:var(--vert)}
form.mini label.accord{font-size:13.5px;color:var(--encre-2)}
.envoi .fine{font-size:13.5px;color:var(--encre-3)}

/* ── bandeau de lancement, tout en haut ─────────────────────────────────
   Il glisse lentement et s'arrête au survol. Pour qui a demandé moins
   d'animations à son système, il reste immobile. */
.bandeau{display:block;overflow:hidden;white-space:nowrap;background:var(--vert-fonce);
  color:#fff;text-decoration:none;font-size:13.5px;line-height:1}
.bandeau .defile{display:inline-flex;animation:defile 60s linear infinite}
.bandeau .defile span{padding:10px 56px 10px 0}
.bandeau b{font-weight:600;letter-spacing:.02em}
.bandeau u{text-underline-offset:3px}
.bandeau:hover .defile,.bandeau:focus-visible .defile{animation-play-state:paused}
.bandeau:focus-visible{outline:3px solid var(--vert-trait);outline-offset:-3px}
@keyframes defile{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.bandeau .defile{animation:none}}
@media print{.bandeau{display:none}}