/* =========================================================
   ezr'app — feuille de style du site vitrine
   Encre / papier / laiton — Newsreader + Public Sans
   ========================================================= */

:root{
  --papier:#FAFAF7;
  --papier-2:#F1F0EA;
  --encre:#0D2233;
  --encre-2:#1C3B55;
  --encre-3:#16324A;
  --gris:#4E6274;
  --gris-clair:#A9BCCB;
  --trait:#DCDAD1;
  --trait-sombre:rgba(255,255,255,.16);
  --laiton:#A8792A;
  --laiton-vif:#C08C31;
  --laiton-clair:#F3EAD6;
  --vert:#1D6B4C;
  --vert-clair:#E4F0EA;
  --blanc:#fff;
  --max:1140px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Public Sans',system-ui,-apple-system,sans-serif;
  background:var(--papier);color:var(--encre);
  font-size:17px;line-height:1.65;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--laiton);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.wrap-etroit{max-width:820px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:'Newsreader',Georgia,serif;font-weight:500;line-height:1.15;letter-spacing:-.012em}
h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:14px}
h3{font-size:20px;font-weight:600;line-height:1.3}
p{max-width:70ch}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--encre);color:#fff;padding:10px 16px;z-index:200}

/* ---------------- navigation ---------------- */
header{position:sticky;top:0;z-index:100;background:rgba(250,250,247,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--trait)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 28px;max-width:var(--max);margin:0 auto}
.nav-logo img{height:40px;width:auto}
.nav ul{display:flex;align-items:center;gap:24px;list-style:none}
.nav ul a{text-decoration:none;font-size:15px;color:var(--gris);font-weight:500}
.nav ul a:hover{color:var(--encre)}
.nav ul a[aria-current]{color:var(--encre);box-shadow:inset 0 -2px 0 var(--laiton)}

