/* ============================================================================
   Accueil ExoShare — message du président, offre en bref, dates clés.

   Référence : la production https://exoshare.exosens.com, fichier
   assets/css/styles.css, blocs `.content1`, `.content2` et `.content3`. La prod
   compose en rem sur un `html { font-size: 62.5% }` (1rem = 10px) ; les valeurs
   sont reprises ici en pixels, à l'identique. Chaque commentaire « relevé sur la
   prod » renvoie à une règle lue dans ce fichier, pas à une estimation.

   La variante « édito » n'existe pas en production (son bloc y est commenté) :
   ses mesures viennent de la maquette Figma HOMEPAGE 7:1210, relevées au pixel
   sur un cadre de 1440 (colonne gauche 460, gouttière 80, lettre à droite).

   Le héros et la bande jaune ne sont pas ici : ils coiffent toutes les pages et
   vivent donc dans exosens-public.css, avec le reste de l'ossature.
   ============================================================================ */

/* ----- 1. Message du président (prod : .content1) ------------------------- */

.exo-edito {
    background: var(--exo-cerulean);
}

/* La prod donne 60px de gouttière à cette bande — et non 120 comme aux deux
   suivantes : `.content1 { padding: 60px }`. Sur un écran de 1440 son contenu
   fait donc 1320, ce que confirme la maquette (Frame 113, x = 60, w = 1320).
   Le cadre est élargi d'autant plutôt que d'être ramené à 1200 : la vidéo y
   perdrait 120px de large sans raison. Mesuré sur la prod : 1320 à x = 60. */
