/* ==========================================================================
   THEME MAURIN — RENAULT
   --------------------------------------------------------------------------
   Fichier de marque DÉDIÉ aux sites "Renault + Ville" du groupe Maurin.
   Self-contained : il REMPLACE theme-maurin.css sur ces domaines.
   (À charger À LA PLACE de theme-maurin.css dans le template du site Renault.)

   Architecture en 4 couches (cf. CONTEXT « Système de tokens v2 ») :
     1. @font-face Nouvel'R (préparé — fichiers à déposer)
     2. Palette brute --maurin-* (valeurs Renault)
     3. Tokens sémantiques --theme-* (mêmes noms que theme-maurin.css
        -> les widgets migrés héritent SANS être modifiés)
     4. Tokens spécifiques Renault : menu (--theme-menu-*) + boutons 3 niveaux
        (--theme-btn-*) pour les widgets gamme/offres à venir.

   ⚠️ Valeurs à confirmer depuis le Figma / brandstore (p.19-21) :
       - jaune Renault (--renault-yellow)
       - arrondis section / image
   ========================================================================== */


/* ==========================================================================
   1. POLICE NOUVEL'R
   --------------------------------------------------------------------------
   Fichiers : /var/www/maurin.carsens.net/public/renault/assets/fonts/nouvelr/
   Famille  : 'NouvelR' (SANS espace) — doit matcher --maurin-font-primary.
   Graisses : 200 Light / 300 Book / 400 Regular / 600 SemiBold / 700 Bold / 800 ExtraBold
   ========================================================================== */

