/*
Theme Name: Daroco & Danico
Theme URI: https://www.daroco.com
Author: Daroco
Description: Thème sur mesure pour Daroco (restaurant) et Danico (bar à cocktails), 6 rue Vivienne, Paris 2e. Site plein écran, trilingue FR/EN/IT. Tout le contenu s'édite dans Apparence puis Personnaliser.
Version: 2.6.4
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: daroco-danico
*/

/* ═══════════════════════════════════════════
   DAROCO × DANICO — maquette « plein écran »
   Pas de scroll. Des scènes. La photo est le décor.
   ═══════════════════════════════════════════ */

/* ── typographies : équivalents libres de la charte ──
   Avenir → Urbanist (Daroco) · Brandon Grotesque → Josefin Sans (Danico)
   Jenson Pro → Cormorant Garamond · Futura Std → Jost (prix des menus)
   ── couleurs : palette officielle de la charte ── */
:root {
  --navy: #3F5273;        /* Bleu Ad Blue */
  --night: #15161c;       /* Noir Corbeau assombri (lisibilité sur photo) */
  --corbeau: #4D4F59;     /* Noir Corbeau */
  --cream: #F1E4D7;       /* Lin Blanc */
  --yellow: #D8BF62;      /* Jaune de Mars / Jaune de Venise */
  --vertdeau: #D6E5C8;    /* Vert d'eau */
  --canard: #226E8C;      /* Bleu Canard */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Urbanist", "Avenir Next", "Avenir", "Jost", sans-serif;
  --brandon: "Josefin Sans", "Urbanist", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--sans);
  background: var(--night);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
/* Sans cela, un clic légèrement glissé « soulève » le lien (glisser-déposer
   natif) : badge d'interdiction au curseur et clic avalé. */
a, .door, .resa-card { -webkit-user-drag: none; }
.chrome, .menu, .langs, .doors, .cta, .socials, .foot-note, .legal-links,
.swipe-hint { -webkit-user-select: none; user-select: none; }
/* l'adresse et le téléphone restent copiables */
.coords, .coords a { -webkit-user-select: text; user-select: text; }
button { font-family: inherit; background: none; border: none; color: inherit; cursor: pointer; }
::selection { background: var(--yellow); color: var(--navy); }

/* ─────────────── FONDS ─────────────── */
.bg { position: fixed; inset: 0; z-index: 0; }
.bg-layer {
  position: absolute; inset: -4%;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.6s ease;
  animation: kenburns 14s ease-in-out infinite alternate;
}
.bg-layer.on { opacity: 1; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Voile allégé + vignettage : la photo respire au centre,
   les bords s'assombrissent pour la lisibilité des textes */
.veil { position: fixed; inset: 0; z-index: 1; transition: background 1.6s ease; }
.veil.entry {
  background:
    /* assombrissement doux derrière l'adresse et les deux noms : l'or reste
       lisible même sur une photo claire (marbre), sans éteindre la photo */
    radial-gradient(48% 26% at 50% 44%, rgba(21,22,28,.34), rgba(21,22,28,0) 72%),
    radial-gradient(ellipse at center, rgba(21,22,28,0) 40%, rgba(21,22,28,.66) 100%),
    linear-gradient(180deg, rgba(21,22,28,.38) 0%, rgba(21,22,28,0) 24%, rgba(21,22,28,0) 60%, rgba(21,22,28,.58) 100%),
    linear-gradient(rgba(33,40,58,.18), rgba(33,40,58,.18));
}
.veil.day {
  background:
    radial-gradient(ellipse at center, rgba(21,22,28,0) 42%, rgba(21,22,28,.6) 100%),
    linear-gradient(180deg, rgba(21,22,28,.34) 0%, rgba(21,22,28,0) 24%, rgba(21,22,28,0) 62%, rgba(21,22,28,.52) 100%),
    linear-gradient(rgba(63,82,115,.1), rgba(63,82,115,.1));
}
.veil.night {
  background:
    radial-gradient(ellipse at center, rgba(21,22,28,.06) 36%, rgba(21,22,28,.74) 100%),
    linear-gradient(180deg, rgba(21,22,28,.42) 0%, rgba(21,22,28,.06) 26%, rgba(21,22,28,.08) 58%, rgba(21,22,28,.66) 100%),
    linear-gradient(rgba(21,22,28,.16), rgba(21,22,28,.16));
}

.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .5;
  background-image: url("assets/grain.png");
}

