:root{--forest:#123d2b;--forest-deep:#062d20;--ivory:#faf7f0;--champagne:#e7c879;--gold:#b58a37;--ink:#193b2c;--muted:#657368;--border:#e5dfd2;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--ink);font:15px var(--sans);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{transition:background .2s,transform .2s}button:hover{filter:brightness(1.06)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button:disabled{cursor:not-allowed;opacity:.55}a{color:inherit}.icon{width:23px;height:23px;flex:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.view{display:none}.view.active{display:block}.wrap{max-width:none;margin:0;padding:0}.wrap>.view:not(#home){max-width:1160px;margin:auto;padding:58px 28px 76px;min-height:65vh}h1,h2{font-family:var(--serif);font-weight:500}h1{font-size:clamp(34px,4.2vw,58px);line-height:1.18;margin:16px 0 24px}h2{font-size:28px;line-height:1.22}p{color:var(--muted);line-height:1.7}button{border:0;border-radius:999px;background:var(--forest);color:white;padding:13px 22px;cursor:pointer;margin:6px 8px 6px 0}.outline{border:1px solid #cdd7cf;background:transparent;color:var(--forest)}.eyebrow,.label{font:600 10px var(--sans);letter-spacing:2.3px;color:var(--gold);text-transform:uppercase}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:30px 0}.card,.panel{background:#fffefa;border:1px solid var(--border);border-radius:18px;box-shadow:0 8px 28px #20392605;padding:28px}.card h2{margin-top:4px}.panel{margin:20px 0}.notice{border:1px solid #e9debf;background:#f0eadc;color:#4e594e;border-radius:14px;padding:21px;line-height:1.7}.page-heading{max-width:760px}.page-heading>p:last-child{font-size:17px}.offer-price{font:34px var(--serif);color:var(--forest)}.offer-price small{font:14px var(--sans)}input,select,textarea{color:var(--ink);background:white;border:1px solid #d9dfd8;border-radius:9px;padding:13px 14px;max-width:100%}label{color:var(--ink)}#catalog-status,#professional-status{font-size:14px;color:var(--muted)}#catalog-results .card{position:relative;padding-top:32px;border-top:3px solid #c6a25a}#catalog-results .card h2{font-size:25px}#catalog-results .card strong{font-size:18px}.site-header{height:84px;padding:0 clamp(22px,3.2vw,56px);display:flex;align-items:center;gap:22px;background:#fcfaf5;border-bottom:1px solid #eae3d6;color:var(--ink);font:14px var(--sans);position:relative;z-index:20}.brand{display:flex;width:205px;flex:none;height:55px;align-items:center}.brand svg{width:100%;height:100%;display:block}.brand-tagline{font-size:11px;line-height:1.4;font-weight:600;border-left:1px solid #d8cdb4;padding-left:20px;max-width:145px}.site-nav{max-width:none;margin:0 0 0 auto;padding:0;display:flex;align-items:center;flex-wrap:nowrap;gap:3px}.site-nav button{font-size:12px;white-space:nowrap;background:transparent;color:#25382c;padding:10px 13px;margin:0}.site-nav button[aria-current=page]{background:var(--forest);color:#fff}.header-account{display:flex;align-items:center;gap:10px;flex:none}.header-account button{font-size:12px;margin:0;white-space:nowrap;padding:11px 16px}.header-account .login-link{display:flex;align-items:center;gap:7px;background:transparent;color:var(--ink);padding:10px 0}.header-account .icon{width:21px;height:21px}.menu-toggle{display:none}.beauty-hero{position:relative;background:radial-gradient(ellipse at 65% 35%,#1a5036 0,#073522 50%,#062619 100%);min-height:430px;overflow:visible;padding:44px 0 98px;isolation:isolate}.hero-portrait,.hero-spa{position:absolute;top:0;bottom:0;overflow:hidden;z-index:-1;pointer-events:none}.hero-portrait svg,.hero-spa svg{width:100%;height:100%;display:block}.hero-copy{text-align:center;width:57%;margin-left:28%;position:relative;padding:0 16px}.hero-copy .eyebrow{font-size:9px;letter-spacing:3px;color:#d2bd84;margin:0 0 10px}.hero-copy h1{font:500 clamp(46px,5.8vw,87px)/1.08 var(--serif);letter-spacing:-2.5px;color:var(--champagne);margin:0;white-space:nowrap}.gold-swoosh{width:180px;height:18px;margin:14px auto 6px;border-top:3px solid #c4a153;border-radius:50%;transform:rotate(-5deg)}.hero-copy .hero-subtitle{font:400 clamp(24px,2.7vw,38px)/1.2 var(--sans);color:#fffaf0;margin:2px auto 18px}.hero-specialties{font:500 10px var(--sans);letter-spacing:3.2px;color:#dfcc98;margin:0}.hero-search{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);width:min(900px,80%);background:#fffdf8;box-shadow:0 8px 20px #00180d26;padding:8px;border:1px solid #eee6d7;border-radius:999px;display:grid;grid-template-columns:1.12fr 1.12fr 1fr auto;align-items:center;gap:5px;z-index:3}.hero-search label{display:flex;align-items:center;gap:8px;padding:0 10px;border-right:1px solid #e9e4d9;min-width:0}.hero-search .icon{width:20px;height:20px;color:#1c4632}.hero-search input,.hero-search select{background:transparent;min-width:0;width:100%;border:0;padding:9px 0;margin:0;font-size:12px;border-radius:0;height:40px}.hero-search input::placeholder{color:#283f31;opacity:1}.hero-search button{margin:0;padding:13px 22px;gap:8px;white-space:nowrap}.gold-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(115deg,#be9341,#aa792c);color:white;border:1px solid #c09a52;box-shadow:inset 0 1px 0 #f4ddb55c;font-weight:500}.gold-button .icon{color:inherit}.features-strip{position:relative;z-index:4;max-width:1120px;width:calc(100% - 96px);margin:-10px auto 0;padding:22px 12px;display:grid;grid-template-columns:1fr 1fr 1.12fr 1.24fr 1fr;background:#fffcf6;border:1px solid #eee5d5;border-radius:18px;box-shadow:0 7px 25px #5845220a}.feature{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 14px;border-right:1px solid #ded5c2}.feature:last-child{border:0}.feature>.icon{width:29px;height:29px;color:#1a5035}.feature strong{display:block;font-weight:600;font-size:11px;line-height:1.3}.feature span{display:block;color:#6e796f;font-size:10px;line-height:1.4;margin-top:4px}.home-categories{max-width:1200px;margin:0 auto;padding:34px 28px 28px}.section-intro{text-align:center;margin:0 0 24px}.section-intro .eyebrow{margin:0 0 8px}.section-intro h2{font-size:26px;margin:0}.category-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.category-card{position:relative;padding:0;margin:0;border-radius:16px;overflow:hidden;aspect-ratio:1.3;background:var(--forest);box-shadow:0 4px 12px #2039260a}.category-card svg{display:block;width:100%;height:100%;transition:transform .35s}.category-card:hover svg{transform:scale(1.05)}.category-card span{position:absolute;inset:auto 0 0;padding:20px 7px 11px;background:linear-gradient(transparent,#0b261deb 55%);color:#fffaf0;text-align:center;font-size:14px;line-height:1.12;font-weight:500;min-height:44px}.pro-promo{display:grid;grid-template-columns:1.35fr .85fr 1fr;align-items:center;gap:20px;position:relative;overflow:hidden;max-width:1200px;margin:6px auto 0;padding:34px 55px;background:radial-gradient(ellipse at 73% 75%,#ead6b2 0,#f6ecdd 45%,#f1e5d1 100%);border-radius:20px;border:1px solid #ebdfc9;min-height:270px}.pro-promo:after{content:'';position:absolute;width:220px;height:220px;border:3px solid #d2b36a;border-radius:50%;right:-160px;bottom:-160px;pointer-events:none}.pro-promo-copy{position:relative;z-index:2}.pro-promo-copy h2{font-size:29px;margin:8px 0 12px}.pro-promo-copy p:not(.eyebrow){font-size:14px;color:#354736;margin:0 0 14px}.pro-promo-copy .gold-button{margin:0;font-size:13px;padding:13px 21px}.pro-visual{align-self:stretch;min-height:200px;overflow:hidden;border-radius:80px 10px 10px 10px}.pro-visual svg{width:100%;height:100%;display:block}.pro-benefits{list-style:none;padding:0;margin:0;display:grid;gap:17px;position:relative;z-index:1}.pro-benefits li{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.5}.pro-benefits .icon{width:18px;height:18px;color:#21643d}.pilot-note{text-align:center;margin:19px 24px 32px;font-size:11px;color:#7e857a}.site-footer{max-width:none;margin:0;padding:30px max(28px,calc((100vw - 1120px)/2));border-top:1px solid #e6ddce;display:flex;justify-content:space-between;gap:30px;align-items:center;background:#f4efe5;color:var(--forest);font:12px var(--sans)}.site-footer strong{font:24px var(--serif)}.site-footer p{font-size:11px;margin:6px 0;line-height:1.7}.directory-card .directory-avatar{width:54px;height:54px;display:grid;place-content:center;border-radius:50%;background:#e8efe7;color:var(--forest);font:22px var(--serif);margin-bottom:18px}
@media(min-width:1500px){.beauty-hero{min-height:490px;padding-top:58px}.hero-search{bottom:42px}.hero-copy{margin-left:26%}.hero-portrait{width:33%}}
@media(max-width:1190px){.site-header{gap:15px;padding:0 24px}.brand{width:174px}.brand-tagline{display:none}.site-nav button{font-size:11px;padding:9px 10px}.header-account button{font-size:11px}.hero-copy h1{font-size:6vw}.hero-search{width:86%}.feature{padding:0 10px;gap:8px}.features-strip{width:calc(100% - 56px)}.feature span{font-size:9px}.category-card span{font-size:12px}.pro-promo{margin-left:28px;margin-right:28px;padding:28px 30px}.pro-promo-copy h2{font-size:26px}}
@media(max-width:850px){.site-header{height:76px;gap:14px;padding:0 22px}.brand{width:170px;height:48px}.menu-toggle{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--forest);padding:8px;margin:0 0 0 auto;border:1px solid #ded9ce;border-radius:50%;width:39px;height:39px}.site-nav{display:none;position:absolute;top:75px;left:0;right:0;padding:14px 22px;background:#fcfaf5;box-shadow:0 16px 25px #0a2a1717;flex-direction:column;align-items:stretch;gap:5px;margin:0}.site-nav.is-open{display:flex}.site-nav button{text-align:left;padding:12px 16px;font-size:14px}.header-account{gap:12px}.header-account .login-link span{display:none}.header-account .signup-button{padding:10px 15px}.beauty-hero{min-height:430px;padding-top:55px}.hero-copy{width:63%;margin-left:26%;padding:0 4px}.hero-copy h1{font-size:7vw;letter-spacing:-1.6px}.hero-copy .eyebrow{font-size:8px;letter-spacing:1.6px}.hero-copy .hero-subtitle{font-size:27px}.hero-specialties{font-size:8px;letter-spacing:1.6px}.hero-portrait{width:39%;opacity:.9}.hero-spa{width:22%;opacity:.7}.hero-search{width:calc(100% - 50px);grid-template-columns:1fr 1fr auto;border-radius:20px;bottom:27px}.hero-search label:nth-child(3){display:none}.hero-search label:nth-child(2){border:0}.hero-search button{padding:13px 17px;font-size:12px}.features-strip{grid-template-columns:repeat(3,1fr);padding:18px 8px;row-gap:20px}.feature{border:0;justify-content:flex-start}.feature:nth-child(4),.feature:nth-child(5){display:none}.feature strong{font-size:11px}.feature span{font-size:9px}.category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.category-card{aspect-ratio:1.5}.category-card span{font-size:15px}.section-intro h2{font-size:25px}.pro-promo{grid-template-columns:1.4fr 1fr;padding:30px;gap:20px}.pro-visual{display:none}.pro-promo-copy h2{font-size:27px}.pro-benefits{gap:20px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer{padding:26px 28px;gap:20px}.site-footer>p:nth-child(2){display:none}}
@media(max-width:540px){.site-header{height:69px;padding:0 15px;gap:10px}.brand{width:146px;height:44px}.menu-toggle{width:35px;height:35px}.header-account{gap:10px}.header-account .signup-button{font-size:10px;padding:9px 12px}.header-account .login-link{padding:5px 0}.header-account .icon{width:20px;height:20px}.site-nav{top:68px}.beauty-hero{min-height:525px;padding:33px 18px 0;overflow:hidden}.hero-portrait{width:66%;height:310px;top:135px;bottom:auto;left:-15px;opacity:.84;mask-image:linear-gradient(to right,#000 65%,transparent)}.hero-spa{width:40%;height:250px;top:185px;right:-6px;bottom:auto;opacity:.85;mask-image:linear-gradient(to left,#000 65%,transparent)}.hero-copy{width:100%;margin:0;padding:0;z-index:2}.hero-copy .eyebrow{font-size:7px;letter-spacing:2px;margin-bottom:10px}.hero-copy h1{font-size:clamp(35px,9vw,48px);letter-spacing:-1.5px}.gold-swoosh{width:125px;height:15px;margin:10px auto 1px;border-top-width:2px}.hero-copy .hero-subtitle{font-size:23px;line-height:1.22;margin:0 auto 11px;text-shadow:0 2px 15px #00180a;max-width:320px}.hero-specialties{font-size:7px;letter-spacing:1.4px}.hero-search{bottom:22px;width:calc(100% - 30px);padding:8px;border-radius:17px;display:grid;grid-template-columns:1fr 1fr;gap:7px;box-shadow:0 8px 30px #001a0b3b}.hero-search label{padding:0 5px;gap:6px;border:0;background:#f4f1e9;border-radius:9px}.hero-search label .icon{width:15px;height:15px;margin-left:4px}.hero-search input{font-size:10px;padding:8px 0;height:35px}.hero-search button{grid-column:1/-1;padding:10px;font-size:12px;border-radius:10px}.hero-search button .icon{width:17px;height:17px}.features-strip{width:calc(100% - 30px);margin:14px auto 0;padding:16px 7px;gap:0;border-radius:14px}.feature{display:block;text-align:center;padding:0 5px}.feature>.icon{width:24px;height:24px;margin-bottom:7px}.feature strong{font-size:9px;line-height:1.4}.feature span{font-size:8px;line-height:1.4}.home-categories{padding:29px 15px 22px}.section-intro{margin-bottom:20px}.section-intro .eyebrow{font-size:8px;letter-spacing:1.7px}.section-intro h2{font-size:23px;line-height:1.25;padding:0 20px}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.category-card{aspect-ratio:1.45;border-radius:13px}.category-card span{font-size:13px;min-height:36px;padding-bottom:9px}.pro-promo{margin:0 15px;padding:25px 23px;display:block;border-radius:17px}.pro-promo-copy .eyebrow{font-size:8px;letter-spacing:1.8px}.pro-promo-copy h2{font-size:26px}.pro-promo-copy p:not(.eyebrow){font-size:12px}.pro-promo-copy p br{display:none}.pro-benefits{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:25px}.pro-benefits li{align-items:flex-start;font-size:10px;gap:6px}.pro-benefits .icon{width:15px;height:15px}.pro-promo-copy .gold-button{font-size:12px;width:100%;margin-top:4px}.pilot-note{font-size:10px;margin:17px 25px 25px}.site-footer{display:block;padding:27px 22px}.site-footer strong{font-size:24px}.site-footer>p{margin-top:15px}.wrap>.view:not(#home){padding:35px 18px 50px}h1{font-size:35px}h2{font-size:25px}.grid{grid-template-columns:1fr;gap:16px;margin:23px 0}.card,.panel{padding:23px;border-radius:15px}.notice{font-size:13px;padding:17px}.page-heading>p:last-child{font-size:15px}#client label{display:block;font-size:13px;margin-top:14px}#client input,#client select{width:100%;margin:6px 0!important}#catalog-search-btn{width:100%;margin:16px 0 0}.page-heading h1 br{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
.booking-header{background:#fcfaf5;color:var(--forest);padding:20px max(22px,calc((100vw - 1100px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--border);font:13px var(--sans)}.booking-wordmark{font:29px var(--serif);text-decoration:none}.booking-header a:last-child{font-size:12px;text-decoration:none}body:has(.booking-header) main{max-width:980px;margin:40px auto;padding:0 24px}body:has(.booking-header) button[aria-pressed=true]{background:var(--forest);color:white}body:has(.booking-header) .row button{margin:3px 0}body:has(.booking-header) .days{margin-top:20px}body:has(.booking-header) .days button{white-space:nowrap}
/* Keep interface text and controls independent from the visual reference. */
.beauty-hero::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:180px;background:linear-gradient(to bottom,transparent 0%,#082f21 36%);z-index:-1;pointer-events:none}.category-card span{background:#103a29;min-height:42px;padding:9px 7px;display:flex;align-items:center;justify-content:center}.category-card svg{pointer-events:none}@media(max-width:540px){.beauty-hero::after{height:180px;background:linear-gradient(to bottom,transparent 0%,#082f21 40%)}.category-card span{min-height:39px}}
.pro-steps{list-style:none;counter-reset:pro-step;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0;margin:24px 0 30px;max-width:1000px}.pro-steps li{counter-increment:pro-step;background:#eeeade;border:1px solid #e1d8c6;border-radius:12px;padding:15px 12px;font-size:12px;line-height:1.5}.pro-steps li::before{content:counter(pro-step);display:inline-grid;place-content:center;width:23px;height:23px;border-radius:50%;background:#e1d5b9;color:#614e2a;margin-right:7px}.pro-steps li[data-done=true]{background:#e9f0e8;border-color:#cddfcd}.pro-steps li[data-done=true]::before{content:'✓';background:#275e3c;color:#fff}.hours-panel p{max-width:700px}.hours-panel fieldset{border:0;padding:0;margin:0;min-width:0}.hours-day{display:grid;grid-template-columns:90px 85px 1fr;gap:12px;padding:17px 0;border-bottom:1px solid var(--border);align-items:start}.hours-day>strong{padding-top:11px;font-size:13px}.hours-closed{display:flex;gap:6px;align-items:center;padding-top:11px;font-size:12px}.hours-closed input{width:15px;height:15px;padding:0;margin:0;accent-color:var(--forest)}.hours-list{min-width:0;display:grid;gap:8px}.hours-list[hidden],.hours-day button[hidden]{display:none}.hours-interval{display:flex;align-items:center;gap:8px;min-width:0}.hours-interval input{width:116px;max-width:40%;margin:0;padding:9px;font-size:13px}.hours-interval>span{font-size:12px}.hours-day .hours-remove{padding:8px 12px;margin:0;font-size:11px}.hours-day .hours-add{grid-column:3;justify-self:start;padding:8px 12px;margin:0;font-size:11px}.hours-capacity{color:var(--forest);font-size:13px;font-weight:600;background:#edf2e9;border-radius:9px;padding:12px 14px}.hours-note{font-size:12px;color:#747e70}.hours-panel #hours-save{margin-top:20px}.hours-panel #hours-feedback{font-size:13px}#pro-form label,#service-form label{font-size:13px;display:block;margin-top:15px}#pro-form input,#pro-form select,#pro-form textarea,#service-form input,#service-form textarea{margin:7px 0!important;width:100%!important}
/* Une case à cocher n'est pas un champ de saisie.
   La règle ci-dessus étire tout input à 100 % de la largeur, avec !important, et elle écrasait
   aussi les cases : dans le formulaire de fiche, la case WhatsApp mesurait 161 px et il ne
   restait que 136 px à son libellé, qui se repliait en colonne d'un ou deux mots. Illisible,
   et visible seulement sur un téléphone — une professionnelle l'a découvert avant moi.
   La règle est posée ici pour toutes les cases du site, pas seulement celles de ce formulaire :
   la règle générique `input{width:240px}` leur faisait le même sort ailleurs. */
input[type=checkbox],input[type=radio]{
  width:auto!important;min-width:0;
  margin:0;padding:0;border:0;border-radius:0;
  accent-color:var(--forest)
}
/* La règle ci-dessus ne suffit pas dans le formulaire de fiche : `#pro-form input` porte un
   identifiant, donc une spécificité plus forte, et son `width:100%!important` l'emporte sur
   un sélecteur sans identifiant — même avec !important des deux côtés. Il faut donc répéter
   la largeur ici, avec un identifiant.
   Première tentative : j'avais ajouté `flex:0 0 auto` au sélecteur faible en croyant la
   largeur corrigée. La case, toujours à 100 %, ne pouvait alors plus rétrécir : elle est
   passée de 161 px à 306 px et il n'est plus rien resté du libellé. Une correction non
   mesurée vaut moins que pas de correction. */
#pro-form input[type=checkbox],#pro-form input[type=radio],
#service-form input[type=checkbox],#service-form input[type=radio]{
  width:auto!important;flex:0 0 auto;margin:3px 0 0!important
}
/* Le panneau des horaires dimensionne déjà ses cases ; on ne touche pas à un écran qui marche. */
.hours-closed input[type=checkbox]{width:15px!important;height:15px}
@media(max-width:650px){.pro-steps{grid-template-columns:1fr 1fr;gap:8px}.pro-steps li{font-size:11px;padding:12px 10px}.hours-day{grid-template-columns:1fr 90px;gap:8px}.hours-day>strong{padding-top:6px}.hours-closed{padding-top:6px;justify-self:end}.hours-list,.hours-day .hours-add{grid-column:1/-1}.hours-interval{gap:6px;flex-wrap:wrap}.hours-interval input{width:105px;max-width:38%;font-size:12px}.hours-day .hours-remove{font-size:10px;padding:8px 10px}}
.text-button{display:inline-block;background:transparent;color:var(--forest);padding:7px 0;border:0;border-radius:0;text-decoration:underline;text-underline-offset:3px;font-size:13px}.account-reassurance{font-size:12px;color:#6f796e;line-height:1.6;max-width:460px}#toggle-password{font-size:11px;padding:9px 14px}#verify-code{max-width:260px}

[hidden]{display:none!important}

.profile-link{display:inline-block;background:var(--forest);color:white;text-decoration:none;padding:12px 18px;border-radius:999px;margin:14px 10px 0 0;font-size:13px;line-height:1.5}.profile-link:hover{background:#245a3e}

.directory-filters{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px}.directory-filters label{display:block;font-size:13px;margin-bottom:8px}.directory-filters input,.directory-filters select{width:100%;margin:0;min-width:0}.directory-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px}.directory-actions button{margin:0}.directory-services{font-size:13px;overflow-wrap:anywhere}@media(max-width:720px){.directory-filters{grid-template-columns:1fr;gap:16px}.directory-actions button{flex:1}}

.private-preview{max-width:850px}.private-preview summary{cursor:pointer;font-weight:600;line-height:1.6;color:var(--forest)}.private-preview[open] summary{margin-bottom:18px}.private-preview-hero{padding:24px;border-radius:15px;background:#123d2b}.private-preview-hero h3{font:30px var(--serif);color:#e7c879;margin:10px 0}.private-preview-hero p{color:#f4ead4;margin:7px 0}.private-preview-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:26px;margin-top:20px}.private-preview-layout h3{font:23px var(--serif)}.private-preview-description{white-space:pre-line}.private-preview-service{border-bottom:1px solid var(--border);padding:14px 0}.private-preview-service h4{margin:0}.private-preview-service p{margin:7px 0;font-size:13px}.private-preview-hours{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;font-size:13px;line-height:1.6}.private-preview-hours dt{font-weight:600}.private-preview-hours dd{margin:0;text-align:right}.private-preview p,.private-preview h3,.private-preview h4{overflow-wrap:anywhere}@media(max-width:650px){.private-preview-layout{grid-template-columns:1fr;gap:10px}.private-preview-hero{padding:20px}}

.weekly-planning{max-width:1100px}.weekly-toolbar{display:flex;gap:10px;flex-wrap:wrap}.weekly-toolbar button{margin:0;font-size:12px;padding:10px 14px}.weekly-date{font-weight:600;color:var(--forest);font-size:17px}.weekly-scroll{overflow-x:auto;padding:0 0 15px;border:1px solid var(--border);border-radius:12px;background:#fff}.weekly-grid{display:grid;grid-template-columns:55px repeat(7,minmax(110px,1fr));min-width:850px;padding-bottom:15px}.weekly-day-heading{height:70px;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0;padding:10px 4px;text-align:center;font:600 12px var(--sans);border-bottom:1px solid var(--border)}.weekly-axis .weekly-day-heading{font-size:10px}.weekly-day{border-left:1px solid var(--border)}.weekly-today .weekly-day-heading{background:#e8f0e6;color:#154a30}.weekly-today-label{font-size:9px;font-weight:400;margin-top:5px}.weekly-scale,.weekly-track{position:relative}.weekly-track{background:repeating-linear-gradient(to bottom,transparent 0,transparent 29px,#edf0e9 29px,#edf0e9 30px)}.weekly-tick{position:absolute;right:8px;transform:translateY(-50%);font-size:10px;color:var(--muted)}.weekly-slot{position:absolute;left:5px;right:5px;border:1px solid #91b59a;border-left:3px solid #285e3b;border-radius:7px;background:#e3efdf;overflow:hidden;padding:6px;color:#204b30;display:flex;flex-direction:column;gap:5px;font-size:10px;line-height:1.3;min-height:3px}.weekly-slot strong{font-size:10px}.weekly-closed{background:#f2f1ec;margin:0;padding:20px 8px;text-align:center;font-size:12px;height:100%;color:#778074}@media(max-width:650px){.weekly-toolbar{gap:6px}.weekly-toolbar button{font-size:10px;padding:9px 10px}.weekly-date{font-size:15px}}

.unsaved-notice{max-width:850px;border-left:4px solid var(--gold);font-size:14px}

.skip-link{position:fixed;top:12px;left:12px;z-index:10000;padding:12px 18px;background:#15382d;color:#fff;border:2px solid #dfcda7;border-radius:6px;transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0);outline:3px solid #ae8d50;outline-offset:3px}

.directory-rating{color:#ae8d50;letter-spacing:2px;font-size:14px;margin:6px 0}

.card-photo{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;display:block;margin:0 0 14px}

.site-nav .nav-link{display:inline-flex;align-items:center;padding:10px 14px;color:inherit;text-decoration:none;font:inherit}
.site-nav .nav-link:hover{text-decoration:underline}

/* Cibles tactiles.
   Un doigt n'a pas la précision d'un curseur : un lien de douze pixels de haut se rate, et
   on finit par en toucher un autre. On élargit la zone sensible sans toucher à la taille du
   texte, et seulement sur les écrans tactiles, pour ne rien changer à la mise en page sur un
   ordinateur. */
@media (pointer: coarse) {
  .site-footer a,
  .footer-links a,
  .profile-footer a,
  .site-header a,
  .booking-header a,
  .profile-back,
  .brand,
  nav[aria-label] a {
    display: inline-block;
    padding-block: 11px;
  }
  .login-link,
  .signup-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ------------------------------------------------------------------ bannière d'accueil
   Refaite sans photo, et surtout sans rien en position absolue.
   L'ancienne version posait un portrait sur 34 %, une image de spa sur 24 % et la barre de
   recherche en absolu par-dessus. Sur un téléphone, les trois se recouvraient : un bandeau
   sombre coupait le visage en deux, une barre de recherche fantôme apparaissait derrière la
   vraie, et le texte passait par-dessus l'image. Rien de tout cela n'était visible sur un
   écran large, et c'est une utilisatrice qui l'a signalé depuis son iPhone.
   Ici tout est dans le flux : la hauteur suit le contenu, donc deux éléments ne peuvent pas
   occuper la même place, à aucune largeur. La lueur est faite de deux dégradés — aucun
   fichier à charger, ce qui compte sur un réseau mobile. */
.beauty-hero{position:relative;overflow:hidden;isolation:isolate;min-height:0;
  background:var(--forest-deep);padding:44px 16px 36px;text-align:center}
.hero-lueur{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 42% at 78% 14%, #b58a3755, transparent 70%),
    radial-gradient(52% 38% at 12% 88%, #e7c87933, transparent 72%)}
.beauty-hero::after{content:none}
.hero-copy{position:relative;z-index:1;width:auto;margin:0;padding:0;text-align:center}
.hero-copy h1{font:600 clamp(38px,11vw,72px)/1 var(--serif);letter-spacing:-1.5px;
  color:var(--champagne);margin:0;white-space:normal}
.gold-swoosh{width:118px;height:14px;margin:14px auto 16px;border-top:3px solid #c4a153;
  border-radius:50%;transform:rotate(-3deg)}
.hero-subtitle{font:400 clamp(19px,5.2vw,30px)/1.3 var(--sans);color:#fffaf0;
  margin:0 auto 14px;max-width:17em;text-shadow:none}
.hero-specialties{margin:0 0 26px}

/* La carte de recherche, dans le flux et sous le texte : c'est le seul geste attendu de la
   visiteuse, donc rien ne doit passer devant. */
.hero-search{position:static;transform:none;width:100%;max-width:470px;margin:0 auto;
  bottom:auto;left:auto;background:#fffdf8;border:1px solid #eee6d7;border-radius:16px;
  padding:9px;box-shadow:0 10px 26px #00180d2e;display:grid;grid-template-columns:1fr;
  gap:7px;align-items:stretch;z-index:1;text-align:left}
.hero-search label{display:flex;align-items:center;gap:9px;background:#f6f2e9;
  border:0;border-radius:11px;padding:0 14px}
.hero-search label .icon{width:17px;height:17px;flex:0 0 auto;color:var(--forest)}
.hero-search input,.hero-search select{border:0;background:transparent;width:100%;
  font:400 15px var(--sans);padding:14px 0;height:auto;color:var(--ink)}
.hero-search button{border-radius:11px;padding:15px;font-size:16px;margin:0}
/* Le filtre par territoire était masqué sous 850 px, faute de place dans une rangée.
   En colonne il y a la place, et il compte désormais : l'annuaire couvre cinq territoires. */
.hero-search label:nth-child(3){display:flex}
@media(min-width:760px){
  .beauty-hero{padding:58px 24px 48px}
  .hero-search{max-width:860px;grid-template-columns:1.1fr 1.1fr 1fr auto;border-radius:999px;
    padding:8px}
  .hero-search label{padding:0 16px}
  .hero-search button{padding:15px 26px}
}

/* ---------------------------------------------------------------------------- le logo
   Le sigle est enfin un fichier à lui (logo-dc.png), découpé dans l'image que Daniel a
   fournie, détouré et nettoyé de son fond crème. Avant, l'en-tête découpait une zone d'un
   grand visuel composite par coordonnées : trop étroite, le nom était coupé à droite ; assez
   large pour le nom, elle laissait entrer le début de la signature — « | La platef ». Aucun
   réglage de ces coordonnées ne pouvait satisfaire les deux, et je ne pouvais pas voir
   l'image pour les ajuster.
   Le nom est maintenant du texte, dans la même Playfair que le titre de la bannière : net à
   toutes les tailles, et plus rien qui puisse être rogné. */
/* Le sélecteur porte « .site-header » exprès. Une règle d'accessibilité tactile plus bas
   agrandit la zone de tap de tous les liens — « .site-header a, …, .brand { display:
   inline-block } » — et dans une liste de sélecteurs, c'est le plus spécifique qui l'emporte :
   « .site-header a » bat « .brand », quel que soit l'ordre dans le fichier. Le logo se
   retrouvait donc en bloc, et son nom passait sous le sigle au lieu d'être à côté.
   Le défaut ne s'est pas vu sur mon banc d'essai : je n'y simulais pas un écran tactile, donc
   la règle ne s'y appliquait pas. Les contrôles le font désormais. */
.site-header a.brand{display:flex;width:auto;flex:none;height:auto;align-items:center;
  gap:8px;text-decoration:none;padding-block:0}
.brand-sigle{height:40px;width:auto;display:block}
.brand-mot{font:600 18px/1.05 var(--serif);color:var(--forest);letter-spacing:-.3px;
  white-space:nowrap}
/* Le « Cel » en doré répond au C doré du sigle : le monogramme et le nom se lisent alors
   comme une seule marque plutôt que comme un dessin posé à côté d'un mot. L'italique est
   annulée — la balise sert ici de marqueur de couleur, pas d'emphase. */
.brand-mot i{font-style:normal;color:var(--gold)}

/* ---------------------------------------------------------------- écran de lancement
   Lancée depuis l'icône de l'écran d'accueil, l'application affichait un écran quasi blanc
   avant d'ouvrir le site : le manifeste annonçait un fond crème, et iOS peint cette couleur
   en attendant. Désormais le manifeste annonce le vert profond, et cet écran-ci prend le
   relais avec le logo, le temps que la page soit prête.
   Il ne s'affiche QUE dans l'application installée. Dans un onglet ordinaire, personne n'a
   demandé une page d'attente, et en ajouter une ralentirait tout le monde pour rien. */
#lancement{display:none}
#lancement.vu{display:flex;position:fixed;inset:0;z-index:9999;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;background:var(--forest);
  padding:32px;text-align:center;opacity:1;transition:opacity .4s ease}
#lancement.fini{opacity:0;pointer-events:none}
/* Le logo de la marque, posé sur une carte crème.
   Le « D » du sigle est vert foncé : sur le vert de l'écran il disparaîtrait et il ne
   resterait que le « C » doré — méconnaissable. La carte lui rend le fond clair pour lequel
   il a été dessiné, et c'est bien le logo de DanCel Connect qu'on voit au lancement.
   Le fond de l'écran reste #123d2b, la couleur annoncée par le manifeste : l'écran natif
   d'iOS et celui-ci sont de la même teinte, donc aucun clignotement entre les deux. */
.lancement-carte{display:grid;place-content:center;background:var(--ivory);
  border-radius:22px;padding:15px 19px;box-shadow:0 12px 30px #00000038}
.lancement-carte img{width:112px;height:auto;display:block}
/* Sur fond sombre, le nom passe en crème et le « Cel » garde le doré : c'est la même
   marque que dans l'en-tête, simplement inversée pour le fond. */
#lancement p{font:600 27px/1 var(--serif);color:#faf7f0;margin:0}
#lancement p i{font-style:normal;color:var(--champagne)}
#lancement span{font:400 13px/1.5 var(--sans);color:#a9bdad;max-width:15em;text-wrap:balance}
@media(prefers-reduced-motion:reduce){#lancement.vu{transition:none}}
@media(max-width:850px){.brand-sigle{height:36px}.brand-mot{font-size:17px}}
@media(max-width:540px){.brand-sigle{height:32px}.brand-mot{font-size:15px}}

/* ------------------------------------------------------------- le logo sur les autres pages
   Jusqu'ici le logo n'existait que sur l'accueil ; partout ailleurs la marque était le nom
   écrit en Playfair. Une cliente qui arrive par un lien WhatsApp vers une fiche, ou par une
   recherche vers l'annuaire, ne voyait donc jamais le logo — c'est pourtant là qu'il sert le
   plus : il dit, avant la première ligne de texte, chez qui elle est.
   L'en-tête de l'annuaire et de l'espace professionnel porte le sigle à gauche du nom, comme
   l'accueil. Le sélecteur inclut « .booking-header » exprès : la règle tactile plus haut
   passe « .booking-header a » en inline-block, ce qui ferait tomber le nom sous le sigle. */
.booking-header a.booking-wordmark{display:inline-flex;align-items:center;gap:10px;
  padding-block:0}
.booking-wordmark img{height:38px;width:auto;display:block}
.booking-wordmark span{font:600 20px/1.05 var(--serif);color:var(--forest);
  letter-spacing:-.3px}
.booking-wordmark i{font-style:normal;color:var(--gold)}
@media(max-width:540px){.booking-wordmark img{height:32px}
  .booking-wordmark span{font-size:17px}}

/* En pied de page, le sigle seul, au-dessus du nom : le nom est déjà écrit juste en dessous
   en grandes capitales, le répéter à côté du sigle ferait doublon. */
.footer-sigle{display:block;height:34px;width:auto;margin:0 0 9px}

/* --------------------------------------------------------------- la barre de recherche
   Les étiquettes passent AU-DESSUS des champs. Alignées à gauche de chaque champ, elles
   mangeaient la moitié de la largeur et poussaient la commune hors de l'écran sur un
   téléphone ; au-dessus, elles tiennent sur une ligne et la grille se replie proprement. */
.recherche{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:13px;align-items:end;
  background:#fffefa;border:1px solid var(--border);border-radius:16px;
  padding:20px 22px;margin:26px 0 8px}
.recherche-champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.recherche-champ label{font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.recherche-champ input,.recherche-champ select{width:100%;margin:0}
.recherche-action button{margin:0;white-space:nowrap}
.recherche-compte{font-size:13px;color:var(--muted);margin:0 0 20px;padding-left:4px}
@media(max-width:880px){.recherche{grid-template-columns:1fr 1fr;padding:17px}
  .recherche-champ:first-child,.recherche-action{grid-column:1/-1}}

/* ----------------------------------------------------------- une carte de prestation
   Le soin en titre, son prix juste en dessous, l'établissement ensuite : c'est l'ordre dans
   lequel on lit la réponse à « combien coûte un soin du visage près de chez moi ». */
.carte-presta h2{font-size:21px;margin:0 0 6px}
.presta-prix{font:400 25px/1.1 var(--serif);color:var(--forest);margin:0 0 8px}
.presta-lieu{font-size:13.5px;color:var(--muted);margin:0 0 4px}
.presta-detail{font-size:13.5px;margin:8px 0 0}
.presta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px}
/* Une seule action en vert : réserver. La fiche reste un lien, pour qu'on ne lise pas deux
   boutons de même poids et qu'on hésite. */
.presta-reserver{display:inline-flex;align-items:center;background:var(--forest);color:#fff;
  text-decoration:none;padding:12px 18px;border-radius:9px;font-size:14px}
.presta-reserver:hover{filter:brightness(1.1)}
/* « .profile-link » est un bouton vert ailleurs sur le site. Ici il doit redevenir un lien :
   deux boutons verts l'un sous l'autre ont le même poids, et on hésite entre les deux au
   lieu de réserver. Le sélecteur est plus spécifique que « .profile-link », donc il gagne. */
.presta-actions .profile-link{background:none;color:var(--forest);padding:0;margin:0;
  border-radius:0;font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
.presta-actions .profile-link:hover{background:none;color:#1a4a32}

/* ------------------------------------------------- la carte d'un établissement
   Les prestations y figurent avec leur prix, une par ligne, le tarif aligné à droite :
   on compare deux instituts sans ouvrir leurs fiches. */
.directory-services{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px;
  font-size:13.5px}
.directory-services li{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;color:var(--ink);border-bottom:1px dotted #e4dccc;padding-bottom:6px}
.directory-services li:last-child{border-bottom:0;padding-bottom:0}
.directory-services b{font-weight:600;color:var(--forest);white-space:nowrap}
.recherche-action{flex-direction:row;gap:9px;flex-wrap:wrap}

/* --------------------------------------------- la vitrine quand il n'y a encore rien */
.vitrine-vide{text-align:center;padding:38px 26px}
.vitrine-vide h2{font-size:26px;margin:0 0 10px}
.vitrine-vide p{max-width:52ch;margin:0 auto;font-size:15px;line-height:1.55}
.vitrine-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;margin-top:20px}
.vitrine-actions button{margin:0}

/* ------------------------------------------------- la navigation des pages isolées
   L'annuaire et les fiches d'établissement sont les pages les plus souvent atteintes par
   un lien partagé ou une recherche Google — et c'étaient les seules sans navigation : le
   bandeau portait le logo et un lien, rien d'autre. On y arrivait, on n'en sortait pas.
   Au téléphone la barre défile horizontalement plutôt que de passer à la ligne : le bandeau
   a une hauteur libre, mais une deuxième ligne de liens repousserait le titre hors de vue. */
.booking-nav{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;
  max-width:100%}
.booking-nav::-webkit-scrollbar{display:none}
.booking-header a.booking-nav>a,.booking-nav a{font-size:13px;text-decoration:none;
  color:var(--forest);padding:7px 11px;border-radius:999px;white-space:nowrap}
.booking-nav a:hover{background:#efe9dc}
@media(max-width:700px){.booking-header{flex-wrap:wrap;row-gap:4px;padding-bottom:10px}
  .booking-nav{width:100%;justify-content:flex-start;gap:0}
  .booking-nav a{padding:7px 12px 7px 0;font-size:12.5px}}

/* Le titre d'une rubrique reçoit le focus au changement de page, pour que les lecteurs
   d'écran annoncent où l'on vient d'arriver. Sans cette règle, le navigateur dessine en plus
   un cadre noir autour du titre, que tout le monde voit et que personne ne comprend. Les
   personnes au clavier gardent leur repère : « :focus-visible » n'est pas touché. */
.view h1:focus{outline:none}

/* ------------------------------------------------------------------- les trois formules
   Trois cartes de hauteur libre plutôt qu'un tableau : sur un téléphone, un tableau
   comparatif se lit de travers ou se réduit à une colonne illisible, et c'est sur un
   téléphone que les professionnelles liront cette page.
   La carte du milieu porte un ruban et une bordure dorée. Ce n'est pas de l'ornement : sans
   repère, trois prix alignés laissent la lectrice choisir le moins cher par défaut, sans
   avoir comparé. Le ruban dit laquelle correspond à la plupart des instituts.
   « align-items:start » est volontaire : les cartes n'ont pas le même nombre de lignes et
   les étirer à la même hauteur créerait de grands vides sous les listes courtes. */
.tarifs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  margin:30px 0 26px;align-items:stretch}
.tarif{position:relative;display:flex;flex-direction:column;background:#fffefa;
  border:1px solid var(--border);border-radius:18px;padding:27px 24px 24px}
.tarif-vedette{border-color:#d8bd80;box-shadow:0 10px 30px #2039260f}
.tarif-ruban{position:absolute;top:-11px;left:24px;margin:0;background:var(--forest);
  color:#f6ecd8;font:600 10px var(--sans);letter-spacing:1.6px;text-transform:uppercase;
  padding:5px 12px;border-radius:999px}
.tarif h2{font-size:21px;margin:0}
.tarif-prix{font:400 34px/1.1 var(--serif);color:var(--forest);margin:7px 0 2px}
.tarif-prix small{font:400 13px var(--sans);color:var(--muted)}
.tarif-pitch{font-size:14px;line-height:1.5;margin:0 0 15px}
.tarif-liste{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px;
  font-size:13.5px;line-height:1.45}
/* La coche est dessinée en CSS : deux bords tournés à 45°. Pas d'image à charger, et elle
   suit la couleur du texte si la page change de palette. */
.tarif-liste li{position:relative;padding-left:23px;color:var(--ink)}
.tarif-liste li:before{content:'';position:absolute;left:2px;top:4px;width:9px;height:5px;
  border-left:2px solid #1f6340;border-bottom:2px solid #1f6340;transform:rotate(-45deg)}
/* Une promesse non tenue coûte plus cher qu'une fonction manquante : ce qui n'existe pas
   encore le dit, sur la ligne même, et pas seulement en bas de page. */
.bientot{display:inline-block;background:#f1eadb;color:#7a5a1e;font:600 9px var(--sans);
  letter-spacing:1.1px;text-transform:uppercase;padding:2px 7px;border-radius:999px;
  margin-right:5px;white-space:nowrap}
.tarif-sans{font-size:12px;color:var(--muted);margin:auto 0 14px;padding-top:13px;
  border-top:1px solid #eee6d7}
.tarif button{width:100%;margin:0}
@media(max-width:980px){.tarifs{grid-template-columns:1fr;gap:17px;margin-top:34px}
  .tarif{padding:24px 20px}.tarif-prix{font-size:31px}}

/* --------------------------------------------------- la navigation des pages sans menu
   Trouvé en vérifiant les en-têtes : sous 850 px, « .site-nav » est replié et ne se rouvre
   qu'avec le bouton « .menu-toggle ». Or ce bouton n'existe que sur l'accueil. Sur l'agenda,
   la réservation, les demandes et la revendication, les liens de navigation étaient donc
   simplement invisibles au téléphone, sans rien pour les faire apparaître : une
   professionnelle sur son agenda n'avait aucun moyen de revenir à son espace.
   Quand l'en-tête n'a pas de bouton, la barre passe sous le logo, sur toute la largeur.
   Elle y défile horizontalement plutôt que de passer à la ligne : « Demandes reçues » sur
   une deuxième ligne débordait sous le filet de l'en-tête, dont la hauteur est fixe.
   « :has() » n'est pas compris par les très anciens navigateurs ; là, la règle ne s'applique
   pas et on retrouve exactement l'affichage d'aujourd'hui — jamais pire. */
@media(max-width:850px){
  .site-header:not(:has(.menu-toggle)){height:auto;flex-wrap:wrap;padding-top:9px;
    padding-bottom:3px;row-gap:0}
  .site-header:not(:has(.menu-toggle)) .site-nav{display:flex;position:static;padding:0 0 4px;
    background:none;box-shadow:none;flex-direction:row;flex-wrap:nowrap;align-items:center;
    justify-content:flex-start;gap:0;margin:0;width:100%;overflow-x:auto;
    scrollbar-width:none}
  .site-header:not(:has(.menu-toggle)) .site-nav::-webkit-scrollbar{display:none}
  .site-header:not(:has(.menu-toggle)) .site-nav .nav-link{padding:7px 12px 7px 0;
    font-size:13px;white-space:nowrap}
}