/* Site de Rochdi Badereddine — feuille de style unique, sans dépendance externe.
   Direction « nuit et or » (4 octobre 2026) : l'univers de ses couvertures, de son logo et de son Instagram. */

/* Polices hébergées sur le site (licence SIL Open Font License, textes dans assets/fonts/) :
   aucune requête vers un service tiers. Cinzel pour les capitales, EB Garamond pour le texte. */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/cinzel-normal-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: "EB Garamond"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("../fonts/eb-garamond-italic-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("../fonts/eb-garamond-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/eb-garamond-normal-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/eb-garamond-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --papier: #0a0f1c;        /* bleu nuit du fond */
  --papier-2: #10182b;      /* bandes alternées */
  --surface: #131c31;       /* cartes et encadrés */
  --encre: #efe7d6;         /* texte ivoire */
  --encre-2: #d9d2c3;
  --doux: #c6ccd8;
  --ligne: rgba(217, 164, 92, .22);
  --bord-champ: #9a7a4c;    /* contour des champs : au moins 3:1 sur le fond */
  --accent: #d9a45c;        /* or */
  --accent-fort: #ecd3a4;
  --or-pale: #ecd3a4;
  --bouton-fond: #d9a45c;
  --bouton-texte: #1a1206;
  --survol-texte: #1a1206;
  --pied-fond: #070a14;
  --pied-texte: #efe7d6;
  --pied-doux: #b9c0cd;
  --focus: #f2c46d;
  --u-entreprendre: #8fb3dd;
  --u-finance: #e79aa5;
  --u-travail-argent: #7fcbb6;
  --u-vie-interieure: #c9a3d0;
  --u-recits-philosophie: #e6bf7a;
  --u-pedagogie: #b3d189;
  --ombre-couv: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 32px rgba(0, 0, 0, .5);
  --ease-out: cubic-bezier(.23, 1, .32, 1);  /* sortie franche : démarre vite, se pose en douceur */
  --ombre-carte: 0 0 0 1px rgba(217, 164, 92, .12), 0 10px 30px rgba(0, 0, 0, .3);
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "EB Garamond", Georgia, "Times New Roman", serif;
  --titre: Cinzel, "EB Garamond", Georgia, serif;
  --largeur: 1180px;
  --gouttiere: clamp(16px, 4vw, 32px);
  --rayon: 4px;
  color-scheme: dark;
}


/* Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 1.12rem/1.65 var(--sans);  /* EB Garamond a un petit œil : un corps un peu plus grand pour le même confort */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
/* <picture> ne fait qu'offrir le WebP : il ne crée pas de boîte, l'image garde sa mise en page. */
picture { display: contents; }
picture > source { display: none; }  /* sinon <source> occuperait une case des grilles */
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-fort); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
/* Sur les fonds vert foncé, le contour bleu manquerait de contraste (2,6:1) : contour doré (7:1). */
.pied, .collection-vedette, .projection-demo { --focus: #f2c46d; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.18; letter-spacing: -.005em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
strong { font-weight: 650; }
.petit { font-size: .9rem; color: var(--doux); }
.conteneur { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }
.conteneur-etroit { width: min(100% - 2 * var(--gouttiere), 780px); }
.surtitre { font-family: var(--titre); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: .7rem; }
/* Titres de section en capitales Cinzel, comme les titres des couvertures. */
.titre-cap { font-family: var(--titre); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; font-size: clamp(1.25rem, 2.4vw, 1.7rem); color: var(--or-pale); margin: 0 0 .6rem; }
.surtitre a { color: inherit; text-decoration: none; }
.surtitre a:hover { text-decoration: underline; }
.intro { font-size: 1.12rem; color: var(--encre-2); max-width: 62ch; }
.sous-titre { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--doux); max-width: 60ch; }

.lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--bouton-fond); color: var(--bouton-texte); padding: .6rem 1rem; border-radius: 0 0 8px 0; }
.lien-evitement:focus { left: 0; }

/* Boutons et liens ------------------------------------------------------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 48px; padding: .8rem 1.3rem; border: 1px solid var(--encre); border-radius: 2px;
  background: transparent; color: var(--encre); font: 600 .78rem/1.3 var(--titre); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .14s var(--ease-out);
}
.bouton-primaire { background: var(--bouton-fond); border-color: var(--bouton-fond); color: var(--bouton-texte); }
.bouton-petit { min-height: 34px; padding: .3rem .8rem; font-size: .7rem; }
.lien-fleche { font-weight: 600; text-decoration: none; white-space: nowrap; }
.lien-fleche::after { content: "→"; display: inline-block; margin-left: .3em; }
.lien-fleche:hover { text-decoration: underline; }
.achat { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 .6rem; }

/* En-tête ---------------------------------------------------------------- */

.entete { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--papier) 88%, transparent); border-bottom: 1px solid var(--ligne); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
@supports not (background: color-mix(in srgb, red, blue)) { .entete { background: var(--papier); } }
.entete-interieur { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 82px; }
.marque { display: flex; flex-direction: column; color: var(--encre); text-decoration: none; line-height: 1.1; }
.marque-nom { font-family: var(--titre); font-size: .98rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--or-pale); }
.marque-fonction { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
.navigation ul { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.navigation a { display: block; padding: .5rem .7rem; border-radius: 4px; color: var(--encre); font-size: 1.05rem; font-weight: 500; text-decoration: none; }
.navigation a[aria-current] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.nav-langue a { border: 1px solid var(--ligne); font-size: .8rem; letter-spacing: .06em; margin-left: .3rem; }
.menu-bouton { display: none; align-items: center; gap: .55rem; min-height: 44px; padding: .4rem .9rem; border: 1px solid var(--encre); border-radius: 2px; background: transparent; color: var(--encre); font: 600 .72rem var(--titre); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: transform .12s var(--ease-out); }
.menu-icone, .menu-icone::before, .menu-icone::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease; }
.menu-icone { position: relative; }
.menu-icone::before, .menu-icone::after { content: ""; position: absolute; left: 0; }
.menu-icone::before { top: -5px; }
.menu-icone::after { top: 5px; }
.menu-bouton[aria-expanded="true"] .menu-icone { background: transparent; }
.menu-bouton[aria-expanded="true"] .menu-icone::before { transform: translateY(5px) rotate(45deg); }
.menu-bouton[aria-expanded="true"] .menu-icone::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1100px) {
  .js .menu-bouton { display: inline-flex; }
  .js .navigation { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--papier); border-bottom: 1px solid var(--ligne); padding: .5rem var(--gouttiere) 1rem; box-shadow: 0 12px 24px rgba(0, 0, 0, .08); }
  .js .navigation.ouverte { display: block; }
  .js .navigation ul { flex-direction: column; align-items: stretch; }
  .js .navigation a { padding: .8rem .4rem; font-size: 1.05rem; }
  .js .navigation a[aria-current] { box-shadow: inset 3px 0 0 var(--accent); padding-left: .8rem; }
  .js .nav-langue a { margin: .4rem 0 0; display: inline-block; }
  .navigation ul { flex-wrap: wrap; }
}

