/* ==========================================================================
   Guides — colonne de lecture, repères chiffrés, encadrés
   ========================================================================== */
.guide-tete { padding-block: clamp(36px, 6vw, 80px) clamp(20px, 3vw, 36px); display: grid; gap: 18px; justify-items: center; text-align: center; }
.guide-tete h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4rem); font-weight: 800; letter-spacing: -.035em; max-width: 20ch; }
.guide-meta { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; }
.guide-corps { padding-bottom: clamp(48px, 7vw, 96px); }
.guide-corps .prose > p:first-child { font-size: 1.15rem; }
.en-bref { border-top: 2px solid var(--encre); border-bottom: 1px solid var(--ligne); padding: 18px 0; font-size: 1.05rem; }
.en-bref strong:first-child { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: 6px; color: var(--or-texte); }
.prose .tableau-conteneur { margin-block: 1.4em; }
.prose .encadre { margin-block: 1.6em; }
.prose .encadre p + p { margin-top: .6em; }
.plus-loin { display: grid; gap: 0; border-top: 1px solid var(--encre); margin-top: 2.4em; }
.plus-loin .surtitre { padding: 14px 0; }
.plus-loin a { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--ligne); text-decoration: none; font-family: var(--f-titre); font-weight: 600; font-size: 1.1rem; }
.plus-loin a:hover { color: var(--or-texte); }
.plus-loin a::after { content: "→"; font-family: var(--f-mono); }
.sources { font-size: .88rem; color: var(--encre-3); }
.sources a { color: var(--encre-2); }
.cartes-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-bottom: clamp(48px, 7vw, 96px); }
@media (max-width: 900px) { .cartes-guides { grid-template-columns: 1fr; } }
.carte-guide { display: grid; gap: 12px; align-content: start; padding: 26px; border: 1px solid var(--ligne); border-radius: var(--r-l); background: var(--carte); text-decoration: none; transition: transform .35s var(--doux), box-shadow .35s var(--doux); }
.carte-guide:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.carte-guide h2 { font-size: 1.4rem; }
.carte-guide p { color: var(--encre-2); }