/*
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 ? : identité « dictionnaire », Open Sans, noir, blanc et fuchsia, méga menu. Tout le contenu se modifie dans l'éditeur de blocs.
Version: 2.0.11
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 ? · maquette v2.1 (validée le 20 octobre 2026)
   Identité « dictionnaire » : entrées, numéros, surlignage. Open Sans (étroite
   pour les titres, normale pour le texte), noir et blanc, un seul accent fuchsia,
   ombres pleines décalées, angles droits.
   Interdits du brief : aucun dégradé, aucun néon, pas de glassmorphisme.
   La structure du HTML est celle du rendu WordPress : paragraphes, groupes,
   boutons dans une enveloppe, listes d'articles au format des boucles de requête.
   ========================================================================== */

:root {
  --noir: #000;
  --encre: #141414;
  --blanc: #fff;
  --papier: #f6f4f1;
  --gris-texte: #5f5f5f;
  --gris-clair: #c4c4c4;
  --filet: #dcdcdc;
  --fuchsia: #e0007a;
  --fuchsia-fonce: #b30062;
  --fuchsia-pale: #fde3ef;
  --fuchsia-clair: #ff4fa3; /* sur fond noir uniquement */

  --police: 'Open Sans', 'Segoe UI', Arial, sans-serif;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M1.5 3.5L5 7l3.5-3.5'/%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='2.2'%3E%3Ccircle cx='8.5' cy='8.5' r='5.75'/%3E%3Cpath d='M13 13l4.5 4.5'/%3E%3C/svg%3E");
  /* jauges de niveau : trois barres, remplies en fuchsia selon le niveau */
  --jauge-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'%3E%3Crect x='0' y='20' width='8' height='12' fill='%23e0007a'/%3E%3Crect x='10' y='10' width='8' height='22' fill='%23dcdcdc'/%3E%3Crect x='20' y='0' width='8' height='32' fill='%23dcdcdc'/%3E%3C/svg%3E");
  --jauge-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'%3E%3Crect x='0' y='20' width='8' height='12' fill='%23e0007a'/%3E%3Crect x='10' y='10' width='8' height='22' fill='%23e0007a'/%3E%3Crect x='20' y='0' width='8' height='32' fill='%23dcdcdc'/%3E%3C/svg%3E");
  --jauge-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'%3E%3Crect x='0' y='20' width='8' height='12' fill='%23e0007a'/%3E%3Crect x='10' y='10' width='8' height='22' fill='%23e0007a'/%3E%3Crect x='20' y='0' width='8' height='32' fill='%23e0007a'/%3E%3C/svg%3E");
  --jauge-1-noir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'%3E%3Crect x='0' y='20' width='8' height='12' fill='%23e0007a'/%3E%3Crect x='10' y='10' width='8' height='22' fill='%23444'/%3E%3Crect x='20' y='0' width='8' height='32' fill='%23444'/%3E%3C/svg%3E");
  --jauge-2-noir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'%3E%3Crect x='0' y='20' width='8' height='12' fill='%23e0007a'/%3E%3Crect x='10' y='10' width='8' height='22' fill='%23e0007a'/%3E%3Crect x='20' y='0' width='8' height='32' fill='%23444'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* :where() : la police du corps reste réglable dans l'éditeur de site (Styles, Typographie) */
:where(body) {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2, h3, h4 { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.conteneur { max-width: 1400px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

.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;
  white-space: nowrap;
}
.lien-evitement { position: absolute; left: -9999px; top: 8px; z-index: 200; }
.lien-evitement:focus-within { left: 8px; }
.lien-evitement a { display: block; padding: 10px 16px; background: var(--noir); color: var(--blanc); }
:focus-visible { outline: 3px solid var(--fuchsia); outline-offset: 3px; }

/* titres étroits : Open Sans à 75 % de largeur, très gras */
.logo a, .nav-principale .menu-item > a, .nav-mobile .menu-item > a, .mega-titre, .accroche-titre,
.mot-du-jour-terme, .entete-section h2, .entete-num, .une-titre, .niveau-bouton strong, .etape-num,
.etape-titre, .rubrique-num, .rubrique-titre, .derniers-titre, .dico-ligne-terme, .index-titre,
.mega-lettres li, .index-lettres li, .dico-lettres li, .appel-titre, .pied-logo a, .consentement-titre,
.titre-page, .besoin-metier, .programme-titre, .points-liste li::before, .points-liste strong,
.article-corps h2, .article-corps h3, .guide-termes a, .post-navigation-link__title, .dico-lettre,
.dico-terme, .texte-legal h2, .erreur-code, .contact-adresse a, .mega-mots strong, .index-compte strong,
.dico-compte strong {
  font-stretch: 75%;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   Éléments partagés
   -------------------------------------------------------------------------- */
.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fuchsia);
}
.etiquette::before { content: ""; flex: none; width: 8px; height: 8px; background: currentColor; }
.etiquette a { color: inherit; text-decoration: none; }
.etiquette a:hover { color: var(--fuchsia-fonce); }
.carte-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 10px; }
.meta-date { font-size: 13.5px; color: var(--gris-texte); }

/* boutons : à plat, angles droits ; au survol ils se soulèvent sur une ombre pleine.
   Le style va sur le lien ; l'enveloppe (un bloc bouton dans WordPress) reste neutre. */
.boutons { display: flex; flex-wrap: wrap; gap: 14px; }
.bouton-fuchsia > a, .bouton-noir > a, .bouton-contour > a, .bouton-blanc > a,
button.bouton-fuchsia, button.bouton-noir, button.bouton-contour {
  display: inline-block;
  padding: 12px 24px 13px;
  border: 2px solid;
  border-radius: 0;
  font-size: 16px;
  font-weight: 700;
  font-stretch: 87.5%;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bouton-fuchsia > a, button.bouton-fuchsia { background: var(--fuchsia); border-color: var(--fuchsia); color: var(--blanc); }
.bouton-noir > a, button.bouton-noir { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.bouton-contour > a, button.bouton-contour { background: var(--blanc); border-color: var(--noir); color: var(--noir); }
.bouton-blanc > a { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.bouton-fuchsia > a:hover, .bouton-contour > a:hover, .bouton-blanc > a:hover,
button.bouton-fuchsia:hover, button.bouton-contour:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--noir);
}
.bouton-noir > a:hover, button.bouton-noir:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--fuchsia); }
.bouton-petit > a { padding: 8px 16px 9px; font-size: 15px; }

