.elementor-kit-6{--e-global-color-primary:#B0357F;--e-global-color-secondary:#C24FA0;--e-global-color-text:#2B2533;--e-global-color-accent:#993F90;--e-global-color-0f8738b:#E3D9CC;--e-global-color-c8a4b47:#FCFAF7;--e-global-color-0d282cb:#EDE6DD;--e-global-color-6eab260:#F8EAF3;--e-global-color-ea4cec4:#6B6577;--e-global-typography-primary-font-family:"Crimson Pro";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"PT Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"PT Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Crimson Pro";--e-global-typography-accent-font-weight:500;color:#2B2533;font-family:"PT Sans", Sans-serif;font-size:17px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 h1{font-family:"Crimson Pro", Sans-serif;font-size:50px;font-weight:700;}.elementor-kit-6 h2{font-family:"Crimson Pro", Sans-serif;font-size:40px;font-weight:700;}.elementor-kit-6 h3{font-family:"Crimson Pro", Sans-serif;font-weight:600;}.elementor-kit-6 h4{font-family:"Crimson Pro", Sans-serif;font-weight:600;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =====================================================================
   SMILE PROVIDER — CSS GLOBAL (design system du prototype)
   1. Tokens · 2. Base · 3. Badge · 4. Boutons · 5. Bandeau RDV
   6. Cartes · 7. Contact · 8. Pied de page · 9. Animations
   10. Header · 11. Hero · 12. Le cabinet
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --white:#FFFFFF; --bone:#FCFAF7; --beige:#EDE6DD; --beige-deep:#E3D9CC;
  --mauve:#C24FA0; --mauve-deep:#B0357F; --mauve-soft:#F8EAF3; --brand-logo:#993F90;
  --ink:#2B2533; --ink-soft:#6B6577;
  --line:rgba(43,37,51,0.10); --line-soft:rgba(43,37,51,0.06);
  --font-serif:'Crimson Pro',Georgia,serif; --font-sans:'PT Sans',Arial,sans-serif;
  --radius-sm:10px; --radius:16px; --radius-lg:24px;
  --shadow-soft:0 18px 50px -24px rgba(43,37,51,0.18);
  --shadow-card:0 10px 30px -18px rgba(43,37,51,0.20);
  --ease:cubic-bezier(0.32,0.72,0,1);
}

/* ---------- 2. BASE ---------- */
html{ scroll-behavior:smooth; }
html, body{ overflow-x:hidden; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* Les ancres du menu ne passent pas sous le header fixe */
#le-cabinet, #nos-soins, #equipement, #galerie, #contact{ scroll-margin-top:92px; }

/* ---------- 3. BADGE / EYEBROW ---------- */
/* padding asymétrique : compense l'absence de jambages (texte tout en capitales)
   et l'interlettrage qui laisse un blanc après la dernière lettre.
   !important : Elementor impose sa propre marge basse aux widgets (spécificité 0,2,0). */
.eyebrow{ display:inline-flex; align-items:center; align-self:flex-start; max-width:max-content;
  font-family:var(--font-sans); font-size:11px; font-weight:700; line-height:1;
  text-transform:uppercase; letter-spacing:0.22em; color:var(--mauve-deep);
  background:var(--mauve-soft); border-radius:999px;
  padding:9px 14px 7px 16px;
  margin-bottom:22px !important; }
.eyebrow.eyebrow-center{ align-self:center; }
.eyebrow-light{ background:rgba(255,255,255,0.14); color:#fff; }

/* Accent italique mauve dans un titre */
.sp-title em{ color:var(--mauve-deep); font-style:italic; }
.title-accent{ color:var(--mauve-deep); font-style:italic; }

/* ---------- 4. BOUTONS ---------- */
/* 4a — boutons des widgets HTML */
.btn{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-sans);
  font-size:0.95rem; font-weight:700; line-height:1; padding:15px 26px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:transform .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--mauve-deep); color:#fff; }
.btn-primary:hover{ background:var(--mauve); color:#fff; }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--mauve); color:var(--mauve-deep); }
.btn .btn-ico{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:999px; background:rgba(255,255,255,0.18); transition:transform .4s var(--ease); flex:none; }
.btn-outline .btn-ico{ background:var(--mauve-soft); }
.btn:hover .btn-ico{ transform:translateX(3px); }
.btn .btn-ico svg{ width:15px; height:15px; }

/* 4b — boutons natifs Elementor : icône nichée dans un cercle */
.sp-btn .elementor-button-content-wrapper{ display:flex; align-items:center; justify-content:center; }
.sp-btn .elementor-button-text{ flex-grow:0; line-height:1; }
.sp-btn .elementor-button-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:999px;
  background:rgba(255,255,255,.18);
  transition:transform .4s var(--ease); }
.sp-btn:hover .elementor-button-icon{ transform:translateX(3px); }
.sp-btn-outline .elementor-button-icon{ background:var(--mauve-soft); }

/* ---------- 5. BANDEAU « PRENDRE RENDEZ-VOUS » ---------- */
.appointment-cta{ display:flex; flex-wrap:wrap; gap:16px; align-items:stretch; max-width:900px; }
.appointment-hours{ display:inline-flex; align-items:center; gap:10px; margin:0; color:#fff;
  font-family:var(--font-sans); font-weight:700; font-size:1.12rem;
  background:rgba(255,255,255,0.14); padding:12px 20px; border-radius:999px; }
.appointment-hours svg{ width:15px; height:15px; flex:none; }

.btn-phone-xl{ flex:0 0 auto; display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  background:#fff; color:var(--mauve-deep); font-family:var(--font-sans);
  font-size:1.05rem; font-weight:700; letter-spacing:0.01em;
  padding:8px 24px 8px 8px; border-radius:999px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,0.4); transition:transform .4s var(--ease); }
