/*
Theme Name: Lumières Soldées
*/
@import url('https://fonts.googleapis.com/css2?family=Rokkitt:wght@400;700&family=Karla:wght@400;700&display=swap');

/* ==========================================================================
   GABARIT « ETABLI »
   Un atelier de quartier, pas un bureau d'etudes. Six traits, et ce sont les seuls
   qui comptent ici :
   1. LES CASES CARREES de 16px a bord 2px devant chaque ligne de liste — c'est LA
      signature du gabarit. Elles sont purement visuelles (aria-hidden), on ne coche
      rien : elles disent « voila ce qu'il y a sur l'etabli », pas « cliquez ».
   2. LA TRAME DE BOIS : un repeating-linear-gradient de filets a 102deg, tres discret,
      en fond des bandeaux de section. Jamais une image, jamais une texture chargee.
   3. Des bordures de 2px, un rayon de 0 PARTOUT (images comprises), aucune ombre :
      une carte est une planche decoupee, pas une fiche flottante.
   4. Sous chaque image, un BANDEAU en petites capitales qui porte des donnees
      CALCULEES : nombre d'etapes (= les h2 du contenu) et duree (jr_temps_lecture).
      Pas de « niveau », pas de cout : ces donnees n'existent pas dans WordPress.
   5. Rokkitt (un seul poids, 400) en titres jusqu'a 40px — l'etiquette collee sur
      un casier ; Karla 17px/1.7 en corps ; chiffres tabulaires partout.
   6. Une tete a DOUBLE ETAGE : la marque et le champ « Quels travaux ? » au-dessus,
      le rail des zones en dessous, separes par un filet de 2px.

   ⛔ Aucun bleu, aucun arrondi, aucun aplat administratif : ce gabarit se separe
   volontairement de « chantier-pas-a-pas » et de « dossier-de-travaux ».
   ========================================================================== */

