/* 3VOLUTION — feuille de style unique.
   Couleurs relevees au pixel sur le logo : rouge #D40E1D, gris #6B6C6E.
   L'interface, elle, utilise le rouge profond #A50B17 — celui du survol —
   partout : c'est le choix d'Aurelie, et il tient mieux le contraste sur blanc.
   Roboto Condensed pour les titres (la typo du logo), Roboto pour le corps.

   ECHELLE TYPOGRAPHIQUE — sept valeurs, pas une de plus.
   Il y en avait douze, dont trois separees de moins de 4 % : l'oeil ne lisait
   pas une intention, il lisait un defaut. Toute nouvelle taille doit passer par
   un de ces jetons. */

/* ------------------------------------------------------------- polices */
/* Roboto et Roboto Condensed sont servies par CE site, pas par Google.
   Tant qu'on les demandait a fonts.googleapis.com, l'adresse IP de chaque
   visiteur partait chez Google a l'affichage de chaque page — c'etait le seul
   lien du site vers un tiers. Il n'y en a plus aucun.

   Six fichiers, latin et latin-ext seulement : le site est en francais, les
   sous-ensembles cyrillique, grec et vietnamien ne servaient a personne.
   Quatre d'entre eux etaient des doublons — ce sont des polices variables, un
   meme fichier porte 400 et 500, ou 600 et 700. On ne le sert qu'une fois.

   Pour changer de police : deposer les .woff2 dans assets/polices/, refaire ces
   blocs, et changer les deux familles citees plus bas. Rien d'autre. */

/* Roboto · italic 400 · latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/polices/roboto-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Roboto · italic 400 · latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/polices/roboto-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto · normal 400 · latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/polices/roboto-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Roboto · normal 400 · latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/polices/roboto-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto · normal 500 · latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/polices/roboto-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Roboto · normal 500 · latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/polices/roboto-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto Condensed · normal 600 · latin-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/polices/roboto-condensed-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Roboto Condensed · normal 600 · latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/polices/roboto-condensed-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto Condensed · normal 700 · latin-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/polices/roboto-condensed-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Roboto Condensed · normal 700 · latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/polices/roboto-condensed-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --rouge:        #A50B17;
  --rouge-sombre: #7C0810;

  --t-xs:      .8125rem;                    /* surtitres, etiquettes */
  --t-s:       .9375rem;                    /* meta, pied de page */
  --t-m:       1.0625rem;                   /* texte courant */
  --t-l:       1.25rem;                     /* chapo, intro, titres de carte */
  --t-xl:      1.5rem;                      /* la marque dans l'en-tete */
  --t-section: clamp(1.5rem, 3.2vw, 2rem);  /* titres de section */
  --t-page:    clamp(2rem, 5.5vw, 3.25rem); /* titre de page */
  --gris:         #6B6C6E;
  --gris-clair:   #E4E4E6;
  --encre:        #1C1C1E;
  --fond:         #FFFFFF;
  --fond-doux:    #F6F6F7;
  /* Le trait des cadres — cartes, etiquettes, temoignages, dates. Les FILETS
     de separation (barre du haut, pied de page, traits entre les lignes du
     menu) restent gris : ce ne sont pas des cadres. */
  --cadre:        var(--rouge);
  --largeur:      min(68rem, 100% - 2.5rem);
  --lecture:      34rem;   /* ~68 caracteres : la longueur de ligne qui se lit sans fatigue */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rouge:      #FF7A84;
    --rouge-sombre:#FFA3AA;
    --gris:       #A0A1A4;
    --gris-clair: #33343A;
    --encre:      #ECECEE;
    --fond:       #16161A;
    --fond-doux:  #1F1F25;
  }
}

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-m);
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}

.contenu { width: var(--largeur); margin-inline: auto; }
/* Les blocs poses au milieu d'un texte (cartes, inserts, axes) rouvrent un
   `.contenu` a l'interieur de celui de la page : sans cette ligne, ils
   heritaient une SECONDE gouttiere et se retrouvaient plus etroits que le
   titre au-dessus d'eux — 2,5 rem de moins sur ordinateur, 2,5 rem de trop
   sur telephone. */
