/* Site éditorial Alma Sancta — colonne de lecture papier posée sur un fond nuit.
   Toutes les couleurs sont des variables (aucune couleur écrite ailleurs). Deux familles : Marcellus (titres), Source Serif 4 (texte). */

@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/marcellus-latin.woff2) format('woff2'); unicode-range: U+0000-002F, U+003A-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: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/source-serif-4-latin.woff2) format('woff2'); 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: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/source-serif-4-italic-latin.woff2) format('woff2'); 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; }

:root {
  /* Système de design (brief) */
  --nuit: #1D1228;            /* fond de page, barre, pied */
  --papier: #F6F1E6;          /* colonne de lecture, carte du formulaire */
  --papier-clair: #FFFDF8;    /* cartes posées sur le papier */
  --encre: #2A2233;           /* texte courant sur papier */
  --encre-2: #4A4055;         /* légendes, libellés, résumés */
  --filet: #D9CFBD;           /* séparateurs, bordures de cartes */
  --bordure-champ: #8B7F96;   /* contour des champs */
  --prune: #7A3B69;           /* boutons, liens, titres d'articles */
  --prune-fonce: #5A2A4D;     /* survol */
  --prune-clair: #8E4A7B;     /* encarts et bloc offre, texte blanc dessus */
  --or: #E7CE94;              /* marque, bouton du menu, soulignement actif */
  --texte-nuit: #EDE6F5;      /* texte courant sur nuit */
  --liens-nuit: #F3E3BD;      /* liens du menu */
  /* Nuances reprises des maquettes */
  --blanc: #FFFFFF;
  --titre-nuit: #FBF7EE;      /* grand titre de l'accueil */
  --texte-nuit-2: #D8CEE6;    /* texte secondaire sur nuit */
  --texte-nuit-3: #B9AECB;    /* mention de bas de page */
  --texte-sur-prune: #FBEFF7; /* texte secondaire sur prune clair */
  --trait-nuit: #5B4368;      /* bordure de la barre */
  --trait-nuit-2: #3A2946;    /* séparation du menu sur mobile */
  --or-survol: #F3DDA8;       /* survol du bouton du menu */
  --texte-bouton-or: #2A1A33; /* texte du bouton du menu */
  --erreur: #8A1F2B;
  --texte-nuit-4: #857A97;   /* mentions de bas de page, très discrètes */
  --texte-nuit-5: #6E6482;   /* avertissement tout en bas, le plus discret (lisible, contraste 3,2:1 sur la nuit) */
  --prune-12: rgba(122, 59, 105, 0.12); /* aplat d'accent des dessins */
  --ombre-barre: rgba(8, 4, 24, 0.45);
  --ombre-carte: rgba(8, 4, 24, 0.55);

  --titres: 'Marcellus', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --texte: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.site { margin: 0; background: var(--nuit); color: var(--texte-nuit); font-family: var(--texte); font-size: 18px; line-height: 1.65; overflow-x: hidden; hyphens: manual; }
/* Ancres : la barre collée en haut (66 px sur une ligne) ne masque jamais le titre visé. Barre sur deux lignes
   (téléphone : 111 px) : voir le bloc 820 px. */
[id] { scroll-margin-top: 96px; }
img { max-width: 100%; height: auto; }
/* Lu par les lecteurs d'écran, invisible à l'écran (annonce du résultat de l'outil). */
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
a { color: var(--prune); text-underline-offset: 2px; }
a:hover { color: var(--prune-fonce); }
h1, h2, h3 { font-family: var(--titres); font-weight: 400; line-height: 1.2; color: var(--encre); }
p, li, dd { text-align: left; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; box-shadow: 0 0 0 2px var(--nuit); }

/* Lien d'évitement (clavier) */
.evitement { position: absolute; left: 16px; top: -100px; z-index: 50; padding: 10px 16px; background: var(--or); color: var(--texte-bouton-or); font-weight: 600; border-radius: 4px; text-decoration: none; }
.evitement:focus { top: 12px; }

/* Bannière (accueil uniquement) */
.banniere { line-height: 0; }
.banniere img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; max-height: 380px; object-fit: cover; object-position: center 40%; }

/* Barre de menu, collée en haut */
.barre { position: sticky; top: 0; z-index: 10; background: var(--nuit); border-top: 1px solid var(--trait-nuit); border-bottom: 1px solid var(--trait-nuit); box-shadow: 0 8px 24px var(--ombre-barre); }
.barre-in { max-width: 1120px; margin: 0 auto; padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 32px; }
.marque { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--titres); font-size: 22px; color: var(--or); text-decoration: none; }
a.marque:hover { color: var(--or); }
.etoile { fill: var(--or); flex: 0 0 auto; }
.menu { display: flex; align-items: center; gap: 0 30px; font-size: 17px; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; color: var(--liens-nuit); text-decoration: none; padding: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.menu a:hover { color: var(--blanc); border-bottom-color: var(--or); }
.menu a[aria-current="page"] { border-bottom-color: var(--or); }
.barre-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; font-size: 16px; font-weight: 600; color: var(--texte-bouton-or); background: var(--or); border-radius: 4px; text-decoration: none; }
.barre-cta:hover { background: var(--or-survol); color: var(--texte-bouton-or); }
.barre-lettre { position: static; box-shadow: none; }
.barre-lettre .barre-in { justify-content: center; }

/* Accueil : titre + outil */
.accueil { max-width: 1120px; margin: 0 auto; padding: 48px 24px 88px; display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px; }
.accueil-texte { flex: 1 1 420px; min-width: 0; }
.surtitre { margin: 0 0 16px; color: var(--or); font-size: 17px; }
.accueil h1 { margin: 0; font-size: clamp(36px, 5vw, 60px); line-height: 1.12; color: var(--titre-nuit); }
.accueil-intro { margin: 24px 0 0; max-width: 34em; color: var(--texte-nuit-2); }

