/* ══════════════════════════════════════════════════════════════
   BON SANS LA RONDELLE
   Feuille de style du site — bslr.css

   Organisation du fichier :
     1. Jetons          variables de couleur, typo, mesures
     2. Thèmes          foncé (défaut) et clair
     3. Base            réinitialisation, corps de page, liens
     4. En-tête         mot-symbole, navigation, manifeste
     5. Grille          la structure partagée par toutes les pages
     6. Article         titre, chapeau, corps, composants du texte
     7. Listes          accueil et pages de rubrique
     8. Courriel        les deux formes de la demande d'abonnement
     9. Pied de page
    10. Mobile
    11. Accessibilité et impression

   Règle de travail : aucune couleur ni mesure en dur dans les
   sections 3 à 11. Tout passe par les jetons de la section 1.
   ══════════════════════════════════════════════════════════════ */


/* ═══ 1. JETONS ═══════════════════════════════════════════════ */

:root {

  /* — Typographie ————————————————————————————————
     Trois voix. Voir cahier de projet, section 6.
     lecture    : tout ce qui se lit en continu
     affichage  : les grandes surfaces seulement (36px et plus)
     sans       : titrage secondaire et micro-texte
     etiquette  : piles d'étiquettes courtes                    */

  --lecture:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --affichage: "Space Grotesk", "Archivo", Helvetica, sans-serif;
  --sans:      "Archivo", Helvetica, Arial, sans-serif;
  --etiquette: "Archivo Narrow", "Archivo", Helvetica, sans-serif;

  /* — Échelle de titres —————————————————————————— */
  --t-titre-article:  clamp(2.375rem, 6vw, 4.75rem);   /* 38 → 76 px */
  --t-titre-accueil:  clamp(2.5rem, 6.4vw, 5rem);      /* 40 → 80 px */
  --t-chapeau:        clamp(1.1875rem, 0.43vw + 1.08rem, 1.5625rem);  /* 19 → 25 px */
  --t-section:        clamp(1.5rem, 0.55vw + 1.34rem, 2rem);
  /* Le corps grandit avec l'écran, comme le titre et le chapeau.
     Fixe, il paraissait rapetisser sur un grand moniteur pendant
     que tout le reste grossissait.                             */
  --t-corps:          clamp(1.125rem, 0.43vw + 1.018rem, 1.5rem);     /* 18 → 24 px */
  --t-exergue:        clamp(1.5rem, 0.75vw + 1.25rem, 2rem);

  /* — Rythme vertical ———————————————————————————— */
  --pas: 0.5rem;
  --marge-page: 3.75rem;

  /* Marge latérale réelle. Sur écran normal, c'est --marge-page.
     Sur un écran très large (21:9, 4K), elle grossit pour que le
     contenu reste centré au lieu de se coller à gauche. Les
     filets, eux, continuent de traverser toute la largeur.     */
  --marge-laterale: max(
    var(--marge-page),
    calc((100% - var(--largeur-max)) / 2)
  );

  /* — Mesures de la grille ———————————————————————
     La colonne de texte ne s'élargit jamais au-delà de 68
     caractères, quelle que soit la taille de l'écran.          */
  --largeur-marge: 190px;
  --gouttiere: 4rem;
  --mesure: 68ch;
  --largeur-max: 1100px;

  /* — Motif de marque ————————————————————————————
     Coins biseautés, repris des cartouches d'habillage vidéo.  */
  --biseau: 18px;
  --biseau-petit: 14px;

  /* — Transitions ———————————————————————————————— */
  --glisse: 0.18s ease;
}


/* ═══ 2. THÈMES ═══════════════════════════════════════════════ */

/* Foncé — le défaut. Charbon chaud : le décalage vers le brun
   enlève le côté froid « interface » et rapproche de l'encre
   sur papier. Éviter le noir pur, qui fait haler le texte.     */

:root,
html[data-theme="fonce"] {
  --fond:     #1A1817;
  --surface:  #211F1D;
  --titre:    #F4F2F0;
  --corps:    #D3CFCB;
  --attenue:  #8A8580;
  --filet:    #33302E;
  --rouge:    #E8352D;
  --rouge-sourd: #B8291F;
  --ombre-focus: rgba(232, 53, 45, 0.45);
}

/* Clair — crème. Le rouge descend : sur fond pâle, un rouge
   trop vif vibre et fatigue.                                   */

html[data-theme="clair"] {
  --fond:     #F4F2EE;
  --surface:  #EAE7E1;
  --titre:    #141414;
  --corps:    #33312E;
  --attenue:  #6E6A64;
  --filet:    #DCD8D2;
  --rouge:    #C2160F;
  --rouge-sourd: #97110C;
  --ombre-focus: rgba(194, 22, 15, 0.4);
}


