/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   GARAGE DEBENAT — feuille de style du thème enfant
   Source unique du CSS personnalisé. Rien dans WPCode, rien dans Elementor.
   Charte : rouge Citroën #E30613 en accent strict, base blanche et gris froid,
   Archivo en deux largeurs, aucune ombre, rayons 4 px, tout aligné à gauche.
   ========================================================================== */

/* --- 1. Jetons de charte ------------------------------------------------- */
:root{
  --deb-rouge:#E30613;          /* PMS 485 C */
  --deb-rouge-fonce:#B80510;
  --deb-noir:#000000;           /* PMS Black 6 C */
  --deb-argent:#9A9695;         /* PMS 7539 C */
  --deb-blanc:#FFFFFF;
  --deb-gris-fond:#F1F3F4;
  --deb-gris-ligne:#DDE0E2;
  --deb-gris-texte:#565B60;
  --deb-anthracite:#2B2F33;
  --deb-bleu:#A8C5D6;           /* Monte Carlo — valeur à confirmer */

  --deb-rayon:4px;
  --deb-max:1180px;

  /* Police du site. Bascule automatiquement sur la police de marque Citroën
     si ses fichiers sous licence réseau sont déposés dans fonts/citroen/.
     Voir novamira-sandbox/debenat-police.php pour la procédure. */
  --deb-police:'Archivo',system-ui,-apple-system,sans-serif;

  --deb-e1:8px;  --deb-e2:16px; --deb-e3:24px;
  --deb-e4:40px; --deb-e5:64px; --deb-e6:96px;
}

/* --- 2. Typographie ------------------------------------------------------ */
body{
  font-family:var(--deb-police);
  font-variation-settings:'wdth' 100,'wght' 400;
  color:var(--deb-noir);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{letter-spacing:-.015em;line-height:1.12}
h1{font-variation-settings:'wdth' 112,'wght' 700}
h2{font-variation-settings:'wdth' 108,'wght' 700}
h3{font-variation-settings:'wdth' 104,'wght' 700}
h4{font-variation-settings:'wdth' 100,'wght' 600}

/* --- 3. Garde-fous de charte --------------------------------------------- */
/* Aucune ombre nulle part, sauf en-tête collant. Aucun dégradé. */
.elementor-widget-container,
.e-con-inner,
.deb-carte{box-shadow:none}

:focus-visible{outline:2px solid var(--deb-rouge);outline-offset:3px}

/* --- 4. Pictogrammes ----------------------------------------------------- */
.deb-ico{
  width:1em;height:1em;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.14em;
}
.deb-ico--fin{stroke-width:1.4}
.deb-avec-ico{display:flex;align-items:center;gap:8px}

/* --- 5. Carte véhicule --------------------------------------------------- */
.deb-vcard{
  border:1px solid var(--deb-gris-ligne);
  border-top:3px solid var(--deb-rouge);
  border-radius:var(--deb-rayon);
  background:var(--deb-blanc);
  overflow:hidden;display:flex;flex-direction:column;height:100%;
}
.deb-vcard__media{aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--deb-gris-ligne);background:var(--deb-gris-fond)}
.deb-vcard__media img{width:100%;height:100%;object-fit:cover}
.deb-vcard__body{padding:var(--deb-e3);display:flex;flex-direction:column;flex:1}
.deb-vcard__marque{font-size:13px;color:var(--deb-gris-texte);font-variation-settings:'wdth' 100,'wght' 600}
.deb-vcard__modele{font-size:18px;line-height:1.2;margin:4px 0 var(--deb-e2);font-variation-settings:'wdth' 104,'wght' 700}
.deb-vcard__modele a{text-decoration:none;color:inherit}
.deb-vcard__modele a:hover{color:var(--deb-rouge)}
.deb-vcard__specs{
  display:grid;grid-template-columns:1fr 1fr;gap:5px var(--deb-e2);
  font-size:13px;color:var(--deb-gris-texte);
  border-top:1px solid var(--deb-gris-ligne);padding-top:var(--deb-e2);margin-bottom:var(--deb-e2);
}
.deb-vcard__specs span{display:flex;align-items:center;gap:6px}
.deb-vcard__specs .deb-ico{font-size:15px;color:var(--deb-argent)}
.deb-vcard__prix{font-size:25px;font-variation-settings:'wdth' 108,'wght' 700;margin-top:auto}

/* --- 6. Badges ----------------------------------------------------------- */
.deb-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--deb-e2)}
.deb-badge{
  font-size:12px;font-variation-settings:'wdth' 100,'wght' 600;
  padding:5px 9px;border-radius:var(--deb-rayon);
  background:var(--deb-anthracite);color:var(--deb-blanc);
}
.deb-badge--energie{background:var(--deb-bleu);color:var(--deb-noir)}
.deb-badge--garantie{background:transparent;color:var(--deb-noir);border:1px solid var(--deb-noir)}
.deb-badge--baisse{background:var(--deb-rouge);color:var(--deb-blanc)}
.deb-badge--vendu{background:var(--deb-argent);color:var(--deb-blanc)}

/* --- 7. Carte service ---------------------------------------------------- */
.deb-scard{border-left:2px solid var(--deb-noir);padding-left:var(--deb-e3)}
.deb-scard__t{font-size:20px;margin-bottom:var(--deb-e1);font-variation-settings:'wdth' 104,'wght' 700}
.deb-scard__t .deb-ico{font-size:26px;color:var(--deb-rouge)}
.deb-scard__d{font-size:15px;color:var(--deb-gris-texte);max-width:46ch}

/* --- 8. Fiche véhicule : chiffres clés ----------------------------------- */
.deb-cles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--deb-gris-ligne);border:1px solid var(--deb-gris-ligne);
  border-radius:var(--deb-rayon);overflow:hidden;
}
.deb-cle{background:var(--deb-blanc);padding:var(--deb-e3)}
.deb-cle__ico{font-size:26px;color:var(--deb-rouge);line-height:1;margin-bottom:var(--deb-e1)}
.deb-cle__l{font-size:12px;color:var(--deb-gris-texte)}
.deb-cle__v{font-size:22px;line-height:1.15;font-variation-settings:'wdth' 106,'wght' 700;margin-top:4px}
@media (max-width:767px){ .deb-cles{grid-template-columns:1fr 1fr} }

/* --- 9. Boutons ---------------------------------------------------------- */
.deb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:15px;font-variation-settings:'wdth' 100,'wght' 600;
  padding:14px 22px;border-radius:var(--deb-rayon);border:1px solid transparent;
  text-decoration:none;transition:background .15s,color .15s,border-color .15s;
}
.deb-btn--primaire{background:var(--deb-rouge);color:var(--deb-blanc)}
.deb-btn--primaire:hover{background:var(--deb-rouge-fonce);color:var(--deb-blanc)}
.deb-btn--secondaire{background:transparent;color:var(--deb-noir);border-color:var(--deb-noir)}
.deb-btn--secondaire:hover{background:var(--deb-noir);color:var(--deb-blanc)}

/* --- 9 bis. Lien de carte service ---------------------------------------- */
.deb-scard__l{
  display:inline-block;margin-top:var(--deb-e2);font-size:14px;
  font-variation-settings:'wdth' 100,'wght' 600;text-decoration:none;color:var(--deb-noir);
  border-bottom:1px solid var(--deb-rouge);padding-bottom:2px;
}
.deb-scard__l:hover{color:var(--deb-rouge)}

/* --- 9 ter. En-tête et bandeau supérieur --------------------------------- */
.deb-topbar p{margin:0}
.deb-topbar a{color:inherit;text-decoration:none}
.deb-topbar a:hover{text-decoration:underline}
.deb-header{box-shadow:none}
.deb-header.elementor-sticky--effects{border-bottom-color:var(--deb-gris-ligne)}
.deb-logo{text-decoration:none}
.deb-footer p{margin:0 0 10px}
.deb-footer a{text-decoration:none}
.deb-footer a:hover{text-decoration:underline}

/* --- 9 quater. Emplacement photo à fournir ------------------------------- */
/* Visible en préprod uniquement : marque les photos que le client doit shooter. */
.deb-photo-a-fournir{
  background:var(--deb-gris-fond);
  border:1px dashed var(--deb-argent);
  border-radius:var(--deb-rayon);
  min-height:320px;display:flex;align-items:center;justify-content:center;
  padding:var(--deb-e3);text-align:center;
}
.deb-photo-a-fournir p{
  font-size:13px;color:var(--deb-gris-texte);max-width:34ch;margin:0;line-height:1.45;
}

/* --- 9 quinquies. Carte de la grille de boucle --------------------------- */
/* Le widget Loop Grid enveloppe chaque élément : on neutralise ses marges. */
.deb-vcard .elementor-widget{margin-bottom:0}
.deb-vcard .elementor-widget-shortcode{width:100%}

/* Filet rouge de charte en haut de carte.
   Elementor ne pilote qu'une seule couleur pour les quatre côtés : la couleur
   grise est réglée dans l'éditeur, le rouge du haut se force ici. */
.elementor .e-con.deb-vcard,
.elementor .elementor-element.deb-vcard{border-top-color:var(--deb-rouge)}

/* Hauteur égale : les cartes d'une même rangée se calent sur la plus haute. */
.elementor-loop-container .deb-vcard{height:100%}

/* Photo du véhicule : cadrage 4/3 constant quelle que soit la source. */
.deb-vcard__media,
.deb-vcard .elementor-widget-theme-post-featured-image{width:100%}
.deb-vcard .elementor-widget-theme-post-featured-image img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:0;
}

/* Le bloc caractéristiques + prix est poussé en bas : les prix s'alignent
   d'une carte à l'autre même quand les titres n'ont pas le même nombre de lignes. */
.deb-vcard__pied{margin-top:auto;padding-top:var(--deb-e2)}
.deb-vcard__specs span{min-width:0}
.deb-vcard__ht{font-size:13px;color:var(--deb-gris-texte);margin-top:2px}

/* Titre de carte : le lien hérite de la couleur, le rouge ne sert qu'au survol.
   La typographie est fixée ici et non dans Elementor : le CSS d'un modèle de
   boucle n'est pas généré en fichier, les réglages du widget restaient sans
   effet et le titre retombait sur la police de secours en serif. */
