/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 22 2026 | 12:53:05 */
/* ============================================================
   DI-M — Design Tokens & Utility Classes pour Elementor
   À coller dans : Plugins → Simple Custom CSS and JS → Add Custom CSS
   Titre : "DIM — Design System Global"
   Where to include : Header / Frontend
   ============================================================ */

:root {
  /* ── Couleurs principales ── */
  --dim-teal: #74D1CC;
  --dim-teal-dark: #4FB5B0;
  --dim-teal-deep: #2C8A85;
  --dim-blue: #2F4F68;
  --dim-blue-deep: #1F3B52;
  --dim-anthracite: #1E293B;
  --dim-ink: #0F1A24;

  /* ── Neutres ── */
  --dim-gray-50: #FCFCFA;
  --dim-gray-100: #F5F7F8;
  --dim-gray-200: #ECEFF1;
  --dim-gray-300: #DDE3E6;
  --dim-gray-400: #B5BEC4;
  --dim-gray-500: #6B7682;

  /* ── Sable (accent chaud) ── */
  --dim-sand: #EFE8DE;
  --dim-sand-deep: #E2D7C5;

  /* ── Typographie ── */
  --dim-font-heading: "Outfit", "Inter", sans-serif;
  --dim-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --dim-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ── Radius ── */
  --dim-radius-sm: 6px;
  --dim-radius: 14px;
  --dim-radius-lg: 22px;
  --dim-radius-xl: 32px;
  --dim-btn-radius: 999px;

  /* ── Shadows ── */
  --dim-shadow-1: 0 1px 2px rgba(15, 26, 36, 0.04), 0 1px 0 rgba(15, 26, 36, 0.02);
  --dim-shadow-2: 0 8px 24px -12px rgba(31, 59, 82, 0.12), 0 2px 6px -2px rgba(31, 59, 82, 0.06);
  --dim-shadow-3: 0 24px 60px -24px rgba(31, 59, 82, 0.22), 0 8px 20px -8px rgba(31, 59, 82, 0.08);

  /* ── Layout ── */
  --dim-max: 1240px;
  --dim-section-pad: 120px;
}


/* ============================================================
   UTILITY CLASSES — à utiliser dans Elementor
   Pour appliquer : sur n'importe quel widget Elementor →
   Advanced → CSS Classes → tape le nom de la classe (ex: dim-eyebrow)
   ============================================================ */

/* ── Eyebrow (petit texte mono au-dessus des titres) ── */
.dim-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-family: var(--dim-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--dim-teal-deep) !important;
  font-weight: 500 !important;
}
.dim-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--dim-teal);
}

/* ── Mono label (petit texte technique gris) ── */
.dim-mono {
  font-family: var(--dim-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--dim-gray-500) !important;
  font-weight: 500 !important;
}

/* ── Accent italique teal pour titres ── */
.dim-accent {
  font-family: "Outfit", sans-serif;
  font-style: italic;
  font-weight: 300;
  color: var(--dim-teal-deep);
}

/* ── Bouton primaire (à appliquer sur Elementor Button) ── */
.dim-btn-primary .elementor-button {
  background: var(--dim-ink) !important;
  color: white !important;
  padding: 14px 22px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  border-radius: var(--dim-btn-radius) !important;
  transition: all 0.25s ease !important;
  border: none !important;
}
.dim-btn-primary .elementor-button:hover {
  background: var(--dim-blue-deep) !important;
  transform: translateY(-1px);
  box-shadow: var(--dim-shadow-2);
}

/* ── Bouton secondaire (outline) ── */
.dim-btn-secondary .elementor-button {
  background: transparent !important;
  color: var(--dim-ink) !important;
  padding: 14px 22px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: 1px solid var(--dim-gray-300) !important;
  border-radius: var(--dim-btn-radius) !important;
  transition: all 0.25s ease !important;
}
.dim-btn-secondary .elementor-button:hover {
  border-color: var(--dim-ink) !important;
  background: var(--dim-gray-100) !important;
}

/* ── Bouton large ── */
.dim-btn-large .elementor-button {
  padding: 16px 28px !important;
  font-size: 15px !important;
}

