.elementor-kit-15{--e-global-color-primary:#E30613;--e-global-color-secondary:#006FB5;--e-global-color-text:#222222;--e-global-color-accent:#F2F2F2;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-15 button,.elementor-kit-15 input[type="button"],.elementor-kit-15 input[type="submit"],.elementor-kit-15 .elementor-button{background-color:#E30613;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);border-radius:25px 25px 25px 25px;}.elementor-kit-15 button:hover,.elementor-kit-15 button:focus,.elementor-kit-15 input[type="button"]:hover,.elementor-kit-15 input[type="button"]:focus,.elementor-kit-15 input[type="submit"]:hover,.elementor-kit-15 input[type="submit"]:focus,.elementor-kit-15 .elementor-button:hover,.elementor-kit-15 .elementor-button:focus{background-color:#006FB5;border-radius:25px 25px 25px 25px;}.elementor-kit-15 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
FCCC – Design System global (2025)
=========================================================
- Thème bicolore ROUGE / BLEU + inversion future (data-brand="swap")
- Header & Footer (Elementor) – par défaut BLEU
- Variables de marque, structure, typo
- Boutons, tableaux, citations
- Frises chronologiques
- Organisation (grilles, cartes, accordéons)
- Menu mobile (niveau 1 + sous-menus 2+) harmonisé
- Responsivité + correctifs structurels anti-overflow
- Footer credits
- Legacy .fccc-dd-panel (corrigé)
========================================================= */
/* =========================================================
0) Thème bicolore (Rouge / Bleu) + inversion via html[data-brand="swap"]
========================================================= */
:root{
/* Couleurs physiques club */
--club-red:#e30613; --club-red-600:#c10510; --club-red-100:#ffe4e6;
--club-blue:#006fb5; --club-blue-600:#005a91; --club-blue-300:#4fa7df; --club-blue-100:#eef7fd;
/* Tokens sémantiques (par défaut) */
--brand-1:var(--club-red); --brand-1-600:var(--club-red-600); --brand-1-100:var(--club-red-100);
--brand-2:var(--club-blue); --brand-2-600:var(--club-blue-600); --brand-2-100:var(--club-blue-100);
/* Compat descendante / historiques */
--fccc-primary:var(--brand-1); --fccc-primary-600:var(--brand-1-600); --fccc-on-primary:#fff;
--fccc-blue:var(--brand-2); --fccc-red:var(--brand-1);
/* Tokens d’usage */
--heading-color:var(--brand-1);
--accent-color:var(--brand-2);
--btn-primary-bg:var(--brand-1);
--btn-primary-bg-hover:var(--brand-1-600);
--btn-ghost-text:var(--brand-1);
--btn-ghost-border:var(--brand-1);
--soft-1:var(--brand-1-100);
--soft-2:var(--brand-2-100);
--grad-1:linear-gradient(135deg,var(--brand-2-600),var(--brand-2));
--grad-timeline-h:linear-gradient(90deg,var(--brand-2),var(--brand-1));
--grad-timeline-v:linear-gradient(180deg,var(--brand-2),var(--brand-1));
}
/* Inversion future (option) */
html[data-brand="swap"]{
--brand-1:var(--club-blue); --brand-1-600:var(--club-blue-600); --brand-1-100:var(--club-blue-100);
--brand-2:var(--club-red); --brand-2-600:var(--club-red-600); --brand-2-100:var(--club-red-100);
}
/* =========================================================
1) Header & Footer (Elementor) — par défaut BLEU
========================================================= */
:root{
/* Header/Footer bleus (texte blanc) */
--header-bg:var(--brand-2); --header-fg:#fff;
--header-link:#fff; --header-link-hover:rgba(255,255,255,.85);
--header-border:rgba(255,255,255,.15);
--footer-bg:var(--brand-2); --footer-fg:#fff;
--footer-link:#fff; --footer-link-hover:rgba(255,255,255,.85);
--footer-border:rgba(255,255,255,.15);
/* Typographies contrôlables */
--fccc-font-heading:"Oswald",sans-serif;
--fccc-font-body:"Inter","Open Sans",sans-serif;
--header-font-family:var(--fccc-font-heading);
--header-font-weight:600;
--header-font-size:1rem;
--header-text-transform:none;
--footer-font-family:var(--fccc-font-body);
--footer-font-weight:400;
--footer-font-size:.975rem;
--footer-text-transform:none;
}
/* Compat Elementor Global Styles (fallbacks auto) */
:root{
--fccc-font-heading:var(--e-global-typography-primary-font-family,"Oswald"),sans-serif;
--fccc-font-body:var(--e-global-typography-text-font-family,"Inter"),sans-serif;
}
/* Header */
.elementor-location-header,
.hfe-header,
header.site-header{
background:var(--header-bg)!important; color:var(--header-fg)!important;
border-bottom:1px solid var(--header-border);
font-family:var(--header-font-family); font-weight:var(--header-font-weight);
font-size:var(--header-font-size); text-transform:var(--header-text-transform);
position:relative; z-index:9999!important; overflow:visible!important;
}
.elementor-location-header a,.hfe-header a,header.site-header a{ color:var(--header-link); text-decoration:none; }
.elementor-location-header a:hover,.hfe-header a:hover,header.site-header a:hover{ color:var(--header-link-hover); }
.elementor-nav-menu--dropdown,.elementor-nav-menu .sub-menu,.hfe-nav-menu .sub-menu{
background:var(--header-bg); border:1px solid var(--header-border); z-index:10000!important;
}
.elementor-nav-menu--dropdown a,.elementor-nav-menu .sub-menu a,.hfe-nav-menu .sub-menu a{ color:var(--header-link); }
.elementor-nav-menu--dropdown a:hover,.elementor-nav-menu .sub-menu a:hover,.hfe-nav-menu .sub-menu a:hover{ color:var(--header-link-hover); }
/* Footer */
.elementor-location-footer,footer.site-footer{
background:var(--footer-bg)!important; color:var(--footer-fg)!important;
border-top:1px solid var(--footer-border);
font-family:var(--footer-font-family); font-weight:var(--footer-font-weight);
font-size:var(--footer-font-size); text-transform:var(--footer-text-transform);
}
.elementor-location-footer a,footer.site-footer a{ color:var(--footer-link); text-decoration:none; }
.elementor-location-footer a:hover,footer.site-footer a:hover{ color:var(--footer-link-hover); }
.elementor-location-footer .elementor-icon,.elementor-location-footer .elementor-widget,
footer.site-footer .elementor-icon,footer.site-footer .elementor-widget{ color:var(--footer-fg); fill:var(--footer-fg); }
/* Focus acces */
.elementor-location-header a:focus-visible, .elementor-location-footer a:focus-visible{
outline:3px solid rgba(255,255,255,.35); outline-offset:2px;
}
/* Variantes utilitaires (option) */
.header--red{ --header-bg:var(--brand-1); --header-fg:#fff; --header-link:#fff; --header-link-hover:rgba(255,255,255,.85); --header-border:rgba(255,255,255,.15); }
.header--light-blue{ --header-bg:#fff; --header-fg:var(--brand-2); --header-link:var(--brand-2); --header-link-hover:var(--brand-2-600); --header-border:var(--fccc-border); }
.footer--red{ --footer-bg:var(--brand-1); --footer-fg:#fff; --footer-link:#fff; --footer-link-hover:rgba(255,255,255,.85); --footer-border:rgba(255,255,255,.15); }
.footer--light{ --footer-bg:#fff; --footer-fg:var(--brand-2); --footer-link:var(--brand-2); --footer-link-hover:var(--brand-2-600); --footer-border:var(--fccc-border); }
.header--transparent{ --header-bg:transparent; --header-border:transparent; }
.header--transparent .elementor-nav-menu a, .header--transparent a{ color:#fff; }
.header--transparent .elementor-nav-menu a:hover{ color:rgba(255,255,255,.85); }
/* =========================================================
2) Variables UI / structure / typographie globale
========================================================= */
:root{
--fccc-bg:#fff; --fccc-text:#1f2937; --fccc-muted:#6b7280; --fccc-border:#e5e7eb;
--fccc-radius:16px; --fccc-radius-lg:20px; --fccc-shadow:0 6px 20px rgba(0,0,0,.06);
--fccc-space-1:.5rem; --fccc-space-2:.75rem; --fccc-space-3:1rem;
--fccc-space-4:1.5rem; --fccc-space-5:2rem; --fccc-space-6:3rem;
--content-max:1100px;
}
body{ font-family:var(--fccc-font-body); font-size:1rem; color:var(--fccc-text); background:var(--fccc-bg); line-height:1.6; }
.fccc-container{ max-width:var(--content-max); margin:0 auto; padding:0 var(--fccc-space-3); }
.fccc-section{ padding:var(--fccc-space-4) 0; background:var(--fccc-bg); }
h1,h2,h3,h4,h5,h6{ font-family:var(--fccc-font-heading); color:var(--heading-color); line-height:1.2; margin-top:0; margin-bottom:var(--fccc-space-3); }
h1{ font-size:clamp(2rem,3.5vw,2.5rem); text-transform:uppercase; }
h2{ font-size:clamp(1.6rem,3vw,2rem); text-transform:uppercase; }
h3{ font-size:clamp(1.3rem,2.3vw,1.6rem); font-weight:500; }
p{ margin-bottom:var(--fccc-space-3); color:var(--fccc-text); }
ul,ol{ margin:0 0 var(--fccc-space-4) 1.5rem; } li{ margin-bottom:.35rem; }
.fccc-lead{ font-size:clamp(1.0625rem,1.6vw,1.1875rem); color:var(--fccc-muted); }
.fccc-rule{ height:1px; border:0; background:var(--fccc-border); margin:var(--fccc-space-5) 0; }
/* Comportement d’ancre doux (générique) */
html{ scroll-behavior:smooth; }
/* =========================================================
3) Boutons unifiés
========================================================= */
:is(.fccc-btn,.elementor .elementor-button){
display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
padding:.85rem 1.25rem; font-weight:600; border-radius:var(--fccc-radius);
border:1px solid transparent; text-decoration:none; box-shadow:var(--fccc-shadow);
transition:all .15s ease; line-height:1.1;
}
:is(.fccc-btn,.elementor .elementor-button):hover{ transform:translateY(-1px); }
:is(.fccc-btn--primary,.elementor .elementor-button.fccc--primary){ background:var(--btn-primary-bg); color:var(--fccc-on-primary); }
:is(.fccc-btn--primary,.elementor .elementor-button.fccc--primary):hover{ background:var(--btn-primary-bg-hover); }
:is(.fccc-btn--ghost,.elementor .elementor-button.fccc--ghost){ background:#fff; color:var(--btn-ghost-text); border-color:var(--btn-ghost-border); }
:is(.fccc-btn--ghost,.elementor .elementor-button.fccc--ghost):hover{ background: color-mix(in srgb, var(--brand-1) 6%, transparent); }
:is(.fccc-btn--lg,.elementor .elementor-button.fccc--lg){ padding:1rem 1.4rem; font-size:1.05rem; }
:is(.fccc-btn--sm,.elementor .elementor-button.fccc--sm){ padding:.6rem .9rem; font-size:.92rem; }
.fccc-buttons{ display:flex; flex-wrap:wrap; gap:var(--fccc-space-3); }
.fccc-button-item{ display:flex; flex-direction:column; align-items:flex-start; flex:1 1 320px; }
.fccc-button-item p{ margin-top:.5rem; font-size:.9rem; color:var(--fccc-muted); font-style:italic; }
/* =========================================================
4) Tableaux
========================================================= */
.fccc-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.fccc-table{
width:100%; border-collapse:collapse; font-size:.975rem;
border:1px solid var(--fccc-border); border-radius:var(--fccc-radius);
overflow:hidden; box-shadow:var(--fccc-shadow);
}
.fccc-table thead th{ background:#fafafa; color:var(--fccc-muted); font-weight:700; text-align:left; letter-spacing:.01em; }
.fccc-table th,.fccc-table td{ padding:.9rem 1rem; border-bottom:1px solid var(--fccc-border); }
.fccc-table tbody tr:last-child td{ border-bottom:0; }
.fccc-table tbody tr:hover{ background:var(--soft-1); }
/* =========================================================
5) Citations / blocs de mise en avant
========================================================= */
.fccc-quote{
margin:var(--fccc-space-5) 0; padding:var(--fccc-space-4);
border-left:4px solid var(--brand-1);
background: linear-gradient(90deg, color-mix(in srgb, var(--brand-1) 6%, transparent), transparent 60%);
border-radius:0 var(--fccc-radius) var(--fccc-radius) 0;
color:var(--fccc-text); font-style:italic;
}
/* =========================================================
6) Frises chronologiques
========================================================= */
.fccc-timeline{
width:100%; display:flex; justify-content:center;
margin:30px auto; padding:10px 0; overflow-x:hidden;
}
.timeline-container{
display:flex; justify-content:space-between; align-items:flex-start;
width:100%; max-width:1000px; position:relative;
}
.timeline-container::before{
content:""; position:absolute; top:24px; left:0; right:0; height:4px;
background:var(--grad-timeline-h); border-radius:2px; z-index:1;
}
.timeline-item{ position:relative; text-align:center; flex:1; padding:0 10px; }
.timeline-link{ display:inline-flex; flex-direction:column; align-items:center; gap:16px; text-decoration:none; outline:0; }
.timeline-dot{
width:22px; height:22px; background:var(--brand-2); border:3px solid #fff; border-radius:50%;
position:relative; z-index:2; box-shadow:0 0 0 3px var(--brand-2); transition:transform .25s,box-shadow .25s;
}
.timeline-dot.today{ background:var(--brand-1); box-shadow:0 0 0 3px var(--brand-1); }
.timeline-link:hover .timeline-dot{ transform:scale(1.2); }
.timeline-link:focus-visible .timeline-dot{ box-shadow:0 0 0 4px rgba(0,111,181,.35),0 0 0 8px rgba(0,0,0,.06); }
.timeline-content h3{ font-size:1.1em; margin:0 0 2px 0; color:var(--brand-2); }
.timeline-content p{ margin:0; font-size:.9em; color:#333; }
@media(max-width:768px){
.timeline-container{ flex-direction:column; align-items:center; }
.timeline-container::before{
top:0; bottom:0; left:12px; right:auto; width:4px; height:100%;
background:var(--grad-timeline-v);
}
.timeline-item{ text-align:left; width:100%; padding:20px 0 20px 50px; }
.timeline-link{ align-items:flex-start; gap:10px; position:relative; }
.timeline-dot{ position:absolute; left:-38px; top:2px; }
}
/* =========================================================
7) Organisation (grilles, cartes, accordéons)
========================================================= */
/* Grille moderne (optionnelle) */
.org-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
@media(max-width:1199px){ .org-grid{ grid-template-columns:repeat(8,1fr); } }
@media(max-width:768px){ .org-grid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:520px){ .org-grid{ grid-template-columns:repeat(2,1fr); } }
.org-card{
grid-column:span 3; background:#fff; border:1px solid var(--fccc-border);
border-radius:var(--fccc-radius); box-shadow:var(--fccc-shadow);
overflow:hidden; display:flex; flex-direction:column;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.org-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); border-color:rgba(0,0,0,.06); }
.org-card__media{ position:relative; aspect-ratio:4/3; background:#f6f6f6; overflow:hidden; }
.org-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.org-card__body{ padding:1rem; }
.org-card__name{ font-family:var(--fccc-font-heading); font-size:1.15rem; letter-spacing:.02em; margin:0 0 .35rem 0; color:var(--fccc-text); }
.org-card__role{ color:var(--fccc-muted); font-size:.95rem; margin:0 0 .75rem 0; }
.org-card__contacts{ display:flex; flex-wrap:wrap; gap:.5rem; }
.org-card__contacts a{
display:inline-flex; align-items:center; gap:.4rem;
padding:.5rem .7rem; border:1px solid var(--brand-1); border-radius:999px;
text-decoration:none; color:var(--brand-1); font-weight:600; line-height:1;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.org-card__contacts a:hover{ background:var(--brand-1); color:var(--fccc-on-primary); border-color:var(--brand-1); }
/* Ancienne grille conservée */
:root{ --grid-gap:1rem; }
.organisation-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--grid-gap); align-items:start; }
@media(max-width:1100px){ .organisation-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:680px){ .organisation-grid{ grid-template-columns:1fr; } }
.card{
background:#fff; border:1px solid rgba(0,0,0,.08);
border-radius:var(--fccc-radius,14px); box-shadow:var(--fccc-shadow,0 6px 18px rgba(0,0,0,.06));
overflow:hidden; display:flex; flex-direction:column;
transition:transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.08); border-color:rgba(0,0,0,.06); }
.card-header{ display:flex; gap:12px; align-items:center; padding:16px; border-bottom:1px solid rgba(0,0,0,.08); }
.card-header .avatar{ width:56px; height:56px; border-radius:50%; background:var(--grad-1); flex:0 0 56px; }
.card-header .meta{ display:flex; flex-direction:column; gap:4px; }
.card-header .person{ font-weight:700; }
.card-header .badge{ display:inline-block; border:1px solid rgba(0,0,0,.12); border-radius:999px; padding:3px 8px; font-size:.95em; opacity:.9; }
/* Accordéons “checkbox” */
.card.check-acc{ position:relative; }
.card.check-acc .cb-toggle{ position:absolute; opacity:0; pointer-events:none; }
.card.check-acc .cb-summary{
display:block; padding:12px 16px; font-weight:600; cursor:pointer; user-select:none;
border-top:1px solid rgba(0,0,0,.08); transition:background .2s, color .2s;
}
.card.check-acc .cb-summary:hover{ background:var(--soft-2); }
.card.check-acc .cb-summary::after{ content:"▾"; float:right; opacity:.6; transition:transform .25s; }
.card.check-acc .cb-panel{ display:none; padding:10px 16px 16px; }
.card.check-acc .cb-toggle:checked ~ .cb-summary::after{ transform:rotate(-180deg); }
.card.check-acc .cb-toggle:checked ~ .cb-panel{ display:block; }
/* Tableau clé/valeur */
.kv{ display:grid; grid-template-columns:1.4rem 1fr; column-gap:6px; row-gap:4px; margin-top:6px; }
.kv div:first-child{ display:flex; align-items:center; justify-content:center; width:1.4rem; line-height:1; font-size:1em; }
/* =========================================================
8) Utilitaires
========================================================= */
.fccc-muted{ color:var(--fccc-muted); }
.fccc-text-center{ text-align:center; }
.fccc-mb-0{ margin-bottom:0!important; }
.fccc-mb-1{ margin-bottom:var(--fccc-space-1)!important; }
.fccc-mb-2{ margin-bottom:var(--fccc-space-2)!important; }
.fccc-mb-3{ margin-bottom:var(--fccc-space-3)!important; }
.fccc-mb-4{ margin-bottom:var(--fccc-space-4)!important; }
.fccc-mb-5{ margin-bottom:var(--fccc-space-5)!important; }
/* =========================================================
9) Responsivité + gouttières Elementor + anti-overflow
========================================================= */
@media(max-width:768px){
/* Gouttières mobiles stables */
.elementor .elementor-section:not(.fccc-no-gutters) > .elementor-container{
padding-inline:var(--fccc-space-3); box-sizing:border-box;
}
.elementor .e-con:not(.fccc-no-gutters){
padding-inline:var(--fccc-space-3); box-sizing:border-box;
}
.elementor .elementor-column-gap-no .elementor-column > .elementor-widget-wrap{
padding-left:0; padding-right:0;
}
/* Stretched sections recalées à 100% (pas 100vw) */
.elementor .elementor-section.elementor-section-stretched{
left:0!important; right:0!important; width:100%!important;
}
/* Conteneurs sécurisés */
.elementor .elementor-container, .elementor .e-con{
max-width:100%; box-sizing:border-box;
}
/* Wraps : coupe l’éventuel 1px de débordement */
.elementor .elementor-widget-wrap{ overflow-x:hidden; }
/* Médias fluides */
.elementor img,.elementor iframe,.elementor video{ max-width:100%; height:auto; }
.elementor .elementor-widget-text-editor table{
display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.elementor *{ word-wrap:break-word; overflow-wrap:anywhere; }
}
/* =========================================================
10) Menu mobile Elementor/HFE (niveau 1)
========================================================= */
:root{
--mnav-bg:var(--header-bg,var(--brand-2));
--mnav-fg:var(--header-fg,#fff);
--mnav-link:var(--header-link,#fff);
--mnav-link-hover:var(--header-link-hover,rgba(255,255,255,.85));
--mnav-divider:rgba(255,255,255,.15);
}
@media(max-width:1199px){
.elementor-nav-menu--dropdown,
.elementor-nav-menu__container,
.hfe-nav-menu__toggle + .hfe-dropdown,
.elementor .elementor-nav-menu--dropdown{
background:var(--mnav-bg)!important;
color:var(--mnav-fg)!important;
border:1px solid var(--mnav-divider);
z-index:10010; position:relative;
}
.elementor-nav-menu--dropdown .elementor-item,
.elementor-nav-menu--dropdown a,
.elementor-nav-menu__container .elementor-item,
.hfe-dropdown .menu-item > a{
color:var(--mnav-link)!important;
text-decoration:none; font-weight:600;
display:block; padding:12px 16px;
border-bottom:1px solid var(--mnav-divider);
}
.elementor-nav-menu--dropdown .elementor-item:last-child,
.elementor-nav-menu__container .elementor-item:last-child,
.hfe-dropdown .menu-item:last-child > a{ border-bottom:none; }
.elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.elementor-nav-menu__container .elementor-item:hover,
.elementor-nav-menu__container .elementor-item.elementor-item-active,
.hfe-dropdown .menu-item > a:hover,
.hfe-dropdown .menu-item.current-menu-item > a{
color:var(--mnav-link-hover)!important; background:transparent;
}
.elementor-menu-toggle, .elementor-menu-toggle i, .elementor-menu-toggle svg,
.hfe-nav-menu__toggle, .hfe-nav-menu__toggle i, .hfe-nav-menu__toggle svg{
color:var(--mnav-link)!important; fill:currentColor!important; stroke:currentColor!important;
}
.elementor-nav-menu--dropdown .elementor-item svg{ fill:currentColor!important; stroke:currentColor!important; }
}
/* Variante header clair */
.header--light-blue{
--mnav-bg:#fff; --mnav-fg:var(--brand-2);
--mnav-link:var(--brand-2); --mnav-link-hover:var(--brand-2-600);
--mnav-divider:rgba(0,0,0,.08);
}
/* =========================================================
11) Legacy – Panneau menu mobile .fccc-dd-panel (corrigé)
========================================================= */
.fccc-dd-panel{
position:fixed; bottom:64px; left:50%; transform:translateX(-50%);
/* Largeurs sûres : pas de 100vw */
width:min(92%,1210px); max-width:calc(100% - 24px);
background:#fff; border:1px solid #e5e7eb; border-radius:12px 12px 0 0;
box-shadow:0 -4px 18px rgba(0,0,0,.2); padding:16px 18px;
display:none; z-index:1000; box-sizing:border-box; overflow-x:hidden;
}
.fccc-dd-panel.open{ display:block; }
@supports(width:100svw){
.fccc-dd-panel{ width:min(92svw,1210px); max-width:calc(100dvw - 24px); }
}
/* =========================================================
12) Verrou global anti-scroll horizontal de la PAGE
========================================================= */
html,body{ overflow-x:hidden; width:100%; }
/* =========================================================
13) MENU MOBILE – Sous-menus de niveau 2+ (Elementor/HFE)
---------------------------------------------------------
Corrige l’invisibilité ET le comportement des sous-menus.
Désormais :
- Fermés par défaut
- Ouverts uniquement au clic (Elementor/HFE ajoute .elementor-item-active)
- Icône/chevron à droite, aligné sur la même ligne que le texte
- Lisibles, hiérarchisés, compatibles inversion des couleurs
========================================================= */
@media (max-width: 1199px){
/* 1) Sous-menus FERMÉS par défaut */
.elementor-nav-menu--dropdown .sub-menu,
.hfe-dropdown .sub-menu{
display: none; /* ← replié par défaut */
position: static !important;
width: 100% !important;
background: var(--mnav-bg) !important;
border: 1px solid var(--mnav-divider);
border-left: 0; border-right: 0;
box-shadow: none !important;
overflow: hidden;
transition: max-height .25s ease;
}
/* 2) Sous-menus OUVERTS uniquement quand le parent est actif */
.elementor-nav-menu--dropdown .menu-item.elementor-item-active > .sub-menu,
.elementor-nav-menu--dropdown .menu-item.current-menu-item > .sub-menu,
.hfe-dropdown .menu-item.elementor-item-active > .sub-menu,
.hfe-dropdown .menu-item.current-menu-item > .sub-menu{
display: block;
}
/* 3) Liens sous-niveaux : indentés, lisibles et cohérents */
.elementor-nav-menu--dropdown .sub-menu > li > a,
.hfe-dropdown .sub-menu > li > a{
color: var(--mnav-link) !important;
background: transparent;
display: block;
padding: 12px 16px 12px 24px; /* indentation hiérarchique */
text-decoration: none;
border-bottom: 1px solid var(--mnav-divider);
font-weight: 600;
}
/* 4) Dernier élément sans bordure */
.elementor-nav-menu--dropdown .sub-menu > li:last-child > a,
.hfe-dropdown .sub-menu > li:last-child > a{
border-bottom: none;
}
/* 5) États interactifs : hover / actif */
.elementor-nav-menu--dropdown .sub-menu a:hover,
.elementor-nav-menu--dropdown .sub-menu .elementor-item-active > a,
.hfe-dropdown .sub-menu a:hover,
.hfe-dropdown .sub-menu .current-menu-item > a{
color: var(--mnav-link-hover) !important;
background: transparent;
}
/* 6) Icônes / chevrons : même couleur que le texte */
.elementor-nav-menu--dropdown .sub-menu a svg,
.hfe-dropdown .sub-menu a svg{
fill: currentColor !important;
stroke: currentColor !important;
}
/* 7) Sécurité : ne pas couper les sous-niveaux */
.elementor-nav-menu--dropdown,
.elementor-nav-menu__container,
.hfe-nav-menu__toggle + .hfe-dropdown{
overflow: visible !important;
}
/* 8) Icône/chevron sur la même ligne que le texte (parents avec sous-menus) */
.elementor-nav-menu--dropdown .menu-item-has-children > a,
.hfe-dropdown .menu-item-has-children > a{
display: flex !important;
align-items: center;
justify-content: space-between; /* texte à gauche, chevron à droite */
width: 100%;
padding-right: 20px; /* espace respirant côté chevron */
}
/* 9) Ciblage des chevrons/sub-arrow générés par Elementor/HFE */
.elementor-nav-menu--dropdown .menu-item-has-children > a .sub-arrow,
.hfe-dropdown .menu-item-has-children > a .sub-arrow{
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 8px;
transform: none !important; /* évite les placements “sous le texte” */
}
/* 10) Cas SVG/icônes intégrés */
.elementor-nav-menu--dropdown .menu-item-has-children > a svg,
.hfe-dropdown .menu-item-has-children > a svg{
width: 1em; height: 1em;
margin-left: 6px;
flex-shrink: 0;
}
}
/* 11) Cas particulier : header clair (.header--light-blue)
— conservation du contraste et du fond blanc */
.header--light-blue .elementor-nav-menu--dropdown .sub-menu > li > a,
.header--light-blue .hfe-dropdown .sub-menu > li > a{
color: var(--brand-2) !important;
border-color: rgba(0,0,0,.08);
}
.header--light-blue .elementor-nav-menu--dropdown .sub-menu,
.header--light-blue .hfe-dropdown .sub-menu{
background: #fff !important;
}
/* =========================================================
14) MINI-MENU DESKTOP – Style général (thémable, isolé)
---------------------------------------------------------
- Utilise UNIQUEMENT des variables nav-* (pas de brand global)
- Compatible inversion via html[data-brand="swap"] (bloc 18)
- Desktop uniquement
========================================================= */
.fccc-toc{
background: var(--nav-bg, #fff);
border-bottom: 1px solid var(--nav-border, var(--fccc-border, #e5e7eb));
box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.fccc-toc .toc-inner{
max-width: var(--content-max);
margin: 0 auto;
padding: 10px 16px;
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
align-items: center;
}
.fccc-toc a{
display: inline-block;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid var(--nav-pill-border, var(--nav-brand-2));
color: var(--nav-pill-text, var(--nav-brand-2));
background: var(--nav-pill-bg, transparent);
text-decoration: none;
font-weight: 600;
line-height: 1;
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.fccc-toc a:hover{
background: var(--nav-pill-hover-bg, var(--nav-brand-2));
color: var(--nav-pill-hover-text, var(--on-nav-brand-2, #fff));
border-color: var(--nav-pill-hover-border, var(--nav-brand-2));
transform: translateY(-1px);
}
.fccc-toc a.is-active,
.fccc-toc a[aria-current="true"]{
background: var(--nav-pill-active-bg, var(--nav-brand-1));
color: var(--nav-pill-active-text, var(--on-nav-brand-1, #fff));
border-color: var(--nav-pill-active-border, var(--nav-brand-1));
}
.fccc-toc a:focus-visible{
outline: 3px solid var(--nav-focus-ring, rgba(0,0,0,.15));
outline-offset: 2px;
}
@media (max-width: 1199px){
.fccc-toc{ display: none !important; }
}
/* Offset d’ancrage universel (corrigé et limité au contenu principal) */
.fccc-container [id]{
scroll-margin-top: calc(
var(--fccc-header-bottom, 0px)
+ var(--fccc-toc-h, 0px)
+ 12px
);
}
/* =========================================================
15) MINI-MENU – Contexte Elementor (sécurité locale)
---------------------------------------------------------
- Assainit uniquement l’environnement du mini-menu
- Pas de styles globaux risqués
- Utile si tu souhaites repasser en sticky plus tard
========================================================= */
/* Option A (recommandée) — classe sur le WIDGET HTML qui contient le nav
Dans Elementor > Avancé > Classes CSS du widget : fccc-toc-ctx */
.elementor .elementor-widget.fccc-toc-ctx,
.elementor .elementor-widget.fccc-toc-ctx .elementor-widget-container{
overflow: visible !important;
transform: none !important;
perspective: none !important;
filter: none !important;
}
/* Option B — wrapper autour du nav si tu ne peux pas éditer le widget
*/
.fccc-toc-wrap,
.fccc-toc-wrap > .elementor-widget-container,
.fccc-toc-wrap > .elementor-container,
.fccc-toc-wrap > .e-con,
.fccc-toc-wrap > .elementor-widget-wrap{
overflow: visible !important;
transform: none !important;
perspective: none !important;
filter: none !important;
}
/* =========================================================
16) MINI-MENU – FIXED par défaut + offsets stables
---------------------------------------------------------
- Comportement par défaut : .fccc-toc en mode FIXED
- Alignement exact sous le header grâce à --fccc-header-bottom
- Z-index hiérarchisé : header au-dessus, mini-menu ensuite
- Impression : mini-menu masqué pour éviter la répétition
========================================================= */
/* Positionnement FIXED (desktop) */
@media (min-width: 1200px){
.fccc-toc{
position: fixed; /* FIXED par défaut */
top: var(--fccc-header-bottom, 0px); /* bas réel du header (JS) */
left: 0; right: 0;
width: 100%;
z-index: 980; /* sous le header */
}
}
/* S’assure que le header passe bien au-dessus en toutes circonstances */
.header, .hfe-header, .elementor-location-header{ z-index: 1000; }
/* Impression : ne pas imprimer le mini-menu */
@media print{
.fccc-toc{ display: none !important; }
}
/* =========================================================
17) MINI-MENU MOBILE – Dropdown flottant (thémable, isolé)
---------------------------------------------------------
- Utilise UNIQUEMENT des variables nav-*
- Visible < 1200px
========================================================= */
.fccc-mobile-dd{
position: fixed;
left: 50%;
bottom: 16px;
transform: translateX(-50%);
z-index: 1000;
display: none;
}
.fccc-dd-toggle{
background: var(--nav-mobile-button-bg, var(--nav-brand-2));
color: var(--nav-mobile-button-text, var(--on-nav-brand-2, #fff));
font-weight: 700;
border: 1px solid var(--nav-mobile-button-border, transparent);
border-radius: 999px;
padding: .8em 1.5em;
box-shadow: 0 6px 18px rgba(0,0,0,.18);
cursor: pointer;
font-size: 1.05em;
}
.fccc-dd-panel{
position: fixed;
left: 50%;
bottom: 64px;
transform: translateX(-50%);
width: min(92vw, 1210px);
max-width: calc(100vw - 24px);
background: var(--nav-mobile-panel-bg, #fff);
color: var(--nav-mobile-panel-text, var(--fccc-text, #1f2937));
border: 1px solid var(--nav-mobile-panel-border, var(--fccc-border, #e5e7eb));
border-radius: 12px 12px 0 0;
box-shadow: 0 -6px 18px rgba(0,0,0,.25);
padding: 16px 18px;
display: none;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
max-height: calc(100dvh - 120px);
}
.fccc-dd-panel ul{
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
}
.fccc-dd-panel li{
text-align: center;
padding: 12px 0;
font-size: 1.05em;
border-bottom: 1px solid var(--nav-mobile-separator, var(--fccc-border, #eee));
}
.fccc-dd-panel li:last-child{ border-bottom: none; }
.fccc-dd-panel a{
color: var(--nav-mobile-link, var(--nav-brand-2));
text-decoration: none;
font-weight: 700;
}
.fccc-dd-panel a:hover{
text-decoration: underline;
color: var(--nav-mobile-link-hover, var(--nav-brand-1));
}
.fccc-dd-panel.open{ display: block; }
@media (max-width: 1199px){
.fccc-mobile-dd{ display: block; }
}
/* Sécurité anti-overflow (mobile) : conservé */
@media (max-width: 1199px){
.elementor .elementor-widget,
.elementor .elementor-widget-container{ max-width: 100%; box-sizing: border-box; }
.elementor img, .elementor iframe, .elementor video{ max-width: 100%; height: auto; }
.elementor .elementor-widget-text-editor table{
display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
}
/* =========================================================
18) THÈME NAV – Variables & inversion (MISE À JOUR)
---------------------------------------------------------
Ajouts :
- Variables dédiées au bouton de sous-menu (subtoggle)
--nav-subtoggle-bg / -hover-bg / -active-bg / -border / -icon
- Sans impact sur le reste du site (nav-* isolées)
========================================================= */
:root{
/* Marques nav (isole du reste du site) */
--nav-brand-1: var(--fccc-primary, #e30613); /* actif par défaut */
--nav-brand-2: var(--fccc-blue, #006fb5); /* liens par défaut */
--on-nav-brand-1: #ffffff;
--on-nav-brand-2: #ffffff;
/* Mini-menu desktop */
--nav-bg: #fff;
--nav-border: var(--fccc-border, #e5e7eb);
--nav-pill-bg: transparent;
--nav-pill-text: var(--nav-brand-2);
--nav-pill-border: var(--nav-brand-2);
--nav-pill-hover-bg: var(--nav-brand-2);
--nav-pill-hover-text: var(--on-nav-brand-2);
--nav-pill-hover-border: var(--nav-brand-2);
--nav-pill-active-bg: var(--nav-brand-1);
--nav-pill-active-text: var(--on-nav-brand-1);
--nav-pill-active-border: var(--nav-brand-1);
--nav-focus-ring: rgba(0,0,0,.15);
/* Mini-menu mobile */
--nav-mobile-button-bg: var(--nav-brand-2);
--nav-mobile-button-text: var(--on-nav-brand-2);
--nav-mobile-button-border: transparent;
--nav-mobile-panel-bg: #fff;
--nav-mobile-panel-text: var(--fccc-text, #1f2937);
--nav-mobile-panel-border: var(--fccc-border, #e5e7eb);
--nav-mobile-separator: var(--fccc-border, #e5e7eb);
--nav-mobile-link: var(--nav-brand-2);
--nav-mobile-link-hover: var(--nav-brand-1);
/* Menu principal mobile (hamburger) */
--nav-primary-panel-bg: #ffffff;
--nav-primary-panel-text: var(--fccc-text, #1f2937);
--nav-primary-panel-border: var(--fccc-border, #e5e7eb);
--nav-primary-panel-shadow: 0 10px 30px rgba(0,0,0,.18);
--nav-primary-link: var(--fccc-text, #1f2937);
--nav-primary-link-hover: var(--nav-brand-2);
--nav-primary-link-active: var(--nav-brand-1);
--nav-primary-separator: var(--fccc-border, #e5e7eb);
--nav-primary-toggle-bg: var(--nav-brand-2);
--nav-primary-toggle-text: var(--on-nav-brand-2);
--nav-primary-toggle-border: transparent;
/* >>> Nouveau : bouton de sous-menu (chevron à droite) <<< */
--nav-subtoggle-bg: transparent;
--nav-subtoggle-hover-bg: rgba(0,0,0,.04);
--nav-subtoggle-active-bg: rgba(0,0,0,.07);
--nav-subtoggle-border: var(--nav-primary-separator);
--nav-subtoggle-icon: var(--nav-primary-link); /* couleur du chevron */
}
html[data-brand="swap"]{
/* Inversion nav */
--nav-brand-1: var(--fccc-blue, #006fb5);
--nav-brand-2: var(--fccc-primary, #d11044);
--on-nav-brand-1: #ffffff;
--on-nav-brand-2: #ffffff;
/* Mini-menu desktop */
--nav-pill-text: var(--nav-brand-2);
--nav-pill-border: var(--nav-brand-2);
--nav-pill-hover-bg: var(--nav-brand-2);
--nav-pill-hover-text: var(--on-nav-brand-2);
--nav-pill-hover-border: var(--nav-brand-2);
--nav-pill-active-bg: var(--nav-brand-1);
--nav-pill-active-text: var(--on-nav-brand-1);
--nav-pill-active-border: var(--nav-brand-1);
/* Mini-menu mobile */
--nav-mobile-button-bg: var(--nav-brand-2);
--nav-mobile-button-text: var(--on-nav-brand-2);
--nav-mobile-link: var(--nav-brand-2);
--nav-mobile-link-hover: var(--nav-brand-1);
/* Menu principal mobile */
--nav-primary-toggle-bg: var(--nav-brand-2);
--nav-primary-toggle-text: var(--on-nav-brand-2);
--nav-primary-link-hover: var(--nav-brand-2);
--nav-primary-link-active: var(--nav-brand-1);
/* Subtoggle (chevron) — conserve le contraste après inversion */
--nav-subtoggle-bg: transparent;
--nav-subtoggle-hover-bg: rgba(0,0,0,.05);
--nav-subtoggle-active-bg: rgba(0,0,0,.08);
--nav-subtoggle-border: var(--nav-primary-separator);
--nav-subtoggle-icon: var(--nav-primary-link);
}
/* =========================================================
19) MENU PRINCIPAL MOBILE (Hamburger) – Thème nav isolé
---------------------------------------------------------
- Couvre Elementor & HFE
- Couleurs pilotées par variables nav-*
- Uniquement <1200px
========================================================= */
@media (max-width: 1199px){
/* Elementor : bouton hamburger */
.elementor .elementor-menu-toggle,
.elementor .elementor-menu-toggle.elementor-active{
background: var(--nav-primary-toggle-bg);
color: var(--nav-primary-toggle-text);
border: 1px solid var(--nav-primary-toggle-border);
border-radius: 10px;
padding: .5rem .75rem;
}
/* Elementor : panneau */
.elementor .elementor-nav-menu--dropdown,
.elementor .elementor-nav-menu--dropdown .elementor-nav-menu{
background: var(--nav-primary-panel-bg) !important;
color: var(--nav-primary-panel-text) !important;
border: 1px solid var(--nav-primary-panel-border);
box-shadow: var(--nav-primary-panel-shadow);
}
/* Elementor : liens */
.elementor .elementor-nav-menu--dropdown a,
.elementor .elementor-nav-menu--dropdown .elementor-item,
.elementor .elementor-nav-menu--dropdown .elementor-sub-item{
color: var(--nav-primary-link) !important;
text-decoration: none;
font-weight: 600;
}
.elementor .elementor-nav-menu--dropdown a:hover,
.elementor .elementor-nav-menu--dropdown .elementor-item:hover,
.elementor .elementor-nav-menu--dropdown .elementor-sub-item:hover{
color: var(--nav-primary-link-hover) !important;
}
.elementor .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.elementor .elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active{
color: var(--nav-primary-link-active) !important;
}
.elementor .elementor-nav-menu--dropdown a:focus-visible{
outline: 3px solid rgba(0,0,0,.15);
outline-offset: 2px;
}
/* Séparateurs & sous-menus */
.elementor .elementor-nav-menu--dropdown li{
border-bottom: 1px solid var(--nav-primary-separator);
}
.elementor .elementor-nav-menu--dropdown li:last-child{ border-bottom: 0; }
.elementor .elementor-nav-menu--dropdown .sub-menu{
background: var(--nav-primary-panel-bg);
}
/* HFE : bouton */
.hfe-nav-menu__toggle,
.hfe-flyout-trigger,
.hfe-menu-toggle{
background: var(--nav-primary-toggle-bg);
color: var(--nav-primary-toggle-text);
border: 1px solid var(--nav-primary-toggle-border);
border-radius: 10px;
padding: .5rem .75rem;
}
/* HFE : panneau */
.hfe-flyout-menu,
.hfe-nav-menu__layout-vertical .hfe-nav-menu{
background: var(--nav-primary-panel-bg) !important;
color: var(--nav-primary-panel-text) !important;
border: 1px solid var(--nav-primary-panel-border);
box-shadow: var(--nav-primary-panel-shadow);
}
/* HFE : liens */
.hfe-flyout-menu .menu-item > a,
.hfe-nav-menu .menu-item > a{
color: var(--nav-primary-link) !important;
text-decoration: none;
font-weight: 600;
}
.hfe-flyout-menu .menu-item > a:hover,
.hfe-nav-menu .menu-item > a:hover{
color: var(--nav-primary-link-hover) !important;
}
.hfe-flyout-menu .menu-item.current-menu-item > a,
.hfe-nav-menu .menu-item.current-menu-item > a{
color: var(--nav-primary-link-active) !important;
}
/* HFE : séparateurs & sous-menus */
.hfe-flyout-menu .menu-item,
.hfe-nav-menu .menu-item{
border-bottom: 1px solid var(--nav-primary-separator);
}
.hfe-flyout-menu .menu-item:last-child,
.hfe-nav-menu .menu-item:last-child{ border-bottom: 0; }
.hfe-flyout-menu .sub-menu,
.hfe-nav-menu .sub-menu{
background: var(--nav-primary-panel-bg);
}
}
/* =========================================================
20) OFFSET CONTENU – Spacer après le mini-menu (mode fixed)
-----------------------------------------------------------
Objectif :
- Insérer un espace dans le flux après la barre .fccc-toc (fixe)
- Évite d’avoir à mettre une marge manuelle sur le 1er conteneur
- Hauteur pilotée par JS via --fccc-toc-h
- Desktop uniquement (≥1200px)
========================================================= */
@media (min-width: 1200px){
/* Élément injecté par le JS juste après .fccc-toc */
.fccc-toc-spacer{
height: calc(var(--fccc-toc-h, 0px) + 12px); /* +12px d’air sous la barre */
}
}
@media (max-width: 1199px){
.fccc-toc-spacer{ display: none !important; }
}
/* =========================================================
21) OFFSET D’ANCRE GLOBAL (fallback natif)
---------------------------------------------------------
- Assure que TOUT saut d’ancre (lien, #hash, etc.) laisse
le titre visible sous le header + mini-menu fixed.
- Utilise les variables déjà mesurées :
--fccc-header-bottom (via JS bloc 2)
--fccc-toc-h (via JS bloc 5)
- +12px d’air pour le confort visuel.
========================================================= */
:root{
--fccc-anchor-extra: 12px;
}
[id],
.elementor-menu-anchor{
scroll-margin-top: calc(
var(--fccc-header-bottom, 0px)
+ var(--fccc-toc-h, 0px)
+ var(--fccc-anchor-extra, 0px)
);
}
/* =========================================================
22) LIENS TÉLÉPHONE – harmonisation (Organisation)
---------------------------------------------------------
- Les liens tel: héritent la couleur du texte
- Légère mise en évidence au survol
========================================================= */
.organisation-grid .tel-link{
color: inherit;
text-decoration: none;
font-weight: 600;
}
.organisation-grid .tel-link:hover{
text-decoration: underline;
}
/* =========================================================
23) MENU PRINCIPAL MOBILE – Titre = lien, ligne = sous-menu
(MAJ : TOUS les sous-menus FERMÉS par défaut, sans exception)
-----------------------------------------------------------
- Aucune icône/bouton ajouté : esthétique d’origine
- Sous-menu visible UNIQUEMENT si le a .is-open
- Compatible Elementor & HFE et inversion de couleurs (nav-*)
========================================================= */
@media (max-width: 1199px){
/* Lien parent inchangé (pas d’icône ajoutée) */
.elementor .elementor-nav-menu--dropdown .menu-item-has-children > a,
.hfe-flyout-menu .menu-item-has-children > a,
.hfe-nav-menu__layout-vertical .menu-item-has-children > a{
position: relative;
}
/* 1) FERMER par défaut tous les sous-menus (niveau 2+) */
.elementor .elementor-nav-menu--dropdown .sub-menu,
.hfe-flyout-menu .sub-menu,
.hfe-nav-menu__layout-vertical .sub-menu{
display: none !important;
}
/* 2) OUVRIR seulement lorsque .is-open est présent sur le parent */
.elementor .elementor-nav-menu--dropdown .menu-item.is-open > .sub-menu,
.hfe-flyout-menu .menu-item.is-open > .sub-menu,
.hfe-nav-menu__layout-vertical .menu-item.is-open > .sub-menu{
display: block !important;
}
/* Focus visible (accessibilité) */
.elementor .elementor-nav-menu--dropdown a:focus-visible,
.hfe-flyout-menu a:focus-visible,
.hfe-nav-menu__layout-vertical a:focus-visible{
outline: 3px solid var(--nav-focus-ring, rgba(0,0,0,.15));
outline-offset: 2px;
}
}
/* =========================================================
25) HARMONISATION DES TITRES – HTML ≡ Elementor
---------------------------------------------------------
Objectif :
- Garantir que les – dans les blocs HTML ont la même
esthétique que les widgets "Titre" d’Elementor.
Portée :
- Uniquement le contenu HTML placé dans .fccc-section / .fccc-container
- N’affecte pas les widgets Elementor.
Dépendances :
- Utilise les variables Elementor (--e-global-...) si présentes,
sinon retombe sur les variables FCCC et des fallbacks sûrs.
========================================================= */
/* 25.1 — Reset fin pour supprimer les marges UA incohérentes */
.fccc-section h1, .fccc-section h2, .fccc-section h3,
.fccc-section h4, .fccc-section h5, .fccc-section h6,
.fccc-container h1, .fccc-container h2, .fccc-container h3,
.fccc-container h4, .fccc-container h5, .fccc-container h6{
margin: 0;
}
/* 25.2 — Titres “principaux” mappés sur la typo PRIMARY d’Elementor */
.fccc-section h1, .fccc-container h1,
.fccc-section h2, .fccc-container h2,
.fccc-section h3, .fccc-container h3{
font-family: var(--e-global-typography-primary-font-family, "Oswald", sans-serif);
font-weight: var(--e-global-typography-primary-font-weight, 600);
letter-spacing: var(--e-global-typography-primary-letter-spacing, 0.02em);
line-height: var(--e-global-typography-primary-line-height, 1.2);
}
/* 25.3 — Hiérarchie & couleurs (alignée aux usages Elementor) */
.fccc-section h1, .fccc-container h1{
/* Couleur (souvent “primary” sur h1 en thème club) */
color: var(--e-global-color-primary, var(--fccc-primary, #e30613));
text-transform: var(--e-global-typography-h1-text-transform, uppercase);
font-size: var(--e-global-typography-h1-font-size, clamp(2rem, 3.5vw, 2.5rem));
margin: 0 0 var(--fccc-space-3, 1rem);
}
.fccc-section h2, .fccc-container h2{
/* h2 souvent en PRIMARY + uppercase côté Elementor */
color: var(--e-global-color-primary, var(--fccc-primary, #e30613));
text-transform: var(--e-global-typography-h2-text-transform, uppercase);
font-size: var(--e-global-typography-h2-font-size, clamp(1.6rem, 2.8vw, 2rem));
margin: var(--fccc-space-3, 1rem) 0 var(--fccc-space-3, 1rem);
}
.fccc-section h3, .fccc-container h3{
/* h3 généralement non-uppercase et en couleur texte */
color: var(--e-global-color-text, var(--fccc-text, #1f2937));
text-transform: var(--e-global-typography-h3-text-transform, none);
font-weight: var(--e-global-typography-h3-font-weight, 600);
font-size: var(--e-global-typography-h3-font-size, clamp(1.25rem, 2.2vw, 1.5rem));
margin: var(--fccc-space-3, 1rem) 0 var(--fccc-space-2, .75rem);
}
/* 25.4 — Titres secondaires (h4–h6) : cohérence douce */
.fccc-section h4, .fccc-container h4{
font-family: var(--e-global-typography-primary-font-family, "Oswald", sans-serif);
font-weight: 600;
color: var(--e-global-color-text, var(--fccc-text, #1f2937));
text-transform: var(--e-global-typography-h4-text-transform, none);
font-size: var(--e-global-typography-h4-font-size, 1.125rem);
line-height: 1.25;
margin: var(--fccc-space-3, 1rem) 0 var(--fccc-space-2, .75rem);
}
.fccc-section h5, .fccc-container h5{
font-family: var(--e-global-typography-primary-font-family, "Oswald", sans-serif);
font-weight: 600;
color: var(--e-global-color-text, var(--fccc-text, #1f2937));
text-transform: var(--e-global-typography-h5-text-transform, none);
font-size: var(--e-global-typography-h5-font-size, 1rem);
line-height: 1.3;
margin: var(--fccc-space-2, .75rem) 0 var(--fccc-space-2, .75rem);
}
.fccc-section h6, .fccc-container h6{
font-family: var(--e-global-typography-primary-font-family, "Oswald", sans-serif);
font-weight: 600;
color: var(--e-global-color-text, var(--fccc-text, #1f2937));
text-transform: var(--e-global-typography-h6-text-transform, none);
font-size: var(--e-global-typography-h6-font-size, .9375rem);
line-height: 1.35;
margin: var(--fccc-space-2, .75rem) 0 var(--fccc-space-2, .75rem);
}
/* 25.5 — Rythme contextuel : quand un h2 suit du texte/séparateur */
.fccc-section .fccc-rule + h2,
.fccc-section p + h2,
.fccc-container .fccc-rule + h2,
.fccc-container p + h2{
margin-top: var(--fccc-space-2, .75rem);
}
/* 25.6 — Petites largeurs : confort de lecture (espacements) */
@media (max-width: 720px){
.fccc-section h1, .fccc-container h1{ margin-bottom: var(--fccc-space-3, 1rem); }
.fccc-section h2, .fccc-container h2{ margin-bottom: var(--fccc-space-3, 1rem); }
.fccc-section h3, .fccc-container h3{ margin-bottom: var(--fccc-space-2, .75rem); }
}
/* =========================================================
26) Social – Grille 2 colonnes + embed Facebook responsive
---------------------------------------------------------
Objectifs :
- Disposer Facebook (gauche) + bloc éditorial (droite)
- Responsive : 2 colonnes sur desktop, 1 colonne sur mobile
- Esthétique unifiée (panel, espacements), compatible inversion
Dépendances :
- Utilise les variables FCCC (--fccc-*, --brand-*) déjà présentes
========================================================= */
/* 26.1 – Grille 2 colonnes générique (réutilisable) */
.fccc-grid-2{
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--fccc-space-5, 2rem);
align-items: start;
}
@media (max-width: 980px){
.fccc-grid-2{ grid-template-columns: 1fr; }
}
/* 26.2 – Contexte spécifique “Social” */
.fccc-social-grid .fccc-embed{
width: 100%;
min-height: 680px; /* hauteur confortable desktop */
border-radius: var(--fccc-radius, 16px);
box-shadow: var(--fccc-shadow, 0 6px 20px rgba(0,0,0,.06));
overflow: hidden; /* arrondi propre pour l’iframe */
background: #fff;
}
.fccc-social-grid .fccc-embed iframe{
display: block;
width: 100%;
height: 100%;
}
/* 26.3 – Panneau éditorial à droite */
.fccc-panel{
background: #fff;
border: 1px solid var(--fccc-border, #e5e7eb);
border-radius: var(--fccc-radius, 16px);
box-shadow: var(--fccc-shadow, 0 6px 20px rgba(0,0,0,.06));
padding: var(--fccc-space-5, 2rem);
}
/* 26.4 – Ajustements mobiles pour le confort */
@media (max-width: 768px){
.fccc-social-grid .fccc-embed{ min-height: 520px; }
.fccc-panel{ padding: var(--fccc-space-4, 1.5rem); }
}
/* =========================================================
27) Social – Switch Facebook / Instagram (2 colonnes)
---------------------------------------------------------
- Styles de la barre de switch + switch inline
- Libellés "Facebook/Instagram" = texte (pas de pilule)
- Compatible inversion des couleurs
- Requiert le JS bloc 7 (switch)
========================================================= */
/* 27.1 – Barre de switch (version "pills" classique, ex. colonne gauche) */
.fccc-social-toggle{
display:flex; gap: var(--fccc-space-2, .75rem);
align-items:center; flex-wrap:wrap;
margin-bottom: var(--fccc-space-3, 1rem);
}
/* IMPORTANT : on ne stylise en "pilule" QUE les boutons qui ne sont
ni des libellés inline (.switch-label), ni le cœur du switch (.switch-core). */
.fccc-social-toggle .toggle-btn:not(.switch-label):not(.switch-core){
appearance:none; border:1px solid var(--fccc-border, #e5e7eb);
background:#fff; color:var(--fccc-text,#1f2937);
font-weight:700; padding:.6rem 1rem; border-radius:999px;
cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.fccc-social-toggle .toggle-btn:not(.switch-label):not(.switch-core):hover{
transform: translateY(-1px);
}
.fccc-social-toggle .toggle-btn:not(.switch-label):not(.switch-core).is-active{
background: var(--brand-2); color:#fff; border-color: var(--brand-2);
}
/* 27.2 – Switch inline “Facebook | [toggle] | Instagram” (libellés textuels) */
.fccc-switch-inline{ gap: var(--fccc-space-3, 1rem); }
/* Libellés texte (cliquables mais visuellement du texte) – OVERRIDES forts */
.fccc-switch-inline .switch-label{
background: transparent !important;
border: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
color: var(--fccc-text,#1f2937);
font-weight:700;
cursor:pointer;
line-height:1;
transition: color .15s ease, opacity .15s ease;
}
.fccc-switch-inline .switch-label:hover{ opacity:.8; }
.fccc-switch-inline .switch-label.is-active{ color: var(--brand-2); }
/* Le cœur du switch */
.fccc-switch-inline .switch-core{
border:0; background:transparent; padding:0; line-height:0; cursor:pointer;
}
.fccc-switch-inline .switch-track{
display:inline-block; width:64px; height:34px; border-radius:999px;
background: #e9eef5; border:1px solid var(--fccc-border,#e5e7eb);
position:relative; transition: background .2s ease, border-color .2s ease;
}
.fccc-switch-inline .switch-thumb{
position:absolute; top:50%; left:4px; transform:translateY(-50%);
width:26px; height:26px; border-radius:50%;
background:#fff; border:1px solid var(--fccc-border,#e5e7eb);
box-shadow: 0 2px 8px rgba(0,0,0,.12);
transition: left .2s ease, background .2s ease, border-color .2s ease;
}
/* État “Instagram” actif (curseur à droite, piste teintée) */
.fccc-switch-inline .switch-core.is-ig .switch-track{
background: var(--brand-2);
border-color: var(--brand-2);
}
.fccc-switch-inline .switch-core.is-ig .switch-thumb{
left: calc(100% - 4px - 26px);
border-color: transparent;
}
/* Accessibilité focus */
.fccc-social-toggle .toggle-btn:focus-visible{
outline:3px solid rgba(0,0,0,.15); outline-offset:2px;
}
/* 27.3 – Ajustements mobiles */
@media (max-width: 768px){
.fccc-social-toggle{ justify-content:center; }
}
/* =========================================================
28) Social – Encadrement de la colonne GAUCHE (panel)
---------------------------------------------------------
Objectif :
- Donner à la colonne gauche (toggle + embed) le même
encadrement que la colonne droite .fccc-panel
- Sans modifier le HTML : on stylise .fccc-social-switch
- On évite une double ombre en adoucissant .fccc-embed-wrap
Compatibilité :
- Inversion des couleurs OK (couleurs neutres/variables globales)
- Responsive inchangé
Dépendances :
- Utilise : --fccc-border, --fccc-radius, --fccc-shadow, --fccc-space-*
========================================================= */
/* 28.1 — Le conteneur gauche devient un panel */
.fccc-social-switch{
background: #fff;
border: 1px solid var(--fccc-border, #e5e7eb);
border-radius: var(--fccc-radius, 16px);
box-shadow: var(--fccc-shadow, 0 6px 20px rgba(0,0,0,.06));
padding: var(--fccc-space-5, 2rem);
}
/* Espace sous la barre de switch */
.fccc-social-switch .fccc-social-toggle{
margin-bottom: var(--fccc-space-4, 1.5rem);
}
/* 28.2 — Évite le “double cadre/ombre” sur l’embed interne
(on garde l’arrondi + la bordure, on retire la grosse ombre) */
.fccc-social-switch .fccc-embed-wrap{
box-shadow: none;
border: 1px solid var(--fccc-border, #e5e7eb);
border-radius: var(--fccc-radius, 16px);
background: #fff;
overflow: hidden;
}
/* 28.3 — Confort mobile : respirations harmonisées */
@media (max-width: 768px){
.fccc-social-switch{
padding: var(--fccc-space-4, 1.5rem);
}
}
/* =========================================================
29) Harmonisation des paires de boutons (panel éditorial)
---------------------------------------------------------
Objectif :
- Chaque paire de boutons (.fccc-buttons) a des boutons de
même largeur sur une même ligne
- Texte parfaitement centré horizontalement
- Responsive : pleine largeur en mobile
========================================================= */
.fccc-panel .fccc-buttons{
display: flex;
justify-content: center; /* aligne la paire au centre */
align-items: stretch;
gap: var(--fccc-space-3, 1rem);
flex-wrap: wrap;
}
.fccc-panel .fccc-buttons .fccc-btn{
flex: 1 1 200px; /* largeur flexible égale */
text-align: center; /* texte centré horizontalement */
justify-content: center; /* centré pour inline-flex interne */
white-space: nowrap; /* évite les retours intempestifs */
}
/* Spécifique : maintient des proportions harmonieuses en mobile */
@media (max-width: 640px){
.fccc-panel .fccc-buttons .fccc-btn{
flex: 1 1 100%;
}
}
/* =========================================================
30) PAGES ELEMENTOR – Alignement horizontal des conteneurs
=========================================================
Objectif :
- Reproduire EXACTEMENT le “cadre” des pages HTML :
max-width = var(--content-max) et padding latéral = var(--fccc-space-3).
- Neutraliser les gouttières par défaut d’Elementor en les
faisant coïncider avec le padding du site (≠ 0).
- Éviter tout cap de largeur imbriqué dans les conteneurs internes.
Portée :
- .elementor .fccc-container (conteneur global de page/section)
- .elementor .fccc-container .e-con (conteneurs internes)
Notes :
- Ne modifie pas les offsets du mini-menu.
- Laisse le thème piloter var(--content-max) et var(--fccc-space-3).
========================================================= */
/* 30.1) Conteneur principal Elementor : même cadre que les pages HTML */
.elementor .fccc-container{
max-width: var(--content-max);
margin-inline: auto;
padding-left: var(--fccc-space-3);
padding-right: var(--fccc-space-3);
box-sizing: border-box;
}
/* 30.2) Variables Elementor : caler les "gouttières" sur le padding du site */
.elementor .e-con.fccc-container{
--padding-inline-start: var(--fccc-space-3);
--padding-inline-end: var(--fccc-space-3);
--padding-left: var(--fccc-space-3);
--padding-right: var(--fccc-space-3);
padding-inline: var(--fccc-space-3) !important;
}
/* 30.3) Conteneurs internes : pas de re-cap ni de padding additionnel */
.elementor .fccc-container .e-con{
max-width: none;
padding-inline: 0;
}
/* 30.4) Option – supprimer les gouttières sur mobile si on ajoute .fccc-no-gutters */
@media (max-width: 767px){
.elementor .fccc-container.fccc-no-gutters{
padding-inline: 0 !important;
}
.elementor .fccc-container.fccc-no-gutters.e-con{
--padding-inline-start: 0; --padding-inline-end: 0;
--padding-left: 0; --padding-right: 0;
}
}
/* =========================================================
31) PAGE LIENS UTILES – Cartes “Boutiques”
=========================================================
Objectif :
- Uniformiser l’apparence des 3 cartes (joueurs / juniors / fans)
- Gérer une éventuelle image d’en-tête (logo/visuel) de façon propre
- Assurer un rendu responsive et cohérent avec le design FCCC
Portée :
- .link-card dans la page Liens utiles (ou sections similaires)
- .fccc-shop-img (image optionnelle au-dessus du h4)
========================================================= */
/* 31.1) Carte – base visuelle et espace interne */
.link-card{
background: var(--fccc-surface, #fff);
border: 1px solid var(--fccc-border, #e5e7eb);
border-radius: 12px;
box-shadow: var(--fccc-shadow-sm, 0 1px 3px rgba(0,0,0,.08));
padding: var(--fccc-space-3, 24px);
display: flex;
flex-direction: column;
gap: var(--fccc-space-2, 12px);
text-align: left;
}
/* 31.2) Titres & texte – hiérarchie douce */
.link-card h4{
margin: 0 0 4px 0;
color: var(--fccc-primary-700, #1e3a8a);
line-height: 1.25;
}
.link-card p{
margin: 0;
color: var(--fccc-text, #111827);
}
/* 31.3) Bouton – ancré en pied de carte si le texte s’allonge */
.link-card .fccc-btn{
align-self: flex-start;
margin-top: auto; /* pousse le bouton en bas de la carte si contenu long */
}
/* 31.4) Image optionnelle (au-dessus du h4) */
.fccc-shop-img{
display: block;
width: 100%;
height: auto;
max-height: 180px; /* évite les visuels trop hauts */
object-fit: contain; /* conserve les proportions du logo/visuel */
margin: -4px 0 var(--fccc-space-2, 12px) 0;
}
/* 31.5) Effet hover léger (accessibilité préservée) */
.link-card:hover{
box-shadow: var(--fccc-shadow, 0 6px 24px rgba(0,0,0,.08));
border-color: color-mix(in srgb, var(--fccc-border, #e5e7eb) 60%, transparent);
transition: box-shadow .2s ease, border-color .2s ease;
}
/* 31.6) Responsive – respiration accrue sur petits écrans si empilés */
@media (max-width: 640px){
.link-card{
padding: var(--fccc-space-3, 24px);
border-radius: 12px;
}
}
/* =========================================================
32) PAGE "ILS ONT MARQUÉ NOTRE HISTOIRE" – Clubs fondateurs
=========================================================
Objectif :
- Présenter les deux clubs fondateurs côte à côte (Courrendlin / Courroux).
- Uniformiser la présentation des membres et présidents d’honneur.
- Responsive : 1 colonne sur mobile, 2 sur desktop.
========================================================= */
.fccc-histoire .clubs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--fccc-space-5, 40px);
margin-top: var(--fccc-space-4, 32px);
}
.fccc-histoire .club-column {
background: var(--fccc-surface, #fff);
border: 1px solid var(--fccc-border, #e5e7eb);
border-radius: 12px;
padding: var(--fccc-space-4, 32px);
box-shadow: var(--fccc-shadow-sm, 0 1px 3px rgba(0,0,0,.08));
}
.fccc-histoire .club-column h3 {
color: var(--fccc-primary-700, #1e3a8a);
text-align: center;
margin-top: 0;
}
.fccc-histoire .honneur-block {
margin-top: var(--fccc-space-3, 24px);
}
.fccc-histoire .honneur-block h4 {
font-size: 1.1rem;
color: var(--fccc-primary-600, #1e40af);
margin-bottom: var(--fccc-space-2, 12px);
border-bottom: 2px solid var(--fccc-primary-100, #dbeafe);
display: inline-block;
}
.fccc-histoire .honneur-list {
list-style: none;
padding: 0;
margin: 0;
}
.fccc-histoire .honneur-list li {
margin-bottom: 6px;
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px dotted var(--fccc-border, #e5e7eb);
padding-bottom: 4px;
}
.fccc-histoire .honneur-list .since,
.fccc-histoire .honneur-list .years {
font-size: 0.9rem;
color: var(--fccc-muted, #6b7280);
margin-left: 8px;
}
/* ---------- Sous-bloc : couleurs symboliques des clubs fondateurs ---------- */
/* FC Courrendlin : teinte bleue permanente (non inversée) */
.fccc-histoire .club-column.courrendlin {
border-top: 6px solid #006fb5; /* bleu club */
}
.fccc-histoire .club-column.courrendlin h3 {
color: #006fb5;
}
/* FC Courroux : teinte rouge permanente (non inversée) */
.fccc-histoire .club-column.courroux {
border-top: 6px solid #e30613; /* rouge club */
}
.fccc-histoire .club-column.courroux h3 {
color: #e30613;
}
/* On neutralise ces teintes lors de l’inversion des couleurs */
body.has-inverted-colors .fccc-histoire .club-column.courrendlin,
body.has-inverted-colors .fccc-histoire .club-column.courroux {
border-top-color: inherit;
}
body.has-inverted-colors .fccc-histoire .club-column.courrendlin h3,
body.has-inverted-colors .fccc-histoire .club-column.courroux h3 {
color: var(--fccc-text);
}
/* Base commune */
.fccc-histoire .club-column h3{
font-size:1.25rem;
margin:0 0 12px;
padding-bottom:6px;
border-bottom:2px solid var(--fccc-border, #e5e7eb);
}
/* Option B — Soulignement coloré, COULEURS FIXES (même en inversion) */
.fccc-histoire .club-column h3{
font-size:1.25rem;
margin:0 0 12px;
padding-bottom:6px;
border-bottom:2px solid var(--fccc-border, #e5e7eb);
}
/* Couleurs fixes par club */
.fccc-histoire .club-column.courrendlin h3{ border-bottom-color:#006fb5; }
.fccc-histoire .club-column.courroux h3{ border-bottom-color:#e30613; }
/* (Important) Ne PAS ajouter de règle qui remplace ces couleurs sous .has-inverted-colors */
/* =========================================================
33) ORGANISATION-GRID — rangées stables quand une carte s'ouvre
=========================================================
Objectif :
- Supprimer les lignes en 1fr générées par Elementor.
- Forcer la grille à se recalculer naturellement selon la
hauteur des cartes.
========================================================= */
.organisation-grid.e-con {
--e-con-grid-template-rows: initial !important;
grid-template-rows: none !important;
grid-auto-rows: auto !important;
row-gap: var(--fccc-space-4, 32px);
column-gap: var(--fccc-space-4, 32px);
align-content: start;
align-items: start;
}
/* =========================================================
36) FCCC – Team cards (Pages cliquables)
---------------------------------------------------------
- Carte entière cliquable (lien sur le conteneur)
- Fallback image si aucune "Image mise en avant"
- Animation subtile au survol
- Responsive et harmonisé avec design FCCC
========================================================= */
/* Fallback global si image absente */
:root {
--fccc-default-team-image: url('/media/fallbacks/fccc-team-fallback.jpg');
}
/* 36.1 — Structure carte */
.fccc-team-card {
display: grid;
gap: var(--fccc-space-3, 12px);
background: var(--card-bg, #fff);
border-radius: var(--fccc-radius, 14px);
box-shadow: 0 4px 10px rgba(0,0,0,.05);
overflow: hidden;
text-decoration: none; /* retire soulignement */
transition: transform .25s ease, box-shadow .25s ease;
}
/* 36.2 — Effet au survol */
.fccc-team-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
/* 36.3 — Bloc image */
.fccc-team-card__image {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 0;
background: var(--fccc-default-team-image) center/cover no-repeat;
overflow: hidden;
}
/* Si Elementor a injecté une ![]()
*/
.fccc-team-card__image:has(img) {
background: none;
}
.fccc-team-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 36.4 — Titre */
.fccc-team-card h3 {
font-size: 1.1rem;
font-weight: 600;
margin: 0 var(--fccc-space-3,12px) var(--fccc-space-4,16px);
color: var(--fccc-text,#111);
text-align: center;
}
/* 36.5 — Responsive */
@media (max-width: 768px) {
.fccc-team-card__image { aspect-ratio: 16 / 10; }
.fccc-team-card h3 { font-size: 1rem; }
}
/* =========================================================
34) CARTES PERSONNES (JOUEURS & STAFF) – Style unifié "Panini"
- Portrait rectangulaire (ratio 3/4), cadre fin, ombre douce
- Même rendu pour joueurs et staff (seule la ligne méta change)
- Compatible futur switch de couleurs (pas de couleurs en dur)
========================================================= */
.fccc-person-card{
/* Base carte */
display:flex; flex-direction:column; align-items:center; text-align:center;
gap:8px; background:#fff; border-radius:12px;
box-shadow:0 2px 8px rgba(0,0,0,.12);
padding:14px; transition:transform .15s ease, box-shadow .15s ease;
}
.fccc-person-card:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.14); }
/* Photo portrait type "Panini" */
.fccc-person-photo{
width:100%; max-width:180px;
aspect-ratio:3/4; /* garantit le ratio portrait */
object-fit:cover; display:block;
border-radius:10px; /* bords adoucis, pas rond */
outline:1px solid rgba(0,0,0,.08); /* fin liseré façon cadre */
outline-offset:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
/* Nom & méta */
.fccc-person-name{ margin:4px 0 0 0; line-height:1.15; font-weight:700; }
.fccc-person-meta{ opacity:.85; font-size:.95rem; }
/* Coordonnées (option staff) : liste compacte et centrée */
.fccc-person-contacts .elementor-icon-list-items{
justify-content:center; gap:10px;
}
.fccc-person-contacts .elementor-icon-list-item{
margin:0; line-height:1.2;
}
.fccc-person-contacts .elementor-icon-list-text{
white-space:nowrap;
}
/* Grille : on s'appuie sur .organisation-grid (déjà en place) */
/* Si besoin d'espace un peu plus généreux entre cartes : */
/* .organisation-grid { gap: 18px; } */
/* Masquer l’affichage des étiquettes (tags) sur les pages et articles */
.post-tags,
.entry-tags,
.elementor-widget-post-info .elementor-icon-list-items,
.elementor-post-info__terms-list,
.tag-links {
display: none !important;
}
/* =========================================================
35) CARTES PERSONNES – Correctifs responsives (mobile/tablette)
---------------------------------------------------------
- Reste compatible avec le bloc 34 existant
- Évite l’effet “trop large” en réduisant la photo sur petits écrans
- Confort de lecture : padding un peu réduit en mobile
- Ne modifie ni la grille .organisation-grid, ni les autres cartes
========================================================= */
@media (max-width: 1024px){
/* Limite la largeur perçue de la photo en tablette */
.fccc-person-card .fccc-person-photo{
max-width: clamp(140px, 40vw, 180px);
}
}
@media (max-width: 768px){
/* Sur mobile : photo un peu plus compacte + carte respirante */
.fccc-person-card{
padding: 12px;
}
.fccc-person-card .fccc-person-photo{
max-width: clamp(120px, 55vw, 160px);
}
/* Texte centré et lisible en mobile */
.fccc-person-card .fccc-person-name,
.fccc-person-card .fccc-person-meta{
text-align: center;
}
/* Liste de coordonnées (si présente) : centrée et compacte */
.fccc-person-card .fccc-person-contacts .elementor-icon-list-items{
gap: 8px;
}
}
/* =========================================================
Bloc 36 – Carte Contact (section Sponsoring)
Réduit la largeur de la carte de contact et la centre
========================================================= */
.fccc-sponsoring .card {
max-width: 400px; /* largeur maximale souhaitée (modifiable) */
width: 100%; /* reste fluide sur petits écrans */
}
/* =========================================================
Bloc 37 – Bannière sponsors (carrousel) – Variante B
Option 2 : Hauteur identique forcée
- Même hauteur réelle pour tous les logos
- Largeur auto, centrage parfait
========================================================= */
.fccc-sponsors-banner .elementor-widget-image {
/* pas de hauteur fixe ici, on centre et on espace */
display: flex;
align-items: center;
justify-content: center;
padding: 8px 20px;
box-sizing: border-box;
line-height: 0;
}
.fccc-sponsors-banner img {
height: 80px; /* hauteur uniforme stricte */
width: auto; /* ratio respecté */
max-width: 220px; /* évite qu’un logo très étiré déborde */
object-fit: contain;
display: inline-block;
vertical-align: middle;
transition: transform 0.2s ease;
}
.fccc-sponsors-banner a:hover img { transform: scale(1.03); }
@media (max-width: 767px) {
.fccc-sponsors-banner img { height: 60px; max-width: 180px; }
}
/* =========================================================
Bloc 38 – Grille sponsors (page dédiée)
- Cartes simples, logo centré, hauteur uniforme
========================================================= */
.fccc-sponsors-grid .elementor-widget-image {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 14px;
background: #fff;
}
.fccc-sponsors-grid img {
max-height: 100px; /* plus grand que le bandeau */
width: auto;
height: auto;
object-fit: contain;
}
@media (max-width: 767px) {
.fccc-sponsors-grid img { max-height: 72px; }
}
/* =========================================================
Bloc 39 – Liste sponsors (catégorie Argent)
- Version FCCC : titres et liens bleus, survol rouge
- Grille fluide et centrée
========================================================= */
.fccc-sponsors-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px 24px;
text-align: center;
justify-items: center;
align-items: center;
padding: 12px 0;
}
/* Titres (widget "Titre du post") */
.fccc-sponsors-list .elementor-heading-title,
.fccc-sponsors-list .elementor-widget-heading h1,
.fccc-sponsors-list .elementor-widget-heading h2,
.fccc-sponsors-list .elementor-widget-heading h3,
.fccc-sponsors-list .elementor-widget-heading h4,
.fccc-sponsors-list .elementor-widget-heading h5,
.fccc-sponsors-list .elementor-widget-heading h6 {
color: #006fb5; /* bleu FCCC */
font-weight: 500;
font-size: 1.05rem;
margin: 0;
transition: color 0.25s ease, transform 0.2s ease;
}
/* Liens éventuels autour du titre */
.fccc-sponsors-list a {
color: #006fb5; /* bleu FCCC */
text-decoration: none;
transition: color 0.25s ease, transform 0.2s ease;
}
/* Survol : rouge FCCC et léger agrandissement */
.fccc-sponsors-list a:hover,
.fccc-sponsors-list .elementor-heading-title:hover {
color: #e30613; /* rouge FCCC */
transform: scale(1.03);
text-decoration: underline;
}
/* Focus clavier accessible */
.fccc-sponsors-list a:focus {
outline: 2px solid #e30613;
outline-offset: 2px;
}
/* Mobile */
@media (max-width: 767px) {
.fccc-sponsors-list {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px 12px;
}
.fccc-sponsors-list .elementor-heading-title {
font-size: 0.95rem;
}
}
/* =========================================================
Bloc 40 – v6 Alignement vertical strict (FCCC)
Cible : .fccc-sponsors-grid
- Centre X/Y au niveau de .e-loop-item, .e-con et .e-con-inner
- Préserve le design du Bloc 38 (bordure, radius, padding)
========================================================= */
/* 1) Chaque carte : slot uniforme + centrage */
.fccc-sponsors-grid .e-loop-item {
display: grid;
place-items: center; /* centre vertical + horizontal */
min-height: 130px; /* ajuste selon ton design */
text-align: center;
box-sizing: border-box;
}
/* 2) Container Elementor (niveau parent) : remplit et centre */
.fccc-sponsors-grid .e-loop-item > .e-con {
display: grid !important;
place-items: center !important;
width: 100%;
height: 100%;
}
/* 3) Inner container : remplit et centre aussi */
.fccc-sponsors-grid .e-loop-item > .e-con > .e-con-inner {
display: grid !important;
place-items: center !important;
width: 100%;
height: 100%;
margin: 0;
}
/* 4) Widget image : garde le style du Bloc 38 mais centre à 100% du slot */
.fccc-sponsors-grid .elementor-widget-image {
display: grid !important;
place-items: center !important;
width: 100%;
height: 100%;
/* Le padding, la bordure, le radius et le fond sont déjà définis au Bloc 38 */
box-sizing: border-box;
}
/* 5) Image : ratio respecté, hauteur bornée (mêmes valeurs que Bloc 38) */
.fccc-sponsors-grid img {
display: block;
margin: 0 auto;
height: auto;
max-height: 100px;
width: auto;
object-fit: contain;
vertical-align: middle;
line-height: 0;
}
/* 6) Mobile */
@media (max-width: 767px) {
.fccc-sponsors-grid .e-loop-item { min-height: 110px; }
.fccc-sponsors-grid img { max-height: 72px; }
}
/* =========================================================
Bloc 41 – v2 Boutons formulaires Elementor (FCCC)
- Cible les boutons "Envoyer" du widget Form
- Spécificité renforcée + fallback !important
========================================================= */
.elementor .elementor-widget-form .e-form__buttons .elementor-button,
.elementor .e-form__buttons .elementor-button,
.elementor .elementor-widget-form .elementor-button[type="submit"] {
background-color: #006fb5 !important; /* bleu FCCC */
color: #fff !important;
border: none;
border-radius: 6px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 0.75em 1.8em;
transition: background-color 0.25s ease, transform 0.15s ease;
cursor: pointer;
}
.elementor .e-form__buttons .elementor-button:hover,
.elementor .e-form__buttons .elementor-button:focus {
background-color: #e30613 !important; /* rouge FCCC */
color: #fff !important;
transform: scale(1.03);
}
.elementor .e-form__buttons .elementor-button:active {
transform: scale(0.98);
}
@media (max-width: 767px) {
.elementor .e-form__buttons .elementor-button {
width: 100%;
padding: 0.9em;
}
}
/* =========================================================
Bloc 42 – Introduction sponsors (FCCC)
Variante C – Ruban (version finale corrigée)
- Accent dégradé bleu → rouge
- Espacement interne amélioré
- Compatible Elementor (conteneurs imbriqués)
========================================================= */
.fccc-sponsors-intro.fccc-sponsors-intro--ribbon {
background: #fff;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
/* Ruban supérieur dégradé bleu → rouge */
.fccc-sponsors-intro--ribbon::before {
content: "";
display: block;
height: 6px;
background: linear-gradient(90deg, #006fb5, #e30613);
}
/* Contenu intérieur */
.fccc-sponsors-intro--ribbon .fccc-intro-body,
.fccc-sponsors-intro--ribbon > .elementor-widget-container,
.fccc-sponsors-intro--ribbon > div {
padding: 28px 36px; /* espacement équilibré */
box-sizing: border-box;
}
/* Titres */
.fccc-sponsors-intro--ribbon h2,
.fccc-sponsors-intro--ribbon h3 {
color: #006fb5; /* bleu FCCC */
font-weight: 700;
margin-top: 0;
margin-bottom: 0.6em;
}
/* Paragraphes */
.fccc-sponsors-intro--ribbon p {
font-size: 1.05rem;
line-height: 1.7;
color: #222;
margin: 0 0 1em 0;
}
/* Dernier paragraphe sans marge basse */
.fccc-sponsors-intro--ribbon p:last-child {
margin-bottom: 0;
}
/* Accent rouge sur les mots importants */
.fccc-sponsors-intro--ribbon strong {
color: #e30613;
}
/* Responsive */
@media (max-width: 767px) {
.fccc-sponsors-intro--ribbon .fccc-intro-body,
.fccc-sponsors-intro--ribbon > .elementor-widget-container,
.fccc-sponsors-intro--ribbon > div {
padding: 20px 22px; /* plus compact sur mobile */
}
.fccc-sponsors-intro--ribbon p {
font-size: 1rem;
}
}
/* =========================================================
43) BANDEAU "PROCHAINE MANIFESTATION" – Alignement parfait
---------------------------------------------------------
Objectifs :
- Mettre tous les éléments sur UNE ligne
- Aligner parfaitement verticalement :
· Texte fixe "Prochaine manifestation :"
· Titre dynamique de la manifestation
· Date dynamique
- Supprimer les hauteurs / line-height parasites
- Rendre le tout fluide sur mobile
========================================================= */
/* Bandeau global */
.fccc_section.fccc-next-event-bar{
background-color: var(--fccc-next-bg, #f7f7f7);
border-bottom: 1px solid var(--fccc-border-soft, #e0e0e0);
padding: 0.6rem 1.5rem;
}
/* Wrapper interne */
.fccc-next-event{
max-width: 1200px;
margin: 0 auto;
font-size: 0.95rem;
line-height: 1.4;
}
/* Ligne contenant les 3 widgets */
.fccc-next-event-line{
display: flex;
flex-wrap: wrap;
align-items: center; /* ❤️ ALIGNEMENT VERTICAL PARFAIT */
justify-content: flex-start;
gap: 0.45rem;
}
/* Correction Elementor : supprimer les marges par défaut */
.fccc-next-event-line .elementor-widget{
margin: 0 !important;
line-height: 1 !important; /* ❤️ force un line-height cohérent */
}
/* Correction spécifique du widget “Post Title” */
.fccc-next-event-line .elementor-heading-title{
display: inline-block;
line-height: 1.1; /* ❤️ évite le décalage vertical du titre */
font-weight: 600;
margin: 0 !important;
padding: 0 !important;
}
/* Correction du widget “Text Editor” (texte fixe + date) */
.fccc-next-event-line .elementor-widget-text-editor{
line-height: 1.1 !important;
margin: 0 !important;
padding: 0 !important;
}
.fccc-next-event-line .elementor-widget-text-editor p{
display: inline; /* ❤️ empêche les retours à la ligne intempestifs */
margin: 0;
padding: 0;
line-height: 1.1;
}
/* Mobile */
@media (max-width: 767px){
.fccc-next-event{
text-align: center;
}
.fccc-next-event-line{
justify-content: center;
}
}
/* =========================================================
44) SINGLE MANIFESTATION – Hero & contenu (v2)
---------------------------------------------------------
Objectifs :
- Afficher le texte et l’image côte à côte sur desktop
- Gérer proprement le responsive
========================================================= */
/* --- SECTION HERO --- */
.fccc-section.fccc-manif-hero{
background-color: var(--fccc-hero-bg, #f7f7f7);
border-bottom: 1px solid var(--fccc-border-soft, #e0e0e0);
padding: 3rem 1.5rem;
/* On transforme directement la section en conteneur flex */
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 3rem;
}
/* Wrapper interne éventuel (si tu en as un, on le laisse fluide) */
.fccc-container.fccc-manif-hero-inner{
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
/* Colonnes hero (texte + image) */
.fccc-manif-hero-left,
.fccc-manif-hero-right{
flex: 1 1 0;
min-width: 260px;
}
/* Titre de la manifestation */
.fccc-manif-hero-left .elementor-post-title{
margin: 0 0 1.25rem 0;
}
/* Bloc méta (date + lieu) */
.fccc-manif-meta{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
/* Pastilles méta (pills) */
.fccc-manif-meta-pill{
display: inline-flex;
align-items: center;
padding: 0.3rem 0.75rem;
border-radius: 999px;
background-color: var(--fccc-pill-bg, #ffffff);
border: 1px solid var(--fccc-border-soft, #e0e0e0);
font-size: 0.9rem;
line-height: 1.4;
}
/* Correction marges des textes inside pills */
.fccc-manif-meta-pill .elementor-widget-container,
.fccc-manif-meta-pill .elementor-widget-text-editor,
.fccc-manif-meta-pill p{
margin: 0;
padding: 0;
}
/* Image hero */
.fccc-manif-hero-right img{
display: block;
width: 100%;
height: auto;
max-height: 360px;
object-fit: cover;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
/* --- SECTION CONTENU --- */
.fccc-section.fccc-manif-body{
padding: 2.5rem 1.5rem 3rem;
background-color: var(--fccc-body-bg, #ffffff);
}
.fccc-container.fccc-manif-body-inner{
max-width: 900px;
margin: 0 auto;
}
/* Texte principal */
.fccc-manif-body-inner .elementor-widget-post-content{
font-size: 1rem;
line-height: 1.7;
}
/* --- RESPONSIVE --- */
@media (max-width: 767px){
.fccc-section.fccc-manif-hero{
padding: 2rem 1rem;
}
.fccc-section.fccc-manif-hero{
flex-direction: column;
align-items: stretch;
}
.fccc-manif-hero-right{
order: -1; /* image au-dessus sur mobile, si tu veux */
}
.fccc-manif-hero-left .elementor-post-title{
text-align: center;
}
.fccc-manif-meta{
justify-content: center;
}
.fccc-section.fccc-manif-body{
padding: 2rem 1rem 2.5rem;
}
}
/* =========================================================
45) LISTE MANIFESTATIONS – Zone image uniforme & lisible
---------------------------------------------------------
Objectif :
- Zone image de même hauteur dans toutes les cartes
- Image centrée, bien visible
- Recadrage doux, non destructif (object-fit: cover)
- Textes parfaitement alignés
========================================================= */
/* Zone image uniforme */
.fccc-manif-card-img {
width: 100%;
height: 260px; /* Ajuste ici : 240 / 260 / 300 */
display: flex;
justify-content: flex-start;
align-items: center;
overflow: hidden;
border-radius: 14px;
}
/* Image responsive */
.fccc-manif-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: 14px;
}
/* =========================================================
46) MENU PRINCIPAL DESKTOP – Taille des sous-menus
---------------------------------------------------------
Objectif :
- Agrandir la taille du texte à partir de "Organisation"
(tous les liens situés dans des sous-menus).
- Appliquer la même taille à tous les niveaux ( +1, +2, +3… )
- Ne pas modifier la barre principale.
========================================================= */
@media (min-width: 1200px){
/* Tous les liens à l'intérieur des sous-menus du header */
.elementor-location-header .sub-menu a,
.hfe-header .sub-menu a {
font-size: 1rem !important; /* 16px pour commencer */
line-height: 1.4;
}
}
/* =========================================================
47) MENU PRINCIPAL MOBILE – Taille uniforme des liens
---------------------------------------------------------
Objectif :
- Augmenter la taille du texte dans le menu hamburger.
- Appliquer la même taille à tous les niveaux (0, +1, +2…).
- Ne pas impacter les autres textes du site.
========================================================= */
@media (max-width: 1199px){
/* Elementor : tous les liens du panneau mobile */
.elementor .elementor-nav-menu--dropdown a,
.elementor .elementor-nav-menu--dropdown .elementor-item,
.elementor .elementor-nav-menu--dropdown .elementor-sub-item,
/* HFE : flyout ou menu vertical */
.hfe-flyout-menu .menu-item > a,
.hfe-nav-menu__layout-vertical .menu-item > a{
font-size: 1rem !important; /* même taille que tes sous-menus desktop */
line-height: 1.4;
}
}
/* =========================================================
48) TITRES DANS HTML + ÉDITEUR DE TEXTE – Opt-in
---------------------------------------------------------
Objectif :
- Donner aux – écrits dans un widget HTML ou
Éditeur de texte la même typo que les widgets "Titre",
mais UNIQUEMENT si le widget a la classe fccc-html-titres.
Utilisation :
- Elementor > Avancé > Classe CSS du widget :
fccc-html-titres
========================================================= */
.elementor .elementor-widget-html.fccc-html-titres h1,
.elementor .elementor-widget-html.fccc-html-titres h2,
.elementor .elementor-widget-html.fccc-html-titres h3,
.elementor .elementor-widget-text-editor.fccc-html-titres h1,
.elementor .elementor-widget-text-editor.fccc-html-titres h2,
.elementor .elementor-widget-text-editor.fccc-html-titres h3{
font-family: var(--fccc-font-heading, "Oswald", sans-serif);
font-weight: var(--e-global-typography-primary-font-weight, 600);
letter-spacing: var(--e-global-typography-primary-letter-spacing, 0.02em);
line-height: var(--e-global-typography-primary-line-height, 1.2);
margin: 0;
}
/* h1 */
.elementor .elementor-widget-html.fccc-html-titres h1,
.elementor .elementor-widget-text-editor.fccc-html-titres h1{
color: var(--e-global-color-primary, var(--fccc-primary, #e30613));
text-transform: var(--e-global-typography-h1-text-transform, uppercase);
font-size: var(--e-global-typography-h1-font-size, clamp(2rem, 3.5vw, 2.5rem));
margin: 0 0 var(--fccc-space-3, 1rem);
}
/* h2 */
.elementor .elementor-widget-html.fccc-html-titres h2,
.elementor .elementor-widget-text-editor.fccc-html-titres h2{
color: var(--e-global-color-primary, var(--fccc-primary, #e30613));
text-transform: var(--e-global-typography-h2-text-transform, uppercase);
font-size: var(--e-global-typography-h2-font-size, clamp(1.6rem, 2.8vw, 2rem));
margin: var(--fccc-space-3, 1rem) 0 var(--fccc-space-3, 1rem);
}
/* h3 */
.elementor .elementor-widget-html.fccc-html-titres h3,
.elementor .elementor-widget-text-editor.fccc-html-titres h3{
color: var(--e-global-color-text, var(--fccc-text, #1f2937));
text-transform: var(--e-global-typography-h3-text-transform, none);
font-size: var(--e-global-typography-h3-font-size, clamp(1.25rem, 2.2vw, 1.5rem));
font-weight: var(--e-global-typography-h3-font-weight, 600);
margin: var(--fccc-space-3, 1rem) 0 var(--fccc-space-2, .75rem);
}
@media (max-width: 720px){
.elementor .elementor-widget-html.fccc-html-titres h1,
.elementor .elementor-widget-text-editor.fccc-html-titres h1{
margin-bottom: var(--fccc-space-3, 1rem);
}
.elementor .elementor-widget-html.fccc-html-titres h2,
.elementor .elementor-widget-text-editor.fccc-html-titres h2{
margin-bottom: var(--fccc-space-3, 1rem);
}
.elementor .elementor-widget-html.fccc-html-titres h3,
.elementor .elementor-widget-text-editor.fccc-html-titres h3{
margin-bottom: var(--fccc-space-2, .75rem);
}
}
/* =========================================================
Footer – Bloc "Crédits / Droits du site"
========================================================= */
.footer-credits{
text-align:center; font-size:.9rem; color:rgba(255,255,255,.85); margin-top:1rem;
}
.footer-credits a{ color:inherit; text-decoration:underline; }
.footer-credits a:hover{ color:#fff; }/* End custom CSS */