/* ═══════════════════════════════════════════════════════════════════════════
   REFONTE — couche de design unique, remplace la superposition des feuilles.

   Cette feuille ne contient AUCUNE décision personnelle. Chaque bloc porte la
   règle dont il découle, et la règle vient de :
     · emil-design-eng  — easing, durées, états d'appui, origin, reduced-motion
     · apple-design     — matière, profondeur, typographie, principes
     · mobile-native    — plancher tactile, viewport, zones sûres, champs

   Elle est chargée EN DERNIER, après les cinq feuilles historiques. Elle ne
   réécrit pas leur mise en page : elle reprend les mêmes classes (.nav, .sec,
   .carte, .btn, .heros, .pied) et remplace leurs valeurs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. JETONS ──────────────────────────────────────────────────────────────
   emil-design-eng « Easing » : les courbes natives sont trop faibles, on pose
   des courbes franches. Une seule valeur par rôle, jamais deux.
   apple-design §15 : l'interlettrage dépend de la taille, jamais une valeur
   unique. L'interligne fait l'inverse de la taille.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* couleurs — identité de la marque, inchangée */
  --fond: #fbfbf9;
  --fond-2: #f4f3ef;
  --surface: #ffffff;
  --encre: #14161c;
  --encre-2: #3d4149;
  --encre-3: #5f646d;          /* 5,2:1 sur --fond */
  --filet: rgb(20 22 28 / .10);
  --ambre: #9a6a24;

  /* mouvement — emil-design-eng */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* entrées, survols, appuis */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* déplacements à l'écran */
  --t-appui: 120ms;   /* retour sous le doigt : 100–160 ms */
  --t-ui: 200ms;      /* menus, survols : 150–250 ms */
  --t-surface: 320ms; /* panneaux : 200–500 ms */

  /* formes et profondeur — apple-design §12 */
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --ombre-1: 0 1px 2px rgb(20 22 28 / .05), 0 8px 20px -14px rgb(20 22 28 / .22);
  --ombre-2: 0 2px 6px -2px rgb(20 22 28 / .07), 0 22px 44px -26px rgb(20 22 28 / .28);
  --lisere: inset 0 1px 0 0 rgb(255 255 255 / .9);

  /* échelle typographique — apple-design §15 */
  --f-display: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
  --f-titre: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
  --f-sous-titre: clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
  --f-corps: 1.0625rem;
  --f-petit: .9375rem;

  --conteneur: 1120px;
  --gouttiere: 1.25rem;
  /* ⚠️ UNE SEULE LIGNE DE GAUCHE (2026-10-21). Mesuré avant ce bloc :
     à 390 px, la barre commençait à 16, le héros à 20 (centré), les pages
     intérieures à 16 ; à 1265 px, la barre à 44, le héros à 56, les pages
     à 73. Trois rails pour un site, c'est exactement ce qui se voit comme
     « pas symétrique » sans qu'on sache nommer quoi. */
  --rail: clamp(16px, 5.75vw, 73px);
  --rythme: clamp(3.5rem, 2.4rem + 4vw, 6rem);
}

/* ── 2. PLANCHER TACTILE ────────────────────────────────────────────────────
   mobile-native « Baseline » : ces lignes passent avant le premier composant.
   ────────────────────────────────────────────────────────────────────────── */
