/* ══════════════════════════════════════════════════════════════════════════════
   COMPOSANTS
   Les pièces qui reviennent partout : boutons, barre flottante, plaque de verre,
   têtes de section, fiches, formulaire, pied de page, barre mobile.
   Aucune de ces pièces ne connaît la section dans laquelle elle est posée.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── Boutons ────────────────────────────────────────────────────────────────
   Gélules. Hauteur minimale 48 px, y compris au doigt.
   ─────────────────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: var(--arrondi-pilule);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe),
              color var(--duree) var(--courbe),
              box-shadow var(--duree) var(--courbe),
              transform var(--duree) var(--courbe);
}

.bouton--primaire {
  background: var(--rouge-vif);
  color: var(--os);
  box-shadow: 0 10px 26px rgb(163 18 28 / .28);
}
.bouton--primaire:hover,
.bouton--primaire:focus-visible {
  background: var(--rouge);
  box-shadow: 0 14px 32px rgb(163 18 28 / .36);
  transform: translateY(-1px);
}

.bouton--second {
  background: rgb(255 255 255 / .84);
  color: var(--encre);
  border-color: var(--trait-fort);
}
.bouton--second:hover,
.bouton--second:focus-visible {
  background: #fff;
  border-color: var(--rouge-vif);
  color: var(--rouge-texte);
}

/* Posé sur la photo du hero, le même bouton repasse en clair. */
.sur-photo .bouton--second {
  background: rgb(255 255 255 / .12);
  color: var(--os);
  border-color: rgb(255 255 255 / .44);
}
.sur-photo .bouton--second:hover,
.sur-photo .bouton--second:focus-visible {
  background: rgb(255 255 255 / .22);
  border-color: #fff;
  color: #fff;
}

/* ─── La barre flottante ─────────────────────────────────────────────────────
   Une gélule de verre posée au-dessus de la page, jamais collée au bord.
   Le logo est toujours à gauche.

   Elle reste EN HAUT DU SITE : elle est posée sur le hero et s'en va avec lui
   quand on descend. Elle ne suit pas le défilement.
   Verre sombre, logo clair, liens blancs. Le verre est assez opaque pour tenir
   aussi bien sur la photo que sur le fond clair : à 34 % d'opacité, le texte
   blanc tombait à 2,36 de contraste.
   ─────────────────────────────────────────────────────────────────────────── */
.entete {
  position: absolute;
  inset: clamp(10px, 1.6vh, 18px) 0 auto;
  z-index: 40;
  padding-inline: var(--gouttiere);
  pointer-events: none;
}

