/* FEUILLE DES CINQ UNIVERS — aucune donnée client à modifier ici. * Les couleurs, contenus, familles et ordres de rubriques proviennent de configuration.js. * Cette feuille règle la composition, la lecture, les commandes et les petits écrans. * Les cinq polices sont locales, libres ; leurs licences sont dans assets/LICENCE-*.txt. */ @font-face{font-family:Taviraj;src:url('assets/font-taviraj.ttf') format('truetype');font-weight:600;font-display:swap} @font-face{font-family:'Alegreya Sans';src:url('assets/font-alegreya.ttf') format('truetype');font-weight:500;font-display:swap} @font-face{font-family:'Public Sans';src:url('assets/font-publicsans.ttf') format('truetype');font-weight:100 900;font-display:swap} @font-face{font-family:Archivo;src:url('assets/font-archivo.ttf') format('truetype');font-weight:100 900;font-display:swap} @font-face{font-family:Sora;src:url('assets/font-sora.ttf') format('truetype');font-weight:100 800;font-display:swap} /* Socle : les variables sont calculées par la configuration validée. * Les contenus restent visibles sans animation. Les liens et champs ont un focus net. */ :root{--ink:#171717;--paper:#fff;--accent:#242424;--soft:#eeeeea;--contrast:#fff;--line:#ccc;--heading:Taviraj,serif;--heading-weight:600;--body:'Public Sans',sans-serif;--shell:116px;--gap:clamp(24px,5vw,80px)} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--shell) + 24px);scrollbar-color:var(--accent) var(--paper)}body{margin:0;padding-top:var(--shell);font:16px/1.65 var(--body);background:var(--paper);color:var(--ink);caret-color:var(--accent)}body[data-merchant=true]{--shell:84px}::selection{background:var(--accent);color:var(--contrast)}h1,h2,h3,p,figure{margin:0}h1,h2,h3{overflow-wrap:anywhere}h1,h2{font-family:var(--heading);font-weight:var(--heading-weight);letter-spacing:-.03em;line-height:1.1;text-wrap:balance}h1{font-size:clamp(38px,4.4vw,68px)}h2{font-size:clamp(32px,3.3vw,52px)}h3{font-size:22px;line-height:1.25;font-weight:650}a{color:inherit;text-underline-offset:5px}a,button,summary,select{touch-action:manipulation}button,input,select,textarea{font:inherit}button,summary{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:5px}img{display:block;max-width:100%;width:100%;height:100%;object-fit:cover}svg{flex:none}[hidden]{display:none!important}.kicker{display:none!important}.skip{position:fixed;z-index:150;left:16px;top:-120px;background:var(--paper);color:var(--ink);padding:14px}.skip:focus{top:16px}p{max-width:72ch}.section{max-width:1600px;margin:auto;padding:clamp(54px,7vw,110px) 6%}.text-link{display:inline-flex;gap:14px;align-items:center;min-height:44px;font-size:14px;font-weight:650}.small-note{font-size:12px;line-height:1.6;margin-top:18px}.action{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:52px;padding:14px 23px;border:1px solid var(--accent);border-radius:7px;background:var(--accent);color:var(--contrast);text-decoration:none;font-size:15px;font-weight:650;line-height:1.35}.action:hover{filter:brightness(.91)}.action span{display:none}.action svg{width:22px;height:22px}.hero-description{font-size:17px;max-width:44ch;line-height:1.6}.hero-address{font-size:13px;margin-top:28px;max-width:45ch}.photo-credit{font-size:12px} /* Navigation constante : la réservation reste contrastée et visible. * Le logo personnalisé garde ses proportions, même à 200 % de son échelle. */ .fixed-shell{position:fixed;inset:0 0 auto;z-index:60;background:var(--paper)}.prototype-bar{min-height:32px;padding:4px 4%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--ink);color:var(--paper);font-size:11px;line-height:1.5}.prototype-bar a{min-height:24px}.site-header{height:84px;padding:8px 4%;display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--paper);border-bottom:1px solid var(--line)}.shop-brand{display:flex;align-items:center;gap:11px;max-width:42%;min-width:0;text-decoration:none;font-family:var(--heading);font-size:24px;font-weight:var(--heading-weight);line-height:1.15;letter-spacing:-.025em;overflow-wrap:anywhere}.shop-symbol{flex:none;font-family:var(--heading);font-size:34px;line-height:1}.shop-symbol img{width:calc(30px * var(--logo-scale,1));height:calc(30px * var(--logo-scale,1));object-fit:contain}.site-header nav{display:flex;gap:25px;align-items:center;font-size:13px}.site-header nav>a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}.site-header nav>a:not(.nav-book):hover{text-decoration:underline}.site-header .nav-book{background:var(--accent);color:var(--contrast);border-radius:7px;padding:10px 18px;font-weight:650;gap:10px}.menu-toggle{display:none}.booking-dock{display:none} /* Maison contemporaine : enseigne pleine largeur, scène de métier et rail de réservation. * L’accueil garde la même photo et le même titre que la configuration du commerce. */ .hero{max-width:1800px;margin:auto;position:relative}.shop-sign{font-family:var(--heading);font-weight:var(--heading-weight);font-size:clamp(46px,8.6vw,142px);letter-spacing:-.04em;line-height:1.1;padding:23px 4% 34px;text-align:center;overflow-wrap:anywhere}.elegance-scene{position:relative;min-height:430px}.elegance-scene>figure{height:430px}.elegance-scene .hero-words{position:absolute;left:5%;top:40px;max-width:47%;padding:22px;background:var(--paper);color:var(--ink);border-radius:8px}.hero-elegance .hero-description{font-size:14px;max-width:42ch;margin-top:15px}.hero-elegance h1{font-size:clamp(30px,3.2vw,50px)}.appointment-rail{display:flex;gap:24px;align-items:center;justify-content:space-between;margin:-28px 5% 0;padding:22px 28px;background:var(--soft);color:var(--ink);position:relative;border-radius:12px}.appointment-rail strong{font-family:var(--heading);font-size:25px;line-height:1.2;max-width:20ch}.appointment-rail>span{font-size:13px;max-width:26ch}.appointment-rail .action{flex:none}.hero-elegance+.section{padding-top:64px} /* Jardin de ville : grand champ de couleur, écriture souple, photo verticale. * La bande d’adresse reste facultative : aucune ligne n’est inventée si elle est vide. */ .hero-naturel{display:grid;grid-template-columns:1fr 1fr;background:var(--soft);border-radius:0 0 0 70px;overflow:hidden}.nature-heading{padding:68px 9% 64px 12%;align-self:center}.hero-naturel h1{font-size:clamp(46px,5.3vw,84px);line-height:1.02;letter-spacing:-.02em}.nature-heading .hero-description{margin:24px 0 30px;max-width:33ch}.nature-heading .text-link{display:flex;margin-top:16px}.nature-landscape{height:590px}.nature-landscape img{object-position:center}.nature-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:28px;padding:22px 6%;background:var(--paper);font-size:13px}.hero-naturel .action{border-radius:24px}body[data-style=naturel] .service h3{font-family:var(--heading);font-size:31px}body[data-style=naturel] .about{background:var(--soft);max-width:none}body[data-style=naturel] .team-member img{border-radius:48px 48px 0 0} /* Adresse claire : tâches et informations d’abord, photo secondaire compacte. * La liste de l’accueil reste une liste de liens, quel que soit le nombre de services. */ .hero-essentiel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:7%;padding:56px 6%;border-bottom:1px solid var(--line)}.essential-main h1{max-width:19ch;font-size:clamp(38px,4vw,60px)}.essential-main .hero-description{margin:20px 0 24px}.essential-prices{margin-bottom:26px;max-width:600px}.essential-prices a{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:52px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:15px;font-weight:600}.essential-prices a:hover{color:var(--accent)}.essential-photo{height:450px;align-self:center;border-radius:14px;overflow:hidden}body[data-style=essentiel] h1,body[data-style=essentiel] h2{font-weight:650}body[data-style=essentiel] .services{padding-block:54px}body[data-style=essentiel] .service-list{display:block}body[data-style=essentiel] .service{display:grid;grid-template-columns:160px minmax(0,1fr);gap:28px;padding:22px 0;border-bottom:1px solid var(--line)}body[data-style=essentiel] .service-image{height:150px}body[data-style=essentiel] .service-copy{padding:5px 0}body[data-style=essentiel] .service-copy p{margin:8px 0}body[data-style=essentiel] .booking{margin:0 4%;max-width:none;border-radius:16px}body[data-style=essentiel] .about-photo{height:330px} /* Atelier graphique : titre en affiche, photographie large et colonne de réservation. * L’accent occupe l’accueil ; sa couleur de texte est calculée par la configuration. */ .hero-studio{background:var(--accent);color:var(--contrast);display:grid;grid-template-columns:1.45fr 1fr;gap:36px 7%;padding:48px 5% 54px}.hero-studio h1{grid-column:1/-1;max-width:23ch;font-stretch:condensed;font-size:clamp(48px,6.3vw,96px);font-weight:800;line-height:.99;letter-spacing:-.035em;text-transform:uppercase}.studio-photo{height:360px;overflow:hidden}.studio-side{align-self:center;min-width:0}.studio-side .hero-description{font-size:18px;max-width:35ch}.studio-side .action{margin-top:28px;background:var(--paper);color:var(--ink);border-color:var(--paper)}.studio-side .text-link{display:flex;margin-top:18px}.studio-side .hero-address{color:inherit}body[data-style=studio] .shop-brand{text-transform:uppercase;font-weight:800}body[data-style=studio] h2{font-weight:800;text-transform:uppercase;line-height:1.05}body[data-style=studio] .photo-story{padding-top:55px;padding-bottom:55px}body[data-style=studio] .story-images{grid-template-columns:1.5fr 1fr;gap:20px}body[data-style=studio] .service-copy{padding-top:24px;border-top:2px solid var(--accent)}body[data-style=studio] .service h3{font-weight:750}body[data-style=studio] .booking{background:var(--soft);color:var(--ink)} /* Couleur libre : grandes lettres, duo de photos et surfaces chromatiques continues. * La septième photo garde sa place dans le duo ; aucun masque ne la déforme. */ .hero-pop{display:grid;grid-template-columns:1.08fr 1fr;gap:5%;padding:58px 6% 0;background:var(--soft);color:var(--ink)}.pop-words{align-self:center;padding-bottom:44px}.hero-pop h1{font-size:clamp(44px,5.1vw,79px);max-width:13ch;line-height:1.07}.pop-words .hero-description{margin:25px 0 30px;font-size:16px}.pop-collage{display:grid;grid-template-columns:1.4fr .8fr;gap:15px;align-items:center;padding:0 0 30px}.pop-primary{height:435px;border-radius:100px 100px 12px 12px;overflow:hidden}.pop-secondary{height:270px;align-self:end;margin-bottom:28px;border-radius:12px;overflow:hidden}.pop-bottom{grid-column:1/-1;margin:0 -6.8181818%;padding:20px 6.8181818%;display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--accent);color:var(--contrast)}.pop-type{font-size:14px;font-weight:600;max-width:65ch;line-height:1.6}.pop-bottom .text-link{flex:none}body[data-style=pop] .service-image{border-radius:70px 70px 10px 10px}body[data-style=pop] .service:nth-child(2){padding-top:44px}body[data-style=pop] .news-feature{background:var(--soft);padding:34px;border-radius:16px}body[data-style=pop] .about{background:var(--soft);max-width:none} /* Rubriques communes : les variantes modifient leur rythme sans retirer de contenu. * Les photographies ont une hauteur stable avant chargement pour éviter les sauts. */ .section-heading{display:flex;gap:50px;justify-content:space-between;align-items:end;margin-bottom:38px}.section-heading h2{max-width:20ch}.section-description{font-size:14px;max-width:40ch}.service-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.service{min-width:0}.service-image{display:block;height:285px;overflow:hidden}.service-copy{padding-top:22px}.service-copy p{font-size:14px;line-height:1.75;margin:14px 0;max-width:46ch}.service-book{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:650;line-height:1.5;gap:12px}.about{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}.about-photo{height:440px}.about-photo img{height:calc(100% - 35px)}.about-photo figcaption{font-size:11px;line-height:1.45;padding-top:10px}.about-copy h2{margin-bottom:24px}.about-copy>p{margin-bottom:20px;max-width:58ch}.about-copy .text-link{margin-top:12px}.story-heading{max-width:760px;margin-bottom:36px}.story-heading h2{margin-bottom:20px}.story-heading p{font-size:13px;max-width:58ch}.story-images{display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:start}.story-images img{height:400px}.story-images figure:nth-child(2){margin-top:65px}.story-images figcaption{font-size:12px;line-height:1.5;margin-top:12px}.team-heading{max-width:850px;margin-bottom:36px}.team-heading h2{margin-bottom:20px}.team-heading p{font-size:13px;max-width:65ch}.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 24px}.team-member{min-width:0}.team-member img{height:235px;object-fit:contain;background:var(--soft)}.team-member h3{margin-top:17px;font-size:19px}.team-member p{font-size:13px;line-height:1.5;margin-top:6px}.member-initials{height:235px;display:grid;place-items:center;background:var(--soft);font:60px var(--heading)}.team-collective{max-width:1000px}.team-collective img{max-height:570px;height:auto;object-fit:contain;background:var(--soft)}.team-collective figcaption{font-size:13px;padding-top:12px}.collective-placeholder{padding:60px;background:var(--soft)}.collective-placeholder>span{font:65px var(--heading)} /* Communications : chaque bloc conserve sa visibilité indépendante et ses images. * Une seule action reste compacte ; cinq fiches forment des lignes lisibles. */ .commerce-news-head h2{margin-bottom:20px}.commerce-news-head>p{font-size:15px;line-height:1.75;max-width:60ch}.action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:35px}.action-card{min-width:0}.action-card>img{height:290px;object-fit:contain;background:var(--soft)}.action-card>div{padding-top:20px}.action-card h3{font-size:21px}.action-card p{margin-top:12px;font-size:14px;line-height:1.7}.single-action .action-grid{display:block;max-width:950px}.single-action .action-card{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}.single-action .action-card>img{height:350px}.news-feature{display:grid;grid-template-columns:1fr 1.1fr;gap:6%;align-items:center}.news-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.news-images:has(>figure:only-child){grid-template-columns:1fr}.news-images img{height:350px;object-fit:contain;background:var(--soft)}.news-images figcaption{font-size:11px;line-height:1.5;margin-top:10px} /* Réservation et coordonnées : vraies destinations existantes, pas de faux créneaux. * En aperçu local, le panneau explique le raccordement sans contacter l’agenda. */ .booking{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8%;background:var(--ink);color:var(--paper)}.booking h2{max-width:15ch;margin-bottom:26px}.booking-intro>p{font-size:14px;line-height:1.7;margin-bottom:16px;max-width:55ch}.booking .demo-notice{font-size:12px}.demo-notice strong{display:block;margin-bottom:5px}.booking-panel{align-self:center;min-width:0}.booking-panel iframe{width:100%;max-width:100%}.local-booking{padding:32px;background:var(--paper);color:var(--ink);border-radius:14px}.local-booking h3{font-family:var(--heading);font-size:30px}.local-booking>p{font-size:14px;line-height:1.7;margin-top:17px}.local-booking .action{margin-top:22px}.booking select{width:100%;padding:14px;min-height:48px}.booking-feedback{font-size:14px}.contact{display:grid;grid-template-columns:1fr 1fr;gap:6%;border-top:1px solid var(--line)}.contact h2{font-size:clamp(30px,3vw,46px);max-width:20ch}.contact address{font-style:normal;overflow-wrap:anywhere}.contact address p{white-space:pre-line;margin-bottom:12px}.contact address a{display:block;width:fit-content;min-height:44px;padding-top:8px}.contact>.action{grid-column:2;justify-self:start;align-self:start}.site-footer{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:32px 6%;font-size:12px;border-top:1px solid var(--line)}.site-footer a{min-height:44px;display:inline-flex;align-items:center}.signatureCrafteno{gap:6px;text-decoration:none}.signatureCrafteno img{width:20px;height:20px;object-fit:contain} /* Couleurs et configurateur : toutes les commandes restent accessibles. * Le panneau est replié par défaut pour laisser le commerce au premier écran. */ .palette-picker{max-width:none;border-bottom:1px solid var(--line);background:var(--paper);font:13px/1.6 var(--body)}.palette-summary{display:flex;align-items:center;justify-content:space-between;list-style:none;min-height:44px;padding:8px 4%;font-weight:600}.palette-summary::-webkit-details-marker{display:none}.palette-content{padding:15px 4% 30px;max-width:1400px;margin:auto}.palette-intro{display:flex;gap:20px;align-items:center;margin:12px 0 20px}.palette-intro p{font-size:13px}#palette-options{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:9px}#palette-options button{padding:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:7px;text-align:left;font-size:11px;line-height:1.4;min-height:64px}#palette-options button[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px}.palette-chips{display:flex;overflow:hidden;border-radius:3px;margin-bottom:6px}.palette-chips i{width:25%;height:13px;border:1px solid #8885}.palette-vivid-toggle{display:flex;align-items:center;gap:9px;margin:20px 0}input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}.personal-colors{padding:20px;border:1px solid var(--line);border-radius:8px;margin:20px 0}.personal-color-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin-top:18px}.color-input-pair{display:flex;gap:8px;margin-top:6px}.color-input-pair input[type=color]{width:52px;padding:4px}.color-input-pair input[type=text]{width:100%;min-width:0}.palette-content input,.palette-content textarea{min-height:44px;padding:9px;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--ink)}.palette-content button{min-height:44px;padding:10px 17px;border:1px solid var(--accent);background:var(--accent);color:var(--contrast);border-radius:6px}.palette-content textarea{width:100%;margin-top:12px}#color-help,#copy-color-status,#palette-status{margin-top:12px;font-size:12px}.customizer{position:relative;padding:18px 4% 32px;background:var(--paper);color:var(--ink);max-width:none;border-top:1px solid var(--line)}.customizer>summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:14px;font-weight:650}.customizer-content{max-width:1100px;margin:25px auto}.customizer-content h2{font-size:32px;margin-bottom:18px}.customizer-content>p{font-size:14px;margin-bottom:24px}.customizer form{display:grid;grid-template-columns:1fr 1fr;gap:22px}.customizer label{display:flex;flex-direction:column;gap:7px;font-size:13px;min-width:0}.customizer input,.customizer select{min-height:44px;width:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--ink)}.customizer input[type=file]{font-size:12px;overflow:hidden}.customizer input[type=checkbox]{width:20px;min-height:20px}.customizer fieldset{margin:20px 0;padding:20px;border:1px solid var(--line);border-radius:8px;display:grid;gap:14px}.customizer legend{font-weight:650;padding:0 8px}.customizer form>details{grid-column:1/-1;border-top:1px solid var(--line);padding-top:8px}.customizer form summary{min-height:48px;display:flex;align-items:center;font-weight:600;font-size:14px}.customizer details p{font-size:13px;line-height:1.6;margin:10px 0 18px}.customizer details>label{margin:18px 0}.customizer .editor-switch{flex-direction:row;align-items:center;gap:10px}.customizer-actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:28px}.customizer button,.file-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid var(--accent);background:var(--accent);color:var(--contrast);border-radius:5px;font-size:13px}.customizer .file-button{position:relative;overflow:hidden;cursor:pointer}.file-button input{position:absolute;inset:0;opacity:0;cursor:pointer}#customizer-status{font-size:14px;line-height:1.6;margin-top:20px}.personalize-jump a{display:inline-block;min-height:44px;padding-top:9px} /* Formats explicites : garder toute l’image, même si sa forme change la composition. * Ce choix appartient au commerce ; l’espace nécessaire participe à la page. */ body img[data-crafteno-photo-format]{display:block!important;width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:var(--crafteno-photo-ratio)!important;object-fit:contain!important;object-position:center!important;background:var(--paper);border-radius:0!important;clip-path:none!important;transform:none!important}body [data-crafteno-photo-frame]{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;clip-path:none!important;border-radius:0!important;transform:none!important;align-self:start}.elegance-scene:has([data-crafteno-photo-format]){display:grid;grid-template-columns:1fr 1fr;gap:4%;align-items:center;min-height:0}.elegance-scene:has([data-crafteno-photo-format]) .hero-words{position:static;max-width:none}.pop-collage:has([data-crafteno-photo-format]){align-items:start}.pop-collage:has([data-crafteno-photo-format]) figure{margin:0}.story-images:has([data-crafteno-photo-format]) figure{margin-top:0} /* Tablette : les commandes restent sur une ligne jusqu’à ce que leur contenu l’interdise. * Les colonnes ont une largeur minimale nulle, donc textes et noms longs se replient. */ /* Grands écrans : marges bornées dans les sections limitées à 1600px. */ @media(min-width:1600px){.section{padding-inline:96px}.booking.section{padding-inline:max(6%,calc((100vw - 1400px)/2))}} @media(max-width:1100px){.site-header nav{gap:15px;font-size:12px}.shop-brand{font-size:21px;max-width:35%}.hero-studio{gap:30px 5%}.hero-studio h1{font-size:7vw}.appointment-rail{gap:20px;padding:20px}.appointment-rail>span{display:none}.nature-heading{padding:45px 9%}.nature-landscape{height:530px}.pop-collage{grid-template-columns:1fr .6fr;gap:10px}.pop-primary{height:380px}.pop-secondary{height:235px}.service-image{height:230px}.team-member img,.member-initials{height:200px}.section-heading{gap:30px}.about-photo{height:380px}.action-grid{gap:25px}.action-card>img{height:240px}.news-images img{height:290px}#palette-options{grid-template-columns:repeat(5,minmax(0,1fr))}} /* Téléphone : entrée lisible, menu utilisable au clavier et bouton de réservation fixe. * Le bas de page garde l’espace du bouton et de la zone système de l’appareil. */ @media(max-width:760px){:root{--shell:104px}body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}body[data-merchant=true]{--shell:72px}.prototype-bar{font-size:11px;gap:12px;min-height:32px}.prototype-bar #model-label{display:none}.site-header{height:72px;padding:7px 5%;gap:15px}.shop-brand{font-size:20px;max-width:68%}.shop-symbol{font-size:26px}.shop-symbol img{width:calc(24px * var(--logo-scale,1));height:calc(24px * var(--logo-scale,1))}.menu-toggle{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:9px 12px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:5px;font-size:13px}.site-header nav{display:none;position:absolute;left:0;right:0;top:100%;padding:18px 5% 24px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 15px 22px #0001}.site-header nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:8px}.site-header nav>a{min-height:48px;font-size:15px}.site-header nav .nav-book{justify-content:center}.booking-dock{position:fixed;z-index:65;bottom:max(12px,env(safe-area-inset-bottom));left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:54px;padding:15px 22px;border-radius:10px;background:var(--accent);color:var(--contrast);text-decoration:none;font-size:15px;font-weight:650;box-shadow:0 7px 22px #0003}.section{padding:55px 6%}.hero-description{font-size:15px}h1{font-size:40px}h2{font-size:34px}.shop-sign{font-size:clamp(33px,8.8vw,65px);padding:22px 5% 25px;line-height:1.2}.elegance-scene{min-height:0;display:flex;flex-direction:column}.elegance-scene>figure{height:265px;order:0}.elegance-scene .hero-words{position:static;padding:26px 6%;max-width:none;order:1;background:var(--paper)}.hero-elegance h1{font-size:36px}.hero-elegance .hero-description{font-size:14px}.appointment-rail{margin:0 5%;padding:22px;display:block}.appointment-rail strong{display:block;font-size:22px;margin-bottom:17px}.appointment-rail .action{width:100%}.hero-naturel{grid-template-columns:1fr;border-radius:0 0 0 40px}.nature-heading{padding:35px 7% 36px}.hero-naturel h1{font-size:48px;max-width:16ch}.nature-heading .hero-description{margin:19px 0 24px;font-size:16px}.nature-heading .text-link{margin-top:14px}.nature-landscape{height:300px}.nature-bottom{font-size:12px;padding:18px 7%;flex-wrap:wrap;gap:10px}.hero-essentiel{display:flex;flex-direction:column;padding:34px 6% 36px;gap:30px}.essential-main h1{font-size:37px;max-width:18ch}.essential-main .hero-description{font-size:14px;margin:18px 0}.essential-prices a{min-height:48px;font-size:14px}.essential-photo{height:210px;width:100%}.essential-main>.action{width:100%}.hero-address{margin-top:20px;font-size:12px}.hero-studio{grid-template-columns:1fr;gap:25px;padding:32px 6% 38px}.hero-studio h1{grid-column:1;font-size:51px;max-width:14ch}.studio-photo{height:270px}.studio-side .hero-description{font-size:16px;max-width:40ch}.studio-side .action{margin-top:23px}.hero-pop{grid-template-columns:1fr;padding:34px 6% 0;gap:22px}.pop-words{padding-bottom:0}.hero-pop h1{font-size:44px;max-width:14ch}.pop-words .hero-description{font-size:14px;margin:20px 0 23px}.pop-collage{grid-template-columns:1.35fr .85fr;padding-bottom:10px;gap:13px}.pop-primary{height:275px;border-radius:65px 65px 8px 8px}.pop-secondary{height:190px;margin-bottom:15px}.pop-bottom{margin-top:0;flex-direction:column;align-items:start;gap:8px;padding-block:18px}.pop-type{font-size:12px;max-width:50ch}.section-heading{display:block;margin-bottom:28px}.section-heading h2{max-width:20ch}.section-description{margin-top:18px;font-size:13px;max-width:55ch}.service-list{grid-template-columns:1fr;gap:34px}.service-image{height:290px}.service-copy{padding-top:18px}.service h3{font-size:25px}.service-copy p{margin:10px 0;font-size:14px}.service-book{font-size:13px}body[data-style=pop] .service:nth-child(2){padding-top:0}body[data-style=pop] .service-image{border-radius:55px 55px 8px 8px}body[data-style=essentiel] .service{grid-template-columns:90px minmax(0,1fr);gap:18px;padding:21px 0}body[data-style=essentiel] .service-image{height:115px}body[data-style=essentiel] .service-copy{padding-top:0}body[data-style=essentiel] .service h3{font-size:20px}body[data-style=essentiel] .service-copy p{font-size:13px}.about{grid-template-columns:1fr;gap:28px}.about-photo{height:350px}.about-copy h2{margin-bottom:18px}.about-copy>p{font-size:14px}.story-images{grid-template-columns:1fr;gap:28px}.story-images img{height:320px}.story-images figure:nth-child(2){margin-top:0}body[data-style=studio] .story-images{grid-template-columns:1fr}.team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}.team-member img,.member-initials{height:180px}.team-member h3{font-size:18px;margin-top:13px}.team-member p{font-size:12px}.team-heading p{font-size:12px}.action-grid{grid-template-columns:1fr;gap:34px}.action-card>img{height:330px}.single-action .action-card{display:block}.single-action .action-card>img{height:330px}.news-feature{grid-template-columns:1fr;gap:28px}.news-images img{height:280px}.news-images:has(>figure:only-child) img{height:350px}body[data-style=pop] .news-feature{padding:24px}.booking{grid-template-columns:1fr;gap:28px}.booking h2{margin-bottom:20px}.booking-intro>p{font-size:13px}.local-booking{padding:24px}.local-booking h3{font-size:28px}.local-booking .action{width:100%}.contact{grid-template-columns:1fr;gap:25px}.contact>.action{grid-column:1;justify-self:stretch}.contact h2{font-size:32px}.contact address{font-size:14px}.site-footer{display:flex;flex-direction:column;align-items:start;gap:10px;padding-block:28px}.site-footer a{font-size:12px}.palette-summary{padding-inline:5%;font-size:12px}.palette-content{padding-inline:6%}.palette-intro{display:block}.palette-intro p{margin-top:8px}#palette-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.personal-color-fields{grid-template-columns:1fr;gap:15px}.personal-colors{padding:16px}.personal-color-fields>div{min-width:0}.customizer form{grid-template-columns:1fr;gap:18px}.customizer{padding-inline:6%}.customizer form>details{grid-column:1}.customizer-actions{gap:10px}.customizer-actions>*{flex:1 1 145px}.elegance-scene:has([data-crafteno-photo-format]){display:flex}.elegance-scene:has([data-crafteno-photo-format]) .hero-words{max-width:none}.elegance-scene:has([data-crafteno-photo-format])>figure{width:100%}} /* Les préférences d’animation sont respectées ; la page n’en dépend jamais. */ @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} /* RITUEL — un titre posé, une grande scène de soin et une invitation décalée. * Le bloc de réservation participe au flux : aucune information n’est cachée par une image. */ .hero-rituel{padding:48px 6% 55px;background:var(--soft)}.rituel-intro{max-width:850px;margin:0 auto 36px;text-align:center}.rituel-intro h1{font-size:clamp(43px,4.8vw,72px);line-height:1.04;letter-spacing:-.02em}.rituel-intro .hero-description{margin:22px auto 0;font-size:18px;max-width:56ch}.rituel-scene{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);align-items:center;gap:0}.rituel-scene>figure{height:440px;overflow:hidden;border-radius:18px}.rituel-invitation{margin-left:-42px;position:relative;background:var(--paper);color:var(--ink);padding:38px;border-radius:14px}.rituel-invitation h2{font-size:33px;line-height:1.1}.rituel-invitation>p{font-size:14px;margin:18px 0 24px}.rituel-invitation .text-link{display:flex;margin-top:14px;font-size:13px}body[data-style=rituel] .about{background:var(--soft);max-width:none}body[data-style=rituel] .service-image{border-radius:18px}body[data-style=rituel] .service h3{font-family:var(--heading);font-size:31px}body[data-style=rituel] .team-member img{border-radius:18px}body[data-style=rituel] .booking{background:var(--soft);color:var(--ink)} /* NOCTURNE — une surface sombre de départ, une photographie et une console lisible. * Les couleurs restent libres : la palette sombre n’impose ni horaires ni offre spéciale. */ .hero-nocturne{padding:46px 5% 55px}.nocturne-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;align-items:end;margin-bottom:34px}.nocturne-heading h1{font-size:clamp(46px,5vw,76px);max-width:17ch;line-height:1.04}.nocturne-heading .hero-description{font-size:17px;max-width:43ch;margin-bottom:6px}.nocturne-scene{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.75fr);gap:32px}.nocturne-scene>figure{height:425px;overflow:hidden;border-radius:10px}.nocturne-console{padding:30px;background:var(--soft);border-radius:12px;align-self:stretch;min-width:0}.nocturne-console h2{font-size:25px;line-height:1.15;max-width:14ch;margin-bottom:18px}.nocturne-console [data-hero-services] a{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:48px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px;text-decoration:none}.nocturne-console .action{margin-top:25px;width:100%}.nocturne-console>[data-hero-address]{font-size:12px;margin-top:21px}body[data-style=nocturne] .service-image{border-radius:8px}body[data-style=nocturne] .about{border-top:1px solid var(--line)}body[data-style=nocturne] .team-member img{background:var(--soft)}body[data-style=nocturne] .booking{background:var(--soft);color:var(--ink)} /* PORTFOLIO — les photographies forment l’ouverture et donnent son rythme à la page. * Les emplacements 0,5,6 restent reliés aux sept photos du même profil ; pas de galerie séparée. */ .hero-portfolio{padding:46px 5% 25px}.portfolio-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:7%;align-items:end;margin-bottom:34px}.portfolio-heading h1{font-size:clamp(43px,4.8vw,70px);line-height:1.09;max-width:18ch}.portfolio-heading .hero-description{font-size:15px;margin-bottom:22px;max-width:50ch}.portfolio-frames{display:grid;grid-template-columns:1.3fr .8fr 1fr;gap:22px;align-items:end}.portfolio-frames>figure{min-width:0;overflow:hidden;border-radius:9px}.portfolio-frames>figure:nth-child(1){height:390px}.portfolio-frames>figure:nth-child(2){height:285px}.portfolio-frames>figure:nth-child(3){height:345px}.portfolio-next{margin-top:20px}body[data-style=portfolio] .photo-story{padding-top:45px;padding-bottom:55px}body[data-style=portfolio] .story-images{gap:25px}body[data-style=portfolio] .service-list{display:block}body[data-style=portfolio] .service{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:7%;padding:28px 0;border-top:1px solid var(--line)}body[data-style=portfolio] .service-image{height:260px;border-radius:9px}body[data-style=portfolio] .service-copy{align-self:center;padding:0}body[data-style=portfolio] .service h3{font-size:28px}body[data-style=portfolio] .booking{background:var(--soft);color:var(--ink)} /* Les trois nouvelles compositions suivent les mêmes exigences de lecture mobile. */ @media(max-width:1100px){.rituel-invitation{padding:27px;margin-left:-28px}.nocturne-console{padding:24px}.nocturne-scene{grid-template-columns:1.2fr 1fr;gap:22px}.portfolio-frames{gap:16px}.portfolio-frames>figure:nth-child(1){height:340px}.portfolio-frames>figure:nth-child(2){height:245px}.portfolio-frames>figure:nth-child(3){height:295px}} @media(max-width:760px){.hero-rituel{padding:32px 6% 38px}.rituel-intro{margin-bottom:26px;text-align:left}.rituel-intro h1{font-size:43px}.rituel-intro .hero-description{font-size:16px;margin-top:19px}.rituel-scene{grid-template-columns:1fr;gap:0}.rituel-scene>figure{height:285px;border-radius:12px}.rituel-invitation{margin:-22px 12px 0;padding:25px}.rituel-invitation h2{font-size:30px}.rituel-invitation .action{width:100%}.hero-nocturne{padding:32px 6% 35px}.nocturne-heading{grid-template-columns:1fr;gap:19px;margin-bottom:27px}.nocturne-heading h1{font-size:46px;max-width:16ch}.nocturne-heading .hero-description{font-size:15px}.nocturne-scene{grid-template-columns:1fr;gap:22px}.nocturne-scene>figure{height:290px}.nocturne-console{padding:26px}.nocturne-console h2{font-size:28px;max-width:17ch}.hero-portfolio{padding:32px 6% 25px}.portfolio-heading{grid-template-columns:1fr;gap:20px;margin-bottom:27px}.portfolio-heading h1{font-size:39px;max-width:18ch}.portfolio-heading .hero-description{font-size:14px;margin-bottom:20px}.portfolio-frames{grid-template-columns:1fr 1fr;gap:15px;align-items:start}.portfolio-frames>figure:nth-child(1){grid-column:1/-1;height:265px}.portfolio-frames>figure:nth-child(2),.portfolio-frames>figure:nth-child(3){height:195px}.portfolio-next{font-size:13px}body[data-style=portfolio] .service{grid-template-columns:1fr;gap:20px;padding:25px 0}body[data-style=portfolio] .service-image{height:280px}body[data-style=portfolio] .service h3{font-size:25px}body[data-style=portfolio] .photo-story{padding-block:40px}} /* RECONSTRUCTION DES HUIT DIRECTIONS — 12 novembre 2026. */ /* ÉLÉGANCE — une revue photographique : marque centrée, filets fins, gros titres * avec empattements, images en pleine page et prestations en doubles pages alternées. * Le bas de page adopte aussi cette identité ; il ne reprend pas la grille commune. */ body[data-style=elegance]{--shell:144px} body[data-style=elegance][data-merchant=true]{--shell:112px} body[data-style=elegance] .site-header{height:auto;min-height:112px;flex-direction:column;justify-content:center;gap:6px;padding:12px 5%;border-bottom:1px solid var(--ink)} body[data-style=elegance] .shop-brand{max-width:100%;font-size:25px;gap:8px} body[data-style=elegance] .shop-symbol{font-size:29px} body[data-style=elegance] .site-header nav{gap:30px;font-size:12px} body[data-style=elegance] .site-header nav>a{min-height:44px} body[data-style=elegance] .site-header .nav-book{background:transparent;color:var(--ink);border-radius:0;padding:0;border-bottom:1px solid var(--ink)} body[data-style=elegance] .action{background:transparent;color:var(--ink);border:0;border-bottom:1px solid currentColor;border-radius:0;padding:10px 0;justify-content:space-between;min-width:205px;font-size:14px;font-weight:500} body[data-style=elegance] .action svg{width:30px;height:30px;transition:transform .35s cubic-bezier(.16,1,.3,1)} body[data-style=elegance] .action:hover svg{transform:translateX(7px)} .editorial-elegance.hero-elegance{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);padding:0 5%;gap:0 6%;max-width:1800px;border-bottom:1px solid var(--ink)} .edition-intro{align-self:center;padding:68px 0 70px;min-width:0} .editorial-elegance h1{font-size:clamp(44px,5.55vw,88px);max-width:11ch;line-height:1.03;font-style:italic;font-weight:600;letter-spacing:-.04em} .editorial-elegance .hero-description{font:17px/1.75 var(--body);max-width:36ch;margin:30px 0 0} .edition-action{margin-top:28px;max-width:290px} .edition-action .action{width:100%} .edition-photography{height:620px;min-width:0;overflow:hidden;margin-top:32px;margin-bottom:32px} .edition-photography img{object-position:center} .edition-address{align-self:center;font-size:12px;line-height:1.7;max-width:38ch;padding:0 0 23px} .edition-signature{justify-self:end;align-self:end;font:600 clamp(26px,3.35vw,50px)/1.1 var(--heading);letter-spacing:-.035em;text-align:right;overflow-wrap:anywhere;max-width:100%;padding-bottom:22px} body[data-style=elegance] .section{padding-top:100px;padding-bottom:100px} body[data-style=elegance] .section-heading{display:grid;grid-template-columns:1.2fr 1fr;align-items:start;gap:12%;padding-bottom:32px;border-bottom:1px solid var(--ink);margin-bottom:55px} body[data-style=elegance] .section-heading h2{font-size:clamp(39px,4.3vw,65px);font-style:italic;max-width:14ch} body[data-style=elegance] .section-description{font-size:14px;line-height:1.8;max-width:38ch;padding-top:8px} body[data-style=elegance] .service-list{display:grid;grid-template-columns:1fr;gap:75px} body[data-style=elegance] .service{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:9%;padding:0;border:0} body[data-style=elegance] .service:nth-child(even){grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)} body[data-style=elegance] .service:nth-child(even) .service-image{grid-column:2;grid-row:1} body[data-style=elegance] .service:nth-child(even) .service-copy{grid-column:1;grid-row:1} body[data-style=elegance] .service-image{height:430px;border-radius:0} body[data-style=elegance] .service-copy{padding:0;max-width:45ch} body[data-style=elegance] .service h3{font:600 clamp(30px,3.4vw,48px)/1.16 var(--heading);letter-spacing:-.025em} body[data-style=elegance] .service-copy p{font-size:15px;line-height:1.85;margin:20px 0} body[data-style=elegance] .service-book{font-size:12px;text-transform:uppercase;letter-spacing:.07em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px} body[data-style=elegance] .about{grid-template-columns:minmax(0,1.05fr) minmax(0,.75fr);gap:13%;border-top:1px solid var(--line);background:var(--paper)} body[data-style=elegance] .about-photo{height:610px;overflow:visible} body[data-style=elegance] .about-photo img{height:calc(100% - 32px);border-radius:0} body[data-style=elegance] .about-photo figcaption{font-size:12px} body[data-style=elegance] .about-copy h2{font-size:clamp(38px,4.1vw,62px);font-style:italic;max-width:12ch;margin-bottom:30px} body[data-style=elegance] .about-copy>p{font-size:15px;line-height:1.9} body[data-style=elegance] .about-copy .text-link{font-weight:500;border-bottom:1px solid var(--ink);font-size:13px} body[data-style=elegance] .photo-story{padding-top:30px;border-bottom:1px solid var(--line)} body[data-style=elegance] .story-heading{max-width:70%;margin:0 0 45px auto} body[data-style=elegance] .story-heading h2{font-style:italic;font-size:clamp(40px,5vw,76px)} body[data-style=elegance] .story-images{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);gap:8%;align-items:center} body[data-style=elegance] .story-images figure:nth-child(2){margin-top:160px} body[data-style=elegance] .story-images img{height:640px;border-radius:0} body[data-style=elegance] .story-images figure:nth-child(2) img{height:400px} body[data-style=elegance] .story-images figcaption{font-family:var(--heading);font-size:14px} body[data-style=elegance] .team-heading{display:flex;justify-content:space-between;align-items:end;gap:8%;max-width:none;border-bottom:1px solid var(--line);padding-bottom:25px;margin-bottom:38px} body[data-style=elegance] .team-heading h2{font-size:clamp(36px,3.8vw,58px);max-width:15ch;font-style:italic;margin:0} body[data-style=elegance] .team-heading>p{max-width:35ch} body[data-style=elegance] .team-grid{gap:45px 27px;align-items:start} body[data-style=elegance] .team-member:nth-child(even){padding-top:55px} body[data-style=elegance] .team-member img{height:285px;object-fit:contain;background:var(--soft);border-radius:0} body[data-style=elegance] .team-member h3{font:600 26px/1.15 var(--heading);margin-top:20px} body[data-style=elegance] .team-member p{font-size:12px;margin-top:9px} body[data-style=elegance] .action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:70px 10%} body[data-style=elegance] .action-card:nth-child(even){padding-top:85px} body[data-style=elegance] .action-card>img{height:390px;background:var(--paper);border-radius:0} body[data-style=elegance] .action-card h3{font:600 30px/1.2 var(--heading)} body[data-style=elegance] .news-feature{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:12%;padding-top:45px;border-top:1px solid var(--ink)} body[data-style=elegance] .commerce-news-head h2{font-size:clamp(37px,4vw,59px);font-style:italic} body[data-style=elegance] .news-images img{height:480px;background:var(--paper)} body[data-style=elegance] .booking{grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--paper);color:var(--ink);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);gap:12%;padding-top:90px;padding-bottom:90px} body[data-style=elegance] .booking h2{font-size:clamp(44px,5vw,76px);font-style:italic;max-width:13ch} body[data-style=elegance] .local-booking{padding:35px 0;background:var(--paper);color:var(--ink);border-radius:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)} body[data-style=elegance] .local-booking h3{font-size:34px;font-style:italic} body[data-style=elegance] .contact{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);border-top:0;gap:10%} body[data-style=elegance] .contact h2{font-size:clamp(43px,5.5vw,84px);font-style:italic;max-width:13ch} body[data-style=elegance] .contact address{font-size:14px;line-height:1.8} body[data-style=elegance] .site-footer{background:var(--ink);color:var(--paper);border-top:0;min-height:150px;padding-top:35px;padding-bottom:35px} body[data-style=elegance] .site-footer>p{font:600 28px/1.25 var(--heading);max-width:20ch} body[data-style=elegance] .site-footer .signatureCrafteno{font:12px var(--body)} /* NATUREL — journal de gestes et de matières : une grande verticale, un détail * photographique plus intime, puis un rythme de lecture décalé et des arches. * Les courbes encadrent des photographies entières ; elles ne détournent pas un sujet. */ body[data-style=naturel] .site-header{flex-direction:row-reverse;border-bottom:0;padding-inline:6%;background:var(--paper)} body[data-style=naturel] .shop-brand{font-size:27px;gap:9px;max-width:34%} body[data-style=naturel] .site-header nav{gap:25px;font-size:13px} body[data-style=naturel] .site-header .nav-book{background:transparent;color:var(--ink);padding:0;border-radius:0;border-bottom:1px solid var(--accent)} body[data-style=naturel] .action{border-radius:30px;padding:15px 29px;min-height:57px;font-size:14px;font-weight:500;gap:28px} body[data-style=naturel] .action svg{transition:transform .45s cubic-bezier(.16,1,.3,1)} body[data-style=naturel] .action:hover svg{transform:translateX(5px)} .botanical-journal.hero-naturel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:4% 10%;padding:36px 6% 26px;max-width:1800px;background:var(--paper);border-radius:0;overflow:visible} .botanical-copy{min-width:0;padding-top:33px;align-self:center} .botanical-journal h1{font-size:clamp(52px,6.3vw,96px);font-weight:500;line-height:.99;letter-spacing:-.03em;max-width:11ch;text-wrap:balance} .botanical-copy>.hero-description{font-size:17px;max-width:35ch;line-height:1.8;margin:28px 0 30px} .botanical-portrait{height:650px;overflow:hidden;border-radius:46% 46% 0 0;align-self:start} .botanical-portrait img{object-position:center} .botanical-bottom{display:flex;align-items:end;gap:28px;margin-top:45px} .botanical-detail{height:155px;width:140px;flex:none;overflow:hidden;border-radius:0} .botanical-bottom .text-link{max-width:13ch;font-size:14px;line-height:1.5;border-bottom:1px solid var(--accent);font-weight:500} .botanical-address{grid-column:2;max-width:40ch;font-size:12px;line-height:1.7;padding-top:3px} body[data-style=naturel] .section{padding-top:105px;padding-bottom:105px} body[data-style=naturel] .section-heading{align-items:start;gap:14%;padding-bottom:32px;border-bottom:1px solid var(--line);margin-bottom:48px} body[data-style=naturel] .section-heading h2{font-size:clamp(42px,4.8vw,70px);max-width:15ch;font-weight:500} body[data-style=naturel] .section-description{max-width:33ch;padding-top:10px;font-size:14px;line-height:1.8} body[data-style=naturel] .service-list{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:55px 10%;align-items:start} body[data-style=naturel] .service:first-child{grid-row:span 2} body[data-style=naturel] .service:nth-child(2){padding-top:30px} body[data-style=naturel] .service-image{height:260px;border-radius:0} body[data-style=naturel] .service:first-child .service-image{height:620px;border-radius:48% 48% 0 0} body[data-style=naturel] .service-copy{padding-top:22px} body[data-style=naturel] .service h3{font:500 clamp(28px,3vw,39px)/1.15 var(--heading)} body[data-style=naturel] .service-copy p{font-size:14px;line-height:1.8;max-width:40ch;margin:14px 0} body[data-style=naturel] .service-book{font-size:12px;font-weight:500;border-bottom:1px solid var(--accent)} body[data-style=naturel] .about{max-width:none;background:var(--soft);grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:14%;padding-top:100px;padding-bottom:100px;border-radius:0 0 0 130px} body[data-style=naturel] .about-photo{height:560px;overflow:visible} body[data-style=naturel] .about-photo img{height:calc(100% - 36px);border-radius:45% 45% 0 0} body[data-style=naturel] .about-photo figcaption{font-size:12px;margin-top:5px} body[data-style=naturel] .about-copy{max-width:53ch} body[data-style=naturel] .about-copy h2{font-size:clamp(43px,5.4vw,78px);font-weight:500;max-width:12ch;margin-bottom:35px} body[data-style=naturel] .about-copy>p{font-size:16px;line-height:1.9} body[data-style=naturel] .about-copy .text-link{font-size:13px;font-weight:500;margin-top:24px} body[data-style=naturel] .story-heading{display:grid;grid-template-columns:1fr .8fr;gap:14%;max-width:none;margin-bottom:55px;align-items:end} body[data-style=naturel] .story-heading h2{font-size:clamp(45px,5.4vw,80px);font-weight:500;max-width:14ch;margin:0} body[data-style=naturel] .story-heading p{font-size:13px;max-width:38ch} body[data-style=naturel] .story-images{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:12%} body[data-style=naturel] .story-images figure:nth-child(2){margin-top:0} body[data-style=naturel] .story-images img{height:450px;border-radius:0} body[data-style=naturel] .story-images figure:nth-child(2) img{height:650px;border-radius:0 0 42% 42%} body[data-style=naturel] .story-images figcaption{font-size:12px;margin-top:15px} body[data-style=naturel] .team{border-top:1px solid var(--line)} body[data-style=naturel] .team-heading{max-width:720px;margin:0 auto 55px;text-align:center} body[data-style=naturel] .team-heading h2{font-size:clamp(43px,4.7vw,68px);font-weight:500;margin-bottom:25px} body[data-style=naturel] .team-heading p{max-width:48ch;margin:auto} body[data-style=naturel] .team-grid{gap:50px 40px} body[data-style=naturel] .team-member img{height:260px;border-radius:45% 45% 0 0;object-fit:contain;background:var(--soft)} body[data-style=naturel] .team-member:nth-child(even){padding-top:45px} body[data-style=naturel] .team-member h3{font:500 30px/1.15 var(--heading);margin-top:23px} body[data-style=naturel] .team-member p{font-size:12px;margin-top:10px;line-height:1.65} body[data-style=naturel] .commerce-news-head h2{font-size:clamp(40px,4.7vw,68px);font-weight:500;max-width:15ch} body[data-style=naturel] .action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:55px 12%;align-items:start} body[data-style=naturel] .action-card:nth-child(even){padding-top:100px} body[data-style=naturel] .action-card>img{height:420px;border-radius:42% 42% 0 0;background:var(--paper)} body[data-style=naturel] .action-card h3{font:500 34px/1.2 var(--heading)} body[data-style=naturel] .action-card p{font-size:15px;line-height:1.85} body[data-style=naturel] .news-feature{grid-template-columns:1fr;gap:50px;max-width:1050px;margin:auto} body[data-style=naturel] .news-feature>.commerce-news-head{max-width:720px;margin:auto;text-align:center} body[data-style=naturel] .news-feature .commerce-news-head h2{max-width:none} body[data-style=naturel] .news-feature .commerce-news-head>p{margin:auto;max-width:53ch} body[data-style=naturel] .news-feature .service-book{margin-top:20px} body[data-style=naturel] .news-images{gap:36px} body[data-style=naturel] .news-images img{height:440px;background:var(--paper)} body[data-style=naturel] .news-images:has(>figure:only-child){max-width:78%;margin:auto;width:100%} body[data-style=naturel] .news-images:has(>figure:only-child) img{height:520px;border-radius:45% 45% 0 0} body[data-style=naturel] .booking{background:var(--soft);color:var(--ink);grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:13%;border-radius:130px 0 0 0} body[data-style=naturel] .booking h2{font-size:clamp(45px,5.2vw,78px);font-weight:500;max-width:13ch;margin-bottom:35px} body[data-style=naturel] .booking-intro>p{font-size:14px;line-height:1.9} body[data-style=naturel] .local-booking{padding:40px;background:var(--paper);color:var(--ink);border-radius:0} body[data-style=naturel] .local-booking h3{font-size:36px;font-weight:500} body[data-style=naturel] .contact{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:18%;border-top:0} body[data-style=naturel] .contact h2{font-size:clamp(46px,5.1vw,76px);font-weight:500;max-width:14ch} body[data-style=naturel] .contact address{font-size:15px;line-height:1.85} body[data-style=naturel] .contact>.action{border-radius:30px} body[data-style=naturel] .site-footer{background:var(--soft);border-top:0;padding-block:40px;min-height:135px;gap:35px} body[data-style=naturel] .site-footer>p{font:500 30px/1.2 var(--heading);max-width:25ch} /* ESSENTIEL — l'adresse nette : titre affirmé, menu de prestations comme contenu, * photographie panoramique et alignements de lecture. La densité vient des vraies * informations, jamais de chiffres décoratifs ou d'une simulation de tableau de bord. */ body[data-style=essentiel] .site-header{background:var(--ink);color:var(--paper);border-bottom:0;padding-inline:5%} body[data-style=essentiel] .shop-brand{font-weight:750;font-size:22px;letter-spacing:-.035em;gap:10px} body[data-style=essentiel] .shop-symbol{font-weight:750;font-size:28px} body[data-style=essentiel] .site-header nav{font-size:12px;gap:25px;font-weight:600} body[data-style=essentiel] .site-header .nav-book{background:var(--paper);color:var(--ink);border-radius:0;min-height:44px;padding:11px 17px} body[data-style=essentiel] .site-header a:focus-visible,body[data-style=essentiel] .site-header button:focus-visible{outline-color:var(--paper)} body[data-style=essentiel] .action{border-radius:0;background:var(--accent);color:var(--contrast);font-size:13px;font-weight:650;padding:15px 22px;gap:30px;min-height:52px} body[data-style=essentiel] .action svg{transition:transform .2s cubic-bezier(.16,1,.3,1)} body[data-style=essentiel] .action:hover svg{transform:translateX(5px)} .swiss-address.hero-essentiel{display:block;padding:50px 5% 0;max-width:1800px;border-bottom:1px solid var(--ink)} .swiss-lead{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:12%;align-items:end;padding-bottom:44px} .swiss-address h1{font:750 clamp(46px,5.5vw,84px)/1.04 var(--heading);letter-spacing:-.04em;max-width:16ch} .swiss-lead .hero-description{font-size:16px;line-height:1.75;max-width:35ch;padding-bottom:4px} .swiss-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-bottom:24px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)} .swiss-menu>a{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:94px;padding:20px 25px 20px 0;text-decoration:none;font-size:clamp(19px,1.8vw,27px);font-weight:650;line-height:1.25} .swiss-menu>a:not(:first-child){padding-left:25px;border-left:1px solid var(--line)} .swiss-menu>a svg{width:25px;height:25px;transition:transform .2s cubic-bezier(.16,1,.3,1)} .swiss-menu>a:hover{color:var(--accent)} .swiss-menu>a:hover svg{transform:translate(4px,-4px)} .swiss-panorama{height:245px;overflow:hidden} .swiss-panorama img{object-position:center 50%} .swiss-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:24px 0} .swiss-bottom>p{font-size:13px;line-height:1.65;max-width:55ch} .swiss-bottom>.action{flex:none} body[data-style=essentiel] .section{padding:75px 5%} body[data-style=essentiel] .services{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:20px 10%;padding-top:80px;padding-bottom:80px;border-bottom:1px solid var(--line)} body[data-style=essentiel] .section-heading{display:block;margin:0;border:0} body[data-style=essentiel] .section-heading h2{font-size:clamp(37px,4vw,58px);font-weight:700;max-width:13ch;line-height:1.08;margin-bottom:23px} body[data-style=essentiel] .section-description{font-size:14px;line-height:1.8;max-width:34ch;margin:0} body[data-style=essentiel] .service-list{display:block;min-width:0} body[data-style=essentiel] .service{display:grid;grid-template-columns:105px minmax(0,1fr);gap:23px;padding:25px 0;border-top:1px solid var(--ink);border-bottom:0} body[data-style=essentiel] .service:first-child{padding-top:0;border-top:0} body[data-style=essentiel] .service-image{height:120px;align-self:start;border-radius:0} body[data-style=essentiel] .service-copy{padding:0;min-width:0} body[data-style=essentiel] .service h3{font:650 27px/1.15 var(--heading);letter-spacing:-.025em} body[data-style=essentiel] .service-copy p{font-size:14px;line-height:1.75;margin:12px 0;max-width:46ch} body[data-style=essentiel] .service-book{font-size:12px;line-height:1.5;min-height:44px;max-width:100%;font-weight:600} body[data-style=essentiel] .services>.small-note{grid-column:2;margin-top:0;font-size:12px} body[data-style=essentiel] .about{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:10%;background:var(--paper)} body[data-style=essentiel] .about-photo{height:430px} body[data-style=essentiel] .about-photo img{height:calc(100% - 32px);border-radius:0} body[data-style=essentiel] .about-photo figcaption{font-size:12px} body[data-style=essentiel] .about-copy h2{font-size:clamp(38px,3.8vw,56px);max-width:15ch;margin-bottom:23px;line-height:1.08} body[data-style=essentiel] .about-copy>p{font-size:15px;line-height:1.85;max-width:45ch} body[data-style=essentiel] .about-copy .text-link{border-bottom:1px solid var(--accent);font-size:13px;font-weight:600} body[data-style=essentiel] .photo-story{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:10%;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} body[data-style=essentiel] .story-heading{margin:0;max-width:none} body[data-style=essentiel] .story-heading h2{font-size:clamp(38px,4vw,58px);font-weight:700;max-width:13ch;margin-bottom:25px} body[data-style=essentiel] .story-heading p{font-size:13px;line-height:1.8;max-width:34ch} body[data-style=essentiel] .story-images{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start} body[data-style=essentiel] .story-images img{height:300px;border-radius:0} body[data-style=essentiel] .story-images figure:nth-child(2){margin:0} body[data-style=essentiel] .story-images figcaption{font-size:12px;margin-top:14px} body[data-style=essentiel] .team{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:10%} body[data-style=essentiel] .team-heading{max-width:none;margin:0} body[data-style=essentiel] .team-heading h2{font-size:clamp(38px,4vw,58px);max-width:13ch;margin-bottom:25px} body[data-style=essentiel] .team-heading p{font-size:13px;line-height:1.8;max-width:34ch} body[data-style=essentiel] .team-grid{display:block;min-width:0} body[data-style=essentiel] .team-member{display:grid;grid-template-columns:70px minmax(0,.8fr) minmax(0,1.2fr);gap:20px;align-items:center;padding:20px 0;border-top:1px solid var(--line)} body[data-style=essentiel] .team-member:first-child{border-top:0;padding-top:0} body[data-style=essentiel] .team-member img,body[data-style=essentiel] .member-initials{height:82px;width:70px;border-radius:0;object-fit:contain;font-size:26px} body[data-style=essentiel] .team-member h3{font:650 22px/1.2 var(--heading);margin:0} body[data-style=essentiel] .team-member p{font-size:13px;line-height:1.6;margin:0} /* Le nouveau portrait possède son propre cadre et ses textes sont groupés : * cette adaptation conserve le dessin de liste, sans imposer le rendu d'une carte. */ body[data-style=essentiel] .team-member:has(>.team-portrait){grid-template-columns:70px minmax(0,1fr)} body[data-style=essentiel] .team-member>.team-portrait{width:70px;min-width:0} body[data-style=essentiel] .team-member>.team-person-copy{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:15px;align-items:center;min-width:0} body[data-style=essentiel] .team-member>.team-person-copy h3,body[data-style=essentiel] .team-member>.team-person-copy p{grid-column:auto} body[data-style=essentiel] .team-profile-link{grid-column:2} body[data-style=essentiel] .team-collective{grid-column:2} body[data-style=essentiel] .commerce-news{border-top:1px solid var(--line)} body[data-style=essentiel] .commerce-news-head h2{font-size:clamp(37px,3.8vw,56px);font-weight:700} body[data-style=essentiel] .action-grid{display:block;margin-top:35px} body[data-style=essentiel] .action-card{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:8%;align-items:center;padding:30px 0;border-top:1px solid var(--line)} body[data-style=essentiel] .action-card:first-child{padding-top:0;border-top:0} body[data-style=essentiel] .action-card>img{height:230px;border-radius:0;background:var(--paper)} body[data-style=essentiel] .action-card>div{padding:0} body[data-style=essentiel] .action-card h3{font:650 29px/1.18 var(--heading)} body[data-style=essentiel] .action-card p{font-size:15px;max-width:60ch;line-height:1.85} body[data-style=essentiel] .news-feature{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:10%;padding:0;background:var(--paper);border-radius:0} body[data-style=essentiel] .news-feature .commerce-news-head>p{font-size:15px;line-height:1.85} body[data-style=essentiel] .news-images img{height:340px;background:var(--paper)} body[data-style=essentiel] .booking{margin:0;max-width:none;border-radius:0;background:var(--accent);color:var(--contrast);grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:10%;padding-top:80px;padding-bottom:80px} body[data-style=essentiel] .booking h2{font-size:clamp(43px,4.7vw,70px);font-weight:750;max-width:15ch;letter-spacing:-.04em} body[data-style=essentiel] .booking-intro>p{font-size:14px;line-height:1.85} body[data-style=essentiel] .local-booking{padding:35px;background:var(--paper);color:var(--ink);border-radius:0} body[data-style=essentiel] .local-booking h3{font-size:30px;font-weight:650} body[data-style=essentiel] .local-booking .action{background:var(--ink);color:var(--paper);border-color:var(--ink)} body[data-style=essentiel] .contact{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:10%;border-top:0} body[data-style=essentiel] .contact h2{font-size:clamp(40px,4.5vw,67px);font-weight:750;max-width:14ch;line-height:1.05} body[data-style=essentiel] .contact address{font-size:15px;line-height:1.85} body[data-style=essentiel] .site-footer{border-top:1px solid var(--ink);padding:24px 5%;gap:25px;min-height:100px;font-size:12px} body[data-style=essentiel] .site-footer>p{font-weight:650;max-width:35ch} /* TABLETTE — les changements de composition suivent le contenu, sans cacher * une photographie ni supprimer une information configurable à un seuil arbitraire. */ @media(max-width:1100px){ body[data-style=elegance] .site-header nav{gap:21px} .edition-photography{height:560px}.editorial-elegance h1{font-size:clamp(44px,6vw,70px)} body[data-style=elegance] .service-image{height:360px} body[data-style=elegance] .about-photo{height:500px} body[data-style=elegance] .story-images img{height:510px} body[data-style=elegance] .story-images figure:nth-child(2) img{height:340px} body[data-style=elegance] .team-member img{height:230px} body[data-style=naturel] .site-header nav{gap:15px;font-size:12px} body[data-style=naturel] .shop-brand{font-size:23px} .botanical-journal.hero-naturel{gap:4% 7%;padding-top:20px}.botanical-portrait{height:580px} .botanical-journal h1{font-size:clamp(46px,6.2vw,78px)} body[data-style=naturel] .service:first-child .service-image{height:550px} body[data-style=naturel] .service-image{height:235px} body[data-style=naturel] .team-grid{gap:38px 25px} body[data-style=naturel] .team-member img{height:220px} body[data-style=essentiel] .site-header nav{gap:15px;font-size:12px} .swiss-lead{gap:7%;grid-template-columns:1.3fr .7fr}.swiss-menu>a{font-size:21px;padding-right:18px} .swiss-menu>a:not(:first-child){padding-left:18px} body[data-style=essentiel] .services,body[data-style=essentiel] .photo-story,body[data-style=essentiel] .team{gap:7%;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)} body[data-style=essentiel] .service{grid-template-columns:80px minmax(0,1fr);gap:18px} body[data-style=essentiel] .service-image{height:105px} body[data-style=essentiel] .service h3{font-size:24px} body[data-style=essentiel] .team-member{grid-template-columns:65px minmax(0,1fr);gap:10px 18px} body[data-style=essentiel] .team-member img,body[data-style=essentiel] .member-initials{grid-row:span 2;width:65px;height:78px} body[data-style=essentiel] .team-member p{grid-column:2} body[data-style=essentiel] .team-member:has(>.team-portrait){grid-template-columns:65px minmax(0,1fr)} body[data-style=essentiel] .team-member>.team-portrait{width:65px;grid-row:span 2} body[data-style=essentiel] .team-member>.team-person-copy{display:block} body[data-style=essentiel] .team-member>.team-person-copy p{margin-top:7px} } /* TÉLÉPHONE — trois silhouettes subsistent : la double page Élégance devient * une couverture photographique ; Naturel conserve son arche et son détail ; * Essentiel conserve son menu direct et son panorama. Aucun carrousel obligatoire. */ @media(max-width:760px){ body[data-style=elegance]{--shell:104px} body[data-style=elegance][data-merchant=true]{--shell:72px} body[data-style=elegance] .site-header{height:72px;min-height:72px;flex-direction:row;justify-content:space-between;padding:8px 5%;gap:15px} body[data-style=elegance] .shop-brand{max-width:70%;font-size:20px} body[data-style=elegance] .shop-symbol{font-size:24px} body[data-style=elegance] .site-header nav{gap:8px;padding:18px 5% 24px} body[data-style=elegance] .site-header nav>a{min-height:48px;font-size:15px} body[data-style=elegance] .site-header .nav-book{padding:12px;border:1px solid var(--ink)} body[data-style=elegance] .menu-toggle{border-radius:0;background:var(--paper);color:var(--ink);border-color:var(--ink)} .editorial-elegance.hero-elegance{grid-template-columns:1fr;padding:0 6%;gap:0} .edition-intro{padding:34px 0 29px} .editorial-elegance h1{font-size:clamp(39px,10.8vw,58px);max-width:12ch;line-height:1.05} .editorial-elegance .hero-description{font-size:15px;line-height:1.75;margin-top:20px;max-width:38ch} .edition-action{margin-top:20px;max-width:none} .edition-action .action{min-width:0;width:100%;max-width:280px} .edition-photography{height:360px;margin:0 0 18px;grid-row:2} .edition-address{font-size:12px;padding:0 0 16px;grid-column:1} .edition-signature{justify-self:start;text-align:left;font-size:29px;max-width:none;padding-bottom:24px} body[data-style=elegance] .section{padding:60px 6%} body[data-style=elegance] .section-heading{grid-template-columns:1fr;gap:20px;padding-bottom:25px;margin-bottom:34px} body[data-style=elegance] .section-heading h2{font-size:39px;max-width:16ch} body[data-style=elegance] .section-description{font-size:13px;padding:0;max-width:47ch} body[data-style=elegance] .service-list{gap:48px} body[data-style=elegance] .service,body[data-style=elegance] .service:nth-child(even){grid-template-columns:1fr;gap:23px} body[data-style=elegance] .service:nth-child(even) .service-image,body[data-style=elegance] .service:nth-child(even) .service-copy{grid-column:1;grid-row:auto} body[data-style=elegance] .service-image{height:330px} body[data-style=elegance] .service-copy{max-width:none} body[data-style=elegance] .service h3{font-size:33px} body[data-style=elegance] .service-copy p{font-size:14px;margin:15px 0} body[data-style=elegance] .service-book{font-size:12px;letter-spacing:.04em;line-height:1.6} body[data-style=elegance] .about{grid-template-columns:1fr;gap:32px} body[data-style=elegance] .about-photo{height:405px} body[data-style=elegance] .about-copy h2{font-size:40px;max-width:14ch;margin-bottom:25px} body[data-style=elegance] .about-copy>p{font-size:14px} body[data-style=elegance] .story-heading{max-width:none;margin-bottom:30px} body[data-style=elegance] .story-heading h2{font-size:42px} body[data-style=elegance] .story-images{grid-template-columns:minmax(0,1fr);gap:32px} body[data-style=elegance] .story-images img{height:405px} body[data-style=elegance] .story-images figure:nth-child(2){margin:0 0 0 18%;width:82%} body[data-style=elegance] .story-images figure:nth-child(2) img{height:310px} body[data-style=elegance] .team-heading{display:block;max-width:none;padding-bottom:25px;margin-bottom:32px} body[data-style=elegance] .team-heading h2{font-size:38px;max-width:16ch;margin-bottom:20px} body[data-style=elegance] .team-heading>p{max-width:45ch;font-size:12px} body[data-style=elegance] .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px} body[data-style=elegance] .team-member img{height:205px} body[data-style=elegance] .team-member:nth-child(even){padding-top:35px} body[data-style=elegance] .team-member h3{font-size:23px;margin-top:16px} body[data-style=elegance] .team-member p{font-size:12px} body[data-style=elegance] .action-grid{grid-template-columns:1fr;gap:38px} body[data-style=elegance] .action-card:nth-child(even){padding-top:0} body[data-style=elegance] .action-card>img{height:340px} body[data-style=elegance] .single-action .action-card{display:block} body[data-style=elegance] .action-card h3{font-size:29px} body[data-style=elegance] .news-feature{grid-template-columns:1fr;gap:32px;padding-top:30px} body[data-style=elegance] .commerce-news-head h2{font-size:38px} body[data-style=elegance] .news-images img{height:350px} body[data-style=elegance] .booking{grid-template-columns:1fr;gap:32px;padding:60px 6%} body[data-style=elegance] .booking h2{font-size:43px;max-width:14ch} body[data-style=elegance] .booking-intro>p{font-size:13px} body[data-style=elegance] .local-booking{padding:28px 0} body[data-style=elegance] .local-booking .action{width:100%;min-width:0} body[data-style=elegance] .contact{grid-template-columns:1fr;gap:30px} body[data-style=elegance] .contact h2{font-size:45px;max-width:14ch} body[data-style=elegance] .contact>.action{grid-column:1;min-width:0;width:100%} body[data-style=elegance] .site-footer{display:block;padding:32px 6% 100px;min-height:0} body[data-style=elegance] .site-footer>p{font-size:28px;margin-bottom:20px;max-width:20ch} body[data-style=elegance] .site-footer>a{display:flex;margin-top:6px} body[data-style=elegance] .booking-dock{border-radius:0;background:var(--ink);color:var(--paper);box-shadow:none} body[data-style=naturel] .site-header{height:72px;flex-direction:row-reverse;padding-inline:6%;gap:15px} body[data-style=naturel] .shop-brand{font-size:21px;max-width:70%} body[data-style=naturel] .menu-toggle{border:0;border-bottom:1px solid var(--accent);border-radius:0;padding-inline:0;background:var(--paper)} body[data-style=naturel] .site-header nav{padding:18px 6% 24px;gap:8px} body[data-style=naturel] .site-header nav>a{font-size:15px} body[data-style=naturel] .site-header .nav-book{padding:11px 0;border-bottom:1px solid var(--accent)} .botanical-journal.hero-naturel{grid-template-columns:minmax(0,1fr);gap:28px;padding:29px 6% 24px;overflow:hidden} .botanical-copy{padding:0} .botanical-journal h1{font-size:clamp(48px,12vw,65px);max-width:13ch;line-height:.99} .botanical-copy>.hero-description{font-size:15px;line-height:1.8;max-width:38ch;margin:24px 0 25px} .botanical-bottom{gap:24px;margin-top:29px} .botanical-detail{width:105px;height:128px} .botanical-bottom .text-link{font-size:13px} .botanical-portrait{height:395px;width:90%;justify-self:end;border-radius:46% 46% 0 0} .botanical-address{grid-column:1;max-width:45ch;padding-top:0;font-size:12px} body[data-style=naturel] .section{padding:64px 6%} body[data-style=naturel] .section-heading{display:block;padding-bottom:25px;margin-bottom:35px} body[data-style=naturel] .section-heading h2{font-size:42px;max-width:16ch} body[data-style=naturel] .section-description{font-size:13px;padding:0;margin-top:20px;max-width:45ch} body[data-style=naturel] .service-list{grid-template-columns:1fr;gap:38px} body[data-style=naturel] .service:first-child{grid-row:auto} body[data-style=naturel] .service:nth-child(2){padding-top:0;width:84%;margin-left:auto} body[data-style=naturel] .service-image{height:275px} body[data-style=naturel] .service:first-child .service-image{height:420px} body[data-style=naturel] .service h3{font-size:33px} body[data-style=naturel] .service-copy p{font-size:14px} body[data-style=naturel] .about{grid-template-columns:1fr;gap:35px;border-radius:0 0 0 75px;padding:65px 6%} body[data-style=naturel] .about-photo{height:420px;width:90%;margin:auto} body[data-style=naturel] .about-copy h2{font-size:44px;max-width:13ch;margin-bottom:25px} body[data-style=naturel] .about-copy>p{font-size:15px} body[data-style=naturel] .story-heading{grid-template-columns:1fr;gap:25px;margin-bottom:35px} body[data-style=naturel] .story-heading h2{font-size:44px} body[data-style=naturel] .story-images{grid-template-columns:1fr;gap:35px} body[data-style=naturel] .story-images figure:first-child{width:85%} body[data-style=naturel] .story-images img{height:315px} body[data-style=naturel] .story-images figure:nth-child(2){width:90%;margin-left:auto} body[data-style=naturel] .story-images figure:nth-child(2) img{height:430px} body[data-style=naturel] .team-heading{margin-bottom:35px;text-align:left} body[data-style=naturel] .team-heading h2{font-size:42px;max-width:16ch} body[data-style=naturel] .team-heading p{font-size:12px;max-width:45ch;margin:0} body[data-style=naturel] .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px} body[data-style=naturel] .team-member img{height:205px} body[data-style=naturel] .team-member:nth-child(even){padding-top:40px} body[data-style=naturel] .team-member h3{font-size:27px;margin-top:17px} body[data-style=naturel] .team-member p{font-size:12px} body[data-style=naturel] .commerce-news-head h2{font-size:43px;max-width:16ch} body[data-style=naturel] .action-grid{grid-template-columns:1fr;gap:40px} body[data-style=naturel] .action-card:nth-child(even){padding-top:0;width:88%;margin-left:auto} body[data-style=naturel] .action-card>img{height:390px} body[data-style=naturel] .single-action .action-card{display:block} body[data-style=naturel] .action-card h3{font-size:32px} body[data-style=naturel] .action-card p{font-size:14px} body[data-style=naturel] .news-feature{gap:35px} body[data-style=naturel] .news-feature>.commerce-news-head{text-align:left} body[data-style=naturel] .news-feature .commerce-news-head>p{font-size:14px;margin:0} body[data-style=naturel] .news-images img{height:290px} body[data-style=naturel] .news-images:has(>figure:only-child){max-width:92%;margin:0 0 0 auto} body[data-style=naturel] .news-images:has(>figure:only-child) img{height:390px} body[data-style=naturel] .booking{grid-template-columns:1fr;gap:35px;border-radius:75px 0 0 0;padding:68px 6%} body[data-style=naturel] .booking h2{font-size:45px;max-width:15ch} body[data-style=naturel] .booking-intro>p{font-size:13px} body[data-style=naturel] .local-booking{padding:28px} body[data-style=naturel] .local-booking h3{font-size:32px} body[data-style=naturel] .local-booking .action{padding-inline:22px} body[data-style=naturel] .contact{grid-template-columns:1fr;gap:30px} body[data-style=naturel] .contact h2{font-size:45px;max-width:15ch} body[data-style=naturel] .contact>.action{grid-column:1;justify-self:start} body[data-style=naturel] .site-footer{display:block;padding:35px 6% 105px} body[data-style=naturel] .site-footer>p{font-size:30px;margin-bottom:22px;max-width:20ch} body[data-style=naturel] .site-footer>a{display:flex;margin-top:8px} body[data-style=naturel] .booking-dock{border-radius:30px;box-shadow:none;left:20px;right:20px} body[data-style=essentiel] .site-header{height:72px;padding:7px 5%;gap:14px} body[data-style=essentiel] .shop-brand{max-width:72%;font-size:19px} body[data-style=essentiel] .shop-symbol{font-size:24px} body[data-style=essentiel] .menu-toggle{border-color:var(--paper);border-radius:0;background:var(--ink);color:var(--paper)} body[data-style=essentiel] .site-header nav{background:var(--ink);color:var(--paper);padding:18px 5% 24px;gap:8px;border-bottom-color:var(--paper)} body[data-style=essentiel] .site-header nav>a{font-size:15px} .swiss-address.hero-essentiel{display:block;padding:30px 5% 0} .swiss-lead{grid-template-columns:1fr;gap:20px;padding-bottom:28px} .swiss-address h1{font-size:clamp(39px,10.9vw,58px);max-width:16ch;line-height:1.04} .swiss-lead .hero-description{font-size:14px;max-width:42ch;padding:0} .swiss-menu{grid-template-columns:1fr;margin-bottom:21px} .swiss-menu>a,.swiss-menu>a:not(:first-child){min-height:64px;border-left:0;padding:15px 0;font-size:21px;gap:20px} .swiss-menu>a:not(:first-child){border-top:1px solid var(--line)} .swiss-menu>a svg{width:23px;height:23px} .swiss-panorama{height:185px} .swiss-bottom{display:block;padding:23px 0} .swiss-bottom>p{font-size:12px;margin-bottom:17px;max-width:45ch} .swiss-bottom>.action{width:100%;justify-content:space-between} body[data-style=essentiel] .section{padding:55px 5%} body[data-style=essentiel] .services{grid-template-columns:1fr;gap:32px;padding-top:55px;padding-bottom:55px} body[data-style=essentiel] .section-heading h2{font-size:37px;max-width:17ch;margin-bottom:20px} body[data-style=essentiel] .section-description{font-size:13px;max-width:45ch} body[data-style=essentiel] .service{grid-template-columns:83px minmax(0,1fr);gap:17px;padding:24px 0} body[data-style=essentiel] .service-image{height:107px} body[data-style=essentiel] .service h3{font-size:23px} body[data-style=essentiel] .service-copy p{font-size:13px;margin:11px 0} body[data-style=essentiel] .service-book{font-size:12px;line-height:1.65;min-height:44px} body[data-style=essentiel] .services>.small-note{grid-column:1;font-size:12px} body[data-style=essentiel] .about{grid-template-columns:1fr;gap:28px} body[data-style=essentiel] .about-photo{height:320px} body[data-style=essentiel] .about-copy h2{font-size:37px;max-width:16ch} body[data-style=essentiel] .about-copy>p{font-size:14px} body[data-style=essentiel] .photo-story{grid-template-columns:1fr;gap:30px} body[data-style=essentiel] .story-heading h2{font-size:38px;max-width:16ch;margin-bottom:20px} body[data-style=essentiel] .story-heading p{font-size:13px;max-width:45ch} body[data-style=essentiel] .story-images{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px} body[data-style=essentiel] .story-images img{height:205px} body[data-style=essentiel] .story-images figcaption{font-size:12px;line-height:1.6;margin-top:10px} body[data-style=essentiel] .team{grid-template-columns:1fr;gap:30px} body[data-style=essentiel] .team-heading h2{font-size:38px;max-width:16ch;margin-bottom:20px} body[data-style=essentiel] .team-heading p{font-size:13px;max-width:45ch} body[data-style=essentiel] .team-member{grid-template-columns:65px minmax(0,1fr);gap:8px 20px;padding:20px 0} body[data-style=essentiel] .team-member img,body[data-style=essentiel] .member-initials{grid-row:span 2;width:65px;height:78px} body[data-style=essentiel] .team-member h3{font-size:23px} body[data-style=essentiel] .team-member p{grid-column:2;font-size:12px} body[data-style=essentiel] .team-collective{grid-column:1} body[data-style=essentiel] .commerce-news-head h2{font-size:37px;max-width:17ch} body[data-style=essentiel] .action-card{grid-template-columns:1fr;gap:23px;padding:28px 0} body[data-style=essentiel] .single-action .action-card{display:grid} body[data-style=essentiel] .action-card>img{height:285px} body[data-style=essentiel] .action-card h3{font-size:28px} body[data-style=essentiel] .action-card p{font-size:14px} body[data-style=essentiel] .news-feature{grid-template-columns:1fr;gap:30px} body[data-style=essentiel] .news-feature .commerce-news-head>p{font-size:14px} body[data-style=essentiel] .news-images img{height:280px} body[data-style=essentiel] .news-images:has(>figure:only-child) img{height:320px} body[data-style=essentiel] .booking{grid-template-columns:1fr;gap:32px;padding:55px 5%} body[data-style=essentiel] .booking h2{font-size:42px;max-width:16ch} body[data-style=essentiel] .booking-intro>p{font-size:13px} body[data-style=essentiel] .local-booking{padding:27px} body[data-style=essentiel] .local-booking h3{font-size:29px} body[data-style=essentiel] .contact{grid-template-columns:1fr;gap:28px} body[data-style=essentiel] .contact h2{font-size:41px;max-width:15ch} body[data-style=essentiel] .contact address{font-size:14px} body[data-style=essentiel] .contact>.action{grid-column:1;justify-content:space-between} body[data-style=essentiel] .site-footer{display:block;padding:28px 5% 100px} body[data-style=essentiel] .site-footer>p{font-size:15px;margin-bottom:17px} body[data-style=essentiel] .site-footer>a{display:flex;margin-top:5px} body[data-style=essentiel] .booking-dock{border-radius:0;box-shadow:none;left:0;right:0;bottom:0;padding-bottom:calc(17px + env(safe-area-inset-bottom));background:var(--ink);color:var(--paper)} } /* Les nouveaux contrôles apportent un retour rapide sans imposer de mouvement * aux personnes ayant activé la préférence de réduction des animations. */ @media(prefers-reduced-motion:reduce){ body[data-style=elegance] .action svg,body[data-style=naturel] .action svg,body[data-style=essentiel] .action svg,.swiss-menu>a svg{transition:color .15s linear;transform:none} } /* RITUEL — la photographie occupe la largeur, le titre découpe une plage de lecture. * Les surfaces opaques garantissent le contraste même avec une photo très claire. * Aucun contenu ne dépend d'une animation ou d'un masque pour devenir accessible. */ body[data-style=rituel]{--rituel-space:clamp(52px,8vw,124px)} body[data-style=rituel] .site-header{height:84px;padding-inline:6%;border-bottom:0} body[data-style=rituel] .shop-brand{font-family:'Taviraj',serif;font-size:23px;font-weight:600;letter-spacing:-.03em} body[data-style=rituel] .shop-symbol{font-family:'Taviraj',serif} body[data-style=rituel] .site-header nav{gap:27px;font-size:12px} body[data-style=rituel] .site-header .nav-book{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:0;padding:10px 18px} body[data-style=rituel] .action{border-radius:0;min-height:54px;padding:13px 0;background:none;border:0;border-bottom:1px solid currentColor;color:inherit;justify-content:space-between;gap:32px;transition:color 180ms ease} body[data-style=rituel] .action svg,body[data-style=rituel] .text-link svg{transition:transform 280ms cubic-bezier(.16,1,.3,1)} body[data-style=rituel] .action:hover{filter:none;color:var(--accent)} body[data-style=rituel] .action:hover svg,body[data-style=rituel] .text-link:hover svg{transform:translateX(7px)} body[data-style=rituel] h1,body[data-style=rituel] h2{font-family:'Taviraj',serif;font-weight:600;letter-spacing:-.035em} body[data-style=rituel] .hero-rituel.rituel-immersive{display:block;max-width:none;padding:0;background:var(--paper)} .rituel-stage{position:relative;margin:0 3%;padding-bottom:0} .rituel-image-canvas{height:clamp(400px,38vw,580px);margin:0;overflow:hidden} .rituel-image-canvas .main-photo{width:100%;height:100%;object-fit:cover;object-position:50% 57%} .rituel-title-surface{position:relative;margin:-112px 0 0 4%;padding:35px 40px 10px;width:min(68%,960px);background:var(--paper);color:var(--ink)} body[data-style=rituel] .rituel-title-surface h1{font-size:clamp(44px,5.4vw,86px);max-width:18ch;line-height:1.04} .rituel-reading-line{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.2fr) minmax(200px,.75fr);align-items:start;gap:4%;padding:30px 7% 42px} .rituel-reading-line .hero-description{font-size:15px;line-height:1.85;max-width:46ch;margin:0} .rituel-discover{font-size:12px;font-weight:500;align-self:end;max-width:19ch;line-height:1.6} .rituel-book{align-self:end;min-width:0} .rituel-book .action{width:100%;font-size:14px} /* Les prestations se lisent en triptyque décalé ; la deuxième image marque une pause. * La même structure fonctionne aussi avec davantage de prestations exportées. */ body[data-style=rituel] .section{padding-block:var(--rituel-space)} body[data-style=rituel] .services{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:8%;align-items:start;padding-inline:7%} body[data-style=rituel] .section-heading{display:block;position:sticky;top:calc(var(--shell) + 36px);margin:0} body[data-style=rituel] .section-heading h2{font-size:clamp(31px,3.2vw,50px);max-width:13ch;line-height:1.16} body[data-style=rituel] .section-description{font-size:14px;margin-top:24px;max-width:35ch;line-height:1.85} body[data-style=rituel] .service-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:70px 32px;align-items:start} body[data-style=rituel] .service:nth-child(2n){padding-top:110px} body[data-style=rituel] .service:nth-child(3n){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);align-items:center;gap:35px} body[data-style=rituel] .service-image{height:310px;border-radius:0;overflow:hidden} body[data-style=rituel] .service:nth-child(3n) .service-image{height:280px} body[data-style=rituel] .service-copy{padding-top:24px} body[data-style=rituel] .service h3{font-family:'Taviraj',serif;font-size:25px;font-weight:600;line-height:1.23} body[data-style=rituel] .service-copy p{font-size:14px;line-height:1.85;margin-top:13px} body[data-style=rituel] .service-book{font-size:12px;font-weight:500;min-height:48px;margin-top:5px} body[data-style=rituel] .about{max-width:none;background:var(--soft);grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr);gap:10%;padding-inline:10%;align-items:center} body[data-style=rituel] .about-photo{height:560px} body[data-style=rituel] .about-photo img{height:calc(100% - 35px);border-radius:0} body[data-style=rituel] .about-photo figcaption{font-size:12px} body[data-style=rituel] .about-copy{padding-block:36px} body[data-style=rituel] .about-copy h2{font-size:clamp(34px,3.7vw,59px);max-width:12ch;margin-bottom:30px} body[data-style=rituel] .about-copy>p{font-size:15px;line-height:1.9;max-width:43ch} body[data-style=rituel] .photo-story{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);column-gap:7%;padding-inline:7%} body[data-style=rituel] .story-heading{grid-column:2;grid-row:1;margin:0;padding-top:60px} body[data-style=rituel] .story-heading h2{font-size:clamp(35px,4vw,62px);max-width:12ch} body[data-style=rituel] .story-heading p{font-size:13px;line-height:1.8;margin-top:25px;max-width:32ch} body[data-style=rituel] .story-images{display:contents} body[data-style=rituel] .story-images figure:first-child{grid-column:1;grid-row:1/3;width:100%;margin:0} body[data-style=rituel] .story-images figure:first-child img{height:600px} body[data-style=rituel] .story-images figure:nth-child(2){grid-column:2;grid-row:2;width:100%;margin:45px 0 0} body[data-style=rituel] .story-images figure:nth-child(2) img{height:280px} body[data-style=rituel] .team{max-width:none;padding-inline:7%;border-block:1px solid var(--line)} body[data-style=rituel] .team-heading{display:block;max-width:650px;margin:0 auto 75px;text-align:center} body[data-style=rituel] .team-heading h2{max-width:18ch;margin:0 auto;font-size:clamp(34px,3.9vw,60px);line-height:1.15} body[data-style=rituel] .team-heading p{font-size:13px;line-height:1.85;max-width:48ch;margin:24px auto 0} /* Des duos de portraits forment des doubles pages, jamais une rangée de quatre. * La légende associe nom et rôle à la photographie ; le lien reste la vraie action. * Les lignes se répètent naturellement pour un, quatre ou huit membres affichés. */ body[data-style=rituel] .team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:90px 11%;max-width:1080px;margin:0 auto;align-items:start} body[data-style=rituel] .team-member{min-width:0;padding:0;border:0;margin:0} body[data-style=rituel] .team-member:only-child{grid-column:1/-1;justify-self:center;width:min(100%,520px)} body[data-style=rituel] .team-member>.team-portrait{width:100%;height:510px} body[data-style=rituel] .team-member>.team-person-copy{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:11px 20px;padding:27px 0 19px;align-items:start} body[data-style=rituel] .team-person-copy h3{grid-column:1;grid-row:1/3} body[data-style=rituel] .team-person-copy p{grid-column:2;grid-row:1} body[data-style=rituel] .team-person-copy .team-profile-link{grid-column:2;grid-row:2;padding-top:4px;gap:8px;font-size:12px;line-height:1.6} body[data-style=rituel] .team-member:nth-child(even){margin-top:160px} body[data-style=rituel] .team-member img,body[data-style=rituel] .member-initials{height:100%;object-fit:cover;object-position:center 35%;background:var(--paper);border-radius:0} body[data-style=rituel] .team-member h3{font-family:'Taviraj',serif;font-size:34px;font-weight:600;line-height:1.18;margin:0} body[data-style=rituel] .team-member p{font-size:13px;line-height:1.85;margin:0} body[data-style=rituel] #actions{padding-inline:12%;background:var(--soft);max-width:none} body[data-style=rituel] #actions .commerce-news-head{max-width:670px;margin:0 auto 55px;text-align:center} body[data-style=rituel] #actions .commerce-news-head h2{font-size:clamp(34px,4vw,59px)} body[data-style=rituel] .action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:65px 9%;margin:0;align-items:start} body[data-style=rituel] .action-card:nth-child(2n){padding-top:110px} body[data-style=rituel] .action-card>img{height:380px;background:var(--paper);object-fit:contain} body[data-style=rituel] .action-card>div{padding-top:28px} body[data-style=rituel] .action-card h3{font-family:'Taviraj',serif;font-size:25px;font-weight:600} body[data-style=rituel] .action-card p{font-size:14px;line-height:1.85} body[data-style=rituel] .single-action .action-grid{display:block;max-width:none} body[data-style=rituel] .single-action .action-card{display:grid;grid-template-columns:1fr 1fr;gap:8%} body[data-style=rituel] .news-feature{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12%;padding-inline:4%;align-items:center} body[data-style=rituel] #nouveaute h2{font-size:clamp(34px,3.9vw,61px);line-height:1.15;max-width:13ch} body[data-style=rituel] .news-images img{height:470px;background:var(--paper)} body[data-style=rituel] .news-images figcaption{font-size:12px} body[data-style=rituel] .booking{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:9%;padding-inline:9%;background:var(--paper);color:var(--ink);border-top:1px solid var(--line)} body[data-style=rituel] .booking h2{font-size:clamp(38px,4.7vw,73px);line-height:1.1;max-width:13ch;margin-bottom:35px} body[data-style=rituel] .booking-intro>p{max-width:54ch;font-size:13px;line-height:1.85} body[data-style=rituel] .local-booking{padding:40px 0;border-block:1px solid var(--line);border-radius:0;background:var(--paper)} body[data-style=rituel] .local-booking h3{font-family:'Taviraj',serif;font-size:32px} body[data-style=rituel] .local-booking .action{width:100%;margin-top:30px} body[data-style=rituel] .contact{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:start;gap:7%;padding-inline:7%;background:var(--soft);border:0;max-width:none} body[data-style=rituel] .contact h2{font-size:clamp(29px,3.2vw,49px);max-width:14ch} body[data-style=rituel] .contact address{font-size:13px;line-height:1.8} body[data-style=rituel] .contact>.action{grid-column:auto;font-size:13px;justify-self:start} body[data-style=rituel] .site-footer{padding:25px 7%;border:0;background:var(--soft);font-size:12px} /* NOCTURNE — une affiche de cinéma, une colonne photographique et beaucoup d'encre. * La réserve sombre reste celle du client : aucun noir forcé ne remplace sa palette. * Les filets et le cadrage vertical portent l'identité, même avec une autre couleur. */ body[data-style=nocturne] .site-header{height:84px;padding-inline:4%;border-bottom:1px solid var(--line)} body[data-style=nocturne] .shop-brand{font-family:Archivo,sans-serif;text-transform:uppercase;font-size:19px;font-weight:650;letter-spacing:.025em} body[data-style=nocturne] .shop-symbol{font-family:Archivo,sans-serif;font-weight:400} body[data-style=nocturne] .site-header nav{font-size:12px;gap:25px} body[data-style=nocturne] .site-header .nav-book{border-radius:0;background:var(--accent);color:var(--contrast);padding:13px 17px} body[data-style=nocturne] .action{border:0;border-radius:0;border-bottom:1px solid currentColor;background:none;color:var(--accent);padding:15px 0;gap:40px;min-height:54px;transition:background-color 180ms,color 180ms} body[data-style=nocturne] .action:hover{filter:none;color:var(--ink)} body[data-style=nocturne] .action svg{transition:transform 260ms cubic-bezier(.16,1,.3,1)} body[data-style=nocturne] .action:hover svg{transform:translate(6px,-3px)} body[data-style=nocturne] .hero-nocturne.nocturne-cinema{position:relative;max-width:1800px;display:grid;grid-template-columns:35px minmax(0,1fr) minmax(0,1.04fr);grid-template-rows:minmax(480px,auto) auto;gap:0 5%;padding:44px 5% 25px;min-height:620px;background:var(--paper);color:var(--ink)} .nocturne-vertical-name{grid-column:1;grid-row:1;writing-mode:vertical-rl;transform:rotate(180deg);align-self:start;justify-self:start;max-height:430px;font-family:Archivo,sans-serif;font-size:12px;letter-spacing:.1em;line-height:1.6;overflow-wrap:anywhere;text-transform:uppercase} .nocturne-image-canvas{grid-column:2;grid-row:1;position:relative;min-width:0;height:520px;margin:0;overflow:hidden} .nocturne-image-canvas .main-photo{width:100%;height:100%;object-fit:cover;object-position:center} .nocturne-poster{grid-column:3;grid-row:1;display:flex;flex-direction:column;justify-content:space-between;align-items:start;gap:28px;padding:35px 0 7px;min-width:0} body[data-style=nocturne] .nocturne-poster h1{font-family:'Taviraj',serif;font-size:clamp(47px,5.5vw,88px);font-weight:600;line-height:1.045;letter-spacing:-.04em;max-width:12ch;hyphens:auto} .nocturne-programme{width:min(100%,460px);border-top:1px solid var(--line);padding-top:24px} .nocturne-programme .hero-description{font-size:14px;max-width:43ch;line-height:1.85} .nocturne-programme .action{margin-top:18px;width:100%;font-size:14px} .nocturne-baseline{grid-column:2/4;grid-row:2;display:flex;justify-content:space-between;align-items:center;gap:35px;padding-top:22px;font-size:12px} .nocturne-baseline>[data-hero-address]{max-width:55ch;line-height:1.7} .nocturne-baseline .text-link{font-size:12px;font-weight:500;white-space:nowrap} /* Les prestations alternent une grande scène puis deux séquences plus resserrées. * Le nombre de lignes reste libre : aucune information n'est limitée à trois fiches. */ body[data-style=nocturne] .section{padding-block:clamp(58px,7.5vw,118px)} body[data-style=nocturne] .services{max-width:none;border-top:1px solid var(--line);padding-inline:7%} body[data-style=nocturne] .section-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:15%;align-items:start;margin-bottom:55px} body[data-style=nocturne] .section-heading h2{font-family:Archivo,sans-serif;font-weight:500;font-size:clamp(32px,3.6vw,57px);max-width:16ch;line-height:1.13} body[data-style=nocturne] .section-description{font-size:14px;line-height:1.9;padding-top:7px;max-width:43ch} body[data-style=nocturne] .service-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 7%} body[data-style=nocturne] .service{padding:0;border-top:1px solid var(--line)} body[data-style=nocturne] .service:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:9%;border:0} body[data-style=nocturne] .service-image{height:280px;border-radius:0;overflow:hidden} body[data-style=nocturne] .service:first-child .service-image{height:470px} body[data-style=nocturne] .service-copy{padding-top:25px} body[data-style=nocturne] .service:first-child .service-copy{padding-top:0} body[data-style=nocturne] .service h3{font-family:'Taviraj',serif;font-size:clamp(26px,2.6vw,40px);font-weight:600;line-height:1.18} body[data-style=nocturne] .service-copy p{font-size:14px;line-height:1.85;max-width:42ch;margin:18px 0} body[data-style=nocturne] .service-book{font-size:12px;font-weight:500;color:var(--accent);min-height:48px} body[data-style=nocturne] .about{max-width:none;background:var(--soft);border:0;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:12%;padding-inline:9%;align-items:center} body[data-style=nocturne] .about-photo{height:580px} body[data-style=nocturne] .about-photo figcaption{font-size:12px} body[data-style=nocturne] .about-copy h2{font-family:'Taviraj',serif;font-size:clamp(38px,4.5vw,71px);font-weight:600;max-width:13ch;line-height:1.1;margin-bottom:32px} body[data-style=nocturne] .about-copy>p{font-size:15px;line-height:1.9;max-width:46ch} body[data-style=nocturne] .photo-story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5%;padding-inline:7%;align-items:start} body[data-style=nocturne] .story-heading{grid-column:1;grid-row:1;margin:0;padding-top:20px;max-width:350px} body[data-style=nocturne] .story-heading h2{font-family:Archivo,sans-serif;font-size:clamp(34px,4.5vw,68px);font-weight:500;max-width:12ch;line-height:1.08} body[data-style=nocturne] .story-heading p{font-size:13px;line-height:1.8;margin-top:25px;max-width:30ch} body[data-style=nocturne] .story-images{display:contents} body[data-style=nocturne] .story-images figure:first-child{grid-column:2;grid-row:1/3;width:100%;margin:0} body[data-style=nocturne] .story-images figure:first-child img{height:640px} body[data-style=nocturne] .story-images figure:nth-child(2){grid-column:1;grid-row:2;margin:50px 20% 0 0} body[data-style=nocturne] .story-images figure:nth-child(2) img{height:270px} body[data-style=nocturne] .story-images figcaption{font-size:12px} body[data-style=nocturne] .team{padding-inline:7%;border-top:1px solid var(--line)} body[data-style=nocturne] .team-heading{max-width:1000px;margin-bottom:55px;display:flex;justify-content:space-between;align-items:end;gap:10%} body[data-style=nocturne] .team-heading h2{font-family:'Taviraj',serif;font-size:clamp(36px,4.3vw,65px);font-weight:600;max-width:14ch;margin:0} body[data-style=nocturne] .team-heading p{max-width:31ch;font-size:13px} body[data-style=nocturne] .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:45px 7%} body[data-style=nocturne] .team-member{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);grid-template-rows:1fr auto 1fr;gap:0 24px;align-items:center;border-top:1px solid var(--line);padding-top:22px} body[data-style=nocturne] .team-member img,body[data-style=nocturne] .member-initials{grid-column:1;grid-row:1/4;height:235px;object-fit:contain;background:var(--paper)} body[data-style=nocturne] .team-member h3{grid-column:2;grid-row:2;margin:0;font-family:'Taviraj',serif;font-size:26px;font-weight:600;align-self:end} body[data-style=nocturne] .team-member p{grid-column:2;grid-row:3;align-self:start;line-height:1.7;font-size:12px;margin-top:10px} body[data-style=nocturne] #actions{max-width:none;background:var(--soft);padding-inline:7%} body[data-style=nocturne] #actions .commerce-news-head h2{font-family:Archivo,sans-serif;font-size:clamp(31px,3.5vw,53px);font-weight:500;max-width:17ch} body[data-style=nocturne] .action-grid{display:block;margin:45px 0 0;max-width:none} body[data-style=nocturne] .action-card{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;padding:35px 0;border-top:1px solid var(--line)} body[data-style=nocturne] .action-card:nth-child(even)>img{grid-column:2;grid-row:1} body[data-style=nocturne] .action-card:nth-child(even)>div{grid-column:1;grid-row:1} body[data-style=nocturne] .action-card>img{height:360px;background:var(--paper);object-fit:contain} body[data-style=nocturne] .action-card>div{padding:0 4%} body[data-style=nocturne] .action-card h3{font-family:'Taviraj',serif;font-size:clamp(25px,2.6vw,39px);font-weight:600;line-height:1.2} body[data-style=nocturne] .action-card p{font-size:14px;line-height:1.85;margin-top:20px} body[data-style=nocturne] .single-action .action-grid{display:block;max-width:none} body[data-style=nocturne] .news-feature{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10%;align-items:center} body[data-style=nocturne] #nouveaute h2{font-family:'Taviraj',serif;font-size:clamp(36px,4vw,63px);font-weight:600;line-height:1.13;max-width:13ch} body[data-style=nocturne] #nouveaute .commerce-news-head>p{font-size:15px;line-height:1.9} body[data-style=nocturne] .news-images img{height:500px;background:var(--paper)} body[data-style=nocturne] .news-images figcaption{font-size:12px} body[data-style=nocturne] .booking{background:var(--paper);color:var(--ink);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:9%;padding-inline:9%;border-block:1px solid var(--line)} body[data-style=nocturne] .booking h2{font-family:'Taviraj',serif;font-size:clamp(38px,4.6vw,72px);font-weight:600;line-height:1.1;max-width:12ch;margin-bottom:30px} body[data-style=nocturne] .booking-intro>p{font-size:13px;line-height:1.85} body[data-style=nocturne] .local-booking{border-block:1px solid var(--line);border-radius:0;background:var(--paper);color:var(--ink);padding:35px 0} body[data-style=nocturne] .local-booking h3{font-family:Archivo,sans-serif;font-size:27px;font-weight:500} body[data-style=nocturne] .local-booking .action{margin-top:25px;width:100%} body[data-style=nocturne] .contact{max-width:none;display:grid;grid-template-columns:1.4fr 1fr;gap:35px 12%;padding:70px 7%;background:var(--soft);border:0} body[data-style=nocturne] .contact h2{font-family:Archivo,sans-serif;font-size:clamp(34px,4.3vw,68px);font-weight:500;text-transform:uppercase;max-width:16ch;line-height:1.07} body[data-style=nocturne] .contact address{font-size:13px;line-height:1.9} body[data-style=nocturne] .contact>.action{grid-column:2;justify-self:stretch} body[data-style=nocturne] .site-footer{background:var(--soft);padding:25px 7%;border-top:1px solid var(--line);font-size:12px} /* TABLETTE — les silhouettes restent distinctes avant le menu compact. */ @media(max-width:1100px){ body[data-style=rituel] .site-header nav{gap:15px;font-size:11px} .rituel-title-surface{width:73%;padding-inline:28px;margin-top:-90px} .rituel-reading-line{grid-template-columns:.65fr 1.2fr .9fr;gap:4%} body[data-style=rituel] .services{grid-template-columns:.65fr 1.35fr;gap:5%} body[data-style=rituel] .service-list{gap:45px 22px} body[data-style=rituel] .service:nth-child(2n){padding-top:70px} body[data-style=rituel] .service:nth-child(3n){gap:23px} body[data-style=rituel] .service-image{height:250px} body[data-style=rituel] .service h3{font-size:23px} body[data-style=rituel] .about{padding-inline:7%;gap:7%} body[data-style=rituel] .about-photo{height:460px} body[data-style=rituel] .team-grid{column-gap:8%;row-gap:70px} body[data-style=rituel] .team-member>.team-portrait{height:440px} body[data-style=rituel] .team-member:nth-child(even){margin-top:120px} body[data-style=rituel] .contact{grid-template-columns:1.1fr 1fr;gap:35px 8%} body[data-style=rituel] .contact>.action{grid-column:2} body[data-style=nocturne] .hero-nocturne.nocturne-cinema{grid-template-columns:26px 1fr 1fr;gap:0 4%;padding-inline:4%} .nocturne-image-canvas{height:490px} body[data-style=nocturne] .nocturne-poster h1{font-size:clamp(45px,5.6vw,70px)} body[data-style=nocturne] .team-member{gap:0 18px} body[data-style=nocturne] .team-member img,body[data-style=nocturne] .member-initials{height:200px} body[data-style=nocturne] .team-member h3{font-size:23px} } /* TÉLÉPHONE — Rituel conserve son bandeau photographique et ses décalages ; * Nocturne devient une affiche avec titre, photo et invitation disposés sur sa grille. * Les commandes du menu et le rendez-vous fixe restent dans les zones tactiles. */ @media(max-width:760px){ body[data-style=rituel] .site-header{height:72px;padding-inline:5%} body[data-style=rituel] .shop-brand{font-size:18px;max-width:69%} body[data-style=rituel] .menu-toggle{border:0;border-bottom:1px solid var(--line);border-radius:0;padding-inline:3px;background:var(--paper)} body[data-style=rituel] .site-header nav{font-size:14px} body[data-style=rituel] .site-header .nav-book{padding:12px 16px} body[data-style=rituel] .booking-dock{left:14px;right:14px;border-radius:0;background:var(--accent);color:var(--contrast);box-shadow:0 7px 22px color-mix(in srgb,var(--ink) 18%,transparent)} .rituel-stage{margin:0 14px} .rituel-image-canvas{height:360px} .rituel-image-canvas .main-photo{object-position:center} .rituel-title-surface{width:calc(100% - 20px);margin:-69px 0 0 20px;padding:25px 18px 4px} body[data-style=rituel] .rituel-title-surface h1{font-size:clamp(35px,9.8vw,49px);line-height:1.08;max-width:17ch} .rituel-reading-line{grid-template-columns:1fr;padding:22px 9% 35px;gap:20px} .rituel-reading-line .hero-description{font-size:14px;line-height:1.85;grid-row:1;max-width:47ch} .rituel-discover{grid-row:3;max-width:none;font-size:12px} .rituel-book{grid-row:2;justify-self:stretch} .rituel-book .action{font-size:14px} body[data-style=rituel] .section{padding-block:55px} body[data-style=rituel] .services{display:block;padding-inline:7%} body[data-style=rituel] .section-heading{position:static;margin-bottom:35px} body[data-style=rituel] .section-heading h2{font-size:34px;max-width:15ch} body[data-style=rituel] .section-description{font-size:13px;max-width:43ch;margin-top:19px} body[data-style=rituel] .service-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:33px 18px} body[data-style=rituel] .service:nth-child(2n){padding-top:65px} body[data-style=rituel] .service-image{height:205px} body[data-style=rituel] .service-copy{padding-top:18px} body[data-style=rituel] .service h3{font-size:20px} body[data-style=rituel] .service-copy p{font-size:12px;line-height:1.8;margin-top:11px} body[data-style=rituel] .service-book{font-size:11px;line-height:1.7;min-height:52px} body[data-style=rituel] .service:nth-child(3n){grid-template-columns:1fr 1fr;gap:20px} body[data-style=rituel] .service:nth-child(3n) .service-image{height:210px} body[data-style=rituel] .service:nth-child(3n) .service-copy{padding-top:0} body[data-style=rituel] .about{grid-template-columns:1fr;gap:30px;padding-inline:7%} body[data-style=rituel] .about-photo{width:84%;height:350px} body[data-style=rituel] .about-copy{padding:0 0 0 10%} body[data-style=rituel] .about-copy h2{font-size:36px;margin-bottom:24px;max-width:14ch} body[data-style=rituel] .about-copy>p{font-size:14px;max-width:44ch} body[data-style=rituel] .photo-story{grid-template-columns:minmax(0,1fr) minmax(0,.65fr);gap:23px 17px;padding-inline:7%} body[data-style=rituel] .story-heading{grid-column:1/-1;grid-row:1;padding:0;margin:0 0 15px} body[data-style=rituel] .story-heading h2{font-size:37px;max-width:15ch} body[data-style=rituel] .story-heading p{font-size:12px;max-width:43ch;margin-top:20px} body[data-style=rituel] .story-images figure:first-child{grid-column:1;grid-row:2;margin:0} body[data-style=rituel] .story-images figure:first-child img{height:285px} body[data-style=rituel] .story-images figure:nth-child(2){grid-column:2;grid-row:2;margin:80px 0 0} body[data-style=rituel] .story-images figure:nth-child(2) img{height:190px} body[data-style=rituel] .story-images figcaption{font-size:11px;line-height:1.65} body[data-style=rituel] .team-heading{display:block;text-align:left;margin:0 0 40px;max-width:none} body[data-style=rituel] .team-heading h2{font-size:37px;max-width:17ch;margin:0} body[data-style=rituel] .team-heading p{font-size:13px;margin:21px 0 0;max-width:43ch} /* Une succession de grandes pages photographiques décalées remplace le double * quadrillage mobile : chaque personne possède une respiration et sa légende. */ body[data-style=rituel] .team-grid{grid-template-columns:1fr;row-gap:55px;column-gap:0} body[data-style=rituel] .team-member{width:100%;justify-self:stretch} body[data-style=rituel] .team-member>.team-portrait{width:88%;height:365px;margin:0} body[data-style=rituel] .team-member:nth-child(even)>.team-portrait{margin-left:12%} body[data-style=rituel] .team-member>.team-person-copy{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:25px 0 15px;gap:10px 20px} body[data-style=rituel] .team-member:only-child{grid-column:1;max-width:none;width:100%} body[data-style=rituel] .team-member:nth-child(even){margin-top:0} body[data-style=rituel] .team-member img,body[data-style=rituel] .member-initials{height:100%;object-position:center 35%} body[data-style=rituel] .team-member h3{font-size:31px;line-height:1.18;margin:0} body[data-style=rituel] .team-member p{font-size:13px;line-height:1.85;margin:0} body[data-style=rituel] #actions{padding-inline:7%} body[data-style=rituel] #actions .commerce-news-head{margin-bottom:35px;text-align:left} body[data-style=rituel] #actions .commerce-news-head h2{font-size:34px;max-width:15ch} body[data-style=rituel] .action-grid{grid-template-columns:1fr;gap:40px} body[data-style=rituel] .action-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:21px;align-items:center} body[data-style=rituel] .action-card:nth-child(2n){padding-top:0} body[data-style=rituel] .action-card:nth-child(2n)>img{grid-column:2;grid-row:1} body[data-style=rituel] .action-card:nth-child(2n)>div{grid-column:1;grid-row:1} body[data-style=rituel] .action-card>img{height:230px} body[data-style=rituel] .action-card>div{padding:0} body[data-style=rituel] .action-card h3{font-size:20px} body[data-style=rituel] .action-card p{font-size:12px;line-height:1.8} body[data-style=rituel] .single-action .action-card{grid-template-columns:1fr;gap:23px} body[data-style=rituel] .single-action .action-card>img{height:340px} body[data-style=rituel] .news-feature{grid-template-columns:1fr;gap:30px;padding:0} body[data-style=rituel] #nouveaute h2{font-size:37px;max-width:15ch} body[data-style=rituel] .news-images{margin-left:12%;display:block} body[data-style=rituel] .news-images figure+figure{margin-top:25px} body[data-style=rituel] .news-images img{height:340px} body[data-style=rituel] .booking{grid-template-columns:1fr;gap:30px;padding-inline:7%} body[data-style=rituel] .booking h2{font-size:40px;max-width:13ch;margin-bottom:27px} body[data-style=rituel] .local-booking{padding-block:27px} body[data-style=rituel] .local-booking h3{font-size:28px} body[data-style=rituel] .contact{grid-template-columns:1fr;gap:25px;padding-inline:7%} body[data-style=rituel] .contact h2{font-size:35px;max-width:16ch} body[data-style=rituel] .contact>.action{grid-column:1;justify-self:stretch} body[data-style=rituel] .site-footer{padding-inline:7%;gap:12px} body[data-style=nocturne] .site-header{height:72px;padding-inline:5%} body[data-style=nocturne] .shop-brand{font-size:16px;max-width:68%;letter-spacing:.01em} body[data-style=nocturne] .menu-toggle{border:0;border-radius:0;border-bottom:1px solid var(--line);background:var(--paper);padding-inline:5px} body[data-style=nocturne] .site-header nav{gap:8px;font-size:14px} body[data-style=nocturne] .booking-dock{border-radius:0;left:14px;right:14px;background:var(--accent);color:var(--contrast);box-shadow:0 7px 22px color-mix(in srgb,var(--ink) 18%,transparent)} body[data-style=nocturne] .hero-nocturne.nocturne-cinema{grid-template-columns:19px minmax(0,1fr);grid-template-rows:auto auto auto;gap:0 16px;min-height:0;padding:28px 6% 26px} .nocturne-vertical-name{grid-column:1;grid-row:2;max-height:345px;font-size:10px;letter-spacing:.11em;padding-top:3px} .nocturne-poster{grid-column:1/-1;grid-row:1;display:contents;padding:0} body[data-style=nocturne] .nocturne-poster h1{grid-column:1/-1;grid-row:1;font-size:clamp(43px,12.5vw,62px);line-height:1.025;max-width:13ch;margin-bottom:28px;letter-spacing:-.04em} .nocturne-image-canvas{grid-column:2;grid-row:2;height:350px;margin-right:9%;width:91%} .nocturne-programme{grid-column:1/-1;grid-row:3;margin-top:28px;width:100%;padding-top:22px} .nocturne-programme .hero-description{font-size:14px;line-height:1.85;max-width:44ch} .nocturne-programme .action{margin-top:16px;width:100%;font-size:14px} .nocturne-baseline{grid-column:1/-1;grid-row:4;gap:17px;padding-top:18px;font-size:11px;align-items:start} .nocturne-baseline .text-link{font-size:11px;min-width:120px;gap:9px} body[data-style=nocturne] .section{padding-block:56px} body[data-style=nocturne] .section-heading{display:block;margin-bottom:34px} body[data-style=nocturne] .section-heading h2{font-size:34px;max-width:16ch} body[data-style=nocturne] .section-description{font-size:13px;margin-top:21px;max-width:43ch;padding:0} body[data-style=nocturne] .service-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 18px} body[data-style=nocturne] .service:first-child{display:block;grid-column:1/-1} body[data-style=nocturne] .service:first-child .service-image{height:330px} body[data-style=nocturne] .service-image{height:200px} body[data-style=nocturne] .service:first-child .service-copy{padding-top:24px} body[data-style=nocturne] .service-copy{padding-top:20px} body[data-style=nocturne] .service h3{font-size:22px} body[data-style=nocturne] .service:first-child h3{font-size:31px} body[data-style=nocturne] .service-copy p{font-size:12px;line-height:1.85;margin:12px 0} body[data-style=nocturne] .service-book{font-size:11px;line-height:1.75;min-height:50px} body[data-style=nocturne] .about{grid-template-columns:1fr;gap:34px;padding-inline:7%} body[data-style=nocturne] .about-photo{width:78%;margin-left:22%;height:385px} body[data-style=nocturne] .about-copy h2{font-size:40px;max-width:13ch;margin-bottom:25px} body[data-style=nocturne] .about-copy>p{font-size:14px;line-height:1.9} body[data-style=nocturne] .photo-story{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:28px 18px;padding-inline:7%} body[data-style=nocturne] .story-heading{grid-column:1/-1;grid-row:1;padding:0;max-width:none} body[data-style=nocturne] .story-heading h2{font-size:42px;max-width:12ch} body[data-style=nocturne] .story-heading p{font-size:12px;max-width:43ch;margin-top:22px} body[data-style=nocturne] .story-images figure:first-child{grid-column:2;grid-row:2;align-self:start;margin:0} body[data-style=nocturne] .story-images figure:first-child img{height:330px} body[data-style=nocturne] .story-images figure:nth-child(2){grid-column:1;grid-row:2;align-self:end;margin:100px 0 0} body[data-style=nocturne] .story-images figure:nth-child(2) img{height:205px} body[data-style=nocturne] .story-images figcaption{font-size:11px;line-height:1.65} body[data-style=nocturne] .team-heading{display:block;margin-bottom:34px} body[data-style=nocturne] .team-heading h2{font-size:39px;max-width:14ch} body[data-style=nocturne] .team-heading p{font-size:12px;max-width:43ch;margin-top:22px} body[data-style=nocturne] .team-grid{grid-template-columns:1fr;gap:27px} body[data-style=nocturne] .team-member{grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:0 25px;padding-top:20px} body[data-style=nocturne] .team-member img,body[data-style=nocturne] .member-initials{height:210px} body[data-style=nocturne] .team-member h3{font-size:28px} body[data-style=nocturne] .team-member p{font-size:12px;line-height:1.8} body[data-style=nocturne] .action-grid{margin-top:32px} body[data-style=nocturne] .action-card{grid-template-columns:1fr;gap:24px;padding:28px 0} body[data-style=nocturne] .action-card>img{height:330px} body[data-style=nocturne] .action-card>div{padding:0} body[data-style=nocturne] .action-card:nth-child(even)>img,body[data-style=nocturne] .action-card:nth-child(even)>div{grid-column:1;grid-row:auto} body[data-style=nocturne] .action-card h3{font-size:30px} body[data-style=nocturne] .action-card p{font-size:14px} body[data-style=nocturne] .news-feature{grid-template-columns:1fr;gap:32px} body[data-style=nocturne] #nouveaute h2{font-size:39px;max-width:15ch} body[data-style=nocturne] #nouveaute .commerce-news-head>p{font-size:14px} body[data-style=nocturne] .news-images{margin-left:10%;display:block} body[data-style=nocturne] .news-images figure+figure{margin-top:25px} body[data-style=nocturne] .news-images img{height:385px} body[data-style=nocturne] .booking{grid-template-columns:1fr;gap:31px;padding-inline:7%} body[data-style=nocturne] .booking h2{font-size:41px;max-width:13ch;margin-bottom:28px} body[data-style=nocturne] .booking-intro>p{font-size:13px} body[data-style=nocturne] .local-booking{padding-block:28px} body[data-style=nocturne] .local-booking h3{font-size:26px} body[data-style=nocturne] .contact{grid-template-columns:1fr;padding:55px 7%;gap:30px} body[data-style=nocturne] .contact h2{font-size:39px;max-width:15ch} body[data-style=nocturne] .contact>.action{grid-column:1;justify-self:stretch} body[data-style=nocturne] .site-footer{padding-inline:7%;gap:13px} } /* Les formats choisis explicitement par la commerçante priment sur les cadrages. * Le texte reprend sa place dans le flux quand une image ne peut plus être recadrée. */ body[data-style=rituel] .rituel-stage:has([data-crafteno-photo-format]) .rituel-title-surface{margin-top:0;width:100%;margin-left:0;padding-inline:4%} body[data-style=nocturne] .nocturne-cinema:has([data-crafteno-photo-format]){align-items:start} body[data-style=nocturne] .nocturne-cinema:has([data-crafteno-photo-format]) .nocturne-poster{padding-top:0} /* Compatibilité avec les portraits interactifs ajoutés par le rendu commun. * La photographie garde sa case ; sa légende et son lien restent dans la seconde. * Sans ces wrappers, les règles précédentes restent utilisables par les exports. */ body[data-style=rituel] .team-portrait{margin:0;overflow:hidden;background:var(--paper)} body[data-style=rituel] .team-person-copy{padding-top:0} body[data-style=nocturne] .team-member>.team-portrait{grid-column:1;grid-row:1/4;margin:0;min-width:0;overflow:hidden;background:var(--paper)} body[data-style=nocturne] .team-member>.team-person-copy{grid-column:2;grid-row:2/4;min-width:0;align-self:center} body[data-style=nocturne] .team-person-copy h3{margin:0} body[data-style=nocturne] .team-person-copy p{margin-top:10px} /* Les légendes et commandes ne descendent pas sous douze pixels, même sur mobile. */ body[data-style=rituel] .service-book,body[data-style=rituel] .story-images figcaption, body[data-style=nocturne] .service-book,body[data-style=nocturne] .story-images figcaption, .nocturne-vertical-name,.nocturne-baseline,.nocturne-baseline .text-link{font-size:12px} /* Les interactions demeurent perceptibles sans déplacement si le système le demande. */ @media(prefers-reduced-motion:reduce){ body[data-style=rituel] .action svg,body[data-style=rituel] .text-link svg,body[data-style=nocturne] .action svg{transition:none;transform:none} } /* STUDIO — une affiche composée de texte, de photographie et de lignes franches. * Le grand titre et l'image occupent deux colonnes différentes. Les rubriques * prolongent cette grille ; les prestations ne redeviennent pas trois cartes. */ body[data-style=studio] .site-header{padding-inline:5%;border-bottom:1px solid var(--ink);background:var(--paper)} body[data-style=studio] .shop-brand{font-weight:850;font-size:25px;letter-spacing:-.035em;text-transform:uppercase} body[data-style=studio] .site-header .nav-book{background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:0} body[data-style=studio] .action{border-radius:0;min-height:58px;padding:16px 22px;text-transform:uppercase;letter-spacing:.055em;font-size:13px;background:var(--accent);color:var(--contrast)} body[data-style=studio] .action svg,body[data-style=studio] .text-link svg{transition:transform .22s cubic-bezier(.16,1,.3,1)} body[data-style=studio] .action:hover svg,body[data-style=studio] .text-link:hover svg{transform:translateX(6px)} body[data-style=studio] .graphic-studio{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0;padding:0 5%;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--ink);max-width:none} body[data-style=studio] .studio-poster-copy{position:relative;z-index:1;padding:clamp(34px,5vw,74px) 8% 44px 0;display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-width:0} body[data-style=studio] .graphic-studio h1{font-size:clamp(48px,6.65vw,96px);max-width:13ch;line-height:.98;font-weight:850;letter-spacing:-.035em;text-transform:uppercase;grid-column:auto} body[data-style=studio] .studio-poster-caption{max-width:460px;display:grid;gap:26px} body[data-style=studio] .studio-poster-caption .hero-description{max-width:39ch;font-size:17px;line-height:1.65} body[data-style=studio] .studio-poster-caption .action{justify-self:start} body[data-style=studio] .studio-poster-photo{height:clamp(520px,62vw,690px);min-width:0;overflow:hidden;border-radius:0;border-top:14px solid var(--accent);margin-top:28px;align-self:start} body[data-style=studio] .studio-poster-photo img{object-fit:cover} body[data-style=studio] .studio-poster-bottom{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:24px 0;border-top:1px solid var(--ink)} body[data-style=studio] .studio-poster-bottom>[data-shop-sign]{font:800 clamp(24px,3vw,45px)/1.05 var(--heading);text-transform:uppercase;letter-spacing:-.035em;overflow-wrap:anywhere;max-width:70%} body[data-style=studio] .studio-poster-bottom .text-link{font-size:12px;max-width:28ch;text-align:right} body[data-style=studio] .section{padding:clamp(64px,7vw,108px) 5%} body[data-style=studio] .section-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:7%;align-items:end;border-bottom:1px solid var(--ink);padding-bottom:28px;margin-bottom:40px} body[data-style=studio] h2{font-size:clamp(38px,4.5vw,65px);line-height:1.03;letter-spacing:-.035em;font-weight:800;text-transform:uppercase} body[data-style=studio] .section-heading h2{max-width:17ch} /* Le menu-affiche conserve une ligne par prestation, quelle que soit la longueur * du catalogue. La vignette sert de repère ; le titre, le descriptif et le lien * s'alignent comme une composition imprimée, sans grande photographie introductive. */ body[data-style=studio] .services .section-heading h2{font-size:clamp(36px,3.4vw,49px);max-width:20ch} body[data-style=studio] .service-list{display:block;border-top:3px solid var(--ink)} body[data-style=studio] .service,body[data-style=studio] .service:first-child{display:grid;grid-template-columns:110px minmax(0,1fr);gap:30px;align-items:center;grid-column:auto;padding:22px 0;border-bottom:1px solid var(--ink);min-width:0} body[data-style=studio] .service-image,body[data-style=studio] .service:first-child .service-image{width:110px;height:130px;overflow:hidden;border-radius:0} body[data-style=studio] .service-copy,body[data-style=studio] .service:first-child .service-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 6%;padding:0;border-top:0;align-items:center;min-width:0} body[data-style=studio] .service h3{grid-column:1;grid-row:1/3;font:800 clamp(28px,2.7vw,39px)/1.06 var(--heading);letter-spacing:-.025em;text-transform:uppercase;max-width:17ch} body[data-style=studio] .service-copy p{grid-column:2;grid-row:1;font-size:14px;margin:0;line-height:1.7;max-width:49ch} body[data-style=studio] .service-book{grid-column:2;grid-row:2;justify-self:start;align-self:start;min-height:44px;padding-block:9px;font-size:12px;text-transform:uppercase;letter-spacing:.025em;border-bottom:1px solid var(--ink);text-decoration:none;max-width:100%} body[data-style=studio] .about{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:8%;background:var(--soft);max-width:none} body[data-style=studio] .about-photo{height:570px;border-radius:0} body[data-style=studio] .about-copy{border-top:4px solid var(--accent);padding-top:28px} body[data-style=studio] .about-copy h2{max-width:12ch;margin-bottom:30px} body[data-style=studio] .about-copy>p{font-size:16px;line-height:1.8} body[data-style=studio] .team-heading{max-width:none;display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:8%;margin-bottom:30px} body[data-style=studio] .team-heading h2{margin:0} body[data-style=studio] .team-grid{display:block;border-top:1px solid var(--ink)} body[data-style=studio] .team-member{display:grid;grid-template-columns:130px minmax(0,1fr);gap:32px;align-items:center;border-bottom:1px solid var(--ink);padding:22px 0} body[data-style=studio] .team-member>.team-portrait{width:130px;height:145px;overflow:hidden} body[data-style=studio] .team-person-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 32px;align-items:center;min-width:0} body[data-style=studio] .team-profile-link{grid-column:2;justify-self:start;font-size:12px;text-transform:uppercase;letter-spacing:.025em} body[data-style=studio] .team-member img,body[data-style=studio] .member-initials{height:145px;width:130px;object-fit:contain;background:var(--soft)} body[data-style=studio] .team-member h3{margin:0;font:800 clamp(26px,3.3vw,46px)/1.1 var(--heading);text-transform:uppercase;letter-spacing:-.025em} body[data-style=studio] .team-member p{font-size:15px;max-width:40ch;margin:0} body[data-style=studio] .photo-story{padding-block:70px} body[data-style=studio] .story-heading{margin-bottom:35px;max-width:780px} body[data-style=studio] .story-images{display:block} body[data-style=studio] .story-images figure:first-child{width:79%} body[data-style=studio] .story-images figure:nth-child(2){width:56%;margin:44px 0 0 auto} body[data-style=studio] .story-images img{height:clamp(320px,39vw,550px)} body[data-style=studio] .action-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:42px} body[data-style=studio] .action-card{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:24px;align-items:center} body[data-style=studio] .action-card>img{height:245px} body[data-style=studio] .action-card>div{padding:0} body[data-style=studio] .action-card h3{font:750 27px/1.12 var(--heading);text-transform:uppercase} body[data-style=studio] .action-card p{font-size:14px} body[data-style=studio] .single-action .action-grid{max-width:none} body[data-style=studio] .single-action .action-card{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:6%} body[data-style=studio] .single-action .action-card>img{height:430px} body[data-style=studio] .news-feature{grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr);gap:5%;align-items:stretch} body[data-style=studio] .news-feature>.commerce-news-head{align-self:center;border-top:4px solid var(--accent);padding-top:26px} body[data-style=studio] .news-images img{height:490px} body[data-style=studio] .booking{display:block;background:var(--accent);color:var(--contrast);border-top:1px solid var(--ink)} body[data-style=studio] .booking-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 9%} body[data-style=studio] .booking-intro h2{grid-row:1/7;max-width:13ch;font-size:clamp(45px,5vw,72px);margin:0} body[data-style=studio] .booking-intro>p{grid-column:2;font-size:14px;max-width:60ch} body[data-style=studio] .booking-panel{margin:35px 0 0 56%;max-width:none} body[data-style=studio] .local-booking{border-radius:0;padding:35px;background:var(--paper);color:var(--ink)} body[data-style=studio] .contact{background:var(--paper);border-top:1px solid var(--ink);grid-template-columns:1.35fr 1fr;gap:35px 9%} body[data-style=studio] .contact h2{font-size:clamp(36px,4.5vw,64px);max-width:17ch} body[data-style=studio] .contact address{font-size:15px} body[data-style=studio] .site-footer{padding:28px 5%;border-top:1px solid var(--ink);text-transform:uppercase;letter-spacing:.035em;font-size:11px} body[data-style=studio] .booking-dock{border:1px solid var(--ink);border-radius:0;box-shadow:none;background:var(--paper);color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.045em} /* POP — une campagne photographique : duo composé, texte large et aplats francs. * Les deux images se chevauchent entre elles, jamais sur un texte. Leurs angles * ne coupent pas les commandes. Les prestations deviennent une séquence alternée. */ body[data-style=pop] .site-header{background:var(--paper);border-bottom:0;padding-inline:6%} body[data-style=pop] .shop-brand{font-family:var(--heading);font-weight:750;font-size:25px;letter-spacing:-.035em} body[data-style=pop] .site-header .nav-book{border-radius:0;background:var(--ink);color:var(--paper);padding:12px 20px} body[data-style=pop] .action{border-radius:0;min-height:60px;padding:16px 26px;border-color:var(--ink);background:var(--ink);color:var(--paper);font-size:14px;font-weight:700;gap:30px;transition:background .2s ease,color .2s ease} body[data-style=pop] .action:hover{background:var(--accent);color:var(--contrast);border-color:var(--accent);filter:none} body[data-style=pop] .graphic-pop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0 5%;padding:48px 6% 0;background:var(--soft);color:var(--ink);max-width:none;overflow:hidden} body[data-style=pop] .pop-campaign-copy{align-self:center;padding:25px 0 60px;position:relative;z-index:2;min-width:0} body[data-style=pop] .graphic-pop h1{font-size:clamp(47px,5.8vw,84px);font-weight:730;line-height:1.03;letter-spacing:-.04em;max-width:12ch} body[data-style=pop] .pop-campaign-copy .hero-description{font-size:16px;line-height:1.8;max-width:38ch;margin:26px 0 31px} body[data-style=pop] .pop-campaign-media{position:relative;display:block;height:610px;min-width:0;padding:30px 6% 50px 0;margin:0;overflow:visible} body[data-style=pop] .pop-primary{height:490px;width:79%;border-radius:0;overflow:hidden;transform:rotate(-3deg);margin:0;box-shadow:8px 16px 30px color-mix(in srgb,var(--ink) 15%,transparent)} body[data-style=pop] .pop-secondary{position:absolute;right:0;bottom:38px;width:46%;height:310px;margin:0;align-self:auto;border-radius:0;overflow:hidden;transform:rotate(5deg);box-shadow:5px 12px 22px color-mix(in srgb,var(--ink) 13%,transparent)} body[data-style=pop] .pop-primary img,body[data-style=pop] .pop-secondary img{height:100%;object-fit:cover} body[data-style=pop] .pop-campaign-sign{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:35px;margin:0 -6.8181818%;padding:28px 6.8181818%;background:var(--accent);color:var(--contrast)} body[data-style=pop] .pop-campaign-sign>[data-shop-sign]{font:750 clamp(29px,4vw,58px)/1.1 var(--heading);letter-spacing:-.035em;max-width:75%;overflow-wrap:anywhere} body[data-style=pop] .pop-campaign-sign .text-link{font-size:14px;text-decoration:none;border-bottom:1px solid currentColor} body[data-style=pop] .section{padding-block:clamp(65px,7vw,108px)} body[data-style=pop] h2{font-size:clamp(38px,4.2vw,61px);line-height:1.07;font-weight:680;letter-spacing:-.04em} body[data-style=pop] .services{padding-inline:6%;background:var(--paper)} body[data-style=pop] .section-heading{align-items:start;margin-bottom:50px;gap:7%} body[data-style=pop] .section-heading h2{max-width:14ch} body[data-style=pop] .section-description{font-size:15px;max-width:37ch;padding-top:7px} body[data-style=pop] .service-list{display:block} body[data-style=pop] .service,body[data-style=pop] .service:nth-child(2){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8%;align-items:center;padding:0;margin-bottom:65px} body[data-style=pop] .service:last-child{margin-bottom:0} body[data-style=pop] .service:nth-child(even) .service-image{order:2} body[data-style=pop] .service-image{height:450px;border-radius:0;overflow:hidden;background:var(--soft)} body[data-style=pop] .service-copy{padding:0;max-width:520px} body[data-style=pop] .service h3{font:700 clamp(31px,3.3vw,48px)/1.12 var(--heading);letter-spacing:-.035em} body[data-style=pop] .service-copy p{font-size:16px;line-height:1.8;margin:20px 0} body[data-style=pop] .service-book{font-size:13px;border-bottom:1px solid var(--ink);text-decoration:none} body[data-style=pop] .about{background:var(--soft);max-width:none;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:8%} body[data-style=pop] .about-photo{height:560px} body[data-style=pop] .about-copy h2{max-width:12ch;margin-bottom:30px} body[data-style=pop] .about-copy>p{font-size:16px;line-height:1.8} body[data-style=pop] .team-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:35px 7%;max-width:1120px;margin:auto} body[data-style=pop] .team-member:nth-child(even){margin-top:85px} body[data-style=pop] .team-member img,body[data-style=pop] .member-initials{height:390px;width:100%;object-fit:contain;background:var(--soft);border-radius:0} body[data-style=pop] .team-member>.team-portrait{height:390px;overflow:hidden} body[data-style=pop] .team-person-copy{min-width:0;padding-top:0} body[data-style=pop] .team-profile-link{font-size:13px;margin-top:14px} body[data-style=pop] .team-member h3{font:700 29px/1.12 var(--heading);letter-spacing:-.025em;margin-top:20px} body[data-style=pop] .team-member p{font-size:15px;margin-top:9px} body[data-style=pop] .team-collective{max-width:1100px;margin:auto} body[data-style=pop] .photo-story{background:var(--soft);max-width:none;padding-bottom:100px} body[data-style=pop] .story-heading{max-width:740px;margin-bottom:55px} body[data-style=pop] .story-images{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9%;align-items:center;padding:0 2%} body[data-style=pop] .story-images figure:first-child{transform:rotate(-2deg)} body[data-style=pop] .story-images figure:nth-child(2){transform:rotate(3deg);margin-top:65px} body[data-style=pop] .story-images img{height:460px;object-fit:cover} body[data-style=pop] .story-images figcaption{font-size:12px;margin-top:16px;max-width:50ch} body[data-style=pop] .action-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px 7%;align-items:start} body[data-style=pop] .action-card:nth-child(even){padding-top:55px} body[data-style=pop] .action-card>img{height:390px;object-fit:contain;background:var(--soft)} body[data-style=pop] .action-card:nth-child(even)>img{height:290px} body[data-style=pop] .action-card>div{padding-top:25px} body[data-style=pop] .action-card h3{font:650 30px/1.15 var(--heading);letter-spacing:-.025em} body[data-style=pop] .action-card p{font-size:15px;line-height:1.8} body[data-style=pop] .single-action .action-grid{display:block;max-width:none} body[data-style=pop] .single-action .action-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:7%;align-items:center} body[data-style=pop] .single-action .action-card>img{height:450px} body[data-style=pop] .single-action .action-card>div{padding:0} body[data-style=pop] .news-feature{display:flex;flex-direction:column-reverse;gap:35px;padding:0;background:transparent;border-radius:0} body[data-style=pop] .news-images{width:100%;gap:25px} body[data-style=pop] .news-images img{height:470px;object-fit:contain;background:var(--soft)} body[data-style=pop] .news-feature>.commerce-news-head{align-self:start;max-width:870px} body[data-style=pop] .news-feature h2{max-width:20ch} body[data-style=pop] .news-feature .commerce-news-head>p{font-size:16px;line-height:1.8} body[data-style=pop] .booking{background:var(--soft);color:var(--ink);gap:9%;padding-block:90px} body[data-style=pop] .booking h2{font-size:clamp(42px,4.6vw,66px);max-width:12ch} body[data-style=pop] .local-booking{border:0;border-radius:0;padding:38px;background:var(--paper)} body[data-style=pop] .local-booking h3{font-size:30px;line-height:1.15} body[data-style=pop] .contact{display:block;border-top:0;padding-bottom:55px} body[data-style=pop] .contact h2{max-width:22ch;font-size:clamp(35px,4.5vw,65px);margin-bottom:35px} body[data-style=pop] .contact address{display:grid;grid-template-columns:1fr 1fr;gap:10px 7%;max-width:1000px;font-size:16px;margin-bottom:30px} body[data-style=pop] .contact>.action{width:100%;justify-content:space-between;padding-inline:30px} body[data-style=pop] .site-footer{background:var(--accent);color:var(--contrast);border-top:0;padding:28px 6%} body[data-style=pop] .booking-dock{border-radius:0;background:var(--ink);color:var(--paper);box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 18%,transparent)} /* PORTFOLIO — une galerie à parcourir, et un catalogue discret à côté des images. * Le rail photographique défile à l'intérieur de la page ; il ne peut pas élargir * le document. Le clavier peut le cibler. Aucun pseudo-bouton ne promet une action. */ body[data-style=portfolio] .site-header{border-bottom:1px solid var(--line);padding-inline:4%;background:var(--paper)} body[data-style=portfolio] .shop-brand{font-family:var(--heading);font-size:22px;font-weight:550;letter-spacing:-.035em} body[data-style=portfolio] .site-header nav{font-size:12px;gap:22px} body[data-style=portfolio] .site-header .nav-book{background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:8px 0;margin-left:9px} body[data-style=portfolio] .action{min-height:50px;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);padding:12px 0;justify-content:space-between;gap:40px;font-size:13px;font-weight:600;transition:gap .25s cubic-bezier(.16,1,.3,1)} body[data-style=portfolio] .action:hover{filter:none;gap:52px} body[data-style=portfolio] .graphic-portfolio{display:block;padding:38px 0 0;background:var(--paper);color:var(--ink);max-width:none;min-width:0} body[data-style=portfolio] .portfolio-editorial-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start;gap:10%;padding:0 4% 32px} body[data-style=portfolio] .graphic-portfolio h1{font-size:clamp(32px,3.4vw,49px);font-weight:500;line-height:1.14;letter-spacing:-.035em;max-width:22ch} body[data-style=portfolio] .portfolio-editorial-intro .hero-description{font-size:14px;line-height:1.75;max-width:48ch;margin-bottom:14px} body[data-style=portfolio] .portfolio-editorial-intro .action{min-width:230px} body[data-style=portfolio] .portfolio-gallery{display:flex;align-items:center;gap:24px;overflow-x:auto;overflow-y:hidden;padding:0 4% 20px;scroll-snap-type:x mandatory;scrollbar-color:var(--accent) var(--paper);scrollbar-width:thin;max-width:100%;min-width:0} body[data-style=portfolio] .portfolio-gallery>figure{flex:none;min-width:0;scroll-snap-align:center;overflow:hidden;border-radius:0} body[data-style=portfolio] .portfolio-gallery>.portfolio-lead{width:59%;height:clamp(390px,46vw,590px)} body[data-style=portfolio] .portfolio-gallery>.portfolio-study{width:29%;height:clamp(290px,33vw,430px)} body[data-style=portfolio] .portfolio-gallery>.portfolio-detail{width:39%;height:clamp(345px,39vw,505px)} body[data-style=portfolio] .portfolio-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)} body[data-style=portfolio] .portfolio-gallery figure:hover img{transform:scale(1.025)} body[data-style=portfolio] .portfolio-editorial-bottom{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:16px 4% 30px;border-bottom:1px solid var(--line)} body[data-style=portfolio] .portfolio-editorial-bottom>[data-shop-sign]{font-size:14px;font-weight:500;max-width:60%;overflow-wrap:anywhere} body[data-style=portfolio] .portfolio-editorial-bottom .text-link{font-size:12px} body[data-style=portfolio] .section{padding:clamp(68px,8vw,115px) 4%} body[data-style=portfolio] h2{font-size:clamp(35px,3.6vw,52px);font-weight:500;line-height:1.12;letter-spacing:-.035em} body[data-style=portfolio] .services{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:9%;align-items:start} body[data-style=portfolio] .services>.section-heading{display:block;position:sticky;top:calc(var(--shell) + 36px);margin:0} body[data-style=portfolio] .section-heading h2{max-width:12ch} body[data-style=portfolio] .section-description{font-size:14px;line-height:1.75;max-width:33ch;margin-top:25px} body[data-style=portfolio] .service-list{display:block;min-width:0} body[data-style=portfolio] .service{display:grid;grid-template-columns:110px minmax(0,1fr);gap:30px;padding:27px 0;border-top:1px solid var(--line);align-items:start} body[data-style=portfolio] .service:last-child{border-bottom:1px solid var(--line)} body[data-style=portfolio] .service-image{height:140px;border-radius:0;overflow:hidden} body[data-style=portfolio] .service-copy{padding:0;align-self:start} body[data-style=portfolio] .service h3{font:550 25px/1.2 var(--heading);letter-spacing:-.025em} body[data-style=portfolio] .service-copy p{font-size:14px;line-height:1.75;margin:12px 0} body[data-style=portfolio] .service-book{font-size:12px;font-weight:500;min-height:36px} body[data-style=portfolio] .about{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:9%;background:var(--paper);border-top:1px solid var(--line)} body[data-style=portfolio] .about-photo{height:590px} body[data-style=portfolio] .about-copy h2{max-width:15ch;margin-bottom:27px} body[data-style=portfolio] .about-copy>p{font-size:15px;line-height:1.8} body[data-style=portfolio] .team-heading{display:flex;justify-content:space-between;align-items:end;max-width:none;gap:9%;margin-bottom:40px} body[data-style=portfolio] .team-heading h2{margin:0;max-width:18ch} body[data-style=portfolio] .team-heading>p{max-width:40ch;font-size:13px} body[data-style=portfolio] .team-grid{display:flex;overflow-x:auto;gap:24px;padding-bottom:24px;scroll-snap-type:x proximity;scrollbar-width:thin;align-items:start} body[data-style=portfolio] .team-member{flex:0 0 calc((100% - 72px)/4);min-width:220px;scroll-snap-align:start} body[data-style=portfolio] .team-member img,body[data-style=portfolio] .member-initials{height:350px;width:100%;object-fit:contain;background:var(--soft);border-radius:0} body[data-style=portfolio] .team-member>.team-portrait{height:350px;overflow:hidden} body[data-style=portfolio] .team-person-copy{min-width:0} body[data-style=portfolio] .team-profile-link{font-size:12px;margin-top:13px} body[data-style=portfolio] .team-member h3{font:500 23px/1.2 var(--heading);margin-top:18px;letter-spacing:-.02em} body[data-style=portfolio] .team-member p{font-size:13px;line-height:1.65;margin-top:7px} body[data-style=portfolio] .photo-story{padding-top:65px;padding-bottom:85px;border-top:1px solid var(--line)} body[data-style=portfolio] .story-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9%;align-items:end;max-width:none;margin-bottom:40px} body[data-style=portfolio] .story-heading h2{margin:0} body[data-style=portfolio] .story-heading>p{font-size:13px;max-width:50ch} /* Une cimaise continue, de hauteur commune : les deux photographies ont le même * statut. Le second cadre dépasse volontairement du rail, jamais du document. * Le parent fournit de vrais boutons et un tabindex pour parcourir la cimaise. */ body[data-style=portfolio] .story-images{display:flex;gap:28px;align-items:start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--accent) var(--paper);padding:0 0 19px;max-width:100%;min-width:0} body[data-style=portfolio] .story-images figure,body[data-style=portfolio] .story-images figure:first-child,body[data-style=portfolio] .story-images figure:nth-child(2){flex:0 0 74%;width:74%;max-width:1000px;min-width:0;margin:0;scroll-snap-align:start} body[data-style=portfolio] .story-images img,body[data-style=portfolio] .story-images figure:nth-child(2) img{height:clamp(350px,42vw,600px);width:100%;object-fit:cover} body[data-style=portfolio] .story-images figcaption{font-size:12px;line-height:1.6;margin-top:13px} body[data-style=portfolio] .story-rail-controls{display:flex;justify-content:flex-end;gap:10px;margin-top:18px} body[data-style=portfolio] .story-rail-controls button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:48px;min-height:46px;padding:11px 17px;border:1px solid var(--line);border-radius:0;background:var(--paper);color:var(--ink);font:500 12px/1.4 var(--body);cursor:pointer;transition:background .2s ease,color .2s ease} body[data-style=portfolio] .story-rail-controls button:hover{background:var(--ink);color:var(--paper)} body[data-style=portfolio] .story-rail-controls button:disabled{opacity:.45;cursor:default} body[data-style=portfolio] .action-grid,body[data-style=portfolio] .single-action .action-grid{display:block;max-width:none} body[data-style=portfolio] .action-card,body[data-style=portfolio] .single-action .action-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10%;align-items:center;border-top:1px solid var(--line);padding:35px 0} body[data-style=portfolio] .action-card>img,body[data-style=portfolio] .single-action .action-card>img{height:390px;object-fit:contain;background:var(--soft)} body[data-style=portfolio] .action-card>div{padding:0} body[data-style=portfolio] .action-card h3{font:500 33px/1.15 var(--heading);letter-spacing:-.035em} body[data-style=portfolio] .action-card p{font-size:15px;line-height:1.8;margin-top:19px} body[data-style=portfolio] .news-feature{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:9%;align-items:center;border-top:1px solid var(--line);padding-top:40px} body[data-style=portfolio] .news-images{gap:20px} body[data-style=portfolio] .news-images img{height:490px;object-fit:contain;background:var(--soft)} body[data-style=portfolio] .news-feature .commerce-news-head>p{font-size:15px;line-height:1.8} body[data-style=portfolio] .booking{background:var(--paper);color:var(--ink);border-top:1px solid var(--line);gap:12%} body[data-style=portfolio] .booking h2{font-size:clamp(42px,4.3vw,62px);font-weight:500;max-width:12ch} body[data-style=portfolio] .local-booking{padding:32px;background:var(--paper);border:1px solid var(--line);border-radius:0} body[data-style=portfolio] .local-booking h3{font-weight:500;font-size:28px} body[data-style=portfolio] .contact{border-top:1px solid var(--line);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px 12%;padding-block:70px} body[data-style=portfolio] .contact h2{font-size:clamp(34px,4vw,57px);font-weight:500;max-width:20ch} body[data-style=portfolio] .contact address{font-size:14px;line-height:1.9} body[data-style=portfolio] .contact>.action{justify-self:start;min-width:250px} body[data-style=portfolio] .site-footer{padding:25px 4%;font-size:11px;background:var(--ink);color:var(--paper);border-top:0} body[data-style=portfolio] .booking-dock{border:1px solid var(--line);border-radius:0;box-shadow:none;background:var(--paper);color:var(--ink);font-size:13px;font-weight:500} /* Adaptation tablette : la typographie et les proportions changent avant que le * texte ne se trouve comprimé. Le rail du portfolio reste un vrai rail défilable. */ @media(max-width:1100px){ body[data-style=studio] .graphic-studio h1{font-size:clamp(44px,6.7vw,74px)} body[data-style=studio] .studio-poster-photo{height:560px} body[data-style=studio] .action-grid{grid-template-columns:1fr} body[data-style=studio] .action-card{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)} body[data-style=studio] .service,body[data-style=studio] .service:first-child{grid-template-columns:95px minmax(0,1fr);gap:24px} body[data-style=studio] .service-image,body[data-style=studio] .service:first-child .service-image{width:95px;height:125px} body[data-style=studio] .service-copy,body[data-style=studio] .service:first-child .service-copy{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:10px 7%} body[data-style=studio] .service h3{font-size:29px} body[data-style=pop] .graphic-pop h1{font-size:clamp(43px,5.8vw,65px)} body[data-style=pop] .pop-campaign-media{height:540px;padding-top:40px} body[data-style=pop] .pop-primary{height:420px} body[data-style=pop] .pop-secondary{height:270px} body[data-style=pop] .service-image{height:370px} body[data-style=pop] .team-member img,body[data-style=pop] .member-initials{height:330px} body[data-style=pop] .team-member>.team-portrait{height:330px} body[data-style=portfolio] .services{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:7%} body[data-style=portfolio] .service{grid-template-columns:88px minmax(0,1fr);gap:22px} body[data-style=portfolio] .service-image{height:120px} body[data-style=portfolio] .portfolio-gallery>.portfolio-lead{width:67%;height:490px} body[data-style=portfolio] .portfolio-gallery>.portfolio-study{width:34%;height:360px} body[data-style=portfolio] .portfolio-gallery>.portfolio-detail{width:43%;height:430px} } /* Téléphone : conserver trois silhouettes, et des informations dans le flux. * Les superpositions Pop concernent les photographies seulement ; le texte et * les commandes gardent leur espace. Les contacts longs peuvent revenir à la ligne. */ @media(max-width:760px){ body[data-style=studio] .site-header{padding-inline:5%} body[data-style=studio] .shop-brand{font-size:20px} body[data-style=studio] .graphic-studio{display:block;padding:0 5%} body[data-style=studio] .studio-poster-copy{padding:31px 0 30px;gap:23px} body[data-style=studio] .graphic-studio h1{font-size:clamp(43px,10.6vw,66px);line-height:.99;max-width:14ch} body[data-style=studio] .studio-poster-caption{gap:20px;max-width:100%} body[data-style=studio] .studio-poster-caption .hero-description{font-size:14px;max-width:47ch} body[data-style=studio] .studio-poster-photo{height:320px;margin-top:0;border-top-width:8px} body[data-style=studio] .studio-poster-bottom{padding:19px 0;gap:20px} body[data-style=studio] .studio-poster-bottom>[data-shop-sign]{font-size:25px;max-width:62%} body[data-style=studio] .studio-poster-bottom .text-link{font-size:11px;max-width:18ch;gap:8px} body[data-style=studio] .section{padding:55px 5%} body[data-style=studio] h2{font-size:36px} body[data-style=studio] .section-heading{display:block;padding-bottom:23px;margin-bottom:28px} body[data-style=studio] .section-description{font-size:13px;margin-top:20px} body[data-style=studio] .services .section-heading h2{font-size:35px;max-width:20ch} body[data-style=studio] .service-list{display:block} body[data-style=studio] .service,body[data-style=studio] .service:first-child{display:grid;grid-template-columns:62px minmax(0,1fr);gap:18px;align-items:start;padding:23px 0;grid-column:auto} body[data-style=studio] .service-image,body[data-style=studio] .service:first-child .service-image{width:62px;height:84px;margin-top:3px} body[data-style=studio] .service-copy,body[data-style=studio] .service:first-child .service-copy{display:block;padding:0} body[data-style=studio] .service h3{font-size:27px;max-width:17ch} body[data-style=studio] .service-copy p{font-size:13px;line-height:1.7;margin:11px 0 7px} body[data-style=studio] .service-book{font-size:12px;letter-spacing:.015em;min-height:44px;padding-block:10px} body[data-style=studio] .about{grid-template-columns:1fr;gap:29px} body[data-style=studio] .about-photo{height:360px} body[data-style=studio] .about-copy{padding-top:24px} body[data-style=studio] .about-copy>p{font-size:14px} body[data-style=studio] .team-heading{display:block;margin-bottom:25px} body[data-style=studio] .team-heading>p{margin-top:18px} body[data-style=studio] .team-member{grid-template-columns:88px minmax(0,1fr);gap:7px 20px;padding:19px 0} body[data-style=studio] .team-member>.team-portrait{width:88px;height:112px;grid-row:auto} body[data-style=studio] .team-person-copy{display:block} body[data-style=studio] .team-profile-link{font-size:11px;margin-top:8px} body[data-style=studio] .team-member img,body[data-style=studio] .member-initials{grid-row:1/3;width:88px;height:112px} body[data-style=studio] .team-member h3{font-size:26px;align-self:end} body[data-style=studio] .team-member p{grid-column:2;font-size:12px;align-self:start} body[data-style=studio] .story-images figure:first-child{width:100%} body[data-style=studio] .story-images figure:nth-child(2){width:78%;margin-top:28px} body[data-style=studio] .story-images img{height:320px} body[data-style=studio] .story-images figure:nth-child(2) img{height:250px} body[data-style=studio] .action-grid{grid-template-columns:1fr;gap:30px} body[data-style=studio] .action-card{grid-template-columns:1fr;gap:20px} body[data-style=studio] .action-card>img{height:310px} body[data-style=studio] .action-card h3{font-size:26px} body[data-style=studio] .single-action .action-card{display:block} body[data-style=studio] .single-action .action-card>img{height:330px} body[data-style=studio] .single-action .action-card>div{padding-top:22px} body[data-style=studio] .news-feature{grid-template-columns:1fr;gap:28px} body[data-style=studio] .news-images img{height:330px} body[data-style=studio] .booking-intro{display:block} body[data-style=studio] .booking-intro h2{font-size:43px;margin-bottom:27px} body[data-style=studio] .booking-intro>p{font-size:13px} body[data-style=studio] .booking-panel{margin:28px 0 0} body[data-style=studio] .local-booking{padding:26px} body[data-style=studio] .contact{grid-template-columns:1fr;gap:25px} body[data-style=studio] .contact h2{font-size:36px} body[data-style=studio] .contact>.action{grid-column:1} body[data-style=studio] .site-footer{padding:25px 5%;letter-spacing:.01em;font-size:11px} body[data-style=pop] .shop-brand{font-size:20px} body[data-style=pop] .graphic-pop{display:flex;flex-direction:column;padding:31px 6% 0;gap:0} body[data-style=pop] .pop-campaign-copy{padding:0 0 23px;align-self:stretch} body[data-style=pop] .graphic-pop h1{font-size:clamp(40px,10.7vw,66px);max-width:15ch;line-height:1.04} body[data-style=pop] .pop-campaign-copy .hero-description{font-size:14px;line-height:1.75;margin:19px 0 23px;max-width:47ch} body[data-style=pop] .pop-campaign-copy .action{min-height:54px;font-size:13px} body[data-style=pop] .pop-campaign-media{width:100%;height:350px;flex:none;padding:15px 4% 35px;position:relative} body[data-style=pop] .pop-primary{height:285px;width:72%;border-radius:0;transform:rotate(-3deg)} body[data-style=pop] .pop-secondary{width:43%;height:200px;bottom:20px;right:1%;border-radius:0;transform:rotate(5deg);margin:0} body[data-style=pop] .pop-campaign-sign{margin:0 -6.8181818%;padding:23px 6.8181818%;gap:22px} body[data-style=pop] .pop-campaign-sign>[data-shop-sign]{font-size:28px;max-width:66%} body[data-style=pop] .pop-campaign-sign .text-link{font-size:12px;gap:10px} body[data-style=pop] h2{font-size:36px} body[data-style=pop] .section{padding:56px 6%} body[data-style=pop] .section-heading{display:block;margin-bottom:33px} body[data-style=pop] .section-description{font-size:13px;margin-top:20px;padding:0;max-width:48ch} body[data-style=pop] .service,body[data-style=pop] .service:nth-child(2){grid-template-columns:1fr;gap:23px;margin-bottom:43px} body[data-style=pop] .service:nth-child(even) .service-image{order:0} body[data-style=pop] .service-image{height:330px;border-radius:0} body[data-style=pop] .service h3{font-size:31px} body[data-style=pop] .service-copy p{font-size:14px;margin:14px 0} body[data-style=pop] .about{grid-template-columns:1fr;gap:27px} body[data-style=pop] .about-photo{height:360px} body[data-style=pop] .about-copy>p{font-size:14px} body[data-style=pop] .team-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 16px} body[data-style=pop] .team-member:nth-child(even){margin-top:43px} body[data-style=pop] .team-member img,body[data-style=pop] .member-initials{height:205px} body[data-style=pop] .team-member>.team-portrait{height:205px} body[data-style=pop] .team-member h3{font-size:21px;margin-top:15px} body[data-style=pop] .team-member p{font-size:12px} body[data-style=pop] .photo-story{padding-block:55px 70px} body[data-style=pop] .story-heading{margin-bottom:35px} body[data-style=pop] .story-images{display:block;padding:0 3%} body[data-style=pop] .story-images figure:first-child{width:94%;transform:rotate(-2deg)} body[data-style=pop] .story-images figure:nth-child(2){width:85%;margin:38px 0 0 auto;transform:rotate(3deg)} body[data-style=pop] .story-images img{height:330px} body[data-style=pop] .story-images figure:nth-child(2) img{height:285px} body[data-style=pop] .action-grid{grid-template-columns:1fr;gap:33px} body[data-style=pop] .action-card:nth-child(even){padding-top:0} body[data-style=pop] .action-card>img,body[data-style=pop] .action-card:nth-child(even)>img{height:335px} body[data-style=pop] .action-card h3{font-size:27px} body[data-style=pop] .action-card p{font-size:14px} body[data-style=pop] .single-action .action-card{display:block} body[data-style=pop] .single-action .action-card>img{height:335px} body[data-style=pop] .single-action .action-card>div{padding-top:24px} body[data-style=pop] .news-feature{padding:0;gap:25px} body[data-style=pop] .news-images img{height:330px} body[data-style=pop] .news-feature .commerce-news-head>p{font-size:14px} body[data-style=pop] .booking{display:block;padding-block:57px} body[data-style=pop] .booking h2{font-size:41px;max-width:14ch} body[data-style=pop] .booking-panel{margin-top:30px} body[data-style=pop] .local-booking{padding:26px} body[data-style=pop] .contact h2{font-size:37px;margin-bottom:27px} body[data-style=pop] .contact address{grid-template-columns:1fr;gap:5px;font-size:14px;margin-bottom:25px} body[data-style=pop] .site-footer{padding:28px 6%} body[data-style=portfolio] .site-header{padding-inline:5%} body[data-style=portfolio] .shop-brand{font-size:20px} body[data-style=portfolio] .graphic-portfolio{display:flex;flex-direction:column;padding:0} body[data-style=portfolio] .portfolio-editorial-intro{display:block;order:1;padding:25px 6% 26px} body[data-style=portfolio] .graphic-portfolio h1{font-size:34px;max-width:21ch;line-height:1.14} body[data-style=portfolio] .portfolio-editorial-intro>div{margin-top:18px} body[data-style=portfolio] .portfolio-editorial-intro .hero-description{font-size:13px;line-height:1.75;max-width:48ch;margin-bottom:13px} body[data-style=portfolio] .portfolio-editorial-intro .action{min-width:235px} body[data-style=portfolio] .portfolio-gallery{order:0;gap:16px;padding:18px 6% 15px;align-items:center} body[data-style=portfolio] .portfolio-gallery>.portfolio-lead{width:84%;height:310px} body[data-style=portfolio] .portfolio-gallery>.portfolio-study{width:62%;height:245px} body[data-style=portfolio] .portfolio-gallery>.portfolio-detail{width:72%;height:280px} body[data-style=portfolio] .portfolio-editorial-bottom{order:2;padding:17px 6%;gap:23px;align-items:start} body[data-style=portfolio] .portfolio-editorial-bottom>[data-shop-sign]{font-size:12px;max-width:58%} body[data-style=portfolio] .portfolio-editorial-bottom .text-link{font-size:11px;gap:9px;max-width:20ch;line-height:1.5} body[data-style=portfolio] .section{padding:56px 6%} body[data-style=portfolio] h2{font-size:34px;line-height:1.14} body[data-style=portfolio] .services{display:block} body[data-style=portfolio] .services>.section-heading{position:static;display:block;margin-bottom:26px} body[data-style=portfolio] .section-heading h2{max-width:17ch} body[data-style=portfolio] .section-description{font-size:13px;max-width:48ch;margin-top:18px} body[data-style=portfolio] .service{grid-template-columns:83px minmax(0,1fr);gap:20px;padding:22px 0} body[data-style=portfolio] .service-image{height:110px} body[data-style=portfolio] .service h3{font-size:21px} body[data-style=portfolio] .service-copy p{font-size:13px;line-height:1.65;margin:10px 0} body[data-style=portfolio] .service-book{font-size:11px;line-height:1.5;min-height:44px} body[data-style=portfolio] .about{grid-template-columns:1fr;gap:28px} body[data-style=portfolio] .about-photo{height:370px} body[data-style=portfolio] .about-copy>p{font-size:14px} body[data-style=portfolio] .team-heading{display:block;margin-bottom:28px} body[data-style=portfolio] .team-heading>p{font-size:12px;max-width:50ch;margin-top:19px} body[data-style=portfolio] .team-grid{gap:20px;padding-bottom:21px} body[data-style=portfolio] .team-member{flex:0 0 72%;min-width:0} body[data-style=portfolio] .team-member img,body[data-style=portfolio] .member-initials{height:340px} body[data-style=portfolio] .team-member>.team-portrait{height:340px} body[data-style=portfolio] .team-member h3{font-size:22px} body[data-style=portfolio] .photo-story{padding-block:54px} body[data-style=portfolio] .story-heading{display:block;margin-bottom:27px} body[data-style=portfolio] .story-heading>p{font-size:12px;max-width:49ch;margin-top:19px} body[data-style=portfolio] .story-images{display:flex;gap:18px;padding-bottom:15px} body[data-style=portfolio] .story-images figure,body[data-style=portfolio] .story-images figure:first-child,body[data-style=portfolio] .story-images figure:nth-child(2){flex:0 0 88%;width:88%;max-width:none;min-width:0;margin:0} body[data-style=portfolio] .story-images img,body[data-style=portfolio] .story-images figure:nth-child(2) img{height:330px;width:100%} body[data-style=portfolio] .story-rail-controls{justify-content:space-between;gap:12px;margin-top:16px} body[data-style=portfolio] .story-rail-controls button{flex:1;min-width:0;padding:11px 10px;font-size:12px} body[data-style=portfolio] .action-card,body[data-style=portfolio] .single-action .action-card{display:block;padding:28px 0} body[data-style=portfolio] .action-card>img,body[data-style=portfolio] .single-action .action-card>img{height:330px} body[data-style=portfolio] .action-card>div{padding-top:24px} body[data-style=portfolio] .action-card h3{font-size:28px} body[data-style=portfolio] .action-card p{font-size:14px;margin-top:15px} body[data-style=portfolio] .news-feature{grid-template-columns:1fr;gap:28px;padding-top:28px} body[data-style=portfolio] .news-images img{height:330px} body[data-style=portfolio] .news-feature .commerce-news-head>p{font-size:14px} body[data-style=portfolio] .booking{grid-template-columns:1fr;gap:28px} body[data-style=portfolio] .booking h2{font-size:39px;max-width:15ch} body[data-style=portfolio] .local-booking{padding:25px} body[data-style=portfolio] .contact{grid-template-columns:1fr;gap:27px;padding-block:54px} body[data-style=portfolio] .contact h2{font-size:35px} body[data-style=portfolio] .contact>.action{grid-column:1;min-width:230px;justify-self:start} body[data-style=portfolio] .site-footer{padding:27px 6%} } /* Les formats choisis par la commerçante priment sur les cadrages de démonstration. * Une rotation de montage ne doit jamais couper une photo explicitement cadrée. */ body[data-style=pop] .pop-campaign-media:has([data-crafteno-photo-format]){display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:18px;height:auto;min-height:0;align-items:center;padding:25px 0 35px} body[data-style=pop] .pop-campaign-media:has([data-crafteno-photo-format])>figure{position:static;width:100%;height:auto;min-height:0;margin:0;transform:none;box-shadow:none} body[data-style=pop] .pop-campaign-media:has([data-crafteno-photo-format])>figure img{height:auto;object-fit:contain} body[data-style=portfolio] .portfolio-gallery>figure:has([data-crafteno-photo-format]){height:auto;align-self:center} body[data-style=portfolio] .portfolio-gallery [data-crafteno-photo-format]{object-fit:contain} /* Les contenus ne sont jamais cachés en attendant une animation. Le mouvement * réduit conserve les retours de couleur, mais retire déplacement et zoom. */ @media(prefers-reduced-motion:reduce){ body[data-style=studio] .action svg,body[data-style=studio] .text-link svg, body[data-style=portfolio] .portfolio-gallery img{transform:none!important;transition:none!important} body[data-style=pop] .pop-primary,body[data-style=pop] .pop-secondary, body[data-style=pop] .story-images figure{transform:none!important} } /* Interactions lisibles — les couleurs restent celles du commerce. * Le survol des portraits reprend le comportement montré par Yves sur Hair Style : * changement de fond, mouvement de la photographie et accès aux rendez-vous. * Le lien reste générique : le modèle ne prétend pas avoir sélectionné une personne * dans le moteur de réservation, dont les identifiants ne sont pas fournis ici. */ .art-direction .prototype-bar{font-size:12px;min-height:30px;padding-block:3px} .art-direction .prototype-bar a{min-height:24px} .art-direction .palette-picker{position:relative;z-index:1;max-width:none;width:100%;margin:0;border:0;border-top:1px solid var(--line);background:var(--paper);color:var(--ink);box-shadow:none} .art-direction .palette-summary{min-height:44px;padding:12px 18px;gap:24px;font-size:12px} .art-direction .palette-picker[open]{width:100%;max-width:none;max-height:none;overflow:visible} .art-direction .palette-content{padding:16px 20px 24px} .art-direction #palette-options{grid-template-columns:repeat(5,minmax(0,1fr))} .art-direction #palette-options button{font-size:12px} .art-direction .personal-color-fields{gap:12px} .art-direction .palette-intro{display:block} .art-direction .palette-intro p{margin-top:8px} .art-direction #replay-art-motion{margin-top:16px;display:block} .art-direction .team-portrait{margin:0;overflow:hidden;position:relative;min-width:0} .art-direction .team-member img{transition:transform .65s cubic-bezier(.16,1,.3,1),filter .45s ease;transform-origin:50% 40%} .art-direction .team-person-copy{position:relative;min-width:0;transition:color .35s,background-color .35s} .art-direction .team-profile-link{display:inline-flex;gap:12px;align-items:center;min-height:44px;padding-top:12px;font:600 12px/1.5 var(--body);text-decoration:none} .art-direction .team-profile-link svg{width:20px;height:20px;transition:transform .3s cubic-bezier(.16,1,.3,1)} .art-direction .team-member{transition:transform .45s cubic-bezier(.16,1,.3,1),background-color .35s,color .35s,box-shadow .45s} .art-direction .action,.art-direction .nav-book,.art-direction .booking-dock{transition:background-color .25s,color .25s,box-shadow .3s} .art-direction .action svg,.art-direction .text-link svg,.art-direction .service-book svg{transition:transform .35s cubic-bezier(.16,1,.3,1)} .art-direction .action:hover svg,.art-direction .action:focus-visible svg,.art-direction .text-link:hover svg,.art-direction .team-profile-link:hover svg{transform:translateX(6px)} .art-direction .service-image{position:relative;isolation:isolate} .art-direction .service-image img{transition:transform .85s cubic-bezier(.16,1,.3,1),filter .45s} .art-direction .main-photo{transform:translate3d(0,var(--camera-y,0px),0);transition:filter .4s} .art-direction .about-photo figcaption,.art-direction .news-images figcaption,.art-direction .nocturne-baseline .text-link{font-size:12px} /* Portrait ou paysage choisi explicitement : aucun zoom ne recadre cette image. */ .art-direction img[data-crafteno-photo-format]{transform:none!important} .art-direction .story-images:focus-visible{outline:3px solid var(--accent);outline-offset:7px} @media(hover:hover) and (pointer:fine){ .art-direction .team-member:hover,.art-direction .team-member:focus-within{transform:translateY(-7px);background:var(--ink);color:var(--paper);box-shadow:0 15px 32px color-mix(in srgb,var(--ink) 15%,transparent)} .art-direction .team-member:hover .team-person-copy,.art-direction .team-member:focus-within .team-person-copy{background:var(--ink);color:var(--paper)} .art-direction .team-member:hover img:not([data-crafteno-photo-format]),.art-direction .team-member:focus-within img:not([data-crafteno-photo-format]){transform:scale(1.065);filter:contrast(1.035)} .art-direction .team-profile-link{opacity:0;transform:translateY(5px);transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1)} .art-direction .team-member:hover .team-profile-link,.art-direction .team-member:focus-within .team-profile-link{opacity:1;transform:none} .art-direction .service-image:hover img:not([data-crafteno-photo-format]),.art-direction .service-image:focus-visible img:not([data-crafteno-photo-format]){transform:scale(1.045)} } /* L'image Pop flotte doucement comme un tirage en suspension. Le moteur met ce * mouvement en pause hors écran, dans un onglet masqué ou en mouvement réduit. */ @keyframes art-pop-breathe{0%,100%{translate:0 0}50%{translate:0 -10px}} body.art-direction[data-style=pop] .hero figure:nth-of-type(2){animation:art-pop-breathe 5s ease-in-out infinite;animation-play-state:paused} body.art-direction[data-style=pop][data-art-in-view=true][data-art-page-visible=true] .hero figure:nth-of-type(2){animation-play-state:running} @media(max-width:760px){ .art-direction .palette-picker{left:auto;bottom:auto;max-width:none} .art-direction .palette-summary{font-size:12px;min-height:40px;padding:10px 12px;gap:14px} .art-direction .palette-picker[open]{width:100%;max-height:none} .art-direction .prototype-bar>span:not(#model-label){display:none} .art-direction .personal-color-fields{grid-template-columns:1fr} .art-direction .team-profile-link{opacity:1;transform:none} } @media(prefers-reduced-motion:reduce){ .art-direction .team-member,.art-direction .team-member img,.art-direction .service-image img,.art-direction .team-profile-link,.art-direction .main-photo{transform:none!important;transition:background-color .15s,color .15s,filter .15s;animation:none!important} .art-direction .hero figure,.art-direction .hero img{animation:none!important;translate:none!important} .art-direction .action svg,.art-direction .text-link svg{transition:none;transform:none} } /* Accès aux couleurs de la démonstration : cible tactile de 44px et contraste * inversé provenant de la palette active. La hauteur réelle du menu est mesurée. * Ce bouton reste dans la barre masquée des sites marchands/exportés. */ .art-direction .prototype-bar .choose-colors{display:inline-flex;align-items:center;justify-content:center;min-height:44px;flex:none;padding:8px 14px;border:1px solid var(--paper);border-radius:5px;background:var(--paper);color:var(--ink);font:700 13px/1.3 var(--body);cursor:pointer;white-space:nowrap} .art-direction .prototype-bar .choose-colors:hover{filter:brightness(.94)} .art-direction .prototype-bar .choose-colors:focus-visible{outline:3px solid var(--paper);outline-offset:3px} @media(max-width:480px){.art-direction .prototype-bar{gap:8px;padding-inline:3%}.art-direction .prototype-bar .choose-colors{padding-inline:10px;font-size:12px}} /* Fenêtre de couleurs non modale : elle ne masque pas la page entière, ne la * grise pas et ne bloque pas son défilement. Les couleurs de la fenêtre restent * neutres pour distinguer les échantillons de l’effet réellement appliqué au site. */ .colors-popup{position:fixed;z-index:180;top:calc(var(--shell) + 12px);right:16px;width:350px;max-width:calc(100vw - 24px);max-height:calc(100dvh - var(--shell) - 28px);overflow:auto;overscroll-behavior:contain;background:#fff;color:#17232d;border:1px solid #aab3ba;border-radius:12px;box-shadow:0 12px 34px #17232d33;font:14px/1.45 'Public Sans',sans-serif} .colors-popup-header{position:sticky;top:0;z-index:2;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:8px 12px;background:#fff;border-bottom:1px solid #d9dee2} .colors-popup-header h2{font:700 16px/1.25 'Public Sans',sans-serif;letter-spacing:0;text-wrap:initial} .colors-popup-header .colors-popup-close{min-height:44px;padding:8px;border:0;background:#fff;color:#17232d;font-size:12px;white-space:nowrap;cursor:pointer} .colors-popup .palette-content{padding:10px 12px 12px}.colors-popup .palette-intro{display:none}.colors-popup .personalize-jump{margin-bottom:10px}.colors-popup #palette-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px} .colors-popup #palette-options button{min-height:48px;padding:6px;background:#fff;color:#17232d;border:1px solid #aab3ba;font-size:11px;line-height:1.2} .colors-popup #palette-options button[aria-pressed=true]{outline:2px solid #17232d;outline-offset:0;border-color:#17232d} .colors-popup .palette-chips{margin-bottom:5px}.colors-popup .palette-chips i{height:12px}.colors-popup .palette-vivid-toggle{margin:10px 0;min-height:44px;font-size:13px} .colors-popup .custom-color-options>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:650} .colors-popup .personal-colors{padding:10px;margin:0 0 10px}.colors-popup .personal-colors>p{font-size:12px}.colors-popup .personal-color-fields{grid-template-columns:1fr;gap:10px;margin-top:10px} .colors-popup #copy-color-choice{min-height:44px;width:100%;margin-top:6px;background:#17232d;color:#fff;border-color:#17232d} .colors-popup #palette-status,.colors-popup #copy-color-status{font-size:12px;margin-top:6px}.colors-popup #replay-art-motion{display:none} .colors-popup :focus-visible{outline:3px solid #2044ed;outline-offset:2px} @media(max-width:760px){.colors-popup{top:auto;right:8px;bottom:8px;left:8px;width:auto;max-width:none;max-height:43dvh;box-shadow:0 -8px 28px #17232d26}.colors-popup #palette-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.colors-popup #palette-options button{min-height:56px;font-size:10px;padding:5px 3px}.colors-popup .palette-content{padding:8px}.colors-popup .palette-vivid-toggle{margin:5px 0}.colors-popup .custom-color-options>summary{min-height:44px}.colors-popup-header{padding:3px 10px}.colors-popup .palette-chips i{height:10px}} /* RECETTE BOUTONS — équipe Portfolio commandée. * La consigne n’existe visuellement qu’en cas de défilement nécessaire. * La flèche précédente inverse le même SVG que la galerie, sans icône externe. */ .art-direction .prototype-bar a{display:inline-flex;align-items:center;min-height:44px} body[data-style=portfolio] .team-rail-controls{justify-content:space-between;align-items:center;gap:16px;margin-top:10px} body[data-style=portfolio] .team-rail-controls p{font:12px/1.6 var(--body);max-width:38ch} body[data-style=portfolio] .team-rail-controls>div{display:flex;gap:10px;flex:none} body[data-style=portfolio] .team-rail-controls button{min-width:44px;min-height:44px} body[data-style=portfolio] .team-rail-controls [data-team-prev] svg{transform:rotate(180deg)} body[data-style=portfolio] .team-grid:focus-visible{outline:3px solid var(--accent);outline-offset:5px} @media(max-width:760px){ .art-direction .palette-summary{min-height:44px} body[data-style=portfolio] .team-rail-controls{gap:12px;align-items:start} body[data-style=portfolio] .team-rail-controls>div{gap:8px} } /* FORMES SUR FOND UNIFORME — essai Naturel et Studio demandé par Yves. * Configuration visuelle unique : les couleurs proviennent de configuration.js. * --paper : fond choisi, couleur CSS obligatoire ; aucune couleur client ajoutée. * --form-curve : rayon des contours Naturel, longueur CSS, obligatoire, > 0. * --form-cut : profondeur des biseaux Studio, longueur CSS, obligatoire, > 0. * --form-gap : espace entre compositions, longueur CSS, obligatoire, > 0. * Un réglage vide reprend la valeur ci-dessous. Textes, photos, prix et liens * restent intégralement fournis par la configuration existante du modèle. */ body:is([data-style=naturel],[data-style=studio]){--form-curve:90px;--form-cut:38px;--form-gap:clamp(30px,5vw,78px);background:var(--paper);color:var(--ink)} /* Le papier traverse toute la page. Les rubriques, fiches et légendes ne créent * plus de bandes colorées. Les boutons restent contrastés et les photos gardent * leurs couleurs ; le panneau de choix conserve ses contrôles neutres lisibles. */ body:is([data-style=naturel],[data-style=studio]) :is(.prototype-bar,.site-header,.site-header nav,.hero,.section,.site-footer,.service,.service-copy,.action-card,.action-card>div,.team-member,.team-person-copy,.team-portrait,.local-booking,.booking-panel,.botanical-address,.studio-poster-bottom,.studio-poster-caption){background:var(--paper);color:var(--ink);box-shadow:none} body:is([data-style=naturel],[data-style=studio]) :is(.prototype-bar,.site-header,.section,.site-footer){border-color:transparent} body:is([data-style=naturel],[data-style=studio]) .prototype-bar{border-bottom:1px solid var(--line)} body:is([data-style=naturel],[data-style=studio]) .prototype-bar .choose-colors{border-color:var(--ink)} body:is([data-style=naturel],[data-style=studio]) .shop-brand{display:inline-flex;align-items:center;min-height:44px} body:is([data-style=naturel],[data-style=studio]) .booking-intro a{display:inline-flex;align-items:center;min-height:44px} body:is([data-style=naturel],[data-style=studio]) .service-book{min-height:44px;display:inline-flex;align-items:center} /* Le survol signale la personne par le mouvement et le soulignement, en gardant * le papier uniforme. Le focus clavier conserve son contour de sécurité. */ body:is([data-style=naturel],[data-style=studio]) .team-member:is(:hover,:focus-within),body:is([data-style=naturel],[data-style=studio]) .team-member:is(:hover,:focus-within) .team-person-copy{background:var(--paper);color:var(--ink);box-shadow:none} body:is([data-style=naturel],[data-style=studio]) .team-profile-link{opacity:1;transform:none;color:var(--ink)} /* NATUREL : les contours courbes relient les compositions. Les fonds ne changent * pas aux jonctions. Les découpes photographiques ne portent jamais sur un texte. */ body[data-style=naturel] .botanical-journal h1{max-width:13ch} body[data-style=naturel] .botanical-portrait{border-radius:48% 48% 8% 8%;height:610px} body[data-style=naturel] .botanical-portrait img{object-position:68% center} body[data-style=naturel] .botanical-detail{border-radius:50% 50% 4% 4%} body[data-style=naturel] .section-heading{border:0;padding-bottom:0} body[data-style=naturel] .service-list{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--form-gap);align-items:start} body[data-style=naturel] .service{position:relative;padding:28px;border:1px solid var(--line);border-radius:var(--form-curve) 12px var(--form-curve) 12px} body[data-style=naturel] .service:first-child{grid-row:span 2;border-radius:45% 45% 12px 12px;padding-top:28px} body[data-style=naturel] .service:nth-child(2){padding-top:28px;margin-top:65px} body[data-style=naturel] .service-image{border-radius:65px 8px 65px 8px;height:250px} body[data-style=naturel] .service:first-child .service-image{height:480px;border-radius:48% 48% 10px 10px} body[data-style=naturel] .about{border-radius:0;position:relative;gap:10%} body[data-style=naturel] .about-copy{border:1px solid var(--line);border-radius:12px var(--form-curve) 12px var(--form-curve);padding:45px 38px;margin-left:-55px;z-index:1;background:var(--paper)} body[data-style=naturel] .about-photo{width:110%;height:590px;z-index:2;pointer-events:none} body[data-style=naturel] .about-photo img{border-radius:48% 48% 10px 10px} body[data-style=naturel] .story-images figure:first-child img{border-radius:50%;height:430px} body[data-style=naturel] .story-images figure:nth-child(2){margin-top:110px} body[data-style=naturel] .story-images figure:nth-child(2) img{border-radius:46% 46% 8px 8px;height:540px} body[data-style=naturel] .team-grid{gap:55px 36px;padding-top:30px} body[data-style=naturel] .team-member{position:relative;border:1px solid var(--line);border-radius:80px 8px 80px 8px;padding:0 18px 28px} body[data-style=naturel] .team-member:nth-child(even){padding-top:0;margin-top:65px} body[data-style=naturel] .team-member>.team-portrait{margin:-30px 0 0;border-radius:48% 48% 6px 6px;overflow:hidden} body[data-style=naturel] .team-member img{background:var(--paper);border-radius:0;height:245px} body[data-style=naturel] .team-person-copy{padding-top:5px} body[data-style=naturel] .booking{border-radius:var(--form-curve) 12px var(--form-curve) 12px;border:1px solid var(--line);width:88%;padding-inline:5%;margin:45px auto} body[data-style=naturel] .local-booking{padding:26px 0;border-top:1px solid var(--line)} body[data-style=naturel] .contact{border:0;border-radius:0} body[data-style=naturel] .action-card{background:transparent} body[data-style=naturel] .action-card:nth-child(2)>img{border-radius:8px 80px 8px 80px} /* STUDIO : composition en escalier, biseaux sur les photos et filets obliques. * Les liens et textes restent dans des rectangles entiers pour ne rien couper. */ body[data-style=studio] .graphic-studio{border:0;gap:4%} body[data-style=studio] .studio-poster-photo{border:0;clip-path:polygon(var(--form-cut) 0,100% 0,100% calc(100% - var(--form-cut)),calc(100% - var(--form-cut)) 100%,0 100%,0 var(--form-cut));margin-top:35px} body[data-style=studio] .studio-poster-bottom{border:0} body[data-style=studio] .section-heading{border:0} body[data-style=studio] .service-list{display:block;padding-bottom:30px} body[data-style=studio] .service,body[data-style=studio] .service:first-child{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(0,1fr);gap:5%;width:82%;border:0;border-bottom:1px solid var(--line);padding:28px 0;margin:0 0 45px} body[data-style=studio] .service:nth-child(2){margin-left:9%} body[data-style=studio] .service:nth-child(3){margin-left:18%} body[data-style=studio] .service-copy,body[data-style=studio] .service:first-child .service-copy{display:block;padding:10px 0} body[data-style=studio] .service-image,body[data-style=studio] .service:first-child .service-image{height:250px;width:100%;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--form-cut)),calc(100% - var(--form-cut)) 100%,0 100%)} body[data-style=studio] .service h3{font-size:clamp(28px,3.3vw,47px)} body[data-style=studio] .service-copy p{max-width:44ch;margin-block:18px} body[data-style=studio] .about{border:0;gap:7%} body[data-style=studio] .about-photo{clip-path:polygon(var(--form-cut) 0,100% 0,100% 100%,0 100%,0 var(--form-cut))} body[data-style=studio] .about-copy{border:0;padding-top:55px} body[data-style=studio] .story-images figure:first-child{width:88%} body[data-style=studio] .story-images figure:first-child img{clip-path:polygon(0 0,100% 0,100% 78%,84% 78%,84% 100%,0 100%)} body[data-style=studio] .story-images figure:nth-child(2){width:60%;margin-top:-45px;position:relative} body[data-style=studio] .story-images figure:nth-child(2) img{clip-path:polygon(var(--form-cut) 0,100% 0,100% 100%,0 100%,0 var(--form-cut))} body[data-style=studio] .team-member{border:0;border-top:1px solid var(--line);width:91%;padding-top:24px} body[data-style=studio] .team-member:nth-child(even){margin-left:9%} body[data-style=studio] .team-portrait{clip-path:polygon(0 0,100% 0,100% 84%,80% 100%,0 100%)} body[data-style=studio] .team-member img{background:var(--paper)} body[data-style=studio] .action-card>img,body[data-style=studio] .news-images img{clip-path:polygon(0 0,calc(100% - var(--form-cut)) 0,100% var(--form-cut),100% 100%,0 100%)} body[data-style=studio] .news-feature>.commerce-news-head{border-top:1px solid var(--ink)} body[data-style=studio] .booking{position:relative;border:0;padding-top:90px} body[data-style=studio] .booking::before{content:"";position:absolute;top:20px;left:5%;width:75%;height:35px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:skewX(-35deg);pointer-events:none} body[data-style=studio] .local-booking{padding:24px 0;border-top:1px solid var(--ink)} /* Les formats photo explicitement choisis restent prioritaires : on désactive * les masques, sans changer le fichier, le ratio ni le cadrage configuré. */ body:is([data-style=naturel],[data-style=studio]) :is(figure,.service-image):has(img[data-crafteno-photo-format]){clip-path:none;border-radius:0} body:is([data-style=naturel],[data-style=studio]) img[data-crafteno-photo-format]{clip-path:none;border-radius:0} /* Téléphone : décalages contenus dans la largeur disponible, aucune superposition * de texte. Les courbes et biseaux restent visibles sans élargir la page. */ @media(max-width:760px){ body:is([data-style=naturel],[data-style=studio]){--form-curve:55px;--form-cut:24px;--form-gap:32px} body[data-style=naturel] .botanical-portrait{height:390px} body[data-style=naturel] .service-list{grid-template-columns:1fr} body[data-style=naturel] .service,body[data-style=naturel] .service:first-child{padding:22px;grid-row:auto;width:100%;margin:0} body[data-style=naturel] .service:nth-child(2){width:92%;margin-left:8%;padding-top:22px} body[data-style=naturel] .service:first-child .service-image{height:350px} body[data-style=naturel] .service-image{height:250px} body[data-style=naturel] .about-photo{width:90%;height:390px;margin:0} body[data-style=naturel] .about-copy{margin:-75px 0 0 7%;padding:95px 22px 30px;max-width:93%;z-index:1} body[data-style=naturel] .about-photo{z-index:2} body[data-style=naturel] .story-images figure:first-child img{height:290px} body[data-style=naturel] .story-images figure:nth-child(2){margin-top:10px} body[data-style=naturel] .story-images figure:nth-child(2) img{height:360px} body[data-style=naturel] .team-grid{gap:55px 18px} body[data-style=naturel] .team-member{padding:0 10px 24px;border-radius:50px 6px 50px 6px} body[data-style=naturel] .team-member img{height:180px} body[data-style=naturel] .team-member:nth-child(even){margin-top:40px} body[data-style=naturel] .team-member h3{font-size:25px} body[data-style=naturel] .booking{width:88%;padding:42px 6%;margin-block:25px} body[data-style=studio] .studio-poster-photo{height:340px;margin-top:0} body[data-style=studio] .service,body[data-style=studio] .service:first-child{grid-template-columns:1fr;gap:15px;width:92%;padding:0 0 25px;margin-bottom:35px} body[data-style=studio] .service:nth-child(2){margin-left:4%} body[data-style=studio] .service:nth-child(3){margin-left:8%} body[data-style=studio] .service-image,body[data-style=studio] .service:first-child .service-image{width:100%;height:230px} body[data-style=studio] .service-copy,body[data-style=studio] .service:first-child .service-copy{padding:0} body[data-style=studio] .service h3{max-width:none} body[data-style=studio] .story-images figure:nth-child(2){width:78%;margin-top:25px} body[data-style=studio] .booking{padding-top:70px} } /* Contrelecture : le papier remplit aussi les marges d'une photo affichée entière. * Le visage Studio est mieux centré ; le lien de prestation n'a qu'un trait. */ body:is([data-style=naturel],[data-style=studio]) :is(.action-card>img,.news-images img,.team-member img,.service-image,.service-image img,.member-initials){background:var(--paper)} body:is([data-style=naturel],[data-style=studio]) .service-book{text-decoration:none} body[data-style=studio] .studio-poster-photo img{object-position:72% center} /* RECETTE FINALE — cibles de navigation utilisables avec un doigt. * Minimum commun de 44 pixels CSS ; les textes et couleurs restent configurés * dans la source unique. Le lien interne ou externe garde sa destination. */ .art-direction :is(.shop-brand,.booking-intro a,.service-book,.text-link,.site-footer a){display:inline-flex;align-items:center;min-height:44px} .art-direction .shop-brand{position:relative} /* Le bouton reprend la couleur de texte du pied, adaptée au fond de chaque style. */ body[data-style] .site-footer a[data-demo-accompagnement] { display: inline-flex; width: fit-content; max-width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: .55rem .9rem; justify-content: center; background: transparent; color: inherit; border: 1px solid currentColor; font-size: .9rem; text-align: center; }