/* ============================================================
   RAYONS — couche additionnelle, chargee APRES style.css.
   ------------------------------------------------------------
   style.css n'est pas modifie : /assets/* est servi avec
   « max-age=86400 » (voir _headers), donc une retouche de la
   feuille historique resterait invisible jusqu'a 24 h pour les
   visiteurs qui l'ont deja en cache. Un fichier NEUF, lui, est
   forcement telecharge : les pages de rayon sont donc justes
   des la premiere seconde.

   La charpente (polices, navigation, largeur, pied de page)
   reste celle de style.css. Ici on ne definit que :
     1. l'accent de chaque rayon, en UN seul endroit ;
     2. le hall d'accueil (n portes, pas quatre) ;
     3. l'en-tete de page de rayon ;
     4. deux correctifs d'accessibilite ;
     5. l'accueil vertical : une section par genre.
   ============================================================ */

/* ------------------------------------------------------------
   1. UN ACCENT PAR RAYON — la seule chose qui change d'un
   univers a l'autre. Chaque bloc redefinit les deux variables
   d'accent de la charte ; tout le reste en herite sans qu'on
   touche a une seule regle (navigation, boutons, badges,
   filet des titres, liens).

   La meme classe sert deux fois : sur le <body> de la page de
   rayon, et sur sa porte dans le hall. Une couleur, un endroit.

   AJOUTER UN RAYON = ajouter une ligne ci-dessous.
   ------------------------------------------------------------ */
.rayon-fantasy  { --gold:#c9a24b; --gold-d:#a5822f; }  /* or de la charte */
.rayon-thriller { --gold:#d1685a; --gold-d:#8a3228; }  /* rouge sombre     */
.rayon-romans   { --gold:#c08a6d; --gold-d:#8a4f36; }  /* terre de rose    */
/* « Essais » est le nom de fichier historique du rayon ; « Sciences »
   est le mot que l'auteur emploie a l'ecran. Meme accent, un seul
   endroit, pour que les deux noms ne divergent jamais. */
.rayon-essais,
.rayon-sciences { --gold:#8d84a3; --gold-d:#554b6b; }  /* prune d'encre    */

/* Le vert de service (mentions d'editeur, dates) etait a 2,0:1
   sur le creme : illisible en petit corps. Meme famille, assez
   fonce pour passer (5,0:1). */
body.rayon { --green:#4a7222; }

/* ------------------------------------------------------------
   2. LE HALL — les portes de l'accueil.
   Grille auto-fit : elle accueille 3, 4, 5 ou 8 portes sans
   qu'on y retouche. Surtout pas de 2x2 fige.
   ------------------------------------------------------------ */
.doors{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1.5rem; max-width:var(--maxw); margin:0 auto;
}
.door{
  display:flex; flex-direction:column; color:inherit;
  background:#fff; border:1px solid var(--line);
  border-left:5px solid var(--gold-d); border-radius:8px;
  padding:1.5rem 1.6rem 1.4rem;
  box-shadow:0 4px 14px rgba(14,26,43,.06);
  transition:transform .2s, box-shadow .2s;
}
.door:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(14,26,43,.16)}
.door h3{font-size:1.3rem; color:var(--navy)}
.d-kicker{
  font-family:"Cinzel",serif; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-d); margin:0 0 .45rem;
}
.door p{margin:.5rem 0 1rem; color:var(--muted); font-size:.98rem}
.d-titles{
  margin:0 0 1rem; padding:0; list-style:none;
  font-size:.9rem; color:var(--ink);
}
.d-titles li{padding:.15rem 0 .15rem .9rem; position:relative}
.d-titles li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--gold-d);
}
.d-titles em{color:var(--muted); font-style:italic; font-size:.88em}
.small-note{
  font-size:.95rem; color:var(--muted);
  border-top:1px solid var(--line); padding-top:.9rem;
}
.d-more{
  margin-top:auto; font-family:"Cinzel",serif; font-size:.78rem;
  letter-spacing:.05em; color:var(--gold-d);
}
.door:hover .d-more{color:var(--navy)}

/* ------------------------------------------------------------
   3. EN-TETE DE PAGE DE RAYON.
   Bandeau court : il annonce l'univers sans voler la vedette
   aux couvertures, et prend l'accent du rayon.
   ------------------------------------------------------------ */
.rayon-hero{
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy2) 70%,var(--navy) 100%);
  border-bottom:3px solid var(--gold);
  color:#fff; padding:3.4rem 1.5rem 3rem; text-align:center;
}
.rayon-hero-inner{max-width:760px; margin:0 auto}
.rayon-hero .d-kicker{color:var(--gold)}
.rayon-hero h1{
  font-size:clamp(1.9rem,4.5vw,2.8rem); letter-spacing:.06em; color:#fff;
}
.rayon-hero .rayon-sub{
  margin:.9rem 0 0; color:#e2dccd; font-style:italic; font-size:1.08rem;
}
.rayon-note{
  max-width:760px; margin:0 auto 2.6rem; padding:1rem 1.3rem;
  background:#fff; border-left:4px solid var(--gold);
  border-radius:6px; color:var(--ink); font-size:1rem;
}
.rayon-note strong{color:var(--navy)}
.back{display:inline-block; margin:0 0 1.8rem}

