/* ===========================================================================
   Oraclio — La Voie de l'Âme
   La feuille de style du site. Toutes les pages l'appellent :
   `<link rel="stylesheet" href="/css/site.css?v=10">`

   Identité : nuit indigo très profonde, or patiné, parchemin.
   Cinzel (titres gravés) + Cormorant Garamond (texte).

   Les polices sont servies PAR le site (`/polices/`), jamais par un tiers, et
   l'image aussi (`/images/fond.jpg`). Rien, sur ces pages, ne vient d'ailleurs.

   ⚠️ DEUX RÈGLES DE FABRICATION (apprises à l'usage) :
   1. **Aucun texte ne dépend d'une animation pour exister.** On n'anime que des
      positions ; jamais l'opacité d'un texte. (Une entrée en `opacity:0` rend le
      texte invisible dès que l'animation ne se joue pas.)
   2. **Le `?v=` change** dès que ce fichier change (les styles sont mis en cache
      un an par le serveur, c'est ce qui force la reprise) — **et toutes les
      pages doivent porter le même numéro**.
   =========================================================================== */

@font-face{
  font-family:"Cinzel";
  font-style:normal; font-weight:400 600; font-display:swap;
  src:url("/polices/cinzel-400-normal-latin.woff2?v=1") format("woff2");
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("/polices/cormorant-garamond-400-normal-latin.woff2?v=1") format("woff2");
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:italic; font-weight:400; font-display:swap;
  src:url("/polices/cormorant-garamond-400-italic-latin.woff2?v=1") format("woff2");
}

:root{
  --nuit:#05060d;
  --nuit-claire:#0b0d18;
  --or:#c9a961;
  --or-clair:#e8d3a2;
  --parchemin:#f0e9db;
  --gravure:"Cinzel", Georgia, "Times New Roman", serif;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --colonne:min(940px, 90vw);
  --lisere:rgba(201,169,97,.28);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--nuit); color:var(--parchemin);
  font-family:var(--serif); font-size:1.1rem; line-height:1.75;
  text-align:left; -webkit-font-smoothing:antialiased;
}
p{ margin:0 0 1.15rem; }
a{ color:var(--or-clair); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:.22em; }
:focus-visible{ outline:2px solid var(--or-clair); outline-offset:3px; }
img{ max-width:100%; height:auto; }
strong{ font-weight:600; color:var(--or-clair); }

/* ── Le texte justifié ──────────────────────────────────────────────────────
   Tout le texte de lecture est justifié : des bords nets des deux côtés, c'est
   ce que veut le propriétaire. La césure (`hyphens`) ne va pas sans le
   justifié — sans elle, la dernière ligne avant un mot long se creuse de
   grands trous. Elle suit la langue déclarée par la page (`lang="fr"`).

   Ce qui garde son alignement : les titres, le menu, le pied de page, les
   boutons, les libellés et les messages de formulaire, et les litanies (des
   vers d'une ligne, que justifier étirerait). Justifier une ligne courte ne
   change rien ; justifier un titre sur deux lignes écarte les mots. */
p, li, dd, blockquote, figcaption, .chapeau, .citation, .note-bas{
  text-align:justify;
  hyphens:auto; -webkit-hyphens:auto;
}
.cta__boite p, .pied p, .pied__mentions, .etat, .aide, .facultatif, label,
.litanie li, .format__lien, .facultatif span{
  text-align:inherit; hyphens:manual;
}

/* Sur un téléphone, la ligne est trop courte : le justifié y découpe des trous
   entre les mots (et Chrome ne sait pas couper les mots français sans
   dictionnaire de césure — ni sur Windows ni sur Linux). Sous 700 px, le texte
   repasse donc au fer à gauche : c'est la largeur, pas le goût, qui décide. */
@media (max-width:700px){
  p, li, dd, blockquote, figcaption, .chapeau, .citation, .note-bas{
    text-align:left;
  }
}

