/* ═══════════════════════════════════════════════════════════════════════════
   BOUTIQUE : le design dessiné par Base44 (01/11/2026), repris sans React.
   Syne pour les titres, Plus Jakarta Sans pour le texte, JetBrains Mono pour les prix ;
   encre #121212, orange « ignite », lavande « vapeur », fond « studio ».
   Écart volontaire avec Base44 : l'orange des boutons est un cran plus foncé (#D63A00) pour que le texte blanc
   reste lisible (4,7:1 au lieu de 3,3:1), et les gris de texte sont plus soutenus (contraste AA).
   Écrit téléphone d'abord. Une seule feuille pour toutes les pages : mise en cache dès la première visite.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family:"Syne"; src:url(/polices/syne.woff2) format("woff2"); font-weight:700 800; font-display:swap; }
@font-face { font-family:"Jakarta"; src:url(/polices/jakarta.woff2) format("woff2"); font-weight:400 800; font-display:swap; }
@font-face { font-family:"Mono"; src:url(/polices/mono.woff2) format("woff2"); font-weight:700; font-display:swap; }

:root {
  --encre:#121212; --gris:#5c5c66; --gris-doux:#6b6b74;
  --fond:#f9f9fb; --carte:#fff; --vapeur:#e0e7ff; --vapeur-clair:#eef1ff;
  --ignite:#ff4d00; --ignite-fonce:#d63a00; --ok:#16723a; --erreur:#b42318;
  --filet:rgba(18,18,18,.08); --filet-fort:rgba(18,18,18,.14);
  --titre:"Syne", ui-sans-serif, system-ui, sans-serif;
  --texte:"Jakarta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --chiffres:"Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sortie:cubic-bezier(.23,1,.32,1); --ressort:cubic-bezier(.32,.72,0,1); --doux:cubic-bezier(.45,0,.55,1);
  --large:72rem;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--fond); color:var(--encre); font-family:var(--texte); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
p { margin:0; }
h1, h2, h3 { margin:0; font-family:var(--titre); font-weight:800; line-height:1.05; letter-spacing:-.03em; text-wrap:balance; }
button { font:inherit; color:inherit; }
::selection { background:var(--ignite); color:#fff; }
:focus-visible { outline:3px solid var(--ignite-fonce); outline-offset:3px; border-radius:12px; }
[id] { scroll-margin-top:84px; }
.ic { flex:none; }
.prix-mono { font-family:var(--chiffres); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.dedans { width:100%; max-width:var(--large); margin:0 auto; padding:0 16px; }
.cache { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ---------- bandeau de test + barre du haut ---------- */
.test { background:var(--vapeur); color:#2a2a33; text-align:center; padding:8px 16px; font-size:12.5px; font-weight:700; letter-spacing:.01em; }
.tete { position:sticky; top:0; z-index:40; border-bottom:1px solid rgba(18,18,18,.05); background:rgba(249,249,251,.82); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); }
.tete .dedans { height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo { display:inline-flex; align-items:center; gap:6px; min-height:44px; }
.logo span:first-child { font-family:var(--titre); font-weight:800; font-size:22px; letter-spacing:-.04em; }
.logo .point { width:8px; height:8px; border-radius:50%; background:var(--ignite); transition:transform .3s var(--sortie); }
.nav { display:none; gap:28px; }
.nav a { font-size:13.5px; font-weight:600; color:var(--gris); min-height:44px; display:inline-flex; align-items:center; transition:color .2s var(--sortie); }
.bouton-panier { position:relative; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; background:var(--encre); color:#fff; font-size:13.5px; font-weight:600; transition:transform .16s var(--sortie); }
.bouton-panier:active { transform:scale(.95); }
.bouton-panier .mot { display:none; }
.bouton-panier .nb { position:absolute; right:-6px; top:-6px; min-width:21px; height:21px; padding:0 5px; border-radius:999px; display:grid; place-items:center; background:var(--ignite-fonce); color:#fff; font-family:var(--chiffres); font-size:11px; font-weight:700; box-shadow:0 0 0 2px var(--fond); }
.bouton-panier .nb:empty { display:none; }
.retour-lien { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:13px; font-weight:700; color:var(--gris); transition:color .2s var(--sortie); }

/* ---------- boutons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 28px; border-radius:999px; border:0; font-size:15.5px; font-weight:700; cursor:pointer; transition:transform .16s var(--sortie), background-color .2s var(--sortie), border-color .2s var(--sortie), box-shadow .3s var(--sortie); }
.btn:active { transform:scale(.97); }
.btn-orange { background:var(--ignite-fonce); color:#fff; }
.btn-blanc { background:#fff; color:var(--encre); box-shadow:inset 0 0 0 1px var(--filet-fort); }
.btn-noir { background:var(--encre); color:#fff; }
.btn-large { width:100%; }
.btn:disabled { opacity:.65; cursor:wait; }
@keyframes appel-pulse { 0%, 100% { box-shadow:0 12px 30px -12px rgba(214,58,0,.75); } 50% { box-shadow:0 18px 44px -10px rgba(214,58,0,.9); } }
.pulse { animation:appel-pulse 2.8s var(--doux) infinite; }

/* ---------- accueil : l'ouverture ---------- */
.ouverture { position:relative; overflow:hidden; }
.ouverture::before, .ouverture::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.ouverture::before { right:-96px; top:-112px; width:300px; height:300px; background:radial-gradient(closest-side, rgba(255,77,0,.16), transparent); }
.ouverture::after { left:-96px; top:220px; width:300px; height:300px; background:radial-gradient(closest-side, var(--vapeur), transparent); }
.ouverture .dedans { position:relative; z-index:1; display:grid; gap:40px; align-items:center; padding-top:40px; padding-bottom:56px; }
.pastille { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px rgba(18,18,18,.1); font-size:12.5px; font-weight:700; color:#3a3a42; }
.pastille .ic { color:var(--ignite-fonce); }
.ouverture h1 { margin-top:20px; font-size:2.9rem; line-height:.92; letter-spacing:-.035em; }
.ouverture h1 .orange { color:var(--ignite); display:block; }
.ouverture .chapo { margin-top:20px; max-width:28rem; font-size:16.5px; line-height:1.65; color:var(--gris); }
.ouverture .chapo strong { color:var(--encre); }
.appels { margin-top:32px; display:flex; flex-direction:column; gap:12px; }
.garde-fous { list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; font-size:13px; font-weight:700; color:var(--gris-doux); }
.garde-fous li { display:inline-flex; align-items:center; gap:18px; }
.garde-fous li + li::before { content:""; width:4px; height:4px; border-radius:50%; background:var(--ignite); }
.trio { display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px; }
.trio .carte-photo { overflow:hidden; background:#fff; padding:6px; box-shadow:0 22px 50px -24px rgba(18,18,18,.5), 0 0 0 1px rgba(0,0,0,.05); }
.trio .carte-photo img { width:100%; aspect-ratio:3/4; object-fit:cover; }
.trio .cote { width:36%; border-radius:22px; }
.trio .cote img { border-radius:17px; }
.trio .cote:first-child { transform:rotate(-8deg); }
.trio .cote:last-child { transform:rotate(8deg); }
.trio .milieu { position:relative; z-index:1; width:46%; margin:0 -12px; border-radius:28px; box-shadow:0 30px 60px -22px rgba(18,18,18,.55), 0 0 0 1px rgba(0,0,0,.05); animation:flotte 7s var(--doux) infinite; }
.trio .milieu img { border-radius:23px; }
@keyframes flotte { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }

/* bandeau défilant */
.defile { overflow:hidden; background:var(--encre); border-block:1px solid rgba(18,18,18,.1); padding:14px 0; }
.defile-piste { display:flex; width:max-content; animation:defile 34s linear infinite; }
.defile-piste > div { display:flex; flex-shrink:0; align-items:center; }
.defile span { display:inline-flex; align-items:center; gap:22px; padding:0 20px; white-space:nowrap; font-size:13px; font-weight:700; color:rgba(255,255,255,.86); }
.defile .ic { color:var(--ignite); }
@keyframes defile { to { transform:translate3d(-50%, 0, 0); } }

/* ---------- sections communes ---------- */
.bloc { padding:64px 0; }
.bloc h2 { font-size:2rem; line-height:1.02; }
.bloc .sous-titre { margin-top:14px; max-width:22rem; font-size:14.5px; line-height:1.6; color:var(--gris); }
.entete-bloc { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; }
.entete-bloc .sous-titre { margin-top:0; max-width:16rem; font-size:13.5px; }

/* la grille des produits */
.grille { margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; }
.grille > .vedette { grid-column:span 2; }
.produit-carte { display:flex; flex-direction:column; }
.produit-carte .visuel { position:relative; }
.produit-carte .photo { display:block; overflow:hidden; border-radius:26px; background:var(--teinte, #fff); box-shadow:0 0 0 1px rgba(0,0,0,.05); }
.produit-carte .photo img { width:100%; aspect-ratio:4/5; object-fit:cover; mix-blend-mode:multiply; transition:transform .7s var(--sortie); }
.produit-carte.vedette .photo img { aspect-ratio:16/11; object-fit:contain; }
.produit-carte .badge { position:absolute; left:12px; top:12px; pointer-events:none; }
.ajout-rapide { position:absolute; right:12px; bottom:12px; width:46px; height:46px; border-radius:50%; border:0; display:grid; place-items:center; background:var(--ignite-fonce); color:#fff; cursor:pointer; box-shadow:0 10px 24px -8px rgba(214,58,0,.9); transition:transform .16s var(--sortie); }
.ajout-rapide:active { transform:scale(.9); }
.produit-carte h3 { margin-top:4px; font-size:15.5px; font-weight:700; line-height:1.3; letter-spacing:-.02em; }
.produit-carte h3 a { display:flex; align-items:center; min-height:44px; } /* cible tactile de 44 px */
.produit-carte .court { margin-top:4px; font-size:13px; line-height:1.55; color:var(--gris); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.produit-carte .prix-mono { margin-top:8px; font-size:14px; }
.badge { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:var(--encre); color:#fff; font-size:11.5px; font-weight:700; }

/* promesses */
.promesses { background:var(--vapeur-clair); }
.promesses ul { list-style:none; margin:32px 0 0; padding:0; display:grid; gap:12px; }
.promesses li { padding:20px; border-radius:22px; background:rgba(255,255,255,.92); box-shadow:0 0 0 1px rgba(18,18,18,.05); transition:transform .3s var(--sortie); }
.rond-noir { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--encre); color:var(--ignite); }
.promesses h3 { margin-top:16px; font-size:15.5px; font-weight:700; letter-spacing:-.02em; }
.promesses p { margin-top:6px; font-size:13.5px; line-height:1.6; color:var(--gris); }

/* les étapes */
.etapes { display:grid; gap:40px; }
.etapes ol { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.etapes li { display:flex; align-items:flex-start; gap:20px; padding:20px; border-radius:22px; background:#fff; box-shadow:0 0 0 1px rgba(18,18,18,.05); }
.etapes .etape-num { font-family:var(--titre); font-weight:800; font-size:30px; line-height:1; color:var(--ignite); flex:none; min-width:42px; }
.etapes h3 { font-size:15.5px; font-weight:700; letter-spacing:-.02em; }
.etapes p { margin-top:4px; font-size:13.5px; line-height:1.6; color:var(--gris); }

/* questions */
.faq-bloc { background:#fff; }
.faq-bloc .dedans { display:grid; gap:32px; }
.questions details { border-bottom:1px solid var(--filet); }
.questions summary { list-style:none; cursor:pointer; min-height:58px; padding:14px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--titre); font-weight:700; font-size:15px; letter-spacing:-.015em; }
.questions summary::-webkit-details-marker { display:none; }
.questions .chevron { flex:none; color:var(--gris); transition:transform .3s var(--ressort); }
.questions details[open] .chevron { transform:rotate(180deg); }
.questions details p { padding:0 36px 16px 0; font-size:14px; line-height:1.65; color:var(--gris); }
@supports (interpolate-size:allow-keywords) {
  .questions { interpolate-size:allow-keywords; }
  .questions details::details-content { height:0; overflow:clip; transition:height .3s var(--sortie), content-visibility .3s allow-discrete; }
  .questions details[open]::details-content { height:auto; }
}

/* l'appel final */
.final { padding:32px 0 16px; }
.final-carte { position:relative; overflow:hidden; border-radius:28px; background:var(--ignite-fonce); color:#fff; padding:48px 24px; }
.final-carte::before { content:""; position:absolute; right:-64px; top:-64px; width:224px; height:224px; border-radius:50%; border:20px solid rgba(255,255,255,.15); }
.final-carte::after { content:""; position:absolute; left:33%; bottom:-80px; width:192px; height:192px; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.14), transparent); }
.final-carte > div { position:relative; max-width:42rem; }
.final-carte h2 { font-size:2rem; line-height:.98; letter-spacing:-.035em; }
.final-carte p { margin-top:16px; max-width:28rem; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.92); }
.final-carte .btn { margin-top:28px; }

/* pied de page */
.pied { margin-top:80px; background:#fff; border-top:1px solid rgba(18,18,18,.05); }
.pied .colonnes { display:grid; gap:36px; padding-top:56px; padding-bottom:48px; }
.pied .desc { margin-top:16px; max-width:24rem; font-size:14px; line-height:1.65; color:var(--gris); }
.pied .stripe { margin-top:14px; font-size:13px; font-weight:700; color:var(--gris-doux); }
.pied h3 { font-family:var(--texte); font-size:13px; font-weight:700; letter-spacing:0; color:var(--gris-doux); }
.pied ul { list-style:none; margin:10px 0 0; padding:0; }
.pied li a { display:inline-flex; align-items:center; min-height:40px; font-size:14px; font-weight:600; color:#3a3a42; transition:color .2s var(--sortie); }
.pied .bas { border-top:1px solid rgba(18,18,18,.05); }
.pied .bas .dedans { display:grid; gap:6px; padding-top:22px; padding-bottom:112px; font-size:12.5px; color:var(--gris-doux); }
.pied .bas a { display:inline-flex; align-items:center; min-height:44px; font-weight:600; color:#3a3a42; text-decoration:underline; text-underline-offset:3px; }

/* ---------- page produit ---------- */
.page-produit { padding-top:12px; padding-bottom:40px; }
.produit-haut { margin-top:8px; display:grid; gap:32px; }
.produit-haut > * { min-width:0; }
.galerie { position:relative; }
.scene { position:relative; overflow:hidden; border-radius:28px; background:var(--teinte, #fff); box-shadow:0 0 0 1px rgba(0,0,0,.05); }
.diapos { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; position:relative; }
.diapos::-webkit-scrollbar { display:none; }
.diapo { flex:0 0 100%; margin:0; scroll-snap-align:center; }
.diapo img { width:100%; aspect-ratio:1; object-fit:contain; mix-blend-mode:multiply; }
.compteur-photos { position:absolute; left:12px; bottom:12px; padding:4px 10px; border-radius:999px; background:rgba(18,18,18,.75); color:#fff; font-family:var(--chiffres); font-size:11.5px; font-weight:700; pointer-events:none; }
.fleches { position:absolute; right:12px; top:50%; transform:translateY(-50%); display:none; flex-direction:column; gap:8px; }
.fleches button { width:44px; height:44px; border-radius:50%; border:0; display:grid; place-items:center; background:rgba(255,255,255,.92); color:var(--encre); box-shadow:0 4px 12px rgba(18,18,18,.14); cursor:pointer; transition:transform .16s var(--sortie); }
.fleches button:active { transform:scale(.9); }
.vignettes { margin-top:12px; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:3px 3px 4px; }
.vignettes::-webkit-scrollbar { display:none; }
.vignettes button { flex:none; width:64px; height:64px; padding:0; border:0; border-radius:14px; overflow:hidden; background:var(--teinte, #fff); cursor:pointer; opacity:.6; box-shadow:0 0 0 1px rgba(0,0,0,.1); transition:opacity .2s var(--sortie), box-shadow .2s var(--sortie); }
.vignettes button[aria-pressed="true"] { opacity:1; box-shadow:0 0 0 2px var(--fond), 0 0 0 4px var(--ignite); }
.vignettes img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }

.infos-produit h1 { margin-top:12px; font-size:2rem; line-height:1.02; letter-spacing:-.035em; }
.infos-produit .lead { margin-top:12px; font-size:15px; line-height:1.65; color:var(--gris); }
.ligne-prix { margin-top:20px; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; }
.ligne-prix .prix-mono { font-size:26px; line-height:1; }
.ligne-prix .ttc { font-size:12.5px; font-weight:600; color:var(--gris-doux); }
.etiquette-choix { margin:24px 0 8px; font-size:12.5px; font-weight:700; color:var(--gris-doux); }
.offres { display:grid; gap:8px; }
.offre { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:60px; padding:12px 16px; border:1px solid var(--filet-fort); border-radius:18px; background:#fff; text-align:left; cursor:pointer; transition:background-color .2s var(--sortie), border-color .2s var(--sortie), color .2s var(--sortie), box-shadow .2s var(--sortie); }
.offre .gauche { display:flex; align-items:center; gap:12px; min-width:0; }
.offre .puce { flex:none; width:20px; height:20px; border-radius:50%; border:2px solid rgba(18,18,18,.25); display:grid; place-items:center; transition:border-color .2s var(--sortie); }
.offre .puce::after { content:""; width:10px; height:10px; border-radius:50%; background:var(--ignite); transform:scale(0.3); opacity:0; transition:transform .25s var(--ressort), opacity .2s var(--sortie); }
.offre .nom-offre { display:block; font-size:14.5px; font-weight:700; line-height:1.25; }
.offre .note { display:block; margin-top:2px; font-size:12px; color:var(--gris-doux); }
.offre .prix-mono { font-size:13.5px; white-space:nowrap; }
.offre[aria-checked="true"] { background:var(--encre); border-color:var(--encre); color:#fff; box-shadow:0 12px 28px -14px rgba(18,18,18,.6); }
.offre[aria-checked="true"] .puce { border-color:var(--ignite); }
.offre[aria-checked="true"] .puce::after { transform:none; opacity:1; }
.offre[aria-checked="true"] .note { color:rgba(255,255,255,.72); }
.offres:has(> .offre:only-child) .puce { display:none; }
.bouton-ajout { margin-top:16px; }
.ajoute { min-height:1.5em; margin-top:10px; font-size:14px; font-weight:700; color:var(--ok); }
.ajoute a { text-decoration:underline; text-underline-offset:3px; }
.ajoute .btn { margin-top:8px; }
.rassure { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.rassure li { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.55; color:var(--gris); }
.rassure .ic { margin-top:2px; color:var(--gris-doux); }
.rassure strong { color:var(--encre); }
.carte-blanche { margin-top:24px; padding:20px; border-radius:22px; background:#fff; box-shadow:0 0 0 1px rgba(18,18,18,.05); }
.carte-blanche h2 { font-size:15.5px; font-weight:700; letter-spacing:-.02em; }
.points { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:9px; }
.points li { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.55; color:#45454e; }
.points li::before { content:""; flex:none; width:6px; height:6px; margin-top:8px; border-radius:50%; background:var(--ignite); }
.carte-blanche.questions { padding-top:4px; padding-bottom:4px; }
.carte-blanche.questions details:last-child { border-bottom:0; }
.note-vapeur { margin-top:16px; display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:16px; background:var(--vapeur-clair); font-size:13px; line-height:1.55; color:#45454e; }
.note-vapeur .ic { color:var(--gris-doux); }
.note-avis { margin-top:12px; padding:16px; border-radius:18px; border:1.5px dashed rgba(18,18,18,.18); }
.note-avis strong { font-family:var(--titre); font-size:14.5px; letter-spacing:-.015em; }
.note-avis p { margin-top:4px; font-size:13.5px; line-height:1.6; color:var(--gris); }
.autres { margin-top:64px; }
.autres h2 { font-size:1.6rem; letter-spacing:-.03em; }
.autres .grille { margin-top:20px; }

/* barre d'achat du bas (téléphone) */
.barre { position:fixed; inset:auto 0 0 0; z-index:40; padding:12px 16px max(12px, env(safe-area-inset-bottom)); background:rgba(249,249,251,.95); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border-top:1px solid rgba(18,18,18,.1); transform:translateY(110%); transition:transform .3s var(--ressort); }
.barre.visible { transform:none; }
.barre .dans { max-width:32rem; margin:0 auto; display:flex; align-items:center; gap:12px; }
.barre .infos { flex:1; min-width:0; }
.barre .libelle { font-size:12px; font-weight:700; color:var(--gris-doux); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.barre .prix-mono { font-size:17px; line-height:1.2; }
.barre .btn { min-height:48px; padding:0 22px; font-size:14.5px; }

/* « ajouté au panier » */
.toast { position:fixed; left:16px; right:16px; bottom:96px; z-index:50; max-width:28rem; margin:0 auto; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; background:var(--encre); color:#fff; box-shadow:0 20px 50px -12px rgba(18,18,18,.55); opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .25s var(--sortie), transform .3s var(--sortie); }
.toast.visible { opacity:1; transform:none; pointer-events:auto; }
.toast .rond { flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--ignite-fonce); }
.toast .texte { flex:1; min-width:0; }
.toast .petit { font-size:12px; font-weight:700; color:rgba(255,255,255,.7); }
.toast .quoi { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toast a { flex:none; display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px; background:#fff; color:var(--encre); font-size:13px; font-weight:700; }

/* ---------- panier ---------- */
.page-panier { padding-top:32px; padding-bottom:40px; min-height:calc(100svh - 110px); } /* place réservée : le pied ne saute pas quand le panier se charge */
.titre-panier { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.titre-panier h1 { font-size:2rem; letter-spacing:-.035em; }
.titre-panier .compte { font-size:13px; font-weight:700; color:var(--gris-doux); white-space:nowrap; }
.panier-grille { margin-top:24px; display:grid; gap:20px; }
.lignes { padding:0 16px; border-radius:24px; background:#fff; box-shadow:0 0 0 1px rgba(18,18,18,.05); }
.ligne { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--filet); }
.ligne:last-child { border-bottom:0; }
.ligne .vignette { flex:none; width:76px; height:84px; border-radius:16px; overflow:hidden; background:var(--fond); box-shadow:0 0 0 1px rgba(18,18,18,.08); }
.ligne .vignette img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.ligne .milieu { flex:1; min-width:0; }
.ligne .haut { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.ligne .nom { display:block; font-family:var(--titre); font-weight:700; font-size:15px; line-height:1.25; letter-spacing:-.02em; }
.ligne .version { margin-top:2px; font-size:12.5px; color:var(--gris-doux); }
.retirer { flex:none; width:44px; height:44px; margin:-10px -10px 0 0; border:0; border-radius:50%; background:none; display:grid; place-items:center; color:var(--gris-doux); cursor:pointer; transition:background-color .2s var(--sortie), color .2s var(--sortie); }
.ligne .bas { margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.quantite { display:inline-flex; align-items:center; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px var(--filet-fort); }
.quantite button { width:42px; height:42px; border:0; border-radius:50%; background:none; display:grid; place-items:center; color:#3a3a42; cursor:pointer; }
.quantite button:disabled { opacity:.35; cursor:default; }
.quantite output { width:26px; text-align:center; font-family:var(--chiffres); font-size:13.5px; font-weight:700; }
.ligne .prix-mono { font-size:14px; }
.recap { padding:20px; border-radius:24px; background:var(--encre); color:#fff; }
.recap h2 { font-size:16.5px; font-weight:700; letter-spacing:-.02em; }
.recap .lignes-recap { margin-top:16px; display:grid; gap:10px; font-size:14px; color:rgba(255,255,255,.72); }
.recap .lignes-recap div { display:flex; justify-content:space-between; gap:12px; }
.recap .lignes-recap .prix-mono { color:#fff; }
.recap .offerte { font-weight:700; color:var(--ignite); }
.recap .total { margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.15); display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.recap .total span:first-child { font-size:13px; font-weight:700; color:rgba(255,255,255,.72); }
.recap .total .prix-mono { font-size:24px; }
.recap .btn { margin-top:16px; }
.recap .erreur { margin-top:12px; min-height:0; font-size:13px; font-weight:600; color:#ffc9bd; }
.recap .erreur:empty { display:none; }
.recap .sous-btn { margin-top:12px; text-align:center; font-size:12px; line-height:1.55; color:rgba(255,255,255,.66); }
.recap .sous-btn a { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.rassure-panier { margin-top:12px; padding:16px; border-radius:20px; background:#fff; box-shadow:0 0 0 1px rgba(18,18,18,.05); }
.rassure-panier .rassure { margin-top:0; }
.vide { max-width:28rem; margin:0 auto; padding:56px 0 32px; text-align:center; }
.vide .rond-vide { width:64px; height:64px; margin:0 auto; border-radius:50%; display:grid; place-items:center; background:#fff; color:#9a9aa3; box-shadow:0 0 0 1px rgba(18,18,18,.08); }
.vide h1 { margin-top:20px; font-size:1.8rem; letter-spacing:-.03em; }
.vide p { margin-top:8px; font-size:14.5px; line-height:1.6; color:var(--gris); }
.vide .btn { margin-top:24px; }
.chargement { padding:40px 0; color:var(--gris); }

/* ---------- merci ---------- */
.page-merci { padding:40px 0; }
.merci-carte { max-width:32rem; margin:0 auto; padding:28px 24px; border-radius:28px; background:#fff; text-align:center; box-shadow:0 0 0 1px rgba(18,18,18,.05); }
.merci-carte .coche { width:64px; height:64px; margin:0 auto; border-radius:50%; display:grid; place-items:center; background:var(--ignite-fonce); color:#fff; }
.merci-carte .coche path { stroke-dasharray:24; stroke-dashoffset:24; animation:trace-coche .6s .25s var(--sortie) forwards; }
@keyframes trace-coche { to { stroke-dashoffset:0; } }
.merci-carte h1 { margin-top:20px; font-size:1.8rem; line-height:1.05; letter-spacing:-.03em; }
.merci-carte .texte { margin-top:8px; font-size:14.5px; line-height:1.6; color:var(--gris); }
.merci-carte .infos { margin-top:24px; display:grid; gap:10px; padding:16px; border-radius:18px; background:var(--fond); text-align:left; }
.merci-carte .infos p { display:flex; align-items:flex-start; gap:12px; font-size:13.5px; line-height:1.55; color:#45454e; }
.merci-carte .infos .ic { margin-top:1px; color:var(--ignite-fonce); }
.merci-carte .infos strong { color:var(--encre); }
.merci-carte .btn { margin-top:24px; }

/* ---------- page légale ---------- */
.page-legale { max-width:46rem; margin:0 auto; padding:32px 16px 40px; line-height:1.65; }
.page-legale h1 { font-size:1.9rem; line-height:1.1; }
.page-legale h2 { font-size:1.3rem; margin-top:40px; padding-top:12px; border-top:1px solid var(--filet); }
.page-legale h3 { font-size:1.05rem; margin-top:24px; letter-spacing:-.015em; }
.page-legale p, .page-legale ul, .page-legale ol { margin:0 0 12px; }
.page-legale a:not([class]) { color:var(--ignite-fonce); text-decoration:underline; text-underline-offset:3px; }
.page-legale .a { background:#fff3cd; color:#5c4502; padding:12px 14px; border-radius:14px; font-weight:600; }
.page-legale .sommaire { margin:16px 0; padding:14px 18px; border-radius:20px; background:#fff; box-shadow:0 0 0 1px rgba(18,18,18,.06); }
.page-legale .sommaire a { display:inline-flex; align-items:center; min-height:40px; font-weight:600; color:var(--encre); text-decoration:none; }
.page-legale .encadre { margin:0 0 12px; padding:6px 18px; border-radius:18px; background:#fff; box-shadow:0 0 0 1px rgba(18,18,18,.06); }
.page-legale .formulaire { margin:0 0 12px; padding:10px 18px; border-radius:18px; background:#fff; border:2px dashed rgba(18,18,18,.2); }
.page-legale table { border-collapse:collapse; width:100%; font-size:14.5px; display:block; overflow-x:auto; }
.page-legale th, .page-legale td { border:1px solid var(--filet-fort); padding:8px; text-align:left; vertical-align:top; }
.page-legale th { background:#f1f1f5; }

/* ---------- mouvement au défilement (natif, hors du fil principal) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference) {
    .grille > * { animation:monte linear both; animation-timeline:view(); animation-range:entry 0% cover 28%; }
    .grille > :nth-child(2n) { animation-range:entry 8% cover 34%; }
    @keyframes monte { from { opacity:.35; transform:translateY(36px); } }
    .etapes li { animation:glisse linear both; animation-timeline:view(); animation-range:entry 0% cover 30%; }
    @keyframes glisse { from { opacity:.35; transform:translateX(-28px); } }
    .final-carte { animation:deplie linear both; animation-timeline:view(); animation-range:entry 0% cover 40%; }
    @keyframes deplie { from { clip-path:inset(8% 6% 8% 6% round 28px); } }
  }
}

/* ---------- tablette et ordinateur ---------- */
@media (min-width:640px) {
  .dedans { padding:0 24px; }
  .bouton-panier .mot { display:inline; }
  .ouverture h1 { font-size:3.75rem; }
  .appels { flex-direction:row; }
  .grille { gap:24px; }
  .produit-carte h3 { font-size:16.5px; }
  .promesses ul { grid-template-columns:1fr 1fr; gap:16px; }
  .bloc h2 { font-size:2.6rem; }
  .final-carte { padding:64px 48px; }
  .final-carte h2 { font-size:2.9rem; }
  .infos-produit h1 { font-size:2.6rem; }
  .fleches { display:flex; }
  .titre-panier h1 { font-size:2.6rem; }
  .merci-carte { padding:40px; }
  .lignes { padding:0 24px; }
}
@media (min-width:768px) {
  .nav { display:flex; }
  .pied .colonnes { grid-template-columns:1fr 1fr; }
}
@media (min-width:1024px) {
  .ouverture .dedans { grid-template-columns:1.05fr .95fr; gap:24px; padding-top:80px; padding-bottom:96px; }
  .ouverture h1 { font-size:4.4rem; }
  .grille { grid-template-columns:repeat(3, 1fr); }
  .grille > .vedette { grid-column:auto; }
  .produit-carte.vedette .photo img { aspect-ratio:4/5; object-fit:cover; }
  .promesses ul { grid-template-columns:repeat(4, 1fr); }
  .bloc { padding:96px 0; }
  .etapes { grid-template-columns:.8fr 1.2fr; gap:64px; }
  .faq-bloc .dedans { grid-template-columns:.8fr 1.2fr; gap:64px; }
  .pied .colonnes { grid-template-columns:2fr 1fr 1fr; }
  .pied .bas .dedans { padding-bottom:24px; grid-template-columns:1fr auto; }
  .produit-haut { grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
  .galerie { position:sticky; top:84px; }
  .page-produit { padding-bottom:64px; }
  .barre { display:none; }
  .toast { bottom:24px; }
  .panier-grille { grid-template-columns:1.1fr .9fr; gap:40px; align-items:start; }
  .panier-grille aside { position:sticky; top:96px; }
}

@media (hover:hover) and (pointer:fine) {
  .logo:hover .point { transform:scale(1.5); }
  .nav a:hover, .retour-lien:hover { color:var(--encre); }
  .btn-orange:hover { background:#b83200; }
  .btn-blanc:hover { box-shadow:inset 0 0 0 1px rgba(18,18,18,.3); }
  .btn-noir:hover, .bouton-panier:hover { background:#000; }
  .produit-carte:hover .photo img { transform:scale(1.05); }
  .promesses li:hover { transform:translateY(-4px); }
  .offre:not([aria-checked="true"]):hover { border-color:rgba(18,18,18,.3); }
  .vignettes button:hover { opacity:1; }
  .retirer:hover { background:rgba(18,18,18,.05); color:var(--encre); }
  .quantite button:not(:disabled):hover { background:rgba(18,18,18,.05); }
  .pied li a:hover { color:var(--ignite-fonce); }
  .questions summary:hover .chevron { color:var(--encre); }
}
@media (hover:none) {
  .produit-carte:hover .photo img, .promesses li:hover { transform:none; }
  .logo:hover .point { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
  .merci-carte .coche path { stroke-dashoffset:0; }
}