/* ============================================================
   antoinewegmuller.ch — maquette de refonte
   Famille : Warm Organic x Editorial Minimal (voir DESIGN.md)
   ============================================================ */

:root{
  --paper:#F7F2E8; --paper-warm:#EFE6D5; --paper-deep:#E5D9C3;
  --ink:#1B1A17; --muted:#6A6257; --rule:#D9CEBA;
  /* Couleurs échantillonnées dans le logo officiel :
     framboise #C4053F, or #CAB900, gris #595959. */
  --cinabre:#C4053F; --cinabre-dark:#96032F; --laiton:#CAB900; --armoise:#77806B;
  --or-ink:#1B1A17; /* l'or n'atteint 1,8:1 sur papier : jamais de texte blanc dessus */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk","Helvetica Neue",system-ui,sans-serif;
  --gut:24px; --container:1240px;
  --step--1:clamp(.80rem,.77rem + .15vw,.88rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --step-1:clamp(1.2rem,1.12rem + .4vw,1.45rem);
  --step-2:clamp(1.5rem,1.33rem + .85vw,2.1rem);
  --step-3:clamp(1.95rem,1.6rem + 1.75vw,3.1rem);
  --step-4:clamp(2.1rem,min(5vw,6.9vh),5.2rem);
  /* hauteur du chrome de page : en-tête collant + bandeau de maquette */
  --chrome:112px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);overflow-x:clip;
  font-family:var(--sans);font-size:var(--step-0);line-height:1.6;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--cinabre);outline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.015em;margin:0;
  font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 40}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
p{margin:0 0 1em}
.lede{font-size:var(--step-1);line-height:1.45;color:var(--muted);max-width:34ch}
.hero .lede{font-size:clamp(.98rem,min(1.25vw,2.1vh),1.4rem);max-width:40ch}
.prose{max-width:68ch}
.prose p{margin-bottom:1.1em}
.prose h3{margin:2.2em 0 .5em}
.prose ul{padding-left:1.1em;margin:0 0 1.2em}
.prose li{margin-bottom:.35em}

/* ---------- helpers ---------- */
.wrap{width:min(100% - 2.5rem,var(--container));margin-inline:auto}
.eyebrow{font-family:var(--sans);font-size:var(--step--1);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cinabre);margin:0 0 .9rem}
.eyebrow--muted{color:var(--muted)}
.rule{border:0;border-top:1px solid var(--rule);margin:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.75rem 1.2rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:48px;padding:.75rem 1.5rem;font-weight:600;font-size:var(--step--1);
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--ink);
  background:transparent;color:var(--ink);cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--primary{background:var(--cinabre);border-color:var(--cinabre);color:#fff}
.btn--primary:hover{background:var(--cinabre-dark);border-color:var(--cinabre-dark);color:#fff}
.btn--ghost{border-color:var(--rule)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn--sm{min-height:40px;padding:.5rem 1.15rem}
/* Le bouton du menu : l'interlettrage mange l'espace à droite, on compense. */
.nav__actions .btn{font-size:.78rem;letter-spacing:.05em;padding:.6rem 1.35rem .6rem 1.4rem;
  min-height:44px;white-space:nowrap}
@media(max-width:1080px){.nav__actions .btn{font-size:.72rem;padding:.6rem 1.1rem}}

/* ---------- header ---------- */
.masthead{position:sticky;top:0;z-index:50;background:rgba(247,242,232,.94);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--rule)}
.masthead__in{display:flex;align-items:center;gap:1.5rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex-shrink:0}
.brand__logo{height:46px;width:auto;flex-shrink:0}
@media(max-width:980px){.brand__logo{height:38px}}
@media(max-width:400px){.brand__logo{height:32px}}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-family:var(--serif);font-size:1.06rem;font-weight:600;letter-spacing:-.01em}
.brand__sub{font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.75rem}
.nav a:not(.btn){text-decoration:none;font-size:1.05rem;font-weight:500;padding:.4rem 0;position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--cinabre);transition:right .22s var(--ease)}
.nav a:not(.btn):hover::after,.nav a:not(.btn)[aria-current="page"]::after{right:0}
.nav__actions{display:flex;align-items:center;gap:.75rem;margin-left:.5rem}
.cartbtn{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.4rem .8rem;
  border:1.5px solid var(--rule);background:transparent;text-decoration:none;font-size:.85rem;font-weight:600}
.cartbtn:hover{border-color:var(--ink)}
.cartbtn__n{background:var(--cinabre);color:#fff;font-size:.72rem;min-width:19px;height:19px;
  display:inline-grid;place-items:center;padding:0 5px}
.burger{display:none;width:46px;height:46px;border:1.5px solid var(--rule);background:none;cursor:pointer;padding:0}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink);margin:4px auto;transition:.2s var(--ease)}
@media(max-width:980px){
  .burger{display:block}
  .nav{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);padding:1rem 1.25rem 1.5rem;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:.2s var(--ease);margin-left:0}
  .nav[data-open="true"]{transform:none;opacity:1;pointer-events:auto}
  .nav a:not(.btn){padding:.85rem 0;width:100%;border-bottom:1px solid var(--rule);font-size:1.05rem}
  .nav__actions{padding-top:1rem;margin-left:0}
  .masthead__in{justify-content:space-between}
  .masthead__in .cartbtn--top{margin-left:auto}
}

/* ---------- hero accueil ---------- */
/* Le hero vise une pleine hauteur d'écran : le titre, le chapeau, les repères
   et les deux boutons doivent être vus sans faire défiler. */
.hero{min-height:calc(100svh - var(--chrome));display:flex;flex-direction:column;
  justify-content:center;padding:clamp(1rem,2.4vh,2.4rem) 0;position:relative;overflow:hidden}
@media(max-width:860px){.hero{min-height:0;padding:clamp(1.5rem,4vh,2.5rem) 0 2.5rem}}
.hero__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
/* Surtitre en bandeau au-dessus des deux colonnes : le haut du texte et le haut
   de l'image partent de la même ligne, l'alignement se voit. */
.hero__sur{font-size:var(--step--1);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cinabre);margin:0 0 clamp(.8rem,2vh,1.4rem);
  padding-bottom:clamp(.6rem,1.4vh,1rem);border-bottom:1px solid var(--rule)}
/* Coupures de lignes déclarées dans le contenu, relâchées sur petit écran. */
.hero h1 .ligne{display:block}
@media(max-width:620px){.hero h1 .ligne{display:inline}}
.hero h1{margin-bottom:clamp(.7rem,2vh,1.4rem);line-height:.96;letter-spacing:-.025em}
.hero h1 em{font-style:normal;color:var(--cinabre)}
.hero__meta{display:flex;flex-wrap:wrap;gap:clamp(1rem,2.4vw,1.75rem);
  margin:clamp(1rem,2.6vh,2.2rem) 0 clamp(1rem,2.4vh,2rem);
  padding-top:clamp(.8rem,1.8vh,1.4rem);border-top:1px solid var(--rule)}