.deb-vcard .elementor-widget-theme-post-title,
.deb-vcard .elementor-widget-theme-post-title .elementor-heading-title{
  /* !important assumé : Elementor injecte sa règle de titre en <style> dans le
     corps de page, après cette feuille, en pointant sur une variable globale.
     C'est le seul moyen fiable de tenir la police dans un modèle de boucle. */
  font-family:var(--deb-police) !important;
  font-size:18px !important;line-height:1.2 !important;
  font-weight:700 !important;font-variation-settings:'wdth' 104,'wght' 700;
  letter-spacing:-.005em !important;color:var(--deb-noir);
}
.deb-vcard .elementor-widget-theme-post-title{margin:4px 0 16px}
.deb-vcard .elementor-widget-theme-post-title a{color:inherit;text-decoration:none}
.deb-vcard .elementor-widget-theme-post-title a:hover,.deb-vcard .elementor-widget-theme-post-title a:focus-visible{color:#B80510}
/* Titre des cartes en rouge Citroën (liste des occasions), survol en « Rouge survol » du kit. */
.deb-vcard .elementor-widget-theme-post-title .elementor-heading-title{color:var(--deb-rouge) !important}

/* --- Fond et survol de carte --------------------------------------------
   La charte proscrit l'ombre portée sur les blocs statiques. Exception
   assumée ici : la carte est cliquable, l'ombre au survol signale
   l'interaction. Elle n'existe pas au repos. */
body .elementor .e-con.deb-vcard{
  background-color:var(--deb-blanc) !important;
  border-top-color:var(--deb-rouge);
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
body .elementor .e-con.deb-vcard:hover,
body .elementor .e-con.deb-vcard:focus-within{
  box-shadow:0 10px 28px rgba(0,0,0,.11);
  transform:translateY(-2px);
  /* Le filet supérieur reste rouge Citroën et se renforce ; seuls les trois
     autres côtés passent en gris soutenu. Elementor ne pilotant qu'une seule
     couleur pour les quatre bords, la distinction se fait ici. */
  border-top-color:var(--deb-rouge);
  border-right-color:var(--deb-argent);
  border-bottom-color:var(--deb-argent);
  border-left-color:var(--deb-argent);
}
body .elementor .e-con.deb-vcard:hover .deb-vcard__media img{transform:scale(1.03)}
.deb-vcard .elementor-widget-theme-post-featured-image img{transition:transform .25s ease}

/* --- 9 sexies. Chiffres clés et actualités de l'accueil ------------------ */
.deb-trust__n{font-size:32px;line-height:1;font-variation-settings:'wdth' 108,'wght' 700;color:var(--deb-noir);margin:0}
.deb-trust__l{font-size:14px;color:var(--deb-gris-texte);margin-top:8px;line-height:1.45;max-width:24ch}
.deb-cle__ico{font-size:28px;color:var(--deb-rouge);line-height:1;margin:0 0 var(--deb-e1)}
.deb-actu__t{font-size:19px;line-height:1.25;font-variation-settings:'wdth' 104,'wght' 700;margin:6px 0 8px;color:var(--deb-noir)}
.deb-actu__d{font-size:15px;color:var(--deb-gris-texte);margin:0;max-width:40ch}

/* ==========================================================================
   11. FICHE VÉHICULE
   ========================================================================== */

/* --- Galerie ------------------------------------------------------------- */
.deb-galerie__scene{
  position:relative;background:var(--deb-gris-fond);border-radius:var(--deb-rayon);
  overflow:hidden;aspect-ratio:3/2;
}
.deb-galerie__photo{width:100%;height:100%;object-fit:cover;display:block}
.deb-galerie__compteur{
  position:absolute;right:var(--deb-e2);bottom:var(--deb-e2);
  background:rgba(0,0,0,.78);color:var(--deb-blanc);font-size:13px;
  font-variation-settings:'wdth' 100,'wght' 600;padding:6px 12px;border-radius:var(--deb-rayon);
}
.deb-galerie__etiquette{
  position:absolute;left:var(--deb-e2);top:var(--deb-e2);z-index:2;
  background:var(--deb-rouge);color:var(--deb-blanc);font-size:13px;
  font-variation-settings:'wdth' 100,'wght' 600;padding:7px 13px;border-radius:var(--deb-rayon);
}
.deb-galerie__fleche{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  background:var(--deb-blanc);border:1px solid var(--deb-gris-ligne);color:var(--deb-noir);
  width:44px;height:44px;border-radius:var(--deb-rayon);cursor:pointer;
  display:grid;place-items:center;padding:0;
}
.deb-galerie__fleche:hover{background:var(--deb-noir);color:var(--deb-blanc);border-color:var(--deb-noir)}
.deb-galerie__fleche .deb-ico{font-size:20px;stroke-width:1.9}
.deb-galerie__fleche--prec{left:var(--deb-e2)}
.deb-galerie__fleche--suiv{right:var(--deb-e2)}
.deb-galerie__bande{
  display:grid;grid-auto-flow:column;grid-auto-columns:96px;gap:var(--deb-e1);
  overflow-x:auto;padding:var(--deb-e2) 0 var(--deb-e1);scrollbar-width:thin;
}
.deb-vign{
  border:0;padding:0;background:var(--deb-gris-fond);border-radius:var(--deb-rayon);
  overflow:hidden;cursor:pointer;aspect-ratio:3/2;opacity:.62;transition:opacity .15s;
}
.deb-vign img{width:100%;height:100%;object-fit:cover;display:block}
.deb-vign:hover{opacity:1}
.deb-vign[aria-current="true"]{opacity:1;outline:2px solid var(--deb-rouge);outline-offset:-2px}

/* --- Visionneuse plein écran --------------------------------------------- */
.deb-viewer{
  position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.94);
  padding:var(--deb-e4) var(--deb-e3);display:grid;place-items:center;
}
.deb-viewer[hidden]{display:none}
.deb-viewer img{max-width:min(1100px,94vw);max-height:82vh;object-fit:contain;border-radius:var(--deb-rayon)}
.deb-viewer__fermer{
  position:absolute;top:var(--deb-e3);right:var(--deb-e3);background:var(--deb-blanc);
  border:0;border-radius:var(--deb-rayon);padding:11px 17px;cursor:pointer;
  font-size:15px;font-variation-settings:'wdth' 100,'wght' 600;
}
.deb-viewer__nb{position:absolute;bottom:var(--deb-e3);left:50%;transform:translateX(-50%);color:var(--deb-blanc);font-size:14px}

/* --- Panneau de prix ----------------------------------------------------- */
.deb-panneau{
  border:1px solid var(--deb-gris-ligne);border-top:3px solid var(--deb-rouge);
  border-radius:var(--deb-rayon);padding:var(--deb-e3);
}
.deb-panneau__prix{
  font-size:42px;line-height:1;margin:0;
  font-variation-settings:'wdth' 110,'wght' 700;letter-spacing:-.02em;
}
.deb-panneau__mention{font-size:13px;color:var(--deb-gris-texte);margin:6px 0 0}

/* --- Caractéristiques ---------------------------------------------------- */
.deb-carac{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--deb-e5);margin:0}
.deb-carac > div{
  display:flex;justify-content:space-between;gap:var(--deb-e2);
  padding:12px 0;border-bottom:1px solid var(--deb-gris-ligne);font-size:15px;
}
.deb-carac dt{color:var(--deb-gris-texte);margin:0}
.deb-carac dd{font-variation-settings:'wdth' 100,'wght' 600;text-align:right;margin:0}

/* --- Équipements --------------------------------------------------------- */
.deb-equip{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--deb-e4) var(--deb-e5)}
.deb-equip__g{border-left:2px solid var(--deb-noir);padding-left:var(--deb-e3)}
.deb-equip__gt{font-size:17px;font-variation-settings:'wdth' 104,'wght' 700;margin:0 0 var(--deb-e2)}
.deb-equip__gt .deb-ico{font-size:22px;color:var(--deb-rouge)}
.deb-equip ul{list-style:none;margin:0;padding:0;font-size:15px;color:var(--deb-gris-texte)}
.deb-equip li{padding:5px 0;border-bottom:1px solid var(--deb-gris-ligne)}

/* --- Engagements --------------------------------------------------------- */
.deb-engagement__t{font-size:16px;font-variation-settings:'wdth' 104,'wght' 700;margin:0 0 6px}
.deb-engagement__t .deb-ico{font-size:24px;color:var(--deb-rouge)}
.deb-engagement__d{font-size:14px;color:var(--deb-gris-texte);line-height:1.45;margin:0}

@media (max-width:767px){
  .deb-carac,.deb-equip{grid-template-columns:1fr;gap:0}
  .deb-equip{gap:var(--deb-e4)}
  .deb-panneau__prix{font-size:34px}
}

/* --- Neutralisation des Theme Styles sur les boutons de galerie ---------
   Les réglages de bouton du Kit Elementor s'appliquent à toute balise <button>,
   pas seulement aux boutons Elementor. Les miniatures et les flèches héritaient
   donc du fond rouge et du padding. On les remet à plat ici, avec une
   spécificité supérieure à celle du Kit. */
.deb-galerie .deb-vign,
.deb-galerie .deb-galerie__fleche,
.deb-viewer .deb-viewer__fermer{
  -webkit-appearance:none;appearance:none;
  font-family:inherit;text-transform:none;letter-spacing:normal;
  box-shadow:none;margin:0;
}
.deb-galerie .deb-vign{
  background:var(--deb-gris-fond);color:inherit;border:0;padding:0;
  border-radius:var(--deb-rayon);overflow:hidden;cursor:pointer;
  aspect-ratio:3/2;opacity:.62;transition:opacity .15s;
}
.deb-galerie .deb-vign:hover{background:var(--deb-gris-fond);opacity:1}
.deb-galerie .deb-vign[aria-current="true"]{opacity:1;outline:2px solid var(--deb-rouge);outline-offset:-2px}
.deb-galerie .deb-galerie__fleche{
  background:var(--deb-blanc);color:var(--deb-noir);
  border:1px solid var(--deb-gris-ligne);padding:0;
  width:44px;height:44px;border-radius:var(--deb-rayon);
  display:grid;place-items:center;cursor:pointer;
}
.deb-galerie .deb-galerie__fleche:hover{background:var(--deb-noir);color:var(--deb-blanc);border-color:var(--deb-noir)}
.deb-viewer .deb-viewer__fermer{
  background:var(--deb-blanc);color:var(--deb-noir);border:0;
  padding:11px 17px;border-radius:var(--deb-rayon);cursor:pointer;
}

/* --- Empêche la bande de miniatures de forcer la largeur de la colonne ----
   Deux causes cumulées faisaient passer le panneau de prix sous la galerie :
   1. Elementor impose width:100% à tout conteneur enfant (.e-con.e-child).
   2. Un élément flex a min-width:auto, et les 22 miniatures de 96 px
      imposaient une largeur minimale de plus de 2000 px.
   On corrige les deux, avec une spécificité supérieure à celle d'Elementor. */
body .elementor .e-con.deb-col-galerie{
  width:auto;flex:1 1 0%;min-width:0;max-width:100%;
}
.deb-galerie,
.deb-galerie__bande,
.deb-col-galerie .elementor-widget-shortcode,
.deb-col-galerie .elementor-widget-container{min-width:0;max-width:100%}

/* Le panneau de prix garde sa largeur sur desktop, passe pleine largeur sous 1024 px. */
body .elementor .e-con.deb-panneau{flex:0 0 auto}
@media (max-width:1024px){
  body .elementor .e-con.deb-col-galerie,
  body .elementor .e-con.deb-panneau{width:100%;flex:1 1 100%}
}

/* ==========================================================================
   12. SÉLECTEUR DE CARROSSERIE
   Silhouettes SVG dessinées pour le projet, en gris neutre. Aucun visuel
   constructeur : les rendus produit des marques sont protégés.
   ========================================================================== */
