/*
Theme Name:     Divi Enfant — Dravion
Description:    Thème enfant Divi pour le site Dravion (adapté de la feuille Artech'Drone)
Author:         Delphine Mercier
Template:       Divi
Version:        1.0
*/


/* ═══════════════════════════════════════════════════════════════════════════
   TABLE DES MATIÈRES
   ═══════════════════════════════════════════════════════════════════════════

   1.  VARIABLES GLOBALES
   2.  TYPOGRAPHIE
   3.  HEADER & NAVIGATION
   4.  LIENS
   5.  SURTITRES, TITRES À TRAIT & PUCE « ACTUALITÉ »
   6.  LISTES À PUCES PERSONNALISÉES
   7.  SYSTÈME DE BADGES
   8.  BADGES « CONCEPT ET BREVET FRANÇAIS »
   8b. MODULES DIVI — BLURB ICÔNE À GAUCHE
   9.  ONGLETS DIVI
   10. GRAVITY FORMS — FORMULAIRE DE CONTACT
   11. FOOTER
   12. RESPONSIVE

   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. VARIABLES GLOBALES
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --dv-rouge:        #C9241C;
    --dv-rouge-fonce:  #A91C15;
    --dv-rouge-pale:   #FBECEB;
    --dv-anthracite:   #23282B;
    --dv-noir:         #111517;
    --dv-texte:        #3C4447;
    --dv-acier:        #55636B;
    --dv-gris:         #6B7679;
    --dv-gris-clair:   #A8B2B5;
    --dv-trait:        #E1E5E6;
    --dv-nuage:        #F5F7F7;
    --dv-blanc:        #FFFFFF;

    /* Drapeau (badges France) */
    --dv-fr-bleu:      #002395;
    --dv-fr-rouge:     #C9241C;

    --dv-font-titre:   "Rubik", system-ui, sans-serif;
    --dv-font-texte:   "Source Sans 3", system-ui, sans-serif;

    --dv-radius:       4px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. TYPOGRAPHIE
   Les polices sont chargées par Divi (Personnalisation > Typographie).
   Ces règles fixent uniquement l'échelle des titres.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Police du texte courant et des boutons : fixée ici plutôt que par Divi,
   qui peut écrire le nom Source Sans 3 sans guillemets (déclaration ignorée). */
body, body input, body textarea, body select {
    font-family: var(--dv-font-texte);
}
body .et_pb_button, body .et_pb_more_button {
    font-family: var(--dv-font-titre) !important;
    font-weight: 500 !important;
}

body h1, body h2, body h3, body h4,
.as-h1, .as-h2, .as-h3, .as-h4, .text-display {
    font-family: var(--dv-font-titre) !important;
    font-weight: 500 !important;
    color: var(--dv-anthracite);
}

body h1 { font-size: 44px !important; line-height: 1.12 !important; letter-spacing: -0.5px !important; }
body h2 { font-size: 32px !important; line-height: 1.18 !important; }
body h3 { font-size: 22px !important; line-height: 1.3 !important; }
body h4 { font-size: 18px !important; line-height: 1.35 !important; }

.text-display { font-size: 56px !important; line-height: 1.08 !important; letter-spacing: -1px !important; }
.as-h1        { font-size: 44px !important; line-height: 1.12 !important; }
.as-h2        { font-size: 32px !important; line-height: 1.18 !important; }
.as-h3        { font-size: 22px !important; line-height: 1.3 !important; }
.as-h4        { font-size: 18px !important; line-height: 1.35 !important; }
.text-small   { font-size: 14px !important; line-height: 1.5 !important; }
.text-xs      { font-size: 12px !important; line-height: 1.4 !important; }

/* Titres blancs dans les sections sombres Divi */
.et_pb_bg_layout_dark h1, .et_pb_bg_layout_dark h2,
.et_pb_bg_layout_dark h3, .et_pb_bg_layout_dark h4 { color: #fff; }

@media (max-width: 767px) {
    body h1, .as-h1   { font-size: 32px !important; }
    body h2, .as-h2   { font-size: 26px !important; }
    body h3, .as-h3   { font-size: 19px !important; }
    body h4, .as-h4   { font-size: 17px !important; }
    .text-display     { font-size: 36px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. HEADER & NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════ */

/* Logo sticky : logo compact quand l'en-tête devient fixe au défilement */
/* En-tête Divi par défaut */
.et-fixed-header #logo {
    content: url("https://www.dravion.fr/wp-content/uploads/2026/09/logo-sticky.png");
}
/* En-tête Theme Builder (module Menu réglé en « sticky ») */
.et_pb_sticky .et_pb_menu__logo img {
    content: url("https://www.dravion.fr/wp-content/uploads/2026/09/logo-sticky.png");
}

#et-top-navigation { font-family: var(--dv-font-titre); font-weight: 400; }
#top-menu-nav #top-menu li.dv-menu-cta > a { font-weight: 500; } /* le bouton Contact reste en 500 */

/* Pas de fondu au survol */
#top-menu-nav > ul > li > a:hover { opacity: 1 !important; }

/* Barre rouge sous le lien actif / survolé */
#top-menu-nav > ul > li > a > span { position: relative; }
#top-menu-nav > ul > li > a > span::before {
    content: "";
    position: absolute; left: 0; bottom: -7px;
    width: 0; height: 2px;
    background-color: var(--dv-rouge);
    transition: width .35s ease;
}
#top-menu-nav > ul > li:hover > a > span::before,
#top-menu-nav > ul > li.current-menu-item > a > span::before { width: 100%; }

#top-menu-nav > ul > li.current-menu-item > a { color: var(--dv-anthracite) !important; }

/* Sous-menus */
#top-menu li ul.sub-menu {
    width: 260px; border-top: 2px solid var(--dv-rouge);
    border-radius: 0 0 var(--dv-radius) var(--dv-radius);
    box-shadow: 0 12px 40px rgba(35,40,43,0.12);
}
#top-menu li li a { padding: 8px 20px; width: auto; font-size: 14px; }

