/* =========================================================
   FFF – GLOBAL CUSTOM STYLES (Divi Child)
   Structure :
   1. Base typographie
   2. FFF – Divi Text Module in 2 columns
   3. Header / navigation
   4. Galeries
   9. Menus Desktop et menu Mobile
   10. DIVI - Donation section full-bleed (MOBILE ONLY)
   11. FFF - Top Section Color Ribbon
   12. Global site footer
   ========================================================= */

/* =========================================================
   1. BASE TYPOGRAPHIE
   ========================================================= */

/* Paragraphe standard : poids 400, pas de faux gras/italique */
p {
  font-weight: 400 !important;
  font-synthesis: none;
}

/* Emphase légère dans les paragraphes */
p strong,
p b {
  font-weight: 500 !important;
}

/* ============================================
   2. FFF – Divi Text Module in 2 columns (desktop)
   Class to add on the Text module: fff-two-cols
   ============================================ */

.fff-two-cols {
  column-count: 2;
  column-gap: 3.2em;
  column-rule: 1px solid rgba(0,0,0,0.08);
}

/* Avoid ugly breaks in common elements */
.fff-two-cols p,
.fff-two-cols ul,
.fff-two-cols ol,
.fff-two-cols blockquote {
  break-inside: avoid;
}

/* Make headings span full width (cleaner reading) */
.fff-two-cols h1,
.fff-two-cols h2,
.fff-two-cols h3,
.fff-two-cols h4 {
  column-span: all;
}

/* Mobile and tablet: back to 1 column */
@media (max-width: 980px) {
  ..fff-two-cols {
    column-count: 1;
    column-gap: 0;
    column-rule: none;
  }
}


/* =========================================================
   3. HEADER / NAVIGATION
   ========================================================= */

/* Masquer le header fixe sur mobile + retirer l’espace haut */
@media (max-width: 61.25em) {             /* ≃ 980px */
  .et_fixed_nav #main-header {
    display: none;
  }

  #page-container {
    padding-top: 0 !important;
  }
}

/* =========================================================
   4. GALERIES
   ========================================================= */

/* 4.1 – Galerie « FFF » : flèches de navigation */
.gallery-fff .et-pb-arrow-next:before,
.gallery-fff .et-pb-arrow-prev:before {
  color: #ffffff !important;
  font-size: 5em;                          /* 80px */
}

/* 4.2 – Galerie « news » : pagination sous forme de puces */
.gallery-news {
  box-shadow: none;
}

/* Wrapper pagination */
.gallery-news .et_pb_gallery_pagination {
  border-top: none;
  margin-top: 0.75rem;
  text-align: center;
}

.gallery-news .et_pb_gallery_pagination ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Retire un pseudo-élément éventuel */
.gallery-news .et_pb_gallery_pagination ul::after {
  content: none;
}

.gallery-news .et_pb_gallery_pagination li {
  display: inline-block;
  padding-bottom: 0;
  margin: 0 0.15rem;
}

/* Lien de page */
.gallery-news .et_pb_gallery_pagination a {
  display: inline-block;
  min-width: 2rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.78rem;
  border-radius: 4px;
  color: #4b5563;
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

/* Page active (et équivalent accessible) */
.gallery-news .et_pb_gallery_pagination a.active,
.gallery-news .et_pb_gallery_pagination a[aria-current="page"] {
  font-weight: 600;
  color: #ffffff;
  background-color: #4267b2;               /* Bleu FFF */
}

/* Hover / focus clavier */
.gallery-news .et_pb_gallery_pagination a:hover,
.gallery-news .et_pb_gallery_pagination a:focus-visible {
  color: #ffffff;
  background-color: #ae2012;               /* Rouge FFF actuel */
  outline: 2px solid rgba(174, 32, 18, 0.25);
  outline-offset: 2px;
}

/* ==========================================================
   9. Separation claire entre le menu Mobile et le menu Desktop
   ========================================================== */

/* Desktop only: Max Mega Menu */
@media (max-width: 980px) {
  #mega-menu-wrap-primary,
  #mega-menu-wrap-main {
    display: none !important;
  }
}

/* Mobile only: Responsive Menu */
@media (min-width: 981px) {
  #responsive-menu-container,
  #responsive-menu-button,
  .responsive-menu {
    display: none !important;
  }
}

/* =========================================================
   10. DIVI - Section full-bleed (MOBILE ONLY)
   Add class "fff-donation-fullbleed" to the SECTION
========================================================= */
@media (max-width: 767px){

  /* 1) Kill all section spacing */
  .et_pb_section.fff-donation-fullbleed{
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* 2) Kill row spacing + force full width */
  .et_pb_section.fff-donation-fullbleed > .et_pb_row{
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 3) Kill any column/module spacing inside */
  .et_pb_section.fff-donation-fullbleed .et_pb_column,
  .et_pb_section.fff-donation-fullbleed .et_pb_module{
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 4) Stack columns cleanly */
  .et_pb_section.fff-donation-fullbleed .et_pb_row{
    display: block !important;
  }

  /* 5) Force the FORM container to full width */
  .et_pb_section.fff-donation-fullbleed .wpforms-container,
  .et_pb_section.fff-donation-fullbleed .wpforms-container-full{
    margin: 0 !important;
    width: 100% !important;
  }
}

