/* ============================================================
   PRIMOINE — mini site boutique (promotion + vente)
   Charte V&L : ardoise + cuivre, Fraunces + Inter. Mobile d'abord.
   ============================================================ */
:root{
  --ardoise-950:#131c27;--ardoise-900:#1a2532;--ardoise-800:#243240;--ardoise-700:#33475c;--ardoise-600:#44607c;
  --ardoise-400:#7b93ad;--ardoise-300:#9fb3c8;--ardoise-200:#c9d5e1;
  --cuivre:#c17a3f;--cuivre-fonce:#a9652f;--cuivre-clair:#e0a368;--cuivre-lum:#f0c596;--cuivre-pale:#f6e7d6;
  --fond:#f4f1ec;--fond-2:#ece7df;--blanc:#fff;--texte:#1a2532;--texte-doux:#5a6b7d;--texte-pale:#8a98a7;--bord:#e7e2d9;
  --vert:#3f7d5c;--vert-pale:#e4f0e9;--rouge:#b0463c;--rouge-pale:#f7e3e1;--bleu:#3b6a8f;--bleu-pale:#e3edf5;
  --serif:'Fraunces',Georgia,serif;--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ombre:0 2px 14px rgba(26,37,50,.05);--ombre-forte:0 24px 60px rgba(19,28,39,.18);
  --rayon:18px;--max:1160px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--sans);background:var(--fond);color:var(--texte);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--cuivre-fonce)}
