/* ══════════════════════════════════════════════════════════════════════════════
   SECTIONS
   Une section par bloc de la page, dans l'ordre où on la lit.
   Peu de mots : ce sont les images qui parlent, les textes ne font que nommer.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   1. HERO
   La page est sombre de bout en bout : la photo s'y fond, et l'angle arrondi du
   bas fait la couture avec la suite.
   Volontairement pas plein écran : la section suivante dépasse en bas.
   ══════════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  /* La photo se dissout dans la page sur --couture : le bas du hero doit
     rester au-dessus de cette zone, sinon le texte blanc part dans le clair. */
  --couture: clamp(110px, 16vh, 200px);
  padding-block: calc(var(--hauteur-entete) + 48px) calc(var(--couture) + clamp(30px, 4.5vh, 60px));
  /* Le hero ne reçoit AUCUNE feuille : c'est une photographie, elle se suffit.
     Il n'a donc pas de toile, et rien à réagencer. */
  isolation: isolate;
  overflow: hidden;
}

/* Les coins arrondis découvraient la page derrière : quatre taches claires,
   et un trait net là où la photo s'arrêtait. Plus d'arrondi, plus de trait :
   la photo ET son voile s'effacent en fondu sur le bas, et c'est le vrai
   fond animé qui réapparaît dessous. Un masque, pas un aplat : la couleur
   coïncide toujours, même quand un halo passe par là. */
.hero__image,
.hero__voile {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--couture)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--couture)), transparent 100%);
}

.hero__image { position: absolute; inset: 0; z-index: -3; }
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* Le voile n'est pas une décoration, c'est ce qui rend le texte lisible.
   En portrait le contenu occupe la moitié basse de la photo, qui est aussi
   la plus claire : le voile monte donc haut. */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to top, rgb(18 3 5 / .94) 0%,  rgb(18 3 5 / .80) 22%,
                            rgb(18 3 5 / .54) 42%, rgb(18 3 5 / .18) 62%,
                            rgb(18 3 5 / 0)   76%),
    linear-gradient(to bottom, rgb(18 3 5 / .62) 0%, rgb(18 3 5 / 0) 26%);
}

.hero__contenu { width: 100%; }

.hero__titre {
  margin: 0;
  width: max-content;
  max-width: 100%;
}

.hero__titre img { width: min(52vw, 260px); height: auto; }

.hero__titre span {
  display: block;
  margin-top: clamp(22px, 3vh, 38px);
  font-size: clamp(12px, 1.1vw, 13px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: clamp(.16em, 1.4vw, .28em);
  text-transform: uppercase;
  color: rgb(255 255 255 / .8);
}

/* Le nom de la commune ne se coupe pas en deux… sauf sous 360 px, où il ne
   tient pas sur une ligne à 12 px : il se coupe alors à un trait d'union. */
.hero__titre span b { font-weight: inherit; }
@media (min-width: 360px) { .hero__titre span b { white-space: nowrap; } }

.hero__actions { margin-top: clamp(78px, 14vh, 175px); display: flex; flex-wrap: wrap; gap: 12px; }
.hero__actions .bouton { flex: 1 1 auto; }
/* Trois boutons (l'accueil) : au téléphone, Réserver tient toute la ligne et
   les deux autres se partagent la suivante ; dès 861 px, les trois en ligne. */
@media (max-width: 860px) {
  .hero__actions--trois .bouton--primaire { flex-basis: 100%; }
  .hero__actions--trois .bouton--second { flex: 1 1 0; padding-inline: 16px; }
}

/* Le repère de défilement, discret, au centre du pied — sur grand écran
   seulement : au doigt, on sait qu'on fait défiler. */
.hero__repere {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(var(--couture) + 8px);
  translate: -50% 0;
  width: 24px;
  height: 38px;
  border: 1.5px solid rgb(255 255 255 / .42);
  border-radius: var(--arrondi-pilule);
}
.hero__repere::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  translate: -50% 0;
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: var(--rouge-braise);
  animation: glisse 1.9s var(--courbe) infinite;
}
@keyframes glisse {
  0%,
12% { opacity: 0; transform: translateY(0); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(13px); }
}

@media (min-width: 861px) {
  .hero { min-height: 100svh; }
  .hero__image img { object-position: center 58%; }
  .hero__actions .bouton { flex: 0 1 auto; }
  .hero__repere { display: block; }

  /* En paysage, trois couches : la diagonale qui creuse le coin du texte, le
     pied qui accroche la page, le bandeau du haut qui tient la barre flottante. */
  .hero__voile {
    background:
      linear-gradient(102deg, rgb(18 3 5 / .90) 0%,  rgb(18 3 5 / .70) 28%,
                              rgb(18 3 5 / .28) 56%, rgb(18 3 5 / 0)   78%),
      linear-gradient(to top,  rgb(18 3 5 / .92) 0%,  rgb(18 3 5 / .34) 26%,
                               rgb(18 3 5 / 0)   48%),
      linear-gradient(to bottom, rgb(18 3 5 / .58) 0%, rgb(18 3 5 / 0) 22%);
  }

  .hero__titre img { width: clamp(240px, 32vw, 440px); }
}

/* ─── L'entrée ────────────────────────────────────────────────────────────────
   Une seule fois, au chargement : la photo s'éclaire et recule d'un souffle,
   puis le titre, la phrase et les boutons montent l'un après l'autre. Un peu
   plus d'une seconde en tout. Courbe qui freine en arrivant, jamais de rebond.
   Rien n'est caché en attendant un script : ce sont des animations CSS, qui
   partent d'elles-mêmes. Moins d'animations demandé = tout est là d'emblée. */
