/* =========================================================================
   Giulia — feuille de style principale
   Sommaire : Fonts · Tokens · Base · Layout · Header/Nav · Badge statut ·
   Footer · Horaires · Notes · Hero · MOTD · Pizza du moment · Slider ·
   Carte (menu) · Fiche pizza · Liens · CTA Click & Collect · Contact ·
   Mentions légales · Page d'erreur · Animations · Utilitaires
   ========================================================================= */

/* ---- Fonts (self-host AssetMapper) ------------------------------------- */
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 500; font-display: swap; src: url("../fonts/bricolage-500-7RZt1J7.woff2") format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 600; font-display: swap; src: url("../fonts/bricolage-600-9TujzF2.woff2") format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 700; font-display: swap; src: url("../fonts/bricolage-700-LGg46X3.woff2") format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-display: swap; src: url("../fonts/bricolage-800-7tst0g-.woff2") format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url("../fonts/dmsans-400-Bs9sP8w.woff2") format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-display: swap; src: url("../fonts/dmsans-500-ExTkl7s.woff2") format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 600; font-display: swap; src: url("../fonts/dmsans-600-KBrvDZ2.woff2") format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-display: swap; src: url("../fonts/dmsans-700-TmIH4of.woff2") format('woff2'); }

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* surfaces */
  --cream: #f4ede0;
  --card: #fffdf8;
  --card-alt: #fbf6ec;
  --ink: #2a3138;
  --ink-hover: #20262c;
  --ink-soft: #343b42;
  /* texte */
  --text: #4a4339;
  --text-soft: #6b6459;
  --text-mid: #5f584d;
  --text-muted: #8a8377;
  --text-strong: #3a4148;
  /* accents */
  --terracotta: #d3a273;
  --terracotta-soft: #c9a27a;
  --terracotta-link: #b3743f;
  --sand: #a08d72;
  --green: #5c8a49;
  --green-deep: #4a6a3f;
  --green-kicker: #8a9a82;
  --green-dot: #9aab93;
  --green-soft: #a9c39a;
  --blue: #5786a0;
  --red: #a24b32;
  /* chaud (encarts note) */
  --warm-bg: #f6ece1;
  --warm-border: #ecd9c1;
  --warm-text: #7a5a3c;
  --warm-strong: #5f4326;
  /* lignes / champs */
  --border: #e7ddca;
  --border-soft: #e0d5c1;
  --field-border: #e2d8c5;
  --hairline: #f0e8d9;
  /* rayons */
  --r-lg: 24px;
  --r-panel: 20px;
  --r-card: 18px;
  --r-md: 16px;
  --r-sm: 15px;
  --r-pill: 100px;
  /* ombres */
  --shadow-panel: 0 22px 50px -26px rgba(42,49,56,.65);
  --shadow-cta: 0 16px 36px -18px rgba(42,49,56,.6);
  --shadow-chip: 0 14px 30px -20px rgba(42,49,56,.6);
  /* typo */
  --font-title: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

/* ---- Base -------------------------------------------------------------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cream);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(211,162,115,.10), transparent 42%),
    radial-gradient(circle at 88% 22%, rgba(127,178,205,.10), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(154,171,147,.14), transparent 55%);
  font-family: var(--font-body);
  color: var(--ink);
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-title); margin: 0; }
strong { color: var(--text-mid); }

/* ---- Layout ------------------------------------------------------------ */
.page { min-height: 100vh; display: flex; justify-content: center; padding: 22px 16px 56px; }
.container { width: 100%; max-width: 600px; }

/* petit intitulé « point + kicker » (réutilisé sur plusieurs pages) */
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-dot); }
.eyebrow__label { font-family: var(--font-title); font-weight: 700; font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--green-kicker); }

/* fil d'Ariane */
.crumbs { display: flex; align-items: center; gap: 8px; margin: 18px 2px 0; font-size: 12.5px; color: var(--text-muted); }
.crumbs a { color: var(--text-muted); font-weight: 600; }
.crumbs__here { color: var(--text-mid); font-weight: 600; }

/* ---- Header / Nav ------------------------------------------------------ */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand__logo { height: 34px; width: auto; display: block; }
.brand__kicker { font-family: var(--font-title); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--sand); }

