/* * FICHIER CSS RÉORGANISÉ
 * Fichier : css/jp-modern-header.css
 * Rôle : En-tête du site, navigation principale et adaptations responsives.
 *
 * Organisation :
 * 1. Styles de base du module
 * 2. États et interactions
 * 3. Adaptations responsives, dans l’ordre du fichier d’origine
 *
 * Maintenance : l’ordre des règles est conservé afin de respecter la cascade CSS.
 * Les doublons strictement identiques dans un même bloc ont été supprimés. */

/* *
 * jp-modern-header.css
 * Rôle : En-tête moderne.
 *
 * Organisation du fichier :
 * 1. Variables et fondations éventuelles
 * 2. Structure principale du composant
 * 3. États, variantes et interactions
 * 4. Adaptations responsives
 *
 * Les doublons strictement identiques ont été supprimés. Les surcharges
 * volontaires et les fallbacks compatibles ont été conservés pour ne pas
 * modifier le rendu ou le comportement existant. */

/* Header JP autonome : uniquement sur les pages modernes. */

/* ==========================================================================
   Fondations et règles globales
   ========================================================================== */

body.jp-modern-header-enabled #masthead, body.jp-modern-header-enabled #ast-desktop-header, body.jp-modern-header-enabled #ast-mobile-header {
    display: none !important;
}

body.jp-modern-header-enabled .jp-modern-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 10050;
    pointer-events: none;
}

body.jp-modern-header-enabled .jp-modern-header__inner {
    width: min(1760px, calc(100% - 32px));
    margin: 0 auto;
    padding: 14px 0 0;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: start;
    gap: 22px;
    pointer-events: none;
}

body.jp-modern-header-enabled .jp-modern-header__brand, body.jp-modern-header-enabled .jp-modern-header__nav, body.jp-modern-header-enabled .jp-modern-header__toggle {
    pointer-events: auto;
}

body.jp-modern-header-enabled .jp-modern-header__brand {
    position: relative;
    z-index: 2;
}

body.jp-modern-header-enabled .jp-modern-header__brand .custom-logo-link {
    display: inline-block;
}

body.jp-modern-header-enabled .jp-modern-header__brand .custom-logo {
    display: block;
    width: auto;
    max-width: 145px;
    max-height: 108px;
    object-fit: contain;
}

body.jp-modern-header-enabled .jp-modern-header__brand .jp-site-slogan {
    margin-top: -6px;
}

body.jp-modern-header-enabled .jp-modern-header__nav {
    justify-self: end;
    max-width: calc(100vw - 225px);
}

body.jp-modern-header-enabled .jp-modern-menu, body.jp-modern-header-enabled .jp-modern-menu ul {
    list-style: none;
    margin: 0;
}

body.jp-modern-header-enabled .jp-modern-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    width: max-content;
    max-width: 100%;
    padding: 5px 7px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 14px;
    background: rgba(205,235,248,.88);
    box-shadow: 0 10px 28px rgba(5,37,61,.14);
    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
}

body.jp-modern-header-enabled .jp-modern-menu > li {
    position: relative;
}

body.jp-modern-header-enabled .jp-modern-menu a {
    text-decoration: none;
}

body.jp-modern-header-enabled .jp-modern-menu > li > a {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 9px;
    color: #0d3550;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
}

body.jp-modern-header-enabled .jp-modern-menu > li.menu-item-has-children > a::after {
    content: "▾";
    margin-left: 7px;
    font-size: 9px;
    opacity: .72;
}

body.jp-modern-header-enabled .jp-modern-menu > li:hover > a, body.jp-modern-header-enabled .jp-modern-menu > li:focus-within > a, body.jp-modern-header-enabled .jp-modern-menu > li.current-menu-item > a, body.jp-modern-header-enabled .jp-modern-menu > li.current-menu-ancestor > a {
    color: #fff;
    background: #0d5974;
}

