/*
Theme Name: Vous rankez vous ?
Theme URI: https://vousrankezvous.fr
Author: Vous rankez vous ?
Description: Thème bloc sur mesure du site pédagogique Vous rankez vous ? : trame en demi-teinte, panneaux blancs, Archivo condensé et Manrope. Tout le contenu se modifie dans l'éditeur de blocs.
Version: 1.0.5
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vousrankez
Tags: block-theme, full-site-editing, blog, education
*/

/* ==========================================================================
   Vous rankez vous ? · feuille de style de la maquette
   Registre : réf. A (hero en trame, mains) + réf. B (panneaux blancs encartés)
   ========================================================================== */

:root {
  /* Palette prélevée sur les références */
  --encre: #050505;
  --texte: #1d1d1d;
  --gris-texte: #3e3e3e;
  --blanc: #ffffff;
  --gris-carte: #f6f6f6;
  --gris-barre: #f1f1f1;
  --fantome: #f2f2f2;
  --trait: #e8e8e8;

  --police-titre: 'Archivo', 'Arial Narrow', sans-serif;
  --police-texte: 'Manrope', system-ui, sans-serif;

  --rayon-panneau: 12px;
  --rayon-carte: 8px;
  --rayon-image: 4px;

  /* L'image des mains et la trame partagent la même échelle */
  --mains-l: min(88vw, 1640px);
  --tuile: calc(var(--mains-l) * 0.607);
  --fondu: 140px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 17px;
  line-height: 1.6;
  color: var(--texte);
  background-color: #e4e4e4;
  background-image: url('assets/img/trame-dense.webp');
  background-size: var(--tuile);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 100;
  background: var(--encre);
  color: var(--blanc);
  padding: 10px 16px;
  border-radius: 999px;
}
.lien-evitement:focus { left: 12px; }

.fleche {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.bouton-noir {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--encre);
  color: var(--blanc);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 26px -8px rgba(5, 5, 5, .5);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bouton-noir:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -8px rgba(5, 5, 5, .55); }
.bouton-petit {
  height: 40px;
  padding: 0 18px;
  font-size: 15px;
  box-shadow: none;
}
.bouton-petit:hover { box-shadow: none; }

.bouton-contour {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--trait);
  background: var(--blanc);
  color: var(--encre);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s ease;
}
.bouton-contour:hover { border-color: var(--encre); }

/* --------------------------------------------------------------------------
   En-tête : barre grise arrondie, posée sur le hero (réf. A)
   -------------------------------------------------------------------------- */
.entete {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0 24px;
}
.entete-barre {
  max-width: 1180px;
  margin: 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 8px 0 22px;
  border-radius: 12px;
  background: rgba(241, 241, 241, .86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.logo {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
  white-space: nowrap;
}
.logo sup {
  font-size: .8em;
  margin-left: 3px;
  vertical-align: .45em;
  line-height: 0;
}
.nav-liens {
  display: flex;
  gap: 24px;
  font-size: 16px;
  font-weight: 500;
}
.nav-liens a,
.nav-secondaire {
  color: var(--gris-texte);
  text-decoration: none;
  transition: color .2s ease;
}
.nav-liens a:hover,
.nav-secondaire:hover,
.nav-liens a.est-actif { color: var(--encre); }
.nav-liens a.est-actif { font-weight: 600; }
.nav-fin {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 16px;
  font-weight: 500;
}
.burger {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--encre);
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1.5px;
  background: var(--blanc);
  transition: transform .25s ease, top .25s ease;
}
.burger span:first-child { top: 16px; }
.burger span:last-child { top: 23px; }
.burger.est-ouvert span:first-child { top: 19.5px; transform: rotate(45deg); }
.burger.est-ouvert span:last-child { top: 19.5px; transform: rotate(-45deg); }
.menu-mobile {
  display: none;
  max-width: 1180px;
  margin: 8px auto 0;
  padding: 8px;
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: 0 20px 40px -20px rgba(5, 5, 5, .35);
}
.menu-mobile a {
  display: block;
  padding: 14px 16px;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  color: var(--encre);
  border-radius: 8px;
}
.menu-mobile a:hover { background: var(--gris-carte); }

/* --------------------------------------------------------------------------
   Hero : trame claire, titre condensé centré, les mains dessous (réf. A)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 150px 24px var(--fondu);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
/* fond de trame claire, qui se fond dans la trame dense en bas */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #ffffff;
  background-image: url('assets/img/trame.webp');
  background-size: var(--tuile);
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fondu)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fondu)), transparent);
}
.hero-texte {
  position: relative;
  z-index: 2;
}
.hero-titre {
  margin: 0 auto;
  max-width: 17ch;
  font-family: var(--police-titre);
  font-stretch: 72%;
  font-weight: 700;
  font-size: clamp(50px, 5.5vw, 84px);
  line-height: .97;
  letter-spacing: -.015em;
  color: var(--encre);
  text-wrap: balance;
  hyphens: none;
}
.hero-intro {
  margin: 22px auto 32px;
  max-width: 27em;
  font-size: 20px;
  line-height: 1.55;
  color: var(--texte);
  text-wrap: balance;
}
.hero-mains {
  position: relative;
  z-index: 1;
  width: var(--mains-l);
  margin: -112px auto 0;
  pointer-events: none;
}
.hero-mains img {
  display: block;
  width: 100%;
  height: auto;
  /* l'image se fond dans la trame : bords haut et côtés */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 17%),
    linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 17%),
    linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%);
  mask-composite: intersect;
}
.hero-outils {
  position: relative;
  z-index: 2;
  margin-top: -14px;
}
.hero-outils-label {
  margin: 0 0 26px;
  font-size: 16px;
  color: var(--gris-texte);
}
.hero-outils-liste {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1240px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 44px;
}
.hero-outils-liste li {
  font-family: var(--police-titre);
  font-stretch: 88%;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--encre);
}