/* ---------- 1. JETONS ---------------------------------------------------- */
:root{
  --fond:#f5f6f3;            /* le blanc d'atelier, casse de chaud */
  --surf:#DCDDDA;            /* la surface des bandeaux et des encadres — attendu par jr_vignette */
  --encre:#1c211d;           /* le brun-noir du trait, jamais #000 */
  --doux:#2E322E;            /* le gris de service : dates, chapos, comptes (7,5:1 sur le fond) */
  --filet:#C1C3C0;           /* le trait fin, et les lignes de la trame de bois */
  --bois:#1D221E;            /* la bande sombre « Securite » — un bois brule */
  --bois-txt:#E2E3E0;        /* le texte sur la bande de bois (14:1) */
  --bois-doux:#959894;       /* le texte de service sur la bande de bois (7,5:1) */
  --bois-filet:#252A26;      /* les bordures a l'interieur de la bande de bois */
  --accent:#3f6b4f;       /* le vert d'atelier, tire par site */
  --accent2:#3f6b4f;     /* l'ocre de ruban : securite, reperes — jamais un aplat de page */
  --accent-txt:color-mix(in srgb, #3f6b4f 0%, #14130C);
  --accent2-txt:color-mix(in srgb, #3f6b4f 0%, #170F02);
  --bois-accent:color-mix(in srgb, #3f6b4f 60%, #ffffff); /* volontairement identique dans les deux themes :
                                il s'affiche TOUJOURS sur le bois sombre */
  --titre:'Rokkitt', 'Bitter', 'Georgia', 'Times New Roman', serif;
  --courant:'Karla', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --rayon:0px;               /* le gabarit n'arrondit RIEN */
  --trait:2px;               /* l'epaisseur unique de toutes les bordures structurantes */
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fond:#131711; --accent2:#7cae8d; --accent:#7cae8d; --surf:#141812; --encre:#eef1ea; --doux:#838780; --filet:#161A14;
    --bois:#131711; --bois-txt:#EEF1EA; --bois-doux:#878A84; --bois-filet:#181C16;
    --accent-txt:color-mix(in srgb, #3f6b4f 0%, #ffffff);
    --accent2-txt:color-mix(in srgb, #3f6b4f 0%, #ffffff);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --fond:#131711; --accent2:#7cae8d; --accent:#7cae8d; --surf:#141812; --encre:#eef1ea; --doux:#838780; --filet:#161A14;
  --bois:#131711; --bois-txt:#EEF1EA; --bois-doux:#878A84; --bois-filet:#181C16;
  --accent-txt:color-mix(in srgb, #3f6b4f 0%, #ffffff);
  --accent2-txt:color-mix(in srgb, #3f6b4f 0%, #ffffff);
  color-scheme:dark;
}

/* ---------- 2. SOCLE ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);
  font-family:var(--courant);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block;border-radius:var(--rayon)}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent-txt);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--titre);font-weight:400;margin:0;line-height:1.18;
  letter-spacing:-.005em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
dl,dt,dd{margin:0}
button{font:inherit}
/* les quantites sont TOUJOURS en chiffres tabulaires : une liste de nombres s'aligne */
time,.et-nb,.et-bandeau,.et-zone-compte,.et-index-lettre,.et-pied-nb{font-variant-numeric:tabular-nums}
.sb-oeil,.sb-oeil-txt{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sb-oeil:focus{left:.5rem;top:.5rem;width:auto;height:auto;padding:.5rem .8rem;
  background:var(--encre);color:var(--fond);z-index:99}
.et-env{width:min(1240px,100% - 2.4rem);margin-inline:auto}
.et-pt{color:var(--filet);padding-inline:.4em}

/* ---------- 3. LES TROIS TRAITS SIGNATURE -------------------------------- */

/* 3a. LA CASE CARREE — 16px, bord 2px, jamais remplie, jamais cliquable */
.et-case{flex:0 0 auto;width:16px;height:16px;background:transparent;
  border:var(--trait) solid var(--accent-txt);margin-top:.32em}

/* 3b. LA TRAME DE BOIS — des filets a 102deg, poses DERRIERE le contenu du bandeau.
       isolation + z-index:-1 : la trame reste sous le texte du meme bloc. */
.et-trame{position:relative;isolation:isolate}
.et-trame::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(102deg, var(--filet) 0 1px, transparent 1px 9px);
  opacity:.9}
.et-bande--bois .et-trame::before{
  background:repeating-linear-gradient(102deg, var(--bois-filet) 0 1px, transparent 1px 9px);
  opacity:1}

/* 3c. LE BANDEAU sous l'image : petites capitales, donnees CALCULEES uniquement */
.et-bandeau{display:flex;align-items:center;flex-wrap:wrap;
  padding:.34rem .62rem;background:var(--surf);color:var(--doux);
  border-top:var(--trait) solid var(--encre);border-bottom:var(--trait) solid var(--encre);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
.et-bandeau--ouvrage{font-size:12px;padding:.42rem .7rem}
.et-bandeau .et-pt{color:var(--doux)}

/* la liste a cases : le motif se retrouve a l'accueil, dans l'article et dans le pied */
.et-coches li{display:flex;gap:.62rem;align-items:flex-start;padding:.52rem 0;
  border-bottom:var(--trait) solid var(--filet)}
.et-coches li:last-child{border-bottom:0}
.et-coche-txt{min-width:0;flex:1 1 auto;font-size:15px;line-height:1.45}
.et-coche-txt a{font-family:var(--titre);font-size:16px;line-height:1.32}
.et-coche-meta{display:block;margin-top:.14rem;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--doux)}
.et-coche-cle{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--doux)}

/* ---------- 4. ETIQUETTES, PHOTOS, PLAQUES ------------------------------- */
.et-etiquette{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-txt);
  border-bottom:var(--trait) solid var(--accent-txt);padding-bottom:.16rem;margin-bottom:.55rem}
.et-titre-bloc{font-size:16px;letter-spacing:.02em;padding-bottom:.45rem;
  border-bottom:var(--trait) solid var(--encre);margin-bottom:.55rem}
.et-chapo{font-size:17px;line-height:1.6;color:var(--doux);margin-top:.6rem}
.et-ligne{font-size:14.5px;line-height:1.5;color:var(--doux);margin-top:.35rem}
.et-lien-fort{margin-top:.8rem;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-txt)}

.et-photo{margin:0}
.et-photo img{width:100%;object-fit:cover;aspect-ratio:3/2}
.et-photo--ouvrage img{aspect-ratio:3/2}
.et-photo--art{margin-block:1.4rem}
.et-photo--art img{aspect-ratio:3/2;border:var(--trait) solid var(--encre)}
.et-photo figcaption{font-size:12px;line-height:1.4;color:var(--doux);
  padding:.42rem .1rem 0;border-bottom:var(--trait) solid var(--filet)}
/* la plaque de repli de jr_vignette : meme silhouette 3:2, jamais un arrondi.
   La couleur --plaque fournie par le helper sert de reglet bas, pas de fond
   (un fond inconnu ne garantirait aucun contraste). */
.jr-plaque{display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:3/2;padding:1rem;background:var(--surf);color:var(--encre);
  font-family:var(--titre);font-size:19px;line-height:1.25;border-radius:var(--rayon);
  border-bottom:6px solid var(--plaque,var(--accent))}

/* ---------- 5. LA TETE A DOUBLE ETAGE ------------------------------------ */
.et-tete{background:var(--fond)}
.et-etage--marque{border-bottom:var(--trait) solid var(--encre)}
.et-marque-in{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  min-height:56px;padding-block:.5rem}
.et-marque a{display:inline-flex;align-items:center;gap:.6rem}
.et-marque a:hover{text-decoration:none}
.et-marque-mot{font-family:var(--titre);font-size:clamp(22px,3.4vw,30px);line-height:1;
  color:var(--encre);letter-spacing:-.01em}
.et-mono{display:inline-flex;width:clamp(24px,3.4vw,32px);color:var(--accent-txt)}
.et-mono svg{width:100%;height:auto;fill:currentColor}
.et-baseline{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--doux);padding-left:1rem;border-left:var(--trait) solid var(--filet)}
.et-cherche{display:flex;margin-left:auto;min-width:0}
.et-cherche input{font:inherit;font-size:14px;padding:.42rem .6rem;width:min(230px,46vw);
  background:var(--fond);color:var(--encre);border:var(--trait) solid var(--encre);
  border-right:0;border-radius:var(--rayon)}
.et-cherche input::placeholder{color:var(--doux)}
.et-cherche button{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.42rem .8rem;background:var(--encre);color:var(--fond);
  border:var(--trait) solid var(--encre);border-radius:var(--rayon);cursor:pointer}
.et-burger{display:none;background:none;padding:.42rem .46rem;cursor:pointer;
  border:var(--trait) solid var(--encre);border-radius:var(--rayon)}
.et-burger span{display:block;width:18px;height:2px;background:var(--encre);margin:3px 0}

/* etage 2 : le rail des zones, en casiers separes par un filet de 2px */
.et-rail{background:var(--surf);border-bottom:var(--trait) solid var(--encre);
  position:sticky;top:0;z-index:19}
.et-rail-in{display:flex;overflow-x:auto;scrollbar-width:none}
.et-rail-in::-webkit-scrollbar{display:none}
.et-rail-in a{white-space:nowrap;padding:.5rem .85rem;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre);
  border-bottom:3px solid transparent}
.et-rail-in a + a{border-left:var(--trait) solid var(--filet)}
.et-rail-in a:hover{text-decoration:none;background:var(--fond)}
.et-rail-in a.is-actif{border-bottom-color:var(--accent-txt);color:var(--accent-txt)}

/* ---------- 6. ACCUEIL : L'OUVRAGE DU JOUR ------------------------------- */
.et-ouvre{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;
  border:var(--trait) solid var(--encre);margin-block:1.5rem}
.et-ouvre-col{min-width:0;padding:1.1rem}
.et-ouvre-col--liste{background:var(--surf);border-left:var(--trait) solid var(--encre)}
.et-ouvrage-titre{font-size:clamp(26px,3.6vw,40px);line-height:1.1;margin-bottom:.8rem}
.et-ouvre .et-bandeau{border-bottom:0}
.et-ouvre--zone{margin-top:1.4rem}

/* ---------- 7. ACCUEIL : LES SECTIONS ET LES CARTES ---------------------- */
.et-section{padding-block:1.3rem}
.et-section-tete{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding:.62rem .8rem;background:var(--surf);
  border:var(--trait) solid var(--encre);margin-bottom:1.1rem}
.et-section-titre{font-size:clamp(19px,2.3vw,25px);line-height:1.2}
.et-section-sous{font-size:13.5px;color:var(--doux);flex:1 1 240px;line-height:1.45}
.et-section-tout{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-txt);white-space:nowrap}

.et-rangee{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.et-rangee--trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.et-carte{display:flex;flex-direction:column;min-width:0;background:var(--fond);
  border:var(--trait) solid var(--encre)}
.et-carte .et-bandeau{border-bottom:0;border-top-width:var(--trait)}
.et-carte-corps{padding:.7rem .8rem .6rem;flex:1 1 auto;min-width:0}
.et-carte-titre{font-size:18px;line-height:1.25}
.et-pastille{align-self:flex-start;margin:0 .8rem .8rem;padding:.14rem .45rem;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-txt);border:var(--trait) solid var(--accent-txt)}

/* ---------- 8. ACCUEIL : LA PANNE DU MOIS (bande surf, 2 colonnes) ------- */
.et-bande{padding-block:1.7rem;border-top:var(--trait) solid var(--encre);
  border-bottom:var(--trait) solid var(--encre);margin-block:1.5rem}
.et-bande--surf{background:var(--surf)}
.et-panne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.6rem;align-items:start}
.et-panne-photo{border:var(--trait) solid var(--encre);background:var(--fond)}
.et-panne-photo .et-bandeau{border-bottom:0}
.et-panne-titre{font-size:clamp(22px,2.9vw,32px);line-height:1.14;margin-bottom:.5rem}
.et-panne-sous{margin-top:.6rem;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--doux)}
.et-titre-bloc--panne{margin-top:1.1rem}
.et-coches--panne li{border-bottom-color:var(--filet)}

