/* Montrer seulement Mobile quand l'écran est petit */




.mobile{
    display: flex;
}
.desktop{
    display: none;
}
div[data-resolution="Mobile"] {
    display: flex;
}

.ep-auth__switch a.mobile {
    display: block;
}

.ep-auth__switch a.desktop {
    display: none;
}

/* Montrer seulement Desktop quand l'écran est grand */
@media (min-width: 1440px) {
    .mobile{
        display: none;
    }
    .desktop{
        display: flex;
    }
    div[data-resolution="Desktop"] {
        display: flex;
    }
}

@media (min-width: 1400px) {
    .account-order, .account-orders {
        width: 1400px;
    }
}

div.ep-travellers{
    width: 100%;
}

/* Vignette des cartes « précédents voyages » — corrigé le 02/09/2026.

   Cette règle imposait `background-size: 70%`. Tant que ces cartes n'avaient pas de photo,
   cela ne se voyait pas. Depuis qu'elles en ont une, la photo s'affichait à 70 % de la
   largeur du cadre et, la répétition étant la valeur par défaut, se retrouvait CARRELÉE :
   un bout d'image répété plutôt qu'une vignette.

   Le sélecteur `div.ep-card__photo` (0,1,1) l'emportait sur le `.ep-card__photo` (0,1,0) de
   ep-dashboard.pcss, qui pose pourtant `cover` et `center` — les bonnes valeurs. On les
   rétablit ici plutôt que de simplement supprimer la règle : le fichier de base peut être
   régénéré, et `no-repeat` manquait de toute façon des deux côtés.

   `ep-card` n'est utilisé que par le bloc des archives (account/views/orders.html) : cette
   correction ne déplace aucun autre écran. */
div.ep-card__photo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#front-footer .front-footer-nav {
    background-image: none;
    background-color: #222222;
}

/* RÈGLE RETIRÉE LE 28/09/2026 — elle masquait les grands titres de « Préparer votre voyage ».

       div.ep-info__section h2.heading { display: none; }

   C'est elle, et rien d'autre, qui rendait « Équipement » et « Formalités & santé »
   invisibles : les titres étaient bien rendus par le gabarit et bien présents dans le DOM,
   mais posés à `display:none`. Sa date et son motif d'origine sont inconnus.

   ⚠️ NE PAS LA RÉTABLIR SANS LIRE CE QUI SUIT. Sa spécificité (0,2,2 — deux éléments et
   deux classes) l'emporte sur le `.ep-info__section > .heading` (0,2,0) du bloc de mise en
   forme plus bas dans ce même fichier. Tant qu'elle était là, aucune retouche de police,
   de graisse ou de marge sur ce titre n'avait le moindre effet visible, et le diagnostic
   était trompeur : `getComputedStyle()` renvoie bien une taille et une graisse pour un
   élément en `display:none`, ce qui donne l'illusion d'un titre affiché mais trop discret. */
ul{
    line-height: 1.2em;
}
.is-rt ul li {
   padding-left: 10px;
    line-height: 1.5em;
}
.is-rt ul li:before {
    content: "";
    display: inline-block;
    margin-right: 10px;
    width: 2px;
    height: 2px;
    background-color: #222222;
    border-radius: 50%;
}
.ep-info__section:first-child{
    border-top: 1px solid #222222;
}
.ep-info__section {
    border-bottom: 1px solid #222222;
}
.ep-accordion {
    border-top: 1px solid #222222;
}
.ep-accordion__item {
    border-bottom: 1px solid #222222;
}
.ep-accordion__item.is-open:last-child,
.ep-accordion__item.is-open .ep-accordion__panel .ep-info .ep-info__section:last-child{
    border-bottom: none;
}
.ep-reserve__section {
    /*border-top: 1px solid #222222;*/
    padding-top: 20px;
}

.ep-quote-table .ep-quote-table__label {
    text-align: left;
     font-weight: 600;
}
.ep-assurance{
    gap:5px;
}
.ep-rubric{
    margin-bottom: unset;
}
.ep-rubric__title{
    border-bottom: 1px solid #222222;
}

.ep-rubric.is-open .ep-rubric__body{
    padding-bottom: 20px;
    border-bottom: 1px solid #e6e1d7;
    border-bottom: 1px solid #222222;
    margin-bottom: 20px;
}

.ep-pay__fields {
    margin-bottom:20px;
}

/* Déconnexion — 06/08/2026.
   Le lien « Me déconnecter » est devenu un formulaire POST porteur du jeton CSRF : en GET,
   n'importe quelle page tierce pouvait déconnecter le client à son insu. Ces deux règles
   rendent le bouton visuellement identique au lien qu'il remplace ; sans elles, il hérite
   des styles de bouton du navigateur (bordure, fond gris, police différente).
   Placé dans surcharge.css et non dans les sources du build : ce fichier est chargé tel
   quel par layout.html, la correction ne dépend donc pas d'une recompilation des assets —
   qui est par ailleurs cassée depuis août 2025 (voir CLAUDE.md). */
.ep-navbar__logout {
    margin: 0;
}