/* ─────────────── CHROME ─────────────── */
.chrome {
  position: fixed; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem clamp(1.2rem, 3vw, 2.6rem);
  text-shadow: 0 1px 14px rgba(21,22,28,.7);
}
.chrome-top { top: 0; }
.chrome-bottom { bottom: 0; align-items: flex-end; }
/* les bandeaux couvrent toute la largeur : seuls leurs vrais contrôles
   doivent recevoir les clics, pas les zones vides entre eux */
.chrome { pointer-events: none; }
.chrome :is(a, button) { pointer-events: auto; }

.menu { display: flex; gap: 2.4rem; }
.menu button, .lang, .reserve {
  /* même gabarit que les liens Instagram/LinkedIn, un soupçon plus grand */
  font-size: clamp(.9rem, 1.15vw, 1rem); letter-spacing: .3em; text-transform: uppercase; font-weight: 500;
  opacity: .75; transition: opacity .3s;
  padding: .3rem 0;
}
.menu button:hover, .menu button.active { opacity: 1; }
.menu button.active { border-bottom: 1px solid var(--yellow); }

.top-right { display: flex; gap: 1.8rem; align-items: center; }
.langs { display: flex; gap: .9rem; }
.lang { opacity: .45; }
.lang:hover, .lang.active { opacity: 1; }
.lang.active { color: var(--yellow); }
/* Pastille « voile gris » (choix du client, planche A) : un dégradé gris
   discret porte le bouton ; deux calques superposés pour un fondu propre
   entre l'état de repos et le survol (deux dégradés ne s'animent pas). */
.reserve {
  position: relative; display: inline-block;
  border: none; padding: .6rem 1.5rem; opacity: 1;
  transition: color .25s ease;
}
.reserve::before, .reserve::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transition: opacity .25s ease;
}
.reserve::before { background: linear-gradient(180deg, rgba(77,79,89,.52), rgba(21,22,28,.36)); }
.reserve::after  { background: linear-gradient(180deg, rgba(77,79,89,.66), rgba(21,22,28,.48)); opacity: 0; }
.reserve:hover { color: var(--yellow); }
.reserve:hover::before { opacity: 0; }
.reserve:hover::after { opacity: 1; }

.coords { display: flex; flex-direction: column; gap: .55rem; }
.place, .phone, .phone a, .media-link {
  font-size: clamp(.9rem, 1.15vw, 1rem); letter-spacing: .3em; text-transform: uppercase;
  font-weight: 500; opacity: .8;
}
.phone a:hover, .media-link:hover { opacity: 1; }
.media-link { border-bottom: 1px solid rgba(241,228,215,.45); padding-bottom: .15rem; }
.media-link[hidden] { display: none; }
body[data-scene="2"] .phone { display: none; }

/* ─────────────── SCÈNES ─────────────── */
.stage { position: fixed; inset: 0; z-index: 10; }
.scene {
  position: absolute; inset: 0;
  /* deux déclarations : la première marche partout, la seconde (ignorée par
     les Safari antérieurs à 17.2) empêche en plus de rogner le haut du contenu */
  display: grid;
  place-items: center;
  place-items: safe center;
  padding: 5rem clamp(1.2rem, 4vw, 3rem) 5.4rem;
  visibility: hidden; opacity: 0;
  pointer-events: none; /* une scène sortante n'intercepte plus les clics */
  transition: opacity 1s ease, visibility 0s linear 1s;
}
.scene.on {
  visibility: visible; opacity: 1;
  transition: opacity 1s ease .35s, visibility 0s;
}
/* la scène n'accepte les clics qu'une fois réellement visible :
   sinon on clique « à travers » sur des boutons qu'on ne voit pas encore */