/* en-tête de section : numéro fuchsia, titre étroit, filet noir */
.entete-section {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 104px 0 34px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--noir);
}
.entete-num { font-size: 24px; line-height: 1; color: var(--fuchsia); }
.entete-section h2 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1; }
.entete-lien { margin-left: auto; font-size: 15px; font-weight: 700; }
.entete-lien a, .mega-lien a, .fil-ariane a, .texte-legal a, .formulaire-mention a, .dico-lien a {
  text-decoration: underline;
  text-decoration-color: var(--fuchsia);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.entete-lien a:hover, .mega-lien a:hover, .fil-ariane a:hover, .texte-legal a:hover, .dico-lien a:hover { color: var(--fuchsia); }
.section-intro { max-width: 44em; margin-bottom: 26px; font-size: 18px; }

/* --------------------------------------------------------------------------
   En-tête : logo, menu et actions sur une seule ligne
   -------------------------------------------------------------------------- */
.entete { position: relative; z-index: 60; background: var(--blanc); border-bottom: 2px solid var(--noir); }
.entete-rangee { display: flex; align-items: center; gap: 24px; height: 80px; }
.logo { flex: none; }
.logo a { display: flex; align-items: center; gap: 8px; font-size: 31px; line-height: 1; color: var(--noir); text-decoration: none; }
.logo a::after, .pied-logo a::after {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--fuchsia);
  color: var(--blanc);
  font-size: 25px;
  line-height: 1;
}
nav.nav-principale { display: flex; flex: 1; gap: 0; min-width: 0; }
.nav-principale ul { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.nav-principale .menu-item > a {
  position: relative;
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 12px;
  font-size: 18px;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--noir);
  text-decoration: none;
}
.nav-principale .menu-item.a-mega > a { padding-right: 28px; background: var(--chevron) no-repeat right 12px center / 10px 10px; }
.nav-principale .menu-item > a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -2px;
  height: 5px;
  background: var(--fuchsia);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav-principale .menu-item:hover > a::after,
.nav-principale .menu-item.est-ouvert > a::after,
.nav-principale .menu-item.current-menu-item > a::after,
.nav-principale .menu-item > a:focus-visible::after { transform: scaleX(1); }
.entete-actions { display: flex; flex: none; align-items: center; gap: 10px; }
.entete-recherche a { display: grid; place-items: center; width: 42px; height: 42px; font-size: 0; color: var(--noir); }
.entete-recherche a::before {
  content: "";
  width: 21px;
  height: 21px;
  background: currentColor;
  -webkit-mask: var(--loupe) center / contain no-repeat;
  mask: var(--loupe) center / contain no-repeat;
}
.entete-recherche a:hover { color: var(--fuchsia); }
.entete-niveau { flex-wrap: nowrap; }

/* burger : un paragraphe, trois traits dessinés en CSS */
p.burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  user-select: none;
}
p.burger::before,
p.burger::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--noir);
  transition: transform .2s ease, top .2s ease, box-shadow .2s ease;
}
p.burger::before { top: 14px; box-shadow: 0 7px 0 var(--noir); }
p.burger::after { top: 28px; }
p.burger.est-ouvert::before { top: 21px; box-shadow: none; transform: rotate(45deg); }
p.burger.est-ouvert::after { top: 21px; transform: rotate(-45deg); }

/* menu mobile : une seconde navigation, ouverte par le burger */
.menu-mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  padding: 6px 32px 18px;
  border-bottom: 2px solid var(--noir);
  background: var(--blanc);
}
.nav-mobile ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.nav-mobile .menu-item + .menu-item { border-top: 1px solid var(--filet); }
.nav-mobile .menu-item > a {
  display: flex;
  align-items: center;
  height: 54px;
  font-size: 22px;
  color: var(--noir);
  text-decoration: none;
}
.nav-mobile .menu-item.current-menu-item > a { color: var(--fuchsia); }

/* méga menu : panneau pleine largeur sous l'en-tête */
.mega-cadre {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  background: var(--blanc);
  border-bottom: 2px solid var(--noir);
}
.mega-cadre.est-ouvert { display: block; }
.mega {
  display: none;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 32px 36px;
}
.mega.est-ouvert { display: grid; }
.mega-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-right: 32px;
  border-right: 1px solid var(--filet);
}
.mega-titre { font-size: 32px; line-height: 1.02; }
.mega-texte { font-size: 15px; line-height: 1.55; color: var(--gris-texte); }
.mega-sujets { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mega-sujets li, .pastilles li { font-size: 14px; font-weight: 600; }
.mega-sujets li::before, .pastilles li::before { content: "#"; margin-right: 2px; color: var(--fuchsia); }
.mega-lien { margin-top: auto; font-size: 15px; font-weight: 700; }
.mega-lien a::after { content: " →"; }

/* articles de la rubrique (boucle de requête) puis cartes « à paraître », sur une seule rangée de quatre */
.mega-articles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.mega-requete, .mega-requete ul { display: contents; }
.mega-articles:has(.mega-requete li:nth-child(2)) .mega-bientot ~ .mega-bientot ~ .mega-bientot,
.mega-articles:has(.mega-requete li:nth-child(3)) .mega-bientot ~ .mega-bientot,
.mega-articles:has(.mega-requete li:nth-child(4)) .mega-bientot { display: none; }
.mega-carte-visuel a { display: block; }
.mega-carte-visuel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 2px solid var(--noir); }
.mega-carte-titre { margin-top: 12px; font-size: 16px; font-weight: 700; font-stretch: 87.5%; line-height: 1.3; }
.mega-carte-titre a { color: var(--encre); text-decoration: none; }
.mega-carte-titre a:hover { color: var(--fuchsia); }
.mega-carte-date { margin-top: 4px; font-size: 13px; color: var(--gris-texte); }
.mega-bientot {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  aspect-ratio: 16 / 10;
  padding: 16px;
  border: 2px dashed var(--gris-clair);
}
.mega-bientot .mega-carte-titre { margin: 0; color: var(--gris-texte); }
.mega-carte-etiquette { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fuchsia); }
.mega-dico-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; }
.mega-mots li + li { border-top: 1px solid var(--filet); }
.mega-mots a { display: block; padding: 8px 0; font-size: 14px; line-height: 1.5; color: var(--gris-texte); text-decoration: none; }
.mega-mots strong { margin-right: 8px; font-size: 19px; color: var(--encre); }
.mega-mots a:hover strong { color: var(--fuchsia); }