/* --------------------------------------------------------------------------
   Panneaux blancs encartés (réf. B)
   -------------------------------------------------------------------------- */
.section-panneau {
  padding: 0 24px;
  margin: 40px 0;
}
.panneau {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px clamp(24px, 10vw, 150px) 112px;
  border-radius: var(--rayon-panneau);
  background: var(--blanc);
  overflow: hidden;
}
.fantome {
  display: block;
  margin: 0 0 -.52em;
  padding-left: .15em;
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: clamp(44px, 7.6vw, 112px);
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-align: center;
  color: var(--fantome);
  white-space: nowrap;
  user-select: none;
}
.titre-section {
  position: relative;
  margin: 0;
  font-family: var(--police-texte);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.05;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-align: center;
  color: var(--encre);
}
.barre-filtres {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 72px 0 32px;
}
.barre-texte {
  margin: 0;
  font-size: 17px;
  color: var(--gris-texte);
}
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 30px;
}
.filtre {
  padding: 6px 0;
  border: 0;
  border-bottom: 1.5px solid transparent;
  background: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--gris-texte);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.filtre:hover { color: var(--encre); }
.filtre.est-actif { color: var(--encre); border-bottom-color: var(--encre); }

/* cartes des rubriques */
.grille-rubriques {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 40px;
}
.carte {
  display: block;
  padding: 8px 8px 26px;
  border-radius: var(--rayon-carte);
  background: var(--gris-carte);
  box-shadow: 0 24px 40px -28px rgba(5, 5, 5, .35);
  color: inherit;
  text-decoration: none;
}
.carte.est-masquee { display: none; }
.carte-visuel {
  position: relative;
  aspect-ratio: 10 / 7;
  border-radius: var(--rayon-image);
  overflow: hidden;
  background: var(--trait);
}
.carte-visuel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.carte:hover .carte-visuel img { transform: scale(1.035); }
.carte-etiquette {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--blanc);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre);
}
.carte-fleche {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--encre);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.carte-fleche .fleche { width: 24px; height: 24px; stroke-width: 1.4; }
.carte:hover .carte-fleche,
.carte:focus-visible .carte-fleche { opacity: 1; transform: scale(1); }
.carte-titre {
  margin: 24px 18px 0;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.012em;
  color: var(--encre);
  text-wrap: balance;
}
.carte-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 18px 0;
}
.tag {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid #ebebeb;
  background: var(--blanc);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--encre);
}

/* --------------------------------------------------------------------------
   Sections ouvertes sur trame claire (réf. A)
   -------------------------------------------------------------------------- */
.section-claire {
  position: relative;
  padding: 150px 24px;
  text-align: center;
  isolation: isolate;
}
.section-claire::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #ffffff;
  background-image: url('assets/img/trame.webp');
  background-size: var(--tuile);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 110px, #000 calc(100% - 110px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 110px, #000 calc(100% - 110px), transparent);
}
.titre-display {
  margin: 0 auto;
  max-width: 20ch;
  font-family: var(--police-titre);
  font-stretch: 72%;
  font-weight: 700;
  font-size: clamp(44px, 5vw, 76px);
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--encre);
  text-wrap: balance;
}
.intro-centree {
  margin: 22px auto 0;
  max-width: 30em;
  font-size: 19px;
  line-height: 1.55;
  text-wrap: balance;
}

/* par où commencer */
.profils {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 40px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(241, 241, 241, .9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.profil {
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--gris-texte);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.profil:hover { color: var(--encre); }
.profil.est-actif {
  background: var(--encre);
  color: var(--blanc);
}
.parcours {
  max-width: 1180px;
  margin: 44px auto 0;
}
.parcours-variante {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.parcours-variante.est-actif { display: grid; }
.etape {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
  padding: 30px 30px 28px;
  border-radius: var(--rayon-panneau);
  background: var(--blanc);
  text-align: left;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 24px 40px -30px rgba(5, 5, 5, .4);
  transition: transform .25s ease;
}
.etape:hover { transform: translateY(-3px); }
.etape-num {
  font-family: var(--police-titre);
  font-stretch: 72%;
  font-weight: 700;
  font-size: 64px;
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--encre);
  margin-bottom: 14px;
}
.etape-titre {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--encre);
}
.etape-texte {
  font-size: 16px;
  line-height: 1.55;
  color: var(--gris-texte);
}
.etape-lien {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--encre);
}

