/* ==================================================================
DC IMMO — CSS projet
==================================================================
Tout le CSS personnalisé du site va ici.
Règle : on ne met PAS de CSS dans « Options Divi > CSS personnalisé »
ni dans la personnalisation de chaque module. Ce fichier est la
source unique de vérité — versionnable, relisible, transférable.
DIRECTION ARTISTIQUE (validée le 27 août 2026)
----------------------------------------------
Registre immobilier chic : beaucoup d'air, des filets fins,
AUCUNE ombre portée, AUCUN dégradé, AUCUN angle arrondi marqué.
Palette terracotta / ivoire / encre. Titres en Newsreader (serif
éditorial), texte courant en Hanken Grotesk.
RÈGLE DE TRAVAIL IMPORTANTE
---------------------------
Ne jamais poser de couleur en dur dans les réglages d'un module
Divi. Toute couleur vient des variables ci-dessous, sinon le mode
sombre casse. Dans Divi, on pose une CLASSE CSS sur le module
(champ « Avancé > Classe CSS ») et c'est ce fichier qui l'habille.
================================================================== */
/* ------------------------------------------------------------------
1. VARIABLES — charte graphique DC Immo
------------------------------------------------------------------
Changer une couleur ici la change partout sur le site.
------------------------------------------------------------------ */
:root {
/* Fonds */
--dc-fond: #FAF9F5; /* ivoire clair, fond général */
--dc-fond-alt: #F0EEE6; /* ivoire soutenu, sections calmes */
--dc-fond-3: #E8E5DA; /* réserves d'image */
/* Filets — le site sépare par des traits, pas par des cartes */
--dc-filet: #E0DCCF;
--dc-filet-fort: #CFC9B8;
/* Textes */
--dc-texte: #141413; /* encre */
--dc-texte-2: #6B6862; /* texte secondaire */
--dc-texte-3: #949086; /* mentions, surtitres */
/* Accent */
--dc-accent: #D97757; /* terracotta — aplats et filets */
--dc-accent-txt: #B0522F; /* même teinte, assombrie pour le
texte : le terracotta pur ne
passe pas le contraste sur ivoire */
--dc-accent-doux: #F3E4DC;
/* Neutres chauds — statuts des programmes */
--dc-manila: #EBDBBC;
--dc-kraft: #D4A27F;
/* Boutons posés sur un visuel (hero, chapeaux).
Le fond est une photo sombre dans les deux thèmes, mais le bouton
suit quand même le mode : c'est ce qui rend la bascule visible
en haut de page. Voir la reprise en mode sombre plus bas. */
--dc-vis-btn-fond: #F0EEE6;
--dc-vis-btn-txte: #141413;
--dc-vis-btn-bord: #F0EEE6;
/* Blocs encre — pied de page et sections appuyées.
Ils restent sombres dans les deux thèmes : voir plus bas. */
--dc-inv-fond: #141413;
--dc-inv-txte: #F0EEE6;
--dc-inv-2: #9C978C;
--dc-inv-filet: rgba(240, 238, 230, .16);
/* Typographie */
--dc-titre: "Newsreader", "Iowan Old Style", Georgia, serif;
--dc-corps: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
/* Rayons — quasi nuls : la DA est faite d'angles nets */
--dc-radius: 1px;
/* Rythme */
--dc-espace: 24px;
--dc-rythme: clamp(72px, 9vw, 136px);
/* ---- Reprise des variables du Customizer Divi ----
Divi 5 pilote ses couleurs par des variables --gcid-*, définies
sur :root dans son CSS dynamique. Comme ce fichier est chargé
après le sien, les redéfinir ici suffit : les titres, le texte
et les liens de tous les modules Divi suivent la charte, sans
avoir à batailler à coups de !important.
Le Customizer contenait une charte antérieure (bleu nuit #1b2a41,
orange #a85a2a) qui se battait avec celle-ci. Elle est neutralisée
ici, mais il reste propre d'aller la remettre à zéro dans
Apparence > Personnaliser. */
--gcid-primary-color: var(--dc-accent-txt);
--gcid-secondary-color: var(--dc-accent-txt);
--gcid-heading-color: var(--dc-texte);
--gcid-body-color: var(--dc-texte);
--gcid-link-color: var(--dc-accent-txt);
}
/* ------------------------------------------------------------------
1 bis. MODE SOMBRE
------------------------------------------------------------------
Le mode sombre ne suit PAS la préférence du système.
Divi peint ses propres fonds et couleurs de texte un peu partout.
Suivre prefers-color-scheme donnait un site à moitié sombre : le
header basculait, le corps restait blanc. Le mode sombre ne
s'active donc que sur clic explicite du visiteur, et ce choix est
mémorisé dans son navigateur. C'est le seul état qu'on maîtrise
de bout en bout.
POUR DÉSACTIVER LE MODE SOMBRE : commenter ce bloc et le suivant,
puis les deux add_action de la section BASCULE dans functions.php.
------------------------------------------------------------------ */
:root[data-theme="dark"] {
--dc-fond: #191817;
--dc-fond-alt: #201F1D;
--dc-fond-3: #292825;
--dc-filet: #33322E;
--dc-filet-fort: #4A4842;
--dc-texte: #F0EEE6;
--dc-texte-2: #A5A099;
--dc-texte-3: #7D7973;
--dc-accent: #E29278;
--dc-accent-txt: #E8A78F;
--dc-accent-doux: #2E2622;
--dc-manila: #6B5F49;
--dc-kraft: #8A6A50;
/* Le bouton s'inverse : encre sur la photo, texte ivoire. Un encre
plein se noierait dans le voile, qui est déjà de l'encre — d'où
la bordure claire, seule façon de le détacher du fond. */
--dc-vis-btn-fond: #141413;
--dc-vis-btn-txte: #F0EEE6;
--dc-vis-btn-bord: rgba(240, 238, 230, .55);
/* Le bloc encre reste encre. Il descend juste sous le fond de page
(#191817) pour rester lisible comme un bloc distinct. */
--dc-inv-fond: #0F0F0E;
--dc-inv-txte: #F0EEE6;
--dc-inv-2: #948E85;
--dc-inv-filet: rgba(240, 238, 230, .14);
}
/* Divi peint ses fonds en dur. En mode sombre, il faut les reprendre. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] #page-container,
:root[data-theme="dark"] #et-main-area,
:root[data-theme="dark"] #main-content,
:root[data-theme="dark"] .et_pb_section,
:root[data-theme="dark"] #sidebar,
:root[data-theme="dark"] .et_pb_widget,
:root[data-theme="dark"] article {
background-color: var(--dc-fond);
color: var(--dc-texte);
}
:root[data-theme="dark"] .et_pb_section.dc-inverse,
:root[data-theme="dark"] #main-footer,
:root[data-theme="dark"] #footer-bottom {
background-color: var(--dc-inv-fond);
}
/* ------------------------------------------------------------------
2. BASE
------------------------------------------------------------------ */
html body,
html #page-container,
html #et-main-area {
background-color: var(--dc-fond);
}
body {
font-family: var(--dc-corps);
font-size: 16.5px;
font-weight: 400;
line-height: 1.68;
letter-spacing: .002em;
color: var(--dc-texte);
-webkit-font-smoothing: antialiased;
}
/* Divi impose sa propre pile de polices sur ces sélecteurs. */
body,
.et_pb_module,
.et_pb_text,
input,
textarea,
select,
button {
font-family: var(--dc-corps);
}
/* Divi n'injecte plus son CSS par mais EN LIGNE dans le ,
donc APRÈS ce fichier. À spécificité égale, c'est lui qui gagnait :
« h1,h2,h3,h4,h5,h6 { color:#333; padding-bottom:10px; line-height:1em } ».
On préfixe donc par « body » pour repasser devant, sans !important. */
body h1, body h2, body h3, body h4, body h5, body h6,
body .et_pb_module h1,
body .et_pb_module h2,
body .et_pb_module h3,
body .et_pb_module h4,
body .et_pb_text h1,
body .et_pb_text h2,
body .et_pb_text h3 {
font-family: var(--dc-titre);
font-weight: 300;
line-height: 1.1;
letter-spacing: -.018em;
text-wrap: balance;
color: var(--dc-texte);
padding-bottom: 0;
}
/* Le Customizer Divi impose des tailles fixes (h1 à 62px, h3 à 45px)
avec des sélecteurs plus longs que « h1 ». On les reprend un à un. */
body h1,
body h1.et_pb_contact_main_title,
body .et_pb_title_container h1 { font-size: clamp(38px, 5.2vw, 68px); letter-spacing: -.03em; }
body h2, body .et_pb_module h2 { font-size: clamp(32px, 4.2vw, 52px); }
body h3, body .et_pb_module h3 { font-size: clamp(21px, 2.2vw, 27px); }
body h4, body .et_pb_module h4 { font-size: 19px; }
body h5, body h6 { font-size: 16px; }
/* Le corps de texte subit le même sort : Divi le repose en ligne. */
body, body .et_pb_text, body .et_pb_module {
font-family: var(--dc-corps);
color: var(--dc-texte);
}
body .et_pb_text p, body .et_pb_module p { color: inherit; }
/* Titres de widgets : ce sont des repères, pas des titres de contenu.
Sans cette règle, ils héritent des 45px du Customizer. */
.widgettitle,
#sidebar .widgettitle,
#sidebar h2, #sidebar h3, #sidebar h4,
.et_pb_widget h1, .et_pb_widget h2,
.et_pb_widget h3, .et_pb_widget h4 {
font-family: var(--dc-corps);
font-size: 12px !important;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dc-texte-3);
line-height: 1.4;
}
p { color: inherit; }
a { color: var(--dc-texte); }
a:hover { color: var(--dc-accent-txt); }
/* Tout élément cliquable doit avoir un curseur main. */
button,
[role="button"],
input[type="submit"],
input[type="button"],
.et_pb_button,
label[for],
summary {
cursor: pointer;
}
:focus-visible {
outline: 2px solid var(--dc-accent);
outline-offset: 3px;
}
/* Nombres : police de titre, chasse tabulaire. Jamais de mono. */
.dc-num {
font-family: var(--dc-titre);
font-variant-numeric: tabular-nums;
font-weight: 300;
}
/* ------------------------------------------------------------------
3. SURCHARGES DIVI
------------------------------------------------------------------
Divi habille ses modules par défaut. On le ramène à la DA.
------------------------------------------------------------------ */
/* --- Boutons ---------------------------------------------------
POURQUOI DES !important ICI
Divi n'injecte plus son CSS par mais en ligne dans le ,
donc APRÈS ce fichier. Et le Customizer cible les boutons avec :
body.et_pb_button_helper_class .et_pb_module.et_pb_button { color:#fff }
soit une spécificité de (0,4,1). Chargé après, à spécificité
supérieure : aucune règle raisonnable ne peut le battre. Résultat
observé en ligne — texte blanc sur bouton ivoire dans le hero,
texte blanc sur bouton à contour, et fond bleu nuit au lieu d'encre.
Les trois propriétés qui portent le contraste — fond, bordure,
texte — sont donc forcées. Le reste (taille, graisse, transitions)
n'est pas contesté par Divi et n'en a pas besoin.
Cinq contextes, cinq paires vérifiées :
1. section claire encre / ivoire 18:1
2. section claire · survol terracotta sombre / ivoire 6,7:1
3. bouton à contour ivoire / encre 18:1
4. section encre s'inverse avec le thème, les deux sens OK
5. hero sur photo ivoire / encre 17:1
---------------------------------------------------------------- */
/* 1 — Bouton principal, sections claires. */
body .et_pb_button,
body.et_pb_button_helper_class .et_pb_module.et_pb_button,
body .et_pb_contact_submit {
padding: 15px 30px !important;
border: 1px solid var(--dc-texte) !important;
border-radius: var(--dc-radius) !important;
background-color: var(--dc-texte) !important;
color: var(--dc-fond) !important;
font-family: var(--dc-corps);
font-size: 14px;
font-weight: 500;
letter-spacing: .04em;
transition:
background-color .42s cubic-bezier(.22, .61, .36, 1),
border-color .42s cubic-bezier(.22, .61, .36, 1),
color .42s cubic-bezier(.22, .61, .36, 1),
transform .42s cubic-bezier(.22, .61, .36, 1) !important;
}
/* Au survol : le terracotta SOMBRE, pas le vif. On reste dans la même
plage de valeur que l'encre, donc le passage se lit comme un
réchauffement plutôt que comme un clignotement. Le texte ne bouge
pas — un seul paramètre change à la fois. */
body .et_pb_button:hover,
body.et_pb_button_helper_class .et_pb_module.et_pb_button:hover,
body .et_pb_contact_submit:hover {
background-color: var(--dc-accent-txt) !important;
border-color: var(--dc-accent-txt) !important;
color: var(--dc-fond) !important;
transform: translateY(-1px);
}
body .et_pb_button:active { transform: translateY(0); }
/* 2 — Bouton secondaire. Il ne doit jamais rivaliser avec le
principal : au survol, seule la bordure s'affirme et un fond très
léger apparaît. Aucun changement de teinte. */
body .dc-btn-ligne.et_pb_button,
body.et_pb_button_helper_class .dc-btn-ligne.et_pb_module.et_pb_button {
background-color: transparent !important;
border-color: var(--dc-filet-fort) !important;
color: var(--dc-texte) !important;
}
body .dc-btn-ligne.et_pb_button:hover,
body.et_pb_button_helper_class .dc-btn-ligne.et_pb_module.et_pb_button:hover {
background-color: var(--dc-fond-alt) !important;
border-color: var(--dc-texte) !important;
color: var(--dc-texte) !important;
}
/* 3 — Section encre. Elle s'inverse avec le thème : fond sombre en
clair, fond ivoire en sombre. Un bouton terracotta y était lisible
dans un cas et se noyait dans l'autre. On prend le contrepied du
fond, ce qui est juste des deux côtés. */
body .dc-inverse .et_pb_button,
body.et_pb_button_helper_class .dc-inverse .et_pb_module.et_pb_button {
background-color: var(--dc-inv-txte) !important;
border-color: var(--dc-inv-txte) !important;
color: var(--dc-inv-fond) !important;
}
body .dc-inverse .et_pb_button:hover,
body.et_pb_button_helper_class .dc-inverse .et_pb_module.et_pb_button:hover {
background-color: var(--dc-accent) !important;
border-color: var(--dc-accent) !important;
/* L'accent reste clair dans les deux thèmes : texte sombre. */
color: #141413 !important;
}
body .dc-inverse .dc-btn-ligne.et_pb_button {
background-color: transparent !important;
border-color: var(--dc-inv-filet) !important;
color: var(--dc-inv-txte) !important;
}
body .dc-inverse .dc-btn-ligne.et_pb_button:hover {
background-color: transparent !important;
border-color: var(--dc-inv-txte) !important;
color: var(--dc-inv-txte) !important;
}
/* 4 — Hero. Fond photo sombre dans les deux thèmes, donc couleurs en
dur. L'encre y serait invisible : le bouton principal passe en
ivoire, avec un texte encre. */
body .dc-hero .et_pb_button,
body .dc-chapeau .et_pb_button,
body.et_pb_button_helper_class .dc-hero .et_pb_module.et_pb_button,
body.et_pb_button_helper_class .dc-chapeau .et_pb_module.et_pb_button {
background-color: var(--dc-vis-btn-fond) !important;
border-color: var(--dc-vis-btn-bord) !important;
color: var(--dc-vis-btn-txte) !important;
}
/* Au survol, l'accent dans les deux thèmes : il reste assez clair
pour porter un texte encre, quel que soit le mode. */
body .dc-hero .et_pb_button:hover,
body .dc-chapeau .et_pb_button:hover,
body.et_pb_button_helper_class .dc-hero .et_pb_module.et_pb_button:hover,
body.et_pb_button_helper_class .dc-chapeau .et_pb_module.et_pb_button:hover {
background-color: var(--dc-accent) !important;
border-color: var(--dc-accent) !important;
color: #141413 !important;
}
body .dc-hero .dc-btn-ligne.et_pb_button,
body.et_pb_button_helper_class .dc-hero .dc-btn-ligne.et_pb_module.et_pb_button {
background-color: rgba(240, 238, 230, .06) !important;
border-color: rgba(240, 238, 230, .42) !important;
color: #F0EEE6 !important;
}
body .dc-hero .dc-btn-ligne.et_pb_button:hover,
body.et_pb_button_helper_class .dc-hero .dc-btn-ligne.et_pb_module.et_pb_button:hover {
background-color: rgba(240, 238, 230, .14) !important;
border-color: rgba(240, 238, 230, .82) !important;
color: #F0EEE6 !important;
}
/* La flèche que Divi ajoute au survol n'a pas sa place ici. */
body .et_pb_button::after,
body .et_pb_button::before { display: none !important; }
/* --- Sections et lignes --- */
.et_pb_section { background-color: transparent; }
.et_pb_section.dc-sect { padding-block: var(--dc-rythme); border-top: 1px solid var(--dc-filet); }
.et_pb_section.dc-sect-nu { border-top: 0; }
/* --- En-tête --- */
#main-header {
background-color: color-mix(in srgb, var(--dc-fond) 90%, transparent) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--dc-filet);
box-shadow: none !important;
transition:
background-color .45s cubic-bezier(.22, .61, .36, 1),
border-color .45s cubic-bezier(.22, .61, .36, 1),
backdrop-filter .45s cubic-bezier(.22, .61, .36, 1) !important;
}
/* ------------------------------------------------------------------
EN-TÊTE TRANSPARENT SUR LE VISUEL
Au repos, l'en-tête se pose sur la photo ou la vidéo. Au premier
défilement, Divi ajoute .et-fixed-header et le fond se remplit.
La transparence n'est activée que sur les pages qui ont un visuel
en haut : sur les mentions légales, du texte ivoire sur fond ivoire
serait invisible. C'est functions.php qui pose la classe.
------------------------------------------------------------------ */
.dc-entete-transparente #main-header:not(.et-fixed-header) {
background-color: transparent !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
/* Aucun filet : le menu doit flotter sur le visuel, pas le souligner. */
border-bottom-color: transparent !important;
}
/* Sur le visuel, tout passe en ivoire. */
.dc-entete-transparente #main-header:not(.et-fixed-header) #top-menu li a,
.dc-entete-transparente #main-header:not(.et-fixed-header) .logo_container a::after,
.dc-entete-transparente #main-header:not(.et-fixed-header) .dc-bascule,
.dc-entete-transparente #main-header:not(.et-fixed-header) #et_search_icon::before,
.dc-entete-transparente #main-header:not(.et-fixed-header) .mobile_menu_bar::before {
color: rgba(240, 238, 230, .86) !important;
}
.dc-entete-transparente #main-header:not(.et-fixed-header) #top-menu li a:hover,
.dc-entete-transparente #main-header:not(.et-fixed-header) #top-menu li.current-menu-item > a,
.dc-entete-transparente #main-header:not(.et-fixed-header) .logo_container a::after,
.dc-entete-transparente #main-header:not(.et-fixed-header) .dc-bascule:hover {
color: #F0EEE6 !important;
}
/* Le visuel passe SOUS l'en-tête : Divi réserve sinon une bande de la
hauteur du menu en haut de page. */
.dc-entete-transparente #page-container { padding-top: 0 !important; }
/* Et le contenu du visuel redescend d'autant, pour ne pas passer
derrière le menu. */
.dc-entete-transparente .dc-hero,
.dc-entete-transparente .dc-chapeau {
padding-top: clamp(150px, 15vw, 230px) !important;
}
#main-header .logo_container { padding: 0; }
/* --- Logo ---------------------------------------------------------
Divi affiche une image unique. On la remplace par le symbole
vectoriel, et le mot « DC IMMO » est posé en CSS plutôt que dans le
fichier SVG : une police web ne se charge pas dans un .svg appelé en
image, et le mot doit rester en Newsreader pour s'accorder aux
titres. Autre avantage : sa couleur suit le texte courant, donc le
mode sombre est géré sans second fichier.
------------------------------------------------------------------ */
#logo {
content: url("../img/logo-marque.svg");
width: auto !important;
height: 42px !important;
max-height: none !important;
margin: 0;
}
.logo_container a {
display: inline-flex !important;
align-items: center;
gap: 15px;
height: 100%;
text-decoration: none;
}
.logo_container a::after {
content: "DC IMMO";
font-family: var(--dc-titre);
font-size: 26px;
font-weight: 400;
letter-spacing: .07em;
line-height: 1;
color: var(--dc-texte);
white-space: nowrap;
transition: color .42s cubic-bezier(.22, .61, .36, 1);
}
/* En-tête réduit au défilement : Divi rapetisse le logo, le mot suit. */
.et-fixed-header #logo { height: 34px !important; }
.et-fixed-header .logo_container a::after { font-size: 22px; }
#top-menu li a {
font-family: var(--dc-corps);
font-size: 14.5px;
font-weight: 400;
color: var(--dc-texte-2);
padding-bottom: 10px;
transition: color .2s ease;
}
#top-menu li a:hover { color: var(--dc-texte); opacity: 1; }
#top-menu li.current-menu-item > a { color: var(--dc-texte); }
/* Trait sous l'entrée courante. Divi pousse les entrées avec un
padding-bottom de 33px (20px une fois l'en-tête réduit) : le trait
se place juste sous le texte, pas en bas de ce padding. Les entrées
à sous-menu sont exclues, leur ::after porte déjà la flèche Divi. */
#top-menu > li:not(.menu-item-has-children) > a::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 22px;
height: 1px;
background: var(--dc-accent);
transform: scaleX(0);
transition: transform .25s ease;
}
#top-menu > li:not(.menu-item-has-children) > a:hover::after,
#top-menu > li.current-menu-item > a::after { transform: scaleX(1); }
/* Sous-menus : filets, pas d'ombre. */
#top-menu li ul {
background-color: var(--dc-fond);
border: 1px solid var(--dc-filet);
border-top-width: 1px;
box-shadow: none;
}
/* --- Pied de page --- */
#main-footer { background-color: var(--dc-inv-fond); }
#footer-widgets .footer-widget h4 {
font-family: var(--dc-corps);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dc-inv-2);
}
#footer-widgets .footer-widget,
#footer-widgets .footer-widget li a { color: var(--dc-inv-txte); }
#footer-widgets .footer-widget li a:hover { color: var(--dc-accent); }
#footer-bottom {
background-color: var(--dc-inv-fond);
border-top: 1px solid var(--dc-inv-filet);
padding: 26px 0;
}
#footer-info { color: var(--dc-inv-2); font-size: 13px; }
/* --- Pied de page ---
Divi dispose ses quatre zones de widgets en flottants de largeur
égale. On repasse en grille pour donner plus de place à la colonne
de marque, et on neutralise les flottants sans quoi les deux
systèmes se superposent. */
#main-footer,
body #main-footer { background-color: var(--dc-inv-fond) !important; }
/* En mode sombre, le pied ne descend que d un cran sous le fond de
page : un filet le detache, comme partout ailleurs sur le site. */
:root[data-theme="dark"] #main-footer { border-top: 1px solid var(--dc-filet); }
/* Divi colore les widgets du pied de page selon son propre réglage de
fond, en !important. Sans ces reprises, le texte y reste noir. */
body #footer-widgets .footer-widget,
body #footer-widgets .fwidget,
body #footer-widgets p,
body #footer-widgets li,
body #footer-widgets span { color: var(--dc-inv-2) !important; }
body #footer-widgets a,
body #footer-widgets .dc-pied__nom { color: var(--dc-inv-txte) !important; }
body #footer-widgets a:hover { color: var(--dc-accent) !important; }
body #footer-widgets h2,
body #footer-widgets h3,
body #footer-widgets h4,
body #footer-widgets .widgettitle { color: var(--dc-inv-2) !important; }
body #footer-bottom,
body #footer-info,
body #footer-info a { color: var(--dc-inv-2) !important; }
/* Divi pose un fond et des bordures sur ses zones de widgets, ce qui
dessinait autant de cartes sur le fond sombre. Le pied de page ne
se compose que de texte posé sur l'encre : rien ne l'encadre. */
body #main-footer .footer-widget,
body #main-footer .fwidget,
body #main-footer .et_pb_widget,
body #main-footer .widget_block,
body #main-footer .wp-block-group,
body #footer-widgets,
body #main-footer > .container {
background: none !important;
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#footer-widgets {
padding: clamp(64px, 7vw, 100px) 0 clamp(44px, 5vw, 68px) !important;
}
#main-footer > .container {
width: 100%;
max-width: 1280px;
padding-inline: clamp(22px, 5.5vw, 84px);
}
#footer-widgets {
display: grid;
grid-template-columns: 1.7fr 1fr 1.2fr 1.1fr;
gap: clamp(30px, 4vw, 68px);
align-items: start;
}
#footer-widgets .footer-widget,
#footer-widgets .fwidget {
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
#footer-widgets .footer-widget:not(:first-child) { padding-top: 4px !important; }
/* Intitulés de colonne : des repères, pas des titres. */
#footer-widgets .footer-widget h2,
#footer-widgets .footer-widget h3,
#footer-widgets .footer-widget h4,
#footer-widgets .widgettitle {
font-family: var(--dc-corps) !important;
font-size: 11.5px !important;
font-weight: 600 !important;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dc-inv-2) !important;
line-height: 1.4;
margin: 0 0 20px !important;
padding-bottom: 0 !important;
}
#footer-widgets ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 11px;
}
#footer-widgets li {
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: none !important;
line-height: 1.5;
}
#footer-widgets li::before { display: none !important; }
#footer-widgets a {
color: var(--dc-inv-txte);
font-size: 15px;
text-decoration: none;
transition: color .42s cubic-bezier(.22, .61, .36, 1);
}
#footer-widgets a:hover { color: var(--dc-accent); }
#footer-widgets p { color: var(--dc-inv-2); font-size: 15px; }
/* Colonne de marque. */
.dc-pied__marque {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.dc-pied__marque::before {
content: url("../img/logo-marque.svg");
width: 34px;
flex: none;
line-height: 0;
}
.dc-pied__nom {
font-family: var(--dc-titre);
font-size: 24px;
font-weight: 400;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--dc-inv-txte);
}
.dc-pied__lieu {
font-size: 10px;
font-weight: 600;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--dc-inv-2);
}
.dc-pied__bl {
max-width: 34ch;
line-height: 1.62;
}
.dc-pied__filet {
width: 40px;
height: 1px;
background: var(--dc-accent);
margin: 24px 0 0;
}
/* Coordonnées : ce qui manque encore se voit. */
.dc-pied__coord { display: grid; gap: 7px; }
.dc-pied__coord .dc-vide {
color: var(--dc-accent);
font-family: var(--dc-titre);
font-style: italic;
}
.dc-pied__horaires {
margin-top: 18px !important;
padding-top: 18px;
border-top: 1px solid var(--dc-inv-filet);
font-size: 14px !important;
line-height: 1.6;
}
/* Bandeau du bas. */
#footer-bottom {
background-color: var(--dc-inv-fond) !important;
border-top: 1px solid var(--dc-inv-filet);
padding: 26px 0 !important;
}
#footer-bottom .container {
width: 100%;
max-width: 1280px;
padding-inline: clamp(22px, 5.5vw, 84px);
}
/* Divi 5 n'expose plus le filtre PHP des crédits : le texte est donc
masqué et remplacé ici. L'année vient d'une variable posée par
functions.php, pour ne pas avoir à la corriger chaque janvier. */
#footer-info {
float: none !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 1.6;
}
#footer-info::after {
content: var(--dc-credit, "DC Immo");
display: block;
font-family: var(--dc-corps);
font-size: 13px;
color: var(--dc-inv-2);
}
#footer-info a { color: var(--dc-inv-2); text-decoration: none; }
#footer-info a:hover { color: var(--dc-accent); }
#footer-bottom .et-social-icons { display: none; }
/* --- Formulaires (module de contact Divi) --- */
.et_pb_contact_form_label { display: block !important; }
.et_pb_contact_field .et_pb_contact_field_options_title,
.et_pb_contact_form_label {
font-family: var(--dc-corps);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dc-texte-3);
margin-bottom: 8px;
}
.et_pb_contact_form input,
.et_pb_contact_form textarea,
.et_pb_contact_form select,
.et_pb_contact_field input,
.et_pb_contact_field textarea {
background-color: transparent !important;
border: 0 !important;
border-bottom: 1px solid var(--dc-filet-fort) !important;
border-radius: 0 !important;
padding: 10px 0 !important;
font-family: var(--dc-corps);
font-size: 16px;
color: var(--dc-texte);
transition: border-color .22s ease;
}
.et_pb_contact_form input:focus,
.et_pb_contact_form textarea:focus {
outline: none;
border-bottom-color: var(--dc-accent) !important;
}
.et_pb_contact_form ::placeholder { color: var(--dc-texte-3); }
/* ------------------------------------------------------------------
3 bis. COULEURS DE TEXTE — reprise des réglages « fond » de Divi
------------------------------------------------------------------
Divi colore ses modules selon deux états, et il le fait avec
!important :
.et_pb_bg_layout_light h1..h6 { color:#333 !important }
.et_pb_bg_layout_dark h1..h6 { color:#fff !important }
.et_pb_bg_layout_light .et_pb_button { color:#2ea3f2 }
Un module posé sur la section encre reste « fond clair » tant qu'on
ne lui dit pas le contraire : ses titres sortent alors en #333 sur
du noir. C'est l'origine des textes illisibles et du bleu Divi.
Deux réponses, complémentaires :
1. le contenu Divi déclare background_layout="dark" sur les modules
posés sur fond sombre — c'est la voie native ;
2. les teintes sont reprises ici, pour rester sur la palette plutôt
que sur le blanc et le #333 de Divi.
Le !important est indispensable ici : on ne bat pas un !important
autrement. Il reste cantonné à cette section.
------------------------------------------------------------------ */
/* --- Sections claires --- */
.dc-sect .et_pb_module h1,
.dc-sect .et_pb_module h2,
.dc-sect .et_pb_module h3,
.dc-sect .et_pb_module h4,
.dc-chapeau .et_pb_module h1,
.dc-chapeau .et_pb_module h2 { color: var(--dc-texte) !important; }
.dc-sect .et_pb_text,
.dc-sect .et_pb_text_inner,
.dc-sect .et_pb_text p { color: var(--dc-texte); }
.dc-sect .dc-sect__i,
.dc-sect .dc-sect__i p { color: var(--dc-texte-2) !important; }
.dc-sect .dc-sur,
.dc-sect .dc-sur p { color: var(--dc-texte-3) !important; }
/* Le bleu #2ea3f2 de Divi n'existe pas dans cette charte. */
.et_pb_bg_layout_light.et_pb_module.et_pb_button,
.et_pb_bg_layout_light a,
.et_pb_text a { color: var(--dc-accent-txt); }
/* --- Section encre (dc-inverse) ---
S'inverse avec le thème : en mode sombre, le fond devient ivoire et
le texte encre. Les jetons s'en chargent. */
.dc-inverse .et_pb_module h1,
.dc-inverse .et_pb_module h2,
.dc-inverse .et_pb_module h3,
.dc-inverse .et_pb_module h4,
.dc-inverse h3 { color: var(--dc-inv-txte) !important; }
.dc-inverse .et_pb_text,
.dc-inverse .et_pb_text_inner,
.dc-inverse .et_pb_text p,
.dc-inverse p { color: var(--dc-inv-2) !important; }
.dc-inverse .dc-sur,
.dc-inverse .dc-sur p { color: var(--dc-inv-2) !important; }
.dc-inverse .et_pb_module h2 em,
.dc-inverse h2 em { color: var(--dc-accent) !important; }
/* --- Hero photo ---
Reste sombre dans les deux thèmes : une photo ne s'inverse pas.
Les couleurs sont donc posées en dur, pas par les jetons. */
.dc-hero .et_pb_module h1,
.dc-hero .et_pb_module h2,
.dc-hero h1 { color: #F0EEE6 !important; }
.dc-hero .et_pb_text,
.dc-hero .et_pb_text_inner,
.dc-hero .et_pb_text p { color: rgba(240, 238, 230, .84) !important; }
.dc-hero .dc-sur,
.dc-hero .dc-sur p { color: rgba(240, 238, 230, .70) !important; }
.dc-hero .et_pb_module h1 em,
.dc-hero h1 em { color: var(--dc-accent) !important; }
/* ------------------------------------------------------------------
4. COMPOSANTS RÉUTILISABLES
------------------------------------------------------------------
À poser dans Divi via « Avancé > Classe CSS » du module.
------------------------------------------------------------------ */
/* --- Surtitre : petites capitales espacées, précédées d'un filet --- */
.dc-sur {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--dc-corps);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--dc-texte-3);
margin-bottom: 26px;
}
.dc-sur::before {
content: "";
width: 28px;
height: 1px;
background: var(--dc-accent);
flex: none;
}
/* --- Italique de titre : la signature typographique de la maison ---
Usage : envelopper les mots à accentuer dans à l'intérieur
d'un titre, ou poser la classe sur un span. */
.dc-it,
h1 em, h2 em, h3 em {
font-style: italic;
font-weight: 300;
color: var(--dc-accent-txt);
}
/* --- Action secondaire : texte souligné, jamais de capsule --- */
.dc-lien {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--dc-corps);
font-size: 14px;
font-weight: 500;
letter-spacing: .03em;
color: var(--dc-texte);
text-decoration: none;
border-bottom: 1px solid var(--dc-accent);
padding-bottom: 4px;
transition:
gap .42s cubic-bezier(.22, .61, .36, 1),
color .42s cubic-bezier(.22, .61, .36, 1);
}
.dc-lien:hover { gap: 15px; color: var(--dc-accent-txt); }
.dc-lien::after { content: "→"; font-size: 15px; }
/* --- Statut d'un programme : un point de couleur et un mot --- */
.dc-statut {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--dc-corps);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--dc-texte-2);
}
.dc-statut::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex: none;
}
.dc-statut--vente { color: var(--dc-accent-txt); }
.dc-statut--travaux { color: var(--dc-kraft); }
.dc-statut--etude { color: var(--dc-texte-3); }
.dc-statut--etude::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }
/* --- Fiche technique : lignes séparées par des filets --- */
.dc-fiche { margin-top: 24px; border-top: 1px solid var(--dc-filet); }
.dc-fiche > div,
.dc-fiche tr {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 11px 0;
border-bottom: 1px solid var(--dc-filet);
font-size: 14.5px;
}
.dc-fiche dt,
.dc-fiche th {
margin: 0;
font-weight: 400;
color: var(--dc-texte-3);
font-size: 13px;
letter-spacing: .04em;
text-align: left;
}
.dc-fiche dd,
.dc-fiche td { margin: 0; text-align: right; color: var(--dc-texte); }
/* --- Repère chiffré --- */
.dc-repere { padding: 40px 28px 42px; border-left: 1px solid var(--dc-filet); }
.dc-repere:first-child { border-left: 0; padding-left: 0; }
.dc-repere__v {
display: block;
font-family: var(--dc-titre);
font-variant-numeric: tabular-nums;
font-weight: 300;
font-size: clamp(40px, 4.6vw, 60px);
line-height: 1;
letter-spacing: -.03em;
}
.dc-repere__v sup { font-size: .34em; color: var(--dc-accent-txt); top: -1.3em; letter-spacing: 0; }
.dc-repere__l {
display: block;
margin-top: 16px;
font-size: 12px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--dc-texte-3);
}
/* --- Étape numérotée (parcours « vendre son terrain ») --- */
.dc-etape { padding: 0 30px; border-left: 1px solid var(--dc-inv-filet); }
.dc-etape:first-child { border-left: 0; padding-left: 0; }
.dc-etape__n {
font-family: var(--dc-titre);
font-variant-numeric: tabular-nums;
font-size: 34px;
font-weight: 200;
line-height: 1;
color: var(--dc-accent);
}
/* --- Exergue --- */
.dc-exergue {
font-family: var(--dc-titre);
font-size: clamp(25px, 2.9vw, 36px);
font-weight: 300;
line-height: 1.24;
letter-spacing: -.022em;
}
/* --- Engagement : ligne séparée par un filet, pas une carte --- */
.dc-engagements { border-top: 1px solid var(--dc-filet); }
.dc-engagement { padding: 24px 0; border-bottom: 1px solid var(--dc-filet); }
.dc-engagement h3 {
font-family: var(--dc-corps);
font-size: 16px;
font-weight: 600;
letter-spacing: 0;
margin-bottom: 8px;
}
.dc-engagement p { font-size: 15px; color: var(--dc-texte-2); }
/* --- Bloc inversé : section sombre --- */
.dc-inverse { background-color: var(--dc-inv-fond) !important; color: var(--dc-inv-txte); }
.dc-inverse h1,
.dc-inverse h2,
.dc-inverse h3,
.dc-inverse .et_pb_module { color: var(--dc-inv-txte); }
.dc-inverse p { color: var(--dc-inv-2); }
.dc-inverse .dc-sur { color: var(--dc-inv-2); }
.dc-inverse .dc-it,
.dc-inverse h1 em,
.dc-inverse h2 em { color: var(--dc-accent); }
/* --- Images : filet fin, jamais d'ombre ni d'angle arrondi --- */
.dc-img img,
.et_pb_image img {
border: 1px solid var(--dc-filet);
border-radius: 0;
box-shadow: none;
transition: border-color .25s ease;
}
.dc-img:hover img { border-color: var(--dc-filet-fort); }
/* --- Accordéon / FAQ --- */
.dc-faq .et_pb_toggle {
background-color: transparent;
border: 0;
border-bottom: 1px solid var(--dc-filet);
border-radius: 0;
padding: 24px 0;
}
.dc-faq .et_pb_toggle_title {
font-family: var(--dc-titre);
font-size: 21px;
font-weight: 400;
color: var(--dc-texte);
padding: 0 40px 0 0;
}
.dc-faq .et_pb_toggle_title::before {
color: var(--dc-accent);
font-size: 22px;
right: 0;
}
.dc-faq .et_pb_toggle_content { color: var(--dc-texte-2); padding-top: 14px; }
/* ------------------------------------------------------------------
5. BASCULE CLAIR / SOMBRE
------------------------------------------------------------------
Le bouton est injecté dans le menu principal par functions.php.
------------------------------------------------------------------ */
/* Pas de cadre autour de l'icône : elle s'aligne comme une entrée de
menu, à côté de la loupe de Divi. Le padding-bottom reprend celui
des entrées voisines pour que tout repose sur la même ligne. */
#top-menu li.dc-bascule-item {
display: inline-block;
vertical-align: top;
padding: 0 0 33px 20px;
}
.et-fixed-header #top-menu li.dc-bascule-item { padding-bottom: 20px; }
.et_mobile_menu li.dc-bascule-item { padding: 12px 5%; }
.dc-bascule {
display: inline-flex;
align-items: center;
gap: 13px;
width: auto;
height: 22px;
padding: 0;
background: none;
border: 0;
color: var(--dc-texte-2);
transition:
color .42s cubic-bezier(.22, .61, .36, 1),
transform .42s cubic-bezier(.22, .61, .36, 1);
}
.dc-bascule svg { flex: none; }
.dc-bascule:hover { color: var(--dc-texte); transform: rotate(9deg); }
.dc-bascule svg { width: 22px; height: 22px; display: block; }
/* Deux icônes superposées : le soleil s'efface en tournant, la lune
arrive en tournant. Aucune référence par identifiant, donc autant de
boutons que voulu dans la page. */
.dc-icone { overflow: visible; }
.dc-soleil,
.dc-lune {
transform-origin: 12px 12px;
transition:
opacity .32s ease,
transform .5s cubic-bezier(.35, 0, .15, 1);
}
.dc-lune {
opacity: 0;
transform: scale(.55) rotate(-55deg);
}
.dc-bascule.dc-nuit .dc-soleil {
opacity: 0;
transform: scale(.55) rotate(55deg);
}
.dc-bascule.dc-nuit .dc-lune {
opacity: 1;
transform: none;
}
/* Le libellé du bouton n'est jamais affiché : il ne sert qu'aux
lecteurs d'écran, via aria-label. */
/* Le changement de thème s'ouvre en cercle depuis le bouton.
Mécanique de la View Transitions API. Les navigateurs qui ne la
connaissent pas basculent simplement sans animation. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
/* ------------------------------------------------------------------
6. PAGES SPÉCIFIQUES
------------------------------------------------------------------ */
/* Ligne d'opération (page Programmes) : une image, un texte, un statut. */
.dc-ligne {
display: grid;
grid-template-columns: 190px minmax(0, 1fr) auto;
gap: 40px;
align-items: center;
padding: 30px 0;
border-bottom: 1px solid var(--dc-filet);
}
.dc-ligne__n {
font-family: var(--dc-titre);
font-size: 24px;
font-weight: 300;
letter-spacing: -.02em;
transition: color .22s ease;
}
.dc-ligne:hover .dc-ligne__n { color: var(--dc-accent-txt); }
.dc-ligne__d { margin-top: 9px; font-size: 15px; color: var(--dc-texte-2); }
.dc-ligne__f { text-align: right; display: grid; gap: 10px; justify-items: end; }
/* ------------------------------------------------------------------
6 bis. MISE EN PAGE DES GABARITS
------------------------------------------------------------------
Ces classes servent aux gabarits PHP du thème enfant
(dc-page-*.php), qui reprennent la maquette validée.
------------------------------------------------------------------ */
/* Divi ajoute ses propres marges au conteneur principal. */
.dc-gabarit #main-content,
.dc-gabarit #et-main-area { padding: 0; }
.dc-gabarit #main-content .container { width: 100%; max-width: none; padding: 0; }
/* Conteneur : la largeur de lecture du site. */
/* Aucun débordement latéral, quelle que soit la largeur. « clip »
plutôt que « hidden » : hidden crée un contexte de défilement qui
casserait les positionnements collants de l'en-tête. */
#page-container { overflow-x: clip; }
img, video, iframe, table { max-width: 100%; }
.dc-env {
max-width: 1280px;
margin: 0 auto;
padding-inline: clamp(22px, 5.5vw, 84px);
}
/* --- Réserve d'image : le cadre en attendant la photo --- */
.dc-reserve {
position: relative;
background-color: var(--dc-fond-alt);
border: 1px solid var(--dc-filet);
display: grid;
place-items: center;
overflow: hidden;
}
.dc-reserve::after {
content: attr(data-l);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--dc-texte-3);
}
/* --- Hero --- */
.dc-hero { padding-block: clamp(56px, 7vw, 104px) 0; }
.dc-hero__t {
font-size: clamp(42px, 6.4vw, 90px);
line-height: 1.02;
letter-spacing: -.03em;
max-width: 15ch;
}
.dc-hero__p {
margin-top: 32px;
max-width: 52ch;
font-size: 18.5px;
color: var(--dc-texte-2);
}
.dc-hero__a { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 42px; }
.dc-hero__img { margin-top: clamp(48px, 6vw, 84px); aspect-ratio: 16 / 7; }
/* --- Hero en photo pleine largeur ---
La photo est posée en fond de la section, avec un voile pour que le
texte reste lisible. C'est la seule entorse à la règle « aucun
dégradé » de la charte : ici il ne décore pas, il rend lisible.
Le hero reste sombre dans les deux thèmes — une photo ne s'inverse
pas — donc ses couleurs de texte sont posées en dur plutôt que par
les jetons, qui basculeraient avec le mode sombre. */
.dc-hero {
position: relative;
isolation: isolate;
background-color: #141413;
background-image: url("../img/hero-poster.webp");
background-size: cover;
background-position: center 62%;
background-repeat: no-repeat;
padding-block: clamp(84px, 11vw, 172px) clamp(64px, 8vw, 120px) !important;
}
.dc-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
102deg,
rgba(20, 20, 19, .90) 0%,
rgba(20, 20, 19, .74) 38%,
rgba(20, 20, 19, .34) 72%,
rgba(20, 20, 19, .16) 100%
);
}
.dc-hero,
.dc-hero p,
body .dc-hero h1,
body .dc-hero h2 { color: #F0EEE6; }
.dc-hero .dc-sur { color: rgba(240, 238, 230, .70); }
.dc-hero .dc-sur::before { background: var(--dc-accent); }
body .dc-hero h1 em,
.dc-hero .dc-it { color: var(--dc-accent); }
.dc-hero .dc-hero__p { color: rgba(240, 238, 230, .84); }
/* Vidéo de fond. Elle est insérée par le JS, et seulement quand le
contexte s'y prête : écran large, pas de mode économie de données,
pas de prefers-reduced-motion. La photo reste le fond de la section
dans tous les cas — si la vidéo ne charge pas, rien ne manque. */
.dc-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
opacity: 0;
transition: opacity 1.4s ease;
pointer-events: none;
}
.dc-hero__video.dc-visible { opacity: 1; }
/* La réserve d'image n'a plus lieu d'être : la photo est en fond. */
.dc-hero .dc-hero__img { display: none; }
/* Boutons : l'ivoire remplace l'encre, invisible sur fond sombre. */
/* Deux boutons côte à côte. Divi enveloppe chaque bouton dans son
propre .et_pb_button_module_wrapper, qui est un bloc : sans cela les
boutons s'empilent. La classe dc-actions se pose sur la COLONNE. */
.dc-actions .et_pb_button_module_wrapper {
display: inline-block;
margin: 0 16px 16px 0;
vertical-align: top;
}
/* Repères chiffrés posés sur la photo. */
.dc-hero .dc-reperes {
border-top-color: rgba(240, 238, 230, .26);
margin-top: clamp(48px, 6vw, 88px);
}
.dc-hero .dc-repere { border-left-color: rgba(240, 238, 230, .26); }
.dc-hero .dc-repere__v { color: #F0EEE6; }
.dc-hero .dc-repere__l { color: rgba(240, 238, 230, .64); }
.dc-hero .dc-repere__v sup { color: var(--dc-accent); }
/* --- Chapeau de page intérieure ---
Même traitement que le hero : une photo en fond, un voile pour la
lisibilité, un texte clair. Chaque page a la sienne, choisie par la
classe que functions.php pose sur le body.
Comme le hero, le chapeau reste sombre dans les deux thèmes : une
photo ne s'inverse pas, donc les couleurs sont posées en dur. */
.dc-chapeau {
position: relative;
isolation: isolate;
background-color: #141413;
background-image: url("../img/hero.webp"); /* repli */
background-size: cover;
background-position: center 58%;
background-repeat: no-repeat;
padding-block: clamp(78px, 9vw, 152px) clamp(58px, 7vw, 104px) !important;
}
.dc-chapeau::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
102deg,
rgba(20, 20, 19, .90) 0%,
rgba(20, 20, 19, .74) 38%,
rgba(20, 20, 19, .36) 72%,
rgba(20, 20, 19, .18) 100%
);
}
.dc-chapeau h1 { max-width: 17ch; }
.dc-chapeau p { margin-top: 26px; max-width: 58ch; font-size: 18px; }
/* Textes du chapeau : le voile est sombre, le texte doit l'être aussi
peu importe le thème. Les !important reprennent la main sur les
couleurs que Divi pose selon son réglage de fond. */
.dc-chapeau .et_pb_module h1,
.dc-chapeau .et_pb_module h2,
.dc-chapeau h1 { color: #F0EEE6 !important; }
.dc-chapeau .et_pb_text,
.dc-chapeau .et_pb_text_inner,
.dc-chapeau .et_pb_text p { color: rgba(240, 238, 230, .84) !important; }
.dc-chapeau .dc-sur,
.dc-chapeau .dc-sur p { color: rgba(240, 238, 230, .70) !important; }
.dc-chapeau .et_pb_module h1 em,
.dc-chapeau h1 em { color: var(--dc-accent) !important; }
/* La réserve d'image du chapeau ferait doublon avec la photo de fond. */
.dc-chapeau .dc-reserve { display: none; }
/* Une photo par page.
La règle de repli est dans la déclaration de base ci-dessus, PAS
ici : posée après, à spécificité égale (0,2,0), elle l'emportait sur
ces cinq règles et toutes les pages affichaient la même image. */
body.dc-page-programmes .dc-chapeau { background-image: url("../img/hero-programmes.webp"); }
body.dc-page-nos-realisations .dc-chapeau { background-image: url("../img/hero-realisations.webp"); }
body.dc-page-vendre-son-terrain .dc-chapeau { background-image: url("../img/hero-terrain.webp"); }
body.dc-page-nous-connaitre .dc-chapeau { background-image: url("../img/hero-nous.webp"); }
body.dc-page-contact .dc-chapeau { background-image: url("../img/hero-contact.webp"); }
/* --- Bande de repères chiffrés --- */
.dc-reperes {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--dc-filet);
margin-top: clamp(72px, 9vw, 136px);
}
/* --- Tête de section : titre à gauche, lien à droite --- */
.dc-sect__t {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 28px;
align-items: end;
margin-bottom: 60px;
}
.dc-sect__t h2 { max-width: 18ch; }
.dc-sect__i { margin-top: 22px; max-width: 56ch; color: var(--dc-texte-2); }
/* --- Grille de programmes --- */
.dc-progs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
.dc-prog { text-decoration: none; display: block; }
.dc-prog .dc-reserve { aspect-ratio: 4 / 5; transition: border-color .25s ease; }
.dc-prog:hover .dc-reserve { border-color: var(--dc-filet-fort); }
.dc-prog:hover .dc-prog__n { color: var(--dc-accent-txt); }
.dc-prog__s { margin: 24px 0 14px; }
.dc-prog__n {
font-family: var(--dc-titre);
font-size: 27px;
font-weight: 300;
letter-spacing: -.02em;
line-height: 1.14;
transition: color .22s ease;
}
.dc-prog__v { margin-top: 8px; font-size: 15px; color: var(--dc-texte-2); }
/* --- Grille de réalisations --- */
.dc-reals { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.dc-real { text-decoration: none; display: block; }
.dc-real .dc-reserve { aspect-ratio: 3 / 4; transition: border-color .25s ease; }
.dc-real:hover .dc-reserve { border-color: var(--dc-filet-fort); }
.dc-real:hover .dc-real__n { color: var(--dc-accent-txt); }
.dc-real__n {
margin-top: 18px;
font-family: var(--dc-titre);
font-size: 19px;
font-weight: 400;
transition: color .22s ease;
}
.dc-real__m { font-size: 14px; color: var(--dc-texte-2); margin-top: 3px; }
/* --- Parcours en quatre étapes --- */
.dc-etapes { display: grid; grid-template-columns: repeat(4, 1fr); }
.dc-etape h3 { font-size: 21px; margin: 18px 0 12px; }
.dc-etape p { font-size: 15px; line-height: 1.6; }
/* --- Éditorial deux colonnes --- */
.dc-edito { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 92px); }
.dc-edito p + p { margin-top: 22px; }
/* --- Croquis d'élévation --- */
.dc-croquis { width: 100%; height: auto; display: block; }
.dc-croquis .t { fill: none; stroke: var(--dc-filet-fort); stroke-width: 1; }
.dc-croquis .m { fill: var(--dc-accent-doux); stroke: var(--dc-filet-fort); stroke-width: 1; }
.dc-croquis .s { fill: none; stroke: var(--dc-accent); stroke-width: 1; }
/* --- Contact --- */
.dc-contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 92px); }
.dc-coord { border-top: 1px solid var(--dc-filet); }
.dc-coord > div { padding: 20px 0; border-bottom: 1px solid var(--dc-filet); }
.dc-coord dt {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dc-texte-3);
margin-bottom: 7px;
}
.dc-coord dd { margin: 0; font-size: 17px; }
.dc-coord .dc-vide { color: var(--dc-accent-txt); font-family: var(--dc-titre); font-style: italic; }
.dc-form { display: grid; gap: 26px; }
.dc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.dc-champ { display: flex; flex-direction: column; gap: 8px; }
.dc-champ label {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dc-texte-3);
}
.dc-champ input,
.dc-champ textarea,
.dc-champ select {
font-family: var(--dc-corps);
font-size: 16px;
color: var(--dc-texte);
background: transparent;
border: 0;
border-bottom: 1px solid var(--dc-filet-fort);
border-radius: 0;
padding: 10px 0;
transition: border-color .22s ease;
}
.dc-champ input:focus,
.dc-champ textarea:focus,
.dc-champ select:focus { outline: none; border-bottom-color: var(--dc-accent); }
.dc-champ textarea { resize: vertical; min-height: 112px; }
.dc-mention { font-size: 13.5px; color: var(--dc-texte-3); }
/* Bouton natif du formulaire : même habillage que les boutons Divi. */
.dc-form button[type="submit"] {
justify-self: start;
padding: 15px 30px;
border: 1px solid var(--dc-texte);
border-radius: var(--dc-radius);
background-color: var(--dc-texte);
color: var(--dc-fond);
font-family: var(--dc-corps);
font-size: 14px;
font-weight: 500;
letter-spacing: .04em;
transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
.dc-form button[type="submit"]:hover {
background-color: var(--dc-accent);
border-color: var(--dc-accent);
color: #141413;
}
/* Message de retour après envoi. */
.dc-message {
padding: 16px 20px;
border-left: 2px solid var(--dc-accent);
background-color: var(--dc-accent-doux);
font-size: 15px;
}
/* --- FAQ en balises natives --- */
.dc-faq details { border-bottom: 1px solid var(--dc-filet); }
.dc-faq summary {
list-style: none;
padding: 24px 0;
font-family: var(--dc-titre);
font-size: 21px;
font-weight: 400;
display: flex;
justify-content: space-between;
gap: 24px;
align-items: baseline;
}
.dc-faq summary::-webkit-details-marker { display: none; }
.dc-faq summary::after { content: "+"; color: var(--dc-accent); font-size: 22px; font-family: var(--dc-corps); font-weight: 300; }
.dc-faq details[open] summary::after { content: "–"; }
.dc-faq details > p { padding-bottom: 26px; max-width: 66ch; color: var(--dc-texte-2); }
/* --- Liste d'opérations --- */
.dc-ligne:first-of-type { border-top: 1px solid var(--dc-filet); }
.dc-ligne .dc-reserve { aspect-ratio: 3 / 2; transition: border-color .25s ease; }
.dc-ligne:hover .dc-reserve { border-color: var(--dc-filet-fort); }
/* --- Apparition douce au chargement --- */
.dc-fondu {
opacity: 0;
transform: translateY(14px);
animation: dc-fondu .9s cubic-bezier(.2, .7, .3, 1) forwards;
animation-delay: var(--d, 0s);
}
@keyframes dc-fondu { to { opacity: 1; transform: none; } }
/* ------------------------------------------------------------------
7. RESPONSIVE
------------------------------------------------------------------
Points de rupture Divi :
- Tablette : max-width 980px
- Mobile : max-width 767px
------------------------------------------------------------------ */
/* ------------------------------------------------------------------
MENU MOBILE
Divi ouvre son menu déroulant avec son propre habillage : fond
blanc, liseré bleu #2ea3f2, ombre portée. Il faut le reprendre
entièrement, sinon il apparaît tel quel — et reste blanc en mode
sombre.
------------------------------------------------------------------ */
.et_mobile_menu {
background-color: var(--dc-fond) !important;
border-top: 1px solid var(--dc-accent) !important;
box-shadow: none !important;
padding: 6px 0 !important;
}
.et_mobile_menu li a {
font-family: var(--dc-corps);
font-size: 16px;
font-weight: 400;
color: var(--dc-texte) !important;
/* 52 px de haut : une cible confortable au pouce. */
padding: 16px 6% !important;
border-bottom: 1px solid var(--dc-filet) !important;
transition: background-color .3s ease, color .3s ease;
}
.et_mobile_menu li:last-child > a { border-bottom: 0 !important; }
.et_mobile_menu li a:hover {
background-color: var(--dc-fond-alt) !important;
color: var(--dc-texte) !important;
opacity: 1 !important;
}
.et_mobile_menu li.current-menu-item > a {
color: var(--dc-accent-txt) !important;
font-weight: 600;
}
.et_mobile_menu .menu-item-has-children > a { background-color: transparent !important; }
/* Menu mobile : la ligne entière est le bouton, comme les autres
entrées du menu. Viser une icône de 26 px au pouce serait pénible. */
.et_mobile_menu li.dc-bascule-item {
padding: 0 !important;
border-bottom: 0 !important;
}
.et_mobile_menu li.dc-bascule-item .dc-bascule,
.dc-entete-transparente #main-header:not(.et-fixed-header) .et_mobile_menu .dc-bascule {
display: flex;
width: 100%;
height: auto;
padding: 17px 6%;
/* Le menu déroulant a son propre fond : l'icône y reprend la
couleur du texte, jamais l'ivoire de l'en-tête transparent. */
color: var(--dc-texte) !important;
text-align: left;
}
.et_mobile_menu li.dc-bascule-item .dc-bascule:hover {
background-color: var(--dc-fond-alt);
transform: none;
}
.et_mobile_menu li.dc-bascule-item .dc-icone { width: 24px; height: 24px; }
/* Pas de libellé : l'icône se suffit, et la ligne entière reste la
zone de clic. */
.dc-bascule__mot { display: none !important; }
/* Le bouton d'ouverture doit rester une cible franche. */
.mobile_menu_bar { padding: 4px 0; }
.mobile_menu_bar::before { font-size: 32px !important; }
@media (max-width: 980px) {
#footer-widgets { grid-template-columns: 1fr 1fr; }
.dc-repere { border-left: 0; padding-left: 0; padding-right: 20px; }
.dc-repere:nth-child(n+3) { border-top: 1px solid var(--dc-filet); }
.dc-etape { border-left: 0; padding-left: 0; padding-bottom: 30px; }
.dc-progs { grid-template-columns: 1fr 1fr; }
.dc-progs .dc-prog:last-child { display: none; }
.dc-etapes { grid-template-columns: 1fr 1fr; row-gap: 40px; }
.dc-reperes { grid-template-columns: 1fr 1fr; }
.dc-reals { grid-template-columns: 1fr 1fr; }
.dc-edito, .dc-contact { grid-template-columns: 1fr; }
.dc-sect__t { grid-template-columns: 1fr; align-items: start; }
/* La vignette des opérations se resserre : entre 768 et 980 px,
190 px laissaient trop peu de place au texte et au statut. */
.dc-ligne { grid-template-columns: 150px minmax(0, 1fr) auto; gap: 28px; }
/* Le lien de la tête de section repasse sous le titre. */
.dc-sect__t .dc-lien { justify-self: start; margin-top: 4px; }
/* Les colonnes Divi s'empilent : leurs marges internes n'ont plus
lieu d'être. */
.dc-etape, .dc-repere { padding-inline: 0; }
/* Le visuel se resserre : le menu prend moins de place en hauteur. */
.dc-entete-transparente .dc-hero,
.dc-entete-transparente .dc-chapeau {
padding-top: clamp(120px, 17vw, 170px) !important;
}
}
@media (max-width: 767px) {
body { font-size: 16px; }
#footer-widgets { grid-template-columns: 1fr; gap: 38px; }
#logo { height: 32px !important; }
.logo_container a { gap: 11px; }
.logo_container a::after { font-size: 19px; }
.dc-ligne { grid-template-columns: 108px minmax(0, 1fr); gap: 22px; }
.dc-ligne__f { grid-column: 1 / -1; justify-items: start; text-align: left; }
/* Les actions restent du texte cliquable, jamais une capsule. */
.dc-lien { font-size: 15px; }
.dc-hero::before,
.dc-chapeau::before {
background: linear-gradient(
180deg,
rgba(20, 20, 19, .80) 0%,
rgba(20, 20, 19, .88) 100%
);
}
.dc-progs, .dc-etapes, .dc-reals, .dc-duo { grid-template-columns: 1fr; }
.dc-progs .dc-prog:last-child { display: block; }
.dc-hero__img { aspect-ratio: 4 / 3; }
.dc-hero__a .et_pb_button, .dc-hero__a .dc-btn { width: 100%; justify-content: center; }
.dc-actions .et_pb_button_module_wrapper { display: block; margin-right: 0; }
.dc-actions .et_pb_button { width: 100%; text-align: center; }
/* Tous les boutons prennent la largeur : plus facile à viser, et
la colonne reste alignée. */
body .et_pb_button,
body .et_pb_contact_submit {
display: block;
width: 100%;
text-align: center;
padding: 17px 24px !important;
}
/* Le formulaire Divi repasse sur une colonne. */
.et_pb_contact_field_half { width: 100% !important; float: none !important; }
/* Les fiches techniques : intitulé au-dessus, valeur en dessous,
sinon les longues étiquettes se cassent en deux lignes. */
.dc-fiche > div { padding: 13px 0; }
/* Repères chiffrés : deux par ligne suffisent, quatre serrent trop. */
.dc-reperes { grid-template-columns: 1fr 1fr; }
.dc-repere { padding: 26px 0 28px; }
/* Le pied de page respire. */
.dc-pied__bl { max-width: none; }
}
/* ------------------------------------------------------------------
PETITS TÉLÉPHONES
------------------------------------------------------------------ */
@media (max-width: 480px) {
/* La liste des opérations passe l'image au-dessus du texte : à
cette largeur, une vignette de 108 px ne montre plus rien. */
.dc-ligne { grid-template-columns: 1fr; gap: 16px; }
.dc-ligne .dc-reserve { aspect-ratio: 16 / 9; }
.dc-reperes { grid-template-columns: 1fr; }
.dc-repere { padding: 20px 0 22px; border-top: 1px solid var(--dc-filet); }
.dc-repere:first-child { border-top: 0; }
/* Le logo se réduit sans que le mot passe à la ligne. */
#logo { height: 27px !important; }
.logo_container a { gap: 9px; }
.logo_container a::after { font-size: 16px; letter-spacing: .05em; }
/* Un cran de moins sur les marges latérales. */
.dc-env, #main-footer > .container, #footer-bottom .container {
padding-inline: 18px;
}
}
/* ------------------------------------------------------------------
TÉLÉPHONE EN PAYSAGE
Peu de hauteur disponible : le visuel d'ouverture doit se comprimer,
sinon le titre se retrouve seul sur un écran entier.
------------------------------------------------------------------ */
@media (max-height: 520px) and (orientation: landscape) {
.dc-entete-transparente .dc-hero,
.dc-entete-transparente .dc-chapeau {
padding-top: 110px !important;
padding-bottom: 44px !important;
}
.dc-hero__t { font-size: clamp(30px, 6vw, 44px); }
.dc-hero__p { margin-top: 18px; font-size: 16px; }
.dc-hero__a { margin-top: 24px; }
.dc-reperes { margin-top: 34px; }
}
/* ------------------------------------------------------------------
GRANDS ÉCRANS
Au-delà de 1600 px, la colonne de texte reste à sa largeur de
lecture ; seul le visuel gagne en ampleur.
------------------------------------------------------------------ */
@media (min-width: 1600px) {
.dc-hero { padding-block: clamp(180px, 12vw, 240px) clamp(90px, 6vw, 130px) !important; }
.dc-hero__t { font-size: 88px; }
.dc-hero__p { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.dc-soleil, .dc-lune { transition: none; }
/* Plus aucun déplacement au survol : seule la couleur change. */
body .et_pb_button:hover,
body .dc-btn-ligne.et_pb_button:hover,
body .dc-hero .et_pb_button:hover,
body .dc-inverse .et_pb_button:hover { transform: none; }
.dc-bascule:hover { transform: none; }
}