.scene.on.ready { pointer-events: auto; }
/* Filet de sécurité : sans JavaScript, la première scène reste visible
   au lieu d'un écran noir vide. Le JS retire cette classe au démarrage. */
.no-js .scene:first-of-type,
.no-js .scene:first-of-type .kicker, .no-js .scene:first-of-type .title,
.no-js .scene:first-of-type .line, .no-js .scene:first-of-type .facts,
.no-js .scene:first-of-type .cta, .no-js .scene:first-of-type .doors,
.no-js .scene:first-of-type .foot-note, .no-js .scene:first-of-type .socials,
.no-js .scene:first-of-type .form {
  visibility: visible; opacity: 1; transform: none; pointer-events: auto;
}
.no-js .scene:first-of-type { pointer-events: auto; }
.no-js .swipe-hint { display: none; }
.s-inner {
  text-align: center; max-width: 860px; width: 100%;
  max-height: 100%;
  /* Bloc figé par défaut : le texte ne doit pas bouger sous la molette.
     Le défilement n'est rendu qu'au cas où le contenu déborde vraiment
     (petit écran, texte long) — le JS pose alors la classe .scrollable. */
  overflow: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.s-inner.scrollable { overflow-y: auto; overflow-x: hidden; }
.s-inner::-webkit-scrollbar { display: none; }

/* mouvements d'entrée */
.scene .kicker, .scene .title, .scene .line, .scene .facts, .scene .cta,
.scene .foot-note, .scene .socials, .scene .doors, .scene .form {
  opacity: 0; transform: translateY(18px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.6,.2,1);
}
.scene.on .kicker  { opacity: 1; transform: none; transition-delay: .45s; }
.scene.on .title, .scene.on .doors { opacity: 1; transform: none; transition-delay: .6s; }
.scene.on .line, .scene.on .form { opacity: 1; transform: none; transition-delay: .75s; }
.scene.on .facts   { opacity: 1; transform: none; transition-delay: .9s; }
.scene.on .cta     { opacity: 1; transform: none; transition-delay: 1.05s; }
.scene.on .foot-note { opacity: 1; transform: none; transition-delay: 1.2s; }
.scene.on .socials { opacity: 1; transform: none; transition-delay: 1.35s; }

.kicker {
  font-size: clamp(.88rem, 1.25vw, 1.1rem); letter-spacing: .5em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 2.2rem;
  /* triple ombre : un liseré net + deux halos — l'or doit rester lisible
     même sur les zones claires des photos (marbre, nappe, lumière) */
  text-shadow: 0 1px 2px rgba(21,22,28,.95), 0 2px 10px rgba(21,22,28,.85), 0 0 34px rgba(21,22,28,.7);
}
.scene[data-veil="entry"] .kicker { font-weight: 600; font-size: clamp(.95rem, 1.4vw, 1.2rem); }

.title {
  font-weight: 300;
  /* 9.5vw : au-delà, « DAROCO » avec son interlettrage déborde de l'écran */
  font-size: clamp(3.4rem, 9.5vw, 9rem);
  letter-spacing: .22em; text-transform: uppercase; line-height: 1;
  margin-right: -.22em;
  max-width: 100%;
  text-shadow: 0 4px 40px rgba(0,0,0,.35);
}
.title-sm { font-size: clamp(2rem, 5.5vw, 4rem); }

.line {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  margin-top: .8rem; opacity: .95;
}
.scene-night .line { color: var(--yellow); }

/* Danico parle en Josefin Sans (équivalent libre de Brandon Grotesque) */
.scene-night .title { font-family: var(--brandon); font-weight: 300; }
.scene-night .kicker, .scene-night .facts, .scene-night .socials { font-family: var(--brandon); }
.scene-night .socials a { border-color: rgba(34,110,140,.8); }

.facts {
  font-size: clamp(.92rem, 1.2vw, 1.05rem); letter-spacing: .24em; text-transform: uppercase;
  font-weight: 600;
  margin-top: 1.2rem; line-height: 1.6; opacity: .9;
}
.facts strong { color: var(--yellow); font-weight: 500; }

.cta { margin-top: 1.3rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn {
  position: relative; display: inline-block;
  background: none; border: none; padding: .4rem 0 10px;
  font-size: clamp(.9rem, 1.15vw, 1rem); letter-spacing: .24em; text-transform: uppercase; font-weight: 600;
  color: var(--cream);
  transition: color .25s ease;
}
/* Deux calques superposés sous le texte : la ligne (::before) et la vague (::after).
   Au survol, fondu croisé rapide de l'une vers l'autre — jamais de bascule sèche. */
.btn::before, .btn::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 7px; /* léger retrait, toujours centré */
  transition: opacity .25s ease;
}
.btn::before {
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
  opacity: .55;
}
.btn::after { opacity: 0; }
.btn:hover { color: var(--yellow); }
.btn:hover::before { opacity: 1; } /* repli sans mask : la ligne s'affirme simplement */
@supports ((-webkit-mask-repeat: repeat-x) or (mask-repeat: repeat-x)) {
  .btn::after {
    background: currentColor;
    -webkit-mask: url("assets/vague-tile.svg") repeat-x center / auto 5px;
    mask: url("assets/vague-tile.svg") repeat-x center / auto 5px;
  }
  .btn:hover::before { opacity: 0; }
  .btn:hover::after { opacity: 1; }
}

.foot-note {
  margin-top: 1.5rem;
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem); opacity: .92; /* même taille que .line */
}
.socials {
  margin-top: .8rem;
  font-size: clamp(.86rem, 1.1vw, .95rem); letter-spacing: .25em; text-transform: uppercase;
  font-weight: 600; opacity: .9;
}
.socials span { opacity: .5; }
.socials a {
  position: relative; display: inline-block; padding-bottom: 10px;
  transition: color .25s ease;
}
.socials a::before, .socials a::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 7px; /* léger retrait, toujours centré */
  transition: opacity .25s ease;
}
.socials a::before {
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
  opacity: .5;
}
.socials a::after { opacity: 0; }
.socials a:hover { color: var(--yellow); }
@supports ((-webkit-mask-repeat: repeat-x) or (mask-repeat: repeat-x)) {
  .socials a::after {
    background: currentColor;
    -webkit-mask: url("assets/vague-tile.svg") repeat-x center / auto 5px;
    mask: url("assets/vague-tile.svg") repeat-x center / auto 5px;
  }
  .socials a:hover::before { opacity: 0; }
  .socials a:hover::after { opacity: 1; }
}
.foot-note a, .linkish { border-bottom: 1px solid rgba(241,228,215,.5); }
.linkish { font-family: inherit; font-style: inherit; font-size: inherit; }
.foot-note a:hover, .linkish:hover { border-color: var(--cream); }