/* ── L'en-tête : le nom, la devise, la navigation ─────────────────────────── */
.entete{
  position:sticky; top:0; z-index:20;
  background:rgba(5,6,13,.97); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--lisere);
}
.entete__boite{
  width:var(--colonne); margin-inline:auto;
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.4rem 1.3rem;
  padding:.95rem 0;
}
.marque{
  font-family:var(--gravure); font-weight:600; font-size:1.05rem;
  letter-spacing:.22em; text-transform:uppercase; white-space:nowrap;
  color:var(--or-clair);
}
.marque:hover{ text-decoration:none; }
.devise{
  margin:0; font-family:var(--gravure); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; white-space:nowrap; color:rgba(232,211,162,.6);
}
.nav{
  margin-left:auto; display:flex; flex-wrap:wrap; gap:.3rem 1.1rem;
  font-family:var(--gravure); font-size:.76rem; letter-spacing:.13em;
  text-transform:uppercase;
}
.nav a{
  color:rgba(232,211,162,.84); padding:.35rem 0; white-space:nowrap;
  border-bottom:1px solid transparent;
}
.nav a:hover{ color:var(--or-clair); text-decoration:none; border-bottom-color:rgba(201,169,97,.45); }
.nav a[aria-current="page"]{ color:var(--or-clair); border-bottom-color:var(--or); }
.nav__contact{
  border:1px solid rgba(201,169,97,.68) !important; padding:.38rem .95rem !important;
  color:var(--or-clair) !important;
}
.nav__contact:hover{ background:rgba(201,169,97,.12); }

/* Le sous-menu des clés — ouvert le 28/09/2026, quand la deuxième page de clé est
   arrivée. Le menu ne pouvait plus porter une ligne de plus : la place libre sur la
   barre (940 px) est d'environ 160 px, et chaque page de clé en demande 90 à 130.
   « Les Piliers » s'ouvre donc sur la page qui les présente, puis sur chaque clé
   écrite, une par une. C'est un `<details>` : aucun script (le site n'en a aucun),
   une seule règle pour le clavier, le doigt et la souris, et le navigateur annonce
   lui-même ce qui est ouvert ou fermé. */