.contenu .contenu { width: 100%; }
.lecture  { max-width: var(--lecture); }

/* ---------------------------------------------------------------- en-tete */

.entete {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gris-clair);
}
.entete .contenu {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.25rem; flex-wrap: wrap;
}
.marque {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-weight: 700; font-size: var(--t-xl); letter-spacing: .02em;
  text-decoration: none; color: var(--encre); margin-right: auto;
}
.marque b { color: var(--rouge); }
.entete nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.entete nav a {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-weight: 600; font-size: var(--t-s); text-transform: uppercase;
  letter-spacing: .04em; color: var(--gris); text-decoration: none;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.entete nav a:hover, .entete nav a[aria-current="page"] {
  color: var(--encre); border-bottom-color: var(--rouge);
}

/* --------------------------------------------------------------- titrage */

h1, h2, h3, h4 {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-weight: 700; line-height: 1.15; text-wrap: balance;
  margin: 2.5em 0 .6em;
}
h1 { font-size: var(--t-page); margin-top: 0; letter-spacing: -.01em; }
h2 { font-size: var(--t-section); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }

a { color: var(--rouge); text-underline-offset: .18em; }
a:hover { color: var(--rouge-sombre); }

p, ul, ol { margin: 0 0 1.35em; }
li { margin-bottom: .4em; }
img { max-width: 100%; height: auto; border-radius: 3px; }
hr { border: 0; border-top: 1px solid var(--gris-clair); margin: 3rem 0; }

blockquote {
  margin: 2rem 0; padding: .25rem 0 .25rem 1.5rem;
  border-left: 3px solid var(--rouge);
  font-size: var(--t-l); line-height: 1.6; color: var(--encre);
}
blockquote cite { display: block; margin-top: .6rem; font-size: var(--t-s);
  font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }

/* ----------------------------------------------------------- composants */

.bandeau { padding: clamp(3rem, 9vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem); }
.baseline {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  text-transform: uppercase; letter-spacing: .22em;
  font-size: var(--t-xs); font-weight: 600; color: var(--rouge); margin-bottom: 1rem;
}
.chapo { font-size: var(--t-l); color: var(--gris); max-width: var(--lecture); }

.bouton {
  display: inline-block; background: var(--rouge); color: #fff;
  font-family: "Roboto Condensed", Roboto, sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; font-size: var(--t-s);
  padding: .85rem 1.6rem; border-radius: 2px; text-decoration: none;
}
.bouton:hover { background: var(--rouge-sombre); color: #fff; }

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

.carte {
  border: 1px solid var(--cadre); border-radius: 4px; padding: 1.6rem;
  background: var(--fond); display: flex; flex-direction: column;
}
.carte h3 { margin: 0 0 .5rem; }
.carte h3 a { color: var(--encre); text-decoration: none; }
.carte h3 a:hover { color: var(--rouge); }
.carte p { color: var(--gris); margin-bottom: 1rem; }
.carte .meta { margin-top: auto; font-size: var(--t-s); color: var(--gris); }

.etiquette {
  display: inline-block; font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gris); border: 1px solid var(--cadre);
  padding: .2rem .55rem; border-radius: 2px;
}
.etiquette.attente { color: var(--rouge); border-color: currentColor; }

.encart {
  background: var(--fond-doux); border-radius: 4px;
  padding: 1.75rem; margin: 2.5rem 0;
}
.encart :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ pied */

.pied {
  margin-top: 5rem; border-top: 1px solid var(--gris-clair);
  padding: 3rem 0 2.5rem; background: var(--fond-doux);
}
.pied .grille { gap: 2rem; }
.pied h4 { margin: 0 0 .75rem; color: var(--encre); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied a { color: var(--gris); text-decoration: none; }
/* Sauf sur la derniere ligne : un credit doit se voir comme un lien. */
.pied .bas a { text-decoration: underline; text-underline-offset: .18em; }
.pied a:hover { color: var(--rouge); }
.pied .bas {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--gris-clair);
  font-size: var(--t-s); color: var(--gris);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.pied .devise {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--rouge);
}
/* La signature ouvre le pied de page : le logo, la devise dessous, l'ensemble
   centre. Meme disposition sur telephone et sur grand ecran — c'est une
   marque, elle n'a pas de raison de se decaler d'un cote ou de l'autre. */
.pied .signature {
  display: flex; flex-direction: column; align-items: center;
  gap: .8rem; margin: 0 0 2.75rem; text-align: center;
}
.pied .pied-logo { width: 88px; height: auto; }

/* Les longs articles ont besoin d'air : on elargit un peu l'interligne. */
.article .lecture { line-height: 1.8; }
.article .lecture p:first-of-type { font-size: var(--t-l); color: var(--gris); }

/* --------------------------------------------------- menu du telephone */
/* Cinq entrees, dont deux de trois mots : sous 52 rem elles ne tiennent plus
   sur un rang et se cassaient en travers de l'en-tete. Le bouton les empile
   dans un panneau, une entree par ligne, sous la barre.
   `avec-burger` est posee par le script de base.html : sans JavaScript, le
   menu reste affiche comme avant — rien n'est enferme derriere un bouton
   qui ne repondrait pas. */

.burger { display: none; }

@media (max-width: 52rem) {
  .entete .contenu { min-height: 0; padding-block: .7rem; row-gap: 0; }

  .entete.avec-burger .burger {
    display: inline-flex; align-items: center; gap: .6rem;
    margin-right: -.4rem; padding: .55rem .4rem;
    background: none; border: 0; cursor: pointer; color: var(--encre);
    font-family: "Roboto Condensed", Roboto, sans-serif;
    font-weight: 700; font-size: var(--t-s);
    text-transform: uppercase; letter-spacing: .08em;
  }
  /* Les trois barres sont dessinees au trait : pas d'image a charger, et elles
     se croisent quand le menu est ouvert. */
  .burger-barres {
    position: relative; width: 1.4rem; height: 2px;
    background: currentColor; transition: background-color .15s;
  }
  .burger-barres::before, .burger-barres::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 2px;
    background: currentColor; transition: transform .2s, top .2s;
  }
  .burger-barres::before { top: -.42rem; }
  .burger-barres::after  { top:  .42rem; }
  .entete.ouvert .burger-barres { background: transparent; }
  .entete.ouvert .burger-barres::before { top: 0; transform: rotate(45deg); }
  .entete.ouvert .burger-barres::after  { top: 0; transform: rotate(-45deg); }

  .entete.avec-burger nav { display: none; }
  .entete.avec-burger.ouvert nav { display: flex; }

  /* Le menu empile : une entree par ligne, sur toute la largeur, avec des
     cibles au doigt (2,9 rem de haut, au-dela du minimum de 44 points). */
  .entete nav {
    flex-direction: column; flex-wrap: nowrap; gap: 0;
    width: 100%; margin-top: .7rem;
    border-top: 1px solid var(--gris-clair);
  }
  .entete nav a {
    padding: .95rem .25rem .95rem .9rem;
    font-size: var(--t-m);
    border-bottom: 1px solid var(--gris-clair);
    border-left: 3px solid transparent;
  }
  /* Le trait rouge de la page courante passe du dessous au cote : sous le
     texte, il se confondait avec le filet de separation. */
  .entete nav a:hover, .entete nav a[aria-current="page"] {
    border-bottom-color: var(--gris-clair);
    border-left-color: var(--rouge);
    color: var(--encre);
  }
}