/* index A à Z (méga menu et accueil) : lettres disponibles cernées de noir */
.mega-lettres, .index-lettres { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; align-content: start; }
.mega-lettres li, .index-lettres li {
  display: grid;
  place-items: center;
  height: 42px;
  border: 2px solid var(--filet);
  font-size: 20px;
  color: var(--gris-clair);
}
.mega-lettres li:has(a), .index-lettres li:has(a) { border-color: var(--noir); color: var(--noir); }
.mega-lettres a, .index-lettres a { display: grid; place-items: center; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.mega-lettres li:has(a:hover), .index-lettres li:has(a:hover) { background: var(--fuchsia); border-color: var(--fuchsia); color: var(--blanc); }

/* --------------------------------------------------------------------------
   Accueil : accroche
   -------------------------------------------------------------------------- */
.accroche {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
  margin-top: 64px;
}
.accroche-definition {
  max-width: 34em;
  margin-bottom: 28px;
  padding-left: 14px;
  border-left: 4px solid var(--fuchsia);
  font-size: 15px;
  line-height: 1.5;
  color: var(--gris-texte);
}
.accroche-definition strong { font-size: 17px; font-weight: 800; color: var(--encre); }
.accroche-definition em { color: var(--fuchsia); font-weight: 600; }
.accroche-titre {
  font-size: clamp(48px, 5.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--noir);
  text-wrap: balance;
}
.accroche-titre mark {
  display: inline-block;
  padding: .04em .1em .1em;
  background: var(--fuchsia);
  color: var(--blanc);
  line-height: .9;
}
.accroche-intro { max-width: 30em; margin: 28px 0 34px; font-size: 21px; line-height: 1.5; }
.accroche-cote { position: relative; padding: 0 0 72px 40px; }
.accroche-visuel { border: 2px solid var(--noir); box-shadow: 14px 14px 0 var(--fuchsia); overflow: hidden; }
.accroche-visuel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 60%; }
.mot-du-jour {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: min(340px, 86%);
  padding: 18px 22px 20px;
  border: 2px solid var(--noir);
  background: var(--blanc);
  box-shadow: 6px 6px 0 var(--noir);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mot-du-jour:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--noir); }
.mot-du-jour-etiquette { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fuchsia); }
.mot-du-jour-terme { margin-top: 4px; font-size: 44px; line-height: 1; }
.mot-du-jour-terme a { color: var(--encre); text-decoration: none; }
.mot-du-jour-long { font-size: 13px; font-style: italic; color: var(--gris-texte); }
.mot-du-jour-def { margin-top: 8px; font-size: 15px; line-height: 1.5; }

/* liens étirés : le titre porte le lien, toute la carte est cliquable */
.mot-du-jour-terme a::after, .etape-titre a::after, .rubrique-titre a::after, .dico-ligne-terme a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.etape, .rubrique-ligne, .dico-ligne { position: relative; }

/* --------------------------------------------------------------------------
   À la une : un article principal, deux secondaires (boucles de requête)
   -------------------------------------------------------------------------- */
.une-grille { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 56px; }
.une-visuel { border: 2px solid var(--noir); transition: transform .2s ease, box-shadow .2s ease; }
.une-visuel a { display: block; }
.une-visuel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.requete li:hover .une-visuel, .une-rubrique:hover .une-visuel { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--fuchsia); }
.une-texte { margin-top: 24px; }
.une-titre { line-height: 1.04; }
.une-titre a { color: var(--noir); text-decoration: none; }
.une-titre a:hover { color: var(--fuchsia); }
.une-principale .une-titre { max-width: 18em; font-size: clamp(32px, 3.2vw, 46px); }
.une-extrait { max-width: 38em; margin-top: 14px; font-size: 18px; line-height: 1.6; }
.une-extrait p { margin: 0; }
.une-secondaires-requete ul { display: grid; gap: 40px; }
.une-secondaires-requete .carte-meta { margin-top: 18px; }
.une-secondaires-requete .une-titre { font-size: 27px; }

/* --------------------------------------------------------------------------
   Quel est votre niveau ?
   -------------------------------------------------------------------------- */
.niveau-intro { max-width: 44em; font-size: 18px; }
.niveaux-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.niveau-bouton {
  position: relative;
  padding: 18px 22px 18px 66px;
  border: 2px solid var(--noir);
  background: var(--blanc);
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--gris-texte);
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.niveau-bouton br { display: none; }
.niveau-bouton strong { display: block; margin-bottom: 2px; font-size: 27px; line-height: 1.05; color: var(--noir); }
.niveau-bouton::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 28px;
  height: 32px;
  margin-top: -16px;
  background: var(--jauge-1) no-repeat center / contain;
}
.niveau-bouton.choix-intermediaire::before { background-image: var(--jauge-2); }
.niveau-bouton.choix-avance::before { background-image: var(--jauge-3); }
.niveau-bouton:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--noir); }
.niveau-bouton.est-actif { background: var(--noir); color: var(--gris-clair); }
.niveau-bouton.est-actif strong { color: var(--blanc); }
.niveau-bouton.est-actif.choix-debutant::before { background-image: var(--jauge-1-noir); }
.niveau-bouton.est-actif.choix-intermediaire::before { background-image: var(--jauge-2-noir); }

