/* =================================================================
   ITEXPERIENCE - lecture.css
   Les pages de lecture de la vitrine : mentions légales (legal.html), pages
   de contenu (tools/page-shell.html, coulé par tools/build_pages.py) et page
   404 (404.html). Habillage du 18/09/2026, sur le modèle de rdv.html : ces
   pages portent l'identité de l'accueil. css/studio.css est chargée AVANT
   cette feuille et fournit tout le reste (palette, polices, en-tête, boutons,
   pied de page) ; ici, uniquement la mise en page propre à la lecture.
   Aucune couleur en dur : tout passe par les variables du bloc PALETTE de
   studio.css, pour que ces pages suivent l'accueil le jour où elle change.
   Aucun script non plus : rien ici ne s'appuie sur les classes .rev ou .pose,
   dont l'apparition au défilement est pilotée par js/offre.js.
   ================================================================= */

/* --- 1. Le premier chapitre, sur l'encre --------------------------------
   Surtitre de l'accueil, titre géant, puis une ligne de repères (date de mise
   à jour ou signature, et un lien) sous un filet, comme la rangée de faits du
   premier écran de l'accueil. */
.lecture-tete{padding-block:clamp(1.8rem,4.4vw,3.8rem) clamp(2rem,4.6vw,4rem);}
/* Interligne 1,1 : ces titres-ci portent des capitales accentuées en début de deuxième ligne
   (CONFIDENTIALITÉ, PROPRIÉTÉ), dont l'accent touchait le bas de la ligne du dessus à .99.
   Depuis le 18/09/2026, c'est aussi l'interligne de tous les .geant (studio.css, accueil compris). */
.lecture-titre{font-size:clamp(2.5rem,6.4vw,5.8rem);line-height:1.1;letter-spacing:-.01em;max-width:19ch;}
.lecture-titre .serif{font-size:.8em;color:var(--accent);padding-inline:.05em;}
.lecture-reperes{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem 2rem;
  margin-top:clamp(1.4rem,3vw,2.4rem);padding-top:.8rem;border-top:1px solid var(--ligne);
}
.lecture-date{font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-2);}
.lecture-signature{font-size:1rem;color:var(--texte-2);}
/* Lien de texte, et non boîte flexible : sur deux lignes (téléphone), le soulignement suit chaque
   ligne et la flèche reste collée au dernier mot. */
.lecture-lien{padding-block:.55rem;color:var(--texte);font-weight:700;text-decoration:none;}
.lecture-lien span{
  text-decoration:underline;text-decoration-color:var(--ligne-forte);
  text-decoration-thickness:1px;text-underline-offset:.3em;transition:text-decoration-color .18s;
}
.lecture-lien svg{display:inline-block;vertical-align:-.2em;margin-left:.5rem;color:var(--accent-ici);transition:transform .18s;}
.lecture-lien:hover span{text-decoration-color:var(--accent-ici);text-decoration-thickness:2px;}
.lecture-lien:hover svg{transform:translateX(3px);}

/* --- 2. Le corps, sur la chaux ------------------------------------------
   Chaque section est un bloc : son titre à gauche, numéroté comme les
   rubriques de l'accueil (compteur CSS : aucun chiffre dans le texte de la
   page, donc rien à traduire ni à relire), son texte à droite dans une colonne
   d'environ 70 signes. Le titre reste en vue pendant la lecture d'une longue
   section (sticky, sous l'en-tête collant) : studio.css pose overflow:hidden
   sur tous les chapitres, ce qui fige un sticky, d'où overflow:clip ici, qui
   rogne pareil sans créer de conteneur de défilement. Sous 1000 px, une seule
   colonne. */
.lecture{padding-block:clamp(1.8rem,4.4vw,4rem) clamp(2.6rem,6vw,5.4rem);overflow:clip;counter-reset:bloc;}
.lecture__intro{max-width:62ch;margin-bottom:clamp(1.6rem,3.6vw,3rem);}
.lecture__intro>*+*{margin-top:1rem;}
.lecture__bloc{
  display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);
  gap:.9rem clamp(1.6rem,4vw,4rem);align-items:start;
  padding-block:clamp(1.3rem,2.6vw,2.1rem);border-top:1px solid var(--ligne-forte);
  counter-increment:bloc;
}
.lecture__bloc:last-child{padding-bottom:0;}
/* Les ancres (#mentions, #confidentialite…) se posent sur la SECTION, jamais sur ce titre collant :
   un lien vers un élément collant, suivi depuis plus bas, s'arrêtait à la position où le titre était
   poussé, c'est-à-dire en fin de section (relecture du 18/09/2026). */
