/* Pages guides : index et articles.
   Chargée après coherence.css, uniquement par /guides et les articles.
   Préfixe gui- : aucune des sept feuilles existantes ne déclare cette famille,
   vérifié avant écriture. .guide-table et .guide-note sont réutilisées telles
   quelles depuis coherence.css, elles servaient déjà à la modale de la fiche. */

/* ---------- Tête d'article ---------- */

/* Pas de max-width sur .gui-tete : .enveloppe centre par margin-inline auto,
   une largeur maximale y decalait le titre de 180 px vers la droite alors que
   le sommaire, le corps et le visuel restaient cales a gauche. La limite de
   longueur de ligne vit donc sur le titre et le chapo. */
.gui-tete { padding-block: 34px 0; }
.gui-tete h1 {
  margin: .35rem 0 0;
  max-width: 19ch;
  font-size: clamp(32px, 3.9vw, 54px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.045em;
}
.gui-chapo {
  margin: 1.1rem 0 0;
  max-width: 46ch;
  font-size: clamp(1rem, .96rem + .3vw, 1.1875rem);
  line-height: 1.65;
  color: var(--gris-service);
}
.gui-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--gris-service);
}
.gui-meta li { display: inline-flex; align-items: center; gap: .4rem; }
.gui-meta svg { width: 15px; height: 15px; color: var(--laiton-fonce); }

.gui-visuel {
  margin-top: 30px;
  overflow: hidden;
  border-radius: 24px;
  background: #0c0f0d;
  aspect-ratio: 21 / 9;
}
.gui-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Corps ---------- */

/* minmax(0, 1fr) et non la colonne implicite : celle-ci est dimensionnee en
   auto, donc en max-content, et le max-width de 68ch du corps la portait a
   518 px dans un viewport de 375. Mesure avant correction : scrollWidth 534
   pour 375 de large. */
.gui-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block: 46px 0; }
@media (min-width: 1000px) {
  .gui-corps { grid-template-columns: 232px minmax(0, 1fr); gap: 64px; align-items: start; }
}

.gui-sommaire { align-self: start; }
@media (min-width: 1000px) {
  /* --entete-h est mesurée au chargement par entete.js : le sommaire se cale
     sous l'en-tête réelle, pas sous une hauteur devinée. */
  .gui-sommaire { position: sticky; top: calc(var(--entete-h) + 24px); }
}
.gui-sommaire b {
  display: block;
  margin-bottom: .7rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--laiton-fonce);
}
.gui-sommaire ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gui;
  border-left: 1px solid var(--filet);
}
.gui-sommaire li { counter-increment: gui; }
.gui-sommaire a {
  display: block;
  padding: .5rem 0 .5rem 1rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--gris-service);
  text-decoration: none;
}
.gui-sommaire a::before { content: counter(gui) ". "; color: var(--laiton); }
.gui-sommaire a:hover { color: var(--noir); border-left-color: var(--laiton); }

.gui-texte { max-width: 68ch; }
.gui-texte > * + * { margin-top: 1.15rem; }
.gui-texte h2 {
  margin-top: 2.6rem;
  font-size: clamp(23px, 1.4rem + .7vw, 30px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.03em;
  scroll-margin-top: calc(var(--entete-h) + 20px);
}
.gui-texte h3 {
  margin-top: 1.9rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.gui-texte p { font-size: 1rem; line-height: 1.72; color: var(--gris-service); }
.gui-texte strong { color: var(--noir); font-weight: 600; }
.gui-texte ul { margin: 0; padding-left: 0; list-style: none; }
.gui-texte li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--gris-service);
}
.gui-texte li + li { margin-top: .5rem; }
.gui-texte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--laiton);
}
.gui-texte a { color: var(--laiton-fonce); text-underline-offset: 3px; }

.gui-tableau {
  margin-top: 1.8rem;
  padding: 18px;
  border: 1px solid var(--filet);
  border-radius: 18px;
  overflow-x: auto;
}
.gui-tableau .guide-table { min-width: 30rem; }

/* Encadré de synthèse : ce que le lecteur retient s'il ne lit rien d'autre. */
.gui-retenir {
  margin-top: 2.2rem;
  padding: 24px;
  border-radius: 20px;
  background: var(--noir);
  color: var(--craie);
}
.gui-retenir b {
  display: block;
  margin-bottom: .85rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--laiton-cl);
}
.gui-retenir li { color: color-mix(in srgb, var(--craie) 82%, transparent); }
.gui-retenir li::before { background: var(--laiton-cl); }

/* Aparté en cours de lecture, ton plus bas que le corps. */
.gui-apar {
  margin-top: 1.8rem;
  padding: 18px 20px;
  border-left: 2px solid var(--laiton);
  border-radius: 0 14px 14px 0;
  background: color-mix(in srgb, var(--laiton) 7%, transparent);
}
.gui-apar p { margin: 0; font-size: .9375rem; }

/* ---------- Bas d'article ---------- */

.gui-suite { padding-block: 56px 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .gui-suite { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gui-suite a {
  display: block;
  padding: 22px 24px;
  border: 1px solid var(--filet);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.gui-suite a:hover { border-color: color-mix(in srgb, var(--noir) 26%, transparent); box-shadow: var(--ombre-m); }
.gui-suite small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--laiton-fonce);
}
.gui-suite span { display: block; margin-top: .5rem; font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.015em; }

/* ---------- Index /guides ---------- */

.gui-liste { display: grid; gap: 14px; }
@media (min-width: 760px) { .gui-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gui-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.gui-carte { display: flex; flex-direction: column; padding: 6px; border-radius: 26px; text-decoration: none; color: inherit; }
.gui-carte__media { overflow: hidden; border-radius: 22px; aspect-ratio: 4 / 3; background: #0c0f0d; }
.gui-carte__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.gui-carte:hover .gui-carte__media img { transform: scale(1.035); }
.gui-carte__corps { padding: 18px 6px 6px; }
.gui-carte__corps h2 {
  margin: .35rem 0 0;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.02em;
}
.gui-carte__corps p { margin: .55rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--gris-service); }

@media (max-width: 620px) {
  .gui-visuel { aspect-ratio: 16 / 11; border-radius: 18px; }
  .gui-retenir, .gui-tableau { padding: 18px; border-radius: 16px; }
}