@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,700&display=swap');

/* ==========================================================================
   1. VARIABLES & RESET
   ========================================================================== */
:root {
    --margin: 3%;
    --quarter: 25%;
    --third: 33%;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    /*font-family: 'Montserrat', sans-serif;*/
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #282559;
    background-color: #e5d7cc;
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden !important; /* Corrigé pour éviter les scrolls horizontaux indésirables */
}

/* ==========================================================================
   2. STRUCTURES DE BASE / WRAPPERS
   ========================================================================== */
.wrapper,
header .wrapper,
.menu .wrapper,
.carrousel .wrapper,
.content .wrapper,
footer .wrapper {
    width: 1200px;
    margin: 0 auto;
}

/* Zone de contenu volontairement plus étroite (1100px) que le header, le
   menu et le footer (1200px), comme sur la maquette : la carte de contenu
   apparaît en retrait, encadrée par le fond de zone. Sélecteur descendant
   (et non ">") pour couvrir aussi les div.wrapper imbriquées dans le
   contenu (ex : .item-data.block-XXXXX.type-html.wrapper), qui sinon
   garderaient 1200px et déborderaient de leur parent à 1100px.
   Sous 1200px de viewport, la règle responsive (width:100%) reprend la
   main comme avant. */
section.content .wrapper,
section.carrousel .wrapper {
    width: 1100px;
}

/* ==========================================================================
   3. HEADER
   ========================================================================== */
header .wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px 0;
    font-family: sans-serif;
}

/* Bloc Recherche & Newsletter (Gauche) */
.HeaderSearch {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 220px;
}

/* --- Barre de recherche du header : champ simple, loupe décalée ---
   Pas de carré coloré ici (réservé aux pages internes, voir plus bas) :
   juste le champ blanc et la loupe posée à l'intérieur, décalée du bord
   gauche, avec le padding du champ qui lui laisse la place. */
.HeaderSearch .ui.left.icon.input {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.HeaderSearch .ui.left.icon.input i.search.icon {
    position: absolute !important;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    color: #8d735b;
    opacity: 1 !important;
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
}

.HeaderSearch .ui.input input {
    width: 100%;
    border: 1px solid #8d735b;
    border-radius: 0;
    padding: 8px 8px 8px 34px;   /* 34px à gauche : place pour la loupe décalée */
    background: white;
}

/* --- Barre de recherche des PAGES INTERNES (ui-search dans <main>) ---
   Style maquette : carré plein beige avec la loupe à gauche, accolé à un
   champ rectangulaire blanc. Le HTML (ui-search > .ui.left.icon.input) est
   celui de Semantic UI, et la feuille du thème l'habille en pilule grise
   (fond, arrondi, padding) tout en positionnant la loupe en absolu
   par-dessus le champ : tout est neutralisé en !important ci-dessous,
   y compris le ::before de l'icône (le glyphe lui-même), sinon la loupe
   reste flottante au milieu du champ au lieu d'être dans le carré.
   Scope "main ui-search" : ne touche ni la recherche du header (hors main,
   stylée ci-dessus) ni celles des galeries d'événements (section 11, dont
   les sélecteurs item-gallery restent prioritaires). */
main ui-search .ui.left.icon.input {
    display: flex !important;
    align-items: stretch !important;
    width: 100%;
    max-width: 340px;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}

main ui-search .ui.left.icon.input i.search.icon {
    position: static !important;   /* annule l'absolu de Semantic UI / du thème */
    order: 1;
    flex: 0 0 40px;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #bd9c7e !important;
    color: #28265a !important;
    opacity: 1 !important;
    font-size: 15px;
    line-height: 1 !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
}

/* Le glyphe de la loupe est dessiné par le ::before de l'icône : si le
   thème le positionne lui aussi en absolu, il "s'échappe" du carré et
   flotte au milieu du champ. On le force à rester dans son carré. */
main ui-search .ui.left.icon.input i.search.icon::before {
    position: static !important;
    display: inline-block !important;
    margin: 0 !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
}

main ui-search .ui.left.icon.input input {
    order: 2;
    flex: 1;
    width: 100% !important;
    height: 40px !important;
    border: 1px solid #e0e0e0 !important;
    border-left: none !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    padding: 0 12px !important;   /* annule le padding-left réservé à l'icône par Semantic UI */
    margin: 0 !important;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #666666;
    outline: none;
}

main ui-search .ui.left.icon.input input::placeholder {
    color: #b5b5b5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.HeaderSearch p { 
    margin: 0; 
}

.HeaderSearch p a {
    display: block;
    background-color: #28265a;
    color: white !important;
    text-transform: uppercase;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    transition: background-color 0.3s;
}

.HeaderSearch p a i { 
    display: none; 
}

/* Logo (Centre) */
.HeaderLogo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.HeaderLogo img {
    height: 60px;
    width: auto;
}

/* Réseaux Sociaux */
.HeaderSocial {
    display: flex;
    gap: 10px;
    margin-left: auto;   /* pousse ce bloc (et les boutons qui suivent) vers la droite */
    margin-right: 24px;  /* petit espace avant les boutons Espace adhérents / Adhérer */
}

.HeaderSocial a i {
    font-size: 24px;
    color: #8d735b;
    transition: transform 0.2s;
}

/* Boutons Rapides (Droite) */
.HeaderRapide {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 200px;
}

.HeaderRapide p { 
    margin: 0; 
}

.HeaderRapide .primary.button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    color: white !important;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 13px;
    border-radius: 0;
    transition: background-color 0.3s;
}

