/* =============================================================================
   LES CINQ PAGES SEGMENT.

   Elles partagent un socle (hero fendu, cartes de formule, bloc entraide,
   questions fréquentes) mais PAS leur mise en page centrale : famille = frise
   d'étapes de vie, jeune = grille bento, fonctionnaire = liste numérotée à
   photo collante, sénior = tableau de plafonds, surcomplémentaire = lignes
   alternées. C'est une demande explicite du design — éviter que les cinq pages
   se ressemblent. Ne pas les réharmoniser.
   ========================================================================== */

/* -------------------------------------------------------- hero fendu --- */

.seg-hero { position: relative; overflow: hidden; }
.seg-hero__grille {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    /* HAUTEUR FIXE, ET C'EST LE POINT. Ce n'etait qu'un plancher : la hauteur
       reelle suivait la colonne de texte, donc le NOMBRE DE LIGNES DU TITRE --
       chaque `span` du h1 etant en `display: block`, une ligne se decide dans
       le gabarit. D'ou trois hauteurs differentes selon les pages (643 pour un
       titre de 2 lignes, 712 pour 3, 780 pour 4), visibles en passant d'un
       segment a l'autre.
       712 px = un titre de trois lignes, la valeur deja partagee par la
       majorite des pages. `align-items: center` centre verticalement les
       titres plus courts, et `.seg-hero__visuel` reste en `align-self:
       stretch`, donc la photo remplit toute la hauteur.
       Consequence a connaitre : un titre de QUATRE lignes deborderait
       desormais. Les titres se composent en trois lignes au maximum.
       Sous 1000 px, la regle plus bas remet `min-height: 0` : la grille passe
       en une seule colonne et la hauteur redevient libre. */
    min-height: 712px;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: clamp(24px, 4vw, 48px);
}
/* CALEE EN HAUT, PAS CENTREE. La grille est en `align-items: center` pour que
   la photo se comporte bien, mais une colonne de texte centree flotte au
   milieu du cadre : un titre de deux lignes descend de la moitie de la ligne
   manquante, et le fil d'Ariane demarre 35 px plus bas que sur une page a
   trois lignes. En passant d'un segment a l'autre, tout le haut de page
   sautait. `align-self: start` fige ce haut.
   L'ecart ne disparait pas pour autant -- il se reporte EN BAS de la colonne,
   ou il ne longe aucun repere visuel, la photo occupant toute la hauteur. */
.seg-hero__texte { padding: clamp(48px, 6vw, 72px) 0; align-self: start; }
.seg-hero__texte h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: .98; letter-spacing: -.035em; font-weight: 800; }
.seg-hero__texte h1 span { display: block; }
.seg-hero__chapo {
    margin: 1.5rem 0 0;
    max-width: 27em;
    font-size: 1.16rem;
    line-height: 1.5;
    color: var(--mpn-ink-soft);
    text-wrap: pretty;
}
.seg-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.seg-gages { display: flex; align-items: center; gap: 22px; margin: 2.2rem 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.seg-gages li { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--mpn-ink-body); }
.seg-gages li::before { content: '✓'; color: var(--mpn-bleu); font-weight: 800; }

/* Le visuel occupe toute la hauteur de la scène, jusqu'au bord de l'écran. */
.seg-hero__visuel { position: relative; align-self: stretch; min-height: 620px; }
.seg-hero__visuel .mpn-media { position: absolute; inset: 0; border-radius: 0; min-height: 0; }
.seg-hero__voile {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(100deg, rgba(245, 248, 252, .42) 0%, rgba(245, 248, 252, 0) 26%),
        linear-gradient(to top, rgba(4, 18, 38, .5) 0%, rgba(4, 18, 38, 0) 42%);
}

/* Carte posée au bas du visuel. */
.seg-flottante {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 26px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--mpn-verre);
    border: 1px solid var(--mpn-verre-bord);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 50px -24px rgba(4, 18, 38, .6);
}
.seg-flottante__pastille {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--mpn-bleu-plein);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .88rem;
    font-weight: 800;
    animation: seg-halo 3s ease-out infinite;
}
/* Variante pour un contenu plus long ("3 200 €") qu'un cercle de 38px ne
   peut pas accueillir sans deborder -- pastille devient pilule. Seule la
   page senior en a besoin actuellement. */
