/* Boutique Docteur B — culottes menstruelles pour ados */
:root {
  --noir: #111111;
  --blanc: #ffffff;
  --peche: #FFE7DA;
  --sable: #F4EEE8;
  --beige: #E9D9C8;
  --gris-fond: #F2EFEB;
  --orange: #E8580C;
  --brique: #B8430A;
  --texte: #4A3D33;
  --doux: #6B5D52;
  --ligne: #F0E6DE;
  --ligne-2: #DCCFC5;
  --vert: #0E7A55;
  --repere: #E8580C;
  --titre: "DM Serif Display", Georgia, serif;
  --capitales: "Oswald", "Arial Narrow", sans-serif;
  --corps: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond, #fff); color: var(--noir); font: 400 17px/1.6 var(--corps); }
img { display: block; max-width: 100%; }
a { color: var(--noir); text-underline-offset: 3px; }
a:hover { color: var(--brique); }
h1, h2, h3 { margin: 0; line-height: 1.05; }
p { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 32px; }
.wrap-etroit { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } .wrap-etroit { padding: 0 16px; } }

/* --- typographie --- */
.serif { font-family: var(--titre); font-weight: 400; }
.serif em { font-style: italic; }
.caps { font-family: var(--capitales); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; }
.surtitre { font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brique); }
.chapo { font-size: 18px; color: var(--texte); line-height: 1.6; }
.h-page { font-size: clamp(40px, 6vw, 72px); }
.h-section { font-size: clamp(32px, 4.4vw, 52px); }

