@charset "utf-8";

/* =============================================================================
   Landing « Dans l'angle mort » — Wakam
   Mobile-first. Un seul fichier, aucune dépendance.

   Contrastes : tous les couples texte/fond ci-dessous ont été MESURÉS
   (formule WCAG 2.1) sur les couleurs relevées dans la maquette.
   Trois couples de la maquette échouaient et ont été corrigés :
     · blanc sur vert #15D25A ........ 2,02:1  ->  texte #334155 : 5,13:1
     · vert #15D25A sur bleu #0063CC .. 2,84:1  ->  vert clair #6EEA99 : 3,80:1
                                                    (texte large uniquement)
                                        et #AAF6C3 : 4,56:1 pour le texte normal
     · bordure verte #15D25A sur blanc  2,02:1  ->  vert foncé #0A7D34 : 5,26:1
   Depuis la relecture client, la page fait la part belle au bleu de marque.
   Règle du vert, désormais tenue partout :
     · en FOND, pour les actions (boutons) — libellé #334155, 5,13:1 ;
     · en TEXTE, uniquement sur les GRANDS titres posés sur bleu (#6EEA99,
       3,80:1, seuil 3:1) ;
     · jamais en petit corps sur du bleu : le seuil y monte à 4,5:1 et le
       vert de marque n'est qu'à 2,84:1. Ces cas-là sont en blanc.
   ========================================================================== */

/* -------------------------------------------------------------- 1. Jetons */

:root {
  /* Couleurs de marque relevées sur la maquette */
  --bleu: #0063CC;              /* sur blanc 5,74:1 · blanc dessus 5,74:1 */
  --bleu-fonce: #00499A;        /* sur vert #15D25A 4,30:1 */
  --navy: #1C293C;              /* blanc dessus 14,67:1 */
  --vert: #15D25A;              /* FOND uniquement (libellé #334155 : 5,13:1) */
  --vert-fonce: #0A7D34;        /* bordures et texte vert sur blanc 5,26:1 */
  --vert-titre: #20DB65;        /* GRANDS TITRES sur bleu : 3,11:1.
                                   Le vert le plus proche de la marque
                                   (#15D25A, 2,84:1) qui franchisse le seuil.
                                   Interdit en petit corps : le seuil y est
                                   de 4,5:1, et aucun vert lisible comme vert
                                   ne l'atteint sur ce bleu. */
  --texte: #334155;             /* couleur de texte : 10,35:1 sur blanc,
                                   5,13:1 sur le vert des boutons */
  --noir: #121212;              /* réservé aux fonds, bordures et focus */
  --blanc: #fff;
  --gris-fond: #F2F6FA;
  --bordure: #6E7A87;           /* bordures de champs sur blanc : 4,17:1 */
  --bordure-douce: #D6DEE6;     /* séparateurs décoratifs, sans information */
  --coche-fond: #EAF3FF;

  /* Accents décoratifs des cartes (aucune information portée) */
  --cyan: #0683AB;
  --orange: #D8451B;

  --focus: var(--noir);
  --bleu-titre: var(--bleu);

  --rayon: 1rem;
  --rayon-petit: .625rem;
  --ombre: 0 .75rem 2rem rgb(18 18 18 / .12);

  /* Poppins est la police du Brand Book Wakam. En attendant les fichiers
     WOFF2 auto-hébergés, on reste sur la pile système : zéro requête,
     zéro dépendance, rendu géométrique proche. */
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------- 2. Socle */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;           /* filet de sécurité pour les blocs pivotés */
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--police);
  font-size: 1rem;
  line-height: 1.6;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 800;
  text-wrap: balance;
}

/* Aucun mot long ne doit pousser la mise en page hors du viewport,
   y compris quand l'utilisateur double la taille du texte. */
h1, h2, h3, h4, p, li, label, legend, .btn { overflow-wrap: break-word; }

/* Les fieldset ont une largeur minimale intrinsèque native (min-content) qui
   les empêche de rétrécir : on la neutralise. */
fieldset { min-inline-size: 0; }

