/* Lyossia Conseil · feuille commune
   Charte « efficacité d'abord » : Fraunces (titres), Carlito (texte), fond blanc,
   terre et jaune, sarcelle pour les étiquettes et les liens, terracotta pour les grands numéros. */

@font-face { font-family: "Fraunces"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/fraunces-400.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/fraunces-600.woff2") format("woff2"); }
@font-face { font-family: "Carlito"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/carlito-400.woff2") format("woff2"); }
@font-face { font-family: "Carlito"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/fonts/carlito-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Carlito"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/carlito-700.woff2") format("woff2"); }

:root {
  --terre: #3D1E13;
  --texte-2: #5E4239;
  --jaune: #FFC643;
  --sarcelle: #2F7F75;
  --sarcelle-fonce: #2A7268;  /* même teinte, assombrie pour rester lisible (AA) sur sable et brume */
  --sarcelle-clair: #4FB0A4;  /* sur fond terre */
  --terracotta: #B5714F;
  --sable: #F7EFE9;
  --brume: #E7F2F0;
  --filet: #D9C6BA;
  --filet-fort: #8C7266;      /* bordure des boutons de choix : 3:1 minimum */
  --clair-sur-terre: #E8D8CC;
  --alerte: #9C3B1B;
  --rayon: 8px;
  --titres: "Fraunces", Georgia, "Times New Roman", serif;
  --texte: "Carlito", Calibri, Arial, sans-serif;
  --gouttiere: clamp(16px, 4vw, 24px);
  --largeur: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--terre);
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.55;
  overflow-wrap: break-word;
}
[hidden] { display: none !important; }
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-family: var(--titres); color: inherit; }
h1 { font-weight: 400; font-size: clamp(34px, 5.6vw, 50px); line-height: 1.1; }
h2 { font-weight: 600; font-size: clamp(27px, 3.6vw, 34px); line-height: 1.2; }
h3 { font-weight: 600; font-size: 22px; line-height: 1.3; }
p { margin: 0; }
ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
a { color: var(--sarcelle); }
b, strong { font-weight: 700; }

/* Focus visible partout, jaune sur fond terre */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--sarcelle); outline-offset: 3px; border-radius: 4px; }
.sombre :focus-visible, .site-header :focus-visible { outline-color: var(--jaune); }

