/* =========================================================================
   SCANDY — Design system
   Valeurs alignées sur la maquette de référence (assets/css/scandy.css) :
   charte or métallique, Cinzel + Cormorant Garamond + Inter.
   Charge sur le front ET dans l'éditeur Elementor.
   ========================================================================= */

:root {
  /* IMPORTANT : indique au navigateur que le site est déjà pensé en sombre.
     Sans ça, certains navigateurs mobiles (Chrome Android, Samsung Internet…)
     appliquent un "mode sombre forcé" automatique qui réinterprète/réinvente
     les couleurs de la page — c'est ce qui provoque des dégradés qui
     apparaissent rouges, des boutons dans une autre couleur, des liens en
     bleu... sur certains téléphones seulement. color-scheme dit au
     navigateur "ne touche à rien, c'est voulu". */
  color-scheme: dark;

  /* ---- Couleurs ---- */
  --onyx: #0b0b0b;
  --onyx-2: #121212;
  --onyx-3: #1d1d1d;
  --cream: #F4EFE4;
  --cream-2: #ECE5D3;
  --paper: #FAF6EC;
  --champagne: #fbbf52;
  --champagne-2: #fff0aa;
  --champagne-deep: #ba710e;
  --grey: #8A8276;
  --grey-2: #B8B0A1;
  --line: rgba(11, 11, 11, .12);
  --line-dark: rgba(244, 239, 228, .14);

  /* ---- Dégradés or (réutilisables) ---- */
  --gold-grad: linear-gradient(135deg, #fff0aa 0%, #fbbf52 35%, #ba710e 70%, #fbbf52 100%);
  --gold-grad-soft: linear-gradient(135deg, #fdd88e 0%, #fbbf52 50%, #d78f28 100%);

  /* ---- Easing ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ---- Typographie ----
     --font-display : titres (h1/h2/h3) — Cinzel (Google Fonts)
     --font-serif   : corps de texte + accents <em> des titres — Cormorant */
  --font-display: 'Cinzel', 'Trajan Pro 3', serif;
  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Espacements (multiples de 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-20: 80px;
  --space-40: 160px;

  /* Padding de section standard */
  --section-pad-y: 160px;
  --section-pad-x: 48px;
}

/* =========================================================================
   Typographie utilitaire (réutilisable hors widgets)
   ========================================================================= */

.scandy-display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: .01em;
}
/* Accents en italique doré : ne touche QUE la couleur (dégradé). La police,
   la graisse et la casse restent celles du titre parent — quelle que soit
   la police choisie sur ce titre précis (Cinzel, Cormorant, autre...), pas
   de police forcée en dur. Cible <em> ET <i> : le bouton "Italique" des
   éditeurs WYSIWYG (Heading / Text Editor Elementor) insère souvent <i>
   plutôt que <em> quand on clique dessus au lieu de taper la balise à la
   main — les deux doivent recevoir l'effet. */
.scandy-display em, .scandy-display i,
.scandy h1 em, .scandy h2 em, .scandy h3 em, .scandy h4 em, .scandy h5 em, .scandy h6 em,
.scandy h1 i, .scandy h2 i, .scandy h3 i, .scandy h4 i, .scandy h5 i, .scandy h6 i {
  font-family: inherit;
  font-weight: inherit;
  font-style: italic;
  text-transform: inherit; /* respecte la casse du titre (ex: MAJUSCULES via Elementor) */
  color: var(--champagne); /* repli si background-clip:text non supporté */
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Exclusion ponctuelle : <em class="no-gold"> reste italique simple, sans
   dégradé (ex : reproduire un titre de la maquette qui n'a pas l'effet).
   !important nécessaire : la règle automatique ci-dessus (.scandy h1 em…)
   est plus spécifique qu'une simple classe. */
.no-gold {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: inherit !important;
}

/* Tailles de titres prêtes à l'emploi (classes CSS Elementor) */
.scandy-h1 { font-size: clamp(54px, 9vw, 86px); line-height: .98; }
.scandy-h2 { font-size: clamp(44px, 5.5vw, 70px); line-height: 1; }
.scandy-h3 { font-size: clamp(32px, 4vw, 52px); line-height: 1.02; }

.scandy-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .36em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--grey);
}

.scandy-lead {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--onyx);
}