/* ═══ 3. BASE ═════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--corps);
  font-family: var(--sans);
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--glisse), color var(--glisse);
}

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

/* Le rouge est rationné : ponctuation seulement. Il ne sert
   jamais de décoration. Voir cahier, section 6.                */

.rouge { color: var(--rouge); }

/* Biseau — appliqué aux encadrés et au bloc de commandite. */

.biseau {
  clip-path: polygon(
    0 0,
    calc(100% - var(--biseau)) 0,
    100% var(--biseau),
    100% 100%,
    var(--biseau) 100%,
    0 calc(100% - var(--biseau))
  );
}


/* ═══ 4. EN-TÊTE ══════════════════════════════════════════════ */

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.375rem var(--marge-laterale);
  border-bottom: 1px solid var(--filet);
}

/* Mot-symbole seul dans l'en-tête. Le logo rond vit ailleurs
   (favicon, réseaux, partage) — le mettre ici ferait apparaître
   le nom deux fois. Voir cahier, section 5.                    */

.motsymbole {
  font-family: var(--sans);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: var(--titre);
  text-decoration: none;
  white-space: nowrap;
}
.motsymbole__la  { opacity: 0.72; }
.motsymbole__ron { color: var(--rouge); }

.nav {
  display: flex;
  align-items: center;
  gap: 1.625rem;
  font-family: var(--etiquette);
}
.nav a {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--attenue);
  text-decoration: none;
  transition: color var(--glisse);
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--titre); }

/* Basculeur de thème — discret, à droite de la navigation. */

.bascule {
  background: none;
  border: 1px solid var(--filet);
  color: var(--attenue);
  font-family: var(--etiquette);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  transition: color var(--glisse), border-color var(--glisse);
}
.bascule:hover { color: var(--titre); border-color: var(--attenue); }

/* Bandeau de manifeste — présent sur chaque page. Il dit qui on
   est sans jamais bloquer le chemin vers le texte.             */

.manifeste {
  padding: 1rem var(--marge-laterale);
  border-bottom: 1px solid var(--filet);
  font-family: var(--lecture);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--attenue);
}


/* ═══ 5. GRILLE ═══════════════════════════════════════════════ */

/* Une seule grille pour tout le site. Peu de gabarits, très
   bien faits. Sur grand écran, la colonne de texte ne s'élargit
   pas : c'est la marge qui se remplit.                         */

.page {
  padding: 3.5rem var(--marge-laterale) 5.625rem;
}

.grille {
  display: flex;
  gap: var(--gouttiere);
  align-items: flex-start;
}

.grille__marge {
  width: var(--largeur-marge);
  flex-shrink: 0;
  margin: 0;
}

.grille__contenu {
  min-width: 0;
  max-width: var(--mesure);
}

/* Contenu de la marge latérale */

.marge dt {
  font-family: var(--etiquette);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--attenue);
  margin-bottom: 0.3rem;
}
.marge dd {
  margin: 0 0 1.375rem;
  font-family: var(--etiquette);
  font-size: 1rem;
  color: var(--corps);
}
.marge dd.auteur {
  font-size: 1.125rem;
  color: var(--titre);
}

/* Rappel du courriel dans la marge — la majorité des lecteurs
   n'atteint jamais le bas d'un texte de 7 minutes. Discret
   pendant la lecture, la vraie demande vient à la fin.         */

.marge__rappel {
  border-top: 1px solid var(--filet);
  padding-top: 1.125rem;
  font-family: var(--etiquette);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--attenue);
}
.marge__rappel a {
  color: var(--rouge);
  text-decoration: none;
}
.marge__rappel a:hover { text-decoration: underline; }


/* ═══ 6. ARTICLE ══════════════════════════════════════════════ */

.rubrique {
  display: inline-block;
  font-family: var(--etiquette);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rouge);
  border-left: 2px solid var(--rouge);
  padding-left: 0.625rem;
  margin-bottom: 1.5rem;
  text-decoration: none;
}

.titre-article {
  font-family: var(--affichage);
  font-weight: 500;
  font-size: var(--t-titre-article);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--titre);
  margin: 0 0 1.5rem;
  max-width: 15ch;
}

.chapeau {
  font-family: var(--lecture);
  font-size: var(--t-chapeau);
  line-height: 1.5;
  color: var(--attenue);
  margin: 0 0 2.75rem;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Image d'en-tête — peut déborder plus large que le texte.
   Le filet rouge au-dessus est un des rares usages du rouge.   */

.photo-entete {
  margin-bottom: 0.625rem;
  border-top: 3px solid var(--rouge);
  background: var(--surface);
}
.legende {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--attenue);
  margin-bottom: 0;
}

