/* ------------------------------------------------------------------
   Vitrine Sagal G. — feuille de style unique.

   Parti pris : une seule couleur, le bleu navy, declinee du presque
   noir au bleu pale. Aucune autre teinte. Beaucoup de blanc, des
   lignes de texte courtes, rien qui clignote.
   ------------------------------------------------------------------ */

:root {
  /* Navy, du plus sombre au plus clair */
  --navy-950: #060f1c;
  --navy-900: #0a1628;
  --navy-800: #102542;
  --navy-700: #1b3b61;
  --navy-600: #24507f;
  --navy-500: #2f6aa5;
  --navy-400: #5b8cbe;
  --navy-300: #93b4d6;
  --navy-200: #c3d6e9;
  --navy-100: #e3ecf5;

  /* Fonds et encres */
  --papier: #fcfdfe;
  --papier-creux: #f2f6fa;
  --encre: #0e1f36;
  --encre-douce: #4a5f7a;
  --trait: #dde6f0;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --large: 1180px;
  --texte: 62ch;         /* lignes courtes : plus faciles a suivre */
  --rayon: 3px;          /* presque droit : le livre est un objet carre */
  --transition: 180ms ease;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 17px/1.7 var(--sans);
  letter-spacing: 0.005em;
}

/* height:auto est indispensable : les images portent leurs dimensions en
   attributs (pour reserver la place avant chargement), et sans cette regle
   la hauteur reste figee pendant que la largeur, elle, se contraint. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-800); }

/* ------------------------------------------------------------------
   Alignement du texte suivi. Le texte etait justifie, avec « hyphens:
   auto » pour que la cesure absorbe les blancs. Mais la cesure depend
   d'un dictionnaire que le navigateur telecharge a part : quand il
   manque — Chrome sous Linux, profil neuf — la propriete ne fait rien,
   en silence. La justification reste, la cesure non, et la colonne se
   troue d'espaces entre les mots (constate le 28/09/2026 sur la fiche
   d'un livre).

   On ne peut pas garantir ce dictionnaire chez le lecteur. Le texte
   suivi est donc aligne a gauche : les espaces entre les mots valent
   tous la meme chose, quel que soit le navigateur. Le bord droit est
   irregulier, c'est le prix, et il se voit moins qu'une riviere de
   blancs. « text-wrap: pretty » adoucit ce bord la ou il est connu.

   Les elements d'interface — menus, etiquettes, boutons, tableaux,
   chiffres — etaient deja alignes a gauche : on ne justifie pas une
   commande. La liste ci-dessous reste donc utile pour ce qui s'ecarte
   des reglages hérités (centrage, cesure manuelle).
   ------------------------------------------------------------------ */
p, li, blockquote, dd, .accroche, .chapeau {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
  /* Pas de « text-wrap: pretty » : ajoute le 28/09 pour adoucir le bord
     droit, il fait l'inverse de ce qu'on attend ici. Chrome raccourcit les
     lignes precedentes pour eviter un mot seul en derniere ligne, et la
     liste « Ce que vous comprendrez » se retrouvait a couper bien avant la
     mesure, avec deux mots par ligne finale. Le remplissage par defaut met
     le maximum de mots sur chaque ligne : c'est ce qui est voulu. */
}

/* Ce qui ne doit surtout pas etre justifie. */
.etiquette, .etiquette-champ, .chiffre-nom, .chiffre-valeur,
.menu a, .pied-liens a, .fil, .aide, .voisin .sens, .voisin .nom,
.tableau td, .tableau th, .tuile-nom, .tuile-valeur,
.admin-menu a, .admin-compte a, .jauge-legende, .message,
.carte-titre, .section-titre p, button, .bouton, .mini,
/* Les colonnes de la grille font environ 200 px : trop etroit pour etre
   justifie. Le texte y serait tire aux deux bords, et les espaces entre
   les mots s'ouvriraient jusqu'a trouer la ligne. */
.carte-soustitre, .formats, .panier-formats, .panier-prix, .prix,
.voisin, .liens-fichiers a, .etat-en-ligne, .etat-hors-ligne,
/* La signature du pied de page : jamais justifiee, jamais coupee. */
.pied-texte {
  text-align: left;
  hyphens: manual;
}

/* Le bloc d'inscription est centre : deux lignes justifiees au milieu
   d'un bloc centre se liraient de travers. */
.diffusion-texte, .diffusion .message { text-align: center; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--navy-900);
  margin: 0 0 0.6em;
}

::selection { background: var(--navy-200); color: var(--navy-950); }

:focus-visible {
  outline: 2px solid var(--navy-500);
  outline-offset: 3px;
  border-radius: 2px;
}

.saut {
  position: absolute; left: -9999px;
  background: var(--navy-900); color: #fff;
  padding: 10px 16px; z-index: 100;
}
.saut:focus { left: 12px; top: 12px; }

