/* ============================================================
   MENDO — Le Havre
   Concept store & colorimétrie
   ------------------------------------------------------------
   Toutes les couleurs vives sont relevées au pixel sur son logo.
   Les pastels viennent de la roue de tissus qui lui sert de fond.
   Rien n'est inventé : c'est sa marque, remise en page.
   ============================================================ */

/* L'attribut `hidden` doit toujours gagner. Sans cette ligne, toute
   classe qui pose un `display` l'écrase en silence : c'est ce qui
   affichait les boutons « Revenir à l'actuelle » avant tout dépôt,
   les pastilles vides des onglets de l'admin, et le bandeau
   « hors ligne » de l'application alors que le réseau était là. */
[hidden]{display:none!important}


:root{
  /* --- les pétales du logo, relevés au pixel --- */
  --rose:#FB0169;
  --vert:#64C572;
  --jaune:#FCFB06;
  --orange:#F57E20;
  --bleu:#41A0C1;

  /* variantes assombries, réservées au TEXTE sur fond clair :
     le rose et le jaune du logo plafonnent sous le seuil lisible */
  --rose-texte:#C4004F;
  --bleu-texte:#2A7590;
  --vert-texte:#3F7F4A;

  /* --- la roue de tissus : les pastels du fond --- */
  --past-bleu:#C3E1EB;
  --past-vert:#E0E5D1;
  --past-creme:#F4E4CD;
  --past-rose:#F8E1DB;
  --past-lilas:#E1CADA;
  --past-lavande:#D2DAED;

  /* --- surfaces et encre --- */
  --creme:#FBF6EC;
  --creme-fonce:#F4ECDD;
  --blanc:#FFFCF7;
  --encre:#1A1614;
  --texte:#4A423C;
  --discret:#6F665E;   /* assombri : 4,50:1 sur le pastel creme, seuil AA tout juste tenu */
  --filet:#E6DCCA;
  --nuit:#151110;

  --titres:"Playfair Display",Georgia,serif;
  --corps:"Karla",system-ui,sans-serif;

  --sortie:cubic-bezier(.16,1,.3,1);
  --douce:cubic-bezier(.4,0,.2,1);
  --conteneur:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--corps);background:var(--creme);color:var(--texte);
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--titres);color:var(--encre);line-height:1.08;font-weight:700}

.conteneur{max-width:var(--conteneur);margin:0 auto;padding:0 26px}
.etiquette{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rose-texte);margin-bottom:18px;
}

/* ============================================================
   LA FLEUR — la signature graphique de Mendo
   Sept pétales, reprises du logo. Sert de puce, de séparateur,
   de marqueur de section. C'est ce qui fait « c'est bien elle ».
   ============================================================ */
.fleur{display:inline-block;vertical-align:middle}
/* PAS de transform-origin ici : les pétales portent deja rotate(a 50 50)
   dans le SVG. Ajouter une origine en CSS la combine avec celle de
   l'attribut et projette les pétales hors du cadre. */
.fleur.tourne{animation:tourne 28s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ============================================================
   EN-TÊTE
   ============================================================ */
.entete{
  position:fixed;top:0;left:0;right:0;z-index:150;height:82px;
  display:flex;align-items:center;
  transition:background .5s var(--douce),height .4s var(--douce),box-shadow .5s;
  border-bottom:1px solid transparent;
}
.entete .conteneur{display:flex;align-items:center;gap:24px;width:100%}
.entete.compacte{
  background:rgba(251,246,236,.94);backdrop-filter:saturate(180%) blur(18px);
  height:64px;border-bottom-color:var(--filet);
}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--titres);font-size:27px;font-weight:700;color:var(--encre);letter-spacing:-.01em}
.logo .fleur{width:30px;height:30px}
.nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.nav a{font-size:15px;font-weight:500;color:var(--texte);transition:color .3s}
.nav a:hover{color:var(--rose-texte)}
.nav a.actif{color:var(--rose-texte);font-weight:700}

.burger{
  display:none;margin-left:auto;width:42px;height:42px;flex:none;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none;border:0;cursor:pointer;
}
.burger span{display:block;width:22px;height:2px;background:var(--encre);border-radius:2px;
  transition:transform .32s var(--sortie),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--corps);
  font-weight:700;font-size:15px;padding:14px 26px;border-radius:99px;
  border:2px solid transparent;cursor:pointer;
  transition:transform .35s var(--sortie),background .3s,color .3s,border-color .3s,box-shadow .3s;
}
/* Le rose du logo (#FB0169) ne rend que 3,95:1 avec du blanc dessus.
   On l'assombrit d'un cheveu pour les boutons : 4,53:1, et l'oeil ne voit
   pas la difference. La couleur de marque reste intacte partout ailleurs. */