/* mots des pros */
.mots {
  margin: 0;
  border-top: 1px solid var(--trait);
}
.mot {
  display: grid;
  grid-template-columns: 230px 250px minmax(0, 1fr);
  align-items: baseline;
  gap: 32px;
  padding: 30px 0;
  border-bottom: 1px solid var(--trait);
}
.mot dd { margin: 0; }
.mot-terme {
  font-family: var(--police-titre);
  font-stretch: 72%;
  font-weight: 700;
  font-size: 58px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--encre);
}
.mot-long {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.mot-def {
  font-size: 19px;
  line-height: 1.55;
  color: var(--texte);
}

/* contact */
.contact .titre-display { max-width: 22ch; }
.contact .bouton-noir { margin-top: 36px; }
.contact-adresse {
  margin: 20px 0 0;
  font-size: 15px;
  color: var(--gris-texte);
}
.contact-adresse a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied-section { margin-bottom: 24px; }
.pied { padding-top: 56px; padding-bottom: 32px; }
.pied-grille {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
}
.pied-marque p {
  margin: 18px 0 0;
  max-width: 26em;
  font-size: 16px;
  color: var(--gris-texte);
}
.pied-titre {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--encre);
}
.pied-col ul { list-style: none; margin: 0; padding: 0; }
.pied-col li + li { margin-top: 8px; }
.pied-col a {
  font-size: 16px;
  color: var(--gris-texte);
  text-decoration: none;
}
.pied-col a:hover { color: var(--encre); }
.pied-bas {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--trait);
  font-size: 14px;
  color: var(--gris-texte);
}
.pied-bas p { margin: 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav-liens,
  .nav-secondaire { display: none; }
  .burger { display: block; }
  .menu-mobile.est-ouvert { display: block; }
}

@media (max-width: 960px) {
  .nav-fin .bouton-petit { display: none; }
  .mot { grid-template-columns: 160px minmax(0, 1fr); gap: 8px 28px; }
  .mot-def { grid-column: 2; }
  .parcours-variante { grid-template-columns: 1fr; }
  .etape { min-height: 0; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  :root {
    --mains-l: 175vw;
    --fondu: 90px;
  }
  .entete { top: 12px; padding: 0 12px; }
  .entete-barre { height: 52px; padding: 0 6px 0 16px; }
  .hero { padding-top: 124px; }
  .hero-intro { font-size: 17px; }
  .hero-mains { margin: -24px 0 0 50%; transform: translateX(-50%); }
  .hero-mains img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 34%);
  }
  .hero-outils { margin-top: 0; }
  .hero-outils-liste { gap: 14px 28px; }
  .hero-outils-liste li { font-size: 21px; }
  .section-panneau { padding: 0 12px; margin: 24px 0; }
  .panneau { padding: 40px 20px 48px; }
  .barre-filtres { flex-direction: column; align-items: flex-start; margin-top: 48px; }
  .grille-rubriques { grid-template-columns: 1fr; gap: 24px; }
  .carte-titre { font-size: 21px; margin: 20px 10px 0; }
  .carte-tags { margin: 16px 10px 0; }
  .section-claire { padding: 110px 16px; }
  .profils { border-radius: 24px; }
  .profil { height: 42px; padding: 0 16px; font-size: 15px; }
  .mot { grid-template-columns: 1fr; gap: 6px; padding: 24px 0; }
  .mot-def { grid-column: auto; font-size: 17px; }
  .mot-terme { font-size: 48px; }
  .pied-grille { grid-template-columns: 1fr; gap: 32px; }
  .pied-bas { flex-direction: column; }
}

/* ==========================================================================
   Pages intérieures (phase 3) : mêmes jetons, mêmes dispositifs
   ========================================================================== */

/* en-tête de page sur trame claire */
.entete-page { padding: 168px 24px 108px; }
.fil-ariane {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 26px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gris-texte);
}
.fil-ariane a { text-decoration: none; }
.fil-ariane a:hover { color: var(--encre); }
.titre-page {
  margin: 0 auto;
  max-width: 18ch;
  font-family: var(--police-titre);
  font-stretch: 72%;
  font-weight: 700;
  font-size: clamp(44px, 5.5vw, 84px);
  line-height: .97;
  letter-spacing: -.015em;
  color: var(--encre);
  text-wrap: balance;
  hyphens: none;
}
.entete-article .titre-page {
  max-width: 960px;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1;
}
.chapo {
  margin: 24px auto 0;
  max-width: 34em;
  font-size: 20px;
  line-height: 1.55;
  text-wrap: balance;
}
.pastilles {
  list-style: none;
  margin: 34px auto 0;
  padding: 0;
  max-width: 980px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.pastille {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--trait);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--encre);
}