/* entrée : les deux portes */
.scene[data-veil="entry"] .s-inner { max-width: none; overflow: visible; }
.doors { display: flex; align-items: baseline; justify-content: center; gap: clamp(1.4rem, 4vw, 3.4rem); }
/* le soulèvement est porté par les enfants : la zone cliquable reste
   immobile (sinon le survol vacille sur le bord bas du bouton) */
.door { text-align: center; }
.door:hover .door-name { transform: translateY(-6px); }
.door-name {
  display: block;
  /* mêmes proportions que les titres des pages Daroco et Danico :
     graisse 300 et interlettrage .22em — Josefin (Danico) paraissait
     plus épaisse qu'Urbanist à graisse égale supérieure */
  font-weight: 300; font-size: clamp(2.8rem, 6vw, 5.6rem);
  letter-spacing: .22em; text-transform: uppercase; line-height: 1;
  margin-right: -.22em;
  text-shadow: 0 2px 16px rgba(21,22,28,.75), 0 6px 60px rgba(21,22,28,.5);
  transition: color .35s, transform .5s cubic-bezier(.2,.6,.2,1);
}
.door[data-goto="2"] .door-name,
.door[data-goto="2"] .door-sub { font-family: var(--brandon); }
.door-sub {
  display: block; margin-top: 1.1rem;
  font-weight: 600; font-size: .9rem; letter-spacing: .34em; text-transform: uppercase; opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s, transform .4s, color .35s;
}
.door:hover .door-sub { opacity: 1; transform: translateY(-6px); }
/* au survol, le nom ET sa phrase passent en jaune — pareil pour les deux maisons */
.door:hover .door-name, .door:hover .door-sub { color: var(--yellow); }
.door-x {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: clamp(1.7rem, 3.5vw, 2.8rem); color: var(--yellow);
  text-shadow: 0 1px 12px rgba(21,22,28,.8);
}

