/*****************************************
   CHARTE HARMONISÉE — Thierry Charton
   hypnose-changer.fr — Octobre 2025
   Template : joomspirit_134
******************************************/

:root {
  /* ===== Neutres & texte ===== */
  --tc-color-page-bg:   #f9f6ef;
  --tc-color-text-main: #2e2e2e;
  --tc-color-text-muted:#565656;

  /* ===== Marque globale ===== */
  --tc-color-brand-blue:      #1b3c5f;
  --tc-color-brand-blue-soft: #1a3858;
  --tc-color-accent-gold:     #d5a76e;
  --tc-color-paper-soft:      #f3ede1;

  /* ===== Axes accompagnement ===== */
  /* Stress & émotions */
  --tc-theme-emotions-main: #2b7a8b;  /* eau en mouvement */
  --tc-theme-emotions-soft: #b7e0e2;

  /* Connaissance de soi */
  --tc-theme-soi-main:   #355f3e;     /* forêt profonde */
  --tc-theme-soi-soft:   #4b3c6f;

  /* Expériences non ordinaires / JJ Charbonier */
  --tc-theme-exno-main:  #433878;     /* nuit / ciel */
  --tc-theme-exno-soft:  #0f6f86;

  /* Sevrages (proposition, à ajuster plus tard) */
  --tc-theme-sevrages-main: #8b3f2b;  /* terre/cuivre */
  --tc-theme-sevrages-soft: #f4e0da;

  /* ===== Bio / “qui je suis” ===== */
  --tc-theme-bio-main: #c7924f;
  --tc-theme-bio-bg:   #faf8f3;

  /* ===== Blog & dialogues ===== */
  --tc-color-dialogue-border: #e3d6cf;
  --tc-color-dialogue-bg:     #faf7f5;
  --tc-color-dialogue-paper:  #fbf3e5;

  /* ===== Accueil – bloc RDV ===== */
  --tc-home-rdv-accent:      #2f4056;
  --tc-home-rdv-bg-header:   #f2f3f6;
  --tc-home-rdv-bg-open:     #fafafa;

  /* ===== Compatibilité avec les noms déjà utilisés ===== */
  /* Dialogues (BLOC 62) */
  --dialogue-emotions-main: var(--tc-theme-emotions-main);
  --dialogue-emotions-soft: var(--tc-theme-emotions-soft);
  --dialogue-soi-main:      var(--tc-theme-soi-main);
  --dialogue-soi-soft:      var(--tc-theme-soi-soft);
  --dialogue-exno-main:     var(--tc-theme-exno-main);
  --dialogue-exno-soft:     var(--tc-theme-exno-soft);

  /* Accueil (BLOC 90) */
  --home-stress:      var(--tc-theme-emotions-soft);
  --home-self:        var(--tc-theme-soi-soft);
  --home-exno:        var(--tc-theme-exno-soft);
  --axe-stress-main:  var(--tc-theme-emotions-main);
  --axe-self-main:    var(--tc-theme-soi-main);
  --axe-exno-main:    var(--tc-theme-exno-main);
}




/* ===============================
   FOND & TYPOGRAPHIE GLOBALE
================================= */
body {
  background-color: var(--tc-color-page-bg) !important;
  color: var(--tc-color-text-main);
  font-family: 'Nunito Sans', 'Source Sans 3', Arial, sans-serif;
  font-size: 1em;
  line-height: 1.7;
  
  letter-spacing: 0.01em;
}

/* Liens */
a {
  color: var(--tc-color-brand-blue-soft);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  color: var(--tc-color-accent-gold);
}

/* Titres — version adoucie, inspirée du BLOC 10 / RDV */
h1,
h2,
h3,
h4 {
  font-family: 'Manrope', 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 1.2rem 0 0.6rem 0 !important;
  line-height: 1.35;
  letter-spacing: 0.015em;
  color: var(--tc-color-brand-blue); /* #1b3c5f par défaut */
  font-weight: 600;
}

h1 {
  font-size: 1.8rem;
  text-transform: none !important;
}

/* Sous-titres principaux */
h2 {
  font-size: 1.35rem;
  color: var(--tc-color-accent-gold); /* or doux de la charte */
  font-weight: 500;
  font-style: normal;       /* plus d’italique agressif */
  text-align: left;         /* tu peux remettre center si tu préfères */
}

/* Titres de sections internes */
h3 {
  font-size: 1.1rem;
  color: var(--tc-color-brand-blue-soft);
  font-weight: 500;
}


/* ==== Footer contacts — version discrète & élégante (2025-11-21) ==== */

.footer-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.92rem;
  color: #565656;
}

.footer-contacts .contact-card {
  flex: 1 1 240px;
  min-width: 220px;
  padding: 0;
  border: none; /* plus de gros cadres */
}

/* Titres (nom / villes) */
.footer-contacts h3 {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: #1b3c5f;
}

/* Textes */
.contact-info,
.contact-place {
  margin: 0;
  line-height: 1.6;
}

/* Liens sobres */
.footer-contacts a {
  text-decoration: none;
  border-bottom: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.06em;
  text-decoration-style: dotted;
  text-decoration-color: rgba(26, 56, 88, 0.4);
}

.footer-contacts a:hover {
  color: #d5a76e;
  text-decoration-style: solid;
  text-decoration-color: #d5a76e;
}

/* Desktop : 3 colonnes avec séparateurs verticaux très légers */
@media (min-width: 980px) {
  .footer-contacts {
    justify-content: space-between;
  }

  .footer-contacts .contact-card {
    flex: 1 1 calc(33.33% - 1rem);
  }

  .footer-contacts .contact-card + .contact-card {
    padding-left: 1.5rem;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
  }
}


/* ===================================================================
   Breadcrumb v4 (2025-11-03)
   Stratégie robuste:
   1) Masquer l'élément LI "icône seule" placé en 1re position
   2) Neutraliser toute pseudo-icône potentielle .icon-location
   3) Réinjecter une "maison" avant le 1er vrai item (désormais li:nth-child(1) après masquage)
   =================================================================== */

/* 1) Masquer le LI d'icône fantôme en tête */
.module-breadcrumb .breadcrumb > li:first-child {
  display: none !important;
}

/* 2) Neutraliser toute icône résiduelle */
.breadcrumb .icon-location,
.breadcrumb .icon-location::before,
.breadcrumb .icon-location:before {
  display: none !important;
  content: "" !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 3) Ajouter la maison sur le 1er VRAI item (qui devient le 1er li visible) */
.module-breadcrumb .breadcrumb > li:first-child > a::before,
.module-breadcrumb .breadcrumb > li:first-child > span::before,
.module-breadcrumb .breadcrumb > li:first-child > *:first-child::before {
  content: "\2302"; /* '⌂' */
  display: inline-block;
  margin-right: 0.35em;
  font-size: 0.95em;
  line-height: 1;
  vertical-align: -0.05em;
  opacity: 0.95;
}

/* =========================================
   Bloc de références bibliographiques
   ========================================= */

.tc-biblio {
  max-width: 70ch;
  margin: 1.8rem auto 1.6rem;
  padding: 1rem 1.2rem 1.1rem;
  background: #f3ede1;              /* ton plus chaud que le fond global */
  border-radius: 10px;
  border-left: 4px solid #d5a76e;   /* rappel or doux */
  font-size: 0.92rem;
  line-height: 1.6;
  color: #444;
}

.tc-biblio-label {
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #1b3c5f;
  margin-bottom: 0.4rem;
}

.tc-biblio-list {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
}

.tc-biblio-list li {
  margin: 0.25rem 0;
}

.tc-biblio-author {
  font-weight: 600;
}

/* Liens éventuels dans la biblio : style sobre */
.tc-biblio a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.06em;
}

.tc-biblio a:hover {
  color: #d5a76e;
}


/* Socle commun pour tous les accordions TC */
[data-tc-accordion-panel] {
  display: none;
}

[data-tc-accordion-item].is-open > [data-tc-accordion-panel],
[data-tc-accordion-item].is-open [data-tc-accordion-panel] {
  display: block;
}



