/* ═══════════════════════════════════════════════════════════════════
   Typical — « magazine-extra » : les 5 gestes editoriaux du tour design
   (masthead + sommaire + etiquettes + pull quotes + folios)
   Chaque geste est isolé dans un bloc marqué GESTE 1..5 :
   désactiver un geste = commenter son bloc (ou retirer son HTML).
   Fichier propre, aucune modif des css existants.
   ═══════════════════════════════════════════════════════════════════ */

/* ── GESTE 1 · Masthead editorial (barre « N° 01 · Novembre 2026 ») ── */
.cover .mastline{
  display:flex; justify-content:space-between; align-items:baseline; gap:2ch;
  max-width:1520px; margin:0 auto; padding:clamp(6px,1vw,12px) var(--m) 0;
  font-family:var(--sans); font-size:clamp(11px,.7vw,13px);
  letter-spacing:.14em; text-transform:uppercase; color:var(--soft);
  border-top:1px solid var(--ink); border-top-width:3px;
}
.cover .mastline::after{
  content:""; flex:1; height:0.0625rem; background:var(--ink); align-self:center; margin-left:2ch;
}
.cover .mastline b{ color:var(--ink); font-weight:600; }
.cover .mastline em{ font-style:italic; text-transform:none; letter-spacing:.02em; font-family:var(--serif); }

/* ── GESTE 2 · Sommaire table des matieres (couverture) ── */
.cover .sommaire{
  max-width:1520px; margin:clamp(14px,2vw,26px) auto 0; padding:0 var(--m);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0; border-top:2px solid var(--ink); border-bottom:1px solid var(--ink);
}
.cover .sommaire a{
  display:flex; align-items:baseline; gap:1ch;
  padding:clamp(10px,1.2vw,16px) clamp(6px,1vw,14px);
  font-family:var(--serif); font-size:clamp(15px,1.15vw,19px); color:var(--ink);
  text-decoration:none; border-left:1px solid var(--stone);
}
.cover .sommaire a:first-child{ border-left:0 }
.cover .sommaire a:hover{ background:var(--stone) }
.cover .sommaire a span{ flex:1; border-bottom:1px dotted var(--soft); transform:translateY(-4px); }
.cover .sommaire a i{ font-style:italic; font-family:var(--serif); font-size:.9em; color:var(--soft); font-feature-settings:"lnum" 1 }

/* ── GESTE 3 · Etiquettes italiques + legendes de figure ── */
.sec .eyebrow, .sec .kicker{
  font-family:var(--serif) !important; font-style:italic;
  text-transform:none !important; letter-spacing:.01em !important;
  font-weight:500 !important; font-size:clamp(14px,1.4vw,19px) !important;
  color:var(--ink) !important;
}
/* legendes de figure (portraits, comparateur, plan) */
.s1 .sub .frame + * , .recu figure, .recu .ba-bloc, .recu .note-bloc, .recu .plan-bloc{
  position:relative;
}
.s1 .sub::after, .recu .ba-bloc::after, .recu .note-bloc::after{
  content:attr(data-fig);
  display:block; margin-top:10px;
  font-family:var(--serif); font-style:italic; font-size:clamp(12px,.9vw,14px);
  color:var(--soft);
}
/* le titre CTA sous la barre du test, en etiquette */
.s1 .tabs{ border-bottom:2px solid var(--ink); }
.s1 .tabs button span{
  font-family:var(--serif); font-style:italic; font-feature-settings:"lnum" 1;
}

/* ── GESTE 4 · Pull quotes & grands chiffres ── */
.pullquote{
  max-width:1520px; margin:clamp(20px,3vw,44px) auto; padding:clamp(18px,3vw,40px) var(--m);
  display:grid; grid-template-columns:1fr 4px 8fr; gap:clamp(14px,2vw,28px);
  background:var(--paper); border-top:2px solid var(--ink);
}
.pullquote > b{
  font-family:var(--serif); font-weight:700; font-style:italic;
  font-size:clamp(26px,4.6vw,64px); line-height:.98; letter-spacing:-.02em;
  color:var(--ink);
}
.pullquote > i{
  background:var(--accent); display:block; width:100%; height:100%;
}
.pullquote > span{
  font-family:var(--serif); font-style:italic; color:var(--soft);
  font-size:clamp(14px,1.2vw,18px); align-self:end;
  border-top:1px solid var(--stone); padding-top:8px;
}
.pullquote .nq{ display:flex; align-items:flex-start; gap:1ch; }
.pullquote .nq small{ font-style:normal; font-family:var(--serif); font-feature-settings:"lnum" 1; }

