/*
Theme Name:   Delecluse Child
Theme URI:    https://delecluse-immobilier.com
Description:  Theme enfant Divi pour Delecluse Immobilier — palette sobre (navy/gold sur paper), typographie editoriale (Italiana, Cormorant Garamond, Montserrat). Definit les CSS variables consommees par le plugin Rol Immo.
Author:       Roland Beaussant
Author URI:   https://github.com/rbeaussant
Template:     Divi
Version:      0.1.0
License:      GPL-2.0-or-later
Text Domain:  delecluse-child
*/

/* ===================================================================
   Palette & typographie — variables Delecluse
   =================================================================== */

:root {
    /* Palette */
    --del-navy: #212649;
    --del-navy-soft: #2c3158;
    --del-gold: #b49362;
    --del-gold-light: #dbc085;
    --del-gold-pale: #ede2cc;

    --del-paper: #ffffff;
    --del-paper-soft: #fafaf8;
    --del-paper-warm: #f5f3ed;
    --del-ivory: #f6f1e8;
    --del-cream: #faf6ee;

    --del-ink: #0a0a0a;
    --del-ink-soft: #6b6b6b;
    --del-ink-muted: #999999;
    --del-line: rgba(33, 38, 73, 0.12);

    /* Typographie */
    --del-font-display: "Italiana", "Cormorant Garamond", Georgia, serif;
    --del-font-serif: "Cormorant Garamond", Georgia, serif;
    --del-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Echelle typo */
    --del-font-weight-light: 300;
    --del-font-weight-regular: 400;
    --del-font-weight-medium: 500;

    /* Espacements editoriaux */
    --del-section-padding: 140px 60px;
    --del-section-padding-mobile: 80px 24px;

    /* ============================================================
       Bridge avec le plugin Rol Immo : on alimente les variables
       generiques du plugin avec la palette Delecluse. Le plugin
       reste agnostique (cf. CLAUDE.md), mais le theme peut imposer
       son identite a travers ces variables.
       ============================================================ */

    --rol-immo-color-primary: var(--del-navy);
    --rol-immo-color-accent: var(--del-gold);
    --rol-immo-color-accent-soft: var(--del-gold-light);
    --rol-immo-color-text: var(--del-ink);
    --rol-immo-color-text-soft: var(--del-ink-soft);
    --rol-immo-color-text-muted: var(--del-ink-muted);
    --rol-immo-color-surface: var(--del-paper);
    --rol-immo-color-surface-soft: var(--del-paper-soft);
    --rol-immo-color-surface-warm: var(--del-paper-warm);
    --rol-immo-color-line: var(--del-line);

    --rol-immo-font-display: var(--del-font-display);
    --rol-immo-font-serif: var(--del-font-serif);
    --rol-immo-font-body: var(--del-font-body);
}

/* ===================================================================
   Body / typographie globale
   =================================================================== */

body {
    font-family: var(--del-font-body);
    font-weight: var(--del-font-weight-light);
    line-height: 1.6;
    color: var(--del-ink);
    background: var(--del-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings : Cormorant Garamond par defaut (lisible pour les textes
   courts / numeriques). Italiana reservee aux contextes purement display
   (heros, gros titres de section), accessible via la classe utilitaire
   `.del-display` ou directement par le plugin sur ses titres editoriaux
   (`.rol-immo-archive__title`, `.rol-immo-single__title`).

   On NE fixe PAS la couleur des h1-h6 / p / li / a ici : c'est la
   responsabilite de Divi (Theme Customizer -> Typographie + General
   Settings -> Link Color), ou de chaque section/module Divi qui
   choisit ses couleurs en contexte. Le body pose la couleur de base
   `var(--del-ink)`, qui cascade sur tout le reste sauf override
   explicite. Eviter d'ajouter ici des regles `h1 { color: ... }` ou
   `a { color: ... }` -- elles ecraseraient les choix de Divi sur les
   sections a fond fonce et rendraient les textes invisibles. */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--del-font-serif);
    font-weight: var(--del-font-weight-regular);
    letter-spacing: 0;
    line-height: 1.15;
}

.del-display,
.heading {
    font-family: var(--del-font-display);
    font-weight: var(--del-font-weight-light);
    letter-spacing: 0.005em;
    line-height: 1.05;
}

a {
    text-decoration: none;
}

/* ===================================================================
   Helpers reutilisables
   =================================================================== */

.del-eyebrow {
    font-family: var(--del-font-body);
    font-size: 10px;
    font-weight: var(--del-font-weight-medium);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--del-ink-soft);
}

.del-rule-gold {
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--del-gold);
    margin: 0 auto;
}

