/* ══════════════════════════════════════════════════════════════════════════════
   SOCLE
   Remise à zéro, variables, typographie de base, enveloppe et rythme des sections.
   Tout ce qui se règle une fois pour tout le site se règle ici.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   LA POLICE, CHEZ NOUS
   Nunito venait de Google Fonts. Avant qu'un seul titre puisse s'afficher, le
   navigateur devait faire DEUX allers-retours vers un serveur tiers : d'abord la
   feuille de style, puis les fichiers qu'elle désigne. En attendant il peignait
   le texte dans une police de secours, puis le remplaçait — c'est ce saut qu'on
   voyait sur les titres, et c'est ce que le client a signalé.

   Deux fichiers seulement, et c'est la bonne surprise : Nunito est une police
   VARIABLE. Un seul fichier porte les trois graisses, 400, 700 et 800. L'ancien
   montage en déclarait quinze pour télécharger la même chose.

   Le latin-ext est déclaré EN PREMIER, et ce n'est pas un détail : les deux
   jeux se recouvrent sur quelques caractères dont le « œ » français, et c'est
   la dernière règle déclarée qui l'emporte sur le recouvrement. Dans cet ordre,
   le « œ » est servi par le latin et le second fichier ne part jamais — le site
   n'a aucun caractère qui lui soit propre. En pratique : UN fichier de
   38 Ko, préchargé, servi depuis notre domaine.
   ══════════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/medias/polices/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;          /* police variable : une seule fonte, trois graisses */
  font-display: swap;
  src: url("/medias/polices/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* BEBAS NEUE — la voix de l'affiche. Choisie par Angelo le 29/09/2026 pour les
   Jeudis Boulistes : de grandes capitales serrées, comme sur les affiches du
   restaurant. Elle ne sert qu'aux titres et aux chiffres des soirées, jamais au
   texte courant. Licence libre (SIL Open Font License), servie de chez nous. */
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/medias/polices/bebas-neue-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/medias/polices/bebas-neue-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* LA POLICE DE SECOURS, RECALÉE SUR NUNITO.
   Une police de secours aux mauvaises proportions, c'est la page qui se
   réorganise sous les yeux du visiteur au moment du remplacement. Les quatre
   valeurs ci-dessous sont MESURÉES, pas devinées :

     · la boîte de Nunito monte à 101,1 % de son corps et descend à 35,3 % ;
       on impose donc exactement les mêmes à la secours, et la ligne ne bouge pas.
     · en largeur moyenne sur du vrai texte du site, Helvetica Neue est à 0,1 %
       de Nunito et Arial à 0,5 %. Le size-adjust a été réglé en mesurant le
       rendu final, pas en théorie : 99,8 % annule le demi-pour-cent qui restait.

   Résultat : entre la police de secours et Nunito, le texte ne se décale pas
   d'un pixel. C'est la seule façon d'avoir font-display: swap sans le saut. */
@font-face {
  font-family: "Nunito secours";
  src: local("Helvetica Neue"), local("HelveticaNeue"), local("Arial"),
       local("Liberation Sans"), local("Roboto");
  size-adjust: 99.8%;
  ascent-override: 101.1%;
  descent-override: 35.3%;
  line-gap-override: 0%;
}

/* ─── Les variables ──────────────────────────────────────────────────────────
   Un blanc chaud traversé de lueurs rouges. Le rouge vient du logo et du store
   de la terrasse, le blanc chaud vient du papier du livre de la carte.

   Deux familles de textes, et il ne faut jamais les confondre :
     · celles en « encre » se posent SUR le clair, page et plaques de verre
     · celles en « os » se posent SUR un rouge plein, boutons et bandeaux
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* fonds */
  --page:        #f7f4ef;   /* blanc chaud, jamais un blanc d'écran */
  --page-creuse: #efe9e0;   /* crème, pour creuser un bloc */
  --blanc:       #ffffff;

  /* Textes posés sur le clair. Les trois valeurs sont mesurées sur le crème
     #f7f4ef, et aucune ne descend sous 4,5 — le seuil du texte courant.
       encre     10,92   titres et texte fort
       sourdine   6,60   corps de texte
       eteint     5,04   mentions, légendes, notes */
  --encre:    #3a3632;
  --sourdine: #5c5650;
  --eteint:   #706760;

  /* textes posés sur un rouge plein */
  --os:        #fdf4ee;
  --os-sourd:  #f6dedc;
  --os-eteint: #e5b6b4;

  /* Les rouges. Deux emplois qu'il ne faut jamais confondre :
       · APLAT — le rouge qui porte du texte clair (boutons, bandeaux, filets).
         --os sur --rouge-vif mesure 5,27 : c'est bon, on n'y touche pas.
       · ENCRE — le rouge qui EST du texte. Là il faut descendre, sinon il
         passe sous le seuil. Un gros titre peut tenir le plus clair,
         un lien ou une mention non. */
  --rouge:        #a3121c;  /* la marque */
  --rouge-vif:    #c81e28;  /* aplats : boutons, filets, accents */
  --rouge-braise: #e23b3f;  /* les survols */
  --rouge-titre:  #c8452f;  /* rouge ENCRE, gros titres seulement — 4,40 */
  --rouge-texte:  #b03a26;  /* rouge ENCRE, petit texte et liens — 5,50 */

  /* décor seulement */
  --olive: #76724e;

  /* filets, cadres, verre, ombres */
  --trait:       rgb(29 23 20 / .12);
  --trait-fort:  rgb(29 23 20 / .24);
  /* Les images n'ont plus de passe-partout rouge : répété sur onze photos, il
     faisait album découpé. C'est l'ombre portée qui donne maintenant le relief
     que le cadre essayait de donner, sans le bruit. */
  --ombre-image: 0 16px 36px rgb(80 40 25 / .20);
  --verre:       rgb(255 255 255 / .74);
  --verre-bord:  rgb(255 255 255 / .92);
  --ombre-douce:  0 18px 44px rgb(122 28 30 / .15), 0 2px 6px rgb(122 28 30 / .07);
  --ombre-portee: 0 26px 60px rgb(122 28 30 / .22), 0 3px 10px rgb(122 28 30 / .10);

  /* typographie */
  /* « Nunito secours » AVANT system-ui : c'est elle qui tient la place pendant
     le chargement, aux proportions exactes de Nunito. */
  --courant: "Nunito", "Nunito secours", system-ui, sans-serif;
  --display: "Nunito", "Nunito secours", system-ui, sans-serif;
  --affiche: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --interlettre: .34em;

  /* rythme */
  --gouttiere:   clamp(20px, 5vw, 80px);
  --souffle:     clamp(56px, 7vh, 96px);
  --souffle-bas: clamp(48px, 6vh, 84px);
  --mesure:      62ch;
  --largeur-max: 1320px;

  /* formes */
  --arrondi:        22px;
  --arrondi-image:  10px;
  --arrondi-pilule: 999px;

  --courbe: cubic-bezier(.2, .7, .2, 1);
  --duree:  .34s;
  --duree-longue: .7s;

  /* hauteurs réservées, relues par le JS */
  --hauteur-entete: 76px;
  --hauteur-barre:  66px;   /* la barre du bas du téléphone ; 0 à partir de 861 px */
  /* L'ÉCRAN UTILE (Angelo, 21/10/2026) : téléphone tourné, petite fenêtre, les
     photos sortaient de l'écran. Aucun visuel ne dépasse cette hauteur : ce
     qui reste visible une fois la barre du bas posée, moins un peu d'air.
     Téléphone tenu droit et grand écran : aucun visuel ne l'atteint, rien
     n'y change. */
  --ecran-utile: calc(100svh - var(--hauteur-barre) - 40px);
}

