/* ==========================================================================
   BACHIR BOUAZIZ — Romancier · Fédéraliste
   Feuille de style principale

   « La plume d'un romancier. L'architecture d'un penseur.
     L'élégance d'un livre ancien, dans un site contemporain. »

   Sommaire
   01. Jetons de conception (couleurs, typographie, mesures)
   02. Réinitialisation et bases
   03. Grain, papier et matières
   04. Typographie
   05. Ornements : filets, monogramme, swashes
   06. En-tête et menu
   07. Pied de page
   08. Blocs communs (sections, boutons, révélations)
   09. Accueil
   10. L'écrivain
   11. Romans
   12. Extraits
   13. Carnets fédéralistes
   14. Projet de Constitution
   15. Actualités et contact
   16. Adaptation mobile
   17. Impression
   ========================================================================== */


/* 01. JETONS DE CONCEPTION
   ========================================================================== */

:root {

  /* — Matières ————————————————————————————————————————————— */

  /* Noir profond, presque absolu. Jamais un gris. */
  --noir:           #0B0A08;
  --noir-abysse:    #060504;
  --noir-voile:     #100E0B;   /* panneaux légèrement détachés du fond */
  --noir-encre:     #16130F;   /* cartouches, cadres */

  /* Or ancien — encre dorée, feuille d'or vieillie.
     Jamais un jaune métallique brillant. */
  --or:             #C2A36B;
  --or-clair:       #E0C99B;
  --or-patine:      #A8874E;
  --or-sombre:      #7A6238;
  --or-fantome:     rgba(194, 163, 107, 0.16);
  --or-filet:       rgba(194, 163, 107, 0.28);

  /* Ivoire — les textes longs */
  --ivoire:         #E9E2D2;
  --ivoire-doux:    #D8D0BE;
  --ivoire-papier:  #EFE8D8;   /* le papier de la Constitution */

  /* Graphite — le secondaire */
  --graphite:       #8A847A;
  --graphite-clair: #AAA398;

  /* Encre sur papier (mode parchemin) */
  --encre:          #2A251E;
  --encre-douce:    #554C3F;

  /* — Typographie ————————————————————————————————————————— */

  --plume:      "Pinyon Script", "Apple Chancery", cursive;   /* le nom */
  --signature:  var(--plume);
  --titre:      "Cormorant Garamond", "Times New Roman", serif;
  --lecture:    "EB Garamond", "Iowan Old Style", Georgia, serif;
  --capitale:   "Jost", "Futura", "Helvetica Neue", sans-serif;

  /* Échelle fluide.
     Le nom est calibré pour tenir sur une seule ligne à toute largeur :
     la calligraphie est large, 10,2vw est le plafond qui la garde entière. */
  --t-nom:      clamp(2rem, 10.2vw, 8.5rem);
  --t-titre-1:  clamp(2.1rem, 5.2vw, 3.9rem);
  --t-titre-2:  clamp(1.6rem, 3.4vw, 2.5rem);
  --t-titre-3:  clamp(1.25rem, 2.2vw, 1.65rem);
  --t-manifeste:clamp(1.35rem, 2.9vw, 2.15rem);
  --t-lecture:  clamp(1.06rem, 1.15vw, 1.2rem);
  --t-petit:    0.86rem;
  --t-capitale: clamp(0.73rem, 0.12vw + 0.7rem, 0.78rem);

  /* — Mesures ——————————————————————————————————————————— */

  --colonne:      1240px;   /* largeur maximale du site */
  --colonne-texte: 34rem;   /* mesure de lecture confortable */
  --colonne-livre: 40rem;   /* mesure de la Constitution, plus large */

  --marge:        clamp(1.25rem, 5vw, 5rem);
  --souffle:      clamp(5rem, 12vw, 11rem);   /* respiration entre sections */
  --souffle-max:  clamp(7rem, 18vw, 16rem);   /* respiration des seuils */

  /* — Mouvement ————————————————————————————————————————— */

  /* Rien de rapide. Rien de brusque. */
  --rapide:    260ms;
  --lent:      720ms;
  --tres-lent: 1.2s;
  --courbe:    cubic-bezier(0.16, 1, 0.30, 1);
  --courbe-douce: cubic-bezier(0.33, 0, 0.15, 1);
}


/* 02. RÉINITIALISATION ET BASES
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  position: relative;
  margin: 0;
  background-color: var(--noir);
  color: var(--ivoire-doux);
  font-family: var(--lecture);
  font-size: var(--t-lecture);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

img,
svg,
video { display: block; max-width: 100%; }

img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--or-patine);
  color: var(--noir);
}

:focus-visible {
  outline: 2px solid var(--or-clair);
  outline-offset: 4px;
}

/* Lien d'évitement — accessibilité clavier */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.9rem 1.4rem;
  background: var(--noir-encre);
  color: var(--or);
  font-family: var(--capitale);
  font-size: var(--t-capitale);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--or-filet);
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* 03. GRAIN, PAPIER ET MATIÈRES
   ========================================================================== */

/* Grain argentique posé sur toute la page — la texture presque tactile.
   Fixe, très faible, il unifie photographies et aplats. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Halo très sourd en haut de page : la lumière d'une lampe de bureau. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(194,163,107,0.055), transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(194,163,107,0.03), transparent 65%);
}

/* Le papier — utilisé pour la Constitution et les extraits encadrés. */
.papier {
  background-color: var(--ivoire-papier);
  color: var(--encre);
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(139,113,72,0.055), transparent 12rem),
    radial-gradient(80% 55% at 15% 0%, rgba(160,130,85,0.07), transparent 60%);
}

