/* Opacites du voile de la bulle du hero. Elles suivent le theme : voir le
   commentaire de `.acc-vue`. Les toucher ici les change partout. */
:root {
    --acc-voile-haut: .22;
    --acc-voile-milieu: .14;
    --acc-voile-bas: .40;
    --acc-vignette: .16;
}
:root[data-theme='sombre'] {
    --acc-voile-haut: .38;
    --acc-voile-milieu: .24;
    --acc-voile-bas: .56;
    --acc-vignette: .28;
}

/* =============================================================================
   ACCUEIL — écran plein épinglé, le mot change au défilement.

   Portage de « Accueil MPN - scroll video.dc.html ».

   Le principe : une scène de 600 vh dans laquelle un panneau de 100 vh reste
   collé en haut. On ne déplace rien — c'est la position du défilement DANS la
   scène qui donne l'indice du segment affiché, de 0 à 4. Six points d'ancrage
   `scroll-snap` calent la lecture sur chaque segment.

   TOUT CE QUI EST ICI DOIT TENIR SANS JAVASCRIPT.
   La mise en page, les cinq fonds, les deux listes latérales et la barre du bas
   sont posés par le serveur. Le script ne fait que changer des opacités, des
   translations et le mot du milieu. Une page d'atterrissage publicitaire qui
   n'existe qu'après exécution du JavaScript est une page qu'on paie plus cher
   au clic — et qu'un moteur peut ne pas voir.
   ========================================================================== */

/* La scène est le seul endroit du site qui cale le défilement. `:has()` évite
   d'imposer ce comportement à toutes les pages depuis une règle globale. */
html:has(.acc-stage) { scroll-snap-type: y proximity; scroll-behavior: smooth; }

/* La hauteur de la bande de fond de page sous la video, ou vit la barre de
   progression. C'est la seule mesure du cadre : au-dessus, c'est l'en-tete qui
   fait la bande du haut. */
.acc-stage { --acc-pied: 58px; }

/* --------------------------------------------------------- cadre de scene --- */
/*
   La PAGE appartient au theme, la VIDEO garde son propre contraste.

   La scene occupait toute la fenetre, bord a bord, en navy — et l'en-tete avec
   elle. En theme clair on arrivait donc sur une page annoncee claire et
   entierement sombre : exactement le defaut deja corrige sur les sections du
   dessous, mais a l'echelle de l'ecran d'accueil.

   Delaver la video en clair n'etait pas une option : le titre, la phrase et
   l'appel a l'action sont poses PAR-DESSUS cinq videos dont on ne maitrise ni
   la luminosite ni le cadrage. Un voile fonce est ce qui les rend lisibles
   quelle que soit l'image ; un voile clair les rendrait illisibles une fois
   sur deux.

   La scene devient donc un panneau encastre. La marge autour, l'en-tete et
   tout ce qui suit suivent le theme ; le navy reste a l'interieur du panneau,
   ou il se lit comme la video et non comme la page.
*/
.acc-stage { background: var(--mpn-page); }

/* ------------------------------------------------------------- la scène --- */

.acc-stage { position: relative; height: 390vh; }   /* 5 segments x 65vh + une fenetre */

/* Points d'ancrage : des repères d'un pixel de large, invisibles et
   intraversables au pointeur. Ils n'existent que pour le calage. */
.acc-snap {
    position: absolute;
    left: 0;
    width: 1px;
    /* Le PAS de defilement, pas une hauteur de fenetre : 40vh au lieu de 100vh
       raccourcit de 35 % ce qu'il faut faire defiler pour changer de segment.
       Doit rester synchronise avec `rang * 65` dans accueil.html.twig et avec
       la hauteur de `.acc-stage`. */
    height: 65vh;
    scroll-snap-align: start;
    pointer-events: none;
}

.acc-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    /*
       Trois bandes franches : l'en-tete, la video, la barre de progression.
       Les deux bandes exterieures sont du fond de page, celle du milieu est la
       video — et la frontiere entre les deux est une ligne nette.

       Il y a eu un degrade ici, pour effacer le bord de la CARTE que formait
       la video : coins arrondis, ombre, marges. La carte a disparu, le degrade
       n'avait plus de raison d'etre et delavait l'image pour rien.

       Le haut degage l'en-tete : il redevient celui des neuf autres pages, pose
       sur le fond de page, sans translucidite a negocier avec l'image.
    */
    padding: var(--mpn-header-h) 0 var(--acc-pied);
    background: var(--mpn-page);
}