.btn-rose{background:var(--c-bouton,#E90061);color:#fff;box-shadow:0 6px 20px rgba(251,1,105,.22)}
.btn-rose:hover{background:#C4004F;transform:translateY(-3px);box-shadow:0 12px 28px rgba(251,1,105,.32)}
/* couleur choisie dans Mendo → Les pages : le survol en est une version plus sombre */
.btn-rose:hover{background:color-mix(in srgb,var(--c-bouton,#E90061) 82%,#000)}
.btn-encre{background:var(--encre);color:var(--creme)}
.btn-encre:hover{transform:translateY(-3px);background:#000}
.btn-contour{border-color:var(--encre);color:var(--encre)}
.btn-contour:hover{background:var(--encre);color:var(--creme);transform:translateY(-3px)}
.btn-clair{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(8px)}
.btn-clair:hover{background:rgba(255,255,255,.28);transform:translateY(-3px)}
.groupe-btn{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ============================================================
   HERO — la roue de couleurs
   Le fond de son logo est une roue de tissus. On la reprend en
   grand, elle tourne très lentement. C'est immédiatement elle.
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:130px 0 90px;overflow:hidden;background:var(--creme);
}
.roue{
  position:absolute;right:-14vw;top:50%;transform:translateY(-50%);
  width:min(78vh,760px);height:min(78vh,760px);pointer-events:none;
  opacity:.92;
}
.roue-tourne{animation:tourne 90s linear infinite}

/* ------------------------------------------ LA FLEUR EN DÉCOR

   Elle prend la place de la roue chromatique sur l'accueil, la
   colorimétrie et les ateliers. C'est le motif du logo de
   Marion : il dit la même chose que la roue — les couleurs — mais
   il lui appartient, alors que la roue est le schéma que tout le
   monde utilise.

   Elle ne tourne QU'AU SURVOL. Une forme qui tourne en
   permanence tire l'œil en continu, et l'œil finit par la fuir ;
   une forme immobile qui s'anime quand on passe dessus se
   remarque à chaque fois. */
.fleur-decor{
  position:absolute;right:-8vw;top:50%;transform:translateY(-50%);
  width:min(74vh,700px);height:min(74vh,700px);
  opacity:.92;z-index:1;
}
.fleur-decor .fleur-tourne{
  transform-origin:50% 50%;
  transition:transform 1.6s var(--sortie);
}
.hero:hover .fleur-decor .fleur-tourne{transform:rotate(120deg)}
.hero .conteneur{position:relative;z-index:2}
.hero .signature{
  font-family:var(--titres);font-style:italic;font-size:clamp(19px,2.1vw,25px);
  color:var(--rose-texte);margin-bottom:14px;font-weight:400;
}
.hero h1{
  font-size:clamp(46px,7.4vw,104px);max-width:13ch;letter-spacing:-.025em;
}
.hero h1 em{font-style:italic;color:var(--rose-texte)}
.hero .accroche{font-size:clamp(17.5px,1.9vw,21px);max-width:44ch;margin-top:28px;color:var(--texte)}
.hero .aieul{
  margin-top:34px;padding-left:20px;border-left:3px solid var(--jaune);
  font-size:15.5px;color:var(--discret);max-width:40ch;
}
.hero .aieul strong{color:var(--encre);font-weight:700}

/* apparition mot à mot du titre */
.mot{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.mot > span{display:inline-block;transform:translateY(125%);transition:transform 1s var(--sortie)}
.hero.prete .mot > span{transform:none}
/* .01 et pas 0 : un texte à opacité nulle n'existe pas pour Google, qui ne trouvait
   alors aucun « plus grand élément affiché » sur l'accueil (mesure en ligne du 06/10). */
.fondu{opacity:.01;transform:translateY(20px);transition:opacity .9s var(--sortie),transform .9s var(--sortie)}
.hero.prete .fondu{opacity:1;transform:none}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:110px 0}
.section.claire{background:var(--blanc)}
.section.sombre{background:var(--nuit);color:#D6CCC0}
.section.sombre h2,.section.sombre h3{color:#fff}
.section.creme{background:var(--creme-fonce)}
.titre-section{font-size:clamp(32px,4.4vw,58px);max-width:18ch;letter-spacing:-.02em}
.chapeau{font-size:18.5px;max-width:56ch;margin-top:20px}

/* ============================================================
   LES QUATRE SAISONS
   Le cœur de sa méthode : la boutique est rangée comme ça.
   ============================================================ */
.saisons{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px}
.saison{
  position:relative;border-radius:20px;overflow:hidden;padding:30px 24px 26px;
  background:var(--blanc);border:1px solid var(--filet);cursor:pointer;
  transition:transform .5s var(--sortie),box-shadow .5s var(--douce);

  /* Devenues des liens vers la boutique filtrée : il faut le dire
     au navigateur, qui souligne et colore les liens par défaut. */
  display:block;text-decoration:none;color:inherit;cursor:pointer;
}
.saison:hover,.saison.active{transform:translateY(-8px);box-shadow:0 20px 44px rgba(26,22,20,.10)}
.saison h3{font-size:25px;margin-bottom:6px}
.saison .quoi{font-size:14px;color:var(--discret);margin-bottom:20px}
.saison .nuancier{display:flex;gap:0;border-radius:10px;overflow:hidden;height:64px}
.saison .nuancier i{flex:1;transition:flex .45s var(--sortie)}
.saison:hover .nuancier i:hover{flex:2.2}
.saison .note{font-size:14px;margin-top:18px;color:var(--texte)}

/* ============================================================
   LE DIAGNOSTIC — la pièce maîtresse
   Quatre questions, une palette qui se révèle, une invitation
   à venir en vrai. C'est ce qu'aucun thème ne sait faire.
   ============================================================ */
.diagnostic{
  background:var(--blanc);border:1px solid var(--filet);border-radius:28px;
  padding:clamp(28px,4vw,56px);max-width:900px;margin:0 auto;
  box-shadow:0 24px 60px rgba(26,22,20,.07);position:relative;overflow:hidden;
}
.diag-barre{height:4px;background:var(--filet);border-radius:99px;overflow:hidden;margin-bottom:32px}
.diag-barre i{display:block;height:100%;width:0;background:var(--rose);transition:width .5s var(--sortie)}
.diag-etape{display:none}
.diag-etape.active{display:block;animation:entre .55s var(--sortie)}
@keyframes entre{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.diag-question{font-family:var(--titres);font-size:clamp(23px,3vw,34px);color:var(--encre);margin-bottom:8px;line-height:1.15}
.diag-aide{font-size:15px;color:var(--discret);margin-bottom:28px}
.diag-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.choix{
  border:2px solid var(--filet);border-radius:16px;padding:20px 18px;cursor:pointer;
  background:var(--creme);text-align:left;font-family:var(--corps);font-size:15.5px;
  color:var(--texte);transition:border-color .3s,transform .35s var(--sortie),background .3s;
}
.choix:hover{border-color:var(--rose);transform:translateY(-4px)}
.choix.pris{border-color:var(--rose);background:#fff}
.choix .pastille{display:block;width:100%;height:38px;border-radius:9px;margin-bottom:13px}
.choix strong{display:block;color:var(--encre);font-weight:700;margin-bottom:3px;font-size:16px}
.choix span.sous{font-size:13.5px;color:var(--discret);line-height:1.45}

.diag-nav{display:flex;justify-content:space-between;align-items:center;margin-top:30px;gap:14px}
.diag-retour{background:none;border:0;cursor:pointer;font-family:var(--corps);font-size:14.5px;
  color:var(--discret);text-decoration:underline;padding:8px 0}
.diag-retour:hover{color:var(--encre)}
.diag-compte{font-size:13.5px;color:var(--discret);letter-spacing:.05em}

/* --- le résultat --- */
.resultat{text-align:center}
.resultat .saison-nom{
  font-family:var(--titres);font-size:clamp(38px,6vw,72px);color:var(--encre);
  letter-spacing:-.03em;margin:6px 0 14px;
}
.resultat .palette{display:flex;gap:0;border-radius:16px;overflow:hidden;height:96px;margin:26px 0 6px}
.resultat .palette i{flex:1;transform:scaleY(0);transform-origin:bottom;
  transition:transform .6s var(--sortie)}
.resultat.montre .palette i{transform:none}
.resultat .palette i:nth-child(1){transition-delay:.05s}
.resultat .palette i:nth-child(2){transition-delay:.12s}
.resultat .palette i:nth-child(3){transition-delay:.19s}
.resultat .palette i:nth-child(4){transition-delay:.26s}
.resultat .palette i:nth-child(5){transition-delay:.33s}
.resultat .palette i:nth-child(6){transition-delay:.40s}
.resultat .explication{font-size:16.5px;max-width:52ch;margin:22px auto 0}
.resultat .reserve{
  margin-top:32px;padding:26px;border-radius:18px;background:var(--creme);
  border:1px dashed var(--rose);
}
.resultat .reserve p{font-size:16px;max-width:46ch;margin:0 auto 18px}
.honnete{font-size:13.5px;color:var(--discret);margin-top:22px;font-style:italic}

/* ============================================================
   LES TROIS PARCOURS — remplacent la liste de 14 prestations
   ============================================================ */
.parcours{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;align-items:start}
.carte-parcours{
  background:var(--blanc);border:1px solid var(--filet);border-radius:22px;
  padding:34px 30px;transition:transform .5s var(--sortie),box-shadow .5s;
  display:flex;flex-direction:column;height:100%;
}
.carte-parcours:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(26,22,20,.10)}
.carte-parcours.vedette{border:2px solid var(--rose);position:relative}
/* L'étiquette « Le plus choisi » n'apparaît que si on la demande. Elle
   avait du sens sur les trois formules de prestations, aucun sur
   « Créer un compte » — on ne choisit pas entre se connecter et créer
   un compte, on est dans l'un ou dans l'autre. */
.carte-parcours.vedette[data-etiquette]::before{
  content:attr(data-etiquette);position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--rose);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 15px;border-radius:99px;white-space:nowrap;
}
.carte-parcours .pour{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-texte);font-weight:700;margin-bottom:12px}
.carte-parcours h3{font-size:28px;margin-bottom:10px}
.carte-parcours .prix{font-family:var(--titres);font-size:46px;font-weight:700;color:var(--encre);letter-spacing:-.02em;margin:16px 0 4px}
.carte-parcours .duree{font-size:14px;color:var(--discret);margin-bottom:20px}
.carte-parcours ul{list-style:none;margin:0 0 26px}
.carte-parcours li{position:relative;padding-left:26px;margin-bottom:11px;font-size:15.5px}
.carte-parcours li::before{
  content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;
  background:var(--vert);
}
.carte-parcours .btn{margin-top:auto;justify-content:center}

/* le détail complet, replié */
.detail-tarifs{margin-top:44px;border-top:1px solid var(--filet)}
.detail-tarifs details{border-bottom:1px solid var(--filet)}
.detail-tarifs summary{
  list-style:none;cursor:pointer;padding:22px 0;font-family:var(--titres);font-size:20px;
  color:var(--encre);display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.detail-tarifs summary::-webkit-details-marker{display:none}
.detail-tarifs summary::after{content:"+";font-size:26px;color:var(--rose-texte);transition:transform .4s var(--sortie)}
.detail-tarifs details[open] summary::after{transform:rotate(45deg)}
.tarif-ligne{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--filet)}
.tarif-ligne:last-child{border-bottom:0;padding-bottom:24px}
.tarif-ligne .quoi strong{display:block;color:var(--encre);font-size:16px}
.tarif-ligne .quoi span{font-size:14px;color:var(--discret)}
.tarif-ligne .combien{font-family:var(--titres);font-weight:700;font-size:20px;color:var(--encre);white-space:nowrap}

/* ============================================================
   LES TROIS FAÇONS DE VENIR
   ============================================================ */
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.facon{position:relative;border-radius:22px;overflow:hidden;min-height:340px;
  display:flex;align-items:flex-end;padding:32px;color:#fff;
  transition:transform .55s var(--sortie)}
.facon:hover{transform:translateY(-8px)}
.facon .fond{position:absolute;inset:0;transition:transform 1.1s var(--sortie)}
.facon:hover .fond{transform:scale(1.05)}
.facon .voile{position:absolute;inset:0;background:linear-gradient(transparent 28%,rgba(21,17,16,.88))}
.facon .dedans{position:relative;z-index:2}
.facon h3{color:#fff;font-size:26px;margin-bottom:8px}
.facon p{font-size:15.5px;color:#E4DCD3;max-width:30ch}
.facon .depuis{display:inline-block;margin-top:14px;font-weight:700;color:var(--c-mention,var(--jaune));font-size:15px}

/* ============================================================
   AVIS
   ============================================================ */
.avis{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.avis-carte{background:var(--blanc);border:1px solid var(--filet);border-radius:20px;padding:32px}
.etoiles{color:var(--c-etoiles,var(--jaune));font-size:19px;letter-spacing:3px;margin-bottom:16px;
  -webkit-text-stroke:.6px var(--orange)}
.avis-carte p{font-size:16.5px;font-style:italic;color:var(--texte)}
.avis-carte .qui{margin-top:18px;font-weight:700;color:var(--encre);font-size:15px}

/* ============================================================
   BOUTIQUE — l'étape 2
   ============================================================ */
.bandeau-etape2{
  background:var(--past-lavande);border-radius:24px;padding:clamp(30px,4vw,54px);
  display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;margin-top:20px;
}
.bandeau-etape2 .marque-etape{
  display:inline-block;background:var(--encre);color:var(--creme);font-size:11.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;
  border-radius:99px;margin-bottom:16px;
}
.bandeau-etape2 h2{font-size:clamp(28px,3.6vw,44px);margin-bottom:14px}
.grille-produits{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.produit{background:var(--blanc);border-radius:14px;overflow:hidden;border:1px solid rgba(26,22,20,.07)}
.produit .vignette{aspect-ratio:3/4;position:relative;overflow:hidden}
.produit .vignette .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.produit .infos{padding:12px 14px}
.produit .nom{font-size:14.5px;color:var(--encre);font-weight:700}
.produit .saison-tag{font-size:12px;color:var(--discret);margin-top:2px}

.filtres-saison{display:flex;gap:10px;flex-wrap:wrap;margin:32px 0 28px}
.filtre{
  border:2px solid var(--filet);background:var(--blanc);border-radius:99px;
  padding:9px 20px;font-family:var(--corps);font-size:14.5px;font-weight:700;
  color:var(--texte);cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:9px;
}
.filtre .pt{width:13px;height:13px;border-radius:50%;flex:none}
.filtre:hover{border-color:var(--encre)}
.filtre.pris{background:var(--encre);color:#fff;border-color:var(--encre)}

/* ============================================================
   FINAL
   ============================================================ */
.final{background:var(--nuit);color:#D6CCC0;padding:130px 0;text-align:center;position:relative;overflow:hidden}
.final .halo{position:absolute;width:620px;height:620px;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(251,1,105,.22),transparent 66%);filter:blur(50px)}
.final .conteneur{position:relative;z-index:2}
.final h2{color:#fff;font-size:clamp(34px,5.4vw,68px);max-width:17ch;margin:0 auto;letter-spacing:-.025em}
.final p{margin:24px auto 0;max-width:46ch;font-size:18px}
.final .groupe-btn{justify-content:center}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.pied{background:var(--encre);color:#A79C92;padding:80px 0 0}
.pied .haut{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:44px}
.pied .logo{color:#fff;font-size:30px;padding:0;margin-bottom:0}
.pied h4{color:#fff;font-family:var(--corps);font-size:12px;text-transform:uppercase;
  letter-spacing:.14em;font-weight:700;margin-bottom:16px}
/* Ces liens forment une LISTE VERTICALE. Une tentative précédente les
   avait passés en inline-flex pour élargir la zone cliquable : ils se
   sont collés les uns aux autres en une seule ligne illisible —
   « AccueilLa colorimétriePrestations & tarifs ». On garde donc
   display:block, et la zone cliquable vient du remplissage, pas d'une
   hauteur minimale qui étirerait la colonne. */
.pied a{display:block;padding:4px 0;margin-bottom:6px;font-size:15px;color:#A79C92;
  transition:color .3s,transform .3s var(--sortie)}
/* Un lien posé dans une phrase reste dans la phrase. */
.pied p a{display:inline;padding:0;margin:0}
.pied a:hover{color:var(--jaune);transform:translateX(3px)}
.pied p{font-size:15px;margin-bottom:10px}
.pied-legal a{display:inline-block;padding:6px 2px;margin:0}
.pied .bas{border-top:1px solid #302926;padding:20px 0;font-size:13px;color:#8C8279;   /* 4,78:1 : #7A7069 ne rendait que 3,72:1 */
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* La signature du studio. Soulignée et non seulement colorée : sur un pied
   sombre, la couleur seule ne dit pas qu'il y a un lien. */
.pied-signature a{display:inline;padding:0;margin:0;color:#D8CFC7;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(216,207,199,.5)}
.pied-signature a:hover{color:var(--jaune);transform:none;
  text-decoration-color:var(--jaune)}

/* ============================================================
   PAGES INTÉRIEURES
   ============================================================ */
.hero.page{min-height:auto;padding:160px 0 76px}
.hero.page h1{font-size:clamp(38px,5.8vw,74px);max-width:17ch}
.hero.page .roue{width:min(56vh,480px);height:min(56vh,480px);right:-8vw;opacity:.7}
.hero.page .fleur-decor{width:min(54vh,460px);height:min(54vh,460px);right:-5vw;opacity:.8}

/* ============================================================
   RÉVÉLATION AU SCROLL
   ============================================================ */
.rev{opacity:0;transform:translateY(26px);transition:opacity .8s var(--sortie),transform .8s var(--sortie)}
.rev.vu{opacity:1;transform:none}
.rev.r1{transition-delay:.08s}
.rev.r2{transition-delay:.16s}
.rev.r3{transition-delay:.24s}

/* ============================================================
   FOCUS CLAVIER
   ============================================================ */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--rose);outline-offset:3px;border-radius:6px;
}
.facon a:focus-visible,.final a:focus-visible,.pied a:focus-visible{outline-color:var(--jaune)}

/* ============================================================
   ACCESSIBILITÉ — tout se coupe si la personne le demande
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rev,.rev.vu{opacity:1;transform:none;transition:none}
  .mot > span{transform:none;transition:none}
  .fondu{opacity:1;transform:none;transition:none}
  .roue-tourne,.fleur.tourne{animation:none}
  .fleur-decor .fleur-tourne,.hero:hover .fleur-decor .fleur-tourne{transform:none;transition:none}
  .resultat .palette i{transform:none;transition:none}
  .btn:hover,.saison:hover,.carte-parcours:hover,.facon:hover,.facon:hover .fond{transform:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .saisons{grid-template-columns:repeat(2,1fr)}
  .parcours{grid-template-columns:1fr;gap:18px}
  .trois{grid-template-columns:1fr}
  .avis{grid-template-columns:1fr}
  .bandeau-etape2{grid-template-columns:1fr;gap:30px}
  .pied .haut{grid-template-columns:1fr 1fr}
  .roue{opacity:.5}
  .fleur-decor{opacity:.55}
}
@media(max-width:767px){
  .burger{display:flex}
  .entete .conteneur{gap:12px}
  .nav{
    position:fixed;inset:0 0 auto 0;top:64px;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(251,246,236,.98);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--filet);padding:8px 24px 22px;margin-left:0;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .28s var(--douce),transform .28s var(--sortie);
  }
  .nav.ouvert{transform:none;opacity:1;pointer-events:auto}
  .nav a{font-size:17px;padding:14px 0;border-bottom:1px solid var(--filet)}
  .nav a:last-child{border-bottom:0}
  .hero{padding:108px 0 70px;min-height:auto}
  .hero.page{padding:112px 0 56px}
  .roue{right:-40vw;opacity:.35}
  .fleur-decor{right:-32vw;opacity:.4}
  .section{padding:74px 0}
  .final{padding:88px 0}
  .saisons{grid-template-columns:1fr;gap:14px}
  .pied .haut{grid-template-columns:1fr;gap:30px}
  .diag-choix{grid-template-columns:1fr 1fr;gap:10px}
  .choix{padding:14px 12px}
  .choix .pastille{height:30px}
  .resultat .palette{height:70px}
  .grille-produits{grid-template-columns:1fr 1fr}
}

/* ============================================================
   RÉSERVATION — le parcours jouable
   ------------------------------------------------------------
   Même grammaire que le diagnostic : une barre de progression,
   des étapes qui se remplacent, des choix en cartes cliquables.
   Marion doit pouvoir cliquer dedans devant Tom.
   ============================================================ */

.resa{background:var(--blanc);border:1px solid var(--filet);border-radius:22px;
  padding:clamp(24px,4vw,44px);text-align:left;box-shadow:0 18px 44px rgba(26,22,20,.05)}

.resa-barre{height:4px;background:var(--filet);border-radius:99px;overflow:hidden;margin-bottom:30px}
.resa-barre i{display:block;height:100%;width:25%;background:var(--rose);
  transition:width .5s var(--sortie)}

.resa-etape{display:none}
.resa-etape.active{display:block;animation:entre .5s var(--sortie)}

.resa-titre{font-family:var(--titres);font-size:clamp(22px,2.6vw,30px);color:var(--encre);
  line-height:1.18;margin-bottom:6px}
.resa-aide{font-size:15px;color:var(--discret);margin-bottom:24px}

/* --- étape 1 : les formules --- */
.resa-formules{display:grid;gap:12px}
.resa-formule{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;
  background:var(--creme);border:1.5px solid var(--filet);border-radius:15px;
  padding:16px 18px;cursor:pointer;font-family:var(--corps);
  transition:border-color .25s,background .25s,transform .25s var(--douce)}
.resa-formule:hover{border-color:var(--rose);transform:translateY(-2px)}
.resa-formule[aria-pressed="true"]{border-color:var(--rose);background:var(--past-rose)}
.resa-formule .nom{font-weight:700;color:var(--encre);font-size:16.5px;display:block}
.resa-formule .quoi{font-size:14px;color:var(--texte);display:block;margin-top:3px}
.resa-formule .cout{margin-left:auto;text-align:right;flex-shrink:0}
.resa-formule .cout b{display:block;font-family:var(--titres);font-size:20px;color:var(--rose-texte)}
.resa-formule .cout span{display:block;font-size:13px;color:var(--discret);margin-top:2px}

.resa-option{display:flex;align-items:center;gap:11px;margin-top:16px;padding:13px 16px;
  background:var(--past-creme);border-radius:13px;font-size:14.5px;color:var(--texte);cursor:pointer}
.resa-option input{width:18px;height:18px;accent-color:var(--rose);cursor:pointer;flex-shrink:0}
/* l'atelier : combien serez-vous ? */
.resa-groupe{margin:0 0 22px}
.resa-sous{font-weight:700;color:var(--encre);font-size:15px;margin:0 0 10px}
.resa-nombres{display:flex;gap:8px;flex-wrap:wrap}
.resa-nombres .resa-nombre{min-width:56px;padding:10px 0;font-size:18px;font-weight:700}
/* le règlement : l'acompte, ou tout */
.resa-reglement{border:0;padding:0;margin:0 0 18px}
.resa-reglement .resa-option{margin-top:8px;align-items:flex-start}
.resa-reglement .resa-option input{margin-top:2px}
.resa-reglement legend{padding:0}

/* --- étape 2 : les créneaux --- */
.resa-jours{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 12px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.resa-jour{flex:0 0 auto;min-width:76px;background:var(--creme);border:1.5px solid var(--filet);
  border-radius:13px;padding:11px 8px;cursor:pointer;font-family:var(--corps);text-align:center;
  transition:border-color .25s,background .25s}
.resa-jour:hover{border-color:var(--rose)}
.resa-jour[aria-pressed="true"]{border-color:var(--rose);background:var(--past-rose)}
.resa-jour .j{display:block;font-size:12.5px;color:var(--discret);text-transform:uppercase;letter-spacing:.07em}
.resa-jour .n{display:block;font-family:var(--titres);font-size:21px;color:var(--encre);line-height:1.2;margin-top:3px}
.resa-jour .m{display:block;font-size:12px;color:var(--discret)}
.resa-jour[disabled]{opacity:.4;cursor:not-allowed}
.resa-jour[disabled]:hover{border-color:var(--filet)}

.resa-heures{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px;margin-top:22px}
.resa-heure{background:var(--blanc);border:1.5px solid var(--filet);border-radius:11px;
  padding:11px 6px;cursor:pointer;font-family:var(--corps);font-size:15.5px;color:var(--encre);
  transition:border-color .2s,background .2s}
.resa-heure:hover{border-color:var(--rose);background:var(--past-rose)}
.resa-vide{font-size:15px;color:var(--discret);margin-top:20px;padding:18px;
  background:var(--creme);border-radius:13px}

/* --- étape 3 : les coordonnées --- */
.resa-champs{display:grid;gap:15px}
.resa-champ label{display:block;font-size:14px;color:var(--texte);margin-bottom:6px;font-weight:700}
.resa-champ input,.resa-champ textarea{width:100%;font-family:var(--corps);font-size:16px;
  color:var(--encre);background:var(--blanc);border:1.5px solid var(--filet);border-radius:12px;
  padding:12px 14px}
.resa-champ textarea{min-height:84px;resize:vertical}
.resa-champ input:focus,.resa-champ textarea:focus{outline:none;border-color:var(--rose)}

.resa-recap{background:var(--past-creme);border-radius:15px;padding:17px 19px;margin-bottom:22px}
.resa-recap .l{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-size:15px;color:var(--texte)}
.resa-recap .l + .l{border-top:1px solid rgba(26,22,20,.07)}
.resa-recap .l b{color:var(--encre);text-align:right}

/* --- étape 4 : c'est fait --- */
.resa-fait{text-align:center;padding:8px 0}
.resa-coche{width:62px;height:62px;margin:0 auto 20px;border-radius:50%;
  background:var(--past-vert);display:grid;place-items:center}
.resa-coche svg{width:30px;height:30px;stroke:var(--vert-texte);stroke-width:2.6;
  fill:none;stroke-linecap:round;stroke-linejoin:round}

.resa-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:14px}
.resa-retour{background:none;border:0;cursor:pointer;font-family:var(--corps);font-size:14.5px;
  color:var(--discret);padding:8px 2px}
.resa-retour:hover{color:var(--encre)}
.resa-compte{font-size:13.5px;color:var(--discret);letter-spacing:.05em}

/* --- l'agenda des ateliers --- */
.ateliers{display:grid;gap:14px;margin-top:26px}
.atelier{display:flex;align-items:center;gap:18px;background:var(--blanc);
  border:1px solid var(--filet);border-radius:16px;padding:17px 20px;text-align:left;flex-wrap:wrap}
.atelier .quand{flex:0 0 auto;text-align:center;min-width:62px}
.atelier .quand .n{display:block;font-family:var(--titres);font-size:27px;color:var(--encre);line-height:1}
.atelier .quand .m{display:block;font-size:12.5px;color:var(--discret);text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.atelier .quoi{flex:1 1 190px;min-width:0}
.atelier .quoi strong{display:block;font-size:16.5px;color:var(--encre)}
.atelier .quoi span{display:block;font-size:14px;color:var(--discret);margin-top:3px}
.atelier .places{flex:0 0 auto;font-size:13.5px;font-weight:700;padding:6px 13px;border-radius:99px;white-space:nowrap}
.atelier .places.reste{background:var(--past-vert);color:#2F6B3A}   /* 4,96:1 — le vert de marque
   ne rendait que 3,75:1 sur ce pastel */
.atelier .places.presque{background:var(--past-creme);color:#8A4A12}
.atelier .places.complet{background:var(--creme-fonce);color:var(--discret)}

@media(max-width:640px){
  .resa-formule{flex-wrap:wrap}
  .resa-formule .cout{margin-left:0;text-align:left;width:100%;display:flex;align-items:baseline;gap:9px}
  .resa-formule .cout span{margin-top:0}
  .atelier{gap:13px}
  .atelier .places{width:100%}
}

/* Les petites étiquettes du parcours de réservation utilisent un gris
   plus foncé que --discret : sur l'état sélectionné, qui est en pastel
   rose et non en crème, --discret ne rend que 4,49:1 — sous le seuil AA
   d'un cheveu. Le reste de la maquette n'est pas touché. */
.resa-formule .cout span,
.resa-jour .j,
.resa-jour .m{color:#685F57}

/* ============================================================
   BOUTIQUE — le filtrage croisé
   ------------------------------------------------------------
   Trois axes qui se combinent : saison, morphologie, type de
   vêtement. C'est précisément ce que sa boutique actuelle ne
   peut pas faire, parce que morphologie et saison y sont rangées
   en catégories plutôt qu'en attributs.
   ============================================================ */

.filtres{margin:30px 0 26px}
.filtre-ligne{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filtre-ligne > .lab{font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:#685F57;min-width:98px;flex:none}

.filtre.mini{padding:7px 13px;font-size:14px}
.filtre.morpho{min-width:42px;justify-content:center;font-weight:700}

.compte-produits{font-size:15px;color:var(--texte);margin:4px 0 20px}
.compte-produits b{color:var(--encre)}
.compte-produits .raz{background:none;border:0;cursor:pointer;font-family:var(--corps);
  font-size:14px;color:var(--rose-texte);font-weight:700;padding:4px 2px;margin-left:8px}

.grille-produits.reelle{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.produit .vignette img{width:100%;height:100%;object-fit:cover;display:block}
.produit .vignette.vide{background:var(--past-creme);display:grid;place-items:center}
.produit .vignette.vide span{font-family:var(--titres);font-size:14px;color:#70604A;   /* 4,79:1 — #8A7A66 ne rendait que 3,33:1 */
  text-align:center;padding:0 12px;line-height:1.35}
.produit .prix-p{font-family:var(--titres);font-size:16px;color:var(--rose-texte);margin-top:3px}
.produit .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.produit .tag{font-size:11px;padding:3px 7px;border-radius:99px;background:var(--creme-fonce);color:#685F57}
.produit .tag.sais{background:var(--past-rose);color:#A3004A}

.vide-total{grid-column:1/-1;text-align:center;padding:46px 20px;background:var(--creme);
  border-radius:16px}
.vide-total p{font-family:var(--titres);font-size:20px;color:var(--encre);margin-bottom:8px}
.vide-total span{font-size:15px;color:var(--discret)}

@media(max-width:640px){
  .filtre-ligne > .lab{min-width:100%;margin-bottom:-4px}
  .grille-produits.reelle{grid-template-columns:repeat(2,1fr);gap:11px}
}

/* ============================================================
   EN-TÊTE — structure inspirée de motusboutique.fr
   ------------------------------------------------------------
   La boutique parisienne que Marion cite en référence. Ce qui est
   repris : le bandeau d'annonces défilant, le logo centré avec la
   navigation en dessous, le méga-menu à colonnes, et les icônes
   compte / recherche / panier à droite.

   Ce qui n'est PAS repris : leurs arguments de vente à distance
   (livraison offerte, expédition 24/48 h). Mendo est une boutique
   où l'on vient, et son avantage est l'inverse : le conseil sur
   place. Recopier « livraison offerte » affaiblirait sa marque.
   ============================================================ */

.annonces{background:var(--encre);color:#FBF6EC;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;overflow:hidden;position:relative;height:38px}
.annonces .piste{display:flex;align-items:center;justify-content:center;height:100%;
  position:absolute;inset:0;opacity:0;transition:opacity .6s var(--douce);padding:0 16px;text-align:center}
.annonces .piste.vue{opacity:1}

/* La couleur du bandeau se règle dans l'admin (« Les pages »). Le
   site la reçoit dans --fond-entete ; sans réglage, c'est le crème
   d'origine, légèrement translucide pour le flou au défilement. */
.entete2{position:sticky;top:0;z-index:60;background:var(--fond-entete,rgba(251,246,236,.94));
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--filet)}
.entete2 .haut{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:14px;padding:14px 0}
.entete2 .logo2{grid-column:2;display:flex;align-items:center;gap:10px;justify-self:center;
  min-height:44px;padding:4px 6px;
  font-family:var(--titres);font-size:27px;color:var(--encre);text-decoration:none;letter-spacing:.01em}
.entete2 .outils{grid-column:3;justify-self:end;display:flex;align-items:center;gap:6px}
.entete2 .outil{background:none;border:0;cursor:pointer;border-radius:10px;
  /* 44 px : recherche, compte et panier étaient à 37 px, sous le seuil */
  width:44px;height:44px;padding:0;
  color:var(--encre);display:grid;place-items:center;text-decoration:none;position:relative}
.entete2 .outil:hover{background:var(--creme-fonce)}
.entete2 .outil svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
/* le nombre est écrit par le CSS : le lien s'appelle « Mon panier (2) » pour les lecteurs d'écran,
   sans texte visible qui le contredise */
.entete2 .pastille::after{content:attr(data-n)}
.entete2 .pastille{position:absolute;top:3px;right:3px;background:var(--rose);color:#fff;
  font-size:11.5px;font-weight:700;min-width:18px;height:16px;border-radius:99px;
  display:grid;place-items:center;font-family:var(--corps);padding:0 4px}

.nav2{display:flex;justify-content:center;gap:6px;padding-bottom:4px;flex-wrap:wrap}
.nav2 > .item{position:relative}
.nav2 .lien{display:inline-flex;align-items:center;gap:6px;padding:11px 15px;
  font-size:14.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--texte);
  text-decoration:none;background:none;border:0;cursor:pointer;font-family:var(--corps);
  border-bottom:2px solid transparent}
.nav2 .lien:hover,.nav2 .item.ouvert .lien{color:var(--encre);border-bottom-color:var(--rose)}
.nav2 .lien.actif{color:var(--rose-texte);border-bottom-color:var(--rose)}
.nav2 .lien .chev{width:9px;height:9px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .25s}
.nav2 .item.ouvert .lien .chev{transform:rotate(-135deg) translateY(-2px)}

.mega{position:absolute;left:50%;transform:translateX(-50%);top:100%;margin-top:-2px;
  background:var(--blanc);border:1px solid var(--filet);border-radius:18px;
  box-shadow:0 26px 60px rgba(26,22,20,.13);padding:26px 30px;
  display:none;gap:30px;min-width:760px}
.nav2 .item.ouvert .mega{display:flex;animation:mega-entre .28s var(--sortie)}
.mega .col{min-width:150px}
.mega .col h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:#685F57;margin-bottom:11px;font-family:var(--corps);font-weight:700}
.mega .col a{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:15px;
  color:var(--texte);text-decoration:none}
.mega .col a:hover{color:var(--rose-texte)}
.mega .col a .rond{width:14px;height:14px;border-radius:50%;flex:none}
.mega .col a .lettre{width:24px;height:24px;border-radius:7px;background:var(--creme-fonce);
  display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--encre);flex:none}
.mega .pousse{background:var(--past-creme);border-radius:14px;padding:20px;
  flex:0 0 232px;align-self:flex-start}
.mega .pousse strong{display:block;font-family:var(--titres);font-size:19px;
  color:var(--encre);margin-bottom:8px;line-height:1.2;text-wrap:balance}
.mega .pousse span{font-size:13.5px;color:var(--texte);display:block;margin-bottom:12px}

.burger2{display:none;grid-column:1;justify-self:start;background:none;border:0;cursor:pointer;
  /* 44 px minimum : c'est le bouton le plus utilisé du site sur téléphone */
  width:44px;height:44px;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;padding:0;border-radius:10px}
@media(max-width:900px){.burger2{display:flex}}
.burger2 span{display:block;width:21px;height:2px;background:var(--encre);border-radius:2px}
.burger2 span + span{margin-top:5px}

@media(max-width:900px){
  /* flex-wrap:wrap vient de la barre de bureau, où il sert à passer à
     la ligne. En colonne avec une hauteur plafonnée, il fait tout autre
     chose : le conteneur ENROULE en colonnes. Le méga ouvert dépassait
     la hauteur, le menu se coupait donc en deux colonnes, et la seconde
     sortait de l'écran par la droite. Une seule propriété à remettre. */
  /* Deux propriétés héritées de la barre de bureau faisaient des dégâts
     une fois le menu en colonne avec une hauteur plafonnée :

     flex-wrap:wrap        -> le conteneur ENROULAIT en colonnes ; le
                              menu se coupait en deux et la seconde
                              colonne sortait de l'écran par la droite.
     justify-content:center -> le contenu trop haut débordait des DEUX
                              côtés, et le haut devenait inatteignable :
                              « Accueil » était coupé sans aucun moyen
                              de remonter, scrollTop ne pouvant pas
                              descendre sous zéro. */
  .nav2{display:none;flex-direction:column;align-items:stretch;gap:0;
    flex-wrap:nowrap;justify-content:flex-start;
    border-top:1px solid var(--filet);padding:6px 0 14px}
  .nav2.ouvert{display:flex}
  .nav2 .lien{width:100%;justify-content:space-between;border-bottom:0;padding:13px 4px}
  .mega{position:static;transform:none;display:none;min-width:0;flex-direction:column;
    /* ceinture et bretelles : même si un jour un parent rétrécit, le
       panneau se cale sur lui au lieu de prendre sa largeur naturelle */
    width:auto;max-width:100%;
    gap:18px;box-shadow:none;border:0;background:var(--creme);padding:4px 4px 14px}
  .nav2 .item.ouvert .mega{display:flex}
  .entete2 .haut{grid-template-columns:auto 1fr auto}
  .entete2 .logo2{grid-column:2;font-size:23px}
}

/* --- bandeau de réassurance, adapté à une boutique où l'on vient --- */
.reassurance{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  padding:38px 0;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.reassurance div{text-align:center}
.reassurance svg{width:28px;height:28px;stroke:var(--rose-texte);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}
.reassurance strong{display:block;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--encre);margin-bottom:5px}
.reassurance span{font-size:14px;color:var(--texte);line-height:1.45}
@media(max-width:760px){.reassurance{grid-template-columns:repeat(2,1fr);gap:24px 16px}}

/* --- tuiles de collection --- */
.tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tuile{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;
  display:block;text-decoration:none;background:var(--past-creme)}
.tuile img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--sortie)}
.tuile:hover img{transform:scale(1.05)}
.tuile .voile2{position:absolute;inset:0;background:linear-gradient(transparent 42%,rgba(21,17,16,.74))}
.tuile b{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#fff;
  font-size:13.5px;letter-spacing:.11em;text-transform:uppercase;z-index:2;padding:0 10px}
@media(max-width:900px){.tuiles{grid-template-columns:repeat(2,1fr)}}

/* --- Corrections de contraste et de débordement, v2 --- */

/* La pastille du panier : blanc sur le rose de marque ne rend que
   3,95:1. Le rose foncé de la palette tient 5,9:1. */
.entete2 .pastille{background:var(--rose-texte)}

/* Le voile des tuiles doit garantir la lisibilité du libellé quelle
   que soit la photo derrière — certaines sont très claires en bas. */
.tuile .voile2{background:linear-gradient(transparent 38%,rgba(21,17,16,.88))}
.tuile b{text-shadow:0 1px 8px rgba(21,17,16,.6)}

/* Sur la page compte, les deux cartes se superposaient en mobile :
   la grille était figée à deux colonnes par un style en ligne. */
@media(max-width:760px){
  .compte-grille{grid-template-columns:1fr !important}
}


/* Le méga-menu est centré par translateX(-50%). Son animation d'entrée
   doit donc conserver cette translation à l'arrivée : l'animation
   générique « entre » finit sur transform:none, ce qui recadrait le
   menu à gauche d'un coup en fin d'animation. */
@keyframes mega-entre{
  from{opacity:0;transform:translateX(-50%) translateY(10px)}
  to  {opacity:1;transform:translateX(-50%) translateY(0)}
}

/* Le fond blanc jurait avec la crème du site, et l'encart du test
   s'y détachait mal. Le menu prend le fond de la page, l'encart
   passe en rose pâle : la hiérarchie redevient lisible. */
.mega{background:var(--creme);box-shadow:0 24px 56px rgba(26,22,20,.16)}
.mega .pousse{background:var(--past-rose)}
.mega .col a .lettre{background:var(--blanc);border:1px solid var(--filet)}

/* Une zone tampon invisible sous l'onglet : sans elle, le curseur
   traverse un pixel de vide entre l'onglet et le menu, qui se referme. */
.nav2 > .item{position:relative}
.nav2 .item.ouvert::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}

@media(max-width:900px){
  .mega{background:var(--creme-fonce);box-shadow:none;margin-top:0}
  .nav2 .item.ouvert::after{display:none}
}

/* --- Son vrai logo, relevé sur son site --- */
/* La hauteur du logo se règle dans l'admin (« Les pages », de 80 à
   150 %). Le site la reçoit dans --taille-logo ; sans réglage, 1 —
   soit 46 px, déjà 20 % de plus qu'au départ, à la demande de Marion. */
.logo-img{height:calc(46px * var(--taille-logo, 1));width:auto;display:block}
.entete2 .logo2{gap:0}
.pied .logo{display:inline-block}
.pied-logo{height:44px;filter:brightness(0) invert(1)}
@media(max-width:900px){.logo-img{height:calc(38px * var(--taille-logo, 1))}}
/* Sur le panier, la commande et le compte, la feuille de WooCommerce
   impose « .woocommerce-page img { height:auto } » : le logo reprenait
   sa taille d'origine (450 px). On reprend la main, là seulement. */
.woocommerce-page .entete2 .logo-img{height:calc(46px * var(--taille-logo, 1));max-width:none}
.woocommerce-page .pied .pied-logo{height:44px;max-width:none}
@media(max-width:900px){.woocommerce-page .entete2 .logo-img{height:calc(38px * var(--taille-logo, 1))}}

/* --- Ses tuiles de collection : le libellé est déjà dans l'image,
       donc ni voile ni texte par-dessus. --- */
.tuile.sienne .voile2,.tuile.sienne b{display:none}
.tuile.sienne{aspect-ratio:280/400;background:var(--creme-fonce)}
.tuile.sienne img{object-position:center}

.tuiles.six{grid-template-columns:repeat(3,1fr)}
.tuiles.six .tuile{aspect-ratio:280/400}
@media(max-width:900px){.tuiles.six{grid-template-columns:repeat(2,1fr)}}

/* Ses photos derrière les cartes de l'accueil */
.facon .fond img{width:100%;height:100%;object-fit:cover;display:block}


/* ============================================================
   Le méga-menu débordait par la droite
   ------------------------------------------------------------
   Il est en position:absolute dans un onglet de nav étroit. Or la
   largeur d'un élément absolu se calcule contre son bloc conteneur :
   ici l'onglet, large de deux cents pixels. Le menu ne pouvait donc
   pas s'élargir pour contenir ses quatre colonnes, et l'encart rose
   sortait du cadre arrondi.

   width:max-content règle le problème à la source : la largeur se
   calcule sur le contenu, sans consulter le parent. Le max-width
   garde le menu dans la fenêtre sur les petits écrans.
   ============================================================ */
.mega{
  width:max-content;
  max-width:min(94vw, 920px);
  min-width:0;
  flex-wrap:nowrap;
  box-sizing:border-box;
}
.mega .col{min-width:0;flex:0 1 auto}
.mega .col a{white-space:nowrap}
.mega .pousse{flex:0 0 224px}

@media(max-width:900px){
  .mega{width:auto;max-width:none}
  .mega .col a{white-space:normal}
  .mega .pousse{flex:1 1 auto}
}

/* Centré sur son onglet, le menu sortait de l'écran vers 1000 px de
   large : « La collection » est à gauche de la barre. On l'ancre donc
   sur la barre de navigation elle-même, qui est centrée sur la page. */
@media(min-width:901px){
  .nav2{position:relative}
  .nav2 > .item{position:static}
  .mega{left:50%;transform:translateX(-50%)}
}






/* ============================================================
   LE TRIO D'ACCUEIL — le motif de motusboutique.fr
   ------------------------------------------------------------
   Chez eux : des tuiles pleine largeur séparées d'un filet fin,
   et un libellé blanc centré en capitales espacées. On reprend ce motif en trois colonnes égales — ce qui
   place naturellement la vidéo entre les deux photos.

   Bénéfice inattendu : à 480 px de large, ses photos de 373 px ne
   sont agrandies que d'un tiers, contre le double en demi-largeur.
   Elles restent nettes.
   ============================================================ */
/* Un filet de crème entre les cases, et le même sur les bords :
   c'est l'égalité des deux qui fait qu'on lit une grille voulue
   plutôt que trois images posées côte à côte. Assez fin pour que
   les trois continuent de se lire comme un seul bandeau. */
.trio{display:grid;grid-template-columns:repeat(3,1fr);width:100%;
  --ecart:clamp(6px,.8vw,12px);gap:var(--ecart);padding:var(--ecart);
  background:var(--creme)}
.trio-case{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
  text-decoration:none;background:var(--creme-fonce)}
.trio-case img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.3s var(--sortie)}
.trio-case:hover img{transform:scale(1.05)}

/* Un voile bas garantit la lisibilité du libellé quelle que soit
   la photo : à 0,86 d'opacité, le blanc tient au-dessus de 4,5:1
   même sur une image entièrement claire. */
.voile3{position:absolute;inset:0;
  background:linear-gradient(rgba(21,17,16,.12) 0%,rgba(21,17,16,.14) 42%,rgba(21,17,16,.86) 100%)}
.trio-case b{position:absolute;left:0;right:0;bottom:36px;z-index:2;text-align:center;
  color:#fff;font-family:var(--corps);font-size:clamp(15px,1.5vw,20px);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:0 18px;line-height:1.35;
  text-shadow:0 2px 14px rgba(21,17,16,.75)}
.trio-case:not(.video)::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:22px;width:0;height:1.5px;background:#fff;transition:width .45s var(--sortie);z-index:2}
.trio-case:not(.video):hover::after{width:64px}

/* ------------------------------------------- LA CASE VIDÉO

   La vidéo REMPLIT sa case, exactement comme les deux photos :
   même taille, même format, à tous les écrans. Plus de bandes
   crème, plus de case qui change de format selon la vidéo.

   Choix de Marion et Tom au test du 28/09/2026 : l'ancienne
   version (`contain`) montrait la vidéo en entier mais ne
   remplissait jamais l'encart, et ça cassait le bandeau. Une
   vidéo filmée à la verticale perd donc un peu en haut et en bas :
   cadrer la tenue au centre au tournage. */
.trio-case.video{background:var(--creme-fonce)}
/* En absolu, et pas en simple 100 % : dans une case en grille, une
   hauteur en pourcentage ne se résout pas, la vidéo prenait sa
   hauteur naturelle et débordait. Vu au rendu. */
.video-vitrine{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}

@media(max-width:820px){
  .trio{grid-template-columns:1fr}
  .trio-case{aspect-ratio:16/10}
}

/* ============================================================
   LA MORPHOLOGIE — six silhouettes, même geste que les saisons
   ============================================================ */
.morphos{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:46px}
.morpho{display:block;text-decoration:none;color:inherit;text-align:center;
  background:var(--blanc);border:1px solid var(--filet);border-radius:20px;
  padding:24px 16px 22px;
  transition:transform .5s var(--sortie),box-shadow .5s var(--douce)}
.morpho:hover,.morpho:focus-visible{transform:translateY(-8px);box-shadow:0 20px 44px rgba(26,22,20,.10)}
.morpho svg{width:62%;max-width:92px;height:auto;display:block;margin:0 auto 14px;
  transition:transform .6s var(--sortie)}
.morpho:hover svg{transform:scale(1.05)}
.morpho h3{font-size:26px;margin-bottom:6px;line-height:1}
.morpho p{font-size:13.5px;color:var(--discret);line-height:1.45;margin:0}

@media(max-width:1100px){ .morphos{grid-template-columns:repeat(3,1fr)} }
@media(max-width:560px){  .morphos{grid-template-columns:repeat(2,1fr);gap:12px} }
@media(prefers-reduced-motion:reduce){
  .morpho,.morpho svg{transition:none}
  .morpho:hover,.morpho:hover svg{transform:none}
}

/* ============================================================
   LES PORTANTS — la seconde rangée de la mosaïque
   ------------------------------------------------------------
   Même filet que le trio, et pas de filet en haut : le bas du
   trio en fournit déjà un. Les deux rangées se soudent ainsi en
   une seule mosaïque, 3 cases puis 4 — c'est ce décalage qui fait
   l'effet puzzle.

   Les photos produits sont en 2/3 : on garde leur format pour ne
   rien couper du vêtement.
   ============================================================ */
.portants{display:grid;grid-template-columns:repeat(4,1fr);
  --ecart:clamp(6px,.8vw,12px);gap:var(--ecart);
  padding:0 var(--ecart) var(--ecart);background:var(--creme)}
.portant{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;
  text-decoration:none;background:var(--creme-fonce)}
.portant img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .6s var(--douce),transform 1.3s var(--sortie)}
.portant .ph2{opacity:0}
.portant:hover .ph2,.portant:focus-visible .ph2{opacity:1}
.portant:hover img{transform:scale(1.03)}
.portant b{position:absolute;left:0;right:0;bottom:30px;z-index:2;text-align:center;
  color:#fff;font-family:var(--corps);font-size:clamp(14px,1.25vw,18px);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:0 14px;line-height:1.35;
  text-shadow:0 2px 14px rgba(21,17,16,.75)}
.portant::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:18px;width:0;height:1.5px;background:#fff;transition:width .45s var(--sortie);z-index:2}
.portant:hover::after{width:56px}

/* Sur écran tactile, pas de survol : la seconde photo est
   masquée, et une image lazy masquée n'est pas téléchargée. */
@media (hover:none){ .portant .ph2{display:none} }

@media(max-width:820px){
  .portants{grid-template-columns:repeat(2,1fr)}
}
/* Les deux blocs 50/50 sous les portants : la mosaïque continue, une rangée de deux,
   en paysage. Sur téléphone, l'un sous l'autre. */
.portants.duo{grid-template-columns:repeat(2,1fr)}
.portants.duo .portant{aspect-ratio:3/2}
@media(max-width:560px){ .portants.duo{grid-template-columns:1fr} .portants.duo .portant{aspect-ratio:16/10} }
@media(prefers-reduced-motion:reduce){
  .portant img{transition:opacity .01s}
  .portant:hover img{transform:none}
}

/* Ses mots à elle, repris sans les retoucher. Une mesure un peu
   plus étroite et un interlignage plus aéré : c'est un récit, il se
   lit d'une traite, pas en diagonale. */
.mots-delle{font-size:17.5px;line-height:1.72;color:var(--texte);max-width:62ch;margin-bottom:20px}
.mots-delle:first-of-type{font-size:19px;color:var(--encre)}

/* --- Les ateliers : ses textes, notre mise en page --- */
.deux-ateliers{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.carte-atelier{background:var(--blanc);border:1px solid var(--filet);border-radius:20px;
  padding:clamp(24px,3vw,38px)}
.carte-atelier h2{font-family:var(--titres);font-size:clamp(23px,2.6vw,30px);
  color:var(--encre);margin-bottom:16px}
.carte-atelier p{font-size:16px;color:var(--texte);line-height:1.68;margin-bottom:14px}
.carte-atelier .btn{margin-top:8px}

.atelier-lieu{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,52px);align-items:center}
.atelier-lieu.inverse .visuel{order:2}
.atelier-lieu .visuel{border-radius:20px;overflow:hidden;background:var(--creme-fonce)}
.atelier-lieu .visuel img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2}
.atelier-lieu .dit p{font-size:16.5px;color:var(--texte);line-height:1.7;margin-bottom:14px}

.puces-sophro{margin:14px 0 18px;padding-left:0;list-style:none}
.puces-sophro li{position:relative;padding-left:24px;margin-bottom:9px;font-size:16.5px;color:var(--texte)}
.puces-sophro li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px;
  border-radius:50%;background:var(--rose)}

@media(max-width:820px){
  .deux-ateliers{grid-template-columns:1fr}
  .atelier-lieu{grid-template-columns:1fr}
  .atelier-lieu.inverse .visuel{order:0}
}

/* ============================================================
   Le titre du hero se resserrait trop
   ------------------------------------------------------------
   À -0,025em sur un corps de 104 px, le crénage retirait 2,6 px
   entre chaque lettre : assez pour écraser la ligature « fi » de
   « Enfin » et coller les caractères. Et comme le crénage
   s'applique aussi à l'espace, les mots se retrouvaient à 21 px
   les uns des autres.

   Playfair Display est une didone à fort contraste : elle a besoin
   d'air. On desserre les lettres et on rend leur place aux mots.
   ============================================================ */
/* Les lettres desserrées, le titre s'élargit : sans ajuster la mesure
   il passait de deux à trois lignes. */
.hero h1{letter-spacing:-.008em;word-spacing:.08em;max-width:15ch}
.titre-section{letter-spacing:-.008em}

/* ============================================================
   CARROUSEL D'AVIS
   ------------------------------------------------------------
   Défilement natif par ancrage : le navigateur fait le travail,
   le doigt fonctionne tout seul sur mobile, et si le JavaScript
   ne se charge pas, ça reste une liste qui se fait glisser. Les
   flèches et les puces sont un confort ajouté par-dessus.
   ============================================================ */
.carrousel{position:relative;margin-top:34px}
.piste-avis{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);
  gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 20px; /* pas de scroll-behavior:smooth ici : avec l'aimantation, Chrome y voyait un défilement
     dès le chargement et cessait de mesurer l'accueil (« aucun LCP », mesuré le 06/10). Les flèches
     défilent en douceur par le script. */
  scrollbar-width:none;-ms-overflow-style:none}
.piste-avis::-webkit-scrollbar{display:none}
.piste-avis > .avis-carte{scroll-snap-align:start;margin:0}

@media(min-width:760px){.piste-avis{grid-auto-columns:calc((100% - 40px)/3)}}
@media(min-width:520px) and (max-width:759px){.piste-avis{grid-auto-columns:calc((100% - 20px)/2)}}

.carrousel-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.fleche{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--filet);
  background:var(--blanc);cursor:pointer;display:grid;place-items:center;
  transition:border-color .25s,background .25s,opacity .25s}
.fleche svg{width:20px;height:20px;stroke:var(--encre);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.fleche:hover{border-color:var(--rose);background:var(--past-rose)}
.fleche[disabled]{opacity:.32;cursor:default}
.fleche[disabled]:hover{border-color:var(--filet);background:var(--blanc)}

/* Avec deux avis, cette rangée faisait 97 px. Avec dix, elle en fait
   521 et poussait toute la page en défilement horizontal sur téléphone.
   Elle s'enroule maintenant — les zones tactiles restent à 44 px, seul
   le point reste petit. */
.puces{display:flex;flex-wrap:wrap;justify-content:center;gap:0 2px;max-width:100%}
.puces button{
  /* La pastille visible reste petite — c'est un point, pas un bouton —
     mais la zone que le doigt touche fait 44 px. Sans ça on vise un
     point de 12 px, et on tombe une fois sur deux. */
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center}
.puces button::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--filet);transition:background .3s,transform .3s}
.puces button[aria-selected="true"]::before{background:var(--rose);transform:scale(1.3)}

/* ============================================================
   LE MÉGA-MENU EN MOBILE
   ------------------------------------------------------------
   Déplié, il faisait 1242 px de haut : une fois et demie l'écran,
   pour seize liens empilés un par ligne. Il fallait faire défiler
   longtemps avant de retrouver « La colorimétrie » ou « Réserver ».

   Sur un écran étroit, ces entrées ne sont pas des lignes de liste
   mais des étiquettes : quatre saisons, six lettres, cinq types.
   En pastilles qui s'enroulent, les seize lignes deviennent quatre.
   ============================================================ */
@media(max-width:900px){

  /* le panneau ne dépasse jamais l'écran */
  .nav2.ouvert{max-height:calc(100vh - 108px);overflow-y:auto;overscroll-behavior:contain}

  .mega{padding:10px 4px 16px;gap:16px}
  .mega .col{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .mega .col h4{width:100%;margin:0 0 2px}

  /* saisons et types : pastilles */
  .mega .col a{
    display:inline-flex;align-items:center;gap:7px;padding:8px 13px;
    background:var(--blanc);border:1px solid var(--filet);border-radius:99px;
    font-size:14.5px;line-height:1;white-space:nowrap}
  .mega .col a:active{background:var(--past-rose);border-color:var(--rose)}

  /* morphologies : la lettre suffit, le mot reste pour les lecteurs d'écran */
  .hors-ecran-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .mega .col a:has(.lettre){padding:5px 8px}
  .mega .col a .lettre{width:30px;height:30px;border-radius:8px;font-size:15px;border:0;
    background:var(--creme-fonce)}

  .mega .pousse{width:100%;padding:16px 18px}
  .mega .pousse strong{font-size:17px;margin-bottom:5px}
  .mega .pousse span{font-size:13px;margin-bottom:10px}
}

/* Les pastilles faisaient 33 px de haut : sous les 44 px
   recommandés pour une cible tactile confortable. */
@media(max-width:900px){
  .mega .col a{min-height:44px}
  .mega .col a:has(.lettre){min-width:44px;justify-content:center}
}

/* ============================================================
   LA SECONDE PHOTO AU SURVOL
   ------------------------------------------------------------
   Comme chez Motus. Ses 43 produits photographiés en ont tous au
   moins deux : la seconde montre le vêtement porté autrement, ou
   vu de dos. C'est ce qui donne l'impression d'une vraie boutique
   plutôt que d'un catalogue.

   Elle n'est rendue que sur les appareils qui savent survoler :
   sur un téléphone personne ne la verrait, et ce serait 1,6 Mo
   téléchargés pour rien.
   ============================================================ */
.produit .vignette.double{position:relative}
.produit .vignette.double .ph1,
.produit .vignette.double .ph2{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .55s var(--douce)}
.produit .vignette.double .ph2{opacity:0}
.produit:hover .vignette.double .ph2{opacity:1}
.produit:hover .vignette.double .ph1{opacity:0}

/* Le clavier a droit au même aperçu que la souris. */
.produit:focus-within .vignette.double .ph2{opacity:1}
.produit:focus-within .vignette.double .ph1{opacity:0}

@media (prefers-reduced-motion: reduce){
  .produit .vignette.double .ph1,
  .produit .vignette.double .ph2{transition:none}
}

/* ============================================================
   LA FICHE PRODUIT
   ------------------------------------------------------------
   Une seule page, pilotée par l'identifiant passé dans l'adresse :
   elle fonctionne pour les 62 pièces. Marion peut cliquer
   n'importe quel vêtement de la boutique et tomber sur sa fiche.

   Ce qui la distingue d'une fiche de boutique ordinaire : la
   saison et les morphologies sont affichées en premier, avant
   même la description. C'est l'information que personne d'autre
   ne donne — et c'est la raison d'être du site.
   ============================================================ */
/* Le fil d'Ariane est une navigation, pas du texte courant : ses liens
   méritent une hauteur de doigt. Les numéros de téléphone posés au
   milieu d'une phrase, eux, restent inline — les agrandir casserait
   l'interligne du paragraphe, et la règle des cibles tactiles prévoit
   justement cette exception pour les liens dans une phrase. */
.fil-ariane{font-size:14px;color:var(--discret);margin-bottom:20px;
  display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.fil-ariane a{display:inline-flex;align-items:center;min-height:44px}
.fil-ariane a{color:var(--texte)}
.fil-ariane a:hover{color:var(--rose-texte)}
.fil-ariane span{margin:0 7px;opacity:.55}

.fiche{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(26px,4vw,60px);align-items:start}

.galerie .vue-produit{position:relative;border-radius:20px;overflow:hidden;background:var(--creme-fonce);aspect-ratio:2/3}

/* Flèches sur la grande photo. Toujours visibles, pas seulement au
   survol : sur téléphone il n'y a pas de survol, et c'est justement
   là qu'on en a le plus besoin. 44 px, la cible tactile minimale. */
.vue-produit .fleche{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,252,247,.94);box-shadow:0 2px 12px rgba(26,22,20,.22);
  transition:background .2s,transform .2s}
.vue-produit .fleche:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.vue-produit .fleche:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.vue-produit .fleche.prec{left:12px}
.vue-produit .fleche.suiv{right:12px}
.vue-produit .fleche svg{width:20px;height:20px;fill:none;stroke:var(--encre);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vue-produit .compteur{position:absolute;right:12px;bottom:12px;
  padding:4px 11px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--encre);background:rgba(255,252,247,.94)}
@media (prefers-reduced-motion: reduce){
  .vue-produit .fleche{transition:none}
  .vue-produit .fleche:hover{transform:translateY(-50%)}
}
.galerie .vue-produit img{width:100%;height:100%;object-fit:cover;display:block}
.miniatures{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.miniatures button{width:74px;aspect-ratio:2/3;border-radius:11px;overflow:hidden;padding:0;
  border:2px solid transparent;background:var(--creme-fonce);cursor:pointer}
.miniatures button img{width:100%;height:100%;object-fit:cover;display:block}
.miniatures button[aria-current="true"]{border-color:var(--rose)}

.details h1{font-family:var(--titres);font-size:clamp(28px,3.4vw,42px);color:var(--encre);
  line-height:1.14;letter-spacing:-.008em;margin-bottom:10px}
.fa-prix{font-family:var(--titres);font-size:30px;color:var(--rose-texte);margin-bottom:20px}

.fa-palette{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.fa-jeton{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;
  font-size:14px;background:var(--past-rose);color:#A3004A;font-weight:700}
.fa-jeton .rond{width:12px;height:12px;border-radius:50%}
.fa-jeton.morpho{background:var(--creme-fonce);color:var(--encre)}

.fa-accroche{font-size:16.5px;line-height:1.68;color:var(--texte);margin-bottom:26px;white-space:pre-line}

.fa-label{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:#685F57;margin-bottom:10px}
.tailles{display:flex;flex-wrap:wrap;gap:9px}
.tailles button{min-width:56px;min-height:46px;padding:10px 14px;border-radius:12px;
  border:1.5px solid var(--filet);background:var(--blanc);cursor:pointer;
  font-family:var(--corps);font-size:15px;color:var(--encre)}
.tailles button:hover{border-color:var(--rose)}
.tailles button[aria-pressed="true"]{background:var(--encre);color:#fff;border-color:var(--encre)}
.fa-guide{font-size:13.5px;color:var(--discret);margin-top:12px}
.fa-guide a{color:var(--rose-texte);font-weight:700}

.fa-ajout{width:100%;margin:24px 0 18px;justify-content:center}
.fa-rassure{list-style:none;padding:0;margin:0 0 26px}
.fa-rassure li{position:relative;padding-left:22px;font-size:14.5px;color:var(--texte);margin-bottom:8px}
.fa-rassure li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--vert)}
.fa-rassure a{color:var(--rose-texte);font-weight:700}

.fa-detail{border-top:1px solid var(--filet);padding:16px 0}
.fa-detail summary{cursor:pointer;font-weight:700;color:var(--encre);font-size:16px;list-style:none}
.fa-detail summary::-webkit-details-marker{display:none}
.fa-detail summary::after{content:"+";float:right;color:var(--rose-texte);font-size:20px;line-height:1}
.fa-detail[open] summary::after{content:"–"}
.fa-detail > div{padding-top:12px;font-size:15.5px;line-height:1.68;color:var(--texte);white-space:pre-line}

.fa-morpho-liste{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fa-morpho-liste span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--creme-fonce);font-weight:700;color:var(--encre)}
.fa-morpho-liste span.non{opacity:.3;text-decoration:line-through}

@media(max-width:860px){ .fiche{grid-template-columns:1fr} }

/* Les cartes produit sont devenues des liens. */
a.produit{text-decoration:none;display:block;transition:transform .3s var(--douce)}
a.produit:hover{transform:translateY(-3px)}

/* ============================================================
   LA CARTE CADEAU
   ------------------------------------------------------------
   Note : partout où du texte blanc se pose sur du rose, c'est
   #E90061 et non le --rose de marque. Le rose du logo ne rend
   que 3,95:1 avec du blanc — joli sur un pétale, illisible sur
   un bouton. Même arbitrage que .btn-rose plus haut.
   ------------------------------------------------------------
   Le dégradé va de #C4004F à #8A0038 : au point le plus clair,
   le blanc rend encore 6,07:1. Le rose de marque #FB0169 n'aurait
   donné que 3,95:1 — joli, mais illisible pour du texte.
   ============================================================ */
.cadeau-tete{display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:center}
.cadeau-points{list-style:none;margin:26px 0 30px;padding:0}
.cadeau-points li{position:relative;padding-left:26px;margin-bottom:11px;
  font-size:17px;color:var(--texte)}
.cadeau-points li::before{content:"";position:absolute;left:0;top:8px;
  width:9px;height:9px;border-radius:50%;background:var(--rose)}

.cadeau-scene{display:flex;flex-direction:column;align-items:center;gap:14px}
/* La carte cadeau : SA carte (photo du 06/10). Motif à gauche, titre
   vert et quatre lignes à droite, comme le carton qu'elle donne en
   boutique. Les tailles suivent la largeur de la carte (cqw) : elle
   reste la même en petit sur un téléphone. */
.cadeau-carte{
  width:100%;max-width:440px;aspect-ratio:1.41/1;margin:0;
  display:grid;grid-template-columns:45% 1fr;container-type:inline-size;
  background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 24px 50px rgba(43,42,50,.16),0 2px 6px rgba(43,42,50,.08);
  transform:rotate(-2deg);transition:transform .5s var(--sortie)}
.cadeau-carte:hover{transform:rotate(0deg)}
.cc-motif{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.cc-droite{display:flex;flex-direction:column;min-width:0;padding:6.5cqw 3.5cqw 4cqw 4.5cqw}
.cc-titre{width:78%;height:auto;margin:0 0 5.5cqw}
.cc-titre-texte{font-family:var(--titres);font-size:7cqw;line-height:1;color:#76B280;margin:0 0 5cqw}
.cc-ligne{margin:0 0 3.6cqw;font-family:Garamond,"EB Garamond",Georgia,"Times New Roman",serif;
  font-size:14px;font-size:3.3cqw;line-height:1.22;color:#2B2A32}
.cc-ligne b{font-family:var(--titres);font-style:italic;font-weight:600;color:var(--rose-texte)}
.cc-code{margin:auto 0 0;font:600 10.5px/1 ui-monospace,Menlo,Consolas,monospace;font-size:2.5cqw;
  letter-spacing:.06em;color:#2B2A32;opacity:.7}
.cc-mot{max-width:380px;margin:0;text-align:center;font-family:var(--titres);font-style:italic;
  font-size:16px;line-height:1.5;color:var(--texte)}
.cadeau-legende{font-size:13.5px;color:var(--discret);text-align:center}

.cadeau-grille{display:grid;grid-template-columns:1fr 330px;gap:52px;
  align-items:start;margin-top:42px}
.cadeau-bloc{border:0;padding:0;margin:0 0 34px}
.cadeau-bloc legend{display:flex;align-items:center;gap:12px;padding:0;
  font-family:var(--titres);font-size:24px;color:var(--encre);margin-bottom:6px}
.cadeau-num{display:inline-flex;align-items:center;justify-content:center;
  width:29px;height:29px;border-radius:50%;background:#E90061;color:#fff;
  font-family:var(--corps);font-size:14px;font-weight:700;flex:none}
.cadeau-aide{font-size:14.5px;color:var(--discret);margin:0 0 14px}

.cadeau-jetons{display:flex;flex-wrap:wrap;gap:10px}
.cadeau-jeton{padding:11px 17px;min-height:44px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--filet);background:var(--blanc);color:var(--texte);
  font-family:var(--corps);font-size:15px;font-weight:600;transition:all .2s}
.cadeau-jeton:hover{border-color:var(--rose);color:var(--encre)}
.cadeau-jeton.actif{background:#E90061;border-color:#E90061;color:#fff}
.cadeau-jeton:focus-visible{outline:2px solid var(--rose-texte);outline-offset:2px}

.cadeau-libre{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:18px;padding:14px 18px;border-radius:14px;background:var(--blanc);
  border:1px solid var(--filet);font-size:15px;color:var(--texte)}
.cadeau-euro{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--encre)}
.cadeau-euro input{width:86px;padding:9px 11px;border-radius:9px;
  border:1.5px solid var(--filet);background:var(--creme);font:600 16px var(--corps);
  color:var(--encre);text-align:right}

.cadeau-champs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
.cadeau-form label{display:block;font-size:13.5px;font-weight:700;color:var(--encre)}
.cadeau-plein{margin-top:16px}
.cadeau-form input[type=text],.cadeau-form input[type=email],
.cadeau-form input[type=date],.cadeau-form textarea{
  display:block;width:100%;margin-top:7px;padding:12px 14px;border-radius:11px;
  border:1.5px solid var(--filet);background:var(--blanc);
  font:400 15.5px var(--corps);color:var(--encre)}
.cadeau-form textarea{resize:vertical;line-height:1.5}
.cadeau-form input:focus,.cadeau-form textarea:focus{outline:none;border-color:var(--rose)}
.cadeau-compte{display:block;margin-top:6px;font-size:12.5px;font-weight:400;
  color:var(--discret)}

.cadeau-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.cadeau-option{display:flex;align-items:flex-start;gap:11px;padding:15px 16px;
  border-radius:14px;border:1.5px solid var(--filet);background:var(--blanc);
  cursor:pointer;font-weight:400}
.cadeau-option:has(input:checked){border-color:var(--rose);background:var(--past-rose)}
.cadeau-option input{margin-top:3px;accent-color:var(--rose);width:18px;height:18px;flex:none}
.cadeau-option b{display:block;font-size:15px;color:var(--encre)}
.cadeau-option small{display:block;margin-top:3px;font-size:13px;color:var(--texte)}

.cadeau-final{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--filet)}
.cadeau-total{font-size:16px;color:var(--texte);margin:0}
.cadeau-total b{font-family:var(--titres);font-size:31px;color:var(--encre);
  margin-left:8px;vertical-align:-3px}
.cadeau-note{margin-top:14px;font-size:14.5px;color:var(--rose-texte);font-weight:600;min-height:1.4em}

.cadeau-aside{background:var(--blanc);border:1px solid var(--filet);
  border-radius:18px;padding:26px 24px;position:sticky;top:118px}
.cadeau-aside h3{font-size:20px;margin-bottom:16px}
.cadeau-aside dt{font-size:14.5px;font-weight:700;color:var(--encre);margin-top:16px}
.cadeau-aside dt:first-of-type{margin-top:0}
.cadeau-aside dd{margin:5px 0 0;font-size:14px;color:var(--texte);line-height:1.55}
.cadeau-tel{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--filet);
  font-size:14.5px;color:var(--texte)}

.cadeau-etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.cadeau-etapes article{background:var(--creme-fonce);border-radius:18px;padding:30px 26px}
.cadeau-etapes span{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:#E90061;color:#fff;
  font-weight:700;font-size:17px;margin-bottom:16px}
.cadeau-etapes h3{font-size:22px;margin-bottom:9px}
.cadeau-etapes p{font-size:15.5px;color:var(--texte);line-height:1.6}

/* Le lien cadeau glissé dans le méga-menu : il s'empile sous la
   pousse du test, donc il allonge le menu sans jamais l'élargir. */
.mega .pousse .cadeau-lien{display:block;margin-top:16px;padding-top:15px;
  border-top:1px solid rgba(26,22,20,.14);font-size:13.5px;font-weight:700;
  color:var(--rose-texte)}
.mega .pousse .cadeau-lien small{display:block;font-weight:400;font-size:12.5px;
  color:var(--texte);margin-top:2px}

@media(max-width:980px){
  .cadeau-tete{grid-template-columns:1fr;gap:38px}
  .cadeau-grille{grid-template-columns:1fr;gap:34px}
  .cadeau-aside{position:static}
  .cadeau-etapes{grid-template-columns:1fr}
}
@media(max-width:560px){
  .cadeau-champs,.cadeau-options{grid-template-columns:1fr}
  .cadeau-carte{transform:none}
  .cadeau-final{flex-direction:column;align-items:stretch}
  .cadeau-final .btn{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .cadeau-carte,.cadeau-carte:hover{transform:none;transition:none}
}

/* ============================================================
   LE PLAN DANS LE PIED DE PAGE
   ------------------------------------------------------------
   Le plan Google ne se charge PAS tout seul. Une carte intégrée
   dépose des traceurs et contacte Google dès l'ouverture de la
   page — donc avant tout consentement. En la chargeant au clic,
   la visiteuse choisit, et le site reste net tant qu'elle n'a
   rien demandé. Le lien « Itinéraire », lui, ne charge rien :
   il ouvre simplement Google Maps dans un autre onglet.
   ============================================================ */
.pied-plan{margin-top:18px}
.plan-charger{display:flex;align-items:center;gap:10px;width:100%;max-width:250px;
  min-height:52px;padding:9px 12px;border-radius:11px;cursor:pointer;text-align:left;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.07);
  font-family:var(--corps);color:#fff;transition:background .2s,border-color .2s}
.plan-charger:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.42)}
.plan-charger:focus-visible{outline:2px solid #fff;outline-offset:2px}
.plan-charger b{display:block;font-size:14px;color:#fff;margin-bottom:2px}
.plan-charger span span,.plan-charger > span{font-size:12.5px;line-height:1.4;
  color:rgba(255,255,255,.82)}
.plan-icone{width:30px;height:30px;flex:none;border-radius:8px;
  background:rgba(255,255,255,.15);position:relative}
.plan-icone::before{content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:11px;height:11px;border-radius:50% 50% 50% 0;rotate:-45deg;
  border:2.5px solid #fff}
.plan-cadre{margin-top:10px;border-radius:12px;overflow:hidden;max-width:280px;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.07)}
.plan-cadre iframe{display:block;width:100%;height:190px;border:0}
.plan-y-aller{display:inline-block;padding:8px 0;margin-top:2px}
/* .pied-legal a est réglé plus haut, avec une zone cliquable de 44 px */

@media(max-width:900px){
  /* Au doigt, on a besoin des 44 px. Sur grand écran la souris vise
     juste, et la colonne garde son rythme d'origine. */
  .pied a{padding:10px 0;margin-bottom:2px}
  .pied .logo{padding:0}
  .plan-charger,.plan-cadre{max-width:none}
  .plan-y-aller{padding:12px 0}
}

/* ============================================================
   LES PAGES LÉGALES
   ------------------------------------------------------------
   Colonne étroite, titres nets, et surtout : les trous à
   remplir se voient. Une mention légale à moitié remplie mise
   en ligne, c'est pire que pas de page du tout.
   ============================================================ */
.legal{padding:44px 0 90px}
.legal .conteneur{max-width:780px}
.legal h1{font-family:var(--titres);font-size:clamp(30px,4vw,46px);color:var(--encre);
  line-height:1.1;margin:0 0 10px;letter-spacing:-.012em}
.legal .maj{font-size:14px;color:var(--discret);margin:0 0 30px}
.legal h2{font-family:var(--titres);font-size:25px;color:var(--encre);
  margin:40px 0 12px;padding-top:22px;border-top:1px solid var(--filet)}
.legal h3{font-family:var(--corps);font-size:15.5px;font-weight:700;color:var(--encre);
  margin:22px 0 7px}
.legal p,.legal li{font-size:16.5px;line-height:1.68;color:var(--texte)}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{margin-bottom:7px}
.legal dl{margin:0 0 16px}
.legal dt{font-weight:700;color:var(--encre);font-size:15.5px;margin-top:14px}
.legal dd{margin:3px 0 0;font-size:15.5px;color:var(--texte);line-height:1.62}
.legal a{color:var(--rose-texte);font-weight:600}

.trou{display:inline-block;padding:1px 9px;border-radius:6px;background:#FDF1DC;
  border:1px dashed #C9A961;color:#6B4A16;font-weight:700;font-size:.94em;
  font-family:var(--corps)}

.note-interne{margin:0 0 34px;padding:20px 22px;border-radius:14px;
  background:var(--past-rose);border:1px solid #EFC9BF}
.note-interne b{display:block;font-family:var(--titres);font-size:19px;color:var(--encre);
  margin-bottom:8px}
.note-interne p{font-size:15px;margin:0 0 9px;color:var(--texte)}
.note-interne p:last-child{margin-bottom:0}

.encadre-loi{margin:0 0 18px;padding:20px 22px;border-radius:14px;background:var(--creme-fonce);
  border-left:3px solid var(--encre)}
.encadre-loi p:last-child{margin-bottom:0}
.encadre-loi strong{color:var(--encre)}

.legal-sommaire{margin:0 0 34px;padding:20px 24px;border-radius:14px;background:var(--blanc);
  border:1px solid var(--filet)}
.legal-sommaire p{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:var(--discret);margin:0 0 12px}
.legal-sommaire ol{margin:0;padding-left:20px}
.legal-sommaire li{font-size:15px;margin-bottom:5px}

/* Le titre de la boutique : une ligne, pas un pavé. Il existe surtout
   pour que la page soit identifiable par un moteur de recherche et par
   un lecteur d'écran. */
.titre-boutique{font-family:var(--titres);font-size:clamp(26px,3.4vw,38px);
  color:var(--encre);line-height:1.1;letter-spacing:-.012em;margin:0 0 22px}

/* ============================================================
   LES AVIS
   ------------------------------------------------------------
   Dix vrais avis, de longueurs très inégales : une ligne pour
   l'un, quinze pour l'autre. Dans un carrousel à cartes de même
   hauteur, ça ne tient pas. Les longs sont donc repliés à six
   lignes, avec un bouton qui les déplie — rien n'est coupé, tout
   reste lisible. Tronquer un avis sans le dire serait malhonnête.
   ============================================================ */
.avis-carte{display:flex;flex-direction:column}
.avis-texte{position:relative}
.avis-texte p{font-size:16.5px;font-style:italic;color:var(--texte);margin:0 0 12px}
.avis-texte p:last-child{margin-bottom:0}
.avis-carte.longue .avis-texte{
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.avis-carte.longue.depliee .avis-texte{-webkit-line-clamp:unset;overflow:visible}
.avis-plus{align-self:flex-start;margin-top:12px;padding:8px 0;background:none;border:0;
  cursor:pointer;font:700 14.5px var(--corps);color:var(--rose-texte);
  text-decoration:underline;text-underline-offset:3px}
.avis-plus:hover{color:var(--encre)}
.avis-plus:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:4px}
.avis-carte .qui{margin-top:auto;padding-top:18px}

.avis-origine{margin:18px 0 0;text-align:center;font-size:13.5px;color:var(--discret)}
.avis-origine a{color:var(--discret);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding:8px 4px}
.avis-origine a:hover{color:var(--rose-texte)}

/* Présent pour un moteur de recherche et pour un lecteur d'écran,
   invisible à l'œil. À utiliser quand une page n'a pas besoin d'un
   titre affiché mais en a besoin pour être comprise. */
.hors-ecran{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   LE PANIER
   ------------------------------------------------------------
   Un tiroir plutôt qu'une page : on ajoute une pièce, on voit ce
   qu'on a, on repart chercher la suivante sans avoir rien perdu.
   Sur téléphone il prend tout l'écran — à 390 px, un tiroir de
   côté ne laisserait la place ni au panier ni à la page.
   ============================================================ */
.panier{position:fixed;inset:0;z-index:120}
.panier[hidden]{display:none}
.panier-fond{position:absolute;inset:0;background:rgba(21,17,16,.46);
  animation:panier-fondu .25s ease}
.panier-boite{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);
  background:var(--creme);display:flex;flex-direction:column;
  box-shadow:-18px 0 50px rgba(21,17,16,.22);animation:panier-glisse .3s var(--sortie)}
@keyframes panier-fondu{from{opacity:0}to{opacity:1}}
@keyframes panier-glisse{from{transform:translateX(24px)}to{transform:none}}

.panier-tete{flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:20px 22px;border-bottom:1px solid var(--filet);background:var(--blanc)}
.panier-tete h2{font-family:var(--titres);font-size:24px;color:var(--encre);margin:0}
.panier-x{width:44px;height:44px;flex:none;border:0;background:none;cursor:pointer;
  border-radius:11px;display:grid;place-items:center}
.panier-x:hover{background:var(--creme-fonce)}
.panier-x svg{width:20px;height:20px;stroke:var(--encre);stroke-width:2;fill:none;
  stroke-linecap:round}
.panier-x:focus-visible{outline:2px solid var(--rose);outline-offset:2px}

.panier-corps{flex:1;min-height:0;overflow-y:auto;padding:8px 22px}
.panier-ligne{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--filet)}
.panier-ligne:last-child{border-bottom:0}
.panier-ligne img,.panier-sans-photo{width:64px;height:88px;flex:none;border-radius:10px;
  object-fit:cover;background:var(--creme-fonce)}
.panier-sans-photo{display:grid;place-items:center;color:var(--discret);font-weight:700;
  border:1px dashed var(--filet)}
.panier-info{flex:1;min-width:0}
.panier-nom{display:block;padding:3px 0;font-size:15.5px;font-weight:700;color:var(--encre);
  text-decoration:none;line-height:1.35}
.panier-nom:hover{color:var(--rose-texte)}
.panier-taille{display:block;margin-top:4px;font-size:14px;color:var(--texte)}
.panier-unique{display:block;margin-top:5px;font-size:12.5px;font-weight:600;
  color:var(--rose-texte)}
.panier-droite{flex:none;display:flex;flex-direction:column;align-items:flex-end;
  justify-content:space-between}
.panier-prix{font-family:var(--titres);font-size:19px;color:var(--encre)}
.panier-retirer{border:0;background:none;cursor:pointer;padding:8px 0;
  font:600 13.5px var(--corps);color:var(--discret);text-decoration:underline;
  text-underline-offset:3px}
.panier-retirer:hover{color:#8A3A28}

.panier-vide{padding:44px 6px;text-align:center}
.panier-vide p{font-size:15.5px;color:var(--texte);margin-bottom:12px;line-height:1.6}
.panier-vide b{color:var(--encre)}
.panier-vide .btn{margin-top:10px}

.panier-pied{flex:none;padding:18px 22px 22px;border-top:1px solid var(--filet);
  background:var(--blanc)}
.panier-modes{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.panier-mode{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;
  border:1.5px solid var(--filet);background:var(--creme);cursor:pointer}
.panier-mode:has(input:checked){border-color:var(--rose);background:var(--past-rose)}
.panier-mode input{accent-color:var(--rose);width:18px;height:18px;flex:none}
.panier-mode span{flex:1;min-width:0}
.panier-mode b{display:block;font-size:14.5px;color:var(--encre)}
.panier-mode small{display:block;font-size:12.5px;color:var(--texte);margin-top:2px}
.panier-mode em{font-style:normal;font-weight:700;font-size:14.5px;color:var(--encre)}

.panier-seuil{margin:0 0 14px;padding:10px 13px;border-radius:10px;
  background:var(--past-creme);font-size:13.5px;color:#6B4A16}
.panier-seuil.offert{background:#D8EBDC;color:#245C2E;font-weight:600}
.panier-seuil b{color:inherit}

.panier-compte{margin-bottom:16px}
.panier-l{display:flex;justify-content:space-between;gap:12px;padding:5px 0;
  font-size:14.5px;color:var(--texte)}
.panier-l b{color:var(--encre)}
.panier-l.total{margin-top:6px;padding-top:12px;border-top:1px solid var(--filet);
  font-size:16px}
.panier-l.total b{font-family:var(--titres);font-size:24px}
.panier-commander{width:100%;justify-content:center}
.panier-vider{display:block;width:100%;margin-top:10px;padding:12px;border:0;background:none;
  cursor:pointer;font:600 14px var(--corps);color:var(--discret);text-decoration:underline;
  text-underline-offset:3px}
.panier-vider:hover{color:#8A3A28}
.panier-note{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--discret)}

/* la pastille ne s'allume que s'il y a quelque chose dedans */
.entete2 .pastille{opacity:.45}
.entete2 .pastille.pleine{opacity:1}

.fa-aide-taille{margin:0 0 10px;padding:10px 13px;border-radius:10px;
  background:#FDF1DC;color:#6B4A16;font-size:14px;font-weight:600}

@media(max-width:560px){
  .panier-boite{width:100%}
  .panier-corps{padding:8px 16px}
  .panier-pied,.panier-tete{padding-left:16px;padding-right:16px}
}
@media(prefers-reduced-motion:reduce){
  .panier-fond,.panier-boite{animation:none}
}

/* Le message qui explique ce qui n'est pas encore construit. Discret,
   il disparaît seul — c'est une information, pas une erreur. */
.mendo-info{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);
  max-width:min(520px,calc(100% - 32px));margin:0;padding:15px 20px;border-radius:14px;
  background:var(--encre);color:#fff;font:400 14.5px/1.55 var(--corps);
  box-shadow:0 14px 40px rgba(21,17,16,.3);opacity:0;pointer-events:none;
  transition:opacity .28s,transform .28s;z-index:200;text-align:center}
.mendo-info.vu{opacity:1;transform:translateX(-50%) translateY(0)}
@media(prefers-reduced-motion:reduce){.mendo-info{transition:none}}

/* ============================================================
   AJOUTS DU VRAI SITE — ce qui n'existait pas dans la maquette
   ============================================================ */

/* Le lien « Aller au contenu » : invisible, sauf au clavier. Sans
   lui, une personne qui navigue au clavier traverse tout le menu à
   chaque page avant d'atteindre le texte. */
.hors-ecran:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;margin:0;clip:auto;
  overflow:visible;z-index:100;padding:10px 16px;border-radius:10px;background:var(--encre);color:#fff;
  font-weight:700;text-decoration:none;outline:3px solid var(--rose);outline-offset:2px}

/* Un contenu saisi dans WordPress (page sans modèle dédié) */
.contenu-libre{max-width:72ch}
.contenu-libre p{margin:0 0 1em}

/* Ceinture et bretelles : la police est posée sur les grands blocs du
   site, pas seulement sur <body>. Une extension qui réécrirait la
   police de <body> (un « kit » Elementor, un bandeau cookies…) ne
   ferait plus basculer tout le site dans sa police à elle. */
.annonces,.entete2,#contenu,.pied{font-family:var(--corps)}

/* Le menu garde la même allure au survol, quoi que disent les
   extensions : si la graisse ou la casse change au passage de la
   souris, le mot change de largeur et tout le menu se décale. */
.entete2 .nav2 .lien,.entete2 .nav2 .lien:hover,.entete2 .nav2 .lien:focus-visible{
  font-family:var(--corps);font-size:14.5px;font-weight:400;letter-spacing:.05em;text-transform:uppercase}

/* « 3 à 6 personnes » en rose : la maquette le colorait par un style
   écrit dans la phrase. Un texte modifiable ne garde pas les styles
   (seulement le gras, l'italique et les liens) : la couleur passe ici. */
.atelier-accroche strong{color:var(--rose-texte)}

/* Un lien placé DANS une phrase modifiable : la maquette le colorait par
   un style écrit dans la phrase, qu'un texte modifiable ne garde pas. */
.lien-rose a{color:var(--rose-texte);font-weight:700}

/* Les pages légales, écrites dans l'éditeur de WordPress.
   - Le surlignage de l'éditeur (<mark>) prend l'allure des passages
     « à compléter » de la maquette : c'est lui qui les marque.
   - L'éditeur n'a pas de liste « intitulé / valeur » : chaque ligne
     est un paragraphe « intitule », l'intitulé en gras puis un retour. */
.legal mark,.legal mark.has-inline-color{display:inline-block;padding:1px 9px;border-radius:6px;
  background:#FDF1DC!important;border:1px dashed #C9A961;color:#6B4A16;font-weight:700;
  font-size:.94em;font-family:var(--corps)}
.legal p.intitule{font-size:15.5px;line-height:1.62;margin:14px 0 0}
.legal p.intitule strong:first-child{display:inline-block;margin-bottom:3px;color:var(--encre)}
.legal p.intitule+:not(.intitule){margin-top:16px}
.legal p.intitule+h2{margin-top:40px}
.legal p.intitule+h3{margin-top:22px}
.legal ol{margin:0 0 16px;padding-left:22px}
.legal .legal-sommaire a{color:inherit;font-weight:inherit;text-decoration:none}
.legal .legal-sommaire a:hover,.legal .legal-sommaire a:focus-visible{color:var(--rose-texte);text-decoration:underline}
.legal h2[id]{scroll-margin-top:110px}
.legal .encadre-loi.wp-block-group{display:block}

/* À propos : la photo de Marion, dans un rond, à la place de la roue.
   Sur grand écran, deux colonnes : le texte, puis la photo — le titre
   ne passe jamais sur son visage. Sur téléphone, la photo se place
   au-dessus du titre, en entier. */
.portrait-marion{display:block;width:min(52vh,400px);height:min(52vh,400px);border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 10px var(--past-creme),0 18px 50px rgba(26,22,20,.14)}
.hero.page:has(.portrait-marion){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:4vw;
  padding-left:max(0px,calc((100vw - var(--conteneur)) / 2));padding-right:max(26px,calc((100vw - var(--conteneur)) / 2 + 26px))}
.hero.page:has(.portrait-marion) .conteneur{grid-column:1;grid-row:1;margin:0;max-width:none;width:100%}
.hero.page:has(.portrait-marion) .portrait-marion{grid-column:2;grid-row:1}
@media (max-width:1100px){ .portrait-marion{width:280px;height:280px} }
@media (max-width:860px){
  .hero.page:has(.portrait-marion){display:flex;flex-direction:column;align-items:stretch;padding-left:0;padding-right:0}
  .portrait-marion{width:200px;height:200px;margin:0 0 28px 26px}
}

/* La réservation branchée : ce que la maquette n'avait pas à dire. */
.resa-erreur{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:#F6E1DA;color:#8A3A28;font-weight:600;font-size:15px}
.resa-dit{display:block;margin-top:5px;font-size:13.5px;font-weight:600;color:#8A3A28}
.resa-dit:empty{display:none}
.resa-champ [aria-invalid="true"]{border-color:#C0563F!important;box-shadow:0 0 0 2px #F6E1DA}

/* La demande d'atelier : un bouton qui déplie un court formulaire. */
.demande-atelier{margin-top:24px;text-align:left}
.demande-atelier > summary{list-style:none;display:inline-flex;cursor:pointer}
.demande-atelier > summary::-webkit-details-marker{display:none}
.demande-atelier[open] > summary{margin-bottom:22px}
.demande-atelier .demande-form,.demande-atelier .demande-fait{max-width:560px;margin:0 auto;padding:26px;border-radius:18px;
  background:var(--blanc);border:1px solid var(--filet);text-align:left}
.demande-atelier .demande-fait{text-align:center}
.demande-chapeau{font-size:15.5px;margin:0 0 18px}
.demande-deux{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.demande-deux label{display:flex;flex-direction:column;gap:6px}
.demande-rgpd{font-size:13px;color:var(--discret);margin:14px 0 16px}
@media (max-width:560px){.demande-deux{grid-template-columns:1fr}}
.rev:has(> div > .demande-atelier){text-align:center}
.demande-deux select{min-height:46px;padding:0 12px;border-radius:12px;border:1px solid var(--filet);background:var(--blanc);font:inherit;font-size:15px;color:var(--texte)}

/* La boutique branchée : les filtres sont des liens, l'élargissement propose des chiffres. */
a.filtre.mini{text-decoration:none;display:inline-flex;align-items:center;line-height:normal}
.compte-produits .raz{margin-left:12px}
.vide-total .elargir{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}

/* La fiche branchée : les tailles sont de vrais boutons radio (le formulaire
   part sans JavaScript), habillés comme les boutons de la maquette. */
.fa-tailles{border:0;padding:0;margin:0}
.fa-tailles legend{padding:0}
.tailles .taille{position:relative;display:inline-flex}
.tailles .taille input{position:absolute;opacity:0;width:1px;height:1px}
.tailles .taille span{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:56px;min-height:46px;
  padding:8px 14px;border-radius:12px;border:1.5px solid var(--filet);background:var(--blanc);color:var(--encre);font-weight:400;
  font-size:15px;cursor:pointer;transition:border-color .2s,background .2s}
.tailles .taille span small{font-size:11px;font-weight:600;color:var(--discret);line-height:1.1}
.tailles .taille:hover span{border-color:var(--rose)}
.tailles .taille input:checked + span{background:var(--encre);color:#fff;border-color:var(--encre)}
.tailles .taille input:checked + span small{color:rgba(255,255,255,.75)}
.tailles .taille input:focus-visible + span{outline:3px solid var(--rose);outline-offset:2px}
.tailles .taille.epuisee span{background:var(--creme);color:var(--discret);text-decoration:line-through;cursor:not-allowed}
.tailles .taille.epuisee span small{text-decoration:none}
.galerie .vue-produit .vue{position:absolute;inset:0;opacity:0;transition:opacity .25s}
.galerie .vue-produit .vue.active{position:relative;opacity:1}
.fa-detail > div p{margin:0 0 10px;white-space:normal}
.fa-accroche p{margin:0 0 8px}
a.fa-jeton{text-decoration:none}

.fa-detail > div h4,.fa-detail > div h3{font-family:var(--corps);font-size:15.5px;font-weight:700;color:var(--encre);margin:0 0 6px}
.fa-detail > div ul{margin:0 0 10px;padding-left:18px;white-space:normal}
.fa-detail > div li{margin-bottom:4px}
.fa-accroche{white-space:normal}

/* La mise de côté : sous le bouton d'achat, un second bouton qui déplie un court formulaire. */
.mise-de-cote{margin:-6px 0 22px}
.mise-de-cote > summary{list-style:none;display:flex;justify-content:center;width:100%;cursor:pointer}
.mise-de-cote > summary::-webkit-details-marker{display:none}
.mise-de-cote[open] > summary{margin-bottom:16px}
.mise-de-cote .mise-form,.mise-de-cote .demande-fait{padding:22px;border-radius:18px;background:var(--blanc);border:1px solid var(--filet)}
.mise-de-cote .demande-fait{text-align:center}

/* ============================================================
   La commande : panier, paiement, compte (blocs WooCommerce)
   Le contenu est celui de WooCommerce ; on lui donne les polices,
   les champs et le bouton rose de la maquette.
   ============================================================ */
.commande{padding:44px 0 90px}
.commande-titre{font-family:var(--titres);font-size:clamp(30px,4vw,46px);color:var(--encre);margin:0 0 30px;line-height:1.1}
.commande-contenu{font-family:var(--corps);color:var(--texte)}
.commande-contenu .alignwide{max-width:none}
.commande .wc-block-components-title,.commande .wc-block-cart__totals-title,
.commande .wc-block-components-checkout-step__title,.commande h2{font-family:var(--titres);color:var(--encre);text-transform:none;letter-spacing:0}
.commande .wc-block-components-product-name{font-family:var(--titres);font-size:18px;color:var(--encre);text-decoration:none}
.commande .wc-block-components-product-name:hover{color:var(--rose-texte)}
.commande .wc-block-components-text-input input,.commande .wc-block-components-combobox .components-combobox-control__input,
.commande .wc-blocks-components-select__select,.commande .wc-block-components-textarea,
.commande .woocommerce form .input-text,.commande .woocommerce form select{
  font-family:var(--corps)!important;font-size:16px!important;color:var(--encre)!important;
  background:var(--blanc)!important;border:1.5px solid var(--filet)!important;border-radius:12px!important}
.commande .wc-block-components-text-input input:focus,.commande .wc-blocks-components-select__select:focus,
.commande .woocommerce form .input-text:focus{border-color:var(--rose)!important;box-shadow:none!important;outline:none}
.commande .wc-block-components-text-input label{font-family:var(--corps);color:var(--discret)}
.commande .wc-block-components-button:not(.is-link),.commande .woocommerce .button{
  font-family:var(--corps)!important;font-weight:700!important;font-size:16px!important;
  background:#E90061!important;color:#fff!important;border:0!important;border-radius:999px!important;
  min-height:52px;padding:14px 28px!important;box-shadow:0 6px 20px rgba(251,1,105,.22);transition:background .2s,transform .2s}
.commande .wc-block-components-button:not(.is-link):hover,.commande .woocommerce .button:hover{background:#C4004F!important;transform:translateY(-2px)}
.commande .wc-block-components-radio-control__option,.commande .wc-block-components-radio-control-accordion-option,
.commande .wc-block-checkout__shipping-method-option{border-radius:14px!important}
.commande .wc-block-components-radio-control__input:checked,.commande .wc-block-components-checkbox__input:checked{
  border-color:var(--rose)!important;background-color:var(--rose)!important}
.commande .wc-block-components-radio-control__input:checked::before{background:#fff!important}
.commande .wc-block-components-totals-item__label,.commande .wc-block-components-totals-item__value{font-family:var(--corps)}
.commande .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-family:var(--titres);font-size:24px;color:var(--encre)}
.commande .wc-block-components-sidebar{background:var(--blanc);border:1px solid var(--filet);border-radius:20px;padding:22px!important}
.commande a{color:var(--rose-texte)}
.commande .wc-block-components-notice-banner{border-radius:14px;font-family:var(--corps)}
/* la quantité : une pièce par taille, le sélecteur n'a rien à dire */
.commande .wc-block-components-quantity-selector{display:none}
.commande-retours{margin-top:48px;max-width:720px;padding:22px 24px;border-radius:18px;background:var(--past-creme)}
.commande-retours h2{font-size:22px;margin:0 0 8px}
.commande-retours p{font-size:15.5px;line-height:1.6;margin:0 0 8px;color:var(--texte)}
.commande-retours p:last-child{margin:0}
/* le compte, en formulaire classique */
.commande-compte .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:8px}
.commande-compte .woocommerce-MyAccount-navigation a{display:inline-flex;min-height:44px;align-items:center;padding:0 16px;border-radius:999px;border:1.5px solid var(--filet);color:var(--encre);text-decoration:none}
.commande-compte .woocommerce-MyAccount-navigation .is-active a{background:var(--encre);color:var(--creme);border-color:var(--encre)}

/* ============================================================
   Mon compte : les deux cartes (maquette compte.html), puis l'espace
   ============================================================ */
.commande-compte .conteneur{max-width:960px}
.compte-tete{text-align:center;max-width:560px;margin:0 auto 40px}
.compte-tete h1{font-family:var(--titres);font-size:clamp(30px,4vw,44px);color:var(--encre);line-height:1.12;margin-bottom:14px}
.compte-grille{grid-template-columns:1fr 1fr;gap:20px;max-width:820px;margin:0 auto}
.compte-grille.seule{grid-template-columns:1fr;max-width:420px}
.compte-grille h3{margin-bottom:16px}
.compte-grille .vedette h3{margin-bottom:10px}
.compte-grille .vedette ul{margin-bottom:18px}
.compte-bouton{margin-top:20px;width:100%;justify-content:center}
.compte-oubli{font-size:14px;margin-top:14px}
.compte-bas a,.espace-rgpd a{color:var(--rose-texte);font-weight:700}
.compte-oubli a{color:var(--texte)}
.commande-compte .woocommerce form.login,.commande-compte .woocommerce form.register{border:0;padding:0;margin:0;border-radius:0}
.commande-compte .compte-bouton{margin-top:20px}
.compte-note{font-size:14px;color:var(--discret);margin:4px 0 0}
.compte-bas{text-align:center;margin-top:34px;font-size:15px;color:var(--discret)}
@media (max-width:760px){.compte-grille{grid-template-columns:1fr}}
.commande-compte .woocommerce-notices-wrapper,.commande-compte .woocommerce-error,.commande-compte .woocommerce-message,.commande-compte .woocommerce-info{max-width:820px;margin:0 auto 20px}
.commande-compte .woocommerce-error,.commande-compte .woocommerce-message,.commande-compte .woocommerce-info{list-style:none;padding:14px 18px;border-radius:14px;background:var(--blanc);border:1px solid var(--filet);font-size:15px}
.commande-compte .woocommerce-error{border-color:#E6A08C;background:#FDF1EC}
.commande-compte .woocommerce-message{border-color:#A9CFA0;background:#F1F8EE}

/* l'espace, connectée */
.commande-compte .woocommerce{display:grid;grid-template-columns:1fr;gap:6px}
.commande-compte .woocommerce-MyAccount-navigation ul{justify-content:center}
.espace-dit{max-width:820px;margin:0 auto 18px;padding:13px 18px;border-radius:14px;background:#F1F8EE;border:1px solid #A9CFA0;font-size:15px;text-align:center}
.espace{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.espace-carte{background:var(--blanc);border:1px solid var(--filet);border-radius:22px;padding:26px 26px 24px}
.espace-carte h2{font-family:var(--titres);font-size:24px;color:var(--encre);margin:0 0 14px}
.espace-carte > p{font-size:15.5px;line-height:1.6;color:var(--texte);margin:0 0 10px}
.espace-saison{grid-column:1 / -1}
.espace-palette .espace-nom{font-family:var(--titres);font-size:30px;color:var(--encre);margin:0 0 2px}
.espace-palette .espace-nom span{font-family:var(--corps);font-size:15px;color:var(--discret)}
.espace-palette .quoi{font-size:14px;color:var(--discret);margin:0 0 16px}
.espace-palette .nuancier{display:flex;border-radius:12px;overflow:hidden;height:64px;max-width:560px}
.espace-palette .nuancier i{flex:1}
.espace-palette .note{font-size:15px;margin:14px 0 0;color:var(--texte)}
.espace-actions{margin:18px 0 0}
.espace-liste{list-style:none;margin:0;padding:0}
.espace-liste li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:11px 0;border-bottom:1px solid var(--filet);font-size:15px}
.espace-liste li:last-child{border-bottom:0}
.espace-liste .d{font-weight:700;color:var(--encre)}
.espace-liste .t{color:var(--texte);flex:1}
.espace-petit{font-size:14px;color:var(--rose-texte);font-weight:700}
.espace-petit-texte{font-size:14px;color:var(--discret);margin-top:10px}
.espace-rgpd{text-align:center;margin-top:30px;font-size:14px;color:var(--discret)}
@media (max-width:760px){.espace{grid-template-columns:1fr}}

/* la boutique et la fiche, pour une cliente dont la saison est posée */
.ma-saison{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 22px;padding:14px 18px;border-radius:16px;background:var(--blanc);border:1px solid var(--filet);font-size:15px}
.ma-saison .pt{width:14px;height:14px;border-radius:50%;flex:none}
.ma-saison a{color:var(--rose-texte);font-weight:700}
.fa-jeton.la-votre{border-color:var(--rose);background:#FDEAF2;color:var(--rose-texte)}
/* WooCommerce met le menu du compte en colonne à gauche : ici, une ligne de puces au-dessus */
.commande-compte .woocommerce-MyAccount-navigation,.commande-compte .woocommerce-MyAccount-content{float:none;width:100%;max-width:none}
.commande-compte .woocommerce-MyAccount-navigation{margin-bottom:10px}
.commande-compte .woocommerce-MyAccount-navigation ul{flex-direction:row}
.commande a.btn-rose{color:#fff}
.commande a.btn-contour,.commande a.btn-encre{color:var(--encre)}
.commande a.btn-encre{color:var(--creme)}
.commande a.btn-contour:hover{color:var(--creme)}
button.btn-contour{background:transparent}
button.btn-contour:hover{background:var(--encre)}
.commande-compte .woocommerce-MyAccount-content > form,.commande-compte form.lost_reset_password{max-width:760px;margin:10px auto 0}
.commande-compte fieldset{border:1px solid var(--filet);border-radius:18px;padding:16px 20px 8px;margin:18px 0}
.commande-compte legend{font-family:var(--titres);font-size:20px;color:var(--encre);padding:0 8px}
.commande-compte .woocommerce-MyAccount-content label{font-weight:600;color:var(--encre);font-size:14.5px}

/* La carte cadeau : les montants sont de vrais boutons radio (le formulaire part sans JavaScript). */
.cadeau-jeton{position:relative;display:inline-flex;align-items:center}
.cadeau-radio{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cadeau-jeton:has(.cadeau-radio:checked){background:#E90061;border-color:#E90061;color:#fff}
.cadeau-jeton:has(.cadeau-radio:focus-visible){outline:2px solid var(--rose-texte);outline-offset:2px}
.cadeau-erreur{margin:8px 0 0;padding:9px 12px;border-radius:10px;background:#FDF1EC;border:1px solid #E6A08C;color:#8A3A28;font-size:14px;font-weight:600}
.cadeau-form > .cadeau-erreur{margin:0 0 18px}
.cadeau-note{margin-top:14px;font-size:13.5px;color:var(--discret)}
.espace-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;color:var(--encre);letter-spacing:.02em}
.commande-carte{margin:0 0 26px;max-width:720px;padding:13px 18px;border-radius:14px;background:var(--past-rose);font-size:15px;color:var(--encre)}
/* la fidélité, dans l'espace */
.espace-fidelite{grid-column:1 / -1}
.espace-fidelite .espace-nom{font-family:var(--titres);font-size:28px;color:var(--encre);margin:0 0 12px}
.espace-fidelite .espace-nom span{font-family:var(--corps);font-size:15px;color:var(--discret)}
.fid-barre{height:12px;border-radius:999px;background:var(--creme-fonce);overflow:hidden;max-width:560px}
.fid-barre i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--rose),#F57E20)}
.fid-avantages{margin:14px 0 0;padding-left:20px;font-size:15px;line-height:1.6;color:var(--texte)}
.fid-programme{margin-top:16px}
.fid-programme summary{cursor:pointer;font-weight:700;color:var(--rose-texte);min-height:44px;display:flex;align-items:center}
.fid-programme > p{font-size:14.5px;margin:6px 0 12px}
.fid-niv{padding:12px 14px;border-radius:14px;border:1px solid var(--filet);margin-bottom:8px;font-size:14.5px}
.fid-niv.le-sien{border-color:var(--rose);background:var(--past-rose)}
.fid-niv small{color:var(--discret)}
.fid-niv ul{margin:6px 0 0;padding-left:18px;line-height:1.55}

/* ============================================================
   SUR TÉLÉPHONE : LES AVIS ET LA FLEUR (retours du 06/10)
   ------------------------------------------------------------
   Les avis : avec dix avis, les dix puces de 44 px ne tenaient
   pas entre les deux flèches. Elles passaient sur deux lignes, la
   flèche gauche se retrouvait au-dessus, la droite en dessous :
   le décalage que Marion voyait. Sur téléphone, tout tient sur
   UNE ligne : flèches un peu plus petites, puces serrées (elles
   rétrécissent s'il y a plus d'avis), et des cartes plus
   compactes — la suivante dépasse, on comprend qu'on peut glisser.

   La fleur : 625 px de large sur un écran de 390, derrière le
   titre et le texte. Elle reste — c'est elle — mais en petit, en
   haut à droite, plus pâle, et elle ne tourne plus au toucher.
   ============================================================ */
@media(max-width:640px){
  .piste-avis{grid-auto-columns:86%;gap:14px;padding-bottom:14px}
  .avis-carte{padding:22px 20px;border-radius:16px}
  .avis-carte .etoiles{margin-bottom:10px}
  .avis-texte p{font-size:15px;line-height:1.6}
  .avis-carte.longue .avis-texte{-webkit-line-clamp:5}
  .avis-plus{margin-top:8px;font-size:14px}
  .avis-carte .qui{padding-top:12px;font-size:14px}
  .carrousel{margin-top:24px}
  .carrousel-nav{flex-wrap:nowrap;gap:4px;margin-top:2px}
  .fleche{width:40px;height:40px;flex:none}
  .fleche svg{width:18px;height:18px}
  .puces{flex:1 1 auto;flex-wrap:nowrap;justify-content:center;gap:0;min-width:0;overflow:hidden}
  .puces button{flex:0 1 22px;min-width:12px;width:22px;height:40px}
  .puces button::before{width:8px;height:8px}
}
@media(max-width:767px){
  .hero .fleur-decor,.hero.page .fleur-decor{
    width:min(62vw,260px);height:min(62vw,260px);
    top:84px;right:-16vw;transform:none;opacity:.28}
  .hero:hover .fleur-decor .fleur-tourne{transform:none}
}

/* L'acompte d'un rendez-vous, sur la page de paiement de WooCommerce */
.acompte-bloc{background:var(--blanc);border:1px solid var(--filet);border-left:4px solid var(--rose);
  border-radius:16px;padding:20px 22px;margin:0 0 26px;font-size:15.5px}
.acompte-bloc p{margin:0 0 6px}
.acompte-bloc p:last-child{margin-bottom:0}
.acompte-bloc .etiquette{margin-bottom:8px}
.acompte-bloc.expire{border-left-color:var(--jaune)}
.acompte-bloc .btn{margin-top:10px}

/* ============================================================
   LES PRESTATIONS, UNE PAR UNE (demande de Marion, 12/10)
   ============================================================ */
.mega-prestas .col a{font-size:15px}
.mega .pousse .tout-voir{display:block;font-size:14px;font-weight:700;color:var(--rose-texte);margin:2px 0 14px}
.mega .pousse .tout-voir:hover{text-decoration:underline}

.sommaire-prestas{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;max-width:720px}
.sommaire-prestas a{padding:8px 15px;border-radius:999px;background:var(--blanc);border:1px solid var(--filet);
  font-size:14.5px;font-weight:600;color:var(--encre);transition:background .2s,color .2s,border-color .2s}
.sommaire-prestas a:hover{background:var(--encre);color:var(--creme);border-color:var(--encre)}

.section.presta{padding:84px 0;scroll-margin-top:90px}
.section.presta + .section.presta{padding-top:84px}
.presta .visuel{aspect-ratio:4/3}
.presta .visuel img{aspect-ratio:4/3}
.presta .vignette-dessin{display:block;width:100%;height:100%}
.presta .dit .etiquette{margin-bottom:10px}
.presta-tarif{margin-top:6px;padding:14px 18px;border-radius:14px;background:var(--past-creme);
  font-size:16px;color:var(--encre)}
.section.claire .presta-tarif{background:var(--creme)}
.presta-tarif span{color:var(--discret);white-space:nowrap}
.presta .groupe-btn{margin-top:22px;align-items:center}
.lien-fleche{font-weight:700;color:var(--rose-texte);font-size:15px}
.lien-fleche:hover{text-decoration:underline}

.section.intercalaire{padding:90px 0 0;text-align:center;background:var(--creme)}
.section.intercalaire .titre-section{margin:0 auto}
#showroom{scroll-margin-top:90px}
.deux-lieux{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.deux-lieux p{background:var(--blanc);border-radius:16px;padding:18px 20px;font-size:15.5px;color:var(--texte);margin:0}
.deux-lieux strong{display:block;font-family:var(--titres);font-size:19px;color:var(--encre);margin-bottom:6px;font-weight:600}

.trois-ailleurs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.carte-ailleurs{display:flex;flex-direction:column;gap:8px;padding:26px 24px;border-radius:20px;background:var(--blanc);
  border:1px solid var(--filet);transition:transform .3s var(--sortie),box-shadow .3s var(--sortie)}
.carte-ailleurs:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(26,22,20,.08)}
.carte-ailleurs strong{font-family:var(--titres);font-size:22px;color:var(--encre);font-weight:600}
.carte-ailleurs span{font-size:15.5px;color:var(--texte)}
.carte-ailleurs em{font-style:normal;font-weight:700;color:var(--rose-texte);font-size:14.5px;margin-top:auto;padding-top:6px}

@media(max-width:767px){
  .section.presta{padding:58px 0}
  .deux-lieux,.trois-ailleurs{grid-template-columns:1fr}
  .section.intercalaire{padding-top:64px}
}

/* ============================================================
   RÉSERVER : LE BANDEAU DE LA CARTE CADEAU (demande de Marion, 12/10)
   Elle ne l'avait pas trouvé : il passe en haut de la page, en grand.
   ============================================================ */
.bandeau-cadeau{padding:34px 0 0}
.bandeau-cadeau .bc-boite{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,48px);align-items:center;
  background:var(--past-rose);border-radius:24px;padding:clamp(22px,3.4vw,36px) clamp(22px,4vw,48px);position:relative;overflow:hidden}
.bc-carte{width:clamp(150px,18vw,220px);aspect-ratio:1.6;border-radius:12px;background:#fff;display:flex;overflow:hidden;
  box-shadow:0 18px 40px rgba(26,22,20,.16);transform:rotate(-5deg);transition:transform .5s var(--sortie)}
.bandeau-cadeau:hover .bc-carte{transform:rotate(-2deg) translateY(-3px)}
.bc-carte .bc-motif{width:44%;height:100%;object-fit:cover;display:block;background:var(--past-lilas)}
.bc-carte .bc-droite{flex:1;display:flex;align-items:center;justify-content:center;padding:8px}
.bc-carte .bc-titre{width:100%;height:auto;display:block}
.bc-carte .bc-titre-texte{font-family:var(--titres);font-size:20px;color:#76B280;text-align:center;line-height:1.1}
.bandeau-cadeau .etiquette{margin-bottom:6px}
.bandeau-cadeau h2{font-size:clamp(26px,3.2vw,40px);letter-spacing:-.015em;color:var(--encre);max-width:20ch}
.bandeau-cadeau p.bc-texte{margin-top:8px;font-size:16.5px;color:var(--texte);max-width:52ch}
@media(max-width:860px){
  .bandeau-cadeau .bc-boite{grid-template-columns:1fr;text-align:left}
  .bc-carte{width:170px}
}

/* ============================================================
   LA PRÉPARATION : « Marion prépare le dressing » (12/10)
   ============================================================ */
.preparation{min-height:62vh;display:flex;align-items:center}
.preparation .conteneur{max-width:760px;text-align:center}
.preparation h1{font-size:clamp(38px,5.6vw,68px);max-width:16ch;margin:0 auto}
.preparation .accroche{margin:24px auto 0;max-width:46ch}
.preparation .groupe-btn{justify-content:center}
.preparation .prep-adresse{margin-top:26px;font-size:15px;color:var(--discret)}
.resa-preparation{text-align:center;background:var(--past-creme);border-radius:20px;padding:30px 24px}
.resa-preparation strong{display:block;font-family:var(--titres);font-size:24px;color:var(--encre);margin-bottom:8px;font-weight:600}

/* Le forfait complet : la roue des couleurs tourne dans le sens des
   aiguilles d'une montre, la fleur du logo à rebours (demande de Tom, 13/10). */
.vignette-dessin .tourne-horaire,.vignette-dessin .tourne-antihoraire{transform-box:view-box;transform-origin:0 0}
.vignette-dessin .tourne-horaire{animation:vignette-horaire 60s linear infinite}
.vignette-dessin .tourne-antihoraire{animation:vignette-antihoraire 24s linear infinite}
@keyframes vignette-horaire{to{transform:rotate(360deg)}}
@keyframes vignette-antihoraire{to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion: reduce){
  .vignette-dessin .tourne-horaire,.vignette-dessin .tourne-antihoraire{animation:none}
}