/*
 Theme Name:   Divi Cereco France
 Theme URI:    https://cereco-france.fr
 Description:  Child theme Divi pour Cereco France — diagnostics énergétiques Nord (59) & Pas-de-Calais (62). Couleurs et typographie de la marque.
 Author:       Cereco France
 Template:     Divi
 Version:      2.0.2
 Text Domain:  divi-cereco
*/

:root {
  --cereco-green: #4CBB17;
  --cereco-green-dark: #3a9111;
  --cereco-blue: #1B3A8C;
  --cereco-blue-dark: #132a66;
  --cereco-white: #FFFFFF;
  --cereco-light: #F5F5F5;
}

/* ===== Typographie ===== */
body,
.et_pb_text,
p {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--cereco-blue);
}

/* ===== Boutons ===== */
.et_pb_button,
.et-pb-primary-btn,
.et_pb_contact_submit,
.wpcf7-submit,
button[type="submit"] {
  background-color: var(--cereco-green) !important;
  border-color: var(--cereco-green) !important;
  color: var(--cereco-white) !important;
  border-radius: 6px !important;
  transition: all .25s ease !important;
}

.et_pb_button:hover,
.et-pb-primary-btn:hover,
.et_pb_contact_submit:hover,
.wpcf7-submit:hover,
button[type="submit"]:hover {
  background-color: var(--cereco-blue) !important;
  border-color: var(--cereco-blue) !important;
  color: var(--cereco-white) !important;
}

/* Variante bouton "outline blanc" (sur fonds foncés) : ajouter la classe .cereco-btn-outline */
.cereco-btn-outline.et_pb_button {
  background-color: transparent !important;
  border-color: var(--cereco-white) !important;
  color: var(--cereco-white) !important;
}
.cereco-btn-outline.et_pb_button:hover {
  background-color: var(--cereco-white) !important;
  color: var(--cereco-blue) !important;
}

/* ===== En-tête ===== */
#main-header {
  border-bottom: 3px solid var(--cereco-green);
}

/* ===== Liens ===== */
a { color: var(--cereco-blue); }
a:hover { color: var(--cereco-green); }

/* ===== Cartes services (Blurb) — UN SEUL encadré ===== */
.et_pb_blurb.cereco-card {
  border-top: 4px solid var(--cereco-green);
  background: var(--cereco-white);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(27, 58, 140, .08);
  overflow: hidden;
}
/* Neutralise tout cadre/fond sur le conteneur interne (sinon double encadré) */
.et_pb_blurb.cereco-card .et_pb_blurb_content {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-top: 0;
}

/* ===== Section claire alternée ===== */
.et_pb_section_bg_light,
.cereco-bg-light {
  background-color: var(--cereco-light) !important;
}

/* ===== Bande de réassurance ===== */
.cereco-reassurance .et_pb_blurb_description,
.cereco-reassurance .et_pb_text {
  font-weight: 600;
}

/* ===== Utilitaires couleurs marque ===== */
.cereco-bg-green { background-color: var(--cereco-green) !important; }
.cereco-bg-blue  { background-color: var(--cereco-blue)  !important; }
.cereco-text-white, .cereco-text-white * { color: var(--cereco-white) !important; }

/* Titres en blanc sur sections foncées */
.cereco-bg-blue h1, .cereco-bg-blue h2, .cereco-bg-blue h3,
.cereco-bg-green h1, .cereco-bg-green h2, .cereco-bg-green h3 {
  color: var(--cereco-white);
}

/* ===== Formulaire de devis (CF7) ===== */
.cereco-devis-form .cf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
.cereco-devis-form .cf-row-full { grid-column: 1 / -1; }
.cereco-devis-form label {
  display: block;
  font-weight: 600;
  color: var(--cereco-blue);
  font-family: 'Poppins', sans-serif;
}
.cereco-devis-form .cf-req { color: var(--cereco-green); }
.cereco-devis-form input,
.cereco-devis-form select,
.cereco-devis-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid #d6ddea;
  border-radius: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  background: #fff;
}
.cereco-devis-form input:focus,
.cereco-devis-form select:focus,
.cereco-devis-form textarea:focus {
  border-color: var(--cereco-green);
  box-shadow: 0 0 0 3px rgba(76,187,23,.15);
}
.cereco-devis-form textarea { min-height: 120px; }
.cereco-devis-form .cf-consent {
  margin-top: 8px;
  font-size: 14px;
  color: #44506b;
}
.cereco-devis-form .cf-submit { margin-top: 10px; }
.cereco-devis-form .wpcf7-submit {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
}
.cereco-devis-form .wpcf7-not-valid-tip { color: #c0392b; font-weight: 500; }
.wpcf7-response-output {
  border-radius: 6px;
  padding: 14px 18px !important;
  font-family: 'Poppins', sans-serif;
}
@media (max-width: 767px) {
  .cereco-devis-form .cf-grid { grid-template-columns: 1fr; }
}

/* ===== Cartes sur fond foncé (section Pourquoi) ===== */
.cereco-why .et_pb_blurb,
.et_pb_blurb.cereco-card-dark {
  background: rgba(255, 255, 255, .08);
  border-top: 4px solid var(--cereco-green);
  border-radius: 8px;
}
.cereco-why .et_pb_module_header,
.cereco-why .et_pb_blurb_description,
.cereco-why .et_pb_blurb_description p,
.cereco-card-dark .et_pb_module_header,
.cereco-card-dark .et_pb_blurb_description,
.cereco-card-dark .et_pb_blurb_description p {
  color: #FFFFFF !important;
}

/* Cartes services : hauteur homogène */
.cereco-services .et_pb_blurb.cereco-card {
  height: 100%;
}
.cereco-services .et_pb_column { display: flex; flex-direction: column; }

/* Bande de réassurance : icône alignée */
.cereco-reassurance .et_pb_blurb { background: transparent; box-shadow: none; border: 0; }
.cereco-reassurance .et_pb_main_blurb_image { margin-right: 12px; }

/* Boutons "lien" discrets */
.cereco-hero .et_pb_button { display: inline-block; }

/* ===== Accessibilité focus ===== */
a:focus, button:focus, input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--cereco-green);
  outline-offset: 2px;
}