.entete__rang {
  position: relative;
  pointer-events: auto;
  max-width: var(--largeur-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 8px 8px clamp(16px, 1.8vw, 26px);
  border-radius: var(--arrondi-pilule);
  border: 1px solid rgb(255 255 255 / .22);
  background: rgb(30 8 10 / .95);
  box-shadow: 0 14px 38px rgb(0 0 0 / .42);
}

/* Le logo tient la gauche, et rien ne le déplace. Le verre reste sombre du haut
   en bas de la page : c'est donc toujours la version claire du logo. */
.marque { flex: 0 0 auto; display: block; line-height: 0; margin-right: auto; }
.marque img { width: clamp(124px, 11vw, 150px); height: auto; }
.marque .encre { display: none; }

/* ─── La navigation — D'ABORD LE TÉLÉPHONE ──────────────────────────────────
   La base est le menu du téléphone : il se déplie sous la barre, dans le même
   verre. Rien n'est caché ailleurs, rien ne se déplace, la page ne bouge pas
   derrière. La barre de bureau s'ajoute ensuite, à partir de 861 px.
   ─────────────────────────────────────────────────────────────────────────── */
.entete__nav {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  border-radius: var(--arrondi);
  border: 1px solid rgb(255 255 255 / .22);
  background: rgb(26 6 8 / .985);
  box-shadow: var(--ombre-portee);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--duree) var(--courbe),
              transform var(--duree) var(--courbe),
              visibility var(--duree);
}
.entete[data-menu] .entete__nav {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.entete__nav ul {
  display: block;
  align-items: center;
  gap: 16px;
}
.entete__nav li + li { border-top: 1px solid rgb(255 255 255 / .14); }

.entete__nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-inline: 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(253 241 236 / .86);
  transition: color var(--duree) var(--courbe);
}
.entete__nav a:hover,
.entete__nav a:focus-visible,
.entete__nav a[aria-current="page"] { color: #fff; }

/* Réserver, en bas du menu du téléphone : en rouge, pleine largeur. */
.entete__nav li.entete__nav-reserver { border-top: 0; padding: 10px 16px 16px; }
.entete__nav .entete__nav-reserver a {
  justify-content: center;
  min-height: 54px;
  border-radius: var(--arrondi-pilule);
  background: var(--rouge-vif);
  color: #fff;
  letter-spacing: .16em;
}

.entete__reserver {
  display: none;              /* sur téléphone, c'est la barre du bas qui réserve */
  flex: 0 0 auto;
  min-height: 46px;
  padding-inline: 18px;
  font-size: 12px;
}

/* ─── Le bouton du menu, téléphone seulement ────────────────────────────────
   Trois traits qui deviennent une croix. C'est un vrai bouton, pas une case à
   cocher déguisée : il porte son état dans aria-expanded.
   ─────────────────────────────────────────────────────────────────────────── */
.entete__burger {
  display: block;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .3);
  border-radius: 50%;
  background: rgb(255 255 255 / .1);
  cursor: pointer;
  position: relative;
}
.entete__burger span {
  position: absolute;
  left: 50%;
  width: 17px;
  height: 1.6px;
  margin-left: -8.5px;
  border-radius: 2px;
  background: var(--os);
  transition: transform var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}
.entete__burger span:nth-child(1) { top: 16px; }
.entete__burger span:nth-child(2) { top: 22px; }
.entete__burger span:nth-child(3) { top: 28px; }

.entete__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.entete__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.entete__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ─── À partir de 861 px : la barre de bureau, compacte ────────────────────
   Le menu redevient une ligne dans la barre, le bouton Réserver revient, le
   bouton du menu disparaît. Chaque valeur du menu déroulant est rendue à la
   valeur qu'elle aurait sans lui — c'est ce qui garantit un rendu identique.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 861px) {
  .entete__nav-reserver { display: none; }
  .entete__burger { display: none; }
  .entete__reserver { display: inline-flex; }
  .entete__nav {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    border-radius: 0;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    opacity: 1;
    visibility: inherit;
    transform: none;
    transition: initial;
  }
  .entete__nav ul { display: flex; }
  .entete__nav li + li { border-top: 0; }
  .entete__nav a {
    display: inline-flex;
    min-height: 44px;
    padding-inline: 0;
    font-size: 12px;
    letter-spacing: .08em;
  }
}

/* ─── À partir de 1041 px : la barre de bureau, pleine ──────────────────── */
@media (min-width: 1041px) {
  .entete__rang { gap: clamp(14px, 2.4vw, 40px); }
  .entete__nav ul { gap: clamp(16px, 2.2vw, 34px); }
  .entete__nav a { font-size: 12px; letter-spacing: .16em; }
  .entete__reserver { padding-inline: 24px; font-size: 12px; }
}

/* ─── Plaque de verre ────────────────────────────────────────────────────────
   Le support des titres de section. Volontairement discrète et compacte :
   c'est l'image qui porte une section, pas son titre.
   ─────────────────────────────────────────────────────────────────────────── */
