/* ========================================================================== templates-layout.css — MISES EN PAGE (structures) du site public. Complément de templates-skin.css. Séparation nette des responsabilités : - templates-skin.css = LA PEAU (couleurs, polices, arrondis) → var() - templates-layout.css = LA STRUCTURE (agencements, compositions) → cette feuille ne touche presque jamais aux couleurs ; elle réorganise le MÊME HTML (index.html) en 10 mises en page radicalement différentes. Principe : - tenant-theme.js pose sur la classe `layout-` (en plus de `themed` + `theme-`). - Chaque `body.layout- …` ne modifie que la GÉOMÉTRIE : grilles, ordre des blocs, alignements, tailles de titres, bordures, rythme vertical. - Les couleurs continuent de venir des variables de la skin (var(--gold), var(--paper), var(--ink), var(--line)…). Un salon peut donc combiner n'importe quelle palette avec n'importe quelle structure. 10 layouts : mag — magazine chaleureux : héro à gauche, prestations en lignes. noir — luxe centré, grille de prestations à filets (2 colonnes). revue — éditorial clair, gros titres sérif, prestations sans cartes. onsen — zen minimal, tout centré, listes séparées de filets. punch — audacieux, typo géante, cartes vives, prix surdimensionné. brut — brutaliste : bords durs, index chiffrés, libellés mono. clinique — structuré, prestations en tableau tarifaire encadré. altitude — libellés verticaux latéraux, sections alternées, aéré. couture — ultra-premium, menu à pointillés (leader dots), sobre. kiosk — concept ludique, cartes très arrondies, colonnes décalées. ========================================================================== */ /* ———————————————————————————————————————————————————————————————— Base commune : autoriser la ré-organisation verticale des sections. On passe en colonne flex pour pouvoir jouer sur `order` dans certains layouts. Les éléments position:fixed (widget IA, toasts) sortent du flux et ne sont pas affectés. ———————————————————————————————————————————————————————————————— */ body[class*="layout-"] { display: flex; flex-direction: column; min-height: 100vh; } body[class*="layout-"] > .site-footer { margin-top: auto; } /* ===================================================================== 1) MAG — magazine chaleureux (héro à gauche, prestations en lignes) ===================================================================== */ .layout-mag .header-inner { min-height: 78px; } .layout-mag .main-nav { justify-content: flex-end; gap: 22px; } .layout-mag .hero { min-height: 68vh; } .layout-mag .hero .container { padding: 90px 0; text-align: left; } .layout-mag .hero-title { font-size: clamp(2.8rem, 6vw, 5rem); max-width: 16ch; } .layout-mag .section-head { text-align: left; margin: 0 0 44px; max-width: 860px; } .layout-mag .rule { margin: 0 0 20px; width: 64px; height: 2px; } /* Prestations : lignes pleine largeur, titre+prix à gauche, description à droite. */ .layout-mag .svc-grid { grid-template-columns: 1fr; gap: 0; } .layout-mag .svc { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 40px; row-gap: 4px; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 28px 4px; transform: none !important; } .layout-mag .svc:hover { background: transparent; } .layout-mag .svc .row { grid-column: 1; grid-row: 1; } .layout-mag .svc .dur { grid-column: 1; grid-row: 2; } .layout-mag .svc p { grid-column: 2; grid-row: 1 / 3; align-self: center; } /* Équipe : rangées horizontales plutôt que grille de cartes. */ .layout-mag .team-grid { grid-template-columns: 1fr; gap: 0; } .layout-mag .member { display: grid; grid-template-columns: 78px 1fr; gap: 22px; text-align: left; align-items: center; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 26px 4px; } .layout-mag .member .avatar { margin: 0; } .layout-mag .member .specs { justify-content: flex-start; } /* ===================================================================== 2) NOIR — luxe centré, grille de prestations à filets ===================================================================== */ .layout-noir .header-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; min-height: 0; padding: 18px 0; } .layout-noir .main-nav { justify-content: center; } .layout-noir .hero .container { text-align: center; } .layout-noir .hero-title { margin-left: auto; margin-right: auto; } .layout-noir .hero-text { margin-left: auto; margin-right: auto; } .layout-noir .hero-actions { justify-content: center; } .layout-noir .hero .eyebrow { display: inline-block; } /* Prestations : deux colonnes soudées par des filets (aspect « carte de bar »). */ .layout-noir .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--line); } .layout-noir .svc { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 30px 32px; transform: none !important; } .layout-noir .svc:hover { background: rgba(150,150,150,.04); } .layout-noir .svc:nth-child(odd) { border-right: 1px solid var(--line); } .layout-noir .member { border-radius: 20px; } /* ===================================================================== 3) REVUE — éditorial clair, gros titres, prestations sans cartes ===================================================================== */ .layout-revue .hero .container { text-align: left; padding: 100px 0; } .layout-revue .hero-title { font-size: clamp(3rem, 7vw, 6rem); line-height: .98; max-width: 15ch; } .layout-revue .hero-text { font-size: 1.16rem; max-width: 52ch; } .layout-revue .section-head { text-align: left; margin: 0 0 40px; max-width: 900px; } .layout-revue .section-head h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); } .layout-revue .rule { margin: 0 0 18px; } /* Prestations : 3 colonnes, sans fond de carte, filet supérieur épais. */ .layout-revue .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 0 34px; } .layout-revue .svc { background: transparent; border: 0; border-top: 2px solid var(--paper); border-radius: 0; padding: 18px 0 30px; transform: none !important; } .layout-revue .svc:hover { background: transparent; } .layout-revue .svc h3 { font-size: 1.7rem; } .layout-revue .svc .row { flex-direction: column; align-items: flex-start; gap: 4px; } /* #maison en deux colonnes façon magazine. */ .layout-revue #maison .section-head { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; text-align: left; } .layout-revue #maison .section-head h2 { grid-column: 1; margin: 0; } .layout-revue #maison .section-head p { grid-column: 2; } .layout-revue #maison .rule, .layout-revue #maison .eyebrow { grid-column: 1; } /* ===================================================================== 4) ONSEN — zen minimal, tout centré, listes à filets ===================================================================== */ .layout-onsen .header-inner { min-height: 72px; } .layout-onsen .main-nav { gap: 34px; } .layout-onsen .hero { min-height: 82vh; } .layout-onsen .hero .container { text-align: center; } .layout-onsen .hero .eyebrow { letter-spacing: .5em; } .layout-onsen .hero-title { margin: 8px auto 24px; font-weight: 300; letter-spacing: .02em; } .layout-onsen .hero-text { margin: 0 auto; } .layout-onsen .hero-actions { justify-content: center; } .layout-onsen section { padding: 120px 0; } .layout-onsen .section-head { margin-bottom: 60px; } .layout-onsen .section-head p { font-size: 1.1rem; } /* Prestations : liste centrée épurée, séparée par des filets, sans carte. */ .layout-onsen .svc-grid { grid-template-columns: 1fr; max-width: 700px; margin: 0 auto; gap: 0; } .layout-onsen .svc { text-align: center; align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 30px 0; transform: none !important; } .layout-onsen .svc:hover { background: transparent; } .layout-onsen .svc .row { justify-content: center; gap: 18px; } .layout-onsen .team-grid { max-width: 760px; margin: 0 auto; } .layout-onsen .member { border: 0; background: transparent; } .layout-onsen .member .avatar { width: 96px; height: 96px; } /* ===================================================================== 5) PUNCH — audacieux, typo géante, cartes vives, prix XXL ===================================================================== */ .layout-punch .main-nav a { border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; } .layout-punch .hero .container { text-align: left; padding: 70px 0; } .layout-punch .hero-title { font-size: clamp(3.2rem, 10vw, 7.5rem); line-height: .88; letter-spacing: -.01em; max-width: 13ch; } .layout-punch .section-head { text-align: left; margin: 0 0 40px; } .layout-punch .section-head h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); } .layout-punch .svc-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .layout-punch .svc { border-radius: 26px; padding: 34px 30px; } .layout-punch .svc .row { flex-direction: column-reverse; align-items: flex-start; gap: 6px; } .layout-punch .svc .price { font-size: 2.6rem; line-height: 1; } .layout-punch .member { border-radius: 26px; } .layout-punch .plat-card { border-radius: 24px; } /* ===================================================================== 6) BRUT — brutaliste : bords durs, index chiffrés, libellés mono ===================================================================== */ .layout-brut .brand, .layout-brut .reserve-btn, .layout-brut .btn-gold, .layout-brut .btn-outline, .layout-brut .svc, .layout-brut .member, .layout-brut .value, .layout-brut .plat-card, .layout-brut .review-card, .layout-brut .svc-grid { border-radius: 0 !important; } .layout-brut .eyebrow, .layout-brut .main-nav a, .layout-brut .svc .dur, .layout-brut .member .role { font-family: 'Courier New', ui-monospace, monospace; letter-spacing: .16em; } .layout-brut .hero .container { text-align: left; } .layout-brut .hero-title { text-transform: uppercase; letter-spacing: -.01em; } .layout-brut .section-head { text-align: left; margin: 0 0 40px; } .layout-brut .rule { margin: 0 0 18px; width: 100%; height: 2px; background: var(--paper); } /* Prestations : grille soudée à bords durs + index chiffré. */ .layout-brut .svc-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; } .layout-brut .svc { border: 1px solid var(--paper); margin: 0 -1px -1px 0; background: transparent; counter-increment: brutidx; transform: none !important; } .layout-brut .svc:hover { background: rgba(150,150,150,.05); } .layout-brut .svc .row h3::before { content: counter(brutidx, decimal-leading-zero); display: block; font-family: 'Courier New', monospace; font-size: .8rem; color: var(--gold); margin-bottom: 8px; letter-spacing: .1em; } .layout-brut .team-grid { gap: 0; } .layout-brut .member { border: 1px solid var(--paper); margin: 0 -1px -1px 0; } /* ===================================================================== 7) CLINIQUE — structuré, prestations en tableau tarifaire ===================================================================== */ .layout-clinique .hero .container { text-align: left; } .layout-clinique .hero-title { max-width: 17ch; } .layout-clinique .section-head { text-align: left; margin: 0 0 34px; } .layout-clinique .rule { margin: 0 0 16px; } /* Prestations : tableau encadré, une ligne par prestation. Le prix reste dans .row (markup intact) : on l'aligne à droite de sa ligne et on lui donne l'allure d'une colonne tarifaire, sans pseudo-élément. */ .layout-clinique .svc-grid { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .layout-clinique .svc { display: block; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 22px 28px; transform: none !important; } .layout-clinique .svc:last-child { border-bottom: 0; } .layout-clinique .svc:hover { background: rgba(150,150,150,.04); } .layout-clinique .svc .row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; } .layout-clinique .svc .row h3 { margin: 0; } .layout-clinique .svc .row .price { font-family: 'Cormorant', serif; font-size: 1.7rem; color: var(--gold); white-space: nowrap; } .layout-clinique .svc .dur { margin-top: 4px; } .layout-clinique .svc p { margin-top: 6px; } /* Stats encadrées. */ .layout-clinique .stats .stat { border: 1px solid var(--line); border-radius: 12px; padding: 22px 10px; } /* ===================================================================== 8) ALTITUDE — libellés verticaux latéraux, sections alternées ===================================================================== */ .layout-altitude .hero .container { text-align: left; } .layout-altitude .section-head { position: relative; text-align: left; padding-left: 48px; margin: 0 0 44px; max-width: 820px; } .layout-altitude .section-head .eyebrow { position: absolute; left: 0; top: 4px; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .3em; } .layout-altitude .section-head .rule { display: none; } /* Alternance d'alignement : une section sur deux poussée à droite. */ .layout-altitude #equipe .section-head { margin-left: auto; padding-left: 0; padding-right: 48px; text-align: right; } .layout-altitude #equipe .section-head .eyebrow { left: auto; right: 0; transform: rotate(0deg); } .layout-altitude .svc-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; } .layout-altitude .svc { border-radius: 20px; } .layout-altitude section { padding: 116px 0; } /* ===================================================================== 9) COUTURE — ultra-premium, menu à pointillés (leader dots) ===================================================================== */ .layout-couture .header-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; padding: 20px 0; min-height: 0; } .layout-couture .main-nav { justify-content: center; gap: 26px; } .layout-couture .hero { min-height: 84vh; } .layout-couture .hero .container { text-align: center; } .layout-couture .hero-title { font-weight: 400; font-size: clamp(3rem, 7vw, 6.2rem); margin: 8px auto 24px; } .layout-couture .hero-text { margin: 0 auto; } .layout-couture .hero-actions { justify-content: center; } .layout-couture section { padding: 120px 0; } /* Prestations : carte-menu à pointillés, titre à gauche, prix à droite. */ .layout-couture .svc-grid { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; gap: 0; } .layout-couture .svc { background: transparent; border: 0; border-bottom: 1px dotted var(--line); border-radius: 0; padding: 20px 0 18px; transform: none !important; } .layout-couture .svc:hover { background: transparent; } .layout-couture .svc .row { justify-content: space-between; align-items: baseline; } .layout-couture .svc h3 { font-weight: 400; } .layout-couture .svc .dur { margin-top: 6px; } .layout-couture .svc p { margin-top: 4px; font-size: .88rem; } .layout-couture .member { border: 0; background: transparent; } /* ===================================================================== 10) KIOSK — concept ludique, cartes très arrondies, colonnes décalées ===================================================================== */ .layout-kiosk .main-nav a { border: 1px solid var(--line); padding: 7px 15px; border-radius: 999px; } .layout-kiosk .hero .container { text-align: left; } .layout-kiosk .hero-title { font-size: clamp(3rem, 8vw, 6.4rem); line-height: .92; } .layout-kiosk .section-head { text-align: left; margin: 0 0 38px; } .layout-kiosk .btn-gold, .layout-kiosk .btn-outline, .layout-kiosk .reserve-btn { border-radius: 16px; } /* Prestations : maçonnerie sur 2 colonnes (hauteurs libres, aspect décalé). */ .layout-kiosk .svc-grid { display: block; column-count: 2; column-gap: 18px; } .layout-kiosk .svc { break-inside: avoid; display: flex; width: 100%; margin: 0 0 18px; border-radius: 28px; padding: 30px 28px; } .layout-kiosk .member { border-radius: 28px; } .layout-kiosk .plat-card { border-radius: 24px; } .layout-kiosk .value { border-radius: 24px; } /* ———————————————————————————————————————————————————————————————— Garde-fous mobiles : toutes les grilles multi-colonnes retombent sur une colonne unique, et les compositions latérales redeviennent verticales. ———————————————————————————————————————————————————————————————— */ /* ———————————————————————————————————————————————————————————————— CHANTIER 72 — en-têtes CENTRÉES (noir, couture) et l'état shrunk. Au repos : présence de marque généreuse mais BORNÉE (logo 64 px max — fini le monogramme plein écran qui poussait le hero hors de vue). Une fois .is-shrunk (posé par app.js au scroll) : rangée resserrée, logo ramené à ~40 px, le tout reste centré et harmonieux. ———————————————————————————————————————————————————————————————— */ .layout-noir .brand-logo, .layout-couture .brand-logo { height: 64px; max-width: 200px; } body.layout-noir .site-header.is-shrunk .header-inner, body.layout-couture .site-header.is-shrunk .header-inner { padding: 6px 0; gap: 4px; } body.layout-noir .site-header.is-shrunk .brand-logo, body.layout-couture .site-header.is-shrunk .brand-logo { height: 40px; max-width: 130px; } @media (max-width: 860px) { .layout-noir .brand-logo, .layout-couture .brand-logo { height: 40px; } } @media (max-width: 820px) { .layout-noir .svc-grid, .layout-revue .svc-grid { grid-template-columns: 1fr; } .layout-noir .svc:nth-child(odd) { border-right: 0; } .layout-revue #maison .section-head { grid-template-columns: 1fr; } .layout-kiosk .svc-grid { column-count: 1; } .layout-mag .svc { grid-template-columns: 1fr; } .layout-mag .svc p { grid-column: 1; grid-row: 3; margin-top: 8px; } .layout-mag .member { grid-template-columns: 60px 1fr; } .layout-altitude .section-head, .layout-altitude #equipe .section-head { padding-left: 40px; padding-right: 0; text-align: left; margin-left: 0; } .layout-altitude #equipe .section-head .eyebrow { left: 0; right: auto; transform: rotate(180deg); } }