@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap');
/* =====================================================================
   FONDATION DES MONASTÈRES — CSS de présentation
   Repris/adapté du CSS de l'ancien site pour un rendu identique.
   Fichier unique de style : header + menu + page d'accueil.
   ===================================================================== */

/* =======================  EN-TÊTE  ======================= */

/* Pas de logo dans la barre de menu (comme l'ancien site) */
.container-inner span.logo { display: none !important; }

/* Largeur du contenu = 1240px centré (header/footer) */
.container { max-width: 1240px; }

/* Ombre douce sous l'en-tête */
#sp-header { box-shadow: 0 0 20px rgba(0, 0, 0, .1); }

/* ---- Barre du haut (top bar) ---- */
#sp-top-bar { padding: 9px 0; border-bottom: 1px solid #f9f9f9; }
#sp-top-bar, #sp-top-bar a { color: #fff; }
#sp-top-bar a:hover { color: #f5ab35; }
#sp-top-bar .sp-contact-info { margin: 0; padding: 0; }
#sp-top-bar .sp-contact-info li { display: inline-block; font-size: 14px; margin: 0 10px; }
#sp-top-bar .sp-contact-info li span,
#sp-top-bar .sp-contact-info li i { margin: 0 3px; color: #f5ab35; }
#sp-top-bar ul.social-icons { margin: 0; padding: 0; }
#sp-top-bar ul.social-icons li { display: inline-block; margin: 5px; }
#sp-top-bar ul.social-icons li a { color: #fff; opacity: 1; transition: color .3s ease-in-out; }
#sp-top-bar ul.social-icons li a:hover { color: #f5ab35; }

/* ---- Menu principal (horizontal) ---- */
.sp-megamenu-parent > li { margin-right: 30px; }
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
	display: inline-block; padding: 0; line-height: 72px;
	font-weight: 700; font-size: 16px; color: #222;
	text-transform: uppercase; position: relative; margin: 0;
}
/* pas de flèche sur les sous-menus */
.sp-megamenu-parent > li.sp-has-child > a:after { display: none !important; }
/* soulignement orange animé (grandit depuis le centre) */
.sp-megamenu-parent > li > a:before,
.sp-megamenu-parent > li > span:before {
	content: ""; position: absolute; bottom: 18px; left: 50%;
	width: 0; height: 2px; background: #f5ab35; transition: all 400ms ease-in-out;
}
.sp-megamenu-parent > li.active > a:before,
.sp-megamenu-parent > li:hover > a:before { width: 100%; left: 0; }
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a { color: #eb5d0b; }
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a { color: #eb5d0b; }

/* FAIRE UN DON = bouton rouge arrondi */
.sp-megamenu-parent > li > a[href*="don.fondationdesmonasteres"] {
	background: #ff0000; color: #fff !important; border-radius: 10px;
	padding: 0 20px; line-height: 36px; height: 36px;
}
.sp-megamenu-parent > li > a[href*="don.fondationdesmonasteres"]:before { display: none; }
.sp-megamenu-parent > li:hover > a[href*="don.fondationdesmonasteres"] { background: #d40000; color: #fff !important; }

/* Search = icône loupe (texte masqué) */
.sp-megamenu-parent > li > a[href*="/search"] { font-size: 0; }
.sp-megamenu-parent > li > a[href*="/search"]:before { display: none; }
.sp-megamenu-parent > li > a[href*="/search"]:after {
	content: "\f002"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
	font-weight: 900; font-size: 16px; color: #222;
}
.sp-megamenu-parent > li:hover > a[href*="/search"]:after { color: #eb5d0b; }


/* ---- Menu mobile (offcanvas) : reprise de l'ancien site ----
   Fond sombre translucide, items en majuscules blanches avec chevron « › »,
   séparateurs fins, « Faire un don » en barre rouge. */
.offcanvas-menu { background-color: rgba(0, 0, 0, .7); }
.offcanvas-menu .close-offcanvas { color: #fff; top: 15px; right: 15px; }

/* Bloc de recherche en haut du panneau */
.offcanvas-inner .sp-module-title,
.offcanvas-inner .widget-title,
.offcanvas-inner .search h3 { color: #fff; text-transform: uppercase; font-family: Raleway, sans-serif; font-size: 16px; font-weight: 500; }
.offcanvas-inner .search input.search-query,
.offcanvas-inner .search input[name="searchword"] {
	width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, .08); border: 0;
	color: #fff; padding: 8px 12px; font-family: Raleway, sans-serif; font-size: 14px;
}
.offcanvas-inner .search input.search-query::placeholder { color: rgba(255, 255, 255, .55); }

/* Liste des items */
.offcanvas-inner ul.menu { list-style: none; margin: 0; padding: 0; }
.offcanvas-inner ul.menu li { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .08); background: transparent; }
/* Tous les items en blanc (y compris l'item actif), comme l'ancien site.
   !important pour l'emporter sur la règle Helix « .offcanvas-menu .offcanvas-inner ul.menu > li a »
   (couleur #252525) qui est plus spécifique. */
.offcanvas-inner ul.menu li > a {
	display: block; color: #fff !important; text-transform: uppercase; text-decoration: none;
	font-family: Raleway, sans-serif; font-weight: 500; font-size: 14px; line-height: 28px; padding: 10px 20px;
}
.offcanvas-inner ul.menu li.active > a,
.offcanvas-inner ul.menu li.current > a { color: #fff !important; }
.offcanvas-inner ul.menu li > a:hover { color: #f5ab35 !important; }
.offcanvas-inner ul.menu li > a::before {
	content: "\f105"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
	font-weight: 900; margin-right: 8px; color: #fff;
}
/* Sous-menus (Helix récent = ul.menu-child) : repliés par défaut, légère indentation */
.offcanvas-inner ul.menu .menu-child { display: none; }
.offcanvas-inner ul.menu li.fdm-open > .menu-child { display: block; }
.offcanvas-inner ul.menu .menu-child li > a { padding-left: 34px; }

/* Flèche de dépliage à droite des parents = bouton cliquable (ajouté par custom.js).
   Taper le libellé navigue ; taper la flèche déplie le sous-menu, comme l'ancien site. */
.offcanvas-inner ul.menu li.menu-parent > a { padding-right: 42px; }
.fdm-oc-toggle {
	position: absolute; top: 0; right: 0; width: 40px; height: 48px;
	padding: 0; background: none; border: 0; cursor: pointer; z-index: 2;
}
.fdm-oc-toggle::before {
	content: "\f107"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
	font-weight: 900; font-size: 14px; color: #fff;
}
.offcanvas-inner ul.menu li.fdm-open > .fdm-oc-toggle::before { content: "\f106"; }

/* « Faire un don » = barre rouge pleine largeur */
.offcanvas-inner ul.menu li > a[href*="don.fondationdesmonasteres"] { background: #ff0000; color: #fff; }
.offcanvas-inner ul.menu li > a[href*="don.fondationdesmonasteres"]:hover { background: #d40000; }
/* « Search » = loupe devant le libellé */
.offcanvas-inner ul.menu li > a[href*="/search"]::before { content: "\f002"; }


/* ---- Pied de page (comme l'ancien site) ---- */
#sp-footer { text-align: center; }
/* 3 colonnes égales */
@media (min-width: 992px) {
	#sp-bottom [class*="col-lg-"] { flex: 0 0 33.333% !important; max-width: 33.333% !important; }
}
/* titres des colonnes : Raleway, poids normal, 18px */
#sp-bottom .sp-module-title,
#sp-bottom h3, #sp-bottom h4, #sp-bottom h5 {
	font-family: Raleway, sans-serif; font-weight: 400; font-size: 18px;
	color: #fff; margin-bottom: 20px; text-transform: none;
}


/* =======================  PAGES INTÉRIEURES  ======================= */

/* Bandeau haut des pages intérieures (pleine largeur, bord à bord, sans débordement) */
#sp-title { padding: 0; }
#sp-title .sp-module, #sp-title .sp-module-content { margin: 0; padding: 0; }
.row:has(> #sp-title) { margin-left: 0; margin-right: 0; }
#sp-title [class*="col-"] { padding-left: 0; padding-right: 0; }
.fdm-bandeau { width: 100%; display: block; height: auto; }

/* Titre d'article — gris Raleway 24px normal (comme l'ancien site) */
#sp-component .article-header h1 { font-family: Raleway, sans-serif; font-size: 24px; font-weight: 400; color: #5d5d5d; text-transform: none; margin-bottom: 20px; }

/* Sous-menu latéral (position "right") : liste simple + chevrons, pas d'encadré */
#sp-right .sp-module { background: transparent; border: 0; padding: 0; }
#sp-right ul.menu { list-style: none; padding: 0; margin: 40px 0 0; display: block; }
#sp-right ul.menu > li { display: block; float: none; border-bottom: 1px solid #ececec; }
#sp-right ul.menu > li > a { display: block; position: relative; padding: 4px 0 4px 22px; font-family: Raleway, sans-serif; font-size: 16px; font-weight: 400; line-height: 32px; color: #9b9b9b; text-decoration: none; }
#sp-right ul.menu > li > a::before { content: "\203A"; position: absolute; left: 2px; top: 0; color: #9b9b9b; font-size: 18px; line-height: 40px; }
#sp-right ul.menu > li > a:hover,
#sp-right ul.menu > li.current > a,
#sp-right ul.menu > li.active > a { color: #eb5d0b; }
#sp-right ul.menu > li.current > a::before,
#sp-right ul.menu > li.active > a::before { color: #eb5d0b; }

/* Pages intérieures en SP Page Builder : les rangées "fdm-inner" occupent
   la colonne de contenu telle quelle (pas de conteneur 1240px ni de padding) */
.com-sppagebuilder .fdm-inner .sppb-row-container,
.com-sppagebuilder .sppb-section.fdm-inner .sppb-row-container { max-width: none; padding-left: 0; padding-right: 0; }
#sp-component .fdm-inner .article-header h1 { font-family: Raleway, sans-serif; font-size: 24px; font-weight: 400; color: #5d5d5d; text-transform: none; margin: 20px 0 10px; }

/* Helix rend les pages SP Page Builder en pleine largeur (layout-fluid) :
   on recentre le corps sur 1170px pour les pages intérieures + espace bas (40px comme l'ancien site).
   L'accueil (reconnu par son hero) reste bord à bord. */
.com-sppagebuilder #sp-main-body > .row:not(:has(.fdm-hero-img)) {
	max-width: 1170px; margin: 0 auto; padding-bottom: 40px;
}

/* Reliquats de grille Bootstrap 3 dans le corps des articles (col-xs-*) : Joomla 4
   (Bootstrap 5) ne les définit plus. Shim limité au contenu, pour retrouver les
   décalages/gouttières de 15px de l'ancien site. Le bloc #calculatrice a ses
   propres règles, plus bas, qui prennent le dessus. */
#sp-component [class*="col-xs-"] { position: relative; float: left; padding-left: 15px; padding-right: 15px; box-sizing: border-box; }
#sp-component .col-xs-12 { width: 100%; }
#sp-component .col-xs-8 { width: 66.6667%; }
#sp-component .col-xs-3 { width: 25%; }

/* --- Page d'accueil "La Fondation" : carte vedette + grille de 4 cartes --- */
/* Respiration de 40px au-dessus des cartes : sur les pages "landing" (qui n'ont pas
   de titre) c'est l'écart entre le bandeau et la première image, comme l'ancien site. */
.fdm-fond { margin-top: 40px; }
.fdm-fond h3 { font-family: Raleway, sans-serif; font-size: 24px; font-weight: 700; color: #000; text-transform: none; line-height: 26.4px; margin: 0 0 5px; }
.fdm-fond p { font-family: Raleway, sans-serif; font-size: 14px; color: #5d5d5d; line-height: 25.2px; margin: 0 0 20px; }
.fdm-fond-btn { display: inline-block; font-family: Raleway, sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 4px; background: #eb5d0b; }
.fdm-fond-btn:hover { background: #222; color: #fff; }
.fdm-fond-img { display: block; overflow: hidden; margin-bottom: 15px; }
.fdm-fond-img img { display: block; width: 100%; height: auto; transition: transform 800ms ease-in-out; transform: scale(1); }
.fdm-fond-img:hover img { transform: scale(1.15); }
.fdm-fond-featured { margin-bottom: 40px; }
.fdm-fond-featured .fdm-fond-img { width: calc(50% - 15px); }
.fdm-fond-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
/* Variante "Nos actions" : vedette image seule (~46%) + grille 3 colonnes */
.fdm-fond-actions .fdm-fond-featured .fdm-fond-img { width: 46%; margin-bottom: 0; }
.fdm-fond-actions .fdm-fond-grid { grid-template-columns: repeat(3, 1fr); }
/* Variante "Les communautés" : vedette (~38.5%) avec texte + grille 3 colonnes */
.fdm-fond-comm .fdm-fond-featured .fdm-fond-img { width: 38.5%; }
.fdm-fond-comm .fdm-fond-grid { grid-template-columns: repeat(3, 1fr); }
/* Variante "Agir avec nous" : bloc d'intro (image 1/2 + titre + texte, sans bouton) + grille 3 colonnes */
.fdm-fond-agir .fdm-fond-grid { grid-template-columns: repeat(3, 1fr); }
.fdm-fond-img-static { cursor: default; }
.fdm-fond-img-static:hover img { transform: scale(1); }
/* Variante "Médias" : vedette vidéo (~1/2) avec texte + grille 3 colonnes */
.fdm-fond-medias .fdm-fond-featured .fdm-fond-img { width: calc(50% - 15px); }
.fdm-fond-medias .fdm-fond-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .fdm-fond-grid, .fdm-fond-actions .fdm-fond-grid, .fdm-fond-comm .fdm-fond-grid, .fdm-fond-agir .fdm-fond-grid, .fdm-fond-medias .fdm-fond-grid { grid-template-columns: 1fr 1fr; } .fdm-fond-featured .fdm-fond-img, .fdm-fond-actions .fdm-fond-featured .fdm-fond-img, .fdm-fond-comm .fdm-fond-featured .fdm-fond-img, .fdm-fond-medias .fdm-fond-featured .fdm-fond-img { width: 100%; } }
@media (max-width: 575px) { .fdm-fond-grid, .fdm-fond-actions .fdm-fond-grid, .fdm-fond-comm .fdm-fond-grid, .fdm-fond-agir .fdm-fond-grid, .fdm-fond-medias .fdm-fond-grid { grid-template-columns: 1fr; } }

/* --- Page "Les vidéos" : grille d'iframes vidéo (3 colonnes, ratio 16:9) --- */
.fdm-videos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 10px 0 0; }
.fdm-videos-grid .fdm-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.fdm-videos-grid .fdm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) { .fdm-videos-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .fdm-videos-grid { grid-template-columns: 1fr; } }

/* --- Pages "footer" (Mentions légales, Plan du site, Liens, Crédits) : pas de bandeau,
   titre gris souligné d'un filet, pleine largeur --- */
.fdm-footer-page .article-header h1 { border-bottom: 1px solid #ececec; padding-bottom: 22px; margin-bottom: 30px; }
.fdm-footer-page { padding-top: 55px; }

/* --- Liste de liens (Liens monastiques, Crédits) : reprise de com_weblinks --- */
.fdm-liens .fdm-lien { position: relative; margin-bottom: 30px; padding-right: 90px; }
.fdm-liens .fdm-lien-title { display: inline-block; font-family: Raleway, sans-serif; font-size: 14px; color: #eb5d0b; text-decoration: none; margin-bottom: 12px; }
.fdm-liens .fdm-lien-title:hover { color: #222; }
.fdm-liens .fdm-lien-logo { display: block; }
.fdm-liens .fdm-lien-logo img { display: block; height: auto; max-width: 220px; }
.fdm-liens .fdm-lien-hits { position: absolute; top: 0; right: 0; background: #9c9c9c; color: #fff; font-family: Raleway, sans-serif; font-size: 12px; padding: 3px 10px; border-radius: 10px; white-space: nowrap; }

/* --- Contenus hérités de Bootstrap 3 (page "Savoir-faire des communautés") ---
   L'ancien thème utilisait col-xs-6 (grille 2 colonnes) et .btn-primary/.questionWidth
   en barres orange pleine largeur. Bootstrap 5 ne connaît plus ces classes. */
#sp-component .fdm-sf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 0 0 30px; }
#sp-component .fdm-sf-grid .col-xs-6 { width: auto; }
#sp-component .fdm-sf-grid p { margin: 0; }
#sp-component .fdm-sf-grid img { display: block; width: 100%; height: auto; }
#sp-component a.btn.questionWidth,
#sp-component a.btn-primary.questionWidth {
	display: block; width: 100%; box-sizing: border-box;
	background: #eb5d0b; border: 0; border-radius: 4px;
	font-family: Raleway, sans-serif; font-size: 14px; font-weight: 400;
	color: #fff; text-align: center; text-decoration: none;
	padding: 10px 14px; margin: 0 0 8px;
}
#sp-component a.btn.questionWidth:hover,
#sp-component a.btn-primary.questionWidth:hover { background: #222; color: #fff; }
#sp-component .collapse .card.card-body { border: 1px solid #ececec; padding: 12px; margin-bottom: 8px; background: #fff; }
#sp-component .collapse table.table { width: 100%; margin: 0; font-size: 14px; }
#sp-component .collapse table.table td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }

/* =======================  CARTE DES COMMUNAUTÉS  =======================
   Leaflet + OpenStreetMap (remplace le composant CompoJoom Hotspots abandonné).
   Disposition reprise de l'ancien site : carte à gauche, panneau (recherche +
   filtres + liste) à droite. */
.fdm-carte-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 0; border: 1px solid #e3e3e3; margin-top: 40px; }
#fdm-carte { height: var(--fdm-carte-hauteur, 640px); background: #eef2f4; }
#fdm-carte .fdm-carte-erreur { padding: 30px; font-family: Raleway, sans-serif; color: #5d5d5d; }

#fdm-carte-panneau { display: flex; flex-direction: column; border-left: 1px solid #e3e3e3; background: #fff; min-width: 0; }
.fdm-carte-recherche { padding: 12px; border-bottom: 1px solid #ececec; }
.fdm-carte-recherche input { width: 100%; box-sizing: border-box; background: #eef0f2; border: 0; padding: 10px 12px; font-family: Raleway, sans-serif; font-size: 14px; }
.fdm-carte-filtres { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px; border-bottom: 1px solid #ececec; }
.fdm-filtre { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e3e3e3; background: #fff; border-radius: 14px; padding: 3px 8px 3px 4px; cursor: pointer; opacity: .35; transition: opacity .2s, border-color .2s; }
.fdm-filtre.is-on { opacity: 1; border-color: #eb5d0b; }
.fdm-filtre img { width: 18px; height: auto; display: block; }
.fdm-filtre span { font-family: Raleway, sans-serif; font-size: 11px; color: #5d5d5d; white-space: nowrap; max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
.fdm-carte-compteur { padding: 8px 12px; font-family: Raleway, sans-serif; font-size: 12px; color: #9b9b9b; border-bottom: 1px solid #ececec; }
.fdm-carte-liste { flex: 1 1 auto; overflow-y: auto; max-height: 420px; }
.fdm-carte-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #f2f2f2; padding: 9px 12px; font-family: Raleway, sans-serif; font-size: 13px; color: #5d5d5d; cursor: pointer; }
.fdm-carte-item:hover { background: #fdf3ec; color: #eb5d0b; }

/* Fiche (popup Leaflet) */
.fdm-fiche { font-family: Raleway, sans-serif; }
.fdm-fiche-photo { display: block; width: 100%; height: auto; margin-bottom: 10px; }
.fdm-fiche h3 { font-size: 15px; font-weight: 700; color: #000; margin: 0 0 4px; line-height: 1.25; }
.fdm-fiche-cong { font-size: 12px; color: #eb5d0b; margin: 0 0 8px; }
.fdm-fiche p { font-size: 13px; color: #5d5d5d; margin: 0 0 4px; line-height: 1.45; }
.leaflet-popup-content { margin: 14px 16px; }

@media (max-width: 900px) {
	.fdm-carte-wrap { grid-template-columns: 1fr; }
	#fdm-carte { height: 420px; }
	#fdm-carte-panneau { border-left: 0; border-top: 1px solid #e3e3e3; }
	.fdm-carte-liste { max-height: 260px; }
}

/* --- Page "Espace des communautés" (connexion com_users) : reprise de l'ancien site --- */
/* Fond gris, carte blanche centrée, pas de bandeau ni de sidebar */
.com-users.view-login #sp-main-body { background: #ececec; padding: 60px 15px; }
.com-users.view-login #sp-main-body > .row { max-width: 1170px; margin: 0 auto; }
.com-users.view-login #sp-right { display: none; }
.com-users.view-login #sp-component { flex: 0 0 100%; max-width: 100%; width: 100%; }
.com-users.view-login .login { max-width: 600px; margin: 0 auto; background: #fff; padding: 45px 50px; }
.com-users.view-login .login .row { margin: 0; }
.com-users.view-login .login [class*="col-"] { flex: 0 0 100%; max-width: 100%; padding: 0; }
/* Libellés + champs épurés (gris clair, sans bord) */
.com-users.view-login .control-label, .com-users.view-login .form-label { font-family: Raleway, sans-serif; font-size: 14px; color: #333; margin-bottom: 6px; }
.com-users.view-login .form-control { background: #eef0f2; border: 0; border-radius: 0; padding: 12px 15px; height: auto; box-shadow: none; }
/* Neutralise l'input-group du mot de passe : pas d'icône clé ni d'œil */
.com-users.view-login .input-group { display: block; }
.com-users.view-login .input-group-text, .com-users.view-login .input-password-toggle { display: none; }
.com-users.view-login .input-group .form-control { width: 100%; }
/* Masque "Se rappeler de moi" (absent sur l'ancien site) */
.com-users.view-login .form-check { display: none; }
/* Bouton "Connexion ›" compact orange */
.com-users.view-login button[type="submit"].btn-primary { width: auto !important; background: #eb5d0b; border: 0; border-radius: 0; font-family: Raleway, sans-serif; font-weight: 400; font-size: 14px; text-transform: none; padding: 12px 24px; margin-top: 5px; }
.com-users.view-login button[type="submit"].btn-primary::after { content: " \203A"; }
.com-users.view-login button[type="submit"].btn-primary:hover { background: #222; }
/* Liens de réinitialisation : texte orange en ligne (pas de boîtes empilées), sans "Identifiant oublié ?" */
.com-users.view-login .list-group { border: 0; margin-top: 25px; display: block; }
.com-users.view-login a.list-group-item { display: inline; border: 0; padding: 0; background: none; color: #eb5d0b; font-family: Raleway, sans-serif; font-size: 14px; }
.com-users.view-login a.list-group-item[href*="view=remind"] { display: none; }
.com-users.view-login a.list-group-item + a.list-group-item { margin-left: 6px; }
.com-users.view-login a.list-group-item:hover { color: #222; }

/* Bande "Espace privé" sur une page intérieure : fond orange pleine largeur (déborde du conteneur 1170) */
.com-sppagebuilder #sp-main-body { overflow-x: clip; }
.com-sppagebuilder .sppb-row-container:has(.fdm-espace-bleed) { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
/* Page se terminant par la bande espace : pas d'espace blanc avant le footer (collée, comme l'ancien site) */
.com-sppagebuilder #sp-main-body > .row:has(.fdm-espace-bleed) { padding-bottom: 0; }


/* =======================  PAGE D'ACCUEIL  ======================= */

.fdm-home-wrap { overflow-x: hidden; }

/* Conteneur centré 1240px -> marges sur les côtés */
.com-sppagebuilder .sppb-row-container {
	max-width: 1240px; margin-left: auto; margin-right: auto;
	padding-left: 15px; padding-right: 15px; box-sizing: border-box;
}
/* Hero = pleine largeur (bord à bord) — cible SEULEMENT la rangée du hero */
.com-sppagebuilder .sppb-row-container:has(.fdm-hero-img) { max-width: none; padding-left: 0; padding-right: 0; }
.fdm-hero-img { width: 100%; display: block; height: auto; }

/* ---- Titres de section ---- */
.section-title { margin-bottom: 40px; }
.section-title.section-title-center { text-align: center; }
.section-title h1, .section-title h2 { position: relative; display: block; font-family: Raleway, sans-serif; font-weight: 800; font-size: 28px; color: #222; text-transform: uppercase; margin: 0 0 30px; text-align: left; }
.section-title-center h1, .section-title-center h2 { text-align: center; }
.section-title .sub-title { display: block; font-family: 'Droid Serif', 'Noto Serif', Georgia, serif; font-weight: 400; font-style: italic; font-size: 15px; text-transform: uppercase; color: #616161; margin-bottom: 10px; }
.section-title span.linner { display: block; width: 70px; height: 20px; border-top: 2px solid #000; border-bottom: 2px solid #000; margin-top: 25px; }
.section-title.section-title-center span.linner { margin-left: auto; margin-right: auto; }
.section-title span.linner::after { display: block; content: ""; width: 70%; height: 2px; margin: 7px auto; background-color: #eb5d0b; }
.section-title .light-title, .section-title .light-title .sub-title { color: #fff; }
.section-title .light-title span.linner { border-color: #fff; }
.section-title p { max-width: 820px; margin: 0 auto; color: #5d5d5d; font-size: 15px; line-height: 1.7; }

/* ---- Actualités (carrousel) — repris de RokSprocket Strips ---- */
.fdm-actus-carousel { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 15px; }
.fdm-actus-viewport { overflow: hidden; transition: height .4s ease; }
.fdm-actus-track { display: flex; align-items: flex-start; transition: transform .5s ease; }
.fdm-actus-slide { min-width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-content: start; }
.fdm-actus-card { text-align: center; background: #fff; }
.fdm-actus-thumb { display: block; height: 243px; background-size: cover; background-position: center; overflow: hidden; }
.fdm-actus-body { padding: 15px; }
.fdm-actus-title { margin: 0 0 10px; }
.fdm-actus-title a { font-family: 'Poppins', Raleway, sans-serif; font-weight: 600; font-size: 18px; color: #2b2b2b; text-transform: uppercase; line-height: 1.4; text-decoration: none; }
.fdm-actus-title a:hover { color: #eb5d0b; }
.fdm-actus-text { font-family: Raleway, sans-serif; font-size: 14px; color: #5d5d5d; line-height: 1.8; margin: 0 0 18px; }
.fdm-actus-more { display: inline-block; background: #eb5d0b; color: #fff; font-family: 'Poppins', Raleway, sans-serif; font-weight: 700; font-size: 14px; padding: 10px 20px; border-radius: 1px; text-decoration: none; }
.fdm-actus-more:hover { background: #222; color: #fff; }
/* barre de navigation : points à gauche, flèches oranges à droite */
.fdm-actus-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; }
.fdm-actus-dots { display: flex; gap: 8px; }
.fdm-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: #ccc; cursor: pointer; padding: 0; }
.fdm-dot.is-active { background: #000; }
.fdm-actus-arrows { display: flex; gap: 10px; }
.fdm-actus-arrow { width: 35px; height: 35px; border-radius: 50%; border: none; background: #eb5d0b; color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background .2s; }
.fdm-actus-arrow:hover { background: #222; }
@media (max-width: 900px) { .fdm-actus-slide { grid-template-columns: 1fr; gap: 20px; } }

/* ---- Bloc-titre (sous-sections) ---- */
.block-title { font-family: Raleway, sans-serif; font-weight: 800; font-size: 20px; color: #222; line-height: 28px; text-transform: uppercase; margin: 0 0 20px; }
.block-title > span.sub-title { display: block; font-family: 'Droid Serif', 'Noto Serif', Georgia, serif; font-weight: 400; font-style: italic; font-size: 15px; color: #616161; line-height: 15px; margin-bottom: 10px; }
.block-title > span.linner { display: block; width: 70px; height: 20px; border-top: 2px solid #000; border-bottom: 2px solid #000; margin-top: 20px; }
.block-title > span.linner::after { display: block; content: ""; width: 70%; height: 2px; margin: 7px auto; background-color: #eb5d0b; }
.block-title.light-title, .block-title.light-title > span.sub-title { color: #fff; }
.block-title.light-title > span.linner { border-color: #fff; }

/* ---- Section "Espace privé" : bande orange pleine largeur ---- */
.com-sppagebuilder .sppb-row-container:has(.fdm-espace) { position: relative; max-width: none; background: #eb5d0b; padding: 45px 0; }
.com-sppagebuilder .sppb-row-container:has(.fdm-espace)::before { content: ""; position: absolute; inset: 0; background: rgba(245, 171, 53, .9); z-index: 0; }
.com-sppagebuilder .sppb-row-container:has(.fdm-espace) > .sppb-row { position: relative; z-index: 1; max-width: 1210px; margin: 0 auto; padding: 0 15px; }
.fdm-espace { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; justify-content: space-between; }
.fdm-espace .block-title { margin-bottom: 0; }
.fdm-btn-white { display: inline-block; background: #fff; color: #333; border: 1px solid #ccc; border-radius: 4px; font-family: Raleway, sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase; text-decoration: none; padding: 7px 20px; transition: .2s; }
.fdm-btn-white:hover { background: #333; color: #fff; border-color: #333; }

/* ---- Grille 3 colonnes ---- */
.fdm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* ---- 3 cartes (project-item) ---- */
.project-item { width: 100%; margin-bottom: 0; }
.project-item > .thumb { width: 100%; margin-bottom: 20px; overflow: hidden; cursor: pointer; }
.project-item > .thumb:hover img { transform: scale(1.2); }
.project-item > .thumb img { display: block; width: 100%; height: auto; transition: 800ms ease-in-out; transform: scale(1); }
.project-item > h2 { font-family: Raleway, sans-serif; font-weight: 800; font-size: 16px; color: #5d5d5d; text-transform: uppercase; margin: 0 0 15px; }
.project-item > p { font-family: Raleway, sans-serif; font-size: 14px; color: #5d5d5d; line-height: 23px; margin: 0 0 20px; }
.project-item > a.read-more { display: inline-block; font-weight: 700; font-size: 14px; color: #fff; text-transform: uppercase; text-decoration: none; line-height: 18px; padding: 10px; border-radius: 1px; background-color: #eb5d0b; }
.project-item > a.read-more:hover { background-color: #222; }

/* ---- Section "Agir avec nous" : fond sombre pleine largeur + 2 colonnes ---- */
.com-sppagebuilder .sppb-row-container:has(.fdm-agir) { max-width: none; padding: 80px 0; background: #3a3a3a url('/images/warptheme/agir_1.jpg') center center / cover no-repeat; }
.com-sppagebuilder .sppb-row-container:has(.fdm-agir) > .sppb-row { max-width: 1210px; margin: 0 auto; padding: 0 15px; }
.fdm-agir { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.fdm-agir-left { flex: 0 0 31%; max-width: 31%; }
.fdm-agir-title { font-family: Raleway, sans-serif; font-weight: 800; font-size: 28px; color: #fff; text-transform: uppercase; margin: 0 0 20px; }
.fdm-agir-left p { color: #fff; font-family: Raleway, sans-serif; font-size: 14px; line-height: 23px; margin: 0 0 15px; }
.fdm-agir-right { flex: 1; min-width: 0; }
.fdm-pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .fdm-agir-left { flex: 0 0 100%; max-width: 100%; } .fdm-pf-grid { grid-template-columns: 1fr 1fr; } }

/* ---- Agir — portfolio survol orange ---- */
.fdm-pf-item { position: relative; overflow: hidden; display: block; cursor: pointer; }
.fdm-pf-item img { display: block; width: 100%; height: auto; transition: 400ms; transform: scale(1); }
.fdm-pf-item:hover img { transform: scale(1.15); }
.fdm-pf-overlay { position: absolute; inset: 0; background: #eb5d0b; opacity: 0; transition: opacity 400ms; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.fdm-pf-item:hover .fdm-pf-overlay { opacity: .9; }
.fdm-pf-title { color: #fff; font-family: Raleway, sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; transform: translateY(18px); transition: 400ms; }
.fdm-pf-item:hover .fdm-pf-title { transform: translateY(0); }

/* ---- Section "Les communautés" : fond pleine largeur (11.png) + contenu centré ---- */
.com-sppagebuilder .sppb-row-container:has(.we-offer-box) {
	max-width: none; padding: 100px 0;
	background: #f9f9f9 url('/images/11.png') center center / cover no-repeat;
}
.com-sppagebuilder .sppb-row-container:has(.we-offer-box) > .sppb-row {
	max-width: 1210px; margin-left: auto; margin-right: auto; padding: 0 15px;
}

/* ---- Bloc "we-offer" (LES COMMUNAUTÉS…) ---- */
.qx-btn { display: inline-block; padding: 6px 12px; font-size: 14px; line-height: 1.428; border-radius: 4px; text-decoration: none; text-align: center; cursor: pointer; vertical-align: middle; }
.we-offer-box { position: relative; background: #fff; z-index: 2; }
.we-offer-box:after { content: ""; display: table; clear: both; }
.we-offer-box .left { position: relative; float: left; width: 47%; background: #000; overflow: hidden; cursor: pointer; }
.we-offer-box .left:hover > img { transform: scale(1.2); }
.we-offer-box .left > img { width: 100%; line-height: 0; opacity: .3; transition: 800ms ease-in-out; backface-visibility: hidden; transform: scale(1); }
.we-offer-box .left > .img-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: rgba(255, 255, 255, .25); }
.we-offer-box .left > .img-content::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; background-image: linear-gradient(rgba(245, 171, 53, 0) 0%, #eb5d0b 100%); opacity: .6; transition: .2s linear; }
.we-offer-box .left > .img-content > .content { padding: 45px; z-index: 4; position: relative; width: 100%; }
.we-offer-box .left > .img-content > .content > h2 { font-family: Raleway, sans-serif; font-weight: 800; font-size: 30px; color: #fff; text-transform: uppercase; text-align: left; margin: 0; }
.we-offer-box .left > .img-content > .content > h2 > span { display: block; font-family: 'Droid Serif', 'Noto Serif', Georgia, serif; font-weight: 400; font-style: italic; font-size: 15px; margin-bottom: 10px; }
.we-offer-box .left > .img-content > .content > h2 > span.linner { width: 70px; height: 20px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; margin-top: 20px; margin-bottom: 25px; }
.we-offer-box .left > .img-content > .content > p { font-family: Raleway, sans-serif; font-size: 14px; color: #fff; line-height: 23px; margin-bottom: 25px; }
.we-offer-box .left > .img-content > .content > .devbtn, .we-offer-box .left > .img-content > .content > .qx-btn { padding-left: 35px; padding-right: 35px; margin-bottom: 10px; }
.we-offer-box .right { background: #fff; width: 53%; height: 100%; position: absolute; left: 47%; top: 0; padding: 30px; overflow: hidden; }
.we-offer-box .right ul { display: table; list-style: none; padding-left: 0; margin: 0; }
.we-offer-box .right ul.box-offers li { float: left; width: 49%; border-bottom: 1px solid #cecece; margin: 0; padding: 0; vertical-align: top; list-style: none; }
.we-offer-box .right ul.box-offers li:nth-of-type(2n+1) { border-right: 1px solid #cecece; padding-bottom: 30px; padding-right: 30px; }
.we-offer-box .right ul.box-offers li:nth-of-type(2n) { padding-bottom: 30px; padding-left: 30px; }
.we-offer-box .right ul.box-offers li:nth-last-of-type(1), .we-offer-box .right ul.box-offers li:nth-last-of-type(2) { border-bottom: none; padding-top: 30px; padding-bottom: 0; }
.we-offer-box .right ul.box-offers li > a { display: inline-block; text-align: left; font-size: 38px; color: #616161; text-decoration: none; }
.we-offer-box .right ul.box-offers li > h2 { font-family: Raleway, sans-serif; font-weight: 800; font-size: 24px; color: #222; text-transform: uppercase; margin-bottom: 25px; margin-top: 0; }
.we-offer-box .right ul.box-offers li > h2 span { display: block; font-family: 'Droid Serif', 'Noto Serif', Georgia, serif; font-weight: 400; font-style: italic; font-size: 15px; color: #616161; margin-bottom: 8px; }
.we-offer-box .right ul.box-offers li > p { font-family: Raleway, sans-serif; font-size: 14px; color: #9b9b9b; line-height: 23px; margin-bottom: 0; }
.box-offers li img { width: 36px; margin-bottom: 5px; }
a.serviceTitleColor { color: #000; }
.readon-services { background-color: #eb5d0b; text-transform: uppercase; border: none; font-weight: 700; color: #fff; }
.readon-services:hover { background-color: #000; color: #fff; }

/* ---- Responsive ---- */
@media (max-width: 900px) { .fdm-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
	.fdm-grid-3 { grid-template-columns: 1fr; }
	.we-offer-box .left, .we-offer-box .right { float: none; width: 100%; position: relative; left: 0; height: auto; }
	.we-offer-box .right ul.box-offers li { width: 100%; border-right: none !important; padding: 20px 0 !important; }
	.section-title h1, .section-title h2 { font-size: 22px; }
}


/* =======  CALCULATEUR DE DÉDUCTION FISCALE  =======
   Bloc #calculatrice inclus dans l'article "Dons et avantages fiscaux".
   Son markup utilise des classes de grille Bootstrap 3 (col-xs-*, *-offset-*)
   qui n'existent plus dans Joomla 4 / Bootstrap 5 : shim limité à #calculatrice.
   Comportement : templates/shaper_helixultimate/js/custom.js */
#calculatrice { margin: 30px 0; overflow: hidden; }
#calculatrice h1 { font-family: Raleway, sans-serif; font-size: 36px; font-weight: 400; color: #5d5d5d; text-transform: none; margin: 0 0 20px; }
/* Bootstrap 5 met .row en flex et force .row > * à width:100% (Bootstrap 3 ne le faisait pas) :
   on revient au flux en bloc + gouttières de 15px de Bootstrap 3, pour que les
   boutons de montant restent côte à côte et que les décalages tombent au bon endroit. */
#calculatrice .row { display: block; margin-left: -15px; margin-right: -15px; }
#calculatrice .row > * { width: auto; max-width: none; margin-top: 0; }
#calculatrice .amount-box { display: inline-block; width: auto; }
#calculatrice [class*="col-xs-"], #calculatrice [class*="col-sm-"] { position: relative; float: none; padding-left: 15px; padding-right: 15px; box-sizing: border-box; }
#calculatrice .col-xs-12 { width: 100%; }
#calculatrice .col-xs-8 { width: 66.6667%; }
#calculatrice .col-xs-11 { width: 91.6667%; }
#calculatrice .col-xs-offset-2 { margin-left: 16.6667%; }
@media (min-width: 768px) {
	#calculatrice .col-sm-8 { width: 66.6667%; }
	#calculatrice .col-sm-offset-3 { margin-left: 25%; }
}
div.margin-calculator { margin-top: 10px; margin-bottom: 10px; }
/* Boutons de montant : mêmes métriques que l'ancien site (71x49 à 14px Raleway,
   bordure par défaut du navigateur que l'ancien site ne réinitialisait pas). */
.amount { color: #fff; text-align: center; border-radius: 5px; background: #E05206; font-weight: bold; padding: 10px; margin-bottom: 5px; cursor: pointer; font-family: Raleway, sans-serif; font-size: 14px; line-height: 25.2px; border: 2px outset #000; }
.selected-amount { background: #d2492a !important; }
input.custom-amount { background-color: lightgrey; border: 0; padding: 6px 12px; font-size: 14px; }
.calculatorSentence { color: red; font-size: 18px; text-align: center; }
.calculatorSentence span { color: #000; }

/* Bouton rouge "FAIRE UN DON" placé dans le corps d'un article (art. Dons et avantages fiscaux).
   Reste en display:inline comme sur l'ancien site (le width:150px y est donc inopérant). */
.make-a-gift-in-article { width: 150px; background-color: red; color: #fff; text-align: center; padding: 10px 20px; font-size: 16px; line-height: 36px; border-radius: 10px; text-decoration: none; }
.make-a-gift-in-article:hover, .make-a-gift-in-article:focus { color: #fff; text-decoration: none; }
.make-a-gift-in-article:before { background: none; }