/* =====================================================================
   AMÉLIORATIONS « taste-skill » (redesign-preserve · VARIANCE 4 / MOTION 3 / DENSITY 4)
   ===================================================================== */

/* --- 1. Typographie : titres resserrés, meilleure hiérarchie --- */
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.16; }
.cereco-hero h1 { letter-spacing: -0.03em; line-height: 1.1; }
.et_pb_blurb .et_pb_module_header { letter-spacing: -0.01em; }
/* Confort de lecture du corps de texte (mesure ~70 caractères) sur les sections de contenu */
.et_pb_text p { max-width: 72ch; }
.et_pb_text[style*="center"] p,
.cereco-hero .et_pb_text p,
[data-icon] ~ .et_pb_text p { max-width: none; }

/* --- 2. Contraste des CTA sur fonds de marque (WCAG AA) --- */
/* Sur la section verte finale : bouton blanc / texte marine (et non vert-sur-vert) */
.cereco-bg-green .et_pb_button,
.cereco-bg-green .et_pb_button.cereco-btn-outline {
  background-color: var(--cereco-white) !important;
  border-color: var(--cereco-white) !important;
  color: var(--cereco-blue) !important;
}
.cereco-bg-green .et_pb_button:hover,
.cereco-bg-green .et_pb_button.cereco-btn-outline:hover {
  background-color: var(--cereco-blue-dark) !important;
  border-color: var(--cereco-blue-dark) !important;
  color: var(--cereco-white) !important;
}
/* Sur le hero marine : le bouton secondaire reste un contour blanc lisible */
.cereco-bg-blue .et_pb_button.cereco-btn-outline {
  background-color: transparent !important;
  border-color: var(--cereco-white) !important;
  color: var(--cereco-white) !important;
}
.cereco-bg-blue .et_pb_button.cereco-btn-outline:hover {
  background-color: var(--cereco-white) !important;
  color: var(--cereco-blue) !important;
}

/* --- 3. Profondeur du hero (dégradé marine + halo vert discret, pas de gradient « IA ») --- */
.cereco-hero.et_pb_section {
  background-image:
    radial-gradient(900px 360px at 78% -12%, rgba(76, 187, 23, .22), transparent 60%),
    radial-gradient(700px 300px at 0% 120%, rgba(76, 187, 23, .10), transparent 55%),
    linear-gradient(157deg, #1f409a 0%, var(--cereco-blue) 55%, var(--cereco-blue-dark) 100%) !important;
}

/* --- 4. Feedback tactile (boutons, cartes) --- */
.et_pb_button {
  transition: transform .15s ease, background-color .25s ease, border-color .25s ease, color .25s ease !important;
}
.et_pb_button:active { transform: translateY(1px) scale(.99); }
.et_pb_blurb.cereco-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.et_pb_blurb.cereco-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(27, 58, 140, .16);
}

