/* =============================================================================
   Identité Pack Bien-être — page /mutuelle-jeune (seule page du Pack depuis le
   15/09/2026 ; l'ancienne page dédiée /pack-bien-etre a été supprimée et son
   contenu fusionné ici).

   Teinte volontairement hors de l'échelle bleue des 3 formules historiques
   (--mpn-bien-etre / --mpn-bien-etre-plus / --mpn-bien-etre-dark, définies
   dans mpn-public.css) : signale une gamme à part, à éligibilité restreinte.

   REFONTE DU 15/09/2026 -- deux défauts relevés en relecture visuelle réelle,
   corrigés ici :

   1. « Les sections ont chacune un fond différent, c'est chelou. » Avant :
      chaque <section> posait son propre fond (mpn-hero, mpn-section--surface,
      mpn-section--navy...), donc une couture visible à chaque changement de
      section. Après : TOUTES les sections claires (hero à FAQ) sont
      enveloppées dans .jeune-univers, qui porte UN SEUL dégradé continu ; les
      sections elles-mêmes passent en fond transparent (règles tout en bas de
      ce fichier) pour laisser voir ce dégradé, sans couture.

   2. « Les boutons sont bleus, pas verts. » Le bouton primaire et l'appel
      final réutilisaient .mpn-btn--primaire / .mpn-bandeau--pleine, qui
      valent --mpn-bleu-plein sur tout le reste du site (à raison : c'est LA
      couleur de marque). Ici, scopés à .page-bien-etre-jeune uniquement, ils
      basculent sur un dégradé vert -- jamais touché globalement, les autres
      pages gardent leur bleu.
   ========================================================================== */

.mpn-hero__halo--bien-etre {
    background: radial-gradient(circle, rgba(15, 160, 110, .32) 0%, rgba(15, 160, 110, .1) 45%, rgba(15, 160, 110, 0) 70%);
}

/* Dégradé net (deux teintes bien distinctes, pas deux verts voisins qui se
   lisent comme un aplat) -- même principe que le soulignement bleu → rouge
   du reste du site, ici décliné dans la gamme verte du Pack. */
.mpn-souligne--bien-etre {
    color: var(--mpn-bien-etre-plus);
}
/* Même vert trop sombre sur fond sombre que les boutons plus bas (3,45:1). */
:root[data-theme='sombre'] .mpn-souligne--bien-etre {
    color: var(--mpn-succes-texte);
}
.mpn-souligne--bien-etre::after {
    background: linear-gradient(90deg, #6EE7B7 0%, var(--mpn-bien-etre-dark) 100%);
}

.mpn-table td { font-weight: 700; }
.mpn-table th[scope="row"] { font-weight: 600; color: var(--mpn-ink-soft); }

/* ---------------------------------------------------- dégradé continu --- */
/* Posé une seule fois sur le conteneur qui enveloppe TOUTES les sections
   claires (voir segment-jeune.html.twig) : un gradient CSS s'étire sur la
   hauteur RÉELLE de son propre conteneur, donc reste continu quelle que soit
   la longueur du contenu -- pas besoin de connaître la hauteur à l'avance. */
.jeune-univers {
    /* Blanc en haut, qui verdit progressivement vers le bas -- amène l'œil
       vers l'appel final (vert profond), inversé par rapport au premier jet. */
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F8FC 35%, #F1FAF6 70%, #EAFBF3 100%);
}
/* THÈME SOMBRE : le dégradé ci-dessus est écrit en clair, en dur. Depuis que
   le thème choisi suit d'une page à l'autre (01/10/2026), un visiteur en sombre
   arrivait ici sur un fond blanc portant les textes clairs du thème sombre :
   illisible. Même idée, du fond sombre de la page vers un vert très sombre. */
:root[data-theme='sombre'] .jeune-univers {
    background: linear-gradient(180deg, var(--mpn-page) 0%, #0B1626 35%, #0B1B1F 70%, #0B2420 100%);
}
.page-bien-etre-jeune .jeune-univers .mpn-hero,
.page-bien-etre-jeune .jeune-univers .mpn-section,
.page-bien-etre-jeune .jeune-univers .mpn-section--surface {
    background: transparent;
}

/* ------------------------------------------------------- appel final --- */
/* .mpn-bandeau--pleine vaut --mpn-bleu-plein PARTOUT AILLEURS sur le site,
   à raison (c'est la couleur de marque) -- scopé à cette seule page pour ne
   jamais y toucher globalement. */
.page-bien-etre-jeune .mpn-bandeau--pleine {
    background: linear-gradient(135deg, var(--mpn-bien-etre) 0%, var(--mpn-bien-etre-dark) 100%);
}

/* --------------------------------------------------------- boutons --- */
/* Même logique : .mpn-btn--primaire reste bleu partout ailleurs (c'est
   documenté comme la couleur de marque dans mpn-public.css), vert seulement
   ici. */
.page-bien-etre-jeune .mpn-btn--primaire {
    background: linear-gradient(135deg, var(--mpn-bien-etre) 0%, var(--mpn-bien-etre-plus) 100%);
}
.page-bien-etre-jeune .mpn-btn--primaire:hover {
    background: linear-gradient(135deg, var(--mpn-bien-etre-plus) 0%, var(--mpn-bien-etre-dark) 100%);
    box-shadow: 0 14px 28px -16px rgba(11, 122, 85, .8);
}
.page-bien-etre-jeune .mpn-btn--secondaire {
    border-color: var(--mpn-bien-etre-plus);
    color: var(--mpn-bien-etre-plus);
}
.page-bien-etre-jeune .mpn-btn--secondaire:hover {
    background: rgba(15, 160, 110, .08);
    color: var(--mpn-bien-etre-dark);
}
/* THÈME SOMBRE : le vert de la page (#0B7A55) tombait à 3,45:1 sur le fond
   sombre, sous le seuil de lecture. Même vert éclairci que les autres textes
   verts du thème sombre (--mpn-succes-texte, composants.css). Relevé le
   30/09/2026. */
:root[data-theme='sombre'] .page-bien-etre-jeune .mpn-btn--secondaire,
:root[data-theme='sombre'] .page-bien-etre-jeune .mpn-btn--secondaire:hover {
    color: var(--mpn-succes-texte);
    border-color: var(--mpn-succes-texte);
}

/* Pastille de prix flottante sur la photo du hero : bleue par défaut
   (.seg-flottante__pastille, segments.css), verte ici. */
.page-bien-etre-jeune .seg-flottante__pastille {
    background: linear-gradient(135deg, var(--mpn-bien-etre) 0%, var(--mpn-bien-etre-plus) 100%);
}