/* Statut neutre, pour un titre qui n'est pas publie.
   Le badge dore de style.css annonce ; celui-ci constate. */
.badge-quiet{
  background:transparent; color:var(--muted);
  border:1px solid var(--line); border-radius:3px;
}

/* Couverture typographique : quand il n'existe pas d'image, on
   compose un bloc de titre plutot que d'afficher une image
   cassee. Memes dimensions qu'une vraie couverture. */
.cover-type{
  width:230px; flex:0 0 230px; min-height:345px;
  border-radius:6px; padding:1.6rem 1.1rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 60%,#20365a 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 34px rgba(14,26,43,.28);
}
.cover-type .ct-n{
  font-family:"Cinzel",serif; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
}
.cover-type .ct-t{
  font-family:"Cinzel",serif; font-size:1.1rem; line-height:1.3;
  letter-spacing:.04em; margin:0;
}
.cover-type .ct-rule{width:40px; height:2px; background:var(--gold); margin:.9rem 0}
.cover-type .ct-a{
  font-family:"Spectral",serif; font-style:italic; font-size:.85rem;
  color:#cdd6e3; margin-top:1rem;
}

/* Feuilleton : une liste de chapitres, pas une couverture. */
.serial{max-width:900px; margin:0 auto}
.serial .chapters{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:1.1rem 0 0; padding:0; list-style:none;
}
.serial .chapters a{
  display:inline-block; padding:.3rem .7rem; border:1px solid var(--line);
  border-radius:20px; background:#fff; font-size:.85rem; color:var(--gold-d);
}
.serial .chapters a:hover{background:var(--navy); color:#fff; border-color:var(--navy)}

/* ------------------------------------------------------------
   4. ACCESSIBILITE — le focus clavier doit se voir.
   ------------------------------------------------------------ */
body.rayon a:focus-visible,
body.rayon .btn:focus-visible{
  outline:3px solid var(--gold-d); outline-offset:3px; border-radius:4px;
}
body.rayon .nav a:focus-visible{outline-color:var(--gold)}

/* Sur le fond marine du pied de page, l'accent fonce tombe sous
   les 3:1. On y prend la variante claire, qui passe pour les
   quatre rayons. */
body.rayon .footer a{color:var(--gold)}
body.rayon .footer a:hover{color:#fff}

body.rayon .nav nav a[aria-current="page"]{color:var(--gold); border-bottom:2px solid var(--gold)}

/* La navigation porte une entree de plus a chaque rayon ajoute :
   elle doit pouvoir passer a la ligne au lieu de deborder. */
body.rayon .nav nav{flex-wrap:wrap; justify-content:flex-end; row-gap:.4rem}

@media(max-width:720px){
  .cover-type{width:180px; flex-basis:auto; min-height:270px; margin:0 auto}
  .rayon-hero{padding:2.4rem 1.2rem}
}

/* ============================================================
   5. L'ACCUEIL VERTICAL — une section par genre.
   ------------------------------------------------------------
   L'accueil ne renvoie plus vers quatre pages : on traverse les
   univers en descendant. Chaque section doit donc se reconnaitre
   au premier coup d'oeil, SANS que la page se disloque.

   Ce qui NE CHANGE PAS d'une section a l'autre — c'est ce qui
   tient la page ensemble :
     police de titre (Cinzel), police de texte (Spectral),
     largeur de contenu (--maxw), rythme vertical (.genre),
     navigation, pied de page.

   Ce qui change, et rien d'autre :
     --g-bg    le fond de la section  (chaud / froid en alternance)
     --gold    l'accent               (herite de .rayon-* ci-dessus)
     la DISPOSITION des livres — c'est elle qui porte l'identite,
     davantage que la couleur : frise numerotee pour une saga,
     bloc plein et resserre pour un titre unique, deux objets
     cote a cote pour le contemporain, trois volumes en
     progression pour la trilogie.

   AJOUTER UNE CINQUIEME SECTION (« xxx » = le nom du genre) :
     1. copier dans index.html un bloc <section class="genre …">
        complet, changer son id (id="xxx") et ses deux classes
        (class="genre g-xxx rayon-xxx") ;
     2. ajouter ici une regle .g-xxx{--g-bg:…} et, dans le
        bloc 1 ci-dessus, une ligne .rayon-xxx{--gold:…} ;
     3. ajouter l'entree <a href="/#xxx"> a la navigation ;
     4. verifier l'alternance chaud/froid avec ses voisines.
   ------------------------------------------------------------ */

/* -- la charpente commune -------------------------------------- */
/* Toutes les cibles d'ancre reculent d'une hauteur de nav : sans
   ca, /#bio ou /#publications arrivent SOUS la barre collante. */
body.rayon .section{scroll-margin-top:4.5rem}
/* Ancres historiques sans contenu (#rayons, #trame) : un <span> vide
   n'a pas de boite, il faut lui donner le meme recul qu'une section
   sinon un vieux lien profond atterrit sous la barre collante. */
.anchor-alias{display:block; height:0; scroll-margin-top:4.5rem}
.genre{
  --g-bg:var(--cream);
  background:var(--g-bg);
  padding:4.6rem 1.5rem 4.4rem;
  border-top:1px solid var(--line);
  scroll-margin-top:4.5rem;          /* la nav collante ne mange pas le titre */
}
.genre-inner{max-width:var(--maxw); margin:0 auto}
.genre-head{max-width:760px; margin:0 auto 3rem; text-align:center}
.genre-head h2{
  font-size:clamp(1.7rem,4vw,2.15rem); color:var(--navy); letter-spacing:.03em;
}
.genre-head .g-kicker{
  font-family:"Cinzel",serif; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-d); margin:0 0 .6rem;
}
.genre-head .g-rule{
  display:block; width:64px; height:2px; margin:1rem auto 0;
  background:var(--gold-d); opacity:.75;
}
.genre-head .g-sub{
  margin:1.2rem 0 0; color:var(--muted); font-size:1.06rem; font-style:italic;
}
/* Le lien vers la page de rayon : une sortie, jamais l'action
   principale. L'accueil se suffit a lui-meme. */
.g-all{
  display:block; text-align:center; margin:3rem auto 0;
  font-family:"Cinzel",serif; font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-d);
}
.g-all span{border-bottom:1px solid rgba(0,0,0,.18); padding-bottom:.2rem}
.g-all:hover span{border-bottom-color:currentColor}

