/* ==========================================================================
   MG Carrelage — Design tokens
   Source unique de vérité CSS. Les mêmes valeurs sont déclarées comme
   variables globales Divi dans divi/01-mg-global-variables.json.
   Toute modification ici doit être répercutée là-bas (et inversement).
   ========================================================================== */

:root {
  /* --- Couleurs (section Figma « Couleurs », node 28:669) ------------------ */
  --mg-vert: #768d63;        /* accent : footer, cercle logo, liens         */
  --mg-vert-fonce: #5f7450;  /* dérivé : survol des liens/boutons          */
  --mg-encre: #201e1e;       /* titres, texte courant, navigation          */
  --mg-taupe: #514942;         /* encart « Le plus ? » (node 101:1422)        */
  --mg-beige: #afa395;         /* encart « Savoir-faire technique » (2:601)   */
  --mg-beige-clair: #b7aba0;   /* encart « Conseil & Proximité » (2:584)      */
  --mg-gris: #8b8b8b;        /* texte secondaire, numéros de cartes         */
  --mg-gris-clair: #c9c9c9;
  --mg-gris-fond: #f8f8f8;     /* fond de la section Localisation (4:1165)   */

  /* Bouton « Envoyer » : verre dépoli translucide, relevé sur le node 101:1334
     — ce n'est pas un aplat, la teinte dépend donc du fond derrière. */
  --mg-bouton-fond: rgba(232, 232, 232, 0.3);
  --mg-bouton-flou: 2px;
  --mg-bouton-radius: 16px;
  --mg-blanc: #ffffff;
  --mg-noir: #000000;

  /* Filet du pied de page (node 24:359) : la maquette le rend en image, son
     opacité exacte n'est pas lisible — valeur dérivée, à valider en revue. */
  --mg-filet-footer: rgba(255, 255, 255, 0.45);

  /* Bordure et ombre relevées sur les cartes « savoir-faire » (node 101:1231) */
  --mg-bordure: #dddddd;
  --mg-ombre-carte: 0 -1px 4px 0 rgba(55, 55, 55, 0.1);

  /* Voiles posés sur les images de fond pour garantir le contraste du texte
     blanc (le Figma s'appuie sur des visuels naturellement sombres ; le voile
     rend le résultat indépendant de l'image finalement fournie). */
  --mg-voile-hero: rgba(32, 30, 30, 0.32);
  --mg-voile-bandeau: rgba(32, 30, 30, 0.38);

  /* --- Typographie -------------------------------------------------------- */
  /* Décision projet : Poppins partout. Le Figma utilisait Helvetica Neue pour
     le corps, non disponible en Google Font — les graisses portent désormais
     la hiérarchie (300 corps / 400 liens / 600 titres). */
  --mg-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --mg-fw-light: 300;
  --mg-fw-regular: 400;
  --mg-fw-semibold: 600;

  /* Échelle fluide. Les bornes hautes sont les valeurs Figma à 1440px. */
  --mg-fs-h1: clamp(36px, 4.5vw, 64px);          /* hero, bandeau            */
  --mg-fs-h2: clamp(24px, 2.6vw, 32px);          /* titre de section         */
  --mg-fs-h3: clamp(20px, 1.9vw, 24px);          /* titre de prestation      */
  --mg-fs-lead: clamp(20px, 2.2vw, 32px);        /* chapô hero / bandeau     */
  --mg-fs-eyebrow: clamp(16px, 1.4vw, 20px);     /* sur-titre                */
  --mg-fs-nav: clamp(15px, 1.4vw, 20px);         /* navigation, liens footer */
  --mg-fs-corps: 16px;
  --mg-fs-mentions: 16px;

  --mg-lh-h1: 1.09;   /* 70/64 dans le Figma */
  --mg-lh-h2: 1.2;
  --mg-lh-corps: 1.5;

  /* --- Gabarit ------------------------------------------------------------ */
  /* Le Figma encarte tout le contenu de 20px : canvas 1440, sections à
     x=20 / width=1400, rangée interne 1320. */
  --mg-gouttiere: 20px;
  --mg-largeur-page: 1400px;
  --mg-largeur-rangee: 1320px;
  --mg-radius: 20px;

  --mg-padding-section: 40px;
  --mg-padding-section-lg: 50px;
  --mg-padding-footer: 80px;
  --mg-padding-carte: 40px;
  --mg-gap: 30px;
  --mg-gap-presta: 20px;     /* écart entre les 3 cartes prestation        */

  /* --- Hauteurs de section (Figma) ---------------------------------------- */
  --mg-h-hero: 753px;
  --mg-h-bandeau: 528px;
  --mg-h-carte: 256px;       /* carte savoir-faire                          */
  --mg-l-portrait: 513px;    /* image verticale centrale du savoir-faire    */

  /* --- Divers ------------------------------------------------------------- */
  --mg-transition: 0.3s ease;
}

/* Divi 5 est desktop-first : toutes les media queries de ce thème enfant sont
   écrites en `max-width`. Ne jamais introduire de `min-width` ici. */
@media (max-width: 980px) {
  :root {
    --mg-padding-section: 28px;
    --mg-padding-section-lg: 32px;
    --mg-padding-footer: 48px;
    --mg-padding-carte: 28px;
    --mg-gap: 20px;
    --mg-h-hero: 600px;
    --mg-h-bandeau: 460px;
  }
}

@media (max-width: 478px) {
  :root {
    --mg-gouttiere: 12px;
    --mg-radius: 12px;
    --mg-padding-section: 20px;
    --mg-padding-section-lg: 24px;
    --mg-padding-footer: 32px;
    --mg-padding-carte: 24px;
    --mg-h-hero: 520px;
    --mg-h-bandeau: 400px;
  }
}