/* Bloc « Modalités et conditions générales » du devis — 06/08/2026.
   Refonte de la maquette Figma : une seule case à cocher, suivie de la liste de ce qu'elle
   couvre, puis d'une alerte tant que la case n'est pas cochée.
   Couleurs reprises telles quelles de la maquette : Atalante/alerte soft #F8D3D3 pour le
   fond, Primary/Intrepid Red #FF2828 pour le texte. */
.ep-terms__list {
    margin: 16px 0 0 0;
    padding-left: 44px;          /* aligne les puces sous le libellé de la case, pas sous la case */
    list-style: disc;
}

.ep-terms__list li {
    margin-bottom: 8px;
    line-height: 21px;
}

.ep-terms__alert {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 10px 16px;
    border-radius: 3px;
    background: #f8d3d3;
    color: #ff2828;
    font-size: 14px;
    line-height: normal;
}

/* `hidden` est un attribut HTML, mais `display:flex` ci-dessus le neutraliserait :
   sans cette règle, l'alerte resterait visible en permanence. */
.ep-terms__alert[hidden] {
    display: none;
}

/* La case à cocher elle-même, en rouge — conforme à la maquette.
   La règle de base (src/templates/ep-order.pcss) la dessine en bleu nuit sur fond blanc.
   La maquette la veut rouge dans les deux états, ce qui sert aussi la lisibilité : c'est la
   SEULE case de l'écran, et le seul obstacle au paiement. La rendre discrète est ce qui
   produit le cas d'assistance « le bouton ne marche pas ».
   Valeurs reprises telles quelles du composant Figma : bordure Primary/Intrepid Red #FF2828
   de 2px, fond rouge à 25% d'opacité, rayon 8px, 24×24.
   Une fois cochée, la case est remplie en rouge plein : la coche blanche du gabarit y
   ressort, alors qu'elle serait invisible sur le fond rosé de l'état décoché. */
.ep-terms__box {
    border-color: #ff2828;
    background: rgba(255, 88, 88, .25);
}

.ep-terms__item input[type="checkbox"]:checked + .ep-terms__box {
    border-color: #ff2828;
    background: #ff2828;
}

.ep-terms__alert-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-weight: 700;
    line-height: 1;
}

/* CTA « Régler mon solde » rétabli en mobile — 06/08/2026.

   Il était masqué sous 750px par `.ep-recap__cta--solde { display: none }`
   (src/templates/ep-order.pcss, dans le bloc @media max-width:750px). Le parti pris
   d'origine était que la pastille de solde de la carte voyage tenait déjà ce rôle et menait
   à l'onglet « Règlements ». En pratique, le client qui a lu le récapitulatif jusqu'au solde
   restant n'a rien sous les yeux pour passer à l'acte : il doit remonter toute la page. Le
   bouton reprend donc sa place, juste sous le tableau — là où il se trouve déjà dans le
   balisage, aucune modification de gabarit n'est nécessaire.

   `display: flex` et non `block` : c'est la valeur de la règle de base (.ep-recap__cta), qui
   centre le libellé et gère l'espacement de l'icône. Un `display: block` casserait
   l'alignement.

   Le seuil reprend exactement celui de la règle neutralisée. surcharge.css étant chargé
   après style.css, la spécificité est identique et c'est l'ordre qui tranche.

   Ne concerne que le modificateur --solde : les CTA des devis (valider / réactiver) n'ont
   jamais été masqués en mobile. */
@media (max-width: 750px) {
    .ep-recap__cta--solde {
        display: flex;
    }
}

/* Récapitulatif de voyage suivant le défilement — 06/08/2026, desktop uniquement.

   Le récapitulatif accompagne la lecture de la colonne de gauche, qui est longue
   (accordéon des rubriques, formulaire de validation). Il reste donc visible pendant tout
   le défilement au lieu de disparaître dès les premières lignes.

   DEUX RÈGLES, ET LA PREMIÈRE EST INDISPENSABLE.
   `.ep-order__cols` est en `align-items: flex-start` : la colonne de droite prend la
   hauteur de son contenu, et non celle de la ligne. Un `position: sticky` posé sur le
   récapitulatif n'aurait alors AUCUNE course possible — un élément collant ne se déplace
   que dans les limites de son parent. Il faut donc d'abord étirer la colonne sur toute la
   hauteur de la ligne (`align-self: stretch`), ce qui est invisible puisqu'elle n'a pas de
   fond, puis rendre le récapitulatif collant à l'intérieur.

   Desktop seulement : en dessous de 1000px la page passe sur une seule colonne et le
   récapitulatif s'insère dans le flux, où un comportement collant n'a pas de sens. Le seuil
   reprend exactement celui de la bascule, déclarée dans src/templates/ep-order.pcss.

   L'écart de 24px suffit : l'en-tête du site n'est ni fixe ni collant, il défile avec la
   page. Aucune superposition à prévoir.

   Écrit ici plutôt que dans les sources .pcss : surcharge.css est chargé tel quel par
   layout.html, la correction ne dépend donc pas d'une recompilation des assets — laquelle
   est cassée depuis août 2025 (voir CLAUDE.md). */
@media (min-width: 1001px) {
    .ep-order__side {
        align-self: stretch;
    }

    .ep-recap {
        position: -webkit-sticky;
        position: sticky;
        top: 24px;
    }
}