/*
   La scene n'a plus ni fond, ni bord, ni ombre : plus rien qui la designe
   comme une carte posee sur la page. Le seul reglage qu'elle porte, c'est la
   forme du fondu.

   `transparent` et `#000` ne sont pas des couleurs ici : dans un masque, seul
   le CANAL ALPHA compte. `transparent` retire la matiere, `#000` la garde. La
   couleur qu'on voit apparaitre est celle de la page, un etage plus bas.

   Les reperes : plein de 13 % a 78 %, ce qui couvre le titre, les deux
   colonnes de segments (19 % a 81 %, elles-memes deja adoucies par leur
   propre masque) et l'appel a l'action — y compris sur une fenetre basse, ou
   la colonne centrale descend jusqu'a 84 %. Efface de 0 a 13 %, la hauteur de
   l'en-tete, et de 82 % a 96 %, pour que la barre de progression du bas se
   retrouve sur la page et non sur la video.
*/
.acc-scene {
    position: relative;
    height: 100%;
    /* LA « BULLE ». La video etait pleine largeur et on tentait de la fondre
       dans la page a coups de degrades, d'ou des bandes sombres en haut et en
       bas. Un cadre arrondi avec de la marge autour supprime le probleme a la
       source : ce qui entoure la bulle est le fond de page, qui suit deja le
       theme clair/sombre. Le voile ne sert plus qu'au contraste du texte.
       `overflow: hidden` decoupe les videos suivant les coins. */
    overflow: hidden;
    border-radius: 28px;
    margin: 0 clamp(12px, 2.5vw, 32px);
    box-shadow: 0 30px 60px -30px rgba(6, 20, 40, .45);
}

/* ------------------------------------------------------------- les fonds --- */

.acc-fond {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.05s cubic-bezier(.22, .61, .36, 1), transform 1.4s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
.acc-fond.est-actif { opacity: 1; transform: scale(1); }
.acc-fond video,
.acc-fond img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Deux voiles superposés : le premier assombrit le haut et le bas pour que le
   texte reste lisible quelle que soit l'image, le second creuse les bords. */
.acc-voile {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(6, 20, 40, var(--acc-voile-haut)) 0%,
        rgba(6, 20, 40, var(--acc-voile-milieu)) 34%,
        rgba(6, 20, 40, var(--acc-voile-milieu)) 68%,
        rgba(6, 20, 40, var(--acc-voile-bas)) 100%);
}
.acc-voile--bords {
    background: radial-gradient(120% 80% at 50% 45%, rgba(6, 20, 40, 0) 35%, rgba(6, 20, 40, var(--acc-vignette)) 100%);
}

/* ------------------------------------------------------------- la grille --- */

.acc-grille {
    position: relative;
    z-index: 5;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 0 40px;
}

/* -------------------------------------------------------- listes latérales --- */

.acc-vue {
    height: 62vh;
    overflow: hidden;
    position: relative;
    /* Les bords se fondent : sans ça, les entrées inactives des listes de
       segments se coupent net en haut et en bas. Ce fondu-ci est LEGITIME — il
       ne concerne pas la video, seulement ces deux colonnes. */
    mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.acc-piste {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    /* Pas de transition tant que .est-anime n a pas ete posee : le TOUT
       PREMIER recentrage, celui qui suit le montage de AccueilScroll,
       corrige un etat initial que personne ne doit voir bouger. */
    will-change: transform;
}
.acc-piste.est-anime { transition: transform .85s cubic-bezier(.22, .61, .36, 1); }
/* Tant que le decalage de centrage n'est pas calcule, la liste est collee
   en haut de sa fenetre -- une position qui n'est jamais la bonne. On ne la
   montre donc qu'une fois placee. Mesure : 8 ms, imperceptible. */
.acc-piste { visibility: hidden; }
.acc-piste.est-place { visibility: visible; }
/* PAS de transition ici, a dessein : une transition qui n'avance pas --
   onglet en arriere-plan, fenetre masquee -- laisserait la colonne
   invisible pour toujours. Constate en mesurant. Le basculement est
   instantane, et 8 ms ne se percoivent pas. */
/* Sans JavaScript, personne ne posera la classe : on affiche quand meme. */
@media (scripting: none) { .acc-piste { visibility: visible; } }

.acc-piste--droite { justify-items: end; text-align: right; }
.acc-piste--gauche { justify-items: start; }

.acc-lien-seg {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(15px, 1.5vw, 19px);
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
    opacity: .28;
    transition: opacity .5s, transform .5s, color .2s;
}
.acc-lien-seg:hover { color: #fff; opacity: .7; }
.acc-lien-seg::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mpn-rouge);
    flex: 0 0 auto;
}
.acc-item.est-actif .acc-lien-seg { opacity: 1; transform: translateX(10px); }

.acc-accroche {
    font-size: clamp(13px, 1.2vw, 15.5px);
    font-weight: 500;
    line-height: 1.35;
    color: rgba(255, 255, 255, .9);
    max-width: 230px;
    opacity: .28;
    transition: opacity .5s, transform .5s;
}
.acc-item.est-actif .acc-accroche { opacity: 1; transform: translateX(-10px); }

/* ----------------------------------------------------------- colonne centrale --- */

.acc-centre { text-align: center; }

.acc-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    transition: color .6s cubic-bezier(.22, .61, .36, 1);
}

.acc-titre { margin: 14px 0 0; font-weight: 500; letter-spacing: -.02em; }
.acc-titre__prefixe {
    display: block;
    font-size: clamp(30px, 4.2vw, 58px);
    line-height: 1;
    font-weight: 500;
    color: rgba(255, 255, 255, .9);
}
/* Boîte du mot : hauteur fixée pour que rien ne saute quand le mot change de
   longueur. Le contenu est remplacé par React (voir AccueilScroll.jsx). */
.acc-mot {
    position: relative;
    display: block;
    height: clamp(72px, 12vw, 164px);
    margin-top: 6px;
    font-size: clamp(52px, 10vw, 140px);
    line-height: .9;
    font-weight: 800;
    letter-spacing: -.045em;
    color: #FFC2CB;
}
/* Repli sans JavaScript : le mot du premier segment, simplement centré. */
.acc-mot:not([data-ile-montee]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Le mot rendu par React : cinq variantes superposées, une seule visible. */
.acc-mot__pile { position: absolute; inset: 0; display: block; }
.acc-mot__variante {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .45s linear;
    pointer-events: none;
    line-height: .9;
}
/* Le masque coupe la lettre pendant qu'elle monte. Le remplissage bas et la
   marge négative qui le compense évitent que les jambages (j, g, p) soient
   rognés une fois la lettre en place. */
.acc-mot__masque {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .22em;
    margin-bottom: -.22em;
}
.acc-mot__lettre {
    display: inline-block;
    transition: transform .85s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.acc-phrase {
    margin: 22px auto 0;
    max-width: 580px;
    min-height: 54px;
    font-size: 17.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .84);
    text-wrap: pretty;
    transition: opacity .4s linear;
}

.acc-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    height: 52px;
    padding: 0 26px;
    border-radius: 99px;
    font-size: 16px;
    font-weight: 700;
    color: var(--mpn-navy);
    background: #fff;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
    transition: transform .25s, gap .25s;
}
.acc-cta:hover { color: var(--mpn-navy); transform: translateY(-2px); gap: 16px; }

/* ------------------------------------------------------------ barre du bas --- */

/* Posee dans la bande de pied, SOUS la video et non dessus. Elle est donc
   sur le fond de page, ce qui rend son passage aux couleurs du theme naturel —
   et dispense la video d'etre effacee jusqu'a elle. */
