/* Pages de contenu — meme systeme que la landing (direction P), en lecture longue.
   Charge APRES styles.css : on reutilise les jetons, la topbar, le pied de page,
   .band, .eyebrow, .lead, .cta, .mono, .rows, .faq-list, .scope-cols.

   Ce fichier n'ajoute qu'une chose : une colonne de texte lisible et les quelques
   objets qu'une page de contenu demande et que la landing n'avait pas — filet
   d'Ariane, chapeau, tableau, encadre de chiffre, note de source, pied d'article. */

/* La landing contraint h2 a 20ch : parfait pour un titre de section affiche seul,
   trop court pour un titre d'article qui doit porter une phrase entiere. */
.article h1{
  font-weight:800; font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.04;
  letter-spacing:-.035em; max-width:19ch; text-wrap:balance;
}
.article h2{max-width:26ch}

/* --- filet d'Ariane --- */
.fil{
  max-width:var(--wrap); margin-inline:auto; padding:1.1rem var(--pad) 0;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute);
}
.fil a{color:var(--mute); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px}
.fil a:hover{color:var(--ink)}
.fil span{margin:0 .5rem; color:var(--rule)}

/* --- entete d'article --- */
.article{
  max-width:var(--wrap); margin-inline:auto;
  padding:clamp(1.4rem,3vw,2.4rem) var(--pad) clamp(2.4rem,6vw,4.6rem);
}
.chapeau{
  margin-top:clamp(1rem,2vw,1.5rem); max-width:62ch;
  font-size:clamp(1.02rem,1.3vw,1.18rem); line-height:1.45; color:var(--soft);
}
.date{margin-top:1.4rem; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute)}

/* --- le corps : une seule colonne, mesure courte, respiration reguliere --- */
.corps{max-width:66ch; margin-top:clamp(2rem,5vw,3.4rem)}
.corps > * + *{margin-top:1.1rem}
.corps h2{
  margin-top:clamp(2.4rem,5vw,3.6rem); padding-top:1.4rem;
  border-top:1px solid var(--ink);
  font-size:clamp(1.3rem,2.3vw,1.75rem); letter-spacing:-.025em; max-width:24ch;
}
.corps h3{margin-top:2rem; font-size:1.05rem}
.corps p{color:var(--soft); font-size:1rem; line-height:1.62}
.corps p b, .corps li b{color:var(--ink); font-weight:700}
.corps a{color:var(--ink); text-underline-offset:.22em; text-decoration-thickness:1px}
.corps ul, .corps ol{list-style:none; margin-top:1.1rem}
.corps li{
  position:relative; padding:.5rem 0 .5rem 1.5rem;
  border-bottom:1px solid var(--hair); color:var(--soft); font-size:.97rem; line-height:1.55;
}
.corps li::before{
  position:absolute; left:0; top:.62rem; font-family:'IBM Plex Mono', monospace;
  font-size:.8rem; color:var(--mark); content:"+";
}
.corps ol{counter-reset:pas}
.corps ol li{counter-increment:pas}
.corps ol li::before{content:counter(pas,decimal-leading-zero); color:var(--mark)}

/* --- le chiffre qu'on veut retenir --- */
.chiffre{
  margin-top:clamp(1.6rem,3vw,2.2rem); padding:1.2rem 0;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
  display:flex; align-items:baseline; gap:1.1rem; flex-wrap:wrap;
}
.chiffre b{
  font-size:clamp(2rem,4.6vw,3.2rem); line-height:1; letter-spacing:-.04em;
  font-weight:800; color:var(--mark);
}
.chiffre span{flex:1 1 16rem; color:var(--soft); font-size:.93rem; line-height:1.5}

/* --- tableau : il doit defiler seul, jamais pousser la page --- */
.tableau{margin-top:1.4rem; overflow-x:auto; -webkit-overflow-scrolling:touch}
.tableau table{border-collapse:collapse; width:100%; min-width:30rem; font-size:.92rem}
.tableau th, .tableau td{
  text-align:left; padding:.7rem .9rem .7rem 0; border-bottom:1px solid var(--hair);
  vertical-align:top;
}
.tableau th{
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--mute);
  font-weight:600; border-bottom:1px solid var(--ink);
}
.tableau td{color:var(--soft)}
.tableau td:first-child{color:var(--ink); font-weight:600}
.tableau .prix{white-space:nowrap; font-family:'IBM Plex Mono', monospace;
  font-variant-numeric:tabular-nums}

