/* ==========================================================================
   Blog Smoking.fr — feuille de style unique.

   Trois partis pris, pour que la page reste rapide et vieillisse bien :

   1. **Aucune police téléchargée.** La pile système donne un rendu propre sur
      chaque plateforme, sans requête bloquante ni décalage au chargement, et
      sans faire dépendre le blog d'un service tiers.
   2. **Aucun cadre CSS.** Le blog a besoin d'une grille, de cartes et d'un
      article lisible : cela tient en un fichier qu'on relit en entier.
   3. **Des variables plutôt que des valeurs répétées.** Changer l'accent ou le
      rythme vertical se fait en un endroit.
   ========================================================================== */

:root {
  --noir: #111113;
  --noir-doux: #2a2a2e;
  --gris: #6b6b73;
  --gris-clair: #e6e6ea;
  --gris-fond: #f6f6f8;
  --blanc: #fff;

  /* Rouge officiel de la marque. Tous les rouges du blog en descendent : liens,
     surtitres, bouton de la bannière, contours de focus. */
  --accent: #96373a;
  --accent-sombre: #772b2e;

  --texte: 1.0625rem;
  --hauteur: 1.7;
  --contenant: 1240px;
  --rayon: 10px;
  --ombre: 0 1px 2px rgb(17 17 19 / 6%), 0 8px 24px rgb(17 17 19 / 6%);
  --transition: 0.18s ease;
}

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

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--texte);
  line-height: var(--hauteur);
  text-rendering: optimizeLegibility;
}

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

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-sombre); }

h1, h2, h3, h4, h5 { line-height: 1.25; letter-spacing: -0.011em; }

.contenant {
  width: 100%;
  max-width: var(--contenant);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.evitement {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--noir);
  color: var(--blanc);
}
.evitement:focus { left: 1rem; top: 1rem; }

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

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-clair);
}

.entete-corps {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 78px;
}

.entete-logo { display: inline-flex; flex: 0 0 auto; }
.entete-logo img { width: 128px; height: auto; }

/* La navigation occupe tout l'espace laissé par le logo et la recherche, et s'y
   centre. */
.nav { flex: 1 1 auto; }