.nav__groupe{ position:relative; }
.nav summary{
  cursor:pointer; list-style:none; padding:.35rem 0; white-space:nowrap;
  border-bottom:1px solid transparent;
  color:rgba(232,211,162,.84); font:inherit; letter-spacing:inherit;
  text-transform:inherit;
}
.nav summary::-webkit-details-marker{ display:none; }
.nav summary::after{
  content:""; display:inline-block; width:.36em; height:.36em; margin-left:.5em;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:translateY(-.15em) rotate(45deg); transition:transform .18s ease;
}
.nav__groupe[open] summary::after{ transform:translateY(.08em) rotate(-135deg); }
.nav summary:hover{ color:var(--or-clair); border-bottom-color:rgba(201,169,97,.45); }
.nav summary[aria-current="page"]{ color:var(--or-clair); border-bottom-color:var(--or); }
.nav summary:focus-visible{ outline:1px solid var(--or); outline-offset:3px; }
.nav__liste{
  position:absolute; top:100%; left:0; z-index:20; min-width:15rem;
  display:flex; flex-direction:column; padding:.5rem 0;
  background:#0a0c18; border:1px solid rgba(201,169,97,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}
.nav__liste a{ padding:.5rem 1.1rem; border-bottom:0; }
.nav__liste a:hover{ background:rgba(201,169,97,.1); border-bottom:0; }
.nav__liste a[aria-current="page"]{ color:var(--or-clair); }

/* ── L'ouverture (page d'accueil) ─────────────────────────────────────────── */
.hero{ position:relative; overflow:hidden; background:var(--nuit); }
.hero__image{
  position:absolute; top:0; right:0; bottom:0; width:58%;
  background:url("/images/fond.jpg?v=1") 54% 54%/cover no-repeat;
  opacity:.92; filter:saturate(1.06) brightness(1.1);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 34%, #000 62%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 34%, #000 62%);
}
.hero__voile{
  position:absolute; inset:0;
  background:
    linear-gradient(95deg, rgba(5,6,13,.99) 0%, rgba(5,6,13,.96) 44%, rgba(5,6,13,.62) 78%, rgba(5,6,13,.5) 100%),
    radial-gradient(60% 70% at 82% 62%, rgba(201,169,97,.12), transparent 72%);
}
.hero__boite{
  position:relative; z-index:2; width:var(--colonne); margin-inline:auto;
  padding:clamp(3.4rem,9vw,6.4rem) 0 clamp(3rem,7vw,5rem);
}
.hero__titre{
  margin:0; max-width:26ch;
  font-family:var(--gravure); font-weight:400;
  font-size:clamp(1.75rem,3.9vw,3rem); line-height:1.16; letter-spacing:.02em;
  color:var(--parchemin); text-shadow:0 3px 30px rgba(0,0,0,.65);
}
.hero__sous{
  margin:1.5rem 0 0; max-width:52ch;
  font-size:clamp(1.08rem,1.6vw,1.3rem); font-style:italic;
  color:rgba(240,233,219,.84);
}
.hero__actions{ margin-top:2.1rem; display:flex; flex-wrap:wrap; gap:.9rem 1rem; }

/* ── Le bandeau des pages intérieures ─────────────────────────────────────── */
.bandeau{ position:relative; overflow:hidden; border-bottom:1px solid var(--lisere); }
.bandeau__image{
  position:absolute; inset:0;
  background:url("/images/fond.jpg?v=1") 76% 62%/cover no-repeat;
  opacity:.26; filter:saturate(1.05) brightness(1.02) blur(1.3px);
}
.bandeau__voile{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(5,6,13,.98) 0%, rgba(5,6,13,.95) 42%, rgba(5,6,13,.8) 72%, rgba(5,6,13,.6) 100%),
    radial-gradient(55% 70% at 80% 60%, rgba(201,169,97,.1), transparent 72%);
}
.bandeau__boite{
  position:relative; z-index:2; width:var(--colonne); margin-inline:auto;
  padding:clamp(2.4rem,5.5vw,3.6rem) 0 clamp(2rem,4.5vw,3rem);
}
.bandeau__titre{
  margin:0; max-width:30ch;
  font-family:var(--gravure); font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.18; letter-spacing:.03em;
  color:var(--parchemin); text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.bandeau__sous{
  margin:1.1rem 0 0; max-width:56ch;
  font-size:clamp(1.02rem,1.5vw,1.2rem); font-style:italic;
  color:rgba(240,233,219,.78);
}

.filet{
  width:clamp(64px,9vw,116px); height:2px; margin:1.3rem 0 0;
  background:linear-gradient(90deg, var(--or-clair), rgba(201,169,97,.05));
}

/* ── Le corps des pages ───────────────────────────────────────────────────── */
.corps{ width:var(--colonne); margin-inline:auto; padding:clamp(2.6rem,6vw,4.4rem) 0; }
.corps--serre{ padding-bottom:clamp(2rem,4vw,3rem); }

.titre-2{
  margin:0 0 1.1rem; font-family:var(--gravure); font-weight:400;
  font-size:clamp(1.35rem,2.5vw,1.9rem); line-height:1.26; letter-spacing:.03em;
  color:var(--or-clair);
}
.titre-3{
  margin:0 0 .8rem; font-family:var(--gravure); font-weight:400;
  font-size:clamp(1.12rem,1.9vw,1.42rem); line-height:1.34; letter-spacing:.02em;
  color:var(--parchemin);
}
.chapeau{
  font-size:clamp(1.12rem,1.7vw,1.28rem); font-style:italic;
  color:rgba(240,233,219,.86);
}
.bloc{ margin:0 0 clamp(2.4rem,5vw,3.4rem); }
.bloc:last-child{ margin-bottom:0; }
.bloc--texte{ max-width:68ch; }

/* Les listes des pages de texte (politique de confidentialité, mentions légales) */
.liste{ margin:0 0 1.2rem; padding-left:1.25rem; }
.liste li{ margin:0 0 .5rem; }
.liste li::marker{ color:rgba(201,169,97,.85); }

/* ── Les cartes et les encadrés ───────────────────────────────────────────── */
.encadre{
  background:rgba(255,255,255,.024); border:1px solid rgba(201,169,97,.3);
  padding:clamp(1.3rem,3.4vw,2.2rem);
}
.encadre--serre{ padding:clamp(1.1rem,2.6vw,1.6rem) clamp(1.2rem,3vw,1.8rem); }

.piliers{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; }
@media (min-width:900px){ .piliers{ grid-template-columns:1fr 1fr; } }
.pilier-court{
  border:1px solid rgba(201,169,97,.26); background:rgba(255,255,255,.02);
  padding:1.3rem 1.4rem 1.1rem;
}
.pilier-court__titre{
  margin:0 0 .5rem; font-family:var(--gravure); font-weight:400;
  font-size:1.02rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--or-clair);
}
.pilier-court p{ margin:0; font-size:1.02rem; color:rgba(240,233,219,.86); }