.papier::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23p)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Traitement argentique commun à toutes les photographies :
   noir et blanc, contraste modéré, jamais « corporate ». */
.argentique {
  filter: grayscale(1) contrast(1.06) brightness(0.9);
  transition: filter var(--tres-lent) var(--courbe),
              transform var(--tres-lent) var(--courbe);
}

.argentique--chaud { filter: grayscale(0.86) sepia(0.14) contrast(1.04) brightness(0.92); }


/* 04. TYPOGRAPHIE
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 300;
  line-height: 1.12;
  margin: 0;
  color: var(--ivoire);
}

p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }

/* La ligne de signature : petites capitales très fines.
   Elle représente la pensée, quand la plume représente l'auteur. */
.qualite {
  font-family: var(--capitale);
  font-weight: 300;
  font-size: var(--t-capitale);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--or-patine);
  margin: 0;
  padding-left: 0.42em;   /* compense l'interlettrage final */
}

/* Sur-titre d'une section : le repère discret. */
.mention {
  font-family: var(--capitale);
  font-weight: 300;
  font-size: var(--t-capitale);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--graphite-clair);
  margin: 0 0 1.6rem;
  padding-left: 0.34em;
}

.mention--or { color: var(--or-patine); }

/* Titre de section, en capitales serif largement espacées. */
.titre-section {
  font-size: var(--t-titre-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 300;
}

.titre-section,
.titre-oeuvre,
.entete-page__chapeau,
.constitution-seuil__titre,
.constitution-seuil__sous {
  text-wrap: balance;
}

.titre-oeuvre {
  font-size: var(--t-titre-2);
  letter-spacing: 0.045em;
  font-style: italic;
  font-weight: 300;
}

/* Le paragraphe manifeste — grande italique claire. */
.manifeste {
  font-family: var(--titre);
  font-size: var(--t-manifeste);
  font-style: italic;
  font-weight: 300;
  line-height: 1.42;
  color: var(--ivoire);
  letter-spacing: 0.005em;
}

/* Corps de lecture — la belle serif contemporaine. */
.prose {
  max-width: var(--colonne-texte);
  color: var(--ivoire-doux);
}

.prose--large { max-width: var(--colonne-livre); }

.prose p + p { text-indent: 0; }

.prose em { color: var(--ivoire); }

/* Lettrine — ouverture d'un texte long. */
.lettrine::first-letter {
  float: left;
  font-family: var(--titre);
  font-size: 4.4em;
  line-height: 0.78;
  font-weight: 300;
  color: var(--or);
  padding: 0.06em 0.14em 0 0;
}

.discret {
  color: var(--graphite);
  font-size: var(--t-petit);
  font-family: var(--capitale);
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Citation / exergue */
.exergue {
  font-family: var(--titre);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.5;
  color: var(--ivoire);
  margin: 0;
  padding-left: clamp(1.2rem, 3vw, 2.4rem);
  border-left: 1px solid var(--or-filet);
}

/* Lien de texte courant : un filet doré qui se dessine au survol. */
.lien {
  position: relative;
  color: var(--or-clair);
  padding-bottom: 0.12em;
}
.lien::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--or-patine);
  opacity: 0.5;
  transform: scaleX(1);
  transform-origin: left;
  transition: opacity var(--rapide) ease;
}
.lien:hover::after,
.lien:focus-visible::after {
  opacity: 1;
}


/* 05. ORNEMENTS : FILETS, MONOGRAMME, SWASHES
   ========================================================================== */

/* Le filet doré — présent partout, toujours d'un cheveu d'épaisseur.
   Il se dessine du centre vers les bords lorsqu'il entre dans le champ. */
.filet {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg,
    transparent,
    var(--or-sombre) 12%,
    var(--or) 50%,
    var(--or-sombre) 88%,
    transparent);
  transform-origin: center;
  transition: transform var(--tres-lent) var(--courbe-douce);
}
:is(.js-loading, .js-ready) .filet { transform: scaleX(0); }
:is(.js-loading, .js-ready) .filet.est-visible { transform: scaleX(1); }

.filet--court { width: 5rem; margin-inline: auto; }
.filet--gauche { transform-origin: left; }
.filet--sourd { background: linear-gradient(90deg, transparent, var(--or-filet) 50%, transparent); }

/* Filet vertical — l'axe, la colonne. */
.filet-vertical {
  width: 1px;
  height: clamp(3rem, 8vw, 6rem);
  margin-inline: auto;
  background: linear-gradient(180deg, transparent, var(--or-patine), transparent);
  transform-origin: top;
  transition: transform var(--tres-lent) var(--courbe-douce);
}
:is(.js-loading, .js-ready) .filet-vertical { transform: scaleY(0); }
:is(.js-loading, .js-ready) .filet-vertical.est-visible { transform: scaleY(1); }

/* Le monogramme BB — sceau personnel.
   Deux lignes qui se rejoignent : la plume et l'architecture. */
.monogramme {
  width: 100%;
  height: 100%;
  color: var(--or);
  overflow: visible;
}

/* Les épaisseurs de trait sont portées par le SVG lui-même : le contenu
   d'un <use> échappe aux sélecteurs CSS descendants. Seule la couleur
   circule, par currentColor — il suffit donc d'agir sur `color`. */
.monogramme .trait--sceau  { stroke-width: 0.8; opacity: 0.32; }

/* Monogramme en filigrane, très en retrait, sur certaines pages. */
.filigrane {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--or);
  opacity: 0.018;         /* deviné plus que vu */
  width: clamp(20rem, 40vw, 36rem);
  aspect-ratio: 1;
}
.filigrane--droite { right: -6%; top: 14%; }
.filigrane--gauche { left: -8%; bottom: 4%; }