.nav { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 6px; flex-wrap: wrap; }
.nav a { font-size: 13.5px; font-weight: 600; padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--text-mid); background: var(--card-alt); transition: background .15s ease; }
.nav a:hover { background: #f2e8d7; }
.nav a[aria-current="page"] { color: var(--text-strong); background: #efe4d1; border-color: #ddceb4; }

/* ---- Badge statut (mis à jour par le contrôleur live-status) ----------- */
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border-radius: var(--r-pill); font-weight: 600; font-size: 13.5px; }
.badge--open { background: #eaf1e6; border: 1px solid #cfe0c6; color: var(--green-deep); }
.badge--closed { background: #f0e7dc; border: 1px solid #ddcdb9; color: #8a6f57; }
.badge__dot { width: 8px; height: 8px; border-radius: 50%; }
.badge--open .badge__dot { background: var(--green); animation: gPulse 1.8s ease-in-out infinite; }
.badge--closed .badge__dot { background: #b98e5e; }

/* ---- Footer ------------------------------------------------------------ */
.footer { text-align: center; margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.footer__links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: 13px; }
.footer__links a { color: var(--text-muted); }
.footer__links a[aria-current="page"] { color: var(--text-mid); font-weight: 600; }
.footer__sep { color: #d9cdb7; }
.footer__copy { font-size: 12.5px; color: #a59b88; letter-spacing: .3px; }
.footer__cookies { background: none; border: none; padding: 0; margin: 0; font: inherit;
    color: var(--text-muted); cursor: pointer; }
.footer__cookies:hover { color: var(--text-mid); }

/* ---- Horaires ---------------------------------------------------------- */
.hours { scroll-margin-top: 16px; margin-top: 26px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 20px 22px; }
.hours__title { margin: 0 0 14px; font-family: var(--font-title); font-weight: 800; font-size: 16px; letter-spacing: .3px; }
.hours__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--hairline); font-size: 14.5px; }
.hours__day { font-weight: 600; color: var(--text); min-width: 96px; }
.hours__val { text-align: right; color: var(--text-soft); }
.hours__coords { border-top: 1px solid var(--hairline); margin-top: 14px; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-mid); }
.coord { display: flex; gap: 9px; align-items: center; }
.coord--top { align-items: flex-start; }
.coord a { color: var(--text-mid); }

/* ---- Notes (encart chaud avec icône) ----------------------------------- */
.note { background: var(--warm-bg); border: 1px solid var(--warm-border); border-radius: var(--r-md); padding: 14px 16px; display: flex; gap: 11px; align-items: flex-start; }
.note--tight { border-radius: 13px; padding: 12px 14px; gap: 10px; margin-top: 14px; }
.note p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--warm-text); }
.note--tight p { font-size: 13px; line-height: 1.55; }
.note strong { color: var(--warm-strong); }

/* ---- Hero (accueil) ---------------------------------------------------- */
.hero { text-align: center; margin: 14px 0 6px; }
.hero__logo { width: 100%; max-width: 300px; height: auto; display: inline-block; }
.hero__title { margin: 12px auto 0; max-width: 440px; font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.5; color: var(--text); }
.hero__lede { margin: 6px auto 0; max-width: 420px; font-size: 14.5px; line-height: 1.6; color: var(--text-soft); }
.hero__status { font-size: 13px; color: var(--text-muted); margin-top: 6px; }

/* ---- MOTD (annonce du jour) -------------------------------------------- */
.motd { margin-top: 20px; background: var(--ink); color: var(--cream); border-radius: var(--r-md); padding: 15px 18px; display: flex; gap: 13px; align-items: flex-start; box-shadow: 0 10px 30px -14px rgba(42,49,56,.5); }
.motd__icon { font-size: 20px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.motd__title { font-family: var(--font-title); font-weight: 700; font-size: 14px; letter-spacing: .4px; text-transform: uppercase; color: #c9b79f; margin-bottom: 3px; }
.motd__text { font-size: 14.5px; line-height: 1.5; }

/* ---- Pizza du moment (accueil) / héro fiche ---------------------------- */
.featured { position: relative; margin-top: 22px; background: var(--ink); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-panel); color: var(--cream); }
.featured__glow { position: absolute; inset: 0; background-image: radial-gradient(circle at 88% 8%, rgba(211,162,115,.28), transparent 46%), radial-gradient(circle at 4% 96%, rgba(154,171,147,.22), transparent 44%); }
.featured__wm { position: absolute; top: 0; right: 20px; font-family: var(--font-title); font-weight: 800; font-size: 150px; line-height: .8; color: rgba(244,237,224,.05); letter-spacing: -6px; user-select: none; pointer-events: none; }
.featured__body { position: relative; padding: 22px 24px 26px; }
.featured__kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.featured__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); }
.featured__label { font-family: var(--font-title); font-weight: 700; font-size: 11.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--terracotta-soft); }
.featured__period { font-family: var(--font-title); font-weight: 700; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: rgba(244,237,224,.55); padding-left: 10px; border-left: 1px solid rgba(244,237,224,.2); }
.featured__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.featured__name { font-family: var(--font-title); font-weight: 800; font-size: 44px; line-height: .95; letter-spacing: -1px; }
.featured__price { font-family: var(--font-title); font-weight: 700; font-size: 24px; color: var(--green-soft); white-space: nowrap; }
.featured__pitch { font-size: 14.5px; line-height: 1.5; color: rgba(244,237,224,.72); margin-top: 10px; }
.featured__cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; font-family: var(--font-title); font-weight: 700; font-size: 14px; color: var(--terracotta); }