/* ── Les cinq piliers détaillés ───────────────────────────────────────────── */
.pilier{ margin:0 0 clamp(2.6rem,5vw,3.8rem); padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid rgba(201,169,97,.22); }
.pilier:first-of-type{ border-top:0; padding-top:0; }
.pilier__titre{
  margin:0 0 1rem; font-family:var(--gravure); font-weight:400;
  font-size:clamp(1.22rem,2.2vw,1.62rem); line-height:1.3; letter-spacing:.02em;
  color:var(--or-clair);
}
.pilier__bloc{ margin:0 0 1.1rem; }
.pilier__annonce{
  margin:0 0 .8rem; font-family:var(--gravure); font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(232,211,162,.72);
}
.reveles{ list-style:none; margin:0; padding:0; }
.reveles li{
  position:relative; margin:0 0 .95rem; padding-left:1.5rem;
  color:rgba(240,233,219,.9);
}
.reveles li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; background:var(--or); transform:rotate(45deg);
}
.reveles strong{ color:var(--or-clair); }

/* ── Les formats de consultation ────────────────────────────────────────────
   Deux cartes, côte à côte sur grand écran, empilées sur petit. Chacune se lit
   comme une page : son titre, sa durée annoncée, son texte, et deux lignes de
   pied séparées par un filet — la signature (ce que dure le format) et le lien
   pour le choisir. Le lien reste collé en bas, pour que les deux cartes
   s'alignent même quand leurs textes n'ont pas la même longueur.            */
.formats{ display:grid; gap:clamp(1.1rem,2.4vw,1.6rem); align-items:stretch; }
@media (min-width:900px){ .formats{ grid-template-columns:1fr 1fr; } }
.format{
  display:flex; flex-direction:column;
  border:1px solid rgba(201,169,97,.26); background:rgba(255,255,255,.02);
  padding:clamp(1.3rem,2.6vw,1.7rem) clamp(1.3rem,2.8vw,1.8rem) 1.4rem;
  margin:0 0 1.1rem;
}
.formats .format{ margin:0; }
.format__titre{
  margin:0 0 .45rem; font-family:var(--gravure); font-weight:400;
  font-size:clamp(1.08rem,1.7vw,1.24rem); letter-spacing:.05em; color:var(--or-clair);
}
.format .format__annonce{
  margin:0 0 1.05rem; font-family:var(--gravure); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(232,211,162,.72);
}
.format p{ margin:0 0 .85rem; }
.format p:last-child{ margin-bottom:0; }
.format .strophe{ margin:0 0 1rem; }
.format .fort{ font-size:clamp(1.02rem,1.45vw,1.16rem); }
.format .format__liste{ margin:0 0 1rem; }
.format .format__signature{
  margin:0; padding-top:1.1rem; border-top:1px solid rgba(201,169,97,.18);
  font-family:var(--gravure); font-size:clamp(.84rem,1.25vw,.96rem);
  line-height:1.5; letter-spacing:.06em; color:var(--or-clair);
}
.format .format__lien{
  margin:auto 0 0; padding-top:1.15rem; border-top:1px solid rgba(201,169,97,.18);
}
.format .format__lien a{ font-size:.78rem; }

