/* ==========================================================================
   Services Mel'or — Système de design (variables CSS)
   Valeurs par défaut = rendu actuel de servicesmelor.fr (VALEURS.md).
   Les réglages du thème (Customizer) réécrivent uniquement les 6 couleurs
   de base, l'identité et les contenus : tout le reste en découle.
   ========================================================================== */

:root {
  /* ---- 1. Couleurs de base (réglables par la cliente) ------------------- */
  --c-primary: #25787E;   /* principale : boutons, fonds de sections, liens menu mobile */
  --c-accent:  #CAA75A;   /* accent doré : survols, icônes */
  --c-dark:    #0C4F4A;   /* foncée : liens de contenu, bouton retour en haut */
  --c-text:    #606060;   /* texte courant */
  --c-heading: #181818;   /* titres */
  --c-bg:      #FFFFFF;   /* fond */

  /* ---- 2. Couleurs de texte posées sur une couleur de fond -------------
     Calculées par le thème (PHP) pour garder un contraste lisible quelle
     que soit la couleur choisie. Valeurs par défaut = rendu actuel.        */
  --c-on-primary: #FFFFFF;
  --c-on-accent:  #FFFFFF;
  --c-on-dark:    #FFFFFF;
  --c-on-image:   #FFFFFF;  /* textes posés sur photo + voile */

  /* ---- 3. Nuances dérivées (ne pas régler à la main) --------------------- */
  --c-nav:            #000000;                                          /* liens du menu ordinateur */
  --c-primary-shade:  color-mix(in srgb, var(--c-primary) 60%, #000);   /* bandeau des pages légales (#16484B) */
  --c-accent-deep:    #AB8965;   /* filet sous le titre des pages légales, bouton fermer du menu mobile */
  --c-border-soft:    #F3F3F3;   /* séparateurs du menu mobile */
  --c-band:           #DFDFDF;   /* liseré au-dessus du pied de page */
  --c-rating:         #F2B827;   /* étoiles de la section « Des services sur place » */
  --c-field-border:   var(--c-primary);
  --c-error:          #D72828;   /* messages d'erreur du formulaire */

  /* Voiles posés sur les photos */
  --overlay-hero:     rgba(0, 0, 0, 0.30);
  --overlay-columns:  rgba(0, 0, 0, 0.50);
  --overlay-banner:   rgba(0, 0, 0, 0.40);

  /* ---- 4. Polices (hébergées avec le site, cf. fonts.css) --------------- */
  --ff-heading: "Marcellus", "Times New Roman", serif;   /* titres, boutons, menu */
  --ff-body:    "Jost", "Helvetica Neue", Arial, sans-serif; /* texte */

  /* ---- 5. Échelle typographique ------------------------------------------
     Les tailles fluides reprennent exactement les valeurs mesurées à 390 et
     768 px (calc linéaire) et la valeur fixe à partir de 1025 px.          */
  --fs-body: 16px;      --lh-body: 27.2px;          /* p, li, cartes */
  --fs-lead: 19.2px;    --lh-lead: 32.64px;         /* texte du bandeau */
  --fs-col:  18px;      --lh-col:  30.6px;          /* texte des 4 colonnes */
  --fs-h1: 64px;        --lh-h1: 1.1;  --ls-h1: -4px;
  --fs-h2: calc(30.6458px + 0.82047vw); --lh-h2: 1.1;      /* 33.85 → 36.95 → 40 */
  --fs-eyebrow: calc(21.6607px + 0.20511vw);              /* h5 : 22.46 → 23.24 → 24 */
  --fs-card-title: 26px; --lh-card-title: 36.4px;          /* h3 des cartes */
  --fs-price: calc(18.8303px + 0.10262vw);                /* h5 tarif : 19.23 → 19.62 → 20 */
  --fs-footer-title: calc(24.4927px + 0.30770vw);         /* h5 pied : 25.69 → 26.86 → 28 */
  --fs-feature: 18px;   --lh-feature: 25.2px;              /* titres « Réactivité & proximité » */
  --fs-nav: 16px;       --lh-nav: 27.2px;
  --fs-btn: 12px;       --lh-btn: 26px;  --ls-btn: 2px;
  --fs-field: 15px;
  --fs-legal-h2: 52px;

  --fw-h1: 300;  --fw-h2: 300;  --fw-eyebrow: 300;
  --fw-card-title: 600;  --fw-feature: 700;  --fw-btn: 500;

  /* ---- 6. Mise en page ----------------------------------------------------- */
  --container: 1200px;         /* contenu centré à 1440 px */
  --container-legal: 1140px;   /* contenu des pages légales */
  --gutter: 16px;              /* marge latérale mobile (20px en tablette) */
  --header-h: 90px;
  --grid-gap: 30px;            /* grilles conciergerie, travaux, activités */
  --grid-gap-rentals: 24px;    /* grille des locations */
  --section-pad: 24px;         /* espacement haut/bas des sections (VALEURS) */

  /* ---- 7. Ombres ----------------------------------------------------------- */
  --shadow-card:   rgba(0, 0, 0, 0.075) 0px 16px 35px 16px;
  --shadow-strong: rgba(0, 0, 0, 0.2) 0px 0px 30px 0px;
  --shadow-soft:   rgba(0, 0, 0, 0.1) 0px 0px 25px 0px;
  --shadow-xs:     rgba(0, 0, 0, 0.05) 0px 1px 6px 0px;

  /* ---- 8. Boutons ---------------------------------------------------------- */
  --btn-pad: 5px 20px;
  --btn-radius: 0px;
  --btn-shift: 7px;            /* décalage vers la droite au survol */
  --btn-bg-hover: var(--c-accent);
  --submit-h: 40px;  --submit-radius: 3px;  --submit-pad: 0 24px;

  /* ---- 9. Champs ----------------------------------------------------------- */
  --field-h: 43px;  --field-pad: 10px;  --field-border: 1px solid var(--c-field-border);

  /* ---- 10. Mouvement ------------------------------------------------------- */
  --t-btn: 0.3s;
  --t-card: background 0.3s, border 0.3s, box-shadow 0.3s, transform 0.4s;
  --slide-duration: 5s;  --slide-fade: 0.5s;
  --anim-duration: 1.25s;
}

@media (min-width: 768px) {
  :root { --gutter: 20px; }
}
@media (min-width: 1025px) {
  :root {
    --fs-h2: 40px;
    --fs-eyebrow: 24px;
    --fs-price: 20px;
    --fs-footer-title: 28px;
  }
}