/* ============================================================================
   ExoShare 2026 — charte publique (préfixe « exo- »)

   L'ossature (barre, bandeau, bande jaune, pied de page) est relevée sur la
   production https://exoshare.exosens.com — fichier assets/css/styles.css —
   qui reste la référence : c'est elle que le client connaît. La prod compose
   en rem sur un `html { font-size: 62.5% }` (1rem = 10px) ; les valeurs sont
   reprises ici en pixels, à l'identique.

   Les bandes de l'ossature ne sont PAS bridées à 1200px, contrairement aux
   bandes de contenu : elles gardent les gouttières de la prod (60px pour la
   barre, le bandeau et la bande jaune ; 100px pour le pied de page). Ce n'est
   pas un choix esthétique — la rangée de la barre (logo 180 + six entrées 815
   + deux boutons et la pastille 290, gouttières comprises) demande 1305px de
   contenu. Sur un écran de 1440, la prod lui en donne 1320 ; un cadre de
   1200px la fait déborder et le menu passe sous le logo.
   ============================================================================ */

:root {
    /* Palette de la maquette, nom de la variable Figma en commentaire */
    --exo-noir:        #1D1D1D;   /* black      — texte de la nav */
    --exo-blanc:       #FFFEFE;   /* white      — fond de la nav, cartes, texte sur fond sombre */
    --exo-cerulean:    #006783;   /* cerulean   — bandes « comprendre », bouton Simuler */
    --exo-bleu-fonce:  #143F4D;   /* Dark-blue  — héros, bandes FAQ, champs du simulateur */
    --exo-bleu-nuit:   #2A424D;   /* Blue1      — bande « les dates clés », texte d'alerte */
    --exo-jaune:       #EBAE44;   /* yellow     — bandeau d'alerte, bouton Souscrire, titres de cartes */
    --exo-bleu-clair:  #0F94C3;   /* bleu       — titres secondaires, valeurs saisies */
    --exo-gris:        #F4F3F3;   /* grey5      — bandes « l'offre en bref » */

    /* Teintes relevées au pixel, absentes des variables Figma */
    --exo-jaune-hover: #AB7E22;
    --exo-onglet-off:  #0C4E61;
    --exo-panneau:     #0C4F62;
    --exo-carte-fonce: #045F78;
    --exo-degrade-1:   #CFEAF3;
    --exo-degrade-2:   #ADDAE9;

    /* Le pied de page de la prod est en noir absolu, pas en --exo-noir. */
    --exo-footer-fond: #000000;

    --exo-maxw:  1200px;

    /* 20px + 20px de padding autour d'une rangée de 31px (bouton : 6 + 6 +
       14px de texte) : c'est la hauteur que rend la barre en prod. */
    --exo-nav-h: 71px;

    /* Le coin haut-droit reste vif : c'est la signature de la charte, elle
       revient sur tous les boutons et sur le cartouche du prix. */
    --exo-radius-btn: 12px 0 12px 12px;
}

/* ----- Ossature ----------------------------------------------------------- */

body {
    font-family: var(--font-family-base);
    font-size: 16px;
    color: var(--exo-noir);
    background: var(--exo-blanc);
}

/* Bande pleine largeur dont le contenu reste centré sur 1200 px. */
.exo-bande {
    width: 100%;
}

.exo-bande__inner {
    padding: 60px 120px;
}

/* Titre de bande : Segoe UI Regular 42, la maquette ne met jamais de gras. */
.exo-titre {
    font-size: 42px;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 30px;
}

/* ----- Barre de navigation ------------------------------------------------ */

/* La prod ne fige pas la barre : aucune règle de positionnement sur .navbar,
   elle défile avec la page. Rien à compenser en haut du document. */
.exo-nav {
    width: 100%;
    background: var(--exo-blanc);
}

/* GOUTTIÈRE LOGO→MENU DE 20 PX, PAS 10 — et ce n'est pas un détail. La prod
   garde son bouton hamburger dans le flux de la barre même sur grand écran
   (`display: block`, largeur nulle) : un élément flex de 0 px entre le logo et
   le menu, donc DEUX gouttières de 10 px. Mesuré à 1440 : le menu de la prod
   dispose de 1120 px, le nôtre de 1130. Ces dix pixels décident si les trois
   libellés longs (« COMPRENDRE EXOSHARE », « PARTICIPER À EXOSHARE »,
   « QUESTIONS / RÉPONSES ») passent sur deux lignes — en prod, oui — et donc si
   la barre fait 80 px ou 72. Une seule valeur reproduit l'écart visible entre
   le logo et le premier lien, le retour à la ligne des libellés, et la hauteur. */