.deb-carross{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--deb-e3) var(--deb-e2);
}
.deb-carross__item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:var(--deb-e2) var(--deb-e1) var(--deb-e3);
  border:1px solid transparent;border-radius:var(--deb-rayon);
  text-decoration:none;color:var(--deb-noir);
  transition:border-color .15s,background .15s;
}
.deb-carross__item:hover{border-color:var(--deb-gris-ligne);background:var(--deb-blanc)}
.deb-carross__vis{display:block;width:100%;max-width:170px}
.deb-sil{width:100%;height:auto;display:block}
.deb-sil__corps{fill:#B9BDC0}
.deb-sil__vitres{fill:#DDE0E2}
.deb-sil__roue{fill:#6B7075}
.deb-sil__jante{fill:#F1F3F4}
.deb-carross__item:hover .deb-sil__corps{fill:#9A9695}
.deb-carross__nom{
  font-size:15px;font-variation-settings:'wdth' 100,'wght' 600;
  text-align:center;line-height:1.25;
}
.deb-carross__nb{font-size:13px;color:var(--deb-gris-texte);text-align:center}

/* L'entrée « tout le stock » porte l'accent de la charte. */
.deb-carross__item--tous .deb-carross__nom{
  background:var(--deb-rouge);color:var(--deb-blanc);
  padding:6px 14px;border-radius:var(--deb-rayon);
}
.deb-carross__item--tous:hover .deb-carross__nom{background:var(--deb-rouge-fonce)}

@media (max-width:1024px){ .deb-carross{grid-template-columns:repeat(4,1fr)} }
@media (max-width:767px){
  .deb-carross{grid-template-columns:repeat(2,1fr);gap:var(--deb-e2) var(--deb-e1)}
  .deb-carross__nom{font-size:14px}
}

/* ==========================================================================
   13. RANGÉES À COLONNES ÉGALES
   Elementor applique width:100% à tout conteneur enfant en pleine largeur
   (.e-con-full). Deux conteneurs côte à côte réclament donc 200 % et
   s'empilent. La classe deb-cols, posée sur la rangée parente, rend aux
   colonnes une largeur automatique et une base flex nulle : elles se
   partagent la ligne, et ne repassent à la ligne qu'au point de rupture.
   ========================================================================== */
body .elementor .e-con.deb-cols > .e-con{
  width:auto;
  flex:1 1 0%;
  min-width:0;
}
@media (max-width:1024px){
  body .elementor .e-con.deb-cols--2 > .e-con{flex:1 1 100%}
}
@media (max-width:767px){
  body .elementor .e-con.deb-cols > .e-con{flex:1 1 100%}
}

/* --- 10. Accessibilité --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

/* ==========================================================================
   14. CAROUSEL VÉHICULES (ACCUEIL)
   Contrairement aux puces et à la fraction, la pagination « barre de
   progression » d'Elementor n'a pas de réglage de position : Swiper la pose
   par défaut en haut du carousel, collée aux photos. On la sort du flux
   absolu pour la poser sous les cartes, avec un espace.
   ========================================================================== */
.deb-vslider .swiper-pagination{
  position:static;
  margin-top:var(--deb-e3);
  width:100%;
}


/* ==========================================================================
   15. HERO SLIDER ACCUEIL — pleine largeur (texte | image bord à bord)
   Elementor impose width:100% aux conteneurs enfants pleine largeur (cf. 13) :
   on rend les largeurs au flex. La colonne texte aligne son bord gauche sur
   la grille du site (1180 px), l'image file jusqu'au bord droit de l'écran.
   ========================================================================== */
.deb-hero-slider .swiper-slide{overflow:hidden}
body .elementor .e-con.deb-hero-slide > .e-con.deb-hero-txt{
  width:auto;flex:0 0 46%;min-width:0;
  padding:64px 64px 104px max(80px, calc((100vw - 1180px) / 2));
}
body .elementor .e-con.deb-hero-slide > .e-con.deb-hero-img{width:auto;flex:1 1 0%;min-width:0}
body .elementor .e-con.deb-hero-slide .deb-hero-img .elementor-widget-image,
body .elementor .e-con.deb-hero-slide .deb-hero-img .elementor-widget-container{height:100%}
body .elementor .e-con.deb-hero-slide .deb-hero-img img{width:100%;display:block;border-radius:0}
@media (max-width:1024px){
  body .elementor .e-con.deb-hero-slide > .e-con.deb-hero-txt{flex:0 0 50%;padding:48px 40px 88px 72px}
}
@media (max-width:767px){
  body .elementor .e-con.deb-hero-slide > .e-con.deb-hero-txt,
  body .elementor .e-con.deb-hero-slide > .e-con.deb-hero-img{flex:0 0 auto;width:100%}
  body .elementor .e-con.deb-hero-slide > .e-con.deb-hero-txt{padding:32px 20px 76px}
}

/* --- 15b. PUCES DU HERO : dans le bloc texte, jamais sur l'image ---------
   Centrées sur la zone de contenu de la colonne texte :
   milieu = (retrait gauche + 46 % - retrait droit 64 px) / 2. */
.deb-hero-slider .swiper-pagination.swiper-pagination-bullets{
  position:absolute !important;top:auto !important;bottom:72px !important;right:auto;
  left:calc((max(80px, calc((100vw - 1180px) / 2)) + 46% - 64px) / 2);inset-inline-start:calc((max(80px, calc((100vw - 1180px) / 2)) + 46% - 64px) / 2);
  width:auto;transform:translateX(-50%) !important;text-align:center;line-height:0;z-index:5;
}
.deb-hero-slider .swiper-pagination-bullet{margin:0 6px !important;opacity:1;background:#9A9695}
.deb-hero-slider .swiper-pagination-bullet-active{background:#E30613;width:28px;border-radius:5px;transition:width .25s ease}
@media (max-width:1024px){.deb-hero-slider .swiper-pagination.swiper-pagination-bullets{left:calc((50% + 32px) / 2);inset-inline-start:calc((50% + 32px) / 2);bottom:60px !important}}
@media (max-width:767px){.deb-hero-slider .swiper-pagination.swiper-pagination-bullets{left:50%;inset-inline-start:50%;bottom:40px !important}}

/* --- 15c. LISERET ROUGE SOUS LES TITRES DU HERO ---------------------------
   Filet rouge Citroën, même vocabulaire que le filet supérieur des cartes. */
.deb-hero-slide .deb-hero-txt .elementor-heading-title::after{
  content:'';display:block;width:56px;height:3px;margin-top:20px;background:#E30613;
}
@media (max-width:767px){.deb-hero-slide .deb-hero-txt .elementor-heading-title::after{width:44px;margin-top:14px}}

/* --- 15d. IMAGE DU HERO : toujours à la hauteur de la slide --------------
   Le texte peut être plus haut que la photo (liseret, titre sur 3 lignes) :
   une hauteur fixe laissait une bande blanche sous l'image. L'image remplit
   désormais toute la hauteur de sa colonne, avec une hauteur minimale. */
body .elementor .e-con.deb-hero-slide > .e-con.deb-hero-img{position:relative;min-height:560px}
body .elementor .e-con.deb-hero-slide .deb-hero-img > .elementor-widget-image{position:absolute;inset:0;margin:0;width:100%;height:100%}
body .elementor .e-con.deb-hero-slide .deb-hero-img .elementor-widget-image .elementor-widget-container{height:100%}
body .elementor .e-con.deb-hero-slide .deb-hero-img .elementor-widget-image img{width:100%;height:100% !important;max-height:none;object-fit:cover}
@media (max-width:1024px){body .elementor .e-con.deb-hero-slide > .e-con.deb-hero-img{min-height:420px}}
@media (max-width:767px){body .elementor .e-con.deb-hero-slide > .e-con.deb-hero-img{min-height:260px}}
/* --- 15e. DÉCOUPE EN DIAGONALE TEXTE | IMAGE ------------------------------
   Bord gauche de la photo en biais (« / ») : en bas il reste sur la limite
   de la colonne texte, en haut il recule de --deb-diag. Le texte n'est
   jamais recouvert. Un filet rouge Citroën souligne la coupe : c'est le
   ::before rouge de la colonne, découpé un peu plus large que la photo. */
body .elementor .e-con.deb-hero-slide > .e-con.deb-hero-img{--deb-diag:140px;--deb-filet:8px;background:transparent}
body .elementor .e-con.deb-hero-slide > .e-con.deb-hero-img::before{
  content:'' !important;display:block;position:absolute;inset:0;z-index:1;
  background:#E30613 !important;opacity:1 !important;mix-blend-mode:normal;
  clip-path:polygon(var(--deb-diag) 0,100% 0,100% 100%,0 100%);
}
body .elementor .e-con.deb-hero-slide .deb-hero-img > .elementor-widget-image{
  z-index:2;
  clip-path:polygon(calc(var(--deb-diag) + var(--deb-filet)) 0,100% 0,100% 100%,var(--deb-filet) 100%);
}
@media (max-width:1024px){body .elementor .e-con.deb-hero-slide > .e-con.deb-hero-img{--deb-diag:100px;--deb-filet:7px}}
/* Mobile : photo au-dessus du texte, la coupe passe en bas de la photo. */
@media (max-width:767px){
  body .elementor .e-con.deb-hero-slide > .e-con.deb-hero-img::before{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 32px))}
  body .elementor .e-con.deb-hero-slide .deb-hero-img > .elementor-widget-image{clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),0 calc(100% - 38px))}
}
/* --- 15f. FOND DES SLIDES : gris clair + logo Citroën en trame 5 % --------
   Posé sur la slide entière (le triangle libéré par la diagonale 15e prend le
   même fond). Logo calé à gauche, centre du logo sur le bas de la slide :
   seule la moitié supérieure est visible. SVG recadré au plus près du tracé
   (viewBox 528 285 1444 1799) pour que « moitié » soit exacte. */
body .elementor .e-con.deb-hero-slide{
  --deb-logo-h:832px;
  background-color:var(--deb-gris-fond);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='528 285 1444 1799'%3E%3Cpath fill='%23000' fill-opacity='.05' d='M1763.3,551.8c-136.7-172.2-318.5-266.9-513.3-266.9s-376.6,94.7-513.3,266.9c-134,169.5-208.2,394.4-208.2,632.7 s73.7,463.3,208.2,632.7c136.7,172.2,318.5,266.9,513.3,266.9s376.6-94.7,513.3-266.9c134-169.5,208.2-394.4,208.2-632.7 S1897.3,721.2,1763.3,551.8L1763.3,551.8z M1250,365.6c346.5,0,629.5,354,639.7,794.2L1250,681.4l-639.7,478.3 C620.5,719.6,903.5,365.6,1250,365.6L1250,365.6z M1876.3,1356.1c-8.1,49.5-19.9,97.4-35,143.7L1250,1058.1l-591.3,441.7 c-15.1-45.7-26.9-94.2-35-143.7L1250,888L1876.3,1356.1z M1250,2003.9c-216.3,0-407.8-137.7-523.5-348.7l523.5-391.7l523.5,391.7 C1657.8,1866.2,1466.3,2003.9,1250,2003.9L1250,2003.9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:auto var(--deb-logo-h);
  background-position:left 0 bottom calc(var(--deb-logo-h) / -2);
}
@media (max-width:1024px){body .elementor .e-con.deb-hero-slide{--deb-logo-h:624px}}
@media (max-width:767px){body .elementor .e-con.deb-hero-slide{--deb-logo-h:390px}}

/* ==========================================================================
   16. MOTEUR DE RECHERCHE VÉHICULES  [debenat_recherche]
   Même vocabulaire que les cartes : fond blanc, filet 1 px, filet rouge en
   tête, rayons 4 px, zéro ombre au repos. Curseurs à double borne natifs
   (deux input range superposés), sans bibliothèque.
   ========================================================================== */
.deb-rech{
  background:var(--deb-blanc);border:1px solid var(--deb-gris-ligne);border-top:3px solid var(--deb-rouge);
  border-radius:var(--deb-rayon);padding:32px;margin-top:40px;font-family:var(--deb-police);color:var(--deb-noir);
}
.deb-rech--affiner{padding:24px;margin-top:24px}
.deb-rech__titre{margin:0 0 20px;font-size:20px;font-weight:700;line-height:1.2}
/* Deux lignes de trois : les curseurs d'abord, les menus dessous. Les deux
   colonnes du HTML s'effacent (display:contents) et l'ordre se règle ici. */
.deb-rech__grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px;align-items:end}
.deb-rech__col{display:contents}
.deb-rech__col > .deb-rs,.deb-rech__prix{order:1;min-width:0}
.deb-rech__champ{order:2;min-width:0}
.deb-rech__champ label,.deb-rs__label{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--deb-gris-texte)}
.deb-rech select{
  width:100%;height:44px;padding:0 40px 0 12px;font:inherit;font-size:15px;color:var(--deb-noir);
  background:var(--deb-blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid var(--deb-gris-ligne);border-radius:var(--deb-rayon);-webkit-appearance:none;appearance:none;cursor:pointer;
}
.deb-rech select:hover{border-color:var(--deb-argent)}
.deb-rech select:focus-visible{outline:2px solid var(--deb-rouge);outline-offset:1px;border-color:var(--deb-noir)}

.deb-rs[hidden]{display:none}
.deb-rs__tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.deb-rs__tete .deb-rs__label{margin:0}
.deb-rs__valeur{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.deb-rs__piste{position:relative;height:24px}
.deb-rs__piste::before{content:'';position:absolute;left:0;right:0;top:10px;height:4px;background:var(--deb-gris-ligne);border-radius:2px}
.deb-rs__plein{position:absolute;top:10px;height:4px;background:var(--deb-rouge);border-radius:2px}
.deb-rs__piste input[type=range]{
  position:absolute;left:0;top:0;width:100%;height:24px;margin:0;padding:0;background:none;
  pointer-events:none;-webkit-appearance:none;appearance:none;z-index:3;
}
.deb-rs__piste input[type=range]::-webkit-slider-runnable-track{height:24px;background:none;border:0}
.deb-rs__piste input[type=range]::-moz-range-track{height:24px;background:none;border:0}
.deb-rs__piste input[type=range]::-webkit-slider-thumb{
  pointer-events:auto;-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:1px;
  border-radius:50%;background:var(--deb-blanc);border:2px solid var(--deb-rouge);cursor:grab;
}
.deb-rs__piste input[type=range]::-moz-range-thumb{
  pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--deb-blanc);border:2px solid var(--deb-rouge);cursor:grab;
}
.deb-rs__piste input[type=range]:focus{outline:none}
.deb-rs__piste input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(227,6,19,.22)}
.deb-rs__piste input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(227,6,19,.22)}

