/* GANTRY5 DEVELOPMENT MODE ENABLED.
 *
 * WARNING: This file is automatically generated by Gantry5. Any modifications to this file will be lost!
 *
 * For more information on modifying CSS, please read:
 *
 * http://docs.gantry.org/gantry5/configure/styles
 * http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
 */

@charset "UTF-8";
/* ==========================================================================
   CHEF D'ORCHESTRE - CUSTOM SCSS (AVEC TYPOGRAPHIE SÉPARÉE)
   ========================================================================== */
/* 1. Chargement des configurations de base et variables */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.2rem;
}
h2, .cb-user-welcome span {
  font-size: 2rem;
}
h3 {
  font-size: 1.7rem;
}
h4 {
  font-size: 1.25rem;
}
h5 {
  font-size: 1.2rem;
}
h6 {
  font-size: 1rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* 1bis-fonts. Polices auto-hébergées (@font-face) - remplace l'@import
   Google Fonts qui vivait dans _variables.scss */
/* ==========================================================================
   POLICES AUTO-HÉBERGÉES
   --------------------------------------------------------------------------
   Remplace l'@import Google Fonts qui vivait en haut de _variables.scss.
   Fichiers .woff2 (charset latin uniquement) récupérés via gwfh.mranftl.com,
   déposés dans templates/jl_blank_ii_lite/custom/fonts/. Chemin en absolu
   depuis la racine du site (et non relatif au fichier SCSS) pour ne pas
   dépendre de l'endroit où atterrit le CSS une fois compilé.

   font-display: swap conservé volontairement : c'était déjà le comportement
   de l'ancien @import Google Fonts (&display=swap) - le texte s'affiche
   tout de suite avec la police de repli, puis bascule sur la police custom
   dès qu'elle est chargée, sans texte invisible en attendant.

   La Belle Aurore et Gloria Hallelujah n'existent qu'en Regular (400) chez
   Google Fonts - polices manuscrites/décoratives, pas de variante grasse
   dessinée par leur créateur. L'ancien @import demandait aussi le poids 700
   pour ces deux-là, mais Google ne peut pas fournir un fichier qui n'existe
   pas : ça n'a jamais correspondu à un vrai fichier chargé. Là où
   .citation-more (_typography.scss) force font-weight: 700 sur Gloria
   Hallelujah, le résultat est un gras "fabriqué" par le navigateur (aucun
   vrai fichier gras à charger) - pas cassé, juste une limite propre à la
   police, inchangée par ce passage en local.

   Pas d'@import "variables"/"commun" ici : ce fichier ne dépend d'aucune
   variable ni placeholder Sass, juste du CSS @font-face brut. */
@font-face {
  font-family: "Sniglet";
  src: url('../fonts/sniglet-v18-latin-regular.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sniglet";
  src: url('../fonts/sniglet-v18-latin-800.woff2') format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url('../fonts/nunito-v32-latin-regular.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url('../fonts/nunito-v32-latin-700.woff2') format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "La Belle Aurore";
  src: url('../fonts/la-belle-aurore-v23-latin-regular.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gloria Hallelujah";
  src: url('../fonts/gloria-hallelujah-v24-latin-regular.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.2rem;
}
h2, .cb-user-welcome span {
  font-size: 2rem;
}
h3 {
  font-size: 1.7rem;
}
h4 {
  font-size: 1.25rem;
}
h5 {
  font-size: 1.2rem;
}
h6 {
  font-size: 1rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* 1bis. Bases partagées (placeholders %card/%form réutilisés par plusieurs
   modules ci-dessous) - doit être chargé avant eux */
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* 1ter. Boutons CTA "pilule" (.olh-founder-ctas) - né avec la frise "Notre
   histoire" mais réutilisé ailleurs (mod_assoc_payment, articles divers),
   donc chargé tôt comme "commun" plutôt que niché dans histoire-timeline */
/* Import défensif : comme les autres composants custom (_smart-slider.scss,
   _steps.scss, _mod-assoc-payment.scss, _acymailing.scss...), au cas où ce
   bloc se recompilerait isolément en dehors de la chaîne normale du template. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.2rem;
}
h2, .cb-user-welcome span {
  font-size: 2rem;
}
h3 {
  font-size: 1.7rem;
}
h4 {
  font-size: 1.25rem;
}
h5 {
  font-size: 1.2rem;
}
h6 {
  font-size: 1rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   BOUTONS CTA "PILULE" (.olh-founder-ctas)

   Né avec la frise "Notre histoire" (d'où le nom), ce composant est
   maintenant réutilisé ailleurs sur le site - bouton "Nous soutenir" du
   module mod_assoc_payment (voir _mod-assoc-payment.scss), bouton
   "Découvrez notre histoire" de l'article "Qui sommes-nous ?", et
   potentiellement d'autres articles à l'avenir. Sorti de
   _histoire-timeline.scss pour cette raison : le laisser dans un fichier
   au nom "timeline" est trompeur une fois réutilisé ailleurs, et surtout
   risqué - si la frise "Notre histoire" est un jour retirée du site,
   quelqu'un pourrait raisonnablement supprimer _histoire-timeline.scss en
   pensant ne toucher que la frise, et casser au passage tous les autres
   boutons qui en dépendent silencieusement.

   NE PAS confondre avec le bouton CTA du slider Smart Slider : celui-là
   utilise sa propre classe .olh-slide-cta (_smart-slider.scss), délibérément
   différente d'.olh-founder-ctas malgré le même principe primary/secondary,
   pour éviter que deux composants différents se disputent le même nom (et,
   ici, avec un sens de "primary" inversé - doré côté slider, bordeaux ici).

   Deux façons d'utiliser .primary/.secondary, gérées par les deux blocs
   ci-dessous :
   1. .olh-founder-ctas sur un conteneur (p, div...) qui enveloppe plusieurs
      <a class="primary/secondary"> ou <button class="primary/secondary">
      - cas d'origine ("Faire un don"/"Devenir bénévole"/"Nous contacter").
   2. .olh-founder-ctas posée directement SUR le bouton lui-même, avec
      primary/secondary à côté sur ce même élément - pour un bouton isolé
      hors d'un conteneur dédié (ex. le bouton "Nous soutenir" d'un module
      de paiement tiers, où on ne maîtrise pas le HTML autour ; ou un bouton
      glissé à la main dans un article via l'éditeur JCE). */
.olh-founder-ctas a, .olh-founder-ctas button, .smart-slider-slide .olh-founder-ctas a, .smart-slider-slide .olh-founder-ctas button, .olh-founder-ctas.primary, .smart-slider-slide .olh-founder-ctas.primary, .olh-founder-ctas.secondary, .smart-slider-slide .olh-founder-ctas.secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: 0.3s ease;
  border: 1px solid #671d2f;
  background: none;
  cursor: pointer;
  /* Même correctif que .jl-button (_jcetemplates.scss) : un <button>
       hérite de white-space: nowrap posé par le thème JL, ce qui empêche
       un texte comme "Découvrez notre histoire" de se replier - vérifié en
       direct sur un bouton réel (computed white-space: nowrap, max-width:
       none), d'où le débordement en mode "Cas 2" (.olh-founder-ctas posée
       directement sur le bouton). max-width: 100% empêche aussi la boîte
       elle-même de dépasser son conteneur, quelle que soit la largeur du
       texte. */
  white-space: normal;
  max-width: 100%;
  text-align: center;
}
.olh-founder-ctas a.primary, .olh-founder-ctas button.primary, .smart-slider-slide .olh-founder-ctas a.primary, .smart-slider-slide .olh-founder-ctas button.primary, .olh-founder-ctas.primary, .smart-slider-slide .olh-founder-ctas.primary {
  background: #671d2f;
  color: #ffffff;
}
.olh-founder-ctas a.primary:hover, .olh-founder-ctas button.primary:hover, .smart-slider-slide .olh-founder-ctas a.primary:hover, .smart-slider-slide .olh-founder-ctas button.primary:hover, .olh-founder-ctas.primary:hover, .smart-slider-slide .olh-founder-ctas.primary:hover {
  background: #471420;
  transform: translateY(-2px);
}
.olh-founder-ctas a.secondary, .olh-founder-ctas button.secondary, .smart-slider-slide .olh-founder-ctas a.secondary, .smart-slider-slide .olh-founder-ctas button.secondary, .olh-founder-ctas.secondary, .smart-slider-slide .olh-founder-ctas.secondary {
  background: transparent;
  color: #671d2f;
}
.olh-founder-ctas a.secondary:hover, .olh-founder-ctas button.secondary:hover, .smart-slider-slide .olh-founder-ctas a.secondary:hover, .smart-slider-slide .olh-founder-ctas button.secondary:hover, .olh-founder-ctas.secondary:hover, .smart-slider-slide .olh-founder-ctas.secondary:hover {
  background: rgba(103, 29, 47, 0.08);
  transform: translateY(-2px);
}
.olh-founder-ctas, .smart-slider-slide .olh-founder-ctas {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}
/* 2. Chargement de la structure des textes */
/* ==========================================================================
   TYPOGRAPHIE GLOBALE DU SITE
   ========================================================================== */
h1, h2, .cb-user-welcome span, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: var(--font-title-weight);
  color: #1A2B42;
}
p, span, li, a {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
}
strong, b {
  font-weight: 700;
}
/* Style de base pour les citations en La Belle Aurore */
.citation {
  font-family: "La Belle Aurore", cursive;
  font-size: inherit;
  color: #A08244;
  line-height: inherit;
}
/* Style de base pour les citations en Gloria Hallelujah */
.citation-more {
  font-family: "Gloria Hallelujah", cursive;
  font-size: inherit;
  color: #A08244;
  line-height: inherit;
  font-weight: 700;
}
.citation-more-xl {
  font-family: "Gloria Hallelujah", cursive;
  font-size: 150%;
  color: #671d2f;
  line-height: inherit;
  font-weight: 700;
}
/* Affichage d'un tarif ("40 € / an") : volontairement DISTINCT de
   .citation-more-xl (réservée aux accroches en cursive) - ici police
   ronde/affirmée (Sniglet, même famille que les titres) en graisse forte,
   pour un rendu "chiffre qui compte" plutôt qu'une citation manuscrite. */
.olh-price-tag {
  font-family: "Sniglet", sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  color: #A08244;
  line-height: 1.1;
}
/* ==========================================================================
   TEXTE ENCADRÉ D'ÉTOILES (RESPONSIVE)
   ========================================================================== */
.starred-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4em;
  text-align: center;
}
.starred-text::before, .starred-text::after {
  content: "★";
  color: #C5AE91;
  font-size: 0.9em;
  line-height: 1;
  display: inline-block;
}
p.spaced {
  letter-spacing: 0.15rem;
}
/* --------------------------------------------------------------------------
   1. ÉCHELLE DE TAILLES (VARIABLES REM)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   2. CONFIGURATION DE BASE
   -------------------------------------------------------------------------- */
html {
  font-size: 1rem;
}
body {
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: #1A2B42;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* --------------------------------------------------------------------------
   3. TITRES (H1 à H6)
   -------------------------------------------------------------------------- */
h1, .h1, .jl-h1, h2, .cb-user-welcome span, .h2, .jl-h2, h3, .h3, .jl-h3, h4, .h4, .jl-h4, h5, .h5, .jl-h5, h6, .h6, .jl-h6 {
  font-family: "Sniglet", sans-serif;
  /*font-weight: bold;*/
  color: #C6A969;
  margin-top: 0;
  margin-bottom: 0.75em;
}
h1, .h1, .jl-h1, .p-h1 {
  font-size: 2.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
h2, .cb-user-welcome span, .h2, .jl-h2, .p-h2 {
  font-size: 1.75rem;
  line-height: 1.25;
}
h3, .h3, .jl-h3, .p-h3 {
  font-size: 1.35rem;
  line-height: 1.3;
}
h4, .h4, .jl-h4, .p-h4 {
  font-size: 1.125rem;
  line-height: 1.35;
}
h5, .h5, .jl-h5, .p-h5 {
  font-size: 1rem;
  line-height: 1.4;
}
h6, .h6, .jl-h6, .p-h6 {
  font-size: 0.875rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* 3. Chargement des modules spécifiques */
/* ==========================================================================
   GRILLE DE CARTES OLH - DOUBLE MODE (CERCLE OU FOND IMMERSIF)
   ========================================================================== */
.olh-grid-container {
  margin: 3rem auto !important;
  /* Force le centrage horizontal du bloc complet dans Gantry */
  width: 100%;
  max-width: 1200px;
  /* Largeur idéale cumulée pour 3 cartes alignées sans étirement massif */
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ==========================================================================
   MOTEUR DE GRILLES UNIVERSELLES ET CENTRÉES (TAILLES OPTIMISÉES)
   ========================================================================== */
  /* --------------------------------------------------------------------------
   CONFIGURATION 1 CARTES : ÉLÉGANTES ET PLUS LARGES (360px)
   -------------------------------------------------------------------------- */
  /* --------------------------------------------------------------------------
   CONFIGURATION 2 CARTES : ÉLÉGANTES ET PLUS LARGES (360px)
   -------------------------------------------------------------------------- */
  /* CORRECTIF : ce bloc ciblait par erreur .olh-grid-3cards (copier-coller),
   ce qui laissait .olh-grid-2cards sans aucune largeur de colonne définie
   (utilisable dans le champ "CSS Classes" d'une grille, mais sans effet).
   Le bloc .olh-grid-3cards correct existait déjà juste en dessous et gagnait
   de toute façon la cascade : ce correctif ne change donc rien à l'existant,
   il restaure simplement .olh-grid-2cards. */
  /* --------------------------------------------------------------------------
   CONFIGURATION 3 CARTES : ÉLÉGANTES ET PLUS LARGES (360px)
   -------------------------------------------------------------------------- */
  /* --------------------------------------------------------------------------
   CONFIGURATION 4 CARTES : RESTE CALIBRÉE À 300px POUR TOUT CASER
   -------------------------------------------------------------------------- */
  /* --------------------------------------------------------------------------
   CONFIGURATION "4 CARTES LARGES" : DÉDIÉE AUX CONTENEURS PLUS ÉTROITS
   (ex. accueil avec sidebar) - 2 COLONNES QUI SE PARTAGENT TOUTE LA LARGEUR
   DISPONIBLE, PLUTÔT QUE DES COLONNES DE LARGEUR FIXE CENTRÉES
   --------------------------------------------------------------------------
   Contexte : section "Nos principales actions" (accueil), dont le conteneur
   est plus étroit que la pleine largeur à cause d'une colonne latérale sur
   ce gabarit. .olh-grid-2cards (colonnes figées à 360px) laissait un grand
   vide de part et d'autre dans ce conteneur plus étroit ; .olh-grid-4cards
   (colonnes figées à 300px, ne passe en 4 colonnes qu'à partir de
   $breakpoint-large-desktop - jamais atteint ici à cause de la sidebar)
   donnait des cartes trop petites. Avec minmax(0, 1fr), les 2 colonnes se
   partagent toute la largeur réellement disponible, quel que soit le
   gabarit (avec ou sans sidebar) - la largeur maximale globale reste de
   toute façon plafonnée par .olh-grid-container (max-width: 1200px).
   Réservée à ce bloc précis pour l'instant (pas réutilisée ailleurs sur le
   site à ce jour) : à surveiller si vous l'appliquez un jour à un autre
   conteneur nettement plus large, où 2 colonnes en pleine largeur
   pourraient donner des cartes trop imposantes.
   -------------------------------------------------------------------------- */
  /* ==========================================
       STRUCTURE DE BASE DE LA CARTE
       ========================================== */
}
.olh-grid-container .olh-grid-1cards, .olh-grid-container .olh-grid-2cards, .olh-grid-container .olh-grid-3cards, .olh-grid-container .olh-grid-4cards, .olh-grid-container .olh-grid-4cards-wide {
  display: grid !important;
  gap: 1.5rem;
  align-items: stretch;
  justify-content: center !important;
  justify-items: center !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}
.olh-grid-container .olh-grid-1cards {
  /* Base Mobile : 1 colonne (prend maximum 360px de large) */
  grid-template-columns: repeat(1, minmax(0, 360px));
}
.olh-grid-container .olh-grid-2cards {
  /* Base Mobile : 1 colonne (prend maximum 360px de large) */
  grid-template-columns: repeat(1, minmax(0, 360px));
  /* Tablette (dès 768px) : 2 colonnes de 360px */
}
@media (min-width: 768px) {
  .olh-grid-container .olh-grid-2cards {
    grid-template-columns: repeat(2, minmax(0, 360px));
  }
}
.olh-grid-container .olh-grid-3cards {
  /* Base Mobile : 1 colonne (prend maximum 360px de large) */
  grid-template-columns: repeat(1, minmax(0, 360px));
  /* Tablette (dès 768px) : 2 colonnes de 360px */
  /* Ordinateur (dès 1200px) : 3 colonnes de 360px (Total ~1130px avec gaps, parfait pour du 1200px) */
}
@media (min-width: 768px) {
  .olh-grid-container .olh-grid-3cards {
    grid-template-columns: repeat(2, minmax(0, 360px));
  }
}
@media (min-width: 1200px) {
  .olh-grid-container .olh-grid-3cards {
    grid-template-columns: repeat(3, minmax(0, 360px));
  }
}
.olh-grid-container .olh-grid-4cards {
  /* Base Mobile */
  grid-template-columns: repeat(1, minmax(0, 300px));
  /* Tablette & Desktop standard */
  /* Grand Écran (dès 1400px) : 4 colonnes de 300px */
}
@media (min-width: 768px) {
  .olh-grid-container .olh-grid-4cards {
    grid-template-columns: repeat(2, minmax(0, 300px));
  }
}
@media (min-width: 1536px) {
  .olh-grid-container .olh-grid-4cards {
    grid-template-columns: repeat(4, minmax(0, 300px));
  }
}
.olh-grid-container .olh-grid-4cards-wide {
  /* Base Mobile : 1 colonne pleine largeur */
  grid-template-columns: minmax(0, 1fr);
  /* Tablette et plus (dès 768px) : 2 colonnes qui se partagent la largeur */
}
@media (min-width: 768px) {
  .olh-grid-container .olh-grid-4cards-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.olh-grid-container .olh-card-item {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Si .olh-card-item est posée sur un <a> plutôt qu'un <div> (carte
           cliquable, ex. les "3 parcours" de la page "Devenir adhérent") :
           annule le soulignement/couleur de lien par défaut du navigateur. */
  /* Effet au survol générique (Bordure bordeaux) */
  /* ==========================================
           OPTION A : STYLE INITIAL (IMAGE EN CERCLE EN HAUT)
           ========================================== */
  /* ==========================================
           OPTION C : BADGE ICÔNE EN CERCLE (SANS PHOTO)
           ------------------------------------------
           Même principe de badge que la particule Feature Box
           (_feature-box.scss - glyphe Font Awesome injecté en CSS pur via
           son code Unicode), mais pour du contenu de carte sans photo à
           afficher (ex. "Pourquoi adhérer"). Poser .olh-card-item.mode-icon
           + un des modificateurs .olh-icon-XXX ci-dessous (couleur + glyphe)
           directement en HTML dans un article, pas de particule Gantry ni
           de champ Image à remplir.

           <div class="olh-card-item mode-icon olh-icon-accompagne">
               <h3>Etre accompagné</h3>
               <div class="olh-card-content">
                   <div>Accéder aux actions et aux espaces proposés aux familles.</div>
               </div>
           </div>
           ========================================== */
  /* ==========================================
           OPTION D : INTRO -> FLÈCHE -> ACTION (SANS BADGE)
           ------------------------------------------
           Pas d'icône en haut de carte : une ligne d'intro (h3), une
           flèche centrée, puis une ligne d'action - pour un contenu du
           type "je suis X -> je devrais faire Y" (ex. les "3 parcours"
           de la page "Devenir adhérent"). Poser .olh-card-item.mode-arrow.

           <a class="olh-card-item mode-arrow" href="...">
               <h4>Je suis professionnel</h4>
               <p class="olh-card-arrow"><i class="fa fa-solid fa-arrow-down"></i></p>
               <div class="olh-card-content"><div><strong>Je rejoins le réseau en devenant membre</strong></div></div>
           </a>
           ========================================== */
  /* ==========================================
                       OPTION B : STYLE BANNIÈRE - IMAGE SÉCURISÉE & OVERLAY FIXE
                       ========================================== */
}
.olh-grid-container .olh-card-item h3 {
  font-family: "Sniglet", sans-serif;
  color: #1A2B42;
  font-size: 1.25rem;
  margin: 0 0 0.5rem 0;
}
.olh-grid-container .olh-card-item .olh-card-content {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
}
.olh-grid-container .olh-card-item[href] {
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
}
.olh-grid-container .olh-card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  border-color: #671d2f;
  border-width: 2px;
}
.olh-grid-container .olh-card-item.mode-cercle {
  align-items: center;
  padding: 1.5rem;
  background-color: #F7F4EB;
}
.olh-grid-container .olh-card-item.mode-cercle h3 {
  text-align: center;
  margin-top: 0.5rem;
}
.olh-grid-container .olh-card-item.mode-cercle .olh-card-image {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  /* Rond parfait */
  overflow: hidden;
  margin-bottom: 1rem;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.olh-grid-container .olh-card-item.mode-cercle .olh-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.olh-grid-container .olh-card-item.mode-cercle:hover {
  background-image: linear-gradient(to bottom right, #ffffff, #E0C69F);
}
.olh-grid-container .olh-card-item.mode-cercle:hover h3 {
  color: #A08244;
}
.olh-grid-container .olh-card-item.mode-icon {
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  background-color: #F7F4EB;
}
.olh-grid-container .olh-card-item.mode-icon h3 {
  text-align: center;
  margin-top: 0.5rem;
}
.olh-grid-container .olh-card-item.mode-icon::before {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.3rem;
  line-height: 1;
  color: #ffffff;
  border: 3px solid #ffffff;
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  margin: 0 auto 1rem;
  background: #A08244;
}
.olh-grid-container .olh-card-item.mode-icon:hover {
  background-image: linear-gradient(to bottom right, #ffffff, #E0C69F);
}
.olh-grid-container .olh-card-item.mode-icon:hover h3 {
  color: #A08244;
}
.olh-grid-container .olh-card-item.mode-arrow {
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  background-color: #F7F4EB;
  /* h3 par défaut dans les autres modes, mais h4 utilisée ici sur
               la page "Devenir adhérent" (titre de moindre poids que le
               <h2> de section juste au-dessus) : les deux sont couvertes */
}
.olh-grid-container .olh-card-item.mode-arrow h3, .olh-grid-container .olh-card-item.mode-arrow h4 {
  text-align: center;
  margin: 0;
}
.olh-grid-container .olh-card-item.mode-arrow .olh-card-arrow {
  margin: 0.5rem 0;
  color: #A08244;
  font-size: 1.1rem;
}
.olh-grid-container .olh-card-item.mode-arrow .olh-card-content {
  text-align: center;
}
.olh-grid-container .olh-card-item.mode-arrow:hover {
  background-image: linear-gradient(to bottom right, #ffffff, #E0C69F);
}
.olh-grid-container .olh-card-item.mode-arrow:hover h3, .olh-grid-container .olh-card-item.mode-arrow:hover h4 {
  color: #A08244;
}
.olh-grid-container .olh-card-item.mode-arrow:hover .olh-card-arrow {
  color: #671d2f;
}
.olh-grid-container .olh-card-item.mode-fond {
  min-height: 400px;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0;
  overflow: hidden;
  border: 1px solid #671d2f;
  z-index: 1;
  background: #1A2B42;
  /* Fond de sécurité en bleu encre pendant le chargement */
  /* ÉTAPE 1 : L'IMAGE EST COLLÉE DANS UN CONTENEUR DÉDIÉ POUR LE ZOOM HOVER */
  /* ÉTAPE 2 : L'OVERLAY SOMBRE TOUJOURS VISIBLE ET AU-DESSUS DE L'IMAGE */
  /* ÉTAPE 3 : LE CONTENEUR DE TEXTE EN PREMIER PLAN */
  /* --- COMPORTEMENT AU SURVOL (HOVER) SÉCURISÉ POUR TOUS LES FORMATS --- */
}
.olh-grid-container .olh-card-item.mode-fond::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  /* Récupère automatiquement l'image injectée dans le HTML */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  /* S'adapte parfaitement, que la photo soit carrée ou rectangle */
  z-index: 1;
  transition: transform 0.4s ease;
  /* Animation de zoom fluide */
}
.olh-grid-container .olh-card-item.mode-fond .olh-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(26, 43, 66, 0.1) 0%, rgba(26, 43, 66, 0.5) 40%, rgba(26, 43, 66, 0.88) 75%, rgba(26, 43, 66, 0.98) 100%);
  z-index: 2;
  /* Passe impérativement au-dessus de l'image (z-index 1) */
  transition: 0.3s ease;
  pointer-events: none;
  /* Évite de bloquer les clics */
}
.olh-grid-container .olh-card-item.mode-fond .olh-card-inner-content {
  position: relative;
  z-index: 3;
  /* Passe au-dessus de l'overlay (z-index 2) */
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  width: 100%;
}
.olh-grid-container .olh-card-item.mode-fond .olh-card-inner-content h3 {
  color: #ffffff !important;
  font-size: 1.3rem;
  margin: 0 0 0.5rem 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.olh-grid-container .olh-card-item.mode-fond .olh-card-inner-content .olh-card-content {
  color: #faf7f3;
  /* Votre Ivoire / Crème doux */
  font-weight: 400;
  font-size: 0.9rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.olh-grid-container .olh-card-item.mode-fond:hover {
  transform: translateY(-5px);
  border-color: #671d2f;
  border-width: 2px;
  /* C'est l'image en arrière-plan qui zoome proprement, sans toucher à l'overlay */
  /* L'overlay s'assombrit légèrement pour encore plus de contraste au survol */
}
.olh-grid-container .olh-card-item.mode-fond:hover::before {
  transform: scale(1.06);
}
.olh-grid-container .olh-card-item.mode-fond:hover .olh-card-overlay {
  background: linear-gradient(to bottom, rgba(26, 43, 66, 0.2) 0%, rgba(26, 43, 66, 0.6) 35%, rgba(26, 43, 66, 0.92) 70%, #1a2b42 100%);
}
/* ==========================================================================
   CARTE STANDALONE "HERO" - MODE FOND (SANS GRILLE / CONTAINER)
   --------------------------------------------------------------------------
   Dans votre fichier initial, .olh-card-item est imbriqué DANS
   .olh-grid-container : ses styles ne s'appliquent donc que si la carte est
   posée à l'intérieur de ce container. Ce bloc duplique le rendu visuel de
   .mode-fond, mais en dehors de toute imbrication, pour un usage isolé.

   -> Reprend EXACTEMENT la structure HTML de vos cartes mode-fond
      existantes (mêmes classes, même balise h5, même bouton jl-button).
      Il suffit d'ajouter la classe "olh-card-standalone" sur l'élément
      .olh-card-item.mode-fond et de NE PAS l'englober dans .olh-grid-container.

   Par défaut (sans image), la carte affiche un dégradé blanc -> doré
   (linear-gradient(to bottom right, $white, $primary-light), le même que
   sur .mode-cercle au survol). Dès que vous ajoutez un background-image en
   inline-style sur l'élément, il prend le dessus sur ce dégradé (le style
   inline gagne toujours face à une règle de classe).

   Exemple (repris de votre carte "Ressources pour les familles",
   juste avec la classe en plus et le float-right retiré du bouton) :

   <div class="olh-card-item mode-fond olh-card-standalone"
        style="background-image: url('/images/accueil/etoiles-inclusion.jpg');"
        data-aos="flip-up">
       <div class="olh-card-overlay">&nbsp;</div>
       <div class="olh-card-inner-content">
           <h5>LES ETOILES DE L'INCLUSION</h5>
           <div class="olh-card-content">
               <div>Mettre en lumière celles et ceux qui transforment
                  concrètement les pratiques et ouvrent la voie à une
                  société plus accessible.</div>
               <div class="jl-margin-top">
                   <a href="/index.php/nos-actions/etoiles-de-linclusion"
                      target="_self" class="jl-button jl-button-default"
                      title="Découvrir le projet">
                       Découvrir le projet&nbsp;<i class="fa fa-solid fa-arrow-right"></i>
                   </a>
               </div>
           </div>
       </div>
   </div>
   ========================================================================== */
.olh-card-item.mode-fond.olh-card-standalone {
  position: relative;
  width: 100%;
  max-width: 340px;
  min-height: 420px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0;
  overflow: hidden;
  border-radius: 28px;
  /* volontairement plus arrondi que $radius (18px), pour l'effet "hero" */
  border: 1px solid #671d2f;
  background-color: #671d2f;
  /* fond de sécurité pendant le chargement de l'image */
  background-image: linear-gradient(to bottom right, #ffffff, #E0C69F);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  /* dégradé affiché tant qu'aucune photo n'est injectée en inline-style
       (le style inline sur l'élément prend toujours le dessus) */
  box-shadow: 0 0 0 1px rgba(103, 29, 47, 0.15), 0 20px 60px -10px rgba(103, 29, 47, 0.45), 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: 0.3s ease;
  z-index: 1;
  /* ÉTAPE 1 : image collée dans un calque dédié pour le zoom au survol */
  /* ÉTAPE 2 : overlay dégradé toujours au-dessus de l'image,
       dans les tons blanc -> doré (au lieu du bleu encre de mode-fond).
       Contrairement à la version sombre (texte clair, donc photo brute
       tolérable en haut), ici le texte est foncé : il faut un voile
       suffisamment couvrant dès le haut du bloc de texte, sinon les motifs
       de la photo viennent se mélanger aux lettres et casser la lisibilité. */
  /* ÉTAPE 3 : contenu texte + CTA au premier plan */
  /* --- Comportement au survol, identique à mode-fond --- */
}
.olh-card-item.mode-fond.olh-card-standalone::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  /* récupère l'image posée en inline-style sur l'élément */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 1;
  transition: transform 0.4s ease;
}
.olh-card-item.mode-fond.olh-card-standalone .olh-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.65) 25%, rgba(224, 198, 159, 0.9) 55%, rgba(224, 198, 159, 0.98) 100%);
  z-index: 2;
  pointer-events: none;
  transition: 0.3s ease;
}
.olh-card-item.mode-fond.olh-card-standalone .olh-card-inner-content {
  position: relative;
  z-index: 3;
  padding: 2.5rem 1.75rem 2rem 1.75rem;
  width: 100%;
  text-align: center;
}
.olh-card-item.mode-fond.olh-card-standalone .olh-card-inner-content h5 {
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  color: #1A2B42;
  /* overlay clair -> texte foncé pour le contraste (au lieu de doré sur fond sombre) */
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 0 0 1rem 0;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.8);
  /* léger halo clair : sécurité de lisibilité si l'image reste visible en transparence */
}
.olh-card-item.mode-fond.olh-card-standalone .olh-card-inner-content .olh-card-content {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  font-size: 0.95rem;
  line-height: 1.6;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.7);
  /* Habillage du bouton existant en pilule,
               UNIQUEMENT dans le contexte de cette carte hero
               (le style de .jl-button-default ailleurs sur le site
               n'est pas touché). Bordeaux plutôt que doré : sur un
               overlay clair blanc/doré, un contour doré manquerait
               de contraste. Les !important servent à passer au-dessus
               des règles globales du bouton si besoin — à retirer si
               votre .jl-button-default n'en a pas déjà. */
}
.olh-card-item.mode-fond.olh-card-standalone .olh-card-inner-content .olh-card-content .jl-margin-top {
  margin-top: 1.5rem;
  text-align: center;
  /* neutralise le float-right utilisé dans vos cartes de grille */
}
.olh-card-item.mode-fond.olh-card-standalone .olh-card-inner-content .olh-card-content .jl-button.jl-button-default {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem !important;
  background: transparent !important;
  border: 1px solid #671d2f !important;
  border-radius: 999px !important;
  color: #671d2f !important;
  text-shadow: none;
  transition: 0.3s ease;
}
.olh-card-item.mode-fond.olh-card-standalone .olh-card-inner-content .olh-card-content .jl-button.jl-button-default:hover {
  background-color: rgba(103, 29, 47, 0.1) !important;
  border-color: #471420 !important;
  color: #471420 !important;
  transform: translateX(2px);
}
.olh-card-item.mode-fond.olh-card-standalone:hover {
  transform: translateY(-5px);
  border-color: #471420;
  box-shadow: 0 0 0 1px rgba(103, 29, 47, 0.25), 0 28px 70px -10px rgba(103, 29, 47, 0.55), 0 10px 28px rgba(0, 0, 0, 0.3);
}
.olh-card-item.mode-fond.olh-card-standalone:hover::before {
  transform: scale(1.06);
}
.olh-card-item.mode-fond.olh-card-standalone:hover .olh-card-overlay {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.75) 25%, rgba(224, 198, 159, 0.95) 55%, #e0c69f 100%);
}
/* ==========================================================================
   CARTE STANDALONE - MODE CERCLE (SANS GRILLE / CONTAINER)
   --------------------------------------------------------------------------
   Reprend EXACTEMENT les règles de .olh-card-item.mode-cercle de votre
   fichier initial (fond $bg-soft, image ronde, h3 centré, contenu en texte
   à gauche, survol dégradé blanc -> doré) mais en dehors de toute
   imbrication dans .olh-grid-container, pour un usage isolé.

   -> Même structure HTML que votre carte "Dignité" existante : il suffit
      d'ajouter la classe "olh-card-standalone" sur l'élément
      .olh-card-item.mode-cercle et de NE PAS l'englober dans
      .olh-grid-container.

   <div class="olh-card-item mode-cercle olh-card-standalone" data-aos="flip-left">
       <div class="olh-card-image"><img src="/images/accueil/Test-001.png" alt="DIGNITÉ" loading="lazy"></div>
       <h3>DIGNITÉ</h3>
       <div class="olh-card-content">
           <div>Chaque personne mérite d'être considérée, entendue et respectée dans sa singularité.</div>
       </div>
   </div>
   ========================================================================== */
.olh-card-item.mode-cercle.olh-card-standalone {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  overflow: hidden;
  /* Effet au survol, identique à mode-cercle */
}
.olh-card-item.mode-cercle.olh-card-standalone h3 {
  font-family: "Sniglet", sans-serif;
  color: #1A2B42;
  font-size: 1.25rem;
  margin: 0 0 0.5rem 0;
  text-align: center;
  margin-top: 0.5rem;
}
.olh-card-item.mode-cercle.olh-card-standalone .olh-card-content {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
}
.olh-card-item.mode-cercle.olh-card-standalone .olh-card-image {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1rem;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.olh-card-item.mode-cercle.olh-card-standalone .olh-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.olh-card-item.mode-cercle.olh-card-standalone:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  border-color: #671d2f;
  border-width: 2px;
  background-image: linear-gradient(to bottom right, #ffffff, #E0C69F);
}
.olh-card-item.mode-cercle.olh-card-standalone:hover h3 {
  color: #A08244;
}
/* ==========================================================================
   MODIFICATEURS D'ICÔNE POUR .olh-card-item.mode-icon (page "Devenir adhérent",
   section "Pourquoi adhérer") - même principe que les modificateurs
   .olh-icon-XXX de _feature-box.scss (glyphe Font Awesome 6 + couleur de
   fond), mais ciblant directement .mode-icon::before puisqu'il n'y a pas de
   particule Gantry/.el-title ici, juste du HTML posé dans un article.
   Libre d'en ajouter d'autres sur ce modèle pour d'autres pages. */
.olh-card-item.mode-icon.olh-icon-accompagne::before {
  content: "";
  background: #671d2f;
}
.olh-card-item.mode-icon.olh-icon-voix::before {
  content: "";
  background: #A08244;
}
.olh-card-item.mode-icon.olh-icon-echange::before {
  content: "";
  background: #671d2f;
}
.olh-card-item.mode-icon.olh-icon-info::before {
  content: "";
  background: #A08244;
}
/* Même principe, pour la section "Ce que votre adhésion rend possible"
   (page "Devenir adhérent", point 5) */
.olh-card-item.mode-icon.olh-icon-ressources::before {
  content: "";
  background: #671d2f;
}
.olh-card-item.mode-icon.olh-icon-rencontres::before {
  content: "";
  background: #A08244;
}
.olh-card-item.mode-icon.olh-icon-actions::before {
  content: "";
  background: #671d2f;
}
.olh-card-item.mode-icon.olh-icon-grandir::before {
  content: "";
  background: #A08244;
}
/* Même principe, pour la page "Accompagnement des familles" (10 articles,
   2026-09-16) - modificateurs dédiés à cette page plutôt que réutilisation
   des icônes ci-dessus, pour ne pas coupler leur sens à une autre page. */
.olh-card-item.mode-icon.olh-icon-ecoute::before {
  content: "";
  background: #671d2f;
}
.olh-card-item.mode-icon.olh-icon-demarches::before {
  content: "";
  background: #A08244;
}
.olh-card-item.mode-icon.olh-icon-scolarite::before {
  content: "";
  background: #671d2f;
}
.olh-card-item.mode-icon.olh-icon-orientation::before {
  content: "";
  background: #A08244;
}
.olh-card-item.mode-icon.olh-icon-public::before {
  content: "";
  background: #671d2f;
}
/* ==========================================================================
   "PLUSIEURS FAÇONS DE NOUS REJOINDRE" - page "Devenir adhérent", point 7
   --------------------------------------------------------------------------
   Bloc identique sur les 3 pages (Devenir bénévole / adhérent / membre),
   posé dans .olh-grid-container.olh-grid-3cards (grille pure, aucune photo
   requise - déjà existante plus haut dans ce fichier). Seule différence
   d'une page à l'autre : la classe .olh-choice-current se déplace sur la
   colonne qui correspond à la page en cours (les 2 autres restent des liens
   <a> actifs vers les pages sœurs) - "vous êtes ici" plutôt que de répéter
   un lien vers la page déjà affichée.

   <div class="olh-grid-container">
     <div class="olh-grid-3cards">
       <div class="olh-choice-item olh-choice-current">
         <p>Je suis une famille ou un proche</p>
         <p class="olh-choice-arrow"><i class="fa fa-solid fa-arrow-right"></i></p>
         <p><strong>Je deviens adhérent</strong></p>
       </div>
       <a class="olh-choice-item" href="/index.php/devenir-membre">
         <p>Je suis professionnel</p>
         <p class="olh-choice-arrow"><i class="fa fa-solid fa-arrow-right"></i></p>
         <p><strong>Je rejoins le réseau en devenant membre</strong></p>
       </a>
       <a class="olh-choice-item" href="/index.php/devenir-benevole">
         <p>Je souhaite donner de mon temps</p>
         <p class="olh-choice-arrow"><i class="fa fa-solid fa-arrow-right"></i></p>
         <p><strong>Je deviens bénévole</strong></p>
       </a>
     </div>
   </div>
   ========================================================================== */
.olh-choice-item {
  display: block;
  text-align: center;
  padding: 1.5rem;
  text-decoration: none !important;
  color: #1A2B42;
}
.olh-choice-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  border-color: #671d2f;
}
.olh-choice-item .olh-choice-arrow {
  color: #C6A969;
  margin: 0.5rem 0;
}
/* Colonne "vous êtes ici" : pas de survol (ce n'est pas un lien), fond et
   bordure distincts pour la repérer immédiatement parmi les 3 colonnes. */
.olh-choice-current {
  cursor: default;
  background-color: #F7F4EB;
  border-color: #C6A969;
  border-width: 2px;
}
.olh-choice-current:hover {
  transform: none;
  box-shadow: none;
}
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* J2Commerce n'est pas (encore) importé dans custom.scss - ce fichier est
   donc compilé isolément dès qu'on le touche (constaté via l'erreur
   "%olh-card-base was not found"). Import explicite de "commun" pour que
   le placeholder soit toujours disponible, indépendamment de custom.scss. */
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   Blank II Lite
   J2Commerce
   ==========================================================================
*/
/* ==========================================================================
   Blank II Lite
   J2Commerce
   ========================================================================== */
/* ==========================================================================
   VARIABLES
   ========================================================================== */
/* Alignés sur $radius (variables.scss) plutôt qu'une échelle isolée, pour
   que J2Commerce rejoigne le rayon d'arrondi du reste du site dès son
   activation. */
/* ==========================================================================
   CONTAINER
   ========================================================================== */
.j2commerce {
  color: #1A2B42;
  line-height: 1.6;
}
/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.j2commerce h1, .j2commerce h2, .j2commerce .cb-user-welcome span, .cb-user-welcome .j2commerce span, .j2commerce h3, .j2commerce h4 {
  color: #C6A969;
  font-weight: 700;
}
.j2commerce a {
  color: #C6A969;
  transition: 0.3s ease;
}
.j2commerce a:hover {
  color: #E0C69F;
}
/* ==========================================================================
   BUTTONS
   ========================================================================== */
.j2commerce .btn {
  border-radius: 18px;
  transition: 0.3s ease;
  font-weight: 600;
}
.j2commerce .btn-primary {
  background: #C6A969;
  border: none;
  box-shadow: none;
}
.j2commerce .btn-primary:hover {
  background: #E0C69F;
}
.j2commerce .btn-outline-secondary {
  border-color: #C5AE91;
  color: #C6A969;
}
.j2commerce .btn-outline-secondary:hover {
  background: #C5AE91;
  color: #ffffff;
}
/* ==========================================================================
   FORMS
   ========================================================================== */
.j2commerce input, .j2commerce select, .j2commerce textarea {
  border-radius: 18px;
  border: 1px solid rgba(197, 174, 145, 0.22);
  background: #ffffff;
}
.j2commerce input:focus, .j2commerce select:focus, .j2commerce textarea:focus {
  border-color: #C5AE91;
  box-shadow: 0 0 0 0.15rem rgba(197, 174, 145, 0.18);
}
/* ==========================================================================
   TOOLBAR
   ========================================================================== */
.j2commerce-sortbar-filter {
  margin-bottom: 2rem;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.j2commerce-sidebar-filters-container {
  background: none;
}
.j2commerce-sidebar-filters-container .accordion {
  background: none;
  border: none;
  box-shadow: none;
}
.j2commerce-sidebar-filters-container .accordion-item {
  border: none;
  background: none;
}
.j2commerce-sidebar-filters-container .accordion-button {
  padding: 1rem 0;
  background: none;
  color: #C6A969;
  box-shadow: none;
  font-weight: 700;
}
.j2commerce-sidebar-filters-container .accordion-button:not(.collapsed) {
  background: none;
}
/* ==========================================================================
   PRODUCT CARD
   ========================================================================== */
.j2commerce-product-item {
  /* Bordure plus discrète que le socle commun (sable clair plutôt que
       $border), pour rester léger sur une grille dense de produits. */
  border: 1px solid rgba(197, 174, 145, 0.16);
  padding: 1.25rem;
}
.j2commerce-product-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
}
/* ==========================================================================
   IMAGE
   ========================================================================== */
.j2commerce-product-image {
  margin-bottom: 1rem;
  text-align: center;
}
.j2commerce-product-image img {
  border: none !important;
  background: transparent;
  border-radius: calc(18px - 8px);
  transition: transform 0.35s ease;
}
.j2commerce-product-item:hover .j2commerce-product-image img {
  transform: scale(1.04);
}
/* ==========================================================================
   TITLE
   ========================================================================== */
.j2commerce-product-title {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.35;
}
.j2commerce-product-title a {
  color: #C6A969;
  text-decoration: none;
}
.j2commerce-product-title a:hover {
  color: #E0C69F;
}
/* ==========================================================================
   PRICE
   ========================================================================== */
.j2commerce-price-sku-container {
  margin-bottom: 1rem !important;
}
.sale-price {
  font-size: 2rem !important;
  font-weight: 700;
  color: #C6A969;
  line-height: 1;
}
/* ==========================================================================
   ADD TO CART
   ========================================================================== */
.j2commerce-addtocart-form {
  margin-top: 1rem;
}
.j2commerce-add-to-cart .input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}
/* quantité */
.qty-input {
  flex: 0 0 68px;
  max-width: 68px;
  min-height: 46px;
  /* Même min-height que .j2commerce-cart-button plus bas : en théorie
       align-items:stretch (sur .input-group) devrait suffire à égaliser les
       deux, mais entre le form-control par défaut de Bootstrap5 et le
       min-height explicite du bouton, ça ne s'aligne pas dans les faits -
       constaté par décalage visible entre le champ et le bouton. Valeur
       dupliquée ici plutôt que de dépendre du stretch. */
  text-align: center;
  font-weight: 700;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
/* Réglage J2Commerce "Afficher le champ Quantité: masquer" sans effet sur
   le shortcode "produit unique" utilisé dans un article (probablement un
   gabarit de rendu différent de celui du catalogue, qui n'obéit pas à ce
   toggle) - masquage forcé ici en CSS, uniquement pour cet usage-là.
   display:none plutôt que suppression : le champ garde sa valeur par
   défaut (product_qty=1) et continue d'être envoyé avec le formulaire,
   donc pas d'impact sur l'ajout au panier. Scopé sur .j2commerce-shortcode-
   article comme le reste : le catalogue garde son champ quantité visible,
   utile si des produits vendus en plusieurs exemplaires y apparaissent un
   jour. */
.j2commerce-shortcode-article .qty-input {
  display: none;
}
/* bouton */
.j2commerce-cart-button {
  flex: 1;
  margin: 0;
  min-height: 46px;
  border: none;
  border-radius: 0 calc(18px - 8px) calc(18px - 8px) 0;
  background: #C6A969;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  transition: 0.3s ease;
}
.j2commerce-cart-button:hover {
  background: #E0C69F;
}
/* Le réglage "Classe du bouton Ajouter au panier" est GLOBAL au composant
   J2Commerce (pas par shortcode/produit) : jl-button-text est donc posée
   partout, carte catalogue comprise - pas seulement sur le shortcode inséré
   dans un article, comme on le pensait au départ (vérifié via le champ de
   configuration J2Commerce : une seule case pour tout le site). Un premier
   essai avait ciblé .j2commerce-cart-button.jl-button-text sans restriction
   d'ancêtre : ça retirait donc aussi le fond doré de la carte catalogue,
   où on veut au contraire garder la pilule pleine.

   Scopé ici sur .j2commerce-shortcode-article, seul point qui distingue
   réellement "bouton dans un article" de "bouton sur une carte" : ce
   conteneur est ajouté automatiquement par J2Commerce autour du shortcode
   "produit unique" utilisé dans un article (voir le HTML généré :
   com_j2commerce j2commerce-single-product j2commerce-shortcode
   j2commerce-shortcode-article) - aucune action des rédacteurs/créateurs de
   produits à prévoir. Hors de ce conteneur (donc sur la carte catalogue),
   .jl-button-text ne matche plus cette règle et le bouton garde le rendu
   "pilule dorée" de la règle de base .j2commerce-cart-button.

   flex:0 0 auto en !important nécessaire : avec le sous-modèle Bootstrap5,
   J2Commerce ajoute sa propre classe utilitaire .flex-fill sur ce bouton
   (bootstrap5.css), qui déclare flex:1 1 auto !important - un !important
   bat toujours une règle normale, quelle que soit sa spécificité (confirmé
   en scannant les règles réellement appliquées). background/color/padding
   n'ont pas ce problème (pas de !important en face), mais restent dans la
   même règle par cohérence - c'est le même "mode texte" article uniquement.
   Couleur alignée sur $primary plutôt que le noir par défaut de jluikit,
   pour rester cohérent avec le reste des liens/boutons du site. */
.j2commerce-shortcode-article .j2commerce-cart-button.jl-button-text {
  background: none;
  color: #C6A969;
  padding: 0;
  flex: 0 0 auto !important;
}
.j2commerce-shortcode-article .j2commerce-cart-button.jl-button-text:hover {
  background: none;
  color: #A08244;
}
/* ==========================================================================
   STOCK
   ========================================================================== */
.j2commerce-product-stock {
  margin-top: 0.9rem;
  padding: 0;
  background: none;
  border: none;
  text-align: left;
  color: #5f8f63;
  font-size: 0.95rem;
  font-weight: 600;
}
.j2commerce-product-stock::before {
  content: "● ";
}
/* ==========================================================================
   NOTIFICATIONS
   ========================================================================== */
.cart-action-complete {
  margin-bottom: 1rem;
}
/* ==========================================================================
   CART MODULE (MINI-PANIER, POSITION SIDEBAR)
   --------------------------------------------------------------------------
   Module Joomla séparé (j2commerce-cart-module), pas forcément entouré par
   .j2commerce - les règles ci-dessous sont donc autonomes, sans compter sur
   les règles génériques .j2commerce plus haut dans ce fichier. Même socle
   %olh-card-base que .j2commerce-product-item, pour que ce module rejoigne
   visuellement la grille de cartes du reste du site plutôt que de rester
   dans le style UIkit brut (uk-list/uk-table) du module d'origine.

   Scopé sous .panier-sidebar (suffixe de classe posé sur CE module précis,
   dans Joomla) plutôt que sur .j2commerce-cart-module tout court : un
   second module J2Commerce (le mini-panier flottant icône+badge,
   .panier-flottant_z) partage exactement la même classe .j2commerce-cart-
   module - sans ce scope, le style carte lui tombait dessus aussi et
   cassait son rendu compact. */
.j2commerce-cart-module.panier-sidebar {
  padding: 1.5rem;
  /* Réinitialise le style de liste UIkit (uk-list-divider) : bordures et
       espacements repris à la main ci-dessous plutôt que hérités. */
  /* Tableau sous-total/total : bordures UIkit neutralisées, reprises dans
       la même teinte que le reste de la carte. Dernière ligne (Total) mise
       en avant en $primary, comme .sale-price plus haut dans ce fichier. */
  /* Panier vide (option J2Commerce "n'afficher que si non vide" appliquée
       au module lui-même, mais pas à SON contour .jl-panel/.panier-sidebar) :
       sans ça, la carte reste visible avec rien dedans. Classe posée en JS
       (custom js du site) sur ce même wrapper .panier-sidebar dès que le
       contenu du module interne est vide, sur DOMContentLoaded et à chaque
       évènement j2commerce:cart:updated. */
}
.j2commerce-cart-module.panier-sidebar .cart-module-title {
  margin: 0 0 1rem 0;
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  color: #C6A969;
  font-size: 1.15rem;
}
.j2commerce-cart-module.panier-sidebar .j2commerce-cart-summary {
  color: #52637A;
  font-size: 0.85rem;
}
.j2commerce-cart-module.panier-sidebar .j2commerce-cart-item-list {
  margin: 1rem 0 !important;
  padding: 0;
  list-style: none;
}
.j2commerce-cart-module.panier-sidebar .j2commerce-minicart-item {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid rgba(197, 174, 145, 0.25);
}
.j2commerce-cart-module.panier-sidebar .j2commerce-minicart-item:last-child {
  border-bottom: none;
}
.j2commerce-cart-module.panier-sidebar .j2commerce-cart-thumb img {
  border-radius: calc(18px - 8px);
  border: 1px solid rgba(197, 174, 145, 0.2);
}
.j2commerce-cart-module.panier-sidebar .cart-product-name {
  color: #1A2B42;
  font-size: 0.92rem;
  line-height: 1.35;
}
.j2commerce-cart-module.panier-sidebar .j2commerce-minicart-remove {
  color: #9E3838;
  opacity: 0.7;
  transition: 0.3s ease;
}
.j2commerce-cart-module.panier-sidebar .j2commerce-minicart-remove:hover {
  opacity: 1;
}
.j2commerce-cart-module.panier-sidebar table.uk-table {
  margin: 1rem 0 0 0 !important;
}
.j2commerce-cart-module.panier-sidebar table.uk-table th, .j2commerce-cart-module.panier-sidebar table.uk-table td {
  padding: 0.5rem 0 !important;
  border-top: 1px solid rgba(197, 174, 145, 0.25) !important;
  color: #52637A;
  font-size: 0.85rem;
}
.j2commerce-cart-module.panier-sidebar table.uk-table tr:last-child th, .j2commerce-cart-module.panier-sidebar table.uk-table tr:last-child td {
  color: #C6A969;
  font-weight: 700;
  font-size: 1rem;
}
.j2commerce-cart-module.panier-sidebar .j2commerce-view-cart-link {
  display: block;
  margin-top: 1rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: #C6A969;
  color: #ffffff !important;
  text-decoration: none !important;
  text-align: center;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  transition: 0.3s ease;
}
.j2commerce-cart-module.panier-sidebar .j2commerce-view-cart-link:hover {
  background: #A08244;
  color: #ffffff !important;
}
.j2commerce-cart-module.panier-sidebar.is-cart-empty {
  display: none !important;
}
.is-cart-empty {
  display: none !important;
}
/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 768px) {
  .sale-price {
    font-size: 1.8rem !important;
  }
}
/* ==========================================================================
   HABILLAGE CONVERTFORMS (Tassos Marinos) AUX COULEURS DU SITE
   --------------------------------------------------------------------------
   S'appuie sur les classes réelles générées par le plugin (.convertforms,
   .cf-control-group, .cf-input, .cf-btn, ...) — aucune classe inventée ici,
   contrairement aux composants .olh-* précédents.

   PORTÉE : ces règles ciblent .convertforms de façon globale, donc TOUS vos
   formulaires ConvertForms sur le site adopteront ce style (pas seulement
   celui de la page Contact). Si vous voulez le réserver à un seul
   formulaire, remplacez le sélecteur racine ".convertforms" par
   "#cf_1" (l'ID change selon le formulaire, visible dans son HTML).

   NOTE SUR LE FOND DU FORMULAIRE : ConvertForms pose un style inline
   (style="background-color:none") directement sur .cf-form-wrap, généré
   depuis son panneau d'administration. Un style inline gagne toujours
   face à une règle de feuille de style classique, d'où le !important
   ci-dessous. Option plus propre si vous préférez l'éviter : dans
   l'admin du formulaire (onglet Style / Disposition), réglez directement
   la couleur de fond du champ sur $bg-soft — l'inline style sera alors
   déjà le bon et vous pourrez retirer le !important.
   ========================================================================== */
.convertforms {
  /* --- Message de réponse (succès / erreur) --- */
  /* --- Libellés de champs --- */
  /* --- Espacement entre champs --- */
  /* --- Champs texte / email / textarea / select --- */
  /* --- Champ téléphone (widget tiers "choices.js" + indicatif pays) ---
       Composant JS complexe : on ne touche qu'à l'apparence extérieure
       (bordures/rayon) pour rester cohérent visuellement, sans intervenir
       sur le fonctionnement du menu déroulant. */
  /* --- Case à cocher (conditions d'utilisation, RGPD...) --- */
  /* --- Bouton d'envoi --- */
  /* --- Texte reCAPTCHA --- */
}
.convertforms .cf-form-wrap {
  background-color: #F7F4EB !important;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  padding: 2rem;
  transition: 0.3s ease;
}
.convertforms .cf-response {
  border-radius: 12px;
  font-family: "Nunito", sans-serif;
  font-size: 0.9rem;
}
.convertforms .cf-response:not(:empty) {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.convertforms .cf-control-label, .convertforms .mod-assoc-payment__amount-label {
  margin-bottom: 0.35rem;
}
.convertforms .cf-label, .convertforms .mod-assoc-payment__amount-label {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  color: #1A2B42;
  font-size: 0.9rem;
}
.convertforms .cf-required-label {
  color: #9E3838;
  margin-left: 0.15rem;
}
.convertforms .cf-control-group {
  margin-bottom: 1.1rem;
}
.convertforms .cf-input {
  width: 100%;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: #1A2B42;
  background-color: #ffffff;
  border: 1px solid #E0C69F !important;
  border-radius: 12px !important;
  padding: 0.75rem 1rem;
  transition: 0.3s ease;
}
.convertforms .cf-input:focus {
  outline: none;
  border-color: #C6A969 !important;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.15);
}
.convertforms textarea.cf-input {
  resize: vertical;
  min-height: 120px;
}
.convertforms .cf-phone-number-wrapper {
  border-radius: 12px;
}
.convertforms .tf-phone-control {
  border: 1px solid #E0C69F;
  border-radius: 12px !important;
  overflow: hidden;
  transition: 0.3s ease;
}
.convertforms .tf-phone-control:focus-within {
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.15);
}
.convertforms .tf-phone-control .choices {
  margin-bottom: 0;
}
.convertforms .tf-phone-control .choices__inner {
  background-color: #ffffff;
  border: none !important;
  border-radius: 0 !important;
  min-height: unset;
  padding: 0.6rem 0.5rem;
}
.convertforms .tf-phone-control .tf-phone-control--number {
  border: none !important;
  box-shadow: none !important;
  padding: 0.75rem 0.75rem 0.75rem 0;
}
.convertforms .cf-checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.convertforms .cf-checkbox-group input[type="checkbox"] {
  accent-color: #A08244;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  flex-shrink: 0;
}
.convertforms .cf-checkbox-group .cf-label {
  font-weight: 400;
  color: #52637A;
  font-size: 0.8rem;
  line-height: 1.5;
}
.convertforms .cf-checkbox-group .cf-label p {
  margin: 0;
}
.convertforms .cf-btn, .convertforms .mod-assoc-payment__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2.25rem !important;
  background: #E0C69F !important;
  border: 1px solid #671d2f !important;
  border-radius: 999px !important;
  color: #671d2f !important;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: 0.3s ease;
}
.convertforms .cf-btn:hover, .convertforms .mod-assoc-payment__button:hover {
  background-color: rgba(103, 29, 47, 0.08) !important;
  border-color: #471420 !important;
  color: #471420 !important;
  transform: translateY(-2px);
}
.convertforms .cf-btn .cf-btn-text, .convertforms .mod-assoc-payment__button .cf-btn-text {
  color: inherit;
}
.convertforms .cf-recaptcha-v3-text-badge {
  font-family: "Nunito", sans-serif;
  color: #52637A;
  font-size: 0.75rem;
  line-height: 1.5;
  margin-top: 0.75rem;
}
.convertforms .cf-recaptcha-v3-text-badge a {
  color: #A08244;
}
/* ==========================================================================
   ALIGNEMENT STRUCTUREL GANTRY (VOTRE CLASSE DE SÉCURITÉ)
   ========================================================================== */
.contact-quickbar-block {
  align-self: flex-start !important;
  padding-top: 8px !important;
  /* Aligne la quickbar sur la ligne supérieure du logo */
}
/* ==========================================================================
   QUICKBAR CONTACT COMPACTE (3 CARTES + ZONE BASSE AVEC TOOLTIPS)
   ========================================================================== */
.contact-quickbar {
  width: 100%;
  max-width: 42vw;
  /* Ajusté pour une harmonie parfaite à 3 cartes */
  margin: 0 auto;
  /* Grille des 3 cartes supérieures */
  /* ==========================================================================
     STRUCTURE HORIZONTALE DU BAS (RESEAUX & GAZETTE)
     ========================================================================== */
}
.contact-quickbar .contact-grid {
  display: flex;
  flex-flow: row nowrap;
  gap: 0.85rem;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 1rem;
}
.contact-quickbar .contact-card {
  flex: 1;
  height: 100%;
  padding: 0.85rem 0.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  position: relative;
  /* Sécurité pour le tooltip parent */
}
.contact-quickbar .contact-card .card-legend {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  color: #52637A;
  font-size: 0.75rem;
  margin-top: 0.4rem;
  text-align: center;
}
.contact-quickbar .contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  border-color: rgba(198, 169, 105, 0.5);
  background-image: linear-gradient(to bottom right, #ffffff, #E0C69F);
}
.contact-quickbar .contact-card:hover .card-legend {
  color: #1A2B42;
}
.contact-quickbar .contact-icon-wrapper {
  color: #C6A969;
  display: flex;
}
.contact-quickbar .contact-icon-wrapper svg {
  width: 24px !important;
  height: 24px !important;
}
.contact-quickbar .contact-footer-inline {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.25rem !important;
  margin-top: 1rem !important;
  border-top: 1px solid rgba(103, 29, 47, 0.5) !important;
  padding-top: 0.75rem !important;
  width: 100% !important;
  /* Force absolue du style des boutons ronds du bas */
}
.contact-quickbar .contact-footer-inline .socials-links {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 0.6rem !important;
  margin: 0 !important;
  padding: 0 !important;
}
.contact-quickbar .contact-footer-inline .social-icon-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  background-color: #F7F4EB !important;
  /* Fond Blanc Cassé */
  border: 1px solid #671d2f !important;
  /* Bordure ocre dorée fine */
  border-radius: 50% !important;
  /* Rond parfait */
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04) !important;
  /* Légère ombre douce */
  color: #52637A !important;
  /* Icône bleu-gris */
  text-decoration: none !important;
  transition: 0.3s ease !important;
  position: relative !important;
  /* Pour le tooltip */
  margin: 0 !important;
}
.contact-quickbar .contact-footer-inline .social-icon-btn svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}
.contact-quickbar .contact-footer-inline .social-icon-btn:hover {
  color: #C6A969 !important;
  /* Devient Ocre Doré */
  background-color: #ffffff !important;
  /* Devient blanc pur */
  border-color: rgba(198, 169, 105, 0.6) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08) !important;
}
/* ==========================================================================
   CLASSE UTILITAIRE UNIVERSELLE : MOTEUR DE TOOLTIP EN CSS PUR
   ========================================================================== */