/* Piege a robots : invisible, mais pas display:none (certains le detectent) */
.tiroir { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------
   Bandeau
   ------------------------------------------------------------------ */

.bandeau {
  background: var(--navy-900);
  color: var(--navy-100);
  position: sticky; top: 0; z-index: 20;
}

.bandeau-dedans {
  max-width: var(--large);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}

.marque { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.marque-nom {
  font-family: var(--serif);
  font-size: 1.32rem; font-weight: 600;
  color: #fff; letter-spacing: 0.01em;
}
.marque-suite {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--navy-300);
}

.menu { display: flex; gap: 26px; flex-wrap: wrap; }
.menu a {
  color: var(--navy-200);
  text-decoration: none;
  font-size: 0.93rem;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.menu a:hover { color: #fff; border-bottom-color: var(--navy-400); }
.menu a[aria-current="page"], .menu a.menu-actif { color: #fff; border-bottom-color: var(--navy-300); }

/* ------------------------------------------------------------------
   Ouverture
   ------------------------------------------------------------------ */

.ouverture {
  background: var(--navy-900);
  color: var(--navy-100);
  padding: 92px 24px 100px;
  /* Un seul liseré clair, pour poser le bas du bloc sans le souligner */
  border-bottom: 1px solid var(--navy-800);
}

.ouverture-dedans { max-width: var(--large); margin: 0 auto; }

.ouverture h1 {
  color: #fff;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  max-width: 19ch;
  margin-bottom: 0.5em;
}

/* Le titre d'accueil se coupait en deux sur TOUS les ecrans, a cause du
   plafond de 19ch ci-dessus, alors que le bloc lui en offre 1180 px.

   Passe le point de rupture des petits ecrans, le plafond est RETIRE, et
   non simplement desserre. Un plafond en ch se calcule sur la largeur du
   zero de la police — or la pile de polices ci-dessus ne resout pas a la
   meme fonte partout, et un chiffre juste sous un navigateur se revele
   trop court sous un autre, ou le titre repart a la ligne. C'est le bloc
   lui-meme, a 1180 px, qui sert desormais de garde-fou : la ligne ne peut
   pas deborder la page, et aucune mesure de police n'entre dans le calcul.

   Pas de white-space: nowrap non plus : si un jour un titre demandait
   plus de 1180 px, il reviendrait proprement a la ligne au lieu de
   pousser une barre de defilement horizontale sur tout le site.

   En dessous de 861 px, le plafond de 19ch reprend et le retour a la
   ligne reste autorise. Le chapeau garde ses 58ch : la hierarchie ne
   bouge pas. */
@media (min-width: 861px) {
  .ouverture h1 { max-width: none; }
}
/* Le titre centre au-dessus du chapeau centre (17/10/2026). */
.ouverture h1 { text-align: center; margin-left: auto; margin-right: auto; }

.ouverture-texte {
  max-width: 58ch;
  color: var(--navy-200);
  font-size: 1.1rem;
  /* Bloc centre sur la page, texte justifie, sans mot coupe
     (demande de Souhour du 17/10/2026). */
  margin: 0 auto 1.1em;
  text-align: justify;
  hyphens: none;
  -webkit-hyphens: none;
}
/* Sur grand ecran, le chapeau s'etale sur toute la largeur du bandeau,
   comme le titre au-dessus (demande de Souhour du 24/10/2026) : la colonne
   de 58ch laissait deux grands vides de part et d'autre. */
@media (min-width: 861px) {
  .ouverture-texte { max-width: none; }
}

.ouverture-chiffres {
  display: flex; gap: 46px; flex-wrap: wrap;
  margin-top: 46px; padding-top: 30px;
  border-top: 1px solid var(--navy-800);
}
.chiffre-valeur {
  font-family: var(--serif);
  font-size: 2rem; color: #fff; line-height: 1;
}
.chiffre-nom {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--navy-400); margin-top: 8px;
}
/* Lien vers la page auteur Amazon, au rang des chiffres (demande de
   Souhour du 25/10/2026) : meme typographie, encadre pour se lire cliquable. */
.chiffre-lien {
  display: block; margin: -8px 0; padding: 8px 14px;
  border: 1px solid var(--navy-700); border-radius: var(--rayon);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
/* Des lettres paraissent plus grosses que des chiffres au meme corps :
   reduit pour peser comme « 2026 » (Souhour, 25/10/2026). */
.chiffre-lien .chiffre-valeur { display: block; font-size: 1.45rem; line-height: 32px; }
.chiffre-lien .chiffre-nom { display: block; color: var(--navy-300); }
.chiffre-lien:hover, .chiffre-lien:focus-visible {
  border-color: var(--navy-400); background: var(--navy-800);
}

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

.section { max-width: var(--large); margin: 0 auto; padding: 76px 24px; }
.section-creuse { background: var(--papier-creux); max-width: none; }
.section-creuse > * { max-width: var(--large); margin-inline: auto; }

.section-titre {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 34px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--trait);
}
.section-titre h2 { margin: 0; font-size: 1.6rem; }
.section-titre p { margin: 0; color: var(--encre-douce); font-size: 0.92rem; }

/* ------------------------------------------------------------------
   Par ou commencer : trois parcours, puis la methode
   ------------------------------------------------------------------ */

.parcours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 34px 40px;
}
.parcours-bloc h3 { font-size: 1.22rem; margin-bottom: 0.4em; }
.parcours-phrase {
  color: var(--encre-douce); font-size: 0.93rem;
  margin: 0 0 16px; text-align: left; hyphens: manual;
}
.parcours-etapes { margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.parcours-etapes li {
  counter-increment: etape;
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--trait);
  text-align: left; hyphens: manual;
}
.parcours-etapes li::before {
  content: counter(etape);
  font-family: var(--serif);
  /* navy-400 sur le fond creux : 3,26:1. navy-600 : 7,65:1. */
  color: var(--navy-600);
  min-width: 1.2em;
}
.parcours-etapes a {
  font-family: var(--serif); font-size: 1.02rem;
  color: var(--navy-800); text-decoration: none; flex: 1;
}
.parcours-etapes a:hover { color: var(--navy-500); text-decoration: underline; }
.parcours-duree { font-size: 0.8rem; color: var(--encre-douce); white-space: nowrap; }

.methode { padding-top: 60px; padding-bottom: 60px; }
.methode-texte {
  font-family: var(--serif);
  font-size: 1.22rem; line-height: 1.55;
  color: var(--navy-900);
  max-width: var(--texte); margin: 0 0 18px;
}
.methode-lien { margin: 0; text-align: left; }
/* Sur grand ecran, le texte de la methode occupe toute la largeur de la
   section, comme le chapeau de l'ouverture (demande de Souhour du 25/10/2026). */
@media (min-width: 861px) {
  .methode-texte { max-width: none; }
}
/* Ecran plus large que la colonne : le texte se prolonge dans la marge
   droite (bord gauche aligne sur le reste de la page, 60 px gardes au
   bord de l'ecran), pour tenir presque sur une ligne (Souhour, 25/10). */
@media (min-width: 1301px) {
  .methode-texte { margin-right: calc((var(--large) - 100vw) / 2 + 60px); }
}
.methode-lien a { font-size: 0.93rem; }

/* ------------------------------------------------------------------
   Filtres de la collection
   ------------------------------------------------------------------ */

.filtres { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.filtre {
  font: inherit; font-size: 0.88rem;
  padding: 7px 18px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: #fff; color: var(--encre-douce);
  cursor: pointer;
  transition: all var(--transition);
}
.filtre:hover { border-color: var(--navy-300); color: var(--navy-700); }
.filtre[aria-pressed="true"] {
  background: var(--navy-900); border-color: var(--navy-900); color: #fff;
}

/* ------------------------------------------------------------------
   Grille des livres
   ------------------------------------------------------------------ */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 42px 30px;
}

.carte-lien { text-decoration: none; color: inherit; display: block; }

.carte-image {
  background: var(--navy-100);
  border-radius: var(--rayon);
  overflow: hidden;
  aspect-ratio: 1 / 1.6;
  /* L'ombre reste basse et froide : le livre pose, il ne flotte pas */
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.10), 0 10px 24px -14px rgba(10, 22, 40, 0.42);
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte-image img { width: 100%; height: 100%; object-fit: cover; }

.carte-lien:hover .carte-image {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(10, 22, 40, 0.12), 0 20px 34px -16px rgba(10, 22, 40, 0.5);
}

.carte-texte { padding-top: 16px; }

.etiquette {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.17em;
  color: var(--navy-500); margin: 0 0 7px;
}

.carte-titre { font-size: 1.06rem; margin: 0 0 5px; }
.carte-lien:hover .carte-titre { color: var(--navy-600); }
.carte-soustitre {
  margin: 0; font-size: 0.86rem; line-height: 1.5;
  color: var(--encre-douce);
}

/* ------------------------------------------------------------------
   Fiche d'un livre
   ------------------------------------------------------------------ */

.fiche {
  max-width: var(--large); margin: 0 auto;
  padding: 54px 24px 76px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

.fiche-colonne { position: sticky; top: 92px; }

.fiche-couverture {
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(10, 22, 40, 0.12), 0 22px 40px -20px rgba(10, 22, 40, 0.55);
}

.fiche-donnees {
  margin: 26px 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--trait);
  font-size: 0.88rem;
}
.fiche-donnees li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--trait);
}
.fiche-donnees dt, .fiche-donnees .nom { color: var(--encre-douce); }
.fiche-donnees .valeur { color: var(--navy-800); font-weight: 500; text-align: right; }