/* =========================================================
   BADGES / TAGS — style “pill plein” (type Slate)
   - forme identique (999px)
   - texte = couleur du fond “parchemin”
   - palette chic : bleu égyptien + doré
   ========================================================= */

:root{
  /* Par défaut : bleu marque + texte “parchemin” */
  --tc-badge-bg:       var(--tc-color-brand-blue-soft);
  --tc-badge-fg:       var(--tc-color-page-bg);

  /* Hover : doré + texte bleu (contraste propre) */
  --tc-badge-bg-hover: var(--tc-color-accent-gold);
  --tc-badge-fg-hover: var(--tc-color-brand-blue);

  --tc-badge-shadow:   0 10px 22px rgba(0,0,0,.10);
}

/* Conteneur (ul ou div) */
.tc-badges{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .55rem;
  margin: .25rem 0 0;
  padding: 0;
  list-style: none;
}

/* APRÈS : générique (a / span / button) */
.tc-badges .tc-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .18rem .72rem;
  border-radius: 999px;

  background: var(--tc-badge-bg);
  color: var(--tc-badge-fg);

  font-size: .86rem;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: .01em;

  border: 1px solid rgba(0,0,0,.08);
  transition: transform .15s ease, background-color .15s ease, color .15s ease,
              box-shadow .15s ease, border-color .15s ease;
}

/* Spécifique liens : neutraliser underline */
.tc-badges a.tc-badge{ text-decoration:none; }


.tc-badges a.tc-badge:hover,
.tc-badges a.tc-badge:focus{
  background: var(--tc-badge-bg-hover);
  color: var(--tc-badge-fg-hover);
  border-color: rgba(213,167,110,.55);
  box-shadow: var(--tc-badge-shadow);
  transform: translateY(-1px);
}

.tc-badges a.tc-badge:active{
  transform: translateY(0);
  box-shadow: none;
}

.tc-badges a.tc-badge:focus-visible{
  outline: 2px solid rgba(213,167,110,.55);
  outline-offset: 2px;
}

/* Label type “En savoir plus” (optionnel) */
.tc-badges-label{
  margin: 0 0 .35rem;
  font-size: .95rem;
  font-weight: 750;
  color: var(--tc-color-text-main);
}


/* ============================================================
   [BLOC 01] HEADER & MENU — VERSION PROPRE (fonctionnelle)
   Contexte : joomspirit_134 + mod_custom (#main-nav)
   Rôle     : Menu compact + sticky (desktop & mobile)
   Auteur   : Thierry Charton + ChatGPT — 2025-11-02
   ============================================================ */

/* Neutralisations minimales du template */
#website-header .title_menu,
#website-header .logo-module { display:none !important; }   /* garder notre #site-header + #main-nav */
.website-header { position: static !important; }             /* neutralise le header "collant" du template */

/* Base menu */
#main-nav { position:relative; z-index:10000; background:#afeeee; width:100%; margin:0; }
#main-nav .nav-toggle{
  appearance:none; border:0; background:transparent;
  font-size:1.35rem; line-height:1; padding:.6rem .8rem; cursor:pointer;
}
#main-nav .main-menu { list-style:none; margin:0; padding:0; }
#main-nav .main-menu > li { margin:0; padding:0; }

/* Desktop (>=980px) */
@media (min-width:980px){
  #main-nav .nav-toggle { display:none; }
  #main-nav .main-menu {
    display:flex; justify-content:center; align-items:center; gap:1rem;
    flex-wrap:nowrap; margin:0; padding:.5rem 1rem;
  }
  #main-nav .main-menu > li { position:relative; display:inline-block; }
  #main-nav .main-menu > li > a { display:block; padding:.45rem .8rem; line-height:1.2; text-decoration:none; }

  /* Sous-menus */
  #main-nav .main-menu > li > ul{
    position:absolute; top:100%; left:0; display:none; min-width:220px;
    margin:0; padding:.4rem 0; list-style:none; background:#afeeee;
    box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:10001;
  }
  #main-nav .main-menu > li:hover > ul{ display:block; }
  #main-nav .main-menu > li > ul > li > a{
    display:block; padding:.5rem .9rem; white-space:nowrap;
  }
}