.olh-tooltip {
  position: relative;
  /* Sécurité : assure le positionnement absolu des pseudos */
  /* --- [VOTRE CODE ACTUEL POUR LE HAUT] --- */
  /* ==========================================================================
       VARIANTE POUR LE HAUT DE L'ÉCRAN : AFFICHAGE VERS LE BAS
       ========================================================================== */
  /* ==========================================================================
               VARIANTE GAUCHE : L'INFOBULLE S'AFFICHE À GAUCHE DE L'ÉLÉMENT
               ========================================================================== */
  /* ==========================================================================
               VARIANTE DROITE : L'INFOBULLE S'AFFICHE À DROITE DE L'ÉLÉMENT
               ========================================================================== */
}
.olh-tooltip:hover {
  z-index: 999999 !important;
  /* Force l'élément survolé et ses pseudos-éléments à passer au-dessus de TOUT le reste */
}
.olh-tooltip:hover::before, .olh-tooltip:hover::after {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, 0) !important;
}
.olh-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 6px);
  background-color: #1A2B42;
  color: #faf7f3;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  white-space: nowrap;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  border: 1px solid rgba(198, 169, 105, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  /* z-index: 9999 !important;*/
}
.olh-tooltip::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translate(-50%, 6px);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #1A2B42 transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  /* z-index: 9999 !important;*/
}
.olh-tooltip.olh-tooltip-bottom {
  /* Inversion de la bulle de texte */
  /* Inversion de la flèche (position et direction du triangle) */
}
.olh-tooltip.olh-tooltip-bottom:hover::before, .olh-tooltip.olh-tooltip-bottom:hover::after {
  /* Inversion de l'effet de translation (descente au lieu de montée) */
  transform: translate(-50%, 0) !important;
}
.olh-tooltip.olh-tooltip-bottom::after {
  bottom: auto;
  top: calc(100% + 10px);
  /* Se place sous l'élément */
  transform: translate(-50%, -6px);
  /* Part d'un peu plus haut */
}
.olh-tooltip.olh-tooltip-bottom::before {
  bottom: auto;
  top: calc(100% + 4px);
  /* Se place sous l'élément */
  transform: translate(-50%, -6px);
  border-width: 0 6px 6px 6px;
  /* Flèche pointant vers le haut */
  border-color: transparent transparent #1A2B42 transparent;
  /* Couleur sur la bordure basse */
}
.olh-tooltip.olh-tooltip-left {
  /* Ajustement de la bulle à gauche */
  /* Ajustement de la flèche (pointe vers la droite) */
}
.olh-tooltip.olh-tooltip-left:hover::before, .olh-tooltip.olh-tooltip-left:hover::after {
  transform: translate(0, -50%) !important;
  /* Mouvement horizontal fluide */
}
.olh-tooltip.olh-tooltip-left::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 10px);
  /* Pousse à gauche de l'élément */
  transform: translate(6px, -50%);
  /* Part d'un peu plus à droite */
}
.olh-tooltip.olh-tooltip-left::before {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 4px);
  transform: translate(6px, -50%);
  border-width: 6px 0 6px 6px;
  /* Triangle vers la droite */
  border-color: transparent transparent transparent #1A2B42;
}
.olh-tooltip.olh-tooltip-right {
  /* Ajustement de la bulle à droite */
  /* Ajustement de la flèche (pointe vers la gauche) */
}
.olh-tooltip.olh-tooltip-right:hover::before, .olh-tooltip.olh-tooltip-right:hover::after {
  transform: translate(0, -50%) !important;
  /* Mouvement horizontal fluide */
}
.olh-tooltip.olh-tooltip-right::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 10px);
  /* Pousse à droite de l'élément */
  transform: translate(-6px, -50%);
  /* Part d'un peu plus à gauche */
}
.olh-tooltip.olh-tooltip-right::before {
  bottom: auto;
  top: 50%;
  left: calc(100% + 4px);
  transform: translate(-6px, -50%);
  border-width: 6px 6px 6px 0;
  /* Triangle vers la gauche */
  border-color: transparent #1A2B42 transparent transparent;
}
/* Responsivité de la Quickbar */
@media (max-width: 1200px) {
  .contact-quickbar {
    max-width: 55vw;
  }
}
@media (max-width: 768px) {
  .contact-quickbar {
    max-width: 75vw;
    padding-bottom: 0.75rem !important;
  }
  .contact-quickbar .contact-footer-inline {
    /* !important obligatoire : la règle de base plus haut pose
               flex-flow: row nowrap !important (et gap: 1.25rem !important)
               - sans !important ici, ces deux lignes n'ont jamais eu le
               moindre effet, à n'importe quelle taille d'écran : ce palier
               tablette ne servait donc à rien depuis le début. Gardé ici en
               filet de sécurité pur si le contenu s'allonge un jour (plus
               d'icônes, traduction plus longue...) - à cette largeur le
               contenu actuel tient déjà sur une seule ligne, donc rien de
               visible ne change pour l'instant. */
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }
}
@media (max-width: 576px) {
  .contact-quickbar {
    max-width: 100%;
    padding: 0 1rem;
    /* Sur téléphone, les 4 cartes en une seule ligne (flex-flow: row
           nowrap, hérité de la règle de base) n'ont plus la place de
           respirer et se tassent - on les passe en grille 2x2 : flex-wrap
           autorise le retour à la ligne, et flex-basis à calc(50% - la
           moitié du gap) fait tenir exactement 2 cartes par ligne (le gap
           de 0.85rem restant réparti entre les 2 colonnes). */
  }
  .contact-quickbar .contact-grid {
    flex-wrap: wrap;
  }
  .contact-quickbar .contact-card {
    flex: 0 1 calc(50% - 0.425rem);
  }
  .contact-quickbar .contact-footer-inline {
    /* Même remarque qu'au palier tablette : !important nécessaire
               pour battre flex-flow: row nowrap !important de la règle de
               base (align-items était déjà "center" des deux côtés, donc
               son absence de !important ne se voyait pas - je l'ajoute
               quand même par cohérence). */
    flex-direction: column !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(103, 29, 47, 0.5);
    padding-bottom: 0.75rem !important;
    /* flex-direction: column empile déjà chaque enfant sur sa
               propre ligne (donc "Notre Gazette:" et son icône, ainsi que
               "Nous suivre:" et les siennes, sont chacun sur une ligne à
               part - "Notre Gazette:" est donc déjà "à la ligne" de fait).
               Il ne manquait que le séparateur : un trait au-dessus du 2e
               <h6> ("Notre Gazette:"), même langage visuel que celui déjà
               en haut de .contact-footer-inline. align-self: stretch pour
               que le trait s'étire sur toute la largeur plutôt que de se
               limiter à celle du texte (align-items: center ci-dessus
               réduit sinon chaque enfant à sa propre largeur). */
  }
  .contact-quickbar .contact-footer-inline h6:nth-of-type(2) {
    align-self: stretch;
    padding-top: 0.75rem !important;
    border-top: 1px solid rgba(103, 29, 47, 0.5);
    text-align: center;
  }
}
/* ==========================================================================
   STYLE MODULAIRE ICAGENDA - COMPATIBLE TYPOGRAPHIE GLOBALE
   ========================================================================== */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
