/* MARZEL — les guides (depuis le 2026-10-17, stratégie SEO/GEO : 04-marketing/seo-geo/strategie-seo-geo.md).
   Une colonne de lecture (70 signes par ligne au plus), les codes de site.css : titres en Plex Sans 700 serré avec la
   seconde moitié en Newsreader italique bleu, petites mesures en Plex Mono, cartes blanches à grands coins.
   Chargée après site.css, seulement par les guides ; aucune animation. */

.etiquette { margin-bottom: clamp(0.875rem, 1.2vw, 1.25rem); font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--bleu-texte); }

.guide { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
.guide-col > * { max-width: 46rem; }
.guide p, .guide li, .guide td, .guide th { font-size: var(--texte-taille); line-height: 1.6; color: var(--texte-2); }
.guide p + p { margin-top: 0.875rem; }
.guide a:not(.btn) { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.guide a:not(.btn):hover { color: var(--bleu-texte); }
.guide strong { font-weight: 600; color: var(--encre); }

.guide-fil { margin-bottom: 1.25rem; font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--texte-2); }
.guide .guide-fil a { text-decoration: none; }
.guide .guide-fil a:hover { text-decoration: underline; }
.guide .surtitre { display: block; margin-bottom: 1rem; } /* une ligne de texte, pas une rangée : la date ne se détache pas sur téléphone */
.guide-titre { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); font: var(--titre-graisse) clamp(2.25rem, 1rem + 3.4vw, 4.25rem)/var(--titre-interligne) var(--titre-police); letter-spacing: var(--titre-interlettrage); color: var(--encre); text-wrap: balance; }
.guide-titre em { font-family: var(--accent); font-style: italic; font-weight: 400; font-size: 0.92em; letter-spacing: var(--accent-interlettrage); color: var(--accent-couleur); }

/* « En bref » : la réponse en un paragraphe, avant tout le reste */
.guide-bref { padding: clamp(1.25rem, 2.4vw, 2rem); border: 1px solid var(--carte-filet); border-radius: var(--carte-rayon); background: var(--blanc); box-shadow: var(--carte-ombre); }
.guide-bref-titre { margin-bottom: 0.5rem; font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--bleu-texte); }
.guide .guide-bref p:not(.guide-bref-titre) { font-size: calc(var(--texte-taille) * 1.05); color: var(--encre); }

.guide-auteur { margin-top: 1.5rem; padding-left: 1rem; border-left: 3px solid var(--bleu); }
.guide .guide-auteur { font-size: calc(var(--texte-taille) * 0.94); }

.guide-sommaire { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--filet); }
.guide-sommaire-titre { margin-bottom: 0.625rem; font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--texte-2); }
.guide-sommaire ol { margin: 0; padding-left: 1.4em; list-style: decimal; }
.guide-sommaire li + li { margin-top: 0.25rem; }
.guide .guide-sommaire a { text-decoration: none; font-weight: 500; }
.guide .guide-sommaire a:hover { text-decoration: underline; }

.guide-partie { margin-top: clamp(2.75rem, 5vw, 4rem); scroll-margin-top: 6rem; }
.guide h2 { margin-bottom: 0.875rem; font: var(--titre-graisse) clamp(1.5rem, 1rem + 1.4vw, 2.25rem)/var(--moyen-interligne) var(--titre-police); letter-spacing: var(--moyen-interlettrage); color: var(--encre); text-wrap: balance; }
.guide h2 em { font-family: var(--accent); font-style: italic; font-weight: 400; letter-spacing: var(--accent-interlettrage); color: var(--accent-couleur); }
.guide .guide-ref { margin-top: 1rem; font: 500 calc(var(--mono-taille) * 0.95)/1.55 var(--mono); color: var(--texte-2); }

/* Le tableau des documents : défile seul sur téléphone, la page ne déborde jamais */
.guide-tableau { margin-top: 1.25rem; overflow-x: auto; border: 1px solid var(--carte-filet); border-radius: var(--carte-rayon); background: var(--blanc); box-shadow: var(--carte-ombre); }
.guide-tableau:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
.guide table { width: 100%; min-width: 34rem; border-collapse: collapse; }
.guide caption { padding: 1.125rem 1.25rem 0.25rem; text-align: left; font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--bleu-texte); }
.guide thead th { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--filet); text-align: left; font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--texte-2); }
.guide tbody th, .guide tbody td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; }
.guide tbody tr:last-child th, .guide tbody tr:last-child td { border-bottom: 0; }
.guide tbody th { width: 52%; font-weight: 600; color: var(--encre); }

.guide-etapes, .guide-points { margin: 1rem 0 0; padding-left: 1.4em; }
.guide-etapes { list-style: decimal; }
.guide-etapes li + li, .guide-points li + li { margin-top: 0.625rem; }
.guide-etapes li::marker { font: 500 var(--mono-taille)/1 var(--mono); color: var(--bleu-texte); }
.guide-points { list-style: disc; }
.guide-points li::marker { color: var(--bleu); }

/* Ce que fait MARZEL : la carte qui mène au diagnostic */
.guide-marzel { margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2.75rem); border: 1px solid var(--carte-filet); border-radius: var(--carte-rayon); background: var(--blanc); box-shadow: var(--carte-ombre); }
.guide-marzel .etiquette { margin-bottom: 0.75rem; }
.guide-marzel .btn { margin-top: 1.5rem; }
.guide .guide-marzel-pied { margin-top: 1rem; font-size: calc(var(--texte-taille) * 0.94); }

.guide .guide-avertissement { margin-top: 2rem; font-size: calc(var(--texte-taille) * 0.9); }

/* La réservation, sous le guide : la grille de site.css */
.guide-reserver { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--filet); }
.guide-reserver .titre-2 em { color: var(--accent-couleur); }
.guide-diag-texte { max-width: 34rem; margin-top: 1.25rem; font-size: var(--texte-taille); line-height: 1.6; color: var(--texte-2); }

@media (max-width: 599px) {
  .guide tbody th { width: 50%; }
  .guide-auteur { padding-left: 0.875rem; }
}

/* Le message type : une carte à recopier, en Plex Sans comme un e-mail */
.guide-sous-titre { margin: 2rem 0 0.625rem; font: 600 calc(var(--texte-taille) * 1.12)/1.3 var(--sans); color: var(--encre); scroll-margin-top: 6rem; }
.guide-modele { margin-top: 1rem; padding: clamp(1.125rem, 2.2vw, 1.75rem); border: 1px dashed var(--argent); border-radius: calc(var(--carte-rayon) * 0.7); background: var(--blanc); }
.guide .guide-modele p, .guide .guide-modele li { color: var(--encre); }
.guide-modele ul { margin: 0.5rem 0 0.75rem; padding-left: 1.2em; list-style: "– "; }
.guide-modele li + li { margin-top: 0.25rem; }