/* Feuille de style du site Le Hangar 27.
   Sortie du <style> de index.html le 2026-08-17 : le site compte desormais
   deux pages, et une CSP stricte en production interdit les styles en ligne.
   Les chemins sont relatifs a ce fichier (assets/site.css), d'ou les ../ */

    /* Fonts self-hostées (RGPD) — variables, subset latin */
    @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../assets/fonts/oswald.woff2') format('woff2'); }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../assets/fonts/inter.woff2') format('woff2'); }
    @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('../assets/fonts/caveat.woff2') format('woff2'); }
    /* Une seule manuscrite (Caveat) — Shadows Into Light Two retirée le 05/07 (deux manuscrites se concurrençaient) */

    :root {
      /* Palette eclaircie (2026-08-17). Le bois n'est plus un fond de section :
         il ne subsiste que sur l'en-tete, le pied de page et l'ardoise de la
         carte. Les sections alternent creme et lin ; la rouille est inchangee. */
      /* Brun eclairci le 17/08 : le #4a3728 precedent etait juge agressif.
         Ce ton reste chaud et boise, mais cesse de peser. Blanc dessus : 6,7:1. */
      --wood-dark: #6b5544;   /* en-tete, bandeau utilitaire, pied de page */
      --wood: #7d6553;
      --rust: #c0492f;        /* accent, inchange */
      --rust-dark: #9c3623;
      --cream: #faf6f0;       /* fond clair dominant */
      --linen: #f0e7da;       /* fond clair alterne */
      --sand: #e6d7bf;        /* pastilles et lisereus */
      --ink: #2b241c;
      --muted: #6f6253;
      --shadow: 0 18px 50px -20px rgba(40, 26, 14, .5);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    /* `clip` et non `hidden` : le menu mobile fermé attend hors écran à droite
       (translateX(100%)) et étirait la zone de défilement de 8px. `clip` la
       coupe sans créer de conteneur de défilement (sticky et ancres intacts). */
    html { scroll-behavior: smooth; overflow-x: clip; }
    /* Le header est fixe : sans cette marge, un lien d'ancre place le titre de
       section SOUS le header. Hauteur repliée ~62px + respiration. */
    section[id], [id]:target { scroll-margin-top: 88px; }
    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--ink);
      background: var(--cream);
      line-height: 1.6;
      overflow-x: hidden;
    }
    h1, h2, h3, .display { font-family: 'Oswald', sans-serif; font-weight: 600; line-height: 1.05; }
    a { color: inherit; text-decoration: none; }
    .wrap { width: min(1180px, 92vw); margin: 0 auto; }
    .eyebrow {
      font-family: 'Oswald', sans-serif; text-transform: uppercase;
      letter-spacing: .28em; font-size: .78rem; font-weight: 500; color: var(--rust-dark); /* AA : 6:1 sur crème */
    }
    .btn {
      display: inline-flex; align-items: center; gap: .55rem;
      font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .12em;
      font-weight: 500; font-size: .95rem; padding: .85rem 1.6rem; border-radius: 2px;
      min-height: 48px; /* cible tactile confortable, au-delà des 44px requis */
      transition: transform .18s ease-out, background .18s ease-out, color .18s ease-out; cursor: pointer; border: none;
    }
    .btn-primary { background: var(--rust); color: #fff; }
    .btn-primary:hover { background: var(--rust-dark); transform: translateY(-2px); }
    /* Bouton fantome — deux contextes. Par defaut il vit sur une photo sombre
       (hero, repere) : blanc sur bord blanc. Sur une section claire, du blanc
       sur du lin devient invisible : il repasse en rouille. */
    /* Bouton fantome. Par DEFAUT sur fond clair : depuis l'eclaircissement de la
       palette c'est le cas courant, et l'ancienne liste blanche de sections
       sombres en oubliait deux — « Voir la carte en grand » et « Retour a
       l'accueil » etaient du blanc sur creme, a 1,08:1. Invisibles.
       Le blanc est desormais l'EXCEPTION, nommee par contexte sombre. */
    .btn-ghost { background: transparent; color: var(--rust-dark); border: 1px solid var(--rust-dark); }
    .btn-ghost:hover { background: rgba(156,54,35,.09); transform: translateY(-2px); }
    .hero .btn-ghost, .repere .btn-ghost, .carte .btn-ghost, .giftcard .btn-ghost {
      color: #fff; border-color: rgba(255,255,255,.6);
    }
    .hero .btn-ghost:hover, .repere .btn-ghost:hover, .carte .btn-ghost:hover, .giftcard .btn-ghost:hover {
      background: rgba(255,255,255,.14);
    }

    /* HEADER + LOGO */
    header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 50;
      display: flex; flex-direction: column;
      transition: background .3s ease-out, box-shadow .3s ease-out;
    }
    .header-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem clamp(1rem, 4vw, 3rem);
      transition: padding .3s ease-out;
    }
    /* Bandeau utilitaire : replie au defilement plutot que masque, pour que la
       transition soit continue et n'agisse pas comme un saut. */
    /* Bandeau utilitaire : ce qu'un client cherche avant tout le reste. Picto,
       information principale et precision en dessous — lisible d'un coup d'oeil
       plutot qu'en petites capitales serrees. Replie au defilement. */
    .utilbar {
      /* Repartition sur toute la largeur : trois entrees a gauche et deux collees
         a droite donnaient l'impression qu'il en manquait une au milieu. */
      display: flex; align-items: stretch; justify-content: space-between;
      gap: clamp(.9rem, 2vw, 2rem);
      padding: 0 clamp(1rem, 4vw, 3rem);
      background: var(--wood-dark);
      overflow: hidden; max-height: 72px; opacity: 1;
      transition: max-height .3s ease-out, opacity .25s ease-out;
    }
    header.scrolled .utilbar { max-height: 0; opacity: 0; }
    .util-item {
      display: flex; align-items: center; gap: .7rem;
      padding: .8rem 0; color: #fff; min-height: 44px;
    }
    .util-ico {
      display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px;
      border-radius: 8px; background: rgba(255,255,255,.12);
      transition: background .2s ease-out;
    }
    .util-ico svg { width: 18px; height: 18px; display: block; }
    a.util-item:hover .util-ico { background: var(--rust); }
    .util-txt { display: flex; flex-direction: column; line-height: 1.25; }
    .util-txt strong { font-weight: 500; font-size: .92rem; white-space: nowrap; }
    .util-txt small { font-size: .76rem; color: rgba(255,255,255,.86); white-space: nowrap; }

    /* On retire de gauche a droite selon la place : d'abord l'email, puis
       l'adresse. Le telephone et les horaires ne partent jamais. */
    /* Ordre de retrait quand la place manque. Le telephone et les horaires ne
       partent jamais : ce sont les deux seules choses qu'on cherche en roulant. */
    @media (max-width: 1600px) { .util-mail { display: none; } }
    @media (max-width: 1320px) { .util-adr { display: none; } }
    @media (max-width: 1040px) { .util-rec { display: none; } }
    @media (max-width: 820px)  { .util-rou { display: none; } }
    .u-court { display: none; }
    /* Pastille d'ouverture. Le vert et le gris sont choisis pour passer 4,5:1
       sur le brun du bandeau, pas pour faire joli. */
    .etat { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; }
    .etat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    .etat-ouvert { color: #a8e6ac; }
    .etat-ferme { color: #f2cfc2; }
    @media (max-width: 560px)  {
      .utilbar { gap: .8rem; max-height: 56px; }
      .util-txt small { display: none; }
      .util-txt strong { font-size: .82rem; }
      .util-ico { flex-basis: 30px; width: 30px; height: 30px; }
      /* Libelle court : « Midi : lundi au vendredi » debordait et se faisait
         couper en silence par l'overflow du bandeau. */
      .u-long { display: none; }
      .u-court { display: inline; }
    }
    /* Le titre Horaires est une cible d'ancre : il doit passer sous l'en-tete fixe. */
    #horaires, #recrutement, #routiers { scroll-margin-top: 120px; }

    .logo { display: flex; flex-direction: column; justify-content: center; min-height: 44px; line-height: 1; color: #fff; }
    /* Le logo dessine remplace l'ancien logo typographique. Hauteur fixe, largeur
       calculee par le ratio du viewBox : jamais de deformation. */
    .logo-mark { display: block; height: 42px; width: auto; }
    .logo-mark-lg { height: 58px; }
    @media (max-width: 560px) { .logo-mark { height: 36px; } }
    .logo .pre { font-family: 'Oswald', sans-serif; font-weight: 300; text-transform: uppercase; letter-spacing: .42em; font-size: .58rem; opacity: .85; margin-left: .15em; }
    .logo .main { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 1.4rem; margin-top: .12rem; }
    .logo .main em { font-style: normal; color: var(--rust); }
    nav.main { display: flex; align-items: center; gap: 1.9rem; }
    nav.main a {
      color: #fff; font-family: 'Oswald', sans-serif; text-transform: uppercase;
      letter-spacing: .12em; font-size: .82rem; font-weight: 400; opacity: .92; position: relative;
      /* 32px de haut : le texte seul ne faisait que 21px, sous le minimum de
         24px exigé pour une cible de pointage (WCAG 2.5.8). */
      display: inline-flex; align-items: center; min-height: 32px;
    }
    nav.main a::after { content: ''; position: absolute; left: 0; bottom: 2px; width: 0; height: 2px; background: var(--rust); transition: width .2s ease-out; }
    nav.main a:hover::after { width: 100%; }
    .header-right { display: flex; align-items: center; gap: 1.1rem; }
    .header-book.btn { padding: .55rem 1.25rem; font-size: .85rem; min-height: 44px; }
    .burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; width: 44px; height: 44px; }
    .burger span { width: 26px; height: 2px; background: #fff; }


    /* RUBAN DEFILANT */
    .ruban {
      background: var(--rust); color: #fff; overflow: hidden;
      /* `flex` + `width: max-content` : la piste fait la largeur de son contenu,
         condition pour que translateX(-50%) tombe pile sur la seconde copie. */
    }
    .ruban-piste {
      display: flex; width: max-content;
      animation: defile 34s linear infinite;
    }
    /* WCAG 2.2.2 : un contenu qui bouge plus de 5 s doit pouvoir etre arrete.
       Le survol ne suffit pas — le focus clavier arrete aussi le ruban. */
    .ruban:hover .ruban-piste, .ruban:focus-within .ruban-piste { animation-play-state: paused; }
    .ruban-item {
      font-family: 'Oswald', sans-serif; font-weight: 400;
      text-transform: uppercase; letter-spacing: .14em;
      font-size: clamp(.78rem, 1.5vw, .95rem);
      padding: .95rem 2.5rem .95rem 0; white-space: nowrap;
    }
    /* Separateur entre deux passages, pour que la boucle se lise comme un ruban
       et non comme une phrase qui begaie. */
    .ruban-item::after { content: '·'; margin-left: 2.5rem; opacity: .65; }
    @keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* HERO */
    /* `overflow: hidden` : sans lui, le fond agrandi debordait sous la section et
       laissait une bande claire non voilee entre le hero et le bloc creme. */
    .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; isolation: isolate; overflow: hidden; }
    .hero::before {
      content: ''; position: absolute; inset: 0; z-index: -2;
      background: url('../assets/salle-hero.webp') center/cover no-repeat;
      transform: scale(1.04);
    }
    .hero::after {
      content: ''; position: absolute; inset: 0; z-index: -1;
      background: linear-gradient(180deg, rgba(20,16,12,.25) 0%, rgba(20,16,12,.12) 30%, rgba(28,20,14,.7) 78%, rgba(36,29,21,.95) 100%);
    }
    .hero .wrap { padding-top: 8rem; padding-bottom: 4rem; }
    .hero .eyebrow { color: #ffd9c9; }
        /* Une seule ligne a partir de 720px : la taille est calee pour que
       « A table, au bord des quais » tienne sans retour. En dessous, on laisse
       le titre revenir a la ligne plutot que de le rendre minuscule. */
    .hero h1 { font-size: clamp(1.9rem, 6vw, 4.9rem); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; margin: .6rem 0 .6rem; }
    @media (min-width: 720px) { .hero h1 { white-space: nowrap; } }
    .hero h1 .accent { color: var(--rust); }
    .hero .tagline { font-size: clamp(1.05rem, 2.2vw, 1.35rem); max-width: 42ch; opacity: .95; margin-bottom: 2rem; font-weight: 400; }
    /* Services pratiques : une ligne discrete sous le titre, en Oswald espace
       pour se lire comme une mention et non comme une phrase de vente.
       La marge negative d'avant compensait l'accroche, partie dans le ruban :
       sans elle, cette ligne remontait dans le titre. */
    .hero .tagline-services {
      font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .18em;
      font-size: clamp(.72rem, 1.4vw, .84rem); font-weight: 400; opacity: .9;
      margin-top: .4rem; margin-bottom: 2.2rem;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
    .scroll-cue { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-family: 'Oswald'; text-transform: uppercase; letter-spacing: .25em; font-size: .7rem; }
    .scroll-cue span { display: block; width: 1px; height: 34px; background: rgba(255,255,255,.5); margin: .6rem auto 0; animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
    @keyframes cue { 0%,100% { transform: scaleY(.3); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } }

    /* SECTIONS */
    section { padding: clamp(4rem, 9vw, 8rem) 0; }
    .section-head { max-width: 62ch; margin-bottom: 3rem; }
    .section-head h2 { font-size: clamp(2rem, 5vw, 3.2rem); text-transform: uppercase; margin: .4rem 0 .8rem; }
    .section-head p { color: var(--muted); font-size: 1.08rem; }

    /* SPLIT (maison / terrasses) */
    .split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
    .split-text h2 { font-size: clamp(2rem, 5vw, 3.2rem); text-transform: uppercase; margin: .5rem 0 1.2rem; }
    .split-text p { color: #3a2c1e; margin-bottom: 1.1rem; font-size: 1.06rem; }
    .split-figure { position: relative; }
    .split-figure img { width: 100%; height: 100%; max-height: 540px; object-fit: cover; border-radius: 3px; box-shadow: var(--shadow); }
    .split-figure .tag {
      position: absolute; bottom: -22px; left: -22px; background: var(--rust); color: #fff;
      font-family: 'Oswald'; text-transform: uppercase; letter-spacing: .1em; padding: 1rem 1.4rem; font-size: .95rem; line-height: 1.2; border-radius: 2px;
    }
    .split-figure .tag strong { font-size: 1.6rem; display: block; }
    .pills { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
    .pill { background: var(--sand); color: var(--wood-dark); font-family: 'Oswald'; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; padding: .5rem .9rem; border-radius: 2px; }
    .reverse .split-figure { order: -1; }
    .reverse .split-figure .tag { left: auto; right: -22px; }

    /* REPERE — slide bouée + slogan */
    .repere { position: relative; color: #fff; text-align: center; padding: clamp(5rem, 13vw, 9.5rem) 0; isolation: isolate; }
    .repere::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url('../assets/hero-buoy-sunset.webp') center/cover no-repeat; }
    .repere::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(28,18,12,.5); }
    .repere .eyebrow { color: #ffd9c9; }
    .repere-title { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(1.9rem, 5vw, 3rem); margin: .6rem 0 .5rem; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
    .repere-sub { color: rgba(245,239,228,.88); max-width: 46ch; margin: 0 auto 1.4rem; font-size: 1.06rem; }
    .repere blockquote { font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.2; max-width: 22ch; margin: 0 auto; color: #ffd9c9; text-shadow: 0 2px 20px rgba(0,0,0,.4); }

    /* BON CADEAU */
    .cadeau { background: var(--cream); }
    .cadeau .split-text p { color: #4a3a29; }
    .giftcard { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); transform: rotate(-2deg); color: #fff; max-width: 480px; margin: 0 auto; }
    .giftcard::before { content: ''; position: absolute; inset: 0; background: url('../assets/hero-buoy-sunset.webp') center/cover no-repeat; }
    .giftcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,14,10,.4), rgba(20,14,10,.72)); }
    .gc-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1.6rem; }
    .gc-pre { font-family: 'Oswald'; text-transform: uppercase; letter-spacing: .35em; font-size: .6rem; opacity: .9; }
    .gc-main { font-family: 'Oswald'; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 1.35rem; margin-bottom: .7rem; }
    .gc-main em { font-style: normal; color: #ff9c7e; }
    .gc-title { font-family: 'Caveat', cursive; font-weight: 700; font-size: 3rem; line-height: 1; }
    .gc-sub { font-family: 'Oswald'; text-transform: uppercase; letter-spacing: .15em; font-size: .68rem; opacity: .85; margin-top: .5rem; }

    /* CARTE — ardoise */
    .carte { background: var(--ink); color: var(--cream); position: relative; }
    .carte::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(245,239,228,.18); pointer-events: none; }
    .carte .section-head { text-align: center; margin-left: auto; margin-right: auto; }
    .carte .section-head h2 { color: var(--cream); }
    .carte .eyebrow { color: #f3a07f; }
    .carte-inner { text-align: center; max-width: 780px; margin: 0 auto; }
    .carte-title { font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(2.8rem, 7.5vw, 5rem); color: var(--cream); line-height: 1.04; margin: .6rem 0 1.3rem; }
    .carte-lead { color: rgba(245,239,228,.82); font-size: 1.12rem; max-width: 54ch; margin: 0 auto 1.6rem; }
    .carte-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
    /* Formule du soir — encart permanent au-dessus de la carte hebdo */
    .menu-soir { max-width: 560px; margin: 0 auto 2.6rem; border: 1px solid rgba(243,160,127,.55); background: rgba(243,160,127,.07); border-radius: 3px; padding: 1.25rem 1.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; text-align: left; }
    .ms-quand { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; color: #f3a07f; margin-bottom: .35rem; }
    .ms-quoi { font-weight: 600; color: var(--cream); font-size: 1.08rem; line-height: 1.3; }
    .ms-quoi .ms-detail { display: block; font-weight: 400; font-size: .9rem; color: rgba(244,236,224,.75); margin-top: .15rem; }
    .menu-matin { margin-bottom: 1.1rem; }
    .ms-prix { font-family: 'Caveat', cursive; font-weight: 700; font-size: 2.8rem; color: #f3a07f; line-height: 1; white-space: nowrap; }
    @media (max-width: 880px) { .menu-soir { flex-direction: column; text-align: center; gap: .7rem; } }
    /* Carte de la semaine affichée sur l'ardoise (format du vrai menu) */
    .menu-board { max-width: 560px; margin: 0 auto 2.4rem; text-align: left; }
    .menu-semaine { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .28em; font-size: .8rem; color: #f3a07f; text-align: center; margin-bottom: 1.4rem; }
    .menu-sec { margin-bottom: 1.9rem; }
    .menu-cat { font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.1rem); color: var(--cream); display: inline-block; border-bottom: 1px solid rgba(243,160,127,.5); padding: 0 .6rem .1rem 0; margin-bottom: .8rem; }
    .menu-cat .menu-prix { color: #f3a07f; }
    .menu-board ul { list-style: none; }
    .menu-board li { font-weight: 600; color: var(--cream); font-size: 1.02rem; line-height: 1.35; margin-bottom: .6rem; }
    .menu-board li small { display: block; font-weight: 400; font-size: .86rem; color: rgba(244,236,224,.72); margin-top: .1rem; }
    .menu-note { font-style: italic; font-weight: 600; text-align: center; font-size: .95rem; color: var(--cream); margin: 1.2rem 0 0; }
    .menu-mention { font-style: italic; font-size: .82rem; color: rgba(244,236,224,.6); text-align: center; margin-top: .5rem; }

    /* COTE CUISINE */
    .cuisine { background: var(--cream); }
    .cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
    .dish { background: #fff; border-radius: 3px; overflow: hidden; box-shadow: 0 12px 40px -22px rgba(40,26,14,.4); transition: transform .3s ease, box-shadow .3s ease; }
    .dish:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
    .dish img { width: 100%; height: 230px; object-fit: cover; display: block; }
    .dish .body { padding: 1.3rem 1.4rem 1.6rem; }
    .dish h3 { font-size: 1.4rem; text-transform: uppercase; margin-bottom: .4rem; }
    .dish p { color: var(--muted); font-size: .98rem; }

    /* SERVICES EN PAVES — un service = un titre, deux phrases, une action.
       Chaque pave repond a une question que se pose vraiment le client, au lieu
       de noyer l'information dans un paragraphe. */
    .services { background: var(--linen); color: var(--ink); }
    .services .eyebrow { color: var(--rust-dark); }
    .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }
    .service {
      background: #fff; border-radius: 4px; padding: 2rem 1.9rem 1.9rem;
      border-top: 3px solid var(--rust);
      box-shadow: 0 10px 34px -24px rgba(40,26,14,.5);
      display: flex; flex-direction: column;
      transition: transform .2s ease-out, box-shadow .2s ease-out;
    }
    .service:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -24px rgba(40,26,14,.55); }
    .service h3 { font-size: 1.35rem; text-transform: uppercase; margin-bottom: .6rem; color: var(--ink); }
    .service p { color: var(--muted); margin-bottom: 1.3rem; font-size: .98rem; }
    /* `margin-top: auto` : les boutons s'alignent en bas quel que soit le
       nombre de lignes de chaque pave. */
    .service .btn { margin-top: auto; align-self: flex-start; }
    .service-note { font-size: .84rem; color: var(--muted); margin-top: .9rem; font-style: italic; }

    /* INFOS & ACCES */
    .infos { background: var(--cream); }
    .infos-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
    .info-card h3 { font-size: 1.3rem; text-transform: uppercase; color: var(--rust-dark); margin: 1.6rem 0 .6rem; }
    .info-card h3:first-child { margin-top: 0; }
    .hours { list-style: none; }
    .hours li { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--sand); font-size: 1.02rem; }
    .hours li.closed { color: var(--muted); }
    .hours li strong { font-weight: 600; }
    .contact-line { font-size: 1.08rem; margin: .35rem 0; }
    .contact-line a { color: var(--wood-dark); font-weight: 500; }
    .info-note { margin-top: 1.4rem; padding: 1rem 1.1rem; background: var(--sand); border-radius: 3px; font-size: .95rem; color: #4a3a29; }
    .info-note strong { color: var(--rust-dark); text-transform: uppercase; font-family: 'Oswald', sans-serif; letter-spacing: .04em; }
    .info-note a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
    .service .btn { margin-top: 1.3rem; }
    .map { width: 100%; height: 100%; min-height: 360px; border: 0; border-radius: 3px; box-shadow: var(--shadow); filter: saturate(.92); }
    /* Façade RGPD : la carte Google ne charge qu'au clic */
    .map-facade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: var(--sand); text-align: center; padding: 2rem; filter: none; }
    .map-facade p { font-size: 1.05rem; line-height: 1.5; }
    .map-facade small { color: #5c5142; font-size: .78rem; max-width: 32ch; }
    .map-link { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--rust-dark); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
    .infos .btn-primary { margin-top: 1.6rem; }

    /* FOOTER */
    footer { background: var(--wood-dark); color: rgba(250,246,240,.82); padding: 3rem 0 2rem; }
    .footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; align-items: flex-start; }
    footer .f-contact { font-size: .98rem; line-height: 1.8; }
    footer a:hover { color: var(--rust); }
    .footer-bottom { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(245,239,228,.12); font-size: .82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }

    /* AVIS */
    .avis { background: var(--cream); }
    .avis .section-head { text-align: center; margin-left: auto; margin-right: auto; }
    .ratings { display: flex; justify-content: center; gap: 2.6rem; flex-wrap: wrap; margin-bottom: 2.8rem; }
    .rating { text-align: center; }
    a.rating { display: block; }
    a.rating .src { border-bottom: 1px solid transparent; transition: color .2s ease; }
    a.rating:hover .src { color: var(--rust); }
    .rating .score { font-family: 'Oswald'; font-weight: 700; font-size: 2.3rem; color: var(--rust); line-height: 1; }
    .rating .stars { color: #e0a82e; letter-spacing: 2px; font-size: 1rem; }
    .rating .src { font-family: 'Oswald'; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--muted); margin-top: .3rem; }
    .reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
    .review { background: #fff; border-radius: 3px; padding: 1.8rem; box-shadow: 0 12px 40px -22px rgba(40,26,14,.35); }
    .review .stars { color: #e0a82e; letter-spacing: 2px; font-size: 1rem; margin-bottom: .7rem; }
    .review p { font-style: italic; color: #3a2c1e; margin-bottom: 1rem; }
    .review .who { font-family: 'Oswald'; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--muted); }

    /* RESERVATION / CONTACT */
    .book { background: var(--linen); color: var(--ink); }
    .book .section-head h2 { color: var(--ink); }
    .book .section-head p { color: var(--muted); }
    .form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 760px; }
    .form .full { grid-column: 1 / -1; }
    .form label { display: block; font-family: 'Oswald'; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; margin-bottom: .35rem; color: var(--muted); }
    .form input, .form textarea, .form select { width: 100%; padding: .8rem .9rem; border: 1px solid #d8c9b2; background: #fff; color: var(--ink); border-radius: 2px; font-family: inherit; font-size: 1rem; }
    .form input:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--rust); outline-offset: 1px; }
    .form textarea { min-height: 110px; resize: vertical; }
    .form .actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
    .form .note { font-size: .85rem; color: var(--muted); }
    /* Champ piege a robots : sorti de l'ecran plutot que display:none, que
       certains robots savent detecter. Hors tabulation, hors lecteurs d'ecran. */
    .piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

    /* MOBILE NAV */
    /* Fermé : `visibility: hidden` sort les liens de l'ordre de tabulation —
       sans lui, le clavier navigue dans un menu invisible hors écran. */
    /* `visibility` bascule d'un coup (0s), pas en transition : à l'ouverture le
       panneau est immédiatement visible, donc focusable ; à la fermeture il ne
       redevient invisible qu'après la glissade (délai .28s). */
    .mobile-nav { position: fixed; inset: 0; z-index: 60; background: var(--wood-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.7rem; transform: translateX(100%); visibility: hidden; transition: transform .28s ease-out, visibility 0s linear .28s; }
    .mobile-nav.open { transform: none; visibility: visible; transition: transform .28s ease-out, visibility 0s; }
    .mobile-nav a { color: #fff; font-family: 'Oswald'; text-transform: uppercase; letter-spacing: .14em; font-size: 1.25rem; padding: .4rem 1rem; }
    .mobile-nav .mclose { position: absolute; top: 1.1rem; right: 1.4rem; width: 48px; height: 48px; font-size: 2.2rem; line-height: 1; color: #fff; background: none; border: none; cursor: pointer; }
    body.nav-open { overflow: hidden; }

    @media (max-width: 880px) {
      .reviews { grid-template-columns: 1fr; }
      .form { grid-template-columns: 1fr; }
    }

    /* reveal — 450ms en sortie douce : assez pour être perçu, pas assez pour
       faire attendre. 18px de course : le contenu se pose, il ne voyage pas. */
    .reveal { transition: opacity .45s ease-out, transform .45s cubic-bezier(.16,1,.3,1); }
    .js .reveal { opacity: 0; transform: translateY(18px); }
    .js .reveal.in { opacity: 1; transform: none; }
    /* Stagger uniquement sur les séries (plats, avis, services) : 70ms, plafonné
       à 3 éléments — au-delà, la dernière carte arrive en retard sur le regard. */
    .js .cards3 .reveal:nth-child(2), .js .reviews .reveal:nth-child(2), .js .services-grid .reveal:nth-child(2) { transition-delay: .07s; }
    .js .cards3 .reveal:nth-child(3), .js .reviews .reveal:nth-child(3) { transition-delay: .14s; }

    /* a11y */
    .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; }
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #e0a82e; outline-offset: 2px; border-radius: 2px; }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
      .js .reveal { opacity: 1 !important; transform: none !important; transition-delay: 0s !important; }
      /* Le trait du repère de scroll s'anime de scaleY(.3) à 1 : figé par la
         règle ci-dessus, il resterait un moignon à 40% d'opacité. */
      .scroll-cue span { animation: none !important; transform: scaleY(1) !important; opacity: .6 !important; }
      /* Le ruban ne defile plus : la phrase se pose, centree et entiere. */
      .ruban-piste { animation: none !important; width: 100%; justify-content: center; }
      .ruban-item { white-space: normal; text-align: center; padding: .95rem 1rem; }
      .ruban-item[aria-hidden="true"] { display: none; }
      .ruban-item::after { content: none; }
    }

    @media (max-width: 880px) {
      nav.main, .header-right { display: none; }
      .burger { display: flex; }
      .split { grid-template-columns: 1fr; }
      .reverse .split-figure { order: 0; }
      .infos-grid { grid-template-columns: 1fr; }
      .menu-grid { grid-template-columns: 1fr; gap: 2rem; }
      .cards3 { grid-template-columns: 1fr; }
      .services-grid { grid-template-columns: 1fr; }
      .split-figure .tag, .reverse .split-figure .tag { left: 12px; right: auto; bottom: 12px; }
    }
  
    /* SELECTEUR DE LANGUE
       En <details> : il s'ouvre et se ferme sans une ligne de JavaScript, et
       reste accessible au clavier par construction. Neuf langues, donc une
       liste deroulante plutot qu'une rangee de drapeaux — un drapeau ne
       designe pas une langue, il designe un pays. */
    .langues { position: relative; }
    .langues summary {
      list-style: none; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 44px; min-height: 44px; padding: 0 .5rem;
      font-family: 'Oswald', sans-serif; font-size: .82rem; letter-spacing: .1em;
      color: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 2px;
    }
    .langues summary::-webkit-details-marker { display: none; }
    .langues summary:hover { border-color: #fff; }
    .langues[open] summary { background: rgba(255,255,255,.14); }
    .langues-liste {
      position: absolute; top: calc(100% + .5rem); right: 0; z-index: 60;
      display: flex; flex-direction: column; min-width: 170px;
      background: var(--wood-dark); border-radius: 3px;
      box-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
      padding: .4rem 0;
    }
    .langues-liste a {
      padding: .7rem 1.1rem; font-size: .95rem; color: #fff; min-height: 44px;
      display: flex; align-items: center;
    }
    .langues-liste a:hover { background: rgba(255,255,255,.12); }
    .langues-liste a[aria-current="true"] { color: #ffd9c9; font-weight: 600; }
    @media (max-width: 560px) { .langues-liste { right: -.5rem; } }

    /* CLASSES ISSUES DES STYLES EN LIGNE
       Sorties des attributs style="" le 2026-08-17 : la CSP de production
       interdit les styles en ligne, qui passeraient pourtant sans bruit en
       local. Une regle bloquee ne se voit sur aucune capture. */
    .porte-symboles { position: absolute; }
    .lien-carte-pleine { text-align: center; margin: -2.4rem 0 4rem; }
    .retour-accueil { text-align: center; padding: 0 0 4rem; }
    .carte-page { padding-top: calc(4rem + 60px); }
    .footer-baseline { margin-top: .8rem; max-width: 34ch; }
    .sur-fond-sombre { color: #fff; }
    .fond-lin { background: var(--linen); }
    .en-ligne { display: flex; }

    /* CIBLES DE POINTAGE — WCAG 2.5.8 (24x24 px minimum)
       Le telephone, l'email et les mentions legales sont des liens isoles, donc
       non exemptes : ils faisaient 16 a 19 px de haut. On les epaissit sans
       toucher a la typographie, par du remplissage vertical et un affichage en
       bloc en ligne. Un numero de telephone rate au doigt, sur un site de
       restaurant, c'est une reservation perdue. */
    .contact-line a,
    .f-contact a,
    .footer-bottom a,
    footer .fcol a[href^="tel:"],
    footer .fcol a[href^="mailto:"],
    footer a[href^="tel:"],
    footer a[href^="mailto:"] {
      display: inline-block;
      padding-block: .28rem;
      min-height: 24px;
    }