.seg-flottante__pastille--large {
    width: auto;
    min-width: 38px;
    height: 44px;
    padding: 0 16px;
    border-radius: 22px;
    font-size: .95rem;
    white-space: nowrap;
}
@keyframes seg-halo {
    0% { box-shadow: 0 0 0 0 rgba(0, 91, 172, .35); }
    70% { box-shadow: 0 0 0 16px rgba(0, 91, 172, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 91, 172, 0); }
}
.seg-flottante__titre { margin: 0; font-size: .9rem; font-weight: 700; line-height: 1.25; color: var(--mpn-ink); }
.seg-flottante__texte { margin: 0; font-size: .8rem; line-height: 1.35; color: var(--mpn-verre-texte); }

/* ---------------------------------------------- frise « étapes de vie » --- */

.seg-etapes { display: grid; margin: 2.4rem 0 0; padding: 0; list-style: none; }
.seg-etape {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 32px;
    padding: 28px 0;
    border-top: 1px solid var(--mpn-line-soft);
}
.seg-etape:last-child { border-bottom: 1px solid var(--mpn-line-soft); }
.seg-etape__rang {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mpn-bleu);
}
.seg-etape__titre { margin: .35rem 0 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.seg-etape__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.seg-point__titre { margin: 0; font-size: 1.02rem; font-weight: 700; }
.seg-point__texte { margin: .25rem 0 0; font-size: .94rem; line-height: 1.5; color: var(--mpn-ink-soft); }

/* ------------------------------------------------------ cartes formule --- */

.seg-formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 2.6rem; align-items: stretch; }
.seg-formule {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mpn-line);
    border-radius: var(--mpn-radius);
    padding: 30px 26px 26px;
    background: var(--mpn-surface);
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.seg-formule:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -28px rgba(4, 18, 38, .4); border-color: var(--mpn-line-hover); }
.seg-formule--avant { border-color: var(--mpn-bleu); }
.seg-formule--avant:hover { box-shadow: 0 28px 52px -26px rgba(0, 91, 172, .5); }

.seg-formule__ruban {
    position: absolute;
    top: -12px;
    left: 26px;
    margin: 0;
    height: 24px;
    padding: 0 11px;
    border-radius: 99px;
    background: var(--mpn-rouge);
    color: #fff;
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    box-shadow: 0 8px 18px -10px rgba(225, 0, 15, .9);
}
.seg-formule__sur {
    margin: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mpn-ink-mute);
}
.seg-formule--avant .seg-formule__sur { color: var(--mpn-bleu); }
.seg-formule__prix { margin: .6rem 0 0; font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.seg-formule__unite { font-size: .92rem; font-weight: 600; color: var(--mpn-ink-mute); }
.seg-formule__resume { margin: .6rem 0 0; font-size: .94rem; line-height: 1.5; color: var(--mpn-ink-soft); }
.seg-formule__args {
    display: grid;
    gap: 9px;
    margin: 1rem 0 1.5rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--mpn-line-soft);
    list-style: none;
}
.seg-formule__args li { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; line-height: 1.4; color: var(--mpn-ink-body); }
.seg-formule__args li::before { content: '✓'; flex: 0 0 auto; margin-top: 1px; color: var(--mpn-bleu); font-weight: 800; }

