/*
Theme Name: Hello Elementor Child
Theme URI: https://studionumerik.fr/
Description: Hello Elementor Child Theme
Author: Studio Numerik
Author URL: https://studionumerik.fr/
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v2 or later
License URL: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hello-elementorchild
*/
/* Placer votre CSS ci-dessous */
/* File: typography-colors.css
   But: typographie globale fluide + palette claire + prise en charge dark mode
   NOTE: NE PAS modifier la font-family des H1 (tu as déjà défini une police pour H1).
*/

/* -------- Variables globales -------- */
:root {
  /* Fonts: garde une seule famille web (si besoin) + stack système pour fallback */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono",
    "Courier New", monospace;

  /* Couleurs thème clair */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #111827; /* texte principal */
  --color-muted: #6b7280; /* texte secondaire */
  --color-border: #e6e9ee;
  --color-accent: #0a66ff; /* CTA principal */
  --color-accent-2: #ff6b00; /* CTA secondaire */
  --color-link: var(--color-accent);
  --focus-ring: rgba(10, 102, 255, 0.18);
}

/* Dark mode (smartphones qui forcent le mode sombre) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0b1220;
    --color-surface: #071223;
    --color-text: #e6eef8;
    --color-muted: #9aa6b2;
    --color-border: #1a2430;
    --color-accent: #4ea1ff;
    --color-accent-2: #ff8a4b;
    --color-link: var(--color-accent);
    --focus-ring: rgba(78, 161, 255, 0.18);
  }
}

/* -------- Réglages globaux de base (taille fluide) -------- */
html {
  font-size: 100%;
} /* respect du zoom utilisateur */

/* Corps : rem / clamp pour fluidité
   - Corps lisible: approx 15–18px selon l’écran
*/
body {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.125rem); /* ~15.2px → ~18px */
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

/* IMPORTANT: Ne pas écraser la police des H1 (tu l'as définie via Elementor).
   On applique la famille par défaut à tous les autres éléments (titres H2..H6 inclus) */
h1 {
  /* PAS DE font-family ici : laisse Elementor gérer */
}
h2,
h3,
h4,
h5,
h6,
p,
li,
blockquote,
label,
button,
input,
textarea,
select {
  font-family: var(--font-sans);
  color: var(--color-text);
}

/* Titres fluides (H1 laissé hors font-family afin de garder ta police customisée) */
h1 {
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3rem);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h2 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.25rem);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h3 {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 1.875rem);
  line-height: 1.25;
  margin: 0 0 0.5em;
}

h4 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
  line-height: 1.3;
  margin: 0 0 0.4em;
}
h5 {
  font-size: clamp(1.125rem, 1.02rem + 0.4vw, 1.25rem);
  line-height: 1.35;
  margin: 0 0 0.35em;
}
h6 {
  font-size: 1rem;
  line-height: 1.4;
  margin: 0 0 0.35em;
}

/* Paragraphes et longueur de ligne */
p {
  margin: 0 0 1rem;
  color: var(--color-text);
}
.prose,
.entry-content {
  max-width: 65ch;
} /* 60–75 caractères optimal */

/* Liens et boutons */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover,
a:focus {
  color: color-mix(in srgb, var(--color-link) 90%, var(--color-text));
}
.elementor-button,
.button,
button {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1rem);
  line-height: 1;
  min-height: 44px;
  padding: 0.6em 1.2em;
  border-radius: 6px;
  border: 1px solid transparent;
  background-color: var(--color-accent);
  color: #fff;
}
.elementor-button:hover,
.button:hover,
button:hover {
  filter: brightness(0.95);
}

/* Formulaires / Inputs */
input,
textarea,
select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

/* Bordures & séparateurs */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.75rem 0;
}

/* Focus visible accessible */
:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring);
  border-radius: 6px;
}

/* Petites optimisations pour Elementor (réduire l'inline override fréquent) */
.elementor * {
  transition: color 150ms ease, background-color 150ms ease,
    border-color 150ms ease;
}

/* Icônes SVG héritent de la couleur texte */
svg {
  color: inherit;
  fill: currentColor;
}

/* Mobile tweaks */
@media (max-width: 767px) {
  .prose,
  .entry-content {
    padding: 0 1rem;
  }
  h1 {
    margin-bottom: 0.4em;
  }
}

/* Utility: texte atténué */
.text-muted {
  color: var(--color-muted);
}

/* Boutons alternatifs */
.btn-ghost {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-border);
}

/* Small print */
.small {
  font-size: 0.875rem;
  color: var(--color-muted);
}