/* ============================================================================
   RD Ajustments — site grand public
   (chargé en dernier via style.css pour surcharger proprement le CSS mockup)
   ============================================================================ */

/* ============================================================================
   Orientation des organisateurs vers le site pro — 2 dispositifs :
   1. .topbar-pro   : barre fine au-dessus du header, toutes pages, tous écrans
   2. .home-pro_card : encart visuel en bas de la home
   ============================================================================ */

/* ============================================================================
   Hero de la home : conteneur légèrement élargi (800 → 845px) pour que le
   « : » du titre tienne sur la même ligne que « Dunkerque » au lieu de
   passer à la ligne (l'espace française avant « : » est un point de coupure).
   ============================================================================ */
.hero.home .hero_caption-inner {
    max-width: 1270px !important;
}

/* ============================================================================
   Header fixe (réapparaît au scroll vers le haut) : fond bleu Kursaal
   (--color-dark), identique au site pro, pour bien se détacher du contenu.
   ============================================================================ */
.header_scrolled {
    background-color: var(--color-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header_scrolled.is-active {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
/* le menu ouvert garde son header transparent */
.header_scrolled.open {
    background-color: transparent;
    border-bottom: none;
    box-shadow: none;
}

/* ----- 1. Barre d'orientation (collée en haut à droite, sans bande) ----- */
.topbar-pro {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
    width: fit-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 9px 47px;
    background-color: var(--color-primary-6);
    color: var(--color-light);
    font-size: 13px;
    letter-spacing: 0.2px;
    text-align: right;
    transition: background-color 0.25s;
}
.topbar-pro strong {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Bouton « Organiser un évènement » du header : fond bleu Kursaal */
.header_wrap-cta a.cta_site {
    background-color: var(--color-dark);
    box-shadow: inset 0 0 0 1px var(--color-dark);
    color: var(--color-light);
}
.no-touch .header_wrap-cta a.cta_site:hover {
    background-color: #013461;
    box-shadow: inset 0 0 0 1px #013461;
    color: var(--color-light);
}
.topbar-pro i {
    font-size: 14px;
    transition: transform 0.25s;
}
.no-touch .topbar-pro:hover {
    background-color: #a75377;
    color: var(--color-light);
}
.no-touch .topbar-pro:hover i {
    transform: translateX(4px);
}

/* ----- 2. Encart pro en bas de la home ----- */
.home-pro_card {
    display: flex;
    align-items: flex-end;
    min-height: 380px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.3s,
        box-shadow 0.3s;
}
.home-pro_card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(2, 13, 24, 0.88) 0%,
        rgba(2, 13, 24, 0.55) 55%,
        rgba(2, 13, 24, 0.15) 100%
    );
}
.home-pro_caption {
    position: relative;
    z-index: 1;
    max-width: 600px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.home-pro_caption h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--color-light);
}
.home-pro_caption p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-grey-light);
}
.home-pro_link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-light);
    border-bottom: 2px solid var(--color-primary-6);
    padding-bottom: 4px;
}
.home-pro_link i {
    font-size: 15px;
    transition: transform 0.25s;
}
.no-touch .home-pro_card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(2, 13, 24, 0.5);
}
.no-touch .home-pro_card:hover .home-pro_link i {
    transform: translateX(4px);
}

/* ----- Responsive ----- */
@media only screen and (max-width: 991px) {
    .topbar-pro {
        font-size: 12px;
        padding: 8px 12px;
    }
    .home-pro_card {
        min-height: 280px;
    }
    .home-pro_caption {
        padding: 25px;
    }
    .home-pro_caption h2 {
        font-size: 24px;
    }
}

/* ============================================================================
   Justification globale des paragraphes de contenu (hors header/menu/footer,
   qui sont en dehors de <main>). Les titres, boutons et listes ne sont pas
   affectés.

   ⚠️ Cette règle s'applique DIRECTEMENT au <p> : elle l'emporte donc sur tout
   alignement hérité d'un conteneur. Un paragraphe placé dans un bloc centré
   repasse à gauche, et le défaut est invisible sur une seule ligne (une ligne
   justifiée = une ligne alignée à gauche). Tout contexte volontairement centré
   doit donc être ré-exclu explicitement ci-dessous.
   ============================================================================ */