/* Bouton « Contact » rouge dans le menu
   Apparence > Menus > élément Contact > Classes CSS : dv-menu-cta
   (activer « Classes CSS » dans les Options de l'écran si le champ n'apparaît pas) */
@media (min-width: 981px) {
    /* Le bloc rouge : texte centré, aligné sur les autres liens */
    #top-menu-nav #top-menu li.dv-menu-cta,
    body .et_pb_menu .et-menu > li.dv-menu-cta {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        height: 44px !important;
        padding: 0 22px !important;
        margin-left: 8px;
        background: var(--dv-rouge) !important;
        border-radius: var(--dv-radius);
        transition: background-color .2s;
    }
    #top-menu-nav #top-menu li.dv-menu-cta:hover,
    body .et_pb_menu .et-menu > li.dv-menu-cta:hover { background: var(--dv-rouge-fonce) !important; }

    /* Le texte : blanc dans tous les états (actif, survol, visité) */
    #top-menu-nav #top-menu li.dv-menu-cta > a,
    #top-menu-nav #top-menu li.dv-menu-cta.current-menu-item > a,
    #top-menu-nav #top-menu li.dv-menu-cta > a:hover,
    body .et_pb_menu .et-menu > li.dv-menu-cta > a,
    body .et_pb_menu .et-menu > li.dv-menu-cta.current-menu-item > a,
    body .et_pb_menu .et-menu > li.dv-menu-cta > a:hover {
        color: #fff !important;
        padding: 0 !important;
        line-height: 1 !important;
        background: none !important;
        opacity: 1 !important;
    }
    #top-menu-nav #top-menu li.dv-menu-cta > a > span::before,
    body .et_pb_menu .et-menu > li.dv-menu-cta > a > span::before,
    #top-menu-nav #top-menu li.dv-menu-cta > a::after,
    body .et_pb_menu .et-menu > li.dv-menu-cta > a::after { display: none !important; }
}
/* En-tête fixe (sticky) : bouton plus compact */
@media (min-width: 981px) {
    .et-fixed-header #top-menu-nav #top-menu li.dv-menu-cta,
    .et_pb_sticky .et_pb_menu .et-menu > li.dv-menu-cta,
    .et_pb_sticky.et_pb_menu .et-menu > li.dv-menu-cta {
        height: 34px !important;
        padding: 0 16px !important;
    }
    .et-fixed-header #top-menu-nav #top-menu li.dv-menu-cta > a,
    .et_pb_sticky .et_pb_menu .et-menu > li.dv-menu-cta > a,
    .et_pb_sticky.et_pb_menu .et-menu > li.dv-menu-cta > a {
        font-size: 14px !important;
    }
    #top-menu-nav #top-menu li.dv-menu-cta,
    body .et_pb_menu .et-menu > li.dv-menu-cta { transition: background-color .2s, height .3s, padding .3s !important; }
}
/* Menu mobile */
body .et_mobile_menu li.dv-menu-cta > a {
    background: var(--dv-rouge) !important;
    color: #fff !important;
    text-align: center;
    border-radius: var(--dv-radius);
    margin-top: 8px;
}