/* --- 5. Reveal au scroll : CSS pur, sans JS ni écouteur de scroll, motivé (hiérarchie de lecture) --- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .et_pb_section > .et_pb_row,
    .cereco-services .et_pb_column {
      animation: cerecoFadeUp linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 18%;
    }
    .cereco-services .et_pb_column:nth-child(2) { animation-delay: -0.04s; }
    .cereco-services .et_pb_column:nth-child(3) { animation-delay: -0.08s; }
    .cereco-services .et_pb_column:nth-child(4) { animation-delay: -0.12s; }
    .cereco-services .et_pb_column:nth-child(5) { animation-delay: -0.16s; }
  }
}
@keyframes cerecoFadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- 7. Photos de fond des hero (voile marine pour lisibilité du texte blanc) --- */
.cereco-hero.et_pb_section {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.page-id-897 .cereco-hero.et_pb_section {
  background-image:
    radial-gradient(900px 360px at 80% -10%, rgba(76,187,23,.20), transparent 60%),
    linear-gradient(157deg, rgba(31,64,154,.85) 0%, rgba(27,58,140,.88) 55%, rgba(19,42,102,.93) 100%),
    url(/wp-content/uploads/2026/05/cereco-hero-energie.jpg) !important;
}
.page-id-1166 .cereco-hero.et_pb_section {
  background-image:
    linear-gradient(157deg, rgba(31,64,154,.85) 0%, rgba(27,58,140,.88) 55%, rgba(19,42,102,.93) 100%),
    url(/wp-content/uploads/2026/05/cereco-maison.jpg) !important;
}
.page-id-1167 .cereco-hero.et_pb_section {
  background-image:
    linear-gradient(157deg, rgba(31,64,154,.85) 0%, rgba(27,58,140,.88) 55%, rgba(19,42,102,.93) 100%),
    url(/wp-content/uploads/2026/05/cereco-hero-energie.jpg) !important;
}
.page-id-1141 .cereco-hero.et_pb_section {
  background-image:
    linear-gradient(157deg, rgba(31,64,154,.85) 0%, rgba(27,58,140,.88) 55%, rgba(19,42,102,.93) 100%),
    url(/wp-content/uploads/2026/05/cereco-immeuble-moderne.jpg) !important;
}
.page-id-1168 .cereco-hero.et_pb_section {
  background-image:
    linear-gradient(157deg, rgba(31,64,154,.85) 0%, rgba(27,58,140,.88) 55%, rgba(19,42,102,.93) 100%),
    url(/wp-content/uploads/2026/05/cereco-residence.jpg) !important;
}
.page-id-1169 .cereco-hero.et_pb_section {
  background-image:
    linear-gradient(157deg, rgba(31,64,154,.85) 0%, rgba(27,58,140,.88) 55%, rgba(19,42,102,.93) 100%),
    url(/wp-content/uploads/2026/05/cereco-immeuble-moderne.jpg) !important;
}
.page-id-1170 .cereco-hero.et_pb_section {
  background-image:
    linear-gradient(157deg, rgba(31,64,154,.85) 0%, rgba(27,58,140,.88) 55%, rgba(19,42,102,.93) 100%),
    url(/wp-content/uploads/2026/05/cereco-residence.jpg) !important;
}
.page-id-1171 .cereco-hero.et_pb_section {
  background-image:
    linear-gradient(157deg, rgba(31,64,154,.85) 0%, rgba(27,58,140,.88) 55%, rgba(19,42,102,.93) 100%),
    url(/wp-content/uploads/2026/05/cereco-maison.jpg) !important;
}

/* --- 8. Images de contenu (sections texte + image) --- */
.cereco-textimg .et_pb_column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cereco-content-img,
.cereco-content-img .et_pb_image_wrap { width: 100%; }
.cereco-content-img img {
  width: 100%;
  height: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
@media (max-width: 980px) {
  .cereco-textimg .et_pb_column { display: block; }
  .cereco-content-img img { max-height: 300px; }
}

/* --- 6. Rythme vertical & finitions --- */
.et_pb_accordion .et_pb_toggle { border-radius: 8px; }

/* ======================================================================
   REDESIGN v1.4 — système graphique cohérent (centrage, contraste, cartes)
   ====================================================================== */

:root {
  --cereco-ink: #28324b;      /* texte principal, bon contraste */
  --cereco-muted: #5a6680;    /* texte secondaire */
  --cereco-green-soft: #e9f6e0;
  --cereco-border: #e9edf5;
}

/* ---- Contraste global du texte ---- */
body,
.et_pb_text, .et_pb_text p, .et_pb_text li,
.et_pb_blurb_description, .et_pb_blurb_description p {
  color: var(--cereco-ink);
}
.et_pb_text p { font-size: 17px; line-height: 1.8; }

/* ---- HERO : sous-titre lisible, typographie affirmée ---- */
.cereco-hero .et_pb_heading h1,
.cereco-hero h1 {
  text-shadow: 0 2px 22px rgba(8, 20, 52, .45);
}
.cereco-hero .et_pb_text,
.cereco-hero .et_pb_text p {
  color: #eef3ff !important;
  font-size: 20px !important;
  line-height: 1.6 !important;
  text-shadow: 0 1px 14px rgba(8, 20, 52, .55);
}
.cereco-hero .et_pb_button { margin-top: 14px; }

/* ---- Titres de section : centrés + accent vert ---- */
.et_pb_section .et_pb_heading.et_pb_text_align_center:after {
  content: "";
  display: block;
  width: 62px;
  height: 4px;
  border-radius: 3px;
  background: var(--cereco-green);
  margin: 16px auto 0;
}
/* pas d'accent sous le hero ni quand c'est inutile */
.cereco-hero .et_pb_heading:after { display: none !important; }
/* titres alignés à gauche (sections texte + image) : accent à gauche */
.cereco-textimg .et_pb_heading.et_pb_text_align_left:after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  border-radius: 3px;
  background: var(--cereco-green);
  margin: 14px 0 0;
}

/* ---- CARTES (blurb) : centrées, icône en pastille, hauteur égale ---- */
.et_pb_blurb.cereco-card {
  text-align: center !important;
  background: #fff;
  border: 1px solid var(--cereco-border);
  border-top: 4px solid var(--cereco-green);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(27, 58, 140, .08);
  padding: 32px 24px !important;
  height: 100%;
  margin: 0 !important;
}
.et_pb_blurb.cereco-card .et_pb_blurb_content { max-width: 100%; }
.et_pb_blurb.cereco-card .et_pb_module_header,
.et_pb_blurb.cereco-card .et_pb_blurb_description,
.et_pb_blurb.cereco-card .et_pb_blurb_description p {
  text-align: center !important;
}
.et_pb_blurb.cereco-card .et_pb_module_header { color: var(--cereco-blue) !important; }
.et_pb_blurb.cereco-card .et_pb_blurb_description,
.et_pb_blurb.cereco-card .et_pb_blurb_description p { color: var(--cereco-ink) !important; }
/* Pastille verte autour de l'icône */
.cereco-card .et_pb_main_blurb_image { margin-bottom: 18px; }
.cereco-card .et_pb_main_blurb_image .et-pb-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 78px !important;
  height: 78px !important;
  border-radius: 50%;
  background: var(--cereco-green-soft);
  color: var(--cereco-green) !important;
  font-size: 32px !important;
  margin: 0 auto;
}

