/* 
Theme Name:     Child by GSF
Theme URI:      https://graphicstudiofunk.ch
Description:    Theme Child GSF
Author:         GRAPHIC STUDIOFUNK  
Version:        4
Template: hello-elementor
*/

/* ====================== */
/* -- FONT V2 -- */
/* ====================== */

@font-face {
      font-family: "Inter-Tight-Variable"; /* <-- Fonte a modifier, ainsi que son URL */
      src: url("/wp-content/fonts/Inter-Tight-Variable.ttf") format("truetype");
      font-weight: 100 900; /* <-- a modifier */
      font-style: normal;
      font-display: block; /* Empêche le flash de la police système */
}

@font-face {
      font-family: "Roboto-Serif-Variable"; /* <-- Fonte a modifier, ainsi que son URL */
      src: url("/wp-content/fonts/Roboto-Serif-Variable.ttf") format("truetype");
      font-weight: 300 700; /* <-- a modifier */
      font-style: normal;
      font-display: block; /* Empêche le flash de la police système */
}

@font-face {
      font-family: "Roboto-Serif-Variable"; /* <-- Fonte a modifier, ainsi que son URL */
      src: url("/wp-content/fonts/Roboto-Serif-Italic-Variable.ttf") format("truetype");
      font-weight: 300 700; /* <-- a modifier */
      font-style: italic; /* <-- a modifier */
      font-display: block; /* Empêche le flash de la police système */
}

:root {
      /* Repli pour "Inter-Tight-Variable" (Sans-serif) <-- a modifier */
      --gsf-fallback-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

      /* Repli pour "Roboto-Serif-Variable" (Serif) <-- a modifier */
      --gsf-fallback-serif: Georgia, "Times New Roman", serif;

      /********** <-- A modifier dans le fichier fonctions.php (Font Elementor Perso) les fontes "preload" */

      /* Application finale */
      --gsf-font-A: "Inter-Tight-Variable", var(--gsf-fallback-sans); /* <-- Fonte a modifier */
      --gsf-font-B: "Roboto-Serif-Variable", var(--gsf-fallback-serif); /* <-- Fonte a modifier */

      --gsf-font-role-ui: var(--gsf-font-A); /* <-- action possible de changement - inversion */
      --gsf-font-role-reading: var(--gsf-font-B); /* <-- action possible de changement - inversion */

      /* --- ECHELLE TYPOGRAPHIQUE HAUTE AMPLITUDE --- */
      /* Base Mobile: 16px | Base Desktop: 18px */

      --gsf-size-small: clamp(0.8rem, 0.76rem + 0.17vw, 0.9375rem);
      --gsf-size-body: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);

      --gsf-size-h6: clamp(1.2rem, 1.14rem + 0.26vw, 1.35rem);
      --gsf-size-h5: clamp(1.4rem, 1.31rem + 0.39vw, 1.62rem);
      --gsf-size-h4: clamp(1.6rem, 1.46rem + 0.61vw, 1.95rem);

      --gsf-size-h3: clamp(1.85rem, 1.4rem + 2.01vw, 3rem);
      --gsf-size-h2: clamp(2.25rem, 1.56rem + 3.04vw, 4rem);
      --gsf-size-h1: clamp(2.6rem, 1.66rem + 4.17vw, 4.5rem);

      --gsf-size-display: clamp(3.2rem, 1.63rem + 6.96vw, 6.4rem);
      --gsf-size-display-plus: clamp(4.5rem, 2.54rem + 8.7vw, 8.5rem);
}

/* Activation des césures automatiques */
h1,
h2,
h3,
.gsf-display {
      hyphens: auto;
      -webkit-hyphens: auto;
      word-break: break-word; /* Sécurité pour les anciens navigateurs */
}
/* Classe utilitaire pour les titres XXL */
.gsf-display {
      font-family: var(--gsf-font-role-ui);
      font-size: var(--gsf-size-display); /* Utilise votre variable XXL */
      line-height: 1.1;
      letter-spacing: -0.02em;
      hyphens: auto; /* Active la césure automatique pour ce style */
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
      font-family: var(--gsf-font-role-ui);
}

/* Le style et la graisse via Elementor */
p,
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
      font-family: var(--gsf-font-role-reading);
      font-size: var(--gsf-size-body);
}

/* Force l'italique uniquement dans les zones de texte */
p em, p i, 
h1 em, h1 i, 
h2 em, h2 i, 
h3 em, h3 i,
.gsf-italique {
    font-style: italic !important;
}

/* Force le gras */
strong, b {
    font-weight: 700;
}

/* Espacement titres paragraphes */
h1,
h2,
h3,
h4,
h5,
h6 {
      margin-bottom: 0.5em;
      margin-top: 1.8em;
}
h1:first-child {
      margin-top: 0;
}



/* ====================== */
/* -- CONTAINERS V2 -- */
/* ====================== */

/* ======================
   1. VARIABLES ECHELLE SPATIALE (WIDGETS)
   A utiliser pour :
   - Marges entre widgets
   - Gap dans flexbox/grid
   Exemple : var(--gsf-space-medium)
   ====================== */

:root {
      /* --- ÉCHELLE SPATIALE --- */
      --gsf-space-extrasmall: 0.5rem;
      --gsf-space-small: 0.75rem;
      --gsf-space-medium: 1.5rem;
      --gsf-space-large: 3rem;
      --gsf-space-extralarge: 4rem;
      --gsf-space-xxl: clamp(4rem, 10vh, 8rem); /* de 64px à 128px */

      /* --- STRUCTURE --- */
      --gsf-max-width: 1280px;

      /* Padding LARGE */
      --gsf-container-large-H: clamp(2rem, 5vh, 6rem);  /* Horizontal */
      --gsf-container-large-L: clamp(0.75rem, 2.5vw, 2.5rem);  /* Latéral */

      /* Padding MEDIUM */
      --gsf-container-medium-H: clamp(1rem, 4vh, 3rem); /* Horizontal */
      --gsf-container-medium-L: clamp(0.75rem, 2.5vw, 2.5rem);/* Latéral */
}

