/* Feuille de style partagée par toutes les pages de la rubrique Guides.
   Volontairement autonome (pas de Tailwind) : ces pages sont du HTML statique
   servi directement par Vercel, sans passer par le build de l'application.
   Les couleurs et les polices reprennent exactement la charte du site. */

:root {
  --bg: #faf8f5;
  --ink: #1f2124;
  --ink-soft: #2a2d32;
  --ink-muted: #6b655b;
  --ink-faint: #787167;
  --accent: #8c5e3c;
  --accent-soft: #faf3ea;
  --border: #e8dfc9;
  --gold: #e6c280;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

/* En-tête */
header.site {
  border-bottom: 1px solid var(--border);
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}
header.site .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* WT4-08 — LA NAVIGATION PRINCIPALE.
   Les guides n'en avaient aucune : l'en-tête portait le logo et le bouton
   d'inscription, rien entre les deux. Huit bons articles y vivaient en
   cul-de-sac — un lecteur arrivé par une recherche n'avait aucun moyen
   d'atteindre les tarifs ou le fonctionnement sans repasser par l'accueil.
   Les quatre entrées sont exactement celles du pied de page : une seule liste
   de destinations, à deux endroits, jamais deux listes qui divergent. */
.nav-site {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14.5px;
  font-weight: 500;
  margin-left: auto;
}
.nav-site a {
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-site a:hover {
  color: var(--ink);
}
/* La rubrique courante se signale par la COULEUR ET par un filet, jamais par
   la couleur seule : en niveaux de gris, ou pour un lecteur deutéranope, une
   teinte seule ne signale rien. `aria-current` porte la même information pour
   un lecteur d'écran, et c'est lui qui la porte VRAIMENT — le style n'est que
   son doublon visuel. */
.nav-site a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  text-decoration: none;
}
.logo .mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ink-soft);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.logo em {
  color: var(--accent);
  font-style: normal;
}
.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 14.5px;
  border-radius: 10px;
  padding: 11px 20px;
  text-decoration: none;
  background: var(--ink-soft);
  color: #fff;
  transition: background 0.2s;
  border: none;
  cursor: pointer;
}
.btn:hover {
  background: #1a1c1f;
}

/* Contenu éditorial */
main {
  padding: 56px 0 72px;
}
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 20px;
}
h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.15;
  margin-bottom: 16px;
}
h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  margin: 44px 0 14px;
}
h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  margin: 30px 0 10px;
}
p {
  margin-bottom: 18px;
  color: var(--ink-soft);
}
.lede {
  font-size: 19px;
  color: var(--ink-muted);
  margin-bottom: 28px;
}
.meta {
  font-size: 13.5px;
  color: var(--ink-faint);
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--border);
}
ul,
ol {
  margin: 0 0 20px 22px;
  color: var(--ink-soft);
}
li {
  margin-bottom: 9px;
}
a {
  color: var(--accent);
}
strong {
  font-weight: 600;
  color: var(--ink);
}
blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 20px;
  margin: 26px 0;
  color: var(--ink-muted);
  font-style: italic;
}
code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
}
/* WT4 — LE TABLEAU DÉFILE DANS SA PROPRE BOÎTE, PAS AVEC LA PAGE.
   Trois guides portent un tableau dont la largeur minimale dépasse 320 px : il
   poussait la PAGE ENTIÈRE à 336 px, et le lecteur devait balayer de gauche à
   droite à chaque ligne de texte pour revenir au début du paragraphe.
   WCAG 1.4.10 admet explicitement le défilement horizontal pour un contenu qui
   demande deux dimensions — un tableau de données en est un. Ce qu'il n'admet
   pas, c'est que ce soit la page qui défile. On enveloppe donc le tableau.
   `tabindex="0"` n'est pas décoratif : une zone qui défile doit pouvoir être
   atteinte et parcourue au clavier (2.1.1), sinon son contenu de droite est
   inaccessible à qui n'a pas de souris. Et qui dit tabulable dit focus visible
   (2.4.7) — d'où la règle ci-dessous, qui n'est pas une coquetterie. */
.tableau-large {
  overflow-x: auto;
}
.tableau-large:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.tableau-large table {
  margin: 24px 0;
}
th,
td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  font-weight: 600;
}

/* Encart d'appel à l'action en fin d'article */
.cta {
  margin: 48px 0 0;
  background: var(--ink-soft);
  border-radius: 20px;
  padding: 38px 32px;
  text-align: center;
}
.cta h2 {
  color: var(--gold);
  margin: 0 0 10px;
  font-size: 23px;
}
.cta p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  margin-bottom: 22px;
}
.cta .btn {
  background: var(--accent);
}
.cta .btn:hover {
  background: #784f31;
}