.nav-liste {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-liste > li > a,
.nav-parent-libelle {
  display: inline-block;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  color: var(--noir);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav-liste > li > a:hover,
.nav-parent:hover .nav-parent-libelle {
  background: var(--gris-fond);
  color: var(--accent);
}

.nav-parent { position: relative; }

.nav-parent-libelle { cursor: default; }
/* Le script en fait un bouton : il devient cliquable, et son chevron indique
   l'état du sous-menu. */
html.js .nav-parent-libelle { cursor: pointer; }
html.js .nav-parent[data-ouvert] > .nav-parent-libelle::after {
  transform: translateY(2px) rotate(-135deg);
}
.nav-parent-libelle::after {
  content: "";
  display: inline-block;
  width: 0.4em; height: 0.4em;
  margin-left: 0.45em;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  transform: translateY(-2px) rotate(45deg);
}

/* Sous-menu au survol et au clavier : `focus-within` suffit, sans script. */
.nav-sous {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 232px;
  margin: 0;
  padding: 0.4rem;
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.nav-parent:hover > .nav-sous,
.nav-parent:focus-within > .nav-sous {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-sous a {
  display: block;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  color: var(--noir);
  font-size: 0.9375rem;
  text-decoration: none;
}
.nav-sous a:hover { background: var(--gris-fond); color: var(--accent); }

/* Sélecteur de langue, à la droite de l'en-tête. Il s'ouvre au survol et au
   clavier comme le sous-menu des catégories, et sans script. */
.langues { position: relative; flex: 0 0 auto; }

.langues-actuelle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: none;
  border: 1px solid var(--gris-clair);
  border-radius: 999px;
  color: var(--noir);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.langues-actuelle:hover { background: var(--gris-fond); color: var(--accent); }

.langues-actuelle::after {
  content: "";
  display: inline-block;
  width: 0.36em; height: 0.36em;
  margin-left: 0.1em;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  transform: translateY(-2px) rotate(45deg);
}

/* Les drapeaux n'ont pas tous le même rapport de forme : une boîte commune les
   aligne, quitte à rogner de quelques pixels. */
.langues-drapeau {
  flex: 0 0 auto;
  width: 20px; height: 14px;
  object-fit: cover;
  border-radius: 2px;
}

.langues-liste {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 176px;
  margin: 0;
  padding: 0.4rem;
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 1;
}

.langues:hover > .langues-liste,
.langues:focus-within > .langues-liste {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.langues-liste a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  color: var(--noir);
  font-size: 0.9375rem;
  text-decoration: none;
}
.langues-liste a:hover { background: var(--gris-fond); color: var(--accent); }
.langues-liste a[aria-current] { background: var(--gris-fond); font-weight: 700; }

.nav-bouton {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  background: var(--noir);
  border: 0;
  border-radius: 6px;
  color: var(--blanc);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.nav-bouton-barres {
  position: relative;
  display: block;
  width: 16px; height: 2px;
  background: currentcolor;
}
.nav-bouton-barres::before,
.nav-bouton-barres::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px; height: 2px;
  background: currentcolor;
}
.nav-bouton-barres::before { top: -5px; }
.nav-bouton-barres::after { top: 5px; }

.recherche { display: flex; flex: 0 0 auto; align-items: center; }

.recherche input {
  width: 190px;
  padding: 0.5rem 0.75rem;
  background: var(--gris-fond);
  border: 1px solid var(--gris-clair);
  border-radius: 999px 0 0 999px;
  border-right: 0;
  color: inherit;
  font: inherit;
  font-size: 0.9375rem;
}
.recherche input:focus { background: var(--blanc); outline-offset: -2px; }

.recherche button {
  display: inline-flex;
  align-items: center;
  /* La hauteur du bouton suit celle du champ, qui est dictée par l'interligne du
     texte : sans cela, la loupe est plus basse d'un demi-interligne. */
  align-self: stretch;
  padding: 0.5rem 0.85rem;
  background: var(--noir);
  border: 1px solid var(--noir);
  border-radius: 0 999px 999px 0;
  color: var(--blanc);
  cursor: pointer;
}
.recherche button:hover { background: var(--accent); border-color: var(--accent); }

/* --------------------------------------------------------------------------
   Fil d'Ariane
   -------------------------------------------------------------------------- */

.ariane {
  background: var(--gris-fond);
  border-bottom: 1px solid var(--gris-clair);
  font-size: 0.875rem;
}

.ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0.7rem 0;
  list-style: none;
  color: var(--gris);
}

.ariane li + li::before { content: "›"; margin-right: 0.4rem; color: var(--gris); }
.ariane a { color: var(--noir-doux); text-decoration: none; }
.ariane a:hover { color: var(--accent); text-decoration: underline; }
.ariane [aria-current] { color: var(--gris); }

/* --------------------------------------------------------------------------
   Gabarit à deux colonnes
   -------------------------------------------------------------------------- */

.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(1.75rem, 4vw, 3rem) 4rem;
}

.principal { min-width: 0; }

/* --------------------------------------------------------------------------
   Listings
   -------------------------------------------------------------------------- */

.listing-entete { margin-bottom: 2rem; }

.listing-entete h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.75rem, 3.5vw, 2.375rem);
}

.listing-entete h1::after {
  content: "";
  display: block;
  width: 56px; height: 3px;
  margin-top: 0.85rem;
  background: var(--accent);
}

.listing-compte { margin: 0; color: var(--gris); font-size: 0.9375rem; }

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 1.75rem;
}

.carte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  transition: transform var(--transition), box-shadow var(--transition);
}

.carte:hover { transform: translateY(-2px); box-shadow: var(--ombre); }