@font-face { font-family: 'NouvelR'; src: url('/renault/assets/fonts/nouvelr/NouvelR-Light.woff2') format('woff2');     font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'NouvelR'; src: url('/renault/assets/fonts/nouvelr/NouvelR-Book.woff2') format('woff2');      font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'NouvelR'; src: url('/renault/assets/fonts/nouvelr/NouvelR-Regular.woff2') format('woff2');   font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'NouvelR'; src: url('/renault/assets/fonts/nouvelr/NouvelR-Semibold.woff2') format('woff2');  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'NouvelR'; src: url('/renault/assets/fonts/nouvelr/NouvelR-Bold.woff2') format('woff2');      font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'NouvelR'; src: url('/renault/assets/fonts/nouvelr/NouvelR-Extrabold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }


:root {

    /* ----------------------------------------------------------------------
       2. PALETTE MARQUE RENAULT (couleurs brutes)
       Couleurs officielles : Blanc / Noir / Gris / Jaune (doc Q6).
       ---------------------------------------------------------------------- */

    --renault-yellow:        #efdf00;   /* "primary yellow" — À CONFIRMER (Figma p.19-21) */
    --renault-yellow-hover:  #e3d400;   /* survol jaune (super-primary) */
    --renault-black:         #000000;
    --renault-black-hover:   #1a1a1a;
    --renault-white:         #ffffff;
    --renault-gray-light:    #f2f2f2;
    --renault-gray-mid:      #6f6f6f;
    --renault-gray-dark:     #3c3c3c;
    --renault-border:        #e5e5e5;

    /* Mapping vers les noms de palette Maurin (compat : les widgets lisent ces noms) */
    --maurin-primary:        var(--renault-black);        /* action "primary" = NOIR (doc CTA) */
    --maurin-secondary:      var(--renault-black-hover);   /* survol du noir */
    --maurin-accent:         var(--renault-yellow);        /* accent = JAUNE */
    --maurin-text:           var(--renault-black);
    --maurin-bg-soft:        #f6f6f6;
    --maurin-white:          var(--renault-white);
    --maurin-light-gray:     var(--renault-gray-light);
    --maurin-black:          var(--renault-black);

    /* ----------------------------------------------------------------------
       Typographies — Nouvel'R (fallback Jost -> Work Sans -> système)
       ---------------------------------------------------------------------- */

    --maurin-font-primary:   'NouvelR', 'Jost', 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --maurin-font-secondary: 'NouvelR', 'Work Sans', 'Jost', -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-primary);
    --theme-button-font:     var(--maurin-font-primary);
    --base-font:             var(--maurin-font-primary);
    --main-font:             var(--maurin-font-primary);

    /* ----------------------------------------------------------------------
       Radius / arrondis — Renault = design angulaire, boutons RECTANGULAIRES.
       (Valeurs section/image à ajuster selon le Figma si besoin.)
       ---------------------------------------------------------------------- */

    --maurin-section-radius: 0px;
    --maurin-image-radius:   0px;
    --maurin-button-radius:  0px;   /* boutons rectangulaires (doc Q8) */

    --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);

    /* ----------------------------------------------------------------------
       Boutons (dimensions génériques)
       ---------------------------------------------------------------------- */

    --maurin-button-height:      48px;
    --maurin-button-padding-x:   24px;
    --maurin-button-font-size:   15px;
    --maurin-button-font-weight: 600;   /* Nouvel'R Semi-Bold */

    --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);

    /* ----------------------------------------------------------------------
       3. TOKENS SÉMANTIQUES GLOBAUX (mêmes noms que theme-maurin.css)
       ---------------------------------------------------------------------- */

    /* Sections */
    --theme-section-title-color:    var(--renault-black);
    --theme-section-subtitle-color: var(--renault-black);
    --theme-section-text-color:     var(--renault-black);
    --theme-section-background:     var(--renault-white);

    /* Titres de page (franck-page-heading) — charte Renault : H1 35 / H2 20, centre.
       franck-page-heading est le SEUL consommateur de ces tokens (blast radius verifie). */
    --theme-h1-size:     35px;
    --theme-h2-size:     20px;
    --theme-title-align: center;

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

    /* Boutons (CTA "primary" par défaut = noir) */
    --theme-button-bg:         var(--renault-black);
    --theme-button-bg-hover:   var(--renault-black-hover);
    --theme-button-text-color: var(--renault-white);

    /* Bordures / contours / accents */
    --theme-border-accent-color: var(--renault-yellow);

    /* Médias / cards */
    --theme-card-border-color: var(--renault-border);
    --theme-card-background:   var(--renault-gray-light);

    /* Fonds */
    --theme-bg-default: var(--renault-white);
    --theme-bg-light:   var(--renault-gray-light);
    --theme-bg-white:   var(--renault-white);

    /* Texte global / liens */
    --theme-text-color:       var(--renault-black);
    --theme-link-color:       var(--renault-black);
    --theme-link-hover-color: var(--renault-black);

    /* ----------------------------------------------------------------------
       4a. TOKENS SPÉCIFIQUES — BARRE DE NAVIGATION / HEADER (doc Q4)
       Lus par franck-menu-renault.css.
       ---------------------------------------------------------------------- */

    --theme-menu-bg:                var(--renault-white);
    --theme-menu-text-color:        var(--renault-black);
    --theme-menu-link-color:        var(--renault-black);
    --theme-menu-link-hover-color:  var(--renault-black);
    --theme-menu-accent:            var(--renault-yellow);   /* soulignement / indicateur actif */
    --theme-menu-border-color:      var(--renault-border);   /* fine bordure basse */
    --theme-menu-icon-color:        var(--renault-black);
    --theme-menu-action-hover-color: var(--renault-yellow);  /* survol Rechercher / Nous trouver */
    --theme-menu-sitename-color:    var(--renault-black);
    --theme-menu-separator-color:   var(--renault-black);
    --theme-menu-height:            160px;
    --theme-menu-font:              var(--maurin-font-primary);

    /* ----------------------------------------------------------------------
       4a-bis. TOKENS SPÉCIFIQUES — FOOTER
       Lus par franck-footer-renault.css.
       ---------------------------------------------------------------------- */

    --theme-footer-bg:                   var(--renault-black);     /* corps du footer */
    --theme-footer-text-color:           var(--renault-white);
    --theme-footer-title-color:          var(--renault-white);
    --theme-footer-link-color:           var(--renault-white);
    --theme-footer-link-hover-color:     var(--renault-white);
    --theme-footer-accent:               var(--renault-yellow);    /* soulignement liens */
    --theme-footer-topbar-bg:            var(--renault-white);     /* barre « retour en haut » */
    --theme-footer-topbar-text-color:    var(--renault-black);
    --theme-footer-bottombar-bg:         var(--renault-white);     /* barre mentions légales */
    --theme-footer-bottombar-text-color: var(--renault-black);
    --theme-footer-font:                 var(--maurin-font-primary);

    /* ----------------------------------------------------------------------
       4b. TOKENS SPÉCIFIQUES — BOUTONS RENAULT 3 NIVEAUX (doc Q8)
       Prêts pour les widgets gamme / offres (non utilisés par le header).
         super-primary = JAUNE (action très importante)
         primary       = NOIR  (action normale)
         secondary     = BLANC bordé (action secondaire)
       ---------------------------------------------------------------------- */

    --theme-btn-radius: 0px;

    --theme-btn-super-primary-bg:          var(--renault-yellow);
    --theme-btn-super-primary-color:       var(--renault-black);
    --theme-btn-super-primary-bg-hover:    var(--renault-yellow-hover);
    --theme-btn-super-primary-color-hover: var(--renault-black);

    --theme-btn-primary-bg:          var(--renault-black);
    --theme-btn-primary-color:       var(--renault-white);
    --theme-btn-primary-bg-hover:    var(--renault-black-hover);
    --theme-btn-primary-color-hover: var(--renault-white);

    --theme-btn-secondary-bg:           var(--renault-white);
    --theme-btn-secondary-color:        var(--renault-black);
    --theme-btn-secondary-border-color: var(--renault-black);
    --theme-btn-secondary-bg-hover:     var(--renault-gray-light);
    --theme-btn-secondary-color-hover:  var(--renault-black);
}


