/* Lunarie, direction artistique « Le ciel de Paris » (deuxième version, 18/10/2026).
   Une seule règle tient tout le reste : LA SEULE COULEUR DU SITE EST CELLE DES CHOSES VRAIES.
   Le fond est la nuit (le dégradé d'un ciel photographié, jusqu'à la lueur orangée de la ville à l'horizon) ;
   le texte a la couleur du papier des lames ; le rouge, le bleu et le jaune n'existent que dans les lames
   de Nicolas Conver (Marseille, 1760) ; la Lune est une photographie de la NASA ; les étoiles ont la teinte
   que leur donne leur température. L'interface, elle, reste papier et encre.
   Typographie : Bodoni Moda (Owen Earl, OFL) pour les titres, la lettre des éphémérides imprimées en France
   à la fin du XVIIIe siècle, l'époque du jeu de Conver, avec son italique pour les phrases qui portent l'idée ;
   Spectral (Production Type, OFL) pour lire ; Basteleur (Keussel, Velvetyne, OFL) pour le seul logotype.
   Basteleur était la lettre des titres en version 1 : ses capitales onciales (« Ɛt », « Ꜳ ») donnaient un air de
   grimoire, à contre-sens d'un site qui se veut vérifiable. Comparé côte à côte le 18/10 : Bodoni Moda gagne. */

