/* =========================================================
   Napoli Breizh — feuille de styles
   Identité : anthracite/charbon · rouge tomate · vert basilic
   accents crème/doré · clin d'œil breton (Gwenn-ha-du, triskell)
   ========================================================= */

:root {
  --charbon:   #15110f;
  --charbon-2: #1e1916;
  --charbon-3: #2a221e;
  --tomate:    #d8392b; /* le « li » rouge du logo */
  --tomate-2:  #b22a1f;
  --basilic:   #3e8e4e; /* le « Napo » vert du logo */
  --basilic-2: #5aa050;
  --creme:     #f4ece0;
  --dore:      #d9a441;
  --texte:     #efe7da;
  --texte-mut: #b7ab9b;
  --blanc:     #ffffff;
  --noir:      #000000;

  /* Dégradé signature Napoli Breizh : vert → rouge (couleurs du logo) */
  --orange:   #f2a23c;
  --magenta:  #d6308c;
  --violet:   #8e2da0;
  --brand-gradient: linear-gradient(100deg, var(--basilic) 0%, var(--basilic-2) 45%, var(--tomate) 100%);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --maxw: 1180px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.30);
  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 76px;
}

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 44px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--sans);
  background: var(--charbon);
  color: var(--texte);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.1; font-weight: 700; }
em { font-style: italic; color: var(--dore); }

.container { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--sans); font-weight: 600; font-size: .98rem; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--tomate); color: #fff; box-shadow: 0 10px 24px rgba(211,58,44,.35); }
.btn--primary:hover { background: var(--tomate-2); box-shadow: 0 14px 30px rgba(211,58,44,.5); }
/* dégradé signature repris de l'anneau du logo */
.btn--brand { background: var(--brand-gradient); background-size: 160% 100%; color: #fff; box-shadow: 0 10px 26px rgba(62,142,78,.4); }
.btn--brand:hover { background-position: 100% 0; box-shadow: 0 14px 32px rgba(216,57,43,.5); }
.btn--ghost { border-color: rgba(244,236,224,.5); color: var(--creme); }
.btn--ghost:hover { border-color: var(--creme); background: rgba(244,236,224,.08); }
.btn--dark { background: var(--charbon); color: var(--creme); border-color: rgba(217,164,65,.4); }
.btn--dark:hover { background: var(--charbon-3); border-color: var(--dore); }
.btn--lg { padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn--sm { padding: .6rem 1.1rem; font-size: .9rem; }
.btn--block { display: flex; width: 100%; }

/* ---------- Bandeau statut ---------- */
.status-bar {
  background: var(--charbon-2); color: var(--texte-mut);
  font-size: .85rem; text-align: center; padding: .45rem 1rem;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--texte-mut); }
.status-dot.is-open   { background: var(--basilic-2); box-shadow: 0 0 0 4px rgba(90,160,80,.2); animation: pulse 2s infinite; }
.status-dot.is-closed { background: var(--tomate); }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(90,160,80,.4);} 50%{box-shadow:0 0 0 6px rgba(90,160,80,0);} }

/* ---------- En-tête ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(21,17,15,.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .3s, box-shadow .3s;
}
.header.scrolled { background: rgba(21,17,15,.96); box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.header__inner { display: flex; align-items: center; gap: 1.2rem; min-height: var(--header-h); }

.logo { display: flex; align-items: center; gap: .65rem; margin-right: auto; }
.logo__mark {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.logo__mark img { width: 100%; height: 100%; object-fit: cover; }
.logo__text { display: flex; flex-direction: column; }
.logo__name { display: flex; align-items: baseline; gap: .4rem; line-height: 1; }
/* « Napoli » : script vert → rouge, comme sur le logo */
.logo__napoli {
  font-family: "Great Vibes", cursive;
  font-size: 1.6rem;
  /* La boîte doit englober toute la lettre cursive : sinon le dégradé
     découpé sur le texte (background-clip) ne couvre pas les boucles
     qui dépassent et elles apparaissent « coupées ». */
  display: inline-block;
  line-height: 1.45;
  padding: .12em .12em .12em .42em;
  background: linear-gradient(95deg, var(--basilic-2) 0%, var(--basilic) 38%, var(--tomate) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* « Breizh » : bloc sans-serif espacé, comme sur le logo */
.logo__breizh {
  font-family: var(--sans); font-weight: 700; font-size: .85rem;
  letter-spacing: 3px; text-transform: uppercase; color: var(--creme);
}
.logo__tag { font-size: .54rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--texte-mut); margin-top: 1px; }

.nav { display: flex; gap: 1.6rem; }
.nav a { font-size: .95rem; font-weight: 500; color: var(--texte); position: relative; padding: .3rem 0; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--tomate); transition: width .28s var(--ease); }
.nav a:hover::after, .nav a.active::after { width: 100%; }

.header__actions { display: flex; align-items: center; gap: .8rem; }
.phone-link { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--creme); }
.phone-link__num { font-size: .98rem; }
.phone-link:hover { color: var(--dore); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 26px; height: 2px; background: var(--creme); border-radius: 2px; transition: .3s; }

/* ---------- Sélecteur de langue ----------
   Il vit dans la barre de navigation : sur ordinateur c'est un menu
   déroulant après « Contact », sur mobile il tombe dans le panneau
   qui se déplie (voir la requête média plus bas). */