main p {
    text-align: justify;
}

/* Hero : centré par son conteneur. Aucun <p> n'y figure aujourd'hui côté
   public, mais la même règle avait décentré le sous-titre de la fiche salle du
   site pro — on ferme le piège des deux côtés. */
main .hero p {
    text-align: inherit;
}

/* ============================================================================
   Fiche évènement : bloc tarifs du bandeau (« Entrée gratuite », prix…).

   Le bandeau est un flex à deux colonnes : les informations à gauche, les
   tarifs à droite. La colonne de droite s'étire bien sur toute la hauteur, mais
   son CONTENU restait collé en haut (justify-content par défaut) : le badge
   était mesuré 12 px au-dessus du centre du bandeau.

   Le décalage sautait aux yeux surtout sans horaire saisi : la colonne de
   gauche est alors plus courte, et le désalignement devient visible.
   ============================================================================ */
.calendar_cta-rates {
    justify-content: center;
}

/* ============================================================================
   Affiches d'évènements : plus AUCUN rognage.

   Historique : le cadre héritait du mockup en ratio 1/1.25, alors qu'AUCUNE
   affiche du site n'est à ce format (elles sont toutes plus hautes). Avec
   `object-fit: cover`, il manquait donc systématiquement ~20 % de l'affiche.
   Le cadrage « center top » posé précédemment déplaçait simplement la coupe du
   haut vers le bas (bandeau de date, logos partenaires, mentions légales),
   sans jamais la supprimer.

   Correctif en deux temps : on cale le cadre sur le format réel des affiches
   (voir 1.), puis on passe en `object-fit: contain` (voir 2.) pour que rien ne
   soit jamais rogné, y compris si un visuel hors format est déposé un jour.

   Point technique : le ratio était porté par le <img> (agenda.css:393/546/1324).
   En `contain`, c'est le CADRE qui doit le porter, sinon le conteneur n'a plus
   de hauteur propre et `height: 100%` sur l'image ne résout plus rien. Les
   ratios posés sur le <img> par le thème deviennent alors sans effet : ses
   deux dimensions sont définies (100 % d'un parent à hauteur connue), et
   `aspect-ratio` est ignoré dans ce cas.

   Couvre la grille agenda, la vue liste, les carrousels et la home.
   ============================================================================ */

/* 1. Le cadre porte le ratio, calé sur le format RÉEL des affiches.
      Relevé sur les 30 évènements de l'agenda (17/08/26) :
        - 27 visuels en ratio 1/1.5  (dont 26 en 533x800, taille servie par
          la synchro LabEvent — c'est donc le format de référence) ;
        -  3 visuels en ratio 1/1.414 (affiches A3/A4 déposées à la main).
      Aucun n'était en 1/1.25 : le cadre du mockup ne correspondait à aucune
      image du site, d'où la coupe systématique.

      En passant le cadre à 1/1.5, le `contain` ne coûte rien : les 27 affiches
      au format standard remplissent le cadre au pixel près (ni coupe, ni
      bande), et les 3 affiches A n'ont qu'un liseré de ~3 % en haut et en bas.
      Un ratio unique pour tous les contextes (grille, liste, carrousel,
      mobile) : toute autre valeur recréerait des bandes.

      Le fond passe du rose 50 % à une teinte neutre : invisible tant que
      l'image remplit le cadre, discret quand une bande apparaît. */
.calendar_item-img {
    aspect-ratio: 1 / 1.5;
    background-color: rgba(0, 34, 65, 0.06);
}

/* 2. L'image s'inscrit en entier dans ce cadre.
      - `aspect-ratio: auto` neutralise celui posé sur le <img> par le thème ;
      - `transform: none` retire le scale(1.005) permanent, qui rognait 0,5 %
        en permanence (le zoom au survol, lui, reste géré par agenda.css) ;
      - plus de border-radius sur l'image : le cadre est déjà en overflow
        hidden + border-radius, il découpe les angles tout seul. */
.calendar_item-img img {
    aspect-ratio: auto;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
    transform: none;
}