.hero__meta div{font-size:var(--step--1)}
.hero__meta dt{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;margin-bottom:.25rem}
.hero__meta dd{margin:0;font-weight:600}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem}
.hero__fig{position:relative}
.hero__fig img:not(.hero__seal){aspect-ratio:4/5;object-fit:cover;width:100%;
  max-height:calc(100svh - var(--chrome) - 5rem)}

/* ---------- fondu entre deux images du hero ----------
   Deux images au maximum, et le fondu s'interrompt de lui-même : la nouveauté
   est montrée, puis la page redevient calme. Un mouvement perpétuel à côté d'un
   titre gêne la lecture, et exigerait un bouton de pause (WCAG 2.2.2). */
/* Le fond ne se voit QUE derrière une image de produit, qui est cadrée en
   « contain » et laisse donc des marges. Le portrait, lui, est en « cover » et
   remplit la boîte : il le masque entièrement. */
.hero__fig--duo{position:relative;background:var(--paper-warm)}
/* Même traitement que les cartes et la galerie, et surtout la même RÉPARTITION :
   le fond est porté par le CONTENEUR, l'image n'en a aucun et se contente du
   fondu multiplicatif.
   La règle ci-dessous posait un fond sur l'image elle-même. Ce fond participe
   alors au fondu et se multiplie avec celui du conteneur : les marges viraient
   à un beige plus sombre que le reste, d'où deux couleurs au lieu d'une.
   Une seule surface colorée, une seule teinte. */
.hero__fig img.hero__img--produit{background:none;mix-blend-mode:multiply}
.hero__fig--duo .hero__img{transition:opacity 1.1s var(--ease)}
.hero__fig--duo .hero__img--2{position:absolute;inset:0;height:100%;opacity:0;
  object-fit:contain;background:var(--paper-warm);padding:6%}
.hero__fig--duo[data-vue="2"] .hero__img--1{opacity:0}
.hero__fig--duo[data-vue="2"] .hero__img--2{opacity:1}
@media (prefers-reduced-motion:reduce){
  .hero__fig--duo .hero__img--2{display:none}
  .hero__fig--duo .hero__img{transition:none}
}
.hero__seal{position:absolute;right:-20px;bottom:-20px;width:118px;height:auto;
  padding:14px;background:var(--paper);box-shadow:0 0 0 1px var(--rule)}
@media(max-width:860px){.hero__grid{grid-template-columns:1fr;gap:2.25rem}.hero__fig{order:-1}
  .hero__fig img:not(.hero__seal){aspect-ratio:3/2}.hero__seal{width:76px;padding:9px;right:0;bottom:0}}

/* ---------- sections ---------- */
/* Le rembourrage du hero et celui de la section s'additionnaient : 115 pixels
   de vide, là où le reste du site respire entre 48 et 88. La première section
   remonte donc, ce qui donne aussi envie de faire défiler : on devine qu'il y
   a quelque chose juste en dessous. */
.section{padding:clamp(3rem,6vw,5.5rem) 0}
.hero + .section{padding-top:clamp(1.5rem,3vw,2.5rem)}
.section--warm{background:var(--paper-warm)}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  margin-bottom:clamp(1.8rem,3vw,3rem);padding-bottom:1.1rem;border-bottom:1.5px solid var(--ink)}
.section__head p{margin:0;color:var(--muted);max-width:38ch;font-size:var(--step--1)}
@media(max-width:700px){.section__head{flex-direction:column;align-items:flex-start;gap:.9rem}}

/* ---------- prestations : liste éditoriale, pas des cartes ---------- */
.presta{border-top:1px solid var(--rule)}
.presta__item{display:grid;grid-template-columns:4.5rem 1fr minmax(0,26rem) auto;gap:1.5rem;align-items:baseline;
  padding:1.6rem 0;border-bottom:1px solid var(--rule);text-decoration:none;transition:background .18s var(--ease)}
.presta__item:hover{background:rgba(178,58,31,.04)}
.presta__n{font-family:var(--serif);font-size:1rem;color:var(--cinabre);font-variant-numeric:tabular-nums}
.presta__t{font-family:var(--serif);font-size:var(--step-2);line-height:1.05;margin:0}
.presta__cn{font-size:.8rem;color:var(--muted);letter-spacing:.05em;display:block;margin-top:.3rem;font-family:var(--sans)}
.presta__d{color:var(--muted);font-size:var(--step--1);margin:0}
.presta__arrow{color:var(--cinabre);font-size:1.1rem;transition:transform .2s var(--ease)}
.presta__item:hover .presta__arrow{transform:translateX(5px)}
@media(max-width:900px){
  .presta__item{grid-template-columns:3rem 1fr;gap:.75rem 1rem}
  .presta__d{grid-column:2}.presta__arrow{display:none}
}