/* ---- Hauteur égale des rangées de cartes (navigateurs modernes) ---- */
.et_pb_row:has(.cereco-card) { display: flex; flex-wrap: wrap; align-items: stretch; }
.et_pb_row:has(.cereco-card) > .et_pb_column { display: flex; }
.et_pb_row:has(.cereco-card) > .et_pb_column > .et_pb_module { width: 100%; }

/* ---- CARTES SERVICES (accueil) : colonne = carte, bouton intégré ---- */
.cereco-services .et_pb_row:has(.et_pb_column_1_5) { display: flex; flex-wrap: wrap; align-items: stretch; }
.cereco-services .et_pb_column_1_5 {
  background: #fff;
  border: 1px solid var(--cereco-border);
  border-top: 4px solid var(--cereco-green);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(27, 58, 140, .08);
  padding: 30px 20px 26px;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cereco-services .et_pb_column_1_5:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(27, 58, 140, .16);
}
.cereco-services .et_pb_column_1_5 .et_pb_blurb.cereco-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  flex: 1 1 auto;
}
.cereco-services .et_pb_column_1_5 .et_pb_button_module_wrapper { margin-top: auto; text-align: center; }

/* ---- HIÉRARCHIE DES BOUTONS (lisibilité garantie) ---- */
.et_pb_button.cereco-btn-primary,
.et_pb_button.cereco-btn-primary:visited {
  background-color: var(--cereco-green) !important;
  border: 2px solid var(--cereco-green) !important;
  color: #fff !important;
}
.et_pb_button.cereco-btn-primary:hover {
  background-color: var(--cereco-blue) !important;
  border-color: var(--cereco-blue) !important;
  color: #fff !important;
}
/* Outline (sur fonds foncés) : contour blanc lisible */
.et_pb_button.cereco-btn-outline {
  background-color: transparent !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}
.et_pb_button.cereco-btn-outline:hover {
  background-color: #fff !important;
  color: var(--cereco-blue) !important;
}
/* Blanc (sur fond vert) : fond blanc, texte marine */
.et_pb_button.cereco-btn-white {
  background-color: #fff !important;
  border: 2px solid #fff !important;
  color: var(--cereco-blue) !important;
}
.et_pb_button.cereco-btn-white:hover {
  background-color: var(--cereco-blue-dark) !important;
  border-color: var(--cereco-blue-dark) !important;
  color: #fff !important;
}
/* Lien (secondaire discret) : texte marine + flèche, bien contrasté */
.et_pb_button.cereco-btn-link {
  background-color: transparent !important;
  border: 0 !important;
  color: var(--cereco-blue) !important;
  padding: 8px 6px !important;
  font-weight: 700 !important;
}
.et_pb_button.cereco-btn-link:after {
  content: "\2192" !important;
  opacity: 1 !important;
  margin-left: 6px;
  color: var(--cereco-green) !important;
}
.et_pb_button.cereco-btn-link:hover { color: var(--cereco-green) !important; }

/* ---- BANDE DE RÉASSURANCE : plus lisible, icônes en pastille ---- */
.cereco-reassurance .et_pb_blurb { text-align: left; }
.cereco-reassurance .et_pb_main_blurb_image { margin: 0 14px 0 0; }
.cereco-reassurance .et_pb_main_blurb_image .et-pb-icon {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 46px !important; height: 46px !important;
  border-radius: 50%;
  background: var(--cereco-green-soft);
  color: var(--cereco-green) !important;
  font-size: 20px !important;
}
.cereco-reassurance .et_pb_blurb .et_pb_module_header {
  color: var(--cereco-blue) !important;
  font-size: 16px !important;
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 46px;
}

/* ---- Section "Pourquoi" (cartes sur fond marine) : cohérence ---- */
.cereco-why .et_pb_blurb.cereco-card {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-top: 4px solid var(--cereco-green) !important;
}
.cereco-why .cereco-card .et-pb-icon {
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
}
.cereco-why .cereco-card .et_pb_module_header,
.cereco-why .cereco-card .et_pb_blurb_description,
.cereco-why .cereco-card .et_pb_blurb_description p { color: #fff !important; }

/* ---- Délais & sections de contenu : confort de lecture ---- */
.cereco-delais .et_pb_text p { color: var(--cereco-ink); }
.cereco-textimg .et_pb_text p { color: var(--cereco-ink); }

/* ---- Espacements de section homogènes ---- */
.et_pb_section { }
.cereco-services { padding-top: 76px !important; padding-bottom: 76px !important; }

/* ---- Mobile ---- */
@media (max-width: 980px) {
  .et_pb_row:has(.cereco-card),
  .cereco-services .et_pb_row:has(.et_pb_column_1_5) { display: block; }
  .et_pb_blurb.cereco-card { margin-bottom: 20px !important; }
  .cereco-services .et_pb_column_1_5 { margin-bottom: 20px; }
  .cereco-hero .et_pb_text p { font-size: 18px !important; }
}

/* ======================================================================
   EN-TÊTE SOIGNÉ (v1.4.1) — menu plus joli
   ====================================================================== */
#main-header {
  box-shadow: 0 6px 24px rgba(20, 40, 90, .08);
  border-bottom: 3px solid var(--cereco-green);
}