html {
  -webkit-tap-highlight-color: transparent; /* plus de flash gris au doigt */
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;               /* pas de tirer-pour-rafraîchir */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

input, textarea, select {
  font-size: 16px; /* sous 16 px, iOS zoome et ne dézoome pas */
}

button, a, [role="button"], .btn {
  touch-action: manipulation; /* supprime le délai de 300 ms */
  -webkit-user-select: none;
  user-select: none;
}

/* ── 3. TYPOGRAPHIE ─────────────────────────────────────────────────────────
   apple-design §15 : hiérarchie par poids + taille + interligne ensemble.
   Grande taille = interlettrage négatif et interligne serré ; petit texte =
   interlettrage légèrement positif et interligne large.
   ────────────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--police, 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  font-size: var(--f-corps);
  line-height: 1.6;
  letter-spacing: -0.003em;
  color: var(--encre);
  background: var(--fond);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, .heros h1 {
  font-size: var(--f-display);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
}

h2, .titre-sec {
  font-size: var(--f-titre);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 600;
  text-wrap: balance;
}

h3 {
  font-size: var(--f-sous-titre);
  line-height: 1.25;
  letter-spacing: -0.018em;
  font-weight: 600;
}

p, li { text-wrap: pretty; }
/* ⚠️ Un titre qui finit sur « ? » seul sur sa ligne : `balance` répartit les
   lignes sans se soucier des veuves. `pretty` interdit la ligne d'un caractère.
   Mesuré sur « Combien coûte un maçon en 2026 ? Tarifs et devis » à 390 px. */
h1, h2, h3 { text-wrap: pretty; }
/* Les titres de cartes portent la classe .surtitre : le style vient de la
   classe, pas de la balise. On neutralise les marges par défaut du h2. */
h2.surtitre, h3.surtitre { margin: 0; font-weight: 600; }

/* Maillage latéral des pages prix : une liste de liens, pas des puces nues. */
.liste-liens { list-style: none; margin: 12px 0 0; padding: 0; }
.liste-liens li { margin: 0 0 2px; }
.liste-liens a { display: inline-flex; align-items: center; min-height: 34px; }
.liste-liens .aide { color: var(--gris); font-size: .8125rem; margin-left: 8px; }

/* Liste des métiers d'une page /artisans/<dept>.
   ⚠️ 2026-10-21 : le premier jet réutilisait `.registre__ligne`, pensé pour une
   grille à trois colonnes fixes — en mobile, les quatre éléments s'empilaient et
   le prix partait à la ligne. Ici la ligne est un flex qui se replie proprement :
   le nom passe à la ligne, le prix reste à droite. */
.art-liste { border-top: 1px solid var(--filet); }
.art-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--filet);
  text-decoration: none;
  color: inherit;
}
.art-nom { font-weight: 600; flex: 1 1 40%; min-width: 40%; text-decoration: none; }
.art-ligne:hover .art-nom { text-decoration: underline; }
.art-meta { flex: 1 1 100%; order: 3; color: var(--gris); font-size: .8125rem; }
.art-prix {
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.art-prix em { display: block; font-style: normal; color: var(--gris); font-size: .75rem; }
@media (min-width: 720px) {
  .art-meta { flex: 1 1 auto; order: 0; }
  .art-nom { flex: 0 0 30%; }
}

/* Bloc « ce qui décide du prix » des hubs métier : une définition, pas des cartes. */
.facteurs { margin: 18px 0 0; }
.facteurs dt { font-weight: 600; margin-top: 18px; }
.facteurs dt:first-child { margin-top: 0; }
.facteurs dd { margin: 4px 0 0; color: var(--gris); line-height: 1.55; }
.devis-liste { margin: 16px 0 0; padding-left: 1.1em; }
.devis-liste li { margin-bottom: 10px; line-height: 1.5; }

/* ⚠️ LE PRIX DES 101 DÉPARTEMENTS ÉTAIT À 28 % D'OPACITÉ (2026-10-21) :
   #c9c9c9 sur blanc, soit ~1,9:1 — sous le minimum de 4,5:1, et illisible en
   plein soleil sur téléphone. Un prix est une information, pas un filigrane. */
.metiers__prix {
  color: var(--gris);
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
}

/* ⚠️ Sur téléphone, les notes de la colonne de prix restaient alignées à
   droite : un texte de quatre lignes au bord droit, avec un bord gauche en
   dents de scie. Sous 620 px, une seule colonne, donc un seul alignement. */
@media (max-width: 620px) {
  .registre__prix { text-align: left; align-items: flex-start; }
  /* la note gardait `max-width: 224px` ET `margin-left: auto` : elle flottait au
     bord droit du panneau, texte aligné à gauche dans un bloc collé à droite. */
  .registre__note {
    text-align: left;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    align-self: stretch;
  }
}

.heros__sous, .sec__sous {
  font-size: var(--f-sous-titre);
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: var(--encre-2);
  max-width: 62ch;
}

/* apple-design §15 + emil : un paragraphe centré se lit mal au-delà de six
   mots par ligne. On borne la largeur, on ne change pas l'alignement. */
.heros__sous {
  max-width: 44ch;
  margin-inline: auto;
  text-wrap: balance; /* aucune ligne ne commence par une ponctuation isolée */
}

/* ── Les lignes de tarif ───────────────────────────────────────────────────
   apple-design §15 : un paragraphe aligné à droite sur trois lignes se lit mal.
   Le prix et le bouton restent à droite (c'est une colonne de chiffres) ; le
   texte explicatif reprend l'alignement de lecture, à gauche.
   Le centrage vertical créait un grand vide sous le titre quand la colonne de
   droite était plus haute : les deux colonnes partent du haut. */
.registre__ligne {
  align-items: start;
}

.registre__prix {
  text-align: right;
}

.registre__prix p:not(.registre__chiffre),
.registre__prix small {
  text-align: left;
}

/* Le filet au-dessus des boutons n'apporte rien : l'espace suffit à séparer. */
.heros__actions {
  border: 0;
  padding: 0;
  margin-top: clamp(2rem, 1.4rem + 1.4vw, 2.75rem);
}

/* L'étiquette : petite, capitales, interlettrage POSITIF — l'inverse du titre.
   C'est ce contraste qui crée la hiérarchie, pas la couleur. */
.kicker {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .75rem;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ambre);
  font-weight: 500;
}

