/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Elegant Themes
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */

@font-face {
    font-family: 'Good Times Rg';
    src: url('fonts/GoodTimesRg-Regular.woff2') format('woff2'),
        url('fonts/GoodTimesRg-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow';
    src: url('fonts/Barlow-Bold.woff2') format('woff2'),
        url('fonts/Barlow-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ivy Journal';
    src: url('fonts/IvyJournal-Regular.woff2') format('woff2'),
        url('fonts/IvyJournal-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('fonts/AktivGrotesk-Black.woff2') format('woff2'),
        url('fonts/AktivGrotesk-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('fonts/AktivGrotesk-BlackItalic.woff2') format('woff2'),
        url('fonts/AktivGrotesk-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('fonts/AktivGrotesk-Bold.woff2') format('woff2'),
        url('fonts/AktivGrotesk-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('fonts/AktivGrotesk-BoldItalic.woff2') format('woff2'),
        url('fonts/AktivGrotesk-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk-Hairline';
    src: url('fonts/AktivGrotesk-Hairline.woff2') format('woff2'),
        url('fonts/AktivGrotesk-Hairline.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk-HairlineItalic';
    src: url('fonts/AktivGrotesk-HairlineItalic.woff2') format('woff2'),
        url('fonts/AktivGrotesk-HairlineItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('fonts/AktivGrotesk-Italic.woff2') format('woff2'),
        url('fonts/AktivGrotesk-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('fonts/AktivGrotesk-Light.woff2') format('woff2'),
        url('fonts/AktivGrotesk-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('fonts/AktivGrotesk-Medium.woff2') format('woff2'),
        url('fonts/AktivGrotesk-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('fonts/AktivGrotesk-LightItalic.woff2') format('woff2'),
        url('fonts/AktivGrotesk-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('fonts/AktivGrotesk-MediumItalic.woff2') format('woff2'),
        url('fonts/AktivGrotesk-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('fonts/AktivGrotesk-Regular.woff2') format('woff2'),
        url('fonts/AktivGrotesk-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('fonts/AktivGrotesk-Thin.woff2') format('woff2'),
        url('fonts/AktivGrotesk-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('fonts/AktivGrotesk-ThinItalic.woff2') format('woff2'),
        url('fonts/AktivGrotesk-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk-XBold';
    src: url('fonts/AktivGrotesk-XBold.woff2') format('woff2'),
        url('fonts/AktivGrotesk-XBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk-XBoldItalic';
    src: url('fonts/AktivGrotesk-XBoldItalic.woff2') format('woff2'),
        url('fonts/AktivGrotesk-XBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

/* ===============================
   BODY global - typographie
   =============================== */
/* Dans la règle globale, exclure les mots décoratifs */
body,
.et_pb_text *,
.et_pb_module p,
.et_pb_module li,
.et_pb_module span {
    font-family: 'AktivGrotesk', sans-serif !important;
}

body {
    font-size: 18px !important;
    line-height: 1.25 !important;
	font-weight: 400;
}

@media (max-width: 767px) {
    body {
        font-size: 16px !important;
    }
}

.et_pb_module ul li,
.et_pb_module ol li {
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
}

@media (max-width: 767px) {
    .et_pb_module ul li,
    .et_pb_module ol li {
        font-size: 16px !important;
    }
}

/* ===============================
   H1 global - typographie
   =============================== */

h1 {
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 48px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #d5dd63;
}

#h1-lilas h1 {
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 48px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #D4ABD1;
}

#h1-vert-neon h1 {
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 48px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #d5dd63;
}

#h1-violet h1 {
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 48px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #6F215A;
}

#h1-rouge h1 {
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 48px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #E73A31;
}

#h1-blanc h1 {
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 48px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #ffffff;
}

#h1-noir h1 {
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 48px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #000000;
}

@media (max-width: 980px) {
    .et_pb_text_1 .et_pb_text_inner h1,
    #h1-lilas h1,
    #h1-vert-neon h1,
    #h1-violet h1,
    #h1-rouge h1,
    #h1-blanc h1,
    #h1-noir h1 {
        font-size: 36px !important;
    }
}

@media (max-width: 767px) {
    h1,
    .et_pb_text_1 .et_pb_text_inner h1,
    #h1-lilas h1,
    #h1-vert-neon h1,
    #h1-violet h1,
    #h1-rouge h1,
    #h1-blanc h1,
    #h1-noir h1 {
        font-size: 34px !important;
        word-break: break-word !important;
        hyphens: auto !important;
        overflow-wrap: break-word !important;
    }
}

/* ===============================
   H2 global - typographie
   =============================== */
#h2-lilas h2 {
    color: #D4ABD1 !important;
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 20px;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
}
#h2-vert-neon h2 {
    color: #d5dd63 !important;
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 20px;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
}
#h2-violet h2 {
    color: #6F215A !important;
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 20px;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
}
#h2-rouge h2 {
    color: #E73A31 !important;
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 20px;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
}
#h2-blanc h2 {
    color: #ffffff !important;
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 20px;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
}
#h2-noir h2 {
    color: #000000 !important;
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 20px;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
}

/* Tablette uniquement */
@media (min-width: 768px) and (max-width: 980px) {
    #h2-lilas h2,
    #h2-vert-neon h2,
    #h2-violet h2,
    #h2-rouge h2,
    #h2-blanc h2,
    #h2-noir h2 {
        font-size: 20px !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }
}

/* Mobile uniquement */
@media (max-width: 767px) {
    #h2-lilas h2,
    #h2-vert-neon h2,
    #h2-violet h2,
    #h2-rouge h2,
    #h2-blanc h2,
    #h2-noir h2 {
        font-size: 20px !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }
}


/* ===============================
   H3 global - typographie
   =============================== */
#h3-lilas h3 {
    color: #D4ABD1 !important;
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 28px;
    line-height: 1.2 !important;
    font-weight: 500 !important;
}
#h3-vert-neon h3 {
    color: #d5dd63 !important;
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 28px;
    line-height: 1.2 !important;
    font-weight: 500 !important;
}
#h3-violet h3 {
    color: #6F215A !important;
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 28px;
    line-height: 1.2 !important;
    font-weight: 500 !important;
}
#h3-rouge h3 {
    color: #E73A31 !important;
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 28px;
    line-height: 1.2 !important;
    font-weight: 500 !important;
}
#h3-blanc h3 {
    color: #ffffff !important;
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 28px;
    line-height: 1.2 !important;
    font-weight: 500 !important;
}
#h3-noir h3 {
    color: #000000 !important;
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 28px;
    line-height: 1.2 !important;
    font-weight: 500 !important;
}

