/* Innovation en Éducation, le blog : feuille de style.
 *
 * Intégration du design de Claude Design (design/*.dc.html, design/tokens.css).
 * Mobile d'abord ; trois points de rupture :
 *   640 px   les cartes passent de la ligne (vignette à gauche) à la carte en colonne
 *   1024 px  en-tête complet : champ de recherche, menu des thématiques
 *   1120 px  colonne latérale de l'article (encart du numéro du moment)
 *
 * Aucun style en ligne dans le HTML : la CSP les refuse. Seul le bloc <style nonce>
 * de mise-en-page.php surcharge les jetons --numero-* (couche 2).
 */

/* ── Polices auto-hébergées (licence OFL, voir assets/polices/) ───────────── */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url('polices/archivo-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; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url('polices/archivo-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('polices/mulish-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; }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('polices/mulish-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Mulish'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('polices/mulish-italique-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; }
@font-face { font-family: 'Mulish'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('polices/mulish-italique-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── Jetons (repris de design/tokens.css) ─────────────────────────────────── */
:root {
  /* Couche 1 : socle */
  --fond: #FFFCF5;
  --papier: #FFFFFF;
  --fond-2: #FBF5E9;
  --encre: #111C33;
  --encre-douce: #5D6478;
  --filet: #EDE4D3;
  --filet-fort: #CFC6B4;
  --marque: #152A89;
  --marque-touche: #0A1650;
  --surligne: #FAE53F;
  --surligne-touche: #C9AE00;

  /* Couche 2 : numéro en vente (surchargée par le serveur) */
  --numero-fond: #152A89;
  --numero-texte: #FFFFFF;
  --numero-cta: #FAE53F;
  --numero-cta-texte: #111C33;

  /* Couche 3 : catégories (aplat, texte sur l'aplat, encre sur crème) */
  --cat-app: #09C5D1;   --cat-app-texte: #111C33;   --cat-app-encre: #066F76;
  --cat-ped: #95B941;   --cat-ped-texte: #111C33;   --cat-ped-encre: #5C7524;
  --cat-par: #ED7168;   --cat-par-texte: #111C33;   --cat-par-encre: #C24E45;
  --cat-ado: #DF7600;   --cat-ado-texte: #111C33;   --cat-ado-encre: #B15E00;
  --cat-emo: #A898D6;   --cat-emo-texte: #111C33;   --cat-emo-encre: #7361A6;
  --cat-ecr: #E4B100;   --cat-ecr-texte: #111C33;   --cat-ecr-encre: #8A6B00;
  --cat-corps: #62C3A0; --cat-corps-texte: #111C33; --cat-corps-encre: #016B51;
  --cat-atyp: #E46FB0;  --cat-atyp-texte: #111C33;  --cat-atyp-encre: #B03A7F;
  --cat-rel: #5B9BE6;   --cat-rel-texte: #111C33;   --cat-rel-encre: #2F6DB8;

  /* Typographie */
  --police-titre: 'Archivo', system-ui, sans-serif;
  --police-texte: 'Mulish', system-ui, sans-serif;
  --corps: 18px;
  --corps-interligne: 1.65;
  --mesure: 68ch;

  /* Rayons, ombres, espacements */
  --rayon-s: 12px;
  --rayon: 20px;
  --rayon-l: 28px;
  --ombre-carte: 0 1px 2px rgba(17,28,51,.05), 0 20px 44px -24px rgba(21,42,137,.30);
  --ombre-carte-survol: 0 2px 4px rgba(17,28,51,.06), 0 28px 56px -24px rgba(21,42,137,.38);
  --ombre-couv: 0 2px 4px rgba(17,28,51,.14), 0 24px 40px -16px rgba(17,28,51,.50);
  --conteneur: 1240px;
  --gouttiere: clamp(20px, 4vw, 40px);

  /* Couleur de la catégorie courante (posée par .cat-*) */
  --cat: var(--fond-2);
  --cat-texte: var(--encre);
  --cat-encre: var(--marque);
}
.cat-app   { --cat: var(--cat-app);   --cat-texte: var(--cat-app-texte);   --cat-encre: var(--cat-app-encre); }
.cat-ped   { --cat: var(--cat-ped);   --cat-texte: var(--cat-ped-texte);   --cat-encre: var(--cat-ped-encre); }
.cat-par   { --cat: var(--cat-par);   --cat-texte: var(--cat-par-texte);   --cat-encre: var(--cat-par-encre); }
.cat-ado   { --cat: var(--cat-ado);   --cat-texte: var(--cat-ado-texte);   --cat-encre: var(--cat-ado-encre); }
.cat-emo   { --cat: var(--cat-emo);   --cat-texte: var(--cat-emo-texte);   --cat-encre: var(--cat-emo-encre); }
.cat-ecr   { --cat: var(--cat-ecr);   --cat-texte: var(--cat-ecr-texte);   --cat-encre: var(--cat-ecr-encre); }
.cat-corps { --cat: var(--cat-corps); --cat-texte: var(--cat-corps-texte); --cat-encre: var(--cat-corps-encre); }
.cat-atyp  { --cat: var(--cat-atyp);  --cat-texte: var(--cat-atyp-texte);  --cat-encre: var(--cat-atyp-encre); }
.cat-rel   { --cat: var(--cat-rel);   --cat-texte: var(--cat-rel-texte);   --cat-encre: var(--cat-rel-encre); }

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 400 16px/1.55 var(--police-texte);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--marque); }
a:hover { color: var(--marque-touche); }
:focus-visible { outline: 3px solid var(--marque); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-family: var(--police-titre); letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
mark { background: var(--surligne); color: var(--encre); padding: 0 2px; border-radius: 2px; }
svg { flex: none; }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement {
  position: absolute; left: 12px; top: -80px; z-index: 50; padding: 12px 18px; border-radius: 999px;
  background: var(--marque); color: #fff; font-weight: 800; text-decoration: none;
}
.evitement:focus { top: 12px; color: #fff; }
.conteneur { max-width: var(--conteneur); margin: 0 auto; padding: 0 var(--gouttiere); }
.surligne { background: linear-gradient(transparent 62%, var(--surligne) 62%); padding: 0 4px; }
.surligne-plein { background: var(--surligne); padding: 0 4px; }

/* Étiquette : petites capitales espacées, précédées d'un court trait */
.etiquette {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 12px/1.2 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce);
}
.etiquette--trait::before { content: ''; width: 26px; height: 3px; background: currentColor; border-radius: 2px; flex: none; }
.etiquette--marque { color: var(--marque); }

.titre-section { margin: 10px 0 28px; font-weight: 900; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; }

/* ── Boutons « touche » ───────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  min-height: 52px; padding: 14px 26px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 16px/1.1 var(--police-texte); text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(3px); }
.bouton--jaune { background: var(--surligne); color: var(--encre); box-shadow: 0 5px 0 var(--surligne-touche); }
.bouton--jaune:hover { color: var(--encre); box-shadow: 0 7px 0 var(--surligne-touche); }
.bouton--jaune:active { box-shadow: 0 1px 0 var(--surligne-touche); }
.bouton--marine { background: var(--marque); color: #fff; box-shadow: 0 5px 0 var(--marque-touche); }
.bouton--marine:hover { color: #fff; box-shadow: 0 7px 0 var(--marque-touche); }
.bouton--marine:active { box-shadow: 0 1px 0 var(--marque-touche); }
.bouton--contour { background: var(--papier); color: var(--marque); border: 2px solid var(--marque); box-shadow: 0 5px 0 var(--marque); }
.bouton--contour:hover { color: var(--marque); box-shadow: 0 7px 0 var(--marque); }
.bouton--contour:active { box-shadow: 0 1px 0 var(--marque); }
.bouton--petit { min-height: 44px; padding: 0 16px; font-size: 14px; box-shadow: 0 3px 0 var(--surligne-touche); }
.bouton--grand { min-height: 56px; font-size: 18px; }

/* ── Pastille de catégorie, mots-clés, puces ──────────────────────────────── */
.pastille {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px;
  background: var(--cat); color: var(--cat-texte); text-decoration: none;
  font: 800 12px/1.2 var(--police-texte); letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(-3deg);
}
a.pastille:hover { color: var(--cat-texte); filter: brightness(1.04); }
.pastille--plate { transform: none; }
.pastille--petite { padding: 4px 9px; font-size: 11px; letter-spacing: .12em; }
.pastille--grande { min-height: 44px; padding: 0 16px; font-size: 13px; letter-spacing: .1em; transform: none; }
.format {
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 12px/1.2 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce);
}
.format::before { content: ''; width: 20px; height: 2px; background: currentColor; flex: none; }

.puces { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.puce {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--papier); border: 1.5px solid var(--filet-fort); color: var(--encre); text-decoration: none;
  font: 700 15px/1.1 var(--police-texte);
}
a.puce:hover { border-color: var(--marque); color: var(--marque); }
.puce-nombre { font-weight: 800; color: var(--encre-douce); }
.puce--active, .puce[aria-current] { background: var(--encre); border-color: var(--encre); color: #fff; }
.puce--active .puce-nombre, .puce[aria-current] .puce-nombre { color: #fff; }
a.puce[aria-current]:hover { color: #fff; }
.puce--jaune { background: var(--surligne); border-color: var(--surligne); font-weight: 800; }
.puce-point { width: 10px; height: 10px; border-radius: 3px; background: var(--cat); flex: none; }
.bloc-puces { display: flex; flex-direction: column; gap: 12px; }

/* ── En-tête ──────────────────────────────────────────────────────────────── */
.entete { position: relative; z-index: 20; background: var(--fond); border-bottom: 1px solid var(--filet); }
.entete-barre { display: flex; align-items: center; gap: 6px; height: 64px; padding: 10px 12px; }
.logo { display: flex; align-items: center; gap: 6px; text-decoration: none; flex: none; }
.logo img { width: 70px; height: 40px; }
.logo-badge {
  font: 800 10px/1 var(--police-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--marque);
  border: 1.5px solid var(--marque); padding: 4px 6px; border-radius: 999px; transform: rotate(-3deg);
}
.logo-badge-long { display: none; }
.entete-recherche, .entete-magazine, .entete-nav { display: none; }
.entete-abonne { margin-left: 4px; }
.entete-outils { margin-left: auto; display: flex; align-items: center; gap: 2px; }

/* Menus mobiles : <details>, sans JavaScript */
.deroulant > summary {
  list-style: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  color: var(--encre); border-radius: 12px; cursor: pointer;
}
.deroulant > summary::-webkit-details-marker { display: none; }
.deroulant .icone-fermer { display: none; }
.deroulant[open] .icone-ouvrir { display: none; }
.deroulant[open] .icone-fermer { display: block; }
.deroulant-panneau {
  position: absolute; left: 0; right: 0; top: 64px; background: var(--fond);
  box-shadow: 0 24px 40px -20px rgba(17,28,51,.35); border-top: 1px solid var(--filet);
}
.menu-mobile .deroulant-panneau { padding: 8px 0 24px; max-height: calc(100vh - 64px); overflow-y: auto; }
.menu-mobile-titre { display: block; padding: 14px 20px 6px; }
.menu-mobile-cat {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 20px; border-bottom: 1px solid var(--filet);
  font: 800 17px/1.2 var(--police-texte); color: var(--encre); text-decoration: none;
}
.menu-mobile-cat::after { content: '›'; margin-left: auto; color: var(--encre-douce); }
.menu-mobile-cat[aria-current] { background: var(--fond-2); }
.carre-cat { width: 14px; height: 14px; border-radius: 5px; background: var(--cat); transform: rotate(-8deg); flex: none; }
.menu-mobile-liens { display: flex; flex-direction: column; gap: 4px; padding: 14px 20px 0; }
.menu-mobile-liens a { display: inline-flex; align-items: center; min-height: 44px; font: 800 16px/1.2 var(--police-texte); }
.recherche-mobile .deroulant-panneau { padding: 12px 12px 22px; }

/* Champ de recherche (en-tête, page de recherche, 404) */
.champ {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 6px 0 16px;
  background: var(--papier); border: 2px solid var(--marque); border-radius: 999px; color: var(--encre);
}
.champ:focus-within { outline: 3px solid var(--marque); outline-offset: 3px; }
.champ input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--encre);
  font: 600 16px/1.2 var(--police-texte); padding: 10px 0;
}
.champ input::placeholder { color: var(--encre-douce); opacity: 1; }
.champ input::-webkit-search-cancel-button { cursor: pointer; }
.champ button {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--marque); color: #fff; font: 800 15px/1 var(--police-texte);
}
.champ button:focus-visible { outline: 3px solid var(--encre); }
.champ--grand { min-height: 64px; padding: 0 8px 0 22px; box-shadow: var(--ombre-carte); max-width: 720px; }
.champ--grand input { font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; }
.champ--grand button { min-height: 48px; padding: 0 22px; }
.champ--moyen { min-height: 58px; max-width: 520px; }

@media (min-width: 1024px) {
  .entete-barre { height: auto; padding: 18px var(--gouttiere) 6px; gap: 28px; max-width: var(--conteneur); margin: 0 auto; }
  .logo { gap: 12px; }
  .logo img { width: 98px; height: 56px; }
  .logo-badge { font-size: 12px; letter-spacing: .14em; border-width: 2px; padding: 6px 10px; }
  .logo-badge-court { display: none; }
  .logo-badge-long { display: inline; }
  .entete-outils, .menu-mobile { display: none; }
  .entete-recherche { display: block; flex: 1; max-width: 460px; margin-left: auto; }
  .entete-recherche .champ { border: 1.5px solid var(--filet-fort); min-height: 48px; }
  .entete-recherche .champ:focus-within { border-color: var(--marque); }
  .entete-recherche .champ input { font-size: 15px; }
  .entete-magazine { display: inline; font: 800 15px/1 var(--police-texte); text-decoration: none; white-space: nowrap; }
  .entete-magazine:hover { text-decoration: underline; }
  .entete-abonne { min-height: 46px; padding: 0 22px; font-size: 15px; box-shadow: 0 4px 0 var(--surligne-touche); margin: 0; }
  .entete-nav {
    display: flex; justify-content: space-between; gap: 4px; overflow-x: auto; scrollbar-width: none;
    max-width: var(--conteneur); margin: 0 auto; padding: 0 var(--gouttiere);
  }
  .entete-nav a {
    padding: 16px 2px; display: flex; flex-direction: column; gap: 8px; white-space: nowrap;
    font: 700 14px/1 var(--police-texte); color: var(--encre); text-decoration: none;
  }
  .entete-nav a::after { content: ''; height: 4px; width: 18px; border-radius: 3px; background: var(--cat); transition: width .2s; }
  .entete-nav a:hover { color: var(--marque); }
  .entete-nav a:hover::after { width: 36px; }
  .entete-nav a[aria-current] { font-weight: 900; }
  .entete-nav a[aria-current]::after { width: 100%; }
}

/* ── Fil d'Ariane ─────────────────────────────────────────────────────────── */
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; font: 600 14px/1.4 var(--police-texte); color: var(--encre-douce); }
.fil-ariane li { display: inline-flex; gap: 8px; min-width: 0; }
.fil-ariane li + li::before { content: '›'; }
.fil-ariane a { color: var(--encre-douce); }
.fil-ariane a:hover { color: var(--marque); }
.fil-ariane [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }

/* ── Cartes d'article ─────────────────────────────────────────────────────── */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.grille--etroite { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 640px) { .grille { gap: 24px; } }

.carte {
  position: relative; display: flex; gap: 16px; align-items: flex-start;
  background: var(--papier); border: 1px solid var(--filet); border-radius: 18px; box-shadow: var(--ombre-carte);
  padding: 16px; color: var(--encre); transition: box-shadow .2s, transform .2s;
}
.carte:hover { box-shadow: var(--ombre-carte-survol); transform: translateY(-2px); }
.carte:has(.carte-lien:focus-visible) { outline: 3px solid var(--marque); outline-offset: 3px; }
.carte-lien { color: inherit; text-decoration: none; }
.carte-lien:hover { color: inherit; }
.carte-lien:focus-visible { outline: none; }
.carte-lien::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.carte-bande { display: none; }
.carte-visuel {
  position: relative; width: 92px; height: 92px; flex: none; border-radius: 12px; overflow: hidden;
  background: var(--fond-2); display: flex; align-items: center; justify-content: center;
}
.carte-visuel .couv { width: 52px; border-radius: 4px; }
.carte-numero { display: none; }
.carte-corps { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.carte-etiquettes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.carte-etiquettes .pastille { padding: 4px 9px; font-size: 11px; letter-spacing: .12em; transform: none; }
.carte-etiquettes .format { display: none; }
.carte-titre { font-weight: 800; font-size: 17px; line-height: 1.25; letter-spacing: -0.01em; text-wrap: pretty; }
.carte-accroche { display: none; font: 400 15px/1.5 var(--police-texte); color: var(--encre-douce); text-wrap: pretty; }
.carte-communs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; list-style: none; font: 700 12px/1 var(--police-texte); color: var(--encre-douce); }
.carte-communs .mot { padding: 5px 9px; border-radius: 999px; background: var(--surligne); color: var(--encre); }
.carte-communs-intitule { display: none; }
.carte-pied { display: none; }
.carte-source { font: 700 13px/1.3 var(--police-texte); color: var(--encre-douce); }