/* ─────────────── CONTACT ─────────────── */
.form { max-width: 560px; margin: 2.4rem auto 0; display: grid; gap: 1.1rem; text-align: left; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form input[type="text"], .form input[type="email"], .form textarea { cursor: text; }
.form select { cursor: pointer; }
.form label, .form .btn, .form button { cursor: pointer; }
.form input:not([type="checkbox"]), .form select, .form textarea {
  /* 16px minimum : en dessous, iOS zoome au focus et le visiteur reste coincé */
  font-family: var(--sans); font-size: 16px; color: var(--cream);
  background: rgba(21,22,28,.35);
  border: none; border-bottom: 1px solid rgba(241,228,215,.4);
  padding: .8rem .9rem; outline: none; border-radius: 0; width: 100%;
  transition: border-color .3s;
  -webkit-appearance: none; appearance: none;
}
.form ::placeholder { color: rgba(241,228,215,.55); letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; }
.form select { color: rgba(241,228,215,.75); letter-spacing: .1em; text-transform: uppercase; }
.form select option { color: var(--navy); }
.form select.chosen { color: var(--cream); }
.form input:not([type="checkbox"]):focus, .form select:focus, .form textarea:focus { border-color: var(--yellow); }
.form textarea { resize: none; }
.form .btn { justify-self: center; margin-top: .4rem; }

/* ─────────────── RESA ─────────────── */
.resa {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(21,22,28,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: grid; place-items: center; padding: 1.5rem;
  opacity: 0; transition: opacity .35s;
}
.resa[hidden] { display: none; }
.resa.open { opacity: 1; }
/* Habillage « Lin épuré » : panneau crème aéré, deux colonnes
   séparées d'un filet, liens soulignés — plus de cartes pleines. */
.resa-box {
  position: relative; background: var(--cream); color: var(--night);
  padding: clamp(2.2rem, 5vw, 4.5rem) clamp(1.6rem, 5vw, 5rem);
  max-width: 900px; width: 100%;
  max-height: calc(100dvh - 3rem); overflow-y: auto;
  transform: translateY(14px); transition: transform .35s;
}
.resa.open .resa-box { transform: none; }
.resa-close {
  position: absolute; top: .3rem; right: .4rem;
  padding: .6rem .8rem; /* cible tactile confortable, position visuelle inchangée */
  font-size: 1.7rem; line-height: 1; opacity: .45; color: var(--night);
}
.resa-close:hover { opacity: 1; }
.resa-title {
  font-family: var(--serif); font-style: italic; text-align: center;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: var(--night);
  margin-bottom: clamp(2.2rem, 5vh, 3.4rem);
}
/* la vague de la ferronnerie, en signature sous le titre des panneaux */
.panel-wave { display: none; }
@supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)) {
  .panel-wave {
    display: block; width: 58px; height: 8px; margin: 1rem auto 0;
    background-color: var(--canard); opacity: .8;
    -webkit-mask: url("assets/vague.svg") no-repeat center / contain;
    mask: url("assets/vague.svg") no-repeat center / contain;
  }
}