/* ======================
   4. CLASSES CSS
   ====================== */

/* Section Full sans padding LATÉRAL */
.section-full-no-padding-L-gsf {
      width: 100%;
      padding: var(--gsf-space-large) 0;
}

/* Section Full sans padding HORIZONTAL */
.section-full-no-padding-H-gsf {
      width: 100%;
      padding: 0 var(--gsf-container-large-L);
}

/* Section Full LARGE */
.section-full-large-gsf {
      width: 100%;
      padding: var(--gsf-container-large-H) var(--gsf-container-large-L);
}

/* Section Full MEDIUM */
.section-full-medium-gsf {
      width: 100%;
      padding: var(--gsf-container-medium-H) var(--gsf-container-medium-L);
}

/* Container Full LARGE */
.container-full-large-gsf {
      width: 100%;
      margin-inline: auto;
      padding: var(--gsf-container-large-H) var(--gsf-container-medium-L);
}

/* Container Box LARGE */
.container-box-large-gsf {
      width: 100%;
      max-width: var(--gsf-max-width);
      margin-inline: auto;
      padding: var(--gsf-container-large-H) var(--gsf-container-medium-L);
}

/* --- CONTAINERS INTERNES --- */

.container-large-gsf {
      padding: var(--gsf-space-large);
}

.container-medium-gsf {
      padding: var(--gsf-space-medium);
}

.container-small-gsf {
      padding: var(--gsf-space-small);
}



/* ======================
   FORMULAIRES
   ====================== */
/* Empêcher le zoom auto sur les champs de formulaire (Mobile) */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }
}



/* ======================
   HEADER
   ====================== */

/* --- NETTOYAGE DES MARGES PAR DÉFAUT --- */
body {
      margin: 0 !important;
}

.elementor-section:first-of-type {
      margin-top: 0 !important;
}

/* --- HEADER FIXE --- */
#mon-header-sticky {
      position: fixed !important;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 999;
      transition:
            transform 0.3s ease-out,
            padding 0.3s ease-out,
            background-color 0.3s ease,
            box-shadow 0.3s ease;
      will-change: transform, padding;
      box-shadow: none;
}

/* --- ÉTAT SHRINK (RÉDUIT) --- */
#mon-header-sticky.header-shrink {
      padding-top: 10px !important; 
      padding-bottom: 10px !important;
      padding-left: var(--gsf-container-medium-L) !important;
      padding-right: var(--gsf-container-medium-L) !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* --- ÉTAT MASQUÉ (HIDE) --- */
#mon-header-sticky.header-hidden {
      transform: translateY(-100%);
      box-shadow: none;
}

/* --- LOGO FLUIDE --- */
.mon-logo-sticky .elementor-widget-container {
      display: flex;
      justify-content: flex-start;
}

.mon-logo-sticky img {
      transition: transform 0.3s ease-out !important;
      transform-origin: left center;
      will-change: transform;
}

/* --- RÉDUCTION DU LOGO (RESPONSIVE) --- */
#mon-header-sticky.header-shrink .mon-logo-sticky img {
      transform: scale(0.6);
}

@media (max-width: 1024px) {
      #mon-header-sticky.header-shrink .mon-logo-sticky img {
            transform: scale(0.75);
      }
}

@media (max-width: 767px) {
      #mon-header-sticky.header-shrink .mon-logo-sticky img {
            transform: scale(0.85);
      }
}


/* ======================
   BOUTON HAMBURGER
   ====================== */

/* Annuler les styles globaux */
.elementor-widget-n-menu .e-n-menu-toggle,
.elementor-widget-n-menu .e-n-menu-toggle:hover,
.elementor-widget-n-menu .e-n-menu-toggle:focus {
      background-color: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      box-shadow: none !important;
}
.elementor-widget-n-menu .e-n-menu-toggle span {
      padding: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
}




/* ======================
   MENU DÉROULANT
   ====================== */

/* --- CORRECTION DÉCALAGE SELON BREAKPOINTS --- */
@media (min-width: 1366px) {
      #mon-header-sticky.header-shrink .e-n-menu-wrapper {
            transform: translateY(0px) !important;
      }
}
@media (min-width: 1025px) and (max-width: 1365px) {
      #mon-header-sticky.header-shrink .e-n-menu-wrapper {
            transform: translateY(0px) !important;
      }
}
@media (min-width: 768px) and (max-width: 1024px) {
      #mon-header-sticky.header-shrink .e-n-menu-wrapper {
            transform: translateY(0px) !important;
      }
}
@media (max-width: 767px) {
      #mon-header-sticky.header-shrink .e-n-menu-wrapper {
            transform: translateY(0px) !important;
      }
}

/* Padding et couleur du menu déroulant */
.elementor-widget-n-menu .e-n-menu[data-layout="dropdown"] .e-n-menu-toggle[aria-expanded="true"] + .e-n-menu-wrapper {
      padding-top: 25px;
      padding-bottom: 100vh;
      background: #707070;
}



/* ======================
   FOOTER
   ====================== */

/* FOOTER – Pousser le footer en bas de page */

:root {
   /* Hauteur moyenne de votre footer */
   --footer-height: 500px; 
}

body {
    min-height: 100vh; 
    position: relative;
    margin: 0;
    box-sizing: border-box; 
    padding-bottom: var(--footer-height);
}

.elementor-location-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--footer-height);
}