/* Sous 640 px aussi, la carte se présente en colonne, image en grand au-dessus (Thomas, 2026-11-04) :
   image, thématique, titre, « Tiré du n°X », accroche. Le repère du numéro passe sous le titre. */
@media (max-width: 639px) {
  .carte { flex-direction: column; gap: 0; align-items: stretch; padding: 0; overflow: hidden; border-radius: var(--rayon); }
  .carte-bande { display: block; height: 6px; background: var(--cat); flex: none; }
  .carte-visuel { width: auto; height: auto; aspect-ratio: 16/10; border-radius: 0; }
  .carte-visuel .couv { width: 34%; border-radius: 6px; }
  .carte-visuel .couv-repli { width: 34%; padding: 8px; }
  .carte-corps { padding: 16px 18px 18px; gap: 10px; }
  .carte-etiquettes .pastille { padding: 5px 10px; font-size: 12px; letter-spacing: .14em; transform: rotate(-3deg); }
  .carte-titre { font-size: 20px; line-height: 1.22; letter-spacing: -0.02em; text-wrap: balance; }
  .carte-accroche { display: block; }
}

@media (min-width: 640px) {
  .carte { flex-direction: column; gap: 0; align-items: stretch; padding: 0; overflow: hidden; border-radius: var(--rayon); height: 100%; }
  .carte-bande { display: block; height: 6px; background: var(--cat); flex: none; }
  .carte-visuel { width: auto; height: auto; aspect-ratio: 16/10; border-radius: 0; }
  .carte-visuel .couv { width: 34%; border-radius: 6px; }
  .carte-numero {
    display: inline-block; position: absolute; top: 14px; left: 14px; transform: rotate(-4deg);
    background: var(--surligne); color: var(--encre); font: 800 13px/1 var(--police-texte);
    padding: 8px 12px; border-radius: 999px; box-shadow: 0 6px 14px -6px rgba(17,28,51,.45);
  }
  .carte-corps { padding: 20px 22px 22px; gap: 12px; }
  .carte-etiquettes .pastille { padding: 5px 10px; font-size: 12px; letter-spacing: .14em; transform: rotate(-3deg); }
  .carte-etiquettes .format { display: inline-flex; }
  .carte-etiquettes .format::before { width: 14px; }
  .carte-titre { font-size: 21px; line-height: 1.22; letter-spacing: -0.02em; text-wrap: balance; }
  .carte-accroche { display: block; }
  .carte-communs { font-size: 13px; }
  .carte-communs .mot { padding: 6px 10px; }
  .carte-communs-intitule { display: inline; }
  .carte-pied {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 12px;
    border-top: 1px solid var(--filet); font: 700 13px/1.3 var(--police-texte); color: var(--encre-douce);
  }
  .carte-source { display: none; }
}

/* Carte « une » : l'article du jour */
.carte--une { flex-direction: column; gap: 0; padding: 0; overflow: hidden; border-radius: var(--rayon-l); align-items: stretch; }
.carte--une .carte-bande { display: none; }
.carte--une .carte-visuel { width: auto; height: auto; min-height: 240px; border-radius: 0; background: var(--cat); }
.carte--une .carte-visuel .couv { width: 38%; max-width: 200px; border-radius: 8px; }
.carte--une .carte-numero {
  display: inline-block; position: absolute; top: 22px; left: 22px; transform: rotate(-4deg);
  background: var(--surligne); color: var(--encre); font: 800 14px/1 var(--police-texte);
  padding: 9px 14px; border-radius: 999px; box-shadow: 0 6px 14px -6px rgba(17,28,51,.45);
}
.carte--une .carte-corps { padding: 24px; gap: 16px; justify-content: center; }
.carte--une .carte-etiquettes .pastille { padding: 6px 12px; font-size: 12px; letter-spacing: .14em; transform: rotate(-3deg); }
.carte--une .carte-etiquettes .format { display: inline-flex; }
.carte--une .carte-titre { font-weight: 900; font-size: clamp(28px, 3.1vw, 44px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.carte--une .carte-accroche { display: block; font-size: 18px; line-height: 1.55; }
.carte--une .carte-pied { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; border: 0; font: 700 14px/1.3 var(--police-texte); color: var(--encre-douce); justify-content: flex-start; }
.carte--une .carte-source { display: none; }
.carte-lire { font: 800 16px/1 var(--police-texte); color: var(--marque); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 640px) {
  .carte--une { flex-direction: row; flex-wrap: wrap; }
  .carte--une .carte-visuel { flex: 1 1 300px; min-height: 340px; aspect-ratio: auto; }
  .carte--une .carte-corps { flex: 1 1 360px; padding: clamp(24px, 3.4vw, 48px); }
}

/* Couverture présentée comme un objet ; repli sans couverture */
.couv { border-radius: 6px; box-shadow: var(--ombre-couv); transform: rotate(2deg); aspect-ratio: 3/3.9; object-fit: cover; background: var(--fond-2); }
.couv-repli {
  display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 3/3.9;
  border-radius: 6px; box-shadow: var(--ombre-couv); transform: rotate(2deg);
  background: var(--marque); color: #fff; padding: 8%;
}
.couv-repli img { width: 92%; }
.couv-repli span { font: 900 16px/1 var(--police-titre); }
.carte-visuel .couv-repli { width: 52px; padding: 5px; }
.carte-visuel .couv-repli span { font-size: 11px; }
@media (min-width: 640px) {
  .carte-visuel .couv-repli { width: 34%; padding: 8px; }
  .carte-visuel .couv-repli span { font-size: 16px; }
}
.carte--une .carte-visuel .couv-repli { width: 38%; max-width: 200px; padding: 12px; }
.carte--une .carte-visuel .couv-repli span { font-size: 22px; }

/* Illustration d'article (le magazine ouvert sur ses pages) : elle remplit la zone image de
   la carte, recadrée au centre. 1200 x 630 pour le 16/10 des listes, recadrage carré
   (illustrations/carre/) pour la vignette mobile et la carte « une » sur grand écran. */
.carte-illustration { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-une {
  margin: 28px 0 0; aspect-ratio: 1200 / 630; overflow: hidden;
  border-radius: var(--rayon); background: var(--fond-2); box-shadow: var(--ombre-carte);
}
.article-une img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Sections de page ─────────────────────────────────────────────────────── */
.page-section { padding-top: clamp(56px, 7vw, 104px); }
.vague { display: block; width: 100%; height: 56px; }
.bande { background: var(--fond-2); padding: clamp(24px, 3vw, 40px) 0 clamp(56px, 7vw, 96px); }
.vague--haut { margin-top: clamp(56px, 7vw, 104px); margin-bottom: -2px; }
.vague--bas { background: var(--fond-2); margin-top: -2px; }
.vague-fond { fill: var(--fond); }
.vague-bande { fill: var(--fond-2); }
.bas-de-page { height: clamp(56px, 7vw, 96px); }
.offres { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); padding-top: clamp(32px, 4vw, 56px); }

/* Accueil */
.accueil-tete { padding-top: clamp(28px, 4vw, 56px); }
.accueil-tete h1 { max-width: 20ch; font-weight: 900; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.03; }
.chapeau { margin-top: 18px; max-width: 58ch; font: 500 clamp(17px, 1.5vw, 20px)/1.55 var(--police-texte); color: var(--encre-douce); text-wrap: pretty; }
.du-jour { margin-top: clamp(28px, 3.5vw, 48px); display: flex; flex-direction: column; gap: 14px; }
.liste-tete { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.liste-tete .titre-section { margin-bottom: 0; }
.accueil-mots { margin-top: 32px; }

/* Tuiles des thématiques */
.tuile {
  position: relative; display: flex; flex-direction: column; overflow: hidden; color: var(--encre); text-decoration: none;
  background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: var(--ombre-carte);
  transition: transform .2s, box-shadow .2s;
}
.tuile:hover { color: var(--encre); transform: translateY(-3px) rotate(-0.4deg); box-shadow: var(--ombre-carte-survol); }
.tuile-aplat {
  position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 96px;
  padding: 22px 22px 18px; background: var(--cat); color: var(--cat-texte);
}
.tuile-aplat::before {
  content: ''; position: absolute; right: -18px; top: -26px; width: 110px; height: 110px; border-radius: 30px;
  background: rgba(255,255,255,.22); transform: rotate(18deg);
}
.tuile-nom { position: relative; font: 900 26px/1.08 var(--police-titre); letter-spacing: -0.02em; text-wrap: balance; }
.tuile-corps { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 18px 22px 20px; }
.tuile-texte { font: 400 15px/1.5 var(--police-texte); color: var(--encre-douce); text-wrap: pretty; }
.thematiques { list-style: none; }
.thematiques li { display: flex; }
.thematiques .tuile { flex: 1; }
main:focus { outline: none; }
.tuile-lien { margin-top: auto; font: 800 15px/1 var(--police-texte); color: var(--marque); }
@media (min-width: 640px) { .tuile-aplat { min-height: 120px; } }

.tuiles-compactes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; list-style: none; }
.tuile-compacte {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 20px;
  background: var(--papier); border: 1px solid var(--filet); border-radius: 16px;
  font: 800 16px/1.25 var(--police-texte); color: var(--encre); text-decoration: none;
}
.tuile-compacte:hover { border-color: var(--marque); color: var(--encre); }
.tuile-compacte .carre-cat { width: 18px; height: 18px; border-radius: 6px; }
.tuile-compacte::after { content: '›'; margin-left: auto; color: var(--encre-douce); }

/* Filtre « À la maison / En classe » */
.filtre-lieu { display: inline-flex; padding: 4px; gap: 2px; background: var(--papier); border: 1.5px solid var(--filet-fort); border-radius: 999px; list-style: none; max-width: 100%; }
.filtre-lieu a {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; white-space: nowrap;
  font: 800 14px/1 var(--police-texte); color: var(--encre); text-decoration: none;
}
.filtre-lieu a:hover { background: var(--fond-2); color: var(--encre); }
.filtre-lieu a[aria-current] { background: var(--marque); color: #fff; }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 40px; }
.pagination-pages { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.pagination-pages a, .pagination-pages span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px;
  border-radius: 999px; font: 800 15px/1 var(--police-texte); text-decoration: none;
}
.pagination-pages a { color: var(--marque); border: 1.5px solid var(--filet-fort); background: var(--papier); }
.pagination-pages a:hover { border-color: var(--marque); }
.pagination-pages [aria-current] { background: var(--marque); color: #fff; }
.pagination-pages .pagination-ellipse { border: 0; background: none; min-width: 24px; color: var(--encre-douce); }
@media (max-width: 639px) { .pagination-loin { display: none; } }
.pagination-mention { width: 100%; text-align: center; font: 600 14px/1.4 var(--police-texte); color: var(--encre-douce); }

/* ── Listes : catégorie, mot-clé, recherche ───────────────────────────────── */
.liste-page { padding-top: clamp(20px, 3vw, 40px); }
.bandeau-cat {
  position: relative; overflow: hidden; margin-top: 20px; display: flex; align-items: flex-end; min-height: 180px;
  padding: clamp(32px, 5vw, 72px) clamp(24px, 4vw, 56px); border-radius: var(--rayon-l);
  background: var(--cat); color: var(--cat-texte);
}
.bandeau-cat::before, .bandeau-cat::after { content: ''; position: absolute; }
.bandeau-cat::before { right: 6%; top: -40px; width: 200px; height: 200px; border-radius: 48px; background: rgba(255,255,255,.2); transform: rotate(16deg); }
.bandeau-cat::after { right: 20%; bottom: -60px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.14); }
.bandeau-cat h1 { position: relative; font-weight: 900; font-size: clamp(40px, 5.6vw, 80px); line-height: 1; }
@media (min-width: 640px) { .bandeau-cat { min-height: 260px; } }
.liste-phrase { margin-top: 24px; max-width: 60ch; font: 500 clamp(17px, 1.5vw, 20px)/1.55 var(--police-texte); color: var(--encre-douce); text-wrap: pretty; }
.liste-entete { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.liste-entete h1 { font-weight: 900; font-size: clamp(40px, 5.6vw, 80px); line-height: 1.02; }
.liste-entete .surligne { background: linear-gradient(transparent 64%, var(--surligne) 64%); padding: 0 6px; }
.liste-entete .pastille { align-self: flex-start; }
.liste-puces { margin-top: 24px; }
.liste-barre {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--filet);
  display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between;
}
.liste-compte { font: 700 15px/1.4 var(--police-texte); color: var(--encre-douce); }
.liste-compte strong { color: var(--encre); }
.liste-grille { margin-top: 24px; }
.liste-vide { margin-top: 24px; font: 600 17px/1.5 var(--police-texte); color: var(--encre-douce); }
.recherche-nombre { margin-top: 4px; font: 800 clamp(22px, 2.2vw, 28px)/1.2 var(--police-titre); letter-spacing: -0.01em; }
.carton {
  margin-top: 28px; display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 4vw, 56px);
  background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon-l); box-shadow: var(--ombre-carte);
}
.carton h2 { font-weight: 900; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; }
.carton p { max-width: 56ch; font: 400 17px/1.6 var(--police-texte); color: var(--encre-douce); }
.titre-moyen { margin: 48px 0 20px; font-weight: 900; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; }

/* ── Article ──────────────────────────────────────────────────────────────── */
.article-page { padding-top: clamp(20px, 3vw, 40px); }
.article-colonnes { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; justify-content: space-between; }
.article { flex: 1 1 520px; max-width: 740px; min-width: 0; display: flex; flex-direction: column; }
.article-laterale { display: none; }
@media (min-width: 1120px) {
  .article-laterale { display: flex; flex-direction: column; gap: 20px; flex: 0 0 320px; position: sticky; top: 24px; }
  .encart-fin-article { display: none; }
  .encart-fin-article--toujours { display: block; }
}
/* Écran trop bas pour la colonne entière : elle défile avec l'article plutôt que d'être coupée. */
@media (min-width: 1120px) and (max-height: 799px) {
  .article-laterale { position: static; }
}
.article-etiquettes { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 24px; }
.article-etiquettes .pastille { padding: 7px 13px; }
.lieu {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid var(--filet-fort); font: 700 13px/1.2 var(--police-texte); color: var(--encre);
}
.article h1 { margin-top: 22px; font-weight: 900; font-size: clamp(34px, 4.3vw, 58px); line-height: 1.04; }
.article-chapo { margin-top: 22px; font: 500 clamp(19px, 1.6vw, 22px)/1.5 var(--police-texte); color: var(--encre-douce); text-wrap: pretty; }
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font: 700 14px/1.4 var(--police-texte); color: var(--encre-douce); }
.tire-du {
  margin-top: 28px; display: flex; gap: 18px; align-items: center; padding: 16px 20px;
  background: var(--fond-2); border: 1px solid var(--filet); border-radius: 18px; color: var(--encre); text-decoration: none;
}
.tire-du:hover { border-color: var(--filet-fort); color: var(--encre); }
.tire-du .couv, .tire-du .couv-repli { width: 52px; flex: none; }
.tire-du .couv-repli { padding: 5px; }
.tire-du .couv-repli span { font-size: 11px; }
.tire-du-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tire-du-titre { font: 800 17px/1.3 var(--police-titre); letter-spacing: -0.01em; }
.tire-du-voir { margin-left: auto; font: 800 14px/1 var(--police-texte); color: var(--marque); white-space: nowrap; }
@media (max-width: 479px) {
  .tire-du { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; row-gap: 8px; padding: 16px; }
  .tire-du .couv, .tire-du .couv-repli { grid-row: span 2; align-self: center; }
  .tire-du-voir { margin: 0; justify-self: start; }
}