/* ── Les boutons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-block; padding:.82rem 1.8rem; cursor:pointer;
  font-family:var(--gravure); font-weight:600; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
  color:var(--nuit); background:linear-gradient(180deg, var(--or-clair), var(--or));
  border:1px solid var(--or-clair); border-radius:0; text-align:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); box-shadow:0 6px 22px rgba(201,169,97,.26); }
.btn--ligne{
  color:var(--or-clair); background:transparent; border-color:rgba(201,169,97,.55);
}
.btn--ligne:hover{ background:rgba(201,169,97,.12); box-shadow:none; }

/* ── L'appel final ────────────────────────────────────────────────────────── */
.cta{
  border-top:1px solid var(--lisere); background:var(--nuit-claire);
}
.cta__boite{
  width:var(--colonne); margin-inline:auto; text-align:center;
  padding:clamp(2.4rem,5.5vw,3.6rem) 0;
}
.cta__titre{
  margin:0 auto 1.5rem; max-width:34ch; font-family:var(--gravure); font-weight:400;
  font-size:clamp(1.25rem,2.4vw,1.8rem); line-height:1.3; color:var(--or-clair);
}
.cta__actions{ display:flex; flex-wrap:wrap; gap:.85rem 1rem; justify-content:center; }
/* La phrase de fin de page, avec ses liens dedans (les mots restent ceux du
   propriétaire : on ne met en lien que ce qu'il a écrit). */
.cta__phrase{
  margin:0 auto; max-width:60ch; font-size:clamp(1.08rem,1.8vw,1.28rem);
  color:rgba(240,233,219,.9);
}
.cta__phrase a{ color:var(--or-clair); border-bottom:1px solid rgba(201,169,97,.5); }
.cta__phrase a:hover{ text-decoration:none; border-bottom-color:var(--or-clair); }

/* ── Le pied de page ──────────────────────────────────────────────────────── */
.pied{ border-top:1px solid rgba(201,169,97,.22); background:var(--nuit-claire); }
.pied__boite{
  width:var(--colonne); margin-inline:auto; padding:1.8rem 0;
  display:flex; flex-wrap:wrap; gap:.7rem 1.4rem; align-items:baseline;
  justify-content:space-between;
}
.pied__nav{ display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; }
.pied__lien{
  font-family:var(--gravure); font-weight:600; font-size:.84rem;
  letter-spacing:.13em; text-transform:uppercase; color:#e9d6aa;
}
.pied__signature{
  margin:0; font-family:var(--gravure); font-size:.8rem; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(232,211,162,.84);
}
/* La signature et, discrètement en dessous, les pages obligatoires. */
.pied__fin{ display:flex; flex-direction:column; gap:.35rem; }
/* Depuis le 28/09/2026, le pied de page porte les treize adresses du site : la
   liste prend toute la largeur et passe à la ligne. La signature et les mentions
   légales se rangent donc à droite de leur propre ligne (`margin-left:auto`), au
   lieu de rester collées à droite de la liste, qui n'a plus la place. */
@media (min-width:821px){ .pied__fin{ align-items:flex-end; text-align:right; margin-left:auto; } }
.pied__mentions{ margin:0; font-size:.78rem; letter-spacing:.02em; color:rgba(240,233,219,.5); }
.pied__mentions a{ color:rgba(240,233,219,.58); border-bottom:1px solid rgba(201,169,97,.24); }
.pied__mentions a:hover{ color:var(--or-clair); border-bottom-color:var(--or-clair); text-decoration:none; }
.pied__point{ margin:0 .5rem; color:rgba(201,169,97,.45); }

/* ── Le formulaire ────────────────────────────────────────────────────────── */
.formulaire{
  background:rgba(255,255,255,.024); border:1px solid rgba(201,169,97,.3);
  padding:clamp(1.4rem,4vw,2.6rem);
}
.champ{ margin:0 0 1.55rem; }
.champ label,.legende{
  display:block; font-family:var(--gravure); font-weight:400;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(232,211,162,.82); margin:0 0 .5rem;
}
.champ input[type=text],.champ input[type=email],.champ input[type=tel],
.champ select,.champ textarea{
  width:100%; padding:.62rem .2rem; color:var(--parchemin);
  font-family:var(--serif); font-size:1.08rem; line-height:1.5;
  background:transparent; border:0; border-bottom:1px solid rgba(201,169,97,.42);
  border-radius:0; appearance:none;
}
.champ textarea{ border:1px solid rgba(201,169,97,.42); padding:.7rem .8rem;
  min-height:10rem; resize:vertical; }
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none; border-color:var(--or-clair);
  box-shadow:0 1px 0 0 var(--or-clair), 0 0 18px rgba(201,169,97,.18);
}
.champ input::placeholder,.champ textarea::placeholder{
  color:rgba(240,233,219,.34); font-style:italic; }