/* Liste des guides */
.guide-list {
  list-style: none;
  margin: 0;
}
.guide-list li {
  margin-bottom: 14px;
}
.guide-list a {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 26px;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
}
.guide-list a:hover {
  box-shadow: 0 10px 26px -14px rgba(31, 33, 36, 0.2);
  transform: translateY(-2px);
}
.guide-list .t {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 5px;
}
.guide-list .d {
  font-size: 14.5px;
  color: var(--ink-muted);
}

/* Maillage interne entre articles : posé juste avant l'appel à l'action
   final, pour transformer la visite d'un article en visite de plusieurs. */
.see-also {
  margin: 40px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.see-also h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin: 0 0 12px;
  font-family: var(--sans);
  font-weight: 600;
}
.see-also ul {
  margin: 0;
  list-style: none;
}
.see-also li {
  margin-bottom: 8px;
}
.see-also a {
  font-weight: 600;
}

footer.site {
  border-top: 1px solid var(--border);
  padding: 26px 0;
  font-size: 12.5px;
  color: var(--ink-faint);
  text-align: center;
}
/* WT4 — LA LIGNE DE LIENS DU PIED DE PAGE NE PASSAIT PAS À LA LIGNE, et c'est
   elle qui faisait déborder les NEUF guides à 490 px de large dans une fenêtre
   de 320. La cause est dans le HTML et elle est invisible à la relecture : les
   six `<a>` y sont collés les uns aux autres, SANS espace entre eux. Un texte
   ne peut se couper qu'aux occasions que le HTML lui donne ; sans blanc entre
   deux liens, il n'y en a aucune, et `margin: 0 10px` n'en crée pas — une marge
   n'est pas une occasion de coupure.
   On corrige ici plutôt que dans les neuf fichiers : une boîte flexible qui
   enveloppe crée l'occasion à chaque élément, et le prochain guide écrit de la
   même façon sera bon d'office. `gap` remplace les marges — sinon les deux
   s'ajoutent et la première ligne se décale. */
footer.site .wrap:not(.editeur) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}
footer.site a {
  color: inherit;
  text-decoration: none;
}
footer.site a:hover {
  color: var(--ink);
}
/* WT4-19 — la signature de l'éditeur, sous la barre de liens. Une ligne à
   part et non un lien de plus : « Édité par ArchiProject » n'est pas une
   destination, et le glisser entre neuf liens le ferait lire comme un
   dixième. Le détail légal (SIREN, siège, directeur de publication) reste
   dans les mentions légales, où la loi le place. */
footer.site .editeur {
  margin-top: 10px;
  font-size: 11.5px;
  opacity: 0.8;
}

/* WT4-08 — L'EN-TÊTE EST À HAUTEUR FIXE (66 px) : une navigation qui passe à
   la ligne en déborde au lieu de s'y adapter. Sous 900 px, la navigation
   principale se retire donc plutôt que de casser la mise en page.
   ⚠ CE N'EST ACCEPTABLE QUE PARCE QUE LE PIED DE PAGE PORTE LES MÊMES
   DESTINATIONS, sur les dix pages, et qu'il n'est pas caché, lui. Retirer une
   navigation sans que ses liens survivent ailleurs remettrait les guides en
   cul-de-sac pour les visiteurs mobiles — c'est-à-dire pour la moitié d'entre
   eux, et le défaut serait invisible sur un écran de bureau. */
@media (max-width: 900px) {
  .nav-site {
    display: none;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  main {
    padding: 36px 0 52px;
  }
  /* WT4 — L'EN-TÊTE EST À HAUTEUR FIXE (66 px), ET SON BOUTON EN SORTAIT.
     « Créer un dossier » se coupait en TROIS lignes sous 360 px et le bloc
     sombre débordait sous le filet de l'en-tête, par-dessus le texte de
     l'article. La mesure automatique ne voyait rien : elle compte le
     débordement HORIZONTAL, et celui-ci est vertical — c'est la limite de
     l'outil, et elle est écrite dans ACCESSIBILITE.md.
     `white-space: nowrap` seul aurait poussé la barre à ~360 px : il faut donc
     aussi resserrer le bouton et le logo, sinon on échange un débordement
     contre l'autre. On ne cache pas le bouton : c'est la seule action de
     conversion de l'en-tête, et les guides ont déjà perdu leur navigation
     principale sous 900 px. */
  header.site .inner {
    padding: 0 14px;
    gap: 12px;
  }
  .logo {
    font-size: 15px;
  }
  header.site .btn {
    white-space: nowrap;
    font-size: 13px;
    padding: 8px 12px;
  }
}