/* =========================================================
   SDT · Bridge Elementor
   Adapte le design system .sdt-* (design.css) à la structure
   DOM d'Elementor (hero container, boutons). design.css gère
   déjà tokens + composants génériques (sections, cartes,
   grilles, trust, steps). Ne PAS charger fse.css (hacks FSE).
   ========================================================= */

:root { --sdt-gutter: 56px; }

/* Base typographique dans le contenu Elementor */
.elementor { font-family: var(--sdt-body); color: var(--sdt-ink); }
.elementor p { font-family: var(--sdt-body); }

/* ---- Héros ----
   Elementor ne rend PAS les classes CSS des conteneurs, seulement celles
   des widgets. On accroche donc le style du texte sur les widgets
   (.sdt-hero-title / -subtitle / -lede). Le fond image + overlay + hauteur
   du héros viennent des réglages NATIFS du conteneur. Sélecteurs à 2 classes
   pour battre le kit Astra (.elementor-heading-title). */
.sdt-hero-title .elementor-heading-title {
  color: #fff;
  font-family: var(--sdt-title);
  font-size: clamp(38px, 6vw, 64px);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 300;
  line-height: 1.05;
  margin: 0;
}
.sdt-hero-title .elementor-heading-title strong,
.sdt-hero-title .elementor-heading-title .sdt-accent {
  color: var(--sdt-orange-soft);
  font-weight: 300;
}
.sdt-hero-title.mini .elementor-heading-title { font-size: clamp(34px, 5vw, 56px); }

.sdt-hero-subtitle .elementor-heading-title {
  margin-top: 14px;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--sdt-title);
}
.sdt-hero-lede .elementor-widget-container,
.sdt-hero-lede p {
  max-width: 580px;
  margin-top: 24px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
}

/* ---- Boutons : widget bouton Elementor ---- */
.sdt-btn-orange .elementor-button {
  background: var(--sdt-orange);
  color: #fff;
  font-family: var(--sdt-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--sdt-radius);
  border: none;
  padding: 16px 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .15s;
}
.sdt-btn-orange .elementor-button:hover { background: var(--sdt-orange-deep); }

.sdt-btn-ghost .elementor-button {
  background: transparent;
  color: var(--sdt-ink-soft);
  border: 2px solid var(--sdt-ink-soft);
  border-radius: var(--sdt-radius);
  font-family: var(--sdt-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 15px 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .15s, color .15s, border-color .15s;
}
/* Texte + icône du bouton ghost en gris foncé (bat le style Astra) */
.sdt-btn-ghost .elementor-button,
.sdt-btn-ghost .elementor-button .elementor-button-text,
.sdt-btn-ghost .elementor-button i,
.sdt-btn-ghost .elementor-button svg {
  color: var(--sdt-ink-soft) !important;
  fill: var(--sdt-ink-soft) !important;
}
.sdt-btn-ghost .elementor-button:hover {
  background: var(--sdt-ink);
  border-color: var(--sdt-orange);
}
.sdt-btn-ghost .elementor-button:hover,
.sdt-btn-ghost .elementor-button:hover .elementor-button-text,
.sdt-btn-ghost .elementor-button:hover i,
.sdt-btn-ghost .elementor-button:hover svg {
  color: #fff !important;
  fill: #fff !important;
}

/* Ghost blanc (posé sur un fond sombre, ex. héros) */
.sdt-btn-ghost-light .elementor-button {
  background: transparent;
  color: #fff;
  border: 1.5px solid #fff;
  border-radius: var(--sdt-radius);
  font-family: var(--sdt-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .15s, color .15s;
}
.sdt-btn-ghost-light .elementor-button:hover { background: #fff; color: var(--sdt-ink); }

/* Grande taille */
.sdt-btn-large .elementor-button { padding: 22px 36px; font-size: 16px; letter-spacing: 0.18em; }

/* Rangée de boutons */
.sdt-cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

/* =========================================================
   Accroches de style sur WIDGETS pour les sections
   (Elementor ne rend pas les classes de conteneurs — on
   cible donc les widgets). Valeurs issues de design.css.
   ========================================================= */

/* Eyebrow de section */
.sdt-eyebrow .elementor-heading-title {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--sdt-body); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--sdt-orange);
  margin: 0 0 14px;
}
.sdt-eyebrow .elementor-heading-title::before {
  content: ''; width: 28px; height: 1px; background: var(--sdt-orange); flex-shrink: 0;
}
.sdt-center .elementor-heading-title { justify-content: center; text-align: center; }

/* Titre de section */
.sdt-title .elementor-heading-title {
  font-family: var(--sdt-title); font-weight: 300; font-size: 38px;
  letter-spacing: 0.06em; color: var(--sdt-ink); text-transform: uppercase;
  line-height: 1.15; margin: 0 0 12px;
}

/* Texte courant / intro */
.sdt-lead .elementor-widget-container, .sdt-lead p {
  font-size: 16px; color: var(--sdt-ink-soft); line-height: 1.7;
}
.sdt-lead p { margin: 0 0 12px; }

/* ---- Bande réassurance ---- */
.sdt-trust-ico .elementor-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(232,133,28,0.1); color: var(--sdt-orange);
  display: inline-grid; place-items: center; font-size: 18px;
}
.sdt-trust-ico .elementor-icon i { color: var(--sdt-orange); font-size: 16px; }
.sdt-trust-ico .elementor-icon svg { width: 18px; height: 18px; fill: var(--sdt-orange); }
.sdt-trust-ttl .elementor-heading-title {
  font-family: var(--sdt-body); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; color: var(--sdt-ink); margin: 0;
}
.sdt-trust-sub .elementor-widget-container, .sdt-trust-sub p {
  font-size: 11px; color: var(--sdt-ink-soft); text-transform: uppercase;
  letter-spacing: 0.14em; margin: 2px 0 0;
}