h1 { font-size: clamp(2.25rem, 1.35rem + 4.5vw, 4.25rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.75vw, 3rem); }
h3 { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); }
h4 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--bleu); }
a:hover { text-decoration: none; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------------------------------------------------------- 3. Utilitaires */

.conteneur {
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

section { padding-block: clamp(2.75rem, 7vw, 5.5rem); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.lien-evitement {
  position: absolute; left: -9999px;
  background: var(--blanc); color: var(--texte);
  padding: .75rem 1.25rem; border: 3px solid var(--noir);
  border-radius: 0 0 var(--rayon-petit) 0;
  font-weight: 700; text-decoration: none;
}
.lien-evitement:focus { left: 0; top: 0; z-index: 100; }

main:focus { outline: none; }

.surtitre {
  margin-bottom: .75rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.emoji { font-style: normal; }

/* Boutons — cible tactile 44px minimum.
   Le vert de marque signale l'action : il tranche avec le décor bleu et
   attire l'œil sur ce qu'il faut faire. Seul, son aplat ne se détache pas du
   blanc (2,02:1) ; une bordure vert foncé lui donne un contour net à 5,26:1
   sans rien perdre de son éclat. Le libellé y tient 5,13:1.
   Les actions secondaires restent en contour bleu. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem;
  max-width: 100%;
  padding: .7rem clamp(1rem, 4vw, 1.6rem);
  border: 2px solid transparent;
  border-radius: var(--rayon-petit);
  font: inherit; font-weight: 700;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}

.btn-principal {
  background: var(--vert); color: var(--texte);                     /* 5,13:1 */
  border-color: var(--vert-fonce);                                 /* 5,26:1 */
}
.btn-contour {
  background: var(--blanc); color: var(--texte);
  border-color: var(--bleu);                                      /* 5,74:1 */
}

@media (hover: hover) {
  .btn-principal:hover { background: #0FB94D; }                    /* 7,20:1 */
  .btn-contour:hover { background: var(--gris-fond); }
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------- 3 bis. Visuels de campagne */

/* Dispositif graphique repris de la maquette : la photo est posée dans un
   cadre épais en dégradé, légèrement inclinée, traversée par une bande
   diagonale translucide — la part de la scène que l'on ne voit pas — et
   flanquée d'une pastille ronde à pictogramme qui déborde d'un coin.
   Tout est porté par le CSS : remplacer le fichier image suffira, le
   dispositif reste en place. Ces éléments sont purement décoratifs (le
   contenu est décrit par l'alternative de l'image). */
.visuel {
  position: relative;
  padding: clamp(.4rem, 1.4vw, .8rem);
  border-radius: clamp(.9rem, 2.4vw, 1.6rem);
  background:
    linear-gradient(155deg, var(--da-teinte) 0%, var(--da-teinte) 42%, var(--da-teinte-pale) 100%);
}
.visuel-image {
  position: relative;
  overflow: hidden;
  border-radius: clamp(.55rem, 1.7vw, 1.15rem);
}
.visuel-image img { width: 100%; object-fit: cover; }
.visuel-image::after {
  content: "";
  position: absolute;
  left: -25%; right: -25%;
  top: var(--bande-y, 46%);
  height: var(--bande-h, 30%);
  background: var(--da-bande);
  transform: rotate(var(--bande-angle, -14deg));
}

/* Placeholders extraits de la maquette : leur bande est déjà dans l'image.
   On neutralise donc celle du CSS pour ne pas la doubler. Avec une photo
   propre, il suffira de retirer cette classe dans le HTML. */
.visuel-bande-incrustee .visuel-image::after { content: none; }

.visuel-orange { --da-teinte: #FF6637; --da-teinte-pale: #FFD2C2; --da-bande: rgb(255 102 55 / .58); }
.visuel-cyan   { --da-teinte: #01C7EA; --da-teinte-pale: #BCE9F6; --da-bande: rgb(1 199 234 / .55); }
.visuel-bleu   { --da-teinte: #0063CC; --da-teinte-pale: #A6C8ED; --da-bande: rgb(0 99 204 / .5); }
/* Sur un aplat bleu, un cadre bleu est invisible (1,0:1 : c'est la même
   couleur). Le cadre blanc s'en détache à 5,74:1. */
.visuel-blanc  { --da-teinte: #FFFFFF; --da-teinte-pale: #C9DCF2; --da-bande: rgb(255 255 255 / .45); }

.pastille {
  position: absolute;
  top: clamp(-1.1rem, -2vw, -.65rem);
  left: clamp(-1.1rem, -2vw, -.65rem);
  display: grid; place-items: center;
  width: clamp(2rem, 5.5vw, 3.25rem);
  aspect-ratio: 1;
  background: var(--blanc);
  /* La couleur n'est pas héritée : sur le sticker bleu, le texte est blanc et
     un pictogramme sans couleur propre disparaîtrait sur le fond blanc. */
  color: var(--texte);
  border: .1875rem solid var(--da-teinte, var(--bleu));
  border-radius: 50%;
  font-size: clamp(.9rem, 2.4vw, 1.4rem);
  line-height: 1;
  box-shadow: 0 .25rem .75rem rgb(18 18 18 / .2);
}
.pastille-droite { left: auto; right: clamp(-1.1rem, -2vw, -.65rem); }

/* ------------------------------------- 3 ter. Mention « généré par IA » */

/* Obligation d'étiquetage des contenus générés par IA. Le document de
   référence impose une mention perceptible dès la première exposition,
   intégrée au contenu, distincte du message publicitaire, comportant le
   terme « IA » et le mot « générée ». Pour une image, la forme admise est
   la légende ou le filigrane : c'est un filigrane qui est retenu ici, posé
   dans le cadre de chaque visuel.
   Fond opaque et non translucide : la lisibilité ne doit pas dépendre de ce
   qu'il y a derrière (blanc sur #121212, 18,73:1). */
.mention-ia {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  margin: 0;
  padding: .2rem .5rem;
  background: var(--noir);
  color: var(--blanc);                                           /* 18,73:1 */
  border-radius: .3rem;
  font-size: clamp(.75rem, .72rem + .12vw, .8125rem);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: nowrap;
}
/* Le filigrane se cale sur l'image, jamais sur le bloc qui l'entoure : sinon
   il finit sur le texte de la carte. D'où un conteneur dédié à l'image. */
.visuel-image, .carte-image { position: relative; }
.carte-image { display: block; line-height: 0; }

/* ---------------------------------------------------------------- 4. Entête */

.entete { padding-block: 1.25rem; }
.entete-interieur {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
}
.entete-logo { display: inline-block; }
.entete-logo img { width: 7.1875rem; height: auto; }

.badge-campagne {
  margin: 0;
  padding: .45rem 1rem;
  background: var(--bleu);
  border-radius: 999px;
  color: var(--blanc);                                            /* 5,74:1 */
  font-size: clamp(.8125rem, .75rem + .3vw, 1rem);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge-campagne span { color: var(--blanc); }                     /* 5,74:1 */

/* ------------------------------------------------------------------ 5. Hero */

.hero { padding-top: clamp(1rem, 3vw, 2rem); }

.hero h1 {
  margin-bottom: 1.25rem;
  line-height: 1.3;
  /* Plus grand que les autres h1 : c'est le titre de campagne. */
  font-size: clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem);
}
/* Le texte occupe davantage le bloc bleu — marges intérieures resserrées —
   ce qui fait lire l'aplat comme un contour épousant les lettres plutôt que
   comme une boîte autour du texte. */
.hero h1 span {
  padding: .06em .22em;
  border-radius: .26em;
  background: var(--bleu);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.h1-blanc { color: var(--blanc); }                                /* 5,74:1 */
.h1-vert { color: var(--vert-titre); }             /* 3,11:1 — texte large */

.hero-accroche {
  max-width: 34ch;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
}

.hero-infos {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  margin: 0 0 1.75rem; padding: 0;
  list-style: none;
  font-weight: 700;
}
.hero-infos li { display: flex; align-items: center; gap: .5rem; }
.hero-infos li + li::before {
  content: ""; width: .375rem; height: .375rem;
  border-radius: 50%; background: var(--vert-fonce);
}

.hero-action { margin: 0; }
.hero-action .btn { min-width: min(12rem, 100%); }

/* Collage en deux colonnes indépendantes : chaque colonne empile ses éléments,
   donc une photo courte ne laisse pas de vide sous elle. La colonne de droite
   est décalée vers le bas, comme sur la maquette. */
.hero-visuels {
  display: flex;
  gap: clamp(.75rem, 2.5vw, 1.25rem);
  align-items: flex-start;
  margin-top: clamp(1.5rem, 4vw, 3rem);
}
.hero-colonne {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(.75rem, 2.5vw, 1.25rem);
}
.hero-colonne-decalee { margin-top: clamp(1.25rem, 5vw, 3rem); }
/* Aucun aspect-ratio ici : les photos du hero s'affichent en entier, dans
   leurs proportions d'origine. Rien n'est rogné à l'affichage. */

/* Stickers : bloc arrondi doublé d'une ombre plate décalée, comme la maquette. */
.sticker {
  position: relative;
  margin: 0;
  padding: 1rem 1.125rem;
  border-radius: var(--rayon);
  box-shadow: clamp(.3rem, 1vw, .55rem) clamp(.3rem, 1vw, .55rem) 0 var(--sticker-ombre);
  overflow-wrap: anywhere;
  font-size: clamp(.9375rem, .85rem + .45vw, 1.25rem);
  font-weight: 800;
  line-height: 1.3;
}
/* La pastille déborde du coin : on lui réserve sa place pour qu'elle ne
   recouvre jamais le texte. */
.sticker-bleu {                                                   /* 5,74:1 */
  padding-left: clamp(1.75rem, 4.5vw, 2.75rem);
  background: var(--bleu); color: var(--blanc);
  --sticker-ombre: #A6C8ED; --da-teinte: var(--bleu);
}
.sticker-navy {                                                  /* 14,67:1 */
  padding-right: clamp(1.75rem, 4.5vw, 2.75rem);
  background: var(--navy); color: var(--blanc);
  --sticker-ombre: #8FA4BE; --da-teinte: var(--navy);
}

/* --------------------------------------------- 5 bis. Contexte de page */

/* Explique en trois phrases à quoi sert la page, juste sous le hero.
   Fond bleu : c'est aussi l'un des aplats bleus qui remplacent les blocs
   verts demandés en retrait. */
.contexte {
  background: var(--bleu);
  color: var(--blanc);                                            /* 5,74:1 */
  --focus: var(--blanc);
}
.contexte h2 { margin-bottom: .75rem; }
.contexte p {
  max-width: 62ch;
  font-size: clamp(1rem, .95rem + .3vw, 1.1875rem);
}
.contexte-chute {
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem);
  font-weight: 800;
}

/* Mise en exergue sur les aplats bleus. Le vert clair n'y atteignait que
   4,56:1 — le plus faible contraste de la page, donc l'effet inverse de
   celui recherché. On passe à un surlignage blanc à texte bleu : c'est
   l'inverse exact du fond, le contraste le plus élevé de la palette, et le
   même langage visuel que le titre du hero. */
.surligne {
  padding: .05em .35em;
  border-radius: .3em;
  background: var(--blanc);
  /* Texte noir : c'est le contraste le plus fort possible dans l'encart
     (18,73:1). Le vert a été essayé — le vert de marque est inutilisable sur
     blanc (2,02:1) et sa version foncée manquait d'éclat. */
  color: var(--texte);                                            /* 10,35:1 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ------------------------------------------------------------------ 6. Quiz */

/* Sur mobile, le quiz occupe une hauteur d'écran et s'y tient en entier :
   titre, description, situation, réponses et commandes sans défilement.
   D'où des espacements et des corps de texte fluides, resserrés en bas
   d'échelle. Au-delà de 48em, la contrainte est levée. */
.quiz {
  scroll-margin-top: 1rem;
  background: var(--gris-fond);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  padding-block: .75rem;
}
/* Centrage par marges automatiques plutôt que par align-items : si la carte
   dépasse la hauteur d'écran (petit téléphone, texte agrandi), elle reste
   entièrement atteignable au défilement au lieu d'être rognée en haut. */
.quiz > .conteneur { width: 100%; margin-block: auto; }

.quiz-carte {
  padding: clamp(1rem, 3.5vw, 2.5rem);
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.quiz-carte h2 {
  margin-bottom: .3em;
  font-size: clamp(1.375rem, 1rem + 1.7vw, 2.5rem);
}
.quiz-intro {
  max-width: 60ch;
  margin-bottom: clamp(.5rem, 1.5vw, 1rem);
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
}

.quiz-jauge {
  height: .375rem;
  margin: clamp(.5rem, 2.5vw, 1.5rem) 0;
  background: var(--bordure-douce);
  border-radius: 999px; overflow: hidden;
}
.quiz-jauge-remplissage {
  display: block; width: 0; height: 100%;
  background: var(--bleu);
  transition: width .25s ease;
}

.quiz-situation {
  margin: 0 0 1.5rem;
  padding: 0; border: 0;
}
.quiz-situation:focus { outline: none; }

.quiz-situation legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: clamp(.6rem, 2vw, 1.25rem);
  font-size: clamp(1.0625rem, .95rem + .7vw, 1.625rem);
  font-weight: 800;
  line-height: 1.25;
}
.quiz-etape {
  display: block;
  margin-bottom: .2rem;
  color: var(--bleu);                                             /* 5,74:1 */
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.quiz-reponse {
  display: flex; gap: .6rem; align-items: center;
  margin-bottom: clamp(.4rem, 1.4vw, .75rem);
  padding-left: clamp(.65rem, 2vw, 1rem);
  border: 2px solid var(--bordure);                               /* 4,17:1 */
  border-radius: var(--rayon-petit);
  background: var(--blanc);
}
.quiz-reponse input {
  flex: none;
  width: 1.25rem; height: 1.25rem; margin: 0;
  accent-color: var(--bleu);
}
/* C'est l'étiquette qui porte les marges intérieures : la zone cliquable
   couvre toute la ligne (44px au minimum) sans hauteur supplémentaire. */
.quiz-reponse label {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  min-height: 2.75rem;
  padding: clamp(.35rem, 1.2vw, .6rem) clamp(.65rem, 2vw, 1rem) clamp(.35rem, 1.2vw, .6rem) 0;
  font-size: clamp(.9375rem, .9rem + .2vw, 1rem);
  line-height: 1.35;
  cursor: pointer;
}
/* L'état coché reste porté par le bouton radio lui-même : le fond et la
   bordure ne font que le renforcer (jamais la couleur seule). */
.quiz-reponse:has(input:checked) {
  border-color: var(--bleu);
  background: var(--coche-fond);
}
@media (hover: hover) {
  .quiz-reponse:hover { border-color: var(--bleu); }
}

.quiz-navigation {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: clamp(.875rem, 2.5vw, 1.5rem);
}
.quiz-navigation .btn { flex: 1 1 10rem; min-width: 0; }

.quiz-alerte:empty { display: none; }
.quiz-alerte {
  margin: 1rem 0 0; padding: .75rem 1rem;
  border-left: 4px solid var(--orange);
  background: #FDF0EC;
  font-weight: 700;
}

.quiz-resultat { margin-top: 2rem; }
.quiz-resultat-intro { max-width: 65ch; }
.quiz-resultat h3:focus { outline: none; }

.profil {
  margin-bottom: 1.25rem;
  padding: clamp(1.125rem, 3vw, 1.75rem);
  border-radius: var(--rayon);
  background: var(--bleu);
  color: var(--blanc);                                            /* 5,74:1 */
  --focus: var(--blanc);
}
.profil h4 { color: var(--vert-titre); }           /* 3,11:1 — texte large */
.profil-conseil {
  padding-top: .75rem;
  border-top: 1px solid rgb(255 255 255 / .35);
}

.quiz-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.quiz-actions .btn { flex: 1 1 12rem; min-width: 0; }

/* Destinations de partage dépliées sur ordinateur, où le panneau natif du
   système n'existe pas. Ce sont de simples liens : aucun script tiers,
   aucun cookie déposé tant que l'utilisateur ne clique pas. */
.partage-choix {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--gris-fond);
  border: 2px solid var(--bordure-douce);
  border-radius: var(--rayon-petit);
}
.partage-choix-titre {
  margin-bottom: .625rem;
  font-size: .875rem;
  font-weight: 700;
}
.partage-choix ul {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0; padding: 0; list-style: none;
}
.partage-choix li { min-width: 0; max-width: 100%; }
.partage-lien {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  padding: .5rem 1rem;
  background: var(--blanc);
  border: 2px solid var(--bleu);                                  /* 5,74:1 */
  border-radius: var(--rayon-petit);
  color: var(--texte);                                            /* 10,35:1 */
  font: inherit; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
}
@media (hover: hover) {
  .partage-lien:hover { background: var(--coche-fond); }
}
.partage-note {
  margin: .75rem 0 0;
  font-size: .8125rem;
  max-width: 60ch;
}

.partage-etat:empty { display: none; }
.partage-etat {
  margin: 1rem 0 0; padding: .75rem 1rem;
  border-left: 4px solid var(--vert-fonce);
  background: var(--gris-fond);
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Sans JavaScript : tout le quiz est visible d'un bloc et les commandes
   pas-à-pas, qui ne serviraient à rien, sont retirées. */
html:not(.js) .quiz-jauge,
html:not(.js) .quiz-navigation,
html:not(.js) .quiz-actions,
html:not(.js) .modes-form { display: none; }
.js .quiz-resultat-intro { display: none; }

/* ------------------------------------------------- 7. « Vous êtes plutôt » */

.profils { background: var(--bleu); --focus: var(--blanc); }

.profils-entete {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--blanc);
  border-radius: var(--rayon);
  --focus: var(--noir);
}
.profils-entete h2 { margin-bottom: .5rem; }
.profils-intro { max-width: 55ch; }
.profils-action { margin: 1.25rem 0 0; }

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 3vw, 1.75rem);
  margin: 0; padding: 0;
  list-style: none;
}
.cartes > li { display: flex; }
.carte {
  display: flex; flex-direction: column;
  width: 100%;
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
  --focus: var(--noir);
}
.carte img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.carte-corps {
  flex: 1;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border-top: 5px solid var(--accent, var(--bleu));
}
.carte-corps h3 { margin-bottom: .5rem; }
.carte-corps p { font-size: .9375rem; }
.carte-cyan { --accent: var(--cyan); }
.carte-orange { --accent: var(--orange); }
.carte-verte { --accent: var(--vert-fonce); }
.carte-bleue { --accent: var(--bleu); }

/* --------------------------------------------------------- 8. Les excuses */

.excuses-panneau {
  padding: clamp(1.5rem, 5vw, 3.5rem);
  background: var(--bleu);
  border-radius: var(--rayon);
  color: var(--blanc);                                            /* 5,74:1 */
  --focus: var(--blanc);
}
.excuses-panneau h2 { margin-bottom: 1.5rem; }
.titre-vert { color: var(--vert-titre); }          /* 3,11:1 — texte large */

.excuses-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0; padding: 0;
  list-style: none;
}
.excuses-colonnes > li + li {
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / .35);
}
.excuses-colonnes h3 { margin-bottom: .75rem; }
.excuses-colonnes ul { margin: 0; padding: 0; list-style: none; }
.excuses-colonnes ul li + li { margin-top: .625rem; }
.excuses-colonnes ul li { font-size: .9375rem; }

@media (min-width: 48em) {
  .excuses-colonnes > li + li {
    padding-top: 0; padding-left: clamp(1.25rem, 3vw, 2rem);
    border-top: 0; border-left: 1px solid rgb(255 255 255 / .35);
  }
}

/* -------------------------------------------------- 9. Modes et conseils */

.modes-texte h2 { margin-bottom: 1.5rem; }
.modes-texte em { font-style: normal; color: var(--bleu); }       /* 5,74:1 */

.modes-selecteur { margin: 0; padding: 0; border: 0; }
.modes-selecteur legend {
  padding: 0; margin-bottom: .75rem;
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.modes-selecteur { display: flex; flex-wrap: wrap; gap: .5rem; }
.modes-selecteur legend { float: left; width: 100%; }

/* La pastille est dessinée par le conteneur, pas par l'étiquette : le bouton
   radio se trouve ainsi réellement dans le cadre, sans décalage. */
.mode {
  display: flex; align-items: center; gap: .5rem;
  min-width: 0; max-width: 100%;
  padding-left: .875rem;
  /* Même bordure neutre que les réponses du quiz : le vert est réservé aux
     actions, il n'a rien à faire sur un contrôle de formulaire. */
  border: 2px solid var(--bordure);                               /* 4,17:1 */
  border-radius: 999px;
}
.mode input {
  flex: none;
  width: 1.125rem; height: 1.125rem; margin: 0;
  accent-color: var(--bleu);
}
.mode label {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: .4rem;
  min-height: 2.75rem;
  padding: .4rem .875rem .4rem 0;
  cursor: pointer;
}
/* Même signal que les réponses du quiz : fond bleu pâle et bordure bleue. */
.mode:has(input:checked) {
  background: var(--coche-fond);                                  /* 16,74:1 */
  border-color: var(--bleu);                                      /* 5,13:1 */
}

.conseils {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  background: var(--bleu);
  border-radius: var(--rayon);
  color: var(--blanc);                                            /* 5,74:1 */
  --focus: var(--blanc);
}
/* Les six jeux de conseils sont empilés dans la même cellule de grille : le
   panneau adopte la hauteur du plus long et ne bouge plus d'un mode à
   l'autre. Le bloc masqué garde sa place (visibility) au lieu d'être retiré
   du flux (display), et reste hors de l'arbre d'accessibilité.
   Sans JavaScript, pas d'empilement : les six blocs se suivent normalement. */
.js .conseils { display: grid; }
.js .conseils-mode { grid-area: 1 / 1; min-width: 0; }
.conseils-mode.est-masque { visibility: hidden; }
html:not(.js) .conseils-mode + .conseils-mode { margin-top: 1.75rem; }
/* 18px gras : sous le seuil « texte large » (18,66px), donc 4,5:1 exigé. Ni
   l'un ni l'autre des verts n'y arrive sur le bleu — d'où le blanc (5,74:1).
   Le vert reste réservé aux grands titres. */
.conseils h3 { margin-bottom: 1rem; color: var(--blanc); }
.conseils ol {
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: conseil;
}
.conseils li {
  position: relative;
  counter-increment: conseil;
  padding-left: 3.25rem;
  min-height: 2.25rem;
}
.conseils li + li { margin-top: 1.25rem; }
.conseils li::before {
  content: counter(conseil);
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  background: var(--vert); color: var(--texte);                    /* 5,13:1 */
  border-radius: .625rem;
  font-weight: 800; font-size: 1.125rem;
}
.conseils li strong { display: block; }

/* ----------------------------------------------------------- 10. Vidéo */

.video {
  background: var(--navy);
  color: var(--blanc);                                           /* 14,67:1 */
  --focus: var(--blanc);
}
.video h2 { margin-bottom: 1rem; }
.video .titre-vert { color: var(--vert); }         /* 7,26:1 sur le navy */
.video-texte p { max-width: 40ch; }

/* Cadre au format du film définitif (9:16, décision du 25 août 2026) :
   l'aperçu provisoire est recadré par object-fit, le <video> à venir
   héritera du même ratio. Largeur contenue pour garder une hauteur
   raisonnable sur grand écran. */
.video-media {
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
  max-width: min(20rem, 100%);
}
.video-media img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--rayon);
}

/* --------------------------------------------------------- 11. Mission */

.mission {
  background: var(--bleu);
  color: var(--blanc);                                            /* 5,74:1 */
  --focus: var(--blanc);
}
.mission h2 { margin-bottom: 1rem; }
.mission-texte p + p { margin-top: 0; }
.mission-texte p { max-width: 50ch; }
.titre-bleu { color: var(--bleu-titre); }
.mission-photo {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  --bande-y: 56%; --bande-h: 38%; --bande-angle: -8deg;
}

/* ------------------------------------------------------------ 12. Défi */

/* Le dégradé a été remplacé par un aplat clair : il rompt la série de blocs
   bleus avant le pied de page et laisse le CTA vert ressortir seul. */
.defi { background: var(--gris-fond); }
.defi-carte {
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: 0 .75rem 2.25rem rgb(18 18 18 / .16);
}
.defi-carte h2 { margin-bottom: 1.5rem; }
/* Un seul bouton dans cette section : il ne s'étire pas sur toute la largeur. */
.defi-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.defi-actions .btn { flex: 0 1 auto; min-width: 0; }
.defi-colonne p { font-size: .9375rem; max-width: 45ch; }

/* --------------------------------------- 12 bis. Pages de résultat */

/* Cibles des liens de partage : une page par profil, avec ses propres balises
   Open Graph. Elles reprennent la direction artistique de la campagne — aplat
   bleu, titre en vert, visuel encadré — pour qu'on comprenne d'où vient le
   lien, plutôt qu'une carte blanche isolée au milieu de l'écran. */
.resultat-seul {
  background: var(--bleu);
  color: var(--blanc);                                            /* 5,74:1 */
  --focus: var(--blanc);
}
.resultat-texte h1 { margin-bottom: .75rem; }
.resultat-accroche {
  max-width: 40ch;
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem);
  font-weight: 700;
}

/* L'encart blanc reprend le procédé des mises en exergue de la page. */
.resultat-encart {
  margin: clamp(1.25rem, 3vw, 1.75rem) 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--blanc);
  color: var(--texte);                                            /* 10,35:1 */
  border-radius: var(--rayon);
}
.resultat-encart p + p {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--bordure-douce);
}
.resultat-relance { font-weight: 700; }
.resultat-infos { font-weight: 400; font-size: .9375rem; }
.resultat-actions {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin: 1.5rem 0 0;
}
.resultat-visuel { margin-top: clamp(2rem, 5vw, 0); }

@media (min-width: 48em) {
  .resultat-interieur {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  .resultat-visuel { margin-top: 0; transform: rotate(-2deg); }
}

/* ------------------------------------------------------------ 13. Pied */

.pied {
  padding-block: 2rem;
  background: var(--navy);
  color: var(--blanc);                                           /* 14,67:1 */
  --focus: var(--blanc);
  font-size: .875rem;
}
.pied a { color: var(--blanc); }
.pied-ia { margin-top: .75rem; max-width: 75ch; font-size: .8125rem; }

/* --------------------------------------------- 14. Paliers responsives */

@media (min-width: 48em) {
  /* Les visuels sont des extraits de maquette en basse définition : on borne
     leur largeur pour ne pas les agrandir au-delà du raisonnable. */
  .hero-visuels { max-width: 36rem; }
  .hero-photo-1 { transform: rotate(-5deg); }
  .hero-photo-2 { transform: rotate(3.5deg); }
  .sticker-bleu { transform: rotate(2deg); }
  .sticker-navy { transform: rotate(-2.5deg); }
  .mission-photo { transform: rotate(-2.5deg); }

  .profils-entete {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 1.4fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
  }
  .profils-entete h2 { margin-bottom: 0; }

  .defi-carte {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
  }
  .defi-carte h2 { margin-bottom: 0; }

  .video-interieur,
  .mission-interieur {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
  }
  .video-media, .mission-photo { margin-top: 0; }
}

@media (min-width: 64em) {
  .hero-interieur {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  .hero-visuels { margin-top: 0; }

  .modes-interieur {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  .conseils { margin-top: 0; }

  .quiz-carte { padding: 3rem; }
  .quiz-navigation .btn { flex: 0 1 auto; min-width: 11rem; }
  .quiz-navigation .btn[data-quiz="precedent"] { margin-right: auto; }
  /* Au-delà du mobile, plus besoin de contraindre le quiz à un écran. */
  .quiz { min-height: 0; display: block; padding-block: clamp(2.75rem, 7vw, 5.5rem); }
}

/* Écrans courts (petits téléphones type iPhone SE) : un cran de plus, pour que
   la promesse « tout le quiz à l'écran » tienne aussi là. La cible tactile de
   44px est conservée. Le critère porte sur la hauteur, pas sur la largeur :
   c'est bien la hauteur disponible qui contraint ici. */
@media (max-height: 620px) {
  .quiz-carte h2 { font-size: 1.25rem; }
  .quiz-intro { font-size: .875rem; }
  .quiz-situation legend { font-size: 1rem; }
  .quiz-reponse label { font-size: .875rem; line-height: 1.3; }
}

/* -------------------------------------------------- 15. Préférences */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .btn, .quiz-reponse, .mode { border-color: currentColor; }
}