/* =====================================================================
   GDJ — Feuille de style globale
   Animations, micro-interactions & composants partagés
   Aesthetic : autorité d'État — sobre, structurée, premium (≠ "Vegas")
   ===================================================================== */

:root {
  --gdj-navy: #002a62;
  --gdj-blue: #003f8d;
  --gdj-bright: #0061cb;
  --gdj-yellow: #ffd300;
  --gdj-green: #107a34;
  --gdj-ink: #0a0b0c;
  --tricolor: linear-gradient(90deg, #107a34 0%, #ffd300 50%, #003f8d 100%);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* L'attribut `hidden` doit TOUJOURS l'emporter, même face à une classe utilitaire
   d'affichage (ex. `.flex` de Tailwind, origine auteur, qui écrase le [hidden] du
   navigateur). Sans ça, les messages de formulaire (succès vert + erreur rouge)
   restent affichés en permanence. */
[hidden] { display: none !important; }

/* ---------- Sélection ---------- */
::selection { background: var(--gdj-yellow); color: var(--gdj-navy); }

/* ---------- Scrollbar discrète ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c3c6d3; border-radius: 9999px; border: 2px solid #f9f9ff; }
::-webkit-scrollbar-thumb:hover { background: var(--gdj-bright); }

/* =====================================================================
   LIGNE TRICOLORE — signature nationale
   ===================================================================== */
.tricolor-line { background: var(--tricolor); }
.border-tricolor {
  border-image-source: var(--tricolor);
  border-image-slice: 1;
}

/* =====================================================================
   ICÔNES — Phosphor « light » (traits fins, façon charte GDJ)
   ===================================================================== */
i[class^="ph-"], i[class*=" ph-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: -0.125em;
  user-select: none;
}
/* Icône décorative par défaut : bleu institutionnel, une seule teinte */
.icon-line { color: var(--gdj-bright); }
/* Pastille d'icône neutre (remplace les anciens carrés colorés) */
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.75rem;
  background: var(--gdj-bright);
  background: rgba(0, 97, 203, 0.08);
  color: var(--gdj-bright);
}

/* =====================================================================
   TEXTURE « blue wave » — mouvement fluide subtil (identité nationale)
   ===================================================================== */
.wave-bg { position: relative; overflow: hidden; }
.wave-bg::before,
.wave-bg::after {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 140%;
  background-repeat: repeat-x;
  background-position: 0 50%;
  opacity: 0.22;
  pointer-events: none;
}
/* Motif d'onde STATIQUE (aucune animation en boucle — sobriété institutionnelle) */
.wave-bg::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' viewBox='0 0 1200 200'%3E%3Cpath d='M0 100 C 200 40 400 160 600 100 S 1000 40 1200 100' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='2'/%3E%3C/svg%3E");
}
.wave-bg::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' viewBox='0 0 1200 200'%3E%3Cpath d='M0 120 C 250 60 450 180 700 110 S 1050 60 1200 120' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='2'/%3E%3C/svg%3E");
}
@keyframes wave-drift {
  from { background-position: 0 50%; }
  to { background-position: 1200px 50%; }
}

/* Rotation : keyframes conservées uniquement pour l'anneau du loader
   (.loader-ring) — les anciennes classes décoratives ont été retirées */
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* =====================================================================
   RÉVÉLATION AU SCROLL (IntersectionObserver -> .is-visible)
   ===================================================================== */
/* Le masquage initial ne s'applique QUE si JavaScript est actif (html.js).
   Sans JS, le contenu reste pleinement visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
  will-change: opacity, transform;
}
.js [data-reveal="left"] { transform: translateX(-32px); }
.js [data-reveal="right"] { transform: translateX(32px); }
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* Cascade : délais via --i */
[data-reveal][style*="--i"] { transition-delay: calc(var(--i) * 90ms); }

/* =====================================================================
   ENTÊTE / NAVIGATION
   ===================================================================== */
.site-header {
  transition: background-color 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth), backdrop-filter 0.4s;
}
.site-header.scrolled {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: none;
  border-bottom: 1px solid rgba(0, 42, 98, 0.08);
}
.nav-link, .nav-link-parent {
  position: relative;
  padding: 0.5rem 0.55rem; border-radius: 0.5rem;
  color: var(--gdj-navy);
  transition: color 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth);
}
/* Survol / actif : CONTOUR jaune (plus de fond jaune) */
.nav-link::after, .nav-link-parent::after { content: none; }
.nav-link:hover, .nav-link-parent:hover,
.site-header nav .nav-item:hover > .nav-link-parent {
  color: var(--gdj-navy); box-shadow: inset 0 0 0 1.5px var(--gdj-yellow);
}
.nav-link[aria-current="page"], .nav-link-parent[aria-current="page"] {
  color: var(--gdj-navy); box-shadow: inset 0 0 0 2px var(--gdj-yellow);
}
.nav-caret { font-size: 0.82em; opacity: 0.65; }

