/* CODISAN — maquette v3 « la carte en profondeur » (Claude Code, 29/09/2026).
   Ambiance A « Aube douce » pour l'espace et les sections ; ambiance C « Nuit chaude » dans les parcours. */
@font-face { font-family: "Newsreader"; src: url(fonts/newsreader.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --creme: #fff8ef; --peche: #fbeee2; --abricot: #f6e3d6; --terre: #cf7550; --terre-claire: #e59a72; --terre-fonce: #a85a3a;
  --encre: #3a2c26; --gris: #6b5850; --gris-clair: #9a8378;
  --verre: rgba(255, 252, 247, .66); --bord: rgba(255, 255, 255, .85);
  --nuit: #140e0b; --nuit-2: #2a1a14; --ambre: #f4a877; --ivoire-nuit: #f3e6d8; --gris-nuit: #cdb8a6;
  --titre: "Newsreader", Georgia, serif; --texte: "Inter", system-ui, sans-serif;
  --doux: cubic-bezier(.22, .8, .24, 1);
  /* Teintes du jour en variables (15/10/2026) : une palette (palettes/*.css) n'a qu'à redéfinir ce bloc et le précédent.
     Valeurs identiques à l'ancien codage en dur, contrôlé par captures pixel à pixel. */
  --lueur-1: #ffe6cf; --lueur-2: #f8d9cc; --bulle-1: #ffe0cb; --bulle-2: #eea883; --bulle-3: #dc8a63;
  --fenetre-focus-1: #fffdfa; --fenetre-focus-2: #fff5ec; --sur-terre: #fffaf4; --terre-bouton: #d27552;
  --apercu-texte: #5a463d; --repere-fond: #f6c9ad; --repere-texte: #8d4a2c;
  --terre-rvb: 207, 117, 80; --terre-fonce-rvb: 168, 90, 58; --ombre-rvb: 150, 90, 60; --ombre-focus-rvb: 170, 95, 60;
  --ombre-barre-rvb: 120, 60, 30; --ombre-logo-rvb: 192, 101, 63; --bulle-ombre-rvb: 180, 100, 60;
  --teinte-rvb: 255, 244, 234; --teinte-2-rvb: 255, 240, 228; --papier-rvb: 255, 252, 247; --creme-rvb: 255, 248, 239;
  --fenetre-1-rvb: 255, 253, 249; --fenetre-2-rvb: 255, 246, 238; --voile-rvb: 255, 246, 236;
}
* { box-sizing: border-box; margin: 0; }
html { color-scheme: light; }
body { font-family: var(--texte); color: var(--encre); background: var(--creme); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; height: 100vh; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 450; font-variation-settings: "opsz" 72; letter-spacing: -.02em; }
/* 05/10/2026 : à -0,02 em, l'empattement droit du A touchait celui du N (point sombre en bas du A, vu par Mickaël) */
#t-carte { letter-spacing: .01em; }
em { font-style: italic; color: var(--terre); font-variation-settings: "opsz" 72; }
.surtitre { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--terre); margin-bottom: 20px; }
.chapo { font-size: 19px; line-height: 1.65; color: var(--gris); max-width: 36em; }
.bouton { display: inline-block; padding: 15px 28px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px;
  background: linear-gradient(145deg, var(--terre-claire), var(--terre-bouton)); color: var(--sur-terre); box-shadow: 0 12px 30px -10px rgba(var(--terre-rvb), .6);
  transition: transform .4s var(--doux), box-shadow .4s var(--doux); }
.bouton:hover, .bouton:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(var(--terre-rvb), .7); }
:focus-visible { outline: 2px solid var(--terre); outline-offset: 4px; border-radius: 8px; }