#ic_eventlist {
  width: 100%;
}
/* --- STRUCTURE SECTIONS & GRILLES --- */
.ic-section {
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.ic-col {
  display: block;
  margin: 0;
}
.ic-group:before, .ic-group:after {
  content: "";
  display: table;
}
.ic-group:after {
  clear: both;
}
.ic-col1 {
  width: 100%;
  margin-bottom: 0.3rem;
}
.ic-col2 {
  width: calc(50% - 0.5rem);
}
.ic-col3 {
  width: calc(33.333% - 0.7rem);
}
.ic-col4 {
  width: calc(25% - 0.75rem);
}
@media (max-width: 768px) {
  .ic-col4 {
    width: calc(33.333% - 0.7rem);
  }
}
@media (max-width: 768px) {
  .ic-col3, .ic-col4 {
    width: calc(50% - 0.5rem);
  }
}
@media (max-width: 576px) {
  .ic-col2, .ic-col3, .ic-col4 {
    width: 100%;
  }
}
.ic-msg-no-event {
  font-family: "Nunito", sans-serif;
  /* <-- RÉUTILISE VOTRE TYPOGRAPHIE */
  color: #52637A;
  text-align: center;
}
/* --- DESIGN DES BLOCS ÉVÉNEMENTS (CARTES ICAGENDA) --- */
.icrounded_eventlist {
  font-family: "Nunito", sans-serif;
  /* <-- RÉUTILISE VOTRE TYPOGRAPHIE */
  padding: 1rem !important;
}
.icrounded_eventlist:nth-child(2n+1) {
  background-color: color-mix(in srgb, #C6A969 4%, #F7F4EB);
}
.icrounded_eventlist:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  border-color: rgba(198, 169, 105, 0.5);
  background-image: linear-gradient(to bottom right, #ffffff, #E0C69F);
}
.icrounded_eventlist:hover a, .icrounded_eventlist:hover .iceventlist-title, .icrounded_eventlist:hover .iceventlist-venue, .icrounded_eventlist:hover .ic-datetime-div, .icrounded_eventlist:hover .iceventlist-desc {
  color: #1A2B42 !important;
}
.icrounded_eventlist:hover .iceventlist-title {
  color: #A08244 !important;
}
.icrounded_eventlist a {
  text-decoration: none;
  transition: 0.3s ease;
}
.icrounded_eventlist a:link, .icrounded_eventlist a:visited {
  color: #1A2B42;
}
/* --- TYPOGRAPHIE ET CONTENUS INTERNES --- */
.icrounded_eventlist {
  /* --- SYSTÈME DE RÉSERVATION & INSCRIPTIONS --- */
}
.icrounded_eventlist .ic-inline-block {
  display: inline-block;
  vertical-align: middle;
}
.icrounded_eventlist .ic-block {
  display: block;
  margin: auto 3px;
}
.icrounded_eventlist .ic-date-img-box {
  float: left;
  text-align: center;
  margin: 4px 10px 4px 4px;
  border-radius: 8px;
  background-color: #C6A969;
  color: #ffffff;
  padding: 6px;
  min-width: 45px;
}
.icrounded_eventlist .ic-date-div {
  text-shadow: none;
}
.icrounded_eventlist .ic-day {
  line-height: 1.2 !important;
  /* <-- RÉUTILISE VOTRE TYPOGRAPHIE (18px) */
  font-weight: 700;
}
.icrounded_eventlist .ic-month {
  line-height: 1 !important;
  /* <-- RÉUTILISE VOTRE TYPOGRAPHIE (11px) */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.icrounded_eventlist .iceventlist-title {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  color: #1A2B42;
  /* <-- RÉUTILISE VOTRE TYPOGRAPHIE (16px) */
  line-height: 1.4 !important;
  margin-bottom: 2px;
}
.icrounded_eventlist .iceventlist-venue {
  color: #A08244;
  font-weight: 700;
  /* <-- RÉUTILISE VOTRE TYPOGRAPHIE (12px) */
}
.icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div {
  color: #52637A;
  /* <-- RÉUTILISE VOTRE TYPOGRAPHIE (12px) */
}
.icrounded_eventlist .ic-datetime-label {
  font-weight: 700;
}
.icrounded_eventlist .iceventlist-desc {
  color: #52637A;
  /* <-- RÉUTILISE VOTRE TYPOGRAPHIE (13px) */
  margin-top: 6px;
}
.icrounded_eventlist .ic-reg {
  /* <-- RÉUTILISE VOTRE TYPOGRAPHIE (11px) */
  font-weight: 700;
  margin: 4px 2px 0 2px;
  padding: 2px 8px;
  text-align: center;
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid transparent;
  display: inline-block;
}
.icrounded_eventlist span.ic-reg.available {
  background: #ffffff;
  color: #52637A;
  border-color: #671d2f;
}
.icrounded_eventlist span.ic-reg.ticketsleft {
  background: #C48344;
  color: #ffffff;
}
.icrounded_eventlist span.ic-reg.registered {
  background: #657A58;
  color: #ffffff;
}
.icrounded_eventlist .iceventlist-feature-icon {
  color: #C6A969;
  margin: 0 2px;
}
/* ==========================================================================
   VUE "LISTE" ICAGENDA (page complète : #icagenda.ic-list-view)
   ==========================================================================
   Squelette de classes différent de la section ci-dessus (.icrounded_eventlist
   cible un autre skin/module iCagenda). Cette partie couvre la page de liste
   avec formulaire de filtres, calendrier JS et cartes d'événements telle
   qu'observée sur /vie-de-lassociation/agenda.
   ========================================================================== */
#icagenda.ic-list-view {
  font-family: "Nunito", sans-serif;
  color: #1A2B42;
}
#icagenda.ic-list-view *, #icagenda.ic-list-view *::before, #icagenda.ic-list-view *::after {
  box-sizing: border-box;
}
#icagenda.ic-list-view a {
  transition: 0.3s ease;
}
/* --- Grille interne iCagenda (système sur 16 colonnes) --- */
#icagenda.ic-list-view {
  /* iCagenda utilise aussi des valeurs > 12 (ex: ic-col-16) comme simple
       raccourci "pleine largeur", indépendamment du total réel de la grille
       (12) - on les traite donc toutes comme 100%. */
  /* Ne devient "flex" (= une rangée) que si la colonne contient
       elle-même d'autres colonnes ic-col-*. Une colonne "feuille" (qui ne
       contient qu'un champ, un bouton...) reste un bloc normal, pour que
       son contenu se comporte normalement et remplisse bien 100% de la
       largeur disponible (ex: le champ de recherche). */
}
#icagenda.ic-list-view .ic-clearfix::after {
  content: "";
  display: table;
  clear: both;
}
#icagenda.ic-list-view .ic-col-1 {
  flex: 0 0 calc(100% / 12 * 1);
  max-width: calc(100% / 12 * 1);
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-2 {
  flex: 0 0 calc(100% / 12 * 2);
  max-width: calc(100% / 12 * 2);
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-3 {
  flex: 0 0 calc(100% / 12 * 3);
  max-width: calc(100% / 12 * 3);
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-4 {
  flex: 0 0 calc(100% / 12 * 4);
  max-width: calc(100% / 12 * 4);
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-5 {
  flex: 0 0 calc(100% / 12 * 5);
  max-width: calc(100% / 12 * 5);
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-6 {
  flex: 0 0 calc(100% / 12 * 6);
  max-width: calc(100% / 12 * 6);
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-7 {
  flex: 0 0 calc(100% / 12 * 7);
  max-width: calc(100% / 12 * 7);
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-8 {
  flex: 0 0 calc(100% / 12 * 8);
  max-width: calc(100% / 12 * 8);
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-9 {
  flex: 0 0 calc(100% / 12 * 9);
  max-width: calc(100% / 12 * 9);
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-10 {
  flex: 0 0 calc(100% / 12 * 10);
  max-width: calc(100% / 12 * 10);
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-11 {
  flex: 0 0 calc(100% / 12 * 11);
  max-width: calc(100% / 12 * 11);
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-12 {
  flex: 0 0 calc(100% / 12 * 12);
  max-width: calc(100% / 12 * 12);
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-13 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-14 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-15 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-16 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-17 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-18 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-19 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view .ic-col-20 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
}
#icagenda.ic-list-view [class*="ic-col-"]:has(> [class*="ic-col-"]) {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
@media (max-width: 768px) {
  #icagenda.ic-list-view [class*="ic-col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
/* --- Barre de filtres --- */
#icagenda.ic-list-view {
  /* Champs de formulaire (recherche, dates, catégorie) */
  /* Bouton calendrier accolé au champ date */
  /* Rangée "Mois / Année" (repliée par défaut derrière "Plus d'options") :
       ne totalise que 6/12 de largeur (ic-col-3 + ic-col-3), on centre donc
       la rangée dans l'espace disponible plutôt que de la laisser collée
       à gauche avec du vide à droite. */
  /* Toggle "Plus d'options" */
  /* Boutons Rechercher / Réinitialiser */
}
#icagenda.ic-list-view .ic-filters {
  padding: 1.5rem;
  margin-bottom: 2rem;
}
#icagenda.ic-list-view .ic-filters-label {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
#icagenda.ic-list-view .ic-filters-label-title-3 {
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  color: #C6A969;
  font-size: 1.05rem;
  line-height: normal;
  padding-top: 0.55rem;
}
#icagenda.ic-list-view .ic-cell {
  margin-bottom: 1rem;
}
#icagenda.ic-list-view .form-control::placeholder, #icagenda.ic-list-view .form-select::placeholder {
  color: #52637A;
}
#icagenda.ic-list-view .form-select {
  display: flex;
  align-items: center;
}
#icagenda.ic-list-view .field-calendar .input-group {
  display: flex;
  flex-wrap: nowrap;
}
#icagenda.ic-list-view .field-calendar .input-group .form-control {
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
#icagenda.ic-list-view .field-calendar .input-group .btn-primary {
  flex-shrink: 0;
  background-color: #C6A969;
  border: 1px solid #C6A969;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  color: #ffffff;
  padding: 0 0.9rem;
  cursor: pointer;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .field-calendar .input-group .btn-primary:hover {
  background-color: #A08244;
  border-color: #A08244;
}
#icagenda.ic-list-view #ic-more-filters {
  justify-content: flex-start;
}
#icagenda.ic-list-view .ic-filter-more-btn {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: normal;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  color: #1A2B42;
  background-color: #FFFFFF;
  cursor: pointer;
  padding: 0.55rem 0.9rem;
  border: 1px dashed #C5AE91;
  border-radius: 18px;
  text-align: left;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .ic-filter-more-btn:hover {
  background-color: #F1ECE6;
  border-color: #C6A969;
}
#icagenda.ic-list-view .ic-filter-more-btn .iCicon-arrow-down, #icagenda.ic-list-view .ic-filter-more-btn .iCicon-arrow-up {
  margin-left: 8px;
}
#icagenda.ic-list-view .ic-filter-submit-btn, #icagenda.ic-list-view .ic-filter-reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  width: 100%;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  border-radius: 18px;
  padding: 0.65rem 1rem;
  cursor: pointer;
  transition: 0.3s ease;
  border: 1px solid transparent;
}
#icagenda.ic-list-view .ic-filter-submit-btn .iCicon, #icagenda.ic-list-view .ic-filter-reset-btn .iCicon {
  margin-right: 6px;
}
#icagenda.ic-list-view .ic-filter-submit-btn {
  background-color: #C6A969;
  color: #ffffff;
}
#icagenda.ic-list-view .ic-filter-submit-btn:hover {
  background-color: #A08244;
}
#icagenda.ic-list-view .ic-filter-reset-btn {
  background-color: #FFFFFF;
  color: #52637A;
  border-color: #C5AE91;
}
#icagenda.ic-list-view .ic-filter-reset-btn:hover {
  background-color: #F1ECE6;
  color: #1A2B42;
}
/* --- Calendrier JS (datepicker qui s'ouvre au clic sur le bouton date) --- */
#icagenda.ic-list-view .js-calendar .calendar-container {
  background-color: #FFFFFF;
  border: 1px solid #671d2f;
  border-radius: 18px;
  overflow: hidden;
  font-family: "Nunito", sans-serif;
}
#icagenda.ic-list-view .js-calendar .calendar-header {
  background-color: #F7F4EB;
}
#icagenda.ic-list-view .js-calendar .title-month span, #icagenda.ic-list-view .js-calendar .title-year span {
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  color: #1A2B42;
}
#icagenda.ic-list-view .js-calendar .js-btn {
  color: #A08244;
  text-decoration: none;
  cursor: pointer;
}
#icagenda.ic-list-view .js-calendar .js-btn:hover {
  color: #C6A969;
}
#icagenda.ic-list-view .js-calendar .day-name {
  font-weight: 700;
  color: #52637A;
}
#icagenda.ic-list-view .js-calendar .day {
  border-radius: 50%;
}
#icagenda.ic-list-view .js-calendar .day:hover {
  background-color: #F1ECE6;
}
#icagenda.ic-list-view .js-calendar .day.today {
  border: 1px solid #C6A969;
}
#icagenda.ic-list-view .js-calendar .day.selected {
  background-color: #C6A969 !important;
  color: #ffffff !important;
}
#icagenda.ic-list-view .js-calendar .day.disabled, #icagenda.ic-list-view .js-calendar .day.othermonth {
  color: #C5AE91;
  opacity: 0.5;
}
#icagenda.ic-list-view .js-calendar .buttons-wrapper {
  border-top: 1px solid #F1ECE6;
}
#icagenda.ic-list-view .js-calendar .buttons-wrapper .btn {
  font-family: "Nunito", sans-serif;
  color: #A08244;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.6rem 0.8rem;
}
#icagenda.ic-list-view .js-calendar .buttons-wrapper .btn:hover {
  background-color: #F1ECE6;
}
/* --- Liste des événements --- */
#icagenda.ic-list-view {
  /* Carte événement (même esprit que .olh-card-item : fond doux, radius,
       ombre légère, léger effet au survol) */
  /* Pastille de date : la couleur de fond est injectée en style inline
       par iCagenda (couleur de catégorie) - on ne la touche pas, on habille
       uniquement la mise en page/typo à l'intérieur. */
}
#icagenda.ic-list-view .ic-list-events {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
#icagenda.ic-list-view .ic-list-event {
  width: 100%;
}
#icagenda.ic-list-view .ic-box {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
#icagenda.ic-list-view .ic-box:hover {
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  transform: translateY(-3px);
}
@media (max-width: 576px) {
  #icagenda.ic-list-view .ic-box {
    flex-direction: column;
  }
}
#icagenda.ic-list-view .ic-box-date {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  padding: 1rem;
}
#icagenda.ic-list-view .ic-box-date .ic-date {
  text-align: center;
  color: #ffffff;
}
#icagenda.ic-list-view .ic-box-date .ic-day {
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1 !important;
}
#icagenda.ic-list-view .ic-box-date .ic-month {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
#icagenda.ic-list-view .ic-box-date .ic-year {
  opacity: 0.85;
}
#icagenda.ic-list-view .ic-content {
  padding: 1.25rem 1.5rem;
  flex: 1;
}
#icagenda.ic-list-view .ic-cat {
  margin-bottom: 0.4rem;
}
#icagenda.ic-list-view .ic-cat a {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #A08244;
  background-color: #F1ECE6;
  border-radius: 999px;
  padding: 2px 10px;
  text-decoration: none;
}
#icagenda.ic-list-view .ic-cat a:hover {
  background-color: #E0C69F;
}
#icagenda.ic-list-view h2, #icagenda.ic-list-view .cb-user-welcome span, .cb-user-welcome #icagenda.ic-list-view span {
  margin: 0 0 0.4rem 0;
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.3;
}
#icagenda.ic-list-view h2 a, #icagenda.ic-list-view .cb-user-welcome span a, .cb-user-welcome #icagenda.ic-list-view span a {
  color: #1A2B42;
  text-decoration: none;
}
#icagenda.ic-list-view h2 a:hover, #icagenda.ic-list-view .cb-user-welcome span a:hover, .cb-user-welcome #icagenda.ic-list-view span a:hover {
  color: #A08244;
}
#icagenda.ic-list-view .ic-place {
  color: #52637A;
  margin-bottom: 0.4rem;
}
#icagenda.ic-list-view .ic-place strong {
  color: #1A2B42;
  font-weight: 700;
}
#icagenda.ic-list-view .ic-descshort {
  color: #52637A;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
#icagenda.ic-list-view .ic-actionbar-readmore .btn {
  display: inline-block;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  color: #ffffff;
  background-color: #C6A969;
  border: none;
  border-radius: 18px;
  padding: 0.5rem 1.1rem;
  text-decoration: none;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .ic-actionbar-readmore .btn:hover {
  background-color: #A08244;
  color: #ffffff;
}
#icagenda.ic-list-view .ic-actionbar-readmore .btn .icon-arrow-right {
  margin-left: 4px;
}
/* ==========================================================================
   VUE "DÉTAIL D'UN ÉVÉNEMENT" (#icagenda.ic-event-view)
   ==========================================================================
   Le style général de la page (fond, titres, tableau de détails) hérite déjà
   correctement de la charte du site. Seuls les boutons "Imprimer" / "Ajouter
   au calendrier" (couleurs Bootstrap par défaut : gris/bleu) et le lien
   "Retour" (trop petit) sont corrigés ici.
   ========================================================================== */
#icagenda.ic-event-view {
  /* --- Lien "Retour" --- */
  /* --- Boutons "Imprimer" / "Ajouter au calendrier" --- */
  /* --- Menu déroulant "Ajouter au calendrier" --- */
}
#icagenda.ic-event-view .ic-back {
  margin-bottom: 1rem;
}
#icagenda.ic-event-view .ic-back a {
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
  /* la classe .small d'iCagenda le réduisait trop */
  color: #52637A;
  text-decoration: none;
}
#icagenda.ic-event-view .ic-back a:hover {
  color: #A08244;
  text-decoration: underline;
}
#icagenda.ic-event-view .ic-back .small {
  font-size: inherit;
}
#icagenda.ic-event-view .ic-buttons {
  margin-right: 2rem;
  /* "Imprimer" : bouton secondaire, discret */
  /* "Ajouter au calendrier" : bouton d'action, mis en avant */
}
#icagenda.ic-event-view .ic-buttons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 18px;
  padding: 0.65rem 1.25rem;
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s ease;
  border: 1px solid transparent;
}
#icagenda.ic-event-view .ic-buttons .btn .iCicon {
  margin-right: 6px;
}
#icagenda.ic-event-view .ic-buttons .btn-secondary {
  background-color: #FFFFFF;
  border-color: #C5AE91;
  color: #1A2B42;
}
#icagenda.ic-event-view .ic-buttons .btn-secondary:hover {
  background-color: #F1ECE6;
  border-color: #C6A969;
  color: #1A2B42;
}
#icagenda.ic-event-view .ic-buttons .btn-info {
  background-color: #C6A969;
  border-color: #C6A969;
  color: #ffffff;
}
#icagenda.ic-event-view .ic-buttons .btn-info:hover, #icagenda.ic-event-view .ic-buttons .btn-info[aria-expanded="true"] {
  background-color: #A08244;
  border-color: #A08244;
  color: #ffffff;
}
#icagenda.ic-event-view .ic-dropdown-menu {
  font-family: "Nunito", sans-serif;
  background-color: #FFFFFF;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  padding: 0.5rem;
  overflow: hidden;
  right: auto !important;
}
#icagenda.ic-event-view .ic-dropdown-menu li {
  list-style: none;
}
#icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 0.75rem;
  border-radius: calc(18px / 2);
  color: #1A2B42;
  text-decoration: none;
  transition: 0.3s ease;
}
#icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item:hover {
  background-color: #F1ECE6;
  color: #A08244;
}
#icagenda.ic-event-view .ic-dropdown-menu .ic-svg {
  width: 20px;
  height: 20px;
}
/* --- Bouton(s) "S'inscrire" (le style change selon le statut de connexion :
   btn-primary si non connecté - déjà recoloré par le style global du site -,
   btn-success/btn-outline-success si connecté - jamais recoloré, d'où le
   vert Bootstrap resté tel quel). Volontairement hors de .ic-event-view :
   cette boîte peut aussi apparaître dans .ic-actionbar-advanced sur les
   cartes de la liste, pas seulement sur la page détail. --- */
#icagenda .ic-registration-box {
  /* Bouton "Annuler" de la box d'inscription (événement / registre déjà
       réservé) - même traitement que le "Annuler" de la page de paiement
       (.com-icagenda-registration__actions-buttons .btn-danger plus bas) :
       même forme que .btn-success ci-dessus, palette d'alerte plutôt que le
       rouge Bootstrap brut, pour que les deux boutons "Annuler" du site se
       ressemblent. */
  /* Bouton désactivé affichant juste la date limite : pas une vraie
       action, donc traité en discret plutôt qu'en bouton coloré. */
}
#icagenda .ic-registration-box .btn-group-vertical {
  gap: 8px;
}
#icagenda .ic-registration-box .btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  background-color: #C6A969 !important;
  border-color: #C6A969 !important;
  color: #ffffff !important;
  border-radius: 18px;
  padding: 0.65rem 1.25rem;
  transition: 0.3s ease;
}
#icagenda .ic-registration-box .btn-success .iCicon {
  margin-right: 6px;
}
#icagenda .ic-registration-box .btn-success:hover {
  background-color: #A08244 !important;
  border-color: #A08244 !important;
  color: #ffffff !important;
}
#icagenda .ic-registration-box .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  background-color: #FFFFFF !important;
  border-color: #9E3838 !important;
  color: #9E3838 !important;
  border-radius: 18px;
  padding: 0.65rem 1.25rem;
  transition: 0.3s ease;
}
#icagenda .ic-registration-box .btn-danger .icon-cancel, #icagenda .ic-registration-box .btn-danger i {
  margin-right: 6px;
}
#icagenda .ic-registration-box .btn-danger:hover {
  background-color: #9E3838 !important;
  color: #ffffff !important;
}
#icagenda .ic-registration-box .btn-outline-success {
  font-family: "Nunito", sans-serif;
  background-color: transparent !important;
  border-color: #C5AE91 !important;
  color: #52637A !important;
  border-radius: 18px;
  opacity: 1 !important;
}
#icagenda .ic-registration-box .btn-outline-success.disabled {
  cursor: default;
}
/* ==========================================================================
   VUE "INSCRIPTION À UN ÉVÉNEMENT" (#icagenda.ic-registration-view)
   ==========================================================================
   Formulaire Joomla natif (control-group/controls) : rendu brut par défaut,
   d'où le fond gris-lavande des champs en lecture seule et les cases à
   cocher/select non stylés.
   ========================================================================== */
#icagenda.ic-registration-view {
  /* --- Carte englobante : sans ça, la page s'étale sur toute la largeur
       du conteneur Joomla (pas de contrainte côté composant) - le bandeau
       événement (.ic-reg-box, déjà en pleine largeur) tranchait avec les
       champs du formulaire, plafonnés à 420px et collés à gauche, ce qui
       laissait un grand vide à droite. Même traitement "carte centrée" que
       les formulaires CB (login/register/profil) pour que bandeau et
       champs s'alignent dans un seul cadre cohérent. */
  max-width: 760px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #FFFFFF;
  font-family: "Nunito", sans-serif;
  color: #1A2B42;
  /* --- Bandeau événement en en-tête --- */
  /* --- Titre du formulaire --- */
  /* --- Sections (Vos informations / Consentement / Conditions) --- */
  /* --- Champs du formulaire --- */
  /* Champs en lecture seule (Nom, Email pré-remplis) : distincts d'un
       champ modifiable, mais toujours dans la charte plutôt qu'un gris
       Bootstrap par défaut. */
  /* --- Cases à cocher (consentements) --- */
  /* --- Boutons de validation --- */
  /* "Annuler" : lien simple à l'origine -> bouton fantôme, pour ne plus
       avoir l'air d'un texte perdu à côté d'un vrai bouton. */
}
@media (max-width: 576px) {
  #icagenda.ic-registration-view {
    margin: 1rem auto;
    padding: 1.25rem;
  }
}
#icagenda.ic-registration-view .ic-reg-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem 1.25rem;
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  margin-bottom: 1.5rem;
}
#icagenda.ic-registration-view .ic-reg-cat {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #A08244;
}
#icagenda.ic-registration-view .ic-reg-event-title a {
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: #1A2B42;
  text-decoration: none;
}
#icagenda.ic-registration-view .ic-reg-event-title a:hover {
  color: #A08244;
}
#icagenda.ic-registration-view .ic-form-title h1 {
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  color: #C6A969;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
#icagenda.ic-registration-view .ic-required-info {
  color: #52637A;
  margin-bottom: 1.5rem;
}
#icagenda.ic-registration-view fieldset {
  border: none;
  padding: 0;
  margin: 0 0 2rem 0;
}
#icagenda.ic-registration-view legend {
  width: auto;
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  color: #1A2B42;
  font-size: 1.3rem;
  border-bottom: 2px solid #C5AE91;
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}
#icagenda.ic-registration-view .control-group {
  margin-bottom: 1.25rem;
}
#icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  color: #1A2B42;
  margin-bottom: 0.35rem;
  display: inline-block;
}
#icagenda.ic-registration-view .control-label label .star, #icagenda.ic-registration-view .control-label > div .star {
  color: #9E3838;
}
#icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select {
  max-width: 420px;
}
#icagenda.ic-registration-view .form-select {
  display: flex;
  align-items: center;
}
#icagenda.ic-registration-view .form-control[readonly] {
  background-color: #F7F4EB;
  border-color: #F1ECE6;
  color: #52637A;
  cursor: default;
}
#icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label {
  color: #1A2B42;
}
#icagenda.ic-registration-view .form-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 0.5rem;
}
#icagenda.ic-registration-view .form-check-input {
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.15em;
  accent-color: #C6A969;
  cursor: pointer;
  flex-shrink: 0;
}
#icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text {
  color: #1A2B42;
  cursor: pointer;
}
#icagenda.ic-registration-view .form-text {
  color: #52637A;
  display: block;
  margin-top: 0.4rem;
}
#icagenda.ic-registration-view #submit {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
#icagenda.ic-registration-view .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  background-color: #C6A969 !important;
  border-color: #C6A969 !important;
  color: #ffffff !important;
  border-radius: 18px;
  padding: 0.65rem 1.5rem;
  transition: 0.3s ease;
}
#icagenda.ic-registration-view .btn-primary:hover {
  background-color: #A08244 !important;
  border-color: #A08244 !important;
}
#icagenda.ic-registration-view a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  background-color: transparent;
  border: 1px solid #C5AE91;
  color: #52637A;
  border-radius: 18px;
  padding: 0.65rem 1.5rem;
  text-decoration: none;
  transition: 0.3s ease;
}
#icagenda.ic-registration-view a.btn:hover {
  background-color: #F1ECE6;
  border-color: #C6A969;
  color: #1A2B42;
}
/* ==========================================================================
   VUE "INSCRIPTION CONFIRMÉE" (#icagenda.ic-registration-complete)
   ==========================================================================
   Page de retour (Stripe ou inscription gratuite) : boutons "Page d'accueil"
   / "Voir l'évènement", jusqu'ici en bleu/vert Bootstrap brut.
   ========================================================================== */
#icagenda.ic-registration-complete .ic-registration-complete-buttons {
  margin-top: 1rem;
  /* "Page d'accueil" : action secondaire, même traitement discret que
           "Précédent" sur la page de paiement. */
  /* "Voir l'évènement" : action principale de la page, même traitement
           doré que "S'inscrire". */
}
#icagenda.ic-registration-complete .ic-registration-complete-buttons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 18px;
  padding: 0.65rem 1.25rem;
  text-decoration: none;
  transition: 0.3s ease;
  border: 1px solid transparent;
}
#icagenda.ic-registration-complete .ic-registration-complete-buttons .btn i {
  margin-right: 6px;
}
#icagenda.ic-registration-complete .ic-registration-complete-buttons .btn-info {
  background-color: #F1ECE6 !important;
  border-color: #C5AE91 !important;
  color: #1A2B42 !important;
}
#icagenda.ic-registration-complete .ic-registration-complete-buttons .btn-info .icon-white, #icagenda.ic-registration-complete .ic-registration-complete-buttons .btn-info i {
  color: #1A2B42 !important;
  filter: brightness(0) saturate(100%);
}
#icagenda.ic-registration-complete .ic-registration-complete-buttons .btn-info:hover {
  background-color: #E0C69F !important;
  border-color: #C6A969 !important;
}
#icagenda.ic-registration-complete .ic-registration-complete-buttons .btn-success {
  background-color: #C6A969 !important;
  border-color: #C6A969 !important;
  color: #ffffff !important;
}
#icagenda.ic-registration-complete .ic-registration-complete-buttons .btn-success .icon-white, #icagenda.ic-registration-complete .ic-registration-complete-buttons .btn-success i {
  color: #ffffff !important;
}
#icagenda.ic-registration-complete .ic-registration-complete-buttons .btn-success:hover {
  background-color: #A08244 !important;
  border-color: #A08244 !important;
}
/* ==========================================================================
   VUE "PAIEMENT" (#icagenda.ic-actions-view)
   ==========================================================================
   Le PayPal est embarqué dans un iframe cross-origin : impossible et non
   souhaitable de le styler depuis ce fichier (restriction de sécurité du
   navigateur). Le reste (résumé de commande, boutons, message d'info) est
   couvert ici.
   ========================================================================== */
#icagenda.ic-actions-view {
  font-family: "Nunito", sans-serif;
  color: #1A2B42;
  /* --- Message d'information sur le paiement --- */
  /* --- Bloc résumé de commande (garde les classes utilitaires d'iCagenda
       ic-box-white/ic-rounded-4/ic-border-lightgrey, on recolore juste) --- */
  /* --- Conteneur du bouton de paiement (PayPal à l'origine, réutilisé
       par Stripe) : cadre cohérent autour.
       Première tentative ratée : centrer le contenu dans une boîte étirée
       (height:100%) ne fait que déplacer le vide (haut+bas au lieu de juste
       en bas) - le vrai souci est que .ic-flex-container (défini en inline
       dans plugins/icagenda/tickets/layouts/payment.php, hors de portée)
       étire les deux colonnes à la même hauteur (align-items: stretch par
       défaut sur un flex container), alors que le contenu du bouton Stripe
       est bien plus court qu'un iframe PayPal. On désactive cet étirement
       pour que la boîte épouse simplement la hauteur de son propre contenu. */
  /* --- Boutons "Précédent" / "Annuler" --- */
}
#icagenda.ic-actions-view h1 {
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  color: #C6A969;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}
#icagenda.ic-actions-view .alert-info {
  font-family: "Nunito", sans-serif;
  background-color: #F7F4EB;
  border: 1px solid #C5AE91;
  border-left: 4px solid #527282;
  border-radius: 18px;
  color: #1A2B42;
  padding: 0.9rem 1.2rem;
  margin-bottom: 1.5rem;
}
#icagenda.ic-actions-view .ic-flex-item-inner {
  background-color: #F7F4EB !important;
  border: 1px solid #671d2f !important;
  border-radius: 18px !important;
}
#icagenda.ic-actions-view .ic-div-table-caption {
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  color: #1A2B42;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1rem;
  border-bottom: 1px solid #C5AE91 !important;
  padding-bottom: 0.5rem;
}
#icagenda.ic-actions-view .ic-div-table-row {
  border-bottom: 1px dashed #F1ECE6;
}
#icagenda.ic-actions-view .ic-div-table-row:last-child {
  border-bottom: none;
}
#icagenda.ic-actions-view .ic-div-table-cell {
  color: #1A2B42;
}
#icagenda.ic-actions-view .ic-div-table-row:last-child .ic-div-table-cell {
  font-weight: 700;
  color: #A08244;
  font-size: 1.1rem;
}
#icagenda.ic-actions-view .ic-flex-container {
  align-items: flex-start !important;
}
#icagenda.ic-actions-view .ic-payment-container {
  background-color: #FFFFFF;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#icagenda.ic-actions-view .ic-stripe-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#icagenda.ic-actions-view .ic-stripe-button-subtext {
  margin-top: 0.6rem;
  color: #52637A;
  font-family: "Nunito", sans-serif;
}
#icagenda.ic-actions-view .com-icagenda-registration__actions-buttons {
  margin-top: 1.5rem;
  /* "Annuler" reste dans une tonalité d'alerte (action destructive :
           abandonne l'inscription), mais en accord avec la palette plutôt
           que le rouge Bootstrap brut. */
}
#icagenda.ic-actions-view .com-icagenda-registration__actions-buttons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 18px;
  padding: 0.6rem 1.25rem;
  text-decoration: none;
  transition: 0.3s ease;
  border: 1px solid transparent;
  margin-right: 0.75rem;
}
#icagenda.ic-actions-view .com-icagenda-registration__actions-buttons .btn i {
  margin-right: 6px;
}
#icagenda.ic-actions-view .com-icagenda-registration__actions-buttons .btn-info {
  background-color: #F1ECE6 !important;
  border-color: #C5AE91 !important;
  color: #1A2B42 !important;
}
#icagenda.ic-actions-view .com-icagenda-registration__actions-buttons .btn-info .icon-white, #icagenda.ic-actions-view .com-icagenda-registration__actions-buttons .btn-info i {
  color: #1A2B42 !important;
  /* Filet de sécurité si l'icône est une image plutôt qu'une
                   police d'icônes (le color: seul ne suffirait pas alors). */
  filter: brightness(0) saturate(100%);
}
#icagenda.ic-actions-view .com-icagenda-registration__actions-buttons .btn-info:hover {
  background-color: #E0C69F !important;
  border-color: #C6A969 !important;
}
#icagenda.ic-actions-view .com-icagenda-registration__actions-buttons .btn-danger {
  background-color: #FFFFFF !important;
  border-color: #9E3838 !important;
  color: #9E3838 !important;
}
#icagenda.ic-actions-view .com-icagenda-registration__actions-buttons .btn-danger:hover {
  background-color: #9E3838 !important;
  color: #ffffff !important;
}
/* --- Page "Authentification requise" (accès au formulaire d'inscription
   sans être connecté) : les boutons "Retour" / "Page d'accueil" sont générés
   en dur par iCagenda (components/com_icagenda/src/View/Registration/HtmlView.php)
   dans le message système Joomla (#system-message-container), donc ils
   gardent le rouge/bleu Bootstrap par défaut tant qu'on ne les recolore pas
   ici. --- */
#system-message-container .alert .btn {
  border-radius: 18px;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  transition: 0.3s ease;
}
#system-message-container .btn-danger {
  background-color: #FFFFFF;
  border-color: #9E3838;
  color: #9E3838;
}
#system-message-container .btn-danger:hover {
  background-color: #9E3838;
  border-color: #9E3838;
  color: #ffffff;
}
#system-message-container .btn-info {
  background-color: #C6A969;
  border-color: #C6A969;
  color: #ffffff;
}
#system-message-container .btn-info:hover, #system-message-container .btn-info:focus {
  background-color: #A08244;
  border-color: #A08244;
  color: #ffffff;
}
/* ========================================================================
   COMPOSANTS ÉDITORIAUX JCE (VERSION OCRE DORÉ & BLEU ENCRE)
   ======================================================================== */
/* 1. Chargement impératif de votre nouveau fichier de variables */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* 2. Box-sizing cohérent : sans ça, le padding des .wXX s'ADDITIONNE à la
   largeur (100% + padding) au lieu d'être inclus dedans, ce qui fait
   déborder les colonnes et tout ce qu'elles contiennent (boutons compris). */
*, *::before, *::after {
  box-sizing: border-box;
}
/* --- Typographie & Couleurs de texte --- */
/* --- Sections & Arrière-plans --- */
.bg-primary {
  background-color: #faf7f3;
  color: #1A2B42;
}
.bg-secondary {
  background-color: #F1ECE6;
  color: #1A2B42;
}
/* --- Grilles & Largeurs utilitaires --- */
.media, .media-row-container, .media-noborder {
  display: flex;
  align-items: flex-start;
  margin: 2rem 0;
  /* Les boutons "float-right" (ex: CTA en fin de texte) collés au bord
     droit deviennent illisibles/asymétriques une fois la colonne empilée
     en mobile : on les repasse en pleine largeur, centrés. */
}
@media (max-width: 768px) {
  .media, .media-row-container, .media-noborder {
    flex-direction: column;
    gap: 1.5rem;
  }
}
@media (max-width: 768px) {
  .media .float-right, .media-row-container .float-right, .media-noborder .float-right {
    float: none;
    display: block;
    width: 100%;
    text-align: center;
  }
}
/* Dans une grille de cartes (.media-row-container), le padding des .wXX
   fait doublon avec celui de .card et écarte trop les colonnes.
   On le neutralise uniquement dans ce contexte-là. */
.media-row-container > .w25, .media-row-container > .w33, .media-row-container > .w50, .media-row-container > .w66 {
  padding: 0;
}
.w20, .w25, .w30, .w33, .w40, .w45, .w50, .w55, .w60, .w66, .w70, .w75, .w80, .w100 {
  width: 100%;
  padding: 2%;
}
/* La vraie cause du débordement du gabarit ligne-2-colonnes (constaté avec
   .w33 + .w66 dans .media-noborder) : .media-noborder ne wrap pas
   (flex-wrap: nowrap par défaut), et chaque colonne cumule DEUX classes -
   .wXX (qui fixe sa largeur en % via flex-basis) ET .media (qui lui ajoute
   sa propre marge horizontale de 0.8rem de chaque côté, cf. custom.scss).
   Cette marge s'ajoute PAR-DESSUS le %, elle n'est jamais soustraite du
   budget de largeur de la ligne - et comme .wXX a flex-shrink:0, rien ne
   peut se rétracter pour compenser. Avec .w33 (33.333%) + .w66 (66.666%),
   ça fait ~100% de largeur + 4 x 0.8rem de marge (2 colonnes x 2 côtés) =
   la ligne déborde de ~3.2rem, quel que soit le contenu des colonnes.
   Le calc() ci-dessous soustrait cette marge (1.6rem = 0.8rem x 2 côtés)
   du flex-basis de chaque colonne, pour que largeur + marge retombent
   exactement sur 100% de la ligne. Sans effet si un .wXX est utilisé sans
   la classe .media (juste un tout petit espace en moins, jamais de
   débordement). */