/* Petit losange de séparation, gravé. */
.losange {
  width: 5px; height: 5px;
  margin: 0 auto;
  transform: rotate(45deg);
  border: 1px solid var(--or-patine);
}


/* 06. EN-TÊTE ET MENU
   ========================================================================== */

.en-tete {
  position: sticky;
  top: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.15rem var(--marge);
  min-height: 4.7rem;
  isolation: isolate;
}

/* Le flou vit sur un pseudo-élément. Placé sur l'en-tête lui-même, il
   transformerait celui-ci en bloc contenant et bornerait le menu fixe à 75px. */
.en-tete::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(11, 10, 8, 0.72);
  backdrop-filter: blur(14px) saturate(0.9);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
  border-bottom: 1px solid transparent;
  transition: background var(--lent) var(--courbe),
              border-color var(--lent) var(--courbe);
}

.en-tete.est-detachee::before {
  background: rgba(8, 7, 5, 0.9);
  border-bottom-color: var(--or-fantome);
}

/* Le sceau reste toujours visible, y compris sur mobile. */
.sceau {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex: 0 0 auto;
  min-height: 44px;
}

.sceau__monogramme {
  width: 38px;
  height: 38px;
  transition: transform var(--lent) var(--courbe), color var(--lent) var(--courbe);
}
.sceau:hover .sceau__monogramme { transform: rotate(-3deg) scale(1.04); color: var(--or-clair); }

.sceau__nom {
  font-family: var(--capitale);
  font-weight: 300;
  font-size: var(--t-capitale);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ivoire-doux);
  white-space: nowrap;
}

/* Menu principal : fin, doré, discret. */
.menu { flex: 0 1 auto; }

.menu__liste {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.1vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__lien {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite-clair);
  min-height: 44px;
  padding: 0.4rem 0;
  white-space: nowrap;
  transition: color 0.8s var(--courbe);
}
.menu__lien::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--or-patine);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.7s var(--courbe);
}
.menu__lien:hover,
.menu__lien:focus-visible { color: var(--or-clair); }
.menu__lien:hover::after,
.menu__lien:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.menu__lien[aria-current="page"] { color: var(--or); }
.menu__lien[aria-current="page"]::after { transform: scaleX(1); background: var(--or-filet); }

/* Bouton d'ouverture mobile — trois filets dorés. */
.bascule-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  position: relative;
  flex: 0 0 auto;
  margin: -0.4rem -0.45rem -0.4rem 0;
}
.bascule-menu i {
  position: absolute;
  left: 7px;
  height: 1px;
  width: 30px;
  background: var(--or);
  transition: transform 0.7s var(--courbe), opacity 0.5s var(--courbe), width 0.7s var(--courbe);
}
.bascule-menu i:nth-of-type(1) { top: 14px; }
.bascule-menu i:nth-of-type(2) { top: 21px; width: 21px; }
.bascule-menu i:nth-of-type(3) { top: 28px; }

body.menu-ouvert .bascule-menu i:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
body.menu-ouvert .bascule-menu i:nth-of-type(2) { opacity: 0; }
body.menu-ouvert .bascule-menu i:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); }


/* 07. PIED DE PAGE
   ========================================================================== */

.pied {
  position: relative;
  z-index: 1;
  padding: var(--souffle) var(--marge) 3rem;
  border-top: 1px solid var(--or-fantome);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.5));
}

.pied__entete {
  text-align: center;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.pied__entete .qualite { text-align: center; }

.pied__nom {
  font-family: var(--plume);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1;
  font-weight: 400;
  color: var(--or);
  margin: 0 0 1.5rem;
}

.pied__colonnes {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: var(--colonne);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
}

.pied__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-family: var(--capitale);
  font-weight: 300;
  font-size: var(--t-capitale);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}
.pied__liste--droite { justify-content: flex-end; }
.pied__liste a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color var(--rapide) ease;
}
.pied__liste a:hover { color: var(--or); }

.pied__sceau {
  width: 62px;
  height: 62px;
  color: var(--or-patine);
  justify-self: center;
}

.pied__devise {
  margin: clamp(3.5rem, 7vw, 5rem) 0 0;
  text-align: center;
  font-family: var(--titre);
  font-style: italic;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: var(--graphite-clair);
}

.pied__legal {
  margin: 2.5rem 0 0;
  text-align: center;
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #827C72;
}


/* 08. BLOCS COMMUNS
   ========================================================================== */

main { position: relative; z-index: 1; }

.section {
  position: relative;
  padding: var(--souffle) var(--marge);
}

.section--seuil { padding-block: var(--souffle-max); }
.section--sans-haut { padding-top: 0; }

.contenu {
  max-width: var(--colonne);
  margin-inline: auto;
}

.contenu--etroit { max-width: 56rem; }

/* En-tête de page intérieure : mention, titre, filet, chapeau. */
.entete-page {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 8rem) var(--marge) clamp(2.75rem, 6vw, 4.5rem);
  text-align: center;
}

.entete-page .filet { max-width: 7rem; margin: 2.4rem auto; }

.entete-page__chapeau {
  max-width: 40rem;
  margin: 0 auto;
  font-family: var(--titre);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.6;
  color: var(--graphite-clair);
}

/* Les pages littéraires sont plus organiques; les pages de pensée gardent
   une géométrie presque architecturale. La palette reste commune. */
