/* PREVENT'SECOURS - feuille de style du site
   Couleurs de la marque : bleu marine, vert, rouge.
   Une seule feuille pour toutes les pages. */

/* Polices hebergees chez nous, plus chez Google (12/10/2026).
   Fichiers Barlow Semi Condensed et Source Sans 3, licence SIL Open Font.
   Telecharges depuis Google Fonts le 12/10/2026, servis depuis preventsecours.fr :
   aucune adresse IP de visiteur ne part plus vers un serveur americain, et la
   page s'affiche sans attendre un aller-retour chez un tiers. */
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; font-display: swap;
             src: url('polices/barlowsemicondensed-500-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; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; font-display: swap;
             src: url('polices/barlowsemicondensed-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap;
             src: url('polices/barlowsemicondensed-600-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; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap;
             src: url('polices/barlowsemicondensed-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap;
             src: url('polices/barlowsemicondensed-700-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; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap;
             src: url('polices/barlowsemicondensed-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 800; font-display: swap;
             src: url('polices/barlowsemicondensed-800-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; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 800; font-display: swap;
             src: url('polices/barlowsemicondensed-800-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 400; font-display: swap;
             src: url('polices/sourcesans3-400-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; }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 400; font-display: swap;
             src: url('polices/sourcesans3-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('polices/sourcesans3-400-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; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('polices/sourcesans3-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap;
             src: url('polices/sourcesans3-600-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; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap;
             src: url('polices/sourcesans3-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap;
             src: url('polices/sourcesans3-700-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; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap;
             src: url('polices/sourcesans3-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bleu: #002E5F;
  --bleu-nuit: #001B3A;
  --bleu-clair: #0b4a8f;
  --vert: #007A38;
  --vert-vif: #00A84C;
  --vert-pale: #e8f4ed;
  --rouge: #b8123a;
  --creme: #f7f3ec;
  --gris: #f2f5f9;
  --bord: #d5dee8;
  --encre: #14212e;
  --doux: #4c5f72;
  --titre: 'Barlow Semi Condensed', 'Segoe UI', Arial, sans-serif;
  --texte: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --ombre: none;
  --rayon: 6px;
  /* anciens noms, gardés pour la page du questionnaire */
  --bordure: #dbe3ec;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px;
       /* Base de 17 px au lieu des 16 px du navigateur, le 01/10/2026 : tout le site
          est dimensionne en rem, qui se calcule sur cette racine et non sur body. */
       font-size: 17px; }
body { font-family: var(--texte); color: var(--encre); background: #fff; font-size: 18px; line-height: 1.65; }
img { max-width: 100%; display: block; }
a { color: var(--bleu-clair); }
/* Un lien vers une autre page du site, dans une phrase : en gras, sans
   soulignement, qui ne revient qu'au survol (02/10/2026). */
/* 14/10/2026. Ces liens etaient en gras, sans soulignement et de la couleur
   du texte : rien ne disait qu on pouvait cliquer. On les souligne. */
a.lien-gras { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a.lien-gras:hover, a.lien-gras:focus-visible { text-decoration-thickness: 3px; }

/* ================= en-tete ================= */
.entete { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.96);
          backdrop-filter: blur(8px); border-bottom: 1px solid var(--bord); }
.barre { max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 16px; }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marque img { height: 48px; width: auto; }
.marque .n { font-family: var(--titre); font-weight: 800; font-size: 1.4rem; color: var(--bleu);
             letter-spacing: .2px; line-height: 1.05; display: block; }
.marque .s { display: block; margin-top: 3px; font-family: var(--texte); font-size: .82rem;
             color: var(--vert); font-weight: 500; letter-spacing: 0; line-height: 1.25; }

nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
nav > a, .menu > .tete-menu {
  font: inherit; font-family: var(--titre); font-weight: 600; font-size: 1.08rem;
  color: var(--encre); text-decoration: none; background: none; border: 0; cursor: pointer;
  padding: 10px 13px; border-radius: 6px; display: inline-flex; align-items: center; gap: 7px;
}
nav > a:hover, .menu > .tete-menu:hover { background: var(--gris); color: var(--bleu); }
nav > a.actif, .menu > .tete-menu.actif { color: var(--bleu); background: var(--gris); }
.menu { position: relative; }
.menu > .tete-menu::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor;
                        border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.menu .volet {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 286px; background: #fff;
  border: 1px solid var(--bord); border-radius: 6px; padding: 8px;
  /* Le volet flottait sans relief sur ordinateur : le texte de la page
     transparaissait a cote et on ne voyait pas ou il s arretait. Ombre
     douce, teintee du bleu de la marque plutot que noire (13/10/2026).
     Sur telephone le volet est dans le flux du menu : la regle de la
     media query lui remet box-shadow: none. */
  box-shadow: 0 12px 30px rgba(0, 46, 95, .16), 0 2px 6px rgba(0, 46, 95, .08);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .16s;
}
.menu:hover .volet, .menu:focus-within .volet, .menu.ouvert .volet { opacity: 1; visibility: visible; transform: none; }
/* Le 12/10/2026 : le volet de « Vos outils » s'ouvrait vers la droite et
   passait sous « Tarifs » et sous le bouton vert. On croyait que Tarifs
   faisait partie du menu. La parade d'alors alignait le dernier volet de la
   barre sur sa droite.
   Le 14/10/2026, un quatrieme volet « Transparence » est arrive en derniere
   position. La parade s'appliquait desormais a lui : son volet, large de
   320 px, s'ouvrait vers la gauche et venait se placer sous « Tarifs ». On
   retombait exactement sur le malentendu de depart, signale par l'essai du
   14/10 au soir. Chaque volet s'ouvre donc sous son propre intitule. Mesure
   faite a 901, 940 et 1280 px de large : aucun ne depasse du bord droit. */
.menu .volet { max-width: calc(100vw - 24px); }
.volet a { display: block; padding: 9px 12px; border-radius: 6px; text-decoration: none; color: var(--encre); }
.volet a:hover { background: var(--vert-pale); }
.volet a b { display: block; font-family: var(--titre); font-weight: 600; font-size: 1.09rem; color: var(--bleu); }
.volet a span { font-size: .84rem; color: var(--doux); }
.burger { display: none; }

/* ================= boutons ================= */
.bouton {
  display: inline-block; background: var(--vert); color: #fff; text-decoration: none;
  font-family: var(--titre); font-weight: 700; padding: 12px 22px; border-radius: 6px;
  font-size: 1.1rem; border: 2px solid var(--vert); cursor: pointer; text-align: center;
  transition: .15s;
}
.bouton:hover { background: #00732f; border-color: #00732f; }
.bouton.creux { background: none; color: var(--bleu); border-color: var(--bord); }
.bouton.creux:hover { border-color: var(--bleu); background: var(--gris); }
/* Bouton creux en vert, pour les actions secondaires qu'on veut voir sans
   qu'elles concurrencent le bouton de devis (02/10/2026). */
.bouton.creux.vert { color: var(--vert); border-color: var(--vert); }
.bouton.creux.bleu { color: var(--bleu); border-color: var(--bleu); }
.bouton.creux.bleu:hover { background: #eef4fb; border-color: var(--bleu); }
.bouton.creux.vert:hover { background: var(--vert-pale); border-color: var(--vert); }
.bouton.blanc { background: #fff; color: var(--bleu); border-color: #fff; }
.bouton.blanc:hover { background: #eef2f7; border-color: #eef2f7; }
.bouton.fantome { background: none; color: #fff; border-color: rgba(255,255,255,.55); }
.bouton.fantome:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.bouton.large { display: block; width: 100%; }

/* ================= sections ================= */
section { padding: 64px 20px; }
.dedans { max-width: 1180px; margin: 0 auto; }
.etroit { max-width: 880px; margin: 0 auto; }
.chapeau { font-family: var(--titre); font-weight: 700; font-size: 1.06rem; letter-spacing: 1.6px;
           text-transform: none; color: var(--vert); }
h1 { font-family: var(--titre); font-weight: 800; font-size: clamp(2.3rem, 5.29vw, 3.68rem); line-height: 1.08; }
h2 { font-family: var(--titre); font-weight: 700; font-size: clamp(1.78rem, 3.22vw, 2.53rem); color: var(--bleu);
     margin-top: 10px; line-height: 1.18; }
h3 { font-family: var(--titre); font-weight: 600; font-size: 1.31rem; color: var(--bleu); }
.sstitre { color: var(--doux); margin-top: 12px; max-width: 64ch; font-size: 1.05rem; }
.creme { background: var(--creme); }
.gris { background: var(--gris); }
.marine { background: var(--bleu); color: #fff; }
.marine h2, .marine h3 { color: #fff; }
.marine .sstitre, .marine p { color: #cfe0f0; }
.marine .chapeau { color: #7fe0a4; }

/* ================= hero avec formulaire ================= */
.hero { position: relative; color: #fff; overflow: hidden;
        background: linear-gradient(135deg, #001B3A 0%, #002E5F 55%, #063a72 100%); }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
               background: radial-gradient(900px 420px at 88% -10%, rgba(0,135,62,.22), transparent 70%); }
.hero .dedans { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto;
                padding: 44px 20px 52px; display: grid; grid-template-columns: 1.2fr minmax(0, 480px); gap: 40px; align-items: start; }
@media (max-width: 950px) { .hero .dedans { grid-template-columns: 1fr; gap: 28px; } }
.etiq { display: inline-block; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
        padding: 6px 15px; border-radius: 99px; font-family: var(--titre); font-size: 1.01rem;
        font-weight: 600; letter-spacing: .2px; }
.hero h1 { margin-top: 16px; max-width: 18ch; font-size: clamp(2.2rem, 4.5vw, 3.6rem); text-wrap: balance; }
.hero h1 em { font-style: normal; color: #7fe0a4; }
.hero .accroche { font-size: 1.1rem; margin-top: 14px; max-width: 54ch; color: #d5e4f3; text-wrap: pretty; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.preuves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 26px; margin-top: 24px; max-width: 580px; }
.preuves div { font-size: .95rem; color: #dce9f6; padding-left: 26px; position: relative; line-height: 1.4; }
.preuves div::before { content: '\2713'; position: absolute; left: 0; color: #7fe0a4; font-weight: 700; }
@media (max-width: 560px) { .preuves { grid-template-columns: 1fr; } }/* piege a robots : invisible pour un humain, rempli par les automates */
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================= bandeau equivalence ================= */
.equiv { display: grid; grid-template-columns: auto auto auto; gap: 30px; align-items: baseline;
         justify-content: center; text-align: center; }
@media (max-width: 700px) { .equiv { grid-template-columns: 1fr; gap: 14px; } }
.equiv .gros { font-family: var(--titre); font-weight: 800; font-size: clamp(2.53rem, 6.21vw, 3.91rem);
               color: var(--bleu); line-height: 1.05; }
.equiv .egal { font-family: var(--titre); font-weight: 800; font-size: clamp(2.07rem, 4.6vw, 2.99rem); color: var(--vert); }
.equiv .lib { font-size: 1rem; color: var(--doux); margin-top: 8px; max-width: 27ch; margin-inline: auto; line-height: 1.45; text-wrap: pretty; }
.equiv .lib.large { max-width: 40ch; }
.equiv .gros { text-wrap: balance; }

/* ================= cartes ================= */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 18px; margin-top: 30px; }
.carte { background: #fff; border: 1px solid var(--bord); border-radius: 6px; padding: 24px; }
.creme .carte { border-color: #e6ded1; }
.carte .ico { width: 44px; height: 44px; border-radius: 6px; background: var(--vert-pale);
              display: grid; place-items: center; margin-bottom: 14px; }
.carte .ico svg { width: 23px; height: 23px; stroke: var(--vert); fill: none; stroke-width: 2;
                  stroke-linecap: round; stroke-linejoin: round; }
.carte p { margin-top: 8px; font-size: .97rem; color: var(--doux); }

/* liste « c'est pour vous si » */
.pourvous { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
@media (max-width: 720px) { .pourvous { grid-template-columns: 1fr; } }
.pourvous .pleine { grid-column: 1 / -1; }
.pourvous div { background: #fff; border: 1px solid var(--bord); border-left: 5px solid var(--vert);
                border-radius: 6px; padding: 16px 20px; font-size: 1rem; }
.creme .pourvous div { border-color: #e6ded1; border-left-color: var(--vert); }

/* La classe .compet, les lignes a coche facon flyer, n est plus posee par
   aucune page depuis le 14/10/2026 : ses trois derniers emplois, sur la page
   Transparence, sont devenus des cartes. Les regles sont retirees ici, ainsi
   que .compet.picto et .compet.serre plus bas. La liste numerotee
   .compet-num, elle, sert toujours sur la page Formation et reste. */

/* ================= offres ================= */
.offres { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; margin-top: 34px; }
/* Sur telephone les deux offres passent l'une sous l'autre. Sans min-width: 0
   la case refusait de retrecir sous 361 px et la page glissait de six pixels
   vers la droite (02/10/2026). */
@media (max-width: 860px) { .offres { grid-template-columns: 1fr; } .offres > * { min-width: 0; } }
.offre { border: 2px solid var(--bord); border-radius: 6px; padding: 28px; background: #fff; }
.offre.phare { border-color: var(--vert); box-shadow: var(--ombre); position: relative; }
.offre.phare::before { content: 'Tout compris'; position: absolute; top: -13px; left: 26px; background: var(--vert);
  color: #fff; font-family: var(--titre); font-weight: 700; font-size: 0.84rem; letter-spacing: .8px;
  padding: 5px 13px; border-radius: 99px; }
.offre .px { font-family: var(--titre); font-weight: 800; font-size: 3.1rem; color: var(--bleu); line-height: 1; margin-top: 12px; }
.offre .px small { font-size: .98rem; font-weight: 400; color: var(--doux); display: block; margin-top: 8px; line-height: 1.45; }
.offre ul { list-style: none; margin-top: 20px; display: grid; gap: 10px; }
.offre li { padding-left: 27px; position: relative; font-size: .98rem;
            display: grid; grid-template-columns: 1fr auto auto; gap: 0 12px; align-items: baseline; }
.offre li::before { content: '\2713'; position: absolute; left: 0; color: var(--vert); font-weight: 700; }
.offre .barre { text-decoration: line-through; text-decoration-color: rgba(192, 57, 43, .6);
                text-decoration-thickness: 1.5px; color: var(--encre); font-weight: 400;
                font-size: .96rem; white-space: nowrap; }
.offre .pxp { font-family: var(--titre); font-weight: 700; color: var(--bleu); white-space: nowrap; }
.offre .eco { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bord); }
.offre .eco .compare { display: flex; align-items: flex-end; gap: 12px; flex-wrap: nowrap; }
.offre .eco small { display: block; font-size: .74rem; color: var(--doux); font-weight: 400;
                    margin-bottom: 3px; line-height: 1.3; }
.offre .eco .barre { text-decoration: line-through; text-decoration-color: rgba(192, 57, 43, .7);
                     text-decoration-thickness: 1.5px; color: var(--encre);
                     font-family: var(--titre); font-weight: 700; font-size: 1.4rem; }
.offre .eco .avec b { font-family: var(--titre); font-weight: 800; color: var(--bleu); font-size: 1.44rem; }
.offre .eco .fleche { color: var(--vert); font-size: 1.35rem; font-weight: 700; line-height: 1.5; }
.offre .eco .gain { display: inline-block; margin-top: 13px; padding: 8px 15px; border-radius: 999px;
                    background: var(--vert); color: #fff; font-family: var(--titre);
                    font-weight: 700; font-size: 1.13rem; }
.offre .eco b { white-space: nowrap; }

/* ================= dates inter ================= */
.dates { display: grid; gap: 12px; margin-top: 26px; }
.date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; background: #fff;
        border: 1px solid var(--bord); border-left: 5px solid var(--vert); border-radius: 6px;
        padding: 17px 22px; }
.date .quand { font-family: var(--titre); font-weight: 700; font-size: 1.26rem; color: var(--bleu); }
.date .type { font-family: var(--titre); font-size: 0.85rem; font-weight: 700; letter-spacing: .8px;
              text-transform: none; color: #fff; background: var(--vert); padding: 3px 10px; border-radius: 99px; }
.date .reste { margin-left: auto; font-size: .93rem; font-weight: 600; white-space: nowrap; }
.date .reste.chaud { color: var(--rouge); }
.date .reste.plein { color: var(--doux); }
.date .lieu { flex-basis: 100%; font-size: .9rem; color: var(--doux); margin-top: -4px; }
.date .lieu + .lieu { margin-top: -10px; }
.vide { background: #fff; border: 1px dashed var(--bord); border-radius: 6px; padding: 24px; color: var(--doux); }

/* ================= elle ================= */
.elle { display: grid; grid-template-columns: 300px 1fr; gap: 38px; align-items: center; }
@media (max-width: 760px) { .elle { grid-template-columns: 1fr; } }
.elle img { border-radius: 6px; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }
.citation { border-left: 4px solid var(--vert); padding: 4px 0 4px 20px; margin-top: 20px; }
.citation p { font-size: 1.08rem; font-style: italic; color: var(--encre); margin: 0; }
.citation p::before { content: '\00AB\00A0'; }
.citation p::after { content: '\00A0\00BB'; }
.citation cite { display: block; margin-top: 8px; font-style: normal; font-family: var(--titre);
                 font-weight: 600; font-size: 1.01rem; color: var(--vert); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.badges span { background: var(--vert-pale); color: #075c2e; font-family: var(--titre); font-weight: 600;
               font-size: 0.98rem; padding: 6px 13px; border-radius: 99px; }

/* ================= frise des etapes ================= */
/* 14/10/2026 : align-items: start laissait chaque pancarte a la hauteur de
   son texte. Sur la meme ligne, « Identifier le besoin » faisait 184 px et
   sa voisine 206 px, ce qui se voyait tout de suite. En stretch, toutes les
   pancartes d une meme ligne prennent la hauteur de la plus haute, et
   grid-auto-rows: 1fr donne la meme hauteur a toutes les lignes : les cinq
   pancartes font exactement la meme taille, quel que soit leur texte. */
.frise { counter-reset: e; display: grid; grid-template-columns: repeat(3, 1fr);
         gap: 14px; margin-top: 30px; align-items: stretch; grid-auto-rows: 1fr; }
@media (max-width: 860px) { .frise { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .frise { grid-template-columns: 1fr; } }
.frise div { counter-increment: e; background: #fff; border: 1px solid var(--bord); border-radius: 6px;
             padding: 40px 16px 18px; position: relative; }
.creme .frise div { border-color: #e6ded1; }
.frise div::before { content: '0' counter(e); position: absolute; top: 14px; left: 16px;
                     font-family: var(--titre); font-weight: 800; font-size: 1.21rem; color: var(--vert); }
.frise b { font-family: var(--titre); font-weight: 700; color: var(--bleu); display: block; font-size: 1.14rem; }
.frise span { font-size: .89rem; color: var(--doux); display: block; margin-top: 5px; line-height: 1.45; }

/* ================= questions ouvrantes ================= */
.faq { margin-top: 28px; display: grid; gap: 10px; }
details { border: 1px solid var(--bord); border-radius: 6px; background: #fff; }
.creme details { border-color: #e6ded1; }
details[open] { border-color: var(--vert); }
summary { cursor: pointer; padding: 16px 20px; font-family: var(--titre); font-weight: 600;
          color: var(--bleu); list-style: none; display: flex; gap: 12px; align-items: flex-start; }
summary::-webkit-details-marker { display: none; }
/* Le gros plus vert n'apportait rien. Un chevron discret, le meme que sur les
   vignettes de la page Formation : la page parle une seule langue (02/10/2026). */
summary::before { content: ''; flex: 0 0 9px; width: 9px; height: 9px; margin-top: .45em;
                  border-right: 2px solid var(--vert); border-bottom: 2px solid var(--vert);
                  transform: rotate(-45deg); transition: transform .18s; }
details[open] > summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { summary::before { transition: none; } }
/* Les volets qui portent deja leur propre fleche n'en prennent pas une seconde */
.vignette > summary::before,
details.repli > summary::before,
.repli-sources > summary::before { content: none; }
details .rep { padding: 0 20px 18px 46px; color: var(--encre); }
details .rep p + p { margin-top: 10px; }

/* ================= tableaux ================= */
table { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: .97rem; background: #fff; }
th, td { border: 1px solid var(--bord); padding: 11px 14px; text-align: left; vertical-align: top; }
th { background: var(--bleu); color: #fff; font-family: var(--titre); font-weight: 600; }
tbody tr:nth-child(even) td { background: #fafcfe; }
.fiche th { background: var(--gris); color: var(--bleu); width: 32%; }
/* Les six questions a poser : la question est surlignee en vert, la reponse
   reste blanche. On voit d'un coup d'oeil ce qui est demande (02/10/2026). */
/* La colonne des questions est verte sur TOUTES les lignes. Une ligne sur deux
   repassait en blanc : la regle generale des tableaux etait plus forte que
   celle-ci, il a fallu viser aussi les rangs pairs (03/10/2026). */
.tableau table.six tbody tr td:first-child,
.tableau table.six tbody tr:nth-child(even) td:first-child {
  background: var(--vert-pale); font-weight: 600; color: var(--bleu); }

/* Le tableau qui compare le prix a l'unite et le prix dans le pack. Deux blocs
   de couleur se disputaient le regard : un seul accent suffit. La colonne du
   pack porte un filet vert et son chiffre est vert, l'autre reste neutre.
   (02/10/2026, apres essai d'une version grise et verte, trop chargee.) */
.tableau table.comparatif thead th:last-child { background: var(--vert); }
.tableau table.comparatif tbody td:last-child { color: var(--vert); font-weight: 700;
                                                box-shadow: inset 3px 0 0 var(--vert); }
/* Un mot surligne en bleu dans une phrase, pour pointer une page du site */
.surligne-bleu { background: #dce9f7; color: var(--bleu); font-weight: 700;
                 padding: 1px 7px; border-radius: 4px; text-decoration: none; }
a.surligne-bleu:hover { background: #c6daf1; }

/* ================= la source sous une reponse ================= */
.source { font-size: .82rem; color: var(--doux); font-style: italic; margin-top: 10px; line-height: 1.45; }
.marine .source { color: #9fbedd; }

/* blocs a intitule gras, facon « pour qui » et « ce que vous y gagnez » */
.blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 28px; }
.blocs div { background: #fff; border: 1px solid var(--bord); border-radius: 6px; padding: 22px 24px;
              display: flex; flex-direction: column; }
.blocs .action { margin-top: auto; padding-top: 18px; }
.blocs.inline div { display: block; }
.creme .blocs div { border-color: #e6ded1; }
.blocs b { font-family: var(--titre); font-weight: 700; color: var(--bleu); display: block; margin-bottom: 7px; }
.blocs p { font-size: .98rem; color: var(--doux); margin: 0; }
.blocs.inline b { display: inline; margin: 0; }
.blocs.inline p { display: inline; color: var(--encre); }

/* ================= reperes ================= */
.repere { border-left: 5px solid var(--vert); background: var(--vert-pale); border-radius: 6px;
          padding: 18px 22px; margin-top: 22px; }
.repere p + p { margin-top: 10px; }
.alerte { border-left-color: var(--rouge); background: #fdeef1; }
/* Le vert dit ce qui est compris. Ce qui est en option prend le bleu, sinon le
   lecteur range tout dans « compris » par habitude (03/10/2026). */
.repere.option { border-left-color: var(--bleu-clair); background: #eaf1f9; }
/* Une phrase a mettre en avant dans la couleur de la maison */
.en-vert { color: var(--vert); }

/* Une regle de fonctionnement n'est ni un avantage ni une option payante :
   elle reprend le sable deja utilise sur la page pour les points d'attention
   (delais, forfait de deplacement, suivi), plutot qu'une cinquieme couleur. */
.repere.regle { border-left-color: #c8781a; background: #fdf3e3; }

/* ================= appel ================= */
.appel { background: var(--bleu); color: #fff; text-align: center; }
.appel h2 { color: #fff; }
.appel p { color: #cfe0f0; margin-top: 12px; }
.appel .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ================= pied ================= */
footer { background: #071627; color: #a9c3dc; font-size: .89rem; padding: 46px 20px 28px; }
footer .cols { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 28px; }
@media (max-width: 860px) { footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { footer .cols { grid-template-columns: 1fr; } }
footer h2 { font-family: var(--titre); color: #fff; font-size: 1.09rem; margin-bottom: 11px; }
footer a { color: #cfe0f0; text-decoration: none; display: block; padding: 3px 0; }
footer a:hover { color: #fff; text-decoration: underline; }
footer .legal { max-width: 1180px; margin: 28px auto 0; padding-top: 18px; border-top: 1px solid #16324f;
                font-size: .78rem; line-height: 1.55; color: #7f9cbb; }
footer .villes { font-size: .78rem; color: #6f8aa8; }
footer .villes a { display: inline; color: #7f9cbb; }
/* dans le bloc des coordonnees et le bloc legal, les liens restent dans le texte */
footer .cols div:first-child a, footer .legal a { display: inline; }
footer .liens-legaux { margin-top: 12px; }
footer .liens-legaux a { color: #cfe0f0; }

/* ================= menu mobile ================= */
@media (max-width: 900px) {
  .burger { display: inline-flex; margin-left: auto; background: none; border: 1px solid var(--bord);
            border-radius: 6px; padding: 9px 13px; font-size: 1.15rem; cursor: pointer; color: var(--bleu); }
  /* Corrige le 13/10/2026 : cette regle visait « nav », donc TOUS les nav de
     la page, et pas seulement le menu du haut. Sur telephone, le sommaire de
     la page Formation, qui est un nav, se retrouvait en position absolue et
     se superposait au texte. Les raccourcis du bandeau d'accueil avaient deja
     du etre rattrapes a la main pour la meme raison. La regle ne vise plus
     que le menu du haut, qui porte l'identifiant nav. */
  #nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff;
         border-bottom: 1px solid var(--bord); flex-direction: column; align-items: stretch; padding: 10px; gap: 2px; }
  #nav.ouvert { display: flex; }
  /* « La formation » s'affichait dans un cadre gris de 135 px, seule entree
     encadree du menu : elle ne ressemblait plus aux autres (02/10/2026). */
  .menu > .tete-menu { display: flex; width: 100%; justify-content: flex-start; }
  #nav > a.actif, .menu > .tete-menu.actif {
    background: transparent; color: var(--bleu); font-weight: 700;
    box-shadow: inset 3px 0 0 var(--vert); border-radius: 0 6px 6px 0; }
  /* Le sous-menu ouvert n'etait decale que de 12 px : l'entree suivante du
     menu principal, « Tarifs », semblait appartenir a la liste ouverte. On
     le decale franchement et on lui pose un trait vert sur le cote, pour
     qu'on voie ou la liste commence et ou elle finit (13/10/2026). */
  .menu .volet { position: static; opacity: 1; visibility: visible; transform: none; border: 0;
                 box-shadow: none; display: none;
                 margin: 4px 0 10px 10px; padding: 2px 0 2px 14px;
                 border-left: 3px solid var(--vert-pale); }
  .menu.ouvert .volet { display: block; }
  #nav .bouton { text-align: center; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto; } }

/* liste numerotee des huit competences */
.compet-num { margin: 12px 0 0 26px; display: grid; gap: 8px; }
.compet-num li { line-height: 1.55; padding-left: 4px; }
.compet-num li::marker { font-family: var(--titre); font-weight: 700; color: var(--bleu); }

/* longueur de ligne confortable : 72 caracteres */
article > p, article > ul, article > ol, article h3 + p,
details .rep p, details .rep ul, details .rep ol,
.encadre p, p.source, p.sstitre, .domaine { max-width: 72ch; }
article table p, article td p, .equiv p, .hero p, p[align="center"] { max-width: none; }

/* ================= tableaux sur telephone =================
   Un tableau large ne doit jamais pousser la page entiere vers la droite :
   il defile tout seul dans son cadre. Les fiches a deux colonnes, elles,
   se mettent en pile, c'est plus lisible qu'un defilement. */
.tableau { margin-top: 22px; }
.tableau table { margin-top: 0; }

/* 14/10/2026. Un doigt qui commencait son geste sur un tableau ne faisait
   plus descendre la page : le tableau avalait le mouvement. En cause, une
   vieille propriete webkit de defilement a l elan, qui cree sur iPhone une
   zone de defilement a part. Elle ne sert plus a rien depuis iOS 13, l elan
   etant devenu le comportement normal. Remplacee par touch-action, qui
   autorise les deux directions : le navigateur choisit selon le geste. */@media (max-width: 760px) {
  .tableau { overflow-x: auto; touch-action: pan-x pan-y; border-radius: 6px;
             box-shadow: inset -14px 0 14px -14px rgba(0, 46, 95, .45); }
  .tableau table { min-width: 540px; }
  .tableau table.fiche { min-width: 0; }
}

@media (max-width: 620px) {
  .fiche, .fiche tbody, .fiche tr, .fiche th, .fiche td { display: block; width: auto; }
  .fiche { border: 0; }
  .fiche tr { border: 1px solid var(--bord); border-radius: 6px; margin-top: 10px; overflow: hidden; }
  .fiche tr:first-child { margin-top: 0; }
  .fiche th, .fiche td { border: 0; }
  .fiche th { background: var(--gris); color: var(--bleu); font-size: .84rem;
              letter-spacing: .3px; padding: 8px 14px 7px; }
  .fiche td { padding: 10px 14px 12px; word-break: break-word; }
  .fiche tbody tr:nth-child(even) td { background: #fff; }
}

/* ================= bandeau de chiffres cles ================= */
.chiffres { background: var(--bleu-nuit); padding: 22px 20px; }
.chiffres .bande { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 18px; }
/* Les six reperes s'alignent sur une meme ligne de base. « 1 mannequin »
   passait sur deux lignes et decalait sa legende vers le bas : la grande
   valeur tient desormais sur une seule ligne et se retrecit si besoin,
   et la legende est calee en bas de case (03/10/2026). */
.chiffres .bande > div { text-align: center; display: flex; flex-direction: column;
                         justify-content: flex-start; }
.chiffres b { display: block; font-family: var(--titre); font-weight: 800;
              font-size: clamp(1rem, 2vw, 1.72rem); white-space: nowrap;
              color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
/* Le rapport fait partie de la valeur : « pour 2 » reste dans le gros
   caractere, en blanc comme le reste. Un essai en vert cassait la ligne. */
.chiffres b em { font-style: normal; color: inherit; }
.chiffres span { display: block; font-size: .78rem; color: #a8c6e4; margin-top: 4px; line-height: 1.35; }
@media (max-width: 860px) { .chiffres .bande { grid-template-columns: repeat(3, 1fr); gap: 16px 14px; } }
@media (max-width: 460px) { .chiffres .bande { grid-template-columns: repeat(2, 1fr); }
                            .chiffres b { font-size: 1.3rem; } }

/* ================= calculateur de prix ================= */
.calcul .sstitre { margin-inline: auto; text-align: center; }
.cadre-calcul { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: stretch;
                margin-top: 28px; background: #fff; border: 1px solid var(--bord);
                border-radius: 6px; padding: 26px; }
@media (max-width: 760px) { .cadre-calcul { grid-template-columns: 1fr; gap: 20px; padding: 20px; } }

.reglage { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.reglage .etiq { font-size: 0.94rem; font-weight: 600; letter-spacing: .3px; color: var(--doux);
                 text-transform: none; }
.calcul .compteur { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 12px; }
.calcul .compteur button { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--bord);
                           background: var(--gris); color: var(--bleu); font-size: 29.9px; line-height: 1;
                           cursor: pointer; font-family: var(--titre); }
.calcul .compteur button:hover:not(:disabled) { border-color: var(--vert); background: var(--vert-pale); }
.calcul .compteur button:disabled { opacity: .3; cursor: not-allowed; }
.calcul .compteur .val { font-family: var(--titre); font-size: 3.68rem; font-weight: 800; color: var(--bleu);
                         min-width: 110px; text-align: center; font-variant-numeric: tabular-nums; line-height: 1; }

.resultat { border-radius: 6px; padding: 20px 22px; border: 1.5px solid var(--bord); background: var(--gris);
            display: flex; flex-direction: column; justify-content: center; }
.resultat.pack  { border-color: var(--vert); background: var(--vert-pale); }
.resultat.inter { border-color: var(--bleu); }
.resultat.sur   { border-color: var(--rouge); }
.resultat .formule { font-family: var(--titre); font-size: 0.9rem; font-weight: 700; letter-spacing: 1px;
                     text-transform: none; color: var(--vert); }
.resultat.inter .formule { color: var(--bleu); }
.resultat.sur   .formule { color: var(--rouge); }
.resultat .montant { font-family: var(--titre); font-size: 2.64rem; font-weight: 800; color: var(--bleu);
                     margin-top: 4px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.resultat .detail { margin-top: 8px; font-size: .95rem; line-height: 1.5; color: var(--encre); max-width: 46ch; }
.mentions-calcul { margin-top: 16px; font-size: .86rem; color: var(--doux); text-align: center;
                   max-width: 72ch; margin-inline: auto; }

/* ================= l'escalier du parrainage (13/10/2026) =================
   Trois cartes de meme taille ne disaient pas que l'avoir augmente. Les
   marches montent, la couleur se renforce : on voit la recompense et on a
   envie d'aller jusqu'a la troisieme. */
.escalier { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
            margin-top: 22px; max-width: 72ch; }
.escalier .colonne { display: grid; grid-template-rows: 1fr auto; }
.escalier .marche { align-self: end; border-radius: 8px 8px 0 0;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            text-align: center; padding: 12px 8px; }
.escalier .marche b { display: block; font-family: var(--titre); font-weight: 700;
            font-size: 1.85rem; line-height: 1.05; }
.escalier .marche span { display: block; font-size: .82rem; margin-top: 3px; opacity: .85; }
.escalier .m1 { height: 92px;  background: var(--vert-pale); color: var(--bleu); }
.escalier .m2 { height: 128px; background: var(--vert-vif);  color: #fff; }
.escalier .m3 { height: 166px; background: var(--vert);      color: #fff; }
.escalier .rang { margin: 0; padding-top: 8px; border-top: 3px solid var(--bleu);
            text-align: center; font-size: .86rem; color: var(--doux); }
.cumul-escalier { margin-top: 14px; font-size: 1.02rem; color: var(--encre); max-width: 72ch; }
.cumul-escalier b { color: var(--vert); font-family: var(--titre); font-size: 1.2rem; }
/* L'escalier descendant du prix par salarie : meme mecanique, a l'envers.
   La hauteur suit le prix, et seule la derniere marche, la meilleure, passe
   en vert plein. C'est elle que le regard doit atteindre. */
.escalier.descend { grid-template-columns: repeat(4, 1fr); }
.escalier.descend .marche { background: var(--vert-pale); color: var(--bleu); }
.escalier .d1 { height: 170px; }
.escalier .d2 { height: 124px; }
.escalier .d3 { height: 98px; }
.escalier .d4 { height: 82px; }
/* La derniere marche est le meilleur prix : c'est elle que le regard doit
   atteindre, donc elle seule passe en vert plein. Deux classes sur l'element,
   sinon la regle generale juste au-dessus l'emporte (13/10/2026). */
.escalier.descend .marche.d4 { background: var(--vert); color: #fff; }
.escalier.descend .colonne:last-child .rang { color: var(--vert); font-weight: 700; }

@media (max-width: 520px) {
  .escalier { gap: 7px; }
  .escalier .marche { padding: 10px 4px; }
  .escalier .marche b { font-size: 1.35rem; }
  .escalier .marche span { font-size: .72rem; }
  .escalier .m1 { height: 76px; } .escalier .m2 { height: 104px; } .escalier .m3 { height: 134px; }
  .escalier .rang { font-size: .74rem; }
  .escalier.descend { gap: 5px; }
  .escalier.descend .marche b { font-size: 1.02rem; }
  .escalier.descend .marche span { font-size: .62rem; }
  .escalier .d1 { height: 128px; } .escalier .d2 { height: 96px; }
  .escalier .d3 { height: 78px; }  .escalier .d4 { height: 66px; }
  .escalier.descend .rang { font-size: .68rem; }
}

/* ============== les deux preuves dessinees (13/10/2026) ==============
   Une proportion ecrite se lit, une proportion dessinee se comprend. La
   jauge pour les 73 %, les dix points pour le « un sur dix ». */
.preuves-chiffrees { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 26px; max-width: 72ch; }
.preuve-chiffree .gros-chiffre { margin: 0; font-family: var(--titre); font-weight: 800;
            font-size: 2.6rem; line-height: 1; }
.preuve-chiffree .gros-chiffre.rouge { color: var(--rouge); }
.preuve-chiffree .gros-chiffre.vert  { color: var(--vert); }
.preuve-chiffree .dit { margin-top: 12px; font-size: .98rem; line-height: 1.55; color: var(--encre); max-width: none; }

/* padding a zero : une regle plus haut dans la feuille posait 26 px a gauche,
   et la barre ne remplissait plus que 66 % au lieu de 73 (13/10/2026). */
.jauge-preuve { margin-top: 12px; height: 20px; border-radius: 10px; padding: 0;
            background: #e4e9ef; overflow: hidden; }
.jauge-preuve span { display: block; height: 100%; background: var(--rouge); border-radius: 10px; }

.dix { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; padding: 0; }
.dix i { width: 19px; height: 19px; border-radius: 50%; background: #d7dde5; display: block; }
.dix i.vivant { background: var(--vert); }

.delai-preuve { margin-top: 26px; max-width: 72ch; }

@media (max-width: 620px) {
  .preuves-chiffrees { grid-template-columns: 1fr; gap: 26px; }
  .preuve-chiffree .gros-chiffre { font-size: 2.2rem; }
}

/* ======= les deux durees d'arret, en barres (13/10/2026) =======
   243 jours, c'est trois fois et demie 70 jours. Deux nombres cote a cote
   ne le disent pas, deux barres si. Les largeurs sont proportionnelles. */
.titre-barres { margin-top: 24px; font-family: var(--titre); font-weight: 700;
            color: var(--bleu); font-size: 1.04rem; }
.barres-arret { margin-top: 12px; max-width: 72ch; }
.barre-arret + .barre-arret { margin-top: 16px; }
.barre-arret .lib { margin: 0 0 6px; font-size: .92rem; color: var(--doux); }
.barre-arret .piste { background: #e4e9ef; border-radius: 6px; padding: 0; }
.barre-arret .piste span { display: block; background: var(--bleu); border-radius: 6px;
            padding: 9px 14px; min-width: 7em; }
.barre-arret .piste b { color: #fff; font-family: var(--titre); font-weight: 700; font-size: 1.1rem; }
.barre-arret:last-child .piste span { background: var(--rouge); }
/* Une barre qui represente une depense choisie, et non subie : verte.
   Ajoutee le 13/10/2026 pour comparer le prix du pack au cout d un
   accident, sur la page des tarifs. */
.barre-arret .piste span.bon { background: var(--vert); }
.legende-barres { margin-top: 12px; max-width: 72ch; font-size: .97rem;
            line-height: 1.55; color: var(--doux); }

.sur-quatre { display: flex; align-items: center; gap: 20px; margin-top: 12px;
            max-width: 72ch; flex-wrap: wrap; }
.sur-quatre .carres { display: flex; gap: 6px; flex: 0 0 auto; }
.sur-quatre .carres i { width: 30px; height: 30px; border-radius: 5px;
            background: #e4e9ef; display: block; }
.sur-quatre .carres i.plein { background: var(--rouge); }
.sur-quatre p { margin: 0; flex: 1 1 260px; font-size: .97rem; line-height: 1.55; }

/* ===== l'echeancier de paiement, en frise (13/10/2026) =====
   Trois echeances, ce sont trois moments qui se suivent : un trait les relie,
   un point marque chacun. */
.frise-paiement { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
            margin-top: 16px; max-width: 72ch; position: relative; }
.frise-paiement .jalon { position: relative; padding: 26px 10px 0 0; text-align: left; }
.frise-paiement .jalon::before { content: ''; position: absolute; left: 0; top: 7px;
            right: 0; height: 3px; background: var(--bord); }
.frise-paiement .jalon:last-child::before { right: auto; width: 7px; }
.frise-paiement .point { position: absolute; left: 0; top: 0; width: 17px; height: 17px;
            border-radius: 50%; background: var(--vert); border: 3px solid #fff;
            box-shadow: 0 0 0 2px var(--vert); }
.frise-paiement .q { display: block; font-size: .86rem; color: var(--doux); }
.frise-paiement .m { display: block; margin-top: 3px; font-family: var(--titre);
            font-weight: 800; color: var(--bleu); font-size: 1.42rem; }
.frise-paiement .m small { font-size: .62em; font-weight: 700; }
@media (max-width: 560px) {
  .frise-paiement .m { font-size: 1.12rem; }
  .frise-paiement .q { font-size: .74rem; }
}

/* ===== le bilan de toutes les echeances saisies (13/10/2026) =====
   L'outil donnait un verdict par certificat. Ce bloc fait la somme et
   ouvre la suite : un devis deja renseigne, et un seul fichier agenda. */
.bilan-ech { margin-top: 22px; background: var(--gris); border: 1px solid var(--bord);
             border-radius: 6px; padding: 20px 22px; }
.bilan-ech .titre-bilan { font-family: var(--titre); font-weight: 700; color: var(--bleu);
                          font-size: 1.1rem; margin: 0; }
.chiffres-bilan { list-style: none; padding: 0; margin: 12px 0 0;
                  display: flex; flex-wrap: wrap; gap: 10px 26px; }
.chiffres-bilan li { font-size: .95rem; color: var(--doux); }
.chiffres-bilan li b { font-family: var(--titre); font-size: 1.35rem; color: var(--encre);
                       margin-right: 6px; vertical-align: -1px; }
.chiffres-bilan li.rouge b { color: var(--rouge); }
.chiffres-bilan li.orange b { color: #b46a00; }
.chiffres-bilan li.vert b { color: var(--vert); }
.action-bilan { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.bilan-ech .source { margin-top: 10px; }
@media (max-width: 560px) {
  .action-bilan { flex-direction: column; align-items: stretch; }
  .action-bilan .bouton { text-align: center; }
}

/* ================= frise des 24 mois ================= */
.frise24 { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--bord); }
.frise24 h3 { color: var(--bleu); font-size: 1.32rem; margin: 0; }
.frise24 .ruban { position: relative; margin-top: 26px; }

/* Le trait part clair et se renforce : on avance. Il depasse la derniere
   pastille et se termine par une fleche. */
.frise24 .piste { position: absolute; top: 11px; left: 14px; right: 18px; height: 6px;
                  border-radius: 6px; transform-origin: left center;
                  background: linear-gradient(90deg, #a9ddc0 0%, var(--vert) 55%); }
.frise24 .fleche { position: absolute; top: 4px; right: 0; width: 0; height: 0;
                   border-top: 11px solid transparent; border-bottom: 11px solid transparent;
                   border-left: 18px solid var(--vert); transform-origin: left center; }

.frise24 .jalons { list-style: none; padding: 0; margin: 0;
                   display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.frise24 .jalons li { position: relative; padding-top: 42px; }

.frise24 .pastille { position: absolute; top: 0; left: 0; width: 28px; height: 28px; box-sizing: border-box;
                     border-radius: 50%; background: #fff; border: 4px solid var(--vert);
                     color: var(--vert); display: grid; place-items: center; }
.frise24 .pastille svg { width: 14px; height: 14px; display: block; }
.frise24 li.phare .pastille { background: var(--vert); color: #fff; }
.frise24 li.phare .quand { color: var(--vert); }

.frise24 .quand { display: block; font-family: var(--titre); font-weight: 700; color: var(--bleu); font-size: 1.09rem; }
.frise24 .quoi { display: block; font-size: .92rem; color: var(--encre); line-height: 1.5; margin-top: 4px; }

.frise24 .suivi { display: flex; align-items: center; gap: 34px; max-width: none;
                  margin: 26px 14px 0 14px; padding: 24px 30px;
                  background: #00632D; border-radius: 6px;
                  box-shadow: none;
                  color: #fff; }
.frise24 .suivi b { flex: 0 0 auto; font-family: var(--titre); font-weight: 800; font-size: 1.21rem;
                    line-height: 1.45; text-align: center; color: #fff;
                    padding-right: 30px; border-right: 1px solid rgba(255, 255, 255, .35); }
.frise24 .suivi ul { list-style: none; margin: 0; padding: 0; flex: 1;
                     display: grid; grid-template-columns: 1fr; gap: 12px; align-content: center; }
.frise24 .suivi li { position: relative; padding-left: 21px; font-size: .95rem; line-height: 1.5; }
.frise24 .suivi li::before { content: '→'; position: absolute; left: 0; top: 0;
                             color: #8fe8b2; font-weight: 700; font-size: 1.05rem; line-height: 1.45; }
/* Une seule phrase a la place des trois puces : le detail est donne une fois
   pour toutes dans la section « Le suivi seul », plus bas (03/10/2026). */
.frise24 .suivi p { flex: 1; margin: 0; position: relative; padding-left: 21px;
                    font-size: 1rem; line-height: 1.55; color: #fff; max-width: none; }
.frise24 .suivi p::before { content: '→'; position: absolute; left: 0; top: 0;
                            color: #8fe8b2; font-weight: 700; font-size: 1.05rem; line-height: 1.5; }

/* L animation ne joue qu une fois, a l apparition. Sans JavaScript tout est deja la. */
.frise24.anim .piste { transform: scaleX(0); }
.frise24.anim .fleche { opacity: 0; }
.frise24.anim .jalons li { opacity: 0; transform: translateY(10px); }
.frise24.anim.vue .piste { transform: scaleX(1); transition: transform 2.4s cubic-bezier(.22, .61, .36, 1); }
.frise24.anim.vue .fleche { opacity: 1; transition: opacity .4s ease-out 2.2s; }
.frise24.anim.vue .jalons li { opacity: 1; transform: none; transition: opacity .35s ease-out, transform .35s ease-out; }
.frise24.anim.vue .jalons li:nth-child(1) { transition-delay: .25s; }
.frise24.anim.vue .jalons li:nth-child(2) { transition-delay: .85s; }
.frise24.anim.vue .jalons li:nth-child(3) { transition-delay: 1.45s; }
.frise24.anim.vue .jalons li:nth-child(4) { transition-delay: 2.05s; }

/* ===== la frise ne se fige plus une fois dessinee (03/10/2026) =====
   Un point vert parcourt les 24 mois en boucle, les pastilles arrivent avec
   une onde, et le jalon du recyclage bat doucement : c'est le moment ou il
   faut nous rappeler, autant que l'oeil s'y pose. */
.frise24 .piste::after { content: ''; position: absolute; top: 50%; left: 0;
    width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%;
    background: var(--vert-vif); box-shadow: 0 0 0 4px rgba(0, 168, 76, .2); opacity: 0; }
.frise24.anim.vue .piste::after { animation: court24 7s cubic-bezier(.45, .05, .55, .95) 2.7s infinite; }
@keyframes court24 {
  0%   { left: 0;    opacity: 0; }
  7%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.frise24 .pastille::after { content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid var(--vert-vif); opacity: 0; pointer-events: none; }
.frise24.anim.vue .jalons li .pastille { animation: pop24 .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.frise24.anim.vue .jalons li .pastille::after { animation: onde24 1.2s ease-out both; }
.frise24.anim.vue .jalons li:nth-child(1) .pastille,
.frise24.anim.vue .jalons li:nth-child(1) .pastille::after { animation-delay: .25s; }
.frise24.anim.vue .jalons li:nth-child(2) .pastille,
.frise24.anim.vue .jalons li:nth-child(2) .pastille::after { animation-delay: .85s; }
.frise24.anim.vue .jalons li:nth-child(3) .pastille,
.frise24.anim.vue .jalons li:nth-child(3) .pastille::after { animation-delay: 1.45s; }
.frise24.anim.vue .jalons li:nth-child(4) .pastille,
.frise24.anim.vue .jalons li:nth-child(4) .pastille::after { animation-delay: 2.05s; }
@keyframes pop24 { 0% { transform: scale(.35); } 100% { transform: scale(1); } }
@keyframes onde24 { 0% { transform: scale(.55); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } }

/* Le jalon du mois 22 continue de battre : c'est l'echeance a ne pas manquer. */
.frise24.anim.vue li.phare .pastille { animation: pop24 .5s cubic-bezier(.34, 1.56, .64, 1) 1.45s both,
                                                  battement24 2.8s ease-in-out 3.4s infinite; }
@keyframes battement24 {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 168, 76, .45); }
  55%      { box-shadow: 0 0 0 8px rgba(0, 168, 76, 0); }
}

.frise24.anim.vue .fleche { animation: pousse24 2.4s ease-in-out 3.1s infinite; }
@keyframes pousse24 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* au survol d'un jalon, la pastille se leve un peu */
.frise24 .pastille { transition: transform .18s ease-out; }
.frise24 .jalons li:hover .pastille { transform: scale(1.14); }
@media (prefers-reduced-motion: reduce) {
  .frise24.anim .piste, .frise24.anim.vue .piste { transform: none; transition: none; }
  .frise24.anim .fleche, .frise24.anim.vue .fleche { opacity: 1; transition: none; }
  .frise24.anim .jalons li, .frise24.anim.vue .jalons li { opacity: 1; transform: none; transition: none; }
  /* si la personne a demande moins d'animation, rien ne bouge ni ne clignote */
  .frise24 .piste::after, .frise24.anim.vue .piste::after { animation: none; opacity: 0; }
  .frise24.anim.vue .jalons li .pastille,
  .frise24.anim.vue li.phare .pastille,
  .frise24.anim.vue .jalons li .pastille::after,
  .frise24.anim.vue .fleche { animation: none; }
  .frise24 .pastille, .frise24 .jalons li:hover .pastille { transform: none; transition: none; }
}

@media (max-width: 767px) {
  .frise24 .ruban { display: flex; flex-direction: column; }
  .frise24 .suivi { order: -1; margin: 0 0 22px; padding: 18px 18px; border-radius: 6px;
                    flex-direction: column; align-items: flex-start; gap: 16px; }
  .frise24 .suivi b { border-right: 0; padding-right: 0; text-align: left; }

  .frise24 .piste, .frise24 .fleche { display: none; }

  .frise24 .jalons { grid-template-columns: 1fr; gap: 0; position: relative; }
  /* Cette barre pale, posee a 6 px du bord, ne passait pas par les pastilles :
     sur telephone on voyait donc deux traits verticaux au lieu d'un. Seul le
     trait porte par chaque etape, aligne sur les pastilles, est garde.
     Constate le 02/10/2026 sur une capture d'ecran. */
  .frise24 .jalons::before { display: none; }
  .frise24 .jalons li { padding: 0 0 22px 52px; }
  .frise24 .jalons li:last-child { padding-bottom: 0; }
  .frise24 .pastille { left: 20px; }
  .frise24 .jalons li::after { content: ''; position: absolute; left: 31px; top: 28px; bottom: 0;
                               width: 6px; border-radius: 6px;
                               background: linear-gradient(180deg, #a9ddc0, var(--vert)); }
  .frise24 .jalons li:last-child::after { display: none; }
}

/* ================= six questions a poser ================= */
.six td:first-child { font-family: var(--titre); font-weight: 600; color: var(--bleu); width: 44%; }

/* ================= barre fixe sur telephone ================= */
.barre-mobile { display: none; }
@media (max-width: 767px) {
  .barre-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
                  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
                  padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
                  background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px);
                  border-top: 1px solid var(--bord); box-shadow: none; }
  .barre-mobile a { display: block; text-align: center; text-decoration: none; border-radius: 6px;
                    padding: 13px 6px; font-family: var(--titre); font-weight: 700;
                    font-size: 1.06rem; white-space: nowrap; }
  .barre-mobile .appeler { background: var(--gris); color: var(--bleu); border: 1.5px solid var(--bord); }
  .barre-mobile .prix    { background: var(--vert); color: #fff; border: 1.5px solid var(--vert); }
  /* la barre ne doit rien masquer : ni le pied de page, ni le bouton d'un formulaire */
  body { padding-bottom: 76px; }
}

/* Les pictogrammes de « Le contenu » dependaient de .compet, retiree le
   14/10/2026 faute d emploi. Rien ne les posait plus. */

/* ================= l affiche A3 et les dix fiches reflexes ================= */
.fiches-affiche { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center;
            margin-top: 30px; padding: 20px; background: #fff;
            border: 1px solid var(--bord); border-radius: 6px; }
.fiches-affiche h3 { margin: 0; color: var(--bleu); font-size: 1.12rem; }
.fiches-affiche p { margin-top: 8px; max-width: 60ch; }
.fiches-affiche .photo { background: var(--gris); border: 1px dashed var(--bord); border-radius: 6px;
                   min-height: 150px; display: grid; place-items: center; overflow: hidden; }
.fiches-affiche .photo img { width: 100%; height: auto; border-radius: 6px; }
@media (max-width: 640px) { .fiches-affiche { grid-template-columns: 1fr; } }

/* ================= outils : echeances et diagnostic ================= */
.cadre-outil { margin-top: 30px; background: #fff; border: 1px solid var(--bord);
               border-radius: 6px; padding: 24px; }
.actions-outil { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.compte-lignes { font-size: .88rem; color: var(--doux); }

.ligne-ech { display: grid; grid-template-columns: 250px 1fr auto; gap: 18px; align-items: start;
             padding: 16px 0; border-top: 1px solid var(--bord); }
.ligne-ech:first-child { border-top: 0; padding-top: 0; }
.ligne-ech .saisie label { display: block; font-size: 0.87rem; font-weight: 600; letter-spacing: .3px;
                           text-transform: none; color: var(--doux); margin-bottom: 5px; line-height: 1.3; }
.ligne-ech input { width: 100%; font: inherit; color: var(--encre); background: var(--gris);
                   border: 1.5px solid var(--bord); border-radius: 6px; padding: 10px 12px; }
.ligne-ech input:focus { outline: none; border-color: var(--vert); }
.ligne-ech .retirer { border: 0; background: none; color: var(--doux); font-size: 26px; line-height: 1;
                      cursor: pointer; padding: 4px 6px; }
.ligne-ech .retirer:hover { color: var(--rouge); }

.verdict-ech { min-height: 1px; }
.verdict-ech b { display: block; font-family: var(--titre); font-size: 1.17rem; }
.verdict-ech p { margin-top: 5px; font-size: .94rem; line-height: 1.5; max-width: 60ch; }
.verdict-ech.vert b { color: var(--vert); }
.verdict-ech.orange b { color: #b46a00; }
.verdict-ech.rouge b { color: var(--rouge); }
.bouton.petit { padding: 8px 14px; font-size: .88rem; }
@media (max-width: 720px) { .ligne-ech { grid-template-columns: 1fr auto; }
                            .ligne-ech .verdict-ech { grid-column: 1 / -1; } }

.q-diag { padding: 20px 0; border-top: 1px solid var(--bord); counter-increment: question; }
.q-diag:first-child { border-top: 0; padding-top: 0; }
/* Le 12/10/2026 : les numeros etaient ecrits en dur, de 1 a 11, alors que
   trois questions ne s'affichent que dans certains cas. Celui qui repondait
   « Non » a la premiere lisait 1, puis 4, puis 5, puis 7. Le compteur du
   navigateur saute les questions masquees : les numeros se suivent toujours. */
.cadre-outil { counter-reset: question; }
.q-diag .intitule::before { content: counter(question) ". "; }
/* La question se detache sur un fond vert pale : avant de choisir, on voit
   tout de suite ce qui est demande (02/10/2026). */
/* Deux questions sont devenues des etiquettes cliquables le 13/10/2026 : une
   etiquette est en ligne par defaut, on lui rend la forme d un paragraphe. */
label.intitule { display: block; cursor: pointer; }
.q-diag .intitule { margin: 0 0 14px; font-family: var(--titre); font-weight: 700;
                    color: var(--bleu); font-size: 1.17rem; max-width: none;
                    background: var(--vert-pale); border-left: 4px solid var(--vert);
                    border-radius: 0 6px 6px 0; padding: 12px 16px; }
.choix-diag { display: flex; flex-wrap: wrap; gap: 9px; }
.choix-diag button { font: inherit; cursor: pointer; color: var(--encre); background: var(--gris);
                     border: 1.5px solid var(--bord); border-radius: 6px; padding: 10px 18px; font-weight: 600; }
.choix-diag button:hover { border-color: var(--vert); }
.choix-diag button.pris { border-color: var(--vert); background: var(--vert-pale); color: var(--bleu); }
.choix-diag.serre button { padding: 9px 13px; min-width: 46px; text-align: center; }

.bloc-res { margin-top: 26px; background: #fff; border: 1px solid var(--bord);
            border-left: 4px solid var(--vert); border-radius: 6px; padding: 22px 24px; }
.bloc-res .etiq-res { font-family: var(--titre); font-size: 0.87rem; font-weight: 700; letter-spacing: 1px;
                      text-transform: none; color: var(--vert); margin-top: 18px; }
.bloc-res .etiq-res:first-child { margin-top: 0; }
.bloc-res p { max-width: 66ch; line-height: 1.55; margin-top: 6px; }
.verdict-diag { font-family: var(--titre); font-size: 1.32rem; margin-top: 16px; }
.verdict-diag.manque { color: var(--rouge); }
.verdict-diag.ok { color: var(--vert); }

/* ================= section « Qu'est-ce que la formation SST ? » =================
   Le style des panneaux ne sert que dans cette section.
   Les couleurs passent par les variables : elles suivront la refonte. */
.definition .ouverture { font-size: 1.12rem; line-height: 1.6; max-width: 72ch; margin-top: 16px; }
.definition .precision { font-size: .94rem; color: var(--doux); max-width: 72ch; margin-top: 10px; }
.definition h3 { margin-top: 34px; color: var(--bleu); font-size: 1.1rem; }

.panneaux { display: grid; gap: 16px; margin-top: 14px; }
.panneaux.deux { grid-template-columns: 1fr 1fr; }
.panneaux.trois { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .panneaux.deux,
                            .panneaux.trois { grid-template-columns: 1fr; } }

.panneau { background: #fff; border: 2px solid var(--bleu); border-radius: 6px;
                       padding: 18px 20px 20px; box-shadow: none; }
.panneau .pic { display: block; width: 32px; height: 32px; color: var(--vert); }
.panneau .pic svg { width: 32px; height: 32px; display: block; }
.panneau b { display: block; font-family: var(--titre); font-weight: 700;
                         color: var(--bleu); font-size: 1.21rem; margin-top: 12px; }
.panneau p { margin-top: 6px; font-size: .95rem; line-height: 1.5; max-width: none; }

/* Les reperes chiffres, en petites cartes (02/10/2026). Avant, les valeurs
   flottaient dans le vide et une valeur ecrite en toutes lettres ecrasait
   les chiffres voisins : le bloc partait de travers sur telephone. */
.chiffres-def { display: grid; grid-template-columns: repeat(4, 1fr);
                gap: 14px; margin-top: 18px; align-items: stretch; }
.chiffres-def > div { background: #fff; border: 1px solid var(--bord);
                      border-radius: 6px; padding: 16px 18px 18px; }
.creme .chiffres-def > div { border-color: #e6ded1; }
.chiffres-def b { display: block; font-family: var(--titre); font-weight: 800;
                  color: var(--bleu); font-size: 2.1rem; line-height: 1.05; }
/* Une valeur en toutes lettres reste lisible sans faire deux fois la hauteur */
.chiffres-def b.mot { font-size: 1.3rem; line-height: 1.25; padding-top: .28em; }
.chiffres-def span { display: block; font-size: .88rem; color: var(--doux);
                     margin-top: 7px; line-height: 1.45; }
@media (max-width: 760px) { .chiffres-def { grid-template-columns: 1fr 1fr; } }
@media (max-width: 430px) { .chiffres-def { grid-template-columns: 1fr; } }

.definition .apres-panneaux { margin-top: 16px; font-size: .97rem; max-width: 72ch; }

/* ================= section « Comment se déroule la formation SST ? » ================= */
.chiffres-def.large { margin-top: 22px; }
.chiffres-def.large b { font-size: 2.45rem; }
@media (max-width: 760px) { .chiffres-def.large b { font-size: 2rem; } }

.jauge-pratique { margin-top: 26px; }
.piste-pratique { height: 12px; border-radius: 6px; background: var(--gris); overflow: hidden; }
.piste-pratique span { display: block; width: 70%; height: 100%; background: var(--vert); border-radius: 6px; }
.jauge-pratique .precision { margin-top: 8px; }

.planning { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.planning .entete-jour { font-family: var(--titre); font-weight: 700; color: var(--bleu);
                         font-size: 1.17rem; padding-bottom: 2px; }
.planning .seance .quand-seance { display: block; font-size: 0.87rem; font-weight: 600; letter-spacing: .3px;
                            text-transform: none; color: var(--doux); }
.planning .seance b { margin-top: 6px; }
.planning .seance ul { margin: 10px 0 0; padding-left: 18px; }
.planning .seance li { font-size: .93rem; line-height: 1.45; margin-bottom: 5px; }
.planning .seance li:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  /* une seule colonne, dans l'ordre de la journée */
  .planning { grid-template-columns: 1fr; }
  .planning .entete-jour { display: none; }
  .planning .s1 { order: 1; }
  .planning .s3 { order: 2; }
  .planning .s2 { order: 3; }
  .planning .s4 { order: 4; }
}
.duo-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ================= sections repliables de la page Formation ================= */
details.repli > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline;
                          gap: 14px; padding: 4px 0; }
details.repli > summary::-webkit-details-marker { display: none; }
details.repli > summary h2 { margin: 0; flex: 1; }
details.repli > summary::after { content: ''; width: 13px; height: 13px; flex: none;
                                 border-right: 3px solid var(--vert); border-bottom: 3px solid var(--vert);
                                 transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s ease; }
details.repli[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
details.repli > summary:hover h2 { color: var(--vert); }
details.repli > summary:focus-visible { outline: 2px solid var(--vert); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { details.repli > summary::after { transition: none; } }

/* ================= actualites ================= */
.liste-articles { display: grid; gap: 14px; margin-top: 30px; }
.article-carte { display: block; text-decoration: none; background: #fff; border: 1px solid var(--bord);
                 border-radius: 6px; padding: 20px 22px; }
.article-carte:hover { border-color: var(--vert); }
.article-carte b { display: block; font-family: var(--titre); font-weight: 700; color: var(--bleu);
                   font-size: 1.29rem; line-height: 1.3; }
.article-carte span { display: block; margin-top: 7px; color: var(--encre); font-size: .95rem; line-height: 1.5; }
article .ouverture { font-size: 1.12rem; line-height: 1.6; max-width: 72ch; }
article h2 { font-size: 1.34rem; margin-top: 30px; }

/* Citation d'un texte officiel dans un article : on doit voir d'un coup d'oeil
   que la phrase n'est pas de nous mais de la source citee (13/10/2026). */
article > blockquote { max-width: 72ch; margin: 18px 0 0; padding: 16px 20px;
  border-left: 4px solid var(--bleu); background: var(--gris);
  font-size: 1.04rem; line-height: 1.6; color: var(--encre); font-style: italic; }
article > blockquote::before { content: '\201C'; }
article > blockquote::after { content: '\201D'; }

/* ================= « Qui peut devenir sauveteur ? » ================= */
@media (max-width: 760px) { .priorites { grid-template-columns: 1fr 1fr; } }

.pastilles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.pastille-info { display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
                 background: var(--gris); border: 1px solid var(--bord); border-radius: 999px;
                 padding: 9px 16px 9px 12px; color: var(--bleu); font-size: 1.08rem;
                 font-family: var(--titre); font-weight: 600; }
a.pastille-info:hover { border-color: var(--vert); background: var(--vert-pale); }
.pastille-info .pic { width: 19px; height: 19px; flex: none; color: var(--vert); }
.pastille-info .pic svg { width: 19px; height: 19px; display: block; }
.pastille-info.sans-lien { color: var(--doux); }
.pastille-info.sans-lien .pic { color: var(--doux); }

/* ================= carte de la zone d'intervention ================= */
.zone { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px 28px; align-items: start; margin-top: 20px; }
.carte-idf { width: 100%; height: auto; display: block; }
.zone-legende p { margin-top: 10px; font-size: .97rem; line-height: 1.5; }
.zone-legende .puce { display: inline-block; width: 15px; height: 15px; border-radius: 6px;
                      margin-right: 7px; vertical-align: -2px; border: 1px solid var(--bord); }
.zone-legende .puce.compris { background: #00873E; border-color: #00873E; }
.zone-legende .puce.paris { background: repeating-linear-gradient(45deg, #002E5F 0 3px, #e6edf5 3px 7px); }
/* La pastille « au-dela de 40 km » n avait pas de couleur : elle restait blanche. */
.zone-legende .puce.loin { background: #c8781a; border-color: #c8781a; }
.zone-legende .titre-villes { margin-top: 20px; font-family: var(--titre); font-weight: 700; color: var(--bleu); }
.villes-liens { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.villes-liens a { text-decoration: none; background: var(--gris); border: 1px solid var(--bord);
                  border-radius: 999px; padding: 6px 13px; color: var(--bleu); font-size: .88rem; }
.villes-liens a:hover { border-color: var(--vert); background: var(--vert-pale); }
@media (max-width: 820px) { .zone { grid-template-columns: 1fr; } }

/* ================= FAQ : renvoi vers la reponse complete ================= */
/* 14/10/2026 : un lien vert souligne en fin de reponse se confondait avec le
   texte. Il prend la forme flechee des autres renvois du site, bordee, pour
   qu on voie qu il mene ailleurs. Les cinq renvois de FAQ sont concernes. */
.rep .lire { margin-top: 16px; }
.rep .lire a { display: inline-flex; gap: 9px; align-items: center;
               padding: 10px 15px; background: #fff;
               border: 1px solid var(--bord); border-radius: 6px;
               font-family: var(--titre); font-weight: 700; font-size: .95rem;
               color: var(--bleu); text-decoration: none; }
.rep .lire a::before { content: '\2192'; color: var(--vert); font-weight: 700; }
.rep .lire a:hover, .rep .lire a:focus-visible {
               border-color: var(--vert); background: var(--vert-pale); color: var(--vert); }

/* ================= bandeau d'accueil sans formulaire ================= */
.hero .dedans.seul { grid-template-columns: 1fr; }
.hero .dedans.seul h1 { max-width: 22ch; }
.hero .dedans.seul .accroche { max-width: 70ch; }
/* Le 13/10/2026 : sous les deux cartes de prix de la page Tarifs, les deux
   paragraphes s'etiraient sur 54 caracteres seulement et laissaient la moitie
   droite du bandeau vide. Ils tiennent la largeur des deux cartes. */
.prix-hero + .accroche, .prix-hero + .accroche + .accroche { max-width: 88ch; }
.hero .dedans.seul .preuves { grid-template-columns: repeat(4, 1fr); max-width: none; gap: 12px 26px; margin-top: 30px; }
@media (max-width: 900px) { .hero .dedans.seul .preuves { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hero .dedans.seul .preuves { grid-template-columns: 1fr; } }

/* ================= du calculateur au questionnaire ================= */
.suite-calcul { margin-top: 22px; text-align: center; }
.suite-calcul p { max-width: 72ch; margin-inline: auto; font-size: .97rem; line-height: 1.55; }
.suite-calcul p + p { margin-top: 18px; }
.resultat .autre { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bord);
                   font-size: .9rem; color: var(--doux); line-height: 1.5; }

/* contour de focus */
/* Sans cela, qui navigue a la tabulation ne sait jamais ou il se trouve. */
:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .marine :focus-visible, .chiffres :focus-visible,
footer :focus-visible, .barre-mobile :focus-visible { outline-color: #8fe8b2; }
.ecran-titre { font-family: var(--titre); font-weight: 800; color: var(--bleu); font-size: 2.18rem; line-height: 1.15; margin: 0; }

/* ================= les deux prix dans le bandeau des tarifs ================= */
/* Les deux prix d'entree, 140 € et 300 €, sont ce que le visiteur vient
   chercher. Ils doivent etre la premiere chose qu'il voit apres le titre :
   cartes plus franches, chiffres beaucoup plus gros (03/10/2026). */
.prix-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; max-width: 880px; }
.prix-hero > div { background: rgba(255, 255, 255, .11); border: 2px solid rgba(159, 216, 182, .55);
                   border-radius: 10px; padding: 20px 22px 24px; }
.prix-hero .ou { display: block; font-family: var(--titre); font-weight: 700; font-size: 0.96rem;
                 letter-spacing: 1px; text-transform: none; color: #9fd8b6; }
.prix-hero b { display: block; font-family: var(--titre); font-weight: 800; color: #fff;
               font-size: clamp(3.3rem, 8.4vw, 4.8rem); line-height: 1.02; margin-top: 10px;
               padding-bottom: 12px; border-bottom: 3px solid #00a84c; }
.prix-hero b small { font-size: .42em; font-weight: 700; letter-spacing: .5px; }
.prix-hero .quoi { display: block; margin-top: 10px; font-size: .97rem; line-height: 1.5; color: #d5e4f3; }
/* Le vert annonce ce qui est compris. Ce qui ne l'est pas prend une autre
   couleur, sinon on lit « compris » par habitude (03/10/2026). */
.prix-hero .quoi.plus { color: #9fd8b6; font-weight: 600; }
.prix-hero .quoi.nc { color: #ffd98a; font-weight: 600; }
@media (max-width: 720px) { .prix-hero { grid-template-columns: 1fr; } }

/* ================= le prix par salarie d abord, le prix du groupe en dessous ================= */
.equiv.empile { display: block; }
.equiv.empile .lib { margin-inline: 0; max-width: 34ch; }
.equiv.empile .suite { display: flex; align-items: baseline; gap: 16px; margin-top: 20px; margin-left: 64px; }
.equiv.empile .suite .egal { font-size: clamp(1.1rem, 2vw, 1.4rem); }
.equiv.empile .gros.second { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.equiv.empile .suite .lib { max-width: 40ch; font-size: .95rem; }
@media (max-width: 620px) { .equiv.empile .suite { margin-left: 22px; gap: 12px; } }

/* ================= l annonce du 140 € sur l accueil ================= */
.annonce { text-align: center; }
.annonce .chiffre { font-family: var(--titre); font-weight: 800; color: var(--bleu);
                    font-size: clamp(2.76rem, 6.9vw, 4.6rem); line-height: 1.05; margin: 0; text-wrap: balance; }
.annonce .chiffre span { color: var(--vert); }
/* « Des » plus petit et bleu : 140 € est le prix d'un groupe de dix, pas celui
   de tout le monde. Le simulateur affiche 280 € pour cinq salaries (12/10/2026). */
.annonce .chiffre .des { color: var(--bleu); font-size: .42em; vertical-align: .34em; margin-right: .06em; }
.annonce .detail { margin: 14px auto 0; max-width: 56ch; color: var(--doux);
                   font-size: 1.05rem; line-height: 1.5; text-wrap: pretty; }
.prix-hero .quoi.plus { margin-top: 8px; }
.offre .px small span { display: block; margin-top: 7px; }
.offre .px small span + span { margin-top: 3px; }

/* ===== lisibilite du suivi, des delais et du prix ===== */
/* Dans la frise des etapes : ce qui vient en plus avec le pack */
.frise .avec { color: var(--bleu); font-weight: 600; margin-top: 11px; }
.frise ul.plus { list-style: none; padding: 0; margin: 6px 0 0; }
.frise ul.plus li { position: relative; padding-left: 15px; font-size: .89rem; color: var(--doux);
                    line-height: 1.4; margin-top: 5px; }
.frise ul.plus li::before { content: ''; position: absolute; left: 0; top: .48em; width: 6px; height: 6px;
                            border-radius: 50%; background: var(--vert); }

/* Les delais : un cas par ligne, marque par un trait vert */
.repere p.cas { position: relative; padding-left: 15px; }
.repere p.cas::before { content: ''; position: absolute; left: 0; top: .34em; bottom: .28em; width: 3px;
                        border-radius: 6px; background: var(--vert); }
.repere p.cas strong { color: var(--bleu); }
/* Les delais ne sont ni une offre intra ni une offre inter : ils prennent leur
   propre couleur, sable, pour ne pas se confondre avec le vert et le bleu (02/10/2026). */
.repere.delai { border-left-color: #c8781a; background: #fdf3e3; }
.repere.delai p.cas::before { background: #c8781a; }
.repere.delai > p > strong:first-child { color: #8a4f0d; }

/* Les listes dans un panneau */
.panneau b:first-child { margin-top: 0; }
.panneau ul { list-style: none; padding: 0; margin: 9px 0 0; }
.panneau ul li { position: relative; padding-left: 18px; font-size: .95rem; line-height: 1.5; margin-top: 8px; }
.panneau ul li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px;
                         border-radius: 50%; background: var(--vert); }
/* ===== paliers de prix du bandeau 140 ===== */
/* Encadre ajoute le 12/10/2026 : rien ne montrait que ce titre annonce les
   quatre cartes qui le suivent. Le cadre les reunit. */
.degressif { margin: 34px auto 0; max-width: 804px; border: 1.5px solid #e0d6c7;
             border-radius: 8px; background: rgba(255, 255, 255, .45); padding: 20px 20px 22px; }
.degressif .titre { text-align: center; font-family: var(--titre); font-weight: 700; color: var(--bleu);
                    font-size: 1.15rem; margin: 0 0 14px; max-width: none; }
.degressif .paliers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.degressif .paliers > div { background: #fff; border: 1px solid var(--bord); border-radius: 6px;
                            padding: 14px 8px 16px; text-align: center; }
.degressif .paliers b { display: block; font-family: var(--titre); font-weight: 800; color: var(--bleu);
                        font-size: 1.78rem; line-height: 1; }
.degressif .paliers span { display: block; font-size: .8rem; color: var(--doux); margin-top: 3px; }
.degressif .paliers i { display: block; font-style: normal; font-family: var(--titre); font-weight: 800;
                        color: var(--vert); font-size: 1.52rem; margin-top: 11px;
                        padding-top: 11px; border-top: 1px solid var(--bord); }
.degressif .paliers .phare { border: 2px solid var(--vert); background: var(--vert-pale); }
.degressif .paliers .phare i { border-top-color: #b9e2c9; }
/* Le tableau des rythmes de la section « Votre organisation ». La precision
   passe sous l'intitule, en plus petit, pour que la colonne reste etroite et
   que les montants se comparent d'un coup d'oeil (12/10/2026). */
table.rythmes td b { display: block; color: var(--bleu); font-family: var(--titre); font-weight: 700; font-size: 1.02rem; }
table.rythmes td span { display: block; margin-top: 3px; color: var(--doux); font-size: .9rem; line-height: 1.4; }
table.rythmes td:last-child { width: 26%; white-space: nowrap; font-family: var(--titre); font-weight: 700;
                              color: var(--bleu); font-size: 1.12rem; }
table.rythmes tbody tr.normal td,
table.rythmes tbody tr.normal:nth-child(even) td { background: var(--vert-pale); }
table.rythmes tbody tr.normal td:last-child { color: var(--vert); }
.degressif .socle { text-align: center; margin: 16px auto 0; max-width: 62ch;
                    color: var(--doux); font-size: .97rem; line-height: 1.5; text-wrap: pretty; }
@media (max-width: 560px) { .degressif .paliers { grid-template-columns: repeat(2, 1fr); } }

/* Une puce par phrase dans les deux blocs « Pour qui » */
.blocs ul { list-style: none; padding: 0; margin: 10px 0 0; }
.blocs ul li { position: relative; padding-left: 18px; font-size: .97rem; line-height: 1.55;
               color: var(--encre); margin-top: 9px; }
.blocs ul li:first-child { margin-top: 0; }
.blocs ul li::before { content: ''; position: absolute; left: 0; top: .58em; width: 7px; height: 7px;
                       border-radius: 50%; background: var(--vert); }
/* Le rappel pose sous le compteur, dans la colonne de gauche */
.cadre-calcul { grid-template-columns: 330px 1fr; }
/* Cette ligne vient apres la regle telephone du haut de page et l annulait :
   sur un ecran etroit le calculateur debordait de 41 px. On remet une colonne. */
@media (max-width: 760px) { .cadre-calcul { grid-template-columns: 1fr; } }
.reglage .repere-calcul { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bord);
                          text-align: left; font-size: .89rem; line-height: 1.55; color: var(--doux);
                          max-width: none; }
.reglage .repere-calcul strong { color: var(--bleu); }
@media (max-width: 760px) { .reglage .repere-calcul { text-align: left; } }
/* ===== le parcours en six etapes ===== */
.parcours { margin-top: 30px; }
.parcours .etapes { list-style: none; margin: 0; padding: 0; counter-reset: pas; }
.parcours > .etapes > li { position: relative; counter-increment: pas; padding: 0 0 28px 64px; }
.parcours > .etapes > li:last-child { padding-bottom: 0; }
.parcours > .etapes > li::before { content: '0' counter(pas); position: absolute; left: 0; top: 0;
                                   width: 44px; height: 44px; box-sizing: border-box;
                                   display: grid; place-items: center; border-radius: 50%;
                                   background: #fff; border: 3px solid var(--vert); color: var(--vert);
                                   font-family: var(--titre); font-weight: 800; font-size: 1.12rem; }
.parcours > .etapes > li::after { content: ''; position: absolute; left: 20px; top: 48px; bottom: 0;
                                  width: 5px; border-radius: 6px;
                                  background: linear-gradient(180deg, #a9ddc0, var(--vert));
                                  transform-origin: top center; }
.parcours > .etapes > li:last-child::after { display: none; }
.creme .parcours > .etapes > li::before { background: var(--creme, #fdfaf4); }

.parcours .corps { display: grid; grid-template-columns: 230px 1fr; gap: 24px;
                   align-items: start; padding-top: 3px; }
.parcours.large .corps { grid-template-columns: 275px 1fr; }
.parcours .quoi b { display: block; font-family: var(--titre); font-weight: 700;
                    color: var(--bleu); font-size: 1.22rem; line-height: 1.3; }
.parcours .qui { display: inline-block; margin-top: 7px; padding: 3px 11px; border-radius: 999px;
                 font-family: var(--titre); font-size: 0.83rem; font-weight: 700;
                 letter-spacing: .5px; text-transform: none; }
.parcours .qui.vous { background: var(--bleu); color: #fff; }
.parcours .qui.nous { background: #d9efe2; color: #00632D; }
.parcours .dit p { margin: 0; font-size: .97rem; line-height: 1.55; color: var(--encre); max-width: 66ch; }
.parcours .dit .avec { margin-top: 13px; font-weight: 600; color: var(--bleu); font-size: .95rem; }
.parcours ul.plus { list-style: none; padding: 0; margin: 7px 0 0; }
.parcours ul.plus li { position: relative; padding-left: 17px; font-size: .94rem; line-height: 1.5;
                       color: var(--doux); margin-top: 5px; }
.parcours ul.plus li::before { content: ''; position: absolute; left: 0; top: .52em;
                               width: 6px; height: 6px; border-radius: 50%; background: var(--vert); }

.parcours.anim > .etapes > li { opacity: 0; transform: translateY(12px); }
.parcours.anim > .etapes > li::after { transform: scaleY(0); }
.parcours.anim.vue > .etapes > li { opacity: 1; transform: none;
                                    transition: opacity .4s ease-out, transform .4s ease-out; }
.parcours.anim.vue > .etapes > li::after { transform: scaleY(1); transition: transform .4s ease-out; }
.parcours.anim.vue > .etapes > li:nth-child(1) { transition-delay: .05s; }
.parcours.anim.vue > .etapes > li:nth-child(1)::after { transition-delay: .22s; }
.parcours.anim.vue > .etapes > li:nth-child(2) { transition-delay: .26s; }
.parcours.anim.vue > .etapes > li:nth-child(2)::after { transition-delay: .43s; }
.parcours.anim.vue > .etapes > li:nth-child(3) { transition-delay: .47s; }
.parcours.anim.vue > .etapes > li:nth-child(3)::after { transition-delay: .64s; }
.parcours.anim.vue > .etapes > li:nth-child(4) { transition-delay: .68s; }
.parcours.anim.vue > .etapes > li:nth-child(4)::after { transition-delay: .85s; }
.parcours.anim.vue > .etapes > li:nth-child(5) { transition-delay: .89s; }
.parcours.anim.vue > .etapes > li:nth-child(5)::after { transition-delay: 1.06s; }
.parcours.anim.vue > .etapes > li:nth-child(6) { transition-delay: 1.10s; }
@media (prefers-reduced-motion: reduce) {
  .parcours.anim > .etapes > li, .parcours.anim.vue > .etapes > li { opacity: 1; transform: none; transition: none; }
  .parcours.anim > .etapes > li::after, .parcours.anim.vue > .etapes > li::after { transform: none; transition: none; }
}
@media (max-width: 760px) {
  .parcours .corps, .parcours.large .corps { grid-template-columns: 1fr; gap: 9px; }
  .parcours > .etapes > li { padding-left: 56px; padding-bottom: 24px; }
  .parcours > .etapes > li::before { width: 38px; height: 38px; font-size: .9rem; }
  .parcours > .etapes > li::after { left: 17px; top: 42px; }
}
/* La phrase qui explique le grand prix reste collee a lui, les autres passent en retrait */
.offre .px .sous { display: block; margin-top: 10px; padding-left: 14px;
                   border-left: 4px solid var(--vert);
                   font-family: var(--corps); font-size: 1.02rem; font-weight: 600;
                   color: var(--bleu); line-height: 1.4; }
.offre .px .apres { display: block; margin-top: 14px; padding-top: 12px;
                    border-top: 1px solid var(--bord);
                    font-size: .94rem; font-weight: 400; color: var(--doux); line-height: 1.5; }
.offre .px .apres span { display: block; margin-top: 3px; }
/* La date de mise a jour, en pied de page */
.legal .maj { margin-top: 14px; font-weight: 600; opacity: .85; }

/* Les puces des pages ville */
/* Les etapes numerotees de la page Demander un devis (13/10/2026).
   Le numero est dans une pastille : on voit d'un coup d'oeil qu'il y a
   quatre etapes et dans quel ordre elles viennent. */
.etapes-devis { list-style: none; counter-reset: etd; padding: 0; margin: 14px 0 0; max-width: 72ch; }
.etapes-devis li { counter-increment: etd; position: relative; padding-left: 40px;
  margin-top: 12px; font-size: 1rem; line-height: 1.6; }
.etapes-devis li::before { content: counter(etd); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%; background: var(--bleu); color: #fff;
  font-family: var(--titre); font-weight: 700; font-size: .92rem;
  display: flex; align-items: center; justify-content: center; }

.puces-vertes { list-style: none; padding: 0; margin: 12px 0 0; }
.puces-vertes li { position: relative; padding-left: 20px; font-size: 1rem; line-height: 1.6;
                   color: var(--encre); margin-top: 9px; max-width: 70ch; }
.puces-vertes li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 8px;
                           border-radius: 50%; background: var(--vert); }

/* Les pages ville : le corps de texte respire */
.page-ville article > p { margin-top: 14px; }
.page-ville article > h2 { margin-top: 36px; }
.page-ville article > ul { margin-top: 12px; }
.page-ville article > .panneaux { margin-top: 18px; }
.page-ville article > .repere { margin-top: 26px; }
.page-ville article > p.source { margin-top: 12px; }

/* ===== les tableaux sur telephone : une carte par ligne ===== */
@media (max-width: 720px) {
  .tableau { overflow: visible; box-shadow: none; }
  .tableau table:not(.fiche) { min-width: 0; }
  .tableau table:not(.fiche),
  .tableau table:not(.fiche) tbody,
  .tableau table:not(.fiche) tr,
  .tableau table:not(.fiche) td { display: block; width: auto; }
  .tableau table:not(.fiche) thead { display: none; }
  .tableau table:not(.fiche) tr { background: #fff; border: 1px solid var(--bord);
                                  border-radius: 6px; margin-bottom: 12px; overflow: hidden; }
  .tableau table:not(.fiche) tr:last-child { margin-bottom: 0; }
  /* En carte, tout est cale a gauche : une cellule de prix alignee a droite
     se retrouvait sinon decalee toute seule au milieu de la carte. */
  .tableau table:not(.fiche) td { border: 0; border-top: 1px solid var(--bord);
                                  padding: 11px 15px 13px; width: auto;
                                  text-align: left !important; white-space: normal !important; }
  .tableau table:not(.fiche) tr td:first-child { border-top: 0; }
  .tableau table:not(.fiche) tbody tr:nth-child(even) td { background: #fff; }
  .tableau table:not(.fiche) td[data-l]::before {
    content: attr(data-l); display: block;
    font-family: var(--titre); font-size: 0.85rem; font-weight: 700;
    letter-spacing: .5px; text-transform: none;
    color: var(--vert); margin-bottom: 4px; }
  /* La colonne de gauche s'annonce en vert, les suivantes en bleu :
     la question et la reponse ne se confondent plus. */
  .tableau table:not(.fiche) td[data-l] ~ td[data-l]::before { color: var(--bleu); }

  /* Les tableaux de prix : la premiere colonne fait le titre de la carte, sur
     un bandeau vert pale, et chaque chiffre vient se ranger en face de son
     intitule, comme sur un ticket. Avant, les trois etiquettes se repetaient
     a chaque ligne et la lecture devenait penible (02/10/2026). */
  /* La ligne devient une fiche : le libelle en bandeau, puis les prix cote a
     cote. Empiles, ils tiraient la page en longueur et on ne pouvait pas
     comparer le prix a l'unite et le prix dans le pack (02/10/2026). */
  .tableau table.detail tbody tr { display: flex; flex-wrap: wrap; }
  .tableau table.detail tbody td { flex: 1 1 140px; display: block; padding: 11px 15px;
      border-top: 1px solid var(--bord); }
  .tableau table.detail tbody td + td { border-left: 1px solid var(--bord); }
  /* Le montant est ce qu'on cherche : il est en gras, l'intitule reste discret. */
  .tableau table.detail tbody td { font-family: var(--titre); font-weight: 700;
      color: var(--bleu); font-size: 1.12rem; }
  .tableau table.detail tbody td::before { display: block; margin: 0 0 4px;
      font-family: var(--texte); font-weight: 600; font-size: .85rem; letter-spacing: 0; }
  /* le bandeau de titre garde sa couleur sur toutes les lignes, y compris
     les lignes paires que la regle des tableaux repeignait en blanc */
  .tableau table.detail tbody tr td:first-child,
  .tableau table.detail tbody tr:nth-child(even) td:first-child {
      flex: 1 0 100%; display: block; background: var(--vert-pale);
      border-left: 0; border-top: 0;
      font-family: var(--titre); font-weight: 700; color: var(--bleu);
      font-size: 1.05rem; line-height: 1.35; padding: 13px 15px; }
  .tableau table.detail tbody td:first-child::before { content: none; }
  .tableau table.detail tbody tr.total td:first-child { background: var(--vert); color: #fff; }
  .tableau table.detail tbody tr.total td { background: var(--vert-pale); }
  .tableau table.detail tbody tr.gratuit td:first-child { background: #d9efe2; }
  /* une ligne sans frais reste verte en entier, meme sur les rangs pairs */
  .tableau table.detail tbody tr.gratuit td,
  .tableau table.detail tbody tr:nth-child(even).gratuit td { background: var(--vert-pale); }
  /* en carte, seule la colonne du pack porte l'accent vert */
  .tableau table.comparatif tbody td:last-child { color: var(--vert); }
  .tableau table.comparatif tbody td:last-child::before { color: var(--vert); }
  .tableau table.six td:first-child { width: auto; }
}
/* Une ligne « en option » ne porte pas le crochet vert : elle n'est pas comprise */
.offre li.option { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--bord); color: var(--doux); }
.offre li.option::before { content: '+'; color: var(--doux); font-weight: 700; }
.offre li.option b { color: var(--bleu); font-weight: 700; }

/* ===== le materiel apporte, en trois reperes ===== */
.bande-materiel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.bande-materiel > div { background: var(--vert-pale); border-radius: 6px; padding: 18px 20px 20px; }
/* Les intitules disent maintenant de quoi il s'agit (1 mannequin pour 2),
   ils sont donc plus longs : la taille baisse pour que les trois cartes
   gardent la meme allure (02/10/2026). */
.bande-materiel b { display: block; font-family: var(--titre); font-weight: 800; color: #00632D;
                    font-size: 1.32rem; line-height: 1.2; }
.bande-materiel span { display: block; margin-top: 9px; font-size: .93rem; line-height: 1.5; color: var(--encre); }
@media (max-width: 760px) { .bande-materiel { grid-template-columns: 1fr; } }

/* Les sous-titres de la page Formation */
article h3 { font-family: var(--titre); font-weight: 700; color: var(--bleu);
             font-size: 1.29rem; margin-top: 30px; }
.fiches-affiche h3, .frise24 h3 { margin-top: 0; }
/* Le contenu des sections repliables ne doit pas toucher le cadre */
details.repli .repli-corps { padding: 0 26px 24px; }
details.repli .repli-corps > p + p { margin-top: 14px; }
details.repli .repli-corps > p:first-child { margin-top: 4px; }

/* La phrase qui doit rester en tete : les gestes servent aussi hors du travail */
/* trois points cles sous un titre, lisibles aussi sur le fond marine */
.points { list-style: none; padding: 0; margin: 20px 0 0; max-width: 72ch; }
.points li { position: relative; padding-left: 22px; margin-top: 11px;
             font-size: 1.05rem; line-height: 1.6; color: var(--doux); }
.points li:first-child { margin-top: 0; }
.points li::before { content: ''; position: absolute; left: 0; top: .62em;
                     width: 8px; height: 8px; border-radius: 50%; background: var(--vert); }
.marine .points li { color: #cfe0f0; }
.marine .points li::before { background: #7fe0a4; }

.bandeau-vert { margin-top: 34px; background: var(--vert); color: #fff; border-radius: 6px;
                padding: 22px 30px; max-width: none; font-family: var(--titre); font-weight: 700;
                font-size: 1.33rem; line-height: 1.45; text-align: center;
                box-shadow: none; }
@media (max-width: 620px) { .bandeau-vert { padding: 18px 20px; font-size: 1.04rem; text-align: left; } }

/* Dans l etiquette de la barre, « Du » et « au » restent discrets */
.frise24 .suivi b i { font-style: normal; font-weight: 400; font-size: .88rem; opacity: .85; }
/* En colonne etroite la periode tient sur quatre lignes, sur telephone elle
   tient sur une seule : « Du mois 0 au mois 24 » (02/10/2026). */
.frise24 .suivi b span { display: block; }
@media (max-width: 860px) {
  .frise24 .suivi b { font-size: 1.12rem; }
  .frise24 .suivi b span { display: inline; }
}

/* Le rappel sous le compteur, en deux paragraphes */
.reglage .repere-calcul.suite { margin-top: 12px; padding-top: 0; border-top: 0; }

/* La variante « initiale seule » du calculateur, en points */
.resultat .autre b { display: block; color: var(--bleu); font-family: var(--titre);
                     font-weight: 700; font-size: 1.07rem; }
.resultat .autre .pts { display: block; margin-top: 8px; }
.resultat .autre .pts > span { display: block; position: relative; padding-left: 18px;
                               margin-top: 6px; font-size: .9rem; line-height: 1.45; color: var(--doux); }
.resultat .autre .pts > span::before { content: ''; position: absolute; left: 0; top: .5em;
                                       width: 6px; height: 6px; border-radius: 50%; background: var(--vert); }
/* ===== les onglets des situations de travail ===== */
.onglets { margin-top: 16px; }
.onglets .tetes { display: flex; flex-wrap: wrap; gap: 8px; }
.onglets .tetes button { font: inherit; font-family: var(--titre); font-weight: 600; font-size: 1.09rem;
                         cursor: pointer; padding: 11px 18px; border-radius: 999px;
                         border: 1.5px solid var(--bord); background: #fff; color: var(--bleu); }
.onglets .tetes button:hover { border-color: var(--vert); }
.onglets .tetes button[aria-selected="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
.onglets .corps { margin-top: 16px; background: #fff; border: 1px solid var(--bord);
                  border-radius: 6px; padding: 20px 24px 22px; }
.creme .onglets .corps { border-color: #e6ded1; }
.onglets .corps ul { list-style: none; margin: 0; padding: 0; }
.onglets .corps li { position: relative; padding-left: 26px; font-size: 1rem; line-height: 1.55;
                     margin-top: 10px; max-width: 70ch; }
.onglets .corps li:first-child { margin-top: 0; }
.onglets .corps li::before { content: ''; position: absolute; left: 0; top: .42em;
                             width: 0; height: 0;
                             border-top: 6px solid transparent; border-bottom: 6px solid transparent;
                             border-left: 10px solid var(--vert); }
@media (max-width: 620px) {
  .onglets .tetes button { flex: 1 1 calc(50% - 4px); padding: 11px 10px; font-size: .9rem; }
  .onglets .corps { padding: 18px 18px 20px; }
}
/* ===== des phrases precedees d une fleche qui avance ===== */
.fleches { margin-top: 18px; }
.fleches > p { position: relative; padding-left: 34px; margin-top: 14px; max-width: 70ch; }
.fleches > p:first-child { margin-top: 0; }
.fleches > p::before { content: ''; position: absolute; left: 0; top: .46em; width: 0; height: 0;
                       border-top: 7px solid transparent; border-bottom: 7px solid transparent;
                       border-left: 12px solid var(--vert); }
.fleches > p::after { content: ''; position: absolute; left: 0; top: calc(.46em + 5px);
                      width: 0; height: 4px; border-radius: 6px; background: var(--vert); }
.fleches.anim > p { opacity: 0; transform: translateX(-10px); }
.fleches.anim > p::before { transform: translateX(-6px); }
.fleches.anim > p::after { width: 0; }
.fleches.anim.vue > p { opacity: 1; transform: none; transition: opacity .4s ease-out, transform .4s ease-out; }
.fleches.anim.vue > p::before { transform: none; transition: transform .4s ease-out; }
.fleches.anim.vue > p::after { width: 14px; transition: width .4s ease-out; }
.fleches.anim.vue > p:nth-child(1), .fleches.anim.vue > p:nth-child(1)::before,
.fleches.anim.vue > p:nth-child(1)::after { transition-delay: .06s; }
.fleches.anim.vue > p:nth-child(2), .fleches.anim.vue > p:nth-child(2)::before,
.fleches.anim.vue > p:nth-child(2)::after { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .fleches.anim > p, .fleches.anim.vue > p { opacity: 1; transform: none; transition: none; }
  .fleches.anim > p::before, .fleches.anim.vue > p::before { transform: none; transition: none; }
  .fleches.anim > p::after, .fleches.anim.vue > p::after { width: 14px; transition: none; }
}
/* ===== a former en priorite : quatre cartes, sans pictogramme ===== */
.priorites { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.priorites > div { background: #fff; border: 1px solid var(--bord); border-left: 4px solid var(--vert);
                   border-radius: 6px; padding: 16px 18px 18px; }
.creme .priorites > div { border-color: #e6ded1; border-left-color: var(--vert); }
.priorites b { display: block; font-family: var(--titre); font-weight: 700; color: var(--bleu);
               font-size: 1.15rem; line-height: 1.3; }
.priorites span { display: block; margin-top: 7px; font-size: .92rem; line-height: 1.5; color: var(--doux); }
@media (max-width: 900px) { .priorites { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .priorites { grid-template-columns: 1fr; } }
/* Les deux domaines de competences, en vert et en gras */
.domaine { font-family: var(--titre); font-weight: 800; color: var(--vert);
           font-size: 1.22rem; line-height: 1.35; margin-top: 26px; max-width: 72ch; }

/* Le recyclage inter, mis en avant en vert */
.offre .px .apres span.vert { margin-top: 0; color: #00632D; font-weight: 700; font-size: 1rem; }

/* Les echeances sont en TTC, il faut que ca se voie */
.ech .m small { font-size: .62em; font-weight: 700; color: var(--doux); margin-left: 2px; }

/* ===== le prix du suivi seul, mesure, et la liste en deux colonnes ===== */
.prix-suivi { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px;
              margin-top: 18px; padding: 16px 22px; background: #fff;
              border: 1px solid var(--bord); border-left: 5px solid var(--vert);
              border-radius: 6px; }
.creme .prix-suivi { border-color: #e6ded1; border-left-color: var(--vert); }
/* Le 600 € est un cout, pas un gain : il reste lisible mais il ne doit pas
   peser plus lourd que l'economie de 950 € ni que les prix d'entree. */
.prix-suivi b { font-family: var(--titre); font-weight: 800; color: var(--bleu);
                font-size: 1.62rem; line-height: 1.1; }
.prix-suivi span { font-size: .97rem; line-height: 1.5; color: var(--doux); max-width: 52ch; }
.deux-colonnes { margin-top: 12px; }
.deux-colonnes .puces-vertes { columns: 2; column-gap: 40px; margin-top: 0; }
.deux-colonnes .puces-vertes li { break-inside: avoid; max-width: none; }
@media (max-width: 760px) { .deux-colonnes .puces-vertes { columns: 1; } }

/* La variante serree de .compet est partie avec elle, le 14/10/2026. */
/* ===== qui paie la formation : une ligne par financeur ===== */
.financement { margin-top: 20px; border-top: 1px solid var(--bord); }
.financement > div { display: grid; grid-template-columns: 210px 1fr; gap: 6px 26px;
                     padding: 16px 0; border-bottom: 1px solid var(--bord); }
.financement b { font-family: var(--titre); font-weight: 700; color: var(--bleu);
                 font-size: 1.15rem; line-height: 1.35; }
.financement span { font-size: .98rem; line-height: 1.55; color: var(--encre); max-width: 62ch; }
@media (max-width: 680px) { .financement > div { grid-template-columns: 1fr; gap: 4px; } }
/* ===================== refonte visuelle du 01/10/2026 =====================
   Barlow Semi Condensed pour les titres, Source Sans 3 pour le texte.
   Rien d'autre n'est ajoute ici volontairement :
   deux regles essayees ont ete retirees parce qu'elles cassaient la page.
   1. « h1, h2, h3 { font-size: 1.06em } » : em se calcule sur le parent,
      pas sur la taille deja prevue pour le titre, donc les titres
      retrecissaient au lieu de grossir.
   2. « p { max-width: 72ch } » : la boite du paragraphe devenait plus
      etroite, et les blocs centres qu'elle contient, boutons compris,
      se decalaient vers la gauche. A reprendre bloc par bloc, pas d'un coup.
   Seul ajout conserve : l'espacement entre lettres. Il avait ete regle pour
   des majuscules ; en minuscules il faisait « e s p a c e ». On le ramene
   presque a zero, et le surtitre reprend un peu de corps pour rester lisible. */
.chapeau, .date .type, .reglage .etiq, .resultat .formule,
.ligne-ech .saisie label, .bloc-res .etiq-res, .planning .seance .quand-seance,
.prix-hero .ou, .parcours .qui,
.tableau table:not(.fiche) td[data-l]::before { letter-spacing: .2px; }
/* tailles-barlow-ajustees */
/* Les tailles des titres ont ete multipliees par 1,15 et celles des petites
   etiquettes par 1,12, le 01/10/2026. Raison : Barlow Semi Condensed est une
   condensee, a taille egale elle parait plus petite qu'Archivo, et les
   etiquettes passees des majuscules aux minuscules ont perdu en presence.
   Ne pas refaire tourner le script d'ajustement : il verrait cette marque
   et s'arreterait, mais une modification a la main doublerait l'effet. */

/* Les deux facons de se former, distinguees par le fond (01/10/2026).
   Intra = vert, la couleur du pack ; inter = bleu, celle des sessions. */
.panneau.intra { background: var(--vert-pale); border-color: var(--vert); }
.panneau.intra b { color: var(--vert); }
.panneau.inter { background: #eef4fb; border-color: var(--bleu); }
.panneau.inter b { color: var(--bleu); }

/* Les deux roles, sans encadre (01/10/2026). La section « Qu'est-ce que la
   formation SST » occupait 1445 px pour huit encadres : on garde les deux
   pictogrammes qui veulent dire quelque chose et on passe le reste en texte. */
/* Les deux roles, en deux cartes (02/10/2026). Le pictogramme etait pose seul
   au dessus du titre : il flottait sans rien dire. Il se lit maintenant avec
   le titre, sur la meme ligne. */
.deux-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.deux-roles > div { background: #fff; border: 1px solid var(--bord);
                    border-left: 4px solid var(--vert); border-radius: 0 6px 6px 0;
                    padding: 18px 20px 20px; }
.creme .deux-roles > div { border-color: #e6ded1; border-left-color: var(--vert); }
.deux-roles .tete { display: flex; align-items: center; gap: 10px; }
.deux-roles .pic { display: block; width: 23px; height: 23px; color: var(--vert); flex: 0 0 auto; }
.deux-roles .pic svg { width: 23px; height: 23px; display: block; }
.deux-roles b { font-family: var(--titre); font-weight: 700;
                color: var(--bleu); font-size: 1.21rem; }
.deux-roles p { margin-top: 9px; font-size: .95rem; line-height: 1.55; max-width: none; }
/* Ses limites : une note posee, pas un paragraphe perdu entre deux blocs */
.definition .limites { margin-top: 16px; background: #f3f6fa; border-radius: 6px;
                       padding: 15px 19px 17px; font-size: .97rem; line-height: 1.6; max-width: none; }
.definition .limites b { color: var(--bleu); }
@media (max-width: 620px) { .deux-roles { grid-template-columns: 1fr; gap: 18px; } }

/* La phrase a retenir, posee sur fond vert pale avec un filet (01/10/2026). */
.a-retenir { background: var(--vert-pale); border-left: 4px solid var(--vert);
             border-radius: 0 6px 6px 0; padding: 16px 20px; margin-top: 18px;
             font-size: 1rem; line-height: 1.6; max-width: none; }
.a-retenir b { color: var(--bleu); }

/* Ce que le prospect peut verifier lui meme (01/10/2026). Le numero est la
   vraie information : il devient le gros caractere, le reste l'explique. */
.verifiable { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.verifiable > div { background: #fff; border: 1px solid var(--bord);
                    border-left: 4px solid var(--vert); border-radius: 0 6px 6px 0;
                    padding: 18px 20px 20px; }
.verifiable .quoi { display: block; font-family: var(--titre); font-weight: 700;
                    font-size: .89rem; color: var(--vert); letter-spacing: .2px; }
.verifiable .num { display: block; font-family: var(--titre); font-weight: 800;
                   font-size: 1.44rem; color: var(--bleu); line-height: 1.2;
                   margin-top: 4px; word-break: break-word; }
.verifiable p { margin-top: 8px; font-size: .94rem; line-height: 1.5; max-width: none; }
.verifiable .ou-verif { display: block; margin-top: 10px; padding-top: 10px;
                        border-top: 1px solid var(--bord); font-size: .88rem; color: var(--doux); }
.verifiable .a-venir { border-left-color: var(--doux); }
.verifiable .a-venir .quoi { color: var(--doux); }
.verifiable .a-venir .num { color: var(--doux); font-size: 1.24rem; }
@media (max-width: 760px) { .verifiable { grid-template-columns: 1fr; } }

/* La liste des textes officiels (01/10/2026). Repliee par defaut et en petits
   caracteres : elle sert a prouver, pas a etre lue. */
.repli-sources { margin-top: 16px; }
.repli-sources > summary { cursor: pointer; display: inline-block;
                           font-family: var(--titre); font-weight: 700; font-size: .95rem;
                           color: var(--vert); padding: 8px 14px; border: 1px solid var(--bord);
                           border-radius: 6px; background: #fff; }
.repli-sources > summary::marker { color: var(--vert); }
.repli-sources[open] > summary { margin-bottom: 14px; }
.liste-sources { margin: 0; padding-left: 20px; font-size: .84rem; line-height: 1.55; color: var(--doux); }
.liste-sources li { margin-top: 5px; max-width: none; }
.maj-sources { margin-top: 12px; font-size: .82rem; color: var(--doux); font-style: italic; }

/* Ce qui ne coute rien se voit (01/10/2026) : fond vert pale et mention en vert,
   pour que le client reperee les deux lignes gratuites au milieu des options payantes. */
.tableau table.detail tr.gratuit > td { background: var(--vert-pale); }
.tableau table.detail tr.gratuit > td:first-child { box-shadow: inset 3px 0 0 var(--vert); }
.tableau table.detail tr.gratuit b { color: var(--vert); font-family: var(--titre); font-weight: 700; }

/* L'economie du pack est l'argument de la page : elle se lit de loin et non
   au milieu d'un paragraphe (03/10/2026). */
.repere .gain { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.repere .gain span { font-family: var(--titre); font-weight: 700; font-size: 1.22rem; color: var(--bleu); }
.repere .gain b { font-family: var(--titre); font-weight: 800; color: var(--vert);
    font-size: clamp(2.2rem, 6vw, 3.1rem); line-height: 1; letter-spacing: -.5px; }
.repere .gain + p { margin-top: 12px; }

/* Une fleche qui avance devant la phrase : elle attrape l'oeil sur la seule
   phrase du tableau qu'il ne faut pas sauter (03/10/2026). */
.avec-fleche { position: relative; padding-left: 44px; }
.avec-fleche::before { content: '→'; position: absolute; left: 0; top: -.08em;
    font-family: var(--titre); font-weight: 800; font-size: 2.1rem; line-height: 1.1;
    color: var(--vert); animation: avance 1.9s ease-in-out infinite; }
@keyframes avance {
  0%, 100% { transform: translateX(0);   opacity: .75; }
  50%      { transform: translateX(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .avec-fleche::before { animation: none; opacity: 1; }
}

/* Les deux prestations, deux couleurs (03/10/2026). Elles se ressemblaient
   trait pour trait, et on confondait le recyclage avec la formation initiale.
   Vert : la formation initiale. Bleu : le recyclage, qui vient apres. */
.tableau table.presta tbody tr.p-ini > td { background: var(--vert-pale); }
.tableau table.presta tbody tr.p-mac > td { background: #e6edf5; }
.tableau table.presta tbody tr.p-ini > td:first-child { box-shadow: inset 4px 0 0 var(--vert); }
.tableau table.presta tbody tr.p-mac > td:first-child { box-shadow: inset 4px 0 0 var(--bleu); }
.tableau table.presta tbody tr.p-ini > td:last-child { color: var(--vert); font-weight: 800; font-size: 1.14rem; }
.tableau table.presta tbody tr.p-mac > td:last-child { color: var(--bleu); font-weight: 800; font-size: 1.14rem; }
/* la ligne paire est repeinte en blanc par la regle generale : on la vise nommement */
.tableau table.presta tbody tr:nth-child(even).p-mac > td { background: #e6edf5; }
.tableau table.presta tbody tr:nth-child(even).p-mac > td:first-child { background: #e6edf5; }
.tableau table.presta tbody tr:nth-child(even).p-ini > td,
.tableau table.presta tbody tr:nth-child(even).p-ini > td:first-child { background: var(--vert-pale); }

/* Les trois zones de deplacement, trois couleurs (03/10/2026). Les trois lignes
   se ressemblaient : on ne voyait pas que la troisieme n'annonce pas un prix.
   Vert : compris. Sable : forfait. Bleu : sur devis, donc a demander. */
.tableau table.zones tbody tr.z1 > td { background: var(--vert-pale); }
.tableau table.zones tbody tr.z2 > td { background: #fdf3e3; }
.tableau table.zones tbody tr.z3 > td { background: #eaf1f9; }
.tableau table.zones tbody tr.z1 > td:first-child { box-shadow: inset 4px 0 0 var(--vert); }
.tableau table.zones tbody tr.z2 > td:first-child { box-shadow: inset 4px 0 0 #c8781a; }
.tableau table.zones tbody tr.z3 > td:first-child { box-shadow: inset 4px 0 0 var(--bleu-clair); }
.tableau table.zones tbody tr.z1 > td:last-child { color: var(--vert); font-weight: 700; }
.tableau table.zones tbody tr.z2 > td:last-child { color: #a85f0c; font-weight: 700; }
.tableau table.zones tbody tr.z3 > td:last-child { color: var(--bleu-clair); font-weight: 700; }
.tableau table.zones tbody tr > td:last-child b { color: inherit; }
/* Ces tableaux se lisaient en 16,5 px a cote d'un texte courant a 18 px, et
   ca se voyait. Ils reprennent la taille du reste de la page (03/10/2026). */
.tableau table.zones { font-size: 1rem; }
/* « Il vous faudra… » : la consequence, en dessous de la situation. Elle etait
   ecrite plus petit que le titre et que le prix dans la meme carte, et cela se
   voyait. Toute la carte se lit maintenant a la meme taille (06/10/2026). */
.tableau table.zones tbody td em { display: block; margin-top: 6px; font-style: normal;
    font-family: var(--texte); font-weight: 400; font-size: 1.06rem; line-height: 1.55;
    color: var(--encre); }
.tableau table.zones tbody tr > td:first-child { font-size: 1.06rem; }
.tableau table.zones tbody tr > td:last-child { font-size: 1.06rem; }
/* Sur telephone, la regle du bandeau repeint la premiere cellule des lignes
   paires en vert pale. Il faut la viser nommement, sinon la ligne du forfait
   garde un titre vert au-dessus d'un corps sable. */
.tableau table.zones tbody tr:nth-child(even).z1 > td:first-child { background: var(--vert-pale); }
.tableau table.zones tbody tr:nth-child(even).z2 > td:first-child { background: #fdf3e3; }
.tableau table.zones tbody tr:nth-child(even).z3 > td:first-child { background: #eaf1f9; }

/* Le titre d'un encadre de rappel (01/10/2026) : plus gros que le corps,
   dans la police des titres, pour qu'on lise d'abord l'information chiffree. */
.repere .titre-repere { font-family: var(--titre); font-size: 1.14rem; line-height: 1.35; margin-bottom: 8px; }
.repere .titre-repere strong { color: var(--bleu); }
.repere.alerte .titre-repere strong { color: inherit; }

/* La carte des deplacements devient un outil (01/10/2026) : le visiteur tape
   son code postal, le site mesure la distance au siege et allume son departement. */
.cp-outil { background: #fff; border: 1px solid var(--bord); border-radius: 6px;
            padding: 18px 20px; margin-bottom: 18px; }
.cp-outil label { display: block; font-family: var(--titre); font-weight: 700;
                  color: var(--bleu); font-size: 1rem; margin-bottom: 8px; }
.cp-ligne { display: flex; gap: 10px; flex-wrap: wrap; }
.cp-ligne input { width: 130px; padding: 11px 14px; font: inherit; font-size: 1.05rem;
                  border: 1.5px solid var(--bord); border-radius: 6px; color: var(--encre); }
.cp-ligne input:focus { outline: none; border-color: var(--vert); }
.cp-reponse { margin-top: 12px; font-size: .97rem; line-height: 1.5; max-width: none; }
.cp-reponse:empty { display: none; }
.cp-reponse.compris { background: var(--vert-pale); border-left: 4px solid var(--vert);
                      border-radius: 0 6px 6px 0; padding: 12px 16px; }
.cp-reponse.loin { background: #fdf3e3; border-left: 4px solid #c8781a;
                   border-radius: 0 6px 6px 0; padding: 12px 16px; }
.cp-reponse.erreur { color: var(--rouge); }
.cp-note { margin-top: 10px; font-size: .82rem; color: var(--doux); }

/* Chaque departement a sa teinte, posee dans le SVG. Le survol ne remplace plus
   la couleur, il la fonce : sinon on perdait de vue quel departement on visait. */
.carte-idf .dep { cursor: pointer; transition: filter .15s; }
.carte-idf .dep:hover, .carte-idf .dep:focus { filter: brightness(.9); outline: none; }
.carte-idf .dep.vise { fill: #00873E; filter: none; }
.carte-idf .dep.vise.loin { fill: #c8781a; }
/* Le numero est en bleu nuit avec un lisere blanc : il reste lisible sur les huit teintes. */
.carte-idf .num-dep { font-family: var(--titre); font-weight: 800; font-size: 18px;
                      fill: #002E5F; stroke: #fff; stroke-width: 3px; paint-order: stroke;
                      pointer-events: none; }
.carte-idf .num-dep.vise { fill: #fff; stroke: none; }
@media (max-width: 520px) { .cp-ligne input { width: 100%; } .cp-ligne .bouton { width: 100%; } }

/* Sur un petit ecran, les deux prix compares reprennent le droit d'aller
   a la ligne : sans cela ils deborderaient de la carte. */
@media (max-width: 560px) { .offre .eco .compare { flex-wrap: wrap; } }

/* Le recyclage sur demande devient un encadre avec ses deux boutons (01/10/2026),
   au lieu d'une phrase perdue sous les dates. */
.bloc-mac { margin-top: 20px; background: #fff; border: 1px solid var(--bord);
            border-left: 4px solid var(--vert); border-radius: 0 6px 6px 0;
            padding: 18px 22px; }
.bloc-mac p { margin: 0; font-size: 1rem; line-height: 1.55; max-width: none; }
.bloc-mac .contacts-mac { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }

/* Chaque date renvoie au questionnaire, en gardant la session choisie. */
.dates .date .bouton.reserver { margin-top: 14px; align-self: start; padding: 9px 16px; font-size: .95rem; }
.dates .date .lieu.complet { color: var(--doux); font-style: italic; }

/* Les etapes du parcours (01/10/2026). Le titre occupait une colonne de 230 px :
   le texte commencait donc tres loin de la frise. Titre et texte sont desormais
   l'un sous l'autre, collés au trait vertical. */
.parcours .corps, .parcours.large .corps { display: block; }
.parcours .quoi b { display: inline; }
.parcours .qui { margin-top: 0; margin-left: 10px; vertical-align: 2px; }
.parcours .dit { margin-top: 9px; }
.parcours .dit p { max-width: 74ch; }

/* Ce que le pack ajoute : un encadre vert pale, pour qu'on voie l'ecart
   entre ce qui est inclus partout et ce qui vient avec le pack. */
.avec-pack { margin-top: 14px; background: var(--vert-pale); border-left: 4px solid var(--vert);
             border-radius: 0 6px 6px 0; padding: 14px 18px 16px; }
.avec-pack .avec { margin-top: 0; color: var(--bleu); font-weight: 700; }
.avec-pack ul.plus li { color: var(--encre); }
.avec-pack ul.plus li::before { background: var(--vert); }

/* Le diagnostic refait (01/10/2026) : secteurs en colonne avec leur exemple,
   champ libre pour le corps de metier, phrase d'aide sous la question. */
.q-diag .aide-diag { margin: 6px 0 12px; font-size: .92rem; color: var(--doux); line-height: 1.5; max-width: 74ch; }
.choix-diag.colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choix-diag.colonne button { display: block; text-align: left; padding: 13px 16px; line-height: 1.35; }
.choix-diag.colonne button b { display: block; font-family: var(--titre); font-weight: 700; font-size: 1rem; }
.choix-diag.colonne button i { display: block; margin-top: 3px; font-style: normal; font-size: .86rem; color: var(--doux); }
.choix-diag.colonne button.pris i { color: inherit; opacity: .85; }
.q-diag input[type="text"] { width: 100%; max-width: 420px; padding: 11px 14px; font: inherit;
                             border: 1.5px solid var(--bord); border-radius: 6px; color: var(--encre); }
.q-diag input[type="text"]:focus { outline: none; border-color: var(--vert); }
@media (max-width: 700px) { .choix-diag.colonne { grid-template-columns: 1fr; } }

/* Question a reponses multiples : la coche montre qu'on peut en cocher plusieurs. */
.choix-diag.multi button.pris::before { content: '\2713\00a0'; font-weight: 700; }
.q-diag textarea { width: 100%; padding: 12px 14px; font: inherit; line-height: 1.5;
                   border: 1.5px solid var(--bord); border-radius: 6px; color: var(--encre); resize: vertical; }
.q-diag textarea:focus { outline: none; border-color: var(--vert); }

/* L'outil du code postal est entre dans la grille a deux colonnes et decalait
   la legende d'une case, d'ou les grands blancs. Il occupe maintenant
   toute la largeur, et la legende se cale en haut de sa colonne. */
.zone > .cp-outil { grid-column: 1 / -1; margin-bottom: 0; }
.zone-legende > p:first-child { margin-top: 0; }
.zone-legende .titre-villes { margin-top: 16px; }
.carte { padding: 18px; }

/* Sur telephone un tableau devient une suite de cartes : une cellule alignee a
   droite sur ordinateur creait alors un escalier, une ligne a gauche, la suivante
   a droite. On remet tout a gauche, et on autorise le retour a la ligne.
   Constate le 01/10/2026 sur la page des tarifs. */
@media (max-width: 720px) {
  .tableau table:not(.fiche) td,
  .tableau table:not(.fiche) td:last-child,
  .tableau table.detail td:last-child {
    text-align: left;        /* les cellules reprennent toutes le meme bord */
    white-space: normal;
  }
  /* la ligne du total garde son fond vert, meme en mode carte */
  .tableau table:not(.fiche) tbody tr.total td { background: var(--vert-pale); }
}

/* Les reperes chiffres sont regles plus haut, en petites cartes (02/10/2026). */

/* ================= le tableau simple : montant a droite =================
   Un tableau a deux colonnes n'a pas besoin de devenir une carte sur
   telephone. En carte, le montant passait sous l'intitule et il fallait lire
   deux fois pour relier les deux. Ici l'intitule reste a gauche, le montant
   a droite, et la ligne se lit d'un seul coup (03/10/2026). */
.tableau table.simple th:last-child { text-align: right; white-space: nowrap; width: 1%; }
.tableau table.simple td:last-child { text-align: right; white-space: nowrap; width: 1%;
    font-family: var(--titre); font-weight: 700; color: var(--bleu); font-size: 1.05rem; }
.tableau table.simple tbody tr.gratuit > td { background: var(--vert-pale); }
.tableau table.simple tbody tr:nth-child(even).gratuit > td { background: var(--vert-pale); }
.tableau table.simple tbody tr.gratuit > td:first-child { box-shadow: inset 3px 0 0 var(--vert); }
.tableau table.simple tbody tr.gratuit > td:last-child,
.tableau table.simple tbody tr.gratuit b { color: var(--vert); }

@media (max-width: 720px) {
  .tableau table.simple { display: table; width: 100%; min-width: 0; }
  .tableau table.simple thead { display: table-header-group; }
  .tableau table.simple tbody { display: table-row-group; }
  .tableau table.simple tr { display: table-row; background: transparent;
      border: 0; border-radius: 0; margin: 0; }
  .tableau table.simple th, .tableau table.simple td { display: table-cell; }
  .tableau table.simple th { padding: 9px 12px; font-size: .88rem; }
  .tableau table.simple td { border: 0; border-top: 1px solid var(--bord);
      padding: 11px 12px; text-align: left !important; }
  .tableau table.simple td:last-child { text-align: right !important;
      white-space: nowrap !important; }
  .tableau table.simple td::before { content: none !important; }
}

/* ================= les trois lignes du pack, trois couleurs =================
   Les trois prestations du pack se lisaient toutes pareil. Chacune prend la
   couleur qu'elle a deja ailleurs sur le site : vert pour la formation
   initiale, bleu pour le recyclage, sable pour le suivi, qui n'est pas une
   action de formation mais un accompagnement (03/10/2026). */
.tableau table.comparatif tbody tr.l-ini   > td:first-child { color: var(--vert); font-weight: 700;
    background: var(--vert-pale); box-shadow: inset 4px 0 0 var(--vert); }
.tableau table.comparatif tbody tr.l-mac   > td:first-child { color: var(--bleu); font-weight: 700;
    background: #e6edf5; box-shadow: inset 4px 0 0 var(--bleu); }
.tableau table.comparatif tbody tr.l-suivi > td:first-child { color: #a85f0c; font-weight: 700;
    background: #fdf3e3; box-shadow: inset 4px 0 0 #c8781a; }
/* les lignes paires sont repeintes en blanc par la regle generale : on les vise nommement */
.tableau table.comparatif tbody tr:nth-child(even).l-ini   > td:first-child { background: var(--vert-pale); }
.tableau table.comparatif tbody tr:nth-child(even).l-mac   > td:first-child { background: #e6edf5; }
.tableau table.comparatif tbody tr:nth-child(even).l-suivi > td:first-child { background: #fdf3e3; }

/* ================= les compteurs de resultats =================
   Quatre cases qui attendent leurs chiffres. Tant qu'il n'y a pas de session
   realisee elles affichent un tiret : on montre la structure, on ne promet
   rien. Le jour venu, il n'y a que le contenu du <b> a changer (03/10/2026). */
.compteurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
.compteurs > div { background: #fff; border: 1px solid var(--bord); border-radius: 6px;
                   border-top: 4px solid var(--vert); padding: 20px 18px 18px; text-align: center; }
.compteurs b { display: block; font-family: var(--titre); font-weight: 800; color: var(--bleu);
               font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1; font-variant-numeric: tabular-nums; }
.compteurs span { display: block; margin-top: 10px; font-family: var(--titre); font-weight: 700;
                  color: var(--bleu); font-size: 1rem; line-height: 1.25; }
.compteurs i { display: block; margin-top: 4px; font-style: normal;
               font-size: .84rem; color: var(--doux); line-height: 1.35; }
/* Deux colonnes des 860 px, et on reste a deux sur telephone : quatre cases
   empilees tiraient la page sur deux ecrans pour quatre chiffres. */
@media (max-width: 860px) { .compteurs { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 520px) { .compteurs > div { padding: 16px 10px 14px; }
                            .compteurs span { font-size: .93rem; }
                            .compteurs i { font-size: .79rem; } }

/* ================= les avis de stagiaires =================
   Rien n'est affiche tant qu'aucun avis n'est recueilli. Le style est pose
   d'avance pour qu'un avis reel n'ait qu'a etre colle dans la page. */
.avis { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
        gap: 16px; margin-top: 22px; }
.carte-avis { background: #fff; border: 1px solid var(--bord); border-radius: 6px;
              border-left: 4px solid var(--vert); padding: 20px 22px; }
.etoiles { display: flex; gap: 3px; }
.etoiles span { width: 17px; height: 17px; background: #d5dee8;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.etoiles span.pleine { background: #f0a500; }
.carte-avis blockquote { margin: 13px 0 0; font-size: 1rem; line-height: 1.6; color: var(--encre); }
.carte-avis blockquote::before { content: '\201C'; }
.carte-avis blockquote::after { content: '\201D'; }
.carte-avis cite { display: block; margin-top: 12px; font-style: normal;
                   font-family: var(--titre); font-weight: 700; color: var(--bleu); font-size: .93rem; }

/* ================= comment chaque indicateur est calcule =================
   Un tableau a trois colonnes dont celle du milieu est un paragraphe entier
   etait illisible. Chaque indicateur devient une fiche, et le calcul est
   montre comme une vraie division : ce qu'on compte au-dessus du trait, sur
   quoi on le rapporte en dessous (03/10/2026). */
.calculs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 22px; }
.calcul-fiche { display: flex; flex-direction: column;
                background: #fff; border: 1px solid var(--bord); border-radius: 6px;
                border-left: 4px solid var(--vert); padding: 18px 22px 16px; }
.creme .calcul-fiche, .gris .calcul-fiche { border-color: var(--bord); border-left-color: var(--vert); }
.calcul-fiche > b { font-family: var(--titre); font-weight: 700; color: var(--bleu); font-size: 1.12rem; }
.calcul-fiche .fraction { flex: 1; margin-top: 13px; }
.calcul-fiche .fraction span { display: block; font-size: .95rem; line-height: 1.5; color: var(--encre); }
.calcul-fiche .fraction .haut { padding-bottom: 9px; border-bottom: 2px solid var(--vert); }
.calcul-fiche .fraction .bas { padding-top: 9px; }
.calcul-fiche .fraction.seul .haut { border-bottom: 0; padding-bottom: 0; }
.calcul-fiche > i { margin-top: 15px; font-style: normal; font-size: .84rem;
                    color: var(--doux); line-height: 1.4; }
.calcul-fiche > i::before { content: 'Source : '; font-family: var(--titre); font-weight: 700;
                            color: var(--vert); }
@media (max-width: 760px) { .calculs { grid-template-columns: 1fr; gap: 12px; } }

/* ================= les references controlables =================
   Le numero est ce que le visiteur va recopier pour verifier : il sort du
   texte, dans un bandeau, en chiffres a chasse fixe pour qu'aucun caractere
   ne se confonde. Le reste descend en dessous (03/10/2026).
   Le 14/10/2026 les trois fiches cote a cote deviennent un seul encadre de
   trois lignes : les deux dernieres n avaient plus qu un intitule et un
   numero, et trois cartes de hauteurs tres inegales se tenaient mal. Sur
   ecran large, l intitule est a gauche et le numero a droite. */
.ref-groupe { margin-top: 24px; background: #fff; border: 1px solid var(--bord);
              border-top: 4px solid var(--bleu); border-radius: 6px; padding: 2px 22px; }
.ref-groupe > div { padding: 18px 0; border-top: 1px solid var(--bord); }
.ref-groupe > div:first-child { border-top: 0; }
.ref-groupe b { display: block; font-family: var(--titre); font-weight: 700;
                color: var(--bleu); font-size: 1.08rem; line-height: 1.3; }
.ref-groupe .numero { display: inline-block; margin-top: 10px; padding: 9px 12px;
                      background: var(--gris); border-radius: 5px;
                      font-family: 'Consolas', 'Courier New', monospace; font-weight: 700;
                      font-size: 1rem; letter-spacing: .3px; color: var(--encre);
                      word-break: break-word; user-select: all; }
.ref-groupe .detail { display: block; margin-top: 10px;
                      font-size: .92rem; line-height: 1.5; color: var(--encre); }
@media (min-width: 760px) {
  .ref-groupe > div { display: grid; grid-template-columns: 1fr auto;
                      align-items: center; column-gap: 24px; }
  .ref-groupe .numero { margin-top: 0; }
  .ref-groupe .detail { grid-column: 1 / -1; margin-top: 12px; }
}

/* ================= ce qui est compris, en cases =================
   Six phrases longues l'une sous l'autre, personne ne les lit. Chaque ligne
   devient une case avec deux mots en gras et le detail en dessous : on
   balaye, on s'arrete sur ce qui interesse (03/10/2026). */
.inclus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.inclus > div { position: relative; background: #fff; border: 1px solid var(--bord);
                border-radius: 6px; padding: 15px 18px 14px 44px; }
.creme .inclus > div { border-color: #e6ded1; }
.inclus > div::before { content: ''; position: absolute; left: 17px; top: 19px;
    width: 15px; height: 8px; border-left: 3px solid var(--vert); border-bottom: 3px solid var(--vert);
    transform: rotate(-45deg); }
.inclus b { display: block; font-family: var(--titre); font-weight: 700;
            color: var(--bleu); font-size: 1.02rem; line-height: 1.25; }
.inclus span { display: block; margin-top: 4px; font-size: .88rem; line-height: 1.45; color: var(--doux); }
@media (max-width: 900px) { .inclus { grid-template-columns: repeat(2, 1fr); } }
/* 14/10/2026 : les six cartes « compris dans le prix » s empilaient les unes
   sous les autres et tenaient 646 pixels de haut sur un telephone. Deux
   colonnes, et la coche verte remontee au dessus du titre pour rendre a
   chaque carte toute sa largeur. */
@media (max-width: 560px) {
  .inclus { grid-template-columns: 1fr 1fr; gap: 10px; }
  .inclus > div { padding: 32px 12px 13px; }
  .inclus > div::before { left: 12px; top: 14px; }
  .inclus b { font-size: .95rem; }
  .inclus span { font-size: .82rem; line-height: 1.4; }
}

/* ================= les six questions a poser =================
   Un tableau question / reponse obligeait a lire en zigzag. Chaque question
   devient une carte numerotee : on en lit une, on passe a la suivante, et sur
   telephone on ne recopie plus « La question » a chaque ligne (03/10/2026). */
.six-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
              margin-top: 24px; counter-reset: q; }
.six-cartes > div { counter-increment: q; position: relative;
                    background: var(--gris); border: 1px solid var(--bord);
                    border-radius: 6px; padding: 44px 20px 18px; }
.gris .six-cartes > div, .creme .six-cartes > div { background: #fff; }
.six-cartes > div::before { content: '0' counter(q); position: absolute; left: 20px; top: 15px;
    font-family: var(--titre); font-weight: 800; font-size: .95rem; letter-spacing: 1.5px;
    color: var(--vert); }
.six-cartes b { display: block; font-family: var(--titre); font-weight: 700;
                color: var(--bleu); font-size: 1.08rem; line-height: 1.3; }
.six-cartes span { display: block; margin-top: 9px; font-size: .99rem; line-height: 1.55;
                   color: var(--encre); }
@media (max-width: 980px) { .six-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .six-cartes { grid-template-columns: 1fr; gap: 12px; } }
/* Acces rapide sous le titre d'accueil. Sur telephone la page fait pres de
   vingt ecrans : ces raccourcis evitent de faire defiler pour trouver le prix
   ou les dates (05/10/2026). */
nav.acces-rapide {
  display: flex; flex-wrap: wrap; flex-direction: row; align-items: center;
  gap: 8px; margin: 24px 0 0; padding: 0;
  position: static; background: none; border: 0; box-shadow: none;
}
nav.acces-rapide > a {
  display: inline-block; padding: 9px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .38);
  color: #fff; text-decoration: none; font-size: .95rem; line-height: 1.2;
}
nav.acces-rapide > a:hover, nav.acces-rapide > a:focus { background: rgba(255, 255, 255, .24); }
#pour-qui, #prix, #calculateur, #dates, #questions, #avant-de-choisir { scroll-margin-top: 90px; }
html { scroll-behavior: smooth; }
/* ================= pages de ville : conversion =================
   Le prix et les preuves montent dans le bandeau, un appel a l'action suit les
   deux formules, et la barre fixe du telephone est ajoutee comme sur les autres
   pages du site (05/10/2026). */
.hero p.prix-ville { margin-top: 14px; max-width: 48ch; font-family: var(--titre);
                    font-weight: 700; font-size: 1.22rem; line-height: 1.45; color: #fff; }
.hero p.prix-ville b { display: inline; font-size: inherit; line-height: inherit; font-weight: 800; margin: 0; padding: 0; border: 0; color: #7fe0a4; }
@media (max-width: 620px) { .hero p.prix-ville { font-size: 1.08rem; } }

.appel-ville { margin-top: 26px; background: var(--bleu); color: #fff;
               border-radius: var(--rayon); padding: 26px 28px; text-align: center; }
.appel-ville p { margin: 0; max-width: none; color: #cfe0f0; font-size: 1rem; line-height: 1.6; }
.appel-ville p.fort { margin-bottom: 10px; color: #fff; font-family: var(--titre);
                      font-weight: 700; font-size: 1.3rem; line-height: 1.35; }
.appel-ville .actions { display: flex; justify-content: center; flex-wrap: wrap;
                        gap: 12px; margin-top: 20px; }
@media (max-width: 620px) {
  .appel-ville { padding: 20px 18px; text-align: left; }
  .appel-ville .actions a { flex: 1 1 100%; text-align: center; }
}
/* Dans une puce de panneau, le gras doit rester du gras : la regle qui met en
   forme le titre du panneau en faisait un bloc a la ligne (05/10/2026). */
.panneau li b { display: inline; font-family: inherit; font-size: inherit;
                font-weight: 700; color: var(--vert); margin: 0; }

/* Points d'arrivee du menu d'acces rapide de la page Tarifs (05/10/2026). */
#pack, #inter, #deplacement, #suivi-seul, #renouvellement, #financement, #pack-24 { scroll-margin-top: 90px; }

/* Un indicateur pas encore mesure : « A venir » ne doit pas s'afficher a la
   taille d'un chiffre, sinon il devient le chiffre (05/10/2026). */
.compteurs b.attente { font-size: 1.32rem; color: var(--doux); letter-spacing: .3px; }

/* ================= le prix dans les deux panneaux de « Combien ca coute »
   Le chiffre par salarie domine, le total du groupe suit en dessous, et
   l'economie se detache. Les deux colonnes sont batis pareil pour qu'on les
   compare d'un coup d'oeil (06/10/2026). */
.panneau .tarif-bloc { margin: 14px 0 14px; padding: 16px 18px 14px; background: #fff;
                       border: 1px solid var(--bord); border-radius: var(--rayon); }
.panneau .tarif-bloc .des { display: block; font-family: var(--titre); font-weight: 700;
                            font-size: .92rem; letter-spacing: .6px; color: var(--doux); }
.panneau .tarif-bloc .gros { font-family: var(--titre); font-weight: 800; color: var(--bleu);
                             font-size: clamp(2.1rem, 5.6vw, 2.7rem); line-height: 1.05;
                             font-variant-numeric: tabular-nums; }
.panneau .tarif-bloc .gros small { font-size: .42em; font-weight: 700; letter-spacing: .4px; }
.panneau .tarif-bloc .lib { margin-top: 3px; font-family: var(--titre); font-weight: 700;
                            font-size: 1rem; line-height: 1.3; color: var(--bleu); }
.panneau .tarif-bloc .tot { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--bord);
                            font-size: .95rem; line-height: 1.55; color: var(--doux); }
.panneau .tarif-bloc .tot b { display: block; margin: 3px 0 2px; font-family: var(--titre);
                               font-weight: 800; font-size: 1.3rem; color: var(--encre);
                               font-variant-numeric: tabular-nums; }
.panneau .eco { margin: 12px 0 0; padding: 11px 14px; border-radius: var(--rayon);
                background: var(--vert-pale); font-size: .96rem; line-height: 1.5; }
.panneau .eco b { display: block; margin-bottom: 3px; font-family: var(--titre);
                  font-weight: 800; font-size: 1.14rem; color: var(--vert); }
.panneau .eco span { display: block; margin-top: 4px; font-size: .88rem; color: var(--doux); }
.panneau.inter .tarif-bloc .gros, .panneau.inter .tarif-bloc .lib { color: var(--bleu); }
/* L encadre de synthese de la carte inter n annonce pas une economie mais
   un total : il reprend donc le bleu de sa carte, pas le vert du pack.
   Ajoute le 13/10/2026. */
.panneau.inter .eco { background: #e3ecf7; }
.panneau.inter .eco b { color: var(--bleu); }
/* Tableau de la reglementation : la citation du texte officiel doit rester
   verifiable mais s'effacer devant la colonne qui dit quoi faire (06/10/2026). */
.tableau table.loi td em { display: block; font-style: italic; font-weight: 400;
                           font-size: .93rem; line-height: 1.6; color: var(--doux); }
/* Le calcul qui montre que le recyclage ne coute que 100 € : une ligne par
   etape, pour qu'on suive le raisonnement sans relire (06/10/2026). */
.repere p.calcul-pack { margin-top: 12px; }
.repere p.calcul-pack strong { display: block; margin-bottom: 6px; font-family: var(--titre);
                               font-size: 1.1rem; color: var(--bleu); }
.repere p.calcul-pack span { display: block; padding-left: 16px; position: relative;
                             margin-top: 4px; line-height: 1.6; }
.repere p.calcul-pack span::before { content: ''; position: absolute; left: 0; top: .66em;
                                     width: 7px; height: 7px; border-radius: 50%; background: var(--vert); }
.repere p.calcul-pack b { font-weight: 800; color: var(--encre); white-space: nowrap; }
/* Tableau du renouvellement : la phrase d'explication etait ecrite plus petit
   que le titre et que le prix, dans la meme carte. Tout se lit desormais a la
   meme taille (06/10/2026). */
.tableau table.zones td em { font-size: inherit; line-height: 1.6; }
/* Le tableau du renouvellement heritait de la police des titres, Barlow Semi
   Condensed, parce que la regle des tableaux « detail » l'applique a toutes
   les cellules. Une phrase se lit dans la police du texte, pas celle des
   titres : seul le montant garde la police de titre (06/10/2026). */
.tableau table.zones tbody td { font-family: var(--texte); font-weight: 400;
                                font-size: 1.06rem; line-height: 1.55; }
.tableau table.zones tbody tr > td:first-child,
.tableau table.zones tbody tr:nth-child(even) > td:first-child { font-family: var(--texte);
                                                 font-weight: 600; font-size: 1.06rem; color: var(--bleu); }
.tableau table.zones tbody td b { font-family: var(--titre); font-weight: 800; font-size: 1.18rem; }
/* Liste a coches vertes sur fond clair : ce qui est compris sans supplement.
   Les autres listes a coches du site sont faites pour un fond sombre (06/10/2026). */
@media (min-width: 760px) {
}
/* Points dans une cellule de tableau : compacts, sans marge haute, pour
   enumerer ce que comprend une formule (06/10/2026). */
.tableau td ul.pts { list-style: none; padding: 0; margin: 0; }
.tableau td ul.pts li { position: relative; padding-left: 17px; margin-top: 6px; line-height: 1.5; }
.tableau td ul.pts li:first-child { margin-top: 0; }
.tableau td ul.pts li::before { content: ''; position: absolute; left: 0; top: .58em;
                                width: 6px; height: 6px; border-radius: 50%; background: var(--vert); }
/* Les libelles des colonnes etaient fabriques par la feuille de style, en
   « content ». Un texte ainsi fabrique ne se selectionne pas et ne se copie
   pas. Dans le tableau du renouvellement ce sont desormais de vrais mots,
   plus grands, qui disparaissent sur ordinateur ou l'en-tete suffit (06/10/2026). */
.tableau .lib-cel { display: block; margin-bottom: 6px;
                    font-family: var(--texte); font-weight: 700;
                    font-size: 1rem; letter-spacing: .2px; color: var(--bleu); }
/* la premiere colonne s annonce en vert, les suivantes en bleu, comme avant */
.tableau tbody tr > td:first-child .lib-cel { color: var(--vert); }
/* dans les tableaux « detail », la premiere cellule est le titre de la carte :
   elle n avait pas de libelle, elle n en a toujours pas */
.tableau table.detail tbody tr > td:first-child .lib-cel { display: none; }
.tableau table.zones td:first-child .lib-cel { display: none; }
/* sur ordinateur l en-tete du tableau suffit */
@media (min-width: 721px) { .tableau .lib-cel { display: none; } }
/* Les memes points verts, utilisables dans un encadre et pas seulement dans
   une cellule de tableau (06/10/2026). */
.repere ul.pts { list-style: none; padding: 0; margin: 8px 0 10px; }
.repere ul.pts li { position: relative; padding-left: 18px; margin-top: 6px; line-height: 1.55; }
.repere ul.pts li:first-child { margin-top: 0; }
.repere ul.pts li::before { content: ''; position: absolute; left: 0; top: .58em;
                            width: 6px; height: 6px; border-radius: 50%; background: var(--vert); }
/* Les trois zones de deplacement : trois cartes cote a cote, le prix au
   milieu. Deux listes a puces l'une sous l'autre se ressemblaient trop pour
   qu'on distingue les prix de l'explication (06/10/2026). */
.zones-prix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.zones-prix > div { background: #fff; border: 1px solid var(--bord); border-top: 4px solid var(--bleu-clair);
                    border-radius: var(--rayon); padding: 16px 16px 14px; }
.zones-prix > div.ok { border-top-color: var(--vert); background: var(--vert-pale); }
.zones-prix .ou { display: block; font-family: var(--titre); font-weight: 700; font-size: 1rem;
                  line-height: 1.3; color: var(--bleu); min-height: 2.6em; }
.zones-prix b { display: block; margin-top: 8px; font-family: var(--titre); font-weight: 800;
                font-size: clamp(1.5rem, 3.4vw, 1.95rem); line-height: 1.1; color: var(--bleu); }
.zones-prix b small { font-size: .5em; font-weight: 700; }
.zones-prix > div.ok b { color: var(--vert); }
.zones-prix .note { display: block; margin-top: 4px; font-size: .9rem; color: var(--doux); }
@media (max-width: 760px) {
  .zones-prix { grid-template-columns: 1fr; gap: 10px; }
  .zones-prix > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px;
                      padding: 13px 15px; }
  .zones-prix .ou { min-height: 0; }
  .zones-prix b { margin-top: 0; text-align: right; font-size: 1.3rem; }
  .zones-prix .note { grid-column: 1 / -1; margin-top: 2px; }
}
ul.pts.apres-zones { list-style: none; padding: 0; margin: 18px 0 0; }
ul.pts.apres-zones li { position: relative; padding-left: 18px; margin-top: 7px;
                        line-height: 1.55; color: var(--doux); }
ul.pts.apres-zones li:first-child { margin-top: 0; }
ul.pts.apres-zones li strong { color: var(--encre); }
ul.pts.apres-zones li::before { content: ''; position: absolute; left: 0; top: .58em;
                                width: 6px; height: 6px; border-radius: 50%; background: var(--bord); }
/* ================= « Le SST en cinq questions » =================
   Quatre pancartes fermees, deux par deux sur grand ecran. Celui qui connait
   deja le SST lit cinq questions et descend. Celui qui ne connait pas a
   une reponse d'une ligne sans rien ouvrir, et le detail s'il clique.
   La question est grande, c'est elle qui doit se lire de loin (12/10/2026). */
.pancartes { display: grid; gap: 14px; margin-top: 26px; }
@media (min-width: 900px) { .pancartes { grid-template-columns: 1fr 1fr; align-items: start; } }
.pancartes > details { border: 1px solid var(--bord); border-radius: 6px; background: #fff; }
.pancartes > details[open] { border-color: var(--vert); }
/* Depuis le 12/10/2026 le volet ferme ne montre que la question : la fleche
   se centre dessus au lieu de se caler sur la premiere ligne. */
.pancartes summary { padding: 17px 22px; align-items: center; }
.pancartes summary::before { flex: 0 0 11px; width: 11px; height: 11px; margin-top: 0;
                             border-right-width: 2.5px; border-bottom-width: 2.5px; }
.pancartes .t { display: block; }
.pancartes .q { display: block; font-family: var(--titre); font-weight: 800; color: var(--bleu);
                font-size: 1.44rem; line-height: 1.15; }
.pancartes .rep { padding: 2px 22px 20px 50px; }
.pancartes .rep ul { list-style: none; padding: 0; margin: 0; }
.pancartes .rep li { position: relative; padding-left: 18px; font-size: .97rem; line-height: 1.55;
                     color: var(--encre); margin-top: 9px; }
.pancartes .rep li:first-child { margin-top: 0; }
.pancartes .rep li::before { content: ''; position: absolute; left: 0; top: .58em; width: 7px; height: 7px;
                             border-radius: 50%; background: var(--vert); }
/* Les renvois au bas des quatre pancartes, 14/10/2026. Sous « Pourquoi ? »,
   trois liens soulignes empiles se lisaient comme un paragraphe coupe en
   trois : rien ne disait qu il s agissait de trois destinations differentes.
   Chacun devient une ligne cliquable pleine largeur, flechee, separee des
   puces par un filet. Les trois autres pancartes suivent la meme forme pour
   que les quatre volets se ressemblent. */
.pancartes .rep .renvois { display: grid; gap: 8px; margin-top: 18px;
                           padding-top: 16px; border-top: 1px solid var(--bord); }
.pancartes .rep .renvois a { display: flex; gap: 10px; align-items: flex-start;
                             padding: 11px 14px; border: 1px solid var(--bord); border-radius: 6px;
                             background: #fff; color: var(--bleu); font-weight: 700;
                             font-size: .93rem; line-height: 1.4; text-decoration: none; }
.pancartes .rep .renvois a::before { content: '\2192'; color: var(--vert); font-weight: 700; flex: none; }
.pancartes .rep .renvois a:hover, .pancartes .rep .renvois a:focus-visible {
                             border-color: var(--vert); background: var(--vert-pale); color: var(--vert); }
@media (max-width: 480px) { .pancartes .q { font-size: 1.3rem; } .pancartes .rep { padding-left: 42px; }
                            .pancartes .rep .renvois a { padding: 10px 12px; font-size: .9rem; } }

/* ========== ce que contient le pack, sous le 140 € (12/10/2026) ==========
   Les trois prestations tenaient dans une seule longue phrase. Trois points
   alignes se lisent d'un coup d'oeil, la phrase se lisait en entier ou pas
   du tout. */
.pack3 { margin: 30px auto 0; max-width: 760px; }
.pack3 .titre { text-align: center; font-family: var(--titre); font-weight: 700; color: var(--bleu);
                font-size: 1.15rem; margin: 0 0 14px; max-width: none; }
.pack3 .trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pack3 .trois > div { background: #fff; border: 1px solid var(--bord); border-radius: 6px;
                      padding: 18px 14px 20px; text-align: center; }
.pack3 .trois b { display: block; font-family: var(--titre); font-weight: 700; color: var(--bleu);
                  font-size: 1.1rem; line-height: 1.25; }
.pack3 .trois span { display: block; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--bord);
                     color: var(--doux); font-size: .92rem; line-height: 1.45; }
/* Le total des trois cartes. La fleche descend des trois prestations vers le
   prix unique : c'est la reponse a « tout ca, combien ». */
.pack3 .total { position: relative; margin: 26px auto 0; background: var(--vert-pale);
                border: 1.5px solid #b9e2c9; border-radius: 6px; padding: 16px 22px;
                display: flex; align-items: center; justify-content: center; gap: 18px;
                flex-wrap: wrap; text-align: center; }
.pack3 .total .fleche { position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
                        width: 30px; height: 30px; border-radius: 50%; background: var(--vert);
                        color: #fff; font-size: 1.1rem; line-height: 30px; font-weight: 700; }
.pack3 .total .quoi { color: var(--bleu); font-size: 1.04rem; line-height: 1.4; }
.pack3 .total b { font-family: var(--titre); font-weight: 800; color: var(--vert);
                  font-size: 1.86rem; line-height: 1; white-space: nowrap; }
@media (max-width: 680px) { .pack3 .trois { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
                            .pack3 .total { gap: 10px; } }

/* ========== les trois questions posees au telephone (12/10/2026) ==========
   Pas de carte ici : quatre rangees de cartes se suivent deja sur l'accueil.
   Trois colonnes, un intitule vert, un filet au-dessus, rien d'autre. */
.concret { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px; }
@media (max-width: 760px) { .concret { grid-template-columns: 1fr; gap: 20px; } }
.concret > div { border-top: 2px solid var(--vert); padding-top: 13px; }
.concret b { display: block; font-family: var(--titre); font-weight: 700; color: var(--vert);
             font-size: 1.04rem; letter-spacing: .2px; }
.concret p { margin-top: 7px; color: var(--encre); font-size: .97rem; line-height: 1.55; }

/* ========== la date des articles (12/10/2026) ==========
   Une rubrique actualites sans dates donne l'impression d'un site laisse a
   l'abandon. La date est celle de redaction, verifiable, pas une invention. */
.date-article { margin-top: 12px; font-family: var(--titre); font-weight: 600;
                font-size: .92rem; letter-spacing: .4px; color: #9fd8b6; }
.date-carte { display: block; font-family: var(--titre); font-weight: 600;
              font-size: .84rem; letter-spacing: .4px; color: var(--doux); margin-bottom: 6px; }

/* ========== renvoi vers les autres articles (12/10/2026) ==========
   Un lecteur qui finit un article n'avait que le bouton de devis. */
/* Les articles, 14/10/2026 : les titres s empilaient dans un cadre gris,
   separes par de simples filets. Rien ne disait qu on pouvait cliquer, et
   neuf titres a la suite se lisaient comme un seul pave. Des cartes blanches
   en deux colonnes, une fleche verte devant chaque titre, et le lien vers
   toutes les actualites detache en bas sur toute la largeur. */
/* ========== page Tarifs, deux precisions ajoutees le 15/10/2026 ==========
   La ligne qui dit de quoi viennent les 950 € d economie, et celle qui sort
   les fiches reflexes de la liste « compris dans les deux formules », parce
   qu elles ne sont laissees qu en intra. */
.repere .base-gain { margin-top: 8px; font-size: .9rem; line-height: 1.55; color: var(--doux); }
.repere .base-gain b { color: var(--bleu); font-weight: 700; white-space: nowrap; }
.repere .apres-inclus { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bord);
                        font-size: .93rem; line-height: 1.55; color: var(--encre); }
.repere .apres-inclus strong { color: var(--bleu); }

/* ========== page Transparence : la referente handicap (14/10/2026) =======
   L adresse et le numero etaient du texte brut dans un encadre vert : on ne
   pouvait ni les toucher ni les copier d un geste, et le numero se coupait
   en deux au bout de la ligne. Deux boutons blancs, cliquables. */
.repere.referente .coord { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.repere.referente .coord a { display: inline-block; padding: 9px 14px; background: #fff;
                             border: 1px solid var(--vert); border-radius: 6px;
                             font-family: var(--titre); font-weight: 700; font-size: 1.02rem;
                             color: var(--vert); text-decoration: none; }
.repere.referente .coord a:hover, .repere.referente .coord a:focus-visible {
                             background: var(--vert); color: #fff; }

/* ========== page Transparence : les trois definitions (14/10/2026) =======
   Reclamation, difficulte et alea etaient definis a la suite dans un seul
   paragraphe de 52 mots : il fallait relire pour voir ou finissait l une et
   ou commencait la suivante. Un encadre par mot, le mot en titre bleu avec
   un filet vert devant. La phrase qui conclut les trois est detachee. */
.definitions { display: grid; gap: 12px; margin-top: 22px; }
@media (min-width: 860px) { .definitions { grid-template-columns: repeat(3, 1fr); }
                            /* le bas de la section n en compte que deux (14/10/2026) */
                            .definitions.deux { grid-template-columns: repeat(2, 1fr); } }
.definitions.deux { margin-top: 24px; }
.definitions > div { padding: 16px 18px; background: #fff;
                     border: 1px solid var(--bord); border-left: 4px solid var(--vert);
                     border-radius: 6px; }
.definitions b { display: block; font-family: var(--titre); font-weight: 700;
                 color: var(--bleu); font-size: 1.1rem; line-height: 1.3; }
.definitions span { display: block; margin-top: 6px; color: var(--encre);
                    font-size: .93rem; line-height: 1.55; }
.apres-definitions { margin-top: 14px; font-size: 1.01rem; color: var(--encre); }
.apres-definitions strong { color: var(--bleu); }

/* ========== page Transparence : les regles de publication (14/10/2026) ====
   Quatre lignes de texte precedees d une coche, sur deux colonnes, sans
   rien pour separer une regle de la suivante. Chaque regle prend sa carte,
   la coche passe dans un rond vert et la partie qui porte la regle est en
   gras. Les phrases ne changent pas. */
.regles-pub { display: grid; gap: 12px; margin-top: 22px; }
@media (min-width: 820px) { .regles-pub { grid-template-columns: 1fr 1fr; } }
.regles-pub > div { position: relative; padding: 16px 20px 16px 54px;
                    background: #fff; border: 1px solid var(--bord); border-radius: 8px;
                    font-size: .97rem; line-height: 1.55; color: var(--encre); }
.regles-pub .pic { position: absolute; left: 17px; top: 16px;
                   display: grid; place-items: center; width: 24px; height: 24px;
                   border-radius: 50%; background: var(--vert-pale); color: var(--vert);
                   font-size: .82rem; font-weight: 700; }
.regles-pub strong { color: var(--bleu); }

/* ========== page Transparence : le tableau encore vide (14/10/2026) ======
   Six colonnes pour une seule phrase : sur un telephone il fallait faire
   defiler sur le cote pour lire des en-tetes qui ne portaient rien. Tant
   qu aucune session n est terminee, un encadre annonce ce qui viendra et
   nomme les six colonnes. */
.attente-tableau { display: flex; gap: 18px; align-items: flex-start; margin-top: 22px;
                   padding: 22px; background: var(--gris); border: 1px dashed var(--bord);
                   border-radius: 8px; }
.attente-tableau > .pic { flex: none; width: 42px; height: 42px; border-radius: 50%;
                          background: #fff; color: var(--doux); display: grid; place-items: center; }
.attente-tableau > .pic svg { width: 23px; height: 23px; }
.attente-tableau .titre { margin: 0; font-family: var(--titre); font-weight: 700;
                          color: var(--bleu); font-size: 1.12rem; }
.attente-tableau .titre + p { margin-top: 7px; color: var(--encre);
                              font-size: .95rem; line-height: 1.55; }
.attente-tableau .colonnes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.attente-tableau .colonnes span { padding: 5px 11px; background: #fff;
                                  border: 1px solid var(--bord); border-radius: 20px;
                                  font-size: .82rem; color: var(--doux); }
@media (max-width: 620px) { .attente-tableau { flex-direction: column; gap: 14px; padding: 18px; } }

/* ========== les trois moyens de nous joindre (14/10/2026) ==========
   Sous « Vous preferez en parler ? », les trois moyens etaient trois colonnes
   de texte : le numero et l adresse avaient la meme taille que la phrase qui
   les suivait, et seul le lien bleu disait qu on pouvait cliquer. Chaque
   moyen devient une carte entiere cliquable, avec son pictogramme, le numero
   ou l adresse en gros et en vert, et l explication en dessous. */
.contacts { display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 820px) { .contacts { grid-template-columns: repeat(3, 1fr); }
                            /* quatre moyens de saisie, deux par deux (14/10/2026) */
                            .contacts.quatre { grid-template-columns: repeat(2, 1fr); } }
.contacts > a, .contacts > .sans-lien { display: block; padding: 20px; background: #fff;
                        border: 2px solid var(--bord); border-radius: 8px;
                        text-decoration: none; color: var(--encre); }
.contacts > a:hover, .contacts > a:focus-visible { border-color: var(--vert); background: var(--vert-pale); }
.contacts .pic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
                 background: var(--vert-pale); color: var(--vert); }
.contacts .pic svg { width: 21px; height: 21px; }
.contacts > a:hover .pic, .contacts > a:focus-visible .pic { background: var(--vert); color: #fff; }
.contacts b { display: block; margin-top: 13px; font-family: var(--titre); font-weight: 700;
              color: var(--doux); font-size: .95rem; }
.contacts .val { display: block; margin-top: 4px; font-family: var(--titre); font-weight: 800;
                 color: var(--bleu); font-size: 1.2rem; line-height: 1.25; overflow-wrap: anywhere; }
.contacts > a .val { color: var(--vert); }
.contacts .det { display: block; margin-top: 9px; color: var(--encre);
                 font-size: .93rem; line-height: 1.55; }
@media (max-width: 480px) { .contacts > a, .contacts > .sans-lien { padding: 17px; }
                            .contacts .val { font-size: 1.1rem; } }

/* ========== les trois questions avant le devis (14/10/2026) ==========
   Sur la page du devis, « Avant de remplir, si vous hesitez encore » posait
   trois questions dans une liste a puces : le lien portait la question, la
   reponse suivait sur la meme ligne, et les trois se lisaient comme un seul
   paragraphe. La question passe en titre de carte, avec un point d
   interrogation vert, et toute la carte devient cliquable. */
.questions-cartes { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 900px) { .questions-cartes { grid-template-columns: repeat(3, 1fr); } }
.questions-cartes > a { display: block; padding: 18px 20px; background: #fff;
                        border: 2px solid var(--bord); border-radius: 8px; text-decoration: none; }
.questions-cartes > a:hover, .questions-cartes > a:focus-visible {
                        border-color: var(--vert); background: var(--vert-pale); }
.questions-cartes .pic { display: grid; place-items: center; width: 30px; height: 30px;
                         border-radius: 50%; background: var(--vert-pale); color: var(--vert);
                         font-family: var(--titre); font-weight: 800; font-size: 1.15rem; }
.questions-cartes > a:hover .pic, .questions-cartes > a:focus-visible .pic {
                         background: var(--vert); color: #fff; }
.questions-cartes b { display: block; margin-top: 11px; font-family: var(--titre); font-weight: 700;
                      color: var(--bleu); font-size: 1.1rem; line-height: 1.3; }
.questions-cartes .rep { display: block; margin-top: 7px; color: var(--doux);
                         font-size: .92rem; line-height: 1.55; }
@media (max-width: 480px) { .questions-cartes > a { padding: 16px 17px; }
                            .questions-cartes b { font-size: 1.05rem; } }

.lire-aussi { margin-top: 36px; padding: 22px; background: var(--gris);
              border-radius: 8px; border: 1px solid var(--bord);
              display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lire-aussi .titre { grid-column: 1 / -1; margin: 0; font-family: var(--titre);
                     font-weight: 700; color: var(--bleu); font-size: 1.05rem; }
.lire-aussi a { display: flex; gap: 10px; align-items: flex-start;
                background: #fff; border: 1px solid var(--bord); border-radius: 6px;
                padding: 14px 16px; color: var(--bleu); text-decoration: none;
                font-weight: 600; font-size: .95rem; line-height: 1.4;
                transition: border-color .15s ease, color .15s ease; }
.lire-aussi a::before { content: '\2192'; color: var(--vert); font-weight: 700; flex: none; }
.lire-aussi a:hover, .lire-aussi a:focus-visible { border-color: var(--vert); color: var(--vert); text-decoration: none; }
.lire-aussi a[href$="actualites/"] { grid-column: 1 / -1; justify-content: center;
                background: var(--bleu); border-color: var(--bleu); color: #fff;
                font-family: var(--titre); }
.lire-aussi a[href$="actualites/"]::before { content: none; }
.lire-aussi a[href$="actualites/"]:hover { background: var(--vert); border-color: var(--vert); color: #fff; }
@media (max-width: 700px) {
  .lire-aussi { grid-template-columns: 1fr; padding: 18px; gap: 8px; }
  .lire-aussi a { padding: 11px 13px; font-size: .9rem; }
}

/* ========== d'ou vient le nombre, sous le resultat du diagnostic ========== */
.source-calcul { margin-top: 10px; font-size: .9rem; line-height: 1.5; color: var(--doux);
                 border-left: 3px solid var(--bord); padding-left: 14px; }

/* ================= respiration entre les paragraphes =================
   Trouve le 13/10/2026. La remise a zero du haut de la feuille,
   « * { margin: 0 } », enlevait toute marge aux paragraphes, et seuls
   quelques blocs la remettaient. Partout ailleurs, deux paragraphes qui se
   suivaient etaient colles l un a l autre : le lecteur voyait un pave, pas
   un texte. On ne met de l espace QU ENTRE deux elements qui se suivent,
   jamais avant le premier, pour ne rien decaler.                        */
article > p + p,
article > p + ul,  article > ul + p,
article > p + ol,  article > ol + p,
article > blockquote + p,
article > p + blockquote,
.vignette-corps > article > p + p,
details .rep p + p,  details .rep p + ul,  details .rep ul + p,
.rep p + p,  .rep p + ul,  .rep ul + p,
.concret p + p,
.repere p + p,
.preuve-chiffree p + p { margin-top: 15px; }

/* Lien pour sauter le menu, ajoute le 13/10/2026. Invisible a la souris, il
   apparait des qu on l atteint avec la touche de tabulation : la personne qui
   navigue au clavier n a plus a traverser les onze entrees du menu sur chaque
   page avant d arriver au texte. */
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--bleu); color: #fff; padding: 12px 20px;
  font-family: var(--titre); font-weight: 700; text-decoration: none;
  border-radius: 0 0 6px 0;
}
.evitement:focus { left: 0; outline: 3px solid var(--vert); outline-offset: 2px; }

/* ordre-accueil-telephone, 13/10/2026.
   Sur un telephone, les six raccourcis du bandeau arrivaient apres le texte,
   les boutons et les coches : la plupart des visiteurs avaient deja commence
   a faire defiler. On les remonte juste sous le titre. Rien ne change dans le
   fichier HTML ni sur ordinateur : seul l affichage est reordonne. */
@media (max-width: 760px) {
  .hero .dedans.seul > div { display: flex; flex-direction: column; }
  .hero .dedans.seul > div > .etiq        { order: 1; align-self: flex-start; }
  .hero .dedans.seul > div > h1           { order: 2; }
  .hero .dedans.seul > div > .acces-rapide { order: 3; margin-top: 18px; }
  .hero .dedans.seul > div > .accroche    { order: 4; margin-top: 18px; }
  .hero .dedans.seul > div > .actions     { order: 5; }
  .hero .dedans.seul > div > .preuves     { order: 6; }
}

/* Les trois limites de l intervention d un sauveteur, 14/10/2026.
   Cartes neutres, bord bleu : ce ne sont ni des avantages ni des manques,
   ce sont les bornes du role. Le vert pale des cartes "compris" aurait fait
   lire une promesse la ou il s agit d une retenue. */
.bornes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.bornes > div { background: #fff; border: 1px solid var(--bord); border-top: 4px solid var(--bleu-clair);
                 border-radius: 6px; padding: 16px 18px 18px; }
.bornes b { display: block; font-family: var(--titre); font-weight: 700; color: var(--bleu);
             font-size: 1.08rem; line-height: 1.25; }
.bornes span { display: block; margin-top: 8px; font-size: .96rem; line-height: 1.55; color: var(--encre); }
@media (max-width: 760px) { .bornes { grid-template-columns: 1fr; } }

/* Deux chiffres cote a cote, meme carte que les trois limites mais en plus
   grand : ici le nombre est le message. 14/10/2026. */
.bornes.deux { grid-template-columns: 1fr 1fr; max-width: 72ch; }
.bornes.deux b { font-size: 2rem; line-height: 1.05; }
.bornes.deux span { margin-top: 6px; }
@media (max-width: 560px) { .bornes.deux { grid-template-columns: 1fr; } }

/* Sections repliables de la page Tarifs, 14/10/2026. Le cadre blanc et les
   marges interieures venaient du composant des questions frequentes. Sur une
   section entiere, ils retrecissaient les tableaux de 53 pixels et les mots
   tombaient les uns sous les autres. Seul le titre garde le cadre : il montre
   qu il y a quelque chose a ouvrir. Le contenu, lui, retrouve toute la
   largeur qu il avait avant d etre replie. */
details.repli { border: 0; border-radius: 0; background: none; }
details.repli[open] { border: 0; }
details.repli > summary { border: 1px solid var(--bord); border-radius: 6px;
                          background: #fff; padding: 14px 18px; }
.creme details.repli > summary { border-color: #e6ded1; }
details.repli[open] > summary { border-color: var(--vert); margin-bottom: 18px; }
details.repli .repli-corps { padding: 0 0 4px; }

/* L encart des deux outils gratuits, 14/10/2026. Le renvoi au diagnostic
   etait un encadre vert pale de plus au milieu d une page qui en compte
   plusieurs : on passait devant sans le voir. Fond blanc, bord vert epais,
   un pictogramme, et les deux outils en boutons plutot qu en lien. */
.encart-outil { display: flex; gap: 18px; align-items: flex-start;
                background: #fff; border: 2px solid var(--vert); border-radius: 10px;
                padding: 22px 24px; margin-top: 26px;
                box-shadow: 0 6px 18px rgba(0, 46, 95, .1); }
.encart-outil > .pic { flex: none; width: 48px; height: 48px; border-radius: 50%;
                       background: var(--vert-pale); color: var(--vert);
                       display: grid; place-items: center; }
.encart-outil > .pic svg { width: 26px; height: 26px; }
.encart-outil .titre { margin: 0; font-family: var(--titre); font-weight: 700;
                       color: var(--bleu); font-size: 1.2rem; line-height: 1.3; }
.encart-outil .corps > p + p { margin-top: 8px; line-height: 1.6; }
.encart-outil .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
@media (max-width: 620px) {
  .encart-outil { flex-direction: column; gap: 14px; padding: 20px; }
  .encart-outil .actions { flex-direction: column; }
  .encart-outil .actions .bouton { width: 100%; text-align: center; }
}

/* Le bloc « comment cela se passe » de l accueil, 14/10/2026. Trois colonnes
   egales ne suffisaient plus : la carte du paiement recoit un echeancier et
   celle de la preparation six carres. Deux colonnes, et la preparation
   passe sous les deux autres, sur toute la largeur. La classe « riche »
   evite de toucher aux memes blocs sur le questionnaire et les echeances. */
.concret.riche { grid-template-columns: 1fr 1fr; }
.concret.riche > div.large { grid-column: 1 / -1; }
.concret .cle { margin-top: 10px; font-family: var(--titre); color: var(--bleu);
                font-size: 1.04rem; line-height: 1.25; }
.concret .cle .nb { font-family: var(--titre); font-size: 2.1rem; font-weight: 800;
                    color: var(--vert); line-height: 1; margin-right: 7px;
                    vertical-align: -2px; }
.concret .mention { margin-top: 10px; font-size: .86rem; color: var(--doux); }
.concret .inclus { margin-top: 14px; }
.concret .inclus b { display: block; color: var(--bleu); font-size: 1.02rem;
                     letter-spacing: 0; }

/* L echeancier du paiement en trois fois. Les trois lignes viennent de
   l article 5 des conditions generales de vente, les montants en sont le
   calcul sur 2 800 € HT. */
.echeancier { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 7px; }
.echeancier li { display: grid; grid-template-columns: 52px 1fr auto; align-items: baseline;
                 gap: 10px; padding: 9px 12px; background: #fff;
                 border: 1px solid var(--bord); border-left: 3px solid var(--vert);
                 border-radius: 4px; }
.echeancier b { display: inline; font-family: var(--titre); font-weight: 800;
                color: var(--vert); font-size: 1.04rem; letter-spacing: 0; }
.echeancier span { color: var(--encre); font-size: .92rem; line-height: 1.35; }
.echeancier em { font-style: normal; font-weight: 700; color: var(--bleu);
                 font-size: .92rem; white-space: nowrap; }
@media (max-width: 760px) {
  .concret.riche { grid-template-columns: 1fr; }
  .echeancier li { grid-template-columns: 46px 1fr auto; padding: 8px 10px; gap: 8px; }
}

/* Les choix du diagnostic, 14/10/2026 : un bouton garde par defaut son texte
   centre. Les libelles courts tenaient sur une ligne, on ne le voyait pas ;
   « Me mettre en conformite, conseillez-moi » et « Recycler des salaries
   deja formes » passaient sur deux lignes et paraissaient centres au milieu
   de voisins alignes a gauche. Les libelles s alignent donc a gauche, sauf
   les boutons de nombres et le oui-non, qui restent centres. */
.choix-diag button { text-align: left; }
.choix-diag[data-q="sites"] button,
.choix-diag[data-q="sst"] button { text-align: center; }

/* Les deux passages qui portent le raisonnement du diagnostic, 14/10/2026.
   Ils se lisaient comme du texte courant au milieu d une page qui en compte
   beaucoup. Le premier devient un bloc bleu avec sa phrase forte en tete,
   le second une citation signee. */
.cle-lecture { background: var(--bleu); color: #fff; border-radius: 8px;
               padding: 24px 26px; margin-top: 26px; max-width: 72ch; }
.cle-lecture .fort { margin: 0; font-family: var(--titre); font-weight: 700;
                     font-size: 1.3rem; line-height: 1.35; color: #fff; }
.cle-lecture .fort strong { color: var(--vert-vif); }
.cle-lecture p + p { margin-top: 13px; font-size: .97rem; line-height: 1.6; color: #d5e2f0; }

.citation-source { margin: 22px 0 0; padding: 20px 22px 18px; max-width: 72ch;
                   background: #fff; border: 1px solid var(--bord);
                   border-left: 5px solid var(--vert); border-radius: 6px; }
.citation-source .etiquette { margin: 0; font-family: var(--titre); font-weight: 700;
                              text-transform: uppercase; letter-spacing: .6px;
                              font-size: .82rem; color: var(--vert); }
.citation-source blockquote { margin: 10px 0 0; padding: 0; border: 0; background: none;
                              font-size: 1.1rem; line-height: 1.55; color: var(--bleu);
                              font-style: italic; }
.citation-source blockquote::before { content: '\201C'; }
.citation-source blockquote::after { content: '\201D'; }
.citation-source figcaption { margin-top: 12px; font-size: .86rem; line-height: 1.45;
                              color: var(--doux); }
@media (max-width: 620px) {
  .cle-lecture { padding: 20px; }
  .cle-lecture .fort { font-size: 1.14rem; }
  .citation-source { padding: 18px 18px 16px; }
  .citation-source blockquote { font-size: 1.02rem; }
}

/* L etiquette au dessus de la citation a ete retiree le 14/10/2026 : la
   citation est alors le premier element du cadre et ne doit plus etre
   decalee vers le bas. */
.citation-source blockquote:first-child { margin-top: 0; }

/* L etiquette du bandeau et les raccourcis, 14/10/2026. Les deux avaient
   exactement la meme forme : une pilule blanche translucide a bord blanc.
   On croyait que « Sauveteur Secouriste du Travail » etait un bouton, et
   les six raccourcis, eux, ne se distinguaient pas d un simple libelle.
   L etiquette devient un bandeau vert plein a coins droits, les raccourcis
   gardent la pilule mais passent au vert avec une fleche vers le bas. */
.hero .etiq { background: var(--vert); border: 0; border-radius: 5px;
              color: #fff; padding: 7px 14px; font-size: .93rem;
              letter-spacing: .3px; font-weight: 700; }
/* Sur un telephone, « Sauveteur Secouriste du Travail, Île-de-France » ne
   tient pas sur une ligne a cette taille et l etiquette doublait de
   hauteur en haut de page. */
@media (max-width: 420px) { .hero .etiq { font-size: .84rem; padding: 6px 11px; } }
nav.acces-rapide > a { background: rgba(0, 168, 76, .18); border-color: rgba(127, 224, 164, .75);
                       font-weight: 600; }
nav.acces-rapide > a::before { content: '\2193\00a0'; color: #7fe0a4; font-weight: 700; }
nav.acces-rapide > a:hover, nav.acces-rapide > a:focus { background: var(--vert); border-color: var(--vert); }
nav.acces-rapide > a:hover::before, nav.acces-rapide > a:focus::before { color: #fff; }

/* Trois points au lieu de quatre sous un bandeau, 14/10/2026 : en deux
   colonnes, le troisieme se retrouvait seul sur sa ligne. */
.preuves.trois { grid-template-columns: repeat(3, 1fr); max-width: none; }
@media (max-width: 760px) { .preuves.trois { grid-template-columns: 1fr; } }

/* Le resultat du diagnostic, 14/10/2026 : le nombre de sauveteurs etait
   noye dans une phrase, apres un rappel de la loi. Il passe en tete et en
   grand, le reste suit. */
.verdict-nb { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
              background: var(--vert-pale); border-left: 5px solid var(--vert);
              border-radius: 0 8px 8px 0; padding: 18px 22px; margin-top: 10px; }
.verdict-nb b { font-family: var(--titre); font-size: 3.2rem; font-weight: 800;
                line-height: 1; color: var(--vert); }
.verdict-nb span { font-family: var(--titre); font-size: 1.18rem; font-weight: 700;
                   line-height: 1.3; color: var(--bleu); flex: 1; min-width: 180px; }
@media (max-width: 560px) {
  .verdict-nb { padding: 16px 18px; gap: 10px; }
  .verdict-nb b { font-size: 2.6rem; }
  .verdict-nb span { font-size: 1.05rem; }
}

/* Le mot « sauveteurs » au vert comme le chiffre, 14/10/2026. */
.verdict-nb span em { font-style: normal; color: var(--vert); }

/* Le detail du calcul sous le nombre de sauveteurs, 14/10/2026. */
.calcul-detail { margin-top: 10px; font-family: var(--titre); font-weight: 700;
                 font-size: 1.02rem; color: var(--bleu); letter-spacing: .2px; }

/* La formule retenue par le diagnostic, 14/10/2026. C etait une puce verte
   et une ligne de texte ou le prix se perdait au milieu de la phrase. Une
   carte par formule, le prix en gros. */
.formules { display: grid; gap: 12px; margin-top: 12px; }
.formule { background: #fff; border: 2px solid var(--vert); border-radius: 8px;
           padding: 18px 20px; box-shadow: 0 4px 14px rgba(0, 46, 95, .07); }
.formule .nom { margin: 0; font-family: var(--titre); font-weight: 700;
                color: var(--bleu); font-size: 1.1rem; line-height: 1.3; }
.formule .px { margin: 8px 0 0; font-family: var(--titre); font-weight: 800;
               color: var(--vert); font-size: 2rem; line-height: 1; }
.formule .det { margin: 10px 0 0; font-size: .95rem; line-height: 1.55; color: var(--encre); }
@media (max-width: 560px) {
  .formule { padding: 16px 17px; }
  .formule .px { font-size: 1.7rem; }
}

/* Un bouton sur deux niveaux, 14/10/2026 : le libelle principal, et en
   dessous, plus petit, la precision du lieu. */
.bouton.deux-lignes { display: inline-flex; flex-direction: column; align-items: center;
                      line-height: 1.25; }
.bouton.deux-lignes small { display: block; margin-top: 4px; font-size: .82em;
                            font-weight: 600; opacity: .88; }

/* Le prix dans l encart des outils, 14/10/2026. */
.encart-outil .cle { margin-top: 12px; font-family: var(--titre); font-weight: 700;
                     color: var(--bleu); font-size: 1.02rem; line-height: 1.3; }
.encart-outil .cle .nb { font-size: 1.9rem; font-weight: 800; color: var(--vert);
                         line-height: 1; margin-right: 6px; vertical-align: -2px; }

/* La precision sous le prix du suivi, 14/10/2026. */
.encart-outil .mention-suivi { margin-top: 8px; font-size: .9rem; line-height: 1.5; color: var(--doux); }
.encart-outil .mention-suivi strong { color: var(--bleu); }

/* Les trois situations du renouvellement, 14/10/2026 : « Tous vos sauveteurs
   sont déjà certifiés », « De 1 à 3 nouveaux salariés à former » et « 4
   nouveaux salariés ou plus » s affichaient en texte courant, au même corps
   que le détail d à côté. Ce sont les trois entrées du tableau : elles
   passent en police de titre, et chacune prend la couleur de sa zone, celle
   de son prix dans la dernière colonne. */
.tableau table.zones tbody tr > td.titre-cel:first-child {
  font-family: var(--titre); font-weight: 700; font-size: 1.14rem; line-height: 1.3; }
.tableau table.zones tbody tr.z1 > td.titre-cel:first-child { color: var(--vert); }
.tableau table.zones tbody tr.z2 > td.titre-cel:first-child { color: #a85f0c; }
.tableau table.zones tbody tr.z3 > td.titre-cel:first-child { color: var(--bleu-clair); }