/* Menu mobile */
.mobile-menu {
  transition: opacity 0.35s var(--ease-smooth), transform 0.35s var(--ease-smooth);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.closing { opacity: 0; transform: translateY(-8px); }

/* =====================================================================
   BOUTONS — micro-interactions
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 0.8125rem;
  border-radius: 0.5rem;
  padding: 0.85rem 1.6rem;
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth),
              background-color 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth);
  position: relative; overflow: hidden;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--gdj-blue); color: #fff; box-shadow: 0 4px 14px rgba(0, 63, 141, 0.20); }
.btn-primary:hover { background: var(--gdj-navy); box-shadow: 0 6px 18px rgba(0, 63, 141, 0.26); }
.btn-light { background: #fff; color: var(--gdj-blue); }
.btn-light:hover { background: #f4f7fc; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.btn-danger { background: #ba1a1a; color: #fff; box-shadow: 0 4px 14px rgba(186, 26, 26, 0.22); }
.btn-danger:hover { background: #8e1414; box-shadow: 0 6px 18px rgba(186, 26, 26, 0.28); }
.btn-outline { border: 1.5px solid currentColor; }
.btn-outline:hover { background: rgba(255, 255, 255, 0.08); }
/* Bouton de téléchargement (cadre réglementaire) : doux et élégant — teinte bleue claire,
   texte bleu, fine bordure ; se remplit en bleu plein au survol. */
.btn-download {
  display: inline-flex; align-items: center; gap: 0.5rem;
  align-self: flex-start; /* hauteur naturelle (ne s'étire pas) + aligné en haut à droite */
  background: #eef4fc; color: #0061cb; border: 1px solid #d3e3f7;
  font-weight: 600; font-size: 0.74rem; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.56rem 1.15rem; border-radius: 0.7rem; white-space: nowrap;
  transition: background-color .2s var(--ease-smooth), color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.btn-download:hover { background: #0061cb; color: #fff; border-color: #0061cb; box-shadow: 0 8px 18px -7px rgba(0, 97, 203, 0.4); transform: translateY(-1px); }
.btn-download:active { transform: translateY(0); }
.btn-download i { font-size: 1.05rem; }
/* Bureau : pousse le bouton à l'extrême droite de la carte (le groupe texte occupe la place à gauche). */
@media (min-width: 768px) { .btn-download { margin-left: auto; } }
/* Conventions de variantes :
   - .btn-ghost : variante réservée au bandeau cookies injecté par main.js
     (définie plus bas dans la section BANDEAU COOKIES) ;
   - .btn-outline sur fond clair : recette canonique
     « text-on-surface hover:border-secondary hover:text-secondary ». */
/* Brillance retirée — rendu institutionnel sobre (.btn-shine reste inerte) */

/* =====================================================================
   CARTES
   ===================================================================== */
.card {
  background: #fff;
  border: 1px solid #c3c6d3;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 63, 141, 0.06);
  transition: transform 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth), border-color 0.4s;
}
.card-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 63, 141, 0.12);
  border-color: var(--gdj-bright);
}
/* Liseré tricolore en haut de carte (contenu officiel) */
.card-official { position: relative; overflow: hidden; }
.card-official::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--tricolor);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-smooth);
}
.card-official:hover::before { transform: scaleX(1); }

/* Carte secteur (bloc bleu) */
.sector-card { position: relative; overflow: hidden; }
.sector-card .sector-underline {
  height: 2px; width: 2rem; background: var(--gdj-yellow);
  transition: width 0.4s var(--ease-smooth);
}
.sector-card:hover .sector-underline { width: 4rem; }
.sector-card .sector-icon { transition: transform 0.4s var(--ease-smooth); }
.sector-card:hover .sector-icon { transform: translateY(-3px); }

/* =====================================================================
   COMPTEURS animés
   ===================================================================== */
.counter { font-variant-numeric: tabular-nums; }

/* =====================================================================
   BANDEAU JEU RESPONSABLE — pastille
   ===================================================================== */
.badge-18 {
  background: #d92d20; /* rouge — sans contour jaune (demande client) */
  border: none;
  box-shadow: none;
}
/* Halo pulsant retiré (sobriété) — la pastille reste fixe */
.pulse-ring { position: relative; }
@keyframes pulse-out {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}

/* =====================================================================
   MARQUEE (bandeau info) — défilement horizontal continu et lent.
   La piste contient DEUX séries identiques d'items ; l'animation la
   translate de -50% pour une boucle sans couture. Neutralisée par
   prefers-reduced-motion (cf. bloc en tête de fichier).
   ===================================================================== */