/* Outil ange gardien : carte papier */
.outil { flex: 1 1 380px; min-width: 0; background: var(--papier); color: var(--encre); border-radius: 6px; padding: 36px 32px; box-shadow: 0 24px 60px var(--ombre-carte); }
.outil h2 { margin: 0 0 20px; font-size: 26px; line-height: 1.25; }
.outil-date { display: flex; flex-wrap: wrap; gap: 16px; }
.champ-jour { flex: 1 1 100px; } .champ-mois { flex: 2 1 180px; } .champ-annee { flex: 1 1 110px; }
.outil-form > .champ { margin-top: 16px; }
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ label, .resultat-label { font-size: 15px; color: var(--encre-2); }
.site input[type="text"], .site input[type="email"], .site input[type="number"], .site select, .site textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; color: var(--encre); background: var(--blanc); border: 1px solid var(--bordure-champ); border-radius: 4px; }
.site textarea { resize: vertical; min-height: 160px; }
.site [aria-invalid="true"] { border-color: var(--erreur); border-width: 2px; }
.erreur { margin: 12px 0 0; font-size: 16px; color: var(--erreur); }
.outil .btn-plein { margin-top: 20px; width: 100%; }
.resultat { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--filet); }
.resultat-sur { margin: 0; font-size: 16px; color: var(--encre-2); }
.resultat-nom { margin: 4px 0 0; font-family: var(--titres); font-size: 40px; line-height: 1.15; color: var(--prune); }
.resultat-rang { margin: 6px 0 20px; font-size: 16px; color: var(--encre-2); }
.resultat-label { display: block; margin-bottom: 6px; }
.consentement { margin: 12px 0 0; font-size: 15px; color: var(--encre-2); }
.resultat .btn-contour { margin-top: 12px; width: 100%; }
.reassurance { margin: 20px 0 0; font-size: 15px; color: var(--encre-2); }
.piege { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Boutons */
.btn, .btn-plein { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 28px; font: inherit; font-weight: 600; color: var(--blanc); background: var(--prune); border: 0; border-radius: 4px; text-decoration: none; cursor: pointer; }
.btn:hover, .btn-plein:hover { background: var(--prune-fonce); color: var(--blanc); }
.btn-contour { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 20px; font: inherit; font-weight: 600; color: var(--prune); background: transparent; border: 2px solid var(--prune); border-radius: 4px; cursor: pointer; }
.btn-contour:hover { color: var(--prune-fonce); border-color: var(--prune-fonce); }
.btn-papier { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 28px; font-weight: 600; color: var(--prune-fonce); background: var(--papier); border-radius: 4px; text-decoration: none; }
.btn-papier:hover { color: var(--prune-fonce); background: var(--papier-clair); }
.btn-inactif { opacity: .65; cursor: not-allowed; }
.lien-fort { font-weight: 600; }
/* Liens isolés (hors d'une phrase) : cible tactile de 44 px au moins, comme le menu et le pied de page. */
.lien-fort, .ariane a, .signature a, .pied-marque a, .contact-aside p > a, .erreur-resume a { display: inline-flex; align-items: center; min-height: 44px; }

/* Colonne papier */
.papier { max-width: 880px; margin: 40px auto 0; background: var(--papier); color: var(--encre); border-radius: 6px; padding: 64px clamp(24px, 6vw, 88px) 80px; }
.papier-accueil { margin-top: 0; border-radius: 6px 6px 0 0; padding-top: 72px; padding-bottom: 88px; }
.papier-court { max-width: 720px; }
.papier h1 { margin: 0; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.15; }
.chapeau { margin: 16px 0 0; max-width: 36em; font-size: 20px; color: var(--encre-2); }
.chapeau-petit { margin: 16px 0 0; font-size: 16px; color: var(--encre-2); }
.chapeau-section { margin: 0 0 20px; color: var(--encre-2); }
.papier h2 { font-size: 30px; line-height: 1.25; }
.vide { color: var(--encre-2); font-style: italic; padding: 18px 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); margin: 0; }
.pastille { display: inline-block; margin-left: 8px; padding: 0 8px; font-family: var(--texte); font-size: 15px; color: var(--encre); background: var(--or); border-radius: 4px; vertical-align: middle; }

/* Accueil : Alma, Livre, témoignages */
.alma-apercu { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; }
.alma-apercu-texte { flex: 1 1 320px; min-width: 0; }
.alma-apercu h2, .section-livre h2, .section-temoignages h2 { margin: 0 0 16px; font-size: 34px; }
.alma-apercu p { margin: 0 0 16px; }
.section-livre, .section-temoignages { margin-top: 88px; }
.section-livre .chapeau-section { margin-bottom: 32px; }
.portrait { flex: 0 0 220px; width: 220px; height: 280px; object-fit: cover; border-radius: 4px; }
.portrait-grand { flex-basis: 240px; width: 240px; height: 310px; }
.portrait-vide { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-size: 15px; color: var(--encre-2); border: 1px dashed var(--bordure-champ); }
.portrait-rond { flex: 0 0 88px; width: 88px; height: 88px; border-radius: 50%; font-size: 15px; }

/* Listes d'articles */
.lignes { display: flex; flex-direction: column; }
.ligne { display: block; padding: 20px 0; border-top: 1px solid var(--filet); text-decoration: none; color: var(--encre); }
.lignes .ligne:last-child { border-bottom: 1px solid var(--filet); }
.ligne-titre { display: block; font-family: var(--titres); font-size: 24px; line-height: 1.3; color: var(--prune); }
.ligne:hover .ligne-titre { text-decoration: underline; color: var(--prune-fonce); }
.ligne-resume { display: block; margin-top: 6px; font-size: 16px; color: var(--encre-2); }
.section-livre > p:last-child, .partager { margin: 24px 0 0; }

/* Témoignages */
.temoignages-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 40px; }
.temoignages-deux { margin-top: 32px; gap: 32px 48px; }
.temoignage { margin: 0; padding: 24px; background: var(--papier-clair); border: 1px solid var(--filet); border-radius: 6px; }
.temoignage p { margin: 0 0 12px; font-style: italic; }
.temoignage footer { font-size: 16px; color: var(--encre-2); }

/* Bandeau et encarts prune clair */
.bandeau-prune { margin-top: 72px; background: var(--prune-clair); color: var(--blanc); border-radius: 6px; padding: 40px clamp(24px, 5vw, 48px); text-align: center; }
.papier-accueil .bandeau-prune { margin-top: 88px; }
.bandeau-prune h2 { margin: 0 0 12px; font-size: 30px; color: var(--blanc); }
.bandeau-prune p { margin: 0 0 24px; color: var(--texte-sur-prune); text-align: center; }
.encart { margin: 40px 0; padding: 28px clamp(20px, 4vw, 36px); background: var(--prune-clair); color: var(--blanc); border-radius: 6px; }
.encart p { margin: 0 0 18px; font-size: 18px; color: var(--texte-sur-prune); }
.encart .encart-titre { margin: 0 0 6px; font-family: var(--titres); font-size: 26px; line-height: 1.25; color: var(--blanc); }

/* Livre des Anges */
.rubriques { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 12px; font-size: 16px; }
.rubriques a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--prune); border-radius: 4px; text-decoration: none; }
.carte-avant { margin-top: 48px; padding: 32px clamp(20px, 4vw, 40px); background: var(--papier-clair); border: 1px solid var(--filet); border-radius: 6px; }
.carte-avant-sur { margin: 0 0 8px; font-size: 16px; color: var(--encre-2); }
.carte-avant h2 { margin: 0 0 12px; font-size: clamp(26px, 3.4vw, 36px); }
.carte-avant h2 a { text-decoration: none; }
.carte-avant p { margin: 0 0 20px; }
.section-rubrique { margin-top: 64px; }
.section-rubrique h2 { margin: 0 0 6px; }
.section-rubrique .ligne-titre, .a-lire .ligne-titre { font-size: 23px; }
.section-rubrique .ligne, .a-lire .ligne { padding: 18px 0; }