.aide{ margin:.45rem 0 0; font-size:1rem; font-style:italic; color:rgba(240,233,219,.78); }
.facultatif{ font-size:.9em; font-style:italic; text-transform:none; letter-spacing:.02em;
  color:rgba(240,233,219,.62); }

.consentement{ display:flex; gap:.7rem; align-items:flex-start; margin:1.7rem 0 0;
  font-size:1rem; color:rgba(240,233,219,.78); cursor:pointer; }
.consentement input{ flex:0 0 auto; width:1.1rem; height:1.1rem; margin:.34rem 0 0;
  cursor:pointer; appearance:none; -webkit-appearance:none;
  border:1px solid var(--or); background-color:transparent; }
.consentement input:hover{ border-color:var(--or-clair); }
.consentement input:checked{
  border-color:var(--or); background-color:var(--or);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.4 L5 9 L9.6 3.4' fill='none' stroke='%2305060d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:100% 100%; background-repeat:no-repeat; }

.piege{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.champ input:-webkit-autofill,.champ textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--parchemin);
  box-shadow:0 0 0 1000px var(--nuit-claire) inset;
  transition:background-color 9999s ease-out 0s; }

.bouton{
  display:inline-flex; align-items:center; gap:.7rem;
  margin-top:1.55rem; padding:.86rem 2rem; cursor:pointer; white-space:nowrap;
  font-family:var(--gravure); font-weight:600; font-size:.82rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--nuit); background:linear-gradient(180deg, var(--or-clair), var(--or));
  border:1px solid var(--or-clair); border-radius:0;
  transition:transform .18s ease, box-shadow .18s ease;
}
.bouton:hover{ transform:translateY(-1px); box-shadow:0 6px 22px rgba(201,169,97,.26); }
.bouton[disabled]{ cursor:default; opacity:.62; transform:none; box-shadow:none; }

.points{ display:none; gap:.22rem; }
.formulaire[data-envoi="en-cours"] .points{ display:inline-flex; }
.points i{ width:.3rem; height:.3rem; border-radius:50%; background:var(--nuit); }
@media (prefers-reduced-motion: no-preference){
  .points i{ animation:point .9s infinite ease-in-out; }
  .points i:nth-child(2){ animation-delay:.15s; }
  .points i:nth-child(3){ animation-delay:.3s; }
  @keyframes point{ 0%,60%,100%{ transform:none; } 30%{ transform:translateY(-4px); } }
}