@media (prefers-reduced-motion: no-preference) {
  .hero__image img { animation: hero-photo 1.8s cubic-bezier(.16, 1, .3, 1) both; }
  .hero__titre { animation: hero-monte .9s cubic-bezier(.16, 1, .3, 1) .15s both; }
  .hero__titre span { animation: hero-monte .9s cubic-bezier(.16, 1, .3, 1) .38s both; }
  .hero__actions { animation: hero-monte .9s cubic-bezier(.16, 1, .3, 1) .56s both; }
}
@keyframes hero-photo {
  from { transform: scale(1.06); filter: brightness(.72); }
  to   { transform: none; filter: none; }
}
@keyframes hero-monte {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Le hero de l'accueil : le braséro ───────────────────────────────────────
   Cadrage validé par Angelo sur maquette (01/11/2026, CADRAGE-hero-brasero.md) :
   le texte reste à gauche sur le sombre, le feu reste à droite, lumineux, dans
   ses vraies couleurs, jamais sous le texte. Tout passe par .hero--accueil :
   les heros des autres pages ne bougent pas.
   Les règles visent img ET video : la photo d'attente, la vidéo en boucle
   (02/11/2026) et la vidéo lue en image (le secours de l'iPhone en économie
   d'énergie, scripts/hero.js) ont la même boîte et le même cadrage. */
.hero--accueil .hero__image picture { height: 100%; }
.hero--accueil .hero__video,
.hero--accueil .hero__boucle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* La vidéo reste invisible tant qu'elle ne tourne pas : jamais de bouton
   lecture ni d'image noire, la photo du dessous tient la place. */
.hero--accueil .hero__video { opacity: 0; transition: opacity .6s ease-out; }
.hero--accueil .hero__video.joue { opacity: 1; }
.hero--accueil .hero__video::-webkit-media-controls-start-playback-button { display: none !important; }

/* L'entrée (la photo s'éclaire et recule) porte ici sur la BOÎTE : la vidéo,
   qui arrive une fraction de seconde après la photo, la suit sans décalage. */
@media (prefers-reduced-motion: no-preference) {
  .hero--accueil .hero__image { animation: hero-photo 1.8s cubic-bezier(.16, 1, .3, 1) both; }
  .hero--accueil .hero__image picture img { animation: none; }
  .hero--accueil .hero__boucle { animation: hero-fondu .6s ease-out both; }
}
@keyframes hero-fondu { from { opacity: 0; } }

/* Téléphone : la photo ne bouge pas, c'est la gauche qui fonce. Vaut aussi
   pour TOUT écran debout, tablettes comprises (Angelo, 02/11/2026) : avec la
   photo couchée, le logo tombait sur le bois clair (768 px) et le feu sortait
   de l'écran (iPad Pro, 1024 × 1366). index.html leur sert la photo debout
   (le même media sur le <source>). */
@media (max-width: 760px), (orientation: portrait) {
  .hero--accueil .hero__image :is(img, video) { object-position: 35% 50%; }
  .hero--accueil .hero__voile {
    background:
      linear-gradient(100deg, rgb(18 3 5 / .90) 0%,  rgb(18 3 5 / .76) 34%,
                              rgb(18 3 5 / .34) 60%, rgb(18 3 5 / 0)   80%),
      linear-gradient(to top, rgb(18 3 5 / .94) 0%,  rgb(18 3 5 / .66) 24%,
                              rgb(18 3 5 / .20) 44%, rgb(18 3 5 / 0)   58%),
      linear-gradient(to bottom, rgb(18 3 5 / .55) 0%, rgb(18 3 5 / 0) 16%);
  }
}

/* Ordinateur : la BOÎTE de la photo est élargie à 115 % vers la droite (le
   hero coupe le surplus), ce qui pousse le feu à droite du texte. Pas de
   transform sur l'image pour ça : l'entrée hero-photo l'écraserait.
   Vaut pour tout écran couché de plus de 760 px, téléphones couchés de 761 à
   860 px compris : avec l'ancien voile, le logo rouge y tombait sur la cuisine
   (Angelo, 02/11/2026). Les deux media se complètent exactement. */
@media (min-width: 761px) and (orientation: landscape) {
  .hero--accueil .hero__image { display: block; inset: 0 auto 0 0; width: 115%; max-width: none; }
  .hero--accueil .hero__image :is(img, video) { object-position: left 62%; }
  .hero--accueil .hero__voile {
    background:
      linear-gradient(100deg, rgb(18 3 5 / .92) 0%,  rgb(18 3 5 / .78) 30%,
                              rgb(18 3 5 / .34) 52%, rgb(18 3 5 / 0)   70%),
      linear-gradient(to top,  rgb(18 3 5 / .92) 0%,  rgb(18 3 5 / .34) 26%,
                               rgb(18 3 5 / 0)   48%),
      linear-gradient(to bottom, rgb(18 3 5 / .58) 0%, rgb(18 3 5 / 0) 22%);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   2. LE LIEU
   ══════════════════════════════════════════════════════════════════════════════ */
.lieu .enveloppe {
  display: grid;
  justify-items: center;
  gap: clamp(28px, 3.4vw, 46px);
}

/* ─── La galerie ─────────────────────────────────────────────────────────────
   Les vraies photos du restaurant, chacune en deux cadrages fournis par Angelo.

   Sur téléphone : les trois photos en PORTRAIT, côte à côte, qu'on fait
   défiler au pouce. La suivante dépasse du bord de l'écran : c'est elle qui
   dit qu'il y a une suite, sans flèche ni légende. Empilées, trois photos en
   hauteur feraient trois écrans ; en rang, elles en font la moitié d'un.
   Le rang déborde jusqu'aux bords de l'écran (marges négatives de la
   gouttière) : une photo coupée au bord de la page, c'est un geste voulu ; une
   photo coupée dans la marge, c'est un accident.

   Sur grand écran : la terrasse, ce qu'on voit en arrivant, tient les deux
   tiers en PAYSAGE ; la salle et le terrain se rangent en colonne à côté.
   ─────────────────────────────────────────────────────────────────────────── */
.galerie {
  justify-self: stretch;
  margin-inline: calc(-1 * var(--gouttiere));
  /* De la place pour l'ombre des photos : un rang qui défile coupe tout ce qui
     dépasse de sa boîte. Les marges négatives rendent ce jeu à la page. */
  padding: 8px var(--gouttiere) 30px;
  margin-block: -8px -30px;
  display: grid;
  grid-auto-flow: column;
  /* Une carte en 2:3 ne dépasse jamais l'écran utile : téléphone tourné, elle
     garde son portrait et rétrécit, et l'on en voit plus à la fois. */
  grid-auto-columns: min(78vw, 340px, calc(var(--ecran-utile) * 2 / 3));
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gouttiere);
  scrollbar-width: none;
}
.galerie::-webkit-scrollbar { display: none; }
.galerie:focus-visible { outline: 3px solid var(--rouge-vif); outline-offset: -3px; }

.galerie li { display: grid; scroll-snap-align: start; }

/* C'est l'ombre portée qui détache la photo du crème, et elle est la même
   partout : c'est elle qui fait la famille. */
.galerie figure {
  position: relative;
  margin: 0;
  display: grid;
  overflow: hidden;
  border-radius: var(--arrondi-image);
  background: var(--page-creuse);
  box-shadow: var(--ombre-image);
}

.galerie picture { grid-area: 1 / 1; display: block; min-width: 0; }

.galerie img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

/* L'étiquette est posée sur l'image, sur un pied d'ombre qui la rend lisible
   quelle que soit la photo. */
.galerie figcaption {
  grid-area: 1 / 1;
  align-self: end;
  /* Au-dessus de la photo : sur ordinateur, la grande photo (la terrasse) est
     posée en position absolue, et recouvrait sa légende (Angelo, 01/11/2026 :
     « il y a terrain de boules, il y a bar, mais il n'y a pas terrasse »). */
  position: relative;
  z-index: 1;
  padding: 44px clamp(16px, 1.6vw, 24px) clamp(14px, 1.4vw, 20px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgb(12 2 3 / .82), rgb(12 2 3 / 0));
}

@media (min-width: 760px) {
  .galerie {
    margin: 0;
    padding: 0;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 20px);
    overflow: visible;
    scroll-snap-type: none;
    /* La mosaïque fait 0,45 fois sa largeur de haut : téléphone tourné, elle
       se resserre (au centre) pour tenir dans l'écran utile. */
    width: min(100%, calc(var(--ecran-utile) * 2.2));
    justify-self: center;
  }
  .galerie img { aspect-ratio: 3 / 2; }
  .galerie li:first-child { grid-column: span 2; grid-row: span 2; }
  /* La grande photo prend exactement la hauteur des deux petites : sortie du
     flux, elle ne pousse plus les rangs avec sa propre proportion. */
  .galerie li:first-child picture { position: relative; }
  .galerie li:first-child img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* ─── Le pied : où c'est, et comment y aller ──────────────────────────────
   Le visiteur de passage cherche l'adresse et le chemin ; il les trouve ici,
   sous les photos, sur une plaque pleine : la déco peut passer derrière sans
   jamais gêner la lecture. */
.lieu__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  padding: 16px clamp(18px, 2.4vw, 28px);
  border-radius: var(--arrondi);
  background: rgb(255 255 255 / .96);
  box-shadow: var(--ombre-douce);
}
.lieu__adresse {
  margin: 0;
  display: grid;
  font-size: 15px;
  line-height: 1.45;
  color: var(--encre);
}
.lieu__adresse b { font-weight: 700; white-space: nowrap; }
.lieu__parking { margin-top: 4px; font-size: 14px; color: var(--sourdine); }

/* ══════════════════════════════════════════════════════════════════════════════
   3. LA CARTE, LE LIVRE
   Le livre a une taille fixe, en pixels à lui, et deux géométries :
     · en web, une double page à l'italienne, 700 x 860 par page
     · en mobile, une page seule à la française, 560 x 980
   Ce n'est pas la même page rétrécie, c'est un autre livre, avec ses propres
   images et son propre corps de texte. C'est le script qui bascule de l'une à
   l'autre et qui met le tout à l'échelle.
   ══════════════════════════════════════════════════════════════════════════════ */
.carte .enveloppe {
  display: grid;
  justify-items: center;
  gap: clamp(22px, 2.6vw, 38px);
}

.livre {
  /* Un livre fermé et un livre ouvert n'ont pas la même forme, et le jeu
     d'images mobile n'a pas les mêmes proportions que celui du web. Chaque
     état a donc sa boîte, calée au centième sur son image : rien n'est étiré,
     rien n'est rogné. Le livre reste TOUJOURS une double page.
     --page-* : une page du livre ouvert. --couv-* : la couverture, avec SA
     taille (elle couvre la page, comme les plats d'un vrai livre). Le livre a
     une seule échelle, ouvert ou fermé : en s'ouvrant il double de largeur, il
     ne zoome pas, et rien n'est jamais déformé (26/10/2026). */
  /* Les mesures viennent des images d'Angelo (.claude/livre-pages.py, qui les
     découpe et les affiche) : chaque case a EXACTEMENT la proportion de son
     image, rien n'est étiré. La couverture couvre toute la page, comme les
     plats d'un vrai livre. */
  --page-l: 700px;
  --page-h: 855.7px;   /* page web, 733 × 896 dans l'image, 0.818 */
  --couv-l: 700px;
  --couv-h: 892.2px;   /* couverture web, 976 × 1244, 0.785 */
  --echelle: 1;
  --camera: 0px;
  position: relative;
  width: 100%;
  display: grid;
  justify-items: center;
  gap: clamp(16px, 2vw, 26px);
}

/* La géométrie mobile : la même double page, dans le cadrage du jeu d'images
   mobile, qui est beaucoup moins large. */
.livre--mobile {
  --page-l: 527px;   --page-h: 932.9px;   /* page mobile, 444 × 786, 0.565 */
  --couv-l: 661.9px; --couv-h: 932.9px;   /* couverture mobile, 801 × 1129, 0.710 */
}

/* ─── La fluidité (22/10/2026) ───────────────────────────────────────────────
   Angelo : « le livre lag un peu quand on l'ouvre et quand on le ferme ».
   Mesuré : on animait la largeur, la hauteur et la position du livre, de
   chaque feuille, de la table et de l'ombre — mise en page et peinture à
   CHAQUE image (≈ 800 peintures pour une ouverture et une fermeture), et la
   scène changeait de hauteur d'un coup (les boutons sautaient de 96 px sur
   téléphone).
   Désormais RIEN ne change de taille pendant le mouvement : toutes les boîtes
   gardent leur taille, et c'est une transformation qui les fait passer d'un
   état à l'autre (échelle, glissement, rotation) — ce que la carte graphique
   fait seule, sans recalcul ni repeinture. Les mesures viennent du script.
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── Pas d'animation tant que le livre n'est pas posé (01/11/2026) ──────────
   Au chargement, le script donne au livre sa taille, sa place et son état.
   Avec les transitions actives, ces premières valeurs s'ANIMAIENT depuis la
   taille réelle du livre (énorme) : un livre géant qui se réduisait, ou,
   quand l'animation ne partait pas (onglet en arrière-plan, Safari d'iPhone),
   un livre figé dans cette position de départ. livre.js ajoute livre--pret
   une fois tout posé ; seules l'ouverture et la fermeture s'animent. */
.livre:not(.livre--pret) * { transition: none !important; }

/* ─── La table, et l'ombre du livre ──────────────────────────────────────────
   Toutes deux posées DERRIÈRE la scène, dans l'ordre : table, ombres, puis le
   livre lui-même.
   ─────────────────────────────────────────────────────────────────────────── */
.livre__table,
.livre__socle {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* LE SAFARI DE L'IPHONE (30/10/2026). Livre ouvert, la couverture avait tourné
   mais le livre, son ombre et sa table restaient en position « fermé » : sur
   le vrai Safari d'iOS, les éléments marqués will-change et déplacés par des
   variables CSS héritées ne bougeaient plus, alors que les feuilles, dont le
   script écrit la position directement, tournaient. Le livre, la table et les
   ombres sont donc tous traités comme les feuilles : AUCUN will-change, et
   leur transformation est écrite par livre.js sur l'élément lui-même. */

.livre__table {
  /* Sa boîte est la plus grande des deux (livre fermé, livre ouvert) ; une
     échelle la ramène à la taille de l'état du moment. L'image est étirée
     dans cette boîte — c'est voulu, c'est ce qui donne la légère plongée. Le
     plateau tient toujours dans la largeur de la page : la table ronde ne
     déborde jamais du site.
     Le livre n'est pas au milieu du plateau : il est POSÉ dessus. C'est le
     bord AVANT du plateau qui est calé (--table-bas), un peu en avant du bas
     du livre — d'où l'origine en bas. */
  width: var(--table-l, 0px);
  height: var(--table-h, 0px);
  max-width: 100%;
  object-fit: fill;
  transform-origin: 50% 100%;
  transform: translateX(-50%);   /* le reste : livre.js */
  transition: transform var(--duree-longue) var(--courbe);
}

/* L'ombre du livre : DEUX ombres, celle du livre fermé et celle du livre
   ouvert, chacune exacte au repos ; elles se relaient en fondu. On n'anime
   plus jamais la taille d'un grand flou, qui se repeignait à chaque image.
   Pendant le mouvement, l'ombre suit la COUVERTURE et non une moyenne : son
   bord droit reste collé à la page de droite (--socle-x), et elle ne s'étend
   vers la gauche que quand la couverture s'y couche. Avant, elle s'élargissait
   tout de suite et laissait voir un rectangle clair au coin de la table. */
.livre__socle {
  top: calc(var(--hauteur-scene, 0px) / 2);
  border-radius: 6px;
  box-shadow: 0 26px 40px rgb(0 0 0 / .55), 0 4px 10px rgb(0 0 0 / .4);
  transform-origin: 100% 50%;   /* la transformation : livre.js */
}
/* Une ombre ne doit JAMAIS dépasser du livre : son cadre se verrait. Celle
   de l'état qu'on quitte s'efface donc en 0,06 s ; celle de l'état qui vient
   n'apparaît qu'une fois la couverture couchée.
   À l'OUVERTURE, la couverture passe la tranche à 0,12 s et se couche vite. */
.livre[data-ouvert] .livre__socle {
  transition: transform var(--duree-longue) var(--courbe),
              opacity .25s linear .3s;
}
/* L'ombre du livre fermé se resserre sur la page de droite au même rythme
   que le livre (même durée, même courbe que la caméra) : son bord gauche
   reste pile sur la reliure. */
.livre[data-ouvert] .livre__socle--ferme {
  transition: transform var(--duree-longue) var(--courbe),
              opacity .06s linear;
}
/* À la FERMETURE, la couverture quitte la page de gauche en 0,12 s et se
   pose sur la droite vers 0,4 s. */
.livre:not([data-ouvert]) .livre__socle {
  transition: transform var(--duree-longue) var(--courbe),
              opacity .06s linear;
}
/* L'ombre du livre fermé ne revient qu'une fois la couverture POSÉE (vers
   0,45 s) : avant, la couverture encore penchée ne la recouvrait pas, et son
   bord se voyait à droite comme un rectangle clair. */
.livre:not([data-ouvert]) .livre__socle--ferme {
  transition: transform var(--duree-longue) var(--courbe),
              opacity .3s linear .45s;
}
.livre__socle--ferme  { width: var(--socle-f-l, 0px); height: var(--socle-f-h, 0px); }
.livre__socle--ouvert { width: var(--socle-o-l, 0px); height: var(--socle-o-h, 0px); }

.livre__scene {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Hauteur de repli avant que le script ne la cale sur le livre : la plus
     grande des deux (fermé, ouvert), pour que rien ne bouge dessous. */
  height: clamp(360px, 52svh, 700px);
  overflow: hidden;
  perspective: 2600px;
  perspective-origin: 50% 50%;
  touch-action: pan-y;
}

/* La boîte du livre est assez grande pour ses DEUX formes (la couverture
   fermée est plus large que la page sur téléphone, plus haute sur ordinateur) :
   la reliure est en son milieu, et rien ne déborde, ni fermé ni ouvert. */
.livre { --boite-l: max(var(--page-l), var(--couv-l)); --boite-h: max(var(--page-h), var(--couv-h)); }

.livre__echelle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--boite-l) * 2);
  height: var(--boite-h);
  margin: calc(var(--boite-h) / -2) 0 0 calc(var(--boite-l) * -1);
  /* L'échelle du livre, et sa pose au bas de la scène : livre.js. */
  transform-style: preserve-3d;
  transition: transform var(--duree-longue) var(--courbe);
}

.livre__bloc {
  position: absolute;
  inset: 0;
  /* Le glissement (livre fermé recentré) : livre.js. */
  transform-style: preserve-3d;
  transition: transform var(--duree-longue) var(--courbe);
}

/* ─── Une feuille ────────────────────────────────────────────────────────────
   Elle pivote sur sa reliure. Recto et verso sont dos à dos : c'est
   backface-visibility qui fait qu'on ne voit jamais les deux à la fois.
   ─────────────────────────────────────────────────────────────────────────── */
.livre__feuille {
  position: absolute;
  left: var(--boite-l);
  top: calc((var(--boite-h) - var(--page-h)) / 2);
  width: var(--page-l);
  height: var(--page-h);
  transform-origin: left center;
  transform-style: preserve-3d;
  /* .85s : la même valeur que DUREE_COUVERTURE dans livre.js. La feuille ne
     change jamais de taille ni de forme : elle tourne, c'est tout. */
  transition: transform .85s var(--courbe);
}

.livre__face {
  position: absolute;
  inset: 0;
  /* Le rognage est sur le contenu (.livre__contenu), pas sur la face : une
     face rognée aux coins arrondis est un cas où WebKit oublie
     backface-visibility. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 3px;
}
.livre__face--recto { transform: rotateY(0deg); }
.livre__face--verso { transform: rotateY(180deg); }

/* LA FACE VISIBLE EST AUSSI CHOISIE PAR LE SCRIPT. Dans le moteur de Safari,
   le dos d'une feuille ouverte apparaissait EN MIROIR par-dessus son recto
   (vu le 22/10/2026) : backface-visibility seul ne suffit pas. livre.js pose
   livre__feuille--tournee sur chaque feuille tournée ; la face cachée devient
   invisible, et l'échange se fait quand la feuille passe la tranche (90°),
   soit 0,12 s après le départ avec la courbe du site sur 0,85 s. */
.livre__face { transition: visibility 0s linear .12s; }
.livre__face--verso { visibility: hidden; }
.livre__feuille--tournee > .livre__face--verso { visibility: visible; }
.livre__feuille--tournee > .livre__face--recto { visibility: hidden; }

/* Les pages (26/10/2026) : la gauche et la droite sont les deux moitiés
   EXACTES du livre ouvert d'Angelo, coupées au milieu du dos ; côte à côte,
   elles redonnent son image au pixel près. Leur case a leur proportion : elles
   ne sont plus étirées. */
.livre__face--recto { background-image: url("/medias/livre-web-droite-733.webp"); }
.livre__face--verso { background-image: url("/medias/livre-web-gauche-733.webp"); }

/* La couverture a SA taille, celle de son image, et non celle d'une page :
   elle couvre la page en entier (plus haute sur ordinateur, plus large sur
   téléphone), posée sur le dos, centrée en hauteur. Elle n'est donc jamais
   déformée, et la page qu'elle porte au dos garde la sienne : en tournant,
   l'une remplace l'autre à la tranche (90°), comme les plats d'un vrai
   livre, plus grands que ses pages. */
.livre__feuille--couverture {
  width: var(--couv-l);
  height: var(--couv-h);
  top: calc((var(--boite-h) - var(--couv-h)) / 2);
}
.livre__feuille--couverture .livre__face--recto {
  background-image: url("/medias/livre-couverture-web-760.webp");
}
/* La page collée au dos de la couverture : à la taille d'une page, contre le
   dos, centrée en hauteur. */
.livre__feuille--couverture .livre__face--verso {
  inset: auto;
  left: 0;
  top: calc((var(--couv-h) - var(--page-h)) / 2);
  width: var(--page-l);
  height: var(--page-h);
}

/* Les images du livre mobile, découpées de la même façon. */
.livre--mobile .livre__face--recto { background-image: url("/medias/livre-mobile-page-droite-444.webp"); }
.livre--mobile .livre__face--verso { background-image: url("/medias/livre-mobile-page-gauche-444.webp"); }
.livre--mobile .livre__feuille--couverture .livre__face--recto {
  background-image: url("/medias/livre-couverture-mobile-660.webp");
}

/* En mobile la double page est bien plus petite à l'écran : le texte grandit
   dans le repère du livre pour rester lisible, donc il y a moins de mots par
   page. Voir la note de mesure dans ETAPE-0. */
/* Le cadre décoratif des pages mobiles est plus large que celui des pages web :
   le texte doit rentrer davantage pour ne pas passer dessous. */
.livre--mobile .livre__contenu { font-size: 32px; line-height: 1.5; inset: 15% 14% 13%; }
.livre--mobile .livre__contenu .livre__titre { font-size: 54px; }
.livre--mobile .livre__surtitre { font-size: 23px; margin-bottom: 10px; }
.livre--mobile .livre__filet { margin: 12px 0 18px; }
.livre--mobile .livre__contenu ul { gap: 18px; }
.livre--mobile .livre__contenu li { padding-bottom: 12px; }
.livre--mobile .livre__folio { font-size: 24px; }
.livre--mobile .livre__contenu .carte-texte__attente,
.livre--mobile .livre__contenu .carte-texte__note { font-size: 27px; }
/* Le livre mobile est réduit au tiers environ sur un téléphone : les menus
   étant courts, leur texte y est écrit bien plus gros, pour arriver à
   13-17 px à l'écran (mesuré à 390 px de large). */
.livre--mobile .livre__menu .livre__titre { font-size: 68px; }
.livre--mobile .livre__menu .livre__surtitre { font-size: 30px; }
.livre--mobile .livre__contenu .carte-texte__formule { font-size: 50px; }
.livre--mobile .livre__contenu .carte-texte__formule .carte-texte__prix { font-size: 104px; }
.livre--mobile .livre__contenu .carte-texte__detail { font-size: 39px; line-height: 1.3; }
.livre--mobile .livre__contenu .carte-texte__rubrique { font-size: 30px; margin-bottom: 14px; }
.livre--mobile .livre__contenu ul + .carte-texte__rubrique { margin-top: 52px; }
.livre--mobile .livre__contenu li { font-size: 50px; line-height: 1.2; }
.livre--mobile .livre__contenu li .carte-texte__desc { font-size: 39px; line-height: 1.3; }
.livre--mobile .livre__contenu .livre__fin { font-size: 54px; }

/* L'ombre que la feuille en mouvement jette sur celle d'en dessous. */
.livre__ombre {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to right, rgb(30 4 6 / .6), rgb(30 4 6 / .16) 46%, transparent);
  transition: opacity var(--duree) var(--courbe);
}
.livre__feuille--bouge .livre__ombre { opacity: 1; }