/* ==========================================================================
   Classes utilitaires (parité avec theme-maurin.css)
   ========================================================================== */

.theme-text-primary   { color: var(--maurin-primary); }
.theme-text-secondary { color: var(--maurin-secondary); }
.theme-text-accent    { color: var(--maurin-accent); }
.theme-bg-soft        { background-color: var(--maurin-bg-soft); }
.theme-bg-primary     { background-color: var(--maurin-primary); }
.theme-border-accent  { border-color: var(--maurin-accent); }

html, body {
    font-family: var(--theme-font-primary, 'NouvelR', 'Work Sans', sans-serif) !important;
}


/* ==========================================================================
   OVERRIDES "CHARTE" — composants Maurin réutilisés sur Renault
   --------------------------------------------------------------------------
   Règles de marque appliquées SANS forker les composants partagés.
   Un bloc par composant ; à compléter au fur et à mesure des widgets activés.
   (Chargé front + builder via theme-maurin-renault.css.)
   ========================================================================== */

/* franck-cards-static : titres en MAJUSCULES + en-tête centré (Figma Renault).
   - text-transform : aucun conflit (le composant n'en applique pas).
   - text-align en !important : le CSS du composant est chargé APRÈS le thème
     et gagnerait sinon. Effet de bord assumé : le réglage « Position » du
     form est neutralisé pour Renault (titres toujours centrés). */
/* franck-page-heading : titre H1 en MAJUSCULES (charte Renault).
   text-transform seul : le composant n'emet pas de text-transform inline -> pas de !important.
   Centrage + taille 35px NON geres ici : pilotes par les tokens
   --theme-title-align / --theme-h1-size (bloc 3. TOKENS SEMANTIQUES),
   ce qui preserve la surcharge par section. */
.fph-title { text-transform: uppercase; }