.exo-nav__inner {
    min-height: var(--exo-nav-h);
    padding: 20px 60px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Taille native du fichier logo_exosens_blue.svg, et taille imposée en prod. */
.exo-nav__logo img {
    display: block;
    width: 180px;
    height: 29px;
}

/* Les six entrées, les deux boutons et la pastille forment une seule rangée
   poussée à droite : en prod ils partagent le même <ul>, avec un pas de 10px. */
.exo-nav__nav {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

/* La liste occupe l'espace et pousse son contenu à droite, comme la `.menu` du
   legacy (`flex: 1 0 0; justify-content: flex-end`). PAS de `flex-wrap` : le
   legacy n'en a pas, et il n'en a pas besoin — mesure faite, le menu le plus
   long (néerlandais) tient sur une rangée jusqu'à 1251 px, juste avant le seuil
   du panneau déroulant. `min-width: 0` autorise le rétrécissement des entrées
   (voir plus bas). */
.exo-nav__list {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* LES ENTRÉES PEUVENT RÉTRÉCIR, exactement comme le legacy — ses `#lien__page`
   n'ont aucun `flex`, donc `flex-shrink: 1` par défaut. Quand la place manque,
   l'entrée rétrécit et son texte passe sur deux lignes (« COMPRENDRE / EXOSHARE »)
   au lieu de déborder ou de glisser sous le logo. Aux largeurs actuelles ce
   repli ne se déclenche jamais ; il n'agira que si un éditeur rallonge un
   libellé. `flex: 0 0 auto` figeait l'entrée sur une ligne et forçait ailleurs
   un resserrement de toute la barre — le vide et la petite police que le menu
   montrait sur les portables. */
.exo-nav__list li {
    flex: 0 1 auto;
    padding: 4px 0;
    /* `normal`, comme le `li` de la prod. Le `li` héritait des 24 px de
       `base.css` : chaque ligne de texte prenait 24 px au lieu de ~16, et une
       entrée sur deux lignes 48 au lieu de 32 — la barre montait à 96 px là où la
       prod fait 80. Poser `normal` sur le lien ne suffisait pas : c'est la boîte
       de ligne du `li` qui fixe la hauteur.
       Et la taille du `li` compte aussi : la prod le compose en 10 px (racine à
       62,5 %), si bien que sa ligne est celle du lien (14 px, ~16 px de haut).
       Hérité de `body` (16 px), notre `li` posait une ligne de ~18 px et la
       barre sortait à 85. On l'aligne sur le lien : 16 + 8 = 24 sur une ligne,
       32 + 8 = 40 sur deux — les valeurs mesurées en prod. */
    font-size: 14px;
    line-height: normal;
}

.exo-nav__link {
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    color: var(--exo-noir);
    text-decoration: none;
    /* PAS DE `white-space: nowrap` : en prod les libellés longs passent sur deux
       lignes quand la place manque (« COMPRENDRE / EXOSHARE » à 1440 px), ce qui
       fait sa barre de 80 px. Le `nowrap` figeait chaque entrée sur une ligne et
       rendait inopérant le rétrécissement des entrées (`flex: 0 1 auto`). */
}

/* L'entrée courante porte un filet sous le texte, pas un soulignement de lien
   ni une couleur : c'est un `border-bottom` de 1px en prod. */
.exo-nav__link.is-active,
.exo-nav__link:hover {
    border-bottom: 1px solid var(--exo-noir);
}

.exo-nav__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* ----- Boutons ------------------------------------------------------------ */

.exo-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border: 0;
    border-radius: var(--exo-radius-btn);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.exo-btn--simuler {
    background: var(--exo-cerulean);
    color: var(--exo-blanc);
}

.exo-btn--simuler:hover {
    background: var(--exo-bleu-fonce);
}

.exo-btn--souscrire {
    background: var(--exo-jaune);
    color: var(--exo-blanc);
}

.exo-btn--souscrire:hover {
    background: var(--exo-jaune-hover);
}

/* Sur la bande jaune, le bouton n'est pas plein : même fond que la bande, un
   filet bleu nuit de 1px et le texte de la même couleur. */
.exo-btn--alerte {
    background: var(--exo-jaune);
    border: 1px solid var(--exo-bleu-nuit);
    color: var(--exo-bleu-nuit);
}

.exo-btn--alerte:hover {
    background: var(--exo-jaune-hover);
}

/* Pastille du pays : coins ronds sur les quatre angles, contrairement aux
   boutons ; le nom du pays en Regular, le code langue en Bold, tous deux en 10px. */
.exo-nav__pays {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid rgba(42, 66, 77, 0.3);
    border-radius: 12px;
    background: #FFFFFF;
    font-size: 10px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    color: var(--exo-bleu-nuit);
    text-decoration: none;
    white-space: nowrap;
}

.exo-nav__pays b {
    font-weight: 700;
}

/* ----- Commande mobile ---------------------------------------------------- */

/* LE BOUTON DE LA PROD : rond de 40 px, fond bleu translucide, filet noir, trois
   barres de 20 × 2 espacées de 8 px. Il était un simple trait de 34 × 26 sans
   fond ; la prod lui donne une pastille. */
.exo-nav__burger {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #000;
    border-radius: 50%;
    background: rgba(0, 103, 131, 0.3);
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.exo-nav__burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #3d3d3d;
    transition: transform 0.25s, opacity 0.25s;
}

/* LE MORPH EN CROIX, 0,25 s comme en prod : le JS pose `aria-expanded="true"`
   sur le bouton à l'ouverture. La barre du haut descend au centre et tourne de
   45°, celle du bas monte et tourne de −45°, celle du milieu s'efface — la prod
   fait tourner son trait central et rabat ses deux pseudo-éléments dessus, le
   résultat est le même X. */
.exo-nav__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.exo-nav__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.exo-nav__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ----- Bandeau ExoShare (toutes pages) ------------------------------------ */

/* 400px de haut en prod, gradient bleu sur la gauche et photo à droite. */
.exo-hero {
    position: relative;
    background: var(--exo-bleu-fonce);
    overflow: hidden;
}

/* La photo est une balise et non un fond CSS : la CSP interdit les styles en
   ligne et l'URL du S3 change d'un environnement à l'autre, seul le gabarit la
   connaît.

   LE CADRAGE EST CELUI DE LA PROD, VALEUR POUR VALEUR. Sa feuille pose
   `background: … 260px -65.789px / 100% 206.895% no-repeat` : la photo fait la
   largeur du bandeau, deux fois sa hauteur, décalée de 260 px vers la droite et
   de 66 px vers le haut. C'est ce qui montre le groupe entier — la femme à
   gauche, les deux hommes à droite. Un `object-fit: cover` centré, tenté avant,
   recadrait sur les deux hommes : la même image, mais pas la même scène.
   `object-fit: fill` reproduit exactement le comportement de `background-size`
   en pourcentages, y compris au-delà de 1440 px où la prod étire un peu. La
   bande de 260 px laissée à gauche est sous le dégradé (36 % du bandeau). */
.exo-hero__photo {
    position: absolute;
    top: -65.789px;
    left: 260px;
    width: 100%;
    /* Le reset `img { max-width: 100% }` de base.css plafonnerait les 160 % du
       cadrage mobile à la largeur du bandeau : on le lève ici, la photo déborde
       volontairement et le bandeau la rogne (`overflow: hidden`). */
    max-width: none;
    height: 206.895%;
    object-fit: fill;
}

/* Le dégradé de la prod, repris au pourcentage près. */
.exo-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--exo-bleu-fonce) 36.11%, rgba(42, 66, 77, 0) 61.39%);
    pointer-events: none;
}