.fil { font-size: 0.84rem; color: var(--encre-douce); margin: 0 0 22px; }
.fil a { color: var(--navy-600); }

.fiche h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 0.3em; }
.fiche-soustitre {
  font-family: var(--serif);
  font-size: 1.16rem; color: var(--encre-douce);
  margin: 0 0 32px; max-width: var(--texte);
  font-style: italic;
}

.accroche {
  font-family: var(--serif);
  font-size: 1.28rem; line-height: 1.5;
  color: var(--navy-900);
  margin: 0 0 30px;
  padding-left: 22px;
  border-left: 2px solid var(--navy-600);
  max-width: var(--texte);
}

.corps { max-width: var(--texte); }
.corps p { margin: 0 0 1.2em; }

.promesses { margin: 38px 0; max-width: var(--texte); }
.promesses h2 {
  font-family: var(--sans);
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.17em;
  color: var(--navy-500); margin-bottom: 16px;
}
.promesses ul { margin: 0; padding: 0; list-style: none; }
.promesses li {
  position: relative;
  padding: 0 0 0 26px; margin-bottom: 14px;
  line-height: 1.6;
}
/* Un simple tiret cadratin en guise de puce : sobre, et lisible a la loupe */
.promesses li::before {
  content: "—";
  position: absolute; left: 0; top: 0;
  color: var(--navy-400);
}