/* Tablette uniquement */
@media (min-width: 768px) and (max-width: 980px) {
    #h3-lilas h3,
    #h3-vert-neon h3,
    #h3-violet h3,
    #h3-rouge h3,
    #h3-blanc h3,
    #h3-noir h3 {
        font-size: 28px !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }
}

/* Mobile uniquement */
@media (max-width: 767px) {
    #h3-lilas h3,
    #h3-vert-neon h3,
    #h3-violet h3,
    #h3-rouge h3,
    #h3-blanc h3,
    #h3-noir h3 {
        font-size: 24px !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }
}


/* ===============================
   H4 global - typographie
   =============================== */
#h4-lilas h4 {
    color: #D4ABD1 !important;         /* lilas */
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 20px;
    line-height: 1.2 !important;
    font-weight: 700 !important;
	margin-bottom: 8px !important;
}

#h4-vert-neon h4 {
    color: #d5dd63 !important;         /* vert néon */
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 20px;
    line-height: 1.2 !important;
    font-weight: 700 !important;
	margin-bottom: 8px !important;
}

#h4-violet h4 {
    color: #6F215A !important;         /* violet */
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 20px;
    line-height: 1.2 !important;
    font-weight: 700 !important;
	margin-bottom: 8px !important;
}

#h4-rouge h4 {
    color: #E73A31 !important;         /* rouge */
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 20px;
    line-height: 1.2 !important;
    font-weight: 700 !important;
	margin-bottom: 8px !important;
}