.seg-formule__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    margin-top: auto;
    border-radius: 99px;
    border: 1px solid var(--mpn-line-strong);
    background: var(--mpn-surface);
    color: var(--mpn-ink);
    font-size: .95rem;
    font-weight: 600;
    transition: background .25s, border-color .25s, transform .25s;
}
.seg-formule__cta:hover { background: var(--mpn-tint); border-color: var(--mpn-bleu); color: var(--mpn-ink); }
.seg-formule--avant .seg-formule__cta {
    background: var(--mpn-bleu-plein);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 26px -12px rgba(0, 91, 172, .8);
}
.seg-formule--avant .seg-formule__cta:hover { background: var(--mpn-bleu-hover); color: #fff; transform: translateY(-2px); }

/* ------------------------------------------------------ bloc entraide --- */

.seg-entraide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.seg-entraide .mpn-eyebrow { color: var(--mpn-bloc-accent); }
.seg-chiffres { display: grid; gap: 16px; margin: 1.9rem 0 0; padding: 0; list-style: none; }
.seg-chiffre { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--mpn-bloc-line); }
.seg-chiffres li:last-child { border-bottom: 0; padding-bottom: 0; }
.seg-chiffre__val { flex: 0 0 auto; min-width: 120px; font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--mpn-bloc-accent); }
.seg-chiffre__titre { margin: 0; font-size: 1.02rem; font-weight: 700; }
.seg-chiffre__texte { margin: .2rem 0 0; font-size: .94rem; line-height: 1.5; color: var(--mpn-bloc-ink-soft); }

.seg-lien-fleche { display: inline-flex; align-items: center; gap: 8px; margin-top: 1.7rem; font-size: .96rem; font-weight: 600; color: var(--mpn-bloc-accent); transition: gap .25s; }
/* Le survol ne change que l'ecart. Il forcait un blanc : sur les pages ou
   ce lien est pose sur fond clair (avec un `color` en ligne), il devenait
   invisible au survol. */
.seg-lien-fleche:hover { gap: 14px; }

.seg-temoignage { position: relative; border-radius: var(--mpn-radius-lg); overflow: hidden; min-height: 460px; }
.seg-temoignage .mpn-media { position: absolute; inset: 0; border-radius: 0; min-height: 0; }
.seg-temoignage__voile { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(4, 18, 38, .72) 0%, rgba(4, 18, 38, 0) 55%); }
.seg-temoignage figcaption { position: absolute; left: 22px; right: 22px; bottom: 22px; color: #fff; }
.seg-temoignage blockquote { margin: 0; font-size: .97rem; font-weight: 700; line-height: 1.4; }
.seg-temoignage cite { display: block; margin-top: 8px; font-size: .82rem; font-style: normal; color: rgba(255, 255, 255, .72); }

/* -------------------------------------------------- questions fréquentes --- */

.seg-faq { display: grid; gap: 12px; margin-top: 1.8rem; }
.seg-faq details {
    background: var(--mpn-surface-soft);
    border: 1px solid var(--mpn-line);
    border-radius: 16px;
    padding: 22px 24px;
}
.seg-faq summary { font-size: 1.05rem; font-weight: 700; cursor: pointer; list-style: none; }
.seg-faq summary::-webkit-details-marker { display: none; }
.seg-faq summary::after { content: ' +'; color: var(--mpn-bleu); }
.seg-faq details[open] summary::after { content: ' −'; }
.seg-faq p { margin: .6rem 0 0; font-size: .96rem; line-height: 1.55; color: var(--mpn-ink-soft); }
.seg-faq__contact { margin-top: 1.3rem; font-size: .94rem; color: var(--mpn-ink-soft); }

/* --------------------------------------------------- bandeau qui défile --- */
/* Conservé sur les seules pages Fonctionnaire et Surcomplémentaire — le design
   l'a volontairement retiré ailleurs pour casser la répétition. */

.seg-marquee { overflow: hidden; padding: 18px 0; background: var(--mpn-bloc); color: var(--mpn-bloc-ink-soft); }
.seg-marquee__piste { display: flex; width: max-content; animation: seg-defile 38s linear infinite; }
.seg-marquee__piste > span { display: inline-flex; align-items: center; gap: 34px; padding-right: 34px; font-size: .92rem; font-weight: 600; white-space: nowrap; }
.seg-marquee__piste b { color: var(--mpn-bloc-accent); font-weight: 800; }
@keyframes seg-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------------- responsive --- */

@media (max-width: 1000px) {
    .seg-hero__grille { grid-template-columns: 1fr; min-height: 0; padding-right: clamp(24px, 4vw, 48px); }
    .seg-hero__visuel { min-height: 340px; margin: 0 calc(clamp(24px, 4vw, 48px) * -1) 0 calc(clamp(24px, 4vw, 48px) * -1); }
    .seg-formules { grid-template-columns: 1fr; }
    .seg-formule--avant { order: -1; }
    .seg-entraide { grid-template-columns: 1fr; }
    .seg-etape { grid-template-columns: 1fr; gap: 14px; }
    .seg-etape__points { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .seg-flottante__pastille,
    .seg-marquee__piste { animation: none; }
    .seg-formule:hover { transform: none; }
}

/* ---------------------------------------------------- grille bento (jeune) --- */
/* Quatre colonnes, des cases fusionnées : c'est la mise en page propre au
   segment jeune. Ne pas la remplacer par une grille régulière. */

.seg-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 16px; margin-top: 2.2rem; }
.seg-case {
    border: 1px solid var(--mpn-line);
    border-radius: var(--mpn-radius);
    padding: 22px;
    background: var(--mpn-surface-soft);
    transition: transform .3s, box-shadow .3s;
}
.seg-case:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -28px rgba(4, 18, 38, .4); }
.seg-case--large { grid-column: span 2; }
.seg-case--accent { border-color: var(--mpn-bleu); background: var(--mpn-surface); display: flex; flex-direction: column; justify-content: center; }
.seg-case--accent .seg-case__titre { color: var(--mpn-bleu); }
.seg-case__titre { margin: 0; font-size: 1.12rem; font-weight: 700; }
.seg-case__texte { margin: .4rem 0 0; font-size: .88rem; line-height: 1.45; color: var(--mpn-ink-soft); }

