/* ==========================================================================
   Feuille de style des Éditions Sylverune
   Fichier : public/css/style.css

   Concept : « la clairière ». Un fond crème lumineux comme une page de
   grimoire au soleil, le brun profond du logo pour les textes, le cuivre
   pour les accents, l'ocre de Sylwë pour les touches vives. Tout ce qui
   bouge ou brille est fait en CSS pur : aucune image de décor, aucun
   JavaScript.

   Plan du fichier :
     1. Polices (hébergées localement)
     2. Variables : palette, typographie, espacements
     3. Réinitialisation légère
     4. Base : corps de page, textes, liens
     5. Accessibilité : lien d'évitement, champ piège, mouvement réduit
     6. Boutons
     7. En-tête (hero) et sa lueur animée
     8. Titres de section et ornement « rune »
     9. Manifeste
    10. Inscription : le livre ouvert, Sylwë, les deux pages
    11. Formulaires
    12. Pied de page
    13. Apparitions au défilement
    14. Adaptation aux petits écrans
    15. Pages de résultat
    16. Pages de texte (mentions légales, confidentialité)
    17. Formulaire de contact et retours des formulaires envoyés en AJAX
    18. Infobulle (définition de « à compte d'éditeur »)
   ========================================================================== */


/* ==========================================================================
   1. POLICES
   Deux familles libres (licence SIL Open Font License), servies depuis
   public/fonts/. Le site ne contacte jamais de serveur extérieur.

   - Cinzel : capitales romaines gravées, même esprit que le lettrage du logo.
     Pour les titres et les boutons.
   - Cormorant Garamond : Garamond littéraire, pour le texte courant.

   Ce sont des polices « variables » : un seul fichier contient toutes les
   graisses (font-weight en intervalle). Chaque famille est découpée en deux
   sous-ensembles de caractères ; unicode-range permet au navigateur de ne
   charger le fichier « latin étendu » que si la page contient un caractère
   qui en a besoin. font-display: swap affiche le texte tout de suite avec
   une police de secours, puis le remplace quand la police est chargée.
   ========================================================================== */

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/cinzel-romain-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: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/cinzel-romain-latin-etendu.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-romain-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: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-romain-latin-etendu.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-italique-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: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-italique-latin-etendu.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   2. VARIABLES
   Toutes les couleurs et mesures importantes sont définies ici, une fois.
   Pour changer une teinte sur tout le site, on ne modifie que cette liste.
   ========================================================================== */

:root {
  /* Palette, tirée du logo et de Sylwë */
  --creme: #fbf6ec;          /* fond principal : la lumière de la clairière */
  --parchemin: #f3e9d6;      /* fond des zones secondaires */
  --creme-fonce: #e6d7bb;    /* filets, bordures discrètes */
  --blanc-casse: #fffdf8;    /* fond des pages du livre et des champs */
  --brun: #3b2314;           /* texte courant, comme l'arbre du logo */
  --brun-doux: #62402a;      /* texte secondaire */
  --cuivre: #9e4f24;         /* accents, boutons, liens */
  --cuivre-clair: #c4823f;   /* reflets, survols */
  --or: #dcb56e;             /* lueur, ornements */
  --ocre: #d6993d;           /* la cape de Sylwë */

  /* Typographie. Les tailles utilisent clamp(minimum, fluide, maximum) :
     elles grandissent avec l'écran sans jamais sortir de ces bornes. */
  --police-titres: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --police-texte: "Cormorant Garamond", "Garamond", "Georgia", serif;
  --taille-texte: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  --taille-h1: clamp(1.9rem, 1.2rem + 3.2vw, 3.6rem);
  --taille-h2: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  --taille-h3: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);

  /* Largeurs et espacements */
  --largeur-lecture: 62ch;   /* longueur de ligne confortable pour lire */
  --largeur-page: 72rem;     /* largeur maximale des zones larges */
  --gouttiere: clamp(1rem, 4vw, 2.5rem);   /* marge latérale */
  /* Espace vertical entre deux sections, le même partout : sous le bouton
     du hero, autour du manifeste, avant et après l'inscription. */
  --espace-section: clamp(3.5rem, 8vw, 6rem);
  /* Profondeur maximale des dents du bord déchiré du manifeste : on l'ajoute
     à l'espace pour que le texte garde la même distance au bord visible. */
  --bord-dechire: 2.8rem;

  /* Ombres et rayons */
  --ombre-douce: 0 1rem 2.5rem rgba(59, 35, 20, 0.10);
  --rayon: 0.75rem;
}


/* ==========================================================================
   3. RÉINITIALISATION LÉGÈRE
   On efface les quelques réglages par défaut des navigateurs qui gênent,
   sans tout remettre à zéro.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;   /* la largeur inclut marges internes et bordures */
}

html {
  -webkit-text-size-adjust: 100%;   /* pas de grossissement automatique sur iPhone en paysage */
  scroll-behavior: smooth;          /* le lien « Rejoindre l'aventure » glisse vers #inscription */
}

body {
  margin: 0;
}

img,
picture {
  display: block;       /* supprime l'espace fantôme sous les images */
  max-width: 100%;
  height: auto;
}

h1, h2, h3, p, ul {
  margin: 0;            /* les marges seront posées explicitement plus bas */
}

button,
input,
select,
textarea {
  font: inherit;        /* les champs héritent de la police de la page */
  color: inherit;
}

/* Un élément marqué « hidden » reste caché, même si une règle plus bas lui
   donne un display (le script des formulaires s'en sert pour masquer un
   formulaire une fois envoyé). */
[hidden] {
  display: none !important;
}


/* ==========================================================================
   4. BASE
   ========================================================================== */

/* Le contenu de l'accueil ne déborde jamais sur les côtés. Deux éléments
   dépasseraient sinon de l'écran : les cartes du livre, décalées de 3 rem
   par leur animation tant qu'elles ne sont pas entrées dans l'écran, et
   l'infobulle cachée quand son « ? » est près du bord. La page devenait
   alors plus large que l'écran et glissait de côté sur téléphone.
   Ce <main> fait toute la largeur de l'écran : ce qu'il rogne est de
   toute façon hors de l'écran. « clip » et non « hidden » : aucune zone de
   défilement n'est créée, les apparitions au défilement fonctionnent.
   La règle est posée ici, et pas seulement sur <body> (voir plus bas) : sur
   <body>, le navigateur la reporte sur la fenêtre, qui peut alors encore
   défiler de côté par programme. */
.accueil {
  overflow-x: clip;
}