.deb-rech__bascule{display:flex;gap:20px;margin-bottom:10px;font-size:14px;font-weight:600}
.deb-rech__bascule label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.deb-rech__bascule input{accent-color:var(--deb-rouge);margin:0}

.deb-rech__actions{display:flex;align-items:center;gap:24px;margin-top:24px}
.deb-rech__bouton{
  font:inherit;font-size:15px;font-weight:600;color:var(--deb-blanc);background:var(--deb-rouge);
  border:1px solid var(--deb-rouge);border-radius:var(--deb-rayon);padding:14px 32px;cursor:pointer;transition:background-color .15s,border-color .15s;
}
.deb-rech__bouton:hover,.deb-rech__bouton:focus-visible{background:var(--deb-noir);border-color:var(--deb-noir)}
.deb-rech__bouton:focus-visible{outline:2px solid var(--deb-rouge);outline-offset:2px}
.deb-rech__reset{font-size:14px;color:var(--deb-gris-texte);text-decoration:underline;text-underline-offset:3px}
.deb-rech__reset:hover{color:var(--deb-noir)}

@media (max-width:1024px){.deb-rech__grille{gap:24px 24px}}
@media (max-width:767px){
  .deb-rech{padding:24px 20px}
  .deb-rech__grille{grid-template-columns:1fr}
  .deb-rech__bouton{width:100%}
  .deb-rech__actions{flex-direction:column;align-items:stretch;text-align:center}
}
/* ==========================================================================
   17. SÉLECTEUR DE CARROSSERIE EN ANNEAU 3D (accueil, >= 768 px)
   Construit en JS par novamira-sandbox/debenat-anneau.php à partir de la
   grille de la section 12, qui reste le rendu sur mobile, sans JS, ou quand
   le visiteur demande de réduire les animations.
   ========================================================================== */
.deb-anneau__piste{position:relative}
.deb-anneau__scene{
  position:sticky;display:flex;flex-direction:column;align-items:center;
  perspective:1400px;perspective-origin:50% 45%;padding:16px 0;
}
.deb-carross.deb-carross--anneau{
  display:block;position:relative;width:220px;margin:0 auto;
  transform-style:preserve-3d;
}
.deb-carross--anneau .deb-carross__item{
  position:absolute;left:0;top:0;width:220px;box-sizing:border-box;padding:28px 16px 22px;
  background:var(--deb-blanc);border:1px solid var(--deb-gris-ligne);border-top:3px solid var(--deb-gris-ligne);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;transition:border-color .2s;
}
.deb-carross--anneau .deb-carross__item:hover{border-color:var(--deb-gris-ligne);border-top-color:var(--deb-argent)}
.deb-carross--anneau .deb-carross__item.is-face{border-top-color:var(--deb-rouge);cursor:pointer}
.deb-carross--anneau .deb-carross__item.is-face .deb-sil__corps{fill:var(--deb-gris-texte)}
.deb-carross--anneau .deb-carross__vis{max-width:none}

.deb-anneau__points{display:flex;gap:8px;margin-top:44px}
.deb-anneau__points span{width:8px;height:8px;border-radius:4px;background:var(--deb-argent);transition:width .25s ease,background-color .25s ease}
.deb-anneau__points span.is-actif{width:24px;background:var(--deb-rouge)}

.deb-anneau__legende{text-align:center;margin-top:20px}
.deb-anneau__nom{margin:0;font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.01em}
.deb-anneau__nb{margin:6px 0 18px;font-size:15px;color:var(--deb-gris-texte)}
.deb-anneau__voir{
  display:inline-block;padding:12px 24px;font-size:15px;font-weight:600;text-decoration:none;
  color:var(--deb-blanc);background:var(--deb-rouge);border:1px solid var(--deb-rouge);border-radius:var(--deb-rayon);
  transition:background-color .15s,border-color .15s;
}
.deb-anneau__voir:hover,.deb-anneau__voir:focus-visible{color:var(--deb-blanc);background:var(--deb-noir);border-color:var(--deb-noir)}

@media (max-width:1024px){
  .deb-carross.deb-carross--anneau,.deb-carross--anneau .deb-carross__item{width:180px}
  .deb-anneau__nom{font-size:24px}
}
/* --- 17b. VISUELS PHOTO DES CARROSSERIES -----------------------------------
   Images détourées (champ ACF « Visuel » des carrosseries). Sans visuel, la
   silhouette SVG de la section 12 s'affiche. */
.deb-carross__img{display:block;width:100%;height:auto}
.deb-carross__vis--photo{max-width:190px}
.deb-carross--anneau .deb-carross__vis--photo{max-width:none;margin:-8px -6px 0}

/* --- 17c. ANNEAU : grands visuels, sans cadre ni filet -----------------------
   Section sur fond blanc : les véhicules détourés flottent sans carte autour.
   Surcharge les sections 17 et 17b. */
.deb-carross.deb-carross--anneau,.deb-carross--anneau .deb-carross__item{width:442px}
.deb-carross--anneau .deb-carross__item,
.deb-carross--anneau .deb-carross__item:hover,
.deb-carross--anneau .deb-carross__item.is-face{
  padding:0 0 12px;background:transparent;border:0;border-radius:0;
}
.deb-carross--anneau .deb-carross__vis--photo{margin:0}
.deb-carross--anneau .deb-carross__vis:not(.deb-carross__vis--photo){max-width:260px;margin:24px auto 18px}
@media (max-width:1024px){.deb-carross.deb-carross--anneau,.deb-carross--anneau .deb-carross__item{width:290px}}

/* --- 17d. PAS DE DÉFILEMENT HORIZONTAL -------------------------------------
   Filet de sécurité global : aucun élément (anneau 3D, carrousels Swiper,
   hero pleine largeur) ne peut élargir la page au-delà de la fenêtre.
   hidden d'abord pour les navigateurs anciens, clip ensuite (ne crée pas de
   conteneur de défilement : position:sticky reste actif). */
html{overflow-x:hidden;overflow-x:clip}
body .elementor .e-con.deb-section-carrosseries{overflow-x:clip}

/* ==========================================================================
   18. SECTION « DEUX FRÈRES » (accueil)
   Grande photo collée au bord gauche de l'écran, texte aligné à droite sur la
   grille du site, petite photo + texte en dessous du titre. Photos en
   parallaxe (novamira-sandbox/debenat-parallax.php).
   ========================================================================== */
.deb-accent{color:var(--deb-rouge);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.14em}
body .elementor .e-con.deb-freres-rangee{flex-wrap:nowrap}
body .elementor .e-con.deb-freres-rangee > .e-con.deb-freres-gauche{width:auto;flex:0 0 42%;min-width:0}
body .elementor .e-con.deb-freres-rangee > .e-con.deb-freres-droite{
  width:auto;flex:1 1 0%;min-width:0;padding-right:max(24px, calc((100vw - 1180px) / 2));
}
body .elementor .e-con.deb-freres-mini{flex-wrap:nowrap}
body .elementor .e-con.deb-freres-mini > .elementor-widget-image{flex:0 0 42%;width:auto;min-width:0}
body .elementor .e-con.deb-freres-mini > .e-con.deb-freres-texte{width:auto;flex:1 1 0%;min-width:0}
.deb-freres-texte .elementor-widget-text-editor p:last-child{margin-bottom:0}

/* Parallaxe : l'image déborde de son cadre, le script la fait glisser. */
.elementor-widget-image.deb-parallax{overflow:hidden;align-self:stretch;will-change:transform;position:relative;z-index:1}
.elementor-widget-image.deb-parallax img{display:block;width:100%;object-fit:cover;transform:scale(1.5);will-change:transform;transition:none}
.deb-freres-img-grande{border-radius:0 var(--deb-rayon) var(--deb-rayon) 0}
.deb-freres-img-mini{border-radius:var(--deb-rayon)}

@media (max-width:1024px){
  body .elementor .e-con.deb-freres-rangee > .e-con.deb-freres-gauche{flex-basis:38%}
}
@media (max-width:767px){
  body .elementor .e-con.deb-freres-rangee,
  body .elementor .e-con.deb-freres-mini{flex-wrap:wrap}
  body .elementor .e-con.deb-freres-rangee > .e-con.deb-freres-gauche,
  body .elementor .e-con.deb-freres-rangee > .e-con.deb-freres-droite,
  body .elementor .e-con.deb-freres-mini > .elementor-widget-image,
  body .elementor .e-con.deb-freres-mini > .e-con.deb-freres-texte{flex:1 1 100%;width:100%}
  body .elementor .e-con.deb-freres-rangee > .e-con.deb-freres-droite{padding:0 20px}
  .deb-freres-img-grande{border-radius:0}
}
@media (prefers-reduced-motion:reduce){.elementor-widget-image.deb-parallax img{transform:none}}
/* --- 18b. MOT ACCENT SUR FOND ROUGE -----------------------------------------
   Sur la bande rouge des arrivages, un mot rouge serait invisible : il reste
   blanc, seul le soulignement (blanc, plus épais) le distingue. */
