/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.49373
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
/* ============================================================
Le CSS du site est gere dans :
Apparence > Personnaliser > CSS additionnel
Migration vers ce fichier tentee puis annulee : le theme enfant
enqueue style.css avec une version figee (?ver=1.0.0), donc le
navigateur sert une version en cache et les styles ne s appliquent pas.
A refaire uniquement apres avoir corrige l enqueue dans functions.php
pour utiliser wp_get_theme()->get('Version') ou filemtime().
============================================================ */
/* ============================================================
* CSS DU SITE DRIVIUM CAR
* ------------------------------------------------------------
* Ce bloc vient du personnalisateur (Apparence > Personnaliser >
* CSS additionnel), ou il pesait 164 Ko RECOPIES DANS CHAQUE PAGE.
* Depuis ce fichier, il est telecharge une seule fois puis mis en
* cache par le navigateur pour toute la visite.
*
* >>> NE PLUS ECRIRE DE CSS DANS LE PERSONNALISATEUR <<<
* Il est desormais vide, et tout ce qu on y ajouterait repasserait
* en ligne dans chaque page. Tout le CSS du site se modifie ici.
* ============================================================ */
/* ============================================================
DRIVIUM CAR — FONDATIONS
============================================================ */
:root{
--dvc-navy:#0E1C2A;
--dvc-navy-2:#132A3E;
--dvc-gold:#C9960C;
--dvc-gold-lt:#DFA62C;
--dvc-gold-dk:#A87B08;
--dvc-gold-text:#8A6708;
--dvc-muted:#5D6E7D;
--dvc-muted-2:#65727F;
--dvc-line:#E4E9ED;
--dvc-soft:#F5F7F9;
--dvc-green:#177A53;
--dvc-radius:10px;
--dvc-shadow-sm:0 1px 3px rgba(14,28,42,.05),0 6px 18px rgba(14,28,42,.05);
--dvc-shadow:0 4px 12px rgba(14,28,42,.05),0 16px 44px rgba(14,28,42,.10);
--dvc-ease:cubic-bezier(.4,0,.2,1);
}
/* Filet doré sous les titres de section */
.dvc-rule{
width:70px; height:3px; background:var(--dvc-gold);
border-radius:2px; margin:20px auto 0;
}
.dvc-rule-left{ margin:22px 0; width:74px; }
/* Sur-titre doré (eyebrow) */
.dvc-eyebrow{
display:inline-flex; align-items:center; gap:10px;
color:var(--dvc-gold-lt); font-size:13px; font-weight:700;
letter-spacing:.16em; text-transform:uppercase;
}
/* Accessibilité : focus visible sur tout élément interactif */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
outline:3px solid var(--dvc-gold-lt);
outline-offset:2px; border-radius:4px;
}
/* Respect de la préférence système « animations réduites » */
@media (prefers-reduced-motion:reduce){
*{ animation:none !important; transition:none !important; }
}
/* ============================================================
BOUTONS
============================================================ */
.elementor-button{
display:inline-flex; align-items:center; gap:10px;
padding:15px 28px;
font-size:13.5px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase;
border-radius:6px; border:2px solid transparent;
transition:all .25s var(--dvc-ease);
}
/* Bouton principal — OR (texte navy : contraste 6,45:1) */
.dvc-btn-gold .elementor-button{
background:var(--dvc-gold); color:var(--dvc-navy);
}
.dvc-btn-gold .elementor-button:hover{
background:var(--dvc-gold-dk); color:var(--dvc-navy);
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(201,150,12,.32);
}
/* Bouton secondaire — contour or */
.dvc-btn-ghost .elementor-button{
background:transparent; color:var(--dvc-gold-text);
border-color:var(--dvc-gold);
}
.dvc-btn-ghost .elementor-button:hover{
background:var(--dvc-gold); color:var(--dvc-navy);
transform:translateY(-2px);
}
/* Bouton navy */
.dvc-btn-navy .elementor-button{
background:var(--dvc-navy); color:#fff;
}
.dvc-btn-navy .elementor-button:hover{
background:var(--dvc-navy-2); transform:translateY(-2px);
}
/* Bouton contour blanc — sur fond sombre uniquement */
.dvc-btn-white .elementor-button{
background:transparent; color:#fff;
border-color:rgba(255,255,255,.45);
}
.dvc-btn-white .elementor-button:hover{
background:#fff; color:var(--dvc-navy);
}
/* Grande taille */
.dvc-btn-lg .elementor-button{ padding:17px 34px; font-size:14px; }
/* Pleine largeur */
.dvc-btn-block .elementor-button{ width:100%; justify-content:center; }
/* ============================================================
SECTIONS ET CARTES
============================================================ */
/* Rythme vertical des sections */
.dvc-section{ padding-top:84px; padding-bottom:84px; }
@media (max-width:640px){
.dvc-section{ padding-top:56px; padding-bottom:56px; }
}
/* Carte blanche à icône (Pourquoi choisir Drivium Car) */
.dvc-card{
background:#fff; border:1px solid #EEF1F4;
border-radius:var(--dvc-radius);
padding:30px 26px 32px;
box-shadow:var(--dvc-shadow-sm);
transition:transform .3s var(--dvc-ease), box-shadow .3s var(--dvc-ease);
height:100%;
}
.dvc-card:hover{ transform:translateY(-6px); box-shadow:var(--dvc-shadow); }
/* Carte centrée à pastille navy (Nos services, engagements) */
.dvc-card-center{
background:#fff; border:1px solid var(--dvc-line);
border-radius:var(--dvc-radius);
padding:34px 22px 32px; text-align:center; height:100%;
transition:transform .3s var(--dvc-ease), box-shadow .3s var(--dvc-ease),
border-color .3s var(--dvc-ease);
}
.dvc-card-center:hover{
transform:translateY(-6px); box-shadow:var(--dvc-shadow);
border-color:#D8DEE4;
}
.dvc-card-center h3{
font-size:13px; font-weight:700; color:var(--dvc-navy);
text-transform:uppercase; letter-spacing:.07em; line-height:1.4;
}
.dvc-card-center p{
color:var(--dvc-muted); font-size:13.5px; line-height:1.7;
}
/* Pastille ronde navy contenant une icône */
.dvc-dot .elementor-icon{
width:62px; height:62px; border-radius:50%;
background:var(--dvc-navy); color:#fff;
display:flex; align-items:center; justify-content:center;
}
.dvc-dot .elementor-icon svg{ width:28px; height:28px; }
/* ============================================================
HEADER — BARRE DE CONTACT
Icones en images CSS : aucun SVG dans le champ HTML d'Astra,
qui echapperait le contenu. Valeurs en dur, sans variables.
============================================================ */
.ast-above-header-wrap,
.ast-above-header-wrap .ast-above-header-bar,
.ast-above-header-wrap .site-above-header-wrap{
background-color:#0E1C2A !important;
border-bottom:none !important;
}
.ast-above-header-wrap .ast-builder-grid-row{
min-height:44px !important;
padding-top:0 !important;
padding-bottom:0 !important;
align-items:center !important;
}
.ast-above-header-wrap .ast-header-html,
.ast-above-header-wrap .ast-builder-html-element{
padding:0 !important;
margin:0 !important;
}
.dvc-topbar-left,
.dvc-topbar-right{
display:flex !important;
align-items:center;
gap:28px;
min-height:44px;
font-size:13.5px;
line-height:1.4;
color:#D6DEE5 !important;
flex-wrap:wrap;
margin:0 !important;
}
.dvc-topbar-right{ justify-content:flex-end; }
.dvc-topbar-left a,
.dvc-topbar-right span{
display:inline-flex !important;
align-items:center;
color:#D6DEE5 !important;
text-decoration:none !important;
transition:color .2s ease;
}
.dvc-topbar-left a:hover{ color:#FFFFFF !important; }
.dvc-ico-phone::before,
.dvc-ico-mail::before,
.dvc-ico-pin::before{
content:"";
width:16px; height:16px; margin-right:9px; flex:none;
background-repeat:no-repeat; background-position:center; background-size:16px 16px;
}
.dvc-ico-phone::before{
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23DFA62C%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.4 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.4 1.8.6 2.8.8a2 2 0 0 1 1.7 2z%22/%3E%3C/svg%3E");
}
.dvc-ico-mail::before{
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23DFA62C%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222%22 y=%224%22 width=%2220%22 height=%2216%22 rx=%222%22/%3E%3Cpath d=%22m22 6-10 7L2 6%22/%3E%3C/svg%3E");
}
.dvc-ico-pin::before{
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23DFA62C%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E");
}
@media (max-width:640px){
.ast-above-header-wrap{ display:none !important; }
}
/* ==== FOND BLANC DU SITE + HEADER PRINCIPAL ==== */
/* Le noir venait des reglages de site Elementor (elementor-kit)
qui pointaient vers la couleur globale Astra n8 (#000000). */
body,
body.elementor-kit-8,
.elementor-kit-8,
.site,
#content,
.ast-page-builder-template .site-content{
background-color:#FFFFFF !important;
}
/* Barre principale du header : blanche, filet bas discret */
.ast-main-header-wrap,
.ast-main-header-wrap .main-header-bar,
.main-header-bar,
.ast-sticky-active .ast-main-header-wrap{
background-color:#FFFFFF !important;
border-bottom:1px solid #E4E9ED !important;
}
/* Header transparent neutralise : le header reprend sa place dans le flux */
.ast-theme-transparent-header #masthead,
#masthead{ position:relative !important; }
/* Menu : navy sur blanc (17,24:1) au lieu de blanc sur blanc */
.main-header-menu .menu-link,
.main-header-menu > .menu-item > .menu-link,
.ast-header-break-point .main-header-menu .menu-link{
color:#0E1C2A !important;
}
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .current-menu-item > .menu-link,
.main-header-menu > .current-menu-parent > .menu-link,
.main-header-menu > .current-menu-ancestor > .menu-link{
color:#8A6708 !important;
}
/* Icone du menu mobile */
.ast-mobile-menu-trigger-minimal,
.ast-button-wrap .menu-toggle{
color:#0E1C2A !important;
}
/* ============================================================
HEADER COLLANT (sans Astra Pro)
============================================================ */
.ast-main-header-wrap{
position:sticky; top:0; z-index:60;
background:#fff;
border-bottom:1px solid var(--dvc-line);
}
.ast-main-header-wrap .main-header-bar{ min-height:86px; }
/* Barre d'admin connectée : on décale pour ne pas passer dessous */
.admin-bar .ast-main-header-wrap{ top:32px; }
@media (max-width:782px){ .admin-bar .ast-main-header-wrap{ top:46px; } }
9.4 Style du menu
/* ============================================================
MENU PRINCIPAL
============================================================ */
.main-header-menu > .menu-item > .menu-link{
font-size:14px; font-weight:600;
letter-spacing:.04em; text-transform:uppercase;
color:var(--dvc-navy);
padding:8px 0 !important;
position:relative;
transition:color .2s var(--dvc-ease);
}
.main-header-menu > .menu-item{ margin:0 16px; }
/* Soulignement doré animé */
.main-header-menu > .menu-item > .menu-link::after{
content:""; position:absolute; left:0; right:0; bottom:0;
height:2px; background:var(--dvc-gold);
transform:scaleX(0);
transition:transform .25s var(--dvc-ease);
}
.main-header-menu > .menu-item > .menu-link:hover::after,
.main-header-menu > .current-menu-item > .menu-link::after,
.main-header-menu > .current-menu-parent > .menu-link::after{
transform:scaleX(1);
}
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .current-menu-item > .menu-link,
.main-header-menu > .current-menu-parent > .menu-link{
color:var(--dvc-gold-text);
}
/* Menu mobile déroulant */
@media (max-width:980px){
.ast-mobile-header-wrap .main-header-menu .menu-link{
padding:14px 20px !important;
border-bottom:1px solid var(--dvc-line);
}
}
/* ============================================================
BARRE D'ACTION MOBILE
============================================================ */
.dvc-mobile-bar{
position:fixed; left:0; right:0; bottom:0; z-index:80;
background:#fff; border-top:1px solid var(--dvc-line);
box-shadow:0 -6px 20px rgba(14,28,42,.10);
display:none;
padding:9px 10px calc(9px + env(safe-area-inset-bottom));
}
.dvc-mobile-bar ul{
display:grid; grid-template-columns:repeat(3,1fr);
gap:8px; margin:0; padding:0; list-style:none;
}
.dvc-mobile-bar a{
display:flex; flex-direction:column; align-items:center; gap:4px;
padding:8px 4px; border-radius:8px;
font-size:11px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; text-decoration:none;
min-height:44px; justify-content:center;
}
.dvc-mobile-bar svg{
width:20px; height:20px;
stroke:currentColor; fill:none; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round;
}
.dvc-m-call{ background:var(--dvc-gold); color:var(--dvc-navy); }
.dvc-m-wa { background:#1B7F4D; color:#fff; }
.dvc-m-est { background:var(--dvc-navy); color:#fff; }
@media (max-width:980px){
.dvc-mobile-bar{ display:block; }
body{ padding-bottom:78px; }
}
/* ============================================================
FOOTER
============================================================ */
.site-footer, .ast-footer-overlay{
background:#0A1622 !important;
color:#9FB0BE; font-size:14.5px;
}
.site-primary-footer-wrap{ padding:64px 0 48px !important; }
.site-footer h3{
color:#fff; font-size:14px; font-weight:700;
text-transform:uppercase; letter-spacing:.09em;
margin-bottom:22px;
}
.site-footer a{
color:#9FB0BE; text-decoration:none;
transition:color .2s var(--dvc-ease);
}
.site-footer a:hover{ color:var(--dvc-gold-lt); }
.site-footer li{ margin-bottom:12px; }
/* Barre inférieure */
.site-below-footer-wrap{
border-top:1px solid rgba(255,255,255,.09) !important;
padding:22px 0 !important;
font-size:13.5px; color:#7B8B98;
}
/* Réseaux sociaux */
.dvc-socials{ display:flex; gap:12px; margin-top:22px; }
.dvc-socials a{
width:38px; height:38px; border-radius:50%;
border:1px solid rgba(255,255,255,.16);
display:flex; align-items:center; justify-content:center;
transition:all .25s var(--dvc-ease);
}
.dvc-socials a:hover{
background:var(--dvc-gold);
border-color:var(--dvc-gold);
color:var(--dvc-navy);
}
@media (max-width:980px){
.site-primary-footer-wrap{ padding:48px 0 34px !important; }
}
/* ==== FOOTER — MAQUETTE ====
Astra pose un fond gris clair sur la rangee, qui recouvre le navy. */
.site-footer,
.site-footer .site-primary-footer-wrap,
.site-footer .site-above-footer-wrap,
.site-footer .site-below-footer-wrap,
.ast-footer-overlay{
background-color:#0A1622 !important;
background-image:none !important;
}
.site-footer .site-primary-footer-wrap{ padding:64px 0 48px !important; }
.site-footer .ast-builder-grid-row{
max-width:1200px !important; margin:0 auto !important; padding:0 24px !important;
gap:44px !important;
}
.site-footer, .site-footer p, .site-footer li, .site-footer span{
color:#9FB0BE !important; font-size:14.5px; line-height:1.75;
}
.site-footer h3, .site-footer .widget-title{
color:#FFFFFF !important; font-size:14px !important; font-weight:700 !important;
text-transform:uppercase !important; letter-spacing:.09em !important;
margin-bottom:22px !important;
}
.site-footer a{ color:#9FB0BE !important; text-decoration:none !important; }
.site-footer a:hover{ color:#DFA62C !important; }
.site-footer ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
.site-footer li{ margin-bottom:12px !important; }
/* Colonne coordonnees : icones alignees */
.dvc-footer-contact li{ display:flex !important; align-items:flex-start; gap:0; }
.dvc-footer-contact a,
.dvc-footer-contact span{ display:inline-flex !important; align-items:flex-start; }
.dvc-ico-clock::before{
content:""; width:16px; height:16px; margin-right:9px; flex:none;
background-repeat:no-repeat; background-position:center; background-size:16px 16px;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23DFA62C%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5.3l3.3 2%22/%3E%3C/svg%3E");
margin-top:4px;
}
.dvc-footer-contact .dvc-ico-phone::before,
.dvc-footer-contact .dvc-ico-mail::before,
.dvc-footer-contact .dvc-ico-pin::before{ margin-top:4px; }
/* Barre du bas */
.site-below-footer-wrap{
border-top:1px solid rgba(255,255,255,.09) !important;
padding:22px 0 !important; font-size:13.5px !important; color:#7B8B98 !important;
}
@media (max-width:980px){
.site-footer .site-primary-footer-wrap{ padding:48px 0 34px !important; }
.site-footer .ast-builder-grid-row{ gap:34px !important; }
}
/* ==== FOOTER COLONNE 1 ET PROPORTIONS ==== */
.site-footer .site-primary-footer-wrap .ast-builder-grid-row{ grid-template-columns:1.6fr 1fr 1fr 1.2fr !important; }
.dvc-footer-logo{ max-width:200px !important; height:auto !important; margin-bottom:20px; }
.site-footer .footer-widget-area p{ max-width:330px; line-height:1.75 !important; margin:0 0 14px !important; }
/* Bloc « Icones de reseaux sociaux » de Gutenberg */
.site-footer .wp-block-social-links{
display:flex !important; gap:12px !important; margin:22px 0 0 !important;
padding:0 !important; list-style:none !important;
}
.site-footer .wp-block-social-link{
margin:0 !important; padding:0 !important;
width:38px !important; height:38px !important;
}
.site-footer .wp-block-social-link-anchor{
width:38px !important; height:38px !important;
border-radius:50% !important;
border:1px solid rgba(255,255,255,.16) !important;
background:transparent !important;
display:flex !important; align-items:center; justify-content:center;
color:#DFA62C !important;
transition:all .25s ease;
}
.site-footer .wp-block-social-link-anchor svg{
width:18px !important; height:18px !important; fill:#DFA62C !important;
}
.site-footer .wp-block-social-link-anchor:hover{
background:rgba(223,166,44,.12) !important; border-color:#DFA62C !important;
}
@media (max-width:980px){ .site-footer .site-primary-footer-wrap .ast-builder-grid-row{ grid-template-columns:1fr 1fr !important; } }
@media (max-width:640px){ .site-footer .site-primary-footer-wrap .ast-builder-grid-row{ grid-template-columns:1fr !important; } }
/* ==== FOOTER ORDRE COLONNE 1 ====
display:contents fait remonter le logo et les socials au niveau
de la colonne, ce qui permet de les ordonner autour de la description. */
.site-footer-primary-section-1{ display:flex !important; flex-direction:column !important; }
.site-footer-primary-section-1 > .footer-widget-area:first-child,
.site-footer-primary-section-1 > .footer-widget-area:first-child > .ast-header-html,
.site-footer-primary-section-1 > .footer-widget-area:first-child > .ast-header-html > .ast-builder-html-element{ display:contents !important; }
.site-footer-primary-section-1 .dvc-footer-logo{ order:1 !important; }
.site-footer-primary-section-1 > .footer-widget-area:last-child{ order:2 !important; }
.site-footer-primary-section-1 .dvc-socials{ order:3 !important; }
/* ==== FOOTER ICONES SOCIALES ==== */
/* Texte masque : WordPress supprime les liens sans contenu. */
.dvc-sr{ position:absolute !important; width:1px !important; height:1px !important;
padding:0 !important; margin:-1px !important; overflow:hidden !important;
clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.dvc-socials{ display:flex !important; gap:12px !important; margin:22px 0 0 !important; }
.dvc-socials a{ width:38px !important; height:38px !important; border-radius:50% !important; flex:none; border:1px solid rgba(255,255,255,.16) !important; display:flex !important; align-items:center; justify-content:center; transition:all .25s ease; }
.dvc-socials a::before{ content:"" !important; display:block !important; width:18px !important; height:18px !important; background-repeat:no-repeat !important; background-position:center !important; background-size:18px 18px !important; }
.dvc-socials a:hover{ background:rgba(223,166,44,.12) !important; border-color:#DFA62C !important; }
.dvc-soc-fb::before{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2218%22 viewBox=%220 0 24 24%22 fill=%22%23DFA62C%22%3E%3Cpath d=%22M14.5 8.5H17V5.6h-2.6c-2.2 0-3.6 1.5-3.6 3.7v1.6H8.4v3h2.4V21h3.1v-7.1h2.5l.4-3h-2.9v-1.3c0-.7.3-1.1 1.1-1.1z%22/%3E%3C/svg%3E") !important; }
.dvc-soc-ig::before{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2218%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23DFA62C%22 stroke-width=%221.8%22%3E%3Crect x=%223.5%22 y=%223.5%22 width=%2217%22 height=%2217%22 rx=%225%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Ccircle cx=%2217%22 cy=%227%22 r=%221%22 fill=%22%23DFA62C%22 stroke=%22none%22/%3E%3C/svg%3E") !important; }
.dvc-soc-wa::before{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2218%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23DFA62C%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 21l1.4-4.2A8.5 8.5 0 1 1 8 20.3z%22/%3E%3Cpath d=%22M9 9.5c0 3 2.5 5.5 5.5 5.5%22/%3E%3C/svg%3E") !important; }
/* ==== FOOTER ALIGNEMENT COLONNE 1 ET COPYRIGHT ==== */
/* La colonne 1 etait centree verticalement : son logo tombait
plus bas que les titres des autres colonnes. */
.site-footer-primary-section-1{ justify-content:flex-start !important; }
.site-footer-primary-section-1 p,
.site-footer-primary-section-1 .aligncenter{ text-align:left !important; }
.site-footer-primary-section-1 > .footer-widget-area:first-child p{ margin:0 !important; }
.site-footer-primary-section-1 img{ margin:0 0 22px !important; display:block !important; }
.site-footer-primary-section-1 .wp-block-paragraph{ margin:0 !important; }
.site-footer-primary-section-1 .dvc-socials{ margin:24px 0 0 !important; }
/* Barre du bas : une seule colonne, centree, sur une ligne */
.site-below-footer-wrap .ast-builder-grid-row{
grid-template-columns:1fr !important;
max-width:1200px !important; margin:0 auto !important; padding:0 24px !important;
}
.site-below-footer-wrap .site-footer-section,
.site-below-footer-wrap .ast-builder-html-element,
.site-below-footer-wrap .ast-footer-copyright,
.site-below-footer-wrap p{
width:100% !important; text-align:center !important; margin:0 !important;
}
@media (min-width:641px){
.site-below-footer-wrap .ast-footer-copyright,
.site-below-footer-wrap p{ white-space:nowrap !important; }
}
/* ==== FOOTER LOGO ET ESPACEMENTS ==== */
/* Le logo est un PNG carre 2000x2000 : la signature occupe une
bande centrale, le reste est vide. object-fit:cover recadre
cette bande au lieu d afficher 200 px de vide. */
.site-footer-primary-section-1 img{
width:280px !important; height:101px !important;
object-fit:cover !important; object-position:center !important;
margin:0 0 24px !important; display:block !important;
}
/* Espacements internes maitrises */
.site-footer .footer-widget-area{ margin:0 !important; padding:0 !important; }
.site-footer .widget{ margin:0 0 14px !important; padding:0 !important; }
.site-footer .widget:last-child{ margin-bottom:0 !important; }
.site-footer-primary-section-1 .wp-block-paragraph{ margin:0 !important; }
.site-footer-primary-section-1 .dvc-socials{ margin:24px 0 0 !important; }
/* ==== FOOTER ESPACEMENTS MAQUETTE ==== */
/* Valeurs de la maquette : logo->texte 20px, texte->icones 22px. */
.site-footer-primary-section-1 img{ margin:0 0 20px !important; }
.site-footer-primary-section-1 .widget,
.site-footer-primary-section-1 .widget_block{ margin:0 !important; padding:0 !important; }
.site-footer-primary-section-1 .wp-block-paragraph,
.site-footer-primary-section-1 p{ margin:0 !important; }
.site-footer-primary-section-1 .dvc-socials{ margin:22px 0 0 !important; }
/* Les blocs vides ne doivent plus creuser d espace */
.site-footer-primary-section-1 .widget:empty,
.site-footer-primary-section-1 .wp-block-social-links:empty{ display:none !important; }
/* Barre de copyright : Astra impose une hauteur minimale a la rangee */
.site-below-footer-wrap{ padding:20px 0 !important; }
.site-below-footer-wrap .ast-builder-grid-row,
.site-below-footer-wrap .site-footer-section,
.site-below-footer-wrap .ast-builder-grid-row-container{
min-height:0 !important; padding-top:0 !important; padding-bottom:0 !important;
}
.site-below-footer-wrap .ast-footer-copyright,
.site-below-footer-wrap p{ font-size:13.5px !important; line-height:1.5 !important; }
/* Rangee principale un peu resserree */
.site-footer .site-primary-footer-wrap{ padding:56px 0 40px !important; }
/* ==== FOOTER ESPACEMENTS FINS ==== */
/* Une regle anterieure (.site-footer .footer-widget-area p) imposait
margin-bottom:14px avec !important : meme selecteur, place plus bas. */
.site-footer .footer-widget-area p{ margin:0 !important; }
.site-footer-primary-section-1 .dvc-socials{ margin:22px 0 0 !important; }
/* Blocs vides : plus aucune place occupee */
.site-footer-primary-section-1 .widget_block:not(:has(*)),
.site-footer-primary-section-1 .wp-block-social-links{ display:none !important; }
/* Barre de copyright : toutes les hauteurs minimales d Astra a zero */
.site-below-footer-wrap,
.site-below-footer-wrap *{ min-height:0 !important; }
.site-below-footer-wrap .ast-builder-grid-row-container,
.site-below-footer-wrap .ast-builder-grid-row-container-inner,
.site-below-footer-wrap .ast-builder-grid-row,
.site-below-footer-wrap .site-footer-section{
padding-top:0 !important; padding-bottom:0 !important;
}
.site-below-footer-wrap{ padding:18px 0 !important; }
/* ==== FOOTER ADRESSE ET ALIGNEMENT ==== */
/* Dans un conteneur flex un
nu est ignore : on encapsule
les textes sur plusieurs lignes dans un element de bloc. */
.dvc-ml{ display:block !important; line-height:1.6 !important; text-align:left !important; }
/* Astra centre le contenu des colonnes de footer */
.dvc-footer-contact,
.dvc-footer-contact li,
.dvc-footer-contact a,
.dvc-footer-contact span{ text-align:left !important; }
/* ==== FOOTER TITRE CONTACT ==== */
/* Astra centre les titres de colonnes ; celui de Contact doit
s aligner sur sa liste, qui est a gauche. */
.site-footer-primary-section-4 h3,
.site-footer-primary-section-4 .widget-title,
.site-footer-primary-section-4 .ast-builder-html-element > h3{
text-align:left !important;
}
/* ==== FOOTER LOGO RECADRE AU PIXEL ==== */
/* Analyse du PNG source (2000x2000) : la signature occupe
x 17,8% -> 77,3% et y 42% -> 57,8%, soit 59,8% x 16%.
Boite 418x67 = source rendue a 418px de large, bande utile
exacte. La marge gauche negative annule le vide du PNG. */
.site-footer-primary-section-1 img{
width:418px !important;
height:67px !important;
object-fit:cover !important;
object-position:50% 49.9% !important;
margin:0 0 16px -74px !important;
display:block !important;
max-width:none !important;
}
/* ============================================================
ZONE PROTEGEE — NE RIEN COLLER APRES CETTE LIGNE
Ces blocs ont ete effaces 3 fois par un collage.
Pour ajouter du CSS : placer le curseur AVANT cette zone.
============================================================ */
/* ==== BARRE PRINCIPALE : UNE LIGNE, FLUIDE ==== */
.ast-main-header-wrap .ast-builder-grid-row{
width:100% !important; max-width:1200px !important; margin:0 auto !important;
padding:0 24px !important; min-height:86px !important;
grid-template-columns:auto 1fr auto !important;
align-items:center !important; gap:clamp(12px, 1.6vw, 24px) !important;
}
.ast-main-header-wrap .site-primary-header-wrap{ max-width:none !important; padding:0 !important; min-height:86px !important; }
.ast-main-header-wrap .site-header-section{ min-height:0 !important; padding-top:0 !important; padding-bottom:0 !important; }
.ast-main-header-wrap .site-header-primary-section-center{ min-width:0 !important; }
.ast-main-header-wrap .custom-logo{ max-height:clamp(46px, 5vw, 62px) !important; width:auto !important; max-width:none !important; height:auto !important; }
.ast-main-header-wrap .site-branding, .ast-main-header-wrap .ast-site-identity{ padding:0 !important; }
body:not(.ast-header-break-point) .main-header-menu{ flex-wrap:nowrap !important; }
.main-header-menu > .menu-item{ margin:0 clamp(9px, calc(3vw - 20.4px), 18px) !important; }
.main-header-menu > .menu-item > .menu-link{ padding:8px 0 !important; font-size:clamp(14.5px, calc(9.6px + 0.5vw), 16px) !important; letter-spacing:.03em !important; white-space:nowrap !important; line-height:1.25 !important; font-weight:600 !important; }
.ast-main-header-wrap .ast-custom-button, .ast-main-header-wrap .ast-builder-button-wrap .ast-custom-button span{ white-space:nowrap !important; }
.ast-main-header-wrap .ast-custom-button{ padding:clamp(11px,1vw,14px) clamp(16px,1.6vw,24px) !important; font-size:clamp(11.5px, calc(7.6px + 0.4vw), 13.5px) !important; line-height:1.2 !important; }
@media (max-width:1000px){ .main-header-menu > .menu-item{ margin:0 6px !important; } .main-header-menu > .menu-item > .menu-link{ font-size:13px !important; } .ast-main-header-wrap .custom-logo{ max-height:44px !important; } .ast-main-header-wrap .ast-custom-button{ padding:10px 14px !important; font-size:11px !important; } }
@media (max-width:920px){ .ast-main-header-wrap .ast-builder-grid-row{ min-height:72px !important; } .ast-main-header-wrap .custom-logo{ max-height:44px !important; } }
/* ==== MENU MOBILE : BURGER ==== */
.ast-mobile-header-wrap .ast-mobile-svg, .ast-header-break-point .ast-mobile-svg, [class*="mobile-menu-trigger"] svg, .ast-button-wrap .menu-toggle svg{ fill:#0E1C2A !important; color:#0E1C2A !important; }
[class*="mobile-menu-trigger"], .ast-button-wrap .menu-toggle{ color:#0E1C2A !important; background:transparent !important; min-width:44px !important; min-height:44px !important; }
.ast-header-break-point .ast-mobile-header-wrap, #ast-mobile-popup, #ast-mobile-popup .ast-mobile-popup-inner{ background:#FFFFFF !important; }
#ast-mobile-popup .menu-toggle-close svg{ fill:#0E1C2A !important; }
/* ==== MENU MOBILE VERTICAL ==== */
.ast-header-break-point .main-header-menu, .ast-header-break-point ul.main-header-menu.ast-nav-menu, .ast-header-break-point .main-navigation ul{ display:block !important; flex-direction:column !important; flex-wrap:wrap !important; width:100% !important; }
.ast-header-break-point .main-header-menu > .menu-item, .ast-header-break-point .main-navigation ul > li{ display:block !important; width:100% !important; margin:0 !important; float:none !important; border-bottom:1px solid #E4E9ED !important; }
.ast-header-break-point .main-header-menu > .menu-item:last-child{ border-bottom:none !important; }
.ast-header-break-point .main-header-menu .menu-link, .ast-header-break-point .main-navigation ul > li > a{ display:block !important; width:100% !important; padding:15px 20px !important; font-size:15px !important; color:#0E1C2A !important; white-space:normal !important; text-align:left !important; }
.ast-header-break-point .main-header-menu .menu-link:hover, .ast-header-break-point .main-header-menu .current-menu-item > .menu-link{ color:#8A6708 !important; background:#F5F7F9 !important; }
.ast-header-break-point .main-header-menu .sub-menu{ display:block !important; width:100% !important; position:static !important; box-shadow:none !important; background:#F5F7F9 !important; }
.ast-header-break-point .main-header-menu .sub-menu .menu-link{ padding-left:36px !important; }
.ast-header-break-point .main-navigation, .ast-header-break-point .site-navigation, .ast-header-break-point .main-header-bar-navigation{ width:100% !important; display:block !important; }
/* ==== HEADER AGRANDISSEMENT ====
Place le bloc en dernier : il surcharge volontairement les tailles
de la zone protegee. Budget mesure : 1152 px utiles, 258 px libres.
Logo source 1998x666, signature dessinee de 13,7% a 82,4% en largeur
et 18% a 82% en hauteur : on recadre comme pour le footer. */
.ast-main-header-wrap .custom-logo{
width:306px !important;
height:65px !important;
max-width:none !important;
max-height:none !important;
object-fit:cover !important;
object-position:50% 50% !important;
margin-left:-42px !important;
display:block !important;
/* Le PNG porte une plaque blanche opaque (254,252,250) au lieu de
transparence : multiply la fond dans le blanc du header. */
mix-blend-mode:multiply !important;
}
.main-header-menu > .menu-item{
margin:0 clamp(10px, calc(4vw - 29.2px), 22px) !important;
}
.main-header-menu > .menu-item > .menu-link{
font-size:clamp(15px, calc(6.83px + 0.833vw), 17.5px) !important;
letter-spacing:.035em !important;
}
.ast-main-header-wrap .ast-custom-button{
padding:clamp(13px, 1.15vw, 16px) clamp(20px, 2vw, 30px) !important;
font-size:clamp(12px, calc(8.5px + 0.4vw), 14.5px) !important;
letter-spacing:.06em !important;
}
@media (max-width:1100px){
.ast-main-header-wrap .custom-logo{
width:250px !important; height:53px !important; margin-left:-34px !important;
}
}
@media (max-width:920px){
.ast-main-header-wrap .custom-logo{
width:212px !important; height:45px !important; margin-left:-29px !important;
}
}
/* ==== FOOTER MOBILE : CENTRAGE ====
Desktop inchange. Sous 980px les colonnes s empilent et Astra les
centre : le bloc Contact et la colonne 1 doivent suivre. */
@media (max-width:980px){
/* Bloc Contact : titre, liste et lignes centres */
.site-footer-primary-section-4 h3,
.site-footer-primary-section-4 .widget-title,
.dvc-footer-contact,
.dvc-footer-contact li,
.dvc-footer-contact a,
.dvc-footer-contact span,
.dvc-footer-contact .dvc-ml{
text-align:center !important;
}
.dvc-footer-contact li{ justify-content:center !important; }
/* Meme specificite que la regle desktop, sinon elle l emporte */
.site-footer-primary-section-4 .ast-builder-html-element > h3{
text-align:center !important;
}
/* Colonne 1 : logo recentre. La marge negative du recadrage le
faisait deborder de 50px hors de l ecran. */
.site-footer-primary-section-1{ align-items:center !important; }
.site-footer-primary-section-1 img{
width:280px !important;
height:45px !important;
margin:0 auto 16px !important;
transform:translateX(7px) !important; /* recentre la signature dans sa boite */
}
.site-footer-primary-section-1 p,
.site-footer-primary-section-1 .wp-block-paragraph{
text-align:center !important;
max-width:340px !important;
margin-left:auto !important; margin-right:auto !important;
}
.site-footer-primary-section-1 .dvc-socials{
justify-content:center !important;
}
/* Aucun debordement horizontal */
.site-footer{ overflow-x:hidden !important; }
}
/* ==== CATALOGUE VEHICULES ==== */
/* Hero sombre des pages interieures */
.dvc-hero-dark h1{ font-size:44px !important; font-weight:700 !important; line-height:1.13 !important; color:#fff !important; }
.dvc-hero-dark h1 .dvc-gold, .dvc-hero-dark .dvc-gold{ color:#DFA62C !important; display:block; }
.dvc-hero-dark .dvc-eyebrow, .dvc-hero-dark .dvc-eyebrow *{
color:#DFA62C !important; font-size:13px !important; font-weight:700 !important;
letter-spacing:.16em !important; text-transform:uppercase !important;
}
.dvc-hero-dark .dvc-hero-lead, .dvc-hero-dark .dvc-hero-lead p{
color:#C2CEDA !important; font-size:16px !important; line-height:1.75 !important; max-width:530px;
}
@media (max-width:980px){ .dvc-hero-dark h1{ font-size:32px !important; } }
@media (max-width:640px){ .dvc-hero-dark h1{ font-size:27px !important; } }
/* Panneau de filtres */
.dvc-filters-box{
background:#fff !important; border:1px solid #E4E9ED !important; border-radius:10px !important;
padding:26px 22px !important; box-shadow:0 1px 3px rgba(14,28,42,.05),0 6px 18px rgba(14,28,42,.05) !important;
position:sticky; top:110px;
}
.dvc-filters-box h2{
font-size:14px !important; font-weight:700 !important; text-transform:uppercase !important;
letter-spacing:.07em !important; color:#0E1C2A !important; margin-bottom:22px !important;
}
@media (max-width:980px){ .dvc-filters-box{ position:static; } }
/* Barre compteur */
.dvc-catalog-count, .dvc-catalog-count p{ font-size:15px !important; color:#5D6E7D !important; margin:0 !important; }
.dvc-catalog-count strong{ color:#0E1C2A !important; font-weight:700 !important; }
/* Grille */
.dvc-veh-grid .elementor-grid{ gap:24px !important; }
/* Carte vehicule */
.dvc-veh-card{
background:#fff !important; border:1px solid #E4E9ED !important; border-radius:10px !important;
overflow:hidden !important; height:100% !important;
transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.dvc-veh-card:hover{ transform:translateY(-6px); box-shadow:0 4px 12px rgba(14,28,42,.05),0 16px 44px rgba(14,28,42,.10); }
.dvc-veh-media{ aspect-ratio:4/3; overflow:hidden; background:#EDF0F3; }
.dvc-veh-media img{ width:100% !important; height:100% !important; object-fit:cover !important; transition:transform .5s ease; }
.dvc-veh-card:hover .dvc-veh-media img{ transform:scale(1.04); }
.dvc-veh-body h3, .dvc-veh-body h3 a{
font-size:17px !important; font-weight:700 !important; color:#0E1C2A !important;
margin:0 0 4px !important; text-decoration:none !important; line-height:1.3 !important;
}
.dvc-veh-body h3 a:hover{ color:#8A6708 !important; }
.dvc-veh-version, .dvc-veh-version p{ font-size:13.5px !important; color:#5D6E7D !important; margin:0 0 14px !important; }
/* Ligne de caracteristiques */
.dvc-veh-meta{ padding-bottom:16px !important; border-bottom:1px solid #E4E9ED !important; }
.dvc-veh-meta .elementor-shortcode{ display:flex !important; flex-wrap:wrap; gap:10px 14px; }
.dvc-veh-meta span{ display:inline-flex !important; align-items:center; gap:6px; font-size:12.5px; color:#5D6E7D; }
.dvc-veh-meta svg{ width:14px; height:14px; color:#65727F; flex:none; }
/* Pied de carte */
.dvc-veh-foot{ margin-top:16px !important; }
.dvc-veh-price, .dvc-veh-price .elementor-shortcode{
font-size:21px !important; font-weight:800 !important; color:#8A6708 !important; line-height:1.1 !important;
}
.dvc-prix-demande{ font-size:14px !important; font-weight:600 !important; color:#65727F !important; }
.dvc-veh-foot .elementor-button{
background:#0E1C2A !important; color:#fff !important;
padding:11px 18px !important; font-size:12px !important; font-weight:700 !important;
letter-spacing:.06em !important; text-transform:uppercase !important;
border-radius:6px !important; white-space:nowrap !important; line-height:1.2 !important;
}
.dvc-veh-foot .elementor-button:hover{ background:#132A3E !important; }
/* ==== CARTE VEHICULE (classes natives Elementor) ====
Les classes personnalisees ne se posent pas sur le conteneur racine
d un Loop Item : on cible la structure generee par Elementor. */
.dvc-veh-grid .e-loop-item > .e-con{
background:#fff !important;
border:1px solid #E4E9ED !important;
border-radius:10px !important;
overflow:hidden !important;
height:100% !important;
transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.dvc-veh-grid .e-loop-item > .e-con:hover{
transform:translateY(-6px);
box-shadow:0 4px 12px rgba(14,28,42,.05),0 16px 44px rgba(14,28,42,.10);
}
/* Zone image : premier conteneur enfant */
.dvc-veh-grid .e-loop-item > .e-con > .e-con:first-child{
aspect-ratio:4/3; overflow:hidden; background:#EDF0F3;
padding:0 !important; --padding-top:0; --padding-bottom:0; --padding-left:0; --padding-right:0;
}
.dvc-veh-grid .e-loop-item > .e-con > .e-con:first-child img{
width:100% !important; height:100% !important; object-fit:cover !important;
transition:transform .5s ease;
}
.dvc-veh-grid .e-loop-item > .e-con:hover > .e-con:first-child img{ transform:scale(1.04); }
/* Zone image vide : repere visuel discret */
.dvc-veh-grid .e-loop-item > .e-con > .e-con:first-child:empty::after,
.dvc-veh-grid .e-loop-item .elementor-widget-theme-post-featured-image:not(:has(img))::after{
content:"Photo a ajouter"; display:flex; align-items:center; justify-content:center;
width:100%; height:100%; color:#9AA7B3; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
/* Boutons de la grille */
.dvc-veh-grid .elementor-button{
background:#0E1C2A !important; color:#fff !important;
padding:11px 18px !important; font-size:12px !important; font-weight:700 !important;
letter-spacing:.06em !important; text-transform:uppercase !important;
border-radius:6px !important; white-space:nowrap !important; line-height:1.2 !important;
}
.dvc-veh-grid .elementor-button:hover{ background:#132A3E !important; }
/* Titre de la carte */
.dvc-veh-grid .elementor-widget-theme-post-title,
.dvc-veh-grid .elementor-widget-theme-post-title h3,
.dvc-veh-grid .elementor-widget-theme-post-title a{
font-size:17px !important; font-weight:700 !important; color:#0E1C2A !important;
line-height:1.3 !important; text-decoration:none !important; margin:0 !important;
}
.dvc-veh-grid .elementor-widget-theme-post-title a:hover{ color:#8A6708 !important; }
/* ==== HERO ARCHIVE : VISUEL ET SUR-TITRE ====
Fond composite degrade + photo sur le conteneur lui-meme.
Les pseudo-elements deviennent des elements flex dans un
conteneur Elementor et se positionnent mal. */
.post-type-archive-vehicule .elementor-element-a299f20{
/* image geree par Elementor ; degrade sur la superposition */
}
@media (max-width:980px){
.post-type-archive-vehicule .elementor-element-a299f20{
/* fond deplace sur la couche de superposition */
}
}
/* Icone voiture devant le sur-titre */
.dvc-eyebrow .elementor-heading-title::before, .dvc-eyebrow p::before{
content:''; display:inline-block; width:16px; height:16px; margin-right:10px;
vertical-align:-3px; background-repeat:no-repeat; background-position:center; background-size:16px 16px;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23DFA62C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17h14M3 17v-4l2-5a2 2 0 0 1 1.9-1.4h10.2A2 2 0 0 1 19 8l2 5v4'/%3E%3Cpath d='M3 13h18'/%3E%3Ccircle cx='7' cy='17' r='1.8'/%3E%3Ccircle cx='17' cy='17' r='1.8'/%3E%3C/svg%3E");
}
/* Vignettes au format 4/3 */
.dvc-veh-grid .elementor-widget-theme-post-featured-image{ aspect-ratio:4/3 !important; overflow:hidden !important; }
.dvc-veh-grid .elementor-widget-theme-post-featured-image img{ width:100% !important; height:100% !important; object-fit:cover !important; }
/* ==== CARTES : 4 CARACTERISTIQUES SUR UNE LIGNE + PIEDS ALIGNES ==== */
/* Colonne de filtres resserree : la place gagnee va aux cartes. */
.post-type-archive-vehicule .dvc-filters-box{ width:250px !important; }
.post-type-archive-vehicule .elementor-element-471ca03{ width:250px !important; flex:0 0 250px !important; }
.dvc-veh-grid .elementor-grid{ gap:20px !important; }
/* Corps de carte : colonne flexible pour pousser le pied en bas */
.dvc-veh-grid .e-loop-item > .e-con{ display:flex !important; flex-direction:column !important; }
.dvc-veh-grid .e-loop-item > .e-con > .e-con:last-child{
flex:1 1 auto !important; display:flex !important; flex-direction:column !important;
padding:16px 14px 18px !important;
}
/* Le pied colle au bas : tous les prix et boutons alignes sur une ligne */
.dvc-veh-grid .e-loop-item > .e-con > .e-con:last-child > .e-con:last-child{
margin-top:auto !important;
}
/* Ligne de caracteristiques : jamais de retour a la ligne */
.dvc-veh-meta .elementor-shortcode{
display:flex !important; flex-wrap:nowrap !important;
gap:7px !important; align-items:center; justify-content:space-between;
}
.dvc-veh-meta span{
display:inline-flex !important; align-items:center; gap:4px !important;
font-size:11px !important; letter-spacing:-.01em !important;
white-space:nowrap !important; color:#5D6E7D !important; flex:0 0 auto;
}
.dvc-veh-meta svg{ width:12px !important; height:12px !important; flex:none; }
/* ==== VIGNETTES : FORMAT 4/3 STRICT ====
Sans cela les images de proportions differentes donnent des
hauteurs de vignette inegales, et les pieds de carte se decalent. */
.dvc-veh-grid .e-loop-item > .e-con > .e-con:first-child{
aspect-ratio:4/3 !important;
height:auto !important; min-height:0 !important;
flex:0 0 auto !important; overflow:hidden !important;
padding:0 !important; background:#EDF0F3 !important;
}
.dvc-veh-grid .e-loop-item > .e-con > .e-con:first-child > *,
.dvc-veh-grid .elementor-widget-theme-post-featured-image,
.dvc-veh-grid .elementor-widget-theme-post-featured-image > div,
.dvc-veh-grid .elementor-widget-theme-post-featured-image figure,
.dvc-veh-grid .elementor-widget-theme-post-featured-image a{
height:100% !important; width:100% !important;
display:block !important; margin:0 !important;
}
.dvc-veh-grid .elementor-widget-theme-post-featured-image img{
width:100% !important; height:100% !important;
object-fit:cover !important; display:block !important;
}
/* ==== GRILLE : COLONNES EGALES ====
Elementor dimensionne les colonnes sur leur contenu : les cartes
ont des largeurs differentes, donc des vignettes de hauteurs
differentes, donc des pieds decales. 1fr resout les trois. */
.dvc-veh-grid .elementor-grid{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
align-items:stretch !important;
}
.dvc-veh-grid .elementor-grid > *{ min-width:0 !important; }
@media (max-width:1100px){
.dvc-veh-grid .elementor-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:640px){
.dvc-veh-grid .elementor-grid{ grid-template-columns:minmax(0,1fr) !important; }
}
/* ==== PANNEAU DE FILTRES ==== */
.post-type-archive-vehicule .elementor-element-471ca03{
background:#fff !important; border:1px solid #E4E9ED !important;
border-radius:10px !important; padding:24px 20px !important;
box-shadow:0 1px 3px rgba(14,28,42,.05),0 6px 18px rgba(14,28,42,.05) !important;
position:sticky; top:110px; align-self:flex-start !important;
}
.post-type-archive-vehicule .elementor-element-471ca03 h2{
font-size:14px !important; font-weight:700 !important; color:#0E1C2A !important;
text-transform:uppercase !important; letter-spacing:.07em !important;
margin:0 0 20px !important; line-height:1.3 !important;
display:flex !important; align-items:center; gap:10px;
}
.post-type-archive-vehicule .elementor-element-471ca03 h2::before{
content:""; width:18px; height:18px; flex:none;
background-repeat:no-repeat; background-position:center; background-size:18px 18px;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230E1C2A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M6 12h12M10 18h4'/%3E%3C/svg%3E");
}
/* Libelles des filtres */
.wpc-filters-widget .wpc-filter-title, .wpc-filter-title, .wpc-filters-main-wrap h3{
font-size:13px !important; font-weight:600 !important; color:#0E1C2A !important;
margin:0 0 7px !important; text-transform:none !important; letter-spacing:0 !important;
}
.wpc-filters-widget .wpc-filter, .wpc-filter{ margin-bottom:16px !important; }
/* Listes deroulantes */
.wpc-filters-widget select, .wpc-filters-main-wrap select{
width:100% !important; padding:12px 36px 12px 14px !important;
border:1px solid #E4E9ED !important; border-radius:8px !important;
font-size:14px !important; color:#0E1C2A !important; background-color:#fff !important;
appearance:none !important; -webkit-appearance:none !important;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235D6E7D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important; background-position:right 13px center !important;
}
.wpc-filters-widget select:focus{
border-color:#C9960C !important; outline:none !important;
box-shadow:0 0 0 3px rgba(201,150,12,.14) !important;
}
/* Champs numeriques et curseur */
.wpc-filters-widget input[type=text], .wpc-filters-widget input[type=number]{
padding:9px 10px !important; border:1px solid #E4E9ED !important;
border-radius:7px !important; font-size:13.5px !important; color:#0E1C2A !important;
}
.wpc-filters-widget .noUi-connect, .noUi-connect{ background:#C9960C !important; }
.wpc-filters-widget .noUi-handle, .noUi-handle{
border:2px solid #C9960C !important; background:#fff !important;
box-shadow:none !important; border-radius:50% !important;
}
@media (max-width:980px){
.post-type-archive-vehicule .elementor-element-471ca03{ position:static; width:100% !important; }
}
/* ==== TRI, BOUTONS DE FILTRES ET FAVORIS ==== */
/* Menu de tri, en haut a droite */
.dvc-tri{ margin-left:auto; }
.dvc-tri-select{
padding:11px 36px 11px 14px !important; border:1px solid #E4E9ED !important;
border-radius:8px !important; font-size:14px !important; color:#0E1C2A !important;
background-color:#fff !important; max-width:240px; cursor:pointer;
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235D6E7D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 13px center;
}
.dvc-tri-select:focus{ border-color:#C9960C !important; outline:none;
box-shadow:0 0 0 3px rgba(201,150,12,.14); }
/* Boutons sous les filtres */
.dvc-actions{ display:flex; align-items:center; gap:16px; margin-top:20px; }
.dvc-btn-rechercher{
display:inline-flex; align-items:center; gap:8px;
background:#C9960C; color:#0E1C2A; border:none; cursor:pointer;
padding:12px 20px; border-radius:6px;
font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
transition:all .25s ease;
}
.dvc-btn-rechercher::before{
content:""; width:15px; height:15px; flex:none;
background-repeat:no-repeat; background-position:center; background-size:15px 15px;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%230E1C2A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
}
.dvc-btn-rechercher:hover{ background:#A87B08; transform:translateY(-2px); }
.dvc-btn-reinit{
font-size:12.5px; font-weight:600; color:#5D6E7D !important;
text-transform:uppercase; letter-spacing:.05em; text-decoration:none !important;
}
.dvc-btn-reinit:hover{ color:#8A6708 !important; }
/* Bouton favori sur les vignettes */
.dvc-veh-grid .e-loop-item > .e-con > .e-con:first-child{ position:relative !important; }
.dvc-fav{
position:absolute; top:12px; right:12px; z-index:4;
width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
background:rgba(255,255,255,.92); color:#0E1C2A;
display:flex; align-items:center; justify-content:center; padding:0;
transition:all .2s ease;
}
.dvc-fav svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.dvc-fav:hover{ background:#fff; color:#A87B08; transform:scale(1.08); }
.dvc-fav.est-favori{ color:#A87B08; }
.dvc-fav.est-favori svg{ fill:currentColor; }
@media (max-width:980px){ .dvc-tri{ margin-left:0; } .dvc-tri-select{ max-width:100%; } }
/* ==== CORRECTIFS TRI ET FAVORIS ==== */
/* Le bouton favori est un element flex du conteneur media :
sans !important sur position et dimensions, il s etire. */
.dvc-veh-grid .dvc-fav, .dvc-fav{
position:absolute !important; top:12px !important; right:12px !important;
left:auto !important; bottom:auto !important;
width:34px !important; height:34px !important;
min-width:0 !important; max-width:34px !important;
flex:0 0 auto !important; margin:0 !important; padding:0 !important;
align-self:flex-start !important; max-height:34px !important; min-height:34px !important;
border-radius:50% !important; z-index:4 !important;
}
/* Texte reserve aux lecteurs d ecran */
.sr-only{
position:absolute !important; width:1px !important; height:1px !important;
padding:0 !important; margin:-1px !important; overflow:hidden !important;
clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
/* ============================================================
DRIVIUM CAR - CATALOGUE ET FICHE VEHICULE
Feuille consolidee. Remplace les blocs V2 a V11b, qui
avaient ete empiles au fil des corrections.
SOMMAIRE
1. Variables de couleur
2. Archive - hero
3. Archive - pied de carte
4. Archive - boutons de filtres
5. Archive - listes deroulantes
6. Archive - pagination
7. Archive - filtres en accordeon (mobile)
8. Fiche - mise en page
9. Fiche - galerie
10. Fiche - caracteristiques et equipements
11. Fiche - bloc prix
12. Responsive
============================================================ */
/* --- 1. VARIABLES ------------------------------------------
Les dores sont declines par usage, car le contraste impose
des valeurs differentes selon le fond et la taille du texte.
Modifier ici se repercute partout. */
:root{
--dvcf-navy:#0E1C2A;
--dvcf-or:#C9960C; /* decoratif : icones, filets */
--dvcf-or-clair:#DFA62C; /* texte sur fond sombre */
--dvcf-or-titre:#BE8C0B; /* gros gras sur blanc 3,02:1 */
--dvcf-or-prix:#B5850A; /* prix du catalogue 3,32:1 */
--dvcf-or-fond:#96700A; /* fond + texte blanc 4,55:1 */
--dvcf-or-fond-actif:#7A5C07;
--dvcf-gris:#5D6E7D;
--dvcf-gris-2:#65727F;
--dvcf-filet:#E4E9ED;
--dvcf-vert:#177A53;
--dvcf-hero-texte:#C2CEDA;
}
/* --- 2. ARCHIVE : HERO --------------------------------------
Les classes CSS ne s appliquant pas au conteneur racine d un
gabarit, on cible l identifiant Elementor. */
.post-type-archive-vehicule .elementor-element-a299f20 h1,
.post-type-archive-vehicule .elementor-element-a299f20 .elementor-heading-title{
color:#FFFFFF !important;
line-height:1.16 !important;
}
.post-type-archive-vehicule .elementor-element-a299f20 .dvc-gold{
color:var(--dvcf-or-clair) !important;
display:block !important;
}
.post-type-archive-vehicule .elementor-element-a299f20 .dvc-hero-lead,
.post-type-archive-vehicule .elementor-element-a299f20 .dvc-hero-lead p{
color:var(--dvcf-hero-texte) !important;
font-size:16.5px !important;
line-height:1.65 !important;
max-width:560px !important;
margin:0 !important;
}
/* --- 3. ARCHIVE : PIED DE CARTE -----------------------------
Prix a gauche, bouton a droite, sur une seule ligne. */
.dvc-veh-grid .elementor-element-73182ea{
justify-content:space-between !important;
align-items:center !important;
flex-wrap:nowrap !important;
gap:8px !important;
}
.dvc-veh-grid .elementor-element-eea4014{
flex:0 0 auto !important;
width:auto !important;
margin-left:auto !important;
}
.dvc-veh-grid .elementor-element-eea4014 .elementor-button{
padding:8px 13px !important;
font-size:10.5px !important;
letter-spacing:.3px !important;
line-height:1.2 !important;
border-radius:7px !important;
white-space:nowrap !important;
}
.dvc-veh-grid .elementor-element-a917f1f,
.dvc-veh-grid .elementor-element-a917f1f *{
color:var(--dvcf-or-prix) !important;
}
.dvc-veh-grid .elementor-element-a917f1f .dvc-prix-demande{
color:var(--dvcf-gris) !important;
}
/* --- 4. ARCHIVE : BOUTONS DE FILTRES ------------------------
La colonne fait 250px, soit 208px utiles. flex:1 1 0 avec
min-width:0 est indispensable : sans lui, un element flex
refuse de devenir plus etroit que son contenu. */
.dvc-actions{
display:flex !important;
flex-wrap:nowrap !important;
align-items:stretch !important;
gap:8px !important;
width:100% !important;
box-sizing:border-box !important;
}
.dvc-actions .dvc-btn-rechercher,
.dvc-actions .dvc-btn-reinit{
flex:1 1 0 !important;
min-width:0 !important;
width:auto !important;
padding:11px 6px !important;
font-size:10.5px !important;
letter-spacing:.2px !important;
white-space:nowrap !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
box-sizing:border-box !important;
}
.dvc-actions .dvc-btn-rechercher,
.dvc-actions .dvc-btn-rechercher *{
background:var(--dvcf-or-fond) !important;
color:#FFFFFF !important;
}
.dvc-actions .dvc-btn-rechercher{ border-color:var(--dvcf-or-fond) !important; }
.dvc-actions .dvc-btn-rechercher:hover{
background:var(--dvcf-or-fond-actif) !important;
border-color:var(--dvcf-or-fond-actif) !important;
}
/* L icone loupe est retiree : la place manque dans 100px */
.dvc-actions .dvc-btn-rechercher svg,
.dvc-actions .dvc-btn-rechercher::before{ display:none !important; }
.dvc-actions .dvc-btn-reinit,
.dvc-actions .dvc-btn-reinit *{ color:var(--dvcf-navy) !important; }
.dvc-actions .dvc-btn-reinit{ border-color:var(--dvcf-navy) !important; }
.dvc-actions .dvc-btn-reinit:hover{ background:var(--dvcf-navy) !important; }
.dvc-actions .dvc-btn-reinit:hover,
.dvc-actions .dvc-btn-reinit:hover *{ color:#FFFFFF !important; }
/* --- 5. ARCHIVE : LISTES DEROULANTES ------------------------
L extension imposait height:40px pour 48px de contenu :
le texte etait rogne en bas. */
.post-type-archive-vehicule .wpc-filters-widget-select{
height:auto !important;
min-height:42px !important;
padding:10px 36px 10px 14px !important;
line-height:20px !important;
box-sizing:border-box !important;
}
/* Lien d edition reserve aux administrateurs */
.wpc-edit-filter-set{ display:none !important; }
/* --- 6. ARCHIVE : PAGINATION --------------------------------
Cibler .page-numbers et non a : la page active et les
fleches inactives sont des span, pas des liens. */
.post-type-archive-vehicule .elementor-pagination{
display:flex !important;
flex-wrap:wrap;
gap:8px !important;
justify-content:center !important;
margin-top:44px !important;
}
.post-type-archive-vehicule .elementor-pagination .page-numbers{
min-width:42px; height:42px; padding:0 12px;
border-radius:7px;
border:1px solid var(--dvcf-filet);
background:#fff;
display:inline-flex; align-items:center; justify-content:center;
font-size:14.5px; font-weight:600;
color:var(--dvcf-navy);
text-decoration:none;
transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.post-type-archive-vehicule .elementor-pagination a.page-numbers:hover{
border-color:var(--dvcf-or);
color:var(--dvcf-or-fond);
}
.post-type-archive-vehicule .elementor-pagination a.page-numbers:focus-visible{
outline:2px solid var(--dvcf-or-fond); outline-offset:2px;
}
.post-type-archive-vehicule .elementor-pagination .page-numbers.current{
background:var(--dvcf-navy) !important;
border-color:var(--dvcf-navy) !important;
color:#FFFFFF !important;
}
.post-type-archive-vehicule .elementor-pagination span.prev,
.post-type-archive-vehicule .elementor-pagination span.next{
opacity:.4; cursor:default;
}
/* --- 7. ARCHIVE : FILTRES EN ACCORDEON (mobile) -------------
Deplie, le panneau mesurait 890px au-dessus des cartes.
Le titre devient une bascule ; le corps est replie.
Le JS qui pose .dvc-filtres-repliable est dans functions.php. */
.dvc-filtres-badge{
display:inline-flex; align-items:center; justify-content:center;
min-width:20px; height:20px; padding:0 6px;
border-radius:10px;
font-size:11px; font-weight:700; letter-spacing:0;
}
@media (max-width:980px){
/* La colonne etait epinglee par flex:0 0 250px.
width:100% ne peut rien contre une base flex : il faut
agir sur flex lui-meme. */
.post-type-archive-vehicule .elementor-element-471ca03{
flex:1 1 100% !important;
width:100% !important; max-width:100% !important;
position:static !important; top:auto !important;
background:transparent !important; border:none !important;
border-radius:0 !important; box-shadow:none !important;
padding:0 !important; margin:0 0 22px !important;
gap:0 !important;
}
.post-type-archive-vehicule .elementor-element-c3fb442{
flex:1 1 100% !important; width:100% !important;
}
/* Le conteneur parent est en flex-direction:row / nowrap :
flex:1 1 100% ne peut donc pas faire passer les colonnes
l une sous l autre, elles se partagent la ligne. Sur
tablette, les cartes tombaient alors a 183px de large.
Il faut passer le parent en colonne. */
.post-type-archive-vehicule .elementor-element-706223b > .e-con-inner{
flex-direction:column !important;
flex-wrap:wrap !important;
}
.post-type-archive-vehicule .dvc-filtres-repliable .dvc-filtres-bascule{
display:flex !important; align-items:center; gap:10px;
width:100%; margin:0 !important;
padding:17px 18px !important;
background:#fff; border:1px solid var(--dvcf-filet);
border-radius:10px; cursor:pointer;
-webkit-user-select:none; user-select:none;
font-size:13px !important; line-height:1.2 !important;
transition:border-radius .18s ease;
}
.dvc-filtres-repliable .dvc-filtres-bascule:focus-visible{
outline:2px solid var(--dvcf-or-fond); outline-offset:2px;
}
.dvc-filtres-repliable .dvc-filtres-bascule::after{
content:""; margin-left:auto; flex:0 0 auto;
width:9px; height:9px;
border-right:2px solid var(--dvcf-navy);
border-bottom:2px solid var(--dvcf-navy);
transform:rotate(45deg) translate(-2px,-2px);
transition:transform .2s ease;
}
.dvc-filtres-repliable.dvc-ouvert .dvc-filtres-bascule::after{
transform:rotate(-135deg) translate(-2px,-2px);
}
.dvc-filtres-repliable.dvc-ouvert .dvc-filtres-bascule{
border-radius:10px 10px 0 0;
}
.dvc-filtres-repliable .dvc-filtres-bascule .dvc-filtres-badge{
background:var(--dvcf-or-fond) !important;
color:#FFFFFF !important;
-webkit-text-fill-color:#FFFFFF !important;
border-radius:10px !important;
}
.dvc-filtres-corps{
display:none; background:#fff;
border:1px solid var(--dvcf-filet); border-top:none;
border-radius:0 0 10px 10px;
padding:6px 18px 20px;
}
.dvc-filtres-repliable.dvc-ouvert .dvc-filtres-corps{ display:block; }
/* Cibles tactiles : 46px, au-dessus du seuil de 44px */
.dvc-filtres-corps .wpc-filters-widget-select{
min-height:46px !important; font-size:15px !important;
}
.dvc-filtres-corps .dvc-actions .dvc-btn-rechercher,
.dvc-filtres-corps .dvc-actions .dvc-btn-reinit{
padding:14px 10px !important; font-size:12px !important;
}
}
/* Au-dessus de 980px : colonne laterale, bascule inerte */
@media (min-width:981px){
.dvc-filtres-bascule{ pointer-events:none; cursor:default; }
.dvc-filtres-corps{ display:block !important; }
.dvc-filtres-badge{ display:none !important; }
}
@media (max-width:640px){
.post-type-archive-vehicule .elementor-pagination{
gap:6px !important; margin-top:32px !important;
}
.post-type-archive-vehicule .elementor-pagination .page-numbers{
min-width:38px; height:38px; padding:0 9px; font-size:13.5px;
}
}
/* --- 8. FICHE : MISE EN PAGE --------------------------------
Grille CSS plutot que le mode Ligne d Elementor, qui repartit
mal deux colonnes de poids tres differents. */
.single-vehicule .elementor-element-bfe6264{
display:grid !important;
grid-template-columns:1.55fr 1fr !important;
gap:40px !important;
align-items:start !important;
}
.single-vehicule .dvc-fiche-titre h1{
font-size:32px; font-weight:800; color:var(--dvcf-navy);
line-height:1.18; margin-bottom:6px;
}
.single-vehicule .dvc-fiche-sub{
color:var(--dvcf-gris); font-size:16px; margin:0 0 20px;
}
.single-vehicule .dvc-fiche-h2 h2{
font-size:24px; font-weight:700; color:var(--dvcf-navy);
margin:44px 0 20px;
}
.single-vehicule .dvc-fiche-desc p{
color:var(--dvcf-gris); line-height:1.85; font-size:15.5px;
}
/* La galerie vit dans le contenu : elle alimente le bloc du haut
mais serait rendue une seconde fois ici. */
.single-vehicule .dvc-fiche-desc .wp-block-gallery,
.single-vehicule .dvc-fiche-desc .blocks-gallery-grid,
.single-vehicule .dvc-fiche-desc .gallery{ display:none !important; }
/* --- 9. FICHE : GALERIE -------------------------------------*/
.dvc-galerie-principale{
border-radius:10px; overflow:hidden;
aspect-ratio:16/10; background:#EDF0F3;
}
.dvc-galerie-principale img{
width:100%; height:100%; object-fit:cover; display:block;
}
.dvc-galerie-vignettes{
display:grid; grid-template-columns:repeat(5,1fr);
gap:10px; margin-top:10px;
}
.dvc-vignette{
border-radius:7px; overflow:hidden; aspect-ratio:4/3;
border:2px solid transparent; cursor:pointer;
padding:0; background:none; line-height:0;
transition:border-color .2s ease;
}
.dvc-vignette img{ width:100%; height:100%; object-fit:cover; }
.dvc-vignette.dvc-actif{ border-color:var(--dvcf-or); }
.dvc-vignette:focus-visible{
outline:2px solid var(--dvcf-or-fond); outline-offset:2px;
}
/* --- 10. FICHE : CARACTERISTIQUES ET EQUIPEMENTS ------------*/
.dvc-spec-grid{
/* minmax(0,1fr) et non 1fr : sinon le contenu le plus long
impose sa largeur et les colonnes deviennent inegales. */
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
border:1px solid var(--dvcf-filet); border-radius:10px;
overflow:hidden; margin:0;
}
.dvc-spec{
display:flex; gap:12px; align-items:center;
padding:18px 20px;
border-right:1px solid var(--dvcf-filet);
border-bottom:1px solid var(--dvcf-filet);
}
.dvc-spec .dvc-ic{ color:var(--dvcf-or); width:22px; height:22px; flex:none; }
.dvc-spec dt{
font-size:11.5px; color:var(--dvcf-gris-2);
text-transform:uppercase; letter-spacing:.04em;
margin-bottom:3px; white-space:nowrap;
}
.dvc-spec dd{ margin:0; font-size:15px; font-weight:700; color:var(--dvcf-navy); }
.dvc-equip{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px 24px; list-style:none; margin:0; padding:0;
}
.dvc-equip li{
display:flex; gap:10px; align-items:center;
font-size:14.5px; color:var(--dvcf-gris);
}
.dvc-equip .dvc-ic{ color:var(--dvcf-vert); width:17px; height:17px; flex:none; }
/* --- 11. FICHE : BLOC PRIX ----------------------------------*/
.single-vehicule .elementor-element-912b5ae{
background:#fff !important;
border:1px solid var(--dvcf-filet) !important;
border-radius:10px !important;
padding:26px 24px !important;
box-shadow:0 2px 14px rgba(14,28,42,.06) !important;
position:sticky !important; top:110px !important;
}
.dvc-fiche-prix{
font-size:36px; font-weight:900; color:var(--dvcf-or-titre);
line-height:1; margin:0;
}
.dvc-fiche-prix-demande{ font-size:24px; color:var(--dvcf-gris); }
.dvc-fiche-tva{
font-size:12.5px; color:var(--dvcf-gris-2);
padding-bottom:20px; border-bottom:1px solid var(--dvcf-filet);
margin:10px 0 20px;
}
.single-vehicule .dvc-fiche-btn{ width:100%; margin-bottom:10px; }
.single-vehicule .dvc-fiche-btn .elementor-button{
width:100%; justify-content:center;
padding:13px 18px; border-radius:8px;
font-size:13.5px; font-weight:700; letter-spacing:.03em;
border:1px solid transparent;
}
.single-vehicule .dvc-btn-or .elementor-button{
background:var(--dvcf-or-fond) !important; color:#FFFFFF !important;
}
.single-vehicule .dvc-btn-or .elementor-button:hover{
background:var(--dvcf-or-fond-actif) !important; color:#FFFFFF !important;
}
.single-vehicule .dvc-btn-navy .elementor-button{
background:var(--dvcf-navy); color:#fff;
}
.single-vehicule .dvc-btn-wa .elementor-button{
background:var(--dvcf-vert); color:#fff;
}
.dvc-fiche-trust{
list-style:none; margin:22px 0 0; padding:20px 0 0;
border-top:1px solid var(--dvcf-filet);
}
.dvc-fiche-trust li{
display:flex; gap:10px; align-items:center;
font-size:13.5px; color:var(--dvcf-gris); margin-bottom:11px;
}
.dvc-fiche-trust .dvc-ic{ color:var(--dvcf-vert); width:18px; height:18px; flex:none; }
/* --- 12. FICHE : RESPONSIVE ---------------------------------*/
/* Tablette paysage : la colonne gauche tombe a ~560px,
trois colonnes de caracteristiques y seraient trop serrees. */
@media (max-width:1100px){
.dvc-spec-grid, .dvc-equip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:980px){
/* Une seule colonne. display:contents efface les deux colonnes :
leurs enfants remontent au niveau de la grille, ce qui permet
de placer le bloc prix juste apres la galerie. order seul ne
le permettrait pas, il n agit qu entre freres. */
.single-vehicule .elementor-element-bfe6264{
grid-template-columns:1fr !important;
row-gap:24px !important;
}
.single-vehicule .elementor-element-800d4ef,
.single-vehicule .elementor-element-9d1939d{ display:contents !important; }
.single-vehicule .elementor-element-977709d{ order:1; } /* titre */
.single-vehicule .elementor-element-21b90c9{ order:2; } /* sous-titre */
.single-vehicule .elementor-element-70d202e{ order:3; } /* galerie */
.single-vehicule .elementor-element-912b5ae{ order:4; } /* prix + CTA */
.single-vehicule .elementor-element-1b19233{ order:5; } /* h2 caract. */
.single-vehicule .elementor-element-fa2fbaf{ order:6; }
.single-vehicule .elementor-element-b8c409b{ order:7; } /* h2 descr. */
.single-vehicule .elementor-element-5b19105{ order:8; }
.single-vehicule .elementor-element-532e447{ order:9; } /* h2 equip. */
.single-vehicule .elementor-element-c356525{ order:10; }
.single-vehicule .elementor-element-912b5ae{ position:static !important; }
.single-vehicule .elementor-element-21b90c9{ margin-top:-18px !important; }
.single-vehicule .dvc-fiche-h2 h2{ margin:10px 0 14px !important; }
.single-vehicule .dvc-fiche-titre h1{ font-size:26px; }
/* ---- REGLES SOLIDAIRES : NE JAMAIS MODIFIER L UNE SEULE ----
La barre d action fixe apparait, les boutons Appeler et
WhatsApp du bloc prix disparaissent. Les deux sont ici, dans
le meme bloc media, precisement pour qu on ne puisse pas
changer le seuil de l un en oubliant l autre : le jour ou
ils divergent, le visiteur n a plus aucun moyen d appeler. */
.dvc-mobile-bar{ display:block !important; }
.single-vehicule .dvc-btn-or,
.single-vehicule .dvc-btn-wa{ display:none !important; }
.dvc-spec-grid, .dvc-equip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
.dvc-galerie-vignettes{ grid-template-columns:repeat(4,1fr); }
.dvc-fiche-prix{ font-size:30px; }
.single-vehicule .dvc-fiche-titre h1{ font-size:23px; }
.single-vehicule .elementor-element-912b5ae{ margin-bottom:16px !important; }
}
/* Telephones : on garde 2 colonnes en resserrant les cellules.
1RE IMMATRICULATION ne tient pas sur une ligne a cette largeur,
on autorise donc le retour a la ligne ici seulement. */
@media (max-width:520px){
.dvc-spec{ padding:14px 12px !important; gap:9px !important; }
.dvc-spec .dvc-ic{ width:18px !important; height:18px !important; }
.dvc-spec dt{
white-space:normal !important;
font-size:10.5px !important;
letter-spacing:.02em !important;
margin-bottom:2px !important;
}
.dvc-spec dd{ font-size:14px !important; }
.dvc-equip{ gap:10px 14px !important; }
.dvc-equip li{ font-size:13.5px !important; }
}
/* ============================================================
PAGES INTERIEURES - briques communes
Utilisees par le squelette et les 4 pages qui en decoulent.
A. Sections et rythme vertical
B. Titres de section
C. Bandes d appel a l action
============================================================ */
/* --- A. SECTIONS -------------------------------------------*/
.dvc-section{ padding:78px 0; }
.dvc-section-soft{ background:#F5F7F9; }
.dvc-section-navy{ background:var(--dvcf-navy); color:#fff; }
/* --- B. TITRES DE SECTION ----------------------------------*/
.dvc-sec-head{ text-align:center; max-width:780px; margin:0 auto 54px; }
.dvc-sec-head h2{
font-size:34px; font-weight:700; color:var(--dvcf-navy); line-height:1.15;
}
.dvc-sec-head p{
margin-top:18px; color:var(--dvcf-gris); font-size:16px; line-height:1.7;
}
/* Filet dore sous le titre */
.dvc-sec-head .dvc-filet{
width:56px; height:3px; background:var(--dvcf-or);
margin:18px auto 0; border-radius:2px;
}
.dvc-section-navy .dvc-sec-head h2{ color:#fff; }
.dvc-section-navy .dvc-sec-head p{ color:#B9C6D2; }
/* --- C. BANDES D APPEL A L ACTION --------------------------*/
.dvc-cta-navy{ background:var(--dvcf-navy); color:#fff; padding:58px 0; }
.dvc-cta-navy h2{ font-size:28px; font-weight:700; margin-bottom:10px; color:#fff; }
.dvc-cta-navy p{ color:#B3C2CF; max-width:620px; margin:0; }
.dvc-cta-soft{
background:#F5F7F9; border:1px solid var(--dvcf-filet);
border-radius:10px; padding:34px 40px;
}
.dvc-cta-soft h2{
font-size:23px; font-weight:700; color:var(--dvcf-navy); margin-bottom:8px;
}
.dvc-cta-soft p{ color:var(--dvcf-gris); font-size:15px; margin:0; }
@media (max-width:980px){
.dvc-section{ padding:56px 0; }
.dvc-sec-head{ margin-bottom:40px; }
.dvc-sec-head h2{ font-size:28px; }
.dvc-cta-navy{ padding:44px 0; }
.dvc-cta-soft{ padding:28px 24px; }
}
@media (max-width:640px){
.dvc-section{ padding:44px 0; }
.dvc-sec-head{ margin-bottom:32px; }
.dvc-sec-head h2{ font-size:25px; }
.dvc-cta-navy h2{ font-size:23px; }
}
/* ============================================================
PAGE ACCUEIL
A. Hero clair : texte a gauche, photo a droite
B. Cartes Pourquoi choisir
C. Bande de reassurance sombre
============================================================ */
/* --- A. HERO CLAIR -----------------------------------------*/
.dvc-hero-home{ position:relative; overflow:hidden; }
/* Le texte doit passer AU-DESSUS de la photo en absolu (z-index 1).
Ne pas ecrire ".dvc-hero-home > .e-con" tout court : ce sélecteur est
plus specifique que ".dvc-hero-home-media" et ecraserait le z-index 1
de la photo. D ou l exclusion explicite. */
.dvc-hero-home > .e-con:not(.dvc-hero-home-media){ position:relative; z-index:2; }
.dvc-hero-home-media{
position:absolute !important; top:0; right:0; bottom:0;
width:52% !important; z-index:1; padding:0 !important;
}
/* Fondu vers le texte, pour que la photo ne coupe pas net */
.dvc-hero-home-media::before{
content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
background:linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,.80) 14%, rgba(255,255,255,.20) 38%, rgba(255,255,255,0) 62%);
}
.dvc-hero-home h1{
font-size:clamp(30px, 3.1vw, 46px);
font-weight:800; text-transform:uppercase;
color:var(--dvcf-navy); line-height:1.14; margin:0;
}
.dvc-hero-home h1 .dvc-gold{ color:var(--dvcf-or); }
.dvc-hero-home-lead p{
color:var(--dvcf-gris); font-size:16px; line-height:1.8;
max-width:520px; margin:0;
}
.dvc-hero-home-btns{ margin-top:12px; }
.dvc-hero-home-btns .elementor-button{
padding:15px 26px; border-radius:6px;
font-size:13px; font-weight:700; letter-spacing:.06em;
border:1px solid transparent;
}
.dvc-hero-home-btns .dvc-btn-or .elementor-button{
background:var(--dvcf-or-fond); color:#fff;
}
.dvc-hero-home-btns .dvc-btn-or .elementor-button:hover{ background:var(--dvcf-or-fond-actif); }
.dvc-hero-home-btns .dvc-btn-or-ligne .elementor-button{
background:transparent; color:var(--dvcf-or-fond);
border-color:var(--dvcf-or);
}
.dvc-hero-home-btns .dvc-btn-or-ligne .elementor-button:hover{
background:var(--dvcf-or); color:var(--dvcf-navy);
}
/* --- B. CARTES POURQUOI CHOISIR ----------------------------*/
.dvc-atouts{ flex-wrap:wrap !important; align-items:stretch !important; }
.dvc-atout{
flex:1 1 0 !important; min-width:210px !important;
background:#fff; border:1px solid var(--dvcf-filet);
border-radius:10px; padding:30px 26px !important;
box-shadow:0 2px 12px rgba(14,28,42,.04);
transition:box-shadow .25s ease, transform .25s ease;
}
.dvc-atout:hover{
box-shadow:0 8px 26px rgba(14,28,42,.09);
transform:translateY(-3px);
}
.dvc-atout .dvc-ic-page{ width:44px; height:44px; color:var(--dvcf-navy); }
.dvc-atout h3{
font-size:15px; font-weight:800; text-transform:uppercase;
letter-spacing:.04em; color:var(--dvcf-navy); margin:16px 0 8px;
}
.dvc-atout p{
font-size:14px; line-height:1.65; color:var(--dvcf-gris); margin:0;
}
/* --- C. BANDE DE REASSURANCE -------------------------------*/
.dvc-bande-navy{ padding:34px 0 !important; }
.dvc-bande-grille{ flex-wrap:wrap !important; align-items:center !important; }
.dvc-stat{
flex:1 1 0 !important; min-width:200px !important;
flex-direction:row !important; align-items:center !important;
gap:14px !important; padding:0 !important;
}
.dvc-stat .dvc-ic-page{
width:34px; height:34px; color:#fff; flex:none;
}
.dvc-stat .elementor-widget-shortcode{ width:auto !important; flex:0 0 auto !important; }
.dvc-stat-txt{ padding:0 !important; gap:2px !important; }
.dvc-stat h3{
font-size:13.5px; font-weight:800; text-transform:uppercase;
letter-spacing:.04em; color:#fff; margin:0; line-height:1.25;
}
.dvc-stat p{ font-size:13px; color:#B3C2CF; margin:0; }
@media (max-width:980px){
.dvc-hero-home-media{ position:relative !important; width:100% !important; min-height:260px; }
.dvc-hero-home-media::before{ display:none; }
.dvc-atout{ flex:1 1 46% !important; }
.dvc-stat{ flex:1 1 46% !important; }
}
@media (max-width:640px){
.dvc-atout{ flex:1 1 100% !important; }
.dvc-stat{ flex:1 1 100% !important; }
.dvc-hero-home-btns{ flex-wrap:wrap !important; }
.dvc-hero-home-btns > .elementor-widget{ flex:1 1 100% !important; }
}
/* --- ACCUEIL CORRECTIFS : chevauchement texte / photo -------
La colonne de texte finissait a 808px et la photo commencait
a 753px : le titre passait sous l image. On reserve une
gouttiere entre les deux. */
.dvc-hero-home-media{ width:46% !important; }
.dvc-hero-home-copy{
width:56% !important;
padding-right:56px !important;
gap:22px !important;
}
.dvc-hero-home h1{ max-width:100%; }
/* CONFIANCE sur sa propre ligne, comme sur la maquette */
.dvc-hero-home h1 .dvc-gold{ display:block; }
/* Chevrons des boutons */
.dvc-hero-home-btns .elementor-button::after{
content:""; display:inline-block;
width:7px; height:7px; margin-left:12px;
border-right:2px solid currentColor;
border-top:2px solid currentColor;
transform:rotate(45deg) translateY(-1px);
}
.dvc-hero-home-btns .elementor-button{ display:inline-flex; align-items:center; }
@media (max-width:980px){
.dvc-hero-home-copy{ width:100% !important; padding-right:0 !important; }
.dvc-hero-home-media{ width:100% !important; }
}
/* --- ACCUEIL FINITIONS : boutons et rythme du hero ---------*/
.dvc-hero-home-btns .elementor-button{
white-space:nowrap;
padding:15px 22px;
justify-content:center;
}
.dvc-hero-home-btns > .elementor-widget{ width:auto !important; flex:0 0 auto !important; }
/* Resserrer le hero : le filet et le paragraphe flottaient */
.dvc-hero-home-copy{ gap:0 !important; }
.dvc-hero-home-copy > .elementor-widget-divider{ margin:18px 0 0 !important; }
.dvc-hero-home-copy > .elementor-widget-text-editor{ margin-top:22px !important; }
.dvc-hero-home-copy > .dvc-hero-home-btns{ margin-top:30px !important; }
.dvc-hero-home-copy .elementor-divider{ padding:0 !important; }
/* Fondu plus progressif sur le bord gauche de la photo */
.dvc-hero-home-media::before{
background:linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,.92) 8%, rgba(255,255,255,.55) 22%, rgba(255,255,255,.12) 44%, rgba(255,255,255,0) 66%) !important;
}
/* --- ACCUEIL AJUSTEMENTS V2 --------------------------------*/
/* Titre : 46px donnaient 4 lignes dans une colonne de 616px.
36px ramenent le titre a 2 lignes + CONFIANCE. */
.dvc-hero-home h1{
font-size:clamp(25px, 2.35vw, 36px) !important;
line-height:1.18 !important;
}
/* Boutons plus discrets */
.dvc-hero-home-btns .elementor-button{
padding:13px 20px !important;
font-size:12px !important;
letter-spacing:.05em !important;
}
.dvc-hero-home-btns .elementor-button::after{
width:6px; height:6px; margin-left:10px;
}
/* Filet dore des titres de section : le widget Separateur
s aligne a gauche par defaut, il faut centrer son contenu. */
.dvc-sec-head .elementor-widget-divider{ width:100% !important; }
.dvc-sec-head .elementor-divider{
display:flex !important;
justify-content:center !important;
}
/* --- ACCUEIL SECTIONS 4 A 7 --------------------------------*/
/* Bouton centre sous la grille de vehicules */
.dvc-sec-pied{ align-items:center !important; margin-top:38px !important; }
.dvc-sec-pied .dvc-btn-navy .elementor-button{
background:var(--dvcf-navy); color:#fff;
padding:15px 30px; border-radius:6px;
font-size:13px; font-weight:700; letter-spacing:.05em;
}
.dvc-sec-pied .dvc-btn-navy .elementor-button:hover{ background:#16293c; }
/* Cartes de services : icone ronde navy, texte centre */
.dvc-services{ flex-wrap:wrap !important; align-items:stretch !important; }
.dvc-service{
flex:1 1 0 !important; min-width:250px !important;
background:#fff; border:1px solid var(--dvcf-filet);
border-radius:10px; padding:38px 30px !important;
align-items:center !important; text-align:center;
gap:0 !important;
transition:box-shadow .25s ease, transform .25s ease;
}
.dvc-service:hover{
box-shadow:0 8px 26px rgba(14,28,42,.09); transform:translateY(-3px);
}
.dvc-service .elementor-widget-shortcode{
width:64px; height:64px; border-radius:50%;
background:var(--dvcf-navy); color:#fff;
display:flex; align-items:center; justify-content:center;
flex:0 0 auto;
}
.dvc-service .dvc-ic-page{ width:30px; height:30px; }
.dvc-service h3{
font-size:18px; font-weight:700; color:var(--dvcf-navy);
margin:20px 0 10px;
}
.dvc-service p{
font-size:14.5px; line-height:1.7; color:var(--dvcf-gris); margin:0;
}
.dvc-service .elementor-widget-button{ margin-top:20px; }
.dvc-service .elementor-button{
background:transparent; color:var(--dvcf-or-fond);
border:1px solid var(--dvcf-or);
padding:11px 20px; border-radius:6px;
font-size:12.5px; font-weight:700;
}
.dvc-service .elementor-button:hover{
background:var(--dvcf-or); color:var(--dvcf-navy);
}
/* Bande CTA sombre : texte a gauche, bouton a droite */
.dvc-cta-navy-grille{ flex-wrap:wrap !important; }
.dvc-cta-navy-grille > .e-con:first-child{ flex:1 1 420px !important; }
.dvc-cta-navy-btn{ flex:0 0 auto !important; width:auto !important; }
.dvc-cta-navy-btn .elementor-button{
background:var(--dvcf-or-fond); color:#fff;
padding:16px 30px; border-radius:6px;
font-size:13px; font-weight:700; letter-spacing:.05em;
}
.dvc-cta-navy-btn .elementor-button:hover{ background:var(--dvcf-or-fond-actif); }
/* Bloc de texte SEO : deux colonnes, role de referencement */
.dvc-seo-text{ padding:56px 0 !important; border-top:1px solid var(--dvcf-filet); }
.dvc-seo-text h2{
font-size:20px; font-weight:700; color:var(--dvcf-navy); margin-bottom:16px;
}
.dvc-seo-cols{ columns:2; column-gap:44px; }
.dvc-seo-cols h3{
font-size:16px; font-weight:700; color:var(--dvcf-navy); margin:26px 0 10px;
break-after:avoid;
}
.dvc-seo-cols p{
font-size:14.5px; line-height:1.8; color:var(--dvcf-gris); margin-bottom:14px;
}
.dvc-seo-cols a{
color:var(--dvcf-or-fond); font-weight:600;
text-decoration:underline; text-underline-offset:3px;
}
@media (max-width:980px){
.dvc-service{ flex:1 1 46% !important; }
.dvc-seo-cols{ columns:1; }
.dvc-cta-navy-btn{ width:100% !important; }
.dvc-cta-navy-btn .elementor-button{ width:100%; justify-content:center; }
}
@media (max-width:640px){
.dvc-service{ flex:1 1 100% !important; }
}
/* --- BOUTONS CONFORMES MAQUETTE ----------------------------
Reference : .btn de la maquette. Bordure 2px, majuscules,
interlettrage .06em. Le dore plein porte du texte NAVY
(6,45:1) et non du blanc (2,67:1, non conforme). */
/* Cartes de services : bouton contour dore, petite taille */
.dvc-service .elementor-button{
background:transparent !important;
color:#8A6708 !important;
border:2px solid var(--dvcf-or) !important;
padding:11px 18px !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.06em !important;
text-transform:uppercase !important;
border-radius:6px !important;
transition:all .25s ease !important;
}
.dvc-service .elementor-button:hover{
background:var(--dvcf-or) !important;
color:var(--dvcf-navy) !important;
transform:translateY(-2px);
}
/* Bande CTA finale : dore plein, grande taille, texte navy */
.dvc-cta-navy-btn .elementor-button{
background:var(--dvcf-or) !important;
color:var(--dvcf-navy) !important;
border:2px solid transparent !important;
padding:17px 34px !important;
font-size:14px !important;
font-weight:700 !important;
letter-spacing:.06em !important;
text-transform:uppercase !important;
border-radius:6px !important;
transition:all .25s ease !important;
}
.dvc-cta-navy-btn .elementor-button:hover{
background:#A87B08 !important;
color:var(--dvcf-navy) !important;
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(201,150,12,.32);
}
/* Bouton Voir tous nos vehicules : navy plein, grande taille */
.dvc-sec-pied .elementor-button{
padding:17px 34px !important;
font-size:14px !important;
letter-spacing:.06em !important;
text-transform:uppercase !important;
border:2px solid transparent !important;
transition:all .25s ease !important;
}
.dvc-sec-pied .elementor-button:hover{ transform:translateY(-2px); }
/* ============================================================
PAGE A PROPOS
A. Hero sombre
B. Notre histoire
C. Bande de chiffres
============================================================ */
/* --- A. HERO -----------------------------------------------*/
.dvc-hero-apropos{ position:relative; }
/* Degrade horizontal : opaque a gauche pour le texte, la photo
respire a droite. Elementor ne sait pas faire 4 paliers. */
.dvc-hero-apropos::before{
/* Seul le degrade vit ici. La PHOTO reste un reglage Elementor
(conteneur du hero > Style > Arriere-plan > Image), donc
remplacable depuis la mediatheque sans toucher au code. */
content:"";
position:absolute; inset:0;
background-image:linear-gradient(90deg,
#0E1C2A 0%, #0E1C2A 30%,
rgba(14,28,42,.80) 42%, rgba(14,28,42,.34) 60%,
rgba(14,28,42,.06) 100%) !important;
background-color:transparent !important;
background-size:auto !important;
opacity:1 !important;
}
.dvc-hero-apropos-copy{ position:relative; z-index:2; gap:0 !important; }
.dvc-hero-apropos h1{
font-size:clamp(26px, 2.9vw, 42px); font-weight:700;
color:#fff; line-height:1.18; margin:8px 0 0;
}
.dvc-hero-apropos .dvc-eyebrow{
color:var(--dvcf-or-clair); font-size:13px; font-weight:700;
letter-spacing:.14em; text-transform:uppercase; margin:0;
}
.dvc-hero-apropos .elementor-widget-divider{ margin:18px 0 0 !important; }
.dvc-hero-apropos .dvc-hero-lead{ margin-top:22px !important; }
.dvc-hero-apropos .dvc-hero-lead p{
color:var(--dvcf-hero-texte); font-size:16px; line-height:1.8;
max-width:660px; margin:0;
}
/* --- B. NOTRE HISTOIRE -------------------------------------*/
.dvc-histoire{ align-items:flex-start !important; }
.dvc-histoire-media{ flex:1 1 44% !important; }
.dvc-histoire-media img{
width:100%; border-radius:10px; display:block;
box-shadow:0 6px 24px rgba(14,28,42,.10);
}
.dvc-histoire-txt{ flex:1 1 52% !important; gap:0 !important; }
.dvc-histoire-txt p{
color:var(--dvcf-gris); font-size:15.5px; line-height:1.8; margin:0 0 14px;
}
/* Trois valeurs, separees par un filet vertical */
.dvc-valeurs{ margin-top:34px !important; flex-wrap:wrap !important; }
.dvc-valeur{
flex:1 1 0 !important; min-width:180px !important;
flex-direction:row !important; align-items:flex-start !important;
gap:14px !important;
padding:0 22px !important;
border-left:1px solid var(--dvcf-filet);
}
.dvc-valeur:first-child{ border-left:none; padding-left:0 !important; }
.dvc-valeur .elementor-widget-shortcode{
width:46px; height:46px; border-radius:50%; flex:0 0 auto;
background:var(--dvcf-navy); color:#fff;
display:flex; align-items:center; justify-content:center;
}
.dvc-valeur .dvc-ic-page{ width:22px; height:22px; }
.dvc-valeur-txt{ padding:0 !important; gap:0 !important; }
.dvc-valeur h3{
font-size:14.5px; font-weight:700; color:var(--dvcf-navy);
margin:0 0 6px; line-height:1.3;
}
.dvc-valeur p{ font-size:12.5px; color:var(--dvcf-gris); line-height:1.55; margin:0; }
/* --- C. BANDE DE CHIFFRES ----------------------------------*/
.dvc-bande-chiffres{ padding:44px 0 !important; }
.dvc-chiffres-grille{ flex-wrap:wrap !important; align-items:center !important; }
.dvc-chiffre{
flex:1 1 0 !important; min-width:210px !important;
flex-direction:row !important; align-items:center !important;
gap:16px !important; padding:0 !important;
}
.dvc-chiffre .elementor-widget-shortcode{ width:auto !important; flex:0 0 auto !important; }
.dvc-chiffre .dvc-ic-page{
width:44px; height:44px; color:var(--dvcf-or); flex:none;
}
.dvc-chiffre-txt{ padding:0 !important; gap:0 !important; }
.dvc-chiffre-num{
font-size:23px; font-weight:800; color:var(--dvcf-or);
margin:0; line-height:1.1;
}
.dvc-chiffre h3{
font-size:13.5px; font-weight:700; text-transform:uppercase;
letter-spacing:.04em; color:#fff; margin:4px 0 2px; line-height:1.25;
}
.dvc-chiffre p{ font-size:12.5px; color:#B3C2CF; margin:0; }
@media (max-width:980px){
.dvc-histoire{ flex-direction:column !important; }
.dvc-histoire-media, .dvc-histoire-txt{ flex:1 1 100% !important; width:100% !important; }
.dvc-valeur{ flex:1 1 100% !important; border-left:none !important; padding:0 !important; }
.dvc-chiffre{ flex:1 1 46% !important; }
.dvc-hero-apropos::before{
background-image:linear-gradient(180deg, rgba(14,28,42,.94) 0%, rgba(14,28,42,.80) 100%) !important;
}
}
@media (max-width:640px){
.dvc-chiffre{ flex:1 1 100% !important; }
}
/* --- A PROPOS VALEURS V2 -----------------------------------
Les 3 valeurs etaient dans la colonne de droite : 200px par
bloc, les titres se coupaient en plein mot. Elles occupent
desormais toute la largeur, soit 400px chacune. */
.dvc-valeurs{
margin-top:46px !important;
padding-top:34px !important;
border-top:1px solid var(--dvcf-filet);
}
.dvc-valeur h3{ font-size:15px; }
.dvc-valeur p{ font-size:13px; }
/* --- A PROPOS ENSEIGNE : cadrage du logo -------------------*/
.dvc-hero-apropos{
/* La photo occupe tout le fond ; le logo est superpose
par ::after, donc AU-DESSUS du degrade porte par ::before.
Le PNG etant un carre de 2000px dont la signature n occupe
que 16% de la hauteur, il faut l etirer a 225%. */
background-size:cover !important;
background-position:center center !important;
min-height:400px;
}
@media (max-width:980px){
.dvc-hero-apropos{
background-size:auto 45% !important;
background-position:center 88% !important;
min-height:auto;
}
}
/* --- A PROPOS LOGO SUPERPOSE -------------------------------
::before porte le degrade, ::after porte le logo : le logo
reste donc net au-dessus du voile navy, comme une enseigne
posee sur la facade. */
/* Le logo superpose a ete retire : pose sur une photo de
vehicule, il ressemblait a un filigrane et non a une
enseigne. Reproduire la reference suppose une vraie photo
des locaux avec l enseigne, a fournir par le client. */
.dvc-hero-apropos::after{ content:none; }
@media (max-width:980px){
.dvc-hero-apropos::after{
background-size:auto 130%;
background-position:center 86%;
opacity:.55;
}
}
/* --- A PROPOS FOND NAVY PLEIN ------------------------------
Le conteneur ne porte plus la photo : elle est sur ::before,
limitee a la moitie droite. Le fond reste navy uni. */
.dvc-hero-apropos{
/* La photo est posee dans Elementor, on ne l ecrase pas ici */
background-color:#0E1C2A;
background-size:cover;
background-position:center right;
}
/* Le logo se cale dans la partie photo */
.dvc-hero-apropos::after{
/* Logo discret en haut a droite, sur la zone sombre de la
photo : une enseigne, pas un filigrane sur la carrosserie. */
background-size:auto 78% !important;
background-position:94% 22% !important;
opacity:.92;
z-index:1;
}
@media (max-width:980px){
.dvc-hero-apropos::before{ width:100% !important; opacity:.55 !important; }
.dvc-hero-apropos::after{ background-size:auto 110% !important; background-position:center 88% !important; }
}
/* --- A PROPOS SUR-TITRE SANS ICONE -------------------------
Une icone de voiture devant A PROPOS n a pas de sens ;
elle reste pertinente sur NOS VEHICULES . */
.dvc-hero-apropos .dvc-eyebrow .elementor-heading-title::before{
content:none !important;
}
/* --- CTA ALIGNEMENT ----------------------------------------
Le space-between regle dans Elementor n etait pas applique :
le bouton flottait au milieu au lieu d etre cale a droite. */
/* Sur un conteneur boxed , Elementor applique la mise en page
flex a l enfant interne .e-con-inner, pas au conteneur lui-meme :
viser le conteneur revient a aligner dans la pleine largeur. */
.dvc-cta-navy-grille > .e-con-inner{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:space-between !important;
gap:34px !important;
flex-wrap:wrap !important;
}
.dvc-cta-navy-grille > .e-con-inner > .e-con:first-child{ flex:1 1 420px; }
.dvc-cta-navy-btn{ flex:0 0 auto !important; width:auto !important; }
@media (max-width:980px){
.dvc-cta-navy-grille > .e-con-inner{ gap:20px !important; }
.dvc-cta-navy-btn{ width:100% !important; }
.dvc-cta-navy-btn .elementor-button{ width:100%; justify-content:center; }
}
/* --- CARTE CTA CLAIRE (.cta-soft de la maquette) -----------
Bloc encadre sur fond clair, et non bande navy pleine
largeur. Utilise en fin de page interieure. */
.dvc-section-cta{ padding-top:0 !important; }
.dvc-cta-soft > .e-con-inner{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:space-between !important;
gap:30px !important;
flex-wrap:wrap !important;
background:#F5F7F9;
border:1px solid var(--dvcf-filet);
border-radius:10px;
padding:34px 40px !important;
}
.dvc-cta-soft h2{
font-size:23px !important; font-weight:700 !important;
color:var(--dvcf-navy) !important; margin:0 0 8px !important;
}
.dvc-cta-soft p{
color:var(--dvcf-gris) !important; font-size:15px !important; margin:0 !important;
}
.dvc-cta-soft-btn{ flex:0 0 auto !important; width:auto !important; }
/* Bouton dore grand format, conforme a .btn-gold .btn-lg */
.dvc-cta-soft .elementor-button{
background:var(--dvcf-or) !important;
color:var(--dvcf-navy) !important;
border:2px solid transparent !important;
padding:17px 34px !important;
font-size:14px !important; font-weight:700 !important;
letter-spacing:.06em !important; text-transform:uppercase !important;
border-radius:6px !important;
display:inline-flex !important; align-items:center; gap:10px;
transition:all .25s ease !important;
}
.dvc-cta-soft .elementor-button:hover{
background:#A87B08 !important;
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(201,150,12,.32);
}
/* Fleche du bouton, tracee comme dans la maquette */
.dvc-btn-fleche .elementor-button::after{
content:"";
width:17px; height:17px; flex:none;
background-repeat:no-repeat; background-position:center;
background-size:17px 17px;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230E1C2A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14M13 6l6 6-6 6%22/%3E%3C/svg%3E");
}
@media (max-width:640px){
.dvc-cta-soft > .e-con-inner{ padding:26px 22px !important; }
.dvc-cta-soft-btn{ width:100% !important; }
.dvc-cta-soft .elementor-button{ width:100%; justify-content:center; }
}
/* --- CTA CLAIRE CORRECTIFS ---------------------------------
1. Le conteneur externe fait 1905px : il ne doit porter ni
fond ni bordure, sinon la carte deborde en bandeau.
2. Le bloc de texte sans contrainte prenait 1118px et
renvoyait le bouton a la ligne. */
.dvc-cta-soft{
background:transparent !important;
border:none !important;
padding:0 !important;
}
.dvc-cta-soft > .e-con-inner > .e-con:first-child{
flex:1 1 auto !important;
min-width:0 !important;
width:auto !important;
padding:0 !important;
gap:0 !important;
}
/* ================================================================
[2026-08-13] CORRECTIFS TABLETTE + SMARTPHONE - Accueil / A propos
================================================================ */
/* A. Debordement horizontal entre 981 et 701 px.
Le flex-wrap etait pose sur le conteneur Elementor et non sur le vrai
parent flex (> .e-con-inner), ou Elementor impose flex-wrap:var(--flex-wrap).
Les cartes a min-width fixe ne pouvaient donc pas passer a la ligne. */
.dvc-bande-grille > .e-con-inner,
.dvc-chiffres-grille > .e-con-inner,
.dvc-services > .e-con-inner,
.dvc-atouts > .e-con-inner,
.dvc-valeurs > .e-con-inner{
flex-wrap: wrap !important;
}
/* B. Carte orpheline : les 3 cartes services / engagements s'affichaient
en 2 + 1 pleine largeur entre 980 et 641 px. */
@media (max-width: 980px){
.dvc-service{
flex: 1 1 100% !important;
flex-basis: 100% !important;
}
}
/* C. Cibles tactiles (WCAG 2.5.8) - etendu a la tablette paysage (1200 px) */
@media (max-width: 1200px){
.dvc-btn-or .elementor-button,
.dvc-btn-or-ligne .elementor-button,
.dvc-btn-navy .elementor-button,
.dvc-btn-sm .elementor-button,
.dvc-cta-soft-btn .elementor-button{
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.dvc-socials a{
min-width: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.site-footer .widget_nav_menu .menu-link{
display: inline-block !important;
padding-top: 11px !important;
padding-bottom: 11px !important;
}
.dvc-footer-contact .dvc-ico-phone,
.dvc-footer-contact .dvc-ico-mail{
display: inline-flex !important;
align-items: center !important;
min-height: 44px !important;
}
}
/* ---- A bis. Conteneurs e-con-full : le wrap se pose sur l'element lui-meme
(pas de .e-con-inner sur les conteneurs "full"). ---- */
.dvc-services,
.dvc-atouts,
.dvc-valeurs{
flex-wrap: wrap !important;
}
/* ---- D. Hero Accueil : priorite conversion sous 980 px.
Titre + promesse + CTA passent avant la photo. ---- */
@media (max-width: 980px){
.dvc-hero-home .dvc-hero-home-media{
order: 2 !important;
margin: 28px 10px 0 !important;
border-radius: 10px !important;
overflow: hidden !important;
}
}
/* ---- E. Carte CTA douce (A propos) : 1 colonne sous 980 px ---- */
@media (max-width: 980px){
.dvc-cta-soft > .e-con-inner{
flex-wrap: wrap !important;
}
.dvc-cta-soft > .e-con-inner > *{
flex: 1 1 100% !important;
}
}
/* ---- F. Menu principal Astra : cibles tactiles 44 px ---- */
@media (max-width: 1200px){
.ast-mobile-popup-content .menu-link,
.main-header-menu .menu-link{
min-height: 44px !important;
display: flex !important;
align-items: center !important;
}
}
/* ---- G. Hierarchie et lisibilite mobile ---- */
@media (max-width: 980px){
.dvc-hero-home h1.elementor-heading-title{
font-size: 30px !important;
line-height: 1.18 !important;
}
.dvc-sec-head .elementor-heading-title{
font-size: 28px !important;
line-height: 1.2 !important;
}
.dvc-section p{
font-size: 15px !important;
line-height: 1.68 !important;
}
.dvc-hero-home h1.elementor-heading-title,
.dvc-hero-apropos .elementor-heading-title,
.dvc-sec-head .elementor-heading-title{
text-wrap: balance;
}
}
@media (max-width: 430px){
.dvc-hero-home h1.elementor-heading-title{ font-size: 27px !important; }
.dvc-sec-head .elementor-heading-title{ font-size: 25px !important; }
}
/* ---- H. CTA du hero pleine largeur sous 520 px (confort au pouce) ---- */
@media (max-width: 520px){
.dvc-hero-home-btns{ gap: 12px !important; }
.dvc-hero-home-btns > .elementor-widget{ flex: 1 1 100% !important; }
.dvc-hero-home-btns .elementor-button{ width: 100% !important; }
}
/* ---- I. Barre d'action fixe : encoche iOS ---- */
@media (max-width: 980px){
.dvc-mobile-bar{
padding-bottom: calc(9px + env(safe-area-inset-bottom)) !important;
}
body{
padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
}
}
/* ---- J. Confort tactile ---- */
@media (max-width: 980px){
a, button, .elementor-button{
-webkit-tap-highlight-color: rgba(190, 140, 11, 0.18);
}
}
/* ---- K. Hero A PROPOS : photo plein cadre + lisibilite (tablette/mobile).
Avant : background-size auto 45% positionne a 50% 88%, la photo formait
un rectangle flottant derriere le paragraphe. ---- */
@media (max-width: 980px){
.dvc-hero-apropos{
background-size: cover !important;
background-position: 50% 35% !important;
padding: 56px 20px !important;
text-align: center !important;
}
.dvc-hero-apropos::before{
opacity: 0.88 !important;
}
.dvc-hero-apropos-copy{
min-height: 0 !important;
padding: 0 !important;
align-items: center !important;
text-align: center !important;
}
.dvc-hero-apropos .elementor-divider,
.dvc-hero-apropos .dvc-eyebrow{
justify-content: center !important;
}
/* NOTE : le chapo du hero contient 2
forces, hérités de la mise en
page desktop. On ne peut pas les neutraliser proprement en CSS : la source
ne comporte pas d'espace autour, donc les masquer colle les mots
("occasion,nous"). Le rendu actuel reste correct. Si on veut un pave
parfaitement fluide, remplacer les 2
par une espace dans Elementor. */
}
/* ---- L. Sections centrees sur mobile / tablette ---- */
@media (max-width: 980px){
.dvc-hero-home,
.dvc-hero-home > .e-con,
.dvc-atouts > .e-con,
.dvc-histoire,
.dvc-histoire-txt,
.dvc-valeurs,
.dvc-valeur-txt,
.dvc-stat-txt,
.dvc-chiffre-txt,
.dvc-cta-navy,
.dvc-cta-soft{
text-align: center !important;
}
.dvc-hero-home > .e-con,
.dvc-atouts > .e-con,
.dvc-histoire-txt{
align-items: center !important;
}
.dvc-hero-home-btns{
justify-content: center !important;
}
.dvc-hero-home .elementor-divider,
.dvc-atouts .elementor-divider,
.dvc-histoire .elementor-divider{
justify-content: center !important;
}
/* icone + texte : bloc centre, ligne conservee pour les chiffres */
.dvc-stat,
.dvc-chiffre{
justify-content: center !important;
text-align: center !important;
}
/* valeurs : icone au-dessus, comme les cartes services */
.dvc-valeur{
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 12px !important;
}
}
/* ---- M. Gouttiere unique de 20 px : tout le contenu aligne sur le meme bord ---- */
@media (max-width: 980px){
.dvc-bande-grille,
.dvc-chiffres-grille{
padding-left: 20px !important;
padding-right: 20px !important;
}
.dvc-veh-grid{ padding-left: 10px !important; padding-right: 10px !important; }
.dvc-hero-home > .e-con:not(.dvc-hero-home-media){
padding-left: 0 !important;
padding-right: 0 !important;
}
.dvc-cta-navy{ padding: 44px 0 !important; }
/* le bloc texte du hero porte un padding asymetrique herite du desktop
(10px a gauche, 0 a droite) : on le symetrise en mobile */
.dvc-hero-home-copy{
padding-left: 10px !important;
padding-right: 10px !important;
}
/* le bloc texte gardait la largeur de colonne du desktop (56 %) :
il occupait moins de la moitie de l'ecran en tablette portrait et
faisait deborder la rangee de boutons. */
.dvc-hero-home-copy{
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
}
/* largeur figee a 100 % du conteneur : les marges laterales debordaient */
.dvc-hero-home-media{ width: auto !important; }
/* le hero contient une colonne vide qui reserve la place de la photo
positionnee en absolu sur desktop. Sous 980 px elle mangeait la moitie
de la largeur : on empile et on la neutralise. */
/* CORRECTIF 21/08 - centrage du hero en tablette.
Ces deux regles visaient .e-con-inner, une enveloppe interne qui
n existe pas dans ce hero : les conteneurs sont en e-con-full.
Elles n ont donc jamais pris effet, et la colonne vide qui reserve
la place de la photo sur grand ecran continuait de voler 48 % de la
largeur au bloc texte entre 768 et 980 px. */
.dvc-hero-home > .e-con{
flex-wrap: wrap !important;
align-items: center !important;
}
/* NB : bien cibler les petits-enfants directs du hero. Un simple
".dvc-hero-home .e-con > .e-con" attrape aussi la rangee de boutons,
qui est un conteneur imbrique DANS le bloc texte. */
.dvc-hero-home > .e-con > .e-con:not(.dvc-hero-home-copy){
display: none !important;
}
.dvc-seo-text{ padding: 56px 10px !important; }
.dvc-cta-soft > .e-con-inner{
padding-left: 20px !important;
padding-right: 20px !important;
}
.dvc-cta-soft-btn{
padding-left: 0 !important;
padding-right: 0 !important;
}
.dvc-hero-home-btns{
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* ---- N. Paragraphes a largeur de lecture limitee : les recentrer.
Ils portent un max-width (520 / 620 px) herite du desktop et restaient
cales a gauche, ce qui decalait visuellement le texte centre. ---- */
@media (max-width: 980px){
.dvc-hero-home p,
.dvc-hero-lead,
.dvc-hero-apropos p,
.dvc-cta-navy p,
.dvc-cta-soft p,
.dvc-histoire-txt p{
margin-left: auto !important;
margin-right: auto !important;
}
.dvc-cta-navy p{ text-align: center !important; }
/* aligne le texte de la section histoire sur la meme gouttiere de 20 px */
.dvc-histoire-txt{
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* ===== fin correctifs 2026-08-13 ===== */
/* ============================================================
PAGE REPRISE
A. Hero + carte d estimation flottante
B. 4 arguments
C. Etapes numerotees
D. FAQ
============================================================ */
/* --- A. HERO ----------------------------------------------*/
.dvc-hero-reprise{ position:relative; }
.dvc-hero-reprise::before{
background-image:linear-gradient(90deg,
#0E1C2A 0%, #0E1C2A 26%,
rgba(14,28,42,.86) 40%, rgba(14,28,42,.55) 62%,
rgba(14,28,42,.35) 100%) !important;
background-color:transparent !important;
opacity:1 !important;
}
.dvc-reprise-grille > .e-con-inner{
display:flex !important; flex-direction:row !important;
align-items:center !important;
gap:40px !important; position:relative; z-index:2;
}
.dvc-reprise-copy{ flex:1 1 50% !important; gap:0 !important; }
.dvc-hero-reprise h1{
font-size:clamp(26px, 2.7vw, 40px); font-weight:800;
color:#fff; line-height:1.16; margin:8px 0 0;
}
.dvc-hero-reprise h1 .dvc-gold{ color:var(--dvcf-or); }
.dvc-hero-reprise .dvc-hero-lead{ margin-top:22px !important; }
.dvc-hero-reprise .dvc-hero-lead p{
color:var(--dvcf-hero-texte); font-size:16px; line-height:1.8;
max-width:470px; margin:0;
}
.dvc-hero-reprise .elementor-widget-button{ margin-top:30px; }
.dvc-hero-reprise .dvc-btn-or .elementor-button{
background:var(--dvcf-or) !important; color:var(--dvcf-navy) !important;
padding:16px 28px !important; border-radius:6px !important;
font-size:13px !important; font-weight:700 !important;
letter-spacing:.06em !important; text-transform:uppercase !important;
display:inline-flex !important; align-items:center; gap:10px;
}
.dvc-hero-reprise .dvc-btn-or .elementor-button:hover{ background:#A87B08 !important; }
/* --- Carte d estimation flottante -------------------------*/
.dvc-estim-carte{
flex:0 0 470px !important;
background:rgba(11,22,34,.96) !important;
border:1px solid rgba(255,255,255,.14) !important;
border-radius:14px !important;
padding:28px 26px !important;
box-shadow:0 24px 60px rgba(0,0,0,.42) !important;
margin-bottom:-120px !important;
position:relative; z-index:3;
gap:0 !important;
}
.dvc-estim-titre h2{
font-size:20px !important; font-weight:800 !important;
color:#fff !important; text-transform:uppercase;
letter-spacing:.02em; margin:0 0 8px !important;
}
.dvc-estim-sous p{
color:#9FB0C0 !important; font-size:13.5px !important;
line-height:1.55; margin:0 0 18px !important;
}
/* --- REPRISE FORMULAIRE : 2 colonnes sur fond sombre -------*/
.dvc-estim-carte .wpforms-form .wpforms-field-container{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 16px;
}
.dvc-estim-carte .wpforms-form .wpforms-field{
padding:0 0 14px !important; margin:0 !important; width:auto !important;
}
.dvc-estim-carte .wpforms-field-name,
.dvc-estim-carte .wpforms-submit-container{ grid-column:1 / -1; }
.dvc-estim-carte .wpforms-form label.wpforms-field-label{
color:#D6DEE5 !important; font-size:12.5px !important;
font-weight:600 !important; margin-bottom:5px !important;
}
.dvc-estim-carte .wpforms-form .wpforms-required-label{ color:var(--dvcf-or) !important; }
.dvc-estim-carte .wpforms-form input[type=text],
.dvc-estim-carte .wpforms-form input[type=email],
.dvc-estim-carte .wpforms-form input[type=tel],
.dvc-estim-carte .wpforms-form select{
background:rgba(255,255,255,.06) !important;
border:1px solid rgba(255,255,255,.18) !important;
border-radius:7px !important;
color:#fff !important; font-size:14px !important;
padding:11px 13px !important; height:auto !important;
width:100% !important; box-shadow:none !important;
}
.dvc-estim-carte .wpforms-form input::placeholder{ color:#7F8FA0 !important; }
.dvc-estim-carte .wpforms-form input:focus,
.dvc-estim-carte .wpforms-form select:focus{
border-color:var(--dvcf-or) !important;
box-shadow:0 0 0 3px rgba(201,150,12,.18) !important;
}
.dvc-estim-carte .wpforms-form .wpforms-field-name .wpforms-field-row-block{
width:calc(50% - 8px) !important; float:left; margin-right:16px;
}
.dvc-estim-carte .wpforms-form .wpforms-field-name .wpforms-field-row-block:last-child{ margin-right:0; }
.dvc-estim-carte .wpforms-form button[type=submit]{
width:100% !important; background:var(--dvcf-or) !important;
color:var(--dvcf-navy) !important; border:none !important;
padding:15px 20px !important; border-radius:7px !important;
font-size:13.5px !important; font-weight:800 !important;
letter-spacing:.05em !important; text-transform:uppercase !important;
margin-top:4px !important;
}
.dvc-estim-carte .wpforms-form button[type=submit]:hover{ background:#A87B08 !important; }
/* --- B. ARGUMENTS CENTRES ---------------------------------*/
.dvc-atout-centre{ align-items:center !important; text-align:center; }
.dvc-atout-centre .elementor-widget-shortcode{
width:58px; height:58px; border-radius:50%;
background:var(--dvcf-navy); color:#fff;
display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.dvc-atout-centre .dvc-ic-page{ width:26px; height:26px; }
.dvc-atout-centre h3{ margin-top:16px !important; }
/* --- C. ETAPES NUMEROTEES ----------------------------------*/
.dvc-etapes{ flex-wrap:wrap !important; align-items:flex-start !important; }
.dvc-etape{
flex:1 1 0 !important; min-width:200px !important;
align-items:center !important; text-align:center;
gap:0 !important; padding:0 !important; position:relative;
}
/* Filet pointille entre les etapes */
.dvc-etape:not(:last-child)::after{
content:""; position:absolute; top:29px; left:calc(50% + 40px);
width:calc(100% - 80px); border-top:2px dashed #C9D2DA; z-index:0;
}
.dvc-etape .elementor-widget-shortcode{
width:58px; height:58px; border-radius:50%;
background:#fff; border:2px solid var(--dvcf-navy);
color:var(--dvcf-navy);
display:flex; align-items:center; justify-content:center;
flex:0 0 auto; position:relative; z-index:1;
}
.dvc-etape .dvc-ic-page{ width:26px; height:26px; }
.dvc-etape-num{
width:26px; height:26px; border-radius:50%;
background:var(--dvcf-or); color:var(--dvcf-navy);
display:flex !important; align-items:center; justify-content:center;
font-size:13px; font-weight:800; margin:-12px 0 12px !important;
position:relative; z-index:2;
}
.dvc-etape h3{
font-size:14.5px; font-weight:700; color:var(--dvcf-navy);
margin:0 0 6px; line-height:1.3;
}
.dvc-etape p{ font-size:13px; color:var(--dvcf-gris); line-height:1.6; margin:0; }
/* --- D. FAQ -----------------------------------------------*/
.dvc-faq-liste{ max-width:860px; margin:0 auto; }
.dvc-faq{
border:1px solid var(--dvcf-filet); border-radius:10px;
background:#fff; margin-bottom:12px; overflow:hidden;
}
.dvc-faq summary{
cursor:pointer; list-style:none;
padding:18px 52px 18px 22px; position:relative;
font-size:15.5px; font-weight:700; color:var(--dvcf-navy);
}
.dvc-faq summary::-webkit-details-marker{ display:none; }
.dvc-faq summary::after{
content:""; position:absolute; right:22px; top:24px;
width:9px; height:9px;
border-right:2px solid var(--dvcf-or); border-bottom:2px solid var(--dvcf-or);
transform:rotate(45deg); transition:transform .2s ease;
}
.dvc-faq[open] summary::after{ transform:rotate(-135deg); top:28px; }
.dvc-faq p{
padding:0 22px 20px; margin:0;
font-size:14.5px; line-height:1.8; color:var(--dvcf-gris);
}
@media (max-width:980px){
.dvc-reprise-grille > .e-con-inner{ flex-direction:column !important; }
.dvc-reprise-copy, .dvc-estim-carte{ flex:1 1 100% !important; width:100% !important; }
.dvc-estim-carte{ margin-bottom:0 !important; }
.dvc-etape:not(:last-child)::after{ display:none; }
.dvc-etape{ flex:1 1 45% !important; }
}
@media (max-width:640px){
.dvc-estim-carte .wpforms-form .wpforms-field-container{ grid-template-columns:1fr; }
.dvc-estim-carte .wpforms-form .wpforms-field-name .wpforms-field-row-block{
width:100% !important; float:none; margin-right:0;
}
.dvc-etape{ flex:1 1 100% !important; }
}
/* --- REPRISE CARTE PLUS BASSE ------------------------------
Dans la reference, la carte demarre au deux tiers du hero et
deborde largement sur la section suivante. On l aligne en bas
et on augmente le debord. */
.dvc-reprise-grille > .e-con-inner{
align-items:flex-end !important;
padding-bottom:0 !important;
}
.dvc-reprise-copy{ padding-bottom:70px !important; }
.dvc-estim-carte{
margin-top:120px !important;
margin-bottom:-170px !important;
}
/* La section suivante laisse la place au debord */
.dvc-reprise-atouts{ padding-top:210px !important; }
/* Mention de confidentialite sous le bouton */
.dvc-estim-carte .wpforms-submit-container::after{
content:"Vos informations sont 100% confidentielles et sécurisées.";
display:block; margin-top:14px; text-align:center;
font-size:11.5px; color:#8496A6; letter-spacing:.01em;
}
/* --- REPRISE NOM PRENOM -----------------------------------
Le champ Nom de WPForms affiche un intitule global plus deux
sous-libelles sous les cases. La reference montre deux champs
etiquetes Prenom et Nom : on masque l intitule global et on
remonte les sous-libelles au-dessus des cases. */
.dvc-estim-carte .wpforms-field-name > .wpforms-field-label{ display:none !important; }
.dvc-estim-carte .wpforms-field-name .wpforms-field-row-block{ position:relative; }
.dvc-estim-carte .wpforms-field-name .wpforms-field-sublabel{
display:block !important; order:-1;
color:#D6DEE5 !important; font-size:12.5px !important;
font-weight:600 !important;
margin:0 0 5px !important; padding:0 !important;
}
.dvc-estim-carte .wpforms-field-name .wpforms-field-row-block{
display:flex !important; flex-direction:column !important;
}
/* --- REPRISE ICONES BLANCHES ------------------------------
.dvc-atout .dvc-ic-page impose le navy (cartes de l accueil,
fond blanc). Ici la pastille est navy : il faut du blanc. */
.dvc-atout-centre .dvc-ic-page{ color:#FFFFFF !important; }
/* --- REPRISE CADRAGE REFERENCE -----------------------------
Mesures relevees sur l image de reference :
hero 410px de haut, carte 520px de haut,
la carte demarre 47px au-dessus du bas du hero,
donc elle deborde de ~470px sur la section suivante. */
.dvc-hero-reprise .dvc-reprise-grille{
min-height:420px !important;
}
.dvc-reprise-grille > .e-con-inner{
align-items:flex-end !important;
padding-bottom:0 !important;
}
.dvc-reprise-copy{ padding-bottom:56px !important; }
.dvc-estim-carte{
flex:0 0 496px !important;
margin-top:0 !important;
margin-bottom:-470px !important;
padding:24px 24px 22px !important;
border-radius:12px !important;
background:#0B1622 !important;
border:1px solid rgba(255,255,255,.10) !important;
}
.dvc-reprise-atouts{ padding-top:520px !important; }
/* --- Champs compacts, au gabarit de la reference -----------*/
.dvc-estim-titre h2{ font-size:18.5px !important; margin:0 0 6px !important; }
.dvc-estim-sous p{ font-size:12.5px !important; margin:0 0 14px !important; }
.dvc-estim-carte .wpforms-form .wpforms-field-container{ gap:0 14px !important; }
.dvc-estim-carte .wpforms-form .wpforms-field{ padding:0 0 11px !important; }
.dvc-estim-carte .wpforms-form label.wpforms-field-label,
.dvc-estim-carte .wpforms-field-name .wpforms-field-sublabel{
font-size:11.5px !important; margin-bottom:4px !important;
}
.dvc-estim-carte .wpforms-form input[type=text],
.dvc-estim-carte .wpforms-form input[type=email],
.dvc-estim-carte .wpforms-form input[type=tel],
.dvc-estim-carte .wpforms-form select{
background:#18232F !important;
border:1px solid rgba(255,255,255,.13) !important;
border-radius:6px !important;
font-size:13px !important;
padding:9px 11px !important;
min-height:auto !important;
}
.dvc-estim-carte .wpforms-form button[type=submit]{
padding:13px 20px !important; font-size:12.5px !important;
border-radius:6px !important; margin-top:2px !important;
}
.dvc-estim-carte .wpforms-submit-container::after{
margin-top:11px !important; font-size:11px !important;
}
@media (max-width:980px){
.dvc-hero-reprise .dvc-reprise-grille{ min-height:auto !important; }
.dvc-estim-carte{
flex:1 1 100% !important; width:100% !important;
margin-bottom:0 !important;
}
.dvc-reprise-copy{ padding-bottom:0 !important; }
.dvc-reprise-atouts{ padding-top:56px !important; }
}
/* ============================================================
REPRISE - carte d estimation - gabarit maquette
============================================================ */
/* Grille du formulaire : 2 colonnes fluides */
.dvc-estim-carte .wpforms-field-container{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
column-gap:14px;
row-gap:0;
}
/* Champs residuels non supprimes dans WPForms */
.dvc-estim-carte #wpforms-219-field_1-container,
.dvc-estim-carte #wpforms-219-field_2-container{ display:none !important; }
/* Tous les controles occupent toute leur colonne */
.dvc-estim-carte .wpforms-field input[type="text"],
.dvc-estim-carte .wpforms-field input[type="email"],
.dvc-estim-carte .wpforms-field input[type="tel"],
.dvc-estim-carte .wpforms-field input[type="number"],
.dvc-estim-carte .wpforms-field input[type="date"],
.dvc-estim-carte .wpforms-field select{
width:100% !important;
max-width:none !important;
box-sizing:border-box !important;
height:42px !important;
padding:10px 12px !important;
font-size:13.5px !important;
line-height:1.2 !important;
background:#1B2836 !important;
border:1px solid rgba(255,255,255,.18) !important;
border-radius:6px !important;
color:#fff !important;
}
/* clearfix WPForms : ::before / ::after deviennent des items flex et volent 28px */
.dvc-estim-carte #wpforms-219-field_8-container .wpforms-field-row::before,
.dvc-estim-carte #wpforms-219-field_8-container .wpforms-field-row::after{
display:none !important;
}
/* bouton d envoi au gabarit maquette */
.dvc-estim-carte .wpforms-submit-container button[type="submit"]{
height:48px !important;
width:100% !important;
}
.dvc-estim-carte .wpforms-field ::placeholder{ color:#8A97A5; opacity:1; }
.dvc-estim-carte .wpforms-field input:focus,
.dvc-estim-carte .wpforms-field select:focus{
outline:2px solid var(--dvcf-or-clair);
outline-offset:1px;
border-color:var(--dvcf-or-clair);
}
/* Bloc Prenom / Nom : deux colonnes egales */
.dvc-estim-carte .wpforms-field-name{ grid-column:1 / -1; }
.dvc-estim-carte .wpforms-field-name > fieldset{
border:0; margin:0; padding:0; min-width:0;
}
.dvc-estim-carte .wpforms-field-name > fieldset > legend.wpforms-field-label{
position:absolute !important;
width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); clip-path:inset(50%);
white-space:nowrap; padding:0; margin:-1px; border:0;
}
.dvc-estim-carte #wpforms-219-field_8-container .wpforms-field-row{
display:flex !important;
flex-direction:row;
gap:14px;
width:100% !important;
max-width:none !important;
}
.dvc-estim-carte #wpforms-219-field_8-container .wpforms-field-row-block{
display:flex !important;
flex-direction:column;
flex:1 1 0 !important;
width:auto !important;
max-width:none !important;
min-width:0;
float:none !important;
margin:0 !important;
padding:0 !important;
}
.dvc-estim-carte .wpforms-field-name .wpforms-field-sublabel{
display:block;
order:-1;
font-size:11.5px;
font-weight:600;
color:#D6DEE5;
margin:0 0 4px !important;
}
/* Prenom / Nom sont obligatoires : l asterisque suivait la legende masquee */
.dvc-estim-carte #wpforms-219-field_8-container .wpforms-field-sublabel::after{
content:" *";
color:var(--dvcf-or);
}
/* Ordre : Telephone avant Email */
.dvc-estim-carte #wpforms-219-field_12-container{ order:1; }
.dvc-estim-carte #wpforms-219-field_7-container{ order:2; }
/* Sous 520 px : une seule colonne */
@media (max-width:520px){
.dvc-estim-carte .wpforms-field-container{
grid-template-columns:minmax(0,1fr);
}
.dvc-estim-carte #wpforms-219-field_8-container .wpforms-field-row{
flex-direction:column;
}
.dvc-estim-carte #wpforms-219-field_8-container .wpforms-field-row-block{
width:100% !important;
max-width:none !important;
}
}
/* ============================================================
REPRISE - hero - alignement maquette
============================================================ */
/* Icone de surtitre : fleches circulaires (reprise / echange) */
.dvc-hero-reprise .dvc-eyebrow p::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9960C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E") !important;
background-size:contain !important;
background-position:center !important;
background-repeat:no-repeat !important;
}
/* Filet dore entre le titre et le paragraphe */
.dvc-hero-dark .elementor-element-e4ec4a6::after{
content:"";
display:block;
width:68px;
height:3px;
border-radius:2px;
background:var(--dvcf-or);
margin-top:26px;
}
@media (min-width:1240px){
/* Carte : descendue de 128px, ne chevauche plus que ~55px du hero */
.dvc-reprise-grille .dvc-estim-carte{
margin-bottom:-598px !important;
}
/* Les 4 atouts remontent sous le hero, zone de gauche */
.dvc-reprise-atouts{
padding-top:34px !important;
padding-bottom:44px !important;
}
.dvc-reprise-atouts .e-con-inner{
padding-right:536px !important;
}
.dvc-atouts{
gap:16px !important;
width:100% !important;
}
.dvc-atouts{
flex-wrap:nowrap !important;
}
.dvc-atouts > .dvc-atout{
flex:1 1 0 !important;
min-width:0 !important;
padding:22px 14px !important;
}
.dvc-atouts > .dvc-atout > div:first-child{
width:46px !important;
height:46px !important;
}
.dvc-atouts > .dvc-atout h3{
font-size:12.5px !important;
line-height:1.35 !important;
}
.dvc-atouts > .dvc-atout p{
font-size:12.5px !important;
line-height:1.45 !important;
}
/* Comment fonctionne la reprise : meme zone de gauche */
/* La frise reprend toute la largeur de la page. On la descend un peu
pour qu elle ne vienne pas se coller au formulaire a droite. */
.elementor-element-86cb27c{
padding-top:120px !important;
}
.elementor-element-86cb27c .e-con-inner{
padding-right:0 !important;
}
.elementor-element-86cb27c h2{
font-size:34px !important;
}
.dvc-etapes{
flex-wrap:nowrap !important;
gap:32px 20px !important;
}
.dvc-etapes > .dvc-etape{
flex:1 1 0 !important;
min-width:0 !important;
}
}
/* Debordement de la carte vers le bord droit sur grand ecran */
@media (min-width:1400px){
.dvc-reprise-grille .dvc-estim-carte{
margin-right:min(0px, calc(660px - 50vw)) !important;
}
/* La carte deborde a droite : la reserve doit suivre son deplacement,
sinon il reste jusqu a 340px de vide entre le contenu et le formulaire.
reserve = bord droit du conteneur - bord gauche de la carte + gouttiere */
.dvc-reprise-atouts .e-con-inner{
padding-right:max(40px, calc(1196px - 50vw)) !important;
}
/* Place retrouvee : on rend aux cartes et au titre leur taille normale */
.dvc-atouts{ gap:22px !important; }
.dvc-atouts > .dvc-atout{ padding:30px 26px !important; }
.dvc-atouts > .dvc-atout > div:first-child{ width:58px !important; height:58px !important; }
.dvc-atouts > .dvc-atout h3{ font-size:15px !important; line-height:1.4 !important; }
.dvc-atouts > .dvc-atout p { font-size:14px !important; line-height:1.5 !important; }
.elementor-element-86cb27c h2{ font-size:34px !important; }
.dvc-etapes{ gap:32px 20px !important; }
}
/* ============================================================
REPRISE - atouts 2x2, frise, fleches de select
============================================================ */
@media (min-width:1240px){
/* 4 atouts sur 2 rangees de 2 : cartes bien plus larges,
titres sur 1-2 lignes et descriptions sur 1-2 lignes */
.dvc-atouts{
flex-wrap:wrap !important;
gap:22px !important;
}
.dvc-atouts > .dvc-atout{
flex:1 1 40% !important;
min-width:0 !important;
padding:26px 28px !important;
}
.dvc-atouts > .dvc-atout > div:first-child{ width:56px !important; height:56px !important; }
.dvc-atouts > .dvc-atout h3{ font-size:15px !important; line-height:1.4 !important; }
.dvc-atouts > .dvc-atout p { font-size:14px !important; line-height:1.55 !important; }
/* Frise : titre rapproche et etapes agrandies */
.elementor-element-86cb27c .dvc-sec-head{ margin-bottom:18px !important; }
.dvc-etapes > .dvc-etape > div:first-child{ width:76px !important; height:76px !important; }
.dvc-etapes > .dvc-etape .dvc-etape-num{
width:32px !important; height:32px !important; font-size:15px !important;
}
.dvc-etapes > .dvc-etape h3{ font-size:14.5px !important; line-height:1.35 !important; }
.dvc-etapes > .dvc-etape p { font-size:14px !important; line-height:1.55 !important; }
}
/* Fleche sur les listes deroulantes.
Le select est en appearance:none : sans cela il n a aucun indicateur.
background-image en longhand pour survivre au raccourci background du bloc precedent. */
.dvc-estim-carte .wpforms-field select{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B6C4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important;
background-position:right 12px center !important;
background-size:15px 15px !important;
padding-right:36px !important;
}
/* ============================================================
REPRISE - tablette et mobile : accroche alignee, carte en bout de hero
============================================================ */
@media (max-width:980px){
/* L accroche etait centree par une marge auto : on la ramene a gauche,
alignee sur le surtitre, le H1 et le filet. */
.dvc-hero-dark .dvc-hero-lead{
margin-left:0 !important;
margin-right:auto !important;
}
/* La carte deborde du bas du hero, comme sur grand ecran.
La marge negative et le retrait de la section suivante emploient
la MEME valeur : le flux de la page reste inchange, seul le bord
bas du hero remonte. Valeur = hauteur de la carte - 80 px,
les 80 px etant la part qui reste dans le hero. */
.dvc-reprise-grille .dvc-estim-carte{
margin-bottom:-544px !important;
}
.dvc-reprise-atouts{
padding-top:600px !important; /* 544 + 56 de retrait d origine */
}
}
/* Sous 640 px la carte grandit (formulaire moins dense) */
@media (max-width:640px){
.dvc-reprise-grille .dvc-estim-carte{
margin-bottom:-850px !important;
}
.dvc-reprise-atouts{
padding-top:906px !important;
}
}
/* Sous 520 px le formulaire passe sur une colonne */
@media (max-width:520px){
.dvc-reprise-grille .dvc-estim-carte{
margin-bottom:-950px !important;
}
.dvc-reprise-atouts{
padding-top:1006px !important;
}
}
/* Ancre du formulaire d estimation : un peu d air quand on arrive dessus */
#dvc-estimation{
scroll-margin-top:24px;
}
/* Cadenas devant la ligne de reassurance.
Le texte est un pseudo-element : on ne peut pas lui ajouter d icone frere.
On passe donc le ::after en inline-block, centre par le parent, et
l icone devient son arriere-plan avec un retrait a gauche. */
.dvc-estim-carte .wpforms-submit-container{
text-align:center;
}
.dvc-estim-carte .wpforms-submit-container::after{
display:inline-block;
padding-left:17px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238496A6' fill-rule='evenodd'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:left center;
background-size:11px 11px;
}
/* ============================================================
ACHAT SECURISE - hero
============================================================ */
/* Voile degrade : sans lui, .dvc-hero-dark::before pose un aplat
navy opaque qui masque completement la photo. */
.dvc-hero-achat::before{
background-color:transparent !important;
background-image:linear-gradient(90deg,
#0E1C2A 0%,
#0E1C2A 26%,
rgba(14,28,42,.86) 40%,
rgba(14,28,42,.55) 62%,
rgba(14,28,42,.35) 100%);
}
/* Colonne de texte : sans deuxieme colonne, elle prendrait
toute la largeur et passerait par-dessus la photo. */
@media (min-width:1100px){
.dvc-achat-copy{
flex:0 1 700px !important;
max-width:700px;
}
}
/* La grille du hero Achat n herite plus de celle de Reprise :
celle-ci imposait min-height:470px et un alignement en bas,
necessaires pour la carte du formulaire, inutiles ici. */
/* Hauteur alignee sur le hero de l Accueil (540px), contenu centre
verticalement : sans cela le texte resterait colle en haut. */
.dvc-achat-grille{
min-height:420px !important; /* aligne sur le hero de Reprise */
}
.dvc-achat-grille > .e-con-inner{
align-items:center !important; /* en flex-row, c est align-items qui centre verticalement */
}
.dvc-achat-grille > .e-con-inner{
display:flex;
padding-top:0 !important;
padding-bottom:0 !important;
}
.dvc-hero-achat .dvc-achat-copy{
padding-bottom:0 !important;
}
/* Surtitre de la page Achat : coche cerclee */
.dvc-hero-achat .dvc-eyebrow p::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9960C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='8.4 12.2 11 14.8 15.6 9.4'/%3E%3C/svg%3E") !important;
background-size:contain !important;
background-position:center !important;
background-repeat:no-repeat !important;
}
.dvc-hero-achat h1{
font-size:44px !important;
line-height:1.13 !important;
}
/* Bouton or : la regle generique .dvc-btn-or perd contre Astra,
chaque page a besoin de sa regle plus specifique. */
.dvc-hero-achat .dvc-btn-or .elementor-button{
background-color:var(--dvcf-or) !important;
color:var(--dvcf-navy) !important;
border:2px solid transparent !important;
border-radius:6px !important;
padding:17px 34px !important;
font-size:14px !important;
font-weight:700 !important;
letter-spacing:.06em !important;
text-transform:uppercase !important;
}
.dvc-hero-achat .dvc-btn-or .elementor-button:hover{
background-color:var(--dvcf-or-fond-actif) !important;
color:#fff !important;
}
/* ============================================================
ACHAT SECURISE - engagements
============================================================ */
.dvc-achat-engagements{
padding-top:44px !important;
padding-bottom:38px !important;
}
/* La tete de section heritait des marges laterales de Reprise
(0 210px), qui la bridaient a 780px et cassaient le titre en
deux lignes. Ici elle prend toute la largeur. */
.dvc-achat-engagements .dvc-sec-head{
margin:0 auto 34px !important;
max-width:none !important;
width:100% !important;
}
/* Quatre cartes de front : la regle 2x2 de Reprise s applique
a .dvc-atouts partout, il faut la neutraliser ici. */
@media (min-width:1240px){
.dvc-achat-engagements .dvc-atouts{
flex-wrap:nowrap !important;
gap:22px !important;
}
.dvc-achat-engagements .dvc-atouts > .dvc-atout{
flex:1 1 0 !important;
min-width:0 !important;
}
}
/* ============================================================
ACHAT SECURISE - etapes
============================================================ */
.dvc-achat-etapes{
padding-top:44px !important;
padding-bottom:44px !important;
}
/* Meme correctif que sur les engagements : la tete de section
est bridee a 780px par les reglages herites de Reprise. */
.dvc-achat-etapes .dvc-sec-head{
margin:0 auto 34px !important;
max-width:none !important;
width:100% !important;
}
/* ============================================================
ACHAT SECURISE - corrections de typographie et d icones
============================================================ */
/* Le paragraphe retrouve la respiration du hero de Reprise */
.dvc-hero-achat .dvc-hero-lead{
margin:22px 0 0 !important;
}
/* Titres sur une seule ligne.
"ACCOMPAGNEMENT PERSONNALISE" demande 291px pour 223 disponibles :
on retire l interlettrage et on descend a 13px, ce qui ramene le
besoin a 238px pour 247 disponibles. */
@media (min-width:1240px){
.dvc-achat-engagements .dvc-atout{
padding:30px 16px !important;
}
.dvc-achat-engagements .dvc-atout h3{
font-size:13px !important;
letter-spacing:0 !important;
}
/* "DEMARCHES ADMINISTRATIVES" : 231px pour 220 disponibles */
.dvc-achat-etapes .dvc-etape h3{
font-size:13.5px !important;
}
}
/* Les conteneurs Elementor ajoutent 10px en haut et 23px en bas :
on les annule, sinon le bandeau depasse de 33px. */
.dvc-achat-garantie .e-con-inner,
.dvc-achat-garantie .elementor-widget-html{
padding-top:0 !important;
padding-bottom:0 !important;
}
/* Le titre vit dans la colonne centrale, au-dessus de la liste :
c est ce qui permet de tenir la hauteur de la maquette sans
superposition. Un titre en absolu chevauchait l encart. */
/* Titre pleine largeur, centre sur la page. */
.dvc-gar-tete{ text-align:center; margin:0 0 10px; }
.dvc-gar-titre{
color:#fff !important;
font-size:32px !important;
font-weight:700 !important;
line-height:1.2 !important;
text-align:center;
margin:0 0 10px !important;
}
.dvc-gar-filet{
display:block;
width:56px; height:3px;
background:var(--dvcf-or);
border-radius:2px;
margin:0 auto 18px;
}
/* Le widget separateur reserve 35px : on le comprime. */
.dvc-achat-garantie .dvc-sec-head .elementor-widget-divider{
margin-top:-6px !important;
}
.dvc-achat-garantie .dvc-sec-head h2{ color:#fff !important; }
.dvc-gar-grille{
display:flex;
align-items:flex-start;
gap:44px;
}
/* L ecusson remonte au niveau du titre, comme sur la maquette. */
.dvc-gar-ecusson{ margin-top:-74px; }
/* --- Ecusson ---
La marge negative le fait remonter au niveau du titre, comme sur
la maquette ou il demarre tout en haut du bandeau. */
.dvc-gar-ecusson{
flex:0 0 178px;
width:178px;
position:relative;
height:206px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 140'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0.9' y2='1'%3E%3Cstop offset='0' stop-color='%23F0D08A'/%3E%3Cstop offset='0.45' stop-color='%23C9960C'/%3E%3Cstop offset='1' stop-color='%237A5C07'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M13 4 H107 A9 9 0 0 1 116 13 V70 C116 99 91 119 60 135 C29 119 4 99 4 70 V13 A9 9 0 0 1 13 4 Z' fill='none' stroke='url(%23g)' stroke-width='8'/%3E%3Cpath d='M22 16 H98 A3 3 0 0 1 101 19 V69 C101 90 81 106 60 118 C39 106 19 90 19 69 V19 A3 3 0 0 1 22 16 Z' fill='none' stroke='%23E8C56A' stroke-width='2.2'/%3E%3C/svg%3E") center top / 178px 208px no-repeat;
display:flex;
flex-direction:column;
align-items:center;
padding-top:34px;
text-align:center;
}
.dvc-gar-sur{
font-size:12.5px; font-weight:600; letter-spacing:.10em; color:#F0D08A;
}
.dvc-gar-nb{
font-size:54px; font-weight:800; line-height:1; color:var(--dvcf-or); margin:2px 0 0;
}
.dvc-gar-unite{
font-size:18px; font-weight:700; letter-spacing:.10em; color:#F0D08A; margin-top:2px;
}
.dvc-gar-ruban{
position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
width:198px; text-align:center; white-space:nowrap;
background:var(--dvcf-or); color:#fff;
font-size:11.5px; font-weight:700; letter-spacing:.06em;
padding:7px 0;
clip-path:polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%, 13px 50%);
}
/* --- Liste a coches --- */
/* 52px : la liste doit demarrer sous le titre, qui est en absolu. */
/* !important : Astra stylise .entry-content ul (0,1,1) et gagne. */
/* La liste se centre dans l espace laisse entre l ecusson et
l encart : marges automatiques + largeur bornee. */
.dvc-gar-liste{
flex:1 1 auto;
list-style:none !important;
margin:0 auto !important;
padding:0 !important;
max-width:400px;
}
.dvc-gar-liste li{
position:relative;
padding:0 0 0 36px !important;
margin:0 0 11px !important;
color:#fff; font-size:14.5px; line-height:1.4;
list-style:none !important;
}
.dvc-gar-liste li:last-child{ margin-bottom:0; }
.dvc-gar-liste li::before{
content:""; position:absolute; left:0; top:-1px;
width:21px; height:21px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9960C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpolyline points='8.2 12.2 10.8 14.8 15.8 9.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* --- Encart conseil --- */
.dvc-gar-conseil{
flex:0 0 344px;
margin-top:6px;
margin-left:auto;
display:flex; gap:13px; align-items:flex-start;
border:1px solid var(--dvcf-or); border-radius:12px;
padding:13px 16px;
}
.dvc-gar-conseil-icone{
flex:0 0 30px; height:30px; margin-top:1px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9960C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Cpath d='M4 14h2.5a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1Z'/%3E%3Cpath d='M20 14h-2.5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1H19a1 1 0 0 0 1-1Z'/%3E%3Cpath d='M20 19v1a2 2 0 0 1-2 2h-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dvc-gar-conseil-titre{ color:#fff; font-size:15.5px; font-weight:700; margin:0 0 2px !important; }
.dvc-gar-conseil-sous{ color:#C2CEDA; font-size:12.5px; line-height:1.38; margin:0 0 7px !important; }
.dvc-gar-conseil-btn{
display:inline-block; background:var(--dvcf-or); color:var(--dvcf-navy);
font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
padding:9px 16px; border-radius:6px; text-decoration:none !important;
}
.dvc-gar-conseil-btn::after{ content:" →"; }
.dvc-gar-conseil-btn:hover{ background:var(--dvcf-or-fond-actif); color:#fff; }
/* --- Repli --- */
@media (max-width:1100px){
.dvc-gar-grille{ flex-wrap:wrap; justify-content:center; gap:18px; }
.dvc-gar-ecusson{ margin-top:0 !important; }
/* L ecusson (208px) est plus haut que la liste (125px) : sans
align-self, il restait 83px de vide sous la liste avant que
l encart ne passe a la ligne, soit 117px d ecart apparent. */
.dvc-gar-liste{ flex:1 1 320px; align-self:flex-end; }
.dvc-gar-conseil{ flex:1 1 100%; margin-top:0 !important; margin-left:0 !important; }
}
@media (max-width:640px){
.dvc-gar-grille{ flex-direction:column; align-items:stretch; }
/* En colonne, le flex-basis pilote la HAUTEUR : sans ce reset
l ecusson serait rogne. */
.dvc-gar-ecusson{ align-self:center; flex:0 0 auto !important; height:208px !important; }
}
/* ============================================================
ACHAT SECURISE - rassurances et CTA
============================================================ */
.dvc-achat-rassurances{
padding-top:34px !important;
padding-bottom:34px !important;
}
.dvc-ras-grille{
display:flex;
gap:22px;
}
.dvc-ras{
flex:1 1 0;
min-width:0;
display:flex;
align-items:flex-start;
gap:16px;
border:1px solid var(--dvcf-filet);
border-radius:10px;
background:#fff;
padding:22px 20px;
}
/* Icone a gauche, en fond : evite un widget par carte */
.dvc-ras::before{
content:"";
flex:0 0 34px;
height:34px;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
}
.dvc-ras-cadenas::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1C2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3Ccircle cx='12' cy='16' r='1.4'/%3E%3C/svg%3E"); }
.dvc-ras-personne::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1C2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }
.dvc-ras-chrono::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1C2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 6.5 12 12 16 14.5'/%3E%3C/svg%3E"); }
.dvc-ras-pouce::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1C2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 22V10l5-8 1.2.6a2 2 0 0 1 1 2.3L13 9h5.5a2.5 2.5 0 0 1 2.4 3.1l-1.7 7A2.5 2.5 0 0 1 16.8 21H7Z'/%3E%3Crect x='2.5' y='10' width='4.5' height='12' rx='1'/%3E%3C/svg%3E"); }
.dvc-ras-titre{
color:var(--dvcf-navy);
font-size:13px;
font-weight:700;
letter-spacing:.04em;
line-height:1.3;
margin:0 0 7px !important;
}
.dvc-ras-sous{
color:var(--dvcf-gris);
font-size:13.5px;
line-height:1.5;
margin:0 !important;
}
@media (max-width:1100px){
.dvc-ras-grille{ flex-wrap:wrap; }
.dvc-ras{ flex:1 1 45%; }
}
@media (max-width:640px){
.dvc-ras{ flex:1 1 100%; }
}
/* ============================================================
ACHAT SECURISE - reglages mobile
============================================================ */
/* 1. En colonne, flex-basis pilote la HAUTEUR : la liste gardait
une boite de 320px pour 125px de contenu, d ou ~200px de vide
avant l encart. Meme piege que sur l ecusson. */
@media (max-width:640px){
.dvc-gar-liste{
flex:0 0 auto !important;
width:100%;
max-width:none !important;
}
.dvc-gar-conseil{ flex:0 0 auto !important; }
}
/* 2. Titre du hero aligne sur celui de Reprise (27px) */
@media (max-width:920px){
.dvc-hero-achat h1{
font-size:27px !important;
line-height:1.13 !important;
}
}
/* 3. Les rassurances touchaient les deux bords de l ecran.
La marge s applique des 1100px : c est la que le conteneur
Elementor perd son propre retrait. */
@media (max-width:1100px){
.dvc-achat-rassurances .e-con-inner,
.dvc-achat-rassurances .elementor-widget-html{
padding-left:20px !important;
padding-right:20px !important;
}
}
@media (max-width:640px){
.dvc-ras{
padding:16px 16px !important;
gap:13px !important;
}
.dvc-ras::before{ flex:0 0 28px; height:28px; }
.dvc-ras-titre{ font-size:12.5px; }
.dvc-ras-sous{ font-size:13px; }
}
/* ============================================================
ACHAT SECURISE - icones de la frise
============================================================
La maquette utilise des icones PLEINES. Le jeu maison
[dvc_icone] est en trait fin : a 26px il parait grele et ne
correspond pas. On remplace les cinq par des fonds SVG.
Le SVG du shortcode est masque, le dessin passe en ::before. */
.dvc-achat-etapes .dvc-etape .elementor-shortcode > svg{
display:none !important;
}
.dvc-achat-etapes .dvc-etape .elementor-shortcode::before{
content:"";
display:block;
width:30px;
height:30px;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
}
.dvc-achat-etapes .dvc-etape:nth-child(1) .elementor-shortcode::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230E1C2A'%3E%3Cpath d='M19.1 7.9A2.2 2.2 0 0 0 17 6.4H7A2.2 2.2 0 0 0 4.9 7.9L3.6 11.4A2 2 0 0 0 2 13.4v2.1a1 1 0 0 0 1 1h.9a2.6 2.6 0 0 0 5.1 0h6.1a2.6 2.6 0 0 0 5.1 0h.8a1 1 0 0 0 1-1v-2.1a2 2 0 0 0-1.6-2l-1.3-3.5ZM7.3 8.4h9.4l1.2 3H6.1l1.2-3Z'/%3E%3Ccircle cx='6.5' cy='16.3' r='1.5'/%3E%3Ccircle cx='17.5' cy='16.3' r='1.5'/%3E%3C/svg%3E"); }
.dvc-achat-etapes .dvc-etape:nth-child(2) .elementor-shortcode::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230E1C2A'%3E%3Cpath d='M8.4 2.6h7.2a1 1 0 0 1 1 1v.5h1.1A2.3 2.3 0 0 1 20 6.4v13.1a2.3 2.3 0 0 1-2.3 2.3H6.3A2.3 2.3 0 0 1 4 19.5V6.4a2.3 2.3 0 0 1 2.3-2.3h1.1v-.5a1 1 0 0 1 1-1Z'/%3E%3Cpath fill='%23fff' d='M9.6 4.3h4.8v1.2H9.6z'/%3E%3Crect fill='%23fff' x='7.2' y='8.4' width='1.7' height='1.7' rx='.45'/%3E%3Crect fill='%23fff' x='10.1' y='8.9' width='6.7' height='1' rx='.5'/%3E%3Crect fill='%23fff' x='7.2' y='12' width='1.7' height='1.7' rx='.45'/%3E%3Crect fill='%23fff' x='10.1' y='12.5' width='6.7' height='1' rx='.5'/%3E%3Crect fill='%23fff' x='7.2' y='15.6' width='1.7' height='1.7' rx='.45'/%3E%3Crect fill='%23fff' x='10.1' y='16.1' width='4.6' height='1' rx='.5'/%3E%3C/svg%3E"); }
.dvc-achat-etapes .dvc-etape:nth-child(3) .elementor-shortcode::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230E1C2A'%3E%3Cpath d='M12 2.2 4.6 5.1v6.3c0 4.6 3.1 8.9 7.4 10.4 4.3-1.5 7.4-5.8 7.4-10.4V5.1L12 2.2Z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' d='M8.7 11.9l2.4 2.4 4.3-4.6'/%3E%3C/svg%3E"); }
.dvc-achat-etapes .dvc-etape:nth-child(4) .elementor-shortcode::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230E1C2A'%3E%3Cpath d='M19.1 7.9A2.2 2.2 0 0 0 17 6.4H7A2.2 2.2 0 0 0 4.9 7.9L3.6 11.4A2 2 0 0 0 2 13.4v2.1a1 1 0 0 0 1 1h.9a2.6 2.6 0 0 0 5.1 0h6.1a2.6 2.6 0 0 0 5.1 0h.8a1 1 0 0 0 1-1v-2.1a2 2 0 0 0-1.6-2l-1.3-3.5ZM7.3 8.4h9.4l1.2 3H6.1l1.2-3Z'/%3E%3Ccircle cx='6.5' cy='16.3' r='1.5'/%3E%3Ccircle cx='17.5' cy='16.3' r='1.5'/%3E%3Ccircle cx='18.6' cy='5.6' r='4.3' fill='%23C9960C'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='m16.6 5.6 1.4 1.4 2.5-2.7'/%3E%3C/svg%3E"); }
/* ============================================================
ARCHIVE - champ de tri
============================================================
Le contenu demandait 46px (11 + 24 de line-height + 11) pour
une hauteur imposee de 40px, avec overflow:clip : le bas du
texte etait rogne. On aligne le champ sur les selects de
filtre voisins, qui eux tiennent (10 + 20 + 10 = 40 pour 42). */
.dvc-tri-select{
height:42px !important;
padding-top:10px !important;
padding-bottom:10px !important;
line-height:20px !important;
}
/* --- CTA DE FIN DE PAGE : MARGE LATERALE SUR MOBILE -------
Les cartes .dvc-cta-soft (A propos, Achat securise, Reprise)
touchaient les deux bords de l ecran sur mobile ET tablette.
On les rentre
de 20px de chaque cote, comme les 4 rassurances. */
@media (max-width:1024px){
.dvc-section-cta{
padding-left:20px !important;
padding-right:20px !important;
}
}
/* ============================================================
PAGE CONTACT
Construite d apres la section #page-contact de la maquette.
============================================================ */
/* --- 1. HERO -----------------------------------------------
Meme montage que le hero Achat : la photo est le fond du
conteneur, le voile degrade est le ::before. Tant qu aucune
photo n est posee, le degrade se pose sur le navy. */
.dvc-hero-contact::before{
background-color:transparent !important;
background-image:linear-gradient(90deg,#0E1C2A 0%,#0E1C2A 26%,
rgba(14,28,42,.86) 40%,rgba(14,28,42,.55) 62%,rgba(14,28,42,.35) 100%);
}
.dvc-contact-grille{ min-height:420px !important; }
.dvc-contact-grille > .e-con-inner{ align-items:center !important; }
.dvc-contact-vide{ flex:1 1 0 !important; min-width:0 !important; }
@media (min-width:1100px){
.dvc-contact-copy{ flex:0 1 700px !important; max-width:700px; }
}
.dvc-hero-contact .dvc-eyebrow p::before{
content:''; display:inline-block; vertical-align:-2px;
width:15px; height:15px; margin-right:8px;
background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DFA62C'%3E%3Cpath d='M2 5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v.4l-10 5.6L2 5.4V5Zm0 2.7V19a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7.7l-9.5 5.3a1 1 0 0 1-1 0L2 7.7Z'/%3E%3C/svg%3E") no-repeat center/15px 15px;
}
/* --- 2. SECTION FORMULAIRE + COORDONNEES -------------------
Maquette : grille 1.25fr / 1fr, gouttiere 40px, alignee en haut. */
.dvc-contact-section{ padding:64px 0 !important; }
.dvc-contact-grid{
display:flex !important;
flex-wrap:wrap !important;
gap:40px !important;
align-items:flex-start !important;
}
@media (min-width:1000px){
/* La maquette utilise une grille 1.25fr / 1fr. En flex, le padding
de la carte fausse la repartition (on mesurait 1,33 au lieu de
1,25). minmax(0,...) evite que le contenu impose un minimum. */
.dvc-contact-grid{
display:grid !important;
grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) !important;
align-items:start !important;
}
}
@media (max-width:999px){
/* En colonne, flex-basis pilote la HAUTEUR : il faut 0 0 auto. */
.dvc-contact-form,
.dvc-contact-aside{ flex:0 0 auto !important; width:100% !important; }
}
/* --- 3. CARTE BLANCHE DU FORMULAIRE ------------------------ */
.dvc-contact-form{
background:#fff !important;
border:1px solid var(--dvcf-filet) !important;
border-radius:10px !important;
padding:34px 32px !important;
box-shadow:0 1px 3px rgba(14,28,42,.07) !important;
}
.dvc-contact-form h2{
font-size:22px; font-weight:700; color:var(--dvcf-navy); margin-bottom:8px;
}
.dvc-contact-form .dvc-contact-form-intro p{
color:var(--dvcf-gris); font-size:14.5px; margin:0 0 6px;
}
.dvc-contact-form .dvc-contact-micro p{
display:flex; align-items:center; justify-content:center; gap:8px;
margin:14px 0 0; font-size:12.5px; color:var(--dvcf-gris-2);
}
.dvc-contact-form .dvc-contact-micro p::before{
content:''; flex:0 0 15px; width:15px; height:15px;
background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231E8A5F'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.6-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7Z'/%3E%3C/svg%3E") no-repeat center/15px 15px;
}
/* --- 4. CHAMPS WPFORMS ------------------------------------
Email et Telephone cote a cote comme dans la maquette :
le conteneur de champs passe en flex, et seuls ces deux
champs prennent la moitie de la largeur. */
.dvc-contact-form .wpforms-field-container{
display:flex !important;
flex-wrap:wrap !important;
gap:0 16px !important;
}
.dvc-contact-form .wpforms-field-container::before,
.dvc-contact-form .wpforms-field-container::after{ display:none !important; }
.dvc-contact-form .wpforms-field{
flex:1 1 100% !important; min-width:0 !important;
padding:0 0 17px !important;
}
@media (min-width:560px){
.dvc-contact-form #wpforms-144-field_7-container,
.dvc-contact-form #wpforms-144-field_5-container{
flex:1 1 calc(50% - 8px) !important;
}
}
.dvc-contact-form .wpforms-submit-container{ flex:1 1 100% !important; }
/* Apparence des champs. WPForms impose ses propres regles :
chaque declaration a besoin de !important, pas seulement width. */
.dvc-contact-form .wpforms-field-label{
display:block !important;
font-size:13px !important; font-weight:600 !important;
color:var(--dvcf-navy) !important;
margin:0 0 7px !important;
}
.dvc-contact-form .wpforms-required-label{ color:#E05C4B !important; }
.dvc-contact-form .wpforms-field-description{
font-size:12px !important; color:var(--dvcf-gris-2) !important;
font-weight:400 !important; margin:5px 0 0 !important;
}
.dvc-contact-form input[type="text"],
.dvc-contact-form input[type="email"],
.dvc-contact-form input[type="tel"],
.dvc-contact-form select,
.dvc-contact-form textarea{
width:100% !important; max-width:none !important;
padding:13px 15px !important;
border:1px solid var(--dvcf-filet) !important;
border-radius:8px !important;
background:#fff !important;
font-size:14.5px !important;
color:var(--dvcf-navy) !important;
box-shadow:none !important;
}
.dvc-contact-form input::placeholder,
.dvc-contact-form textarea::placeholder{ color:#9AA7B3 !important; }
.dvc-contact-form input:focus,
.dvc-contact-form select:focus,
.dvc-contact-form textarea:focus{
border-color:var(--dvcf-or) !important;
box-shadow:0 0 0 3px rgba(201,150,12,.14) !important;
outline:none !important;
}
.dvc-contact-form textarea{ min-height:140px !important; resize:vertical !important; }
.dvc-contact-form select{
appearance:none !important; -webkit-appearance:none !important;
padding-right:38px !important;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7C8C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important;
background-position:right 13px center !important;
}
/* Case RGPD : libelle masque, la phrase de consentement fait office
de libelle. Astra stylerait la liste, on neutralise. */
.dvc-contact-form .wpforms-field-checkbox ul{
list-style:none !important; margin:0 !important; padding:0 !important;
}
.dvc-contact-form .wpforms-field-checkbox li{
display:flex !important; align-items:flex-start !important; gap:10px !important;
margin:0 !important;
}
.dvc-contact-form .wpforms-field-checkbox input[type="checkbox"]{
width:17px !important; height:17px !important;
flex:0 0 17px !important; margin:3px 0 0 !important;
accent-color:var(--dvcf-or) !important;
}
.dvc-contact-form .wpforms-field-checkbox label{
font-size:13.5px !important; font-weight:400 !important;
color:var(--dvcf-gris) !important; line-height:1.55 !important;
margin:0 !important;
}
/* Bouton d envoi : pleine largeur, aux couleurs du site. */
.dvc-contact-form .wpforms-submit{
display:block !important; width:100% !important;
margin-top:8px !important;
padding:15px 22px !important;
background:var(--dvcf-or-fond) !important;
color:#0E1C2A !important;
border:none !important; border-radius:8px !important;
font-size:14px !important; font-weight:700 !important;
letter-spacing:.03em !important; text-transform:uppercase !important;
cursor:pointer !important;
transition:background .2s ease !important;
}
.dvc-contact-form .wpforms-submit:hover{
background:var(--dvcf-or-fond-actif) !important;
}
/* --- 5. CARTE NAVY DES COORDONNEES ------------------------- */
.dvc-contact-info .dvc-ci{
background:var(--dvcf-navy); color:#fff;
border-radius:10px; padding:34px 30px;
}
.dvc-contact-info .dvc-ci-titre{
font-size:20px; font-weight:700; color:#fff; margin:0 0 6px;
}
.dvc-contact-info .dvc-ci-intro{
color:#A9BAC8; font-size:14px; margin:0 0 6px;
}
.dvc-contact-info .dvc-ci-item{
display:flex; gap:16px; padding:18px 0;
border-bottom:1px solid rgba(255,255,255,.1);
}
.dvc-contact-info .dvc-ci-item:last-of-type{ border-bottom:none; }
.dvc-contact-info .dvc-ci-item::before{
content:''; flex:0 0 22px; width:22px; height:22px; margin-top:3px;
background-repeat:no-repeat; background-position:center; background-size:22px 22px;
}
.dvc-contact-info .dvc-ci-tel::before{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DFA62C'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E"); }
.dvc-contact-info .dvc-ci-mail::before{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DFA62C'%3E%3Cpath d='M2 5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v.4l-10 5.6L2 5.4V5Zm0 2.7V19a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7.7l-9.5 5.3a1 1 0 0 1-1 0L2 7.7Z'/%3E%3C/svg%3E"); }
.dvc-contact-info .dvc-ci-pin::before{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DFA62C'%3E%3Cpath d='M12 2c-4 0-7 3-7 7 0 5.2 6.2 12.3 6.5 12.6a.7.7 0 0 0 1 0C12.8 21.3 19 14.2 19 9c0-4-3-7-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E"); }
.dvc-contact-info .dvc-ci-clock::before{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DFA62C'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Z'/%3E%3Cpath d='M11 6.5h2v5.9l3.5 2-1 1.7-4.5-2.6V6.5Z'/%3E%3C/svg%3E"); }
.dvc-contact-info .dvc-ci-txt{ min-width:0; }
.dvc-contact-info .dvc-ci-txt h3{
font-size:12.5px; font-weight:700; text-transform:uppercase;
letter-spacing:.09em; color:#93A5B4; margin:0 0 5px;
}
.dvc-contact-info .dvc-ci-txt p,
.dvc-contact-info .dvc-ci-txt a{
font-size:15.5px; font-weight:600; color:#fff; margin:0;
text-decoration:none; word-break:break-word;
}
.dvc-contact-info .dvc-ci-txt a:hover{ color:var(--dvcf-or-clair); }
/* Boutons Appeler et WhatsApp */
.dvc-contact-info .dvc-ci-actions{
display:flex; flex-direction:column; gap:10px; margin-top:22px;
}
.dvc-contact-info .dvc-ci-btn{
display:flex; align-items:center; justify-content:center; gap:9px;
min-height:46px; padding:12px 18px;
border-radius:8px; text-decoration:none;
font-size:14px; font-weight:700; letter-spacing:.02em;
transition:filter .2s ease;
}
.dvc-contact-info .dvc-ci-btn::before{
content:''; flex:0 0 17px; width:17px; height:17px;
background-repeat:no-repeat; background-position:center; background-size:17px 17px;
}
.dvc-contact-info .dvc-ci-btn-or{
background:var(--dvcf-or-fond); color:#0E1C2A;
}
.dvc-contact-info .dvc-ci-btn-or::before{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230E1C2A'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E"); }
.dvc-contact-info .dvc-ci-btn-or:hover{ background:var(--dvcf-or-fond-actif); color:#0E1C2A; }
.dvc-contact-info .dvc-ci-btn-wa{ background:#1E8A5F; color:#fff; }
.dvc-contact-info .dvc-ci-btn-wa::before{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2Zm5.3 13.9c-.2.6-1.3 1.2-1.8 1.2-.5 0-1.1.2-3.6-.9-3-1.3-4.9-4.4-5-4.6-.2-.2-1.2-1.6-1.2-3s.8-2.1 1-2.4c.3-.3.6-.4.8-.4h.6c.2 0 .4 0 .7.5l1 2.3c.1.2.2.5 0 .7l-.4.6-.4.4c-.1.2-.3.4-.1.7.2.3.8 1.4 1.8 2.3 1.2 1.1 2.2 1.4 2.5 1.6.3.1.5.1.7-.1l.9-1c.2-.3.4-.2.7-.1l2.2 1.1c.3.2.5.2.6.4 0 .1 0 .8-.2 1.5Z'/%3E%3C/svg%3E"); }
.dvc-contact-info .dvc-ci-btn-wa:hover{ background:#19754F; color:#fff; }
/* --- 6. CARTE GOOGLE --------------------------------------
Maquette : encadre en 16/10 sous le bloc coordonnees. */
.dvc-contact-map{ margin-top:22px !important; }
.dvc-contact-map iframe{
display:block !important;
width:100% !important;
aspect-ratio:16/10 !important;
height:auto !important;
border:0 !important;
border-radius:10px !important;
}
/* --- 7. RESPONSIVE ----------------------------------------- */
@media (max-width:1024px){
.dvc-contact-section{ padding:48px 0 !important; }
/* Sous 1024px les cartes touchaient presque les bords (10px).
Le conteneur de grille ajoute deja 10px par defaut : on en
met 10 de plus pour retomber sur la gouttiere maison de 20px. */
.dvc-contact-section > .e-con-inner{
padding-left:10px !important;
padding-right:10px !important;
}
}
@media (max-width:767px){
.dvc-contact-grille{ min-height:340px !important; }
.dvc-contact-form{ padding:26px 20px !important; }
.dvc-contact-info .dvc-ci{ padding:26px 20px; }
}
@media (max-width:559px){
/* Email et Telephone repassent l un sous l autre. */
.dvc-contact-form .wpforms-field-container{ gap:0 !important; }
}
/* Champs fantomes du formulaire 144 : les champs 2 et 4 sont des
reliquats invisibles (1px de haut) qui ne figurent pas dans le
constructeur. Dans une grille flex ils occupent chacun une ligne
entiere et volent ~36px en haut du formulaire. On les retire. */
.dvc-contact-form #wpforms-144-field_2-container{
display:none !important;
}
/* NB : ne jamais masquer le champ 4 : c est le piege anti-spam de
WPForms. Il est deja hors flux (position:absolute, 1px) donc il
ne coute aucune place. Le masquer affaiblirait la protection. */
/* --- 8. CORRECTIONS DE RENDU -------------------------------- */
/* Champ Nom. WPForms le rend dans un