/* Hamburger mobile */
div.mobile_nav.opened .mobile_menu_bar::before { font-family: "ETmodules"; content: "\4d"; }
div.mobile_nav .mobile_menu_bar::before { color: var(--dv-anthracite) !important; font-size: 36px !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   4. LIENS
   ═══════════════════════════════════════════════════════════════════════════ */

.et_pb_bg_layout_dark a:not(.et_pb_button) {
    color: #fff !important; transition: color .3s;
}
.et_pb_bg_layout_dark a:not(.et_pb_button):hover { color: var(--dv-gris-clair) !important; }

/* Lien souligné « En savoir plus » */
a.dv-lien, .dv-lien a {
    font-family: var(--dv-font-titre); font-weight: 500;
    color: var(--dv-anthracite) !important;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color .2s, border-color .2s;
}
a.dv-lien:hover, .dv-lien a:hover { color: var(--dv-rouge) !important; }

/* Bouton du bandeau cookies */
.cn-button.wp-default { color: #fff !important; background: var(--dv-rouge) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   5. SURTITRES & PUCE « ACTUALITÉ »
   Usage : ajouter la classe au module Texte (onglet Avancé > Classe CSS)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Surtitre avec trait : « ────  LA SOCIÉTÉ »
   Classe « dv-surtitre » sur un module Texte ou Titre.
   Longueur du trait : --trait (60px par défaut). */
.dv-surtitre, .dv-titre-trait { --trait: 60px; --trait-couleur: currentColor; --trait-epaisseur: 1px; }

.dv-surtitre :is(p, h1, h2, h3, h4, h5, h6), p.dv-surtitre {
    display: flex !important; align-items: center; gap: 16px;
    font-family: var(--dv-font-titre) !important; font-weight: 500 !important;
    font-size: 13px !important; line-height: 1.3 !important;
    letter-spacing: 0.14em !important; text-transform: uppercase !important;
    color: var(--dv-acier) !important; margin: 0 !important; padding: 0 !important;
}
.dv-surtitre :is(p, h1, h2, h3, h4, h5, h6)::before, p.dv-surtitre::before {
    content: ""; flex: none;
    width: var(--trait); height: var(--trait-epaisseur); background: var(--trait-couleur);
}

/* Titre avec trait : le trait est centré sur la première ligne du titre.
   Classe « dv-titre-trait » sur un module Titre ou Texte. */
.dv-titre-trait :is(h1, h2, h3, h4, h5, h6),
:is(h1, h2, h3, h4, h5, h6).dv-titre-trait {
    display: flex !important; align-items: baseline; gap: 20px;
}
.dv-titre-trait :is(h1, h2, h3, h4, h5, h6)::before,
:is(h1, h2, h3, h4, h5, h6).dv-titre-trait::before {
    content: ""; flex: none;
    width: var(--trait); height: var(--trait-epaisseur); background: var(--trait-couleur);
    transform: translateY(-0.32em);
}

/* Variantes à combiner */
.dv-trait-court { --trait: 40px !important; }
.dv-trait-long  { --trait: 100px !important; }
.dv-trait-epais { --trait-epaisseur: 2px !important; }
.dv-trait-rouge { --trait-couleur: var(--dv-rouge) !important; }
.dv-surtitre.dv-texte-rouge :is(p, h1, h2, h3, h4, h5, h6),
p.dv-surtitre.dv-texte-rouge { color: var(--dv-rouge) !important; }
.et_pb_bg_layout_dark .dv-surtitre :is(p, h1, h2, h3, h4, h5, h6),
.dv-sombre .dv-surtitre :is(p, h1, h2, h3, h4, h5, h6),
.et_pb_bg_layout_dark p.dv-surtitre:not(.dv-texte-rouge),
.dv-sombre p.dv-surtitre:not(.dv-texte-rouge) { color: var(--dv-gris-clair) !important; }

@media (max-width: 767px) {
    .dv-surtitre, .dv-titre-trait { --trait: 36px; }
    .dv-titre-trait :is(h1, h2, h3, h4, h5, h6),
    :is(h1, h2, h3, h4, h5, h6).dv-titre-trait { gap: 12px; }
}

/* Puce rouge devant « Présentation publique à l'UAV Show »
   Retrait suspendu : si le texte passe sur deux lignes, la 2e reste alignée sur la 1re.
   Alignée sur les puces des listes dv-liste-* (même retrait de 1.75em). */
.salon p, p.salon {
    position: relative;
    margin: 0;
    padding-left: 1.75em !important;
    line-height: 1.5 !important;
}
.salon p::before, p.salon::before {
    content: "";
    position: absolute;
    left: 0.2em;
    top: calc(0.75em - 4px);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--dv-rouge);
}
@media (prefers-reduced-motion: no-preference) {
    .salon p::before, p.salon::before { animation: dv-pulse 2s ease-in-out infinite; }
}
@keyframes dv-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,36,28,0.6); }
    50%      { box-shadow: 0 0 0 6px rgba(201,36,28,0); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. LISTES À PUCES PERSONNALISÉES
   Formes   : dv-liste-check | dv-liste-fleche | dv-liste-carre
   Couleurs : rouge par défaut, ou ajouter dv-puce-anthracite | dv-puce-gris | dv-puce-blanc
   Ex. : <ul class="dv-liste-check dv-puce-anthracite">
   Les pictos sont dessinés en SVG : rendu identique sur tous les navigateurs.
   ═══════════════════════════════════════════════════════════════════════════ */

ul.dv-liste-check, ul.dv-liste-fleche, ul.dv-liste-carre, ul.dv-liste-fleche-blanche {
    --puce: var(--dv-rouge);
    list-style: none !important; padding: 0 !important; margin: 0 0 1em !important;
}
ul.dv-puce-anthracite { --puce: var(--dv-anthracite); }
ul.dv-puce-gris       { --puce: var(--dv-acier); }
ul.dv-puce-blanc,
ul.dv-liste-fleche-blanche { --puce: #fff; }
ul.dv-puce-rouge      { --puce: var(--dv-rouge); }

ul.dv-liste-check > li, ul.dv-liste-fleche > li,
ul.dv-liste-carre > li, ul.dv-liste-fleche-blanche > li {
    list-style: none !important;
    position: relative;
    padding: 0 0 0 1.75em !important;
    margin: 0 0 0.6em !important;
    line-height: 1.6;
}
ul.dv-liste-check > li::before, ul.dv-liste-fleche > li::before,
ul.dv-liste-fleche-blanche > li::before {
    content: "";
    position: absolute; left: 0; top: 0.3em;
    width: 1.05em; height: 1.05em;
    background-color: var(--puce);
    -webkit-mask: var(--puce-forme) center / contain no-repeat;
            mask: var(--puce-forme) center / contain no-repeat;
}
ul.dv-liste-check > li::before { --puce-forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E"); }
ul.dv-liste-fleche > li::before,
ul.dv-liste-fleche-blanche > li::before { --puce-forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6'/%3E%3C/svg%3E"); }
ul.dv-liste-carre > li::before {
    content: ""; position: absolute; left: 0.15em; top: 0.62em;
    width: 0.45em; height: 0.45em; background: var(--puce);
}

/* Titre + texte dans une puce (<li><h4>…</h4><p>…</p></li>) : le picto se cale sur le titre */
ul.dv-liste-check > li > :is(h3, h4, h5):first-child,
ul.dv-liste-fleche > li > :is(h3, h4, h5):first-child { margin: 0 0 0.3em !important; padding: 0 !important; }
ul.dv-liste-check > li:has(> :is(h3, h4, h5):first-child)::before,
ul.dv-liste-fleche > li:has(> :is(h3, h4, h5):first-child)::before { top: 0.2em; width: 1.2em; height: 1.2em; }
ul.dv-liste-check > li > p, ul.dv-liste-fleche > li > p { margin: 0 !important; padding: 0 !important; }
ul.dv-liste-check > li:has(> :is(h3, h4, h5)), ul.dv-liste-fleche > li:has(> :is(h3, h4, h5)) { margin-bottom: 1.3em !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   7. SYSTÈME DE BADGES (usage courant)

   <div class="badges-row">
       <span class="badge badge-dark">Texte</span>
   </div>

   Couleurs : badge-light | badge-white | badge-dark | badge-rouge | badge-outline
   Tailles  : badge-xs | badge-sm | badge-lg
   Rangée   : badges-serres (écart réduit) | badges-une-ligne (pas de retour à la ligne sur ordinateur)
   Icônes Phosphor possibles : <i class="ph ph-nom"></i>
   ═══════════════════════════════════════════════════════════════════════════ */

body .badges-row {
    display: flex !important; flex-wrap: wrap !important; gap: 10px !important;
    align-items: center !important; justify-content: flex-start !important;
    margin: 0 !important; padding: 0 !important;
}
body .badges-row.badges-row-center { justify-content: center !important; }

body .badge {
    display: inline-flex !important; align-items: center !important; gap: 10px;
    padding: 10px 16px !important; margin: 0 !important;
    border-radius: 2px !important;
    font-family: var(--dv-font-titre) !important;
    font-size: 13px !important; font-weight: 500 !important;
    letter-spacing: 0.04em !important; line-height: 1.2 !important;
    width: auto !important;
}
body .badge i.ph { font-size: 18px !important; }

body .badge-light   { background: var(--dv-nuage) !important; color: var(--dv-anthracite) !important; }
body .badge-white   { background: #fff !important; color: var(--dv-anthracite) !important; border: 1px solid var(--dv-trait) !important; }
body .badge-dark    { background: var(--dv-anthracite) !important; color: #fff !important; }
body .badge-rouge   { background: var(--dv-rouge) !important; color: #fff !important; }
body .badge-outline { background: transparent !important; color: var(--dv-anthracite) !important; border: 1.5px solid var(--dv-anthracite) !important; }

body .badge-light i.ph, body .badge-white i.ph, body .badge-outline i.ph { color: var(--dv-rouge) !important; }
body .badge-dark i.ph, body .badge-rouge i.ph { color: #fff !important; }

body .badge.badge-sm { padding: 6px 12px !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; }
/* Badges compacts : plus petits, casse normale, pour tenir sur une ligne dans une demi-colonne */
body .badge.badge-xs {
    padding: 6px 10px !important; gap: 6px;
    font-size: 12px !important; letter-spacing: 0.01em !important;
    text-transform: none !important; white-space: nowrap;
}
body .badges-row.badges-serres { gap: 6px !important; }
/* Force une seule ligne sur ordinateur (retour à la ligne autorisé sur mobile) */
@media (min-width: 768px) {
    body .badges-row.badges-une-ligne { flex-wrap: nowrap !important; }
}
body .badge.badge-lg { padding: 14px 22px !important; font-size: 15px !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   8. BADGES « CONCEPT ET BREVET FRANÇAIS »
   Usage : <span class="dv-fr dv-fr-simple">Concept et brevet français</span>

   Styles  : dv-fr-simple (picto drapeau + texte) | dv-fr-1 à dv-fr-5
   Tailles : dv-fr-sm | (normale, sans classe) | dv-fr-lg | dv-fr-xl
   Tout est en « em » : la taille change le badge entier d'un coup.
   Une fois le style choisi, supprimer les autres.
   ═══════════════════════════════════════════════════════════════════════════ */

.dv-fr {
    display: inline-flex; align-items: center; gap: 0.7em;
    font-family: var(--dv-font-titre);
    font-size: 12px; font-weight: 600; line-height: 1;
    letter-spacing: 0.1em; text-transform: uppercase;
    white-space: nowrap; text-decoration: none;
}
.dv-fr.dv-fr-sm { font-size: 10.5px; }
.dv-fr.dv-fr-lg { font-size: 13.5px; }
.dv-fr.dv-fr-xl { font-size: 15px; }

/* Drapeau réutilisé */
.dv-fr-simple::before, .dv-fr-2::before, .dv-fr-3::before {
    content: ""; flex: none;
    width: 1.6em; height: 1.1em;
    background: linear-gradient(90deg,
        var(--dv-fr-bleu) 0 33.33%, #fff 33.33% 66.66%, var(--dv-fr-rouge) 66.66% 100%);
    box-shadow: 0 0 0 1px rgba(35,40,43,0.2);
    border-radius: 1px;
}

/* ── SIMPLE — picto drapeau + texte, sans fond ── */
.dv-fr-simple {
    color: inherit;
    font-weight: 500; letter-spacing: 0.02em; text-transform: none;
    font-size: 15px;
}
.dv-fr-simple.dv-fr-sm { font-size: 13px; }
.dv-fr-simple.dv-fr-lg { font-size: 17px; }
.dv-fr-simple.dv-fr-xl { font-size: 19px; }
.dv-fr-simple::before { width: 1.35em; height: 0.95em; }
/* Variante simple encadrée */
.dv-fr-simple.dv-fr-cadre {
    padding: 0.55em 0.9em; border: 1px solid currentColor; border-radius: 2px;
}

/* ── 1. BANDE TRICOLORE ── */
.dv-fr-1 {
    background: var(--dv-anthracite); color: #fff;
    padding: 0.95em 1.3em 0.95em 0; gap: 1.1em; border-radius: 2px;
    box-shadow: 0 0.4em 1.4em rgba(17,21,23,0.22);
}
.dv-fr-1::before {
    content: ""; align-self: stretch; width: 1.3em; margin: -0.95em 0;
    border-radius: 2px 0 0 2px;
    background: linear-gradient(90deg,
        var(--dv-fr-bleu) 0 33.33%, #fff 33.33% 66.66%, var(--dv-fr-rouge) 66.66% 100%);
}

/* ── 2. CACHET ── */
.dv-fr-2 {
    color: var(--dv-rouge); background: #fff;
    border: 2px solid var(--dv-rouge); border-radius: 2px;
    padding: 0.85em 1.3em;
    outline: 1px solid var(--dv-rouge); outline-offset: 3px;
}

/* ── 3. ÉTIQUETTE ── */
.dv-fr-3 {
    background: var(--dv-rouge); color: #fff;
    padding: 1em 2.5em 1em 1.3em;
    clip-path: polygon(0 0, calc(100% - 1.15em) 0, 100% 50%, calc(100% - 1.15em) 100%, 0 100%);
}
.dv-fr-3::before { box-shadow: 0 0 0 1.5px #fff; }

/* ── 4. SOULIGNÉ TRICOLORE ── */
.dv-fr-4 {
    position: relative; background: #fff; color: var(--dv-anthracite);
    padding: 1em 1.4em 1.15em; border: 1px solid var(--dv-trait);
    box-shadow: 0 0.5em 1.6em rgba(35,40,43,0.1);
}
.dv-fr-4::after {
    content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 0.35em;
    background: linear-gradient(90deg,
        var(--dv-fr-bleu) 0 33.33%, #fff 33.33% 66.66%, var(--dv-fr-rouge) 66.66% 100%);
}

/* ── 5. DOUBLE BLOC FR ── */
.dv-fr-5 {
    background: var(--dv-anthracite); color: #fff;
    padding: 0 1.3em 0 0; gap: 1.1em; border-radius: 2px; overflow: hidden;
    box-shadow: 0 0.4em 1.4em rgba(17,21,23,0.22);
}
.dv-fr-5::before {
    content: "FR"; display: flex; align-items: center; align-self: stretch;
    padding: 1em; background: var(--dv-rouge); color: #fff;
    font-weight: 700; letter-spacing: 0.08em;
}

/* Fond sombre : le cachet passe en blanc */
.et_pb_bg_layout_dark .dv-fr-2, .dv-sombre .dv-fr-2 {
    background: transparent; color: #fff; border-color: #fff; outline-color: #fff;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8 bis. MODULES DIVI — BLURB ICÔNE À GAUCHE
   Classe « dv-blurb-ligne » sur le module Blurb, OU sur la colonne / la section
   qui contient les blurbs (tous les blurbs à l'intérieur sont alors corrigés).
   Écart icône / texte : modifier --blurb-ecart.
   ═══════════════════════════════════════════════════════════════════════════ */

body .dv-blurb-ligne { --blurb-ecart: 14px; }

body .dv-blurb-ligne.et_pb_blurb .et_pb_blurb_content,
body .dv-blurb-ligne .et_pb_blurb .et_pb_blurb_content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--blurb-ecart, 14px) !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Colonne de l'icône : largeur = taille réelle de l'icône */
body .dv-blurb-ligne.et_pb_blurb .et_pb_main_blurb_image,
body .dv-blurb-ligne .et_pb_blurb .et_pb_main_blurb_image {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}
body .dv-blurb-ligne .et_pb_main_blurb_image .et_pb_image_wrap,
body .dv-blurb-ligne .et_pb_main_blurb_image .et-pb-icon {
    display: block !important;
    margin: 0 !important;
}

/* Texte : collé à l'icône */
body .dv-blurb-ligne.et_pb_blurb .et_pb_blurb_container,
body .dv-blurb-ligne .et_pb_blurb .et_pb_blurb_container {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
body .dv-blurb-ligne .et_pb_blurb .et_pb_module_header,
body .dv-blurb-ligne.et_pb_blurb .et_pb_module_header,
body .dv-blurb-ligne .et_pb_blurb_description,
body .dv-blurb-ligne .et_pb_blurb_description p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Variante : icône calée en haut (texte sur plusieurs lignes) */
body .dv-blurb-haut.et_pb_blurb .et_pb_blurb_content,
body .dv-blurb-haut .et_pb_blurb .et_pb_blurb_content { align-items: flex-start !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   9. ONGLETS DIVI
   ═══════════════════════════════════════════════════════════════════════════ */

.et_pb_tabs { border: none !important; background: transparent !important; }
.et_pb_tabs .et_pb_tabs_controls {
    display: flex !important; gap: 4px;
    border-bottom: 1px solid var(--dv-trait) !important;
    background: transparent !important; padding: 0 !important;
}
.et_pb_tabs .et_pb_tabs_controls li {
    padding: 12px 22px !important;
    font-family: var(--dv-font-titre); font-size: 14px !important; font-weight: 500 !important;
    color: var(--dv-gris) !important; cursor: pointer;
    border: none !important; border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important; background: transparent !important;
    transition: color .2s, border-color .2s;
}
.et_pb_tabs .et_pb_tabs_controls li a { color: inherit !important; padding: 0 !important; background: transparent !important; }
.et_pb_tabs .et_pb_tabs_controls li:hover { color: var(--dv-anthracite) !important; }
.et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active {
    color: var(--dv-anthracite) !important; border-bottom-color: var(--dv-rouge) !important;
}
.et_pb_tabs .et_pb_all_tabs { border: none !important; padding: 28px 0 0 !important; background: transparent !important; }
.et_pb_tabs .et_pb_tab { padding: 0 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   10. GRAVITY FORMS — FORMULAIRE DE CONTACT
   S'applique à tous les formulaires du site (un seul prévu).
   Fond sombre : ajouter la classe « dv-sombre » à la section ou au module.
   ═══════════════════════════════════════════════════════════════════════════ */

body .gform_wrapper {
    background: transparent !important; padding: 0 !important;
    border: none !important; box-shadow: none !important; margin: 0 !important;
    font-family: var(--dv-font-texte);
}
body .gform_wrapper .gform_fields { row-gap: 18px !important; column-gap: 20px !important; }
body .gform_wrapper .gfield { margin-bottom: 0 !important; }

/* Titres de section du formulaire */
body .gform_wrapper .gsection { border-bottom: 1px solid var(--dv-trait) !important; padding: 0 0 10px !important; margin: 10px 0 4px !important; }
body .gform_wrapper .gsection_title {
    font-family: var(--dv-font-titre) !important; font-size: 13px !important; font-weight: 500 !important;
    letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--dv-acier) !important; margin: 0 !important;
}

/* Libellés */
body .gform_wrapper .gfield_label,
body .gform_wrapper legend.gfield_label {
    font-family: var(--dv-font-titre) !important; font-weight: 500 !important;
    font-size: 14px !important; color: var(--dv-anthracite) !important;
    margin-bottom: 6px !important; display: block !important;
}
body .gform_wrapper .ginput_complex label {
    font-size: 12px !important; color: var(--dv-gris) !important; margin-top: 4px !important;
}
body .gform_wrapper .gfield_required,
body .gform_wrapper .gfield_required_asterisk,
body .gform_wrapper .gfield_required_text {
    color: var(--dv-rouge) !important; font-style: normal !important; font-size: 12px !important;
}

/* Champs */
body .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=hidden]),
body .gform_wrapper textarea,
body .gform_wrapper select {
    background: var(--dv-nuage) !important;
    border: 1px solid var(--dv-trait) !important;
    border-radius: var(--dv-radius) !important;
    padding: 12px 14px !important; min-height: 48px !important;
    font-family: var(--dv-font-texte) !important; font-size: 16px !important; line-height: 1.4 !important;
    color: var(--dv-anthracite) !important; width: 100% !important;
    box-shadow: none !important;
    transition: border-color .2s, background-color .2s, box-shadow .2s !important;
}
body .gform_wrapper textarea { min-height: 150px !important; resize: vertical !important; }
body .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):focus,
body .gform_wrapper textarea:focus,
body .gform_wrapper select:focus {
    background: #fff !important; border-color: var(--dv-anthracite) !important;
    outline: none !important; box-shadow: 0 0 0 3px rgba(35,40,43,0.1) !important;
}
body .gform_wrapper input::placeholder,
body .gform_wrapper textarea::placeholder { color: var(--dv-gris-clair) !important; }

/* Liste déroulante (« Objet de votre demande ») */
body .gform_wrapper select {
    appearance: none !important; -webkit-appearance: none !important; cursor: pointer !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323282B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important; background-position: right 14px center !important;
    background-size: 16px !important; padding-right: 42px !important;
}

/* Cases à cocher, boutons radio, consentement RGPD */
body .gform_wrapper input[type="checkbox"],
body .gform_wrapper input[type="radio"] {
    accent-color: var(--dv-rouge) !important; width: 16px !important; height: 16px !important;
    min-width: 16px !important; margin: 0 8px 0 0 !important; cursor: pointer !important;
}
body .gform_wrapper .ginput_container_consent { display: flex !important; align-items: flex-start !important; gap: 10px !important; }
body .gform_wrapper .ginput_container_consent input[type="checkbox"] { margin: 4px 0 0 !important; flex-shrink: 0 !important; }
body .gform_wrapper .gfield_consent_label,
body .gform_wrapper .gfield_checkbox label,
body .gform_wrapper .gfield_radio label { font-size: 14px !important; color: var(--dv-texte) !important; line-height: 1.55 !important; }
body .gform_wrapper .gfield_description,
body .gform_wrapper .gfield_consent_description {
    font-size: 13px !important; color: var(--dv-gris) !important; line-height: 1.55 !important;
    border: none !important; padding: 6px 0 0 !important; max-height: none !important; overflow: visible !important;
}
body .gform_wrapper .gfield_description a,
body .gform_wrapper .gfield_consent_description a { color: var(--dv-anthracite) !important; text-decoration: underline !important; }

/* Erreurs */
body .gform_wrapper .gfield_error input:not([type=checkbox]):not([type=radio]),
body .gform_wrapper .gfield_error textarea,
body .gform_wrapper .gfield_error select { border-color: var(--dv-rouge) !important; background: var(--dv-rouge-pale) !important; }
body .gform_wrapper .gfield_validation_message,
body .gform_wrapper .validation_message {
    background: transparent !important; border: none !important;
    padding: 4px 0 0 !important; color: var(--dv-rouge) !important; font-size: 13px !important;
}
body .gform_wrapper .gform_validation_errors {
    border-radius: var(--dv-radius) !important; border: 1px solid var(--dv-rouge) !important;
    background: var(--dv-rouge-pale) !important; box-shadow: none !important;
}

/* Bouton Envoyer (balise button et input) */
body .gform_wrapper.gravity-theme .gform_footer,
body .gform_wrapper.gravity-theme .gform-footer,
body .gform_wrapper .gform_footer,
body .gform_wrapper .gform-footer {
    margin-top: 24px !important; padding-top: 0 !important;
    align-items: flex-start !important; justify-content: flex-start !important;
}
body .gform_wrapper .gform_footer button.gform_button,
body .gform_wrapper .gform-footer button.gform_button,
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform-footer input[type="submit"] {
    appearance: none !important; -webkit-appearance: none !important;
    background: var(--dv-rouge) !important; color: #fff !important;
    font-family: var(--dv-font-titre) !important; font-size: 16px !important; font-weight: 500 !important;
    line-height: 1.2 !important; letter-spacing: 0.02em !important;
    padding: 15px 34px !important; min-width: 200px !important; width: auto !important;
    border: none !important; border-radius: var(--dv-radius) !important;
    box-shadow: none !important; cursor: pointer !important; text-align: center !important;
    transition: background-color .2s !important;
}
body .gform_wrapper .gform_footer button.gform_button:hover,
body .gform_wrapper .gform-footer button.gform_button:hover,
body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform-footer input[type="submit"]:hover { background: var(--dv-rouge-fonce) !important; }

/* Message de confirmation */
body .gform_confirmation_message {
    background: var(--dv-nuage) !important;
    border-left: 4px solid var(--dv-rouge) !important;
    border-radius: 0 var(--dv-radius) var(--dv-radius) 0 !important;
    padding: 24px 28px !important; margin: 1rem 0 !important;
    font-family: var(--dv-font-texte); font-size: 16px !important; color: var(--dv-anthracite) !important;
}

/* ── Variante fond sombre : classe « dv-sombre » sur la section ou le module ── */
.dv-sombre .gform_wrapper .gfield_label,
.dv-sombre .gform_wrapper legend.gfield_label { color: #fff !important; }
.dv-sombre .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=hidden]),
.dv-sombre .gform_wrapper textarea,
.dv-sombre .gform_wrapper select {
    background-color: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.18) !important; color: #fff !important;
}
.dv-sombre .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):focus,
.dv-sombre .gform_wrapper textarea:focus,
.dv-sombre .gform_wrapper select:focus {
    background-color: rgba(255,255,255,0.1) !important; border-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.12) !important;
}
.dv-sombre .gform_wrapper select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}
.dv-sombre .gform_wrapper select option { color: var(--dv-anthracite) !important; background: #fff !important; }
.dv-sombre .gform_wrapper input::placeholder,
.dv-sombre .gform_wrapper textarea::placeholder { color: rgba(255,255,255,0.35) !important; }
.dv-sombre .gform_wrapper .gfield_consent_label,
.dv-sombre .gform_wrapper .gfield_checkbox label,
.dv-sombre .gform_wrapper .gfield_radio label { color: rgba(255,255,255,0.85) !important; }
.dv-sombre .gform_wrapper .gfield_description,
.dv-sombre .gform_wrapper .gfield_consent_description { color: rgba(255,255,255,0.55) !important; }
.dv-sombre .gform_wrapper .gfield_description a,
.dv-sombre .gform_wrapper .gfield_consent_description a { color: #fff !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   11. FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

#footer-info, #footer-info a { font-weight: 400; color: var(--dv-gris-clair); }
#footer-info a:hover { color: #fff; }


/* ═══════════════════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    body .badges-row { gap: 8px !important; }
    .dv-fr.dv-fr-xl { font-size: 13.5px; }
    .dv-fr-simple.dv-fr-xl { font-size: 17px; }

    .et_pb_tabs .et_pb_tabs_controls { flex-wrap: wrap; }
    .et_pb_tabs .et_pb_tabs_controls li { padding: 10px 14px !important; }

    body .gform_wrapper .gform_footer button.gform_button,
    body .gform_wrapper .gform-footer button.gform_button,
    body .gform_wrapper .gform_footer input[type="submit"] { width: 100% !important; min-width: 0 !important; }
}

@media (max-width: 480px) {
    body .badges-row { flex-direction: column !important; align-items: flex-start !important; }
    body .badges-row.badges-row-center { align-items: center !important; }
    .dv-fr { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SÉLECTEUR DE LANGUE WPML (menu principal)
   Réglage WPML : nom natif uniquement, sans drapeau, sans la langue courante
   ═══════════════════════════════════════════════════════════════════════════ */
.wpml-ls-flag { width: 18px !important; height: auto !important; }
/* Drapeau du menu principal : plus grand, centré sur la ligne du texte */
#top-menu li.wpml-ls-item .wpml-ls-flag {
    width: 26px !important;
    height: auto !important;
    vertical-align: middle;
    position: relative; top: -1px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(35,40,43,0.12);
}
#top-menu li.wpml-ls-item > a {
    font-size: 14px;
    color: var(--dv-gris) !important;
}
#top-menu li.wpml-ls-item > a:hover { color: var(--dv-anthracite) !important; }
@media (min-width: 981px) {
    #top-menu li.wpml-ls-item { margin-left: 6px; }
}
.dv-langue .wpml-ls-flag { width: 26px !important; height: auto !important; border-radius: 2px; box-shadow: 0 0 0 1px rgba(35,40,43,0.12); }
.dv-langue .wpml-ls { padding: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   GRAVITY FORMS : message de confirmation
   ═══════════════════════════════════════════════════════════════════════════ */
/* L'ancre du formulaire s'arrête sous l'en-tête fixe */
.gform_anchor,
.gform_confirmation_wrapper { scroll-margin-top: 130px; }

.gform_confirmation_message {
    padding: 28px 32px;
    background: var(--dv-nuage);
    border-left: 3px solid var(--dv-rouge);
    border-radius: var(--dv-radius);
    font-family: var(--dv-font-texte);
    font-size: 17px;
    line-height: 1.6;
    color: var(--dv-texte);
}
.gform_confirmation_message strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--dv-font-titre);
    font-weight: 500;
    font-size: 20px;
    color: var(--dv-anthracite);
}

/* Gravity Forms : message d'erreur de validation
   (c'est un <h2> : sans cette règle, il reprend la taille des titres du site) */
body .gform_wrapper .gform_validation_errors h2.gform_submission_error,
body .gform_wrapper h2.gform_submission_error {
    font-family: var(--dv-font-texte) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}
body .gform_wrapper .gform_validation_errors ol,
body .gform_wrapper .gform_validation_errors li,
body .gform_wrapper .gform_validation_errors a { font-size: 15px !important; }


/* Liens externes (ouverture dans un nouvel onglet) : petite icône « sortie du site » */
a.dv-lien[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.35em;
    vertical-align: -0.05em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10 14'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10 14'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Texte réservé aux lecteurs d'écran */
.dv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }