/*
Theme Name: MYSKYLL Enfant
Template: hello-elementor
Author: MYSKYLL
Description: Thème enfant de Hello Elementor pour le site MYSKYLL. Le design vit dans le kit Elementor (variables, classes globales, styles par défaut, composants) : ce fichier ne porte que ce qu'Elementor ne peut pas porter.
Version: 1.1.2
Requires at least: 6.9
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myskyll-enfant
*/

/* ==========================================================================
   Base de la maquette — relevée par inventaire-css.js (inv.base), listée dans
   elementor/inventaire.md. Les var(--x) sont les variables du kit Elementor,
   rendues sur :root sous le même nom : le client qui change une couleur dans
   le gestionnaire de variables la change aussi ici.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police-texte), sans-serif;
  font-size: var(--taille-texte);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ardoise);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Champs de formulaire hors Elementor (Contact Form 7) : même police que le texte, comme le style par
   défaut « input, select, textarea » du kit le fait pour les éléments atomiques. */
:where(input, select, textarea, button) { font: inherit; }

/* Les liens placés DANS un texte ne sont pas des éléments atomiques :
   le style par défaut « a » ne les atteint pas. */
:where(.elementor) :where(p, span, h1, h2, h3, h4, h5, h6) a { color: inherit; text-decoration: none; }

/* Propriétés absentes du schéma de styles atomique, utiles sur tous les titres. */
:where(.elementor) :where(h1, h2, h3, h4) { text-wrap: balance; hyphens: none; }

/* Marqueur natif des questions de l'accordéon. */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Les états pilotés par script (entete--ouvert, navigation__lien--actif) ne sont PAS ici :
   ils sont décrits dans le CSS personnalisé de leur classe, dans Elementor Pro. */

:where(a, button, [role="button"], [tabindex]):focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* ==========================================================================
   Contact Form 7 (formulaire de la page Contact)
   Les champs portent les classes globales (saisie, etiquette, champ-groupe…),
   réglées dans Elementor. Restent ici les éléments propres à CF7, qu'aucune
   classe Elementor ne peut atteindre : sa liste de case à cocher, ses messages
   de réponse et d'erreur de champ, selon l'état du formulaire. Même rendu que
   la classe « message » de la maquette.
   ========================================================================== */

/* CF7 enveloppe chaque champ dans un <span> : sans display block, une zone de texte en ligne laisse
   l'espace de la ligne de base sous elle. Dans la maquette, le champ est directement dans la grille. */
.wpcf7 .champ-groupe > .wpcf7-form-control-wrap > * { display: block; }
.wpcf7 .consentement .wpcf7-list-item { display: block; margin: 0; }
.wpcf7 .consentement > .wpcf7-form-control-wrap { flex: none; }

.wpcf7 form.wpcf7-form .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 0;
  border-left: 4px solid var(--vert-progres);
  border-radius: var(--rayon);
  background: var(--gris-doux);
  color: var(--anthracite);
  font-size: 14px;
}
.wpcf7 form.wpcf7-form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output {
  border-left-color: var(--orange-energie);
}
.wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; color: var(--orange-survol); }
.wpcf7 .wpcf7-spinner { vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}