/* article à la une, dans un panneau */
.une {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  margin-top: 64px;
  padding: 8px;
  border-radius: var(--rayon-carte);
  background: var(--gris-carte);
  box-shadow: 0 24px 40px -28px rgba(5, 5, 5, .35);
  color: inherit;
  text-decoration: none;
}
.une-visuel {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--rayon-image);
  overflow: hidden;
}
.une-visuel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.une:hover .une-visuel img { transform: scale(1.035); }
.une:hover .carte-fleche,
.une:focus-visible .carte-fleche { opacity: 1; transform: scale(1); }
.une-texte { padding: 24px 44px 24px 0; }
.une-titre {
  margin: 0;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--encre);
  text-wrap: balance;
}
.une-chapo {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--gris-texte);
}
.une .carte-tags { margin: 22px 0 0; }
.une-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--encre);
}

/* programme d'une rubrique */
.programme {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 56px;
}
.programme-titre {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--encre);
}
.programme-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--trait);
}
.programme-liste li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--trait);
  font-size: 17px;
  line-height: 1.45;
}
.programme-liste li > span:first-child { color: var(--gris-texte); }
.programme-liste a {
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
}
.programme-liste a:hover { text-decoration: underline; text-underline-offset: 4px; }
.statut {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--gris-carte);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--gris-texte);
  white-space: nowrap;
}
.statut-dispo { background: var(--encre); color: var(--blanc); }

/* qui appeler pour quoi */
.besoins { margin: 0; border-top: 1px solid var(--trait); }
.besoin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--trait);
}
.besoin dt {
  font-size: 19px;
  line-height: 1.5;
  color: var(--texte);
}
.besoin dd {
  margin: 0;
  font-family: var(--police-titre);
  font-stretch: 72%;
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.01em;
  text-align: right;
  color: var(--encre);
}
.besoin dd a { text-decoration: none; border-bottom: 2px solid currentColor; }

/* grilles de points numérotés et de définitions */
.grille-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.grille-points-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-points li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 170px;
  padding: 26px 24px;
  border-radius: var(--rayon-carte);
  background: var(--gris-carte);
}
.point-num {
  margin-bottom: 8px;
  font-family: var(--police-titre);
  font-stretch: 72%;
  font-weight: 700;
  font-size: 44px;
  line-height: .9;
  color: var(--encre);
}
.point-texte {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--encre);
}
.point-detail {
  font-size: 15px;
  line-height: 1.55;
  color: var(--gris-texte);
}
.grille-definitions {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.grille-definitions > div {
  padding: 26px 24px 28px;
  border-radius: var(--rayon-carte);
  background: var(--gris-carte);
}
.grille-definitions dt {
  margin-bottom: 14px;
  font-family: var(--police-titre);
  font-stretch: 72%;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: var(--encre);
}
.grille-definitions dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--texte);
}
.mot-terme a { color: inherit; text-decoration: none; }
.mot-terme a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* --------------------------------------------------------------------------
   Article : corps + guide à droite
   -------------------------------------------------------------------------- */
.panneau-article { padding-top: 8px; padding-left: 8px; padding-right: 8px; overflow: visible; }
.article-visuel {
  aspect-ratio: 21 / 9;
  border-radius: var(--rayon-image);
  overflow: hidden;
}
.article-visuel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 72px;
  padding: 64px clamp(16px, 6vw, 88px) 0;
}
.article-corps {
  max-width: 720px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--texte);
}
.article-corps > :first-child { margin-top: 0; }
.article-corps h2 {
  margin: 64px 0 18px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--encre);
  text-wrap: balance;
  scroll-margin-top: 110px;
}
.article-corps h3 {
  margin: 36px 0 8px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--encre);
}
.article-corps p { margin: 0 0 20px; }
.article-corps ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.article-corps ul li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 26px;
}
.article-corps ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--encre);
}
.article-corps a { color: var(--encre); text-underline-offset: 3px; }
.article-corps a.terme {
  text-decoration: none;
  border-bottom: 1.5px dotted currentColor;
}
.article-corps a.terme:hover { border-bottom-style: solid; }
.encadre {
  margin: 40px 0 0;
  padding: 26px 30px;
  border-radius: var(--rayon-carte);
  background: var(--gris-carte);
}
.encadre p:last-child { margin-bottom: 0; }
.encadre-titre {
  margin: 0 0 8px !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--encre);
}
.note {
  padding-left: 16px;
  border-left: 2px solid var(--trait);
  font-size: 15px;
  color: var(--gris-texte);
}
.en-bref {
  margin: 0 0 48px;
  padding: 26px 30px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
}
.en-bref dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
}
.en-bref dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.en-bref dd {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--encre);
}
.tableau-defilant { margin: 8px 0 28px; overflow-x: auto; }
.comparatif {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
}
.comparatif th,
.comparatif td {
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--trait);
  text-align: left;
  vertical-align: top;
}
.comparatif thead th {
  border-bottom: 1.5px solid var(--encre);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.comparatif tbody th {
  min-width: 140px;
  font-weight: 600;
  color: var(--encre);
}

/* le guide : ce que contient l'article, les termes liés, les articles voisins */
.guide {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.guide-bloc {
  padding: 22px 24px 18px;
  border-radius: var(--rayon-carte);
  background: var(--gris-carte);
}
.guide-titre {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--encre);
}
.guide-sommaire {
  list-style: none;
  margin: 0;
  padding: 0;
}
.guide-sommaire li + li { border-top: 1px solid #e4e4e4; }
.guide-sommaire a {
  position: relative;
  display: block;
  padding: 11px 0 11px 16px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--gris-texte);
  text-decoration: none;
  transition: color .2s ease;
}
.guide-sommaire a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #c6c6c6;
  transition: background .2s ease;
}
.guide-sommaire a:hover,
.guide-sommaire a.est-actif { color: var(--encre); }
.guide-sommaire a.est-actif { font-weight: 600; }
.guide-sommaire a.est-actif::before { background: var(--encre); }
.guide-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.guide-liste a {
  display: block;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--gris-texte);
  text-decoration: none;
}
.guide-liste a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }

/* prochaine lecture */
.suite {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin: 72px clamp(16px, 6vw, 88px) 0;
  padding: 26px 28px 26px 32px;
  border-radius: var(--rayon-carte);
  background: var(--gris-carte);
  color: inherit;
  text-decoration: none;
}
.suite-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.suite-titre {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--encre);
}
.suite-fleche {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--encre);
  color: var(--blanc);
  transition: transform .25s ease;
}
.suite:hover .suite-fleche { transform: translate(2px, -2px); }

/* --------------------------------------------------------------------------
   Dictionnaire
   -------------------------------------------------------------------------- */
.dico-outils {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin: 64px 0 28px;
}
.dico-recherche {
  position: relative;
  width: min(560px, 100%);
}
.dico-recherche svg {
  position: absolute;
  left: 20px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  fill: none;
  stroke: var(--gris-texte);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.dico-recherche input {
  width: 100%;
  height: 56px;
  padding: 0 22px 0 52px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--blanc);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--encre);
}
.dico-recherche input:focus { outline: none; border-color: var(--encre); }
.dico-domaines { justify-content: center; }
.dico-lettres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}
.dico-lettre-lien {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
}
a.dico-lettre-lien:hover { background: var(--gris-carte); }
.dico-lettre-lien.est-vide { color: #c9c9c9; }
.dico-aucun {
  display: none;
  margin: 24px 0 0;
  text-align: center;
  font-size: 17px;
  color: var(--gris-texte);
}
.dico-aucun.est-visible { display: block; }
.dico-compte {
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: var(--gris-texte);
}
.dico-groupe { margin-top: 44px; scroll-margin-top: 100px; }
.dico-groupe.est-masque { display: none; }
.dico-lettre {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--encre);
  font-family: var(--police-titre);
  font-stretch: 72%;
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: var(--encre);
}
.dico-entree {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--trait);
  scroll-margin-top: 100px;
}
.dico-entree.est-masquee { display: none; }
.dico-terme {
  margin: 0;
  font-family: var(--police-titre);
  font-stretch: 72%;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.05;
  color: var(--encre);
}
.dico-entree:target .dico-terme { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.dico-etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
}
.dico-domaine {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--gris-carte);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--gris-texte);
}
.dico-long {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.dico-def {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--encre);
}
.dico-exemple {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gris-texte);
}
.dico-exemple span { font-weight: 700; color: var(--encre); }
.dico-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  border-bottom: 1px solid currentColor;
  font-size: 15px;
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
}

/* responsive des pages intérieures */
@media (max-width: 1100px) {
  .article-grille { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .article-corps { max-width: none; }
  .guide {
    position: static;
    order: -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grille-definitions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .une { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .une-texte { padding: 20px 16px 24px; }
  .programme { grid-template-columns: minmax(0, 1fr); }
  .grille-points,
  .grille-points-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .entete-page { padding: 124px 16px 80px; }
  .chapo { font-size: 18px; }
  .pastille { font-size: 13px; padding: 8px 13px; }
  .une { margin-top: 44px; }
  .besoin { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .besoin dd { text-align: left; font-size: 30px; }
  .grille-points li { min-height: 0; padding: 20px; }
  .grille-definitions { grid-template-columns: minmax(0, 1fr); }
  .article-visuel { aspect-ratio: 4 / 3; }
  .article-grille { padding: 36px 12px 0; }
  .article-corps { font-size: 17px; }
  .article-corps h2 { font-size: 25px; margin-top: 48px; }
  .guide { order: 1; grid-template-columns: minmax(0, 1fr); }
  .en-bref dl { grid-template-columns: minmax(0, 1fr); }
  .suite { grid-template-columns: minmax(0, 1fr) auto; margin: 48px 12px 0; padding: 22px; gap: 8px 16px; }
  .suite-label { grid-column: 1 / -1; }
  .suite-titre { font-size: 19px; }
  .dico-entree { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dico-terme { font-size: 32px; }
  .dico-def { font-size: 17px; }
}

.insecable { white-space: nowrap; }


/* ==========================================================================
   Adaptations WordPress (phase 4)
   Les classes des composants sont posées sur les blocs (className) : la quasi
   totalité des règles ci-dessus s'applique telle quelle. Cette section couvre
   ce que le DOM des blocs change : figure.wp-block-image, div.wp-block-group,
   paragraphes à la place des span et des button, liens au lieu de cartes <a>.
   Le CSS d'un bloc est imprimé après cette feuille : toute surcharge d'un
   style de bloc est écrite plus spécifique, pas seulement plus tard.
   ========================================================================== */

:root {
  --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5l7-7M5.5 4.5h6v6'/%3E%3C/svg%3E");
  --fleche-blanche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5l7-7M5.5 4.5h6v6'/%3E%3C/svg%3E");
  --loupe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M13 13l4 4'/%3E%3C/svg%3E");
}

/* Espacement automatique : coupé dans theme.json (blockGap 0), filet de sécurité
   ici à spécificité nulle pour ne jamais écraser les marges des composants. */
:where(.wp-block-group) > :where(*),
:where(.wp-block-buttons) { margin-block: 0; }
:where(figure.wp-block-image) { margin: 0; }
:where(p) { margin-block: 0; }

/* WordPress annule la marge basse du dernier enfant d'un conteneur
   (« :root :where(.is-layout-flow) > :last-child », spécificité 0,2,0) :
   les panneaux gardent la leur, comme dans la maquette (porte 4 : 40 px). */
:root .wp-site-blocks .section-panneau { margin-block: 40px; }
:root .wp-site-blocks .pied-section { margin-bottom: 24px; }
@media (max-width: 720px) {
  :root .wp-site-blocks .section-panneau { margin-block: 24px; }
}

/* --------------------------------------------------------------------------
   Boutons : le style va sur le lien, le conteneur est neutralisé
   -------------------------------------------------------------------------- */
.wp-block-button.bouton-noir,
.wp-block-button.bouton-contour {
  display: inline-flex;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}
.wp-block-button.bouton-noir .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--encre);
  color: var(--blanc);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 12px 26px -8px rgba(5, 5, 5, .5);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wp-block-button.bouton-noir .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -8px rgba(5, 5, 5, .55);
}
.wp-block-button.bouton-petit .wp-block-button__link {
  height: 40px;
  padding: 0 18px;
  font-size: 15px;
  box-shadow: none;
}
.wp-block-button.bouton-petit .wp-block-button__link:hover { box-shadow: none; }
.wp-block-button.bouton-contour .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--encre);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  transition: border-color .2s ease;
}
.wp-block-button.bouton-contour .wp-block-button__link:hover { border-color: var(--encre); }

/* la flèche ↗ : un pseudo-élément masqué, plus aucun SVG dans le contenu */
.wp-block-button.bouton-noir:not(.bouton-petit) .wp-block-button__link::after,
.wp-block-button.bouton-contour .wp-block-button__link::after,
.une-lien::after,
.etape-lien::after,
.dico-lien a::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--fleche) center / contain no-repeat;
  mask: var(--fleche) center / contain no-repeat;
}

.hero-texte .wp-block-buttons,
.contact .wp-block-buttons,
.page-404 .wp-block-buttons { justify-content: center; }
.contact .wp-block-buttons { margin-top: 36px; }
.contact .bouton-noir { margin-top: 0; }
.page-404 .wp-block-buttons { margin-top: 36px; }

/* --------------------------------------------------------------------------
   En-tête : deux menus natifs (barre et mobile), un burger en paragraphe
   -------------------------------------------------------------------------- */
.admin-bar .entete { top: calc(18px + var(--wp-admin--admin-bar--height, 0px)); }
.entete-barre .logo,
.pied-marque .logo { margin: 0; }
.logo a { color: inherit; text-decoration: none; }
.nav-principale {
  font-size: 16px;
  font-weight: 500;
  color: var(--gris-texte);
}
.nav-principale .wp-block-navigation-item__content { padding: 0; }
.nav-principale .wp-block-navigation-item { transition: color .2s ease; }
.nav-principale .wp-block-navigation-item:hover,
.nav-principale .current-menu-item { color: var(--encre); }
.nav-principale .current-menu-item { font-weight: 600; }
.wp-block-buttons.nav-fin {
  margin-left: auto;
  flex-wrap: nowrap;
}
p.burger {
  display: none;
  flex: none;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--encre);
  color: transparent;
  font-size: 0;
  cursor: pointer;
  user-select: none;
}
p.burger::before,
p.burger::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1.5px;
  background: var(--blanc);
  transition: transform .25s ease, top .25s ease;
}
p.burger::before { top: 16px; }
p.burger::after { top: 23px; }
p.burger.est-ouvert::before { top: 19.5px; transform: rotate(45deg); }
p.burger.est-ouvert::after { top: 19.5px; transform: rotate(-45deg); }
.nav-mobile { width: 100%; }
.nav-mobile .wp-block-navigation__container,
.nav-mobile .wp-block-navigation-item { width: 100%; gap: 0; }
.nav-mobile .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 500;
  color: var(--encre);
}
.nav-mobile .wp-block-navigation-item__content:hover { background: var(--gris-carte); }