body {
  /* Une colonne : en-tête, zone principale, pied de page. La zone
     principale prend toute la hauteur libre (règle suivante) : le pied de
     page reste en bas de l'écran même quand la page est courte
     (confirmation, page introuvable). */
  display: flex;
  flex-direction: column;
  min-height: 100vh;                /* navigateurs anciens */
  min-height: 100svh;               /* hauteur visible sur mobile */
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  font-weight: 500;                 /* Cormorant est fine : la graisse 500 la rend confortable */
  line-height: 1.55;
  color: var(--brun);
  background-color: var(--creme);
  /* Fond principal : deux voiles de lumière très diffus en haut, comme un
     rayon qui traverse le feuillage. Ils restent fixes pendant le défilement. */
  background-image:
    radial-gradient(60rem 40rem at 15% -10%, rgba(220, 181, 110, 0.28), transparent 70%),
    radial-gradient(50rem 35rem at 90% 5%, rgba(214, 153, 61, 0.16), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  /* Filet de sécurité pour les navigateurs qui ne connaissent pas
     « overflow: clip » (Safari avant la version 16) : les décors qui
     dépassent ne créent pas de défilement horizontal. */
  overflow-x: hidden;
}
body > main {
  flex-grow: 1;
}

h1, h2, h3 {
  font-family: var(--police-titres);
  font-weight: 600;
  line-height: 1.15;
  color: var(--brun);
  text-wrap: balance;               /* équilibre les lignes des titres (ignoré si non pris en charge) */
}

h1 { font-size: var(--taille-h1); }
h2 { font-size: var(--taille-h2); }
h3 { font-size: var(--taille-h3); }

p + p {
  margin-top: 1em;                  /* un blanc entre deux paragraphes qui se suivent */
}

/* Liens dans le texte : cuivre, soulignés d'un cuivre plus clair ; au survol,
   ils passent au brun et le soulignement s'épaissit */
a {
  color: var(--cuivre);
  text-decoration-color: var(--cuivre-clair);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.16em;
  transition: text-decoration-thickness 0.15s ease, color 0.15s ease;
}
a:hover {
  color: var(--brun);
  text-decoration-thickness: 0.14em;
}

/* Contour de focus clavier, visible partout, aux couleurs du site.
   Cuivre : contraste de 5,4 sur le crème (le minimum d'accessibilité est 3). */
:focus-visible {
  outline: 3px solid var(--cuivre);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Couleur de sélection du texte */
::selection {
  background: var(--or);
  color: var(--brun);
}


/* ==========================================================================
   5. ACCESSIBILITÉ
   ========================================================================== */

/* Lien d'évitement : invisible, sauf quand on y arrive au clavier (Tab).
   Il apparaît alors en haut à gauche, par-dessus tout le reste. */
.evitement {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.6em 1.2em;
  background: var(--brun);
  color: var(--creme);
  font-family: var(--police-titres);
  text-decoration: none;
  border-radius: 0 0 var(--rayon) var(--rayon);
}
.evitement:focus {
  top: 0;
}

/* Champ piège anti-robots : sorti de l'écran plutôt que display: none,
   car certains robots ignorent les champs en display: none et éviteraient
   le piège. Un humain ne le voit pas et ne peut pas y arriver au clavier
   (tabindex="-1" dans le HTML). */
.piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mot à ne jamais couper en fin de ligne (par exemple « e-mail », que le
   navigateur couperait volontiers au trait d'union). */
.sans-coupure {
  white-space: nowrap;
}

/* Mouvement réduit : si la personne a demandé à son système de limiter
   les animations, on coupe tout. Le site reste entièrement lisible. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}


/* ==========================================================================
   6. BOUTONS
   Au repos, « la rune est éveillée » :
     - fond bronze, avec une lueur dorée à l'intérieur ;
     - capitales Cinzel largement espacées, comme une inscription gravée ;
     - un filet d'or fait le tour du bouton, avec une comète plus claire
       qui tourne en continu ;
     - un reflet traverse la surface toutes les 5 secondes.
   Au survol ou au focus clavier, « la rune s'embrase » : le filet d'or
   s'allume sur tout son tour et les lettres passent du crème à l'or.
   Rien d'autre ne change : pas de soulèvement, pas de halo, ni autour
   du bouton ni à l'intérieur.
   ========================================================================== */

/* L'angle de la comète. Le déclarer avec @property permet au navigateur de
   l'animer en douceur. Un navigateur qui ne connaît pas @property affiche
   un filet d'or fixe : l'effet reste joli. */
@property --angle-rune {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.bouton {
  position: relative;
  display: inline-block;
  padding: 0.9em 2em;
  font-family: var(--police-titres);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--creme);
  /* Fond bronze : la moitié la plus foncée d'un dégradé cuivre → bronze
     (le dégradé fait deux fois la largeur du bouton, on en montre la
     partie droite). Crème sur ce fond : contraste de 6,6 à 10,5. */
  background-color: #7e3d1a;
  background-image: linear-gradient(120deg, #a35c2b 0%, var(--cuivre) 30%, #7e3d1a 60%, #5e2c12 100%);
  background-size: 200% 100%;
  background-position: 100% 50%;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;                 /* le reflet ne dépasse pas du bouton */
  box-shadow:
    0 0.4rem 1.2rem rgba(158, 79, 36, 0.22),
    inset 0 0 1.2rem rgba(220, 181, 110, 0.35);   /* lueur dorée intérieure */
  transition:
    color 0.4s ease,
    box-shadow 0.4s ease;
}

/* Le filet d'or : un anneau de 2 px au bord du bouton. On dessine un dégradé
   conique (une comète dorée qui tourne), puis on masque tout sauf le bord
   (technique du « masque composite » : le contenu est soustrait du total).
   --eclat-filet règle l'intensité du filet hors de la comète. */
.bouton::before {
  --eclat-filet: 0.5;
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;                     /* épaisseur du filet */
  border-radius: inherit;
  background: conic-gradient(
    from var(--angle-rune),
    rgba(220, 181, 110, var(--eclat-filet)) 0deg,
    rgba(220, 181, 110, var(--eclat-filet)) 170deg,
    var(--or) 260deg,
    #fffaf0 315deg,
    var(--or) 340deg,
    rgba(220, 181, 110, var(--eclat-filet)) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;      /* ancienne syntaxe (Safari) */
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;  /* syntaxe standard */
  animation: tour-de-rune 2.6s linear infinite;   /* la comète d'or fait le tour */
  pointer-events: none;
}

@keyframes tour-de-rune {
  to { --angle-rune: 360deg; }
}

/* Le reflet : une bande claire inclinée qui traverse le bouton de gauche à
   droite toutes les 5 secondes. Elle part de la gauche, hors du bouton, et
   se déplace avec « translate » : la carte graphique s'en charge seule, sans
   recalculer la page à chaque image (important sur un téléphone modeste). */
.bouton::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 253, 248, 0.35), transparent);
  transform: skewX(-20deg);
  animation: reflet 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes reflet {
  0%, 60% { translate: 0 0; }       /* immobile hors du bouton la plupart du temps */
  100%    { translate: 400% 0; }    /* puis traverse d'un coup : 4 fois sa largeur, soit 2 fois celle du bouton */
}

/* La rune s'embrase. Or clair sur bronze : contraste de 5,3 au minimum.
   Seule la couleur des lettres change : pas de lueur ajoutée. */
.bouton:hover,
.bouton:focus-visible {
  color: #ffd98a;
}
.bouton:hover::before,
.bouton:focus-visible::before {
  --eclat-filet: 0.95;              /* tout le filet s'allume, pas seulement la comète */
}

/* Au clic : la lueur intérieure se resserre, comme une pression sur un sceau */
.bouton:active {
  box-shadow:
    0 0.2rem 0.6rem rgba(158, 79, 36, 0.22),
    inset 0 0.2rem 0.8rem rgba(59, 35, 20, 0.45);
}

/* Le bouton principal du hero est un peu plus grand */
.bouton-principal {
  font-size: 1.05rem;
  padding: 1em 2.6em;
}


/* ==========================================================================
   7. EN-TÊTE (HERO)
   Plein écran, tout est centré. Derrière le logo, une lueur dorée
   floue qui respire lentement, et un éventail de rayons qui tourne
   très doucement : la lumière qui filtre entre les feuilles.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;               /* les décors en z-index négatif restent dans le hero */
  min-height: 100svh;               /* toute la hauteur de l'écran (svh = hauteur visible sur mobile) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  /* En haut, un peu d'air ; en bas, le même espace qu'entre les sections */
  padding: clamp(2rem, 5vh, 3rem) var(--gouttiere) var(--espace-section);
  text-align: center;
  /* La lueur dépasse du hero. Sur les côtés, on la coupe (sinon la page
     défilerait en largeur). En bas, on la laisse déborder : elle
     s'estompe alors en douceur derrière le manifeste, au lieu d'être
     tranchée net à la limite du hero. « clip » (et non « hidden ») est
     la seule valeur qui permet de couper un seul axe. */
  overflow-x: clip;
  overflow-y: visible;
}

/* La lueur : un disque de dégradé radial, rendu flou, qui grossit et
   rétrécit lentement. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;             /* on ne peut pas cliquer dessus, elle ne gêne rien */
  width: 60vmax;
  height: 60vmax;
  top: -15vmax;
  left: 50%;
  translate: -50% 0;
  background: radial-gradient(circle, rgba(220, 181, 110, 0.55), rgba(220, 181, 110, 0) 65%);
  animation: respiration 9s ease-in-out infinite alternate;
}

@keyframes respiration {
  from { transform: scale(1);    opacity: 0.85; }
  to   { transform: scale(1.18); opacity: 1; }
}

/* Le logo et ses rayons */
.hero > picture {
  position: relative;
  width: clamp(13rem, 26vw, 22rem);
  animation: arrivee 1.2s ease-out both;    /* apparaît en fondu au chargement */
}

/* Les rayons : un dégradé conique répété (alternance or / transparent),
   masqué par un dégradé radial pour s'estomper vers les bords, en rotation
   lente (70 secondes par tour). */
.hero > picture::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -45%;                      /* déborde largement autour du logo */
  background: repeating-conic-gradient(
    from 0deg,
    rgba(220, 181, 110, 0.28) 0deg 6deg,
    transparent 6deg 18deg
  );
  -webkit-mask-image: radial-gradient(circle, black 20%, transparent 68%);
          mask-image: radial-gradient(circle, black 20%, transparent 68%);
  animation: rotation 70s linear infinite;
  pointer-events: none;
}