.resa-grid { display: grid; grid-template-columns: 1fr 1fr; }
.resa-card {
  padding: .5rem clamp(1.4rem, 4vw, 3rem) 1rem; text-align: center;
  display: flex; flex-direction: column; gap: 1.1rem; align-items: center;
  background: none; color: var(--night);
}
.resa-card-night { border-left: 1px solid rgba(63,82,115,.28); }
.resa-name {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem); letter-spacing: .22em;
  text-transform: uppercase; font-weight: 500;
  margin-right: -.22em; color: var(--navy);
}
.resa-card-night .resa-name { font-family: var(--brandon); color: var(--corbeau); }
.resa-desc {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem); opacity: .85; line-height: 1.5;
}
.resa-cta {
  margin-top: auto;
  position: relative; display: inline-block;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--canard); padding-bottom: 10px;
  transition: color .25s ease;
}
.resa-cta::before, .resa-cta::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 7px;
  transition: opacity .25s ease;
}
.resa-cta::before {
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}
.resa-cta::after { opacity: 0; }
a.resa-card:hover .resa-cta { color: var(--night); }
@supports ((-webkit-mask-repeat: repeat-x) or (mask-repeat: repeat-x)) {
  .resa-cta::after {
    background: currentColor;
    -webkit-mask: url("assets/vague-tile.svg") repeat-x center / auto 5px;
    mask: url("assets/vague-tile.svg") repeat-x center / auto 5px;
  }
  a.resa-card:hover .resa-cta::before { opacity: 0; }
  a.resa-card:hover .resa-cta::after { opacity: 1; }
}
.resa-nores::before, .resa-nores::after { display: none; }
a.resa-card:hover .resa-cta { color: var(--night); }
.resa-nores {
  font-family: var(--sans); font-style: normal;
  font-size: .82rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--corbeau); border: none; padding: 0;
}
.resa-nores span {
  display: block; margin-top: .6rem;
  font-size: .7rem; letter-spacing: .1em; text-transform: none; opacity: .75;
}

/* ─────────────── DANS LA PRESSE ─────────────── */
.press {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(21,22,28,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: grid; place-items: center; padding: 1.5rem;
  opacity: 0; transition: opacity .35s;
}
.press[hidden] { display: none; }
.press.open { opacity: 1; }
/* pendant le fondu de fermeture (350 ms), le voile plein écran reste dans la
   page : sans ceci il intercepterait tous les clics du visiteur pressé */
.resa:not(.open), .press:not(.open) { pointer-events: none; }
.press-box {
  position: relative; background: var(--cream); color: var(--navy);
  padding: clamp(1.6rem, 5vw, 3.2rem); max-width: 520px; width: 100%;
  max-height: calc(100dvh - 3rem); overflow-y: auto;
  transform: translateY(14px); transition: transform .35s;
}
.press.open .press-box { transform: none; }
.press-kicker {
  text-align: center;
  font-size: .66rem; letter-spacing: .45em; text-transform: uppercase;
  opacity: .55; margin-bottom: .8rem;
}
.press .resa-title { margin-bottom: 1.4rem; }
.press-list { list-style: none; }
.press-list li { border-top: 1px solid rgba(63,82,115,.22); }
.press-list li:last-child { border-bottom: 1px solid rgba(63,82,115,.22); }
.press-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem .2rem;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  transition: color .3s, padding-left .3s;
}
.press-list a:hover { color: var(--canard); padding-left: .5rem; }

.place a { border-bottom: 1px solid transparent; transition: border-color .3s; }
.place a:hover { border-color: rgba(241,228,215,.6); }

/* indice de balayage — mobile uniquement (le menu y est masqué) */
.swipe-hint {
  display: none;
  position: fixed; bottom: 3.4rem; left: 50%; transform: translateX(-50%);
  z-index: 20;
  font-size: .6rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--cream);
  animation: hint 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hint { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }


/* ─────────────── WORDPRESS : formulaire, actu, pages simples ─────────────── */

/* piège à robots — invisible pour l'œil, présent pour les scripts */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.actu {
  margin-top: .8rem;
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  color: var(--yellow); opacity: .95;
}
.actu[hidden] { display: none; }

.form-msg {
  margin: 1.4rem auto 0; max-width: 520px;
  padding: .9rem 1.2rem;
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
}
.form-ok { border: 1px solid var(--yellow); color: var(--yellow); }
.form-ko { border: 1px solid var(--cream); color: var(--cream); }