.parcours-niveau { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 44px; }
.parcours-niveau.est-actif { display: grid; }
.etape { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-right: 40px; }
/* flèche qui relie une étape à la suivante */
.etape:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 64px;
  right: 16px;
  border-top: 2px solid var(--noir);
}
.etape:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 19px;
  right: 16px;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--noir);
  border-right: 2px solid var(--noir);
  transform: rotate(45deg);
}
.etape-num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  background: var(--fuchsia);
  color: var(--blanc);
  font-size: 27px;
  line-height: 1;
}
.etape-titre { font-size: 28px; line-height: 1.05; }
.etape-titre a { color: var(--encre); text-decoration: none; }
.etape:hover .etape-titre a { color: var(--fuchsia); }
.etape-resume { max-width: 28em; font-size: 16px; line-height: 1.55; color: var(--gris-texte); }

/* --------------------------------------------------------------------------
   Les rubriques (sommaire) et derniers articles
   -------------------------------------------------------------------------- */
.rubriques-grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 56px; }
.rubriques-liste { margin-top: -14px; }
.rubrique-ligne {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 150px;
  align-items: center;
  gap: 24px;
  padding: 18px 14px;
  border-bottom: 1px solid var(--noir);
  transition: background .15s ease;
}
.rubrique-ligne:hover { background: var(--fuchsia-pale); }
.rubrique-num { font-size: 30px; line-height: 1; color: var(--gris-clair); }
.rubrique-ligne:hover .rubrique-num { color: var(--fuchsia); }
.rubrique-texte { display: flex; flex-direction: column; gap: 6px; }
.rubrique-titre { font-size: 30px; line-height: 1.05; }
.rubrique-titre a { color: var(--encre); text-decoration: none; }
.rubrique-chapo {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gris-texte);
}
.rubrique-image img { width: 150px; aspect-ratio: 3 / 2; object-fit: cover; border: 2px solid var(--noir); }

.derniers-cadre { padding: 22px 26px 8px; border: 2px solid var(--noir); box-shadow: 8px 8px 0 var(--noir); }
.derniers-titre { padding-bottom: 10px; border-bottom: 4px solid var(--fuchsia); font-size: 28px; line-height: 1; }
.derniers-requete li { padding: 14px 0; }
.derniers-requete li + li { border-top: 1px solid var(--filet); }
.liste-article-titre { font-size: 17px; font-weight: 700; font-stretch: 87.5%; line-height: 1.3; }
.liste-article-titre a { color: var(--encre); text-decoration: none; }
.liste-article-titre a:hover { color: var(--fuchsia); }
.liste-article-meta { display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: 4px; font-size: 13.5px; color: var(--gris-texte); }
.meta-rubrique a { color: inherit; text-decoration: none; }
.liste-article-meta .meta-date::before { content: "· "; }

/* --------------------------------------------------------------------------
   Lignes de dictionnaire (accueil, rubriques) et index
   -------------------------------------------------------------------------- */
.dico-accueil-cadre { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 56px; }
.dico-accueil-mots, .mots { margin-top: -14px; }
.dico-ligne {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  column-gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--filet);
}
.dico-ligne-terme { grid-row: 1 / 3; font-size: 46px; line-height: .95; }
.dico-ligne-terme a { color: var(--encre); text-decoration: none; }
.dico-ligne:hover .dico-ligne-terme a { color: var(--fuchsia); }
.dico-ligne-long { font-size: 13.5px; font-style: italic; color: var(--gris-texte); }
.dico-ligne-def { font-size: 17px; line-height: 1.55; }
.mots .dico-ligne-terme { font-size: 40px; }
.dico-accueil-index {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  padding: 26px;
  border: 2px solid var(--noir);
  box-shadow: 8px 8px 0 var(--fuchsia);
}
.dico-accueil-index .bouton-noir, .dico-accueil-index .bouton-noir > a { display: block; width: 100%; }
.index-titre { font-size: 30px; line-height: 1; }
.index-compte { font-size: 15px; }
.index-compte strong { font-size: 24px; }

/* --------------------------------------------------------------------------
   Appel : poser une question (bande fuchsia pleine largeur)
   -------------------------------------------------------------------------- */
.appel { margin-top: 112px; background: var(--fuchsia); color: var(--blanc); }
.appel-rangee { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-top: 64px; padding-bottom: 64px; }
.appel-titre { max-width: 13em; font-size: clamp(38px, 4.4vw, 62px); line-height: 1; }
.appel-intro { max-width: 36em; margin-top: 16px; font-size: 19px; line-height: 1.55; }
.appel-boutons { flex: none; }
.appel .bouton-blanc > a { font-size: 18px; padding: 15px 30px 16px; }

/* --------------------------------------------------------------------------
   Pages intérieures : en-tête de page
   -------------------------------------------------------------------------- */
.entete-page { display: grid; gap: 56px; padding: 56px 0 44px; border-bottom: 2px solid var(--noir); }
.entete-page.avec-visuel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.fil-ariane { margin-bottom: 18px; font-size: 14px; color: var(--gris-texte); }
.fil-ariane a { color: var(--encre); }
.titre-page { font-size: clamp(42px, 4.8vw, 72px); line-height: 1; letter-spacing: -.02em; color: var(--noir); text-wrap: balance; }
.chapo { max-width: 36em; margin-top: 22px; font-size: 20px; line-height: 1.5; }
.chapo p { margin: 0; }
.pastilles { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 22px; }
.entete-visuel { border: 2px solid var(--noir); box-shadow: 12px 12px 0 var(--fuchsia); overflow: hidden; }
.entete-visuel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* rubriques : carte « à lire en premier » couchée */
.une-rubrique { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 48px; }
.une-rubrique .une-texte { margin: 0; }
.une-rubrique .une-titre { font-size: clamp(30px, 3vw, 42px); }
.une-rubrique .une-extrait { font-size: 17px; }
.une-rubrique .boutons { margin-top: 24px; }
.points-liste + .une-rubrique { margin-top: 48px; }