@media (max-width: 1100px) {
  .nav-principale { display: none; }
  p.burger { display: block; }
}
@media (max-width: 960px) {
  .wp-block-buttons.nav-fin { display: none; }
  p.burger { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   Héros
   -------------------------------------------------------------------------- */
.wp-block-image.hero-mains { margin: -112px auto 0; }
.wp-block-image.hero-mains img { width: 100%; }
@media (max-width: 720px) {
  .wp-block-image.hero-mains { margin: -24px 0 0 50%; }
}

/* --------------------------------------------------------------------------
   Cartes : le lien est porté par le titre et étiré sur toute la carte
   -------------------------------------------------------------------------- */
.carte,
.une,
.etape { position: relative; }
.carte-titre a,
.une-titre a,
.etape-titre a { color: inherit; text-decoration: none; }
.carte-titre a::after,
.une-titre a::after,
.etape-titre a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
.carte-titre a:focus-visible,
.une-titre a:focus-visible,
.etape-titre a:focus-visible { outline: none; }
.carte:focus-within,
.une:focus-within,
.etape:focus-within { outline: 2px solid var(--encre); outline-offset: 4px; }

.carte-visuel .wp-block-image,
.une-visuel .wp-block-image,
.carte-visuel .wp-block-image img,
.une-visuel .wp-block-image img,
.wp-block-post-featured-image.carte-visuel img {
  width: 100%;
  height: 100%;
}
.carte-visuel .wp-block-image img,
.une-visuel .wp-block-image img,
.wp-block-post-featured-image.carte-visuel img {
  display: block;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.carte:hover .carte-visuel img,
.une:hover .une-visuel img { transform: scale(1.035); }
.carte-etiquette { z-index: 2; }

/* cercle fléché au survol : décor, donc pseudo-éléments */
.carte-visuel::before,
.une-visuel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: var(--blanc) var(--fleche) center / 24px no-repeat;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.carte:hover .carte-visuel::before,
.carte:focus-within .carte-visuel::before,
.une:hover .une-visuel::before,
.une:focus-within .une-visuel::before { opacity: 1; transform: scale(1); }

.filtre,
.profil { user-select: none; line-height: normal; }

/* texte réservé aux lecteurs d'écran (étiquette de la recherche, par exemple) */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  border: 0;
  word-wrap: normal !important;
}
.filtre:focus-visible,
.profil:focus-visible,
p.burger:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.profil {
  display: inline-flex;
  align-items: center;
}
.etape-lien { display: inline-flex; }

/* --------------------------------------------------------------------------
   En-têtes de pages, fil d'Ariane, pastilles
   -------------------------------------------------------------------------- */
p.fil-ariane {
  display: block;
  text-align: center;
  word-spacing: 3px;
}
.entete-article .fil-ariane {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.entete-article .fil-ariane .wp-block-post-terms::before { content: "/"; margin-right: 10px; }
.fil-ariane a { color: inherit; text-decoration: none; }
.fil-ariane a:hover { color: var(--encre); }
.pastilles {
  list-style: none;
  padding: 0;
}
.pastilles li,
.pastilles .pastille {
  padding: 9px 16px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--encre);
}
.pastilles .pastille a { color: inherit; text-decoration: none; }
.pastille-date::before { content: "Publié le "; }
.pastille-lecture::after { content: " de lecture"; }
.pastille-niveau a { text-transform: lowercase; }
.chapo p { margin: 0; }

/* --------------------------------------------------------------------------
   Rubriques : programme, besoins, grilles
   -------------------------------------------------------------------------- */
.programme-liste li { color: var(--gris-texte); }
.programme-liste li::after {
  content: "À paraître";
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--gris-carte);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--gris-texte);
  white-space: nowrap;
}
.programme-liste li:has(a)::after {
  content: "À lire";
  background: var(--encre);
  color: var(--blanc);
}

.besoin-texte {
  font-size: 19px;
  line-height: 1.5;
  color: var(--texte);
}
.besoin-metier {
  font-family: var(--police-titre);
  font-stretch: 72%;
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.01em;
  text-align: right;
  color: var(--encre);
}
.besoin-metier a { color: inherit; text-decoration: none; border-bottom: 2px solid currentColor; }

.grille-points .point {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 170px;
  padding: 26px 24px;
  border-radius: var(--rayon-carte);
  background: var(--gris-carte);
}
.grille-definitions .definition {
  padding: 26px 24px 28px;
  border-radius: var(--rayon-carte);
  background: var(--gris-carte);
}
.def-terme {
  margin-bottom: 14px;
  font-family: var(--police-titre);
  font-stretch: 72%;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: var(--encre);
}
.def-texte {
  font-size: 16px;
  line-height: 1.55;
  color: var(--texte);
}

/* --------------------------------------------------------------------------
   Article
   -------------------------------------------------------------------------- */