.consent {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .68rem; line-height: 1.6; letter-spacing: .04em;
  text-transform: none; opacity: .8; text-align: left;
}
.consent-box {
  width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin-top: .15rem;
  accent-color: var(--yellow); cursor: pointer;
}

.legal-links {
  margin-top: 1.6rem;
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; opacity: .55;
}
.legal-links a { border-bottom: 1px solid transparent; transition: border-color .3s, opacity .3s; }
.legal-links a:hover { opacity: 1; border-color: currentColor; }

/* pages simples : mentions légales, confidentialité, 404 */
html:has(body.page:not(.home)), html:has(body.error404), html:has(body.search),
html:has(body.archive), html:has(body.single) { overflow: auto; height: auto; }
body.page:not(.home), body.error404, body.search, body.archive, body.single {
  overflow: auto; height: auto; min-height: 100%; background: var(--night);
}
/* repli pour les navigateurs sans :has() — la classe est posee par le JS */
html.daroco-page, html.daroco-page body { overflow: auto; height: auto; }
.page-simple {
  max-width: 720px; margin: 0 auto;
  padding: clamp(3rem, 8vh, 6rem) clamp(1.4rem, 5vw, 2.4rem) 5rem;
}
.page-back {
  display: inline-block; margin-bottom: 3rem;
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; opacity: .7;
}
.page-back:hover { opacity: 1; }
.page-title {
  font-weight: 300; font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.1;
  margin-bottom: 2.4rem;
}
.page-body { font-size: 1rem; line-height: 1.85; opacity: .88; }
.page-body h2 {
  font-weight: 400; font-size: 1.15rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--yellow); margin: 2.4rem 0 .9rem;
}
.page-body p, .page-body ul, .page-body ol { margin-bottom: 1.2rem; }
.page-body ul, .page-body ol { padding-left: 1.4rem; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.navigation.pagination { margin: 2rem 0; }
.nav-links { display: flex; gap: .8rem; flex-wrap: wrap; }
.page-numbers {
  display: inline-block; padding: .5rem .9rem;
  border: 1px solid rgba(241,228,215,.25); font-size: .8rem;
}
.page-numbers.current, .page-numbers:hover { border-color: var(--yellow); color: var(--yellow); }
.simple-list { list-style: none; padding: 0; margin-bottom: 1.6rem; }
.simple-list li { border-top: 1px solid rgba(241,228,215,.15); }
.simple-list li:last-child { border-bottom: 1px solid rgba(241,228,215,.15); }
.simple-list a { display: block; padding: .9rem 0; border: none; }
.page-body a { border-bottom: 1px solid rgba(216,191,98,.6); }
.page-body a:hover { color: var(--yellow); }

/* accessibilité : navigation au clavier visible */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--yellow); outline-offset: 3px;
}
/* sur les panneaux crème, le jaune est invisible (1,5:1) : canard */
.resa-box :is(a, button):focus-visible,
.press-box :is(a, button):focus-visible { outline-color: var(--canard); }
/* les champs du formulaire posaient outline:none : on rétablit le focus */
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible {
  outline: 2px solid var(--yellow); outline-offset: 3px;
}

/* barre d'admin WordPress : ne pas recouvrir le chrome du site */
body.admin-bar .chrome-top { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .chrome-top { top: 46px; }
}

/* ── Les blocs adaptatifs restent en FIN de fichier :
      la cascade CSS donne raison au dernier écrit, et toute règle ajoutée
      au-dessus ne peut plus écraser silencieusement un réglage mobile. ── */