/* ─── Le contenu d'une page ─────────────────────────────────────────────────
   Les tailles sont exprimées dans le repère du livre, pas dans celui de
   l'écran : c'est la mise à l'échelle qui s'occupe du reste.
   ─────────────────────────────────────────────────────────────────────────── */
.livre__contenu {
  position: absolute;
  /* Le haut descend sous les ornements d'angle des pages (ils finissent à
     12 % de la hauteur, mesuré sur les pages découpées le 26/10/2026). */
  inset: 14% 12% 11%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #5b3a2e;
  font-size: 21px;
  line-height: 1.6;
}

/* Les grands titres des pages de garde du livre. Du texte mis en forme, pas
   des titres : le livre est l'habillage de la version texte, qui porte les
   vrais titres. Sinon la page sauterait de h2 à h4. */
.livre__contenu .livre__titre {
  margin: 0 0 6px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--rouge);
}

.livre__filet {
  height: 1px;
  margin: 14px 0 22px;
  background: linear-gradient(90deg, rgb(163 18 28 / .5), rgb(163 18 28 / .08));
}

.livre__contenu ul { display: grid; gap: 13px; }
.livre__contenu li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px dotted rgb(91 58 46 / .3);
  padding-bottom: 8px;
}
.livre__contenu p { margin-top: 12px; color: #7a5544; }
.livre__contenu .carte-texte__attente,
.livre__contenu .carte-texte__note { font-size: 18px; color: #93705d; }

/* Les menus (Angelo, 22/10/2026). Page de garde : la formule et son prix, en
   grand, et ce qu'elle comprend. Page des plats : chaque rubrique en
   surtitre, le plat en gras, sa précision dessous. Les tailles sont celles
   du livre web ; le livre mobile a les siennes, plus bas. */
.livre__formule { display: grid; gap: 8px; margin-top: 6px; }
.livre__contenu .carte-texte__formule {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 31px;
  font-weight: 800;
  color: #4a2a20;
}
.livre__contenu .carte-texte__formule .carte-texte__prix {
  font-family: var(--affiche);
  font-size: 66px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--rouge);
}
.livre__contenu .carte-texte__detail { margin: 0; font-size: 24px; color: #7a5544; }
.livre__contenu .carte-texte__rubrique {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgb(91 58 46 / .65);
}
.livre__contenu ul + .carte-texte__rubrique { margin-top: 38px; }
.livre__contenu li {
  display: grid;
  gap: 2px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.25;
  color: #4a2a20;
}
.livre__contenu li .carte-texte__desc { font-size: 24px; font-weight: 400; line-height: 1.4; color: #7a5544; }
/* La signature, en bas de la page des plats, juste au-dessus du folio. */
.livre__contenu .livre__fin {
  margin-top: auto;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--rouge);
}
.livre__contenu .livre__fin + .livre__folio { margin-top: 0; }

.livre__folio {
  margin-top: auto;
  padding-top: 16px;
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgb(163 18 28 / .5);
}

.livre__surtitre {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgb(91 58 46 / .65);
  margin-bottom: 12px;
}

/* ─── Les zones de navigation ───────────────────────────────────────────────
   Deux moitiés d'écran invisibles, avec un chevron discret. Elles n'existent
   que quand le livre est ouvert.
   ─────────────────────────────────────────────────────────────────────────── */
.livre__zone {
  position: absolute;
  top: 12%;
  bottom: 12%;
  width: 22%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: none;
}
.livre[data-ouvert] .livre__zone { display: block; }
.livre__zone--prec { left: 1%; }
.livre__zone--suiv { right: 1%; }

.livre__zone::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  border: solid var(--rouge-vif);
  border-width: 0 0 2px 2px;
  opacity: .55;
  transition: opacity var(--duree) var(--courbe);
}
.livre__zone--prec::after { left: 6px;  transform: rotate(45deg); }
.livre__zone--suiv::after { right: 6px; transform: rotate(-135deg); }
.livre__zone:hover::after { opacity: 1; }
/* Rien à tourner de ce côté : ni chevron, ni zone. Avec les menus, tout tient
   sur une double page, et deux chevrons pâles invitaient à tourner dans le
   vide (22/10/2026). */
.livre__zone[disabled] { visibility: hidden; }

.livre__pastilles {
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  display: none;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}
.livre[data-ouvert] .livre__pastilles { display: flex; }
.livre__pastilles i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--encre);
  opacity: .24;
  transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.livre__pastilles i.actif { opacity: .95; transform: scale(1.35); background: var(--rouge-vif); }

/* ─── Les onglets ─────────────────────────────────────────────────────────── */
/* Les onglets passent DEVANT le plateau : le bord avant de la table descend
   d'une vingtaine de pixels sur eux, et une pastille au verre translucide
   laisserait voir le bois au travers. */
.livre__onglets {
  position: relative;
  z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}

.livre__onglet {
  min-height: 46px;
  padding: 0 clamp(16px, 2vw, 26px);
  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: .12em;
  text-transform: uppercase;
  color: var(--sourdine);
  cursor: pointer;
  transition: background var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe),
              color var(--duree) var(--courbe);
}
.livre__onglet:hover { border-color: var(--rouge-vif); color: var(--rouge-texte); }
/* Les plus petits téléphones : « Samedi midi » et « Dimanche midi » tiennent
   sur une seule ligne. */
@media (max-width: 360px) {
  .livre__onglet { padding-inline: 12px; letter-spacing: .07em; }
}
.livre__onglet[aria-selected="true"] {
  background: var(--rouge-vif);
  border-color: var(--rouge-vif);
  color: #fff;
}

/* ─── La carte en texte ──────────────────────────────────────────────────────
   Elle est la source du livre, donc elle est toujours dans la page. Repliée,
   elle reste lisible par Google et par un lecteur d'écran.
   ─────────────────────────────────────────────────────────────────────────── */
.carte-texte { width: 100%; max-width: 900px; }

/* Sous le livre, le traiteur : un seul bouton, centré. */
.carte__traiteur { margin: 0; display: flex; justify-content: center; width: 100%; }
.carte__traiteur .bouton { max-width: 100%; }
/* Sur les plus petits téléphones, le texte passe sur deux lignes au lieu
   d'élargir la page. */
@media (max-width: 419px) {
  .carte__traiteur .bouton { min-height: 56px; white-space: normal; text-align: center; line-height: 1.3; }
}

.carte-texte summary {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  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: .18em;
  text-transform: uppercase;
  color: var(--sourdine);
  cursor: pointer;
  list-style: none;
}
.carte-texte summary::-webkit-details-marker { display: none; }
.carte-texte summary::after { content: " +"; margin-left: 8px; color: var(--rouge-texte); }
.carte-texte[open] summary::after { content: " –"; }
.carte-texte summary:hover { border-color: var(--rouge-vif); color: var(--rouge-texte); }

.carte-texte__corps {
  margin-top: 20px;
  display: grid;
  gap: clamp(20px, 2.2vw, 30px);
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--arrondi);
  border: 1px solid var(--verre-bord);
  background: rgb(255 255 255 / .74);
  box-shadow: var(--ombre-douce);
}

@media (min-width: 760px) {
  .carte-texte__corps { grid-template-columns: 1fr 1fr; }
}

.carte-texte h3 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--interlettre);
  text-transform: uppercase;
  color: var(--rouge-texte);
  margin-bottom: 12px;
}
.carte-texte ul { display: grid; gap: 7px; }
.carte-texte li,
.carte-texte p { color: var(--sourdine); }
.carte-texte__attente,
.carte-texte__note { margin-top: 10px; font-size: 14px; color: var(--eteint); }
/* Les menus, dans la version texte. */
.carte-texte .carte-texte__formule { margin: 0; font-weight: 800; color: var(--encre); }
.carte-texte .carte-texte__formule .carte-texte__prix { margin-left: 6px; color: var(--rouge-texte); }
.carte-texte .carte-texte__detail { margin: 2px 0 0; font-size: 15px; }
.carte-texte .carte-texte__rubrique {
  margin: 16px 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--eteint);
}
.carte-texte li { font-weight: 700; color: var(--encre); }
.carte-texte__desc { display: block; font-size: 15px; font-weight: 400; color: var(--sourdine); }

/* ══════════════════════════════════════════════════════════════════════════════
   4. NOS SERVICES
   Des images, et leur nom posé dessus. Rien d'autre : ce qu'on vend ici se
   regarde, il ne se lit pas.
   ══════════════════════════════════════════════════════════════════════════════ */
.services .enveloppe {
  display: grid;
  justify-items: center;
  gap: clamp(28px, 3.4vw, 46px);
}

.services__grille {
  width: 100%;
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
  grid-template-columns: minmax(0, 1fr);
}

/* Trois images en grand, côte à côte, mais seulement quand il y a vraiment la
   place. À 700 px de large, trois colonnes donnaient des vignettes de 210 px :
   on préfère une seule colonne et des images qui tiennent leur rang. */
@media (min-width: 760px) { .services__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.service { display: grid; }

.service__vue {
  position: relative;
  margin: 0;
  width: 100%;
  display: grid;
  overflow: hidden;
  border-radius: var(--arrondi-image);
  background: var(--page-creuse);
  box-shadow: var(--ombre-image);
}

.service__vue picture {
  grid-area: 1 / 1;
  display: block;
  min-width: 0;
}

/* Sur téléphone, même mise en page que la galerie du lieu : les trois
   services s'empilent, entiers, au même format. On sert alors le cadrage
   PAYSAGE de chaque photo (voir le <source> dans index.html) : le portrait est
   plafonné à 480 px par sa source et devenait mou en pleine largeur. */
.service__vue img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  max-height: var(--ecran-utile);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (min-width: 760px) { .service__vue img { aspect-ratio: 3 / 4; } }

.service__vue figcaption {
  grid-area: 1 / 1;
  align-self: end;
  padding: 72px clamp(16px, 1.6vw, 24px) clamp(16px, 1.6vw, 22px);
  font-size: clamp(12px, 1.1vw, 13px);
  font-weight: 800;
  letter-spacing: var(--interlettre);
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgb(12 2 3 / .86), rgb(12 2 3 / .3) 42%, rgb(12 2 3 / 0));
}

/* ══════════════════════════════════════════════════════════════════════════════
   5. ÉVÉNEMENTS, LE SLIDE À LA BOULE
   ══════════════════════════════════════════════════════════════════════════════ */
.soiree .enveloppe {
  display: grid;
  justify-items: center;
  gap: clamp(26px, 3.2vw, 44px);
}

.bascule {
  position: relative;
  /* Trois contraintes : la largeur disponible, une taille de confort, et
     surtout la hauteur d'écran — sinon un grand écran large donne un slide
     de 770 px de haut et la section déborde. */
  width: min(100%, 1000px, calc(54svh * 1.5), calc(var(--ecran-utile) * .8));
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--arrondi-image);
  background: var(--page-creuse);
  box-shadow: var(--ombre-image);
  user-select: none;
  touch-action: pan-y;
}

/* Un voile sombre en bas du cadre, sous les étiquettes : elles se lisent quelle
   que soit la photo (le gravier clair du terrain, surtout). Au-dessus des
   photos, en dessous des étiquettes et de la boule (z-index 1). */
.bascule::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / .5));
}

.bascule img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* L'image du dessus est rognée par son conteneur, et garde la largeur pleine
   du cadre : sans ça elle se comprimerait au lieu de se dévoiler. */
.bascule__dessus { position: absolute; inset: 0; width: 52%; overflow: hidden; }
.bascule__dessus img { width: var(--largeur-cadre, 100%); max-width: none; }

.bascule__trait {
  position: absolute;
  top: 0; bottom: 0;
  left: 52%;
  width: 2px;
  margin-left: -1px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent,
              rgb(255 255 255 / .9) 12%, rgb(255 255 255 / .9) 88%, transparent);
}

/* Les deux étiquettes. C'était deux pastilles grises translucides, presque
   invisibles : la section la plus forte du site et ses seules étiquettes
   n'osaient pas parler. Plus de fond, plus de pastille — le texte se pose
   directement sur la photo et c'est l'ombre portée qui le rend lisible,
   quelle que soit l'image qui passe dessous. */
.bascule__etat {
  position: absolute;
  bottom: clamp(14px, 1.8vw, 24px);
  z-index: 1;
  display: grid;
  gap: 3px;
  pointer-events: none;
  /* Deux ombres : la large pour l'ambiance, la serrée pour le bord des
     lettres — sans elle, « EN JOURNÉE » disparaît sur le gravier clair. */
  text-shadow: 0 1px 2px rgb(0 0 0 / .85), 0 2px 14px rgb(0 0 0 / .7);
}
.bascule__etat--jour { left: clamp(16px, 2vw, 28px); }
.bascule__etat--soir { right: clamp(16px, 2vw, 28px); text-align: right; }

.bascule__quand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #f0b9ab;
}

.bascule__quoi {
  font-family: var(--display);
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #fff;
}

/* L'indication disparaît à la première interaction, et ne revient pas. */
.bascule__indice {
  position: absolute;
  top: clamp(14px, 1.8vw, 24px);
  left: 50%;
  translate: -50% 0;
  padding: 8px 16px;
  border-radius: var(--arrondi-pilule);
  background: rgb(255 255 255 / .92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rouge-texte);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--duree) var(--courbe);
}
.bascule[data-touche] .bascule__indice { opacity: 0; }