/* Onglets « Détails / Réglements » de la page devis — 06/08/2026.
   Alignés à GAUCHE, conformément aux maquettes Figma « Devis en cours (page valider mon
   devis) » et « Devis en cours (expiré - réactiver mon devis) ». Le composant ep-tabs est
   partagé avec la page d'un voyage réservé, où les onglets sont répartis sur la largeur :
   la surcharge est donc portée par le modificateur --quote pour ne pas déplacer l'autre
   écran. Les deux écritures (flex et inline-block) sont couvertes, le composant pouvant
   utiliser l'une ou l'autre selon la feuille compilée. */
.ep-tabs--quote .ep-tabs__nav {
    justify-content: flex-start;
    text-align: left;
}

.ep-tabs--quote .ep-tabs__tab {
    flex: 0 0 auto;
}

/* ===========================================================================
   « Mes précédents voyages » — alignement sur la maquette Figma du 02/09/2026
   (nœud 4033:1665, écran Accueil).

   Tout est porté par `.ep-dash__section--archives`. Le composant `ep-card` est partagé avec
   « Mes voyages en cours », dont la maquette n'a pas changé : sans ce préfixe, chaque valeur
   ci-dessous déplacerait aussi cet autre bloc.

   Écrit dans surcharge.css et non dans src/templates/ep-dashboard.pcss : ce fichier est
   chargé tel quel par layout.html, après style.css. La correction ne dépend donc pas d'une
   recompilation des assets, cassée depuis août 2025 (voir CLAUDE.md).
   =========================================================================== */

/* Titre de carte : 28px/32px dans la maquette, contre 24px/1.15 dans la règle de base. */
.ep-dash__section--archives .ep-card__title {
    font-size: 28px;
    line-height: 32px;
}

/* Vignette carrée. La règle de base s'arrête à `min-height: 190px`, ce qui donne une carte
   plus basse que la maquette quand le titre tient sur une seule ligne. 214px est la valeur
   du composant, et c'est aussi la largeur : la vignette est donc bien carrée. */
.ep-dash__section--archives .ep-card__photo {
    min-height: 214px;
}

/* État sans photo — le seul possible ici, le CRM ne rendant aucune image pour les archives.
   Fond crème #F6F4F0 à 84 %, repris de la maquette. L'illustration porte ses propres
   couleurs (voir archive-illustration.html) : rien à hériter d'ici. */
.ep-card__photo--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(246, 244, 240, .84);
}

/* TAILLE DE L'ILLUSTRATION — ne pas confondre avec le cadre qui la porte dans Figma.
   Le cadre mesure bien 143px, mais le dessin n'en occupe que le centre : environ 80 × 83,
   soit un peu plus du tiers de la vignette de 214. Dimensionner le SVG à 143 le ferait
   paraître nettement plus gros que sur la maquette — c'était le cas de la première version.
   Les maxima en pourcentage ne servent qu'aux vignettes plus petites, le format mobile
   notamment ; en poste de travail ils ne s'appliquent pas. */
.ep-card__illus {
    width: 83px;
    height: 86px;
    max-width: 45%;
    max-height: 45%;
}

/* Espacement des années.

   POURQUOI DES MARGES NÉGATIVES. L'intitulé d'année est une rangée de la grille
   (`grid-column: 1 / -1`), et une grille applique le même `gap` — ici 48px — entre TOUTES
   ses rangées. Or la maquette demande deux écarts différents : 48px entre deux groupes
   d'années, mais 24px entre un intitulé et ses propres cartes. Une grille ne sait pas faire
   cette distinction ; la seule façon de resserrer une rangée est de reprendre la différence
   en marge.

   - `margin-top: 0` : le gap de 48px suffit à séparer les groupes (la règle de base ajoutait
     24px, ce qui donnait 72px).
   - `margin-bottom: -24px` : ramène les 48px du gap à 24px sous l'intitulé (la règle de base
     ajoutait 16px, ce qui donnait 64px).

   Le premier intitulé n'a pas de rangée au-dessus de lui : son écart au titre de section
   vient donc entièrement de la marge, rétablie à 24px pour retrouver les 48px de la
   maquette (24px de `margin-bottom` du titre + 24px ici). */
.ep-dash__section--archives .ep-dash__year {
    margin-top: 0;
    margin-bottom: -24px;
}

.ep-dash__section--archives .ep-dash__grid > .ep-dash__year:first-child {
    margin-top: 24px;
}

/* Bouton « Voir plus » — même respiration que le reste du bloc.

   La règle de base pose `margin: 32px auto 0`. Or ce bloc respire à 48px : c'est l'écart
   entre le titre et la première année, et entre deux groupes d'années. Le bouton suit.

   Pas de marge basse : l'espacement sous le bouton est laissé à l'élément qui vient ensuite
   — le bloc déplié quand il est ouvert, le bandeau d'aide quand il est fermé. Le
   `margin-top: 24px` que le gabarit posait en ligne sur le bloc déplié a par ailleurs été
   retiré : deux sources concurrentes pour un même écart, dont l'une échappait à cette
   feuille. */
.ep-dash__section--archives .ep-dash__more {
    margin-top: 48px;
    margin-bottom: 0;
}