/* ---------- planche produits (pas une grille de cartes uniformes) ---------- */
.planche{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.planche--3{grid-template-columns:repeat(3,1fr)}
.pcard{background:var(--paper);padding:1.1rem 1.1rem 1.3rem;text-decoration:none;display:flex;flex-direction:column;
  position:relative;transition:background .18s var(--ease)}
.pcard:hover{background:#fff}
/* Une fourchette ne se coupe pas : « CHF 16.00 – » d'un côté et « 50.00 » de
   l'autre se lisent comme deux prix. */
.pcard .price{white-space:nowrap}
.pcard__imgwrap{position:relative;margin:-1.1rem -1.1rem 1rem;background:var(--paper-warm)}
.pcard img{aspect-ratio:1/1;object-fit:cover;width:100%;mix-blend-mode:multiply}
.pcard__ref{position:absolute;top:.6rem;left:.6rem;font-size:.63rem;letter-spacing:.1em;color:var(--muted);
  background:rgba(247,242,232,.85);padding:.15rem .4rem;font-variant-numeric:tabular-nums}
.pcard__cat{font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.pcard__t{font-family:var(--serif);font-size:1.02rem;line-height:1.2;margin:0 0 .55rem;font-weight:600}
.pcard__b{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;padding-top:.6rem}
.price{font-family:var(--serif);font-size:1.08rem;font-weight:600;font-variant-numeric:tabular-nums}
.price small{font-family:var(--sans);font-size:.66rem;color:var(--muted);font-weight:500;letter-spacing:.04em}
.tag{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .45rem;border:1px solid currentColor}
.tag--out{color:var(--cinabre)}
.tag--var{color:var(--muted)}
.tag--new{color:var(--laiton)}
@media(max-width:1000px){.planche,.planche--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.planche,.planche--3{grid-template-columns:1fr}}

/* ---------- boutique : rail de filtres ---------- */
.shop{display:grid;grid-template-columns:220px 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:start}
.rail{position:sticky;top:100px}
.rail h2{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans);
  color:var(--muted);margin:0 0 .8rem;font-weight:600}
.rail ul{list-style:none;margin:0 0 2rem;padding:0;border-top:1px solid var(--rule)}
.rail li{border-bottom:1px solid var(--rule)}
.rail button{display:flex;width:100%;justify-content:space-between;align-items:center;gap:.5rem;
  background:none;border:0;padding:.7rem 0;min-height:44px;cursor:pointer;text-align:left;font-size:.92rem}
.rail button:hover{color:var(--cinabre)}
.rail button[aria-pressed="true"]{color:var(--cinabre);font-weight:600}
.rail button span{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.shop__bar{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between;
  padding-bottom:1rem;margin-bottom:1.5rem;border-bottom:1.5px solid var(--ink)}
.shop__count{font-size:var(--step--1);color:var(--muted)}
.shop__count b{color:var(--ink);font-variant-numeric:tabular-nums}
/* ---------- la recherche de la boutique ----------
   Un « input » de 200 pixels perdu à côté d'un menu de tri ne se voit pas, et
   sur 75 références la recherche est le chemin le plus court. On lui donne la
   place et le contraste qui disent qu'elle est là pour servir. */
.shop__outils{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-start;flex:1 1 22rem}
.recherche{position:relative;flex:1 1 20rem;min-width:min(20rem,100%)}
.recherche__loupe{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;display:flex}
.recherche input{width:100%;min-height:52px;padding:.7rem 2.6rem;font-size:1rem;
  font-family:var(--sans);border:1.5px solid var(--rule);background:var(--paper);
  color:var(--ink);border-radius:0}
.recherche input::placeholder{color:var(--muted)}
.recherche input:hover{border-color:var(--ink)}
.recherche input:focus-visible{outline:none;border-color:var(--cinabre);
  box-shadow:0 0 0 3px rgba(196,5,63,.14)}
/* Safari masque sa propre croix, on fournit la nôtre : celle du navigateur est
   minuscule et n'existe pas partout. */
.recherche input::-webkit-search-cancel-button{display:none}
.recherche__vider{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:0;background:none;color:var(--muted);
  font-size:1.5rem;line-height:1;cursor:pointer}
.recherche__vider:hover{color:var(--ink)}

.recherche__liste{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);
  margin:0;padding:0;list-style:none;background:var(--paper);
  border:1.5px solid var(--ink);max-height:min(60vh,26rem);overflow:auto;
  box-shadow:0 12px 30px rgba(27,26,23,.13)}
.recherche__liste li{border-bottom:1px solid var(--rule)}
.recherche__liste li:last-child{border-bottom:0}
.recherche__liste a{display:flex;gap:.75rem;align-items:center;padding:.6rem .75rem;
  text-decoration:none;color:var(--ink);min-height:56px}
.recherche__liste a:hover,.recherche__liste [aria-selected="true"] a{background:var(--paper-warm)}
.recherche__liste img{width:44px;height:44px;object-fit:cover;flex:none;background:var(--paper-warm)}
.recherche__t{display:block;font-size:.92rem;line-height:1.3}
.recherche__m{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem}
.recherche__p{margin-left:auto;font-size:.88rem;white-space:nowrap;padding-left:.5rem}
.recherche__vide{padding:.9rem .75rem;font-size:.9rem;color:var(--muted)}
.recherche mark{background:none;color:var(--cinabre);font-weight:600}

.field{display:flex;align-items:center;gap:.5rem;font-size:.85rem}
.field select,.field input{border:1.5px solid var(--rule);background:var(--paper);padding:.55rem .7rem;min-height:44px}
.field select:hover,.field input:hover{border-color:var(--ink)}
@media(max-width:860px){.shop{grid-template-columns:1fr}.rail{position:static}
  .rail ul{display:flex;flex-wrap:wrap;gap:.5rem;border:0;margin-bottom:1.25rem}
  .rail li{border:0}.rail button{border:1.5px solid var(--rule);padding:.5rem .8rem;width:auto}
  .rail button[aria-pressed="true"]{border-color:var(--cinabre)}}

/* ---------- fiche produit ---------- */
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,4rem);align-items:start;
  padding:clamp(2rem,4vw,3.5rem) 0}
.gallery__main{background:var(--paper-warm);margin-bottom:1px}
.gallery__main img{aspect-ratio:1/1;object-fit:contain;width:100%;mix-blend-mode:multiply}
.gallery__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:1px}
.gallery__thumbs button{padding:0;border:1.5px solid transparent;background:var(--paper-warm);cursor:pointer;min-height:0}
.gallery__thumbs button[aria-current="true"]{border-color:var(--cinabre)}
.gallery__thumbs img{aspect-ratio:1/1;object-fit:cover;mix-blend-mode:multiply}
.pdp__buy{position:sticky;top:100px}
.crumb{font-size:.78rem;color:var(--muted);margin-bottom:1rem}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--cinabre)}
.pdp h1{font-size:var(--step-3);margin-bottom:.9rem}
.pdp__price{display:flex;align-items:baseline;gap:.6rem;margin:1.1rem 0;padding:1.1rem 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pdp__price .price{font-size:1.9rem}
.bullets{list-style:none;padding:0;margin:0 0 1.6rem}
.bullets li{position:relative;padding:.4rem 0 .4rem 1.15rem;font-size:.93rem;line-height:1.55}
.bullets li::before{content:"";position:absolute;left:0;top:.95em;
  width:7px;height:7px;background:var(--armoise)}
.opt{margin-bottom:1.2rem}
.opt__label{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{min-height:44px;padding:.5rem .95rem;border:1.5px solid var(--rule);background:var(--paper);cursor:pointer;
  font-size:.88rem;font-variant-numeric:tabular-nums;transition:.16s var(--ease)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.chip[disabled]{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.buyrow{display:flex;gap:.6rem;align-items:stretch;margin-bottom:1rem}
.qty{display:flex;border:1.5px solid var(--rule)}
.qty button{width:44px;min-height:48px;background:none;border:0;cursor:pointer;font-size:1.1rem}
.qty button:hover{background:var(--paper-warm)}
/* À la borne, le bouton se désactive plutôt que de recevoir un clic sans
   effet. Sur un pas de quantité, c'est la convention : on comprend qu'on est
   au minimum ou au maximum sans qu'on ait à l'écrire. */
.qty button[disabled]{opacity:.3;cursor:default}
.qty button[disabled]:hover{background:none}
.qty input{width:52px;border:0;border-inline:1.5px solid var(--rule);text-align:center;background:transparent;font-variant-numeric:tabular-nums}
.buyrow .btn{flex:1}
.stock{display:inline-flex;align-items:center;gap:.45rem;font-size:.83rem;color:var(--muted)}
/* Le voyant de disponibilité : vert, orange, rouge.
   Une marque de 9 pixels a besoin de PLUS de saturation qu'un aplat : l'armoise
   de la charte, juste sur une grande surface, y devient grise. On la fonce
   pour cet usage-là seulement. Même raison pour l'orange : le laiton, qui est
   un jaune, ne se lit pas comme un avertissement à cette taille. */
.dot{width:9px;height:9px;border-radius:50%;background:#4F7A3F;
  box-shadow:0 0 0 2px rgba(79,122,63,.18)}
.dot--bas{background:#C8781A;box-shadow:0 0 0 2px rgba(200,120,26,.18)}
.dot--out{background:var(--cinabre);box-shadow:0 0 0 2px rgba(196,5,63,.18)}
.dot--attente{background:var(--muted);box-shadow:none}
.reassure{list-style:none;padding:1.2rem 0 0;margin:1.2rem 0 0;border-top:1px solid var(--rule);font-size:.85rem;color:var(--muted)}
.reassure li{padding:.3rem 0}
@media(max-width:900px){.pdp{grid-template-columns:1fr}.pdp__buy{position:static}}

/* ---------- infos pratiques ---------- */
.infos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.infos > div{background:var(--paper);padding:1.75rem 1.5rem}
.infos h3{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans);
  color:var(--muted);margin:0 0 .9rem;font-weight:600}
.infos p{margin:0 0 .3rem;font-size:.95rem}
.infos a{text-decoration:none;border-bottom:1px solid var(--rule)}
.infos a:hover{border-color:var(--cinabre);color:var(--cinabre)}
@media(max-width:760px){.infos{grid-template-columns:1fr}}

/* ---------- tarifs ---------- */
.tarifs{width:100%;border-collapse:collapse;margin:1.5rem 0}
.tarifs th,.tarifs td{text-align:left;padding:.95rem .5rem;border-bottom:1px solid var(--rule);font-size:.95rem}
.tarifs th{font-family:var(--sans);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600}
.tarifs td:last-child{text-align:right;font-family:var(--serif);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- articles ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,2.5vw,2.5rem)}
.post{text-decoration:none;display:block;border-top:1.5px solid var(--ink);padding-top:1rem}
.post__meta{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cinabre);margin-bottom:.6rem}
.post h3{font-size:var(--step-1);margin-bottom:.5rem}
.post p{color:var(--muted);font-size:.9rem;margin:0}
.post:hover h3{color:var(--cinabre)}
@media(max-width:820px){.posts{grid-template-columns:1fr}}

/* ---------- bandeau rendez-vous ---------- */
.rdv{background:var(--ink);color:var(--paper);padding:clamp(2.5rem,5vw,4rem) 0}
/* Le module de réservation change de hauteur quand l'agenda se déplie : centrer
   verticalement ferait sauter le texte à chaque fois. Il reste donc en haut. */
.rdv__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4vw,3.5rem);
  align-items:start}