/* Mobile (<980px) */
@media (max-width:979px){
  #main-nav .main-menu{ display:none; background:#afeeee; border-top:1px solid rgba(0,0,0,.08); }
  #main-nav .main-menu.active{ display:block; position:relative; z-index:10060; }
  #main-nav .main-menu > li > a{ display:block; padding:.7rem .9rem; border-bottom:1px solid rgba(0,0,0,.06); }
  #main-nav .main-menu > li.open > a{ background:rgba(0,0,0,.03); }
  #main-nav .main-menu > li > ul{ display:none; position:static; margin:0; padding:0; box-shadow:none; }
  #main-nav .main-menu > li.open > ul{ display:block; }
}

/* Sticky piloté par JS (voir custom.js) */
body.nav-fixed #main-nav{ position:fixed; top:0; left:0; right:0; z-index:10070; }
body.nav-fixed{ padding-top: var(--navH, 58px); }

/* Sécurité couches modules */
.users_top, .users_bottom, .footer-module-position{ position:relative; z-index:1; }

/* ===================================================================
   Menu: robustesse touch/desktop + suppression puces forte (2025-11-03)
   - Puces: list-style none (force)
   - Desktop: hover ET focus-within pour accessibilité/touch
   - Confinement sous-menus
   =================================================================== */

#main-nav { position: relative; overflow-x: clip; }

#main-nav .main-menu,
#main-nav .main-menu ul {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

#main-nav .main-menu a { display: block; }

/* Desktop & grands écrans */
@media (min-width: 980px) {
  #main-nav .main-menu > li { position: relative; }
  #main-nav .main-menu > li > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    max-width: 90vw;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Afficher au survol OU lorsque le focus clavier est dans le li (tap -> focus) */
  #main-nav .main-menu li:hover > ul,
  #main-nav .main-menu li:focus-within > ul {
    display: block;
  }
}

/* Mobile / tablette portrait */
@media (max-width: 979px) {
  #main-nav .main-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }
  #main-nav .main-menu.active { display: flex; }

  #main-nav .main-menu > li { width: 100%; position: static; }
  #main-nav .main-menu > li > ul {
    display: none;
    position: static;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 0 0 16px;
    box-sizing: border-box;
  }
  #main-nav .main-menu > li.open > ul { display: block; }
}




/* Menu */
#main-nav {
  padding-left: 80px; /* Ajuste l'espacement pour donner plus de place à votre titre */
}

/* Menu items */
.main-menu li a {
  font-size: 1.1em; /* Ajuste la taille des éléments du menu */
  color: #0a5560; /* Harmonise avec la couleur du titre */
  padding: 10px 15px; /* Ajustez les espacements pour les rendre plus lisibles */
}

.main-menu li a:hover {
  background-color: #f0e6d6; /* Effet de survol doux */
  color: #b48a57; /* Couleur complémentaire en survol */
}



.moduletable.visitcounter {
    width: auto !important;
    margin: 0 auto !important;
    display: table !important;
    text-align: center;
}

/* Label non cliquable dans le menu Blog (ligne "Dossiers") */
#main-nav .main-menu .menu-separator {
  padding: .35rem .9rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .7;
  cursor: default;
}

/* ============================================
   Ajustements visuels des sous-menus
   (indentation + taille de police)
   ============================================ */

/* Desktop : sous-menus un peu plus petits et légèrement décalés */
@media (min-width: 980px) {
  /* Niveau 2 : ex. Blog > Changer ses habitudes */
  #main-nav .main-menu > li > ul > li > a {
    padding: .45rem 1rem .45rem 1.4rem; /* retrait à gauche */
    font-size: 0.95em;                  /* un poil plus petit que la racine */
  }

  /* Niveau 3 : ex. Blog > Hypnoses > Applications... */
  #main-nav .main-menu > li > ul > li > ul > li > a {
    padding: .4rem 1rem .4rem 1.8rem;   /* retrait plus marqué */
    font-size: 0.9em;
  }
}

/* Mobile / tablettes : même logique, mais adaptée aux petits écrans */
@media (max-width: 979px) {
  #main-nav .main-menu > li > ul > li > a {
    padding: .5rem 1rem .5rem 1.4rem;
    font-size: 0.95em;
  }

  #main-nav .main-menu > li > ul > li > ul > li > a {
    padding: .45rem 1rem .45rem 1.8rem;
    font-size: 0.9em;
  }
}

/* Label non cliquable "Dossiers" dans le menu Blog */
#main-nav .main-menu .menu-separator {
  padding: .35rem .9rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .7;
  cursor: default;
}

/*-----------------------------------------*/

/* ============================================================
   Ajustements visuels des sous-menus (niveau 2)
   Sans impact sur la logique d'ouverture / fermeture
   ============================================================ */

/* Séparateurs de groupes ("Hypnoses — général", etc.) */
#main-nav .main-menu .menu-separator {
  padding: .35rem .9rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .7;
  cursor: default;
}

/* Légère réduction de la police + retrait à gauche pour les sous-items */
@media (min-width: 980px) {
  #main-nav .main-menu > li > ul > li > a {
    padding: .45rem 1rem .45rem 1.4rem; /* décale légèrement vers la droite */
    font-size: 0.95em;                  /* un peu plus petit que le niveau 1 */
  }
}

@media (max-width: 979px) {
  #main-nav .main-menu > li > ul > li > a {
    padding: .5rem 1rem .5rem 1.4rem;
    font-size: 0.95em;
  }
}

/* =========================================================
   HEADER : logo + titre + slogan (markup actuel)
   ========================================================= */

/* Conteneur du header : logo + textes */
.top-global-position #site-header .header-inner {
  display: flex;
  align-items: center;           /* centre verticalement titre/slogan par rapport au logo */
  gap: 1.2rem;                   /* espace entre logo et bloc texte */
  padding: 0.8rem 1.5rem 1.1rem; /* marges internes du bandeau haut */
}

/* Logo (image ronde) */
/* width = taille lisible du disque, fluide mais bornée */
.top-global-position #site-header .site-logo img {
  display: block;
  width: clamp(160px, 30vw, 260px); /* min 130, max 220, s’adapte à la largeur écran */
  height: auto;
}

/* Bloc texte (titre + slogan empilés) */
.top-global-position #site-header .site-text {
  display: flex;
  flex-direction: column;
}

/* TITRE "Hypnose changer" */
.top-global-position #site-header .site-title {
  margin: 0;
  font-size: clamp(1.9rem, 1.5rem + 0.6vw, 2.4rem);
  line-height: 1.1;
  color: #0a5560; /* bleu-vert du contour du logo */
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif;
}

/* SLOGAN "Hypnothérapie et exploration de soi" */
.top-global-position #site-header .site-tagline {
  margin: 0.25rem 0 0 0.4rem;  /* rapproche du titre + léger décalage à droite */
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.2rem);
  color: #5a9d9a;              /* vert-eau (mer du logo) */
  font-family: "Merienda", "Kalam", "Segoe Script", cursive;
}

/* Version mobile : header qui se “pile” proprement */
@media (max-width: 600px) {
  .top-global-position #site-header .header-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .top-global-position #site-header .site-logo img {
    width: 150px;  /* évite un header géant sur téléphone */
  }

  #main-nav {
    padding-left: 0;  /* remet le menu bien au centre */
  }
}


@charset "UTF-8";
/* ==========================================================================
   BLOC 02 — FOOTER
   Site : hypnose-changer.fr
   Version : 2026-04-29
   Rôle : footer compact — contacts, réseaux, liens légaux
   ========================================================================== */

/* =========================================================
   1. Socle footer
   ========================================================= */

.website-footer {
  padding-top: 1.4rem;
  padding-bottom: 1.2rem;
  border-top: 1px solid rgba(0,0,0,.06);
  color: var(--tc-color-text-muted);
}

.footer-module-position {
  padding-top: 2.2rem;
  padding-bottom: 2rem;
}


/* =========================================================
   2. Footer compact
   ========================================================= */

.footer-contacts--compact {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .9fr);
  gap: 1.2rem 1.35rem;
  align-items: start;
  margin: 1.6rem auto 0;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: .93rem;
  color: var(--tc-color-text-muted);
}

.footer-contacts--compact .contact-card {
  min-width: 0;
  padding: 1.15rem 1.35rem 1.2rem;
  border: 1px solid rgba(27,60,95,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 4px 14px rgba(0,0,0,.03);
}

.footer-contacts--compact .contact-card--identity {
  border-top: 3px solid var(--tc-color-brand-blue);
}

.footer-contacts--compact .contact-card--places {
  border-top: 3px solid var(--tc-color-accent-gold);
}


/* =========================================================
   3. Titres et textes
   ========================================================= */

.footer-contacts--compact h3 {
  margin: 0 0 .45rem !important;
  font-size: .88rem;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tc-color-brand-blue);
}

.footer-contacts--compact .contact-intro {
  margin: 0 0 .7rem;
  line-height: 1.55;
  color: var(--tc-color-text-muted);
}

.footer-contacts--compact .contact-place {
  margin: 0;
  line-height: 1.5;
}

.footer-contacts--compact .contact-note {
  margin: .65rem 0 0;
  padding-top: .65rem;
  border-top: 1px solid rgba(0,0,0,.06);
  line-height: 1.5;
  font-size: .9rem;
  color: var(--tc-color-text-muted);
}


/* =========================================================
   4. Coordonnées
   ========================================================= */

.footer-contact-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .42rem;
}

.footer-contact-meta li {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  line-height: 1.35;
}

.footer-contact-meta__icon {
  flex: 0 0 1rem;
  width: 1rem;
  text-align: center;
  opacity: .78;
  font-size: .92rem;
}


/* =========================================================
   5. Liens
   ========================================================= */

.footer-contacts--compact a {
  color: var(--tc-color-brand-blue-soft);
  text-decoration: none;
  text-underline-offset: .18em;
  text-decoration-thickness: .06em;
  text-decoration-style: dotted;
  text-decoration-color: rgba(26,56,88,.35);
  transition:
    color .18s ease,
    text-decoration-color .18s ease,
    transform .15s ease;
}

.footer-contacts--compact a:hover,
.footer-contacts--compact a:focus {
  color: var(--tc-color-accent-gold);
  text-decoration-style: solid;
  text-decoration-color: var(--tc-color-accent-gold);
}

.footer-contacts--compact a:focus-visible {
  outline: 2px solid rgba(213,167,110,.45);
  outline-offset: 2px;
  border-radius: 4px;
}


/* =========================================================
   6. Réseaux sociaux
   ========================================================= */

.footer-social-inline {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .85rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(0,0,0,.06);
}

.footer-social-inline__label {
  flex: 0 0 auto;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tc-color-brand-blue);
  white-space: nowrap;
}

.footer-social-inline__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .38rem;
}

.footer-social-inline__link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2rem !important;
  min-width: 2rem !important;
  max-width: 2rem !important;
  height: 2rem !important;
  flex: 0 0 2rem !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(27,60,95,.14);
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
  line-height: 1;
  text-decoration: none;
}

.footer-social-inline__link:hover,
.footer-social-inline__link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(213,167,110,.78);
  box-shadow: 0 8px 16px rgba(0,0,0,.07);
  background: #fff;
  outline: none;
}

.footer-social-inline__link img {
  display: block;
  max-width: none;
  height: auto;
}

.footer-social-inline__link--whatsapp img,
.footer-social-inline__link--instagram img,
.footer-social-inline__link--facebook img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.footer-social-inline__link--youtube img {
  width: 18px;
  height: 13px;
  object-fit: contain;
}


/* =========================================================
   7. Lien complémentaire éventuel
   ========================================================= */

.footer-extra-link {
  margin: .55rem 0 0;
  font-size: .88rem;
  line-height: 1.4;
}