.btn-phone-xl:hover{ transform:translateY(-3px); }
.btn-phone-xl .btn-phone-text{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; gap:3px; }
.btn-phone-xl .btn-phone-text small{ font-size:0.72rem; font-weight:600; letter-spacing:0.02em; color:var(--ink-soft); }
.btn-phone-xl .btn-phone-text strong{ font-size:1.1rem; font-weight:700; color:var(--mauve-deep); }
.btn-phone-xl .btn-ico{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:999px; background:var(--mauve-deep); color:#fff; flex:none; transition:transform .4s var(--ease); }
.btn-phone-xl:hover .btn-ico{ transform:scale(1.06); }
.btn-phone-xl .btn-ico svg{ width:17px; height:17px; }

/* Puce à coche */
.tick{ display:inline-flex; align-items:center; color:var(--mauve-deep); flex:none; }
.tick svg{ width:20px; height:20px; }

/* ---------- 6. CARTES ---------- */
/* !important obligatoire : sans lui, l'animation .reveal verrouille transform:none
   après son exécution et neutralise complètement l'effet de survol. */
.sp-card{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.sp-card:hover{ transform:translateY(-6px) !important; box-shadow:var(--shadow-soft); }
.sp-card-sm{ border-radius:16px; }
.sp-card-sm:hover{ transform:translateY(-4px) !important; }

/* ---------- 7. LIGNES DE COORDONNÉES (section Contact) ---------- */
.sp-contact-row{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius);
  transition:border-color .4s var(--ease), transform .4s var(--ease); }
.sp-contact-row:hover{ border-color:var(--beige-deep); transform:translateX(4px) !important; }
.sp-contact-row .label{ font-family:var(--font-sans); font-size:0.78rem; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--ink-soft); font-weight:600; margin-bottom:3px; }
.sp-contact-row .value{ font-family:var(--font-sans); font-size:1.06rem; font-weight:600; color:var(--ink); }
.sp-contact-row .value a{ color:inherit; text-decoration:none; }
.sp-contact-row .value a:hover{ color:var(--mauve-deep); }
.sp-contact-row .sub{ font-family:var(--font-sans); font-size:0.86rem; color:var(--ink-soft); margin-top:2px; }