.exo-edito__inner {
    margin: 0 auto;
    padding: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* `.exo-titre` pose 42px/400 et 30px de marge basse ; ici c'est le `gap` de la
   bande qui espace, la marge doit donc disparaître. */
.exo-edito__titre {
    align-self: flex-start;
    margin: 0;
    line-height: normal;
    color: var(--exo-jaune);
    text-transform: uppercase;
}

.exo-edito__ligne {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    gap: 40px;
}

/* -- variante « vidéo » : lecteur à gauche, transcription à droite -- */

/* 80 % relevé sur la prod, soit 1056 sur un cadre de 1320. Le `flex: 0 0 auto`
   n'est pas un choix : en prod le lecteur est un <video>, élément remplacé dont
   la taille minimale automatique vaut sa largeur spécifiée — il ne se comprime
   donc jamais, et c'est la colonne de droite qui cède (mesurée à 265, pas 340).
   Sans cette ligne, le cadre de repli, lui, se comprimerait et la bande
   changerait de proportions selon qu'une vidéo est rattachée ou non. */
.exo-edito__video {
    flex: 0 0 auto;
    width: 80%;
}

.exo-edito__video video,
.exo-edito__video-vide {
    display: block;
    width: 100%;
    /* Réserve de place et fond bleu du lecteur, comme la prod : un poster absent
       laisse ce fond, avec le lecteur toujours au bon format. */
    aspect-ratio: 16 / 9;
    background: var(--exo-bleu-fonce);
    object-fit: cover;
}

/* Aucune vidéo rattachée dans la bibliothèque : la prod rend malgré tout le
   cadre bleu foncé du lecteur, on réserve donc la même place. */
.exo-edito__video-vide {
    aspect-ratio: 16 / 9;
}

.exo-edito__cote {
    display: flex;
    width: 340px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 30px;
}

/* Le panneau de transcription (`.message` en prod). Il occupe toute la hauteur
   restante au-dessus des boutons, d'où le `flex: 1 0 0`. */
.exo-transcription {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 20px 0 20px 20px;
    background: rgba(255, 254, 254, 0.1);
    overflow-x: hidden;
    overflow-y: auto;
}

/* Même voile blanc que le panneau : les deux se superposent, ce qui éclaircit
   l'en-tête sans seconde couleur. Relevé sur la prod. */
.exo-transcription__titre {
    width: 100%;
    margin: 0;
    padding: 8px 20px;
    border-radius: 20px 0 0 0;
    background: rgba(255, 254, 254, 0.1);
    color: var(--exo-bleu-fonce);
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

/* La prod porte ce padding sur le <p> ; le bloc éditable peut en compter
   plusieurs, on le pose donc sur le conteneur. */
.exo-transcription__corps {
    padding: 20px;
    color: var(--exo-blanc);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

.exo-transcription__corps p {
    margin: 0 0 16px;
}

.exo-transcription__corps p:last-child {
    margin-bottom: 0;
}

/* La prod déclare `gap: 30px`, mais ses boutons sont des <a> en ligne : le <li>
   ne mesure que la ligne de texte (16px), les 6px de retrait débordant de part
   et d'autre. L'écart réellement peint entre deux boutons y vaut donc
   30 − 6 − 6 = 18px, ce que confirme la mesure (colonne haute de 62 pour deux
   boutons de 28). Nos boutons sont des `inline-flex`, hauts de leurs 29px
   pleins : c'est bien 18 qu'il faut écrire pour retrouver le rendu. */
.exo-edito__boutons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* `.btn--white` de la prod : un voile blanc à 50 %, et le seul bouton de la
   charte dont les quatre coins sont arrondis — `.exo-btn` impose sinon le coin
   haut-droit vif. Le voile vaut #8A9EA5 sur le panneau bleu foncé de la
   variante édito et #8AB2C0 sur le céruléen de la variante vidéo : c'est bien
   la transparence qu'il faut garder, pas une couleur figée. */
.exo-btn--blanc {
    border-radius: 12px;
    background: rgba(255, 254, 254, 0.5);
    color: var(--exo-bleu-fonce);
}

.exo-btn--blanc:hover {
    background: var(--exo-blanc);
    box-shadow: 0 0 20px 0 #FFF;
}

/* -- variante « édito » : portrait et raccourcis à gauche, lettre à droite -- */

/* Maquette : colonne gauche 460, lettre à 540, soit 80px de gouttière. */
.exo-edito--edito .exo-edito__ligne {
    gap: 80px;
}

.exo-edito__colonne {
    flex: 0 0 460px;
    display: flex;
    flex-direction: column;
    /* Portrait haut de 338, panneau posé à 378 : 40px les séparent. */
    gap: 40px;
}

/* Le portrait et son filet sont deux rectangles de 375 × 313 décalés de 25px :
   la photo en haut à droite, le filet en bas à gauche. Le cadre qui les réunit
   mesure donc 400 × 338 (maquette 24:1086). */
.exo-edito__portrait {
    position: relative;
    width: 400px;
    max-width: 100%;
    /* La photo commence à 60 du bord de la colonne ; le cartouche jaune, lui,
       est calé sur ce bord — d'où le décalage repris en négatif plus bas. */
    margin: 0 0 0 60px;
    aspect-ratio: 400 / 338;
}

/* Coin haut-droit vif, les trois autres largement arrondis : c'est la signature
   de la charte, la même que sur les boutons. Rayon relevé à 90 sur la maquette
   (Figma lisse ses angles, CSS approche avec un arc simple). */
.exo-edito__portrait img,
.exo-edito__portrait::before {
    position: absolute;
    width: 93.75%;
    height: 92.6%;
    border-radius: 90px 0 90px 90px;
}

.exo-edito__portrait img {
    top: 0;
    right: 0;
    object-fit: cover;
}

.exo-edito__portrait::before {
    content: "";
    left: 0;
    bottom: 0;
    border: 1px solid var(--exo-blanc);
    pointer-events: none;
}

/* Cartouche du président : 221 × 50 posé à 240 du haut du cadre, débordant sur
   la gauche de la photo. */
.exo-edito__badge {
    position: absolute;
    left: -60px;
    bottom: 14.2%;
    max-width: 221px;
    margin: 0;
    padding: 4px 12px;
    background: var(--exo-jaune);
    color: var(--exo-bleu-fonce);
    font-size: 16px;
    line-height: 21px;
}

.exo-edito__badge b {
    display: block;
    font-weight: 700;
}

.exo-edito__badge span {
    display: block;
    font-weight: 400;
}

/* Panneau des raccourcis : 292 de large, posé à 40 du bord de la colonne, coin
   haut-gauche vif et 40 de rayon ailleurs (mesuré sur la maquette 32:1120). */
.exo-edito__panneau {
    width: 292px;
    max-width: 100%;
    margin: 0 0 0 40px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 0 40px 40px 40px;
    background: var(--exo-bleu-fonce);
}

/* Le chevron est jaune, le libellé blanc : le contraire de ce que laisse croire
   une lecture rapide de la maquette. */
.exo-edito__savoir-plus {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--exo-blanc);
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
}

.exo-edito__savoir-plus img {
    flex: 0 0 auto;
}

.exo-edito--edito .exo-edito__boutons {
    gap: 20px;
}

.exo-edito__message {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Titre à 0, lettre à 49 pour 29 de titre : 20px les séparent. */
    gap: 20px;
}

.exo-edito__lettre {
    color: var(--exo-blanc);
    font-size: 16px;
    line-height: 21px;
}

.exo-edito__lettre p {
    margin: 0 0 21px;
}

.exo-edito__lettre p:last-child {
    margin-bottom: 0;
}

/* ----- 2. L'offre en bref (prod : .content2) ------------------------------ */

.exo-offre {
    position: relative;
    overflow: hidden;
    background: var(--exo-gris);
}

/* Le chevron est calé sur le bord de la bande, pas sur le cadre de contenu :
   `right: 0; top: 60px` en prod. */
.exo-offre__decor {
    position: absolute;
    top: 60px;
    right: 0;
    max-width: none;
    pointer-events: none;
}

html[dir="rtl"] .exo-offre__decor {
    right: auto;
    left: 0;
    transform: rotate(180deg);
}

/* 60px de haut et 120 de côté en prod, soit 1200 de contenu sur un écran de
   1440 : le cadre porte donc les 1200 plus ses 20px de gouttière de repli, ce
   qui replace le contenu à x = 120 exactement comme la prod. */
.exo-offre__inner {
    position: relative;
    z-index: 1;
    max-width: calc(var(--exo-maxw) + 40px);
    margin: 0 auto;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

/* Titre et sous-titre sont collés : la prod ne met aucun `gap` entre eux, seul
   le bloc entier est séparé des cartes par les 40px de la bande. */
.exo-offre__titre-bloc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.exo-offre__titre {
    margin: 0;
    line-height: normal;
    color: var(--exo-bleu-nuit);
    text-transform: uppercase;
}

.exo-offre__soustitre {
    margin: 0;
    color: var(--exo-bleu-nuit);
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
}

/* Cinq cartes à parts égales : (1200 − 4 × 40) / 5 = 208, la largeur de la
   maquette. */
.exo-cartes {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-wrap: wrap;
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.exo-carte {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 20px 0 20px 20px;
    background: var(--exo-blanc);
    box-shadow: 0 0 60px 0 rgba(0, 112, 173, 0.1);
}

/* Une carte à bouton colle son bouton au pied de la carte, quelle que soit la
   longueur du texte : `#bloc-button__home` en prod. */
.exo-carte--bouton {
    justify-content: space-between;
}

.exo-carte__haut {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.exo-carte__picto {
    display: flex;
    flex: 0 0 auto;
    width: 55px;
    height: 55px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    border-radius: 60px;
    background: var(--exo-bleu-nuit);
}

/* Les pictos n'ont pas tous la même taille native (37 × 37 pour le monde,
   25 × 29 pour le graphique) : la prod les laisse tels quels dans la pastille,
   quitte à ce que le plus large déborde d'un pixel sur les 10 de retrait. */
.exo-carte__picto img {
    display: block;
    flex: 0 0 auto;
    /* base.css borne toutes les images à 100 % de leur conteneur ; la prod ne le
       fait pas et rend le picto « monde » à ses 37px pleins. */
    max-width: none;
}

.exo-carte__titre {
    align-self: stretch;
    margin: 0;
    color: var(--exo-jaune);
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.exo-carte__texte {
    align-self: stretch;
    color: var(--exo-cerulean);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

.exo-carte__texte p {
    margin: 0;
}

.exo-carte .exo-btn {
    align-self: flex-start;
}

/* ----- 3. Les dates clés (prod : .content3) ------------------------------- */

.exo-dates {
    position: relative;
    overflow: hidden;
    background: var(--exo-bleu-nuit);
}

.exo-dates__decor {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    pointer-events: none;
}

html[dir="rtl"] .exo-dates__decor {
    left: auto;
    right: 0;
    transform: rotate(180deg);
}

.exo-dates__inner {
    position: relative;
    z-index: 1;
    max-width: calc(var(--exo-maxw) + 40px);
    margin: 0 auto;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.exo-dates__titre {
    margin: 0;
    line-height: normal;
    color: var(--exo-jaune);
    text-transform: uppercase;
}

.exo-frise {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 20px;
}

.exo-frise__ligne {
    display: flex;
    align-self: stretch;
    gap: 40px;
}

.exo-frise__segment {
    position: relative;
    flex: 1 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Le trait demande 100 % puis se laisse comprimer des 13px de la pastille :
   195 + 13 = 208, la largeur d'un jalon. */
.exo-frise__trait {
    width: 100%;
    min-width: 0;
    height: 3px;
}

.exo-frise__point {
    flex: 0 0 13px;
    width: 13px;
    height: 14px;
}

/* Le pointillé enjambe la gouttière de 40px jusqu'au jalon suivant. */
.exo-frise__pointilles {
    position: absolute;
    right: -40px;
    top: calc(50% - 1.5px);
    width: 40px;
    height: 3px;
}

html[dir="rtl"] .exo-frise__pointilles {
    right: auto;
    left: -40px;
}

.exo-frise__blocs {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.exo-frise__jalon {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 20px 0 20px 20px;
    border: 2px solid var(--exo-cerulean);
    background: rgba(0, 103, 131, 0.4);
    box-shadow: 0 0 60px 0 rgba(0, 112, 173, 0.1);
}

/* Seul titre de la page qui reste en bas de casse : la prod ne met pas
   d'`text-transform` ici, contrairement aux cartes de l'offre. */
.exo-frise__date {
    align-self: stretch;
    margin: 0;
    color: var(--exo-jaune);
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
}

.exo-frise__texte {
    align-self: stretch;
    color: var(--exo-blanc);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

.exo-frise__texte p {
    margin: 0;
}

/* Jalon dépassé : la prod l'estompe à 30 %, segment et bloc ensemble. Le
   millésime 2026 n'a pas encore de calendrier daté à comparer à la date du
   jour — la classe attend d'être posée par le gabarit quand il l'aura. */
.exo-frise__segment--passe,
.exo-frise__jalon--passe {
    opacity: 0.3;
}

/* Le bouton de la frise n'est pas blanc pur mais gris clair (#F4F3F3), comme
   son homologue de la prod (`.content3 … .bloc > .button a`). */
.exo-frise .exo-btn--souscrire {
    color: #f4f3f3;
}

/* ----- Responsive (prod : @media max-width 1050px) ------------------------ */

@media screen and (max-width: 1050px) {
    .exo-edito__inner {
        padding: 20px;
        gap: 20px;
    }

    .exo-edito__titre {
        font-size: 24px;
    }

    .exo-edito__ligne,
    .exo-edito--edito .exo-edito__ligne {
        flex-direction: column;
        gap: 20px;
    }

    .exo-edito__video,
    .exo-edito__cote,
    .exo-edito__colonne,
    .exo-edito__panneau {
        width: 100%;
        flex: 0 0 auto;
    }

    .exo-edito__cote {
        gap: 20px;
    }

    /* Sur une colonne, le panneau ne peut plus être poussé en hauteur : il
       reprend une hauteur libre et son propre ascenseur. */
    .exo-transcription {
        flex: initial;
        width: 100%;
        max-height: 300px;
        overflow-y: auto;
    }

    .exo-transcription__titre {
        font-size: 18px;
    }

    .exo-transcription__corps {
        font-size: 14px;
    }

    /* Boutons pleine largeur : le `width: 100%` de la prod ne suffit pas, il
       faut aussi que le <li> cesse d'être ajusté à son contenu. */
    .exo-edito__boutons,
    .exo-edito--edito .exo-edito__boutons {
        width: 100%;
        align-items: stretch;
        gap: 20px;
    }

    .exo-edito__boutons li,
    .exo-edito__boutons .exo-btn {
        width: 100%;
    }

    /* Le décalage du portrait et du panneau n'a plus de sens hors de la
       colonne de 460 : tout revient au bord. */
    .exo-edito__portrait,
    .exo-edito__panneau {
        margin-left: 0;
    }

    .exo-edito__badge {
        left: 0;
    }

    .exo-offre__inner,
    .exo-dates__inner {
        padding: 20px;
        gap: 30px;
    }

    .exo-offre__decor,
    .exo-dates__decor {
        display: none;
    }

    .exo-offre__titre,
    .exo-dates__titre {
        font-size: 24px;
    }

    .exo-offre__soustitre {
        font-size: 16px;
    }

    .exo-cartes,
    .exo-frise__blocs {
        flex-direction: column;
        gap: 10px;
    }

    .exo-carte,
    .exo-frise__jalon {
        width: 100%;
        gap: 10px;
    }

    .exo-carte__haut {
        gap: 10px;
    }

    .exo-carte__titre,
    .exo-frise__date {
        font-size: 16px;
    }

    .exo-carte__texte,
    .exo-frise__texte {
        font-size: 14px;
    }

    .exo-carte .exo-btn,
    .exo-frise__jalon .exo-btn {
        width: 100%;
    }

    /* Empilée, la frise n'a plus de rail à montrer : la prod la masque. */
    .exo-frise__ligne {
        display: none;
    }
}