/* =========================================================
   8. Liens légaux / menu bas
   ========================================================= */

.bottom_menu {
  padding-top: .5rem;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  align-items: center;
  margin: .85rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid rgba(0,0,0,.05);
  font-size: .84rem;
  color: var(--tc-color-text-muted);
}

.footer-legal-links a {
  color: var(--tc-color-brand-blue-soft);
  text-decoration: none;
  border-bottom: 1px dotted rgba(26,56,88,.35);
}

.footer-legal-links a:hover,
.footer-legal-links a:focus {
  color: var(--tc-color-accent-gold);
  border-bottom-color: rgba(213,167,110,.8);
}

.footer-legal-links__sep {
  opacity: .45;
}


/* =========================================================
   9. Responsive
   ========================================================= */

@media (max-width: 768px) {
  .footer-module-position {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }

  .footer-contacts--compact {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.2rem;
  }

  .footer-contacts--compact .contact-card {
    padding: 1.05rem 1.1rem;
  }

  .footer-social-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: .38rem;
  }

  .footer-social-inline__label {
    white-space: normal;
  }

  .website-footer {
    padding-top: 1.2rem;
  }
}

@media (max-width: 560px) {
  .footer-contact-meta li {
    align-items: flex-start;
  }

  .footer-legal-links {
    gap: .3rem .65rem;
  }
}


/* =========================================================
   10. Impression
   ========================================================= */

@media print {
  .footer-social-inline {
    display: none !important;
  }
}


.footer-social-icon {
  display: block;
  width: 17px;
  height: 17px;
}

.footer-social-inline__link--whatsapp {
  color: #128c7e;
}

.footer-social-inline__link--instagram {
  color: #c13584;
}

.footer-contacts--compact .footer-social-inline__link--whatsapp {
  color: #128c7e !important;
}

.footer-contacts--compact .footer-social-inline__link--instagram {
  color: #c13584 !important;
}

.footer-contacts--compact .footer-social-icon,
.footer-contacts--compact .footer-social-icon path {
  fill: currentColor !important;
}


@charset "UTF-8";
/* ==========================================================================
   BLOC 95_MODAL.css — version nettoyée 2026-03-25
   Hypnose-changer.fr — fenêtre modale Vanilla
   Objectifs :
   - supprimer les redondances CSS
   - garder un seul bouton "Ouvrir la page"
   - préparer un masquage SEO via data-nosnippet dans le HTML
   ========================================================================== */

/* == BACKDROP ============================================================= */
.tc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10080; /* au-dessus du header/nav */
}

.tc-modal-backdrop.is-open {
  display: flex;
}

/* == MODALE =============================================================== */
.tc-modal {
  position: relative;
  width: min(900px, 94vw);
  max-height: 90vh;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 20px 50px -25px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* == HEADER =============================================================== */
.tc-modal-header {
  padding: 0.6rem 1.2rem 0.4rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.6);
}

.tc-modal-title {
  margin: 0;
  font-size: 1rem;
  text-align: center;
  opacity: 0.85;
  letter-spacing: 0.02em;
}

/* == CORPS ================================================================ */
.tc-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #ffffff;
  scrollbar-width: auto;
}

.tc-modal-body::-webkit-scrollbar {
  width: 10px;
}

.tc-modal-body::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.18);
}

.tc-modal-body::-webkit-scrollbar-thumb {
  background: rgba(26, 56, 88, 0.75);
  border-radius: 999px;
}

.tc-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 56, 88, 0.95);
}

.tc-modal-body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