/* ---------- 8. PIED DE PAGE ---------- */
/* Crédit de réalisation — discret, aucun effet au survol */
.sp-credit{ margin:0; font-family:var(--font-sans); font-size:12px; letter-spacing:0.01em;
  color:#FFFFFFB8; }
.sp-credit a{ color:#FFFFFFB8; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.16); }
.sp-credit a:hover{ color:#FFFFFFB8; border-bottom-color:rgba(255,255,255,0.16); }

/* ---------- 9. ANIMATIONS D'APPARITION ---------- */
.reveal{ animation:sp-reveal .7s var(--ease) both; }
@keyframes sp-reveal{
  from{ opacity:0; transform:translateY(20px); filter:blur(4px); }
  to  { opacity:1; transform:none;            filter:none; }
}

/* Décalages en cascade */
.reveal[data-delay="1"]{ animation-delay:.12s; }
.reveal[data-delay="2"]{ animation-delay:.24s; }
.reveal[data-delay="3"]{ animation-delay:.36s; }
.reveal[data-delay="4"]{ animation-delay:.48s; }

/* Si le JS a pris la main : l'animation attend que l'élément entre dans l'écran.
   Sans JS, le bloc ci-dessus s'exécute normalement — le contenu reste toujours visible.
   Dans l'éditeur Elementor : jamais de mise en pause, tout reste visible. */
html.sp-js .reveal{ animation-play-state:paused; }
html.sp-js .reveal.is-in{ animation-play-state:running; }
body.elementor-editor-active .reveal{ animation-play-state:running !important; }

/* Respect du réglage système « réduire les animations » */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ animation:none; }
}

/* ---------- 10. HEADER (montage natif Elementor) ---------- */
.site-header{
  transition:background-color .4s var(--ease), border-color .4s var(--ease),
             height .4s var(--ease), min-height .4s var(--ease);
  border-bottom:1px solid transparent;
  left:0 !important; right:0 !important;
  width:auto !important; max-width:100% !important;
}
/* le conteneur intérieur suit la hauteur de la barre */
.site-header > .e-con-inner{ height:100%; }

/* État compact au défilement.
   On cible les DEUX noms de classe possibles : .is-scrolled (notre script)
   et .elementor-sticky--effects (si le « Collant » d'Elementor est actif). */
.site-header.is-scrolled,
.site-header.elementor-sticky--effects{
  background:rgba(252,250,247,.90);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line-soft);
  height:72px !important;
  min-height:72px !important;
}

/* Logo : grand en haut de page, réduit au défilement */
.sp-logo img{ height:100px !important; width:auto !important; transition:height .4s var(--ease); }
.site-header.is-scrolled .sp-logo img,
.site-header.elementor-sticky--effects .sp-logo img{ height:48px !important; }

/* Lettrage « Smile Provider » : révélé de gauche à droite */
.sp-word{ max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
  transform:translateX(-14px);
  transition:max-width .55s var(--ease), opacity .45s var(--ease), transform .55s var(--ease); }
.site-header.is-scrolled .sp-word,
.site-header.elementor-sticky--effects .sp-word{ max-width:280px; opacity:1; transform:translateX(0); }

/* Menu : pastille arrondie au survol */
.site-header .elementor-nav-menu a{ border-radius:999px; }

/* Décalage sous la barre d'administration (visible uniquement quand tu es connecté) */
body.admin-bar .site-header{ top:32px !important; }
@media (max-width:782px){ body.admin-bar .site-header{ top:46px !important; } }

/* --- Bureau : logo | menu | téléphone, écarts identiques ---
   L'ordre du Navigateur est logo → téléphone → menu : `order` remet le menu
   au milieu. C'est « Justifier : Espacer » qui égalise ensuite les écarts. */
@media (min-width:1025px){
  .sp-h-left { order:1; }
  .site-header .elementor-widget-nav-menu{ order:2; }
  .sp-h-right{ order:3; }
}

/* --- Tablette & mobile : logo à gauche, téléphone + hamburger groupés à droite --- */
@media (max-width:1024px){
  .sp-word{ display:none; }
  .sp-logo img{ height:62px !important; }

  /* le bloc logo absorbe l'espace libre et pousse le reste à droite */
  .sp-h-left { margin-right:auto !important; }

  /* ordre à l'écran : logo, téléphone, hamburger */
  .sp-h-right{ order:2; }
  .site-header .elementor-widget-nav-menu{ order:3; }

  /* bouton téléphone : icône seule */
  .site-header .elementor-button-text{ display:none; }
  .site-header .elementor-button{ padding:11px !important; }
  .site-header .elementor-button-icon{ margin:0 !important; }
}

