/* ==========================================================================
   GIFR - Feuille d'adaptation Divi 5.9

   Divi enveloppe chaque bloc dans ses propres conteneurs et leur applique des
   marges, des largeurs et des paddings par defaut. Nos sections sortent deja
   completes du shortcode : il faut donc neutraliser ce que Divi ajoute autour,
   sinon on se retrouve avec une double gouttiere et des blancs parasites.

   A poser sur la SECTION Divi qui contient un bloc GIFR : classe .gi-block
   ========================================================================== */

/* --- La section Divi devient un simple conteneur transparent --- */
.et_pb_section.gi-block {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* --- La ligne aussi, si vous utilisez une section standard plutot que
       pleine largeur. Avec [et_pb_fullwidth_code] il n'y a pas de ligne. --- */
.gi-block .et_pb_row {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.gi-block .et_pb_column { padding: 0 !important; margin: 0 !important; }
.gi-block .et_pb_module { margin-bottom: 0 !important; }

/* --- Divi met une marge sous le dernier module d'une colonne --- */
.gi-block .et_pb_column .et_pb_module:last-child { margin-bottom: 0 !important; }

/* --- Le module Code enveloppe son contenu dans deux div inutiles.
       On les rend transparentes a la mise en page. --- */
.gi-block .et_pb_code_inner,
.gi-block .et_pb_fullwidth_code {
  padding: 0 !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Conflits connus avec les styles globaux de Divi
   -------------------------------------------------------------------------- */

/* Divi force une hauteur de ligne et une couleur sur #main-content.
   Nos sections reprennent la main. */
#main-content .gi-hero,
#main-content .gi-section,
#main-content .gi-cta { color: var(--gi-text); }

/* Divi applique box-sizing: border-box partout, ce qui nous va, mais il
   remet aussi des styles de liste sur ul et ol dans le contenu. */
.gi-block ul,
.gi-block ol { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.gi-block li { list-style: none !important; }

/* Divi ajoute une transition et un survol par defaut sur les liens du
   contenu. Nos composants gerent les leurs. */
.gi-block a { transition: none; }
.gi-block .gi-btn,
.gi-block .gi-tool,
.gi-block .gi-post__link,
.gi-block .gi-db { transition: revert-layer; }

/* Les images de Divi heritent d'un max-width et d'un vertical-align qui
   cassent object-fit dans les vignettes. */
.gi-block .gi-thumb img {
  max-width: none !important;
  vertical-align: initial !important;
}

/* --------------------------------------------------------------------------
   Constructeur visuel
   Dans le Builder, les blocs sont rendus dans une iframe et le survol est
   capte par Divi. On coupe les particules de survol pour ne pas gener
   l'edition, et on rend les apparitions au scroll immediates.
   -------------------------------------------------------------------------- */
.et-fb .gi-fx { display: none !important; }
.et-fb .gi-reveal { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   VARIANTE « MODULES DIVI NATIFS »

   Le hero et l'appel communaute peuvent se monter en vrais modules Divi,
   editables au clic dans le Builder, plutot qu'en un seul module Code.
   Ce bloc fait cohabiter les deux mondes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Le decor doit se caler sur la SECTION, pas sur la ligne Divi

   .gi-hero__media est en position absolue avec inset:0. Son bloc conteneur
   est le premier ancetre positionne. Or Divi met position:relative sur ses
   lignes et ses colonnes : sans la regle ci-dessous, le decor se calerait sur
   la ligne et laisserait le reste de la section nu.

   Le decor etant en z-index -1 et la section en isolation:isolate, le contenu
   repasse au-dessus tout seul, sans avoir a empiler des z-index.
   -------------------------------------------------------------------------- */
.gi-hero.et_pb_section .et_pb_row,
.gi-hero.et_pb_section .et_pb_column,
.gi-hero.et_pb_section .et_pb_module,
.gi-hero.et_pb_section .et_pb_code_inner,
.gi-cta.et_pb_section .et_pb_row,
.gi-cta.et_pb_section .et_pb_column,
.gi-cta.et_pb_section .et_pb_module,
.gi-cta.et_pb_section .et_pb_code_inner { position: static; }

/* Le module Code qui porte le decor ne doit occuper aucune place. */
.gi-hero .et_pb_code,
.gi-cta .et_pb_code { margin: 0 !important; padding: 0 !important; }

/* --------------------------------------------------------------------------
   2. Gabarit du hero monte en modules
   -------------------------------------------------------------------------- */
.gi-hero.et_pb_section { padding: 0 !important; }

/* On vise la ligne et la colonne PAR LEUR CLASSE DIVI, pas par une classe
   qu'il faudrait penser a ajouter. En Divi 5 le champ « Classe CSS » a disparu
   au profit de Avance > Attributes > Add Attribute : c'est une manipulation de
   plus, donc une occasion d'oubli de plus. Seule la classe de la SECTION reste
   indispensable. Les classes gi-hero__row et gi-hero__content restent
   acceptees pour ceux qui les ont deja posees. */
.gi-hero .et_pb_row,
.gi-hero .gi-hero__row {
  width: 100% !important;
  max-width: var(--gi-container-wide) !important;
  margin-inline: auto !important;
  padding: var(--sp-6) var(--gi-gutter) !important;
}
.gi-hero .et_pb_column,
.gi-hero .gi-hero__content { max-width: 620px; float: none !important; }
.gi-hero .et_pb_text { margin-bottom: 0 !important; }
.gi-hero .et_pb_text p:last-child { padding-bottom: 0; }

/* Divi enveloppe chaque bouton dans un div bloc : ils s'empileraient. */
.gi-hero .et_pb_button_module_wrapper,
.gi-cta .et_pb_button_module_wrapper {
  display: inline-block !important;
  margin: 0 var(--sp-3) 0 0 !important;
}
/* Attention : :first-of-type et :last-of-type portent sur le TYPE d'element,
   pas sur la classe. Tous ces blocs etant des div, ces pseudo-classes
   designeraient le module Code et non le bouton. On passe donc par la
   relation de voisinage, qui elle est fiable. */
.gi-hero .et_pb_button_module_wrapper:last-child,
.gi-cta .et_pb_button_module_wrapper:last-child { margin-right: 0 !important; }
/* Divi ne sait pas creer de div enveloppante autour d'un groupe de modules.
   On marge donc le bouton qui suit directement un module Texte. */
.gi-hero .et_pb_text + .et_pb_button_module_wrapper { margin-top: var(--sp-6) !important; }

/* --------------------------------------------------------------------------
   3. Un bouton Divi qui redevient un bouton GIFR

   Divi impose sa taille, sa bordure, son arrondi, et un ::after qui affiche
   une fleche de sa police d'icones. Notre ::after porte le balayage lumineux.
   Il faut donc reprendre la main explicitement, et avec !important, parce que
   Divi utilise lui-meme !important sur plusieurs de ces proprietes.
   -------------------------------------------------------------------------- */
.et_pb_button.gi-btn,
.et_pb_button.gi-btn:hover {
  --btn-cut: 12px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 0.88rem 1.65rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--gi-font-display) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.085em !important;
  text-transform: uppercase;
}

/* La fleche de Divi disparait au profit de notre balayage. */
.et_pb_button.gi-btn::after {
  font-family: inherit !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  line-height: inherit !important;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  translate: -120% 0;
  transition: translate var(--t-slow) var(--ease-out);
}
.et_pb_button.gi-btn:hover::after { translate: 120% 0; }
.et_pb_button.gi-btn::before { display: none !important; }

/* Divi elargit le remplissage droit au survol pour loger sa fleche. */
.et_pb_button.gi-btn:hover { padding: 0.88rem 1.65rem !important; }

/* --------------------------------------------------------------------------
   4. Gabarit de l'appel communaute monte en modules
   -------------------------------------------------------------------------- */
.gi-cta.et_pb_section { padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem) !important; }
.gi-cta .et_pb_row,
.gi-cta .gi-cta__row {
  width: 100% !important;
  max-width: 46em !important;
  margin-inline: auto !important;
  padding: 0 var(--gi-gutter) !important;
  text-align: center;
}
.gi-cta .et_pb_column { float: none !important; }
.gi-cta .et_pb_text { margin-bottom: 0 !important; text-align: center; }
.gi-cta .gi-cta__divider { margin-bottom: var(--sp-5); }
.gi-cta .et_pb_text + .et_pb_button_module_wrapper { margin-top: var(--sp-7) !important; }

/* --------------------------------------------------------------------------
   5. Intitules et titres montes en module Texte

   Dans la maquette, l'etoile de l'intitule est un SVG en ligne. Un module
   Texte Divi ne permet pas d'en poser un simplement : on la dessine donc en
   CSS, mais uniquement si aucun SVG n'est deja present, pour que les deux
   ecritures restent valables.
   -------------------------------------------------------------------------- */
.gi-hero__eyebrow:not(:has(svg))::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5em;
  vertical-align: -0.08em;
  background-color: var(--gi-gold-400);
  -webkit-mask: var(--gi-star) center / contain no-repeat;
  mask: var(--gi-star) center / contain no-repeat;
}

/* L'ornement sous le titre du hero devient un pseudo-element : un module
   de moins a poser dans le Builder. */
.gi-hero .et_pb_text.gi-hero__title::after {
  content: "";
  display: block;
  width: 190px;
  height: 8px;
  margin-block: var(--sp-3) var(--sp-4);
  background-color: var(--gi-gold-500);
  -webkit-mask:
    var(--gi-gem) left center / 8px 8px no-repeat,
    linear-gradient(90deg, #000, transparent) left 15px center / calc(100% - 15px) 1px no-repeat;
  mask:
    var(--gi-gem) left center / 8px 8px no-repeat,
    linear-gradient(90deg, #000, transparent) left 15px center / calc(100% - 15px) 1px no-repeat;
}

/* Divi applique ses propres tailles de titre dans les modules Texte. */
.gi-hero .gi-hero__title,
.gi-hero .gi-hero__title h1,
.gi-hero .gi-hero__title h2 {
  font-family: var(--gi-font-display) !important;
  font-size: var(--fs-t-xl) !important;
  font-weight: 700 !important;
  line-height: 1.17 !important;
  letter-spacing: var(--ls-caps-lg) !important;
  color: var(--gi-sand-50) !important;
}
.gi-cta .gi-cta__title,
.gi-cta .gi-cta__title h1,
.gi-cta .gi-cta__title h2 {
  font-family: var(--gi-font-display) !important;
  font-size: var(--fs-t-2xl) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: var(--ls-caps-lg) !important;
  color: var(--gi-sand-50) !important;
}
.gi-hero .gi-hero__lead,
.gi-hero .gi-hero__lead p { color: var(--gi-sand-300) !important; font-size: var(--fs-lg) !important; }
.gi-cta .gi-cta__lead,
.gi-cta .gi-cta__lead p { color: var(--gi-sand-300) !important; font-size: var(--fs-lg) !important; }

/* Le remplissage vertical est porte par la ligne, pas par la colonne :
   sans cela le hero prendrait deux fois la marge. */
.gi-hero .gi-hero__content { padding-block: 0 !important; }


/* --------------------------------------------------------------------------
   6. Filet de securite

   Si les classes des modules Texte n'ont pas ete posees (le champ a change de
   place en Divi 5), la mise en page tient quand meme : les boutons restent en
   ligne et le contenu garde ses marges. Seule la typographie des titres sera
   celle de Divi tant que les classes ne sont pas ajoutees.
   -------------------------------------------------------------------------- */
.gi-hero .et_pb_module,
.gi-cta .et_pb_module { max-width: 100%; }

.gi-hero .et_pb_button,
.gi-cta .et_pb_button { vertical-align: top; }

/* Divi 5 peut envelopper les modules dans une couche supplementaire. */
.gi-hero .et_pb_module_inner,
.gi-cta .et_pb_module_inner { position: static; }