.acc-barre {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 0;
    height: var(--acc-pied);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 20px;
}
/*
   La barre du bas tombe desormais dans la zone effacee : elle est posee sur
   le FOND DE PAGE, plus sur la video. Elle passe donc au vocabulaire de la
   page — sinon elle disparaitrait en theme clair, blanc sur blanc.
*/
.acc-barre__compteur {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    letter-spacing: .14em;
    color: var(--mpn-ink-mute);
    white-space: nowrap;
}
.acc-barre__rail { flex: 1 1 auto; height: 2px; background: var(--mpn-line); position: relative; overflow: hidden; transform: translateY(-1px); }
.acc-barre__jauge {
    position: absolute;
    inset: 0 auto 0 0;
    width: 20%;
    background: linear-gradient(90deg, var(--mpn-bleu), var(--mpn-bleu-plein));
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
.acc-barre__invite {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mpn-ink-mute);
    white-space: nowrap;
}
.acc-barre__fleche {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--mpn-line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    animation: acc-flotte 2.6s ease-in-out infinite;
}
@keyframes acc-flotte {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ------------------------------------------------ en-tete, sans exception --- */
/*
   L'accueil n'a plus d'en-tete a lui.

   La barre etait sombre en permanence : bien posee sur la video, elle jurait
   sur les sections claires du dessous, et en theme clair elle coiffait une
   page claire d'un bandeau navy. On l'avait rattrapee par une bascule liee au
   defilement — une cinquantaine de lignes d'animations, trois jeux d'images
   cles, et un repli a prevoir pour les navigateurs qui ne connaissent pas
   `animation-timeline`.

   La scene etant devenue un panneau encastre, l'en-tete n'est plus JAMAIS
   au-dessus de la video. Il redevient donc celui de toutes les autres pages,
   et tout ce dispositif disparait : clair en theme clair, sombre en theme
   sombre, sans exception a maintenir.

   Reste la seule vraie particularite de cette page : l'en-tete est FIXE et non
   collant, parce que la scene occupe six hauteurs d'ecran et qu'un en-tete
   collant y reserverait sa place en haut du document.
*/
.page-accueil .mpn-header {
    position: fixed;
    left: 0;
    right: 0;
    /* Pas de liseré ici. Ailleurs, ce bord d'un pixel separe l'en-tete du
       contenu ; sur l'accueil il tombe sur une bande de fond de page de meme
       couleur, et ne dessine donc qu'une couture visible. Le fond translucide
       et le flou suffisent a detacher l'en-tete quand on defile. */
    border-bottom-color: transparent;
}

/* La barre de progression de lecture ferait doublon avec la jauge de la scène. */
.page-accueil .mpn-progress { display: none; }

/* ------------------------------------------------------ sections du dessous --- */

.acc-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 2.4rem; }
.acc-carte {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mpn-line);
    border-radius: var(--mpn-radius);
    padding: 26px;
    background: var(--mpn-surface);
    color: var(--mpn-ink);
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.acc-carte:hover {
    color: var(--mpn-ink);
    transform: translateY(-6px);
    box-shadow: 0 28px 50px -28px rgba(4, 18, 38, .4);
    border-color: var(--mpn-bleu);
}
.acc-carte__sur {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mpn-bleu);
}
.acc-carte__titre { margin: 10px 0 0; font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.acc-carte__texte { margin: 8px 0 0; font-size: .94rem; line-height: 1.5; color: var(--mpn-ink-soft); }
.acc-carte__lien { margin-top: 18px; font-size: .9rem; font-weight: 600; color: var(--mpn-bleu); }

.acc-carte--devis { justify-content: center; background: var(--mpn-bleu-plein); color: #fff; border-color: transparent; }
.acc-carte--devis:hover { color: #fff; box-shadow: 0 28px 52px -26px rgba(0, 91, 172, .6); }
.acc-carte--devis .acc-carte__titre { font-size: 1.4rem; font-weight: 800; }
.acc-carte--devis .acc-carte__texte,
.acc-carte--devis .acc-carte__lien { color: rgba(255, 255, 255, .85); }
.acc-carte--devis .acc-carte__lien { font-weight: 700; color: #fff; }

.acc-preuves {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.acc-preuve { display: flex; align-items: baseline; gap: 12px; }
.acc-preuve__val { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; color: var(--mpn-bleu); }
.acc-preuve__lib { font-size: .94rem; font-weight: 600; color: var(--mpn-ink-soft); }
.acc-preuves__sep { width: 1px; height: 36px; background: var(--mpn-line); }

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

@media (max-width: 1080px) {
    /* Les deux listes latérales n'ont plus la place : elles disparaissent, et le
       choix du segment se fait par les cartes de la section suivante. */
    /* Sans les colonnes laterales, la partie pleine peut etre plus courte :
       le fondu du haut degage mieux l'en-tete sur un ecran bas. */
    /* Bande de pied plus courte : sur un ecran bas, chaque pixel compte. */
    .acc-stage { --acc-pied: 48px; }
    .acc-grille { grid-template-columns: 1fr; padding: 0 20px; }
    .acc-vue { display: none; }
    .acc-barre { left: 20px; right: 20px; }
    .acc-barre__invite { display: none; }
    .acc-cartes { grid-template-columns: 1fr; }
    .acc-preuves__sep { display: none; }
}

@media (max-width: 700px) {
    .acc-eyebrow { font-size: 15px; letter-spacing: .2em; }
    .acc-phrase { font-size: 16px; padding: 0 12px; }
}

/* Réglage système « réduire les animations » : la scène reste, le mouvement
   part. On ne laisse pas tourner cinq vidéos à quelqu'un qui a demandé le
   contraire — c'est le script qui les met en pause (voir AccueilScroll.jsx). */
@media (prefers-reduced-motion: reduce) {
    html:has(.acc-stage) { scroll-behavior: auto; }
    .acc-fond { transition: opacity .01s; }
    .acc-barre__fleche { animation: none; }
    .acc-cta:hover { transform: none; }
}