.evitement {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: var(--jaune); color: var(--terre); font-weight: 700;
  padding: 12px 18px; border-radius: var(--rayon); text-decoration: none;
}
.evitement:focus { top: 12px; }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Conteneurs ---------- */
.wrap { max-width: var(--largeur); margin: 0 auto; padding-left: var(--gouttiere); padding-right: var(--gouttiere); }
.wrap--etroit { max-width: 860px; }
.section { padding-top: clamp(40px, 6vw, 64px); padding-bottom: clamp(40px, 6vw, 64px); }
.section--serre { padding-top: 0; }
.section--sans-bas { padding-bottom: 0; }
.pile { display: flex; flex-direction: column; gap: 22px; }
.pile--8 { gap: 8px; }
.pile--14 { gap: 14px; }
.pile--gauche { align-items: flex-start; }
.sable { background: var(--sable); }
.brume { background: var(--brume); }
.sombre { background: var(--terre); color: #FFFFFF; }
.sable a, .brume a { color: var(--sarcelle-fonce); }

/* ---------- En-tête ---------- */
.site-header { background: var(--terre); color: #FFFFFF; }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  padding-top: 18px; padding-bottom: 18px;
}
.marque {
  flex-grow: 1; color: #FFFFFF; text-decoration: none;
  font-family: var(--titres); font-weight: 600; font-size: clamp(22px, 3vw, 28px); letter-spacing: 0.12em;
  min-height: 44px; display: inline-flex; align-items: center; gap: 0.4em;
}
.site-header .rdv-entete { font-size: 16px; padding: 10px 20px; }
.marque span { font-weight: 400; color: var(--sarcelle-clair); }
.nav { display: flex; flex-wrap: nowrap; gap: 0 20px; font-size: 16px; }
.nav a {
  color: var(--clair-sur-terre); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.nav a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.nav a[aria-current="page"] { color: var(--jaune); font-weight: 700; }
.menu-bouton {
  display: none;
  background: transparent; color: #FFFFFF; font: 700 16px var(--texte);
  border: 2px solid #9A7E72; border-radius: var(--rayon);
  min-height: 44px; padding: 8px 16px; cursor: pointer;
}
.aube { height: 4px; background: linear-gradient(90deg, #DE6F3A 0%, #FFC643 50%, #4FB0A4 100%); }

@media (max-width: 1140px) {
  .site-header .rdv-entete { order: 2; }
  .nav { order: 3; width: 100%; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .site-header .wrap { gap: 10px 14px; }
  .site-header .rdv-entete { display: none; }
  /* Sans script, le menu reste affiché en entier. Avec le script, il se replie. */
  .js .menu-bouton { display: inline-flex; align-items: center; }
  .nav { flex-direction: column; gap: 0; border-top: 1px solid var(--texte-2); padding-top: 4px; }
  .nav a { font-size: 18px; padding: 4px 0; }
  .nav .nav-rdv { color: var(--jaune); font-weight: 700; }
  .js .nav[data-ferme] { display: none; }
}
@media (min-width: 761px) { .nav .nav-rdv { display: none; } }

/* ---------- Typographie de section ---------- */
.etiquette {
  font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sarcelle);
}
.sable .etiquette, .brume .etiquette { color: var(--sarcelle-fonce); }
.sombre .etiquette { color: var(--sarcelle-clair); }
.chapo { font-size: clamp(18px, 2.2vw, 20px); color: var(--texte-2); max-width: 680px; }
.sombre .chapo { color: var(--clair-sur-terre); }
.discret { color: var(--texte-2); font-size: 16px; }
.sombre .discret { color: var(--clair-sur-terre); }
.petit { font-size: 14px; color: var(--texte-2); }
.discret-grand { color: var(--texte-2); }
.wrap--texte > * { max-width: 760px; }
.colonne-texte { flex: 1 1 320px; }
.grand-num { font-family: var(--titres); font-size: 36px; line-height: 1; color: var(--terracotta); }

/* ---------- Boutons et liens ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: var(--jaune); color: var(--terre); text-decoration: none; font-weight: 700;
  padding: 13px 26px; min-height: 48px; border-radius: var(--rayon); border: 2px solid var(--jaune);
  font-family: var(--texte); font-size: 18px; cursor: pointer;
  transition: filter 150ms ease;
}
.btn:hover { filter: brightness(0.95); }
.btn--grand { font-size: 20px; padding: 16px 32px; }
.btn--contour { background: transparent; color: #FFFFFF; border-color: #9A7E72; }
.btn--terre { background: var(--terre); color: #FFFFFF; border-color: var(--terre); }
.sable .btn, .brume .btn { color: var(--terre); }
.lien-fort { color: var(--sarcelle); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.sable .lien-fort, .brume .lien-fort { color: var(--sarcelle-fonce); }
.sombre .lien-fort { color: var(--sarcelle-clair); }
.actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 6px; }
.lien-texte { background: transparent; border: 0; padding: 10px 0; min-height: 44px; font: 700 17px var(--texte); color: var(--sarcelle); cursor: pointer; text-align: left; }
.lien-texte--discret { color: var(--texte-2); }

/* ---------- Héros ---------- */
.heros { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; padding-top: clamp(36px, 6vw, 56px); padding-bottom: clamp(40px, 6vw, 64px); }
.heros--haut { align-items: flex-start; }
.heros__texte { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.heros__cote { flex: 1 1 300px; display: flex; justify-content: center; }
.accueil-heros { padding-top: clamp(44px, 7vw, 72px); padding-bottom: clamp(48px, 7vw, 80px); gap: 48px; }
.accueil-heros h1 { font-size: clamp(38px, 6.6vw, 62px); line-height: 1.05; }
.accueil-heros .chapo { font-size: clamp(18px, 2.3vw, 21px); max-width: 640px; }
.accueil-heros .chapo b { color: #FFFFFF; }
.titre-geant { font-size: clamp(40px, 7vw, 64px); line-height: 1.05; }

/* ---------- Emplacements (photos, vidéo) ---------- */
.emplacement {
  width: 320px; max-width: 100%; min-height: 260px; margin: 0;
  border-radius: var(--rayon); background: var(--sable); border: 2px dashed var(--filet);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--texte-2); font-size: 16px; padding: 24px;
}
.emplacement--portrait { min-height: 400px; }
@media (max-width: 600px) { .emplacement--portrait { min-height: 300px; } .emplacement { min-height: 200px; } }
.emplacement--large { width: 340px; }
.emplacement--video { width: 100%; max-width: 480px; aspect-ratio: 16 / 9; min-height: 0; }
.emplacement--rond { width: 96px; height: 96px; min-height: 0; border-radius: 50%; background: #FFFFFF; font-size: 13px; padding: 8px; }
.emplacement--bandeau { width: 100%; min-height: 200px; }
.sombre .emplacement { background: transparent; border-color: var(--texte-2); color: var(--clair-sur-terre); }
.photo { border-radius: var(--rayon); background: var(--sable); }
.photo--portrait { width: 320px; max-width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.photo--carte { width: 100%; max-width: 280px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.video { width: 100%; max-width: 480px; border-radius: var(--rayon); background: var(--terre); }

/* ---------- Listes numérotées en colonnes ---------- */
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 28px; }
.colonnes--320 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 32px; }
.colonnes--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 40px; }
.colonnes--240 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.point { padding: 22px 0; border-top: 2px solid var(--filet); display: flex; flex-direction: column; gap: 8px; }
.point h3 { font-size: 22px; }
.point p { color: var(--texte-2); font-size: 16px; }
.point--grand h3 { font-weight: 400; font-size: clamp(22px, 2.6vw, 26px); line-height: 1.25; }

/* ---------- Cartes blanches sur fond sable ---------- */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.carte { background: #FFFFFF; border-radius: var(--rayon); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.carte .grand-num { font-size: 40px; }
.carte p { color: var(--texte-2); font-size: 16px; }
.carte__prix { margin-top: auto; font-weight: 700; }
/* les quatre offres mises en avant à l'accueil : cartes cliquables, filet terracotta */
a.carte { color: inherit; text-decoration: none; border-top: 5px solid var(--terracotta); transition: transform .15s; }
a.carte:hover, a.carte:focus-visible { transform: translateY(-2px); }
a.carte .carte__prix { color: var(--terracotta); }

/* ---------- Portes de l'accueil ---------- */
.portes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.porte {
  border-radius: var(--rayon); padding: 28px; text-decoration: none; color: var(--terre);
  display: flex; flex-direction: column; gap: 12px; border: 2px solid transparent;
  transition: border-color 150ms ease;
}
.porte--sable { background: var(--sable); }
.porte--brume { background: var(--brume); }
.porte--blanc { background: #FFFFFF; border-color: var(--filet); }
.porte:hover { border-color: var(--sarcelle); }
.porte .etiquette { color: var(--sarcelle-fonce); }
.porte__titre { font-family: var(--titres); font-size: clamp(25px, 3vw, 30px); line-height: 1.15; }
.porte__texte { color: var(--texte-2); font-size: 17px; }
.porte__lien { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--sarcelle-fonce); }
.porte--blanc .porte__lien, .porte--blanc .etiquette { color: var(--sarcelle); }

/* ---------- Deux encadrés côte à côte ---------- */
.duo { display: flex; flex-wrap: wrap; gap: 18px; }
.encadre { flex: 1 1 320px; border-radius: var(--rayon); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.encadre ul { color: var(--texte-2); font-size: 16px; }
.encadre--sable { background: var(--sable); }
.encadre--brume { background: var(--brume); }
.encadre--blanc { background: #FFFFFF; }

/* ---------- Histoire vraie ---------- */
.histoire { display: flex; flex-wrap: wrap; gap: 18px 28px; }
.histoire > div { flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px; border-top: 2px solid var(--filet); padding-top: 16px; }

/* ---------- Avant / après ---------- */
.avant-apres { border-bottom: 2px solid var(--filet); }
.avant-apres__ligne { display: flex; flex-wrap: wrap; gap: 0 28px; border-top: 2px solid var(--filet); }
.avant-apres__ligne > * { flex: 1 1 300px; padding: 18px 0; }
.avant { color: var(--texte-2); text-decoration: line-through; text-decoration-color: var(--filet-fort); }
.apres { font-weight: 700; }
.avant-apres__entete { display: flex; flex-wrap: wrap; gap: 0 28px; }
.avant-apres__entete > * { flex: 1 1 300px; }

/* ---------- Encart sarcelle (promesse, jeu) ---------- */
.encart {
  background: var(--brume); border-radius: var(--rayon); border-top: 4px solid var(--sarcelle);
  padding: 28px; display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center;
}
.encart__texte { flex: 999 1 420px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.encart__liens { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; }
.encart a { color: var(--sarcelle-fonce); }
.encart .etiquette { color: var(--sarcelle-fonce); }
.encart__titre { font-family: var(--titres); font-weight: 600; font-size: clamp(22px, 2.6vw, 26px); line-height: 1.2; }
.encart p { color: var(--texte-2); }
.encart--filet { background: #FFFFFF; border: 2px solid var(--filet); }
.encart--filet a { color: var(--sarcelle); }

/* ---------- Questions-réponses ---------- */
.faq-bloc { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; }
.promesse {
  flex: 1 1 320px; background: var(--brume); border-radius: var(--rayon); border-top: 4px solid var(--sarcelle);
  padding: 28px; display: flex; flex-direction: column; gap: 10px;
}
.promesse__titre { font-family: var(--titres); font-size: clamp(22px, 2.6vw, 26px); line-height: 1.2; }
.promesse p { font-size: 16px; }
.faq { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.faq h2 { margin-bottom: 10px; font-size: clamp(26px, 3.2vw, 30px); }
.faq details:last-of-type, .accordeon details:last-of-type { border-bottom: 2px solid var(--filet); }
details { border-top: 2px solid var(--filet); }
summary {
  cursor: pointer; font-weight: 700; padding: 12px 0; min-height: 48px;
  display: flex; align-items: center; gap: 12px; list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; margin-left: auto; font-family: var(--titres); font-size: 26px; line-height: 1; color: var(--sarcelle);
  transition: transform 200ms ease;
}
details[open] > summary::after { transform: rotate(45deg); }
details > p, details > div { color: var(--texte-2); font-size: 16px; padding-bottom: 16px; }
details[open] > p, details[open] > div { animation: revele 220ms ease-out; }

/* ---------- Témoignage ---------- */
.temoignage { border-top: 2px solid var(--filet); padding-top: 28px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.temoignage blockquote { margin: 0; font-family: var(--titres); font-size: clamp(22px, 2.6vw, 26px); line-height: 1.35; }
.temoignage figcaption { color: var(--texte-2); font-size: 16px; }

/* ---------- Bandeau final et pied de page ---------- */
.appel .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
.appel__texte { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.appel h2 { font-size: clamp(26px, 3.4vw, 32px); }
.appel p { color: var(--clair-sur-terre); }
.site-footer { background: var(--terre); color: var(--clair-sur-terre); border-top: 1px solid var(--texte-2); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 4px 28px; padding-top: 22px; padding-bottom: 34px; font-size: 15px; align-items: center; }
.site-footer a { color: var(--clair-sur-terre); min-height: 44px; display: inline-flex; align-items: center; }
.site-footer a:hover { color: #FFFFFF; }
.site-footer p { min-height: 44px; display: flex; align-items: center; }

/* ---------- Mes règles (Vos données) ---------- */
.regles { display: flex; flex-direction: column; }
.regle { padding: 22px 0; border-top: 2px solid var(--filet); display: flex; flex-wrap: wrap; gap: 8px 32px; }
.regle .grand-num { flex: 0 0 56px; }
.regle__texte { flex: 1 1 300px; display: flex; flex-direction: column; gap: 6px; }
.regle__texte p { color: var(--texte-2); font-size: 16px; }
.regle__concret { flex: 1 1 300px; background: var(--brume); border-radius: var(--rayon); padding: 16px 18px; font-size: 16px; }
.regle__concret b { color: var(--sarcelle-fonce); }

/* ---------- Lignes à deux colonnes (parcours, transparence) ---------- */
.lignes { display: flex; flex-direction: column; border-bottom: 2px solid var(--filet); }
.ligne { padding: 16px 0; border-top: 2px solid var(--filet); display: flex; flex-wrap: wrap; gap: 4px 28px; }
.ligne__cle { flex: 0 0 140px; font-weight: 700; color: var(--sarcelle); }
.ligne__val { flex: 1 1 300px; }
.lignes--larges .ligne { padding: 18px 0; gap: 6px 28px; }
.lignes--larges .ligne__cle { flex: 0 0 220px; color: var(--terre); font-family: var(--titres); font-weight: 600; font-size: 21px; }
.lignes--larges .ligne__val { display: flex; flex-direction: column; gap: 4px; }
.lignes--larges .ligne__val b { font-size: 19px; }
.lignes--larges .ligne__val span { color: var(--texte-2); font-size: 16px; }

/* ---------- Liens par public (Rendez-vous) ---------- */
.publics a { padding: 18px 0; text-decoration: none; color: var(--terre); display: flex; flex-direction: column; gap: 4px; border-top: 2px solid var(--filet); }
.publics a span:first-child { font-family: var(--titres); font-weight: 600; font-size: 20px; }
.publics a span:last-child { font-weight: 700; font-size: 16px; color: var(--sarcelle); }
.publics a:hover span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.contact-carte { flex: 1 1 320px; background: var(--sable); border-radius: var(--rayon); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.contact-carte .tel { color: var(--terre); font-weight: 700; font-size: 20px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.contact-carte a { color: var(--sarcelle-fonce); }

/* ---------- Mentions légales ---------- */
.legal { border-top: 2px solid var(--filet); padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.legal h2 { font-size: 24px; }
.legal p { font-size: 17px; color: var(--texte-2); }

/* ---------- Outils interactifs (jeux, aiguillage, bilan) ---------- */
.sans-script { background: var(--sable); border-left: 4px solid var(--terracotta); border-radius: var(--rayon); padding: 16px 20px; font-size: 16px; }
.js .sans-script { display: none; }
.choix { display: grid; gap: 12px; }
.choix--grille { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.choix--paire { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.choix-btn {
  width: 100%; border-radius: var(--rayon); padding: 14px 18px; min-height: 52px;
  font: 400 18px/1.35 var(--texte); text-align: left; cursor: pointer;
  background: #FFFFFF; color: var(--terre); border: 2px solid var(--filet-fort);
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.choix-btn:hover:not(:disabled) { border-color: var(--terre); }
.choix-btn[aria-pressed="true"] { background: var(--terre); color: #FFFFFF; border-color: var(--terre); }
.choix-btn:disabled { cursor: default; }
.choix-btn:disabled:not([aria-pressed="true"]) { opacity: 0.7; }
.choix-btn--court { width: auto; font-weight: 700; font-size: 17px; }
.progression { height: 8px; border-radius: 4px; background: var(--sable); overflow: hidden; }
.progression > div { height: 8px; width: 0; background: var(--sarcelle); transition: width 250ms ease; }
.reponse-boite {
  background: var(--brume); border-top: 4px solid var(--sarcelle); border-radius: var(--rayon);
  padding: 28px; display: flex; flex-direction: column; gap: 12px;
}
.reponse-boite a:not(.btn) { color: var(--sarcelle-fonce); }
.reponse-boite .etiquette { color: var(--sarcelle-fonce); }
.reponse-boite__titre { font-family: var(--titres); font-size: clamp(24px, 3vw, 32px); line-height: 1.25; }
.reponse-boite__offre { border-top: 2px solid #C9E2DE; padding-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.sable-boite { background: var(--sable); border-top: 0; }
.aig-public { display: flex; flex-direction: column; }
.aig-public h2 { margin-bottom: 8px; }
.aig-public details > div { display: flex; flex-direction: column; gap: 10px; }
.aig-public .reponse-boite__titre { font-size: 22px; color: var(--terre); }
.attente { border: 2px dashed var(--filet); border-radius: var(--rayon); padding: 26px; color: var(--texte-2); }
.revele { animation: revele 220ms ease-out; }

/* Jeu « Ça passe ou ça casse » */
.docs, .choix-statique { margin: 0; padding: 0; list-style: none; }
.docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.doc { background: #FFFFFF; border-radius: var(--rayon); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.doc .grand-num { font-size: 30px; }
.doc__titre { font-family: var(--titres); font-weight: 600; font-size: 20px; line-height: 1.3; }
.doc__boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.doc__verdict { border-top: 2px solid var(--filet); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.doc__verdict b { color: var(--sarcelle-fonce); }
.doc__verdict span { color: var(--texte-2); font-size: 16px; }
.doc__solution { color: var(--texte-2); font-size: 16px; }
.score-boite { background: var(--terre); color: #FFFFFF; border-radius: var(--rayon); padding: 26px; display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; }
.score-boite__texte { flex: 999 1 420px; display: flex; flex-direction: column; gap: 6px; }
.score-boite__score { font-family: var(--titres); font-size: 28px; }
.score-boite p { color: var(--clair-sur-terre); }
.score-boite .lien-texte { color: var(--sarcelle-clair); }

/* Belval et bilan */
.situation { font-family: var(--titres); font-size: clamp(22px, 3vw, 30px); line-height: 1.3; }
.consequence { background: var(--sable); border-radius: var(--rayon); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.consequence b { font-size: 20px; }
.note--bon { color: var(--sarcelle-fonce); }
.note--moyen { color: var(--texte-2); }
.note--risque { color: var(--alerte); }
.score-geant { font-family: var(--titres); font-size: clamp(38px, 6vw, 56px); line-height: 1.1; }
.priorite { border-top: 2px solid var(--filet); padding: 18px 0; display: flex; gap: 20px; align-items: flex-start; }
.priorite .grand-num { font-size: 34px; flex: 0 0 auto; }
.priorite div { display: flex; flex-direction: column; gap: 4px; }
.priorite b { font-size: 19px; }
.priorite span { color: var(--texte-2); }
.recap-ligne { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 8px 0; border-top: 1px solid var(--filet); }
.recap-ligne span { flex: 1 1 260px; font-size: 16px; }
.recap-ligne b { font-size: 16px; color: var(--terre); }
.solutions { display: flex; flex-direction: column; gap: 18px; }
.solution { border-top: 2px solid var(--filet); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.solution ul { font-size: 16px; color: var(--texte-2); }

@keyframes revele { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

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

@media print {
  .site-header nav, .menu-bouton, .appel, .aube { display: none; }
  body { font-size: 12pt; }
}

/* Version sans script de Belval : le verdict de chaque choix s'affiche en clair */
html:not(.js) [data-note] b::after { font-weight: 400; }
html:not(.js) [data-note="bon"] b::after { content: " · Bon réflexe."; color: var(--sarcelle); }
html:not(.js) [data-note="moyen"] b::after { content: " · Pas faux, mais…"; color: var(--texte-2); }
html:not(.js) [data-note="risque"] b::after { content: " · Aïe."; color: var(--alerte); }

/* ---------- Crédits (mentions légales, 19/10/2026) ---------- */
.credits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 280px)); gap: 12px; margin: 4px 0 12px; }
.credit { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: var(--rayon); background: var(--sable); border-top: 4px solid var(--filet); color: var(--terre); text-decoration: none; }
.credit--lien { background: #FFFFFF; border: 1px solid var(--filet); border-top: 4px solid var(--terracotta); transition: transform .15s, box-shadow .15s; }
.credit--lien:hover, .credit--lien:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(61, 30, 19, .10); }
.credit .etiquette { color: var(--texte-2); }
.credit__nom { font-family: var(--titres); font-weight: 600; font-size: 19px; line-height: 1.15; }
.credit__texte { color: var(--texte-2); font-size: 14px; }
.credit__lien { margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--terracotta); }
@media (prefers-reduced-motion: reduce) { .credit--lien { transition: none; } .credit--lien:hover { transform: none; } }

/* ---------- Accroche (page TPE) et nom de l'outil Diligences (19/10/2026) ---------- */
.accroche { font-family: var(--titres); font-weight: 600; font-style: italic; font-size: clamp(22px, 2.8vw, 28px); line-height: 1.25; color: var(--terre); border-left: 5px solid var(--jaune); padding: 4px 0 4px 18px; max-width: 34ch; }
.sombre .accroche { color: #FFFFFF; }
.nom-outil { font-family: var(--titres); font-weight: 600; color: var(--sarcelle-fonce); letter-spacing: .01em; }
.sombre .nom-outil, .btn .nom-outil { color: inherit; }
h1 .nom-outil, h2 .nom-outil, h3 .nom-outil { color: var(--sarcelle-fonce); }