/* listes numérotées (critères, questions des fiches) */
.points-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; counter-reset: point; }
.points-liste li {
  position: relative;
  padding: 18px 0 18px 64px;
  border-bottom: 1px solid var(--noir);
  font-size: 17px;
  line-height: 1.5;
  counter-increment: point;
}
.points-liste li::before {
  content: counter(point, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 16px;
  font-size: 30px;
  line-height: 1;
  color: var(--fuchsia);
}
.points-liste strong { display: block; font-size: 24px; line-height: 1.1; color: var(--noir); }
.points-liste br { display: none; }

/* qui appeler pour quoi */
.besoin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--noir);
}
.besoin-texte { font-size: 18px; line-height: 1.45; }
.besoin-metier { font-size: 28px; line-height: 1.05; text-align: right; }
.besoin-metier a { color: var(--fuchsia); text-decoration: none; }
.besoin-metier a:hover { color: var(--noir); }

/* programme de la rubrique */
.programme { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 56px; }
.programme-titre { padding-bottom: 10px; border-bottom: 2px solid var(--noir); font-size: 26px; line-height: 1.1; }
.programme-liste li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--filet);
  font-size: 16px;
  line-height: 1.45;
  color: var(--gris-texte);
}
.programme-liste li::after {
  content: "À paraître";
  flex: none;
  padding: 2px 8px;
  border: 1px dashed var(--gris-clair);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.programme-liste li:has(a) { color: var(--encre); }
.programme-liste li:has(a)::after { content: "À lire"; border: 1px solid var(--fuchsia); background: var(--fuchsia); color: var(--blanc); }
.programme-liste a { font-weight: 700; color: inherit; text-decoration: none; }
.programme-liste a:hover { color: var(--fuchsia); }

/* --------------------------------------------------------------------------
   Article
   -------------------------------------------------------------------------- */
.entete-article { max-width: 1000px; padding: 48px 0 36px; }
.fil-ariane:has(.fil-rubrique) { display: flex; flex-wrap: wrap; gap: 10px; }
.fil-rubrique::before { content: "/"; margin-right: 10px; color: var(--gris-texte); }
.fil-rubrique a { color: var(--encre); }
.entete-article .titre-page { font-size: clamp(38px, 4.6vw, 68px); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 24px; font-size: 14.5px; color: var(--gris-texte); }
.article-meta .meta-date { font-size: inherit; }
.meta-lecture::after { content: " de lecture"; }
.meta-niveau a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--encre); text-decoration: none; }
.meta-niveau a::after { content: ""; width: 16px; height: 18px; background: var(--jauge-1) no-repeat center / contain; }
.meta-niveau a[href*="/intermediaire"]::after { background-image: var(--jauge-2); }
.meta-niveau a[href*="/avance"]::after { background-image: var(--jauge-3); }
.article-visuel { margin-bottom: 72px; border: 2px solid var(--noir); box-shadow: 14px 14px 0 var(--fuchsia); overflow: hidden; }
.article-visuel img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.article-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 72px; }

.article-corps { display: flow-root; max-width: 720px; font-size: 18px; line-height: 1.75; }
.article-corps > * + * { margin-top: 20px; }
.article-corps h2 { margin-top: 56px; font-size: 34px; line-height: 1.1; scroll-margin-top: 24px; }
.article-corps h3 { margin-top: 36px; font-size: 25px; line-height: 1.15; }
.article-corps ul > li, .texte-legal ul > li, .contact-liste > li { position: relative; padding-left: 26px; }
.article-corps ul > li + li { margin-top: 8px; }
.article-corps ul > li::before, .texte-legal ul > li::before, .contact-liste > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .72em;
  width: 8px;
  height: 8px;
  background: var(--fuchsia);
}
.article-corps ol { counter-reset: liste; }
.article-corps ol > li { position: relative; padding-left: 34px; counter-increment: liste; }
.article-corps ol > li + li { margin-top: 8px; }
.article-corps ol > li::before { content: counter(liste) "."; position: absolute; left: 0; font-weight: 800; color: var(--fuchsia); }
.article-corps a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--fuchsia); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.article-corps a[href*="/dictionnaire/#"] { text-decoration: none; border-bottom: 2px dotted var(--fuchsia); }
.article-corps a:hover { color: var(--fuchsia); }
.article-corps strong { font-weight: 700; }
.encadre { margin-top: 36px; padding: 24px 28px; border: 2px solid var(--noir); box-shadow: 8px 8px 0 var(--fuchsia); }
.encadre > * + * { margin-top: 10px; }
.article-corps > .encadre + * { margin-top: 36px; }
.encadre-titre, .guide-titre, .contact-infos-titre {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fuchsia);
}
.en-bref { margin-bottom: 40px; padding: 24px 28px; border-left: 6px solid var(--fuchsia); background: var(--papier); }
.en-bref-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin-top: 14px; }
.en-bref-label { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gris-texte); }
.en-bref-valeur { margin-top: 2px; font-size: 16px; line-height: 1.5; }
.comparatif { overflow-x: auto; }
.comparatif table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.comparatif th, .comparatif td { padding: 14px 18px 14px 0; border: 0; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; }
.comparatif thead th { padding: 10px 14px; border-bottom: 0; background: var(--noir); color: var(--blanc); font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.comparatif tbody th { min-width: 140px; padding-left: 14px; font-weight: 700; }
.note { font-size: 15px; line-height: 1.6; color: var(--gris-texte); }

/* guide de l'article, colonne de droite */
.guide { position: sticky; top: 24px; padding: 24px; border: 2px solid var(--noir); }
.guide-bloc + .guide-bloc { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--filet); }
.guide-bloc:not(:has(li)) { display: none; }
.guide-sommaire, .guide-termes, .articles-similaires { margin-top: 10px; }
.guide-sommaire { counter-reset: sommaire; }
.guide-sommaire li { counter-increment: sommaire; }
.guide-sommaire a { position: relative; display: block; padding: 6px 0 6px 30px; font-size: 15px; line-height: 1.4; color: var(--encre); text-decoration: none; }
.guide-sommaire a::before { content: counter(sommaire, decimal-leading-zero); position: absolute; left: 0; font-weight: 800; font-stretch: 75%; color: var(--gris-clair); }
.guide-sommaire a:hover, .guide-sommaire a.est-actif { color: var(--fuchsia); }
.guide-sommaire a.est-actif { font-weight: 700; }
.guide-sommaire a.est-actif::before { color: var(--fuchsia); }
.guide-termes { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-termes a { display: inline-block; padding: 3px 10px 4px; border: 2px solid var(--noir); font-size: 17px; color: var(--noir); text-decoration: none; }
.guide-termes a:hover { border-color: var(--fuchsia); background: var(--fuchsia); color: var(--blanc); }
.articles-similaires li + li { border-top: 1px solid var(--filet); }
.similaire-titre a { display: block; padding: 10px 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--encre); text-decoration: none; }
.similaire-titre a:hover { color: var(--fuchsia); }