.rdv h2{color:var(--paper);max-width:20ch}
.rdv p{color:#C9C1B2;max-width:44ch;margin:.9rem 0 0}
.rdv .btn{border-color:var(--paper);color:var(--paper)}
.rdv .btn:hover{background:var(--paper);color:var(--ink)}
.rdv .btn--primary{background:var(--cinabre);border-color:var(--cinabre);color:#fff}
@media(max-width:900px){.rdv__grid{grid-template-columns:1fr;gap:2rem}}

/* ---------- footer ---------- */
.foot{background:var(--paper-warm);border-top:1px solid var(--rule);padding:clamp(2.5rem,5vw,4rem) 0 2rem}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.foot h3{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans);color:var(--muted);margin:0 0 .9rem;font-weight:600}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.45rem}
.foot a{text-decoration:none;font-size:.92rem}
.foot a:hover{color:var(--cinabre)}
.foot__legal{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-top:2.5rem;padding-top:1.25rem;
  border-top:1px solid var(--rule);font-size:.78rem;color:var(--muted)}
@media(max-width:820px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot__grid{grid-template-columns:1fr}}

/* ---------- panier (tiroir) ---------- */
.drawer{position:fixed;inset:0;z-index:90;display:none}
.drawer[data-open="true"]{display:block}
.drawer__bg{position:absolute;inset:0;background:rgba(27,26,23,.45)}
.drawer__panel{position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);background:var(--paper);
  display:flex;flex-direction:column;box-shadow:-14px 0 40px rgba(27,26,23,.14)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:1.25rem;border-bottom:1px solid var(--rule)}
.drawer__head h2{font-size:var(--step-1)}
.drawer__body{flex:1;overflow:auto;padding:1.25rem}
.drawer__foot{padding:1.25rem;border-top:1px solid var(--rule)}
.drawer__total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem;font-family:var(--serif);font-size:1.2rem;font-weight:600}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:.85rem;padding:.85rem 0;border-bottom:1px solid var(--rule);align-items:start}
.line img{aspect-ratio:1/1;object-fit:cover;background:var(--paper-warm)}
.line__t{font-size:.88rem;font-weight:600;line-height:1.25}
.line__v{font-size:.75rem;color:var(--muted)}
.line__rm{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.75rem;padding:.3rem 0;text-decoration:underline}
.line__rm:hover{color:var(--cinabre)}
.close{background:none;border:0;cursor:pointer;width:44px;height:44px;font-size:1.3rem;line-height:1}

/* ---------- révélation ---------- */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- bannière maquette ---------- */
/* ---------- bandeau unique en haut de page ----------
   Il porte soit l'annonce du moment, soit la mention de maquette. L'or de la
   marque par défaut, avec du texte encre : sur cet or, du texte blanc plafonne
   à 2:1 de contraste, très en dessous du seuil lisible. */
.bandeau{position:relative;display:flex;align-items:center;justify-content:center;
  gap:.9rem;padding:.6rem 3rem .6rem 1.25rem;font-size:.84rem;line-height:1.4;
  background:var(--laiton);color:var(--or-ink)}
.bandeau p{margin:0;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  justify-content:center;text-align:center}
.bandeau b{font-weight:700}
.bandeau a{color:inherit;font-weight:700;text-decoration:none;
  border-bottom:1.5px solid currentColor;padding-bottom:1px;white-space:nowrap}
.bandeau a:hover{opacity:.75}
.bandeau--maquette{font-size:.78rem;padding-right:1.25rem}
/* Un ton plus appuyé pour une annonce qui doit vraiment arrêter l'œil. */
.bandeau--urgent{background:var(--cinabre);color:#fff}
.bandeau__fermer{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  width:40px;height:40px;background:none;border:0;color:inherit;opacity:.6;
  font-size:1.3rem;line-height:1;cursor:pointer}
.bandeau__fermer:hover{opacity:1}
.bandeau[hidden]{display:none !important}
@media(max-width:620px){.bandeau{padding-block:.7rem;font-size:.8rem}}

/* ---------- tunnel de commande ---------- */
.tunnel{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media(max-width:900px){.tunnel{grid-template-columns:1fr}}

.pline{display:grid;grid-template-columns:96px 1fr auto;gap:1.2rem;padding:1.4rem 0;
  border-top:1px solid var(--rule);align-items:start}
.pline:last-of-type{border-bottom:1px solid var(--rule)}
.pline img{aspect-ratio:1/1;object-fit:cover;background:var(--paper-warm);width:96px}
.pline__t{font-family:var(--serif);font-size:1.05rem;font-weight:600;line-height:1.2;
  margin:0 0 .3rem;text-decoration:none;display:block}
.pline__t:hover{color:var(--cinabre)}
.pline__v{font-size:.82rem;color:var(--muted);margin:0 0 .8rem}
.pline__bas{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.pline__prix{text-align:right;font-family:var(--serif);font-weight:600;font-size:1.1rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pline__unit{display:block;font-family:var(--sans);font-size:.75rem;color:var(--muted);font-weight:500}
.pline__rm{background:none;border:0;padding:.4rem 0;min-height:44px;color:var(--muted);
  font-size:.8rem;text-decoration:underline;cursor:pointer}
.pline__rm:hover{color:var(--cinabre)}
.pline__epuise{color:var(--cinabre);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:560px){.pline{grid-template-columns:72px 1fr}.pline img{width:72px}
  .pline__prix{grid-column:2;text-align:left}}

.recap{background:var(--paper-warm);border:1px solid var(--rule);padding:1.5rem;position:sticky;top:100px}
@media(max-width:900px){.recap{position:static}}
.recap h2{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans);
  color:var(--muted);margin:0 0 1.2rem;font-weight:600}
.champ{width:100%;border:1.5px solid var(--rule);background:var(--paper);padding:.7rem;min-height:48px}
.champ:hover{border-color:var(--ink)}
.recap__lignes{margin:0 0 1.2rem;padding:1rem 0 0;border-top:1px solid var(--rule)}
.recap__lignes > div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.4rem 0}
.recap__lignes dt{color:var(--muted);font-size:.9rem}
.recap__lignes dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600}
.recap__total{border-top:1px solid var(--rule);margin-top:.6rem;padding-top:.9rem !important}
.recap__total dt{color:var(--ink) !important;font-family:var(--serif);font-size:1.1rem;font-weight:600}
.recap__total dd{font-family:var(--serif);font-size:1.25rem}
.recap__tva{font-size:.75rem;color:var(--muted);margin:0 0 1rem}
.recap__note{font-size:.72rem;color:var(--muted);margin:.8rem 0 0;line-height:1.5}
.franco{font-size:.8rem;background:var(--paper);border-left:3px solid var(--armoise);
  padding:.7rem .8rem;margin:0 0 1rem}
.alerte{font-size:.85rem;background:var(--paper-warm);border-left:3px solid var(--cinabre);
  padding:.8rem 1rem;margin:1.2rem 0 0}

/* ---------- modales de prestation ---------- */
.presta__item{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);
  font:inherit;color:inherit;cursor:pointer}