/* ─── Remise à zéro ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;   /* la barre ne suit pas le défilement, rien à dégager */
  /* `clip` et pas `hidden` : on coupe ce qui dépasse sans créer de conteneur de
     défilement, sinon les éléments collants du site cesseraient de coller. */
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  color: var(--encre);
  font-family: var(--courant);
  font-size: clamp(16px, .45vw + 15px, 18px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--hauteur-barre);
  background: var(--page);
}

/* ─── Le fond ────────────────────────────────────────────────────────────────
   Le piège d'un fond de couleur, c'est qu'il soit d'une seule valeur : à ce
   moment-là il ne ressemble plus à une matière, il ressemble à un aplat.
   Ici le blanc est une PLAGE, pas une couleur :

     1. la base, un blanc chaud au repos
     2. trois nappes de rouge qui dérivent lentement, chacune sur son tempo et
        sa trajectoire, pour que la boucle ne se devine jamais
     3. une vignette par-dessus, qui teinte les quatre coins vers le rouge. En
        clair, une vignette ne noircit pas les bords, elle les colore : sinon la
        page devient grise et sale.

   Les valeurs sont calibrées pour que même à l'endroit le plus rouge, le gris
   secondaire garde son contraste.
   Le tout est fixe : la page défile devant, la lumière ne bouge pas avec elle.
   ─────────────────────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════════
   LE FOND ET LES FEUILLES
   Le fond était un rose très pâle : du rouge dilué, qui neutralisait le rouge
   de la marque. Il est maintenant un crème NEUTRE et uniforme du haut en bas —
   aucune bande de couleur, aucune section teintée. Le seul contraste fort du
   site reste la photo du hero.

   La vie ne vient plus d'un dégradé qui dérive, elle vient des FEUILLES : un
   seul canvas, fixe, derrière tout le contenu, du haut de la page au pied.
   Il ne défile pas avec la page, les feuilles tombent en continu.

   L'ORDRE DES COUCHES, et il est délicat :
     le fond de body          →  le crème
     .hero__image / __voile   →  z-index -3 / -2, hors contexte d'empilement
     #feuilles                →  z-index 1, donc AU-DESSUS de la photo du hero
     .section, .hero__contenu →  z-index 2, donc au-dessus des feuilles
   C'est ce qui permet aux feuilles de tomber devant la photo du hero tout en
   passant derrière le logo, les boutons et tout le contenu des sections.
   ══════════════════════════════════════════════════════════════════════════════ */
