/* ========================================================================== Blink Hair . Skin . Nails, Rabat Feuille unique. Kit client : noir #0D0D0D, beige nude #D9C9BB, ivoire #F5F1E9, dore #C9A96B, Playfair Display + Montserrat. Deux regles de survie tenues partout dans ce fichier : 1. rien ne part de opacity:0 sans le prefixe .js (pose en ligne dans le ). Si le script ne tourne pas, toute la page reste lisible. 2. sur un fond sombre, CHAQUE element de texte recoit sa couleur en clair (p, .lead, button, cite, small, a), jamais par heritage. ========================================================================== */ :root{ --noir:#0D0D0D; --encre:#181714; --gris:#6E665E; --beige:#D9C9BB; --ivoire:#F5F1E9; --creme:#FCFAF6; --or:#C9A96B; /* ornements, survols, et tout texte sur fond NOIR */ --or-encre:#86672E; /* le meme dore, assombri pour rester lisible sur creme et ivoire */ --filet:rgba(13,13,13,.13); --filet-clair:rgba(245,241,233,.20); /* La barre doit laisser respirer le logo : il fait 56px de haut, donc 92px lui laissent 18px d'air en haut et en bas. A 78px il touchait le bord. */ --nav-h:92px; --titre:"Playfair Display",Georgia,serif; --corps:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --t:.7s cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} /* [hidden] vient de la feuille du navigateur : n'importe quelle regle de classe la bat. .btn{display:inline-flex} suffisait a rendre le bouton WhatsApp de la modale visible alors qu'il portait hidden, donc cliquable vers un href="#". Cette ligne remet l'attribut au-dessus. */ [hidden]{display:none !important} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--creme);color:var(--encre); font-family:var(--corps);font-size:16px;font-weight:400;line-height:1.68; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit} button{font-family:inherit} /* 36px de gouttiere de chaque cote, pas 22 : sous 1224px de large, le logo et le bouton de rendez-vous arrivaient au ras du bord de la page. */ .wrap{width:min(1180px,calc(100% - 72px));margin-inline:auto} .centre{text-align:center} /* --- 1. TYPOGRAPHIE ------------------------------------------------------- Playfair en 400 partout : les titres ne sont jamais en gras, un H2 lourd rend tape-a-l'oeil. L'emphase passe par l'italique, jamais par la couleur. */ h1,h2,h3,h4{font-family:var(--titre);font-weight:400;margin:0;line-height:1.14; letter-spacing:-.01em} .h1{font-size:clamp(2.4rem,5.4vw,4.1rem)} .h2{font-size:clamp(1.85rem,3.5vw,2.85rem)} .h3{font-size:clamp(1.15rem,1.7vw,1.4rem)} .h2 em,.h1 em{font-style:italic} p{margin:0} .lead{color:var(--gris);font-size:clamp(.98rem,1.15vw,1.06rem);line-height:1.78} .lead + .lead{margin-top:15px} /* Le filet court sous la surligne vient du kit (le trait sous « More than beauty »). left/margin-left plutot que translateX : la propriete transform reste libre pour l'animation de tirage. */ .sur-titre{ display:block;position:relative;font-family:var(--corps);font-size:.68rem;font-weight:500; letter-spacing:.24em;text-transform:uppercase;color:var(--gris); padding-bottom:14px;margin-bottom:16px; } .sur-titre::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:1px; background:var(--or-encre)} .tete-section--centre .sur-titre::after{left:50%;margin-left:-17px} .section--noir .sur-titre::after{background:var(--or)} /* l'etoile a 4 branches du logo : l'unique ornement du site */ .etoile{display:block;width:18px;height:18px;color:var(--or);margin:0 auto 18px} .etoile svg{display:block;width:18px;height:18px} .etoile--gauche{margin-inline:0} /* --- 2. BOUTONS ----------------------------------------------------------- Le dore est un filet, pas un theme : les boutons sont monochromes au repos et ne passent a l'or qu'au survol. */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:15px 30px;border:1px solid transparent;border-radius:2px; font-family:var(--corps);font-size:.76rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer; transition:background .3s,color .3s,border-color .3s; } .btn--noir{background:var(--noir);color:var(--ivoire);border-color:var(--noir)} .btn--noir:hover{background:var(--or);border-color:var(--or);color:var(--noir)} .btn--ligne{background:transparent;color:var(--noir);border-color:var(--noir)} .btn--ligne:hover{background:var(--noir);color:var(--ivoire)} .btn--clair{background:var(--ivoire);color:var(--noir);border-color:var(--ivoire)} .btn--clair:hover{background:var(--or);border-color:var(--or);color:var(--noir)} .btn--ligne-claire{background:transparent;color:var(--ivoire);border-color:rgba(245,241,233,.55)} .btn--ligne-claire:hover{background:var(--ivoire);color:var(--noir);border-color:var(--ivoire)} .lien-fleche{ display:inline-flex;align-items:center;gap:9px;margin-top:22px; font-size:.74rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase; text-decoration:none;color:var(--noir); border-bottom:1px solid var(--filet);padding-bottom:5px;transition:border-color .3s,color .3s; } .lien-fleche svg{display:block;width:17px;height:17px;transition:transform .3s} .lien-fleche:hover{color:var(--or-encre);border-color:var(--or-encre)} .lien-fleche:hover svg{transform:translateX(5px)} /* --- 3. NAVIGATION -------------------------------------------------------- Logo a gauche, liens centres, CTA a droite. Liens en Playfair (la police de titre du kit), jamais la sans du corps. Pas de backdrop-filter : c'est lui qui transforme le header en bloc conteneur et fait s'effondrer le menu plein ecran sur la bande du haut. */ .nav{ position:fixed;top:0;left:0;right:0;z-index:120;height:var(--nav-h); display:flex;align-items:center; transition:height .38s cubic-bezier(.22,.61,.36,1),background .35s,box-shadow .35s; } /* La barre se retracte au defilement. --nav-h n'est redefini QUE sur .nav : le hero lit la valeur de :root et garde donc son calage d'origine. */ .nav.scrolled{--nav-h:72px} /* PAS de width:100% ici : .wrap et .nav__in sont sur le meme element et, a specificite egale, c'est la regle la plus basse qui gagne. Le width:100% ecrasait donc la largeur de .wrap et collait le logo et le bouton aux deux bords de la page. La largeur vient de .wrap, et de lui seul. */ .nav__in{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px; } .nav__marque{display:flex;align-items:center;text-decoration:none;position:relative;z-index:130} .nav__marque img{width:100px;height:auto;transition:width .38s cubic-bezier(.22,.61,.36,1)} .nav.scrolled .nav__marque img{width:88px} .nav__logo--noir{display:none} .nav.scrolled .nav__logo--noir{display:block} .nav.scrolled .nav__logo--creme{display:none} .nav__liens{ display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.2vw,34px); list-style:none;margin:0;padding:0; } .nav__liens a{ font-family:var(--titre);font-size:1rem;text-decoration:none;color:var(--ivoire); letter-spacing:.015em;padding:6px 0;position:relative;transition:color .3s; } .nav__liens a::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s; } .nav__liens a:hover::after,.nav__liens a.actif::after{transform:scaleX(1)} .nav__fin{display:flex;align-items:center;justify-content:flex-end;gap:14px;position:relative;z-index:130} .nav__cta{padding:12px 22px;font-size:.68rem} /* Le CTA du menu mobile est un doublon de celui de la barre : il doit etre masque sur grand ecran avec une specificite qui BAT .btn{display:inline-flex}, sinon deux "Prendre rendez-vous" s'affichent cote a cote dans le header. */ .nav__liens .nav__cta--menu{display:none} .nav.scrolled{background:var(--ivoire);box-shadow:0 1px 0 var(--filet)} .nav.scrolled .nav__liens a{color:var(--encre)} .nav.scrolled .nav__cta--barre{background:var(--noir);color:var(--ivoire);border-color:var(--noir)} .nav.scrolled .nav__cta--barre:hover{background:var(--or);border-color:var(--or);color:var(--noir)} .nav.scrolled .nav__burger span,.nav.scrolled .nav__burger span::before, .nav.scrolled .nav__burger span::after{background:var(--encre)} /* le burger. Il reste AU-DESSUS du menu ouvert (z-index sur .nav__fin) et se change en croix, sinon le menu n'a aucun moyen visible de se refermer. */ .nav__burger{ display:none;width:42px;height:42px;padding:0;border:0;background:transparent; cursor:pointer;position:relative; } .nav__burger span{ position:absolute;left:11px;top:50%;width:20px;height:1.5px;background:var(--ivoire); transition:background .3s,transform .3s,opacity .3s; } .nav__burger span::before,.nav__burger span::after{ content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--ivoire); transition:transform .3s,background .3s; } .nav__burger span::before{top:-6px} .nav__burger span::after{top:6px} .nav.menu-open .nav__burger span{background:transparent} .nav.menu-open .nav__burger span::before{transform:translateY(6px) rotate(45deg);background:var(--encre)} .nav.menu-open .nav__burger span::after{transform:translateY(-6px) rotate(-45deg);background:var(--encre)} /* --- 4. HERO ET ENTETES DE PAGE ------------------------------------------ Une seule photo par page, en haut, DERRIERE le titre. Passe ce bandeau, plus aucune bande photo : les sections s'ouvrent sur un titre seul. */ .hero,.entete{position:relative;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate} .hero{min-height:82vh;min-height:82svh;padding:calc(var(--nav-h) + 60px) 0 clamp(56px,7vw,92px)} .entete{min-height:56vh;min-height:56svh;padding:calc(var(--nav-h) + 48px) 0 clamp(40px,5vw,64px)} .hero__fond,.entete__fond{position:absolute;inset:0;z-index:-2} .hero__fond img,.entete__fond img{width:100%;height:100%;object-fit:cover} /* Ken Burns : uniquement une transform, jamais d'opacite. Le hero ne depend d'aucun script pour s'afficher. */ .hero__fond img{animation:kenburns 26s ease-in-out infinite alternate} @keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.11)}} .hero__voile,.entete__voile{ position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg,rgba(13,13,13,.80) 0%,rgba(13,13,13,.58) 38%,rgba(13,13,13,.18) 72%,rgba(13,13,13,.10) 100%); } /* Le voile principal descend vers la DROITE (le titre est cale a gauche), donc le coin haut droit reste clair : le CTA creme de la nav y devenait illisible sur les heros lumineux. Ce second degrade ne couvre que la bande de la nav. */ .hero__voile::before,.entete__voile::before{ content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--nav-h) + 46px); background:linear-gradient(to bottom,rgba(13,13,13,.52),rgba(13,13,13,0)); } .hero__in,.entete__in{max-width:660px} .hero__in .h1,.entete__in h1{color:var(--ivoire)} .hero__sous,.entete__sous{ margin-top:20px;color:rgba(245,241,233,.88); font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.72;max-width:52ch; } .entete__sur{color:rgba(245,241,233,.72)} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} /* --- 5. SECTIONS ----------------------------------------------------------- */ .section{padding:clamp(66px,8vw,116px) 0} .section--ivoire{background:var(--ivoire)} .section--noir{background:var(--noir)} /* fond sombre : on nomme TOUT ce qui peut y atterrir, l'heritage ne suffit pas */ .section--noir h1,.section--noir h2,.section--noir h3,.section--noir h4, .section--noir p,.section--noir .lead,.section--noir li,.section--noir cite, .section--noir small,.section--noir span,.section--noir a,.section--noir button{color:var(--ivoire)} .section--noir .lead{color:rgba(245,241,233,.80)} .section--noir .sur-titre{color:rgba(245,241,233,.62)} .section--noir .lien-fleche{color:var(--ivoire);border-color:var(--filet-clair)} .section--noir .lien-fleche:hover{color:var(--or-encre);border-color:var(--or-encre)} .tete-section{max-width:640px} .tete-section .lead{margin-top:16px} .tete-section--centre{margin-inline:auto;text-align:center} /* --- 6. BANDE DE FAITS ----------------------------------------------------- */ .faits{background:var(--noir);padding:34px 0} .faits__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .faits__item{display:flex;align-items:flex-start;gap:14px} /* l'enveloppe d'icone doit etre en display:block avec des px explicites sur ELLE et sur le svg : en inline, sa largeur est ignoree et le svg explose. */ .faits__ico{display:block;width:22px;height:22px;flex:0 0 22px;color:var(--or);margin-top:3px} .faits__ico svg{display:block;width:22px;height:22px} .faits__k{display:block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase; color:rgba(245,241,233,.55);margin-bottom:5px} .faits__v{display:block;color:var(--ivoire);font-size:.92rem;line-height:1.5} .faits__v a{color:var(--ivoire);text-decoration:none;border-bottom:1px solid var(--filet-clair)} .faits__v a:hover{color:var(--or);border-color:var(--or)} /* --- 7. DUO EDITORIAL ------------------------------------------------------ */ .duo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(34px,5vw,80px);align-items:start} .duo__texte .lead{margin-top:18px} .puces{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px} .puces li{display:flex;align-items:flex-start;gap:12px;font-size:.95rem;color:var(--gris)} .puces svg{display:block;width:15px;height:15px;flex:0 0 15px;margin-top:5px;color:var(--or)} /* --- 7b. LE CENTRE (texte + cadre photo) ---------------------------------- Le bloc editorial de l'accueil : le texte a gauche, une photo verticale a droite, l'etoile du logo qui deborde d'un angle et la plaque des horaires ancree en bas. La photo est DANS le contenu, ce n'est pas une bande. */ .editorial{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(34px,5vw,76px);align-items:center} .editorial__texte .lead{margin-top:18px} .editorial__media{position:relative;padding:0 0 26px 26px} .cadre{display:block;position:relative;overflow:hidden;background:var(--beige); aspect-ratio:3/4;box-shadow:0 18px 50px rgba(13,13,13,.10)} .cadre img{width:100%;height:100%;object-fit:cover} /* l'etoile a 4 branches du kit, posee en haut a gauche, a cheval sur le cadre */ .editorial__etoile{position:absolute;top:-16px;left:-2px;z-index:2; display:block;width:52px;height:52px;color:var(--or)} .editorial__etoile svg{display:block;width:52px;height:52px} .editorial__plaque{position:absolute;left:0;bottom:0;z-index:2; display:flex;flex-direction:column;gap:3px;background:var(--noir); padding:16px 22px;text-align:left} .editorial__plaque b{font-family:var(--titre);font-weight:400;font-size:1.3rem;color:var(--ivoire);line-height:1} .editorial__plaque span{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase; color:rgba(245,241,233,.62)} /* --- 8. UNIVERS (cartes de prestations) ------------------------------------ Chaque carte porte sa photo : c'est ce qui separe une vraie carte de prestation d'une tuile a icone. L'icone reste, dans le trait du kit, sous la photo. La carte entiere est le lien. */ .univers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,26px);margin-top:clamp(38px,4.5vw,60px)} .univers__carte{display:flex;flex-direction:column;text-decoration:none; background:var(--creme);border:1px solid var(--filet); transition:border-color .35s,box-shadow .45s,transform .45s} .univers__carte:hover{border-color:rgba(13,13,13,.22); box-shadow:0 16px 40px rgba(13,13,13,.09);transform:translateY(-3px)} .univers__media{display:block;overflow:hidden;background:var(--beige);aspect-ratio:4/5} .univers__media img{width:100%;height:100%;object-fit:cover; transition:transform 1.1s cubic-bezier(.22,.61,.36,1)} .univers__carte:hover .univers__media img{transform:scale(1.05)} .univers__corps{display:flex;flex-direction:column;flex:1; padding:clamp(24px,2.6vw,32px)} .univers__ico{display:block;width:34px;height:34px;color:var(--or);margin-bottom:18px} .univers__ico svg{display:block;width:34px;height:34px} /* Chaque icone porte un viewBox serre sur son dessin pour remplir les 34px. Sans ceci le trait grossirait d'autant : non-scaling-stroke le garde au trait fin du kit quel que soit le facteur de zoom du viewBox. */ .univers__ico svg *{vector-effect:non-scaling-stroke} /* le filet dore se tire sous le titre au survol */ .univers__carte .h3{position:relative;display:inline-block;padding-bottom:7px} .univers__carte .h3::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:var(--or-encre);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,.61,.36,1)} .univers__carte:hover .h3::after{transform:scaleX(1)} .univers__carte p{margin-top:10px;color:var(--gris);font-size:.93rem;flex:1} .univers__voir{ display:inline-flex;align-items:center;gap:9px;margin-top:22px;align-self:flex-start; font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase; color:var(--noir);transition:color .3s; } .univers__voir svg{display:block;width:17px;height:17px;transition:transform .35s} .univers__carte:hover .univers__voir{color:var(--or-encre)} .univers__carte:hover .univers__voir svg{transform:translateX(5px)} /* --- 9. CARTE DES PRIX ----------------------------------------------------- */ .groupe-prix + .groupe-prix{margin-top:clamp(46px,5vw,72px)} .groupe-prix__tete{display:flex;align-items:baseline;gap:18px;padding-bottom:16px; border-bottom:1px solid var(--filet);margin-bottom:26px} .groupe-prix__num{font-family:var(--titre);font-size:.9rem;color:var(--or-encre);letter-spacing:.04em} .groupe-prix__note{margin-left:auto;font-size:.74rem;letter-spacing:.12em; text-transform:uppercase;color:var(--gris)} .lignes-prix{display:grid;gap:2px} .ligne-prix{display:flex;align-items:baseline;gap:12px;padding:11px 0; border-bottom:1px solid rgba(13,13,13,.07)} .ligne-prix__n{font-size:.95rem} .ligne-prix__p{margin-left:auto;font-size:.95rem;font-weight:500;color:var(--or-encre);white-space:nowrap} .ligne-prix__p em{font-style:normal;font-size:.74rem;color:var(--gris); letter-spacing:.08em;text-transform:uppercase;margin-right:7px} .ligne-prix__p small{font-size:.72rem;letter-spacing:.06em;margin-left:3px} /* display:block est obligatoire ici : un conteneur de grille IGNORE columns, et .lignes-prix est une grille. Sans cette ligne la carte tombe sur une seule colonne et la page de tarifs double de hauteur. */ .deux-colonnes{display:block;columns:2;column-gap:clamp(30px,4vw,64px)} .deux-colonnes .ligne-prix{break-inside:avoid} /* variante avec le descriptif du salon sous la ligne (les massages) : le nom et le prix restent sur la premiere rangee, la phrase passe dessous. */ .ligne-prix--desc{flex-wrap:wrap;padding:16px 0} .ligne-prix__d{flex:1 0 100%;margin-top:7px;font-size:.87rem;color:var(--gris);line-height:1.65} .ligne-prix__duree{font-size:.78rem;color:var(--gris);margin-left:9px} /* les 3 formules headspa */ .formules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px; margin-top:clamp(34px,4vw,52px)} .formule{border:1px solid var(--filet);padding:clamp(26px,3vw,36px);background:var(--creme); display:flex;flex-direction:column} .formule--phare{background:var(--noir);border-color:var(--noir)} .formule--phare h3,.formule--phare p,.formule--phare li{color:var(--ivoire)} .formule--phare .formule__prix{color:var(--or)} .formule--phare li{color:rgba(245,241,233,.80)} .formule__prix{font-family:var(--titre);font-size:1.7rem;color:var(--or-encre);margin:14px 0 18px} .formule__prix small{font-size:.8rem;letter-spacing:.1em;color:inherit;margin-left:5px} .formule ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;flex:1} .formule li{display:flex;gap:10px;font-size:.9rem;color:var(--gris);line-height:1.6} .formule li svg{display:block;width:13px;height:13px;flex:0 0 13px;margin-top:6px;color:var(--or)} /* --- 10. PRESTATIONS (familles nommees, sans photo ni prix) ---------------- Une page de prestations ne se fait pas en cartes grises identiques : un groupe par famille, la liste NOMMEE a droite, et c'est le nombre de noms affiches qui fait exister le salon. */ .famille{padding:clamp(40px,5vw,64px) 0;border-bottom:1px solid var(--filet); scroll-margin-top:calc(var(--nav-h) + 24px)} .famille:last-of-type{border-bottom:0} .famille__grille{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(28px,4vw,70px);align-items:start} .famille__tete{display:flex;align-items:baseline;gap:14px;margin-bottom:16px} .famille__num{font-family:var(--titre);font-size:.85rem;color:var(--or-encre)} .famille__liste{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(26px,3.5vw,54px)} .famille__liste li{break-inside:avoid;padding:9px 0;font-size:.93rem; border-bottom:1px solid rgba(13,13,13,.08)} .famille .btn{margin-top:26px} /* --- 11. AVIS -------------------------------------------------------------- */ .avis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,30px); margin-top:clamp(38px,4.5vw,58px)} .avis__carte{border:1px solid var(--filet-clair);padding:clamp(26px,3vw,34px); display:flex;flex-direction:column} .avis__texte{font-family:var(--titre);font-size:1.04rem;line-height:1.66;font-style:italic;flex:1} .avis__nom{display:block;margin-top:20px;font-family:var(--corps);font-size:.68rem; font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--or)} /* --- 12. GALERIE INSTAGRAM ------------------------------------------------- */ .ig__tete{display:flex;align-items:center;justify-content:space-between;gap:24px; flex-wrap:wrap;margin-bottom:clamp(28px,3.5vw,44px)} .ig__compte{ display:inline-flex;align-items:center;gap:10px;text-decoration:none; font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500; border:1px solid var(--filet);padding:11px 20px;border-radius:2px;transition:border-color .3s,color .3s; } .ig__compte svg{display:block;width:17px;height:17px} .ig__compte:hover{color:var(--or-encre);border-color:var(--or-encre)} .section--noir .ig__compte{border-color:var(--filet-clair)} .ig-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)} .ig-grille--bande{grid-template-columns:repeat(4,minmax(0,1fr))} .ig-post{position:relative;display:block;overflow:hidden;background:var(--beige);aspect-ratio:4/5} .ig-post img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)} .ig-post:hover img{transform:scale(1.06)} .ig-post__voir{ position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px; background:linear-gradient(to top,rgba(13,13,13,.72),rgba(13,13,13,0)); color:var(--ivoire);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase; opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s; } .ig-post:hover .ig-post__voir,.ig-post:focus-visible .ig-post__voir{opacity:1;transform:none} .ig-cta{display:flex;justify-content:center;margin-top:clamp(30px,3.5vw,46px)} /* --- 13. CONTACT ----------------------------------------------------------- */ .contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,4vw,64px);align-items:stretch} .coord{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:20px} .coord li{display:flex;align-items:flex-start;gap:14px} .coord__ico{display:block;width:20px;height:20px;flex:0 0 20px;color:var(--or);margin-top:3px} .coord__ico svg{display:block;width:20px;height:20px} .coord__k{display:block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase; color:var(--gris);margin-bottom:4px} .coord__v{display:block;font-size:.96rem;line-height:1.6} .coord__v a{text-decoration:none;border-bottom:1px solid var(--filet)} .coord__v a:hover{color:var(--or-encre);border-color:var(--or-encre)} .contact__actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px} .carte{position:relative;min-height:380px;border:1px solid var(--filet)} .carte iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* --- 14. BANDE D'APPEL ----------------------------------------------------- */ .bande-cta{background:var(--noir);padding:clamp(60px,7vw,96px) 0;text-align:center} .bande-cta h2,.bande-cta p{color:var(--ivoire)} .bande-cta p{margin-top:16px;color:rgba(245,241,233,.80);max-width:54ch;margin-inline:auto} .bande-cta__rang{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px} /* --- 15. PIED DE PAGE ------------------------------------------------------ */ .pied{background:var(--noir);padding:clamp(52px,6vw,78px) 0 0} .pied__grille{display:grid;grid-template-columns:1.3fr .8fr 1.2fr;gap:clamp(30px,4vw,60px)} .pied__marque img{width:150px;height:auto} .pied__ligne{margin-top:18px;color:rgba(245,241,233,.62);font-size:.9rem;max-width:34ch} .pied h3{font-family:var(--corps);font-size:.66rem;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--or);margin-bottom:18px} .pied ul{list-style:none;margin:0;padding:0;display:grid;gap:11px} .pied li,.pied p{color:rgba(245,241,233,.72);font-size:.9rem;line-height:1.6} .pied a{color:rgba(245,241,233,.72);text-decoration:none;transition:color .3s} .pied a:hover{color:var(--or)} .pied__barre{ margin-top:clamp(40px,5vw,60px);padding:22px 0;border-top:1px solid var(--filet-clair); display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center; } .pied__barre span{color:rgba(245,241,233,.48);font-size:.76rem} /* credit Propulse : capitales, jamais souligne, le texte du lien ne change pas */ .pied__credit{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase; text-decoration:none;color:rgba(245,241,233,.48)} .pied__credit:hover{color:var(--or)} /* --- 16. MODALE DE RENDEZ-VOUS -------------------------------------------- L'architecture de scroll vient de .claude/rules/booking-modal.md et se recopie telle quelle : quatre declarations qui tiennent ensemble. Les NOMS restent ceux du contrat (.rsv__card, .rsv__body, .rsv__aside) parce que le scanner de pre-deploy verifie ce bug sur ces selecteurs-la ; seuls les couleurs, rayons et polices sont reskinnes au kit. */ .rsv{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center; padding:24px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .rsv.visible{display:flex} .rsv__backdrop{position:fixed;inset:0;background:rgba(13,13,13,.62);opacity:0;transition:opacity .3s} .rsv.ouverte .rsv__backdrop{opacity:1} .rsv__card{ position:relative;display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-rows:minmax(0,1fr); width:min(960px,calc(100vw - 40px));margin:auto; max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px); overflow:hidden;background:var(--creme);border-radius:2px; opacity:0;transform:translateY(14px);transition:opacity .32s,transform .32s; } .rsv.ouverte .rsv__card{opacity:1;transform:none} /* min-height:0 sur les DEUX enfants de grille : c'est la ligne qui allume vraiment le defilement (un item de grille est plafonne a min-height:auto, soit la taille du contenu, et l'overflow interne reste alors inerte). */ .rsv__aside{position:relative;min-height:0;overflow-y:auto;background:var(--noir); display:flex;flex-direction:column;justify-content:flex-end} .rsv__aside-img{position:absolute;inset:0} .rsv__aside-img img{width:100%;height:100%;object-fit:cover;opacity:.42} .rsv__aside-in{position:relative;padding:clamp(26px,3vw,34px)} .rsv__aside-in h3{color:var(--ivoire);font-size:1.5rem} .rsv__aside-in p{color:rgba(245,241,233,.78);font-size:.88rem;margin-top:12px} .rsv__recap{margin-top:22px;padding-top:18px;border-top:1px solid var(--filet-clair)} .rsv__recap-k{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase; color:rgba(245,241,233,.55);margin-bottom:10px} .rsv__recap-v{display:grid;gap:5px} .rsv__recap-v span{color:var(--ivoire);font-size:.88rem} .rsv__total{display:flex;justify-content:space-between;align-items:baseline;gap:12px; margin-top:14px;padding-top:12px;border-top:1px solid var(--filet-clair)} .rsv__total span:first-child{color:rgba(245,241,233,.55);font-size:.7rem; letter-spacing:.16em;text-transform:uppercase} .rsv__total span:last-child{color:var(--or);font-family:var(--titre);font-size:1.15rem} .rsv__body{display:flex;flex-direction:column;overflow-y:auto;min-height:0; -webkit-overflow-scrolling:touch;padding:clamp(26px,3vw,36px)} /* une fois le corps contraint, un enfant flex a scroll propre s'ecrase a zero au lieu de laisser defiler : on interdit le retrecissement. */ .rsv__body > *{flex-shrink:0} .rsv__steps{display:flex;gap:7px;margin-bottom:22px} .rsv__steps i{width:30px;height:2px;background:var(--filet);transition:background .3s} .rsv__steps i.on{background:var(--or)} .rsv__label{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase; color:var(--gris);margin-bottom:12px} .rsv__packs{max-height:270px;overflow-y:auto;border:1px solid var(--filet);padding:6px} .rsv__grouplabel{padding:14px 12px 8px;font-size:.62rem;letter-spacing:.18em; text-transform:uppercase;color:var(--or-encre)} .rsv__pack{ display:flex;align-items:baseline;gap:12px;width:100%;text-align:left; padding:11px 12px;background:transparent;border:0;border-bottom:1px solid rgba(13,13,13,.07); cursor:pointer;font-size:.9rem;color:var(--encre);transition:background .25s; } .rsv__pack:hover{background:var(--ivoire)} .rsv__pack[aria-pressed="true"]{background:var(--noir);color:var(--ivoire)} .rsv__pack[aria-pressed="true"] .rsv__pack-p{color:var(--or)} .rsv__pack-n{flex:1} .rsv__pack-p{font-weight:500;color:var(--gris);white-space:nowrap} .rsv__pack-p small{font-size:.7rem;margin-left:2px} .rsv__compte{display:block;margin-top:10px;font-size:.78rem;color:var(--gris)} .rsv__field{margin-top:22px} /* un input date avec un simple filet transparent est une BOITE VIDE INVISIBLE sur iOS : appearance:none retire la hauteur intrinseque, d'ou le min-height, le fond et la bordure explicites. */ .rsv__field input[type="date"]{ -webkit-appearance:none;appearance:none;width:100%; min-height:48px;line-height:1.3;padding:0 14px;font-family:var(--corps);font-size:16px; color:var(--encre);background:var(--ivoire);border:1px solid var(--filet);border-radius:2px; } .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;background:transparent;border:1px solid var(--filet);border-radius:2px; font-size:.78rem;letter-spacing:.05em;cursor:pointer;color:var(--encre);transition:all .25s; } .rsv__chip:hover{border-color:var(--noir)} .rsv__chip[aria-pressed="true"]{background:var(--noir);color:var(--ivoire);border-color:var(--noir)} .rsv__hint{margin-top:20px;font-size:.84rem;color:var(--gris)} .rsv__totalline{display:flex;justify-content:space-between;align-items:baseline;gap:12px; margin-top:16px;padding-top:14px;border-top:1px solid var(--filet)} .rsv__totalline span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)} .rsv__totalline b{font-family:var(--titre);font-weight:400;font-size:1.2rem;color:var(--or-encre)} .rsv__actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px} .rsv__actions .btn{flex:1 1 200px;min-width:0} .rsv__note{margin-top:16px;font-size:.74rem;color:var(--gris);line-height:1.6} .rsv__close{ position:absolute;top:14px;right:14px;z-index:5;width:38px;height:38px;padding:0; display:flex;align-items:center;justify-content:center; background:var(--creme);border:1px solid var(--filet);border-radius:2px;cursor:pointer;color:var(--encre); } .rsv__close svg{display:block;width:17px;height:17px} .rsv__close:hover{background:var(--noir);color:var(--ivoire);border-color:var(--noir)} /* --- 17. APPARITIONS ET MOUVEMENT ----------------------------------------- Tout est prefixe .js : la classe est posee par un script en ligne dans le . Sans JS, rien n'est jamais a opacity:0 et la page reste entiere. Aucune de ces regles n'utilise var(--t) dans un raccourci `animation` : --t contient la duree ET la courbe, ce qui ferait trois valeurs de temps avec un delai et ferait tomber la regle en silence. */ .js [data-apparait]{opacity:0;transform:translate3d(0,22px,0); transition:opacity var(--t),transform var(--t)} .js [data-apparait].vu{opacity:1;transform:none} .js [data-apparait][data-d="1"]{transition-delay:.09s} .js [data-apparait][data-d="2"]{transition-delay:.18s} .js [data-apparait][data-d="3"]{transition-delay:.27s} .js [data-apparait][data-d="4"]{transition-delay:.36s} .js [data-apparait][data-d="5"]{transition-delay:.45s} /* le texte du hero entre en cascade au chargement, pas au defilement : .hero--pret est pose par app.js des que la page est prete. */ .js .hero__in > *{opacity:0;transform:translate3d(0,26px,0); transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)} .js .hero--pret .hero__in > *{opacity:1;transform:none} .js .hero--pret .hero__sous{transition-delay:.11s} .js .hero--pret .hero__cta{transition-delay:.22s} /* parallaxe du hero : --par est ecrit par app.js, la valeur par defaut 0 garantit que la photo est en place si le script ne tourne pas. */ .hero__fond{transform:translate3d(0,var(--par,0px),0);will-change:transform} /* revelation des photos : le cadre se devoile du bas, l'image se pose en sortant d'un leger zoom. Le conteneur n'est jamais a opacity:0. */ .js .cadre,.js .univers__media{clip-path:inset(0 0 100% 0); transition:clip-path 1s cubic-bezier(.22,.61,.36,1)} .js .cadre img,.js .univers__media img{transform:scale(1.07); transition:transform 1.2s cubic-bezier(.22,.61,.36,1)} .js [data-apparait].vu .cadre,.js [data-apparait].vu .univers__media{clip-path:inset(0)} .js [data-apparait].vu .cadre img,.js [data-apparait].vu .univers__media img{transform:none} /* le survol reprend la main une fois la carte posee */ .js .univers__carte.vu:hover .univers__media img{transform:scale(1.05)} /* le filet dore se tire sous la surligne quand le bloc entre */ .js [data-apparait] .sur-titre::after{transform:scaleX(0);transform-origin:left; transition:transform .8s cubic-bezier(.22,.61,.36,1) .18s} .js [data-apparait].vu .sur-titre::after{transform:scaleX(1)} /* les lignes de prix du teaser arrivent une par une (accueil uniquement : la carte complete des tarifs en compte trop pour etre mise en cascade) */ .js .duo .lignes-prix .ligne-prix{opacity:0;transform:translate3d(0,10px,0); transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)} .js .duo .lignes-prix.vu .ligne-prix{opacity:1;transform:none} .js .duo .lignes-prix.vu .ligne-prix:nth-child(2){transition-delay:.06s} .js .duo .lignes-prix.vu .ligne-prix:nth-child(3){transition-delay:.12s} .js .duo .lignes-prix.vu .ligne-prix:nth-child(4){transition-delay:.18s} .js .duo .lignes-prix.vu .ligne-prix:nth-child(5){transition-delay:.24s} .js .duo .lignes-prix.vu .ligne-prix:nth-child(6){transition-delay:.3s} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js [data-apparait],.js [data-apparait].vu{opacity:1;transform:none;transition:none} .js .hero__in > *{opacity:1;transform:none;transition:none} .hero__fond{transform:none} .hero__fond img{animation:none} .js .cadre,.js .univers__media{clip-path:none;transition:none} .js .cadre img,.js .univers__media img, .js .univers__carte:hover .univers__media img{transform:none;transition:none} .js [data-apparait] .sur-titre::after{transform:none;transition:none} .js .duo .lignes-prix .ligne-prix{opacity:1;transform:none;transition:none} .univers__carte,.univers__carte:hover{transform:none;transition:none} .ig-post img,.ig-post:hover img{transition:none;transform:none} } /* --- 18. RESPONSIVE -------------------------------------------------------- */ @media (max-width:1080px){ .duo,.contact,.famille__grille{grid-template-columns:1fr} /* le cadre passe sous le texte et se bride, sinon il occupe tout l'ecran */ .editorial{grid-template-columns:1fr;gap:clamp(34px,5vw,54px)} .editorial__media{max-width:440px;margin-inline:auto;width:100%} .univers{grid-template-columns:repeat(2,minmax(0,1fr))} .avis{grid-template-columns:repeat(2,minmax(0,1fr))} .formules{grid-template-columns:1fr} .pied__grille{grid-template-columns:1fr 1fr} .rsv__card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr); max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)} .rsv__aside{min-height:150px} } @media (max-width:860px){ :root{--nav-h:78px} .nav.scrolled{--nav-h:66px} .nav__burger{display:block} .nav__cta--barre{display:none} /* le menu plein ecran : le header n'a aucun backdrop-filter, il ne peut donc pas devenir bloc conteneur et ratatiner ce inset:0 sur la barre du haut. */ .nav__liens{ position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh; background:var(--ivoire);flex-direction:column;justify-content:center;gap:26px; transform:translateX(100%);transition:transform .38s cubic-bezier(.22,.61,.36,1); z-index:125; } .nav__liens.nav-open{transform:none} .nav__liens a{color:var(--encre);font-size:1.6rem} .nav__liens .nav__cta--menu{display:inline-flex;margin-top:12px; background:var(--noir);color:var(--ivoire);border-color:var(--noir)} .faits__grille{grid-template-columns:1fr;gap:20px} /* les cartes RESTENT a deux colonnes jusqu'au telephone : sur une seule colonne a 768px, chaque photo 4:5 fait 870px de haut et la page devient une pile de grandes images. */ .avis{grid-template-columns:1fr} .ig-grille,.ig-grille--bande{grid-template-columns:repeat(2,minmax(0,1fr))} .deux-colonnes,.famille__liste{columns:1} .pied__grille{grid-template-columns:1fr;gap:34px} .hero{min-height:76vh;min-height:76svh} .entete{min-height:46vh;min-height:46svh} /* sous 860px le titre se pose au centre : le voile doit descendre a la verticale, sinon le texte finit sur la partie claire de la photo. */ .hero__voile,.entete__voile{ background:linear-gradient(to top,rgba(13,13,13,.86) 0%,rgba(13,13,13,.62) 46%,rgba(13,13,13,.30) 100%); } } @media (max-width:620px){ /* une seule colonne, et la photo se tasse en 4:3 : en 4:5 sur 331px de large elle ferait 414px de haut et mangerait tout l'ecran. */ .univers{grid-template-columns:1fr} .univers__media{aspect-ratio:4/3} } @media (max-width:680px){ .wrap{width:calc(100% - 44px)} .rsv{padding:0} .rsv__card{width:100vw;margin:0;border-radius:0; grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr); height:100vh;max-height:100vh;height:100dvh;max-height:100dvh} /* une seule surface de defilement sur telephone, pas de scroller imbrique */ .rsv__packs{max-height:none} .rsv__aside{min-height:118px} .btn{padding:14px 24px;font-size:.72rem} .hero__cta .btn,.bande-cta__rang .btn,.contact__actions .btn{flex:1 1 100%} .nav__marque img{width:92px} .ig__tete{flex-direction:column;align-items:flex-start;gap:16px} }