/* ---------- 9. ACCUEIL : LA BANDE DE BOIS « SECURITE » ------------------- */
.et-bande--bois{background:var(--bois);color:var(--bois-txt);border-color:var(--bois)}
.et-section-tete--bois{background:transparent;border-color:var(--bois-filet);
  position:relative;isolation:isolate}
.et-section-tete--bois::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(102deg, var(--bois-filet) 0 1px, transparent 1px 9px)}
.et-bande--bois .et-section-titre{color:var(--bois-accent)}
.et-bande--bois .et-section-sous{color:var(--bois-doux)}
.et-rappels{gap:1.1rem}
.et-rappel{border:var(--trait) solid var(--bois-filet);padding:.9rem 1rem;min-width:0}
.et-rappel-titre{font-size:19px;color:var(--bois-accent);padding-bottom:.4rem;margin-bottom:.5rem;
  border-bottom:var(--trait) solid var(--bois-filet)}
.et-rappel p{font-size:15px;line-height:1.6;color:var(--bois-txt)}

/* ---------- 10. ACCUEIL : L'INDEX A-Z ------------------------------------ */
.et-index-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.et-index-bloc{border:var(--trait) solid var(--filet);padding:.7rem .8rem;min-width:0}
.et-index-lettre{font-family:var(--titre);font-size:26px;line-height:1;color:var(--accent-txt);
  padding-bottom:.4rem;margin-bottom:.5rem;border-bottom:var(--trait) solid var(--encre)}
