/* Feuille unique du site. Aucun framework : le poids sert le score EcoIndex. */
@font-face{font-family:'Playfair Display';src:url('/assets/fonts/playfair-display.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/assets/fonts/dm-sans.woff2') format('woff2');font-weight:400 600;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:'DM Sans',system-ui,-apple-system,Segoe UI,sans-serif;
     background:hsl(var(--background));color:hsl(var(--foreground));line-height:1.6}
h1,h2,h3,.marque{font-family:'Playfair Display',Georgia,serif;font-weight:600;line-height:1.2}
a{color:inherit}
img{max-width:100%;height:auto}
.conteneur{width:min(1180px,100% - 2.5rem);margin-inline:auto}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:10;background:hsl(var(--primary));color:hsl(var(--primary-foreground));padding:.6rem 1rem;border-radius:.4rem}

.entete{border-bottom:1px solid hsl(var(--border));background:hsl(var(--card));position:sticky;top:0;z-index:5}
.entete-in{display:flex;align-items:center;gap:1.5rem;padding:.9rem 0;flex-wrap:wrap}
.marque{font-size:1.3rem;text-decoration:none;letter-spacing:.02em}
.entete nav{display:flex;gap:1.1rem;margin-inline-end:auto;flex-wrap:wrap}
.entete nav a,.actions a{text-decoration:none;font-size:.94rem}
.entete nav a:hover,.actions a:hover{color:hsl(var(--primary))}
.actions{display:flex;gap:1rem;align-items:center}

.grille{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin:2rem 0}
.carte{border:1px solid hsl(var(--border));border-radius:.6rem;overflow:hidden;background:hsl(var(--card));display:flex;flex-direction:column}
.carte img{aspect-ratio:3/4;object-fit:cover;width:100%}
.carte-corps{padding:.9rem 1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.carte h3{font-size:1rem;margin:0}
.carte a{text-decoration:none}
.prix{font-weight:600;color:hsl(var(--primary))}
.prix-barre{text-decoration:line-through;color:hsl(var(--muted-foreground));font-weight:400;margin-inline-end:.4rem}
.rupture{color:hsl(var(--muted-foreground));font-size:.85rem}

.bouton{display:inline-block;background:hsl(var(--primary));color:hsl(var(--primary-foreground));
        border:0;border-radius:.4rem;padding:.65rem 1.2rem;font:inherit;cursor:pointer;text-decoration:none}
.bouton:hover{opacity:.9}
.bouton[disabled]{opacity:.5;cursor:not-allowed}

.fiche{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:2rem 0}
@media(max-width:820px){.fiche{grid-template-columns:1fr}}
.prose{max-width:70ch}
.prose h2{margin-top:2rem}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid hsl(var(--border))}
.tableau-defile{overflow-x:auto}

.pied{margin-top:4rem;border-top:1px solid hsl(var(--border));background:hsl(var(--card));padding:2rem 0;font-size:.9rem}
.pied nav{display:flex;gap:1.2rem;flex-wrap:wrap;margin-bottom:.8rem}
.pied a{text-decoration:none}

