/* =====================================================================
   jaitoutcompris.com - feuille de style
   Bleu nuit + jaune « surligneur » sur fond papier.
   Titres : Schibsted Grotesk · Texte : Figtree (polices hébergées sur le site)
   ===================================================================== */

/* ---------- Polices ---------- */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/fonts/schibsted-grotesk.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree-italic.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Couleurs et réglages ---------- */
:root {
  --encre: #14213D;        /* bleu nuit : texte, titres, fonds sombres */
  --papier: #F5F3EC;       /* fond du site */
  --blanc: #FFFFFF;
  --jaune: #FFD84D;        /* surligneur */
  --bleu: #3D5A99;         /* liens secondaires, surtitres */
  --gris: #5E6576;         /* textes discrets */
  --gris-clair: #C4CADB;   /* textes sur fond sombre */
  --filet: #C9C4B4;        /* lignes de séparation */
  --bordure: #DDD8C8;      /* contour des cartes */
  --placeholder: #E8E5D9;  /* fond d'une image en chargement */
  --titres: 'Schibsted Grotesk', system-ui, sans-serif;
  --texte: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rayon: 18px;
  --largeur: 1200px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: clip;   /* évite un défilement horizontal dû aux bandeaux pleine largeur */
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--encre); text-decoration: none; }
a:hover { color: var(--bleu); }
h1, h2, h3 { font-family: var(--titres); line-height: 1.15; margin: 0; }
p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
.invisible {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Bandeau du jour ---------- */
.bandeau { background: var(--encre); color: var(--papier); font-size: 14px; }
.bandeau-int { display: flex; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.bandeau a { color: var(--papier); font-weight: 600; }
.bandeau a:hover { color: var(--jaune); }
.bandeau-poser { display: inline-flex; align-items: center; gap: 7px; }
.bandeau-poser svg { flex: none; color: var(--jaune); }

/* ---------- En-tête ---------- */
.entete { padding-top: 28px; }
.entete-haut { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

.logo { font-family: var(--titres); font-size: 38px; letter-spacing: -1.4px; line-height: 1; white-space: nowrap; }
.logo:hover { color: var(--encre); }
.logo-fin { font-weight: 400; }
.logo-tout { font-weight: 900; }
/* « compris » (le mot qui suit « tout ») : un trait de surligneur jaune, comme un coup de feutre */
.logo-tout + .logo-fin {
  padding: 0 2px;
  background: linear-gradient(transparent 62%, var(--jaune) 62%, var(--jaune) 92%, transparent 92%);
}

.recherche { display: flex; flex: 0 1 420px; min-width: 260px; }
.recherche input {
  flex: 1; min-width: 0; font-size: 16px; padding: 13px 16px;
  border: 2px solid var(--encre); border-right: 0; border-radius: 12px 0 0 12px;
  background: var(--blanc);
}
.recherche button {
  font-weight: 700; padding: 0 20px; border: 2px solid var(--encre);
  border-radius: 0 12px 12px 0; background: var(--encre); color: var(--papier); cursor: pointer;
}
.recherche button:hover { background: var(--bleu); border-color: var(--bleu); }

.menu {
  margin-top: 26px; display: flex; gap: 6px; white-space: nowrap;
  border-top: 2px solid var(--encre); border-bottom: 1px solid var(--filet);
  font-weight: 600; font-size: 16px;
  overflow-x: auto; scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none; }

/* ---------- Barre compacte (réapparaît en remontant) ---------- */
/* --barre : hauteur de la barre quand elle est visible ; les blocs « collants »
   (sommaire, ingrédients, lecteur...) se décalent d'autant pour ne pas passer dessous */
:root { --barre: 0px; }
body.barre-ouverte { --barre: 64px; }
.barre-fixe {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--blanc); border-bottom: 2px solid var(--encre);
  transform: translateY(-110%); transition: transform .25s ease;
}
.barre-fixe.visible { transform: none; box-shadow: 0 8px 24px rgba(20, 33, 61, .08); }
.barre-fixe-int { display: flex; align-items: center; gap: 22px; height: 62px; }
.logo-barre { font-size: 26px; letter-spacing: -1px; flex: none; }
.barre-titre {
  flex: 1; min-width: 0; padding-left: 22px; border-left: 1px solid var(--filet);
  font-family: var(--titres); font-weight: 800; font-size: 18px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barre-recherche { display: none; flex: 1; min-width: 0; }
.barre-recherche input {
  width: 100%; height: 44px; padding: 0 16px; font-size: 16px;
  border: 2px solid var(--encre); border-radius: 12px; background: var(--blanc);
}
.barre-fixe.cherche .barre-titre { display: none; }
.barre-fixe.cherche .barre-recherche { display: flex; }
.barre-recherche input::-webkit-search-cancel-button { display: none; }
.barre-loupe {
  flex: none; margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 12px; background: var(--encre); color: var(--papier); cursor: pointer;
}
.barre-loupe:hover { background: var(--jaune); color: var(--encre); }
.barre-loupe .icone-fermer, .barre-fixe.cherche .icone-loupe { display: none; }
.barre-fixe.cherche .icone-fermer { display: block; }
@media (prefers-reduced-motion: reduce) { .barre-fixe { transition: none; } }
.menu a { padding: 15px 14px; border-bottom: 4px solid transparent; }
.menu a.actif, .menu a:hover { border-bottom-color: var(--jaune); color: var(--encre); }

.principal { padding-top: 40px; }

/* ---------- Éléments communs ---------- */
.surtitre, .etiquette {
  font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
.surtitre { color: var(--bleu); }
.etiquette { color: var(--gris); }

.vignette {
  display: block; overflow: hidden; border-radius: 16px; background: var(--placeholder);
  aspect-ratio: 8 / 5;
}
.vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
a:hover .vignette img, a.vignette:hover img { transform: scale(1.03); }
.vignette-large { border-radius: 22px; }
.vignette.carree { aspect-ratio: 1 / 1; border-radius: var(--rayon); }
.vignette.photo-4-3 { aspect-ratio: 4 / 3; }

.surligne { background: linear-gradient(transparent 55%, var(--jaune) 55%); }

.bouton-jaune {
  display: inline-block; font-weight: 700; background: var(--jaune);
  border-radius: 10px; padding: 9px 14px;
}
.bouton-jaune:hover { color: var(--encre); filter: brightness(.95); }
.bouton-sombre {
  display: block; text-align: center; font-weight: 700; background: var(--encre); color: var(--papier);
  border-radius: 12px; padding: 16px 20px;
}
.bouton-sombre:hover { background: var(--bleu); color: var(--blanc); }
.bouton-contour {
  display: block; text-align: center; font-weight: 600; border: 2px solid var(--encre);
  border-radius: 12px; padding: 12px 20px;
}
.bouton-contour:hover { background: var(--encre); color: var(--papier); }

.lien-suite { font-weight: 600; color: var(--bleu); }
.lien-suite:hover { text-decoration: underline; }

/* ---------- Blocs de page ---------- */
.bloc { margin-top: 72px; }
.bloc-titre {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.bloc-titre h2, .titre-bloc-seul { font-size: 34px; font-weight: 800; letter-spacing: -0.8px; }
.titre-bloc-seul { margin-bottom: 20px; }
.titre-bloc-seul.petit { font-size: 24px; }
.bloc-liens { display: flex; gap: 12px 22px; align-items: baseline; flex-wrap: wrap; }

.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.grille-3.serree { gap: 24px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.colonnes-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; }
.colonnes-1-1 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }

/* ---------- Accueil : la Une ---------- */
.une { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.une article { display: flex; flex-direction: column; gap: 12px; }
.une-principale { gap: 16px !important; }
.une-secondaires { display: flex; flex-direction: column; gap: 28px; }
.titre-une { font-size: 40px; font-weight: 800; line-height: 1.08; letter-spacing: -1px; }
.titre-carte { font-size: 22px; font-weight: 800; line-height: 1.2; }

/* ---------- Cartes ---------- */
.carte-question {
  display: flex; flex-direction: column; background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.carte-question:hover { color: var(--encre); box-shadow: 0 8px 24px rgba(20, 33, 61, .10); transform: translateY(-2px); }
.carte-image { position: relative; display: block; aspect-ratio: 8 / 5; background: var(--placeholder); }
.carte-image img { width: 100%; height: 100%; object-fit: cover; }
.pastille {
  position: absolute; left: 14px; bottom: 14px; background: var(--encre); color: var(--papier);
  font-size: 12px; font-weight: 700; border-radius: 99px; padding: 5px 11px;
}
.carte-texte { padding: 20px 22px 24px; font-family: var(--titres); font-weight: 600; font-size: 21px; line-height: 1.25; }

.carte-simple { display: flex; flex-direction: column; gap: 12px; }
.carte-simple-titre { font-weight: 700; font-size: 18px; line-height: 1.3; }
.carte-simple-titre.grand { font-family: var(--titres); font-size: 20px; }

.carte-recette { display: flex; flex-direction: column; gap: 10px; }
.carte-recette-titre { font-family: var(--titres); font-weight: 700; font-size: 21px; line-height: 1.2; }
.meta { font-size: 14px; color: var(--gris); }

/* ---------- Mot du jour ---------- */
.mot-du-jour {
  background: var(--blanc); border: 2px solid var(--encre); border-radius: var(--rayon);
  padding: 30px; align-self: start;
}
.mot-du-jour .etiquette { margin-bottom: 18px; }
.mot-du-jour .mot { font-family: var(--titres); font-weight: 800; font-size: 40px; letter-spacing: -1px; line-height: 1.1; }
.mot-du-jour .nature { margin: 8px 0 0; font-size: 15px; color: var(--gris); font-style: italic; }
.mot-du-jour .definition { margin: 16px 0 22px; font-size: 17px; line-height: 1.55; }
.mots-lies { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 600; }
.mots-lies a { background: var(--papier); border-radius: 8px; padding: 6px 10px; }

/* ---------- Liste avec petite photo (recettes de l'accueil...) ---------- */
.liste-mini { display: flex; flex-direction: column; }
.liste-mini a {
  display: flex; gap: 18px; align-items: center; padding: 14px 0; border-top: 1px solid var(--filet);
  font-family: var(--titres); font-weight: 700; font-size: 20px; line-height: 1.25;
}
.liste-mini-texte { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.liste-mini .mini-photo { order: 2; }   /* photo à droite du texte */
.liste-mini .meta { font-family: var(--texte); font-weight: 400; }
.mini-photo { width: 120px; height: 75px; flex: none; border-radius: 12px; overflow: hidden; background: var(--placeholder); }
.mini-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Bandeau quiz ---------- */
.bandeau-quiz {
  background: var(--jaune); border-radius: 22px; padding: 44px;
  display: flex; flex-wrap: wrap; gap: 36px; align-items: center; justify-content: space-between;
}
.bandeau-quiz-texte { flex: 1 1 360px; }
.bandeau-quiz-texte .etiquette { color: var(--encre); margin-bottom: 10px; }
.bandeau-quiz h2 { font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -1px; }
.bandeau-quiz-liens { display: flex; flex-direction: column; gap: 10px; flex: 0 1 360px; }

/* ---------- Les plus lus ---------- */
.plus-lus { margin: 0; padding: 0; list-style: none; }
.plus-lus li { display: flex; gap: 22px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--filet); }
.plus-lus .rang { font-family: var(--titres); font-weight: 800; font-size: 34px; color: var(--bleu); min-width: 40px; }
.plus-lus a { font-weight: 600; font-size: 19px; line-height: 1.35; }

/* ---------- Thèmes (pastilles) ---------- */
.themes { display: flex; flex-wrap: wrap; gap: 8px; font-weight: 600; font-size: 15px; }
.themes a { background: var(--blanc); border: 1px solid var(--bordure); border-radius: 10px; padding: 9px 13px; }
.themes a:hover { border-color: var(--encre); color: var(--encre); }

/* ---------- Page d'erreur / chantier ---------- */
.page-erreur { max-width: 680px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 18px; }
.page-erreur h1 { font-size: 44px; font-weight: 900; letter-spacing: -1.3px; }
.page-erreur .recherche { flex: none; max-width: 520px; }

/* ---------- Pied de page ---------- */
.pied { margin-top: 96px; background: var(--encre); color: var(--papier); }
.pied a { color: var(--papier); }
.pied a:hover { color: var(--jaune); }
.pied-int { padding-top: 56px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 36px; }
.pied-colonnes { display: flex; flex-wrap: wrap; gap: 32px 48px; justify-content: space-between; }
.pied-marque { flex: 1 1 260px; }
.pied-marque p:last-child { margin-top: 8px; color: var(--gris-clair); }
.logo-pied { font-size: 28px; }
.logo-pied .logo-tout { color: inherit; }
.logo-pied .logo-tout + .logo-fin { background: linear-gradient(transparent 70%, var(--jaune) 70%, var(--jaune) 92%, transparent 92%); }
.pied-liens { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.pied-sites { font-size: 14px; color: var(--gris-clair); line-height: 1.8; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .15); }
.pied-sites a { color: var(--gris-clair); }
.pied-copy { font-size: 13px; color: var(--gris-clair); margin-top: -26px; }   /* plus près des autres sites (l'écart commun est de 36px) */


/* =====================================================================
   PAGES INTÉRIEURES
   ===================================================================== */

/* ---------- En-tête de rubrique ---------- */
.entete-rubrique { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; max-width: 820px; }
.entete-rubrique h1 { font-size: 56px; font-weight: 900; letter-spacing: -1.8px; line-height: 1; }
.entete-rubrique .intro { font-size: 19px; line-height: 1.5; color: #4A5168; }
.entete-avec-recherche {
  max-width: none; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.entete-avec-recherche > div { flex: 1 1 520px; display: flex; flex-direction: column; gap: 12px; }
.entete-avec-recherche .recherche { flex: 0 1 380px; min-width: 240px; }
.titre-police { font-family: var(--titres); font-size: 19px; line-height: 1.25; }
.liste-cartes { row-gap: 36px; }

/* Thèmes avec compteur */
.themes-compteur span { color: var(--gris); font-weight: 500; margin-left: 2px; }
.themes-compteur .theme-jaune { background: var(--jaune); border-color: var(--jaune); font-weight: 700; }

/* Blocs par thème (sommaire des questions) */
.bloc-theme { margin-top: 64px; padding-top: 26px; border-top: 2px solid var(--encre); }
.bloc-theme h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; }
.intro-theme { margin-top: 6px; color: #4A5168; font-size: 16px; max-width: 720px; }

/* ---------- Bandeau podcast ---------- */
.bandeau-podcast {
  margin-top: 40px; background: var(--encre); color: var(--papier); border-radius: 22px; padding: 30px 34px;
  display: flex; flex-wrap: wrap; gap: 20px 36px; align-items: center;
}
.bandeau-podcast a { color: var(--papier); }
.bandeau-podcast-texte { flex: 1 1 360px; display: flex; flex-direction: column; gap: 8px; }
.bandeau-podcast .etiquette { color: var(--jaune); }
.bandeau-podcast-titre { font-family: var(--titres); font-weight: 800; font-size: 24px; line-height: 1.2; }
.bandeau-podcast-titre a:hover { color: var(--jaune); }
.bandeau-podcast audio { flex: 1 1 320px; max-width: 420px; }
.bandeau-podcast-liens { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 600; }
.bandeau-podcast-liens a { border: 1px solid #5B6B8C; border-radius: 99px; padding: 7px 14px; }
.bandeau-podcast-liens a:hover { border-color: var(--jaune); color: var(--jaune); }

/* ---------- Article (question, décryptage...) ---------- */
.colonnes-article { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.article { max-width: 760px; }
.pastille-claire {
  display: inline-block; font-size: 14px; font-weight: 700; background: #E3E8F4; color: #2C4374;
  border-radius: 99px; padding: 6px 14px;
}
.pastille-claire:hover { background: var(--encre); color: var(--papier); }
.titre-article { margin: 18px 0 16px; font-size: 48px; font-weight: 800; line-height: 1.06; letter-spacing: -1.4px; }
.infos-article { margin-bottom: 30px; font-size: 15px; color: var(--gris); }

.lecteur {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: -6px 0 30px;
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: 14px; padding: 12px 16px;
}
.lecteur-titre { font-weight: 700; font-size: 15px; }
.lecteur-titre span { color: var(--gris); font-weight: 500; }
.lecteur audio { flex: 1 1 260px; height: 40px; }

.photo-article { margin: 0 0 32px; }
.photo-article img { width: auto; max-width: 100%; border-radius: var(--rayon); }   /* jamais agrandie au-delà de sa taille réelle */
.photo-article figcaption { margin-top: 8px; font-size: 13px; color: var(--gris); }

.texte-article { font-size: 19px; line-height: 1.7; }
.texte-article > * + * { margin-top: 1.1em; }
.texte-article h2 { margin-top: 1.6em; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; }
.texte-article h3 { margin-top: 1.4em; font-size: 22px; font-weight: 800; }
.texte-article ul, .texte-article ol { padding-left: 1.3em; }
.texte-article li + li { margin-top: .4em; }
.texte-article li::marker { color: var(--bleu); }
.texte-article a { color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; }
.texte-article a:hover { color: var(--encre); }
.texte-article img { border-radius: 14px; }
.texte-article blockquote {
  margin-left: 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--encre);
  font-family: var(--titres); font-weight: 600; font-size: 22px; line-height: 1.4;
}
.texte-article > p:first-child > i:only-child { font-style: normal; font-size: 21px; font-weight: 500; line-height: 1.55; display: block; }

/* Colonne de droite */
.colonne-droite { display: flex; flex-direction: column; gap: 24px; position: sticky; top: calc(var(--barre) + 24px); transition: top .25s ease; }
.encadre { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 24px; }
.encadre .etiquette { margin-bottom: 10px; }
.lien-liste { display: block; padding: 12px 0; border-top: 1px solid #ECE8DC; font-weight: 600; line-height: 1.35; }
.encadre-sombre { background: var(--encre); border-color: var(--encre); color: var(--papier); display: flex; flex-direction: column; gap: 10px; }
.encadre-titre { font-family: var(--titres); font-weight: 800; font-size: 22px; }
.encadre-sombre p:not(.encadre-titre) { color: var(--gris-clair); }
.bouton-plein { display: block; text-align: center; padding: 13px; border-radius: 12px; margin-top: 6px; }

/* ---------- Partage ---------- */
.partage { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 15px; font-weight: 700; }
.partage-libelle { margin-right: 6px; }
.partage a, .partage button {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: 99px; padding: 8px 15px;
  font-weight: 700; color: var(--encre); cursor: pointer;
}
.partage a:hover, .partage button:hover { border-color: var(--encre); color: var(--encre); }
.partage .partage-signaler {
  margin-left: auto; background: none; border: 0; padding: 8px 0; font-weight: 500; font-size: 14px; color: var(--gris);
  text-decoration: underline; text-underline-offset: 3px;
}
.partage .partage-signaler:hover { color: var(--encre); }
.note-formulaire { font-size: 15px; color: var(--gris); }

/* ---------- Commentaires ---------- */
.commentaires { margin-top: 64px; }
.commentaires h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.commentaires .nombre { color: var(--gris); font-weight: 600; font-size: 20px; }
.bouton-inline { display: inline-block; margin: 14px 0 22px; padding: 12px 20px; }
/* Chaque commentaire est une carte blanche : la parole du visiteur d'abord, la réponse du site en retrait, plus discrète */
.commentaire { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 20px 22px; }
.commentaire + .commentaire { margin-top: 14px; }
.commentaire-auteur, .reponse-site { display: flex; gap: 14px; }
.commentaire-auteur > div, .reponse-site > div { flex: 1; min-width: 0; }
.commentaire p { font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
.commentaire-entete { font-size: 15px !important; margin-bottom: 2px; }
.commentaire-entete strong { font-size: 16px; }
.commentaire-entete span { color: var(--gris); }
.initiale {
  width: 40px; height: 40px; flex: none; border-radius: 99px; background: var(--jaune); color: var(--encre);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px;
}
.initiale.jtc { border-radius: 8px; background: var(--encre); color: var(--jaune); font-family: var(--titres); font-size: 11px; width: 30px; height: 30px; }
.reponse-site { margin: 16px 0 0 54px; padding: 14px 16px; background: var(--papier); border-left: 3px solid var(--jaune); border-radius: 0 12px 12px 0; }
.reponse-site p { font-size: 16px; }
.reponse-site .commentaire-entete { font-size: 14px !important; }
.reponse-site .commentaire-entete strong { font-size: 14px; }

/* ---------- Formulaires ---------- */
.page-formulaire { max-width: 680px; margin: 16px auto 0; display: flex; flex-direction: column; gap: 18px; }
.page-formulaire h1 { font-size: 44px; font-weight: 900; letter-spacing: -1.3px; line-height: 1.05; }
.page-formulaire .intro { font-size: 18px; color: #4A5168; }
.recherche-page { flex: none; max-width: none; }
.formulaire {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: 20px; padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.formulaire label { font-weight: 700; font-size: 15px; margin-top: 6px; }
.formulaire .facultatif { font-weight: 500; color: var(--gris); }
.formulaire input, .formulaire textarea, .formulaire select {
  font-size: 16px; padding: 13px 14px; border: 1px solid var(--filet); border-radius: 10px; background: var(--papier);
  width: 100%;
}
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus { border-color: var(--encre); outline: none; background: var(--blanc); }
.formulaire textarea { resize: vertical; }
.formulaire button { margin-top: 10px; align-self: flex-start; border: 0; cursor: pointer; padding: 14px 24px; }
.formulaire .note { font-size: 13px; color: var(--gris); }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message { border-radius: 14px; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.message.succes { background: #E4F0EC; color: #1F5247; }
.message.erreur { background: #F8E7E1; color: #7A2E18; font-weight: 600; }

/* ---------- Pagination ---------- */
.pagination { margin-top: 56px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; font-weight: 700; }
.pagination a, .pagination span {
  min-width: 44px; height: 44px; padding: 0 14px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 1px solid var(--filet);
}
.pagination a:hover { border-color: var(--encre); color: var(--encre); }
.pagination .courante { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.pagination .ellipse { border: 0; min-width: 20px; padding: 0; color: var(--gris); }

/* ---------- Podcast ---------- */
.entete-podcast {
  margin: -40px calc(50% - 50vw) 0; padding: 48px calc(50vw - 50%);
  background: var(--encre); color: var(--papier);
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: center;
}
.pochette { border-radius: 20px; width: 100%; height: auto; }
.entete-podcast-texte { display: flex; flex-direction: column; gap: 14px; }
.entete-podcast .etiquette { color: var(--jaune); }
.entete-podcast h1 { font-size: 52px; font-weight: 900; letter-spacing: -1.6px; line-height: 1; }
.entete-podcast .intro { font-size: 18px; color: var(--gris-clair); max-width: 620px; }
.plateformes { display: flex; flex-wrap: wrap; gap: 10px; font-weight: 700; font-size: 15px; }
.plateformes a { background: var(--papier); color: var(--encre); border-radius: 12px; padding: 11px 16px; }
.plateformes a:hover { background: var(--jaune); color: var(--encre); }
.podcast-contenu { max-width: 860px; margin: 48px auto 0; }
.lecteur-podcast {
  position: sticky; top: var(--barre); transition: top .25s ease; z-index: 2; background: var(--blanc); border: 2px solid var(--encre);
  border-radius: 20px; padding: 22px 26px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 48px;
}
.lecteur-podcast-titre { font-family: var(--titres); font-weight: 800; font-size: 22px; line-height: 1.25; }
.lecteur-podcast audio { width: 100%; }
.episodes { margin: 0; padding: 0; list-style: none; }
.episodes li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--bordure); }
.bouton-ecouter {
  width: 44px; height: 44px; flex: none; border-radius: 99px; border: 2px solid var(--encre); background: transparent;
  color: var(--encre); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.bouton-ecouter:hover, .bouton-ecouter.actif { background: var(--encre); color: var(--jaune); }
.episodes .numero { font-family: var(--titres); font-weight: 800; color: var(--gris); min-width: 36px; }
.episode-titre { flex: 1; display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-size: 18px; line-height: 1.35; }


/* ---------- Décryptages ---------- */
.sujets { margin-top: 10px; align-items: center; }
.sujets-libelle { font-weight: 800; margin-right: 6px; }
.une-rubrique {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: center;
  padding-bottom: 48px; border-bottom: 2px solid var(--encre);
}
.une-rubrique-texte { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.une-rubrique h2 { font-size: 38px; font-weight: 900; line-height: 1.06; letter-spacing: -1.1px; }
.chapo-court { color: #4A5168; line-height: 1.5; }
.une-rubrique .chapo-court { font-size: 18px; }
.liste-articles { margin-top: 48px; row-gap: 44px; }
.carte-article { display: flex; flex-direction: column; gap: 10px; }
.carte-article .vignette { margin-bottom: 4px; }
.carte-article .chapo-court { font-size: 15px; }
.retour { margin-top: 48px; }

.article-decryptage { display: flex; flex-direction: column; }
.entete-decryptage, .colonne-lecture { width: 100%; max-width: 780px; margin: 0 auto; }
.entete-decryptage { padding-top: 16px; }
.chapo { font-size: 22px; line-height: 1.5; font-weight: 500; margin-bottom: 26px; }
.filet-haut { padding-top: 18px; border-top: 1px solid var(--filet); }
.photo-decryptage { width: 100%; max-width: 800px; margin: 8px auto 40px; }   /* photos de 800 px au maximum */
.photo-decryptage img { width: auto; max-width: 100%; margin: 0 auto; border-radius: 22px; }
.photo-decryptage figcaption { margin-top: 8px; font-size: 13px; color: var(--gris); }
.tags { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 600; }
.tags a, .tags span { background: var(--blanc); border: 1px solid var(--bordure); border-radius: 99px; padding: 7px 14px; }
.tags span { color: var(--gris); }
.tags a:hover { border-color: var(--encre); color: var(--encre); }
.bloc-filet { padding-top: 32px; border-top: 2px solid var(--encre); }
.carte-simple-titre.titre-police.grand { font-size: 21px; font-weight: 800; }


/* ---------- Fiches (animaux, métiers) ---------- */
.titre-fiche { margin: 14px 0 12px; font-size: 60px; font-weight: 900; letter-spacing: -2px; line-height: 1; }
.titre-fiche + .colonnes-article { margin-top: 32px; }

.mises-en-avant { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.carte-avec-etiquette { position: relative; }
.etiquette-photo {
  position: absolute; left: 14px; top: 14px; font-size: 12px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; border-radius: 99px; padding: 6px 12px;
}
.etiquette-photo.jaune { background: var(--jaune); color: var(--encre); }
.etiquette-photo.rouge { background: #B3261E; color: #fff; }
.etiquette-photo.sombre { background: var(--encre); color: var(--papier); }

.grille-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.carte-ronde { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-weight: 700; }
.rond { width: 100%; aspect-ratio: 1 / 1; border-radius: 99px; overflow: hidden; background: var(--placeholder); }
.rond img { width: 100%; height: 100%; object-fit: cover; }

/* Liste alphabétique */
.index-az {
  position: sticky; top: var(--barre); transition: top .25s ease; z-index: 2; background: var(--papier);
  display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0; border-bottom: 2px solid var(--encre);
}
.index-az a {
  min-width: 44px; height: 44px; padding: 0 12px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--blanc); border: 1px solid var(--bordure);
  font-family: var(--titres); font-weight: 800; font-size: 16px;
}
.index-az a:hover, .index-az a.actif { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.groupe-lettre { display: flex; gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--filet); scroll-margin-top: 150px; }
.grande-lettre { font-family: var(--titres); font-weight: 900; font-size: 52px; line-height: .9; min-width: 60px; color: var(--bleu); }
.liste-fiches { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 28px; align-content: start; }
.liste-fiches a { padding: 7px 0; font-size: 16px; font-weight: 500; }

/* Colonne de droite des fiches */
.encadre-fort { border: 2px solid var(--encre); display: flex; flex-direction: column; gap: 22px; }
.echelle { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; font-size: 12px; font-weight: 800; text-align: center; }
.niveau { padding: 8px 0; border-radius: 6px; opacity: .45; }
.niveau.actif { opacity: 1; outline: 3px solid var(--encre); outline-offset: 2px; }
.niveau-lc { background: #D6EBDB; color: #1F5A2D; }
.niveau-nt { background: #E7EBC8; color: #4E551A; }
.niveau-vu { background: #F2C46B; color: var(--encre); }
.niveau-en { background: #EFA88F; color: #6E2512; }
.niveau-cr { background: #D9534F; color: #fff; }
.statut-nom { margin-top: -10px; font-weight: 800; font-size: 18px; }
.sommaire-fiche { display: flex; flex-direction: column; padding-top: 18px; border-top: 1px solid #ECE8DC; }
.sommaire-fiche:first-child { padding-top: 0; border-top: 0; }
.sommaire-fiche .etiquette { margin-bottom: 6px; }
.sommaire-fiche a { padding: 8px 0; font-weight: 600; border-bottom: 1px solid #F0EDE4; }
.sommaire-fiche a:last-child { border-bottom: 0; }
.encadre-fort .lien-commentaires { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--papier); color: var(--encre); font-weight: 700; text-decoration: none; }
.encadre-fort .lien-commentaires::before { content: ''; flex: 0 0 20px; height: 18px; background: var(--encre); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M3 1h18a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H10l-6 5v-5H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M3 1h18a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H10l-6 5v-5H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.encadre-fort .lien-commentaires:hover { background: var(--jaune); }
.texte-article h2[id], .rencontre, .commentaires { scroll-margin-top: 90px; }

/* Métiers */
.rencontre { margin-top: 48px; background: var(--blanc); border: 1px solid var(--bordure); border-left: 5px solid var(--jaune); border-radius: 0 20px 20px 0; padding: 28px 30px; }
.rencontre h2 { font-size: 30px; font-weight: 800; margin-top: 6px; }
.rencontre .meta { margin: 6px 0 18px; font-size: 16px; }
.rencontre .texte-article { font-size: 18px; }
.carte-temoignage {
  display: flex; flex-direction: column; gap: 6px; background: var(--blanc); border: 1px solid var(--bordure);
  border-left: 5px solid var(--jaune); border-radius: 0 var(--rayon) var(--rayon) 0; padding: 22px 24px;
}
.carte-temoignage:hover { color: var(--encre); border-color: var(--encre); border-left-color: var(--jaune); }
.carte-temoignage-nom { font-family: var(--titres); font-weight: 800; font-size: 22px; }


/* ---------- Recettes (photos d'origine en 250×200 : jamais agrandies) ---------- */
.tuiles-categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tuiles-categories a {
  background: var(--encre); color: var(--papier); border-radius: var(--rayon); padding: 22px 24px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.tuiles-categories a:hover { background: var(--bleu); color: var(--blanc); }
.tuiles-categories span { font-family: var(--titres); font-weight: 800; font-size: 24px; }
.tuiles-categories strong { color: var(--jaune); }

.grille-recettes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; }
.carte-recette .photo-petite {
  display: block; max-width: 250px; aspect-ratio: 5 / 4; border-radius: 14px; overflow: hidden; background: var(--placeholder);
}
.photo-petite img { width: 100%; height: 100%; object-fit: cover; }
.grille-recettes .carte-recette-titre { font-size: 17px; line-height: 1.25; }
.bloc-court { margin-top: 32px; }
.themes a.actif { background: var(--encre); border-color: var(--encre); color: var(--papier); }

.entete-recette { display: flex; gap: 40px; align-items: flex-start; justify-content: space-between; }
.entete-recette-texte { flex: 1; max-width: 780px; display: flex; flex-direction: column; gap: 16px; }
.entete-recette .titre-fiche { margin: 0; }
.entete-recette .chapo { margin: 0; }
.photo-recette { flex: none; margin: 0; }
.photo-recette img { border-radius: var(--rayon); }
.photo-recette figcaption { margin-top: 6px; font-size: 12px; color: var(--gris); }
.tuiles-temps { display: flex; flex-wrap: wrap; gap: 10px; }
.tuiles-temps div {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: 14px; padding: 12px 18px;
  display: flex; flex-direction: column; min-width: 120px;
}
.tuiles-temps span { font-size: 13px; color: var(--gris); font-weight: 600; }
.tuiles-temps strong { font-family: var(--titres); font-size: 22px; font-weight: 800; }

.colonnes-recette { margin-top: 48px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: start; }
.ingredients {
  position: sticky; top: calc(var(--barre) + 24px); transition: top .25s ease; background: var(--blanc); border: 2px solid var(--encre);
  border-radius: 22px; padding: 26px;
}
.ingredients h2 { font-size: 24px; font-weight: 900; margin-bottom: 10px; }
.ingredients ul { margin: 0 0 18px; padding: 0; list-style: none; }
.ingredients li { padding: 10px 0; border-bottom: 1px solid #F0EDE4; font-size: 17px; line-height: 1.4; }
.ingredients li.sous-titre { font-weight: 800; border-bottom: 0; padding-top: 16px; }
.ingredients .bouton-contour { width: 100%; cursor: pointer; background: transparent; }
.etapes { margin: 0; padding: 0; list-style: none; }
.etapes li { display: flex; gap: 22px; padding: 20px 0; border-top: 1px solid var(--bordure); }
.numero-etape {
  width: 44px; height: 44px; flex: none; border-radius: 99px; background: var(--encre); color: var(--jaune);
  display: flex; align-items: center; justify-content: center; font-family: var(--titres); font-weight: 900; font-size: 20px;
}
.etapes p { margin-top: 8px; font-size: 19px; line-height: 1.6; }
.astuce { margin-top: 28px; background: var(--jaune); border-radius: var(--rayon); padding: 24px 28px; }
.astuce .etiquette { color: var(--encre); margin-bottom: 6px; }
.astuce p:last-child { font-size: 18px; line-height: 1.55; font-weight: 500; }


/* ---------- Dictionnaire ---------- */
.index-dico {
  position: static; border-bottom: 0; padding: 0; margin: 8px 0 0;
  display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 5px;
}
.index-dico a { min-width: 0; padding: 0; }

.trio-dico { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.carte-mot-jour, .carte-mystere, .carte-phrase { border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.carte-mot-jour { background: var(--encre); color: var(--papier); }
.carte-mot-jour:hover { color: var(--papier); background: #1C2C50; }
.carte-mot-jour .etiquette { color: var(--jaune); }
.carte-mot { font-family: var(--titres); font-weight: 900; font-size: 48px; letter-spacing: -1.4px; line-height: 1.05; overflow-wrap: anywhere; }
.carte-nature { font-style: italic; color: var(--gris-clair); }
.carte-def { font-size: 18px; line-height: 1.5; margin-top: 4px; }
.carte-suite { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--jaune); }
.carte-mystere { background: var(--jaune); }
.carte-mystere .etiquette, .carte-phrase .etiquette { color: var(--encre); }
.mystere-question { font-family: var(--titres); font-weight: 800; font-size: 22px; line-height: 1.2; }
.carte-indice { font-size: 17px; line-height: 1.5; }
.carte-mystere details { margin-top: auto; }
.carte-mystere summary {
  display: inline-block; cursor: pointer; font-weight: 700; border: 2px solid var(--encre); border-radius: 12px; padding: 10px 16px;
  list-style: none;
}
.carte-mystere summary::-webkit-details-marker { display: none; }
.carte-mystere details[open] summary { display: none; }
.reponse-mystere { display: inline-block; font-family: var(--titres); font-weight: 900; font-size: 30px; }
.carte-phrase { background: var(--blanc); border: 1px solid var(--bordure); }
.carte-phrase p { font-size: 19px; line-height: 1.5; font-weight: 500; }
.carte-phrase .lien-suite { margin-top: auto; }

.liste-mots-fleche { display: flex; flex-direction: column; }
.liste-mots-fleche a {
  display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--filet);
  font-family: var(--titres); font-weight: 700; font-size: 20px;
}
.liste-mots-fleche a::after { content: '→'; font-family: var(--texte); color: var(--bleu); }

.histoire details { max-width: 780px; }
.histoire summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; }
.histoire summary::-webkit-details-marker { display: none; }
.histoire summary h2 { font-size: 24px; font-weight: 800; }
.histoire summary::after { content: '+'; font-size: 26px; font-weight: 700; color: var(--bleu); }
.histoire details[open] summary::after { content: '−'; }
.histoire .texte-article { margin-top: 18px; font-size: 17px; color: #3A4256; }

.liste-definitions { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.liste-definitions a {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.liste-definitions a:hover { border-color: var(--encre); color: var(--encre); }
.liste-definitions strong { font-family: var(--titres); font-size: 20px; }
.nature-court { font-size: 13px; font-style: italic; color: var(--gris); }
.def-court { font-size: 15px; color: #4A5168; line-height: 1.45; }

.page-mot { max-width: 860px; margin: 0 auto; padding-top: 16px; }
.mot-titre { margin: 18px 0 6px; font-family: var(--titres); font-size: 80px; font-weight: 900; letter-spacing: -2.6px; line-height: 1.05; overflow-wrap: anywhere; }
.mot-titre .surligne { padding: 0 6px; background: linear-gradient(transparent 62%, var(--jaune) 62%); }
.mot-nature { font-size: 18px; font-style: italic; color: var(--gris); margin-bottom: 28px; }
.mot-definition { font-size: 23px; line-height: 1.55; font-weight: 500; margin-bottom: 28px; }
.mot-definition ol { margin: 0; padding-left: 1.4em; }
.mot-definition li + li { margin-top: 10px; }
.mot-definition li::marker { color: var(--bleu); font-weight: 800; }
.mot-exemple { background: var(--blanc); border-left: 5px solid var(--encre); border-radius: 0 16px 16px 0; padding: 20px 24px; margin-bottom: 30px; }
.mot-exemple .etiquette { margin-bottom: 6px; font-style: normal; font-size: 13px; }
.mot-exemple p, .mot-exemple ol { margin: 0; font-size: 19px; line-height: 1.55; font-style: italic; }
.mot-exemple ol { padding-left: 1.3em; }
.syn-contraires { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.etiquette-vert { color: #2F6F62 !important; margin-bottom: 12px; }
.etiquette-orange { color: #9A3B20 !important; margin-bottom: 12px; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles a, .pastilles span { font-weight: 700; border-radius: 10px; padding: 7px 13px; }
.pastilles-vert a, .pastilles-vert span { background: #E4F0EC; color: #1F5247; }
.pastilles-orange a, .pastilles-orange span { background: #F8E7E1; color: #7A2E18; }
.pastilles a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pastilles a:hover { filter: brightness(.95); }
.homonymes { margin-top: 24px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.homonymes a { color: var(--bleu); text-decoration: underline; }
.liste-mots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.liste-mots a { font-family: var(--titres); font-weight: 700; font-size: 18px; border-bottom: 1px solid var(--bordure); }
.page-mot .index-dico { margin-top: 44px; }

/* ---------- Quiz (photos d'origine en 650×300) ---------- */
.vignette.photo-quiz { position: relative; aspect-ratio: 13 / 6; }
.quiz-vedette {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center;
  background: var(--jaune); border-radius: 24px; overflow: hidden;
}
.quiz-vedette:hover { color: var(--encre); }
.quiz-vedette-photo { align-self: stretch; background: var(--placeholder); }
.quiz-vedette-photo img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.quiz-vedette-texte { padding: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.quiz-vedette-texte .etiquette { color: var(--encre); }
.quiz-vedette-titre { font-family: var(--titres); font-weight: 900; font-size: 36px; line-height: 1.08; letter-spacing: -1px; }
.quiz-vedette .bouton-sombre { margin-top: 8px; padding: 13px 22px; }

.entete-quiz {
  margin: -40px calc(50% - 50vw) 0; padding: 48px calc(50vw - 50%);
  background: var(--encre); color: var(--papier);
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center;
}
.entete-quiz-texte { display: flex; flex-direction: column; gap: 14px; }
.entete-quiz .etiquette { color: var(--jaune); }
.entete-quiz h1 { font-size: 50px; font-weight: 900; letter-spacing: -1.5px; line-height: 1.04; }
.entete-quiz .intro { font-size: 18px; color: var(--gris-clair); }
.entete-quiz-photo img { width: auto; max-width: 100%; border-radius: 20px; }
.entete-quiz-photo figcaption { margin-top: 6px; font-size: 12px; color: var(--gris-clair); }

.quiz-contenu { max-width: 900px; margin: 0 auto; }
.quiz-progression {
  position: sticky; top: var(--barre); transition: top .25s ease; z-index: 2; background: var(--papier); border-bottom: 1px solid var(--filet);
  margin: 0 -24px; padding: 14px 24px; display: flex; align-items: center; gap: 16px; font-size: 15px;
}
.quiz-progression[hidden] { display: none; }
.quiz-barre { flex: 1; height: 8px; border-radius: 99px; background: #E0DBCB; overflow: hidden; }
.quiz-barre span { display: block; width: 0; height: 100%; border-radius: 99px; background: var(--encre); transition: width .3s ease; }
.quiz-formulaire { padding-top: 36px; }
.quiz-question {
  margin: 0 0 22px; padding: 28px; border: 1px solid var(--bordure); border-radius: 22px; background: var(--blanc);
}
.quiz-question legend {
  float: left; width: 100%; padding: 0; margin-bottom: 18px; display: flex; gap: 18px; align-items: baseline;
  font-family: var(--titres); font-weight: 800; font-size: 23px; line-height: 1.3;
}
.quiz-numero { font-weight: 900; font-size: 34px; color: var(--bleu); min-width: 44px; }
.quiz-choix { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.quiz-choix label {
  display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--bordure); background: var(--papier); font-weight: 600; font-size: 17px; line-height: 1.3;
}
.quiz-choix label:hover { border-color: var(--bleu); }
.quiz-choix label:has(input:checked) { border-color: var(--encre); background: #FFF6CF; }
.quiz-choix input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--encre); }
.quiz-valider { text-align: center; margin-top: 8px; }
.quiz-valider button { border: 0; cursor: pointer; font-size: 18px; font-weight: 800; padding: 16px 32px; border-radius: 14px; }
.quiz-contenu > .partage { justify-content: center; }

.quiz-resultat {
  margin-top: 40px; scroll-margin-top: 20px; background: var(--encre); color: var(--papier); border-radius: 24px; padding: 36px;
  display: flex; flex-direction: column; gap: 22px;
}
.quiz-resultat .etiquette { color: var(--jaune); }
.quiz-score { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.quiz-points { font-family: var(--titres); font-weight: 900; font-size: 80px; letter-spacing: -2px; line-height: 1; }
.quiz-points span { color: #8E9AB5; }
.quiz-score p { flex: 1 1 320px; font-size: 19px; line-height: 1.5; font-weight: 500; }
.quiz-partage .partage { margin-top: 0; }
.quiz-partage .partage a, .quiz-partage .partage button { background: transparent; border-color: #5B6B8C; color: var(--papier); }
.quiz-partage .partage a:hover, .quiz-partage .partage button:hover { border-color: var(--jaune); color: var(--jaune); }
.quiz-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.quiz-actions a { padding: 12px 20px; border-radius: 12px; }
.quiz-actions .bouton-jaune { border: 2px solid var(--jaune); }
.quiz-resultat .bouton-contour { border-color: var(--papier); color: var(--papier); }
.quiz-resultat .bouton-contour:hover { background: var(--papier); color: var(--encre); }
.quiz-actions-bas { margin-top: 28px; justify-content: center; }
.quiz-titre-correction { margin-top: 48px; }
.quiz-correction { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.quiz-correction li {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px;
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: 14px;
}
.quiz-correction p { line-height: 1.45; }
.quiz-correction-question { font-weight: 600; margin-bottom: 4px; }
.quiz-marque {
  flex: none; width: 30px; height: 30px; border-radius: 99px; color: var(--blanc); font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.juste .quiz-marque { background: #2F8F5B; }
.faux .quiz-marque { background: #B3261E; }


/* ---------- Recherche ---------- */
.entete-recherche { max-width: 900px; }
.entete-recherche h1 { font-size: 46px; letter-spacing: -1.4px; line-height: 1.05; }
.entete-recherche .recherche { width: 100%; max-width: 640px; }
.filtres-recherche { margin-top: 4px; }
.mot-trouve {
  display: flex; flex-direction: column; gap: 6px; max-width: 900px; margin-bottom: 8px;
  background: var(--blanc); border: 2px solid var(--encre); border-radius: var(--rayon); padding: 24px 28px;
}
.mot-trouve:hover { color: var(--encre); box-shadow: 0 8px 24px rgba(20, 33, 61, .10); }
.mot-trouve-mot { font-family: var(--titres); font-weight: 800; font-size: 34px; letter-spacing: -0.8px; line-height: 1.1; }
.mot-trouve .def-court { font-size: 17px; margin: 6px 0 8px; }
.bloc-resultats { margin-top: 48px; max-width: 900px; }
.bloc-resultats .bloc-titre { margin-bottom: 8px; }
.bloc-resultats .bloc-titre h2 { font-size: 28px; }
.liste-resultats a {
  display: flex; gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--filet);
}
.liste-resultats a:hover strong { text-decoration: underline; text-decoration-thickness: 2px; }
.resultat-texte { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.resultat-texte strong { font-family: var(--titres); font-weight: 700; font-size: 20px; line-height: 1.25; }
.resultat-texte span { font-size: 15px; color: #4A5168; line-height: 1.45; }
.liste-resultats mark { background: linear-gradient(transparent 55%, var(--jaune) 55%); color: inherit; }


/* ---------- Contact ---------- */
.page-contact { max-width: 780px; }
.raccourcis-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
.raccourcis-contact a {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: var(--rayon);
  background: var(--blanc); border: 1px solid var(--bordure);
}
.raccourcis-contact a:hover { border-color: var(--encre); color: var(--encre); }
.raccourcis-contact strong { font-family: var(--titres); font-size: 19px; }
.raccourcis-contact span { font-size: 15px; color: #4A5168; line-height: 1.45; }
.faq { margin-top: 28px; }
.faq h2 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.faq details { border-top: 1px solid var(--filet); }
.faq details:last-child { border-bottom: 1px solid var(--filet); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0; font-weight: 600; font-size: 17px; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-size: 24px; font-weight: 700; color: var(--bleu); }
.faq details[open] summary::after { content: '−'; }
.faq summary:hover { color: var(--bleu); }
.faq-reponse { padding: 0 0 18px; color: #4A5168; line-height: 1.6; }
.titre-formulaire { margin-top: 40px; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; scroll-margin-top: 20px; }


/* ---------- Mentions légales ---------- */
.page-legale { max-width: 780px; margin: 16px auto 0; }
.page-legale h1 { font-size: 44px; font-weight: 900; letter-spacing: -1.3px; line-height: 1.05; }
.page-legale .texte-article { margin-top: 8px; font-size: 17px; }
.page-legale .texte-article h2 { font-size: 24px; }


/* ---------- Traducteur SMS ---------- */
.traducteur { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.traducteur-saisie {
  display: flex; flex-direction: column; gap: 10px; background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: 22px; padding: 26px;
}
.traducteur-saisie label { font-weight: 700; font-size: 15px; }
.traducteur-saisie textarea {
  font: inherit; font-size: 18px; line-height: 1.5; padding: 14px 16px; border: 1px solid var(--filet); border-radius: 14px;
  background: var(--papier); resize: vertical; min-height: 150px;
}
.traducteur-saisie textarea:focus { border-color: var(--encre); outline: none; background: var(--blanc); }
.traducteur-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.traducteur-boutons button { border: 0; cursor: pointer; padding: 14px 26px; }
.traducteur-resultat {
  display: flex; flex-direction: column; gap: 12px; background: var(--encre); color: var(--papier);
  border-radius: 22px; padding: 26px;
}
.traducteur-resultat .etiquette { color: var(--jaune); }
.traduction { font-size: 21px; line-height: 1.6; font-weight: 500; }
.traducteur-resultat.vide .traduction { color: var(--gris-clair); font-weight: 400; }
.traduction mark { background: none; color: var(--jaune); font-weight: 700; }
.traducteur-resultat .note-traducteur { color: var(--gris-clair); }
.note-traducteur { font-size: 15px; color: var(--gris); margin-top: 14px; }
.liste-sms { margin: 0; padding: 0; list-style: none; max-width: 780px; }
.liste-sms li { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--filet); }
.liste-sms strong { font-family: var(--titres); font-weight: 800; font-size: 18px; min-width: 70px; }
.liste-sms span { flex: 1; }
.liste-sms.colonnes { max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
.liste-sms.colonnes li { padding: 10px 0; }
.liste-sms.colonnes span { color: #4A5168; font-size: 15px; }


/* ---------- Tablette ---------- */
@media (max-width: 1000px) {
  .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .une { grid-template-columns: minmax(0, 1fr); }
  .une-secondaires { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .colonnes-article { grid-template-columns: minmax(0, 1fr); }
  .colonne-droite { position: static; }
  /* Fiches animal et métier : l'encadré (statut, sommaire) remonte juste sous la photo, avant le texte */
  .encadre-en-haut { display: flex; flex-direction: column; gap: 0; }
  .encadre-en-haut > .article { display: contents; }
  .encadre-en-haut > .article > * { order: 3; }
  .encadre-en-haut > .article > .photo-article { order: 1; }
  .encadre-en-haut > .colonne-droite { order: 2; margin: 0 0 32px; width: 100%; }
  .encadre-en-haut > .colonne-droite .encadre { width: 100%; max-width: none; }
  .une-rubrique { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .grille-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .liste-fiches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille-recettes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tuiles-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colonnes-recette { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ingredients { position: static; }
  .trio-dico { grid-template-columns: minmax(0, 1fr); }
  .liste-definitions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quiz-vedette, .entete-quiz { grid-template-columns: minmax(0, 1fr); }
  .traducteur { grid-template-columns: minmax(0, 1fr); }
  .liste-sms.colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entete-quiz { gap: 24px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .conteneur { padding: 0 16px; }
  .entete { padding-top: 18px; }
  .logo { font-size: 32px; }
  body.barre-ouverte { --barre: 56px; }
  .barre-fixe-int { height: 54px; gap: 12px; }
  .logo-barre { font-size: 21px; letter-spacing: -0.8px; }
  .barre-titre {
    padding-left: 12px; font-size: 14px; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .barre-loupe { width: 40px; height: 40px; }
  .barre-fixe.cherche .logo-barre { display: none; }
  .recherche { flex: 1 1 100%; min-width: 0; }
  .menu { margin-top: 18px; margin-left: -16px; margin-right: -16px; padding: 0 8px; }
  .principal { padding-top: 28px; }
  .bloc { margin-top: 52px; }
  .bloc-titre h2, .titre-bloc-seul { font-size: 28px; }
  .titre-une { font-size: 30px; }
  .grille-3, .colonnes-2-1, .colonnes-1-1, .une-secondaires { grid-template-columns: minmax(0, 1fr); }
  .colonnes-2-1, .colonnes-1-1 { gap: 52px; }
  .grille-3 { gap: 20px; }
  .grille-4 { gap: 18px; }
  .bandeau-quiz { padding: 28px 22px; }
  .bandeau-quiz h2 { font-size: 30px; }
  .mot-du-jour .mot { font-size: 34px; }
  .entete-rubrique h1 { font-size: 40px; }
  .titre-article { font-size: 34px; }
  .texte-article { font-size: 18px; }
  .reponse-site { margin-left: 0; }
  .commentaire { padding: 16px; }
  .entete-podcast { grid-template-columns: minmax(0, 1fr); padding-top: 32px; padding-bottom: 32px; gap: 24px; }
  .pochette { max-width: 200px; }
  .entete-podcast h1 { font-size: 38px; }
  .formulaire { padding: 20px; }
  .page-formulaire h1 { font-size: 34px; }
  .une-rubrique h2 { font-size: 30px; }
  .chapo { font-size: 19px; }
  .photo-decryptage { margin-bottom: 28px; }
  .photo-decryptage img { border-radius: 14px; }
  .titre-fiche { font-size: 40px; letter-spacing: -1.2px; }
  .mises-en-avant { grid-template-columns: minmax(0, 1fr); }
  .liste-fiches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
  .groupe-lettre { gap: 16px; }
  .grande-lettre { font-size: 36px; min-width: 36px; }
  .index-az a { min-width: 40px; height: 40px; padding: 0 9px; font-size: 14px; }
  .rencontre { padding: 22px 20px; }
  .grille-recettes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .tuiles-categories span { font-size: 19px; }
  .tuiles-categories a { padding: 16px 18px; }
  .entete-recette { flex-direction: column-reverse; gap: 20px; }
  .tuiles-temps div { min-width: 0; flex: 1; padding: 10px 12px; }
  .etapes li { gap: 14px; }
  .etapes p { font-size: 17px; }
  .liste-definitions, .syn-contraires { grid-template-columns: minmax(0, 1fr); }
  .mot-titre { font-size: 48px; letter-spacing: -1.4px; }
  .mot-definition { font-size: 19px; }
  .liste-mots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte-mot { font-size: 38px; }
  .carte-mot-jour, .carte-mystere, .carte-phrase { padding: 24px; }
  .index-dico { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .quiz-vedette-photo img { min-height: 0; aspect-ratio: 13 / 6; }
  .quiz-vedette-texte { padding: 24px 22px 28px; }
  .quiz-vedette-titre { font-size: 28px; }
  .entete-quiz { margin-top: -28px; padding-top: 32px; padding-bottom: 32px; }
  .entete-quiz h1 { font-size: 34px; letter-spacing: -1px; }
  .entete-quiz-photo img { border-radius: 14px; }
  .quiz-progression { margin: 0 -16px; padding: 12px 16px; }
  .quiz-question { padding: 20px; }
  .quiz-question legend { font-size: 20px; gap: 12px; }
  .quiz-numero { font-size: 28px; min-width: 32px; }
  .quiz-choix { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .quiz-choix label { padding: 13px 14px; font-size: 16px; }
  .quiz-resultat { padding: 26px 22px; }
  .quiz-points { font-size: 64px; }
  .entete-recherche h1 { font-size: 32px; letter-spacing: -0.8px; }
  .mot-trouve { padding: 20px; }
  .resultat-texte strong { font-size: 18px; }
  .liste-resultats .mini-photo { width: 88px; height: 55px; }
  .raccourcis-contact { grid-template-columns: minmax(0, 1fr); }
  .titre-formulaire { font-size: 24px; }
  .page-legale h1 { font-size: 34px; }
  .traducteur-saisie, .traducteur-resultat { padding: 20px; }
  .traduction { font-size: 19px; }
  .liste-sms.colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .liste-sms.colonnes li { flex-direction: column; gap: 2px; }
}

/* ---------- Impression ---------- */
@media print {
  .barre-fixe, .bandeau, .recherche, .menu, .pied, .partage, .commentaires, .colonne-droite, .lecteur,
  .bloc-filet, .ingredients .bouton-contour, .surtitre { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .colonnes-recette { grid-template-columns: 1fr 2fr; gap: 24px; margin-top: 20px; }
  .ingredients { position: static; border-width: 1px; }
  .entete-recette .titre-fiche { font-size: 28pt; }
  .astuce { background: none; border: 1px solid #000; }
}