/* Fil d'Ariane ----------------------------------------------------------- */

.fil { font-size: .85rem; color: var(--doux); padding: 1.1rem 0 .4rem; }
.fil a { color: var(--doux); }
.fil span[aria-current] { color: var(--encre-2); }

/* Sections --------------------------------------------------------------- */

.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.page-interieure .section + .section:not(.section-univers):not(.section-valeurs):not(.section-contact) { padding-top: 0; }
.section-univers, .section-valeurs, .section-contact { background: var(--papier-2); }
.section-univers + .section, .section-valeurs + .section, .section-contact + .section { padding-top: clamp(3rem, 7vw, 5.5rem); }
.section-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.section-entete h2 { margin: 0; }
.section-etroite { margin-top: 3rem; }
.entete-page { padding: 1.5rem 0 2.5rem; }
.entete-page h1 { margin-bottom: .4rem; }

/* Accueil ---------------------------------------------------------------- */

.hero { padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
.hero-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); margin-bottom: .25em; }
.hero-accroche { font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.45; color: var(--encre-2); max-width: 30ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.hero-portrait { margin: 0; justify-self: end; width: min(100%, 420px); }
.portrait { width: 100%; border-radius: var(--rayon); box-shadow: var(--ombre-couv); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; }

.faits { border-block: 1px solid var(--ligne); background: var(--surface); }
.faits-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.faits-liste li { display: flex; flex-direction: column; gap: .15rem; padding: 1.4rem 1.2rem; border-left: 1px solid var(--ligne); }
.faits-liste li:first-child { border-left: 0; padding-left: 0; }
.faits-liste strong { font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1.1; color: var(--accent); }
.faits-liste span { font-size: .92rem; color: var(--doux); }

.grille-univers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 1rem; }
.univers a { display: flex; flex-direction: column; height: 100%; padding: 1.3rem 1.3rem 1.2rem; border-radius: var(--rayon); background: var(--surface); color: var(--encre); text-decoration: none; box-shadow: var(--ombre-carte); border-top: 4px solid var(--couleur, var(--accent)); transition: transform .2s ease; }
.univers h3 { margin: .9rem 0 .4rem; }
.univers p { font-size: .95rem; color: var(--doux); flex: 1; }
.univers .lien-fleche { color: var(--couleur, var(--accent)); font-size: .92rem; }
.univers-couvs { display: flex; height: 92px; align-items: flex-end; }
.univers-couv { width: 58px; margin-right: -14px; }
.univers-couv:nth-child(2) { transform: translateY(-6px); }
.univers-couv .couv { box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 4px 12px rgba(0, 0, 0, .18); border-radius: 2px; }
.univers-couv .couv-typo { width: 58px; height: 86px; padding: .35rem; }
.univers-couv .couv-typo-titre { font-size: .55rem; }
.univers-couv .couv-typo-editeur, .univers-couv .couv-typo-sous, .univers-couv .couv-typo-edition { display: none; }
.univers-entreprendre { --couleur: var(--u-entreprendre); }
.univers-finance { --couleur: var(--u-finance); }
.univers-travail-argent { --couleur: var(--u-travail-argent); }
.univers-vie-interieure { --couleur: var(--u-vie-interieure); }
.univers-recits-philosophie { --couleur: var(--u-recits-philosophie); }
.univers-pedagogie { --couleur: var(--u-pedagogie); }

.devise { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 1.15rem; }
.devise-grande { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .6rem; }

.diptyque { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.diptyque-texte p:not(.surtitre) { font-family: var(--serif); font-size: 1.2rem; line-height: 1.55; color: var(--encre-2); }
.diptyque-texte .lien-fleche { font-family: var(--sans); font-size: 1rem; }

.bandeau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 16px; background: var(--surface); box-shadow: var(--ombre-carte); }