.plaque {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: clamp(11px, 1.1vw, 15px) clamp(24px, 3vw, 46px) clamp(13px, 1.3vw, 18px);
  border-radius: var(--arrondi);
  border: 1px solid var(--verre-bord);
  /* LE VERRE N'EST PLUS FLOUTÉ, et c'est la correction qui a sauvé le site.
     Cette plaque portait backdrop-filter: blur(14px), et elle est posée pile
     au-dessus de la toile des feuilles. Un flou d'arrière-plan se recalcule à
     chaque fois que ce qu'il y a DERRIÈRE change : six plaques × soixante
     images par seconde = six flous plein écran par image. Sur Safari, la page
     tombait à genoux.
     Le verre est donc devenu un simple dégradé translucide, un peu plus opaque
     pour que le texte reste net. On y perd le feuillage flouté qui passait
     derrière les épaules de la plaque ; on y gagne un site qui défile. */
  background: linear-gradient(180deg,
      rgb(255 255 255 / .97) 0%,
      rgb(255 255 255 / .94) 58%,
      rgb(253 244 238 / .91) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .95),
    var(--ombre-douce);
}

.plaque > * { margin: 0; }

/* ─── Tête de section ────────────────────────────────────────────────────── */
.tete-section {
  max-width: min(100%, 30rem);
  justify-self: center;
}

/* 12 px minimum partout (30/09/2026) : au soleil, sur un téléphone, 10 px ne
   se lisait pas. L'espacement est resserré pour garder la même largeur. */
.surtitre {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--eteint);
}

.titre-section {
  font-size: clamp(21px, 2.3vw, 31px);
  line-height: 1.15;
  /* Gros titre : il a le droit au rouge le plus clair. Un lien ou une mention
     ne l'a pas — d'où deux rouges d'encre et pas un seul. */
  color: var(--rouge-titre);
}

/* ─── Mentions pratiques ─────────────────────────────────────────────────── */
.mentions li {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sourdine);
}

.mentions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }

@media (min-width: 620px) {
  .mentions { width: auto; column-gap: normal; margin-bottom: 0; align-items: center; }
  .mentions li + li {
    margin-left: clamp(14px, 1.8vw, 26px);
    padding-left: clamp(14px, 1.8vw, 26px);
    border-left: 1px solid var(--trait-fort);
  }
}

/* ─── Étiquette d'attente ────────────────────────────────────────────────────
   Se pose à côté d'un titre quand l'information n'est pas encore confirmée.
   Elle doit se voir : c'est elle qui empêche d'oublier de remplir le trou.
   ─────────────────────────────────────────────────────────────────────────── */
.etiquette-attente {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 4px 11px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--arrondi-pilule);
  background: rgb(255 255 255 / .6);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rouge-texte);
}

/* ─── Fiche ──────────────────────────────────────────────────────────────── */
.fiche {
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--arrondi);
  border: 1px solid var(--verre-bord);
  background: rgb(255 255 255 / .92);
  box-shadow: var(--ombre-douce);
}

.fiche h3 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--interlettre);
  text-transform: uppercase;
  color: var(--eteint);
  margin-bottom: 12px;
}

.fiche p, .fiche address { font-style: normal; color: var(--sourdine); }

.fiche__fort { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.01em; }
.fiche__fort a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--rouge-texte);
  text-decoration: none;
}
.fiche__fort a:hover, .fiche__fort a:focus-visible { color: var(--rouge); }

.fiche .bouton { margin-top: 16px; }

/* ─── Formulaire ─────────────────────────────────────────────────────────────
   Uniquement les champs nécessaires. La case de consentement n'est jamais
   pré-cochée, et elle porte le lien vers la politique de confidentialité.
   ─────────────────────────────────────────────────────────────────────────── */
.formulaire {
  display: grid;
  gap: 15px;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--arrondi);
  border: 1px solid var(--verre-bord);
  background: rgb(255 255 255 / .92);
  box-shadow: var(--ombre-douce);
}

.formulaire h3 { font-size: clamp(18px, 2vw, 23px); color: var(--rouge-texte); }

.champ { display: grid; gap: 7px; }

.champ label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eteint);
}

.champ input,
.champ textarea {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px 15px;
  border: 1px solid var(--trait-fort);
  border-radius: 14px;
  background: #fff;
  color: var(--encre);
  transition: border-color var(--duree) var(--courbe),
              box-shadow var(--duree) var(--courbe);
}
.champ textarea { min-height: 92px; resize: vertical; }