.w20 {
  flex: 0 0 calc(20% - 1.6rem);
}
.w25 {
  flex: 0 0 calc(25% - 1.6rem);
}
.w30 {
  flex: 0 0 calc(30% - 1.6rem);
}
.w33 {
  flex: 0 0 calc(33.333% - 1.6rem);
}
.w40 {
  flex: 0 0 calc(40% - 1.6rem);
}
.w45 {
  flex: 0 0 calc(45% - 1.6rem);
}
.w50 {
  flex: 0 0 calc(50% - 1.6rem);
}
.w55 {
  flex: 0 0 calc(55% - 1.6rem);
}
.w60 {
  flex: 0 0 calc(60% - 1.6rem);
}
.w66 {
  flex: 0 0 calc(66.666% - 1.6rem);
}
.w70 {
  flex: 0 0 calc(70% - 1.6rem);
}
.w75 {
  flex: 0 0 calc(75% - 1.6rem);
}
.w80 {
  flex: 0 0 calc(80% - 1.6rem);
}
.w100 {
  flex: 0 0 calc(100% - 1.6rem);
}
/* --- Media, Blocs & Cartes --- */
.img-fluid {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.round {
  border-radius: 18px;
}
.circle {
  border-radius: 50%;
}
.shadow {
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
}
.shadow-lg {
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
}
.border {
  border: 1px solid #671d2f;
}
/* Vos cartes éditoriales s'harmonisent avec les cartes Joomlead */
.card {
  padding: 1.5rem;
}
.callout {
  margin: 2rem 0;
  padding: 1.5rem;
  background: #F7F4EB;
  border-left: 5px solid #C6A969;
  border-radius: 18px;
}
.quote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 4px solid #C6A969;
  font-style: italic;
  color: #52637A;
}
/* --- Boutons & Icônes Éditoriaux --- */
/* Correctif : le thème JL applique white-space: nowrap (et parfois une
   largeur figée) sur .jl-button. Dès que le bouton est contraint (ex:
   float-right dans une colonne .w55), le texte ne peut ni se replier ni
   pousser la boîte, donc il déborde. On force un retour à la ligne normal
   partout où .jl-button est utilisé. */
.jl-button {
  white-space: normal;
  max-width: 100%;
  word-break: break-word;
}
.cta {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.8rem 1.5rem;
  background: #C6A969;
  color: #ffffff !important;
  text-decoration: none;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  border-radius: 18px;
  transition: 0.3s ease;
}
.cta:hover {
  background: #A08244;
  color: #ffffff !important;
  transform: translateY(-2px);
}
.icon {
  color: #C6A969;
  margin-right: 0.4rem;
}
/* --- Alignements & Spacements --- */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.mt0 {
  margin-top: 0;
}
.mt1 {
  margin-top: 1rem;
}
.mt2 {
  margin-top: 2rem;
}
.mt3 {
  margin-top: 3rem;
}
.mb0 {
  margin-bottom: 0;
}
.mb1 {
  margin-bottom: 1rem;
}
.mb2 {
  margin-bottom: 2rem;
}
.mb3 {
  margin-bottom: 3rem;
}
/* ==========================================================================
   SECTIONS & BLOCS SOMBRE - RÉADAPTATION SANS SCRIPT DARK
   ========================================================================== */
/* Conversion du Bordeaux vers votre Bleu Encre Profond ($text)
   Idéal pour créer une belle section contrastée de temps en temps dans JCE */
.section-custom-bg, .bg-bleu-encre, .section-dark {
  padding: 2.5rem;
  border-radius: 18px;
  background-color: #671d2f;
  /*$text !important; // Fond Bleu Encre Profond*/
  color: #faf7f3 !important;
  /* Les titres ressortent en Ocre Doré de l'étoile */
  /* Liens dans la section sombre */
  /* Cartes imbriquées dans la section sombre */
  /* Bouton CTA adapté au fond sombre */
  /* Citations */
}
.section-custom-bg h1, .section-custom-bg h2, .section-custom-bg .cb-user-welcome span, .cb-user-welcome .section-custom-bg span, .section-custom-bg h3, .section-custom-bg h4, .section-custom-bg h5, .section-custom-bg h6, .bg-bleu-encre h1, .bg-bleu-encre h2, .bg-bleu-encre .cb-user-welcome span, .cb-user-welcome .bg-bleu-encre span, .bg-bleu-encre h3, .bg-bleu-encre h4, .bg-bleu-encre h5, .bg-bleu-encre h6, .section-dark h1, .section-dark h2, .section-dark .cb-user-welcome span, .cb-user-welcome .section-dark span, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6 {
  color: #C6A969 !important;
}
.section-custom-bg p, .bg-bleu-encre p, .section-dark p {
  color: #faf7f3;
}
.section-custom-bg small, .section-custom-bg .text-muted, .bg-bleu-encre small, .bg-bleu-encre .text-muted, .section-dark small, .section-dark .text-muted {
  color: #E0C69F;
}
.section-custom-bg a, .bg-bleu-encre a, .section-dark a {
  color: #E0C69F;
}
.section-custom-bg a:hover, .bg-bleu-encre a:hover, .section-dark a:hover {
  color: #ffffff;
}
.section-custom-bg .card, .section-custom-bg .callout, .bg-bleu-encre .card, .bg-bleu-encre .callout, .section-dark .card, .section-dark .callout {
  background-color: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
.section-custom-bg .cta, .section-custom-bg .btn-primary, .bg-bleu-encre .cta, .bg-bleu-encre .btn-primary, .section-dark .cta, .section-dark .btn-primary {
  background-color: #C6A969;
  color: #1A2B42 !important;
  font-weight: 700;
}
.section-custom-bg .cta:hover, .section-custom-bg .btn-primary:hover, .bg-bleu-encre .cta:hover, .bg-bleu-encre .btn-primary:hover, .section-dark .cta:hover, .section-dark .btn-primary:hover {
  background-color: #ffffff;
  color: #1A2B42 !important;
}
.section-custom-bg .quote, .bg-bleu-encre .quote, .section-dark .quote {
  border-left-color: #C6A969;
  color: #E0C69F;
}
.section-custom-bg {
  background-color: #671d2f;
}
/* ==========================================================================
   PAGE "NOTRE HISTOIRE" — REDESIGN EN FRISE CHRONOLOGIQUE
   --------------------------------------------------------------------------
   Remplace la grille de 4 cartes identiques (issues de vos articles Joomla
   assemblés via "Articles Anywhere") par une frise narrative : chapitres
   numérotés, alternés gauche/droite, reliés par un fil, avec un bandeau
   "manifeste" pour la citation finale et une carte fondatrice dédiée.

   INTÉGRATION : chaque "chapitre" correspond à un de vos articles existants.
   Il suffit d'entourer le contenu HTML de chaque article (dans l'éditeur
   Joomla) avec les balises .olh-timeline-item / .olh-timeline-marker /
   .olh-timeline-content ci-dessous — voir histoire-preview.html fourni à
   côté pour la structure complète, avec le texte réel de votre page.

   Alterne .olh-timeline-item et .olh-timeline-item.olh-timeline-item--reverse
   à la main d'un chapitre à l'autre (1 sans, 2 avec, 3 sans, 4 avec...).

   VERSION "ARTICLES ANYWHERE" : si vous injectez le contenu réel de vos
   articles (via {article XX} ou équivalent) dans .olh-timeline-content au
   lieu de retaper le texte à la main, cette feuille cible aussi les balises
   telles que Joomla les génère nativement (h5, ul.umalh-icon-list) — pas
   besoin de retoucher le HTML interne de vos articles existants. Voir
   histoire-article-template.html fourni à côté pour le squelette prêt à
   coller dans un article, avec les emplacements Articles Anywhere marqués.
   ========================================================================== */
/* Largeur max des blocs (hero, frise, bandeau manifeste, carte fondatrice).
   Plafonnée à 1200px et non fluide, DÉLIBÉRÉMENT : sur la frise en
   alternance gauche/droite, chaque carte reste bornée par sa largeur de
   lecture confortable (~52 caractères/ligne) quelle que soit la largeur du
   bloc — donc plus ce bloc est large, plus la moitié "vide" de chaque
   ligne (le fil sans rien à côté) grandit en pixels, et plus l'effet
   "espace perdu" est visible. 1200px garde ce vide discret. Ajustez cette
   valeur ici si votre colonne de contenu réelle appelle un autre plafond —
   je n'ai pas d'accès direct à votre CSS pour la vérifier moi-même. */
/* --- Bandeau d'en-tête (remplace le slider photo actuel) --- */
.olh-histoire-hero {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  border-radius: 0 0 18px 18px;
  overflow: hidden;
  background-image: linear-gradient(to top, rgba(26, 20, 10, 0.72) 0%, rgba(26, 20, 10, 0.28) 45%, rgba(26, 20, 10, 0.1) 100%), linear-gradient(135deg, #8a6a3c 0%, #C6A969 45%, #E0C69F 100%);
  background-size: cover;
  /* Le dégradé ci-dessus est un repli : remplacez le second linear-gradient
       par votre photo réelle, ex. background-image: linear-gradient(...),
       url('/images/vie_association/notre_histoire/001_notre_histoire.png');
       background-size: cover; background-position: center;
       — le premier dégradé (sombre -> transparent) reste par-dessus pour
       garantir la lisibilité du texte quelle que soit la photo choisie. */
  background-position: center;
  margin-bottom: 3rem;
}
.olh-histoire-hero-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 3rem;
  width: 100%;
}
.olh-histoire-hero .eyebrow {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: #E0C69F;
  margin: 0 0 0.6rem 0;
}
.olh-histoire-hero h1 {
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  color: #ffffff;
  font-size: 2.6rem;
  line-height: 1.15;
  margin: 0 0 0.9rem 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  max-width: 720px;
}
.olh-histoire-hero p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 560px;
  margin: 0;
}
/* --- Chapô d'intro, centré, ton "Sniglet" --- */
.olh-histoire-chapo {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3.5rem auto;
  padding: 0 1.25rem;
}
.olh-histoire-chapo p {
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  color: #1A2B42;
  font-size: 1.35rem;
  line-height: 1.55;
  margin: 0;
}
.olh-histoire-chapo em {
  font-style: normal;
  color: #671d2f;
}
/* --- Frise chronologique --- */
.olh-timeline {
  position: relative;
  max-width: 100%;
  margin: 0 auto 3.5rem auto;
  padding: 0 1.25rem;
}
.olh-timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(27px + 1.25rem);
  /* calc() plutôt qu'une addition Sass : px + rem
            ne peut pas se résoudre à la compilation (rem dépend du root
            font-size, inconnu de Sass) — calc() reporte l'addition au
            navigateur, seule façon fiable de mélanger ces deux unités */
  width: 2px;
  background: linear-gradient(to bottom, #E0C69F, #671d2f 92%);
}
@media (min-width: 1200px) {
  .olh-timeline::before {
    left: 50%;
    transform: translateX(-1px);
  }
}
.olh-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.olh-timeline-item:last-child {
  margin-bottom: 0;
}
@media (min-width: 1200px) {
  .olh-timeline-item {
    grid-template-columns: 1fr 56px 1fr;
    align-items: start;
  }
  .olh-timeline-item .olh-timeline-marker {
    order: 2;
    justify-self: center;
  }
  .olh-timeline-item .olh-timeline-content {
    order: 3;
  }
  .olh-timeline-item .olh-timeline-spacer {
    order: 1;
    display: block;
  }
  .olh-timeline-item--reverse {
    /* Le texte reste aligné à gauche même côté "reverse" — un
               paragraphe multi-lignes aligné à droite est plus dur à lire
               (bord gauche en dents de scie). Seule la POSITION de la
               carte (colonne de gauche plutôt que de droite) change ;
               retiré après premier retour utilisateur sur du vrai texte. */
  }
  .olh-timeline-item--reverse .olh-timeline-content {
    order: 1;
  }
  .olh-timeline-item--reverse .olh-timeline-spacer {
    order: 3;
  }
}
/* --- Mobile portrait : la carte perdait beaucoup de largeur de lecture
   (colonne marqueur 56px + espace 1.25rem + marge extérieure 1.25rem de
   chaque côté + padding interne de la carte 2rem de chaque côté = plus de
   la moitié d'un écran de téléphone en portrait mangée avant même le
   texte), d'où le texte tassé en lignes très courtes signalé par
   l'utilisateur ("décalage vers la droite"). En dessous de
   $breakpoint-mobile, on repasse la grille de chaque chapitre en UNE seule
   colonne : le marqueur (rond) se retrouve au-dessus de sa carte au lieu
   d'à côté, et la carte peut alors utiliser (quasi) toute la largeur de
   l'écran. Le fil vertical (::before) est repositionné pour continuer à
   passer par le centre du marqueur, désormais plus petit et aligné à
   gauche plutôt qu'au milieu de la première colonne d'une grille à deux
   colonnes. */
@media (max-width: 576px) {
  .olh-timeline {
    padding: 0 0.85rem;
  }
  .olh-timeline::before {
    left: calc(20px + 0.85rem);
  }
  .olh-timeline-item {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .olh-timeline-marker {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    justify-self: start;
  }
  .olh-timeline-content {
    padding: 1.25rem 1.25rem;
  }
}
/* --- Effet "chevauchement" optionnel : ajoutez .olh-timeline--overlap sur
   le conteneur .olh-timeline pour que chaque chapitre remonte au niveau du
   précédent, sur la colonne opposée (aucune collision HORIZONTALE possible
   entre deux cartes, puisqu'elles ne partagent jamais la même colonne).
   Uniquement appliqué au-delà de $breakpoint-desktop : en dessous, tout
   repasse en une colonne empilée et les cartes se toucheraient réellement.

   ATTENTION avec vos articles réels : ma démo utilisait un texte raccourci
   pour les chapitres 2 à 4. Avec vos 4 vrais articles (chacun ~4 paragraphes
   + une liste de 5 items, comme celui que vous m'avez collé), les cartes
   sont nettement plus hautes et de hauteur assez proche les unes des
   autres — la marge par défaut ci-dessous a donc été réduite à -1.5rem
   (repli prudent) plutôt que les -4rem/-7rem testés sur mon texte plus
   court, qui provoqueraient un vrai chevauchement VERTICAL (une carte qui
   recouvre le bas de la précédente) avec un contenu de cette longueur.
   Remontez cette valeur progressivement en prévisualisant avec le texte
   définitif de chaque chapitre, jamais sur la seule base de la démo. */
@media (min-width: 1200px) {
  .olh-timeline--overlap .olh-timeline-item:not(:first-child) {
    margin-top: var(--overlap, -1.5rem);
  }
}
/* Toujours présent dans le HTML (même vide) sur chaque .olh-timeline-item,
   qu'il soit inversé ou non : sans lui, la grille à 3 colonnes du bureau
   se casse et le texte se retrouve compressé dans la colonne du marqueur. */
.olh-timeline-spacer {
  display: none;
}
.olh-timeline-marker {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(to bottom right, #ffffff, #E0C69F);
  border: 3px solid #ffffff;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04), 0 0 0 2px #671d2f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #671d2f;
  flex-shrink: 0;
  z-index: 3;
}
.olh-timeline-content {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  padding: 1.75rem 2rem;
  transition: 0.3s ease;
  /* h3 si vous retapez le titre à la main, h4/h5 si c'est le titre natif
       de l'article injecté par Articles Anywhere (vos articles utilisent h5) */
  /* Les span.citation-more de vos articles (mise en avant du nom de
       l'association) restent inchangés — cette règle ne les concerne pas,
       elle cible seulement les strong.accent que vous ajouteriez à la main. */
  /* Largeur de lecture confortable même sur les blocs Articles Anywhere
       (.media, .w100...) qui n'ont pas de max-width par défaut */
}
.olh-timeline-content:hover {
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  transform: translateY(-2px);
}
.olh-timeline-content h3, .olh-timeline-content h4, .olh-timeline-content h5 {
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  color: #1A2B42;
  font-size: 1.3rem;
  margin: 0 0 0.75rem 0;
  line-height: 1.3;
}
.olh-timeline-content p {
  color: #52637A;
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: 52ch;
  margin: 0 0 0.85rem 0;
}
.olh-timeline-content p:last-child {
  margin-bottom: 0;
}
.olh-timeline-content strong.accent {
  color: #671d2f;
  font-weight: 700;
}
.olh-timeline-content .media, .olh-timeline-content .w100 {
  max-width: 100%;
}
.olh-timeline-step {
  display: inline-block;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: #A08244;
  margin: 0 0 0.4rem 0;
}
/* Remplace les puces "main pointée" (umalh-icon-list, la classe native de
   vos articles) par une petite étoile pleine, plus sobre et cohérente avec
   le reste du site — s'applique aussi bien à .olh-timeline-list (si vous
   retapez une liste à la main) qu'à .umalh-icon-list injectée telle quelle
   depuis un article via Articles Anywhere. */
.olh-timeline-list, .olh-timeline-content .umalh-icon-list {
  list-style: none;
  margin: 0 0 0.85rem 0;
  padding: 0;
  max-width: 52ch;
}
.olh-timeline-list li, .olh-timeline-content .umalh-icon-list li {
  position: relative;
  padding-left: 1.5rem;
  color: #52637A;
  font-size: 0.96rem;
  line-height: 1.55;
  margin-bottom: 0.5rem;
}
.olh-timeline-list li::before, .olh-timeline-content .umalh-icon-list li::before {
  content: "";
  /* fa-star */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.15em;
  color: #C6A969;
  font-size: 0.7rem;
}
.olh-timeline-list li:last-child, .olh-timeline-content .umalh-icon-list li:last-child {
  margin-bottom: 0;
}
/* Si la puce "main pointée" d'origine persiste malgré cette règle, c'est que
   votre umalh-icon-list la pose via une image de fond ou un ::before propre
   chargé après le nôtre — ajoutez alors !important sur le bloc &::before
   ci-dessus (content, et au besoin background/list-style-image: none). */
/* --- Bandeau "manifeste" (citation finale mise en scène) --- */
.olh-manifesto-band {
  position: relative;
  text-align: center;
  border-radius: 18px;
  overflow: hidden;
  padding: 3.5rem 2rem;
  margin: 0 auto 3.5rem auto;
  max-width: 100%;
  background-image: linear-gradient(135deg, #671d2f 0%, #371019 100%);
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
}
.olh-manifesto-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 20%, rgba(198, 169, 105, 0.18), transparent 45%), radial-gradient(circle at 80% 80%, rgba(198, 169, 105, 0.15), transparent 45%);
}
.olh-manifesto-band p {
  position: relative;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto 0.5rem auto;
}
.olh-manifesto-band h2, .olh-manifesto-band .cb-user-welcome span, .cb-user-welcome .olh-manifesto-band span {
  position: relative;
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  color: #ffffff;
  font-size: 2rem;
  line-height: 1.35;
  max-width: 680px;
  margin: 1.5rem auto 0 auto;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.olh-manifesto-band h2 .highlight, .olh-manifesto-band .cb-user-welcome span .highlight, .cb-user-welcome .olh-manifesto-band span .highlight {
  color: #E0C69F;
}
/* --- Carte "Le mot de la fondatrice" ---
   .olh-founder-card est volontairement une simple coque (fond, bordure,
   ombre, arrondi) SANS grille imposée : votre article fondatrice actuel a
   déjà sa propre mise en page interne (photo + intro en deux colonnes,
   puis paragraphes pleine largeur, puis boutons + signature) — pas la
   peine de la casser. Entourez-le simplement de .olh-founder-card tel
   quel, voir histoire-article-template.html.

   .olh-founder-card--split est un MODIFICATEUR optionnel séparé, à
   utiliser seulement si vous reconstruisez cette section à la main avec
   exactement deux enfants directs (une image puis un bloc de texte) plutôt
   que d'y injecter l'article existant — c'est ce que fait la démo
   histoire-preview.html. */
.olh-founder-card {
  max-width: 100%;
  margin: 0 auto;
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  padding: 2.5rem;
}
.olh-founder-card--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 800px) {
  .olh-founder-card--split {
    grid-template-columns: 220px 1fr;
  }
}
.olh-founder-photo, .olh-founder-card img.img-fluid.round {
  /* Repli : si vous injectez l'article "fondatrice" tel quel via Articles
   Anywhere sans ajouter la classe .olh-founder-photo à la main, cette
   règle cible aussi la photo telle qu'elle est déjà balisée aujourd'hui
   (img.img-fluid.round) pour que le rendu rond + ombre s'applique sans
   retoucher l'article. */
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ffffff;
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  justify-self: center;
}
.olh-founder-quote {
  position: relative;
}
.olh-founder-quote .quote-mark--open {
  display: inline;
  font-family: "Sniglet", sans-serif;
  font-size: 2.5rem;
  line-height: 0;
  color: #E0C69F;
  vertical-align: -0.35em;
  margin-left: 0.15rem;
}
.olh-founder-quote .quote-mark--close {
  display: inline;
  font-family: "Sniglet", sans-serif;
  font-size: 2.5rem;
  line-height: 0;
  color: #E0C69F;
  vertical-align: -0.35em;
  margin-left: 0.15rem;
}
.olh-founder-quote h3 {
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  color: #1A2B42;
  font-size: 1.25rem;
  margin: 0 0 0.9rem 0;
}
.olh-founder-quote p {
  color: #52637A;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 0.9rem 0;
  max-width: 65ch;
}
.olh-founder-quote strong.accent {
  color: #671d2f;
  font-weight: 700;
}
.olh-founder-signature {
  margin-top: 1.25rem;
}
.olh-founder-signature .name {
  font-family: "Sniglet", sans-serif;
  color: #671d2f;
  font-size: 1.05rem;
  display: block;
}
.olh-founder-signature .role {
  color: #52637A;
  font-size: 0.85rem;
}
/* Les boutons CTA "pilule" (.olh-founder-ctas, utilisés notamment pour
   "Notre mission en détail" / "Devenir membre" dans l'article fondatrice)
   ont déménagé dans _cta-buttons.scss - ce composant est maintenant
   réutilisé ailleurs sur le site (module mod_assoc_payment, articles
   divers) et n'avait plus sa place dans un fichier "timeline". Voir
   _cta-buttons.scss pour le détail et le mode d'emploi .primary/.secondary. */
.olh-feature-item {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.olh-feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  border-color: #671d2f;
  border-width: 2px;
  background-image: linear-gradient(to bottom right, #ffffff, #E0C69F);
}
.olh-feature-item .el-title {
  position: relative;
  text-align: center;
  color: #A08244;
}
.olh-feature-item .el-title::before {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.3rem;
  line-height: 1;
  color: #ffffff;
  border: 3px solid #ffffff;
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  margin: -38px auto 0.9rem !important;
  position: relative;
  z-index: 2;
}
.olh-icon-familles .el-title::before {
  content: "";
  background: #671d2f;
}
.olh-icon-sensibilisation .el-title::before {
  content: "";
  background: #A08244;
}
.olh-icon-formation .el-title::before {
  content: "";
  background: #671d2f;
}
.olh-icon-inclusion .el-title::before {
  content: "";
  background: #A08244;
}
.olh-icon-valorisation .el-title::before {
  content: "";
  background: #671d2f;
}
.olh-icon-reseau .el-title::before {
  content: "";
  background: #A08244;
}
.tm-content {
  color: #1A2B42;
  text-align: center;
  padding: 0 1rem 0.5rem 1rem;
}
.tm-image {
  margin: auto;
}
/* ==========================================================================
   JOOMTESTIMONIALS (Cleaned)
   ========================================================================== */
#jb_template, .testimonialsContainer {
  width: 100%;
}
/* Grid — même moteur "mobile-first" que le système de grilles de _cards.scss :
   repeat(N, minmax(0, Npx)) + centrage, plutôt que l'auto-fill précédent. */
.testiList {
  display: grid !important;
  gap: 2rem;
  justify-content: center !important;
  justify-items: center !important;
  margin: 0 !important;
  /* Base Mobile : 1 colonne, 340px max */
  grid-template-columns: repeat(1, minmax(0, 400px));
  /* Tablette (dès 768px) : 2 colonnes de 340px */
  /* Ordinateur (dès 1200px) : 3 colonnes de 340px */
}
@media (min-width: 768px) {
  .testiList {
    grid-template-columns: repeat(2, minmax(0, 400px));
  }
}
@media (min-width: 1200px) {
  .testiList {
    grid-template-columns: repeat(3, minmax(0, 400px));
  }
}
.testiList > div {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}
.testiList.row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}
/* Card */
.testiQuote {
  height: 100%;
}
.testiQuote a {
  transition: 0.3s ease;
}
.testiQuote a:hover {
  text-decoration: none;
}
.testi-item {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 253, 249, 0.95));
  border: 1px solid #671d2f;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  opacity: 0;
  transform: translateY(25px);
  animation: jtFade 0.8s ease forwards;
}
.testi-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
}
.testi-item:hover .testi-name {
  color: #E0C69F;
}
.testi-item:hover .testi-avatar {
  transform: scale(1.04);
}
.testi-item::before {
  content: "❝";
  position: absolute;
  top: 18px;
  right: 24px;
  font-size: 90px;
  color: rgba(197, 174, 145, 0.1);
  line-height: 1;
  pointer-events: none;
}
/* Header & Avatar */
.testi-information {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.testi-avatar {
  width: 84px !important;
  height: 84px !important;
  min-width: 84px;
  border-radius: 50%;
  border: 3px solid #C5AE91;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 8px 20px rgba(197, 174, 145, 0.2);
  transition: transform 0.35s ease;
}
.testi-information2 {
  flex: 1;
}
.testi-name {
  color: #C6A969;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  transition: color 0.35s ease;
}
.testi-position {
  margin-top: 0.3rem;
  color: #52637A;
  font-size: 0.92rem;
}
.jt-item-category {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0.25rem 0.8rem;
  border-radius: 30px;
  background: #F1ECE6;
  color: #C6A969;
  font-size: 0.75rem;
  font-weight: 600;
}
/* Content & Date */
.testi-vote {
  margin-top: 0.5rem;
}
.joomstar {
  transform: scale(0.9);
}
.testi-quote-box, .testimonialText, .testiNoLimiter {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.testi-quote-box, .testimonialText, .testiNoLimiter {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.testi-quote-box::before, .testi-quote-box::after, .testimonialText::before, .testimonialText::after, .testiNoLimiter::before, .testiNoLimiter::after {
  display: none !important;
}
.testiNoLimiter p {
  margin: 0;
  color: #1A2B42;
  line-height: 1.9;
  font-size: 1rem;
  font-style: italic;
}
.testi-date {
  margin-top: 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(197, 174, 145, 0.15);
  color: #52637A;
}
.testi-date small {
  font-size: 0.85rem;
}
.jtCustomFields {
  margin-top: 1rem;
}
.testiEdit {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 5;
}
.testiEdit .btn {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 0;
}
/* Animations stagger */
.testiList > div:nth-child(2) .testi-item {
  animation-delay: 0.08s;
}
.testiList > div:nth-child(3) .testi-item {
  animation-delay: 0.16s;
}
.testiList > div:nth-child(4) .testi-item {
  animation-delay: 0.24s;
}
@keyframes jtFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Responsive : ajustements fins (la grille elle-même est gérée mobile-first
   plus haut, dans .testiList) */
@media (max-width: 768px) {
  .testiList {
    gap: 1.5rem;
  }
  .testi-item {
    padding: 1.6rem;
  }
  .testi-avatar {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px;
  }
  .testi-name {
    font-size: 1.05rem;
  }
}
/* ==========================================================================
   EN-TÊTE DE LA LISTE (titre + bouton déclencheur de la modale)
   ========================================================================== */
.jtHeader .page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.jtHeader .page-header h1 {
  order: -1;
  margin: 0;
}
.jtModal.btn-success {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  background: #C6A969;
  border: none;
  border-radius: 18px;
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
.jtModal.btn-success:hover {
  background: #A08244;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
}
/* ==========================================================================
   MODALE "SOUMETTRE UN TÉMOIGNAGE" (joomla-dialog natif)
   Le formulaire lui-même est chargé dans un <iframe> (autre document, non
   stylable depuis ici) : on habille seulement le contour de la boîte de
   dialogue (header, coins, bouton fermer).
   ========================================================================== */
joomla-dialog dialog {
  border: none;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  overflow: hidden;
  padding: 0;
}
.joomla-dialog-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.joomla-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.6rem;
  background: #F7F4EB;
  border-bottom: 1px solid rgba(197, 174, 145, 0.25);
}
.joomla-dialog-header h3 {
  margin: 0;
  font-family: "Sniglet", sans-serif;
  color: #C6A969;
  font-size: 1.3rem;
}
.joomla-dialog-header .button-close {
  border: none;
  opacity: 0.55;
  transition: 0.3s ease;
}
.joomla-dialog-header .button-close:hover {
  opacity: 1;
}
.joomla-dialog-body {
  flex: 1;
  padding: 0;
}
.joomla-dialog-body .iframe-content {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}
.joomla-dialog-footer.empty {
  display: none;
}
/* ==========================================================================
   KUNENA + BLANK II PREMIUM
   ========================================================================== */
#kunena.layout {
  background: #faf7f3;
  color: #1A2B42;
  padding: 0 1.5rem;
}
@media (max-width: 768px) {
  #kunena.layout {
    padding: 0 1rem;
  }
}
/* Cartes */
#kunena .category, #kunena .message {
  overflow: hidden;
  margin-bottom: 30px;
}
/* Bandeau catégorie */
#kunena .category-header {
  background: linear-gradient(135deg, #C6A969, #E0C69F);
  color: #ffffff;
  padding: 18px 24px;
  font-weight: 600;
}
/* Lignes */
#kunena table tbody tr {
  transition: 0.3s ease;
}
#kunena table tbody tr:hover {
  background: #FFF8EE;
}
/* Liens */
#kunena a {
  color: #C6A969;
  font-weight: 500;
}
#kunena a:hover {
  color: #E0C69F;
}
/* Boutons */
#kunena .btn, #kunena button {
  background: #C6A969;
  color: #ffffff;
  border: none;
  border-radius: calc(18px - 6px);
  transition: 0.3s ease;
}
#kunena .btn:hover, #kunena button:hover {
  background: #A08244;
  color: #ffffff;
  transform: translateY(-2px);
}
/* Barres d'actions (Réponse rapide / Action / Modération) : sans ces
   règles, .btn-toolbar et .btn-group n'ont aucun espacement (le CSS de
   groupement Bootstrap n'est pas chargé), d'où l'effet "collé". */
#kunena .btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
#kunena .btn-group {
  display: inline-flex;
  gap: 0;
}
#kunena .btn-group .btn {
  border-radius: 0;
  transform: none !important;
}
#kunena .btn-group .btn:first-of-type {
  border-top-left-radius: calc(18px - 6px);
  border-bottom-left-radius: calc(18px - 6px);
}
#kunena .btn-group .btn:last-of-type {
  border-top-right-radius: calc(18px - 6px);
  border-bottom-right-radius: calc(18px - 6px);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
/* Sélecteur de catégorie en bas de sujet ("Un Monde à la Hauteur / Général")
   : le <select> n'a aucune largeur définie, le texte est donc tronqué. */
#jumpto .selector, #jumpto select {
  width: 100%;
}
/* Badges & Avatars */
#kunena .badge {
  background: #C5AE91;
  color: #ffffff;
  border-radius: 40px;
}
/* Zone d'upload de pièces jointes (réponse / nouveau sujet) : #kattach_form
   est un id unique généré par le composant, ciblé directement pour être sûr
   d'écraser .bg-info même si ce bloc n'est pas imbriqué sous #kunena */
#kattach_form .badge.bg-info {
  background: #C5AE91 !important;
  color: #ffffff !important;
  border-radius: 40px;
}
#kunena .profilebox img {
  border-radius: 50%;
  border: 4px solid #F1ECE6;
}
#kunena blockquote {
  background: #FFF8EE;
  border-left: 4px solid #C5AE91;
}
/* Formulaires */
#kunena input, #kunena textarea, #kunena select {
  border: 1px solid rgba(197, 174, 145, 0.25);
  border-radius: calc(18px - 8px);
  background: #ffffff;
}
#kunena input:focus, #kunena textarea:focus, #kunena select:focus {
  border-color: #C5AE91;
  box-shadow: 0 0 0 4px rgba(197, 174, 145, 0.15);
}
/* ==========================================================================
   GRILLE BOOTSTRAP MINIMALE (row / col-md-*)
   Kunena et Community Builder (cb-profile) génèrent du HTML avec les
   classes de grille Bootstrap standard, mais ce thème Gantry ne charge pas
   le CSS de grille Bootstrap globalement : ces classes n'ont donc aucun
   effet par défaut, d'où les colonnes désalignées avec des trous énormes.
   On la recrée ici, scopée à #kunena pour ne rien perturber ailleurs.
   ========================================================================== */
#kunena .container {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}
#kunena .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
#kunena [class*="col-"] {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
/* .col-N (sans préfixe) : actif à toutes les tailles */
#kunena .col-1 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}
#kunena .col-2 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}
#kunena .col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
#kunena .col-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}
#kunena .col-5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}
#kunena .col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
#kunena .col-7 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}
#kunena .col-8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}
#kunena .col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
#kunena .col-10 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}
#kunena .col-11 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}
#kunena .col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}
/* .col-md-N : actif à partir de la tablette, comme dans Bootstrap */
@media (min-width: 768px) {
  #kunena .col-md-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  #kunena .col-md-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  #kunena .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  #kunena .col-md-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  #kunena .col-md-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  #kunena .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  #kunena .col-md-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  #kunena .col-md-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  #kunena .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  #kunena .col-md-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  #kunena .col-md-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  #kunena .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* Pagination (Démarrer / Précédent / n / Suivant / Fin) — Bootstrap
   standard, la page active reste en bleu par défaut sans cette surcharge */
#kunena .pagination .page-link {
  border: 1px solid rgba(197, 174, 145, 0.3);
  border-radius: calc(18px - 8px);
  margin: 0 0.15rem;
  transition: 0.3s ease;
}
#kunena .pagination .page-link:hover {
  background: #F1ECE6;
  color: #A08244;
}
#kunena .pagination .page-item.active .page-link {
  background: #C6A969;
  border-color: #C6A969;
  color: #ffffff !important;
}
#kunena .pagination .page-item.disabled .page-link {
  color: #52637A;
  opacity: 0.6;
}
/* Import défensif : comme _j2commerce.scss, une particle custom peut être
   compilée isolément par l'admin Gantry dès qu'on la touche, en dehors de
   la chaîne custom.scss. On importe donc explicitement ce dont on a besoin
   plutôt que de compter sur le contexte global. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   COMPTEURS ANIMÉS — particle custom "Compteurs Animés Custom"
   Photo posée à plat + badge icône en cercle qui la chevauche, exactement
   la même technique que .olh-feature-item (_feature-box.scss) : champ
   Image et champ Icône sont ici indépendants (pas de conflit natif comme
   sur la particle JoomLead Feature Box), donc les deux peuvent être
   utilisés ensemble, séparément, ou aucun des deux.
   ========================================================================== */
/* Grille à largeur de colonne bornée et centrée, même principe que
   .olh-grid-1/2/3/4cards (_cards.scss) : sans ça, sur desktop, 2-3
   compteurs s'étirent pour occuper toute la largeur et deviennent
   disproportionnés. Nombre de colonnes choisi dans l'admin via le champ
   "Nombre de colonnes" -> classe .olh-counter-grid--cols-N. */
.olh-counter-grid {
  display: grid;
  gap: 2rem;
  width: 100%;
  margin: 2rem auto;
  justify-content: center;
  /* Base mobile, commune aux 3 variantes : 1 colonne */
  grid-template-columns: repeat(1, minmax(0, 260px));
}
@media (min-width: 768px) {
  .olh-counter-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 260px));
  }
}
@media (min-width: 768px) {
  .olh-counter-grid--cols-3 {
    grid-template-columns: repeat(2, minmax(0, 260px));
  }
}
@media (min-width: 1200px) {
  .olh-counter-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 260px));
  }
}
@media (min-width: 768px) {
  .olh-counter-grid--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 220px));
  }
}
@media (min-width: 1536px) {
  .olh-counter-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 220px));
  }
}
.olh-counter-item {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
}
.olh-counter-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  border-color: #671d2f;
  border-width: 2px;
}
/* Animation d'entrée (option "Animation d'entrée" de l'admin, réglable par
   compteur) : la carte part légèrement en dessous et transparente, puis
   remonte au scroll. Le décalage entre cartes vient du transition-delay
   posé en inline par le Twig (loop.index0 * 0.08s) - fonctionne quel que
   soit le nombre de cartes, contrairement à des règles nth-child figées.
   Le hover garde sa propre transition (transform/box-shadow/border) via
   $transition, donc on ajoute une 2e transition dédiée à l'apparition
   plutôt que de toucher $transition. */
.olh-counter-item--fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.olh-counter-item--fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.olh-counter-item--fade.is-visible:hover {
  transform: translateY(-5px);
}
.olh-counter-visual {
  position: relative;
}
.olh-counter-photo {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}
/* Enveloppe du badge icône : chevauche le bas de la photo, même principe que
   .olh-feature-item .el-title::before (_feature-box.scss). C'est elle qui
   porte le chevauchement (margin négative) et, si l'anneau de progression
   est activé, elle sert de repère de positionnement au SVG. */
.olh-counter-badge-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin: -32px auto 0.9rem;
  z-index: 2;
  /* Pas de photo : rien à chevaucher, le badge se pose normalement */
}
.olh-counter-badge-wrap.olh-counter-badge-wrap--standalone {
  margin: 1.5rem auto 0.9rem;
}
/* Anneau de progression (option "Anneau de progression" de l'admin) : se
   remplit au même rythme que le chiffre, via stroke-dashoffset mis à jour
   en JS. Tracé neutre en repos, coloré en $primary une fois rempli. */
.olh-counter-ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  pointer-events: none;
}
.olh-counter-ring-track {
  fill: none;
  stroke: rgba(197, 174, 145, 0.25);
  stroke-width: 3;
}
.olh-counter-ring-fill {
  fill: none;
  stroke: #C6A969;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.05s linear;
}
/* Badge icône lui-même : la couleur de fond par défaut ($border) est
   systématiquement écrasée par le champ "Couleur du badge" de l'admin
   (style inline). Centré dans .olh-counter-badge-wrap, en retrait de 4px
   pour laisser respirer l'anneau quand il est présent. */
.olh-counter-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #671d2f;
  color: #ffffff;
  font-size: 1.3rem;
  border: 3px solid #ffffff;
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  /* Pulsation de fin de comptage (option "Pulsation du badge" de l'admin) */
}
.olh-counter-badge.is-pulsing {
  animation: olhBadgePulse 0.6s ease;
}
@keyframes olhBadgePulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
.olh-counter-body {
  padding: 0 1.25rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Ni photo ni icône : pas de zone visuelle au-dessus, on redonne un peu
   d'air en haut du corps de carte */
.olh-counter-item:not(:has(.olh-counter-visual)) .olh-counter-body {
  padding-top: 1.5rem;
}
.olh-counter-number {
  font-family: "Sniglet", sans-serif;
  font-size: 2.4rem;
  line-height: 1.1;
  font-weight: 400;
  color: #A08244;
  font-variant-numeric: tabular-nums;
}
/* Odomètre (option "Style du chiffre" de l'admin) : un "rouleau" par
   chiffre, 0 à 9 empilés verticalement, dont seul un cran de 1em est
   visible (overflow hidden) - on fait défiler le rouleau en JS pour
   révéler le bon chiffre, comme un compteur mécanique. */
.olh-odometer-reel {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: bottom;
}
.olh-odometer-strip {
  display: block;
  transition: transform 0.25s cubic-bezier(0.15, 0.9, 0.35, 1.1);
}
.olh-odometer-digit {
  display: block;
  height: 1em;
  line-height: 1;
  text-align: center;
}
.olh-counter-title {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #1A2B42;
  margin-top: 0.3rem;
  /* Option "Position du titre" = Au-dessus du chiffre : le titre passe
       avant le nombre dans le flux, donc plus d'espace à ajouter au-dessus
       (déjà géré par .olh-counter-pretext ou le badge), seulement en dessous. */
}
.olh-counter-title.olh-counter-title--haut {
  margin-top: 0;
  margin-bottom: 0.3rem;
}
/* Champ "Texte au-dessus du chiffre" : une courte précision affichée en
   petit, façon "eyebrow", au-dessus du nombre (ex : "Depuis 2026") - pensé
   comme alternative propre au détournement du préfixe/suffixe pour du texte
   trop long (préfixe/suffixe sont maintenant limités en longueur côté admin). */
.olh-counter-pretext {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  font-size: 0.8rem;
  line-height: 1.3;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.olh-counter-text {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 0.5rem;
}
/* Import défensif : comme _j2commerce.scss et _compteur-anime.scss, ce
   fichier peut être compilé isolément par l'admin Gantry ou par le pipeline
   propre à l'extension dès qu'on le touche, en dehors de la chaîne
   custom.scss. On importe donc explicitement ce dont on a besoin plutôt que
   de compter sur le contexte global. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   JDOWNLOADS
   Tout est scopé sous les conteneurs connus de jDownloads plutôt qu'en
   global : la plupart des classes ici (.card, .list-group-item, .badge,
   .form-select, .navbar...) sont du Bootstrap générique, potentiellement
   réutilisé ailleurs sur le site. Le scoping évite tout effet de bord et
   gagne aussi en spécificité CSS face au propre CSS embarqué par
   l'extension (constaté à l'écran : sans ça, .card gardait son rendu
   Bootstrap par défaut malgré la règle .card déjà présente dans
   _jcetemplates.scss).

   jDownloads utilise malheureusement un wrapper ET une structure de nav
   différents selon la vue : .jd-item-page (fiche détail + formulaire
   d'édition) et .search (vue recherche) - constaté en comparant le HTML
   des deux vues. D'où la liste ci-dessous plutôt qu'un seul sélecteur ;
   si une autre vue (ex. liste par catégorie) s'avère différente elle
   aussi, l'ajouter ici de la même façon.
   ========================================================================== */
.jd-item-page, .search {
  /* --- Boutons d'action (Vue Générale, Recherche, Retour, Ajouter,
     Télécharger) : remplace le bleu Bootstrap par défaut par la même
     pilule dorée que le reste du site. --- */
  /* --- Barre de navigation du haut, vue fiche détail : on retire le look
     Bootstrap (fond, padding par défaut) pour ne garder que la disposition
     en ligne. --- */
  /* --- Même barre de navigation, vue recherche : markup propre à
     jDownloads (pas de classes Bootstrap navbar ici), on lui donne la même
     disposition en ligne avec la catégorie poussée à droite. --- */
  /* --- Champs de formulaire (catégorie, classement, recherche...) : même
     style que les champs du reste du site. --- */
  /* --- Titre du téléchargement --- */
  /* --- Cartes (description + "Données" + carte de recherche) : Bootstrap
     perd la partie face à l'extension sans ce scoping (cf. commentaire en
     tête de fichier), donc on réapplique explicitement la base commune
     ici. --- */
  /* --- Lignes de la fiche "Données" (Version, Taille, Auteur...) --- */
  /* --- Badge "Téléchargements" --- */
  /* --- Bouton "Annuler" du formulaire d'ajout/édition : jDownloads le code
     en .btn-success (vert Bootstrap brut, jamais recoloré ailleurs sur ce
     site - cf. commentaire dans _icagenda.scss sur .ic-registration-box
     .btn-success). On cible via l'icône plutôt que la classe couleur, pour
     rester correct même si l'extension change un jour cette classe. Même
     traitement que le bouton "Annuler" d'iCagenda (.ic-registration-box
     .btn-danger) : fond clair, bordure/texte $error, pour que les boutons
     "Annuler" du site se ressemblent tous. --- */
  /* --- Pied de page "Powered by jDownloads" --- */
}
.jd-item-page a:has(> .jdbutton), .search a:has(> .jdbutton) {
  text-decoration: none;
  display: inline-block;
}
.jd-item-page .jdbutton, .search .jdbutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: #ffffff;
  background: #C6A969;
  border: none;
  transition: 0.3s ease;
  /* Badge "NOUVEAU" à côté du titre : même famille visuelle que les
       boutons, mais plus petit et non cliquable. */
}
.jd-item-page .jdbutton:hover, .jd-item-page .jdbutton:focus, .search .jdbutton:hover, .search .jdbutton:focus {
  background: #A08244;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
}
.jd-item-page .jdbutton.jstatus, .search .jdbutton.jstatus {
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.jd-item-page .jdbutton.jgreen, .search .jdbutton.jgreen {
  background: #657A58;
}
.jd-item-page .jdbutton.jgreen:hover, .jd-item-page .jdbutton.jgreen:focus, .search .jdbutton.jgreen:hover, .search .jdbutton.jgreen:focus {
  filter: brightness(0.92);
}
.jd-item-page .navbar, .search .navbar {
  background: transparent;
  padding: 0 0 1.25rem;
  border: none;
  box-shadow: none;
}
.jd-item-page .jd_top_navi, .search .jd_top_navi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.jd-item-page .jd_top_navi_catbox, .search .jd_top_navi_catbox {
  margin-left: auto;
}
.jd-item-page .form-select, .search .form-select {
  max-width: 280px;
}
.jd-item-page .input-group-text, .search .input-group-text {
  background: #F7F4EB;
  border: 1px solid #C5AE91;
  color: #52637A;
}
.jd-item-page fieldset.border, .search fieldset.border {
  border-color: #F1ECE6 !important;
  border-radius: 18px !important;
}
.jd-item-page legend, .search legend {
  font-family: "Nunito", sans-serif;
  color: #52637A;
}
.jd-item-page h2, .jd-item-page .cb-user-welcome span, .cb-user-welcome .jd-item-page span, .search h2, .search .cb-user-welcome span, .cb-user-welcome .search span {
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  color: #A08244;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.jd-item-page .card, .search .card {
  padding: 0;
  overflow: hidden;
}
.jd-item-page .card-body, .search .card-body {
  padding: 1.25rem 1.5rem;
  font-family: "Nunito", sans-serif;
  color: #1A2B42;
}
.jd-item-page .card-header, .search .card-header {
  padding: 0.9rem 1.5rem;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  background: #F7F4EB;
  border-bottom: 1px solid #F1ECE6;
  color: #1A2B42;
  /* Bloc "Données" : accent doré plutôt que le bleu Bootstrap. */
}
.jd-item-page .card-header.bg-light, .search .card-header.bg-light {
  background: #F7F4EB !important;
}
.jd-item-page .card-header.bg-primary, .search .card-header.bg-primary {
  background: #C6A969 !important;
  color: #ffffff !important;
  border-bottom: none;
}
.jd-item-page .list-group-item, .search .list-group-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid #F1ECE6;
  padding: 0.6rem 0;
  font-family: "Nunito", sans-serif;
}
.jd-item-page .list-group-item:last-child, .search .list-group-item:last-child {
  border-bottom: none;
}
.jd-item-page .badge.bg-info, .search .badge.bg-info {
  background: #527282 !important;
  color: #ffffff;
  border-radius: 999px;
  font-weight: 400;
  padding: 0.3em 0.65em;
}
.jd-item-page .btn:has(.icon-cancel), .search .btn:has(.icon-cancel) {
  background-color: #FFFFFF !important;
  border-color: #9E3838 !important;
  color: #9E3838 !important;
}
.jd-item-page .btn:has(.icon-cancel):hover, .jd-item-page .btn:has(.icon-cancel):focus, .search .btn:has(.icon-cancel):hover, .search .btn:has(.icon-cancel):focus {
  background-color: #9E3838 !important;
  color: #ffffff !important;
}
.jd-item-page .jd_footer, .search .jd_footer {
  text-align: center;
  font-family: "Nunito", sans-serif;
  font-size: 0.8rem;
  color: #52637A;
  margin-top: 1rem;
}
.jd-item-page .jd_footer a, .search .jd_footer a {
  color: #52637A;
  text-decoration: underline;
}
.jd-item-page .jd_footer a:hover, .search .jd_footer a:hover {
  color: #A08244;
}
/* Import défensif : comme _j2commerce.scss, _compteur-anime.scss et
   _jdownloads.scss, cette particle custom HTML peut être compilée
   isolément par l'admin Gantry dès qu'on la touche, en dehors de la chaîne
   custom.scss. On importe donc explicitement ce dont on a besoin plutôt
   que de compter sur le contexte global. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   WIDGETS MATOMO — page "statistiques" pour un public non technicien
   Un widget principal (fréquentation, en graphique) en pleine largeur, deux
   widgets secondaires (pages / origine) sur une ligne à 2 colonnes, puis
   deux widgets "bonus" plus discrets (appareils / pays) sur une dernière
   ligne. Chaque widget est une iframe Matomo (Widgetize) enveloppée dans
   une carte au même habillage que le reste du site.
   ========================================================================== */
.olh-matomo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 2rem 0;
}
@media (min-width: 768px) {
  .olh-matomo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.olh-matomo-card {
  padding: 1.5rem;
  overflow: hidden;
  /* Widget "vedette" (fréquentation) : occupe toute la largeur de la
       grille dès que celle-ci passe à 2 colonnes. */
  /* Widgets "bonus" (appareils / pays) : présentés en retrait - titre
       plus discret, moins de respiration - pour ne pas concurrencer les
       3 widgets principaux à l'oeil. */
}
@media (min-width: 768px) {
  .olh-matomo-card.olh-matomo-card--wide {
    grid-column: 1 / -1;
  }
}
.olh-matomo-card.olh-matomo-card--bonus {
  padding: 1.1rem 1.25rem;
  background-color: #FFFFFF;
}
.olh-matomo-card.olh-matomo-card--bonus .olh-matomo-card__title {
  font-size: 1rem;
  color: #52637A;
}
.olh-matomo-card__title {
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  color: #A08244;
  font-size: 1.25rem;
  margin: 0 0 1rem;
}
.olh-matomo-iframe {
  display: block;
  width: 100%;
  border: 0;
}
/* Import défensif : comme _jdownloads.scss / _matomo-widgets.scss /
   _compteur-anime.scss, Smart Slider peut charger/générer son propre CSS
   en dehors de la chaîne normale du template, donc on importe
   explicitement ce dont on a besoin plutôt que de compter sur le
   contexte global. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   SMART SLIDER — bouton CTA "Je rejoins l'aventure" (layer olh-slide-cta)

   Nommée "olh-slide-cta" (et non "olh-founder-ctas") pour ne pas entrer en
   collision avec .olh-founder-ctas de _histoire-timeline.scss - un
   composant différent, déjà existant avant celui-ci, qui utilise aussi
   "primary"/"secondary" mais avec un sens inversé (primary = bordeaux
   là-bas, doré ici). Même nom, deux définitions différentes = confusion
   garantie ; d'où le renommage plutôt qu'une tentative de réconciliation.

   La classe olh-slide-cta, posée depuis l'éditeur Smart Slider, atterrit
   sur le layer (le <div> qui positionne le bouton sur la diapositive), PAS
   sur le <a> cliquable lui-même :

     <div class="n2-ss-layer ... olh-slide-cta ...">
       <div class="n2-ss-button-container ...">
         <a class="n2-style-XXXX-heading ... n2-font-XXXX-link ...">
           <div><div>Je rejoins l'aventure</div></div>
         </a>
       </div>
     </div>

   D'où olh-slide-cta seul sans effet sur l'apparence du bouton : il faut
   descendre jusqu'au <a> via .n2-ss-button-container a. On s'accroche à
   cette classe structurelle de Smart Slider (stable) plutôt qu'aux classes
   n2-style-XXXX-heading / n2-font-XXXX-link générées par l'éditeur
   "Style"/"Police" : leur suffixe change dès qu'on retouche le style du
   bouton dans Smart Slider, donc s'y accrocher casserait la personnalisation
   au premier réglage fait dans l'éditeur.

   Les !important sont nécessaires : Smart Slider injecte son propre CSS
   (fond, bordure, couleur, padding...) avec une spécificité qu'un simple
   sélecteur de classe ne bat pas - même situation et même remède déjà
   documentés pour le bouton de la carte héro dans _cards.scss
   (.jl-button.jl-button-default), qui utilise aussi des !important pour
   passer au-dessus du style existant du bouton.

   Choix de couleur : ajouter, en plus de olh-slide-cta, la classe
   "primary" (doré) ou "secondary" (bordeaux) sur le layer dans l'éditeur
   Smart Slider. Sans l'une des deux, le bouton reste doré par défaut.

   min-width: 260px sur le <a> : pour que deux boutons de textes de
   longueurs différentes sur un même slider rendent à la même largeur -
   plus fiable qu'ajouter des &nbsp; dans le texte pour "gonfler" le plus
   court à la main (imprécis, texte mal centré, à refaire à chaque
   changement de texte). Un texte plus long que 260px élargit quand même
   le bouton normalement (min-width ne plafonne pas). --- */
.olh-slide-cta {
  /* Variante "primary" : doré - identique au défaut, présente pour un
       choix explicite dans l'éditeur plutôt qu'implicite. */
  /* Variante "secondary" : bordeaux, pour varier l'appel à l'action (ex.
       sur une diapositive où le doré est déjà très présent ailleurs). */
}
.olh-slide-cta .n2-ss-button-container a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 0.85rem 2rem !important;
  border-radius: 999px !important;
  border: none !important;
  color: #ffffff !important;
  font-family: "Nunito", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
  /* Défaut si ni "primary" ni "secondary" n'est ajouté : doré, comme
           le reste des boutons du site. */
  background: #C6A969 !important;
  /* Smart Slider imbrique le texte dans deux <div> internes : on les
           neutralise (display: contents) pour qu'ils ne cassent pas le
           centrage flex ci-dessus. */
}
.olh-slide-cta .n2-ss-button-container a div {
  display: contents;
}
.olh-slide-cta .n2-ss-button-container a:hover, .olh-slide-cta .n2-ss-button-container a:focus {
  background: #A08244 !important;
  color: #ffffff !important;
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  transform: translateY(-2px);
}
.olh-slide-cta.primary .n2-ss-button-container a {
  background: #C6A969 !important;
}
.olh-slide-cta.primary .n2-ss-button-container a:hover, .olh-slide-cta.primary .n2-ss-button-container a:focus {
  background: #A08244 !important;
}
.olh-slide-cta.secondary .n2-ss-button-container a {
  background: #671d2f !important;
}
.olh-slide-cta.secondary .n2-ss-button-container a:hover, .olh-slide-cta.secondary .n2-ss-button-container a:focus {
  background: #471420 !important;
}
/* Import défensif : comme _jdownloads.scss / _matomo-widgets.scss /
   _compteur-anime.scss / _smart-slider.scss, cette particle custom HTML
   peut être compilée isolément par l'admin Gantry dès qu'on la touche, en
   dehors de la chaîne custom.scss. On importe donc explicitement ce dont
   on a besoin plutôt que de compter sur le contexte global. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   ÉTAPES — parcours en 3 temps ("Vous nous écrivez" / "On se rencontre" /
   "L'aventure commence")
   Version épurée volontairement sans carte (pas de %olh-card-base) : juste
   un badge rond numéroté, un titre et un texte, reliés par une flèche - le
   contenu est court, la numérotation seule suffit à porter la lecture en
   parcours plutôt qu'en contenu à consulter.
   ========================================================================== */
/* flex-wrap plutôt qu'une grille à colonnes fixes : testé face à la vraie
   structure imbriquée du gabarit ligne-2-colonnes (_jcetemplates.scss :
   .media-noborder en flex > .w66.media, lui-même flex-shrink:0 via
   ".w66{flex:0 0 66.666%}") - flex-wrap s'adapte à la largeur réellement
   disponible de son conteneur, quelle que soit sa valeur, alors qu'une
   grille à colonnes figées se contente de compresser le texte jusqu'à le
   rendre illisible tant qu'elle n'a pas atteint son propre point de
   bascule en media query. flex: 1 1 180px (plutôt qu'une largeur fixe de
   260px) : permet à chaque étape de rétrécir jusqu'à 180px avant de passer
   à la ligne. min-width:0 lève la limite implicite du navigateur qui, sur
   un enfant flex, empêche par défaut de rétrécir sous la largeur de son
   contenu (ici le texte de description). overflow-x:hidden en filet de
   sécurité final. */
.olh-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 100%;
  max-width: 1100px;
  margin: 2.5rem auto;
  box-sizing: border-box;
  overflow-x: hidden;
}
@media (max-width: 767px) {
  .olh-steps {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}
.olh-steps-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 180px;
  min-width: 0;
  max-width: 260px;
}
/* Badge rond numéroté : même logique visuelle que .olh-counter-badge
   (_compteur-anime.scss) - fond doré, texte blanc, ombre portée - mais
   classes dédiées puisque ce composant n'a pas de lien fonctionnel avec la
   particle "Compteurs Animés" (pas de comptage, pas de JS). */
.olh-steps-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #C6A969;
  color: #ffffff;
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  margin-bottom: 1rem;
}
.olh-steps-title {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #1A2B42;
  margin: 0 0 0.4rem;
}
.olh-steps-text {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
}
/* Flèche entre deux étapes : centrée sur l'axe vertical du badge (64px de
   haut, donc 32px de son propre centre) plutôt que sur celui du bloc
   entier (qui varie avec la longueur du texte). Devient une flèche
   pointant vers le bas une fois les étapes empilées en mobile. */
.olh-steps-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 21px;
  color: #E0C69F;
  font-size: 1.4rem;
}
.olh-steps-arrow::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "";
}
@media (max-width: 767px) {
  .olh-steps-arrow {
    margin-top: 0;
    transform: rotate(90deg);
  }
}
/* Import défensif : comme _jdownloads.scss / _matomo-widgets.scss /
   _compteur-anime.scss / _smart-slider.scss / _steps.scss, ce module custom
   peut se rendre dans des contextes variés (position Gantry, popup
   EngageBox...) en dehors de la chaîne normale du template, donc on importe
   explicitement ce dont on a besoin plutôt que de compter sur le contexte
   global. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* Import défensif : comme les autres composants custom (_smart-slider.scss,
   _steps.scss, _mod-assoc-payment.scss, _acymailing.scss...), au cas où ce
   bloc se recompilerait isolément en dehors de la chaîne normale du template. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   BOUTONS CTA "PILULE" (.olh-founder-ctas)

   Né avec la frise "Notre histoire" (d'où le nom), ce composant est
   maintenant réutilisé ailleurs sur le site - bouton "Nous soutenir" du
   module mod_assoc_payment (voir _mod-assoc-payment.scss), bouton
   "Découvrez notre histoire" de l'article "Qui sommes-nous ?", et
   potentiellement d'autres articles à l'avenir. Sorti de
   _histoire-timeline.scss pour cette raison : le laisser dans un fichier
   au nom "timeline" est trompeur une fois réutilisé ailleurs, et surtout
   risqué - si la frise "Notre histoire" est un jour retirée du site,
   quelqu'un pourrait raisonnablement supprimer _histoire-timeline.scss en
   pensant ne toucher que la frise, et casser au passage tous les autres
   boutons qui en dépendent silencieusement.

   NE PAS confondre avec le bouton CTA du slider Smart Slider : celui-là
   utilise sa propre classe .olh-slide-cta (_smart-slider.scss), délibérément
   différente d'.olh-founder-ctas malgré le même principe primary/secondary,
   pour éviter que deux composants différents se disputent le même nom (et,
   ici, avec un sens de "primary" inversé - doré côté slider, bordeaux ici).

   Deux façons d'utiliser .primary/.secondary, gérées par les deux blocs
   ci-dessous :
   1. .olh-founder-ctas sur un conteneur (p, div...) qui enveloppe plusieurs
      <a class="primary/secondary"> ou <button class="primary/secondary">
      - cas d'origine ("Faire un don"/"Devenir bénévole"/"Nous contacter").
   2. .olh-founder-ctas posée directement SUR le bouton lui-même, avec
      primary/secondary à côté sur ce même élément - pour un bouton isolé
      hors d'un conteneur dédié (ex. le bouton "Nous soutenir" d'un module
      de paiement tiers, où on ne maîtrise pas le HTML autour ; ou un bouton
      glissé à la main dans un article via l'éditeur JCE). */
.olh-founder-ctas a, .olh-founder-ctas button, .smart-slider-slide .olh-founder-ctas a, .smart-slider-slide .olh-founder-ctas button, .olh-founder-ctas.primary, .smart-slider-slide .olh-founder-ctas.primary, .olh-founder-ctas.secondary, .smart-slider-slide .olh-founder-ctas.secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: 0.3s ease;
  border: 1px solid #671d2f;
  background: none;
  cursor: pointer;
  /* Même correctif que .jl-button (_jcetemplates.scss) : un <button>
       hérite de white-space: nowrap posé par le thème JL, ce qui empêche
       un texte comme "Découvrez notre histoire" de se replier - vérifié en
       direct sur un bouton réel (computed white-space: nowrap, max-width:
       none), d'où le débordement en mode "Cas 2" (.olh-founder-ctas posée
       directement sur le bouton). max-width: 100% empêche aussi la boîte
       elle-même de dépasser son conteneur, quelle que soit la largeur du
       texte. */
  white-space: normal;
  max-width: 100%;
  text-align: center;
}
.olh-founder-ctas a.primary, .olh-founder-ctas button.primary, .smart-slider-slide .olh-founder-ctas a.primary, .smart-slider-slide .olh-founder-ctas button.primary, .olh-founder-ctas.primary, .smart-slider-slide .olh-founder-ctas.primary {
  background: #671d2f;
  color: #ffffff;
}
.olh-founder-ctas a.primary:hover, .olh-founder-ctas button.primary:hover, .smart-slider-slide .olh-founder-ctas a.primary:hover, .smart-slider-slide .olh-founder-ctas button.primary:hover, .olh-founder-ctas.primary:hover, .smart-slider-slide .olh-founder-ctas.primary:hover {
  background: #471420;
  transform: translateY(-2px);
}
.olh-founder-ctas a.secondary, .olh-founder-ctas button.secondary, .smart-slider-slide .olh-founder-ctas a.secondary, .smart-slider-slide .olh-founder-ctas button.secondary, .olh-founder-ctas.secondary, .smart-slider-slide .olh-founder-ctas.secondary {
  background: transparent;
  color: #671d2f;
}
.olh-founder-ctas a.secondary:hover, .olh-founder-ctas button.secondary:hover, .smart-slider-slide .olh-founder-ctas a.secondary:hover, .smart-slider-slide .olh-founder-ctas button.secondary:hover, .olh-founder-ctas.secondary:hover, .smart-slider-slide .olh-founder-ctas.secondary:hover {
  background: rgba(103, 29, 47, 0.08);
  transform: translateY(-2px);
}
.olh-founder-ctas, .smart-slider-slide .olh-founder-ctas {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}
/* ==========================================================================
   MODULE mod_assoc_payment — habillage aux couleurs du site

   2026-09-08 : toute la CSS de ce module (développé pour ce site, voir
   custom\modules\mod_assoc_payment) vivait jusqu'ici pour partie dans un
   <style> imprimé en dur par tmpl/default.php, et pour partie déjà ici (ce
   fichier ne faisait jusque-là que surcharger quelques valeurs par-dessus
   ce <style>, via une spécificité de sélecteur à 2 classes). Le <style> du
   module a été entièrement supprimé : ce fichier est maintenant la seule
   source de la CSS du module, sur le même principe que le reste du site.

   Les classes .ic-payment-popup__* réellement partagées à l'identique avec
   mod_assoc_membership (amount/note/thankyou/message--error) vivent
   désormais dans _commun.scss - voir ce fichier. .mod-assoc-payment__popup-message--error
   reste ici : nom propre à ce module, injecté via classList.add() par son
   propre script inline (voir tmpl/default.php).

   Bouton "Nous soutenir" : volontairement absent d'ici, il porte déjà
   directement .olh-founder-ctas.primary (ou .secondary) dans son HTML - voir
   _cta-buttons.scss.

   Couleurs de message (succès/annulé) volontairement en dur, pas de
   contrepartie dans la palette dorée du site - même choix que pour
   .mod-assoc-membership__message dans _mod-assoc-membership.scss.
   ========================================================================== */
.mod-assoc-payment {
  /* --- Texte d'intro (au-dessus du formulaire) ---
       Non stylé du tout côté module à l'origine : juste des <p> en cascade
       UA par défaut. --- */
  /* --- Message de statut (succès / annulé) --- */
  /* --- Même rouge que .ic-payment-popup__message--error (_commun.scss),
       appliqué au contenu du popup EngageBox d'erreur par le script inline
       du module - la boîte elle-même garde le fond/padding réglé dans
       l'admin EngageBox, seules la couleur/la graisse du texte sont
       forcées. Nom propre au module (pas mutualisé dans _commun.scss) car
       posé via classList.add() plutôt qu'écrit dans le HTML. --- */
  /* --- Libellé "Montant" --- */
  /* --- Champ montant + "EUR" ---
       Bordure/radius exposés en variables CSS locales (alignées sur les
       valeurs utilisées par .cf-input dans _convertforms.scss) pour rester
       cohérent avec la façon dont le module lisait déjà ces deux réglages
       avant la migration. --- */
  /* --- Boutons de montants suggérés (ex: "10 €", "25 €") ---
       Portent en plus .btn.btn-outline-secondary (Bootstrap) dans le HTML
       du module : pastilles dorées discrètes, pour rester secondaires par
       rapport au bouton d'action final "Nous soutenir". !important
       nécessaire pour être sûr de battre le Bootstrap du site quel que soit
       l'ordre de chargement des feuilles de style. --- */
}
.mod-assoc-payment .mod-assoc-payment__intro {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  line-height: 1.6;
}
.mod-assoc-payment .mod-assoc-payment__intro p {
  margin: 0 0 1em;
}
.mod-assoc-payment .mod-assoc-payment__intro p:last-child {
  margin-bottom: 0;
}
.mod-assoc-payment .mod-assoc-payment__message {
  --mod-assoc-payment-success-color: #1e7e34;
  --mod-assoc-payment-success-bg: #eaf7ec;
  --mod-assoc-payment-error-color: #b3261e;
  --mod-assoc-payment-error-bg: #fdecea;
  padding: 0.75em 1em;
  border-radius: 18px;
  border-left: 4px solid transparent;
}
.mod-assoc-payment .mod-assoc-payment__message--success {
  color: var(--mod-assoc-payment-success-color);
  background: var(--mod-assoc-payment-success-bg);
  border-left-color: var(--mod-assoc-payment-success-color);
}
.mod-assoc-payment .mod-assoc-payment__message--cancelled {
  color: var(--mod-assoc-payment-error-color);
  background: var(--mod-assoc-payment-error-bg);
  border-left-color: var(--mod-assoc-payment-error-color);
}
.mod-assoc-payment .mod-assoc-payment__message-title {
  margin: 0 0 0.35em;
  font-weight: 700;
}
.mod-assoc-payment .mod-assoc-payment__message-details {
  margin: 0 0 0.5em;
  font-size: 0.95em;
  opacity: 0.85;
}
.mod-assoc-payment .mod-assoc-payment__message-note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.mod-assoc-payment .mod-assoc-payment__popup-message--error {
  color: #b3261e;
  font-weight: 600;
}
.mod-assoc-payment .mod-assoc-payment__amount-label {
  display: block;
  margin: 0 0 0.35em;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  color: #1A2B42;
  font-size: 0.9rem;
}
.mod-assoc-payment .mod-assoc-payment__amount-row {
  --mod-assoc-payment-input-border: #E0C69F;
  --mod-assoc-payment-input-radius: 12px;
  margin: 0 0 1em;
}
.mod-assoc-payment .mod-assoc-payment__amount-input-group {
  display: flex;
  align-items: stretch;
  max-width: 260px;
}
.mod-assoc-payment .mod-assoc-payment__amount-input-group input[type="number"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0.5em 0.75em;
  font-size: 1rem;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  background-color: #ffffff;
  border: 1px solid var(--mod-assoc-payment-input-border);
  border-right: none;
  border-radius: var(--mod-assoc-payment-input-radius) 0 0 var(--mod-assoc-payment-input-radius);
  transition: 0.3s ease;
  /* Le module ne définissait aucun état :focus - border-color en dur
           (plutôt que de compter sur la variable CSS) pour ne pas dépendre
           de l'ordre de cascade au moment du focus. */
  /* Masque le curseur natif +/- : un champ "combien voulez-vous
           donner" est plus lisible sans lui. */
  -moz-appearance: textfield;
}
.mod-assoc-payment .mod-assoc-payment__amount-input-group input[type="number"]:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.15);
}
.mod-assoc-payment .mod-assoc-payment__amount-input-group input[type="number"]::-webkit-outer-spin-button, .mod-assoc-payment .mod-assoc-payment__amount-input-group input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mod-assoc-payment .mod-assoc-payment__currency {
  display: flex;
  align-items: center;
  padding: 0 0.75em;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  background: #F7F4EB;
  color: #52637A;
  border: 1px solid var(--mod-assoc-payment-input-border);
  border-radius: 0 var(--mod-assoc-payment-input-radius) var(--mod-assoc-payment-input-radius) 0;
}
.mod-assoc-payment .mod-assoc-payment__suggested {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 0 0 0.75em;
}
.mod-assoc-payment .mod-assoc-payment__suggested-btn {
  padding: 0.4rem 1.1rem !important;
  border: 1px solid #E0C69F !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #A08244 !important;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: none !important;
  transition: 0.3s ease;
}
.mod-assoc-payment .mod-assoc-payment__suggested-btn:hover, .mod-assoc-payment .mod-assoc-payment__suggested-btn:focus {
  background: rgba(198, 169, 105, 0.12) !important;
  border-color: #C6A969 !important;
  color: #A08244 !important;
}
.mod-assoc-payment .mod-assoc-payment__form .mod-assoc-payment__button, .mod-assoc-payment .mod-assoc-payment__form button[type="button"]:not(.mod-assoc-payment__suggested-btn) {
  margin-top: 0.25em;
}
/* Import défensif : comme _mod-assoc-payment.scss (voir son commentaire),
   ce module custom peut se rendre en dehors de la chaîne normale du
   template, donc on importe explicitement ce dont on a besoin plutôt que
   de compter sur le contexte global. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   MODULE mod_assoc_membership — habillage aux couleurs du site

   2026-09-08 : toute la CSS de ce module vivait jusqu'ici dans un <style>
   imprimé en dur par tmpl/default.php (custom\modules\mod_assoc_membership).
   Sortie ici pour rejoindre la même architecture que le reste du site (une
   règle globale par composant, plutôt qu'un <style> par module) - voir
   DEPENDENCIES.md du module. Seule exception qui RESTE dans le module :
   l'habillage du popup EngageBox, dont le sélecteur CSS est l'ID de boîte
   choisi par l'utilisateur en back-office (donc injecté dynamiquement en
   PHP, impossible à exprimer dans un fichier SCSS statique) - décision
   explicite pour ne pas complexifier le module avec un système
   JS/Dispatcher dédié pour ce seul cas.

   Les couleurs de succès/erreur/attente restent volontairement en dur
   (rouge/vert/jaune "universels", indépendants de la palette dorée du
   site) - même choix que pour .mod-assoc-payment__message dans
   _mod-assoc-payment.scss.
   ========================================================================== */
