/* Brasserie Waale – couleurs du logo : turquoise, rouge brique, crème. Polices du système, aucune ressource externe. */
:root {
  --turquoise: #1f8a8c; --turquoise-fonce: #145f61; --turquoise-pale: #e3f2f1;
  --brique: #c8462f; --brique-fonce: #a2361f;
  --creme: #fbf6ee; --sable: #f3eadb; --texte: #1d2b2c; --doux: #546465; --bord: #e2d8c6; --blanc: #fff;
  --titres: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --corps: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rayon: 14px; --ombre: 0 10px 30px rgba(20, 50, 50, .10);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--corps); font-size: 1.05rem; line-height: 1.65; color: var(--texte); background: var(--creme); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--turquoise-fonce); text-underline-offset: .18em; }
a:hover { color: var(--brique); }
:focus-visible { outline: 3px solid var(--brique); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--titres); line-height: 1.2; color: var(--turquoise-fonce); margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.interieur { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.etroit { width: min(760px, 100% - 2.5rem); }
.centre { text-align: center; }
.discret { color: var(--doux); font-size: .92rem; }
.aller-au-contenu { position: absolute; left: -9999px; }
.aller-au-contenu:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--blanc); padding: .5rem 1rem; }

/* En-tête et menu */
.entete { background: var(--blanc); border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 5; }
.entete .interieur { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.marque { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--texte); }
.marque img { width: 56px; height: 56px; }
.marque span { font-family: var(--titres); font-size: 1.25rem; line-height: 1.1; }
.marque strong { color: var(--brique); }
.marque small { display: block; font-family: var(--corps); font-size: .78rem; color: var(--doux); letter-spacing: .02em; }
.menu, .menu-mobile ul { list-style: none; margin: 0; padding: 0; }
.menu { display: flex; align-items: center; gap: .3rem; }
.menu a, .menu-mobile a { display: block; padding: .5rem .75rem; border-radius: 999px; text-decoration: none; color: var(--texte); font-weight: 600; font-size: .97rem; }
.menu a:hover, .menu-mobile a:hover { background: var(--turquoise-pale); color: var(--turquoise-fonce); }
.menu a[aria-current="page"], .menu-mobile a[aria-current="page"] { color: var(--turquoise-fonce); background: var(--turquoise-pale); }
.menu .bouton-boutique, .menu-mobile .bouton-boutique { background: var(--brique); color: var(--blanc); margin-left: .3rem; }
.menu .bouton-boutique:hover, .menu-mobile .bouton-boutique:hover { background: var(--brique-fonce); color: var(--blanc); }
.menu-mobile { display: none; position: relative; }
.menu-mobile summary { list-style: none; cursor: pointer; font-weight: 700; padding: .5rem 1rem; border: 2px solid var(--turquoise); border-radius: 999px; color: var(--turquoise-fonce); }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile[open] summary { background: var(--turquoise); color: var(--blanc); }
.menu-mobile ul { position: absolute; right: 0; top: calc(100% + .6rem); background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon);
                  box-shadow: var(--ombre); padding: .5rem; min-width: 240px; }
.menu-mobile .bouton-boutique { margin: .3rem 0 0; text-align: center; }
@media (max-width: 960px) {
  .menu { display: none; }
  .menu-mobile { display: block; }
}

/* Boutons et liens */
.bouton { display: inline-block; background: var(--turquoise); color: var(--blanc); text-decoration: none; font-weight: 700; padding: .8rem 1.4rem;
          border-radius: 999px; border: 2px solid var(--turquoise); cursor: pointer; font: inherit; font-weight: 700; transition: background .15s, border-color .15s; }
.bouton:hover { background: var(--turquoise-fonce); border-color: var(--turquoise-fonce); color: var(--blanc); }
.bouton.secondaire { background: transparent; color: var(--turquoise-fonce); }
.bouton.secondaire:hover { background: var(--turquoise-pale); color: var(--turquoise-fonce); }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.lien-fleche { font-weight: 700; text-decoration: none; }
.lien-fleche::after { content: " →"; }

/* Accueil */
.heros { background: linear-gradient(180deg, var(--blanc), var(--creme)); padding: clamp(2rem, 6vw, 4.5rem) 0; }
.heros-grille { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.surtitre { text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; font-weight: 700; color: var(--brique); margin-bottom: .8rem; }
.chapo { font-size: 1.18rem; color: var(--doux); max-width: 38em; }
.heros-image img, .photo img, img.photo { border-radius: var(--rayon); box-shadow: var(--ombre); width: 100%; }
@media (max-width: 900px) { .heros-grille { grid-template-columns: 1fr; } }

.bloc { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.fond-clair { background: var(--sable); }
.grille-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; margin-top: 1.5rem; }
.engagement { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.6rem; text-align: center; }
.engagement img { margin: 0 auto 1rem; }
.engagement p { color: var(--doux); margin: 0; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.deux-colonnes.interieur { align-items: start; }
@media (max-width: 900px) { .deux-colonnes { grid-template-columns: 1fr; } }
.infos-pratiques { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2rem; }
.infos-pratiques h2 { font-size: 1.35rem; }

/* Pages intérieures */
.bandeau { background: var(--turquoise); color: var(--blanc); padding: clamp(2rem, 5vw, 3.2rem) 0; }
.bandeau h1 { color: var(--blanc); margin-bottom: .3em; }
.bandeau .chapo { color: #def1f0; margin: 0; }
.texte h2 { margin-top: 1.4em; }
.texte h2:first-child { margin-top: 0; }

.intro-bieres { max-width: 52em; margin: 0 auto 2rem; text-align: center; color: var(--doux); font-size: 1.05rem; }
/* Bières : visuel (verre de l'affiche) à gauche, fiche de dégustation à droite */
.grille-bieres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr)); gap: 1.4rem; }
.biere { display: grid; grid-template-columns: 170px 1fr; background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon);
         overflow: hidden; border-top: 6px solid var(--accent, var(--turquoise)); }
