/* =====================================================================
   ALS Nova — couche « moderne » (octobre 2026)
   Chargée APRÈS site.css / les styles de l'accueil : elle ne fait que
   rafraîchir le rendu. Le système de commande et Stripe sont inchangés.
   ===================================================================== */
:root{
  --or:#D9A441;            /* accent d'action (boutons d'achat) */
  --or-fonce:#C08D2E;
  --nuit:#163B48;          /* fond du héros */
  --r:18px;
  --ombre:0 1px 2px rgba(15,40,50,.04), 0 18px 40px -22px rgba(31,78,95,.35);
  --ombre-forte:0 2px 4px rgba(15,40,50,.06), 0 30px 60px -28px rgba(18,48,58,.55);
}

body{background:#F7FAFB}
::selection{background:#DCEAF0}

/* ---------- barre du haut ---------- */
header.top{background:rgba(247,250,251,.78);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);transition:box-shadow .25s,background .25s}
header.top.scrolled{background:rgba(255,255,255,.92);box-shadow:0 10px 30px -22px rgba(18,48,58,.45)}
.navlinks a{position:relative}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--azul);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.navlinks a:hover::after,.navlinks a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- boutons ---------- */
.btn{border-radius:999px;font-weight:700;letter-spacing:.005em;transition:transform .18s,box-shadow .18s,background .18s;box-shadow:0 8px 20px -12px rgba(31,78,95,.7)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(31,78,95,.75)}
.btn.ghost{box-shadow:none}
.btn.or,.top .wrap > .btn,.aside-box .btn:not(.ghost),.cta-achat{background:var(--or);color:#12303A;box-shadow:0 10px 24px -12px rgba(192,141,46,.85)}
.btn.or:hover,.top .wrap > .btn:hover,.aside-box .btn:not(.ghost):hover,.cta-achat:hover{background:var(--or-fonce);color:#12303A}
.btn.or::after,.cta-achat::after{content:" →";transition:margin .18s}
.btn.or:hover::after,.cta-achat:hover::after{margin-left:4px}

/* ---------- héros de l'accueil ---------- */
.mx-hero{position:relative;overflow:hidden;background:var(--nuit);color:#fff;padding:78px 0 86px;isolation:isolate}
.mx-hero::before{content:"";position:absolute;inset:-30% -10% auto auto;width:780px;height:780px;border-radius:50%;
  background:radial-gradient(circle,rgba(143,179,194,.38),rgba(143,179,194,0) 62%);z-index:-1}
.mx-hero::after{content:"";position:absolute;left:-200px;bottom:-320px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,164,65,.20),rgba(217,164,65,0) 62%);z-index:-1}
.mx-hero .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center}
.mx-hero .eyebrow{color:#9FC0D0}
.mx-hero h1{color:#fff;font-size:clamp(2.4rem,5.2vw,4.1rem);line-height:1.04}
.mx-hero h1 em{color:#F1CF8C;font-style:italic}
.mx-hero .h1-kw{display:block;font-family:'Karla',sans-serif;font-size:.95rem;font-weight:500;letter-spacing:.01em;color:#C9DCE3;margin-bottom:14px;line-height:1.4}
.mx-hero .lede{color:#D6E5EA;font-size:1.12rem;max-width:560px;margin:22px 0 28px}
.mx-hero .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mx-hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
.mx-hero .btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.mx-trust{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:30px 0 0;font-size:.92rem;color:#C9DCE3}
.mx-trust li{display:flex;align-items:center;gap:8px}
.mx-trust li::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;
  background:#2E7D6A url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat}

/* cartes « les plus demandées » */
.mx-stack{display:flex;flex-direction:column;gap:14px}
.mx-stack .mx-kicker{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#9FC0D0;margin:0 0 2px}
.mx-offre{display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:center;background:rgba(255,255,255,.97);color:var(--tinta);
  border-radius:var(--r);padding:18px 20px;box-shadow:var(--ombre-forte);text-decoration:none;transition:transform .2s}
.mx-offre:hover{transform:translateY(-3px) rotate(-.2deg)}
.mx-offre:nth-child(odd){margin-left:34px}
.mx-offre .t{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.08rem;line-height:1.2}
.mx-offre .m{grid-column:1;font-size:.84rem;color:var(--gris)}
.mx-offre .p{grid-row:1 / span 2;grid-column:2;text-align:right}
.mx-offre .p b{display:block;font-family:'Fraunces',Georgia,serif;font-size:1.55rem;color:var(--cobalt);line-height:1}
.mx-offre .p span{display:inline-block;margin-top:6px;font-size:.78rem;font-weight:700;color:#8A6420;background:#FBF1DD;border-radius:99px;padding:3px 10px}
.mx-offre .badge-pop{grid-column:1;justify-self:start;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--azul);border-radius:99px;padding:3px 9px;margin-bottom:4px}

/* bandeau de garanties défilant */
.mx-band{background:#fff;border-bottom:1px solid var(--trait);overflow:hidden}
.mx-band ul{display:flex;gap:46px;list-style:none;margin:0;padding:16px 0;width:max-content;animation:mx-defile 38s linear infinite}
.mx-band li{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:.93rem;color:var(--tinta)}
.mx-band li b{color:var(--cobalt)}
.mx-band li::before{content:"✦";color:var(--or)}
@keyframes mx-defile{to{transform:translateX(-50%)}}

/* ---------- sections / cartes ---------- */
section{scroll-margin-top:90px}
.sec-head h2,.prose h2{letter-spacing:-.02em}
.choix-carte,.etape,.tuile,.carte-id,.aside-box,.boite,.av-carte,.av-form,details.q,.nv-carte{border-radius:var(--r)!important}
.choix-carte,.etape,.tuile,.boite{transition:transform .22s,box-shadow .22s}
.choix-carte:hover,.etape:hover,.boite:hover{transform:translateY(-4px);box-shadow:var(--ombre-forte)}
.tuile:hover{box-shadow:var(--ombre-forte)}
.chip{border-radius:999px}
.chip[aria-pressed="true"]{box-shadow:0 8px 18px -12px rgba(31,78,95,.8)}
.tuile .prix{color:var(--cobalt)}
.cta-tuile{font-weight:700;color:#8A6420}

/* appel final */
.appel{background:linear-gradient(135deg,#163B48,#1F4E5F 55%,#176B87);border-radius:28px!important;position:relative;overflow:hidden}
.appel::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(217,164,65,.28),transparent 65%)}
.appel .btn{background:var(--or)!important;color:#12303A!important}

/* ---------- pages prestation ---------- */
.phero{background:linear-gradient(180deg,#fff, #F7FAFB);border-bottom:1px solid var(--trait)}
.facts li:first-child{background:#FBF1DD;color:#7A5617;border-color:#F1D9A6;font-weight:700}
.aside-box{border-top:4px solid var(--or)}
.aside-box .prix{font-family:'Fraunces',Georgia,serif;color:var(--cobalt)}
.aside-box::before{content:"Prix fixe · paiement sécurisé";display:block;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin-bottom:8px}

/* ---------- barre d'achat collante (mobile) ---------- */
.mx-sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;display:none;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(18,48,58,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border-radius:999px;padding:8px 8px 8px 20px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.55);transform:translateY(140%);transition:transform .3s}
.mx-sticky.on{transform:none}
.mx-sticky span{font-size:.9rem;line-height:1.2}
.mx-sticky span b{display:block;font-family:'Fraunces',Georgia,serif;font-size:1.05rem}
.mx-sticky .btn{padding:11px 18px;white-space:nowrap;margin:0}

/* ---------- apparition au défilement ---------- */
.mx-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.mx-reveal.vu{opacity:1;transform:none}

@media (max-width:900px){
  .mx-hero{padding:46px 0 58px}
  .mx-hero .wrap{grid-template-columns:1fr;gap:34px}
  .mx-offre:nth-child(odd){margin-left:0}
  .mx-sticky{display:flex}
  footer{padding-bottom:90px}
}
@media (prefers-reduced-motion:reduce){
  .mx-band ul{animation:none}
  .mx-reveal{opacity:1;transform:none;transition:none}
  .btn,.mx-offre,.choix-carte,.etape,.tuile,.boite{transition:none}
}

/* boutons d'achat des outils numériques */
#nv-outils .nv-btn,#nv-apps .nv-btn{background:var(--or)!important;color:#12303A!important;border-radius:999px!important;font-weight:700}
#nv-outils .nv-btn:hover,#nv-apps .nv-btn:hover{background:var(--or-fonce)!important}

/* « Souvent demandé avec » + question rapide (encadré de prix des fiches) */
.mx-reco{margin-top:18px;padding-top:14px;border-top:1px dashed var(--trait)}
.mx-reco p{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin:0 0 8px}
.mx-reco a{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:8px 0;text-decoration:none;color:var(--tinta);font-size:.9rem;border-bottom:1px solid #EEF3F5}
.mx-reco a:hover span{text-decoration:underline}
.mx-reco b{color:var(--cobalt);white-space:nowrap;font-family:'Fraunces',Georgia,serif}
.mx-question{display:block;margin-top:14px;font-size:.86rem;color:var(--gris);text-decoration:none;background:#F4F8F9;border-radius:12px;padding:10px 12px}
.mx-question b{color:var(--cobalt)}
.mx-question:hover{background:#E3EEF2}

/* réseaux sociaux du pied de page */
.mx-social{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:center;padding:18px 22px 26px;border-top:1px solid var(--trait);max-width:var(--max);margin:0 auto}
.mx-social span{font-size:.85rem;color:var(--gris);margin-right:6px}
.mx-social a{display:inline-flex;width:38px;height:38px;border-radius:50%;align-items:center;justify-content:center;background:#fff;border:1px solid var(--trait);transition:transform .18s,background .18s}
.mx-social a:hover{transform:translateY(-2px);background:#E3EEF2}
.mx-social svg{width:18px;height:18px;fill:var(--cobalt)}