/* Ti Mousse, brasserie artisanale à Saint-Pierre (démo Neori)
   Reprise de la maquette C « Les cuves », choisie le 2026-10-06.
   Le cuivre dit ce qu'on peut faire (boutons), le vert dit « au tirage », rien d'autre. */
:root{
  --mout:#2C1C13;       /* le moût, brun et non noir */
  --mout-clair:#3A271B;
  --cuivre:#D08A50;
  --inox:#E4E7E6;       /* les sections claires, froides comme l'acier */
  --inox-trait:#B9C0BF;
  --mousse:#F5EEE6;
  --encre:#21170F;
  --muted-sombre:#C7B6A8;
  --muted-clair:#55504B;
  --vert:#9DB86A;
  --vert-texte:#4C6B22; /* le même vert, lisible sur l'inox */
  --erreur:#A3271B;
  --display:"Big Shoulders Display", Impact, sans-serif;
  --body:"Source Serif 4", Georgia, serif;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{background:var(--mout);color:var(--mousse);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select{font:inherit}
:focus-visible{outline:3px solid var(--cuivre);outline-offset:3px}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--mousse);color:var(--encre);padding:8px 14px;z-index:30}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:.005em}
h2{font-size:clamp(2.6rem,6vw,4.6rem)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;font:800 1.15rem var(--display);letter-spacing:.03em;text-decoration:none;border:0;cursor:pointer;border-radius:2px}
.btn-cuivre{background:var(--cuivre);color:var(--encre)}
.btn-cuivre:hover{background:#E39E62}
.btn-ligne{border:2px solid var(--cuivre);color:var(--cuivre);background:none}
.btn-ligne:hover{background:rgba(208,138,80,.12)}
html:not(.js) .avec-js{display:none}
.js .sans-js{display:none}

/* En-tête */
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;border-bottom:1px solid rgba(245,238,230,.14)}
.logo{font-family:var(--display);font-weight:900;font-size:1.9rem;text-decoration:none;letter-spacing:.02em}
header nav ul{display:flex;gap:28px;list-style:none;padding:0;font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.03em}
header nav a{text-decoration:none;color:var(--muted-sombre)}
header nav a:hover{color:var(--mousse)}
@media (max-width:860px){header nav{display:none}}

/* Hero */
.hero{padding:clamp(40px,7vw,88px) 0 clamp(40px,6vw,64px)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:end}
.hero h1{font-size:clamp(3.6rem,10vw,8.4rem);font-weight:900}
.hero h1 span{display:block}
.hero p{margin-top:26px;font-size:1.2rem;max-width:40ch;color:var(--muted-sombre)}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero .statut{margin-top:22px;font-size:1rem}
.hero img{aspect-ratio:4/5;object-fit:cover;width:100%;border-radius:2px}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero img{aspect-ratio:3/2;order:-1}}
.statut b{font-weight:600}
.statut .pastille{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--muted-sombre);margin-right:8px;vertical-align:1px}
.statut.ouvert .pastille{background:var(--vert)}

/* Le tableau des cuves */
.cuves{padding:clamp(40px,6vw,72px) 0 clamp(72px,10vw,120px)}
.cuves .tete{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;border-top:3px solid var(--cuivre);padding-top:22px}
.cuves .tete h2{font-size:clamp(2rem,4vw,3rem)}
.cuves .tete p{color:var(--muted-sombre);max-width:50ch}
.tableau{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.cuve{background:var(--mout-clair);padding:22px 20px 20px;border-radius:2px;display:flex;flex-direction:column}
.cuve .num{font-family:var(--display);font-weight:700;color:var(--muted-sombre);font-size:1.05rem;letter-spacing:.04em}
.cuve h3{font-size:1.8rem;margin-top:6px}
.cuve .etat{margin-top:4px;color:var(--muted-sombre)}
.cuve .espace{flex:1;min-height:22px}
.jauge{height:10px;background:rgba(245,238,230,.12);position:relative;border-radius:1px}
.jauge i{position:absolute;inset:0 auto 0 0;width:max(var(--p),3%);background:var(--cuivre)}
.cuve.phase-tirage .jauge i{background:var(--vert)} /* préfixe : .tirage est aussi la section des pressions */
.cuve .date{margin-top:12px;font-size:.95rem}
.cuve .date b{font-weight:600}
.cuves .note{margin-top:20px;color:var(--muted-sombre);font-size:.95rem;max-width:70ch}
@media (max-width:980px){.tableau{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.tableau{grid-template-columns:1fr}}

/* Sections claires, sur fond inox */
.claire{background:var(--inox);color:var(--encre)}
.claire :focus-visible{outline-color:var(--encre)}

/* À la pression */
.tirage{padding:clamp(72px,10vw,120px) 0}
.tirage .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,80px);align-items:start}
.tirage img{aspect-ratio:2/3;object-fit:cover;width:100%;border-radius:2px}
.tirage table{border-collapse:collapse;width:100%;margin-top:28px}
.tirage th{text-align:left;font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.04em;color:var(--muted-clair);padding:0 8px 10px 0;border-bottom:2px solid var(--encre)}
.tirage td{padding:16px 8px 16px 0;border-bottom:1px solid var(--inox-trait);vertical-align:top}
.tirage td.nom b{font-family:var(--display);font-weight:800;font-size:1.5rem;display:block;line-height:1.05}
.tirage td.nom span.style{color:var(--muted-clair);font-size:.95rem}
.tirage td.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.robe{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--c);margin-right:8px;vertical-align:-1px;border:1px solid rgba(0,0,0,.2)}
.nouveau{display:inline-block;font:700 .9rem var(--display);letter-spacing:.03em;background:var(--cuivre);color:var(--encre);padding:2px 7px;margin-left:8px;vertical-align:middle;border-radius:2px}
.tirage .bas{margin-top:20px;color:var(--muted-clair)}
@media (max-width:860px){.tirage .wrap{grid-template-columns:1fr}.tirage img{aspect-ratio:3/2}}
@media (max-width:560px){.tirage .cache{display:none}}