/* Corps de l'article (HTML rendu à l'import) */
.prose { margin-top: 40px; display: flex; flex-direction: column; gap: 24px; max-width: var(--mesure); font: 400 var(--corps)/var(--corps-interligne) var(--police-texte); color: var(--encre); }
.prose > * { margin: 0; }
.prose p, .prose li { text-wrap: pretty; }
.prose h2 { margin-top: 16px; font-weight: 800; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; scroll-margin-top: 24px; }
.prose h3 { margin-top: 8px; font-weight: 800; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; scroll-margin-top: 24px; }
.prose ul, .prose ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 10px; }
.prose li::marker { color: var(--marque); font-weight: 800; }
.prose strong { font-weight: 800; }
.prose a { color: var(--marque); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prose a:hover { background: linear-gradient(transparent 58%, var(--surligne) 58%); color: var(--marque); }

/* Citation extraite du magazine */
.citation-magazine {
  position: relative; margin: 20px 0 !important; padding: 36px clamp(22px, 3vw, 40px) 26px;
  background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: var(--ombre-carte);
  transform: rotate(-0.6deg);
}
.citation-magazine:nth-of-type(even) { transform: rotate(0.5deg); }
.citation-magazine::before {
  content: '«'; position: absolute; top: -22px; left: 24px; width: 58px; height: 58px; padding-bottom: 8px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px; transform: rotate(-6deg);
  background: var(--surligne); color: var(--marque); font: 900 72px/1 var(--police-titre);
}
.citation-magazine blockquote { margin: 0; font: 800 clamp(21px, 1.9vw, 25px)/1.35 var(--police-titre); letter-spacing: -0.01em; text-wrap: pretty; }
.citation-magazine blockquote p { margin: 0; }
.citation-magazine figcaption { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; font: 600 15px/1.4 var(--police-texte); color: var(--encre-douce); }
.citation-magazine figcaption strong { color: var(--encre); font-weight: 800; }
.citation-source {
  display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 999px;
  background: var(--fond-2); border: 1px solid var(--filet); color: var(--encre);
  font: 800 12px/1 var(--police-texte); letter-spacing: .12em; text-transform: uppercase;
}

/* Encart « Pour en savoir plus » */
.savoir-plus { margin: 8px 0 !important; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; background: var(--fond-2); border-radius: 18px; }
.savoir-plus-notion { font: 800 21px/1.2 var(--police-titre); letter-spacing: -0.01em; }
.savoir-plus p { font: 400 16px/1.55 var(--police-texte); color: var(--encre-douce); }
.prose .savoir-plus-lien {
  margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--filet);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; color: var(--encre); text-decoration: none; font-weight: 400;
}
.prose .savoir-plus-lien:hover { background: none; }
.savoir-plus-lien .pastille { padding: 4px 9px; font-size: 11px; letter-spacing: .12em; transform: none; }
.savoir-plus-titre { flex: 1 1 220px; font: 700 16px/1.35 var(--police-texte); color: var(--marque); text-decoration: underline; text-underline-offset: 3px; }
.savoir-plus-fleche { font: 800 18px/1 var(--police-texte); color: var(--marque); }