/* Texte or (background-clip), à poser DIRECTEMENT sur le mot à styler
   (<em class="gold-text">mot</em>, ou n'importe quel tag). Fonctionne
   partout, sans dépendre d'une classe sur le parent — c'est le mécanisme
   le plus fiable si ".scandy-display em" ne suffit pas (ex : le widget
   Elementor où le titre est tapé n'a pas la classe scandy-display posée
   dessus). Alias : gold-text (nom utilisé dans la maquette) et
   scandy-gold-text (convention du thème) pointent vers la même règle. */
.gold-text, .scandy-gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =========================================================================
   Helpers de fond (pour habiller des sections Elementor natives)
   ========================================================================= */

.scandy-bg-onyx   { background: var(--onyx);   color: var(--cream); }
.scandy-bg-onyx-2 { background: var(--onyx-2); color: var(--cream); }
.scandy-bg-paper  { background: var(--paper);  color: var(--onyx);  }
.scandy-bg-cream  { background: var(--cream);  color: var(--onyx);  }

/* Padding de section standard, applicable via CSS class Elementor */
.scandy-section {
  padding: var(--section-pad-y) var(--section-pad-x);
}

@media (max-width: 1024px) {
  :root {
    --section-pad-y: 90px;
    --section-pad-x: 24px;
  }
}

/* Sélection de texte aux couleurs de la maison, partout sur le site. */
::selection {
  background: var(--champagne);
  color: var(--onyx);
}

/* =========================================================================
   Gravity Forms - filet de sécurité global (même hors widget Gravity Styler).
   Garantit la lisibilité charte de tout formulaire GF du site : le widget
   SCANDY reste la voie royale (submit or, seg...), ceci couvre le reste.
   ========================================================================= */

.gform_wrapper input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.gform_wrapper textarea {
  color: var(--cream) !important;
  caret-color: var(--champagne);
}

.gform_wrapper select {
  color: var(--cream) !important;
  background-color: var(--onyx-2, #121212) !important;
}

.gform_wrapper select option {
  background: var(--onyx, #0b0b0b);
  color: var(--cream);
}

.gform_wrapper .gform-field-label,
.gform_wrapper .gfield_label,
.gform_wrapper .gchoice label,
.gform_wrapper .gfield_consent_label {
  color: var(--cream) !important;
}

.gform_wrapper .gfield_description:not(.validation_message),
.gform_wrapper .gfield_consent_description {
  color: var(--grey-2) !important;
}

.gform_wrapper input[type=checkbox],
.gform_wrapper input[type=radio] {
  accent-color: var(--champagne);
}

.gform_wrapper input:-webkit-autofill,
.gform_wrapper textarea:-webkit-autofill,
.gform_wrapper select:-webkit-autofill {
  -webkit-text-fill-color: var(--cream);
  -webkit-box-shadow: 0 0 0 1000px var(--onyx, #0b0b0b) inset;
  box-shadow: 0 0 0 1000px var(--onyx, #0b0b0b) inset;
  transition: background-color 99999s ease-in-out 0s;
}

/* Correctif select GF (voir gravity-styler.css) : sans line-height normal,
   la valeur choisie est rognée hors de la zone visible du select. */
.gform_wrapper select {
  line-height: normal;
  color-scheme: dark;
}

/* Focus GF global : liseré champagne au lieu de l'anneau bleu navigateur. */
.gform_wrapper input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  outline: none !important;
  border-color: var(--champagne) !important;
}
.gform_wrapper input[type=checkbox]:focus-visible,
.gform_wrapper input[type=radio]:focus-visible {
  outline: 1px solid var(--champagne);
  outline-offset: 2px;
}

/* Select global : géométrie saine (pas de texte tronqué ni collé au bord). */
.gform_wrapper select {
  height: auto !important;
  padding: 12px 36px 12px 12px !important;
  line-height: 1.4 !important;
}