.marquee { overflow: hidden; }
.marquee__track {
  display: inline-flex; gap: 3rem; white-space: nowrap;
  will-change: transform;
  animation: marquee-scroll 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =====================================================================
   LIENS « lire la suite »
   ===================================================================== */
.link-arrow i[class*="ph-"] { transition: transform 0.3s var(--ease-smooth); }
.link-arrow:hover i[class*="ph-"] { transform: translateX(4px); }

/* =====================================================================
   FORMULAIRES
   ===================================================================== */
.field {
  width: 100%;
  border: 1px solid #c3c6d3;
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  min-height: 2.75rem; /* cible tactile ≥ 44px */
  background-color: #fff; /* pas 'background' : préserve le chevron des <select> (plugin forms) */
  transition: border-color 0.25s, box-shadow 0.25s;
  font-size: 1rem; /* ≥16px : évite le zoom auto iOS au focus */
}
.field:focus {
  outline: none;
  border-color: var(--gdj-bright);
  box-shadow: 0 0 0 3px rgba(0, 97, 203, 0.18);
}

/* Apparition douce de page — n'utilise PAS opacity:0 sur tout le <main>
   afin de ne jamais risquer de masquer le contenu si les animations ne
   s'exécutent pas (WebViews, lecteurs figeant les animations). */
.page-fade { animation: page-fade 0.6s var(--ease-smooth) both; }
@keyframes page-fade {
  from { transform: translateY(8px); }
  to { transform: translateY(0); }
}

/* Image hover zoom dans cartes actualités */
.media-zoom { overflow: hidden; }
.media-zoom img, .media-zoom .media-bg {
  transition: transform 0.7s var(--ease-smooth);
}
.media-zoom:hover img, .media-zoom:hover .media-bg { transform: scale(1.06); }

/* Barre de progression de lecture (top) */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--tricolor); z-index: 60;
  transition: width 0.1s linear;
}

/* =====================================================================
   LIEN D'ÉVITEMENT (skip link) — accessibilité clavier (RGAA 12.7)
   ===================================================================== */
.skip-link {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 120;
  transform: translateY(-160%);
  background: var(--gdj-navy); color: #fff;
  padding: 0.7rem 1.1rem; border-radius: 0.5rem;
  font-weight: 700; font-size: 0.85rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: transform 0.25s var(--ease-smooth);
}
.skip-link:focus { transform: translateY(0); outline: 3px solid var(--gdj-yellow); outline-offset: 2px; }

/* Focus visible homogène (clavier) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gdj-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =====================================================================
   LOADER DE MARQUE (anti-FOUC)
   ===================================================================== */
#page-loader {
  position: fixed; inset: 0; z-index: 110;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
  background: var(--gdj-blue);
  /* disparaît automatiquement après 5 s même sans JS (sécurité) */
  animation: loader-failsafe 0s linear 5s forwards;
}
body.is-loaded #page-loader {
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease-smooth), visibility 0s linear 0.5s;
}
.loader-emblem {
  position: relative; width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
}
/* Le disque jaune est remplacé par le logo (emblème blanc) au centre. */
.loader-logo {
  width: 66px; height: 66px; object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.25));
}
.loader-ring {
  position: absolute; inset: 0; border-radius: 9999px;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: var(--gdj-yellow);
  animation: spin-slow 1s linear infinite;
}
.loader-text {
  color: #fff; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; font-size: 0.8rem; opacity: 0.9;
}
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }

/* =====================================================================
   BOUTON RETOUR EN HAUT
   ===================================================================== */
.back-to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 55;
  width: 48px; height: 48px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gdj-blue); color: #fff;
  box-shadow: 0 8px 24px rgba(0,42,98,0.3);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth), background-color 0.25s;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--gdj-navy); transform: translateY(-3px); }
.back-to-top i { font-size: 1.4rem; }

/* =====================================================================
   IMPRESSION — sortie lisible des textes (réglementations, contacts)
   ===================================================================== */