.lecture__bloc>h2{
  position:sticky;top:calc(var(--entete-h) + 1.2rem);
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.55rem,2.5vw,2.15rem);line-height:1.1;letter-spacing:.005em;text-wrap:balance;
}
/* La seconde déclaration (texte de remplacement vide) tait le numéro aux lecteurs d'écran ;
   un navigateur qui ne la comprend pas garde la première. */
.lecture__bloc>h2::before{
  content:counter(bloc,decimal-leading-zero);
  content:counter(bloc,decimal-leading-zero) / "";
  display:block;margin-bottom:.5rem;
  font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;
  font-size:1.35rem;line-height:1;color:var(--accent-ici);
}
.lecture__texte{max-width:68ch;font-size:1.0625rem;line-height:1.72;color:var(--texte);}
.lecture__texte>*+*{margin-top:1rem;}
.lecture strong,.lecture b{font-weight:700;}
.lecture__texte ul{display:grid;gap:.7rem;}
.lecture__texte li{position:relative;padding-left:1.4rem;}
.lecture__texte li::before{content:"";position:absolute;left:0;top:.8em;width:9px;height:2px;background:var(--accent-ici);}
.lecture a{
  color:var(--texte);font-weight:600;overflow-wrap:anywhere;
  text-decoration:underline;text-decoration-color:var(--accent-ici);
  text-decoration-thickness:1px;text-underline-offset:.22em;
}
.lecture a:hover{text-decoration-thickness:2px;}
.lecture a[href^="tel:"]{white-space:nowrap;}   /* un numéro de téléphone ne se coupe pas */
.lecture [id]{scroll-margin-top:calc(var(--entete-h) + 1.4rem);}
/* Lien d'évitement : le début du contenu s'arrête sous l'en-tête collant, pas derrière lui. */
main[id]{scroll-margin-top:var(--entete-h);}
/* Pages de contenu : le chapeau ouvre l'article en grand, la note de fin se lit en retrait. */
.lecture .lead{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.5;color:var(--texte);}
.lecture .note{margin-top:1.4rem;font-size:.98rem;font-style:italic;color:var(--texte-2);}
/* Les sources ferment l'article : titre en micro-capitales, sans numéro, liste plus discrète. */
.lecture__bloc--sources>h2{
  font-family:var(--f-texte);font-size:.8125rem;font-weight:700;letter-spacing:.19em;line-height:1.3;color:var(--texte-2);
}
.lecture__bloc--sources>h2::before{content:none;}
.lecture__bloc--sources li{font-size:.95rem;line-height:1.55;color:var(--texte-2);}

/* --- 3. La page 404 ------------------------------------------------------
   Un seul chapitre sur l'encre : le code en contour laiton, le titre géant,
   une phrase et le chemin du retour. Le pied de page suit, pour repartir. */
.introuvable{
  min-height:calc(100svh - var(--entete-h));display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(2.4rem,6vw,5rem);
}
.introuvable__code{
  font-family:var(--f-titre);font-weight:800;line-height:.8;letter-spacing:-.02em;
  font-size:clamp(7rem,24vw,19rem);color:transparent;
  -webkit-text-stroke:clamp(1.5px,.18vw,2.6px) var(--accent);
  margin-bottom:clamp(1.1rem,2.6vw,2.2rem);
}
.introuvable__titre{font-size:clamp(2.6rem,7vw,6rem);}
.introuvable__texte{font-size:clamp(1.1rem,1.6vw,1.35rem);}
.introuvable .btn{margin-top:clamp(1.4rem,3vw,2.2rem);}

/* --- 4. Adaptations ----------------------------------------------------- */
@media (max-width:1000px){
  .lecture__bloc{grid-template-columns:minmax(0,1fr);}
  .lecture__bloc>h2{position:static;}
}
@media (max-width:820px){
  /* Pas de barre d'action en bas d'écran sur ces pages : la réserve que lui garde studio.css
     laisserait un vide sous le pied de page. */
  body{padding-bottom:0;}
  .lecture-reperes{flex-direction:column;align-items:flex-start;}
  .lecture__texte{font-size:1rem;}
  .lecture .note,.lecture__bloc--sources li{font-size:1rem;}
}
@media (max-width:560px){
  /* Le bouton de retour prend toute la largeur (son parent, .enveloppe, n'est pas une boîte
     flexible : align-self n'y pouvait rien) et son texte, sur deux ou trois lignes en néerlandais,
     se lit aligné à gauche, la flèche au bout. */
  .introuvable .btn{display:flex;width:100%;justify-content:space-between;text-align:left;}
}