.biere .visuel { background: #0f1b2b; }
.biere .visuel img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.biere .fiche { padding: 1.2rem 1.3rem 1.1rem; }
.biere .gamme { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; color: var(--doux); margin: 0; }
.biere h2 { font-size: 1.65rem; margin: 0 0 .45rem; }
.caracteristiques { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.caracteristiques span { background: var(--turquoise-pale); color: var(--turquoise-fonce); border-radius: 999px; padding: .15rem .7rem; font-size: .88rem; font-weight: 600; }
.chapo-biere { font-weight: 600; margin-bottom: .6rem; }
.notes { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0 0 .8rem; font-size: .95rem; }
.notes dt { font-weight: 700; color: var(--turquoise-fonce); }
.notes dd { margin: 0; color: var(--doux); }
.medailles { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.medaille { font-size: .85rem; padding: .3rem .6rem .3rem 1.9rem; border-radius: 8px; position: relative; background: #f4f1ea; color: var(--texte); }
.medaille::before { content: ""; position: absolute; left: .55rem; top: 50%; width: .9rem; height: .9rem; margin-top: -.45rem; border-radius: 50%;
                    background: var(--metal); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12); }
.medaille strong { display: inline; }
.medaille.or { --metal: #e0b33c; } .medaille.argent { --metal: #b9bec4; } .medaille.bronze { --metal: #c27a45; }
.accent-turquoise { --accent: #2bb3b1; } .accent-jaune { --accent: #f2b81f; } .accent-bleu { --accent: #5a63c4; }
.accent-orange { --accent: #ee6a24; } .accent-vert { --accent: #7cbf2a; } .accent-brun { --accent: #8a5a36; }
@media (max-width: 520px) { .biere { grid-template-columns: 120px 1fr; } .biere .fiche { padding: 1rem; } .notes { grid-template-columns: 1fr; } .notes dd { margin-bottom: .3rem; } }
.appel { margin-top: 2.5rem; padding: 1.8rem; border-radius: var(--rayon); background: var(--turquoise-pale); text-align: center; }
.appel .actions { justify-content: center; }
img.photo.large, .large img { max-width: 520px; margin: 0 auto; }

/* Où trouver */
.pastilles { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; }
.pastilles li { background: var(--blanc); border: 1px solid var(--bord); border-radius: 999px; padding: .35rem .9rem; font-weight: 600; }
.carte-boutique { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.6rem; }

/* Presse */
.presse { list-style: none; padding: 0; margin: 0; }
.presse li { background: var(--blanc); border-radius: var(--rayon); border: 1px solid var(--bord); padding: 1rem 1.2rem; margin-bottom: .8rem; }
.presse .media { display: block; font-size: .85rem; font-weight: 700; color: var(--brique); text-transform: uppercase; letter-spacing: .06em; }

/* Contact */
.contact-grille { display: grid; grid-template-columns: minmax(240px, .8fr) 1.6fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .contact-grille { grid-template-columns: 1fr; } }
.coordonnees { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.5rem; }
.coordonnees a { overflow-wrap: anywhere; }
.formulaire label { display: block; font-weight: 600; margin-bottom: 1rem; }
.formulaire input, .formulaire select, .formulaire textarea { display: block; width: 100%; margin-top: .35rem; font: inherit; font-weight: 400; color: var(--texte);
  background: var(--blanc); border: 1px solid #cbbfa9; border-radius: 10px; padding: .7rem .8rem; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: 3px solid var(--turquoise-pale); border-color: var(--turquoise); }
.formulaire .civilite { border: 0; padding: 0; margin: 0 0 1rem; }
.formulaire .civilite .choix { margin-right: 1.2rem; }
.formulaire .civilite legend { font-weight: 600; padding: 0; margin-bottom: .3rem; }
.formulaire .choix { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-weight: 400; }
.formulaire .choix input { width: auto; margin: 0; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 640px) { .grille-2 { grid-template-columns: 1fr; } }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.message { border-radius: var(--rayon); padding: 1.1rem 1.3rem; margin-bottom: 1.2rem; }
.message.ok { background: #e6f4ea; border: 1px solid #9ccfaa; }
.message.ok h2 { color: #1f6b35; margin-bottom: .3em; }
.message.erreur { background: #fdecea; border: 1px solid #f0b3aa; color: #8a2414; }
.message ul { margin: 0; padding-left: 1.2rem; }

/* Pied de page */
.pied { background: var(--turquoise-fonce); color: #dcefee; padding: 2.5rem 0 1.2rem; margin-top: 2rem; }
.pied a { color: var(--blanc); }
.grille-pied { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem 2rem; align-items: start; }
.grille-pied > div:first-child { display: flex; gap: 1rem; align-items: center; }
.logo-pied { width: 72px; height: 72px; }
.pied .discret { color: #b9dcda; }
.liens-pied { display: flex; flex-direction: column; gap: .3rem; }
.evin { text-align: center; font-size: .85rem; color: #b9dcda; margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .15); }