/* L'image d'en-tête a besoin de respirer avant que la lecture
   commence. Vaut avec ou sans légende.                        */
.photo-entete + .grille,
.legende + .grille { margin-top: 4.5rem; }

/* Corps du texte. Justifié avec césure automatique en français;
   passe à l'alignement gauche sur mobile (section 10).         */

.texte p {
  font-family: var(--lecture);
  font-size: var(--t-corps);
  line-height: 1.78;
  color: var(--corps);
  margin: 0 0 1.625rem;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Alignements produits par l'atelier. Le justifié est le défaut;
   ces deux-là sont l'exception.                                */
.texte p.centre { text-align: center; }
.texte p.gauche { text-align: left; }

.texte h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-section);
  letter-spacing: -0.015em;
  color: var(--titre);
  margin: 2.875rem 0 1.125rem;
}

.texte a {
  color: var(--corps);
  text-decoration: underline;
  text-decoration-color: var(--rouge);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.texte a:hover { color: var(--titre); }

.texte ul, .texte ol {
  font-family: var(--lecture);
  font-size: var(--t-corps);
  line-height: 1.78;
  color: var(--corps);
  padding-left: 1.5rem;
  margin: 0 0 1.625rem;
}
.texte li { margin-bottom: 0.5rem; }

.texte strong { font-weight: 600; color: var(--titre); }
.texte em { font-style: italic; }

/* Image dans le corps du texte, avec légende facultative. */

.figure { margin: 2.5rem 0; }
.figure figcaption {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--attenue);
  margin-top: 0.5rem;
}

/* Citation en exergue */

.exergue {
  margin: 2.5rem 0;
  padding-left: 1.625rem;
  border-left: 3px solid var(--rouge);
}
.exergue p {
  font-family: var(--lecture);
  font-style: italic;
  font-size: var(--t-exergue);
  line-height: 1.42;
  color: var(--titre);
  margin: 0;
  text-align: left;
}

/* Encadré statistique — coins biseautés */

.encadre {
  background: var(--surface);
  padding: 1.625rem 1.875rem;
  margin: 2.5rem 0;
  clip-path: polygon(
    0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau),
    100% 100%, var(--biseau) 100%, 0 calc(100% - var(--biseau))
  );
}
.encadre__titre {
  font-family: var(--etiquette);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 1.25rem;
}
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.375rem;
}
.chiffres__n {
  font-family: var(--affichage);
  font-weight: 500;
  font-size: 2.625rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--titre);
}
.chiffres__l {
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--attenue);
  margin-top: 0.5rem;
}

/* Tableau */

.texte table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.5rem 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
}
.texte th {
  font-family: var(--etiquette);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--attenue);
  text-align: left;
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--rouge);
}
.texte td {
  padding: 0.7rem 0.75rem 0.7rem 0;
  border-bottom: 1px solid var(--filet);
  color: var(--corps);
}

/* Bloc de commandite — dessiné maintenant, laissé vide jusqu'à
   ce qu'un partenaire existe. Comme ça, rien à refaire, et pas
   de tentation d'accepter n'importe quoi pour remplir un trou.
   Voir cahier, section 9.                                      */

.commandite {
  border: 1px solid var(--filet);
  padding: 1.25rem 1.5rem;
  margin-top: 2.875rem;
  clip-path: polygon(
    0 0, calc(100% - var(--biseau-petit)) 0, 100% var(--biseau-petit),
    100% 100%, var(--biseau-petit) 100%, 0 calc(100% - var(--biseau-petit))
  );
}
.commandite__etiquette {
  font-family: var(--etiquette);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--attenue);
  margin-bottom: 0.5rem;
}
.commandite__texte {
  font-family: var(--lecture);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--corps);
}


/* ═══ 7. LISTES ═══════════════════════════════════════════════ */

/* Le texte de la semaine sur la page d'accueil : donné en entier
   jusqu'au premier paragraphe, puis « lire la suite ». Le
   visiteur commence à lire avant de décider s'il lit.          */

.vedette__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.375rem;
}
.vedette__etiquette {
  font-family: var(--etiquette);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rouge);
}
.vedette__date {
  font-family: var(--etiquette);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--attenue);
}
.titre-accueil {
  font-family: var(--affichage);
  font-weight: 500;
  font-size: var(--t-titre-accueil);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--titre);
  margin: 0 0 1.5rem;
  max-width: 15ch;
}
.titre-accueil a { text-decoration: none; }

