@import url("/templates/joomspirit_134/css/custom/BLOC 00_CHARTE GLOBALE DU SITE.css");
@import url("/templates/joomspirit_134/css/custom/BLOC 01_HEADER_MENU.css");
@import url("/templates/joomspirit_134/css/custom/BLOC 02_FOOTER.css");
@import url("/templates/joomspirit_134/css/custom/BLOC 95_MODAL.css");




/* ===== Sécurité & base ===== */
html, body { overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; }

/* ===== Fallback responsive (si media_queries du template n'est pas chargé) ===== */
@media (max-width: 979px){
  body { font-size: 16px !important; line-height: 1.6 !important; }
  .boxed_layout .wrapper-website,
  .wrapper-website,
  .main-columns,
  .main_content { width: 96% !important; max-width: 96% !important; margin: 0 auto !important; float: none !important; }
  .left_column, .right_column { display: none !important; }
}

/* ===== FAB Back-to-top : TOUJOURS visible, bas/droite ===== */
#t-fab{
  position:fixed; right:1rem; bottom:1rem; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.72); color:#fff; text-decoration:none; 
  z-index:1000002; /* ↑ au-dessus des overlays */
  font-size:20px; line-height:1; box-shadow:0 4px 16px rgba(0,0,0,.25);
  opacity:1; transform:none; pointer-events:auto;
}
#t-fab:hover{ background:rgba(0,0,0,.88); }
@media print{ #t-fab{ display:none!important; } }


/* 2025-11-22 — masquer le FAB global quand une modale est ouverte */
html.tc-modal-open #t-fab,
body.tc-modal-open #t-fab{
  display: none !important;
}



/* ===== Témoignages — styles génériques (sans dépendre du H2) ===== */
.t-toolbar{
  margin: .35rem 0 1rem;
  display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
}
.t-toggle{
  font: inherit; font-weight:600; border:1px solid rgba(0,0,0,.15);
  padding:.25rem .55rem; border-radius:.35rem; background:#f8f8f8; cursor:pointer;
}
.t-section[hidden]{ display:none !important; }

/* Barre globale (Tout ouvrir / réduire / bas) */
.temo-controls{ display:flex; gap:.4rem; flex-wrap:wrap; margin:.25rem 0 1rem; }
.t-ctrl{ font:inherit; padding:.3rem .6rem; border:1px solid rgba(0,0,0,.15); background:#f7f7f7; border-radius:.35rem; cursor:pointer; }

/* Intro “Lire plus” */
.intro-more[hidden]{ display:none !important; }

/* Masquer l’ancien bouton du template pour éviter le doublon */
#toTop{ display:none !important; }


/* === Anti-overflow global (mobile + desktop) === */
html, body { max-width:100%; overflow-x: clip; } /* plus strict que hidden */
.wrapper-website, .website-content, .main-columns, .main_content, .main_component,
.footer-module-position, .bottom_menu {
  box-sizing: border-box; max-width:100%; overflow-x: clip;
}

/* Menu: empêcher le <ul> de dépasser */
#main-nav .main-menu { width:100%; box-sizing:border-box; }
/* Liens qui peuvent être longs */
.footer-contacts a, .contact-info a, .authority-list a, .bottom_menu a {
  word-break: break-word; overflow-wrap:anywhere;
}

/* Grille des extras: colonnes rétractables */
.temoignages-extras { grid-template-columns: 1fr; }
@media (min-width:980px){
  .temoignages-extras { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}

/* Images "cron/probe" absolues: pas d'impact layout */
.4SEO_cron img { display:block; max-width:100%; height:auto; }


/* === HARD RESET RESPONSIVE (force fluide sous 1280px) === */
@media (max-width: 1279.98px){
  html, body { min-width: 0 !important; max-width: 100% !important; overflow-x: clip !important; }

  /* Conteneurs du template */
  .boxed_layout .wrapper-website,
  .wrapper-website,
  .website-content,
  .main-columns,
  .main_content,
  .main_component,
  .footer-module-position,
  .website-footer,
  #website-header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  /* Colonnes latérales: repli total sous 1280 si présentes */
  .left_column, .right_column { display: none !important; }

  /* Listes/menus longs: casser les mots pour éviter tout débordement */
  #main-nav .main-menu, 
  .bottom_menu, 
  .footer-contacts a, .contact-info a, .authority-list a {
    width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Médias et tableaux "anciens" */
  img, video { max-width: 100% !important; height: auto !important; }
  table { width: 100% !important; display: block; overflow-x: auto; }
  pre, code { white-space: pre-wrap; word-wrap: break-word; }
}

/* Petites largeurs historiques du template (<980px): garde existante, OK */

/* === A. Conteneur fluide === */
.wrapper-website { 
  max-width: 1200px;   /* ajuste ta largeur de design */
  width: 100%;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* === B. Éléments médias responsives === */
img, iframe, video { max-width: 100%; height: auto; }
.map-wrapper { position: relative; }
.map-wrapper iframe { 
  width: 100%;
  aspect-ratio: 16 / 9; /* évite la largeur fixe */
  height: auto;
  border: 0;
}

/* === C. Menu : éviter l’excès de largeur sur mobile === */
#main-nav .nav-toggle { display: none; }
@media (max-width: 992px) {
  #main-nav .nav-toggle { display: inline-block; }
  #main-nav .main-menu {
    display: none; 
    flex-direction: column;
    width: 100%;
  }
  #main-nav.open .main-menu { display: flex; }
  #main-nav .main-menu > li { width: 100%; }
  #main-nav .main-menu ul { position: static; } /* sous-menus dans le flux */
}

/* === D. Break de mots longs & traces de débordements === */
.breadcrumb, .main_component, .main_content { overflow-wrap: anywhere; }

/* (Option garde-fou temporaire, le temps d’identifier le coupable)
html, body { overflow-x: hidden; } 
*/

/* ===================================================================
   Nettoyage & harmonisation responsive — ajout non destructif
   Date: 2025-11-03
   Note: aucune règle existante n'est supprimée. Ces surcharges passent après.
   =================================================================== */

html, body { max-width: 100%; overflow-x: clip; }

/* Sécurisation des conteneurs et zones larges */
.wrapper-website, .website-content, .main-columns, .main_content, .main_component,
.footer-module-position, .bottom_menu {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: clip;
}

/* Conteneur principal : largeur max desktop + fluide */
.wrapper-website {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (max-width: 1279.98px) {
  .boxed_layout .wrapper-website,
  .wrapper-website,
  .website-content,
  .main-columns,
  .main_content,
  .main_component,
  .footer-module-position,
  .website-footer,
  #website-header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    float: none !important;
    box-sizing: border-box !important;
  }
}

/* Médias responsives (déclarés une seule fois ici) */
img, iframe, video { max-width: 100%; height: auto; }
.map-wrapper { position: relative; }
.map-wrapper iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* Navigation — on suit la logique du BLOC 01 (main-menu.active, li.open) */
#main-nav .main-menu { width: 100%; box-sizing: border-box; }
#main-nav .nav-toggle { display: none; }
@media (max-width: 979px) {
  #main-nav .nav-toggle { display: inline-block; }
  /* L'affichage est contrôlé par .main-menu.active (JS) */
}

/* Mots longs : éviter les débordements dans des zones à risque */
.breadcrumb, .main_component, .main_content,
.footer-contacts a, .contact-info a, .authority-list a, .bottom_menu a {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* ================================
   PATCH 2025-11-08 — Harmonisation menu mobile (append-only)
   Objectif: rester 100% rétro-compatible sans casser la prod.
   ================================ */
@media (max-width: 992px){
  /* Menu principal replié par défaut */
  #main-nav .main-menu{
    display: none;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
  }
  /* Deux déclencheurs possibles ; on garde les deux pour compat */
  #main-nav .main-menu.active,
  #main-nav.open .main-menu{
    display: flex;
  }
  #main-nav .main-menu > li{ width:100%; }

  /* Sous-menus : fermés par défaut, ouverts quand li.open est posé par le JS */
  #main-nav .main-menu li > ul{ display:none; position: static; width:100%; }
  #main-nav .main-menu li.open > ul{ display:block; }
}

/* Sécurités anti débordements (doublons assumés par cascade, ici version finale) */
html, body{ max-width:100%; overflow-x: clip; }
.breadcrumb, .main_component, .main_content,
.footer-contacts a, .contact-info a, .authority-list a, .bottom_menu a{
  overflow-wrap:anywhere; word-break:break-word;
}


/* ================================
   PATCH 2025-11-08 — Harmonisation menu mobile (append-only)
   Objectif: rester 100% rétro-compatible sans casser la prod.
   ================================ */
@media (max-width: 992px){
  /* Menu principal replié par défaut */
  #main-nav .main-menu{
    display: none;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
  }
  /* Deux déclencheurs possibles ; on garde les deux pour compat */
  #main-nav .main-menu.active,
  #main-nav.open .main-menu{
    display: flex;
  }
  #main-nav .main-menu > li{ width:100%; }

  /* Sous-menus : fermés par défaut, ouverts quand li.open est posé par le JS */
  #main-nav .main-menu li > ul{ display:none; position: static; width:100%; }
  #main-nav .main-menu li.open > ul{ display:block; }
}