.wp-block-post-featured-image.article-visuel {
  margin: 0;
  aspect-ratio: 21 / 9;
  border-radius: var(--rayon-image);
  overflow: hidden;
}
.wp-block-post-featured-image.article-visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-corps a[href*="/dictionnaire/#"] {
  text-decoration: none;
  border-bottom: 1.5px dotted currentColor;
}
.article-corps a[href*="/dictionnaire/#"]:hover { border-bottom-style: solid; }
.article-corps .en-bref p,
.article-corps .encadre p:last-child { margin-bottom: 0; }
.en-bref .encadre-titre { margin-bottom: 16px !important; }
.en-bref-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
}
.en-bref-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.article-corps .en-bref-valeur {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--encre);
}
.wp-block-table.comparatif {
  margin: 8px 0 28px;
  overflow-x: auto;
}
.wp-block-table.comparatif table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
}
.wp-block-table.comparatif thead { border-bottom: 0; }
.wp-block-table.comparatif th,
.wp-block-table.comparatif td {
  padding: 14px 18px 14px 0;
  border: 0;
  border-bottom: 1px solid var(--trait);
  text-align: left;
  vertical-align: top;
}
.wp-block-table.comparatif thead th {
  border-bottom: 1.5px solid var(--encre);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.wp-block-table.comparatif tbody th {
  min-width: 140px;
  font-weight: 600;
  color: var(--encre);
}

/* guide : la requête « Articles similaires » prend le style des listes du guide */
.guide-bloc:empty { display: none; }
.articles-similaires .wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
}
.articles-similaires .wp-block-post-title {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
}
.articles-similaires .wp-block-post-title a {
  display: block;
  padding: 6px 0;
  color: var(--gris-texte);
  text-decoration: none;
}
.articles-similaires .wp-block-post-title a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }

/* prochaine lecture */
.wp-block-post-navigation-link.suite {
  display: block;
  padding: 0;
  background: none;
}
.wp-block-post-navigation-link.suite a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 26px 28px 26px 32px;
  border-radius: var(--rayon-carte);
  background: var(--gris-carte);
  color: var(--encre);
  text-decoration: none;
}
.wp-block-post-navigation-link.suite a::after {
  content: "";
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--encre) var(--fleche-blanche) center / 18px no-repeat;
  transition: transform .25s ease;
}
.wp-block-post-navigation-link.suite a:hover::after { transform: translate(2px, -2px); }
.suite .post-navigation-link__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.suite .post-navigation-link__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--encre);
}

/* liste d'articles (archives, recherche) */
.wp-block-post-template.grille-rubriques {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-block-post-featured-image.carte-visuel { margin: 0; }
.carte-extrait {
  margin: 12px 18px 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--gris-texte);
}
.pagination {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 44px;
  font-weight: 600;
}
.pagination a { color: var(--encre); }

/* --------------------------------------------------------------------------
   Dictionnaire : recherche native, index des lettres, entrées
   -------------------------------------------------------------------------- */
.wp-block-search.dico-recherche,
.wp-block-search.recherche-site {
  position: relative;
  width: min(560px, 100%);
  margin: 0 auto;
}
.wp-block-search.recherche-site { margin-top: 34px; }
.dico-recherche .wp-block-search__inside-wrapper,
.recherche-site .wp-block-search__inside-wrapper {
  position: relative;
  padding: 0;
  border: 0;
}
.dico-recherche .wp-block-search__inside-wrapper::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: var(--gris-texte);
  -webkit-mask: var(--loupe) center / contain no-repeat;
  mask: var(--loupe) center / contain no-repeat;
  pointer-events: none;
}
.dico-recherche .wp-block-search__input,
.recherche-site .wp-block-search__input {
  width: 100%;
  height: 56px;
  padding: 0 22px 0 52px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--blanc);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--encre);
}
.recherche-site .wp-block-search__input { padding-left: 22px; }
.dico-recherche .wp-block-search__input:focus,
.recherche-site .wp-block-search__input:focus { outline: none; border-color: var(--encre); }
.recherche-site .wp-block-search__button { margin-left: 8px; border-radius: 999px; }
.dico-lettres {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}
.dico-lettres li {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #c9c9c9;
}
.dico-lettres li:has(a) { color: var(--encre); }
.dico-lettres a {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
}
.dico-lettres a:hover { background: var(--gris-carte); }
p.dico-lien {
  display: block;
  margin-top: 14px;
  border: 0;
}
.dico-lien a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid currentColor;
  font-size: 15px;
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
}
.dico-exemple strong { font-weight: 700; color: var(--encre); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied-marque p.logo {
  max-width: none;
  font-size: 15px;
  color: var(--encre);
}

/* --------------------------------------------------------------------------
   Responsive propre aux blocs
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .besoin-metier { text-align: left; font-size: 30px; }
  .grille-points .point { min-height: 0; padding: 20px; }
  .wp-block-post-featured-image.article-visuel { aspect-ratio: 4 / 3; }
  .en-bref-grille { grid-template-columns: minmax(0, 1fr); }
  .wp-block-post-navigation-link.suite { margin: 48px 12px 0; }
  .wp-block-post-navigation-link.suite a { grid-template-columns: minmax(0, 1fr) auto; padding: 22px; gap: 8px 16px; }
  .suite .post-navigation-link__label { grid-column: 1 / -1; }
  .suite .post-navigation-link__title { font-size: 19px; }
}