/* Questions fréquentes (dessinées dans l'esprit de la FAQ des pages de vente) */
.faq { margin-top: 16px !important; display: flex; flex-direction: column; gap: 12px; }
.faq h2 { margin: 0 0 6px; }
.faq details { background: var(--papier); border: 1px solid var(--filet); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 22px -18px rgba(17,28,51,.5); }
.faq summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer;
  font: 800 18px/1.3 var(--police-titre); letter-spacing: -0.01em; color: var(--encre);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--marque); }
.faq summary:focus-visible { outline-offset: -3px; border-radius: 16px; }
.faq-plus {
  flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--marque); transition: transform .2s;
}
.faq-plus::before, .faq-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 3px; margin: -1.5px 0 0 -6px; border-radius: 2px; background: #fff; }
.faq-plus::after { transform: rotate(90deg); }
.faq details[open] .faq-plus { transform: rotate(45deg); }
.faq-reponse { padding: 0 22px 20px; display: flex; flex-direction: column; gap: 12px; font-size: 17px; color: var(--encre); }
@media (prefers-reduced-motion: reduce) { .faq-plus, .carte, .tuile, .bouton { transition: none; } }

/* Mots-clés de l'article */
.article-mots { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; padding-top: 28px; border-top: 1px solid var(--filet); }

/* Ce que vous trouverez dans le magazine */
.dans-le-magazine {
  margin-top: 48px; padding: clamp(24px, 3vw, 36px);
  background: var(--papier); border: 2px solid var(--encre); border-radius: var(--rayon); box-shadow: 0 6px 0 var(--encre);
}
.dans-le-magazine h2 { margin: 12px 0 20px; font-weight: 900; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; }
.dans-le-magazine h2 .surligne { background: linear-gradient(transparent 60%, var(--surligne) 60%); padding: 0 3px; }
.dans-le-magazine ol { list-style: none; display: flex; flex-direction: column; gap: 14px; counter-reset: point; }
.dans-le-magazine li { display: flex; gap: 14px; align-items: flex-start; font: 600 17px/1.45 var(--police-texte); counter-increment: point; }
.dans-le-magazine li::before { content: counter(point, decimal-leading-zero); flex: none; width: 34px; font: 900 22px/1 var(--police-titre); color: var(--marque); }
.dans-le-magazine strong { font-weight: 800; }