/* Le cadre impose le format, l'image le remplit et se recadre : c'est ce qui
   aligne les vignettes d'une carte à l'autre quelles que soient leurs
   proportions. L'image est placée en absolu plutôt qu'en `height: 100%` parce
   que le `<picture>` des vignettes s'intercale : une hauteur en pourcentage n'a
   alors plus de parent à hauteur définie où se référer, l'image reprend ses
   proportions d'origine, et les cartes se désalignent. */
.carte-visuel {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--gris-fond);
}
.carte-visuel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carte-corps {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem 1.15rem 1.25rem;
}

.etiquette {
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  background: var(--noir);
  border-radius: 999px;
  color: var(--blanc);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}
.etiquette:hover { background: var(--accent); color: var(--blanc); }

.carte-titre { margin: 0; font-size: 1.125rem; }
.carte-titre a { color: var(--noir); text-decoration: none; }
.carte-titre a:hover { color: var(--accent); }

.carte-date { color: var(--gris); font-size: 0.8125rem; }

.carte-accroche {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--noir-doux);
  font-size: 0.9375rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.lien-suite {
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}
.lien-suite:hover { text-decoration: underline; }

/* L'article le plus récent, mis en avant sur la seule première page de l'accueil.
   Même carte, plus grande : rien à maintenir en double. */
.carte--une { margin-bottom: 1.75rem; }
.carte--une .carte-visuel { aspect-ratio: 16 / 9; }
.carte--une .carte-corps { gap: 0.75rem; padding: 1.5rem 1.6rem 1.7rem; }
.carte--une .carte-titre { font-size: 1.625rem; line-height: 1.25; }
.carte--une .carte-accroche { font-size: 1.0625rem; -webkit-line-clamp: 6; }
.carte--une .lien-suite { font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gris-clair);
}

.pagination-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination a,
.pagination-courante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--gris-clair);
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.pagination a { color: var(--noir); }
.pagination a:hover { border-color: var(--accent); color: var(--accent); }

.pagination-courante { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.pagination-cote { white-space: nowrap; }
.pagination-saut { padding-inline: 0.25rem; color: var(--gris); }

/* Présentation de catégorie : sous le titre, avant les cartes, comme avant.
   Pas de largeur de lecture ici : le bloc doit s'aligner sur la grille de cartes
   qui le suit. Une mesure confortable laissait, sur un écran large, deux cents
   pixels de vide entre la fin du texte et la barre latérale — et le bouton de
   repli, calé à droite, flottait au milieu de rien. */
.categorie-presentation {
  margin: -0.5rem 0 2.25rem;
  color: var(--noir-doux);
  font-size: 0.9375rem;
}

.categorie-presentation h2 {
  margin: 0 0 0.6rem;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
}

.categorie-presentation p { margin: 0; }
.categorie-presentation p + p { margin-top: 0.75rem; }
.categorie-presentation a { color: var(--accent); }

/* Le repli n'existe que si le script l'a posé : sans lui, le texte est entier.
   Il est purement visuel — le texte complet est toujours dans la page. La coupe
   se fait à la quatrième ligne, mais le dégradé en efface les deux dernières :
   l'œil lit trois lignes nettes et voit que le texte continue, sans le trait dur
   d'une troncature. */
.categorie-presentation[data-replie] .categorie-presentation-corps {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}

.presentation-bascule {
  display: block;
  width: fit-content;
  margin: -0.35rem 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gris);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.presentation-bascule:hover { color: var(--accent); text-decoration: underline; }

/* Texte de bas d'accueil : présent pour le référencement, discret à l'écran.
   Même raison qu'au-dessus pour la largeur : son filet de séparation s'arrêtait
   avant le bord de la colonne. */
.texte-editorial {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gris-clair);
  color: var(--noir-doux);
  font-size: 0.9375rem;
}
.texte-editorial h2 { margin: 1.75rem 0 0.5rem; font-size: 1.125rem; }
.texte-editorial h2:first-child { margin-top: 0; }
.texte-editorial p { margin: 0; }

