/* ==========================================================================
   @font-face — Polices de marque (source unique, chemins absolus)
   woff2 prioritaire (leger) + ttf en fallback.
   Fichiers : /public/theme/assets/fonts/{jost,work_sans}/
   Charge sur le front ET dans le builder (<link> dans builder.html.twig).
   ========================================================================== */

/* === JOST (titres h1-h4) === */
@font-face {
    font-family: 'Jost';
    src: url('/theme/assets/fonts/jost/Jost-Regular.woff2') format('woff2'),
         url('/theme/assets/fonts/jost/Jost-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Jost';
    src: url('/theme/assets/fonts/jost/Jost-Medium.woff2') format('woff2'),
         url('/theme/assets/fonts/jost/Jost-Medium.ttf') format('truetype');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Jost';
    src: url('/theme/assets/fonts/jost/Jost-SemiBold.woff2') format('woff2'),
         url('/theme/assets/fonts/jost/Jost-SemiBold.ttf') format('truetype');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Jost';
    src: url('/theme/assets/fonts/jost/Jost-Bold.woff2') format('woff2'),
         url('/theme/assets/fonts/jost/Jost-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* === WORK SANS (textes / boutons / UI) === */
@font-face {
    font-family: 'Work Sans';
    src: url('/theme/assets/fonts/work_sans/WorkSans-Regular.woff2') format('woff2'),
         url('/theme/assets/fonts/work_sans/WorkSans-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Work Sans';
    src: url('/theme/assets/fonts/work_sans/WorkSans-Medium.woff2') format('woff2'),
         url('/theme/assets/fonts/work_sans/WorkSans-Medium.ttf') format('truetype');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Work Sans';
    src: url('/theme/assets/fonts/work_sans/WorkSans-SemiBold.woff2') format('woff2'),
         url('/theme/assets/fonts/work_sans/WorkSans-SemiBold.ttf') format('truetype');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Work Sans';
    src: url('/theme/assets/fonts/work_sans/WorkSans-Bold.woff2') format('woff2'),
         url('/theme/assets/fonts/work_sans/WorkSans-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ==========================================================================
   THEME MAURIN — aligné sur la charte graphique officielle (Guide Graphique
   Site Web Groupe Maurin). Source de vérité de la marque pour les composants.
   ========================================================================== */

:root {
    /* =====================================================================
       1. PALETTE MARQUE MAURIN — couleurs exactes de la charte
       ===================================================================== */

    /* --- Accents --- */
    --maurin-green:        #007838;   /* Vert Maurin */
    --maurin-green-light:  #1cb359;   /* Vert Maurin Clair — réservé aux liens/états */

    /* --- Textes --- */
    --maurin-noir:         #000000;   /* Noir pur */
    --maurin-gray-text:    #7c7c7c;   /* Gris sous-texte */

    /* --- Backgrounds / échelle de gris --- */
    --maurin-dark:         #2c2c2c;   /* Dark */
    --maurin-gray-dark:    #373737;   /* Gris Sombre */
    --maurin-gray-1:       #dddddd;   /* Gris 1 */
    --maurin-gray-2:       #ededed;   /* Gris 2 */
    --maurin-gray-3:       #f6f6f6;   /* Gris 3 */
    --maurin-white:        #ffffff;   /* Blanc */

    /* --- Logo uniquement — NE PAS utiliser ailleurs --- */
    --maurin-logo-red:     #c5393a;

    /* =====================================================================
       1b. ALIAS DE COMPATIBILITÉ (anciens noms encore référencés par les
       composants déjà migrés). Conservés pour ne rien casser.
       ===================================================================== */
    --maurin-primary:      var(--maurin-green-light);  /* #1cb359 */
    --maurin-secondary:    var(--maurin-green);        /* #007838 */
    --maurin-accent:       var(--maurin-green);        /* plus de rouge : accent = vert */
    --maurin-text:         var(--maurin-dark);         /* #2c2c2c */
    --maurin-black:        var(--maurin-dark);         /* #2c2c2c (fond sombre historique) */
    --maurin-bg-soft:      var(--maurin-gray-3);       /* #f6f6f6 */
    --maurin-light-gray:   var(--maurin-gray-3);       /* #f6f6f6 */

    /* =====================================================================
       2. TYPOGRAPHIES
       ===================================================================== */
    --maurin-font-primary:   'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --maurin-font-secondary: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

    --theme-font-primary:   var(--maurin-font-primary);
    --theme-font-secondary: var(--maurin-font-secondary);
    --theme-title-font:     var(--maurin-font-primary);
    --theme-text-font:      var(--maurin-font-secondary);
    --theme-button-font:    var(--maurin-font-secondary);

    /* --- Échelle de tailles (charte) --- */
    --theme-title-size:    48px;   /* Grand Titre 1 — Jost Semi Bold */
    --theme-title-2-size:  40px;   /* Grand Titre 2 — Jost Semi Bold */
    --theme-title-3-size:  36px;   /* Titre 3 — Jost Medium */
    --theme-subtitle-size: 20px;   /* Work Sans 20px */
    --theme-text-size:     14px;   /* Texte 1 — Work Sans Regular (charte) */
    --theme-text-sm-size:  14px;   /* Texte 1 — Work Sans Regular */
    --theme-text-lg-size:  20px;   /* Textes 2/3/4 — Work Sans */
    --theme-eyebrow-size:  13px;
    --theme-card-title-size:    20px;
    --theme-card-subtitle-size: 15px;

    /* --- Poids (charte) --- */
    --theme-title-weight:    600;  /* Semi Bold */
    --theme-title-3-weight:  500;  /* Medium */
    --theme-subtitle-weight: 500;
    --theme-text-weight:     400;
    --theme-eyebrow-weight:  600;
    --theme-link-weight:     500;  /* Work Sans Medium */
    --theme-card-title-weight:    600;
    --theme-card-subtitle-weight: 500;

    /* =====================================================================
       3. RADIUS / ARRONDIS
       ===================================================================== */
    --maurin-section-radius: 18px;
    --maurin-image-radius:   18px;
    --maurin-button-radius:  999px;

    --theme-section-radius:           var(--maurin-section-radius);
    --theme-section-container-radius: var(--maurin-section-radius);
    --theme-card-radius:              var(--maurin-section-radius);
    --theme-image-radius:             var(--maurin-image-radius);
    --theme-button-radius:            var(--maurin-button-radius);

    /* =====================================================================
       4. BOUTONS
       ===================================================================== */
    --maurin-button-height:      48px;
    --maurin-button-padding-x:   22px;
    --maurin-button-font-size:   15px;
    --maurin-button-font-weight: 600;

    --theme-button-height:      var(--maurin-button-height);
    --theme-button-padding-x:   var(--maurin-button-padding-x);
    --theme-button-font-size:   var(--maurin-button-font-size);
    --theme-button-font-weight: var(--maurin-button-font-weight);

    /* --- Bouton principal (fond clair ou sombre) --- */
    --theme-button-bg:         var(--maurin-green-light);  /* #1cb359 */
    --theme-button-bg-hover:   var(--maurin-green);        /* #007838 */
    --theme-button-text-color: var(--maurin-white);
    --theme-button-text-hover: var(--maurin-white);

    /* --- Bouton secondaire sur fond clair --- */
    --theme-button2-bg:         var(--maurin-gray-dark);   /* #373737 */
    --theme-button2-text:       var(--maurin-white);
    --theme-button2-bg-hover:   var(--maurin-green);       /* #007838 */
    --theme-button2-text-hover: var(--maurin-white);

    /* --- Bouton secondaire sur fond sombre --- */
    --theme-button2-dark-bg:         var(--maurin-white);
    --theme-button2-dark-text:       var(--maurin-green);
    --theme-button2-dark-bg-hover:   var(--maurin-green);
    --theme-button2-dark-text-hover: var(--maurin-white);

    /* --- Boutons de fonction (filtres / formulaires) --- */
    --theme-btn-filter-border:        var(--maurin-gray-1);      /* défaut #dddddd */
    --theme-btn-filter-border-hover:  var(--maurin-green);       /* survol #007838 */
    --theme-btn-filter-border-active: var(--maurin-green-light); /* activé #1cb359 */
    --theme-btn-filter-text:          var(--maurin-dark);
    --theme-btn-filter-bg:            var(--maurin-white);
    --theme-btn-filter-disabled-bg:   var(--maurin-gray-1);      /* inactif #dddddd */
    --theme-btn-filter-disabled-text: var(--maurin-gray-text);
    --theme-btn-filter-focus-bg:      var(--maurin-green-light);
    --theme-btn-filter-focus-text:    var(--maurin-white);

    /* =====================================================================
       5. VARIABLES SÉMANTIQUES GLOBALES
       Les composants doivent lire CES variables.
       ===================================================================== */

    /* Sections */
    --theme-section-title-color:    var(--maurin-dark);       /* titres en dark #2c2c2c (charte) */
    --theme-eyebrow-color:          var(--maurin-gray-text);  /* pré-titre gris (plus de rouge) */
    --theme-section-subtitle-color: var(--maurin-text);
    --theme-section-text-color:     var(--maurin-text);
    --theme-section-background:     var(--maurin-white);

    /* Blocs de contenu */
    --theme-block-title-color:    var(--maurin-dark);
    --theme-block-subtitle-color: var(--maurin-text);
    --theme-block-text-color:     var(--maurin-text);

    /* Bordures / contours / accents (plus de rouge) */
    --theme-border-accent-color: var(--maurin-green);

    /* Médias / cards */
    --theme-card-border-color:  var(--maurin-gray-2);       /* #ededed */
    --theme-card-background:    var(--maurin-gray-3);
    --theme-card-media-bg:      var(--maurin-gray-3);
    --theme-card-border-hover:  var(--maurin-green-light);
    --theme-price-color:        var(--maurin-green);
    --theme-indicator-bg:       var(--maurin-gray-3);

    /* Fonds */
    --theme-bg-default: var(--maurin-gray-3);
    --theme-bg-light:   var(--maurin-gray-3);
    --theme-bg-white:   var(--maurin-white);
    --theme-bg-dark:    var(--maurin-dark);

    /* Texte global */
    --theme-text-color:       var(--maurin-text);
    --theme-text-muted-color: var(--maurin-gray-text);
    --theme-link-color:       var(--maurin-green-light);   /* réservé aux liens */
    --theme-link-hover-color: var(--maurin-green);
}

/* ==========================================================================
   CLASSES UTILITAIRES — couleurs & typo
   ========================================================================== */

.theme-text-primary   { color: var(--maurin-green-light); }
.theme-text-secondary { color: var(--maurin-green); }
.theme-text-muted     { color: var(--maurin-gray-text); }
.theme-text-dark      { color: var(--maurin-dark); }
.theme-bg-soft        { background-color: var(--maurin-gray-3); }
.theme-bg-primary     { background-color: var(--maurin-green-light); }
.theme-bg-dark        { background-color: var(--maurin-dark); }

.theme-font-title { font-family: var(--theme-title-font); }
.theme-font-text  { font-family: var(--theme-text-font); }

/* ==========================================================================
   CLASSES BOUTONS RÉUTILISABLES (charte)
   ========================================================================== */

/* Bouton principal */
.maurin-btn-primary {
    font-family: var(--theme-button-font);
    font-weight: var(--theme-button-font-weight);
    font-size: var(--theme-button-font-size);
    padding: 0 var(--theme-button-padding-x);
    height: var(--theme-button-height);
    line-height: var(--theme-button-height);
    border-radius: var(--theme-button-radius);
    border: none;
    background-color: var(--theme-button-bg);
    color: var(--theme-button-text-color);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.maurin-btn-primary:hover {
    background-color: var(--theme-button-bg-hover);
    color: var(--theme-button-text-hover);
}

/* Bouton secondaire — fond clair */
.maurin-btn-secondary {
    font-family: var(--theme-button-font);
    font-weight: var(--theme-button-font-weight);
    font-size: var(--theme-button-font-size);
    padding: 0 var(--theme-button-padding-x);
    height: var(--theme-button-height);
    line-height: var(--theme-button-height);
    border-radius: var(--theme-button-radius);
    border: none;
    background-color: var(--theme-button2-bg);
    color: var(--theme-button2-text);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.maurin-btn-secondary:hover {
    background-color: var(--theme-button2-bg-hover);
    color: var(--theme-button2-text-hover);
}

/* Bouton secondaire — fond sombre */
.maurin-btn-secondary-dark {
    font-family: var(--theme-button-font);
    font-weight: var(--theme-button-font-weight);
    font-size: var(--theme-button-font-size);
    padding: 0 var(--theme-button-padding-x);
    height: var(--theme-button-height);
    line-height: var(--theme-button-height);
    border-radius: var(--theme-button-radius);
    border: none;
    background-color: var(--theme-button2-dark-bg);
    color: var(--theme-button2-dark-text);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.maurin-btn-secondary-dark:hover {
    background-color: var(--theme-button2-dark-bg-hover);
    color: var(--theme-button2-dark-text-hover);
}

/* Bouton de fonction (filtre / formulaire) */
.maurin-btn-filter {
    font-family: var(--theme-button-font);
    font-weight: 500;
    font-size: var(--theme-button-font-size);
    padding: 0 var(--theme-button-padding-x);
    height: var(--theme-button-height);
    line-height: calc(var(--theme-button-height) - 2px);
    border-radius: var(--theme-button-radius);
    background-color: var(--theme-btn-filter-bg);
    color: var(--theme-btn-filter-text);
    border: 1px solid var(--theme-btn-filter-border);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.maurin-btn-filter:hover {
    border-color: var(--theme-btn-filter-border-hover);
}
.maurin-btn-filter.is-active,
.maurin-btn-filter[aria-pressed="true"] {
    border-color: var(--theme-btn-filter-border-active);
}
.maurin-btn-filter.is-focus {
    background-color: var(--theme-btn-filter-focus-bg);
    color: var(--theme-btn-filter-focus-text);
    border-color: var(--theme-btn-filter-border-active);
}
.maurin-btn-filter:disabled,
.maurin-btn-filter.is-disabled {
    background-color: var(--theme-btn-filter-disabled-bg);
    color: var(--theme-btn-filter-disabled-text);
    border-color: var(--theme-btn-filter-disabled-bg);
    cursor: not-allowed;
}

/* Lien marque */
.maurin-link {
    font-family: var(--theme-text-font);
    font-weight: var(--theme-link-weight);
    color: var(--theme-link-color);
    text-decoration: none;
    transition: color .2s ease;
}
.maurin-link:hover {
    color: var(--theme-link-hover-color);
}