/* ── Bloc d'achat ─────────────────────────────────────────────────────────── */
.achat {
  margin-top: 28px; padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 20px;
  background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: var(--ombre-carte);
}
.achat-tete { display: flex; gap: 20px; align-items: center; }
.achat-tete .couv, .achat-tete .couv-repli { width: 76px; flex: none; border-radius: 8px; }
.achat-tete .couv-repli { padding: 7px; }
.achat-tete-texte { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.achat-titre { font: 900 22px/1.15 var(--police-titre); letter-spacing: -0.02em; text-wrap: balance; }
.achat-ligne { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.achat-ligne--filet { border-top: 1px solid var(--filet); padding-top: 20px; }
.achat-prix { display: flex; flex-direction: column; gap: 4px; }
.prix { font: 900 36px/1 var(--police-titre); letter-spacing: -0.02em; }
.prix del { font-size: 22px; font-weight: 800; color: var(--encre-douce); margin-right: 8px; }
.achat-note { font: 600 14px/1.4 var(--police-texte); color: var(--encre-douce); }
.achat-fermeture { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--filet); padding-top: 20px; }
.achat-fermeture-titre { font: 800 19px/1.3 var(--police-titre); }
.achat-fermeture p { font: 600 16px/1.5 var(--police-texte); color: var(--encre-douce); }
.achat-fermeture strong { color: var(--encre); }
.achat > .bouton--contour { align-self: flex-start; }
.drapeau {
  display: inline-flex; align-self: flex-start; padding: 7px 11px; border-radius: 999px; transform: rotate(-3deg);
  background: var(--surligne); color: var(--encre); font: 800 12px/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase;
}
.achat-papier { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--filet); padding-top: 18px; font: 600 15px/1.4 var(--police-texte); color: var(--encre-douce); }
.achat-papier::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--encre-douce); flex: none; }
.achat-numerique { background: var(--fond-2); border-radius: 16px; padding: 20px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.achat-numerique-texte { display: flex; flex-direction: column; gap: 6px; }
.achat-numerique-titre { font: 900 22px/1.2 var(--police-titre); letter-spacing: -0.02em; }

/* ── Colonne de l'article : le numéro à l'unité, puis l'abonnement ──────────── */
.achat-colonne, .abonnement-colonne { border-radius: var(--rayon); box-shadow: var(--ombre-carte); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.achat-colonne { background: var(--papier); border: 1px solid var(--filet); }
.achat-colonne-tete { display: flex; gap: 14px; align-items: center; }
.achat-colonne-tete .couv, .achat-colonne-tete .couv-repli { width: 64px; flex: none; border-radius: 6px; }
.achat-colonne-tete .couv-repli { padding: 6px; }
.achat-colonne-titre { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.achat-colonne-titre p { font: 900 18px/1.2 var(--police-titre); letter-spacing: -0.01em; text-wrap: balance; }
.achat-colonne-offre { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--filet); padding-top: 14px; }
.achat-colonne-offre--numerique { border-top: 0; background: var(--fond-2); border-radius: 14px; padding: 14px; }
.achat-colonne-ligne { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.achat-colonne-version { font: 800 14px/1.3 var(--police-texte); }
.achat-colonne-prix { font: 900 24px/1 var(--police-titre); letter-spacing: -0.02em; }
.achat-colonne-prix del { font-size: 16px; font-weight: 800; color: var(--encre-douce); }
.achat-colonne .bouton { width: 100%; justify-content: center; }
.achat-colonne .achat-note { font-size: 13px; }
.achat-colonne .achat-papier { padding-top: 14px; font-size: 14px; }
.abonnement-colonne { background: var(--marque); color: #fff; gap: 10px; }
.abonnement-colonne :focus-visible { outline-color: var(--surligne); }
.abonnement-colonne .etiquette { color: var(--surligne); }
.abonnement-colonne-titre { font: 900 19px/1.2 var(--police-titre); letter-spacing: -0.01em; }
.abonnement-colonne-titre em { font-style: normal; color: var(--surligne); }
.abonnement-colonne-prix { font: 700 15px/1.3 var(--police-texte); }
.abonnement-colonne-prix strong { font: 900 24px/1 var(--police-titre); }
.abonnement-colonne-prix del { color: rgba(255,255,255,.75); }
.abonnement-colonne-note { font: 600 13px/1.4 var(--police-texte); color: rgba(255,255,255,.85); }
.abonnement-colonne .bouton { margin-top: 4px; width: 100%; justify-content: center; }

/* ── Bloc abonnement ──────────────────────────────────────────────────────── */
.abonnement {
  position: relative; display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(28px, 4vw, 56px); border-radius: var(--rayon-l); background: var(--marque); color: #fff; box-shadow: var(--ombre-carte);
}
.abonnement :focus-visible { outline-color: var(--surligne); }
.abonnement-arguments { flex: 1 1 340px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.abonnement h2 { font-weight: 900; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; }
.abonnement h2 em { font-style: normal; color: var(--surligne); }
.coches { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.coches li { display: flex; gap: 12px; align-items: flex-start; font: 600 16px/1.45 var(--police-texte); }
.coches li::before {
  content: '✓'; flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--surligne); color: var(--encre); font: 900 13px/1 var(--police-texte);
}
.coches strong { font-weight: 800; }
.cadeau { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.1); font: 600 15px/1.45 var(--police-texte); }
.cadeau-drapeau { flex: none; padding: 7px 10px; border-radius: 999px; transform: rotate(-3deg); background: #fff; color: var(--marque); font: 900 12px/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; }
.abonnement-offre {
  flex: 0 1 340px; margin: 0 auto; padding: 28px; display: flex; flex-direction: column; gap: 14px;
  background: var(--papier); color: var(--encre); border-radius: var(--rayon); box-shadow: 0 30px 50px -24px rgba(0,0,0,.5);
}
.abonnement-offre :focus-visible { outline-color: var(--marque); }
.abonnement-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.abonnement-prix del { font: 800 24px/1 var(--police-titre); color: var(--encre-douce); }
.abonnement-prix strong { font: 900 52px/1 var(--police-titre); letter-spacing: -0.03em; }
.abonnement-prix--promo strong { background: linear-gradient(transparent 62%, var(--surligne) 62%); padding: 0 4px; }
.abonnement-prix span { font: 700 16px/1.3 var(--police-texte); color: var(--encre-douce); }
.code-promo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 700 14px/1.4 var(--police-texte); }
.code-promo code { font: 800 14px/1 var(--police-texte); letter-spacing: .08em; border: 2px dashed var(--marque); color: var(--marque); padding: 7px 10px; border-radius: 10px; }
.abonnement-reste { color: var(--marque); font-weight: 800; }
.abonnement-offre .bouton { margin-top: 4px; }

/* ── Encart « Le numéro du moment » (couche 2) ────────────────────────────── */
.numero-du-moment {
  display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: center; justify-content: center;
  padding: clamp(28px, 4vw, 56px); border-radius: var(--rayon-l); box-shadow: var(--ombre-carte);
  background: var(--numero-fond); color: var(--numero-texte);
}
.numero-du-moment :focus-visible { outline-color: var(--numero-texte); }
.numero-couv { position: relative; flex: none; width: clamp(170px, 18vw, 240px); margin: 8px 10px; transform: rotate(2deg); }
.numero-couv img { width: 100%; aspect-ratio: 769/1000; object-fit: cover; border-radius: 16px; box-shadow: 0 30px 50px -18px rgba(0,0,0,.55); }
.numero-badge {
  position: absolute; top: -12px; left: -18px; transform: rotate(-6deg); padding: 8px 13px; border-radius: 999px;
  background: var(--numero-cta); color: var(--numero-cta-texte); font: 800 13px/1 var(--police-texte);
  box-shadow: 0 8px 16px -8px rgba(0,0,0,.5);
}
.numero-texte { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.numero-texte .etiquette { color: inherit; }
.numero-du-moment h2 { font-weight: 900; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.05; }
.numero-sous-titre { font: 700 18px/1.35 var(--police-texte); }
.numero-phrase { font: 400 16px/1.55 var(--police-texte); max-width: 46ch; text-wrap: pretty; }
.numero-mention { font: 700 14px/1.4 var(--police-texte); }
.numero-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.bouton--numero { background: var(--numero-cta); color: var(--numero-cta-texte); box-shadow: 0 5px 0 rgba(17,28,51,.45); }
.bouton--numero:hover { color: var(--numero-cta-texte); box-shadow: 0 7px 0 rgba(17,28,51,.45); }
.bouton--blanc { background: #fff; color: var(--encre); box-shadow: 0 5px 0 rgba(17,28,51,.45); }
.bouton--blanc:hover { color: var(--encre); box-shadow: 0 7px 0 rgba(17,28,51,.45); }
.bouton--numero:active, .bouton--blanc:active { box-shadow: 0 1px 0 rgba(17,28,51,.45); }
.numero-du-moment--colonne { padding: 28px 24px; gap: 22px; }
.numero-du-moment--colonne .numero-couv { width: 150px; }
.numero-du-moment--colonne .numero-texte { flex-basis: 100%; }
.numero-du-moment--colonne h2 { font-size: 26px; }
.numero-du-moment--colonne .numero-phrase { display: none; }
.numero-du-moment--colonne .numero-boutons { flex-direction: column; }

/* ── Page d'un numéro ─────────────────────────────────────────────────────── */
.numero-tete { margin-top: clamp(28px, 4vw, 56px); display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 80px); align-items: center; }
.numero-tete-couv { flex: 0 1 380px; display: flex; justify-content: center; margin: 0 auto; }
.numero-tete-couv .numero-couv { width: 220px; margin: 0; }
.numero-tete-couv .numero-couv img, .numero-tete-couv .couv-repli { border-radius: 20px; box-shadow: 0 40px 80px -30px rgba(17,28,51,.55); aspect-ratio: 3/3.9; transform: none; }
.numero-tete-couv .couv-repli { padding: 24px; }
.numero-tete-couv .couv-repli span { font-size: 40px; }
.numero-tete-couv .numero-badge { background: var(--surligne); color: var(--encre); top: -14px; left: -20px; font-size: 14px; padding: 9px 14px; }
@media (min-width: 640px) { .numero-tete-couv .numero-couv { width: 320px; } }
.numero-tete-texte { flex: 1 1 420px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.numero-tete-texte h1 { font-weight: 900; font-size: clamp(36px, 4.8vw, 64px); line-height: 1.03; }
.numero-tete-texte .achat { margin-top: 8px; }

/* ── Page 404 ─────────────────────────────────────────────────────────────── */
.introuvable { padding-top: clamp(40px, 6vw, 96px); display: flex; flex-wrap: wrap-reverse; gap: clamp(40px, 6vw, 80px); align-items: center; }
.introuvable-texte { flex: 1 1 420px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.introuvable-texte h1 { font-weight: 900; font-size: clamp(36px, 4.8vw, 64px); line-height: 1.03; }
.introuvable-texte .chapeau { margin: 0; max-width: 48ch; }
.introuvable-retour { align-self: flex-start; margin-top: 4px; font: 800 16px/1 var(--police-texte); text-underline-offset: 4px; }
.pile { flex: 1 1 300px; display: flex; justify-content: center; }
.pile-cadre { position: relative; width: 260px; aspect-ratio: 1/1; }
.pile-cadre img { position: absolute; width: 52%; aspect-ratio: 3/3.9; object-fit: cover; border-radius: 14px; box-shadow: var(--ombre-couv); }
.pile-cadre img:nth-child(1) { left: 0; top: 10%; transform: rotate(-9deg); }
.pile-cadre img:nth-child(2) { right: 0; top: 6%; transform: rotate(8deg); }
.pile-cadre img:nth-child(3) { left: 24%; top: 0; transform: rotate(2deg); }
@media (min-width: 640px) { .pile-cadre { width: 400px; } }
.puces-cats { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }

/* ── Pied de page ─────────────────────────────────────────────────────────── */
.pied { position: relative; color: #fff; background: linear-gradient(to bottom, transparent 0 40px, var(--marque) 40px); }
.pied a { color: #fff; }
.pied a:hover { color: var(--surligne); }
.pied :focus-visible { outline-color: var(--surligne); }
.pied .vague { height: 48px; margin-bottom: -2px; position: relative; z-index: 1; }
.vague-marque { fill: var(--marque); }
.pied-haut { display: flex; flex-wrap: wrap; gap: 40px 56px; padding-top: 40px; padding-bottom: 32px; }
.pied-marque { flex: 1 1 260px; max-width: 340px; display: flex; flex-direction: column; gap: 16px; }
.pied-marque img { width: 170px; }
.pied-marque p { font: 400 15px/1.6 var(--police-texte); }
.pied-marque .bouton { align-self: flex-start; min-height: 46px; padding: 0 20px; font-size: 15px; box-shadow: 0 4px 0 var(--surligne-touche); }
.pied-marque .bouton:hover { color: var(--encre); }
.pied-nav { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; }
.pied-nav .etiquette { color: var(--surligne); margin-bottom: 6px; }
.pied-nav ul { list-style: none; display: flex; flex-direction: column; }
.pied-nav a { display: inline-flex; align-items: center; min-height: 32px; font: 600 15px/1.4 var(--police-texte); text-decoration: none; }
.pied-nav a:hover { text-decoration: underline; }
.pied-bas {
  display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 20px; padding-bottom: 28px;
  border-top: 1px solid rgba(255,255,255,.2); font: 600 13px/1.4 var(--police-texte);
}
.pied-bas ul { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; }