/* Colonne de lecture (articles, lettres de vente, textes) */
.lecture { max-width: 34em; margin: 0 auto; font-size: 20px; line-height: 1.7; }
.lecture p, .lecture ul, .lecture ol { margin: 0 0 24px; }
.lecture li { margin-bottom: 8px; }
.lecture h2 { margin: 48px 0 16px; font-size: 30px; line-height: 1.25; }
.lecture h3 { margin: 32px 0 8px; font-family: var(--texte); font-size: 21px; font-weight: 600; line-height: 1.35; }
.lecture a { text-decoration: underline; }
.lecture hr { border: 0; border-top: 1px solid var(--filet); margin: 40px 0; }
.ariane { margin: 0 0 16px; font-size: 16px; }
.ariane span { color: var(--encre-2); }
.signature-haut { margin: 20px 0 40px; font-size: 16px; color: var(--encre-2); }
.signature { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--filet); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; font-size: 17px; }
.signature p { margin: 0; }
.signature-nom { font-family: var(--titres); font-size: 22px; }
.a-lire { max-width: 34em; margin: 64px auto 0; }
.a-lire h2 { margin: 0 0 16px; }
/* Article : chapeau, encarts, sources, cartes du Livre des Anges */
.article-chapeau { margin: 20px 0 0; font-size: 21px; line-height: 1.6; color: var(--encre); font-weight: 600; }
.lecture .signature-haut a { text-decoration: none; }
.sources { margin: 56px 0 0; padding-top: 24px; border-top: 1px solid var(--filet); font-size: 16px; line-height: 1.6; color: var(--encre-2); }
.sources h3 { margin: 0 0 12px; font-family: var(--titres); font-size: 20px; font-weight: 400; color: var(--encre-2); }
.lecture .sources ul { padding-left: 1.1em; margin: 0; }
.lecture .sources li { margin-bottom: 6px; }
.sources a { color: var(--encre-2); overflow-wrap: anywhere; }
.cartes { display: grid; gap: 0; }
.carte-article { padding: 20px 0; border-top: 1px solid var(--filet); }
.cartes .carte-article:last-child { border-bottom: 1px solid var(--filet); }
.carte-article h3 { margin: 0; font-family: var(--titres); font-size: 23px; font-weight: 400; line-height: 1.3; }
.carte-article h3 a { color: var(--prune); text-decoration: none; }
.carte-article h3 a:hover { text-decoration: underline; color: var(--prune-fonce); }
.carte-article p { margin: 6px 0 0; font-size: 16px; color: var(--encre-2); }
.carte-article .carte-temps { margin-top: 8px; font-size: 15px; }
.liens-404 { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Dessins en SVG : couleurs et polices du site uniquement (classes f-*), lisibles dès 390 px */
.fig { margin: 40px 0; }
.fig-dessin svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig-large { display: none; }
@media (min-width: 821px) { .fig-etroit { display: none; } .fig-large { display: block; } }
.fig figcaption { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--encre-2); text-align: center; }
.fig .f-titre { font-family: var(--titres); fill: var(--encre); }
.fig .f-texte { font-family: var(--texte); fill: var(--encre); }
.fig .f-discret { font-family: var(--texte); fill: var(--encre-2); }
.fig .f-accent { fill: var(--prune); }
.fig .f-blanc { fill: var(--blanc); }
.fig .f-fond { fill: var(--papier-clair); }
.fig .f-aplat { fill: var(--prune-12); }
.fig .f-trait { fill: none; stroke: var(--filet); }
.fig .f-trait-fort { fill: none; stroke: var(--bordure-champ); }
.fig .f-trait-accent { fill: none; stroke: var(--prune); }
.fig .f-hebreu { font-family: 'SBL Hebrew', 'Ezra SIL', 'Taamey Frank CLM', 'Times New Roman', 'Noto Serif Hebrew', 'David', 'Arial Hebrew', serif; direction: rtl; unicode-bidi: plaintext; }

.figure { margin: 32px 0; }
.figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.figure figcaption { margin-top: 8px; font-size: 16px; color: var(--encre-2); }
/* Planches anciennes : l'image telle quelle (aucun filtre), sur papier clair, cernée d'un filet fin ; légende en italique */
.figure.planche { margin: 40px 0; padding: 14px; background: var(--papier-clair); border: 1px solid var(--filet); }
.figure.planche img { border-radius: 0; }
.figure.planche figcaption { margin-top: 12px; font-size: 16px; line-height: 1.5; font-style: italic; color: var(--encre-2); }
.figure.planche figcaption em { font-style: normal; }

/* Lettrine prune sur trois lignes au premier paragraphe, étoile à quatre branches entre les sections */
.corps-article > p:first-of-type::first-letter { float: left; margin: 6px 10px 0 0; font-family: var(--titres); font-size: 4.6em; line-height: 0.82; color: var(--prune); }
.corps-article > h2:not(:first-child)::before, .corps-article > hr::before { content: ''; display: block; width: 20px; height: 20px; margin: 0 auto 32px; background: var(--prune); clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); }
.corps-article > hr { border: 0; height: auto; margin: 40px 0; }
.corps-article > h2:not(:first-child) { margin-top: 56px; }
.citation { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--prune-clair); font-style: italic; }
.citation p:last-child { margin-bottom: 0; }
.citation footer { margin-top: 8px; font-style: normal; font-size: 17px; color: var(--encre-2); }

/* Page Alma */
.alma-tete { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; }
.alma-tete > div { flex: 1 1 320px; min-width: 0; }
.alma-tete .chapeau { font-size: 21px; }
.alma-texte { margin: 56px 0 0; }
.alma-texte h2:first-child { margin-top: 0; }
.signature-alma { margin: 40px 0 0; font-family: var(--titres); font-size: 26px; color: var(--prune); }
.signature-alma img { display: block; width: 220px; max-width: 100%; height: auto; }   /* même signature que les e-mails */

