/* ============================================================ Beaux Ongles, Rabat Hay Riad Feuille unique partagee par les 5 pages. Palette, typo et iconographie : kit client (4 hex, rien d'autre). Le kit est mene par le NOIR (logo noir, blouse noire, bandeau noir du kit) pose sur du blanc epure ; le rose poudre reste un murmure : filets, survols, petale de fond, prix. Jamais un aplat de bouton au repos. Verrou de forme : angles carres. Les supports du kit (cartes, sac, bloc logo) sont carres, et c'est ce qui eloigne le site des arches d'Express Nails. REGLE DURE : aucune regle de ce fichier ne part de opacity:0. Une animation deplace ce qui est deja visible, elle ne revele jamais. ============================================================ */ :root{ /* les 4 hex du kit, exacts */ --noir:#000000; --rose:#D9A7B0; --beige:#F4E2E6; --blanc:#FBF7F8; /* derives, uniquement des alpha des 4 ci-dessus */ --encre:#000000; --encre-doux:rgba(0,0,0,.62); --encre-faible:rgba(0,0,0,.56); /* libelles et surlignes : sous .56 le contraste passe en dessous de 4,5:1 */ --rule:rgba(0,0,0,.13); --rule-rose:rgba(217,167,176,.55); --creme-doux:rgba(251,247,248,.72); --creme-faible:rgba(251,247,248,.42); /* filets et bordures seulement */ --creme-label:rgba(251,247,248,.72); /* petits libelles sur fond noir, lisibles */ --display:"Playfair Display","Noto Serif Display",Georgia,serif; --sans:"Montserrat","Helvetica Neue",Arial,sans-serif; --script:"Parisienne",cursive; --maxw:1240px; --gutter:clamp(20px,5vw,64px); --nav-h:76px; --r:3px; --t-fast:.26s cubic-bezier(.22,.61,.36,1); --t:.55s cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--blanc);color:var(--encre); font-family:var(--sans);font-size:16px;line-height:1.75;font-weight:400; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;background:transparent;border:0;color:inherit} .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)} .section{padding:clamp(62px,7.5vw,112px) 0;position:relative;overflow:hidden} .section--beige{background:var(--beige)} .section--noir{background:var(--noir);color:var(--blanc)} .center{text-align:center} .center .lead,.center .eyebrow{margin-inline:auto} /* ---------- typographie ---------- */ h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.12; letter-spacing:.002em;margin:0} .h1{font-size:clamp(2.3rem,5.4vw,3.7rem)} .h2{font-size:clamp(1.8rem,3.4vw,2.7rem)} .h3{font-size:clamp(1.08rem,1.7vw,1.3rem)} p{margin:0 0 1.05em} p:last-child{margin-bottom:0} .lead{font-size:clamp(.98rem,1.2vw,1.06rem);color:var(--encre-doux);max-width:58ch} h1 + .lead,h1 + p,h2 + .lead,h2 + p,h3 + p{margin-top:18px} /* .ctaband est un fond noir : sans cette ligne, .lead garde son encre noire et le paragraphe devient invisible sur la bande. */ .section--noir .lead,.ctaband .lead,.ctaband p{color:var(--creme-doux)} .eyebrow{ display:flex;align-items:center;gap:13px; font-size:.66rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase; color:var(--encre-faible);margin:0 0 16px; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--rose);flex:none} .center .eyebrow{justify-content:center} .center .eyebrow::after{content:"";width:26px;height:1px;background:var(--rose);flex:none} .section--noir .eyebrow,.ctaband .eyebrow{color:var(--creme-label)} .script{font-family:var(--script);font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.3;color:var(--rose);font-weight:400} /* petale du kit, ornement de fond, un seul par section */ .petale{position:absolute;pointer-events:none;color:var(--rose);opacity:.16;z-index:0} .section--beige .petale{opacity:.5;color:#FBF7F8} .section--noir .petale{opacity:.1} .petale svg{width:100%;height:auto;display:block} .petale--droite{right:-8%;top:-6%;width:min(460px,42vw)} .petale--gauche{left:-10%;bottom:-10%;width:min(400px,38vw)} .section > .wrap{position:relative;z-index:1} /* ---------- boutons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:15px 28px;border-radius:var(--r);cursor:pointer; font-family:var(--sans);font-size:.72rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase;line-height:1; border:1px solid transparent;transition:background var(--t-fast),color var(--t-fast), border-color var(--t-fast),transform var(--t-fast); } .btn:hover{transform:translateY(-2px)} .btn--primary{background:var(--noir);color:var(--blanc)} .btn--primary:hover{background:var(--rose);color:var(--noir)} .btn--outline{background:transparent;color:var(--noir);border-color:rgba(0,0,0,.28)} .btn--outline:hover{border-color:var(--noir);background:var(--noir);color:var(--blanc)} .btn--light{background:var(--blanc);color:var(--noir)} .btn--light:hover{background:var(--rose);color:var(--noir)} .btn--ghost-light{background:transparent;color:var(--blanc);border-color:var(--creme-faible)} .btn--ghost-light:hover{background:var(--blanc);color:var(--noir);border-color:var(--blanc)} .linkarrow{ display:inline-flex;align-items:center;gap:9px; font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; padding-bottom:5px;border-bottom:1px solid var(--rule-rose); transition:border-color var(--t-fast),gap var(--t-fast); } .linkarrow svg{width:17px;height:17px;flex:none} .linkarrow:hover{border-color:var(--noir);gap:14px} .section--noir .linkarrow:hover{border-color:var(--blanc)} /* ============================================================ NAVIGATION ============================================================ */ .nav{position:fixed;inset:0 0 auto;z-index:120; transition:background var(--t-fast),box-shadow var(--t-fast)} .nav__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:20px;height:var(--nav-h)} .nav__brand{justify-self:start;display:flex;align-items:center} .nav__brand img{height:34px;width:auto;transition:opacity var(--t-fast)} .nav__logo--creme{display:block} .nav__logo--noir{display:none} .nav__links{justify-self:center;display:flex;align-items:center;gap:clamp(18px,2.4vw,34px); list-style:none;margin:0;padding:0} .nav__links a{ font-family:var(--display);font-size:.98rem;letter-spacing:.02em;color:var(--blanc); padding:6px 0;border-bottom:1px solid transparent;transition:border-color var(--t-fast),color var(--t-fast); } .nav__links a:hover,.nav__links a.active{border-color:var(--rose)} .nav__end{justify-self:end;display:flex;align-items:center;gap:12px} .nav__cta{padding:12px 22px;font-size:.66rem} .nav__cta--menu{display:none} .nav__burger{display:none;width:44px;height:44px;position:relative;cursor:pointer} .nav__burger span,.nav__burger::before,.nav__burger::after{ content:"";position:absolute;left:11px;width:22px;height:1.5px;background:var(--blanc); transition:transform var(--t-fast),background var(--t-fast)} .nav__burger span{top:21px} .nav__burger::before{top:14px} .nav__burger::after{top:28px} /* barre pleine : au scroll, et sur toute page sans hero photo */ .nav.scrolled{background:var(--blanc);box-shadow:0 1px 0 var(--rule)} .nav.scrolled .nav__logo--creme{display:none} .nav.scrolled .nav__logo--noir{display:block} .nav.scrolled .nav__links a{color:var(--noir)} .nav.scrolled .nav__cta--bar{background:var(--noir);color:var(--blanc);border-color:var(--noir)} .nav.scrolled .nav__cta--bar:hover{background:var(--rose);color:var(--noir)} .nav.scrolled .nav__burger span, .nav.scrolled .nav__burger::before, .nav.scrolled .nav__burger::after{background:var(--noir)} .nav__cta--bar{background:transparent;color:var(--blanc);border-color:var(--creme-faible)} .nav__cta--bar:hover{background:var(--blanc);color:var(--noir);border-color:var(--blanc)} /* ============================================================ HERO ET ENTETES DE PAGE Une photo par page, le titre POSE DESSUS. Passe ce hero, plus aucune bande photo dans la page. ============================================================ */ .hero{position:relative;display:flex;align-items:flex-end; min-height:92vh;min-height:92svh;overflow:hidden;background:var(--noir)} .hero--page{min-height:56vh;min-height:56svh} .hero__bg{position:absolute;inset:0;z-index:0;will-change:transform} .hero__bg img{width:100%;height:100%;object-fit:cover; animation:kenburns 24s ease-out forwards} @keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1)}} .hero--page .hero__bg img{animation:none} .hero__veil{position:absolute;inset:0;z-index:1; background:linear-gradient(100deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.5) 38%,rgba(0,0,0,.12) 72%,rgba(0,0,0,.28) 100%)} .hero__in{position:relative;z-index:2;width:100%; padding:calc(var(--nav-h) + 60px) 0 clamp(52px,7vw,92px);max-width:760px} .hero--page .hero__in{padding:calc(var(--nav-h) + 48px) 0 clamp(38px,5vw,62px)} .hero h1,.hero .h1{color:var(--blanc)} .hero__in .eyebrow{color:var(--creme-doux)} .hero__in .eyebrow::before{background:var(--rose)} .hero__sub{margin:20px 0 0;max-width:46ch;color:var(--creme-doux); font-size:clamp(1rem,1.25vw,1.1rem)} .hero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px} /* ============================================================ BANDEAU DE FAITS ============================================================ */ .faits{background:var(--noir);color:var(--blanc)} .faits__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0} .faits__item{display:flex;align-items:flex-start;gap:15px; padding:34px clamp(16px,2.4vw,34px)} .faits__item + .faits__item{border-left:1px solid rgba(251,247,248,.14)} .faits__ico{display:inline-flex;flex:none;width:24px;height:24px;color:var(--rose);margin-top:2px} .faits__ico svg{width:24px;height:24px} .faits__k{display:block;font-size:.62rem;font-weight:600;letter-spacing:.24em; text-transform:uppercase;color:var(--creme-label);margin-bottom:5px} .faits__v{display:block;font-family:var(--display);font-size:1.02rem;line-height:1.45} .faits__v a:hover{color:var(--rose)} /* ============================================================ DUO texte + photo encadree ============================================================ */ .duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(34px,5vw,74px);align-items:center} /* duo purement editorial (titre a gauche, texte a droite) : les deux colonnes partent de la meme ligne, sinon le titre flotte au milieu du vide */ .duo--haut{align-items:start;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)} .duo--inverse .duo__txt{order:2} .duo__media{position:relative} .duo__media img{width:100%;aspect-ratio:4/5;object-fit:cover} .cadre{position:relative;padding:14px} .cadre::before{content:"";position:absolute;inset:0;border:1px solid var(--rule-rose);pointer-events:none} .cadre .reveal-img{position:relative;z-index:1} .puces{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px} .puces li{display:flex;align-items:flex-start;gap:12px;color:var(--encre-doux);font-size:.97rem} .puces svg{width:17px;height:17px;color:var(--rose);flex:none;margin-top:5px} .badge{position:absolute;right:-6px;bottom:26px;z-index:2; background:var(--noir);color:var(--blanc);padding:16px 22px;text-align:center} .badge small{display:block;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase; color:var(--creme-label);margin-bottom:5px} .badge b{font-family:var(--display);font-weight:500;font-size:1.05rem} /* ============================================================ CARTES DE PRESTATIONS (icones du kit) ============================================================ */ .uni{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule); border:1px solid var(--rule)} .uni__card{background:var(--blanc);padding:clamp(28px,3vw,40px); display:flex;flex-direction:column;align-items:flex-start; transition:background var(--t-fast)} .section--beige .uni{background:rgba(0,0,0,.09);border-color:rgba(0,0,0,.09)} .section--beige .uni__card{background:var(--beige)} .uni__card:hover{background:var(--blanc)} .section--beige .uni__card:hover{background:var(--blanc)} .uni__ico{display:inline-flex;align-items:center;justify-content:center; width:62px;height:62px;border-radius:50%;border:1px solid var(--rule-rose); color:var(--rose);margin-bottom:22px;transition:background var(--t-fast),color var(--t-fast)} .uni__ico svg{width:30px;height:30px} .uni__card:hover .uni__ico{background:var(--rose);color:var(--noir)} .uni__card h3{margin-bottom:9px} .uni__card p{color:var(--encre-doux);font-size:.93rem;margin-bottom:18px} .uni__card .linkarrow{margin-top:auto} /* ============================================================ CARTE DE TARIFS ============================================================ */ .menu{display:grid;gap:30px} .menugroup h3{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--rule)} .menuline{display:flex;align-items:baseline;gap:10px;padding:9px 0} .menuline + .menuline{border-top:1px solid rgba(0,0,0,.07)} .menuline__n{font-size:.96rem} .menuline__d{flex:1;border-bottom:1px dotted rgba(0,0,0,.24);transform:translateY(-4px)} .menuline__p{font-family:var(--display);font-size:1.12rem;white-space:nowrap} .menuline__p small{font-size:.72rem;letter-spacing:.08em;color:var(--encre-faible);margin-left:2px} .menuline__p em{font-style:normal;font-family:var(--sans);font-size:.62rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--encre-faible);margin-right:7px} .tarifnote{text-align:center;font-size:.86rem;color:var(--encre-faible); max-width:56ch;margin:0 auto} .teaser{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,72px);align-items:center} /* bloc d'une famille sur la page prestations */ .fam{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(30px,4.5vw,64px);align-items:start} /* la colonne de texte garde la MEME largeur quand la photo passe a droite, sinon la carte de tarifs se retrouve a l'etroit une ligne sur deux */ .fam--inverse{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)} .fam--inverse .fam__media{order:2} /* le numero de famille est en encre grise, pas en rose : le rose du kit sur du blanc epure tombe a 1,96 de contraste et le chiffre devient illisible. */ .fam__num{display:flex;align-items:center;gap:12px; font-family:var(--display);font-size:.92rem;letter-spacing:.14em; color:var(--encre-faible);margin-bottom:12px} .fam__num::after{content:"";width:34px;height:1px;background:var(--rose)} .fam__media img{width:100%;aspect-ratio:4/5;object-fit:cover} .fam + .fam{margin-top:clamp(52px,6vw,88px);padding-top:clamp(52px,6vw,88px); border-top:1px solid var(--rule)} /* ============================================================ AVIS ============================================================ */ .avis{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)} .avis__card{margin:0;background:var(--blanc);border:1px solid var(--rule); padding:clamp(26px,2.6vw,34px);display:flex;flex-direction:column; transition:border-color var(--t-fast),transform var(--t-fast)} .avis__card:hover{border-color:var(--rose);transform:translateY(-3px)} .section--beige .avis__card{background:var(--beige)} .avis__q{font-family:var(--display);font-size:2.6rem;line-height:.6;color:var(--rose); display:block;margin-bottom:16px} .avis__t{font-size:.94rem;color:var(--encre-doux);margin-bottom:18px} .avis__n{font-style:normal;font-family:var(--display);font-size:1rem;margin-top:auto} /* ============================================================ GALERIE ============================================================ */ .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)} .gal__item{position:relative;overflow:hidden;display:block;background:var(--beige)} .gal__item img{width:100%;aspect-ratio:4/5;object-fit:cover; transition:transform .8s cubic-bezier(.22,.61,.36,1)} .gal__item:hover img{transform:scale(1.05)} .gal--vedette .gal__item:first-child{grid-column:span 2;grid-row:span 2} .gal--vedette .gal__item:first-child img{aspect-ratio:auto;height:100%} /* ============================================================ BANDE CTA ET PIED DE PAGE ============================================================ */ .ctaband{background:var(--noir);color:var(--blanc)} .ctaband .h2{color:var(--blanc)} .ctaband__row{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:30px} .footer{background:var(--noir);color:var(--blanc);padding:clamp(52px,6vw,78px) 0 26px} .footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(28px,4vw,56px)} .footer__brand img{height:58px;width:auto} .footer__tag{margin-top:16px;font-family:var(--script);font-size:1.5rem;color:var(--rose)} .footer h3{font-size:.66rem;font-family:var(--sans);font-weight:600;letter-spacing:.24em; text-transform:uppercase;color:var(--creme-label);margin-bottom:16px} .footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .footer li{font-size:.92rem;color:var(--creme-doux)} .footer a:hover{color:var(--rose)} .footer__bar{margin-top:clamp(36px,4vw,56px);padding-top:22px; border-top:1px solid rgba(251,247,248,.14); display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center; font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--creme-label)} .footer__credit{text-transform:uppercase;text-decoration:none} .footer__credit:hover{color:var(--rose)} /* ---------- contact ---------- */ .contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,70px);align-items:start} .contact__list{list-style:none;margin:0;padding:0;display:grid;gap:26px} .contact__list li{display:grid;gap:5px} .contact__k{font-size:.64rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase; color:var(--encre-faible)} .contact__v{font-family:var(--display);font-size:1.12rem;line-height:1.5} .contact__v a:hover{color:var(--rose)} .horaires{list-style:none;margin:0;padding:0} .horaires li{display:flex;justify-content:space-between;gap:16px;padding:9px 0; font-size:.95rem;border-bottom:1px solid rgba(0,0,0,.07)} .horaires li:last-child{border-bottom:0} .horaires span:last-child{color:var(--encre-doux)} .carte{border:1px solid var(--rule)} .carte iframe{display:block;width:100%;border:0} /* ============================================================ MOUVEMENT Aucun opacity:0. On ne deplace que ce qui est deja visible. ============================================================ */ .reveal-img{overflow:hidden} .reveal-img img{transform:scale(1.06);transition:transform 1.5s cubic-bezier(.22,.61,.36,1)} .reveal-img.in img{transform:none} @media (prefers-reduced-motion:reduce){ .reveal-img img,.hero__bg img{transform:none;animation:none;transition:none} html{scroll-behavior:auto} } /* ============================================================ MODALE DE RENDEZ-VOUS (.rsv) Architecture de scroll : .claude/rules/booking-modal.md, copiee a la lettre. ============================================================ */ .rsv{position:fixed;inset:0;z-index:140;display:none;align-items:flex-start;justify-content:center; padding:24px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .rsv.show{display:flex} .rsv__backdrop{position:fixed;inset:0;background:rgba(0,0,0,.66)} .rsv__card{position:relative;display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-rows:minmax(0,1fr); width:min(940px,calc(100vw - 40px));margin:auto; max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px); overflow:hidden;background:var(--blanc); transform:translateY(14px);transition:transform var(--t)} .rsv.open .rsv__card{transform:none} .rsv__close{position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px; display:inline-flex;align-items:center;justify-content:center; background:var(--blanc);color:var(--noir);cursor:pointer;border:1px solid var(--rule)} .rsv__close svg{width:19px;height:19px} .rsv__close:hover{background:var(--noir);color:var(--blanc)} .rsv__aside{position:relative;min-height:0;overflow-y:auto;background:var(--noir);color:var(--blanc)} .rsv__aside-img{position:absolute;inset:0} .rsv__aside-img img{width:100%;height:100%;object-fit:cover;opacity:.34} .rsv__aside-in{position:relative;padding:clamp(26px,3vw,36px)} .rsv__aside-in h3{font-size:1.5rem;margin-bottom:12px} .rsv__aside-in p{font-size:.88rem;color:var(--creme-doux)} .rsv__recap{margin-top:24px;border-top:1px solid rgba(251,247,248,.2);padding-top:18px} .rsv__recap-k{display:block;font-size:.6rem;font-weight:600;letter-spacing:.24em; text-transform:uppercase;color:var(--creme-label);margin-bottom:12px} .rsv__recap-v{display:grid;gap:7px;font-size:.9rem} .rsv__recap-v span{color:var(--creme-doux)} .rsv__total{display:flex;justify-content:space-between;gap:12px;margin-top:16px; padding-top:14px;border-top:1px solid rgba(251,247,248,.2); font-family:var(--display);font-size:1.05rem} .rsv__body{display:flex;flex-direction:column;overflow-y:auto;min-height:0; -webkit-overflow-scrolling:touch;padding:clamp(26px,3vw,36px)} .rsv__body > *{flex-shrink:0} .rsv__steps{display:flex;gap:7px;margin-bottom:22px} .rsv__steps i{width:36px;height:2px;background:var(--rule);transition:background var(--t-fast)} .rsv__steps i.on{background:var(--rose)} .rsv__label{display:block;font-size:.62rem;font-weight:600;letter-spacing:.24em; text-transform:uppercase;color:var(--encre-faible);margin-bottom:12px} .rsv__packs{max-height:270px;overflow-y:auto;border:1px solid var(--rule); padding:6px;margin-bottom:22px} .rsv__grouplabel{font-family:var(--display);font-size:.95rem;padding:12px 10px 7px; color:var(--encre)} .rsv__grouplabel + .rsv__pack{border-top:0} .rsv__pack{display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px; padding:11px 10px;cursor:pointer;text-align:left;border-top:1px solid rgba(0,0,0,.07); transition:background var(--t-fast)} .rsv__pack:hover{background:var(--beige)} .rsv__pack[aria-pressed="true"]{background:var(--noir);color:var(--blanc)} .rsv__pack-n{font-size:.89rem} .rsv__pack-p{font-family:var(--display);font-size:.98rem;white-space:nowrap} .rsv__pack-p small{font-size:.68rem;color:inherit;opacity:.7} .rsv__compte{font-size:.76rem;color:var(--encre-faible);margin:-14px 0 20px} .rsv__field{margin-bottom:22px} .rsv__field input[type="date"]{-webkit-appearance:none;appearance:none; width:100%;min-height:48px;line-height:1.3;padding:0 14px;font-size:16px; font-family:var(--sans);color:var(--encre);border-radius:var(--r); background:var(--beige);border:1px solid var(--rule)} .rsv__field input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0} .rsv__field input[type="date"]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer} .rsv__chips{display:flex;flex-wrap:wrap;gap:9px} .rsv__chip{padding:11px 18px;border:1px solid var(--rule);border-radius:var(--r);cursor:pointer; font-size:.78rem;letter-spacing:.06em;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)} .rsv__chip:hover{border-color:var(--rose)} .rsv__chip[aria-pressed="true"]{background:var(--noir);color:var(--blanc);border-color:var(--noir)} .rsv__hint{font-size:.82rem;color:var(--encre-faible);margin:0 0 16px} .rsv__totalline{display:flex;justify-content:space-between;gap:12px;align-items:baseline; padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); margin-bottom:20px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase; color:var(--encre-faible)} .rsv__totalline b{font-family:var(--display);font-size:1.22rem;letter-spacing:0; text-transform:none;color:var(--encre)} .rsv__actions{display:flex;flex-wrap:wrap;gap:11px} .rsv__actions .btn{flex:1 1 200px;min-width:0} .rsv__note{font-size:.76rem;color:var(--encre-faible);margin:16px 0 0} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1020px){ .nav__links{ position:fixed;inset:0;z-index:1; /* justify-self:center du desktop fait retrecir un element fixed pose dans une grille : il se dimensionne sur son contenu au lieu de tenir le viewport, et le "plein ecran" ne couvre plus que 224px de large. Les deux stretch sont obligatoires. */ justify-self:stretch;align-self:stretch; flex-direction:column;justify-content:center;gap:26px; background:var(--noir); transform:translateX(100%);transition:transform var(--t); } .nav__links.nav-open{transform:none} .nav__links a{color:var(--blanc);font-size:1.6rem} .nav.scrolled .nav__links a{color:var(--blanc)} .nav__links a:hover,.nav__links a.active{border-color:var(--rose)} /* le menu est un aplat noir : sans couleur explicite, ce