@keyframes rotation {
  to { transform: rotate(360deg); }
}

.hero-logo {
  width: 100%;
  /* une ombre douce et chaude sous les traits du logo, qui le décolle du fond */
  filter: drop-shadow(0 0.6rem 1.2rem rgba(158, 79, 36, 0.18));
}

.hero h1 {
  max-width: 22ch;
  font-weight: 700;
  letter-spacing: 0.01em;
  animation: arrivee 1.2s ease-out 0.25s both;   /* même fondu, un quart de seconde après le logo */
}

.hero-texte {
  max-width: 52ch;
  font-size: calc(var(--taille-texte) * 1.1);
  color: var(--brun-doux);
  /* Texte centré : le navigateur répartit les mots pour que les lignes aient
     à peu près la même longueur, au lieu de laisser un bout de phrase seul
     en dernière ligne. Ignoré par les navigateurs qui ne le connaissent pas. */
  text-wrap: balance;
  animation: arrivee 1.2s ease-out 0.45s both;
}

/* L'invitation à s'inscrire, sous la présentation : en italique, rapprochée
   du paragraphe précédent (le hero espace ses éléments de 1,4 rem), et qui
   apparaît juste après lui, avant le bouton. */
.hero-appel {
  margin-top: -0.6rem;
  font-style: italic;
  animation-delay: 0.55s;
}

.hero .bouton-principal {
  margin-top: 0.6rem;
  animation: arrivee 1.2s ease-out 0.65s both;
}

/* L'apparition au chargement : fondu + légère remontée */
@keyframes arrivee {
  from { opacity: 0; transform: translateY(1.2rem); }
  to   { opacity: 1; transform: none; }
}


/* ==========================================================================
   8. TITRES DE SECTION ET ORNEMENT « RUNE »
   Chaque h2 est surmonté du losange runique du logo : un losange évidé
   au trait cuivre, et un petit losange plein au centre. Ce sont deux
   carrés tournés de 45 degrés, dessinés en CSS.
   ========================================================================== */

main h2 {
  position: relative;
  /* Place pour l'ornement au-dessus, avec autant d'air entre l'ornement et
     le titre qu'entre le titre et le texte qui le suit (mesuré). */
  padding-top: 4.2rem;
  text-align: center;
}

main h2::before,
main h2::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  rotate: 45deg;
}
main h2::before {                   /* le grand losange, évidé */
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--cuivre);
  margin-top: 0.15rem;
}
main h2::after {                    /* le petit losange, plein, au centre */
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.5rem;
  background: var(--cuivre);
}


/* ==========================================================================
   9. MANIFESTE
   Une bande parchemin aux bords irréguliers, comme une page arrachée à un
   grimoire. clip-path découpe la section suivant un polygone : les points
   du haut et du bas sont légèrement décalés pour un contour organique.
   Le texte est en colonne étroite, avec une lettrine cuivre.
   ========================================================================== */