.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:16px;padding:13px 26px;border:1px solid var(--encre);border-radius:3px;transition:background .15s,color .15s;text-align:center}
.btn-plein{background:var(--encre);color:#fff}
.btn-plein:hover{background:var(--encre-2)}
.btn-vide{background:transparent;color:var(--encre)}
.btn-vide:hover{background:var(--papier-2)}
.btn-laiton{background:var(--laiton);border-color:var(--laiton);color:#fff}
.btn-laiton:hover{background:var(--laiton-vif);border-color:var(--laiton-vif)}
.btn-clair{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-clair:hover{background:rgba(255,255,255,.1)}
.nav .btn{padding:9px 18px;font-size:15px;white-space:nowrap}

/* ---------------- sections ---------------- */
section{padding:88px 0}
.section-sombre{background:var(--encre);color:#fff}
.section-sombre h2,.section-sombre h3{color:#fff}
.section-sombre p{color:var(--gris-clair)}
.section-papier{background:var(--papier-2);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.intro{max-width:62ch;margin-bottom:52px}
.intro p{color:var(--gris);font-size:18px;margin-top:10px}
.section-sombre .intro p{color:var(--gris-clair)}
.centre{text-align:center}
.centre .intro{margin-left:auto;margin-right:auto}
.centre p{margin-left:auto;margin-right:auto}

/* ---------------- héros ---------------- */
.hero{padding:72px 0 60px}
.hero-grille{display:grid;grid-template-columns:1.02fr 1fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(38px,5vw,58px);letter-spacing:-.025em;margin-bottom:22px}
.hero .chapeau{font-size:19px;color:var(--gris);margin-bottom:30px;max-width:52ch}
.hero .chapeau strong{color:var(--encre);font-weight:600}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.sous-action{font-size:14.5px;color:var(--gris)}
.sous-action a{color:var(--encre);text-underline-offset:3px}

.anim{opacity:0;transform:translateY(14px);animation:entree .7s cubic-bezier(.2,.7,.3,1) forwards}
.anim:nth-child(2){animation-delay:.07s}
.anim:nth-child(3){animation-delay:.14s}
.anim:nth-child(4){animation-delay:.2s}
@keyframes entree{to{opacity:1;transform:none}}

/* ---------------- vidéo ---------------- */
.video{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--trait);border-radius:4px;overflow:hidden;background:var(--encre);cursor:pointer;padding:0;display:block;box-shadow:14px 14px 0 var(--papier-2)}
.video img{width:100%;height:100%;object-fit:cover;opacity:.75}
.video .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;color:#fff;font-family:'Public Sans',sans-serif;font-size:15px;font-weight:600;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.video .disque{width:64px;height:64px;border-radius:50%;background:var(--laiton);display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s}
.video:hover .disque{background:var(--laiton-vif);transform:scale(1.06)}
.video iframe{width:100%;height:100%;border:0}
.video-legende{font-size:14px;color:var(--gris);margin-top:12px;text-align:center;max-width:none}

/* ---------------- bandeau repères ---------------- */
.reperes{border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);background:var(--papier-2)}
.reperes ul{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;max-width:var(--max);margin:0 auto}
.reperes li{padding:18px 22px;font-size:14.5px;border-left:1px solid var(--trait);display:flex;align-items:center;gap:10px}
.reperes li:first-child{border-left:0}
.reperes svg{flex:0 0 auto;color:var(--laiton)}

/* ---------------- bifurcation logiciel / externalisation ---------------- */
.voies{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.voie{background:var(--blanc);border:1px solid var(--trait);border-top:4px solid var(--encre);padding:34px 32px;display:flex;flex-direction:column}
.voie.mise-en-avant{border-top-color:var(--laiton);background:linear-gradient(180deg,var(--laiton-clair) 0%,var(--blanc) 190px)}
.voie .etiquette{font-size:13px;font-weight:700;color:var(--laiton);margin-bottom:8px}
.voie h3{font-family:'Newsreader',serif;font-size:26px;font-weight:600;margin-bottom:10px}
.voie>p{color:var(--gris);font-size:16px}
.voie ul{list-style:none;margin:20px 0 26px}
.voie li{padding:9px 0 9px 26px;position:relative;font-size:16px;border-top:1px solid var(--trait)}
.voie li:first-child{border-top:0}
.voie li::before{content:"";position:absolute;left:2px;top:17px;width:9px;height:5px;border-left:2px solid var(--laiton);border-bottom:2px solid var(--laiton);transform:rotate(-45deg)}
.voie .pied{margin-top:auto}
.voie .prix-ligne{font-size:15px;color:var(--gris);margin-bottom:16px}
.voie .prix-ligne b{color:var(--encre);font-size:17px}

/* cartes claires posees sur une section sombre : on restaure l'encre.
   Sans cette regle, le texte herite du blanc de la section et devient
   invisible sur le fond blanc de la carte (cartes, formulaires, libelles). */
.section-sombre .voie,
.section-sombre .voie h3,
.section-sombre .voie li{color:var(--encre)}
.section-sombre .voie>p{color:var(--gris)}

.section-sombre form,
.section-sombre form label,
.section-sombre .champ label,
.section-sombre .champ input,
.section-sombre .champ select,
.section-sombre .champ textarea{color:var(--encre)}

/* ---------------- liste de fonctions ---------------- */
.fonctions{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.fonction{padding:26px 0;border-top:1px solid var(--trait);display:grid;grid-template-columns:28px 1fr;gap:16px;align-items:start}
.fonction svg{color:var(--laiton);margin-top:3px}
.fonction p{font-size:15.5px;color:var(--gris);margin-top:5px}

/* ---------------- maquette d'application ---------------- */
.appli{border:1px solid var(--trait);border-radius:6px;overflow:hidden;background:var(--blanc);box-shadow:0 24px 60px -30px rgba(13,34,51,.4)}
.appli-barre{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--papier-2);border-bottom:1px solid var(--trait)}
.appli-barre i{width:9px;height:9px;border-radius:50%;background:var(--trait);display:block}
.appli-barre span{margin-left:10px;font-size:12px;color:var(--gris);font-family:'Public Sans',sans-serif}
.appli-corps{padding:22px 22px 26px}
.appli-titre{font-family:'Newsreader',serif;font-size:19px;font-weight:600;margin-bottom:16px}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.kpi div{border:1px solid var(--trait);border-radius:4px;padding:12px 14px}
.kpi small{display:block;font-size:11.5px;color:var(--gris);margin-bottom:2px}
.kpi b{font-family:'Newsreader',serif;font-size:23px;font-weight:600;display:block;line-height:1.1}
.barres{display:flex;align-items:flex-end;gap:7px;height:82px;padding:0 2px;margin-bottom:6px}
.barres i{flex:1;background:var(--laiton-clair);border-top:2px solid var(--laiton);display:block;border-radius:1px}
.barres-legende{display:flex;justify-content:space-between;font-size:10.5px;color:var(--gris);margin-bottom:20px}
.tableau{width:100%;border-collapse:collapse;font-size:12.5px}
.tableau th{text-align:left;font-weight:600;color:var(--gris);font-size:11px;padding:0 8px 7px 0;border-bottom:1px solid var(--trait)}
.tableau td{padding:9px 8px 9px 0;border-bottom:1px solid var(--papier-2)}
.tableau td:last-child,.tableau th:last-child{text-align:right;padding-right:0}
.jeton{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:2px;background:var(--vert-clair);color:var(--vert)}
.jeton.attente{background:var(--laiton-clair);color:var(--laiton)}

/* ---------------- anatomie du reçu ---------------- */
.recu-grille{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.doc{background:#fff;color:var(--encre);border-radius:3px;padding:26px 22px 26px 42px;font-size:12px;line-height:1.5;box-shadow:0 18px 50px -20px rgba(0,0,0,.5)}
.doc p,.section-sombre .doc,.section-sombre .doc p{color:var(--encre)}
.doc p{max-width:none}
.section-sombre .doc .lib{color:var(--laiton)}
.doc .lib{display:block;font-size:9px;font-weight:700;letter-spacing:.11em;color:var(--laiton);margin-bottom:5px}

.doc-entete{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:14px;border-bottom:2px solid var(--laiton);position:relative}
.doc-marque{font-family:'Newsreader',serif;font-size:19px;font-weight:600;color:var(--encre)}
.doc-marque span{color:var(--laiton)}
.doc-orga{text-align:right;font-size:11px;line-height:1.5}
.doc-orga b{display:block;font-size:12px}

.doc-titre{text-align:center;padding:16px 0 14px;border-bottom:1px solid var(--trait);position:relative}
.doc-titre h4{font-family:'Public Sans',sans-serif;font-size:15px;font-weight:700;letter-spacing:.02em;margin-bottom:3px}
.doc-titre .num{font-family:'Newsreader',serif;font-size:14px;font-weight:600;color:var(--encre-2)}
.doc-titre em{display:block;font-style:italic;font-size:10.5px;color:var(--gris);margin-top:4px}

.doc-deux{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:16px 0;align-items:start}
.doc-donateur{position:relative}
.doc-donateur b{display:block;font-size:14px;font-weight:700;margin-bottom:2px}
.doc-donateur i{font-style:italic;color:var(--gris);font-size:10.5px}
.doc-donateur p{margin-top:6px;color:var(--encre)}
.doc-total{border:1px solid var(--laiton);background:var(--laiton-clair);padding:12px;text-align:center;position:relative}
.doc-total .puce{left:-16px}
.doc-total .lib{text-align:center}
.doc-total b{display:block;font-family:'Newsreader',serif;font-size:25px;font-weight:600;line-height:1.1}
.doc-total small{display:block;font-size:10.5px;color:var(--gris);margin:3px 0 7px;padding-bottom:7px;border-bottom:1px solid rgba(168,121,42,.4)}
.doc-total em{font-style:italic;font-size:10.5px;color:var(--gris)}

.doc-nature{background:var(--papier-2);border-left:3px solid var(--laiton);padding:11px 13px;position:relative}
.doc-nature b{font-weight:700}
.doc-nature i{display:block;font-style:italic;color:var(--gris);margin-top:3px;font-size:11px}

.doc-phrase{margin:14px 0;font-size:11.5px}
.doc-phrase i{display:block;font-style:italic;color:var(--gris);font-size:10.5px;margin-top:5px}

.doc-versements{position:relative;margin-top:4px}
.doc-table{width:100%;border-collapse:collapse;font-size:10.5px;margin-top:6px}
.doc-table th{background:var(--encre);color:#fff;text-align:left;font-weight:600;padding:6px 8px}
.doc-table td{padding:7px 8px;border-bottom:1px solid var(--trait)}
.doc-table .droite{text-align:right}
.doc-table tfoot td{background:var(--encre);color:#fff;font-weight:700;border:0}

.doc-signature{display:flex;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid var(--trait);position:relative}
.doc-signature div{text-align:right;font-size:11px}
.doc-signature .date{color:var(--gris);margin-bottom:6px}
.doc-signature .role{font-weight:700}
.doc-signature .paraphe{font-family:'Newsreader',serif;font-style:italic;font-size:24px;color:var(--encre-2);margin:2px 0}
.doc-signature .nom{font-size:10px;letter-spacing:.04em}

.puce{position:absolute;left:-31px;top:9px;width:24px;height:24px;border-radius:50%;background:var(--laiton);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'Public Sans',sans-serif;box-shadow:0 0 0 3px #fff}
.reperes-doc{list-style:none}
.reperes-doc li{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:15px 0;border-top:1px solid var(--trait-sombre)}
.reperes-doc li:first-child{border-top:0;padding-top:0}
.reperes-doc .n{width:24px;height:24px;border-radius:50%;background:var(--laiton);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.reperes-doc strong{font-weight:600;font-size:16px;color:#fff}
.reperes-doc p{color:var(--gris-clair);font-size:15px;margin-top:3px}
.note{margin-top:28px;padding:16px 18px;border-left:3px solid var(--laiton);background:rgba(255,255,255,.05);font-size:14.5px;color:#C6D4DF}

/* ---------------- étapes ---------------- */
.etapes{counter-reset:e;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.etape{padding:26px 26px 26px 0;border-top:2px solid var(--laiton);position:relative}
.etape::before{counter-increment:e;content:counter(e);display:block;font-family:'Newsreader',serif;font-size:15px;font-weight:600;color:var(--laiton);margin-bottom:10px}
.etape h3{font-size:18px;margin-bottom:6px}
.etape p{font-size:15px;color:var(--gris)}
.section-sombre .etape p{color:var(--gris-clair)}

/* ---------------- pour qui ---------------- */
.qui{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.qui-liste{list-style:none}
.qui-liste li{padding:18px 0;border-top:1px solid var(--trait)}
.qui-liste li:first-child{border-top:0;padding-top:0}
.qui-liste strong{font-weight:600}
.qui-liste span{display:block;font-size:15px;color:var(--gris)}
.auteur{border:1px solid var(--trait);border-top:3px solid var(--laiton);padding:30px 28px;background:var(--blanc)}
.auteur h3{margin-bottom:12px}
.auteur p{font-size:15.5px;color:var(--gris);margin-bottom:12px}
.auteur-chiffres{display:flex;gap:28px;margin:18px 0;padding:16px 0;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.auteur-chiffres div b{display:block;font-family:'Newsreader',serif;font-size:28px;font-weight:600;line-height:1}
.auteur-chiffres div span{font-size:13px;color:var(--gris)}

/* ---------------- tarifs ---------------- */
.bascule{display:inline-flex;border:1px solid var(--encre);border-radius:3px;overflow:hidden;margin-bottom:34px}
.bascule button{padding:10px 20px;border:0;background:transparent;cursor:pointer;font:inherit;font-size:15px;font-weight:600;color:var(--encre)}
.bascule button[aria-pressed="true"]{background:var(--encre);color:#fff}
.grille-tarifs{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--trait);background:var(--blanc)}
.tarif{padding:26px 20px;border-left:1px solid var(--trait)}
.tarif:first-child{border-left:0}
.tarif.phare{background:var(--laiton-clair)}
.tarif h3{font-size:17px;margin-bottom:4px}
.tarif .cible{font-size:13.5px;color:var(--gris);min-height:40px}
.tarif .prix{font-family:'Newsreader',serif;font-size:34px;font-weight:600;line-height:1.1;margin:12px 0 2px}
.tarif .prix sup{font-size:17px;position:relative;top:-.5em}
.tarif .unite{font-size:13px;color:var(--gris)}
.tarif .etiq{display:inline-block;font-size:11.5px;font-weight:700;color:var(--laiton);margin-bottom:6px;min-height:18px}
.pied-tarifs{margin-top:26px;font-size:15px;color:var(--gris)}

/* ---------------- données ---------------- */
.colonnes-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px}
.colonnes-3>div{padding:24px 0;border-top:1px solid var(--trait)}
.colonnes-3 p{font-size:15.5px;color:var(--gris);margin-top:6px}
.section-sombre .colonnes-3>div{border-top-color:var(--trait-sombre)}

/* ---------------- appel final ---------------- */
.final{background:var(--encre);color:#fff;text-align:center;padding:80px 0}
.final h2{color:#fff}
.final p{color:var(--gris-clair);margin:0 auto 30px;max-width:48ch;font-size:18px}
.final img{width:180px;margin:0 auto 22px}
.final .actions{justify-content:center}

/* ---------------- contact ---------------- */
.contact-grille{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:start}
.champ{margin-bottom:18px}
.champ label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.champ input,.champ textarea,.champ select{width:100%;padding:12px 14px;border:1px solid var(--trait);border-radius:3px;font:inherit;font-size:16px;background:var(--blanc);color:var(--encre)}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:2px solid var(--laiton);outline-offset:0;border-color:var(--laiton)}
.champ textarea{min-height:130px;resize:vertical}
.envoyer{width:100%;padding:14px;background:var(--encre);color:#fff;border:0;border-radius:3px;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.envoyer:hover{background:var(--encre-2)}
.contact-liens{list-style:none;margin-top:22px}
.contact-liens li{padding:12px 0;border-top:1px solid var(--trait);font-size:15.5px}
.contact-liens a{text-underline-offset:3px}

/* ---------------- pages de texte ---------------- */
.entete-page{padding:56px 0 40px;border-bottom:1px solid var(--trait)}
.fil{font-size:14px;color:var(--gris);margin-bottom:16px}
.fil a{text-underline-offset:3px}
.entete-page h1{font-size:clamp(32px,4.4vw,50px);letter-spacing:-.02em;margin-bottom:14px}
.entete-page p{font-size:18.5px;color:var(--gris);max-width:62ch}
.texte{padding:52px 0 20px}
.texte h2{font-size:26px;margin:44px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--laiton)}
.texte h2:first-child{margin-top:0}
.texte h3{font-size:18px;margin:26px 0 6px}
.texte p,.texte li{color:var(--gris);font-size:16.5px}
.texte p+p{margin-top:12px}
.texte ul,.texte ol{margin:10px 0 0 22px}
.texte li{margin-bottom:7px}
.texte strong{color:var(--encre);font-weight:600}
.texte a{color:var(--encre);text-underline-offset:3px}
.texte table{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px}
.texte th,.texte td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--trait);vertical-align:top;color:var(--gris)}
.texte th{color:var(--encre);font-weight:600;font-size:13.5px}
.encadre{border-left:3px solid var(--laiton);background:var(--papier-2);padding:16px 20px;margin-top:16px}
.encadre p{margin:0;color:var(--encre)}

/* ---------------- FAQ ---------------- */
.bloc-faq{margin-bottom:50px}
.bloc-faq h2{font-size:15px;font-family:'Public Sans',sans-serif;font-weight:700;color:var(--laiton);padding-bottom:10px;border-bottom:2px solid var(--laiton);margin:0 0 6px}
details{border-bottom:1px solid var(--trait)}
summary{cursor:pointer;list-style:none;padding:19px 40px 19px 0;position:relative;font-size:17.5px;font-weight:600;line-height:1.4}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:8px;top:27px;width:11px;height:11px;border-right:2px solid var(--laiton);border-bottom:2px solid var(--laiton);transform:rotate(45deg);transition:transform .18s}
details[open] summary::after{transform:rotate(-135deg);top:31px}
summary:hover{color:var(--encre-2)}
.reponse{padding:0 40px 22px 0;color:var(--gris);font-size:16.5px}
.reponse p{color:var(--gris)}
.reponse p+p{margin-top:12px}
.reponse strong{color:var(--encre);font-weight:600}
.reponse a{color:var(--encre);text-underline-offset:3px}
.reponse ul{margin:10px 0 0 20px}
.reponse li{margin-bottom:6px}

/* ---------------- pied de page ---------------- */
footer{background:var(--papier-2);border-top:1px solid var(--trait);padding:46px 0 36px;font-size:14.5px;color:var(--gris)}
.footer-grille{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px}
.footer-grille h4{font-size:13px;font-weight:700;color:var(--encre);margin-bottom:12px;font-family:'Public Sans',sans-serif}
footer ul{list-style:none}
footer li{margin-bottom:8px}
footer a{text-decoration:none}
footer a:hover{color:var(--encre);text-decoration:underline}
.footer-mention{margin-top:32px;padding-top:18px;border-top:1px solid var(--trait);font-size:13.5px;max-width:none}

/* ---------------- bandeau cookies ---------------- */
.cookies{position:fixed;bottom:0;left:0;right:0;z-index:300;background:var(--encre);color:#fff;padding:18px 28px;display:none;box-shadow:0 -8px 30px rgba(13,34,51,.25)}
.cookies.visible{display:block}
.cookies-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.cookies p{font-size:15px;color:var(--gris-clair);max-width:70ch;margin:0}
.cookies a{color:#fff;text-underline-offset:3px}
.cookies .boutons{display:flex;gap:10px;flex-shrink:0}
.cookies button{padding:11px 20px;border-radius:3px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;white-space:nowrap}
.cookies button.oui{background:var(--laiton);border-color:var(--laiton)}
.cookies button.oui:hover{background:var(--laiton-vif)}
.cookies button.non:hover{background:rgba(255,255,255,.1)}

/* ---------------- responsive ---------------- */
@media (max-width:980px){
  .hero-grille,.recu-grille,.qui,.contact-grille,.voies{grid-template-columns:1fr;gap:44px}
  .voies{gap:22px}
  .fonctions,.colonnes-3{grid-template-columns:1fr;gap:0}
  .etapes{grid-template-columns:1fr 1fr}
  .etape{padding-right:22px}
  .grille-tarifs{grid-template-columns:1fr 1fr}
  .tarif{border-top:1px solid var(--trait)}
  .tarif:nth-child(-n+2){border-top:0}
  .tarif:nth-child(odd){border-left:0}
  .reperes ul{grid-template-columns:1fr 1fr}
  .reperes li:nth-child(3){border-left:0}
  .reperes li:nth-child(n+3){border-top:1px solid var(--trait)}
  .footer-grille{grid-template-columns:1fr 1fr}
  .nav ul{gap:16px}
  .nav ul a{font-size:14px}
  .video{box-shadow:8px 8px 0 var(--papier-2)}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap,.wrap-etroit{padding:0 20px}
  .nav{padding:10px 20px}
  .nav ul li:nth-child(-n+3){display:none}
  section{padding:58px 0}
  .hero{padding:44px 0 40px}
  .etapes,.grille-tarifs,.footer-grille{grid-template-columns:1fr}
  .tarif{border-left:0;border-top:1px solid var(--trait)}
  .tarif:first-child{border-top:0}
  .reperes ul{grid-template-columns:1fr}
  .reperes li{border-left:0;border-top:1px solid var(--trait)}
  .reperes li:first-child{border-top:0}
  .doc{padding:22px 16px 22px 36px;font-size:11.5px}
  .doc-deux{grid-template-columns:1fr}
  .puce{left:-11px}
  .actions .btn{width:100%}
  .kpi{grid-template-columns:1fr}
  .auteur-chiffres{gap:20px}
  summary{font-size:16.5px;padding-right:32px}
  .reponse{padding-right:0}
  .cookies{padding:16px 20px}
  .cookies .boutons{width:100%}
  .cookies .boutons button{flex:1}
}