/* Fiche évènement : le hero reprend l'affiche verticale quand aucun visuel
   paysage n'est renseigné. La règle générique `.hero_image img` cadre déjà en
   haut, mais `.hero.zoom` la ramène au centre (style.css) — ce qui est le bon
   choix pour une photo paysage. On ne recadre donc en haut que le cas « affiche »
   (classe posée par agenda-detail.htm), pour ne pas couper le titre de l'affiche. */
.hero.zoom .hero_image--poster img {
    object-position: center top;
}

/* Cadrage du hero réglé fiche par fiche (champ « Cadrage du visuel hero »).
   Retour client du 20/08/26 : sur un portrait cadré serré, le rognage centré
   du hero coupait le visage. Ces deux règles passent APRÈS `.hero.zoom
   .hero_image img` (style.css) et après la règle « affiche » ci-dessus : le
   réglage saisi en back-office l'emporte donc dans tous les cas, y compris
   quand le hero retombe sur l'affiche verticale. */
.hero .hero_image--focus-top img,
.hero.zoom .hero_image--focus-top img {
    object-position: center top;
}
.hero .hero_image--focus-bottom img,
.hero.zoom .hero_image--focus-bottom img {
    object-position: center bottom;
}

/* ============================================================================
   Pages éditoriales (Crédits photos, mentions légales…) : débordement mobile.
   Même correctif que sur le thème pro : la fiche est commune aux deux sites
   (table reservoir_pages non scopée), donc les blocs <pre> saisis au rich
   editor débordaient ici aussi. `white-space: pre` ne revient jamais à la
   ligne : sur mobile la ligne de crédits sortait de la page et provoquait un
   défilement horizontal du document entier.
   ============================================================================ */
.page_content {
    max-width: 100%;
    overflow-wrap: break-word;
}
.page_content pre {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    margin: 0;
}
.page_content img,
.page_content table {
    max-width: 100%;
}

/* ============================================================================
   Cartes « Actualités » : un cadre de format fixe, quelle que soit l'illustration.

   Retour client du 24/08/26 : sur le carrousel de l'accueil, un article sans
   photo affichait un visuel de remplacement plus petit que ses voisins, et le
   titre remontait — la rangée perdait son alignement.

   Cause : le thème prévoit bien un cadre en 16/11 pour ces vignettes, mais la
   règle vit dans blog.css, que le gabarit de page ne charge JAMAIS (le layout
   n'appelle que normalize, bootstrap-grid, ionicons, lightgallery, swiper,
   style et ce fichier). Sans cadre, chaque image s'affiche à sa taille
   naturelle : les photos partagent la même et passent inaperçues, le visuel de
   remplacement est en 4/3 et dépasse du lot.

   Le cadre est donc reposé ici, dans le seul fichier d'ajustement réellement
   chargé — même approche que pour les cartes de l'agenda plus haut. Il vaut
   pour l'accueil comme pour la page Actualités, qui partagent ce balisage.

   `cover` et non `contain` : ces vignettes sont des photos en paysage, faites
   pour remplir le cadre. C'est l'intention d'origine du thème, et l'inverse du
   choix fait pour l'agenda, où les affiches verticales ne doivent pas être
   rognées.
   ============================================================================ */
/* La carte elle-même prend toute la largeur de sa diapositive.

   Mesuré dans le navigateur : `.blog_item` est un élément flexible en
   `flex: 0 1 auto`, sa largeur vient donc de son CONTENU et non du cadre qui
   l'accueille. Un article sans catégorie ni date a le pied de carte vide :
   son contenu le plus large est plus court, et la carte se rétrécissait
   d'autant — 300 px au lieu de 333, dans une diapositive pourtant identique
   aux autres. Le visuel de remplacement n'y était pour rien ; il rendait
   seulement l'écart visible, faute de photo pour occuper le cadre. */
.blog_item {
    width: 100%;
}