/* Le champ de date sur iPhone (Safari) : il garde sa largeur « naturelle »,
   ignore width: 100 % et déborde sur le champ d'à côté (vu par Angelo le
   30/09/2026, Date sous Personnes). Sans l'apparence du système, il obéit à
   sa colonne ; la hauteur et l'alignement sont refixés, car Safari les perd
   avec elle (un champ vide s'écrase, la date se centre). */
.champ input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  max-width: 100%;
  /* Exactement la hauteur des autres champs, vide ou rempli : une ligne de
     texte (1,65) + les marges (2 × 12 px) + le bord (2 × 1 px). */
  height: calc(1.65em + 26px);
  text-align: left;
}
.champ input[type="date"]::-webkit-date-and-time-value { text-align: left; }

.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--rouge-vif);
  box-shadow: 0 0 0 3px rgb(200 30 40 / .16);
}

/* Deux champs côte à côte dès 360 px ; en dessous, un champ de date ne tient
   pas dans une demi-largeur, ils passent l'un sous l'autre. */
.champ--double { grid-template-columns: minmax(0, 1fr); align-items: end; gap: 14px; }
.champ--double > div { display: grid; gap: 7px; min-width: 0; }
@media (min-width: 360px) { .champ--double { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.champ--case {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  min-height: 44px;
  padding: 4px 0;
}
.champ--case input {
  width: 26px;
  min-height: 26px;
  height: 26px;
  margin-top: 9px;
  accent-color: var(--rouge-texte);
}
.champ--case label {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sourdine);
  line-height: 1.55;
}
.champ--case label a { color: var(--rouge-texte); }

.formulaire .bouton { justify-self: start; margin-top: 4px; }

/* ─── Pied de page ─────────────────────────────────────────────────────────── */
.pied {
  position: relative;
  padding-block: clamp(40px, 4.6vw, 64px) clamp(32px, 3.6vw, 50px);
  border-top: 1px solid var(--trait);
}

.pied__rang { display: grid; gap: clamp(24px, 3vw, 40px); align-items: start; }

@media (min-width: 900px) {
  .pied__rang { grid-template-columns: auto 1fr auto; }
  .pied__legal ul { justify-content: flex-end; }
}

.pied__marque img { width: 170px; height: auto; }

.pied__nav ul,
.pied__legal ul { display: flex; flex-wrap: wrap; gap: 6px clamp(16px, 2vw, 28px); }

.pied__nav a,
.pied__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sourdine);
  transition: color var(--duree) var(--courbe);
}
.pied__nav a:hover, .pied__nav a:focus-visible,
.pied__legal a:hover, .pied__legal a:focus-visible { color: var(--rouge-texte); }

/* ─── Barre fixe du bas, téléphone seulement ─────────────────────────────────
   Appeler, Réserver : toujours sous le pouce. Elle disparaît à partir de 861 px,
   où l'entête porte le bouton Réserver. Sa hauteur est réservée par
   --hauteur-barre (socle.css), pour que le bas d'une page ne passe jamais dessous.
   ─────────────────────────────────────────────────────────────────────────── */
.barre-mobile {
  position: fixed;
  inset: auto 0 0;
  z-index: 45;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgb(255 255 255 / .985);
  border-top: 1px solid var(--trait);
  padding-bottom: env(safe-area-inset-bottom);
}

.barre-mobile a {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
}

/* « .barre-mobile a » pose l'encre sur les deux liens : il faut la même
   précision pour que le blanc l'emporte sur le rouge. Sans elle, « Réserver »
   s'écrivait en gris foncé sur rouge, à 2,3:1 — illisible au soleil. */