/* Le rail est le vrai contrôle : invisible, mais atteignable au clavier.
   `pointer-events: none` est le point important : sans lui, ce rail couvre tout
   le cadre et capte la souris dès qu'elle passe dessus. Au clavier il reste
   focusable, ce qui n'a rien à voir avec le pointeur. */
.bascule__rail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.bascule__boule {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 52%;
  width: clamp(48px, 5vw, 66px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  background: radial-gradient(circle at 34% 28%, #f6f4f0, #bdb9b2 38%, #706c66 68%, #3c3935);
  box-shadow: 0 10px 26px rgb(0 0 0 / .6),
              inset 0 -6px 12px rgb(0 0 0 / .42),
              inset 0 4px 8px rgb(255 255 255 / .3);
}
.bascule__boule:active { cursor: grabbing; }
.bascule__boule::before,
.bascule__boule::after {
  content: "";
  position: absolute;
  inset: 14% 6%;
  border: 1px solid rgb(60 57 53 / .42);
  border-radius: 50%;
}
.bascule__boule::after { inset: 6% 14%; }
.bascule__rail:focus-visible ~ .bascule__boule {
  outline: 3px solid var(--rouge-vif);
  outline-offset: 4px;
}

@media (min-width: 620px) {
  .bascule { aspect-ratio: 3 / 2; width: min(100%, 1000px, calc(54svh * 1.5), calc(var(--ecran-utile) * 1.5)); }
}
/* Téléphone tourné : le slide passe en paysage, comme l'écran. */
@media (orientation: landscape) and (max-height: 500px) {
  .bascule { aspect-ratio: 3 / 2; width: min(100%, calc(var(--ecran-utile) * 1.5)); }
}

/* ─── La semaine, sur l'accueil ───────────────────────────────────────────────
   Angelo, 21/10/2026 : avec quatre événements, tout détailler ici faisait
   trop. Le slide à la boule reste la pièce maîtresse ; à côté, la VITRINE :
   quatre vignettes (une photo, le jour sur la plaque rouge des billets,
   l'événement, l'heure) qui mènent chacune à son billet de la page
   Événements. Ni prix ni programme : le détail ne vit qu'à un endroit.
   ─────────────────────────────────────────────────────────────────────────── */

/* La voix de l'affiche : les titres des soirées sont en Bebas Neue. Condensée,
   elle doit être plus grande que le Nunito pour peser autant. */
.titre-affiche {
  font-family: var(--affiche);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: .95;
  letter-spacing: .015em;
  text-wrap: balance;
}

.bascule__quoi {
  font-family: var(--affiche);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1;
  letter-spacing: .02em;
}

.jeudis {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.4vw, 32px);
}

/* Les vignettes : deux par ligne au téléphone, les quatre en ligne sur
   tablette, en carré de deux à côté du slide sur grand écran. */
.vitrine {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
}
.vitrine li { display: flex; }
.vignette {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ombre-douce);
  color: inherit;
  text-decoration: none;
  transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.vignette:hover { transform: translateY(-2px); box-shadow: var(--ombre-portee); }
.vignette:focus-visible { outline: 3px solid var(--rouge-vif); outline-offset: 3px; }
.vignette__photo {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--page-creuse);
}
.vignette__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Le jour, sur la même plaque rouge que les billets de la page Événements. */
.vignette__plaque {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 6px 10px 4px;
  border-radius: 10px;
  background: var(--rouge-vif);
  color: var(--os);
  box-shadow: 0 3px 10px rgb(18 3 5 / .28);
}
.vignette__jour {
  font-family: var(--affiche);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1;
  letter-spacing: .03em;
}
/* « Ce soir » ou « Aujourd'hui » : scripts/semaine.js, le jour même seulement. */
.vignette__signal {
  padding: 4px 8px 3px;
  border-radius: var(--arrondi-pilule);
  background: var(--os);
  color: var(--rouge-texte);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vignette__signal[hidden] { display: none; }
/* Petits téléphones : la vignette fait 135 px, « AUJOURD'HUI » en capitales
   espacées débordait de la plaque (mesuré à 320 px un dimanche, 01/11/2026). */
@media (max-width: 400px) {
  .vignette__plaque { padding: 6px 8px 4px; gap: 4px 6px; }
  .vignette__signal { padding: 3px 7px 2px; letter-spacing: .02em; text-transform: none; }
}
.vignette__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 10px;
  padding: 10px 12px 12px;
}
.vignette__nom { font-size: clamp(15px, 1.4vw, 17px); font-weight: 800; line-height: 1.25; color: var(--encre); }
.vignette__heure {
  font-family: var(--affiche);
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1;
  letter-spacing: .03em;
  color: var(--rouge-texte);
}

@media (min-width: 620px) and (max-width: 999px) {
  .vitrine { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Sur grand écran, le slide et la vitrine côte à côte, À LA MÊME HAUTEUR : le
   slide suit la hauteur des vignettes (ses photos sont recadrées au centre),
   et les photos des vignettes remplissent ce qui reste. */
@media (min-width: 1000px) {
  .jeudis {
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr);
    align-items: stretch;
  }
  .jeudis .bascule { width: 100%; height: 100%; min-height: 420px; aspect-ratio: auto; }
  .vitrine { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .vignette__photo { flex: 1; aspect-ratio: auto; min-height: 110px; }
}

/* Le déroulé : l'heure en grand, ce qui se passe à côté. */
.programme { list-style: none; margin: 0; padding: 0; display: grid; }
.programme li {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--trait);
}
.programme li:first-child { padding-top: 0; }
.panneau .programme li:last-child { border-bottom: 0; padding-bottom: 0; }
.programme__heure {
  font-family: var(--affiche);
  font-size: 28px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--rouge-texte);
}
.programme__quoi { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--encre); }

/* Le concours : les quatre chiffres de l'affiche. */
.concours {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.concours li {
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 11px 13px 12px;
  border-radius: 12px;
  background: var(--page);
}
.concours b {
  font-family: var(--affiche);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--rouge-texte);
}
.concours span { font-size: 13.5px; line-height: 1.35; color: var(--sourdine); }

/* ══════════════════════════════════════════════════════════════════════════════
   6. POURQUOI NOUS
   Celui qui hésite entre deux restaurants du village se demande « pourquoi
   ici ? ». La réponse : une phrase, quatre raisons vraies, un bouton.
   L'ambiance à gauche (une photo de taille maîtrisée, plus de portrait géant
   au milieu), les raisons à droite sur une plaque pleine. Sur téléphone, la
   photo passe en bandeau au-dessus.
   ══════════════════════════════════════════════════════════════════════════════ */
.raisons .enveloppe {
  display: grid;
  justify-items: center;
  gap: clamp(26px, 3.2vw, 44px);
}

.maison {
  width: 100%;
  display: grid;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
}
@media (min-width: 900px) {
  .maison { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.maison__vue {
  position: relative;
  width: 100%;
  margin: 0;
  display: grid;
  overflow: hidden;
  border-radius: var(--arrondi-image);
  background: var(--page-creuse);
  box-shadow: var(--ombre-image);
}
.maison__vue picture { grid-area: 1 / 1; display: block; min-width: 0; }
.maison__vue img {
  display: block;
  width: 100%;
  max-height: var(--ecran-utile);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 64%;
}
.maison__vue figcaption {
  grid-area: 1 / 1;
  align-self: end;
  padding: 44px clamp(16px, 1.6vw, 24px) clamp(14px, 1.4vw, 20px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgb(12 2 3 / .82), rgb(12 2 3 / 0));
}
@media (min-width: 900px) {
  .maison__vue { max-width: 440px; justify-self: end; }
  .maison__vue img { aspect-ratio: 4 / 5; object-position: 50% 50%; }
}

.maison__texte {
  display: grid;
  justify-items: start;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(20px, 2.6vw, 36px);
  border-radius: var(--arrondi);
  background: rgb(255 255 255 / .95);
  box-shadow: var(--ombre-douce);
}

.maison__phrase {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--encre);
  text-wrap: balance;
}

.atouts { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; }
@media (min-width: 620px) {
  .atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 32px); }
}

.atout {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: start;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--trait);
}
.atout svg {
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 50%;
  background: #fbece6;
  color: var(--rouge-texte);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.atout h3 { margin: 0 0 3px; font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--encre); }
.atout p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--sourdine); }

/* ══════════════════════════════════════════════════════════════════════════════
   7. CONTACT
   Deux colonnes de même hauteur : à gauche les deux fiches puis le plan qui
   prend toute la place qui reste, à droite le formulaire. Empilé, ce bloc
   faisait 1,7 écran de haut et laissait un grand vide sous les fiches ; ici
   c'est le formulaire qui donne la hauteur, et le plan la remplit.
   ══════════════════════════════════════════════════════════════════════════════ */
.contact .enveloppe {
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.4vw, 30px);
}

.contact__bloc {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: clamp(14px, 1.8vw, 24px);
  grid-template-columns: minmax(0, 1fr);
}

/* La colonne de gauche : les fiches en haut, le plan qui prend le reste. */
.contact__infos {
  width: 100%;
  max-width: 940px;
  display: grid;
  gap: clamp(14px, 1.8vw, 24px);
  grid-template-rows: auto minmax(0, 1fr);
}

@media (min-width: 1000px) {
  .contact__bloc {
    max-width: 1180px;
    justify-items: stretch;
    align-items: stretch;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  }
  .contact__infos { max-width: none; }
}

/* ─── Les deux fiches, côte à côte et de même hauteur ─────────────────────── */
.contact__cartes {
  width: 100%;
  max-width: 940px;
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
  .contact__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.carte-info {
  display: grid;
  gap: 14px;
  align-content: start;
  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);
}

.carte-info__tete {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--interlettre);
  text-transform: uppercase;
  color: var(--rouge-texte);
}

.carte-info__tete svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carte-info address,
.carte-info p { font-style: normal; font-size: 15px; line-height: 1.55; color: var(--sourdine); }

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

/* Le bouton se cale en bas : les deux fiches finissent sur la même ligne, même
   si l'une a plus de texte que l'autre. */
.carte-info .bouton { justify-self: start; margin-top: auto; }

/* Appeler et WhatsApp côte à côte. Le groupe prend la place du bouton seul :
   calé en bas de la fiche, pour que les deux fiches finissent à la même ligne. */
.carte-info__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-self: start;
  margin-top: auto;
}
.carte-info__actions .bouton { margin-top: 0; }

/* ─── Le plan ─────────────────────────────────────────────────────────────── */
.contact__plan {
  width: 100%;
  max-width: 940px;
  min-height: 210px;
  overflow: hidden;
  border-radius: var(--arrondi-image);
  box-shadow: var(--ombre-image);
  background: var(--page-creuse);
}
/* La carte et sa façade partagent EXACTEMENT les mêmes proportions : quand
   l'une remplace l'autre au clic, la page ne bouge pas d'un pixel. */
.contact__plan iframe,
.plan-facade {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

@media (min-width: 761px) {
  .contact__plan iframe,
  .plan-facade { aspect-ratio: 21 / 9; }
}

/* En deux colonnes, le plan n'a plus de proportion à lui : il remplit
   exactement ce que le formulaire laisse. */
@media (min-width: 1000px) {
  .contact__plan { max-width: none; height: 100%; }
  .contact__plan iframe,
  .plan-facade { height: 100%; aspect-ratio: auto; }
}

/* La façade : une épingle, un bouton, une ligne d'explication. */
.plan-facade {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
  background: var(--page-creuse);
}
.plan-facade__signe {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--rouge-vif);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plan-facade__note {
  max-width: 36ch;
  font-size: 12px;
  line-height: 1.45;
  color: var(--eteint);
}

/* ─── Le formulaire ───────────────────────────────────────────────────────── */
.contact__reserver { width: 100%; max-width: 620px; }
@media (min-width: 1000px) { .contact .formulaire { max-width: none; } }

/* ─── Le menu du jour, une fois rempli par le JSON ──────────────────────────── */
.menu-jour__jour {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--interlettre);
  text-transform: uppercase;
  color: var(--eteint);
}
.menu-jour__plat { margin-top: 6px; font-weight: 700; color: var(--encre); }
.menu-jour__prix { margin-top: 4px; font-weight: 800; color: var(--rouge-texte); }
.menu-jour__note { margin-top: 4px; font-size: 14px; color: var(--eteint); }

/* Dans le livre, ces mêmes classes se posent sur du papier. */
.livre__contenu .menu-jour__jour { color: rgb(91 58 46 / .7); }
.livre__contenu .menu-jour__plat { color: #5b3a2e; }
.livre__contenu .menu-jour__prix { color: var(--rouge); }
.livre__contenu .menu-jour__note { color: #93705d; }

/* ══════════════════════════════════════════════════════════════════════════════
   8. QUESTIONS FRÉQUENTES
   Tout en bas de l'accueil (Angelo, 08/11/2026). Cinq questions repliées, une
   ligne chacune : la section ne fait pas un écran, elle n'aurait rien à y
   mettre. Le même verre que la carte en texte.
   ══════════════════════════════════════════════════════════════════════════════ */
.faq.section { min-height: 0; }
.faq .enveloppe {
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.4vw, 30px);
}
.faq__liste {
  width: 100%;
  max-width: 760px;
  padding: 4px clamp(18px, 2.6vw, 32px);
  border-radius: var(--arrondi);
  border: 1px solid var(--verre-bord);
  background: var(--verre);
  box-shadow: var(--ombre-douce);
}
.faq__question + .faq__question { border-top: 1px solid var(--trait); }
.faq__question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 12px 0;
  font-weight: 700;
  line-height: 1.4;
  color: var(--encre);
  cursor: pointer;
  list-style: none;
}
.faq__question summary::-webkit-details-marker { display: none; }
.faq__question summary::after {
  content: "+";
  flex: none;
  font-size: 1.25em;
  color: var(--rouge-texte);
}
.faq__question[open] summary::after { content: "–"; }
.faq__question summary:hover { color: var(--rouge-texte); }
.faq__question summary:focus-visible { outline: 2px solid var(--rouge-vif); outline-offset: 3px; border-radius: 4px; }
.faq__question p { margin: 0; padding-bottom: 18px; max-width: var(--mesure); color: var(--sourdine); }
.faq__question a { color: var(--rouge-texte); }

/* ══════════════════════════════════════════════════════════════════════════════
   PAGE ÉVÉNEMENTS (soirees.html)
   Angelo, 20/10/2026 : « une case, un événement ». Quatre jours, quatre billets,
   chacun complet : on ne cherche plus le déroulé dans une case et les prix dans
   une autre. Le hero est court, il annonce et laisse la place à la semaine.
   ══════════════════════════════════════════════════════════════════════════════ */