@media (prefers-reduced-motion: reduce) {
  .burger-barres, .burger-barres::before, .burger-barres::after { transition: none; }
}

/* Date de publication de l'article, sous le titre du bandeau. */
.bandeau .date {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: var(--t-s); color: var(--gris); margin-top: .75rem;
}

/* ------------------------------------------------- images mises en avant */
/* Elles vivaient dans le gabarit WordPress, pas dans le texte : l'extraction
   ne pouvait pas les voir. Recuperees par visuels.py. */

.couverture {
  display: block; width: 100%; height: auto;
  /* Meme bande que partout ailleurs sur le site : les images du blog sont
     fournies en 1090 x 280, elles ne sont donc jamais recoupees. */
  aspect-ratio: 1090 / 280; object-fit: cover;
  border-radius: 4px;
  /* Le bas comptait autant que le haut : le texte demarrait colle a l'image.
     On garde la meme respiration que les inserts en dessous. */
  margin: 2.25rem 0 2.75rem;
}

.carte .vignette {
  display: block;
  /* On sort la vignette du rembourrage de la carte : l'image touche les bords. */
  margin: -1.6rem -1.6rem 1.25rem;
}
.carte .vignette img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1090 / 280; object-fit: cover;
  border-radius: 4px 4px 0 0;
}

