/* Feuille commune aux pages ouvertes à tous, créées le 27/09/2026 :
   lettre.html, voix.html, est-ce-normal.html, ou-j-en-suis.html.
   Mêmes couleurs que le reste du site. Les pages « est-ce-normal » et
   « ou-j-en-suis » ne chargent aucune police extérieure : rien ne part
   ailleurs que chez Hetadam. Les polices du site servent si elles sont
   chargées par la page (lettre, voix) ; sinon, Georgia et la police du système. */

:root {
  --ink: #16312A; --ink-deep: #102420;
  --parchment: #F2EFE6; --parchment-soft: #EAE6D9; --papier: #FBF9F3;
  --gold: #B8893C; --gold-soft: #C9A05A; --gold-texte: #86602A; --sage: #7E9489;
  --text: #20302A; --text-soft: #4E5C54;
  --on-dark: #ECE7D9; --on-dark-soft: #B9C3B9;
  --trait: rgba(32,48,42,.15);
  --vert: #5E8C61; --orange: #C9853A; --rouge: #B5523B;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); background: var(--parchment); color: var(--text);
       line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.wrap { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 1.25rem; }
.display { font-family: var(--display); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; }
.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-texte); }

/* ---- bandeau ---- */
/* Le texte du bandeau reste DANS l'anneau : titre + une phrase, pas plus (Régis, 28/09). */
.hero { background: var(--ink); color: var(--on-dark); position: relative; overflow: hidden; text-align: center;
        min-height: calc(min(90vw, 500px) + 4rem); display: flex; align-items: center; justify-content: center; padding: 2rem 0; }
.hero-ring { position: absolute; top: 50%; left: 50%; width: min(90vw, 500px); height: min(90vw, 500px);
             transform: translate(-50%, -50%); pointer-events: none; }
.hero .hero-inner { max-width: min(64vw, 340px); padding: 0; }
.hero-ring circle { fill: none; stroke: var(--gold); stroke-width: 3; opacity: .55; stroke-linecap: round; }
.hero-ring .ring-point { fill: var(--gold); stroke: none; opacity: 1; }
.hero-ring .ring-logo { transform-box: view-box; transform-origin: 280px 280px; animation: ring-tourne 60s linear infinite; }
@keyframes ring-tourne { to { transform: rotate(360deg); } }
.hero-inner { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--gold-soft); display: block; margin-bottom: 1.3rem; }
.hero .eyebrow { margin-bottom: 1rem; }
.hero h1 { font-size: clamp(1.9rem, 7vw, 2.8rem); margin-bottom: 1rem; }
.hero .lede { font-family: var(--display); font-style: italic; font-size: clamp(1rem, 3.6vw, 1.2rem);
              line-height: 1.45; margin: 0 auto; }
.hero .sous-lede { color: var(--on-dark-soft); max-width: 46ch; margin: 1.1rem auto 0; font-size: .98rem; }
.hero .retour { position: absolute; top: 1.2rem; left: 1.2rem; z-index: 2; width: 2.6rem; height: 2.6rem;
                border-radius: 50%; display: flex; align-items: center; justify-content: center;
                border: 1px solid rgba(184,137,60,.45); color: var(--gold-soft); text-decoration: none; font-size: 1.35rem; }
.hero .retour:hover { background: var(--gold); color: var(--ink-deep); }

/* le retour vers l'espace, pour un membre reconnu (espace.js) */
.espace-membre { position: absolute; top: 1.2rem; right: 1.2rem; z-index: 2; display: inline-flex; align-items: center; padding: .55rem 1.1rem;
  border-radius: 999px; border: 1px solid rgba(184,137,60,.45); color: var(--gold-soft); font-size: .8rem; font-weight: 500; letter-spacing: .05em; text-decoration: none; }
.espace-membre:hover { background: var(--gold); color: var(--ink-deep); }

/* ---- sections ---- */
section { padding: clamp(2.8rem, 8vh, 4.5rem) 0; }
section + section { padding-top: 0; }
h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 4.6vw, 1.95rem); line-height: 1.2; margin-bottom: .9rem; }
h3 { font-family: var(--display); font-weight: 500; font-size: 1.2rem; margin: 1.6rem 0 .5rem; }
p + p { margin-top: .85rem; }
.intro { font-size: 1.06rem; }
.doux { color: var(--text-soft); }
.petit { font-size: .88rem; color: var(--text-soft); }
ul.points { margin: .6rem 0 0 1.1rem; }
ul.points li { margin: .35rem 0; }

.cadre { background: var(--papier); border: 1px solid var(--trait); border-radius: 6px; padding: 1.4rem 1.3rem;
         box-shadow: 0 1px 2px rgba(22,49,42,.04), 0 10px 28px -14px rgba(22,49,42,.22); }