/* ── 4. RYTHME ET GRILLE ────────────────────────────────────────────────────
   apple-design §16 (Craft) : chaque espacement est une décision, pas un reste.
   ────────────────────────────────────────────────────────────────────────── */
.grille {
  width: min(100% - (var(--gouttiere) * 2), var(--conteneur));
  margin-inline: auto;
}

/* ── 4 bis. LE MÊME RAIL PARTOUT ────────────────────────────────────────────
   La barre, le héros et chaque section partent de la même colonne. La colonne
   intérieure vaut --conteneur ; le rail est l'air autour, identique à gauche et
   à droite. Sur un écran de 1265 px : 73 px de rail, 1120 px de contenu, 72 px
   de l'autre côté — la symétrie se mesure, elle ne se devine pas. */
.nav { padding-inline: var(--rail); }

/* Le rail ne s'applique qu'UNE fois, sur la section. Le héros et les grilles
   intérieures n'ajoutent rien : sinon on empile deux rails (mesuré : 145 px
   au lieu de 73 sur l'accueil). */
/* ⚠️ Spécificité : `.heros` de v4.css portait `margin: 0 56px` (classe) et
   battait `main > section` (élément). Mesuré : le héros démarrait à 56 px
   quand la barre était à 73. On nomme la section pour gagner. */
main > section,
main > .bloc,
main > section.heros,
main > section.bloc {
  width: 100%;
  max-width: calc(var(--conteneur) + var(--rail) * 2);
  margin-inline: auto;
  padding-inline: var(--rail);
  box-sizing: border-box;
}
/* .bloc portait `padding: 96px 0 40px` : deux fois le héros pour un titre de
   même rang. Un seul rythme d'entrée pour tout le site. */
main > section.bloc { padding-top: clamp(2.2rem, 1.4rem + 2.4vw, 4rem); }
/* ⚠️ `@media (max-width: 620px) main.page > .bloc:first-child { padding-top: 96px }`
   est plus spécifique (0,2,2) que la règle ci-dessus (0,1,2) : sur téléphone, la
   première section gardait 96 px de vide sous la barre. On nomme le même
   sélecteur pour être à égalité — et refonte.css arrive en dernier. */
main.page > .bloc:first-child { padding-top: clamp(2.2rem, 1.4rem + 2.4vw, 4rem); }
main > section.heros { margin: 0 auto; }
main section .grille,
main .bloc__int,
main .panneau {
  padding-inline: 0;
  margin-inline: 0;
  width: 100%;
  max-width: none;
}
/* ⚠️ `.bloc__int` gardait `width: min(100% - 2*clamp(20px,5vw,56px), 1220px)` :
   la carte s'arrêtait à 1177 quand la section finissait à 1193 — 16 px de vide
   d'un seul côté, invisibles à l'œil mais mesurables. On nomme les trois
   niveaux pour que la colonne intérieure prenne toute la largeur du rail. */
main.page > .bloc > .bloc__int,
main.page > section > .grille {
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
  margin-inline: 0;
}