/* Chevron : vers le bas quand le bloc est replié, vers le haut quand il est déplié.
   Une rotation plutôt qu'un second tracé — c'est la même flèche, et l'animation rend la
   bascule lisible. Posé sur `.ep-dash__more` sans préfixe : les trois boutons du tableau de
   bord (devis, voyages, archives) partagent ce composant et le même défaut. */
.ep-dash__more svg {
    transition: transform .2s;
}

.ep-dash__more.is-open svg {
    transform: rotate(180deg);
}

/* « Mes voyages » — 40px sous le bouton « Voir plus », UNIQUEMENT une fois le bloc déplié.

   Le bloc révélé (#allBookings) suit immédiatement le bouton dans le balisage : replié, il
   n'occupe aucune place et une marge basse ne ferait que décoller le bouton du bandeau
   suivant. Dépliée, elle fait exactement ce qu'on lui demande — séparer le bouton des cartes
   qu'il vient d'ouvrir. D'où la marge portée par `.is-open`, et non par le bouton lui-même.

   `#btn_all_bookings` et non une classe : les trois boutons du tableau de bord — devis,
   voyages, archives — partagent `.ep-dash__more`, et la demande ne vise que celui des
   voyages. L'identifiant est le seul sélecteur qui les distingue, la section « Mes voyages »
   ne portant pas de modificateur (contrairement à `--archives`).

   Sa spécificité (1,1,0) l'emporte sur la règle de base `.ep-dash__more { margin: 32px auto 0 }`
   de ep-dashboard.pcss : la marge basse de 0 est bien remplacée. Écrit ici plutôt que dans les
   sources .pcss — surcharge.css est chargé tel quel par layout.html, la correction ne dépend
   donc pas d'une recompilation des assets, cassée depuis août 2025 (voir CLAUDE.md). */
#btn_all_bookings.is-open {
    margin-bottom: 40px;
}

/* ===========================================================================
   OMBRE ET ARRONDI DES VIGNETTES DU TABLEAU DE BORD — 28/09/2026.

   Trois rubriques concernées : « Mes devis en cours », « Mes voyages en cours » et
   « Mes précédents voyages ».

   CE QUI MANQUAIT N'EST PAS CE QU'ON CROIT. L'arrondi de 10px et une ombre étaient déjà
   posés, dans ep-dashboard.pcss, sur `.ep-devis__media` et `.ep-card`. Mais l'ombre y vaut
   `0 0 8px` — la moitié du flou demandé. Les vignettes paraissaient donc plates sans
   qu'aucune règle ne soit absente : elle était seulement deux fois trop discrète.

   EN REVANCHE, IL MANQUAIT VRAIMENT QUELQUE CHOSE EN MOBILE. Sous 750px, la feuille de base
   pose `.ep-devis__media { display: contents }` : le conteneur disparaît de la mise en page,
   et avec lui SON arrondi et SON ombre. L'image, la barre et le texte deviennent frères
   directs de `.ep-devis`. Sur téléphone, les vignettes des devis et des voyages n'avaient
   donc ni arrondi ni ombre du tout — quelle que soit la valeur écrite sur le conteneur. Le
   bloc mobile plus bas traite ce cas en portant le style sur l'image elle-même.

   Écrit ici plutôt que dans les sources .pcss : surcharge.css est chargé tel quel par
   layout.html, après style.css. La correction ne dépend donc pas d'une recompilation des
   assets, cassée depuis août 2025 (voir CLAUDE.md). Valeurs en littéral : ce fichier ne
   passe pas par PostCSS, les `var(--…)` n'y résolvent à rien.
   =========================================================================== */

/* Devis et voyages en cours : le conteneur média porte l'image ET la barre (pastille + CTA).
   C'est lui la vignette au sens visuel, pas la seule image. */
.ep-devis__media {
    border-radius: 10px;
    box-shadow: 0 0 16px 0 rgba(51, 51, 51, 0.20);
}

/* Précédents voyages : ici la vignette est la carte entière — photo à gauche, texte à droite,
   réunis par un `overflow: hidden` qui arrondit déjà la photo. Poser l'ombre sur la seule
   `.ep-card__photo` la ferait rogner par ce même `overflow`, donc invisible. */
.ep-card {
    border-radius: 10px;
    box-shadow: 0 0 16px 0 rgba(51, 51, 51, 0.20);
}

/* MOBILE — voir l'explication ci-dessus : `.ep-devis__media` n'existe plus comme boîte sous
   750px. Le style passe sur l'image, seule à représenter la vignette à ce format.
   Le seuil reprend exactement celui de la bascule déclarée dans ep-dashboard.pcss. */
@media (max-width: 750px) {
    .ep-devis__img {
        border-radius: 10px;
        box-shadow: 0 0 16px 0 rgba(51, 51, 51, 0.20);
    }
}

/* MOBILE — RENDRE LA MAIN AUX RÈGLES DE BASE.

   En dessous de 750px, ep-dashboard.pcss empile déjà la carte (`flex-direction: column`) et
   étale la vignette sur toute la largeur avec `min-height: 0` et `aspect-ratio: 329 / 214`.

   Or une media query n'ajoute AUCUNE spécificité : mes deux règles ci-dessus, préfixées par
   `.ep-dash__section--archives` (0,2,0), l'emportent sur `.ep-card__photo` (0,1,0) même à
   l'intérieur de cette media query. Sans ce bloc, la vignette conserverait donc ses 214px
   de hauteur minimale en mobile, ce qui neutralise l'`aspect-ratio` et donne une bande
   nettement trop haute.

   `min-height: 0` restitue exactement la valeur de base. Le titre revient lui aussi à la
   valeur du composant : la maquette 28px/32px est celle du poste de travail, et aucune
   maquette mobile n'a été fournie — inventer une troisième valeur serait un choix
   arbitraire de plus à maintenir. */