#h4-blanc h4 {
    color: #ffffff !important;         /* blanc */
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 20px;
    line-height: 1.2 !important;
    font-weight: 700 !important;
	margin-bottom: 8px !important;
}

#h4-noir h4 {
    color: #000000 !important;         /* noir */
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 20px;
    line-height: 1.2 !important;
    font-weight: 700 !important;
	margin-bottom: 8px !important;
}

@media (max-width: 767px) {
    #h4-lilas h4,
    #h4-vert-neon h4,
    #h4-violet h4,
    #h4-rouge h4,
    #h4-blanc h4,
    #h4-noir h4 {
        font-size: 20px !important;
        letter-spacing: 0.1em !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }
}

@media (max-width: 980px) {
    #h4-lilas h4,
    #h4-vert-neon h4,
    #h4-violet h4,
    #h4-rouge h4,
    #h4-blanc h4,
    #h4-noir h4 {
        font-size: 18px !important;
        letter-spacing: 0.1em !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }
}


/* ===============================
   Menu Divi (desktop, sticky et mobile)
   Avec Aktiv Grotesk, taille 16px, couleur #d5dd63, letter-spacing 0.8px
   =============================== */

/* Tous les liens du menu desktop */
.et-menu.nav li > a,
.et-menu.nav li > a:visited {
    font-family: 'Aktiv Grotesk', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #d5dd63 !important;
    letter-spacing: 0.8px !important;
    text-transform: none !important;
}

/* Sticky header */
#main-header.et-fixed-header .et-menu.nav li a,
#main-header.et-fixed-header .et-menu.nav li a:visited {
    color: #d5dd63 !important;
}

/* Menu mobile / hamburger */
#et_mobile_nav_menu li a,
#et_mobile_nav_menu li a:visited {
    font-family: 'Aktiv Grotesk', sans-serif !important;
    font-size: 16px !important;
    color: #d5dd63 !important;
    letter-spacing: 0.8px !important;
    text-transform: none !important;
}



/* ========================================
   Texte pas gras dans le dropdown du menu / Services
   ======================================== */
.et-menu.nav li .sub-menu li a,
.et-menu.nav li .sub-menu li a:visited {
    font-weight: 400 !important;
    letter-spacing: normal !important;
}

/* =========================================
   HYPERLIENS
   ========================================= */
/* Liens dans le contenu — soulignés */
.et_pb_text a,
.entry-content a {
  text-decoration: underline !important;
  text-decoration-color: inherit !important;
}

/* Liens vert néon — soulignés en vert néon */
.liens-vert-neon a {
  color: #d5dd63 !important;
  text-decoration: underline !important;
  text-decoration-color: #d5dd63 !important;
}

/* Menu, footer et modules texte dans le footer — PAS de soulignement */
#top-menu a,
.et_pb_menu a,
nav a,
#et-footer-nav a,
footer a,
.et_pb_text_2_tb_footer a,
.et_pb_footer_tabbed_widget_area a {
  text-decoration: none !important;
}


/* =========================================
   SECTION HERO AVEC MOT DECORATIF : TECHNO
   ========================================= */

/* Section parent */
.section-decorative {
    position: relative;
}

/* ===== DESKTOP ===== */
.section-decorative .mot-decoratif {
    position: relative;
    text-align: left;
    margin-bottom: 0px;
    z-index: 2;
}

.section-decorative .mot-decoratif p {
    margin: 0;
    font-family: 'Good Times Rg', sans-serif !important;
    font-size: clamp(120px, 14vw, 240px);
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px #D4ABD1;
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
    .section-decorative .et_pb_row_0 {
        position: relative;
        z-index: 2; 
    }
    .section-decorative .et_pb_row_1 {
        position: relative;
        z-index: 1; 
    }
    .section-decorative .mot-decoratif {
        margin-bottom: -25px;
    }
    .section-decorative .mot-decoratif p {
        font-size: clamp(30px, 14vw, 55px);
        letter-spacing: 0.05em;
        font-stretch: normal;
    }
    .section-decorative .et_pb_column_2 {
        position: relative;
        z-index: 1;
    }
}

