/* Haut de l'accueil (7 novembre 2026) : fond bleu Leie pleine largeur, menu blanc posé dessus, titre en capitales,
   grand galet photo d'où sortent les pictos de l'appli, carte de l'appli en verre clair qui le mord.
   Issu des maquettes locales (lavande, puis bleue, puis « nuit ») ; chargé après styles.css, sur l'accueil seulement. */

/* ===== 1. Base : panneau, texte, galet, carte de l'appli ===== */
:root {
  --panneau: #efeafc;
  --panneau-fonce: #e3dbf8;
  --carte-miel: #fdf0c8;
  --entete-h: 4.5rem; /* hauteur mesurée de l'en-tête (logo 3 rem + 2 × 0,75 rem) */
}

.accueil .entete {
  border-bottom: 0;
}

/* --- La section et le panneau ---------------------------------------------------------------- */
.hero--panneau {
  --marge-haut: 0.5rem;
  --marge-bas: 1.5rem;
  padding-block: var(--marge-haut) var(--marge-bas);
}

.panneau {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100% - 2rem, 88rem);
  margin-inline: auto;
  border-radius: 2.5rem;
  background: var(--panneau);
}

/* Deux grandes courbes très douces dans les coins du bas, comme sur la référence (aplats, pas de dégradé) */
.panneau::before,
.panneau::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--panneau-fonce);
  pointer-events: none;
}

.panneau::before {
  left: -8%;
  bottom: -30%;
  width: 26%;
}

.panneau::after {
  right: -10%;
  bottom: -36%;
  width: 30%;
}

.panneau-grille {
  --pad: clamp(1.25rem, 7vw - 1rem, 6.5rem);
  display: grid;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem var(--pad) 2.5rem;
}

/* --- Le texte : mention → titre → chapeau → actions → infos, un seul rythme ------------------- */
.panneau-texte {
  /* Trois pas d'espacement, qui se resserrent sur les écrans bas */
  --r1: clamp(0.5rem, 1.6svh, 1rem);
  --r2: clamp(0.875rem, 2.6svh, 1.5rem);
  --r3: clamp(1.125rem, 3.4svh, 2rem);
  position: relative;
  z-index: 3;
  min-width: 0;
}

.panneau-mention {
  position: relative;
  display: inline-block;
  margin: 0 0 var(--r2);
  padding-bottom: 0.5rem;
  color: var(--encre-douce);
  font-size: clamp(0.9375rem, 0.88rem + 0.2vw, 1.0625rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.005em;
}

/* Petit trait jaune sous le début de la mention, plein, sans dégradé */
.panneau-mention::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3rem;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--soleil);
}