.franck-cards-static__title {
    text-transform: uppercase;
    font-weight: 700 !important;       /* Figma : 700 Bold */
    line-height: 40px !important;      /* Figma : line-height 40px (titre 35px) */
    letter-spacing: 0 !important;
}
.franck-cards-static__subtitle {
    font-weight: 400 !important;       /* Figma : 400 Regular */
    line-height: 22px !important;      /* Figma : line-height 22px (sous-titre 20px) */
    letter-spacing: 0 !important;
}
/* MAJUSCULES (titre) + en-tête centré (titre, sous-titre, pré-titre) */
.franck-cards-static__eyebrow,
.franck-cards-static__title,
.franck-cards-static__subtitle { text-align: center !important; }


/* franck-two-lines-img-text : en-tête de section centré + titre MAJUSCULES
   (parité franck-cards-static — convention Renault). text-align en !important :
   la CSS du composant est chargée APRÈS le thème et gagnerait sinon, et ça bat
   aussi l'inline --f2lit-title-align posé par le Twig. Effet de bord assumé :
   le réglage « Position » de l'en-tête du form est neutralisé pour Renault.
   Ne touche PAS aux block-titles des lignes (laissés alignés à gauche). */
.franck-two-lines-img-text__title {
    text-transform: uppercase;
    letter-spacing: 0 !important;   /* neutralise le -0.02em du composant (tracking serré en MAJ) */
    font-size: 35px !important;     /* taille titre Renault */
}
.franck-two-lines-img-text__subtitle {
   font-size: 20px !important;     /* taille sous-titre Renault */
}
.franck-two-lines-img-text__eyebrow,
.franck-two-lines-img-text__title,
.franck-two-lines-img-text__subtitle,
.franck-two-lines-img-text__section-text { text-align: center !important; }


/* franck-faq-with-picture : en-tête de section centré + titre MAJUSCULES (charte Renault).
   text-align !important sur le __header : la CSS du composant est chargée APRÈS le thème
   et gagnerait sinon ; ça bat aussi l'inline --ffaq-title-align posé par le Twig.
   Le centrage cascade sur eyebrow / title / subtitle / section-text (tous enfants du header).
   Effet de bord assumé : le réglage « Position » de l'en-tête du form est neutralisé pour Renault. */
.franck-faq-with-picture__header { text-align: center !important; }
.franck-faq-with-picture__title {
   text-transform: uppercase;
   letter-spacing: 0 !important;   /* neutralise le -0.02em du composant (tracking serré en MAJ) */
   font-size: 35px !important;     /* taille titre Renault */
}
.franck-faq-with-picture__subtitle {
   font-size: 20px !important;     /* taille sous-titre Renault */
}
.franck-two-lines-img-text__eyebrow,
.franck-two-lines-img-text__title,
.franck-two-lines-img-text__subtitle,
.franck-two-lines-img-text__section-text { text-align: center !important; }

/* franck-slider-banner-cta : en-tête de section centré + titre MAJUSCULES (charte Renault).
   text-align !important sur le __header : la CSS du composant est chargée APRÈS le thème
   et gagnerait sinon ; ça bat aussi l'inline --ffaq-title-align posé par le Twig.
   Le centrage cascade sur eyebrow / title / subtitle / section-text (tous enfants du header).
   Effet de bord assumé : le réglage « Position » de l'en-tête du form est neutralisé pour Renault. */

   .franck-slider-banner-cta__header {
      text-align: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
   }
   Le __header
   
.franck-slider-banner-cta__title {
   text-transform: uppercase;
   letter-spacing: 0 !important;   /* neutralise le -0.02em du composant (tracking serré en MAJ) */
   font-size: 35px !important;     /* taille titre Renault */
}
.franck-slider-banner-cta__subtitle {
   font-size: 20px !important;     /* taille sous-titre Renault */
}
.franck-slider-banner-cta__eyebrow,
.franck-slider-banner-cta__title,
.franck-slider-banner-cta__subtitle,
.franck-slider-banner-cta__section-text { text-align: center !important; }

.franck-slider-banner-cta__slider {
   margin-left: auto !important;
   margin-right: auto !important;
}