/* Case photo : elle occupe deux colonnes ET deux rangées. */
.seg-case--photo {
    position: relative;
    grid-column: span 2;
    grid-row: span 2;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--mpn-navy);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.seg-case--photo .mpn-media { position: absolute; inset: 0; border-radius: 0; min-height: 0; }
/* Ce voile ne protege QUE la bande de texte, en bas. L'ancien degrade ne
   redescendait qu'a .15 : autrement dit toute la photo etait assombrie jusqu'en
   haut, ce qui eteignait une image de nuit deja sombre. Au-dessus de 42 % il
   n'y a plus rien du tout ; en dessous, la descente est courte et franche,
   parce que le titre et le texte sont blancs et poses sur l'image. */
.seg-case__voile {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(4, 18, 38, .78) 0%,
        rgba(4, 18, 38, .52) 18%,
        rgba(4, 18, 38, 0) 42%);
}
.seg-case__corps { position: relative; padding: 28px; color: #fff; }
.seg-case__corps .seg-case__titre { font-size: 1.42rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.seg-case__corps .seg-case__texte { font-size: .96rem; color: rgba(255, 255, 255, .82); }

/* -------------------------------------------------------- lexique (jeune) --- */

.seg-jargon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 2.2rem; }
.seg-mot {
    border: 1px solid var(--mpn-bloc-line);
    border-radius: var(--mpn-radius);
    padding: 26px;
    background: var(--mpn-bloc-voile);
    transition: background .3s, transform .3s;
}
.seg-mot:hover { background: var(--mpn-bloc-voile-fort); transform: translateY(-4px); }
.seg-mot dt { font-size: 1.18rem; font-weight: 700; }
.seg-mot dd { margin: .5rem 0 0; font-size: .97rem; line-height: 1.55; color: var(--mpn-bloc-ink-soft); }

/* -------------------------------------------- liste numérotée à pastilles --- */

.seg-numeros { display: grid; gap: 14px; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.seg-numero { display: flex; gap: 14px; align-items: flex-start; }
.seg-numero__pastille {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--mpn-tint);
    color: var(--mpn-bleu);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}
.seg-numero__titre { margin: 0; font-size: 1.02rem; font-weight: 700; }
.seg-numero__texte { margin: .1rem 0 0; font-size: .94rem; line-height: 1.5; color: var(--mpn-ink-soft); }

/* -------------------------------------------------- deux colonnes inversées --- */
/* Photo à gauche, texte à droite — variante du bloc entraide. */
.seg-entraide--inverse { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }

/* --------------------------------------------- tableau de plafonds (sénior) --- */

.seg-plafonds { width: 100%; border-collapse: collapse; min-width: 600px; }
.seg-plafonds caption { text-align: left; padding-bottom: .8rem; font-size: .88rem; color: var(--mpn-ink-soft); }
.seg-plafonds th, .seg-plafonds td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--mpn-line-soft); }
.seg-plafonds thead th { background: var(--mpn-bloc); color: var(--mpn-bloc-ink); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.seg-plafonds tbody th { font-weight: 600; }
.seg-plafonds td { text-align: right; font-variant-numeric: tabular-nums; }
.seg-plafonds tbody tr:nth-child(even) { background: var(--mpn-surface-alt); }
.seg-plafonds .est-haut { font-weight: 700; color: var(--mpn-bleu); }

/* ------------------------------------ lignes « trou / comblement » (surco) --- */

.seg-trous { display: grid; gap: 0; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.seg-trou {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 24px 0;
    border-top: 1px solid var(--mpn-line-soft);
}
.seg-trou:last-child { border-bottom: 1px solid var(--mpn-line-soft); }
.seg-trou__titre { margin: 0; font-size: 1.05rem; font-weight: 700; }
.seg-trou__texte { margin: .3rem 0 0; font-size: .92rem; line-height: 1.5; color: var(--mpn-ink-soft); }
.seg-trou__manque .seg-trou__titre { color: var(--mpn-ink-nav); }
.seg-trou__fleche {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--mpn-tint);
    color: var(--mpn-bleu);
    font-weight: 800;
}
.seg-trou__comble { padding-left: 4px; border-left: 3px solid var(--mpn-bleu); }
.seg-trou__comble .seg-trou__titre { color: var(--mpn-bleu); }

/* ---------------------------------------------------- photo latérale collante --- */

.seg-sticky { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(28px, 4vw, 56px); align-items: start; }
.seg-sticky__media { position: sticky; top: calc(var(--mpn-header-h) + 24px); }

@media (max-width: 1000px) {
    .seg-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .seg-case--large,
    .seg-case--photo { grid-column: auto; grid-row: auto; }
    .seg-case--photo { min-height: 300px; }
    .seg-jargon { grid-template-columns: 1fr; }
    .seg-entraide--inverse { grid-template-columns: 1fr; }
    .seg-sticky { grid-template-columns: 1fr; }
    .seg-sticky__media { position: static; }
    .seg-trou { grid-template-columns: 1fr; gap: 10px; }
    .seg-trou__fleche { margin: 0; transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
    .seg-case:hover,
    .seg-mot:hover { transform: none; }
}

/* --------------------------------- liste de postes numerotes (fonctionnaire) --- */

.seg-poste {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 20px;
    padding: 22px 0;
    border-top: 1px solid var(--mpn-line-soft);
}
.seg-poste:first-child { border-top: 0; }
.seg-poste__num {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--mpn-tint);
    color: var(--mpn-bleu);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .94rem;
}
.seg-poste__titre { margin: 0; font-size: 1.16rem; font-weight: 700; }
.seg-poste__texte { margin: .4rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--mpn-ink-soft); max-width: 44em; }

/* Le poste mis en avant : fond teinte, pastille pleine. */
.seg-poste--fort {
    background: var(--mpn-surface-blue);
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 12px;
}
.seg-poste--fort .seg-poste__num { background: var(--mpn-bleu-plein); color: #fff; }
.seg-poste--fort .seg-poste__titre { color: var(--mpn-bleu); }

/* ---------------------------------------------------- page « jeune » --- */

/* PAS DE REGLE DE CADRAGE ICI. `.seg-hero__visuel` vise les heros des dix
   segments : y fixer un `object-position` reglait la page « jeune » et
   deplacait les neuf autres photos. Le cadrage se declare desormais photo par
   photo, via le parametre `cadrage` de `_media.html.twig`. */

/* Rappel pour la case « Lentilles & lunettes » : pas de `scale()`. Un dezoom
   dans un cadre a taille fixe fait flotter la photo dans un rectangle vide, le
   fond navy apparait tout autour, et le texte — qui doit etre POSE SUR l'image
   — se retrouve dessous. `object-fit: cover` est deja le zoom MINIMAL qui
   remplit le cadre : pour montrer plus de scene, il faut recadrer le FICHIER,
   pas le CSS. Le cadrage lui-meme est passe au gabarit. */