/* =========================================
   SECTION À PROPOS AVEC MOT DÉCORATIF : LA FRONDE
   ========================================= */

/* Section parent */
.section-decorative-blanc {
    position: relative;
}

/* Z-index des rows */
.section-decorative-blanc .row-pastille {
    position: relative;
    z-index: 1;
}

.section-decorative-blanc .row-la-fronde {
    position: relative;
    z-index: 3;
}

/* Rendre "LA FRONDE" absolu par rapport à la section */
.section-decorative-blanc .row-la-fronde {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    z-index: 10;
    pointer-events: none;
}

/* La pastille reste en position normale */
.section-decorative-blanc .row-pastille {
    position: relative;
    z-index: 1;
}

/* ===== DESKTOP ===== */
.section-decorative-blanc .mot-decoratif-blanc {
    position: relative;
    text-align: center;
    margin-bottom: 0px;
    z-index: 2;
}

.section-decorative-blanc .mot-decoratif-blanc p {
    margin: 0;
    font-family: 'Good Times Rg', sans-serif !important;
    font-size: clamp(60px, 7vw, 120px);
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px #ffffff;
}

/* Z-index des rows */
.section-decorative-blanc .row-pastille {
    position: relative;
    z-index: 1;
}

.section-decorative-blanc .row-la-fronde {
    position: relative;
    z-index: 2;
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
    .section-decorative-blanc .mot-decoratif-blanc p {
        font-size: clamp(30px, 7vw, 60px);
        letter-spacing: 0.05em;
        white-space: normal;
    }
}


/* =========================================
   BOUTONS
   ========================================= */