.del-section {
    padding: var(--del-section-padding);
}

@media (max-width: 768px) {
    .del-section {
        padding: var(--del-section-padding-mobile);
    }
}


/* ===================================================================
   Contact Form 7 — alignement design Delécluse
   =================================================================== */

.wpcf7 {
    max-width: 100%;
}

.wpcf7-form {
    font-family: var(--del-font-body, "Montserrat", sans-serif);
    color: var(--del-ink, #0a0a0a);
}

.wpcf7-form p {
    margin: 0 0 24px;
}

/* Labels — small caps, Montserrat, gold-ish */
.wpcf7-form label {
    display: block;
    font-family: var(--del-font-body, "Montserrat", sans-serif);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--del-ink-soft, #6b6b6b);
    margin-bottom: 10px;
}

/* Inputs / textarea / select — bottom-border minimaliste */
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-checkbox):not(.wpcf7-radio) {
    width: 100%;
    height: auto;
    padding: 14px 0;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--del-line, rgba(33, 38, 73, 0.12));
    border-radius: 0;
    background: transparent;
    color: var(--del-navy, #212649);
    font-family: var(--del-font-serif, "Cormorant Garamond", serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.25s ease;
    box-shadow: none;
    outline: none;
}

.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-checkbox):not(.wpcf7-radio):focus {
    border-bottom-color: var(--del-gold, #b49362);
}

.wpcf7-form .wpcf7-form-control::placeholder {
    color: var(--del-ink-muted, #999);
    font-family: var(--del-font-body, "Montserrat", sans-serif);
    font-size: 14px;
    font-weight: 300;
}

/* Textarea — petite hauteur min */
.wpcf7-form .wpcf7-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

/* Select — chevron custom (sinon flèche système peu sexy) */
.wpcf7-form .wpcf7-select {
    padding-right: 24px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--del-ink-soft, #6b6b6b) 50%),
        linear-gradient(135deg, var(--del-ink-soft, #6b6b6b) 50%, transparent 50%);
    background-position: calc(100% - 12px) 60%, calc(100% - 6px) 60%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* Acceptance / checkbox — case carrée custom + label inline */
.wpcf7-form .wpcf7-acceptance,
.wpcf7-form .wpcf7-checkbox,
.wpcf7-form .wpcf7-radio {
    display: block;
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item,
.wpcf7-form .wpcf7-radio .wpcf7-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 8px;
}

.wpcf7-form .wpcf7-acceptance label,
.wpcf7-form .wpcf7-checkbox label,
.wpcf7-form .wpcf7-radio label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--del-font-body, "Montserrat", sans-serif);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--del-ink-soft, #6b6b6b);
}

.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    border: 1px solid var(--del-line, rgba(33, 38, 73, 0.3));
    background: var(--del-paper, #fff);
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.wpcf7-form input[type="radio"] {
    border-radius: 50%;
}

.wpcf7-form input[type="checkbox"]:checked,
.wpcf7-form input[type="radio"]:checked {
    border-color: var(--del-navy, #212649);
    background: var(--del-navy, #212649);
}

.wpcf7-form input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.wpcf7-form input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #fff;
    border-radius: 50%;
}

/* Submit — navy plein, hover gold (cohérent avec .rol-immo-search-form__submit) */
.wpcf7-form .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 18px 32px;
    margin: 16px 0 0;
    border: 0;
    border-radius: 0;
    background: var(--del-navy, #212649);
    color: #fff;
    font-family: var(--del-font-body, "Montserrat", sans-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus {
    background: var(--del-gold, #b49362);
    outline: 0;
}

.wpcf7-form .wpcf7-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Validation : champ invalide */
.wpcf7-form .wpcf7-not-valid {
    border-bottom-color: #b00020 !important;
}

.wpcf7-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    color: #b00020;
    font-family: var(--del-font-body, "Montserrat", sans-serif);
    font-size: 12px;
    font-style: italic;
}

/* Réponse globale (succès / erreur en bas du form) */
.wpcf7 .wpcf7-response-output {
    margin: 24px 0 0;
    padding: 16px 20px;
    border: 1px solid var(--del-line, rgba(33, 38, 73, 0.12));
    border-left-width: 3px;
    border-left-color: var(--del-gold, #b49362);
    background: var(--del-paper-warm, #f5f3ed);
    font-family: var(--del-font-serif, "Cormorant Garamond", serif);
    font-size: 16px;
    font-style: italic;
    color: var(--del-ink, #0a0a0a);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    border-left-color: #b00020;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-left-color: var(--del-navy, #212649);
}

/* Spinner (loader) pendant l'envoi */
.wpcf7-spinner {
    background-color: var(--del-gold, #b49362);
    margin-left: 12px;
}

/* Rangées multi-colonnes (à wrapper dans la balise CF7 avec <div class="cf7-row">) */
.cf7-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.cf7-row.cf7-row--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.cf7-row > p {
    margin-bottom: 24px;
}

@media (max-width: 600px) {
    .cf7-row,
    .cf7-row.cf7-row--3 {
        grid-template-columns: 1fr;
    }
}

/* Quand le formulaire est dans une section navy (page Vendre, Estimation, Acheter…),
   inverser les couleurs pour rester lisible */
.et_pb_section[style*="background-color: #212649"] .wpcf7-form,
.et_pb_section[style*="background-color:#212649"] .wpcf7-form,
.section--navy .wpcf7-form {
    color: #fff;
}

.et_pb_section[style*="#212649"] .wpcf7-form label,
.section--navy .wpcf7-form label {
    color: var(--del-gold-light, #dbc085);
}

.et_pb_section[style*="#212649"] .wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-checkbox):not(.wpcf7-radio),
.section--navy .wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-checkbox):not(.wpcf7-radio) {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

.et_pb_section[style*="#212649"] .wpcf7-form .wpcf7-form-control::placeholder,
.section--navy .wpcf7-form .wpcf7-form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.et_pb_section[style*="#212649"] .wpcf7-form .wpcf7-submit,
.section--navy .wpcf7-form .wpcf7-submit {
    background: var(--del-gold-light, #dbc085);
    color: var(--del-navy, #212649);
}

.et_pb_section[style*="#212649"] .wpcf7-form .wpcf7-submit:hover,
.section--navy .wpcf7-form .wpcf7-submit:hover {
    background: #fff;
}

/* Personnalisation Divi header, footer, etc. */

@media only screen and (max-width: 767px) {
    .et-db #et-boc .et-l .et_pb_row_0_tb_header, .et_pb_pagebuilder_layout.single-post:not(.et-tb-has-body) #main-content .et_pb_row.et_pb_row_0_tb_header, .et-db #et-boc .et-l .et_pb_row_1_tb_header, .et_pb_pagebuilder_layout.single-post:not(.et-tb-has-body) #main-content .et_pb_row.et_pb_row_1_tb_header {
        width: 90% !important;
    }
}

/* Header et menu */

.home header.et-l.et-l--header, header.header-scrolled {
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
   	top: 0;
}

.home header.et-l.et-l--header {
	background-color: #21264938;
}


.admin-bar.home header.et-l.et-l--header {
	top: 30px;
}

@media (max-width: 980px) {
.admin-bar.home header.et-l.et-l--header, .admin-bar header.header-scrolled {
top: 0;
}
}

.home header .et_builder_inner_content .et_pb_section {
    background-color: #transparent !important;
}

.home header:not(.header-scrolled) .text-logo div {
  color: #fff;
}

.text-logo .logo-texte-1 {
  font-size: 20px;
  margin-bottom: 5px;
  line-height: 1.2em;
  letter-spacing: .1em;
}

.text-logo .logo-texte-2 {
  letter-spacing: .1em;
}

li.contact-menu.menu-item {
    background-color: #b49362;
    padding: 16px 30px 10px;
    margin: -8px 0 0 10px !important;
}

.home header:not(.header-scrolled)  li.contact-menu.menu-item {
}

@media (min-width: 769px) {
.home header:not(.header-scrolled) a {
    color: #fff !important;
}
}

li.contact-menu.menu-item a {
	color: #fff !important;
	font-weight: 500 !Important;
}

.home header .et_pb_section_0_tb_header, .home header .et_pb_section_1_tb_header {
    border-bottom-color: #ffffff45 !important;
}

.home header:not(.header-scrolled) #top-menu-css, .home header:not(.header-scrolled) #main-menu-css {
  background-color: transparent !important
}

.et-l--header {
  transition: background-color .3s ease, box-shadow .3s ease;
}

/* Cible les deux sections d'un coup */
.et-l--header.header-scrolled .et_pb_section {
  /* par ex. réduire le padding une fois scrollé */
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Ou cibler une section spécifique des deux */
.et-l--header.header-scrolled .et_pb_section:first-child {
  /* la top bar — la masquer par exemple */
  display: none;
}

@media (max-width: 981px) {
	.et_mobile_menu li a {
		text-align: center;
	}
	
	li.contact-menu.menu-item {
		margin-top: 15px !Important;
	}
}

.et-l--header.header-scrolled .et_pb_section:last-child {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar:before {
	font-size: 46px;)
}

header:not(.header-scrolled) .footer-bouton-contact {
	display:none;
}