/* --------------------------------------------------------------------------
   Article
   -------------------------------------------------------------------------- */

.article-entete { margin-bottom: 1.75rem; }

.article-titre {
  margin: 0.9rem 0 0.6rem;
  font-size: clamp(1.875rem, 4vw, 2.625rem);
}

.article-dates { margin: 0; color: var(--gris); font-size: 0.9375rem; }
.article-maj { color: var(--gris); }

/* Image à la une : jamais recadrée, seulement bornée à la colonne. Les
   couvertures du corpus vont du panorama au logo carré de 300 px, et un cadre
   fixe déformerait les secondes pour flatter les premières. */
.article-visuel { margin: 0 0 1.75rem; }
.article-visuel img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--rayon);
}

/* Le corps vient de l'import : sa mise en forme ne peut compter que sur des
   balises éditoriales, sans une seule classe hormis `figure.video`. */
.corps { max-width: 76ch; font-size: 1.09375rem; }

/* Les marges du navigateur sont remises à zéro, puis un rythme unique les
   remplace. Le `:where()` ne pèse rien en spécificité : sans lui, `.corps p`
   l'emportait sur la règle de rythme et collait les paragraphes les uns aux
   autres. Un titre, lui, garde la marge que lui donne sa propre règle. */
.corps :where(p, ul, ol, blockquote, figure, table) { margin: 0; }
.corps > * + * { margin-top: 1.25rem; }

.corps h2, .corps h3, .corps h4, .corps h5 { margin: 2.25rem 0 0.75rem; scroll-margin-top: 100px; }
.corps h2 { font-size: 1.625rem; }
.corps h3 { font-size: 1.3125rem; }
.corps h4 { font-size: 1.125rem; }

.corps strong { font-weight: 700; }

.corps ul, .corps ol { padding-left: 1.35rem; }
.corps li + li { margin-top: 0.4rem; }

.corps img { border-radius: var(--rayon); }

.corps figure { margin: 2rem 0; }
.corps figcaption {
  margin-top: 0.6rem;
  color: var(--gris);
  font-size: 0.875rem;
  text-align: center;
}

.corps blockquote {
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--accent);
  color: var(--noir-doux);
  font-size: 1.125rem;
}

.corps table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.corps th, .corps td { padding: 0.6rem 0.75rem; border: 1px solid var(--gris-clair); text-align: left; }
.corps th { background: var(--gris-fond); }

/* Vidéos. L'ancien site fabriquait le ratio avec un conteneur en remplissage
   proportionnel ; l'import a retiré ce bricolage, et `aspect-ratio` le remplace
   ici en une ligne. Les 19 lecteurs du corpus sont des Vimeo et des YouTube, tous
   en 16/9. */
.corps figure.video { width: 100%; }
.corps figure.video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--rayon);
}

/* Sommaire reconstruit à la place du marqueur laissé par l'import. */
.sommaire {
  margin: 2rem 0;
  padding: 0.9rem 1.25rem 1rem;
  background: var(--gris-fond);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
}

/* Deux classes, parce que le sommaire est un enfant du corps : `.corps h2` lui
   imposait sinon sa taille et sa marge haute de titre de section. */
.sommaire .sommaire-titre {
  margin: 0 0 0.5rem;
  color: var(--gris);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sommaire ul { margin: 0; padding-left: 1.1rem; font-size: 0.875rem; line-height: 1.4; list-style: disc; }
.sommaire li + li { margin-top: 0.15rem; }
.sommaire .sommaire-sous { margin-left: 0.85rem; list-style: circle; }
.sommaire a { color: var(--noir-doux); text-decoration: none; }
.sommaire a:hover { color: var(--accent); text-decoration: underline; }

/* Mention de bas d'article : elle informe sans se faire remarquer, donc discrète
   mais lisible — pas de gris trop pâle, pas de taille en dessous de 13 px. */
.mention-ia {
  margin: 2.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--gris-clair);
  color: var(--gris);
  font-size: 0.8125rem;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Vous aimerez aussi
   -------------------------------------------------------------------------- */

.aimerez-aussi {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--gris-clair);
}