/* --- d'ou vient un chiffre : dit sous le tableau, pas en note de bas de page --- */
.source{
  margin-top:.9rem; font-size:.8rem; line-height:1.5; color:var(--mute);
  padding-left:1.5rem; position:relative;
}
.source::before{content:"↳"; position:absolute; left:0; top:0;
  font-family:'IBM Plex Mono', monospace; color:var(--rule)}

/* --- l'encadre qui tranche : une phrase, sur fond sombre --- */
.tranche{
  margin-top:clamp(1.8rem,4vw,2.6rem); padding:clamp(1.3rem,3vw,2rem);
  background:var(--ink); color:var(--bg);
}
.tranche p{color:#C9CBC2; font-size:.97rem}
.tranche p:first-child{color:var(--bg); font-weight:700; font-size:1.05rem;
  letter-spacing:-.015em; max-width:34ch}
.tranche p + p{margin-top:.6rem}

/* --- les exemples cites dans une page metier ---
   La grille est une <ul> posee dans .corps : il faut donc annuler la puce, le filet
   et le retrait que .corps applique a toute liste, sinon chaque vignette herite d'un
   « + » rouge et d'une ligne de separation. */
.voir{
  margin-top:clamp(1.8rem,4vw,2.6rem);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem,1fr)); gap:1.3rem;
}
.corps .voir li{padding:0; border-bottom:0}
.corps .voir li::before{content:none}
.voir a{display:block; text-decoration:none; color:inherit}
.voir .vue{display:block; position:relative}
.voir .tag{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  background:var(--ink); color:var(--bg); padding:.2rem .5rem;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
}
/* `height:auto` est indispensable : les vignettes portent height="750" en attribut,
   et sans lui l'attribut l'emporte sur `aspect-ratio`. La vignette sortait a 750 px
   de haut pour 267 de large. */
.voir img{
  display:block; width:100%; height:auto; aspect-ratio:16/10;
  object-fit:cover; object-position:left top;
  border:1px solid var(--rule); background:var(--paper);
  transition:box-shadow .2s ease;
}
.voir a:hover img, .voir a:focus-visible img{
  box-shadow:0 .1rem .2rem rgba(20,21,15,.1), 0 1.2rem 2.4rem rgba(20,21,15,.18);
}
.voir .nom{display:block; margin-top:.55rem; font-weight:700; font-size:.93rem;
  letter-spacing:-.012em}
.voir .parti{display:block; margin-top:.15rem; font-size:.84rem; color:var(--soft)}

/* --- pied d'article : le pas suivant, jamais une impasse --- */
.suite{
  max-width:var(--wrap); margin-inline:auto; padding:clamp(2.4rem,6vw,4.6rem) var(--pad);
  border-top:1px solid var(--ink);
}
.suite-liens{
  margin-top:clamp(1.4rem,3vw,2rem); display:grid;
  grid-template-columns:repeat(auto-fit, minmax(16rem,1fr)); gap:1.4rem;
}
.suite-liens a{
  display:block; text-decoration:none; color:inherit;
  padding-top:.9rem; border-top:1px solid var(--rule);
}
.suite-liens a:hover{border-top-color:var(--ink)}
.suite-liens b{display:block; font-size:.98rem; letter-spacing:-.015em}
.suite-liens span{display:block; margin-top:.2rem; font-size:.86rem; color:var(--soft)}

/* --- la topbar des pages de contenu porte un retour, pas le compteur de places --- */
.topbar .retour{
  color:var(--mute); text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; min-height:44px;
}
.topbar .retour:hover{color:var(--ink)}

@media (max-width:900px){
  .article h1{max-width:none}
  .corps h2{max-width:none}
  .chiffre{gap:.5rem}
}