.presta__t{font-family:var(--serif);font-size:var(--step-2);line-height:1.05;display:block;font-weight:600}

.modale{border:0;padding:0;background:transparent;max-width:min(760px,calc(100vw - 2rem));
  width:100%;max-height:min(86vh,900px)}
.modale::backdrop{background:rgba(27,26,23,.55);backdrop-filter:blur(3px)}
.modale__boite{background:var(--paper);border:1px solid var(--rule);display:flex;flex-direction:column;
  max-height:min(86vh,900px);box-shadow:0 24px 70px rgba(27,26,23,.26)}
.modale__tete{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.4rem 1.6rem 1.1rem;border-bottom:1px solid var(--rule);flex-shrink:0}
.modale__titre{font-size:var(--step-2);line-height:1.05;margin:0}
.modale__cn{display:block;font-family:var(--sans);font-size:.78rem;color:var(--muted);
  letter-spacing:.06em;margin-top:.35rem;font-weight:500}
.modale__fermer{background:none;border:1.5px solid var(--rule);width:44px;height:44px;flex-shrink:0;
  cursor:pointer;font-size:1.4rem;line-height:1;color:var(--muted)}
.modale__fermer:hover{border-color:var(--ink);color:var(--ink)}
.modale__corps{overflow-y:auto;padding:1.5rem 1.6rem;overscroll-behavior:contain}
.modale__corps img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 25%;
  margin-bottom:1.3rem}
.modale__chapeau{font-size:var(--step-1);line-height:1.45;color:var(--ink);margin:0 0 1.4rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--rule)}
.modale__corps .prose{max-width:none}
.modale__corps .prose h3{font-size:var(--step-1);margin:1.8em 0 .4em}
.modale__pied{display:flex;gap:.6rem;flex-wrap:wrap;padding:1.1rem 1.6rem;
  border-top:1px solid var(--rule);background:var(--paper-warm);flex-shrink:0}
@media(max-width:620px){
  .modale{max-width:100vw;max-height:100vh;width:100vw}
  .modale__boite{max-height:100vh;border:0}
  .modale__tete,.modale__corps,.modale__pied{padding-inline:1.1rem}
}
@media (prefers-reduced-motion:no-preference){
  .modale[open]{animation:modale-in .22s var(--ease)}
  @keyframes modale-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ---------- cartes d'article avec visuel ---------- */
.post__img{display:block;background:var(--paper-warm);margin-bottom:1rem;overflow:hidden}
.post__img img{aspect-ratio:3/2;object-fit:cover;object-position:50% 25%;width:100%;
  transition:transform .5s var(--ease)}
.post:hover .post__img img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.post:hover .post__img img{transform:none}}
.post{border-top:1.5px solid var(--ink);padding-top:1rem}
.posts--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.posts--2{grid-template-columns:1fr}}

/* ---------- page article ---------- */
.article__tete{padding:clamp(2rem,4vw,3.2rem) 0 clamp(1.5rem,3vw,2.2rem);max-width:none}
.article__tete h1{font-size:var(--step-3);max-width:20ch;margin-bottom:1.1rem;line-height:1.02}
.article__chapeau{font-size:var(--step-1);line-height:1.45;color:var(--muted);max-width:46ch;margin:0}
.article__fig{margin:0 0 clamp(2rem,4vw,3rem)}
/* Les visuels d'article sont souvent des portraits. Un recadrage centré coupe
   les visages : on ancre l'image vers le haut. */
.article__fig img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 22%}
@media(max-width:700px){.article__fig img{aspect-ratio:3/2}}
.article__corps{margin-inline:auto}
.article__corps h3{font-size:var(--step-2);margin:2em 0 .5em}
.article__corps h4{font-family:var(--serif);font-size:var(--step-1);margin:1.8em 0 .4em;font-weight:600}
.article__corps blockquote{margin:1.8em 0;padding-left:1.2rem;border-left:2px solid var(--cinabre);
  font-family:var(--serif);font-size:var(--step-1);line-height:1.4;color:var(--ink)}
.article__retour{max-width:68ch;margin:2.5rem auto clamp(2.5rem,5vw,4rem)}

/* ---------- pages légales ---------- */
.legale{padding-bottom:clamp(3rem,6vw,5rem)}
.legale__tete{padding:clamp(2rem,4vw,3rem) 0 clamp(1.5rem,3vw,2.2rem);
  border-bottom:1.5px solid var(--ink);margin-bottom:clamp(2rem,4vw,3rem)}
.legale__tete h1{font-size:var(--step-3);margin-bottom:1rem;max-width:18ch}
.legale__maj{font-size:.8rem;color:var(--muted);margin:1rem 0 0}
.avertissement{font-size:.85rem;background:var(--paper-warm);border-left:3px solid var(--laiton);
  padding:.9rem 1.1rem;margin:1.2rem 0 0;max-width:62ch;line-height:1.55}
.legale__grille{display:grid;grid-template-columns:230px 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.legale__sommaire{position:sticky;top:100px}
.legale__sommaire h2{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--sans);color:var(--muted);margin:0 0 .8rem;font-weight:600}
.legale__sommaire ol{list-style:none;counter-reset:s;margin:0;padding:0;border-top:1px solid var(--rule)}
.legale__sommaire li{counter-increment:s;border-bottom:1px solid var(--rule)}
.legale__sommaire a{display:block;padding:.55rem 0 .55rem 1.9rem;position:relative;
  text-decoration:none;font-size:.86rem;line-height:1.35;min-height:44px}
