/* =========================================================
   ORTHODONTIE POUR TOUS — Maquette homepage
   Base : UIkit v3 — surcouche design sur-mesure.
   Motif fil rouge : carrés colorés du logo + courbe sourire.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --blue:#2d73b9;
  --blue-d:#205a92;
  --blue-dark:#1d537f;
  --orange:#e1892f;
  --green:#93c94f;
  --yellow:#f4c81e;

  --ink:#15202b;
  --ink-soft:#46586a;
  --muted:#7c8aa0;
  --line:#e7edf4;
  --bg:#ffffff;
  --bg-soft:#f4f8fc;
  --bg-tint:#eef4fb;
  --navy:#0f2235;

  --radius:22px;
  --radius-sm:14px;
  --radius-lg:32px;
  --shadow-sm:0 6px 20px -8px rgba(20,40,70,.18);
  --shadow:0 24px 60px -22px rgba(20,50,90,.30);
  --shadow-lg:0 40px 90px -30px rgba(20,50,90,.40);

  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-head:"Sora",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}

/* ---------- BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg); line-height:1.6; font-size:17px; overflow-x:hidden; }
h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.08; margin:0; color:var(--ink); letter-spacing:-.02em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
/* neutralise le style de lien par défaut d'UIkit (couleur + soulignement au survol) */
a:hover{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.uk-container{ max-width:var(--maxw); }



/* ---------- BUTTONS (+ hover animés) ---------- */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-head); font-weight:600; font-size:.98rem; text-decoration:none;
  padding:.85em 1.55em; border-radius:100px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn:hover{ text-decoration:none; }
.btn--lg{ padding:1.05em 2em; font-size:1.02rem; }
/* sweep brillant */
.btn::before{
  content:""; position:absolute; top:0; left:-130%; width:65%; height:100%; z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg); transition:left .7s var(--ease);
}
.btn:hover::before{ left:150%; }
.btn__arrow{ transition:transform .3s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(5px); }

.btn--primary,.btn--primary:hover,.btn--primary:focus{ background:var(--blue); color:#fff; }
.btn--primary{ box-shadow:0 14px 28px -12px rgba(45,115,185,.7); }
.btn--primary:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 26px 44px -14px rgba(45,115,185,.85); }
.btn--primary:active{ transform:translateY(-1px) scale(.99); }

.btn--orange,.btn--orange:hover,.btn--orange:focus{ background:var(--orange); color:#fff; }
.btn--orange{ box-shadow:0 14px 28px -12px rgba(225,137,47,.7); }
.btn--orange:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 26px 44px -14px rgba(225,137,47,.85); }

.btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover,.btn--ghost:focus{ transform:translateY(-3px); border-color:var(--blue); color:var(--blue); box-shadow:var(--shadow-sm); }
.btn--ghost-light,.btn--ghost-light:hover,.btn--ghost-light:focus{ color:#fff; }
.btn--ghost-light{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.35); }
.btn--ghost-light:hover{ background:rgba(255,255,255,.18); border-color:#fff; transform:translateY(-3px); }

/* ---------- EYEBROW / TITLES ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-head); font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); }
.eyebrow--center{ justify-content:center; }
.eyebrow--light{ color:#bcd4ee; }
.eyebrow__sq{ width:12px; height:12px; border-radius:3px; background:var(--orange); transform:rotate(8deg); }
.eyebrow--light .eyebrow__sq{ background:var(--green); }

.section-head{ max-width:640px; margin:0 auto 56px; text-align:center; }
.section-head .eyebrow{ margin-bottom:14px; }
.section-title{ font-size:clamp(2rem,4.2vw,3.1rem); font-weight:700; }
.section-sub{ margin-top:16px; color:var(--ink-soft); font-size:1.08rem; }
.section-head--dark .section-title, .section-head--dark .section-sub{ color:#fff; }

.mark{ position:relative; white-space:nowrap; }
.mark::after{ content:""; position:absolute; left:-2px; right:-2px; bottom:.06em; height:.32em; border-radius:6px; z-index:-1; opacity:.55; }
.mark--blue::after{ background:var(--blue); }
.mark--orange::after{ background:var(--orange); }
.mark--green::after{ background:var(--green); }
.grad-text{ background:linear-gradient(100deg,var(--blue),#5aa0e0 60%,var(--green)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- ALERT BAR ---------- */
.alert-bar{ margin:0; padding:0; border-radius:0; background:linear-gradient(90deg,var(--navy),#1b3b5c); color:#eaf2fb; font-size:.92rem; }
.alert-bar__inner{ max-width:var(--maxw); margin-inline:auto; padding:9px 24px; display:flex; align-items:center; gap:12px; }
.alert-bar__inner p{ margin:0; flex:1; min-width:0; }
.alert-bar__dot{ width:9px; height:9px; border-radius:50%; background:var(--green); flex:none; box-shadow:0 0 0 0 rgba(147,201,79,.7); animation:pulse 2.2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(147,201,79,0);} 100%{ box-shadow:0 0 0 0 rgba(147,201,79,0);} }
.alert-bar__close{ color:#cfe0f1; flex:none; }
.alert-bar__close:hover{ color:#fff; }

/* ---------- NAVBAR (UIkit override) ---------- */

.home .nav.uk-navbar-nav > li > a { color: white !important }
.home .uk-sticky-fixed .nav.uk-navbar-nav > li > a { color: var(--ink-soft) !important }
.home .uk-sticky-fixed .header.uk-navbar-container {
   background-color: white;
}

.brand__logo__contrast { display: none; }
.uk-sticky-fixed .brand__logo:not(.brand__logo__contrast) { display: none; }
.uk-sticky-fixed .brand__logo__contrast { display: block; }

/* Fond blanc permanent sur toutes les pages sauf la homepage */
body:not(.home) .header.uk-navbar-container {
   background: #fff !important;
   backdrop-filter: none !important;
}
body:not(.home) .is-stuck .header.uk-navbar-container {
   background: #fff !important;
   box-shadow: 0 8px 30px -18px rgba(20,50,90,.5);
}

.header.uk-navbar-container {
   display:flex; 
   align-items:center; 
   background:rgba(255,255,255,.85); 
   background:transparent; 
   backdrop-filter:blur(14px); 
   transition:box-shadow .3s, background .3s;
  /* pleine largeur : logo à 25px du bord gauche, groupe de droite à 25px du bord droit */
  padding-inline:25px; }
/* menu central en flux (évite le chevauchement du centrage absolu d'UIkit) */
.header .uk-navbar-center.nav-desktop{ position:static; transform:none; top:auto; left:auto; flex:1 1 0; min-width:0; justify-content:center; }
.is-stuck .header.uk-navbar-container{ background:rgba(255,255,255,.96); box-shadow:0 8px 30px -18px rgba(20,50,90,.5); }
.header .uk-navbar-left, .header .uk-navbar-right, .header .uk-navbar-center{ min-height:var(--navh,112px); transition:min-height .3s var(--ease); }
.is-stuck .header{ --navh:82px; }
.brand{ padding:0; }

/* bascule menu / hamburger à 1400px */
.header .uk-navbar-toggle.nav-toggle{ display:none; }
@media (max-width:1400px){
  .uk-navbar-center.nav-desktop{ display:none; }
  .header .uk-navbar-toggle.nav-toggle{ display:flex; }
}
.brand__logo{ height:100px; width:auto; transition:height .3s var(--ease); }
.is-stuck .brand__logo{ height:62px; }

.nav.uk-navbar-nav{ gap:2px; }
.nav.uk-navbar-nav > li > a{
  position:relative; min-height:var(--navh,112px); padding:0 16px; text-transform:none; font-family:var(--font-head);
  font-weight:500; font-size:.96rem; color:var(--ink-soft); transition:color .2s; white-space:nowrap;
}
.nav.uk-navbar-nav > li > a::after{ content:""; position:absolute; left:16px; right:16px; bottom:calc(50% - 1em); height:2px; background:var(--blue); transform:scaleX(0); transform-origin:center; transition:transform .3s var(--ease); border-radius:2px; }
.nav.uk-navbar-nav > li > a:hover{ color:var(--blue); }
.nav.uk-navbar-nav > li > a:hover::after{ transform:scaleX(1); }

.header__phone{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:600; font-size:.92rem; color:var(--ink); margin-right:18px; }
.header__phone span[uk-icon]{ color:var(--blue); }
.header__phone:hover{ color:var(--blue); }
.header__cta{ margin-left:4px; }
.header .uk-navbar-toggle{ color:var(--ink); padding-left:14px; }

/* ---------- OFFCANVAS (menu mobile) ---------- */
.offcanvas{ background:#fff; padding-top:64px; width:min(85vw,330px); }
.offcanvas .uk-offcanvas-close{ color:var(--ink); }
.offcanvas .uk-offcanvas-close:hover{ color:var(--blue); }
.offcanvas__logo{ display:block; width:100%; height:auto; margin:0 auto 28px; }
.offcanvas__nav{ margin-bottom:26px; border-top:1px solid var(--line); padding-top:10px; }
.offcanvas__nav li{ border-bottom:1px solid var(--line); }
.offcanvas__nav a{ font-family:var(--font-head); font-weight:500; font-size:1.06rem; color:var(--ink) !important; padding:.85em 0; }
.offcanvas__nav a:hover{ color:var(--blue) !important; }
.offcanvas__actions{ display:flex; flex-direction:column; gap:12px; }
.offcanvas .btn{ width:100%; }
/* bouton téléphone secondaire, lisible sur fond blanc */
.offcanvas .btn--ghost,.offcanvas .btn--ghost:hover,.offcanvas .btn--ghost:focus{ color:var(--blue); }
.offcanvas .btn--ghost{ background:var(--bg-tint); border-color:transparent; }
.offcanvas .btn--ghost:hover{ background:#e3eef9; transform:translateY(-2px); }

/* ---------- SHARED BG ELEMENTS ---------- */
.blob{ position:absolute; opacity:.5; }
.blob path{ fill:currentColor; }
.dot-grid{ position:absolute; width:240px; height:240px; background-image:radial-gradient(currentColor 2px,transparent 2px); background-size:20px 20px; color:#c9dcef; opacity:.5; }
.dot-grid--right{ right:-40px; top:60px; }

.sq--blue,.sq--blue2{ fill:var(--blue); background:var(--blue); }
.sq--yellow{ fill:var(--yellow); background:var(--yellow); }
.sq--green{ fill:var(--green); background:var(--green); }
.sq--orange{ fill:var(--orange); background:var(--orange); }

/* ---------- IMAGE PLACEHOLDER FALLBACK ---------- */
.ph-img{ width:100%; height:100%; object-fit:cover; }
.ph-fallback{ display:none; position:absolute; inset:0; }
.ph-img.is-broken{ display:none; }
.ph-img.is-broken + .ph-fallback{ display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--bg-tint),#d9e7f6); color:var(--blue-d); font-family:var(--font-head); font-weight:600; font-size:.9rem; text-align:center; padding:10px; }
.ph-img.is-broken + .ph-fallback::before{ content:"🦷 " attr(data-label); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; padding:60px 0 100px; margin-top: -112px; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; pointer-events:none; }
.hero .blob--1{ color:#d7e8fa; width:760px; height:760px; top:-220px; right:-180px; }
.hero .blob--2{ color:#eaf6e0; width:520px; height:520px; bottom:-200px; left:-200px; }
.hero .dot-grid{ top:200px; left:-60px; }

/* ---- Variante vidéo en arrière-plan ---- */
.hero--video{ display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(580px,86vh,920px); padding:140px 0 120px; background:var(--navy); }
.hero--video .hero__bg{ z-index:0; }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Voile dégradé : lisibilité du texte clair + tons de la marque */
.hero__overlay{ position:absolute; inset:0;
  background:
    linear-gradient(105deg, rgba(15,34,53,.86) 0%, rgba(15,34,53,.62) 42%, rgba(29,83,127,.30) 72%, rgba(45,115,185,.18) 100%),
    linear-gradient(0deg, rgba(15,34,53,.55), rgba(15,34,53,0) 38%); }
.hero--video .dot-grid{ top:auto; bottom:90px; left:auto; right:40px; opacity:.5; mix-blend-mode:soft-light; }

.hero__inner{ position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero--video .hero__inner{ display:block; width:70%; max-width:none; }
.hero__content{ padding:24px 0 30px; }
.hero--video .hero__content{ max-width:none; padding:0; }
.hero .eyebrow{ margin-bottom:20px; }
.hero__title{ font-size:clamp(2.6rem,5.6vw,4.6rem); font-weight:800; }
.hero--video .hero__title{ color:#fff; text-shadow:0 2px 30px rgba(8,20,35,.45); }
.hero__lead{ margin:24px 0 32px; font-size:1.18rem; color:var(--ink-soft); max-width:30em; }
.hero--video .hero__lead{ color:#e7eef6; text-shadow:0 1px 16px rgba(8,20,35,.4); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero__trust{ margin-top:30px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--ink-soft); font-size:.95rem; }
.hero--video .hero__trust{ color:#cfdcea; }
.hero--video .hero__trust strong{ color:#fff; }
.hero__stars{ color:var(--yellow); letter-spacing:1px; font-size:1.05rem; }


/* Signature courbe sourire — centrée, sous l'image, bien aérée */
.smile-signature{ position:relative; z-index:2; max-width:420px; margin:34px auto 0; padding-inline:24px; }
.smile-curve{ width:100%; height:auto; filter:drop-shadow(0 8px 12px rgba(20,40,70,.10)); overflow:visible; }
.smile-curve #smilePath{ stroke-dasharray:520; stroke-dashoffset:520; animation:draw 1.6s var(--ease) .3s forwards; }
.hero--video .smile-signature{ margin-top:46px; }
.hero--video .smile-curve{ filter:drop-shadow(0 6px 18px rgba(8,20,35,.5)); }
.hero--video .smile-curve #smilePath{ stroke:#fff; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.smile-curve .sq{ transform-box:fill-box; transform-origin:center; opacity:0; animation:sqpop .55s var(--ease) forwards; }
@keyframes sqpop{ from{ opacity:0; transform:scale(0) translateY(8px);} to{ opacity:1; transform:scale(1);} }
.smile-curve .sq--blue{ animation-delay:.7s; }
.smile-curve .sq--yellow{ animation-delay:.85s; }
.smile-curve .sq--green{ animation-delay:1s; }
.smile-curve .sq--orange{ animation-delay:1.15s; }
.smile-curve .sq--blue2{ animation-delay:1.3s; }

/* quickbar */
.quickbar{ position:relative; z-index:4; max-width:980px; margin:40px auto -44px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 12px; display:flex; align-items:center; justify-content:space-around; gap:8px; }
.quickbar__item{ display:flex; align-items:center; gap:14px; padding:6px 14px; }
.quickbar__ico{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb,var(--c) 12%,#fff); }
.quickbar__item small{ display:block; color:var(--muted); font-size:.78rem; }
.quickbar__item strong{ font-family:var(--font-head); font-size:1rem; }
.quickbar__sep{ width:1px; height:42px; background:var(--line); }

/* =========================================================
   WELCOME
   ========================================================= */
.welcome{ padding:130px 0 110px; background:linear-gradient(180deg,#fff,var(--bg-soft)); }
.welcome__inner{ text-align:center; }
.welcome .eyebrow{ margin-bottom:18px; }
.welcome__title{ font-size:clamp(2.2rem,5vw,3.6rem); font-weight:700; }
.welcome__statement{ margin:28px auto 0; max-width:42em; font-size:1.22rem; color:var(--ink-soft); }
.welcome__statement strong{ color:var(--ink); }
.stats{ margin-top:60px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat{ position:relative; padding:26px 14px; }
.stat:not(:last-child)::after{ content:""; position:absolute; right:-12px; top:24%; height:52%; width:1px; background:var(--line); }
.stat__num{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(2.4rem,4vw,3.2rem); color:var(--blue); line-height:1; letter-spacing:-.03em; }
.stat__label{ display:block; margin-top:10px; color:var(--ink-soft); font-size:.95rem; }

/* =========================================================
   SOINS
   ========================================================= */
.soins{ position:relative; padding:110px 0; background:var(--bg-soft); overflow:hidden; }
.soins__grid{ margin-top:10px; }
.care-card{ position:relative; height:100%; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; transition:transform .35s var(--ease), box-shadow .35s var(--ease); overflow:hidden; }
.soins__grid > div:nth-child(2){ margin-top:30px; }
.care-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
/* carré coloré du logo en filigrane (rappel des couleurs) */
.care-card::after{ content:""; position:absolute; top:-26px; right:-26px; width:96px; height:96px; border-radius:20px; background:var(--accent); opacity:.08; transform:rotate(18deg); transition:transform .5s var(--ease); }
.care-card:hover::after{ transform:rotate(30deg) scale(1.1); }
.care-card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
/* numéro dans un carré de couleur (motif logo) */
.care-card__num{ width:48px; height:48px; border-radius:13px; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:1.2rem; box-shadow:0 12px 22px -10px color-mix(in srgb,var(--accent) 80%,#000); }
.care-card__tag{ font-family:var(--font-head); font-weight:600; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,#fff); padding:.45em .85em; border-radius:100px; }
.care-card__photo{ position:relative; aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden; margin-bottom:20px; }
.care-card__photo img{ transition:transform .6s var(--ease); }
.care-card:hover .care-card__photo img{ transform:scale(1.06); }
.care-card h3{ font-size:1.4rem; margin-bottom:10px; }
.care-card p{ color:var(--ink-soft); font-size:.98rem; }
.care-card__link{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-family:var(--font-head); font-weight:600; font-size:.92rem; color:var(--accent); transition:gap .25s var(--ease); }
.care-card__link:hover{ gap:12px; }

/* =========================================================
   WHY (bento, dark)
   ========================================================= */
.why{ padding:120px 0; background:var(--navy); position:relative; }
.why::before{ content:""; position:absolute; inset:0; background:radial-gradient(900px 500px at 80% 0%,rgba(45,115,185,.28),transparent 60%); }
.why .uk-container{ position:relative; }
.bento{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:22px; }
.bento__cell{ position:relative; background:#172d44; border:1px solid #21405f; border-radius:var(--radius-lg); padding:30px; color:#dce8f4; overflow:hidden; transition:transform .35s var(--ease), border-color .35s; }
.bento__cell:hover{ transform:translateY(-6px); border-color:var(--blue); }
.bento__cell--lg{ grid-row:span 2; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(160deg,#1a3a5b,#14304b); }
.bento__cell--accent{ background:linear-gradient(150deg,var(--blue),var(--blue-dark)); border-color:transparent; color:#fff; }
.bento__cell h3{ color:#fff; font-size:1.3rem; margin-bottom:10px; }
.bento__cell--lg h3{ font-size:1.7rem; }
.bento__cell p{ font-size:.98rem; opacity:.85; }
.bento__ico{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin-bottom:18px; color:#fff; background:var(--c); box-shadow:0 12px 24px -10px rgba(0,0,0,.5); }
.bento__ico--inv{ background:rgba(255,255,255,.18); }
.bento__deco{ position:absolute; right:-30px; bottom:-30px; width:160px; height:160px; border-radius:46% 54% 52% 48%/52% 46% 54% 48%; background:radial-gradient(circle,rgba(147,201,79,.22),transparent 70%); }

/* =========================================================
   TECH — contenu plus large
   ========================================================= */
.tech{ position:relative; padding:130px 0; color:#fff; overflow:hidden; }
.tech__media{ position:absolute; inset:0; }
.tech__media img{ width:100%; height:100%; object-fit:cover; }
.tech__overlay{ position:absolute; inset:0; background:linear-gradient(100deg,rgba(15,34,53,.95) 35%,rgba(15,34,53,.72) 72%,rgba(15,34,53,.45)); }
.tech__inner{ position:relative; max-width:860px; }
.tech .eyebrow{ margin-bottom:18px; }
.tech__title{ font-size:clamp(2rem,4vw,3rem); font-weight:700; color:#fff; max-width:16em; }
.tech__inner p{ margin:22px 0 30px; font-size:1.12rem; opacity:.9; max-width:42em; }

/* =========================================================
   TEAM
   ========================================================= */
.team{ padding:120px 0; }
.member{ text-align:center; }
.member__photo{ position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; margin-bottom:16px; box-shadow:var(--shadow-sm); background:var(--bg-tint); }
.member__photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(45,115,185,.35)); opacity:0; transition:opacity .35s; }
.member:hover .member__photo::after{ opacity:1; }
.member__photo img{ transition:transform .6s var(--ease); }
.member:hover .member__photo img{ transform:scale(1.05); }
.member h3{ font-size:1.15rem; }
.member p{ color:var(--muted); font-size:.92rem; margin-top:4px; }

/* =========================================================
   INFOS
   ========================================================= */
.infos{ position:relative; padding:120px 0; background:var(--navy); overflow:hidden; }
.infos__bg .blob--3{ color:#16314c; width:600px; height:600px; top:-160px; right:-160px; }
.infos .uk-container{ position:relative; }
.infocard{ height:100%; background:#142b42; border:1px solid #21405f; border-radius:var(--radius-lg); padding:30px; color:#cfdcea; }
.infocard h3{ color:#fff; font-size:1.3rem; margin-bottom:18px; }
.infolist li{ display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid #21405f; font-size:.96rem; }
.infolist li:last-child{ border-bottom:0; }
.infolist span[uk-icon]{ color:var(--green); flex:none; }
.infolist a:hover{ color:var(--green); }
.hours li{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid #21405f; font-size:.96rem; }
.hours li:last-child{ border-bottom:0; }
.hours strong{ color:#fff; font-family:var(--font-head); }
.hours--off strong{ color:var(--orange); }
.infocard--urgence{ background:linear-gradient(150deg,var(--orange),#c46f1d); border-color:transparent; color:#fff; }
.infocard--urgence h3{ color:#fff; }
.infocard--urgence p{ opacity:.95; margin-bottom:20px; }
.infocard--map{ padding:0; overflow:hidden; min-height:320px; }
.infocard--map iframe{ width:100%; height:100%; min-height:320px; border:0; filter:grayscale(.2) contrast(1.05); }

/* =========================================================
   CTA
   ========================================================= */
.cta{ position:relative; padding:90px 24px 118px; }
.cta__card{ position:relative; overflow:hidden; text-align:center; max-width:1080px; margin:0 auto; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); border-radius:var(--radius-lg); padding:80px 32px; color:#fff; box-shadow:var(--shadow-lg); }
.cta__card h2{ color:#fff; font-size:clamp(2rem,4.6vw,3.2rem); font-weight:700; }
.cta__card p{ margin:18px auto 34px; max-width:34em; font-size:1.12rem; opacity:.92; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.cta__deco{ position:absolute; inset:0; pointer-events:none; }
.cta__deco .sq{ position:absolute; width:40px; height:40px; border-radius:8px; opacity:.85; }
.cta__deco .sq--blue{ top:18%; left:8%; transform:rotate(14deg); background:#5aa0e0; animation:floaty 6s ease-in-out infinite; }
.cta__deco .sq--yellow{ bottom:16%; left:16%; transform:rotate(-10deg); animation:floaty 7s ease-in-out infinite .5s; }
.cta__deco .sq--green{ top:22%; right:12%; transform:rotate(-16deg); animation:floaty 5.5s ease-in-out infinite .3s; }
.cta__deco .sq--orange{ bottom:20%; right:9%; transform:rotate(12deg); animation:floaty 6.5s ease-in-out infinite .8s; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:#0b1a29; color:#9fb3c8; padding:70px 0 0; }
.footer__inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; }
.footer__logo{ height:50px; background:#fff; padding:8px 12px; border-radius:12px; margin-bottom:16px; }
.footer__brand p{ font-size:.95rem; max-width:30em; }
.footer__col h4{ color:#fff; font-size:1rem; margin-bottom:16px; }
.footer__col a,.footer__col span{ display:block; padding:5px 0; font-size:.94rem; color:#9fb3c8; }
.footer__col a:hover{ color:var(--green); }
.footer__bar{ border-top:1px solid #18293c; padding:22px 24px; max-width:var(--maxw); margin-inline:auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.85rem; color:#6f8298; }

/* =========================================================
   V2 — MASCOTTE SMILEY (sprite + instance baladeuse)
   ========================================================= */
.svg-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.smiley{ display:block; width:100%; height:100%; }

.mascotte{
  position:fixed; right:24px; bottom:24px; z-index:60;
  display:flex; align-items:center; gap:10px; pointer-events:none;
  opacity:0; transform:translateY(22px) scale(.6);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.mascotte.is-visible{ opacity:1; transform:translateY(0) scale(1); }
.mascotte.is-hop{ animation:mascotte-hop .65s var(--ease); }
@keyframes mascotte-hop{ 0%,100%{ transform:translateY(0) scale(1);} 35%{ transform:translateY(-16px) scale(1.06) rotate(-4deg);} }
.mascotte__face{ width:62px; height:62px; filter:drop-shadow(0 10px 18px rgba(20,40,70,.30)); }
.mascotte__bubble{
  background:#fff; color:var(--ink); font-family:var(--font-head); font-weight:600; font-size:.84rem;
  padding:8px 14px; border-radius:16px 16px 4px 16px; box-shadow:var(--shadow-sm);
  white-space:nowrap; opacity:0; transform:translateX(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.mascotte.is-visible .mascotte__bubble{ opacity:1; transform:none; }

/* =========================================================
   V2 — THÈME 1 : NOS VALEURS (dark, smileys qui poppent)
   ========================================================= */
.values{ position:relative; padding:120px 0; background:var(--navy); }
.values::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(900px 500px at 80% 0%,rgba(45,115,185,.28),transparent 60%); }
.values .uk-container{ position:relative; }
.values__grid{ margin-top:10px; }
.value-card{
  position:relative; height:100%; text-align:center; overflow:hidden;
  background:#172d44; border:1px solid #21405f; border-radius:var(--radius-lg);
  padding:34px 26px 30px; color:#dce8f4;
  transition:transform .35s var(--ease), border-color .35s;
}
.value-card:hover{ transform:translateY(-6px); border-color:var(--accent); }
.value-card::after{ content:""; position:absolute; top:-26px; right:-26px; width:90px; height:90px; border-radius:20px; background:var(--accent); opacity:.16; transform:rotate(18deg); transition:transform .5s var(--ease); }
.value-card:hover::after{ transform:rotate(30deg) scale(1.1); }
.value-card__smiley{ display:block; width:74px; height:74px; margin:0 auto 18px; filter:drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
.value-card__smiley .smiley{ animation:floaty 5s ease-in-out infinite; }
.values__grid > div:nth-child(even) .value-card__smiley .smiley{ animation-duration:6.4s; animation-delay:.4s; }
.values__grid > div:nth-child(3n) .value-card__smiley .smiley{ animation-duration:5.6s; animation-delay:.2s; }
.value-card h3{ color:#fff; font-size:1.3rem; margin-bottom:10px; }
.value-card p{ font-size:.98rem; opacity:.86; }

/* =========================================================
   V2 — THÈME 3 : ÉQUIPE — vidéo + témoignages défilants
   ========================================================= */
.team__feature{ margin-top:64px; }
.team-video{ position:relative; aspect-ratio:16/10; border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; box-shadow:var(--shadow); background:var(--bg-tint); }
.team-video img,.team-video__poster{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); display:block; }
.team-video::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,34,53,.05),rgba(15,34,53,.55)); }
.team-video:hover img,.team-video:hover .team-video__poster{ transform:scale(1.05); }
.team-video__play{ position:absolute; inset:0; margin:auto; width:78px; height:78px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--blue); display:grid; place-items:center; z-index:2; box-shadow:0 16px 34px -12px rgba(0,0,0,.55); transition:transform .3s var(--ease); }
.team-video:hover .team-video__play{ transform:scale(1.08); }
.team-video:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }
.team-video__badge{ position:absolute; left:18px; bottom:15px; z-index:2; color:#fff; font-family:var(--font-head); font-weight:600; font-size:.92rem; }

/* Modal vidéo de présentation */
.team-video-modal__dialog{ width:min(960px,92vw); background:transparent; box-shadow:none; padding:0; }
.team-video-modal__player{ width:100%; max-height:82vh; display:block; border-radius:var(--radius-lg); background:#000; box-shadow:0 30px 70px -20px rgba(0,0,0,.65); }

.team__quotes-col .eyebrow{ margin-bottom:16px; }
.quotes{ position:relative; }
.quote{ margin:0; height:100%; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 30px 26px; box-shadow:var(--shadow-sm); }
.quote__smiley{ width:46px; height:46px; margin-bottom:14px; }
.quote p{ font-family:var(--font-head); font-weight:500; font-size:1.2rem; line-height:1.42; color:var(--ink); }
.quote cite{ display:block; margin-top:16px; font-style:normal; font-family:var(--font-head); font-weight:600; color:var(--blue); font-size:.92rem; }
.quotes__nav{ display:flex; align-items:center; gap:14px; margin-top:18px; }
.quotes__arrow{ flex:none; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; color:var(--ink-soft); transition:transform .25s var(--ease), border-color .25s, color .25s; }
.quotes__arrow:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.quotes__dots{ flex:1; justify-content:center; }
.quotes__dots a{ background:var(--line); }
.quotes__dots .uk-active a{ background:var(--blue); }

/* =========================================================
   V2 — THÈME 4 : IDÉES REÇUES (mythe / réalité)
   ========================================================= */
.myths{ padding:120px 0; background:var(--bg-soft); }
.myths__grid{ margin-top:10px; }
.myth-card{ position:relative; height:100%; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.myth-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.myth-card::after{ content:""; position:absolute; top:-26px; right:-26px; width:90px; height:90px; border-radius:20px; background:var(--accent); opacity:.1; transform:rotate(18deg); transition:transform .5s var(--ease); }
.myth-card:hover::after{ transform:rotate(30deg) scale(1.1); }
.myth-card__tag{ display:inline-block; font-family:var(--font-head); font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,#fff); padding:.42em .85em; border-radius:100px; margin-bottom:14px; }
.myth-card__claim{ font-family:var(--font-head); font-weight:600; font-style:italic; font-size:1.22rem; color:var(--ink); }
.myth-card__answer{ display:flex; gap:14px; margin-top:18px; padding-top:18px; border-top:1px dashed var(--line); }
.myth-card__ico{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb,var(--green) 16%,#fff); color:var(--green); }
.myth-card__answer p{ color:var(--ink-soft); font-size:.99rem; }
.myth-card__answer strong{ color:var(--ink); }

/* =========================================================
   V2 — THÈME 2 : CANAUX DE CONTACT + ACCÈS
   ========================================================= */
.channels{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:48px; }
.channel{ flex:1 1 230px; max-width:300px; display:flex; align-items:center; gap:14px; background:#142b42; border:1px solid #21405f; border-radius:var(--radius); padding:16px 18px; color:#cfdcea; transition:transform .3s var(--ease), border-color .3s; }
.channel:hover{ transform:translateY(-4px); border-color:var(--blue); }
.channel__ico{ flex:none; width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:#fff; background:var(--c,var(--blue)); }
.channel__txt strong{ display:block; font-family:var(--font-head); font-size:1rem; color:#fff; }
.channel__txt small{ color:#9fb6cf; font-size:.82rem; }
.channel--primary{ background:linear-gradient(150deg,var(--blue),var(--blue-dark)); border-color:transparent; }
.channel--primary .channel__ico{ background:rgba(255,255,255,.2); }
.channel--primary:hover{ box-shadow:0 18px 36px -16px rgba(45,115,185,.7); border-color:transparent; }
.infolist .infolist__emo{ flex:none; width:20px; text-align:center; font-size:1.05rem; line-height:1; }
.infocard--access h3{ margin-bottom:14px; }

/* =========================================================
   SÉPARATEURS DE SECTIONS — vagues (waves.svg)
   ========================================================= */
.wave{ position:absolute; left:0; width:100%; line-height:0; z-index:4; pointer-events:none; }
.wave svg{ display:block; width:100%; height:clamp(48px,7vw,96px); }
/* vague en HAUT : la couleur déferle depuis le haut vers le bas */
.wave--top{ top:-1px; }
/* vague en BAS : on retourne verticalement pour que la couleur soit en bas */
.wave--bottom{ bottom:-1px; transform:scaleY(-1); }
.wave--white path{ fill:#fff; }
.wave--soft path{ fill:var(--bg-soft); }  /* = fond de la section "Nos soins" (#f4f8fc) */
.wave--dark path{ fill:#0b1a29; }   /* = couleur du footer, bleu foncé */

/* =========================================================
   SOUS-PAGES — EN-TÊTE + ESPACES
   ========================================================= */
/* état actif du menu (page courante) */
.nav.uk-navbar-nav > li.is-current > a{ color:var(--blue); }
.nav.uk-navbar-nav > li.is-current > a::after{ transform:scaleX(1); }

/* en-tête de page */
.page-hero{ position:relative; padding:160px 0 70px; overflow:hidden; text-align:center; background:linear-gradient(180deg,#fff,var(--bg-soft)); }
.page-hero__bg{ position:absolute; inset:0; pointer-events:none; }
.page-hero .blob--1{ color:#d7e8fa; width:620px; height:620px; top:-240px; right:-160px; }
.page-hero .blob--2{ color:#eaf6e0; width:460px; height:460px; bottom:-220px; left:-180px; }
.page-hero__inner{ position:relative; z-index:2; max-width:800px; margin-inline:auto; padding-inline:24px; }
.page-hero .eyebrow{ margin-bottom:18px; }
.page-hero__title{ font-size:clamp(2.4rem,5.4vw,4rem); font-weight:800; }
.page-hero__lead{ margin:22px auto 0; max-width:42em; font-size:1.18rem; color:var(--ink-soft); }
.page-hero__slogan{ display:inline-flex; align-items:center; gap:.55em; margin-top:28px; padding:.6em 1.25em; border-radius:100px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); font-family:var(--font-head); font-weight:600; color:var(--blue); }
.page-hero .smile-signature{ margin-top:30px; }

/* section « Nos espaces » */
.spaces{ padding:110px 0; background:#fff; }
.spaces__grid{ margin-top:10px; }

/* CTA centré sous les soins */
.soins__cta{ margin-top:48px; text-align:center; }

/* page équipe — sections + cartes bio */
.staff{ padding:110px 0; }
.staff--alt{ background:var(--bg-soft); }
.staff__grid{ margin-top:10px; }
.bio-card{ height:100%; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.bio-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.bio-card__photo{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--bg-tint); }
.bio-card__photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,color-mix(in srgb,var(--accent) 32%,transparent)); opacity:0; transition:opacity .35s; }
.bio-card:hover .bio-card__photo::after{ opacity:1; }
.bio-card__photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.bio-card:hover .bio-card__photo img{ transform:scale(1.05); }
.bio-card__body{ padding:24px 24px 28px; }
.bio-card__role{ display:inline-block; font-family:var(--font-head); font-weight:600; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,#fff); padding:.42em .85em; border-radius:100px; margin-bottom:12px; }
.bio-card h3{ font-size:1.35rem; margin-bottom:10px; }
.bio-card p{ color:var(--ink-soft); font-size:.97rem; }
.team-feature-solo{ max-width:920px; margin:14px auto 0; }

/* page soins — cartes traitements + déroulé */
.soins-page{ padding:110px 0; background:#fff; }
.soins-page__grid{ margin-top:10px; }
.soin-card{ position:relative; height:100%; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 28px; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.soin-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.soin-card::after{ content:""; position:absolute; top:-26px; right:-26px; width:96px; height:96px; border-radius:20px; background:var(--accent); opacity:.09; transform:rotate(18deg); transition:transform .5s var(--ease); }
.soin-card:hover::after{ transform:rotate(30deg) scale(1.1); }
.soin-card__head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.soin-card__num{ flex:none; width:54px; height:54px; border-radius:15px; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:1.25rem; box-shadow:0 12px 22px -10px color-mix(in srgb,var(--accent) 80%,#000); }
.soin-card__tag{ font-family:var(--font-head); font-weight:600; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,#fff); padding:.42em .85em; border-radius:100px; }
.soin-card h3{ font-size:1.3rem; margin-bottom:10px; }
.soin-card p{ color:var(--ink-soft); font-size:.97rem; }

.process{ padding:110px 0; background:var(--bg-soft); }
.steps{ margin-top:10px; }

/* page conseils — cartes d'orientation + conseils pratiques */
.advice{ padding:110px 0; }
.advice--alt{ background:var(--bg-soft); }
.advice--dark{ position:relative; overflow:hidden; background:var(--navy); }
.advice--dark::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(900px 500px at 80% 0%,rgba(45,115,185,.28),transparent 60%); }
.advice--dark .uk-container{ position:relative; }
.advice__grid{ margin-top:10px; }
.advice-card{ position:relative; height:100%; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 28px; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.advice-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.advice-card::after{ content:""; position:absolute; top:-26px; right:-26px; width:90px; height:90px; border-radius:20px; background:var(--accent); opacity:.08; transform:rotate(18deg); transition:transform .5s var(--ease); }
.advice-card:hover::after{ transform:rotate(30deg) scale(1.1); }
.advice-card__ico{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; background:color-mix(in srgb,var(--accent) 14%,#fff); color:var(--accent); font-size:1.4rem; margin-bottom:18px; }
.advice-card h3{ font-size:1.25rem; margin-bottom:12px; }
.advice-card p{ color:var(--ink-soft); font-size:.97rem; }
.advice-list{ margin-top:4px; }
.advice-list li{ display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:.95rem; }
.advice-list li:last-child{ border-bottom:0; }
.advice-list li span[uk-icon]{ flex:none; margin-top:1px; color:var(--accent); }
.step{ position:relative; height:100%; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 24px; }
.step__num{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--bg-tint); color:var(--blue); font-family:var(--font-head); font-weight:800; font-size:1.1rem; margin-bottom:14px; }
.step h3{ font-size:1.12rem; margin-bottom:8px; }
.step p{ color:var(--ink-soft); font-size:.93rem; }

/* =========================================================
   ACCESSIBILITÉ MOUVEMENT
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
  /* mascotte purement décorative : on la masque si l'utilisateur limite les animations */
  .mascotte{ display:none !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento__cell--lg{ grid-row:span 1; grid-column:span 2; }
}
@media (max-width:900px){
  .hero__inner{ grid-template-columns:1fr; gap:20px; }
  .hero__content{ text-align:center; }
  .hero--video .hero__content{ margin-inline:auto; }
  .hero__lead{ margin-inline:auto; }
  .hero__cta,.hero__trust{ justify-content:center; }
  .hero--video{ min-height:auto; padding:120px 0 100px; }
  .hero--video .hero__inner{ width:auto; }
  .soins__grid > div:nth-child(2){ margin-top:0; }
}
@media (max-width:768px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2)::after{ display:none; }
  .quickbar{ flex-direction:column; align-items:stretch; }
  .quickbar__sep{ width:100%; height:1px; }
  .quickbar__item{ justify-content:flex-start; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
  /* mascotte fixe masquée sur mobile (place + lisibilité) */
  .mascotte{ display:none; }
  .channel{ flex:1 1 100%; max-width:none; }
  .team__feature{ margin-top:40px; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .bento{ grid-template-columns:1fr; }
  .bento__cell--lg{ grid-column:span 1; }
  .footer__inner{ grid-template-columns:1fr; gap:28px; }
  .cta__card{ padding:54px 22px; }
  .welcome,.soins,.values,.tech,.team,.myths,.infos{ padding:80px 0; }
}