.HeaderRapide p:first-child a { background-color: #eb5b55; }
.HeaderRapide p:last-child a { background-color: #398ccb; }

/* Effets survol : chaque bouton garde sa teinte, en version éclaircie.
   On neutralise aussi le soulèvement/ombre/brightness hérités de la règle
   générique ".primary.button:hover" (section 6) sur les boutons rapides :
   le survol se fait uniquement par changement de couleur de fond. */
.HeaderSearch p a:hover {
    background-color: #9492ac;
}

.HeaderRapide p:first-child a:hover {
    background-color: #e68b8c;
}

.HeaderRapide p:last-child a:hover {
    background-color: #9cc5e5;
}

.HeaderRapide p:first-child a:hover,
.HeaderRapide p:last-child a:hover {
    transform: none;
    filter: none;
    box-shadow: none;
}

/* ==========================================================================
   4. NAVIGATION (MENU FORUM104 — menu-229)
   ========================================================================== */
section.menu {
    background-color: #fff;
    margin-bottom: 30px;
}

nav.menu-229 * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

nav.menu-229 {
    background-color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    position: relative;
    z-index: 1000;
    width: 100%;
}

nav.menu-229 > ul {
    list-style: none;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 42px;
}

nav.menu-229 > ul > li {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 1;
    justify-content: center;
}

nav.menu-229 > ul > li + li {
    border-left: 1px solid #e0e0e0;
}

nav.menu-229 > ul > li > a,
nav.menu-229 > ul > li > .label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 14px;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s;
    width: 100%;
}

/* Accueil (Maison) */
nav.menu-229 > ul > li:first-child > a {
    background-color: transparent;
    font-size: 0;         /* masque le texte "Accueil" sans le supprimer du HTML */
    padding: 0 16px;
    position: relative;
}
nav.menu-229 > ul > li:first-child > a::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url('https://www.forum104.org/f/ea64740a04744666e3395ef1a831d69a395ce34e/picto-home-page.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
nav.menu-229 > ul > li:first-child > a:hover::before {
    opacity: 0.7;
}

/* --- Couleurs par onglet --- */
/* Notre programme */
nav.menu-229 > ul > li:nth-child(2) > .label { color: #eb5b55; }
nav.menu-229 > ul > li:nth-child(2):hover > .label,
nav.menu-229 > ul > li:nth-child(2):focus-within > .label { background-color: #eb5b55; color: #ffffff; text-transform: uppercase; }
nav.menu-229 > ul > li:nth-child(2) > ul { background-color: #fbdedd; }
nav.menu-229 > ul > li:nth-child(2) > ul > li > a { color: #eb5b55; }
nav.menu-229 > ul > li:nth-child(2) > ul > li > a:hover { background-color: #eb5b55; color: #ffffff; text-transform: uppercase; }

/* Accueil groupes */
nav.menu-229 > ul > li:nth-child(3) > .label { color: #f7a600; }
nav.menu-229 > ul > li:nth-child(3):hover > .label,
nav.menu-229 > ul > li:nth-child(3):focus-within > .label { background-color: #f7a600; color: #ffffff; text-transform: uppercase; }
nav.menu-229 > ul > li:nth-child(3) > ul { background-color: #fdedcc; }
nav.menu-229 > ul > li:nth-child(3) > ul > li > a { color: #f7a600; }
nav.menu-229 > ul > li:nth-child(3) > ul > li > a:hover { background-color: #f7a600; color: #ffffff; text-transform: uppercase; }

/* Qui sommes nous */
nav.menu-229 > ul > li:nth-child(4) > .label { color: #28265a; }
nav.menu-229 > ul > li:nth-child(4):hover > .label,
nav.menu-229 > ul > li:nth-child(4):focus-within > .label { background-color: #28265a; color: #ffffff; text-transform: uppercase; }
nav.menu-229 > ul > li:nth-child(4) > ul { background-color: #d4d4de; }
nav.menu-229 > ul > li:nth-child(4) > ul > li > a { color: #28265a; }
nav.menu-229 > ul > li:nth-child(4) > ul > li > a:hover { background-color: #28265a; color: #ffffff; text-transform: uppercase; }

/* Adhérer */
nav.menu-229 > ul > li:nth-child(5) > .label { color: #398ccb; }
nav.menu-229 > ul > li:nth-child(5):hover > .label,
nav.menu-229 > ul > li:nth-child(5):focus-within > .label { background-color: #398ccb; color: #ffffff; text-transform: uppercase; }
nav.menu-229 > ul > li:nth-child(5) > ul { background-color: #d7e8f5; }
nav.menu-229 > ul > li:nth-child(5) > ul > li > a { color: #398ccb; }
nav.menu-229 > ul > li:nth-child(5) > ul > li > a:hover { background-color: #398ccb; color: #ffffff; text-transform: uppercase; }

/* Contact */
nav.menu-229 > ul > li:nth-child(6) > .label { color: #28265a; }
nav.menu-229 > ul > li:nth-child(6):hover > .label,
nav.menu-229 > ul > li:nth-child(6):focus-within > .label { background-color: #28265a; color: #ffffff; text-transform: uppercase; }
nav.menu-229 > ul > li:nth-child(6) > ul { background-color: #d4d4de; }
nav.menu-229 > ul > li:nth-child(6) > ul > li > a { color: #28265a; }
nav.menu-229 > ul > li:nth-child(6) > ul > li > a:hover { background-color: #28265a; color: #ffffff; text-transform: uppercase; }

/* Flèches & Dropdowns */
nav.menu-229 > ul > li > .arrow {
    display: none;
    align-self: center;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    margin-left: 5px;
    margin-right: 6px;
    opacity: 0.6;
    flex-shrink: 0;
}

nav.menu-229 ul.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    min-width: 200px;
    z-index: 2000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

nav.menu-229 > ul > li:hover > ul.submenu,
nav.menu-229 > ul > li:focus-within > ul.submenu {
    display: block;
}

nav.menu-229 ul.submenu > li > a {
    display: block;
    padding: 9px 18px;
    text-decoration: none;
    font-weight: 400;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    transition: background-color 0.12s;
}

/* Hamburger caché par défaut */
nav.menu-229 > input[type="checkbox"],
nav.menu-229 > div.button {
    display: none;
}

/* ==========================================================================
   5. CAROUSEL
   ========================================================================== */
file-carousel .carousel,
[data-is="file-carousel"] .carousel {
    max-width: 100% !important;
}

file-carousel img,
[data-is="file-carousel"] img {
    width: 100%;
}

.slick-initialized .slick-slide {
    width: 100%;
    position: relative;
}

.slick-slide img {
    padding: 0 !important;
    margin: 0 !important;
}

.slick-prev,
.slick-next {
    background: transparent !important;
}

.slick-next { right: 5px !important; }
.slick-prev { left: 5px !important; z-index: 100; }
.slick-dots li button { background: transparent !important; }

.carousel .content {
    position: absolute;
    width: 40%;
    padding: 2%;
    top: 10%;
    left: 0;
    font-size: 20px;
    color: #0f1e47;
}

.carousel .title {
    font-size: 35px;
    line-height: 40px;
    font-weight: 800;
    color: #243e84;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    padding: 0 0 2% 0;
}

.carousel .description {
    font-size: 20px;
    color: #0f1e47;
    line-height: 22px;
    font-weight: 700;
}

.carousel .link {
    text-align: right;
    font-family: 'Montserrat', sans-serif;
    padding: 2% !important;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 700;
}

.carousel .link a {
    color: #243e84 !important;
}

/* ==========================================================================
   6. CONTENU GLOBAL & TYPOGRAPHIE
   ========================================================================== */
.content .wrapper {
    background-color: #ffffff;
    /* Empêche la marge du DERNIER bloc de contenu (.one-column, .two-columns, etc.)
       de "traverser" la carte blanche (margin collapsing) et de créer un espace
       visible entre la carte et le footer, quelle que soit la page. */
    display: flow-root;
}

/* --------------------------------------------------------------------
   Effet 3D + couleur de repère sur la carte de contenu
   Objectif : dès l'entrée dans le contenu, l'internaute repère en un
   coup d'oeil dans quelle rubrique/thème il se trouve, grâce à un
   bandeau supérieur coloré (même palette que .main, section 10) associé
   à un léger effet de relief (ombre portée).
   IMPORTANT : on cible uniquement le PREMIER .wrapper, enfant direct de
   <section class="content">, et pas ".content .wrapper" en général :
   ce sélecteur descendant attrapait aussi d'autres div.wrapper imbriquées
   plus bas dans la page (ex: .item-data.block-48701.type-html.wrapper),
   ce qui appliquait l'effet à plusieurs blocs au lieu du seul premier.
   -------------------------------------------------------------------- */
section.content > .wrapper:first-child {
    position: relative;
    border-radius: 6px;
    /* Ombre portée en plusieurs couches pour un effet de profondeur */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 6px 16px rgba(0, 0, 0, 0.10),
        0 14px 32px rgba(0, 0, 0, 0.08);
    /* Nécessaire pour que le bandeau du dessus respecte le border-radius */
    overflow: hidden;
    /* Coupe le rendu de l'ombre pile au bord inférieur de la div (0 en bas),
       tout en laissant l'ombre déborder normalement en haut/gauche/droite
       (-100px de marge de clip, largement supérieur à l'étendue de l'ombre
       la plus large : 14px + 32px de flou). Évite que l'ombre du bas ne
       "déborde" visuellement sur le footer. */
    clip-path: inset(-100px -100px 0 -100px);
}

/* Bandeau supérieur en couleur unie */
section.content > .wrapper:first-child::before {
    content: "";
    display: block;
    height: 10px;
    width: 100%;
    background-color: #28265a; /* couleur par défaut */
}

/* --- Couleurs par thème (identiques à .main, section 10) --- */
body.theme-319 section.content > .wrapper:first-child::before,
body.theme-327 section.content > .wrapper:first-child::before {
    background-color: #EB5B55; /* rouge */
}
body.theme-320 section.content > .wrapper:first-child::before {
    background-color: #28265a; /* bleu marine */
}
body.theme-321 section.content > .wrapper:first-child::before,
body.theme-367 section.content > .wrapper:first-child::before {
    background-color: #f7a600; /* jaune */
}
body.theme-322 section.content > .wrapper:first-child::before,
body.theme-370 section.content > .wrapper:first-child::before {
    background-color: #6d3b2d; /* marron */
}
body.theme-354 section.content > .wrapper:first-child::before {
    background-color: #bd9c7e; /* marron clair */
}
body.theme-364 section.content > .wrapper:first-child::before,
body.theme-369 section.content > .wrapper:first-child::before {
    background-color: #D7C4B3; /* Yoga */
}
body.theme-363 section.content > .wrapper:first-child::before,
body.theme-368 section.content > .wrapper:first-child::before {
    background-color: #BE9C80; /* Méditation */
}
body.theme-323 section.content > .wrapper:first-child::before {
    background-color: #398ccb; /* bleu clair */
}

/* --------------------------------------------------------------------
   Fond de la zone de contenu par thème.
   NB : la carte intérieure (section.content > .wrapper:first-child) a
   son propre fond blanc, ces couleurs très claires ne sont donc
   visibles que de part et d'autre de la carte (à la place du beige du
   <body>) et sur toute la largeur au-dessus/en dessous d'elle.
   -------------------------------------------------------------------- */
body.theme-319 section.content {
    background-color: #f5f5f5; /* gris très clair, thème rouge */
}
body.theme-320 section.content {
    background-color: #e9e9ee; /* gris bleuté, thème bleu marine */
}
body.theme-321 section.content {
    background-color: #fef6e5; /* crème, thème jaune */
}
body.theme-322 section.content,
body.theme-370 section.content {
    background-color: #f5f5f5; /* gris très clair, thème marron */
}
body.theme-323 section.content {
    background-color: #e5f3fa; /* bleu très clair, thème bleu clair */
}
body.theme-354 section.content,
body.theme-363 section.content,
body.theme-364 section.content {
    background-color: #f0e9e3; /* beige clair, thèmes marron clair (354, 363, 364) */
}

/* --- Ombre 3D teintée de la couleur du thème ---
   Une couleur sombre (bleu marine, rouge, marron) diluée à faible
   opacité se confond avec une ombre grise classique et devient peu
   visible ; une couleur claire (jaune, marron clair) reste au contraire
   très visible à la même opacité. Pour un rendu homogène quelle que
   soit la couleur d'origine, on éclaircit d'abord la couleur du thème
   (mélange à 45% avec du blanc = halo pastel), puis on l'utilise dans
   l'ombre à une opacité plus franche. Une seule règle générique via
   :is(), plus besoin de dupliquer par thème. */
body:is(.theme-319, .theme-327, .theme-367, .theme-320, .theme-321, .theme-322, .theme-370, .theme-354, .theme-363, .theme-364, .theme-368, .theme-369, .theme-323)
    section.content > .wrapper:first-child {
    --theme-glow: color-mix(in srgb, var(--theme-accent) 45%, white);
    box-shadow:
        0 1px 3px color-mix(in srgb, var(--theme-glow) 70%, transparent),
        0 6px 18px color-mix(in srgb, var(--theme-glow) 75%, transparent),
        0 14px 34px color-mix(in srgb, var(--theme-glow) 65%, transparent);
}

/* --- Cas particulier : theme-354 (marron clair, #bd9c7e) ---
   Cette couleur est déjà très proche du beige de fond de page
   (#e5d7cc) : l'éclaircir davantage (comme les autres thèmes)
   la rend quasi identique au fond, donc invisible. On l'assombrit
   au contraire légèrement pour créer un contraste suffisant.
   Même traitement pour ses variantes 363 (#BE9C80) et 364 (#D7C4B3),
   encore plus proche du fond. */
body:is(.theme-354, .theme-363, .theme-364) section.content > .wrapper:first-child {
    --theme-glow: color-mix(in srgb, var(--theme-accent) 70%, black);
}

/* --- Page d'accueil (body.theme-315.layout-1585.item-4674094) :
   on désactive complètement l'effet (bandeau + relief), cette page
   n'a pas de thème/rubrique associé.

   CORRECTION : il faut aussi annuler le "clip-path" hérité de la règle
   générique ci-dessus. "inset(-100px -100px 0 -100px)" n'autorise que
   100px de débordement latéral : la galerie <item-gallery>, qui doit
   sortir des 1200px du wrapper pour occuper toute la largeur de l'écran,
   se retrouvait rognée au-delà de ces 100px (soit ~260px coupés de
   chaque côté sur un écran 1920px). "overflow: visible" seul ne suffit
   pas, le clip-path s'applique indépendamment. --- */
body.theme-315.layout-1585.item-4674094 section.content > .wrapper:first-child {
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    clip-path: none;
}
body.theme-315.layout-1585.item-4674094 section.content > .wrapper:first-child::before {
    content: none;
    display: none;
}

/* --------------------------------------------------------------------
   Couleur de thème réutilisable (--theme-accent)
   Même palette que le bandeau du haut de la carte de contenu : on
   l'expose ici en variable CSS pour pouvoir la réutiliser ailleurs
   (boutons .primary.button ci-dessous, et toute autre future utilisation)
   sans dupliquer la liste de couleurs par thème à chaque fois.
   -------------------------------------------------------------------- */
:root {
    --theme-accent: #28265a; /* bleu marine, couleur par défaut */
}
body.theme-319,
body.theme-327 { --theme-accent: #EB5B55; } /* rouge */
body.theme-320 { --theme-accent: #28265a; } /* bleu marine */
body.theme-321 { --theme-accent: #f7a600; } /* jaune */
body.theme-367 { --theme-accent: #f7a600; } /* jaune */
body.theme-322 { --theme-accent: #6d3b2d; } /* marron */
body.theme-370 { --theme-accent: #6d3b2d; } /* marron */
body.theme-354 { --theme-accent: #bd9c7e; } /* marron clair */
body.theme-364 { --theme-accent: #D7C4B3; } /* beige Yoga */
body.theme-363 { --theme-accent: #BE9C80; } /* marron Méditation */
body.theme-369 { --theme-accent: #D7C4B3; } /* beige Yoga */
body.theme-368 { --theme-accent: #BE9C80; } /* marron Méditation */
body.theme-323 { --theme-accent: #398ccb; } /* bleu clair */

/* --------------------------------------------------------------------
   BOUTONS .primary.button — design moderne à la couleur du thème
   Cette règle générique ne touche pas les boutons déjà stylés plus
   spécifiquement ailleurs (.HeaderRapide .primary.button, boutons
   Individuel/Groupe du bloc block-48701) : ces sélecteurs sont plus
   précis et gardent donc la priorité. Elle s'applique en revanche aux
   boutons génériques du contenu, comme "Téléchargez le flyer..." sur
   la page Événements.
   -------------------------------------------------------------------- */
.primary.button {
    display: inline-block;
    position: relative;
    padding: 14px 38px;
    border: none !important;
    border-radius: 50px;
    background-color: var(--theme-accent);
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    box-shadow:
        0 6px 16px color-mix(in srgb, var(--theme-accent) 45%, transparent),
        0 2px 4px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.primary.button:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--theme-accent) 55%, transparent),
        0 4px 8px rgba(0, 0, 0, 0.10);
}

.primary.button:active {
    transform: translateY(0);
    filter: brightness(0.97);
    box-shadow:
        0 3px 10px color-mix(in srgb, var(--theme-accent) 40%, transparent);
}

.primary.button:focus-visible {
    outline: 2px solid var(--theme-accent);
    outline-offset: 3px;
}

#content { padding: 2% 0 0 0; }
main, main > div { margin: 0 !important; padding: 0; }
/* Fond beige de la balise <main> uniquement sur la page Événements :
   .HeaderEvent est un marqueur propre à cette page, donc ça ne touche pas
   le <main> des autres pages. */
body:has(.HeaderEvent) main { background-color: #efece7; }
/* Même fond que <main> pour la carte .content .wrapper, uniquement sur
   cette page (même marqueur .HeaderEvent que ci-dessus). */
body:has(.HeaderEvent) .content .wrapper { background-color: #efece7; }
/* Le bloc contenant la galerie d'événements a lui aussi un fond blanc
   par défaut : on l'aligne sur la même couleur, toujours scoppé à cette page. */
body:has(.HeaderEvent) .item-data.block-48701.type-html.wrapper { background-color: #efece7; }
/* Marge de 4% sur la zone de contenu, sur TOUTES les pages (le même souci
   d'espacement était constaté au-delà des seules pages événements).
   (!important nécessaire pour battre "main > div { margin:0 !important }",
   puisque .first-zone.editable, .second-zone et .third-zone sont des
   enfants directs de <main>) */
.first-zone.editable,
.second-zone,
.third-zone {
    margin: 4% !important;
}

.theme-107 .first-zone { padding: 0 0 5% 0; }
.second-zone {
    background: #f7f5f3;
    padding: 2% 4%;
    margin: 4% 0 !important;
    margin-bottom: 0 !important;
}
.third-zone { padding: 0 0 3% 0; }
.fourth-zone { padding: 3% 0; }

/* Quelle que soit la page, la DERNIÈRE zone de contenu (peu importe
   laquelle : first/second/third/fourth-zone) ne doit jamais garder de
   padding en bas, sinon ça crée un espace avant le footer. Sur l'accueil,
   ce n'était pas visible car la dernière zone utilisée n'en avait pas ;
   sur d'autres pages, cette même zone se retrouve en dernière position
   et son padding-bottom devient un espace superflu avant le footer. */
.first-zone:last-child,
.second-zone:last-child,
.third-zone:last-child,
.fourth-zone:last-child {
    padding-bottom: 0;
}

h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: #28265a;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px 0 0 100px !important;
    font-size: 38px;
}

h2::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 22px solid #e74c3c;
    margin-left: 4px;
}

/* --------------------------------------------------------------------
   H3 — style "LES SERVICES" : majuscules, lettres espacées, couleur
   du thème (var(--theme-accent), même variable que le bandeau du haut
   et les boutons .primary.button).
   Police : Roboto, la seule chargée par le @import en haut du fichier
   (le Montserrat utilisé ici auparavant n'était jamais téléchargé et
   retombait donc sur la sans-serif par défaut du navigateur).
   Les h3 déjà stylés plus spécifiquement ailleurs (tuiles d'événements,
   bloc Individuel/Groupe, page de détail d'événement, etc.) gardent la
   priorité grâce à leur sélecteur plus précis : cette règle ne les
   affecte pas.
   -------------------------------------------------------------------- */
h3 {
    font-family: 'Roboto', sans-serif;
    color: #282559;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 24px;
    text-align: center;
    margin: 0 0 15px 0;
}

/* --------------------------------------------------------------------
   H4 — couleur corail, commune à toutes les pages.
   Comme pour les h3 ci-dessus, les h4 déjà stylés par un sélecteur plus
   précis gardent la priorité : sur la page de détail d'un événement, le
   h4 du texte de description reste en rouge (#EB5B55) et celui du bloc
   "prochaines dates" reste en blanc (voir section 12).
   -------------------------------------------------------------------- */
h4 {
    color: #eb5b55;
    font-size: 17px;
}

/* --------------------------------------------------------------------
   TEXTE EN GRAS — même couleur que le texte environnant (demande client),
   la mise en avant se fait par le gras et une taille légèrement plus
   grande.
   -------------------------------------------------------------------- */
b,
strong {
    font-weight: 700;
    color: inherit;
}

/* --------------------------------------------------------------------
   TABLEAUX (thème 320 uniquement) — suppression du filet horizontal
   sous chaque cellule.
   Ce liseré vient de la feuille de style du thème (et non de ce
   fichier) : le "!important" est là pour être sûr de l'emporter,
   quelle que soit la spécificité de la règle d'origine. On cible
   ".editable > table" comme le thème, donc les tableaux directement
   dans une zone éditable, et non ceux imbriqués plus profond.
   -------------------------------------------------------------------- */
body.theme-320 .editable > table td {
    border-bottom: none !important;
}

/* ==========================================================================
   7. SYSTÈME DE COLONNES (GRILLES)
   ========================================================================== */
.one-column, .two-columns, .three-columns, .four-columns, .six-columns, .eight-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0;
    justify-content: space-between;
}

main .one-column, main .two-columns, main .three-columns, main .four-columns, main .six-columns, main .eight-columns {
    margin: 2% 0;
}

.one-column>*, .two-columns>*, .three-columns>*, .four-columns>*, .six-columns>*, .eight-columns>* {
    display: block;
    box-sizing: border-box;
    vertical-align: top;
    padding: 0;
}

/* Calculs des largeurs des colonnes */
.one-column>* { width: 100%; }

.two-columns>* { width: calc((100% - var(--margin)) / 2); }
.three-columns>* { width: calc((100% - (var(--margin)) * 2) / 3); }
.four-columns>* { width: calc((100% - (var(--margin)) * 3) / 4); }
.six-columns>* { width: calc((100% - (var(--margin)) * 5) / 6); }
.eight-columns>* { width: calc((100% - (var(--margin)) * 7) / 8); }

/* Variantes colonnes asymétriques */
.two-columns.third-left> :first-child, .two-columns.third-right> :last-child { width: var(--third); }
.two-columns.quarter-left> :first-child, .two-columns.quarter-right> :last-child { width: var(--quarter); }
.two-columns.third-left> :last-child, .two-columns.third-right> :first-child { width: calc((100% - (var(--margin) + var(--third)))); }
.two-columns.quarter-left> :last-child, .two-columns.quarter-right> :first-child { width: calc((100% - (var(--margin) + var(--quarter)))); }

/* Colonne unique centrée style spécial */
.one-column.centered>* {
    width: 70%;
    margin: 0 auto 1% auto;
    background: #243e84;
    color: white;
    padding: 2%;
    border-radius: 15px;
}
.one-column.centered h1, .one-column.centered h2, .one-column.centered h3, .one-column.centered h4, .one-column.centered h5, .one-column.centered h6,
.one-column.centered p, .one-column.centered a, .one-column.centered li, .one-column.centered table td, .one-column.centered table strong, 
.one-column.centered table b, .one-column.centered b, .one-column.centered strong { color: white; }
.one-column.centered a { text-decoration: underline; }
.one-column.centered a:hover { color: #2f42b6; }
.one-column.centered .editable ul li::before {
    content: "\f061";
    font-family: Icons;
    font-size: 11px;
    vertical-align: top;
    color: white;
    margin: 0 2px 0 0;
}

/* Réduction des espaces verticaux autour du titre "À la une" et de la galerie */
.item-4674094 .first-zone .one-column {
    margin: 1% 0;
}

/* La dernière .one-column ne contient que le composant invisible x-271 (drag-scroll) :
   pas besoin qu'elle ajoute de l'espace visuel avant le bloc suivant. */
.item-4674094 .first-zone .one-column:last-child {
    margin: 0;
}

/* Section Spécifique Images (item-4674094 Block-48701) */
.item-4674094 .block-48701 .four-columns {
    display: flex;
    gap: 30px;
    padding: 0 100px;
}

.item-4674094 .block-48701 .four-columns .editable {
    flex: 1;
    /* Carré garanti quelle que soit la largeur de colonne : la hauteur
       suit la largeur (aspect-ratio), au lieu de l'ancien min-height:250px
       qui donnait des rectangles hauts (les colonnes ne font que ~200px
       de large). */
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 18px;
    padding: 20px 10px;
}

/* Chaque tuile contient un <p>...</p> après le lien, vide à l'œil mais
   contenant un retour à la ligne — que le sélecteur :empty ne matche PAS
   (un espace ou un saut de ligne compte comme du contenu) : d'où l'espace
   qui persistait sous le texte. On le cible donc par sa structure : le
   seul <p> ENFANT DIRECT de la tuile est celui-là (le paragraphe de texte,
   lui, est à l'intérieur du <a> et n'est pas concerné). C'est un enfant
   flex à part entière : le "gap" de 18px s'appliquait avant lui et
   ajoutait un espace fantôme sous le texte. */
.item-4674094 .block-48701 .four-columns .editable > p {
    display: none;
}

.item-4674094 .block-48701 .four-columns .editable p {
    margin: 0;
    font-weight: bold;
    font-size: 16px;
}

/* Pictogramme au-dessus du texte, injecté en ::before (pas de balise <img> dans le HTML généré) */
.item-4674094 .block-48701 .four-columns .editable::before {
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 1. Notre programme */
.item-4674094 .block-48701 .four-columns .editable:nth-child(1),
.item-4674094 .block-48701 .four-columns .editable:nth-child(1) a{
    background-color: #EA5B55;
    color: #ffffff;
}
.item-4674094 .block-48701 .four-columns .editable:nth-child(1)::before {
    background-image: url('https://www.forum104.org/f/2df2868fc5baecf2883b9dd3640fe9e3beeda10d/Picto_Programme-Blanc.png');
}

/* 2. Yoga - Qi Gong */
.item-4674094 .block-48701 .four-columns .editable:nth-child(2),
.item-4674094 .block-48701 .four-columns .editable:nth-child(2) a{
    background-color: #D7C4B3;
    color: #28265a;
}
.item-4674094 .block-48701 .four-columns .editable:nth-child(2)::before {
    background-image: url('https://www.forum104.org/f/582d2b8a0605151aafcaeef7b6e6865460a6c27e/Picto_Yoga-QiGong-Bleu.png');
}

/* 3. Méditations régulières */
.item-4674094 .block-48701 .four-columns .editable:nth-child(3),
.item-4674094 .block-48701 .four-columns .editable:nth-child(3) a{
    background-color: #BE9C80;
    color: #28265a;
}
.item-4674094 .block-48701 .four-columns .editable:nth-child(3)::before {
    background-image: url('https://www.forum104.org/f/1bf551e7be3bdc9fe051fac3346847d428f0eb27/Picto_Meditations-Bleu.png');
}

/* 4. Accueil groupes */
.item-4674094 .block-48701 .four-columns .editable:nth-child(4),
.item-4674094 .block-48701 .four-columns .editable:nth-child(4) a{
    background-color: #F7A600;
    color: #ffffff;
}
.item-4674094 .block-48701 .four-columns .editable:nth-child(4)::before {
    background-image: url('https://www.forum104.org/f/e9c522d50c8831dcdf2c5f1244bf43dcb506c8b4/Picto_Accueil-groupes-Blanc.png');
}

/* --------------------------------------------------------------------
   PAGE D'ACCUEIL — BOUTONS "CALENDRIER / S'ABONNER / ÉCHOS"
   Ces trois boutons pilule contournés sont stylés en inline dans le HTML
   (pas de classe propre) : le survol, impossible en inline, est donc géré
   ici. On les identifie par la couleur de bordure présente dans leur
   attribut style (a[style*="#XXXXXX" i], insensible à la casse), plus
   robuste que le href (celui d'Échos n'est encore que "#", et les URLs
   changent chaque année : /evenements-2026, ...).
   Au survol : remplissage à la couleur demandée + texte en blanc.
   Le "!important" sur color est indispensable : la couleur de base est
   posée en style inline, qui l'emporte sinon sur n'importe quel sélecteur.
   NB : si la couleur de bordure inline change un jour, penser à mettre à
   jour la valeur correspondante dans les sélecteurs ci-dessous.
   -------------------------------------------------------------------- */
body.item-4674094 a[style*="#EA5B55" i],
body.item-4674094 a[style*="#28265A" i],
body.item-4674094 a[style*="#8D735B" i] {
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Calendrier (bordure #EA5B55) → fond #eb5b55 */
body.item-4674094 a[style*="#EA5B55" i]:hover {
    background-color: #eb5b55;
    color: #ffffff !important;
}

/* S'abonner (bordure #28265A) → fond #28265a */
body.item-4674094 a[style*="#28265A" i]:hover {
    background-color: #28265a;
    color: #ffffff !important;
}

/* Échos (bordure #8D735B) → fond marron #6d3b2d (la bordure suit) */
body.item-4674094 a[style*="#8D735B" i]:hover {
    background-color: #6d3b2d;
    border-color: #6d3b2d !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------
   PAGE "NOS INTERVENANTS" (body.item-4674959) — boutons CALENDRIER et
   ÉVÉNEMENTS en pilule contournée à la couleur du thème, sur le modèle
   des .btn-outline-red / .btn-outline-blue des pages Événements
   (section 11), et non en pilule pleine comme le veut la règle
   générique ".primary.button" de la section 6.
   Les "!important" sont indispensables : cette règle générique pose
   "border: none !important" et "color: #ffffff !important", qu'aucune
   spécificité seule ne peut battre.
   -------------------------------------------------------------------- */
body.item-4674959 .block-48701 .four-columns .primary.button {
    padding: 10px 30px;
    border: 2px solid var(--theme-accent) !important;
    border-radius: 30px;
    background-color: #ffffff;
    color: var(--theme-accent) !important;
    font-size: 13px;
    letter-spacing: 0.5px;
    box-shadow: none;
}

body.item-4674959 .block-48701 .four-columns .primary.button:hover {
    background-color: var(--theme-accent);
    color: #ffffff !important;
    /* On neutralise le soulèvement et l'ombre du survol générique :
       un bouton contourné se remplit au survol, il ne décolle pas. */
    transform: none;
    filter: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------
   PAGE INTERVENANTS — tableau (Photo / Prénom-Nom / Profil intervenant)
   Le texte complet du profil est bien présent dans le HTML, mais une
   règle de la vue/du thème le tronque à l'affichage sur une seule ligne
   ("…"). On neutralise ici les trois mécanismes de troncature possibles :
   nowrap + overflow + ellipsis (une ligne), line-clamp (N lignes) et
   max-height. Ciblé sur les cellules et leurs descendants (la troncature
   peut être posée sur un div/p à l'intérieur du td), en excluant les
   images pour ne pas libérer la taille des photos de la 1ère colonne.
   -------------------------------------------------------------------- */
body.item-4674959 table td,
body.item-4674959 table td *:not(img) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    max-height: none !important;
}

/* --------------------------------------------------------------------
   PAGE INTERVENANTS — tableau affiché en FICHES (PC et responsive)
   Chaque ligne <tr> du tableau devient une fiche (carte blanche arrondie
   et ombrée), une fiche par ligne, avec la même carte sur tous les
   écrans ; seule la disposition interne s'adapte :
     - PC : photo à gauche (110px), nom puis profil à droite ;
     - responsive (sous 900px) : photo (72px) et nom côte à côte, profil
       en dessous sur toute la largeur de la fiche.
   L'en-tête du tableau (Photo / Prénom-Nom / Profil) est masqué : il ne
   correspond plus à rien visuellement. Le tri par colonne n'est donc plus
   disponible ; l'ordre alphabétique d'origine est conservé.
   Les "!important" répondent à ceux de Semantic UI (display des cellules,
   classe "unstackable", paddings "very compact", fond au survol
   "selectable").
   -------------------------------------------------------------------- */
body.item-4674959 table.ui.table,
body.item-4674959 table.ui.table tbody {
    display: block !important;
    width: 100% !important;
}
body.item-4674959 table.ui.table {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.item-4674959 table.ui.table thead {
    display: none !important;
}

/* Chaque ligne = une fiche (PC : photo à gauche sur 2 rangées) */
body.item-4674959 table.ui.table tbody tr {
    display: grid !important;
    grid-template-columns: 110px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    row-gap: 8px;
    align-items: start;
    margin: 0 0 18px 0;
    padding: 20px;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
body.item-4674959 table.ui.table tbody tr:last-child {
    margin-bottom: 0;
}

/* Cellules : plus de comportement de tableau */
body.item-4674959 table.ui.table tbody td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-align: left !important;
}

/* Photo : carré recadré sans déformation, sur les deux rangées */
body.item-4674959 table.ui.table tbody td:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
}
body.item-4674959 table.ui.table tbody td:nth-child(1) img {
    display: block;
    width: 110px;
    height: 110px;
    max-width: none;
    object-fit: cover;
    border-radius: 8px;
}

/* Nom */
body.item-4674959 table.ui.table tbody td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}
body.item-4674959 table.ui.table tbody td:nth-child(2) a {
    color: #28265a;
    text-decoration: none;
}

/* Profil : sous le nom, à droite de la photo */
body.item-4674959 table.ui.table tbody td:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    font-size: 14px;
    line-height: 1.6;
    color: #2d2d38;
}

/* Responsive : photo + nom côte à côte, profil en dessous pleine largeur */
@media (max-width: 900px) {
    body.item-4674959 table.ui.table tbody tr {
        grid-template-columns: 72px 1fr;
        grid-template-rows: auto;
        column-gap: 14px;
        row-gap: 12px;
        align-items: center;
        margin-bottom: 16px;
        padding: 14px;
    }
    body.item-4674959 table.ui.table tbody td:nth-child(1) {
        grid-row: 1;
    }
    body.item-4674959 table.ui.table tbody td:nth-child(1) img {
        width: 72px;
        height: 72px;
    }
    body.item-4674959 table.ui.table tbody td:nth-child(2) {
        font-size: 16px;
    }
    body.item-4674959 table.ui.table tbody td:nth-child(3) {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}


/* ==========================================================================
   7ter. BLOC "INDIVIDUEL / GROUPES" (item-data block-48701 type-html)
   ========================================================================== */

/* --- Ligne des deux boutons pilule ---
   Même largeur de colonnes que la ligne des titres juste en dessous
   (pas de max-width réduit) pour que chaque bouton soit bien centré
   au-dessus de son texte correspondant. */
.item-data.block-48701.type-html .two-columns:first-of-type {
    margin-bottom: 20px;
}

.item-data.block-48701.type-html .two-columns:first-of-type .primary.button {
    display: inline-block;
    padding: 10px 44px;
    border: none;
    border-radius: 30px;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    box-shadow: none;
    transition: opacity 0.2s;
}

.item-data.block-48701.type-html .two-columns:first-of-type .primary.button:hover {
    opacity: 0.85;
}

/* Bouton "Individuel" en bleu */
.item-data.block-48701.type-html .two-columns:first-of-type .editable:first-child .primary.button {
    background-color: #008ecf;
}

/* Bouton "Groupe" en jaune */
.item-data.block-48701.type-html .two-columns:first-of-type .editable:last-child .primary.button {
    background-color: #f7a600;
}

/* --- Ligne des titres + textes ---
   NB : on cible ":nth-of-type(2)" et non ":last-of-type" car le 3e enfant
   du bloc est un .one-column (aussi une balise <div>) : ":last-of-type"
   ferait donc référence à lui, pas au 2e .two-columns. */
.item-data.block-48701.type-html .two-columns:nth-of-type(2) h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.item-data.block-48701.type-html .two-columns:nth-of-type(2) p {
    margin: 0 0 14px 0;
    font-size: 15px;
    line-height: 1.6;
}

/* Le dernier paragraphe de chaque colonne ne garde pas sa marge basse,
   sinon les deux colonnes se retrouvent avec un espace superflu sous
   leur texte. */
.item-data.block-48701.type-html .two-columns:nth-of-type(2) p:last-child {
    margin-bottom: 0;
}

/* Titre "Espace dédié AUX PARTICULIERS" en bleu.
   "body:not(.item-4677936)" exclut cette page précise : ses deux titres
   gardent donc la couleur de la règle générique "h3" (section 6). */
body:not(.item-4677936) .item-data.block-48701.type-html .two-columns:nth-of-type(2) .editable:first-child h3 {
    color: #008ecf;
}

/* Titre "Espace dédié AUX PERSONNES MORALES" en jaune (même exclusion) */
body:not(.item-4677936) .item-data.block-48701.type-html .two-columns:nth-of-type(2) .editable:last-child h3 {
    color: #f7a600;
}

@media (max-width: 768px) {
    .item-data.block-48701.type-html .two-columns:first-of-type .primary.button {
        padding: 10px 28px;
        font-size: 13px;
    }
}

/* ==========================================================================
   7bis. GALERIE D'ACTUALITÉS — CAROUSEL PLEINE LARGEUR
   (remplace l'ancien bloc "Galerie d'actualités avec Scroll Horizontal")
   ========================================================================== */

/* item-gallery est un élément HTML personnalisé (une balise), pas une classe :
   on le cible donc sans point devant, comme pour n'importe quelle balise. */

/* CORRECTION du "full-bleed" (sortie de la carte de 1200px) :
   l'ancienne technique (left:50% + width:100vw + translateX(-50%)) posait
   deux problèmes :
     1. 100vw inclut la largeur de la barre de défilement verticale, donc la
        galerie était systématiquement un peu plus large que la zone visible
        (débordement masqué par overflow-x:hidden sur <body>, mais centrage
        décalé de quelques pixels) ;
     2. position:relative + transform crée un contexte qui se combine mal
        avec les clip-path/overflow des conteneurs parents.
   La technique des marges négatives calculées ci-dessous n'utilise ni
   transform ni positionnement, et reste parfaitement centrée.
   NB : voir aussi la correction "clip-path: none" en section 6, sans
   laquelle la galerie reste rognée à 100px de débordement de chaque côté. */
.item-4674094 item-gallery {
    display: block;
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    padding: 8px 40px 16px 40px;
    /* Pas de fond propre : la galerie laisse voir le blanc de la carte
       .content .wrapper au centre (1200px) et le beige du <body> au-delà. */
    background-color: transparent;
}

@media (max-width: 768px) {
    .item-4674094 item-gallery {
        padding: 8px 16px 24px 16px;
    }
}

.item-4674094 item-gallery .three-columns.grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 20px;
    padding: 8px 4px 24px 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scroll-behavior: smooth;
}

.item-4674094 item-gallery .three-columns.grid:active {
    cursor: grabbing;
}

.item-4674094 item-gallery .three-columns.grid::-webkit-scrollbar {
    display: none;              /* Chrome, Edge, Safari */
}
.item-4674094 item-gallery .three-columns.grid {
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* Ancien Edge/IE, au cas où */
}

.item-4674094 item-gallery .three-columns.grid .item {
    flex: 0 0 300px;
    scroll-snap-align: start;
    user-select: none;
}

/* --- Carte --- */
.item-4674094 item-gallery .item .content {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #f4f4f2;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.item-4674094 item-gallery .item .content:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

/* --- Image --- */
.item-4674094 item-gallery .item .image {
    order: 1 !important;
    margin: 0;
    height: 170px;
    overflow: hidden;
    background: #e7e2d8;
}
.item-4674094 item-gallery .item .image a { display: block; height: 100%; }
.item-4674094 item-gallery .item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* --- Bandeau de catégorie, pleine largeur, juste sous l'image ---
   NB : l'ordre visuel (image / catégorie / titre / date) ne correspond pas
   à l'ordre du HTML généré (image / titre / catégorie / date), on force
   donc l'ordre avec !important pour l'emporter sur le "order" en ligne. */
.item-4674094 item-gallery .item .label,
.item-4674094 item-gallery .item .label data-label,
.item-4674094 item-gallery .item .label .data {
    display: block;
    width: 100%;
    margin: 0;
}
.item-4674094 item-gallery .item .label {
    order: 2 !important;
}
.item-4674094 item-gallery .item .label .ui.label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    border-radius: 0;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
    box-shadow: none;
}

/* --- Titre --- */
.item-4674094 item-gallery .item .title {
    order: 3 !important;
    padding: 16px 16px 4px 16px;
}
.item-4674094 item-gallery .item .title h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    color: #1a1a2e;
    font-family: 'Montserrat', sans-serif;
}
.item-4674094 item-gallery .item .title a { color: inherit; text-decoration: none; }
.item-4674094 item-gallery .item .title a:hover { text-decoration: underline; }

/* --- Date --- */
.item-4674094 item-gallery .item .date {
    order: 4 !important;
    margin-top: auto;   /* pousse la date tout en bas, quelle que soit la longueur du titre */
    padding: 0 16px 18px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #666;
}

/* Couleur de la date assortie à la couleur de la catégorie (Semantic UI déjà en place) */
.item-4674094 item-gallery .item .content:has(.ui.orange.label)  .date { color: #d9631e; }
.item-4674094 item-gallery .item .content:has(.ui.purple.label)  .date { color: #7c3aed; }
.item-4674094 item-gallery .item .content:has(.ui.grey.label)    .date { color: #6b7280; }
.item-4674094 item-gallery .item .content:has(.ui.blue.label)    .date { color: #2563eb; }
.item-4674094 item-gallery .item .content:has(.ui.yellow.label)  .date { color: #b8860b; }
.item-4674094 item-gallery .item .content:has(.ui.green.label)   .date { color: #16a34a; }

/* Sur le carousel de l'accueil, seule la DATE est affichée, jamais l'heure
   (PC comme mobile). Les deux <span> .event-day / .event-time sont créés
   par events-date-format.js (dont le sélecteur couvre la view 6706 sur
   toutes les pages, accueil compris) : on masque le second. NB : tant que
   le script n'a pas tourné, la date reste en texte brut AVEC l'heure —
   si c'est ce qu'on voit en ligne, c'est le script qu'il faut vérifier,
   pas ce CSS. */
.item-4674094 item-gallery .item .date .event-time {
    display: none;
}

/* --- On masque le chapô et le lien "Lire la suite" dans la tuile carousel --- */
.item-4674094 item-gallery .item .text,
.item-4674094 item-gallery .item .more {
    display: none;
}

/* --- Flèches de navigation sous le carousel ---
   Le conteneur .gallery-nav et ses deux boutons sont créés en JavaScript
   (méthode initArrows du tag drag-scroll) et ajoutés à la fin de
   <item-gallery>, donc juste après la grille. */
.item-4674094 item-gallery .gallery-nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding-top: 4px;
}

.item-4674094 item-gallery .gallery-nav-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid #eb5b55;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    transition: background 0.2s, opacity 0.2s, transform 0.2s;
}

/* Chevron dessiné en CSS (deux bordures + rotation) : pas d'image à charger */
.item-4674094 item-gallery .gallery-nav-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #eb5b55;
    border-right: 2px solid #eb5b55;
    transition: border-color 0.2s;
}
/* Les décalages horizontaux (-65% / -35%) compensent le fait qu'un chevron
   pivoté n'est pas visuellement centré sur son propre carré. */
.item-4674094 item-gallery .gallery-nav-btn.next::before {
    transform: translate(-65%, -50%) rotate(45deg);
}
.item-4674094 item-gallery .gallery-nav-btn.prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.item-4674094 item-gallery .gallery-nav-btn:hover:not(:disabled) {
    background: #eb5b55;
    transform: translateY(-2px);
}
.item-4674094 item-gallery .gallery-nav-btn:hover:not(:disabled)::before {
    border-color: #ffffff;
}

/* Extrémité atteinte : le bouton est désactivé côté JS (refresh()) */
.item-4674094 item-gallery .gallery-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.item-4674094 item-gallery .gallery-nav-btn:focus-visible {
    outline: 2px solid #28265a;
    outline-offset: 3px;
}

@media (max-width: 768px) {
    /* Largeur de carte fluide : ~62% de l'écran, plafonnée à 205px (une
       carte et demie visible sur un mobile standard : l'internaute voit
       d'emblée que ça défile). Tous les contenus (image, bandeau, textes)
       sont réduits en proportion pour des tuiles nettement plus compactes. */
    .item-4674094 item-gallery .three-columns.grid .item {
        flex-basis: min(205px, 62vw);
    }
    .item-4674094 item-gallery .item .image {
        height: 100px;
    }
    .item-4674094 item-gallery .item .label .ui.label {
        min-height: 38px;
        padding: 5px 10px;
        font-size: 10px;
    }
    .item-4674094 item-gallery .item .title {
        padding: 8px 10px 4px 10px;
    }
    .item-4674094 item-gallery .item .title h3 {
        font-size: 13px;
        line-height: 1.3;
    }
    .item-4674094 item-gallery .item .date {
        padding: 0 10px 12px 10px;
        font-size: 11px;
    }
    /* Carousel d'accueil (view 6706) : la date suit le titre au lieu
       d'être poussée tout en bas (margin-top:auto), et le jour est
       plus lisible. */
    .item-4674094 item-gallery[view="6706"] .item .date {
        margin-top: 6px !important;
        padding: 0 10px 12px 10px;
    }
    .item-4674094 item-gallery[view="6706"] .item .date .event-day {
        font-size: 15px;
    }
}


/* ==========================================================================
   8. FOOTER
   ========================================================================== */
footer {
    background-color: #28265a;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    padding: 25px 0;
}

footer .wrapper {
    display: flex;
    align-items: stretch;
    gap: 30px;
    padding: 0 20px;
}

.FooterLogo {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* logo en haut, icônes tout en bas */
    align-items: flex-start;
    min-width: 160px;
}

.FooterLogo img {
    height: 45px;   /* réduit (65px auparavant) */
    width: auto;
}

.FooterLogo p { display: flex; gap: 10px; margin: 0; }
.FooterLogo p a i { font-size: 22px; color: #ffffff; opacity: 0.85; transition: opacity 0.2s; }
.FooterLogo p a i:hover { opacity: 1; }

.FooterRapidLink {
    border-right: 1px solid rgba(255,255,255,0.2);
    padding-right: 30px;
    min-width: 200px;
}

.FooterRapidLink ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.FooterRapidLink ul li a {
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #eb5b55;
    border-bottom: 1px solid rgba(235, 91, 85, 0.4);
    padding-bottom: 8px;
    display: block;
}

.FooterRapidLink ul li:last-child a { color: #eb5b55; border-bottom: none; }
.FooterRapidLink ul li:nth-child(3) a { color: #ffffff; border-bottom-color: rgba(255,255,255,0.2); }
.FooterRapidLink ul li a:hover { opacity: 0.75; }

/* Premier élément : Espace ADHÉRENTS */
.FooterRapidLink ul li:nth-child(1) a {
    color: #FBBA00;
}

/* Deuxième élément : Devenir MEMBRE/ADHÉRER */
.FooterRapidLink ul li:nth-child(2) a {
    color: #EB5B55;
}

/* Troisième élément : S'abonner à la NEWSLETTER */
.FooterRapidLink ul li:nth-child(3) a {
    color: #2185D0;
}

/* Quatrième élément : FAIRE UN DON */
.FooterRapidLink ul li:nth-child(4) a {
    color: #cd1719;
}

.FooterLegal {
    border-right: 1px solid rgba(255,255,255,0.2);
    padding-right: 30px;
    min-width: 150px;
}

.FooterLegal p {
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.FooterLegal p a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.FooterLegal p a:hover { opacity: 0.75; }

.FooterAdress {
    flex: 1;
    color: #ffffff;
}

.FooterAdress .nomforum104 { font-size: 14px; font-weight: 700; margin: 0 0 8px 0; color: #ffffff; }
.FooterAdress p { margin: 0 0 6px 0; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.85); }
.FooterAdress a { color: rgba(255,255,255,0.85); text-decoration: none; }
.FooterAdress a:hover { color: #ffffff; text-decoration: underline; }


/* ==========================================================================
   9. RESPONSIVE DESIGN (GLOBAL)
   ========================================================================== */

/* --- TABLETTES ET ÉCRANS INTERMÉDIAIRES (Sous 1200px) --- */
@media (max-width: 1200px) {
    .wrapper,
    header .wrapper,
    .menu .wrapper,
    .carrousel .wrapper,
    .content .wrapper,
    footer .wrapper,
    section.content .wrapper {
        /* "section.content .wrapper" répété ici : la règle 1100px de la
           section 2 est plus spécifique que ".content .wrapper" et
           continuerait sinon de s'appliquer sous 1200px. */
        width: 100% !important;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Ajustement des paddings de la grille image spécifique */
    .item-4674094 .block-48701 .four-columns {
        padding: 0 20px;
    }

    /* Bandeau de couleur en haut de la carte de contenu : pleine largeur.
       Sous 1200px, le wrapper reçoit 20px de padding à gauche et à droite
       (règle ci-dessus) ; le ::before, bloc dans la zone de contenu,
       s'arrêtait donc à 20px de chaque bord. Les marges négatives le
       font repasser sous ce padding, jusqu'aux bords de la carte. */
    section.content > .wrapper:first-child::before {
        width: auto;
        margin-left: -20px;
        margin-right: -20px;
    }
}

/* --- MOBILES ET PHONES EN PAYSAGE (Sous 900px) ---
   Seuil à 900px et non 768px : un téléphone récent en paysage fait 844 à
   956px de large (iPhone 14 : 844, Pixel 8 : ~892) et une tablette en
   portrait 810 à 834px. À 768px, tous ces appareils recevaient la mise en
   page desktop, dans laquelle le logo (.HeaderLogo, centré en absolu)
   chevauchait les icônes de réseaux sociaux. 900px aligne aussi ce seuil
   sur celui de la bannière hero (section 10), qui était déjà à 900px :
   plus d'état intermédiaire où le hero est empilé mais pas le header. */
@media (max-width: 900px) {
    /* Typographies et titres */
    h2 {
        font-size: 26px;
        margin: 20px 0 0 20px !important;
    }
    h2::after {
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 15px solid #e74c3c;
    }

    /* Header Mobile */
    header .wrapper {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }

    /* Recherche + newsletter : empilés sur une même colonne de largeur
       fixe (260px), bords parfaitement alignés, en version compacte.
       (La disposition côte à côte a été tentée puis abandonnée : le
       bouton "s'abonner à la newsletter" est trop long pour tenir à côté
       du champ sur un écran de téléphone, et le retour à la ligne du
       flex-wrap produisait deux éléments de largeurs différentes, non
       alignés.) Le champ (x-75, élément personnalisé inline par défaut)
       est forcé en block pleine largeur. */
    .HeaderSearch {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 260px;
        max-width: 90%;
    }
    .HeaderSearch x-75 {
        display: block;
        width: 100%;
    }
    /* Toute la chaîne d'imbrication du champ doit être en pleine largeur,
       sinon l'alignement casse : ui-search (élément personnalisé, inline
       par défaut) et le .ui.input de Semantic UI (inline-flex à largeur
       intrinsèque) ne prennent pas la largeur de leur parent tout seuls —
       c'est eux qui laissaient le champ plus étroit que le bouton. */
    .HeaderSearch ui-search,
    .HeaderSearch .ui.left.icon.input,
    .HeaderSearch .ui.input input {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .HeaderSearch p {
        margin: 0;
    }
    .HeaderSearch p a {
        display: block;
        padding: 9px 10px;
        font-size: 11px;
        white-space: nowrap;
    }

    /* En mode colonne, le "margin-left: auto" du desktop (qui poussait ce
       bloc à droite de la barre) continue de le décaler vers la droite au
       lieu de le centrer : on le neutralise. */
    .HeaderSocial {
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
    }
    .HeaderLogo {
        position: static;
        top: auto;
        left: auto;
        transform: none;
    }
    .HeaderLogo img { height: 60px; }
    /* Boutons Espace adhérents / Adhérer : côte à côte en pilules
       compactes (largeur auto), au lieu de deux barres pleine largeur
       empilées qui mangeaient toute la hauteur de l'écran. */
    .HeaderRapide {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        width: auto;
        max-width: none;
    }
    .HeaderRapide .primary.button {
        width: auto;
        padding: 8px 18px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* Menu Mobile : barre pleine largeur + marge sous le menu.
       Le bouton hamburger n'est plus un petit carré en absolu (qui
       laissait la <nav> à 0px de haut et chevauchait le texte) : c'est
       une vraie barre dans le flux, sur toute la largeur. La nav a donc
       une hauteur réelle et la marge ci-dessous sépare bien le menu du
       contenu. */
    section.menu {
        margin-bottom: 20px;
    }
    /* Le padding 20px posé sous 1200px sur les wrappers empêcherait la
       barre d'aller d'un bord à l'autre de l'écran. */
    section.menu .wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    /* Barre du menu burger */
    nav.menu-229 > div.button {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100%;
        height: 44px;
        z-index: 3000;
        background-color: #28265a;
        cursor: pointer;
    }
    /* Icône 3 traits. Le translateY recentre verticalement l'icône : les
       deux traits du bas sont dessinés par box-shadow sous le premier,
       qui était seul centré. */
    nav.menu-229 > div.button::before {
        content: "";
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
        transform: translateY(-7px);
    }

    /* Checkbox invisible posée sur toute la barre : tout le bandeau est
       cliquable, pas seulement l'icône. */
    nav.menu-229 > input[type="checkbox"] {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 44px;
        margin: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 3001;
    }

    nav.menu-229 > ul {
        display: none;
        flex-direction: column;
        height: auto;
        background: #ffffff;
        border-top: 2px solid #e0e0e0;
    }

    /* En paysage, la hauteur utile tombe à ~390px alors que le menu ouvert
       affiche les 6 onglets ET tous leurs sous-menus (passés en static),
       soit une vingtaine de lignes. On le rend défilable plutôt que de le
       laisser pousser le contenu vers le bas. dvh d'abord pour tenir compte
       de la barre d'adresse mobile, vh en repli pour les vieux navigateurs. */
    nav.menu-229 > input[type="checkbox"]:checked ~ ul {
        display: flex;
        max-height: 75vh;
        max-height: 75dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    nav.menu-229 > ul > li {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Onglets empilés : séparateur horizontal au lieu du filet vertical
       hérité du desktop (li + li { border-left }). */
    nav.menu-229 > ul > li + li {
        border-left: none;
        border-top: 1px solid #e0e0e0;
    }

    nav.menu-229 > ul > li > a,
    nav.menu-229 > ul > li > .label {
        width: 100%;
        height: 44px;
        padding: 0 16px;
        justify-content: flex-start;
    }

    nav.menu-229 ul.submenu {
        display: block;
        position: static;
        box-shadow: none;
        width: 100%;
        padding: 0;
    }

    nav.menu-229 ul.submenu > li > a {
        padding-left: 28px;
    }

    /* Carrousel */
    .carousel .content {
        width: 80%;
        top: 5%;
    }
    .carousel .title { font-size: 22px; line-height: 26px; }
    .carousel .description { font-size: 14px; line-height: 16px; }

    /* Redimensionnement du système de colonnes global pour le mobile */
    .two-columns>*, .three-columns>*, .four-columns>*, .six-columns>*, .eight-columns>*,
    .two-columns.third-left> :first-child, .two-columns.third-right> :last-child,
    .two-columns.quarter-left> :first-child, .two-columns.quarter-right> :last-child,
    .two-columns.third-left> :last-child, .two-columns.third-right> :first-child,
    .two-columns.quarter-left> :last-child, .two-columns.quarter-right> :first-child {
        width: 100% !important;
        margin-bottom: 20px;
    }

    /* Bloc des 4 tuiles de l'accueil : grille 2x2 sur mobile (deux tuiles
       côte à côte par rangée), au lieu de l'empilement en colonne. Le
       "!important" sur width est indispensable : la règle générale du
       système de colonnes ci-dessus force "width:100% !important" sur
       tous les enfants de .four-columns ; à importance égale, c'est
       cette règle-ci, plus tard dans le fichier, qui gagne. */
    .item-4674094 .block-48701 .four-columns {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
    }
    .item-4674094 .block-48701 .four-columns .editable {
        width: calc((100% - 15px) / 2) !important;
        flex: 0 0 calc((100% - 15px) / 2);
        /* le carré vient de l'aspect-ratio de la règle de base */
        margin-bottom: 0 !important;
    }

    /* Footer Mobile */
    footer .wrapper {
        flex-direction: column;
        gap: 25px;
    }

    .FooterLogo {
        justify-content: flex-start;
        gap: 15px;
        width: 100%;
    }
    .FooterLogo img {
        height: 38px;   /* encore un peu plus petit sur mobile */
    }

    .FooterRapidLink,
    .FooterLegal {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        padding-right: 0;
        padding-bottom: 20px;
        width: 100%;
    }

    .FooterLegal p {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* --- ÉCRANS BAS / TÉLÉPHONES EN PAYSAGE (moins de 500px de haut) ---
   Le header mobile empile ses 4 blocs en colonne : ~370px de haut, soit
   plus que toute la hauteur d'un écran en paysage (360px). L'internaute
   arrive donc sur une page où rien d'autre que la têtière n'est visible.
   On repasse ici en disposition horizontale sur 2 rangées compactes
   (logo, puis recherche + newsletter + réseaux + boutons), ~100px au
   total. Critère en hauteur et non en largeur : c'est bien le manque de
   hauteur qui pose problème, une tablette en portrait (810x1080) n'est
   pas concernée et garde l'empilement. */
@media (max-width: 900px) and (max-height: 500px) {
    header .wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px 16px;
        padding: 10px 0;
    }

    .HeaderLogo {
        order: 1;
        flex: 0 0 100%;
        text-align: center;
    }
    .HeaderLogo img { height: 38px; }

    /* Recherche et newsletter côte à côte plutôt que l'un sous l'autre */
    .HeaderSearch {
        order: 2;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        width: auto;
        max-width: none;
    }
    .HeaderSearch .ui.input input {
        width: 150px;
        padding: 6px 8px 6px 30px;   /* garde la place de la loupe décalée */
    }
    .HeaderSearch p a {
        padding: 7px 12px;
        font-size: 11px;
        white-space: nowrap;
    }

    .HeaderSocial { order: 3; }
    .HeaderSocial a i { font-size: 20px; }

    /* Boutons Espace adhérents / Adhérer côte à côte */
    .HeaderRapide {
        order: 4;
        flex-direction: row;
        gap: 10px;
        width: auto;
        max-width: none;
    }
    .HeaderRapide .primary.button {
        padding: 7px 14px;
        font-size: 11px;
        white-space: nowrap;
    }

    /* Le menu déroulant dispose d'encore moins de place en paysage */
    nav.menu-229 > input[type="checkbox"]:checked ~ ul {
        max-height: 70vh;
        max-height: 70dvh;
    }
}

/* --- TRÈS PETITS ÉCRANS (Sous 480px) --- */
@media (max-width: 480px) {
    .HeaderSearch {
        max-width: 100%;
    }
    
    .one-column.centered>* {
        width: 100%;
    }
}

/* ==========================================================================
   10. BANNIÈRE HERO (section .carrousel) — Texte bleu + triangle + carousel
   ========================================================================== */

.carrousel .wrapper .two-columns {
    align-items: stretch;
    margin: 0;
    overflow: visible; /* pour laisser dépasser le triangle sur la colonne de droite */
}

.carrousel .wrapper .two-columns > .editable {
    width: 50%;
}

/* --- Colonne gauche : texte sur fond bleu marine --- */
.carrousel .wrapper .two-columns > .editable:first-child {
    position: relative;
    background-color: #28265a;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px 90px 50px 70px;
    min-height: 520px;
    z-index: 1;
    box-sizing: border-box;
}

/* Triangle qui dépasse sur la colonne de droite (par-dessus l'image) */
.carrousel .wrapper .two-columns > .editable:first-child::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 42px solid transparent;
    border-bottom: 42px solid transparent;
    border-left: 30px solid #28265a;
    z-index: 3;
    pointer-events: none;
}

.carrousel .wrapper .two-columns > .editable:first-child p:first-child {
    margin: 0 0 30px 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 46px;
    line-height: 1.2;
}

.carrousel .wrapper .two-columns > .editable:first-child p:last-child {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 18px;
    text-decoration: underline;
    line-height: 1.6;
    margin-bottom: 0;
}

.carrousel .wrapper .two-columns > .editable:first-child span.orange { color: #f7a600; }
.carrousel .wrapper .two-columns > .editable:first-child span.red    { color: #eb5b55; }
.carrousel .wrapper .two-columns > .editable:first-child span.blue   { color: #398ccb; }

/* --- Colonne droite : image / carousel --- */
.carrousel .wrapper .two-columns > .editable:last-child {
    position: relative;
    overflow: hidden;
    min-height: 520px;
}

.carrousel .wrapper .two-columns > .editable:last-child file-carousel,
.carrousel .wrapper .two-columns > .editable:last-child .carousel,
.carrousel .wrapper .two-columns > .editable:last-child .slick-list,
.carrousel .wrapper .two-columns > .editable:last-child .slick-track,
.carrousel .wrapper .two-columns > .editable:last-child .slick-slide {
    height: 100%;
}

.carrousel .wrapper .two-columns > .editable:last-child .slick-slide {
    position: relative;
}

.carrousel .wrapper .two-columns > .editable:last-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Texte superposé sur l'image (titre / description / bouton) ---
   .content recouvre maintenant TOUTE la diapo (100% x 100%) en flex-colonne :
   - titre/description sont poussés à 70% de largeur, alignés à droite
   - le bouton est poussé tout en bas (margin-top:auto) et centré sur 100% */
.carrousel .wrapper .two-columns .carousel .content {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 6% 4%;
    box-sizing: border-box;
    text-align: left;
    font-size: 18px;
    color: #28265a;
    z-index: 2;
}

.carrousel .wrapper .two-columns .carousel .title {
    width: 85%;
    margin: 0 auto;
    text-align: center;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 800;
    color: #eb5b55;
    text-transform: uppercase;
    padding: 0 0 8px 0;
}

.carrousel .wrapper .two-columns .carousel .description {
    width: 85%;
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    color: #28265a;
}

.carrousel .wrapper .two-columns .carousel .link {
    margin-top: auto;   /* pousse le bouton tout en bas du bloc */
    width: 100%;
    text-align: center;
    padding: 0 0 2% 0 !important;
}

.carrousel .wrapper .two-columns .carousel .link a {
    display: inline-block;
    padding: 12px 30px;
    background: #ffffff;
    border: 2px solid #eb5b55;
    border-radius: 30px;
    color: #eb5b55 !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    transition: background 0.2s, color 0.2s;
}

.carrousel .wrapper .two-columns .carousel .link a:hover {
    background: #eb5b55;
    color: #ffffff !important;
}

@media (max-width: 900px) {
    .carrousel .wrapper .two-columns > .editable {
        width: 100%;
        min-height: unset;
    }
    .carrousel .wrapper .two-columns > .editable:first-child {
        padding: 40px 30px;
        /* Le min-height:520px du desktop est posé sur ".editable:first-child",
           un sélecteur PLUS spécifique que le ".editable { min-height:unset }"
           mobile ci-dessus : il continuait donc de s'appliquer, d'où un bloc
           bleu de 520px de haut pour 4 lignes de texte. On l'annule ici, au
           même niveau de spécificité : le bloc épouse son contenu. */
        min-height: 0;
    }
    /* Le <p></p> vide qui suit le titre dans le HTML ajoute sinon sa marge
       par défaut sous le texte. */
    .carrousel .wrapper .two-columns > .editable:first-child p:empty {
        display: none;
    }
    .carrousel .wrapper .two-columns > .editable:first-child::after {
        display: none; /* colonnes empilées en mobile : le triangle n'a plus de sens */
    }
    /* Titre du hero : taille fluide selon la largeur d'écran (24px sur
       les plus petits mobiles, jusqu'à 34px vers 450px de large), au lieu
       d'un 26px figé qui était trop grand à 320px et trop petit sur
       tablette. Ciblé sur p:first-child : l'ancienne règle sur "p" tout
       court agrandissait AUSSI le paragraphe de lien (p:last-child), qui
       passait de 18px à 26px — corrigé, il redescend à 15px. */
    .carrousel .wrapper .two-columns > .editable:first-child p:first-child {
        font-size: clamp(24px, 7.5vw, 34px);
        line-height: 1.25;
        margin-bottom: 20px;
    }
    .carrousel .wrapper .two-columns > .editable:first-child p:last-child {
        font-size: 15px;
    }
    .carrousel .wrapper .two-columns > .editable:last-child {
        min-height: 320px;
    }
    .carrousel .wrapper .two-columns .carousel .content {
        width: 100%;
        right: 10%;
    }
}



/* ==========================================================================
   X. THEME SPÉCIFIQUE
   ========================================================================== */
/* .Titre_event est utilisé sur les pages de détail d'un événement, où .main
   n'est plus le ruban mais le vrai titre de l'événement (voir section 12
   plus bas, qui réinitialise le style de .main pour ces pages-là). */
body.theme-319 .main,
body.theme-320 .main,
body.theme-321 .main,
body.theme-322 .main,
body.theme-323 .main,
body.theme-327 .main,
body.theme-367 .main,
body.theme-354 .main,
body.theme-363 .main,
body.theme-364 .main,
body.theme-368 .main,
body.theme-369 .main,
body.theme-370 .main,
body.theme-319 .Titre_event,
body.theme-320 .Titre_event,
body.theme-321 .Titre_event,
body.theme-322 .Titre_event,
body.theme-323 .Titre_event,
body.theme-327 .Titre_event,
body.theme-367 .Titre_event,
body.theme-354 .Titre_event,
body.theme-363 .Titre_event,
body.theme-364 .Titre_event,
body.theme-368 .Titre_event,
body.theme-369 .Titre_event,
body.theme-370 .Titre_event {
    position: relative;
    display: table;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    color: #ffffff;
    padding: 12px 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    border-radius: 0 0 10px 10px;
}

body.theme-319 .main::after,
body.theme-320 .main::after,
body.theme-321 .main::after,
body.theme-322 .main::after,
body.theme-323 .main::after,
body.theme-327 .main::after,
body.theme-367 .main::after,
body.theme-354 .main::after,
body.theme-363 .main::after,
body.theme-364 .main::after,
body.theme-368 .main::after,
body.theme-369 .main::after,
body.theme-370 .main::after,
body.theme-319 .Titre_event::after,
body.theme-320 .Titre_event::after,
body.theme-321 .Titre_event::after,
body.theme-322 .Titre_event::after,
body.theme-323 .Titre_event::after,
body.theme-327 .Titre_event::after,
body.theme-367 .Titre_event::after,
body.theme-354 .Titre_event::after,
body.theme-363 .Titre_event::after,
body.theme-364 .Titre_event::after,
body.theme-368 .Titre_event::after,
body.theme-369 .Titre_event::after,
body.theme-370 .Titre_event::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 20px;
    clip-path: path('M 0,0 L 14,14 Q 20,20 26,14 L 40,0 Z');
}

/*** ROUGE ***/
body.theme-319 .main,
body.theme-319 .main::after,
body.theme-327 .main,
body.theme-327 .main::after,
body.theme-367 .main,
body.theme-367 .main::after,
body.theme-319 .Titre_event,
body.theme-319 .Titre_event::after,
body.theme-327 .Titre_event,
body.theme-327 .Titre_event::after,
body.theme-367 .Titre_event,
body.theme-367 .Titre_event::after {
    background-color: #EB5B55;
}

/** BLEU FONCE ***/
body.theme-320 .main,
body.theme-320 .main::after,
body.theme-320 .Titre_event,
body.theme-320 .Titre_event::after {
    background-color: #28265a;
}

/*** JAUNE ***/
body.theme-321 .main,
body.theme-321 .main::after,
body.theme-367 .main,
body.theme-367 .main::after,
body.theme-321 .Titre_event,
body.theme-321 .Titre_event::after,
body.theme-367 .Titre_event,
body.theme-367 .Titre_event::after {
    background-color: #f7a600;
}

/*** MARRON ***/
body.theme-322 .main,
body.theme-322 .main::after,
body.theme-322 .Titre_event,
body.theme-322 .Titre_event::after,
body.theme-370 .main,
body.theme-370 .main::after,
body.theme-370 .Titre_event,
body.theme-370 .Titre_event::after {
    background-color: #6d3b2d;
}

/*** MARRON CLAIR ***/
body.theme-354 .main,
body.theme-354 .main::after,
body.theme-354 .Titre_event,
body.theme-354 .Titre_event::after {
    background-color: #bd9c7e;
}

/*** BEIGE Yoga ***/
body.theme-364 .main,
body.theme-364 .main::after,
body.theme-364 .Titre_event,
body.theme-364 .Titre_event::after,
body.theme-369 .main,
body.theme-369 .main::after,
body.theme-369 .Titre_event,
body.theme-369 .Titre_event::after {
    background-color: #D7C4B3;
}

/*** MARRON CLAIR Meditation ***/
body.theme-363 .main,
body.theme-363 .main::after,
body.theme-363 .Titre_event,
body.theme-363 .Titre_event::after,
body.theme-368 .main,
body.theme-368 .main::after,
body.theme-368 .Titre_event,
body.theme-368 .Titre_event::after {
    background-color: #BE9C80;
}

/*** BLEU CLAIR ***/
body.theme-323 .main,
body.theme-323 .main::after,
body.theme-323 .Titre_event,
body.theme-323 .Titre_event::after {
    background-color: #398ccb;
}

/* --------------------------------------------------------------------
   PAGES "ADHÉSION" (body.item-4610836) ET "DONS" (body.item-4678038) :
   même structure HTML (bloc .item-data.block-13793.type-html avec un
   h1.titre_adhesion en premier .one-column). Le vrai titre de la page
   est h1.titre_adhesion, pas h1.main. On reprend le même style de
   ruban que .main (forme, pointe triangulaire en bas), avec la couleur
   du thème de la page (var(--theme-accent), cf. section 6).
   -------------------------------------------------------------------- */
body:is(.item-4610836, .item-4678038) h1.titre_adhesion {
    position: relative;
    display: table;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    color: #ffffff;
    padding: 12px 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    border-radius: 0 0 10px 10px;
    background-color: var(--theme-accent);
}

body:is(.item-4610836, .item-4678038) h1.titre_adhesion::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 20px;
    clip-path: path('M 0,0 L 14,14 Q 20,20 26,14 L 40,0 Z');
    background-color: var(--theme-accent);
}

/* Sur ces pages, h1.titre_adhesion n'est pas un enfant direct de <main>
   comme h1.main ailleurs : il est imbriqué dans .first-zone.editable
   (marge 4%) puis .one-column (marge 2%), ce qui décollait le ruban du
   haut de la carte. On annule ces deux marges du haut, uniquement ici,
   pour recoller le ruban en haut (comme sur les autres pages).
   NB : le "padding-top: 0" ci-dessous neutralisait aussi l'ancienne
   règle générique ".first-zone { padding: 3% 0 0 0 }", depuis supprimée ;
   il est conservé par sécurité si le thème en réintroduit un. */
body:is(.item-4610836, .item-4678038) .first-zone.editable {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body:is(.item-4610836, .item-4678038) .first-zone.editable .item-data.block-13793.type-html,
body:is(.item-4610836, .item-4678038) .first-zone.editable .item-data.block-13793.type-html > div,
body:is(.item-4610836, .item-4678038) .item-data.block-13793.type-html .one-column:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* --------------------------------------------------------------------
   PAGE body.item-4682002 : le titre h1.main n'a pas à être affiché
   (le titre visible de la page vient du contenu lui-même), et le
   contenu doit démarrer en haut de la carte.
   Le "!important" sur la marge est nécessaire pour battre la règle
   générique ".first-zone.editable { margin: 4% !important }" de la
   section 6.
   -------------------------------------------------------------------- */
body.item-4682002 h1.main {
    display: none;
}
body.item-4682002 div.first-zone.editable {
    margin-top: 0 !important;
}

/* --------------------------------------------------------------------
   RESPONSIVE — espace sous les titres-rubans (h1.main, .Titre_event,
   h1.titre_adhesion). La pointe du ruban (::after) dépasse de 20px sous
   le titre, alors que sa marge basse n'est que de 10px : sur mobile, le
   contenu suivant (ex : bouton CALENDRIER) venait toucher la pointe.
   Même spécificité que les règles du ruban ci-dessus, placée après :
   c'est donc elle qui l'emporte. Les h1.main des pages de détail
   d'événement (redevenus de simples titres, section 12) gardent leur
   propre marge grâce à un sélecteur plus précis.
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
    body:is(.theme-319, .theme-320, .theme-321, .theme-322, .theme-370, .theme-323, .theme-327, .theme-367, .theme-354, .theme-363, .theme-364, .theme-368, .theme-369) .main,
    body:is(.theme-319, .theme-320, .theme-321, .theme-322, .theme-370, .theme-323, .theme-327, .theme-367,  .theme-354, .theme-363, .theme-364, .theme-368, .theme-369) .Titre_event,
    body:is(.item-4610836, .item-4678038) h1.titre_adhesion {
        margin-bottom: 40px !important;
    }
}

/* ==========================================================================
   11. GRILLES DE TUILES ÉVÉNEMENTS (RÉUTILISABLE POUR PLUSIEURS PAGES)

   Plusieurs pages listent des événements avec la même galerie <item-gallery>
   et les mêmes classes internes, mais avec un attribut "view" différent par
   page (chaque page a sa propre vue/dataset configurée côté CMS) :
     - view="6706" → page "Tous les événements"
     - view="1727" → page "Les méditations régulières"
     - view="6604" → même style que les méditations (page à préciser)
     - view="1721" → même style (page à préciser)
     - (ajouter ici les futures pages du même type)

   EVENT_GRID_VIEWS : liste unique des "view" concernés par ce style de
   grille. Pour ajouter une nouvelle page dans le même style, il suffit
   d'ajouter son "view" à cette liste UNIQUEMENT (elle est utilisée dans
   TOUTES les règles ci-dessous via :is(...)) — aucune autre modification
   n'est nécessaire.

   EXCLUSION PAGE D'ACCUEIL : la galerie view="6706" est aussi utilisée
   sur la page d'accueil (.item-4674094), où c'est le style CAROUSEL de
   la section 7bis qui doit s'appliquer, pas celui-ci. Toutes les règles
   ci-dessous sont donc préfixées par "body:not(.item-4674094)" : elles
   ne s'appliquent jamais sur l'accueil, quelle que soit la view.
   ========================================================================== */

/* --- Boutons CALENDRIER / NOS INTERVENANTS ---
   Ces deux blocs (.ButtonEvent et .HeaderEvent) sont des enfants directs
   de <div class="first-zone editable">. La règle du thème
   ".editable > :not(table) { display:block; }" les fait donc passer en
   display:block (au lieu du display:flex normal des .two-columns), ce qui
   empile leurs colonnes au lieu de les mettre côte à côte. On force flex
   ici pour les deux. */
.two-columns.ButtonEvent,
.two-columns.third-right.HeaderEvent {
    display: flex !important;
}
.two-columns.ButtonEvent {
    align-items: flex-start;
    margin: 10px 0 30px 0;
}
.two-columns.ButtonEvent .editable:first-child { text-align: left; }
.two-columns.ButtonEvent .editable:last-child { text-align: right; }

.btn-outline-red,
.btn-outline-blue {
    display: inline-block !important;
    padding: 10px 30px;
    border-radius: 30px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-decoration: none;
    background: #ffffff;
    transition: background 0.2s, color 0.2s;
}
.btn-outline-red { border: 2px solid #EB5B55; color: #EB5B55 !important; }
.btn-outline-blue { border: 2px solid #398ccb; color: #398ccb !important; }
.btn-outline-red:hover { background: #EB5B55; color: #ffffff !important; }
.btn-outline-blue:hover { background: #398ccb; color: #ffffff !important; }

/* --- En-tête : types d'événements + rubriques --- */
.two-columns.third-right.HeaderEvent {
    margin-bottom: 30px;
    align-items: flex-start;
}
.HeaderEvent .left-side { padding-right: 40px; }
.HeaderEvent .event-types {
    color: #28265a;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
}
.HeaderEvent .right-side { text-align: center; }
.HeaderEvent .instruction {
    color: #28265a;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 15px 0;
}

/* --- Sélecteur de rubriques — pastilles horizontales (style "Arte") ---
   Remplace l'ancien encart vertical (carte blanche + lignes) par une
   rangée de boutons arrondis côte à côte, sur le modèle des rubriques du
   site d'Arte : chaque rubrique est une pastille à fond blanchâtre, avec
   son carré "+" plein et son texte à la couleur de la rubrique. Le HTML
   est inchangé ; le titre "CHOISIR UNE RUBRIQUE" devient une ligne
   discrète au-dessus des pastilles (le supprimer du HTML est aussi une
   option, Arte n'en affiche pas). */
.rubrique-container {
    /* !important : comme pour .ButtonEvent/.HeaderEvent plus bas, la règle
       du thème ".editable > :not(table) { display:block; }" repasse ce
       conteneur (enfant direct de .editable) en block, ce qui empile les
       pastilles au lieu de les aligner. */
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.rubrique-title {
    flex: 1 1 100%;
    background: transparent;
    color: #28265a;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    text-align: center;
    padding: 0;
    margin: 0 0 4px 0;
}
/* Chaque pastille : fond blanchâtre commun, carré "+" et texte à la
   couleur de la rubrique (le fond coloré plein est abandonné). */
.rubrique-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px 9px 10px;
    background: #fbfaf7;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.15s, transform 0.15s;
}
.rubrique-item:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.rubrique-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}
.rubrique-item .box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 5px;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}
.rubrique-item a {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    white-space: nowrap;
}
/* Carré "+" plein à la couleur de la rubrique, texte assorti */
.rubrique-item .box.blue   { background: #2185D0; }
.rubrique-item a.text-blue   { color: #2185D0; }
.rubrique-item .box.yellow { background: #FBBD08; }
.rubrique-item a.text-yellow { color: #FBBD08; }
.rubrique-item .box.green  { background: #21BA45; }
.rubrique-item a.text-green  { color: #21BA45; }
.rubrique-item .box.purple { background: #A333C8; }
.rubrique-item a.text-purple { color: #A333C8; }
.rubrique-item .box.orange { background: #F2711C; }
.rubrique-item a.text-orange { color: #F2711C; }

/* --- Barre de recherche de la galerie --- */
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .list.header { margin-bottom: 20px; }
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .ui.left.icon.input {
    display: flex;
    align-items: center;
    background: #f4f4f2;
    border-radius: 30px;
    padding: 10px 20px;
    max-width: 340px;
}
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .ui.left.icon.input input {
    order: 2;
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 12px;
    text-transform: uppercase;
    color: #999999;
}
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .ui.left.icon.input i.search.icon {
    order: 1;
    color: #999999;
    margin-right: 10px;
}

/* --- Grille des tuiles événements ---
   Structure empilée (pas de superposition) : l'image reste entièrement
   visible en haut, puis un bandeau continu contenant le titre et la date
   (fond = couleur de la catégorie) juste en dessous. */
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .three-columns.grid {
    padding: 4%;
    background-color: #fff;
}
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .three-columns.grid > .item {
    margin-bottom: 30px;
}
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .content {
    display: flex;
    flex-direction: column;
    aspect-ratio: 4 / 4.3;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .image {
    flex: 0 0 55%;
    margin: 0;
    overflow: hidden;
}
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* La ".label" d'origine ne sert plus qu'à porter la classe de catégorie
   (ex: .ui.orange.label) : elle reste dans le DOM (masquée) pour que les
   sélecteurs :has() ci-dessous puissent détecter la couleur à appliquer
   au titre et à la date, qui eux restent visibles. */
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .label {
    display: none;
}
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .title {
    flex: 0 0 auto;
    margin: 0;
    padding: 14px 16px 4px 16px;
    text-align: center;
}
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .title h3 {
    margin: 0;
    font-size: 13px;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.3;
}
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .title a { color: inherit; text-decoration: none; }
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .date {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0 16px 16px 16px;
    color: #ffffff;
    text-align: center;
}
/* Couleur de fond du bandeau titre+date, selon la catégorie de l'événement */
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .content:has(.ui.orange.label) .title,
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .content:has(.ui.orange.label) .date { background-color: #F2711C; }
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .content:has(.ui.blue.label) .title,
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .content:has(.ui.blue.label) .date { background-color: #2185D0; }
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .content:has(.ui.yellow.label) .title,
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .content:has(.ui.yellow.label) .date { background-color: #FBBD08; }
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .content:has(.ui.green.label) .title,
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .content:has(.ui.green.label) .date { background-color: #21BA45; }
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .content:has(.ui.purple.label) .title,
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .content:has(.ui.purple.label) .date { background-color: #A333C8; }
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .content:has(.ui.grey.label) .title,
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .content:has(.ui.grey.label) .date { background-color: #767676; }
body:not(.item-4674094) item-gallery[view="1727"] .item .content:has(.ui.grey.label) .title,
body:not(.item-4674094) item-gallery[view="1727"] .item .content:has(.ui.grey.label) .date { background-color: #BE9C80; } /* marron Méditation */
body:not(.item-4674094) item-gallery[view="6604"] .item .content:has(.ui.grey.label) .title,
body:not(.item-4674094) item-gallery[view="6604"] .item .content:has(.ui.grey.label) .date { background-color: #D7C4B3; } /* beige Yoga */

/* La galerie des méditations (view="1727") n'a pas d'étiquette de rubrique
   colorée (.ui.X.label) : on lui donne une couleur par défaut plutôt que
   de laisser le bandeau titre+date sans fond. Les règles :has() ci-dessus
   restent prioritaires (plus spécifiques) si jamais une étiquette de
   rubrique est présente malgré tout. */
body:not(.item-4674094) item-gallery:is([view="1727"], [view="6604"]) .item .content .title,
body:not(.item-4674094) item-gallery:is([view="1727"], [view="6604"]) .item .content .date {
    background-color: #bd9c7e;
}

/* Mis en forme par le script events-date-format.js, qui remplace le texte
   brut de la date par deux <span> : .event-day et .event-time */
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .date .event-day {
    display: block;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    color: #282559;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .date .event-time {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #282559;
}
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .text,
body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .more {
    display: none;
}

/* --- Tuiles méditations (view 1727) : rendu maquette client ---
   1. La plage de dates (.event-day, ex "15/09 — 06/07") est masquée :
      seul l'horaire (.event-time) reste, en italique gras.
   2. Le jour ("LUNDI", "MARDI"...) passe sur sa propre ligne, encadré de
      tirets. Le jour étant du texte brut dans le <h3> (collé au titre par
      " - "), il doit être enveloppé dans un <span class="title-day"> par
      un petit script JS (à ajouter à events-date-format.js, fourni dans
      la conversation) : les règles .title-day ci-dessous n'ont d'effet
      qu'une fois ce span créé. Sans le script, l'affichage reste celui
      d'origine (titre sur une ligne) : pas de casse. */
body:not(.item-4674094) item-gallery[view="1727"] .item .date .event-day {
    display: none;
}
body:not(.item-4674094) item-gallery[view="1727"] .item .date .event-time {
    font-style: italic;
    font-weight: 700;
}
body:not(.item-4674094) item-gallery[view="1727"] .item .title h3 .title-day {
    display: block;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 2px;
}
/* Tirets séparateurs au-dessus et en dessous du jour, comme la maquette */
body:not(.item-4674094) item-gallery[view="1727"] .item .title h3 .title-day::before,
body:not(.item-4674094) item-gallery[view="1727"] .item .title h3 .title-day::after {
    content: "-";
    display: block;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
}

@media (max-width: 900px) {
    /* Cartouches d'événements : marge réduite sur le bloc date et jour
       de l'événement plus lisible. */
    body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .date {
        margin: 0 !important;
        padding: 0 10px 10px 10px;
    }
    body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .date .event-day {
        font-size: 18px;
    }

    /* La règle générale mobile (section 9) force "width:100% !important"
       sur tous les .two-columns>* dès 900px. On l'annule ici pour les
       boutons CALENDRIER / NOS INTERVENANTS, qui restent sur deux
       colonnes (voir aussi le breakpoint 600px ci-dessous). */
    .two-columns.ButtonEvent > .editable {
        width: calc((100% - var(--margin)) / 2) !important;
        margin-bottom: 0 !important;
    }

    /* En-tête : .left-side (types d'événements) passe en pleine largeur.
       Les deux colonnes se retrouveraient alors empilées à 100% chacune :
       dans ce cas, .right-side (sélecteur de rubriques) est masquée. */
    .two-columns.third-right.HeaderEvent > .editable.left-side {
        width: 100% !important;
        margin-bottom: 0 !important;
        padding-right: 0;
    }
    /* Sélecteur doublé par sécurité : la 2e colonne est masquée qu'elle
       porte elle-même la classe .right-side ou qu'elle la contienne. */
    .two-columns.third-right.HeaderEvent > .editable:not(.left-side),
    .HeaderEvent .right-side {
        display: none !important;
    }

    /* Taille de police fixe à 14px en responsive (validée à l'essai) :
       chaque ligne ("ATELIERS - CONFÉRENCES - TABLE RONDES -" est la plus
       longue) tient sur la largeur disponible. */
    .HeaderEvent .event-types {
        font-size: 14px;
        letter-spacing: 0;
    }
}

/* Même problème pour les tuiles elles-mêmes : la règle générale les passe
   en pleine largeur dès 900px. Avec leur aspect-ratio 4/3.8, une tuile
   pleine largeur sur un téléphone en paysage (844px) ferait ~800px de haut,
   soit le double de la hauteur d'écran disponible. On les garde donc sur
   deux colonnes entre 601 et 900px ; en dessous de 601px, l'écran est
   étroit et l'empilement sur une colonne redevient le bon choix. */
@media (min-width: 601px) and (max-width: 900px) {
    body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .three-columns.grid > .item {
        width: calc((100% - var(--margin)) / 2) !important;
    }
}

@media (max-width: 768px) {
    body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .content {
        aspect-ratio: 4 / 3.8;
    }
    body:not(.item-4674094) item-gallery:is([view="6706"], [view="1727"], [view="6604"], [view="1721"], [view="10673"], [view="10674"], [view="10676"], [view="10677"], [view="10678"]) .item .title h3 { font-size: 13px; }
}

/* En dessous de 600px, plus assez de place pour deux colonnes lisibles :
   les boutons et l'en-tête finissent par s'empiler, centrés. */
@media (max-width: 600px) {
    /* Boutons CALENDRIER / NOS INTERVENANTS : restent côte à côte, en deux
       colonnes égales séparées de 10px. Chaque bouton prend toute la
       largeur de sa colonne, en version compacte pour que "NOS
       INTERVENANTS" tienne même sur un écran de 320px (retour à la ligne
       autorisé en dernier recours plutôt qu'un débordement). */
    .two-columns.ButtonEvent {
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 10px;
    }
    .two-columns.ButtonEvent > .editable {
        width: calc((100% - 10px) / 2) !important;
        margin-bottom: 0 !important;
        text-align: center !important;
    }
    .two-columns.ButtonEvent .btn-outline-red,
    .two-columns.ButtonEvent .btn-outline-blue {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 9px 8px;
        font-size: 11px;
        letter-spacing: 0.2px;
        line-height: 1.2;
        text-align: center;
    }
}

/* ==========================================================================
   11bis. PAGE MÉDITATIONS (galerie view="1727") — bouton + espacements
   Bouton "TÉLÉCHARGER-LE" en pilule rouge pleine, et suppression du trou
   entre la phrase rouge et les tuiles de méditations.
   Scope : body.item-4674626 (classe de la page méditations,
   theme-354 layout-1583). Les :has() internes (sur .two-columns,
   .one-column) restent nécessaires pour repérer les bons blocs, qui n'ont
   pas de classe propre dans le HTML.
   ========================================================================== */

/* Bouton TÉLÉCHARGER-LE : pilule rouge pleine, texte blanc */
body.item-4674626 a.secondary.button {
    display: inline-block;
    padding: 12px 34px;
    background-color: #eb5b55;
    border: none;
    border-radius: 30px;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s;
}
body.item-4674626 a.secondary.button:hover {
    background-color: #e68b8c;   /* même logique d'éclaircissement que les boutons du header */
}

/* --- Suppression du trou entre la phrase rouge et les tuiles ---
   Trois espaces s'additionnaient :
   1. la marge basse (2%) du .two-columns phrase rouge / bouton ;
   2. la marge haute (2%) du .one-column qui contient la galerie ;
   3. surtout le padding haut (4%) de la grille blanche des tuiles. */
body.item-4674626 .two-columns:has(a.secondary.button) {
    margin-bottom: 0;
    /* Les deux colonnes font la même hauteur (stretch), et la colonne de la
       phrase rouge aligne son texte EN BAS, au niveau du bouton (comme sur
       la maquette), plutôt qu'au centre : le centrage la laissait
       visuellement trop haute par rapport au bouton. */
    align-items: stretch;
}
body.item-4674626 .two-columns:has(a.secondary.button) > .editable:first-child {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 10px;   /* cale la phrase sur la ligne du bouton */
}
body.item-4674626 .two-columns:has(a.secondary.button) > .editable:first-child p {
    margin: 0;
}

/* --- Flèche rouge "à main levée" pointant vers le bouton (maquette) ---
   Dessinée en SVG embarqué (data URI) : aucun fichier à héberger. Posée
   en ::before absolu du bouton, en dehors du flux (pointer-events none :
   elle ne gêne pas le clic). Le trait courbe part du haut-gauche et la
   pointe vise le bord gauche du bouton. */
body.item-4674626 a.secondary.button {
    position: relative;
}
body.item-4674626 a.secondary.button::before {
    content: "";
    position: absolute;
    left: -74px;
    top: -20px;
    width: 66px;
    height: 36px;
    /* La flèche est l'image EXACTE de la maquette : extraite de celle-ci
       (fond supprimé, bords adoucis, recompressée en PNG 140px) puis
       embarquée en base64 — aucun fichier à héberger, fidélité garantie.
       Toutes les tentatives de redessin en SVG (triangle plein, pointe en
       V, filtres de tremblé) ont été abandonnées : le rendu des filtres
       varie selon les navigateurs et le trait "feutre" de la maquette
       n'est pas reproductible en géométrie simple.
       Réglages : left/top = position, width/height = taille (ratio
       d'origine ≈ 1.82:1 à conserver pour ne pas déformer le trait). */
    background: url("data:image/png;base64,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") no-repeat center / contain;
    pointer-events: none;
}
body.item-4674626 .one-column:has(item-gallery) {
    margin-top: 0;
}
body:not(.item-4674094) item-gallery[view="1727"] .three-columns.grid {
    padding-top: 0;
}

/* ==========================================================================
   11ter. PAGE ÉCHOS & PARTAGES (item-gallery view="2865") — LISTE
   Affichage en liste verticale d'entrées horizontales (maquette client) :
   image à gauche (~40%), contenu à droite (titre bleu marine, date en
   rouge, texte descriptif, bouton "+ d'infos" en pilule contournée).
   IMPORTANT : ne PAS ajouter la view 2865 à la liste EVENT_GRID_VIEWS de
   la section 11 (tuiles carrées colorées) — cette page a volontairement
   un rendu liste très différent, défini ici.
   Le conteneur garde ses classes .three-columns.grid posées par le
   composant : on neutralise la grille pour empiler les entrées.
   ========================================================================== */
item-gallery[view="2865"] .three-columns.grid {
    display: block !important;
    padding: 0;
}
item-gallery[view="2865"] .three-columns.grid > .item {
    width: 100% !important;
    margin: 0 0 26px 0;
}

/* Chaque entrée : grille 2 colonnes, l'image occupe toute la hauteur à
   gauche, les blocs de contenu s'empilent à droite dans l'ordre de leurs
   attributs "order" inline (title, label, date, text, more). */
item-gallery[view="2865"] .item .content {
    display: grid !important;
    /* 40/60 et non 50/50 : à 50% de large, les vignettes fournies par le
       CMS étaient étirées au-delà de leur résolution et devenaient floues. */
    grid-template-columns: 40% 1fr;
    grid-auto-rows: min-content;
    column-gap: 24px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
item-gallery[view="2865"] .item .image {
    grid-column: 1;
    grid-row: 1 / span 6;
    margin: 0;
    overflow: hidden;
}
item-gallery[view="2865"] .item .image a { display: block; height: 100%; }
item-gallery[view="2865"] .item .image img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    display: block;
}
item-gallery[view="2865"] .item .title,
item-gallery[view="2865"] .item .label,
item-gallery[view="2865"] .item .date,
item-gallery[view="2865"] .item .text,
item-gallery[view="2865"] .item .more {
    grid-column: 2;
    margin: 0;
    padding-right: 20px;
}

/* Titre : à la couleur du thème de la page (var(--theme-accent), section 6),
   comme les h3 génériques et le bandeau de la carte de contenu */
item-gallery[view="2865"] .item .title {
    padding-top: 16px;
}
item-gallery[view="2865"] .item .title h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--theme-accent);
}
item-gallery[view="2865"] .item .title a { color: inherit; text-decoration: none; }
item-gallery[view="2865"] .item .title a:hover { text-decoration: underline; }

/* Étiquette de rubrique : absente de la maquette */
item-gallery[view="2865"] .item .label {
    display: none;
}

/* Ligne de date : rouge, en gras */
item-gallery[view="2865"] .item .date {
    padding-top: 8px;
    color: #eb5b55;
    font-weight: 700;
    font-size: 14px;
}

/* Texte descriptif : visible (contrairement aux grilles de la section 11) */
item-gallery[view="2865"] .item .text {
    display: block;
    padding-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: #2d2d38;
}

/* Bouton "+ d'infos" : pilule contournée beige, remplie au survol */
item-gallery[view="2865"] .item .more {
    display: block;
    padding-top: 12px;
    padding-bottom: 16px;
    text-align: right;
}
item-gallery[view="2865"] .item .more a {
    display: inline-block;
    padding: 7px 22px;
    border: 1px solid #bd9c7e;
    border-radius: 20px;
    background: #ffffff;
    color: #a94442;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
item-gallery[view="2865"] .item .more a:hover {
    background: #6d3b2d;
    border-color: #6d3b2d;
    color: #ffffff;
}

/* Mobile : l'entrée s'empile (image au-dessus, contenu dessous) */
@media (max-width: 700px) {
    item-gallery[view="2865"] .item .content {
        grid-template-columns: 1fr;
    }
    item-gallery[view="2865"] .item .image {
        grid-column: 1;
        grid-row: auto;
    }
    item-gallery[view="2865"] .item .image img {
        min-height: 0;
        height: 180px;
    }
    item-gallery[view="2865"] .item .title,
    item-gallery[view="2865"] .item .date,
    item-gallery[view="2865"] .item .text,
    item-gallery[view="2865"] .item .more {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ==========================================================================
   12. PAGE DÉTAIL D'UN ÉVÉNEMENT (.Titre_event)
   Tout est scoppé via body:has(.Titre_event), une classe propre à ce type
   de page, pour ne jamais toucher les autres pages qui utilisent aussi
   ".main", ".two-columns.third-right", etc.
   Les ID numériques (block-8709, block-48730, ...) changent à chaque
   événement : on cible donc toujours les classes stables ".type-date",
   ".type-label", ".type-html", ".type-file", ".type-group", jamais les ID.
   ========================================================================== */

/* --- Couleur de catégorie disponible partout sur la page via --cat-color,
   détectée une seule fois grâce à l'étiquette (.item-data.type-label). --- */
body:has(.Titre_event):has(.ui.blue.label)   { --cat-color: #2185D0; }
body:has(.Titre_event):has(.ui.yellow.label) { --cat-color: #FBBD08; }
body:has(.Titre_event):has(.ui.green.label)  { --cat-color: #21BA45; }
body:has(.Titre_event):has(.ui.purple.label) { --cat-color: #A333C8; }
body:has(.Titre_event):has(.ui.orange.label) { --cat-color: #F2711C; }

/* --- .main redevient le VRAI titre de l'événement (plus un ruban) --- */
body:has(.Titre_event) h1.main {
    position: static;
    display: block;
    background: none;
    margin: 20px 0 25px 0 !important;
    padding: 0;
    color: #28265a;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
    text-transform: none;
    text-align: left;
    border-radius: 0;
}
body:has(.Titre_event) h1.main::after {
    content: none;
}

/* --- Ruban .Titre_event décalé vers la droite de 80px (au lieu du
   centrage utilisé ailleurs par .main sur les autres pages).
   Sélecteur "body.theme-327 .Titre_event" repris à l'identique (même
   spécificité que la règle partagée de la section X) pour être sûr de
   la battre : elle vient après dans le fichier, donc elle l'emporte. --- */
body.theme-327 .Titre_event,
body.theme-367 .Titre_event,
body.theme-368 .Titre_event,
body.theme-369 .Titre_event,
body.theme-370 .Titre_event {
    margin-left: 80px !important;
    margin-right: auto !important;
}
/* Responsive : le décalage de 80px n'a plus de sens sur petit écran,
   on recentre le ruban. */
@media (max-width: 900px) {
    body.theme-327 .Titre_event,
    body.theme-367 .Titre_event,
    body.theme-368 .Titre_event,
    body.theme-369 .Titre_event,
    body.theme-370 .Titre_event {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* --- Marges gauche/droite sur <main>, pour ce thème (événement) --- */
body.theme-327 main,
body.theme-367 main,
body.theme-368 main,
body.theme-369 main,
body.theme-370 main {
    margin-left: 40px !important;
    margin-right: 40px !important;
}
/* Responsive : on réduit puis supprime ces marges pour ne pas perdre de
   largeur utile sur tablette / mobile. */
@media (max-width: 900px) {
    body.theme-327 main,
    body.theme-367 main,
    body.theme-368 main,
    body.theme-369 main,
    body.theme-370 main {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
}
@media (max-width: 600px) {
    body.theme-327 main,
    body.theme-367 main,
    body.theme-368 main,
    body.theme-369 main,
    body.theme-370 main {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* --- 1er bloc 2/3 - 1/3 : photo (gauche) / date + prochaines dates (droite) --- */
body:has(.Titre_event) .two-columns.third-right:not(.texte) {
    display: flex !important;
    margin: 10px 0 30px 0;
}

/* Colonne gauche : photo pleine hauteur */
body:has(.Titre_event) .two-columns.third-right:not(.texte) > .editable:first-child {
    display: flex;
    height: 100%;
}
/* .item-data (block-XXXX type-file) et son div interne ne faisaient pas
   100% de large par défaut (juste la taille intrinsèque de l'image),
   d'où l'image qui ne prenait pas toute la place. */
body:has(.Titre_event) .two-columns.third-right:not(.texte) > .editable:first-child .item-data,
body:has(.Titre_event) .two-columns.third-right:not(.texte) > .editable:first-child .item-data > div {
    display: flex;
    width: 100%;
    height: 100%;
}
body:has(.Titre_event) .two-columns.third-right:not(.texte) > .editable:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Largeurs 2/3 - 1/3 sans marge réservée entre les colonnes (contrairement
   à .two-columns.third-right classique) : la maquette veut l'image et la
   colonne de droite collées, sans espace entre elles. */
body:has(.Titre_event) .two-columns.third-right:not(.texte) > .editable:first-child {
    width: 66.6667%;
}
body:has(.Titre_event) .two-columns.third-right:not(.texte) > .editable:last-child {
    width: 33.3333%;
}

/* Colonne droite : empile date puis "prochaines dates" sans espace entre les deux */
body:has(.Titre_event) .two-columns.third-right:not(.texte) > .editable:last-child {
    display: flex;
    flex-direction: column;
}
/* .item-data a par défaut un margin-bottom (thème) qui créait un écart
   vertical entre le bloc date et le bloc "prochaines dates" : on l'annule. */
body:has(.Titre_event) .two-columns.third-right:not(.texte) .item-data {
    margin: 0;
}

/* Bloc date (fond bleu marine) — les 2 lignes .event-day / .event-time sont
   prévues pour un futur script de formatage (comme sur la page Événements) ;
   en attendant, le texte brut de la date s'affiche tel quel. */
body:has(.Titre_event) .item-data.type-date {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #28265a;
    color: #ffffff;
    padding: 22px 20px;
    text-align: center;
}
body:has(.Titre_event) .item-data.type-date p {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
body:has(.Titre_event) .item-data.type-date .event-day {
    display: block;
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
}
body:has(.Titre_event) .item-data.type-date .event-time {
    display: block;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    color: #f7a600;
    margin-top: 4px;
    text-transform: none;
}

/* L'étiquette de type/catégorie ne sert plus qu'à fournir --cat-color
   (voir tout en haut) : son texte d'origine reste masqué. */
body:has(.Titre_event) .item-data.type-label {
    display: none;
}

/* Bloc "prochaines dates" : couleur de catégorie, texte en blanc */
body:has(.Titre_event) .two-columns.third-right:not(.texte) .item-data.type-html {
    flex: 1;
    background-color: var(--cat-color, #F2711C);
    color: #ffffff;
    padding: 18px 20px;
}
body:has(.Titre_event) .two-columns.third-right:not(.texte) .item-data.type-html p,
body:has(.Titre_event) .two-columns.third-right:not(.texte) .item-data.type-html h4,
body:has(.Titre_event) .two-columns.third-right:not(.texte) .item-data.type-html li,
body:has(.Titre_event) .two-columns.third-right:not(.texte) .item-data.type-html a {
    color: #ffffff;
    margin: 0 0 6px 0;
}

/* --- 2e bloc 2/3 - 1/3 : contenu + informations pratiques / intervenants --- */
body:has(.Titre_event) .two-columns.third-right.texte {
    display: flex !important;
}

/* Colonne "Intervenant(s)" en blanc, pour contraster avec le fond beige
   de la page (voir juste en dessous) */
body:has(.Titre_event) .two-columns.third-right.texte > .editable:last-child {
    background-color: #ffffff;
    padding: 20px;
}

/* Fond beige de la carte .content .wrapper, uniquement sur cette page */
body:has(.Titre_event) .content .wrapper {
    background-color: #efece7;
}
/* Thème 370 : fond blanc au lieu du beige */
body.theme-370:has(.Titre_event) .content .wrapper {
    background-color: #fff;
}

/* --- Thème 370 (Echos) : mise en page "article" (maquette) ---
   Titre marron + filet marron, texte gris, chapeau en gras marron,
   image flottante à gauche, citation en vert, encart gris. --- */
body.theme-370:has(.Titre_event) h1.main {
    color: #6d3b2d;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.3;
    margin: 20px 0 0 0 !important;
    padding: 0 0 14px 0;
    border-bottom: 1px solid #6d3b2d;
}
body.theme-370:has(.Titre_event) h1.main + .item-data {
    margin-top: 22px;
}
body.theme-370:has(.Titre_event) .item-data.type-html p {
    color: #5a5a5a;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 14px 0;
}
/* Chapeau : 1er paragraphe en gras marron */
body.theme-370:has(.Titre_event) .item-data.type-html p:first-of-type,
body.theme-370:has(.Titre_event) .item-data.type-html p:first-of-type b {
    color: #6d3b2d;
    font-weight: 700;
}
/* Image dans le texte : flottante à gauche, le texte s'enroule autour */
body.theme-370:has(.Titre_event) .item-data.type-html img {
    float: left;
    max-width: 50%;
    height: auto;
    margin: 0 24px 14px 0;
}
/* Citation : vert, sans guillemets ajoutés */
body.theme-370:has(.Titre_event) .item-data.type-html blockquote {
    clear: both;
    margin: 20px 0;
    padding: 0;
    border: 0;
    color: #4cae5c;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}
/* Encart pratique (horaires, tarif, réservation) : fond gris, texte marron */
body.theme-370:has(.Titre_event) .item-data.type-html .encart {
    clear: both;
    background-color: #f2f2f2;
    padding: 18px 22px;
    margin: 20px 0 0 0;
}
body.theme-370:has(.Titre_event) .item-data.type-html .encart p {
    color: #6d3b2d;
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 6px 0;
}
body.theme-370:has(.Titre_event) .item-data.type-html .encart a {
    color: #6d3b2d;
    text-decoration: underline;
}
/* Évite qu'une image flottante déborde du bloc */
body.theme-370:has(.Titre_event) .item-data.type-html > div::after {
    content: "";
    display: block;
    clear: both;
}

body:has(.Titre_event) .two-columns.third-right.texte h3 {
    color: #28265a;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 15px 0;
}

/* Texte de description (1er bloc .type-html de la colonne gauche) :
   marge intérieure de 20px de chaque côté pour que le texte ne soit pas
   collé aux bords ; les <p> perdent leur padding latéral (thème) pour
   s'aligner avec les titres et les listes. */
body:has(.Titre_event) .two-columns.third-right.texte .item-data.type-html:first-of-type {
    padding: 0 20px;
}
body:has(.Titre_event) .two-columns.third-right.texte .item-data.type-html:first-of-type p {
    color: #2d2d38;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 14px 0;
    padding-left: 0;
    padding-right: 0;
}
body:has(.Titre_event) .two-columns.third-right.texte .item-data.type-html:first-of-type h4 {
    color: #EB5B55;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 10px 0;
}
/* h5 = chapeau : même couleur que le texte, plus grand, sans gras */
body:has(.Titre_event) .two-columns.third-right.texte .item-data.type-html:first-of-type h5 {
    color: #2d2d38;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.35;
    margin: 0 0 18px 0;
}
body:has(.Titre_event) .two-columns.third-right.texte .item-data.type-html:first-of-type h5 b,
body:has(.Titre_event) .two-columns.third-right.texte .item-data.type-html:first-of-type h5 strong {
    font-weight: inherit;
}
body:has(.Titre_event) .two-columns.third-right.texte .item-data.type-html:first-of-type ul {
    margin: 0 0 8px 0;
    padding-left: 20px;
}
body:has(.Titre_event) .two-columns.third-right.texte .item-data.type-html:first-of-type li {
    color: #2d2d38;
    font-size: 14px;
    line-height: 1.7;
}

/* Informations pratiques (bloc .block-48729, colonne gauche) :
   1ère ligne = bandeau plein de la couleur de catégorie, le reste = fond
   très clair de cette même couleur. Ciblé par sa classe de bloc (stable
   pour ce champ) et non par :last-of-type, qui pouvait viser le mauvais
   bloc selon l'ordre des champs. */
body:has(.Titre_event) .two-columns.third-right.texte .item-data.block-48729.type-html {
    margin-top: 20px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--cat-color, #28265a) 10%, white);
}
/* La .one-column interne a un margin-top (thème) qui décale le bandeau
   par rapport au cadre coloré : on l'annule. */
body:has(.Titre_event) .two-columns.third-right.texte .item-data.block-48729.type-html .one-column {
    margin-top: 0 !important;
}
body:has(.Titre_event) .two-columns.third-right.texte .item-data.block-48729.type-html p:first-child {
    background-color: var(--cat-color, #28265a);
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
    padding: 14px 20px;
}
body:has(.Titre_event) .two-columns.third-right.texte .item-data.block-48729.type-html p:not(:first-child) {
    margin: 0;
    padding: 6px 20px;
    font-size: 13px;
    line-height: 1.6;
    color: #2d2d38;
}
body:has(.Titre_event) .two-columns.third-right.texte .item-data.block-48729.type-html p:last-child {
    padding-bottom: 18px;
}
body:has(.Titre_event) .two-columns.third-right.texte .item-data.block-48729.type-html ul {
    margin: 0;
    padding: 6px 20px 18px 40px;
}
body:has(.Titre_event) .two-columns.third-right.texte .item-data.block-48729.type-html li {
    font-size: 13px;
    line-height: 1.6;
    color: #2d2d38;
}

/* Intervenant(s) : nom + photo sur la même ligne, bio en dessous.
   Les <label> sont des étiquettes internes de la CMS, jamais destinées à
   être affichées. */
body:has(.Titre_event) .item-data.type-group label {
    display: none;
}
body:has(.Titre_event) .item-data.type-group > div {
    display: grid;
    grid-template-columns: 1fr 70px;
    column-gap: 12px;
    align-items: center;
}
/* Par defaut, tout div = bio (pleine largeur). Les regles Nom et Photo
   ci-dessous surchargent ce defaut : ainsi un intervenant sans photo
   (nom + bio seulement) ou plusieurs intervenants s'affichent bien. */
body:has(.Titre_event) .item-data.type-group > div > div {
    grid-column: 1 / -1;
    margin-top: 10px;
}
body:has(.Titre_event) .item-data.type-group > div > div p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #2d2d38;
}
/* Photo : le div qui contient une image */
body:has(.Titre_event) .item-data.type-group > div > div:has(> img) {
    grid-column: 2;
    margin-top: 0;
}
body:has(.Titre_event) .item-data.type-group > div > div:has(> img) img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
/* Nom : premier div du bloc, ou premier div apres un <hr> (intervenant suivant) */
body:has(.Titre_event) .item-data.type-group > div > div:first-of-type,
body:has(.Titre_event) .item-data.type-group > div > hr + label + div,
body:has(.Titre_event) .item-data.type-group > div > hr + div {
    grid-column: 1;
    margin-top: 0;
}
body:has(.Titre_event) .item-data.type-group > div > div:first-of-type p,
body:has(.Titre_event) .item-data.type-group > div > hr + label + div p,
body:has(.Titre_event) .item-data.type-group > div > hr + div p {
    font-weight: 700;
    color: #28265a;
    font-size: 15px;
    line-height: 1.4;
}
/* Separateur entre deux intervenants */
body:has(.Titre_event) .item-data.type-group > div > hr {
    grid-column: 1 / -1;
    width: 100%;
    margin: 18px 0;
    border: 0;
    border-top: 1px solid #e5e2dc;
}

@media (max-width: 768px) {
    body:has(.Titre_event) .two-columns.third-right:not(.texte) > .editable:first-child {
        min-height: 220px;
    }
}

/* ==========================================================================
   13. DISPONIBILITÉ DES SALLES (x-47 #rooms)
   ========================================================================== */
x-47 #rooms {
  position: relative;
    -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  display: flex;
}
x-47 #rooms .year {
    font-weight: bold;
    padding: 0 10px 0 30px !important;
}
x-47 #rooms .month {
    text-align: center;
    font-size: 15px;
    margin-bottom: 16px !important;
}
x-47 #rooms .month a {
    padding: 5px !important;
    text-decoration: none !important;
    cursor: pointer;
}
x-47 #rooms .data {
}
x-47 #rooms .name {
    padding-top: 48px !important;
}
x-47 #rooms .name div {
    font-weight: bold;
    height: 35px;
    text-align: right;
    padding-right: 20px !important;
}
/* Liens des noms de salles (GLYCINES, NYMPHEAS, ...) en jaune */
x-47 #rooms .name a {
    color: #f7a600;
    text-decoration: none;
}
x-47 #rooms .name a:hover {
    text-decoration: underline;
}
x-47 #rooms .data {
    overflow-x: scroll;
}
x-47 #rooms .data th {
    height: 30px;
    min-width: 107px;
    text-align:center;
}
x-47 #rooms .data td {
    padding: 6px 22px !important;
    height: 24px;
    white-space: nowrap;
}
x-47 #rooms .data td div {
    width: 16px;
    height: 16px;
    margin-right: 3px !important;
    display: inline-block;
}
x-47 div.L {
    background: #1FABAF;
}
x-47 div.O {
    background: #E5524A;
}
x-47 div.OP {
    background: #E2E4DD;
}
x-47 div.F {
    background: #132454;
}
x-47 #rooms i {
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    cursor: pointer;
}
x-47 #rooms i.left {
  background: transparent url("http://v1.all-in-web.fr/offres/doc_inline_src/753/fleche_gauche_brown.png") repeat scroll 0% 0%;
top: 15px;
left: 150px;
  height: 25px;
  width: 25px;
  background-repeat: no-repeat;
}
x-47 #rooms i.right {
    background: url("http://v1.all-in-web.fr/offres/doc_inline_src/753/fleche_droite_brown.png");
  top: 15px;
    left: 980px;
    height: 25px;
    width: 25px;
    background-repeat: no-repeat;
}

/* ==========================================================================
   14. CALENDRIER DES ÉVÉNEMENTS (item-calendar, page Calendrier)
   Habillage du calendrier Semantic UI généré par <item-calendar> :
   en-têtes (mois + navigation + ligne des jours L/M/M/J/V/S/D) sur fond
   beige #dfcebf avec texte blanc, et améliorations d'ergonomie : carte
   arrondie ombrée, cases de jour plus grandes (cible tactile ≥ 40px),
   survol visible, jour courant mis en avant, jours hors mois estompés
   et non cliquables en apparence, zones de navigation élargies.
   Les !important répondent aux styles par défaut de Semantic UI
   (fond gris des th, bordures des cellules celled, couleurs de .link).
   ========================================================================== */

/* --- Carte englobante : pleine largeur de la zone de contenu --- */
item-calendar .ui.calendar {
    display: block;
    width: 100%;
    margin: 0 0 30px 0;
}

item-calendar .ui.calendar .calendar {
    outline: none;   /* le tabindex="0" pose sinon un halo au clic */
}

item-calendar .ui.calendar table.ui.table {
    border: none !important;
    border-radius: 0 !important;    /* angles droits, conformément à la maquette */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    background: #ffffff;
    margin: 0;
}

/* --- En-têtes : fond beige, texte blanc ---
   Concerne les DEUX lignes du thead : la barre du mois (avec les chevrons
   de navigation) et la ligne des initiales des jours. */
item-calendar .ui.calendar table.ui.table thead th {
    background: #dfcebf !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Barre du mois : plus haute, libellé bien lisible */
item-calendar .ui.calendar table.ui.table thead tr:first-child th {
    padding: 18px 16px;
    font-size: 19px;
    text-transform: capitalize;   /* "Août 2026" reste propre quel que soit le libellé */
}

item-calendar .ui.calendar table.ui.table thead th .link {
    color: #ffffff !important;
}

/* Chevrons précédent/suivant : vraie cible cliquable (36px), centrée
   verticalement, avec un retour visuel au survol */
item-calendar .ui.calendar table.ui.table thead th .prev.link,
item-calendar .ui.calendar table.ui.table thead th .next.link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s;
}
item-calendar .ui.calendar table.ui.table thead th .prev.link:hover,
item-calendar .ui.calendar table.ui.table thead th .next.link:hover {
    background-color: rgba(255, 255, 255, 0.25);
}
item-calendar .ui.calendar table.ui.table thead th i.chevron.icon {
    color: #ffffff !important;
    margin: 0;
    opacity: 1;
}

/* Ligne L M M J V S D : plus discrète que la barre du mois */
item-calendar .ui.calendar table.ui.table thead tr:last-child th {
    padding: 10px 0;
    font-size: 13px;
}

/* --- Cases des jours : grandes, cliquables, survol net --- */
item-calendar .ui.calendar table.ui.table tbody td {
    border: none !important;        /* supprime le quadrillage "celled" */
    padding: 0 !important;
    height: 58px;                   /* cases généreuses en pleine largeur */
    font-size: 15px;
    font-weight: 600;
    color: #28265a;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
}

item-calendar .ui.calendar table.ui.table tbody td:hover {
    background-color: #f3ebe2;      /* version très claire du beige des en-têtes */
    color: #28265a;
}

/* Jour courant / sélectionné (.focus) : pastille rouge de la charte.
   box-shadow "inset" : Semantic UI marque le focus par une ombre interne
   grise qu'on remplace. */
item-calendar .ui.calendar table.ui.table tbody td.focus {
    background-color: #eb5b55 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
item-calendar .ui.calendar table.ui.table tbody td.focus:hover {
    background-color: #d94f49 !important;
}

/* Jours des mois voisins : estompés, non interactifs en apparence */
item-calendar .ui.calendar table.ui.table tbody td.adjacent.disabled {
    color: #c9c2b8 !important;
    background: #faf8f5 !important;
    cursor: default;
    font-weight: 400;
}
item-calendar .ui.calendar table.ui.table tbody td.adjacent.disabled:hover {
    background: #faf8f5 !important;
    color: #c9c2b8 !important;
}

/* --- Modale du détail d'un jour --- */
item-calendar .ui.modal > .header {
    background: #28265a;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    border-radius: 0;
}
item-calendar .ui.modal > .header i.calendar.icon {
    color: #ffffff;
    margin-right: 8px;
}
item-calendar .ui.modal > .content {
    font-size: 14px;
    line-height: 1.6;
    color: #2d2d38;
}
item-calendar .ui.modal > .actions .ui.cancel.button {
    background: #ffffff;
    border: 2px solid #28265a;
    border-radius: 30px;
    color: #28265a;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 10px 26px;
    transition: background 0.2s, color 0.2s;
}
item-calendar .ui.modal > .actions .ui.cancel.button:hover {
    background: #28265a;
    color: #ffffff;
}

/* Sur petit écran, les cases pleine largeur redeviennent plus compactes
   pour que le mois entier reste visible sans défilement excessif */
@media (max-width: 600px) {
    item-calendar .ui.calendar table.ui.table thead tr:first-child th {
        padding: 12px 10px;
        font-size: 16px;
    }
    item-calendar .ui.calendar table.ui.table tbody td {
        height: 44px;
        font-size: 14px;
    }
}

/* ==========================================================================
   15. Nom des personnes de l'équipe au survol
   ========================================================================== */

/* Conteneur de l'image interactive */
.interactive-image-container {
  position: relative;
  width: 100%;
  display: inline-block;
}

.interactive-image-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* Zone invisible positionnée sur chaque personne */
.person-hotspot {
  position: absolute;
  cursor: pointer;
  /* Optionnel : décommentez la ligne ci-dessous pour visualiser vos zones pendant le réglage */
  /* background: rgba(255, 0, 0, 0.3); */
}

/* Texte de l'infobulle (Nom / Prénom) */
.person-hotspot::after {
  content: attr(data-name);
  position: absolute;
  bottom: 105%; /* S'affiche au-dessus de la zone */
  left: 50%;
  transform: translateX(-50%);
  background-color: #398bcb;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-family: sans-serif;
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

/* Affichage au survol */
.person-hotspot:hover::after {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   16. Changment du placeholder
   ========================================================================== */

/* 1. On cache le placeholder d'origine ("Recherche") */
main ui-search input::placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

/* 2. On injecte le nouveau texte via le parent .ui.input */
main ui-search .ui.input {
  position: relative;
}

main ui-search .ui.input::before {
    content: "Termes à rechercher";
    position: absolute;
    left: 46px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaaaaa; /* Gris plus clair et discret (au lieu de #888888) */
    font-size: 0.85em; /* Réduit la taille du texte (ou ex: 12px) */
    font-weight: 300; /* Écriture plus fine */
    letter-spacing: 0.5px; /* Améliore la lisibilité avec la petite taille */
    font-style: normal;
    pointer-events: none;
    z-index: 1;
    text-transform: uppercase;
}

/* 3. On masque le faux placeholder dès que l'utilisateur écrit ou clique dans le champ */
main ui-search .ui.input:has(input:focus)::before,
main ui-search .ui.input:has(input:not(:placeholder-shown))::before {
  display: none !important;
}

/* ==========================================================================
   17. Cartouche page calendrier
   ========================================================================== */

   body.item-4677935 .categories {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 1200px;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  }

  body.item-4677935 .category {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #d8dce2;
    border-radius: 10px;
    padding: 10px 18px 10px 10px;
    box-shadow: 0 2px 6px rgba(30, 40, 60, 0.15);
  }

  body.item-4677935 .category .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    background: var(--c);
  }

  body.item-4677935 .category .label {
    font-size: 0.656rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--c);
  }

  /* Couleurs par catégorie */
  body.item-4677935 .c-pratique-corporelle { --c: #00b5ad; }
  body.item-4677935 .c-pratiques-corp-art  { --c: #767676; }
  body.item-4677935 .c-interiorite         { --c: #2185d0; }
  body.item-4677935 .c-exposition          { --c: #b5cc18; }
  body.item-4677935 .c-conference          { --c: #db2828; }
  body.item-4677935 .c-spectacle           { --c: #f2711c; }
  body.item-4677935 .c-atelier             { --c: #fbbd08; }
  body.item-4677935 .c-groupe-parole       { --c: #21ba45; }
  body.item-4677935 .c-parcours            { --c: #e03997; }
  body.item-4677935 .c-ecologie            { --c: #21ba45; }
  body.item-4677935 .c-culture-arts        { --c: #fbbd08; }
  body.item-4677935 .c-spiritualite        { --c: #f2711c; }
  body.item-4677935 .c-croissance          { --c: #2185d0; }
  body.item-4677935 .c-societe             { --c: #a333c8; }
  body.item-4677935 .c-meditation          { --c: #767676; }
  body.item-4677935 .c-theatre             { --c: #e03997; }

  /* Responsive */
  @media (max-width: 600px) {
    body.item-4677935 .categories { gap: 12px; }
    body.item-4677935 .category .label { white-space: normal; }
  }

/* ==========================================================================
   18. FORMULAIRES — AFFICHAGE EN LIGNE (RESPONSIVE)
   Sous 900px (même seuil que la bascule mobile de la section 9) :
   - chaque colonne du formulaire (libellé / champ) passe en pleine
     largeur, alignée à gauche, pour que le libellé s'affiche au-dessus
     de son champ au lieu d'être compressé à côté ;
   - la bordure de la colonne libellé est supprimée ;
   - le fond de surbrillance de la ligne active / survolée est retiré.
   ========================================================================== */
@media (max-width: 900px) {
    node-form div.ui div.row div.column {
        width: 100% !important;
        text-align: left !important;
    }

    node-form div.ui div.row div.name {
        border: none !important;
    }

    main ui-form .ui.form.live > .row.active > .name.column,
    main ui-form .ui.form:not(.live):not(.flat) > .row:hover > .name.column,
    main ui-form .ui.form.live > .row.active > .data.column,
    main ui-form .ui.form:not(.live):not(.flat) > .row:hover > .data.column {
        background: none !important;
        border-radius: 0;   /* "none" n'est pas une valeur valide pour border-radius */
    }
}

/* ==========================================================================
   XX. MODALE "LIRE LA SUITE" (composant echo-modal)
   Fond #6d3b2d semi-transparent, contenu centré via position:fixed.
   ========================================================================== */
#echo-modal {
    position: fixed !important;
    inset: 0;
    background: rgba(109, 59, 45, .75);   /* #6d3b2d à 75 % */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;                        /* au-dessus du header (1000/2000/3000) */
}
#echo-modal[hidden] { display: none !important; }

#echo-modal .echo-modal-box {
    position: relative;
    background: #fff;
    width: 92%;
    max-width: 1000px;
    height: 85vh;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
}
#echo-modal-frame { width: 100%; height: 100%; border: 0; }

#echo-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    border: 0;
    background: #fff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 16px;
    line-height: 32px;
    text-align: center;
}