/* ── Card (à appliquer sur containers Elementor) ── */
.dim-card {
  background: white !important;
  border: 1px solid var(--dim-gray-200) !important;
  border-radius: var(--dim-radius-lg) !important;
  padding: 28px !important;
  transition: all 0.3s ease !important;
}
.dim-card:hover {
  border-color: var(--dim-gray-300) !important;
  box-shadow: var(--dim-shadow-2) !important;
  transform: translateY(-2px);
}

/* ── Lead paragraph (intro large) ── */
.dim-lead {
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--dim-gray-500) !important;
  max-width: 56ch;
}

/* ── Stat number ── */
.dim-stat-num {
  font-family: var(--dim-font-heading) !important;
  font-size: 44px !important;
  font-weight: 300 !important;
  color: var(--dim-blue) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
.dim-stat-num sup {
  font-size: 18px;
  color: var(--dim-teal-deep);
  font-weight: 400;
}

/* ── Stat label ── */
.dim-stat-lbl {
  font-size: 13px !important;
  color: var(--dim-gray-500) !important;
  line-height: 1.4 !important;
  margin-top: 12px !important;
}

/* ── Price block ── */
.dim-price {
  font-family: var(--dim-font-heading) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--dim-blue) !important;
}
.dim-price small {
  font-size: 12px;
  color: var(--dim-gray-500);
  margin-left: 6px;
  font-family: "Inter", sans-serif;
}

/* ── Google badge ── */
.dim-google-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  background: white;
  border: 1px solid var(--dim-gray-200);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--dim-gray-500);
  font-family: var(--dim-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ============================================================
   AJUSTEMENTS GLOBAUX TYPOGRAPHIE
   (s'applique partout sans avoir à mettre de classe)
   ============================================================ */

body {
  font-family: var(--dim-font-body);
  color: var(--dim-anthracite);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--dim-font-heading);
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--dim-ink);
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  font-size: clamp(40px, 5.4vw, 76px);
  font-weight: 400;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 400;
  letter-spacing: -0.025em;
}
h3 {
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 500;
}
h4 {
  font-size: 16px;
  font-weight: 600;
}

p { text-wrap: pretty; }


/* ============================================================
   NAV STICKY (à coupler avec header HFE)
   Appliquer la classe .dim-nav sur le wrapper du header HFE
   ============================================================ */

.dim-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252, 252, 250, 0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(31, 59, 82, 0.06);
}


/* ============================================================
   FOOTER DARK
   Appliquer la classe .dim-footer sur le wrapper du footer HFE
   ============================================================ */

.dim-footer {
  background: var(--dim-ink);
  color: rgba(255, 255, 255, 0.75);
}
.dim-footer h4,
.dim-footer h3,
.dim-footer strong {
  color: white;
}
.dim-footer a {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease;
}
.dim-footer a:hover {
  color: var(--dim-teal);
}


/* ============================================================
   RESPONSIVE — réduit le padding section sur mobile
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --dim-section-pad: 64px;
  }
}


/* ═══════════════════════════════════════════════════════ */
/* FIX UAE/ELEMENTOR — Header + Footer pleine largeur     */
/* ═══════════════════════════════════════════════════════ */