body.jp-modern-header-enabled .jp-modern-menu .sub-menu {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    z-index: 10060;
    min-width: 285px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px;
    border: 1px solid rgba(13,53,80,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.985);
    box-shadow: 0 22px 55px rgba(4,35,57,.20);
    opacity: 0;
    visibility: hidden;
    transform: translateY(7px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

body.jp-modern-header-enabled .jp-modern-menu li:hover > .sub-menu, body.jp-modern-header-enabled .jp-modern-menu li:focus-within > .sub-menu, body.jp-modern-header-enabled .jp-modern-menu li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body.jp-modern-header-enabled .jp-modern-menu .sub-menu a {
    display: block;
    margin: 2px 0;
    padding: 9px 12px;
    border-radius: 9px;
    color: #163d55;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
}

body.jp-modern-header-enabled .jp-modern-menu .sub-menu a:hover, body.jp-modern-header-enabled .jp-modern-menu .sub-menu a:focus, body.jp-modern-header-enabled .jp-modern-menu .sub-menu .current-menu-item > a {
    color: #07556f;
    background: #edf7fb;
}

body.jp-modern-header-enabled .jp-modern-menu .sub-menu .sub-menu {
    top: -12px;
    left: calc(100% + 8px);
}

body.jp-modern-header-enabled .jp-modern-header__toggle {
    display: none;
}

/* Sur l'accueil, le menu reste à droite et ne dépend plus de la largeur Astra. */

body.jp-modern-header-home .jp-modern-header__nav {
    justify-self: end;
}

/* ==========================================================================
   Adaptation responsive : (max-width: 1180px) and (min-width: 901px)
   ========================================================================== */

@media (max-width: 1180px) and (min-width: 901px) {
    body.jp-modern-header-enabled .jp-modern-header__inner {
      grid-template-columns: 145px minmax(0, 1fr);
      gap: 12px;
  }
    body.jp-modern-header-enabled .jp-modern-header__brand .custom-logo {
      max-width: 125px;
  }
    body.jp-modern-header-enabled .jp-modern-menu > li > a {
      padding-inline: 8px;
      font-size: 10px;
  }
}

/* ==========================================================================
   Adaptation responsive : (max-width: 900px)
   ========================================================================== */

@media (max-width: 900px) {
    body.jp-modern-header-enabled .jp-modern-header__inner {
      width: calc(100% - 24px);
      grid-template-columns: 1fr auto;
      align-items: start;
      padding-top: 10px;
  }
    body.jp-modern-header-enabled .jp-modern-header__brand .custom-logo {
      max-width: 112px;
      max-height: 82px;
  }
    body.jp-modern-header-enabled .jp-modern-header__toggle {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      width: 44px;
      height: 42px;
      padding: 0 11px;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 12px;
      background: rgba(205,235,248,.94);
      box-shadow: 0 8px 24px rgba(5,37,61,.16);
  }
    body.jp-modern-header-enabled .jp-modern-header__toggle span:not(.screen-reader-text) {
      display: block;
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background: #0d3550;
  }
    body.jp-modern-header-enabled .jp-modern-header__nav {
      grid-column: 1 / -1;
      justify-self: stretch;
      max-width: none;
      display: none;
      margin-top: 8px;
  }
    body.jp-modern-header-enabled .jp-modern-header.is-open .jp-modern-header__nav {
      display: block;
  }
    body.jp-modern-header-enabled .jp-modern-menu {
      display: block;
      width: 100%;
      max-height: calc(100vh - 115px);
      overflow-y: auto;
      padding: 8px;
      background: rgba(255,255,255,.985);
  }
    body.jp-modern-header-enabled .jp-modern-menu > li > a {
      min-height: 44px;
      justify-content: space-between;
      padding: 10px 12px;
      font-size: 13px;
  }
    body.jp-modern-header-enabled .jp-modern-menu .sub-menu, body.jp-modern-header-enabled .jp-modern-menu .sub-menu .sub-menu {
      position: static;
      display: none;
      min-width: 0;
      max-width: none;
      margin: 3px 0 6px 12px;
      padding: 5px;
      border: 0;
      border-radius: 10px;
      background: #f1f7fa;
      box-shadow: none;
      opacity: 1;
      visibility: visible;
      transform: none;
  }
    body.jp-modern-header-enabled .jp-modern-menu li.is-open > .sub-menu {
      display: block;
  }
}

/* ==========================================================================
   Adaptation responsive : (prefers-reduced-motion: reduce)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    body.jp-modern-header-enabled .jp-modern-menu a, body.jp-modern-header-enabled .jp-modern-menu .sub-menu {
      transition: none;
  }
}

/* ==========================================================
   Ajustements du header autonome — position verticale
   ========================================================== */

/* ==========================================================================
   Adaptation responsive : (min-width: 901px)
   ========================================================================== */

@media (min-width: 901px) {
    /* Le menu est remonté de 10 px sur toutes les pages modernes,
       sans modifier son alignement horizontal. */
    body.jp-modern-header-enabled .jp-modern-header__inner {
      padding-top: 4px;
  }
    /* Les informations placées en haut à droite du hero des formations
       passent sous le menu autonome au lieu d'être masquées par celui-ci. */
    body.jp-modern-header-enabled.single-formation .jp-hero-side {
      top: 72px !important;
  }
    /* Sur l'accueil, le bloc des prochains événements descend légèrement
       afin de laisser davantage d'espace sous le menu. */
    body.jp-modern-header-home .elementor-element-cf52d96 {
      transform: translate(-50%, 14px) !important;
  }
    body.jp-modern-header-home .lg-liste-evenements {
      transform: translate(-50%, 14px) !important;
  }
}

/* Le slogan appartient désormais au header autonome et ne doit plus être
   masqué par les anciennes règles destinées au header Astra. */

body.jp-modern-header-enabled .jp-modern-header .jp-site-branding-logo {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    overflow: visible !important;
}

body.jp-modern-header-enabled .jp-modern-header .jp-site-slogan {
    display: block !important;
    min-height: 19px !important;
    margin: 4px 0 0 2px !important;
    font-family: "Caveat", cursive !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

body.jp-modern-header-enabled .jp-modern-header .jp-site-slogan.jp-slogan-ready {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================
   Ajustements ciblés — accueil uniquement
   ========================================================== */

/* ==========================================================================
   Adaptation responsive : (min-width: 901px)
   ========================================================================== */

@media (min-width: 901px) {
    /* Le logo conserve exactement le même axe sur toutes les pages.
       Aucun déplacement spécifique n'est appliqué aux formations. */
    body.jp-modern-header-enabled.single-formation .jp-modern-header__brand {
      transform: none !important;
  }
    /* Le surtitre, le titre et le contenu du hero conservent leur
       position définie par leurs modèles respectifs. */
    body.jp-modern-header-enabled.single-formation .jp-hero-main, body.jp-modern-header-enabled.single-contenu .jp-hero-main {
      transform: none !important;
      max-width: none;
  }
    /* Accueil : seuls le titre et le texte des événements restent
       abaissés. Le panneau flouté est positionné dans home-events.php. */
    body.jp-modern-header-home .elementor-element-cf52d96, body.jp-modern-header-home .lg-liste-evenements {
      transform: translate(-50%, 52px) !important;
  }
    body.jp-modern-header-home .jp-home.jp-home-v4 .jp-home-stats {
      margin-top: -14px !important;
  }
}

/* ==========================================================
   Correctif ciblé — contenu des heroes et accueil événements
   2026-07-16
   ========================================================== */

/* ==========================================================================
   Adaptation responsive : (min-width: 901px)
   ========================================================================== */

@media (min-width: 901px) {
    /* On conserve les badges (type + surtitre) à leur position d'origine.
       Seuls les éléments textuels situés dessous sont décalés afin de
       dégager la zone occupée par le logo et son slogan. */
    body.jp-modern-header-enabled.single-formation .jp-hero-main > h1, body.jp-modern-header-enabled.single-formation .jp-hero-main > .jp-subtitle, body.jp-modern-header-enabled.single-formation .jp-hero-main > .jp-statuses, body.jp-modern-header-enabled.single-formation .jp-hero-main > .jp-desc, body.jp-modern-header-enabled.single-formation .jp-hero-main > .jp-buttons, body.jp-modern-header-enabled.single-contenu .jp-hero-main > h1, body.jp-modern-header-enabled.single-contenu .jp-hero-main > .jp-subtitle, body.jp-modern-header-enabled.single-contenu .jp-hero-main > .jp-statuses, body.jp-modern-header-enabled.single-contenu .jp-hero-main > .jp-desc, body.jp-modern-header-enabled.single-contenu .jp-hero-main > .jp-buttons {
      position: relative !important;
      left: 78px !important;
  }
    /* Annulation des anciens déplacements cumulés du texte des événements.
       Les positions sont désormais définies directement dans home-events.php. */
    body.jp-modern-header-home .elementor-element-cf52d96, body.jp-modern-header-home .lg-liste-evenements {
      transform: translateX(-50%) !important;
  }
}

/* ==========================================================================
   Adaptation responsive : (min-width: 901px) and (max-width: 1250px)
   ========================================================================== */

@media (min-width: 901px) and (max-width: 1250px) {
    body.jp-modern-header-enabled.single-formation .jp-hero-main > h1, body.jp-modern-header-enabled.single-formation .jp-hero-main > .jp-subtitle, body.jp-modern-header-enabled.single-formation .jp-hero-main > .jp-statuses, body.jp-modern-header-enabled.single-formation .jp-hero-main > .jp-desc, body.jp-modern-header-enabled.single-formation .jp-hero-main > .jp-buttons, body.jp-modern-header-enabled.single-contenu .jp-hero-main > h1, body.jp-modern-header-enabled.single-contenu .jp-hero-main > .jp-subtitle, body.jp-modern-header-enabled.single-contenu .jp-hero-main > .jp-statuses, body.jp-modern-header-enabled.single-contenu .jp-hero-main > .jp-desc, body.jp-modern-header-enabled.single-contenu .jp-hero-main > .jp-buttons {
      left: 52px !important;
  }
}

/* ==========================================================
   Position finale du titre « Prochains événements » — /ltsjp/
   Cette règle est placée en dernier pour éviter toute surcharge.
   ========================================================== */

/* ==========================================================================
   Adaptation responsive : (min-width: 901px)
   ========================================================================== */

@media (min-width: 901px) {
    body.jp-modern-header-home .elementor-element-cf52d96 {
      top: 52px !important;
      transform: translateX(-50%) !important;
  }
}

/* ==========================================================
   ALIGNEMENT DU CONTENU DU HERO SUR LA PASTILLE
   Formations et contenus — ordinateur
   La pastille conserve sa position. Les éléments placés dessous
   commencent sur le même axe gauche que cette pastille.
   ========================================================== */

/* ==========================================================================
   Adaptation responsive : (min-width: 1251px)
   ========================================================================== */

@media (min-width: 1251px) {
    body.jp-modern-header-enabled.single-formation .jp-hero-main > h1, body.jp-modern-header-enabled.single-formation .jp-hero-main > .jp-subtitle, body.jp-modern-header-enabled.single-formation .jp-hero-main > .jp-statuses, body.jp-modern-header-enabled.single-formation .jp-hero-main > .jp-desc, body.jp-modern-header-enabled.single-formation .jp-hero-main > .jp-buttons, body.jp-modern-header-enabled.single-contenu .jp-hero-main > h1, body.jp-modern-header-enabled.single-contenu .jp-hero-main > .jp-subtitle, body.jp-modern-header-enabled.single-contenu .jp-hero-main > .jp-statuses, body.jp-modern-header-enabled.single-contenu .jp-hero-main > .jp-desc, body.jp-modern-header-enabled.single-contenu .jp-hero-main > .jp-buttons {
      left: 108px !important;
  }
}

/* ==========================================================================
   Adaptation responsive : (min-width: 901px) and (max-width: 1250px)
   ========================================================================== */

@media (min-width: 901px) and (max-width: 1250px) {
    body.jp-modern-header-enabled.single-formation .jp-hero-main > h1, body.jp-modern-header-enabled.single-formation .jp-hero-main > .jp-subtitle, body.jp-modern-header-enabled.single-formation .jp-hero-main > .jp-statuses, body.jp-modern-header-enabled.single-formation .jp-hero-main > .jp-desc, body.jp-modern-header-enabled.single-formation .jp-hero-main > .jp-buttons, body.jp-modern-header-enabled.single-contenu .jp-hero-main > h1, body.jp-modern-header-enabled.single-contenu .jp-hero-main > .jp-subtitle, body.jp-modern-header-enabled.single-contenu .jp-hero-main > .jp-statuses, body.jp-modern-header-enabled.single-contenu .jp-hero-main > .jp-desc, body.jp-modern-header-enabled.single-contenu .jp-hero-main > .jp-buttons {
      left: 78px !important;
  }
}

/* ==========================================================
   CORRECTIONS MENU DESKTOP — 2026-07-19
   ========================================================== */

/* ==========================================================================
   Adaptation responsive : (min-width: 901px)
   ========================================================================== */

@media (min-width: 901px) {
    /* Le clic ne doit pas maintenir un ancien panneau par :focus-within. */
    body.jp-modern-header-enabled .jp-modern-menu > li:focus-within > a, body.jp-modern-header-enabled .jp-modern-menu li:focus-within > .sub-menu {
      color: inherit;
      background: inherit;
  }
    body.jp-modern-header-enabled .jp-modern-menu > li:hover > a {
      color: #fff;
      background: #0d5974;
  }
    body.jp-modern-header-enabled .jp-modern-menu li:hover > .sub-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }
    /* Une rubrique n'est colorée que lorsqu'elle est réellement survolée. */
    body.jp-modern-header-enabled .jp-modern-menu > li.current-menu-item:not(:hover) > a, body.jp-modern-header-enabled .jp-modern-menu > li.current-menu-ancestor:not(:hover) > a {
      color: #0d3550;
      background: transparent;
  }
    /* Repositionnement automatique des panneaux proches du bord droit. */
    body.jp-modern-header-enabled .jp-modern-menu > li.jp-submenu-align-right > .sub-menu {
      right: 0;
      left: auto;
  }
    body.jp-modern-header-enabled .jp-modern-menu .sub-menu li.jp-submenu-open-left > .sub-menu {
      right: calc(100% + 8px);
      left: auto;
  }
}

/* ==========================================================
   ACCUEIL — neutralisation définitive des anciens décalages
   Elementor du module « Prochains événements »
   ========================================================== */

body.jp-modern-header-home .jp-home-events-layer,
body.jp-modern-header-home .jp-home-events-layer.elementor-element-cf52d96 {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

body.jp-modern-header-home .jp-home-events-layer .lg-liste-evenements {
    left: auto !important;
    transform: none !important;
}

/* ==========================================================
   ACCUEIL — passage du slogan en blanc
   ========================================================== */

body.jp-modern-header-home .jp-site-slogan {
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.45);
}


/* ==========================================================
   CORRECTIF MENU MOBILE — UNE SEULE RUBRIQUE ACTIVE
   ========================================================== */

@media (max-width: 900px) {
    /*
     * Les classes WordPress current-menu-* ne doivent pas laisser plusieurs
     * rubriques principales colorées simultanément dans le menu mobile.
     */
    body.jp-modern-header-enabled .jp-modern-menu > li.current-menu-item > a,
    body.jp-modern-header-enabled .jp-modern-menu > li.current-menu-ancestor > a,
    body.jp-modern-header-enabled .jp-modern-menu > li.current-menu-parent > a {
        color: #0d3550 !important;
        background: transparent !important;
    }

    /*
     * Seule la rubrique réellement ouverte reçoit l'état bleu foncé.
     */
    body.jp-modern-header-enabled .jp-modern-menu > li.is-open > a {
        color: #ffffff !important;
        background: #0d5974 !important;
    }

    /*
     * Neutralise :focus-within sur écran tactile, qui pouvait maintenir
     * visuellement plusieurs rubriques actives après plusieurs pressions.
     */
    body.jp-modern-header-enabled .jp-modern-menu > li:focus-within:not(.is-open) > a {
        color: #0d3550 !important;
        background: transparent !important;
    }
}


/* ==========================================================
   MENU DESKTOP — SOUS-MENUS STABLES PILOTÉS PAR JAVASCRIPT
   ========================================================== */

@media (min-width: 901px) {
    /*
     * Le simple passage de la souris ne change plus directement le panneau.
     * Seule la classe .is-open, appliquée avec temporisation par JavaScript,
     * commande l'ouverture.
     */
    body.jp-modern-header-enabled
    .jp-modern-menu li:hover > .sub-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(7px) !important;
    }

    body.jp-modern-header-enabled
    .jp-modern-menu li.is-open > .sub-menu,
    body.jp-modern-header-enabled
    .jp-modern-menu li:focus-within > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    /*
     * Passage sécurisé entre le bouton parent et son panneau.
     */
    body.jp-modern-header-enabled
    .jp-modern-menu > li.menu-item-has-children::after {
        content: "";
        position: absolute;
        z-index: 10058;
        top: 100%;
        right: 0;
        left: 0;
        height: 13px;
        background: transparent;
    }

    body.jp-modern-header-enabled
    .jp-modern-menu .sub-menu > li.menu-item-has-children::after {
        content: "";
        position: absolute;
        z-index: 10058;
        top: -3px;
        right: -13px;
        width: 15px;
        height: calc(100% + 6px);
        background: transparent;
    }

    body.jp-modern-header-enabled
    .jp-modern-menu .sub-menu > li.jp-submenu-open-left.menu-item-has-children::after {
        right: auto;
        left: -13px;
    }
}


/* ==========================================================
   MENU FORMATIONS — INTITULÉS COMPLETS ET LISIBLES
   ========================================================== */

@media (min-width: 901px) {
    body.jp-modern-header-enabled
    .jp-modern-menu .sub-menu {
        min-width: 360px;
        max-width: min(520px, calc(100vw - 32px));
    }

    body.jp-modern-header-enabled
    .jp-modern-menu .sub-menu a {
        padding: 10px 13px;
        font-size: 11.5px;
        line-height: 1.42;
    }

    /*
     * Les intitulés longs restent lisibles sans créer une ligne
     * démesurément large.
     */
    body.jp-modern-header-enabled
    .jp-modern-menu .sub-menu .sub-menu {
        min-width: 430px;
        max-width: min(560px, calc(100vw - 32px));
    }
}

@media (max-width: 900px) {
    body.jp-modern-header-enabled
    .jp-modern-menu .sub-menu a {
        line-height: 1.45;
    }
}

/* ==========================================================
   CORRECTIF FINAL — SLOGAN SUR TÉLÉPHONE
   Valeur finale : 19 px / 1,6 puis -20 % = 9,5 px.
   ========================================================== */
@media (max-width: 767px) {
    html body.jp-modern-header-enabled
    .jp-modern-header
    .jp-site-branding-logo > .jp-site-slogan {
        font-size: 15px !important;
        line-height: 1 !important;
    }
}

/* ==========================================================
   CORRECTIF MOBILE V31 — SLOGAN PAGES HORS ACCUEIL
   15 px et descendu de 2 px par rapport à la position précédente.
   ========================================================== */
@media (max-width: 767px) {
    html body.jp-modern-header-enabled:not(.page-id-14864)
    .jp-modern-header
    .jp-site-branding-logo > .jp-site-slogan {
        font-size: 15px !important;
        transform: translateY(-18px) !important;
    }
}

/* ==========================================================
   MENU PRINCIPAL V54 — BARRE BLEU CLAIR PLUS BASSE
   ========================================================== */

/*
 * Version ordinateur / tablette avec navigation horizontale.
 *
 * Avant :
 * - conteneur bleu clair : 5 px en haut + 5 px en bas ;
 * - lien principal : min-height 34 px, padding vertical 7 px.
 *
 * Après :
 * - conteneur : 2 px en haut + 2 px en bas ;
 * - lien principal : min-height 28 px, padding vertical 4 px.
 *
 * La barre perd ainsi environ 10 à 12 px de hauteur visuelle.
 */
@media (min-width: 981px) {

    body.jp-modern-header-enabled
    .jp-modern-menu {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    body.jp-modern-header-enabled
    .jp-modern-menu > li > a {
        min-height: 28px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        line-height: 1.10 !important;
    }

    /*
     * Sous-menus : on réduit également légèrement la réserve
     * verticale autour de la liste et entre chaque entrée.
     */
    body.jp-modern-header-enabled
    .jp-modern-menu .sub-menu {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    body.jp-modern-header-enabled
    .jp-modern-menu .sub-menu a {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        line-height: 1.28 !important;
    }
}

/* ==========================================================
   MENU PRINCIPAL V55 — SOUS-MENUS À LARGEUR COMPACTE
   ========================================================== */

/*
 * Sur ordinateur / tablette en navigation horizontale, les sous-menus
 * ne doivent plus conserver une grande réserve blanche à droite.
 *
 * Ancien comportement :
 *   min-width: 285px;
 *   max-width: min(420px, calc(100vw - 32px));
 *
 * Nouveau comportement :
 * - largeur calculée au plus près du contenu ;
 * - minimum de 170 px seulement pour garder un panneau lisible ;
 * - maximum de 280 px pour que les intitulés longs puissent revenir
 *   naturellement sur deux lignes sans créer un panneau énorme.
 */
@media (min-width: 981px) {

    body.jp-modern-header-enabled
    .jp-modern-menu .sub-menu {
        width: max-content !important;
        min-width: 170px !important;
        max-width: min(280px, calc(100vw - 32px)) !important;
    }

    /*
     * Les éléments et les liens suivent la largeur réelle du panneau.
     * On évite toute largeur héritée qui recréerait une zone vide.
     */
    body.jp-modern-header-enabled
    .jp-modern-menu .sub-menu > li,
    body.jp-modern-header-enabled
    .jp-modern-menu .sub-menu > li > a {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /*
     * Les sous-menus de niveau 2 bénéficient du même comportement compact.
     */
    body.jp-modern-header-enabled
    .jp-modern-menu .sub-menu .sub-menu {
        width: max-content !important;
        min-width: 170px !important;
        max-width: min(280px, calc(100vw - 32px)) !important;
    }
}

/* ==========================================================
   V57 — ORIENTATION / IMMERSION : IDENTITÉ DU HEADER
   ========================================================== */

/*
 * Ces deux pages doivent présenter exactement la même identité visuelle
 * que les autres pages modernes :
 * - logo transparent ;
 * - aucun nom de site écrit à côté ;
 * - slogan placé sous le logo en Caveat.
 */
body.jp-special-orientation-immersion
.jp-modern-header__brand {
    display: block !important;
}

body.jp-special-orientation-immersion
.jp-modern-header__brand
.jp-site-branding-logo {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    line-height: 1 !important;
}

body.jp-special-orientation-immersion
.jp-modern-header__brand
.custom-logo-link {
    display: block !important;
    line-height: 0 !important;
}

body.jp-special-orientation-immersion
.jp-modern-header__brand
.jp-site-slogan {
    display: block !important;
    margin-top: -6px !important;
    padding: 0 !important;

    color: #fff !important;
    font-family: "Caveat", cursive !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Aucun ancien titre de site ne doit rester visible près du logo. */
body.jp-special-orientation-immersion
.jp-modern-header__brand
.jp-modern-header__site-name,
body.jp-special-orientation-immersion
.jp-modern-header__brand
.site-title,
body.jp-special-orientation-immersion
.jp-modern-header__brand
.site-description,
body.jp-special-orientation-immersion
.jp-modern-header__brand
.ast-site-title-wrap {
    display: none !important;
}

/*
 * Caractères Caveat pilotés par le moteur ciblé V57.
 * Leur largeur finale est réservée immédiatement pour éviter les décalages.
 */
body.jp-special-orientation-immersion
[data-jp-special-handwritten-char="1"] {
    display: inline !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 45ms linear;
}

body.jp-special-orientation-immersion
[data-jp-special-handwritten-char="1"].is-visible {
    opacity: 1;
    visibility: visible;
}