/* Une carte qui porte un portrait et son appel : tout se centre sous l'image.
   Le meme cadrage sert au telephone et au grand ecran — une photo de visage
   n'a pas besoin d'une seconde version, elle reste lisible reduite. */
.carte-portrait { text-align: center; }
.carte-portrait h3 { margin-bottom: .35rem; }
.carte-portrait h3 a { text-decoration: none; }
.carte-portrait h3 a:hover { text-decoration: underline; text-underline-offset: .18em; }

/* Grille de cartes (bloc « ::: cartes »).
   Elle sort de la colonne de lecture et prend toute la largeur du site : c'est
   ce changement de rythme qui la distingue du texte courant. Le generateur
   ferme la colonne de lecture avant, la rouvre apres — pas de marge negative,
   donc pas de dependance a `100vw` ni de debordement lateral.

   TROIS par ligne, exactement : pas d'`auto-fit`, qui en mettait quatre des que
   la place le permettait. Deux sur tablette, une sur telephone.
   Aucune taille de police n'est touchee a l'interieur des cartes : les titres
   gardent le h3 du site, le texte garde la taille du corps. */
.grille-cartes {
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2.75rem 0;
}
@media (min-width: 34rem) { .grille-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .grille-cartes { grid-template-columns: repeat(3, 1fr); } }

.grille-cartes .carte { padding: 1.4rem 1.5rem; }
.grille-cartes h3 {
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--rouge); margin: 0 0 .5rem;
}
.grille-cartes p { margin: 0; color: var(--gris); }

/* ------------------------------------------- carrousel de temoignages */
/* Il defile au doigt, a la molette et au clavier grace a `scroll-snap`, sans
   aucun script. Les fleches sont un supplement : base.html ne les revele que
   si le navigateur execute du JavaScript. */

/* Un seul temoignage a la fois : le carrousel est plus etroit que le site, et
   chaque carte remplit sa largeur. Les voisines sortent donc entierement du
   cadre — aucune ne depasse sur les bords. */
.carrousel { position: relative; margin: 3rem auto; max-width: 46rem; }
.carrousel-piste {
  display: flex; gap: 1.25rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: thin;
  padding-bottom: 1rem;
}
.temoignage {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0; padding: 1.75rem;
  border: 1px solid var(--cadre); border-radius: 4px;
  background: var(--fond-doux);
  display: flex; flex-direction: column;
}
.temoignage blockquote {
  margin: 0; padding: 0; border: 0;
  font-size: var(--t-m); line-height: 1.75;
}
.temoignage blockquote p { margin: 0 0 1rem; }
.temoignage blockquote p::before { content: "\201C"; color: var(--rouge); }
.temoignage blockquote p::after  { content: "\201D"; color: var(--rouge); }
.temoignage figcaption {
  margin-top: auto;
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--rouge);
}

