/* Hélène Mischol – hygiéniste dentaire · site Lutor Corp. */
@font-face{font-family:"Comfortaa";src:url(../fonts/comfortaa-latin.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Comfortaa";src:url(../fonts/comfortaa-latin-ext.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Martel Sans";src:url(../fonts/martel-sans-300-latin.woff2) format("woff2");font-weight:300;font-display:swap;unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martel Sans";src:url(../fonts/martel-sans-300-latin-ext.woff2) format("woff2");font-weight:300;font-display:swap;unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";src:url(../fonts/figtree-latin.woff2) format("woff2");font-weight:400 500;font-display:swap;unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";src:url(../fonts/figtree-latin-ext.woff2) format("woff2");font-weight:400 500;font-display:swap;unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --navy:#112f4f;
  --ink:#555;
  --teal:#3c7d97;
  --menu:#0a192a;
  --font:"Comfortaa",system-ui,sans-serif;
  --spring:cubic-bezier(.22,1.25,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.menu-open{overflow:hidden}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img{display:block;max-width:100%}
h1,h2,h3,p,ul{margin:0}
a{color:inherit;text-decoration:none}
b{font-weight:700}
address{font-style:normal}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.only-phone{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:opacity .4s ease,visibility .4s}
.nav.is-hidden{opacity:0;visibility:hidden}
.nav__bar{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:20px max(40px,calc((100% - 1120px)/2));background:rgba(9,26,43,.7);transition:background-color .3s}
.nav__logo{display:flex;flex-direction:column;color:#fff;white-space:nowrap}
.logo-name{font-size:20px;font-weight:700;line-height:22px;letter-spacing:.105em}
.logo-sub{font-size:13px;font-weight:700;line-height:14.3px;letter-spacing:.3em}
.nav__links{display:flex;gap:39px}
.nav__links a{position:relative;display:inline-flex;align-items:center;height:40px;color:#fff;font-size:18px;line-height:1.6;letter-spacing:.09em}
.nav__links a span,.footer__col a span{position:relative}
.nav__links a span::after,.footer__col a span::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:currentColor;transition:width .35s cubic-bezier(.4,0,.2,1)}
.nav__links a:hover span::after,.nav__links a:focus-visible span::after{width:100%}
.nav__burger{display:none;position:relative;width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer;color:#fff}
.nav__burger span{position:absolute;height:2px;background:currentColor;border-radius:2px;transition:transform .35s cubic-bezier(.4,0,.2,1),width .35s,top .35s,bottom .35s}
.nav__burger span:first-child{width:22px;top:10px;right:1px}
.nav__burger span:last-child{width:16px;bottom:10px;right:7px}
.nav.is-open .nav__burger span:first-child{top:15px;transform:rotate(45deg)}
.nav.is-open .nav__burger span:last-child{width:22px;bottom:15px;right:1px;transform:rotate(-45deg)}
.nav__menu{height:calc(100vh - 72px);height:calc(100dvh - 72px);padding:16px 20px 40px;overflow:auto;background:var(--menu)}
.nav__menu nav,.nav__menu-contact{display:flex;flex-direction:column;gap:24px}
.nav__menu a{color:#fff;font-size:22px;line-height:1.6;letter-spacing:.1em}
.nav__menu-contact{margin-top:72px}
.nav__menu-contact a{font-size:21px}
.nav.is-open .nav__bar{background:var(--menu)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:0 40px;overflow:hidden;background:#0b2a47}
.hero__bg{position:absolute;inset:0 0 auto;height:120vh;height:120svh;will-change:transform}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__shade{position:absolute;inset:0;background:radial-gradient(33% 42% at 69% 59.4%,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 100%);pointer-events:none}
.hero__inner{position:relative;z-index:1;width:100%;max-width:1120px;display:flex;flex-direction:column;align-items:center;gap:90px;padding-top:140px;will-change:transform}
.hero__logo{width:100%;height:300px}
.hero__logo img{width:100%;height:100%;object-fit:contain}
.hero__tagline{color:#fff;text-align:center;font-family:"Martel Sans",sans-serif;font-weight:300;font-size:30px;line-height:1.4;letter-spacing:.11em}
.hero__tagline .w{display:inline-block;white-space:nowrap}
.hero__tagline .l{display:inline-block}

/* ---------- Bienvenue ---------- */
.welcome{display:flex;flex-direction:column;align-items:center;gap:20px;padding:90px 20px;text-align:center}
.welcome__eyebrow{font-size:18px;font-weight:700;line-height:1.3;letter-spacing:.04em}
.welcome__title{max-width:1115px;color:var(--navy);font-size:40px;font-weight:700;line-height:1.3;letter-spacing:.11em;text-wrap:balance}
.welcome__text{max-width:1101px;font-size:19px;font-weight:500;line-height:1.6;letter-spacing:.09em;text-wrap:balance}

/* ---------- Rangées de soins / à propos ---------- */
.row{display:grid;grid-template-columns:1fr 1fr;align-items:center;background:#fff}
.row__media{aspect-ratio:1/1;overflow:hidden}
.row__media img{width:100%;height:100%;object-fit:cover}
.row__content{width:min(530px,calc(100% - 80px));padding:30px 20px 30px 0;margin-left:80px}
.row--rev .row__media{order:2}
.row--rev .row__content{justify-self:end;margin:0 80px 0 0}
.eyebrow{font-size:22px;font-weight:700;line-height:1.3;letter-spacing:.1em}
.title{margin-top:15px;color:var(--navy);font-size:40px;font-weight:700;line-height:1.3;letter-spacing:.11em}
.subtitle{margin-top:16px;font-size:22px;font-weight:700;line-height:1.3;letter-spacing:.1em}
.desc{margin-top:16px;opacity:.8}
.desc p{font-size:18px;line-height:1.6;letter-spacing:.09em;text-align:justify}
.desc--left p{text-align:left}
.desc p+p{margin-top:20px}
.linkedin{display:flex;align-items:center;justify-content:center;width:58px;height:58px;margin:16px auto 0;border-radius:50%;background:var(--teal);color:#fff;transition:transform .3s var(--spring),background-color .3s}
.linkedin:hover{transform:scale(1.08);background:var(--navy)}

/* ---------- Citation ---------- */
.quote{position:relative;display:flex;align-items:center;justify-content:center;min-height:546px;padding:120px 76px;overflow:hidden;text-align:center;color:#fff}
.quote__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.quote__inner{position:relative;display:flex;flex-direction:column;gap:20px;max-width:1288px}
.quote__text{font-size:32px;font-weight:700;line-height:1.5;letter-spacing:.06em;text-wrap:balance}
.quote__sign{color:#e1e1e1;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:.06em}

/* ---------- Références ---------- */
.refs{max-width:1440px;margin:0 auto;padding:120px 100px 0}
.refs__head{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:50px}
.eyebrow--center{text-align:center}
.title--center{margin-top:20px;text-align:center}
.refs__lead{max-width:880px;margin-top:20px;font-size:19px;font-weight:500;line-height:1.6;letter-spacing:.09em;text-wrap:balance}
.refs__grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:325px 325px;gap:20px;max-width:1240px;margin:0 auto}
.card{position:relative;overflow:hidden;border-radius:8px;color:#fff;isolation:isolate}
.card--tall{grid-row:span 2}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.card__body{position:absolute;left:40px;right:100px;bottom:44px}
.card__title{font-family:"Figtree",sans-serif;font-size:22px;font-weight:500;line-height:1.5;letter-spacing:-.02em}
.card__list{list-style:none;padding:0;margin:0;max-height:0;overflow:hidden;opacity:0;font-family:"Figtree",sans-serif;font-size:14px;line-height:1.7;letter-spacing:-.01em;color:#d6d6d6;transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .4s,margin .5s}
.card__list li::before{content:"• "}
.card__arrow{position:absolute;right:40px;bottom:40px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.3);color:#fff;transition:transform .45s var(--spring),background-color .3s}
@media (hover:hover){
  .card:hover img,.card:focus-visible img{transform:scale(1.05)}
  .card:hover .card__list,.card:focus-visible .card__list{max-height:220px;opacity:1;margin-top:10px}
  .card:hover .card__arrow,.card:focus-visible .card__arrow{transform:rotate(-90deg);background:rgba(255,255,255,.45)}
}

/* ---------- Pied de page ---------- */
.footer-wrap{padding-top:150px}
.footer{padding:90px max(40px,calc((100% - 1100px)/2)) 40px;color:#fff;background:linear-gradient(192deg,#041421 0%,#061726 23%,#082238 82.61%)}
.footer__top{display:grid;grid-template-columns:1fr 315px 154px}
.footer__info{max-width:337px}
.footer__name{font-size:23px;font-weight:700;line-height:1.1;letter-spacing:.043em}
.footer__sub{font-size:13px;font-weight:700;line-height:1.3;letter-spacing:.365em}
.footer__info address{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:16px}
.footer__info address a{font-size:18px;font-weight:300;line-height:1.4;transition:opacity .3s}
.footer__info address a:hover{opacity:.7}
.footer__col{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.footer__col a{display:inline-flex;font-size:16px;font-weight:500;line-height:1.5;letter-spacing:.2em}
.footer__col a span::after{height:1px;bottom:-2px}
.footer__col a:hover span::after,.footer__col a:focus-visible span::after{width:100%}
.footer__label{margin-bottom:-2px;color:#f2f2f2;font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.2em}
.footer__bottom{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:60px;font-size:16px;font-weight:300;line-height:1.4}
.footer__bottom a{transition:opacity .3s}
.footer__bottom a:hover{opacity:.7}

/* ---------- Animations ---------- */
.js .reveal{opacity:0;transform:translateY(40px)}
.js .reveal-3d{opacity:0;transform:perspective(1200px) translateY(50px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .35s ease-out,transform .55s var(--spring)}
.js .reveal.is-in .reveal-3d{opacity:1;transform:perspective(1200px) translateY(0);transition:opacity .35s ease-out .08s,transform .6s var(--spring) .08s}
.js .hero__bg{opacity:0;transform:scale(1.05)}
.js .hero__logo{opacity:0;transform:translateY(40px)}
.js .hero__tagline .l{opacity:0;filter:blur(6px);transform:scale(1.4)}
.js.is-loaded .hero__bg{opacity:1;transform:scale(1);transition:opacity 2s cubic-bezier(.12,.23,.5,1),transform 2s cubic-bezier(.12,.23,.5,1)}
.js.is-loaded .hero__logo{opacity:1;transform:none;transition:opacity .45s ease-out,transform .7s var(--spring)}
.js.is-loaded .hero__tagline .l{opacity:1;filter:blur(0);transform:none;transition:opacity .35s ease-out,filter .35s ease-out,transform .4s ease-out;transition-delay:calc(var(--i) * 34ms)}

/* ---------- Tablette (< 1200 px) ---------- */
@media (max-width:1199px){
  .nav__links{display:none}
  .nav__burger{display:block}
  .nav__bar{padding:20px}
  .row{grid-template-columns:1fr}
  .row--rev .row__media{order:0}
  .row__content,.row--rev .row__content{width:auto;justify-self:stretch;margin:0;padding:70px 50px 80px;text-align:center}
  .eyebrow{font-size:32px}
  .title{font-size:46px}
  .welcome{padding:130px 20px 90px}
  .welcome__eyebrow{font-size:16px}
  .welcome__title{font-size:36px}
  .about .row__content{padding-top:90px;text-align:left}
  .about .subtitle{font-size:46px;letter-spacing:.11em}
  .quote{min-height:594px;padding:180px 20px}
  .refs{padding:90px 50px 0}
  .refs__grid{grid-template-columns:1fr;grid-template-rows:none}
  .card{height:325px}
  .card--tall{grid-row:auto;height:670px}
  .card__body{left:30px;right:30px;bottom:40px}
  .card__arrow{display:none}
  .card__list{max-height:none;opacity:1;margin-top:10px}
  .footer{padding:90px 32px 34px}
  .footer__top{grid-template-columns:1fr 1fr;row-gap:50px}
  .footer__col{min-width:0}
  .footer__info{grid-column:1/-1}
}

/* ---------- Mobile (< 810 px) ---------- */
@media (max-width:809.98px){
  .only-wide{display:none}
  .only-phone{display:inline}
  .hero__inner{gap:12px;padding-top:0}
  .hero__tagline{font-family:var(--font);font-size:15px;font-weight:500;line-height:1.8;letter-spacing:-.02em}
  .welcome{padding:100px 20px 80px}
  .welcome__eyebrow{font-size:21px;font-weight:500;line-height:1.4;letter-spacing:-.02em}
  .welcome__title{font-size:30px;line-height:1.4;letter-spacing:.04em}
  .welcome__text{font-size:18px;font-weight:400}
  .welcome__text b{font-weight:400}
  .row__content,.row--rev .row__content{padding:40px 20px 50px}
  .eyebrow,.welcome__eyebrow{color:#102742}
  .eyebrow{font-size:21px;font-weight:500;line-height:1.4;letter-spacing:-.02em}
  .row .title,.refs .title{color:var(--ink)}
  .title{margin-top:20px;font-size:30px;line-height:1.4;letter-spacing:.04em}
  .desc{margin-top:20px}
  .desc p{text-align:center}
  .about .about__media{display:none}
  .about .row__content{padding:50px 25px 30px;text-align:left}
  .about .desc p{text-align:left}
  .about .subtitle{font-size:30px;line-height:1.4;letter-spacing:.04em}
  .quote{min-height:856px;padding:150px 30px}
  .quote__text{font-size:27px;line-height:1.7;letter-spacing:.04em}
  .refs{padding:90px 36px 0}
  .refs__head .eyebrow{display:none}
  .refs__head .title{margin-top:0}
  .refs__lead{color:#999;font-size:21px;font-weight:400;line-height:1.5;letter-spacing:.05em}
  .card,.card--tall{height:325px}
  .footer-wrap{padding-top:90px}
  .footer{padding:40px 38px 40px}
  .footer__top{grid-template-columns:1fr;row-gap:40px}
  .footer__name{font-size:27px}
  .footer__sub{font-size:11px;letter-spacing:.3em}
  .footer__label{font-size:11px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important}
}

/* ---------- Motion : Motion prend le relais des apparitions CSS ---------- */
html.js.motion .reveal,html.js.motion .reveal-3d,html.js.motion .reveal.is-in,html.js.motion .reveal.is-in .reveal-3d{opacity:1;transform:none;transition:none}
html.motion .row__media img{scale:1.14}
html.motion .quote__bg{scale:1.2}
.scroll-progress{position:fixed;top:0;left:0;right:0;z-index:1000;height:2px;background:var(--teal);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.quote__text .qw{display:inline-block}
@media (max-width:809.98px){html.motion .row__media img{scale:1}}

/* ---------- Signature Lutor Corp. ---------- */
.footer__bottom{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px}
.footer__bottom .lutor-signature:hover{opacity:1}
.lutor-signature{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;color:rgba(255,255,255,.6);text-decoration:none;font-size:12px;line-height:1.5;letter-spacing:.04em}
.lutor-signature img{display:block;width:111px;height:24px;object-fit:contain;opacity:.85;transition:opacity .2s ease}
.lutor-signature:hover img,.lutor-signature:focus-visible img{opacity:1}
.lutor-signature__mark{position:relative;display:block;width:111px;height:24px;isolation:isolate}
.lutor-signature__mint{position:absolute;inset:0;pointer-events:none;background:#29cfc6;-webkit-mask:url(../img/lutor-signature.svg) center/contain no-repeat;mask:url(../img/lutor-signature.svg) center/contain no-repeat;clip-path:circle(0px at 96.6% 64.8%);filter:drop-shadow(0 0 2px #29cfc6) drop-shadow(0 0 7px #29cfc6aa);transition:clip-path .65s cubic-bezier(.22,.61,.36,1),filter .4s ease}
.lutor-signature:is(:hover,:focus-visible) .lutor-signature__mint{clip-path:circle(140px at 96.6% 64.8%);animation:lutor-neon-flare .65s .65s ease-out both}
.lutor-signature__mark::after{content:"";position:absolute;left:96.6%;top:64.8%;width:4px;height:4px;border-radius:50%;transform:translate(-50%,-50%);background:#29cfc6;opacity:0;box-shadow:0 0 4px #29cfc6,0 0 11px #29cfc6b3;transition:opacity .2s ease;pointer-events:none}
.lutor-signature:is(:hover,:focus-visible) .lutor-signature__mark::after{opacity:1}
.lutor-signature__mark::before{content:"";position:absolute;left:96.6%;top:64.8%;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,#29cfc6a6 0%,#29cfc64d 24%,#29cfc600 68%);filter:blur(5px);transform:translate(-50%,-50%) scale(.2);opacity:0;z-index:-1;pointer-events:none}
.lutor-signature:is(:hover,:focus-visible) .lutor-signature__mark::before{animation:lutor-mint-burst .65s .65s ease-out both}
@keyframes lutor-mint-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}20%{opacity:.85}60%{opacity:.4}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
@keyframes lutor-neon-flare{0%,100%{filter:drop-shadow(0 0 2px #29cfc6) drop-shadow(0 0 7px #29cfc6aa)}24%{filter:drop-shadow(0 0 4px #29cfc6) drop-shadow(0 0 15px #29cfc6) drop-shadow(0 0 22px #29cfc699)}}
@media (max-width:809.98px){.footer__bottom{flex-direction:column;align-items:flex-start}.lutor-signature{min-height:40px}}
@media (prefers-reduced-motion:reduce){.lutor-signature *,.lutor-signature__mark::before,.lutor-signature__mark::after{transition:none!important;animation:none!important}}

/* ---------- Horaires (pied de page) ---------- */
.footer__hours{display:flex;flex-direction:column;gap:8px;margin-top:32px}
.footer__hours p:not(.footer__label){font-size:18px;font-weight:300;line-height:1.4}

/* ---------- FAQ ---------- */
.faq{max-width:1040px;margin:0 auto;padding:120px 40px 0}
.faq__head{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:50px}
.faq__list{border-top:1px solid rgba(17,47,79,.15)}
.faq__item{border-bottom:1px solid rgba(17,47,79,.15)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 4px;cursor:pointer;list-style:none;color:var(--navy)}
.faq__q::-webkit-details-marker{display:none}
.faq__q h3{font-size:19px;font-weight:700;line-height:1.45;letter-spacing:.06em}
.faq__q:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.faq__icon{position:relative;flex:none;width:18px;height:18px}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:0;top:50%;width:18px;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .4s var(--spring)}
.faq__icon::after{transform:rotate(90deg)}
.faq__item[open] .faq__icon::after{transform:rotate(0)}
.faq__a{padding:0 48px 28px 4px;opacity:.8}
.faq__a p{font-size:17px;line-height:1.7;letter-spacing:.06em}
@media (hover:hover){.faq__q:hover h3{opacity:.7}}
@media (max-width:1199px){.faq{padding:100px 32px 0}}
@media (max-width:809.98px){
  .faq{padding:80px 24px 0}
  .faq__head{padding-bottom:36px}
  .faq__head .eyebrow{display:none}
  .faq__head .title{margin-top:0}
  .faq__q{padding:22px 0}
  .faq__q h3{font-size:17px;letter-spacing:.03em}
  .faq__a{padding:0 0 24px}
  .faq__a p{font-size:16px}
}