/* --- boutons --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border-radius: var(--rayon-btn, 999px); letter-spacing: var(--btn-espace, 0); text-transform: var(--btn-casse, none); border: 0; font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn-orange { background: var(--orange); color: #fff; font-size: 19px; }
.btn-orange:hover { background: #CF4D08; color: #fff; }
.btn-noir { background: var(--noir); color: #fff; }
.btn-noir:hover { background: #333; color: #fff; }
.btn-contour { background: transparent; color: var(--noir); border: 1.5px solid var(--noir); }
.btn-blanc { background: #fff; color: var(--noir); }
.btn-plein { width: 100%; }
.pilule { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--rayon-btn, 999px); border: 1px solid var(--ligne-2); background: #fff; color: var(--noir); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.pilule[aria-pressed="true"], .pilule.actif { background: var(--noir); border-color: var(--noir); color: #fff; }

/* --- en-tête --- */
.bandeau { background: var(--peche); color: #3A1A0A; font-size: 14px; font-weight: 500; text-align: center; padding: 9px 16px; }
.entete { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ligne); }
.entete .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.logo { font-family: var(--capitales); font-weight: 700; font-size: 24px; letter-spacing: 0.28em; text-decoration: none; color: var(--noir); white-space: nowrap; }
.menu { display: flex; flex-wrap: wrap; gap: 4px 22px; flex: 1; font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.menu a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.menu a[aria-current="page"] { border-bottom-color: var(--orange); }
.outils { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.outils a, .outils button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; background: none; border: 0; color: var(--noir); text-decoration: none; font-weight: 600; cursor: pointer; }
.compteur { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; }
.burger { display: none !important; }
@media (max-width: 1180px) {
  .burger { display: inline-flex !important; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; flex-direction: column; padding: 8px 16px 18px; border-bottom: 1px solid var(--ligne); font-size: 16px; }
  .menu.ouvert { display: flex; }
  .menu a { padding: 12px 0; border-bottom: 1px solid var(--ligne); }
  .entete .wrap { position: relative; }
}

/* --- héros --- */
.heros { position: relative; color: #fff; background: #8a5a44; }
.heros img { width: 100%; height: min(78vh, 760px); min-height: 520px; object-fit: cover; object-position: 50% 45%; }
.heros .voile { position: absolute; inset: 0; background: rgba(60,22,8,.32); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; gap: 24px; padding: 24px 20px 64px; }
.heros h1 { font-family: var(--titre); font-weight: 400; font-size: clamp(44px, 7.4vw, 92px); line-height: .98; max-width: 1060px; }
.heros p { font-size: 19px; max-width: 560px; }

.engagements { background: var(--peche); }
.engagements .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding-top: 20px; padding-bottom: 20px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #3A1A0A; }
.engagements div { display: flex; align-items: center; gap: 12px; }
.engagements svg { width: 30px; height: 30px; flex: none; color: var(--orange); }

/* --- sections --- */
.section { padding: 80px 0; }
.section-sable { background: var(--sable); }
.section-peche { background: var(--peche); }
.tete-section { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
.centre { text-align: center; }

/* vignettes rondes */
.ronds { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.rond { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 150px; text-decoration: none; font-weight: 600; text-align: center; }
.rond img { width: 132px; height: 132px; border-radius: 999px; object-fit: cover; background: var(--gris-fond); }
.rond img.contenu { object-fit: contain; padding: 14px; }

/* grille produits */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 20px; }
.carte { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--noir); }
.carte .visuel { position: relative; background: var(--gris-fond); border-radius: var(--rayon, 14px); overflow: hidden; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; }
.carte .visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.carte .visuel img.contenu { width: 62%; height: auto; object-fit: contain; }
.carte:hover .visuel img { transform: scale(1.03); }
.badge { position: absolute; top: 12px; left: 12px; background: var(--noir); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.badge-orange { background: var(--orange); }
.carte .flux { font-size: 14px; color: var(--doux); }
.gouttes { color: var(--brique); letter-spacing: 2px; }
.carte h3 { font-size: 18px; font-weight: 700; font-family: var(--corps); }
.carte .prix { font-size: 17px; font-weight: 600; }

/* bloc partagé image / texte */
.duo { display: flex; flex-wrap: wrap; }
.duo > img { flex: 1 1 520px; min-width: 0; height: 620px; object-fit: cover; }
.duo .texte { flex: 1 1 420px; min-width: 0; padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; }
@media (max-width: 640px) { .duo > img { height: 380px; } .duo .texte { padding: 40px 20px; } }

/* collage polaroïd */
.collage { position: relative; height: 560px; }
.collage figure { position: absolute; margin: 0; background: #fff; padding: 12px 12px 42px; box-shadow: 0 6px 18px rgba(60,30,10,.12); }
.collage img { width: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .collage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .collage figure { position: static; transform: none !important; width: auto !important; }
  .collage img { height: 200px !important; }
}

/* cartes guides */
.guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.guide { display: flex; flex-direction: column; gap: 10px; padding: 36px; border-radius: 20px; text-decoration: none; }
.guide-noir { background: var(--noir); color: #fff; }
.guide-noir:hover { color: #fff; background: #222; }
.guide-sable { background: var(--sable); }
.guide .caps { font-size: 34px; }

/* avis */
.avis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.avis div { background: #fff; border: 1px dashed var(--ligne-2); border-radius: 16px; padding: 24px; min-height: 160px; color: var(--doux); }

/* journal */
.articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.article-carte { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.article-carte img { width: 100%; height: 280px; object-fit: cover; border-radius: 14px; }
.article-carte .serif { font-size: 26px; line-height: 1.15; }

/* article */
.article h1 { font-family: var(--titre); font-weight: 400; font-size: clamp(38px, 5.4vw, 60px); }
.article .couverture { width: 100%; height: 440px; object-fit: cover; border-radius: 18px; margin: 32px 0; }
.article h2 { font-family: var(--titre); font-weight: 400; font-size: 32px; margin: 40px 0 12px; }
.article p, .article li { color: var(--texte); font-size: 18px; line-height: 1.7; }
.article p + p { margin-top: 14px; }
.article ul { padding-left: 22px; }

/* faq */
.faq details { border-top: 1px solid var(--ligne); padding: 20px 4px; }
.faq details:last-child { border-bottom: 1px solid var(--ligne); }
.faq summary { font-size: 18px; font-weight: 600; cursor: pointer; }
.faq details p { margin-top: 12px; color: var(--texte); }

/* fiche produit */
.fiche { display: flex; flex-wrap: wrap; gap: 48px; padding: 28px 0 80px; }
.galerie { flex: 1 1 620px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.galerie img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; background: var(--gris-fond); }
.galerie img.contenu { object-fit: contain; background: var(--peche); padding: 24px; }
.achat { flex: 1 1 400px; min-width: 0; max-width: 520px; display: flex; flex-direction: column; gap: 18px; }
.achat h1 { font-family: var(--capitales); font-weight: 700; font-size: 52px; line-height: .95; text-transform: uppercase; }
.achat h1 span { display: block; font-size: 28px; }
.coches { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.coches li { display: flex; gap: 10px; align-items: center; }
.coches svg { width: 20px; height: 20px; flex: none; color: var(--orange); }
.formules { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; margin: 0; }
.formule { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; padding: 12px 18px; border-radius: 14px; border: 1px solid var(--ligne-2); background: #fff; text-align: left; cursor: pointer; }
.formule[aria-pressed="true"] { border: 2px solid var(--noir); }
.formule small { display: block; color: var(--doux); font-size: 14px; }
.formule b { font-size: 18px; }
.tailles { display: flex; flex-wrap: wrap; gap: 8px; }
.taille { min-width: 54px; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--ligne-2); background: #fff; font-weight: 600; cursor: pointer; }
.taille[aria-pressed="true"] { background: var(--noir); color: #fff; border-color: var(--noir); }
.dispo { color: var(--vert); font-weight: 700; }
.message { min-height: 24px; font-weight: 600; color: var(--vert); }
.message.erreur { color: #B42318; }

/* quiz */
.quiz { background: #fff; border-radius: 20px; padding: 32px; border: 1px solid var(--ligne); }
.quiz fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.quiz legend { font-weight: 700; font-size: 19px; margin-bottom: 12px; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.resultat { margin-top: 8px; padding: 24px; border-radius: 16px; background: var(--peche); }
.resultat[hidden] { display: none; }

/* panier */
.lignes { display: flex; flex-direction: column; gap: 14px; }
.ligne { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--ligne); border-radius: 14px; }
.ligne img { width: 84px; height: 108px; object-fit: cover; border-radius: 10px; background: var(--gris-fond); }
.ligne .infos { flex: 1 1 140px; min-width: 0; }
@media (max-width: 640px) { .ligne { flex-wrap: wrap; } .ligne img { width: 64px; height: 82px; } }
.qte { display: flex; align-items: center; gap: 6px; }
.qte button { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--ligne-2); background: #fff; cursor: pointer; font-weight: 700; }
.recap { background: var(--sable); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.recap .total { display: flex; justify-content: space-between; font-size: 22px; font-weight: 700; }
.vide { padding: 48px; text-align: center; background: var(--sable); border-radius: 18px; }

/* pied de page */
.pied { background: var(--noir); color: #fff; }
.pied .wrap { display: flex; flex-wrap: wrap; gap: 40px 72px; padding-top: 64px; padding-bottom: 48px; }
.pied a { color: #D9CEC5; text-decoration: none; }
.pied a:hover { color: #fff; }
.pied .col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.pied .col b { color: #fff; }
.pied .marque { flex: 1 1 340px; }
.lettre { display: flex; max-width: 420px; }
.lettre input { flex: 1; min-height: 48px; padding: 0 16px; border: 1px solid #5A4D43; border-radius: 999px 0 0 999px; background: transparent; color: #fff; font: inherit; }
.lettre button { min-height: 48px; padding: 0 22px; border: 0; border-radius: 0 999px 999px 0; background: var(--orange); color: #fff; font-weight: 700; cursor: pointer; }
.mentions { border-top: 1px solid #2A2A2A; }
.mentions .wrap { padding-top: 18px; padding-bottom: 18px; font-size: 13px; color: #A99C92; display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* essayage virtuel */
.essayage { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.essayage-gauche { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.essayage-droite { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 90px; }
@media (max-width: 900px) { .essayage-droite { position: static; } }
.onglets { display: flex; flex-wrap: wrap; gap: 8px; }
.carte-blanche { background: #fff; border-radius: 20px; padding: 24px; border: 1px solid var(--ligne); }
.ligne-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.ligne-choix select { flex: 1 1 150px; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--ligne-2); background: #fff; font: inherit; }
.liste-choix { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.liste-choix li { display: flex; align-items: center; gap: 8px; background: var(--peche); border-radius: 12px; padding: 8px 8px 8px 14px; }
.liste-choix button { margin-left: auto; width: 36px; height: 36px; border-radius: 999px; border: 0; background: #fff; cursor: pointer; font-size: 18px; }
.curseur-lab { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; margin-top: 14px; }
input[type="range"] { width: 100%; accent-color: var(--orange); height: 32px; }
.shopping { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.shopping li { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--sable); font-size: 15px; }
.mannequin { margin: 0; background: #fff; border-radius: 20px; border: 1px solid var(--ligne); padding: 20px 20px 12px; }
.mannequin svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
.mannequin path { transition: d .35s ease; }
.mannequin figcaption { text-align: center; font-size: 14px; color: var(--doux); margin-top: 6px; }
.taille.conseil { box-shadow: 0 0 0 3px var(--orange) inset; }
.taille.conseil[aria-pressed="true"] { box-shadow: none; }
.etapes { margin: 16px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; color: var(--texte); font-size: 18px; }
.tableau { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; }
.tableau th, .tableau td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--ligne); }
.tableau thead th { background: var(--noir); color: #fff; font-weight: 600; }
.shopping li.famille { grid-column: 1 / -1; background: none; padding: 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brique); }

/* accueil : Lou et Nina en premier */
.duo-produits { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.carte-produit { display: flex; gap: 0; background: var(--sable); border-radius: var(--rayon, 22px); overflow: hidden; text-decoration: none; color: var(--noir); }
.carte-produit .visuel { flex: 0 0 44%; background: var(--gris-fond); }
.carte-produit .visuel img { width: 100%; height: 100%; object-fit: cover; }
.infos-produit { flex: 1; padding: 22px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.infos-produit h2 { font-size: 48px; line-height: .95; }
.infos-produit p { color: var(--texte); }
.infos-produit .prix { font-size: 20px; font-weight: 700; margin-top: auto; }
.infos-produit .flux { font-size: 14px; color: var(--doux); }

/* fiche produit */
.tailles-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tailles-grille .taille { min-height: 48px; }
.rassure-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--texte); }
.encart-pack { display: block; padding: 16px 18px; border-radius: 14px; background: var(--peche); text-decoration: none; color: var(--noir); }
.barre-achat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--ligne); transform: translateY(110%); transition: transform .25s ease; }
.barre-achat.visible { transform: none; }
.barre-achat span { font-weight: 600; font-size: 15px; }
.barre-achat .btn { min-height: 48px; font-size: 17px; }

/* tiroir panier */
.voile-tiroir { position: fixed; inset: 0; background: rgba(17,17,17,.4); z-index: 40; }
.tiroir { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #fff; z-index: 41; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; box-shadow: -8px 0 30px rgba(0,0,0,.12); }
.tiroir.ouvert { transform: none; }
.tiroir-tete { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--ligne); }
.fermer { width: 44px; height: 44px; border: 0; background: var(--sable); border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tiroir-corps { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.tiroir-pied { padding: 14px 20px 20px; text-align: center; font-weight: 600; }
body.tiroir-ouvert { overflow: hidden; }
.tiroir .ligne { padding: 10px; }
.tiroir .ligne img { width: 64px; height: 82px; }
.prix-ligne { min-width: 70px; text-align: right; }
.franco { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.franco-barre { height: 8px; border-radius: 999px; background: var(--sable); overflow: hidden; }
.franco-barre span { display: block; height: 100%; background: var(--orange); border-radius: 999px; transition: width .3s; }
.total { display: flex; justify-content: space-between; font-size: 22px; font-weight: 700; }
.rassure { font-size: 14px; color: var(--doux); }
.partage-ok { padding: 14px 16px; border-radius: 12px; background: var(--peche); margin-bottom: 14px; font-weight: 600; }
#panier { max-width: 640px; display: flex; flex-direction: column; gap: 14px; }

/* composeur de packs */
.composeur { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.c-gauche { flex: 1 1 420px; min-width: 0; background: #fff; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.c-droite { flex: 1 1 380px; min-width: 0; background: #fff; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 90px; }
@media (max-width: 900px) { .c-droite { position: static; } }
.c-etape { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.c-num { width: 30px; height: 30px; border-radius: 999px; background: var(--noir); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.c-q { font-weight: 700; font-size: 19px; }
.c-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.c-pack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border-radius: 14px; border: 1px solid var(--ligne-2); background: #fff; text-align: left; cursor: pointer; min-height: 96px; }
.c-pack small { color: var(--doux); }
.c-pack span { margin-top: auto; font-weight: 700; }
.c-pack[aria-pressed="true"] { border: 2px solid var(--noir); background: var(--peche); }
@media (max-width: 520px) { .c-packs { grid-template-columns: 1fr; } .c-pack { min-height: 0; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: baseline; } .c-pack span { margin: 0 0 0 auto; } }
.c-fixe { padding: 12px 14px; background: var(--sable); border-radius: 12px; }
.c-visuel { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.piece { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 14px; background: var(--gris-fond); font-size: 14px; animation: apparait .25s ease; }
.piece img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.piece-nina { background: var(--peche); }
.piece span { color: var(--doux); }
@keyframes apparait { from { transform: scale(.92); opacity: .5; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .piece { animation: none; } .tiroir, .barre-achat { transition: none; } }
.c-resume { font-weight: 600; }
.c-detail { display: flex; flex-direction: column; gap: 8px; }
.c-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--sable); }
.c-ligne select { min-height: 44px; border-radius: 10px; border: 1px solid var(--ligne-2); padding: 0 10px; font: inherit; background: #fff; }
.lien-bouton { align-self: flex-start; background: none; border: 0; padding: 6px 0; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--noir); }
@media (max-width: 640px) {
  .heros img { height: 66vh; min-height: 440px; }
  .heros .voile { padding-bottom: 32px; gap: 16px; }
  .carte-produit .visuel { flex-basis: 40%; }
  .infos-produit h2 { font-size: 40px; }
}

/* volet « ma taille » : feuille du bas sur mobile, panneau latéral sur ordinateur */
.volet { position: fixed; z-index: 41; background: #fff; display: flex; flex-direction: column; left: 0; right: 0; bottom: 0; max-height: 88vh; border-radius: 22px 22px 0 0; transform: translateY(100%); transition: transform .25s ease; box-shadow: 0 -8px 30px rgba(0,0,0,.12); }
.volet.ouvert { transform: none; }
@media (min-width: 760px) { .volet { left: auto; top: 0; width: 440px; max-height: none; border-radius: 0; transform: translateX(100%); } }
.volet-corps { overflow-y: auto; padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 12px; }
.vt-select { width: 100%; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--ligne-2); background: #fff; font: inherit; }
.vt-res { padding: 18px; border-radius: 16px; background: var(--peche); display: flex; flex-direction: column; gap: 8px; }
.parents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 17px; color: var(--texte); }
.parents li { padding-left: 18px; border-left: 3px solid var(--orange); }

/* ===== Ambiances à essayer (?ambiance=…) ===== */
.heros h1 { font-family: var(--titre); text-transform: var(--titre-casse, none); letter-spacing: var(--titre-espace, normal); }
.serif { text-transform: var(--titre-casse, none); }
html:not([data-ambiance]), html[data-ambiance="nude"] {
  --titre: "Barlow Condensed", "Arial Narrow", sans-serif; --capitales: "Barlow Condensed", "Arial Narrow", sans-serif; --corps: "Barlow", system-ui, sans-serif;
  --titre-casse: uppercase; --titre-espace: .01em;
  --fond: #FBF8F4; --peche: #EFE4D8; --sable: #F4EDE5; --beige: #E3D3C2; --gris-fond: #EDE6DE;
  --orange: #1F1A17; --brique: #8A6A55; --texte: #4B403A; --doux: #7A6C62; --ligne: #E8DED3; --ligne-2: #D8CABB;
  --rayon-btn: 2px; --rayon: 4px; --btn-espace: .06em; --btn-casse: uppercase;
  --repere: #B5774A;
}
html:not([data-ambiance]) .serif em, html:not([data-ambiance]) .heros h1 em, html[data-ambiance="nude"] .serif em, html[data-ambiance="nude"] .heros h1 em { font-style: normal; }
html:not([data-ambiance]) .bandeau, html[data-ambiance="nude"] .bandeau { background: #1F1A17; color: #F4EDE5; }
html:not([data-ambiance]) .btn-orange:hover, html[data-ambiance="nude"] .btn-orange:hover { background: #3A322D; }
html[data-ambiance="studio"] {
  --titre: "Instrument Serif", Georgia, serif; --capitales: "Space Mono", ui-monospace, monospace; --corps: "Instrument Sans", system-ui, sans-serif;
  --fond: #F8F6F1; --peche: #EFECE4; --sable: #F1EEE7; --beige: #E4DFD4; --gris-fond: #ECE9E2;
  --orange: #111111; --brique: #5E5A52; --texte: #3A3833; --doux: #6E6A62; --ligne: #E3DFD6; --ligne-2: #CFCAC0;
  --rayon-btn: 0; --rayon: 0; --btn-espace: .08em; --btn-casse: uppercase;
}
html[data-ambiance="studio"] .caps, html[data-ambiance="studio"] .menu, html[data-ambiance="studio"] .logo { font-weight: 400; letter-spacing: .04em; }
html[data-ambiance="studio"] .bandeau { background: #F8F6F1; color: #111; text-decoration: underline; font-family: "Space Mono", monospace; font-size: 12px; text-transform: uppercase; }
html[data-ambiance="studio"] .heros .voile { background: rgba(0,0,0,.42); }
html[data-ambiance="studio"] .heros img { filter: grayscale(1) contrast(1.05); }
html[data-ambiance="cerise"] {
  --titre: "Bricolage Grotesque", system-ui, sans-serif; --capitales: "Bricolage Grotesque", system-ui, sans-serif; --corps: "DM Sans", system-ui, sans-serif;
  --fond: #FFF8F5; --peche: #FFE3E6; --sable: #F7EEFB; --beige: #FFD9C7; --gris-fond: #F6EFF3;
  --orange: #D7193F; --brique: #A3122F; --texte: #3D2A33; --doux: #6E5964; --ligne: #F2DDE4; --ligne-2: #E5C6D0;
  --rayon-btn: 999px; --rayon: 24px;
}
html[data-ambiance="cerise"] .bandeau { background: #2B1424; color: #FFE3E6; }
html[data-ambiance="cerise"] .heros h1 { font-weight: 800; letter-spacing: -.03em; }
.ambiance-bouton { position: fixed; left: 12px; bottom: 12px; z-index: 35; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-radius: 999px; background: #111; color: #fff; font: 600 13px/1 var(--corps); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.ambiance-bouton select { min-height: 32px; border-radius: 999px; border: 0; padding: 0 8px; font: inherit; }
.ambiances { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.amb { border: 1px solid var(--ligne); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.amb-demo { padding: 28px 24px; min-height: 300px; }
.amb-info { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.amb-info .btn { margin-top: auto; }
.nuancier { display: flex; gap: 6px; margin-bottom: 6px; }
.nuancier span { width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); }
.carte-produit .visuel { display: flex; align-items: center; justify-content: center; }
.carte-produit .visuel img { height: auto; max-height: 100%; object-fit: contain; }
.infos-produit .btn { padding: 0 18px; white-space: nowrap; min-height: 46px; font-size: 15px; }

/* ===== Identité de marque : logo, ruban de couturière, manifeste, repères de taille ===== */
.logo { letter-spacing: .02em; font-size: 30px; line-height: 1; }
.logo small { display: block; margin-top: 2px; font-family: var(--corps); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.pied .logo { font-size: 30px; }
.devise { color: #D9CEC5; font-family: var(--capitales); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; }

/* ruban de couturière : graduations tous les 10 px, repère long tous les 50 px */
.ruban { height: 26px; border-block: 1px solid var(--repere); background:
  repeating-linear-gradient(90deg, var(--repere) 0 1.5px, transparent 1.5px 50px) left bottom / 100% 15px no-repeat,
  repeating-linear-gradient(90deg, var(--repere) 0 1px, transparent 1px 10px) left bottom / 100% 7px no-repeat,
  color-mix(in srgb, var(--repere) 14%, var(--fond, #fff)); }
.ruban + .pied, .pied { border-top: 0; }
.h-page::after { content: ""; display: block; width: 120px; height: 10px; margin-top: 14px; border-top: 1px solid var(--repere);
  background: repeating-linear-gradient(90deg, var(--repere) 0 1px, transparent 1px 10px) left top / 100% 6px no-repeat; }
.page-404 .h-page::after { margin-inline: auto; }

.manifeste .h-section { margin: 8px 0 28px; }
.manifeste-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; counter-reset: m; }
.manifeste-liste li { counter-increment: m; padding-top: 16px; border-top: 1px solid var(--ligne-2); color: var(--texte); }
.manifeste-liste li::before { content: counter(m, decimal-leading-zero); display: block; font: 700 14px/1 var(--corps); letter-spacing: .12em; color: var(--repere); margin-bottom: 10px; }
.manifeste-liste b { display: block; color: var(--noir); font-family: var(--capitales); font-size: 22px; text-transform: uppercase; margin-bottom: 6px; }

.cote { display: block; font-size: 13px; letter-spacing: .04em; color: var(--doux); }
.galerie figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.galerie figcaption.cote { padding-left: 10px; border-left: 2px solid var(--repere); }
.coloris { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--texte); }
.pastille { width: 18px; height: 18px; border-radius: 50%; background: #1A1716; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ligne-2); }

.lettre-bloc { display: flex; flex-direction: column; gap: 8px; }
.age { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #D9CEC5; }
.age input { width: 18px; height: 18px; accent-color: var(--repere); }
.age-note { font-size: 13px; color: #A99C92; }
.pied .message { color: #F4EDE5; font-size: 14px; }

/* --- journal en séries --- */
.series-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.serie { padding: 40px 0; border-top: 1px solid var(--ligne-2); scroll-margin-top: 90px; }
.serie-tete { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: baseline; margin-bottom: 24px; }
.serie-num { grid-row: span 2; font: 700 14px/1 var(--corps); letter-spacing: .12em; color: var(--repere); }
.serie-tete h2 { font-size: clamp(28px, 3.6vw, 40px); }
.serie-tete p { color: var(--texte); }

/* --- club --- */
.a-valider { background: #FFF4D6; color: #5A4300; font-size: 14px; text-align: center; padding: 10px 16px; }
.paliers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.paliers li { padding: 24px; background: var(--sable); border-top: 3px solid var(--repere); display: flex; flex-direction: column; gap: 8px; }
.palier-num { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brique); }
.paliers b { font-family: var(--capitales); font-size: 24px; text-transform: uppercase; }
.paliers p { color: var(--texte); }

/* --- kit à imprimer --- */
.feuille { margin-top: 28px; padding: 28px; background: var(--sable); border-left: 3px solid var(--repere); }
.feuille h2 { margin-top: 0; }
.feuille p + p { margin-top: 12px; }
.signature { font-family: var(--capitales); text-transform: uppercase; font-size: 18px; margin-top: 18px !important; }
.cal-legende { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--texte); margin-bottom: 14px; }
.cal-legende i { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: color-mix(in srgb, var(--repere) 35%, #fff); border: 1px solid var(--repere); }
.calendrier { overflow-x: auto; display: grid; gap: 3px; }
.cal-mois { display: grid; grid-template-columns: 52px repeat(31, minmax(22px, 1fr)); gap: 3px; min-width: 820px; }
.cal-mois b { font-size: 13px; align-self: center; }
.cal-mois span { aspect-ratio: 1; border: 1px solid var(--ligne-2); font-size: 9px; color: var(--doux); padding: 1px 2px; background: #fff; }
.cal-mois span.hors { border-color: transparent; background: transparent; }
@media print {
  .bandeau, .entete, .pied, .ruban, .no-print, .barre-achat, .ambiance-bouton { display: none !important; }
  .imprimable { padding-top: 0 !important; }
  .feuille { break-inside: avoid; background: none; }
  .calendrier { overflow: visible; }
  .cal-mois { min-width: 0; }
}
@page { margin: 12mm; }

/* --- « Ta taille ailleurs » : tuiles cliquables + fiche de l'enseigne --- */
.shopping li.tuile { padding: 0; background: none; }
.shopping li.tuile button { width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: var(--sable); font-size: 15px; text-align: left; cursor: pointer; color: inherit; }
.shopping li.tuile button:hover { border-color: var(--repere); }
.shopping li.tuile button[aria-expanded="true"] { background: var(--noir); color: #fff; }
.shopping li.detail-enseigne { grid-column: 1 / -1; display: block; padding: 20px; background: #fff; border: 1px solid var(--ligne-2); border-left: 3px solid var(--repere); }
.tableau.mini { max-width: 420px; margin-bottom: 10px; }
.tableau.mini th, .tableau.mini td { padding: 8px 12px; font-size: 15px; }
.tableau.mini tr.ici td { background: color-mix(in srgb, var(--repere) 18%, #fff); font-weight: 700; }
.detail-enseigne .source { font-size: 13px; color: var(--doux); margin-bottom: 14px; }

/* --- photos portées (mannequins adultes, visuels IA) --- */
.galerie figure.porte img { object-position: center top; }
.pour-toutes { background: var(--peche); }
.pour-toutes figure { margin: 0; position: relative; }
.pour-toutes figure img { width: 100%; max-height: 640px; object-fit: cover; object-position: center 30%; }
.pour-toutes-texte { display: flex; flex-direction: column; gap: 14px; padding-top: 36px; padding-bottom: 48px; }
.pour-toutes-texte .chapo { max-width: 640px; }

/* --- taille portée + double vignette culotte / mannequin --- */
.taille-portee { font-size: 13px; color: var(--texte); padding-left: 10px; border-left: 2px solid var(--repere); }
.taille-portee b { color: var(--noir); }
.pour-toutes .tailles-groupe { position: absolute; right: 12px; bottom: 10px; background: rgba(251,248,244,.9); padding: 4px 10px; font: 700 13px/1.2 var(--corps); letter-spacing: .12em; text-transform: uppercase; }
.grille.duo-cartes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); margin-bottom: 28px; }
.carte .visuel.double { aspect-ratio: 3 / 2; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--ligne); }
.carte .visuel.double img { width: 100%; height: 100%; object-fit: cover; }
.carte .visuel.double img:first-child { object-fit: contain; padding: 8px; background: var(--gris-fond); }
.taille-vignette { position: absolute; right: 8px; bottom: 8px; background: rgba(251,248,244,.92); padding: 3px 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.galerie figure.porte img { transition: opacity .25s ease; }
.galerie figure.porte.change img { opacity: .35; }

/* --- guide des tailles : mannequin à côté de la taille conseillée --- */
.res-tete { display: flex; gap: 20px; align-items: flex-start; }
.res-texte { flex: 1 1 auto; min-width: 0; }
.res-mannequin { flex: 0 0 150px; margin: 0; }
.res-mannequin img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 35%; border-radius: var(--rayon, 12px); background: var(--gris-fond); }
.res-mannequin figcaption { font-size: 13px; color: var(--texte); margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--repere); }
@media (max-width: 420px) { .res-mannequin { flex-basis: 112px; } }

/* --- fiches : textes repris du dossier technique --- */
.fiche-txt { color: var(--texte); font-size: 16px; }
.fiche-txt ol, .fiche-txt ul { margin: 8px 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.fiche-txt p { margin: 8px 0; }
.couches-liste li::marker { color: var(--repere); font-weight: 700; }

/* --- animation des flux --- */
.flux-onglets { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.flux-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 900px) { .flux-grille { grid-template-columns: 1fr; gap: 24px; } }
.flux-schema { margin: 0; background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon, 14px); padding: 16px; }
.flux-schema svg { width: 100%; height: auto; display: block; }
.flux-schema figcaption { font-size: 14px; color: var(--doux); margin-top: 8px; }
.flux-rejouer { margin-top: 10px; background: none; border: 0; padding: 0; color: var(--noir); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 15px; }
.fx-peau { font: 700 13px var(--corps); letter-spacing: .14em; fill: var(--doux); }
.fx-ligne-peau { stroke: var(--doux); stroke-dasharray: 4 5; }
.fx-couche { stroke: rgba(0,0,0,.08); }
.fx-contact { fill: #F3E7DA; }
.fx-abs { fill: #FBF3EA; }
.fx-membrane { fill: #3A2E28; }
.fx-tissu { fill: #1F1A17; }
.fx-fibre { fill: #E7D6C4; }
.fx-rempli { fill: #A33A3A; opacity: .78; transform-box: fill-box; transform-origin: center; transform: scaleY(0); transition: transform .7s ease; }
.fx-joue .fx-rempli, .fx-fini .fx-rempli { transform: scaleY(1); }
.fx-fini .fx-rempli { transition: none; }
.fx-goutte { fill: #A33A3A; opacity: 0; }
.fx-joue .fx-goutte { animation: fx-tombe 1.1s ease-in forwards; }
@keyframes fx-tombe { 0% { opacity: 0; transform: translateY(-10px); } 15% { opacity: 1; } 80% { opacity: 1; transform: translateY(62px) scale(1, .7); } 100% { opacity: 0; transform: translateY(66px) scale(1.4, .3); } }
.fx-goutte { transform-box: fill-box; }
.fx-stop { font: 700 14px var(--corps); letter-spacing: .12em; fill: #F4EDE5; opacity: .35; transition: opacity .4s ease 2.8s; }
.fx-joue .fx-stop, .fx-fini .fx-stop { opacity: 1; }
.fx-trait { stroke: var(--repere); stroke-width: 1.5; }
.fx-label { font: 500 14px var(--corps); fill: var(--texte); }
.fx-label-fort { font-weight: 700; fill: var(--noir); }
.flux-etapes { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: e; }
.flux-etapes li { counter-increment: e; padding: 14px 16px 14px 56px; position: relative; background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon, 12px); color: var(--texte); opacity: .45; transition: opacity .4s ease, border-color .4s ease; }
.flux-etapes li::before { content: counter(e); position: absolute; left: 16px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--noir); color: #fff; font: 700 14px/26px var(--corps); text-align: center; }
.flux-etapes li.actif { opacity: 1; border-color: var(--repere); }
.flux-etapes b { display: block; font-family: var(--capitales); font-size: 20px; text-transform: uppercase; color: var(--noir); }
.flux-compare { background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon, 12px); padding: 18px; margin-bottom: 24px; }
.flux-compare-titre { font-weight: 700; margin-bottom: 12px; }
.barre-ml { display: grid; grid-template-columns: 170px 1fr auto; gap: 10px; align-items: center; font-size: 14px; margin-bottom: 8px; }
.barre-ml i { display: block; height: 12px; width: calc(var(--v) / 22 * 100%); background: var(--ligne-2); border-radius: 2px; }
.barre-ml.nous i { background: var(--repere); }
.barre-ml.nous span, .barre-ml.nous b { color: var(--noir); font-weight: 700; }
@media (max-width: 480px) { .barre-ml { grid-template-columns: 1fr auto; } .barre-ml i { grid-column: 1 / -1; grid-row: 2; } }
.flux-note { font-size: 13px; color: var(--doux); margin-top: 10px; }
.flux-choisir p { color: var(--texte); margin-bottom: 14px; }
.fx-contact + .fx-rempli { opacity: .45; }

/* --- essayage : saisie, silhouette et résultat côte à côte, marques en dessous --- */
.essayage { display: grid; gap: 20px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-areas: "saisie silhouette resultat" "ailleurs ailleurs ailleurs"; }
.essayage-gauche, .essayage-droite { display: contents; }
.essai-saisie { grid-area: saisie; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 90px; }
.essayage .mannequin { grid-area: silhouette; position: sticky; top: 90px; }
.essayage .resultat-taille { grid-area: resultat; position: sticky; top: 90px; }
.essai-ailleurs { grid-area: ailleurs; }
.essai-ailleurs .shopping { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.essayage .ligne-choix { flex-wrap: wrap; }
.essayage .ligne-choix select, .essayage .ligne-choix .btn { flex: 1 1 100%; }
.res-mannequin { flex-basis: 190px; }
@media (max-width: 1100px) {
  .essayage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "saisie resultat" "silhouette resultat" "ailleurs ailleurs"; }
}
@media (max-width: 720px) {
  .essayage { grid-template-columns: 1fr; grid-template-areas: "saisie" "resultat" "silhouette" "ailleurs"; }
  .essai-saisie, .essayage .mannequin, .essayage .resultat-taille { position: static; }
  .res-mannequin { flex-basis: 120px; }
}

/* --- page cup : tailles, mode d'emploi, made in France --- */
.cup-planche { width: 100%; max-height: 420px; object-fit: contain; background: #968878; border-radius: var(--rayon, 14px); margin-bottom: 16px; }
.cup-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .cup-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cup-carte { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 16px; background: #fff; border: 1px solid var(--ligne-2); border-radius: var(--rayon, 12px); cursor: pointer; font: inherit; color: var(--noir); }
.cup-carte .caps { font-size: 34px; line-height: 1; }
.cup-carte b { font-size: 16px; }
.cup-carte small { color: var(--doux); font-size: 13px; }
.cup-carte:hover { border-color: var(--repere); }
.cup-carte[aria-pressed="true"] { background: var(--noir); color: #fff; border-color: var(--noir); }
.cup-carte[aria-pressed="true"] small { color: #D9CEC5; }
.cup-note { font-size: 14px; color: var(--doux); margin-top: 12px; max-width: 760px; }
.cup-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: c; }
@media (max-width: 1000px) { .cup-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cup-etapes { grid-template-columns: 1fr; } }
.cup-etapes li { counter-increment: c; background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon, 12px); padding: 18px; display: flex; flex-direction: column; gap: 8px; color: var(--texte); font-size: 15px; }
.cup-etapes svg { width: 84px; height: 84px; color: var(--noir); }
.cup-etapes b { font-family: var(--capitales); font-size: 19px; text-transform: uppercase; color: var(--noir); }
.cup-etapes b::before { content: counter(c) ". "; color: var(--repere); }
.cup-france { background: var(--noir); padding: 56px 0; }
.cup-france .wrap { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.cup-france-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 18px 28px; color: #E3D3C2; font-size: 15px; }
.cup-france-liste b { display: block; font-family: var(--capitales); font-size: 34px; color: #fff; line-height: 1; }

/* --- comparateur : silhouette et mannequin côte à côte, même hauteur --- */
.essayage { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-areas: "saisie comparateur" "saisie resultat" "ailleurs ailleurs"; }
.comparateur { grid-area: comparateur; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.essayage .mannequin, .essayage .resultat-taille { position: static; }
.comparateur .mannequin { display: flex; flex-direction: column; justify-content: center; padding: 12px; }
.comparateur .mannequin svg { max-width: 100%; }
.comparateur .res-mannequin { margin: 0; flex: none; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ligne); border-radius: 20px; padding: 12px; }
.comparateur .res-mannequin[hidden] { display: none; }
.comparateur .res-mannequin img { width: 100%; height: 100%; min-height: 0; flex: 1; aspect-ratio: auto; object-fit: cover; object-position: center 55%; border-radius: 12px; }
.comparateur .res-mannequin figcaption { font-size: 15px; text-align: center; border: 0; padding: 8px 0 0; }
.comparateur .mannequin figcaption { font-size: 13px; }
.essai-saisie { position: sticky; top: 90px; }
@media (max-width: 1100px) {
  .essayage { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-areas: "saisie comparateur" "saisie resultat" "ailleurs ailleurs"; }
}
@media (max-width: 760px) {
  .essayage { grid-template-columns: 1fr; grid-template-areas: "saisie" "comparateur" "resultat" "ailleurs"; }
  .essai-saisie { position: static; }
  .comparateur { gap: 8px; }
  .comparateur .mannequin, .comparateur .res-mannequin { padding: 8px; border-radius: 14px; }
}
.comparateur .mannequin, .comparateur .res-mannequin { grid-area: auto; }
.comparateur .res-mannequin figcaption { font-size: 18px; color: var(--noir); }

/* --- silhouette : titre et verdict de la taille essayée --- */
.sil-titre { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; justify-content: center; font-size: 15px; margin: 0 0 6px; }
.sil-titre small { color: var(--doux); font-size: 13px; }
.verdict { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.verdict.vert { background: #E3F2EA; color: #0E7A55; }
.verdict.rouge { background: #FCE7DC; color: #B23A0A; }

.fx-goutte { transform-box: fill-box; transform-origin: center bottom; }
.fx-joue .fx-goutte { animation: fx-tombe 1.2s cubic-bezier(.5, 0, .9, .6) forwards; }
.fx-rempli { transition-duration: .9s; }

/* --- colonne droite (silhouette, mannequin, taille) qui reste à l'écran pendant qu'on descend --- */
@media (min-width: 901px) {
  .essayage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "saisie droite" "ailleurs droite"; }
  .essayage-droite { display: flex; flex-direction: column; gap: 12px; grid-area: droite; position: sticky; top: 84px; align-self: start; }
  .essai-saisie { position: static; }
  .comparateur { grid-area: auto; }
  .essayage .resultat-taille { grid-area: auto; padding: 18px 20px; }
  .comparateur .mannequin svg { max-height: 250px; }
  .comparateur .res-mannequin img { max-height: 290px; }
  .resultat-taille #res-taille { font-size: 56px !important; }
  .resultat-taille .res-tete { gap: 0; }
  .essai-ailleurs .shopping { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
}
@media (min-width: 901px) and (max-height: 860px) {
  .comparateur .mannequin svg { max-height: 190px; }
  .comparateur .res-mannequin img { max-height: 220px; }
}

/* mobile : barre en bas avec la photo et la taille conseillée */
.taille-flottante { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 34; display: none; align-items: center; gap: 12px; padding: 8px 10px; background: #fff; border: 1px solid var(--ligne-2); border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.taille-flottante.visible { display: flex; }
.taille-flottante img { width: 52px; height: 64px; object-fit: cover; object-position: center 35%; border-radius: 10px; }
.taille-flottante p { flex: 1; font-size: 14px; color: var(--texte); line-height: 1.2; }
.taille-flottante b { display: block; font-family: var(--capitales); font-size: 26px; color: var(--noir); }
.taille-flottante .btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
@media (min-width: 901px) { .taille-flottante, .taille-flottante.visible { display: none; } }

/* --- page Culottes : cartes lisibles --- */
.carte-culotte { background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon, 14px); overflow: hidden; gap: 0; }
.carte-culotte .visuel { border-radius: 0; }
.carte-infos { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.carte-flux { font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--brique); text-transform: uppercase; }
.carte-culotte h2 { font-size: 40px; line-height: 1; }
.carte-usage { color: var(--texte); font-size: 17px; }
.carte-points { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--texte); }
.carte-points li { display: flex; gap: 8px; align-items: center; }
.carte-points svg { width: 18px; height: 18px; color: var(--repere); flex: none; }
.carte-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 6px; }
.carte-bas .prix { font-size: 24px; font-weight: 700; }
.carte-tailles { font-size: 14px; color: var(--doux); }
.carte-culotte .btn { margin-left: auto; min-height: 46px; }
.carte-culotte .taille-vignette { font-size: 13px; }
.sous-titre-page { font-size: clamp(26px, 3vw, 34px); margin: 40px 0 16px; }
.grille-packs { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.carte-pack { background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon, 14px); overflow: hidden; gap: 0; }
.carte-pack .visuel { aspect-ratio: 4 / 3; border-radius: 0; }
.carte-pack h3 { font-family: var(--capitales); font-size: 24px; text-transform: uppercase; }
.carte-pack p { color: var(--texte); font-size: 15px; }
.note-packs { font-size: 15px; color: var(--texte); margin-top: 14px; }
@media (max-width: 640px) { .carte-pack .visuel { aspect-ratio: 16 / 9; } .carte-culotte h2 { font-size: 34px; } .carte-culotte .btn { margin-left: 0; width: 100%; } }

/* comparatif Lou / Nina */
.table-defile { overflow-x: auto; }
.comparatif { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; border-radius: var(--rayon, 14px); overflow: hidden; font-size: 16px; }
.comparatif th, .comparatif td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.comparatif thead th { background: var(--noir); color: #fff; font-family: var(--capitales); font-size: 22px; text-transform: uppercase; }
.comparatif tbody th { font-weight: 600; color: var(--doux); width: 30%; font-size: 15px; }
.comparatif td b { color: var(--brique); }
.cmp-conseil { margin: 16px 0; font-size: 17px; }
.cmp-liens { display: flex; flex-wrap: wrap; gap: 10px; }

/* animation : étapes lisibles même avant d'être allumées, textes plus grands */
.flux-etapes li { opacity: .82; }
.flux-etapes li.actif { opacity: 1; background: #fff; box-shadow: 0 0 0 2px var(--repere) inset; }
.flux-note { font-size: 14px; color: var(--texte); }
.barre-ml { font-size: 15px; }
.fx-label { font-size: 16px; }
.flux-schema { padding: 20px; }

/* page construction */
.piles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; }
.pile { background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon, 14px); padding: 20px; }
.pile-nom { font-size: 30px; margin-bottom: 14px; }
.pile ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pile li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: stretch; }
.pile-bande { border-radius: 4px; min-height: 64px; }
.pile-contact .pile-bande { background: #E7CFC0; }
.pile-abs .pile-bande { background: repeating-radial-gradient(circle at 6px 6px, #E2C9B3 0 2px, #FBF3EA 2px 12px); border: 1px solid #EBDCCD; }
.pile-membrane .pile-bande { background: #3A2E28; }
.pile-tissu .pile-bande { background: #1F1A17; }
.pile li div { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; font-size: 15px; color: var(--texte); }
.pile li b { color: var(--noir); font-size: 16px; }
.pile li em { font-style: normal; color: var(--doux); font-size: 14px; }
.chiffres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.chiffres li { background: #fff; border: 1px solid var(--ligne); border-top: 3px solid var(--repere); border-radius: var(--rayon, 12px); padding: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--texte); }
.chiffres b { font-family: var(--capitales); font-size: 40px; line-height: 1; color: var(--noir); text-transform: uppercase; }
.chiffres small { color: var(--doux); font-size: 13px; }
.entretien { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.grille-packs { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.chiffres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 1000px) { .chiffres { grid-template-columns: repeat(3, 1fr); } }

/* --- calendrier des règles : suivi et prévisions --- */
.suivi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .suivi { grid-template-columns: 1fr; } }
.suivi-saisie { display: flex; flex-direction: column; gap: 12px; }
.champ { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
.champ small { font-weight: 400; color: var(--doux); }
.champ select, .champ input[type="date"], .suivi-histo input[type="date"] { min-height: 48px; padding: 0 12px; border: 1px solid var(--ligne-2); border-radius: 12px; background: #fff; font: inherit; font-weight: 400; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .champs-2 { grid-template-columns: 1fr; } }
.champ-nombre { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.champ-nombre input { width: 76px; min-height: 48px; padding: 0 10px; border: 1px solid var(--ligne-2); border-radius: 12px; font: inherit; }
.suivi-histo .ligne-choix input { flex: 1 1 160px; }
.suivi-prive { font-size: 13px; color: var(--doux); }
.suivi-note { font-size: 14px; color: var(--texte); margin-top: 10px; }
.suivi-note[hidden] { display: none; }
.suivi-jours { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sj { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 8px 6px; border-radius: 10px; font-size: 13px; }
.sj b { font-size: 15px; }
.sj em { font-style: normal; font-weight: 700; font-size: 13px; }
.sj-ab { background: #8A2E2E; color: #fff; }
.sj-reg { background: #F1D9CF; color: var(--noir); }
.suivi-prochains { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.suivi-prochains li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: #fff; border: 1px solid var(--ligne); border-radius: 12px; font-size: 15px; }
.suivi-prochains span { color: var(--doux); }
.cal-legende i.c-abondant { background: #8A2E2E; border-color: #8A2E2E; }
.cal-legende i.c-note { background: var(--noir); border-color: var(--noir); }
.cal-mois span.c-abondant { background: #8A2E2E; color: #fff; border-color: #8A2E2E; }
.cal-mois span.c-regulier { background: #F1D9CF; color: var(--noir); border-color: #E2B9A8; }
.cal-mois span.c-note { background: var(--noir); color: #fff; border-color: var(--noir); }
#s-ics:disabled { opacity: .45; cursor: not-allowed; }
@media print { .cal-mois span.c-abondant, .cal-mois span.c-regulier, .cal-mois span.c-note { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.suivi > * { min-width: 0; }
.champ select, .champ input[type="date"] { width: 100%; max-width: 100%; }

/* --- Ma taille : saisie plus compacte --- */
.essayage .carte-blanche { padding: 20px; border-radius: 16px; }
.essai-saisie .carte-blanche p:first-child { font-size: 17px !important; }
.essayage .ligne-choix { flex-wrap: wrap; gap: 8px; }
.essayage .ligne-choix select { flex: 1 1 140px; min-height: 44px; font-size: 16px; }
.essayage .ligne-choix .btn { flex: 0 0 auto; min-height: 44px; padding: 0 20px; font-size: 15px; }
.essai-saisie .onglets .pilule { min-height: 40px; font-size: 14px; }
.essai-ailleurs:has(#shopping:empty) { display: none; }
@media (min-width: 901px) {
  .essayage { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .essai-saisie { max-width: 520px; }
}

/* --- fiche produit : galerie horizontale, plus courte --- */
.galerie-zone { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.galerie { display: flex; grid-template-columns: none; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; flex: none; }
.galerie::-webkit-scrollbar { display: none; }
.galerie > img, .galerie > figure { flex: 0 0 calc(50% - 5px); scroll-snap-align: start; }
.galerie-nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.galerie-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ligne-2); background: #fff; font-size: 26px; line-height: 1; cursor: pointer; color: var(--noir); }
.galerie-nav button:hover { border-color: var(--noir); }
#gal-compte { font-size: 14px; color: var(--doux); min-width: 70px; text-align: center; }
@media (min-width: 900px) { .galerie-zone { position: sticky; top: 90px; align-self: flex-start; } }
@media (max-width: 899px) { .galerie > img, .galerie > figure { flex-basis: 84%; } .fiche { gap: 24px; padding-top: 16px; } }

/* bloc « Ton flux » */
.flux-bloc { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--ligne); border-radius: 14px; }
.flux-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.flux-switch a { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 42px; border: 1px solid var(--ligne-2); border-radius: var(--rayon-btn, 999px); text-decoration: none; color: var(--noir); font-size: 15px; }
.flux-switch a[aria-current="page"] { background: var(--noir); border-color: var(--noir); color: #fff; }
.flux-echelle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--doux); }
.flux-echelle span { padding: 7px 4px; background: var(--gris-fond); }
.flux-echelle span:first-child { border-radius: 8px 0 0 8px; }
.flux-echelle span:last-child { border-radius: 0 8px 8px 0; }
.flux-echelle span.on { background: #8A2E2E; color: #fff; }
.flux-quand { font-size: 15px; color: var(--texte); }
.flux-ml { font-size: 14px; color: var(--doux); }
@media (max-width: 899px) { .galerie > img, .galerie > figure { flex-basis: 72%; } .galerie img { aspect-ratio: 4 / 5; } .galerie figcaption { font-size: 13px; } }

/* --- rangée « Vois-la portée » : 8 mannequins, une par taille --- */
.mq-strip p { font-size: 14px; font-weight: 600; color: var(--texte); margin-bottom: 8px; }
.mq-vignettes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 520px) { .mq-vignettes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .mq-v { flex: 0 0 64px; scroll-snap-align: start; } }
.mq-v { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--noir); }
.mq-v img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 30%; border-radius: 8px; border: 2px solid transparent; background: var(--gris-fond); }
.mq-v span { font-size: 13px; font-weight: 700; text-align: center; }
.mq-v:hover img { border-color: var(--ligne-2); }
.mq-v[aria-pressed="true"] img { border-color: var(--noir); }
.mq-v[aria-pressed="true"] span { background: var(--noir); color: #fff; border-radius: 999px; }

/* --- page cup, version compacte --- */
.cup2 { padding: 48px 0; }
.cup2-sable { background: var(--sable); }
.cup2-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 18px; }
.cup2-tete h2 { font-size: clamp(26px, 3vw, 34px); }
.cup2-tete p { color: var(--doux); font-size: 15px; }
.cup2-tailles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 900px; }
@media (max-width: 640px) { .cup2-tailles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cup2-carte { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 10px 14px; background: #FBF8F4; border: 1px solid var(--ligne); border-radius: 14px; cursor: pointer; font: inherit; color: var(--noir); text-align: center; }
.cup2-img { height: 120px; width: 70%; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 6px; }
.cup2-img img { height: auto; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cup2-nom { font-family: var(--capitales); font-size: 26px; font-weight: 700; line-height: 1; }
.cup2-carte b { font-size: 14px; }
.cup2-carte small { font-size: 12px; color: var(--doux); }
.cup2-carte:hover { border-color: var(--repere); }
.cup2-carte[aria-pressed="true"] { border-color: var(--noir); box-shadow: 0 0 0 1px var(--noir) inset; }
.cup2-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .cup2-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cup2-etapes li { display: flex; flex-direction: column; gap: 4px; padding: 14px; background: #fff; border-radius: 12px; font-size: 14px; color: var(--texte); }
.cup2-etapes svg { width: 44px; height: 44px; color: var(--noir); margin-bottom: 4px; }
.cup2-etapes b { font-size: 15px; color: var(--noir); }
.cup2-etapes i { font-style: normal; color: var(--repere); }
.cup2-france { border-top: 1px solid var(--ligne); padding: 22px 0; }
.cup2-france .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
.cup2-france p { font-size: 15px; color: var(--texte); }
.cup2-france ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--doux); }
.cup2-france ul b { color: var(--noir); }
.galerie img[src*="-chair"] { background: #EFE4D8; object-fit: contain; }

/* --- cup : vraies proportions dans les cartes, fond fondu --- */
.cup2-carte { background: #EFE4D8; border-color: #E3D3C2; }
.cup2-img { width: 92px; height: 128px; align-items: flex-end; }
.cup2-img img { max-height: none; mix-blend-mode: normal; }
.cup2-carte[aria-pressed="true"] { background: #fff; }

/* --- page Culottes : cartes horizontales, tout visible d'un coup --- */
@media (min-width: 900px) {
  .grille.duo-cartes { grid-template-columns: 1fr; gap: 16px; }
  .carte-culotte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .carte-culotte .visuel.double { aspect-ratio: auto; height: 340px; }
  .carte-culotte .carte-infos { justify-content: center; padding: 22px 28px; }
  .carte-culotte h2 { font-size: 44px; }
}
@media (max-width: 899px) {
  .carte-culotte .visuel.double { aspect-ratio: 2 / 1.3; }
  .carte-infos { padding: 14px 16px 16px; gap: 6px; }
  .carte-points { font-size: 14px; }
}
.galerie > img, .galerie > figure { min-width: 0; }

/* --- page Culottes : retour aux cartes côte à côte, version compacte --- */
@media (min-width: 900px) {
  .grille.duo-cartes { grid-template-columns: 1fr 1fr; gap: 16px; }
  .carte-culotte { display: flex; flex-direction: column; }
  .carte-culotte .visuel.double { height: auto; aspect-ratio: 2 / 1; }
  .carte-culotte .carte-infos { padding: 14px 18px 16px; gap: 4px; justify-content: flex-start; }
  .carte-culotte h2 { font-size: 32px; }
}
.carte-culotte .carte-usage { font-size: 15px; }
.carte-culotte .carte-points { flex-direction: row; flex-wrap: wrap; gap: 2px 14px; margin: 2px 0; font-size: 13px; }
.carte-culotte .carte-points svg { width: 14px; height: 14px; }
.carte-culotte .carte-bas { margin-top: 4px; }
.carte-culotte .carte-bas .prix { font-size: 20px; }
.carte-culotte .btn { min-height: 42px; }

/* --- cup : cartes de taille dans le bloc d'achat --- */
.achat .cup2-tailles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: none; }
.achat .cup2-carte { padding: 10px 6px 10px; border-radius: 12px; background: #fff; border-color: var(--ligne-2); }
.achat .cup2-img { width: 56px; height: 86px; margin-bottom: 4px; }
.achat .cup2-img img { filter: drop-shadow(0 1px 1px rgba(60, 40, 30, .25)); }
.achat .cup2-nom { font-size: 22px; }
.achat .cup2-carte .gouttes { font-size: 11px; }
.achat .cup2-carte b { font-size: 12px; line-height: 1.2; }
.achat .cup2-carte small { font-size: 11px; }
.achat .cup2-carte[aria-pressed="true"] { background: var(--noir); color: #fff; border-color: var(--noir); }
.achat .cup2-carte[aria-pressed="true"] small { color: #D9CEC5; }
.achat .cup2-carte[aria-pressed="true"] .cup2-img img { filter: drop-shadow(0 0 1px rgba(255,255,255,.6)); }
@media (max-width: 420px) { .achat .cup2-tailles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.achat .cup2-img { width: 52px; height: 104px; overflow: visible; }

/* --- mannequins comme sélecteur de taille dans le bloc d'achat --- */
.achat .mq-strip p { font-size: 13px; font-weight: 400; color: var(--doux); margin-bottom: 6px; }
.achat .mq-vignettes { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.achat .mq-v img { border-radius: 6px; border-width: 2px; }
.achat .mq-v span { font-size: 13px; padding: 2px 0; }
@media (max-width: 520px) { .achat .mq-vignettes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } .achat .mq-v { flex: none; } }

@media (min-width: 1181px) and (max-width: 1360px) { .menu { gap: 4px 16px; font-size: 13px; } }

/* --- page « Régulier ou abondant ? » : compacte et visuelle --- */
.section.cons { padding: 36px 0; }
.cons .flux-onglets { margin-bottom: 16px; }
.cons-fil { font-size: 14px; color: var(--doux); margin-bottom: 10px; }
.cons-fil a { color: var(--doux); }
.cons-tete { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 32px; margin-bottom: 18px; }
.cons-tete h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1; }
.cons-tete p { flex: 1 1 360px; color: var(--texte); font-size: 16px; max-width: 620px; }
.cons-h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 14px; }
.cons .flux-grille { gap: 24px; }
.cons .flux-etapes { margin-bottom: 14px; gap: 8px; }
.cons .flux-etapes li { padding: 10px 14px 10px 50px; }
.cons .flux-etapes li::before { top: 11px; }
.cons .flux-etapes b { font-size: 17px; }
.cons .flux-compare { margin-bottom: 0; padding: 14px; }
.cons .flux-schema { padding: 14px; }
.cons .piles { gap: 14px; }
.cons .pile { padding: 14px; }
.cons .pile-nom { font-size: 24px; margin-bottom: 8px; }
.cons .pile li { grid-template-columns: 40px 1fr; gap: 10px; }
.cons .pile-bande { min-height: 44px; }
.cons .pile li div { padding: 3px 0; font-size: 14px; }
.cons .pile li b { font-size: 15px; }
.cons .note-packs { margin-top: 10px; font-size: 14px; }
.cons .chiffres { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
@media (min-width: 1100px) { .cons .chiffres { grid-template-columns: repeat(6, 1fr); } }
.cons .chiffres li { padding: 14px; gap: 4px; font-size: 14px; }
.cons .chiffres b { font-size: 30px; }
.gestes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .gestes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gestes li { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--sable); border-radius: 12px; font-size: 14px; color: var(--doux); }
.gestes svg { width: 30px; height: 30px; color: var(--repere); margin-bottom: 4px; }
.gestes b { color: var(--noir); font-size: 16px; }

/* --- Ma taille : la taille en grand, sur la photo et la silhouette --- */
.comparateur .res-mannequin { position: relative; }
.comparateur .res-mannequin img { object-position: center 30%; }
.comparateur .res-mannequin figcaption { position: absolute; left: 22px; bottom: 22px; padding: 8px 14px 10px; background: rgba(255,255,255,.94); border-radius: 12px; text-align: left; font-size: 13px; color: var(--doux); line-height: 1.1; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.comparateur .res-mannequin figcaption b { display: block; font-family: var(--capitales); font-size: 46px; line-height: 1; color: var(--noir); margin-top: 2px; }
.sil-titre { font-size: 16px; }
.sil-titre b { font-family: var(--capitales); font-size: 30px; vertical-align: -4px; }
/* photo recadrée sur la culotte, badge en haut pour ne pas la cacher */
.comparateur .res-mannequin img { object-position: center 74%; }
.comparateur .res-mannequin figcaption { top: 22px; bottom: auto; }

/* ===== Direction B : base Nude + identité de l'étui (lettrage gonflé, script, pastilles, étendage) ===== */
:root { --violet: #9B7BEA; --violet-f: #6E4FC7; --prune: #59466A; --bonbon: #F06CB4; --framboise: #B91C6A; --lilas: #C9B3E6; }
.gonfle { font-family: "Bagel Fat One", "Barlow Condensed", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: .92;
  background: linear-gradient(180deg, #CDB8FF 0%, #A487F0 38%, #8462DD 70%, #6E4FC7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #6A4BBE) drop-shadow(0 3px 0 #59466A) drop-shadow(0 8px 8px rgba(80, 40, 110, .22)); padding-bottom: .04em; }
.script { font-family: "Yellowtail", cursive; color: var(--bonbon); -webkit-text-fill-color: var(--bonbon); text-transform: none; font-weight: 400; letter-spacing: 0; line-height: 1; }
.titre-etui { display: inline-flex; flex-direction: column; align-items: flex-start; margin: 0; }
.titre-etui .gonfle { display: block; font-size: clamp(52px, 8vw, 104px); }
.titre-etui .script { display: block; font-size: clamp(32px, 4.6vw, 60px); margin: -.42em 0 0 .6em; transform: rotate(-4deg); }
.titre-etendage { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.etendage-deco { width: min(320px, 40vw); height: auto; }
@media (max-width: 640px) { .etendage-deco { display: none; } }

/* fiche produit : nom gonflé + sous-titre en script */
.achat h1.titre-etui .gonfle { font-size: clamp(54px, 6vw, 80px); }
.achat h1.titre-etui .script { font-size: clamp(28px, 3vw, 38px); margin: -.3em 0 0 .5em; }
.pastilles-produit { list-style: none; margin: 4px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.pastilles-produit li { width: 82px; height: 82px; border-radius: 50%; background: var(--violet-f); color: #EDE5FF; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font: 600 10px/1.15 "Fredoka", sans-serif; padding: 8px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--lilas); }
.pastilles-produit b { font: 700 19px/1 "Fredoka", sans-serif; color: #fff; margin-bottom: 2px; }
@media (max-width: 520px) { .pastilles-produit li { width: 68px; height: 68px; font-size: 9px; } .pastilles-produit b { font-size: 16px; } }

/* cartes : noms gonflés, pilules de flux couleur étui */
.carte-culotte h2.gonfle, .carte-produit h2.gonfle { font-size: clamp(40px, 4vw, 54px); }
.pilule-flux { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; color: #fff; font: 700 12px "Fredoka", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.pilule-flux.regulier { background: var(--bonbon); }
.pilule-flux.abondant { background: var(--framboise); }
.carte-flux { color: inherit; }

/* bloc « Ton flux » : couleurs de l'étui */
.flux-switch a[data-flux-lien="lou"][aria-current="page"] { background: var(--bonbon); border-color: var(--bonbon); }
.flux-switch a[data-flux-lien="nina"][aria-current="page"] { background: var(--framboise); border-color: var(--framboise); }
.flux-echelle span.on { background: var(--bonbon); }
a[data-flux-lien="nina"][aria-current="page"] ~ * , .flux-bloc:has([data-flux-lien="nina"][aria-current="page"]) .flux-echelle span.on { background: var(--framboise); }

/* --- Ma taille : flèches face / dos sur la photo --- */
.vue-fleche { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--noir); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.vue-fleche:hover { background: #fff; }
.vue-fleche.gauche { left: 22px; }
.vue-fleche.droite { right: 22px; }
.vue-libelle { position: absolute; right: 22px; bottom: 22px; background: var(--noir); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.comparateur .res-mannequin figcaption { left: 76px; }
@media (max-width: 760px) { .vue-fleche { width: 36px; height: 36px; font-size: 22px; } .vue-fleche.gauche { left: 12px; } .vue-fleche.droite { right: 12px; } .comparateur .res-mannequin figcaption { left: 54px; top: 12px; padding: 6px 10px; } .comparateur .res-mannequin figcaption b { font-size: 30px; } .vue-libelle { right: 12px; bottom: 12px; } }

/* ===== Retour à la version Nude (02/11, demande Benoit) : on garde la police Bagel Fat One pour les titres,
   sans le lettrage façon étui (pas de violet en relief, pas de script rose) ===== */
.gonfle { background: none; color: var(--noir); -webkit-text-fill-color: var(--noir); filter: none; letter-spacing: .005em; }
.titre-etui { display: block; }
.titre-etui .gonfle, .titre-etui .script { display: inline; font-family: "Bagel Fat One", "Barlow Condensed", sans-serif; text-transform: uppercase; color: var(--noir); -webkit-text-fill-color: var(--noir); transform: none; margin: 0; font-size: clamp(40px, 6vw, 72px); line-height: 1; }
.achat h1.titre-etui .gonfle { display: block; font-size: clamp(46px, 5vw, 64px); }
.achat h1.titre-etui .script { display: block; font-family: var(--capitales); font-weight: 700; font-size: 26px; margin-top: 4px; }
.etendage-deco, .pastilles-produit { display: none; }
.pilule-flux, .pilule-flux.regulier, .pilule-flux.abondant { background: none; color: var(--brique); padding: 0; font: 600 14px var(--corps); letter-spacing: .04em; }
.flux-switch a[data-flux-lien][aria-current="page"] { background: var(--noir); border-color: var(--noir); }
.flux-echelle span.on, .flux-bloc:has([data-flux-lien="nina"][aria-current="page"]) .flux-echelle span.on { background: #8A2E2E; }
.carte-culotte h2.gonfle, .carte-produit h2.gonfle { font-size: clamp(34px, 3.4vw, 44px); }
.titre-etui .gonfle + .script { margin-left: .28em; }
.achat h1.titre-etui .gonfle + .script { margin: 4px 0 0; }
/* badge de taille compact, dans le coin de la photo */
.comparateur .res-mannequin figcaption { top: 22px; left: 22px; padding: 5px 10px; border-radius: 999px; font-size: 12px; display: inline-flex; align-items: baseline; gap: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.comparateur .res-mannequin figcaption b { display: inline; font-size: 20px; margin: 0; }
.comparateur .res-mannequin .vue-libelle { bottom: auto; top: 22px; right: 22px; font-size: 11px; padding: 4px 9px; }
@media (max-width: 760px) { .comparateur .res-mannequin figcaption { top: 12px; left: 12px; } .comparateur .res-mannequin figcaption b { font-size: 16px; } .comparateur .res-mannequin .vue-libelle { top: 12px; right: 12px; } }

/* --- accueil : photo de groupe à côté du texte (pour toutes) --- */
.heros2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 32px; padding: 40px max(32px, calc((100% - 1360px) / 2 + 32px)); background: var(--sable); }
.heros2-texte { display: flex; flex-direction: column; gap: 18px; }
.heros2 h1 { font-family: "Bagel Fat One", var(--titre); font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1; text-transform: uppercase; color: var(--noir); }
.heros2-texte > p:not(.surtitre) { font-size: 18px; color: var(--texte); max-width: 520px; }
.heros2-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.heros2-photo { margin: 0; }
.heros2-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon, 16px); }
@media (max-width: 860px) { .heros2 { grid-template-columns: 1fr; padding: 20px 16px 32px; gap: 18px; } .heros2-photo { order: -1; } }
.pour-toutes figure img { object-position: center 40%; }
@media (max-width: 640px) { .titre-etui .gonfle, .titre-etui .script { font-size: clamp(26px, 8.4vw, 44px); } .heros2 h1 { font-size: clamp(30px, 9vw, 44px); } }
@media (max-width: 640px) { .titre-etui .gonfle, .titre-etui .script { display: block; } .titre-etui .gonfle + .script { margin-left: 0; } }
/* logo « B. » dans la police des titres (Bagel Fat One) */
.logo { font-family: "Bagel Fat One", var(--capitales); font-weight: 400; font-size: 34px; letter-spacing: 0; }
.logo small { font-family: var(--corps); }
.pied .logo { font-size: 40px; }

/* --- accueil : section ados, photo réduite à côté du texte --- */
.pour-toutes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 36px; padding: 48px max(32px, calc((100% - 1360px) / 2 + 32px)); }
.pour-toutes figure img { width: 100%; height: auto; max-height: 360px; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 45%; border-radius: var(--rayon, 16px); }
.pour-toutes .pour-toutes-texte { padding: 0; margin: 0; max-width: 560px; }
@media (max-width: 860px) { .pour-toutes { grid-template-columns: 1fr; padding: 28px 16px; gap: 18px; } .pour-toutes figure img { max-height: 240px; } }

/* --- articles : note de prudence --- */
.article-note { margin-top: 28px; padding: 12px 16px; background: var(--sable); border-left: 3px solid var(--repere); font-size: 14px; color: var(--texte); }

/* --- tous les titres de page (h1) en Bagel Fat One --- */
h1, .h-page, .article h1, .heros h1 { font-family: "Bagel Fat One", var(--capitales); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; line-height: 1.02; overflow-wrap: break-word; }
.h-page { font-size: clamp(34px, 5.4vw, 64px); }
.article h1 { font-size: clamp(30px, 4.2vw, 48px); }
.resultat-taille #res-taille { font-family: "Bagel Fat One", var(--capitales); }
h1.serif, .duo h1.serif { font-family: "Bagel Fat One", var(--capitales); text-transform: uppercase; font-size: clamp(34px, 4.6vw, 58px) !important; line-height: 1.02 !important; }
h1.serif em { font-style: normal; }

/* --- Ma taille : moins de vide --- */
.comparateur:has(.res-mannequin[hidden]) { grid-template-columns: 1fr; }
.comparateur:has(.res-mannequin[hidden]) .mannequin svg { max-height: 260px; }
.essayage .resultat-taille #res-vide { padding: 4px 0; }
.section.gt-infos { padding: 36px 0 48px; }
.gt-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .gt-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .gt-grille { grid-template-columns: 1fr; } }
.gt-carte { background: #fff; border: 1px solid var(--ligne); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.gt-h2 { font-family: "Bagel Fat One", var(--capitales); font-weight: 400; text-transform: uppercase; font-size: 24px; line-height: 1.05; }
.gt-mesure { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; align-items: center; }
.gt-mesure .etapes { margin: 0; font-size: 15px; gap: 8px; }
.gt-mesure svg { width: 100%; height: auto; }
.gt-note { font-size: 13px; color: var(--doux); }
.gt-tableau th, .gt-tableau td { padding: 6px 10px; font-size: 14px; }
.gt-cups { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: end; text-align: center; }
.gt-cups li { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--doux); }
.gt-cups img { height: auto; filter: drop-shadow(0 1px 1px rgba(60, 40, 30, .25)); }
.gt-cups b { font-family: var(--capitales); font-size: 18px; color: var(--noir); }
.gt-carte .btn { align-self: flex-start; min-height: 42px; }

/* Bloc journal compact (accueil) */
.bloc-journal { padding-top: 48px; padding-bottom: 48px; }
.bj { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.bj-texte { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bj-titre { font-size: clamp(30px, 3.6vw, 44px) !important; line-height: 1.02 !important; }
.collage-mini { flex: 1 1 560px; min-width: 0; height: 300px; }
.pola { position: absolute; width: 34%; background: #fff; padding: 10px 10px 0; box-shadow: 0 6px 18px rgba(60,30,10,.12); color: var(--cacao, #2b1a12); text-decoration: none; transition: transform .2s; }
.pola img { width: 100%; height: 190px; object-fit: cover; display: block; }
.pola span { display: block; padding: 10px 2px 12px; font-weight: 600; font-size: 14px; line-height: 1.2; }
.pola:hover { transform: rotate(0) scale(1.03) !important; z-index: 2; }
@media (max-width: 640px) {
  .collage-mini { height: auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .pola { position: static; width: auto; transform: none !important; padding: 6px 6px 0; }
  .pola img { height: 110px; }
  .pola span { font-size: 12px; padding: 6px 0 8px; }
}
/* Duo premières règles plus bas */
.duo > img { height: 420px; }
.duo .texte { padding: 40px 48px; gap: 16px; }
.duo h2.serif { font-size: clamp(30px, 3.6vw, 44px) !important; }
@media (max-width: 640px) { .duo > img { height: 260px; } .duo .texte { padding: 28px 20px; } }

/* Avis clients (exemples de maquette) */
.avis-exemple { display: inline-block; background: #FFF4D6; color: #5A4300; font-size: 13px; padding: 6px 12px; border-radius: 8px; margin: -8px 0 18px; }
.avis-pleins figure { margin: 0; background: #fff; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 2px 10px rgba(60,30,10,.06); }
.avis-pleins .etoiles { color: #C8823E; letter-spacing: 2px; font-size: 16px; }
.avis-pleins blockquote { margin: 0; color: var(--texte); line-height: 1.5; font-size: 15px; flex: 1; }
.avis-pleins figcaption { font-size: 13px; color: var(--doux); }
.avis-pleins figcaption b { color: var(--texte); }
.duo > .duo-photos { flex: 1 1 520px; min-width: 0; height: 420px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.duo-photos img { width: 100%; height: 100%; object-fit: cover; display: block; min-width: 0; }
@media (max-width: 640px) { .duo > .duo-photos { height: 220px; } }

/* --- tunnel de commande --- */
.co-page { padding-top: 32px; padding-bottom: 72px; }
.co-etapes { list-style: none; margin: 0 0 22px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--doux); }
.co-etapes li { display: flex; align-items: center; gap: 8px; }
.co-etapes li + li::before { content: ""; width: 28px; height: 1.5px; background: var(--ligne-2); margin-right: 2px; }
.co-etapes span { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--ligne-2); font-size: 13px; }
.co-etapes a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.co-etapes [aria-current="step"] { color: var(--noir); }
.co-etapes [aria-current="step"] span { background: var(--noir); border-color: var(--noir); color: #fff; }
.co-etapes .fait span { background: var(--sable); border-color: var(--sable); color: var(--noir); }
.co-titre { margin-bottom: 24px; }
.co-grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.co-recap { position: sticky; top: 96px; background: var(--sable); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.co-recap-titre { font-size: 20px; }
.co-ligne-total { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; color: var(--texte); }
.co-total { font-size: 22px; font-weight: 700; color: var(--noir); padding-top: 12px; border-top: 1px solid var(--ligne-2); }
.co-rassure { list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ligne-2); display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--texte); }
.co-rassure li { display: flex; align-items: center; gap: 10px; }
.co-rassure svg { flex: 0 0 auto; color: var(--noir); }
.co-compte { font-size: 14px; color: var(--doux); margin-bottom: 10px; }
.co-lignes { display: flex; flex-direction: column; gap: 12px; }
.co-ligne { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--ligne); border-radius: 18px; padding: 12px 18px 12px 12px; }
.co-ligne img { width: 88px; height: 110px; object-fit: cover; border-radius: 12px; background: var(--gris-fond); }
.co-ligne-infos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co-ligne-infos b { font-size: 17px; }
.co-ligne-infos span { font-size: 15px; color: var(--doux); }
.co-retirer { align-self: flex-start; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--doux); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.co-retirer:hover { color: var(--noir); }
.co-ligne-prix { font-size: 18px; min-width: 70px; text-align: right; }
.co-taille { margin-top: 14px; font-size: 15px; color: var(--texte); }
.co-sous-titre { font-size: 24px; margin: 36px 0 14px; }
.co-sugs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.co-sug { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--noir); background: #fff; border: 1px solid var(--ligne); border-radius: 16px; padding: 10px; transition: transform .2s, box-shadow .2s; }
.co-sug:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(60,30,10,.08); color: var(--noir); }
.co-sug img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--gris-fond); }
.co-sug img.contenu { object-fit: contain; background: var(--peche); padding: 10px; }
.co-sug span { display: flex; flex-direction: column; font-size: 14px; color: var(--texte); line-height: 1.35; }
.co-sug span b { font-size: 16px; color: var(--noir); }
.co-sug em { font-style: normal; font-weight: 700; }

/* formulaire */
.co-form { display: flex; flex-direction: column; gap: 18px; }
.co-bloc { margin: 0; border: 1px solid var(--ligne); border-radius: 20px; padding: 22px 24px 24px; background: #fff; display: flex; flex-direction: column; gap: 14px; }
.co-bloc legend { display: flex; align-items: center; gap: 10px; padding: 0 8px; margin-left: -8px; font-family: "Bagel Fat One", var(--capitales); text-transform: uppercase; font-size: 20px; }
.co-num { width: 28px; height: 28px; border-radius: 50%; background: var(--noir); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 14px var(--corps); }
.co-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.co-champ { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.co-champ small { font-weight: 400; color: var(--doux); }
.co-large { grid-column: 1 / -1; }
.co-champ input, .co-champ textarea { font: inherit; font-weight: 400; font-size: 16px; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--ligne-2); border-radius: 12px; background: #fff; color: var(--noir); }
.co-champ textarea { resize: vertical; }
.co-champ input:focus, .co-champ textarea:focus { outline: none; border-color: var(--noir); }
.co-champ [aria-invalid="true"] { border-color: #B42318; background: #FFF6F5; }
.co-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-paiements { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.co-mode { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "radio nom prix" "radio info info"; column-gap: 10px; align-items: center; padding: 14px 16px; border: 1.5px solid var(--ligne-2); border-radius: 14px; cursor: pointer; background: #fff; }
.co-mode input { grid-area: radio; width: 18px; height: 18px; accent-color: var(--noir); margin: 0; }
.co-mode-nom { grid-area: nom; font-weight: 700; }
.co-mode-info { grid-area: info; font-size: 13px; color: var(--doux); }
.co-mode b { grid-area: prix; }
.co-mode:has(input:checked) { border-color: var(--noir); background: var(--sable); }
.co-note { font-size: 14px; color: var(--texte); }
.co-provisoire { display: inline-block; background: #FFF4D6; color: #5A4300; padding: 1px 8px; border-radius: 6px; font-size: 13px; }
.co-case { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; cursor: pointer; }
.co-case input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--noir); flex: 0 0 auto; }
.co-cadeau { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--peche); }
.co-securise { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texte); }
.co-valider { min-height: 58px; font-size: 18px; }
.co-mini { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ligne-2); }
.co-mini-ligne { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; }
.co-mini-ligne > span:nth-child(2) { display: flex; flex-direction: column; color: var(--doux); line-height: 1.3; }
.co-mini-ligne > span:nth-child(2) b { color: var(--noir); }
.co-mini-img { position: relative; }
.co-mini-img img { width: 56px; height: 68px; object-fit: cover; border-radius: 10px; background: #fff; }
.co-mini-img i { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--noir); color: #fff; font: 700 12px/20px var(--corps); text-align: center; }
.co-modifier { font-size: 14px; color: var(--doux); }

/* confirmation */
.co-merci { display: flex; align-items: center; gap: 20px; margin: 8px 0 28px; }
.co-coche { flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%; background: var(--noir); color: #fff; display: flex; align-items: center; justify-content: center; }
.co-merci .chapo { margin-top: 8px; }
.co-suivi { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.co-suivi li { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--ligne); }
.co-suivi li span { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ligne-2); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.co-suivi li.fait { background: var(--sable); border-color: var(--sable); }
.co-suivi li.fait span { background: var(--noir); border-color: var(--noir); color: #fff; }
.co-suivi em { font-style: normal; font-size: 14px; color: var(--doux); }
.co-recap-large { position: static; max-width: 560px; }
.co-suite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.co-suite-carte { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--noir); background: #fff; border: 1px solid var(--ligne); border-radius: 18px; padding: 12px 12px 16px; }
.co-suite-carte img { width: 100%; height: 150px; object-fit: cover; border-radius: 12px; margin-bottom: 6px; }
.co-suite-carte span { font-size: 14px; color: var(--texte); }

@media (max-width: 960px) {
  .co-grille { grid-template-columns: 1fr; }
  .co-recap { position: static; }
  .co-sugs, .co-suite { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 640px) {
  .co-etapes { font-size: 12px; gap: 4px; }
  .co-etapes li + li::before { width: 10px; }
  .co-etapes span { width: 22px; height: 22px; font-size: 12px; }
  .co-ligne { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px 12px; padding: 10px; }
  .co-ligne img { width: 70px; height: 88px; grid-row: span 2; }
  .co-ligne .qte { grid-column: 2; }
  .co-ligne-prix { grid-column: 3; grid-row: 1; align-self: start; min-width: 0; }
  .co-sugs, .co-suite { grid-template-columns: 1fr; }
  .co-sug { flex-direction: row; align-items: center; }
  .co-sug img { width: 72px; aspect-ratio: 1; flex: 0 0 auto; }
  .co-sug span { flex: 1; }
  .co-bloc { padding: 18px 16px 20px; }
  .co-champs, .co-modes, .co-paiements { grid-template-columns: 1fr; }
  .co-suivi { grid-template-columns: 1fr 1fr; }
  .co-merci { gap: 14px; }
  .co-coche { width: 52px; height: 52px; }
}
.co-page .h-page::after, .co-page .h-page::before { display: none !important; }
.duo .texte.section-peche { background: #FBE9E4; }

/* --- Accueil resserré : moins de place perdue --- */
.section { padding: 52px 0; }
@media (max-width: 640px) { .section { padding: 34px 0; } }
/* héros : le mot MENSTRUELLE ne se coupe plus */
@media (min-width: 861px) { .heros2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); padding-top: 32px; padding-bottom: 32px; } }
.heros2 h1 { font-size: clamp(34px, 4.1vw, 60px); overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 640px) { .heros2 h1 { font-size: clamp(26px, 7.6vw, 40px); } }
.heros2-photo img { aspect-ratio: 16 / 8.5; }
/* cartes Lou / Nina : plus de vide entre texte et prix */
#nos-culottes { padding-top: 28px !important; padding-bottom: 28px !important; }
.carte-produit .visuel { flex-basis: 36%; padding: 12px; }
.carte-produit .visuel img { max-height: 210px; }
.infos-produit { padding: 18px 22px; gap: 6px; justify-content: center; }
.infos-produit .prix { margin-top: 4px; }
/* ados, manifeste, journal, duo, guides, avis, parents */
.pour-toutes { padding-top: 32px; padding-bottom: 32px; gap: 32px; }
.pour-toutes figure img { max-height: 300px; }
.manifeste .h-section { margin: 6px 0 18px; }
.manifeste-liste { gap: 20px; }
.manifeste-liste li { padding-top: 12px; }
.manifeste-liste li::before { margin-bottom: 6px; }
.bloc-journal { padding-top: 36px; padding-bottom: 36px; }
.collage-mini { height: 270px; }
.pola img { height: 170px; }
.duo > img, .duo > .duo-photos { height: 360px; }
.duo .texte { padding: 32px 44px; }
.guide { padding: 26px 30px; gap: 6px; }
.guide .caps { font-size: 28px; }
.avis-pleins figure { padding: 18px; gap: 10px; }
.h-section { font-size: clamp(28px, 3.4vw, 42px); }
@media (max-width: 860px) { .duo > img, .duo > .duo-photos { height: 240px; } .duo .texte { padding: 24px 16px; } }

/* avis sur les fiches culottes */
.avis-fiche { padding: 40px 0; }
.avis-fiche-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.avis-themes { display: flex; flex-wrap: wrap; gap: 8px; }
.avis-themes [aria-pressed="true"] { background: var(--noir); color: #fff; border-color: var(--noir); }
.avis-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.avis-theme { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); background: var(--sable); padding: 3px 8px; border-radius: 999px; }
.avis-fiche .avis-exemple { margin: 0 0 14px; }

/* héros d'accueil agrandi : c'est l'image de la marque */
@media (min-width: 861px) {
  .heros2 { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 48px; padding-top: 56px; padding-bottom: 56px; min-height: min(78vh, 760px); }
  .heros2 h1 { font-size: clamp(44px, 4.8vw, 78px); }
  .heros2-texte { gap: 22px; }
  .heros2-texte > p:not(.surtitre) { font-size: 20px; max-width: 560px; }
  .heros2-photo img { aspect-ratio: 4 / 3; max-height: 640px; object-position: center 35%; }
  .heros2 .btn { min-height: 58px; padding: 0 34px; font-size: 18px; }
}
@media (min-width: 861px) {
  .heros2 { grid-template-columns: minmax(0, .82fr) minmax(0, 1.4fr); min-height: 0; padding-top: 44px; padding-bottom: 44px; gap: 44px; }
  .heros2-photo img { aspect-ratio: 16 / 10; max-height: none; object-position: center 30%; }
}
@media (min-width: 861px) {
  .heros2 { grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr); }
  .heros2 h1 { font-size: clamp(40px, 4.3vw, 70px); }
  .heros2 .btn { padding: 0 26px; }
}

/* mobile : galerie qui s'arrête à chaque photo, aperçu de la taille sous les vignettes */
.galerie > img, .galerie > figure { scroll-snap-stop: always; }
.mq-apercu { display: none; }
@media (max-width: 860px) {
  .galerie { scroll-behavior: auto; overscroll-behavior-x: contain; }
  .mq-apercu:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .mq-apercu figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
  .mq-apercu img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 25%; border-radius: 12px; background: var(--gris-fond); }
  .mq-apercu figcaption { font-size: 13px; color: var(--texte); }
}

/* --- accueil mobile allégé : moins de texte après les culottes --- */
@media (max-width: 640px) {
  .engagements .wrap { grid-template-columns: 1fr 1fr; gap: 10px 12px; padding-top: 14px; padding-bottom: 14px; font-size: 11.5px; letter-spacing: .02em; }
  .engagements svg { width: 22px; height: 22px; }
  .pour-toutes .chapo, .bloc-journal .chapo, .duo .chapo { display: none; }
  .manifeste .h-section { margin-bottom: 12px; }
  .manifeste-liste { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .manifeste-liste li { font-size: 0; padding-top: 10px; }
  .manifeste-liste li b { font-size: 16px; line-height: 1.15; margin: 0; }
  .guide > span:not(.caps) { display: none; }
  .guides { gap: 10px; }
  .guide { padding: 18px 20px; }
  .guide .caps { font-size: 22px; }
  .avis-pleins { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; scrollbar-width: none; }
  .avis-pleins figure { flex: 0 0 82%; scroll-snap-align: start; }
  .avis-pleins blockquote { font-size: 14px; }
  #parents .parents { gap: 8px; }
  #parents .parents li { font-size: 0; }
  #parents .parents li b { font-size: 15px; }
  #parents .parents li:last-child { font-size: 14px; }
}
@media (max-width: 860px) { .mq-apercu img { aspect-ratio: 4 / 5; object-position: center 35%; } }

/* kit premières règles (version trousse) */
.kit-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.kit-photos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.kit-photos img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.kit-photos img:last-child { aspect-ratio: 3 / 4; object-position: 40% center; }
.kit-texte { display: flex; flex-direction: column; gap: 14px; }
.kit-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kit-liste li { position: relative; padding-left: 28px; color: var(--texte); font-size: 16px; line-height: 1.45; }
.kit-liste li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--noir) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.kit-liste b { color: var(--noir); }
.kit-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.kit-prix .serif { font-family: "Bagel Fat One", var(--titre); font-size: 44px; line-height: 1; }
.kit-prix span:last-child { font-size: 14px; color: var(--doux); }
.kit-note { font-size: 13px; color: var(--doux); }
.a-valider-inline { display: inline-block; align-self: flex-start; background: #FFF4D6; color: #5A4300; padding: 3px 10px; border-radius: 6px; }
@media (max-width: 860px) { .kit-grille { grid-template-columns: 1fr; gap: 20px; } .kit-photos img:last-child { aspect-ratio: 4 / 3; } }
@media (max-width: 520px) { .kit-photos { grid-template-columns: 1fr; } .kit-photos img:last-child { display: none; } }

/* page « Mon kit » (cible du QR code du flyer) */
.mk-tete { background: #FBE9E4; padding: 32px 0 26px; }
.mk-tete .chapo { margin-top: 10px; }
.mk-sommaire { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.mk-sommaire a { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 12px; font-weight: 700; font-size: 15px; text-decoration: none; color: var(--noir); }
.mk-sommaire span, .mk-num { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--noir); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 14px var(--corps); }
.mk { padding-top: 28px; }
.mk-bloc { padding: 26px 0; border-bottom: 1px solid var(--ligne); scroll-margin-top: 90px; }
.mk-bloc:last-child { border-bottom: 0; }
.mk-bloc h2 { margin: 8px 0 12px; }
.mk-bloc h3 { font-size: 18px; margin: 16px 0 4px; }
.mk-etapes { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.mk-astuce { margin-top: 14px; background: var(--sable); border-radius: 14px; padding: 14px 16px; }
.mk-a-valider { margin-top: 14px; display: inline-block; background: #FFF4D6; color: #5A4300; font-size: 13px; padding: 4px 10px; border-radius: 6px; }
.mk-bloc .btn { margin-top: 12px; }
@media (max-width: 640px) { .mk-sommaire { grid-template-columns: 1fr 1fr; } }
.kit-sous { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 15px; }
.kit-sous li { padding-left: 0; }
.kit-sous li::before { display: none; }
/* kit : la photo en grand, puis le flyer et le cartable */
.kit-photos { grid-template-columns: 1fr 1fr; align-items: start; }
.kit-photos > img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.kit-photos .kit-flyer { display: block; transform: rotate(-2deg); box-shadow: 0 8px 22px rgba(60,30,10,.16); border-radius: 6px; overflow: hidden; transition: transform .2s; }
.kit-photos .kit-flyer:hover { transform: rotate(0) scale(1.02); }
.kit-photos .kit-flyer img { width: 100%; height: auto; aspect-ratio: auto; border-radius: 0; }
.kit-photos img:last-child { aspect-ratio: 105 / 148; height: auto; }
@media (max-width: 520px) { .kit-photos { grid-template-columns: 1fr 1fr; } .kit-photos img:last-child { display: block; } }