/* ⚠️ L'ACCUEIL EST CENTRÉ, LE RESTE EST À GAUCHE — ET C'EST VOULU.
   J'ai d'abord aligné le héros à gauche pour « tout mettre pareil » : la mesure
   a montré que les sections suivantes de l'accueil sont centrées (kicker et
   titre à 273-993 px). Un héros à gauche suivi de sections centrées créait une
   deuxième asymétrie, pire que celle que je corrigeais. On garde donc l'axe
   centré de l'accueil, avec le MÊME rail que partout ailleurs. */
.heros {
  padding-top: clamp(2.2rem, 1.4rem + 2.4vw, 4rem);
  padding-bottom: 0;
  margin-inline: auto;
}
.heros h1 { margin-inline: auto; }
/* Le rang d'étiquettes était en flex centré : il démarrait à 86 px quand le
   titre était à 22. Il suit maintenant le rail. */
.heros__tags, .heros__actions, .heros__piles {
  justify-content: center;
  margin-inline: auto;
}
/* `.heros__bandeau` centrait le rang d'étiquettes : mesuré à 86 px quand le
   titre était à 22. La bande suit le rail comme le reste. */
.heros__bandeau { justify-content: center; }
/* La démonstration Google était centrée (223 px) sous un titre à 73 : deux
   axes verticaux dans le même écran. Elle suit le rail. */
.heros__produit { margin-inline: auto; max-width: 100%; }

/* ⚠️ LE PIED ÉTAIT À 45 px, LE RESTE À 73. Mesuré sur les cinq pages types :
   `footer > .bloc__int` portait `--gouttiere` (20px) plus un padding propre.
   Le pied part maintenant du même rail que la barre et le contenu. */
.pied, footer {
  padding-inline: var(--rail);
  box-sizing: border-box;
}
.pied .bloc__int,
footer .bloc__int {
  width: 100%;
  max-width: calc(var(--conteneur) + var(--rail) * 2);
  margin-inline: auto;
  padding-inline: 0;
}

/* Le haut de page des pages intérieures était à 96 px sur téléphone : deux fois
   le héros, pour un titre de même rang. Un seul rythme. */
main > section,
main > .bloc {
  padding-top: clamp(2.2rem, 1.4rem + 2.4vw, 4rem);
}

.sec { padding-block: var(--rythme); }
.sec--serre { padding-block: calc(var(--rythme) * .65); }
.sec + .sec { border-top: 0; } /* pas de filet de séparation : l'espace suffit */

.sec__tete { margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem); }
.sec__tete .kicker { display: block; margin-bottom: .875rem; }

/* ── 5. BARRE DE NAVIGATION ─────────────────────────────────────────────────
   apple-design §12 : la navigation est une matière translucide, pas une barre
   opaque. Le contenu passe dessous. La lumière frappe le bord haut.
   mobile-native §7 : les zones sûres se paddent, le fond va jusqu'au bord.
   ────────────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgb(251 251 249 / .78);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 0; /* apple-design §12 : pas de filet dur sous une barre flottante */
  padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow var(--t-ui) var(--ease-out),
              background-color var(--t-ui) var(--ease-out);
}

/* L'effet de bord de défilement : l'ombre n'apparaît QUE quand du contenu passe
   sous la barre. Au repos, la barre flotte sans trait. (apple-design §12) */
.nav--colle {
  background: rgb(251 251 249 / .93);
  box-shadow: 0 1px 0 rgb(20 22 28 / .05), 0 14px 30px -26px rgb(20 22 28 / .45);
}

.nav__liens a {
  font-size: var(--f-petit);
  letter-spacing: -0.006em;
  color: var(--encre-2);
  text-decoration: none;
  transition: color var(--t-ui) var(--ease-out);
}

/* « Vibrancy » (§12) : sur une surface translucide, le texte doit être plus
   contrasté et légèrement plus gras — jamais un gris plat. */
@media (hover: hover) and (pointer: fine) {
  .nav__liens a:hover { color: var(--encre); }
}