.encart { border-left: 3px solid var(--gold); background: var(--parchment-soft); padding: 1rem 1.1rem; border-radius: 0 6px 6px 0; }
.encart.fort { border-left-color: var(--rouge); background: #F6EAE4; }

/* ---- boutons ---- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: inherit; font-weight: 600;
          font-size: .98rem; background: var(--ink); color: var(--on-dark); border: 1px solid var(--ink);
          padding: .8rem 1.5rem; border-radius: 999px; cursor: pointer; text-decoration: none;
          transition: background .2s ease, color .2s ease, transform .2s ease; }
.bouton:hover { background: var(--ink-deep); }
.bouton.or { background: var(--gold); border-color: var(--gold); color: var(--ink-deep); }
.bouton.or:hover { background: var(--gold-soft); }
.bouton.leger { background: transparent; color: var(--ink); border-color: rgba(22,49,42,.28); }
.bouton.leger:hover { background: var(--ink); color: var(--on-dark); }
.bouton:disabled { opacity: .45; cursor: default; }
.bouton:focus-visible, .puce:focus-within, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.rangee { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }

.puces { display: flex; flex-wrap: wrap; gap: .5rem; }
.puce { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--trait); border-radius: 999px;
        padding: .45rem .9rem; font-size: .92rem; cursor: pointer; background: #fff; }
.puce input { accent-color: var(--ink); }
button.puce { font: inherit; font-size: .92rem; color: inherit; }
button.puce:hover { border-color: var(--gold); }

/* ---- numéros ---- */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; margin-top: 1rem; }
.numero { display: block; text-decoration: none; background: #fff; border: 1px solid var(--trait); border-radius: 6px; padding: .8rem 1rem; }
.numero:hover { border-color: var(--gold); }
.numero strong { display: block; font-family: var(--display); font-size: 1.45rem; font-weight: 500; color: var(--ink); line-height: 1.2; }
.numero span { font-size: .88rem; color: var(--text-soft); line-height: 1.45; display: block; }

/* ---- plis ---- */
details.pli { border-top: 1px solid var(--trait); }
details.pli:last-of-type { border-bottom: 1px solid var(--trait); }
details.pli > summary { list-style: none; cursor: pointer; padding: 1rem .2rem; font-family: var(--display); font-size: 1.15rem;
                        display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
details.pli > summary::-webkit-details-marker { display: none; }
details.pli > summary::after { content: "+"; color: var(--gold); font-family: var(--body); }
details.pli[open] > summary::after { content: "–"; }
details.pli .corps { padding: 0 .2rem 1.2rem; }

/* ---- réglettes (du vert au violet) ---- */
.reglettes { display: grid; gap: 1.4rem; margin-top: 1.2rem; }
@media (min-width: 1000px) { .reglettes.trois { grid-template-columns: repeat(3, 1fr); } }
.reglette { background: #fff; border: 1px solid var(--trait); border-radius: 8px; overflow: hidden; break-inside: avoid; }
.reglette > header { padding: 1rem 1.1rem .7rem; }
.reglette > header h3 { margin: 0; }
.reglette > header p { font-size: .88rem; color: var(--text-soft); line-height: 1.5; }
.reglette .source { font-style: italic; font-size: .8rem; margin-top: .3rem; }
.zone { display: grid; grid-template-columns: 10px 1fr; }
.zone .couleur { background: var(--vert); }
.zone.jaune .couleur { background: #E3C23A; }
.zone.orange .couleur { background: var(--orange); }
.zone.rouge .couleur { background: var(--rouge); }
.zone.violet .couleur { background: #7B3F98; }
.zone .contenu { padding: .7rem 1rem; border-top: 1px solid var(--trait); }
.zone .titre-zone { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); margin-bottom: .3rem; }
.zone ul { list-style: none; }
.zone li { padding: .12rem 0 .12rem 1rem; position: relative; line-height: 1.5; font-size: .95rem; }
.zone li::before { content: "·"; position: absolute; left: .2rem; color: var(--gold); font-weight: 700; }
.zone .faire { margin-top: .45rem; font-size: .9rem; color: var(--text-soft); }
.zone .faire strong { color: var(--text); }
.reglette > footer { padding: .7rem 1.1rem; border-top: 1px solid var(--trait); font-size: .88rem; font-weight: 500; }
.reglette .imprimer-une { font: inherit; font-size: .82rem; color: var(--text-soft); background: none; border: 0; border-bottom: 1px solid var(--trait); cursor: pointer; margin-top: .4rem; padding: 0; }
@media print {
  .zone .couleur { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.imprimer-seule .reglette:not(.a-imprimer), body.imprimer-seule section:not(.contient-imprimee) { display: none !important; }
  .imprimer-une { display: none; }
}

/* ---- pied ---- */
.pied { background: var(--ink-deep); color: var(--on-dark-soft); text-align: center; padding: 3rem 0 2.4rem; font-size: .9rem; }
.pied .signature { font-family: var(--display); font-style: italic; color: var(--on-dark); font-size: 1.1rem; margin-bottom: 1rem; }
.pied a { color: var(--on-dark-soft); }
.pied .ia { margin-top: 1rem; font-size: .76rem; opacity: .8; max-width: 60ch; margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  .hero-ring .ring-logo { animation: none; }
  * { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .hero, .pied, .rangee, .sans-impression { display: none !important; }
  body { background: #fff; }
}