/* Bandeau d'entree dans la zone livres — porte l'ancre #livres,
   visee par une cinquantaine de liens internes. */
.livres-intro{
  max-width:var(--maxw); margin:0 auto; padding:4.2rem 1.5rem 1rem;
  text-align:center; scroll-margin-top:4.5rem;
}
.livres-intro .lead{margin-bottom:0}

/* -- FANTASY : parchemin chaud, or, frise numerotee ------------- */
.g-fantasy{--g-bg:#f2ead9}
.saga{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem;
  position:relative; max-width:920px; margin:0 auto;
}
/* Le fil de la saga : il relie les trois tomes, et s'arrete la ou
   le recit s'arrete (le tome III n'est pas publie). */
.saga::before{
  content:""; position:absolute; top:27px; left:16%; right:16%; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-d) 20%,var(--gold-d) 80%,transparent);
}
.tome{text-align:center; position:relative}
.tome .t-num{
  position:relative; z-index:1; display:flex; align-items:center;
  justify-content:center; width:54px; height:54px; margin:0 auto 1.6rem;
  border-radius:50%; background:var(--g-bg); border:1px solid var(--gold-d);
  font-family:"Cinzel",serif; font-size:.95rem; letter-spacing:.05em;
  color:var(--gold-d);
}
/* Hauteur imposee, largeur libre : les trois couvertures n'ont pas
   exactement le meme format, et sans ca les titres ne s'alignent
   pas d'une colonne a l'autre. */