/* franck-faq-with-picture : titre de section MAJUSCULES + centré ; accordéon
   noir (fermé) -> jaune (ouvert) ; design angulaire (radius 0).
   Rappel : police, couleurs de texte et eyebrow MAJUSCULES sont déjà hérités
   des tokens -> non répétés ici. */

/* 1. Titre de section en MAJUSCULES (le composant n'applique aucun transform,
      donc pas de !important ; les questions ne sont PAS touchées). */
.franck-faq-with-picture__title { text-transform: uppercase; }

/* En-tête centré. text-align en !important car le composant émet
   text-align via --ffaq-title-align (réglage « Position » du form) et sa CSS
   est chargée APRÈS le thème. Effet de bord assumé : alignement de l'entête
   figé centré pour Renault (entraîne eyebrow + sous-titre avec le titre). */
.franck-faq-with-picture__header {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

/* 2. Accordéon FERMÉ : liseré noir + icône « + » noire.
      Les barres ::before/::after utilisent currentColor = color de
      __question-icon, donc on recolore l'icône sans toucher au texte. */
.franck-faq-with-picture__accordion     { border-top-color: var(--renault-black) !important; }
.franck-faq-with-picture__item          { border-bottom-color: var(--renault-black) !important; }
.franck-faq-with-picture__question-icon { color: var(--renault-black); }

/* Accordéon OUVERT : liseré jaune + icône « − » jaune (la barre verticale
   disparaît déjà via .is-open dans le composant -> reste « − »). */
.franck-faq-with-picture__item.is-open { border-bottom-color: var(--renault-yellow) !important; }
.franck-faq-with-picture__item.is-open .franck-faq-with-picture__question-icon { color: var(--renault-yellow); }

/* 3. Design angulaire : arrondis à 0. Valeurs littérales dans le composant
      (28px / 999px / 14px) ou pilotées par --ffaq-card-radius -> !important.
      Boutons rendus rectangulaires (charte Renault). */
.franck-faq-with-picture__main-card,
.franck-faq-with-picture-wrapper--container .franck-faq-with-picture,
.franck-faq-with-picture__answer-media,
.franck-faq-with-picture__button,
.franck-faq-with-picture__answer-button { border-radius: 0 !important; }

/* Renault : chevron à la place du +/− (carré invisible 24×24, chevron 13×8) */
.franck-faq-with-picture__question-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}
/* on supprime la barre verticale du +/− */
.franck-faq-with-picture__question-icon::after { display: none !important; }
/* on transforme la barre horizontale en chevron BAS (état fermé) */
.franck-faq-with-picture__question-icon::before {
    width: 13px !important;
    height: 8px !important;
    border-radius: 0 !important;
    background: currentColor !important;   /* couleur = état : noir / jaune */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1 1.5 6.5 6.5 12 1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 8px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1 1.5 6.5 6.5 12 1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 8px no-repeat;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: transform .25s ease;
}
/* ouvert : chevron HAUT (la couleur jaune vient déjà de la règle .is-open) */
.franck-faq-with-picture__item.is-open .franck-faq-with-picture__question-icon::before {
    transform: translate(-50%, -50%) rotate(180deg);
}

/* Renault : espace entre la réponse et le liseré.
   On porte l'espace sur l'ITEM (hors de la zone overflow:hidden que le JS pilote
   en max-height), sinon il est rogné dès que le JS sous-mesure la hauteur
   — d'où l'espace qui ne tient que devtools ouvert. */
.franck-faq-with-picture__item.is-open {
    padding-bottom: 32px;          /* ajuste à ton goût */
}
.franck-faq-with-picture__item.is-open .franck-faq-with-picture__answer {
    padding-bottom: 0 !important;  /* on vide le padding interne (zone rognée) */
}




/* franck-gamme-neuve : titre charte — MAJUSCULES + 700 + line-height 40, centré.
   Même convention que franck-cards-static. !important car le CSS du composant
   est chargé APRÈS le thème. (Taille 35px : voir note ci-dessous.) */
.franck-gamme-neuve__title {
    text-transform: uppercase;
    font-weight: 700 !important;
    line-height: 40px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}