.mod-assoc-membership {
  /* Centrage du contenu (ajouté directement dans custom.scss le
       2026-09-08/09, récupéré ici pour rester dans l'architecture "une
       règle globale par composant" plutôt qu'une règle isolée en bas du
       fichier chef d'orchestre). */
  text-align: -webkit-center;
  /* --- Message de statut (succès / annulé / indisponible / en attente) --- */
  /* --- Largeur du formulaire (2026-09-02, retour utilisateur : le
       formulaire s'étirait bord à bord sur une page large) --- */
  /* --- Tarifs (radios en ligne, pas en <select>) --- */
  /* --- Champs du formulaire (grille Bootstrap row/col-md-4, cf. markup -
       ces règles n'habillent que l'intérieur de chaque colonne, jamais la
       grille elle-même). --- */
  /* --- Ligne du bouton de soumission (2026-09-02, retour utilisateur :
       centré plutôt qu'aligné à gauche par défaut) --- */
  /* --- Case à cocher RGPD (2026-09-05, retour utilisateur) - rejoue le
       style de .cf-checkbox-group/.cf-label de _convertforms.scss (scopé à
       .convertforms, une classe que ce module ne porte jamais), avec une
       case et un texte légèrement plus grands que l'original (retour
       utilisateur). --- */
  /* --- Mention reCAPTCHA (2026-09-05, retour utilisateur) - même
       remarque que ci-dessus pour .cf-recaptcha-v3-text-badge. --- */
  /* --- Pièce justificative facultative par tarif (2026-09-03) - masquée
       par défaut, affichée en JS selon data-requires-document du tarif
       sélectionné (voir assocMembershipStart()). --- */
  /* --- Champs additionnels génériques par tarif (2026-09-07) - même
       principe d'affichage/masquage JS que la pièce justificative
       ci-dessus. --- */
  /* --- Adhésion exonérée / en attente de validation (2026-09-07, tarif à
       0€) - même famille visuelle que .mod-assoc-membership__message,
       teinte neutre (ni succès vert ni erreur rouge). --- */
}
.mod-assoc-membership .mod-assoc-membership__message {
  --mod-assoc-membership-success-color: #1e7e34;
  --mod-assoc-membership-success-bg: #eaf7ec;
  --mod-assoc-membership-error-color: #b3261e;
  --mod-assoc-membership-error-bg: #fdecea;
  padding: 0.75em 1em;
  border-radius: 18px;
  border-left: 4px solid transparent;
}
.mod-assoc-membership .mod-assoc-membership__message--success {
  color: var(--mod-assoc-membership-success-color);
  background: var(--mod-assoc-membership-success-bg);
  border-left-color: var(--mod-assoc-membership-success-color);
}
.mod-assoc-membership .mod-assoc-membership__message--cancelled, .mod-assoc-membership .mod-assoc-membership__message--unavailable {
  color: var(--mod-assoc-membership-error-color);
  background: var(--mod-assoc-membership-error-bg);
  border-left-color: var(--mod-assoc-membership-error-color);
}
.mod-assoc-membership .mod-assoc-membership__message-title {
  margin: 0 0 0.35em;
  font-weight: 700;
}
.mod-assoc-membership .mod-assoc-membership__message-details {
  margin: 0 0 0.5em;
  font-size: 0.95em;
  opacity: 0.85;
}
.mod-assoc-membership .mod-assoc-membership__form {
  max-width: 80%;
}
.mod-assoc-membership .mod-assoc-membership__tiers {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin: 0 0 1.25em;
}
.mod-assoc-membership .mod-assoc-membership__tier {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.75em;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  cursor: pointer;
}
.mod-assoc-membership .mod-assoc-membership__tier input {
  margin: 0;
}
.mod-assoc-membership .mod-assoc-membership__tier-amount {
  margin-left: auto;
  font-weight: 600;
}
.mod-assoc-membership .mod-assoc-membership__field {
  margin: 0 0 1em;
  /* `select` ajouté ici (2026-09-17, retour utilisateur "un peu de
           design pour équilibrer et harmoniser les formulaires") - avant,
           seuls les <input type="text"/"email"> recevaient ce style (bords
           arrondis $radius), le <select> "Comment nous avez-vous connus ?"
           retombait donc sur le rendu par défaut du navigateur/Bootstrap
           (coins carrés), visuellement en rupture avec le reste du
           formulaire. */
}
.mod-assoc-membership .mod-assoc-membership__field label {
  display: block;
  margin: 0 0 0.3em;
  font-weight: 600;
}
.mod-assoc-membership .mod-assoc-membership__field input[type="text"], .mod-assoc-membership .mod-assoc-membership__field input[type="email"], .mod-assoc-membership .mod-assoc-membership__field select {
  width: 100%;
  padding: 0.5em 0.75em;
  border: 1px solid #C5AE91;
  border-radius: 18px;
}
.mod-assoc-membership .mod-assoc-membership__field--error input[type="text"], .mod-assoc-membership .mod-assoc-membership__field--error input[type="email"] {
  border-color: #b3261e;
}
.mod-assoc-membership .mod-assoc-membership__field--error .mod-assoc-membership__field-error {
  display: block;
}
.mod-assoc-membership .mod-assoc-membership__required {
  color: #b3261e;
  margin-left: 0.15em;
}
.mod-assoc-membership .mod-assoc-membership__optional {
  font-weight: 400;
  color: #52637A;
  font-size: 0.85em;
}
.mod-assoc-membership .mod-assoc-membership__field-error {
  display: none;
  margin-top: 0.3em;
  color: #b3261e;
  font-size: 0.85em;
}
.mod-assoc-membership .mod-assoc-membership__section-label {
  margin: 0 0 0.75em;
  font-weight: 600;
}
.mod-assoc-membership .mod-assoc-membership__submit-row {
  display: flex;
  justify-content: center;
  margin: 1em 0;
}
.mod-assoc-membership .cf-checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.mod-assoc-membership .cf-checkbox-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
}
.mod-assoc-membership .cf-checkbox-group .cf-label {
  font-size: 0.9em;
  line-height: 1.4;
}
.mod-assoc-membership .cf-checkbox-group .cf-label p {
  margin: 0;
}
.mod-assoc-membership .cf-recaptcha-v3-text-badge {
  margin-top: 1em;
  font-size: 0.8em;
  line-height: 1.4;
  color: #52637A;
  text-align: center;
}
.mod-assoc-membership .cf-recaptcha-v3-text-badge a {
  color: #A08244;
}
.mod-assoc-membership .mod-assoc-membership__document {
  display: none;
  margin: 0 0 1.25em;
  padding: 0.75em 1em;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background: #F7F4EB;
  /* Bouton natif "Choisir un fichier" habillé en pilule "CTA
           secondaire" (même esprit que %olh-founder-cta-secondary dans
           _cta-buttons.scss, rejoué ici à la main plutôt qu'étendu pour
           rester autonome de ce fichier - même choix que les boutons de
           _mod-assoc-membership-admin.scss). ::file-selector-button est la
           pseudo-classe standard (Chrome/Firefox/Safari récents) ;
           ::-webkit-file-upload-button reprend exactement les mêmes règles
           pour les navigateurs qui ne connaissent encore que l'ancien nom. */
}
.mod-assoc-membership .mod-assoc-membership__document label {
  display: block;
  margin: 0 0 0.3em;
  font-weight: 600;
}
.mod-assoc-membership .mod-assoc-membership__document input[type="file"] {
  display: block;
  font-family: "Nunito", sans-serif;
  color: #52637A;
  font-size: 0.85em;
}
.mod-assoc-membership .mod-assoc-membership__document input[type="file"]::file-selector-button, .mod-assoc-membership .mod-assoc-membership__document input[type="file"]::-webkit-file-upload-button {
  display: inline-flex;
  align-items: center;
  margin-right: 0.75em;
  padding: 0.45em 1.1em;
  border: 1px solid #671d2f;
  border-radius: 999px;
  background: transparent;
  color: #671d2f;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.9em;
  cursor: pointer;
  transition: 0.3s ease;
}
.mod-assoc-membership .mod-assoc-membership__document input[type="file"]:hover::file-selector-button, .mod-assoc-membership .mod-assoc-membership__document input[type="file"]:hover::-webkit-file-upload-button {
  background: rgba(103, 29, 47, 0.08);
}
.mod-assoc-membership .mod-assoc-membership__document--visible {
  display: block;
}
.mod-assoc-membership .mod-assoc-membership__document.mod-assoc-membership__field--error {
  border-color: #b3261e;
}
.mod-assoc-membership .mod-assoc-membership__document-hint {
  margin: 0 0 0.5em;
  font-size: 0.9em;
  color: #52637A;
}
.mod-assoc-membership .mod-assoc-membership__extra-field {
  display: none;
  margin: 0 0 1.25em;
}
.mod-assoc-membership .mod-assoc-membership__extra-field label {
  display: block;
  margin: 0 0 0.3em;
  font-weight: 600;
}
.mod-assoc-membership .mod-assoc-membership__extra-field textarea {
  width: 100%;
  padding: 0.5em 0.75em;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  font: inherit;
  resize: vertical;
}
.mod-assoc-membership .mod-assoc-membership__extra-field--visible {
  display: block;
}
.mod-assoc-membership .mod-assoc-membership__message--pending {
  --mod-assoc-membership-pending-color: #8a6d1a;
  --mod-assoc-membership-pending-bg: #fff3cd;
  color: var(--mod-assoc-membership-pending-color);
  background: var(--mod-assoc-membership-pending-bg);
  border-left-color: var(--mod-assoc-membership-pending-color);
}
/* Import défensif : comme _mod-assoc-payment.scss / _mod-assoc-membership.scss
   (voir leur commentaire), ce module custom peut se rendre en dehors de la
   chaîne normale du template, donc on importe explicitement ce dont on a
   besoin plutôt que de compter sur le contexte global. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   MODULE mod_assoc_membership_admin — habillage aux couleurs du site

   2026-09-08 : toute la CSS de ce module (réservé au Bureau, affiché en
   back-office) vivait jusqu'ici dans un <style> imprimé en dur par
   tmpl/default.php - sortie ici pour rejoindre la même architecture que le
   reste du site. Pas de contrepartie dynamique ici (contrairement à
   mod_assoc_membership et son popup EngageBox) : ce module n'a donc plus
   aucun <style> côté PHP après cette migration.

   Couleurs volontairement laissées en dur, pas de contrepartie dans la
   palette du site (décision explicite - chrome d'administration
   générique/fonctionnel, pas destiné à suivre la charte graphique
   publique) : les 3 boutons d'action (filtrer/enregistrer, clore
   l'adhésion, activer l'adhésion), les 5 pastilles de statut
   (active/pending/expired/renewed/pending-exempt), les bordures/survols de
   tableau, et les messages d'erreur/succès. Seul le bouton générique (état
   par défaut, sans action spécifique) reprend l'habillage "CTA secondaire"
   du site (bordure dorée, radius pilule, survol ivoire).

   2026-09-10 : panneau "Nouvelle adhésion" (saisie manuelle - voir
   DEPENDENCIES.md) ajouté dans tmpl/default.php. Réutilise TELLES QUELLES
   les classes __edit/__grid/__field/__actions-row/__message/__hint
   ci-dessous (même panneau visuel que l'édition) - aucune règle CSS
   nouvelle nécessaire pour sa structure. Seul button[data-action="submit-
   create"] a été ajouté à la liste des boutons bleus ci-dessous ; le
   bouton de la barre d'outils (data-action="new-membership") reste
   volontairement sur l'habillage générique (pas de couleur dédiée).

   2026-09-10 (même jour, second ajout) : case à cocher "Créer l'accès au
   site immédiatement" (__field--checkbox, nouveau modificateur - les
   autres champs de ce panneau sont tous du texte/select, jamais une
   checkbox) + bouton "Lier le compte Joomla" (button[data-action="link-
   joomla-account"], regroupé avec le bouton vert "Valider l'adhésion" -
   même sémantique "accorder l'accès").

   2026-09-10 (même jour, troisième ajout) : contrairement à la note du
   premier ajout ci-dessus, le panneau "Nouvelle adhésion" a en fait
   maintenant SA PROPRE mise en page, plus aérée que celle du panneau
   d'édition (demande utilisateur - risque d'erreur de saisie inaperçue
   par manque d'attention au salon). Voir les règles
   [data-create-panel] .mod-assoc-membership-admin__grid / __field /
   __actions-row plus bas - scopées par attribut, panneau d'édition non
   affecté. --- */
.mod-assoc-membership-admin {
  font-size: 0.95em;
  /* Formulaire "Nouvelle adhésion" plus aéré (2026-09-10, demande
       utilisateur) : "je n'ai qu'une confiance relative de l'attention
       portée par les personnes qui vont le remplir, donc des erreurs
       dans des champs courts passeront facilement au travers" - saisie
       faite au salon, potentiellement vite et par quelqu'un d'autre que
       l'utilisateur habituel. Colonnes plus larges (moins de champs par
       ligne, donc chacun prend plus de place à l'œil), espacements et
       champs agrandis. Scopé à [data-create-panel] uniquement (attribut
       posé sur le panneau, voir tmpl/default.php) - le panneau d'édition
       (data-edit-panel), déjà éprouvé sur le terrain, n'est pas touché. */
  /* Pas de `&` ici volontairement : [data-create-panel] est un
       DESCENDANT de .mod-assoc-membership-admin (l'attribut est posé sur
       le <div class="...__edit" data-create-panel>), pas un ancêtre -
       nesting SCSS "à plat" pour obtenir le bon sens de combinateur
       (`.mod-assoc-membership-admin [data-create-panel]
       .mod-assoc-membership-admin__grid`, etc.). */
  /* --- Boutons - un <button> sans style hérite du thème du site et peut
       se fondre dans le texte (constaté 2026-09-07) ; on leur redonne une
       apparence de bouton explicite, sur le même principe "CTA secondaire
       outline" que le reste du site (bordure dorée, radius pilule), avec
       des variantes fonctionnelles pour les actions bleu/rouge/vert. --- */
}
.mod-assoc-membership-admin__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  margin-bottom: 1em;
}
.mod-assoc-membership-admin__toolbar input, .mod-assoc-membership-admin__toolbar select {
  padding: 0.35em 0.5em;
}
.mod-assoc-membership-admin__toolbar-spacer {
  flex: 1 1 auto;
}
.mod-assoc-membership-admin__table-wrap {
  overflow-x: auto;
}
.mod-assoc-membership-admin__table {
  width: 100%;
  border-collapse: collapse;
}
.mod-assoc-membership-admin__table th, .mod-assoc-membership-admin__table td {
  padding: 0.5em 0.6em;
  border-bottom: 1px solid #dde3ea;
  text-align: left;
  white-space: nowrap;
}
.mod-assoc-membership-admin__table tbody tr:hover {
  background: #f5f7fa;
}
.mod-assoc-membership-admin__badge {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 1em;
  font-size: 0.85em;
}
.mod-assoc-membership-admin__badge--active {
  background: #e3f5e6;
  color: #1e7a34;
}
.mod-assoc-membership-admin__badge--pending, .mod-assoc-membership-admin__badge--pending-exempt {
  background: #fff3cd;
  color: #8a6d1a;
}
.mod-assoc-membership-admin__badge--expired {
  background: #f5e3e3;
  color: #a3312c;
}
.mod-assoc-membership-admin__badge--renewed {
  background: #e3ecf5;
  color: #2a5ba3;
}
.mod-assoc-membership-admin__pagination {
  display: flex;
  gap: 0.75em;
  align-items: center;
  margin-top: 0.75em;
}
.mod-assoc-membership-admin__empty, .mod-assoc-membership-admin__loading {
  padding: 1em 0;
  opacity: 0.75;
}
.mod-assoc-membership-admin__edit {
  border: 1px solid #dde3ea;
  border-radius: 18px;
  padding: 1em;
  margin-top: 1em;
}
.mod-assoc-membership-admin__edit[hidden] {
  display: none;
}
.mod-assoc-membership-admin__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75em;
}
.mod-assoc-membership-admin [data-create-panel] .mod-assoc-membership-admin__grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5em 2em;
}
.mod-assoc-membership-admin [data-create-panel] .mod-assoc-membership-admin__field label {
  margin-bottom: 0.4em;
}
.mod-assoc-membership-admin [data-create-panel] .mod-assoc-membership-admin__field input, .mod-assoc-membership-admin [data-create-panel] .mod-assoc-membership-admin__field select {
  padding: 0.65em 0.75em;
  font-size: 1.05em;
}
.mod-assoc-membership-admin [data-create-panel] .mod-assoc-membership-admin__actions-row {
  margin-top: 1.5em;
}
.mod-assoc-membership-admin__field {
  /* Contrôle de saisie (2026-09-10, demande utilisateur - "un
           contrôle sur la saisie du champ email, au moins ce champ
           crucial") - liseré rouge posé/retiré en JS
           (markFieldInvalid()/clearFieldInvalid() dans tmpl/default.php)
           sur le conteneur __field englobant, pour rester cohérent quel
           que soit le type de champ (input/select) qu'il contient. */
  /* Case à cocher "Créer l'accès au site immédiatement" (2026-09-10) -
           seul champ de type checkbox de cet écran ; les règles input/select
           ci-dessus (width:100%, etc.) ne conviennent pas à une case à
           cocher, d'où ce modificateur dédié. */
}
.mod-assoc-membership-admin__field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25em;
}
.mod-assoc-membership-admin__field input, .mod-assoc-membership-admin__field select {
  width: 100%;
  padding: 0.4em 0.5em;
  box-sizing: border-box;
}
.mod-assoc-membership-admin__field--readonly {
  opacity: 0.75;
}
.mod-assoc-membership-admin__field--invalid input, .mod-assoc-membership-admin__field--invalid select {
  border-color: #a3312c;
  background: #fdf3f2;
}
.mod-assoc-membership-admin__field--checkbox label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  margin-bottom: 0.15em;
}
.mod-assoc-membership-admin__field--checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
}
.mod-assoc-membership-admin__field--checkbox .mod-assoc-membership-admin__hint {
  margin-top: 0;
}
.mod-assoc-membership-admin__actions-row {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  margin-top: 1em;
}
.mod-assoc-membership-admin__message {
  margin-top: 0.75em;
  padding: 0.5em 0.75em;
  border-radius: 18px;
}
.mod-assoc-membership-admin__message--error {
  background: #f5e3e3;
  color: #a3312c;
}
.mod-assoc-membership-admin__message--success {
  background: #e3f5e6;
  color: #1e7a34;
}
.mod-assoc-membership-admin__hint {
  opacity: 0.75;
  font-size: 0.9em;
  margin-top: 0.25em;
}
.mod-assoc-membership-admin button {
  display: inline-block;
  padding: 0.45em 1em;
  margin: 0;
  border: 1px solid #C5AE91;
  border-radius: 999px;
  background: transparent;
  color: #1A2B42;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.mod-assoc-membership-admin button:hover {
  background: #F7F4EB;
  border-color: #A08244;
}
.mod-assoc-membership-admin button:disabled {
  opacity: 0.5;
  cursor: default;
}
.mod-assoc-membership-admin__table td button {
  padding: 0.3em 0.75em;
  font-size: 0.9em;
}
.mod-assoc-membership-admin button[data-action="filter"], .mod-assoc-membership-admin button[data-action="save"], .mod-assoc-membership-admin button[data-action="submit-create"] {
  background: #2a5ba3;
  border-color: #2a5ba3;
  color: #fff;
}
.mod-assoc-membership-admin button[data-action="filter"]:hover, .mod-assoc-membership-admin button[data-action="save"]:hover, .mod-assoc-membership-admin button[data-action="submit-create"]:hover {
  background: #1e4680;
  border-color: #1e4680;
}
.mod-assoc-membership-admin button[data-action="close-membership"] {
  background: #a3312c;
  border-color: #a3312c;
  color: #fff;
}
.mod-assoc-membership-admin button[data-action="close-membership"]:hover {
  background: #832722;
  border-color: #832722;
}
.mod-assoc-membership-admin button[data-action="activate-membership"], .mod-assoc-membership-admin button[data-action="link-joomla-account"] {
  background: #1e7a34;
  border-color: #1e7a34;
  color: #fff;
}
.mod-assoc-membership-admin button[data-action="activate-membership"]:hover, .mod-assoc-membership-admin button[data-action="link-joomla-account"]:hover {
  background: #175c27;
  border-color: #175c27;
}
.mod-assoc-membership-admin a[data-action="download-document"] {
  display: inline-block;
  margin-top: 0.3em;
  font-weight: 600;
  text-decoration: underline;
}
/* Import défensif : comme les autres composants custom (_smart-slider.scss,
   _steps.scss, _mod-assoc-payment.scss...), au cas où ce bloc se
   recompilerait isolément en dehors de la chaîne normale du template. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   .cb-auth-buttons — bloc "Profil / Déconnexion" du module de connexion
   (comprofiler), posé dans un bloc Gantry "Equal Height" avec la classe
   utilitaire "center" (réglage "Content Alignment" de l'atome Block, très
   probablement display:flex + align-items:center sur .g-block lui-même -
   .g-content, plus bas, est en display:block, donc aucun centrage à ce
   niveau ni en dessous).

   .cb-auth-buttons est unique sur le site (confirmé) : on utilise
   :has(.cb-auth-buttons) pour remonter jusqu'au .g-block concerné et forcer
   son alignement à "Top" SANS toucher aux autres blocs "equal-height +
   center" du site, qui doivent rester centrés. !important nécessaire car
   .center est la classe posée par Gantry lui-même sur ce même sélecteur
   .g-block (spécificité égale, potentiellement chargée après ce fichier
   selon l'ordre de compilation des feuilles Gantry vs custom.scss).
   ========================================================================== */
.g-block.center:has(.cb-auth-buttons) {
  align-items: flex-start !important;
  margin-top: 1.5rem !important;
  margin-bottom: auto;
}
/* Import défensif : comme les autres composants custom (_smart-slider.scss,
   _steps.scss, _mod-assoc-payment.scss...), au cas où ce bloc se
   recompilerait isolément en dehors de la chaîne normale du template. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   ACYMAILING — page d'archive des newsletters ("Historique des newsletters")

   AcyMailing imprime son propre CSS non habillé (bouton bleu Bootstrap par
   défaut, input blanc sans bordure visible, liens/pagination bruts) - rien
   ici ne dépendait de custom/scss jusqu'à présent. Même logique que
   _convertforms.scss : on cible les classes réelles générées par
   l'extension (acym__*, pagination_*), aucune classe inventée.

   Volontairement HORS PÉRICÈTRE : la popup .acym__modal (iframe EngageBox
   qui affiche le contenu de la gazette elle-même) - son contenu dépend de
   ce que l'auteur de chaque newsletter y a mis, pas de nous, donc rien à
   styler côté site pour ce composant précis (demande explicite de
   l'utilisateur).
   ========================================================================== */
.acym__front__archive {
  /* --- Titre "Newsletters" ---
       AcyMailing embarque son propre CSS de titre qui écrase la règle h1
       globale du site (couleur $text au lieu du $primary attendu, visible
       sur la capture) - on réaligne explicitement sur la convention h1 du
       site plutôt que de laisser gagner la feuille de style de l'extension. */
  /* --- Barre de recherche : même traitement que .cf-input/.cf-btn de
       _convertforms.scss (champ texte + bouton), pour rester cohérent avec
       le seul autre formulaire déjà habillé du site. */
  /* --- Sous 768px : le champ texte + le bouton "Rechercher…" sur une
       même ligne n'ont plus la place de respirer (le bouton, flex:0 0 auto,
       ne rétrécit jamais, donc son texte finit par se replier sur
       lui-même). Deux mesures cumulées plutôt qu'une seule : on plafonne la
       largeur du champ pour qu'il n'accapare pas toute la ligne, ET on
       transforme le bouton en simple rond avec une loupe (Font Awesome,
       déjà utilisée ailleurs sur le site - cf. _steps.scss) - texte du
       bouton gardé dans le DOM (accessible, lu par un lecteur d'écran) mais
       masqué visuellement via font-size:0 plutôt que retiré du HTML. */
  /* --- Chaque newsletter de la liste : lien titre + date juste en
       dessous. Le <div class="acym__modal"> (popup, hors périmètre) est
       injecté par AcyMailing ENTRE le lien et sa date dans le DOM - il reste
       display:none tant qu'on ne clique pas, donc il n'interfère pas
       visuellement, mais ça empêche d'englober lien+date dans une vraie
       carte à bordure (%olh-card-base) sans toucher au HTML généré par
       l'extension. Traitement typographique + séparateur à la place. */
  /* --- Pagination : flèches en boutons ronds façon .social-icon-btn
       (_top-contact.scss), numéro de page façon mini .cf-input, "sur X" en
       texte discret. */
}
.acym__front__archive .acym__front__archive__title {
  font-family: "Sniglet", sans-serif;
  font-weight: 400;
  color: #C6A969;
  margin-bottom: 1.25rem;
}
.acym__front__archive #acym__front__archive__search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.75rem;
}
.acym__front__archive #acym__front__archive__search input[name="acym_search"] {
  flex: 1 1 220px;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: #1A2B42;
  background-color: #ffffff;
  border: 1px solid #E0C69F !important;
  border-radius: 12px !important;
  padding: 0.75rem 1rem;
  transition: 0.3s ease;
}
.acym__front__archive #acym__front__archive__search input[name="acym_search"]:focus {
  outline: none;
  border-color: #C6A969 !important;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.15);
}
.acym__front__archive #acym__front__archive__search .subbutton {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2.25rem !important;
  background: transparent !important;
  border: 1px solid #671d2f !important;
  border-radius: 999px !important;
  color: #671d2f !important;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.3s ease;
}
.acym__front__archive #acym__front__archive__search .subbutton:hover {
  background-color: rgba(103, 29, 47, 0.08) !important;
  border-color: #471420 !important;
  color: #471420 !important;
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .acym__front__archive #acym__front__archive__search input[name="acym_search"] {
    flex: 1 1 auto;
    max-width: 280px;
  }
  .acym__front__archive #acym__front__archive__search .subbutton {
    width: 44px;
    height: 44px;
    padding: 0 !important;
    gap: 0;
    /* !important indispensable : sans lui, un font-size posé par
                   ailleurs (CSS natif d'AcyMailing, ou Bootstrap via les
                   classes .button.btn.btn-primary présentes sur ce bouton)
                   peut gagner et laisser le texte "Rechercher…" visible à
                   côté de la loupe au lieu de disparaître - vécu en direct
                   sur ce même bouton. */
    font-size: 0 !important;
    border-radius: 18px !important;
    justify-content: center;
  }
  .acym__front__archive #acym__front__archive__search .subbutton::after {
    content: "";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1rem;
    color: inherit;
  }
}
.acym__front__archive .acym__modal__handle {
  display: inline-block;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #1A2B42;
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s ease;
}
.acym__front__archive .acym__modal__handle:hover {
  color: #A08244;
}
.acym__front__archive .acym__front__archive__newsletter_sending-date {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  color: #52637A;
  margin: 0.25rem 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(103, 29, 47, 0.15);
}
.acym__front__archive .pagination {
  margin-top: 1.5rem;
}
.acym__front__archive .pagination-previous, .acym__front__archive .pagination-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  color: #52637A;
  cursor: pointer;
  transition: 0.3s ease;
  /* Sur cette page, les 2 flèches sont "pagination_disabled" (une
           seule page d'archive pour l'instant) - état visuellement neutre
           plutôt que cliquable en apparence. */
}
.acym__front__archive .pagination-previous .pagination__i, .acym__front__archive .pagination-next .pagination__i {
  font-size: 0.9rem;
  color: inherit;
}
.acym__front__archive .pagination-previous:not(.pagination_disabled):hover, .acym__front__archive .pagination-next:not(.pagination_disabled):hover {
  color: #C6A969;
  background-color: #ffffff;
  border-color: rgba(198, 169, 105, 0.6);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
}
.acym__front__archive .pagination-previous.pagination_disabled, .acym__front__archive .pagination-next.pagination_disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.acym__front__archive .pagination_border_left, .acym__front__archive .pagination_border_right {
  width: 1px;
  align-self: stretch;
  background-color: rgba(103, 29, 47, 0.2);
  margin: 0 0.6rem;
}
.acym__front__archive .pagination_input {
  width: 44px;
  text-align: center;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  color: #1A2B42;
  background-color: #ffffff;
  border: 1px solid #E0C69F !important;
  border-radius: 8px !important;
  padding: 0.35rem 0.25rem;
  transition: 0.3s ease;
}
.acym__front__archive .pagination_input:focus {
  outline: none;
  border-color: #C6A969 !important;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.15);
}
.acym__front__archive .pagination_text {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  font-size: 0.9rem;
  margin: 0 0 0 0.6rem;
}
/* Import défensif : comme les autres composants custom (_smart-slider.scss,
   _steps.scss, _mod-assoc-payment.scss, _acymailing.scss...), au cas où ce
   bloc se recompilerait isolément en dehors de la chaîne normale du template. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   PAGE CONTACT COMPLÈTE ("Contactez-nous")

   Layout 2 colonnes desktop : à gauche les infos (adresse/tél/mail/Insta +
   carte), à droite le formulaire ConvertForms. Sous $breakpoint-tablet, tout
   s'empile en une colonne (infos+carte d'abord, formulaire ensuite).
   ========================================================================== */
.contact-page {
  /* --- Cartes d'infos (adresse/tél/mail/Insta) --- */
  /* --- Carte Google Maps --- */
  /* --- Bloc formulaire ---
       Pas de carte ici : .convertforms .cf-form-wrap (_convertforms.scss)
       donne déjà sa propre carte (fond/bordure/rayon/ombre/padding) à TOUS
       les formulaires ConvertForms du site - en superposer une seconde ici
       créait un cadre dans le cadre (+ 2 x 2rem de padding cumulés). */
}
.contact-page__intro {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 60rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.contact-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 768px) {
  .contact-page__layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.contact-page__aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* Empêche cette colonne de forcer le track "1fr" du parent grid
           (__layout, sous $breakpoint-tablet) à s'élargir au-delà de sa
           largeur réelle - cf. commentaire détaillé sur __form-wrap juste
           en dessous, même cause. */
  min-width: 0;
}
.contact-page__info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 576px) {
  .contact-page__info-grid {
    grid-template-columns: 1fr;
  }
}
.contact-page__info-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1.1rem 1.25rem;
}
.contact-page__info-card:hover {
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  border-color: rgba(198, 169, 105, 0.5);
}
.contact-page__info-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(198, 169, 105, 0.12);
  color: #A08244;
  margin-bottom: 0.15rem;
  /* Icônes "pleines" (Font Awesome Free) */
  /* Instagram est une icône de MARQUE : famille de police différente
           ("Font Awesome 6 Brands"), pas de graisse 900 disponible sur les
           brand icons - piège classique (icône invisible) si on copie/colle
           le même font-weight que les icônes solides ci-dessus. */
}
.contact-page__info-icon::before {
  font-size: 0.95rem;
}
.contact-page__info-icon--location::before, .contact-page__info-icon--phone::before, .contact-page__info-icon--email::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
.contact-page__info-icon--instagram::before {
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}
.contact-page__info-icon--location::before {
  content: "";
}
.contact-page__info-icon--phone::before {
  content: "";
}
.contact-page__info-icon--email::before {
  content: "";
}
.contact-page__info-icon--instagram::before {
  content: "";
}
.contact-page__info-label {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #52637A;
}
.contact-page__info-value {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #1A2B42;
  text-decoration: none;
  line-height: 1.4;
  transition: 0.3s ease;
}
.contact-page__info-value:hover {
  color: #A08244;
}
.contact-page__map {
  overflow: hidden;
  padding: 0;
  aspect-ratio: 1.3333333333;
}
.contact-page__map iframe {
  display: block;
  width: 100%;
  height: 100%;
}
.contact-page__form-wrap {
  /* Débordement mobile ("on coupe le contenu à droite") : sous
           $breakpoint-tablet, __layout passe à une seule colonne "1fr"
           partagée par __aside ET __form-wrap. Par défaut, une grille
           CSS ne laisse jamais un track descendre sous le contenu
           minimal du plus exigeant de ses éléments (min-width: auto
           implicite) - or la grille interne de ConvertForms (paire de
           champs Prénom/Nom côte à côte, cf-fields/cf-one-half) a un
           besoin minimal d'environ 436px, mesuré directement dans le
           navigateur (Prénom+Nom ne peuvent pas passer à la ligne sans
           qu'on leur en laisse la possibilité). Résultat : tout le
           track - donc aussi __aside, ses cartes et la carte Google
           Maps, qui n'y sont pour rien - était étiré à 436px sur un
           espace disponible de 368px, d'où le débordement à droite.
           min-width: 0 autorise ce bloc à rétrécir sous ce minimum ;
           son propre contenu se réorganise alors normalement (les
           champs repassent en colonne) plutôt que de pousser toute la
           page plus large que l'écran. */
  min-width: 0;
}
.contact-page__form-title {
  margin-top: 0;
  margin-bottom: 1rem;
}
/* Import défensif : comme les autres composants custom (_smart-slider.scss,
   _steps.scss, _mod-assoc-payment.scss, _contact-page.scss...), au cas où ce
   bloc se recompilerait isolément en dehors de la chaîne normale du template. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   LOADER SUR LA PAGE GANTRY "EMPTY" (itemid 530)
   --------------------------------------------------------------------------
   Cette page sert de relais dans une iframe EngageBox (connexion Community
   Builder, retour de paiement HelloAsso...) : son seul contenu réel est un
   conteneur de messages système Joomla, vide la plupart du temps. Le temps
   que le script (EngageBox / Tassos Marinos) détecte le changement et
   ferme/redirige la popup, l'utilisateur ne voyait qu'une page blanche
   pendant quelques secondes - remplacé ici par un loader purement
   décoratif en CSS pur, sans rien toucher côté Joomla/Gantry/EngageBox
   (qui gère seul le timing réel de la bascule).

   Ciblage : le body porte la classe "itemid-530" sur cette page précise
   (constaté sur le HTML fourni) - donc aucun effet sur le reste du site.

   Hébergement du loader : #system-message-container plutôt que
   #g-page-surround, qui utilise déjà ses propres ::before/::after pour le
   fond étoilé du site (custom.scss) - les réutiliser ici les aurait
   remplacés sur cette page. En les laissant tranquilles, le fond étoilé
   reste visible derrière le loader (passé en position fixe, superposé).
   ========================================================================== */