@media print {
  .site-header, .read-progress, .back-to-top, #page-loader,
  .marquee, .skip-link, .wave-bg::before, .wave-bg::after { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  main { padding-top: 0 !important; }
  a { color: #000 !important; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #444; }
  .card, section { box-shadow: none !important; border-color: #ccc !important; break-inside: avoid; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   TEXTE JUSTIFIÉ — sur TOUS les écrans, mobile inclus (retour revue site).
   Césure désactivée (les mots ne sont jamais coupés). Restent en drapeau
   les zones VOLONTAIREMENT centrées ou explicitement alignées.
   ===================================================================== */
main p, .article-body, .article-body p {
  text-align: justify; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal;
}
/* Exceptions respectées : intros/sections centrées, et alignements explicites (ex. text-center md:text-left). */
.text-center p, main p.text-center { text-align: center; }
main p[class*="text-left"] { text-align: left; }
main p[class*="text-right"] { text-align: right; }

/* Image insérée depuis le back-office dans un bloc de contenu (capture d'écran, illustration) */
.pb-img { display: block; max-width: 100%; height: auto; border-radius: 0.6rem;
  margin: 1.25rem 0; border: 1px solid #e2e6f0; }

/* ---------- Corps d'article (page de lecture) ---------- */
.article-body { color: #16181d; font-size: 1.05rem; line-height: 1.78; }
.article-body p { margin: 0 0 1.1em; }
.article-body h2 { font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 700; color: #003f8d; margin: 1.7em 0 .6em; line-height: 1.25; }
.article-body h3 { font-family: 'Poppins', sans-serif; font-size: 1.2rem; font-weight: 700; color: #0a0b0c; margin: 1.4em 0 .5em; }
.article-body ul, .article-body ol { margin: 0 0 1.1em 1.4em; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin: .35em 0; }
.article-body a { color: #0061cb; text-decoration: underline; font-weight: 600; }
.article-body blockquote { border-left: 4px solid #ffd300; background: #f6f8fc; padding: .8em 1.2em; margin: 1.2em 0; border-radius: .4rem; color: #374151; font-style: italic; }
.article-body strong { font-weight: 700; color: #0a0b0c; }
.article-body img { max-width: 100%; border-radius: .6rem; margin: 1em 0; }

/* ---------- Sous-menus de navigation (déroulants) ---------- */
.nav-item { position: relative; }
.nav-link-parent { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-caret { font-size: 0.8em; transition: transform 0.2s var(--ease-smooth); }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); }
.nav-submenu {
  position: absolute; top: 100%; left: 0; padding-top: 0.7rem;
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity 0.18s var(--ease-smooth), transform 0.18s var(--ease-smooth);
  z-index: 80;
}
/* Le dernier menu (Jeu responsable, collé au bouton) s'ouvre vers la gauche */
.site-header nav[data-glowup] .nav-item:last-child .nav-submenu { left: auto; right: 0; }
.nav-item:hover .nav-submenu, .nav-item:focus-within .nav-submenu {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.nav-submenu-inner {
  min-width: 250px; background: #fff;
  border: 1px solid rgba(0, 42, 98, 0.08); border-radius: 0.6rem;
  box-shadow: 0 12px 32px rgba(0, 42, 98, 0.12); padding: 0.5rem;
}
.nav-submenu-inner a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.8rem; border-radius: 0.6rem;
  font-size: 0.82rem; font-weight: 600; text-transform: none; letter-spacing: 0;
  color: #16181d; white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.nav-submenu-inner a:hover { background: #eef3fc; color: var(--gdj-blue); }
.nav-submenu-inner a i { color: var(--gdj-blue); font-size: 1.1em; }

/* Sous-menu imbriqué niveau 2 — flyout latéral (ergonomie type macOS/iPhone) */
.nav-subitem { position: relative; }
.nav-subitem > .nav-sub-parent { justify-content: space-between; }
.nav-sub-parent .nav-caret-r { margin-left: auto; font-size: 0.95em; color: var(--gdj-blue); transition: transform 0.2s var(--ease-smooth); }
.nav-subitem:hover > .nav-sub-parent .nav-caret-r,
.nav-subitem:focus-within > .nav-sub-parent .nav-caret-r { transform: translateX(3px); }
.nav-subitem:hover > .nav-sub-parent { background: #eef3fc; color: var(--gdj-blue); }
.nav-subsubmenu {
  position: absolute; top: -0.5rem; left: 100%; padding-left: 0.5rem;
  opacity: 0; pointer-events: none; transform: translateX(8px) scale(0.98);
  transform-origin: left top;
  transition: opacity 0.16s var(--ease-smooth), transform 0.16s var(--ease-smooth);
  z-index: 90;
}
.nav-subitem:hover > .nav-subsubmenu, .nav-subitem:focus-within > .nav-subsubmenu {
  opacity: 1; pointer-events: auto; transform: translateX(0) scale(1);
}
.nav-subsubmenu-inner {
  min-width: 232px; background: #fff; border: 1px solid rgba(0, 42, 98, 0.08);
  border-radius: 0.6rem; box-shadow: 0 12px 32px rgba(0, 42, 98, 0.12); padding: 0.5rem;
}
/* Sous-menu principal : légère mise à l'échelle façon macOS */
.nav-submenu { transform-origin: top; }
/* Sous-liens du menu mobile — cible tactile ≥ 44px */
.mobile-sub { display: flex; align-items: center; min-height: 44px; padding-left: 1.6rem; font-size: 0.82rem; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: 0.92; }
/* Libellés de nav sur une seule ligne + espacement aéré (6 entrées) */
.site-header nav[data-glowup] { gap: 1.1rem; }
@media (min-width: 1360px) { .site-header nav[data-glowup] { gap: 1.5rem; } }
/* Hiérarchie typo lisible : casse haute mesurée, tracking positif, graisse 600 */
.site-header nav[data-glowup] .nav-link, .site-header nav[data-glowup] .nav-link-parent { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; }
/* Conteneur ramené à une largeur institutionnelle (plus de bricolage 1680px) */
.site-header .max-w-container-max { max-width: 1440px; }
/* Barre utilitaire fine (FAQ · Nous rejoindre · Contact) au-dessus du menu principal.
   Hauteur FIXE (32px) : la compensation de l'entête fixe (padding-top de #main) en dépend.
   Contenu aligné sur le conteneur du menu (max 1440px), liseré pleine largeur. */
.header-utility { display: none; justify-content: flex-end; align-items: center; gap: 1.4rem;
  height: 32px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  color: #5b6472; padding: 0 max(2rem, calc((100% - 1440px) / 2 + 2rem));
  border-bottom: 1px solid rgba(0, 42, 98, 0.06); }
@media (min-width: 1024px) { .header-utility { display: flex; } }
/* Entête OPAQUE : le hero ne doit jamais transparaître sous la barre fixe */
.site-header { background-color: #fff; }
/* Compensation de l'entête fixe : 4px tricolore + 80px barre = 84px (mobile) ;
   + 32px de barre utilitaire = 116px dès qu'elle est visible (>=1024px) */
@media (min-width: 1024px) { #main { padding-top: 116px !important; } }
.header-utility a { transition: color 0.18s var(--ease-smooth); }
.header-utility a:hover { color: var(--gdj-bright); }

/* ---------- Hero d'accueil — traitement institutionnel (sans photo stock) ---------- */
.hero-carousel { position: relative; min-height: 640px; }
@media (min-width: 768px) { .hero-carousel { min-height: 700px; } }
/* Fond de marque : filet d'ondes discret + halo lumineux + dégradé bleu profond (aucune image externe) */
.hero-brand {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='700' viewBox='0 0 1400 700'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.5'%3E%3Cpath d='M0 560 C 300 480 500 620 760 540 S 1150 470 1400 560'/%3E%3Cpath d='M0 610 C 320 540 560 660 820 590 S 1180 530 1400 610'/%3E%3C/g%3E%3C/svg%3E") no-repeat center bottom / cover,
    radial-gradient(115% 80% at 12% -10%, rgba(0, 97, 203, 0.38) 0%, rgba(0, 42, 98, 0) 55%),
    linear-gradient(158deg, #002a62 0%, #00214b 58%, #001636 100%);
}
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease-smooth); background-size: cover; background-position: center; }
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 20, 45, 0) 45%, rgba(0, 16, 38, 0.40) 100%); }
/* Diapositive AVEC photo téléversée au BO : voile bleu de marque par-dessus
   l'image, pour garder l'identité GDJ et la lisibilité du texte blanc. */
.hero-slide.has-photo::before {
  background:
    radial-gradient(115% 80% at 12% -10%, rgba(0, 97, 203, 0.34) 0%, rgba(0, 42, 98, 0) 55%),
    linear-gradient(160deg, rgba(0, 42, 98, 0.78) 0%, rgba(0, 33, 75, 0.72) 55%, rgba(0, 16, 38, 0.86) 100%);
}
/* Entête de page AVEC photo de fond téléversée au BO. `.hero-brand` déclare son
   fond via la propriété raccourcie `background` : elle réinitialise
   background-size/-position/-repeat, qu'il faut donc redéclarer ici. Le voile
   bleu assure l'identité GDJ et la lisibilité du texte blanc. */
.hero-brand.has-photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero-brand.has-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(115% 80% at 12% -10%, rgba(0, 97, 203, 0.32) 0%, rgba(0, 42, 98, 0) 55%),
    linear-gradient(160deg, rgba(0, 42, 98, 0.80) 0%, rgba(0, 33, 75, 0.74) 55%, rgba(0, 16, 38, 0.88) 100%);
}
.hero-inner { position: relative; z-index: 1; height: 100%; }
.hero-tagline { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; padding-bottom: 1.5rem; }
.hero-dots { display: flex; gap: .55rem; }
.hero-dot { width: 30px; height: 5px; border-radius: 9999px; background: rgba(255,255,255,.4); border: 0; padding: 0; cursor: pointer; transition: background .25s, width .25s; }
.hero-dot.is-active { background: #ffd300; width: 46px; }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }
.site-header nav[data-glowup] .nav-link, .site-header nav[data-glowup] .nav-link-parent { white-space: nowrap; }
/* CTA "Signaler" — contour sobre qui se remplit au survol (aucune brillance) */
.btn { white-space: nowrap; }
.site-header .btn-danger { background: #fff; color: #ba1a1a; border: 1.5px solid #ba1a1a; box-shadow: none; padding: 0.5rem 1rem; font-size: 0.72rem; letter-spacing: 0.03em; }
.site-header .btn-danger:hover { background: #ba1a1a; color: #fff; transform: none; box-shadow: 0 4px 14px rgba(186, 26, 26, 0.20); }
.site-header .btn-danger i { font-size: 16px !important; }
/* Fix cascade : .btn (display:inline-flex) écrasait .hidden → le CTA restait
   visible sur mobile en nowrap et débordait. On restaure « masqué < 768px ». */
@media (max-width: 767.98px) { .btn.hidden { display: none; } }
/* Garde-fou : aucun débordement horizontal sur mobile (clip = compatible sticky) */
html, body { overflow-x: clip; }

.dg-has-photo > i { display: none; }

/* =====================================================================
   VIGNETTE DE MARQUE — remplace les photos stock dans les cartes/couvertures
   (aucune image externe ; filet tricolore discret en pied)
   ===================================================================== */
.brand-cover {
  position: relative;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(0, 97, 203, 0.45) 0%, rgba(0, 42, 98, 0) 60%),
    linear-gradient(150deg, #002a62 0%, #00214b 100%);
}
.brand-cover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--tricolor);
}
.brand-cover > i[class*="ph-"] { color: rgba(255, 255, 255, 0.85); }
/* Filet tricolore posé en bas d'une vignette AVEC photo (rappel de marque). */
.media-tricolor { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tricolor); z-index: 2; }
/* La vignette de repli doit COUVRIR toute la zone média. `.brand-cover` impose
   position:relative (nécessaire à son filet ::after) et, app.css étant chargé
   après Tailwind, écrasait l'utilitaire `.absolute` → la vignette se
   dimensionnait sur son contenu (0 sans icône). On la repositionne ici. */
.media-zoom .media-bg.brand-cover { position: absolute; inset: 0; }
/* Photo du DG téléversée au BO : même piège que ci-dessus — la propriété
   raccourcie `background` de .brand-cover réinitialise background-size/-position/
   -repeat et annulait les utilitaires bg-cover / bg-center, d'où une photo
   affichée en taille réelle et répétée. On les rétablit ici (placé APRÈS
   .brand-cover pour gagner la cascade). */
.dg-has-photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Cadran « Histoire » (page La GDJ) : image téléversée au BO en fond du visuel « Année de
   création ». Même piège .brand-cover que le DG → on rétablit cover/center et on masque
   l'icône de repli quand une photo est présente. */
.histoire-has-photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.histoire-has-photo > i { display: none; }
/* Image « Nos activités » (page Exploitation) téléversée au BO — même piège .brand-cover. */
.activites-has-photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.activites-has-photo > i { display: none; }
/* Image « Action de sensibilisation » (page Jeu responsable) téléversée au BO. */
.sensibilisation-has-photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.sensibilisation-has-photo > i, .sensibilisation-has-photo > span { display: none; }
/* Mot du DG : paragraphes justifiés, espacement uniforme (retour DMC 28/07). */
.dg-message { text-align: justify; -webkit-hyphens: manual; hyphens: manual; }
.dg-message p { margin: 0 0 1rem; }
.dg-message p:last-child { margin-bottom: 0; }

/* Lightbox — « cliquer pour agrandir » en surimpression (popup). */
[data-lightbox] { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(0, 16, 38, 0.90);
  opacity: 0; transition: opacity .25s var(--ease-smooth);
  cursor: zoom-out;
}
.lightbox.is-open { opacity: 1; }
.lightbox img {
  max-width: 96vw; max-height: 92vh; width: auto; height: auto;
  border-radius: .5rem; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); cursor: default;
}
.lightbox__close {
  position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px;
  border-radius: 9999px; border: 0; background: rgba(255, 255, 255, .16); color: #fff;
  display: grid; place-items: center; font-size: 22px; cursor: pointer;
  transition: background .2s var(--ease-smooth);
}
.lightbox__close:hover { background: rgba(255, 255, 255, .30); }
@media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }

/* Procédure de demande de licence (Surveillance) — 5 étapes alignées.
   Grille explicite : l'utilitaire Tailwind à 5 colonnes n'existe pas dans la
   feuille pré-compilée. Repli 2 colonnes en tablette, 1 en mobile. */
.procedure-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 1023px) { .procedure-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .procedure-steps { grid-template-columns: minmax(0, 1fr); } }

/* « Nos valeurs » (accueil) — les 5 affiches verticales alignées côte à côte.
   Grille explicite : l'utilitaire Tailwind à 5 colonnes n'existe pas dans la
   feuille pré-compilée. Repli à 3 puis 2 colonnes pour rester lisible. */
/* Valeurs — bandeau horizontal éditorial (remplace les affiches images) :
   panneau unique divisé en 7 colonnes, filet tricolore en tête, liseré qui
   s'étire au survol. Sobre, sans cartes ni icônes. Repli 4 puis 2 colonnes. */
.val-wall { position: relative; background: #fff; border: 1px solid #e2e7f0; border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.val-wall::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--tricolor); }
.val-col { padding: 2rem 1.1rem 1.75rem; border-right: 1px solid #e2e7f0; transition: background 0.3s var(--ease-smooth); }
.val-col:last-child { border-right: none; }
.val-col:hover { background: #f6f9fe; }
.val-name { font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; font-size: 1rem; color: var(--gdj-navy); line-height: 1.22; margin: 0; }
.val-underline { display: block; width: 22px; height: 3px; background: var(--tricolor); border-radius: 2px; margin: 0.7rem 0 0.75rem; transition: width 0.38s var(--ease-smooth); }
.val-col:hover .val-underline { width: 42px; }
.val-desc { color: #5b6472; font-size: 0.82rem; line-height: 1.46; margin: 0; }
@media (max-width: 900px) { .val-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .val-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Avatar monogramme (gouvernance sans photo officielle) */
.avatar-monogram {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif; font-weight: 700; color: #fff; letter-spacing: 0.02em;
  background: linear-gradient(150deg, var(--gdj-bright) 0%, var(--gdj-navy) 100%);
}

/* Contenu réservé aux lecteurs d'écran (visuellement masqué, exposé à l'AT) */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Hero en paysage court (petits téléphones) : évite le débordement / chevauchement */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-carousel, .hero-carousel.hero-carousel { min-height: 100svh; }
  .hero-slide .hero-inner { padding-bottom: 5rem; }
}

/* =====================================================================
   BANDEAU COOKIES — consentement (sobre, bas de page, non bloquant)
   ===================================================================== */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: #fff; border-top: 1px solid rgba(0, 42, 98, 0.12);
  box-shadow: 0 -8px 30px rgba(0, 42, 98, 0.12);
  padding: 1rem max(2rem, calc((100% - 1440px) / 2 + 2rem));
}
.cookie-banner__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; }
.cookie-banner__txt { flex: 1 1 380px; font-size: 0.85rem; line-height: 1.55; color: #374151; margin: 0; }
.cookie-banner__txt a { color: var(--gdj-bright); font-weight: 600; text-decoration: underline; white-space: nowrap; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cookie-banner .btn { padding: 0.55rem 1.1rem; font-size: 0.72rem; }
.cookie-banner .btn-ghost {
  background: #fff; color: var(--gdj-navy); border: 1.5px solid #c3c6d3;
}
.cookie-banner .btn-ghost:hover { border-color: var(--gdj-navy); background: #f4f7fc; }
@media (max-width: 640px) { .cookie-banner { padding: 1rem; } .cookie-banner__actions { width: 100%; } .cookie-banner .btn { flex: 1 1 auto; } }

/* Numéro vert — onglet flottant fixé sur le BORD DROIT (V3.1).
   Remonté pour laisser la place à la bulle de chat (qui se place au-dessus du bouton retour-en-haut). */
.help-fab {
  position: fixed; right: 0; top: auto; bottom: 10rem; z-index: 60;
  display: inline-flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .7rem .55rem; border-radius: .85rem 0 0 .85rem;
  background: var(--gdj-green); color: #fff; font-weight: 800; font-size: .82rem; line-height: 1;
  box-shadow: -6px 8px 24px rgba(0, 42, 98, .28); text-decoration: none;
  transition: transform .2s var(--ease-smooth), box-shadow .2s var(--ease-smooth);
}
.help-fab:hover { transform: translateX(-3px); box-shadow: -10px 10px 30px rgba(0, 42, 98, .38); }

/* Bulle du chat en direct (Chatwoot) : remontée pour ne pas masquer le bouton « retour en haut ». */
.woot-widget-bubble.woot-elements--right,
.woot-widget-bubble { bottom: 84px !important; }

/* Bouton flottant GDJBet (plateforme de jeux) : lien vers gdjbet.com, bord gauche (le côté droit est déjà pris). */
.gdjbet-fab {
  position: fixed; left: 1rem; bottom: 1.25rem; z-index: 58;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .8rem .5rem .7rem; border-radius: .9rem;
  /* Le logo GDJBet est blanc : fond bleu marine de la marque pour qu'il ressorte. */
  background: var(--gdj-blue); box-shadow: 0 10px 30px rgba(0, 42, 98, .28);
  transition: transform .2s var(--ease-smooth), box-shadow .2s var(--ease-smooth);
  animation: gdjbet-pulse 2.4s ease-in-out infinite;
}
.gdjbet-fab img { display: block; height: 34px; width: auto; }
.gdjbet-fab__cta {
  display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap;
  font-weight: 800; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gdj-yellow);
}
.gdjbet-fab__cta i { font-size: 1rem; transition: transform .2s var(--ease-smooth); }
.gdjbet-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 48px rgba(255, 211, 0, .38); animation: none; }
.gdjbet-fab:hover .gdjbet-fab__cta i { transform: translateX(3px); }
@keyframes gdjbet-pulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(0, 42, 98, .28), 0 0 0 0 rgba(255, 211, 0, .5); }
  50%      { box-shadow: 0 14px 36px rgba(0, 42, 98, .3), 0 0 0 12px rgba(255, 211, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .gdjbet-fab { animation: none; } }
@media (max-width: 640px) {
  .gdjbet-fab { left: .75rem; bottom: 1rem; padding: .4rem .6rem .4rem .5rem; gap: .4rem; }
  .gdjbet-fab img { height: 28px; } .gdjbet-fab__cta { font-size: .66rem; }
}
.help-fab i { font-size: 22px; }
.help-fab__txt { font-size: .8rem; }

/* =====================================================================
   Carte des points de vente (Leaflet auto-hébergé) — rendu premium GDJ
   Aucun tiers ajouté : fond OpenStreetMap apaisé + marqueurs de marque.
   ===================================================================== */
/* Mobile : hauteur fixe. Bureau (grille) : la carte remplit la hauteur de la colonne
   « liste » (align-items:stretch) pour que les deux colonnes se terminent à la même
   hauteur — ni bande blanche, ni carte plus courte que la liste. */
#map-revendeurs { height: 480px; }
@media (min-width: 1024px) { #map-revendeurs { height: 100%; min-height: 480px; } }
#map-revendeurs.leaflet-container { background: #e9f0f7; font: inherit; }
/* Fond de carte adouci et désaturé pour un ton institutionnel, sans écraser la lisibilité */
#map-revendeurs .leaflet-tile { filter: saturate(.72) brightness(1.04) contrast(.96); }
#map-revendeurs .leaflet-control-zoom a {
  color: var(--gdj-blue); border: none; box-shadow: 0 2px 8px rgba(0, 42, 98, .16);
}
#map-revendeurs .leaflet-control-zoom a:hover { background: #f2f6fb; color: var(--gdj-navy); }
#map-revendeurs .leaflet-bar { border: none; border-radius: .6rem; overflow: hidden; }

/* Marqueur de point de vente aux couleurs de la marque */
.gdj-pin { position: relative; width: 32px; height: 40px; }
.gdj-pin__body {
  position: absolute; left: 3px; top: 2px; width: 26px; height: 26px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--gdj-bright), var(--gdj-blue));
  border: 2px solid #fff; box-shadow: 0 5px 12px rgba(0, 63, 141, .45);
  transition: transform .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth);
}
.gdj-pin__body::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gdj-yellow);
}
.gdj-pin:hover .gdj-pin__body,
.gdj-pin.is-active .gdj-pin__body {
  transform: rotate(-45deg) scale(1.16); box-shadow: 0 9px 20px rgba(0, 63, 141, .55);
}
.gdj-pin.is-active .gdj-pin__body { background: linear-gradient(135deg, #1f7be0, var(--gdj-navy)); }
.gdj-pin.is-active .gdj-pin__body::after { background: #fff; }

/* Cartes de la liste : sélectionnables et synchronisées avec la carte */
.revendeur-card { cursor: pointer; transition: border-color .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth), transform .18s var(--ease-smooth); }
.revendeur-card:hover { transform: translateY(-1px); border-color: rgba(0, 63, 141, .35); }
.revendeur-card.is-active {
  border-color: var(--gdj-blue);
  box-shadow: 0 0 0 2px rgba(0, 63, 141, .16), 0 10px 24px rgba(0, 63, 141, .12);
}
.revendeur-card.is-active .rev-ico { background: var(--gdj-blue); color: #fff; }

/* Infobulle Leaflet aux couleurs de la marque */
#map-revendeurs .leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 12px 34px rgba(2, 32, 71, .22); }
#map-revendeurs .leaflet-popup-content { margin: 11px 14px; font: inherit; color: #0b1f3a; line-height: 1.4; }
#map-revendeurs .leaflet-popup-content strong { color: var(--gdj-blue); }
#map-revendeurs .leaflet-popup-tip { box-shadow: none; }

/* =====================================================================
   « Nos produits » — cartes image + nom + descriptif (secteurs enrichis)
   Image téléversée par produit dans le BO ; repli sobre (dégradé + icône).
   ===================================================================== */
/* Grille de catégories (Nos produits / Secteurs régulés) : 1 → 2 → 5 colonnes. */
.cat-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.produit-card {
  display: flex; flex-direction: column; overflow: hidden;
  text-decoration: none; color: inherit;
  background: #fff; border: 1px solid #e5eaf1; border-radius: 1rem;
  box-shadow: 0 6px 22px rgba(0, 42, 98, .07);
  transition: transform .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth);
}
.produit-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(0, 42, 98, .16); }
.produit-card__media {
  aspect-ratio: 4 / 3; background-size: cover; background-position: center;
  background-color: #eef3f9;
}
.produit-card__media--placeholder {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gdj-bright) 0%, var(--gdj-navy) 100%);
  position: relative;
}
.produit-card__media--placeholder::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255, 211, 0, .18), transparent 60%);
}
.produit-card__media--placeholder i { position: relative; font-size: 3.1rem; color: rgba(255, 255, 255, .92); }
.produit-card__body { padding: 1.1rem 1.25rem 1.35rem; }
.produit-card__title {
  font-family: "Poppins", "Montserrat", system-ui, sans-serif; font-weight: 700;
  font-size: 1.12rem; line-height: 1.25; color: var(--gdj-blue); margin: 0 0 .45rem;
}
.produit-card__desc { margin: 0; font-size: .88rem; line-height: 1.55; color: #55606f; text-align: left; }