/* Liens du menu : Poppins, marine, hover vert */
#top-menu li a,
#et-top-navigation #top-menu > li > a {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  color: var(--cereco-blue) !important;
  letter-spacing: .005em;
  transition: color .2s ease;
}
#top-menu > li > a { position: relative; }
#top-menu > li > a:hover { color: var(--cereco-green) !important; }

/* Indicateur vert animé sous l'item actif / survolé */
#top-menu > li > a:after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: var(--cereco-green);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
#top-menu > li:hover > a:after,
#top-menu > li.current-menu-item > a:after,
#top-menu > li.current-menu-ancestor > a:after,
#top-menu > li.current_page_item > a:after { transform: scaleX(1); }
/* item actif en marine, pas le bleu Divi par défaut */
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a,
#top-menu li.current-menu-ancestor > a { color: var(--cereco-blue) !important; }

/* Flèche des sous-menus en vert */
#top-menu li.menu-item-has-children > a:first-child:after,
#et_mobile_nav_menu .mobile_nav .select_page { color: var(--cereco-green); }

/* Sous-menus (dropdowns) en cartes arrondies */
#main-header #top-menu li ul.sub-menu,
#main-header .nav li ul {
  border: 0 !important;
  border-top: 3px solid var(--cereco-green) !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 18px 44px rgba(20, 40, 90, .16) !important;
  background: #fff !important;
  padding: 8px !important;
}
#main-header .nav li li { margin: 0 !important; padding: 0 !important; }
#main-header .nav li li a {
  width: 220px !important;
  border-radius: 8px !important;
  padding: 11px 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--cereco-blue) !important;
  transition: background .18s ease, color .18s ease;
}
#main-header .nav li li a:hover {
  background: var(--cereco-green-soft) !important;
  color: var(--cereco-green) !important;
}

/* Bouton CTA "Demander un devis" en bout de menu */
#top-menu li.menu-cta { display: inline-flex; align-items: center; margin-left: 14px; }
#top-menu li.menu-cta a {
  background: var(--cereco-green) !important;
  color: #fff !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 16px rgba(76, 187, 23, .28);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
#top-menu li.menu-cta a:hover {
  background: var(--cereco-blue) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(27, 58, 140, .3);
}
#top-menu li.menu-cta > a:after { display: none !important; }

/* En-tête fixe (au scroll) : léger fond translucide */
.et-fixed-header#main-header {
  background: rgba(255, 255, 255, .96) !important;
  backdrop-filter: saturate(140%) blur(6px);
}

/* Logo bien centré verticalement */
#logo { margin: auto 0; }

/* ======================================================================
   DARK MODE v2.0 — « canvas » inspiré de la landing THREAD
   Tout le site bascule sur une toile near-black à grille de points,
   accent vert de marque qui « pop », titres blancs, boutons pilule.
   Tout est rétrocompatible : on surcouche les règles claires existantes.
   ====================================================================== */

:root {
  --d-bg:        #0d0e13;   /* toile near-black */
  --d-bg-2:      #14161d;   /* panneau */
  --d-card:      #181b23;   /* carte */
  --d-card-2:    #1e222c;   /* carte survol */
  --d-ink:       #eef1f8;   /* texte principal clair */
  --d-muted:     #9aa4b8;   /* texte secondaire */
  --d-border:    rgba(255,255,255,.09);
  --d-border-2:  rgba(255,255,255,.16);
  --d-green:     #5fd11f;   /* vert marque éclairci pour le dark */
  --d-green-2:   #4CBB17;
  --d-green-glow: rgba(95,209,31,.35);
  --d-blue:      #3b74ff;   /* bleu électrique (accent secondaire, clins d'oeil THREAD) */
  --d-dot:       rgba(255,255,255,.05);
}

/* ---- 0. Toile : fond near-black + grille de points + halo vert ---- */
html, body { background-color: var(--d-bg) !important; }
body {
  color: var(--d-ink) !important;
  background-image:
    radial-gradient(820px 420px at 82% -8%,  rgba(95,209,31,.10), transparent 60%),
    radial-gradient(680px 380px at -6% 8%,   rgba(59,116,255,.07), transparent 55%),
    radial-gradient(var(--d-dot) 1px, transparent 1.4px) !important;
  background-size: auto, auto, 24px 24px !important;
  background-attachment: fixed, fixed, fixed !important;
}
#page-container, #et-main-area, #main-content,
.et_pb_section, .et_pb_section.et_pb_section_bg_light,
.cereco-bg-light, .et_pb_section_bg_light {
  background-color: transparent !important;
}