/* ── GESTE 5 · Folios & en-tete courant ── */
.folio{
  display:flex; justify-content:space-between; gap:2ch;
  max-width:1520px; margin:0 auto; padding:clamp(12px,1.6vw,20px) var(--m);
  font-family:var(--sans); font-size:clamp(10px,.65vw,12px);
  letter-spacing:.12em; text-transform:uppercase; color:var(--soft);
  border-top:1px solid var(--soft);
}
.folio i{ font-style:italic; font-family:var(--serif); text-transform:none; letter-spacing:.02em; }
.folio b{ color:var(--ink); font-weight:600; font-family:var(--serif); font-feature-settings:"lnum" 1 }

/* pied de page : colonnes façon colophon */
.foot .colophon{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(14px,2vw,30px);
  margin-top:clamp(30px,4vw,60px); padding-top:clamp(18px,2.6vw,30px);
  border-top:1px solid var(--soft);
}
.foot .colophon h3{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:14px; margin-bottom:10px; color:var(--ink) }
.foot .colophon ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px }
.foot .colophon a{ color:var(--soft); text-decoration:none; font-size:14px }
.foot .colophon a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px }

/* ── GESTE 6 · Lettrines Bodoni (début d'un long texte de page) ── */
.lettrine::first-letter{
  font-family:var(--serif); font-weight:700; font-style:normal;
  font-size:clamp(3.4em,9vw,4.6em); line-height:.78;
  float:left; margin:.06em .14em 0 0; color:var(--ink);
}
/* ── GESTE 7 · Notes marginales numerotees (marge droite de la page Methode) ── */
.libnotes{
  max-width:1520px; margin:clamp(18px,3vw,40px) auto 0; padding:0 var(--m);
  columns:1; overflow:hidden;
}
.libnotes details{
  border-top:1px solid var(--stone); padding:clamp(10px,1.2vw,14px) 0;
}
.libnotes summary{
  font-family:var(--serif); font-style:italic; font-size:clamp(14px,1.1vw,16px);
  color:var(--ink); cursor:pointer; list-style:none; display:flex; gap:1ch;
}
.libnotes summary::before{ content:"⌖"; color:var(--soft); font-style:normal }
.libnotes summary::-webkit-details-marker{ display:none }
.libnotes p{ margin:8px 0 0 clamp(26px,3vw,30px); font-size:15px; color:var(--soft) }
/* notes en exposant dans le texte (appels de note) */
.apel-N{ font-family:var(--serif); font-style:italic; font-size:.72em; vertical-align:super; color:var(--soft) }
/* ── GESTE 8 · Encart Courrier des lecteurs + Erratum ── */
.courrier{
  max-width:1520px; margin:clamp(20px,3vw,40px) auto; padding:clamp(16px,2.4vw,28px) var(--m);
  border:2px solid var(--ink); border-top-width:4px; background:var(--paper);
}
.courrier h3{
  font-family:var(--serif); font-weight:600; font-style:italic; font-size:clamp(18px,2vw,24px);
  color:var(--ink); margin:0 0 12px;
}
.courrier p{ font-size:15px; color:var(--soft); margin:0 0 12px; max-width:60ch }
.courrier .erratum{ font-size:14px; font-style:italic; border-top:1px solid var(--stone); padding-top:10px; margin-top:14px }
/* ── GESTE 9 · Filets doubles + ornement de section (accueil) ── */
.split-T{
  display:flex; align-items:center; gap:2.2ch;
  max-width:1520px; margin:clamp(26px,5vw,64px) auto; padding:0 var(--m);
}
.split-T::before, .split-T::after{
  content:""; flex:1; height:0; border-bottom:2px solid var(--ink);
}
.split-T::before{ border-bottom-width:1px; margin-right:calc(2ch - 1.6ch) }
.split-T::after{ border-bottom-width:2px }
.split-T b{ font-family:var(--serif); font-weight:500; font-size:clamp(18px,2.2vw,28px); color:var(--ink); letter-spacing:.02em }
.split-T b::after{ content:" ❦"; font-style:italic; color:var(--soft); font-size:.7em }

/* ── GESTE 10 · Marquage visible 'Image créée par IA' sur la meilleure version ── */
.ia-img{ position:relative }
.ia-img .ia-badge{
  position:absolute; left:12px; bottom:34px; z-index:2;
  font-family:var(--sans); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; background:rgba(16,18,20,.82);
  padding:6px 11px; border:1px solid rgba(255,255,255,.35); border-radius:2px;
}

/* responsive : sommaire et mastline pas trop serres en mobile */
@media (max-width:720px){
  .cover .mastline em{ display:none }
  .cover .sommaire{ grid-template-columns:1fr 1fr }
  .libnotes{ columns:1 }
}