.univers--oeuvre .entete-page {
  background:
    radial-gradient(44rem 18rem at 50% 5%, rgba(233,226,210,0.045), transparent 72%);
}
.univers--oeuvre .titre-section {
  text-transform: none;
  letter-spacing: 0.035em;
  font-style: italic;
}
.univers--pensee .entete-page {
  background-image:
    linear-gradient(rgba(194,163,107,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194,163,107,0.022) 1px, transparent 1px);
  background-size: 3rem 3rem;
  background-position: center;
}

/* Le bouton — un filet, un mot, une flèche. Rien d'autre. */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  font-family: var(--capitale);
  font-weight: 300;
  font-size: var(--t-capitale);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--or);
  min-height: 44px;
  padding: 1.05em 0 0.85em;
  border-top: 1px solid var(--or-filet);
  transition: color var(--rapide) ease, border-color var(--rapide) ease;
}
.bouton__fleche {
  display: inline-block;
  transition: transform var(--rapide) var(--courbe);
}
.bouton:hover,
.bouton:focus-visible { color: var(--or-clair); border-top-color: var(--or); }
.bouton:hover .bouton__fleche { transform: translateX(0.5em); }

/* Variante encadrée, pour les appels isolés. */
.bouton--cadre {
  border: 1px solid var(--or-filet);
  padding: 1.15em 2.4em 1em;
}
.bouton--cadre:hover { border-color: var(--or-patine); background: rgba(194,163,107,0.04); }

/* Révélation progressive — les pages apparaissent comme dévoilées.

   L'état masqué est conditionné aux phases `js-loading` et `js-ready`.
   Un garde-fou dans la page les retire si le script principal ne répond pas. */
.reveal {
  transition: opacity var(--lent) var(--courbe),
              transform var(--lent) var(--courbe);
  transition-delay: var(--delai, 0ms);
}
.reveal.est-initiale { transition: none; }
:is(.js-loading, .js-ready) .reveal { opacity: 0; transform: translateY(16px); }
:is(.js-loading, .js-ready) .reveal.est-visible { opacity: 1; transform: none; }

:is(.js-loading, .js-ready) .reveal--sans-mouvement { transform: none; }

/* Les listes marquées data-egrene révèlent réellement leurs lignes. */
[data-egrene] > * {
  transition: opacity var(--lent) var(--courbe),
              transform var(--lent) var(--courbe);
  transition-delay: var(--delai, 0ms);
}
:is(.js-loading, .js-ready) [data-egrene] > * { opacity: 0; transform: translateY(10px); }
:is(.js-loading, .js-ready) [data-egrene].est-visible > * { opacity: 1; transform: none; }

/* Cadre extrêmement fin, couleur or — pour les couvertures et les images. */
.cadre-or {
  position: relative;
  padding: 0.55rem;
  border: 1px solid var(--or-fantome);
}
.cadre-or::after {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border: 1px solid var(--or-filet);
  pointer-events: none;
}

.cadre-or > picture,
.chemin__fond picture {
  display: block;
  width: 100%;
  height: 100%;
}


/* 09. ACCUEIL
   ========================================================================== */