/* Accessibilité/fallback clavier : ouverture au focus */
#main-nav .main-menu li:focus-within > ul{ display:block; }

/* Sécurités anti débordements */
html, body{ max-width:100%; overflow-x: clip; }

/* Impression : masquer le FAB */
@media print{
  #t-fab{ display:none !important; }
}

/* ================================
   PATCH 2025-11-08 — Desktop hover highlight (append-only)
   Portée: >= 993px
   ================================ */
@media (min-width: 993px){
  #main-nav .main-menu > li > a{
    position: relative;
    text-decoration-thickness: from-font;
    text-underline-offset: .15em;
    transition: background .2s ease, text-decoration-color .2s ease;
  }
  /* Survol/focus visible : mise en évidence douce et neutre */
  #main-nav .main-menu > li:hover > a,
  #main-nav .main-menu > li:focus-within > a{
    background: rgba(0,0,0,.06);
    text-decoration: underline;
  }
  /* État "open" (si des classes .open sont posées côté JS en desktop) */
  #main-nav .main-menu > li.open > a{
    background: rgba(0,0,0,.08);
  }
}

/* ===============================================
   PATCH 2025-11-08 — FIX (override final)
   But : neutraliser les redondances et garantir le comportement mobile
   Implémentation : append-only + !important pour passer devant tout le reste
   =============================================== */
@media (max-width: 992px){
  /* Le burger DOIT être visible en mobile */
  #main-nav .nav-toggle{ display:inline-block !important; }

  /* Menu replié par défaut */
  #main-nav .main-menu{
    display:none !important;
    flex-direction:column;
    width:100%;
    box-sizing:border-box;
  }

  /* Deux voies compatibles : .active (BLOC 01) OU .open sur #main-nav (legacy) */
  #main-nav .main-menu.active,
  #main-nav.open .main-menu{
    display:flex !important;
  }

  /* Sous-menus : fermés par défaut => ouverts quand li.open */
  #main-nav .main-menu li > ul{ display:none !important; position:static; width:100%; }
  #main-nav .main-menu li.open > ul{ display:block !important; }
}

/* Hover desktop (rappel non bloquant) */
@media (min-width: 993px){
  #main-nav .main-menu > li > a{
    position:relative; text-underline-offset:.15em;
    transition: background .2s ease, text-decoration-color .2s ease;
  }
  #main-nav .main-menu > li:hover > a,
  #main-nav .main-menu > li:focus-within > a{ background:rgba(0,0,0,.06); text-decoration:underline; }
  #main-nav .main-menu > li.open > a{ background:rgba(0,0,0,.08); }
}

/* Accessibilité et sécurité */
#main-nav .main-menu li:focus-within > ul{ display:block; }
@media print{ #t-fab{ display:none !important; } }
html, body{ max-width:100%; overflow-x:clip; }


/* ===============================================
   PATCH 2025-11-09 — v5 (override final)
   Objet : ouvrir les sous-menus en mobile (<=992px)
           pour toutes structures : li > ul | li > .sub-menu | li > .dropdown-menu | li > div > ul
   Implémentation : append-only + !important ciblé (mobile), sans rien retirer
   =============================================== */
@media (max-width: 992px){
  /* Burger visible ; menu replié par défaut */
  #main-nav .nav-toggle{ display:inline-block !important; }
  #main-nav .main-menu{
    display:none !important;
    flex-direction:column;
    width:100%; box-sizing:border-box;
  }
  /* Deux voies de déclenchement prises en charge */
  #main-nav .main-menu.active,
  #main-nav.open .main-menu{ display:flex !important; }

  /* Sous-menus : fermés par défaut (toutes variantes connues) */
  #main-nav .main-menu li > ul,
  #main-nav .main-menu li > .sub-menu,
  #main-nav .main-menu li > .dropdown-menu,
  #main-nav .main-menu li > div > ul{
    display:none !important;
    position:static; width:100%;
  }
  /* …et ouverts quand le <li> porte .open */
  #main-nav .main-menu li.open > ul,
  #main-nav .main-menu li.open > .sub-menu,
  #main-nav .main-menu li.open > .dropdown-menu,
  #main-nav .main-menu li.open > div > ul{
    display:block !important;
  }
}


/* ===============================================
   PATCH 2025-11-09 — v6 (override ultra-robuste)
   Objet : burger + sous-menus en mobile (<=992px) même avec CSS concurrents
   Implémentation : append-only + sélecteurs très spécifiques + !important ciblé
   =============================================== */
@media (max-width: 992px){
  /* Burger visible en mobile */
  body nav#main-nav .nav-toggle{ display:inline-block !important; }

  /* Menu replié par défaut */
  body nav#main-nav > ul.main-menu{
    display:none !important;
    flex-direction:column; width:100%; box-sizing:border-box;
  }

  /* Deux voies compatibles : .active sur le UL et .open sur #main-nav */
  body nav#main-nav.open > ul.main-menu,
  body nav#main-nav > ul.main-menu.active{
    display:flex !important;
  }

  /* Sous-menus : toutes variantes courantes fermées par défaut */
  body nav#main-nav ul.main-menu li > ul,
  body nav#main-nav ul.main-menu li > .sub-menu,
  body nav#main-nav ul.main-menu li > .dropdown-menu,
  body nav#main-nav ul.main-menu li > div > ul{
    display:none !important; position:static; width:100%;
  }

  /* Ouverts quand li.open est posé */
  body nav#main-nav ul.main-menu li.open > ul,
  body nav#main-nav ul.main-menu li.open > .sub-menu,
  body nav#main-nav ul.main-menu li.open > .dropdown-menu,
  body nav#main-nav ul.main-menu li.open > div > ul{
    display:block !important;
  }
}