.et_pb_button {
  font-family: 'AktivGrotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  border-radius: 9999px !important;
  text-align: center !important;
  padding: 20px 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Bouton rouge #e73a31 → hover #f7bebb */
.et_pb_button.bouton-rouge {
  background-color: #e73a31 !important;
  border: 2px solid #e73a31 !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
}
.et_pb_button.et_pb_bg_layout_light.bouton-rouge:hover {
  background-color: #f7bebb !important;
  color: #000000 !important;
  border: 2px solid #e73a31 !important;
  border-radius: 9999px !important;
}

/* Bouton lilas #d4abd1 → hover #f1e3f0 */
.et_pb_button.bouton-lilas {
  background-color: #d4abd1 !important;
  border: 2px solid #d4abd1 !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
}
.et_pb_button.et_pb_bg_layout_light.bouton-lilas:hover {
  background-color: #f1e3f0 !important;
  color: #000000 !important;
  border: 2px solid #d4abd1 !important;
  border-radius: 9999px !important;
}

/* Bouton violet #6f215a → hover #d0b6c9 */
.et_pb_button.bouton-violet {
  background-color: #6f215a !important;
  border: 2px solid #6f215a !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
}
.et_pb_button.et_pb_bg_layout_light.bouton-violet:hover {
  background-color: #d0b6c9 !important;
  color: #000000 !important;
  border: 2px solid #6f215a !important;
  border-radius: 9999px !important;
}

/* Bouton vert neon #d5dd63 → hover #eff2c7 */
.et_pb_button.bouton-vert-neon {
  background-color: #d5dd63 !important;
  border: 2px solid #d5dd63 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
}
.et_pb_button.et_pb_bg_layout_light.bouton-vert-neon:hover {
  background-color: #eff2c7 !important;
  color: #000000 !important;
  border: 2px solid #d5dd63 !important;
  border-radius: 9999px !important;
}

/* Bouton transparent avec contour → hover #eff2c7 */
.et_pb_button.bouton-transparent-contour-vert-neon {
  background-color: transparent !important;
  border: 2px solid #d5dd63 !important;
  color: #d5dd63 !important;
  border-radius: 9999px !important;
}
.et_pb_button.et_pb_bg_layout_light.bouton-transparent-contour-vert-neon:hover {
  background-color: #eff2c7 !important;
  color: #000000 !important;
  border: 2px solid #d5dd63 !important;
  border-radius: 9999px !important;
}

/* Bouton rouge texte vert #d5dd63 → hover #eff2c7 */
.et_pb_button.bouton-rouge-texte-vert {
  background-color: #d5dd63 !important;
  border: 2px solid #d5dd63 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
}
.et_pb_button.et_pb_bg_layout_light.bouton-vert-neon:hover {
  background-color: #eff2c7 !important;
  color: #000000 !important;
  border: 2px solid #d5dd63 !important;
  border-radius: 9999px !important;
}

/* =========================================
   SECTION PODCAST - MOT DÉCORATIF VERTICAL
   ========================================= */

/* Section parente */
.section-podcast {
    position: relative;
    overflow: hidden;
}

/* ===== DESKTOP ===== */
.section-podcast .mot-vertical-podcast {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: calc(100% + 30px);
    z-index: 0;
    display: flex;
	opacity: 0.5;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    pointer-events: none;
    padding: 0;
    margin: 0;
}

.section-podcast .mot-vertical-podcast svg {
    width: 100%;
    display: block;
}

/* Chaque instance du mot */
.section-podcast .mot-vertical-podcast p {
    margin: 0;
    padding: 0;
    font-family: 'Good Times Rg', sans-serif !important;
    font-size: clamp(80px, 10vw, 160px);
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px #D4ABD1;
}

/* Tout le contenu visible doit passer par-dessus */
.section-podcast .contenu-podcast {
    position: relative;
    z-index: 2;
}

/* ===== TABLETTE (768px à 980px) ===== */
@media (min-width: 768px) and (max-width: 980px) {
    .section-podcast .mot-vertical-podcast {
        left: 20px;
    }
    .section-podcast .mot-vertical-podcast p {
        font-size: clamp(60px, 9vw, 100px);
    }
}

/* ===== MOBILE (max 767px) ===== */
@media (max-width: 767px) {
    .section-podcast .mot-vertical-podcast {
        top: -20px;
        height: calc(100% + 20px);
    }
    .section-podcast .mot-vertical-podcast p {
        font-size: clamp(32px, 11vw, 55px);
        letter-spacing: 0.05em;
    }
}


/* =========================================
   SECTION LA FRONDE - MOT DÉCORATIF VERTICAL
   ========================================= */

/* Section parente */
.section-la-fronde {
    position: relative;
    overflow: hidden;
}

/* ===== DESKTOP ===== */
.section-la-fronde .mot-vertical-la-fronde {
    position: absolute;
    top: -125px;
    left: 0;
    width: 100%;
    height: calc(100% + 30px);
    z-index: 0;
    display: flex;
    opacity: 0.25;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    pointer-events: none;
    padding: 0;
    margin: 0;
}

.section-la-fronde .mot-vertical-la-fronde svg {
    width: 100%;
    display: block;
}

.section-la-fronde .mot-vertical-la-fronde p {
    margin: 0;
    padding: 0;
    font-family: 'Good Times Rg', sans-serif !important;
    font-size: clamp(80px, 10vw, 160px);
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px #ffffff;
}

/* Tout le contenu visible doit passer par-dessus */
.section-la-fronde .contenu-la-fronde {
    position: relative;
    z-index: 2;
}

/* ===== TABLETTE (768px à 980px) ===== */
@media (min-width: 768px) and (max-width: 980px) {
    .section-la-fronde .mot-vertical-la-fronde {
        left: 20px;
    }
    .section-la-fronde .mot-vertical-la-fronde p {
        font-size: clamp(60px, 9vw, 100px);
    }
}

/* ===== MOBILE (max 767px) ===== */
@media (max-width: 767px) {
    .section-la-fronde .mot-vertical-la-fronde {
        display: none;
    }
}


/* =========================================
   RUBAN ROUGE GRATUIT SUR MOBILE
   ========================================= */

.ruban-mobile-gratuit {
    display: none;
}

@media (max-width: 767px) {
    .ruban-mobile-gratuit {
        display: block;
        width: calc(100vw) !important;
        margin-left: calc(-50vw + 50%) !important;
        overflow: hidden;
        padding: 0;
    }

    .ruban-mobile-gratuit img {
        width: 300% !important;
        margin-left: -10%;
        max-width: none;
        display: block;
    }
}

/* =========================================
   Menu du footer centré sur mobile
   ========================================= */

@media (max-width: 767px) {
    .et_pb_column_2_tb_footer .et_pb_text_2_tb_footer p {
        text-align: center !important;
    }

    .et_pb_column_2_tb_footer .et_pb_social_media_follow {
        justify-content: center !important;
    }
}

@media (max-width: 767px) {
    .et_pb_column_2_tb_footer .et_pb_social_media_follow {
        justify-content: center !important;
        text-align: center !important;
        display: flex !important;
    }
}

/* =========================================
   Visuel violet derrière la section Services
   ========================================= */
@media (max-width: 767px) {
    .et_pb_section_1 {
        background-size: 400% auto !important;
        background-repeat: no-repeat !important;
        background-position: center bottom !important;
    }
}

/* =========================================
   RETRAIT DU PADDING AVANT LE PICTO FACEBOOK DANS LE FOOTER
   ========================================= */
.et_pb_social_media_follow_0_tb_footer {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* =========================================
   DÉCOMPTE DE TEMPS (WEBINAIRE AUTOMATISATION)
   ========================================= */

#timer-row .et_pb_column_1 {
    padding-top: 15px !important;
}
.et_pb_countdown_timer_0 .value {
    font-weight: 700 !important;
    font-size: 32px !important;
}
.et_pb_countdown_timer_0 .label {
    font-weight: 700 !important;
}
/* --- Réduction des marges internes du bandeau vert du timer row --- */
.et_pb_section_1 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.et_pb_section_1 #timer-row {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.et_pb_countdown_timer_0 .days .value::first-letter {
    font-size: 0 !important;
    line-height: 0 !important;
}
/* --- Suppression des marges/padding internes sur mobile --- */
@media (max-width: 767px) {
    .et_pb_section_1 {
        padding-bottom: 0 !important;
    }
    .et_pb_row_2 {
        padding-top: 0 !important;
    }
    #timer-row .et_pb_column_1 {
        padding-top: 5px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    .et_pb_section_1 .et_pb_column_2 {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    .et_pb_countdown_timer_0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .et_pb_countdown_timer_0 .section {
        padding: 4px 6px !important;
        margin: 0 2px !important;
    }
    .et_pb_countdown_timer_0 .value {
        font-size: clamp(20px, 8vw, 28px) !important;
    }
    .et_pb_countdown_timer_0 .label {
        font-size: clamp(9px, 3vw, 12px) !important;
    }
    .et_pb_countdown_timer_0 .days .label {
        visibility: hidden !important;
        position: relative !important;
    }
    .et_pb_countdown_timer_0 .days .label::after {
        content: "J";
        visibility: visible !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 0 !important;
    }
    .et_pb_text_1 .et_pb_text_inner p {
        text-align: center !important;
    }
    .et_pb_countdown_timer_0 .et_pb_countdown_timer_container {
        justify-content: center !important;
    }
}
/* --- Tablette --- */
@media (min-width: 768px) and (max-width: 980px) {
    .et_pb_countdown_timer_0 .value {
        font-size: clamp(24px, 4vw, 32px) !important;
    }
    .et_pb_countdown_timer_0 .label {
        font-size: clamp(11px, 1.5vw, 14px) !important;
    }
}
/* Desktop & tablette : bloc gauche aligné à droite, bloc droit aligné à gauche */
@media (min-width: 768px) {
    .et_pb_text_1 .et_pb_text_inner p {
        text-align: right !important;
    }
    .et_pb_countdown_timer_0 .et_pb_countdown_timer_container {
        justify-content: flex-start !important;
    }
}

/* =========================================
   BOUTON WEBINAIRE INSCRIPTION
   ========================================= */
@media (max-width: 767px) {
  .fluentform_wrapper_3 .ff-btn-submit,
  .fluentform_wrapper_7 .ff-btn-submit {
    font-size: 14px !important;
    padding: 10px 16px !important;
  }
}

/* =========================================
   BANDEAU ROUGE WEBINAIRE AUTOMATISATION INSCRIPTION
   Pages : 2321, 2326, 2693, 364, 371
   ========================================= */

.page-id-2321 .et_pb_section_0,
.page-id-2326 .et_pb_section_0,
.page-id-2693 .et_pb_section_0,
.page-id-364 .et_pb_section_0,
.page-id-371 .et_pb_section_0 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.page-id-2321 .et_pb_section_0 .et_pb_row_0,
.page-id-2326 .et_pb_section_0 .et_pb_row_0,
.page-id-2693 .et_pb_section_0 .et_pb_row_0,
.page-id-364 .et_pb_section_0 .et_pb_row_0,
.page-id-371 .et_pb_section_0 .et_pb_row_0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.page-id-2321 .et_pb_section_0 .et_pb_row_0 .et_pb_column_0,
.page-id-2326 .et_pb_section_0 .et_pb_row_0 .et_pb_column_0,
.page-id-2693 .et_pb_section_0 .et_pb_row_0 .et_pb_column_0,
.page-id-364 .et_pb_section_0 .et_pb_row_0 .et_pb_column_0,
.page-id-371 .et_pb_section_0 .et_pb_row_0 .et_pb_column_0 {
    padding-bottom: 0 !important;
}

.page-id-2321 .et_pb_section_0 .et_pb_text_0,
.page-id-2326 .et_pb_section_0 .et_pb_text_0,
.page-id-2693 .et_pb_section_0 .et_pb_text_0,
.page-id-364 .et_pb_section_0 .et_pb_text_0,
.page-id-371 .et_pb_section_0 .et_pb_text_0 {
    margin-bottom: 0 !important;
}

.page-id-2321 .et_pb_section_0 .et_pb_code_0,
.page-id-2326 .et_pb_section_0 .et_pb_code_0,
.page-id-2693 .et_pb_section_0 .et_pb_code_0,
.page-id-364 .et_pb_section_0 .et_pb_code_0,
.page-id-371 .et_pb_section_0 .et_pb_code_0 {
    display: none !important;
}

@media (max-width: 767px) {
    .page-id-2321 .et_pb_text_0 .et_pb_text_inner p,
    .page-id-2326 .et_pb_text_0 .et_pb_text_inner p,
    .page-id-2693 .et_pb_text_0 .et_pb_text_inner p,
    .page-id-364 .et_pb_text_0 .et_pb_text_inner p,
    .page-id-371 .et_pb_text_0 .et_pb_text_inner p {
        white-space: normal !important;
        font-size: 16px !important;
    }
}

/* =========================================
   ACCUEIL / SERVICES - alignement en bas
   ========================================= */
#services .et_pb_row_2 {
    display: flex !important;
    align-items: flex-end !important;
}