/* Contact */
.contact-grille { display: flex; flex-wrap: wrap; gap: 48px 56px; align-items: flex-start; margin-top: 40px; }
.contact-form { flex: 3 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.contact-form label { font-size: 16px; }
.contact-form .btn-plein { align-self: flex-start; }
.erreur-resume { padding: 16px 20px; border: 2px solid var(--erreur); border-radius: 4px; background: var(--papier-clair); color: var(--erreur); }
.erreur-resume p { margin: 0; font-weight: 600; }
.erreur-resume ul { margin: 4px 0 0; padding-left: 20px; }
.erreur-resume a { color: var(--erreur); }
.contact-aside { flex: 2 1 240px; min-width: 0; font-size: 17px; }
.contact-aside h2 { margin: 0 0 16px; font-size: 24px; }
.contact-aside p { margin: 0 0 4px; }
.contact-aside p + h2 { margin-top: 28px; }
.faq { margin: 0; }
.faq dt { margin: 0 0 4px; font-weight: 600; }
.faq dd { margin: 0 0 18px; }

/* Informations légales */
.legal { margin-left: 0; }
.legal section { margin-top: 56px; }
.legal section h2 { margin-top: 0; }
.legal h3 { margin: 24px 0 6px; font-size: 19px; }

/* Lettres de vente */
.site-lettre .lettre h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.15; }
.lettre-chapeau { margin: 20px 0 40px; font-size: 22px; line-height: 1.55; color: var(--encre-2); }
.encadre { margin: 40px 0; padding: 28px clamp(20px, 4vw, 36px); border-radius: 6px; }
.encadre > :last-child { margin-bottom: 0; }
.encadre-temoignage { background: var(--papier-clair); border: 1px solid var(--filet); font-style: italic; }
.encadre-garantie { background: var(--papier-clair); border: 2px solid var(--prune); }
.encadre-garantie h2 { margin-top: 0; }
.encadre-ps { padding: 0; border-radius: 0; }
.encadre-encadre { background: var(--papier-clair); border: 1px solid var(--filet); }
.offre { margin: 48px 0; padding: 36px clamp(24px, 5vw, 48px); background: var(--prune-clair); color: var(--blanc); border-radius: 6px; text-align: center; }
.offre-nom { margin: 0 0 8px; font-family: var(--titres); font-size: 30px; line-height: 1.25; color: var(--blanc); text-align: center; }
.offre-prix { margin: 0 0 24px; font-size: 24px; font-weight: 600; color: var(--blanc); text-align: center; }
.offre-alerte { margin: 16px 0 0; font-size: 16px; color: var(--texte-sur-prune); text-align: center; }

/* Pied de page */
.pied { max-width: 880px; margin: 0 auto; padding: 48px 24px 64px; font-size: 16px; color: var(--texte-nuit-2); }
.pied-in { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; }
.pied-marque { flex: 1 1 280px; min-width: 0; }
.pied-marque p { margin: 0; }
.pied a { color: var(--texte-nuit); }
.pied a:hover { color: var(--blanc); }
.marque-pied { margin: 0 0 8px !important; font-family: var(--titres); font-size: 22px; color: var(--or); }
.pied-liens { display: flex; flex-direction: column; gap: 0; }
.pied-liens a { display: inline-flex; align-items: center; min-height: 44px; }
.pied-avert { margin: 32px 0 0; font-size: 15px; color: var(--texte-nuit-3); }
.apercu-admin { position: fixed; left: 12px; bottom: 12px; z-index: 60; margin: 0; padding: 8px 12px; font-size: 15px; font-weight: 600; color: var(--texte-bouton-or); background: var(--or); border-radius: 4px; }

/* Ordinateur étroit (821 à 980 px) : barre resserrée pour tenir sur une ligne ; si elle passe quand même sur deux
   lignes (police agrandie, barre de défilement), la marge des ancres couvre ses 116 px. */
@media (min-width: 821px) and (max-width: 980px) {
  [id] { scroll-margin-top: 128px; }
  .barre-in { gap: 6px 16px; padding: 10px 16px; }
  .marque { font-size: 20px; gap: 8px; }
  .menu { gap: 0 14px; font-size: 16px; }
  .barre-cta { padding: 8px 12px; font-size: 15px; }
}