/* Desktop hover (rappel léger, non bloquant) */
@media (min-width: 993px){
  body nav#main-nav .main-menu > li > a{
    position:relative; text-underline-offset:.15em;
    transition: background .2s ease, text-decoration-color .2s ease;
  }
  body nav#main-nav .main-menu > li:hover > a,
  body nav#main-nav .main-menu > li:focus-within > a{ background:rgba(0,0,0,.06); text-decoration:underline; }
  body nav#main-nav .main-menu > li.open > a{ background:rgba(0,0,0,.08); }
}

/* Sécurité + impression */
body nav#main-nav .main-menu li:focus-within > ul{ display:block; }
@media print{ #t-fab{ display:none !important; } }
html, body{ max-width:100%; overflow-x:clip; }

/* ===============================================
   PATCH 2025-11-09 — v7 (tablet/coarse-pointer support)
   But : permettre l'ouverture/fermeture des sous-menus sur tablettes
         (ex. iPad paysage 1080x810) sans hover, même au-dessus de 992px.
   Implémentation : append-only — aucune suppression des règles existantes.
   =============================================== */

/* 1) Mobile (<= 992px) — rappel non destructif */
@media (max-width: 992px){
  #main-nav .nav-toggle{ display:inline-block !important; }
  #main-nav .main-menu{ display:none !important; flex-direction:column; width:100%; box-sizing:border-box; }
  #main-nav .main-menu.active,
  #main-nav.open .main-menu{ display:flex !important; }

  #main-nav .main-menu li > ul,
  #main-nav .main-menu li > .sub-menu,
  #main-nav .main-menu li > .dropdown-menu,
  #main-nav .main-menu li > div > ul{ display:none !important; }
  #main-nav .main-menu li.open > ul,
  #main-nav .main-menu li.open > .sub-menu,
  #main-nav .main-menu li.open > .dropdown-menu,
  #main-nav .main-menu li.open > div > ul{ display:block !important; }
}

/* 2) Tablettes / périphériques sans hover (>= 993px, mais hover:none|pointer:coarse)
      On autorise .open à afficher les sous-menus même sans :hover */
@media (min-width: 993px) and (hover: none), (min-width: 993px) and (pointer: coarse){
  /* Par défaut, masquer les sous-menus si pas hover */
  #main-nav .main-menu li > ul,
  #main-nav .main-menu li > .sub-menu,
  #main-nav .main-menu li > .dropdown-menu,
  #main-nav .main-menu li > div > ul{ display:none !important; }

  /* Les afficher quand le <li> est en état .open (posé par le JS) */
  #main-nav .main-menu li.open > ul,
  #main-nav .main-menu li.open > .sub-menu,
  #main-nav .main-menu li.open > .dropdown-menu,
  #main-nav .main-menu li.open > div > ul{ display:block !important; }
}

/* 3) Accessibilité + impression */
#main-nav .main-menu li:focus-within > ul{ display:block; }
@media print{ #t-fab{ display:none !important; } }

/* ===============================================
   PATCH 2025-11-09 — v8 (force-open small screens)
   Objet : garantir l'ouverture du menu en <= 992px même si d'autres CSS/JS s'y opposent
   Implémentation : append-only ; on utilise la classe html.tc-nav-open comme clé d'override
   =============================================== */
@media (max-width: 992px){
  /* Menu replié par défaut (rappel) */
  nav#main-nav > ul.main-menu{ display:none !important; }

  /* Ouverture forcée quand le JS pose .tc-nav-open sur <html> */
  html.tc-nav-open nav#main-nav > ul.main-menu{ display:flex !important; }

  /* Sous-menus visibles quand <li> est .open, y compris en mode "force" */
  html.tc-nav-open nav#main-nav ul.main-menu li.open > ul{ display:block !important; }
}


/* ===============================================
   PATCH 2025-11-09 — v9 helper (optionnel)
   - renforce l'ouverture par html.tc-nav-open en mobile
   =============================================== */
@media (max-width: 992px){
  html.tc-nav-open nav#main-nav > ul.main-menu{ display:flex !important; }
  html.tc-nav-open nav#main-nav ul.main-menu li.open > ul{ display:block !important; }
}

/* ===============================================
   PATCH 2025-11-10  -  Harmonisation douce des seuils
   =============================================== */

@media (max-width: 992px){
  #main-nav .nav-toggle{ display:inline-block !important; }
}


#main-nav .nav-toggle,
#main-nav .main-menu li > a { touch-action: manipulation; }


/* 1) Désactiver l'ouverture au :hover sur écrans tactiles (évite le "tap pour hover" + 2e tap) */
@media (hover:none), (pointer:coarse){
  #main-nav .main-menu > li:hover > ul { display: none !important; }
}

/* 2) Unifier le seuil mobile à 992px (sans casser le 979px existant) */
@media (max-width: 992px){
  #main-nav .nav-toggle { display: inline-block !important; }
  /* Affichage contrôlé par .active OU par html.tc-nav-open */
  #main-nav .main-menu { display: none; }
  #main-nav .main-menu.active { display: block; }
  html.tc-nav-open #main-nav .main-menu { display: block !important; }
}

/* 3) Améliorer la réponse au toucher (réduit les "ghost clicks") */
#main-nav .nav-toggle,
#main-nav .main-menu li > a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }


/* === NAV - Hotfix CSS (append-only, dernière position) ================== */

/* A) Sur tactile (mobile & tablettes), on désactive l'ouverture auto au :focus-within
      -> évite le cycle "tap 1 = focus ouvre le sous-menu, tap 2 = action" */
@media (max-width: 992px), (hover: none), (pointer: coarse){
  #main-nav .main-menu li:focus-within > ul { 
    display: none !important; 
  }
}

/* B) Unifier l'affichage du menu ouvert en mobile : toujours FLEX
      (on écrase les variantes 'block' perdues dans les blocs précédents) */
@media (max-width: 992px){
  #main-nav .main-menu.active,
  #main-nav.open .main-menu,
  html.tc-nav-open #main-nav .main-menu{
    display: flex !important;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
  }
}

/* C) Sur tactile (y compris iPad > 992px), on n'affiche les sous-menus 
      QUE si le <li> porte .open (posé par le JS), pas au hover/focus */
@media (hover: none), (pointer: coarse){
  #main-nav .main-menu li > ul { display: none !important; }
  #main-nav .main-menu li.open > ul { display: block !important; }
}

/* D) Hygiene: garantir le burger visible en mobile (si un bloc l'a masqué) */
@media (max-width: 992px){
  #main-nav .nav-toggle{ display: inline-block !important; }
}

/* E) Micro-confort tactile (déjà présent plus haut mais on s'assure du dernier mot) */
#main-nav .nav-toggle,
#main-nav .main-menu li > a { 
  touch-action: manipulation; 
  -webkit-tap-highlight-color: transparent; 
}

/* Tactile : on interdit l’ouverture auto au focus/hover */
@media (hover:none), (pointer:coarse){
  #main-nav .main-menu li:focus-within > ul { display: none !important; }
  #main-nav .main-menu > li:hover > ul { display: none !important; }
  #main-nav .main-menu li.open > ul { display: block !important; }
}

/* Mobile : menu ouvert = flex, pour éviter les reflows block↔flex */
@media (max-width: 992px){
  #main-nav .main-menu.active,
  #main-nav.open .main-menu,
  html.tc-nav-open #main-nav .main-menu{
    display: flex !important;
    flex-direction: column;
  }
}

/* Confort tactile */
#main-nav .nav-toggle,
#main-nav .main-menu li > a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }



/* ===============================================
   PATCH 2025-11-10 — 19h15
   =============================================== */

/* Indentation lisible des niveaux 2+ quand le menu est en colonne (mobile/tablette) */
@media (max-width: 992px), (hover:none), (pointer:coarse){
  #main-nav .main-menu li > ul{
    display: none;                  /* sera remis à block via .open */
    margin: 0.25rem 0 0.5rem 0.875rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--nav-accent, #e5e5e5);
  }
  #main-nav .main-menu li.open > ul{ display:block; }
  #main-nav .main-menu > li > a{ font-weight:600; }
  #main-nav .main-menu li li > a{ font-weight:400; padding-left: 0.25rem; }
  #main-nav .main-menu li li li > a{ padding-left: 0.75rem; } /* niveau 3+ un peu plus marqué */
}


/* Socle visuel léger pour le header/nav : fond, flou et ombre discrets */
#main-nav{
  background: var(--nav-bg, rgba(255,255,255,0.92));
  -webkit-backdrop-filter: saturate(130%) blur(6px);
  backdrop-filter: saturate(130%) blur(6px);
  box-shadow: 0 8px 22px -14px rgba(0,0,0,0.25);
}

/* Sticky universel (nav collé en haut avec z-index au-dessus du contenu) */
#main-nav{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2000;
}

/* Cas iOS/tablettes où sticky peut échouer si un parent a overflow/transform :
   on force un fallback fixed en mobile */
@media (max-width: 992px){
  html.tc-sticky-fallback #main-nav{
    position: fixed;
    left: 0; right: 0; top: 0;
  }
  /* compenser la hauteur du header en mobile (ajuste la valeur si besoin) */
  html.tc-sticky-fallback body{ padding-top: var(--nav-mobile-offset, 64px); }
}


/* Rappel sticky (priorité en fin de cascade) */
body.nav-fixed #main-nav{ position: fixed; top: 0; left: 0; right: 0; z-index: 10070; }
body.nav-fixed{ padding-top: var(--navH, 58px); }


/* Indentation claire des sous-menus en mobile */
@media (max-width: 979px){
  #main-nav .main-menu > li > ul{
    padding-left: 16px !important;  /* miroir BLOC 01 */
  }
}


/* Pendant la stabilisation, on cale le nav mobile sur 979px comme en 03/11 */
@media (max-width: 992px) and (min-width: 980px){
  #main-nav .nav-toggle{ display:none !important; }
  #main-nav .main-menu{ display:flex !important; }
}

/* modif sticky - 10/11/25 - 20h00 */
#main-nav{ position:relative !important; } 
html.tc-sticky-fallback #main-nav{ position:relative !important; }


/* === Sticky “03/11” : fixed + compensation via .empty-space ================= */
body.nav-fixed #website-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10070;
  /* fond lisible au scroll — ajuste selon ta charte */
  background: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: saturate(130%) blur(6px);
  backdrop-filter: saturate(130%) blur(6px);
  box-shadow: 0 10px 22px -16px rgba(0,0,0,0.28);
}

/* Le spacer prend la hauteur du header collé */
.empty-space{ height: 0; }

/* Robustesse tactile / iOS : désactive le hover/focus auto sur sous-menus */
@media (hover:none), (pointer:coarse){
  #main-nav .main-menu > li:hover > ul { display: none !important; }
  #main-nav .main-menu li:focus-within > ul { display: none !important; }
  #main-nav .main-menu li.open > ul { display: block !important; }
}

/* Confort tactile */
#main-nav .nav-toggle,
#main-nav .main-menu li > a{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}


/* ===============================================
   FIX PACK — Accueil : lisibilité + responsive
   Date : 2025-11-11
   Portée : append-only (n'écrase rien d'utile)
   =============================================== */

/* 1) Stop aux césures agressives dans le contenu lisible */
.main_component, .main_content,
.main_component p, .main_component li,
.main_component a, .main_component h1,
.main_component h2, .main_component h3 {
  word-break: normal !important;
  overflow-wrap: break-word !important; /* césure douce */
  hyphens: auto !important;
}

/* 2) Boutons/CTA (liens color-*) : aspect bouton + césure normale */
a[class^="color-"], a[class*=" color-"]{
  display: inline-block;
  padding: .45rem .75rem;
  border-radius: .5rem;
  text-decoration: none;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* 3) Cartes d'accueil (.image-text-below .one-third) : grille fluide */
.image-text-below { display: block; }
.image-text-below .image-text-image { display:block; width:100%; height:auto; }
.image-text-below .image-text-column { padding: .5rem 0; }

.one-third{
  width: 100% !important;
  float: none !important;
  margin: 0 0 1rem 0 !important;
}
@media (min-width: 980px){
  /* 3 colonnes fluides sur desktop, sans dépendre de .last */
  .one-third{
    width: calc(33.333% - .666rem) !important;
    float: left !important;
    margin: 0 .333rem 1rem .333rem !important;
  }
}

/* 4) Listes dans les cartes : respiration minimale */
.image-text-below ul{ margin: .5rem 0 .5rem 1rem; }

/* 5) Césure agressive conservée uniquement là où utile (URLs longues) */
.authority-list a, .bottom_menu a, .contact-info a, .footer-contacts a{
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

/* === STICKY — override final (append-only) ====================== */
/* On colle tout le header, puis on compense via .empty-space */
body.nav-fixed #website-header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 10070;
}

/* Le nav peut rester "static" à l'intérieur d'un header fixed */
body.nav-fixed #main-nav{ position: static !important; }

/* Par défaut, le spacer sera ajusté par le JS ci-dessous */
.empty-space{ height: var(--navH, 64px); }



/* Menus desktop : apparition immédiate, sans transition */
@media (min-width: 993px){
  #main-nav .main-menu > li{ position: relative; }
  #main-nav .main-menu > li > ul{
    position: absolute; left: 0; top: 100%;
    min-width: 14rem;
    transition: none !important;
    animation: none !important;
    will-change: auto;
    transform: translateZ(0); /* réduit les repaints sur Safari */
  }
}


/* ===============================================
   FIX — Sticky & sous-menus (2025-11-11)
   Append-only : prend la main sur BLOC 01 + custom existants
   =============================================== */

/* A) Sticky sans dépendre d’une classe body ni du nav */
#website-header.website-header{
  position: sticky !important;
  top: 0;
  z-index: 10070;
}

/* B) Le nav n’a pas besoin d’être forcé en relative : on neutralise l’anti-sticky */
#website-header #main-nav{
  position: static !important; /* écrase #main-nav{position:relative!important;} */
}

/* C) Desktop : on coupe l’ouverture au :hover pour éviter la latence “deux temps”.
      Désormais, seul .open > ul s’affiche (piloté par JS ci-dessous). */
@media (min-width: 993px){
  #main-nav .main-menu > li{ position: relative; }

  #main-nav .main-menu li:hover > ul,
  #main-nav .main-menu li:focus-within > ul{
    display: none !important;
  }
  #main-nav .main-menu li.open > ul{
    display: block !important;
  }

  /* D) Sous-menus : stop césures agressives, largeur stable, pas d’animation */
  #main-nav .main-menu > li > ul{
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
    width: max-content;          /* s’ajuste au contenu */
    min-width: 14rem;            /* plancher lisible */
    max-width: 32rem;            /* plafond raisonnable */
    transition: none !important;
    animation: none !important;
    will-change: auto;
    transform: translateZ(0);    /* lissage Safari/iPad */
  }

  /* Les liens internes peuvent revenir à la ligne sans faire bouger la largeur */
  #main-nav .main-menu > li > ul > li > a{
    display:block;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    padding: .4rem .9rem;
  }
}

/* E) (Option perf tactile) : si tu vois encore un micro “palier” sur iPad,
      commente provisoirement tout backdrop-filter sur le header/nav */
@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
  @media (hover:none), (pointer:coarse){
    #website-header, #main-nav{
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }
  }
}

/* === Desktop : réactiver l'ouverture au survol (sans latence) === */
@media (min-width: 993px){
  /* Ouvre le sous-menu au hover */
  #main-nav .main-menu > li:hover > ul{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Supprime toute animation de drop-down potentiellement coûteuse */
  #main-nav .main-menu > li > ul{
    transition: none !important;
    animation: none !important;
  }
  /* S'assure que rien ne clippe le sous-menu */
  #website-header, #main-nav{ overflow: visible !important; }
}

/* === Desktop : sous-menus instantanés (JS .open), sans hover ni animation === */
@media (min-width: 993px){
  /* On désactive l'ouverture au :hover */
  #main-nav .main-menu > li:hover > ul,
  #main-nav .main-menu > li:focus-within > ul{
    display: none !important;
  }

  /* État contrôlé par JS */
  #main-nav .main-menu > li.open > ul{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    height: auto !important;
    max-height: none !important;
    filter: none !important;
  }

  /* On supprime toute transition/animation sur l'arbo des sous-menus */
  #main-nav .main-menu > li,
  #main-nav .main-menu > li > ul,
  #main-nav .main-menu > li > ul *{
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  /* Largeurs stables, pas de clipping */
  #main-nav .main-menu > li{ position: relative; }
  #main-nav .main-menu > li > ul{
    position: absolute; left: 0; top: 100%;
    width: max-content; min-width: 14rem; max-width: 32rem;
    white-space: normal !important;
  }
  #main-nav, #website-header{ overflow: visible !important; }
}

/* === FINAL OVERRIDE — Desktop (souris) : hover instantané, sans latence === */
@media (min-width: 993px) and (hover: hover), (min-width: 993px) and (pointer: fine){
  html body nav#main-nav .main-menu > li:hover > ul{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    height: auto !important;
    max-height: none !important;
    filter: none !important;
  }
  /* Coupe toute transition/anim résiduelle (= adieu le “palier 30% → 100%”) */
  html body nav#main-nav .main-menu > li,
  html body nav#main-nav .main-menu > li > ul,
  html body nav#main-nav .main-menu > li > ul *{
    transition: none !important;
    animation: none !important;
  }
  /* Pas de clipping des dropdowns */
  html body #website-header,
  html body nav#main-nav{ overflow: visible !important; }
}

/* === Desktop (≥993px) : sous-menus prêts à peindre, sans anim === */
@media (min-width: 993px) and (hover: hover), (min-width: 993px) and (pointer: fine){
  /* 1) Pas d'anim nulle part dans l'arbo */
  #main-nav .main-menu > li > ul,
  #main-nav .main-menu > li > ul *{
    transition: none !important;
    animation: none !important;
  }
  /* 2) Isole + promeut en calque GPU pour éviter le "1er palier" */
  #main-nav .main-menu > li > ul{
    contain: layout paint style;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

/* (Option test rapide si le palier persiste encore un peu)
#main-nav .main-menu > li > ul{ box-shadow:none !important; }
*/


/* === FINAL DESKTOP DROPDOWN FIX — no display toggles, no first-hover lag === */
@media (min-width: 993px) and (hover: hover), (min-width: 993px) and (pointer: fine){
  html body nav#main-nav{ overflow: visible !important; }
  html body nav#main-nav .main-menu > li{ position: relative; }

  /* Sous-menus TOUJOURS présents en layout (display:block), mais invisibles.
     On supprime le coût du 1er passage none->block. */
  html body nav#main-nav .main-menu > li > ul{
    position: absolute; left: 0; top: 100%;
    display: block !important;                 /* <- clé anti-lag */
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    /* Taille/peinture stables */
    width: max-content; min-width: 14rem; max-width: 32rem;
    margin-top: 0 !important;
    height: auto !important; max-height: none !important;
    transition: none !important; animation: none !important; filter: none !important;
    backface-visibility: hidden; transform: translateZ(0);
    z-index: 10080;
  }

  /* Affichage instantané au survol / focus */
  html body nav#main-nav .main-menu > li:hover > ul,
  html body nav#main-nav .main-menu > li:focus-within > ul{
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* =========================================
   PATCH FINAL — Page BIO
   Bandeau réduit NON tronqué + encart discret
   ========================================= */

/* Bandeau : image réduite, non recadrée */
.bio-hero-boat {
  max-width: 75ch;               /* largeur alignée sur la bio */
  margin: 0 auto 1.5rem;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}

.bio-hero-boat img {
  display: block;
  width: 100%;
  height: auto !important;       /* conserve les proportions : PAS de coupe */
}