.seuil {
  position: relative;
  min-height: calc(100svh - 70px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(4rem, 10vw, 8rem) var(--marge) clamp(5rem, 10vw, 7rem);
  overflow: hidden;
}

/* Aucun enfant ne peut élargir la page : la calligraphie est ample. */
.seuil > * { max-width: 100%; }
.seuil__manifeste { width: 100%; }

/* Le nom, en grande calligraphie à la plume.
   Pleins et déliés, élégante, personnelle et lisible. */
.seuil__nom {
  font-family: var(--plume);
  font-weight: 400;
  font-size: var(--t-nom);
  line-height: 0.95;
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
  padding: 0.08em 0.06em;   /* laisse respirer les déliés */
  background: linear-gradient(105deg,
    var(--or-sombre) 0%,
    var(--or) 22%,
    var(--or-clair) 42%,
    var(--or) 58%,
    var(--or-patine) 78%,
    var(--or-clair) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.seuil__manifeste {
  max-width: 42rem;
  margin: clamp(2.6rem, 6vw, 4rem) auto 0;
}

.seuil__manifeste .filet { max-width: 4rem; margin: 0 auto 2.4rem; }

/* Invitation à descendre : un filet vertical qui respire. */
.seuil__descente {
  position: absolute;
  bottom: clamp(1.5rem, 4vw, 3rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.seuil__descente span {
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--graphite);
}
.seuil__descente i {
  display: block;
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(180deg, var(--or-patine), transparent);
  animation: respire 4.5s var(--courbe-douce) infinite;
  transform-origin: top;
}

@keyframes respire {
  0%, 100% { transform: scaleY(0.5); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* Les deux chemins — l'œuvre et les carnets.
   Deux expressions d'un même auteur : ils partagent la même grille. */
.chemins {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;                       /* le filet qui les sépare et les unit */
  background: var(--or-fantome);
  border-block: 1px solid var(--or-fantome);
}

.chemin {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(30rem, 62vh, 44rem);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--noir);
  overflow: hidden;
  isolation: isolate;
}

.chemin__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.chemin__fond img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.4;
  transform: scale(1.03);
  transition: transform 2.4s var(--courbe), opacity 2.4s var(--courbe);
}
.chemin:hover .chemin__fond img { transform: scale(1.08); opacity: 0.52; }

.chemin__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(11,10,8,0.55) 0%,
    rgba(11,10,8,0.7) 45%,
    rgba(11,10,8,0.94) 100%);
}

.chemin__titre {
  font-size: var(--t-titre-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 300;
  margin: 0 0 1rem;
  color: var(--ivoire);
}

.chemin__sommaire {
  font-family: var(--capitale);
  font-weight: 300;
  font-size: var(--t-capitale);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or-patine);
  margin: 0 0 1.8rem;
}

.chemin__texte {
  max-width: 26rem;
  color: var(--ivoire-doux);
  margin-bottom: 2.4rem;
}

.chemin .bouton { align-self: flex-start; }
.chemin > .schema { width: auto; }

/* Le passage entre les deux univers — la phrase de couture. */
.couture {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}
.couture .losange { margin-bottom: 2.6rem; }


/* 10. L'ÉCRIVAIN
   ========================================================================== */

/* Mise en page d'une page de livre d'art : énormément d'espace autour. */
.ecrivain {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(3rem, 8vw, 7rem);
  align-items: start;
  max-width: var(--colonne);
  margin-inline: auto;
}

.ecrivain__portrait { position: sticky; top: 7rem; }

.ecrivain__portrait figcaption {
  margin-top: 1.4rem;
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
}

.ecrivain__texte { padding-top: clamp(0rem, 4vw, 3rem); }
.ecrivain__texte .prose { max-width: 36rem; }

.ecrivain__texte h2 { margin-bottom: 2.6rem; }

/* La signature manuscrite qui ferme la présentation. */
.signature {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.signature__trait {
  font-family: var(--signature);
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  line-height: 1;
  color: var(--or);
  margin: 0;
}
.signature__mention {
  margin: 0.6rem 0 0;
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* Repères biographiques — une frise très sobre. */
.reperes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--or-fantome);
}
.reperes li {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.5rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--or-fantome);
}
.reperes__date {
  font-family: var(--capitale);
  font-weight: 300;
  font-size: var(--t-capitale);
  letter-spacing: 0.18em;
  color: var(--or-patine);
  padding-top: 0.35em;
}
.reperes__fait { color: var(--ivoire-doux); font-size: 1rem; }


/* 11. ROMANS
   ========================================================================== */

/* Chaque roman : un objet éditorial précieux. */
.roman {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
  max-width: var(--colonne);
  margin-inline: auto;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.roman + .roman { border-top: 1px solid var(--or-fantome); }

.roman--inverse { direction: rtl; }
.roman--inverse > * { direction: ltr; }

/* Un livre garde la taille d'un livre : jamais une affiche. */
.roman__couverture { position: relative; max-width: 23rem; }

.roman__couverture img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

/* Couverture en attente : un cartouche gravé, jamais une image cassée. */
.couverture-attente {
  aspect-ratio: 2 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  text-align: center;
  padding: 2rem;
  background:
    linear-gradient(160deg, var(--noir-encre), var(--noir-abysse));
}
.couverture-attente__monogramme { width: 54px; height: 54px; color: var(--or-patine); opacity: 0.7; }
.couverture-attente__titre {
  font-family: var(--titre);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ivoire-doux);
  margin: 0;
}
.couverture-attente__mention {
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0;
}

.roman__editeur {
  font-family: var(--capitale);
  font-weight: 300;
  font-size: var(--t-capitale);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--or-patine);
  margin: 0.9rem 0 2rem;
}

.roman__titre { margin-bottom: 0.6rem; }

.roman__presentation { margin-bottom: 2.6rem; }

/* Les thèmes du roman — de fines étiquettes gravées. */
.themes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 2.6rem;
  padding: 0;
}
.themes li {
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite-clair);
  padding: 0.5em 1.1em 0.42em;
  border: 1px solid var(--or-fantome);
}

/* Bloc de sous-titre interne (Synopsis, Extrait, Réception…) */
.intertitre {
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--or-patine);
  margin: 0 0 1.2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--or-fantome);
}

.bloc + .bloc { margin-top: 2.8rem; }

/* Retours de lecture */
.critique {
  margin: 0;
  padding-left: 1.6rem;
  border-left: 1px solid var(--or-filet);
}
.critique p {
  font-family: var(--titre);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ivoire);
}
.critique footer {
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
}


/* 12. EXTRAITS
   ========================================================================== */

/* L'extrait est posé sur du papier : on quitte l'écran, on entre dans le livre. */
.extrait {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.6rem, 6vw, 4.5rem) clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--or-fantome);
  background:
    linear-gradient(180deg, rgba(233,226,210,0.035), rgba(233,226,210,0.012));
}

.extrait + .extrait { margin-top: clamp(3rem, 7vw, 5rem); }

.extrait__source {
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--or-patine);
  margin: 0 0 2rem;
  text-align: center;
}

.extrait__texte {
  font-family: var(--lecture);
  font-size: clamp(1.08rem, 1.3vw, 1.22rem);
  line-height: 1.85;
  color: var(--ivoire);
}

.extrait__texte p:first-child { margin-top: 0; }

.extrait__fin {
  margin: 2.4rem auto 0;
  width: 3.5rem;
  height: 1px;
  background: var(--or-filet);
}

/* Sur les pages d'extraits, le texte quitte réellement l'écran noir pour
   devenir une page de livre. */
.extrait.papier {
  color-scheme: light;
  background-color: var(--ivoire-papier);
  border-color: rgba(194,163,107,0.48);
  box-shadow: 0 2.5rem 5rem rgba(0,0,0,0.34);
}
.extrait.papier > * { position: relative; z-index: 1; }
.extrait.papier .extrait__source { color: var(--or-sombre); }
.extrait.papier .extrait__texte { color: var(--encre); }
.extrait.papier .lettrine::first-letter { color: var(--or-sombre); }
.extrait.papier .extrait__fin { background: var(--or-patine); }


/* 13. CARNETS FÉDÉRALISTES
   ========================================================================== */

/* Le vocabulaire visuel change : architecture, géométrie, document.
   Même palette, même souffle — un autre trait. */