.benefice {
  background: var(--papier-creux);
  border-left: 2px solid var(--navy-400);
  padding: 20px 24px;
  margin: 32px 0;
  max-width: var(--texte);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.benefice .etiquette { margin-bottom: 6px; }
.benefice p { margin: 0; }

/* Le sommaire du livre, replie. Un <details> natif : pas de script, et
   le contenu reste lu par les moteurs et les lecteurs d'ecran. */
.sommaire {
  margin: 34px 0; max-width: var(--texte);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}
.sommaire summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 16px 0;
  cursor: pointer; list-style: none;
  text-align: left; hyphens: manual;
}
.sommaire summary::-webkit-details-marker { display: none; }
.sommaire-titre {
  font-family: var(--sans);
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.17em;
  color: var(--navy-500);
}
.sommaire-titre::before {
  content: "+"; display: inline-block; width: 18px;
  color: var(--navy-400); font-weight: 600;
}
.sommaire[open] .sommaire-titre::before { content: "−"; }
.sommaire summary:hover .sommaire-titre { color: var(--navy-700); }
.sommaire-annonce { font-size: 0.86rem; color: var(--encre-douce); white-space: nowrap; }
.sommaire ol { margin: 0 0 20px; padding: 0; list-style: none; }
.sommaire li { text-align: left; hyphens: manual; line-height: 1.5; }
.sommaire-entree {
  padding: 6px 0 6px 18px; font-size: 0.95rem;
  border-left: 1px solid var(--trait);
}
.sommaire-partie {
  margin: 18px 0 6px;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--navy-600);
}
.sommaire-partie:first-child { margin-top: 4px; }

.public {
  margin: 30px 0; padding-top: 22px;
  border-top: 1px solid var(--trait);
  max-width: var(--texte);
  color: var(--encre-douce);
  font-size: 0.95rem;
}
.public strong { color: var(--navy-800); font-weight: 600; }

.renvoi {
  margin: 26px 0 0; max-width: var(--texte);
  font-size: 0.92rem; color: var(--encre-douce); font-style: italic;
}

.voisins {
  display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  margin-top: 54px; padding-top: 26px;
  border-top: 1px solid var(--trait);
}
.voisin { text-decoration: none; max-width: 46%; }
.voisin .sens {
  display: block;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em;
  /* Capitales de 10,9 px : navy-400 tenait 3,47:1, navy-600 tient 8,15:1. */
  color: var(--navy-600); margin-bottom: 5px;
}
.voisin .nom { color: var(--navy-800); font-family: var(--serif); font-size: 1.02rem; }
.voisin:hover .nom { color: var(--navy-500); }
.voisin-suivant { text-align: right; margin-left: auto; }

/* ------------------------------------------------------------------
   Pages de texte (autrice, mentions, contact)
   ------------------------------------------------------------------ */

.page-texte { max-width: 840px; margin: 0 auto; padding: 62px 24px 84px; }
.page-texte h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.page-texte h2 { font-size: 1.3rem; margin-top: 2em; }
.page-texte p, .page-texte li { max-width: var(--texte); }
.page-texte .chapeau {
  font-family: var(--serif);
  font-size: 1.16rem; color: var(--encre-douce);
  margin-bottom: 2em; max-width: var(--texte);
}

.portrait-autrice {
  display: grid; grid-template-columns: 1fr; gap: 34px;
  margin-bottom: 40px;
}

/* ------------------------------------------------------------------
   Formulaires
   ------------------------------------------------------------------ */

.etiquette-champ {
  display: block;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--encre-douce); margin-bottom: 7px;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], select, textarea {
  width: 100%;
  font: inherit; font-size: 0.97rem;
  padding: 11px 14px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: #fff; color: var(--encre);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy-500);
  box-shadow: 0 0 0 3px rgba(47, 106, 165, 0.14);
}
textarea { resize: vertical; min-height: 170px; line-height: 1.6; }