/* Encart du carnet intime : encore plus discret */
.bio-article .bio-boat-inline {
  max-width: 220px;              /* 20% plus petit que la version actuelle */
  margin: 0.25rem auto 1rem;     /* centré, respiration */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.bio-article .bio-boat-inline img {
  display: block;
  width: 100%;
  height: auto !important;       /* jamais tronqué */
}

/* Mobile */
@media (max-width: 768px) {
  .bio-hero-boat { max-width: 100%; }
  .bio-article .bio-boat-inline { max-width: 65%; }
}


/* =========================================
   PATCH 2025-11-17 — Page BIO
   Bandeau bateau (image 1600x800, sans recadrage)
   ========================================= */

.bio-hero-boat {
  max-width: 75ch;              /* même largeur visuelle que la bio */
  margin: 0 auto 1.2rem;        /* centré, petit espace sous le bandeau */
  height: auto !important;      /* annule les hauteurs fixes précédentes */
  aspect-ratio: auto !important;/* annule les aspect-ratio précédents */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}

.bio-hero-boat img {
  display: block;
  width: 100%;
  height: auto !important;      /* conserve le ratio 2:1 sans coupe */
}

/* =========================================
   PAGE BIO — Insert bateau dans le texte
   Version forcée (JCE + float)
   ========================================= */

.bio-article img.bio-boat-left{
  float: left !important;
  max-width: 150px !important;   /* avant 160 */
  height: auto !important;
  display: block;
   margin: 0.35rem 1.5rem 0.8rem 0 !important;  /* un peu plus bas */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Variante droite si un jour tu en as besoin */
.bio-article img.bio-boat-right{
  float: right !important;
  max-width: 160px !important;
  height: auto !important;
  display: block;
  margin: 0.1rem 0 0.8rem 1.5rem !important;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Mobile : on casse le float pour garder une bonne lisibilité */
@media (max-width: 768px){
  .bio-article img.bio-boat-left,
  .bio-article img.bio-boat-right{
    float: none !important;
    max-width: 70% !important;
    margin: 0.5rem auto 0.8rem !important;
  }
}


/* =========================================
   PATCH 2025-11-18 — Dossier expériences non ordinaires
   Bandeau + insert flous
   ========================================= */

/* Petit bandeau entre sections */
.dossier.non-ordinaires .exno-hero {
  max-width: 75ch;
  margin: 1.5rem auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.dossier.non-ordinaires .exno-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Photo immersée dans le texte */
.dossier.non-ordinaires img.exno-photo-left {
  float: left;
  max-width: 160px;              /* discret, on peut descendre à 150px si besoin */
  height: auto;
  margin: 0.2rem 1.5rem 0.9rem 0;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Mobile : on casse le flottant */
@media (max-width: 768px) {
  .dossier.non-ordinaires img.exno-photo-left {
    float: none;
    display: block;
    max-width: 70%;
    margin: 0.5rem auto 1rem;
  }
}


/* --- Héros / bandeaux pour expériences non ordinaires --- */
.exno-hero {
  max-width: 960px;
  margin: 0 0 1.8rem;
}
.accompagnement.theme .exno-hero,
.dossier.non-ordinaires .exno-hero {
  margin-left: auto;
  margin-right: auto;
}
.exno-hero img {
  display: block;
  width: 100%;
  height: auto;          /* on laisse l'image respirer */
  border-radius: 16px;
  object-fit: cover;
}

/* --- Petites images flottantes (accompagnement + dossier) --- */
img.exno-photo-left,
img.exno-photo-right {
  max-width: 170px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

img.exno-photo-left {
  float: left;
  margin: 0.2rem 1.5rem 1rem 0;
}

img.exno-photo-right {
  float: right;
  margin: 0.2rem 0 1rem 1.5rem;
}

/* Sur mobile : images centrées, non flottantes */
@media (max-width: 768px) {
  img.exno-photo-left,
  img.exno-photo-right {
    float: none;
    display: block;
    max-width: 70%;
    margin: 0.5rem auto 1rem;
  }
}

/* =========================================
   BLOC — Page "Expériences non ordinaires"
   Bandeau eau turquoise
   ========================================= */

.accompagnement.theme .exno-hero {
  max-width: 960px;
  margin: 0 auto 2.5rem;
  border-radius: 10px;
  overflow: hidden;          /* masque ce qui dépasse */
}

.accompagnement.theme .exno-hero img {
  display: block;
  width: 100%;
  height: clamp(140px, 24vh, 220px); /* bandeau panoramique */
  object-fit: cover;                  /* recadrage propre */
}

/* =========================================
   OVERRIDE FINAL — Page "Expériences non ordinaires"
   Bandeau eau turquoise plus panoramique
   ========================================= */

/* Le conteneur du bandeau (ou l'image si la classe est sur <img>) */
.accompagnement.theme .exno-hero,
.accompagnement.theme img.exno-hero {
  display: block;
  max-width: 960px;
  margin: 0 auto 2.5rem;   /* centré + espace sous le bandeau */
  border-radius: 12px;
  overflow: hidden;
}

/* L'image elle-même : format bandeau, recadrage propre */
.accompagnement.theme .exno-hero img,
.accompagnement.theme img.exno-hero {
  width: 100% !important;
  height: clamp(110px, 18vh, 190px) !important; /* beaucoup plus horizontal */
  object-fit: cover !important;                 /* on recadre dans l'eau turquoise */
}

/* =========================================
   OVERRIDE FINAL — Bandeau EXNO (eau turquoise)
   Afficher l'image entière, sans recadrage
   ========================================= */

.accompagnement.theme .exno-hero,
.accompagnement.theme img.exno-hero {
  display: block;
  max-width: 960px;
  margin: 0 auto 2.5rem;   /* centré + espace sous le bandeau */
  border-radius: 12px;
  overflow: hidden;
}

/* Image : on respecte le format, pas de découpe */
.accompagnement.theme .exno-hero img,
.accompagnement.theme img.exno-hero {
  width: 100%;
  height: auto !important;         /* plus de hauteur imposée */
  object-fit: contain !important;  /* on garde toute l'image */
}

/* Bandeau page "Expériences non ordinaires" */
.accompagnement-hero.exno-hero {
  max-width: 960px;
  margin: 1.5rem auto 2.5rem;
  border-radius: 16px;
  overflow: hidden;
}

.accompagnement-hero.exno-hero img {
  display: block;
  width: 100%;
  height: auto;        /* pas de recadrage vertical */
  max-height: none;
  object-fit: contain; /* au cas où un ancien object-fit: cover traîne */
}


/* =========================================================
   Vague lumineuse douce — Page "Expériences non ordinaires"
   Cible : le bandeau .exno-hero (accompagnement + dossier)
   ========================================================= */

/* On s'assure que le conteneur peut recevoir la vague */
.accompagnement.theme .exno-hero,
.dossier.non-ordinaires .exno-hero {
  position: relative;
  overflow: hidden;  /* déjà présent, mais on re-confirme */
}

/* =========================================================
   Vague lumineuse horizontale — Page EXNO
   Cible : .exno-hero (accompagnement + dossier)
   ========================================================= */

.accompagnement.theme .exno-hero,
.dossier.non-ordinaires .exno-hero {
  position: relative;
  overflow: hidden;
}

/* =========================================================
   Respiration lumineuse du ciel — Page EXNO
   Cible : .exno-hero (accompagnement + dossier)
   ========================================================= */

.accompagnement.theme .exno-hero,
.dossier.non-ordinaires .exno-hero {
  position: relative;
  overflow: hidden;
}

/* Lumière douce dans la partie haute de l'image (ciel) */
.accompagnement.theme .exno-hero::before,
.dossier.non-ordinaires .exno-hero::before {
  content: "";
  position: absolute;
  inset: -10%;              /* déborde un peu pour éviter les bords nets */
  pointer-events: none;

  /* Tache lumineuse large, centrée dans le ciel */
  background:
    radial-gradient(
      160% 120% at 50% 8%,             /* grande ellipse, centrée haut */
      rgba(255, 255, 245, 0.95) 0%,    /* coeur lumineux */
      rgba(218, 235, 255, 0.75) 24%,   /* lueur bleu-ciel très douce */
      rgba(140, 175, 210, 0.35) 42%,   /* halo plus sombre */
      transparent 70%                  /* fondu dans le reste de l'image */
    );

  mix-blend-mode: screen;
  opacity: 0;
  animation: exnoSkyGlow 14s ease-in-out infinite;
}

/* Animation : la lumière se réveille, puis se rendort */
@keyframes exnoSkyGlow {
  /* 0 → 6% : apparition douce au chargement */
  0% {
    opacity: 0;
  }

  /* montée rapide mais pas brutale */
  6% {
    opacity: 0.95;
  }

  /* plateau lumineux qui commence à s’adoucir */
  20% {
    opacity: 0.85;
  }

  /* la lumière reste présente mais plus douce */
  35% {
    opacity: 0.65;
  }

  /* elle se retire progressivement */
  50% {
    opacity: 0.35;
  }

  /* retour au calme */
  60% {
    opacity: 0;
  }

  /* repos jusqu’au prochain cycle */
  100% {
    opacity: 0;
  }
}



/* Option : pause au clic si tu utilises déjà la classe .exno-wave-paused */
.accompagnement.theme .exno-hero.exno-wave-paused::before,
.dossier.non-ordinaires .exno-hero.exno-wave-paused::before {
  animation-play-state: paused;
}

/* Respect du prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .accompagnement.theme .exno-hero::before,
  .dossier.non-ordinaires .exno-hero::before {
    animation: none !important;
    opacity: 0;
  }
}


/* Pause possible si tu ajoutes la classe .exno-wave-paused via JS */
.accompagnement.theme .exno-hero.exno-wave-paused::before,
.dossier.non-ordinaires .exno-hero.exno-wave-paused::before {
  animation-play-state: paused;
}

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .accompagnement.theme .exno-hero::before,
  .dossier.non-ordinaires .exno-hero::before {
    animation: none !important;
    opacity: 0;
  }
}



/* Option : pause au clic (classe ajoutée via JS) */
.accompagnement.theme .exno-hero.exno-wave-paused::before,
.dossier.non-ordinaires .exno-hero.exno-wave-paused::before {
  animation-play-state: paused;
}

/* Accessibilité : pas d'animation si l'utilisateur préfère moins de mouvements */
@media (prefers-reduced-motion: reduce) {
  .accompagnement.theme .exno-hero::before,
  .dossier.non-ordinaires .exno-hero::before {
    animation: none !important;
    opacity: 0;
  }
}

/* =========================================================
   2025-11-24 — Dossier "Expériences non ordinaires"
   Ajustement des tailles de photos sur grands écrans
   ========================================================= */

/* Bandeau principal du dossier : plus étroit sur desktop */
.dossier.non-ordinaires .exno-hero {
  /* Sur mobile/tablette : 100% de la largeur du contenu,
     sur desktop : largeur visuelle plus contenue */
  max-width: 56ch;
  margin: 1.75rem auto 2.4rem;
}

/* Sur très grands écrans, on resserre encore un peu */
@media (min-width: 1400px) {
  .dossier.non-ordinaires .exno-hero {
    max-width: 52ch;
  }
}

/* Petites photos intégrées dans le texte du dossier :
   on les réduit légèrement sur les grands écrans */
@media (min-width: 992px) {
  .dossier.non-ordinaires img.exno-photo-left,
  .dossier.non-ordinaires img.exno-photo-right {
    max-width: 150px;
  }
}

@media (min-width: 1400px) {
  .dossier.non-ordinaires img.exno-photo-left,
  .dossier.non-ordinaires img.exno-photo-right {
    max-width: 140px;
  }
}

/* =========================================================
   2025-11-24 — Animation EXNO
   Réservée au dossier "Expériences non ordinaires"
   (neutralisation sur les pages d'accompagnement)
   ========================================================= */

/* On coupe la respiration lumineuse sur les pages d'accompagnement
   qui réutilisent .exno-hero, pour que l'effet reste dédié au dossier */
.accompagnement.theme .exno-hero::before {
  animation: none !important;
  opacity: 0 !important;
}


/* --------------------------------------------------------- */
/* 2025-11-22 — override final : taille de police spécifique pour le contenu en modale */
body.tc-modal-doc-body {
  font-size: 0.9rem !important;
}

@media (max-width: 768px){
  body.tc-modal-doc-body {
    font-size: 0.85rem !important;
  }
}


/* =========================================================
   2025-11-24 — Dossier EXNO
   Agrandir la photo insérée dans le texte
   ========================================================= */

/* Taille par défaut sur desktop : un peu plus généreuse */
.dossier.non-ordinaires img.exno-photo-left {
  max-width: 220px;
}

/* Sur très grands écrans, on peut aller un peu plus loin */
@media (min-width: 1400px) {
  .dossier.non-ordinaires img.exno-photo-left {
    max-width: 240px;
  }
}


/* =========================================================
   2025-11-24 — Dossier EXNO
   Animation de lumière un peu plus visible
   (sans toucher aux autres pages)
   ========================================================= */

/* On garde le même fond lumineux déjà défini,
   mais on change d'animation pour ce dossier uniquement */
.dossier.non-ordinaires .exno-hero::before {
  animation: exnoSkyGlowDossier 10s ease-in-out infinite;
}

/* Nouvelle version : cycle plus court et pic de lumière plus net */
@keyframes exnoSkyGlowDossier {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  25% {
    opacity: 0.9;
  }
  40% {
    opacity: 0.7;
  }
  55% {
    opacity: 0.4;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* =========================================================
   2025-11-24 — Dossier EXNO
   Normaliser les photos insérées en début de paragraphe
   ========================================================= */

/* Desktop : petites images flottantes à gauche */
article.dossier.non-ordinaires p > img:first-child {
  display: inline-block;
  float: left;
  max-width: 220px;
  height: auto;
  margin: 0.2rem 1.5rem 0.9rem 0;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Sur très grands écrans, on garde le même plafond que pour exno-photo-left */
@media (min-width: 1400px) {
  article.dossier.non-ordinaires p > img:first-child {
    max-width: 240px;
  }
}

/* Mobile : on casse le flottant et on centre (aligné à exno-photo-left) */
@media (max-width: 768px) {
  article.dossier.non-ordinaires p > img:first-child {
    float: none;
    display: block;
    max-width: 70%;
    margin: 0.5rem auto 1rem;
  }
}


/* =========================================
   GLOBAL ARTICLES — colonne centrée & confort de lecture
   ========================================= */

/* 2.1 Conteneur de l'article : colonne centrée avec fond doux */
body.com_content.view-article .item-page {
  max-width: 75ch;
  margin: 2.2rem auto 2.5rem;
  padding: 1.8rem 1.6rem 2rem;
  background: #fdfaf4;                 /* un peu plus chaud que #f9f6ef */
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

/* Sur petit écran : on garde la largeur mais on allège un peu les marges */
@media (max-width: 768px) {
  body.com_content.view-article .item-page {
    margin: 1.4rem auto 1.8rem;
    padding: 1.2rem 1rem 1.6rem;
    border-radius: 10px;
  }
}

/* 2.2 Respiration des paragraphes et titres dans les articles */

body.com_content.view-article .item-page p,
body.com_content.view-article .item-page ul,
body.com_content.view-article .item-page ol {
  margin: 0 0 0.9rem;   /* espace sous chaque bloc de texte */
}

/* H2 : vraie respiration avant/après */
body.com_content.view-article .item-page h2 {
  margin-top: 2.2rem !important;
  margin-bottom: 1.1rem !important;
}

/* H3 : un peu moins que H2, mais plus qu’un simple paragraphe */
body.com_content.view-article .item-page h3 {
  margin-top: 1.6rem !important;
  margin-bottom: 0.7rem !important;
}

/* Si un titre suit directement un paragraphe, on renforce le "avant titre" */
body.com_content.view-article .item-page p + h2,
body.com_content.view-article .item-page ul + h2,
body.com_content.view-article .item-page ol + h2 {
  margin-top: 2.4rem !important;
}

body.com_content.view-article .item-page p + h3,
body.com_content.view-article .item-page ul + h3,
body.com_content.view-article .item-page ol + h3 {
  margin-top: 1.8rem !important;
}

/* 2.3 Liens dans le corps des articles : soulignés par défaut */

/* On cible uniquement le contenu d'article, pas les menus, ni le footer, etc. */
body.com_content.view-article .item-page a {
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 0.07em;
}

/* Exceptions : boutons/CTA ou liens déjà stylés comme boutons */
body.com_content.view-article .item-page a[class^="color-"],
body.com_content.view-article .item-page a[class*=" color-"],
body.com_content.view-article .item-page a.button,
body.com_content.view-article .item-page a.btn,
body.com_content.view-article .item-page .tc-button a {
  text-decoration: none;
}

/* Au survol : cohérent avec la charte (couleur or) */
body.com_content.view-article .item-page a:hover {
  color: #d5a76e;
}

/* 2.4 Petits blocs "techniques" (note, info) si tu en as besoin plus tard */

body.com_content.view-article .item-page .tc-note {
  margin: 1.2rem 0;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  background: rgba(213, 167, 110, 0.06);
  border-left: 3px solid rgba(213, 167, 110, 0.9);
  font-size: 0.94rem;
}

/* =========================================
   VUES ARTICLE — centrage sur grands écrans
   Forcer la colonne de contenu à occuper 100%
   même au-dessus de 1280px
   ========================================= */

body.com_content.view-article .main-columns,
body.com_content.view-article .main_content,
body.com_content.view-article .main_component {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}

/* On masque les colonnes latérales éventuelles dans les vues article */
body.com_content.view-article .left_column,
body.com_content.view-article .right_column {
  display: none !important;
}


/* ===================================================================
   GLOBAL — VISIBILITÉ DES LIENS DANS LE CONTENU (2026-01-25)
   But : liens identifiables sans dépendre d'une vue Joomla précise
   (underline + offset + épaisseur) + focus clavier
   =================================================================== */

:root{
  --tc-link-color: var(--tc-color-brand-blue-soft);
  --tc-link-underline: rgba(26, 56, 88, 0.35);
  --tc-link-hover-color: var(--tc-color-accent-gold);
  --tc-link-hover-underline: rgba(213, 167, 110, 0.95);
  --tc-link-focus-ring: rgba(213, 167, 110, 0.55);
}

/* 1) Liens dans le texte courant (paragraphes / listes / citations)
      Scope : uniquement la colonne de contenu */
.main_component
  :where(.item-page, article, .accompagnement-page, .amih-page, .tc-regression)
  :where(p, li, blockquote, dd, dt, figcaption) a{
  color: var(--tc-link-color);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--tc-link-underline);
  text-decoration-skip-ink: auto;
}

/* Hover/focus : cohérent avec votre charte (or doux) */
.main_component
  :where(.item-page, article, .accompagnement-page, .amih-page, .tc-regression)
  :where(p, li, blockquote, dd, dt, figcaption) a:hover,
.main_component
  :where(.item-page, article, .accompagnement-page, .amih-page, .tc-regression)
  :where(p, li, blockquote, dd, dt, figcaption) a:focus{
  color: var(--tc-link-hover-color);
  text-decoration-color: var(--tc-link-hover-underline);
}

/* Focus visible (clavier) : indispensable pour l’accessibilité */
.main_component
  :where(.item-page, article, .accompagnement-page, .amih-page, .tc-regression)
  :where(p, li, blockquote, dd, dt, figcaption) a:focus-visible{
  outline: 2px solid var(--tc-link-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 2) Exceptions : ne pas “souligner” les liens déjà traités comme UI
      (boutons, cartes, sommaires, linksets, quicklinks, etc.) */
.main_component :where(.accompagnement-toc, .themes, .themes-bottom, .tc-linkset, .home-approche-quicklinks) a,
.main_component :where(.item-page, article, .accompagnement-page, .amih-page, .tc-regression) a.btn,
.main_component :where(.item-page, article, .accompagnement-page, .amih-page, .tc-regression) a.button,
.main_component :where(.item-page, article, .accompagnement-page, .amih-page, .tc-regression) a[class^="color-"],
.main_component :where(.item-page, article, .accompagnement-page, .amih-page, .tc-regression) a[class*=" color-"],
.main_component :where(.tc-button) a{
  text-decoration: none;
}
/* ajout le 05/02/26  */
.main_component :where(.tc-reg-toc, .toc-satellites, .tc-linkset, .themes, .themes-bottom) a{
  text-decoration: none;
}


/* 3) Contenu affiché en modale (iframe / component) : même logique */
body.contentpane.modal :where(p, li, blockquote, dd, dt, figcaption) a,
body.tc-modal-doc-body :where(p, li, blockquote, dd, dt, figcaption) a{
  color: var(--tc-link-color);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--tc-link-underline);
  text-decoration-skip-ink: auto;
}
body.contentpane.modal :where(p, li, blockquote, dd, dt, figcaption) a:hover,
body.tc-modal-doc-body :where(p, li, blockquote, dd, dt, figcaption) a:hover{
  color: var(--tc-link-hover-color);
  text-decoration-color: var(--tc-link-hover-underline);
}


/* ============================================================
   THEMES (cartes de liens) — rendre l’action immédiatement lisible
   Ajout : bordure + chevron + hover/focus + légère élévation
   ============================================================ */

.themes li a{
  position: relative;
  display: block;

  /* lisibilité “lien” */
  color: var(--tc-color-brand-blue-soft);
  font-weight: 600;

  /* carte plus “interactive” */
  background: #fbfbff; /* un cran plus clair que #f7f7fb */
  border: 1px solid rgba(27, 60, 95, 0.14);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);

  /* espace pour le chevron */
  padding-right: 2.2rem;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    color .18s ease;
}

/* Chevron discret = “c’est un lien” */
.themes li a::after{
  content: "›";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.65;
  font-size: 1.35em;
  line-height: 1;
}

/* Hover/focus : signal clair mais non agressif */
.themes li a:hover,
.themes li a:focus{
  background: #f2f1ff; /* proche de votre hover actuel #ecebff mais plus “propre” */
  border-color: rgba(213, 167, 110, 0.55);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  transform: translateY(-1px);
  color: var(--tc-color-accent-gold);
}

/* Focus clavier : indispensable */
.themes li a:focus-visible{
  outline: 2px solid rgba(213, 167, 110, 0.55);
  outline-offset: 2px;
  border-radius: 0.6rem; /* cohérent avec votre radius existant */
}

/* État “press” (optionnel) */
.themes li a:active{
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}