/* ---- Cartes (types de nid) ---- */
.sdt-card-role .elementor-heading-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sdt-body); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sdt-ink-soft); margin: 0;
}
.sdt-card-role .elementor-heading-title::before {
  content: ''; width: 16px; height: 1px; background: currentColor; flex-shrink: 0;
}
.sdt-card-title .elementor-heading-title {
  font-family: var(--sdt-body); font-size: 18px; font-weight: 700;
  color: var(--sdt-ink); letter-spacing: 0.01em; margin: 0;
}
.sdt-card-text .elementor-widget-container, .sdt-card-text p {
  font-size: 14px; color: var(--sdt-ink-soft); line-height: 1.55; margin: 0;
}

/* ---- Étapes ---- */
.sdt-step-num .elementor-heading-title {
  font-family: var(--sdt-title); font-size: 48px; font-weight: 300;
  color: var(--sdt-orange); line-height: 1; margin: 0;
}
.sdt-step-title .elementor-heading-title {
  font-family: var(--sdt-body); font-size: 18px; font-weight: 700;
  color: var(--sdt-ink); margin: 0 0 6px;
}
.sdt-step-text .elementor-widget-container, .sdt-step-text p {
  font-size: 14px; color: var(--sdt-ink-soft); line-height: 1.55; margin: 0;
}

/* Image d'illustration : coins arrondis + ratio homogène */
.sdt-photo-img img { border-radius: var(--sdt-radius); display: block; }

/* =========================================================
   Composants des pages intérieures (widgets)
   ========================================================= */

/* Checklist (widget icon-list) */
.sdt-checklist-w .elementor-icon-list-icon,
.sdt-checklist-w .elementor-icon-list-icon svg { color: var(--sdt-orange); fill: var(--sdt-orange); }
.sdt-checklist-w .elementor-icon-list-text { font-size: 15px; color: var(--sdt-ink); }

/* Cartes tarif */
.sdt-tarif-price .elementor-heading-title { font-family: var(--sdt-title); font-weight: 300; font-size: 52px; letter-spacing: 0.02em; color: var(--sdt-orange); line-height: 1; margin: 0; }
.sdt-tarif-name .elementor-heading-title { font-family: var(--sdt-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; color: var(--sdt-ink); margin: 0; }
.sdt-tarif-desc .elementor-widget-container, .sdt-tarif-desc p { font-size: 13px; color: var(--sdt-ink-soft); margin: 0; line-height: 1.5; }

/* Stats */
.sdt-stat-num .elementor-heading-title { font-family: var(--sdt-title); font-weight: 300; font-size: 56px; letter-spacing: 0.02em; color: var(--sdt-orange); line-height: 1; margin: 0; }
.sdt-stat-lbl .elementor-heading-title { font-family: var(--sdt-body); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sdt-ink); margin: 0; }
.sdt-stat-desc .elementor-widget-container, .sdt-stat-desc p { font-size: 13px; color: var(--sdt-ink-soft); line-height: 1.5; margin: 0; }

/* Carte zone (encart jaune) */
.sdt-map-title .elementor-heading-title { font-family: var(--sdt-body); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--sdt-orange-deep); margin: 0 0 18px; }

/* Coordonnées */
.sdt-coord-lbl .elementor-heading-title { font-family: var(--sdt-body); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--sdt-ink-soft); margin: 0 0 2px; }
.sdt-coord-val .elementor-widget-container, .sdt-coord-val p, .sdt-coord-val a { color: var(--sdt-orange); font-weight: 600; font-size: 17px; text-decoration: none; }