.hero--court { min-height: clamp(360px, 52svh, 520px); }
.hero--court .hero__titre {
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 800;
  color: #fff;
}
.hero--court .hero__titre span {
  color: rgb(255 255 255 / .82);
  font-size: clamp(12px, 1.1vw, 13px);
}

.detail .enveloppe,
.groupes .enveloppe {
  display: grid;
  justify-items: center;
  gap: clamp(26px, 3.2vw, 44px);
}

/* Le titre du hero parle la langue de l'affiche ; sa phrase reste en Nunito. */
.hero--court .hero__titre.titre-affiche {
  font-weight: 400;
  font-size: clamp(44px, 7vw, 88px);
  line-height: .92;
  letter-spacing: .015em;
}
.titre-affiche span { font-family: var(--courant); }

/* ─── Le hero de la semaine : deux boutons, deux logos ────────────────────────
   Sans horaires ni pastilles, le grand écart de l'accueil entre le titre et
   les boutons n'a plus rien à porter : il se resserre. Au téléphone, les deux
   boutons se partagent la ligne et les logos passent dessous. */
.hero__actions--semaine { margin-top: clamp(30px, 6vh, 64px); align-items: center; }
@media (max-width: 860px) {
  .hero__actions--semaine .bouton { flex: 1 1 0; padding-inline: 16px; }
  .hero__actions--semaine .reseaux { flex-basis: 100%; }
  /* En portrait, le cadrage centré mettait l'ardoise de la photo (« Pétanque,
     Apéro… ») juste derrière le sous-titre : deux textes l'un sur l'autre. Le
     cadrage glisse à droite, sur le joueur et la terrasse. */
  .hero--semaine .hero__image img { object-position: 68% 38%; }
}

/* Les logos officiels de Meta, tels quels, en couleur : ni ombre, ni contour,
   ni mot collé, ni recoloration (leurs règles ; et Angelo, 20/10/2026 :
   « laisse les vrais logos »). Facebook est le fichier du pack Meta à l'octet
   près ; Instagram, le fichier du pack réduit sans perte (l'original fait
   5000 px). La cible fait 48 px au doigt, le logo 40 (32 sous la semaine) :
   l'air autour est la marge de protection que Meta demande. */
.reseaux { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.reseau {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transition: transform var(--duree) var(--courbe);
}
.reseau img { display: block; }
.reseau:hover { transform: translateY(-2px); }
.reseau:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.sur-photo .reseau { color: #fff; }

/* ─── Le panneau ──────────────────────────────────────────────────────────────
   Un bloc blanc plein : la déco passe derrière, le texte reste net. (Il sert
   encore au bloc des groupes, en bas de la page.) */
.panneau {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 16px;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--arrondi);
  background: rgb(255 255 255 / .96);
  box-shadow: var(--ombre-douce);
}
.panneau > * { width: 100%; }
.panneau > .bouton { width: auto; }
.panneau__titre {
  margin: 0;
  font-family: var(--affiche);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 34px);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--encre);
}
.panneau__note {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--trait);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--sourdine);
}
.panneau__note a { color: var(--rouge-texte); white-space: nowrap; }

/* ─── La barre des jours (téléphone et tablette) ──────────────────────────────
   Quatre billets l'un sous l'autre, c'est trois écrans de téléphone : la barre
   reste en haut pendant qu'on descend, montre le jour qu'on lit, et un appui
   mène au jour voulu. Chaque jour garde son heure ; celle de l'événement
   du jour passe en rouge.
   Sur grand écran, les quatre billets se voient presque d'un coup : la barre
   s'efface. */
.semaine__jours {
  position: sticky;
  top: 10px;
  z-index: 3;
  width: 100%;
  max-width: 520px;
}
.semaine__jours ul {
  list-style: none;
  margin: 0;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  border-radius: var(--arrondi-pilule);
  /* Opaque : les boutons des billets passent dessous en défilant. */
  background: #fff;
  box-shadow: var(--ombre-douce);
}
.semaine__jours a {
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 50px;
  padding: 4px 2px;
  border-radius: var(--arrondi-pilule);
  color: var(--encre);
  text-decoration: none;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.semaine__jours span {
  font-family: var(--affiche);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .04em;
}
.semaine__jours small {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--eteint);
}
.semaine__jours a.est-prochain small { color: var(--rouge-texte); }
.semaine__jours a[aria-current="true"] { background: var(--rouge-vif); color: var(--os); }
/* --os sur --rouge-vif : 5,27 (le rose --os-sourd n'y fait que 4,47). */
.semaine__jours a[aria-current="true"] small { color: var(--os); }

@media (min-width: 900px) { .semaine__jours { display: none; } }

/* ─── Le billet ───────────────────────────────────────────────────────────────
   Comme un billet qu'on détache :
     · la PHOTO du jour (Angelo, 21/10/2026), et posé dessus le TALON : le
       jour et l'heure sur une plaque rouge, en Bebas — les panneaux de bois
       des affiches du restaurant ;
     · le CORPS, blanc : tout ce que l'affiche dit de ce jour-là ;
     · le COUPON, derrière un pointillé : réserver (ou pas besoin).
   Au téléphone, l'un sous l'autre, la photo en 16:9 ; dès 900 px, la photo
   à gauche sur toute la hauteur du billet, le reste à droite. */
.semaine__billets {
  width: 100%;
  max-width: 1080px;
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.billet-jour {
  /* Arrivé par la barre des jours, le billet s'arrête SOUS elle (avec les
     24 px de scroll-padding-top du site : 90 px du haut, la barre en fait 70). */
  scroll-margin-top: 66px;
  display: grid;
  /* clip et pas hidden : les coins restent arrondis, mais sans créer de
     conteneur de défilement — la photo peut alors suivre l'écran (plus bas). */
  overflow: clip;
  border-radius: var(--arrondi);
  background: #fff;
  box-shadow: var(--ombre-douce);
}
.billet-jour__talon > p,
.billet-jour__statut,
.billet-jour__table { margin: 0; }

/* La photo : un cadre 16:9 au téléphone, recadré par photo (voir plus bas)
   pour que le sujet — les boules, les cartes, le carton — reste dedans. */
.billet-jour__photo {
  position: relative;
  max-height: var(--ecran-utile);
  aspect-ratio: 16 / 9;
  overflow: clip;
  background: var(--page-creuse);
}
.billet-jour__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Sur tablette, le billet est large : en 16:9 la photo prenait 390 px de
   haut. En 2:1, elle garde sa présence sans allonger la page. */
@media (min-width: 620px) and (max-width: 899px) {
  .billet-jour__photo { aspect-ratio: 2 / 1; }
}
.photo--evenement-petanque-tir    { object-position: 40% 62%; }
.photo--evenement-petanque-boules { object-position: 52% 64%; }
.photo--evenement-contree         { object-position: 50% 55%; }
.photo--evenement-loto            { object-position: 50% 70%; }

/* Le talon : une bande rouge en tête du billet… */
.billet-jour__talon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 14px clamp(18px, 2vw, 26px) 12px;
  background: var(--rouge-vif);
  color: var(--os);
}
/* … et, quand le billet a sa photo, une plaque posée dans son coin, en haut à
   gauche : c'est le ciel ou le fond des photos, jamais le sujet. */
.billet-jour__photo > .billet-jour__talon {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: calc(100% - 24px);
  padding: 9px 14px 7px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgb(18 3 5 / .28);
}
.billet-jour__jour {
  font-family: var(--affiche);
  font-size: clamp(30px, 3vw, 40px);
  line-height: .95;
  letter-spacing: .03em;
}
.billet-jour__talon > .billet-jour__heure {
  font-family: var(--affiche);
  font-size: clamp(22px, 2vw, 27px);
  line-height: 1;
  letter-spacing: .03em;
}
/* « Ce soir » ou « Aujourd'hui » : posé par scripts/semaine.js sur
   l'événement du jour seulement (heure de Paris). */
.billet-jour__signal {
  padding: 6px 12px 5px;
  border-radius: var(--arrondi-pilule);
  background: var(--os);
  color: var(--rouge-texte);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.billet-jour__signal[hidden] { display: none; }

.billet-jour__corps {
  container-type: inline-size;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 28px);
}
.billet-jour__titre {
  margin: 0;
  font-size: clamp(21px, 1.9vw, 25px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--encre);
  text-wrap: balance;
}
.billet-jour .programme li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Les chiffres : deux par ligne au téléphone, les quatre du jeudi sur une
   seule ligne dès que le billet a la place. */
@container (min-width: 480px) {
  .billet-jour .concours--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Ce que dit l'affiche, en pastilles : « Ouvert à tous », « Sans licence »… */
.faits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.faits li {
  padding: 9px 14px 8px;
  border-radius: var(--arrondi-pilule);
  background: var(--page);
  font-family: var(--affiche);
  font-size: 20px;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--rouge-texte);
}

/* Le jeudi, à table : le menu des boulistes, et ce qu'il y a autour. */
.billet-jour__table {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding-top: 14px;
  border-top: 1px solid var(--trait);
}
.billet-jour__table > span:first-child { font-size: 16px; font-weight: 800; color: var(--encre); }
.billet-jour__table b {
  font-family: var(--affiche);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--rouge-texte);
}
.billet-jour__table small { font-size: 13px; font-weight: 700; color: var(--sourdine); }
.billet-jour__autres { flex-basis: 100%; font-size: 14.5px; line-height: 1.45; color: var(--sourdine); }

/* Le coupon : réserver, derrière le pointillé du billet qu'on détache. */
.billet-jour__resa {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 16px clamp(18px, 2vw, 28px) clamp(18px, 2vw, 24px);
  border-top: 2px dashed var(--trait-fort);
}
.billet-jour__statut {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  font-size: 15px;
  line-height: 1.4;
}
.billet-jour__statut b { font-weight: 800; color: var(--rouge-texte); }
.billet-jour__statut span { font-weight: 700; color: var(--encre); }
.billet-jour__resa--libre .billet-jour__statut b { color: var(--encre); }
.billet-jour__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.billet-jour__actions .bouton { flex: 1 1 auto; padding-inline: 20px; }
.billet-jour__actions .bouton--primaire { flex: 1 1 0; }
/* Le dimanche a deux concours, donc deux « Réserver » : sur un téléphone ils
   ne tiennent pas côte à côte, ils s'empilent, « Appeler » dessous ; dès que
   le coupon a la place, ils se partagent la ligne. */
.billet-jour__resa { container-type: inline-size; }
.billet-jour__actions--deux .bouton { flex: 1 1 100%; }
@container (min-width: 380px) {
  .billet-jour__actions--deux .bouton--primaire { flex: 1 1 0; }
}

/* Dès 900 px : la photo à gauche, sur toute la hauteur du billet ; à droite
   le corps, puis le coupon, sur une ligne : ce qu'il faut savoir, et les
   boutons au bout. */
@media (min-width: 900px) {
  .billet-jour { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
  .billet-jour__photo {
    grid-row: 1 / span 2;
    max-height: none;
    aspect-ratio: auto;
    min-height: 260px;
  }
  /* Un billet plus haut que l'écran (fenêtre basse) : la photo ne dépasse
     pas l'écran utile, et elle SUIT le défilement le long du billet. Quand le
     billet tient dans l'écran, elle le remplit comme avant. */
  .billet-jour__photo img {
    position: sticky;
    top: 16px;
    height: min(100%, var(--ecran-utile));
  }
  .billet-jour__photo > .billet-jour__talon { top: 16px; left: 16px; max-width: calc(100% - 32px); }
  .billet-jour__corps,
  .billet-jour__resa { grid-column: 2; }
  .billet-jour__corps { padding: 26px 30px 22px; }
  .billet-jour__resa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 18px 30px 24px;
  }
  .billet-jour__statut { flex-direction: column; gap: 0; }
  .billet-jour__actions { flex: 0 1 auto; justify-content: flex-end; }
  .billet-jour__actions .bouton,
  .billet-jour__actions .bouton--primaire,
  .billet-jour__actions--deux .bouton { flex: 0 0 auto; }
}

/* Sous la semaine : ce qui change (la pluie, une annulation) vit sur les
   réseaux, et une ligne suffit à le dire. */
.semaine__reseaux {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  max-width: 640px;
  text-align: center;
}
.semaine__reseaux span {
  margin-right: 6px;
  padding: 10px 18px;
  border-radius: var(--arrondi-pilule);
  background: rgb(255 255 255 / .9);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--encre);
}

.groupes__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.groupes__bloc {
  width: 100%;
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
  align-items: center;
}
@media (min-width: 900px) {
  .groupes__bloc { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

.groupes__vue {
  margin: 0;
  overflow: hidden;
  border-radius: var(--arrondi-image);
  box-shadow: var(--ombre-image);
}
.groupes__vue img { width: 100%; max-height: var(--ecran-utile); aspect-ratio: 3 / 2; object-fit: cover; }

.groupes__mots { display: grid; gap: 18px; justify-items: start; }
.groupes__mots p { margin: 0; color: var(--sourdine); max-width: 46ch; }

/* ══════════════════════════════════════════════════════════════════════════════
   RÉSERVER ET TRAITEUR
   Des demandes, pas des réservations : le restaurant rappelle. Un appui pour
   choisir (une porte, une formule, un plat), le strict nécessaire à remplir,
   un bouton pour envoyer. Le détail se dit au téléphone. Tout ce qui se lit
   est posé sur du blanc plein ; la déco reste derrière.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Le hero de la page Réserver est bref : on vient pour le formulaire. */
.hero--bref { min-height: clamp(280px, 40svh, 400px); }

.demande .enveloppe {
  display: grid;
  justify-items: center;
  gap: clamp(20px, 2.6vw, 34px);
}

/* ─── Les portes : une photo, un nom, un appui ─────────────────────────────── */
.portes {
  width: 100%;
  max-width: 760px;
  /* Un fieldset refuse par défaut d'être plus étroit que son contenu : à
     320 px, les trois portes dépassaient de 12 px. */
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 16px);
}
.porte {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ombre-douce);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.porte:hover { transform: translateY(-2px); }
.porte input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.porte img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.porte__nom {
  padding: 10px 12px 0;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--encre);
}
.porte__detail { padding: 2px 12px 12px; font-size: 12.5px; line-height: 1.35; color: var(--sourdine); }

/* Dans le panneau Réserver de l'accueil, sur téléphone : trois lignes, la
   photo à gauche, le nom à droite. En colonnes, les noms se coupaient. */
