/*
Theme Name: ALXDESIGN Starter
Theme URI: https://alxdesign.com
Author: Alexandre Abdili
Author URI: https://alxdesign.com
Description: Thème enfant du starter ALXDESIGN basé sur Hello Elementor.
Version: 1.0.0
Template: hello-elementor
Text Domain: alxdesign-starter
*/

/* =========================================================
   ALXDESIGN STARTER — BASE CSS
   (Tokens + Typo + Utilitaires + Boutons + Breadcrumb)
   ========================================================= */

/* =========================
   TOKENS
========================= */

:root{
  --site-width: 1360px;
  --measure: 100ch;

  --c-primary:   var(--e-global-color-primary,   #C3E1E3);
  --c-secondary: var(--e-global-color-secondary, #03485F);
  --c-accent:    var(--e-global-color-accent,    #D86A69);
  --c-text:      var(--e-global-color-text,      #314F5B);

  --c-white: #fff;
  --c-black: #000;

  --ff-primary: var(--e-global-typography-primary-font-family, system-ui);
  --ff-text:    var(--e-global-typography-text-font-family, system-ui);

  --fs-h1: clamp(2.6rem, 5vw, 4.8rem);
  --fs-h2: clamp(2.1rem, 4vw, 3.6rem);
  --fs-h3: clamp(1.6rem, 2.4vw, 2.4rem);
  --fs-h4: clamp(1.3rem, 1.8vw, 1.7rem);
  --fs-h5: 1.125rem;
  --fs-h6: 1rem;

  --fs-p: 1.125rem;

  --lh-h1: 1.05;
  --lh-h2: 1.1;
  --lh-h3: 1.2;
  --lh-h4: 1.25;
  --lh-h5: 1.3;
  --lh-h6: 1.3;
  --lh-p: 1.6;
}

/* =========================
   BREAKPOINTS
========================= */

/*
Mobile        : ≤ 767px
Tablette      : 768px à 1024px
Desktop       : 1025px à 1599px
Écran large   : ≥ 1600px

Note :
--site-width: 1360px définit la largeur utile maximale du contenu.
Le breakpoint "écran large" sert aux ajustements de confort
et non à redéfinir la largeur principale du site.
*/

/* =========================
   RESET LÉGER
========================= */

*,
*::before,
*::after{
  box-sizing: border-box;
}

img,
svg,
video{
  max-width: 100%;
  height: auto;
}

/* =========================
   BASE
========================= */

body.alxdesign{
  font-family: var(--ff-text);
  color: var(--c-text);
}

/* =========================
   TYPOGRAPHIE — TEXTES
========================= */

body.alxdesign p,
body.alxdesign li{
  font-size: var(--fs-p);
  line-height: var(--lh-p);
}

body.alxdesign p{
  margin: 0 0 1em;
  max-width: var(--measure);
}

/* =========================
   TYPOGRAPHIE — TITRES
========================= */

body.alxdesign h1,
body.alxdesign h2,
body.alxdesign h3,
body.alxdesign h4,
body.alxdesign h5,
body.alxdesign h6{
  margin: 0 0 0.5em;
  font-family: var(--ff-primary);
  color: inherit;
  text-wrap: balance;
}

body.alxdesign h1{
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}

body.alxdesign h2{
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

body.alxdesign h3{
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

body.alxdesign h4{
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}

body.alxdesign h5{
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
}

body.alxdesign h6{
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
}

/* =========================
   LIENS
========================= */

body.alxdesign a{
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  transition: opacity 0.2s ease;
}

body.alxdesign a:hover{
  opacity: 0.75;
}

/* =========================
   UTILITAIRES
========================= */

body.alxdesign .container-max{
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Couleurs */

body.alxdesign .text-white{ color: var(--c-white); }
body.alxdesign .text-accent{ color: var(--c-accent); }

/* Font weight */

body.alxdesign .fw-300{ font-weight: 300; }
body.alxdesign .fw-500{ font-weight: 500; }
body.alxdesign .fw-700{ font-weight: 700; }

/* Helpers taille texte */

body.alxdesign .t-xs{ font-size: 0.75rem; }
body.alxdesign .t-sm{ font-size: 0.875rem; }
body.alxdesign .t-md{ font-size: 1rem; }
body.alxdesign .t-lg{ font-size: 1.125rem; }
body.alxdesign .t-xl{ font-size: 1.25rem; }
body.alxdesign .t-2xl{ font-size: 1.5rem; }

/* Helpers de scale */

body.alxdesign .scale-xs{ font-size: 0.85em; }
body.alxdesign .scale-sm{ font-size: 0.92em; }
body.alxdesign .scale-md{ font-size: 1em; }
body.alxdesign .scale-lg{ font-size: 1.08em; }
body.alxdesign .scale-xl{ font-size: 1.16em; }
body.alxdesign .scale-2xl{ font-size: 1.24em; }

/* =========================
   CONTENU RICHE
=========================
   Usage :
   - À appliquer sur les blocs contenant du contenu éditorial (WYSIWYG)
   - Typiquement : champs ACF (type WYSIWYG) injectés dans Elementor
   - Permet d’harmoniser paragraphes, listes, liens, etc.
   ========================= */

body.alxdesign .rich-content{
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  color: inherit;
}

body.alxdesign .rich-content p{
  margin-bottom: 1em;
}

body.alxdesign .rich-content a{
  color: var(--c-accent);
}

body.alxdesign .rich-content ul,
body.alxdesign .rich-content ol{
  margin: 0 0 1em 1.2em;
  padding: 0;
}

body.alxdesign .rich-content li{
  margin-bottom: 0.35em;
}

/* =========================
   ACCENT TYPO
========================= */

body.alxdesign .accent{
  color: var(--c-accent);
}

/* =========================
   BOUTONS (BASE NEUTRE)
========================= */

body.alxdesign .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 18px;
  min-height: 42px;

  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;

  text-decoration: none;
  border-radius: 6px;

  background: var(--c-primary);
  color: var(--c-black);

  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.alxdesign .btn:hover{
  opacity: 0.85;
}

body.alxdesign .btn-accent{
  background: var(--c-accent);
  color: var(--c-white);
}

body.alxdesign .btn-secondary{
  background: var(--c-secondary);
  color: var(--c-white);
}

body.alxdesign .btn-mini{
  padding: 6px 12px;
  min-height: auto;
  font-size: 0.85rem;
}

/* =========================
   FIL D’ARIANE
========================= */

body.alxdesign .fil-ariane{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

body.alxdesign .fil-ariane a{
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

body.alxdesign .fil-ariane a:hover{
  opacity: 1;
}

body.alxdesign .fil-ariane span{
  opacity: 0.6;
}

/* =========================
   RESPONSIVE — TABLETTE
========================= */

@media (max-width: 1024px){
  :root{
    --measure: 75ch;
  }

  body.alxdesign .container-max{
    padding-inline: 24px;
  }
}

/* =========================
   RESPONSIVE — MOBILE
========================= */

@media (max-width: 767px){
  :root{
    --fs-h1: clamp(2.2rem, 9vw, 3.2rem);
    --fs-h2: clamp(1.8rem, 7vw, 2.6rem);
    --fs-h3: clamp(1.45rem, 5.5vw, 2rem);
    --fs-h4: clamp(1.2rem, 4.5vw, 1.5rem);
    --fs-h5: 1.05rem;
    --fs-h6: 0.95rem;

    --fs-p: 1rem;
    --lh-p: 1.65;

    --measure: 100%;
  }

  body.alxdesign .container-max{
    padding-inline: 20px;
  }

  body.alxdesign p{
    max-width: 100%;
  }

  body.alxdesign .btn{
    width: 100%;
  }

  body.alxdesign .btn-mini{
    width: auto;
  }

  body.alxdesign .fil-ariane{
    font-size: 0.82rem;
    gap: 4px;
  }
}

/* =========================================================
   LAZYLOAD — GESTION DES IMAGES (LiteSpeed)
   =========================================================

   Ce starter utilise le lazyload global de LiteSpeed.

   Par défaut :
   → toutes les images sont chargées en différé (lazyload)

   Exceptions possibles via classes :

   .skip-lazy
   → à appliquer directement sur une image
   → exclut cette image du lazyload
   → usage : image critique (hero, above-the-fold)

   Exemple :
   <img class="skip-lazy" src="...">

   .no-lazy
   → à appliquer sur un conteneur
   → exclut toutes les images enfants du lazyload
   → usage : bloc complet (hero, slider, section visuelle)

   Exemple :
   <div class="no-lazy">
     <img src="...">
   </div>

   Bonnes pratiques :
   → ne PAS utiliser ces classes partout
   → uniquement si problème de chargement visible
   → priorité : images au-dessus de la ligne de flottaison

   Configuration liée :
   → LiteSpeed > Médias exclus
     - skip-lazy (image)
     - no-lazy (parent)

========================================================= */

/* =========================
   FORMULAIRES — BASE CF7
========================= */

body.alxdesign .form-grid{
  display: grid;
  gap: 22px;
}

body.alxdesign .form-field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.alxdesign .form-field--full{
  grid-column: 1 / -1;
}

body.alxdesign .form-field label{
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
}

/* Champs CF7 */
body.alxdesign .form-field input[type="text"],
body.alxdesign .form-field input[type="email"],
body.alxdesign .form-field input[type="tel"],
body.alxdesign .form-field input[type="url"],
body.alxdesign .form-field input[type="number"],
body.alxdesign .form-field input[type="date"],
body.alxdesign .form-field select,
body.alxdesign .form-field textarea{
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;

  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--c-text);

  background: var(--c-white);
  border: 1px solid color-mix(in srgb, var(--c-secondary) 18%, white);
  border-radius: 10px;
  box-shadow: none;
  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

body.alxdesign .form-field textarea{
  min-height: 170px;
  resize: vertical;
}

/* Placeholders */
body.alxdesign .form-field input::placeholder,
body.alxdesign .form-field textarea::placeholder{
  color: color-mix(in srgb, var(--c-text) 58%, white);
  opacity: 1;
}

/* Focus */
body.alxdesign .form-field input:focus,
body.alxdesign .form-field select:focus,
body.alxdesign .form-field textarea:focus{
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 16%, transparent);
}

/* CF7 wrappers */
body.alxdesign .form-field .wpcf7-form-control-wrap{
  display: block;
}

body.alxdesign .form-field .wpcf7-not-valid-tip{
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #b42318;
}

/* Messages globaux */
body.alxdesign .wpcf7 form .wpcf7-response-output{
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
}

body.alxdesign .wpcf7 form.sent .wpcf7-response-output{
  border: 1px solid color-mix(in srgb, #15803d 30%, white);
  background: color-mix(in srgb, #15803d 8%, white);
  color: #166534;
}

body.alxdesign .wpcf7 form.invalid .wpcf7-response-output,
body.alxdesign .wpcf7 form.unaccepted .wpcf7-response-output,
body.alxdesign .wpcf7 form.failed .wpcf7-response-output,
body.alxdesign .wpcf7 form.aborted .wpcf7-response-output,
body.alxdesign .wpcf7 form.spam .wpcf7-response-output{
  border: 1px solid color-mix(in srgb, #b42318 22%, white);
  background: color-mix(in srgb, #b42318 7%, white);
  color: #912018;
}

/* Bouton d’action */
body.alxdesign .form-actions{
  margin-top: 6px;
}

body.alxdesign .form-actions .wpcf7-spinner{
  margin: 0 0 0 10px;
  vertical-align: middle;
}

/* Harmonisation submit CF7 avec .btn */
body.alxdesign input[type="submit"].btn,
body.alxdesign button.btn{
  appearance: none;
  -webkit-appearance: none;
}

/* =========================
   RESPONSIVE — MOBILE
========================= */

@media (max-width: 767px){
  body.alxdesign .form-grid{
    gap: 18px;
  }

  body.alxdesign .form-field input[type="text"],
  body.alxdesign .form-field input[type="email"],
  body.alxdesign .form-field input[type="tel"],
  body.alxdesign .form-field input[type="url"],
  body.alxdesign .form-field input[type="number"],
  body.alxdesign .form-field input[type="date"],
  body.alxdesign .form-field select,
  body.alxdesign .form-field textarea{
    min-height: 50px;
    padding: 13px 14px;
    border-radius: 9px;
  }

  body.alxdesign .form-field textarea{
    min-height: 150px;
  }
}

/* =========================================================
   FIN — BASE STARTER
   Les styles spécifiques au projet commencent ci-dessous
   ========================================================= */