@media (max-width: 750px) {
    .ep-dash__section--archives .ep-card__photo {
        min-height: 0;
    }

    .ep-dash__section--archives .ep-card__title {
        font-size: 24px;
        line-height: 1.15;
    }
}

/* ===========================================================================
   PAGE DE CONFIRMATION DE PAIEMENT — maquettes Figma 21:200 (desktop) et 405:8143 (mobile).

   Valeurs reprises de la maquette : cartes Sand #F6F4F0 à rayon 20px, titres Montserrat
   Bold 18px, textes 14px, boutons Noir Intrepid #222 en pilule de 45px.

   La bande d'étapes de la maquette n'a pas de styles ici : elle n'est pas reprise, le
   client de l'espace personnel n'ayant traversé aucune de ces étapes (voir le gabarit).
   =========================================================================== */
.ep-confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 20px 64px;
}

.ep-confirm__photo {
    width: 160px;
    height: auto;
    margin-bottom: 24px;
}

.ep-confirm__title {
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.3;
    color: #222222;
    margin: 0 0 12px;
}

.ep-confirm__file {
    font-size: 14px;
    color: #222222;
    margin-bottom: 16px;
}

.ep-confirm__text {
    max-width: 620px;
    font-size: 14px;
    line-height: 1.6;
    color: #222222;
    margin: 0 0 32px;
}

/* CTA principal : pilule rouge de la maquette, à ne pas confondre avec les deux boutons
   noirs des cartes, qui sont secondaires. */
.ep-confirm__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 12px 29px;
    border-radius: 200px;
    background: #ff2828;
    color: #ffffff;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background-color .2s;
}

.ep-confirm__cta:hover {
    background: #222222;
    color: #ffffff;
}

/* Une seule carte depuis le retrait du bloc newsletter (10/09/2026). La grille à deux
   colonnes est donc remplacée par une colonne centrée et bornée : conservée telle quelle,
   elle aurait laissé la carte du conseiller occuper la moitié gauche de la page, avec un
   vide à droite. La largeur reprend celle d'une carte de la maquette. */
.ep-confirm__cards {
    display: grid;
    grid-template-columns: minmax(0, 499px);
    justify-content: center;
    gap: 32px;
    width: 100%;
    margin-top: 56px;
}

.ep-confirm__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    padding: 22px 38px 30px;
    border-radius: 20px;
    background: #f6f4f0;
}

.ep-confirm__icon {
    width: 56px;
    height: 56px;
    color: #ff2828;
}

.ep-confirm__card-title {
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #222222;
}

.ep-confirm__card-text {
    font-size: 14px;
    line-height: 1.5;
    color: #222222;
    margin: 0;
}

/* `margin-top: auto` colle les deux boutons en bas de leurs cartes : les textes n'ayant pas
   le même nombre de lignes, ils seraient sinon décalés verticalement l'un par rapport à
   l'autre. */
.ep-confirm__card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-top: auto;
    min-height: 45px;
    padding: 10px 29px;
    border-radius: 20px;
    background: #222222;
    color: #ffffff;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background-color .2s;
}

.ep-confirm__card-cta:hover {
    background: #ff2828;
    color: #ffffff;
}

.ep-confirm__card-cta svg {
    width: 20px;
    height: 20px;
    flex: none;
}

/* Mobile — maquette 405:8143 : une seule colonne, cartes empilées. Le seuil reprend celui
   du reste du tableau de bord plutôt que la largeur de la maquette (320px), qui est un
   format de rendu et non un point de bascule. */