.portes--liens { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.portes--liens .porte { grid-template-columns: 76px 1fr; grid-template-rows: 1fr 1fr; column-gap: 14px; }
.portes--liens .porte img { grid-row: 1 / span 2; height: 100%; aspect-ratio: 1; }
.portes--liens .porte__nom { align-self: end; padding: 12px 12px 0 0; }
.portes--liens .porte__detail { align-self: start; padding: 2px 12px 12px 0; }
@media (min-width: 620px) {
  .portes--liens { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px); }
  .portes--liens .porte { grid-template-columns: none; grid-template-rows: auto auto 1fr; column-gap: 0; }
  .portes--liens .porte img { grid-row: auto; height: auto; aspect-ratio: 4 / 5; }
  .portes--liens .porte__nom { align-self: auto; padding: 10px 12px 0; }
  .portes--liens .porte__detail { align-self: auto; padding: 2px 12px 12px; }
}

/* La porte choisie : un anneau rouge et une coche. */
.porte:has(input:checked) { box-shadow: 0 0 0 3px var(--rouge-vif), var(--ombre-douce); }
.porte:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rouge-vif);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 4px 10px rgb(163 18 28 / .35);
}
.porte input:checked ~ .porte__nom { color: var(--rouge-texte); }
.porte:has(input:focus-visible),
a.porte:focus-visible { outline: 3px solid var(--rouge-vif); outline-offset: 3px; }

/* ─── Le formulaire ────────────────────────────────────────────────────────── */
.demande__formulaire { width: 100%; display: grid; justify-items: center; gap: clamp(18px, 2.4vw, 28px); }

.demande__corps {
  width: 100%;
  display: grid;
  align-items: start;
  gap: clamp(16px, 2vw, 28px);
}
@media (min-width: 1000px) {
  .demande__corps { grid-template-columns: minmax(0, 1fr) 330px; }
  .demande__cote { position: sticky; top: 24px; }
}

.demande__champs {
  display: grid;
  gap: 22px;
  padding: clamp(20px, 2.6vw, 34px);
  border-radius: var(--arrondi);
  background: rgb(255 255 255 / .97);
  box-shadow: var(--ombre-douce);
}

.demande__bloc { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 14px; }
/* Un filet entre deux blocs VISIBLES : un bloc caché ne laisse pas de trait. */
.demande__bloc:not([hidden]) ~ .demande__bloc:not([hidden]) { padding-top: 22px; border-top: 1px solid var(--trait); }
/* Flottante, la légende redevient un bloc ordinaire : sinon le navigateur
   l'incruste dans la bordure du bloc, et le filet de séparation la barre. */
.demande__legende {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 2px;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  color: var(--rouge-texte);
}

/* Téléphone et e-mail : l'un sous l'autre sur petit écran, côte à côte ensuite. */
.champ--pile { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .champ--pile { grid-template-columns: 1fr 1fr; } }

.champ__titre {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eteint);
}
.facultatif {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--eteint);
}

/* Les choix en un appui : des pastilles, jamais des menus déroulants. */
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { position: relative; display: inline-flex; }
/* Posée dans un .champ, la pastille hériterait du style des étiquettes
   (petites capitales espacées) : elle garde le sien. */
.champ .puce { font-size: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.puce input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.puce span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--arrondi-pilule);
  background: #fff;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--encre);
  transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.puce input:hover + span { border-color: var(--rouge-vif); }
.puce input:checked + span { background: var(--rouge-vif); border-color: var(--rouge-vif); color: #fff; }
.puce input[type="checkbox"]:checked + span::before { content: "✓"; margin-right: 7px; }
.puce input:focus-visible + span { outline: 3px solid var(--rouge-vif); outline-offset: 2px; }
.puce input:disabled { cursor: not-allowed; }
.puce input:disabled + span { color: var(--eteint); background: var(--page); text-decoration: line-through; }

/* Les soirs à venir : une pastille par date, sur deux lignes — le jour, et ce
   qui s'y passe (les Jeudis Boulistes le jeudi). */
.puces--dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 620px) { .puces--dates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.puce--date { display: grid; }
.puce--date span {
  display: grid;
  align-content: center;
  gap: 1px;
  min-height: 58px;
  padding: 8px 14px;
  border-radius: 14px;
  line-height: 1.2;
}
.puce--date b { font-size: 15px; font-weight: 800; }
.puce--date small { font-size: 12.5px; font-weight: 700; color: var(--sourdine); }
.puce--date input:checked + span small { color: var(--os); }   /* 5,27 sur le rouge */
.puces--dates input[type="date"] { grid-column: 1 / -1; }

/* Le jeudi soir et le dimanche midi, on rappelle ce qui s'y passe, et on
   propose le concours. */
.soiree-info {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 14px 16px 16px;
  border-radius: 14px;
  background: var(--page);
}
.soiree-info p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--sourdine); }
.soiree-info b { color: var(--rouge-texte); }
.soiree-info .soiree-info__titre {
  font-family: var(--affiche);
  font-size: 26px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--rouge-texte);
}
.soiree-info .puce span { min-height: 44px; height: auto; padding-block: 8px; line-height: 1.3; }

/* Les formules : des tuiles avec leur photo. */
/* Sur téléphone, une formule par ligne, photo à gauche : trois grandes photos
   empilées faisaient un écran et demi. En colonnes dès 620 px. */
.tuiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tuile {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 14px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--trait-fort);
  cursor: pointer;
  transition: box-shadow var(--duree) var(--courbe);
}
.tuile input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tuile__image { grid-row: 1 / span 2; display: block; width: 100%; height: 100%; min-height: 84px; object-fit: cover; }
.tuile__nom { align-self: end; padding: 12px 40px 0 0; font-size: 15px; font-weight: 800; color: var(--encre); }
.tuile__texte { align-self: start; padding: 2px 12px 12px 0; font-size: 13px; line-height: 1.4; color: var(--sourdine); }
@media (min-width: 620px) {
  .tuiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .tuile { grid-template-columns: none; grid-template-rows: auto auto 1fr; column-gap: 0; }
  .tuile__image { grid-row: auto; height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .tuile__nom { align-self: auto; padding: 10px 12px 0; }
  .tuile__texte { align-self: auto; padding: 2px 12px 12px; }
}
.tuile:hover { box-shadow: 0 0 0 1px var(--rouge-vif); }
.tuile:has(input:checked) { box-shadow: 0 0 0 3px var(--rouge-vif); }
.tuile:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rouge-vif);
  color: #fff;
  font-weight: 800;
}
.tuile:has(input:focus-visible) { outline: 3px solid var(--rouge-vif); outline-offset: 3px; }

.demande__avis {
  margin: -4px 0 0;
  padding: 11px 14px;
  border-radius: 12px;
  background: #fff1ec;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--rouge-texte);
}
.demande__aide { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--sourdine); }
.demande__aide a { color: var(--rouge-texte); font-weight: 700; }
.demande__plats { display: grid; gap: 10px; }

/* L'envoi : WhatsApp d'abord, l'e-mail en secours. Pleine largeur au pouce,
   côte à côte dès qu'il y a la place. */
.envoi { display: grid; gap: 10px; }
/* Sur petit écran, le texte du bouton a le droit de passer à la ligne : à
   320 px, « Envoyer sur WhatsApp » sur une seule ligne élargissait toute la
   section au-delà de l'écran. */
.envoi .bouton {
  width: 100%;
  min-height: 56px;
  padding-inline: 20px;
  font-size: 13px;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
}
@media (min-width: 620px) {
  .envoi { grid-template-columns: repeat(auto-fit, minmax(220px, max-content)); align-items: center; }
  .envoi .bouton { width: auto; padding-inline: 36px; white-space: nowrap; }
}
.envoi__aucun,
.envoi__statut { grid-column: 1 / -1; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--encre); }
.envoi__aucun a { color: var(--rouge-texte); font-weight: 800; white-space: nowrap; }
.envoi__statut:empty { display: none; }
.envoi__statut { padding: 11px 14px; border-radius: 12px; background: var(--page); font-weight: 700; }
/* Après « Envoyer par e-mail » : si aucune messagerie ne s'ouvre, l'adresse
   et la demande à copier. */
.envoi__secours { grid-column: 1 / -1; display: grid; gap: 10px; }
.envoi__secours p {
  margin: 0;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--page);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--encre);
}
.envoi__secours p:empty { display: none; }
.envoi__secours-actions { display: grid; gap: 10px; }
@media (min-width: 620px) {
  .envoi__secours-actions { grid-template-columns: repeat(auto-fit, minmax(220px, max-content)); align-items: center; }
}

/* Ce qui ne va pas, dit en clair sous le champ concerné. */
.champ__erreur { margin: 2px 0 0; font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--rouge-texte); }
.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: var(--rouge-vif); box-shadow: 0 0 0 3px rgb(200 30 40 / .12); }
.champ--case .champ__erreur { grid-column: 1 / -1; }

/* Le piège à robots : ni vu, ni lu par un lecteur d'écran. */
.piege { display: none; }
.demande__apres { margin: -12px 0 0; font-size: 13.5px; color: var(--sourdine); }

/* ─── À côté : le téléphone, le traiteur, le récapitulatif ─────────────────── */
.demande__cote { width: 100%; display: grid; gap: 14px; }
.demande__numero { margin: 0; font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.01em; }
.demande__numero a { color: var(--rouge-texte); text-decoration: none; }
.demande__appel-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ─── La déco des deux pages : la même grammaire que l'accueil ─────────────
   Une masse d'olivier à un coin, un rameau, le drapé rouge à la couture. Tout
   est derrière des blocs pleins : rien ne peut gêner la lecture. */
.demande__masse-g { top: -40px; left: -7%; width: clamp(170px, 30vw, 440px); rotate: -5deg; }
.demande__rameau { bottom: 16%; right: -3%; width: clamp(90px, 12vw, 190px); rotate: 18deg; }
.demande__ruban { bottom: 0; width: min(112vw, 1560px); translate: -50% 46%; }

/* ══════════════════════════════════════════════════════════════════════════════
   PAGES SIMPLES
   Mentions légales, confidentialité, remerciement, 404. Une colonne, lisible,
   rien d'autre.
   ══════════════════════════════════════════════════════════════════════════════ */
.page-simple {
  padding-block: calc(var(--hauteur-entete) + clamp(48px, 7vh, 96px)) var(--souffle-bas);
}

.page-simple .enveloppe {
  display: grid;
  justify-items: center;
  gap: clamp(26px, 3vw, 40px);
}

.page-simple__corps {
  width: 100%;
  max-width: 68ch;
  display: grid;
  gap: 20px;
  padding: clamp(24px, 3vw, 42px);
  border-radius: var(--arrondi);
  border: 1px solid var(--verre-bord);
  background: rgb(255 255 255 / .92);
  box-shadow: var(--ombre-douce);
}

.page-simple__corps h2 {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--rouge-texte);
  margin-top: 10px;
}
.page-simple__corps h2:first-child { margin-top: 0; }
.page-simple__corps p,
.page-simple__corps li { color: var(--sourdine); }
.page-simple__corps ul { display: grid; gap: 8px; padding-left: 20px; list-style: disc; }
.page-simple__corps a { color: var(--rouge-texte); }