.section-citation { padding-block: clamp(2rem, 5vw, 4rem); }
.citation { margin: 0 auto; max-width: 46rem; text-align: center; }
.citation p { font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.25; margin: 0 0 .6rem; }
.citation p::before { content: "« "; color: var(--accent); }
.citation p::after { content: " »"; color: var(--accent); }
.citation footer { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
.citation-petite { max-width: none; text-align: left; margin: 0; }
.citation-petite p { font-size: 1.35rem; }

/* Cartes de livres ------------------------------------------------------- */

.grille-livres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 2rem 1.4rem; align-items: start; }
.grille-une { grid-template-columns: minmax(0, 240px); }
.grille-deux { grid-template-columns: repeat(2, minmax(0, 240px)); }
.grille-trois { grid-template-columns: repeat(3, minmax(0, 200px)); }
.grille-quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.8rem; }
.grille-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.carte-lien { display: flex; flex-direction: column; gap: .8rem; color: var(--encre); text-decoration: none; }
.carte-couv { position: relative; display: flex; align-items: center; justify-content: center; height: 270px; padding: 1.1rem; background: var(--surface); border: 1px solid rgba(217, 164, 92, .1); }
.carte-couv .couv { max-height: 100%; width: auto; max-width: 100%; border-radius: 2px; box-shadow: var(--ombre-couv); transition: transform .18s var(--ease-out), box-shadow .25s ease; }
.carte-texte { display: flex; flex-direction: column; gap: .2rem; }
.carte-meta { font-family: var(--titre); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.carte-titre { font-size: 1.18rem; margin: 0; line-height: 1.25; }
.carte-lien:hover .carte-titre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.carte-accroche { font-size: .93rem; color: var(--doux); line-height: 1.5; }

.couv-typo { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; overflow: hidden; padding: 1rem .9rem; border-radius: 2px; background: linear-gradient(160deg, #2f4f2a, #1f3320); color: #f3f1e8; box-shadow: var(--ombre-couv); text-align: left; }
.couv-typo-editeur { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.couv-typo-titre { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; line-height: 1.1; margin-top: auto; }
.couv-typo-sous { font-size: .85rem; line-height: 1.3; margin-top: .3rem; }
.couv-typo-edition { font-size: .72rem; margin-top: .6rem; opacity: .85; }

/* Catalogue -------------------------------------------------------------- */

.puces ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.4rem 0 0; padding: 0; }
.puces a { display: inline-block; padding: .4rem .9rem; border: 1px solid var(--ligne); border-radius: 4px; background: var(--surface); color: var(--encre); font-size: .9rem; font-weight: 550; text-decoration: none; }
.section-catalogue { padding: 2.5rem 0 3.5rem; border-top: 1px solid var(--ligne); }
.section-catalogue:first-child { border-top: 0; padding-top: 0; }
.grille-projets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.projet { display: flex; flex-direction: column; padding: 1.2rem 1.3rem 1.3rem; border: 1px dashed var(--ligne); border-top: 3px solid var(--couleur, var(--accent)); border-radius: var(--rayon); background: var(--surface); }
.projet h3 { margin: .3rem 0 .4rem; }
.projet .projet-texte { margin: 0; color: var(--doux); font-size: .95rem; }
.projet-etat { font-family: var(--titre); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--couleur, var(--accent)); margin: 0; }
.projet-lien { margin: .8rem 0 0; font-size: .88rem; }

/* Page livre ------------------------------------------------------------- */

.livre { padding-bottom: 4rem; }
.livre-grille { display: grid; grid-template-columns: minmax(220px, 360px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); padding: 1.2rem 0 3rem; align-items: start; }
.livre-couverture { position: sticky; top: 92px; }
.livre-couverture .couv { width: 100%; border-radius: 3px; box-shadow: var(--ombre-couv); }
.couv-legende { margin: .7rem 0 0; font-size: .82rem; color: var(--doux); }
.livre-infos h1 { margin-bottom: .3rem; }
.accroche { font-family: var(--serif); font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.45; color: var(--encre-2); max-width: 46ch; margin-top: 1.2rem; }
.note { font-size: .95rem; }
.note-etoile { color: var(--accent); }
.note-date { display: block; font-size: .8rem; color: var(--doux); }
.fiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: .9rem 1.5rem; margin: 2rem 0 0; padding: 1.3rem 0 0; border-top: 1px solid var(--ligne); }
.fiche div { min-width: 0; }
.fiche dt { font-family: var(--titre); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }
.fiche dd { margin: .1rem 0 0; font-size: .97rem; overflow-wrap: anywhere; }
.livre-texte { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--ligne); }
.livre-texte > h2 { font-size: 1.5rem; }
.bloc-serie, .bloc-lie { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--ligne); }
.autre-langue { margin-top: 2.5rem; font-size: 1.02rem; }
.encadre { margin-top: 2rem; padding: 1rem 1.2rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--rayon) var(--rayon) 0; }
.encadre p:last-child { margin: 0; }

/* Texte courant ---------------------------------------------------------- */

.prose { max-width: 70ch; }
.prose > h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.8rem; }
.prose p, .prose li { color: var(--encre); }
.prose ul { padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--accent); }
.prose blockquote { margin: 1.5rem 0; padding-left: 1.2rem; border-left: 3px solid var(--accent); font-family: var(--serif); font-style: italic; font-size: 1.2rem; }

.equation { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.4rem); text-align: center; letter-spacing: .02em; margin: 1.6rem 0; color: var(--encre); }
.equation-bloc { margin: 2rem 0; padding: 1.6rem 1rem 1.2rem; border-radius: 14px; background: var(--surface); box-shadow: var(--ombre-carte); text-align: center; }
.equation-bloc .equation { margin: 0 0 .3rem; font-size: clamp(2rem, 5.5vw, 3.2rem); }
.equation-valeur { margin: 0; color: var(--doux); font-variant-numeric: tabular-nums; }

/* FLUX ------------------------------------------------------------------- */

.bandeau-haut { height: clamp(180px, 30vw, 340px); overflow: hidden; background: #0b0f17; }
.bandeau-haut img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.statuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }
.statut { padding: 1.2rem 1.2rem .4rem; border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre-carte); border-top: 4px solid var(--couleur); }
.statut h3 { margin: .2rem 0 .5rem; font-size: 1.12rem; }
.statut p { font-size: .96rem; }
.statut-etiquette { margin: 0; font-family: var(--titre); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--couleur); }
.statut-etabli { --couleur: var(--u-travail-argent); }
.statut-propose { --couleur: var(--u-recits-philosophie); }
.statut-image { --couleur: var(--u-vie-interieure); }

/* Séries ----------------------------------------------------------------- */

.etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 1.6rem 0; padding: 0; counter-reset: etape; }
.etape a { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: 1rem; border-radius: var(--rayon); background: var(--surface); color: var(--encre); text-decoration: none; box-shadow: var(--ombre-carte); border-top: 3px solid transparent; transition: transform .2s ease, border-color .2s ease; }
.etape-courante a { border-top-color: var(--accent); background: var(--papier-2); }
.etape-couv { display: flex; justify-content: center; margin-bottom: .6rem; }
.etape-couv .couv { width: 100%; max-width: 170px; border-radius: 2px; box-shadow: var(--ombre-couv); }
.etape-num { font-family: var(--titre); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
.etape-verbe { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--accent); line-height: 1.15; }
.etape-titre { font-size: .93rem; line-height: 1.4; }