/* Téléphone (820 px et moins) */
@media (max-width: 820px) {
  /* Barre sur deux lignes (111 px) : les titres visés par une ancre restent sous la barre. */
  [id] { scroll-margin-top: 128px; }
  .barre-in { padding: 8px 16px; gap: 4px 12px; flex-wrap: wrap; }
  .marque { font-size: 20px; gap: 8px; }
  .barre-cta { padding: 8px 14px; font-size: 15px; }
  .menu { order: 3; flex: 1 1 100%; flex-wrap: wrap; justify-content: center; gap: 0 18px; font-size: 16px; margin: 0 -16px; padding: 0 16px; border-top: 1px solid var(--trait-nuit-2); scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .banniere img { aspect-ratio: auto; max-height: none; }
  .accueil { padding: 32px 16px 56px; gap: 32px; }
  .outil { padding: 28px 20px; }
  .papier { margin-top: 24px; border-radius: 6px 6px 0 0; padding: 40px 20px 56px; }
  .papier-accueil { margin-top: 0; }
  .portrait, .portrait-grand { flex-basis: 100%; width: 100%; max-width: 280px; height: 300px; }
  .section-livre, .section-temoignages { margin-top: 64px; }
  .pied { padding: 40px 16px 56px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* Livre des Anges en parcours de chapitres : ouverture illustrée, cartes illustrées, porte vers l'outil */
.papier-large { max-width: 1040px; }
.livre-tete { max-width: 40em; }
.surtitre-chapitre { margin: 0 0 8px; font-family: var(--texte); font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--prune); }
.surtitre-article { margin-bottom: 12px; }
.ouverture { display: grid; grid-template-columns: 1fr; margin-top: 40px; background: var(--papier-clair); border: 1px solid var(--filet); border-radius: 6px; overflow: hidden; }
.ouverture-image { display: block; background: var(--papier); }
.ouverture-image img { display: block; width: 100%; height: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.ouverture-texte { padding: 28px clamp(20px, 4vw, 40px) 32px; }
.ouverture h2 { margin: 0 0 14px; font-size: clamp(28px, 3.6vw, 38px); line-height: 1.2; }
.ouverture h2 a { color: var(--encre); text-decoration: none; }
.ouverture h2 a:hover { color: var(--prune); }
.ouverture-resume { margin: 0 0 24px; font-size: 18px; line-height: 1.6; color: var(--encre-2); }
.ouverture-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; font-size: 15px; color: var(--encre-2); }
@media (min-width: 821px) {
  .ouverture { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  .ouverture-image img { aspect-ratio: auto; min-height: 100%; }
  .ouverture-texte { display: flex; flex-direction: column; justify-content: center; padding: 40px 44px; }
}
.parcours { margin-top: 64px; }
.parcours-titre { margin: 0 0 24px; font-size: 28px; }
.grille-chapitres { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .grille-chapitres { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grille-chapitres.grille-trois { grid-template-columns: repeat(3, 1fr); } }
.carte-chapitre { display: flex; }
.carte-chapitre-lien { display: flex; flex-direction: column; width: 100%; background: var(--papier-clair); border: 1px solid var(--filet); border-radius: 6px; overflow: hidden; color: var(--encre); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.carte-chapitre-lien:hover { transform: translateY(-3px); border-color: var(--bordure-champ); box-shadow: 0 10px 24px -14px var(--ombre-carte); }
.carte-chapitre-lien:focus-visible { outline: 3px solid var(--prune); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .carte-chapitre-lien { transition: none; } .carte-chapitre-lien:hover { transform: none; } }
.carte-chapitre-image { background: var(--papier); border-bottom: 1px solid var(--filet); }
.carte-chapitre-image img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.carte-chapitre-texte { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 18px; }
.carte-chapitre-titre { margin: 0 0 10px; font-family: var(--titres); font-size: 23px; font-weight: 400; line-height: 1.3; color: var(--encre); }
.carte-chapitre-lien:hover .carte-chapitre-titre { color: var(--prune); }
.carte-chapitre-resume { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: var(--encre-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carte-chapitre-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--filet); font-size: 15px; color: var(--encre-2); }
.carte-chapitre-cta { font-weight: 600; color: var(--prune); white-space: nowrap; }
.carte-outil { display: flex; flex-direction: column; justify-content: center; padding: 28px 26px; background: var(--prune-clair); color: var(--blanc); border-radius: 6px; }
.carte-outil .carte-outil-sur { margin: 0 0 8px; font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-sur-prune); }
.carte-outil .carte-outil-titre { margin: 0 0 10px; font-family: var(--titres); font-size: 26px; line-height: 1.25; color: var(--blanc); }
.carte-outil p { margin: 0 0 18px; font-size: 16px; color: var(--texte-sur-prune); }
.carte-outil .btn-papier { align-self: flex-start; }
.suite-chapitre { max-width: 34em; margin: 64px auto 0; }
.suite-sur { margin: 0 0 12px; font-family: var(--titres); font-size: 26px; }
.suite-chapitre .carte-chapitre-titre { font-size: 28px; }
.a-lire { max-width: 34em; margin: 56px auto 0; }
.livre-tous { margin-top: 28px; }
.liste-chapitres { display: grid; gap: 16px; }
.liste-chapitres .carte-chapitre-lien { flex-direction: row; }
.liste-chapitres .carte-chapitre-image { flex: 0 0 34%; border-bottom: 0; border-right: 1px solid var(--filet); }
.liste-chapitres .carte-chapitre-image img { height: 100%; aspect-ratio: auto; min-height: 120px; }
.liste-chapitres .carte-chapitre-texte { padding: 14px 16px; }
.liste-chapitres .carte-chapitre-titre { font-size: 20px; margin-bottom: 6px; }
.liste-chapitres .carte-chapitre-resume { -webkit-line-clamp: 2; margin-bottom: 8px; }
@media (max-width: 520px) { .liste-chapitres .carte-chapitre-resume { display: none; } .liste-chapitres .carte-chapitre-pied { border-top: 0; padding-top: 4px; } }
@media (max-width: 820px) { .portrait.portrait-rond { flex: 0 0 72px; width: 72px; max-width: 72px; height: 72px; font-size: 11px; } }
.carte-chapitre-pied { flex-wrap: wrap; }
.carte-chapitre-pied span:first-child { white-space: nowrap; }

/* Accueil sur ordinateur : bandeau proportionné à la HAUTEUR de l'écran (≈ 1/3), pour que l'outil soit visible sans défiler.
   Recadrage centré sur le visage et le logo (bande centrale de l'image). */
@media (min-width: 821px) {
  .banniere img { aspect-ratio: auto; height: clamp(170px, 32vh, 340px); max-height: none; object-position: center center; }
  .accueil { align-items: flex-start; padding-top: clamp(24px, 4.5vh, 48px); gap: 32px 56px; }
  .accueil-texte { padding-top: 8px; }
  .accueil h1 { font-size: clamp(34px, 3.6vw, 52px); }
  .outil { padding: 28px 30px 30px; }
  .outil h2 { margin-bottom: 14px; font-size: 24px; }
}
@media (min-width: 821px) and (max-height: 820px) {
  .accueil-intro { margin-top: 16px; }
  .outil-form > .champ { margin-top: 12px; }
}
@media (min-width: 821px) {
  /* Jour, mois et année sur une seule ligne dans la carte de l'outil. */
  .champ-jour { flex-basis: 70px; } .champ-mois { flex-basis: 140px; } .champ-annee { flex-basis: 90px; }
}
@media (min-width: 821px) and (max-height: 800px) {
  /* Écrans d'ordinateur peu hauts (portables 720 à 800 px) : bandeau plus court, haut de page resserré, pour que le
     bouton de l'outil (date, lieu, email) reste visible sans défiler. */
  .banniere img { height: clamp(120px, 21vh, 340px); }
  .accueil { padding-top: 20px; }
  .accueil .surtitre { margin-bottom: 8px; }
}
/* Portrait d’Alma : visage toujours dans le cadre (haut de la photo) */
img.portrait { object-position: center 22%; }
img.portrait-rond { object-position: center 18%; }

/* Pied de page discret : petit, en sourdine, liens sur une ligne ; avertissement plus petit et plus sombre */
.pied { max-width: 1040px; padding: 28px 24px 36px; font-size: 15px; line-height: 1.5; color: var(--texte-nuit-3); border-top: 1px solid var(--trait-nuit-2); margin-top: 48px; }
.pied-in { gap: 6px 32px; align-items: center; }
.pied-marque { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; flex: 1 1 auto; }
.marque-pied { margin: 0 !important; font-size: 16px; color: var(--texte-nuit-3); }
.pied a { color: var(--texte-nuit-3); text-decoration: none; }
.pied a:hover { color: var(--texte-nuit); text-decoration: underline; }
.pied-liens { flex-direction: row; flex-wrap: wrap; gap: 0 18px; }
.pied-liens a { min-height: 44px; }
.pied-marque a { min-height: 0; }
.pied-avert { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--texte-nuit-3); }
@media (max-width: 820px) { .pied { padding: 24px 16px 32px; margin-top: 32px; } .pied-liens { gap: 0 14px; } }

/* Lieu de naissance : liste de suggestions sous le champ */
.champ-lieu { position: relative; }
.lieu-liste { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin: 4px 0 0; padding: 4px 0; list-style: none; background: var(--papier-clair); border: 1px solid var(--bordure-champ); border-radius: 4px; box-shadow: 0 12px 28px -10px var(--ombre-carte); max-height: 320px; overflow-y: auto; }
.lieu-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; min-height: 44px; padding: 10px 14px; cursor: pointer; font-size: 17px; line-height: 1.35; color: var(--encre); }
.lieu-liste li[aria-selected="true"], .lieu-liste li:hover { background: var(--prune-12); }
.lieu-nom { font-weight: 600; }
.lieu-pays { font-size: 15px; color: var(--encre-2); }
.outil .reassurance { margin: 12px 0 0; text-align: center; font-size: 15px; color: var(--encre-2); }

/* Bloc d'appel « ange gardien » : portrait d'Alma à gauche, texte aligné à gauche */
.bandeau-prune.bandeau-ange { display: flex; align-items: center; gap: 64px; padding: 64px 72px; background: #4E2A4A; border-radius: 10px; box-shadow: 0 24px 60px rgba(27, 20, 40, 0.28); text-align: left; }
.bandeau-alma { flex: 0 0 auto; margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bandeau-alma-photo { display: block; width: 230px; height: 230px; object-fit: cover; object-position: center 18%; border-radius: 50%; border: 3px solid var(--or); box-shadow: 0 0 0 10px rgba(227, 206, 154, 0.14); }
.bandeau-alma-vide { background: #6B4567; }
.bandeau-alma figcaption { margin-top: 22px; display: flex; flex-direction: column; gap: 4px; }
.bandeau-alma-nom { font-family: var(--titres); font-size: 22px; line-height: 1.2; color: #FBF8F0; }
.bandeau-alma-titre { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--or); }
.bandeau-ange-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.bandeau-prune.bandeau-ange h2 { margin: 0; font-size: 42px; line-height: 1.18; color: #FBF8F0; }
.bandeau-prune.bandeau-ange p { margin: 0; font-size: 21px; line-height: 1.5; font-style: italic; color: #EFE4EC; text-align: left; }
.bandeau-prune.bandeau-ange .btn-papier { min-height: 48px; padding: 20px 38px; font-size: 21px; font-weight: 600; line-height: 1.25; color: #1B1428; background: var(--or); border: 0; border-radius: 6px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25); }
.bandeau-prune.bandeau-ange .btn-papier:hover { color: #1B1428; background: var(--or-survol); }
.bandeau-prune.bandeau-ange .btn-papier:focus-visible { outline: 3px solid #FBF8F0; outline-offset: 3px; }
/* Le bloc vit dans la page crème (880 px) : il s'étend jusqu'à ses bords et garde des proportions qui laissent respirer le titre. */
@media (min-width: 1000px) {
  .papier .bandeau-prune.bandeau-ange { margin-left: -56px; margin-right: -56px; padding: 56px; gap: 48px; }
  .papier .bandeau-alma-photo { width: 200px; height: 200px; }
  .papier .bandeau-prune.bandeau-ange h2 { font-size: 36px; }
  .papier .bandeau-prune.bandeau-ange .btn-papier { padding: 18px 30px; font-size: 19px; }
  .papier-large .bandeau-prune.bandeau-ange .btn-papier { padding: 20px 38px; font-size: 21px; }
  .papier-large .bandeau-alma-photo { width: 230px; height: 230px; }
  .papier-large .bandeau-prune.bandeau-ange { padding: 64px 72px; gap: 64px; }
  .papier-large .bandeau-prune.bandeau-ange h2 { font-size: 42px; }
}
@media (min-width: 768px) and (max-width: 999px) {
  .bandeau-prune.bandeau-ange { padding: 44px 40px; gap: 36px; }
  .bandeau-alma-photo { width: 170px; height: 170px; }
  .bandeau-prune.bandeau-ange h2 { font-size: 32px; }
  .bandeau-prune.bandeau-ange p { font-size: 19px; }
  .bandeau-prune.bandeau-ange .btn-papier { padding: 18px 28px; font-size: 19px; }
}
@media (max-width: 767px) {
  .bandeau-prune.bandeau-ange { flex-direction: column; gap: 24px; padding: 32px 24px; text-align: center; }
  .bandeau-alma-photo { width: 160px; height: 160px; }
  .bandeau-alma figcaption { margin-top: 18px; }
  .bandeau-ange-texte { align-items: stretch; gap: 16px; width: 100%; }
  .bandeau-prune.bandeau-ange h2 { font-size: 30px; }
  .bandeau-prune.bandeau-ange p { font-size: 18px; text-align: center; }
  .bandeau-prune.bandeau-ange .btn-papier { width: 100%; padding: 16px 20px; font-size: 19px; }
}

/* Date de naissance : trois cases courtes, à la taille de ce qu'on y tape (JJ, MM, AAAA), exemple dans le titre */
.outil-date-groupe { margin: 0; padding: 0; border: 0; min-width: 0; }
.outil-date-groupe legend { padding: 0; margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--encre); }
.outil-date-groupe .aide { font-weight: 400; font-size: 15px; color: var(--encre-2); }
.outil-date-groupe .outil-date { gap: 12px; flex-wrap: nowrap; }
.outil-date-groupe .champ-jour, .outil-date-groupe .champ-mois { flex: 0 0 76px; }
.outil-date-groupe .champ-annee { flex: 0 0 104px; }
.outil-date-groupe .champ input { text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* Page Contact : invitation à écrire à Alma (portrait rond, petits textes d'aide) */
.contact-portrait { display: block; width: 160px; height: 160px; margin: 0 0 24px; object-fit: cover; object-position: center 18%; border-radius: 50%; border: 3px solid var(--or); }
.contact-alma p { margin: 0 0 14px; line-height: 1.6; }
.contact-alma .contact-signature { margin-top: 18px; color: var(--encre-2); }
.aide-champ { margin: 2px 0 0; font-size: 15px; color: var(--encre-2); }
.contact-discret { margin: 12px 0 0; font-size: 15px; color: var(--encre-2); }
@media (max-width: 820px) { .contact-portrait { margin: 0 auto 20px; } .contact-alma h2 { text-align: center; } }

/* Encart des articles vers l'outil : bande portrait / accroche / bouton, assortie au grand bloc « portrait d'Alma » */
.encart.encart-alma { display: flex; align-items: center; gap: 24px; margin: 40px 0; padding: 28px 32px; background: #4E2A4A; border-radius: 10px; color: #FBF8F0; }
.encart-alma-photo { flex: 0 0 72px; display: block; width: 72px; height: 72px; object-fit: cover; object-position: center 18%; border-radius: 50%; border: 2px solid var(--or); }
.encart-alma-vide { background: #6B4567; }
.encart-alma-texte { flex: 1 1 auto; min-width: 0; text-align: left; }
.encart.encart-alma .encart-alma-accroche { margin: 0; font-family: var(--titres); font-size: 24px; line-height: 1.25; color: #FBF8F0; }
.encart.encart-alma .encart-alma-phrase { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: #EFE4EC; }
.encart-alma-action { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.corps-article .encart-alma .encart-alma-btn, .encart-alma .encart-alma-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 16px 26px; font-size: 18px; font-weight: 600; line-height: 1.2; color: #1B1428; background: var(--or); border: 0; border-radius: 6px; text-decoration: none; white-space: nowrap; }
.corps-article .encart-alma .encart-alma-btn:hover, .encart-alma .encart-alma-btn:hover { color: #1B1428; background: var(--or-survol); text-decoration: none; }
.encart-alma .encart-alma-btn:focus-visible { outline: 3px solid #FBF8F0; outline-offset: 3px; }
.encart.encart-alma .encart-alma-rassure { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: #E0D2DD; text-align: center; }
/* La colonne de lecture fait 680 px : sur grand écran l'encart déborde de 80 px de chaque côté (sans sortir de la page
   crème) pour laisser la place au texte ; plus étroit, le bouton passe sous le texte. */
@media (min-width: 1000px) { .lecture .encart.encart-alma { margin-left: -80px; margin-right: -80px; } }
@media (min-width: 641px) and (max-width: 999px) { .encart.encart-alma { flex-wrap: wrap; } .encart-alma-texte { flex-basis: calc(100% - 96px); } .encart-alma-action { margin-left: 96px; align-items: flex-start; } }
@media (max-width: 640px) {
  .encart.encart-alma { flex-direction: column; text-align: center; padding: 24px 20px; gap: 16px; }
  .encart-alma-photo { width: 64px; height: 64px; flex-basis: 64px; }
  .encart-alma-texte { text-align: center; }
  .encart.encart-alma .encart-alma-accroche { font-size: 21px; }
  .encart-alma-action { align-self: stretch; }
  .encart-alma .encart-alma-btn { width: 100%; white-space: normal; }
}

/* Outil : email avant la révélation, mention de consentement juste dessous ; révélation sur la page Merci */
.outil .champ-email .consentement { margin: 2px 0 0; font-size: 14px; line-height: 1.45; }
.revelation { margin: 28px 0 8px; padding: 28px 24px; text-align: center; background: var(--papier-clair); border: 1px solid var(--filet); border-radius: 8px; }
.revelation .resultat-rang { margin-bottom: 0; }
/* Ordinateur : carte de l'outil resserrée pour que le bouton reste visible sans défiler malgré le champ email. */
@media (min-width: 821px) {
  .outil { padding: 28px 30px 24px; }
  .outil h2 { margin-bottom: 14px; font-size: 25px; }
  .outil-date-groupe legend { margin-bottom: 4px; }
  .outil .champ { gap: 4px; }
  .outil-form > .champ { margin-top: 12px; }
  .outil .champ input { min-height: 46px; padding-top: 9px; padding-bottom: 9px; }
  .outil .btn-plein { margin-top: 16px; }
  .outil .reassurance { margin-top: 8px; }
}
@media (min-width: 821px) and (max-height: 820px) {
  .outil { padding-top: 22px; padding-bottom: 18px; }
  .outil h2 { margin-bottom: 10px; font-size: 23px; }
  .outil .champ label, .outil-date-groupe legend { font-size: 14px; }
  .outil .champ input { min-height: 42px; }
  .outil-form > .champ { margin-top: 8px; }
}
.revelation p { text-align: center; }
/* Ordinateur : la bannière cède la place à l'outil. Hauteur = ce qui reste une fois réservés le menu et la carte jusqu'au
   « 1re consultation offerte » (≈ 650 px), entre 110 et 340 px : le bouton « Révéler » reste visible quelle que soit la hauteur de la fenêtre. */
@media (min-width: 821px) {
  .banniere img { height: clamp(110px, min(32vh, calc(100vh - 650px)), 340px); }
}
.signature-alma-titre { display: block; margin-top: 2px; font-family: var(--texte); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--encre-2); }

/* Page « Qui suis-je ? » : photo à gauche, titre et début de l'histoire à sa droite, le texte passe dessous ensuite */
.alma-histoire { max-width: none; margin-top: 0; }
.alma-histoire::after { content: ''; display: block; clear: both; }
.alma-histoire h1 { margin: 0 0 24px; }
@media (min-width: 821px) {
  .alma-histoire .portrait { float: left; width: 260px; height: 340px; margin: 6px 44px 20px 0; }
}
@media (max-width: 820px) {
  .alma-histoire .portrait { display: block; margin: 0 auto 28px; }
  .alma-histoire h1 { text-align: center; }
}
/* Histoire d'Alma : œuvres anciennes fondues dans le papier (bords déjà fondus dans l'image), légende dans la voix d'Alma */
.alma-histoire .figure.planche { clear: both; margin: 40px auto; padding: 0; max-width: 560px; background: none; border: 0; }
.alma-histoire .figure.planche figcaption { margin-top: 10px; font-size: 17px; text-align: center; color: var(--encre-2); }
.alma-ouverture .figure.planche { margin: 0 auto 36px; }
.alma-credits { clear: both; margin: 48px 0 0; font-size: 14px; line-height: 1.5; color: var(--encre-2); }
/* La flamme (seule image en largeur) relance la lecture avant « La nuit où mon cœur s'est arrêté » : toute la largeur du texte. */
.alma-histoire .figure.planche:has(img[src*="01-bougie"]) { max-width: none; margin: 48px 0 44px; }

/* Page de la prière des Trois Flammes (/priere-trois-flammes) : lecteur audio et texte de la prière */
.priere .priere-audio { display: block; width: 100%; margin: 24px 0 8px; }
.priere .priere-bientot { margin: 24px 0 8px; padding: 14px 18px; border: 1px dashed var(--filet); border-radius: 6px; color: var(--encre-2); font-style: italic; }
.priere .priere-texte { margin-top: 32px; font-family: var(--titres); font-size: 22px; line-height: 1.6; text-align: center; color: var(--encre); }
.priere .priere-texte p { margin: 0 0 26px; }
@media (max-width: 640px) { .priere .priere-texte { font-size: 19px; } }

/* Page du sceau du Fil de Lumière : une colonne, texte de 19 px, bouton de 56 px (règles du parcours /mon-ange/). */
.fil-sceau p { font-size: 19px; line-height: 1.6; }
.fil-sceau .fil-sceau-action { margin: 32px 0 20px; }
.fil-sceau .fil-sceau-action .btn { font-size: 19px; }
.fil-sceau .fil-sceau-discret { font-size: 17px; }
.fil-sceau .fil-sceau-discret a { color: var(--encre); }

/* Pages d'écoute du Fil de Lumière (/fil/ecoute/…) : bandeau d'Alma, lecteur à gros bouton sur la nuit, conseils, texte qui s'éclaire */
.fil-ecoute .fil-ecoute-bandeau { display: block; width: calc(100% + 2 * clamp(24px, 6vw, 88px)); max-width: none; height: auto; margin: -64px calc(-1 * clamp(24px, 6vw, 88px)) 40px; border-radius: 6px 6px 0 0; }
.fil-ecoute p, .fil-ecoute li { font-size: 19px; line-height: 1.6; }
.fil-ecoute h1 { margin-bottom: 8px; }
.fil-ecoute h2 { font-size: 26px; margin: 0 0 16px; }
.fil-ecoute-avant { margin-top: 32px; }
.fil-ecoute-avant ul { margin: 0; padding-left: 1.2em; }
.fil-ecoute-avant li { margin: 0 0 10px; }
.fil-ecoute-avant li::marker { content: '✦  '; color: var(--prune); font-size: 15px; }
.fil-lecteur { margin: 36px 0; padding: 28px clamp(18px, 4vw, 32px) 22px; background: var(--nuit); color: var(--texte-nuit); border-radius: 10px; box-shadow: 0 10px 30px var(--ombre-carte); }
.fil-lecteur audio { display: block; width: 100%; }
.fil-lecteur-ui { display: flex; align-items: center; gap: 22px; }
.fil-lecteur-ui[hidden] { display: none; }
.fil-lecteur-jouer { flex: none; width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--or); background: var(--prune); color: var(--titre-nuit); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(231, 206, 148, 0.12), 0 0 28px rgba(231, 206, 148, 0.25); transition: background .2s, transform .2s; }
.fil-lecteur-jouer:hover { background: var(--prune-clair); }
.fil-lecteur-jouer:focus-visible { outline: 3px solid var(--or); outline-offset: 4px; }
.fil-lecteur-jouer svg { width: 38px; height: 38px; fill: currentColor; }
.fil-lecteur-jouer .i-pause, .fil-lecteur.lecture .fil-lecteur-jouer .i-jouer { display: none; }
.fil-lecteur.lecture .fil-lecteur-jouer .i-pause { display: block; }
.fil-lecteur.lecture .fil-lecteur-jouer { animation: fil-halo 4s ease-in-out infinite; }
@keyframes fil-halo { 50% { box-shadow: 0 0 0 10px rgba(231, 206, 148, 0.10), 0 0 44px rgba(231, 206, 148, 0.40); } }
@media (prefers-reduced-motion: reduce) { .fil-lecteur.lecture .fil-lecteur-jouer { animation: none; } }
.fil-lecteur-piste { flex: 1; min-width: 0; }
.fil-lecteur-piste input[type=range] { width: 100%; margin: 0; accent-color: var(--or); height: 28px; cursor: pointer; }
.fil-lecteur .fil-lecteur-temps { margin: 4px 0 0; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--titre-nuit); letter-spacing: .02em; }
.fil-lecteur .fil-lecteur-temps span:last-child { color: var(--texte-nuit-3); }
.fil-lecteur .fil-lecteur-reprise { margin: 18px 0 0; font-size: 17px; color: var(--liens-nuit); }
.fil-lecteur .fil-lecteur-note { margin: 18px 0 0; font-size: 17px; font-style: italic; color: var(--texte-nuit-2); }
.fil-lecteur .fil-lecteur-telecharger { margin: 14px 0 0; font-size: 16px; color: var(--texte-nuit-3); }
.fil-lecteur a, .fil-lecteur .lien-bouton { color: var(--liens-nuit); }
.lien-bouton { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.fil-ecoute .priere-bientot { margin: 32px 0; padding: 14px 18px; border: 1px dashed var(--filet); border-radius: 6px; color: var(--encre-2); font-style: italic; }
.fil-ecoute-conseils { margin: 44px 0; padding: 32px clamp(20px, 4vw, 40px); background: var(--papier-clair); border: 1px solid var(--filet); border-radius: 10px; text-align: center; }
.fil-ecoute-conseils p { margin: 0 0 14px; }
.fil-ecoute-conseils p:last-child { margin-bottom: 0; }
.fil-ecoute .fil-ecoute-etoiles { margin: 0 0 8px; color: var(--prune); letter-spacing: .5em; font-size: 15px; }
.fil-ecoute-texte { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--filet); }
.fil-ecoute-texte h3 { margin: 32px 0 12px; font-family: var(--texte); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--prune); }
.fil-passage { margin: 0 -12px; padding: 6px 12px; border-radius: 6px; transition: background .4s, color .4s; }
.fil-passage p { margin: 0 0 8px; font-family: var(--titres); font-size: 21px; line-height: 1.6; color: var(--encre-2); }
.fil-passage p:last-child { margin-bottom: 0; }
.fil-ecoute.avec-lecteur .fil-passage { cursor: pointer; }
.fil-ecoute.avec-lecteur .fil-passage:hover p { color: var(--encre); }
.fil-passage.en-cours { background: var(--prune-12); box-shadow: inset 3px 0 0 var(--prune); }
.fil-passage.en-cours p { color: var(--encre); }
.fil-ecoute .fil-silence { margin: 14px 0; font-size: 15px; font-style: italic; color: var(--prune); text-align: center; letter-spacing: .03em; }
@media (max-width: 600px) {
  .fil-ecoute .fil-ecoute-bandeau { width: calc(100% + 40px); margin: -40px -20px 28px; }
  .fil-lecteur-jouer { width: 72px; height: 72px; }
  .fil-lecteur-ui { gap: 16px; }
  .fil-passage p { font-size: 19px; }
}
.priere .priere-gravure { margin: 40px auto 0; max-width: 560px; }
.priere .priere-gravure img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 8px 24px rgba(42, 34, 51, 0.18); }

/* Relecture du 11/10 : la règle générale « p { text-align: left } » annulait ces centrages */
.fil-ecoute-conseils p, .fil-ecoute .fil-ecoute-etoiles { text-align: center; }
.priere .priere-texte p { text-align: center; }
@media (max-width: 600px) { .priere .priere-texte { font-size: 18.5px; line-height: 1.55; } }

/* Les 72 anges (/anges/ et /anges/<nom>/), 08/11/2026 : texte sur papier, Georgia lisible, une ligne par ange */
.anges-choeur { margin: 40px 0 0; }
.anges-choeur h2 { margin: 0 0 12px; font-size: 28px; color: var(--prune); }
.anges-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.anges-liste li { border-bottom: 1px solid var(--filet); }
.anges-liste a { display: grid; grid-template-columns: 2.4em 1fr; column-gap: 12px; padding: 14px 4px; min-height: 44px; color: var(--encre); text-decoration: none; }
.anges-liste a:hover .anges-nom, .anges-liste a:focus-visible .anges-nom { color: var(--prune-fonce); text-decoration: underline; }
.anges-num { grid-row: span 2; align-self: center; font-family: var(--titres); font-size: 20px; color: var(--encre-2); text-align: right; }
.anges-nom { font-family: Georgia, var(--texte); font-size: 21px; font-weight: 700; color: var(--prune); }
.anges-attr { font-size: 17px; line-height: 1.45; color: var(--encre-2); }
@media (min-width: 821px) { .anges-liste { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; border-top: 0; } .anges-liste li:nth-child(-n+2) { border-top: 1px solid var(--filet); } }
.anges-choeur + .encart { margin-top: 40px; }
.ange-page h2 { font-size: 26px; color: var(--prune); }
.ange-attribut { font-family: Georgia, var(--texte); font-size: 22px; font-weight: 600; color: var(--encre); }
.ange-citation, .ange-verset { margin: 0 0 24px; padding: 4px 0 4px 20px; border-left: 3px solid var(--or); }
.ange-citation p, .ange-verset p { margin: 0 0 10px; }
.ange-citation footer, .ange-verset footer { font-size: 16px; color: var(--encre-2); }
.ange-latin { font-size: 17px; color: var(--encre-2); }
.anges-voisins { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--filet); font-size: 18px; }
.anges-voisins a { display: flex; flex-direction: column; justify-content: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.anges-voisins a span { font-size: 15px; font-weight: 400; color: var(--encre-2); }
.anges-voisins a:last-child { text-align: right; }
.anges-voisins .anges-voisins-tous { order: 3; flex-basis: 100%; align-items: center; text-decoration: underline; }
.ange-sur { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--encre-2); }