button, .bouton {
  font: inherit; font-size: 0.94rem; font-weight: 500;
  padding: 11px 24px;
  border: 1px solid var(--navy-900);
  border-radius: var(--rayon);
  background: var(--navy-900); color: #fff;
  cursor: pointer; text-decoration: none;
  display: inline-block; text-align: center; white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}
button:hover, .bouton:hover { background: var(--navy-700); border-color: var(--navy-700); }

.bouton-sobre {
  background: transparent; color: var(--navy-700); border-color: var(--trait);
}
.bouton-sobre:hover { background: var(--papier-creux); color: var(--navy-900); border-color: var(--navy-300); }

.bouton-danger { background: transparent; color: #8c2b2b; border-color: #e2c3c3; }
.bouton-danger:hover { background: #fbf2f2; border-color: #c98f8f; }

.champ { margin-bottom: 20px; }
.champ .aide { font-size: 0.83rem; color: var(--encre-douce); margin: 6px 0 0; }

/* ------------------------------------------------------------------
   Petites classes d'espacement et de mesure.

   Elles remplacent des attributs style="…" poses dans les pages. La
   politique de securite du site est « style-src 'self' » : un attribut
   style inline est REFUSE par le navigateur, qui journalise une violation
   et affiche la page sans cette mise en forme. Sept pages en dependaient —
   le formulaire de contact perdait sa largeur, la case a cocher du panier
   son alignement. Une politique qui ment sur ce qu'elle autorise est pire
   qu'une politique large : ici, c'est le HTML qui rentre dans le rang.
   ------------------------------------------------------------------ */
.apres { margin-top: 2.4em; }
.apres-court { margin-top: 14px; }
.mesure { max-width: var(--texte); }
.form-etroit { max-width: 620px; }
.case-a-cocher { display: flex; gap: 10px; align-items: flex-start; }
.case-a-cocher input[type="checkbox"] { width: auto; margin-top: 5px; }

.rangee { display: flex; gap: 10px; flex-wrap: wrap; }
.rangee input { flex: 1 1 240px; }

.message {
  padding: 13px 17px;
  border-radius: var(--rayon);
  margin: 0 0 22px;
  font-size: 0.94rem;
  border: 1px solid;
}
.message-ok { background: #eef5fb; border-color: var(--navy-200); color: var(--navy-800); }
.message-erreur { background: #fbf2f2; border-color: #e2c3c3; color: #8c2b2b; }

/* ------------------------------------------------------------------
   Liste de diffusion
   ------------------------------------------------------------------ */

.diffusion { background: var(--navy-900); color: var(--navy-100); }
.diffusion-dedans {
  max-width: 720px; margin: 0 auto;
  padding: 74px 24px; text-align: center;
}
.diffusion h2 { color: #fff; font-size: 1.55rem; }
.diffusion-texte { color: var(--navy-300); max-width: 52ch; margin: 0 auto 28px; }
.diffusion-form { max-width: 480px; margin: 0 auto; text-align: left; }
.diffusion .etiquette-champ { color: var(--navy-400); }
.diffusion button { background: #fff; color: var(--navy-900); border-color: #fff; }
.diffusion button:hover { background: var(--navy-200); border-color: var(--navy-200); }
.diffusion .message { text-align: center; }

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

.pied { background: var(--navy-950); color: var(--navy-300); margin-top: 0; }
.pied-dedans {
  max-width: var(--large); margin: 0 auto;
  padding: 56px 24px 30px;
  display: flex; justify-content: space-between; gap: 34px; flex-wrap: wrap;
}
.pied-titre {
  font-family: var(--serif); font-size: 1.15rem; color: #fff; margin: 0 0 6px;
}
/* La signature tient sur une ligne. Le cap etait a 42ch, soit environ
   361 px : la phrase en demande ~380, et « fonctionne » tombait seul a
   la ligne. 60ch laisse la place sans supprimer la mesure — un texte
   plus long resterait borne, et sur un ecran etroit le paragraphe se
   replie normalement, un max-width n'etant pas une largeur imposee. */
.pied-texte { margin: 0; font-size: 0.9rem; max-width: 60ch; }
.pied-liens { display: flex; flex-direction: column; gap: 10px; }
.pied-liens a { color: var(--navy-300); text-decoration: none; font-size: 0.9rem; }
.pied-liens a:hover { color: #fff; }
/* « Gerer les cookies » est un bouton (il agit, il ne mene nulle part),
   habille comme les liens voisins. */
.pied-liens .lien-consentement {
  background: none; border: 0; padding: 0; margin: 0; text-align: left;
  font: inherit; font-size: 0.9rem; color: var(--navy-300); cursor: pointer;
}
.pied-liens .lien-consentement:hover { color: #fff; }

/* Bandeau de consentement du site, montre seulement hors d'Europe
   (assets/consentement.js). Refuser et Accepter ont exactement le meme
   poids visuel : la loi 25 et la CNIL demandent un choix sans pression. */
.bandeau-consentement {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000;
  max-width: 720px; margin: 0 auto; padding: 18px 20px;
  background: var(--navy-900); color: var(--navy-100);
  border: 1px solid var(--navy-800); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.bandeau-consentement-titre { margin: 0 0 6px; color: #fff; font-weight: 600; }
.bandeau-consentement-texte { margin: 0 0 14px; font-size: 0.92rem; line-height: 1.5; text-align: left; hyphens: none; }
.bandeau-consentement-texte a { color: #c9d6e8; }
.bandeau-consentement-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.bandeau-consentement-actions button {
  flex: 0 1 150px; padding: 10px 18px; font: inherit; font-size: 0.95rem; cursor: pointer;
  background: #fff; color: var(--navy-900); border: 1px solid #fff; border-radius: 6px;
}
.bandeau-consentement-actions button:hover { background: var(--navy-100); }
.bandeau-consentement-actions button:focus-visible { outline: 2px solid #8fa6c9; outline-offset: 2px; }
@media (max-width: 480px) {
  .bandeau-consentement-actions button { flex: 1 1 0; }
}
.pied-bas {
  max-width: var(--large); margin: 0 auto;
  padding: 20px 24px 40px;
  border-top: 1px solid var(--navy-800);
  font-size: 0.8rem;
  /* navy-600 sur navy-950 tombait a 2,31:1, pour du texte de 12,8 px.
     navy-300 le remonte a 8,9:1 sans changer la teinte. */
  color: var(--navy-300);
}

/* ------------------------------------------------------------------
   Petits ecrans
   ------------------------------------------------------------------ */

@media (max-width: 860px) {
  .fiche { grid-template-columns: 1fr; gap: 34px; }
  .fiche-colonne { position: static; max-width: 260px; }
  .ouverture { padding: 62px 24px 68px; }
  .section { padding: 54px 24px; }
  .ouverture-chiffres { gap: 30px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 18px; }
  .bandeau-dedans { padding: 13px 18px; }
  .menu { gap: 18px; }
  .voisin { max-width: 100%; }
  .voisins { flex-direction: column; }
  .voisin-suivant { text-align: left; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .carte-lien:hover .carte-image { transform: none; }
}

/* ------------------------------------------------------------------
   Impression : le texte, rien que le texte
   ------------------------------------------------------------------ */

@media print {
  .bandeau, .pied, .diffusion, .filtres, .voisins, .saut { display: none; }
  body { background: #fff; font-size: 11pt; }
  .fiche { display: block; }
  a { color: inherit; text-decoration: none; }
}

/* ------------------------------------------------------------------
   Boutique : prix, panier, commande.
   Le prix se lit d'un coup d'oeil, sans crier — meme navy, jamais de
   rouge promotionnel.
   ------------------------------------------------------------------ */

.carte-achat {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px;
}

.prix {
  font-family: var(--serif);
  font-size: 1.16rem; color: var(--navy-800);
  margin: 0; text-align: left;
}

.formats {
  margin: 7px 0 0;
  font-size: 0.76rem; letter-spacing: 0.06em;
  color: var(--encre-douce); text-align: left;
}

/* Bloc d'achat sous la couverture, sur la fiche d'un livre */
.fiche-achat {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--trait);
}
.fiche-achat .prix { font-size: 1.6rem; margin-bottom: 12px; }
.fiche-achat button { width: 100%; }

/* Compteur du panier dans le bandeau */
.lien-panier { display: inline-flex; align-items: center; gap: 7px; }
.pastille-panier {
  display: inline-block; min-width: 19px; padding: 1px 6px;
  border-radius: 999px;
  background: var(--navy-400); color: var(--navy-950);
  font-size: 0.72rem; font-weight: 600; text-align: center;
}

/* Tableau du panier et du recapitulatif de commande */
.panier-table {
  width: 100%; border-collapse: collapse;
  margin: 26px 0 34px;
}
.panier-table td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--trait);
  vertical-align: middle;
  text-align: left;
}
.panier-image { width: 64px; }
.panier-image img {
  width: 52px; height: auto; border-radius: 2px;
  box-shadow: 0 1px 4px rgba(10, 22, 40, 0.24);
}
.panier-formats { font-size: 0.8rem; color: var(--encre-douce); }
.panier-prix {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.panier-action { width: 90px; text-align: right; }
.panier-table tfoot td { border-bottom: none; padding-top: 18px; }
.panier-total-nom {
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--encre-douce);
}
.panier-total {
  font-family: var(--serif); font-size: 1.4rem; color: var(--navy-900);
}

.panier-form { margin-top: 10px; }
.panier-form h2 { font-size: 1.2rem; margin-top: 1.4em; }

/* Liens de téléchargement d'une commande réglée */
.liens-fichiers { margin: 18px 0; padding: 0; list-style: none; }
.liens-fichiers li {
  padding: 12px 0; border-bottom: 1px solid var(--trait);
}
.liens-fichiers a {
  font-family: var(--serif); font-size: 1.04rem;
  text-decoration: none; color: var(--navy-700);
}
.liens-fichiers a:hover { color: var(--navy-500); text-decoration: underline; }

@media (max-width: 560px) {
  .panier-image { display: none; }
  .panier-action { width: auto; }
}

/* ------------------------------------------------------------------
   Boutons discrets et barre d'actions. Partages par le site public
   (panier, boutique) et par le back-office : ils vivent donc ici, pas
   dans la feuille reservee a l'administration.
   ------------------------------------------------------------------ */

.mini {
  font: inherit; font-size: 0.8rem;
  padding: 5px 11px; border-radius: var(--rayon);
  border: 1px solid var(--trait); background: #fff; color: var(--navy-700);
  cursor: pointer; text-decoration: none; display: inline-block;
}
.mini:hover { border-color: var(--navy-300); background: var(--papier-creux); }
.mini-danger { color: #8c2b2b; }
.mini-danger:hover { background: #fbf2f2; border-color: #c98f8f; }

.barre-actions {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--trait);
}
.barre-actions .droite { margin-left: auto; }

/* Dans la boutique, « Ajouter » merite d'etre un peu plus present. */
.carte-achat .mini { padding: 7px 16px; font-size: 0.85rem; }
.carte-achat .mini:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

/* Prix sous la couverture, dans la grille : présent sans crier. */
.carte-prix {
  margin: 9px 0 0;
  font-family: var(--serif);
  font-size: 0.98rem;
  color: var(--navy-700);
  text-align: left;
}

/* ------------------------------------------------------------------
   26/09/2026 — « Est-ce pour moi ? », puis la preuve (sommaire, extrait).
   Voir MARKETING_COGNITIF.md. Meme navy, aucune teinte nouvelle, aucun
   mouvement ajoute : la seule animation du site reste le leger soulevement
   des couvertures au survol, deja coupe sous prefers-reduced-motion.
   ------------------------------------------------------------------ */

/* Texte reserve aux lecteurs d'ecran (« s'ouvre dans un nouvel onglet »). */
.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Carte du catalogue : pour qui, puis ce que le livre permet. Deux lignes
   courtes, sous le sous-titre, avant le prix. */
.etiquette-duree { letter-spacing: 0.08em; text-transform: none; font-size: 0.72rem; color: var(--encre-douce); }
.carte-public, .carte-benefice {
  margin: 8px 0 0; font-size: 0.84rem; line-height: 1.45;
  text-align: left; hyphens: manual;
}
.carte-public { color: var(--encre-douce); }
.carte-benefice { color: var(--navy-800); }
.carte-benefice::before { content: "→ "; color: var(--navy-600); }

/* Bloc d'achat : une action principale pleine largeur, l'extrait en
   action secondaire sobre dessous. Cibles de 44 px de haut. */
.bouton-plein { display: block; width: 100%; min-height: 44px; }
.fiche-achat .bouton + .formats { margin-bottom: 14px; }
.fiche-achat .bouton-sobre { margin-top: 10px; }
.prix-note {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--encre-douce); vertical-align: middle;
}

/* En tete de fiche : pour qui, et ce que le livre permet. */
.pour-qui {
  margin: 0 0 30px; padding: 18px 22px;
  max-width: var(--texte);
  background: var(--papier-creux);
  border-radius: var(--rayon);
  display: grid; gap: 14px;
}
.pour-qui dt {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--navy-600); margin-bottom: 3px;
}
.pour-qui dd { margin: 0; color: var(--navy-900); line-height: 1.55; text-align: left; hyphens: manual; }

/* La preuve : l'extrait et le sommaire, regroupes. */
.preuves { margin: 44px 0 10px; max-width: var(--texte); }
.preuves > h2 { font-size: 1.3rem; margin-bottom: 18px; }
.preuve-extrait {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 20px 22px; margin-bottom: 8px; background: #fff;
}
.preuve-amorce {
  margin: 0 0 16px; padding-left: 16px;
  border-left: 2px solid var(--navy-200);
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.6; color: var(--navy-900);
}
.preuve-amorce p { margin: 0; }
.preuve-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; text-align: left; }
.preuve-actions .bouton { min-height: 44px; }
.preuve-mesure { font-size: 0.84rem; color: var(--encre-douce); }
.preuves .sommaire { margin-top: 18px; }
.sommaire summary { min-height: 44px; }

/* Page d'extrait : une colonne de lecture, rien d'autre. */
.extrait { max-width: 760px; margin: 0 auto; padding: 54px 24px 80px; }
.extrait-entete { margin-bottom: 34px; padding-bottom: 24px; border-bottom: 1px solid var(--trait); }
.extrait-entete h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 0.4em; }
.extrait-cadre {
  margin: 0; padding: 12px 16px;
  background: var(--papier-creux); border-left: 2px solid var(--navy-400);
  font-size: 0.92rem; color: var(--encre); text-align: left; hyphens: manual;
}
.extrait-texte {
  font-family: var(--serif); font-size: 1.12rem; line-height: 1.75;
  max-width: var(--texte);
}
.extrait-texte h2 { font-size: 1.5rem; margin: 0 0 1em; }
.extrait-texte h3 { font-size: 1.16rem; margin: 1.6em 0 0.6em; }
.extrait-texte p { margin: 0 0 1.1em; }
.extrait-texte blockquote { margin: 0 0 1.1em; padding-left: 18px; border-left: 2px solid var(--navy-200); }
.extrait-texte ul, .extrait-texte ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.extrait-omis {
  font-family: var(--sans); font-size: 0.88rem; color: var(--encre-douce);
  font-style: italic; text-align: left; hyphens: manual;
}
.appel a { text-decoration: none; padding: 0 2px; }
.extrait-notes { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--trait); max-width: var(--texte); }
.extrait-notes h2 { font-size: 1.05rem; }
.extrait-notes ol { padding-left: 1.4em; font-size: 0.88rem; color: var(--encre-douce); }
.extrait-notes li { margin-bottom: 0.7em; text-align: left; hyphens: manual; overflow-wrap: anywhere; }
.retour-appel {
  display: inline-block; min-width: 24px; min-height: 24px;
  text-align: center; text-decoration: none;
}
.extrait-pdf { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--trait); max-width: var(--texte); }
.extrait-pdf h2 { font-size: 1.05rem; }
.extrait-pdf .bouton { min-height: 44px; white-space: normal; }
.lien-poids { font-weight: 400; color: var(--encre-douce); }
.extrait-suite {
  margin: 48px 0 0; padding: 26px 24px;
  background: var(--papier-creux); border-radius: var(--rayon);
  max-width: var(--texte);
}
.extrait-suite-titre { font-family: var(--serif); font-size: 1.2rem; color: var(--navy-900); margin: 0; text-align: left; }
.extrait-suite .fiche-achat { max-width: 340px; }
.extrait-retour { margin: 22px 0 0; font-size: 0.92rem; text-align: left; }

@media (max-width: 560px) {
  .pour-qui { padding: 16px; }
  .extrait { padding: 40px 18px 64px; }
  .extrait-texte { font-size: 1.05rem; }
}

@media print {
  .extrait-suite, .extrait-pdf { display: none; }
}

/* Petits ecrans : la couverture passe a cote des donnees du livre, pour que
   le titre et « Pour qui » arrivent plus tot dans la page (moins de la
   moitie de la hauteur d'avant). L'achat reste au-dessus du texte. */
@media (max-width: 860px) {
  .fiche-colonne {
    max-width: none;
    display: grid; grid-template-columns: 128px minmax(0, 1fr);
    gap: 0 20px; align-items: start;
  }
  .fiche-colonne .fiche-donnees { margin-top: 0; font-size: 0.84rem; }
  .fiche-colonne .fiche-donnees li { padding: 7px 0; }
  .fiche-colonne .fiche-achat { grid-column: 1 / -1; }
}
.preuve-amorce p { text-align: left; hyphens: manual; }

/* ------------------------------------------------------------------
   Texte justifie partout dans le contenu (demande de Souhour du
   17/10/2026, qui prime sur le choix du 28/09 decrit plus haut).
   La cesure automatique, en francais (<html lang="fr">), absorbe les
   blancs la ou le navigateur a son dictionnaire. Restent alignes comme
   avant : l'interface (boutons, menus, fil, tableaux, etiquettes), les
   colonnes etroites des cartes et les blocs centres.
   Le « :is() » porte une classe : la regle l'emporte ainsi sur les
   « .sommaire li », « .pour-qui dd »… alignes a gauche plus haut.
   ------------------------------------------------------------------ */
main :is(p, li, dd, blockquote, .accroche, .chapeau):not(
  .etiquette, .etiquette-champ, .chiffre-nom, .chiffre-valeur, .fil, .aide,
  .message, .mini, .carte-soustitre, .formats, .panier-formats, .panier-prix,
  .prix, .etat-en-ligne, .etat-hors-ligne, .methode-lien, .preuve-actions,
  .extrait-retour, .extrait-suite-titre, .diffusion-texte, .apres, .ouverture-texte
):not(.diffusion *, .voisin *, .tableau *, .fiche-donnees *, .carte *, .menu *) {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* 31/10/2026 — Mots resserrés (demande de Souhour) : dans les paragraphes justifiés, l’espace qui manque en fin de ligne
   est réparti entre les lettres au lieu des seuls espaces, pour que les mots ne s’écartent plus. */
*{text-justify:inter-character!important}