/* ---------- 11. HERO (montage natif) ---------- */
.sp-hero{ position:relative; overflow:hidden; }

/* Halo mauve diffus — z-index 0 : il reste SOUS le voile, comme dans la version HTML */
.sp-hero::before{
  content:""; position:absolute; top:-200px; right:-160px;
  width:620px; height:620px; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(153,63,144,.14), transparent 62%);
}
/* Voile clair dégradé : texte lisible à gauche, photo dégagée à droite */
.sp-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(252,250,247,.99) 0%,
    rgba(252,250,247,.96) 42%,
    rgba(252,250,247,.55) 66%,
    rgba(252,250,247,.06) 88%);
}
/* Le contenu passe au-dessus des deux calques */
.sp-hero-inner{ position:relative; z-index:2; }

/* Le padding passe À L'INTÉRIEUR du bloc 1200, comme la version HTML */
.sp-hero-inner > .e-con-inner{ padding-left:24px; padding-right:24px; }

/* « Smile Provider » reste sur une seule ligne */
.sp-hero .sp-title em{ white-space:nowrap; }

/* Hero — mobile : le voile passe en vertical */
@media (max-width:860px){
  .sp-hero::after{
    background:linear-gradient(180deg,
      rgba(252,250,247,.97) 0%, rgba(252,250,247,.90) 55%, rgba(252,250,247,.55) 100%);
  }
}
/* ---------- 12. SECTION « LE CABINET » ---------- */
/* Tablette : le titre passe en pleine largeur, photo centrée, texte dessous.
   display:contents efface la boîte de la colonne de droite : ses deux widgets
   deviennent des blocs de la rangée et peuvent donc être réordonnés. */
@media (min-width:768px) and (max-width:1024px){
  .sp-about-row{ flex-wrap:wrap !important; gap:32px !important; }
  .sp-about-text{ display:contents; }

  .sp-about-row .sp-title{ order:1; flex:0 0 100%; }

  .sp-about-photo{ order:2; flex:0 0 auto;
    width:min(560px, 100%) !important;
    margin-left:auto !important; margin-right:auto !important;
    min-height:420px !important; }

  .sp-about-row .elementor-widget-text-editor{ order:3; flex:0 0 100%; }
}

/* Mobile : photo et texte empilés sur toute la largeur
   (ils étaient figés à 60 % / 40 % sur tous les écrans) */
@media (max-width:767px){
  .sp-about-row{ gap:28px !important; }
  .sp-about-photo, .sp-about-text{ flex:1 1 100% !important; width:100% !important; }
}

/* ---------- 13. SECTION CONTACT — tablette & mobile ---------- */
@media (max-width:1024px){
  #contact{ padding-top:80px !important; padding-bottom:80px !important; }

  /* la carte : hauteur stricte */
  #contact .elementor-widget-google_maps,
  #contact .elementor-widget-google_maps .elementor-widget-container,
  #contact .elementor-widget-google_maps .elementor-custom-embed{
    height:340px !important; min-height:0 !important; }
  #contact .elementor-widget-google_maps iframe{ height:340px !important; }

  /* les colonnes ne s'étirent plus, elles suivent leur contenu */
  #contact .e-con{ align-items:flex-start !important; align-content:flex-start !important; }
  #contact .e-con > .e-con{ height:auto !important; min-height:0 !important; }
}
/* ---------- BANDEAU RDV — mobile : horaires plus compacts ---------- */
@media (max-width:767px){
  .appointment-hours{ font-size:1rem; padding:10px 16px; }
}
/* ---------- 15. TEXTES PAR LANGUE (header / footer) ---------- */
.sp-fr, .sp-nl, .sp-en{ display:none !important; }
html[lang^="fr"] .sp-fr,
html[lang^="nl"] .sp-nl,
html[lang^="en"] .sp-en{ display:block !important; }

/* =====================================================================
   16. SÉLECTEUR DE LANGUE POLYLANG — design du prototype
   Header : pastille « 🌐 FR ⌄ » qui ouvre un menu déroulant
   Footer : 3 pastilles FR · NL · EN
   ===================================================================== */