/* ---- 1. Typographie claire ---- */
body, .et_pb_text, .et_pb_text p, .et_pb_text li,
.et_pb_blurb_description, .et_pb_blurb_description p {
  color: var(--d-ink) !important;
}
h1, h2, h3, h4, h5, h6 { color: var(--d-ink) !important; }
.et_pb_text p, .et_pb_blurb_description p { color: var(--d-muted) !important; }
a { color: var(--d-green); }
a:hover { color: #8af04e; }

/* Accent vert sous les titres de section (repris du clair, version dark) */
.et_pb_section .et_pb_heading.et_pb_text_align_center:after,
.cereco-textimg .et_pb_heading.et_pb_text_align_left:after {
  background: var(--d-green);
  box-shadow: 0 0 18px var(--d-green-glow);
}

/* ---- 2. En-tête : barre sombre translucide, accent vert ---- */
#main-header,
.et-fixed-header#main-header {
  background: rgba(13,14,19,.72) !important;
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--d-border) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.45) !important;
}
#top-menu li a,
#et-top-navigation #top-menu > li > a,
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a,
#top-menu li.current-menu-ancestor > a { color: var(--d-ink) !important; }
#top-menu > li > a:hover { color: var(--d-green) !important; }
#top-menu > li > a:after { background: var(--d-green); box-shadow: 0 0 12px var(--d-green-glow); }
/* dropdowns en panneaux sombres */
#main-header #top-menu li ul.sub-menu,
#main-header .nav li ul {
  background: var(--d-bg-2) !important;
  border-top: 2px solid var(--d-green) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.6) !important;
}
#main-header .nav li li a { color: var(--d-ink) !important; }
#main-header .nav li li a:hover { background: rgba(95,209,31,.12) !important; color: var(--d-green) !important; }
/* CTA pilule vert lumineux */
#top-menu li.menu-cta a {
  background: var(--d-green) !important; color: #07210a !important;
  box-shadow: 0 6px 22px var(--d-green-glow) !important; font-weight: 700 !important;
}
#top-menu li.menu-cta a:hover {
  background: #6fe529 !important; color: #07210a !important;
  transform: translateY(-1px); box-shadow: 0 10px 28px var(--d-green-glow) !important;
}
/* hamburger mobile clair */
#et_mobile_nav_menu .mobile_menu_bar:before { color: var(--d-ink) !important; }
#et_mobile_nav_menu .et_mobile_menu { background: var(--d-bg-2) !important; border-top: 2px solid var(--d-green) !important; }
#et_mobile_nav_menu .et_mobile_menu a { color: var(--d-ink) !important; border-bottom: 1px solid var(--d-border) !important; }

/* ---- 3. HERO : toile sombre, halo vert, titre qui se révèle ---- */
html [class*="page-id-"] .cereco-hero.et_pb_section,
.cereco-hero.et_pb_section {
  background-color: var(--d-bg) !important;
  background-image:
    radial-gradient(900px 420px at 78% -12%, rgba(95,209,31,.22), transparent 58%),
    radial-gradient(720px 360px at 4% 110%,  rgba(59,116,255,.12), transparent 55%),
    radial-gradient(var(--d-dot) 1px, transparent 1.4px),
    linear-gradient(160deg, #11131a 0%, var(--d-bg) 60%, #0a0b0f 100%) !important;
  background-size: auto, auto, 24px 24px, auto !important;
  position: relative;
  overflow: hidden;
}
/* éléments décoratifs flottants (clin d'oeil canvas THREAD, sobres) */
.cereco-hero.et_pb_section:before,
.cereco-hero.et_pb_section:after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
}
.cereco-hero.et_pb_section:before {
  width: 132px; height: 80px; left: 6%; top: 22%;
  border: 1.5px solid var(--d-border-2); border-radius: 12px;
  box-shadow: 0 0 0 6px rgba(95,209,31,.05);
  animation: cerecoFloatA 9s ease-in-out infinite;
}
.cereco-hero.et_pb_section:after {
  width: 18px; height: 18px; right: 12%; top: 30%;
  background: var(--d-green); border-radius: 4px; transform: rotate(45deg);
  box-shadow: 0 0 24px var(--d-green-glow);
  animation: cerecoFloatB 7s ease-in-out infinite;
}
.cereco-hero .et_pb_row { position: relative; z-index: 1; }
.cereco-hero .et_pb_heading h1, .cereco-hero h1 {
  color: #fff !important; text-shadow: 0 4px 40px rgba(0,0,0,.6);
}
.cereco-hero .et_pb_text, .cereco-hero .et_pb_text p {
  color: #cdd5e6 !important; text-shadow: 0 1px 16px rgba(0,0,0,.5);
}

/* Reveal au chargement (hero) — fade + montée + détente du tracking */
@media (prefers-reduced-motion: no-preference) {
  .cereco-hero h1 { animation: cerecoReveal .9s cubic-bezier(.2,.7,.2,1) both; }
  .cereco-hero .et_pb_text { animation: cerecoReveal .9s cubic-bezier(.2,.7,.2,1) .18s both; }
  .cereco-hero .et_pb_button_module_wrapper,
  .cereco-hero .et_pb_button { animation: cerecoReveal .9s cubic-bezier(.2,.7,.2,1) .34s both; }
}
@keyframes cerecoReveal {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); letter-spacing: .04em; }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   letter-spacing: inherit; }
}
@keyframes cerecoFloatA { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-16px) } }
@keyframes cerecoFloatB { 0%,100%{ transform: rotate(45deg) translate(0,0) } 50%{ transform: rotate(45deg) translate(0,14px) } }