.etat{ margin:1.3rem 0 0; min-height:1.5rem; font-style:italic; font-size:1.04rem; }
.etat[data-genre="bien"]{ color:#cfe4c4; }
.etat[data-genre="mal"]{ color:#efb8ae; }
.etat[data-genre="attente"]{ color:rgba(240,233,219,.72); }

.note-bas{
  margin:2.2rem 0 0; padding-top:1.4rem; border-top:1px solid rgba(201,169,97,.24);
  font-size:1.02rem; font-style:italic; color:rgba(240,233,219,.7);
}

/* ── La page d'accueil : les longs textes ─────────────────────────────────────
   L'accueil est fait de mouvements suivis : des questions, des strophes de
   quelques lignes, des cartes, et deux litanies centrées. Ces quelques classes
   servent à donner le rythme — **ses mots, eux, ne changent pas**.
   - `.questions` : les questions d'ouverture, en retrait derrière un filet d'or
   - `.strophe`   : deux ou trois lignes courtes qui vont ensemble (vers)
   - `.fort`      : les phrases qu'il a mises en gras (en or, un peu plus grandes)
   - `.choeur`    : les litanies, isolées du texte qui les précède et les suit
   - `.litanie`   : les énumérations (« Libre d'évoluer. », « Une pause. »)
   - `.lien-or`   : un lien doré mis en forme comme un bouton, dans le fil du texte
   - `.filet--separation` : le filet qui marque la fin d'un mouvement
   - `.bloc--serre` : deux blocs qui vont ensemble, avec moins d'air entre eux      */

.bloc--serre{ margin-bottom:clamp(1.5rem,3vw,2.1rem); }
.filet--separation{ margin:0 0 clamp(2.4rem,5vw,3.4rem); }

.questions{
  border-left:2px solid rgba(201,169,97,.34);
  padding-left:clamp(1.1rem,3vw,1.7rem);
}
.questions p{
  margin:0 0 .95rem; font-size:clamp(1.08rem,1.7vw,1.24rem);
  color:rgba(240,233,219,.9);
}
.questions p:last-child{ margin-bottom:0; }

.strophe{ margin:0 0 1.35rem; }
.strophe p{
  margin:0 0 .42rem; font-size:clamp(1.06rem,1.7vw,1.2rem);
  color:rgba(240,233,219,.88);
}
.strophe p:last-child{ margin-bottom:0; }
.strophe + p{ margin-top:0; }

.fort{
  font-size:clamp(1.1rem,1.85vw,1.3rem); line-height:1.5;
  color:var(--or-clair);
}
.encadre .fort{ margin-bottom:0; }

.choeur{ margin:clamp(1.5rem,3.4vw,2.3rem) 0; }
.choeur p{ margin:0 0 .5rem; }
.choeur p:last-child{ margin-bottom:0; }

/* La page « les piliers » : les « ce que cette clé explore » dont le titre tient
   sa propre ligne (le texte les écrit ainsi). */
.reveles--ligne strong{ display:block; margin-bottom:.15rem; }

/* La phrase de fin d'un pilier, quand son texte la donne en encadré (« > »). */
.citation{
  margin:1.7rem 0 0; padding:.95rem 1.3rem;
  border-left:2px solid rgba(201,169,97,.45); background:rgba(255,255,255,.022);
  font-family:var(--gravure);
  font-size:clamp(1rem,1.7vw,1.16rem); line-height:1.5;
  color:var(--or-clair);
}

.litanie{ list-style:none; margin:0; padding:0; }
.litanie li{
  margin:0 0 .35rem; font-family:var(--gravure); font-weight:400;
  font-size:clamp(1.14rem,2.2vw,1.55rem); line-height:1.45;
  letter-spacing:.04em; color:var(--or-clair);
}
.litanie li:last-child{ margin-bottom:0; }
.litanie--serre li{
  font-size:clamp(1.04rem,1.8vw,1.3rem);
  color:rgba(240,233,219,.92);
}

.lien-or{
  color:var(--or-clair); border-bottom:1px solid rgba(201,169,97,.5);
  font-family:var(--gravure); font-weight:600; font-size:.82rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.lien-or:hover{ text-decoration:none; border-bottom-color:var(--or-clair); }
.lien-or--seul{ display:inline-block; margin-top:1.6rem; }

/* Un lien au fil d'une phrase (les pages de texte renvoient ainsi à une autre
   page sans casser la lecture) — et les questions fréquentes, qui se lisent
   comme une suite de questions posées, chacune suivie de sa réponse. */
.lien-texte{ border-bottom:1px solid rgba(201,169,97,.5); }
.lien-texte:hover{ text-decoration:none; border-bottom-color:var(--or-clair); }

.faq{ margin:0; }
.faq__item{
  margin:0 0 clamp(1.5rem,3vw,2rem); padding-top:clamp(1.2rem,2.6vw,1.7rem);
  border-top:1px solid rgba(201,169,97,.2);
}
.faq__item:first-of-type{ padding-top:0; border-top:0; }
.faq__item:last-of-type{ margin-bottom:0; }
.faq__q{
  margin:0 0 .7rem; font-family:var(--gravure); font-weight:400;
  font-size:clamp(1.04rem,1.85vw,1.28rem); line-height:1.34;
  letter-spacing:.02em; color:var(--or-clair);
}
.faq__r{ margin:0; max-width:68ch; color:rgba(240,233,219,.92); }

/* Les cartes des cinq « ✦ » et des quatre traditions : deux phrases par carte. */
.pilier-court p + p{ margin-top:.6rem; }
/* Cinq cartes sur une grille de deux : la cinquième prend toute la largeur,
   pour ne pas laisser de case vide. */
@media (min-width:900px){ .piliers--cinq > li:last-child:nth-child(odd){ grid-column:1 / -1; } }

/* L'appel final, quand il porte deux phrases avant ses boutons. */
.cta__phrase + .cta__phrase{ margin-top:.9rem; }
.cta__phrase--suite{ margin-top:.15rem !important; }
.cta__phrase + .cta__actions{ margin-top:2rem; }

/* ── Petits écrans ────────────────────────────────────────────────────────── */
@media (max-width:820px){
  body{ font-size:1.06rem; }
  .entete{ position:static; }
  .entete__boite{ padding:.9rem 0; gap:.35rem 1rem; }
  .nav{
    margin-left:0; width:100%; gap:.25rem .9rem; font-size:.66rem;
    letter-spacing:.12em;
    /* Le sous-menu : sur un téléphone il ne peut pas s'ouvrir sous « Les Piliers »
       (le bord de l'écran serait dépassé). Il s'ouvre donc sous la barre entière,
       à la largeur de l'écran — d'où ces deux `position`, qui donnent la barre
       pour repère au panneau. */
    position:relative;
  }
  .nav__groupe{ position:static; }
  .nav__liste{ left:0; right:0; min-width:0; }
  .devise{ display:none; }
  .hero__image{
    width:100%; opacity:.5;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 45%, transparent 78%);
            mask-image:linear-gradient(to bottom, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 45%, transparent 78%);
    background-position:70% 40%;
  }
  .hero__voile{
    background:
      linear-gradient(180deg, rgba(5,6,13,.72) 0%, rgba(5,6,13,.86) 46%, rgba(5,6,13,.97) 100%),
      radial-gradient(70% 50% at 70% 30%, rgba(201,169,97,.1), transparent 70%);
  }
  .hero__titre{ max-width:none; }
  .corps{ padding:2.4rem 0 3rem; }
  .bandeau__titre{ max-width:none; }
  /* Les libellés longs (« En savoir plus sur la consultation ») ne tiennent pas
     sur une ligne à cette largeur : on les laisse passer à la ligne plutôt que
     de les laisser déborder du bouton. */
  .btn{ width:100%; white-space:normal; letter-spacing:.12em; padding:.8rem 1.1rem; }
  .cta__actions{ flex-direction:column; }
  .pied__boite{ flex-direction:column; align-items:flex-start; gap:.8rem; }
  /* Le pied de page porte les treize adresses du site (les sept pages + les six
     pages de clé) : sur un téléphone, une colonne ferait une liste trop longue.
     Deux colonnes, et le tour est joué. */
  .pied__nav{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem .9rem; }
}

/* ── Les exemples à écouter (page /exemples/) ─────────────────────────────── */
/* Quatre cartes, une par personne : le nom, le repère public (date et lieu de
   naissance) et le lecteur. Le lecteur est celui du navigateur : aucune
   bibliothèque, aucun script venu d'ailleurs. */
.exemples{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(1.1rem,2.4vw,1.6rem); }
@media (min-width:900px){ .exemples{ grid-template-columns:1fr 1fr; } }
.exemple{
  border:1px solid rgba(201,169,97,.26); background:rgba(255,255,255,.02);
  padding:1.3rem 1.4rem 1.2rem;
  display:flex; flex-direction:column;
}
.exemple__nom{
  margin:0 0 .4rem; font-family:var(--gravure); font-weight:400;
  font-size:1.06rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--or-clair);
}
.exemple__repere{
  margin:0 0 1rem; font-size:.86rem; letter-spacing:.06em;
  color:rgba(240,233,219,.62);
}
/* Le texte que le propriétaire écrit sous le lecteur (facultatif) : il est
   rempli depuis /admin/, et la page le pose ici, un paragraphe par ligne vide. */
.exemple__texte{ margin:0 0 1.1rem; font-size:1rem; line-height:1.7; color:rgba(240,233,219,.86); }
.exemple__texte p{ margin:0 0 .6rem; }
.exemple__texte p:last-child{ margin-bottom:0; }
.lecteur{ display:block; width:100%; margin-top:auto; color-scheme:dark; }
/* La durée, écrite sous le lecteur quand elle est connue (elle l'est dès que
   le fichier a été déposé depuis /admin/). */
.exemple__duree{
  margin:.7rem 0 0; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(201,169,97,.6);
}