/* Bloc sombre (contact) */
.sdt-dark-eyebrow .elementor-heading-title { font-family: var(--sdt-body); font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--sdt-orange-soft); margin: 0 0 10px; }
.sdt-dark-title .elementor-heading-title { font-family: var(--sdt-title); font-size: 38px; font-weight: 300; color: #fff; margin: 0 0 10px; line-height: 1.1; }
.sdt-dark-title .elementor-heading-title strong, .sdt-dark-title .elementor-heading-title span { color: var(--sdt-orange-soft); font-weight: 300; }
.sdt-dark-text .elementor-widget-container, .sdt-dark-text p { color: rgba(255,255,255,0.7); font-size: 16px; margin: 0; }

/* Infobox (placeholder formulaire) */
.sdt-infobox-w .elementor-widget-container { border: 1px dashed var(--sdt-line); background: var(--sdt-paper-warm); border-radius: var(--sdt-radius); padding: 28px; font-size: 14px; color: var(--sdt-ink-soft); line-height: 1.7; }
.sdt-infobox-w strong { color: var(--sdt-ink); }

/* Garantie */
.sdt-guarantee-title .elementor-heading-title { font-family: var(--sdt-body); font-weight: 700; font-size: 15px; color: var(--sdt-ink); margin: 0 0 4px; }
.sdt-guarantee-text .elementor-widget-container, .sdt-guarantee-text p { color: var(--sdt-ink-soft); font-size: 14px; margin: 0; }

/* FAQ (widget accordion Elementor) */
.sdt-faq-w .elementor-accordion-item { border: none; border-top: 1px solid var(--sdt-line); }
.sdt-faq-w .elementor-accordion-item:last-child { border-bottom: 1px solid var(--sdt-line); }
.sdt-faq-w .elementor-tab-title { font-family: var(--sdt-body); font-weight: 700; font-size: 16px; color: var(--sdt-ink); padding: 20px 0; }
.sdt-faq-w .elementor-tab-title.elementor-active, .sdt-faq-w .elementor-tab-title:hover { color: var(--sdt-orange); }
.sdt-faq-w .elementor-tab-content { color: var(--sdt-ink-soft); font-size: 14px; line-height: 1.7; padding: 0 0 20px; }
.sdt-faq-w .elementor-accordion-icon { color: var(--sdt-orange); }

/* =========================================================
   Header (Astra) — fond blanc fidèle à la maquette
   ========================================================= */
.ast-primary-header-bar.main-header-bar,
.ast-primary-header-bar {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--sdt-line) !important;
}
/* Liens du menu principal */
.main-header-menu .menu-item > a,
.ast-nav-menu .menu-item > a {
  color: var(--sdt-ink) !important;
  font-family: var(--sdt-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
}
.main-header-menu .menu-item > a:hover,
.main-header-menu .menu-item.current-menu-item > a,
.main-header-menu .menu-item.current-menu-ancestor > a,
.ast-nav-menu .menu-item > a:hover {
  color: var(--sdt-orange) !important;
}
/* Icône burger mobile */
.ast-mobile-menu-buttons-minimal { color: var(--sdt-ink) !important; }

/* =========================================================
   Footer (Astra Footer Builder) — style du design
   3 colonnes de widgets + barre copyright. Responsive natif
   (3-equal desktop → empilé tablette/mobile via Astra).
   ========================================================= */
footer.site-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap { background-color: var(--sdt-ink) !important; }

/* Titres de colonne */
.sdt-fw-title {
  font-family: var(--sdt-title); font-weight: 400; font-size: 15px;
  letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin: 0 0 16px;
}
/* Textes + liens des colonnes */
.site-primary-footer-wrap .footer-widget-area,
.site-primary-footer-wrap p,
.sdt-fw-desc { color: rgba(255,255,255,0.6); font-size: 13px; line-height: 1.7; }
.sdt-fw-desc { margin: 8px 0 0; }
.site-primary-footer-wrap a { color: rgba(255,255,255,0.72); text-decoration: none; font-size: 14px; transition: color .15s; }
.site-primary-footer-wrap a:hover { color: var(--sdt-orange-soft); }
.sdt-fw-nav { list-style: none; margin: 0; padding: 0; }
.sdt-fw-nav li { margin: 0; }
.sdt-fw-nav a { display: block; padding: 5px 0; }
.site-primary-footer-wrap .footer-widget-area p { margin: 0 0 6px; }

/* Barre copyright (below) */
.site-below-footer-wrap,
.ast-footer-copyright {
  color: rgba(255,255,255,0.42); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; border-top: 1px solid rgba(255,255,255,0.1);
}
.site-below-footer-wrap a { color: rgba(255,255,255,0.55); text-decoration: none; }
.site-below-footer-wrap a:hover { color: var(--sdt-orange-soft); }

/* =========================================================
   Hero pleine largeur (bord à bord) — la 1re section de chaque
   page (le héros/l'image du haut) déborde du cadre 1200px d'Astra.
   ========================================================= */
html, body { overflow-x: hidden; }
.elementor > .e-con:first-child {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* =========================================================
   Formulaire de contact (WPForms) aux couleurs du site
   ========================================================= */
.sdt-form-w .wpforms-field-label {
  font-family: var(--sdt-body); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--sdt-ink-soft); margin-bottom: 8px;
}
.sdt-form-w input[type="text"],
.sdt-form-w input[type="email"],
.sdt-form-w input[type="tel"],
.sdt-form-w input[type="number"],
.sdt-form-w textarea,
.sdt-form-w select {
  border: 1px solid var(--sdt-line) !important;
  border-radius: var(--sdt-radius) !important;
  background: #fff !important;
  padding: 12px 14px !important;
  font-family: var(--sdt-body) !important;
  font-size: 15px !important;
  color: var(--sdt-ink) !important;
  width: 100% !important;
  box-shadow: none !important;
}
.sdt-form-w input:focus,
.sdt-form-w textarea:focus,
.sdt-form-w select:focus {
  border-color: var(--sdt-orange) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(232,133,28,0.12) !important;
}
.sdt-form-w textarea { min-height: 140px; }
.sdt-form-w .wpforms-required-label { color: var(--sdt-orange) !important; }
.sdt-form-w button.wpforms-submit,
.sdt-form-w .wpforms-submit {
  background: var(--sdt-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--sdt-radius) !important;
  font-family: var(--sdt-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 16px 28px !important;
  cursor: pointer;
  transition: background .15s;
}
.sdt-form-w button.wpforms-submit:hover,
.sdt-form-w .wpforms-submit:hover { background: var(--sdt-orange-deep) !important; }

/* =========================================================
   Bouton téléphone du header — pilule arrondie (design)
   ========================================================= */
.ast-builder-button-wrap .ast-custom-button {
  background: var(--sdt-orange) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-family: var(--sdt-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  border: none !important;
  transition: background .15s !important;
}
.ast-builder-button-wrap a:hover .ast-custom-button { background: var(--sdt-orange-deep) !important; }

/* =========================================================
   Sous-menu déroulant du header
   ========================================================= */
.main-header-menu .sub-menu,
.ast-nav-menu .sub-menu {
  background: #ffffff !important;
  border: 1px solid var(--sdt-line) !important;
  border-top: 2px solid var(--sdt-orange) !important;
  box-shadow: var(--sdt-shadow-md) !important;
  border-radius: 0 0 var(--sdt-radius) var(--sdt-radius);
  padding: 6px 0 !important;
  min-width: 230px !important;
}
.main-header-menu .sub-menu .menu-item > a,
.ast-nav-menu .sub-menu .menu-item > a {
  color: var(--sdt-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  padding: 11px 22px !important;
}
.main-header-menu .sub-menu .menu-item > a:hover,
.main-header-menu .sub-menu .current-menu-item > a,
.ast-nav-menu .sub-menu .menu-item > a:hover {
  color: var(--sdt-orange) !important;
  background: var(--sdt-paper-warm) !important;
}

/* =========================================================
   Pastilles d'icônes (view "stacked") : fond orange tinté +
   glyphe orange bien visible (comme la maquette).
   ========================================================= */
.elementor-view-stacked .elementor-icon {
  background-color: rgba(232,133,28,0.12) !important;
}
.elementor-view-stacked .elementor-icon i,
.elementor-view-stacked .elementor-icon svg {
  color: var(--sdt-orange) !important;
  fill: var(--sdt-orange) !important;
}

/* =========================================================
   Barre d'appel fixe sur mobile (click-to-call) — le bouton
   téléphone du header n'apparaît pas sur mobile (Astra).
   ========================================================= */
.sdt-mobile-call { display: none; }
.sdt-mobile-call svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 921px) {
  .sdt-mobile-call {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990;
    background: var(--sdt-orange); color: #fff; text-decoration: none;
    padding: 15px 16px; font-family: var(--sdt-body); font-weight: 700;
    font-size: 16px; letter-spacing: 0.06em;
    box-shadow: 0 -3px 14px rgba(0,0,0,0.18);
  }
  .sdt-mobile-call:hover, .sdt-mobile-call:focus { color: #fff; background: var(--sdt-orange-deep); }
  .sdt-mobile-call svg { width: 18px; height: 18px; flex-shrink: 0; }
  body { padding-bottom: 62px !important; }
}

/* =========================================================
   Paddings des boutons — forcer les valeurs de la maquette
   (bat le padding par défaut du widget bouton Elementor)
   ========================================================= */
.sdt-btn-orange .elementor-button,
.sdt-btn-ghost-light .elementor-button { padding: 16px 26px !important; }
.sdt-btn-ghost .elementor-button { padding: 15px 26px !important; }
.sdt-btn-large .elementor-button { padding: 22px 36px !important; }