@media (max-width: 750px) {
    .ep-confirm {
        padding: 32px 16px 48px;
    }

    .ep-confirm__title {
        font-size: 20px;
    }

    .ep-confirm__cards {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 40px;
    }

    .ep-confirm__card {
        padding: 22px 20px 26px;
    }

    /* Sous 360px, un bouton à 29px de marge intérieure et 16px de texte déborde de sa
       carte : le libellé « S'inscrire à la newsletter » ne tient pas. */
    .ep-confirm__card-cta,
    .ep-confirm__cta {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ===========================================================================
   PAGE D'ÉCHEC DE PAIEMENT — maquettes Figma 233:5407 (desktop) et 234:6467 (mobile).

   Elle partage la mise en page de la confirmation — colonne centrée, mêmes typographies,
   même pilule rouge — mais pas ses classes : une seule carte d'aide au lieu de deux, et une
   illustration au trait plutôt qu'une photographie. Les mutualiser aurait imposé des
   modificateurs sur presque chaque règle, pour deux pages qui peuvent évoluer séparément.
   =========================================================================== */
.ep-payerr {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 20px 64px;
}

.ep-payerr__illus {
    width: 120px;
    height: 100px;
    color: #222222;
    margin-bottom: 28px;
}

.ep-payerr__title {
    max-width: 520px;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.35;
    color: #222222;
    margin: 0 0 12px;
}

.ep-payerr__file {
    font-size: 14px;
    color: #222222;
    margin-bottom: 16px;
}

.ep-payerr__text {
    max-width: 620px;
    font-size: 14px;
    line-height: 1.6;
    color: #222222;
    margin: 0 0 32px;
}

.ep-payerr__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 12px 29px;
    border-radius: 200px;
    background: #ff2828;
    color: #ffffff;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background-color .2s;
}

.ep-payerr__cta:hover {
    background: #222222;
    color: #ffffff;
}

.ep-payerr__help {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 620px;
    margin-top: 56px;
    padding: 24px 32px 28px;
    border-radius: 20px;
    background: #f6f4f0;
}

.ep-payerr__help-photo {
    width: 140px;
    height: auto;
}

.ep-payerr__help-title {
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #222222;
}

.ep-payerr__help-text {
    font-size: 14px;
    line-height: 1.5;
    color: #222222;
    margin: 0;
}

/* Pilule BLANCHE sur le fond sable de la carte, contrairement aux boutons noirs de la page
   de confirmation : c'est ce que montre la maquette, et le contraste avec le fond suffit. */
.ep-payerr__help-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 24px;
    border-radius: 200px;
    background: #ffffff;
    color: #222222;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.ep-payerr__help-cta:hover {
    background: #222222;
    color: #ffffff;
}

.ep-payerr__help-cta svg {
    width: 20px;
    height: 20px;
    flex: none;
}

@media (max-width: 750px) {
    .ep-payerr {
        padding: 32px 16px 48px;
    }

    .ep-payerr__title {
        font-size: 18px;
    }

    .ep-payerr__help {
        margin-top: 40px;
        padding: 24px 20px;
    }

    /* Le numéro de téléphone est passé en `nowrap` : sur la maquette mobile il se coupe en
       « 04 81 68 55 / 60 », ce qui rend un numéro illisible. */
    .ep-payerr__cta,
    .ep-payerr__help-cta {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        white-space: nowrap;
    }
}

/* Message qui remplace le bloc d'engagement quand le client n'est pas le voyageur principal
   du dossier (account/views/order-tab-quote-form.html).
   Fond sable et non rouge : ce n'est pas une erreur ni un refus, c'est une information sur
   qui doit agir. Les couleurs sont écrites en dur — surcharge.css ne passe pas par PostCSS,
   les variables --color-* n'y résolvent à rien. */
.ep-reserve__notice {
    padding: 20px 24px;
    border-radius: 10px;
    background: #f6f4f0;
    border-left: 4px solid #d8cab6;
    color: #222222;
    font-size: 14px;
    line-height: 1.6;
}

.ep-reserve__notice strong {
    display: block;
    margin-bottom: 6px;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 16px;
}

/* Message d'indisponibilité du CRM sur le tableau de bord (account/views/orders.html).
   Ton d'information et non d'erreur : le client n'a rien fait de mal et ses voyages ne sont
   pas perdus. Couleurs en dur — surcharge.css ne passe pas par PostCSS. */
.ep-dash__empty--indispo {
    padding: 16px 20px;
    border-radius: 10px;
    background: #f6f4f0;
    border-left: 4px solid #d8cab6;
    line-height: 1.6;
}

.ep-dash__empty--indispo strong {
    display: block;
    margin-bottom: 4px;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-weight: 700;
}