@font-face { font-family: "Basteleur"; src: url("/fonts/Basteleur-Moonlight.woff2") format("woff2"); font-weight: 300 400; font-display: swap; }
@font-face { font-family: "Basteleur"; src: url("/fonts/Basteleur-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; 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; }
@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; 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: "Bodoni Moda"; src: url("/fonts/bodoni-moda-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; 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; }
@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda-latin-ext-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; 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: "Bodoni Moda"; src: url("/fonts/bodoni-moda-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: "Spectral"; src: url("/fonts/spectral-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; 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; }
@font-face { font-family: "Spectral"; src: url("/fonts/spectral-latin-ext-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; 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: "Spectral"; src: url("/fonts/spectral-latin-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: "Spectral"; src: url("/fonts/spectral-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; 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; }
@font-face { font-family: "Spectral"; src: url("/fonts/spectral-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Spectral"; src: url("/fonts/spectral-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: "Spectral"; src: url("/fonts/spectral-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }

:root {
  --nuit: #03040b;          /* le haut du ciel, loin de la ville */
  --nuit-2: #070a1d;        /* la nuit plus près de l'horizon */
  --papier: #f2e8d0;        /* le papier des lames : titres */
  --texte: #d8d0bf;         /* lecture */
  --gris: #b3aa9b;          /* ce qui accompagne : 9 pour 1 sur la nuit, lisible par des yeux fatigués */
  --lien: rgba(242, 232, 208, 0.55); /* le soulignement d'un lien, qui doit se voir sans le chercher */
  --fil: rgba(242, 232, 208, 0.12);
  --fil-fort: rgba(242, 232, 208, 0.3);
  --vermillon: #d9452f;     /* le rouge des lames de Conver */
  --ocre: #e7b64f;          /* leur jaune */
  --azur: #35529f;          /* leur bleu */
  --pourpre: #b8559a;       /* la fleur de la lunaire */
  --lampe: rgba(231, 182, 79, 0.11);
  --display: "Bodoni Moda", "Bodoni 72", Didot, "Iowan Old Style", Georgia, serif;
  --brand: "Basteleur", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --text: "Spectral", "Iowan Old Style", Georgia, serif;
  --gut: clamp(16px, 4.2vw, 64px);
  /* Les cartouches (boutons, libellés) : capitales romaines espacées, comme les titres gravés des lames. */
  --cartouche: italic 400 1rem/1.3 var(--text);
  --cartouche-ls: 0;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* Un élément masqué l'est vraiment, même quand une règle lui donne un display (le champ du code de connexion s'affichait d'avance). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--nuit); }
/* Spectral en 400, pas en 300 : sur fond de nuit, le trait maigre s'efface pour des yeux de soixante-dix ans.
   Un cran plus grand sur téléphone (19 px). */
body {
  margin: 0; color: var(--texte); background: var(--nuit);
  font: 400 1.125rem/1.62 var(--text); font-feature-settings: "kern", "liga", "onum";
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 700px) { body { font-size: 1.1875rem; } }
/* Une lueur basse, comme celle d'une ville sous la nuit, puis le grain d'une photographie. Les vraies étoiles
   ne sont montrées que là où elles sont vraies : le ciel de l'accueil, les constellations des signes. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 60% at 50% 120%, rgba(22, 20, 51, 0.7) 0%, rgba(3, 4, 11, 0) 60%);
}
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 0; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .top, .foot, .menu { position: relative; z-index: 1; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.24em; text-decoration-color: var(--lien); transition: text-decoration-color 0.3s; }
a:hover { text-decoration-color: var(--papier); }
:focus-visible { outline: 2px solid var(--ocre); outline-offset: 3px; }
::selection { background: var(--ocre); color: #120e06; }
img, svg { max-width: 100%; }
i, em { font-style: italic; font-weight: 400; }
strong, b { font-weight: 500; color: var(--papier); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--papier); color: #000; padding: 8px 14px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- En-tête ---------- */
.top {
  position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  padding: 16px var(--gut); transition: background 0.4s, border-color 0.4s; border-bottom: 1px solid transparent;
  background: linear-gradient(rgba(3, 4, 11, 0.88), rgba(3, 4, 11, 0));
}
.top.solid { background: rgba(3, 4, 11, 0.95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--fil); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font: 400 2rem/1 var(--brand); letter-spacing: 0.03em; color: var(--papier); }
.brand .mark { width: 22px; height: 28px; transition: transform 0.8s var(--out); }
.brand:hover .mark { transform: rotate(-14deg); }
.nav { display: flex; justify-content: center; gap: clamp(16px, 2.2vw, 34px); font-size: 1rem; }
.nav a { position: relative; text-decoration: none; color: var(--texte); padding: 6px 0; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--papier); transform: scale(0); transition: transform 0.4s var(--out); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--papier); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scale(1); }
.top-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 20px; font-size: 0.98rem; }
.top-end a { color: var(--texte); text-decoration: none; }
.top-end a:hover { color: var(--papier); }
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 48px; background: none; border: 1px solid rgba(242, 232, 208, 0.55); color: var(--papier); font: 500 1.08rem/1 var(--text); padding: 0 16px; cursor: pointer; }
/* Trois traits, le signe que tout le monde reconnaît ; le mot reste écrit à côté. */
.menu-ic { width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.menu-btn[aria-expanded="true"] .menu-ic { display: none; }
.menu { position: fixed; inset: 0; z-index: 19; background: var(--nuit); padding: 92px var(--gut) 48px; overflow: auto; }
.menu nav { display: grid; border-top: 1px solid var(--fil); }
/* Chaque entrée dit ce qu'elle contient, sur une ligne large comme un doigt. */
.menu a { display: grid; gap: 3px; padding: 13px 0 14px; border-bottom: 1px solid var(--fil); text-decoration: none; color: var(--papier); }
.menu .m-t { font: 400 clamp(1.55rem, 6.4vw, 2.2rem)/1.1 var(--display); }
.menu .m-d { color: var(--gris); font-size: 1rem; line-height: 1.4; }
.menu a[aria-current="page"] .m-t { color: var(--ocre); }
/* Neuf entrées : resserrées sous 1400 px, et le menu repliable prend le relais sous 1200 px (jamais sur deux lignes). */
@media (max-width: 1400px) { .nav { gap: 15px; font-size: 0.95rem; } .top-end { gap: 14px; white-space: nowrap; } .top { gap: 20px; } }
@media (max-width: 1200px) { .nav { display: none; } .menu-btn { display: inline-flex; } .top-end .acct, .top-end .lang { display: none; } }

/* ---------- Boutons : le cartouche d'une lame ---------- */
/* Le nom d'une lame de Marseille est imprimé dans un cartouche à double filet : c'est la forme des boutons. */
.pod {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.8em; min-height: 54px; padding: 0 26px;
  border: 1px solid var(--fil-fort); color: var(--papier); background: transparent;
  text-decoration: none; cursor: pointer; font: 500 1.12rem/1.2 var(--text); letter-spacing: 0.005em; text-align: center;
  transition: background 0.35s var(--ease), color 0.35s, border-color 0.35s, transform 0.3s var(--out);
}
.pod:hover { background: rgba(242, 232, 208, 0.07); border-color: var(--papier); }
.pod.full { background: var(--papier); color: #17120a; border-color: var(--papier); }
.pod.full:hover { background: #fff7e2; }
.pod[disabled], .pod[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; }
/* Focus clavier : un contour extérieur franc, distinct du double filet décoratif. */
.pod:focus-visible, .menu-btn:focus-visible { outline: 2px solid var(--ocre); outline-offset: 4px; }
.textlink { color: var(--papier); font-style: normal; font-weight: 400; background: none; border: 0; padding: 0; font-family: var(--text); font-size: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--lien); text-underline-offset: 0.24em; }
/* Sur téléphone, le bouton d'un formulaire prend toute la largeur : impossible de le manquer. */
@media (max-width: 700px) { .form .pod { width: 100%; min-height: 58px; } }

/* ---------- Typographie ---------- */
.d1, .d2, .d3, h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.012em; margin: 0; text-wrap: balance; color: var(--papier); }
h1, .d1 { font-size: clamp(2.8rem, 7.4vw, 7.8rem); line-height: 0.95; }
h2, .d2 { font-size: clamp(2.1rem, 4.6vw, 4.3rem); line-height: 1; }
h3, .d3 { font-size: clamp(1.4rem, 2.2vw, 1.95rem); line-height: 1.12; }
.lede { font-size: clamp(1.18rem, 1.6vw, 1.38rem); line-height: 1.56; color: var(--texte); max-width: 33em; }
.lede i, .lede em { color: var(--papier); }
.meta { color: var(--gris); font-size: 1rem; }
.prose { max-width: 38em; }
.prose p { margin: 0 0 1.05em; }
.prose h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 1.6em 0 0.5em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.4em 0 0.4em; }
.num { font-family: var(--display); font-variant-numeric: lining-nums; }
.cart { font: var(--cartouche); letter-spacing: var(--cartouche-ls); color: var(--gris); }

/* ---------- Héros : le ciel de Paris, maintenant ---------- */
.hero { position: relative; height: clamp(640px, 100svh, 1060px); margin-top: -86px; overflow: hidden; container-type: size; background: var(--nuit); isolation: isolate; }
.sky-wrap {
  --sw: max(100cqw, calc(100cqh * 16 / 9)); --want: 0.66;
  position: absolute; bottom: 0; width: var(--sw); aspect-ratio: 16 / 9; z-index: 0;
  left: clamp(calc(100cqw - var(--sw)), calc(var(--want) * 100cqw - var(--tx, 0.5) * var(--sw)), 0px);
}
.sk { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sk-mw { fill: none; stroke: #b6c0ff; stroke-opacity: 0.075; stroke-width: 150; stroke-linecap: round; stroke-linejoin: round; }
.sk-far { fill: #090b19; }
.sk-near { fill: #020309; }
.sk-win rect { fill: #f0c06a; opacity: 0.5; }
.sk-lines path { fill: none; stroke: #e2e4ff; stroke-opacity: 0.42; stroke-width: 1.1; }
.sk-labels text { fill: var(--papier); font-family: var(--text); }
.sk-con { font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; fill-opacity: 0.62; }
.sk-star { fill-opacity: 0.9; font-style: italic; }
.sk-pl { font-weight: 400; }
.sk-pl-s { fill-opacity: 0.72; }
.sk-faint { fill: #c9cbe0; }
.sk-shade { fill: #03040b; fill-opacity: 0.88; }
/* Jour : les étoiles sont là mais le Soleil les efface. La lentille devient un hublot de nuit, le seul endroit
   où on les voit. Les fenêtres ne sont plus allumées, les toits lointains bleuissent. */
.sky-wrap[data-phase="jour"] .sk-shade { fill: #7ea3cc; fill-opacity: 0.94; }
.sky-wrap[data-phase="aube"] .sk-shade { fill: #33467f; fill-opacity: 0.9; }
.sky-wrap[data-phase="jour"] .sk-base { opacity: 0; transition: opacity 0.8s var(--ease); }
.sky-wrap[data-phase="jour"].lens-on .sk-base { opacity: 1; -webkit-mask-image: radial-gradient(circle var(--lr, 170px) at var(--lx, 50%) var(--ly, 50%), #000 94%, transparent 100%); mask-image: radial-gradient(circle var(--lr, 170px) at var(--lx, 50%) var(--ly, 50%), #000 94%, transparent 100%); }
.sky-wrap[data-phase="aube"] .sk-base { opacity: 0.6; }
.sky-wrap[data-phase="jour"] .sk-win, .sky-wrap[data-phase="aube"] .sk-win { display: none; }
.sky-wrap[data-phase="jour"] .sk-far { fill: #4e6487; }
.sky-wrap[data-phase="jour"] .sk-near { fill: #0b1020; }
.lens-hole { position: absolute; left: calc(var(--lx, 50%) - var(--lr, 170px)); top: calc(var(--ly, 50%) - var(--lr, 170px)); width: calc(var(--lr, 170px) * 2); aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, #04071a 0%, #060b24 66%, #0b1438 100%); transition: opacity 0.8s var(--ease); }
.sky-wrap[data-phase="jour"].lens-on .lens-hole { opacity: 1; }
.sk-labels text { transition: opacity 0.25s; }
@media (prefers-reduced-motion: no-preference) {
  .sk-stars .tw { animation: twinkle var(--d, 3s) ease-in-out var(--w, 0s) infinite alternate; }
  @keyframes twinkle { 0%, 60% { fill-opacity: 1; } 100% { fill-opacity: 0.45; } }
}
/* La lentille : la gousse translucide de la lunaire. Sous elle, et seulement sous elle, le ciel se nomme. */
.sk-top { opacity: 0; transition: opacity 0.8s var(--ease); }
.lens-on .sk-top { opacity: 1; -webkit-mask-image: radial-gradient(circle var(--lr, 170px) at var(--lx, 50%) var(--ly, 50%), #000 96%, transparent 100%); mask-image: radial-gradient(circle var(--lr, 170px) at var(--lx, 50%) var(--ly, 50%), #000 96%, transparent 100%); }
.lens { position: absolute; z-index: 3; left: calc(var(--lx, 50%) - var(--lr, 170px)); top: calc(var(--ly, 50%) - var(--lr, 170px)); width: calc(var(--lr, 170px) * 2); aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.8s var(--ease);
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 46%, rgba(190, 200, 255, 0.05) 78%, rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 0 0 1px rgba(242, 232, 208, 0.6); }
/* La cloison de la gousse : un filet vertical, comme sur le fruit de la lunaire. */
.lens::after { content: ""; position: absolute; left: 50%; top: 3%; bottom: 3%; width: 1px; background: linear-gradient(transparent, rgba(242, 232, 208, 0.3) 20%, rgba(242, 232, 208, 0.3) 80%, transparent); }
.lens-on .lens { opacity: 1; }
.hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(3, 4, 11, 0.7) 0%, rgba(3, 4, 11, 0.35) 34%, rgba(3, 4, 11, 0) 56%), linear-gradient(0deg, rgba(3, 4, 11, 1) 0%, rgba(2, 3, 9, 0.6) 14%, rgba(2, 3, 9, 0) 34%); }
/* De jour, le voile est bleu nuit : le ciel reste bleu, le titre reste lisible. */
.hero[data-phase="jour"] .hero-shade { background: linear-gradient(90deg, rgba(6, 18, 48, 0.68) 0%, rgba(6, 18, 48, 0.42) 36%, rgba(6, 18, 48, 0) 60%), linear-gradient(0deg, rgba(3, 4, 11, 1) 0%, rgba(3, 4, 11, 0.7) 18%, rgba(3, 4, 11, 0.3) 34%, rgba(3, 4, 11, 0) 46%); }
.hero[data-phase="jour"] .hero-note, .hero[data-phase="aube"] .hero-note { text-shadow: 0 1px 14px rgba(3, 4, 11, 0.95), 0 0 2px rgba(3, 4, 11, 0.85); }
.hero[data-phase="aube"] .hero-shade { background: linear-gradient(90deg, rgba(8, 14, 40, 0.66) 0%, rgba(8, 14, 40, 0.38) 36%, rgba(8, 14, 40, 0) 60%), linear-gradient(0deg, rgba(3, 4, 11, 1) 0%, rgba(3, 4, 11, 0.7) 18%, rgba(3, 4, 11, 0.3) 34%, rgba(3, 4, 11, 0) 46%); }
.hero-text { position: absolute; z-index: 2; left: var(--gut); bottom: clamp(30px, 6.5cqh, 76px); width: min(47rem, 56cqw); }
.hero-when { color: var(--texte); font-size: 1rem; margin: 0 0 22px; display: flex; gap: 12px; align-items: center; }
.hero-when .lune { width: 22px; height: 22px; flex: none; }
.hero h1, .hero h2#h-sky { margin: 0; font-size: clamp(2.4rem, 5vw, 4.6rem); }
.hero h1, .hero h2#h-sky, .hero .lede, .hero-act, .hero-when { width: fit-content; max-width: 100%; }
.nw { white-space: nowrap; }
.hero h1 .then, .hero h2#h-sky .then { display: block; font: 400 italic clamp(1.45rem, 2.5vw, 2.4rem)/1.2 var(--display); color: var(--texte); margin-top: 16px; letter-spacing: 0; }
.hero .lede { margin: 26px 0 32px; font-size: clamp(1.1rem, 1.35vw, 1.28rem); max-width: 31em; }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.hero-note { position: absolute; z-index: 2; right: var(--gut); bottom: clamp(30px, 6.5cqh, 76px); width: min(24rem, 28cqw); margin: 0; font-size: 0.98rem; line-height: 1.5; color: #c9c2b2; text-align: left; }
.hero-note a { color: var(--texte); }
.hero-hint { display: block; margin-bottom: 8px; color: var(--texte); font-style: italic; }
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .hero { height: auto; margin-top: -78px; container-type: inline-size; }
  .hero-sky { position: relative; height: 48svh; min-height: 330px; overflow: hidden; container-type: size; }
  .hero h1, .hero h2#h-sky { font-size: clamp(2.1rem, 8vw, 3rem); }
  .sky-wrap { --want: 0.5; }
  .hero-shade { background: linear-gradient(0deg, rgba(3, 4, 11, 1) 0%, rgba(3, 4, 11, 0) 22%); }
  .hero-text { position: relative; left: auto; bottom: auto; width: auto; padding: 4px var(--gut) 0; margin-top: -28px; }
  .hero .lede { margin: 18px 0 22px; }
  .hero-note { position: relative; right: auto; bottom: auto; width: auto; padding: 30px var(--gut) 8px; text-align: left; }
}
@media (min-width: 901px) and (min-aspect-ratio: 4/5) { .hero-sky { position: absolute; inset: 0; } }

/* ---------- Sections ---------- */
.sec { position: relative; padding: clamp(64px, 7.5vw, 116px) var(--gut); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px 7vw; align-items: end; margin-bottom: clamp(36px, 6vw, 84px); }
.sec-head .lede { margin: 0; }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; } }
/* Trois autres façons d'ouvrir une section, pour que deux sections voisines ne se ressemblent jamais. */
.table-head { position: relative; max-width: 46rem; margin: 0 auto clamp(30px, 4vw, 56px); text-align: center; }
.table-head .lede { margin: 22px auto 0; }
.head-wide { display: grid; gap: 26px; margin-bottom: clamp(36px, 5vw, 70px); }
.head-wide h2 { font-size: clamp(2.4rem, 6vw, 5.6rem); max-width: 15ch; }
.head-wide .lede { justify-self: end; max-width: 30em; margin: 0; }
.daily-flip > :first-child { order: 2; }
@media (max-width: 900px) { .daily-flip > :first-child { order: 0; } .head-wide .lede { justify-self: start; } .table-head { text-align: left; } .table-head .lede { margin-left: 0; } }
.cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px 7vw; align-items: start; }
.cab-text .lede { margin-top: 24px; }
@media (max-width: 900px) { .cab { grid-template-columns: 1fr; } }
.moon-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 30px 6vw; align-items: center; margin-bottom: clamp(36px, 5vw, 64px); }
.moon-head .lede { margin: 22px 0 14px; }
.moon-today { position: relative; }
.moon-xl { width: clamp(160px, 22vw, 300px) !important; height: clamp(160px, 22vw, 300px) !important; }
@media (max-width: 700px) { .moon-head { grid-template-columns: 1fr; justify-items: start; } }

/* Le jeu de Conver : les vingt-deux lames passent, comme on étale un jeu sur la table. */
.parade { padding: clamp(80px, 10vw, 150px) 0 clamp(24px, 3vw, 40px); overflow: hidden; }
.parade-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px 6vw; align-items: end; padding: 0 var(--gut); margin-bottom: clamp(40px, 6vw, 80px); }
.parade-head .lede { margin: 0; }
.parade-row { display: flex; gap: clamp(14px, 1.6vw, 26px); width: max-content; padding: 30px var(--gut) 40px; }
.parade-row a { flex: none; width: clamp(150px, 15vw, 230px); display: block; transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)); transition: transform 0.6s var(--out); }
.parade-row a:hover, .parade-row a:focus-visible { transform: rotate(0deg) translateY(-14px) scale(1.03); z-index: 2; }
.parade-scroll { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.parade-scroll::-webkit-scrollbar { display: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 760px) {
    .parade-scroll { overflow: visible; }
    .parade-row { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes drift { from { transform: translateX(6vw); } to { transform: translateX(calc(-100% + 94vw)); } }
  }
}
.parade-foot { padding: 0 var(--gut); display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: baseline; justify-content: space-between; }
@media (max-width: 900px) { .parade-head { grid-template-columns: 1fr; } }

/* La lame de tarot : un vrai carton, coins arrondis, papier qui accroche la lumière. */
.lame { --w: 100%; position: relative; width: var(--w); aspect-ratio: 300 / 580; overflow: hidden; background: #e9dcbc; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }
.lame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.16) 46%, rgba(255, 255, 255, 0) 60%); background-size: 260% 100%; background-position: var(--sheen, 100%) 0; mix-blend-mode: soft-light; transition: background-position 0.9s var(--out); }
a:hover > .lame::after, .lame:hover::after { --sheen: 0%; }
.lame.rev img { transform: rotate(180deg); }
.lame-big { max-width: 320px; }
/* Le dos : bleu de nuit, semis d'étoiles à quatre branches, la gousse de lunaire au centre (dessin maison). */
.card-back { display: block; width: 100%; aspect-ratio: 300 / 580; background: #ece2c7 url("/lames/dos.svg") center / cover no-repeat; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }

/* Le tirage : la table de la voyante, éclairée par une lampe. */
.table { overflow: hidden; }
.table { padding-bottom: clamp(40px, 5vw, 80px); }
.table::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1500px, 140vw); height: 100%; transform: translateX(-50%); background: radial-gradient(50% 55% at 50% 64%, var(--lampe), rgba(231, 182, 79, 0) 70%); pointer-events: none; }
.fan { --step: 2.3deg; position: relative; height: clamp(260px, 25vw, 330px); margin: 0 calc(-1 * var(--gut)); }
.fan-card { --cw: clamp(72px, 7.6vw, 112px); position: absolute; left: 50%; top: 24px; width: var(--cw); margin-left: calc(var(--cw) / -2); transform: rotate(calc(var(--i, 0) * var(--step))); transform-origin: 50% 430%; border: 0; padding: 0; background: none; cursor: pointer; transition: transform 0.6s var(--out), opacity 0.5s, translate 0.4s var(--out); }
.fan-card:hover, .fan-card:focus-visible { translate: 0 -18px; z-index: 5; }
.fan-card .card-back { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), -3px 0 10px rgba(0, 0, 0, 0.35); }
.fan-picked { position: relative; display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 32px 6vw; align-items: start; margin-top: 40px; }
.fan-picked[hidden] { display: none; }
/* La carte tirée défile sous l'en-tête fixe : on garde la place de l'en-tête au-dessus d'elle. */
.fan-picked, .draw-out { scroll-margin-top: 96px; }
.fan-any { position: relative; display: flex; justify-content: center; margin: 6px 0 0; }
.table-foot { margin-top: 18px; display: flex; justify-content: center; text-align: center; }
.table-foot .meta { font-size: 1.06rem; color: var(--texte); }
@media (max-width: 760px) { .fan { --step: 1.45deg; height: 200px; } .fan-card { --cw: 62px; } .fan-picked { grid-template-columns: 1fr; } .fan-picked .flip { max-width: 240px; } }

.flip { perspective: 1600px; }
.flip-in { position: relative; transform-style: preserve-3d; transition: transform 1.2s var(--out); }
.flip.on .flip-in { transform: rotateY(180deg); }
.flip .side { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .side.face { position: absolute; inset: 0; transform: rotateY(180deg); }

/* Tirage : trois dos de lames posés en éventail dans l'en-tête. */
.head-cards { position: relative; height: clamp(190px, 18vw, 260px); margin-top: 34px; }
.head-cards .card-back { position: absolute; top: 0; width: clamp(96px, 9vw, 132px); transform-origin: 50% 110%; }
.head-cards .card-back:nth-child(1) { left: 0; transform: rotate(-10deg); }
.head-cards .card-back:nth-child(2) { left: clamp(70px, 6.6vw, 98px); transform: rotate(-1deg) translateY(-8px); }
.head-cards .card-back:nth-child(3) { left: clamp(140px, 13.2vw, 196px); transform: rotate(8deg); }
/* Thème : le formulaire à gauche, la roue du ciel de maintenant à droite. */
.natal-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 6vw; align-items: start; }
.natal-example { margin: 0; }
.natal-example figcaption { margin-top: 14px; max-width: 30em; }
@media (max-width: 900px) { .natal-form { grid-template-columns: 1fr; } }

/* Le thème, à l'accueil : la roue d'un vrai ciel de naissance, et le formulaire. */
.natal-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 6vw; align-items: start; }
.natal-demo { margin: 0; }
.natal-demo .wheel-wrap { width: 100%; }
.natal-demo figcaption { margin-top: 10px; }
.computed .natal-demo { opacity: 0.25; transition: opacity 0.8s var(--ease); }
.natal-q { margin: 30px 0 26px; }
@media (max-width: 900px) { .natal-sec { grid-template-columns: 1fr; } .natal-demo { max-width: 520px; } }

/* Ciel personnel : le prix se lit dans une phrase, comme dans un almanach. */
.almanach { margin: 34px 0 26px; font: 400 italic clamp(1.6rem, 2.6vw, 2.3rem)/1.25 var(--display); color: var(--papier); }
.almanach span { display: block; margin-top: 10px; font: 400 1rem/1.5 var(--text); color: var(--gris); }

/* La bande du zodiaque : quatre planches d'atlas, l'est à gauche comme dans le ciel. */
.zband { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--fil); border-bottom: 1px solid var(--fil); }
.zplate { position: relative; min-width: 0; }
.zp1, .zp3 { border-right: 1px solid var(--fil); }
.zp3, .zp2 { border-top: 1px solid var(--fil); }
.zb { display: block; width: 100%; height: auto; }
.zb circle { fill: #f4f1ff; }
.zb-line { fill: none; stroke: rgba(226, 228, 255, 0.36); stroke-width: 1.2; }
.zb-ecl { stroke: var(--ocre); stroke-opacity: 0.45; stroke-dasharray: 6 9; }
.zb-bound { stroke: var(--ocre); stroke-opacity: 0.55; }
.zb-con { fill: #c9d2ff; fill-opacity: 0.68; font: 500 15px var(--text); letter-spacing: 0.22em; text-transform: uppercase; }
.zb-mark circle { fill: var(--ocre); }
.zb-moon circle { fill: #e9ecff; }
.zb-mark text { fill: var(--papier); font: 400 17px var(--text); }
.zsigns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zsigns a { display: grid; gap: 2px; padding: 12px 14px 16px; text-decoration: none; border-right: 1px solid rgba(231, 182, 79, 0.22); transition: background 0.3s; }
.zsigns a:last-child { border-right: 0; }
.zsigns a:hover { background: rgba(231, 182, 79, 0.07); }
.zsigns .zn { font: 400 1.35rem/1.1 var(--display); color: var(--papier); }
.zsigns .zd { color: var(--gris); font-size: 0.95rem; }
.zband-note { margin-top: 14px; }
@media (max-width: 760px) { .zband { grid-template-columns: 1fr; } .zp1, .zp3 { border-right: 0; } .zplate + .zplate { border-top: 1px solid var(--fil); } .zsigns a { padding: 10px 8px 12px; } .zsigns .zn { font-size: 1.1rem; } }

/* Le thème : une fiche d'éphémérides, des chiffres en majesté. */
.natal-quick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 7vw; }
@media (max-width: 900px) { .natal-quick { grid-template-columns: 1fr; } }
/* Les formulaires : une question par ligne, son nom écrit au-dessus, une vraie case encadrée (un simple trait sous
   le texte ne se lit pas comme un endroit où écrire), et un contour ocre bien visible sur la case où l'on écrit. */
.form { display: grid; gap: 26px; max-width: 34em; }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field label, .field legend { color: var(--papier); font-size: 1.08rem; font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; min-height: 56px; background: rgba(242, 232, 208, 0.05); color: var(--papier); border: 1px solid rgba(242, 232, 208, 0.5); padding: 12px 14px; font: 400 1.25rem/1.3 var(--text); border-radius: 0; transition: border-color 0.3s; }
.field input::placeholder { color: rgba(179, 170, 155, 0.85); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ocre); outline-offset: 1px; border-color: var(--papier); }
.field textarea { min-height: 140px; }
.field .hint { margin: 0; color: var(--gris); font-size: 1rem; line-height: 1.45; }
.field select option, .form select option { background: var(--nuit); }
/* Date et heure en cases : jour, mois, année côte à côte, chacune titrée. */
.dfield { border: 0; padding: 0; margin: 0; }
.dfield legend { padding: 0; margin-bottom: 6px; }
.dfield .opt { color: var(--gris); font-weight: 400; }
/* Largeurs calculées pour tenir sur une ligne dès 320 px : 76 + 12 + 76 + 12 + 108 = 284 px pour 288 disponibles. */
.dparts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.dpart { display: grid; gap: 4px; }
.dfield .dpart label { color: var(--texte); font-size: 1rem; font-weight: 400; }
.dfield .dpart input { width: 3.8em; text-align: center; font-variant-numeric: lining-nums tabular-nums; }
.dfield .dpart-a input { width: 5.4em; }
/* Deux menus et un bouton sur une ligne à l'ordinateur ; l'un sous l'autre sur téléphone. */
.form-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; max-width: 50em; }
@media (max-width: 700px) { .form-3 { grid-template-columns: minmax(0, 1fr); } }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 420px) { .row2 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 12px; align-items: baseline; color: var(--texte); font-size: 1rem; }
.check input { accent-color: var(--papier); }
/* La case à cocher native fait 13 px : on la porte à 22, posée sur la première ligne du texte. */
.check input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 0; align-self: flex-start; margin-top: 2px; cursor: pointer; }
.suggest { position: relative; }
/* La liste des villes : de grandes lignes à toucher, la région sous le nom. */
.suggest ul { position: absolute; z-index: 6; left: 0; right: 0; top: 100%; margin: 0; padding: 0; list-style: none; background: var(--nuit-2); border: 1px solid var(--papier); max-height: min(60vh, 420px); overflow: auto; }
.suggest li { padding: 12px 14px; min-height: 52px; cursor: pointer; font-size: 1.12rem; color: var(--papier); border-bottom: 1px solid var(--fil); }
.suggest li[aria-selected="true"], .suggest li:hover { background: rgba(231, 182, 79, 0.14); }
.suggest li small { display: block; color: var(--gris); font-size: 0.95rem; }
.big3 { display: grid; gap: 0; border-top: 1px solid var(--fil-fort); }
.big3 .b { display: grid; grid-template-columns: 7.4em 1fr; gap: 4px 22px; align-items: start; border-bottom: 1px solid var(--fil); padding: 26px 0 24px; }
.big3 .b .k { padding-top: 0.9em; }
.big3 .b .k { font: var(--cartouche); letter-spacing: var(--cartouche-ls); color: var(--gris); }
.big3 .b .v { font: 400 clamp(2rem, 3.8vw, 3.4rem)/1 var(--display); color: var(--papier); }
.big3 .b .v small { font: 400 italic 1.05rem var(--text); color: var(--texte); margin-left: 10px; }
.big3 .b p { grid-column: 2; margin: 6px 0 0; color: var(--texte); font-size: 1.02rem; }
.big3 .ex .v { color: rgba(242, 232, 208, 0.62); }
.big3-ex { margin: 0 0 4px; color: var(--gris); font-style: italic; }
/* Une erreur se voit : un filet rouge à gauche, un fond teinté, le texte en clair. */
.err { color: #ffb4a6; font-size: 1.06rem; border-left: 3px solid #ff8f7a; background: rgba(255, 143, 122, 0.08); padding: 10px 14px; margin: 0; }
.err + .form { margin-top: 22px; }
/* Plusieurs villes du même nom : on les montre, chacune en grande ligne à toucher. */
.lieux { border-left: 3px solid var(--ocre); background: rgba(231, 182, 79, 0.08); padding: 12px 14px; }
.lieux p { margin: 0 0 10px; color: var(--papier); font-size: 1.06rem; }
.lieux ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lieux a { display: grid; gap: 2px; min-height: 52px; padding: 10px 14px; border: 1px solid rgba(242, 232, 208, 0.45); text-decoration: none; color: var(--papier); font-size: 1.15rem; }
.lieux a small { color: var(--gris); font-size: 1rem; }
.lieux a:hover, .lieux a:focus-visible { border-color: var(--ocre); }
/* « C'est fait » : même place, filet ocre (le script pose .err ou .msg-ok selon la réponse). Même cadre pour
   l'avis « pas encore ouvert », posé avant le premier champ. */
.msg-ok, .avis { color: var(--papier); font-size: 1.06rem; border-left: 3px solid var(--ocre); background: rgba(231, 182, 79, 0.08); padding: 10px 14px; margin: 0; }

/* La charte : les phrases du métier s'éteignent comme des étoiles à l'aube ; la nôtre reste allumée. */
.truths { display: grid; border-top: 1px solid var(--fil); }
.truth { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px 6vw; padding: clamp(26px, 3.4vw, 44px) 0; border-bottom: 1px solid var(--fil); align-items: baseline; }
.truth > p { margin: 0; }
.truth .them { font: 400 italic clamp(1.5rem, 3vw, 2.7rem)/1.08 var(--display); color: var(--papier); text-wrap: balance; }
.truth .them s { text-decoration: none; }
.truth .us { color: var(--texte); max-width: 30em; }
.truth .us strong { color: var(--papier); font-weight: 400; font-style: italic; }
.truth .them { opacity: 0.6; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .truth .them { opacity: 1; animation: extinguish linear both; animation-timeline: view(); animation-range: entry 70% cover 55%; }
    @keyframes extinguish { from { opacity: 1; } to { opacity: 0.55; } }
  }
}
/* Sur la page de la charte, la colonne de gauche porte NOS engagements : ils restent allumés et droits. */
.pledges .truth .them { opacity: 1; animation: none; filter: none; font-style: normal; }
@media (max-width: 760px) { .truth { grid-template-columns: 1fr; } }

/* Ciel personnel : la vraie journée d'agenda, l'événement du matin en pourpre de lunaire. */
.price { font: 400 clamp(3.4rem, 6.6vw, 6rem)/1 var(--display); color: var(--papier); }
.price small { font: 400 1.1rem var(--text); color: var(--texte); }

/* La charte : de petites annonces de voyance par téléphone, découpées dans un magazine télé, épinglées de travers. */
.annonces .truth { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); align-items: center; }
/* Dit en toutes lettres que l'annonce n'est pas la nôtre : à la lire vite, on la prendrait pour une offre. */
.truth-k { grid-column: 1 / -1; color: var(--papier); font-size: 1.05rem; }
.annonce { justify-self: start; width: min(100%, 380px); margin: 0; padding: 12px 16px 12px; background-color: #e7e0cc; color: #141210; border: 2px solid #141210; transform: rotate(var(--r, 0deg)); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.annonce p { margin: 0; }
.an-k { font: 600 0.7rem/1 var(--text); letter-spacing: 0.2em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid #141210; }
.an-t { margin: 8px 0 4px !important; font: 500 clamp(1.3rem, 2vw, 1.65rem)/1.05 var(--display); letter-spacing: -0.01em; }
.an-s { font: italic 400 0.92rem/1.3 var(--text); color: #3a342b; }
.an-n { margin-top: 8px !important; font: 500 1.2rem/1 var(--display); letter-spacing: 0.06em; }
.annonces .us { color: var(--texte); }
@media (max-width: 760px) { .annonces .truth { grid-template-columns: 1fr; } }

/* Ciel personnel : la feuille d'éphéméride, à détacher chaque matin (deux feuilles dessous, en filets). */
.ephem { position: relative; width: min(100%, 420px); justify-self: center; margin: 8px 8px 8px 0; }
.ephem::before, .ephem::after { content: ""; position: absolute; inset: 0; background: #e3dac3; border: 1px solid rgba(20, 18, 16, 0.3); }
.ephem::before { transform: translate(7px, 7px); }
.ephem::after { transform: translate(3.5px, 3.5px); }
.ephem-sheet { position: relative; z-index: 1; background: #f1e9d4; color: #17120b; padding: 30px 28px 20px; }
.ephem-sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: radial-gradient(circle, #03040b 2.6px, transparent 3.2px) 10px 50% / 20px 16px repeat-x; }
.ephem-sheet p { margin: 0; }
.ephem-top { display: flex; justify-content: space-between; gap: 12px; font: italic 400 1rem/1.2 var(--text); color: #4a4033; }
.ephem-day { font: 400 clamp(5.5rem, 11vw, 8.5rem)/0.92 var(--display); text-align: center; margin: 4px 0 12px !important; letter-spacing: -0.02em; }
.ephem-sky { padding: 8px 0; border-top: 1px solid rgba(23, 18, 11, 0.3); border-bottom: 1px solid rgba(23, 18, 11, 0.3); text-align: center; font-size: 0.95rem; line-height: 1.55; font-variant-numeric: tabular-nums; }
.ephem-fact { margin-top: 14px !important; font: 500 0.95rem/1.4 var(--text); color: #6b2a24; }
.ephem-title { margin: 4px 0 8px !important; font: 400 italic clamp(1.3rem, 2vw, 1.55rem)/1.15 var(--display); }
.ephem-text { font-size: 1rem; line-height: 1.55; color: #2a231a; }
.ephem-foot { margin-top: 14px !important; padding-top: 8px; border-top: 1px dashed rgba(23, 18, 11, 0.35); font: italic 400 0.92rem/1.4 var(--text); color: #5a4e3c; }

/* Le jeu : un cartel de musée sous la frise. */
.parade-foot { display: grid; grid-template-columns: minmax(0, 46em) auto; justify-content: space-between; align-items: end; gap: 18px 40px; }
.cartel p { margin: 0 0 8px; }
.cartel p:first-child { font: italic 400 1.05rem/1.55 var(--text); color: var(--texte); }
@media (max-width: 900px) { .parade-foot { grid-template-columns: 1fr; } }

/* Une ligne d'éphéméride : la cause calculée, avant le texte. */
.fact { margin: 18px 0 0; font: 500 0.98rem/1.5 var(--text); font-variant-numeric: tabular-nums; color: var(--ocre); }

/* Le ciel : la légende du Soleil et la graduation de chercheur dans la lentille. */
.sk-suntag { fill: #fff6df; fill-opacity: 0.92; font-family: var(--text); font-style: italic; }
.sk-grid path { fill: none; stroke: var(--ocre); stroke-opacity: 0.4; stroke-width: 0.9; stroke-dasharray: 3 5; }
.sk-grid text { fill: var(--ocre); fill-opacity: 0.75; font-family: var(--text); }

/* Le cabinet : la carte des prix est un carton imprimé posé sur la table : papier, encre, points de conduite,
   chiffres alignés. Le nombre de voyantes disponibles vient en tête, à la taille des prix. */
.tarifs { --px: clamp(26px, 3.2vw, 44px); --pb: clamp(26px, 2.8vw, 34px); position: relative; width: min(100%, 33rem); background: var(--papier) repeating-linear-gradient(90deg, transparent 0 43px, rgba(23, 18, 11, 0.05) 43px 44px); color: #17120b; padding: clamp(34px, 3.6vw, 48px) var(--px) var(--pb); }
.cab .tarifs { justify-self: end; }
.tarifs::before { content: ""; position: absolute; inset: 9px; border: 3px double rgba(23, 18, 11, 0.78); pointer-events: none; }
.tarifs::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.32; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.tarifs p { margin: 0; }
.tarifs-h { margin: 0 0 4px !important; padding-bottom: 12px; font: italic 400 1rem/1.3 var(--text); color: #4a4033; border-bottom: 1px solid rgba(23, 18, 11, 0.4); }
.tarif { padding: 16px 0 15px; border-bottom: 1px solid rgba(23, 18, 11, 0.16); }
.tarif-l { display: flex; align-items: baseline; gap: 10px; }
.tarif .tarif-n { font: 400 clamp(1.25rem, 1.7vw, 1.45rem)/1.2 var(--display); color: inherit; }
a.tarif-n { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: rgba(23, 18, 11, 0.3); transition: text-decoration-color 0.3s var(--out); }
a.tarif-n:hover, a.tarif-n:focus-visible { text-decoration-color: #b5302a; }
.tarif-pop { font: italic 400 0.92rem/1 var(--text); color: #a42a20; white-space: nowrap; }
.tarif-pop sup, .tarifs-foot sup, .offre-n sup, .offres-note sup { font-size: 0.7em; }
.tarif .lead { flex: 1; min-width: 20px; height: 0.6em; background: radial-gradient(circle, currentColor 0.8px, transparent 1.3px) 0 100% / 7px 4px repeat-x; opacity: 0.5; }
.tarif .price { font: 400 clamp(2rem, 2.8vw, 2.5rem)/1 var(--display); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; color: #17120b; }
.tarifs .tarif-x { margin-top: 4px !important; text-align: right; text-wrap: balance; font: italic 400 1rem/1.3 var(--text); color: #a42a20; }
.tarifs .tarif-i { margin-top: 6px !important; max-width: 34em; font: 400 0.98rem/1.45 var(--text); color: #4a4033; }
.tarifs.shut .tarif { color: #4a4033; }
.tarifs-foot { margin-top: 14px !important; font-size: 0.95rem; color: #4a4033; }
.tarifs-foot a { color: #17120b; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.cartouche { position: relative; z-index: 1; margin: 26px calc(12px - var(--px)) calc(12px - var(--pb)) !important; padding: 13px 16px 12px; border-top: 3px double rgba(23, 18, 11, 0.78); background: #eed49c; font: 400 0.95rem/1.1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; text-align: center; }
/* Critique 4 : sur téléphone, plus de points de conduite (un nom sur deux lignes les réduisait à « … »). */
@media (max-width: 480px) {
  .tarif-l { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; }
  .tarif .lead { display: none; }
  .tarif .tarif-n { grid-area: 1 / 1; }
  .tarif .price { grid-area: 1 / 2; }
  .tarif-pop { grid-area: 2 / 1 / 3 / 3; margin-top: 4px; }
  .tarifs .tarif-x { text-align: left; }
}
/* Le tampon d'encre, posé à cheval sur le bord de la carte tant que le cabinet est fermé. */
.tampon { position: absolute; z-index: 2; top: -15px; right: clamp(16px, 3vw, 34px); padding: 8px 13px 7px; border: 3px double currentColor; background: #f2e8d0; color: #a42a20; font: 400 0.82rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(-6deg); }

/* La Lune : la photographie de la sonde LRO, ombrée à la phase du jour. */
.lune { position: relative; display: inline-block; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: #0b0c14; vertical-align: middle; flex: none; }
.lune img, .lune svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lune svg path { fill: #04050c; fill-opacity: 0.9; }
.moonstrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(58px, 1fr); overflow-x: auto; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); scrollbar-width: thin; scrollbar-color: var(--fil-fort) transparent; padding-bottom: 12px; border-top: 1px solid var(--fil); }
.mday { display: grid; justify-items: center; gap: 10px; padding: 20px 2px 18px; border-right: 1px solid var(--fil); text-decoration: none; transition: background 0.3s; }
.mday:hover { background: rgba(242, 232, 208, 0.04); }
.mday .dn { color: var(--gris); font-size: 0.9rem; }
.mday .dd { font: 400 1.1rem var(--display); color: var(--papier); }
.mday .lune { width: 40px; height: 40px; }
.mday.today { background: rgba(242, 232, 208, 0.06); box-shadow: inset 0 2px 0 var(--papier); }
.mday.key .dd { color: var(--ocre); }
.mday .gs { width: 15px; height: 15px; color: var(--gris); }
.moon-big { position: relative; }
.moon-big .lune { width: clamp(200px, 24vw, 320px) !important; height: clamp(200px, 24vw, 320px) !important; }
.head-con { margin: 0; }
.head-con .con { width: 100%; height: auto; max-width: 460px; }
.head-con .con path { fill: none; stroke: rgba(226, 228, 255, 0.45); stroke-width: 1; }
.head-con .con circle { fill: #f4f1ff; }
.head-con figcaption { margin-top: 8px; }

/* Listes de liens éditoriales (signes, arcanes, mois) */
.zod { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); border-top: 1px solid var(--fil); border-left: 1px solid var(--fil); }
.zod a { display: grid; gap: 4px; padding: 22px 20px; border-right: 1px solid var(--fil); border-bottom: 1px solid var(--fil); text-decoration: none; transition: background 0.3s; }
.zod a:hover { background: rgba(242, 232, 208, 0.045); }
.zod .zn { font: 400 1.5rem/1.1 var(--display); color: var(--papier); }
.zod .zd { color: var(--gris); font-size: 0.9rem; }
.zod svg.g { width: 22px; height: 22px; color: var(--texte); }
.g { width: 1em; height: 1em; vertical-align: -0.12em; }

/* Pages de contenu */
.page-head { padding: clamp(40px, 6vw, 96px) var(--gut) clamp(24px, 3.5vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 6vw; align-items: end; }
.page-head.has-side { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.page-head .crumbs { grid-column: 1 / -1; color: var(--gris); font-size: 1rem; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.page-head .crumbs a { color: var(--texte); }
.page-head h1.h1-long { font-size: clamp(2.3rem, 4.8vw, 4.7rem); line-height: 1.02; }
.page-head .lede { margin: 20px 0 0; max-width: 40em; }
@media (max-width: 900px) { .page-head.has-side { grid-template-columns: 1fr; } }
.body-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 36px 6vw; padding: 0 var(--gut) clamp(64px, 9vw, 140px); }
.body-grid aside { position: relative; }
.body-grid aside .sticky { position: sticky; top: 96px; display: grid; gap: 20px; }
@media (max-width: 900px) { .body-grid { grid-template-columns: 1fr; } .body-grid.texte-d-abord > .prose { order: -1; } }
.facts { display: grid; border-top: 1px solid var(--fil); margin: 0; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--fil); font-size: 1rem; }
.facts dt, .facts .k { color: var(--gris); }
.facts dd { margin: 0; text-align: right; color: var(--papier); }
.kw { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kw li { border: 1px solid var(--fil-fort); padding: 6px 14px; font: 400 0.98rem/1.3 var(--text); color: var(--texte); }
.faq { border-top: 1px solid var(--fil); margin-top: 1.5em; }
.faq details { border-bottom: 1px solid var(--fil); padding: 18px 0; }
.faq summary { cursor: pointer; font-size: 1.16rem; color: var(--papier); list-style: none; display: flex; justify-content: space-between; gap: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); color: var(--gris); transition: transform 0.4s var(--out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--texte); margin: 12px 0 0; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4vw; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 3vw; }
@media (max-width: 900px) { .cols3 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .cols2 { grid-template-columns: 1fr; } }
.pair { display: grid; gap: 4px; }
.pair h3 { font-size: 1.3rem; }
.note { position: relative; padding: 2px 0 2px 26px; color: var(--papier); font-style: italic; }
.note::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 12px; height: 12px; background: var(--ocre); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.more { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.tag { color: var(--texte); }
.review { border-top: 1px solid var(--fil); padding: 14px 0; }

/* Tableaux de faits (mesures, éphémérides) : filets fins, chiffres alignés, légende au-dessus. */
.tbl { width: 100%; border-collapse: collapse; margin: 18px 0 30px; font-size: 0.95rem; }
.tbl caption { caption-side: top; text-align: left; color: var(--gris); font-style: italic; padding-bottom: 10px; }
.tbl th, .tbl td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--fil); font-weight: 400; }
.tbl thead th { color: var(--gris); font: var(--cartouche); border-bottom-color: var(--fil-fort); }
.tbl tbody th { color: var(--papier); font-weight: 400; }
.tbl .num { font-family: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.prose .tbl { display: block; overflow-x: auto; }

/* Tarifs : le cabinet formule par formule, la carte imprimée à côté du registre de ce qui a été rendu. */
.tarifs-duo { margin-top: clamp(72px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, 33rem) minmax(0, 1fr); gap: clamp(36px, 4vw, 56px) clamp(32px, 5vw, 80px); align-items: start; }
.duo-t { grid-column: 1 / -1; max-width: 44em; }
.duo-t h2 { margin: 0 0 14px; font: 400 clamp(2rem, 3.6vw, 3.1rem)/1.04 var(--display); letter-spacing: -0.01em; color: var(--papier); }
.duo-t p { margin: 0; color: var(--texte); text-wrap: pretty; }
@media (max-width: 900px) { .tarifs-duo { grid-template-columns: minmax(0, 1fr); } }

/* Le registre du cabinet : un vrai tableau. Sous le seuil, des bâtons comptent jusqu'à lui. */
.registre { min-width: 0; }
.cab .registre, .natal-quick .registre { margin-top: 44px; }
.registre table { width: 100%; border-collapse: collapse; }
.registre caption { caption-side: top; text-align: left; padding-bottom: 16px; }
.reg-t { display: block; font: 400 clamp(1.7rem, 2.6vw, 2.25rem)/1.05 var(--display); color: var(--papier); }
.reg-d { display: block; margin-top: 6px; font: var(--cartouche); color: var(--gris); }
.registre thead th { padding: 0 14px 8px 0; border-bottom: 1px solid var(--fil-fort); text-align: left; font: var(--cartouche); color: var(--gris); }
.registre tbody th, .registre tbody td { padding: 17px 14px 17px 0; border-bottom: 1px solid var(--fil); text-align: left; vertical-align: baseline; }
.registre tbody th { font-weight: 400; color: var(--texte); text-wrap: balance; }
.reg-v { font: 400 clamp(1.8rem, 2.7vw, 2.5rem)/1 var(--display); color: var(--papier); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.reg-v small { font-size: 0.5em; color: var(--gris); }
.reg-b { font-size: 0.9rem; line-height: 1.35; color: var(--gris); }
.reg-wait { font: italic 400 1rem/1.3 var(--text); color: var(--gris); }
.tally { display: flex; gap: 10px; margin: 2px 0 7px; }
.tally .g { position: relative; display: flex; gap: 4px; height: 18px; }
.tally i { display: block; width: 1.5px; height: 100%; background: var(--papier); opacity: 0.16; }
.tally i.on { opacity: 1; }
.tally .g i:nth-child(5) { display: none; }
.tally .g.full i:nth-child(5) { display: block; position: absolute; left: 50%; top: 50%; height: 25px; transform: translate(-50%, -50%) rotate(64deg); }
.tally-n { display: block; font-variant-numeric: lining-nums tabular-nums; }
.reg-note { margin: 16px 0 0; max-width: 40em; font-size: 0.92rem; color: var(--gris); text-wrap: pretty; }
@media (max-width: 640px) {
  .registre thead { display: none; }
  .registre tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--fil); }
  .registre tbody th, .registre tbody td { padding: 0; border: 0; }
  .reg-b { grid-column: 1 / -1; margin-top: 8px; }
}

/* Le choix de formule du cabinet : les lignes de la carte, à cocher ; la formule choisie s'entoure à l'encre. */
.offres { margin: 0; padding: 0; border: 0; min-width: 0; }
.offres legend { padding: 0; margin-bottom: 6px; color: var(--texte); font-size: 0.98rem; }
.offre { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 16px 14px 15px; border-bottom: 1px solid var(--fil); cursor: pointer; transition: background-color 0.3s var(--out); }
.offre input { appearance: none; grid-row: 1 / span 3; align-self: start; width: 22px; height: 22px; margin: 0.2em 0 0; display: grid; place-content: center; border: 1px solid rgba(242, 232, 208, 0.75); border-radius: 50%; }
.offre input::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--ocre); transform: scale(0); transition: transform 0.25s var(--out); }
.offre input:checked::before { transform: scale(1); }
.offre:has(input:focus-visible) { outline: 1px solid var(--ocre); outline-offset: 2px; }
.offre-n { font: 400 1.28rem/1.25 var(--display); color: var(--papier); }
.offre-nom { position: relative; display: inline-block; }
.entoure { position: absolute; left: -0.7em; top: -0.6em; width: calc(100% + 1.4em); max-width: none; height: calc(100% + 1.2em); overflow: visible; pointer-events: none; fill: none; stroke: var(--vermillon); stroke-width: 2.4; stroke-linecap: round; opacity: 0; transform: rotate(-2deg); }
.entoure path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.offre:has(input:checked) .entoure { opacity: 1; }
.offre:has(input:checked) .offre-i { margin-top: 0.55em; }
@media (max-width: 480px) { .entoure { left: -0.45em; width: calc(100% + 0.9em); } .offre { padding-inline: 8px; column-gap: 12px; } .offre-n { font-size: 1.1rem; } .offre-p { font-size: 1.35rem; } }
@media (prefers-reduced-motion: no-preference) { .offre:has(input:checked) .entoure path { animation: plume 0.5s var(--out) both; } }
@keyframes plume { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.offre-n em { margin-left: 14px; font: italic 400 0.95rem var(--text); color: #ec7a5e; }
.offre-p { font: 400 1.55rem/1 var(--display); color: var(--papier); font-variant-numeric: lining-nums; white-space: nowrap; transition: color 0.3s var(--out); }
.offre-x { grid-column: 2 / -1; margin-top: 0.5em; font: italic 400 max(0.94rem, 15px)/1.35 var(--text); color: #ec7a5e; }
.offre-i { grid-column: 2 / -1; font-size: 0.93rem; line-height: 1.45; color: var(--gris); }
.offres-note { margin: 10px 0 0; font-size: 0.95rem; color: var(--gris); }

/* Plafond et paiement : une bande à deux colonnes inégales, le plafond dessiné comme une jauge. */
.regles { margin-top: clamp(72px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 clamp(32px, 5vw, 80px); border-top: 1px solid var(--fil-fort); }
.regle { padding: 34px 0 10px; }
.regle h2 { margin: 0 0 16px; font: 400 clamp(1.6rem, 2.4vw, 2.1rem)/1.1 var(--display); color: var(--papier); }
.regle p { margin: 0; max-width: 34em; color: var(--texte); text-wrap: pretty; }
.jauge { display: flex; height: 3px; margin: 26px 0 10px; }
.j-ok { position: relative; flex: 3; background: var(--ocre); }
.j-ok::after { content: ""; position: absolute; right: 0; top: -6px; width: 1px; height: 15px; background: var(--papier); }
.j-wait { flex: 1.1; background: repeating-linear-gradient(90deg, var(--gris) 0 6px, transparent 6px 11px); }
/* Les repères tombent sous la jauge : 0 au départ, le plafond au bout du trait plein, l'attente au bout des pointillés. */
.regle .jauge-l { display: grid; grid-template-columns: 3fr 1.1fr; max-width: none; margin-bottom: 22px; font: var(--cartouche); color: var(--gris); }
.jauge-l span:nth-child(1) { grid-area: 1 / 1; justify-self: start; }
.jauge-l span:nth-child(2) { grid-area: 1 / 1; justify-self: end; padding-left: 12px; color: var(--ocre); }
.jauge-l span:nth-child(3) { grid-area: 1 / 2; justify-self: end; padding-left: 12px; text-align: right; }
@media (max-width: 900px) { .regles { grid-template-columns: minmax(0, 1fr); } }
.mesures { margin: 0 0 30px; border-top: 1px solid var(--fil); }
.mesures summary { cursor: pointer; padding: 14px 0; color: var(--papier); list-style: none; }
.mesures summary::-webkit-details-marker { display: none; }
.mesures summary::after { content: "+"; margin-left: 12px; font-family: var(--display); color: var(--gris); }
.mesures[open] summary::after { content: "\2212"; }

/* Tarifs */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--fil-fort); }
.plans { grid-template-rows: repeat(5, auto); }
.plan { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 20px; padding: 38px 28px 42px 0; }
.plan .price { font-size: clamp(2.8rem, 4.8vw, 4.4rem); }
.plan > * { margin: 0; }
.plan .lien { display: inline-flex; align-items: center; min-height: 54px; color: var(--papier); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.plan + .plan { padding-left: 28px; border-left: 1px solid var(--fil); }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; align-content: start; gap: 9px; color: var(--texte); }
.plan li { position: relative; padding-left: 22px; }
.plan li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--texte); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } .plan + .plan { padding-left: 0; border-left: 0; border-top: 1px solid var(--fil); } }

/* Pied de page : le mot, la plante, la loi. */
.foot { padding: clamp(72px, 10vw, 140px) var(--gut) 40px; border-top: 1px solid var(--fil); margin-top: 40px; background: linear-gradient(rgba(3, 4, 11, 0), rgba(3, 4, 11, 0.9) 30%); }
.colophon { display: grid; grid-template-columns: auto minmax(0, 42em); gap: 14px 5vw; align-items: end; padding-bottom: 34px; border-bottom: 1px solid var(--fil); }
.colo { margin: 0; color: var(--texte); font-size: 1rem; line-height: 1.6; }
.foot-grid { display: grid; gap: 10px; margin-top: 30px; max-width: 70em; }
.foot-word { font: 400 clamp(3rem, 7vw, 5.6rem)/0.85 var(--brand); margin: 0; letter-spacing: 0; color: var(--papier); }
.fcol { margin: 0; color: var(--gris); line-height: 1.75; }
.fcol a { color: var(--texte); text-decoration: underline; text-decoration-color: var(--fil); }
.fcol a:hover { color: var(--papier); }
.ftitle { margin-right: 6px; font: var(--cartouche); letter-spacing: var(--cartouche-ls); color: var(--gris); }
.foot-legal { margin-top: 64px; display: grid; gap: 8px; color: var(--gris); font-size: 0.92rem; max-width: 62em; }
.foot-legal p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px !important; }
.foot-links a { color: var(--texte); }
@media (max-width: 900px) { .colophon { grid-template-columns: 1fr; } }

/* Apparitions : CSS pur, état final toujours visible. Réservées au premier écran. */
@media (prefers-reduced-motion: no-preference) {
  .sky-wrap { animation: dusk 2.4s var(--ease) both; }
  @keyframes dusk { from { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Le jeu complet (page des arcanes) */
.deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: clamp(22px, 2.6vw, 40px) clamp(16px, 2vw, 30px); }
.deck-card { display: grid; gap: 14px; align-content: start; text-decoration: none; color: var(--texte); font-size: 0.92rem; }
.deck { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1100px) { .deck { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.hub-side { display: flex; gap: 28px; align-items: end; flex-wrap: wrap; }
.hub-fool { display: grid; gap: 10px; width: clamp(130px, 13vw, 190px); text-decoration: none; }
.deck-card .lame { transition: transform 0.6s var(--out); }
.deck-card:hover .lame { transform: translateY(-8px) rotate(-1.2deg); }
/* Matrice des compatibilités */
.matrix { display: grid; min-width: 760px; border-top: 1px solid var(--fil); }
.mrow { display: grid; grid-template-columns: 9em repeat(12, minmax(40px, 1fr)); border-bottom: 1px solid var(--fil); }
.mrow > * { display: grid; place-items: center; padding: 10px 4px; border-right: 1px solid var(--fil); color: var(--texte); font-size: 0.95rem; text-decoration: none; }
.mrow > [role="rowheader"] { justify-items: start; padding-left: 0; color: var(--papier); }
.mrow a:hover { background: rgba(242, 232, 208, 0.08); color: var(--papier); }
.mrow .g { width: 16px; height: 16px; }
.form select { width: 100%; min-height: 56px; background: rgba(242, 232, 208, 0.05); color: var(--papier); border: 1px solid rgba(242, 232, 208, 0.5); padding: 12px 14px; font: 400 1.2rem var(--text); }

/* Tirage complet : deux questions, des choix encadrés, larges comme un doigt, tous visibles d'un coup. */
.draw-form { max-width: 52em; gap: 30px; margin-top: 8px; }
.opts { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.opts legend { padding: 0; margin-bottom: 10px; font: 400 clamp(1.45rem, 2.2vw, 1.8rem)/1.15 var(--display); color: var(--papier); }
.opts-mode { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opts-theme { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opts .hint { grid-column: 1 / -1; margin: 0; color: var(--texte); font-style: italic; }
.opt-c { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 2px 14px; min-height: 58px; padding: 12px 16px; border: 1px solid rgba(242, 232, 208, 0.45); cursor: pointer; transition: border-color 0.25s, background 0.25s; }
/* Le rond est dessiné : anneau papier vide quand il n'est pas choisi (le disque gris du système se lit « désactivé »),
   anneau et point ocre quand il l'est. */
.opt-c input { grid-row: 1 / span 2; appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 24px; height: 24px; margin: 0; border: 2px solid var(--papier); border-radius: 50%; background: transparent; cursor: pointer; }
.opt-c input::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ocre); transform: scale(0); transition: transform 0.2s var(--out); }
.opt-c input:checked { border-color: var(--ocre); }
.opt-c input:checked::before { transform: scale(1); }
.opt-c:not(:has(.opt-d)) input { grid-row: auto; }
.opt-t { font-size: 1.18rem; color: var(--papier); line-height: 1.25; }
.opt-d { grid-column: 2; color: var(--gris); font-size: 1rem; line-height: 1.4; }
.opt-c:hover { border-color: var(--papier); }
.opt-c:has(input:checked) { border-color: var(--ocre); background: rgba(231, 182, 79, 0.12); }
.opt-c:has(input:focus-visible) { outline: 2px solid var(--ocre); outline-offset: 2px; }
.opts[disabled] .opt-c { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 760px) { .opts-mode { grid-template-columns: minmax(0, 1fr); } .opts-theme { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .opt-c, .opt-c input::before { transition: none; } }
.draw-out { margin-top: 64px; }
.reading { display: grid; gap: 56px 4vw; }
.reading-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reading-card { display: grid; gap: 24px; align-content: start; }
.reading-card .flip { max-width: 250px; }
.reading-1 .reading-card { grid-template-columns: minmax(180px, 290px) minmax(0, 1fr); gap: 32px 5vw; }
.reading-1 .reading-card .flip { max-width: 290px; }
.reading-card h3 a { text-decoration: none; }
.rev { font-family: var(--text); font-size: 0.62em; color: var(--texte); }
.yn { font: 400 clamp(3.2rem, 7vw, 5.8rem)/1 var(--display); margin: 0.1em 0 0.2em; color: var(--papier); }
@media (max-width: 900px) { .reading-3 { grid-template-columns: 1fr; } .reading-1 .reading-card { grid-template-columns: 1fr; } .reading-card .flip { max-width: 220px; } }

/* La roue du thème : gravée à l'encre claire, les signes sur un anneau, les planètes posées sur leur degré. */
.wheel { overflow: visible; color: var(--papier); }
.wheel text { font-family: var(--text); fill: var(--texte); text-anchor: middle; dominant-baseline: middle; }
.w-ring { fill: none; stroke: var(--fil-fort); stroke-width: 1; }
.w-faint { stroke: var(--fil); }
.w-tick { stroke: var(--fil-fort); stroke-width: 0.8; }
.w-sep { stroke: var(--fil-fort); stroke-width: 1; }
.w-sign { color: var(--ocre); }
.w-cusp { stroke: var(--fil); stroke-width: 1; }
.w-axis { stroke: var(--papier); stroke-width: 1.4; }
.w-axis-lab { font-weight: 500; font-size: 14px; fill: var(--papier) !important; letter-spacing: 0.14em; }
.w-house { font-size: 13px; fill: var(--gris) !important; }
.w-ptick { stroke: var(--papier); stroke-width: 1.6; }
.w-planet { color: var(--papier); }
.w-planet.w-moon, .w-planet.w-sun { color: #fff; }
.w-asp { stroke-width: 1; }
.w-harmonious { stroke: rgba(242, 232, 208, 0.42); }
.w-tense { stroke: var(--vermillon); stroke-opacity: 0.8; }
.w-lab { font-size: 15px; fill: var(--papier) !important; }
.w-lab-sign { font-size: 14px; fill: var(--texte) !important; letter-spacing: 0.06em; }
.wheel-wrap { position: relative; }
.wheel-wrap .wheel { display: block; width: 100%; height: auto; }
.wheel-top { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
/* Sur le thème, la lentille est une gousse ovale qui révèle noms et degrés des planètes. */
.lens-on .wheel-top { opacity: 1; -webkit-mask-image: radial-gradient(ellipse var(--lw, 150px) var(--lh, 174px) at var(--lx, 50%) var(--ly, 50%), #000 97%, transparent 100%); mask-image: radial-gradient(ellipse var(--lw, 150px) var(--lh, 174px) at var(--lx, 50%) var(--ly, 50%), #000 97%, transparent 100%); }
.wheel-wrap .lens { left: calc(var(--lx, 50%) - var(--lw, 150px)); top: calc(var(--ly, 50%) - var(--lh, 174px)); width: calc(var(--lw, 150px) * 2); height: calc(var(--lh, 174px) * 2); aspect-ratio: auto; }

/* Thème complet */
.natal-res { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 5vw; align-items: start; }
.natal-wheel .wheel-wrap { width: 100%; }
.natal-side { display: grid; gap: 36px; }
.pos { width: 100%; border-collapse: collapse; font-size: 1rem; }
.pos th, .pos td { text-align: left; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--fil); font-weight: 400; }
.pos thead th { color: var(--gris); font: var(--cartouche); letter-spacing: var(--cartouche-ls); }
.pos tbody th { color: var(--papier); white-space: nowrap; }
.pos .g { width: 15px; height: 15px; color: var(--ocre); }
.bar { display: grid; grid-template-columns: 5.5em 1fr 1.5em; gap: 10px; align-items: center; font-size: 0.95rem; color: var(--texte); }
.bar .track { height: 3px; background: var(--fil); position: relative; }
.bar .track span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--papier); }
.asp { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 0.95rem; color: var(--texte); }
.asp .g { width: 14px; height: 14px; }
details.interp { border-top: 1px solid var(--fil); padding: 18px 0; }
details.interp summary > span { text-wrap: balance; }
details.interp summary { cursor: pointer; font: 400 clamp(1.3rem, 2vw, 1.65rem)/1.2 var(--display); color: var(--papier); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details.interp summary::-webkit-details-marker { display: none; }
details.interp summary::after { content: "+"; color: var(--gris); transition: transform 0.4s var(--out); }
details.interp[open] summary::after { transform: rotate(45deg); }
@media (max-width: 900px) { .natal-res { grid-template-columns: 1fr; } }

/* ===== Voyance en direct (phase 2, 19/10/2026, reprise après contre-visite). La présence se dit par une PORTE-FENÊTRE
   parisienne : deux vantaux de trois carreaux, une imposte, un garde-corps. Allumée (la lampe : l'ocre des lames) quand
   la voyante est là et disponible, rideau rouge à demi tiré quand elle consulte, noire sinon. Jamais un point vert
   d'interface ; elle ne s'allume que si la console est ouverte. Les voyantes forment une façade, pas une grille de cartes. */
.fenetre { display: block; width: 100%; height: auto; overflow: visible; }
.fenetre .f-verre { fill: #0f1730; transition: fill 0.9s var(--ease); }
.fenetre .f-lueur { fill: #fff0c2; opacity: 0; filter: blur(7px); transition: opacity 0.9s var(--ease); }
[data-state="offline"] .fenetre .f-lueur { fill: #9fb0d8; opacity: 0.1; filter: blur(9px); }
.fenetre .f-rideau { fill: #8f2a1c; opacity: 0; transition: opacity 0.6s var(--ease); }
.fenetre .f-cadre { fill: none; stroke: rgba(242, 232, 208, 0.55); stroke-width: 2; }
.fenetre .f-garde { fill: none; stroke: rgba(242, 232, 208, 0.5); stroke-width: 1.8; }
[data-state="online"] .fenetre .f-verre, [data-state="busy"] .fenetre .f-verre { fill: #d9a443; }
[data-state="online"] .fenetre .f-lueur { opacity: 0.75; }
[data-state="busy"] .fenetre .f-lueur { opacity: 0.35; }
[data-state="online"] .fenetre, [data-state="busy"] .fenetre { filter: drop-shadow(0 0 22px rgba(231, 182, 79, 0.32)); }
[data-state="online"] .fenetre .f-cadre, [data-state="busy"] .fenetre .f-cadre { stroke: #24180a; stroke-width: 2; }
[data-state="online"] .fenetre .f-garde, [data-state="busy"] .fenetre .f-garde { stroke: #140e07; stroke-width: 1.8; }
[data-state="busy"] .fenetre .f-rideau { opacity: 0.94; }
@media (prefers-reduced-motion: reduce) { .fenetre .f-verre, .fenetre .f-lueur, .fenetre .f-rideau { transition: none; } }

/* La façade : une corniche (double filet), puis une travée par voyante, fenêtre au-dessus, plaque en dessous. */
.voyantes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 16px; padding-top: clamp(36px, 4vw, 52px); border-top: 3px double var(--fil-fort); }
@media (min-width: 700px) { .voyantes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 28px; } }
@media (min-width: 1100px) { .voyantes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.voyante { display: grid; justify-items: center; align-content: start; gap: 18px; text-align: center; }
.voyante .v-fen { width: clamp(70px, 6.4vw, 84px); }
.v-plaque { display: grid; justify-items: center; gap: 4px; max-width: 18rem; }
.v-plaque > * { margin: 0; }
.v-nom { font: 400 clamp(1.4rem, 1.9vw, 1.7rem)/1.1 var(--display); }
.v-nom a { color: var(--papier); text-decoration: none; }
.v-nom a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.v-etat { font: italic 400 0.95rem/1.3 var(--text); color: var(--gris); white-space: nowrap; }
[data-state="online"] .v-etat { color: var(--ocre); }
[data-state="busy"] .v-etat { color: var(--texte); }
.v-arts { color: var(--texte); }
.v-chiffres { color: var(--gris); font-size: 0.92rem; }
.v-plaque .v-retour { margin-top: 6px; font-style: italic; color: var(--texte); font-size: 0.95rem; }
.v-plaque .v-busy { margin-top: 6px; color: var(--texte); font-style: italic; }
.v-plaque .v-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.v-actions .pod { min-height: 46px; padding-inline: 22px; }
.v-plaque .v-alerte { margin-top: 8px; font-size: 0.95rem; }
.v-plaque .v-ecrit { margin-top: 6px; font-size: 0.92rem; }
.v-ecrit a { color: var(--texte); text-underline-offset: 0.2em; }
.v-plaque p, .v-nom { text-wrap: balance; }
@media (max-width: 599px) {
  .voyantes { grid-template-columns: 1fr; gap: 40px; }
  .voyante { grid-template-columns: 72px minmax(0, 1fr); justify-items: start; align-items: start; text-align: left; gap: 0 20px; }
  .voyante .v-fen { width: 72px; }
  .v-plaque { justify-items: start; max-width: none; }
  .v-plaque .v-actions { justify-content: flex-start; }
}

/* En tête de la façade : le compte (mesuré), le prix, puis la recherche écrite comme une phrase. */
.qui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px 7vw; align-items: end; margin-bottom: clamp(30px, 4vw, 46px); }
.fenetres-h { margin: 0 0 10px; font: italic 400 clamp(1.35rem, 2.3vw, 1.85rem)/1.2 var(--display); color: var(--papier); text-wrap: balance; }
.qui .meta { margin: 0; max-width: 34em; }
.affiner > summary { display: none; }
.trouver { margin: 0; font: italic 400 clamp(1.15rem, 1.6vw, 1.38rem)/2 var(--display); color: var(--texte); }
.trouver select { field-sizing: content; appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-bottom: 1px solid var(--fil-fort); color: var(--papier); font: inherit; font-style: normal; padding: 0 2px; cursor: pointer; max-width: 100%; }
.trouver select:focus-visible { outline: 2px solid var(--ocre); outline-offset: 2px; }
.trouver select option { background: var(--nuit); font-family: var(--text); }
.t-dispo { white-space: nowrap; }
.t-dispo input, .caisse .check input { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; width: 1.1em; height: 1.1em; margin: 0 8px 0 2px; border: 1px solid var(--papier); vertical-align: -0.2em; cursor: pointer; }
.t-dispo input::before, .caisse .check input::before { content: ""; width: 0.62em; height: 0.62em; background: var(--ocre); transform: scale(0); transition: transform 0.15s var(--ease); }
.t-dispo input:checked::before, .caisse .check input:checked::before { transform: scale(1); }
.caisse .check input { flex: none; margin-top: 0.3em; }
.t-dispo input:focus-visible, .caisse .check input:focus-visible { outline: 2px solid var(--ocre); outline-offset: 2px; }
.trouver .pod { margin-left: 8px; vertical-align: middle; font-style: normal; }
.ordre { margin: 30px 0 0; max-width: 46em; color: var(--gris); font-size: 0.92rem; }
@media (max-width: 760px) {
  .qui { grid-template-columns: 1fr; }
  .affiner > summary { display: flex; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; color: var(--papier); font: italic 400 1.05rem/1.4 var(--display); }
  .affiner > summary::-webkit-details-marker { display: none; }
  .affiner > summary::after { content: "+"; font-family: var(--display); font-style: normal; color: var(--gris); transition: transform 0.4s var(--out); }
  .affiner[open] > summary::after { transform: rotate(45deg); }
  .affiner[open] > summary { margin-bottom: 8px; }
  .trouver .pod { margin: 10px 0 0; }
}

/* Personne n'est là : une façade de quatre portes-fenêtres noires, comme une rue de Paris à trois heures du matin. */
.fenetres-vides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px 7vw; align-items: center; }
.rangee { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 14%; padding: 34px 8% 0; border-top: 3px double var(--fil-fort); max-width: 420px; }
@media (max-width: 760px) { .fenetres-vides { grid-template-columns: 1fr; } .rangee { max-width: 300px; } }

/* Les minutes : la carte EST le choix. La ligne choisie prend la bande ocre du cartouche ; pas de seconde liste de prix. */
.direct-minutes { border-top: 1px solid var(--fil); }
.achat { display: grid; grid-template-areas: "intro" "lame" "caisse"; gap: 32px; margin: 0; }
.achat .achat-intro { grid-area: intro; }
.achat .tarifs { grid-area: lame; }
.achat .caisse { grid-area: caisse; }
@media (min-width: 900px) {
  .achat { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; grid-template-areas: "intro lame" "caisse lame"; gap: 0 7vw; align-items: start; }
  .achat .caisse { position: sticky; top: 96px; }
}
.direct-minutes .tarifs { justify-self: start; width: 100%; max-width: 40rem; }
.caisse .check { color: var(--texte); margin: 18px 0; }
.recap { margin: 26px 0 0; font: italic 400 1.35rem/1.2 var(--display); color: var(--papier); }
.recap:empty { display: none; }
.choix-f { border: 0; margin: 0; padding: 0; min-width: 0; }
.tarif.choix { display: block; position: relative; cursor: pointer; margin: 0 calc(14px - var(--px)); padding: 16px calc(var(--px) - 14px) 15px; transition: background 0.25s var(--ease); }
.tarif.choix .tarif-x, .tarif.choix .tarif-i { display: block; }
.tarif.choix:hover { background: rgba(238, 212, 156, 0.42); }
.tarif.choix:has(input:checked) { background: #eed49c; border-bottom-color: rgba(23, 18, 11, 0.4); }
.tarif.choix:has(input:focus-visible) { outline: 2px solid #17120b; outline-offset: -2px; }
.garder { border-top: 1px solid var(--fil); padding-bottom: clamp(28px, 3vw, 44px); }
.garder .prose p { max-width: 34em; }
.mesure { padding-top: clamp(40px, 5vw, 72px); }
.truths.alignes .truth { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px 7vw; }

/* Fiche d'une voyante : la grande fenêtre et ce qui en dépend ; la répartition des notes à partir de dix. */
.fiche-presence { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; align-items: center; padding-bottom: 22px; }
.fiche-presence .v-plaque { justify-items: start; text-align: left; }
.fiche-presence .v-plaque .v-actions { justify-content: flex-start; }
.fiche-presence .v-etat { font-size: 1.05rem; }
.notes-rep { display: grid; gap: 6px; margin: 4px 0 10px; max-width: 26em; }
.notes-rep div { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 12px; align-items: center; }
.notes-rep dt { color: var(--gris); font-size: 0.92rem; }
.notes-rep dd { margin: 0; display: flex; align-items: center; gap: 10px; }
.notes-rep .barre { display: block; height: 3px; min-width: 1px; background: var(--papier); }
.notes-rep .nb { color: var(--texte); font-size: 0.92rem; font-variant-numeric: lining-nums tabular-nums; }
.notes-attente { margin: 4px 0 10px; }
.notes-attente .meta { margin: 4px 0 0; }

/* Compte : la consultation en cours, en bandeau, avec sa fenêtre au rideau tiré. */
.en-cours { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px 0 26px; margin-bottom: 18px; border-bottom: 1px solid var(--fil); }
.en-cours .lede { margin: 0 0 12px; }
.en-cours p { margin: 0; }

/* La salle : une correspondance plutôt qu'une messagerie. La voyante écrit à gauche, en papier ; vous, à droite, avec un
   filet ; le compteur est un chiffre de cadran (Bodoni, chiffres à largeur fixe), le seul objet qui bouge. */
.salle { padding: clamp(24px, 3vw, 44px) var(--gut) clamp(40px, 6vw, 80px); }
.salle-h h1 { margin: 4px 0 0; font-size: clamp(2rem, 3.4vw, 2.8rem); }
.salle-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 32px 6vw; margin-top: clamp(18px, 2.4vw, 30px); align-items: start; }
.salle-fil { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; gap: 14px; min-width: 0; height: calc(100dvh - 300px); min-height: 380px; }
.fil { list-style: none; margin: 0; display: grid; align-content: start; gap: 18px; overflow-y: auto; min-height: 0; border-top: 1px solid var(--fil); border-bottom: 1px solid var(--fil); padding: 22px 6px; overscroll-behavior: contain; }
.fil li { max-width: 40em; }
.fil li p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fil .m-qui { display: block; font: italic 400 0.95rem/1.3 var(--text); color: var(--gris); margin-bottom: 2px; }
.fil .m-voyant p { color: var(--papier); font-size: 1.16rem; }
.fil .m-client { justify-self: end; margin-left: auto; max-width: min(60ch, 86%); text-align: left; padding-right: 14px; border-right: 1px solid var(--fil-fort); }
.fil .m-client .m-qui { text-align: right; }
.fil .m-client p { color: var(--texte); }
.fil .m-system { justify-self: center; text-align: center; max-width: 34em; }
.fil .m-system p { color: var(--gris); font-style: italic; font-size: 0.95rem; }
.frappe { margin: -6px 0 0; color: var(--gris); font-style: italic; font-size: 0.95rem; }
.ecrire { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; }
.ecrire textarea { width: 100%; min-height: 56px; resize: vertical; background: transparent; color: var(--papier); border: 1px solid var(--fil-fort); padding: 14px 12px; font: 400 1.15rem/1.45 var(--text); }
.ecrire textarea:focus { outline: none; border-color: var(--papier); }
.ecrire .pod { height: auto; }
.autre { margin: 0; }
.aide-clavier { display: none; grid-column: 1 / -1; margin: 0; color: var(--gris); font-size: 0.95rem; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) { .aide-clavier { display: block; } }
.c-plus-mob { display: none; }
.compteur { position: sticky; top: 96px; display: grid; gap: 4px; padding-left: 26px; border-left: 1px solid var(--fil); }
.compteur p { margin: 0; }
.c-l { color: var(--gris); font: italic 400 0.9rem/1.3 var(--text); margin-top: 14px !important; }
.c-l:first-child { margin-top: 0 !important; }
.c-v { font: 400 clamp(2.8rem, 5vw, 3.8rem)/1 var(--display); color: var(--papier); font-variant-numeric: lining-nums tabular-nums; }
.c-w { font: 400 1.45rem/1.2 var(--display); color: var(--papier); font-variant-numeric: lining-nums tabular-nums; }
.c-mob { display: none; }
.c-etat { margin-top: 16px !important; color: var(--texte) !important; }
.compteur .pod { margin: 20px 0 8px; }
.apres { display: grid; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--fil); }
.appel { border: 1px solid var(--fil-fort); padding: clamp(20px, 3vw, 32px); display: grid; gap: 6px; }
.appel p { margin: 0; }
.appel-t { color: var(--texte); }
.appel-num { font: 400 clamp(1.8rem, 4vw, 2.6rem)/1.1 var(--display); color: var(--papier); font-variant-numeric: lining-nums; }
.appel-code { font: 400 clamp(2.4rem, 6vw, 3.6rem)/1 var(--display); color: var(--ocre); letter-spacing: 0.08em; font-variant-numeric: lining-nums tabular-nums; }
.appel-num:empty, .appel-code:empty { display: none; }
@media (max-width: 760px) {
  /* Sur téléphone, le site s'efface : l'en-tête ne colle plus, le compteur tient en une ligne en haut. */
  .salle-page .top { position: static; }
  .salle { padding-top: 10px; }
  .salle-h h1 { font-size: 1.6rem; }
  .salle-g { grid-template-columns: 1fr; gap: 0; }
  .compteur { order: -1; position: sticky; top: 0; z-index: 3; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 2px; padding: 8px 0 6px; border-left: 0; border-bottom: 1px solid var(--fil); background: var(--nuit); }
  .compteur .c-l, .compteur .c-offert, .compteur .c-plus { display: none !important; }
  .c-v { font-size: 1.6rem; grid-column: 1; grid-row: 1; }
  .c-w { font: 400 1rem/1.2 var(--text); color: var(--texte); grid-column: 2; grid-row: 1; }
  .c-mob { display: inline; color: var(--gris); font-style: italic; }
  .compteur .pod { grid-column: 3; grid-row: 1; margin: 0; min-height: 38px; padding: 0 14px; }
  .compteur .c-etat { grid-column: 1 / -1; grid-row: 2; margin-top: 2px !important; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .compteur .apres { grid-column: 1 / -1; }
  .salle-fil { height: auto; min-height: 0; grid-template-rows: none; margin-top: 12px; }
  .fil { min-height: 45vh; overflow: visible; }
  .ecrire { position: sticky; bottom: 0; background: var(--nuit); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
  .c-plus-mob { display: inline; font-size: 0.92rem; }
}

/* Console d'une voyante : la conversation au centre ; sa fenêtre (telle que la voient les clients) et le compteur à côté. */
.console-direct { margin-top: 40px; padding-top: 32px; border-top: 3px double var(--fil-fort); }
.cd-g { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px 5vw; align-items: start; }
.cd-main { display: grid; gap: 16px; min-width: 0; }
.cd-main h2 { margin: 0; }
.cd-etat { margin: 0; }
.cd-main .salle-fil { height: calc(100dvh - 140px); min-height: 380px; grid-template-rows: minmax(0, 1fr) auto auto; }
.cd-side { position: sticky; top: 24px; display: grid; gap: 4px; justify-items: start; padding-left: 26px; border-left: 1px solid var(--fil); }
.cd-side p { margin: 0; }
.cd-side .v-fen { width: 110px; margin-bottom: 18px; }
.cd-side .c-v { font-size: 3rem; }
.cd-side .pod { margin-top: 18px; }
.cd-side .pod + .pod { margin-top: 10px; }
.cd-side .meta { margin-top: 14px; }
.demande { padding: 18px 22px; border-left: 3px solid var(--ocre); background: var(--lampe); }
.demande p { margin: 0 0 10px; }
.cd-planning { margin-top: 36px; border-top: 1px solid var(--fil); padding-top: 18px; }
.cd-planning > summary { cursor: pointer; font: 400 1.3rem/1.2 var(--display); color: var(--papier); }
.planning { max-width: none; margin-top: 16px; }
.planning-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 18px; }
.planning-g input { font-size: 1rem; }
.pod[aria-pressed="true"]:not(.interrupteur) { background: var(--papier); color: #17120a; border-color: var(--papier); }
.interrupteur b { font-weight: 500; }
.interrupteur[aria-pressed="true"] b { color: var(--ocre); }
.cd-etat { margin: 4px 0 6px !important; color: var(--texte); max-width: 18em; }
@media (max-width: 900px) { .cd-g { grid-template-columns: 1fr; } .cd-side { position: static; padding-left: 0; border-left: 0; } }

/* Tarifs : le sommaire des prix, une ligne par offre, comme la table d'une carte (points de conduite, prix à droite). */
.sommaire { list-style: none; margin: 0; padding: 0; max-width: 860px; border-top: 1px solid var(--fil-fort); }
.som-a { color: var(--papier); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; white-space: nowrap; }
.som { display: grid; gap: 8px; padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--fil); text-decoration: none; color: inherit; }
.som-l { display: flex; align-items: baseline; gap: 16px; }
.som-n { font: 400 clamp(1.7rem, 3vw, 2.6rem)/1.05 var(--display); color: var(--papier); }
.som .lead { flex: 1; min-width: 24px; height: 0.6em; background: radial-gradient(circle, rgba(242, 232, 208, 0.42) 0.9px, transparent 1.4px) 0 100% / 8px 4px repeat-x; }
.som-p { font: 400 clamp(1.7rem, 3vw, 2.6rem)/1 var(--display); color: var(--papier); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.som-p small { font: italic 400 1rem var(--text); color: var(--texte); }
.som-i { color: var(--texte); max-width: 46em; }
.som:hover .som-n, .som:focus-visible .som-n { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
@media (max-width: 640px) { .som-l { flex-wrap: wrap; gap: 4px 12px; } .som .lead { display: none; } .som-p { width: 100%; } }

/* Accueil : le sommaire sous le ciel. Chaque outil à un geste ; filets dorés comme la bande des signes. */
.outils { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.outils-h { font: 400 clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--display); color: var(--papier); margin: 0 0 clamp(18px, 2.4vw, 30px); scroll-margin-top: 90px; }
.outils-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(231, 182, 79, 0.3); }
@media (max-width: 1100px) { .outils-l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .outils-l { grid-template-columns: minmax(0, 1fr); } }
.outils-l li { border-bottom: 1px solid var(--fil); }
.outils-l a { display: grid; gap: 4px; min-height: 100%; padding: 18px 18px 20px 0; text-decoration: none; color: inherit; transition: background 0.3s; }
.outils-t { font: 400 clamp(1.25rem, 1.8vw, 1.5rem)/1.15 var(--display); color: var(--papier); }
.outils-d { color: var(--gris); font-size: 1rem; line-height: 1.45; }
.outils-l a:hover, .outils-l a:focus-visible { background: rgba(231, 182, 79, 0.07); }
.outils-l a:hover .outils-t, .outils-l a:focus-visible .outils-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
@media (min-width: 761px) { .outils-l a { padding-left: 18px; } .outils-l li { border-right: 1px solid var(--fil); } }
@media (prefers-reduced-motion: reduce) { .outils-l a { transition: none; } }
/* Numérologie : le formulaire du thème, les six tuiles, le calcul lettre par lettre, les quatre périodes,
   la grille du nom, les listes de nombres, la table des lettres et la matrice des 78 couples. */
/* Une question par ligne, comme les autres formulaires : plus lent à l'œil qu'en trois colonnes, mais jamais ambigu. */
.ncalc .hint { margin: 0; color: var(--gris); font-size: 1rem; max-width: 46em; }
.nreport { margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid rgba(231, 182, 79, 0.3); padding-top: clamp(28px, 4vw, 48px); scroll-margin-top: 90px; }
.nr-head h2 { font: 400 clamp(2rem, 4.4vw, 3.4rem)/1.05 var(--display); color: var(--papier); margin: 4px 0 6px; overflow-wrap: anywhere; }
.nr-head p { margin: 0 0 6px; }
.nr-h { font: 400 clamp(1.35rem, 2.2vw, 1.8rem)/1.15 var(--display); color: var(--papier); margin: clamp(36px, 5vw, 60px) 0 16px; }
.ntiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); border-top: 1px solid var(--fil); border-left: 1px solid var(--fil); }
.ntile { padding: 22px 22px 18px; border-right: 1px solid var(--fil); border-bottom: 1px solid var(--fil); display: grid; align-content: start; gap: 6px; min-width: 0; }
.ntile p { margin: 0; }
.ntile-k { color: var(--gris); font-size: 0.9rem; }
.ntile .ntile-n { font: 400 clamp(3.4rem, 6vw, 4.6rem)/0.95 var(--display); color: var(--papier); font-variant-numeric: lining-nums; }
.ntile-t { margin: 2px 0 0; font: 400 1.3rem/1.2 var(--display); }
.ntile-t a { color: var(--papier); }
.calc { margin-top: 8px; }
.calc summary { cursor: pointer; color: var(--ocre); font-size: 0.95rem; }
.cw { display: grid; gap: 4px; margin: 10px 0 6px; font-variant-numeric: tabular-nums; color: var(--texte); overflow-wrap: anywhere; }
.cw b { color: var(--papier); font-weight: 500; letter-spacing: 0.04em; }
.cw sub { font-size: 0.7em; color: var(--ocre); }
.cw-t { color: var(--papier); }
.phases { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fil); }
.phases li { display: grid; grid-template-columns: 10em 3.2em minmax(0, 1fr); gap: 8px 22px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--fil); }
.phases p { margin: 0 0 6px; }
.ph-a { color: var(--gris); }
.phases .ph-n { font: 400 2.4rem/1 var(--display); color: var(--papier); margin: 0; }
@media (max-width: 640px) { .phases li { grid-template-columns: auto 1fr; } .phases li > div { grid-column: 1 / -1; } }
.nr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 5vw, 64px); }
@media (max-width: 800px) { .nr-cols { grid-template-columns: minmax(0, 1fr); } }
.nlist { margin: 0; padding-left: 1.1em; display: grid; gap: 10px; }
.incl { border-collapse: collapse; margin: 6px 0 14px; }
.incl caption { caption-side: bottom; text-align: left; color: var(--gris); font-size: 0.95rem; padding-top: 8px; }
.incl td { width: 4.4em; height: 4.4em; border: 1px solid var(--fil-fort); text-align: center; vertical-align: middle; position: relative; }
.incl .d { position: absolute; top: 4px; left: 6px; font-size: 0.78rem; color: var(--gris); }
.incl .v { font: 400 1.7rem var(--display); color: var(--papier); }
.incl td.zero .v { color: var(--gris); opacity: 0.6; }
.incl td.max { background: var(--lampe); }
.planes { margin: 6px 0 12px; display: grid; gap: 8px; }
.planes div { display: grid; grid-template-columns: 9em minmax(0, 1fr); align-items: center; gap: 12px; }
.planes dt { color: var(--texte); }
.planes dd { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--papier); font-variant-numeric: tabular-nums; }
.planes .pl-bar { display: inline-block; height: 6px; width: var(--w); min-width: 2px; background: var(--fil-fort); }
.planes .on .pl-bar { background: var(--ocre); }
.nr-foot { margin-top: 36px; max-width: 46em; }
.nquick { margin-top: 36px; max-width: 46em; scroll-margin-top: 90px; }
.nquick h2 { margin: 6px 0 10px; }
.nquick-r { margin-top: 18px; max-width: 46em; }
.nlist-g { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-top: 1px solid var(--fil); border-left: 1px solid var(--fil); }
.nlist-g.wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.nlist-g li { border-right: 1px solid var(--fil); border-bottom: 1px solid var(--fil); }
.nlist-g a { display: grid; gap: 4px; height: 100%; padding: 18px 18px 20px; text-decoration: none; transition: background 0.3s; }
.nlist-g a:hover, .nlist-g a:focus-visible { background: rgba(242, 232, 208, 0.045); }
.nlist-g .zn { font: 400 1.5rem/1.1 var(--display); color: var(--papier); }
.nlist-g .zd { color: var(--gris); font-size: 0.9rem; }
.ltable, .mx { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ltable caption, .mx caption { caption-side: top; text-align: left; color: var(--gris); font-size: 0.9rem; padding-bottom: 10px; }
.ltable th, .ltable td { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--fil); text-align: left; }
.ltable th { font: 400 1.3rem var(--display); color: var(--papier); }
.ltable td { letter-spacing: 0.14em; color: var(--texte); }
.mx-wrap { overflow-x: auto; margin-top: 40px; }
.mx th, .mx td { border: 1px solid var(--fil); text-align: center; }
.mx th { padding: 6px 8px; font: 400 1.05rem var(--display); color: var(--papier); }
.mx td a { display: block; padding: 9px 7px; font-size: 0.9rem; color: var(--texte); text-decoration: none; }
.mx td a:hover, .mx td a:focus-visible { background: var(--lampe); color: var(--papier); }
@media (prefers-reduced-motion: reduce) { .nlist-g a { transition: none; } }
/* Impression : seulement sur une page qui affiche un thème (body.num-report), le reste du site s'imprime comme avant. */
@media print {
  body.num-report .top, body.num-report .menu, body.num-report .foot, body.num-report .skip, body.num-report .ncalc, body.num-report .page-head,
  body.num-report main > .sec:not(:has(.nreport)), body.num-report [data-print] { display: none !important; }
  html:has(body.num-report), body.num-report { background: #fff !important; }
  body.num-report .nreport, body.num-report .nreport * { color: #000 !important; background: none !important; border-color: #999 !important; text-shadow: none !important; }
  body.num-report .ntile, body.num-report .phases li, body.num-report .incl { break-inside: avoid; }
  body.num-report .nreport { margin: 0; border: 0; padding: 0; }
}
/* Numérologie, page Méthode : tableaux de règles (texte aligné à gauche) et tableaux de chiffres. */
.prose.wide { max-width: 72em; }
.mx.rules th, .mx.rules td { text-align: left; vertical-align: top; padding: 10px 14px; font: 400 0.95rem/1.45 var(--text); color: var(--texte); }
.mx.rules th[scope="row"] { color: var(--papier); white-space: nowrap; }
.mx.rules thead th { font: 400 1.05rem var(--display); color: var(--papier); }
.mx.stat td { padding: 7px 12px; font-size: 0.92rem; color: var(--texte); }
@media (max-width: 760px) { .mx.rules th[scope="row"] { white-space: normal; } }

/* En dernier, pour l'emporter sur les tailles de chaque bloc : sur téléphone, le texte d'accompagnement
   (aides, descriptions, légendes) ne descend pas sous 17 px. */
@media (max-width: 700px) { .meta, .field .hint, .opts .hint, .menu .m-d, .opt-d, .outils-d, .dfield .dpart label, .truth-k { font-size: 1.0625rem; } }
/* ---- Rubriques et Séléné (29/10) : lisibles d'abord, gros caractères, contrastes forts. ---- */
.theme-text, .chat-sec { padding-top: 0; }
.theme-tools { padding-top: 0; }
.theme-tools h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 0 0 clamp(16px, 2vw, 26px); }
.theme-more { color: var(--gris); }
.ask { padding-top: 0; }
.ask-in { max-width: 44em; border: 1px solid rgba(231, 182, 79, 0.45); padding: clamp(20px, 3.4vw, 40px); background: rgba(231, 182, 79, 0.04); }
.ask-in h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin: 0 0 0.4em; }
.ask-ia { color: var(--gris); margin: 0 0 18px; }
.ask-form { display: grid; gap: 10px; margin: 0 0 20px; }
.ask-form label { color: var(--papier); font-size: 1.08rem; font-weight: 500; }
.ask-form textarea { width: 100%; min-height: 110px; background: rgba(242, 232, 208, 0.05); color: var(--papier); border: 1px solid rgba(242, 232, 208, 0.5); padding: 12px 14px; font: 400 1.25rem/1.4 var(--text); border-radius: 0; }
.ask-form textarea:focus { outline: 2px solid var(--ocre); outline-offset: 1px; }
.ask-form .pod { justify-self: start; }
.ask-ex { margin: 0 0 8px; color: var(--gris); }
.ask-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ask-chips a { display: block; padding: 12px 14px; border: 1px solid var(--fil); color: var(--papier); text-decoration: none; font-size: 1.08rem; line-height: 1.35; }
.ask-chips a:hover, .ask-chips a:focus-visible { border-color: var(--ocre); background: rgba(231, 182, 79, 0.07); }

.chat { position: relative; max-width: 46em; display: grid; gap: 22px; }
.chat-shut { border: 1px solid var(--fil); padding: clamp(28px, 4vw, 44px) clamp(18px, 3vw, 34px) clamp(20px, 3vw, 30px); }
.chat-log { display: grid; gap: 16px; }
.chat-log:empty { display: none; }
.bulle { margin: 0; padding: 14px 18px; font-size: 1.2rem; line-height: 1.55; }
.bulle p { margin: 0 0 0.8em; }
.bulle p:last-child { margin-bottom: 0; }
.bulle-moi { justify-self: end; max-width: 85%; background: rgba(242, 232, 208, 0.09); color: var(--papier); border-left: 3px solid var(--papier); }
.bulle-selene { border-left: 3px solid var(--ocre); background: rgba(231, 182, 79, 0.06); color: var(--papier); }
.bulle-qui { display: block; font: 400 1rem/1.2 var(--display); color: var(--ocre); letter-spacing: 0.04em; margin-bottom: 6px; }
.bulle-attente { color: var(--gris); font-style: italic; }
.chat-form { display: grid; gap: 22px; }
.pills { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pills legend { color: var(--papier); font-size: 1.08rem; font-weight: 500; padding: 0; margin-bottom: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span { display: inline-block; min-height: 48px; padding: 12px 16px; border: 1px solid rgba(242, 232, 208, 0.4); color: var(--papier); font-size: 1.08rem; line-height: 1.2; }
.pill input:checked + span { background: var(--papier); color: #17120a; border-color: var(--papier); }
.pill input:focus-visible + span { outline: 2px solid var(--ocre); outline-offset: 3px; }
.chat-birth { border: 1px solid var(--fil); padding: 0 16px; }
.chat-birth[open] { padding-bottom: 18px; }
.chat-birth summary { cursor: pointer; padding: 14px 0; color: var(--papier); font-size: 1.08rem; }
.chat-birth[open] summary { margin-bottom: 4px; }
.chat-birth .field, .chat-birth .dfield { margin-top: 16px; }
.chat-birth > .hint { color: var(--gris); margin: 0; }
.chat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.chat-left { margin: 0; color: var(--gris); }
.chat-shut .tampon { top: -15px; }
@media (max-width: 700px) { .bulle { font-size: 1.15rem; padding: 12px 14px; } .bulle-moi { max-width: 100%; } }
.menu .m-g { margin: 26px 0 0; padding: 0 0 8px; border-bottom: 1px solid rgba(231, 182, 79, 0.4); color: var(--ocre); font: 400 1rem/1.2 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.menu .m-g:first-child { margin-top: 0; }
.ask-go { margin: 0 0 22px; }

/* ---- Expertes (29/10) : la personne d'abord (photo, nom, domaine), puis les preuves et le prix, puis l'action. ---- */
.xp-zone { padding-top: 0; }
.xp-zone h2, .xp-dom h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin: 0 0 10px; }
.xp-dom { margin: 0 0 clamp(36px, 5vw, 60px); }
.xp-dom h2 a { color: inherit; text-decoration: none; }
.xp-offre { color: var(--gris); max-width: 46em; margin: 0 0 20px; }
.xp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 18px; }
.xp { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 18px; border: 1px solid rgba(231, 182, 79, 0.4); background: rgba(231, 182, 79, 0.04); }
.xp-big { grid-template-columns: 120px minmax(0, 1fr); }
.xp-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 2px solid var(--ocre); display: block; }
.xp-photo-l { width: min(200px, 40vw); }
.xp-init { display: grid; place-items: center; background: rgba(242, 232, 208, 0.08); color: var(--papier); font: 400 2.4rem/1 var(--display); }
.xp-nom { margin: 0; font: 400 1.6rem/1.1 var(--display); }
.xp-nom a { color: var(--papier); text-decoration: none; }
.xp-spec { margin: 4px 0 8px; color: var(--ocre); }
.xp-spec a { color: inherit; }
.xp-acc { margin: 0 0 8px; color: var(--papier); font-style: italic; }
.xp-meta { margin: 0 0 4px; color: var(--gris); font-size: 1rem; }
.xp-etat::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--gris); vertical-align: 0.05em; }
.xp-etat.on { color: #b9e3a4; } .xp-etat.on::before { background: #7ccf5a; }
.xp-etat.busy::before { background: var(--ocre); }
.xp-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; }
.bulle-relais { margin: -6px 0 0; padding: 12px 16px; border: 1px dashed rgba(231, 182, 79, 0.55); color: var(--papier); font-size: 1.08rem; }
@media (max-width: 520px) { .xp, .xp-big { grid-template-columns: 72px minmax(0, 1fr); padding: 14px; } .xp-act .pod { width: 100%; text-align: center; } }
.xp-page { padding-top: 0; }
.xp-prix { color: var(--gris); font-size: 1rem; }
.xp-lien { margin: 8px 0 0; }
.xp[data-state="online"] .xp-etat { color: #b9e3a4; } .xp[data-state="online"] .xp-etat::before { background: #7ccf5a; }
.xp[data-state="busy"] .xp-etat::before { background: var(--ocre); }

/* ---- Photos d'ambiance (29/10) : grande image voilée sous l'en-tête des rubriques ; bloc visage de l'accueil. ---- */
.ph-photo { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(380px, 62vh, 620px); display: flex; flex-direction: column; justify-content: flex-end; }
.ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ph-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3, 4, 11, 0.55) 0%, rgba(3, 4, 11, 0.35) 35%, rgba(3, 4, 11, 0.88) 78%, var(--nuit) 100%); }
.ph-photo .page-head { padding-top: clamp(110px, 16vh, 170px); }
.ph-photo .lede { color: var(--papier); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.ph-photo h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.ph-credit { position: absolute; right: var(--gut); top: 92px; margin: 0; font-size: 0.78rem; color: rgba(242, 232, 208, 0.7); }
.visage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.visage-fig { margin: 0; position: relative; }
.visage-fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: 1px solid rgba(231, 182, 79, 0.45); }
.visage-fig figcaption { font-size: 0.78rem; color: var(--gris); margin-top: 6px; }
.visage-txt h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; margin: 0 0 14px; }
.visage-act { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
@media (max-width: 860px) { .visage { grid-template-columns: minmax(0, 1fr); } .ph-credit { top: auto; bottom: 8px; } }
.visage-fig img { object-position: 50% 38%; }
.visage-fig figcaption { color: var(--texte); font-size: 0.9rem; }
@media (max-width: 860px) { .ph-photo .page-head { padding-bottom: 44px; } }

/* ---- Prochaine étape et confiance (29/10) : une action claire, jamais vers une porte fermée. ---- */
.next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 28px; align-items: center; max-width: 46em; margin: clamp(30px, 4vw, 48px) 0 0; padding: clamp(18px, 2.6vw, 28px); border: 1px solid rgba(231, 182, 79, 0.55); background: linear-gradient(135deg, rgba(231, 182, 79, 0.12), rgba(231, 182, 79, 0.03)); }
.next-t { margin: 0 0 4px; font: 400 clamp(1.35rem, 2.2vw, 1.75rem)/1.15 var(--display); color: var(--papier); }
.next-s { margin: 0; color: var(--gris); }
.next-bar { display: none; }
@media (max-width: 700px) {
  .next { grid-template-columns: minmax(0, 1fr); }
  .next-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(3, 4, 11, 0.94); border-top: 1px solid rgba(231, 182, 79, 0.45); }
  .next-bar .pod { width: 100%; text-align: center; font-size: 1.02rem; }
  body:has(.next-bar) .foot { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  html:has(.next-bar) { scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}
.confiance { padding-top: 0; padding-bottom: 0; }
.confiance-l { list-style: none; margin: 0; padding: 18px 0; display: flex; flex-wrap: wrap; gap: 10px 34px; border-top: 1px solid var(--fil); border-bottom: 1px solid var(--fil); }
.confiance-l a { color: var(--papier); text-decoration: none; font-size: 1.05rem; }
.confiance-l a::before { content: "✓ "; color: var(--ocre); }
@media (max-width: 700px) { body:has(textarea:focus, input:focus) .next-bar { display: none; } }

/* ==== Refonte « cabinet chaleureux » (29/10) : violet profond et or, visages, phrases courtes, une action. ==== */
:root {
  --nuit: #140a24;
  --nuit-2: #1f1036;
  --violet: #3b1d5e;
  --or-clair: #f3cf73;
}
body { background: radial-gradient(120% 80% at 50% 0%, #2a1446 0%, var(--nuit) 55%) fixed, var(--nuit); }
.top { background: rgba(20, 10, 36, 0.86); backdrop-filter: blur(8px); }
.pod { border-radius: 999px; padding-left: 26px; padding-right: 26px; }
.pod.full { background: linear-gradient(180deg, var(--or-clair), var(--ocre)); color: #241233; border-color: transparent; font-weight: 500; box-shadow: 0 8px 24px rgba(231, 182, 79, 0.28); }
.pod.full:hover { background: linear-gradient(180deg, #ffe08f, var(--or-clair)); }
.cab-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(88vh, 760px); display: flex; align-items: flex-end; padding: 120px var(--gut) clamp(40px, 6vw, 72px); }
.cab-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; z-index: -2; }
.cab-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 10, 36, 0.95) 0%, rgba(20, 10, 36, 0.75) 42%, rgba(20, 10, 36, 0.15) 75%), linear-gradient(0deg, var(--nuit) 0%, transparent 35%); }
.cab-txt { max-width: 34rem; }
.cab-kicker { margin: 0 0 10px; color: var(--or-clair); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.85rem; }
.cab-hero h1 { margin: 0; font: 400 clamp(3rem, 7vw, 6rem)/0.98 var(--display); color: #fff7e6; }
.cab-sub { margin: 18px 0 0; font-size: clamp(1.15rem, 1.6vw, 1.35rem); color: var(--papier); max-width: 28rem; }
.cab-act { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.cab-act .pod { font-size: 1.1rem; min-height: 56px; }
.cab-proof { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--papier); font-size: 0.98rem; }
.cab-proof li::before { content: "✓ "; color: var(--or-clair); }
.cab-xps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.cab-xp { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--papier); text-decoration: none; }
.cab-xp img, .cab-xp span { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--violet); border: 2px solid var(--ocre); }
.cab-xp i.on { font-style: normal; color: #b9e3a4; font-size: 0.85rem; }
.cab-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 22px var(--gut) 8px; }
.cab-cats a { display: grid; justify-items: center; gap: 8px; padding: 18px 8px; border-radius: 18px; background: linear-gradient(180deg, rgba(59, 29, 94, 0.75), rgba(31, 16, 54, 0.75)); border: 1px solid rgba(243, 207, 115, 0.25); color: var(--papier); text-decoration: none; text-align: center; font-size: 1.02rem; line-height: 1.2; transition: transform 0.25s var(--ease), border-color 0.25s; }
.cab-cats a:hover, .cab-cats a:focus-visible { transform: translateY(-3px); border-color: var(--or-clair); }
.cab-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(243, 207, 115, 0.14); color: var(--or-clair); font-size: 1.6rem; }
@media (max-width: 860px) {
  .cab-hero { min-height: 92vh; padding-top: 96px; }
  .cab-img { object-position: 52% 40%; }
  .cab-veil { background: linear-gradient(0deg, rgba(20, 10, 36, 0.98) 0%, rgba(20, 10, 36, 0.82) 45%, rgba(20, 10, 36, 0.25) 100%); }
  .cab-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cab-act .pod { flex: 1 1 100%; text-align: center; }
}
.ph-act { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0 var(--gut) clamp(28px, 4vw, 48px); position: relative; }
.ph-act .pod { min-height: 54px; font-size: 1.08rem; }
.ph-photo .page-head h1 { font-size: clamp(2.8rem, 6.5vw, 5.4rem); line-height: 1; color: #fff7e6; }
.ph-photo .page-head .lede { font-size: clamp(1.2rem, 1.8vw, 1.45rem); max-width: 30rem; }
.theme-intro { font-size: 1.2rem; color: var(--papier); }
@media (max-width: 860px) { .ph-act .pod { flex: 1 1 100%; text-align: center; } }
.cab-cats + .hero { margin-top: 24px; }