/* == FOOTER ============================================================== */
.tc-modal-footer {
  padding: 0.55rem 1.2rem 0.8rem;
  border-top: 1px solid rgba(148, 163, 184, 0.6);
  background: #ffffff;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.tc-modal-openpage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.38rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(17, 24, 39, 0.15);
  background: rgba(17, 24, 39, 0.06);
  color: #111827;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.tc-modal-openpage:hover,
.tc-modal-openpage:focus-visible {
  background: rgba(17, 24, 39, 0.10);
  outline: 2px solid rgba(213, 167, 110, 0.55);
  outline-offset: 2px;
}

.tc-modal-close-btn {
  padding: 0.38rem 1.3rem;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.15);
  background: #111827;
  color: #f9fafb;
  font-size: 0.95rem;
  line-height: 1.4;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.tc-modal-close-btn:hover,
.tc-modal-close-btn:focus-visible {
  background: #1a3858;
  border-color: #1a3858;
  outline: none;
}

/* == BOUTONS DE FERMETURE ================================================ */
.tc-modal-close {
  border: none;
  cursor: pointer;
  z-index: 2;
}

.tc-modal-close-top {
  position: absolute;
  top: 0.45rem;
  right: 0.8rem;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: #111827;
}

.tc-modal-close-top:hover,
.tc-modal-close-top:focus-visible {
  color: #1a3858;
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

/* == PAGE SOUS MODALE ==================================================== */
html.tc-modal-open,
body.tc-modal-open {
  overflow: hidden;
}

html.tc-modal-open #t-fab,
body.tc-modal-open #t-fab {
  display: none !important;
}

/* == TYPO DANS LES PAGES CHARGÉES EN MODALE ============================== */
body.tc-modal-doc-body {
  font-size: 0.9rem !important;
  line-height: 1.5;
}

/* == MODE COMPONENT DANS L'IFRAME ======================================== */
body.contentpane.modal #website-header,
body.contentpane.modal .website-header,
body.contentpane.modal #site-header,
body.contentpane.modal #main-nav,
body.contentpane.modal .module-breadcrumb,
body.contentpane.modal .footer-module-position,
body.contentpane.modal .website-footer,
body.contentpane.modal .users_top,
body.contentpane.modal .users_bottom,
body.contentpane.modal #t-fab,
body.contentpane.modal #toTop,
body.contentpane.modal .article-info,
body.contentpane.modal .pagenav,
body.contentpane.modal .icons,
body.contentpane.modal .actions,
body.contentpane.modal .print-email,
body.contentpane.modal .view-count,
body.contentpane.modal .hits,
body.contentpane.modal .metadata,
body.contentpane.modal .article-aside,
body.contentpane.modal .item-page .article-info,
body.contentpane.modal .item-page .content_rating,
body.contentpane.modal .item-page .pager,
body.tc-modal-doc-body #website-header,
body.tc-modal-doc-body .website-header,
body.tc-modal-doc-body #site-header,
body.tc-modal-doc-body #main-nav,
body.tc-modal-doc-body .module-breadcrumb,
body.tc-modal-doc-body .footer-module-position,
body.tc-modal-doc-body .website-footer,
body.tc-modal-doc-body .users_top,
body.tc-modal-doc-body .users_bottom,
body.tc-modal-doc-body #t-fab,
body.tc-modal-doc-body #toTop,
body.tc-modal-doc-body .article-info,
body.tc-modal-doc-body .pagenav,
body.tc-modal-doc-body .icons,
body.tc-modal-doc-body .actions,
body.tc-modal-doc-body .print-email,
body.tc-modal-doc-body .view-count,
body.tc-modal-doc-body .hits,
body.tc-modal-doc-body .metadata,
body.tc-modal-doc-body .article-aside,
body.tc-modal-doc-body .item-page .article-info,
body.tc-modal-doc-body .item-page .content_rating,
body.tc-modal-doc-body .item-page .pager {
  display: none !important;
}

body.contentpane.modal,
body.tc-modal-doc-body {
  overflow-y: visible !important;
  padding-top: 0 !important;
}

/* == MOBILE =============================================================== */
@media (max-width: 768px) {
  .tc-modal {
    width: 96vw;
    max-height: 96vh;
    border-radius: 10px;
  }

  .tc-modal-footer {
    padding-bottom: 0.95rem;
  }

  .tc-modal-close-btn {
    font-size: 0.9rem;
    padding-inline: 1.1rem;
  }

  body.tc-modal-doc-body {
    font-size: 0.85rem !important;
  }
}


/* =========================== */
/* ===== 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;
  }
}







/* =========================================
   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);
}