.carnets-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(3rem, 8vw, 6rem);
  align-items: center;
  max-width: var(--colonne);
  margin-inline: auto;
}

/* Le schéma du fédéralisme :
   unité → autonomie → coopération → unité. */
.schema {
  width: 100%;
  color: var(--or);
  overflow: visible;
}
.schema .ligne {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  transition: stroke-dashoffset 2.4s var(--courbe-douce);
  transition-delay: var(--delai, 0ms);
}
:is(.js-loading, .js-ready) .schema .ligne {
  stroke-dasharray: var(--longueur, 400);
  stroke-dashoffset: var(--longueur, 400);
}
:is(.js-loading, .js-ready) .schema.est-visible .ligne { stroke-dashoffset: 0; }

.schema .ligne--maitresse { stroke-width: 1.6; }
.schema .ligne--liaison   { stroke-width: 0.6; opacity: 0.45; }
.schema .noeud {
  fill: var(--noir);
  stroke: currentColor;
  stroke-width: 1;
  transition: opacity 1.2s var(--courbe);
  transition-delay: var(--delai, 0ms);
}
:is(.js-loading, .js-ready) .schema .noeud { opacity: 0; }
:is(.js-loading, .js-ready) .schema.est-visible .noeud { opacity: 1; }
.schema .etiquette {
  fill: var(--graphite-clair);
  font-family: var(--capitale);
  font-size: 7px;
  font-weight: 300;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  transition: opacity 1.4s var(--courbe);
  transition-delay: var(--delai, 0ms);
}
:is(.js-loading, .js-ready) .schema .etiquette { opacity: 0; }
:is(.js-loading, .js-ready) .schema.est-visible .etiquette { opacity: 1; }

/* Chaque texte est présenté comme une entrée dans un carnet. */
.carnets-liste {
  max-width: var(--colonne);
  margin-inline: auto;
  border-top: 1px solid var(--or-fantome);
}

.carnet {
  display: grid;
  grid-template-columns: clamp(6rem, 12vw, 11rem) minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: baseline;
  padding: clamp(2.2rem, 4.5vw, 3.4rem) 0;
  border-bottom: 1px solid var(--or-fantome);
  transition: background 1.1s var(--courbe);
}
.carnet:hover { background: rgba(194,163,107,0.022); }

.carnet__numero {
  font-family: var(--titre);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--or-patine);
  margin: 0;
}

.carnet__date {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
}

.carnet__titre {
  font-size: var(--t-titre-3);
  font-weight: 300;
  margin: 0 0 0.8rem;
  color: var(--ivoire);
  transition: color 0.9s var(--courbe);
}
.carnet:hover .carnet__titre { color: var(--or-clair); }

.carnet__resume {
  margin: 0;
  color: var(--graphite-clair);
  max-width: 38rem;
  font-size: 1rem;
}

.carnet__theme {
  margin: 1.1rem 0 0;
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or-patine);
}

.carnet__acces {
  font-family: var(--capitale);
  font-weight: 300;
  font-size: var(--t-capitale);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or-patine);
  white-space: nowrap;
  transition: transform 0.9s var(--courbe), color 0.9s var(--courbe);
}
.carnet:hover .carnet__acces { color: var(--or-clair); transform: translateX(0.4em); }

/* Rappel discret vers la Constitution depuis les Carnets. */
.appel-constitution {
  position: relative;
  max-width: var(--colonne);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--or-fantome);
  text-align: center;
  overflow: hidden;
}


/* 14. PROJET DE CONSTITUTION
   ========================================================================== */

/* Ce n'est pas un article. C'est un document fondateur.
   Le texte se lit sur du papier ivoire, posé au centre du noir. */

.constitution-seuil {
  text-align: center;
  padding: clamp(6rem, 15vw, 11rem) var(--marge) clamp(4rem, 8vw, 6rem);
}

.constitution-seuil__titre {
  font-size: var(--t-titre-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 300;
  margin: 0;
}

.constitution-seuil__sous {
  margin: 1.8rem auto 0;
  max-width: 34rem;
  font-family: var(--titre);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--or-patine);
}

/* Sommaire des titres — une architecture, pas une liste de blog. */
.sommaire {
  max-width: 46rem;
  margin-inline: auto;
  counter-reset: titre;
}

.sommaire__entree {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--or-fantome);
  transition: transform var(--rapide) ease;
}
.sommaire__entree:first-child { border-top: 1px solid var(--or-fantome); }
.sommaire__entree:hover { transform: translateX(0.5rem); }

.sommaire__rang {
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--or-patine);
  min-width: 4.5rem;
}

.sommaire__intitule {
  font-family: var(--titre);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 300;
  color: var(--ivoire);
  transition: color 0.9s var(--courbe);
}
.sommaire__entree:hover .sommaire__intitule { color: var(--or-clair); }

.sommaire__compte {
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* Le titre en cours de lecture s'éclaire discrètement dans le sommaire. */
.sommaire__entree.est-lue { transform: translateX(0.5rem); }
.sommaire__entree.est-lue .sommaire__rang { color: var(--or); }
.sommaire__entree.est-lue .sommaire__intitule { color: var(--or-clair); }

/* Le livre : papier ivoire, colonne large, serif, numérotation claire. */
.livre {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6.5rem) clamp(1.8rem, 6vw, 5.5rem);
  border: 1px solid var(--or-fantome);
  box-shadow: 0 3rem 6rem rgba(0,0,0,0.55);
}

.livre__contenu {
  position: relative;
  z-index: 1;
  max-width: var(--colonne-livre);
  margin-inline: auto;
  font-family: var(--lecture);
  font-size: clamp(1.08rem, 1.2vw, 1.18rem);
  line-height: 1.85;
  color: var(--encre);
}