.tomes { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
.tome { display: grid; grid-template-columns: minmax(130px, 220px) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; padding-top: 2.5rem; border-top: 1px solid var(--ligne); }
.tome-couv .couv { width: 100%; border-radius: 2px; box-shadow: var(--ombre-couv); }
.tome h2 { margin-bottom: .2rem; }
.tome h2 a { color: var(--encre); text-decoration: none; }
.tome h2 a:hover { text-decoration: underline; }
/* Page « Par où commencer ? » : une question du lecteur, puis ses livres. */
.guide-question { padding: 2.5rem 0 .5rem; border-top: 1px solid var(--ligne); }
.guide-question:first-child { border-top: 0; padding-top: 0; }
.guide-question > h2 { max-width: 32ch; margin-bottom: 0; }
.guide-question .tomes { gap: 2rem; padding-bottom: 2rem; }
.guide-question .tome { padding-top: 2rem; border-top: 0; }
.tome h3 { margin-bottom: .4rem; }
.tome h3 a { color: var(--encre); text-decoration: none; }
.tome h3 a:hover { text-decoration: underline; }
.guide-suite { padding: 2.5rem 0 3.5rem; border-top: 1px solid var(--ligne); }
/* Encadré « le livre par lequel commencer » en tête d'une rubrique du catalogue. */
.vedette-livre { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; margin: 1.6rem 0 2.6rem; padding: clamp(1.4rem, 4vw, 2.6rem); background: radial-gradient(70% 90% at 15% 50%, rgba(217, 164, 92, .12), transparent 70%), var(--surface); color: var(--encre); border: 1px solid rgba(217, 164, 92, .35); border-radius: 4px; }
.vedette-couv { position: relative; display: block; overflow: hidden; border-radius: 2px; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.vedette-couv .couv { display: block; width: 100%; }
.vedette-livre h3 { margin: 0 0 .3rem; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.15; }
.vedette-livre h3 a { color: var(--encre); text-decoration: none; }
.vedette-livre h3 a:hover { text-decoration: underline; }
.vedette-serie { margin: 0 0 .7rem; font-size: 1rem; color: var(--doux); }
.vedette-livre .note a { color: var(--encre); }
.vedette-livre .note-date { color: var(--doux); }
.vedette-phrase { margin: 1.1rem 0 .4rem; padding-left: 1rem; border-left: 2px solid var(--accent); font-family: var(--serif); font-size: 1.25rem; font-style: italic; color: var(--or-pale); }
.vedette-phrase p { margin: 0; }
.vedette-paragraphe { margin: .8rem 0 0; max-width: 62ch; color: var(--encre-2); }
.vedette-prolonger { margin: 1rem 0 0; font-size: 1rem; color: var(--doux); }
.vedette-prolonger a { color: var(--encre); }

/* À propos, presse, pédagogie ------------------------------------------- */

.a-propos { display: grid; grid-template-columns: minmax(200px, 380px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; padding: 1.2rem 0 4rem; }
.a-propos-portrait { margin: 0; position: sticky; top: 92px; }
.grille-valeurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; margin: 1.5rem 0 2.5rem; }
.valeur { padding: 1.3rem; border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre-carte); }
.valeur h3 { color: var(--accent); }
.valeur p { margin: 0; color: var(--encre-2); }
.citations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.5rem; }
.a-propos-en { max-width: 780px; }

.grille-bios { display: grid; gap: 1.2rem; }
.bio { padding: 1.3rem 1.4rem; border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre-carte); }
.bio-entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.bio-entete h3 { margin: 0; }
.bio-texte p:last-child { margin: 0; }
.presse-photo-grille { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr); gap: 2rem; align-items: center; }
.grille-telechargements { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 1.4rem 1rem; list-style: none; margin: 0; padding: 0; }
.grille-telechargements a { display: flex; flex-direction: column; gap: .5rem; color: var(--encre); font-size: .88rem; line-height: 1.3; text-decoration: none; }
.grille-telechargements .couv { border-radius: 2px; box-shadow: var(--ombre-couv); }
.grille-telechargements a:hover span { text-decoration: underline; }