/* ---------- HEADER : le déclencheur ---------- */
.sp-lang{
  position:relative;
  display:inline-flex; align-items:center;
  padding:9px 32px 9px 33px;
  border:1px solid var(--line); border-radius:999px;
  font-family:var(--font-sans); font-size:0.85rem; font-weight:600; letter-spacing:0.04em;
  color:var(--ink); cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease);
  background-repeat:no-repeat, no-repeat;
  background-position:13px center, right 13px center;
  background-size:13px 13px, 12px 12px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2533' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.5 2.5 16 0 18M12 3c-2.5 2.5-2.5 16 0 18'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2533' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.sp-lang:hover{ border-color:var(--mauve); color:var(--mauve-deep); }
.sp-lang .elementor-widget-container{ position:static; }

/* le code de la langue courante, lu sur l'attribut lang du <html> */
html[lang^="fr"] .sp-lang::after{ content:"FR"; }
html[lang^="nl"] .sp-lang::after{ content:"NL"; }
html[lang^="en"] .sp-lang::after{ content:"EN"; }

/* ---------- HEADER : le menu déroulant ---------- */
.sp-lang ul{
  position:absolute; top:calc(100% + 10px); right:0; min-width:170px;
  list-style:none; margin:0; padding:8px;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-card); z-index:1002;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.sp-lang:hover ul, .sp-lang:focus-within ul{ opacity:1; visibility:visible; transform:translateY(0); }
.sp-lang li{ margin:0; }
.sp-lang li a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:8px; text-decoration:none;
  font-size:0.9rem; font-weight:400; color:var(--ink);
  transition:background-color .2s var(--ease);
}
.sp-lang li a:hover{ background:var(--mauve-soft); }
.sp-lang .current-lang a{ color:var(--mauve-deep); font-weight:600; }
/* le petit code gris à droite de chaque langue */
.sp-lang li a::after{ font-size:0.72rem; font-weight:600; letter-spacing:0.08em; color:var(--ink-soft); }
.sp-lang .lang-item-fr a::after{ content:"FR"; }
.sp-lang .lang-item-nl a::after{ content:"NL"; }
.sp-lang .lang-item-en a::after{ content:"EN"; }

/* masqué sur tablette et mobile — les langues restent accessibles au pied de page */
@media (max-width:1024px){ .site-header .sp-lang{ display:none !important; } }

/* ---------- FOOTER : 3 pastilles ---------- */
.sp-lang-foot ul{ display:flex; gap:8px; list-style:none; margin:0; padding:0; }
.sp-lang-foot li{ margin:0; }
.sp-lang-foot li a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; border-radius:999px; text-decoration:none;
  border:1px solid rgba(255,255,255,0.16); color:rgba(255,255,255,0.72);
  font-family:var(--font-sans); font-weight:600; letter-spacing:0.06em; font-size:0;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.sp-lang-foot li a::after{ font-size:0.78rem; }
.sp-lang-foot .lang-item-fr a::after{ content:"FR"; }
.sp-lang-foot .lang-item-nl a::after{ content:"NL"; }
.sp-lang-foot .lang-item-en a::after{ content:"EN"; }
.sp-lang-foot li a:hover,
.sp-lang-foot .current-lang a{ background:var(--mauve); border-color:var(--mauve); color:#fff; }

/* ---------- 17. PAGES LÉGALES ---------- */
.sp-legal{ font-family:var(--font-sans); color:var(--ink-soft); font-size:1rem; line-height:1.7; }
.sp-legal h2{ font-family:var(--font-serif); font-size:1.6rem; font-weight:700; color:var(--ink); margin:44px 0 14px; }
.sp-legal h3{ font-family:var(--font-serif); font-size:1.15rem; font-weight:600; color:var(--ink); margin:28px 0 10px; }
.sp-legal p{ margin:0 0 14px; }
.sp-legal ul{ margin:0 0 16px; padding-left:20px; }
.sp-legal li{ margin-bottom:8px; }
.sp-legal strong{ color:var(--ink); font-weight:700; }
.sp-legal a{ color:var(--mauve-deep); text-decoration:none; border-bottom:1px solid rgba(176,53,127,.3); }
.sp-legal a:hover{ border-bottom-color:var(--mauve-deep); }/* End custom CSS */