/* ---------- En-tête ---------- */
.entete { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; gap: 32px; padding: 30px 56px; }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--titre); font-variation-settings: "opsz" 24; font-size: 20px; }
.marque img { width: 34px; height: 34px; display: block; filter: drop-shadow(0 6px 12px rgba(var(--ombre-logo-rvb), .28)); }
.menu { margin-left: auto; display: flex; gap: 15px; font-size: 12px; }
.menu a { text-decoration: none; color: var(--gris); transition: color .3s; }
.menu a:hover, .menu a[aria-current] { color: var(--terre); }
.bascule { border: 0; background: none; font: inherit; font-size: 13px; color: var(--gris-clair); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- L'espace (profondeur) ---------- */
.espace { position: fixed; inset: 0; perspective: 900px; perspective-origin: 50% 45%; overflow: hidden; z-index: 1;
  background: radial-gradient(1200px 700px at 78% 30%, var(--lueur-1) 0%, transparent 60%),
              radial-gradient(900px 600px at 10% 90%, var(--lueur-2) 0%, transparent 55%),
              linear-gradient(160deg, var(--creme) 0%, var(--peche) 55%, var(--abricot) 100%);
  transition: background 1.2s var(--doux); }
.espace::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.4s var(--doux); pointer-events: none;
  background: radial-gradient(1000px 700px at 75% 25%, #3b2419 0%, transparent 60%), radial-gradient(800px 600px at 15% 85%, #2a1a14 0%, transparent 60%), var(--nuit); }
.monde { position: absolute; z-index: 1; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.halo, .bulle { position: absolute; border-radius: 50%; pointer-events: none; transform-style: preserve-3d; }
.halo { width: 1400px; height: 1400px; margin: -700px 0 0 -700px; background: radial-gradient(circle, rgba(255, 255, 255, .5), transparent 62%); }
.bulle { background: radial-gradient(circle at 35% 30%, var(--bulle-1), var(--bulle-2) 55%, var(--bulle-3)); box-shadow: 0 30px 60px -20px rgba(var(--bulle-ombre-rvb), .35); }

/* Fenêtres dans l'espace */
.fenetre { position: absolute; left: 0; top: 0; width: 400px; padding: 28px 30px 30px; border-radius: 28px; text-decoration: none; color: var(--encre);
  /* Pas de backdrop-filter en 3D : Firefox y dessine des coutures pointillées (constaté le 29/09). Dégradé laiteux à la place. */
  background: linear-gradient(160deg, rgba(var(--fenetre-1-rvb), .93), rgba(var(--fenetre-2-rvb), .86));
  border: 1px solid var(--bord); box-shadow: 0 34px 70px -28px rgba(var(--ombre-rvb), .4), inset 0 1px 0 #fff;
  transition: background .5s var(--doux); cursor: pointer; }
.fenetre small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--terre); margin-bottom: 14px; }
.fenetre h3 { font-size: 27px; line-height: 1.12; margin-bottom: 12px; font-variation-settings: "opsz" 24; }
.fenetre p { font-size: 15px; line-height: 1.55; color: var(--gris); }
.fenetre.ouverte { opacity: 0 !important; transition: opacity .5s var(--doux); }
.fenetre.focus { background: linear-gradient(160deg, var(--fenetre-focus-1), var(--fenetre-focus-2)); box-shadow: 0 44px 90px -30px rgba(var(--ombre-focus-rvb), .55), 0 0 0 1px rgba(var(--terre-rvb), .25), inset 0 1px 0 #fff; }
.apercu { margin-top: 20px; padding: 14px 16px; border-radius: 16px; background: rgba(var(--teinte-2-rvb), .8); font-size: 14px; color: var(--apercu-texte); min-height: 52px; }
.apercu-faire { display: flex; gap: 22px; font-size: 20px; color: var(--terre); }
.apercu-faire span { animation: flotte 4s var(--doux) infinite alternate; }
.apercu-faire span:nth-child(2) { animation-delay: .6s; } .apercu-faire span:nth-child(3) { animation-delay: 1.2s; }
.apercu-donnees b { font-weight: 600; padding: 2px 7px; border-radius: 7px; background: var(--repere-fond); color: var(--repere-texte); }
.apercu-contact { font-size: 24px; color: var(--terre); }
@keyframes flotte { to { transform: translateY(-5px); } }
@keyframes allume { 0%, 100% { opacity: .3; transform: scale(1); } 40% { opacity: 1; transform: scale(1.25); } }

/* ---------- Vues ---------- */
main { position: relative; z-index: 10; }
.vue { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 120px 56px 110px;
  opacity: 0; visibility: hidden; transition: opacity .7s var(--doux), visibility 0s linear .7s, transform .7s var(--doux); pointer-events: none; }
.vue.active { opacity: 1; visibility: visible; transition: opacity .8s var(--doux) .15s, visibility 0s, transform .8s var(--doux) .15s; pointer-events: auto; }
.carte, .carte.active { justify-content: center; pointer-events: none; } /* l'accueil laisse passer le clic vers les fenêtres (01/10) */
.carte .accroche { max-width: 46vw; pointer-events: auto; transition: opacity .6s var(--doux), transform .8s var(--doux); }
.carte h1 { font-size: clamp(50px, 5.6vw, 88px); line-height: 1.02; margin-bottom: 26px; }
.actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; align-items: center; }
.indice { font-size: 13px; color: var(--gris-clair); }
body.en-vol .carte .accroche, body.au-loin .carte .accroche { opacity: 0; transform: translateX(-40px); pointer-events: none; }

.page { align-items: center; justify-content: flex-start; overflow-y: auto; background: rgba(var(--voile-rvb), .55); transform: scale(.96); }
.page.active { transform: none; } /* aucun calque : texte rendu net (Firefox) */
.feuille { width: min(1060px, 100%); margin: auto; padding: 56px 60px; border-radius: 36px; background: rgba(var(--papier-rvb), .95);
  border: 1px solid var(--bord); box-shadow: 0 50px 110px -40px rgba(var(--ombre-rvb), .45), inset 0 1px 0 #fff; }
.feuille h2 { font-size: clamp(38px, 4vw, 60px); line-height: 1.06; margin-bottom: 30px; }
.feuille h3 { margin: 34px 0 14px; font-family: var(--texte); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.feuille p, .feuille li { font-size: 15.5px; line-height: 1.7; }
.feuille p + p, .feuille ul + p, .feuille ol + p { margin-top: 16px; }
.feuille ul, .feuille ol { padding-left: 24px; display: grid; gap: 10px; }
.feuille blockquote { margin: 0 0 28px; padding: 18px 22px; border-left: 3px solid var(--terre); background: rgba(var(--teinte-rvb), .75); border-radius: 0 18px 18px 0; }
.feuille table { width: 100%; margin: 20px 0 30px; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.feuille th, .feuille td { padding: 12px 14px; border: 1px solid var(--bord); text-align: left; vertical-align: top; }
.feuille th { font-weight: 600; background: rgba(var(--teinte-rvb), .8); }
.demo-titre { padding: 22px 24px 0; margin-top: 38px !important; border: 1px solid var(--bord); border-bottom: 0; border-radius: 20px 20px 0 0; background: rgba(var(--teinte-rvb), .75); }
.demo-titre::before { content: "Exemple fictif"; display: block; margin-bottom: 8px; color: var(--terre); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.demo-titre + p, .demo-titre + ol { padding: 10px 24px 22px; border: 1px solid var(--bord); border-top: 0; border-radius: 0 0 20px 20px; background: rgba(var(--teinte-rvb), .75); }
.intertitre-page { padding-top: 0; border-bottom: 1px solid var(--bord); }
.feuille.centre { text-align: center; }
.feuille.centre .bouton { margin-top: 10px; }
.blocs { display: grid; gap: 22px; margin: 8px 0 30px; }
.blocs.trois { grid-template-columns: repeat(3, 1fr); } .blocs.deux { grid-template-columns: repeat(2, 1fr); }
.blocs > div { padding: 24px 26px; border-radius: 22px; background: rgba(var(--teinte-rvb), .75); }
.blocs h3 { font-size: 22px; line-height: 1.2; margin-bottom: 10px; font-variation-settings: "opsz" 24; }
.blocs p { font-size: 15.5px; line-height: 1.6; color: var(--gris); }
.cartes small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--terre); margin-bottom: 10px; }
.cartes p { font-family: var(--titre); font-size: 20px; line-height: 1.35; color: var(--encre); font-variation-settings: "opsz" 24; }
.jalons { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.jalons li { padding: 22px 24px; border-radius: 20px; background: rgba(var(--teinte-rvb), .75); font-family: var(--titre); font-size: 20px; font-variation-settings: "opsz" 24; }
.jalons span { display: block; font-family: var(--texte); font-size: 12px; letter-spacing: .14em; color: var(--terre); margin-bottom: 8px; }
.pied { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(var(--terre-rvb), .2); display: flex; justify-content: space-between; gap: 18px; font-size: 13px; color: var(--gris-clair); flex-wrap: wrap; }
.pied a { margin-left: 18px; }

/* ---------- Parcours : ambiance C « Nuit chaude » ---------- */
body[data-ambiance="nuit"] { color: var(--ivoire-nuit); }
body[data-ambiance="nuit"] .espace::after { opacity: 1; }
body[data-ambiance="nuit"] .menu a, body[data-ambiance="nuit"] .bascule { color: var(--gris-nuit); }
body[data-ambiance="nuit"] .marque { color: var(--ivoire-nuit); }
body[data-ambiance="nuit"] .fenetre { opacity: 0 !important; pointer-events: none; }
body[data-ambiance="nuit"] .bulle { background: radial-gradient(circle at 35% 30%, #ffb98a, #c85f38 50%, #4a1e10 100%); box-shadow: 0 0 110px 18px rgba(214, 110, 66, .32); }
body[data-ambiance="nuit"] .halo { background: radial-gradient(circle, rgba(244, 168, 119, .10), transparent 62%); }
.etoiles { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--doux);
  background-image: radial-gradient(1px 1px at 12% 22%, #fff9 50%, transparent 51%), radial-gradient(1px 1px at 32% 72%, #fff7 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 58% 18%, #ffe8 50%, transparent 51%), radial-gradient(1px 1px at 82% 52%, #fff8 50%, transparent 51%),
  radial-gradient(1px 1px at 68% 88%, #fff6 50%, transparent 51%), radial-gradient(1.2px 1.2px at 22% 48%, #fff5 50%, transparent 51%),
  radial-gradient(1px 1px at 90% 12%, #fff7 50%, transparent 51%), radial-gradient(1px 1px at 44% 40%, #fff4 50%, transparent 51%),
  radial-gradient(1px 1px at 5% 65%, #fff6 50%, transparent 51%), radial-gradient(1.3px 1.3px at 74% 30%, #fff7 50%, transparent 51%); }
body[data-ambiance="nuit"] .etoiles { opacity: 1; }
.etape { max-width: 60vw; }
.etape h2 { font-size: clamp(42px, 4.6vw, 72px); line-height: 1.04; margin-bottom: 26px; color: var(--ivoire-nuit); font-weight: 450; font-variation-settings: "opsz" 72; }
.etape .surtitre { color: var(--ambre); }
.etape .chapo { color: var(--gris-nuit); font-weight: 300; }
.etape .bouton { margin-top: 30px; align-self: flex-start; background: linear-gradient(145deg, #f3aa78, #d4724a); color: #1a100c; box-shadow: 0 0 40px -6px rgba(243, 170, 120, .55); }
.courrier { max-width: 640px; margin: 4px 0 30px; padding: 22px 26px; border-radius: 22px; font-family: var(--titre); font-size: 19px; line-height: 1.7;
  background: linear-gradient(160deg, rgba(60, 38, 28, .75), rgba(30, 20, 15, .7)); border: 1px solid rgba(244, 168, 119, .28); color: #eddccb; }
.courrier small { display: block; font-family: var(--texte); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ambre); margin-bottom: 10px; }
.courrier b { font-weight: 500; border-radius: 7px; padding: 1px 6px; transition: background .5s var(--doux), color .5s var(--doux); }
.courrier b.masque { background: rgba(244, 168, 119, .22); color: #f7c09a; font-family: var(--texte); font-size: 15px; font-weight: 600; }
.extrait { margin-top: 30px; max-width: 560px; padding: 22px 26px; border-radius: 22px; border-left: 2px solid var(--ambre);
  background: linear-gradient(160deg, rgba(60, 38, 28, .75), rgba(30, 20, 15, .7)); display: grid; gap: 8px; }
.extrait strong { font-family: var(--titre); font-weight: 400; font-size: 30px; color: var(--ambre); }
.extrait span { color: #e8d6c6; font-size: 16px; line-height: 1.6; } .extrait small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-nuit); }
.dates { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.dates span { padding: 10px 16px; border-radius: 999px; font-size: 14px; border: 1px solid rgba(244, 168, 119, .35); }
.dates .ok { color: #cfe3b8; border-color: rgba(190, 220, 160, .45); } .dates .attente { color: var(--ambre); }

/* ---------- Fil de position et commandes ---------- */
.fil { position: fixed; right: 30px; top: 50%; transform: translateY(-50%); z-index: 25; display: grid; gap: 12px; }
.fil a { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--terre); display: block; transition: background .3s, transform .3s; }
.fil a.actif { background: var(--terre); transform: scale(1.3); }
body[data-ambiance="nuit"] .fil a { border-color: var(--ambre); } body[data-ambiance="nuit"] .fil a.actif { background: var(--ambre); }
.commandes { position: fixed; left: 56px; right: 56px; bottom: 30px; z-index: 25; display: flex; gap: 22px; font-size: 14px; opacity: 0; transition: opacity .5s; pointer-events: none; }
.commandes a { text-decoration: none; color: var(--gris); }
.commandes .precedent { margin-left: auto; }
body.dans-vue .commandes { opacity: 1; pointer-events: auto; }
body[data-ambiance="nuit"] .commandes a { color: var(--gris-nuit); }

/* ---------- Version légère : page classique, mêmes textes ---------- */
body.leger { overflow: auto; height: auto; }
body.leger .espace { position: fixed; }
body.leger .monde, body.leger .fil, body.leger .commandes, body.leger .etoiles { display: none; }
body.leger .vue { position: relative; opacity: 1; visibility: visible; transform: none; pointer-events: auto; min-height: auto; padding: 60px 56px; }
body.leger .carte { min-height: 100vh; }
body.leger .carte .accroche { opacity: 1 !important; transform: none !important; max-width: 760px; }
body.leger .page { background: none; backdrop-filter: none; overflow: visible; }
body.leger .fenetres { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; padding: 0 56px 40px; }
body.leger .fenetre { position: relative; transform: none !important; opacity: 1 !important; filter: none !important; width: auto; }
body.leger .etape { max-width: none; margin: 0 56px; border-radius: 36px; background: var(--nuit); padding: 60px; }
body.leger .etape + .etape { margin-top: 0; border-radius: 0; }
body.leger #voyage-1 { border-radius: 36px 36px 0 0; } body.leger #voyage-5 { border-radius: 0 0 36px 36px; margin-bottom: 60px; }

/* Accueil et aperçus du discours validé */
.sous-titre { margin-top: 18px; max-width: 44em; font-size: 16px; line-height: 1.6; color: var(--gris); font-weight: 600; }
.portes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.portes a { padding: 15px 16px; border: 1px solid var(--bord); border-radius: 16px; background: rgba(var(--papier-rvb), .82); text-decoration: none; }
.portes strong, .portes span { display: block; } .portes strong { color: var(--terre-fonce); font-size: 14px; } .portes span { margin-top: 6px; color: var(--gris); font-size: 11px; line-height: 1.45; }
.apercu { display: flex; align-items: center; gap: 14px; }
.apercu i { display: grid; place-items: center; min-width: 29px; height: 29px; padding: 0 7px; border-radius: 9px; background: rgba(var(--terre-rvb), .14); color: var(--terre); font-style: normal; font-weight: 600; }

/* ---------- Petits écrans ---------- */
@media (max-width: 820px) {
  .entete { padding: 20px 22px; } .menu { display: none; }
  .vue { padding: 96px 22px 90px; }
  .carte .accroche { max-width: none; }
  .portes { grid-template-columns: 1fr; }
  .fenetre { width: 290px; padding: 22px; }
  .blocs.trois, .blocs.deux, .jalons { grid-template-columns: 1fr; }
  .feuille { padding: 34px 26px; border-radius: 28px; }
  .etape { max-width: none; }
  .fil { right: 12px; } .commandes { left: 22px; right: 22px; }
  body.leger .fenetres { padding: 0 22px 30px; } body.leger .etape { margin: 0 22px; padding: 40px 26px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Discours validé le 29/09 : repères d'accueil, cartes par métier, quatre jalons */
.reperes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.reperes li { padding: 8px 14px; border-radius: 999px; font-size: 13px; color: var(--terre-fonce); background: rgba(var(--teinte-2-rvb), .8); border: 1px solid rgba(var(--terre-rvb), .18); }
.metiers { margin-top: 22px; }
.metiers p { font-size: 17px; }
.feuille .chapo { margin-bottom: 8px; }
.feuille.centre .chapo { margin: 0 auto 22px; }
.jalons.quatre { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px) { .jalons.quatre { grid-template-columns: 1fr; } .reperes li { font-size: 12px; } }

.intertitre { font-size: 24px; margin: 34px 0 14px; font-variation-settings: "opsz" 24; }

.commandes .accueil { font-weight: 600; color: var(--terre); }
body[data-ambiance="nuit"] .commandes .accueil { color: var(--ambre); }

/* Dans l'espace, dès qu'on a quitté l'accroche : seul le lien « Accueil » reste proposé */
body.au-loin .commandes { opacity: 1; pointer-events: auto; }
body.au-loin .commandes a:not(.accueil) { display: none; }
.commandes .accueil kbd { font: inherit; font-size: 11px; margin-left: 8px; padding: 1px 6px; border: 1px solid currentColor; border-radius: 5px; opacity: .6; }
@media (hover: none) { .commandes .accueil kbd { display: none; } }

/* Informations légales accessibles depuis toutes les vues */
.legal { position: fixed; right: 56px; bottom: 8px; z-index: 26; display: flex; gap: 16px; font-size: 11.5px; }
.legal a { color: var(--gris-clair); text-decoration: none; }
.legal a:hover, .legal a:focus-visible { color: var(--terre); text-decoration: underline; }
body[data-ambiance="nuit"] .legal a { color: var(--gris-nuit); opacity: .75; }
body.leger .legal { position: static; justify-content: center; padding: 24px 16px 40px; }
@media (max-width: 700px) { .legal { right: auto; left: 22px; bottom: 4px; gap: 12px; font-size: 11px; } }

/* ---------- Effet tunnel : le fond aide à sentir la profondeur (29/09) ----------
   Le point de fuite est celui de la caméra (perspective-origin 50 % 45 %). */
.espace::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; transition: opacity 1.4s var(--doux);
  background:
    radial-gradient(ellipse 58% 54% at 50% 45%, transparent 0%, transparent 38%, rgba(var(--terre-rvb), .07) 70%, rgba(var(--terre-fonce-rvb), .16) 100%),
    repeating-conic-gradient(from 7deg at 50% 45%, rgba(var(--terre-rvb), .075) 0deg .35deg, transparent .35deg 15deg);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 12%, #000 75%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 12%, #000 75%); }
body[data-tunnel="aucun"] .espace::before { display: none; }
body[data-ambiance="nuit"] .espace::before { z-index: 1;
  background:
    radial-gradient(ellipse 58% 54% at 50% 45%, transparent 0%, transparent 40%, rgba(244, 168, 119, .04) 72%, rgba(244, 168, 119, .09) 100%),
    repeating-conic-gradient(from 7deg at 50% 45%, rgba(244, 168, 119, .06) 0deg .35deg, transparent .35deg 15deg); }
.anneaux { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
body.leger .espace::before { display: none; }

/* ---------- Petits écarts mobile et version légère (29/09) ---------- */
.commandes a { white-space: nowrap; }
body.leger .entete { background: rgba(var(--creme-rvb), .94); box-shadow: 0 1px 0 rgba(var(--terre-rvb), .12); padding-top: 16px; padding-bottom: 16px; }
@media (max-width: 700px) {
  .commandes { left: 12px; right: 12px; bottom: 24px; gap: 16px; font-size: 13px; padding: 10px 16px; border-radius: 999px; align-items: center;
    background: rgba(var(--creme-rvb), .92); box-shadow: 0 8px 24px -12px rgba(var(--ombre-barre-rvb), .35); }
  body[data-ambiance="nuit"] .commandes { background: rgba(30, 20, 16, .9); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .6); }
  .commandes .accueil kbd { display: none; }
  body.dans-vue .entete { background: var(--creme); padding-top: 14px; padding-bottom: 14px; box-shadow: 0 1px 0 rgba(var(--terre-rvb), .12); }
  body.dans-vue[data-ambiance="nuit"] .entete { background: #140e0b; box-shadow: 0 1px 0 rgba(244, 168, 119, .12); }
  .page .feuille { margin-bottom: 110px; }
  body.leger .page .feuille { margin-bottom: 0; }
}

/* ---------- Retours du 01/10 : en-tête lisible, titres aérés, bouton d'écriture ---------- */
.entete { transition: background .4s var(--doux), box-shadow .4s var(--doux); }
body.dans-vue .entete { background: rgba(var(--creme-rvb), .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(var(--terre-rvb), .12); }
body.dans-vue[data-ambiance="nuit"] .entete { background: rgba(20, 14, 11, .9); box-shadow: 0 1px 0 rgba(244, 168, 119, .12); }
.feuille * + h2 { margin-top: 72px; }
.feuille .ecrire { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 34px 0 0; }
.feuille .ecrire-haut { margin: 0 0 44px; padding: 20px 24px; border-radius: 22px; background: rgba(var(--teinte-rvb), .75); border: 1px solid rgba(var(--terre-rvb), .18); }
.feuille .ecrire span { color: var(--gris); font-size: 15px; line-height: 1.55; flex: 1 1 260px; }
body.leger .entete { backdrop-filter: none; -webkit-backdrop-filter: none; }
.feuille .ecrire .bouton { white-space: nowrap; }
@media (max-width: 700px) { .feuille .ecrire .bouton { padding: 14px 20px; font-size: 14px; } .feuille .ecrire-haut { padding: 16px; } }
/* Téléphone : l'accueil tient dans l'écran, sous l'en-tête (01/10) */
@media (max-width: 700px) {
  body:not(.leger) .carte { justify-content: flex-start; padding-top: 84px; }
  body:not(.leger) .carte h1 { font-size: 44px; margin-bottom: 14px; }
  body:not(.leger) .carte .chapo { font-size: 16px; line-height: 1.55; }
  body:not(.leger) .carte .sous-titre { font-size: 14px; }
  body:not(.leger) .portes { gap: 8px; margin-top: 18px; }
  body:not(.leger) .portes a { padding: 11px 14px; }
  body:not(.leger) .portes span { display: none; }
}
/* Petits intertitres en gras sur leur propre ligne (01/10) */
.feuille p.etiquette { margin-top: 26px; margin-bottom: -10px; }
.feuille p.etiquette strong { color: var(--terre-fonce); }
/* Accueil plus bas dans la fenêtre (demande de Mickaël, 15/10/2026, v2 « pas assez » à 14 h 20). Bureau seulement :
   le bloc est posé en bas, ses trois briques finissent 70 px au-dessus des liens légaux (92 px du bas de l'écran ;
   v3 : 70 px, v4 : 20 px, jugé trop bas en ligne, remonté de 50 px le 15/10 : 70 px, image 010). Les deux paragraphes s'arrêtent avant la fenêtre « Je débute » du décor (qui commence vers
   50vw - 133px), sinon le texte descendu passe dessus.
   Mesuré par outils/mesure-accueil.mjs. Téléphone et version légère inchangés. */
@media (min-width: 821px) {
  body:not(.leger) .carte { padding-bottom: 92px; }
  body:not(.leger) .carte::before { content: ""; flex: 1 1 0; }
  body:not(.leger) .carte .chapo, body:not(.leger) .carte .sous-titre { max-width: max(440px, calc(50vw - 205px)); }
}