.et-index-liste li{padding:.3rem 0;font-size:14.5px;line-height:1.4}
.et-index-liste li + li{border-top:1px solid var(--filet)}

/* ---------- 11. ARTICLE -------------------------------------------------- */
.et-article{padding-block:1.2rem 2rem}
.et-art-tete{max-width:min(820px,100%)}
.sb-fil,.et-fil{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--doux);padding-bottom:.6rem;margin-bottom:.9rem;
  border-bottom:var(--trait) solid var(--filet)}
.et-art-titre{font-size:clamp(27px,4.4vw,40px);line-height:1.1}
.et-art-chapo{font-size:19px;line-height:1.55;color:var(--doux);margin-top:.8rem}
.et-art-credits{display:flex;flex-wrap:wrap;align-items:center;font-size:12px;font-weight:600;
  letter-spacing:.06em;color:var(--doux);margin-top:.9rem;padding-block:.55rem;
  border-top:var(--trait) solid var(--filet);border-bottom:var(--trait) solid var(--filet)}
.et-art-corps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,304px);
  gap:2rem;align-items:start;padding-block:1.3rem 1.6rem}
.et-art-texte{min-width:0}

/* LES ETAPES : chaque h2 du corps est numerote 01, 02, 03 par un compteur CSS.
   Le nombre affiche dans le bandeau et dans « Sur l'etabli » est le meme comptage,
   fait cote PHP (et_etapes) — les deux ne peuvent pas diverger. */
.et-texte{counter-reset:et-etape;font-size:17px;line-height:1.7;max-width:min(730px,100%);
  overflow-wrap:break-word}