.editions { display: grid; gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
.edition { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.4rem; padding: 1.3rem; border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre-carte); }
.edition h3 { margin-bottom: .3rem; }
.edition-annee { font-family: var(--sans); font-size: .85rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.edition-couv img.couv { width: 96px; border-radius: 2px; box-shadow: var(--ombre-couv); }
.edition-couv .couv-typo { width: 96px; height: 136px; padding: .55rem; }
.edition-couv .couv-typo-titre { font-size: .82rem; }
.edition-couv .couv-typo-sous { font-size: .62rem; }
.edition-couv .couv-typo-editeur, .edition-couv .couv-typo-edition { font-size: .55rem; }
.edition .achat { margin: .6rem 0 0; }

/* Contact ---------------------------------------------------------------- */

.contact-grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: start; }
.grille-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 2rem; }
.grille-contact h2 { font-size: 1.3rem; }
.formulaire, .formulaire-newsletter { max-width: 560px; }
.formulaire label, .formulaire-newsletter label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.formulaire input, .formulaire select, .formulaire textarea, .formulaire-newsletter input {
  width: 100%; min-height: 46px; padding: .6rem .8rem; border: 1px solid var(--bord-champ); border-radius: 2px;
  background: var(--papier); color: var(--encre); font: inherit;
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus, .formulaire-newsletter input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.formulaire-ligne { display: flex; gap: .6rem; flex-wrap: wrap; }
.formulaire-ligne input { flex: 1 1 240px; }
.piege-robots { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Pied de page ----------------------------------------------------------- */

.pied { background: var(--pied-fond); color: var(--pied-texte); padding: 3.5rem 0 1.5rem; font-size: .95rem; }
.pied a { color: var(--pied-texte); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-grille { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 2rem; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .45rem; }
.pied-nom { font-family: var(--titre); font-size: 1.05rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .3rem; }
.pied-titre { font-family: var(--titre); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; }
.pied-grille p { color: var(--pied-doux); }
.pied-bas { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .12); color: var(--pied-doux); font-size: .85rem; }
.pied-bas p { margin: 0; }

/* Adaptation aux écrans -------------------------------------------------- */

@media (max-width: 1000px) {
  .grille-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .hero-grille, .diptyque, .bandeau, .contact-grille, .a-propos { grid-template-columns: minmax(0, 1fr); }
  .hero-portrait { justify-self: start; width: min(55%, 240px); order: -1; }
  .a-propos-portrait { position: static; width: min(100%, 320px); }
  .faits-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faits-liste li { border-left: 0; padding-left: 0; }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .grille-quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statuts { grid-template-columns: minmax(0, 1fr); }
  .livre-grille { grid-template-columns: minmax(0, 1fr); }
  .livre-couverture { position: static; width: min(72%, 300px); }
  .grille-trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presse-photo-grille { grid-template-columns: minmax(0, 1fr); }
  .presse-photo-grille .portrait { width: min(100%, 260px); }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .grille-livres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
  .grille-une { grid-template-columns: minmax(0, 200px); }
  .tome { grid-template-columns: minmax(0, 1fr); }
  .tome-couv { width: min(60%, 220px); }
  .vedette-livre { grid-template-columns: minmax(0, 1fr); }
  .vedette-couv { width: min(55%, 200px); }
  .edition { grid-template-columns: 72px minmax(0, 1fr); gap: 1rem; padding: 1rem; }
  .edition-couv .couv-typo { width: 72px; height: 104px; }
  /* Trop petite pour tout afficher : l'année d'édition débordait, en blanc sur fond clair. Elle reste écrite à côté. */
  .edition-couv .couv-typo-edition { display: none; }
  /* De même pour la mention « (manuel) », « (détachable) »… coupée en bas : le titre complet est écrit à côté. */
  .edition-couv .couv-typo-sous { display: none; }
  .edition-couv img.couv { width: 72px; }
  .pied-grille { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .bouton, .achat .bouton { flex: 1 1 auto; }
}

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

@media print {
  .entete, .pied, .achat, .section-contact, .lien-evitement { display: none !important; }
  body { background: #fff; color: #000; }
  .livre-couverture { position: static; }
}

/* Direction éditoriale : une librairie d'auteur, lisible et sans ressource tierce. */
.carte-action { display: flex; justify-content: space-between; gap: .5rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--ligne); font: 600 .68rem var(--titre); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.carte-action span { font-size: 1.1rem; }
.carte-titre, .carte-meta, .etape-titre { overflow-wrap: anywhere; }
.nav-contact a { background: var(--accent); color: var(--bouton-texte); padding-inline: 1rem; }
/* Page Contact active : le texte reste foncé sur le bouton doré. */
.nav-contact a[aria-current] { color: var(--bouton-texte); }
[hidden] { display: none !important; }
.section-contact { background: var(--papier-2); border-top: 1px solid var(--ligne); }
.section-contact .petit { max-width: 55ch; }
.catalogue-outils { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 1rem; align-items: end; margin-bottom: 2rem; padding: 1.4rem; background: var(--papier-2); border: 1px solid var(--ligne); }
.catalogue-outils label { display: block; font: 600 .68rem var(--titre); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .5rem; }
.catalogue-outils input, .catalogue-outils select { width: 100%; min-height: 48px; border: 1px solid var(--bord-champ); border-radius: 2px; background: var(--papier); color: var(--encre); font: 1rem var(--sans); padding: .6rem .7rem; }
.resultats-compte { grid-column: 1 / -1; font-size: .95rem; color: var(--doux); margin: 0; }
.aucun-resultat { padding: 2rem 0 5rem; }
.page-interieure main > article.prose { padding-block: 3rem 5rem; }
.page-interieure .entete-page { padding-block: 2rem 3rem; }
.livre-infos h1 { font-weight: 400; letter-spacing: -.01em; }
.livre .accroche { line-height: 1.7; }
.pied { border-top: 1px solid rgba(217, 164, 92, .35); }
.pied .pied-nom { color: var(--or-pale); }

/* Accueil « nuit et or » (maquette A, 4 octobre 2026) --------------------- */

.acc-hero { position: relative; overflow: hidden; padding: clamp(2rem, 6vw, 5rem) 0 clamp(3rem, 8vw, 6rem);
  background:
    radial-gradient(1.2px 1.2px at 8% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 18% 70%, #ffffffb0 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 31% 12%, #ffe9c0 50%, transparent 51%), radial-gradient(1px 1px at 44% 84%, #ffffff90 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 57% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 66% 9%, #ffffffa0 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 83% 18%, #ffe9c0 50%, transparent 51%), radial-gradient(1px 1px at 92% 62%, #ffffffa0 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 88%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 3% 90%, #ffffff90 50%, transparent 51%),
    radial-gradient(55% 60% at 74% 48%, rgba(217, 164, 92, .16), transparent 70%),
    linear-gradient(180deg, var(--papier) 0%, #0d1528 100%); }
.acc-hero-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.acc-hero h1 { font-weight: 400; font-size: clamp(2.8rem, 6.2vw, 5.2rem); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 1.4rem; }
.acc-hero h1 em { color: var(--accent); }
.acc-lede { font-size: 1.32rem; max-width: 34ch; color: var(--encre-2); margin: 0 0 2rem; }
.acc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin: 0; }
.acc-lien { color: var(--or-pale); font-size: 1.15rem; text-underline-offset: .25em; text-decoration-thickness: 1px; }
/* L'anneau doré et son étoile reprennent le logo RB ; les trois couvertures restent lisibles, sans se chevaucher. */
.acc-ciel { position: relative; aspect-ratio: 1; width: 100%; max-width: 480px; justify-self: center; display: grid; place-items: center; }
.acc-anneau { position: absolute; inset: 4%; border: 1px solid rgba(217, 164, 92, .75); border-radius: 50%; box-shadow: 0 0 60px rgba(217, 164, 92, .14), inset 0 0 60px rgba(217, 164, 92, .08); }
.acc-anneau::after { content: "✦"; position: absolute; top: -.75em; left: 50%; transform: translateX(-50%); color: var(--accent); font-size: 1.4rem; text-shadow: 0 0 14px rgba(255, 210, 140, .9); }
.acc-couvs { position: relative; width: 88%; display: flex; justify-content: center; align-items: center; gap: 3%; }
.acc-couv { display: block; width: 29%; }
.acc-couv .couv { width: 100%; border-radius: 2px; box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 30px rgba(217, 164, 92, .12); transition: transform .18s var(--ease-out); }
.acc-couv:nth-child(1) { transform: rotate(-6deg) translateY(7%); }
.acc-couv:nth-child(2) { transform: translateY(-5%) scale(1.12); z-index: 2; }
.acc-couv:nth-child(3) { transform: rotate(6deg) translateY(7%); }
.acc-intro { color: var(--doux); margin: 0 0 2.4rem; max-width: 52ch; }
.acc-grille-portes, .acc-tomes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.acc-tomes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.4rem); margin-top: 2.4rem; }
.acc-grille-portes a, .acc-tomes a { display: flex; flex-direction: column; height: 100%; color: var(--encre); text-decoration: none; }
.acc-grille-portes .couv, .acc-tomes .couv { width: 100%; border-radius: 2px; margin-bottom: 1.1rem; box-shadow: 0 18px 36px rgba(0, 0, 0, .55), 0 0 0 1px rgba(217, 164, 92, .14); transition: transform .18s var(--ease-out); }
.acc-num, .acc-verbe { font-family: var(--titre); color: var(--accent); font-size: .9rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: .35rem; }
.acc-envie { font-size: 1.34rem; line-height: 1.2; margin-bottom: .45rem; }
.acc-livre { color: var(--doux); font-size: 1.06rem; line-height: 1.35; }
.acc-collection { background: var(--papier-2); }
.acc-auteur-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.acc-citation { margin: 0; }
.acc-citation p { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.15; font-style: italic; color: var(--or-pale); }
.acc-citation footer { margin-top: 1rem; font: .78rem var(--titre); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.acc-auteur p { color: var(--encre-2); }
.acc-auteur .acc-parcours { font-size: 1.06rem; color: var(--doux); border-top: 1px solid var(--ligne); padding-top: 1rem; }
.acc-flux { position: relative; overflow: hidden; background: #05070d; }
.acc-flux-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acc-flux::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5, 7, 13, .95) 0%, rgba(5, 7, 13, .8) 55%, rgba(5, 7, 13, .4) 100%); }
.acc-flux .conteneur { position: relative; z-index: 2; }
.acc-flux p { max-width: 50ch; color: var(--encre-2); }
.acc-flux .acc-equation { font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--accent); margin: 1.4rem 0; letter-spacing: .02em; }

@media (max-width: 1100px) {
  .catalogue-outils { grid-template-columns: 2fr 1fr 1fr; }
  .bouton-reset { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 860px) {
  .catalogue-outils { grid-template-columns: 1fr 1fr; }
  .recherche-champ { grid-column: 1 / -1; }
  .acc-hero-grille, .acc-auteur-grille { grid-template-columns: minmax(0, 1fr); }
  .acc-ciel { max-width: 340px; order: -1; }
  .acc-grille-portes, .acc-tomes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .acc-grille-portes li:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - .5rem); justify-self: center; }
  .acc-envie { font-size: 1.2rem; }
}
@media (max-width: 600px) {
  .livre-couverture { width: min(48%, 175px); margin-inline: auto; }
  .catalogue-outils { padding: 1rem; gap: .85rem; }
  .lien-fleche { white-space: normal; }
}
@media print {
  .catalogue-outils { display: none !important; }
}

@media (max-width: 560px) { .carte-couv { height: 230px; padding: .9rem; } .entete-interieur { min-height: 72px; } .marque-nom { font-size: 1.06rem; } }
@media (max-width: 360px) { .carte-couv { height: 205px; } .marque-nom { font-size: .95rem; } .menu-bouton { padding-inline: .6rem; } }
html:not(.js) .entete-interieur { flex-wrap: wrap; }

/* Parcours, recherche et projets en cours ---------------------------------- */

.parcours { max-width: 400px; padding: clamp(1.4rem, 3vw, 2rem); background: var(--surface); border-top: 3px solid var(--accent); box-shadow: var(--ombre-carte); }
.parcours .surtitre { margin-bottom: 1rem; }
.parcours-liste { list-style: none; margin: 0; padding: 0; }
.parcours-liste li { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 0; border-top: 1px solid var(--ligne); }
.parcours-liste li:first-child { border-top: 0; padding-top: 0; }
.parcours-liste li:last-child { padding-bottom: 0; }
.parcours-liste strong { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; line-height: 1.3; color: var(--encre); }
.parcours-liste span { font-size: .85rem; color: var(--doux); }
.prose .parcours-prose { margin: 1.2rem 0 1.5rem; padding: 1.2rem 1.4rem; background: var(--surface); border-left: 3px solid var(--accent); }
.prose .parcours-prose li { margin: 0; }

.atelier-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-top: 2rem; }
.atelier-recherche { overflow: hidden; display: flex; flex-direction: column; border-radius: var(--rayon); background: #0b1226; color: #f1ead8; border: 1px solid rgba(217, 164, 92, .3); }
.atelier-fond { width: 100%; height: 210px; object-fit: cover; object-position: 48% 50%; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.atelier-recherche-texte { padding: .2rem clamp(1.4rem, 3.5vw, 2.4rem) clamp(1.6rem, 3.5vw, 2.4rem); }
.atelier-recherche .surtitre { color: #e2bd86; }
.atelier-recherche h2, .atelier-recherche h3 { margin-bottom: .7rem; color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 400; letter-spacing: -.02em; }
.atelier-recherche p { color: #dde2ea; }
.atelier-recherche .atelier-citation { padding-left: .9rem; border-left: 2px solid #e2bd86; color: #ecd2a4; font: italic 1.18rem/1.45 var(--serif); }
.atelier-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin: 1.4rem 0 0; }
.atelier-etat { font-size: .82rem; color: #c9cfdb; }
.bouton-clair { border-color: #f1ead8; color: #f1ead8; }
.atelier-projets { display: grid; gap: 1rem; align-content: start; }

.projet-vedette { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; margin-bottom: 1rem; }
.projet-vedette .atelier-fond { order: 2; height: 100%; min-height: 380px; -webkit-mask-image: linear-gradient(to left, #000 60%, transparent); mask-image: linear-gradient(to left, #000 60%, transparent); }
.projet-vedette .atelier-recherche-texte { padding: clamp(1.6rem, 4vw, 3rem); }
.projet-vedette h2 { font-size: clamp(2rem, 4vw, 3rem); }

.prose .chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.6rem 0 1.8rem; padding: 0; list-style: none; }
.prose .chiffres li { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: 1.1rem 1.1rem 1.2rem; border-top: 3px solid var(--accent); border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre-carte); }
.chiffres strong { color: var(--accent); font: 400 2.2rem/1 var(--serif); }
.chiffres li > span { color: var(--encre-2); font-size: .9rem; line-height: 1.45; }

@media (max-width: 860px) {
  .atelier-grille, .projet-vedette { grid-template-columns: minmax(0, 1fr); }
  .projet-vedette .atelier-fond { order: 0; min-height: 0; height: 220px; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
  .projet-vedette .atelier-recherche-texte { padding-top: .2rem; }
}
@media (max-width: 760px) {
  .prose .chiffres { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .section-auteur .parcours { order: 2; max-width: none; }
  .reperes-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Nom développé de FLUX, sous le titre de la page */
.flux-acronyme { margin: -.2rem 0 1rem; color: var(--doux); font-family: var(--titre); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.flux-acronyme strong { color: var(--accent); font-weight: 700; }

/* Orbite de la page FLUX : un tracé qui ne se referme jamais ---------------- */

.orbite { display: block; width: min(190px, 55%); height: auto; margin: 0 auto .6rem; overflow: visible; }
.orbite-trace { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.orbite-interieure { fill: none; stroke: var(--ligne); stroke-width: 1; }
.orbite-ecart { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.orbite-epsilon { fill: var(--encre); font: italic 46px var(--serif); }

/* Animations ----------------------------------------------------------------
   Actives avec la classe « anim » (data/site.json → options.animations) et
   seulement si le visiteur n'a pas demandé à limiter les mouvements.
   « anim-ok » est posée par main.js pour les apparitions au défilement. */

::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
.entete { view-transition-name: entete; }

@media (prefers-reduced-motion: no-preference) {
  /* Entrée de l'accueil : le titre monte, l'anneau s'ouvre, les couvertures se posent. Tout est en place en 0,8 s,
     et le bouton arrive parmi les premiers. « translate » laisse intacte la rotation de chaque couverture. */
  .anim .acc-hero h1 { animation: monter .6s .05s var(--ease-out) backwards; }
  .anim .acc-lede { animation: monter .5s .15s var(--ease-out) backwards; }
  .anim .acc-actions { animation: monter .45s .22s var(--ease-out) backwards; }
  .anim .acc-anneau { animation: cercle .8s var(--ease-out) backwards; }
  .anim .acc-couv { animation: couv-pose .6s .15s var(--ease-out) backwards; }
  .anim .acc-couv:nth-child(2) { animation-delay: .1s; }
  .anim .acc-couv:nth-child(3) { animation-delay: .2s; }

  /* Ouverture des pages intérieures */
  .anim .bandeau-haut img, .anim .projet-vedette .atelier-fond { animation: zoom-lent 2.6s cubic-bezier(.2, .7, .2, 1) backwards; }
  .anim .a-propos-portrait .portrait, .anim .hero-portrait .portrait { animation: devoiler 1.2s .15s cubic-bezier(.7, 0, .2, 1) backwards; }

  /* Apparitions au défilement, en cascade. Les transitions ne portent que sur
     l'état visible : l'état d'attente s'applique d'emblée, sans fondu inverse. */
  .anim-ok .anime:not(.visible) { opacity: 0; transform: translateY(8px); }
  .anim-ok .anime.visible { transition: opacity .3s var(--ease-out) var(--delai, 0s), transform .3s var(--ease-out) var(--delai, 0s); }
  .anim-ok .atelier-recherche:not(.visible) .atelier-fond { transform: scale(1.12); }
  .anim-ok .atelier-recherche.visible .atelier-fond { transition: transform 2.4s cubic-bezier(.2, .7, .2, 1) .1s; }

  /* Livre en vedette : un reflet doré balaie deux fois la couverture à son apparition (4,6 s en tout), puis plus rien. */
  .anim-ok .vedette-livre.visible .vedette-couv::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 228, 165, .5) 50%, transparent 70%);
    transform: translateX(-130%); animation: reflet 2s .6s ease-in-out 2; }

  /* L'orbite se dessine, puis l'écart s'allume */
  .anim-ok .equation-bloc:not(.visible) .orbite-trace { stroke-dashoffset: 100; }
  .anim-ok .equation-bloc.visible .orbite-trace { transition: stroke-dashoffset 1.5s cubic-bezier(.65, .05, .3, 1) .3s; }
  .anim-ok .equation-bloc:not(.visible) .orbite-ecart { opacity: 0; transform: scale(.4); }
  .anim-ok .equation-bloc.visible .orbite-ecart { transition: opacity .5s ease-out 1.8s, transform .6s cubic-bezier(.2, .8, .25, 1.5) 1.8s; animation: pulsation .65s 2.1s ease-in-out 2; }

  /* Petites réponses au survol */
  .bouton span[aria-hidden="true"], .carte-action span { display: inline-block; transition: transform .2s ease; }
  .lien-fleche::after { transition: transform .2s ease; }
  @media (hover: hover) and (pointer: fine) {
    .bouton:hover span[aria-hidden="true"], .carte-lien:hover .carte-action span { transform: translate(2px, -2px); }
    .lien-fleche:hover::after { transform: translateX(3px); }
  }
}
@media print {
  .anime { opacity: 1 !important; transform: none !important; }
}

@keyframes apparaitre { from { opacity: 0; } }
@keyframes monter { from { opacity: 0; transform: translateY(.6em); } }
@keyframes cercle { from { opacity: 0; transform: scale(.82); } }
@keyframes couv-pose { from { opacity: 0; translate: 0 24px; } }
@keyframes zoom-lent { from { opacity: .35; transform: scale(1.1); } }
@keyframes devoiler { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pulsation { 50% { transform: scale(1.5); filter: drop-shadow(0 0 5px #e0a855); } }
@keyframes reflet { 0% { transform: translateX(-130%); } 60%, 100% { transform: translateX(130%); } }

/* Expérience FLUX : commandes natives, utilisables sans JavaScript. */
.projection-demo { margin: 2.5rem 0 3rem; padding: clamp(1.2rem, 4vw, 2.7rem); background: var(--surface); color: var(--encre); border: 1px solid rgba(217, 164, 92, .3); border-radius: 4px; overflow: hidden; }
.projection-demo h2 { color: inherit; margin: .5rem 0 .8rem; font-size: clamp(2rem, 4vw, 2.8rem); }
.projection-demo figcaption > p { color: var(--encre-2); max-width: 52ch; font-size: 1.08rem; }
.projection-kicker { font: 600 .72rem var(--titre); letter-spacing: .15em; text-transform: uppercase; color: var(--accent); }
.projection-commandes { border: 0; padding: 0; margin: 1.5rem 0 0; min-width: 0; }
.projection-commandes > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.projection-commandes > label { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem .8rem; margin: 0 .25rem .35rem 0; border: 1px solid var(--bord-champ); border-radius: 2px; color: var(--encre); cursor: pointer; font: 500 1rem var(--sans); }
.projection-commandes > input:checked + label { color: var(--bouton-texte); background: var(--accent); border-color: var(--accent); }
.projection-commandes > input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 4px; }
.projection-scene { margin-top: .7rem; border-top: 1px solid var(--ligne); padding-top: .8rem; }
.projection-scene svg { display: block; width: 100%; height: auto; }
.projection-scene text { fill: #edf0e1; font: 24px var(--sans); }
.projection-scene .projection-label { fill: #bdd0bd; font-size: 17px; letter-spacing: 1px; }
.ombre-face, .ombre-ensemble, .resultat-face, .resultat-ensemble { display: none; }
#vue-face:checked ~ .projection-scene .ombre-dessus, #vue-ensemble:checked ~ .projection-scene .ombre-dessus,
#vue-face:checked ~ .resultat-dessus, #vue-ensemble:checked ~ .resultat-dessus { display: none; }
#vue-face:checked ~ .projection-scene .ombre-face, #vue-ensemble:checked ~ .projection-scene .ombre-ensemble { display: block; }
#vue-face:checked ~ .resultat-face, #vue-ensemble:checked ~ .resultat-ensemble { display: block; }
.projection-demo .projection-resultat { min-height: 3.3em; margin: .4rem 0 0; font-size: .97rem; color: #edf0e1; }
.projection-demo .projection-note { border-top: 1px solid var(--ligne); padding-top: 1rem; margin: 1.2rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--doux); }
.flux-intro { margin-bottom: 1.5rem; }
.bandeau-flux { height: clamp(150px, 20vw, 235px); }
.flux-intro .flux-promesse { font: 500 clamp(1.35rem, 3vw, 1.85rem)/1.35 var(--serif); color: var(--encre); max-width: 36ch; }
.flux-sources { border: 1px solid var(--ligne); padding: 1rem 1.2rem; margin: 2rem 0; border-radius: var(--rayon); font-size: .86rem; }
.flux-sources summary { cursor: pointer; font-weight: 600; min-height: 30px; }
.flux-sources ul { margin-top: 1rem; }
.flux-sources li + li { margin-top: .6rem; }
.achat-repere { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .4rem 0 1rem; font-size: .82rem; color: var(--doux); }
.retour-achat { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--ligne); }
.retour-achat h3 { font-size: 1.35rem; }
/* Menu déroulé sur petit écran : il défile s'il dépasse la hauteur de l'écran. Limité au menu replié,
   pour ne pas rogner le contour de focus des liens sur grand écran. */
@media (max-width: 1100px) { .js .navigation { max-height: calc(100dvh - 82px); overflow-y: auto; } }
/* Un lien qui reçoit le focus ne doit jamais attendre son animation. */
.anim-ok .anime:focus-within { opacity: 1 !important; transform: none !important; transition-delay: 0s !important; }
@media (prefers-reduced-motion: no-preference) {
  .anim .projection-scene g[class^="ombre-"] { animation: projection-apparait .45s ease-out both; }
  html { scroll-behavior: smooth; }
}
@keyframes projection-apparait { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .projection-commandes > label { font-size: .78rem; padding-inline: .6rem; }
  .projection-demo .projection-resultat { min-height: 5em; }
  .projection-demo { padding-inline: 1rem; }
  .lien-fleche { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .anime { opacity: 1 !important; transform: none !important; }
}

/* Survols réservés à la souris : sur écran tactile, un :hover « colle » après le toucher
   (couverture restée soulevée, bouton resté foncé). Le toucher a son propre retour, ci-dessous. */
@media (hover: hover) and (pointer: fine) {
  .bouton:hover { background: var(--encre); color: var(--papier); }
  .bouton-primaire:hover { background: var(--accent-fort); border-color: var(--accent-fort); color: var(--survol-texte); }
  .bouton-clair:hover { background: #f1ead8; color: #0b1226; }
  .navigation a:hover { background: var(--papier-2); color: var(--encre); }
  .nav-contact a:hover { background: var(--accent-fort); color: var(--bouton-texte); }
  .puces a:hover { border-color: var(--accent); color: var(--accent); }
  .univers a:hover { transform: translateY(-3px); }
  .carte-lien:hover .couv { transform: translateY(-4px); }
  .etape a:hover { transform: translateY(-3px); border-top-color: var(--accent); }
  .acc-grille-portes a:hover .couv, .acc-tomes a:hover .couv { transform: translateY(-5px); }
  .acc-couv:hover .couv { transform: translateY(-8px); }
}

/* Retour à l'appui (doigt ou clic), dès le contact et pas au relâchement. Le flash gris
   que les navigateurs mobiles posent sur les zones touchées est retiré : ce retour le remplace. */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary { touch-action: manipulation; }
.bouton, button { -webkit-user-select: none; user-select: none; }
a:active { opacity: .8; }
.bouton:active, .menu-bouton:active { transform: scale(.97); }
.carte-lien:active .couv, .acc-couv:active .couv, .acc-grille-portes a:active .couv, .acc-tomes a:active .couv, .univers a:active, .etape a:active { transform: scale(.98); }

/* Sur écran tactile, iOS zoome sur tout champ dont le texte fait moins de 16 px, sans revenir ensuite :
   les champs du catalogue (recherche, filtres) passent à 16 px. Le zoom reste permis (pas de maximum-scale). */
@media (pointer: coarse) {
  input, select, textarea, .catalogue-outils input, .catalogue-outils select { font-size: max(16px, 1rem); }
}

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* Accueil animé (16 octobre 2026), avec assets/js/accueil-anime.js. Les classes ci-dessous ne sont posées que par ce
   script : sans JavaScript, sans WebGL ou avec « réduire les animations », l'accueil reste tel quel. */
@media (prefers-reduced-motion: no-preference) {
  /* L'anneau tourne très lentement : seule l'étoile dorée se déplace sur le cercle. */
  .anim .acc-anneau { animation: cercle .8s var(--ease-out) backwards, acc-orbite 140s linear .8s infinite; }

  /* Couvertures 3D : la toile déborde de l'anneau pour laisser les livres bouger ; les liens restent dessous, cliquables. */
  .acc-3d { position: absolute; left: -16%; top: -16%; width: 132%; height: 132%; pointer-events: none; z-index: 3;
    opacity: 0; transition: opacity .6s ease-out; }
  .acc-3d-pret .acc-3d { opacity: 1; }
  .acc-3d-pret .acc-couv .couv { opacity: 0; transition: opacity .6s ease-out; }

  /* Portes et collection : relief sous la souris, reflet doré. */
  .acc-relief { position: relative; display: block; margin-bottom: 1.1rem;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .acc-relief .couv { margin-bottom: 0 !important; }
  a:hover > .acc-relief { transition-duration: .15s; }
  .acc-lueur { position: absolute; inset: 0; border-radius: 2px; pointer-events: none; opacity: 0; mix-blend-mode: overlay;
    background: radial-gradient(circle at var(--lx, 50%) var(--ly, 0%), rgba(255, 236, 200, .55), rgba(255, 236, 200, 0) 62%);
    transition: opacity .35s ease-out; }
  a:hover .acc-lueur { opacity: 1; }

  /* La citation s'allume mot à mot. */
  .acc-mot { opacity: .16; transition: opacity .45s ease-out, text-shadow .45s ease-out; }
  .acc-mot.allume { opacity: 1; text-shadow: 0 0 22px rgba(217, 164, 92, .28); }

  /* L'équation s'écrit de gauche à droite, puis un éclat la traverse une fois. */
  .acc-eq-attente { clip-path: inset(0 100% 0 0); }
  .acc-eq-ecrite { clip-path: inset(0 0 0 0); transition: clip-path 1.6s cubic-bezier(.65, .05, .3, 1);
    background: linear-gradient(100deg, var(--accent) 42%, #fff4dc 50%, var(--accent) 58%) 120% 0 / 260% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: acc-eclat 2.4s 1.3s ease-in-out 1 both; }
}
@keyframes acc-orbite { to { rotate: 360deg; } }
@keyframes acc-eclat { from { background-position: 120% 0; } to { background-position: -20% 0; } }