.blog_item-img {
    /* `width` explicite, et non laissée à « auto ».
       Sans elle, le navigateur a le droit de faire l'inverse de ce qu'on veut :
       déduire la LARGEUR de la hauteur du contenu via l'aspect-ratio, au lieu de
       déduire la hauteur de la largeur disponible. C'est ce qui se produisait
       pour la carte sans photo — le visuel de remplacement, plus court, donnait
       un cadre plus étroit que les autres au sein d'une diapositive pourtant de
       même largeur. Avec une largeur imposée, le sens du calcul est verrouillé. */
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: rgba(255, 255, 255, 0.04);
}
.blog_item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ============================================================================
   Ouverture du menu : plus de sursaut horizontal.

   Retour client du 26/08/26 : « quand on clique sur Menu, l'image du bandeau
   se décale très légèrement — ça le fait à chaque changement de page ».

   À l'ouverture, le menu bloque le défilement de la page
   (`body.open { overflow-y: hidden }`, style.css). La barre de défilement
   disparaît alors, la zone utile s'élargit d'une quinzaine de pixels, et toute
   la page glisse d'autant.

   Le thème masquait alors la barre, mais seulement avec
   `body::-webkit-scrollbar`, propre à Chrome et Safari : sous Firefox — le
   navigateur depuis lequel le retour a été fait — elle restait visible, et le
   sursaut avec elle. (Depuis le retour du 22/09/26, la barre s'affiche dans
   tous les navigateurs ; la règle ci-dessous n'en est que plus utile.)

   `scrollbar-gutter: stable` réserve définitivement sa place, qu'elle soit
   affichée ou non. La largeur utile ne change plus jamais, ni à l'ouverture du
   menu, ni entre deux pages de hauteurs différentes.
   ============================================================================ */
html {
    scrollbar-gutter: stable;
}

/* ============================================================================
   Filtres par catégorie de la page Actualités.

   Signalé le 30/08/26 : « des liens filtre pas beau ». Ils s'affichaient en
   liens bruts — soulignés, dans le bleu par défaut du navigateur, presque
   illisibles sur le fond sombre de la page, et collés les uns aux autres.

   La classe `.blog_filters` n'était stylée NULLE PART : ni dans style.css, ni
   dans blog.css (qui n'est de toute façon pas chargé par le layout). Le
   gabarit la posait, aucune règle ne l'accompagnait.

   On reprend donc le vocabulaire visuel des filtres de l'agenda : des pastilles
   arrondies, discrètes au repos, et la couleur d'accent rose pour celle qui est
   active. Le contraste est calculé pour le fond sombre de cette page.
   ============================================================================ */
.blog_filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 35px 0;
}
.blog_filters a {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full, 100px);
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--color-grey-light);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
.no-touch .blog_filters a:hover {
    border-color: var(--color-primary-6);
    color: var(--color-light);
}
.blog_filters a.active {
    background-color: var(--color-primary-6);
    border-color: var(--color-primary-6);
    color: var(--color-light);
}

@media only screen and (max-width: 576px) {
    .blog_filters {
        gap: 8px;
        margin: 0 0 25px 0;
    }
    .blog_filters a {
        padding: 7px 14px;
        font-size: 13px;
    }
}

/* ============================================================================
   Menu mobile : les liens secondaires reviennent à gauche.

   Signalé le 30/08/26, capture de la maquette à l'appui : « Infos Billetteries »,
   « Reports / Annulations » et « Consulter la FAQ » s'affichaient alignés à
   droite, la flèche placée AVANT le texte.

   Le thème essaie bien de les aligner à gauche sous 991 px, mais avec la
   mauvaise propriété (interface.css) :

       .menu-cancel { justify-content: flex-start; }

   Ce conteneur est en `flex-direction: column`. Sur un axe vertical,
   `justify-content` commande la répartition EN HAUTEUR : la règle n'a donc
   aucun effet horizontal, et l'`align-items: flex-end` du style de bureau
   continue de pousser les liens à droite. C'est `align-items` qu'il fallait
   redéfinir. Le bloc « pro » juste en dessous fait la même chose et fonctionne,
   lui, parce qu'il n'est pas en colonne — d'où un défaut isolé, difficile à
   remarquer.

   Le `order: -1` posé sur l'icône avait du sens tant que le texte était à
   droite : la flèche se plaçait de son côté. Aligné à gauche, il n'en a plus.
   ============================================================================ */
@media only screen and (max-width: 991px) {
    .menu-cancel {
        align-items: flex-start;
    }
    .menu-cancel a i {
        order: 0;
    }
}