.et-texte p{margin:0 0 1.15rem}
.et-texte h2{counter-increment:et-etape;display:flex;gap:.7rem;align-items:baseline;
  font-size:clamp(21px,2.6vw,26px);margin:2.1rem 0 .75rem;padding-top:.75rem;
  border-top:var(--trait) solid var(--encre)}
.et-texte h2::before{content:counter(et-etape,decimal-leading-zero);flex:0 0 auto;
  font-family:var(--courant);font-size:14px;font-weight:700;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;padding:.1rem .42rem;
  background:var(--accent-txt);color:var(--fond)}
.et-texte h3{font-size:19px;margin:1.5rem 0 .5rem;padding-left:.7rem;
  border-left:4px solid var(--accent-txt)}
.et-texte h4{font-size:17px;margin:1.2rem 0 .4rem;color:var(--doux)}
.et-texte ul{margin:0 0 1.15rem}
.et-texte ul li{position:relative;padding-left:1.5rem;margin-bottom:.5rem}
.et-texte ul li::before{content:"";position:absolute;left:0;top:.58em;width:10px;height:10px;
  border:var(--trait) solid var(--accent-txt)}
.et-texte ol{list-style:decimal;margin:0 0 1.15rem;padding-left:1.4rem}
.et-texte ol li{margin-bottom:.5rem}
.et-texte a{color:var(--accent-txt);text-decoration:underline;text-underline-offset:3px}
.et-texte blockquote{margin:1.6rem 0;padding:.8rem 1rem;background:var(--surf);
  border-left:6px solid var(--accent2-txt);font-size:18px;line-height:1.55}
.et-texte blockquote p:last-child{margin-bottom:0}
.et-texte img,.et-texte figure{margin:1.4rem 0}
.et-texte figure img{border:var(--trait) solid var(--encre)}
.et-texte figcaption{font-size:12.5px;color:var(--doux);padding-top:.4rem;line-height:1.4}
/* un tableau ne deborde jamais : il defile dans sa propre boite */
.et-texte table{display:block;overflow-x:auto;width:100%;border-collapse:collapse;
  font-size:15px;margin:1.4rem 0}
.et-texte th,.et-texte td{border:var(--trait) solid var(--filet);padding:.55rem .7rem;text-align:left}
.et-texte th{background:var(--surf);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase}

/* les encadres : bordure epaisse, aucun fond degrade, aucune ombre */
.et-encadre{border:var(--trait) solid var(--encre);padding:.95rem 1.05rem;margin:1.8rem 0;
  max-width:min(730px,100%)}
.et-encadre-titre{font-size:17px;letter-spacing:.02em;padding-bottom:.45rem;margin-bottom:.6rem;
  border-bottom:var(--trait) solid var(--filet)}
.et-encadre--secu{border-color:var(--accent2-txt);border-left-width:10px}
.et-encadre--secu .et-encadre-titre{color:var(--accent2-txt);border-bottom-color:var(--accent2-txt)}
.et-encadre--secu .et-case{border-color:var(--accent2-txt)}
.et-encadre--pro{background:var(--surf)}
.et-coches--encadre li{border-bottom-color:var(--filet)}
.et-coches--encadre .et-coche-txt{font-size:15px}

.et-faq{margin:1.8rem 0 0;padding-top:1rem;max-width:min(730px,100%);
  border-top:var(--trait) solid var(--encre)}
.et-faq-liste{counter-reset:et-q}
.et-faq-liste li{counter-increment:et-q;display:flex;gap:.6rem;align-items:baseline;
  padding:.5rem 0;border-bottom:var(--trait) solid var(--filet)}
.et-faq-liste li::before{content:counter(et-q,decimal-leading-zero);flex:0 0 auto;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--accent-txt);
  font-variant-numeric:tabular-nums}
.et-faq-liste a{font-family:var(--titre);font-size:16px;line-height:1.35}

/* « Sur l'etabli » : la colonne a cases carrees, collee sous le rail (34px) */
.et-etabli{position:sticky;top:52px;min-width:0;background:var(--surf);
  border:var(--trait) solid var(--encre);padding:.9rem 1rem}
.et-etabli-titre{font-size:16px;letter-spacing:.02em;padding-bottom:.5rem;margin-bottom:.4rem;
  border-bottom:var(--trait) solid var(--encre)}