.livre__preambule {
  font-family: var(--titre);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.6;
  color: var(--encre);
  text-align: center;
  margin-bottom: 3rem;
}

.livre h2 {
  font-family: var(--titre);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre);
  text-align: center;
  margin: clamp(3.5rem, 7vw, 5rem) 0 0.6rem;
  scroll-margin-top: 6rem;
}
.livre h2:first-of-type { margin-top: 0; }

.livre h2 + .livre__soustitre {
  text-align: center;
  font-family: var(--titre);
  font-style: italic;
  color: var(--encre-douce);
  margin-bottom: 2.6rem;
}

.livre h3 {
  font-family: var(--capitale);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 2.8rem 0 1rem;
}

.livre__filet {
  width: 4rem;
  height: 1px;
  background: var(--or-patine);
  margin: 1.6rem auto 2.6rem;
  opacity: 0.6;
}

/* Article : numérotation claire, en marge quand la place le permet. */
.article {
  margin-bottom: 1.9rem;
}
.article__numero {
  display: block;
  font-family: var(--capitale);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or-sombre);
  margin-bottom: 0.35rem;
}
.article p { margin-bottom: 0.9em; }

.article__alinea {
  display: block;
  padding-left: 1.6rem;
  text-indent: -1.6rem;
}

/* Bandeau d'actions du document. */
.actions-document {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

[data-imprimer] { display: none; }
.js-ready [data-imprimer] { display: inline-flex; }


/* 15. ACTUALITÉS ET CONTACT
   ========================================================================== */

.actualites { max-width: 52rem; margin-inline: auto; border-top: 1px solid var(--or-fantome); }

.actualite {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2rem, 4vw, 2.8rem) 0;
  border-bottom: 1px solid var(--or-fantome);
}

.actualite__date {
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-patine);
  padding-top: 0.5em;
}

.actualite__titre {
  font-size: var(--t-titre-3);
  font-weight: 300;
  margin: 0 0 0.7rem;
}

.actualite__texte { margin: 0; color: var(--graphite-clair); font-size: 1rem; }

/* Contact */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 8vw, 6rem);
  max-width: var(--colonne);
  margin-inline: auto;
}

.contact__voies { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.contact__voies li {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--or-fantome);
}
.contact__voies li:first-child { border-top: 1px solid var(--or-fantome); }
.contact__intitule {
  display: block;
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 0.5rem;
}
.contact__valeur {
  font-family: var(--titre);
  font-size: 1.2rem;
  color: var(--ivoire);
  overflow-wrap: anywhere;
}

/* Formulaire — aussi sobre que le reste. */
.formulaire { margin-top: 2.5rem; }

.champ { margin-bottom: 2rem; }

.champ label {
  display: block;
  font-family: var(--capitale);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 0.7rem;
}

.champ input,
.champ textarea {
  width: 100%;
  padding: 0.85rem 0;
  font-family: var(--lecture);
  font-size: 1.02rem;
  color: var(--ivoire);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--or-fantome);
  transition: border-color 0.9s var(--courbe);
}
.champ input:focus,
.champ textarea:focus {
  outline: 2px solid var(--or-patine);
  outline-offset: 4px;
  border-bottom-color: var(--or-patine);
}
.champ textarea { resize: vertical; min-height: 8rem; line-height: 1.7; }


/* 16. ADAPTATION MOBILE
   ========================================================================== */