/* ─────────────── MOBILE ─────────────── */
@media (max-width: 820px) {
  .chrome { padding: 1rem 1.1rem; }

  /* Du menu, on ne garde que Contact : il devient le second bouton du bandeau */
  .menu { display: flex; gap: 0; }
  .menu button { display: none; }
  .menu button[data-goto="3"] {
    display: inline-block;
    font-size: .76rem; letter-spacing: .22em; opacity: 1;
    border-bottom: 1px solid rgba(241,228,215,.55);
    padding-bottom: .35rem;
  }
  .menu button[data-goto="3"].active { border-color: var(--yellow); color: var(--yellow); }
  /* sur mobile, pas de survol : un simple trait or sous Réserver */
  .reserve { font-size: .76rem; letter-spacing: .22em; padding: .5rem 1rem; color: var(--yellow); }
  .langs { gap: .7rem; }
  .lang { font-size: .76rem; letter-spacing: .18em; }

  /* Surtitres numérotés retirés : ils alourdissent sur petit écran.
     Celui de l'entrée reste, il porte l'adresse. */
  .scene:not([data-veil="entry"]) .kicker { display: none; }
  /* sur mobile : le téléphone reste, en un tap ; l'adresse s'efface */
  .place { display: none; }
  .chrome-bottom { justify-content: space-between; align-items: center; }
  .phone, .phone a { font-size: .78rem; }
  .media-link { font-size: .78rem; }
  .swipe-hint { display: block; }
  .scene { padding: 4.6rem 1.2rem; }
  .doors { flex-direction: column; align-items: center; gap: 1.8rem; }
  .door-name { font-size: clamp(3rem, 14vw, 4rem); font-weight: 300; }
  .door-sub { opacity: 1; transform: none; font-size: .8rem; }
  .door-x { display: none; }
  .f-row { grid-template-columns: 1fr; }

  /* Bloc compact et centré : les marges calibrées pour un écran large
     étiraient le contenu sur toute la hauteur d'un grand téléphone. */
  .kicker { font-size: .78rem; letter-spacing: .36em; margin-bottom: 1.1rem; }
  .title { font-size: clamp(2.8rem, 13vw, 4.4rem); letter-spacing: .16em; margin-right: -.16em; }
  .title-sm { font-size: clamp(1.9rem, 9vw, 2.8rem); }
  .line { font-size: 1.15rem; margin-top: .9rem; }
  .facts { font-size: .74rem; letter-spacing: .18em; line-height: 1.9; margin-top: 1.3rem; }
  .cta { margin-top: 1.5rem; gap: .7rem; }
  .btn { font-size: .74rem; padding: .3rem 0 10px; }
  /* le bouton RÉSERVER du bandeau haut suffit sur mobile : on évite le doublon */
  .btn-resa { display: none; }
  .actu { font-size: 1.05rem; margin-top: 1rem; }
  /* « Grandes tablées & privatisation » : retiré sur mobile,
     le bouton Contact du bandeau haut couvre le besoin */
  .foot-note { display: none; }
  .socials { font-size: .66rem; letter-spacing: .2em; margin-top: .9rem; }
  .form { gap: .8rem; margin-top: 1.2rem; }
  .legal-links { margin-top: 1rem; }

  /* cibles tactiles élargies (padding compensé par des marges négatives) :
     toujours par le haut et les côtés — le bas porte les traits et vagues */
  .lang { padding: .6rem .3rem; margin: -.6rem -.3rem; }
  .menu button[data-goto="3"] { padding-top: .6rem; margin-top: -.6rem; }
  .phone a, .media-link { padding-top: .8rem; margin-top: -.8rem; }
  .socials a { padding-top: .5rem; margin-top: -.5rem; }
  .legal-links a { display: inline-block; padding: .6rem .3rem; margin: -.6rem -.3rem; }

  .resa-grid { grid-template-columns: 1fr; }
  .resa-card { padding: 1rem .6rem; gap: .7rem; }
  .resa-card-night {
    border-left: none;
    border-top: 1px solid rgba(63,82,115,.28);
    margin-top: 1.2rem; padding-top: 1.8rem;
  }
  .resa-title { margin-bottom: 1.6rem; }
}

@media (max-height: 640px) {
  .kicker { margin-bottom: 1.2rem; }
  .facts { margin-top: 1.4rem; }
  .cta { margin-top: 1.6rem; }
  .foot-note { margin-top: 1.6rem; }
  .title { font-size: clamp(2.6rem, 9vw, 5rem); }
  .form { gap: .7rem; margin-top: 1.4rem; }
  .form input, .form select, .form textarea { padding: .55rem .8rem; }
  .form textarea { height: 4.2rem; }
}