body.itemid-530 #system-message-container {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  /* Anneau façon "spinner-border" Bootstrap : un quart transparent qui
       tourne, plutôt qu'un arc plein sur fond pâle. */
}
body.itemid-530 #system-message-container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -34px 0 0 -24px;
  border: 4px solid #C6A969;
  border-right-color: transparent;
  border-radius: 50%;
  animation: umalh-empty-loader-spin 0.75s linear infinite;
}
body.itemid-530 #system-message-container::after {
  content: "Un instant…";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 20px;
  transform: translateX(-50%);
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  font-size: 0.9rem;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  body.itemid-530 #system-message-container::before {
    animation: none;
  }
}
@keyframes umalh-empty-loader-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Import défensif : comme les autres composants custom (_smart-slider.scss,
   _steps.scss, _contact-page.scss, _empty-loader.scss...), au cas où ce bloc
   se recompilerait isolément en dehors de la chaîne normale du template. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   FORMULAIRE DE CONNEXION COMMUNITY BUILDER (CB Login)
   --------------------------------------------------------------------------
   Affiché sans aucun style du site dans la popup EngageBox #1 (bouton
   "Connexion") - HTML réel fourni par l'utilisateur (2026-08-22). Les
   ids/classes ci-dessous sont ceux générés par com_comprofiler lui-même
   (#login-form, .cbLoginForm, #form-login-username, #form-login-password,
   #form-login-remember, #form-login-links, .cb_template...), aucune classe
   inventée - même logique que _convertforms.scss.

   Pas de scope "popup uniquement" nécessaire : ces ids sont propres à la
   vue de connexion CB elle-même, donc sans risque de fuite sur d'autres
   pages même si ce même formulaire venait à être affiché ailleurs qu'en
   popup.
   ========================================================================== */
#login-form {
  max-width: 380px;
  margin: 0 auto;
  padding: 2rem;
  background-color: #FFFFFF;
  /* --- Champs identifiant / mot de passe : par défaut, l'icône (span
       .cb_template) s'affiche sur sa propre ligne au-dessus du champ (voir
       capture) - repositionnée ici en overlay à gauche de l'input, comme
       les champs .cf-input du reste du site. */
  /* --- Liens "Mot de passe perdu" / "S'enregistrer" : liste à puces par
       défaut (voir capture) -> ligne discrète sans puces, séparée du
       formulaire par un filet fin. */
}
#login-form .userdata {
  border: 0;
  margin: 0;
  padding: 0;
}
#login-form #form-login-username, #login-form #form-login-password {
  position: relative;
  margin: 0 0 1.1rem;
}
#login-form #form-login-username .cb_template, #login-form #form-login-password .cb_template {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  transform: translateY(-50%);
  color: #A08244;
  font-size: 0.95rem;
  pointer-events: none;
  z-index: 1;
}
#login-form #form-login-username input.inputbox, #login-form #form-login-password input.inputbox {
  width: 100%;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: #1A2B42;
  background-color: #ffffff;
  border: 1px solid #E0C69F;
  border-radius: 12px;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  transition: 0.3s ease;
}
#login-form #form-login-username input.inputbox:focus, #login-form #form-login-password input.inputbox:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.15);
}
#login-form #form-login-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  font-size: 0.9rem;
}
#login-form #form-login-remember label {
  margin: 0;
  order: 1;
}
#login-form #form-login-remember input[type="checkbox"] {
  order: 2;
  accent-color: #A08244;
  width: 16px;
  height: 16px;
  margin: 0;
}
#login-form button[type="submit"] {
  width: 100%;
}
#login-form #form-login-links {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(103, 29, 47, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
#login-form #form-login-links li {
  margin: 0;
}
#login-form #form-login-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  text-decoration: none;
  transition: 0.3s ease;
}
#login-form #form-login-links a:hover {
  color: #C6A969;
  text-decoration: underline;
}
#login-form #form-login-links .cb_template {
  color: inherit;
  font-size: 0.9rem;
}
/* Import défensif : comme les autres composants custom (_cb-login.scss,
   _empty-loader.scss, _contact-page.scss...), au cas où ce bloc se
   recompilerait isolément en dehors de la chaîne normale du template. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   FORMULAIRE D'INSCRIPTION COMMUNITY BUILDER (CB Register)
   --------------------------------------------------------------------------
   Affiché sans aucun style du site (vue "view-registers", itemid-113) -
   HTML réel fourni par l'utilisateur (2026-08-22). Les ids/classes
   ci-dessous sont ceux générés par com_comprofiler lui-même
   (#cbcheckedadminForm, .cbRegistration, .cbRegistrationFlat,
   .cbRegistrationHeader, .cbRegistrationTitle, #registrationTable,
   .cbRegistrationDiv, .cb_form_line, .cb_field, .cbFieldIcons,
   .cbPasswordUnmask, .cbRegistrationButtons, .cbRegistrationSubmit,
   .cbPoweredBy...), aucune classe inventée - même logique que
   _cb-login.scss.

   Contrairement à la vue Login (mise en page verticale simple), cette vue
   utilise la grille Bootstrap 5 du composant lui-même (row / col-sm-3 /
   col-sm-9 / offset-sm-3) pour poser chaque étiquette à gauche et son
   champ à droite - on la laisse faire son travail de mise en page et on
   n'intervient que sur l'habillage (carte, typographie, champs, icônes,
   bouton), pour rester cohérent avec _cb-login.scss sans dupliquer sa
   logique de grille.
   ========================================================================== */
.cbRegistration.cbRegistrationFlat {
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem;
  background-color: #FFFFFF;
  /* --- En-tête ("Rejoignez-nous !") --- */
  /* --- Lignes de champs : étiquette + champ, posées par la grille
       Bootstrap du composant (row / col-sm-3 / col-sm-9) - on ne touche
       qu'à l'espacement vertical et à la typographie. --- */
  /* --- Pied "Powered by Community Builder" : discret, pas mis en
       avant. --- */
}
.cbRegistration.cbRegistrationFlat .cbRegistrationHeader {
  margin-bottom: 1.5rem;
  text-align: center;
}
.cbRegistration.cbRegistrationFlat .cbRegistrationTitle {
  margin: 0;
  font-family: "Sniglet", sans-serif;
  color: #A08244;
  font-size: 1.4rem;
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv {
  /* --- Conteneur du champ : position relative pour accrocher les
           icônes (étoile "obligatoire" / oeil "afficher le mot de passe")
           en overlay à droite, comme .cf-input ailleurs sur le site. --- */
  /* --- Ligne du bouton d'envoi (posée en offset-sm-3 par le
           composant pour s'aligner sous les champs, pas sous les
           étiquettes) : on neutralise cet offset et la largeur imposés
           par la grille Bootstrap pour que le bouton occupe toute la
           largeur utile de la carte, alignée avec les champs au-dessus,
           plutôt que de rester décalé/décentré. --- */
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_form_line {
  margin: 0 0 1.1rem;
}
@media (max-width: 576px) {
  .cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_form_line {
    margin-bottom: 1.25rem;
  }
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .col-form-label {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  font-size: 0.9rem;
  padding-top: 0.7rem;
}
@media (max-width: 576px) {
  .cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .col-form-label {
    padding-top: 0;
    margin-bottom: 0.4rem;
  }
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field {
  position: relative;
  /* --- Champ mot de passe : structure réelle (fournie le
               2026-08-23) -
                 .input-group.d-inline-flex.w-auto.cbPasswordUnmask
                   input.form-control
                   .input-group-append
                     button.cbPasswordUnmaskShow ("Afficher")
                     button.cbPasswordUnmaskHide.hidden ("Cacher")
               Les boutons sont dans .input-group-append, pas directement
               enfants de .input-group : la largeur fixe posée sur les
               boutons eux-mêmes (sans tenir compte de ce conteneur
               intermédiaire, ni du texte "Afficher"/"Cacher" plus large
               qu'une icône) faisait déborder le bouton hors du champ.
               Ici, .input-group-append devient lui aussi un item flex, et
               les boutons gardent une largeur automatique (juste assez
               de padding autour du texte). --- */
  /* --- Icônes (étoile "obligatoire" / oeil barré "non visible
               dans le profil") : sur le champ mot de passe, elles sont
               suivies par le bouton afficher/masquer - décalées vers la
               gauche pour ne pas se superposer à ce bouton. --- */
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field input.form-control, .cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field select.form-control {
  width: 100%;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: #1A2B42;
  background-color: #ffffff;
  border: 1px solid #E0C69F;
  border-radius: 12px;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  transition: 0.3s ease;
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field input.form-control:focus, .cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field select.form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.15);
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .cbFieldIcons {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #A08244;
  pointer-events: none;
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .cbFieldIcons .text-muted {
  color: #A08244 !important;
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid #E0C69F;
  border-radius: 12px;
  background-color: #ffffff;
  transition: 0.3s ease;
  overflow: hidden;
  /* --- Boutons afficher/masquer : le HTML réel les pose avec
                   plusieurs classes utilitaires Bootstrap (.border,
                   .text-body, .rounded-0, .btn-outline-light) qui posent
                   leurs propres bordure/couleur/rayon en !important - un
                   simple survol de ces règles ne suffisait pas, elles
                   gagnaient quand même la cascade. On reprend donc la main
                   avec !important sur les mêmes propriétés, et on bascule
                   le texte "Afficher"/"Cacher" (trop large pour un bouton
                   étroit) en icône seule (oeil / oeil barré), le texte
                   d'origine restant présent pour les lecteurs d'écran. --- */
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask:focus-within {
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.15);
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask input.form-control {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  /* Espace réservé à droite pour ne pas passer sous les
                       icônes (.cbFieldIcons, repositionnées plus loin car
                       ce champ a aussi un bouton accolé). */
  padding: 0.75rem 3.75rem 0.75rem 1rem;
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask input.form-control:focus {
  border: 0;
  box-shadow: none !important;
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask .input-group-append {
  display: flex;
  flex: 0 0 auto;
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskShow, .cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskHide {
  position: relative;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2.75rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid #E0C69F !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: #A08244 !important;
  cursor: pointer;
  transition: 0.3s ease;
  /* Masque le texte "Afficher"/"Cacher" visuellement tout en le
                       gardant dans le DOM pour l'accessibilité. font-size: 0 ne
                       suffisait pas : certains navigateurs imposent une taille de
                       police minimale (réglage d'accessibilité) qui passe outre -
                       le texte réapparaissait, tronqué, à côté de l'icône.
                       text-indent + overflow: hidden est robuste face à ce
                       réglage, quelle que soit la taille de police forcée. */
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  /* Icône positionnée en absolu, complètement détachée du flux
                       de texte du bouton (donc non affectée par le text-indent
                       ci-dessus) et toujours centrée quel que soit son contenu. */
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskShow::before, .cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskHide::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-indent: 0;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.95rem;
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskShow:hover, .cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskShow:focus, .cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskHide:hover, .cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskHide:focus {
  color: #C6A969 !important;
  background-color: rgba(198, 169, 105, 0.08) !important;
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskShow.hidden, .cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskHide.hidden {
  display: none !important;
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskShow::before {
  content: "";
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskHide::before {
  content: "";
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cb_field .cbPasswordUnmask ~ .cbFieldIcons {
  right: 3.75rem;
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cbRegistrationButtons {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}
.cbRegistration.cbRegistrationFlat #registrationTable.cbRegistrationDiv .cbRegistrationButtons > [class*="col-"] {
  flex: 1 1 auto;
  max-width: 100%;
  margin-left: 0;
  align-items: center;
  text-align: center;
}
.cbRegistration.cbRegistrationFlat .cbRegistrationSubmit {
  align-items: center;
  text-align: center;
}
.cbRegistration.cbRegistrationFlat .cbPoweredBy {
  display: block;
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  align-items: center;
  text-align: center;
}
.cbRegistration.cbRegistrationFlat .cbPoweredBy a {
  color: #52637A;
  text-decoration: none;
  transition: 0.3s ease;
}
.cbRegistration.cbRegistrationFlat .cbPoweredBy a:hover {
  color: #A08244;
  text-decoration: underline;
}
/* Import défensif : comme les autres composants custom (_cb-login.scss,
   _cb-register.scss, _empty-loader.scss...), au cas où ce bloc se
   recompilerait isolément en dehors de la chaîne normale du template. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   FORMULAIRE "MOT DE PASSE PERDU" COMMUNITY BUILDER (CB Lost Password)
   --------------------------------------------------------------------------
   Affiché sans aucun style du site - HTML réel fourni par l'utilisateur
   (2026-08-22, fragment .cbLostPassForm). Les ids/classes ci-dessous sont
   ceux générés par com_comprofiler lui-même (.cbLostPassForm, .cb-page-header,
   #lostpassreminder, .form-check-inline, #lostusernamedesc,
   #lostusernamepassdesc, #lostpassdesc, #lostpassusername, #lostpassemail,
   .cbLostPassSend...), aucune classe inventée - même logique que
   _cb-login.scss / _cb-register.scss.

   IMPORTANT : cette vue est pilotée par le propre JS de Community Builder
   (les cases "Identifiant perdu" / "Mot de passe perdu" affichent/masquent
   dynamiquement les blocs descriptifs, les champs et le bouton d'envoi via
   les attributs style="display:none" et disabled posés/retirés en JS). Ce
   fichier n'habille QUE l'apparence visuelle - aucune règle ici ne force
   ou ne bloque un display/disabled : on laisse le JS du composant décider
   seul de ce qui est visible, comme pour le loader de la page "Empty".
   ========================================================================== */
.cbLostPassForm.cb_template.cb_template_default {
  max-width: 420px;
  margin: 0 auto;
  padding: 2rem;
  background-color: #FFFFFF;
  /* --- En-tête --- */
  /* --- Cases "Identifiant perdu" / "Mot de passe perdu" ---
       Structure réelle (fournie le 2026-08-23) : #lostpassreminder EST le
       .form-group.row lui-même, avec une étiquette "Rappel nécessaire pour"
       en .col-form-label.col-sm-3 à gauche, et les deux cases dans un
       .cb_field.col-sm-9 à droite - comme les autres lignes de Registration.
       Coincée dans une colonne à 25% de large, cette étiquette de 3 mots
       repassait à la ligne mot par mot : on la fait passer en pleine
       largeur (au-dessus des cases, sur une seule ligne) plutôt que de la
       laisser dans l'étroite colonne de gauche. */
  /* --- Blocs explicatifs (masqués/affichés en JS selon la case cochée) :
       petit encart discret plutôt qu'un simple paragraphe brut. --- */
  /* --- Champs identifiant / e-mail (également affichés/masqués en JS) --- */
  /* --- Bouton d'envoi : masqué/désactivé par défaut par le JS du
       composant tant qu'aucune case n'est cochée - on n'habille que son
       apparence, y compris son état :disabled, sans jamais toucher aux
       attributs style/disabled eux-mêmes. --- */
}
.cbLostPassForm.cb_template.cb_template_default .cb-page-header {
  margin-bottom: 1.5rem;
  text-align: center;
}
.cbLostPassForm.cb_template.cb_template_default .cb-page-header h1, .cbLostPassForm.cb_template.cb_template_default .cb-page-header h2, .cbLostPassForm.cb_template.cb_template_default .cb-page-header .cb-user-welcome span, .cb-user-welcome .cbLostPassForm.cb_template.cb_template_default .cb-page-header span, .cbLostPassForm.cb_template.cb_template_default .cb-page-header h3 {
  margin: 0;
  font-family: "Sniglet", sans-serif;
  color: #A08244;
  font-size: 1.25rem;
  line-height: 1.4;
}
.cbLostPassForm.cb_template.cb_template_default #lostpassreminder {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
}
.cbLostPassForm.cb_template.cb_template_default #lostpassreminder .col-form-label {
  flex: 0 0 100%;
  max-width: 100%;
  margin: 0 0 0.75rem;
  padding: 0;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  font-size: 0.9rem;
  white-space: nowrap;
}
.cbLostPassForm.cb_template.cb_template_default #lostpassreminder .cb_field {
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
.cbLostPassForm.cb_template.cb_template_default #lostpassreminder .form-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.cbLostPassForm.cb_template.cb_template_default #lostpassreminder .form-check-label {
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #1A2B42;
  font-size: 0.9rem;
}
.cbLostPassForm.cb_template.cb_template_default #lostpassreminder .form-check-input {
  accent-color: #A08244;
  width: 16px;
  height: 16px;
  margin: 0;
}
.cbLostPassForm.cb_template.cb_template_default #lostusernamedesc, .cbLostPassForm.cb_template.cb_template_default #lostusernamepassdesc, .cbLostPassForm.cb_template.cb_template_default #lostpassdesc {
  background-color: #F7F4EB;
  border-left: 3px solid #E0C69F;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 0 0 1.25rem;
  font-family: "Nunito", sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #52637A;
}
.cbLostPassForm.cb_template.cb_template_default #lostpassusername, .cbLostPassForm.cb_template.cb_template_default #lostpassemail {
  margin: 0 0 1.25rem;
}
.cbLostPassForm.cb_template.cb_template_default #lostpassusername label, .cbLostPassForm.cb_template.cb_template_default #lostpassemail label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  font-size: 0.9rem;
}
.cbLostPassForm.cb_template.cb_template_default #lostpassusername input, .cbLostPassForm.cb_template.cb_template_default #lostpassemail input {
  width: 100%;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: #1A2B42;
  background-color: #ffffff;
  border: 1px solid #E0C69F;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  transition: 0.3s ease;
}
.cbLostPassForm.cb_template.cb_template_default #lostpassusername input:focus, .cbLostPassForm.cb_template.cb_template_default #lostpassemail input:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.15);
}
.cbLostPassForm.cb_template.cb_template_default .cbLostPassSend {
  display: inline-block;
  width: 100%;
  border: none;
  border-radius: 8px;
  background-color: #671d2f;
  color: #C6A969;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  transition: 0.3s ease;
  margin-top: 0.5rem;
}
.cbLostPassForm.cb_template.cb_template_default .cbLostPassSend:hover, .cbLostPassForm.cb_template.cb_template_default .cbLostPassSend:focus {
  background-color: #531726;
}
.cbLostPassForm.cb_template.cb_template_default .cbLostPassSend:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #671d2f;
}
/* Import défensif : comme les autres composants custom (_cb-login.scss,
   _cb-register.scss, _cb-lostpass.scss...), au cas où ce bloc se
   recompilerait isolément en dehors de la chaîne normale du template. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   PAGE DE VUE DU PROFIL COMMUNITY BUILDER (CB Profile View - cb-profile)
   --------------------------------------------------------------------------
   Affichée sans aucun style du site (bandeau dégradé brut, barre de menu
   Bootstrap non habillée, onglets nus) - HTML réel fourni par l'utilisateur
   (2026-08-23). Les ids/classes ci-dessous sont ceux générés par
   com_comprofiler lui-même (.cbProfile, .cbProfileCanvasOther, .cbNavBar,
   .cbPosCanvas, .cbCanvasLayout, .cbTabsMenu, .cbTabNavLink...), aucune
   classe inventée - même logique que _cb-login.scss / _cb-register.scss.

   IMPORTANT : plusieurs éléments réels portent des classes utilitaires
   Bootstrap posées en !important par le thème lui-même (.bg-light, .border,
   .rounded, .text-muted, .badge-light...) - cf. leçon apprise sur les
   boutons afficher/masquer de _cb-register.scss. Tout ce qui touche à ces
   éléments reprend donc la main avec !important sur les mêmes propriétés.
   ========================================================================== */
.cbProfile.cbProfileCanvasOther {
  max-width: 900px;
  margin: 0 auto 2rem;
  padding: 0;
  overflow: hidden;
  background-color: #FFFFFF;
  /* --- Barre de menu ("Editer" / "Relations directes") : posée par le
       composant en .navbar.bg-light.border.rounded Bootstrap brut - on
       reprend son propre habillage (fond, bordure, angles) plutôt que de
       le laisser tel quel, pour qu'elle s'intègre à la carte au lieu de
       flotter par-dessus. --- */
  /* --- Bandeau dégradé (fond) + avatar/titre (ligne du bas) --- */
  /* Avatar : remonté à cheval sur le bandeau (coordonnées explicites,
       cf. remarque ci-dessus), cerclé de blanc pour se détacher proprement
       du dégradé derrière lui. */
  /* --- Zone principale à onglets --- */
  /* Contenu des onglets : ligne "Nom formaté", tableau des articles/blogs */
  /* --- Colonne de droite : membre depuis / dernière connexion --- */
  /* --- Pied "Powered by Community Builder" --- */
}
.cbProfile.cbProfileCanvasOther .cbNavBar.cbMenuNavBar {
  background-color: #F7F4EB !important;
  border: 0 !important;
  border-bottom: 1px solid #671d2f !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding: 0.4rem 1.5rem;
  /* Bouton "Plus" (menu qui déborde sur mobile) */
  /* Icône messagerie privée */
}
.cbProfile.cbProfileCanvasOther .cbNavBar.cbMenuNavBar .cbNavBarLink {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #1A2B42;
  transition: 0.3s ease;
}
.cbProfile.cbProfileCanvasOther .cbNavBar.cbMenuNavBar .cbNavBarLink:hover, .cbProfile.cbProfileCanvasOther .cbNavBar.cbMenuNavBar .cbNavBarLink:focus {
  color: #A08244;
}
.cbProfile.cbProfileCanvasOther .cbNavBar.cbMenuNavBar .dropdown-menu.cbSubMenu {
  border: 1px solid #E0C69F;
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  padding: 0.4rem;
}
.cbProfile.cbProfileCanvasOther .cbNavBar.cbMenuNavBar .dropdown-menu.cbSubMenu .dropdown-item {
  font-family: "Nunito", sans-serif;
  font-size: 0.9rem;
  color: #1A2B42;
  border-radius: 8px;
  transition: 0.3s ease;
}
.cbProfile.cbProfileCanvasOther .cbNavBar.cbMenuNavBar .dropdown-menu.cbSubMenu .dropdown-item:hover, .cbProfile.cbProfileCanvasOther .cbNavBar.cbMenuNavBar .dropdown-menu.cbSubMenu .dropdown-item:focus {
  background-color: #F7F4EB;
  color: #A08244;
}
.cbProfile.cbProfileCanvasOther .cbNavBar.cbMenuNavBar .cbNavBarOverflow .cbNavBarLink {
  color: #A08244;
}
.cbProfile.cbProfileCanvasOther .cbNavBar.cbMenuNavBar .cbPMSMessages {
  color: #A08244 !important;
}
.cbProfile.cbProfileCanvasOther .cbNavBar.cbMenuNavBar .cbPMSMessages:hover, .cbProfile.cbProfileCanvasOther .cbNavBar.cbMenuNavBar .cbPMSMessages:focus {
  color: #C6A969 !important;
}
.cbProfile.cbProfileCanvasOther .cbPosCanvasTop.cbCanvasLayoutTop {
  background-color: transparent !important;
  min-height: 150px;
}
.cbProfile.cbProfileCanvasOther .cbPosCanvasBottom.cbCanvasLayoutBottom {
  /* Devient le repère de positionnement de l'avatar ci-dessous (le
           HTML réel pose déjà .position-absolute sur .cbPosCanvasPhoto
           sans coordonnées top/left - sans un ancêtre position:relative
           PROCHE, l'élément retombe à sa position "statique" par défaut du
           navigateur, loin du bandeau visé - constaté en vérification
           Playwright avant correction). */
  position: relative;
  background-color: #FFFFFF !important;
  border-top: 0 !important;
  padding: 0 1.5rem 1.25rem;
}
.cbProfile.cbProfileCanvasOther .cbPosCanvasPhoto.cbCanvasLayoutPhoto {
  position: absolute;
  left: 1.5rem;
  top: -2.5rem;
}
.cbProfile.cbProfileCanvasOther .cbPosCanvasPhoto.cbCanvasLayoutPhoto .cbImgAvatar {
  width: 84px;
  height: 84px;
  border: 4px solid #FFFFFF !important;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
}
.cbProfile.cbProfileCanvasOther .cb_online.text-success {
  font-size: 0.8rem;
  font-family: "Nunito", sans-serif;
  color: #657A58 !important;
}
.cbProfile.cbProfileCanvasOther .cbProfileTitle {
  border-bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.cbProfile.cbProfileCanvasOther .cbProfileTitle .cb-page-header-title {
  margin: 0;
  font-family: "Sniglet", sans-serif;
  color: #A08244;
  font-size: 1.5rem;
}
.cbProfile.cbProfileCanvasOther .cbPosCanvasStats.cbCanvasLayoutCounters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.4rem;
}
.cbProfile.cbProfileCanvasOther .cbPosCanvasStats.cbCanvasLayoutCounters .cb_form_line {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
}
.cbProfile.cbProfileCanvasOther .cbPosCanvasStats.cbCanvasLayoutCounters .col-form-label {
  padding: 0;
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-size: 0.8rem;
  color: #52637A;
}
.cbProfile.cbProfileCanvasOther .cbPosCanvasStats.cbCanvasLayoutCounters .cb_field {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  color: #1A2B42;
}
.cbProfile.cbProfileCanvasOther .cbPosCanvasMain.cbCanvasLayoutMain {
  padding: 1.5rem;
}
.cbProfile.cbProfileCanvasOther .cbTabsMenuNavBar {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid #E0C69F !important;
  border-radius: 0 !important;
  margin-bottom: 1.5rem !important;
  padding: 0;
  /* Bouton "..." (onglets qui débordent sur desktop) */
}
.cbProfile.cbProfileCanvasOther .cbTabsMenuNavBar .cbTabNavLink {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  padding: 0.6rem 0.9rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: 0.3s ease;
}
.cbProfile.cbProfileCanvasOther .cbTabsMenuNavBar .cbTabNavLink.active {
  color: #A08244;
  font-weight: 700;
  border-bottom-color: #A08244;
  background-color: transparent;
}
.cbProfile.cbProfileCanvasOther .cbTabsMenuNavBar .cbTabNavLink:hover, .cbProfile.cbProfileCanvasOther .cbTabsMenuNavBar .cbTabNavLink:focus {
  color: #A08244;
}
.cbProfile.cbProfileCanvasOther .cbTabsMenuNavBar .cbTabNavLink .badge {
  background-color: #F7F4EB !important;
  border-color: #E0C69F !important;
  color: #A08244 !important;
  font-weight: 400;
}
.cbProfile.cbProfileCanvasOther .cbTabsMenuNavBar .cbTabNavMenuMoreBtn {
  color: #52637A;
}
.cbProfile.cbProfileCanvasOther .cbTabsMenuNavBar .cbTabNavMenuMoreBtn:hover, .cbProfile.cbProfileCanvasOther .cbTabsMenuNavBar .cbTabNavMenuMoreBtn:focus {
  color: #A08244;
}
.cbProfile.cbProfileCanvasOther .cbTabsMenuNavBar .cbTabsSubMenuNav {
  border: 1px solid #E0C69F;
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
}
.cbProfile.cbProfileCanvasOther .cbTabsMenuNavBar .cbTabsSubMenuNav .dropdown-item {
  font-family: "Nunito", sans-serif;
  font-size: 0.9rem;
  color: #1A2B42;
}
.cbProfile.cbProfileCanvasOther .cbTabsMenuNavBar .cbTabsSubMenuNav .dropdown-item:hover, .cbProfile.cbProfileCanvasOther .cbTabsMenuNavBar .cbTabsSubMenuNav .dropdown-item:focus {
  background-color: #F7F4EB;
  color: #A08244;
}
.cbProfile.cbProfileCanvasOther .cbTabPane {
  font-family: "Nunito", sans-serif;
  color: #1A2B42;
  font-size: 0.95rem;
}
.cbProfile.cbProfileCanvasOther .cbTabPane .col-form-label {
  font-family: "Nunito", sans-serif;
  color: #52637A;
  font-size: 0.9rem;
}
.cbProfile.cbProfileCanvasOther .table.table-hover {
  font-family: "Nunito", sans-serif;
  font-size: 0.9rem;
}
.cbProfile.cbProfileCanvasOther .table.table-hover thead th {
  color: #52637A;
  font-weight: 700;
  border-bottom: 2px solid #E0C69F;
}
.cbProfile.cbProfileCanvasOther .table.table-hover tbody td {
  color: #1A2B42;
  border-top: 1px solid #F1ECE6;
}
.cbProfile.cbProfileCanvasOther .table.table-hover tbody tr:hover {
  background-color: #F7F4EB;
}
.cbProfile.cbProfileCanvasOther .blogsButton.blogsButtonNew {
  background-color: #671d2f;
  border-color: #671d2f;
  color: #C6A969;
  transition: 0.3s ease;
}
.cbProfile.cbProfileCanvasOther .blogsButton.blogsButtonNew:hover, .cbProfile.cbProfileCanvasOther .blogsButton.blogsButtonNew:focus {
  background-color: #531726;
  border-color: #531726;
  color: #C6A969;
}
.cbProfile.cbProfileCanvasOther .cbTabsMenuRight .col-form-label {
  font-family: "Nunito", sans-serif;
  color: #52637A;
  font-size: 0.8rem;
  padding: 0;
  margin-bottom: 0.15rem;
}
.cbProfile.cbProfileCanvasOther .cbTabsMenuRight .cb_field {
  margin-bottom: 1rem;
  font-family: "Nunito", sans-serif;
  font-size: 0.85rem;
  color: #1A2B42;
}
.cbProfile.cbProfileCanvasOther .cbPoweredBy {
  padding: 1rem 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  border-top: 1px solid #F1ECE6;
}
.cbProfile.cbProfileCanvasOther .cbPoweredBy a {
  color: #52637A;
  text-decoration: none;
  transition: 0.3s ease;
}
.cbProfile.cbProfileCanvasOther .cbPoweredBy a:hover {
  color: #A08244;
  text-decoration: underline;
}
/* Import défensif : comme les autres composants custom (_cb-register.scss,
   _cb-profile-view.scss...), au cas où ce bloc se recompilerait isolément
   en dehors de la chaîne normale du template. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   PAGE D'ÉDITION DU PROFIL COMMUNITY BUILDER (CB Profile Edit -
   cb-profile-edit)
   --------------------------------------------------------------------------
   Affichée sans aucun style du site - HTML réel fourni par l'utilisateur
   (2026-08-23). Les ids/classes ci-dessous sont ceux générés par
   com_comprofiler lui-même (.cbEditProfile, .cbEditProfileTabbed,
   .cbTabsNav, .cb_form_line, .cbFieldIcons, .cbPasswordUnmask,
   .cbImageFieldChoice, .cbProfileEditButtons...) et par Joomla lui-même
   pour les réglages de compte natifs (.form-select, joomla-field-fancy-
   select / Choices.js, #com-users-methods-list), aucune classe inventée.

   Les lignes de champs standards et les deux champs mot de passe
   reprennent exactement l'habillage de _cb-register.scss (structure HTML
   identique, y compris le piège Bootstrap !important sur les boutons
   afficher/masquer) pour rester visuellement cohérent avec le formulaire
   d'inscription.
   ========================================================================== */
.cbEditProfile.cbEditProfileTabbed {
  max-width: 720px;
  margin: 0 auto 2rem;
  padding: 2rem;
  background-color: #FFFFFF;
  /* --- En-tête "Modifier mes informations" --- */
  /* --- Onglets "Infos de contact" / "Canvas" / "Portrait" --- */
  /* --- Lignes de champs standards (mêmes classes réelles que
       Registration : .cb_form_line / .col-form-label / .cb_field) --- */
  /* --- Authentification multifacteurs (bloc Joomla natif, contenu
       intégralement par le composant dans .form-control-plaintext) --- */
  /* --- Onglets Canvas / Portrait : sélecteur "Aucun changement /
       Importer / Galerie" + zone d'import + grille de vignettes --- */
  /* --- Ligne des boutons "Mettre à jour" / "Annuler" --- */
}
.cbEditProfile.cbEditProfileTabbed > .cb-page-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #F1ECE6 !important;
}
.cbEditProfile.cbEditProfileTabbed > .cb-page-header .cb-page-header-title {
  margin: 0;
  font-family: "Sniglet", sans-serif;
  color: #A08244;
  font-size: 1.4rem;
}
.cbEditProfile.cbEditProfileTabbed .cbTabsNav.nav-tabs {
  border-bottom: 2px solid #E0C69F !important;
  margin-bottom: 1.5rem !important;
  gap: 0.25rem;
}
.cbEditProfile.cbEditProfileTabbed .cbTabsNav.nav-tabs .cbTabNavLink {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 0.6rem 1rem;
  border-radius: 0;
  transition: 0.3s ease;
}
.cbEditProfile.cbEditProfileTabbed .cbTabsNav.nav-tabs .cbTabNavLink.active {
  color: #A08244;
  font-weight: 700;
  background-color: transparent;
  border-bottom-color: #A08244;
}
.cbEditProfile.cbEditProfileTabbed .cbTabsNav.nav-tabs .cbTabNavLink:hover, .cbEditProfile.cbEditProfileTabbed .cbTabsNav.nav-tabs .cbTabNavLink:focus {
  color: #A08244;
  border-color: transparent;
  border-bottom-color: #E0C69F;
}
.cbEditProfile.cbEditProfileTabbed .cb_form_line {
  margin: 0 0 1.1rem;
}
@media (max-width: 576px) {
  .cbEditProfile.cbEditProfileTabbed .cb_form_line {
    margin-bottom: 1.25rem;
  }
}
.cbEditProfile.cbEditProfileTabbed .col-form-label {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  font-size: 0.9rem;
  padding-top: 0.7rem;
}
@media (max-width: 576px) {
  .cbEditProfile.cbEditProfileTabbed .col-form-label {
    padding-top: 0;
    margin-bottom: 0.4rem;
  }
}
.cbEditProfile.cbEditProfileTabbed .cb_field {
  position: relative;
  /* Valeurs en lecture seule (ex. "Nom formaté", wrapper du fuseau
           horaire) : pas un input, juste du texte posé par le composant. */
  /* --- Champs mot de passe (identifiants #cbfr_51__current et
           #cbfr_51, structure HTML strictement identique à celle de
           _cb-register.scss) : mêmes règles, y compris le contournement
           !important des classes utilitaires Bootstrap posées sur les
           boutons afficher/masquer et l'astuce text-indent (cf. leçon
           apprise sur ce même bloc dans le formulaire d'inscription). --- */
  /* --- Fuseau horaire : widget Joomla natif "Choices.js"
           (<joomla-field-fancy-select>) - on habille sa coquille fermée et
           sa liste déroulante pour se fondre avec les autres champs,
           sans toucher au JS qui la pilote. --- */
}
.cbEditProfile.cbEditProfileTabbed .cb_field .form-control-plaintext {
  padding: 0.75rem 0;
  font-family: "Nunito", sans-serif;
  color: #1A2B42;
  font-size: 0.95rem;
}
.cbEditProfile.cbEditProfileTabbed .cb_field input.form-control, .cbEditProfile.cbEditProfileTabbed .cb_field select.form-control, .cbEditProfile.cbEditProfileTabbed .cb_field select.form-select {
  width: 100%;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: #1A2B42;
  background-color: #ffffff;
  border: 1px solid #E0C69F;
  border-radius: 12px;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  transition: 0.3s ease;
  /* Champ "Nom d'utilisateur" : verrouillé (disabled) par CB -
               on l'indique visuellement plutôt que de le laisser identique
               à un champ actif. */
}
.cbEditProfile.cbEditProfileTabbed .cb_field input.form-control:focus, .cbEditProfile.cbEditProfileTabbed .cb_field select.form-control:focus, .cbEditProfile.cbEditProfileTabbed .cb_field select.form-select:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.15);
}
.cbEditProfile.cbEditProfileTabbed .cb_field input.form-control:disabled, .cbEditProfile.cbEditProfileTabbed .cb_field select.form-control:disabled, .cbEditProfile.cbEditProfileTabbed .cb_field select.form-select:disabled {
  background-color: #F7F4EB;
  color: #52637A;
  cursor: not-allowed;
}
.cbEditProfile.cbEditProfileTabbed .cb_field select.form-select {
  padding-right: 2.5rem;
  cursor: pointer;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .cbFieldIcons {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #A08244;
  pointer-events: none;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .cbFieldIcons .text-muted {
  color: #A08244 !important;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid #E0C69F;
  border-radius: 12px;
  background-color: #ffffff;
  transition: 0.3s ease;
  overflow: hidden;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask:focus-within {
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.15);
}
.cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask input.form-control {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  padding: 0.75rem 3.75rem 0.75rem 1rem;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask input.form-control:focus {
  border: 0;
  box-shadow: none !important;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask .input-group-append {
  display: flex;
  flex: 0 0 auto;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskShow, .cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskHide {
  position: relative;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2.75rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid #E0C69F !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: #A08244 !important;
  cursor: pointer;
  transition: 0.3s ease;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskShow::before, .cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskHide::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-indent: 0;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.95rem;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskShow:hover, .cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskShow:focus, .cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskHide:hover, .cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskHide:focus {
  color: #C6A969 !important;
  background-color: rgba(198, 169, 105, 0.08) !important;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskShow.hidden, .cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskHide.hidden {
  display: none !important;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskShow::before {
  content: "";
}
.cbEditProfile.cbEditProfileTabbed .cb_field .input-group.cbPasswordUnmask .cbPasswordUnmaskHide::before {
  content: "";
}
.cbEditProfile.cbEditProfileTabbed .cb_field .cbPasswordUnmask ~ .cbFieldIcons {
  right: 3.75rem;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .choices {
  font-family: "Nunito", sans-serif;
  font-size: 0.95rem;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .choices .choices__inner {
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  background-color: #ffffff;
  border: 1px solid #E0C69F;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  transition: 0.3s ease;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .choices.is-focused .choices__inner, .cbEditProfile.cbEditProfileTabbed .cb_field .choices.is-open .choices__inner {
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.15);
}
.cbEditProfile.cbEditProfileTabbed .cb_field .choices .choices__list--single {
  padding: 0;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .choices .choices__list--single .choices__item {
  color: #1A2B42;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .choices .choices__list--dropdown {
  border: 1px solid #E0C69F;
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
  margin-top: 0.4rem;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .choices .choices__list--dropdown .choices__input {
  font-family: "Nunito", sans-serif;
  border-bottom: 1px solid #F1ECE6;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .choices .choices__list--dropdown .choices__heading {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  color: #A08244;
  border-bottom: 1px solid #F1ECE6;
}
.cbEditProfile.cbEditProfileTabbed .cb_field .choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #F7F4EB;
}
.cbEditProfile.cbEditProfileTabbed #com-users-methods-list #com-users-methods-reset-container {
  background-color: #F7F4EB !important;
  border: 1px solid #E0C69F !important;
  border-radius: 12px !important;
  color: #1A2B42;
}
.cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method {
  background-color: #FFFFFF;
  margin: 0 0 1rem !important;
}
.cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method-header {
  background-color: transparent !important;
  border: 0 !important;
  padding: 1rem;
}
.cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method-image {
  background-color: #F7F4EB !important;
  border-radius: 10px !important;
}
.cbEditProfile.cbEditProfileTabbed #com-users-methods-list h2, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .cb-user-welcome span, .cb-user-welcome .cbEditProfile.cbEditProfileTabbed #com-users-methods-list span {
  font-family: "Sniglet", sans-serif;
  font-size: 1.05rem;
  color: #1A2B42;
  margin: 0;
}
.cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method-records-container {
  padding: 0 1rem 1rem;
}
.cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method-info {
  color: #52637A !important;
}
.cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method-addnew-container {
  border-top: 1px solid #F1ECE6 !important;
  padding-top: 0.75rem !important;
}
.cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method-addnew.btn-outline-primary {
  color: #A08244;
  border-color: #E0C69F;
  transition: 0.3s ease;
}
.cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method-addnew.btn-outline-primary:hover, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method-addnew.btn-outline-primary:focus {
  background-color: #E0C69F;
  border-color: #E0C69F;
  color: #1A2B42;
}
.cbEditProfile.cbEditProfileTabbed .cbImageFieldChoice {
  margin-bottom: 0;
}
.cbEditProfile.cbEditProfileTabbed .cbImageFieldUpload {
  background-color: #F7F4EB;
  border-radius: 12px;
  padding: 1rem;
  font-family: "Nunito", sans-serif;
  font-size: 0.85rem;
  color: #52637A;
}
.cbEditProfile.cbEditProfileTabbed .cbImageFieldUpload input[type="file"] {
  margin-top: 0.5rem;
}
.cbEditProfile.cbEditProfileTabbed .cbImageFieldGallery label {
  cursor: pointer;
}
.cbEditProfile.cbEditProfileTabbed .cbImageFieldGallery .cbThumbCanvas {
  border-radius: 12px;
  border: 2px solid transparent;
  transition: 0.3s ease;
}
.cbEditProfile.cbEditProfileTabbed .cbImageFieldGallery .cbThumbCanvas:hover {
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
}
.cbEditProfile.cbEditProfileTabbed .cbImageFieldGallery .cbThumbPict {
  border: 2px solid transparent !important;
  transition: 0.3s ease;
}
.cbEditProfile.cbEditProfileTabbed .cbImageFieldGallery .cbThumbPict:hover {
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
}
.cbEditProfile.cbEditProfileTabbed .cbImageFieldGallery input[type="radio"]:checked + label .cbThumbCanvas {
  border-color: #C6A969;
}
.cbEditProfile.cbEditProfileTabbed .cbImageFieldGallery input[type="radio"]:checked + label .cbThumbPict {
  border-color: #C6A969 !important;
}
.cbEditProfile.cbEditProfileTabbed .cbProfileEditButtons {
  margin-top: 1.5rem;
}
.cbEditProfile.cbEditProfileTabbed .cbProfileEditButtons > [class*="col-"] {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  max-width: 100%;
  margin-left: 0;
}
.cbEditProfile.cbEditProfileTabbed .cbProfileEditButtons .cbProfileEditSubmit {
  /* Les deux boutons portent aussi .btn-sm-block (classe réelle du
               composant, display:block + width:100%, potentiellement en
               !important comme les autres utilitaires Bootstrap du thème -
               cf. leçon apprise sur les boutons afficher/masquer de
               _cb-register.scss) : sans width:auto en !important ici, cette
               largeur à 100% se propage au flex-basis (flex:1 1 auto) et
               fait passer les deux boutons chacun sur leur propre ligne au
               lieu de se partager la largeur - vérifié en Playwright. */
  flex: 1 1 0;
  width: auto !important;
  border: none;
  border-radius: 8px;
  background-color: #671d2f;
  color: #C6A969;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  transition: 0.3s ease;
}
.cbEditProfile.cbEditProfileTabbed .cbProfileEditButtons .cbProfileEditSubmit:hover, .cbEditProfile.cbEditProfileTabbed .cbProfileEditButtons .cbProfileEditSubmit:focus {
  background-color: #531726;
}
.cbEditProfile.cbEditProfileTabbed .cbProfileEditButtons .cbProfileEditCancel {
  flex: 1 1 0;
  width: auto !important;
  display: inline-block;
  text-align: center;
  border: 1px solid #C5AE91;
  border-radius: 8px;
  background-color: transparent;
  color: #52637A;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  text-decoration: none;
  transition: 0.3s ease;
}
.cbEditProfile.cbEditProfileTabbed .cbProfileEditButtons .cbProfileEditCancel:hover, .cbEditProfile.cbEditProfileTabbed .cbProfileEditButtons .cbProfileEditCancel:focus {
  background-color: #F7F4EB;
  color: #1A2B42;
  text-decoration: none;
}
/* Import défensif : comme les autres composants custom (_cb-profile-view.scss,
   _cb-profile-edit.scss...), au cas où ce bloc se recompilerait isolément
   en dehors de la chaîne normale du template. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   PAGE "GESTION DES RELATIONS DIRECTES" COMMUNITY BUILDER
   (CB Manage Connections - cb-manage-connections)
   --------------------------------------------------------------------------
   Affichée sans aucun style du site - HTML réel fourni par l'utilisateur
   (2026-08-23, fragment .cbManageConnections). Les classes ci-dessous sont
   celles générées par com_comprofiler lui-même (.cbManageConnections,
   .cb-page-header, .cbMngConnButtons, .cbMngConnCancel...), aucune classe
   inventée - même logique que _cb-profile-view.scss / _cb-profile-edit.scss.

   Page volontairement simple côté composant (un message + un bouton
   "Annuler" en <input type="button"> avec redirection JS inline) : on ne
   fait ici que l'habiller pour rester cohérent avec le reste de la famille
   CB, sans toucher à l'attribut onclick du composant.
   ========================================================================== */
.cbManageConnections.cb_template.cb_template_default {
  max-width: 480px;
  margin: 0 auto 2rem;
  padding: 2rem;
  background-color: #FFFFFF;
  text-align: center;
  /* Message ("Aucun utilisateur n'est en relation directe avec vous.") */
}
.cbManageConnections.cb_template.cb_template_default .cb-page-header {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #F1ECE6 !important;
}
.cbManageConnections.cb_template.cb_template_default .cb-page-header .cb-page-header-title {
  margin: 0;
  font-family: "Sniglet", sans-serif;
  color: #A08244;
  font-size: 1.3rem;
}
.cbManageConnections.cb_template.cb_template_default > div:not(.cb-page-header):not(.cbMngConnButtons) {
  font-family: "Nunito", sans-serif;
  color: #52637A;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}
.cbManageConnections.cb_template.cb_template_default .cbMngConnButtons .cbMngConnCancel {
  display: inline-block;
  border: none;
  border-radius: 8px;
  background-color: #671d2f;
  color: #C6A969;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  padding: 0.75rem 2rem;
  cursor: pointer;
  transition: 0.3s ease;
}
.cbManageConnections.cb_template.cb_template_default .cbMngConnButtons .cbMngConnCancel:hover, .cbManageConnections.cb_template.cb_template_default .cbMngConnButtons .cbMngConnCancel:focus {
  background-color: #531726;
}
/* Import défensif : comme les autres composants custom (_cb-profile-edit.scss,
   _cb-register.scss...), au cas où ce bloc se recompilerait isolément en
   dehors de la chaîne normale du template. */
/* 1. Polices : auto-hébergées depuis le 25/08/2026 (voir _fonts.scss), suite
   à une connexion à faible débit qui rendait le chargement depuis
   fonts.googleapis.com/fonts.gstatic.com pénible. L'ancien @import Google
   Fonts vivait ici ; il a été retiré, plus rien sur le site n'a besoin de
   ces deux domaines. */
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2, .cb-user-welcome span {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.35rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
/* ==========================================================================
   DÉCLARATION DES RESPONSIVE BREAKPOINTS (STANDARDS ACY / GANTRY 5)
   ========================================================================== */
/* ==========================================================================
   OLH VARIABLES & PALETTE PHARE (VERSION OCRE DORÉ & BLEU ENCRE)
   ========================================================================== */
/* --- 1. TYPOGRAPHIE (LE TRIO COMPATIBLE GOOGLE FONTS) --- */
/* --- 2. COULEURS DE FOND (CONTRAT CLIENT RESPECTÉ) --- */
/* --- 3. TYPOGRAPHIE & TEXTES (ACCESSIBILITÉ MAXIMALE) --- */
/* --- 4. COULEURS D'ACTION (BOUTONS, LIENS, ACCENTS) --- */
/* --- 5. BORDURES, ARRONDIS & EFFETS --- */
/* --- 6. COULEURS FONCTIONNELLES (Système / J2Commerce) --- */
/* ICAGENDA */
/* --- ÉCHELLE DE TAILLES ÉDITORIALES & MODULES (CONVERTIE EN REM) --- */
.text-micro, .icrounded_eventlist .ic-month, .icrounded_eventlist .ic-reg, #icagenda.ic-list-view .ic-box-date .ic-year, #icagenda.ic-list-view .ic-cat a, #icagenda.ic-registration-view .ic-reg-cat {
  font-size: 0.647rem !important;
}
.text-small, .icrounded_eventlist .iceventlist-venue, .icrounded_eventlist .iceventlist-city, .icrounded_eventlist .ic-datetime-div, #icagenda.ic-list-view .js-calendar .day-name, #icagenda.ic-list-view .js-calendar .buttons-wrapper .btn, #icagenda.ic-list-view .ic-box-date .ic-month, #icagenda.ic-list-view .ic-place, #icagenda.ic-list-view .ic-actionbar-readmore .btn, #icagenda .ic-registration-box .btn-outline-success, #icagenda.ic-registration-view .ic-required-info, #icagenda.ic-registration-view .form-text {
  font-size: 0.706rem !important;
}
.text-base, .ic-msg-no-event, .icrounded_eventlist, .icrounded_eventlist .iceventlist-desc {
  font-size: 0.765rem !important;
}
.text-body, #icagenda.ic-list-view .js-calendar .day, #icagenda.ic-list-view .ic-descshort, #icagenda.ic-event-view .ic-dropdown-menu .ic-dropdown-item, #icagenda.ic-registration-view .control-label label, #icagenda.ic-registration-view .control-label > div, #icagenda.ic-registration-view .ic-inlinetext-input, #icagenda.ic-registration-view .ic-date-label, #icagenda.ic-registration-view .form-check-label, #icagenda.ic-registration-view .ic-terms-consent-text, #icagenda.ic-actions-view .alert-info, #icagenda.ic-actions-view .ic-div-table-cell {
  font-size: 0.823rem !important;
}
.text-lead, .icrounded_eventlist .iceventlist-title {
  font-size: 0.941rem !important;
}
.text-xl, .icrounded_eventlist .ic-day {
  font-size: 1.059rem !important;
}
/* ==========================================================================
   7. INJECTION DES CUSTOM PROPERTIES CSS (ACCESSIBLES PARTOUT)
   ========================================================================== */
:root {
  --font-title: Sniglet, sans-serif;
  --font-title-weight: 400;
  --font-body: Nunito, sans-serif;
  --font-decor: La Belle Aurore, cursive;
  --font-decor--more: Gloria Hallelujah, cursive;
  --color-bg: #faf7f3;
  --color-bg-soft: #F7F4EB;
  --color-text: #1A2B42;
  --color-text-light: #52637A;
  --color-primary: #C6A969;
  --color-primary-dark: #A08244;
  --color-secondary: #C5AE91;
  --border-radius: 18px;
  --main-transition: 0.3s ease;
  --overlap:-10rem;
}
/* ==========================================================================
   BASES PARTAGÉES (CARTES, CHAMPS DE FORMULAIRE)
   ==========================================================================
   Regroupe, sous forme de "placeholders" Sass (%nom), les blocs de
   propriétés strictement identiques qui étaient répétés dans plusieurs
   fichiers (cartes olh-card-item, feature-box, contact, icagenda,
   kunena, j2commerce...) ou en double à l'intérieur d'un même fichier
   (formulaires icagenda).

   Pourquoi un placeholder (%nom + @extend) et pas un @mixin (@include) :
   un mixin RECOPIE ces lignes de CSS à chaque usage - aucun gain de poids
   côté navigateur. Un placeholder, lui, regroupe tous les sélecteurs qui
   l'utilisent sous UNE SEULE règle CSS compilée : le fichier livré au
   navigateur est réellement plus léger, en plus d'être plus facile à
   maintenir (une seule ligne à corriger si le style commun doit changer).

   Chaque fichier garde bien sûr ses propres particularités (bordure,
   fond, survol, tailles...) en plus de ce socle commun : ce fichier ne
   contient que ce qui était rigoureusement identique partout.

   Importé juste après "variables"/"dependencies" dans custom.scss, avant
   tous les fichiers qui l'utilisent via @extend.
   ========================================================================== */
/* --- Socle "carte" : fond doux + bordure fine + angles + ombre légère +
   transition. Utilisé par .olh-card-item (_cards.scss), .olh-feature-item
   (_feature-box.scss), .contact-card (_top-contact.scss), .icrounded_eventlist
   / .ic-box / .ic-filters (_icagenda.scss), .category / .message
   (_kunena.scss) et .j2commerce-product-item (_j2commerce.scss). --- */
.olh-grid-container .olh-card-item, .olh-card-item.mode-cercle.olh-card-standalone, .olh-choice-item, .j2commerce-product-item, .j2commerce-cart-module.panier-sidebar, .contact-quickbar .contact-card, .icrounded_eventlist, #icagenda.ic-list-view .ic-filters, #icagenda.ic-list-view .ic-box, #icagenda.ic-registration-view, .card, .olh-feature-item, #kunena .category, #kunena .message, .olh-counter-item, .jd-item-page .card, .search .card, .olh-matomo-card, .contact-page__info-card, .contact-page__map, #login-form, .cbRegistration.cbRegistrationFlat, .cbLostPassForm.cb_template.cb_template_default, .cbProfile.cbProfileCanvasOther, .cbEditProfile.cbEditProfileTabbed, .cbEditProfile.cbEditProfileTabbed #com-users-methods-list .com-users-methods-list-method, .cbManageConnections.cb_template.cb_template_default, #cbBlogs .blogEdit {
  background-color: #F7F4EB;
  border: 1px solid #671d2f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(26, 43, 66, 0.04);
  transition: 0.3s ease;
}
/* --- Recrée le comportement de .input-group (Bootstrap 5) : champ +
   bouton alignés sur une seule ligne. Repéré sur le champ de recherche
   Kunena (bouton loupe qui retombait sous le champ "Recherche"), mais pas
   scopé à #kunena car ce n'est pas spécifique à Kunena : c'est la CSS de
   grille/composants Bootstrap qui n'est globalement pas chargée par ce
   thème Gantry (cf. commentaire "#kunena .container" dans _kunena.scss,
   même cause) - toute autre ".input-group" ailleurs sur le site (markup
   Joomla standard, ex. mod_search) profite donc aussi de ce correctif.
   flex:1 1 auto sur le champ l'empêche de garder son width:100% intégral
   une fois dans le groupe flex, ce qui laissait la place au bouton de
   passer à la ligne faute d'espace restant. --- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* --- Repères "popup paiement/adhésion" (.ic-payment-popup__*) : classes
   injectées côté PHP à la fois par mod_assoc_payment et mod_assoc_membership
   dans le HTML des popups EngageBox (montant, note, remerciement, message
   d'erreur). Mutualisées ici plutôt que redéfinies à l'identique dans chaque
   module (2026-09-08) : en plus d'éviter la duplication, ça corrige au
   passage un manque - ces classes n'étaient imprimées que par le <style>
   du module qui les définissait, donc absentes si un seul des deux modules
   était présent sur une page donnée. --- */
.ic-payment-popup__amount {
  margin: 0 0 0.5em;
  font-weight: 600;
}
.ic-payment-popup__note {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
.ic-payment-popup__thankyou {
  margin: 0;
}
.ic-payment-popup__message--error {
  color: #b3261e;
  font-weight: 600;
}
/* --- Socle "champ de formulaire" : utilisé par .form-control/.form-select
   dans _icagenda.scss, qui répétait ce bloc à l'identique (à quelques
   détails près) entre la vue liste et la vue inscription. --- */
#icagenda.ic-list-view .form-control, #icagenda.ic-list-view .form-select, #icagenda.ic-registration-view .form-control, #icagenda.ic-registration-view .form-select, .jd-item-page .form-select, .jd-item-page .form-control, .search .form-select, .search .form-control {
  font-family: "Nunito", sans-serif;
  border: 1px solid #C5AE91;
  border-radius: 18px;
  background-color: #FFFFFF;
  color: #1A2B42;
  padding: 0.55rem 0.9rem;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}
#icagenda.ic-list-view .form-control:focus, #icagenda.ic-list-view .form-select:focus, #icagenda.ic-registration-view .form-control:focus, #icagenda.ic-registration-view .form-select:focus, .jd-item-page .form-select:focus, .jd-item-page .form-control:focus, .search .form-select:focus, .search .form-control:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.2);
}
/* ==========================================================================
   FORMULAIRE DE CRÉATION/ÉDITION DE BLOG (plugin cbBlogs de Community
   Builder, onglet "Blogs" du profil -> "Créer un nouvel article")
   --------------------------------------------------------------------------
   Affiché sans aucun style du site - HTML réel fourni par l'utilisateur
   (2026-08-23, fragment #cbBlogs > #cbBlogsInner > .blogEdit > #blogForm).
   Les ids/classes ci-dessous sont ceux générés par le plugin cbBlogs et par
   Joomla lui-même pour l'éditeur "Aucun" (textarea brut + barre d'outils
   .editor-xtd-buttons, boîtes modales Bootstrap .joomla-modal), aucune
   classe inventée - même logique que _cb-profile-edit.scss.
   ========================================================================== */
#cbBlogs .blogEdit {
  max-width: 760px;
  margin: 0 auto 2rem;
  padding: 2rem;
  background-color: #FFFFFF;
  /* --- En-tête "Créer le Blog" --- */
  /* --- Lignes de champs (mêmes classes réelles que Registration/Profile
       Edit : .cb_form_line / .col-form-label / .cb_field) --- */
  /* --- Éditeur "Aucun" (Intro du Blog / Blog plein) : simple textarea
       posé par Joomla en style inline width:100%;height:400px - on garde
       ces dimensions (juste corrigées en box-sizing pour tenir dans la
       carte) et on habille juste bordure/police/focus, comme les autres
       champs. --- */
  /* Barre d'outils de l'éditeur (Champ, Lire la suite, Convert Forms,
       EngageBox, Smile Pack, Insert FAQ) */
  /* --- Boîtes modales Bootstrap ouvertes par la barre d'outils (Convert
       Forms, EngageBox, Smile Pack, Insert FAQ, "Champ") : habillage léger
       pour rester cohérent avec le reste du site si elles s'ouvrent -
       aucune règle ici ne touche à leur affichage (Bootstrap s'en charge
       via .show en JS). --- */
  /* --- Boutons "Créer le Blog" / "Annuler" --- */
}
#cbBlogs .blogEdit .blogsTitle {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #F1ECE6 !important;
}
#cbBlogs .blogEdit .blogsTitle .cb-page-header-title {
  margin: 0;
  font-family: "Sniglet", sans-serif;
  color: #A08244;
  font-size: 1.4rem;
}
#cbBlogs .blogEdit .cb_form_line {
  margin: 0 0 1.1rem;
}
@media (max-width: 576px) {
  #cbBlogs .blogEdit .cb_form_line {
    margin-bottom: 1.25rem;
  }
}
#cbBlogs .blogEdit .col-form-label {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #52637A;
  font-size: 0.9rem;
  padding-top: 0.7rem;
}
@media (max-width: 576px) {
  #cbBlogs .blogEdit .col-form-label {
    padding-top: 0;
    margin-bottom: 0.4rem;
  }
}
#cbBlogs .blogEdit .cb_field {
  position: relative;
}
#cbBlogs .blogEdit .cb_field input.form-control, #cbBlogs .blogEdit .cb_field select.form-select {
  width: 100%;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: #1A2B42;
  background-color: #ffffff;
  border: 1px solid #E0C69F;
  border-radius: 12px;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  transition: 0.3s ease;
}
#cbBlogs .blogEdit .cb_field input.form-control:focus, #cbBlogs .blogEdit .cb_field select.form-select:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.15);
}
#cbBlogs .blogEdit .cb_field select.form-select {
  padding-right: 2.5rem;
  cursor: pointer;
}
#cbBlogs .blogEdit .cb_field .cbFieldIcons {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  color: #A08244;
  pointer-events: none;
}
#cbBlogs .blogEdit .cb_field .cbFieldIcons .text-muted {
  color: #A08244 !important;
}
#cbBlogs .blogEdit textarea {
  box-sizing: border-box !important;
  max-width: 100%;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: #1A2B42;
  background-color: #ffffff;
  border: 1px solid #E0C69F;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  transition: 0.3s ease;
}
#cbBlogs .blogEdit textarea:focus {
  outline: none;
  border-color: #C6A969;
  box-shadow: 0 0 0 3px rgba(198, 169, 105, 0.15);
}
#cbBlogs .blogEdit .editor-xtd-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
#cbBlogs .blogEdit .editor-xtd-buttons .xtd-button.btn-secondary {
  background-color: #F7F4EB;
  border: 1px solid #E0C69F;
  border-radius: 8px;
  color: #52637A;
  font-family: "Nunito", sans-serif;
  font-size: 0.8rem;
  padding: 0.4rem 0.75rem;
  transition: 0.3s ease;
}
#cbBlogs .blogEdit .editor-xtd-buttons .xtd-button.btn-secondary:hover, #cbBlogs .blogEdit .editor-xtd-buttons .xtd-button.btn-secondary:focus {
  background-color: #E0C69F;
  color: #1A2B42;
}
#cbBlogs .blogEdit .joomla-modal.modal .modal-content {
  border: 1px solid #671d2f;
  border-radius: 18px;
}
#cbBlogs .blogEdit .joomla-modal.modal .modal-header {
  background-color: #F7F4EB;
  border-bottom: 1px solid #F1ECE6;
}
#cbBlogs .blogEdit .joomla-modal.modal .modal-header .modal-title {
  font-family: "Sniglet", sans-serif;
  color: #A08244;
  font-size: 1.1rem;
}
#cbBlogs .blogEdit .joomla-modal.modal .modal-footer {
  border-top: 1px solid #F1ECE6;
}
#cbBlogs .blogEdit .joomla-modal.modal .modal-footer .btn-secondary {
  background-color: #671d2f;
  border-color: #671d2f;
  color: #C6A969;
  transition: 0.3s ease;
}
#cbBlogs .blogEdit .joomla-modal.modal .modal-footer .btn-secondary:hover, #cbBlogs .blogEdit .joomla-modal.modal .modal-footer .btn-secondary:focus {
  background-color: #531726;
  border-color: #531726;
}
#cbBlogs .blogEdit .blogsButton {
  border: none;
  border-radius: 8px;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  transition: 0.3s ease;
  margin: 1.5rem 0.5rem 0 0;
}
#cbBlogs .blogEdit .blogsButtonSubmit {
  background-color: #671d2f;
  color: #C6A969;
}
#cbBlogs .blogEdit .blogsButtonSubmit:hover, #cbBlogs .blogEdit .blogsButtonSubmit:focus {
  background-color: #531726;
}
#cbBlogs .blogEdit .blogsButtonCancel {
  background-color: transparent;
  border: 1px solid #C5AE91 !important;
  color: #52637A;
}
#cbBlogs .blogEdit .blogsButtonCancel:hover, #cbBlogs .blogEdit .blogsButtonCancel:focus {
  background-color: #F7F4EB;
  color: #1A2B42;
}
/* 4. Layout global du site (Spécifique Blank II Lite) */
html {
  scroll-behavior: smooth;
  font-size: 17px;
}
body, .contentpane.g-bodyonly {
  min-height: 100%;
  background: #faf7f3;
  color: #1A2B42;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#g-page-surround {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 15% 8%, rgba(198, 169, 105, 0.18), transparent 34%), radial-gradient(circle at 85% 15%, rgba(224, 198, 159, 0.15), transparent 30%), radial-gradient(circle at 50% 100%, rgba(198, 169, 105, 0.12), transparent 42%), linear-gradient(180deg, #faf7f3 0%, #FAF6EE 45%, #F1ECE6 100%);
}
#g-page-surround::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('../../images/styleSite/stars-premium-pro.svg') center center / cover no-repeat;
  opacity: 0.14;
  pointer-events: none;
  animation: starsFloat 90s ease-in-out infinite alternate;
  will-change: transform;
  z-index: 0;
}
#g-page-surround::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 20% 12%, rgba(198, 169, 105, 0.06), transparent 36%), radial-gradient(circle at 82% 20%, rgba(224, 198, 159, 0.04), transparent 30%), radial-gradient(circle at 50% 85%, rgba(255, 255, 255, 0.2), transparent 48%);
  mix-blend-mode: soft-light;
  opacity: 0.6;
  pointer-events: none;
  animation: nebula 45s ease-in-out infinite alternate;
  z-index: 1;
}
.mod-breadcrumbs__wrapper .mod-breadcrumbs {
  justify-content: center;
}
/* --- Espace au-dessus du bloc de message système Joomla (ex. "Authentification
   requise") pour qu'il ne colle pas à ce qu'il y a avant sur la page.
   !important nécessaire : le thème définit .g-system-messages #system-message-container
   { margin: 0 1.25rem; } dans _utilities.scss, plus spécifique qu'un simple #id. --- */