/* ── 6. BOUTONS ─────────────────────────────────────────────────────────────
   emil-design-eng : un bouton doit répondre à l'appui (scale 0.97, 160 ms).
   mobile-native : 44 px de haut minimum, retour à l'appui, pas au relâchement.
   apple-design §1 : la réponse est instantanée, jamais après le clic.
   ────────────────────────────────────────────────────────────────────────── */
.btn, .bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding-inline: 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: var(--f-petit);
  font-weight: 600;
  letter-spacing: -0.008em;
  text-decoration: none;
  transition: transform var(--t-appui) var(--ease-out),
              background-color var(--t-ui) var(--ease-out),
              color var(--t-ui) var(--ease-out),
              box-shadow var(--t-ui) var(--ease-out);
}

/* ⚠️ LA COULEUR N'EST PAS UNE DÉCISION DE CRAFT. Le terre cuite vient de la
   marque (mono.css, en !important) : on ne le repeint pas. On ne touche qu'à la
   forme, à l'ombre et au mouvement. */
.btn--primaire, .bouton {
  box-shadow: var(--ombre-1);
}

.btn--second {
  background: var(--surface);
  color: var(--encre);
  box-shadow: var(--ombre-1), var(--lisere);
}

/* Un seul état d'appui, pour tous les doigts et toutes les souris. */
.btn:active, .bouton:active {
  transform: scale(0.97);
  transition-duration: var(--t-appui);
}

/* Le survol n'existe que sur un pointeur fin — jamais collé après un tap. */
@media (hover: hover) and (pointer: fine) {
  .btn--second:hover { background: var(--fond-2); }
}

/* Le clavier doit voir où il est. */
.btn:focus-visible, .bouton:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ambre);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── 7. CARTES ──────────────────────────────────────────────────────────────
   emil-design-eng : une ombre semi-transparente plutôt qu'un bord plein ; on
   n'anime que transform et opacity ; le survol ne soulève pas au doigt.
   apple-design §12 : une grande surface porte une ombre plus profonde qu'une
   petite pastille.
   ────────────────────────────────────────────────────────────────────────── */
.carte {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-l);
  padding: clamp(1.25rem, 1rem + .8vw, 1.75rem);
  box-shadow: var(--ombre-1), var(--lisere);
  transition: transform var(--t-ui) var(--ease-out),
              box-shadow var(--t-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .carte:hover {
    transform: translateY(-2px);
    box-shadow: var(--ombre-2), var(--lisere);
  }
}

.carte__num {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--ambre);
}

.carte__pied {
  margin-top: auto;
  padding-top: 1rem;
  font-size: var(--f-petit);
  color: var(--encre-3);
}

/* ── 8. FORMULAIRES ─────────────────────────────────────────────────────────
   mobile-native §4 : 16 px minimum, sinon iOS zoome. 44 px de haut.
   ────────────────────────────────────────────────────────────────────────── */
input, textarea, select {
  min-height: 48px;
  padding: .75rem 1rem;
  border-radius: var(--r-s);
  border: 1px solid var(--filet);
  background: var(--surface);
  color: var(--encre);
  transition: border-color var(--t-ui) var(--ease-out),
              box-shadow var(--t-ui) var(--ease-out);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ambre);
  box-shadow: 0 0 0 3px rgb(154 106 36 / .16);
}

/* ── 9. LIENS DANS LE TEXTE ─────────────────────────────────────────────────
   apple-design §16 (Simplicité) : un lien se reconnaît sans couleur criarde.
   ────────────────────────────────────────────────────────────────────────── */
.page a:not(.btn):not(.bouton):not(.nav__marque),
.pied a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: rgb(20 22 28 / .3);
  transition: text-decoration-color var(--t-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .page a:not(.btn):not(.bouton):hover { text-decoration-color: var(--ambre); }
}

/* ── 10. PIED DE PAGE ───────────────────────────────────────────────────────
   ────────────────────────────────────────────────────────────────────────── */
.pied {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
  border-top: 1px solid var(--filet);
  color: var(--encre-3);
  font-size: var(--f-petit);
}

/* mobile-native §5 : une cible tactile fait 44 px de haut. Les liens de pied de
   page sont des contrôles, pas du texte courant : ils prennent la hauteur. */
