/* ============================================================
   NAQSHA Fidélité — page d'accueil (étape 1C, lot 1)
   ------------------------------------------------------------
   Maquette hybride 1B validée : hero « démonstration » (direction
   B) puis corps éditorial (direction A). S'appuie sur naqsha.css
   pour les jetons et les composants ; ne contient que la mise en
   page propre à l'accueil.
   ============================================================ */
.acc{background:var(--blanc)}
.zone--etroite{max-width:860px}

/* ---------- en-tête sur nuit ---------- */
.acc-tete{background:var(--nuit);position:sticky;top:0;z-index:40}
.acc-tete__in{display:flex;align-items:center;gap:36px;height:72px;border-bottom:1px solid var(--filet-nuit)}
.acc-nav{display:flex;gap:26px;margin-right:auto}
.acc-nav a{white-space:nowrap;color:var(--sur-nuit-2);text-decoration:none;font-size:15px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent;transition:color var(--duree),border-color var(--duree)}
.acc-nav a:hover{color:#fff;border-bottom-color:var(--or)}
.acc-nav__mobile{display:none}
.acc-tete__act{display:flex;align-items:center;gap:18px}
.acc-lien-cx{color:#fff;text-decoration:none;font-weight:500;font-size:15px}
.acc-lien-cx:hover{text-decoration:underline;text-underline-offset:4px}
.acc-burger{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r2);background:transparent;color:#fff;align-items:center;justify-content:center;cursor:pointer}

/* ---------- hero ---------- */
.hero{background-color:var(--nuit);background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px;color:#fff;padding:64px 0 72px}
.hero__grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.hero__etiq{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:var(--rp);background:rgba(221,170,52,.14);color:var(--or);font-size:13.5px;font-weight:600}
.hero__etiq-court{display:none}
.hero h1{color:#fff;font-size:clamp(40px,5vw,68px);font-weight:800;letter-spacing:-.04em;line-height:1.02;margin-top:22px}
.hero__chapo{color:var(--sur-nuit-2);font-size:18.5px;line-height:1.6;margin-top:20px;max-width:30em}
.hero__act{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero__espace{color:#fff;font-size:15.5px;min-height:44px;padding:0 2px}
.hero__espace .ic{transition:transform var(--duree) var(--courbe)}
.hero__espace:hover .ic{transform:translateY(2px)}
.hero__act{align-items:center;column-gap:26px}

/* démonstration : recherche → fiche → montant → enregistrement → Wallet */
.demo{display:grid;grid-template-columns:1fr 212px;grid-template-rows:auto auto;align-items:end}
.demo__tablette{grid-column:1 / span 2;grid-row:1;width:86%;background:linear-gradient(160deg,#1B2D55,#101E3F);border-radius:26px;padding:10px;box-shadow:0 40px 80px -34px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.1);outline:none}
.demo__barre{display:flex;align-items:center;gap:12px;background:var(--fond);border-radius:17px 17px 0 0;padding:10px 16px;font-size:12.5px;color:var(--texte-2);font-weight:600;border-bottom:1px solid var(--filet)}
.demo__pts{display:flex;gap:5px}
.demo__pts i{width:8px;height:8px;border-radius:50%;background:var(--filet-fort)}
.demo__corps{background:#fff;border-radius:0 0 17px 17px;padding:20px 172px 22px 24px;color:var(--encre);display:grid;min-height:356px;overflow:hidden}
.demo__vue{grid-area:1 / 1;display:flex;flex-direction:column;gap:10px;transition:opacity .28s var(--courbe),transform .32s var(--courbe),visibility 0s linear 0s}
.demo__vue.off{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--courbe),transform .24s var(--courbe),visibility 0s linear .24s}
.demo__vue[data-vue="recherche"].off{transform:translateX(-16px)}
.demo__vue[data-vue="fiche"].off{transform:translateX(16px)}

.demo__cherche{display:flex;align-items:center;gap:10px;height:50px;border:1.5px solid var(--or);border-radius:var(--r2);padding:0 14px;box-shadow:0 0 0 4px var(--or-voile);color:var(--texte-3);font-size:17px}
.demo__tape{display:inline-flex;align-items:center;color:var(--encre);font-weight:500}
.demo__indice{color:var(--texte-3)}
.demo__tape:not(:empty) + .demo__indice{display:none}
.demo__curseur{display:inline-block;width:1.5px;height:1.15em;background:var(--bleu);margin-left:1px;opacity:0}
.demo__vue.frappe .demo__curseur,.demo__montant.frappe .demo__curseur{animation:clignote 1s steps(1) infinite}
@keyframes clignote{0%,49%{opacity:1}50%,100%{opacity:0}}
.demo__res{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.demo__res li{display:flex;align-items:center;gap:12px;border:1px solid var(--filet);border-radius:var(--r2);padding:9px 14px;animation:apparait .26s var(--courbe) both;transition:border-color .2s,background .2s,transform .16s var(--courbe)}
.demo__res li.part{opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s}
.demo__res li.survol{border-color:var(--bleu);background:var(--bleu-voile)}
.demo__res li.choisi{transform:scale(.985)}
.demo__res .avatar{width:34px;height:34px;font-size:14px}
.demo__res-t{display:flex;flex-direction:column;line-height:1.25}
.demo__res-t b{font-family:var(--titre);font-size:16px;color:var(--nuit)}
.demo__res-t small{font-size:12.5px;color:var(--texte-3)}
.demo__res-pts{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--or-texte)}
@keyframes apparait{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.avatar{width:40px;height:40px;border-radius:50%;background:var(--bleu-voile);color:var(--bleu);display:grid;place-items:center;font-weight:700;flex:none}
.demo__client{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--filet)}
.demo__client-t{display:flex;flex-direction:column;line-height:1.3}
.demo__client-t b{font-family:var(--titre);font-size:18px}
.demo__client-t small{color:var(--texte-3);font-size:13px}
.demo__client-pts{margin-left:auto;font-size:13.5px;color:var(--texte-2)}
.demo__client-pts b{font-family:var(--titre);font-size:24px;color:var(--nuit);display:inline-block;min-width:2ch;text-align:right;transition:color .3s}
.demo.apres .demo__client-pts b{color:var(--succes)}
.demo__recomp{display:flex;flex-direction:column;gap:6px}
.demo__recomp-l{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--texte-2)}
.demo__recomp-l .chiffre{color:var(--texte-3)}
.demo__jauge{height:6px;border-radius:var(--rp);background:var(--fond-2);overflow:hidden}
.demo__jauge i{display:block;height:100%;width:74%;border-radius:inherit;background:var(--or);transition:width .8s var(--courbe)}
.demo__recomp.debloquee .demo__recomp-l{color:var(--or-texte);font-weight:600}
.demo__lib{font-size:13.5px;font-weight:600;margin-top:2px}
.demo__montant{height:54px;border:1.5px solid var(--filet-fort);border-radius:var(--r2);display:flex;align-items:center;padding:0 16px;font-family:var(--titre);font-size:28px;font-weight:700;color:var(--nuit);transition:border-color .2s}
.demo__montant.frappe,.demo__montant.rempli{border-color:var(--bleu)}
.demo__euro{margin-left:8px;color:var(--texte-3);font-size:22px}
.demo__regle{font-size:13.5px;color:var(--texte-2)}
.demo__action{display:grid;margin-top:2px}
.demo__action > *{grid-area:1 / 1}
.demo__bouton{height:52px;width:100%;font-size:16px;position:relative}
.demo__bouton.pret{animation:invite 2.2s var(--courbe) 2}
@keyframes invite{0%{box-shadow:0 0 0 0 rgba(3,46,122,.35)}70%{box-shadow:0 0 0 10px rgba(3,46,122,0)}100%{box-shadow:0 0 0 0 rgba(3,46,122,0)}}
.demo__succes{display:flex;align-items:center;gap:8px;height:52px;background:var(--succes-voile);color:var(--succes);font-weight:600;font-size:14.5px;white-space:nowrap;border-radius:var(--r2);padding:0 14px;animation:apparait .3s var(--courbe) both}
.demo.apres .demo__bouton{visibility:hidden}
.demo.apres .demo__montant{border-color:var(--filet);color:var(--texte-2)}

.demo__tel{grid-column:2;grid-row:1;position:relative;z-index:2;margin-bottom:-44px;width:212px;background:linear-gradient(160deg,#22355F,#121F40);border-radius:34px;padding:8px;box-shadow:0 36px 64px -26px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.14)}
.demo__ecran{background:var(--fond);border-radius:27px;padding:28px 12px 16px;position:relative;overflow:hidden}
.demo__encoche{position:absolute;top:9px;left:50%;width:60px;height:16px;margin-left:-30px;border-radius:12px;background:#121F40}
.demo__app{font-size:11px;font-weight:600;color:var(--texte-3);text-align:center;margin-bottom:8px}
.carte-mini{background:var(--nuit);border-radius:14px;padding:13px;color:#fff;position:relative;min-height:146px}
.carte-mini__haut{display:flex;align-items:center;gap:8px;font-family:var(--titre);font-weight:700;font-size:13px}
.carte-mini__logo{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:12px}
.carte-mini__pts{margin:12px 0 8px;display:flex;align-items:baseline;gap:6px}
.carte-mini__pts b{font-family:var(--titre);font-size:38px;line-height:1;color:var(--or)}
.carte-mini__pts small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sur-nuit-2);font-weight:600}
.carte-mini__barre{height:6px;border-radius:var(--rp);background:rgba(255,255,255,.16);overflow:hidden}
.carte-mini__barre i{display:block;height:100%;width:74%;background:var(--or);border-radius:inherit;transition:width .9s var(--courbe)}
.demo.synchro .carte-mini__barre i{width:100%}
.carte-mini__maj{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--or);margin-top:8px}
/* QR : bleu nuit sur blanc, modules arrondis, sans cadre noir */
.demo__qr{background:#fff;border-radius:16px;padding:12px;margin:12px 16px 0;color:var(--nuit);box-shadow:0 6px 18px -10px rgba(2,37,87,.35)}
.demo__qr .qr{width:100%;height:auto;display:block}

.demo__suivi{grid-column:1;grid-row:2;padding:22px 24px 0 0;display:flex;flex-direction:column;gap:12px;min-height:214px}
.demo__invite{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--or);animation:apparait .3s var(--courbe) both}
.demo__pied{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.demo__note{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--sur-nuit-2)}
.demo__rejouer{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:var(--rp);height:34px;padding:0 14px;font-size:13px;font-weight:600;cursor:pointer;transition:background var(--duree)}
.demo__rejouer:hover{background:rgba(255,255,255,.08)}
.sync li{animation:apparait .3s var(--courbe) both}

@media (prefers-reduced-motion: reduce){
  .demo__vue,.demo__vue.off,.demo__res li,.demo__succes,.demo__invite,.sync li{transition:none;animation:none;transform:none}
  .demo__jauge i,.carte-mini__barre i{transition:none}
  .demo__bouton.pret{animation:none}
  .demo__curseur{display:none}
}

/* ---------- sections éditoriales (direction A) ---------- */
.sec{padding:96px 0}
/* H6 : arrivée par une ancre (menu, « Découvrir l'espace commerçant ») : sous l'en-tête collant, le surtitre garde
   24 px d'air à toutes les largeurs. Mesuré en navigation réelle : sans cette marge, il passait de 8 px sous
   l'en-tête à 390 px et le touchait à 768 px ; sur ordinateur (96 px de marge haute), rien ne change. */
@media (max-width:900px){ .sec{scroll-margin-top:24px} }   /* en-tête 72 px, marge haute 72 px */
@media (max-width:600px){ .sec{scroll-margin-top:32px} }   /* en-tête 64 px, marge haute 56 px */
.sec--fond{background:var(--fond)}
.sec__tete{max-width:760px;margin-bottom:40px}
.sec__tete h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;color:var(--nuit);letter-spacing:-.03em;margin-top:10px}
.sec__chapo{font-size:18px;color:var(--texte-2);margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.benef{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.benef li{border-top:2px solid var(--nuit);padding-top:22px}
.benef .ic{color:var(--bleu)}
.benef h3{font-size:19px;color:var(--nuit);margin:14px 0 8px}
.benef p{color:var(--texte-2);font-size:15px}

/* H5 : quatre temps reliés par un fil, sans cartes */
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.etapes li{position:relative}
.etapes li:not(:last-child)::after{content:"";position:absolute;top:21px;left:58px;right:-18px;height:1px;background:var(--filet-fort)}
.etapes__n{width:42px;height:42px;border-radius:50%;background:var(--nuit);color:var(--or);font-family:var(--titre);font-weight:800;font-size:17px;display:grid;place-items:center}
.etapes h3{font-size:19px;color:var(--nuit);margin:20px 0 8px}
.etapes p{font-size:15px;color:var(--texte-2)}

.onglets{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--filet-fort);border-radius:var(--r2);margin-bottom:28px;flex-wrap:wrap;background:var(--blanc)}
.onglets button{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;height:40px;padding:0 16px;border-radius:7px;font-size:14.5px;font-weight:600;color:var(--texte-2);cursor:pointer;transition:background var(--duree),color var(--duree)}
.onglets button:hover{background:var(--fond)}
.onglets button[aria-selected="true"]{background:var(--nuit);color:#fff}
.onglets button[aria-selected="true"] .ic{color:var(--or)}
.espace{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:center}
.espace:not([hidden]){animation:apparait .3s var(--courbe) both}
.espace__txt h3{font-size:24px;color:var(--nuit);letter-spacing:-.02em}
.espace__txt > p{color:var(--texte-2);margin-top:10px}
.espace__pts{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px}
.espace__pts li{display:flex;gap:10px;align-items:flex-start}
.espace__pts .ic{margin-top:3px;color:var(--succes);flex:none}
.espace__pts .espace__bientot,.espace__pts .espace__bientot .ic{color:var(--texte-3)}
.espace__nuance{font-size:13.5px;color:var(--texte-3);border-left:2px solid var(--filet-fort);padding-left:12px;margin-top:18px}
.ecran{margin:0;border-radius:14px;overflow:hidden;background:var(--blanc);box-shadow:0 30px 60px -30px rgba(2,37,87,.35),0 0 0 1px var(--filet)}
.ecran__barre{display:flex;gap:6px;padding:10px 14px;background:var(--fond);border-bottom:1px solid var(--filet)}
.ecran__barre i{width:9px;height:9px;border-radius:50%;background:var(--filet-fort)}
.ecran img,.ecran picture{display:block;width:100%;height:auto}
.ecran--tel{justify-self:center;width:min(100%,360px);border-radius:32px;padding:10px;background:var(--blanc);box-shadow:0 30px 60px -28px rgba(2,37,87,.35),0 0 0 1px var(--filet)}
.ecran--tel img{border-radius:22px}
.planche__fictif{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--texte-3);margin-top:20px}
.dispo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.dispo__col{border-top:2px solid var(--succes);padding-top:18px}
.dispo__col h3{display:flex;align-items:center;gap:8px;font-size:17px;color:var(--succes)}
.dispo__col ul{margin:12px 0 0;padding-left:18px;color:var(--texte-2);display:flex;flex-direction:column;gap:6px}
.dispo__col--bientot{border-top:2px dashed var(--filet-fort)}
.dispo__col--bientot h3{color:var(--texte-2)}

/* simulateur */
.sim{display:grid;grid-template-columns:1fr 1fr;background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r4);overflow:hidden}
.sim__form{padding:32px;display:flex;flex-direction:column;gap:20px;margin:0}
.sim__scen{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sim__scen .aide{font-size:13px;color:var(--texte-3)}
.sim__scen legend{font-size:14px;font-weight:600;padding:0;margin-bottom:8px}
.sim__choix{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sim__choix label{position:relative}
.sim__choix input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sim__choix span{display:flex;align-items:center;justify-content:center;height:48px;border:1px solid var(--filet-fort);border-radius:var(--r2);font-family:var(--titre);font-weight:700;font-size:17px;color:var(--texte-2);transition:all var(--duree)}
.sim__choix input:checked+span{background:var(--nuit);border-color:var(--nuit);color:#fff}
.sim__choix input:focus-visible+span{box-shadow:var(--anneau)}
.sim__choix label:hover span{border-color:var(--bleu)}
.sim__avance{border-top:1px solid var(--filet);padding-top:14px}
.sim__avance summary{cursor:pointer;font-weight:600;color:var(--bleu);font-size:14.5px;min-height:32px;display:flex;align-items:center}
.sim__avance .champ{margin-top:12px}
.sim__res{background:var(--nuit);color:#fff;padding:32px;display:flex;flex-direction:column;gap:16px}
.sim__etiq{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sur-nuit-2);font-weight:600}
.sim__phrase{font-family:var(--titre);font-size:24px;line-height:1.35;font-weight:600}
.sim__phrase b{color:var(--or);font-weight:800}
.sim__k{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.sim__k div{border:1px solid var(--filet-nuit);border-radius:var(--r2);padding:12px 14px}
.sim__k dt{font-size:12.5px;color:var(--sur-nuit-2)}
.sim__k dd{margin:4px 0 0;font-family:var(--titre);font-size:26px;font-weight:800}
.sim__couv{border-top:1px solid var(--filet-nuit);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.sim__marge{font-size:13.5px;color:var(--sur-nuit-2)}
.sim__unite{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--rp);background:var(--fond-2);color:var(--texte-2);font-size:12px;font-weight:700;letter-spacing:.02em}
.sim__k dt small{display:inline-block;margin-left:4px;padding:0 6px;border-radius:var(--rp);border:1px solid var(--filet-nuit);font-size:11px;font-weight:600;color:var(--sur-nuit-2)}
.sim__couv-l{display:flex;flex-direction:column;gap:4px;font-family:var(--texte)!important;font-size:14px!important;font-weight:500!important}
.sim__couv-l b{font-family:var(--titre);font-size:18px;color:#fff}
.sim__legende{font-size:13px;color:var(--sur-nuit-2);border-top:1px solid var(--filet-nuit);padding-top:12px}
.sim__attente{font-family:var(--titre);font-size:20px;font-weight:600;color:#fff}
.sim__note{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--sur-nuit-2);margin-top:auto}
.sim__note .ic{margin-top:2px;flex:none}

/* offres */
.offres{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:980px}
.offre{border:1px solid var(--filet);border-radius:var(--r3);padding:28px;display:flex;flex-direction:column}
.offre--av{border:2px solid var(--nuit)}
.offre h3{font-size:24px;color:var(--nuit)}
.offre__pour{color:var(--texte-2);font-size:15px;margin-top:4px}
.offre__prix{margin:18px 0 20px;font-size:14px;color:var(--texte-3)}
.offre__prix b{font-family:var(--titre);font-size:44px;color:var(--encre);letter-spacing:-.03em;margin-right:6px}
.offre__groupe{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--succes);padding-top:14px;border-top:1px solid var(--filet)}
.offre__groupe--bientot{color:var(--texte-3);border-top-style:dashed;margin-top:16px}
.offre ul{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:9px;font-size:15px}
.offre li{display:flex;gap:8px;align-items:flex-start}
.offre li .ic{margin-top:3px;color:var(--succes)}
.offre__bientot li{color:var(--texte-3)}
.offre__bientot li .ic{color:var(--texte-3)}
.offres__pied{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px;max-width:980px}
.offres__note{font-size:14px;color:var(--texte-3);max-width:62ch;flex:1;min-width:260px}

/* FAQ */
.faq{border-top:1px solid var(--filet-fort)}
.faq:last-of-type{border-bottom:1px solid var(--filet-fort)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;font-weight:600;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:400;color:var(--bleu);flex:none}
.faq[open] summary::after{content:"–"}
.faq p{color:var(--texte-2);padding:0 0 20px;max-width:64ch}

/* appel final + pied */
.final{background:var(--nuit);color:#fff;padding:88px 0}
.final__in{text-align:center}
.final h2{color:#fff;font-size:clamp(28px,3.6vw,42px);font-weight:800}
.final p{color:var(--sur-nuit-2);margin-top:12px;font-size:17px}
.final__act{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px}
.final .lien-fleche{color:#fff}
.pied{border-top:1px solid var(--filet);padding:48px 0 24px;background:var(--blanc)}
.pied__in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.pied__marque img{width:108px;height:108px}
.pied__col{display:flex;flex-direction:column;gap:8px}
.pied__col h2{font-family:var(--texte);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-3);font-weight:700;margin-bottom:4px}
.pied__col a{color:var(--encre);text-decoration:none;font-size:15px}
.pied__col a:hover{color:var(--bleu);text-decoration:underline;text-underline-offset:4px}
.pied__bas{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--filet);margin-top:32px;padding-top:18px;font-size:13.5px;color:var(--texte-3)}

/* ---------- responsive ---------- */
/* Menu complet : il lui faut 1 184 px (logo, six rubriques, Connexion,
   Créer mon compte). En dessous de 1 200 px, menu compact : le bouton
   « Créer mon compte » reste visible à côté du bouton Menu. */
@media (max-width:1199px){
  .acc-nav{display:none;position:absolute;left:0;right:0;top:72px;background:var(--nuit-2);flex-direction:column;gap:0;padding:8px max(32px,calc((100% - 1200px) / 2 + 32px)) 16px;box-shadow:0 18px 30px -18px rgba(0,0,0,.5)}
  .acc-nav.ouvert{display:flex}
  .acc-nav a{padding:14px 0;border-bottom:1px solid var(--filet-nuit);font-size:16px}
  .acc-nav__mobile{display:block}
  .acc-lien-cx{display:none}
  .acc-burger{display:inline-flex}
  .acc-tete__in{justify-content:space-between;gap:12px}
}
@media (max-width:1100px){
  .hero__grille{grid-template-columns:1fr;gap:48px}
  .demo{max-width:700px;width:100%;margin-inline:auto}
  .espace{grid-template-columns:1fr;gap:28px}
  .espace .ecran{order:-1}
  .benef,.etapes{grid-template-columns:1fr 1fr}
  .etapes li::after{display:none}
}
/* tablette (une colonne) : texte du hero et démonstration centrés */
@media (min-width:601px) and (max-width:1100px){
  .hero__txt{text-align:center;max-width:680px;margin-inline:auto}
  .hero__chapo{margin-inline:auto}
  .hero__act{justify-content:center}
}
@media (max-width:900px){
  .acc-nav{padding-inline:24px}
  .sec{padding:72px 0}
  .sim{grid-template-columns:1fr}
  .offres{grid-template-columns:1fr}
  .pied__in{grid-template-columns:1fr 1fr}
}
/* hero mobile allégé : une carte, un bouton, le suivi */
@media (max-width:600px){
  .acc-tete__in{height:64px}
  .acc-nav{top:64px}
  .acc-tete__act .btn{display:none}
  .hero{padding:28px 0 36px;background-image:none}
  .hero__grille{gap:28px}
  .hero__etiq{height:28px;font-size:12.5px;padding:0 12px}
  .hero__etiq-long,.hero__chapo-long{display:none}
  .hero__etiq-court{display:inline}
  .hero h1{font-size:40px;margin-top:14px}
  .hero__chapo{font-size:16.5px;margin-top:14px}
  .hero__act{flex-direction:column;gap:10px;margin-top:22px}
  .hero__act .btn{width:100%}
  .hero__espace{align-self:center}
  .demo{display:flex;flex-direction:column;align-items:stretch;gap:14px}
  .demo__tel{display:none}
  .demo__tablette{width:auto;padding:0;background:none;box-shadow:none;border-radius:var(--r3)}
  .demo__barre{border-radius:var(--r3) var(--r3) 0 0}
  .demo__corps{padding:16px 16px 18px;min-height:336px;border-radius:0 0 var(--r3) var(--r3)}
  .demo__res li:nth-child(n+4){display:none}
  .demo__suivi{padding:0;min-height:0;gap:10px}
  .onglets--espace{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .onglets--espace button{justify-content:center;padding:0 8px;font-size:14px}
  .espace__txt h3{font-size:21px}
  .onglets--espace button{font-size:13.5px;white-space:nowrap}
  .onglets--espace button .ic{display:none}
  .ecran--large{justify-self:center;width:min(100%,320px);border-radius:28px;padding:8px}
  .ecran--large .ecran__barre{display:none}
  .ecran--large img{border-radius:20px}
  .sec{padding:56px 0}
  .sec__tete{margin-bottom:28px}
  .sec__chapo{font-size:16px}
  .benef,.etapes,.dispo{grid-template-columns:1fr}
  .benef{gap:24px}
  .sim__form,.sim__res{padding:22px 18px}
  .sim__phrase{font-size:20px}
  .sim__k dd{font-size:22px}
  .offre{padding:22px}
  .offre__prix b{font-size:38px}
  .final{padding:64px 0}
  .final__act{flex-direction:column;gap:14px}
  .final__act .btn{width:100%}
  .pied__in{grid-template-columns:1fr 1fr}
  .pied__marque{grid-column:1 / -1}
  .pied__marque img{width:84px;height:84px}
}