/* =========================================================
   10a. MOBILE: keep the title visible (fixed header overlap fix)
   Section class: fff-donation-fullbleed
========================================================= */
@media (max-width: 767px){

  /* Default (not logged-in): adjust if needed */
  .et_pb_section.fff-donation-fullbleed{
    padding-top: 40px !important; /* 72-110px selon ton header */
  }

  /* Logged-in (admin bar adds extra height) */
  body.admin-bar .et_pb_section.fff-donation-fullbleed{
    padding-top: 40px !important; /* 110-150px selon ton cas */
  }
}

/* ==========================================================
   FFF - Top Section Ribbon (NO LAYOUT SHIFT)
   Class on section: fff-top-ribbon
   ========================================================== */

.et_pb_section.fff-top-ribbon{
  position: relative !important;
  overflow: hidden !important;
}

/* Ribbon overlay: does NOT affect layout */
.et_pb_section.fff-top-ribbon:before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 16px !important;        /* adjust if you want */
  z-index: 999 !important;
  pointer-events: none !important;

  background: linear-gradient(90deg,
    rgba(66,103,178,0.98),
    rgba(245,158,11,0.98),
    rgba(34,197,94,0.92)
  ) !important;
}

/* IMPORTANT: remove any extra padding/margins that were added */
.et_pb_section.fff-top-ribbon > .et_pb_row{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Mobile: slightly thicker if you like, still no shift */
@media (max-width: 767px){
  .et_pb_section.fff-top-ribbon:before{
    height: 18px !important;
  }
}

/* ==========================================================
   FFF - Instagram Top Ribbon (NO LAYOUT SHIFT)
   Class on section: fff-top-ribbon-ig
   ========================================================== */

.et_pb_section.fff-top-ribbon-ig{
  position: relative !important;
  overflow: hidden !important;
}

/* Ribbon overlay: does NOT affect layout */
.et_pb_section.fff-top-ribbon-ig:before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 16px !important;
  z-index: 999 !important;
  pointer-events: none !important;

  /* Instagram-ish gradient */
  background: linear-gradient(90deg,
    rgba(64,93,230,0.98),   /* blue */
    rgba(131,58,180,0.98),  /* purple */
    rgba(225,48,108,0.98),  /* pink/red */
    rgba(245,96,64,0.98),   /* orange */
    rgba(252,175,69,0.98)   /* yellow */
  ) !important;
}

/* IMPORTANT: remove any extra padding/margins that were added */
.et_pb_section.fff-top-ribbon-ig > .et_pb_row{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Mobile: slightly thicker, still no shift */
@media (max-width: 767px){
  .et_pb_section.fff-top-ribbon-ig:before{
    height: 18px !important;
  }
}

/* ==========================================================
   FFF - Bottom Section Ribbon (NO LAYOUT SHIFT)
   Class on section: fff-bottom-ribbon
   Background behind: #e5e7eb (Last Infos)
   ========================================================== */

.et_pb_section.fff-bottom-ribbon{
  position: relative !important;
  overflow: hidden !important;
}

/* Ribbon overlay at the BOTTOM: does NOT affect layout */
.et_pb_section.fff-bottom-ribbon:after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;

  height: 8px !important;       /* thinner */
  z-index: 999 !important;
  pointer-events: none !important;

  /* Slightly softer tones to sit nicely on #e5e7eb */
background: linear-gradient(90deg,
  rgba(66,103,178,0.78),
  rgba(245,158,11,0.78),
  rgba(34,197,94,0.72)
) !important;
}

/* IMPORTANT: no extra padding/margins added by the ribbon */
.et_pb_section.fff-bottom-ribbon > .et_pb_row{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Mobile: tiny bump, still no shift */
@media (max-width: 767px){
  .et_pb_section.fff-bottom-ribbon:after{
    height: 12px !important;
  }
}

/* ===============================
   FFF SIDE NOTE – petit bloc texte colonne de droite
   Classe : fff-side-note
   =============================== */

.fff-side-note{
  border:1px solid #e5e7eb;
  border-radius:4px;
  padding:0.9rem 1.1rem 1rem;
  background:#ffffff;
  box-shadow:0 4px 14px rgba(15,23,42,.05);
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    transform .2s ease;
}

/* Hover: bordure et fond bleu léger */
.fff-side-note:hover{
  border-color:#4267b2;
  background:#f5f7ff;
  box-shadow:0 10px 22px rgba(15,23,42,.12);
  transform:translateY(-2px);
}

/* Titre H3 */
.fff-side-note h3{
  margin:0 0 .45rem;
  font-size:1.05rem;
  font-weight:600;
  color:#111827;
  line-height:1.35;
}

/* Texte paragraphe */
.fff-side-note p{
  margin:0 0 .4rem;
  font-size:.92rem;
  line-height:1.75;
  color:#4b5563;
  text-align:justify;
}

/* Eviter le gros trou sous le dernier paragraphe */
.fff-side-note p:last-child{
  margin-bottom:0;
}

/* Responsive léger */
@media (max-width:480px){
  .fff-side-note{
    padding:0.75rem 0.85rem 0.85rem;
  }

  .fff-side-note h3{
    font-size:1rem;
  }

  .fff-side-note p{
    font-size:.9rem;
  }
}

/* Réduction des animations si l’utilisateur le demande */
@media (prefers-reduced-motion:reduce){
  .fff-side-note{
    transition:none;
  }
}