/*
Theme Name: Metsens
Theme URI: https://metsens.fr
Description: Thème enfant de Hello Elementor — charte graphique Metsens. Tout le contenu de la page est éditable via Elementor.
Author: Webetoiles
Author URI: https://webetoiles.fr
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: metsens
*/

/* ═══════════════════════════════════════════════════════════════
   VARIABLES — CHARTE GRAPHIQUE METSENS
   Palette validée : bleu acier / sable doré / crème ivoire
   ═══════════════════════════════════════════════════════════════ */
:root {
  --metsens-navy:   #1E3A5F;  /* Bleu acier  — fonds sombres, titres */
  --metsens-gold:   #E9D5B1;  /* Sable doré  — accents, boutons, séparateurs */
  --metsens-cream:  #FAF8F3;  /* Crème ivoire — fonds clairs */
  --metsens-grey:   #9E9E9C;  /* Gris moyen  — textes secondaires */
  --metsens-dark:   #1A1A1A;  /* Noir doux   — footer, texte principal */
}

/* ═══════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }

body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  background: var(--metsens-cream);
  color: var(--metsens-dark);
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHIE GLOBALE — Cormorant Garamond pour les titres
   ═══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════
   BOUTONS — style Metsens
   Utilisables via la classe CSS Elementor : .btn-metsens
   ═══════════════════════════════════════════════════════════════ */
.btn-metsens,
.elementor-button.btn-metsens {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--metsens-gold);
  color: var(--metsens-navy);
  border: 1px solid var(--metsens-gold);
  padding: 14px 32px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn-metsens:hover,
.elementor-button.btn-metsens:hover {
  background: transparent;
  color: var(--metsens-gold);
  border-color: var(--metsens-gold);
}

.btn-metsens-outline,
.elementor-button.btn-metsens-outline {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  color: var(--metsens-navy);
  border: 1px solid var(--metsens-navy);
  padding: 14px 32px;
  transition: background 0.25s, color 0.25s;
}
.btn-metsens-outline:hover,
.elementor-button.btn-metsens-outline:hover {
  background: var(--metsens-navy);
  color: var(--metsens-cream);
}

/* ═══════════════════════════════════════════════════════════════
   SEPARATEUR DORÉ — classe utilitaire
   Usage Elementor : ajouter la classe CSS .sep-gold sur un widget Divider
   ═══════════════════════════════════════════════════════════════ */
.sep-gold .elementor-divider-separator {
  border-color: var(--metsens-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTIONS DE FOND — classes utilitaires
   Usage Elementor : ajouter la classe CSS sur la section
   ═══════════════════════════════════════════════════════════════ */
.bg-navy  { background-color: var(--metsens-navy)  !important; }
.bg-cream { background-color: var(--metsens-cream) !important; }
.bg-dark  { background-color: var(--metsens-dark)  !important; }

/* Textes en blanc pour sections sombres */
.bg-navy  *,
.bg-dark  * { color: var(--metsens-cream); }

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION HELLO ELEMENTOR — tweaks
   ═══════════════════════════════════════════════════════════════ */
.site-header {
  font-family: 'Lato', sans-serif;
  letter-spacing: 0.1em;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — ajustements globaux
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  h1, .elementor-heading-title[class*="h1"] {
    font-size: clamp(36px, 9vw, 56px);
  }
  h2, .elementor-heading-title[class*="h2"] {
    font-size: clamp(28px, 7vw, 42px);
  }
}