.legale__sommaire a::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;
  color:var(--cinabre);font-size:.72rem;font-variant-numeric:tabular-nums;top:.7rem}
.legale__sommaire a:hover{color:var(--cinabre)}
.legale__corps{max-width:68ch}
.legale__corps h3{font-size:var(--step-1);margin:2.4em 0 .5em;scroll-margin-top:100px}
.legale__corps h3:first-child{margin-top:0}
@media(max-width:860px){.legale__grille{grid-template-columns:1fr}
  .legale__sommaire{position:static;padding-bottom:1.5rem;border-bottom:1px solid var(--rule)}}
.retrait-info{font-size:.82rem;background:var(--paper);border-left:3px solid var(--cinabre);
  padding:.75rem .85rem;margin:0 0 1rem;line-height:1.5}
.rail__liens{list-style:none;margin:0 0 2rem;padding:0;border-top:1px solid var(--rule)}
.rail__liens li{border-bottom:1px solid var(--rule)}
.rail__liens a{display:flex;justify-content:space-between;gap:.5rem;padding:.7rem 0;
  min-height:44px;align-items:center;text-decoration:none;font-size:.92rem}
.rail__liens a:hover{color:var(--cinabre)}
.rail__liens span{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.posts--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.posts--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.posts--3{grid-template-columns:1fr}}

/* ---------- emplacement du widget de réservation ---------- */
.rdv__widget{display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:wrap}
.rdv .rdv__tel{margin-top:1.1rem;font-size:.95rem}
.rdv .rdv__tel a{font-family:var(--serif);font-size:1.15rem;color:var(--paper);
  text-decoration:none;border-bottom:1px solid rgba(247,242,232,.35)}
.rdv .rdv__tel a:hover{border-color:var(--paper)}
.widget-slot{border:1.5px dashed rgba(247,242,232,.45);padding:1.3rem 1.5rem;
  min-width:min(340px,100%);background:rgba(247,242,232,.05)}