.ing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; margin-top: 18px; }
.featured .ing-grid { margin-top: 20px; }
.ing { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid rgba(244,237,224,.1); font-size: 14px; color: #e4dccc; }
.ing__b { color: var(--terracotta); font-size: 10px; }

/* ---- Slider « nos pizzas » (accueil) ----------------------------------- */
.slider { scroll-margin-top: 16px; margin-top: 30px; }
.slider__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 2px 14px; }
.slider__title { font-family: var(--font-title); font-weight: 800; font-size: 22px; letter-spacing: -.3px; }
.slider__sub { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.slider__nav { display: flex; gap: 7px; flex-shrink: 0; }
.slider__btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-soft); background: var(--card); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.slider__btn:hover { background: #f2e8d7; }
.slider__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 2px 2px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__more { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; padding: 14px; border-radius: var(--r-sm); border: 1.5px dashed #cdbfa4; background: transparent; font-family: var(--font-title); font-weight: 700; font-size: 15px; color: var(--text-mid); transition: background .15s ease, border-color .15s ease; }
.slider__more:hover { background: var(--card-alt); border-color: #b9a883; }

/* ---- Carte pizza (slider) & tuile (grille menu) ------------------------ */
.pizza-card { scroll-snap-align: start; flex: 0 0 208px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.pizza-card--dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pizza-card__photo { position: relative; height: 118px; display: flex; align-items: center; justify-content: center; }
.pizza-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.pizza-card__name { font-family: var(--font-title); font-weight: 800; font-size: 19px; letter-spacing: -.2px; }
.pizza-card__desc { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin-top: 6px; flex: 1; }
.pizza-card--dark .pizza-card__desc { color: #c3bbac; }
.pizza-card__price { font-family: var(--font-title); font-weight: 700; font-size: 17px; color: var(--green); margin-top: 11px; }
.pizza-card--dark .pizza-card__price { color: var(--green-soft); }

/* tons de fond « photo à venir » (partagés carte + tuile) */
.ph-label { font-family: monospace; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ph-text, #96a08c); }
.tone--green { background: #eef1ea; background-image: repeating-linear-gradient(135deg, rgba(154,171,147,.20) 0 11px, transparent 11px 22px); --ph-text: #96a08c; }
.tone--blue  { background: #e9f0f2; background-image: repeating-linear-gradient(135deg, rgba(87,134,160,.18) 0 11px, transparent 11px 22px); --ph-text: #8aa4b3; }
.tone--tan   { background: #f4ebe0; background-image: repeating-linear-gradient(135deg, rgba(211,162,115,.22) 0 11px, transparent 11px 22px); --ph-text: #bb9c7c; }
.tone--dark  { background: var(--ink-soft); background-image: repeating-linear-gradient(135deg, rgba(211,162,115,.20) 0 11px, transparent 11px 22px); --ph-text: #8a7f70; }
.ph-badge { position: absolute; top: 9px; left: 9px; background: var(--terracotta); color: var(--ink); font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 9px; border-radius: var(--r-pill); }

/* ---- Liens link-in-bio (accueil) --------------------------------------- */
.divider { display: flex; align-items: center; gap: 10px; margin: 26px 2px 13px; }
.divider__label { font-family: var(--font-title); font-weight: 700; font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--sand); }
.divider__line { flex: 1; height: 1px; background: var(--border-soft); }
.link-list { display: flex; flex-direction: column; gap: 9px; }

.link-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 13px 15px; display: flex; align-items: center; gap: 14px; }
.link-card--accent { background: #eef4ea; border-color: #cfe0c6; }
.link-card__icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.link-card__text { flex: 1; min-width: 0; }
.link-card__title { display: block; font-weight: 600; font-size: 15.5px; }
.link-card__sub { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }
.link-card--accent .link-card__sub { color: var(--green); }
/* fonds d'icône nommés (liens, panneaux, sections légales) */
.ic-green { background: #eef2ea; }
.ic-blue  { background: #eaf1f4; }
.ic-warm  { background: var(--warm-bg); }
.ic-wa    { background: #dcebd3; }

.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.social { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 13px 15px; display: flex; align-items: center; gap: 12px; }
.social__icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.social__initial { font-family: var(--font-title); font-weight: 800; color: var(--sand); }
.social__label { font-weight: 600; font-size: 14.5px; }

/* ---- CTA Click & Collect ----------------------------------------------- */
.cta { display: block; margin-top: 16px; background: var(--ink); color: var(--cream); border-radius: var(--r-panel); padding: 20px 22px; box-shadow: var(--shadow-cta); }
.cta--home { scroll-margin-top: 16px; margin-top: 28px; }
.cta__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cta__left { display: flex; align-items: center; gap: 14px; }
.cta__icon { width: 46px; height: 46px; border-radius: 14px; background: var(--terracotta); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cta__title { font-family: var(--font-title); font-weight: 800; font-size: 19px; }
.cta__sub { font-size: 13.5px; color: #b9b1a4; margin-top: 1px; }
.cta-note { margin: 11px 4px 0; font-size: 13px; line-height: 1.6; color: #7a7367; text-align: center; }
.cta-note a { color: var(--terracotta-link); font-weight: 600; border-bottom: 1.5px solid #e2c6a8; }

/* ---- Titres de page (carte, contact, légales) -------------------------- */
.page-head { margin: 14px 0 6px; }
.page-head--roomy { margin: 20px 0 6px; }
.page-title { font-family: var(--font-title); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -1px; }
.page-lede { margin: 9px 0 0; max-width: 460px; font-size: 14.5px; line-height: 1.6; color: var(--text-soft); }

/* ---- Carte : légende, catégories, tuiles ------------------------------- */
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.legend__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); }
.legend__tag--veg { color: var(--green-deep); background: #eaf1e6; border: 1px solid #cfe0c6; }
.legend__tag--spicy { color: var(--red); background: #f7e6df; border: 1px solid #ecc9bd; }
.legend__tag--sig { color: #8a6f2f; background: #f5ecd6; border: 1px solid #e6d5a8; }
.legend__ico { font-size: 11px; }

.menu-cat { margin-top: 34px; }
.menu-cat__head { display: flex; align-items: center; gap: 12px; margin: 0 2px 15px; }
.menu-cat__kicker { font-family: var(--font-title); font-weight: 700; font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--sand); }
.menu-cat__label { margin: 3px 0 0; font-family: var(--font-title); font-weight: 800; font-size: 22px; letter-spacing: -.3px; }
.menu-cat__line { flex: 1; height: 1px; background: var(--border-soft); margin-top: 12px; }
.pizza-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }

.pizza-tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.pizza-tile--dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pizza-tile__photo { position: relative; height: 108px; display: flex; align-items: center; justify-content: center; }
.pizza-tile__body { padding: 13px 15px 15px; display: flex; flex-direction: column; flex: 1; }
.pizza-tile__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pizza-tile__name { font-family: var(--font-title); font-weight: 800; font-size: 18px; letter-spacing: -.2px; line-height: 1.05; }
.pizza-tile__tags { display: flex; gap: 4px; }
.pizza-tile__desc { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin-top: 7px; flex: 1; }
.pizza-tile--dark .pizza-tile__desc { color: #c3bbac; }
.pizza-tile__price { font-family: var(--font-title); font-weight: 700; font-size: 17px; color: var(--green); margin-top: 11px; }
.pizza-tile--dark .pizza-tile__price { color: var(--green-soft); }
.tagchip { flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.tagchip--veg { background: #eaf1e6; border: 1px solid #cfe0c6; }
.tagchip--spicy { background: #f7e6df; border: 1px solid #ecc9bd; }

/* ---- Fiche pizza ------------------------------------------------------- */
.pizza-hero { position: relative; margin-top: 14px; background: var(--ink); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-panel); color: var(--cream); }
.pizza-hero__photo { position: relative; height: 210px; background: var(--ink-soft); background-image: repeating-linear-gradient(135deg, rgba(211,162,115,.20) 0 12px, transparent 12px 24px); display: flex; align-items: center; justify-content: center; }
.pizza-hero__ph-label { font-family: monospace; font-size: 11px; letter-spacing: 1px; color: #8a7f70; text-transform: uppercase; }
.ph-badge--lg { top: 12px; left: 12px; padding: 5px 11px; }
.pizza-hero__tagline { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: #d8d0c2; }
.meta-chips { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; margin-top: 14px; }
.meta-chip { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 12px; text-align: center; }
.meta-chip__v { font-family: var(--font-title); font-weight: 800; font-size: 19px; color: var(--text-strong); }
.meta-chip__l { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* ---- Suppléments (fiche pizza) — carte « dot leader » type trattoria ---- */
.supp { margin-top: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 20px 22px; }
.supp__title { margin: 3px 0 0; font-family: var(--font-title); font-weight: 800; font-size: 22px; letter-spacing: -.3px; }
.supp__intro { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.supp__list { list-style: none; margin: 16px 0 0; padding: 0; }
.supp-item { padding: 12px 0; border-top: 1px solid var(--hairline); }
.supp-item:first-child { border-top: none; padding-top: 2px; }
.supp-item__line { display: flex; align-items: baseline; }
.supp-item__name { font-family: var(--font-title); font-weight: 700; font-size: 16.5px; color: var(--text-strong); }
.supp-item__lead { flex: 1; min-width: 18px; margin: 0 8px; border-bottom: 2px dotted #d7c8ad; transform: translateY(-4px); }
.supp-item__price { font-family: var(--font-title); font-weight: 700; font-size: 16.5px; color: var(--green); white-space: nowrap; }
.supp-item__detail { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }

.back-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 14px; border-radius: var(--r-sm); border: 1.5px dashed #cdbfa4; background: transparent; font-family: var(--font-title); font-weight: 700; font-size: 15px; color: var(--text-mid); transition: background .15s ease, border-color .15s ease; }
.back-cta:hover { background: var(--card-alt); border-color: #b9a883; }
.back-cta--tight { margin-top: 10px; }

/* ---- Utilitaires de marge --------------------------------------------- */
.u-mt10 { margin-top: 10px; }
.u-mt14 { margin-top: 14px; }
.u-mt16 { margin-top: 16px; }
.u-mt26 { margin-top: 26px; }

/* ---- Contact : chips, panneaux, formulaire, carte ---------------------- */
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }
.chip { border-radius: var(--r-md); padding: 15px 16px; display: flex; align-items: center; gap: 12px; }
.chip--dark { background: var(--ink); color: var(--cream); box-shadow: var(--shadow-chip); }
.chip--light { background: var(--card); border: 1px solid var(--border); }
.chip__icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chip__body { min-width: 0; }
.chip__k { display: block; font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; }
.chip--dark .chip__k { color: #b9b1a4; }
.chip--light .chip__k { color: #a59b88; }
.chip__v { display: block; font-family: var(--font-title); font-weight: 700; font-size: 15.5px; }
.chip--light .chip__v { font-size: 14px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; }
.ic-terra { background: var(--terracotta); }

.panel { margin-top: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 20px 22px; }
.panel--form { padding: 22px; }
.panel__head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.panel__head--mb16 { margin-bottom: 16px; }
.panel__icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.panel__title { margin: 0; font-family: var(--font-title); font-weight: 800; font-size: 18px; letter-spacing: -.2px; }

.form-success { display: flex; align-items: center; gap: 10px; background: #eaf1e6; border: 1px solid #cfe0c6; color: var(--green-deep); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; }
.form-error { display: flex; align-items: center; gap: 10px; background: #fbeae4; border: 1px solid #eecabb; color: #a8471f; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; }
.form-error .ico { flex: 0 0 auto; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--mt { margin-top: 11px; }
.field__label { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.field__label--row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.field__opt { color: #b0a894; font-weight: 400; }
.field__count { font-size: 12px; font-weight: 600; color: #a59b88; }
.field__input { padding: 11px 13px; border-radius: 11px; border: 1px solid var(--field-border); background: var(--field-bg); font-size: 14.5px; color: var(--ink); width: 100%; box-sizing: border-box; font-family: inherit; }
.field__input::placeholder { color: #b0a894; }
.field__input:focus { outline: none; border-color: var(--terracotta-link); background: var(--card); }
textarea.field__input { line-height: 1.55; resize: vertical; min-height: 96px; }
select.field__input { cursor: pointer; }
.btn-send { margin-top: 16px; width: 100%; padding: 15px; border-radius: 14px; border: none; background: var(--ink); color: var(--cream); font-family: var(--font-title); font-weight: 700; font-size: 15.5px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; }
.btn-send__label, .btn-send__loading { display: inline-flex; align-items: center; gap: 9px; }
.btn-send__loading { display: none; }
/* État « envoi en cours » posé par le contrôleur Stimulus sur le formulaire */
form.is-submitting .btn-send { pointer-events: none; opacity: .82; cursor: progress; }
form.is-submitting .btn-send__label { display: none; }
form.is-submitting .btn-send__loading { display: inline-flex; }
.btn-send__spinner { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: var(--cream); animation: gSpin .7s linear infinite; }
@keyframes gSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-send__spinner { animation-duration: 1.6s; } }
.form-hint { margin: 11px 0 0; font-size: 12px; line-height: 1.55; color: #a59b88; text-align: center; }

.map { position: relative; height: 210px; border-radius: 14px; overflow: hidden; border: 1px solid var(--field-border); background: #e9f0f2; background-image: repeating-linear-gradient(135deg, rgba(87,134,160,.14) 0 11px, transparent 11px 22px); }
.map__canvas { position: absolute; inset: 0; z-index: 1; }
.map__canvas.leaflet-container { background: transparent; }                       /* laisse voir le placeholder hachuré pendant le chargement des tuiles */
.map__marker { background: transparent; border: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.map__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); z-index: 0; }
.map__open { position: absolute; left: 12px; bottom: 12px; z-index: 1000; background: var(--card); border: 1px solid var(--field-border); border-radius: var(--r-pill); padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--text-mid); text-decoration: none; display: flex; align-items: center; gap: 6px; }
.map .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, .78); }
.map .leaflet-control-zoom a { color: var(--text-mid); }
.access { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: var(--text-mid); }
.access__row { display: flex; gap: 10px; align-items: flex-start; }
.access__sub { color: var(--text-muted); font-size: 13px; }

/* ---- Mentions légales -------------------------------------------------- */
.legal-list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.legal-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 20px 22px; }
.legal-section--warm { background: var(--warm-bg); border-color: var(--warm-border); }
.legal-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-top: 1px solid var(--hairline); font-size: 14px; }
.legal-row__k { color: var(--text-muted); flex-shrink: 0; }
.legal-row__v { text-align: right; color: var(--text-strong); font-weight: 600; }
.legal-hint { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }
.legal-text { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-mid); }
.legal-text a { color: var(--terracotta-link); }
.legal-text strong { color: var(--text-strong); }
.legal-med { display: flex; gap: 11px; align-items: flex-start; }
.legal-med__title { margin: 0 0 6px; font-family: var(--font-title); font-weight: 800; font-size: 16px; letter-spacing: -.2px; color: var(--warm-strong); }
.legal-med__text { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--warm-text); }
.legal-med__text a { color: var(--red); border-bottom: 1.5px solid #e2c6a8; }

/* ---- Page d'erreur ----------------------------------------------------- */
.error-card { position: relative; margin-top: 20px; background: var(--ink); color: var(--cream); border-radius: 26px; overflow: hidden; box-shadow: 0 26px 60px -28px rgba(42,49,56,.7); }
.error-card__glow { position: absolute; inset: 0; background-image: radial-gradient(circle at 86% 10%, rgba(211,162,115,.26), transparent 46%), radial-gradient(circle at 6% 96%, rgba(154,171,147,.20), transparent 44%); }
.error-card__wm { position: absolute; top: -18px; right: 18px; font-family: var(--font-title); font-weight: 800; font-size: 210px; line-height: .8; color: rgba(244,237,224,.05); letter-spacing: -8px; user-select: none; pointer-events: none; }
.error-card__body { position: relative; padding: 38px 30px 34px; text-align: center; }
.error-card__emblem { width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 24px; background: var(--cream); display: flex; align-items: center; justify-content: center; animation: gFloat 4s ease-in-out infinite; box-shadow: 0 16px 34px -16px rgba(0,0,0,.5); }
.error-card__emblem img { height: 52px; width: auto; display: block; }
.error-card__pill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; background: rgba(244,237,224,.08); border: 1px solid rgba(244,237,224,.14); padding: 6px 13px 6px 11px; border-radius: var(--r-pill); }
.error-card__pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); animation: gPulse 1.8s ease-in-out infinite; }
.error-card__pill-label { font-family: var(--font-title); font-weight: 700; font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--terracotta-soft); }
.error-card__title { font-family: var(--font-title); font-weight: 800; font-size: 34px; line-height: 1.02; letter-spacing: -1px; }
.error-card__msg { margin: 13px auto 0; max-width: 420px; font-size: 15px; line-height: 1.6; color: #c3bbac; }
.error-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.btn-primary { display: inline-flex; align-items: center; gap: 9px; padding: 14px 22px; border-radius: 14px; background: var(--terracotta); color: var(--ink); font-family: var(--font-title); font-weight: 700; font-size: 15px; }
.btn-ghost { display: inline-flex; align-items: center; gap: 9px; padding: 14px 22px; border-radius: 14px; background: transparent; border: 1.5px solid rgba(244,237,224,.22); color: var(--cream); font-family: var(--font-title); font-weight: 700; font-size: 15px; }
.help-strip { margin-top: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.help-strip__icon { width: 44px; height: 44px; border-radius: 13px; background: var(--warm-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.help-strip__body { flex: 1; min-width: 0; }
.help-strip__title { font-family: var(--font-title); font-weight: 700; font-size: 15px; }
.help-strip__sub { font-size: 13px; color: var(--text-muted); margin-top: 1px; }
.help-strip__cta { flex-shrink: 0; padding: 11px 16px; border-radius: 12px; background: var(--ink); color: var(--cream); font-family: var(--font-title); font-weight: 700; font-size: 14px; }

/* ---- Icônes (retrait des styles inline) -------------------------------- */
.ico { flex-shrink: 0; }
.ico--t1 { flex-shrink: 0; margin-top: 1px; }
.ico--t2 { flex-shrink: 0; margin-top: 2px; }

/* ---- Animations -------------------------------------------------------- */
@keyframes gPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes gRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes gFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(-3deg); } }

/* ============ Bannière cookies ============ */
@keyframes ckRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ckFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ckChipIn { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ckChipOut { 0% { opacity: 1; transform: none; } 35% { transform: translateY(-6px) rotate(-4deg) scale(1.05); } 100% { opacity: 0; transform: translateY(30px) rotate(8deg) scale(.7); } }

.cookie-zone { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 16px; pointer-events: none; }
.cookie-zone > * { pointer-events: auto; }
/* L'attribut [hidden] doit l'emporter sur les display: explicites ci-dessous. */
.cookie-zone [hidden] { display: none !important; }

.cookie-banner { width: 100%; max-width: 560px; position: relative; background: #fffdf8;
    border: 1px solid #e7ddca; border-radius: 24px;
    box-shadow: 0 26px 60px -24px rgba(42,49,56,.5); padding: 24px 24px 22px;
    animation: ckRise .45s cubic-bezier(.2,.8,.25,1) both; overflow: hidden; }
.cookie-banner__ghost { position: absolute; top: -26px; right: 14px; font-size: 150px;
    line-height: 1; user-select: none; pointer-events: none; opacity: .06; }
.cookie-banner__head { position: relative; display: flex; gap: 16px; align-items: flex-start; }
.cookie-banner__head-body { flex: 1; min-width: 0; }
.cookie-banner__badge { width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px;
    background: #f6ece1; display: flex; align-items: center; justify-content: center;
    font-size: 28px; animation: ckFloat 4s ease-in-out infinite; }
.cookie-banner__eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 11px;
    letter-spacing: 2px; text-transform: uppercase; color: #a08d72; }
.cookie-banner__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: #d3a273; }
.cookie-banner__title { margin: 0; font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800; font-size: 22px; line-height: 1.1; letter-spacing: -.4px; }
.cookie-banner__text { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: #6b6459; }

.cookie-prefs { position: relative; margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.cookie-pref { display: flex; align-items: center; gap: 13px; background: #fffdf8;
    border: 1px solid #e7ddca; border-radius: 14px; padding: 13px 15px; width: 100%;
    text-align: left; cursor: pointer; }
.cookie-pref--locked { background: #f7f1e6; border-color: #ece2cf; cursor: default; }
.cookie-pref__emoji { font-size: 20px; flex-shrink: 0; }
.cookie-pref__body { flex: 1; min-width: 0; }
.cookie-pref__name { font-weight: 600; font-size: 14.5px; }
.cookie-pref__desc { font-size: 12.5px; color: #8a8377; margin-top: 1px; }
.cookie-pref__tag { flex-shrink: 0; font-size: 12px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: #8a9a82; background: #eef2ea; border: 1px solid #d8e3d0;
    padding: 6px 11px; border-radius: 100px; }

.ck-switch { flex-shrink: 0; width: 44px; height: 26px; border-radius: 100px;
    background: #d8ceba; position: relative; transition: background .18s ease; border: none; }
.ck-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: #fffdf8; box-shadow: 0 2px 5px rgba(0,0,0,.2);
    transition: left .18s ease; }
.ck-switch.is-on { background: #5c8a49; }
.ck-switch.is-on::after { left: 21px; }

.cookie-actions { position: relative; margin-top: 18px; display: flex; flex-wrap: wrap;
    gap: 10px; align-items: center; }
.cookie-btn { flex: 1; min-width: 150px; cursor: pointer; border: none; padding: 15px 20px;
    border-radius: 14px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
    font-size: 15px; transition: transform .15s ease, background .15s ease; }
.cookie-btn:hover { transform: translateY(-2px); }
.cookie-btn--accept { background: #d3a273; color: #2a3138; }
.cookie-btn--accept:hover { background: #e0b184; }
.cookie-btn--refuse { background: #2a3138; color: #f4ede0; }
.cookie-btn--refuse:hover { background: #20262c; }
.cookie-link { display: block; text-align: center; margin-top: 12px; cursor: pointer;
    background: none; border: none; font-family: 'DM Sans', sans-serif; font-size: 13.5px;
    font-weight: 600; color: #8a8377; text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: #d9cdb7; width: 100%; }

.cookie-chip { display: inline-flex; align-items: center; gap: 9px; background: #fffdf8;
    border: 1px solid #e7ddca; border-radius: 100px; padding: 11px 17px 11px 14px;
    box-shadow: 0 14px 30px -18px rgba(42,49,56,.5); font-family: 'DM Sans', sans-serif;
    font-weight: 600; font-size: 13.5px; color: #5f584d; cursor: pointer;
    transition: transform .15s ease; }
.cookie-chip:hover { transform: translateY(-2px); }
.cookie-chip__emoji { font-size: 18px; }
.cookie-chip--in { animation: ckChipIn .4s cubic-bezier(.2,.8,.25,1) both; }
.cookie-chip--out { animation: ckChipOut .55s cubic-bezier(.5,-0.2,.8,.6) both; }

/* Bouton "Gérer mes cookies" de la page mentions légales */
.cookie-manage-btn { margin-top: 16px; display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 18px; border: none; border-radius: 13px; background: #d3a273; color: #2a3138;
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 14.5px;
    cursor: pointer; transition: transform .15s ease, background .15s ease; }
.cookie-manage-btn:hover { transform: translateY(-2px); background: #e0b184; }