.elementor-element-69b573a .deb-accent{color:inherit;text-decoration-color:currentColor;text-decoration-thickness:4px}

/* ==========================================================================
   19. SECTION ATELIER (accueil) : fond gris anthracite sur photo de l'atelier
   tramée à 75 % (réglages Elementor), quatre cartes service sur fond rouge.
   ========================================================================== */
.deb-section-atelier .deb-cols > .e-con{align-self:stretch}
.deb-section-atelier .deb-cols > .e-con > .elementor-widget-shortcode{flex:1 1 auto;display:flex}
.deb-section-atelier .elementor-widget-shortcode .elementor-shortcode{display:flex;flex:1 1 auto;width:100%}
.deb-section-atelier .deb-scard{
  display:flex;flex-direction:column;flex:1 1 auto;box-sizing:border-box;
  padding:32px;border:0;border-radius:var(--deb-rayon);
  background:var(--deb-rouge);color:var(--deb-blanc);
  transition:background-color .2s ease;
}
.deb-section-atelier .deb-scard:hover{background:var(--deb-rouge-fonce)}
.deb-section-atelier .deb-scard__t{color:var(--deb-blanc);margin-bottom:12px}
.deb-section-atelier .deb-scard__t{flex-direction:row;align-items:center;gap:16px;font-size:22px;line-height:1.2}
.deb-section-atelier .deb-scard__t .deb-ico{color:var(--deb-blanc);font-size:52px;stroke-width:1.3}
@media (max-width:767px){.deb-section-atelier .deb-scard__t .deb-ico{font-size:44px}}
.deb-section-atelier .deb-scard__d{color:rgba(255,255,255,.9);max-width:none;margin-bottom:0}
.deb-section-atelier .deb-scard__l{
  margin-top:auto;padding-top:24px;align-self:flex-start;
  color:var(--deb-blanc);border-bottom:0;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:4px;
}
.deb-section-atelier .deb-scard__l:hover{color:var(--deb-blanc);text-decoration-thickness:2px}
.deb-section-atelier .deb-cols{--gap:24px 24px;column-gap:24px;row-gap:24px}
@media (max-width:767px){.deb-section-atelier .deb-scard{padding:24px 20px}}
/* --- 19b. PHOTO DE FOND CALÉE À DROITE ---------------------------------------
   La façade occupe les 62 % de droite de la section, recadrée en « cover »
   dans ce seul cadre. Le dégradé part du gris plein sur son bord gauche pour
   se fondre dans l'aplat anthracite de la section. */
.deb-section-atelier{position:relative;isolation:isolate}
.deb-section-atelier::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:62%;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,#2B2F33 0%,rgba(43,47,51,.6) 30%,rgba(43,47,51,.25) 60%,rgba(43,47,51,.2) 100%),
    url('https://debenat.clictoutdev.fr/wp-content/uploads/2026/09/garage-debenat-facade-fond.webp') center center / cover no-repeat;
}
@media (max-width:767px){
  .deb-section-atelier::after{width:100%;background:
    linear-gradient(180deg,#2B2F33 0%,rgba(43,47,51,.85) 45%,rgba(43,47,51,.6) 100%),
    url('https://debenat.clictoutdev.fr/wp-content/uploads/2026/09/garage-debenat-facade-fond.webp') center center / cover no-repeat;}
}

/* --- 14b. PUCES DU CARROUSEL DES ARRIVAGES ----------------------------------
   Même langage que le hero (puces rondes, active étirée en barre), en blanc
   puisque le carrousel est posé sur la bande rouge. */
.deb-vslider .swiper-pagination.swiper-pagination-bullets{position:static;margin-top:32px;display:flex;justify-content:center;align-items:center;gap:12px;line-height:0;width:100%;transform:none}
.deb-vslider .swiper-pagination-bullet{width:10px;height:10px;margin:0 !important;opacity:1;background:rgba(255,255,255,.45);border-radius:5px;transition:width .25s ease,background-color .25s ease}
.deb-vslider .swiper-pagination-bullet:hover{background:rgba(255,255,255,.75)}
.deb-vslider .swiper-pagination-bullet-active{width:28px;background:#FFFFFF}

/* ==========================================================================
   20. FOOTER DÉVOILÉ AU SCROLL (effet « rideau »)
   Le footer reste collé au bas de la fenêtre, derrière le contenu. En fin de
   page, le contenu (fond opaque) remonte et découvre le footer en dessous.
   Uniquement quand l'écran est assez grand pour afficher tout le footer ;
   sinon, footer classique.
   ========================================================================== */
@media (min-width:1025px) and (min-height:760px){
  .elementor-location-footer{position:sticky;bottom:0;z-index:0}
  [data-elementor-type="wp-page"],
  [data-elementor-type="wp-post"],
  [data-elementor-type="archive"],
  [data-elementor-type="single-post"],
  [data-elementor-type="single-page"],
  [data-elementor-type="single"],
  body > main,
  .site-main{
    position:relative;z-index:1;background:var(--deb-blanc);
    box-shadow:0 24px 40px -24px rgba(0,0,0,.35);
  }
  .elementor-location-header{position:relative;z-index:10}
}
/* ==========================================================================
   21. EN-TÊTE QUI SE RÉDUIT AU SCROLL
   Elementor ajoute .elementor-sticky--effects à l'en-tête collé dès 80 px
   de défilement : marges verticales et logo réduits, filet gris en bas.
   ========================================================================== */
body .elementor .e-con.deb-header{transition:padding .3s ease,box-shadow .3s ease}
body .elementor .e-con.deb-header .deb-logo img{width:auto !important;max-width:100%;object-fit:contain;transition:height .3s ease}
body .elementor .e-con.deb-header.elementor-sticky--effects{
  --padding-top:6px;--padding-bottom:6px;
  box-shadow:0 1px 0 var(--deb-gris-ligne);
}
body .elementor .e-con.deb-header.elementor-sticky--effects .deb-logo img{height:56px !important}
@media (max-width:767px){
  body .elementor .e-con.deb-header.elementor-sticky--effects .deb-logo img{height:44px !important}
}
/* ==========================================================================
   22. BANDE ROUGE « DERNIERS ARRIVAGES » : logo Citroën en filigrane blanc
   Même principe que le hero (section 15f) : chevrons calés à gauche, seule la
   moitié supérieure visible, en blanc à 30 % sur le rouge. Sélecteur par
   identifiant d'élément : résiste à un ré-enregistrement depuis Elementor.
   ========================================================================== */
body .elementor .elementor-element.elementor-element-69b573a{
  --deb-logo-h:832px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='528 285 1444 1799'%3E%3Cpath fill='%23fff' fill-opacity='.3' d='M1763.3,551.8c-136.7-172.2-318.5-266.9-513.3-266.9s-376.6,94.7-513.3,266.9c-134,169.5-208.2,394.4-208.2,632.7 s73.7,463.3,208.2,632.7c136.7,172.2,318.5,266.9,513.3,266.9s376.6-94.7,513.3-266.9c134-169.5,208.2-394.4,208.2-632.7 S1897.3,721.2,1763.3,551.8L1763.3,551.8z M1250,365.6c346.5,0,629.5,354,639.7,794.2L1250,681.4l-639.7,478.3 C620.5,719.6,903.5,365.6,1250,365.6L1250,365.6z M1876.3,1356.1c-8.1,49.5-19.9,97.4-35,143.7L1250,1058.1l-591.3,441.7 c-15.1-45.7-26.9-94.2-35-143.7L1250,888L1876.3,1356.1z M1250,2003.9c-216.3,0-407.8-137.7-523.5-348.7l523.5-391.7l523.5,391.7 C1657.8,1866.2,1466.3,2003.9,1250,2003.9L1250,2003.9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:auto var(--deb-logo-h);
  background-position:left 0 bottom calc(var(--deb-logo-h) / -2);
}
@media (max-width:1024px){body .elementor .elementor-element.elementor-element-69b573a{--deb-logo-h:624px}}
@media (max-width:767px){body .elementor .elementor-element.elementor-element-69b573a{--deb-logo-h:390px}}

/* --- 16b. OMBRE PORTÉE DU BLOC DE RECHERCHE (accueil) -------------------------
   Exception assumée à la règle « zéro ombre » : le formulaire est un outil,
   l'ombre le détache de la page. Version « Affiner » de la liste non concernée. */
.deb-rech:not(.deb-rech--affiner){box-shadow:0 18px 40px -12px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.06)}

/* ==========================================================================
   23. ACTUALITÉS DYNAMIQUES [debenat_actus]
   ========================================================================== */
.deb-actus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.deb-actu{display:flex;flex-direction:column;min-width:0}
.deb-actu__img{display:block;overflow:hidden;border-radius:var(--deb-rayon);margin-bottom:16px;aspect-ratio:16/10;background:var(--deb-gris-ligne)}
.deb-actu__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.deb-actu:hover .deb-actu__img img{transform:scale(1.04)}
.deb-actu__date{margin:0;font-size:13px;font-weight:600;color:var(--deb-gris-texte);text-transform:uppercase;letter-spacing:.04em}
.deb-actu__t a{color:inherit;text-decoration:none}
.deb-actu__t a:hover,.deb-actu__t a:focus-visible{color:var(--deb-rouge)}
@media (max-width:1024px){.deb-actus{gap:24px}}
@media (max-width:767px){.deb-actus{grid-template-columns:1fr;gap:32px}}
/* ==========================================================================
   24. EN-TÊTE DES PAGES INTÉRIEURES (.deb-page-hero) + FIL D'ARIANE
   Même langage que le hero de l'accueil : fond gris clair, filigrane Citroën
   à 5 %, mot-clé du titre en rouge souligné.
   ========================================================================== */
body .elementor .e-con.deb-page-hero{
  --deb-logo-h:560px;position:relative;
  background-color:var(--deb-gris-fond);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='528 285 1444 1799'%3E%3Cpath fill='%23000' fill-opacity='.05' d='M1763.3,551.8c-136.7-172.2-318.5-266.9-513.3-266.9s-376.6,94.7-513.3,266.9c-134,169.5-208.2,394.4-208.2,632.7 s73.7,463.3,208.2,632.7c136.7,172.2,318.5,266.9,513.3,266.9s376.6-94.7,513.3-266.9c134-169.5,208.2-394.4,208.2-632.7 S1897.3,721.2,1763.3,551.8L1763.3,551.8z M1250,365.6c346.5,0,629.5,354,639.7,794.2L1250,681.4l-639.7,478.3 C620.5,719.6,903.5,365.6,1250,365.6L1250,365.6z M1876.3,1356.1c-8.1,49.5-19.9,97.4-35,143.7L1250,1058.1l-591.3,441.7 c-15.1-45.7-26.9-94.2-35-143.7L1250,888L1876.3,1356.1z M1250,2003.9c-216.3,0-407.8-137.7-523.5-348.7l523.5-391.7l523.5,391.7 C1657.8,1866.2,1466.3,2003.9,1250,2003.9L1250,2003.9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:auto var(--deb-logo-h);
  background-position:left 0 bottom calc(var(--deb-logo-h) / -2);
  border-bottom:1px solid var(--deb-gris-ligne);
}
body .elementor .e-con.deb-page-hero .elementor-heading-title{max-width:22ch}
body .elementor .e-con.deb-page-hero .elementor-widget-text-editor{max-width:64ch}
@media (max-width:767px){body .elementor .e-con.deb-page-hero{--deb-logo-h:340px}}

.deb-ariane ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--deb-gris-texte)}
.deb-ariane li{display:inline-flex;align-items:center;gap:6px}
.deb-ariane li + li::before{content:'›';color:var(--deb-argent)}
.deb-ariane a{color:var(--deb-gris-texte);text-decoration:none}
.deb-ariane a:hover,.deb-ariane a:focus-visible{color:var(--deb-noir);text-decoration:underline;text-underline-offset:3px}
.deb-ariane [aria-current]{color:var(--deb-noir);font-weight:600}

/* ==========================================================================
   25. ARTICLE D'ACTUALITÉ : corps de texte, galeries, navigation
   ========================================================================== */
.deb-article{font-size:17px;line-height:1.7;color:var(--deb-anthracite)}
.deb-article h2{font-size:28px;line-height:1.2;margin:48px 0 16px;color:var(--deb-noir)}
.deb-article h3{font-size:21px;line-height:1.3;margin:36px 0 12px;color:var(--deb-noir)}
.deb-article p{margin:0 0 20px}
.deb-article a{color:var(--deb-rouge);text-underline-offset:3px}
.deb-article strong{color:var(--deb-noir)}
.deb-article img{border-radius:var(--deb-rayon);height:auto}
.deb-actu-figure{margin:32px 0}
.deb-actu-figure figcaption,.gallery-caption{font-size:13px;color:var(--deb-gris-texte);margin-top:8px}

/* Galeries WordPress ([gallery] et widget Galerie d'Elementor) */
.gallery{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:32px 0 !important}
.gallery.gallery-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery .gallery-item{width:auto !important;max-width:none !important;margin:0 !important;padding:0 !important}
.gallery .gallery-icon img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:0 !important;border-radius:var(--deb-rayon);transition:transform .3s ease,opacity .3s ease}
.gallery .gallery-icon a{display:block;overflow:hidden;border-radius:var(--deb-rayon)}
.gallery .gallery-icon a:hover img{transform:scale(1.04)}
.gallery br{display:none}
@media (max-width:767px){.gallery,.gallery.gallery-columns-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}