@media (max-width: 1280px) {

  /* Avec JS, le menu devient un vrai voile plein écran. Sans JS, la
     navigation reste disponible sous forme de ruban horizontal. */
  .js .bascule-menu { display: flex; }

  .js .menu {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    padding: calc(5rem + env(safe-area-inset-top)) var(--marge)
             calc(2rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(6, 5, 4, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 420ms var(--courbe), visibility 0s linear 420ms;
  }

  .js .sceau,
  .js .bascule-menu { position: relative; z-index: 401; }

  .js body.menu-ouvert .menu {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s;
  }
  body.menu-ouvert { overflow: hidden; }

  .js .menu__liste {
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.55rem, 2.5vh, 1.35rem);
    min-height: min-content;
    text-align: center;
  }

  .js .menu__lien {
    font-size: 0.78rem;
    letter-spacing: 0.26em;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 520ms var(--courbe), transform 520ms var(--courbe), color var(--rapide) ease;
  }
  .js body.menu-ouvert .menu__lien {
    opacity: 1;
    transform: none;
    transition-delay: calc(60ms + var(--rang, 0) * 35ms);
  }

  html:not(.js) .en-tete {
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }
  html:not(.js) .menu {
    flex: 1 1 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  html:not(.js) .menu__liste {
    width: max-content;
    min-width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 1280px) and (max-height: 620px) {
  .js .menu { align-items: flex-start; }
  .js .menu__liste { gap: 0.2rem; }
  .js .menu__lien { min-height: 38px; font-size: 0.72rem; }
}

@media (max-width: 900px) {

  /* Sur petit écran, le filigrane n'a plus de place pour respirer. */
  .filigrane { display: none; }

  .chemins { grid-template-columns: 1fr; }
  .chemin { min-height: 30rem; }

  .ecrivain { grid-template-columns: 1fr; }
  .ecrivain__portrait { position: static; max-width: 26rem; margin-inline: auto; }

  .roman { grid-template-columns: 1fr; }
  .roman--inverse { direction: ltr; }
  .roman__couverture { max-width: 20rem; }

  .carnets-intro { grid-template-columns: 1fr; }

  .contact { grid-template-columns: 1fr; }

  .pied__colonnes {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 2.5rem;
  }
  .pied__liste { justify-content: center; }
  .pied__liste--droite { justify-content: center; }
}

@media (max-width: 640px) {

  :root {
    --souffle: clamp(3.75rem, 18vw, 5rem);
    --souffle-max: clamp(5rem, 24vw, 7rem);
  }

  body::before,
  body::after { position: absolute; }

  .sceau__nom { display: none; }

  .en-tete {
    min-height: 4.35rem;
    padding-block: 0.75rem;
  }

  .entete-page { padding-top: clamp(3.25rem, 14vw, 4.75rem); }
  .titre-section { letter-spacing: 0.065em; }
  .univers--oeuvre .titre-section { letter-spacing: 0.02em; }

  .seuil {
    min-height: calc(100svh - 4.35rem);
    padding-top: 3.5rem;
  }

  .chemin { padding: 2.25rem var(--marge); }
  .chemin__titre { letter-spacing: 0.11em; }
  .chemin__sommaire { letter-spacing: 0.14em; }

  .bouton--cadre {
    max-width: 100%;
    padding-inline: 1.4em;
  }

  .carnet {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .carnet__acces { margin-top: 0.5rem; }

  .actualite { grid-template-columns: 1fr; gap: 0.8rem; }

  .reperes li { grid-template-columns: 1fr; gap: 0.4rem; }

  .sommaire__entree { grid-template-columns: 1fr; gap: 0.5rem; }
  .sommaire__compte { display: none; }

  .schema .etiquette { font-size: 11px; letter-spacing: 0.9px; }

  .constitution-seuil {
    padding-top: clamp(4rem, 18vw, 6rem);
  }
  .constitution-seuil__titre { letter-spacing: 0.09em; }

  .livre {
    padding: clamp(2.5rem, 10vw, 3.5rem) clamp(1.25rem, 6vw, 2rem);
  }
  .livre h2 { letter-spacing: 0.1em; }

  .extrait { padding-inline: clamp(1.35rem, 7vw, 2rem); }

  .lettrine::first-letter { font-size: 3.4em; }
}

@media (max-width: 380px) {
  .qualite,
  .mention { letter-spacing: 0.25em; }
  .seuil__nom { font-size: clamp(2.2rem, 10vw, 3rem); }
  .article__alinea { padding-left: 1.15rem; text-indent: -1.15rem; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .seuil {
    min-height: calc(100svh - 4.35rem);
    padding-block: 2rem;
  }
  .seuil__manifeste { margin-top: 1.4rem; }
  .seuil__manifeste .filet { margin-bottom: 1.25rem; }
  .seuil__descente { display: none; }
}

/* Le calme avant tout : si le visiteur refuse le mouvement, on le respecte. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  :is(.js-loading, .js-ready) .reveal,
  :is(.js-loading, .js-ready) [data-egrene] > * { opacity: 1; transform: none; }
  :is(.js-loading, .js-ready) .filet { transform: scaleX(1); }
  :is(.js-loading, .js-ready) .filet-vertical { transform: scaleY(1); }
  :is(.js-loading, .js-ready) .schema .ligne { stroke-dashoffset: 0; }
  :is(.js-loading, .js-ready) .schema .noeud,
  :is(.js-loading, .js-ready) .schema .etiquette { opacity: 1; }
  .chemin:hover .chemin__fond img,
  .sceau:hover .sceau__monogramme,
  .carnet:hover .carnet__acces { transform: none; }
}

@media (forced-colors: active) {
  .seuil__nom {
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    background: none;
  }
}


/* 17. IMPRESSION
   ========================================================================== */

/* « Lire le texte intégral » — le document doit pouvoir devenir un PDF
   propre, en noir sur blanc, sans ornement d'écran. */
@media print {

  :root { --colonne-livre: 100%; }

  body {
    background: #fff;
    color: #000;
    font-family: var(--lecture);
    font-size: 11.5pt;
    line-height: 1.6;
  }

  body::before,
  body::after { display: none; }

  .en-tete,
  .pied,
  .bascule-menu,
  .menu,
  .actions-document,
  .filigrane,
  .seuil__descente,
  .ne-pas-imprimer { display: none !important; }

  main { padding: 0; }

  .reveal { opacity: 1 !important; transform: none !important; }
  .filet { transform: scaleX(1) !important; }

  /* L'ivoire est fait pour le noir. Sur le papier, l'encre redevient noire. */
  p, li, td, a, .lien, .prose, .prose p, .manifeste, .exergue,
  .entete-page__chapeau, .livre__contenu, .livre__preambule,
  .extrait__texte, .article p { color: #000 !important; }
  .lien::after { display: none; }

  h1, h2, h3, h4 { color: #000 !important; }

  /* Les petites capitales gardent leur or, assourdi pour l'impression. */
  .mention, .qualite, .discret, .article__numero,
  .livre__soustitre, .constitution-seuil__sous { color: #7A6238 !important; }

  .livre {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: #fff;
  }
  .papier::before { display: none; }
  .livre__contenu { max-width: none; color: #000; }

  .livre h2 {
    color: #000;
    page-break-after: avoid;
    break-after: avoid;
    margin-top: 2.2rem;
  }
  .livre h3 { color: #222; page-break-after: avoid; break-after: avoid; }

  .article {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .article__numero { color: #444; }

  .constitution-seuil { padding: 0 0 1.5rem; }
  .constitution-seuil__titre { color: #000; font-size: 20pt; }
  .constitution-seuil__sous { color: #333; }

  a { color: #000; text-decoration: none; }

  @page { margin: 2cm 2.2cm; }
}