.ep-navbar__logout .dropdown-item {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
/* ---------------------------------------------------------------------------------------
   « PRÉPARER VOTRE VOYAGE » — HIÉRARCHIE DES TITRES RÉTABLIE, 28/09/2026.

   Les grands titres de rubrique de SAGA (« Détail du voyage », « Équipement »,
   « Formalités & santé ») étaient BIEN affichés : order-tab-quote-informations.html rend
   `@category.label` dans un `h2.heading`, et la préproduction le confirme — les trois
   sections existent dans le DOM.

   Ce qui manquait, c'était le POIDS VISUEL. Les valeurs relevées sur la page :

     titre de rubrique  .ep-info__section > .heading   14 px / 400 / majuscules
     titre de champ     .ep-info__section .subheading  16 px / 600 / casse normale

   Le titre chapeau était donc plus petit ET plus fin que les sous-titres qu'il
   chapeaute — « ÉQUIPEMENT » en petites capitales fines au-dessus de « Matériel fourni
   sur place » en 16 px semi-gras se lit comme une étiquette, pas comme un titre. La
   hiérarchie était inversée, d'où l'impression que la donnée n'était pas remontée.

   On passe le titre de rubrique en 20 px gras, casse normale (celle que SAGA envoie), ce
   qui le place franchement au-dessus du 16 px/600 des champs. Les majuscules sont
   abandonnées : en 20 px gras elles crieraient, et « Formalités & santé » y perdrait son
   accent bas de casse.

   Les DEUX sélecteurs sont repris parce que style.css pose la taille et la graisse sur le
   `h2` ET sur le `span.label` qu'il contient ; ne corriger que l'un des deux laisserait
   l'autre gagner. À spécificité égale, c'est surcharge.css qui l'emporte : il est chargé
   après style.css par layout.html.
   --------------------------------------------------------------------------------------- */
.ep-info__section > .heading,
.ep-info__section > .heading > .label {
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
    color: #222222;
}

.ep-info__section > .heading {
    margin: 0 0 20px;
}

/* ---------------------------------------------------------------------------------------
   JOUR PAR JOUR — DESCRIPTION REPLIÉE À DEUX LIGNES, 28/09/2026.

   Le repli est fait ici, et non en tronquant la chaîne côté PHP : le texte complet reste
   dans le document. Il est donc lu en entier par un lecteur d'écran, trouvé par le Ctrl+F
   du navigateur et imprimé en entier, alors qu'une coupe serveur à N caractères
   supprimerait la fin du texte et risquerait de couper au milieu d'un mot ou d'une balise
   `<br>` produite par nl2br().

   `-webkit-line-clamp` est préfixé mais interprété par tous les navigateurs visés, Firefox
   compris depuis la version 68 : c'est le mécanisme standard de troncature multiligne. Les
   trois propriétés vont ensemble — sans `display:-webkit-box` ni `box-orient:vertical`, le
   clamp est ignoré et le texte s'affiche en entier (dégradation acceptable : le client voit
   tout, il perd seulement le repli).

   Voir order-tab-quote-program.html pour le bouton : il reste `hidden` tant que le script
   n'a pas constaté que le texte DÉBORDE réellement de ses deux lignes.
   --------------------------------------------------------------------------------------- */
.ep-timeline__descr {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* État déplié. `-webkit-line-clamp: unset` ne suffit pas seul sur les moteurs WebKit
   anciens : on repasse aussi en `display:block`, ce qui désactive le mécanisme de clamp
   dans son ensemble. */
.ep-timeline__descr.is-open {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Pilule noire à texte blanc, reprise du bouton « Voir plus » du tableau de bord
   (`.ep-dash__more`) : mêmes couleurs #222 → #ff2828 au survol, même rayon de 200px, même
   graisse 600 Montserrat.
   IL EST PLUS PETIT QUE L'ORIGINAL, et c'est volontaire : celui de l'accueil est unique en
   fin de bloc, celui-ci se répète une fois par journée à l'intérieur d'un texte. Sur un
   circuit de quinze jours, quinze pilules pleine taille pèseraient plus lourd que le
   programme lui-même. D'où 13px / padding 6px 16px au lieu de 16px / 12px 24px.

   CENTRAGE — les deux centrages sont distincts et demandent chacun leur propriété :
     - le libellé dans la pilule : `justify-content: center` (le conteneur est en flex) ;
     - la pilule dans la colonne : `margin-left/right: auto`, ce qui exige `display: flex`
       et une largeur `fit-content`. En `inline-flex`, la marge automatique n'a aucun effet
       — l'élément reste dans le fil du texte et se colle à gauche. */
.ep-timeline__readmore {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Les deux préfixes accompagnent la valeur standard, comme le fait déjà `.ep-dash__more`
       dans style.css : sans eux, la largeur retomberait sur 100 % et la pilule occuperait
       toute la colonne au lieu de se centrer. */
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 12px auto 0;
    padding: 6px 16px;
    border: 0;
    border-radius: 200px;
    background: #222222;
    color: #ffffff;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s;
}

.ep-timeline__readmore:hover,
.ep-timeline__readmore:focus {
    background: #ff2828;
    color: #ffffff;
    text-decoration: none;
}

/* `hidden` doit l'emporter sur le `display:inline-block` ci-dessus : sans cette règle,
   l'attribut HTML `hidden` (dont la feuille de style du navigateur ne fait qu'un
   `display:none` de très faible priorité) serait écrasé, et tous les boutons
   apparaîtraient — y compris ceux des journées décrites en une phrase. */
.ep-timeline__readmore[hidden] {
    display: none;
}

/* Date calendaire sous le titre du jour (jour par jour) — 28/09/2026.

   Valeurs choisies par rapport aux trois niveaux déjà en place dans le fil :
     titre du jour  .ep-timeline__title  24px / 700
     DATE           .ep-timeline__date   14px / 600   <- ici
     étiquettes     .ep-timeline__tag    12px / 600 / majuscules
     description    .ep-timeline__descr  14px / 400

   Même corps que la description mais en semi-gras, et sans majuscules : la date se lit
   comme un sous-titre du jour, pas comme une étiquette de plus. En 12px majuscules elle
   se serait confondue avec la rangée « Transport / Marche / Hébergement » juste en
   dessous ; en 16px ou plus elle aurait concurrencé le titre.
   Noir #222 comme demandé — et non le rouge de la pastille « JOUR 1 », qui est le seul
   accent coloré de la timeline et doit le rester. */
.ep-timeline__date {
    margin: 6px 0 0;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #222222;
}

/* ---------------------------------------------------------------------------------------
   BOUTON « REMONTER EN HAUT DE PAGE » — 28/09/2026. Gabarit : apps/front/views/layout.html.

   FORME, POSITION, COULEUR — tout est repris du vocabulaire déjà en place, rien n'est
   inventé :
     - pastille ronde de 48px. Le site n'a que des formes très arrondies (pilules à
       `border-radius: 200px` des boutons, cartes à 10 et 20px) ; un carré à angles vifs
       serait le seul de la page. À 48px, la cible dépasse les 44px recommandés au doigt.
     - fond #222 (Noir Intrepid), flèche blanche, survol #ff2828 (Primary/Intrepid Red) :
       exactement le couple du bouton « Voir plus » du tableau de bord et des CTA des
       cartes. Le rouge n'est utilisé qu'au survol, il reste un accent.
     - ombre `0 0 16px rgba(51,51,51,.20)`, la même valeur que les vignettes du tableau de
       bord : c'est ce qui le détache du texte qu'il survole.
     - en bas à DROITE. À gauche il gênerait la lecture (le regard y revient à chaque
       ligne) ; centré, il masquerait le contenu. 24px des deux bords, soit la gouttière
       courante du projet.

   `position: fixed` et non `sticky` : il doit rester à portée sur toute la hauteur de la
   page, indépendamment de son conteneur.

   `z-index: 900` : au-dessus du contenu, mais SOUS les couches modales — `.dialog-root` et
   les messages applicatifs montent plus haut. Un bouton flottant par-dessus une boîte de
   dialogue est un défaut classique de ce composant.
   --------------------------------------------------------------------------------------- */
.ep-totop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #222222;
    color: #ffffff;
    box-shadow: 0 0 16px 0 rgba(51, 51, 51, 0.20);
    cursor: pointer;
    transition: background-color .2s, transform .2s;
}

.ep-totop svg {
    width: 20px;
    height: 20px;
}

.ep-totop:hover,
.ep-totop:focus {
    background: #ff2828;
    color: #ffffff;
}

/* Anneau de focus explicite : le contour par défaut du navigateur disparaît presque
   entièrement sur un fond noir. Sans lui, un client naviguant au clavier ne sait plus où
   il se trouve. */
.ep-totop:focus-visible {
    outline: 2px solid #222222;
    outline-offset: 3px;
}

/* Le léger soulèvement est purement décoratif : il est retiré pour qui demande moins
   d'animation, alors que le changement de couleur, lui, porte l'information et reste. */
.ep-totop:hover {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .ep-totop {
        transition: background-color .2s;
    }

    .ep-totop:hover {
        transform: none;
    }
}

/* `hidden` doit l'emporter sur le `display:flex` ci-dessus — même motif que le bouton
   « Lire plus » du jour par jour. */
.ep-totop[hidden] {
    display: none;
}

/* Mobile : un peu plus petit et plus près des bords, l'espace y est compté. Le seuil
   reprend celui du reste du projet. */
@media (max-width: 750px) {
    .ep-totop {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }

    .ep-totop svg {
        width: 18px;
        height: 18px;
    }
}

/* Montant de l'acompte d'un devis : champ en lecture seule — 29/09/2026.
   Bootstrap grise déjà les champs `readonly` (#e9ecef), mais d'un gris d'interface étranger
   à la palette du site. On reprend le sable #F6F4F0 employé par les cartes et les encarts.
   Le curseur `default` et l'absence de `cursor: text` évitent l'invitation à cliquer ; la
   bordure reste visible pour que le champ se lise toujours comme un champ de formulaire —
   le supprimer visuellement ferait croire à une donnée manquante. */
#qp_amount[readonly] {
    background-color: #f6f4f0;
    color: #222222;
    cursor: default;
}

#qp_amount[readonly]:focus {
    box-shadow: none;
    border-color: #ced4da;
}