/* Cuisine */
.cuisine{padding:clamp(72px,10vw,120px) 0}
.cuisine .grille{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.cuisine figure img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:2px}
.cuisine figcaption{margin-top:12px}
.cuisine figcaption b{font-family:var(--display);font-weight:800;font-size:1.45rem;display:flex;justify-content:space-between;gap:12px}
.cuisine figcaption span{color:var(--muted-sombre)}
.cuisine .suite{margin-top:40px;display:flex;gap:12px 36px;flex-wrap:wrap;color:var(--muted-sombre);padding:0;list-style:none}
.cuisine .suite b{color:var(--mousse);font-weight:600}
@media (max-width:820px){.cuisine .grille{grid-template-columns:1fr}}

/* Visite et groupes */
.deux{display:grid;grid-template-columns:1fr 1fr}
.deux > div{padding:clamp(56px,8vw,96px) clamp(20px,6vw,72px)}
.deux p{margin-top:16px;max-width:44ch}
.deux .btn{margin-top:26px}
.visite{background:var(--cuivre);color:var(--encre)}
.visite .btn{background:var(--encre);color:var(--mousse)}
.visite :focus-visible{outline-color:var(--encre)}
.groupe{background:var(--mout-clair)}
.groupe p{color:var(--muted-sombre)}
.groupe ul{margin-top:18px;padding-left:20px;color:var(--muted-sombre)}
@media (max-width:820px){.deux{grid-template-columns:1fr}}

/* Réserver et venir */
.resa{padding:clamp(72px,10vw,120px) 0}
.resa .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,80px)}
.resa form{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.resa form .plein{grid-column:1/-1}
.resa form .double{grid-column:span 2}
.resa label,.resa legend{display:block;font-weight:600;font-size:.95rem;margin-bottom:6px}
.resa fieldset{border:0;padding:0;min-width:0}
.resa input:not([type=radio]),.resa select{width:100%;min-height:50px;border:1.5px solid var(--inox-trait);border-radius:2px;padding:0 12px;font:400 1rem var(--body);background:#fff;color:var(--encre)}
.resa [aria-invalid="true"]{border-color:var(--erreur)}
.types{display:flex;flex-wrap:wrap;gap:10px}
.types label{position:relative;margin:0;cursor:pointer}
.types input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.types span{display:flex;align-items:center;min-height:48px;padding:0 18px;border:1.5px solid var(--inox-trait);border-radius:2px;background:#fff;font-weight:400}
.types input:checked + span{border-color:var(--encre);background:var(--encre);color:var(--mousse)}
.types input:focus-visible + span{outline:3px solid var(--encre);outline-offset:3px}
.resume{font-size:1.05rem;min-height:1.6em}
.resume b{font-weight:600}
.erreur{color:var(--erreur);font-size:.92rem;margin-top:6px}
.erreur:empty{display:none}
.aide{color:var(--muted-clair);font-size:.95rem}
.confirmation{margin-top:28px;padding:24px;border:1.5px solid var(--encre);background:#fff}
.confirmation h3{font-size:2rem}
.confirmation p{margin-top:10px}
.horaires{list-style:none;padding:0;margin-top:28px}
.horaires li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--inox-trait)}
.horaires li.auj{font-weight:600}
.resa .statut{margin-top:20px}
.resa .statut .pastille{background:var(--muted-clair)}
.resa .statut.ouvert .pastille{background:var(--vert-texte)}
@media (max-width:820px){.resa .wrap{grid-template-columns:1fr}.resa form{grid-template-columns:1fr 1fr}.resa form .jour{grid-column:1/-1}.resa form .double{grid-column:auto}}
@media (max-width:420px){.resa form{grid-template-columns:1fr}}

/* Pied de page */
footer{padding:28px 0 36px;font-size:.92rem;color:var(--muted-sombre)}
footer .wrap{display:flex;justify-content:space-between;gap:12px 32px;flex-wrap:wrap}
footer p{max-width:60ch}
footer nav{display:flex;gap:4px 20px;flex-wrap:wrap}
footer nav a{display:inline-flex;align-items:center;min-height:44px}

/* Pages simples */
.page{padding:clamp(40px,7vw,88px) 0 clamp(72px,10vw,120px)}
.page .wrap{max-width:760px}
.page h1{font-size:clamp(3rem,8vw,5.6rem);font-weight:900}
.page h2{font-size:2rem;margin-top:36px}
.page p{margin-top:12px;color:var(--muted-sombre)}
.page .btn{margin-top:28px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}