.hero{padding:3rem 0 1rem}
.hero h1{font-size:clamp(1.9rem,4vw,2.9rem);margin:0 0 .8rem}
.fil{font-size:.88rem;color:hsl(var(--muted-foreground));margin:1.2rem 0}
.fil a{text-decoration:none}
.filtres{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin:1.2rem 0}
.filtres input,.filtres select,form input[type=email],form input[type=number],form input[type=password],form input[type=text]{
  padding:.55rem .7rem;border:1px solid hsl(var(--input));border-radius:.4rem;font:inherit;background:hsl(var(--card));color:inherit}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.marque-produit{color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.sur-demande{color:hsl(var(--muted-foreground));font-weight:500;font-size:.92rem}
.recap{margin:2rem 0;padding:1.2rem 1.4rem;border:1px solid hsl(var(--border));border-radius:.6rem;background:hsl(var(--card));max-width:26rem}
.recap p{margin:.35rem 0;display:flex;justify-content:space-between;gap:1rem}
.recap .total{font-size:1.15rem;border-top:1px solid hsl(var(--border));padding-top:.6rem;margin-top:.6rem}
.ligne-qte{display:flex;gap:.4rem;align-items:center}
.lien{background:none;border:0;padding:0;font:inherit;color:hsl(var(--primary));text-decoration:underline;cursor:pointer}
.alerte{padding:.7rem 1rem;border-radius:.4rem;background:hsl(var(--accent));color:hsl(var(--accent-foreground))}
.champ{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem}
.champ label{font-size:.9rem;font-weight:500}
form.formulaire{max-width:34rem}
fieldset{border:1px solid hsl(var(--border));border-radius:.5rem;padding:1rem 1.2rem;margin:0 0 1.2rem}
legend{padding:0 .4rem;font-weight:600}
.onglets{display:flex;gap:1.1rem;flex-wrap:wrap;margin:1.2rem 0 2rem;padding-bottom:.7rem;border-bottom:1px solid hsl(var(--border))}
.onglets a{text-decoration:none;font-size:.94rem}
.onglets a:hover{color:hsl(var(--primary))}
.grille-stats{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:1.5rem 0 2.5rem}
.stat{border:1px solid hsl(var(--border));border-radius:.6rem;padding:1.1rem;background:hsl(var(--card));display:flex;flex-direction:column;gap:.2rem}
.stat .chiffre{font-family:'Playfair Display',serif;font-size:2rem;line-height:1;color:hsl(var(--primary))}
.stat span:last-child{font-size:.87rem;color:hsl(var(--muted-foreground))}
textarea{padding:.55rem .7rem;border:1px solid hsl(var(--input));border-radius:.4rem;font:inherit;background:hsl(var(--card));color:inherit;width:100%}
.bloc-message{border:1px solid hsl(var(--border));border-radius:.6rem;padding:1.2rem 1.4rem;margin-bottom:1.6rem;max-width:46rem}
.corps-fige{background:hsl(var(--muted));border:1px dashed hsl(var(--border));border-radius:.4rem;padding:.8rem 1rem;opacity:.85}
.onglets a.actif{color:hsl(var(--primary));font-weight:600}
/* Tunnel Smart Serum — charte bleue propre a ce front */
.ss-hero{padding:2rem 0 1rem;text-align:center}
.ss-logo{margin:0 auto 1.5rem;display:block}
.ss-hero-in{display:grid;gap:2rem;grid-template-columns:1fr 1fr;align-items:center;text-align:left}
@media(max-width:800px){.ss-hero-in{grid-template-columns:1fr;text-align:center}}
.ss-hero h1{font-size:clamp(1.8rem,4vw,2.8rem);margin:0 0 .8rem}
.ss-accroche{font-size:1.05rem;color:hsl(var(--muted-foreground))}
.ss-prix{font-size:1.5rem;margin:1.2rem 0}
.ss-prix strong{color:hsl(var(--primary))}
.bouton-xl{font-size:1.05rem;padding:.9rem 2rem}
.ss-bloc{margin:3rem 0;text-align:center}
.ss-bloc h2{margin-bottom:1.2rem}
.ss-bloc img{border-radius:.6rem}
.ss-final{padding:2.5rem 1rem;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:.8rem}
.ss-upsell{text-align:left}
/* Tunnel Smart Serum */
.ss-hero{padding:2rem 0 1rem;text-align:center}
.ss-logo{margin:0 auto 1.5rem;display:block}
.ss-hero-in{display:grid;gap:2rem;grid-template-columns:1fr 1fr;align-items:center;text-align:left}
@media(max-width:800px){.ss-hero-in{grid-template-columns:1fr;text-align:center}}
.ss-hero h1{font-size:clamp(1.8rem,4vw,2.8rem);margin:0 0 .8rem}
.ss-accroche{font-size:1.05rem;color:hsl(var(--muted-foreground))}
.ss-prix{font-size:1.5rem;margin:1.2rem 0}
.ss-prix strong{color:hsl(var(--primary))}
.bouton-xl{font-size:1.05rem;padding:.9rem 2rem}
.ss-bloc{margin:3rem 0;text-align:center}
.ss-bloc h2{margin-bottom:1.2rem}
.ss-bloc img{border-radius:.6rem}
.ss-final{padding:2.5rem 1rem;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:.8rem}
.ss-upsell{text-align:left}

/* ── Passerelle pour le widget d'accessibilité ───────────────────────────────
   Le widget attend --a11y-btn-bg, --a11y-scrolltop-bg, --ink, --line, --font-*.
   On les branche sur les tokens d'origine du site plutôt que de les renommer. */
:root{
  --a11y-btn-bg: hsl(var(--primary));
  --a11y-scrolltop-bg: hsl(var(--foreground));
  --navy: hsl(var(--primary));
  --ink: hsl(var(--foreground));
  --line: hsl(var(--border));
  --border: hsl(var(--border));
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
}
@font-face{font-family:'OpenDyslexic';src:url('/assets/fonts/opendyslexic-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'OpenDyslexic';src:url('/assets/fonts/opendyslexic-700.woff2') format('woff2');font-weight:700;font-display:swap}

/* Page « Performances du site » */
.perf-maj{color:hsl(var(--muted-foreground));font-size:.9rem}
.perf-bloc{margin:2.5rem 0;padding-bottom:1.5rem;border-bottom:1px solid hsl(var(--border))}
.perf-bloc:last-of-type{border-bottom:0}
.perf-chiffre{font-family:'Playfair Display',serif;font-size:2.6rem;line-height:1;color:hsl(var(--primary));margin:1rem 0}
.perf-chiffre span{display:block;font-family:'DM Sans',sans-serif;font-size:.95rem;color:hsl(var(--muted-foreground));margin-top:.4rem}

/* Pages « À propos », solution, marques, espace pro (reprises de l'original) */
.badge{display:inline-block;padding:.2rem .9rem;border-radius:999px;background:var(--or-clair,#f3e7c9);font-size:.65rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.centre{text-align:center}
.centre .prose{margin-inline:auto}
.hero-duo{display:grid;gap:2rem;align-items:center}
.hero-duo img{width:100%;height:auto;border-radius:1rem}
@media (min-width:768px){.hero-duo{grid-template-columns:1fr 1fr}}
.liste-defis{display:grid;gap:.75rem;padding:0;list-style:none}
@media (min-width:768px){.liste-defis{grid-template-columns:1fr 1fr}}
.liste-defis li{background:#fff;border-radius:.75rem;padding:1rem}
.galerie img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:1rem}
a.carte{display:flex;justify-content:space-between;align-items:center;gap:1rem;text-decoration:none;color:inherit}