.lire-suite {
  display: inline-block;
  font-family: var(--etiquette);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rouge);
  text-decoration: none;
  margin-top: 0.875rem;
}
.lire-suite:hover { text-decoration: underline; }

/* Section « en rattrapage » et pages de rubrique.
   Liste verticale : ça ressemble à une bibliothèque plutôt qu'à
   un journal, ce qui convient à un texte par semaine.          */

.section-titre {
  font-family: var(--etiquette);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--attenue);
  margin: 0 0 2rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--filet);
}

.liste { list-style: none; margin: 0; padding: 0; }

.liste__item {
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--filet);
}
.liste__item:last-child { border-bottom: 0; }

.liste__haut {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.liste__rubrique {
  font-family: var(--etiquette);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rouge);
  text-decoration: none;
}
.liste__date {
  font-family: var(--etiquette);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--attenue);
}
.liste__titre {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0 0 0.5rem;
}
.liste__titre a {
  color: var(--titre);
  text-decoration: none;
}
.liste__titre a:hover { color: var(--rouge); }
.liste__chapeau {
  font-family: var(--lecture);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--attenue);
  margin: 0;
  max-width: 60ch;
}


/* ═══ 8. COURRIEL ═════════════════════════════════════════════ */

/* Ne jamais écrire le mot « infolettre » nulle part. C'est la
   chronique du jeudi. Voir cahier, section 8.                  */

.courriel {
  border-top: 1px solid var(--filet);
  background: var(--surface);
  padding: 2.75rem var(--marge-laterale) 3.75rem;
  margin-top: 4.375rem;
}
.courriel__accroche {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-section);
  letter-spacing: -0.015em;
  color: var(--titre);
  margin: 0 0 0.625rem;
}
.courriel__sous {
  font-family: var(--lecture);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--attenue);
  margin: 0 0 1.5rem;
  max-width: 46ch;
}

.formulaire {
  display: flex;
  gap: 0.625rem;
  max-width: 470px;
}
.formulaire input {
  flex: 1;
  min-width: 0;
  background: var(--fond);
  border: 1px solid var(--filet);
  color: var(--corps);
  font-family: var(--sans);
  font-size: 0.875rem;
  padding: 0.8rem 0.9rem;
}
.formulaire input::placeholder { color: var(--attenue); }
.formulaire button {
  background: var(--rouge);
  color: #fff;
  border: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  padding: 0.8rem 1.625rem;
  cursor: pointer;
  transition: background var(--glisse);
  white-space: nowrap;
}
.formulaire button:hover { background: var(--rouge-sourd); }

.courriel__fin {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--attenue);
  margin-top: 0.75rem;
}


/* ═══ 9. PIED DE PAGE ═════════════════════════════════════════ */

.pied {
  border-top: 1px solid var(--filet);
  padding: 2.5rem var(--marge-laterale) 3rem;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.pied__logo { width: 52px; height: 52px; flex-shrink: 0; }
.pied__texte {
  font-family: var(--etiquette);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--attenue);
  line-height: 1.8;
}
.pied__liens { display: flex; gap: 1.5rem; }
.pied__liens a {
  font-family: var(--etiquette);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--attenue);
  text-decoration: none;
}
.pied__liens a:hover { color: var(--titre); }


/* ═══ 10. MOBILE ══════════════════════════════════════════════ */

@media (max-width: 900px) {
  :root { --marge-page: 1.625rem; }

  .grille { flex-direction: column; gap: 1.875rem; }

  /* La marge latérale passe au-dessus du texte et s'étale
     à l'horizontale. Voir cahier, section 6.                   */
  .grille__marge {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1.625rem 2rem;
  }
  .marge dd { margin-bottom: 0; }
  .marge__rappel { width: 100%; }

  .grille__contenu { max-width: 100%; }

  /* Le justifié devient laid sous ~400 px, même avec la césure. */
  .texte p, .chapeau { text-align: left; }

  .page { padding-top: 2.5rem; padding-bottom: 3.5rem; }
  .titre-article, .titre-accueil { max-width: none; }
}

@media (max-width: 520px) {
  .formulaire { flex-direction: column; }
  .formulaire button { width: 100%; }
  .nav { gap: 1.125rem; }
  .entete { padding-top: 1rem; padding-bottom: 1rem; }
}


/* ═══ 11. ACCESSIBILITÉ ET IMPRESSION ═════════════════════════ */

:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 3px;
}

.saut-au-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--rouge);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.875rem;
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.saut-au-contenu:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  .entete, .nav, .bascule, .courriel, .pied,
  .commandite, .marge__rappel { display: none; }
  body { background: #fff; color: #000; }
  .texte p, .chapeau { text-align: left; }
}