/* ---- 4. Boutons : pilule + halo vert ---- */
.et_pb_button, .wpcf7-submit, button[type="submit"],
.et_pb_button.cereco-btn-primary {
  border-radius: 999px !important;
  background-color: var(--d-green) !important;
  border: 2px solid var(--d-green) !important;
  color: #07210a !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 26px var(--d-green-glow) !important;
}
.et_pb_button:hover, .wpcf7-submit:hover, button[type="submit"]:hover,
.et_pb_button.cereco-btn-primary:hover {
  background-color: #6fe529 !important; border-color: #6fe529 !important;
  color: #07210a !important; transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--d-green-glow) !important;
}
/* outline (sur toile) : contour clair lumineux */
.et_pb_button.cereco-btn-outline {
  background: transparent !important; border: 2px solid var(--d-border-2) !important;
  color: var(--d-ink) !important; box-shadow: none !important;
}
.et_pb_button.cereco-btn-outline:hover {
  background: rgba(255,255,255,.06) !important; border-color: #fff !important; color: #fff !important;
}
.et_pb_button.cereco-btn-link {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: var(--d-green) !important;
}
.et_pb_button.cereco-btn-link:after { color: var(--d-green) !important; }
.et_pb_button.cereco-btn-link:hover { color: #8af04e !important; }

/* ---- 5. Bande de réassurance : sur la toile, icônes vertes ---- */
.cereco-reassurance .et_pb_main_blurb_image .et-pb-icon {
  background: rgba(95,209,31,.14) !important; color: var(--d-green) !important;
}
.cereco-reassurance .et_pb_blurb .et_pb_module_header { color: var(--d-ink) !important; }

/* ---- 6. Cartes (services + blurb) : panneaux sombres ---- */
.et_pb_blurb.cereco-card,
.cereco-services .et_pb_column_1_5 {
  background: var(--d-card) !important;
  border: 1px solid var(--d-border) !important;
  border-top: 4px solid var(--d-green) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.5) !important;
}
.et_pb_blurb.cereco-card .et_pb_module_header,
.cereco-services .cereco-card .et_pb_module_header { color: #fff !important; }
.et_pb_blurb.cereco-card .et_pb_blurb_description,
.et_pb_blurb.cereco-card .et_pb_blurb_description p { color: var(--d-muted) !important; }
.cereco-card .et_pb_main_blurb_image .et-pb-icon {
  background: rgba(95,209,31,.14) !important; color: var(--d-green) !important;
}
.et_pb_blurb.cereco-card:hover,
.cereco-services .et_pb_column_1_5:hover {
  background: var(--d-card-2) !important;
  border-color: var(--d-border-2) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,.6), 0 0 0 1px var(--d-green-glow) !important;
}