html[dir="rtl"] .exo-hero::after {
    background: linear-gradient(270deg, var(--exo-bleu-fonce) 36.11%, rgba(42, 66, 77, 0) 61.39%);
}

/* Sous 600 px la prod change de cadrage ET de dégradé :
   `… 32.21% / 68.75%` et `-20px -20px / 160%` (largeur 160 %, hauteur libre). */
@media screen and (max-width: 600px) {
    .exo-hero__photo {
        top: -20px;
        left: -20px;
        width: 160%;
        height: auto;
        min-height: 100%;
    }

    .exo-hero::after {
        background: linear-gradient(90deg, var(--exo-bleu-fonce) 32.21%, rgba(42, 66, 77, 0) 68.75%);
    }

    html[dir="rtl"] .exo-hero::after {
        background: linear-gradient(270deg, var(--exo-bleu-fonce) 32.21%, rgba(42, 66, 77, 0) 68.75%);
    }
}

.exo-hero__inner {
    position: relative;
    z-index: 1;
    min-height: 400px;
    padding: 40px 60px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Logo et accroche sont collés en haut ; le cartouche du prix, en bas à droite. */
.exo-hero__gauche {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.exo-hero__droite {
    flex: 1 0 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;
}

/* Taille native du fichier ; la prod ne la contraint pas sur grand écran. */
.exo-hero__logo {
    display: block;
    max-width: 100%;
    height: auto;
}

.exo-hero__accroche {
    align-self: stretch;
    color: #FFFFFF;
    font-size: 36px;
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase;
}

.exo-hero__accroche p {
    margin: 0;
}

/* Les deux classes ci-dessous viennent du bloc éditable lui-même : le contenu
   migré porte encore le balisage de 2025. La mise en forme doit donc rester
   attachée à ces noms, sans quoi la traduction par blocs perdrait le rendu. */
.exo-hero__accroche .banner__left__text__span,
.exo-hero__accroche .banner__left__text__span__yellow {
    font-size: 30px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

.exo-hero__accroche .banner__left__text__span {
    color: #FFFFFF;
}

.exo-hero__accroche .banner__left__text__span__yellow {
    color: var(--exo-jaune);
}

/* Cartouche du prix : libellé jaune en surplomb, puis le cadre au filet blanc.
   Le cadre est décalé de 15px vers la gauche, si bien que le libellé dépasse
   d'autant à droite, et il remonte de 8px pour passer sous le libellé. */
.exo-hero__prix {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* La prod declare `z-index: 1` sur ce libelle mais oublie de le positionner :
   la regle reste inerte et le filet blanc du cadre traverse le texte. On pose
   le `position` qui manque, le libelle passe au-dessus comme prevu. */
.exo-hero__prix-label {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 4px 12px;
    background: var(--exo-jaune);
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
}

.exo-hero__prix-label p {
    margin: 0;
}

.exo-hero__prix-cadre {
    margin: -8px 15px 0 0;
    padding: 12px 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    border: 2px solid var(--exo-blanc);
    border-radius: 40px 0 40px 40px;
    background: rgba(20, 63, 77, 0.05);
    box-shadow: 0 0 100px 0 #FFF;
}

.exo-hero__prix-valeur,
.exo-hero__prix-local {
    margin: 0;
    color: #FFFFFF;
    text-align: right;
    line-height: normal;
    text-transform: uppercase;
}

.exo-hero__prix-valeur {
    font-size: 36px;
    font-weight: 700;
}

/* Seconde ligne des pays hors zone euro : le montant dans la devise locale. */
.exo-hero__prix-local {
    font-size: 24px;
    font-weight: 400;
}

/* ----- Bande jaune de souscription (toutes pages) ------------------------- */

.exo-alerte {
    position: relative;
    width: 100%;
    background: var(--exo-jaune);
    overflow: hidden;
}

/* Les deux chevrons décoratifs de la prod : un grand à gauche, débordant du
   bord, et une file de petits chevrons à 200px du bord droit. Ils sont posés
   derrière le texte — la prod les peint par-dessus, mais du 20% d'opacité sur
   un paragraphe se paie en lisibilité pour rien. */
.exo-alerte__chevron,
.exo-alerte__chevrons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.exo-alerte__chevron {
    left: -25px;
    width: 91.59px;
    height: 61.03px;
}

.exo-alerte__chevrons {
    right: 200px;
    width: 298px;
    height: 51px;
}

html[dir="rtl"] .exo-alerte__chevron,
html[dir="rtl"] .exo-alerte__chevrons {
    transform: translateY(-50%) rotate(180deg);
}

.exo-alerte__inner {
    position: relative;
    z-index: 1;
    min-height: 51px;
    padding: 10px 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

/* Le bloc éditable rend son propre <p> : on le stylise ici plutôt que de
   l'envelopper, sinon on obtient un <p> dans un <p>. */
.exo-alerte__inner > p,
.exo-alerte__texte {
    flex: 1 0 0;
    margin: 0;
    color: var(--exo-bleu-nuit);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

.exo-alerte__inner .exo-btn {
    flex: 0 0 auto;
}

/* ----- Pied de page ------------------------------------------------------- */

.exo-footer {
    width: 100%;
    background: var(--exo-footer-fond);
}

.exo-footer__bar {
    padding: 20px 100px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 40px;
    list-style: none;
}

.exo-footer__bar > li {
    color: #FFFFFF;
    text-align: center;
    font-size: 10px;
    font-weight: 400;
    line-height: normal;
}

.exo-footer__bar a {
    color: #FFFFFF;
    text-decoration: none;
}

/* La prod n'a pas d'état de survol ici ; un lien sans affordance est un défaut
   d'accessibilité, on ajoute le seul soulignement. */
.exo-footer__bar a:hover,
.exo-footer__bar a:focus-visible {
    text-decoration: underline;
}

/* ----- Retour en haut ----------------------------------------------------- */

/* La prod pose bien le lien dans le HTML mais aucune règle ne lui répond dans
   styles.css : le bouton y est donc invisible. On le rend avec la pastille
   btn_haut.svg de 2026 (cercle cerulean, chevron blanc), à sa taille native. */
.scrollTop {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 800;
    display: none;
    width: 29px;
    height: 30px;
    /* base.css pose un fond doré et 10px de remplissage, pour un bouton carré de
       40px. Ici la pastille EST l'image — cercle cerulean, chevron blanc — et ce
       fond ressortait en plaque dorée derrière elle. Les deux règles portent le
       même sélecteur : seule celle-ci, chargée après, décide. */
    padding: 0;
    background: none;
}

.scrollTop.is-visible {
    display: block;
}

.scrollTop img {
    display: block;
    width: 100%;
    height: auto;
}

/* ----- Responsive --------------------------------------------------------- */

/* PAS DE RESSERREMENT INTERMÉDIAIRE. Un bloc @media 1251→1569 rapetissait toute
   la barre (police 14→12, retrait latéral 60→24, gouttières 10→8) pour éviter
   que le menu ne passe sous le logo. Il reposait sur une mesure fausse — le menu
   le plus long (néerlandais) tient en réalité sur une rangée à police pleine
   jusqu'à 1251 px, mesuré — et produisait ce que le client voyait sur portable :
   un texte plus petit et un grand vide entre le logo et le premier lien. Le
   legacy n'a aucune échelle intermédiaire ; on n'en a pas non plus. En dessous
   de 1250 px la barre se replie en panneau (bloc ci-dessous), comme avant. */
@media screen and (max-width: 1250px) {
    .exo-nav__inner {
        align-items: center;
        justify-content: space-between;
    }

    .exo-nav__burger {
        display: flex;
        flex: 0 0 auto;
    }

    /* Le menu quitte le flux et glisse depuis la droite, comme en prod. */
    .exo-nav__nav {
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 2001;
        width: 80%;
        height: 100vh;
        padding: 16px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 20px;
        background: #FFFFFF;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
        overflow: auto;
        /* `visibility` retire le panneau replie de l'ordre de tabulation : sorti
           du cadre, il restait atteignable au clavier en prod. Le delai laisse
           le glissement se jouer avant l'escamotage. */
        visibility: hidden;
        transition: right 0.3s ease, visibility 0s linear 0.3s;
    }

    .exo-nav__nav.is-open {
        right: 0;
        visibility: visible;
        transition: right 0.3s ease;
    }

    .exo-nav__list {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 20px;
    }

    .exo-nav__list li {
        padding: 0;
    }

    .exo-nav__link {
        display: block;
        width: 100%;
        padding: 10px 0;
    }

    .exo-nav__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .exo-nav__actions .exo-btn {
        width: 100%;
    }

    .exo-nav__pays {
        align-self: auto;
        justify-content: space-between;
        width: 100%;
        padding: 10px;
    }
}

/* Point de rupture de la prod : le bandeau, la bande jaune et le pied de page
   passent en colonne, et les gouttières tombent à 20px. */
@media screen and (max-width: 1050px) {
    .exo-nav__inner {
        align-items: flex-start;
        padding: 20px;
    }

    .exo-nav__logo img {
        width: 150px;
        height: auto;
    }

    /* Le bandeau passe en colonne et perd sa hauteur fixe. */
    .exo-hero__inner {
        min-height: 0;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    .exo-hero__gauche,
    .exo-hero__droite {
        width: 100%;
        flex: 0 0 auto;
        align-self: auto;
        align-items: flex-start;
        gap: 10px;
    }

    .exo-hero__logo {
        width: 180px;
    }

    /* Choix de la prod : l'accroche disparaît sous 1050px, la photo et le
       cartouche du prix portent seuls le bandeau. */
    .exo-hero__accroche {
        display: none;
    }

    .exo-hero__prix {
        width: 100%;
        align-items: flex-start;
    }

    .exo-hero__prix-label {
        padding: 2px 6px;
        font-size: 16px;
    }

    /* Pleine largeur moins la gouttiere de 6px de chaque cote, et le coin vif
       passe en haut a gauche : c'est le cadrage mobile de la prod. */
    .exo-hero__prix-cadre {
        width: calc(100% - 12px);
        margin: -8px 6px 0;
        padding: 8px 20px;
        align-items: flex-start;
        border-radius: 0 20px 20px 20px;
    }

    .exo-hero__prix-valeur,
    .exo-hero__prix-local {
        text-align: left;
    }

    .exo-hero__prix-valeur {
        font-size: 28px;
    }

    .exo-hero__prix-local {
        font-size: 18px;
    }

    .exo-alerte__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 20px;
    }

    .exo-alerte__inner > p,
    .exo-alerte__texte {
        font-size: 14px;
        line-height: 1.5;
    }

    /* La prod escamote la file de chevrons et le bouton sous 1050px. */
    .exo-alerte__chevrons,
    .exo-alerte__inner .exo-btn {
        display: none;
    }

    .exo-footer__bar {
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        padding: 20px;
        text-align: center;
    }

    .exo-footer__bar > li {
        font-size: 9px;
        line-height: 1.4;
    }

    .exo-bande__inner {
        padding: 40px 16px;
    }

    .exo-titre {
        font-size: 30px;
    }
}

/* ----- Page de contenu générique ------------------------------------------- */
/* Rendu d'attente pour les pages dont la maquette n'est pas encore portée
   (comprendre, participer, contacts, simulateur) : les blocs migrés s'empilent
   sur fond clair, à la bonne largeur et à la bonne typographie. Chaque page
   recevra ensuite son gabarit dédié. */

.exo-contenu {
    background: var(--exo-blanc);
    color: var(--exo-bleu-fonce);
}

.exo-contenu__inner {
    padding: 60px 120px 80px;
}

.exo-contenu__titre {
    color: var(--exo-bleu-fonce);
    text-transform: uppercase;
}

.exo-contenu__blocs {
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 16px;
    line-height: 1.5;
}

.exo-contenu__bloc p {
    margin: 0 0 12px;
}

.exo-contenu__bloc ul,
.exo-contenu__bloc ol {
    margin: 0 0 12px;
    padding-left: 22px;
    list-style: disc outside;
}

.exo-contenu__bloc ol {
    list-style: decimal outside;
}

.exo-contenu__bloc b,
.exo-contenu__bloc strong {
    font-weight: 700;
}

.exo-contenu__bloc a {
    color: var(--exo-cerulean);
}

.exo-contenu__bloc img {
    max-width: 100%;
    height: auto;
}

.exo-contenu__bloc table {
    width: 100%;
    border-collapse: collapse;
}

.exo-contenu__bloc td,
.exo-contenu__bloc th {
    padding: 8px 10px;
    border: 1px solid rgba(20, 63, 77, 0.2);
    text-align: left;
}

/* ----- Gouttières sous les grands écrans ---------------------------------- */
/* La production compose ses bandes en 120px de gouttière, ce qui laisse 1200px
   de contenu à 1440. Sous 1240 cette gouttière mangerait le texte : elle se
   resserre par paliers, sans jamais brider la largeur — comme la prod, qui
   n'utilise aucun max-width. */

@media screen and (max-width: 1240px) {
    .exo-comprendre__inner, .exo-conditions__inner, .exo-participer__inner,
    .exo-faq__inner, .exo-docs__inner, .exo-contacts__inner, .exo-simulator__inner,
    .exo-mentions__inner, .exo-contenu__inner, .exo-offre__inner, .exo-dates__inner,
    .exo-edito__inner, .exo-bande__inner {
        padding-left: 60px;
        padding-right: 60px;
    }
}

@media screen and (max-width: 700px) {
    .exo-comprendre__inner, .exo-conditions__inner, .exo-participer__inner,
    .exo-faq__inner, .exo-docs__inner, .exo-contacts__inner, .exo-simulator__inner,
    .exo-mentions__inner, .exo-contenu__inner, .exo-offre__inner, .exo-dates__inner,
    .exo-edito__inner, .exo-bande__inner {
        padding-left: 20px;
        padding-right: 20px;
    }
}