.widget-slot__nom{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:#E0A08C;margin:0 0 .5rem;font-weight:600}
.widget-slot__note{font-size:.8rem;color:#C9C1B2;margin:0 0 1rem;max-width:36ch;line-height:1.5}
.rdv__tel{font-size:.85rem;color:#C9C1B2;margin:0}
.rdv__tel a{font-family:var(--serif);font-size:1.15rem;color:var(--paper);
  text-decoration:none;border-bottom:1px solid rgba(247,242,232,.3)}
.rdv__tel a:hover{border-color:var(--paper)}
@media(max-width:760px){.rdv__widget{flex-direction:column;align-items:flex-start}}

/* ---------- fiche formation ---------- */
.formation{margin-top:2.5rem;border-top:1.5px solid var(--ink);padding-top:1.8rem}
.formation__reperes dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin:0 0 2rem}
.formation__reperes div{background:var(--paper-warm);padding:1rem 1.1rem}
/* Le dernier repère ne doit pas laisser une demi-ligne vide : il prend toute
   la largeur restante et se centre. */
.formation__reperes div:last-child:nth-child(odd){grid-column:1/-1;text-align:center}
.formation__reperes dt{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.35rem;font-weight:600}
.formation__reperes dd{margin:0;font-weight:600;font-size:.95rem;line-height:1.3}
.formation__prog h2{font-size:var(--step-2);margin:0 0 1rem}
.formation__prog ul{list-style:none;padding:0;margin:0 0 1.8rem;max-width:62ch}
.formation__prog li{position:relative;padding:.55rem 0 .55rem 1.3rem;
  border-bottom:1px solid var(--rule);font-size:.96rem;line-height:1.45}
.formation__prog li::before{content:"";position:absolute;left:0;top:1em;
  width:7px;height:7px;background:var(--cinabre)}
.formation__public{max-width:62ch;font-size:.95rem}
.formation__attest{display:inline-block;font-size:.82rem;background:var(--paper-warm);
  border-left:3px solid var(--armoise);padding:.6rem .9rem;margin:0}
.modale--etroite{max-width:min(480px,calc(100vw - 2rem))}
.rail__note{font-size:.76rem;color:var(--muted);line-height:1.5;margin:-1.2rem 0 2rem}

/* ---------- macaron d'actualité ----------
   Même famille que le sceau du logo : un disque posé sur l'image. Il répond au
   monogramme situé en bas de la photo et crée une diagonale dans la composition. */
.macaron{position:absolute;top:-22px;left:-26px;z-index:3;
  width:clamp(118px,11vw,150px);aspect-ratio:1;border-radius:50%;
  background:var(--cinabre);color:#fff;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1rem 1.1rem;gap:.18rem;overflow:hidden;
  box-shadow:0 10px 26px rgba(150,3,47,.28);
  transform:rotate(-7deg);transform-origin:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.macaron:hover,.macaron:focus-visible{transform:rotate(-2deg) scale(1.05);
  box-shadow:0 14px 34px rgba(150,3,47,.36)}
.macaron__sur{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  opacity:.9;font-weight:600;line-height:1.2}
.macaron__txt{font-family:var(--serif);font-size:clamp(.82rem,1.1vw,.98rem);
  font-weight:600;line-height:1.08;letter-spacing:-.01em}
.macaron__det{font-size:.64rem;letter-spacing:.03em;opacity:.92;margin-top:.15rem;
  white-space:nowrap}

@media (prefers-reduced-motion:no-preference){
  .macaron{animation:macaron-entree .6s var(--ease) both,
                     macaron-flotte 5.5s ease-in-out 1s infinite}
  /* pendant le fondu du hero, le macaron reste immobile : deux mouvements
     simultanés dans la même zone deviennent du bruit visuel. */
  .hero__fig--duo[data-anime="oui"] ~ * .macaron,
  .hero__fig--duo[data-anime="oui"] .macaron{animation:macaron-entree .6s var(--ease) both}
  .macaron:hover,.macaron:focus-visible{animation-play-state:paused,paused}
  @keyframes macaron-entree{
    from{opacity:0;transform:rotate(-24deg) scale(.7)}
    to{opacity:1;transform:rotate(-7deg) scale(1)}}
  @keyframes macaron-flotte{
    0%,100%{transform:rotate(-7deg) translateY(0)}
    50%{transform:rotate(-7deg) translateY(-7px)}}
}
@media(max-width:860px){.macaron{top:-16px;left:auto;right:-6px;
  width:clamp(112px,28vw,136px);padding:.9rem .8rem}
  .macaron__sur{font-size:.54rem}.macaron__det{font-size:.58rem}}
.tag--bas{color:var(--laiton)}
/* la teinte du voyant est définie plus haut, avec les deux autres états */
.opt__choix{color:var(--ink);font-weight:600;letter-spacing:0;text-transform:none;font-size:.82rem}
.chip--absent{opacity:.28;text-decoration:none}
/* Épuisé, mais CLIQUABLE : c'est le chemin vers la liste d'attente. Le barré
   dit l'indisponibilité, l'opacité reste haute pour que la cible se voie, et
   le curseur reste une main puisqu'il y a bien quelque chose à faire. */
.chip--epuise{text-decoration:line-through;text-decoration-color:var(--cinabre);
  color:var(--muted);border-style:dashed}
.chip--epuise:hover{border-color:var(--cinabre);color:var(--ink)}
.chip--epuise[aria-pressed="true"]{background:var(--ink);color:var(--paper);
  border-style:solid;text-decoration-color:var(--paper-warm)}
.lien-alerte{background:none;border:0;padding:0;font:inherit;color:var(--cinabre);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lien-alerte:hover{color:var(--cinabre-dark)}

/* ---------- titres à coupures maîtrisées ----------
   Les lignes sont déclarées dans le contenu, jamais avec un <br> en dur : sur
   petit écran elles se relâchent en flux naturel plutôt que de déborder. */
.titre-lignes .ligne{display:block}
h1 .titre-lignes,h2 .titre-lignes{display:block;text-wrap:balance}
@media(max-width:620px){.titre-lignes .ligne{display:inline}}

/* ---------- page newsletter ---------- */
.nl-tete{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);
  align-items:start;padding-bottom:clamp(2rem,4vw,3rem)}
@media(max-width:860px){.nl-tete{grid-template-columns:1fr}}
.nl-form{background:var(--paper-warm);border:1px solid var(--rule);padding:clamp(1.4rem,3vw,2rem)}
.nl-form__titre{font-family:var(--serif);font-size:var(--step-1);font-weight:600;margin:0 0 1.2rem}
.nl-form__note{font-size:.75rem;color:var(--muted);line-height:1.55;margin:1rem 0 0}
.nl-themes{border:0;padding:0;margin:1.6rem 0 0}
.nl-themes legend{padding:0;margin-bottom:.4rem}
.nl-themes label{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;
  font-size:.9rem;cursor:pointer;min-height:44px}
.nl-themes input{width:18px;height:18px;accent-color:var(--cinabre);flex-shrink:0}
.post__sansimg{display:block;aspect-ratio:3/2;margin-bottom:1rem;
  background:var(--paper-warm) repeating-linear-gradient(135deg,
    transparent 0 14px, rgba(196,5,63,.045) 14px 28px)}
.nl-form .champ{margin-bottom:.2rem}

/* ---------- encart d'inscription contextuel ---------- */
.nl-encart{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.2rem,3vw,2.5rem);
  align-items:center;background:var(--paper-warm);border:1px solid var(--rule);
  padding:clamp(1.4rem,3vw,2rem);margin:clamp(2.5rem,5vw,4rem) auto 0;max-width:var(--container)}
.nl-encart__titre{font-size:var(--step-1);margin:0 0 .5rem;max-width:22ch}
.nl-encart__note{font-size:.82rem;color:var(--muted);margin:0;line-height:1.5}
.nl-encart__note a{color:var(--cinabre)}
.nl-encart__form{display:flex;gap:.6rem;flex-wrap:wrap}
.nl-encart__form .champ{flex:1;min-width:190px;margin:0}
@media(max-width:760px){.nl-encart{grid-template-columns:1fr}}

/* ---------- points du hero ----------
   Deux points, rien autour. Couleur du papier pour l'image en attente,
   framboise de la marque pour l'image affichée. */
.hero__points{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  display:flex;gap:10px;z-index:2}
.hero__points button{width:10px;height:10px;padding:0;border:0;border-radius:50%;
  cursor:pointer;background:var(--paper);transition:background .25s var(--ease)}
.hero__points button[aria-current="true"]{background:var(--cinabre)}
.hero__points button:hover{background:var(--cinabre)}
.hero__points button:focus-visible{outline:2.5px solid var(--cinabre);outline-offset:3px}
@media(max-width:860px){.hero__points{bottom:14px}}
@media (prefers-reduced-motion:reduce){.hero__points{display:none}}

/* =========================================================================
   GRILLES À DEUX COLONNES
   Elles étaient écrites en style inline, donc insensibles aux media queries :
   les pages restaient sur deux colonnes jusqu'en mobile. Classes dédiées.
   ========================================================================= */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.duo--large{grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem)}
.entete-page{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;
  margin-bottom:clamp(1.6rem,3vw,2.5rem)}
.entete-page--serre{margin-bottom:1rem}
.formation-item{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(2rem,4vw,3rem) 0;border-bottom:1px solid var(--rule);align-items:start}

@media(max-width:900px){
  .duo,.duo--large,.entete-page,.formation-item{grid-template-columns:1fr;gap:clamp(1.5rem,4vw,2.4rem)}
  /* Comme sur l'accueil : l'image passe avant le texte sur petit écran. */
  .duo--fig-dabord > figure,.formation-item > figure{order:-1}
  .entete-page{align-items:start}
  .entete-page .lede{max-width:none}
}

/* ---------- cibles tactiles ----------
   Les liens de navigation doivent rester atteignables au doigt. On n'agrandit
   que la zone cliquable, pas l'interligne : la mise en page ne bouge pas. */
@media(max-width:900px){
  .foot a,.rail__liens a,.legale__sommaire a{display:inline-block;padding-block:.5rem}
  .foot li{margin-bottom:.15rem}
  .crumb a{padding-block:.35rem;display:inline-block}
  .nav a:not(.btn){min-height:48px;display:flex;align-items:center}
}
/* La liste des prestations garde numéro + contenu sur deux colonnes :
   c'est sa structure, pas un défaut de responsive. */
@media(max-width:520px){
  .presta__item{grid-template-columns:2.2rem 1fr;gap:.5rem .7rem;padding:1.2rem 0}
  .presta__t{font-size:var(--step-1)}
}

/* ---------- fiche produit sur petit écran ----------
   On veut, dans l'ordre : la photo et ses vignettes, puis le titre, le prix et
   le bouton, et seulement ensuite la description.

   La difficulté est que la galerie et la description vivent dans la MÊME
   colonne, alors que le bloc d'achat doit se glisser entre les deux. On
   dissout donc la colonne avec « display:contents » : ses deux enfants
   deviennent des cases de la grille, et « order » peut les ranger un par un.
   Sur grand écran la colonne redevient une colonne, rien ne change.

   Le fil d'Ariane est sorti de la grille pour rester en tête quel que soit
   l'ordre des colonnes. */
.crumb--pdp{padding-top:clamp(1rem,2vw,1.5rem);margin-bottom:0}
@media(max-width:900px){
  .pdp{gap:1.8rem}
  .pdp__colonne{display:contents}
  /* On range TOUT enfant, pas seulement « prose ». La règle ne nommait que ce
     bloc-là : sur une fiche de formation, dont le contenu est une
     « section.formation », l'enfant restait à order 0 et passait donc AVANT
     l'image et avant le titre. On lisait le tableau des horaires, puis la
     photo, puis seulement le nom de la formation.
     Viser l'enfant générique règle aussi les blocs qu'on n'a pas encore. */
  .pdp__colonne > *{order:3;margin-top:0}
  .pdp__colonne > .gallery{order:1}
  .pdp__buy{order:2}
}

/* ---------- rail repliable sur petit écran ----------
   <details> natif : l'ouverture, le clavier et les lecteurs d'écran sont gérés
   par le navigateur. En desktop le résumé disparaît et la liste reste ouverte. */
.rail__bloc > summary{list-style:none;cursor:pointer}
.rail__bloc > summary::-webkit-details-marker{display:none}
@media(min-width:901px){
  .rail__bloc > summary{display:none}
}
@media(max-width:900px){
  .rail__bloc{border:1.5px solid var(--rule);margin-bottom:1.25rem;background:var(--paper)}
  .rail__bloc > summary{display:flex;align-items:center;gap:.6rem;min-height:52px;
    padding:.8rem 1rem;font-size:.92rem;font-weight:600;position:relative}
  .rail__bloc > summary > span:first-child{flex-shrink:0}
  .rail__choix{color:var(--cinabre);font-weight:500;flex:1;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rail__bloc > summary::after{content:"";width:9px;height:9px;flex-shrink:0;
    border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
    transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
  .rail__bloc[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
  .rail__bloc > ul{margin:0;padding:0 1rem 1rem;border-top:1px solid var(--rule)}
  .rail .rail__bloc button{border:0;padding:.7rem 0;width:100%}
  .rail .rail__bloc button[aria-pressed="true"]{border:0}
  .rail__bloc li{border-bottom:1px solid var(--rule)}
  .rail__bloc li:last-child{border-bottom:0}
}

/* ---------- tarif étudiant, sous le catalogue ---------- */
.etudiant{display:grid;grid-template-columns:1fr auto;gap:clamp(1.2rem,3vw,2.5rem);
  align-items:center;background:var(--paper-warm);border:1px solid var(--rule);
  padding:clamp(1.4rem,3vw,2rem);margin-top:clamp(2rem,4vw,3rem)}
.etudiant__titre{font-size:var(--step-1);margin:0 0 .5rem;max-width:26ch}
.etudiant__txt{font-size:.9rem;color:var(--muted);margin:0;max-width:60ch;line-height:1.55}
@media(max-width:760px){.etudiant{grid-template-columns:1fr}}
textarea.champ{resize:vertical;min-height:76px;font-family:var(--sans);
  font-size:.92rem;line-height:1.5}

/* ---------- plan d'accès ---------- */
.carte{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(1.5rem,3vw,2.5rem);
  align-items:stretch;margin-top:clamp(1.5rem,3vw,2.5rem)}
.carte__image{position:relative;display:block;background:var(--paper-warm);
  border:1px solid var(--rule);overflow:hidden;text-decoration:none}
.carte__image img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease)}
.carte__image:hover img{transform:scale(1.02)}
.carte__sur{position:absolute;left:0;right:0;bottom:0;padding:.7rem 1rem;
  background:linear-gradient(transparent,rgba(27,26,23,.72));color:var(--paper);
  font-size:.85rem;font-weight:600}
@media (prefers-reduced-motion:reduce){.carte__image:hover img{transform:none}}
.widget-slot--clair{border-color:var(--rule);background:transparent;text-align:center}
.widget-slot--clair .widget-slot__nom{color:var(--cinabre)}
.widget-slot--clair .widget-slot__note{color:var(--muted);margin-bottom:0}
.carte__liens{background:var(--paper-warm);border:1px solid var(--rule);
  padding:clamp(1.2rem,2.5vw,1.6rem);display:flex;flex-direction:column;gap:.6rem;
  align-items:flex-start}
.carte__adresse{font-family:var(--serif);font-size:var(--step-1);line-height:1.3;
  margin:0 0 .6rem;font-weight:600}
.carte__liens .btn{width:100%}
.rdv__lien{color:#E0A08C;text-decoration:none;border-bottom:1px solid rgba(224,160,140,.4);
  font-size:.92rem}
.rdv__lien:hover{color:var(--paper);border-color:var(--paper)}
@media(max-width:820px){.carte{grid-template-columns:1fr}.carte__image{min-height:220px}}
/* ---------- module de réservation ----------
   Le module OneDoc est blanc : posé sur le bandeau sombre, il se lit comme une
   carte déposée sur la page. Il lui faut de la place, d'où la colonne large. */
.rdv__module{width:100%}
.onedoc{width:100%;background:var(--paper);padding:8px;
  box-shadow:0 18px 44px rgba(0,0,0,.28)}
.onedoc iframe{display:block;width:100%;border:0;min-height:430px;background:var(--paper)}
@media(max-width:900px){.onedoc iframe{min-height:520px}}

/* ---------- informations pratiques en deux colonnes ---------- */
.pratique{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:clamp(2rem,4vw,3rem)}
.pratique__bloc{background:var(--paper);padding:clamp(1.4rem,3vw,2rem)}
.pratique__bloc h3{font-size:var(--step-1);margin:0 0 .9rem}
.pratique__bloc p{margin:0 0 .9em;max-width:42ch;font-size:.96rem;line-height:1.6}
.pratique__bloc p:last-child{margin-bottom:0}
.pratique__bloc ul{list-style:none;padding:0;margin:0}
.pratique__bloc li{position:relative;padding:.45rem 0 .45rem 1.1rem;
  font-size:.95rem;line-height:1.55}
.pratique__bloc li::before{content:"";position:absolute;left:0;top:.95em;
  width:6px;height:6px;background:var(--cinabre)}
@media(max-width:760px){.pratique{grid-template-columns:1fr}}

/* L'en-tête est collant : sans cette marge, le retour en tête de liste
   passerait sous le menu. */
.shop__bar{scroll-margin-top:104px}

/* ---------- réponse d'inscription à l'infolettre ----------
   Affichée dans le formulaire lui-même, pas dans une alerte du navigateur :
   la personne garde le contexte de ce qu'elle vient de faire. */
.nl-reponse{margin:.9rem 0 0;padding:.7rem .85rem;font-size:.88rem;line-height:1.5;
  background:var(--paper-warm);border-left:3px solid var(--armoise)}
.nl-reponse--erreur{border-left-color:var(--cinabre)}
/* Un succès qui EXIGE une action ne doit pas ressembler à une note de bas de
   page. Sans confirmation, l'inscription s'efface au bout de sept jours : si
   la personne ne lit pas ce message, elle croit avoir fini et n'est prévenue
   de rien. Ce cas-là mérite d'être vu. */
.nl-reponse--action{border-left-width:4px;border-left-color:var(--laiton);
  background:var(--paper-warm);padding:1rem 1.1rem;font-size:var(--step-0)}
.nl-reponse--action strong{display:block;font-family:var(--serif);
  font-size:var(--step-1);line-height:1.25;color:var(--ink);margin-bottom:.3rem}
.nl-form--bientot{padding:1.6rem;background:var(--paper-warm);border:1px solid var(--rule)}

/* ---------- pages courtes centrées (merci, 404, confirmation) ----------
   Une colonne bornée et centrée. « .lede » a une largeur maximale mais aucune
   marge automatique : sans ce conteneur, son texte se centre dans un bloc resté
   collé à gauche, ce qui se voit immédiatement. */
.page-centree{max-width:40rem;margin-inline:auto;text-align:center}
.page-centree .lede,
.page-centree .prose{margin-inline:auto}
.page-centree .lede{margin-top:1rem}
.page-centree .prose{text-align:left}