/* ---- 7. Sections marine/vert d'origine -> toile cohérente ---- */
.cereco-bg-blue:not(.cereco-hero) {
  background-color: var(--d-bg) !important;
  background-image:
    radial-gradient(700px 320px at 80% 0%, rgba(95,209,31,.12), transparent 60%),
    radial-gradient(var(--d-dot) 1px, transparent 1.4px) !important;
  background-size: auto, 24px 24px !important;
}
.cereco-why .et_pb_blurb.cereco-card,
.et_pb_blurb.cereco-card-dark {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--d-border) !important;
  border-top: 4px solid var(--d-green) !important;
}
.cereco-why .cereco-card .et-pb-icon { background: rgba(95,209,31,.14) !important; color: var(--d-green) !important; }
/* La section CTA verte finale : on garde le vert comme « pop », texte sombre lisible */
.cereco-bg-green {
  background-image: linear-gradient(135deg, #56c91b 0%, var(--d-green-2) 60%, #3a9111 100%) !important;
}
.cereco-bg-green h1, .cereco-bg-green h2, .cereco-bg-green h3 { color: #07210a !important; text-shadow: none; }
.cereco-bg-green .et_pb_text, .cereco-bg-green .et_pb_text p { color: #0c2b10 !important; }
.cereco-bg-green .et_pb_button {
  background: #0d0e13 !important; border-color: #0d0e13 !important; color: #fff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
}
.cereco-bg-green .et_pb_button:hover { background: #000 !important; border-color:#000 !important; color:#fff !important; }

/* ---- 8. Images de contenu : cadre sombre ---- */
.cereco-content-img img { box-shadow: 0 18px 48px rgba(0,0,0,.55); border: 1px solid var(--d-border); }

/* ---- 9. Formulaire de devis (CF7) : champs sombres ---- */
.cereco-devis-form label { color: var(--d-ink) !important; }
.cereco-devis-form .cf-req { color: var(--d-green) !important; }
.cereco-devis-form input, .cereco-devis-form select, .cereco-devis-form textarea {
  background: var(--d-bg-2) !important; color: var(--d-ink) !important;
  border: 1px solid var(--d-border) !important;
}
.cereco-devis-form input::placeholder, .cereco-devis-form textarea::placeholder { color: #6b7488 !important; }
.cereco-devis-form input:focus, .cereco-devis-form select:focus, .cereco-devis-form textarea:focus {
  border-color: var(--d-green) !important; box-shadow: 0 0 0 3px rgba(95,209,31,.22) !important;
}
.cereco-devis-form .cf-consent { color: var(--d-muted) !important; }
.cereco-devis-form select option { background: var(--d-bg-2); color: var(--d-ink); }
.wpcf7-response-output { color: var(--d-ink) !important; }

/* ---- 10. Pied de page : toile sombre + accents verts ---- */
#main-footer { background: #0a0b0f !important; border-top: 1px solid var(--d-border); }
#main-footer, #main-footer p, #main-footer li, #main-footer a,
#footer-widgets .et_pb_widget, #footer-info { color: var(--d-muted) !important; }
#main-footer h1, #main-footer h2, #main-footer h3, #main-footer h4,
#footer-widgets .et_pb_widget h4 { color: var(--d-ink) !important; }
#main-footer a:hover { color: var(--d-green) !important; }
#footer-bottom { background: transparent !important; border-top: 1px solid var(--d-border); }

/* ---- 11. Accordéons / toggles (FAQ) ---- */
.et_pb_accordion .et_pb_toggle {
  background: var(--d-card) !important; border: 1px solid var(--d-border) !important;
}
.et_pb_accordion .et_pb_toggle_title { color: var(--d-ink) !important; }
.et_pb_accordion .et_pb_toggle_content, .et_pb_accordion .et_pb_toggle_content p { color: var(--d-muted) !important; }

/* ---- 12. Finitions : sélection, focus, barre de défilement ---- */
::selection { background: rgba(95,209,31,.35); color: #fff; }
a:focus, button:focus, input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--d-green) !important; outline-offset: 2px;
}
* { scrollbar-color: #2a2f3a var(--d-bg); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--d-bg); }
::-webkit-scrollbar-thumb { background: #2a2f3a; border-radius: 8px; border: 3px solid var(--d-bg); }
::-webkit-scrollbar-thumb:hover { background: #3a4150; }

/* ---- 13. Respect du « reduced motion » ---- */
@media (prefers-reduced-motion: reduce) {
  .cereco-hero h1, .cereco-hero .et_pb_text, .cereco-hero .et_pb_button,
  .cereco-hero.et_pb_section:before, .cereco-hero.et_pb_section:after { animation: none !important; }
}

/* ======================================================================
   DARK MODE v2.0.1 — correctifs de spécificité (toile + titres)
   ====================================================================== */
/* Toutes les sections deviennent transparentes -> la toile sombre + grille
   de points du <body> transparaît partout (sauf hero/why/green ci-dessous). */
#page-container .et_pb_section,
#page-container .et_pb_section.et_pb_with_background { background-color: transparent !important; }

/* Hero : toile near-black (re-affirmé en couleur, haute spécificité) */
#page-container .cereco-hero.et_pb_section { background-color: var(--d-bg) !important; }
/* Section "Pourquoi" / bg-blue : bat le navy !important d'origine */
#page-container .cereco-bg-blue:not(.cereco-hero) { background-color: var(--d-bg) !important; }
/* CTA finale : conserve le vert de marque */
#page-container .cereco-bg-green { background-color: var(--d-green-2) !important; }

/* Titres de cartes/sections en blanc lisible (spécificité renforcée) */
#page-container .cereco-card .et_pb_module_header,
#page-container .cereco-services .et_pb_module_header,
#page-container .cereco-card h1, #page-container .cereco-card h2,
#page-container .cereco-card h3, #page-container .cereco-card h4 { color: #fff !important; }
/* Sur la bande verte finale, les titres restent sombres (lisibles sur vert) */
#page-container .cereco-bg-green .et_pb_module_header,
#page-container .cereco-bg-green h1, #page-container .cereco-bg-green h2,
#page-container .cereco-bg-green h3 { color: #07210a !important; }

/* ======================================================================
   DARK MODE v2.0.2 — titres clairs partout (bat le navy !important Divi)
   ====================================================================== */
#page-container h1, #page-container h2, #page-container h3,
#page-container h4, #page-container h5, #page-container h6,
#page-container .et_pb_module_header,
#page-container .et_pb_heading h1, #page-container .et_pb_heading h2,
#page-container .et_pb_heading h3, #page-container .et_pb_heading h4 {
  color: var(--d-ink) !important;
}
/* Cartes "why" / card-dark : titres blancs */
#page-container .cereco-why .et_pb_module_header,
#page-container .cereco-card-dark .et_pb_module_header { color: #fff !important; }
/* Hero : titre blanc pur */
#page-container .cereco-hero h1 { color: #fff !important; }
/* Sections texte+image / délais : corps de texte lisible sur la toile */
#page-container .cereco-textimg .et_pb_text p,
#page-container .cereco-textimg .et_pb_text,
#page-container .cereco-delais .et_pb_text p { color: var(--d-muted) !important; }
/* EXCEPTION : bande verte finale -> titres sombres lisibles sur vert */
#page-container .cereco-bg-green h1, #page-container .cereco-bg-green h2,
#page-container .cereco-bg-green h3, #page-container .cereco-bg-green h4,
#page-container .cereco-bg-green .et_pb_module_header { color: #07210a !important; }