.et-coches--etabli .et-coche-txt{font-size:15.5px;font-family:var(--titre)}
.et-etabli-note{margin-top:.7rem;padding-top:.6rem;font-size:12px;line-height:1.45;
  color:var(--doux);border-top:var(--trait) solid var(--filet)}
.et-art-pied{margin-top:1.8rem;padding-top:1rem;max-width:min(730px,100%);
  border-top:var(--trait) solid var(--encre)}
.et-section--suite{padding-top:1.6rem;border-top:var(--trait) solid var(--filet)}

/* la signature d'auteur produite par jr_signature — remise au registre de l'atelier */
.sb-signature{display:flex;gap:1rem;align-items:flex-start}
.sb-signature img{width:64px;height:64px;border-radius:0;border:var(--trait) solid var(--encre)}
.sb-signature-nom{font-family:var(--titre);font-size:17px}
.sb-signature-bio{font-size:14.5px;line-height:1.5;color:var(--doux);margin-top:.25rem}
.sb-date{font-size:11.5px;letter-spacing:.06em;color:var(--doux);margin-top:.4rem}
/* fils produits par jr_bloc_fil, si une composition les appelle */
.sb-fil-bloc h2{font-size:16px;padding-bottom:.45rem;margin-bottom:.5rem;
  border-bottom:var(--trait) solid var(--encre)}
.sb-fil li{display:flex;gap:.6rem;align-items:baseline;padding:.5rem 0;
  border-bottom:var(--trait) solid var(--filet)}
.sb-fil-heure{font-size:11.5px;font-weight:700;color:var(--accent-txt);font-variant-numeric:tabular-nums}
.sb-fil a{font-family:var(--titre);font-size:15px}

/* ---------- 12. RUBRIQUE (une ZONE de l'atelier) ------------------------- */
.et-zone-tete{border:var(--trait) solid var(--encre);background:var(--surf);
  padding:1.1rem 1.2rem;margin-top:1.4rem}
.et-zone-titre{font-size:clamp(26px,3.6vw,40px);line-height:1.1}
.et-zone-chapo{font-size:16.5px;line-height:1.55;color:var(--doux);margin-top:.5rem;
  max-width:min(640px,100%)}
.et-zone-compte{margin-top:.7rem;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-txt)}
.et-section--zone{padding-top:1.4rem}
.et-pages{display:flex;flex-wrap:wrap;gap:.4rem;padding-block:1.2rem 2rem;
  font-size:13px;font-weight:600}
.et-pages .page-numbers{padding:.35rem .7rem;border:var(--trait) solid var(--filet)}
.et-pages .current{background:var(--encre);color:var(--fond);border-color:var(--encre)}
.et-vide{padding-block:2rem}

/* ---------- 13. PIED DE PAGE --------------------------------------------- */
.et-pied{margin-top:2rem;background:var(--surf);border-top:var(--trait) solid var(--encre)}
.et-pied-in{display:grid;grid-template-columns:1.2fr 1fr 1.1fr 1.1fr;gap:0;padding-block:1.6rem}
.et-pied-marque,.et-pied-col{padding-inline:1.4rem;min-width:0}
.et-pied-marque{padding-left:0}
.et-pied-col:last-child{padding-right:0}
.et-pied-marque + .et-pied-col,.et-pied-col + .et-pied-col{border-left:var(--trait) solid var(--filet)}
.et-mono--pied{width:34px;display:inline-flex;color:var(--accent-txt)}
.et-mono--pied svg{width:100%;height:auto;fill:currentColor}
.et-pied-nom{font-family:var(--titre);font-size:22px;margin-top:.4rem}
.et-pied-baseline{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--doux);margin-top:.3rem}
.et-pied-titre{font-size:15px;padding-bottom:.45rem;margin-bottom:.5rem;
  border-bottom:var(--trait) solid var(--encre)}
.et-pied-liste li{padding:.32rem 0;font-size:14.5px;line-height:1.4;
  display:flex;justify-content:space-between;gap:.7rem}
.et-pied-liste li + li{border-top:1px solid var(--filet)}
.et-pied-nb{font-size:11.5px;color:var(--doux);flex:0 0 auto}
.et-coches--pied .et-coche-txt{display:flex;justify-content:space-between;gap:.7rem;align-items:baseline}
.et-pied-note{font-size:12px;line-height:1.45;color:var(--doux);margin-top:.7rem}
.et-ours{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-block:.85rem 1rem;border-top:var(--trait) solid var(--filet);
  font-size:12px;color:var(--doux)}