.aimerez-titre {
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
}

.aimerez-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.aimerez-carte {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.aimerez-visuel {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--rayon);
  background: var(--gris-fond);
}

.aimerez-visuel picture { display: block; height: 100%; }
.aimerez-visuel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aimerez-corps {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.75rem;
}

.aimerez-carte-titre {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

.aimerez-carte-titre a {
  color: var(--noir);
  text-decoration: none;
}

.aimerez-carte-titre a:hover { color: var(--accent); }

.aimerez-date {
  color: var(--gris);
  font-size: 0.8125rem;
}

@media (max-width: 700px) {
  .aimerez-grille { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Navigation d'article
   -------------------------------------------------------------------------- */

/* Pas de filet ici : celui de la mention de bas d'article sépare déjà le texte
   de ce qui suit, et deux traits à trois centimètres l'un de l'autre ne
   séparent plus rien. */
.voisins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 2.25rem;
}

.voisin {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  color: var(--noir);
  text-decoration: none;
  transition: border-color var(--transition);
}
.voisin:hover { border-color: var(--accent); }
.voisin-suiv { text-align: right; }

.voisin-sens { color: var(--accent); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; }
.voisin-titre { font-weight: 600; }

/* --------------------------------------------------------------------------
   Barre latérale
   -------------------------------------------------------------------------- */

.laterale {
  position: sticky;
  top: 98px;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.bloc {
  padding: 1.25rem;
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
}

.bloc-titre {
  margin: -1.25rem -1.25rem 1.25rem;
  padding: 0.85rem 1.25rem;
  background: var(--noir);
  border-radius: var(--rayon) var(--rayon) 0 0;
  color: var(--blanc);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.bloc p { margin: 0; color: var(--noir-doux); font-size: 0.9375rem; }

.bloc-apropos { text-align: center; }
.bloc-avatar {
  width: 148px; height: 148px;
  margin-bottom: 0.9rem;
  border: 1px solid var(--gris-clair);
  border-radius: 50%;
}

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

.derniers li + li { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--gris-clair); }

.derniers a {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  color: var(--noir);
  text-decoration: none;
}
.derniers a:hover .derniers-titre { color: var(--accent); }

/* `picture` est le fils direct de la grille depuis l'arrivée des vignettes : sans
   `display: block`, il reste en ligne et laisse un blanc sous l'image. */
.derniers picture { display: block; }
.derniers img { width: 68px; height: 68px; border-radius: 6px; object-fit: cover; }
.derniers-titre { display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
.derniers time { color: var(--gris); font-size: 0.75rem; }

/* Réseaux sociaux : une pastille par compte, le dessin prend la couleur du
   contexte. Le libellé reste dans la page, hors écran : un lien dont le seul
   contenu est une image n'a pas de nom pour un lecteur d'écran. */
.reseaux-pictos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reseaux-pictos a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--gris-clair);
  border-radius: 999px;
  color: var(--noir);
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.picto { display: block; fill: currentColor; }

/* Les cinq pastilles tiennent sur une ligne bien plus étroite que le bloc :
   centrées, elles se lisent comme un ensemble plutôt que comme une ligne
   interrompue. */
.bloc-reseaux .reseaux-pictos { justify-content: center; }
.bloc-reseaux a:hover { border-color: var(--accent); color: var(--accent); }

/* Le bouton n'est pas incrusté dans le visuel : posé en CSS, il reste net sur
   un écran à haute densité, il se traduit avec le reste de l'interface, et un
   nouveau montage se remplace sans repasser par un logiciel d'image. Sa
   géométrie est celle relevée sur la bannière d'origine, en pourcentages, donc
   indépendante de la taille affichée. */
.banniere { position: relative; display: block; }
.bloc-banniere img { display: block; width: 100%; height: auto; border-radius: 6px; }

.banniere-bouton {
  position: absolute;
  right: 18.5%;
  bottom: 6.5%;
  left: 18.5%;
  padding: 0.7rem 0.5rem;
  background: var(--accent);
  color: var(--blanc);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.15s ease;
}

.banniere:hover .banniere-bouton,
.banniere:focus-visible .banniere-bouton { background: var(--accent-sombre); }

/* --------------------------------------------------------------------------
   Messages : 404, recherche
   -------------------------------------------------------------------------- */

.message {
  margin-bottom: 2.5rem;
  padding: 2rem;
  background: var(--gris-fond);
  border-radius: var(--rayon);
}
.message h1 { margin: 0 0 0.75rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.message p { margin: 0 0 1rem; max-width: 70ch; }
.message p:last-child { margin-bottom: 0; }

.recherche-entete { margin-bottom: 1.75rem; }
.recherche-entete h1 { margin: 0 0 1rem; }

.recherche--page {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  max-width: 36rem;
}
.recherche--page input {
  flex: 1;
  width: auto;
  border-radius: 6px;
  border-right: 1px solid var(--gris-clair);
}
.recherche--page button {
  align-self: auto;
  padding: 0.5rem 1rem;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--blanc);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.recherche--page button:hover {
  background: var(--accent-sombre);
  border-color: var(--accent-sombre);
}

.recherche-message,
.recherche-compte {
  margin: 0 0 1.5rem;
  color: var(--noir-doux);
}

.recherche-repli-titre {
  margin: 2rem 0 1rem;
  font-size: 1.25rem;
}

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

.recherche-hit {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 1.15rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--gris-clair);
}
.recherche-hit:last-child { border-bottom: 1px solid var(--gris-clair); }

.recherche-visuel {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--rayon);
  background: var(--gris-fond);
}
.recherche-visuel picture { display: block; height: 100%; }
.recherche-visuel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recherche-hit-corps {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.recherche-hit-titre {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.35;
}
.recherche-hit-titre a {
  color: var(--noir);
  text-decoration: none;
}
.recherche-hit-titre a:hover { color: var(--accent); }

.recherche-hit-corps time {
  color: var(--gris);
  font-size: 0.8125rem;
}

.recherche-extrait {
  margin: 0.25rem 0 0;
  color: var(--noir-doux);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.recherche-extrait mark {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: inherit;
  padding: 0 0.1em;
}

@media (max-width: 700px) {
  .recherche-hit { grid-template-columns: 1fr; }
  .recherche-visuel { max-width: 240px; }
}

.bouton {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  background: var(--noir);
  border-radius: 6px;
  color: var(--blanc);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.bouton:hover { background: var(--accent); color: var(--blanc); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.pied { background: var(--noir); color: #d3d3d8; }

/* Bande Instagram : les visuels du compte, sans légende. Les publications n'ont
   pas toutes le même cadrage, d'où la boîte carrée et le recadrage centré. */
.pied-instagram { border-bottom: 1px solid rgb(255 255 255 / 12%); }

.instagram-corps {
  display: grid;
  gap: 1rem;
  padding-block: 2rem;
}

.instagram-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  margin: 0;
}

.instagram-titre {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--blanc);
}

.instagram-compte { color: #d3d3d8; }

.instagram-grille {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.instagram-grille a {
  display: block;
  overflow: hidden;
  border-radius: var(--rayon);
}

.instagram-grille img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: opacity var(--transition), transform var(--transition);
}

.instagram-grille a:hover img { opacity: 0.85; transform: scale(1.04); }

.pied-corps {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: start;
  padding-block: 2.5rem;
}

.pied-marque { margin: 0; }
.pied-marque img { width: 128px; background: var(--blanc); border-radius: 6px; padding: 0.4rem 0.6rem; }

/* La liste des catégories du pied doublait le menu ; une présentation de la
   maison y dit ce que le menu ne dit pas. */
.pied-presentation {
  max-width: 52ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
}

.pied a { color: var(--blanc); font-size: 0.9375rem; text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }

/* La rangée du pied s'aligne en haut, pour que le logo et le texte partent du
   même bord. Les pastilles, elles, sont seules dans leur colonne : les centrer
   sur la hauteur les met en face du texte plutôt qu'au-dessus. */
.pied-reseaux { align-self: center; justify-content: flex-end; }

/* Sur fond noir, la pastille s'éclaire au survol au lieu de se souligner. */
.pied-reseaux a { border-color: rgb(255 255 255 / 25%); color: var(--blanc); }
.pied-reseaux a:hover { background: var(--accent); border-color: var(--accent); text-decoration: none; }

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  padding-block: 1.1rem;
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: 0.875rem;
}
.pied-bas p { margin: 0; }
.pied-bas ul { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .page { grid-template-columns: minmax(0, 1fr); }
  .laterale { position: static; }
  .laterale { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); align-items: start; }
}

@media (max-width: 900px) {
  .entete-corps { flex-wrap: wrap; gap: 0.75rem 1rem; min-height: 0; padding-block: 0.85rem; }
  .entete-logo { margin-right: auto; }

  /* Un menu ouvert peut dépasser la hauteur de l'écran : l'en-tête étant collé
     en haut, il faut qu'il défile lui-même. */
  html.menu-ouvert .entete {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
  }

  /* Le sélecteur reste visible sans ouvrir le menu : un visiteur arrivé dans la
     mauvaise langue doit pouvoir en changer tout de suite. Il reprend la forme
     et la hauteur du bouton de menu, à côté duquel il se place. */
  .langues { order: 1; }
  .langues-liste { right: 0; left: auto; }

  .langues-actuelle {
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    font-size: 0.875rem;
  }

  .nav-bouton { display: inline-flex; order: 2; }
  .recherche { order: 3; flex: 1 1 100%; }
  .recherche input { width: 100%; }
  .recherche--page { flex: none; order: 0; }
  .recherche--page input { width: auto; }

  /* Sans script, la navigation reste visible : le menu n'est replié que si le
     script a pu prendre la main, jamais inaccessible. */
  .nav { order: 4; flex: 1 1 100%; }
  html.js .nav { display: none; }
  html.js .nav[data-ouvert] { display: block; }

  .nav-liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-liste > li { border-top: 1px solid var(--gris-clair); }
  .nav-liste > li > a, .nav-parent-libelle { display: block; padding: 0.75rem 0.25rem; border-radius: 0; }

  .nav-sous {
    position: static;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    margin: 0 0 0.5rem 0.75rem;
    padding: 0;
    border: 0;
    box-shadow: none;
    transform: none;
  }
  .nav-sous a { padding: 0.45rem 0.25rem; color: var(--noir-doux); }

  /* Sans script, le sous-menu reste déployé : un menu long vaut mieux qu'un menu
     qui ne s'ouvre pas. Avec, il attend d'être demandé. */
  html.js .nav-sous { display: none; }
  html.js .nav-parent[data-ouvert] > .nav-sous { display: block; }
}

@media (max-width: 640px) {
  /* Les quatre tableaux du corpus vont jusqu'à cinq colonnes. Leur conteneur
     Bootstrap ayant été retiré à l'import, c'est ici qu'on évite le débordement :
     le tableau défile horizontalement plutôt que d'élargir la page. */
  .corps table { display: block; max-width: 100%; overflow-x: auto; }

  .pied-corps { grid-template-columns: minmax(0, 1fr); }
  .pied-reseaux { justify-content: flex-start; }
  .voisin-suiv { text-align: left; }

  /* Six vignettes sur une largeur de téléphone donneraient des timbres-poste :
     deux rangées de trois restent lisibles. */
  .instagram-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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