img,svg{display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
.cache,[hidden]{display:none!important}
.conteneur{max-width:var(--max);margin:0 auto;padding:0 16px}
@media (min-width:720px){.conteneur{padding:0 28px}}
:focus-visible{outline:2.5px solid var(--cuivre-clair);outline-offset:2px;border-radius:6px}
.lien-evitement{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;color:var(--texte);padding:10px 14px;border-radius:10px;font-weight:600}
.lien-evitement:focus{left:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- En-tête ---------- */
.entete{position:sticky;top:0;z-index:50;background:rgba(19,28,39,.94);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.sur-barre{display:none;border-bottom:1px solid rgba(255,255,255,.06);font-size:12.5px}
.sur-barre .conteneur{display:flex;align-items:center;gap:18px;height:34px;color:var(--ardoise-300)}
.sur-barre a{color:var(--ardoise-200);text-decoration:none}
.sur-barre a:hover{color:#fff}
.sur-barre .droite{margin-left:auto;display:flex;gap:18px}
.sur-barre svg{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:5px;color:var(--cuivre-clair)}
.entete .principale{display:flex;align-items:center;gap:12px;height:64px}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;flex-shrink:0}
.marque svg{width:36px;height:36px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.marque b{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:.2px}
.menu{display:none;gap:2px;margin-left:14px}
.menu a{color:var(--ardoise-200);text-decoration:none;font-size:14px;font-weight:500;padding:8px 10px;border-radius:9px;white-space:nowrap}
.menu a:hover{color:#fff;background:rgba(255,255,255,.06)}
.menu a[aria-current="page"]{color:#fff;background:rgba(224,163,104,.14);box-shadow:inset 0 -2px 0 var(--cuivre-clair)}
.entete .droite{margin-left:auto;display:flex;align-items:center;gap:8px}
.burger{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#fff;cursor:pointer}
.burger svg{width:20px;height:20px}
.tiroir{display:none;background:var(--ardoise-950);border-top:1px solid rgba(255,255,255,.06);padding:6px 16px 20px;max-height:calc(100vh - 64px);overflow-y:auto}
.tiroir.ouvert{display:block}
.tiroir a.l{display:flex;justify-content:space-between;align-items:center;color:var(--ardoise-200);text-decoration:none;font-size:16px;font-weight:500;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.tiroir a.l[aria-current="page"]{color:#fff}
.tiroir a.l[aria-current="page"]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--cuivre-clair)}
.tiroir .boutons{display:grid;gap:8px;margin-top:16px}
.tiroir .boutons .btn{width:100%}
.tiroir .mails{margin-top:16px;font-size:13px;color:var(--ardoise-400)}
.tiroir .mails a{color:var(--ardoise-200)}
.lien-haut{color:#fff;text-decoration:none;font-size:14px;font-weight:600;padding:9px 10px;border-radius:10px;white-space:nowrap}
.lien-haut:hover{background:rgba(255,255,255,.08)}
.entete .lien-haut{display:none}
@media (min-width:1120px){
  .sur-barre{display:block}
  .menu{display:flex}
  .burger{display:none}
  .tiroir{display:none!important}
}
@media (min-width:640px){.entete .lien-haut{display:inline-flex}}
@media (min-width:1120px){.entete .lien-haut{display:none}}
.btn-essai-haut{white-space:nowrap}
@media (max-width:380px){.entete .btn-essai-haut{padding:9px 11px;font-size:13px}}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;text-decoration:none;font-weight:600;font-size:15px;padding:13px 20px;border-radius:12px;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;line-height:1.2;text-align:center}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-cuivre{background:linear-gradient(135deg,var(--cuivre),var(--cuivre-clair));color:#fff;box-shadow:0 8px 22px rgba(193,122,63,.28)}
.btn-cuivre:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(193,122,63,.38)}
.btn-ardoise{background:var(--ardoise-900);color:#fff}
.btn-ardoise:hover{background:var(--ardoise-800)}
.btn-clair{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-clair:hover{background:rgba(255,255,255,.16)}
.btn-contour{background:var(--blanc);color:var(--ardoise-900);border:1.5px solid var(--bord)}
.btn-contour:hover{border-color:var(--cuivre-clair);color:var(--cuivre-fonce)}
.btn-petit{padding:9px 14px;font-size:13.5px;border-radius:10px}
.btn-grand{padding:16px 24px;font-size:16px;border-radius:14px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:520px){.actions.pleine .btn{flex:1 1 100%}}

/* ---------- Héros et en-têtes de page ---------- */
.heros,.tete-page{color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(90% 70% at 8% 0%,#2d4257 0%,transparent 55%),radial-gradient(70% 70% at 100% 100%,#22344a 0%,transparent 55%),linear-gradient(165deg,var(--ardoise-900) 0%,var(--ardoise-950) 100%)}
.heros::after,.tete-page::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(224,163,104,.35),transparent)}
.heros .conteneur{display:grid;gap:40px;padding-top:44px;padding-bottom:64px;align-items:center}
@media (min-width:980px){.heros .conteneur{grid-template-columns:1.05fr .95fr;padding-top:72px;padding-bottom:92px}}
.tete-page .conteneur{padding-top:40px;padding-bottom:44px}
@media (min-width:900px){.tete-page .conteneur{padding-top:60px;padding-bottom:64px}}
.surtitre{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;color:var(--cuivre-lum)}
.surtitre::before{content:"";width:22px;height:1.5px;background:var(--cuivre-clair)}
.heros h1,.tete-page h1{font-family:var(--serif);font-weight:600;line-height:1.06;letter-spacing:-.6px;margin:16px 0 16px}
.heros h1{font-size:clamp(34px,7.4vw,58px)}
.tete-page h1{font-size:clamp(30px,6vw,48px);max-width:820px}
.heros h1 em,.tete-page h1 em{font-style:normal;color:var(--cuivre-lum)}
.chapeau{font-size:clamp(16px,2.2vw,18.5px);color:#d3dce6;max-width:620px}
.heros .actions,.tete-page .actions{margin-top:26px}
.confiance{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px;font-size:13px;color:var(--ardoise-300)}
.confiance span{display:inline-flex;align-items:center;gap:7px}
.confiance svg{width:15px;height:15px;color:var(--cuivre-clair)}
.fil{font-size:13px;color:var(--ardoise-300);margin-bottom:6px}
.fil a{color:var(--ardoise-200);text-decoration:none}
.fil a:hover{color:#fff}

/* maquette de l'appli (illustration sobre, sans capture) */
.maquette{position:relative;max-width:540px;margin:0 auto;width:100%}
.ecran{background:var(--fond);border-radius:20px;box-shadow:0 40px 90px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);overflow:hidden;display:grid;grid-template-columns:92px 1fr;min-height:330px;color:var(--texte)}
.ecran .cote{background:linear-gradient(180deg,var(--ardoise-900),var(--ardoise-950));padding:14px 10px;display:flex;flex-direction:column;gap:7px}
.ecran .cote i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.12)}
.ecran .cote i.on{background:linear-gradient(90deg,var(--cuivre),var(--cuivre-clair))}
.ecran .cote .lg{width:28px;height:28px;border-radius:8px;margin-bottom:8px}
.ecran .corps{padding:16px;display:grid;gap:10px;align-content:start}
.ecran .titre{font-family:var(--serif);font-weight:600;font-size:16px}
.ecran .tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ecran .tuile{background:#fff;border:1px solid var(--bord);border-radius:11px;padding:9px}
.ecran .tuile small{display:block;font-size:9.5px;color:var(--texte-doux);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.ecran .tuile b{font-family:var(--serif);font-size:18px;font-weight:600}
.ecran .tuile b.ok{color:var(--vert)} .ecran .tuile b.att{color:var(--rouge)}
.ecran .liste{background:#fff;border:1px solid var(--bord);border-radius:11px;padding:4px 10px}
.ecran .ligne{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--fond);font-size:11.5px}
.ecran .ligne:last-child{border-bottom:none}
.ecran .pastille{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ecran .ligne span:last-child{margin-left:auto;font-weight:600;white-space:nowrap}
.ecran .barre{height:54px;background:#fff;border:1px solid var(--bord);border-radius:11px;padding:8px 10px;display:flex;align-items:flex-end;gap:5px}
.ecran .barre i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--cuivre-clair),var(--cuivre))}
.telephone{position:absolute;right:-6px;bottom:-26px;width:132px;background:var(--ardoise-950);border-radius:22px;padding:7px;box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1)}
.telephone .t-ecran{background:var(--fond);border-radius:16px;padding:10px 9px;display:grid;gap:7px}
.telephone .t-ecran b{font-family:var(--serif);font-size:12px}
.telephone .t-carte{background:#fff;border-radius:9px;border:1px solid var(--bord);padding:7px;font-size:9px;color:var(--texte-doux)}
.telephone .t-carte strong{display:block;color:var(--texte);font-size:11px}
@media (max-width:560px){.telephone{display:none}.ecran{grid-template-columns:56px 1fr}.ecran .corps{padding:12px}}

/* ---------- Sections ---------- */
section.bloc{padding:60px 0}
@media (min-width:900px){section.bloc{padding:88px 0}}
.bloc.blanc{background:var(--blanc)}
.bloc.sombre{background:linear-gradient(165deg,var(--ardoise-900),var(--ardoise-950));color:#fff}
.tete{max-width:720px;margin-bottom:32px}
.tete.centre{margin-left:auto;margin-right:auto;text-align:center}
.tete .surtitre{color:var(--cuivre-fonce)}
.sombre .tete .surtitre{color:var(--cuivre-lum)}
.tete h2{font-family:var(--serif);font-weight:600;font-size:clamp(27px,4.6vw,40px);line-height:1.12;letter-spacing:-.4px;margin:12px 0 12px}
.tete p{font-size:16.5px;color:var(--texte-doux)}
.sombre .tete p{color:var(--ardoise-200)}
.grille{display:grid;gap:16px}
@media (min-width:640px){.g2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:640px) and (max-width:899px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
.carte{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--rayon);padding:22px;box-shadow:var(--ombre)}
.bloc.blanc .carte{background:var(--fond)}
.carte h3{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.25;margin-bottom:8px}
.carte p{color:var(--texte-doux);font-size:14.5px}
a.carte{text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s,border-color .15s}
a.carte:hover{transform:translateY(-2px);border-color:var(--cuivre-clair);box-shadow:var(--ombre-forte)}
a.carte .suite{margin-top:auto;padding-top:14px;font-weight:600;font-size:14px;color:var(--cuivre-fonce)}
.ico{width:44px;height:44px;border-radius:12px;background:var(--cuivre-pale);color:var(--cuivre-fonce);display:grid;place-items:center;margin-bottom:14px;flex-shrink:0}
.ico svg{width:22px;height:22px}
.puces{list-style:none;display:grid;gap:7px;margin-top:12px}
.puces li{position:relative;padding-left:22px;font-size:14.5px;color:var(--texte-doux)}
.puces li::before{content:"";position:absolute;left:3px;top:7px;width:9px;height:5px;border-left:2px solid var(--vert);border-bottom:2px solid var(--vert);transform:rotate(-45deg)}
.puces li b{color:var(--texte)}
.sombre .puces li{color:var(--ardoise-200)} .sombre .puces li b{color:#fff}
.badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:20px;background:var(--cuivre-pale);color:var(--cuivre-fonce);white-space:nowrap;vertical-align:middle}
.badge.bleu{background:var(--bleu-pale);color:var(--bleu)}
.badge.vert{background:var(--vert-pale);color:var(--vert)}
.badge.gris{background:var(--fond-2);color:var(--texte-doux)}
.chargement{color:var(--texte-pale);font-size:14px;padding:30px 0;text-align:center}
.sombre .chargement{color:var(--ardoise-400)}
.note{font-size:13px;color:var(--texte-doux);margin-top:16px}
.sombre .note{color:var(--ardoise-300)}
.encart{background:var(--cuivre-pale);border:1px solid #efd5b8;border-radius:14px;padding:14px 16px;font-size:14.5px;color:#6f4a28}
.encart.bleu{background:var(--bleu-pale);border-color:#cddcea;color:#2b4e69}
.encart.vert{background:var(--vert-pale);border-color:#cde3d6;color:#2c5a42}
.encart.rouge{background:var(--rouge-pale);border-color:#ecc9c5;color:#8a332b}
.encart b{color:inherit}

/* chiffres-clés */
.cles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--bord);border:1px solid var(--bord);border-radius:var(--rayon);overflow:hidden}
@media (min-width:800px){.cles{grid-template-columns:repeat(4,1fr)}}
.cles div{background:var(--blanc);padding:22px 18px}
.cles b{display:block;font-family:var(--serif);font-size:28px;font-weight:600;color:var(--ardoise-900);line-height:1.1;margin-bottom:4px}
.cles span{font-size:13.5px;color:var(--texte-doux)}

/* étapes « comment ça marche » */
.etapes3{display:grid;gap:16px;counter-reset:e}
@media (min-width:860px){.etapes3{grid-template-columns:repeat(3,1fr)}}
.etapes3 .carte{position:relative;padding-top:26px}
.etapes3 .carte::before{counter-increment:e;content:counter(e);position:absolute;top:-16px;left:22px;width:34px;height:34px;border-radius:50%;background:var(--ardoise-900);color:#fff;font-family:var(--serif);font-weight:600;display:grid;place-items:center;box-shadow:0 0 0 4px var(--fond)}
.bloc.blanc .etapes3 .carte::before{box-shadow:0 0 0 4px var(--blanc)}

/* profils */
.profil .px{font-family:var(--serif);font-size:15px;color:var(--texte);margin-top:12px}
.profil .px b{font-size:22px;font-weight:600}

/* systèmes */
.sys{display:flex;flex-direction:column}
.sys .schema{height:88px;border-radius:12px;background:var(--fond);margin:-4px 0 16px;display:grid;place-items:center;color:var(--ardoise-700)}
.bloc.blanc .sys .schema{background:var(--blanc)}
.sys .schema svg{width:100%;height:80px}
.sys .pour{margin-top:auto;padding-top:14px;font-size:13.5px;color:var(--texte-doux);border-top:1px dashed var(--bord)}
.sys .pour b{color:var(--texte)}

/* SAV */
.sav{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.sav{grid-template-columns:1fr 1fr}}
.citation{font-family:var(--serif);font-size:clamp(22px,3vw,30px);line-height:1.3;font-weight:500}
.citation em{font-style:normal;color:var(--cuivre-lum)}
.etapes-sav{display:grid;gap:12px}
.etapes-sav > div{display:flex;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:16px}
.etapes-sav b{display:block;font-size:15px;margin-bottom:2px}
.etapes-sav p{font-size:13.5px;color:var(--ardoise-200)}
.etapes-sav .ico{background:rgba(224,163,104,.14);color:var(--cuivre-lum);margin:0}

/* ---------- Fonctionnalités ---------- */
.puces-nav{position:sticky;top:64px;z-index:20;background:rgba(244,241,236,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--bord)}
@media (min-width:1120px){.puces-nav{top:98px}}
.puces-nav .conteneur{display:flex;gap:6px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none}
.puces-nav .conteneur::-webkit-scrollbar{display:none}
.puces-nav a{flex-shrink:0;border:1.5px solid var(--bord);background:var(--blanc);color:var(--texte-doux);font-weight:600;font-size:13.5px;padding:8px 14px;border-radius:30px;text-decoration:none}
.puces-nav a:hover,.puces-nav a.actif{border-color:var(--ardoise-900);background:var(--ardoise-900);color:#fff}
.theme{display:grid;gap:28px;align-items:center;padding:56px 0;border-bottom:1px solid var(--bord)}
.theme:last-child{border-bottom:none}
@media (min-width:940px){.theme{grid-template-columns:1fr 1fr;gap:56px}.theme.inverse .illu{order:-1}}
.theme h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,4vw,36px);line-height:1.14;margin:10px 0 12px}
.theme > div > p{color:var(--texte-doux);font-size:16px}
.theme .surtitre{color:var(--cuivre-fonce)}
.mods{display:grid;gap:8px;margin-top:20px}
.mod{display:flex;gap:12px;align-items:flex-start;background:var(--blanc);border:1px solid var(--bord);border-radius:13px;padding:12px 14px}
.mod .point{width:8px;height:8px;border-radius:50%;background:var(--cuivre);margin-top:7px;flex-shrink:0}
.mod b{font-size:14.5px;font-weight:600}
.mod p{font-size:13.5px;color:var(--texte-doux)}
.illu{background:linear-gradient(165deg,var(--ardoise-900),var(--ardoise-950));border-radius:22px;padding:22px;box-shadow:var(--ombre-forte);color:var(--texte)}
.illu .fen{background:var(--fond);border-radius:14px;padding:14px;display:grid;gap:9px}
.illu .fen .t{font-family:var(--serif);font-weight:600;font-size:15px;display:flex;justify-content:space-between;align-items:center}
.illu .ln{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--bord);border-radius:10px;padding:9px 11px;font-size:12.5px}
.illu .ln .d{margin-left:auto;font-weight:600;white-space:nowrap}
.illu .ln .pas{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.illu .grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.illu .kpi{background:#fff;border:1px solid var(--bord);border-radius:10px;padding:10px}
.illu .kpi small{display:block;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--texte-doux);font-weight:600}
.illu .kpi b{font-family:var(--serif);font-size:20px;font-weight:600}
.illu .jauge{height:8px;background:var(--fond-2);border-radius:5px;overflow:hidden}
.illu .jauge i{display:block;height:100%;background:linear-gradient(90deg,var(--cuivre),var(--cuivre-clair));border-radius:5px}
.illu .courbe{background:#fff;border:1px solid var(--bord);border-radius:10px;padding:8px}
.illu .courbe svg{width:100%;height:80px}
.illu .bulle{max-width:80%;padding:8px 11px;border-radius:12px;font-size:12.5px}
.illu .bulle.g{background:#fff;border:1px solid var(--bord)}
.illu .bulle.d{background:var(--ardoise-900);color:#fff;margin-left:auto}
.en-plus{display:grid;gap:14px}
@media (min-width:700px){.en-plus{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.en-plus{grid-template-columns:repeat(3,1fr)}}

/* ---------- Packs ---------- */
.types{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:26px}
@media (min-width:800px){.types{grid-template-columns:repeat(4,1fr)}}
.type-btn{text-align:left;border:1.5px solid var(--bord);background:var(--blanc);color:var(--texte);border-radius:14px;padding:14px;cursor:pointer;transition:all .15s;font:inherit}
.type-btn small{display:block;color:var(--texte-doux);font-size:12.5px;margin-top:2px}
.type-btn b{font-size:15px}
.type-btn:hover{border-color:var(--cuivre-clair)}
.type-btn[aria-pressed="true"]{border-color:var(--ardoise-900);background:var(--ardoise-900);color:#fff}
.type-btn[aria-pressed="true"] small{color:var(--ardoise-300)}
.packs{display:grid;gap:16px}
@media (min-width:700px){.packs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.packs{grid-template-columns:repeat(5,1fr);gap:12px}}
.pack{background:var(--blanc);color:var(--texte);border-radius:var(--rayon);padding:22px 18px;display:flex;flex-direction:column;position:relative;border:1px solid var(--bord);box-shadow:var(--ombre)}
.pack.vedette{box-shadow:0 0 0 2px var(--cuivre-clair),var(--ombre-forte)}
.pack .ruban{position:absolute;top:-11px;left:18px;background:linear-gradient(135deg,var(--cuivre),var(--cuivre-clair));color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:20px}
.pack h3{font-family:var(--serif);font-size:21px;font-weight:600}
.pack .resume{font-size:13.5px;color:var(--texte-doux);min-height:40px;margin-top:4px}
.pack .prix{margin:14px 0 2px;font-family:var(--serif);font-size:30px;font-weight:600;line-height:1.05}
.pack .prix small{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--texte-doux)}
.pack .tvac{font-size:12.5px;color:var(--texte-doux)}
.pack .limites{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:14px 0;padding:12px;background:var(--fond);border-radius:12px}
.pack .limites div{font-size:12px;color:var(--texte-doux)}
.pack .limites b{display:block;font-size:15px;color:var(--texte)}
.pack .contenu{font-size:13px;color:var(--texte-doux);flex:1}
.pack .contenu .tout{font-weight:600;color:var(--texte);margin-bottom:6px}
.pack .contenu ul{list-style:none;display:grid;gap:5px}
.pack .contenu li{position:relative;padding-left:18px}
.pack .contenu li::before{content:"+";position:absolute;left:2px;top:-1px;color:var(--cuivre);font-weight:700}
.pack .contenu li.srv::before{content:"✓";color:var(--vert);font-size:12px}
.pack .contenu .sep{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--texte-pale);margin:12px 0 6px}
.pack .bas{display:grid;gap:8px;margin-top:16px}
.pack .bas .btn{width:100%}
.mini-badge{font-size:9.5px;padding:2px 6px}

/* ---------- Formulaires (calculateur, commande, contact) ---------- */
.mise2{display:grid;gap:22px;align-items:start}
@media (min-width:980px){.mise2{grid-template-columns:minmax(0,1fr) 400px}}
.etape{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--rayon);padding:20px;margin-bottom:14px}
@media (min-width:600px){.etape{padding:24px}}
.etape > h2,.etape > h3{font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px;margin-bottom:6px;font-family:var(--sans)}
.etape > .aide{font-size:13.5px;color:var(--texte-doux);margin-bottom:14px}
.num{width:28px;height:28px;border-radius:50%;background:var(--ardoise-900);color:#fff;font-family:var(--serif);font-size:13px;font-weight:600;display:grid;place-items:center;flex-shrink:0}
fieldset{border:none;min-width:0}
legend{font-weight:600;font-size:14.5px;margin-bottom:10px;padding:0}
.q{margin-top:20px}
.q:first-of-type{margin-top:8px}
.choix{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.choix.large{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt .boite{display:block;height:100%;border:1.5px solid var(--bord);background:var(--blanc);border-radius:12px;padding:12px 13px;transition:all .15s}
.opt:hover .boite{border-color:var(--cuivre-clair)}
.opt input:checked + .boite{border-color:var(--cuivre);box-shadow:inset 0 0 0 1px var(--cuivre);background:#fffaf4}
.opt input:focus-visible + .boite{outline:2.5px solid var(--cuivre-clair);outline-offset:2px}
.opt input:disabled + .boite{opacity:.45;cursor:not-allowed}
.opt b{display:block;font-size:14px}
.opt small{display:block;font-size:12.5px;color:var(--texte-doux);margin-top:2px}
.opt.case .boite{padding-left:40px;position:relative}
.opt.case .boite::before{content:"";position:absolute;left:13px;top:13px;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--ardoise-300);background:#fff}
.opt.case input:checked + .boite::before{background:var(--cuivre);border-color:var(--cuivre)}
.opt.case input:checked + .boite::after{content:"";position:absolute;left:19px;top:16px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.compteur{display:flex;align-items:center;gap:0;border:1.5px solid var(--bord);border-radius:12px;background:#fff;width:max-content;overflow:hidden}
.compteur button{width:44px;height:46px;border:none;background:var(--fond);cursor:pointer;font-size:20px;font-weight:600;color:var(--ardoise-900)}
.compteur button:hover{background:var(--fond-2)}
.compteur input{width:84px;height:46px;border:none;text-align:center;font-weight:700;font-size:17px;-moz-appearance:textfield;appearance:textfield}
.compteur input::-webkit-outer-spin-button,.compteur input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.nombres{display:grid;gap:16px}
@media (min-width:600px){.nombres{grid-template-columns:1fr 1fr}}
.nombres label{display:block;font-weight:600;font-size:14px;margin-bottom:8px}
.nombres .s{display:block;font-size:12.5px;color:var(--texte-doux);font-weight:400;margin-top:1px}
.champ{margin-bottom:14px}
.champ label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px}
.champ label .fac{font-weight:400;color:var(--texte-pale)}
.champ input,.champ select,.champ textarea{width:100%;border:1.5px solid var(--bord);border-radius:11px;padding:12px 13px;background:#fff;font-size:16px;transition:border-color .15s}
.champ textarea{min-height:96px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--cuivre);box-shadow:0 0 0 3px rgba(193,122,63,.15)}
.champ .aide{font-size:12.5px;color:var(--texte-doux);margin-top:5px}
.champ.erreur input,.champ.erreur select{border-color:var(--rouge)}
.champ .msg-err{font-size:12.5px;color:var(--rouge);margin-top:5px;display:none}
.champ.erreur .msg-err{display:block}
.rangee{display:grid;gap:0 12px}
@media (min-width:560px){.rangee{grid-template-columns:1fr 1fr}.rangee.r3{grid-template-columns:1fr 2fr}}
.mdp-boite{position:relative}
.mdp-boite input{padding-right:92px}
.mdp-boite button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:var(--fond);border-radius:8px;padding:7px 10px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--texte-doux)}
.accord{display:flex;gap:12px;align-items:flex-start;font-size:14px;cursor:pointer;padding:12px 14px;border:1.5px solid var(--bord);border-radius:12px;background:#fff}
.accord input{width:20px;height:20px;margin-top:1px;accent-color:var(--cuivre);flex-shrink:0}
.accord.erreur{border-color:var(--rouge)}
.bascule{display:inline-flex;background:var(--fond-2);border-radius:11px;padding:4px;gap:4px}
.bascule button{border:none;background:none;padding:8px 14px;border-radius:8px;font-weight:600;font-size:13.5px;color:var(--texte-doux);cursor:pointer}
.bascule button[aria-pressed="true"]{background:var(--blanc);color:var(--texte);box-shadow:0 2px 8px rgba(26,37,50,.08)}
.bascule .eco{font-size:11px;color:var(--vert);font-weight:700;margin-left:4px}
.sombre-bascule{background:rgba(255,255,255,.08)}
.sombre-bascule button{color:var(--ardoise-300)}
.sombre-bascule button[aria-pressed="true"]{background:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.sombre-bascule .eco{color:#9ed8b6}

#boutonCommander{flex-wrap:wrap;row-gap:2px}
#boutonCommander span{white-space:nowrap}
#montantBouton{font-weight:500;opacity:.95}
#montantBouton:not(:empty)::before{content:"· "}
@media (max-width:420px){#montantBouton{flex-basis:100%;font-size:14px}#montantBouton:not(:empty)::before{content:""}}

/* panneau de résultat / récapitulatif */
.recap{position:sticky;top:84px;background:linear-gradient(165deg,var(--ardoise-900),var(--ardoise-950));color:#fff;border-radius:var(--rayon);padding:22px;box-shadow:var(--ombre-forte)}
@media (min-width:1120px){.recap{top:114px}}
@media (max-width:979px){.recap{position:static}}
.recap h2,.recap h3{font-family:var(--serif);font-weight:600;font-size:21px;margin-bottom:4px}
.recap .sel{font-size:13px;color:var(--ardoise-300);margin-bottom:14px}
.recap .grand-pack{font-family:var(--serif);font-size:32px;font-weight:600;line-height:1.05;color:var(--cuivre-lum);margin:10px 0 2px}
.recap .lignes{display:grid;gap:8px;font-size:13.5px;border-top:1px solid rgba(255,255,255,.1);padding-top:14px;margin-top:14px}
.recap .lignes > div{display:flex;gap:10px;justify-content:space-between;color:var(--ardoise-200)}
.recap .lignes > div span:last-child{color:#fff;font-weight:600;white-space:nowrap;text-align:right}
.recap .lignes small{display:block;color:var(--ardoise-400);font-size:12px}
.recap .total{margin-top:14px;border-top:1px solid rgba(255,255,255,.1);padding-top:14px;display:grid;gap:10px}
.recap .total .t{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.recap .total .t small{display:block;font-size:12px;color:var(--ardoise-400)}
.recap .total .t b{font-family:var(--serif);font-size:22px;font-weight:600;white-space:nowrap}
.recap .total .t b.grand{font-size:30px;color:var(--cuivre-lum)}
.recap .total .t em{display:block;font-style:normal;font-size:12px;color:var(--ardoise-300);text-align:right}
.recap .pourquoi{list-style:none;display:grid;gap:8px;margin-top:14px;font-size:13.5px;color:var(--ardoise-200)}
.recap .pourquoi li{position:relative;padding-left:22px}
.recap .pourquoi li::before{content:"";position:absolute;left:3px;top:6px;width:9px;height:5px;border-left:2px solid var(--cuivre-clair);border-bottom:2px solid var(--cuivre-clair);transform:rotate(-45deg)}
.recap .pourquoi li.info::before{content:"i";border:none;transform:none;left:2px;top:1px;width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.12);font-size:10px;font-weight:700;display:grid;place-items:center;color:var(--cuivre-lum);font-style:italic}
.recap .bloc-sys{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 13px;margin-top:14px;font-size:13.5px;color:var(--ardoise-200)}
.recap .bloc-sys b{color:#fff}
.recap .actions{display:grid;gap:8px;margin-top:18px}
.recap .actions .btn{width:100%}
.recap .mention{font-size:11.5px;color:var(--ardoise-400);margin-top:12px}
.recap .titre-sec{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ardoise-400);margin-top:16px}

/* barre « pack conseillé » (calculateur, mobile) */
.barre-conseil{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ardoise-900);color:#fff;border-radius:14px;padding:10px 10px 10px 16px;box-shadow:var(--ombre-forte);font-size:14px;transition:transform .2s,opacity .2s}
.barre-conseil b{color:var(--cuivre-lum)}
.barre-conseil.cachee{transform:translateY(140%);opacity:0;pointer-events:none}
@media (min-width:980px){.barre-conseil{display:none}}

/* confirmation de commande */
.confirm{max-width:860px;margin:0 auto}
.confirm .entete-ok{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px}
.confirm .rond-ok{width:52px;height:52px;border-radius:50%;background:var(--vert-pale);color:var(--vert);display:grid;place-items:center;flex-shrink:0}
.confirm .rond-ok svg{width:28px;height:28px}
.confirm h2{font-family:var(--serif);font-weight:600;font-size:clamp(25px,4vw,34px);line-height:1.15}
.paiement{display:grid;gap:18px;align-items:start}
@media (min-width:800px){.paiement{grid-template-columns:1fr 260px}}
.coord{background:#fff;border:1px solid var(--bord);border-radius:var(--rayon);overflow:hidden}
.coord .ligne{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:14px 16px;border-bottom:1px solid var(--bord)}
.coord .ligne:last-child{border-bottom:none}
.coord .ligne .lib{width:100%;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--texte-pale)}
.coord .ligne .val{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:17px;font-weight:600;word-break:break-all;flex:1;min-width:0}
.coord .ligne .val.montant{font-family:var(--serif);font-size:26px}
.copier{border:1.5px solid var(--bord);background:var(--fond);border-radius:9px;padding:8px 12px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--ardoise-900);flex-shrink:0}
.copier:hover{border-color:var(--cuivre-clair)}
.copier svg{width:15px;height:15px}
.copier.ok{background:var(--vert-pale);border-color:#b9dcc8;color:var(--vert)}
.qr{background:#fff;border:1px solid var(--bord);border-radius:var(--rayon);padding:18px;text-align:center}
.qr #qrCode{display:grid;place-items:center;min-height:200px}
.qr #qrCode img,.qr #qrCode canvas{margin:0 auto;width:200px;height:200px;image-rendering:pixelated}
.qr p{font-size:12.5px;color:var(--texte-doux);margin-top:10px}
.suite-etapes{list-style:none;display:grid;gap:12px;margin-top:22px}
.suite-etapes li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--bord);border-radius:14px;padding:14px 16px;font-size:14.5px}
.suite-etapes li .num{background:var(--cuivre)}
.suite-etapes b{display:block}
.suite-etapes span{color:var(--texte-doux)}

/* FAQ */
.faq{max-width:840px}
.faq details{background:var(--blanc);border:1px solid var(--bord);border-radius:14px;margin-bottom:10px;padding:0 18px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;padding:17px 0;font-weight:600;font-size:15.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;line-height:1;color:var(--cuivre);font-weight:400;flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px;color:var(--texte-doux);font-size:14.5px}
.faq h3{font-family:var(--serif);font-weight:600;font-size:20px;margin:30px 0 12px}
.faq h3:first-child{margin-top:0}

/* textes juridiques */
.texte-legal{max-width:820px}
.texte-legal h2{font-family:var(--serif);font-weight:600;font-size:22px;margin:32px 0 10px}
.texte-legal h2:first-child{margin-top:0}
.texte-legal p,.texte-legal li{color:var(--texte-doux);font-size:15px;margin-bottom:10px}
.texte-legal ul{padding-left:20px}

/* appel final */
.final{text-align:center}
.final h2{font-family:var(--serif);font-weight:600;font-size:clamp(27px,4.6vw,42px);line-height:1.12;margin-bottom:14px}
.final p{color:var(--ardoise-200);font-size:16.5px;max-width:620px;margin:0 auto 26px}
.final .actions{justify-content:center}

/* ---------- Pied de page ---------- */
footer.pied{background:var(--ardoise-950);color:var(--ardoise-400);padding:44px 0 calc(28px + env(safe-area-inset-bottom));font-size:13.5px}
footer.pied .conteneur{display:grid;gap:26px}
@media (min-width:640px){footer.pied .conteneur{grid-template-columns:1fr 1fr}}
@media (min-width:980px){footer.pied .conteneur{grid-template-columns:1.8fr 1fr 1fr 1fr 1.5fr}}
footer.pied .tc{color:#fff;display:block;margin-bottom:8px;font-size:14px;font-weight:600}
footer.pied a{display:block;color:var(--ardoise-300);text-decoration:none;padding:4px 0}
footer.pied a:hover{color:#fff}
footer.pied .marque{display:inline-flex;margin-bottom:12px}
footer.pied .marque svg{width:32px;height:32px}
footer.pied .engagements{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
footer.pied .engagements span{font-size:11.5px;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:4px 9px;color:var(--ardoise-300)}
footer.pied .bas-pied{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.07);padding-top:18px;font-size:12.5px;display:flex;flex-wrap:wrap;gap:6px 16px}
footer.pied .bas-pied a{display:inline;padding:0}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,a.carte{transition:none}}
@media print{
  .entete,footer.pied,.puces-nav,.recap .actions{display:none!important}
  body{background:#fff}
}

/* Bascule Particulier / Professionnel */
.bascule-client{display:inline-flex;background:rgba(255,255,255,.08);border-radius:999px;padding:3px;gap:2px;margin-right:10px;vertical-align:middle}
.bascule-client button{font:600 12.5px var(--sans,Inter,sans-serif);border:0;background:none;color:inherit;opacity:.75;padding:4px 12px;border-radius:999px;cursor:pointer}
.bascule-client button[aria-pressed="true"]{background:#c17a3f;color:#fff;opacity:1}
#tiroir .bascule-client{background:rgba(26,37,50,.08);color:#1a2532}
.choix-statut{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 16px}
.choix-statut button{font:inherit;text-align:left;border:1.5px solid #e7e2d9;background:#fff;border-radius:12px;padding:12px 14px;cursor:pointer}
.choix-statut button b{display:block;font-size:15px}
.choix-statut button small{color:#5a6b7d;font-size:12.5px}
.choix-statut button[aria-pressed="true"]{border-color:#c17a3f;background:#fff8f0;box-shadow:0 0 0 3px rgba(193,122,63,.15)}

/* ---------- Vidéo de présentation (Stella) ---------- */
.video-stella{position:relative;margin:0;width:100%;max-width:640px;justify-self:center;border-radius:20px;overflow:hidden;
  background:var(--ardoise-950);box-shadow:0 40px 90px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);aspect-ratio:16/9}
.video-stella video{display:block;width:100%;height:100%;object-fit:cover;background:var(--ardoise-950)}
.video-stella figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.vs-son,.vs-lecture{position:absolute;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:600 14px/1 var(--sans,inherit);
  color:#fff;background:rgba(19,28,39,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:999px;padding:10px 15px 10px 12px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);transition:background .2s,transform .2s}
.vs-son{top:12px;right:12px}
.vs-son:hover,.vs-lecture:hover{background:rgba(19,28,39,.92);transform:translateY(-1px)}
.vs-son:focus-visible,.vs-lecture:focus-visible{outline:2px solid var(--cuivre-lum);outline-offset:2px}
.vs-son svg{width:18px;height:18px}
.vs-son .on{display:none}.vs-son[aria-pressed="true"] .on{display:inline}.vs-son[aria-pressed="true"] .off{display:none}
.vs-son[aria-pressed="false"]{background:var(--cuivre);animation:vsAppel 2.4s ease-in-out 1.2s 3}
.vs-son[aria-pressed="false"]:hover{background:var(--cuivre-lum)}
@keyframes vsAppel{0%,100%{box-shadow:0 0 0 0 rgba(224,163,104,.55)}50%{box-shadow:0 0 0 10px rgba(224,163,104,0)}}
.vs-lecture{left:50%;bottom:16px;transform:translateX(-50%);padding:14px 22px 14px 18px;font-size:15px;background:var(--cuivre)}
.vs-lecture:hover{transform:translate(-50%,-2px);background:var(--cuivre-lum)}
.vs-lecture svg{width:18px;height:18px}
.vs-lecture[hidden]{display:none}
@media (max-width:979px){.heros .video-stella{order:-1}}
@media (max-width:520px){.video-stella{border-radius:14px}.vs-son{top:8px;right:8px;font-size:13px;padding:8px 12px 8px 10px}}
@media (prefers-reduced-motion:reduce){.vs-son{animation:none}}
@media (min-width:980px){.heros .conteneur:has(.video-stella){grid-template-columns:.92fr 1.08fr}.heros .video-stella{max-width:680px}}