.barre-mobile a.barre-mobile__fort { background: var(--rouge-vif); color: #fff; }

@media (min-width: 861px) {
  :root { --hauteur-barre: 0px; }
  .barre-mobile { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   LA DÉCO — la pièce de base
   Étape 2. Toute décoration du site passe par cette classe, et par elle seule.

   LA RÈGLE DU DESSOUS. Chaque pièce est en position absolue, en z-index -1,
   dans une .section qui porte déjà isolation: isolate. Un enfant en z-index
   négatif peint AU-DESSUS du fond animé de la section et EN DESSOUS de tout
   son contenu en flux. Il est donc structurellement impossible qu'une déco
   recouvre une photo, un titre, un bouton, un champ ou le livre : ce n'est pas
   une promesse de placement, c'est une contrainte du moteur de rendu.

   Corollaire assumé : un rameau qui passe derrière un cadre est coupé net par
   le passe-partout rouge de 7 px. C'est ce liseré qui fait lire la coupe comme
   voulue et non comme un accident.

   max-width: none est indispensable — socle.css pose img { max-width: 100% }
   et écraserait toutes les largeurs calculées ici.

   Aucune pièce n'est animée : le fond dérive déjà, un feuillage qui dériverait
   en plus donnerait le mal de mer.
   ══════════════════════════════════════════════════════════════════════════════ */
.deco {
  position: absolute;
  z-index: -1;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  /* AUCUNE OPACITÉ, AUCUN MASQUE, AUCUN FILTRE. C'est la règle, et elle est
     la conclusion de quatre corrections ratées.
     Toute pièce en opacity ou en mask est composée dans son propre CALQUE. Sur
     un fond en dégradé très doux comme le nôtre, le navigateur tramme le
     dégradé, et le calque casse la trame sur son rectangle : on voit la BOÎTE
     de l'image, bords nets, alors que l'image elle-même n'a plus un seul bord
     opaque. C'est ce rectangle que le client voyait, et aucun réglage CSS ne
     pouvait l'enlever puisque le coupable était le calque lui-même.
     Le voile, la forme et les fondus sont donc cuits dans l'alpha des webp au
     moment de l'export. Une pièce de déco n'est plus qu'une image posée. */
}

/* ─── La masse : l'olivier de coin ──────────────────────────────────────────
   PLUS AUCUN MASQUE CSS ICI, et c'est délibéré.

   Les deux fichiers de coin sont des découpes rectangulaires : leurs quatre
   bords sont nets, et c'est ce rectangle qu'on voyait en plein milieu de la
   page. J'ai d'abord voulu l'éteindre avec un masque CSS à plusieurs couches
   composées en `mask-composite: intersect`. Ça marchait chez moi. Ça ne
   marchait pas chez le client : quand `mask-composite` n'est pas supporté, les
   couches s'ADDITIONNENT au lieu de s'intersecter, le masque devient inopérant,
   et le rectangle réapparaît tel quel.

   La forme est donc cuite dans les fichiers eux-mêmes — radial depuis le coin
   d'ancrage, plus un fondu sur les quatre bords — au moment de l'export webp.
   Contrôlé à l'export : opacité 0 sur les quatre bords, sur 255. Aucun
   navigateur ne peut donc afficher un bord net, quel que soit son support CSS.

   Reste ici le seul réglage encore utile : le côté d'ancrage, pour la symétrie.
   ─────────────────────────────────────────────────────────────────────────── */


/* ─── Le fil : les coutures entre deux sections ─────────────────────────────
   Mesuré sur le fichier : dans fil-ligne.png le cordon fin ne court pas au
   milieu de la boîte mais à 91 % de sa hauteur (y ≈ 135 sur 148) — au centre,
   un ruban de satin monte jusqu'à y = 26. Une pièce centrée par -50% aurait
   posé le cordon 50 px sous la ligne visée. D'où le -91%.
   La volute, elle, est équilibrée : son encre est centrée à 46 %. */
.deco--cordon { translate: -50% -91%; }
.deco--volute { translate: -50% -46%; }

/* Une couture pleine largeur est un élément REMPLACÉ : left + right + width
   auto ne marche pas (CSS 2.1 §10.3.8, right est ignoré et la largeur
   intrinsèque gagne). La largeur est donc toujours donnée explicitement. */
.deco--travers { left: 50%; }