.manifeste {
  position: relative;
  /* Le bord déchiré entame le haut et le bas de la section : on ajoute sa
     profondeur à l'espace habituel, pour que le texte soit à la même distance
     du bord visible que les autres sections de leurs voisines. */
  padding: calc(var(--espace-section) + var(--bord-dechire)) var(--gouttiere);
  background-color: var(--parchemin);
  /* un très léger grain : des points de lumière minuscules répartis régulièrement */
  background-image: radial-gradient(rgba(255, 253, 248, 0.6) 0.5px, transparent 0.6px);
  background-size: 7px 7px;
  clip-path: polygon(
    0 2.5rem, 8% 1.2rem, 17% 2.8rem, 29% 0.6rem, 41% 2.2rem, 52% 0.2rem, 63% 2.6rem,
    74% 0.8rem, 86% 2.4rem, 94% 0.4rem, 100% 2rem,
    100% calc(100% - 2.2rem), 91% calc(100% - 0.6rem), 80% calc(100% - 2.8rem),
    68% calc(100% - 1rem), 57% calc(100% - 2.6rem), 45% calc(100% - 0.3rem),
    33% calc(100% - 2.4rem), 21% calc(100% - 0.8rem), 10% calc(100% - 2.6rem),
    0 calc(100% - 1.2rem)
  );
}

.manifeste h2 {
  margin-bottom: 2.2rem;
}

.manifeste p {
  max-width: var(--largeur-lecture);
  margin-left: auto;
  margin-right: auto;
  font-size: calc(var(--taille-texte) * 1.05);
  line-height: 1.6;
  /* Évite qu'un mot se retrouve seul sur la dernière ligne d'un paragraphe.
     Ignoré par les navigateurs qui ne le connaissent pas. */
  text-wrap: pretty;
}

/* Lettrine : la première lettre du premier paragraphe, en Cinzel cuivre,
   haute de trois lignes exactement : son sommet s'aligne sur le haut des
   capitales de la première ligne, sa base sur la ligne de base de la
   troisième, sans laisser de vide dessous.

   Version de secours (Firefox, qui ne connaît pas initial-letter) : une
   lettre flottante dont les réglages sont calculés à partir des polices.
   Hauteur voulue : deux interlignes (2 × 1,6 em) + une capitale de
   Cormorant (0,625 em) = 3,825 em. Une capitale de Cinzel mesure
   0,715 fois la taille de la police : 3,825 / 0,715 = 5,35 em.
   line-height limite sa boîte à trois lignes (sinon elle repousse la
   quatrième) ; margin-top, mesurée dans Firefox, aligne son sommet sur le
   haut des capitales de la première ligne. */
.manifeste h2 + p::first-letter {
  float: left;
  margin: 0.1em 0.1em 0 0;
  font-family: var(--police-titres);
  font-size: 5.35em;
  font-weight: 700;
  line-height: 0.68;
  color: var(--cuivre);
}

/* Version précise, pour Chrome, Edge et Safari : initial-letter est fait
   exactement pour ça. Le navigateur calcule lui-même la taille de la
   lettre et l'aligne sur trois lignes. font-size: 1em neutralise le
   réglage de secours, pour que la marge soit mesurée sur le texte. */
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .manifeste h2 + p::first-letter {
    float: none;
    margin: 0 0.6em 0 0;
    font-size: 1em;
    line-height: 1;
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}


/* ==========================================================================
   10. INSCRIPTION : LE LIVRE OUVERT
   Sur grand écran, une grille à trois colonnes : la page des autrices et
   auteurs à gauche, Sylwë au centre, la page des lecteurs à droite.
   Le titre occupe toute la largeur au-dessus.

   Astuce : le HTML enveloppe les deux articles dans <div class="publics">.
   display: contents rend cette enveloppe transparente pour la grille,
   afin que les deux articles se placent directement dans les colonnes.
   ========================================================================== */

.inscription {
  max-width: var(--largeur-page);
  margin: 0 auto;
  padding: var(--espace-section) var(--gouttiere);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "titre   titre    titre"
    "auteurs mascotte lecteurs";
  column-gap: clamp(1rem, 3vw, 2.5rem);
  row-gap: 3rem;
  align-items: stretch;
}

.inscription h2 {
  grid-area: titre;
}

.publics {
  display: contents;
}

.public-auteurs  { grid-area: auteurs; }
.public-lecteurs { grid-area: lecteurs; }

/* Sylwë, debout entre les deux pages, les pieds au niveau du bas des pages */
.inscription > picture {
  grid-area: mascotte;
  align-self: end;
  width: clamp(7rem, 12vw, 11rem);
  padding-bottom: 1.5rem;
  position: relative;
}

/* Son ombre au sol : une ellipse floue sous ses pieds */
.inscription > picture::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  width: 70%;
  height: 1rem;
  translate: -50% 0;
  background: radial-gradient(ellipse, rgba(59, 35, 20, 0.25), transparent 70%);
  filter: blur(3px);
  z-index: -1;
}

/* Sylwë regarde vers la page qui intéresse le visiteur.
   Par défaut, il est tourné vers la gauche (la page des autrices et
   auteurs). Il se retourne pour regarder à droite :
     1. quand la souris survole la page « Vous lisez » ;
     2. quand le champ e-mail de droite est sélectionné (clic ou clavier).
   La sélection d'un champ l'emporte sur le simple survol : si le champ de
   gauche est sélectionné, Sylwë regarde à gauche même si la souris passe
   sur la page de droite, et inversement.

   Comment : « :has() » permet à la section de réagir à ce qui se passe
   dans ses pages. Sylwë s'affiche alors en miroir, instantanément, sans
   transition. Le miroir utilise la propriété « scale » (et non
   « transform », déjà prise par l'apparition au défilement) : une échelle
   horizontale de -1 retourne l'image de gauche à droite.
   Les règles « champ sélectionné » contiennent un identifiant (#…) : elles
   sont plus fortes que la règle de survol, d'où la priorité voulue.
   Navigateur trop ancien pour :has() : Sylwë reste tourné vers la gauche. */
.inscription:has(.public-lecteurs:hover) > picture,
.inscription:has(#email-lecteurs:focus) > picture {
  scale: -1 1;
}
.inscription:has(#email-auteurs:focus) > picture {
  scale: 1 1;
}

/* Il se balance doucement, comme s'il respirait */
.mascotte {
  animation: balancement 4.5s ease-in-out infinite;
  transform-origin: 50% 100%;       /* pivote depuis ses pieds */
}

@keyframes balancement {
  0%, 100% { transform: translateY(0)       rotate(-1.2deg); }
  50%      { transform: translateY(-0.4rem) rotate(1.2deg); }
}

/* Les deux pages du livre */
.public {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: var(--blanc-casse);
  border: 1px solid var(--creme-fonce);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
  transition: border-color 0.3s ease;
}

/* Le bord tourné vers Sylwë est presque droit et porte une ombre intérieure :
   c'est la reliure du livre. La page de gauche a sa reliure à droite,
   la page de droite à gauche. */
.public-auteurs {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
  box-shadow: var(--ombre-douce), inset -1.2rem 0 1.6rem -1.4rem rgba(59, 35, 20, 0.35);
}
.public-lecteurs {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
  box-shadow: var(--ombre-douce), inset 1.2rem 0 1.6rem -1.4rem rgba(59, 35, 20, 0.35);
}

/* Au survol, seul le liseré de la page se teinte de cuivre : c'est Sylwë,
   en se tournant vers elle, qui signale la page active (voir plus haut). */
.public:hover,
.public:focus-within {
  border-color: var(--cuivre-clair);
}

.public h3 {
  margin-bottom: 0.9rem;
  color: var(--cuivre);
}

/* Le petit trait cuivre sous chaque h3 */
.public h3::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 0.6rem;
  background: linear-gradient(90deg, var(--cuivre), var(--or));
}

.public p {
  color: var(--brun-doux);
}

/* La phrase d'appel, juste avant le formulaire : en italique, plus foncée */
.appel {
  margin-top: 1em;
  font-style: italic;
  font-weight: 600;
  color: var(--brun);
}


/* ==========================================================================
   11. FORMULAIRES
   ========================================================================== */

.public form {
  margin-top: auto;                 /* pousse le formulaire en bas de la page, les deux s'alignent */
  padding-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Les libellés en petites capitales espacées */
.public form > label {
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brun-doux);
}

/* Le champ e-mail */
.public input[type="email"] {
  width: 100%;
  padding: 0.7em 1em;
  background: var(--blanc-casse);
  /* Contour assez marqué pour qu'on repère le champ (contraste de 3,1 ;
     le minimum pour le contour d'un champ est 3) */
  border: 1.5px solid #a98b69;
  border-radius: calc(var(--rayon) / 2);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.public input[type="email"]::placeholder {
  color: #826f5a;                  /* contraste de 4,7 sur le fond du champ */
  font-style: italic;
}
.public input[type="email"]:focus {
  outline: none;                    /* remplacé par la bordure et le halo ci-dessous */
  border-color: var(--cuivre);
  box-shadow: 0 0 0 4px rgba(196, 130, 63, 0.25);
}

/* Les cases à cocher (autre liste, consentement) : case à gauche, texte à
   droite, alignés en haut */
.case-a-cocher {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  font-size: 0.85em;
  line-height: 1.45;
  color: var(--brun-doux);
}
.case-a-cocher input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
  margin: 0.2em 0 0;
  accent-color: var(--cuivre);      /* colore la coche avec la teinte du site */
  cursor: pointer;
}
.case-a-cocher label {
  cursor: pointer;
}

/* L'autre liste se détache du champ e-mail ; les deux cases restent
   groupées, et le consentement garde son espace avant le bouton */
.autre-liste {
  margin-top: 0.6rem;
}
.consentement {
  margin: 0.2rem 0 1.2rem;
}

/* Le bouton d'envoi prend toute la largeur de la page du livre */
.public .bouton {
  align-self: stretch;
  text-align: center;
}


/* ==========================================================================
   12. PIED DE PAGE
   Le sol de la clairière : brun profond, texte crème. Un fin liseré
   doré le sépare du reste.
   ========================================================================== */

.pied {
  margin-top: var(--espace-section);
  padding: 3.5rem var(--gouttiere) 2.5rem;
  background: var(--brun);
  color: var(--creme);
  text-align: center;
  border-top: 3px solid var(--or);
}

.pied-identite {
  font-size: 1.05em;
  line-height: 1.5;
}
.pied-identite strong {
  display: block;
  margin-bottom: 0.2em;
  font-family: var(--police-titres);
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--or);
}

/* Réseaux sociaux : une phrase d'invitation en italique, puis les logos
   dans des pastilles rondes. Au survol (ou au clavier), le liseré du
   cercle ET le logo passent à l'or ; le fond du cercle ne change pas.
   Pour pouvoir changer la couleur d'un logo en CSS, chaque fichier SVG sert
   de pochoir (propriété « mask ») : la forme vient du fichier, la couleur
   vient de background-color. Le fichier à utiliser est donné par la
   variable --logo, réglée par réseau (.reseau-facebook, etc.). */
.reseaux-invitation {
  margin-top: 2rem;
  font-style: italic;
  color: rgba(251, 246, 236, 0.85);
}
.reseaux {
  list-style: none;
  padding: 0;
  margin: 0.9rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}
.reseaux a {
  display: grid;
  place-items: center;              /* le logo au centre du cercle */
  width: 2.75rem;                   /* 44 px : la taille minimale conseillée pour le doigt */
  height: 2.75rem;
  border: 1px solid rgba(251, 246, 236, 0.35);
  border-radius: 50%;
  transition: border-color 0.2s ease;
}
/* Le logo lui-même : un carré de couleur découpé par le pochoir */
.reseaux a::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--creme);
  -webkit-mask: var(--logo) center / contain no-repeat;   /* Safari plus ancien */
  mask: var(--logo) center / contain no-repeat;
  transition: background-color 0.2s ease;
}
.reseau-facebook  { --logo: url("/img/reseaux/facebook.svg"); }
.reseau-instagram { --logo: url("/img/reseaux/instagram.svg"); }
.reseau-tiktok    { --logo: url("/img/reseaux/tiktok.svg"); }
.reseau-discord   { --logo: url("/img/reseaux/discord.svg"); }
.reseau-youtube   { --logo: url("/img/reseaux/youtube.svg"); }
.reseaux a:hover,
.reseaux a:focus-visible {
  border-color: var(--or);
}
.reseaux a:hover::before,
.reseaux a:focus-visible::before {
  background-color: var(--or);
}

/* Liens légaux. Leur marge du haut les sépare de ce qui précède : les
   réseaux sur l'accueil, l'identité de la maison sur les autres pages. */
.pied-liens {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.8rem;
  font-size: 0.9em;
}
.pied-liens a {
  color: var(--creme);
  text-decoration-color: rgba(220, 181, 110, 0.6);
}
.pied-liens a:hover {
  color: var(--or);
}

/* Sur le fond brun du pied, le contour de focus cuivre ne se verrait pas :
   il passe en or (contraste de 7,6) */
.pied :focus-visible {
  outline-color: var(--or);
}


/* ==========================================================================
   13. APPARITIONS AU DÉFILEMENT
   Les paragraphes du manifeste, les deux pages du livre et Sylwë se
   révèlent en glissant quand ils entrent dans l'écran. C'est une animation
   pilotée par le défilement (animation-timeline: view()), sans script.

   Deux garde-fous :
   - @supports : les navigateurs qui ne connaissent pas cette fonction
     ignorent tout le bloc et affichent la page normalement, d'emblée.
   - prefers-reduced-motion : rien ne bouge si la personne l'a demandé.
   Dans les deux cas, aucun contenu n'est jamais caché.
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .manifeste p,
    .public,
    .inscription > picture {
      animation: apparition linear both;
      animation-timeline: view();
      /* l'animation se joue pendant que l'élément franchit le bas de l'écran,
         de son entrée (0 %) jusqu'à ce qu'il soit visible à 35 % */
      animation-range: entry 0% entry 35%;
    }

    /* Les deux pages arrivent chacune de son côté, comme un livre qui s'ouvre */
    .public-auteurs  { animation-name: apparition-gauche; }
    .public-lecteurs { animation-name: apparition-droite; }

  }
}

@keyframes apparition {
  from { opacity: 0; transform: translateY(2.5rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes apparition-gauche {
  from { opacity: 0; transform: translateX(-3rem) rotate(-1.5deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes apparition-droite {
  from { opacity: 0; transform: translateX(3rem) rotate(1.5deg); }
  to   { opacity: 1; transform: none; }
}


/* ==========================================================================
   14. ADAPTATION AUX PETITS ÉCRANS
   En dessous de 48rem (768 px environ), le livre se referme : une seule
   colonne. Sylwë passe sous le titre, plus petit, puis les deux pages
   se suivent.
   ========================================================================== */

@media (max-width: 48rem) {

  .inscription {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "titre"
      "mascotte"
      "auteurs"
      "lecteurs";
    row-gap: 2rem;
  }

  .inscription > picture {
    justify-self: center;
    width: clamp(6rem, 28vw, 8rem);
    padding-bottom: 0.5rem;
  }

  /* Sans reliure centrale, les deux pages reprennent des coins identiques */
  .public-auteurs,
  .public-lecteurs {
    border-radius: var(--rayon);
    box-shadow: var(--ombre-douce);
  }

  /* Les bords déchirés sont moins prononcés sur un écran étroit */
  .manifeste {
    clip-path: polygon(
      0 1.4rem, 20% 0.4rem, 45% 1.6rem, 70% 0.2rem, 100% 1.2rem,
      100% calc(100% - 1.2rem), 75% calc(100% - 0.2rem), 50% calc(100% - 1.6rem),
      25% calc(100% - 0.4rem), 0 calc(100% - 1.4rem)
    );
  }

  .hero {
    gap: 1.2rem;
  }

  /* Bord déchiré moins profond sur petit écran (voir le polygone ci-dessus) */
  :root {
    --bord-dechire: 1.6rem;
  }

  /* La lueur est moins floue pour ne pas alourdir les téléphones */
  .hero::before {
    filter: blur(28px);
  }
}

/* Très petits écrans : le hero peut dépasser la hauteur de l'écran,
   on le laisse s'étirer plutôt que de comprimer le contenu. */
@media (max-height: 40rem) {
  .hero {
    min-height: auto;
  }
}


/* ==========================================================================
   15. PAGES DE RÉSULTAT (inscription.php, confirmation.php, page introuvable)
   Même en-tête que l'accueil mais plus court, puis un message centré.
   ========================================================================== */

/* L'en-tête court : pas de plein écran, logo plus petit, cliquable */
.hero-court {
  min-height: auto;
  padding-bottom: 1.5rem;
}
.hero-court > a {
  display: block;
  width: clamp(9rem, 18vw, 14rem);
  border-radius: var(--rayon);   /* pour que le contour de focus épouse le logo */
}
.hero-court > a > picture {
  width: 100%;
  animation: arrivee 1.2s ease-out both;
}

/* Le message */
.message {
  max-width: var(--largeur-lecture);
  margin: 0 auto;
  padding: 1rem var(--gouttiere) var(--espace-section);
  text-align: center;
  font-size: calc(var(--taille-texte) * 1.05);
  animation: arrivee 1.2s ease-out 0.3s both;
}
.message p + p {
  margin-top: 1em;
}
.message strong {
  color: var(--cuivre);
  overflow-wrap: anywhere;       /* une longue adresse e-mail passe à la ligne au lieu de déborder, sans être coupée si elle tient */
}

/* Liste d'erreurs, quand il y en a plusieurs */
.message-liste {
  list-style: none;
  padding: 0;
  text-align: left;
  display: inline-block;
}
.message-liste li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.5em;
}
.message-liste li::before {        /* le losange runique comme puce */
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.55em;
  width: 0.5em;
  height: 0.5em;
  rotate: 45deg;
  background: var(--cuivre);
}

/* Un liseré de couleur à gauche du message d'erreur, pour le repérer d'un coup d'œil */
.message-erreur p,
.message-erreur .message-liste {
  padding: 1rem 1.4rem;
  background: var(--blanc-casse);
  border-left: 4px solid var(--cuivre);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  text-align: left;
}

.message .bouton {
  margin-top: 2rem;
}

/* Le formulaire à un seul bouton de confirmation.php */
.message form {
  display: inline-block;
}

/* Sylwë sur la page introuvable : petit, centré au-dessus du texte */
.message > picture {
  width: clamp(6rem, 12vw, 8rem);
  margin: 0 auto 1.5rem;
}


/* ==========================================================================
   16. PAGES DE TEXTE (mentions légales, politique de confidentialité)
   En-tête court, puis une colonne de lecture alignée à gauche, avec des
   sous-titres en Cinzel.
   ========================================================================== */

.page-texte {
  max-width: var(--largeur-lecture);
  margin: 0 auto;
  padding: 1rem var(--gouttiere) var(--espace-section);
  animation: arrivee 1.2s ease-out 0.3s both;
}

/* La phrase d'introduction, dans la voix de la maison */
.page-texte .chapeau {
  font-size: calc(var(--taille-texte) * 1.1);
  font-style: italic;
  color: var(--brun-doux);
  margin-bottom: 2.5rem;
}

.page-texte h2 {
  font-size: var(--taille-h3);
  margin: 2.8rem 0 0.9rem;
  /* Le texte suit le titre de plus près sur ces pages : l'ornement aussi,
     pour garder le même équilibre qu'à l'accueil (voir section 8). */
  padding-top: 3.2rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--creme-fonce);
}
.page-texte h2:first-of-type {
  margin-top: 0;
}

.page-texte h3 {
  font-size: calc(var(--taille-texte) * 1.05);
  margin: 1.8rem 0 0.5rem;
  color: var(--cuivre);
}

.page-texte p,
.page-texte li {
  line-height: 1.6;
}

.page-texte ul {
  padding-left: 1.4em;
  margin: 0.6em 0 1em;
}
.page-texte li + li {
  margin-top: 0.35em;
}

/* Listes de mentions (éditeur, hébergeur) : un intitulé en petites capitales,
   la valeur en dessous */
.page-texte dl {
  margin: 0.6em 0 1em;
}
.page-texte dt {
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brun-doux);
  margin-top: 0.9em;
}
.page-texte dd {
  margin: 0.15em 0 0;
}


/* ==========================================================================
   17. FORMULAIRE DE CONTACT ET RETOURS DES FORMULAIRES
   La page contact.php réutilise la colonne de lecture des pages de texte
   (.page-texte). Le script public/js/formulaires.js ajoute la zone de
   résultat (.retour-formulaire) et le compteur de caractères (.compteur).
   ========================================================================== */

/* --- L'encadré « Pas de manuscrits pour le moment » --- */
.avertissement {
  position: relative;
  margin: 0 0 2.2rem;
  padding: 1.2rem 1.4rem 1.2rem 3.6rem;
  background: var(--parchemin);
  border-left: 4px solid var(--cuivre);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
/* Le losange runique, en guise d'icône, à gauche du texte */
.avertissement::before {
  content: "";
  position: absolute;
  left: 1.35rem;
  top: 1.55rem;
  width: 0.9rem;
  height: 0.9rem;
  rotate: 45deg;
  border: 2px solid var(--cuivre);
  background: radial-gradient(circle, var(--cuivre) 0 28%, transparent 30%);
}
/* Son titre : pas l'ornement ni le filet des autres titres de section */
.page-texte .avertissement h2 {
  margin: 0 0 0.35rem;
  padding: 0;
  border: 0;
  text-align: left;
  font-size: calc(var(--taille-texte) * 1.05);
  color: var(--cuivre);
}
.avertissement h2::before,
.avertissement h2::after {
  content: none;
}

/* --- Le formulaire --- */
.formulaire-contact {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.formulaire-contact label {
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brun-doux);
}
/* Champs : même allure que le champ e-mail des pages du livre */
.formulaire-contact input[type="text"],
.formulaire-contact input[type="email"],
.formulaire-contact select,
.formulaire-contact textarea {
  width: 100%;
  padding: 0.7em 1em;
  background: var(--blanc-casse);
  border: 1.5px solid #a98b69;          /* contraste de 3,1 : contour bien visible */
  border-radius: calc(var(--rayon) / 2);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.formulaire-contact textarea {
  min-height: 11rem;
  line-height: 1.5;
  resize: vertical;                     /* on peut l'agrandir en hauteur seulement */
}
/* La liste déroulante : on retire la flèche du système et on dessine la
   nôtre, un chevron cuivre (petite image SVG écrite directement ici) */
.formulaire-contact select {
  appearance: none;
  padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239e4f24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 0.8em auto;
  cursor: pointer;
}
.formulaire-contact input::placeholder,
.formulaire-contact textarea::placeholder {
  color: #826f5a;
  font-style: italic;
}
.formulaire-contact input:focus,
.formulaire-contact select:focus,
.formulaire-contact textarea:focus {
  outline: none;                        /* remplacé par la bordure et le halo */
  border-color: var(--cuivre);
  box-shadow: 0 0 0 4px rgba(196, 130, 63, 0.25);
}

/* Compteur de caractères ajouté par le script sous la zone de message */
.compteur {
  margin: 0;
  font-size: 0.85em;
  line-height: 1.4;
  color: var(--brun-doux);
  text-align: right;
  font-variant-numeric: tabular-nums;   /* les chiffres gardent la même largeur */
}
.compteur-alerte {
  color: var(--cuivre);
  font-weight: 700;
}

.page-texte .mention-rgpd {
  margin: 0;
  font-size: 0.9em;
  color: var(--brun-doux);
}

.formulaire-contact .bouton {
  align-self: flex-start;
}

/* Bouton pendant l'envoi : désactivé, le reflet s'arrête */
.bouton:disabled {
  cursor: progress;
  opacity: 0.75;
}
.bouton:disabled::after,
.bouton:disabled::before {
  animation: none;
}
.bouton:disabled::before {
  opacity: 0;
}

/* --- La zone de résultat (succès ou erreur) ---
   Affichée par le script après un envoi, ou par le serveur sans JavaScript
   (erreurs du formulaire de contact). */
.retour-formulaire {
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.4rem;
  background: var(--blanc-casse);
  border-left: 4px solid var(--cuivre);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  animation: arrivee 0.5s ease-out both;
}
/* Le script y place le focus pour que le message soit lu : pas besoin
   d'un contour, ce n'est pas un élément sur lequel on agit */
.retour-formulaire:focus {
  outline: none;
}
.retour-succes {
  border-left-color: #4a6630;           /* vert mousse, contraste de 6,4 */
}
.retour-titre {
  margin-bottom: 0.35em;
  font-family: var(--police-titres);
  font-weight: 700;
  color: var(--cuivre);
}
.retour-succes .retour-titre {
  color: #4a6630;
}
.retour-formulaire p + p {
  margin-top: 0.6em;
}
.retour-formulaire strong {
  color: var(--cuivre);
  overflow-wrap: anywhere;              /* une longue adresse passe à la ligne */
}
.retour-formulaire .message-liste {
  display: block;
  margin: 0;
}

/* Dans les pages du livre de l'accueil, le résultat remplace le formulaire
   et s'aligne en bas de la page, là où était le formulaire */
.public .retour-formulaire {
  margin: auto 0 0;
  padding-top: 1rem;
}

/* Petits écrans : bouton d'envoi sur toute la largeur */
@media (max-width: 48rem) {
  .formulaire-contact .bouton {
    align-self: stretch;
    text-align: center;
  }
}


/* ==========================================================================
   18. INFOBULLE (définition qui s'affiche près d'un mot)
   Un petit « ? » dans un cercle, après l'expression à expliquer ; la
   définition apparaît dans une bulle au-dessus :
   - au survol de la souris (CSS seul) ; un clic ne la fige pas : elle
     disparaît dès que la souris s'en va ;
   - au clavier, quand le « ? » est atteint avec Tab (CSS seul) ;
   - au toucher, sur téléphone : le script public/js/infobulles.js ajoute
     la classe .ouverte au premier toucher et la retire au suivant, ou
     quand on touche ailleurs, ou avec la touche Échap.
   Le script recale aussi la bulle pour qu'elle ne sorte jamais de
   l'écran : il règle la variable --decalage (décalage horizontal) et,
   faute de place au-dessus, ajoute .en-dessous.
   Utilisé dans le manifeste, après « à compte d'éditeur ».
   ========================================================================== */

.infobulle {
  position: relative;               /* la bulle se place par rapport au « ? » */
  display: inline-block;
  margin-left: 0.12em;              /* collé au mot, comme un appel de note */
  vertical-align: 0.32em;           /* relevé comme un exposant */
  line-height: 1;
}

.infobulle-bouton {
  position: relative;
  display: inline-grid;
  place-items: center;              /* le « ? » au centre du cercle */
  width: 1.2em;
  height: 1.2em;
  /* Le « ? » de Cinzel n'est pas dessiné au centre de sa boîte : mesuré,
     il est 0,047 em trop haut et 0,015 em trop à gauche. Ces marges
     internes (le double de chaque écart) le ramènent au centre du cercle. */
  padding: 0.094em 0 0 0.03em;
  font-family: var(--police-titres);
  font-size: 0.6em;                 /* cercle d'environ 0,7 fois la taille du texte */
  font-weight: 700;
  line-height: 1;
  color: var(--cuivre);
  background: transparent;
  border: 1px solid var(--cuivre);
  border-radius: 50%;
  cursor: help;                     /* la flèche avec un point d'interrogation */
  transition: background-color 0.15s ease, color 0.15s ease;
}
/* Le cercle est petit : une zone invisible autour agrandit la surface
   qu'on peut toucher du doigt, sans rien changer à l'affichage. */
.infobulle-bouton::before {
  content: "";
  position: absolute;
  inset: -0.8em;                    /* zone de toucher d'environ 34 px de côté */
}
/* Le « ? » se remplit de cuivre quand sa bulle est affichée. :focus-visible
   (et non :focus) : seulement quand on y arrive au clavier ; un clic de
   souris lui donne aussi le focus, mais ne doit rien figer (voir plus bas). */
.infobulle.ouverte .infobulle-bouton,
.infobulle-bouton:focus-visible {
  color: var(--creme);
  background-color: var(--cuivre);
}

/* La bulle, cachée par défaut (visibility: hidden : ni vue, ni cliquable,
   mais toujours lue par les lecteurs d'écran grâce à aria-describedby). */
.infobulle-texte {
  position: absolute;
  z-index: 10;
  bottom: calc(100% + 0.7rem);      /* au-dessus du « ? » */
  left: 50%;
  /* centrée sur le « ? », puis décalée si le script l'a jugé nécessaire */
  translate: calc(-50% + var(--decalage, 0px)) 0;
  /* Largeur en em (proportionnelle à la taille du texte de la bulle) : une
     cinquantaine de caractères par ligne, jamais plus large que l'écran. */
  width: min(24em, calc(100vw - 2rem));
  padding: 0.7em 0.9em;
  font-family: var(--police-texte);
  /* Un peu plus petit que le texte de la page (90 %) : lisible sans
     rivaliser avec lui. Il grandit avec l'écran, comme le texte courant. */
  font-size: calc(var(--taille-texte) * 0.9);
  font-weight: 500;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;              /* annule le nowrap de .sans-coupure */
  text-wrap: pretty;                /* pas de mot seul en dernière ligne (ignoré si non pris en charge) */
  color: var(--brun);
  background: var(--creme);
  border: 1px solid var(--cuivre-clair);
  border-radius: var(--rayon);
  box-shadow: 0 0.5rem 1.4rem rgba(59, 35, 20, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
/* La pointe, sous la bulle, toujours en face du « ? » même quand la bulle
   est décalée (d'où le « - var(--decalage) »). */
.infobulle-texte::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - var(--decalage, 0px));
  translate: -50% -50%;
  width: 0.7rem;
  height: 0.7rem;
  rotate: 45deg;
  background: var(--creme);
  border-right: 1px solid var(--cuivre-clair);
  border-bottom: 1px solid var(--cuivre-clair);
}
/* Un pont invisible entre le « ? » et la bulle : la souris peut passer de
   l'un à l'autre sans que la bulle se ferme (on peut ainsi la lire, ou en
   sélectionner le texte). */
.infobulle-texte::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.8rem;
}

/* Quand l'afficher : le « ? » a été atteint au clavier (:focus-visible),
   ou le script l'a ouverte au toucher (.ouverte). Un clic de souris donne
   le focus au « ? » sans activer :focus-visible : sur ordinateur, la bulle
   suit donc le seul survol, et disparaît quand la souris s'en va. */
.infobulle-bouton:focus-visible + .infobulle-texte,
.infobulle.ouverte .infobulle-texte {
  opacity: 1;
  visibility: visible;
}
/* Écran tactile sans JavaScript : un toucher donne le focus au « ? », qui
   suffit alors à afficher la bulle (avec JavaScript, .ouverte s'en charge). */
@media (hover: none) {
  .infobulle-bouton:focus {
    color: var(--creme);
    background-color: var(--cuivre);
  }
  .infobulle-bouton:focus + .infobulle-texte {
    opacity: 1;
    visibility: visible;
  }
}
/* Le survol, seulement sur les appareils qui ont une vraie souris : sur un
   écran tactile, un toucher laisse l'élément « survolé » jusqu'au toucher
   suivant, et la bulle ne se refermerait plus. */
@media (hover: hover) {
  .infobulle:hover .infobulle-bouton {
    color: var(--creme);
    background-color: var(--cuivre);
  }
  .infobulle:hover .infobulle-texte {
    opacity: 1;
    visibility: visible;
  }
}
/* Touche Échap : le script ajoute .masquee, qui l'emporte sur tout le reste
   jusqu'à ce que la souris ou le focus quitte le « ? ». */
.infobulle.masquee .infobulle-texte {
  opacity: 0;
  visibility: hidden;
}

/* Pas assez de place au-dessus : la bulle passe en dessous du « ? » */
.infobulle.en-dessous .infobulle-texte {
  bottom: auto;
  top: calc(100% + 0.7rem);
}
.infobulle.en-dessous .infobulle-texte::after {
  top: 0;
  rotate: 225deg;
}
.infobulle.en-dessous .infobulle-texte::before {
  top: auto;
  bottom: 100%;
}