/* =========================================
   ACCUEIL / ILS NOUS ONT FAIT CONFIANCE - logo centré verticalement
   ========================================= */
#section-logos-confiance .et_pb_column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =========================================
   SERVICES - pastille et titre sur tablette et mobile
   ========================================= */
@media (max-width: 980px) {
    #services .et_pb_row_2 {
        display: block !important;
    }

    #services .et_pb_row_2 .et_pb_column_3 {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    #services .et_pb_row_2 .et_pb_column_3 .et_pb_image_wrap {
        display: flex !important;
        justify-content: center !important;
    }

    #services .et_pb_row_2 .et_pb_column_4 {
        width: 100% !important;
        text-align: center !important;
    }

    #services .et_pb_row_2 .et_pb_column_4 h2 {
        text-align: center !important;
    }
}

/* =========================================
   SERVICES - voile violet sur le fond sur tablette et mobile
   ========================================= */
@media (max-width: 980px) {
    #services {
        position: relative;
    }
    #services::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: rgba(111, 33, 90, 0.75);
        pointer-events: none;
        z-index: 0;
    }
    #services > .et_pb_row {
        position: relative;
        z-index: 1;
    }
}

/* =========================================
   MOT DÉCORATIF LONG (texte plus long, contraint dans le conteneur)
   ========================================= */

.section-decorative .mot-decoratif-long {
    position: relative;
    text-align: left;
    margin-bottom: 0px;
    z-index: 2;
    width: 100%;
    overflow: hidden;
}

.section-decorative .mot-decoratif-long p {
    margin: 0;
    font-family: 'Good Times Rg', sans-serif !important;
    font-size: clamp(40px, 10vw, 175px);
    line-height: 1;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 0.5px #D4ABD1;
    width: 100%;
    overflow: hidden;
}

/* ===== TABLETTE ===== */
@media (min-width: 768px) and (max-width: 980px) {
    .section-decorative .mot-decoratif-long p {
        font-size: clamp(40px, 11vw, 190px);
    }
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
    .section-decorative .mot-decoratif-long {
        margin-bottom: -15px;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    .section-decorative .mot-decoratif-long p {
        font-size: clamp(20px, 11vw, 52px);
        letter-spacing: 0.03em;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
}


/* =========================================
   MONTAGE DE VISUELS IMMOBILE SUR CELLULAIRE
   ========================================= */
@media (max-width: 767px) {
  .et_pb_image {
    transform: none !important;
    transition: none !important;
  }

  .et_pb_image img {
    transform: none !important;
  }
}

/* Boutons - pas de soulignement */
.et_pb_text a.et_pb_button,
.entry-content a.et_pb_button,
a.et_pb_button {
  text-decoration: none !important;
}


/* =========================================
   MOT DÉCORATIF BLOGUE (outline épais violet)
   ========================================= */

.section-decorative .mot-decoratif-blogue {
    position: relative;
    text-align: left;
    margin-bottom: 0px;
    z-index: 2;
    width: 100%;
    overflow: hidden;
}

.section-decorative .mot-decoratif-blogue p {
    margin: 0;
    font-family: 'Good Times Rg', sans-serif !important;
    font-size: clamp(40px, 10vw, 175px) !important;
    line-height: 1;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1.5px #6F215A;
    opacity: 0.15;
    width: 100%;
    overflow: hidden;
}

/* ===== TABLETTE ===== */
@media (min-width: 768px) and (max-width: 980px) {
    .section-decorative .mot-decoratif-blogue p {
        font-size: clamp(40px, 11vw, 190px) !important;
    }
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
    .section-decorative .mot-decoratif-blogue .et_pb_text_inner p {
        font-size: clamp(30px, 14vw, 55px) !important;
        -webkit-text-stroke: 1.5px #6F215A !important;
        opacity: 0.15 !important;
        white-space: nowrap;
        letter-spacing: 0.03em;
    }
}

/* =========================================
   PAGES TEL QUE VU - image alignée en haut
   ========================================= */
.row-tel-que-vu {
    align-items: flex-start !important;
}

/* Tablette et mobile - colonnes empilées en restant en flex */
@media (max-width: 980px) {
    .row-tel-que-vu {
        flex-wrap: wrap !important;
    }
    .row-tel-que-vu .et_pb_column_1_3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    .row-tel-que-vu .et_pb_column_2_3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* =========================================
   BOUTON FORMATIONS PAGE ACADÉMIE
   ========================================= */
.bouton-formation {
    font-size: 16px !important;
}

/* ========================================
   Couleur du lien actif - menu mobile
   ======================================== */
.et_mobile_menu .menu-item.current-menu-item a,
.et_mobile_menu .menu-item.current_page_item a {
    color: #6F215A !important;
}

/* ========================================
   Titre H3 précédé du chiffre dans une bulle
   ======================================== */
.etape-titre {
  display: flex;
  align-items: center;  /* centre verticalement le cercle et le titre */
  gap: 15px;            /* espace entre le cercle et le titre */
}

.etape-titre svg {
  flex-shrink: 0;       /* empêche le cercle de s'écraser si le titre est long */
}

.etape-titre h3 {
  margin: 0;            /* enlève la marge par défaut du h3 qui casserait l'alignement */
}