.franck-gamme-neuve__title { font-size: 35px !important; }
.franck-gamme-neuve__title { font-size: 35px !important; }

/* franck-carousel-renault-insight : titre de section en MAJUSCULES (charte Renault, cf. RENAULT.txt §3).
   text-transform en !important par securite (le CSS du composant est charge APRES le theme).
   La taille 35px est geree en amont par le token titleSize de theme-tokens.js (cf. §6) : rien a faire ici. */
.franck-carousel-renault-insight__title {
    text-transform: uppercase !important;
}


/* ===== FLUV-RENAULT-OVERRIDES : franck-latest-usedcars (derniers VO) =====
   Composant Maurin reutilise sur Renault ; sa CSS verte est chargee par le twig,
   on gagne via !important tout en respectant les variables --fk-* du Page Builder. */
.franck-latest-usedcars__section-title {
    color: var(--fk-section-title-color, var(--renault-black, #000)) !important;
    font-size: var(--fk-section-title-size, 35px) !important;
    text-transform: uppercase !important;
}
.franck-latest-usedcars__section-subtitle {
    color: var(--fk-section-subtitle-color, var(--renault-black, #000)) !important;
    font-size: var(--fk-section-subtitle-size, 20px) !important;
    text-align: var(--fk-section-title-align, center) !important;
}

.franck-latest-usedcars__card,
.franck-latest-usedcars__price-box,
.franck-latest-usedcars__button,
.franck-latest-usedcars__all-button { border-radius: 0 !important; }

.franck-latest-usedcars__title-band,
.franck-latest-usedcars__price-box { background: var(--renault-gray-light, #f4f4f4) !important; }

.franck-latest-usedcars__brand,
.franck-latest-usedcars__specs i,
.franck-latest-usedcars__monthly strong,
.franck-latest-usedcars__monthly em { color: var(--renault-black, #000) !important; }

.franck-latest-usedcars__button {
    background: var(--fk-button-bg, var(--renault-black, #000)) !important;
    color: var(--fk-button-text, var(--renault-white, #fff)) !important;
    box-shadow: none !important;
}
.franck-latest-usedcars__button:hover {
    background: var(--fk-button-hover-bg, var(--renault-black-hover, #1a1a1a)) !important;
    color: var(--fk-button-hover-text, var(--renault-white, #fff)) !important;
}
.franck-latest-usedcars__all-button {
    background: var(--fk-all-button-bg, var(--renault-black, #000)) !important;
    color: var(--fk-all-button-text, var(--renault-white, #fff)) !important;
    box-shadow: none !important;
}
.franck-latest-usedcars__all-button:hover {
    background: var(--fk-all-button-hover-bg, var(--renault-black-hover, #1a1a1a)) !important;
    color: var(--fk-all-button-hover-text, var(--renault-white, #fff)) !important;
}

.franck-latest-usedcars__card:hover { border-color: var(--renault-yellow, #efdf00) !important; }

/* Typo NouvelR + tailles charte (titre 35 / sous-titre 20) + entete centree par defaut */
.franck-latest-usedcars-wrapper,
.franck-latest-usedcars__section-title,
.franck-latest-usedcars__section-subtitle,
.franck-latest-usedcars__section-text {
    font-family: 'NouvelR', 'Jost', 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}
.franck-latest-usedcars-wrapper {
    --fluv-section-title-size: 35px;
    --fluv-section-subtitle-size: 20px;
}
.franck-latest-usedcars__header-row {
    flex-direction: column !important;
    align-items: var(--fk-header-align-items, center) !important;
}
.franck-latest-usedcars__header {
    max-width: var(--fk-section-header-max-width, 100%) !important;
    text-align: var(--fk-section-title-align, center) !important;
}
.franck-latest-usedcars__actions { justify-content: var(--fk-header-align-items, center) !important; }

/* ---- Card Renault (markup dedie emis par renderCarCard) ---- */
.franck-latest-usedcars-wrapper { --fluv-image-ratio: 57% !important; }
.franck-latest-usedcars__card--renault { background: var(--fk-card-bg, #fff) !important; }
.flur-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.flur-card__name { margin: 0; font-weight: 700; font-size: 18px; line-height: 22px; text-transform: uppercase; color: var(--renault-black, #000); }
.flur-card__version { margin: 0; font-weight: 400; font-size: 16px; line-height: 16px; color: var(--renault-black, #000); }
.flur-card__specs { margin: 4px 0 0; font-weight: 400; font-size: 12px; line-height: 16px; color: var(--renault-black, #000); }
.flur-card__price { margin: 8px 0 0; font-weight: 700; font-size: 18px; line-height: 22px; color: var(--renault-black, #000); }
.flur-card__monthly { margin: 2px 0 0; font-weight: 700; font-size: 14px; line-height: 18px; text-transform: lowercase; color: var(--renault-black, #000); display: inline-flex; align-items: center; gap: 6px; }
.flur-card__monthly .finance-modal { display: inline-flex; align-items: center; justify-content: center; line-height: 1; color: #666; transition: color .2s, transform .2s; cursor: pointer; vertical-align: middle; }
.flur-card__monthly .finance-modal:hover { color: #000; transform: scale(1.15); }
.flur-card__dealer { margin: 8px 0 0; font-weight: 400; font-size: 12px; line-height: 16px; color: var(--renault-black, #000); }
.franck-latest-usedcars__card--renault .franck-latest-usedcars__button {
    border: 1px solid var(--fk-button-bg, var(--renault-black, #000)) !important;
    border-radius: 0 !important;
    padding: 11px 18px !important;
    gap: 9px !important;
    background: var(--fk-button-bg, var(--renault-black, #000)) !important;
    color: var(--fk-button-text, var(--renault-white, #fff)) !important;
    box-shadow: none !important;
}
.franck-latest-usedcars__card--renault .franck-latest-usedcars__button:hover {
    background: var(--fk-button-hover-bg, var(--renault-white, #fff)) !important;
    color: var(--fk-button-hover-text, var(--renault-black, #000)) !important;
}

/* FLUV-RENAULT-DEALER-BOTTOM : concession alignee en bas, meme sans mensualite */
.franck-latest-usedcars__card--renault .flur-card__body { flex: 1 1 auto; }
.franck-latest-usedcars__card--renault .flur-card__dealer { margin-top: auto; }

/* ---- Carrousel Renault : fleches sur les cotes + dots dessous ---- */
.franck-latest-usedcars__viewport { position: relative; }
.franck-latest-usedcars__viewport .franck-latest-usedcars__control {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 32px; height: 60px; min-width: 0; padding: 0;
    border: none; border-radius: 0;
    background: var(--renault-black, #000); color: var(--renault-white, #fff);
}
.franck-latest-usedcars__viewport [data-fluv-prev] { left: 0; }
.franck-latest-usedcars__viewport [data-fluv-next] { right: 0; }
.franck-latest-usedcars__viewport .franck-latest-usedcars__control:hover:not(:disabled) {
    background: var(--renault-black-hover, #1a1a1a); color: var(--renault-white, #fff);
    transform: translateY(-50%); box-shadow: none;
}
.franck-latest-usedcars__viewport .franck-latest-usedcars__control:disabled { opacity: .35; }

.franck-latest-usedcars__controls.flur-dots {
    display: flex; justify-content: center; align-items: center;
    gap: 10px; margin-top: 20px;
}
.flur-dot {
    width: 14px; height: 14px; padding: 0; cursor: pointer;
    border: 2px solid var(--renault-yellow, #efdf00); border-radius: 999px;
    background: transparent;
}
.flur-dot.is-active { background: var(--renault-yellow, #efdf00); }

/* FLUV-RENAULT-CARD-SPACING : rythme plus aere + CTA compact (hug content) */
.franck-latest-usedcars__card--renault .flur-card__body { gap: 0; padding: 16px 16px 0; }
.franck-latest-usedcars__card--renault .flur-card__version { margin-top: 6px; }
.franck-latest-usedcars__card--renault .flur-card__specs   { margin-top: 8px; }
.franck-latest-usedcars__card--renault .flur-card__price   { margin-top: 24px; }
.franck-latest-usedcars__card--renault .flur-card__monthly { margin-top: 16px; }
.franck-latest-usedcars__card--renault .flur-card__dealer  { margin-top: auto; padding-top: 24px; }
.franck-latest-usedcars__card--renault .franck-latest-usedcars__button {
    align-self: flex-start; width: auto; min-width: 0; min-height: 0;
    margin: 24px 16px 16px;
}

/* ---- Listing VO Renault (franck-listing-used-cars) ---- */
.franck-listing-used-cars {
    --fluc-card-radius: var(--theme-card-radius, 0px) !important;
    --fluc-button-radius: var(--theme-button-radius, 0px) !important;
}
.franck-listing-used-cars__card,
.franck-listing-used-cars__card--renault {
    border-radius: var(--theme-card-radius, 0px) !important;
    background: #ffffff !important;
    border: 1px solid #d8dee8 !important;
}
.franck-listing-used-cars__card--renault .flur-card__cta,
.franck-listing-used-cars__card--renault .franck-listing-used-cars__button,
.franck-listing-used-cars__button {
    border: 1px solid var(--renault-black, #000) !important;
    border-radius: var(--theme-button-radius, 0px) !important;
    padding: 11px 18px !important;
    gap: 9px !important;
    background: var(--renault-black, #000) !important;
    color: var(--renault-white, #fff) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}
.franck-listing-used-cars__card--renault .flur-card__cta:hover,
.franck-listing-used-cars__card--renault .franck-listing-used-cars__button:hover,
.franck-listing-used-cars__button:hover {
    background: var(--renault-white, #fff) !important;
    color: var(--renault-black, #000) !important;
}
.franck-listing-used-cars__topbar {
    border-radius: var(--theme-card-radius, 0px) !important;
}
.franck-listing-used-cars__sort .form-select {
    border-radius: var(--theme-button-radius, 0px) !important;
}
.franck-listing-used-cars__specs div,
.franck-listing-used-cars__specs .fluc-spec-pill {
    border-radius: var(--theme-card-radius, 0px) !important;
}
.franck-listing-used-cars__price-box {
    border-radius: var(--theme-card-radius, 0px) !important;
}
.franck-listing-used-cars__promo-card {
    border-radius: var(--theme-card-radius, 0px) !important;
}
.franck-listing-used-cars__promo-content strong {
    border-radius: var(--theme-card-radius, 0px) !important;
}
.franck-listing-used-cars__promo-button {
    border-radius: var(--theme-button-radius, 0px) !important;
}
.franck-listing-used-cars__pagination-shell {
    border-radius: var(--theme-button-radius, 0px) !important;
}
.franck-listing-used-cars .offers-pager a,
.franck-listing-used-cars .offers-pager button {
    border-radius: var(--theme-button-radius, 0px) !important;
}

/* FLUV-RENAULT-HEADER-FIX : sous-titre 20px reel + bouton global (fleche off, hover invert) */
.franck-latest-usedcars-wrapper .franck-latest-usedcars__section-subtitle {
    font-size: 20px !important;
    line-height: 1.4 !important;
}
.franck-latest-usedcars__all-button span { display: none !important; }
.franck-latest-usedcars-wrapper .franck-latest-usedcars__all-button {
    border: 1px solid var(--renault-black, #000) !important;
}
.franck-latest-usedcars-wrapper .franck-latest-usedcars__all-button:hover {
    background: var(--renault-white, #fff) !important;
    color: var(--renault-black, #000) !important;
}

/* FLUV-RENAULT-SUBTITLE-WEIGHT : sous-titre en Regular 400 */
.franck-latest-usedcars-wrapper .franck-latest-usedcars__section-subtitle { font-weight: 400 !important; }
/* ===== /FLUV-RENAULT-OVERRIDES ===== */