.carrousel-fleche { display: none; }
.carrousel.avec-fleches .carrousel-fleche {
  display: grid; place-items: center;
  position: absolute; top: calc(50% - 1.5rem);
  width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid var(--cadre); border-radius: 50%;
  background: var(--fond); color: var(--encre);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.carrousel.avec-fleches .carrousel-fleche:hover {
  border-color: var(--rouge); color: var(--rouge);
}
.carrousel.avec-fleches .carrousel-fleche[data-sens="-1"] { left: -1.5rem; }
.carrousel.avec-fleches .carrousel-fleche[data-sens="1"]  { right: -1.5rem; }
/* Sous cette largeur, les fleches n'ont plus de marge exterieure ou se tenir :
   elles passaient par-dessus le texte du temoignage, qu'un fond translucide ne
   rendait pas plus lisible. Elles descendent donc SOUS le carrousel, cote a
   cote et centrees. Le geste reste possible au doigt, comme avant ; les
   fleches ne font que l'annoncer. */
@media (max-width: 56rem) {
  .carrousel { padding-bottom: 3.75rem; }
  .carrousel.avec-fleches .carrousel-fleche {
    top: auto; bottom: 0;
    background: var(--fond); backdrop-filter: none;
  }
  .carrousel.avec-fleches .carrousel-fleche[data-sens="-1"] {
    left: calc(50% - 3rem); right: auto;
  }
  .carrousel.avec-fleches .carrousel-fleche[data-sens="1"] {
    left: calc(50% + .25rem); right: auto;
  }
}

/* Quatre cartes : 2 x 2 plutot que 3 + 1, qui laisse une carte orpheline. */
@media (min-width: 52rem) {
  .grille-cartes.grille-paires { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------- inserts */
/* Bande large de 1090 x 280, en pleine largeur du site.
   Deux images par emplacement : le noir et blanc au repos, la couleur au
   survol. Les deux sont superposees et on fait varier l'opacite — pas de
   filtre CSS, pour qu'Aurelie garde la main sur ses deux versions. */

.insert {
  position: relative;
  width: 100%; aspect-ratio: 1090 / 280;
  margin: 2.75rem 0; border-radius: 4px; overflow: hidden;
}
.insert img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.insert-survol .insert-couleur { opacity: 0; transition: opacity .45s ease; }
.insert-survol:hover .insert-couleur,
.insert-survol:focus-within .insert-couleur { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .insert-survol .insert-couleur { transition: none; }
}

/* Un ecran tactile n'a pas de survol : la couleur s'y revele au toucher. Un
   appui sur l'image la montre, un second la retire — les deux versions servent
   donc sur telephone comme sur grand ecran. C'est le script de base.html qui
   pose la classe ; sans lui, le noir et blanc reste seul et rien n'est casse. */
@media (hover: none) {
  .insert-survol.insert-touche .insert-couleur { opacity: 1; }
  /* De quoi comprendre que l'image repond au doigt. */
  .insert-survol { cursor: pointer; }
}

/* Emplacement encore vide : visible pour le reperage, discret. */
.insert-attente {
  display: grid; place-items: center;
  border: 1px dashed var(--gris-clair); background: var(--fond-doux);
}
.insert-attente span {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: var(--t-s); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris);
}
.insert-attente span code {
  display: block; margin-top: .4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-xs); letter-spacing: 0; text-transform: none;
  color: var(--rouge);
}

/* Un encart image pose au milieu d'un texte (bloc « ::: image »), la ou une
   citation se tenait. Il respire plus qu'un insert de tete de page : c'est une
   respiration dans la lecture, pas une banniere. */
.insert-encart { margin: 3.5rem 0; }

/* Deux blocs de texte cote a cote (bloc « ::: colonnes »).
   Pleine largeur, typographie inchangee : ce sont des textes a lire, pas des
   cartes. Une seule colonne sous 52rem. */
.grille-colonnes { grid-template-columns: 1fr; gap: 2.5rem; margin: 2.5rem 0; }
@media (min-width: 52rem) {
  .grille-colonnes { grid-template-columns: repeat(2, 1fr); }
}
.grille-colonnes .colonne > h2 { margin-top: 0; }
.grille-colonnes .colonne > *:last-child { margin-bottom: 0; }

/* Quelques lignes serrees en gros caracteres, suivies d'une respiration.
   Bloc « ::: accroche ». Ecrites en titres separes, elles heritaient chacune
   de la marge d'un titre et s'espaçaient comme des sections. */
.accroche-large {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-weight: 700; font-size: var(--t-section);
  line-height: 1.2; text-wrap: balance;
  margin: 1.5rem 0 4rem;
}

/* ------------------------------------------------ dates d'un stage */
/* AF2 / TR2 — lues dans donnees/stages.json. Entre deux sessions, la page
   annonce « Dates à venir » : c'est un etat normal, pas une page cassee. */

.dates {
  margin: 2.75rem 0 .5rem; padding: 1.5rem 1.75rem;
  border: 1px solid var(--cadre); border-left: 3px solid var(--rouge);
  border-radius: 4px; background: var(--fond-doux);
}
.dates .baseline { margin-bottom: .6rem; }
.dates-ligne {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-weight: 700; font-size: var(--t-l); line-height: 1.3; margin: 0;
}
.dates-lieu { font-size: var(--t-s); color: var(--gris); margin: .5rem 0 0; }

/* ------------------------------------------- axes de travail, sur une ligne */
/* AF5 / TR5 — ecrits en titre, ils heritaient de la colonne de lecture et se
   cassaient en trois. Ici la ligne prend la largeur du site. Elle ne se remet
   en colonne que sur telephone, ou aucune police ne la tiendrait sur un rang. */

.axes {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: .4rem 1rem; margin: 2rem 0 3rem;
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-weight: 700; font-size: var(--t-m);
  text-transform: uppercase; letter-spacing: .06em;
}
.axes span + span::before {
  content: "·"; color: var(--rouge); margin-right: 1rem;
}
@media (max-width: 40rem) {
  .axes { flex-direction: column; align-items: center; gap: .35rem; text-align: center; }
  .axes span + span::before { content: none; }
}

/* -------------------------------------------------- PDF dans la page */
/* AF4 — `<object>` affiche la visionneuse du navigateur quand il en a une.
   Sur telephone, aucun n'en a : le cadre est retire et c'est le lien qui sert.
   Le lien est donc toujours la, sous le cadre, jamais cache derriere. */

.pdf { margin: 2rem 0 3rem; }
.pdf object {
  display: block; width: 100%; height: min(78vh, 44rem);
  border: 1px solid var(--cadre); border-radius: 4px;
  background: var(--fond-doux);
}
.pdf-lien {
  margin: 1rem 0 0; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
}
.pdf-lien span {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: var(--t-s); color: var(--gris);
}
@media (max-width: 52rem) { .pdf object { display: none; } }

/* ------------------------------------- les images, sur un telephone */
/* Bord a bord. Les gouttieres du site — 1,25 rem de chaque cote — sont
   annulees par une marge negative EXACTE. Pas de `100vw` : il compte la barre
   de defilement et fait deborder la page sur le cote. */

@media (max-width: 40rem) {
  .insert,
  .couverture,
  .lecture p > img:only-child,
  .lecture > img {
    width: calc(100% + 2.5rem);
    max-width: none;
    margin-inline: -1.25rem;
    border-radius: 0;
  }
  /* La vignette d'une carte reste dans sa carte : c'est le cadre qui la tient. */
  .carte .vignette img { width: 100%; margin-inline: 0; }
}

/* Une bande de 1090 × 280 qui porte du texte devient illisible sur un
   telephone : l'image y tombe au tiers de sa taille. Deposer une version
   CARREE a cote — `<nom>-nb-mobile.jpg` — suffit : le generateur pose alors
   la classe `insert-mobile`, et le navigateur sert la bonne image. */
.insert-carre { aspect-ratio: 1 / 1; }

/* Les liens personnels, sous une biographie. Icone ET mot : le logo Patreon se
   reconnait seul, un globe ne dit rien de precis. Des pastilles plutot que des
   liens en ligne — on doit voir qu'on peut cliquer sans avoir a le deviner. */
.suivre {
  list-style: none; padding: 0;
  margin: 1.25rem 0 2.25rem;
  display: flex; flex-wrap: wrap; gap: .55rem .7rem;
}
.suivre a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .9rem;
  border: 1px solid var(--gris-clair); border-radius: 999px;
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: var(--t-s); color: var(--gris); text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.suivre a:hover, .suivre a:focus-visible { border-color: var(--rouge); color: var(--rouge); }
.suivre .icone { flex: 0 0 auto; width: 20px; height: 20px; display: block; }

/* Les memes icones dans la colonne « Nous suivre » du pied de page, un cran
   plus petites : elles accompagnent une ligne de texte, elles ne la portent
   pas. Meme esthetique, meme fichiers. */
.pied .grille .avec-icone {
  display: inline-flex; align-items: center; gap: .45rem;
}
.pied .grille .icone { flex: 0 0 auto; width: 18px; height: 18px; display: block; }

/* Le credit d'une photo, pose juste sous elle. Fin et gris : il doit se lire
   quand on le cherche, et s'effacer le reste du temps. Pas de capitales ni
   d'interlettrage — ce n'est pas un surtitre, c'est une mention. */
.insert-credit {
  margin: .55rem 0 0;
  font-size: var(--t-xs); font-weight: 400;
  color: var(--gris);
}

/* Le duo n'impose AUCUN format : c'est l'image fournie qui donne sa hauteur au
   bloc, et elle n'est donc jamais recoupee. La couche du dessous reste dans le
   flux, celle du dessus se pose par-dessus. */
.insert-libre {
  aspect-ratio: auto;
  /* Le bloc epouse l'image au lieu de remplir la colonne : sans quoi une
     illustration en hauteur ecrase le texte qu'elle accompagne. */
  width: fit-content; max-width: 100%; margin-inline: auto;
}
.insert-libre .insert-fond {
  position: static; width: auto; height: auto;
  max-width: 100%; max-height: 30rem;
}
/* Sur telephone, l'image reprend toute la largeur : le plafond de hauteur n'a
   plus lieu d'etre, et il decalerait la couche couleur posee par-dessus. */
@media (max-width: 40rem) {
  /* Bord a bord comme les autres images, et le plafond de hauteur saute : il
     decalerait la couche couleur posee par-dessus. */
  .insert-libre { width: calc(100% + 2.5rem); max-width: none; margin-inline: -1.25rem; }
  .insert-libre .insert-fond { width: 100%; max-height: none; }
}
@media (max-width: 40rem) {
  .insert-mobile { aspect-ratio: 1 / 1; }
}

/* ------------------------------- une image carree et un texte cote a cote */
/* Bloc « ::: duo <nom> ». L'autre reponse au texte illisible : ici le texte
   RESTE du texte. Il grossit avec les reglages du telephone, se selectionne,
   se lit a la voix haute, et se retrouve dans une recherche — ce qu'une image
   de citation ne fera jamais.
   Sous 46 rem, l'image repasse au-dessus du texte et prend toute la largeur. */

.duo {
  display: grid; grid-template-columns: 1fr;
  gap: 2rem; align-items: center; margin: 3.5rem 0;
}
@media (min-width: 46rem) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
  /* « ::: duo <nom> droite » passe l'image du cote droit. Sur telephone elle
     revient toujours en tete : l'ordre de lecture prime sur la mise en page. */
  .duo-droite .duo-image { order: 2; }
}
.duo .insert { margin: 0; }
.duo-texte > :first-child { margin-top: 0; }
.duo-texte > :last-child  { margin-bottom: 0; }
.duo-texte h3 { margin-top: 0; }