/* Annuler les contraintes du container Elementor sur le header */
header.elementor-element,
.elementor-location-header > div,
.elementor-location-header .elementor-element,
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner,
.elementor-location-header .e-flexbox {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Idem pour le footer */
footer.elementor-element,
.elementor-location-footer > div,
.elementor-location-footer .elementor-element,
.elementor-location-footer .e-con,
.elementor-location-footer .e-con-inner,
.elementor-location-footer .e-flexbox {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Force le widget HTML à occuper tout l'espace */
.elementor-location-header .elementor-widget-html,
.elementor-location-footer .elementor-widget-html,
.elementor-location-header .elementor-widget-container,
.elementor-location-footer .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* S'assurer que le body n'a pas de padding parasite */
body.elementor-page {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Hello Elementor : reset des largeurs maximales sur le wrapper site */
.site,
.site-content,
.hfe-site-header,
.hfe-site-footer {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}



/* ═══════════════════════════════════════════════════════ */
/* FIX dropdown Soins — espacement entre titre & desc     */
/* ═══════════════════════════════════════════════════════ */

.dim-nav-dropdown-item {
  padding: 14px 16px !important;
}
.dim-nav-dropdown-item .name {
  display: block !important;
  font-family: var(--dim-font-heading) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--dim-ink) !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}
.dim-nav-dropdown-item .desc {
  display: block !important;
  font-size: 12.5px !important;
  color: var(--dim-gray-500) !important;
  line-height: 1.4 !important;
  margin-top: 0 !important;
}



/* ═══════════════════════════════════════════════════════ */
/* HEADER DI-M — version agrandie (plus de présence)      */
/* ═══════════════════════════════════════════════════════ */

/* Header global : plus de hauteur, plus d'espace */
.dim-nav-inner {
  padding: 18px 48px !important;
  min-height: 88px !important;
  gap: 40px !important;
}

/* Logo plus grand */
.dim-nav-logo {
  gap: 16px !important;
}
.dim-nav-logo-mark {
  width: 44px !important;
}
.dim-nav-logo-text .wm {
  font-size: 28px !important;
  letter-spacing: 0.1em !important;
}
.dim-nav-logo-text .sub {
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
}

/* Liens du menu plus grands */
.dim-nav-links {
  gap: 12px !important;
}
.dim-nav-link {
  padding: 12px 18px !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
}

/* CTA Prendre rendez-vous plus présent */
.dim-nav-cta {
  padding: 14px 26px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}
.dim-nav-cta span {
  font-size: 18px !important;
}

/* Sur les très grands écrans, encore plus d'espace */
@media (min-width: 1400px) {
  .dim-nav-inner {
    padding: 20px 64px !important;
    min-height: 96px !important;
  }
  .dim-nav-logo-mark {
    width: 48px !important;
  }
  .dim-nav-logo-text .wm {
    font-size: 30px !important;
  }
}

/* Mobile : garder compact */
@media (max-width: 1024px) {
  .dim-nav-inner {
    padding: 14px 24px !important;
    min-height: 72px !important;
  }
  .dim-nav-logo-mark {
    width: 38px !important;
  }
  .dim-nav-logo-text .wm {
    font-size: 24px !important;
  }
}

/* ═══════════════════════════════════════════════════════ */
/* HEADER & FOOTER — Étendre sur toute la largeur écran   */
/* ═══════════════════════════════════════════════════════ */

/* Header : pleine largeur avec padding sur les côtés */
.dim-nav-inner {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 64px !important;
}

/* Footer : pleine largeur avec padding sur les côtés */
.dim-footer-inner {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 64px !important;
}

/* Sur très grands écrans, plus d'air encore */
@media (min-width: 1600px) {
  .dim-nav-inner {
    padding: 20px 96px !important;
  }
  .dim-footer-inner {
    padding: 0 96px !important;
  }
}

/* Tablette : padding réduit */
@media (max-width: 1024px) {
  .dim-nav-inner {
    padding: 14px 32px !important;
  }
  .dim-footer-inner {
    padding: 0 32px !important;
  }
}

/* Mobile : padding minimal */
@media (max-width: 768px) {
  .dim-nav-inner {
    padding: 14px 20px !important;
  }
  .dim-footer-inner {
    padding: 0 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════ */
/* FOOTER DI-M — Typographie agrandie                     */
/* ═══════════════════════════════════════════════════════ */

/* Logo DI-M */
.dim-footer-logo-mark {
  width: 46px !important;
}
.dim-footer-logo-text .wm {
  font-size: 28px !important;
  letter-spacing: 0.12em !important;
}
.dim-footer-logo-text .sub {
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
}

/* Tagline brand (texte d'intro sous le logo) */
.dim-footer-tagline {
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin: 0 0 28px !important;
}

/* Social icons IG / FB / LI */
.dim-footer-social a {
  width: 42px !important;
  height: 42px !important;
  font-size: 12px !important;
}

/* Titres de colonnes ("Soins", "Cabinet", "Adresse") */
.dim-footer h4 {
  font-size: 16px !important;
  margin: 0 0 22px !important;
}

/* Liens des colonnes */
.dim-footer-col a {
  font-size: 15.5px !important;
  padding: 8px 0 !important;
}

/* Adresse */
.dim-footer-address {
  font-size: 15.5px !important;
  line-height: 1.75 !important;
}

/* Téléphone (mis en valeur) */
.dim-footer-phone {
  font-size: 18px !important;
  font-weight: 500 !important;
  margin-top: 8px !important;
  display: inline-block !important;
}

/* Email */
.dim-footer-email {
  font-size: 15.5px !important;
}

/* Horaires (Lun-Ven, Sam) */
.dim-footer-hours {
  margin-top: 24px !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  line-height: 1.8 !important;
}

/* Bottom bar ("© 2026 DI-M" + mentions légales) */
.dim-footer-bottom {
  padding-top: 36px !important;
  font-size: 12.5px !important;
  letter-spacing: 0.14em !important;
}
.dim-footer-bottom-links {
  gap: 28px !important;
}

/* Sur très grands écrans, encore un peu plus */
@media (min-width: 1600px) {
  .dim-footer-logo-text .wm {
    font-size: 32px !important;
  }
  .dim-footer-tagline {
    font-size: 17px !important;
  }
  .dim-footer h4 {
    font-size: 17px !important;
  }
  .dim-footer-col a {
    font-size: 16px !important;
  }
  .dim-footer-phone {
    font-size: 20px !important;
  }
}

/* Plus d'espace vertical général pour le footer agrandi */
.dim-footer {
  padding: 110px 0 48px !important;
}
.dim-footer-grid {
  gap: 80px !important;
  padding-bottom: 72px !important;
}

/* ============================================
   CARTE FORMULAIRE CONTACT
   ============================================ */
.dim-form-card {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.dim-form-card .fluentform {
  background: #FFFFFF;
  border: 1px solid #E2E8ED;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 24px rgba(15, 26, 36, 0.04);
}

@media (max-width: 767px) {
  .dim-form-card .fluentform {
    padding: 24px 20px;
    border-radius: 12px;
  }
}

/* Colonne gauche formulaire — page Contact */
.dim-form-wrapper {
  background: #FFFFFF;
  border: 1px solid var(--dim-gray-200, #E2E8ED);
  border-radius: var(--dim-radius-xl, 20px);
  padding: 40px;
}
.dim-form-title {
  font-family: var(--dim-font-heading) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--dim-ink) !important;
  margin-bottom: 28px !important;
}
@media (max-width: 768px) {
  .dim-form-wrapper { padding: 28px; }
}

/* Colonne gauche : cadre blanc + formulaire centré */
.dim-form-col {
  background: #FFFFFF;
  border: 1px solid var(--dim-gray-200, #E2E8ED);
  border-radius: 20px;
  padding: 40px;
  align-items: center;       /* centre horizontalement le contenu */
}

/* Largeur du formulaire dans le cadre */
.dim-form-col .elementor-widget-shortcode {
  width: 100%;
  max-width: 460px;
}

/* Titre centré aussi */
.dim-form-col .elementor-widget-heading {
  width: 100%;
  text-align: center;
}

@media (max-width: 768px) {
  .dim-form-col { padding: 28px; }
}

/* Supprimer la bordure intérieure du formulaire (le doublon) */
.dim-form-col .fluentform {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Supprimer le cadre extérieur */
.dim-form-col {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Plus d'espace entre le label et son champ */
.dim-form-wrapper .fluentform .ff-el-input--label label,
.dim-form-wrapper .fluentform .ff-el-form-control label {
  margin-bottom: 14px !important;
}

/* Plus d'espace entre les groupes de champs (entre un bloc complet et le suivant) */
.dim-form-wrapper .fluentform .ff-el-group {
  margin-bottom: 28px !important;
}

/* Supprimer toute bordure/cadre résiduel autour du widget Code court (formulaire) */
.dim-form-wrapper,
.dim-form-wrapper .elementor-widget-shortcode,
.dim-form-wrapper .elementor-widget-container,
.dim-form-wrapper .fluentform,
.dim-form-wrapper .fluentform form,
.dim-form-wrapper .ff-el-group {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Carte Google Maps dans le cadre */
.dim-contact-info .map-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}