/*
Theme Name:   LCDD Child
Description:  Thème enfant Hello Elementor — Le Coin du Digital. Base rem, échelle typographique (nombre d'or), variables de design.
Author:       Le Coin du Digital
Author URI:   https://lecoindudigital.fr/
Template:     hello-elementor
Version:      2.0.0
Text Domain:  lcdd-child
*/

/* ==========================================================================
   1. Base rem — 1rem = 20px desktop
   Breakpoints alignés sur Elementor (tablette 1024px / mobile 767px).
   En % pour respecter la taille de police choisie dans le navigateur
   (rendu identique aux valeurs px avec un navigateur réglé à 16px).
   ========================================================================== */
html { font-size: 125%; }                                    /* 20px */
@media (max-width: 1024px) { html { font-size: 112.5%; } }   /* 18px */
@media (max-width: 767px)  { html { font-size: 106.25%; } }  /* 17px */
@media (max-width: 480px)  { html { font-size: 100%; } }     /* 16px */

/* ==========================================================================
   2. Variables
   Utilisables dans Elementor via l'unité « Custom » : var(--fs-h1), var(--space-l)…
   ========================================================================== */
:root {
  /* Typographie — nombre d'or (1,618) à partir de 1rem
     Desktop : texte 20px · h3 32px · h2 52px · h1 85px */
  --fs-small: 0.8rem;
  --fs-body:  1rem;
  --fs-h6:    1rem;
  --fs-h5:    1.125rem;
  --fs-h4:    1.272rem;   /* √φ */
  --fs-h3:    1.618rem;   /* φ  */
  --fs-h2:    2.618rem;   /* φ² */
  --fs-h1:    4.236rem;   /* φ³ */

  --lh-body:    1.6;
  --lh-heading: 1.15;

  /* Espacements */
  --space-2xs: 0.25rem;   /*   5px */
  --space-xs:  0.5rem;    /*  10px */
  --space-s:   1rem;      /*  20px */
  --space-m:   1.5rem;    /*  30px */
  --space-l:   2.5rem;    /*  50px */
  --space-xl:  4rem;      /*  80px */
  --space-2xl: 6rem;      /* 120px */
  --section-y: var(--space-xl);

  /* Rayons, ombres, transitions */
  --radius-s: 0.25rem;
  --radius-m: 0.5rem;
  --radius-l: 1rem;
  --radius-full: 999px;
  --shadow: 0 0.25rem 1.25rem rgb(0 0 0 / 0.08);
  --transition: 0.25s ease;
}

/* Le ratio 1,618 est trop fort sur petit écran : on le resserre.
   Les tailles restent en rem, elles suivent donc aussi la base. */
@media (max-width: 1024px) {
  :root {
    --fs-h1: 3.4rem;     /* ≈ 61px */
    --fs-h2: 2.3rem;     /* ≈ 41px */
    --fs-h3: 1.5rem;     /* ≈ 27px */
  }
}
@media (max-width: 767px) {
  :root {
    --fs-h1: 2.618rem;   /* ≈ 45px */
    --fs-h2: 2rem;       /* ≈ 34px */
    --fs-h3: 1.4rem;     /* ≈ 24px */
    --fs-h4: 1.2rem;
    --section-y: var(--space-l);
  }
}
@media (max-width: 480px) {
  :root {
    --fs-h1: 2.2rem;     /* ≈ 35px */
    --fs-h2: 1.8rem;     /* ≈ 29px */
    --fs-h3: 1.3rem;     /* ≈ 21px */
  }
}

/* Valeurs par défaut (écrasées par les Global Fonts d'Elementor si renseignées) */
body { font-size: var(--fs-body); line-height: var(--lh-body); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }
h1, h2, h3, h4, h5, h6 { line-height: var(--lh-heading); }

/* ==========================================================================
   3. Correctifs Elementor récurrents
   ========================================================================== */
.elementor-widget-text-editor > *:last-child,
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

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

/* Évite qu'un mot long (URL, e-mail) casse la mise en page mobile */
h1, h2, h3, .elementor-heading-title { overflow-wrap: break-word; hyphens: auto; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   4. Classes utilitaires (Elementor > Avancé > Classes CSS)
   ========================================================================== */
.section-y   { padding-block: var(--section-y); }
.rounded     { border-radius: var(--radius-m); overflow: hidden; }
.shadow      { box-shadow: var(--shadow); }
.no-mb > *:last-child { margin-bottom: 0; }
.stretched-link a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Pages légales générées : titres plus discrets */
.lcdd-legal h2 { font-size: var(--fs-h4); margin-top: var(--space-l); }
.lcdd-legal h2:first-child { margin-top: 0; }

/* Liens du footer (fond sombre) */
.lcdd-footer a:not(.elementor-button) { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.lcdd-footer a:not(.elementor-button):hover { color: var(--e-global-color-accent, currentColor); }

/* ==========================================================================
   5. Styles spécifiques au projet — à partir d'ici
   (les formulaires sont dans assets/forms.css)
   ========================================================================== */