/* ============================================================
   GLOBAL.CSS — Correctifs thème fred-colantonio
   Override des styles injectés par Hello Elementor / WordPress
   ============================================================ */

/* ============================================================
   FONT — Wave Block (locale)
   ============================================================ */
@font-face {
    font-family: "Wave Block";
    src: url("../fonts/WAVEBLOCK.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Alias: tout élément qui utilise "Permanent Marker" charge Wave Block à la place */
@font-face {
    font-family: "Permanent Marker";
    src: url("../fonts/WAVEBLOCK.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* Fix: Hello Elementor impose flex-wrap:wrap sur les menus nav */
.elementor-nav-menu--main .elementor-nav-menu {
    flex-wrap: nowrap !important;
}

/* ============================================================
   LANG SWITCHER — Polylang [fc_lang_switcher]
   ============================================================ */
.fc-lang-switcher {
    list-style: none;
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0;
    align-items: center;
}
.fc-lang-switcher li { display: inline-flex; align-items: center; }
.fc-lang-switcher li a {
    text-decoration: none;
    font-family: var(--fc-font-heading);
    font-size: var(--fc-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--fc-white);
    opacity: 0.7;
    transition: var(--fc-transition);
}
.fc-lang-switcher li.current-lang a { opacity: 1; }
.fc-lang-switcher li a:hover { opacity: 1; }

/* ============================================================
   HEADER — Barre flottante
   ============================================================ */

.elementor-location-header,
.elementor-element-fc-header-section {
    background: transparent !important;
}

.elementor-element-fc-header-section {
    padding-top: 24px !important;
    padding-bottom: 0 !important;
}

.elementor-element-fc-header-section.fc-header-scrolled {
    padding-top: 0 !important;
    background-color: #FFFAF1 !important;
    transition: padding 0.25s ease, background-color 0.25s ease;
}

.elementor-element-fc-header-section.fc-header-scrolled .elementor-285 .elementor-element.elementor-element-fc-header-row,
.fc-header-scrolled .elementor-element.elementor-element-fc-header-row {
    max-width: 100% !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.elementor-285 .elementor-element.elementor-element-fc-header-col-wrap > .elementor-element-populated {
    margin-top: 0 !important;
    padding: 0 !important;
}

.elementor-285 .elementor-element.elementor-element-fc-header-row {
    max-width: 1112px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-color: #FFFAF1 !important;
    box-shadow: 0px 4px 34px rgba(0, 0, 0, 0.15) !important;
}

.elementor-285 .elementor-element.elementor-element-fc-header-row > .elementor-container {
    min-height: 73px !important;
}

.elementor-285 .elementor-element.elementor-element-fc-logo-img img {
    transform: rotate(-14.81deg) !important;
    top: 20px !important;
    transition: transform 0.25s ease, width 0.25s ease, top 0.25s ease;
}

.fc-header-scrolled .elementor-element.elementor-element-fc-logo-img img {
    top: 65px !important;
    transform: rotate(-14.81deg) scale(0.35) !important;
    transform-origin: top center !important;
}

.elementor-285 .elementor-element.elementor-element-fc-nav-menu .elementor-nav-menu .elementor-item {
    font-family: "Courier Prime", monospace !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

@media (min-width: 768px) {
    .elementor-285 .elementor-element.elementor-element-fc-col-cta {
        width: 14% !important;
    }
    .elementor-285 .elementor-element.elementor-element-fc-col-nav {
        width: 68% !important;
    }
}

.elementor-285 .elementor-element.elementor-element-fc-btn-connectons .elementor-button {
    font-family: "Courier Prime", monospace !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    padding: 8px 16px !important;
}







/* ============================================================
   HOMEPAGE — Section "Connectons" — Champs du formulaire (w7b1form)
   Problème: background transparent sur front-end → champ invisible sur fond sombre
   Fix: fond blanc comme configuré dans l'éditeur Elementor
   ============================================================ */
.elementor-6 .elementor-element.elementor-element-w7b1form .elementor-field-group .elementor-field:not(.elementor-select-wrapper) {
    background-color: #ffffff !important;
    color: #253036 !important;
}
.elementor-6 .elementor-element.elementor-element-w7b1form .elementor-field-group .elementor-select-wrapper select {
    background-color: #ffffff !important;
    color: #253036 !important;
}











/* ============================================================
   HOMEPAGE — Section Stats "DEFY THE ODDS"
   Split technique : s1 montre la moitié haute, s2 la moitié basse.
   Le JS positionDefyWatermark() calcule les top dynamiquement.
   ============================================================ */

/* overflow: hidden sur les deux sections = chaque section clippe
   sa portion du texte, ensemble ils forment un seul watermark */
.elementor-element-s2a3b4c5,
.elementor-element-s2b3c4d5 {
    overflow: hidden !important;
}

/* ============================================================
   HOMEPAGE — Section "Travaillez avec Fred" — Alignement boutons en bas
   Technique : flex-direction: column sur le wrap + margin-top: auto sur le btn
   ============================================================ */
.elementor-element-c5c1card1 .elementor-widget-wrap,
.elementor-element-c5d1card2 .elementor-widget-wrap,
.elementor-element-c5e1card3 .elementor-widget-wrap,
.elementor-element-c5f1card4 .elementor-widget-wrap {
    flex-direction: column !important;
}

.elementor-element-w5c3btn,
.elementor-element-w5d3btn,
.elementor-element-w5e3btn,
.elementor-element-w5f3btn {
    margin-top: auto !important;
}

/* ============================================================
   HOMEPAGE — Section "Apprenez avec Fred"
   Boutons-tags (Regarder / Écouter / Lire) → fond crème, texte sombre
   Override du global .elementor-widget-button qui impose l'accent color
   ============================================================ */
.elementor-6 .elementor-element.elementor-element-19e4682 .elementor-button,
.elementor-6 .elementor-element.elementor-element-09593f9 .elementor-button,
.elementor-6 .elementor-element.elementor-element-a66102d .elementor-button,
.elementor-6 .elementor-element.elementor-element-787bf68 .elementor-button,
.elementor-6 .elementor-element.elementor-element-039bf32 .elementor-button,
.elementor-6 .elementor-element.elementor-element-2e2a550 .elementor-button,
.elementor-6 .elementor-element.elementor-element-ee4c407 .elementor-button,
.elementor-6 .elementor-element.elementor-element-20eb671 .elementor-button,
.elementor-6 .elementor-element.elementor-element-1d59068 .elementor-button {
    background-color: #fffaf1 !important;
    color: #253036 !important;
}

/* ============================================================
   GRAIN TEXTURE — Classe utilitaire .fc-grain
   Usage Elementor : Advanced > CSS Classes → "fc-grain"
   Fonctionne sur fonds clairs et fonds sombres.
   ============================================================ */

.fc-grain {
    position: relative;
    isolation: isolate;
}

.fc-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 250px 250px;
    background-repeat: repeat;
    opacity: 0.09;
    pointer-events: none;
    z-index: 1;
}

/* Le contenu Elementor passe au-dessus du grain */
.fc-grain > .elementor-container,
.fc-grain > .elementor-column-wrap,
.fc-grain > .e-con-inner {
    position: relative;
    z-index: 2;
}

/* (NB : le grain page-level via body::before a été retiré — la
   texture est désormais gérée par les overlays Elementor au niveau
   section, pour que le client puisse l'éditer dans la sidebar
   Elementor. Voir background_overlay_image dans le builder Python.) */

/* ============================================================
   EN HEADER (template 2110) — miroir exact des styles .elementor-285
   (Polylang free : le header EN est un template séparé, mêmes overrides)
   ============================================================ */
.elementor-element-fc-header-section.fc-header-scrolled .elementor-2110 .elementor-element.elementor-element-fc-header-row {
    max-width: 100% !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.elementor-2110 .elementor-element.elementor-element-fc-header-col-wrap > .elementor-element-populated {
    margin-top: 0 !important;
    padding: 0 !important;
}
.elementor-2110 .elementor-element.elementor-element-fc-header-row {
    max-width: 1112px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-color: #FFFAF1 !important;
    box-shadow: 0px 4px 34px rgba(0, 0, 0, 0.15) !important;
}
.elementor-2110 .elementor-element.elementor-element-fc-header-row > .elementor-container {
    min-height: 73px !important;
}
.elementor-2110 .elementor-element.elementor-element-fc-logo-img img {
    transform: rotate(-14.81deg) !important;
    top: 20px !important;
    transition: transform 0.25s ease, width 0.25s ease, top 0.25s ease;
}
.elementor-2110 .elementor-element.elementor-element-fc-nav-menu .elementor-nav-menu .elementor-item {
    font-family: "Courier Prime", monospace !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}
@media (min-width: 768px) {
    .elementor-2110 .elementor-element.elementor-element-fc-col-cta {
        width: 14% !important;
    }
    .elementor-2110 .elementor-element.elementor-element-fc-col-nav {
        width: 68% !important;
    }
}
.elementor-2110 .elementor-element.elementor-element-fc-btn-connectons .elementor-button {
    font-family: "Courier Prime", monospace !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    padding: 8px 16px !important;
}

/* EN header (2110) — logo qui rétrécit au scroll (miroir du comportement FR) */
.fc-header-scrolled .elementor-element.elementor-element-fc-logo-img.elementor-element-fc-logo-img img {
    top: 65px !important;
    transform: rotate(-14.81deg) scale(0.35) !important;
    transform-origin: top center !important;
}

/* ============================================================
   Cartes Thématiques (FR post 21) / Topics (EN post 60)
   Fin de l'effet "escalier" : titres à hauteur égale + boutons alignés en bas.
   Sections : dd3647a/a9f9f96 (FR), cf45ba0/57466e9 (EN)
   ============================================================ */
.elementor-element-dd3647a .elementor-column .elementor-widget-wrap,
.elementor-element-a9f9f96 .elementor-column .elementor-widget-wrap,
.elementor-element-cf45ba0 .elementor-column .elementor-widget-wrap,
.elementor-element-57466e9 .elementor-column .elementor-widget-wrap {
    display: flex;
    flex-direction: column;
}
.elementor-element-dd3647a .elementor-widget-button,
.elementor-element-a9f9f96 .elementor-widget-button,
.elementor-element-cf45ba0 .elementor-widget-button,
.elementor-element-57466e9 .elementor-widget-button {
    margin-top: auto !important;
}
@media (min-width: 768px) {
    /* FR : titres jusqu'à 3 lignes */
    .elementor-element-dd3647a .elementor-heading-title,
    .elementor-element-a9f9f96 .elementor-heading-title {
        min-height: 144px;
    }
    /* EN : titres sur 2 lignes */
    .elementor-element-cf45ba0 .elementor-heading-title,
    .elementor-element-57466e9 .elementor-heading-title {
        min-height: 108px;
    }
}

/* ============================================================
   Pages pays — fond crème texturé (grain) : Canada (2238 FR / 2249 EN),
   Angleterre/UK (2240 FR / 2250 EN). Réutilise le grain de .fc-grain.
   ============================================================ */
.elementor-2238 .elementor-top-section, .elementor-2240 .elementor-top-section,
.elementor-2249 .elementor-top-section, .elementor-2250 .elementor-top-section { position: relative; isolation: isolate; }
.elementor-2238 .elementor-top-section::after, .elementor-2240 .elementor-top-section::after,
.elementor-2249 .elementor-top-section::after, .elementor-2250 .elementor-top-section::after {
    content: ''; position: absolute; inset: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 250px 250px; background-repeat: repeat;
    opacity: 0.09; pointer-events: none; z-index: 1;
}
.elementor-2238 .elementor-top-section > .elementor-container, .elementor-2240 .elementor-top-section > .elementor-container,
.elementor-2249 .elementor-top-section > .elementor-container, .elementor-2250 .elementor-top-section > .elementor-container { position: relative; z-index: 2; }