.deb-actunav{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;padding:32px 0;border-top:1px solid var(--deb-gris-ligne);border-bottom:1px solid var(--deb-gris-ligne)}
.deb-actunav__lien{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--deb-noir);min-width:0}
.deb-actunav__lien--suiv{flex-direction:row-reverse;text-align:right}
.deb-actunav__img{width:72px;height:72px;flex:0 0 72px;object-fit:cover;border-radius:var(--deb-rayon)}
.deb-actunav__txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.deb-actunav__label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--deb-rouge)}
.deb-actunav__titre{font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.deb-actunav__lien:hover .deb-actunav__titre{text-decoration:underline;text-underline-offset:3px}
.deb-actunav__tout{font-size:14px;font-weight:600;color:var(--deb-noir);border:1px solid var(--deb-noir);border-radius:var(--deb-rayon);padding:10px 18px;text-decoration:none;white-space:nowrap}
.deb-actunav__tout:hover{background:var(--deb-noir);color:var(--deb-blanc)}
@media (max-width:767px){
  .deb-actunav{grid-template-columns:1fr;gap:16px}
  .deb-actunav__lien--suiv{flex-direction:row;text-align:left}
  .deb-actunav__tout{justify-self:start;order:3}
  .deb-actunav__vide{display:none}
}

/* --- 26. PAGE CONTACT --------------------------------------------------------- */
body .elementor .e-con.deb-contact > .e-con.deb-contact-form{flex:1 1 60%;width:auto;min-width:0}
body .elementor .e-con.deb-contact > .e-con.deb-contact-infos{flex:1 1 34%;width:auto;min-width:0;background:var(--deb-gris-fond);border-top:3px solid var(--deb-rouge);border-radius:var(--deb-rayon);padding:32px}
.deb-contact-infos p{margin:0 0 18px}
.deb-contact-infos a{color:var(--deb-noir);font-weight:700;font-size:20px;text-decoration:none}
@media (max-width:1024px){body .elementor .e-con.deb-contact > .e-con{flex:1 1 100%}}

/* ==========================================================================
   27. CORRECTIFS RESPONSIVE (audit mobile 375 px / tablette 768-1024 px)
   ========================================================================== */

/* --- En-tête mobile : logo | burger + bouton sur une ligne ---------------- */
@media (max-width:767px){
  body .elementor .e-con.deb-header{--padding-top:10px;--padding-bottom:10px;--padding-left:20px;--padding-right:20px;flex-wrap:nowrap !important;align-items:center;gap:12px}
  body .elementor .e-con.deb-header > .e-con.deb-logo{width:auto !important;flex:0 0 auto;--width:auto}
  body .elementor .e-con.deb-header .deb-logo img{height:60px !important;width:auto !important}
  body .elementor .e-con.deb-header > .e-con.deb-nav{width:auto !important;--width:auto;flex:1 1 auto;min-width:0;justify-content:flex-end;flex-wrap:nowrap;gap:10px}
  body .elementor .e-con.deb-header .deb-nav .elementor-widget-nav-menu{width:auto;flex:0 0 auto}
  body .elementor .e-con.deb-header .deb-cta-header .elementor-button{padding:10px 14px;font-size:13px;white-space:nowrap}
  body .elementor .e-con.deb-header .elementor-nav-menu--dropdown{position:absolute;left:0;right:0;top:100%;width:100vw}
  /* Bande du haut : numéro lisible sur l'anthracite */
  .deb-topbar a[href^="tel:"]{color:#FFFFFF !important;font-weight:700}
}
@media (max-width:360px){body .elementor .e-con.deb-header .deb-cta-header{display:none}}

/* --- Hero : flèches masquées sous 1025 px (swipe + puces suffisent) ------- */
@media (max-width:1024px){
  .deb-hero-slider .elementor-swiper-button{display:none !important}
}

/* --- Pastilles de filtre (liste des occasions) ------------------------------
   Centrées + défilement horizontal = les premières pastilles (dont « Tous »)
   étaient hors d'atteinte à gauche. Alignées à gauche, défilement fluide. */
.elementor-widget-taxonomy-filter .e-filter{justify-content:flex-start !important;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.elementor-widget-taxonomy-filter .e-filter::-webkit-scrollbar{display:none}
.elementor-widget-taxonomy-filter .e-filter-item{scroll-snap-align:start;flex:0 0 auto}
@media (max-width:767px){
  .elementor-widget-taxonomy-filter{position:relative}
  .elementor-widget-taxonomy-filter::after{content:'';position:absolute;top:0;right:0;bottom:0;width:32px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff)}
}

/* --- Section « Deux frères » : colonne de texte trop étroite en tablette --- */
@media (max-width:1024px){
  body .elementor .e-con.deb-freres-mini{flex-wrap:wrap !important}
  body .elementor .e-con.deb-freres-mini > .elementor-widget-image,
  body .elementor .e-con.deb-freres-mini > .e-con.deb-freres-texte{flex:1 1 100% !important;width:100%}
  body .elementor .e-con.deb-freres-mini > .elementor-widget-image img{height:280px !important}
}

/* --- Section Atelier : photo pleine largeur + dégradé vertical dès 1024 px - */
@media (max-width:1024px){
  .deb-section-atelier::after{width:100%;background:
    linear-gradient(180deg,#2B2F33 0%,rgba(43,47,51,.88) 45%,rgba(43,47,51,.7) 100%),
    url('/wp-content/uploads/2026/09/garage-debenat-facade-fond.webp') center center / cover no-repeat}
}
@media (min-width:600px) and (max-width:1024px){
  .deb-section-atelier .e-con.deb-cols{flex-direction:row !important;flex-wrap:nowrap !important}
  .deb-section-atelier .e-con.deb-cols > .e-con{flex:1 1 50% !important;width:auto !important}
}

/* --- Actualités : 2 colonnes en tablette ---------------------------------- */
@media (min-width:600px) and (max-width:1024px){.deb-actus{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.deb-actus{grid-template-columns:1fr}}

/* --- Navigation entre actualités : la vignette était forcée à 100 % par Hello */
.deb-actunav img.deb-actunav__img{width:72px !important;height:72px !important;max-width:72px !important;flex:0 0 72px}

/* --- Fil d'Ariane mobile : le dernier niveau est tronqué sur une ligne ---- */
@media (max-width:767px){
  .deb-ariane ol{flex-wrap:nowrap}
  .deb-ariane li{flex:0 0 auto}
  .deb-ariane li:last-child{flex:1 1 auto;min-width:0;overflow:hidden}
  .deb-ariane li:last-child span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* --- Titres : pas de mot coupé hors de l'écran en 320-375 px -------------- */
@media (max-width:767px){
  .elementor-heading-title,.deb-actu__t,.deb-article h2{overflow-wrap:anywhere;hyphens:auto}
  body .elementor .e-con.deb-page-hero .elementor-heading-title{font-size:32px;line-height:1.12}
}

/* --- 17d. ANNEAU : vignettes énergie (Électrique, Hybride) -----------------
   Ajoutées par [debenat_carrosseries energies="oui"]. Le badge signale qu'il
   s'agit d'une motorisation et non d'une forme de carrosserie. */
.deb-carross__item--energie .deb-carross__vis{position:relative}
.deb-carross__badge{
  position:absolute;left:8px;top:6px;z-index:1;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px 4px 7px;border-radius:999px;
  background:var(--deb-noir);color:var(--deb-blanc);
  font-size:12px;font-weight:600;line-height:1;letter-spacing:.02em;
}
.deb-carross__badge svg{width:14px;height:14px;fill:currentColor;flex:none}
.deb-carross__item--electrique .deb-carross__badge svg{fill:#FFD23F}
.deb-carross__item--hybride .deb-carross__badge svg{fill:#7BC47F}


/* --- Barre du haut : téléphone + Facebook calés à droite, sur la ligne des horaires */
.deb-topbar .e-con.deb-topbar__droite{--width:auto;width:auto;flex:0 0 auto;margin-left:auto;--gap:0 22px}
.deb-topbar__tel a{display:inline-flex;align-items:center;gap:7px}
.deb-topbar__tel a::before{
  content:'';width:13px;height:13px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.deb-topbar__fb .elementor-icon-list-item > a{flex-direction:row-reverse}
.deb-topbar__fb .elementor-icon-list-icon{
  width:24px;height:24px;margin-left:8px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--deb-rouge);transition:background-color .2s;
}
/* Centrage du « f » : neutralise le retrait et la marge qu'Elementor pose sur l'icône */
.deb-topbar .deb-topbar__fb .elementor-icon-list-icon{padding:0!important;inset-block-start:0;line-height:0}
.deb-topbar .deb-topbar__fb .elementor-icon-list-icon svg{margin:0!important;display:block}
.deb-topbar__fb .elementor-icon-list-item > a:hover .elementor-icon-list-icon,
.deb-topbar__fb .elementor-icon-list-item > a:focus-visible .elementor-icon-list-icon{background:var(--deb-bleu)}


/* --- Liste des occasions : filtres en menus déroulants [debenat_filtres_select]
   Quatre menus sur une ligne, même dessin que les menus du moteur de recherche.
   Un menu utilisé prend le filet rouge de la charte. */
.deb-fs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 20px;margin:0}
.deb-fs__label{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--deb-gris-texte)}
.deb-fs__select{
  width:100%;height:44px;padding:0 40px 0 12px;font:inherit;font-size:15px;color:var(--deb-noir);
  background:var(--deb-blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid var(--deb-gris-ligne);border-radius:var(--deb-rayon);-webkit-appearance:none;appearance:none;cursor:pointer;
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
}
.deb-fs__select:hover{border-color:var(--deb-argent)}
.deb-fs__select:focus-visible{outline:2px solid var(--deb-rouge);outline-offset:1px;border-color:var(--deb-noir)}
.deb-fs__champ.is-actif .deb-fs__select{border-color:var(--deb-rouge);box-shadow:inset 0 3px 0 var(--deb-rouge);font-weight:600}
.deb-fs.is-envoi{opacity:.6;pointer-events:none;transition:opacity .2s}
.deb-fs__envoi{grid-column:1/-1;justify-self:start;height:44px;padding:0 22px;border:0;border-radius:var(--deb-rayon);background:var(--deb-rouge);color:var(--deb-blanc);font:inherit;font-weight:600;cursor:pointer}
@media (max-width:1024px){.deb-fs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.deb-fs{gap:12px 12px}.deb-fs__select{font-size:14px;padding-right:32px;background-position:right 10px center}}


/* --- Pied de page sur tablette et mobile : 2 colonnes × 2 rangées au lieu d'une
   seule colonne calée à gauche (coordonnées | Véhicules / Atelier | Le garage). */
@media (max-width:1024px){
  body .elementor .e-con.deb-cols.deb-footer__cols{--gap:32px 24px;gap:32px 24px}
  body .elementor .e-con.deb-cols.deb-footer__cols > .e-con{flex:0 0 calc(50% - 12px);width:calc(50% - 12px);max-width:calc(50% - 12px);min-width:0}
}
@media (max-width:480px){
  body .elementor .e-con.deb-cols.deb-footer__cols{--gap:28px 16px;gap:28px 16px}
  body .elementor .e-con.deb-cols.deb-footer__cols > .e-con{flex-basis:calc(50% - 8px);width:calc(50% - 8px);max-width:calc(50% - 8px)}
  .deb-footer__cols .elementor-icon-list-text,.deb-footer__cols p{overflow-wrap:anywhere}
}


/* --- Complianz : sans transition ni animation (décalages de mise en page mesurés par PageSpeed) */
#cmplz-cookiebanner-container .cmplz-cookiebanner,#cmplz-cookiebanner-container .cmplz-cookiebanner *{transition:none!important;animation:none!important}

/* --- 24b. VARIANTE ROUGE DU HERO (.deb-page-hero--rouge) --------------------
   Listing « Véhicules d'occasion à Coutras » : fond rouge Citroën, textes et
   fil d'Ariane en blanc. Filigrane Citroën en blanc à 15 %, même taille et même calage que les autres heros. */
body .elementor .e-con.deb-page-hero.deb-page-hero--rouge{background-color:var(--deb-rouge,#E30613);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='528 285 1444 1799'%3E%3Cpath fill='%23fff' fill-opacity='.15' d='M1763.3,551.8c-136.7-172.2-318.5-266.9-513.3-266.9s-376.6,94.7-513.3,266.9c-134,169.5-208.2,394.4-208.2,632.7 s73.7,463.3,208.2,632.7c136.7,172.2,318.5,266.9,513.3,266.9s376.6-94.7,513.3-266.9c134-169.5,208.2-394.4,208.2-632.7 S1897.3,721.2,1763.3,551.8L1763.3,551.8z M1250,365.6c346.5,0,629.5,354,639.7,794.2L1250,681.4l-639.7,478.3 C620.5,719.6,903.5,365.6,1250,365.6L1250,365.6z M1876.3,1356.1c-8.1,49.5-19.9,97.4-35,143.7L1250,1058.1l-591.3,441.7 c-15.1-45.7-26.9-94.2-35-143.7L1250,888L1876.3,1356.1z M1250,2003.9c-216.3,0-407.8-137.7-523.5-348.7l523.5-391.7l523.5,391.7 C1657.8,1866.2,1466.3,2003.9,1250,2003.9L1250,2003.9z'/%3E%3C/svg%3E");border-bottom:0;color:#fff}
.deb-page-hero--rouge .elementor-heading-title,.deb-page-hero--rouge .elementor-widget-text-editor,.deb-page-hero--rouge .elementor-widget-text-editor p{color:#fff}
.deb-page-hero--rouge .deb-accent{color:inherit;text-decoration-color:currentColor;text-decoration-thickness:4px}
.deb-page-hero--rouge .deb-ariane ol,.deb-page-hero--rouge .deb-ariane a,.deb-page-hero--rouge .deb-ariane [aria-current],.deb-page-hero--rouge .deb-ariane li + li::before{color:#fff}
.deb-page-hero--rouge .deb-ariane a{opacity:.85}
.deb-page-hero--rouge .deb-ariane a:hover,.deb-page-hero--rouge .deb-ariane a:focus-visible{color:#fff;opacity:1}
/* --- Liste des occasions : Marque, Énergie, Boîte, Carrosserie intégrés au bloc
   « Affiner » à la suite de Type et Modèle (6 menus = 2 lignes de 3).
   Un menu utilisé garde le filet rouge de la charte. */
.deb-rech .deb-fs__champ.is-actif select{border-color:var(--deb-rouge);box-shadow:inset 0 3px 0 var(--deb-rouge);font-weight:600}
.deb-filtres .deb-rech--affiner{margin-top:0}

/* --- Liste des occasions : pagination de la grille (vgrid01)
   Chiffres plus petits, page en cours en rouge. Zone cliquable conservée
   à 32 px pour le tactile. */
.elementor-element-vgrid01 .elementor-pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;margin-top:32px;font-size:14px;line-height:1}
.elementor-element-vgrid01 .elementor-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 6px;margin:0;font-size:14px;font-weight:500;color:var(--deb-noir);text-decoration:none;border-radius:var(--deb-rayon)}
.elementor-element-vgrid01 .elementor-pagination a.page-numbers:hover,.elementor-element-vgrid01 .elementor-pagination a.page-numbers:focus-visible{color:var(--deb-rouge)}
.elementor-element-vgrid01 .elementor-pagination .page-numbers.current{color:var(--deb-rouge);font-weight:700}
.elementor-element-vgrid01 .elementor-pagination .page-numbers.dots{min-width:auto;color:var(--deb-gris-texte)}

/* --- Mensualité « à partir de » (option par véhicule : mensualite_afficher)
   Carte : pastille à filet rouge sous le prix. Fiche : encart rouge pâle sous
   la mention de prix, mentions légales du crédit juste dessous (L312-5, L312-6). */
.deb-vcard__mens{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px;margin:8px 0 0;padding:4px 10px;border:1px solid var(--deb-rouge);border-radius:var(--deb-rayon);color:var(--deb-rouge);font-size:13px;line-height:1.3}
.deb-vcard__mens strong{font-size:16px;font-weight:700;font-variation-settings:'wdth' 104,'wght' 700}
.deb-vcard__mens-lib{color:var(--deb-noir)}
.deb-panneau__mens{margin:16px 0 0;padding:12px 14px;background:rgba(227,6,19,.06);border-left:3px solid var(--deb-rouge);border-radius:var(--deb-rayon)}
.deb-panneau__mens-prix{margin:0;font-size:15px;color:var(--deb-noir);line-height:1.2}
.deb-panneau__mens-prix strong{font-size:26px;color:var(--deb-rouge);font-variation-settings:'wdth' 108,'wght' 700;letter-spacing:-.01em}
.deb-panneau__mens-unite{font-size:14px;color:var(--deb-rouge);font-weight:600}
.deb-panneau__mens-legal{margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--deb-gris-texte)}

/* Mentions légales du crédit : avant le formulaire de la fiche (renvoi depuis l'astérisque du panneau de prix). */
.deb-mentions-credit{margin:0 0 20px;font-size:12px;line-height:1.5;color:var(--deb-gris-texte);scroll-margin-top:120px}
.deb-panneau__mens-renvoi{color:inherit;text-decoration:none}
.deb-panneau__mens-renvoi:hover,.deb-panneau__mens-renvoi:focus-visible{text-decoration:underline}

/* Carte courte : pastille mensualité pleine rouge, texte blanc (surcharge de la version à filet). */
.deb-vcard .deb-vcard__mens{background:var(--deb-rouge);border-color:var(--deb-rouge);color:#fff}
.deb-vcard .deb-vcard__mens .deb-vcard__mens-lib,.deb-vcard .deb-vcard__mens strong,.deb-vcard .deb-vcard__mens .deb-vcard__mens-unite{color:#fff}

/* --- Bandeau de mise en avant [debenat_bandeau] (champs bandeau_texte / bandeau_couleur)
   En haut à droite de la photo : carte de liste et galerie de la fiche.
   Couleurs limitées à la charte ; texte blanc sur fonds foncés, noir sur fonds clairs. */
body .elementor .e-con.deb-vcard,body .elementor .e-con.deb-col-galerie{position:relative}
.elementor-widget.deb-bandeau-pos{position:absolute !important;top:0;right:0;z-index:3;width:auto !important;max-width:calc(100% - 24px);margin:0 !important;pointer-events:none}
.elementor-widget.deb-bandeau-pos:has(.elementor-shortcode:empty){display:none}
.deb-bandeau{display:block;padding:7px 14px;font-size:13px;line-height:1.2;font-weight:700;font-variation-settings:'wdth' 104,'wght' 700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom-left-radius:var(--deb-rayon)}
/* Fiche VO uniquement (.deb-col-galerie) : bandeau agrandi à la demande du client. Carte de liste inchangée (13px). */
.deb-col-galerie .deb-bandeau{padding:12px 24px;font-size:22px;letter-spacing:.05em}
@media (max-width:1024px){.deb-col-galerie .deb-bandeau{padding:11px 20px;font-size:19px}}
@media (max-width:767px){.deb-col-galerie .deb-bandeau{padding:9px 16px;font-size:16px}}
.deb-bandeau--rouge{background:var(--deb-rouge);color:#fff}
.deb-bandeau--noir{background:var(--deb-noir);color:#fff}
.deb-bandeau--anthracite{background:var(--deb-anthracite);color:#fff}
.deb-bandeau--argent{background:var(--deb-argent);color:var(--deb-noir)}
.deb-bandeau--bleu{background:var(--deb-bleu);color:var(--deb-noir)}
.deb-bandeau--blanc{background:#fff;color:var(--deb-noir);box-shadow:0 0 0 1px var(--deb-gris-ligne)}

/* Fiche VO : en-tête au même dessin que les pages de contenu (.deb-page-hero : gris clair, filigrane Citroën 5 %).
   Les noms de véhicules sont longs : la limite de 22 caractères par ligne du titre est élargie. */
body .elementor .e-con.deb-page-hero--fiche .elementor-heading-title{max-width:40ch}

/* --- Page Reprise : intertitres et aide du formulaire (champs HTML Elementor) */
.deb-form-groupe{margin:12px 0 0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--deb-noir);padding-bottom:8px;border-bottom:2px solid var(--deb-rouge);width:100%}
.elementor-field-group:first-child .deb-form-groupe{margin-top:0}
.deb-form-aide{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--deb-gris-texte)}
.deb-form-aide strong{color:var(--deb-noir)}
.elementor-field-type-upload .elementor-upload-field{padding:12px;border:1px dashed var(--deb-argent);border-radius:var(--deb-rayon);background:var(--deb-gris-fond);width:100%;cursor:pointer}
.deb-upload-erreur{display:block;margin-top:6px;font-size:13px;color:var(--deb-rouge);font-weight:600}

/* --- 17d. ANNEAU v2 : plus de scène figée au défilement ----------------------
   La section suit le flux normal de la page. La molette ne fait tourner l'anneau
   que si la souris a bougé dans la zone des cartes (.deb-anneau__zone).
   Surcharge la section 17 (position sticky, points en span). */
.deb-anneau__scene{position:relative;top:auto}
.deb-anneau__zone{width:100%;perspective:1400px;perspective-origin:50% 45%;padding:8px 0}
.deb-anneau__scene.is-arme .deb-anneau__zone{cursor:ew-resize}
.deb-anneau__nav{display:flex;align-items:center;gap:20px;margin-top:44px}
.deb-anneau__nav .deb-anneau__points{margin-top:0}
.deb-anneau__points button{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:var(--deb-argent);cursor:pointer;transition:width .25s ease,background-color .25s ease}
.deb-anneau__points button.is-actif{width:24px;background:var(--deb-rouge)}
.deb-anneau__points button:focus-visible,.deb-anneau__fleche:focus-visible{outline:2px solid var(--deb-rouge);outline-offset:3px}
.deb-anneau__fleche{width:40px;height:40px;padding:0;border:1px solid var(--deb-gris-ligne);border-radius:50%;background:var(--deb-blanc) no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M9 2 4 7l5 5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");cursor:pointer;transition:border-color .15s,background-color .15s}
.deb-anneau__fleche--suiv{transform:scaleX(-1)}
.deb-anneau__fleche:hover:not(:disabled){border-color:var(--deb-rouge)}
.deb-anneau__fleche:disabled{opacity:.35;cursor:default}
.deb-anneau__aide{margin:4px 0 0;font-size:12px;color:var(--deb-argent);letter-spacing:.02em;transition:opacity .2s}
.deb-anneau__scene.is-arme .deb-anneau__aide{opacity:0}
@media (hover:none){.deb-anneau__aide{display:none}}

/* --- 17e. ANNEAU : neutralisation des Theme Styles sur ses boutons ----------
   Les réglages de bouton du Kit Elementor s'appliquent à toute balise <button> :
   flèches et points héritaient du fond rouge. Flèches blanches, trait noir,
   dans tous les états (repos, survol, focus). */
body .deb-anneau__scene .deb-anneau__nav button{-webkit-appearance:none;appearance:none;font-family:inherit;text-transform:none;letter-spacing:normal;box-shadow:none;margin:0;min-height:0;line-height:0}
body .deb-anneau__scene .deb-anneau__nav .deb-anneau__fleche,
body .deb-anneau__scene .deb-anneau__nav .deb-anneau__fleche:hover,
body .deb-anneau__scene .deb-anneau__nav .deb-anneau__fleche:focus,
body .deb-anneau__scene .deb-anneau__nav .deb-anneau__fleche:active{width:40px;height:40px;padding:0;border:1px solid var(--deb-gris-ligne);border-radius:50%;background:#fff no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M9 2 4 7l5 5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");color:#000}
body .deb-anneau__scene .deb-anneau__nav .deb-anneau__fleche:hover:not(:disabled){border-color:#000}
body .deb-anneau__scene .deb-anneau__nav .deb-anneau__fleche--suiv{transform:scaleX(-1)}
body .deb-anneau__scene .deb-anneau__nav .deb-anneau__points button,
body .deb-anneau__scene .deb-anneau__nav .deb-anneau__points button:hover,
body .deb-anneau__scene .deb-anneau__nav .deb-anneau__points button:focus{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:var(--deb-argent)}
body .deb-anneau__scene .deb-anneau__nav .deb-anneau__points button.is-actif{width:24px;background:var(--deb-rouge)}

/* --- 13b. deb-cols--2 sur un conteneur en largeur « boîte » (boxed) :
   Elementor insère .e-con-inner entre la rangée et ses colonnes, la règle de la
   section 13 (enfants directs) ne les atteignait pas. Même comportement ici :
   2 colonnes égales, empilées sous 1025 px. */
body .elementor .e-con.deb-cols--2 > .e-con-inner{flex-direction:row;flex-wrap:wrap}
body .elementor .e-con.deb-cols--2 > .e-con-inner > .e-con{width:auto;flex:1 1 0%;min-width:0}
@media (max-width:1024px){body .elementor .e-con.deb-cols--2 > .e-con-inner > .e-con{flex:1 1 100%}}

/* Fiche VO, bloc formulaire sur fond noir : texte d'intro en blanc, lien souligné blanc ;
   mentions légales du crédit éclaircies pour rester lisibles (obligation de visibilité). */
.elementor-element-6f5ee99,.elementor-element-6f5ee99 p{color:#fff}
.elementor-element-6f5ee99 a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.elementor-element-6f5ee99 a:hover,.elementor-element-6f5ee99 a:focus-visible{color:var(--deb-rouge)}
.elementor-element-407e228 .deb-mentions-credit{color:rgba(255,255,255,.75)}

/* --- Visionneuse plein écran : flèches précédent / suivant ------------------
   Même dessin que les flèches de la galerie (fond blanc, trait noir, noir au
   survol). Sélecteur renforcé : le kit Elementor stylise toute balise <button>. */
body .deb-viewer .deb-viewer__fleche{-webkit-appearance:none;appearance:none;position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:52px;height:52px;margin:0;padding:0;display:grid;place-items:center;background:#fff;color:#000;border:0;border-radius:var(--deb-rayon);box-shadow:none;cursor:pointer;font-family:inherit;text-transform:none;letter-spacing:normal;transition:background-color .15s,color .15s}
body .deb-viewer .deb-viewer__fleche:hover,body .deb-viewer .deb-viewer__fleche:focus-visible{background:#000;color:#fff;outline:2px solid #fff;outline-offset:2px}
body .deb-viewer .deb-viewer__fleche[hidden]{display:none}
body .deb-viewer .deb-viewer__fleche .deb-ico{font-size:24px;stroke-width:1.9}
body .deb-viewer .deb-viewer__fleche--prec{left:var(--deb-e3)}
body .deb-viewer .deb-viewer__fleche--suiv{right:var(--deb-e3)}
.deb-viewer img{max-width:min(1400px,86vw);max-height:84vh;user-select:none;-webkit-user-drag:none}
@media (max-width:767px){
  body .deb-viewer .deb-viewer__fleche{width:42px;height:42px;background:rgba(255,255,255,.9)}
  body .deb-viewer .deb-viewer__fleche--prec{left:8px}
  body .deb-viewer .deb-viewer__fleche--suiv{right:8px}
  .deb-viewer img{max-width:100%}
}

/* --- Prix en baisse (champ « Ancien prix ») ------------------------------------
   Fiche : ancien prix barré + pastille du montant de la baisse, nouveau prix en rouge.
   Carte : ancien prix barré en petit à côté du prix. */
.deb-panneau__ancien{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 6px;font-size:18px;line-height:1.2;color:var(--deb-gris-texte)}
.deb-panneau__ancien del{text-decoration-thickness:2px;text-decoration-color:var(--deb-gris-texte)}
.deb-panneau__baisse{display:inline-block;padding:4px 8px;border-radius:var(--deb-rayon);background:var(--deb-rouge);color:#fff;font-size:14px;font-weight:700;font-variation-settings:'wdth' 104,'wght' 700}
.deb-panneau__prix--baisse{color:var(--deb-rouge)}
.deb-vcard__prix--baisse{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.deb-vcard__ancien{font-size:15px;font-weight:500;font-variation-settings:'wdth' 100,'wght' 500;color:var(--deb-gris-texte);text-decoration-thickness:1.5px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Ancien prix barré placé sous le nouveau prix (fiche). */
.deb-panneau__ancien{margin:8px 0 0}

/* Carte courte : ancien prix barré sous le prix. Trait du barré affiné (carte et fiche). */
.deb-vcard__prix--baisse{display:block}
.deb-vcard__prix--baisse .deb-vcard__ancien{display:block;margin-top:2px;line-height:1.2}
.deb-vcard__ancien,.deb-panneau__ancien del{text-decoration-thickness:1px}

/* ==========================================================================
   23. PAGES CLASSIQUES (mentions légales, confidentialité, plan du site)
   Pages WordPress sans Elementor : Hello les affiche dans une colonne de
   1140 px. Avec le footer dévoilé (section 20), le footer apparaissait sur
   les côtés et sous le texte. Le <main> prend toute la largeur (fond opaque
   bord à bord), le contenu reste centré et lisible.
   ========================================================================== */
body:not([class*="elementor-page-"]):not(.elementor-page) .site-main{
  max-width:none;width:100%;margin:0;
  padding:64px max(24px, calc((100% - 1140px) / 2)) 96px;
  background:var(--deb-blanc);box-sizing:border-box;
}
body:not([class*="elementor-page-"]):not(.elementor-page) .site-main .page-header,
body:not([class*="elementor-page-"]):not(.elementor-page) .site-main .page-content{max-width:820px}
body:not([class*="elementor-page-"]):not(.elementor-page) .site-main .page-header{
  padding:0 0 24px;margin:0 0 40px;border-bottom:1px solid var(--deb-gris-ligne);
}
body:not([class*="elementor-page-"]):not(.elementor-page) .site-main .entry-title{margin:0;font-size:clamp(32px, 4vw, 44px);line-height:1.1}
body:not([class*="elementor-page-"]):not(.elementor-page) .site-main .page-content h2{
  font-size:clamp(20px, 2vw, 24px);line-height:1.25;margin:40px 0 12px;
}
body:not([class*="elementor-page-"]):not(.elementor-page) .site-main .page-content h2:first-child{margin-top:0}
body:not([class*="elementor-page-"]):not(.elementor-page) .site-main .page-content h3{font-size:18px;margin:28px 0 8px}
body:not([class*="elementor-page-"]):not(.elementor-page) .site-main .page-content p,
body:not([class*="elementor-page-"]):not(.elementor-page) .site-main .page-content li{font-size:16px;line-height:1.65}
body:not([class*="elementor-page-"]):not(.elementor-page) .site-main .page-content a{color:inherit;text-decoration:underline;text-decoration-color:var(--deb-rouge, #E30613);text-underline-offset:3px}
@media (max-width:767px){
  body:not([class*="elementor-page-"]):not(.elementor-page) .site-main{padding:40px 20px 64px}
}