/* prochaine lecture */
.suite { margin-top: 88px; }
.suite a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 32px;
  padding: 32px 36px;
  background: var(--noir);
  color: var(--blanc);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.suite a::after { content: "→"; grid-row: 1 / 3; grid-column: 2; font-size: 44px; line-height: 1; color: var(--fuchsia-clair); }
.suite a:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--fuchsia); }
.post-navigation-link__label { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fuchsia-clair); }
.post-navigation-link__title { font-size: clamp(28px, 3vw, 40px); line-height: 1.05; }

/* --------------------------------------------------------------------------
   Dictionnaire
   -------------------------------------------------------------------------- */
.dico-outils {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  gap: 14px;
  padding: 22px 0 16px;
  border-bottom: 2px solid var(--noir);
  background: var(--blanc);
}
.dico-recherche input {
  width: 100%;
  height: 56px;
  padding: 0 20px 0 54px;
  border: 2px solid var(--noir);
  border-radius: 0;
  background: var(--blanc) var(--loupe) no-repeat 18px center / 20px 20px;
  font-size: 17px;
  -webkit-appearance: none;
  appearance: none;
}
.dico-recherche input:focus { outline: 3px solid var(--fuchsia); outline-offset: 0; }
.dico-domaines { display: flex; flex-wrap: wrap; gap: 8px; }
.filtre {
  padding: 5px 14px 6px;
  border: 2px solid var(--noir);
  font-size: 14px;
  font-weight: 700;
  font-stretch: 87.5%;
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.filtre:hover { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--noir); }
.filtre.est-actif { background: var(--noir); color: var(--blanc); }
.dico-lettres { display: flex; flex-wrap: wrap; gap: 4px; }
.dico-lettres li { display: grid; place-items: center; width: 34px; height: 34px; font-size: 18px; color: var(--gris-clair); }
.dico-lettres li:has(a) { color: var(--noir); }
.dico-lettres a { display: grid; place-items: center; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.dico-lettres a:hover { background: var(--fuchsia); color: var(--blanc); }
.dico-compte { margin-top: 28px; font-size: 15px; }
.dico-compte strong { font-size: 24px; }
.dico-aucun { display: none; margin-top: 18px; padding: 18px 22px; border: 2px solid var(--noir); font-size: 16px; }
.dico-aucun.est-visible { display: block; }
.dico-aucun a { color: var(--fuchsia); font-weight: 700; }
.dico-groupe { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 40px; padding-top: 36px; }
.dico-groupe.est-masque { display: none; }
.dico-lettre { position: sticky; top: 190px; grid-row: 1 / span 60; align-self: start; font-size: 96px; line-height: .9; color: var(--fuchsia); }
.dico-entree {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 8px 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--filet);
  scroll-margin-top: 210px;
}
.dico-entree.est-masquee { display: none; }
.dico-entree:target { background: var(--fuchsia-pale); box-shadow: -16px 0 0 var(--fuchsia-pale), 16px 0 0 var(--fuchsia-pale); }
.dico-terme { font-size: 34px; line-height: 1.05; }
.dico-etiquettes { margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fuchsia); }
.dico-texte > * + * { margin-top: 8px; }
.dico-long { font-size: 14px; font-style: italic; color: var(--gris-texte); }
.dico-def { font-size: 17px; line-height: 1.6; }
.dico-exemple { padding-left: 14px; border-left: 3px solid var(--fuchsia); font-size: 16px; line-height: 1.6; color: var(--gris-texte); }
.dico-exemple strong { color: var(--encre); }
.dico-lien { font-size: 15px; font-weight: 700; }
.dico-lien a { color: var(--encre); }

/* --------------------------------------------------------------------------
   Contact, pages légales, 404
   -------------------------------------------------------------------------- */