/* Une toile de feuilles par section, calée sur sa boîte, qui défile avec elle.
   Elle est posée juste avant l'enveloppe : en z-index -1 comme les pièces de
   déco, mais APRÈS elles dans le document, donc les feuilles tombent devant le
   feuillage fixe et derrière tout le contenu en flux. */
.section > canvas.feuilles {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .section > canvas.feuilles { display: none; }
}

/* L'attribut « hidden » doit TOUJOURS cacher. Sans cette règle, n'importe quel
   style qui pose un display (les boutons sont en inline-flex) l'emporte sur le
   navigateur, et un élément marqué caché reste affiché. */
[hidden] { display: none !important; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

p, ul, ol { margin: 0; }
ul { list-style: none; padding: 0; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ─── Accessibilité ────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--rouge-vif);
  outline-offset: 3px;
  border-radius: 4px;
}

.saut {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  background: var(--encre);
  color: var(--page);
  padding: 12px 20px;
  border-radius: var(--arrondi-pilule);
  font-weight: 700;
  transition: top var(--duree) var(--courbe);
}
.saut:focus { top: 12px; }

.pour-lecture {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ─── Mise en page ─────────────────────────────────────────────────────────── */
.enveloppe {
  width: 100%;
  /* Jamais plus large que l'écran, même si un contenu refuse de rétrécir :
     sans ça, un seul bouton trop long élargissait toute la section. */
  min-width: 0;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* Une section, un écran. Toutes les sections tiennent le même pas : elles
   font au moins la hauteur de la fenêtre et leur contenu se cale au centre.
   Ce qui est plus haut qu'un écran est bridé à la source, dans sa section :
   le livre, le slide, le portrait, le plan. */
.section {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  /* --hauteur-barre vaut 0 sur grand écran et 66px dès que la barre
     « Appeler / Réserver » apparaît : le bas d'une section ne passe jamais
     dessous. */
  padding-block: var(--souffle) calc(var(--souffle-bas) + var(--hauteur-barre));
  isolation: isolate;
  /* AUCUN ROGNAGE ICI, et c'est le fruit d'une erreur qui a coûté cher.
     La section portait overflow-x: clip pour empêcher une déco débordante de
     créer une barre de défilement horizontale. Mais ce clip rogne AUSSI en
     hauteur : le feuillage qui passe d'une section à l'autre était coupé net à
     la frontière. J'ai voulu le réparer avec overflow-clip-margin — qui n'est
     pas supporté par Safari. Chez moi le correctif marchait, chez le client
     rien ne changeait.
     La bonne réponse est de ne pas rogner du tout ici. Le débordement
     horizontal est tenu au niveau de la page, sur html et body, qui est le
     seul endroit où la règle est comprise par tous les moteurs. */
}