/* ---------------------------------------------------------------------------------------
   ENCART « BESOIN D'AIDE ? UNE QUESTION ? » — DESKTOP UNIQUEMENT, 30/09/2026.

   `.ep-help` est l'encart sable de la colonne de droite d'un dossier : picto conseiller,
   nom du conseiller référent, son e-mail et son téléphone direct (account/views/order-help.html).

   Il est masqué sous 750px parce que le pied de page porte déjà `.ep-helpband`, un bloc
   contact au libellé identique. En mobile, les deux se suivaient à quelques centimètres
   d'écart sur une page d'une seule colonne : le client lisait deux fois « Besoin d'aide ?
   Une question ? », avec deux numéros différents — le direct du conseiller puis le
   standard —, sans savoir lequel appeler.

   HISTORIQUE, PARCE QU'IL COMPTE ICI. C'est le troisième réglage de ce bloc : masqué à
   l'origine pour ce motif, puis réaffiché et placé en dernier (`order: 5`, voir le bloc de
   réordonnancement de ep-order.pcss), il est de nouveau masqué. Le `order: 5` devient donc
   inerte ; il est laissé en place plutôt que retiré, ep-order.pcss n'étant de toute façon
   plus recompilé (voir CLAUDE.md) et servant de référence de lecture.

   PORTÉE : le seuil de 750px est celui de tout le projet. Le préfixe `.ep-order` n'est pas
   nécessaire — `order-help.html` n'est inclus que par la page d'un dossier — mais il porte
   la spécificité à (0,2,0) contre (0,1,0), ce qui met la règle à l'abri de l'ordre des
   fichiers. Ce fichier a déjà un précédent sur ce piège, voir `.ep-order-card`.
   --------------------------------------------------------------------------------------- */
@media (max-width: 750px) {
    .ep-order .ep-help {
        display: none;
    }
}