.panneau-texte h1 {
  margin: 0;
  color: var(--bleu);
  /* Suit la largeur ET la hauteur de l'écran : le titre ne pousse jamais le panneau hors du premier écran */
  font-size: clamp(2.25rem, min(1.1rem + 3.3vw, 7svh), 4.5rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

/* Le titre en deux phrases, chacune sur sa ligne */
.panneau-texte h1 .ligne {
  display: block;
}

.panneau-chapo {
  margin: var(--r2) 0 0;
  max-width: 30rem;
  color: var(--encre);
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);
  line-height: 1.5;
}

.panneau-action {
  margin-top: var(--r3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.panneau-action .hero-demo {
  flex: none;
  align-self: flex-start;
  color: var(--encre);
  font-weight: 700;
}

.panneau-promesse {
  margin: var(--r3) 0 0;
  color: var(--encre);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  font-weight: 700;
  line-height: 1.4;
}

.panneau-promesse strong {
  color: var(--bleu);
  font-weight: 900;
}

/* La promesse colle au bouton ; le bouton principal et la démo côte à côte, l'un sous l'autre sur téléphone */
.panneau-promesse + .panneau-action {
  margin-top: var(--r1);
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.panneau-action .hero-attente-lien {
  flex-basis: 100%;
}

.hero-demo-bouton {
  gap: 0.5rem;
}

.hero-demo-bouton svg {
  flex: none;
}

@media (max-width: 30rem) {
  .panneau-action .bouton {
    flex: 1 1 100%;
  }
}

.panneau-infos {
  margin: var(--r2) 0 0;
  color: var(--encre);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.6;
}

.panneau-infos span {
  display: block;
}

.panneau-infos span[hidden] {
  display: none;
}

.panneau-texte .compteur {
  margin-top: var(--r1);
}

/* Le petit merci : dans le panneau, une pastille entière (plus un onglet collé au bord de l'écran) */
.panneau-texte .mercis {
  width: fit-content;
  max-width: 100%;
  margin: var(--r1) 0 0;
  padding: 0.375rem 1rem 0.375rem 0.375rem;
  border-right: 2px solid var(--soleil-ombre);
  border-radius: 999px;
  box-shadow: none;
  animation: none;
}

/* Il apparaît doucement sur place (plus de sortie par le côté, il n'est plus au bord de l'écran) */
@media (prefers-reduced-motion: no-preference) {
  .panneau-texte .mercis {
    animation: mercis-apparait 0.4s ease-out 0.3s both;
  }
}

@keyframes mercis-apparait {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

.panneau-texte .mercis-pot {
  width: 2rem;
  height: 2rem;
  background-size: 1.375rem;
}

.panneau-texte .mercis-liste {
  width: min(19rem, 100vw - 9rem);
  font-size: 0.875rem;
}

/* Focus visible sur le lavande : le jaune seul y est trop pâle, on passe au bleu */
.panneau a:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
}

/* --- Le visuel : grand galet photo, carte de l'appli devant ---------------------------------- */
/* Téléphone et tablette : le galet, puis la carte qui remonte sur son bas ; tout reste dans le panneau */
.visuel {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 28rem;
  justify-self: center;
}

/* Le galet a sa forme dans l'image (coins transparents) : jamais d'arrondi, de masque ni de découpe ici */
.visuel-galet {
  grid-area: 1 / 1;
  justify-self: end;
  width: 84%;
  height: auto;
}

/* La carte de l'appli, dessinée : blanche, ombre douce, aucun filet. Tout aligné sur le même bord gauche. */
.carte-appli {
  position: relative;
  z-index: 2;
  grid-area: 2 / 1;
  width: min(88%, 20.5rem);
  margin-top: -30%;
  padding: 1.5rem;
  border-radius: 1.5rem;
  background: #fff;
  box-shadow:
    0 0.125rem 0.5rem rgb(24 0 173 / 0.06),
    0 1.5rem 3rem -1.25rem rgb(24 0 173 / 0.3);
  color: var(--encre);
}

.carte-appli-logo {
  display: block;
  width: auto;
  height: 1.75rem;
}

.carte-appli h2 {
  max-width: none;
  margin: 1rem 0 0;
  color: var(--bleu);
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.carte-appli-sous {
  margin: 0.25rem 0 0;
  color: var(--encre-douce);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.carte-appli-sous strong {
  color: var(--bleu);
  font-weight: 800;
}

/* L'activité du soir : vignette blanche, puis titre, détails et bouton sur un même bord */
.activite {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 1rem;
  background: var(--carte-miel);
}

.activite svg {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.25rem;
  border-radius: 0.875rem;
  background: #fff;
}

.activite-titre {
  margin: 0;
  color: var(--encre);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.25;
}

.activite-meta {
  margin: 0.125rem 0 0;
  color: var(--encre-douce);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Le bouton dessiné, comme le petit bouton de l'appli : aplat bleu et son relief */
.activite-bouton {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  margin-top: 0.5rem;
  padding-inline: 0.875rem;
  border-radius: 0.75rem;
  background: var(--bleu);
  box-shadow: 0 3px 0 var(--bleu-ombre);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* Les progrès : trois étapes reliées sur toute la largeur, lisibles d'un coup d'œil */
.progres {
  margin-top: 1.5rem;
}

.progres-titre {
  margin: 0;
  color: var(--encre);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.3;
}

.progres-points {
  display: flex;
  align-items: center;
  margin: 0.75rem 0 0;
}

.progres-points span {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--bleu);
  color: #fff;
}

.progres-points i {
  flex: 1;
  height: 0.25rem;
  background: var(--bleu);
}

.progres-points .a-faire {
  background: var(--bleu-doux);
}

.progres-points svg {
  width: 0.875rem;
  height: 0.875rem;
}

.progres-texte {
  margin: 0.5rem 0 0;
  color: var(--encre);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
}

.pastille-minutes {
  position: absolute;
  z-index: 2;
  top: 4%;
  left: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  margin: 0;
  padding: 0.5rem 1rem 0.5rem 0.875rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0.75rem 1.5rem -0.75rem rgb(24 0 173 / 0.3);
  color: var(--encre);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.pastille-minutes::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--soleil);
}

/* --- Téléphone ------------------------------------------------------------------------------ */
@media (max-width: 47.99rem) {
  .panneau {
    width: calc(100% - 1rem);
    border-radius: 1.75rem;
  }

  .panneau-grille {
    padding: 2rem 1.25rem 1.5rem;
  }

  /* Le bouton principal sur toute la largeur, à portée de pouce ; le lien de la démo centré dessous */
  .panneau-action {
    align-items: stretch;
  }

  .panneau-action .hero-demo {
    align-self: center;
  }

  /* La carte remonte moins sur le galet : le visage et la feuille cochée restent visibles */
  .carte-appli {
    width: min(90%, 20.5rem);
    margin-top: -22%;
  }
}

/* Téléphone et tablette : vignette d'activité un peu plus petite, pour garder les détails sur une ligne */
@media (max-width: 63.99rem) {
  .activite {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .activite svg {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
  }
}

@media (max-width: 22rem) {
  .carte-appli {
    width: 92%;
    padding: 1.25rem;
  }
}

/* --- Tablette et ordinateur : côte à côte dès 768 px ------------------------------------------ */
@media (min-width: 48rem) {
  .hero--panneau {
    --marge-haut: clamp(0.5rem, 2svh, 1.25rem);
    --marge-bas: clamp(0.75rem, 2.5svh, 1.5rem);
  }

  .panneau-grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3.5vw, 3rem);
    padding-block: 3rem;
  }

  .panneau-action {
    align-items: flex-start;
  }

  .visuel {
    max-width: 26rem;
    justify-self: end;
  }

  .visuel-galet {
    width: 90%;
  }

  .carte-appli {
    width: min(94%, 20rem);
    margin-top: -36%;
  }

  .pastille-minutes {
    top: 2%;
  }
}

/* --- Ordinateur et tablette à l'horizontale : le panneau tient dans le premier écran ---------- */
@media (min-width: 64rem) {
  .panneau-grille {
    --pv: clamp(1.25rem, 10svh - 3.5rem, 4rem);
    /* Hauteur de l'écran, moins l'en-tête et les deux marges de la section ; bornée pour les très grands écrans */
    --h-panneau: clamp(32rem, calc(100svh - var(--entete-h) - var(--marge-haut) - var(--marge-bas)), 46rem);
    --h-visuel: calc(var(--h-panneau) - 2 * var(--pv));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    min-height: var(--h-panneau);
    padding-block: var(--pv);
  }

  /* Le visuel occupe toute la hauteur utile ; le galet est un carré centré, la carte et la pastille
     se placent par rapport à lui (unités du conteneur), pour rester au même endroit à toutes les tailles */
  .visuel {
    container-type: inline-size;
    display: block;
    max-width: 44rem;
    height: var(--h-visuel);
    --galet: min(90cqw, var(--h-visuel));
    --galet-haut: calc((var(--h-visuel) - var(--galet)) / 2);
  }

  .visuel-galet {
    position: absolute;
    top: var(--galet-haut);
    right: 0;
    width: var(--galet);
  }

  .carte-appli {
    position: absolute;
    left: 0;
    bottom: calc(var(--galet-haut) + var(--galet) * 0.05);
    width: clamp(16rem, 52cqw, 20.5rem);
    margin: 0;
  }

  .pastille-minutes {
    top: calc(var(--galet-haut) + var(--galet) * 0.05);
    right: 0;
    left: auto;
    font-size: 0.9375rem;
  }
}

/* Écrans bas (portables 1366 × 768, 1280 × 720, tablette à l'horizontale) : carte un peu plus serrée */
@media (min-width: 64rem) and (max-height: 50rem) {
  .carte-appli {
    padding: 1.25rem;
  }

  .carte-appli h2 {
    margin-top: 0.75rem;
    font-size: 1.25rem;
  }

  .activite {
    margin-top: 0.75rem;
  }

  .progres {
    margin-top: 1rem;
  }
}

/* Navigateurs sans unités « svh » : même calcul avec la hauteur classique */
@supports not (height: 1svh) {
  .panneau-texte {
    --r1: clamp(0.5rem, 1.6vh, 1rem);
    --r2: clamp(0.875rem, 2.6vh, 1.5rem);
    --r3: clamp(1.125rem, 3.4vh, 2rem);
  }

  .panneau-texte h1 {
    font-size: clamp(2.25rem, min(1.1rem + 3.3vw, 7vh), 4.5rem);
  }

  @media (min-width: 48rem) {
    .hero--panneau {
      --marge-haut: clamp(0.5rem, 2vh, 1.25rem);
      --marge-bas: clamp(0.75rem, 2.5vh, 1.5rem);
    }
  }

  @media (min-width: 64rem) {
    .panneau-grille {
      --pv: clamp(1.25rem, 10vh - 3.5rem, 4rem);
      --h-panneau: clamp(32rem, calc(100vh - var(--entete-h) - var(--marge-haut) - var(--marge-bas)), 46rem);
    }
  }
}

/* ===== 2. Texte blanc sur le bleu, galet qui sort du cadre ===== */
.accueil {
  --panneau: var(--bleu);
  --panneau-fonce: #2a14c9;
}

.accueil .panneau-mention {
  color: #d9d6ff;
}

.accueil .panneau-texte h1 {
  color: #fff;
}

.accueil .panneau-chapo,
.accueil .panneau-infos {
  color: #e7e5ff;
}

/* Le bouton principal passe en jaune, relief foncé : il reste le seul point fort sur le bleu */
.accueil .panneau-action .bouton {
  background: var(--soleil);
  border-color: var(--soleil);
  color: var(--bleu-ombre);
  box-shadow: 0 4px 0 var(--soleil-ombre);
}

.accueil .panneau-action .bouton:hover {
  background: #ffdc80;
  border-color: #ffdc80;
}

.accueil .panneau-action .bouton:active {
  box-shadow: 0 0 0 var(--soleil-ombre);
}

.accueil .panneau-action .hero-demo {
  color: #fff;
}

.accueil .panneau-texte .compteur,
.accueil .panneau-texte .mercis {
  color: #fff;
}

/* Focus clavier : blanc sur le bleu */
.accueil .panneau a:focus-visible {
  outline-color: #fff;
}

/* Ombres de la carte et de la pastille : plus sombres, sinon elles disparaissent sur le bleu */
.accueil .carte-appli,
.accueil .pastille-minutes {
  box-shadow: 0 1.6rem 2.6rem -1.4rem rgb(7 0 60 / 0.6);
}
/* Le galet, plus grand, sort du cadre bleu par la droite (jusqu'au bord de l'écran, coupé là sans barre de défilement) */
.accueil .panneau {
  overflow: visible;
}

/* Les deux courbes des coins débordaient aussi : on les retire sur le bleu */
.accueil .panneau::before,
.accueil .panneau::after {
  display: none;
}

.accueil .visuel-galet {
  position: relative;
  z-index: 1;
}

.accueil .carte-appli,
.accueil .pastille-minutes {
  z-index: 3;
}

@media (max-width: 63.99rem) {
  .accueil .visuel-galet {
    width: 112%;
    margin-right: calc(-1 * var(--pad, 1.25rem) - 1rem);
  }
}

@media (min-width: 64rem) {
  .accueil .visuel-galet {
    position: absolute;
    width: calc(var(--galet) * 1.3);
    top: calc(var(--galet-haut) - var(--galet) * 0.12);
    right: calc(-1 * var(--pad, 5rem) - 3rem);
  }
}
/* Tablette : galet plus grand qui sort franchement par la droite ; le « Merci ! » ne passe plus sous la carte */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .accueil .visuel-galet {
    width: 128%;
    margin-right: calc(-1 * var(--pad) - 2.5rem);
  }

  .accueil .panneau-texte .mercis {
    max-width: 100%;
  }
}
/* --- Retouches du 7 novembre (capture de Pedro) ---------------------------------------------- */
/* Écart entre le cadre bleu et le bord de l'écran */
.accueil .panneau-grille {
  --cote: max(1rem, (100vw - 88rem) / 2);
}

/* Le badge jaune des inscriptions sort du cadre par la gauche, jusqu'au bord de l'écran, comme un onglet.
   Son contenu reste aligné sur la colonne du texte. Un message tient sur une ligne : plus de chevauchement. */
.accueil .panneau-texte .mercis {
  width: fit-content;
  max-width: none;
  margin-left: calc(-1 * (var(--pad) + var(--cote)));
  padding: 0.4rem 1.1rem 0.4rem calc(var(--pad) + var(--cote) - 0.1rem);
  border: 2px solid var(--soleil-ombre);
  border-left: 0;
  border-bottom-width: 4px;
  border-radius: 0 999px 999px 0;
}

.accueil .panneau-texte .mercis-liste {
  width: min(27rem, 100vw - 8rem);
  height: 1.4em;
  white-space: nowrap;
}

.accueil .panneau-texte .mercis-liste li {
  white-space: nowrap;
}

@media (max-width: 47.99rem) {
  .accueil .panneau-texte .mercis-liste {
    height: 2.6em;
    white-space: normal;
  }

  .accueil .panneau-texte .mercis-liste li {
    white-space: normal;
  }
}

/* Galet encore plus grand sur ordinateur : il sort par le haut, par la droite jusqu'au bord de l'écran, et par le bas,
   sans jamais passer sous la colonne du texte */
@media (min-width: 64rem) {
  .accueil .visuel-galet {
    width: min(calc(var(--galet) * 1.5), calc(100cqw + var(--pad) + var(--cote) + 3rem));
    top: calc(var(--galet-haut) - var(--galet) * 0.22);
    right: calc(-1 * (var(--pad) + var(--cote)) - 3rem);
  }
}
@media (min-width: 64rem) {
  .accueil .visuel-galet {
    width: min(calc(var(--galet) * 1.6), calc(100cqw + var(--pad) + var(--cote)));
    right: calc(-1 * (var(--pad) + var(--cote)) + 0.5rem);
  }
}
/* --- Selon les traits rouges de Pedro ---------------------------------------------------------- */
/* Galet : grand, derrière la carte, touche le haut du cadre, ne dépasse qu'un peu à droite */
@media (min-width: 64rem) {
  .accueil .visuel-galet {
    width: calc(var(--galet) * 1.18);
    top: calc(var(--galet-haut) - var(--galet) * 0.1);
    right: calc(-1 * var(--pad) - 2.5rem);
  }
}

/* Badge des inscriptions : posé sur le coin bas gauche du cadre, à cheval sur le bord gauche et le bord du bas */
.accueil .panneau {
  --cote: max(1rem, (100vw - 88rem) / 2);
}

.accueil .panneau-texte {
  position: static;
}

.accueil .panneau-texte .mercis {
  position: absolute;
  z-index: 4;
  left: calc(-1 * min(5rem, var(--cote) - 0.25rem));
  bottom: -1.4rem;
  margin: 0;
  padding: 0.4rem 1.1rem 0.4rem 0.4rem;
  border: 2px solid var(--soleil-ombre);
  border-bottom-width: 4px;
  border-radius: 999px;
}

/* Le cadre garde la place du badge en bas sur téléphone */
@media (max-width: 47.99rem) {
  .accueil .panneau {
    margin-bottom: 1.6rem;
  }

  .accueil .panneau-texte .mercis {
    left: 0.5rem;
    right: 0.5rem;
  }
}
/* Badge des inscriptions plus discret : sans contour ni relief, plus petit, juste la taille du message */
.accueil .panneau-texte .mercis {
  gap: 0.5rem;
  padding: 0.3rem 0.95rem 0.3rem 0.3rem;
  border: 0;
  box-shadow: none;
}

.accueil .panneau-texte .mercis-pot {
  width: 1.6rem;
  height: 1.6rem;
  background-size: 1.05rem;
}

.accueil .panneau-texte .mercis-liste {
  width: min(23rem, 100vw - 7rem);
  font-size: 0.8125rem;
  font-weight: 600;
}

.accueil .panneau-texte .mercis-liste strong {
  font-weight: 800;
}
/* ===== 3. Pleine largeur, titre en capitales, carte en verre, pictos de l'appli ===== */
.accueil {
  --nuit-1: #0e0068;
  --nuit-2: #1a0fa3;
}

/* --- Menu sur le bleu nuit ------------------------------------------------------------------- */
.accueil .entete {
  background: var(--nuit-1);
  backdrop-filter: none;
  border-bottom: 0;
}

.accueil .entete .langues-bouton,
.accueil .entete .nav-bouton {
  color: #fff;
}

.accueil .entete .nav-bouton {
  background: transparent;
  border-color: rgb(255 255 255 / 0.5);
  box-shadow: none;
}

.accueil .entete .langues-bouton:hover,
.accueil .entete .langues-bouton[aria-expanded="true"] {
  background: rgb(255 255 255 / 0.14);
}

/* « Me prévenir » : pilule blanche, texte bleu nuit */
.accueil .entete .bouton--secondaire:not(.nav-bouton) {
  background: #fff;
  border-color: #fff;
  color: var(--nuit-1);
  box-shadow: none;
  border-radius: 999px;
}

.accueil .entete .logo img {
  content: url("img/leie-logo-blanc.png");
}

@media (min-width: 64rem) {
  .accueil .entete .nav-lien {
    color: #fff;
    font-weight: 700;
  }

  .accueil .entete .nav-lien:hover,
  .accueil .entete .nav-sous-bouton[aria-expanded="true"] {
    color: var(--soleil);
  }
}

/* --- Le fond : pleine largeur, sans cadre --------------------------------------------------- */
.accueil .hero--panneau {
  padding: 0;
  background: linear-gradient(115deg, var(--nuit-1) 0%, var(--nuit-1) 35%, var(--nuit-2) 100%);
}

.accueil .panneau {
  width: 100%;
  max-width: none;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.accueil .panneau-grille {
  width: min(100%, 88rem);
  margin-inline: auto;
}

/* Pictos fins en filigrane (livres, molécule, tablette) : traits blancs très légers, jamais sous le texte */
.filigrane {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.filigrane svg {
  position: absolute;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.14;
}

.filigrane .f-molecule { top: 10%; left: 54%; width: 6.5rem; }
.filigrane .f-livre-haut { top: 9%; right: 3%; width: 4.5rem; transform: rotate(14deg); }
.filigrane .f-tablette { top: 30%; left: 50%; width: 4rem; transform: rotate(-12deg); }
.filigrane .f-livre-bas { bottom: 6%; right: 6%; width: 5.5rem; transform: rotate(-8deg); }
.filigrane .f-crayon { bottom: 10%; left: 56%; width: 3.5rem; transform: rotate(20deg); }

@media (max-width: 63.99rem) {
  .filigrane .f-tablette,
  .filigrane .f-crayon {
    display: none;
  }
}

/* --- Le texte -------------------------------------------------------------------------------- */
.accueil .panneau-texte {
  position: relative;
  z-index: 3;
}

.accueil .panneau-mention {
  color: #cfd2ff;
  font-weight: 600;
}

.accueil .panneau-mention::after {
  display: none;
}

.accueil .panneau-texte h1 {
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.02;
  font-size: clamp(2rem, 1rem + 2.6vw, 3.5rem);
}

.accueil .panneau-chapo,
.accueil .panneau-infos {
  color: #dfe1ff;
}

.accueil .panneau-infos {
  font-size: 0.875rem;
}

/* Bouton doré : léger dégradé du jaune Leie vers l'or, relief foncé, coins arrondis comme le site */
.accueil .panneau-action .bouton {
  background: linear-gradient(180deg, #ffd25a 0%, var(--soleil) 45%, #f5b400 100%);
  border-color: var(--soleil);
  color: var(--nuit-1);
  box-shadow: 0 4px 0 var(--soleil-ombre), 0 0.8rem 1.6rem -0.6rem rgb(255 200 61 / 0.45);
}

.accueil .panneau-action .hero-demo {
  color: #fff;
}

/* Le petit merci, sans cadre autour : simple pastille discrète sous les infos */
.accueil .panneau-texte .mercis {
  position: static;
  margin-top: 1rem;
  left: auto;
  right: auto;
}

/* --- Le galet sort par la droite de l'écran --------------------------------------------------- */
@media (min-width: 64rem) {
  .accueil .visuel-galet {
    width: calc(var(--galet) * 1.22);
    top: calc(var(--galet-haut) - var(--galet) * 0.08);
    right: calc(-1 * var(--pad) - max(0rem, (100vw - 88rem) / 2) - 4rem);
  }
}

@media (max-width: 63.99rem) {
  .accueil .visuel-galet {
    margin-right: calc(-1 * var(--pad) - 2rem);
  }
}

/* --- La carte de l'appli en verre dépoli ------------------------------------------------------- */
.accueil .carte-appli {
  background: rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1.8rem 3rem -1.4rem rgb(5 0 50 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.35);
  color: #fff;
}

.accueil .carte-appli-logo {
  content: url("img/leie-logo-blanc.png");
}

.accueil .carte-appli h2 {
  color: #fff;
}

.accueil .carte-appli-sous,
.accueil .carte-appli-sous strong {
  color: #e6e7ff;
}

/* L'activité reste sur fond clair, bien lisible */
.accueil .activite {
  background: rgb(255 255 255 / 0.92);
}

.accueil .activite-bouton {
  background: var(--nuit-1);
}

.accueil .progres-titre,
.accueil .progres-texte {
  color: #fff;
}

.accueil .progres-points span,
.accueil .progres-points i {
  background: var(--nuit-1);
}

.accueil .progres-points .a-faire {
  background: rgb(255 255 255 / 0.85);
}

.accueil .progres-points i:last-of-type {
  background: rgb(255 255 255 / 0.6);
}

/* Si le navigateur ne sait pas flouter, la carte reste lisible : fond bleu nuit presque plein */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .accueil .carte-appli {
    background: rgb(14 0 104 / 0.92);
  }
}

/* Moins de transparence demandée : fond plein */
@media (prefers-reduced-transparency: reduce) {
  .accueil .carte-appli {
    background: var(--nuit-1);
    backdrop-filter: none;
  }
}

.accueil .pastille-minutes {
  display: none;
}

/* Verre clair (comme la référence) : texte bleu nuit, lisible sur le bleu comme sur la photo */
.accueil .carte-appli {
  background: rgb(240 241 255 / 0.62);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  color: var(--nuit-1);
}

.accueil .carte-appli-logo {
  content: none;
}

.accueil .carte-appli h2,
.accueil .progres-titre,
.accueil .progres-texte {
  color: var(--nuit-1);
}

.accueil .carte-appli-sous {
  color: var(--encre);
}

.accueil .carte-appli-sous strong {
  color: var(--nuit-1);
}

.accueil .progres-points .a-faire {
  background: #fff;
}

.accueil .progres-points i:last-of-type {
  background: rgb(255 255 255 / 0.9);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .accueil .carte-appli {
    background: rgb(240 241 255 / 0.96);
  }
}
/* Tablette : le merci reste dans la colonne du texte (sur deux lignes si besoin) */
@media (max-width: 63.99rem) {
  .accueil .panneau-texte .mercis {
    max-width: 100%;
  }

  .accueil .panneau-texte .mercis-liste {
    width: min(17rem, 100vw - 7rem);
    height: 2.6em;
    white-space: normal;
  }

  .accueil .panneau-texte .mercis-liste li {
    white-space: normal;
  }
}
/* Téléphone : les pictos du haut passeraient derrière le titre, on les retire */
@media (max-width: 47.99rem) {
  .filigrane .f-molecule,
  .filigrane .f-livre-haut {
    display: none;
  }
}
/* Galet plus grand : il passe sous la carte en verre, qui le « mord » sur sa gauche ; il sort par la droite de l'écran
   et reste dans la hauteur du haut de page (aucune coupe droite en haut ni en bas) */
@media (min-width: 64rem) {
  .accueil .visuel-galet {
    --g: min(calc(82cqw + var(--pad) + max(0rem, (100vw - 88rem) / 2) + 4rem), calc(var(--h-visuel) * 1.1));
    width: var(--g);
    top: calc((var(--h-visuel) - var(--g)) / 2);
    right: calc(-1 * var(--pad) - max(0rem, (100vw - 88rem) / 2) - 4rem);
  }

  .accueil .carte-appli {
    bottom: calc(var(--h-visuel) * 0.1);
  }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .accueil .visuel-galet {
    width: 135%;
    margin-right: calc(-1 * var(--pad) - 3rem);
  }

  .accueil .carte-appli {
    margin-top: -48%;
  }
}

@media (max-width: 47.99rem) {
  .accueil .visuel-galet {
    width: 118%;
    margin-right: calc(-1 * var(--pad) - 2.5rem);
  }

  .accueil .carte-appli {
    margin-top: -40%;
  }
}
@media (min-width: 64rem) {
  .accueil .visuel-galet {
    --g: min(calc(90cqw + var(--pad) + max(0rem, (100vw - 88rem) / 2)), calc(var(--h-visuel) + 2 * var(--pv) - 1rem));
    right: calc(-1 * var(--pad) - max(0rem, (100vw - 88rem) / 2) - 1.5rem);
  }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .accueil .carte-appli {
    margin-top: -30%;
  }
}
/* Le galet est accroché à la carte (pas au bord de l'écran) : la carte le mord à toutes les largeurs.
   Sur les écrans moyens, il dépasse encore par la droite ; sur les très grands, il reste entier dans la page. */
@media (min-width: 64rem) {
  .accueil .visuel-galet {
    --g: calc(var(--h-visuel) + 2 * var(--pv) - 1rem);
    right: auto;
    left: calc(clamp(16rem, 52cqw, 20.5rem) * 0.42);
  }
}
/* --- Pictos du fond, redessinés : objets de l'école, traits fins arrondis et léger aplat ------- */
.filigrane svg {
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.16;
  transform: rotate(var(--r, 0deg));
}

.filigrane .plein {
  fill: #fff;
  fill-opacity: 0.07;
  stroke: none;
}

.filigrane .ruban,
.filigrane .perles circle {
  fill: var(--soleil);
  fill-opacity: 0.55;
  stroke: none;
}

.filigrane text {
  fill: #fff;
  stroke: none;
  font-family: var(--police);
  font-weight: 900;
}

.filigrane .f-fraction text { font-size: 42px; }
.filigrane .f-lettres text { font-size: 60px; }

/* Placement : autour du visuel et sur les bords, jamais derrière la colonne du texte */
.filigrane .f-livre    { top: 7%;  left: 52%;  width: 6.5rem; --r: -8deg; }
.filigrane .f-fraction { top: 34%; left: 50%;  width: 2.6rem; --r: 6deg; }
.filigrane .f-regle    { bottom: 8%; left: 50%; width: 7rem; --r: -14deg; }
.filigrane .f-boulier  { top: 6%;  right: 3%;  width: 5rem;  --r: 10deg; }
.filigrane .f-crayon   { bottom: 6%; right: 4%; width: 2.4rem; --r: 28deg; }
.filigrane .f-lettres  { bottom: 30%; right: 2%; width: 4.4rem; --r: -6deg; }
.filigrane .f-feuille  { top: 62%; left: 47%;  width: 2.8rem; --r: 0deg; }

/* Les anciens pictos (molécule, tablette…) ne sont plus utilisés */
.filigrane .f-molecule,
.filigrane .f-tablette,
.filigrane .f-livre-haut,
.filigrane .f-livre-bas {
  display: none;
}

@media (max-width: 63.99rem) {
  .filigrane .f-fraction,
  .filigrane .f-feuille,
  .filigrane .f-regle {
    display: none;
  }
}

@media (max-width: 47.99rem) {
  .filigrane .f-livre,
  .filigrane .f-boulier,
  .filigrane .f-lettres {
    display: none;
  }

  .filigrane .f-crayon {
    display: block;
  }
}
.filigrane .f-fraction { top: 13%; left: 46%; }
.filigrane .f-feuille  { top: auto; bottom: 16%; left: 44.5%; width: 3.2rem; --r: -10deg; }
/* --- Les pictos de l'appli sortent de derrière le galet ----------------------------------------- */
/* Les pictos du fond sont remplacés par ceux de l'appli, tout contre le galet */
.accueil .filigrane {
  display: none;
}

.pictos-app {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Une tuile blanche arrondie, comme une icône d'appli ; la partie qui passe derrière la photo est cachée par le galet */
.tuile {
  position: absolute;
  display: grid;
  place-items: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: 0 1rem 1.8rem -0.9rem rgb(5 0 50 / 0.6);
  transform: rotate(var(--r, 0deg));
}

.tuile .demo-picto {
  width: 2.9rem;
  height: 2.9rem;
}

.accueil .visuel-galet {
  z-index: 1;
}

/* Ordinateur : placées sur le pourtour du galet (taille --g, bord gauche --gl, haut --gh) */
@media (min-width: 64rem) {
  .accueil .visuel {
    --gl: calc(clamp(16rem, 52cqw, 20.5rem) * 0.42);
    --gh: calc((var(--h-visuel) - var(--galet-taille)) / 2);
    --galet-taille: calc(var(--h-visuel) + 2 * var(--pv) - 1rem);
  }

  .tuile.t1 { left: calc(var(--gl) + var(--galet-taille) * 0.08); top: calc(var(--gh) + var(--galet-taille) * 0.1); --r: -14deg; }
  .tuile.t2 { left: calc(var(--gl) + var(--galet-taille) * 0.42); top: calc(var(--gh) - 1.6rem); --r: 8deg; }
  .tuile.t3 { left: calc(var(--gl) + var(--galet-taille) * 0.9); top: calc(var(--gh) + var(--galet-taille) * 0.24); --r: 16deg; }
  .tuile.t4 { left: calc(var(--gl) + var(--galet-taille) * 0.93); top: calc(var(--gh) + var(--galet-taille) * 0.62); --r: -10deg; }
  .tuile.t5 { left: calc(var(--gl) + var(--galet-taille) * 0.66); top: calc(var(--gh) + var(--galet-taille) * 0.9); --r: 6deg; }
  .tuile.t6 { left: calc(var(--gl) - 1.2rem); top: calc(var(--gh) + var(--galet-taille) * 0.34); --r: -22deg; }
}

/* Tablette et téléphone : trois tuiles seulement, sur le haut et la droite du galet */
@media (max-width: 63.99rem) {
  .tuile {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 1rem;
  }

  .tuile .demo-picto {
    width: 2.2rem;
    height: 2.2rem;
  }

  .tuile.t1 { top: -0.8rem; left: 18%; --r: -14deg; }
  .tuile.t3 { top: 22%; right: -0.5rem; --r: 16deg; }
  .tuile.t4 { top: 52%; right: -0.8rem; --r: -10deg; }

  .tuile.t2,
  .tuile.t5,
  .tuile.t6 {
    display: none;
  }
}
/* --- Galet et tuiles dans un même bloc : les tuiles se placent en % du galet, à toutes les largeurs -- */
.galet-zone {
  position: relative;
  grid-area: 1 / 1;
  justify-self: end;
  aspect-ratio: 1;
}

.galet-zone .visuel-galet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

@media (min-width: 64rem) {
  .accueil .galet-zone {
    --g: calc(var(--h-visuel) + 2 * var(--pv) - 1rem);
    position: absolute;
    left: calc(clamp(16rem, 52cqw, 20.5rem) * 0.42);
    top: calc((var(--h-visuel) - var(--g)) / 2);
    width: var(--g);
  }

  .accueil .galet-zone .visuel-galet {
    top: 0;
    left: 0;
    right: auto;
    width: 100%;
  }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .accueil .galet-zone {
    width: 135%;
    margin-right: calc(-1 * var(--pad) - 3rem);
  }
}

@media (max-width: 47.99rem) {
  .accueil .galet-zone {
    width: 118%;
    margin-right: calc(-1 * var(--pad) - 2.5rem);
  }
}

.galet-zone .pictos-app {
  inset: 0;
}

/* Positions en % du galet : chaque tuile dépasse de son bord, le reste passe derrière la photo */
.tuile.t1 { left: 4%;  top: 14%; right: auto; --r: -14deg; }
.tuile.t2 { left: 40%; top: -5%; right: auto; --r: 8deg; }
.tuile.t3 { left: 88%; top: 20%; right: auto; --r: 16deg; }
.tuile.t4 { left: 92%; top: 58%; right: auto; --r: -10deg; }
.tuile.t5 { left: 64%; top: 91%; right: auto; --r: 6deg; }
.tuile.t6 { left: -5%; top: 40%; right: auto; --r: -22deg; }

@media (max-width: 63.99rem) {
  .tuile.t1 { left: 6%; top: 8%; }
  .tuile.t3 { left: 84%; top: 18%; }
  .tuile.t4 { left: 86%; top: 52%; }
}
/* Les tuiles dépassent davantage : environ deux tiers visibles, sur le pourtour libre du galet */
.tuile.t1 { left: 5%;  top: 6%;  --r: -14deg; }
.tuile.t2 { left: 80%; top: 4%;  --r: 10deg; }
.tuile.t3 { left: 95%; top: 34%; --r: 16deg; }
.tuile.t4 { left: 84%; top: 78%; --r: -10deg; }
.tuile.t6 { left: -8%; top: 24%; --r: -22deg; }

.tuile.t5 {
  display: none;
}

@media (max-width: 63.99rem) {
  .tuile.t1 { left: 4%;  top: 2%; }
  .tuile.t3 { left: 82%; top: 8%; }
  .tuile.t4 { left: 88%; top: 46%; }
}
/* Pictos sans tuile, en bleus clairs (lisibles sur le bleu nuit) avec la touche jaune de l'appli */
.tuile {
  width: 5rem;
  height: 5rem;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.tuile .demo-picto {
  width: 4.4rem;
  height: 4.4rem;
  overflow: visible;
}

.tuile .demo-picto .b { fill: #6f63ff; }
.tuile .demo-picto .w { fill: #c9c4ff; }
.tuile .demo-picto .s { fill: var(--soleil); }

.tuile .demo-picto .t {
  stroke: #6f63ff;
}

.tuile .demo-picto .l {
  stroke: #6f63ff;
}

@media (max-width: 63.99rem) {
  .tuile {
    width: 3.8rem;
    height: 3.8rem;
  }

  .tuile .demo-picto {
    width: 3.2rem;
    height: 3.2rem;
  }
}
/* Téléphone : une colonne à la largeur de l'écran, titre en capitales à la bonne taille */
@media (max-width: 47.99rem) {
  .accueil .panneau-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .accueil .panneau-texte h1 {
    font-size: clamp(1.7rem, 0.6rem + 6.4vw, 2.4rem);
  }
}

/* Pictos de l'appli en blanc, trait léger : seulement les contours, sans aplat */
.tuile .demo-picto .b,
.tuile .demo-picto .w,
.tuile .demo-picto .s {
  fill: none;
}

.tuile .demo-picto * {
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tuile .demo-picto {
  opacity: 0.85;
}
/* Tablette et téléphone : le galet, puis la carte qui remonte sur son bas (empilés, sans grille) */
@media (max-width: 63.99rem) {
  .accueil .visuel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .accueil .galet-zone {
    align-self: flex-end;
    flex: none;
  }

  .accueil .carte-appli {
    grid-area: auto;
    margin-top: -32%;
  }
}
/* Un seul bleu partout (le bleu Leie du logo) : menu, fond, bouton et points de la carte, sans dégradé */
.accueil {
  --nuit-1: var(--bleu);
  --nuit-2: var(--bleu);
}

.accueil .hero--panneau {
  background: var(--bleu);
}

.accueil .entete {
  background: var(--bleu);
}

/* Le test A/B (version.js) remplace le titre par du texte avec un retour à la ligne : on le respecte */
.accueil .panneau-texte h1 {
  white-space: pre-line;
}
/* ===== 4. Panel n° 2 bis et relecture extérieure (7 novembre 2026, soir) ===== */

/* Titre en minuscules très grasses : les capitales ralentissaient les lecteurs lents et ceux qui lisent traduit */
.accueil .panneau-texte h1 {
  text-transform: none;
  letter-spacing: -0.025em;
  line-height: 1.04;
  font-size: clamp(2.2rem, 1rem + 3vw, 4.1rem);
}

@media (max-width: 47.99rem) {
  .accueil .panneau-texte h1 {
    font-size: clamp(2rem, 0.9rem + 5.6vw, 2.6rem);
  }
}

/* Leie par rapport aux devoirs : une ligne courte sous le sous-titre */
.accueil .panneau-complement {
  margin: 0.75rem 0 0;
  max-width: 32rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}

/* « En attendant mercredi » : lien secondaire, discret, sous « Voir un exemple » */
.accueil .hero-attente-lien {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: #dfe1ff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.accueil .hero-attente-lien:hover {
  color: #fff;
}

.accueil .hero-attente-lien[hidden] {
  display: none;
}

/* La carte de l'appli devient un lien vers l'exemple (plus de faux bouton) */
.accueil a.carte-appli {
  display: block;
  color: var(--bleu);
  text-decoration: none;
  transition: transform 0.15s ease;
}

.accueil a.carte-appli:hover {
  transform: translateY(-3px);
}

.accueil a.carte-appli:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .accueil a.carte-appli {
    transition: none;
  }

  .accueil a.carte-appli:hover {
    transform: none;
  }
}

.carte-appli-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.carte-exemple {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgb(24 0 173 / 0.1);
  color: var(--bleu);
  font-size: 0.75rem;
  font-weight: 800;
}

/* La phrase à dire : ce qui distingue Leie d'une banque d'exercices */
.a-dire {
  margin-top: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.875rem;
  background: rgb(255 255 255 / 0.92);
}

.a-dire-titre {
  margin: 0;
  color: var(--bleu);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.a-dire-phrase {
  margin: 0.25rem 0 0;
  color: var(--encre);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Les progrès, en une seule ligne discrète */
.carte-appli-progres {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.8rem 0 0;
  color: var(--bleu);
  font-size: 0.8125rem;
  font-weight: 700;
}

.carte-appli-progres .points {
  display: inline-flex;
  gap: 0.25rem;
}

.carte-appli-progres i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--bleu);
}

.carte-appli-progres i.a-faire {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--bleu);
}

/* Tenir dans le premier écran malgré les deux lignes ajoutées : titre un peu plus petit, écarts resserrés */
@media (min-width: 64rem) {
  .accueil .panneau-texte h1 {
    font-size: clamp(2.2rem, 0.6rem + 2.6vw, 3.6rem);
  }

  .accueil .panneau-chapo {
    margin-top: 1rem;
  }

  .accueil .panneau-action {
    margin-top: 1.4rem;
    gap: 0.35rem;
  }

  .accueil .panneau-infos {
    margin-top: 0.75rem;
  }
}

@media (min-width: 64rem) and (max-height: 50rem) {
  .accueil .panneau-mention {
    margin-bottom: 0.9rem;
  }

  .accueil .panneau-texte h1 {
    font-size: clamp(2rem, 0.4rem + 2.4vw, 3.1rem);
  }

  .accueil .panneau-chapo {
    font-size: 1.05rem;
  }
}
/* Bloc « Pourquoi » : une seule ligne de trois bénéfices ; l'intitulé passe à la ligne dans sa case */
.accueil .pourquoi-ligne--avec .pourquoi-tete {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.accueil .pourquoi-ligne--avec .pourquoi-tete img {
  flex: none;
}
/* Encart « associations », à la fin du bloc des prix : aplat bleu, texte blanc, bouton blanc */
.encart-associations {
  display: grid;
  gap: 1rem 2rem;
  align-items: center;
  max-width: 62rem;
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0;
  padding: clamp(1.4rem, 1rem + 1.5vw, 2rem) clamp(1.4rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--arrondi);
  background: var(--bleu);
  color: #fff;
}

.encart-associations h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 900;
  line-height: 1.2;
}

.encart-associations p {
  margin: 0.4rem 0 0;
  color: #e7e5ff;
  font-size: 1.02rem;
  line-height: 1.5;
}

.encart-associations .bouton {
  justify-self: start;
}

@media (min-width: 48rem) {
  .encart-associations {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
/* Encart « associations » plus discret : parcours secondaire, fond lavande clair, simple lien (7 novembre 2026) */
.encart-associations {
  background: var(--bleu-pale);
  color: var(--encre);
}

.encart-associations h3 {
  color: var(--bleu);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
}

.encart-associations p {
  color: var(--encre-douce);
  font-size: 0.98rem;
}

.encart-associations-lien {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--bleu);
  font-weight: 800;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.encart-associations-lien:hover {
  color: var(--bleu-vif);
}
/* ===== 5. Bloc « Ce soir avec Leie » : la vidéo en bandeau de fond (7 novembre 2026) ===== */
/* Titre en blanc et trois étapes en cartes blanches sur la vidéo teintée de bleu ; les captures restent en dessous */
.accueil .demo-fond--video {
  padding-top: 0;
}

.accueil .demo-fond--video::before {
  display: none;
}

.demo-bandeau {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
  background: var(--bleu);
}

.demo-bandeau-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
}

/* Teinte bleue par-dessus la vidéo : le texte blanc reste lisible (pas de flou) */
.demo-bandeau::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(24 0 173 / 0.58);
}

.demo-bandeau .conteneur {
  position: relative;
}

.demo-bandeau h2 {
  color: #fff;
}

/* Bouton pause : la vidéo bouge plus de 5 secondes, on doit pouvoir l'arrêter */
.demo-bandeau-pause {
  position: absolute;
  top: calc(-1 * clamp(2rem, 1rem + 3vw, 4rem));
  right: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  color: var(--bleu);
  cursor: pointer;
}

.demo-bandeau-pause .icone-lecture,
.demo-bandeau-pause[aria-pressed="true"] .icone-pause {
  display: none;
}

.demo-bandeau-pause[aria-pressed="true"] .icone-lecture {
  display: block;
}

.demo-bandeau-pause:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .demo-bandeau-pause {
    display: none;
  }
}

/* Les écrans de l'espace famille ressortent : fond lavande plus soutenu, ombre bleutée plus nette (sans contour) */
.accueil .demo-fond--video {
  background: var(--soleil);
}

/* Sur le jaune : légendes, note et liens en bleu nuit */
.accueil .demo-fond--video .captures figcaption,
.accueil .demo-fond--video .captures figcaption strong,
.accueil .demo-fond--video .captures-note,
.accueil .demo-fond--video .captures-lien a {
  color: var(--bleu-ombre);
}

.accueil .demo-fond--video .captures-lien a:hover {
  color: var(--bleu);
}

.accueil .demo-fond--video .captures img {
  box-shadow: 0 1.4rem 2.6rem -1.2rem rgb(24 0 173 / 0.42);
}

.accueil .demo-fond--video .capture-zoom:hover img {
  box-shadow: 0 1.8rem 3rem -1.2rem rgb(24 0 173 / 0.5);
}
/* Le soleil du jardin ne touche plus le coin du bloc : il est entier, à l'intérieur */
.accueil .parcours-parent {
  margin-top: 0;
}

.accueil .parcours-parent::before {
  top: 1.4rem;
  right: 1.4rem;
  width: 5.5rem;
  height: 5.5rem;
  box-shadow: 0 0 0 0.8rem rgb(255 200 61 / 0.25), 0 0 0 1.7rem rgb(255 200 61 / 0.12);
}

@media (max-width: 47.99rem) {
  .accueil .parcours-parent::before { display: none; }
}
/* Téléphone : plus de marge sous le panneau (elle laissait une bande blanche entre le haut bleu et l'exemple) */
@media (max-width: 47.99rem) {
  .accueil .panneau { margin-bottom: 0; }
}
/* Offres : ce qui est inclus, en 4 points visibles dans la carte bleue (sans bouton à déplier) */
.offre--forte .offre-inclus {
  margin-top: auto;
}

.offre--forte .offre-inclus ul {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
  color: #fff;
}

.offre--forte .offre-inclus li::marker {
  color: var(--soleil);
}

.offre--forte .offre-inclus p {
  margin-top: 0.75rem;
}

.offre--forte .offre-inclus a,
.offre:not(.offre--forte) .offre-detail a {
  font-weight: 800;
}

.offre--forte .offre-inclus a {
  color: #fff;
}

.offre .offre-detail + .offre-detail {
  margin-top: -0.4rem;
}

/* Début de chaque point en gras, pour lire la liste d'un coup d'œil */
.offre--forte .offre-inclus li strong {
  color: #fff;
  font-weight: 900;
}

/* Cartes d'offres de gauche et de droite : les mêmes points à puces que la carte bleue, en bleu sur blanc */
.offre .offre-points {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
  color: var(--encre);
}

.offre .offre-points li::marker {
  color: var(--bleu);
}

.offre .offre-points strong {
  color: var(--bleu);
  font-weight: 900;
}

.offre .offre-bas {
  margin-top: auto;
}
/* --- Avant le produit : trois blocs, trois ambiances ---------------------------------------------------------
   1. « Vous reconnaissez ces soirs-là ? » : des bulles de parole pleines, bleu et jaune, en quinconce comme une conversation.
   2. « Et si rien ne change ? » : fond bleu nuit, une frise en 3 temps (ce soir, dans un mois, au bulletin).
   3. « Imaginez vos soirs » : aplat jaune soleil, la photo de la réussite en galet. */

/* 1. Les bulles */
.probleme-questions {
  display: grid;
  gap: 1.1rem;
  max-width: 52rem;
  margin: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) auto 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .probleme-questions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }

  /* La 2e colonne descend un peu : on lit une conversation, pas un tableau */
  .probleme-questions {
    align-items: start;
  }

  /* Décalage par la marge (et non par un déplacement) : la place est réservée, rien ne déborde sur la suite */
  .probleme-question:nth-child(even) {
    margin-top: 2.25rem;
  }

  .probleme-question:nth-child(3) {
    margin-top: -1.1rem;
  }
}

.probleme-question {
  position: relative;
  padding: 1.3rem 1.5rem 1.4rem;
  border-radius: 1.75rem 1.75rem 1.75rem 0.35rem;
  background: var(--bleu);
  color: #fff;
  box-shadow: 0 6px 0 var(--bleu-ombre);
}

.probleme-question:nth-child(even) {
  border-radius: 1.75rem 1.75rem 0.35rem 1.75rem;
  background: var(--soleil);
  color: var(--bleu-ombre);
  box-shadow: 0 6px 0 #d9a215;
}

.probleme-citation {
  margin: 0 0 0.45rem;
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  font-weight: 900;
  line-height: 1.2;
}

.probleme-question p {
  margin: 0;
  color: inherit;
}

.probleme-chiffre {
  max-width: 40rem;
  margin: 2rem auto 0;
  text-align: center;
  color: var(--encre);
  font-size: 1.05rem;
}

.probleme-chiffre strong {
  color: var(--bleu);
}

.probleme-source {
  color: var(--encre-douce);
  font-size: 0.9em;
}

/* Le galet sort par la gauche de l'écran ; à côté, les bulles restent en quinconce, comme une conversation */
@media (max-width: 55.99rem) {
  .probleme .photo-galet {
    width: calc(82% + 3rem);
    margin-inline: -3rem 0;
  }
}

/* Pas de galet sur téléphone : on arrive plus vite aux questions et à l'offre */
@media (max-width: 47.99rem) {
  .probleme .photo-galet {
    display: none;
  }
}

@media (min-width: 56rem) {
  .probleme .photo-galet {
    width: calc(80% + var(--debord));
  }

  .probleme-questions {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    margin-inline: 0;
  }

  .probleme-question:nth-child(n) {
    margin-top: 0;
  }

  .probleme-question:nth-child(odd) {
    margin-right: 2.5rem;
  }

  .probleme-question:nth-child(even) {
    margin-left: 2.5rem;
  }

  .probleme-chiffre {
    margin-inline: 0;
    text-align: left;
  }
}

/* 2. La frise, sur bleu nuit */
.consequences {
  background: var(--bleu-ombre);
  color: #fff;
}

.consequences h2 {
  color: #fff;
}

.consequences-fil {
  display: grid;
  gap: 1rem;
  margin: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: fil;
}

@media (min-width: 48rem) {
  .consequences-fil {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.consequences-fil li {
  position: relative;
  padding: 1.4rem 1.4rem 1.5rem;
  border-radius: 1.5rem;
  background: rgb(255 255 255 / 0.08);
}

/* Le temps qui passe : de plus en plus lourd */
.consequences-fil li:nth-child(2) {
  background: rgb(255 255 255 / 0.12);
}

.consequences-fil li:nth-child(3) {
  background: #fff;
  color: var(--encre);
}

.consequences-quand {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--soleil);
}

.consequences-fil li:nth-child(3) .consequences-quand {
  color: var(--bleu);
}

.consequences-quoi {
  margin: 0;
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  font-weight: 700;
  line-height: 1.4;
}

.consequences-rassure {
  max-width: 46rem;
  margin: 1.75rem auto 0;
  text-align: center;
  font-size: 1.1rem;
  color: #fff;
}

.consequences-rassure strong {
  color: var(--soleil);
}

/* 3. Le premier soir : aplat jaune soleil */
.apres {
  background: var(--soleil);
}

.apres h2 {
  color: var(--bleu-ombre);
}

.apres-liste {
  display: grid;
  gap: 0.9rem;
  max-width: 34rem;
  margin: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) 0 0;
  padding: 0;
  font-size: 1.1rem;
  color: var(--bleu-ombre);
}

.apres-liste strong {
  color: var(--bleu);
}

/* Le même soir, sans repère puis avec Leie (la mise en avant du site : aplat bleu) */
.apres-bascule {
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}

@media (min-width: 48rem) {
  .apres-bascule {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.apres-soir {
  padding: 1.4rem 1.4rem 1.5rem;
  border-radius: 1.5rem;
  background: #fff;
  color: var(--encre);
}

.apres-soir--leie {
  background: var(--bleu);
  color: #fff;
}

.apres-soir p {
  margin: 0;
}

.apres-soir .apres-quand {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--bleu);
}

.apres-soir--leie .apres-quand {
  color: var(--soleil);
}

.apres-soir .apres-citation {
  margin-bottom: 0.5rem;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Rappel de l'offre, sans attendre le bloc des prix */
.rappel-offre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  text-align: center;
  color: var(--bleu-ombre);
  font-size: 1.1rem;
}

.rappel-offre p {
  flex-basis: 100%;
  margin: 0;
}

.rappel-offre-lien {
  font-weight: 800;
  color: var(--bleu-ombre);
}

/* Offres : une étiquette aussi sur les cartes des côtés, pour que les trois commencent à la même hauteur */
.offre .offre-badge--doux {
  background: var(--bleu-pale);
  color: var(--bleu);
  box-shadow: none;
}
/* Relecture « Apple » (8 novembre 2026) --------------------------------------------------------------------- */
/* Ce qui se ressemble doit se comporter pareil : l'ombre en relief est réservée aux boutons. Les bulles restent plates. */
.probleme-question,
.probleme-question:nth-child(even) {
  box-shadow: none;
}

/* Grand texte gras : espacement des lettres un peu resserré */
.probleme-citation {
  letter-spacing: -0.01em;
}

/* La frise indique le sens du temps : une flèche entre deux étapes (ordinateur) */
@media (min-width: 48rem) {
  .consequences-fil li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -0.95rem;
    z-index: 1;
    width: 0.6rem;
    height: 0.6rem;
    border-top: 3px solid var(--soleil);
    border-right: 3px solid var(--soleil);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* Liens du bas des cartes d'offres : assez grands pour le doigt (cible d'environ 44 px de haut) */
.offre .offre-bas a {
  display: inline-block;
  padding-block: 0.65rem;
  font-size: 0.95rem;
}
/* Étiquettes des offres : centrées, à cheval sur le bord du haut de chaque carte */
.offres > .offre {
  position: relative;
  padding-top: 2.25rem;
}

.offres > .offre > .offre-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);
  margin: 0;
  white-space: nowrap;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
}

/* Sur les cartes jaunes, l'étiquette passe en bleu : elle reste lisible à moitié dehors, sur le fond blanc */
.offres > .offre:not(.offre--forte) > .offre-badge--doux {
  background: var(--bleu);
  color: #fff;
}

/* Un peu d'air au-dessus des cartes pour les étiquettes qui dépassent */
.offres {
  padding-top: 0.9rem;
}
/* Cartes empilées (téléphone) : de la place pour l'étiquette qui dépasse */
.offres {
  row-gap: 2.25rem;
}

/* Sous les offres : le lien vers le guide « que choisir » */
.offres-comparer {
  margin-top: 1rem;
  text-align: center;
  color: var(--encre);
}

.offres-comparer a {
  font-weight: 800;
}

/* Renforts d'inscription, sur le bleu de l'accueil : promesse en blanc, collée au bouton ; la démo en bouton blanc, derrière le bouton jaune */
.accueil .panneau-promesse,
.accueil .panneau-promesse strong {
  color: #fff;
}

.accueil .panneau-promesse + .panneau-action {
  margin-top: 0.5rem;
}

.accueil .panneau-action .bouton.hero-demo-bouton {
  background: #fff;
  border-color: #fff;
  color: var(--bleu);
  box-shadow: 0 4px 0 var(--bleu-ombre);
}

.accueil .panneau-action .bouton.hero-demo-bouton:hover {
  background: var(--bleu-pale);
  border-color: var(--bleu-pale);
}

.accueil .panneau-action .bouton.hero-demo-bouton:active {
  box-shadow: 0 0 0 var(--bleu-ombre);
}

/* Le prix reste dans sa phrase : seules les lignes de .panneau-infos passent à la ligne */
.panneau-infos span span {
  display: inline;
}