.lang { position: relative; }
.lang__btn {
  display: flex; align-items: center; gap: .35rem;
  background: none; border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  padding: .3rem .6rem; cursor: pointer; color: var(--texte);
  font-family: var(--sans); font-size: .82rem; font-weight: 600; letter-spacing: .5px;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.lang__btn:hover { color: var(--dore); border-color: rgba(212,175,55,.5); }
.lang__caret { font-size: .6rem; transition: transform .25s var(--ease); }
.lang.is-open .lang__caret { transform: rotate(180deg); }

/* Drapeaux : petit rectangle aux coins arrondis, avec un liseré clair
   pour que le blanc des drapeaux (France, Italie) reste visible sur le
   fond sombre de la barre. Le SVG remplit son conteneur. */
.lang__flag, .lang__opt-flag {
  display: block; flex: 0 0 auto; overflow: hidden;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.28);
}
.lang__flag { width: 21px; height: 14px; }
.lang__opt-flag { width: 24px; height: 16px; }
.lang__flag .flag, .lang__opt-flag .flag { display: block; width: 100%; height: 100%; }

/* Mode emoji (Mac, iPhone, Android — la classe est posée par le JS) :
   le drapeau est un emoji, pas un dessin. On enlève le cadre prévu pour le
   SVG et on le dimensionne comme un caractère. */
.has-flag-emoji .lang__flag, .has-flag-emoji .lang__opt-flag {
  width: auto; height: auto; overflow: visible;
  border-radius: 0; box-shadow: none;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.has-flag-emoji .lang__flag { font-size: 1.05rem; }
.has-flag-emoji .lang__opt-flag { font-size: 1.25rem; }

.lang__menu {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 120;
  min-width: 168px; padding: .35rem; margin: 0; list-style: none;
  background: rgba(30,24,21,.98); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }

.lang__opt {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
  padding: .5rem .6rem; text-align: left; color: var(--texte);
  font-family: var(--sans); font-size: .9rem;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lang__opt:hover { background: rgba(255,255,255,.07); color: var(--creme); }
.lang__opt-label { flex: 1; }
.lang__opt.is-active { color: var(--dore); }
/* Coche discrète sur la langue en cours */
.lang__opt.is-active::after { content: "✓"; margin-left: auto; font-size: .78rem; }

/* ---------- Héro ---------- */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 18s ease-out forwards; }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(62,142,78,.34) 0%, rgba(216,57,43,.16) 32%, transparent 60%),
    linear-gradient(to right, rgba(15,12,10,.92) 0%, rgba(15,12,10,.55) 52%, rgba(15,12,10,.3) 100%),
    linear-gradient(to top, rgba(15,12,10,.92) 0%, rgba(15,12,10,0) 46%);
}
/* clin d'œil breton : liseré triskell discret */
.hero__triskell {
  position: absolute; right: -60px; bottom: -60px; z-index: 1; width: 320px; height: 320px;
  opacity: .07; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--creme) 0 2px, transparent 3px) 0 0/22px 22px;
  -webkit-mask: radial-gradient(circle, #000 60%, transparent 62%);
          mask: radial-gradient(circle, #000 60%, transparent 62%);
}
.hero__content { position: relative; z-index: 2; padding-block: 4rem; max-width: 720px; }
.hero__badge {
  display: inline-block; position: relative; color: #fff; padding: .45rem 1rem; border-radius: 999px;
  font-size: .82rem; font-weight: 700; margin-bottom: 1.2rem; backdrop-filter: blur(4px);
  background: rgba(20,15,18,.5); border: 1px solid transparent;
  background-clip: padding-box;
}
/* contour en dégradé repris du logo */
.hero__badge::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--brand-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.hero__title { font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 900; color: #fff; letter-spacing: -.5px; }
.hero__title em {
  font-family: "Great Vibes", cursive;
  font-style: normal; font-weight: 400;
  font-size: 1.32em; line-height: .8;
  padding-right: .08em; /* respire la cursive */
  background: linear-gradient(95deg, var(--basilic-2) 0%, var(--basilic) 40%, var(--tomate) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero__slogan { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem,3vw,1.7rem); color: var(--creme); margin-top: .6rem; }
.hero__intro { color: var(--texte-mut); font-size: 1.08rem; margin-top: 1rem; max-width: 540px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }
.hero__hours { margin-top: 1.6rem; font-size: .92rem; color: var(--texte-mut); }
.hero__hours strong { color: var(--creme); }
.hero__scroll {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: 1.4rem; color: var(--creme); opacity: .8; animation: bob 2s infinite;
}
@keyframes bob { 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);} }

/* ---------- Bande de valeurs ---------- */
.strip {
  position: relative; padding-block: 1.4rem;
  background: transparent; border: 0;
}
/* Teinte tricolore (vert · blanc · rouge) fondue : aucun bord net,
   elle s'estompe vers le haut et le bas pour se fondre dans la page. */
.strip::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(46,138,68,.78) 0%, rgba(46,138,68,.78) 30%,
    rgba(244,240,230,.55) 45%, rgba(244,240,230,.55) 55%,
    rgba(214,46,42,.78) 70%, rgba(214,46,42,.78) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.strip__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; padding-block: 1.2rem; }