#system-message-container {
  margin-top: 2rem !important;
}
.bg-dark button.jl-button, .bg-dark a.jl-button {
  color: #E0C69F;
}
#module-jlflipster-178-particle, .olh-article, .media, .olh-grid-container {
  border: 1px solid #671d2f;
  margin: 0.5rem 0.8rem;
  padding: 1rem 2rem;
  /* Halo resserré pour tenir dans sa propre marge (0.5rem / 0.8rem
       ci-dessus) plutôt que de déborder de 2rem de flou comme avant : sans
       ça, dès qu'un de ces blocs se retrouve collé au bord de sa zone de
       contenu (ex. marge/padding du bloc main Gantry mis à 0), l'ombre se
       fait couper net par #g-page-surround (overflow: hidden) au lieu de
       s'estomper en douceur - constaté avec le gabarit ligne-2-colonnes.
       0.25rem de flou + 0.25rem de décalage vertical : ne déborde pas au-
       dessus (flou = décalage), déborde de 0.5rem en dessous (= marge
       verticale du bloc), et de 0.25rem sur les côtés (bien en dessous des
       0.8rem de marge horizontale). */
  box-shadow: 0 0.25rem 0.25rem #671d2f;
  border-radius: 18px;
}
img[alt="checked_out.png"] {
  display: none;
}
/* Base : structure partagée par toutes les listes à icône */
.umalh-icon-list {
  list-style: none;
  padding-left: 0;
}
.umalh-icon-list li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.5rem;
}
.umalh-icon-list li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  color: #C6A969;
}
/* Modificateurs : un par icône, ne définissent QUE le glyphe */
.umalh-check li::before {
  content: "";
}
.umalh-star li::before {
  content: "";
}
.umalh-hand-right li::before {
  content: "";
}
/* ==========================================================================
   SÉPARATEURS <hr> STYLÉS (.olh-hr)
   Remplace le trait gris par défaut du navigateur par une barre fine aux
   couleurs du site. Modificateurs combinables : largeur / alignement /
   couleur / épaisseur.
   Usage :
     <hr class="olh-hr">                          100%, doré, fine, centrée (réglages par défaut)
     <hr class="olh-hr olh-hr-50">                 50%, centrée
     <hr class="olh-hr olh-hr-33 olh-hr-left">      33%, alignée à gauche
     <hr class="olh-hr olh-hr-66 olh-hr-secondary olh-hr-thick">
   ========================================================================== */
.olh-hr {
  border: none;
  width: 100%;
  height: 2px;
  margin: 1.5rem auto;
  background-color: #C6A969;
  border-radius: 999px;
  /* Largeurs */
  /* Alignement : centrée par défaut (margin: auto ci-dessus).
       .olh-hr-left n'a d'effet visible que combinée à une largeur < 100%. */
  /* Couleurs : noms neutres (primary/secondary) plutôt que "doré/bordeaux"
       pour suivre automatiquement un futur changement de palette.
       olh-hr-secondary pointe sur $border (la variable bordeaux réellement
       utilisée partout ailleurs sur le site : bordures, citations,
       bandeaux de chapitre) plutôt que sur $secondary (qui est en réalité
       un sable chaud clair dans ce jeu de variables, pas le bordeaux). */
  /* Épaisseurs : fine par défaut (2px ci-dessus) */
}
.olh-hr.olh-hr-33 {
  width: 33%;
}
.olh-hr.olh-hr-50 {
  width: 50%;
}
.olh-hr.olh-hr-66 {
  width: 66%;
}
.olh-hr.olh-hr-100 {
  width: 100%;
}
.olh-hr.olh-hr-left {
  margin-left: 0;
  margin-right: auto;
}
.olh-hr.olh-hr-primary {
  background-color: #C6A969;
}
.olh-hr.olh-hr-secondary {
  background-color: #671d2f;
}
.olh-hr.olh-hr-thin {
  height: 1px;
}
.olh-hr.olh-hr-thick {
  height: 4px;
}
/* ==========================================================================
   BANDEAUX DE "CHAPITRES" - regroupe visuellement plusieurs blocs (titre +
   texte + carte(s) + citation...) d'un article composé de plusieurs points
   (ex. "Devenir adhérent"), en alternant un fond blanc légèrement surélevé
   (.tint) et le fond ivoire par défaut de la page, pour donner du rythme à
   une page qui enchaînerait sinon des composants trop hétérogènes.
   Usage : <div class="olh-chapter tint"> ... plusieurs points ... </div>
   puis <div class="olh-chapter"> (sans tint) pour le chapitre suivant, etc.
   ========================================================================== */
.olh-chapter {
  border-radius: 18px;
  margin: 2.5rem 0.8rem;
  padding: 2rem 1.5rem;
}
.olh-chapter.tint {
  background-color: #ffffff;
  box-shadow: 0 18px 45px rgba(26, 43, 66, 0.08);
}
.panier-flottant {
  position: fixed;
  top: 20%;
  right: 24px;
  z-index: 9999;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(5, 5, 5, 0.25);
  padding: 12px;
}
.panier-flottant a {
  color: #1A2B42;
}
@media (max-width: 768px) {
  .panier-flottant {
    bottom: 16px;
    right: 16px;
  }
}
/* --- Bloc identité sous le logo du footer (SIREN, adresse, contact) -
   2026-09-10, demande utilisateur. Volontairement discret (petite taille,
   couleur atténuée) pour ne pas concurrencer le logo juste au-dessus.
   Couleurs revues le 2026-09-10 (v2) : le footer réel a un fond sombre
   (particule Gantry, hors de notre chaîne custom/scss) - $text/$text-light
   sont pensées pour un fond clair et devenaient illisibles dessus. Repris
   sur la même palette gold/ivoire que les colonnes de liens du footer
   ("L'ASSOCIATION" / "AGIR AVEC NOUS" sur la capture fournie). --- */
.olh-footer-identity {
  margin-top: 0.75rem;
  font-family: "Nunito", sans-serif;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(224, 198, 159, 0.85);
}
.olh-footer-identity strong {
  color: #C6A969;
}
.olh-footer-identity a {
  color: #E0C69F;
  text-decoration: underline;
  transition: 0.3s ease;
}
.olh-footer-identity a:hover {
  color: #ffffff;
}
/*# sourceMappingURL=custom_19.css.map */