.et-bascule{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.4rem .75rem;background:none;color:var(--encre);cursor:pointer;
  border:var(--trait) solid var(--encre);border-radius:var(--rayon)}

/* ---------- 14. BARRE MOBILE BASSE (R-0022) ------------------------------ */
.sb-nav-mobile{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--fond);border-top:var(--trait) solid var(--encre);
  padding-bottom:env(safe-area-inset-bottom)}
.sb-nav-mobile-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:.45rem .2rem .5rem;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--doux);text-align:center}
.sb-nav-mobile-item:hover{text-decoration:none}
.sb-nav-mobile-item.is-actif{color:var(--accent-txt)}
.sb-nav-ico{display:block;width:20px;height:20px}
.sb-nav-ico svg{width:100%;height:100%;stroke:currentColor;fill:none}

/* ---------- 15. REPLIS : rien ne deborde jamais horizontalement ---------- */
@media (max-width: 1080px){
  .et-ouvre{grid-template-columns:minmax(0,1fr)}
  .et-ouvre-col--liste{border-left:0;border-top:var(--trait) solid var(--encre)}
  .et-rangee{grid-template-columns:repeat(2,minmax(0,1fr))}
  .et-rangee--trois{grid-template-columns:repeat(2,minmax(0,1fr))}
  .et-index-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
  .et-art-corps{grid-template-columns:minmax(0,1fr)}
  .et-etabli{position:static;max-width:min(730px,100%)}
  .et-pied-in{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.4rem}
  .et-pied-marque,.et-pied-col{padding-inline:1.1rem}
  .et-pied-marque,.et-pied-col:nth-child(odd){padding-left:0;border-left:0}
}
@media (max-width: 760px){
  body{font-size:16.5px}
  /* le rail se replie derriere le bouton : la barre basse prend le relais */
  .et-rail{position:static;max-height:0;overflow:hidden;border-bottom:0}
  .et-rail.is-ouvert{max-height:none;overflow:visible;border-bottom:var(--trait) solid var(--encre)}
  .et-rail-in{flex-direction:column}
  .et-rail-in a{width:100%;border-bottom:var(--trait) solid var(--filet)}
  .et-rail-in a + a{border-left:0}
  .et-burger{display:block;order:-1}
  .et-baseline{display:none}
  .et-cherche{flex:1 1 100%;margin-left:0}
  .et-cherche input{width:100%}
  .et-panne,.et-rangee,.et-rangee--trois,.et-index-grille,
  .et-pied-in{grid-template-columns:minmax(0,1fr)}
  .et-pied-marque,.et-pied-col{padding-inline:0;border-left:0}
  .et-pied-col{padding-top:1.1rem;border-top:var(--trait) solid var(--filet)}
  .et-pied-marque + .et-pied-col,.et-pied-col + .et-pied-col{border-left:0}
  .et-ouvre-col{padding:.9rem}
  .sb-nav-mobile{display:flex}
  body{padding-bottom:64px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}
@media print{
  .et-rail,.sb-nav-mobile,.et-etabli,.et-bascule,.et-cherche{display:none}
  .et-art-corps{display:block}
}

/* garde-fou : un display:grid/flex de classe bat l'attribut hidden (vu le 04/09) */
[hidden]{display:none!important}

/* P-470 — la 1re carte de l accueil porte grid-column:span 2 en style INLINE.
   Sur telephone la grille n a plus qu une colonne : le span fabrique une colonne
   implicite dimensionnee sur le contenu (526px dans un ecran de 390) et pousse la page.
   !important est indispensable : on annule un style inline. */
@media (max-width:760px){.sb-grille>*{grid-column:auto!important}}

/* P-470 — la plume cite ses sources en URL BRUTE entre parentheses. Une URL ne
   contient aucun point de coupure : le paragraphe fait 677px de large dans une colonne
   de 329 et la page deborde de 351px sur telephone. Le piege : AUCUN element ne depasse
   le viewport (getBoundingClientRect ne voit rien), c est le contenu qui deborde de son
   propre element — seul scrollWidth > clientWidth le montre. */
.sb-corps{overflow-wrap:anywhere}

/* P-491 — display:contents : le h1 de la marque n existe pas pour la mise en page. */
.sb-marque-h1{display:contents}