.page-simple__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.page-simple .tete-section { text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════════
   DÉCO — 2. LE LIEU
   Patron A, symétrique : l'arche s'ouvre. C'est la première section décorée du
   site, celle qui annonce la grammaire. Le sujet est la terrasse sous les
   platanes : le feuillage y a un sens littéral, il a donc le droit d'être franc.
   ══════════════════════════════════════════════════════════════════════════════ */
/* --coin-l : la taille de la masse d'angle. Sur téléphone le vis-à-vis
   disparaît partout — deux masses à cette largeur entrent dans la plaque de
   titre : une seule, plus petite. La bande tablette (620-899 px) a sa valeur
   plus bas, le bureau la sienne dans chaque section. */
.lieu,
.carte,
.services,
.soiree,
.raisons,
.contact { --coin-l: clamp(120px, 32vw, 180px); }

@media (min-width: 900px) { .lieu { --coin-l: clamp(180px, 36vw, 520px); } }

/* La couture hero → lieu. Le cordon est à 91 % de la boîte, donc le -91 % de
   .deco--cordon le pose exactement à 26 px sous le haut de la section, dans le
   souffle, bien au-dessus de la plaque de titre. */


/* Les deux masses. Elles débordent hors écran par le haut et par le côté :
   c'est ce débordement qui fait la treille et non la vignette posée. */




/* Le rameau ne commence PAS dans le vide : il part de sous la masse de gauche
   et file vers la plaque de titre, qu'il touche. */


/* La couture lieu → carte : la volute. Elle est portée par le lieu et descend
   dans le souffle de la carte, qui est la section la plus serrée du site. */


/* ══════════════════════════════════════════════════════════════════════════════
   DÉCO — 3. LA CARTE
   Patron B, décalée à droite : un livre se lit vers la droite, le poids suit.
   Section la plus contrainte du site (1,07 écran) : rien n'entre dans la scène
   du livre, qui porte overflow: hidden et rognerait tout.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) { .carte { --coin-l: clamp(190px, 38vw, 560px); } }



/* Le rameau part de sous la masse et redescend vers la plaque : il ne commence
   pas dans le vide. */


/* Le signet : un nœud de ruban posé à côté des onglets, comme un marque-page
   qui dépasserait du livre. Il touche le bord du bloc, il ne flotte pas. */


/* La couture carte → services : LA MÊME volute, retournée et élargie. On casse
   la répétition par le retournement plutôt que par un nouveau dessin. */


/* ══════════════════════════════════════════════════════════════════════════════
   DÉCO — 4. NOS SERVICES
   Patron C, la traverse. Trois pièces seulement : la section la plus légère du
   site. Trois grands tirages verticaux n'ont besoin de personne — on charge là
   où il y a du vide, on retire là où il y a de l'image.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) { .services { --coin-l: clamp(160px, 26vw, 380px); } }



/* Le socle de satin passe DERRIÈRE les trois cadres, au ras de leur ligne de
   pied. Le satin se noue sur un objet, il ne fait jamais une ligne de page :
   ici il porte les trois tirages. */


/* La couture services → soirées : un nœud, pas une ligne. Cinquième couture,
   cinquième dessin. */


/* ══════════════════════════════════════════════════════════════════════════════
   DÉCO — 5. LES SOIRÉES
   Patron C inversé : la masse DESCEND du coin droit. Et c'est la seule section
   décorée sur ses FLANCS — le slide ne fait que 769 px de large, il reste
   335 px de crème de chaque côté, le plus grand vide latéral du site.
   Rien ne touche le cadre : la poignée doit rester attrapable.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) { .soiree { --coin-l: clamp(190px, 40vw, 600px); } }



/* Les deux flancs. Ils partent du bord de l'écran vers le slide : ils touchent
   un bord réel des deux côtés, ils ne flottent pas au milieu du vide. */



/* La couture soirées → pourquoi : le premier demi-trait, calé à gauche et
   effacé en masque vers la droite. C'est la première couture asymétrique du
   site, et elle annonce la mise en page décalée qui arrive. */
/* Le cordon PUR, sans le nœud de satin : dans fil-ligne.png le nœud occupe le
   tiers central du fichier et tombait exactement derrière la ligne de texte du
   bas. On ne garde que le cordon, doublé par un miroir. */


/* ══════════════════════════════════════════════════════════════════════════════
   DÉCO — 6. POURQUOI NOUS
   Patron B décalée à gauche, et le SOMMET du site : la plus grosse pièce, à
   620 px. C'est la mise en page la plus symétrique — deux fiches, un portrait,
   deux fiches — il faut donc la casser. Le sommet n'est jamais la fin.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) { .raisons { --coin-l: clamp(200px, 42vw, 620px); } }





/* L'écho : une petite branche à droite, qui répond à la masse sans l'égaler.
   Elle touche le bord droit de l'écran. */


/* La couture pourquoi → contact : la volute la plus discrète du site, parce que
   la treille de contact qui arrive est la plus chargée. */


/* ══════════════════════════════════════════════════════════════════════════════
   DÉCO — 7. CONTACT
   Patron A doublé : la seule vraie arche du site. Deux épaules et deux
   montants — on est arrivé. Section la plus fonctionnelle : rien ne touche le
   formulaire ni le plan, et la règle du dessous l'interdit de toute façon.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) { .contact { --coin-l: clamp(180px, 36vw, 560px); } }





/* Les montants : ils descendent le long des bords, sous les épaules. Chacun
   part de l'intérieur de la silhouette de son épaule. */





/* La couture contact → pied : le drapé de soie, pleine largeur. Utilisé UNE
   seule fois sur tout le site, et c'est ici — le rideau tombe. */


/* ══════════════════════════════════════════════════════════════════════════════
   DÉCO — LA PAGE ÉVÉNEMENTS
   Même maison, autre phrase. Deux différences assumées avec l'accueil : la
   treille entre par la GAUCHE, et le cordon court en HAUT au lieu de fermer en
   bas. La seule reprise littérale est le drapé sur le pied : c'est la
   signature du site, elle doit être la même partout. (L'ancienne section
   « Actualité » et sa déco sont parties le 20/10/2026 : les réseaux sont
   maintenant en haut de la page et sous la semaine.)
   ══════════════════════════════════════════════════════════════════════════════ */
.detail,
.groupes { --coin-l: clamp(120px, 32vw, 180px); }
@media (min-width: 900px) {
  .detail,
  .groupes { --coin-l: clamp(170px, 32vw, 460px); }
}

.detail__couture { top: 30px; width: 101%; }

.detail__masse {
  top: calc(var(--coin-l) * -.22);
  left: calc(var(--coin-l) * -.2);
  width: 86vw;
  rotate: -5deg;
}
.detail__rameau {
  top: calc(var(--coin-l) * .48);
  left: calc(var(--coin-l) * .44);
  width: clamp(96px, 13vw, 200px);
  rotate: 20deg;
}


.groupes__epaule-g,
.groupes__epaule-d {
  top: calc(var(--coin-l) * -.24);
  width: var(--coin-l);
}
.groupes__epaule-g { left: calc(var(--coin-l) * -.22); rotate: -6deg; }
.groupes__epaule-d { right: calc(var(--coin-l) * -.24); width: calc(var(--coin-l) * .92); rotate: 7deg; }

.groupes__rameau {
  bottom: clamp(60px, 9vh, 130px);
  left: clamp(-60px, -3vw, 0px);
  width: clamp(110px, 14vw, 240px);
  rotate: -28deg;
}

.groupes__rideau {
  bottom: 0;
  left: 50%;
  width: 140vw;
  translate: -50% 40%;
}

/* Sur téléphone, les masses s'élargissent, le rideau déborde davantage, et les
   rameaux comme l'épaule droite s'effacent. Ils reviennent à 620 px — sauf le
   rameau du détail, qui mord la plaque de titre jusqu'à 900 px. */
.detail__rameau,
.groupes__rameau,
.groupes__epaule-d { display: none; }

@media (min-width: 620px) {
  .groupes__rameau,
  .groupes__epaule-d { display: block; }
  .detail__masse { width: var(--coin-l); }
  .groupes__rideau { width: min(108vw, 1440px); translate: -50% 46%; }
}

@media (min-width: 900px) { .detail__rameau { display: block; } }

/* ══════════════════════════════════════════════════════════════════════════════
   DÉCO — LE FEUILLAGE D'APPOINT
   Deuxième passe. Le premier jet posait les masses et les coutures, mais les
   coutures naissaient dans le vide : un fil rouge qui traverse une bande crème
   sans rien pour le tenir se lit comme une pièce posée au hasard. Ici chaque
   fil NAÎT DE DESSOUS DU FEUILLAGE, à ses deux bouts, exactement comme le fil
   d'or de la référence sort toujours de derrière une grappe de fleurs.
   Et chaque brin respecte la règle de la silhouette : il part d'une masse, ou
   il touche un bord réel — jamais le milieu du blanc.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── 2. LE LIEU ──────────────────────────────────────────────────────────── */
/* Le cordon du haut sort de dessous ces deux brins, à gauche. */


/* Et il rentre, à droite, sous le coin de la masse de droite. */


/* ─── 3. LA CARTE ─────────────────────────────────────────────────────────── */
/* Le flanc gauche était la plus grande zone vide du site : 300 px de crème sur
   toute la hauteur du livre. Une vraie branche l'occupe, ancrée au bord. */

/* Les deux bouts de la volute du bas. */



/* ─── 4. LES SERVICES ─────────────────────────────────────────────────────── */
/* Le socle de satin sort de dessous ces deux brins. */


/* Et une branche en haut à droite, qui répond à la masse de gauche. */


/* ─── 5. LES SOIRÉES ──────────────────────────────────────────────────────── */
/* Le demi-cordon de gauche naît de sous ces deux brins. */



/* ─── 6. POURQUOI NOUS ────────────────────────────────────────────────────── */
/* Le bas de la section était vide sur toute sa largeur : une branche à gauche,
   et un brin qui tient le bout de la volute. */



/* ─── 7. CONTACT ──────────────────────────────────────────────────────────── */
/* Le drapé tombe de dessous ces deux brins, un à chaque bout. */



/* Le nœud de la carte flottait au milieu du vide : il descend contre le bloc
   des onglets, qu'il touche. */


/* Sur téléphone, le feuillage d'appoint disparaît : la largeur ne le porte pas
   et il viendrait mordre sur le contenu. Seules les masses et les coutures
   restent — elles suffisent à tenir le rythme. */


/* ─── Le feuillage d'appoint de la page des soirées ────────────────────────
   Même principe qu'à l'accueil : chaque fil naît de dessous une feuille. */
.detail__brin { top: 10px; left: clamp(70px, 13vw, 250px); width: clamp(46px, 5vw, 90px); rotate: -18deg; }
.groupes__brin-a { bottom: clamp(24px, 4vh, 62px); left: clamp(-16px, -1vw, 8px); width: clamp(52px, 6vw, 102px); rotate: -14deg; }
.groupes__brin-b { bottom: clamp(30px, 4.5vh, 70px); right: clamp(-16px, -1vw, 8px); width: clamp(48px, 5.5vw, 94px); rotate: 192deg; }

/* Sur téléphone, pas de brins : ils reviennent à 620 px. */
.detail__brin,
.groupes__brin-a,
.groupes__brin-b { display: none; }

@media (min-width: 620px) {
  .detail__brin,
  .groupes__brin-a,
  .groupes__brin-b { display: block; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DÉCO — LA BANDE TABLETTE (620 à 899 px)
   Entre le téléphone et le bureau, la mise en page se resserre mais la déco
   gardait ses proportions de bureau : les deux rameaux qui visent la plaque de
   titre finissaient par mordre dessus. Mesuré à 768 px. Le rameau du détail
   n'y revient donc qu'à 900 px (voir plus haut), et les masses rentrent d'un
   cran — c'est la seule bande du site bornée des deux côtés.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 620px) and (max-width: 899px) {
  .lieu,
  .carte,
  .services,
  .soiree,
  .raisons,
  .contact,
  .detail,
  .groupes { --coin-l: clamp(170px, 30vw, 300px); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DÉCO — LA POSE D'ANGELO
   Ce bloc n'est pas de moi : c'est le relevé exact de ce qu'Angelo a posé dans
   l'atelier, à 1024 px de large pour le bureau, à 390 px pour le téléphone.
   Rien n'a été « amélioré » au passage.

   LE PRINCIPE, et c'est lui qui fait que ça tient sur tous les formats web :
   tout est exprimé en PROPORTION DE LA LARGEUR de la section. La largeur d'une
   pièce est un pourcentage de cette largeur, et son décalage vertical est en vw
   — la même unité. Quand l'écran s'élargit, la composition entière grandit d'un
   bloc : elle ne se déforme pas, et les écarts entre pièces ne bougent pas.

   Et chaque pièce est accrochée à son bord LE PLUS PROCHE : celles du haut en
   `top`, celles du bas en `bottom`. Sans ça, un écran plus haut aurait fait
   glisser vers le milieu tout ce qui doit rester collé en bas.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   DÉCO — LA POSE TÉLÉPHONE
   Angelo a repris la décoration à 390 px, et ce n'est pas une retouche de celle
   du bureau : il a retiré huit pièces et en a ajouté cinq. Les deux
   compositions sont donc DEUX JEUX DISTINCTS, et non le même jeu déplacé.

   D'où ce montage : chaque jeu existe dans la page, et seul celui de la bonne
   largeur s'affiche. Les images cachées portent loading="lazy" : n'étant jamais
   rendues, elles ne sont jamais téléchargées — le jeu du bureau ne coûte rien
   sur un téléphone, et réciproquement.

   Téléphone d'abord : le jeu téléphone est la BASE, le jeu du bureau prend
   le relais à 900 px — la même bascule que la mise en page du site.
   ══════════════════════════════════════════════════════════════════════════════ */
.pose-01,
.pose-02,
.pose-03,
.pose-04,
.pose-05,
.pose-06,
.pose-07,
.pose-08,
.pose-09,
.pose-10,
.pose-11,
.pose-12,
.pose-13,
.pose-14,
.pose-15,
.pose-16,
.pose-17,
.pose-18,
.pose-19,
.pose-20,
.pose-21,
.pose-22,
.pose-23,
.pose-24,
.pose-25,
.pose-26,
.pose-27,
.pose-28,
.pose-29,
.pose-30,
.pose-31,
.pose-32,
.pose-33,
.pose-34,
.pose-35,
.pose-36,
.pose-37,
.pose-38,
.pose-39,
.pose-40,
.pose-41,
.pose-42,
.pose-43 { display: none; }

/* ── lieu ── */
.pose-m-01 {
  /* olivier-masse-gauche */
  left: 15.00%;
  top: 6.92vw;
  width: 48.46%;
  translate: -50% -50%;
  rotate: -4deg;
}
.pose-m-02 {
  /* olivier-masse-droite */
  left: 83.72%;
  top: 10.00vw;
  width: 38.21%;
  translate: -50% -50%;
  rotate: 5deg;
}
.pose-m-03 {
  /* olivier-rameau-07 */
  left: 9.96%;
  top: 1.28vw;
  width: 7.95%;
  translate: -50% -50%;
  rotate: 8deg;
}
.pose-m-04 {
  /* olivier-rameau-09 */
  left: 14.00%;
  top: 6.67vw;
  width: 5.90%;
  translate: -50% -50%;
  rotate: -22deg;
}
.pose-m-05 {
  /* olivier-rameau-02 */
  left: 4.10%;
  bottom: -6.92vw;
  width: 22.05%;
  translate: -50% 50%;
}
.pose-m-06 {
  /* ruban-ruban-long */
  left: 43.46%;
  bottom: 14.10vw;
  width: 98.21%;
  translate: -50% 50%;
  rotate: 1deg;
}
.pose-m-07 {
  /* olivier-masse-droite */
  left: 85.38%;
  bottom: 31.79vw;
  width: 48.21%;
  translate: -50% 50%;
}

/* ── carte ── */
.pose-m-08 {
  /* olivier-masse-droite */
  left: 83.72%;
  top: 11.79vw;
  width: 41.79%;
  translate: -50% -50%;
  rotate: 14deg;
}
.pose-m-09 {
  /* olivier-rameau-11 */
  left: 88.25%;
  bottom: 3.08vw;
  width: 5.38%;
  translate: -50% 50%;
  rotate: -196deg;
}
.pose-m-10 {
  /* olivier-rameau-01 */
  left: 7.44%;
  top: 18.72vw;
  width: 22.05%;
  translate: -50% -50%;
}
.pose-m-11 {
  /* olivier-masse-droite */
  left: 87.69%;
  bottom: 5.90vw;
  width: 36.41%;
  translate: -50% 50%;
}
.pose-m-12 {
  /* olivier-masse-gauche */
  left: 92.31%;
  bottom: 26.15vw;
  width: 34.87%;
  translate: -50% 50%;
  rotate: 182deg;
}
.pose-m-13 {
  /* olivier-rameau-01 */
  left: 9.74%;
  bottom: 6.67vw;
  width: 22.05%;
  translate: -50% 50%;
}
.pose-m-14 {
  /* olivier-rameau-02 */
  left: 2.05%;
  bottom: 18.46vw;
  width: 22.05%;
  translate: -50% 50%;
}

/* ── services ── */
.pose-m-15 {
  /* olivier-rameau-08 */
  left: 2.00%;
  bottom: 6.41vw;
  width: 5.90%;
  translate: -50% 50%;
  rotate: -16deg;
}
.pose-m-16 {
  /* olivier-rameau-12 */
  left: 98.25%;
  bottom: 5.38vw;
  width: 5.38%;
  translate: -50% 50%;
  rotate: 190deg;
}
.pose-m-17 {
  /* olivier-rameau-04 */
  left: 96.50%;
  top: 4.87vw;
  width: 13.08%;
  translate: -50% -50%;
  rotate: 196deg;
}
.pose-m-18 {
  /* ruban-ruban-long */
  left: 48.21%;
  bottom: -7.95vw;
  width: 109.23%;
  translate: -50% 50%;
}
.pose-m-19 {
  /* olivier-rameau-01 */
  left: 3.85%;
  top: 0.51vw;
  width: 22.05%;
  translate: -50% -50%;
  rotate: 12deg;
}

/* ── soiree ── */
.pose-m-20 {
  /* olivier-masse-droite */
  left: 82.82%;
  top: -9.49vw;
  width: 40.00%;
  translate: -50% -50%;
  rotate: 8deg;
}
.pose-m-21 {
  /* olivier-rameau-03 */
  left: 4.50%;
  bottom: 30.00vw;
  width: 13.08%;
  translate: -50% 50%;
  rotate: -18deg;
}
.pose-m-22 {
  /* olivier-rameau-01 */
  left: 95.00%;
  bottom: 13.33vw;
  width: 17.95%;
  translate: -50% 50%;
  rotate: 200deg;
}
.pose-m-23 {
  /* olivier-masse-gauche */
  left: 13.46%;
  top: -18.21vw;
  width: 37.69%;
  translate: -50% -50%;
}
.pose-m-24 {
  /* olivier-masse-gauche */
  left: 10.13%;
  bottom: 17.44vw;
  width: 33.08%;
  translate: -50% 50%;
  rotate: -52deg;
}
.pose-m-25 {
  /* olivier-masse-droite */
  left: 84.36%;
  bottom: 18.46vw;
  width: 38.46%;
  translate: -50% 50%;
}
.pose-m-26 {
  /* olivier-masse-gauche */
  left: 91.03%;
  bottom: 36.67vw;
  width: 30.26%;
  translate: -50% 50%;
  rotate: 183deg;
}
.pose-m-27 {
  /* ruban-drape-long */
  left: 55.64%;
  bottom: -3.59vw;
  width: 89.74%;
  translate: -50% 50%;
}

/* ── raisons ── */
.pose-m-28 {
  /* olivier-rameau-02 */
  left: 3.00%;
  bottom: 8.97vw;
  width: 13.85%;
  translate: -50% 50%;
  rotate: -18deg;
}
.pose-m-29 {
  /* olivier-rameau-07 */
  left: 86.00%;
  bottom: 1.54vw;
  width: 5.90%;
  translate: -50% 50%;
  rotate: 198deg;
}
.pose-m-30 {
  /* olivier-rameau-04 */
  left: 96.54%;
  top: 10.77vw;
  width: 12.05%;
  translate: -50% -50%;
  rotate: 186deg;
}
.pose-m-31 {
  /* ruban-fil-volute */
  left: 50.38%;
  bottom: 16.41vw;
  width: 68.97%;
  translate: -50% 50%;
}
.pose-m-32 {
  /* olivier-masse-gauche */
  left: 7.56%;
  top: 18.46vw;
  width: 28.97%;
  translate: -50% -50%;
}
.pose-m-33 {
  /* olivier-masse-droite */
  left: 90.26%;
  top: 20.00vw;
  width: 27.69%;
  translate: -50% -50%;
}

/* ── contact ── */
.pose-m-34 {
  /* olivier-masse-gauche */
  left: 10.44%;
  top: 5.13vw;
  width: 36.15%;
  translate: -50% -50%;
  rotate: -5deg;
}
.pose-m-35 {
  /* olivier-masse-droite */
  left: 91.36%;
  top: 4.62vw;
  width: 33.85%;
  translate: -50% -50%;
  rotate: 6deg;
}
.pose-m-36 {
  /* olivier-rameau-02 */
  left: 96.00%;
  top: 20.77vw;
  width: 13.85%;
  translate: -50% -50%;
  rotate: 212deg;
}
.pose-m-37 {
  /* olivier-rameau-05 */
  left: 2.00%;
  bottom: 4.62vw;
  width: 5.90%;
  translate: -50% 50%;
  rotate: -14deg;
}
.pose-m-38 {
  /* olivier-rameau-09 */
  left: 98.25%;
  bottom: 5.38vw;
  width: 5.38%;
  translate: -50% 50%;
  rotate: 192deg;
}
.pose-m-39 {
  /* ruban-drape-long */
  left: 50.00%;
  bottom: 1.03vw;
  width: 107.95%;
  translate: -50% 50%;
}

/* ── Le jeu du bureau, à partir de 900 px ─────────────────────────── */
@media (min-width: 900px) {
  .pose-m-01,
  .pose-m-02,
  .pose-m-03,
  .pose-m-04,
  .pose-m-05,
  .pose-m-06,
  .pose-m-07,
  .pose-m-08,
  .pose-m-09,
  .pose-m-10,
  .pose-m-11,
  .pose-m-12,
  .pose-m-13,
  .pose-m-14,
  .pose-m-15,
  .pose-m-16,
  .pose-m-17,
  .pose-m-18,
  .pose-m-19,
  .pose-m-20,
  .pose-m-21,
  .pose-m-22,
  .pose-m-23,
  .pose-m-24,
  .pose-m-25,
  .pose-m-26,
  .pose-m-27,
  .pose-m-28,
  .pose-m-29,
  .pose-m-30,
  .pose-m-31,
  .pose-m-32,
  .pose-m-33,
  .pose-m-34,
  .pose-m-35,
  .pose-m-36,
  .pose-m-37,
  .pose-m-38,
  .pose-m-39 { display: none; }
  .pose-01,
  .pose-02,
  .pose-03,
  .pose-04,
  .pose-05,
  .pose-06,
  .pose-07,
  .pose-08,
  .pose-09,
  .pose-10,
  .pose-11,
  .pose-12,
  .pose-13,
  .pose-14,
  .pose-15,
  .pose-16,
  .pose-17,
  .pose-18,
  .pose-19,
  .pose-20,
  .pose-21,
  .pose-22,
  .pose-23,
  .pose-24,
  .pose-25,
  .pose-26,
  .pose-27,
  .pose-28,
  .pose-29,
  .pose-30,
  .pose-31,
  .pose-32,
  .pose-33,
  .pose-34,
  .pose-35,
  .pose-36,
  .pose-37,
  .pose-38,
  .pose-39,
  .pose-40,
  .pose-41,
  .pose-42,
  .pose-43 { display: block; }


  /* ── LIEU ─────────────────────────────────────────────────────────── */
  .pose-01 {
    /* olivier-masse-gauche */
    left: 11.38%;
    top: 6.93vw;
    width: 36.04%;
    translate: -50% -50%;
    rotate: -4deg;
  }
  .pose-02 {
    /* olivier-masse-droite */
    left: 90.64%;
    top: 6.74vw;
    width: 34.57%;
    translate: -50% -50%;
    rotate: 5deg;
  }
  .pose-03 {
    /* olivier-rameau-07 */
    left: 9.96%;
    top: 1.46vw;
    width: 8.01%;
    translate: -50% -50%;
    rotate: 8deg;
  }
  .pose-04 {
    /* olivier-rameau-09 */
    left: 14.00%;
    top: 6.64vw;
    width: 5.96%;
    translate: -50% -50%;
    rotate: -22deg;
  }
  .pose-05 {
    /* olivier-rameau-03 */
    left: 96.00%;
    bottom: 8.98vw;
    width: 12.01%;
    translate: -50% 50%;
    rotate: 206deg;
  }
  .pose-06 {
    /* olivier-rameau-04 */
    left: 7.50%;
    top: 21.78vw;
    width: 12.99%;
    translate: -50% -50%;
    rotate: 14deg;
  }
  .pose-07 {
    /* olivier-rameau-02 */
    left: 3.66%;
    bottom: 1.76vw;
    width: 21.97%;
    translate: -50% 50%;
  }
  .pose-08 {
    /* ruban-ruban-long */
    left: 51.51%;
    bottom: 10.84vw;
    width: 103.61%;
    translate: -50% 50%;
  }

  /* ── CARTE ─────────────────────────────────────────────────────────── */
  .pose-09 {
    /* olivier-masse-droite */
    left: 94.19%;
    top: 4.20vw;
    width: 37.99%;
    translate: -50% -50%;
    rotate: 5deg;
  }
  .pose-10 {
    /* olivier-rameau-02 */
    left: 92.00%;
    top: 19.24vw;
    width: 13.96%;
    translate: -50% -50%;
    rotate: 168deg;
  }
  .pose-11 {
    /* olivier-rameau-01 */
    left: 4.10%;
    bottom: 33.40vw;
    width: 16.99%;
    translate: -50% 50%;
    rotate: -14deg;
  }
  .pose-12 {
    /* olivier-rameau-05 */
    left: 10.99%;
    bottom: -0.39vw;
    width: 5.96%;
    translate: -50% 50%;
    rotate: 24deg;
  }
  .pose-13 {
    /* olivier-rameau-11 */
    left: 88.25%;
    bottom: 3.12vw;
    width: 5.47%;
    translate: -50% 50%;
    rotate: -196deg;
  }
  .pose-14 {
    /* olivier-rameau-01 */
    left: 9.62%;
    top: 6.05vw;
    width: 21.97%;
    translate: -50% -50%;
  }
  .pose-15 {
    /* olivier-masse-droite */
    left: 89.31%;
    bottom: 8.69vw;
    width: 36.43%;
    translate: -50% 50%;
  }
  .pose-16 {
    /* ruban-ruban-s-large */
    left: 8.84%;
    bottom: 21.97vw;
    width: 21.97%;
    translate: -50% 50%;
  }
  .pose-17 {
    /* ruban-ruban-s-large */
    left: 92.92%;
    top: 34.57vw;
    width: 21.97%;
    translate: -50% -50%;
  }
  .pose-18 {
    /* olivier-rameau-01 */
    left: 7.86%;
    top: 30.76vw;
    width: 21.97%;
    translate: -50% -50%;
    rotate: -54deg;
  }
  .pose-19 {
    /* ruban-fil-volute */
    left: 51.12%;
    bottom: 7.13vw;
    width: 48.73%;
    translate: -50% 50%;
  }

  /* ── SERVICES ─────────────────────────────────────────────────────────── */
  .pose-20 {
    /* olivier-masse-gauche */
    left: 8.30%;
    top: 7.23vw;
    width: 25.98%;
    translate: -50% -50%;
    rotate: -6deg;
  }
  .pose-21 {
    /* olivier-rameau-08 */
    left: 2.00%;
    bottom: 6.35vw;
    width: 5.96%;
    translate: -50% 50%;
    rotate: -16deg;
  }
  .pose-22 {
    /* olivier-rameau-12 */
    left: 98.25%;
    bottom: 5.37vw;
    width: 5.47%;
    translate: -50% 50%;
    rotate: 190deg;
  }
  .pose-23 {
    /* olivier-rameau-04 */
    left: 96.50%;
    top: 4.88vw;
    width: 12.99%;
    translate: -50% -50%;
    rotate: 196deg;
  }
  .pose-24 {
    /* ruban-ruban-long */
    left: 48.19%;
    bottom: 5.86vw;
    width: 113.96%;
    translate: -50% 50%;
  }

  /* ── SOIREE ─────────────────────────────────────────────────────────── */
  .pose-25 {
    /* olivier-masse-droite */
    left: 83.01%;
    top: 6.05vw;
    width: 40.04%;
    translate: -50% -50%;
    rotate: 8deg;
  }
  .pose-26 {
    /* olivier-rameau-03 */
    left: 4.50%;
    bottom: 30.08vw;
    width: 12.99%;
    translate: -50% 50%;
    rotate: -18deg;
  }
  .pose-27 {
    /* olivier-rameau-01 */
    left: 95.00%;
    bottom: 13.38vw;
    width: 17.97%;
    translate: -50% 50%;
    rotate: 200deg;
  }
  .pose-28 {
    /* olivier-masse-gauche */
    left: 11.38%;
    top: 9.47vw;
    width: 30.96%;
    translate: -50% -50%;
  }
  .pose-29 {
    /* ruban-ruban-long */
    left: 41.55%;
    bottom: -4.10vw;
    width: 83.89%;
    translate: -50% 50%;
  }
  .pose-30 {
    /* olivier-masse-gauche */
    left: 7.86%;
    bottom: 20.61vw;
    width: 27.83%;
    translate: -50% 50%;
    rotate: -52deg;
  }

  /* ── RAISONS ─────────────────────────────────────────────────────────── */
  .pose-31 {
    /* olivier-rameau-02 */
    left: 3.00%;
    bottom: 8.79vw;
    width: 13.96%;
    translate: -50% 50%;
    rotate: -18deg;
  }
  .pose-32 {
    /* olivier-rameau-07 */
    left: 86.00%;
    bottom: 1.46vw;
    width: 5.96%;
    translate: -50% 50%;
    rotate: 198deg;
  }
  .pose-33 {
    /* olivier-rameau-04 */
    left: 96.00%;
    top: 5.27vw;
    width: 12.01%;
    translate: -50% -50%;
    rotate: 186deg;
  }
  .pose-34 {
    /* ruban-fil-volute */
    left: 50.49%;
    bottom: 0.78vw;
    width: 58.01%;
    translate: -50% 50%;
  }
  .pose-35 {
    /* olivier-masse-gauche */
    left: 6.49%;
    top: 15.23vw;
    width: 24.32%;
    translate: -50% -50%;
  }
  .pose-36 {
    /* olivier-masse-droite */
    left: 94.58%;
    top: 13.57vw;
    width: 21.97%;
    translate: -50% -50%;
  }

  /* ── CONTACT ─────────────────────────────────────────────────────────── */
  .pose-37 {
    /* olivier-masse-gauche */
    left: 10.44%;
    top: 5.08vw;
    width: 36.04%;
    translate: -50% -50%;
    rotate: -5deg;
  }
  .pose-38 {
    /* olivier-masse-droite */
    left: 91.36%;
    top: 4.69vw;
    width: 33.89%;
    translate: -50% -50%;
    rotate: 6deg;
  }
  .pose-39 {
    /* olivier-rameau-02 */
    left: 96.00%;
    top: 20.70vw;
    width: 13.96%;
    translate: -50% -50%;
    rotate: 212deg;
  }
  .pose-40 {
    /* olivier-rameau-05 */
    left: 2.00%;
    bottom: 4.69vw;
    width: 5.96%;
    translate: -50% 50%;
    rotate: -14deg;
  }
  .pose-41 {
    /* olivier-rameau-09 */
    left: 98.25%;
    bottom: 5.47vw;
    width: 5.47%;
    translate: -50% 50%;
    rotate: 192deg;
  }
  .pose-42 {
    /* ruban-noeud-a */
    left: 93.50%;
    bottom: 9.38vw;
    width: 7.03%;
    translate: -50% 50%;
    rotate: 14deg;
  }
  .pose-43 {
    /* ruban-drape-long */
    left: 50.00%;
    bottom: 0.88vw;
    width: 108.01%;
    translate: -50% 50%;
  }
}