/* pages sans bande d'appel : de l'air avant le pied de page */
.contact-grille, .texte-legal { margin-bottom: 104px; }
.contact-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 64px; margin-top: 56px; }
.formulaire { display: grid; gap: 20px; padding: 32px; border: 2px solid var(--noir); box-shadow: 10px 10px 0 var(--fuchsia); }
.champ label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; font-stretch: 87.5%; }
.champ input, .champ select, .champ textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--noir);
  border-radius: 0;
  background: var(--blanc);
  font-size: 16px;
  line-height: 1.4;
}
.champ textarea { resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 3px solid var(--fuchsia); outline-offset: 0; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire-mention { font-size: 14px; color: var(--gris-texte); }
.formulaire-mention a { color: var(--encre); }
.formulaire-retour { padding: 14px 18px; border: 2px solid var(--noir); font-size: 16px; font-weight: 600; }
.formulaire-ok { background: var(--fuchsia-pale); }
.formulaire-erreur { border-color: var(--fuchsia); color: var(--fuchsia-fonce); }
.contact-infos-titre:not(:first-child) { margin-top: 30px; }
.contact-liste { margin-top: 10px; }
.contact-liste li + li { margin-top: 6px; }
.contact-adresse { margin-top: 8px; }
.contact-adresse a { font-size: 26px; color: var(--noir); text-decoration: underline; text-decoration-color: var(--fuchsia); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.contact-texte { margin-top: 8px; }

.texte-legal { max-width: 760px; margin-top: 48px; font-size: 17px; line-height: 1.7; }
.texte-legal h2 { margin-top: 44px; font-size: 30px; line-height: 1.1; }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal h2 + p, .texte-legal p + p { margin-top: 12px; }
.texte-legal a { color: var(--encre); }
.texte-legal .mise-a-jour { margin-top: 48px; font-size: 14px; color: var(--gris-texte); }

.page-404 { max-width: 820px; padding: 72px 0 104px; }
.erreur-code { font-size: clamp(120px, 18vw, 240px); line-height: .85; color: var(--fuchsia); }
.page-404 .titre-page { margin-top: 18px; }
.recherche-site { margin-top: 32px; }
.recherche-site > div { display: flex; gap: 10px; }
.recherche-site input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 18px;
  border: 2px solid var(--noir);
  border-radius: 0;
  background: var(--blanc);
  font-size: 17px;
  -webkit-appearance: none;
  appearance: none;
}
.recherche-site button {
  flex: none;
  padding: 0 24px;
  border: 2px solid var(--noir);
  border-radius: 0;
  background: var(--noir);
  color: var(--blanc);
  font-weight: 700;
  font-stretch: 87.5%;
  cursor: pointer;
}
.erreur-boutons { margin-top: 28px; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied { background: var(--noir); color: var(--blanc); padding-top: 64px; }
.pied-haut {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid #333;
}
.pied-logo a { display: flex; align-items: center; gap: 10px; font-size: 48px; line-height: 1; color: var(--blanc); text-decoration: none; }
.pied-logo a::after { width: 46px; height: 46px; font-size: 34px; }
.pied-baseline { max-width: 24em; font-size: 16px; text-align: right; color: var(--gris-clair); }
.pied-colonnes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; padding: 40px 0 44px; }
.pied-titre { margin-bottom: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fuchsia-clair); }
.pied-texte { margin-bottom: 18px; font-size: 14.5px; line-height: 1.6; color: var(--gris-clair); }
.pied-liste li + li { margin-top: 8px; }
.pied-liste a { font-size: 15px; line-height: 1.4; text-decoration: none; }
.pied-liste a:hover { color: var(--fuchsia-clair); }
.pied-requete li { margin-bottom: 14px; }
.pied-article-titre { margin-bottom: 4px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.pied-article-titre a { color: var(--blanc); text-decoration: none; }
.pied-article-titre a:hover { color: var(--fuchsia-clair); }
.pied .meta-date { color: #9d9d9d; }
.pied-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 20px 0 28px;
  border-top: 1px solid #333;
  font-size: 13.5px;
  color: var(--gris-clair);
}
.pied-legal { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.pied-legal a { font-size: 13.5px; color: var(--blanc); text-decoration: none; }
.pied-legal a:hover { color: var(--fuchsia-clair); }

/* --------------------------------------------------------------------------
   Consentement aux cookies (refuser aussi simple qu'accepter)
   -------------------------------------------------------------------------- */
.consentement {
  display: none;
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 150;
  width: min(580px, calc(100% - 32px));
  padding: 24px 26px;
  border: 2px solid var(--noir);
  background: var(--blanc);
  box-shadow: 8px 8px 0 var(--fuchsia);
}
.consentement.est-visible { display: block; }
.consentement-titre { font-size: 30px; line-height: 1.05; }
.consentement-texte { margin-top: 10px; font-size: 14.5px; line-height: 1.55; }
.consentement-details { display: none; margin-top: 16px; border-top: 2px solid var(--noir); }
.consentement.est-detaille .consentement-details { display: block; }
.consentement-ligne {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--filet);
  font-size: 14px;
  line-height: 1.5;
}
.consentement-ligne input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--fuchsia); }
.consentement-ligne strong { display: block; font-size: 15px; }
.consentement-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.consentement-boutons button { padding: 10px 18px 11px; font-size: 15px; }
.consentement-enregistrer { display: none; }
.consentement.est-detaille .consentement-enregistrer { display: inline-block; }
.consentement.est-detaille .consentement-personnaliser { display: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .entete-rangee { justify-content: space-between; }
  nav.nav-principale { display: none; }
  p.burger { display: block; }
  .menu-mobile.est-ouvert { display: block; }
  .mega-cadre { display: none !important; }
  .rubriques-grille, .dico-accueil-cadre { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
  .article-grille { grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; }
}

@media (max-width: 1024px) {
  .accroche { grid-template-columns: 1fr; gap: 48px; margin-top: 44px; }
  .accroche-cote { max-width: 620px; }
  .une-grille { grid-template-columns: 1fr; }
  .une-secondaires-requete ul { grid-template-columns: 1fr 1fr; gap: 32px; }
  .niveaux-choix { grid-template-columns: 1fr; gap: 10px; }
  .parcours-niveau { grid-template-columns: 1fr; }
  .etape { padding: 0 0 34px 72px; }
  .etape:not(:last-child)::before { top: 56px; left: 23px; right: auto; bottom: 0; border-top: 0; border-left: 2px solid var(--noir); }
  .etape:not(:last-child)::after { display: none; }
  .etape-num { position: absolute; left: 0; top: 0; }
  .rubriques-grille, .dico-accueil-cadre { grid-template-columns: 1fr; }
  .pied-colonnes { grid-template-columns: 1fr 1fr; }
  .entete-page.avec-visuel { grid-template-columns: 1fr; gap: 40px; }
  .entete-visuel { max-width: 620px; }
  .une-rubrique { grid-template-columns: 1fr; gap: 28px; }
  .points-liste, .programme { grid-template-columns: 1fr; }
  .article-grille { grid-template-columns: 1fr; }
  .guide { position: static; order: -1; }
  .contact-grille { grid-template-columns: 1fr; gap: 40px; }
  .dico-groupe { grid-template-columns: 1fr; }
  .dico-lettre { position: static; grid-row: auto; font-size: 72px; }
}

@media (max-width: 720px) {
  :where(body) { font-size: 16px; }
  .conteneur { padding-left: 18px; padding-right: 18px; }
  .entete-rangee { height: 64px; gap: 10px; }
  .logo a { font-size: 24px; }
  .logo a::after { width: 28px; height: 28px; font-size: 21px; }
  .entete-actions .entete-niveau { display: none; } /* plus précis que la classe de mise en page du bloc */
  .menu-mobile { padding: 6px 18px 18px; }
  .accroche-titre { font-size: clamp(40px, 11.5vw, 56px); }
  .accroche-intro { font-size: 18px; }
  .accroche-cote { padding: 0 14px 0 0; }
  .mot-du-jour { position: relative; width: auto; margin: -36px -14px 0 18px; }
  .entete-section { margin: 72px 0 26px; }
  .une-secondaires-requete ul { grid-template-columns: 1fr; }
  .une-secondaires-requete .une-titre { font-size: 24px; }
  .une-extrait { font-size: 16px; }
  .niveau-bouton strong { font-size: 24px; }
  .etape-titre { font-size: 24px; }
  .rubrique-ligne { grid-template-columns: 34px minmax(0, 1fr) 84px; gap: 14px; padding: 16px 0; }
  .rubrique-num { font-size: 22px; }
  .rubrique-titre { font-size: 23px; }
  .rubrique-chapo { display: none; }
  .rubrique-image img { width: 84px; }
  .dico-ligne { grid-template-columns: 1fr; row-gap: 4px; }
  .dico-ligne-terme { grid-row: auto; font-size: 38px; }
  .appel { margin-top: 80px; }
  .appel-rangee { flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 48px; padding-bottom: 52px; }
  .pied-haut { flex-direction: column; align-items: flex-start; }
  .pied-logo a { font-size: 36px; }
  .pied-logo a::after { width: 36px; height: 36px; font-size: 27px; }
  .pied-baseline { text-align: left; }
  .pied-colonnes { grid-template-columns: 1fr; gap: 30px; }
  .pied-legal { flex-direction: column; gap: 10px; }
  .consentement { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px; box-shadow: 5px 5px 0 var(--fuchsia); }
  .consentement-boutons button { flex: 1 1 auto; }
  .entete-page { padding: 40px 0 32px; }
  .chapo { font-size: 18px; }
  .besoin { grid-template-columns: 1fr; gap: 4px; }
  .besoin-metier { text-align: left; font-size: 24px; }
  .article-visuel { margin-bottom: 44px; box-shadow: 8px 8px 0 var(--fuchsia); }
  .article-visuel img { aspect-ratio: 4 / 3; }
  .article-corps { font-size: 17px; }
  .article-corps h2 { font-size: 29px; }
  .en-bref-grille { grid-template-columns: 1fr; }
  .suite a { padding: 24px; }
  .suite a::after { font-size: 32px; }
  .dico-entree { grid-template-columns: 1fr; }
  .dico-outils { position: static; }
  .formulaire { padding: 22px; box-shadow: 6px 6px 0 var(--fuchsia); }
  .recherche-site > div { flex-direction: column; }
  .recherche-site button { height: 52px; }
}

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


/* ==========================================================================
   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 ajoute. Le CSS d'un bloc est imprimé après cette feuille :
   toute surcharge d'un style de bloc est écrite plus spécifique.
   ========================================================================== */

/* aucune marge automatique entre blocs (blockGap est coupé dans theme.json) ;
   filet de sécurité à spécificité nulle, qui ne touche jamais aux marges des composants */
:where(.vr-block-group) > :where(*),
:where(.vr-block-buttons),
:where(.vr-site-blocks) > :where(*) { margin-block: 0; }
figure.vr-block-image { margin: 0; }
.vr-block-image img { height: auto; }

/* titres liés des boucles de requête : en ligne, comme dans la maquette */
.une-titre a, .liste-article-titre a, .pied-article-titre a, .mega-carte-titre a { display: inline; }
.vr-block-post-excerpt__excerpt { margin: 0; }

/* navigation native à la place des listes de la maquette */
.vr-block-navigation.nav-principale,
.vr-block-navigation.nav-mobile { gap: 0; font-size: inherit; }
.nav-principale .vr-block-navigation__container { flex-wrap: nowrap; justify-content: center; gap: 0; }
.nav-mobile .vr-block-navigation__container { flex-direction: column; align-items: stretch; gap: 0; }
.nav-mobile .vr-block-navigation-item { display: block; }

/* boutons : le style va sur le lien, l'enveloppe reste neutre */
.vr-block-buttons > .vr-block-button { margin: 0; }
.dico-accueil-index .vr-block-button.bouton-noir,
.dico-accueil-index .vr-block-button.bouton-noir > a { display: block; width: 100%; }

/* champs de recherche natifs */
.dico-recherche .vr-block-search__inside-wrapper,
.recherche-site .vr-block-search__inside-wrapper { padding: 0; border: 0; }
.recherche-site .vr-block-search__button { margin: 0; }

/* tableau des articles */
.vr-block-table.comparatif { margin: 0; overflow-x: auto; }
.vr-block-table.comparatif table { width: 100%; border-collapse: collapse; }
.vr-block-table.comparatif thead { border-bottom: 0; }
.vr-block-table.comparatif th,
.vr-block-table.comparatif td { padding: 14px 18px 14px 0; border: 0; border-bottom: 1px solid var(--filet); }
.vr-block-table.comparatif thead th { padding: 10px 14px; border-bottom: 0; }
.vr-block-table.comparatif tbody th { padding-left: 14px; }

/* archives, recherche : grille d'articles */
.liste-requete > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 40px; margin-top: 48px; }
.liste-requete .carte-meta { margin-top: 18px; }
.liste-requete .une-titre { font-size: 27px; }
.liste-requete .une-extrait { margin-top: 10px; font-size: 16px; }
.pagination { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; font-weight: 700; }
.pagination a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--fuchsia); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.liste-requete + .appel, main + .appel { margin-top: 112px; }

/* barre d'administration (personnes connectées) */
.admin-bar .dico-outils { top: 32px; }

@media (max-width: 1024px) {
  .liste-requete > ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 782px) {
  .admin-bar .dico-outils { top: 46px; }
}
@media (max-width: 720px) {
  .liste-requete > ul { grid-template-columns: 1fr; }
}