.pied a {
  /* ⚠️ `inline-flex` collait tous les liens du pied sur une seule ligne
     (« Création de site IA & audit Les offres Références »). Il faut un flex
     de bloc : une cible de 44 px ET un lien par ligne. */
  display: flex;
  align-items: center;
  min-height: 44px;
  width: fit-content;
  }

/* Le bouton du menu est la commande la plus tapée du site sur téléphone. */
.nav__marque {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ⚠️ NE PAS TOUCHER AU `display` : le burger est masqué par défaut et affiché
   par une requête média (v4.css, ligne 856). Forcer `display` ici l'a fait
   apparaître sur ordinateur, à côté d'une barre de navigation complète. On ne
   fixe que la taille de la cible. */
.nav__burger, .menu-mobile__fermer {
  min-width: 44px;
  min-height: 44px;
}

.pied__titre {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin-bottom: .875rem;
}

/* ── 11. ZONES SÛRES ────────────────────────────────────────────────────────
   mobile-native §7 : ce qui touche le bord bas de l'écran se padde.
   ────────────────────────────────────────────────────────────────────────── */
.pied, .menu-mobile {
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.menu-mobile {
  padding-top: calc(.5rem + env(safe-area-inset-top, 0px));
}

/* ── 12. ACCESSIBILITÉ ──────────────────────────────────────────────────────
   emil-design-eng : mouvement réduit = moins de mouvement, pas zéro.
   apple-design §14 : trois signaux séparés — mouvement, transparence, contraste.
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .nav {
    background: var(--fond);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .nav { background: var(--fond); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .carte, .btn--second { border: 1px solid var(--encre); box-shadow: none; }
  :root { --encre-3: #3d4149; }
}

/* ── 12 bis. LE PANNEAU DU MENU SE MATÉRIALISE ─────────────────────────────
   apple-design §12 : « Materialize, don't just fade » — une surface translucide
   arrive en flou et en échelle, pas en fondu simple.
   apple-design §7 : elle vient du haut, là où se trouve le bouton qui l'ouvre ;
   elle repart par le même chemin.
   emil-design-eng : transition, jamais @keyframes — interrompue, elle se
   reprend au lieu de repartir de zéro.
   ────────────────────────────────────────────────────────────────────────── */
.menu-mobile {
  transform-origin: top right;
  transition: opacity var(--t-surface) var(--ease-out),
              transform var(--t-surface) var(--ease-out);
}

@starting-style {
  .menu-mobile {
    opacity: 0;
    transform: scale(.985) translateY(-6px);
  }
}

/* ── 12 quater. LE FILET DE SÉCURITÉ DES BLOCS RÉVÉLÉS ──────────────────────
   `.entree` démarre à opacity 0 et n'apparaît que si lumiere.js ajoute `.vu`.
   Si ce script ne s'exécute pas, la page reste vide — le même piège que
   l'entrée du héros en @keyframes. Le filet est posé en JavaScript, dans
   l'en-tête (_v3_essentiel.html) : au bout de 2,5 s, SI lumiere.js ne s'est pas
   signalé, tout est révélé. Une animation CSS ne savait pas distinguer « pas
   encore défilé » de « script mort » : elle révélait aussi ce qui était hors
   écran.
   ────────────────────────────────────────────────────────────────────────── */
/* emil-design-eng « durées » : 450 ms au lieu de 550, course de 12 px au lieu de
   14. Une révélation au défilement n'est pas un retour d'interface, mais elle
   n'a aucune raison de traîner au-delà du demi-seconde. */
.entree {
  transform: translateY(12px);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
}

.entree.vu {
  transform: none;
}

/* ── 12 ter. LES CHIFFRES S'ALIGNENT ────────────────────────────────────────
   apple-design §15 : dans une colonne de prix, les chiffres prennent la même
   largeur, sinon les virgules dansent d'une ligne à l'autre.
   ────────────────────────────────────────────────────────────────────────── */
.registre__chiffre,
.prix,
.carte__num,
table,
time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 13. GRANDS TITRES SUR PETIT ÉCRAN ──────────────────────────────────────
   mobile-native : la taille d'affichage ne doit pas casser la ligne ; on borne
   autrement que par une hauteur de fenêtre.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --gouttiere: 1rem; --rythme: 3rem; }
  h1, .heros h1 { letter-spacing: -0.03em; }
}