.tome img{
  height:238px; width:auto; margin:0 auto; border-radius:4px;
  box-shadow:0 12px 26px rgba(14,26,43,.24);
}
.tome .cover-type{
  width:158px; flex:0 0 auto; min-height:238px; margin:0 auto;
  padding:1.1rem .8rem;
}
.tome .cover-type .ct-t{font-size:.92rem}
.tome h3{font-size:1.06rem; color:var(--navy); margin:1.1rem 0 .2rem}
.tome .t-status{
  font-family:"Cinzel",serif; font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--green); margin:.35rem 0 .6rem;
}
.tome .t-status.quiet{color:var(--muted)}
.tome p{color:var(--muted); font-size:.93rem; margin:0}

/* -- THRILLER : plein, sombre, resserre ------------------------- */
.g-thriller{
  --g-bg:#14161b; border-top:none;
  color:#cfc8bd; padding:5.2rem 1.5rem 5rem;
}
.g-thriller .genre-head h2{color:#f3ede3}
.g-thriller .genre-head .g-kicker,
.g-thriller .g-all{color:var(--gold)}            /* la variante claire du rouge */
.g-thriller .genre-head .g-rule{background:var(--gold)}
.g-thriller .genre-head .g-sub{color:#a49b90}
.g-thriller .g-all span{border-bottom-color:rgba(209,104,90,.45)}
.huis-clos{
  max-width:780px; margin:0 auto; display:flex; gap:2.4rem; align-items:flex-start;
}
.huis-clos img{
  width:220px; flex:0 0 220px; border-radius:3px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.huis-clos .hc-body{border-left:2px solid var(--gold); padding-left:1.6rem}
.huis-clos h3{color:#f3ede3; font-size:1.25rem}
.huis-clos .hc-line{
  font-style:italic; color:var(--gold); font-size:1.05rem; margin:.9rem 0 1.1rem;
}
.huis-clos p{color:#bdb5aa; font-size:.99rem}
.g-thriller .badge{background:var(--gold); color:#1a0d0a}

/* -- ROMAN : clair et chaud, deux objets cote a cote ------------- */
.g-roman{--g-bg:#fdfaf5}
.duo{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem;
  max-width:920px; margin:0 auto; align-items:stretch;
}
.duo-item{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-top:3px solid var(--gold-d);
  border-radius:6px; padding:1.7rem 1.6rem 1.5rem;
  box-shadow:0 4px 16px rgba(14,26,43,.07);
  /* Un element de grille ne descend pas sous la largeur min-content de son
     contenu tant qu'on ne le lui dit pas. Sans ceci, le moindre contenu
     insecable (la mention « En lecture gratuite ») elargit la colonne et
     fait deborder la page horizontalement. Mesure : 8 px de trop a 800. */
  min-width:0;
}
.duo-item .di-kind{
  font-family:"Cinzel",serif; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-d); margin:0 0 .5rem;
}
.duo-item h3{font-size:1.3rem; color:var(--navy)}
.duo-item .pub{margin:.5rem 0 .35rem}
/* « En lecture gratuite » : c'est l'argument du feuilleton face au livre
   d'a cote, qui, lui, s'achete.
   PLEINE, et pas en pastille bordee : les puces de chapitres juste dessous
   sont deja des pastilles bordees, et deux formes identiques pour deux
   choses differentes (une mention / des liens) se lisent comme une seule.
   nowrap parce qu'a 800 px la mention passait sur deux lignes. */
.duo-item .di-free{
  display:inline-block; margin:0 0 .9rem; white-space:nowrap;
  font-family:"Cinzel",serif; font-size:.63rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cream);
  background:var(--gold-d); border-radius:3px;
  padding:.26rem .55rem .22rem;
}
.duo-item p{color:var(--muted); font-size:.97rem; margin:0 0 .9rem}
.duo-item .di-foot{margin-top:auto; padding-top:.6rem}
/* Le livre a une couverture : elle tient la tete de bloc avec le
   titre. Le feuilleton n'en a pas : il a ses chapitres, qui
   descendent au bas du bloc pour que les deux objets se repondent. */
.di-top{display:flex; gap:1.1rem; align-items:flex-start; margin-bottom:.9rem}
.duo-cover{
  width:130px; flex:0 0 130px; border-radius:4px;
  box-shadow:0 10px 24px rgba(14,26,43,.2);
}
/* Le feuilleton n'a jamais eu de couverture : on lui en compose une
   par la mise en page, au format et a l'ombre du livre d'a cote —
   deux objets sur la meme etagere. L'illustration du blog est
   carree ; elle est cadree sur sa moitie HAUTE, ou se trouve le
   Cupidon. Le fichier n'est pas modifie : /assets est en cache. */
.cover-serial{
  width:130px; flex:0 0 130px; aspect-ratio:440/734;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  border-radius:4px; overflow:hidden; color:#fff;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 62%,#20365a 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 24px rgba(14,26,43,.2);
}
.cover-serial .cs-img{
  width:100%; height:74px; flex:0 0 74px;
  object-fit:cover; object-position:top center;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.cover-serial .cs-k{
  font-family:"Cinzel",serif; font-size:.52rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-top:.75rem;
}
.cover-serial .cs-t{
  font-family:"Cinzel",serif; font-size:.84rem; line-height:1.25;
  letter-spacing:.03em; margin:.4rem .4rem 0; color:#fff;
}
.cover-serial .cs-rule{width:26px; height:1px; background:var(--gold); margin:.55rem 0 0}
.cover-serial .cs-a{
  font-family:"Spectral",serif; font-style:italic; font-size:.64rem;
  color:#cdd6e3; margin:auto 0 .65rem;
}
.di-serial{
  display:flex; flex-wrap:wrap; gap:.35rem; margin:auto 0 1rem; padding:0;
  list-style:none;
}
.duo-item .di-serial + .di-foot{margin-top:0}
.di-serial a{
  display:inline-block; padding:.15rem .55rem; border:1px solid var(--line);
  border-radius:20px; font-size:.78rem; color:var(--gold-d); background:#fff;
}
.di-serial a:hover{background:var(--navy); color:#fff; border-color:var(--navy)}

/* -- SCIENCES : froid, prune, trois volumes en progression ------- */
.g-sciences{--g-bg:#eceef4}
.progression{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem;
  max-width:920px; margin:0 auto; align-items:start;
}
/* Les trois volumes sont ALIGNES par le haut.
   Il y avait ici un escalier (align-items:end + padding-bottom croissant)
   cense figurer la progression parler -> penser -> mesurer. Retire le
   04/09 : les trois couvertures ayant la meme taille, le decalage ne se
   lisait pas comme une intention mais comme un defaut d'alignement.
   La progression est deja dite par « Volume I / II / III » et par l'ordre
   de lecture ; elle n'a pas besoin d'etre repetee par la geometrie. */
.vol{text-align:center; position:relative}
.vol img{
  width:150px; margin:0 auto 1rem; border-radius:4px;
  box-shadow:0 12px 26px rgba(14,26,43,.22);
}
.vol .v-step{
  font-family:"Cinzel",serif; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-d); margin:0 0 .35rem;
}
.vol h3{font-size:1.12rem; color:var(--navy); margin-bottom:.4rem}
.vol p{color:var(--muted); font-size:.92rem; margin:.6rem 0 0}
.signature{
  max-width:760px; margin:0 auto 2.8rem; padding:1rem 1.3rem;
  background:#fff; border-left:4px solid var(--gold-d); border-radius:6px;
  font-size:.98rem; color:var(--ink);
}
.signature strong{color:var(--navy)}

/* -- RESPONSIVE ------------------------------------------------- */
/* On garde les trois colonnes le plus longtemps possible : c'est la
   disposition qui porte l'identite de la section, pas la couleur.
   En dessous de 700px elles ne tiennent plus, et seulement la. */
@media(max-width:700px){
  .saga,.progression{grid-template-columns:1fr; gap:2.6rem; max-width:420px}
  .saga::before{display:none}
  .duo{grid-template-columns:1fr; max-width:520px}
}
@media(max-width:720px){
  .genre{padding:3.4rem 1.2rem 3.2rem}
  .g-thriller{padding:3.8rem 1.2rem 3.6rem}
  .genre-head{margin-bottom:2.2rem}
  .huis-clos{flex-direction:column; align-items:center; text-align:center}
  .huis-clos img{width:180px; flex-basis:auto}
  .huis-clos .hc-body{border-left:none; border-top:2px solid var(--gold); padding:1.2rem 0 0}
  .di-top{flex-direction:column; align-items:center; text-align:center}
  .duo-cover,.cover-serial{width:130px; flex-basis:auto; margin:0 auto .4rem}
  .duo-item{text-align:center}
  .di-serial{justify-content:center}
  .livres-intro{padding-top:3rem}
  /* La nav passe en colonne sous 720px : elle est plus haute (mesuree
     a 116px en 375px de large), d'ou un recul plus grand. */
  .genre,.livres-intro,.anchor-alias,body.rayon .section{scroll-margin-top:7.6rem}
}