.strip__item { display: flex; align-items: center; gap: .9rem; }
.strip__item span { font-size: 1.8rem; }
.strip__item p { font-size: .9rem; color: var(--creme); opacity: .9; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.strip__item strong { display: block; color: #fff; font-size: 1rem; text-shadow: 0 1px 4px rgba(0,0,0,.7); }

/* ---------- En-têtes de section ---------- */
.eyebrow { display: inline-block; color: var(--dore); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; font-size: .78rem; margin-bottom: .6rem; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 2.6rem; }
.section-head h2 { font-size: clamp(2rem,5vw,3rem); color: var(--creme); }
.section-sub { color: var(--texte-mut); margin-top: .7rem; }
section { padding-block: clamp(3.5rem, 8vw, 6rem); }

/* ---------- À propos ---------- */
.about { background: var(--charbon); }
.about__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem,5vw,4rem); align-items: stretch; }
/* La vidéo est en fond de sa colonne (position absolue) : elle épouse la
   hauteur du texte (du haut « Notre histoire » au bouton « Découvrir la carte »)
   sans que sa hauteur naturelle, très verticale, n'agrandisse la section. */
.about__media { position: relative; min-height: 260px; }
.about__media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.about__video {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow); background: #100c0a;
}
.about__media-2 {
  position: absolute; right: -18px; bottom: -28px; width: 52%;
  border: 5px solid var(--charbon) !important;
}
.about__text .eyebrow { margin-bottom: .4rem; }
.about__text h2 { font-size: clamp(1.9rem,4.5vw,2.8rem); color: var(--creme); margin-bottom: 1rem; }
.about__text p { color: var(--texte-mut); margin-bottom: 1rem; }
.about__text strong { color: var(--texte); }
.about__sign { font-family: var(--serif); font-style: italic; color: var(--creme) !important; font-size: 1.1rem; }
.flag-mini { display: inline-block; height: 1.05em; width: 1.575em; object-fit: cover; vertical-align: -0.18em; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.about__text .btn { margin-top: .6rem; }

/* ---------- Carte / menu ---------- */
.menu { background: var(--charbon-2); }
.menu__controls { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.search { display: flex; align-items: center; gap: .5rem; background: var(--charbon); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: .6rem 1.1rem; flex: 1; min-width: 240px; max-width: 360px; }
.search input { background: none; border: 0; color: var(--texte); width: 100%; font-size: .95rem; outline: none; }
.search input::placeholder { color: var(--texte-mut); }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  background: var(--charbon); color: var(--texte-mut); border: 1px solid rgba(255,255,255,.12);
  padding: .5rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: .2s; font-family: var(--sans);
}
.chip:hover { border-color: var(--dore); color: var(--creme); }
.chip.is-active { background: var(--tomate); color: #fff; border-color: var(--tomate); }
.chip--tag.is-active { background: var(--basilic); border-color: var(--basilic); }

.menu__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.4rem; }
.card {
  background: var(--charbon); border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(217,164,65,.35); }
.card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
/* Photo affichée en entier (non recadrée) — utile pour les formats très verticaux */
.card__media--contain { background: #100c0a; }
.card__media--contain img { object-fit: contain; }
.card:hover .card__media--contain img { transform: none; }
.card__badges { position: absolute; top: .6rem; left: .6rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.badge {
  font-size: .72rem; font-weight: 700; padding: .25rem .55rem; border-radius: 999px;
  background: rgba(0,0,0,.7); color: #fff; backdrop-filter: blur(3px);
}
.badge--best { background: var(--dore); color: #1a1410; }
.badge--nouveau { background: var(--dore); color: #1a1410; text-transform: uppercase; letter-spacing: .04em; }
.badge--vege { background: var(--basilic); }
.badge--vegan { background: var(--basilic-2, #3f7d4f); }
.badge--epice { background: var(--tomate); }

/* Encart « photo » — emplacement à compléter par une vraie photo */
.card__media--placeholder {
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 12px, rgba(255,255,255,.05) 12px 24px);
  border-bottom: 1px dashed rgba(255,255,255,.16);
}
.card__photo-label {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 3px;
  font-size: .78rem; color: var(--texte-mut);
  border: 1px dashed rgba(255,255,255,.3); border-radius: 10px;
  padding: .5rem 1.2rem;
}

/* Pizza indisponible : photo visible mais floutée + bandeau par-dessus */
.card__media--unavailable img { filter: blur(5px) grayscale(.35) brightness(.7); transform: scale(1.06); }
.card:hover .card__media--unavailable img { transform: scale(1.06); }
.card__unavailable {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: rgba(21,17,15,.35);
}
.card__unavailable span {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; font-size: .8rem; color: #fff; text-align: center;
  background: rgba(21,17,15,.78); border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; padding: .5rem 1.1rem; backdrop-filter: blur(2px);
}

/* Boisson indisponible : bouteille estompée + bandeau, comme les pizzas */
.bottle--unavailable .bottle__img img { filter: blur(3px) grayscale(.35) brightness(.7); }
.bottle--unavailable .bottle__name,
.bottle--unavailable .bottle__price { opacity: .5; }
.bottle__unavailable {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; pointer-events: none;
}
.bottle__unavailable span {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; font-size: .62rem; color: #fff; text-align: center;
  background: rgba(21,17,15,.82); border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; padding: .32rem .6rem; backdrop-filter: blur(2px);
}
.card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.card__name { font-family: var(--serif); font-size: 1.22rem; color: var(--creme); }
.card__price { font-weight: 700; color: var(--dore); white-space: nowrap; font-size: 1.05rem; }
.card__desc { color: var(--texte-mut); font-size: .9rem; margin-top: .4rem; flex: 1; }
.menu__empty { text-align: center; color: var(--texte-mut); padding: 2rem; }
.menu__note { text-align: center; color: var(--texte-mut); font-size: .82rem; margin-top: 1.8rem; }

/* ---------- Boissons ---------- */
.drinks { margin-top: 3rem; }
.drinks__head {
  font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--creme);
  text-align: center; margin-bottom: 1.8rem; position: relative;
}
.drinks__head::after {
  content: ""; display: block; width: 60px; height: 3px; margin: .7rem auto 0;
  background: var(--brand-gradient, var(--dore)); border-radius: 999px;
}
.drinks__groups { display: flex; flex-direction: column; gap: 1.5rem; }
.drinks__groups--single { max-width: 640px; margin-inline: auto; }
/* Groupe en texte seul (ex. Vins) : encadré centré, pas étiré */
.drinks__group:not(.drinks__group--bottles) { align-self: center; width: 100%; max-width: 560px; }
.drinks__group {
  background: var(--charbon); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius); padding: 1.4rem 1.5rem;
}
.drinks__title {
  font-family: var(--sans); font-size: 1.05rem; font-weight: 700; color: var(--dore);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 1rem;
  padding-bottom: .7rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.drinks__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
/* Astérisque « saisonnier » sur les kombuchas + légende en bas de section */
.bottle__seasonal { color: var(--dore); font-weight: 700; margin-left: 1px; }
.drinks__note {
  margin-top: 1.6rem; text-align: center;
  font-size: .82rem; font-style: italic; color: var(--texte-mut);
}
.drink__line { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.drink__name { color: var(--creme); font-weight: 600; }
.drink__price { font-weight: 700; color: var(--dore); white-space: nowrap; }
.drink__desc { color: var(--texte-mut); font-size: .88rem; margin-top: .25rem; }

/* Titre de groupe dessert (ex. « Nos panna cottas »), même style que les glaces */
.desserts__group-title {
  font-family: var(--sans); font-size: 1.05rem; font-weight: 700; color: var(--dore);
  text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 1rem;
}

/* ---------- Glaces artisanales (L'Atelier N°5) ---------- */
.glaces {
  display: grid; grid-template-columns: 150px 1fr; gap: 1.4rem; align-items: center;
  margin-top: 1.5rem;
}
.glaces__photo { margin: 0; }
.glaces__photo img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: calc(var(--radius) - 4px); display: block;
}
.glaces__title {
  font-family: var(--sans); font-size: 1.05rem; font-weight: 700; color: var(--dore);
  text-transform: uppercase; letter-spacing: 1.5px;
}
.glaces__maker { color: var(--texte-mut); font-size: .85rem; margin: .35rem 0 1rem; font-style: italic; }
.glaces__flavors { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.glaces__flavor {
  color: var(--creme); font-size: .82rem; font-weight: 600;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: .32rem .8rem; white-space: nowrap;
}
@media (max-width: 520px) {
  .glaces { grid-template-columns: 1fr; }
  .glaces__photo img { aspect-ratio: 16 / 10; }
}

/* Groupe avec bouteilles dessinées (ex. sans alcool) : pleine largeur + grille */
.drinks__group--bottles { grid-column: 1 / -1; }
.bottle__grid {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center;
}
.bottle { width: 132px; display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }

/* ---------- Carrousel de bouteilles ----------
   Une seule rangée qui défile horizontalement, avec une flèche de chaque côté.
   Le nombre de bouteilles visibles est piloté par --per-view. */
.carousel { display: flex; align-items: center; gap: .6rem; }
.carousel__track {
  --per-view: 5;
  --gap: 1.2rem;
  flex: 1; min-width: 0;              /* min-width:0 : sinon le flex refuse de rétrécir */
  flex-wrap: nowrap;                   /* annule le wrap de .bottle__grid */
  justify-content: flex-start;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .2rem;
  scrollbar-width: none;               /* Firefox */
}
.carousel__track::-webkit-scrollbar { display: none; }  /* Chrome / Safari */
.carousel__track .bottle {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  width: auto;
  scroll-snap-align: start;
}
.carousel__arrow {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--dore); color: #1a1410; border: 0;
  font-size: 1.4rem; line-height: 1; font-weight: 700;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
  transition: background .2s, transform .2s, opacity .2s;
}
.carousel__arrow:hover:not(:disabled) { background: #ecc06a; transform: scale(1.1); }
.carousel__arrow:disabled { opacity: .25; cursor: default; }
/* Tout tient à l'écran : les flèches ne servent à rien, on les retire. */
.carousel--static .carousel__arrow { display: none; }
.carousel--static .carousel__track { justify-content: center; flex-wrap: wrap; }

@media (max-width: 980px) { .carousel__track { --per-view: 3; } }
@media (max-width: 640px) { .carousel__track { --per-view: 2; } }
/* Défilement au doigt : on garde le geste naturel, sans animation forcée. */
@media (hover: none) { .carousel__track { scroll-behavior: auto; } }
.bottle__img { position: relative; }
.bottle__info {
  position: absolute; top: 2px; right: 6px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--dore); color: #1a1410; border: 0;
  font-family: var(--serif); font-style: italic; font-weight: 700; font-size: .95rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.45); transition: background .2s, transform .2s;
}
.bottle__info:hover { background: #ecc06a; transform: scale(1.1); }

/* Fenêtre d'information (fiche produit) */
.modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.modal.is-open { display: block; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.modal__box {
  position: relative; z-index: 1; width: calc(100% - 2.4rem); max-width: 560px;
  margin: 8vh auto 0; max-height: 82vh; overflow-y: auto;
  background: var(--charbon-2); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 2rem; box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.modal__close {
  position: absolute; top: .5rem; right: .8rem; background: none; border: 0;
  color: var(--texte-mut); font-size: 1.9rem; line-height: 1; cursor: pointer;
}
.modal__close:hover { color: var(--creme); }
.modal__title { font-family: var(--serif); color: var(--dore); font-size: 1.55rem; margin-bottom: 1rem; padding-right: 1.5rem; }
.modal__body p { color: var(--texte-mut); line-height: 1.65; margin-bottom: .85rem; }
.modal__body p:last-child { margin-bottom: 0; }

/* Modale Commander */
.modal--order .modal__box { text-align: center; }
.order-modal__lead { color: var(--texte-mut); margin: .4rem 0 1.6rem; line-height: 1.55; }
.order-modal__phone {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.1rem, 7vw, 3.1rem); color: var(--dore); text-decoration: none; letter-spacing: 1px;
}
.order-modal__phone:hover { color: #ecc06a; }
/* Horaires d'ouverture affichés dans la modale « Commander » */
.order-modal__hours-label { color: var(--texte-mut); margin: 1.6rem 0 .7rem; font-size: .92rem; }
.order-modal__hours {
  list-style: none; padding: 0; margin: 0 auto; max-width: 300px;
  text-align: left; display: flex; flex-direction: column; gap: .45rem;
  font-size: .9rem; color: var(--texte-mut);
}
.order-modal__hours li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: .45rem; border-bottom: 1px solid rgba(255,255,255,.09);
}
.order-modal__hours li.today { color: var(--creme); }
.order-modal__hours li.today strong { color: var(--basilic-2); }
.order-modal__hours li.has-note { flex-direction: column; align-items: stretch; gap: .2rem; }
.order-modal__hours .hours__main { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.bottle__img { height: 150px; display: flex; align-items: flex-end; justify-content: center; }
.bottle__img img { max-height: 150px; max-width: 100%; width: auto; object-fit: contain;
  border-radius: 8px; box-shadow: 0 8px 18px rgba(0,0,0,.45); transition: transform .3s var(--ease); }
.bottle:hover .bottle__img img { transform: translateY(-4px) scale(1.04); }
.bottle__name { font-size: .82rem; color: var(--creme); line-height: 1.25; }
/* Prix sous le nom. La marge négative compense le gap .6rem de .bottle,
   pour garder le prix collé à son nom plutôt qu'à mi-chemin de l'image. */
.bottle__price { font-size: .82rem; font-weight: 700; color: var(--dore); margin-top: -.35rem; }
@media (max-width: 760px) {
  .bottle { width: 92px; }
}

/* ---------- À emporter ---------- */
.order { background: var(--charbon); }
.order__grid { display: grid; grid-template-columns: 1.2fr .9fr; gap: clamp(2rem,5vw,3.5rem); align-items: start; }
.order__text h2 { font-size: clamp(1.9rem,4.5vw,2.7rem); color: var(--creme); margin-bottom: 1.4rem; }
.steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.steps li { display: flex; gap: 1rem; }
.steps__n {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 1.2rem;
  background: rgba(211,58,44,.15); color: var(--tomate); border: 1.5px solid rgba(211,58,44,.4);
}
.steps strong { color: var(--creme); display: block; }
.steps p { color: var(--texte-mut); font-size: .92rem; }
.order__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }
.order__card {
  background: linear-gradient(160deg, var(--charbon-3), var(--charbon-2));
  border: 1px solid rgba(217,164,65,.25); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow);
}
.order__card h3 { font-size: 1.4rem; color: var(--creme); margin-bottom: 1.2rem; }
.order__info { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.4rem; }
.order__info li { display: flex; flex-direction: column; gap: .15rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.order__info li:last-child { border: 0; padding-bottom: 0; }
.order__info span { font-size: .8rem; color: var(--texte-mut); text-transform: uppercase; letter-spacing: 1px; }
.order__info strong { color: var(--creme); font-weight: 600; }
.order__info a { color: var(--dore); }
.order__small { font-size: .8rem; color: var(--texte-mut); margin-top: 1rem; text-align: center; }

/* ---------- Galerie ---------- */
.gallery { background: var(--charbon-2); }
.gallery__grid { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 200px; gap: 1rem; grid-auto-flow: dense; }
.gallery__grid figure { overflow: hidden; border-radius: var(--radius-sm); margin: 0; }
.gallery__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery__grid figure:hover img { transform: scale(1.08); }
.gallery__tall { grid-row: span 2; }
.gallery__wide { grid-column: span 2; }
.gallery__big { grid-column: span 2; grid-row: span 2; }

/* ---------- Avis ---------- */
.reviews { background: var(--charbon); }
.reviews__score { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem;
  text-decoration: none; padding: .4rem .9rem; border-radius: 999px;
  border: 1px solid transparent; transition: border-color .25s, background .25s; }
a.reviews__score:hover { border-color: rgba(217,164,65,.4); background: rgba(255,255,255,.04); }
.reviews__score strong { font-family: var(--serif); font-size: 2rem; color: var(--dore); }
.reviews__score #reviewsCount { color: var(--texte-mut); font-size: .9rem; }
.reviews__score-arrow { color: var(--dore); font-weight: 700; }
.stars { color: var(--dore); letter-spacing: 2px; }
.reviews__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
/* Quand les avis Google automatiques (widget Featurable) sont actifs :
   la grille laisse le widget occuper toute la largeur. */
.reviews__grid--widget { display: block; }
.reviews__card { background: var(--charbon-2); border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius); padding: 1.6rem; }
.reviews__card p { color: var(--texte); font-style: italic; margin: .8rem 0; }
.reviews__card cite { color: var(--texte-mut); font-size: .88rem; font-style: normal; }
.reviews__cta { text-align: center; margin-top: 2rem; }

/* ---------- Newsletter ---------- */
.newsletter { background: linear-gradient(135deg, var(--tomate-2), var(--charbon) 75%); padding-block: clamp(1.6rem, 3vw, 2.4rem); }
.newsletter__inner { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; }
.newsletter h2 { font-size: clamp(1.6rem,4vw,2.3rem); color: #fff; }
.newsletter p { color: rgba(255,255,255,.85); max-width: 420px; margin-top: .4rem; }
.newsletter__form { display: flex; flex-wrap: wrap; gap: .7rem; position: relative; }
.newsletter__form input {
  padding: .9rem 1.2rem; border-radius: 999px; border: 0; min-width: 240px; font-size: .98rem;
  background: rgba(255,255,255,.95); color: #1a1410; outline: none;
}
.newsletter__msg { width: 100%; font-size: .88rem; color: #fff; min-height: 1.2em; }

/* ---------- Pied de page ---------- */
.footer { background: var(--charbon-2); border-top: 1px solid rgba(255,255,255,.06); padding-top: 3.2rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 2rem; padding-bottom: 2.5rem; }
.footer__col h3 { color: var(--creme); font-size: 1.15rem; margin-bottom: 1rem; }
.footer__brand-row { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.4rem; }
.footer__logo {
  width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.footer__brand .logo__napoli { font-size: 2.3rem; }
.footer__brand .logo__breizh { font-size: 1.25rem; letter-spacing: 5px; }
.footer__slogan { color: var(--texte-mut); font-size: .92rem; margin: .8rem 0 1.2rem; }
.footer__social { display: flex; flex-direction: column; gap: .7rem; }
.footer__social a { display: inline-flex; align-items: center; gap: .55rem; color: var(--texte); font-size: .92rem; }
.footer__social a:hover { color: var(--dore); }
.social-icon { width: 22px; height: 22px; flex: 0 0 auto; }
.footer__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.1rem; }
.footer__list, .footer__hours { font-size: .92rem; color: var(--texte-mut); }
.footer__list a:hover, .footer__hours a:hover { color: var(--dore); }
.footer__hours { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.footer__hours li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.footer__hours li.today { color: var(--creme); }
.footer__hours li.today strong { color: var(--basilic-2); }
/* Jour à horaires saisonniers : la ligne passe sur deux niveaux, avec la
   mention (ex. « 17h30 à 21h en juillet et août ») sous le jour et son horaire. */
.footer__hours li.has-note { flex-direction: column; align-items: stretch; gap: .2rem; }
.footer__hours .hours__main { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.hours__season { font-size: .74rem; font-style: italic; color: var(--dore); }
.footer__tag { margin-top: 1rem; font-size: .82rem; color: var(--dore); }
.footer__map iframe { width: 100%; height: 200px; border: 0; border-radius: var(--radius-sm); filter: grayscale(.3) contrast(1.05); }

.footer__bottom { border-top: 1px solid rgba(255,255,255,.06); padding-block: 1.2rem; }
/* Trois colonnes : copyright à gauche, signature au centre, mentions à droite.
   La grille « 1fr auto 1fr » centre la signature sur le milieu de la page,
   quelles que soient les largeurs des textes de gauche et de droite —
   ce qu'un simple space-between ne ferait pas. */
.footer__bottom-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem;
  font-size: .85rem; color: var(--texte-mut);
}
.footer__legal { justify-self: end; text-align: right; }
.footer__legal a:hover { color: var(--dore); }
/* « (in French) » : les pages légales ne sont qu'en français. Vide en français,
   donc :empty évite une espace fantôme dans la ponctuation de la ligne. */
.footer__legal-note { opacity: .7; font-size: .8em; }
.footer__legal-note:empty { display: none; }
/* Signature de l'agence, discrète. */
.footer__credit { justify-self: center; text-align: center; opacity: .75; }

/* Mobile : les trois blocs s'empilent, centrés. */
@media (max-width: 760px) {
  .footer__bottom-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer__legal { justify-self: center; text-align: center; }
}

/* ---------- Footer sur fond blanc ----------
   Le reste du site est sombre : ici on redéfinit les variables de couleur
   à l'intérieur du footer. Toutes les règles ci-dessus (titres, liens,
   horaires, icônes SVG en currentColor) s'inversent alors automatiquement,
   sans avoir à les réécrire une par une. */
.footer {
  --creme:     #17120f;  /* titres et jours en cours */
  --texte:     #2b2420;  /* liens réseaux sociaux + icônes */
  --texte-mut: #6b6157;  /* textes secondaires (contraste ~5,5:1 sur blanc) */
  --dore:      #96690f;  /* accents : le doré clair serait illisible sur blanc */
  background: var(--blanc);
  border-top: 1px solid rgba(0,0,0,.10);
}
/* Les filets étaient en blanc translucide : invisibles sur fond blanc. */
.footer__hours li { border-bottom-color: rgba(0,0,0,.08); }
.footer__bottom { border-top-color: rgba(0,0,0,.10); }
/* Vert du jour en cours : assombri pour rester lisible sur blanc.
   (On ne touche pas à --basilic-2, qui sert au dégradé du logo.) */
.footer__hours li.today strong { color: #2f7a3f; }
/* Ombre du macaron Gault & Millau, adoucie sur fond clair. */
.footer__guide-badge { box-shadow: 0 6px 18px rgba(0,0,0,.18); }

/* ---------- Bouton d'appel flottant ---------- */
.fab-call {
  position: fixed; right: 18px; bottom: 18px; z-index: 90; display: none;
  width: 58px; height: 58px; border-radius: 50%; background: var(--tomate);
  color: #fff; font-size: 1.5rem; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(211,58,44,.5); animation: pulse-call 2.2s infinite;
}
@keyframes pulse-call { 0%,100%{box-shadow:0 10px 28px rgba(211,58,44,.5),0 0 0 0 rgba(211,58,44,.45);} 50%{box-shadow:0 10px 28px rgba(211,58,44,.5),0 0 0 14px rgba(211,58,44,0);} }

/* ---------- Animations au scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 920px) {
  .about__grid, .order__grid { grid-template-columns: 1fr; }
  .about__media { min-height: 0; }
  .about__video { position: static; height: auto; aspect-ratio: 4/5; }
  .about__media-2 { position: static; width: 100%; margin-top: 1rem; border-width: 0 !important; }
  .reviews__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .strip__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; gap: 0;
    background: rgba(21,17,15,.98); backdrop-filter: blur(12px); padding: .5rem 1.2rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,.08); transform: translateY(-120%); transition: transform .35s var(--ease);
  }
  .nav.open { transform: translateY(0); }
  .nav a { padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.06); width: 100%; }
  .nav-toggle { display: flex; }

  /* Le sélecteur reste dans la barre, à droite, mais l'espace y est compté
     (logo + Commander + hamburger) : on le réduit au drapeau + le code. */
  .lang__btn { padding: .28rem .42rem; gap: .28rem; font-size: .76rem; }
  .lang__caret { display: none; }
  .lang__flag { width: 19px; height: 13px; }
  .lang__menu { min-width: 150px; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* En-tête mobile : tout doit tenir (logo compact + Commander + hamburger) */
  .header__inner { gap: .5rem; }
  .header__actions { gap: .5rem; }
  .phone-link { display: none; }
  .logo { gap: .5rem; }
  .logo__mark { display: none; }
  .logo__tag { display: none; }
  .logo__napoli { font-size: 1.3rem; padding-left: .3em; }
  .logo__breizh { font-size: .7rem; letter-spacing: 1.5px; }
  .btn--order { padding: .55rem .9rem; font-size: .85rem; }
  .fab-call { display: flex; }
  .reviews__grid, .footer__grid, .strip__grid { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .gallery__wide { grid-column: span 2; }
  .gallery__tall { grid-row: span 2; }
  .gallery__big { grid-column: span 2; grid-row: span 2; }
  .hero { min-height: 88vh; }
  .newsletter__inner { flex-direction: column; align-items: flex-start; }
  .newsletter__form input { min-width: 0; flex: 1; }
}

@media (max-width: 420px) {
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
}

/* Très petits écrans (iPhone SE et compagnie, 320 px) : quatre éléments se
   disputent la barre — logo, sélecteur de langue, Commander, hamburger.
   On rogne chacun d'un cran pour éviter une page qui défile latéralement.
   Le code « FR » disparaît, il ne reste que le drapeau (le plus lisible). */
@media (max-width: 380px) {
  .lang__code { display: none; }
  .lang__btn { padding: .3rem .4rem; }
  .btn--order { padding: .5rem .7rem; font-size: .8rem; }
  .logo__napoli { font-size: 1.15rem; }
  .logo__breizh { font-size: .62rem; letter-spacing: 1px; }
  .header__inner, .header__actions { gap: .4rem; }
}

/* ---------- Pages légales ---------- */
.legal-header { border-bottom: 1px solid rgba(255,255,255,.07); background: var(--charbon-2); }
.legal-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.legal-header .logo__napoli { font-size: 1.8rem; }
.legal-header .logo__breizh { font-size: .8rem; letter-spacing: 3px; }
.legal-back { color: var(--texte-mut); font-size: .9rem; }
.legal-back:hover { color: var(--dore); }
.legal { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.legal .container { max-width: 820px; }
.legal h1 { font-family: var(--serif); font-size: clamp(2rem, 5vw, 2.8rem); color: var(--creme); }
.legal__updated { color: var(--texte-mut); font-size: .85rem; margin-bottom: 2rem; }
.legal h2 { font-family: var(--serif); font-size: 1.3rem; color: var(--dore); margin: 2rem 0 .6rem; }
.legal p, .legal li { color: var(--texte-mut); line-height: 1.7; }
.legal ul { padding-left: 1.2rem; margin: .4rem 0; }
.legal li { margin-bottom: .5rem; }
.legal a { color: var(--creme); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--dore); }
.legal strong { color: var(--texte); }
.legal__back-link { margin-top: 2.5rem; font-size: 1rem; }
.legal-footer { border-top: 1px solid rgba(255,255,255,.06); padding-block: 1.4rem; text-align: center; }
.legal-footer p { color: var(--texte-mut); font-size: .85rem; }

/* Badge guide Gault & Millau (sous les réseaux sociaux) */
.footer__guide-badge { width: 76px; height: 76px; border-radius: 50%; display: block; margin-top: 1.3rem; box-shadow: 0 6px 18px rgba(0,0,0,.45); }

/* =========================================================
   BLOG
   ========================================================= */
.blog-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(21,17,15,.9); backdrop-filter: blur(12px); }
.blog-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.blog-header .logo__napoli { font-size: 1.7rem; }
.blog-header .logo__breizh { font-size: .78rem; letter-spacing: 3px; }
.blog-back { color: var(--texte-mut); font-size: .92rem; }
.blog-back:hover { color: var(--dore); }

/* --- Index du blog --- */
.blog-intro { padding-block: clamp(2.6rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.blog-intro .container { max-width: 760px; }
.blog-intro .eyebrow { display: inline-block; color: var(--dore); font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; font-size: .78rem; margin-bottom: .9rem; }
.blog-intro h1 { font-size: clamp(2.1rem, 6vw, 3.2rem); color: var(--creme); }
.blog-intro h1 em { color: var(--dore); }
.blog-intro p { color: var(--texte-mut); font-size: 1.08rem; margin-top: 1rem; }

.blog-grid { padding-bottom: clamp(3rem, 7vw, 5rem); }
.blog-grid .container { max-width: 1040px; }
.blog-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.6rem; }
.post-card { display: flex; flex-direction: column; background: var(--charbon-2); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(217,164,65,.4); }
.post-card__media { aspect-ratio: 16/10; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post-card__meta { color: var(--dore); font-size: .76rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: .6rem; }
.post-card__title { font-size: 1.32rem; color: var(--creme); line-height: 1.2; }
.post-card__excerpt { color: var(--texte-mut); font-size: .96rem; margin-top: .7rem; flex: 1; }
.post-card__more { color: var(--dore); font-weight: 600; font-size: .95rem; margin-top: 1.1rem; }
.post-card:hover .post-card__more { color: var(--tomate); }

/* --- Article --- */
.article-hero { position: relative; min-height: clamp(360px, 60vh, 560px); display: flex; align-items: flex-end; }
.article-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,17,15,.35) 0%, rgba(21,17,15,.55) 55%, rgba(21,17,15,.96) 100%); }
.article-hero__content { position: relative; z-index: 2; width: min(100% - 2.4rem, 860px); margin-inline: auto; padding-bottom: clamp(2rem, 5vw, 3.2rem); }
.article-hero__meta { color: var(--dore); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: .8rem; margin-bottom: .8rem; }
.article-hero h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); color: var(--creme); max-width: 16ch; }
.article-hero h1 em { color: var(--dore); }
.article-hero__sub { color: var(--texte); font-size: 1.12rem; margin-top: 1rem; max-width: 56ch; }

.article { padding-block: clamp(2.4rem, 5vw, 3.6rem); }
.article .container { max-width: 720px; }
.article p, .article li { color: var(--texte-mut); font-size: 1.08rem; line-height: 1.85; }
.article p { margin-bottom: 1.4rem; }
.article > .container > p:first-of-type::first-letter { font-family: var(--serif); font-size: 3.6rem; line-height: .8; float: left; color: var(--dore); padding: .4rem .6rem 0 0; }
.article h2 { font-size: clamp(1.5rem, 4vw, 2rem); color: var(--creme); margin: 2.6rem 0 1rem; }
.article h2 em { color: var(--dore); }
.article h3 { font-size: 1.25rem; color: var(--dore); margin: 2rem 0 .7rem; }
.article strong { color: var(--texte); }
.article ul { padding-left: 1.3rem; margin: 0 0 1.4rem; }
.article li { margin-bottom: .6rem; }
.article__figure { margin: 2.2rem 0; }
.article__figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.article__figure figcaption { color: var(--texte-mut); font-size: .85rem; text-align: center; margin-top: .7rem; font-style: italic; }

.pullquote { border-left: 3px solid var(--tomate); padding: .4rem 0 .4rem 1.4rem; margin: 2.2rem 0; }
.pullquote p { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.35; color: var(--creme); margin: 0; }

.infobox { background: var(--charbon-2); border: 1px solid rgba(217,164,65,.25); border-radius: var(--radius); padding: 1.6rem 1.7rem; margin: 2.6rem 0; }
.infobox h3 { margin-top: 0; color: var(--dore); }
.infobox ul { list-style: none; padding: 0; margin: 0; }
.infobox li { color: var(--texte); font-size: 1rem; margin-bottom: .55rem; }
.infobox li strong { color: var(--creme); }
.infobox a { color: var(--dore); }

.article__cta { text-align: center; background: var(--charbon-2); border-radius: var(--radius); padding: clamp(2rem, 5vw, 3rem); margin-top: 3rem; }
.article__cta h2 { margin: 0 0 .6rem; color: var(--creme); }
.article__cta p { margin-bottom: 1.6rem; }
.article__cta .btn { margin: .3rem; }

.article-footer { border-top: 1px solid rgba(255,255,255,.06); padding-block: 1.6rem; text-align: center; }
.article-footer p { color: var(--texte-mut); font-size: .85rem; }
.article-footer a { color: var(--dore); }

/* Figure réduite, centrée, pizza entière visible (proportions naturelles) */
.article__figure--sm img { max-width: 440px; height: auto; margin-inline: auto; }
/* Légende calée sur la largeur de la photo (passe sur 2 lignes si besoin) */
.article__figure--sm figcaption { max-width: 440px; margin-inline: auto; }