/* ═══════════════════════════════════════════════════════════
   STUDIO GALYOS — feuille de style commune des pages intérieures
   Deux gabarits : « hub » (pages globales) et « detail » (pages détaillées)
   Deux ambiances : .theme-dark (obscur) et .theme-light (clair)
═══════════════════════════════════════════════════════════ */
@font-face{font-family:'SG';src:url('/assets/fonts/SkylarSans.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SG';src:url('/assets/fonts/SkylarSans-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'SG';src:url('/assets/fonts/SkylarSans-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'SG Outline';src:url('/assets/fonts/SkylarSans-RegularOutline.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SG Outline';src:url('/assets/fonts/SkylarSans-ItalicOutline.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}

:root{
  --ivoire:#FFFAF7; --lin:#F9E4D4; --argile:#DCA993; --sienne:#AF7866; --cacao:#613E37; --eclipse:#362926;
  --or:#a8955c; --or-clair:#bba777; --creme:#FBF3E8; --creme2:#FFF9F0;
  --font-title:'SG','Skylar Sans','Aboreto',serif; --font-sub:'Aboreto',serif; --font-text:'Cormorant Garamond',Georgia,serif;
  --gut:clamp(20px,5vw,84px); --maxw:1260px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font-family:var(--font-text); font-size:clamp(1.08rem,1.25vw,1.3rem); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit}
.sr-only{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:-999px; top:0; background:#fff; color:#000; padding:10px 14px; z-index:99999}
.skip:focus{left:10px; top:10px}

/* ── ambiances ── */
.theme-dark{--bg:#3f2c27; --fg:#f6e8dc; --soft:rgba(246,232,220,.78); --accent:var(--or-clair); --line:rgba(187,167,119,.4); --card:rgba(255,246,238,.06); --btn-fg:#f6e8dc}
.theme-dark body{background:linear-gradient(180deg,#5d4037 0,#4a342d 900px,#34231f 2600px,#241815 100%); background-color:#241815; color:var(--fg)}
.theme-light{--bg:#fbf3e8; --fg:#4a2f28; --soft:#6d544c; --accent:var(--or); --line:rgba(168,149,92,.5); --card:#fffaf4; --btn-fg:#4a2f28}
.theme-light body{background:linear-gradient(180deg,#fbf3e8 0,#fff9f0 100%); background-color:#fbf3e8; color:var(--fg)}


/* ── ambiances par zone : chaque section choisit « dark » ou « light » (coupure nette, comme l'accueil) ── */
[data-zone="dark"]{--fg:#f6e8dc; --soft:rgba(246,232,220,.78); --accent:#bba777; --line:rgba(187,167,119,.4); --card:rgba(255,246,238,.06); --btn-fg:#f6e8dc; color:var(--fg)}
[data-zone="light"]{--fg:#4a2f28; --soft:#6d544c; --accent:#a8955c; --line:rgba(168,149,92,.5); --card:#fffaf4; --btn-fg:#4a2f28; color:var(--fg)}
/* ── barre du haut ── */
.topbar{position:fixed; inset:0 0 auto 0; z-index:800; display:flex; justify-content:space-between; align-items:flex-start; padding:clamp(16px,2.2vw,30px) clamp(22px,3vw,46px); pointer-events:none}
.topbar>*{pointer-events:auto}
.brand{display:block; width:clamp(34px,3vw,46px); opacity:.95; transition:opacity .3s}
.brand:hover{opacity:1}
.brand img{width:100%; height:auto}
.menu-fab{background:none; border:0; padding:0; cursor:pointer; font-family:'Skylar Sans','Aboreto',serif; font-weight:700; font-size:clamp(1rem,1.5vw,1.3rem); letter-spacing:.1em; line-height:1.05; text-align:right; color:#fffaf7; text-shadow:0 1px 14px rgba(0,0,0,.4); transition:color .35s}
.menu-fab:hover{color:#d6c9a4}
.topbar.on-cream .menu-fab{color:#4a2f28; text-shadow:none}
.topbar.on-cream .menu-fab:hover{color:var(--or)}

/* ── mise en page ── */
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.sec{position:relative; min-height:78svh; display:flex; flex-direction:column; justify-content:center; padding:clamp(72px,11vh,150px) 0}
.sec--full{min-height:100svh}
.sec--tight{min-height:0}
.eyebrow{font-family:var(--font-sub); font-size:clamp(.66rem,.9vw,.82rem); letter-spacing:.5em; text-transform:uppercase; color:var(--accent); margin:0 0 clamp(14px,2vh,24px)}
.h-title{font-family:var(--font-title); font-weight:400; text-transform:uppercase; line-height:.98; letter-spacing:.01em; margin:0; font-size:clamp(2rem,5vw,4.6rem)}
.h-title em{font-style:italic; color:var(--accent)}
.h-title .o{font-family:'SG Outline','SG',serif; font-weight:400; font-style:italic; color:var(--accent)}
.h-sub{font-family:var(--font-title); font-weight:400; text-transform:uppercase; letter-spacing:.03em; margin:0 0 .6em; font-size:clamp(1.3rem,2.6vw,2.4rem); line-height:1.05}
.lead{font-style:italic; font-weight:300; font-size:clamp(1.25rem,2vw,1.8rem); line-height:1.4; color:var(--soft); max-width:46ch; margin:clamp(16px,2.4vh,28px) 0 0}
.prose p{margin:0 0 1.1em; color:var(--soft); max-width:62ch}
.prose strong{color:var(--fg); font-weight:600}
.rule{width:84px; height:1px; background:linear-gradient(90deg,var(--accent),transparent); margin:clamp(18px,3vh,32px) 0}
.center{text-align:center} .center .lead,.center .prose p{margin-left:auto; margin-right:auto}
.center .rule{margin-left:auto; margin-right:auto; background:linear-gradient(90deg,transparent,var(--accent),transparent)}

/* ── boutons ── */
.btns{display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(22px,3.6vh,40px)}
.center .btns{justify-content:center}
.btn{display:inline-block; padding:15px 30px; border:1px solid var(--accent); color:var(--btn-fg); background:transparent; text-decoration:none; cursor:pointer;
  font-family:var(--font-sub); font-size:.74rem; letter-spacing:.32em; text-transform:uppercase; transition:background .35s, color .35s, transform .35s}
.btn:hover{background:var(--accent); color:#2a1c19; transform:translateY(-2px)}
.btn--solid{background:var(--accent); color:#2a1c19}
.btn--solid:hover{background:transparent; color:var(--btn-fg)}

/* ── fil d'Ariane ── */
.crumbs{font-family:var(--font-sub); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; margin:0 0 18px; color:var(--soft)}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--accent)} .crumbs span{opacity:.5; margin:0 .6em}

/* ═══ GABARIT « HUB » : héros plein écran ═══ */
.hero-hub{position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; color:#fff6ec}
.hero-hub .bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.04); animation:heroSettle 2.4s ease-out forwards}
@keyframes heroSettle{to{transform:scale(1)}}
.hero-hub::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(40,26,21,.62) 0%,rgba(40,26,21,.38) 45%,rgba(40,26,21,.78) 100%)}
.hero-hub .inner{position:relative; z-index:2; padding:0 var(--gut); max-width:1100px}
.hero-hub .eyebrow{color:#d6c9a4}
.hero-hub .h-title{font-size:clamp(2.4rem,7vw,6.6rem); color:#fff6ec}
.hero-hub .lead{color:#f6e8dc; margin-left:auto; margin-right:auto}
.hero-hub .btns{justify-content:center}
.hero-hub .btn{color:#fff6ec; border-color:rgba(214,201,164,.8)}
.hero-hub .btn:hover{background:#d6c9a4; color:#2a1c19}
.scroll-hint{position:absolute; z-index:3; left:50%; bottom:clamp(20px,4vh,42px); transform:translateX(-50%); display:grid; place-items:center; width:54px; height:54px; border-radius:50%;
  border:1px solid rgba(255,250,247,.7); color:#fff6ec; text-decoration:none; animation:hintPulse 2.4s ease-in-out infinite}
.scroll-hint svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; animation:hintBounce 1.5s ease-in-out infinite}
@keyframes hintPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,250,247,.35)} 50%{box-shadow:0 0 0 14px rgba(255,250,247,0)}}
@keyframes hintBounce{0%,100%{transform:translateY(-2px)} 50%{transform:translateY(4px)}}

/* ═══ GABARIT « DETAIL » : héros scindé ═══ */
.hero-split{position:relative; min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero-split .txt{display:flex; flex-direction:column; justify-content:center; padding:calc(clamp(80px,11vh,130px)) var(--gut) clamp(60px,9vh,110px) var(--gut)}
.hero-split .pic{position:relative; overflow:hidden; min-height:46svh}
.hero-split .pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:heroSettle 2.4s ease-out forwards}
.hero-split .pic::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(36,24,21,.35),transparent 40%)}
.theme-light .hero-split .pic::after{background:linear-gradient(90deg,rgba(251,243,232,.5),transparent 36%)}
.hero-split .h-title{font-size:clamp(2.1rem,4.6vw,4.4rem)}
@media (max-width:900px){ .hero-split{grid-template-columns:1fr} .hero-split .pic{order:-1; min-height:52svh} .hero-split .txt{padding-top:44px} }

/* ── déclaration (grand texte) ── */
.statement{font-family:var(--font-title); text-transform:uppercase; line-height:1.08; font-size:clamp(1.6rem,4vw,3.8rem); margin:0; max-width:24ch}
.statement .o{font-family:'SG Outline','SG',serif; font-style:italic; color:var(--accent)}
.statement em{font-style:italic; color:var(--accent)}
.center .statement{margin-left:auto; margin-right:auto}

/* ── cartes / vignettes ── */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(10px,1.4vw,18px); margin-top:clamp(28px,5vh,56px)}
.tile{position:relative; display:block; aspect-ratio:4/5; overflow:hidden; text-decoration:none; color:#fff6ec; background:#2a1c19}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.tile:hover img{transform:scale(1.07)}
.tile::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(32,20,16,.82) 0%,rgba(32,20,16,.1) 55%,transparent)}
.tile .cap{position:absolute; z-index:2; left:clamp(16px,1.8vw,26px); right:clamp(16px,1.8vw,26px); bottom:clamp(16px,2vw,28px)}
.tile .cap small{display:block; font-family:var(--font-sub); font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:#d6c9a4; margin-bottom:8px}
.tile .cap b{display:block; font-family:var(--font-title); font-weight:400; text-transform:uppercase; line-height:1; font-size:clamp(1.2rem,2vw,1.8rem)}
.tile .cap p{margin:10px 0 0; font-size:1rem; line-height:1.35; color:#f6e8dc; opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s}
.tile:hover .cap p{opacity:1; transform:none}
@media (hover:none){ .tile .cap p{opacity:1; transform:none} }

/* ── colonnes de principes ── */
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:clamp(26px,4vw,64px); margin-top:clamp(30px,5vh,60px)}
.col .no{font-family:'SG Outline','SG',serif; font-style:italic; font-size:clamp(2.6rem,5vw,4.4rem); line-height:1; color:var(--accent); display:block; margin-bottom:6px}
.col h3{font-family:var(--font-title); font-weight:400; text-transform:uppercase; font-size:clamp(1.15rem,1.8vw,1.6rem); line-height:1.05; margin:0 0 .6em}
.col p{margin:0; color:var(--soft)}
.col{border-top:1px solid var(--line); padding-top:22px}

/* ── frise de déroulement ── */
.timeline{list-style:none; margin:clamp(28px,5vh,56px) 0 0; padding:0; counter-reset:t; display:grid; gap:0}
.timeline li{position:relative; display:grid; grid-template-columns:clamp(56px,8vw,110px) 1fr; gap:clamp(14px,3vw,40px); padding:clamp(18px,3vh,34px) 0; border-top:1px solid var(--line); counter-increment:t}
.timeline li:last-child{border-bottom:1px solid var(--line)}
.timeline li::before{content:counter(t,decimal-leading-zero); font-family:'SG Outline','SG',serif; font-style:italic; font-size:clamp(1.8rem,3.6vw,3.2rem); line-height:1; color:var(--accent)}
.timeline h3{font-family:var(--font-title); font-weight:400; text-transform:uppercase; font-size:clamp(1.15rem,1.9vw,1.7rem); margin:0 0 .3em; line-height:1.05}
.timeline p{margin:0; color:var(--soft); max-width:64ch}

/* ── bandeau photo défilant (galerie) ── */
.strip{display:flex; gap:clamp(8px,1vw,14px); overflow-x:auto; scroll-snap-type:x proximity; padding:6px var(--gut) 18px; margin:clamp(24px,4vh,46px) 0 0; scrollbar-width:thin; scrollbar-color:var(--accent) transparent; -webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{height:6px} .strip::-webkit-scrollbar-thumb{background:var(--accent)}
.strip button{flex:none; padding:0; border:0; background:none; cursor:zoom-in; scroll-snap-align:start}
.strip img{height:clamp(300px,62svh,640px); width:auto; max-width:none; display:block; transition:transform .8s cubic-bezier(.16,1,.3,1), filter .6s}
.strip button:hover img{filter:brightness(1.06)}
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:clamp(8px,1vw,14px); margin-top:clamp(24px,4vh,46px)}
.gallery-grid button{padding:0; border:0; background:none; cursor:zoom-in; overflow:hidden; aspect-ratio:4/5}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.gallery-grid button:hover img{transform:scale(1.06)}
.lb{position:fixed; inset:0; z-index:9500; display:none; align-items:center; justify-content:center; background:rgba(24,16,13,.94)}
.lb.is-open{display:flex}
.lb img{max-width:92vw; max-height:88vh; object-fit:contain}
.lb button{position:absolute; background:none; border:1px solid rgba(255,250,247,.6); color:#fff6ec; width:48px; height:48px; border-radius:50%; cursor:pointer; font-size:1.3rem}
.lb .x{top:20px; right:20px} .lb .pv{left:20px; top:50%} .lb .nx{right:20px; top:50%}

/* ── formules (tarifs) ── */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:clamp(12px,1.6vw,22px); margin-top:clamp(28px,5vh,56px)}
.plan{border:1px solid var(--line); background:var(--card); padding:clamp(22px,2.4vw,36px); display:flex; flex-direction:column}
.plan h3{font-family:var(--font-title); font-weight:400; text-transform:uppercase; font-size:clamp(1.15rem,1.7vw,1.5rem); margin:0 0 .3em; line-height:1.05}
.plan .meta{font-family:var(--font-sub); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin:0 0 14px}
.plan .price{font-family:var(--font-title); font-size:clamp(2rem,3.4vw,3rem); line-height:1; margin:0 0 14px}
.plan p{margin:0; color:var(--soft); font-size:1.02rem}

/* ── citations ── */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(14px,2vw,30px); margin-top:clamp(28px,5vh,56px)}
.quote{border-left:1px solid var(--accent); padding:6px 0 6px clamp(16px,2vw,28px)}
.quote p{font-style:italic; font-weight:300; font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.55; margin:0 0 14px; color:var(--soft)}
.quote cite{font-style:normal; font-family:var(--font-sub); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent)}
.stars{display:flex; gap:4px; margin:0 0 12px} .stars i{display:block; width:12px; height:12px; background:var(--accent); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* ── FAQ ── */
.faq details{border-top:1px solid var(--line); padding:0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:clamp(16px,2.4vh,26px) 44px clamp(16px,2.4vh,26px) 0; position:relative; font-family:var(--font-title); text-transform:uppercase; font-size:clamp(1rem,1.6vw,1.4rem); line-height:1.15}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-family:var(--font-text); font-size:1.8rem; color:var(--accent); transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .ans{padding:0 0 clamp(18px,3vh,30px); color:var(--soft); max-width:70ch}
.faq .ans p{margin:0 0 .8em}

/* ── formulaire ── */
.form{display:grid; gap:14px; max-width:720px}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form label{display:block; font-family:var(--font-sub); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-bottom:6px}
.form input,.form textarea,.form select{width:100%; padding:14px 16px; background:transparent; border:1px solid var(--line); color:var(--fg); font:inherit; font-size:1.05rem; border-radius:0}
.form input:focus,.form textarea:focus,.form select:focus{outline:none; border-color:var(--accent)}
.form textarea{min-height:150px; resize:vertical}
.form .hp{position:absolute; left:-9999px}
.form .ok{display:none; color:var(--accent); font-style:italic}
.form.sent .ok{display:block}
.form select option{color:#2a1c19}
@media (max-width:640px){ .form .row{grid-template-columns:1fr} }

/* ── cta ── */
.cta-band{text-align:center}
.cta-band .statement{margin:0 auto}

/* ── actualités : cartes ── */
.news{display:grid; gap:0; margin-top:clamp(24px,4vh,48px)}
.news article{display:grid; grid-template-columns:minmax(120px,200px) 1fr; gap:clamp(16px,3vw,44px); padding:clamp(20px,3.4vh,38px) 0; border-top:1px solid var(--line)}
.news article:last-child{border-bottom:1px solid var(--line)}
.news time{font-family:var(--font-sub); font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--accent)}
.news h3{font-family:var(--font-title); font-weight:400; text-transform:uppercase; font-size:clamp(1.15rem,1.9vw,1.7rem); margin:0 0 .4em; line-height:1.05}
.news p{margin:0; color:var(--soft); max-width:68ch}
@media (max-width:640px){ .news article{grid-template-columns:1fr} }

/* ── pied de page ── */
.site-footer{position:relative; padding:clamp(60px,9vh,110px) 0 28px; border-top:1px solid var(--line)}
.theme-dark .site-footer{background:rgba(0,0,0,.18)}
.ft-cols{display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:clamp(24px,4vw,64px); max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.ft-col{display:flex; flex-direction:column; gap:8px; font-size:1.1rem}
.ft-col b{font-family:var(--font-title); font-weight:400; text-transform:uppercase; letter-spacing:.05em; font-size:.95rem; margin:8px 0 2px; color:var(--accent)}
.ft-col a{text-decoration:none; color:var(--soft)} .ft-col a:hover{color:var(--accent)}
.ft-col .mail{font-size:1.35rem; color:var(--fg)}
.ft-base{max-width:var(--maxw); margin:clamp(34px,5vh,60px) auto 0; padding:0 var(--gut); display:flex; flex-wrap:wrap; gap:10px 30px; justify-content:space-between; align-items:center; font-size:.92rem; color:var(--soft)}
.ft-base nav{display:flex; flex-wrap:wrap; gap:6px 22px}
.ft-base a{text-decoration:none} .ft-base a:hover{color:var(--accent)}
.ft-big{max-width:var(--maxw); margin:clamp(28px,5vh,60px) auto 0; padding:0 var(--gut); text-align:center}
.ft-big p{font-family:var(--font-title); text-transform:uppercase; font-size:clamp(1.3rem,3.2vw,3rem); line-height:1.05; margin:0 0 14px}
.ft-big img{width:min(100%,900px); margin:0 auto; opacity:.55}
.theme-light .ft-big img{opacity:.9}
@media (max-width:820px){ .ft-cols{grid-template-columns:1fr} }

/* ── apparition ── */
.wr .wr-w{display:inline-block; opacity:0; transition:opacity 1s ease}
.wr.wr-in .wr-w{opacity:1}
.fade{opacity:0; transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.16,1,.3,1); transform:translateY(16px)}
.fade.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .wr .wr-w,.fade{opacity:1 !important; transform:none !important; transition:none} .hero-hub .bg,.hero-split .pic img{animation:none; transform:none} }

/* ── menu plein écran ── */
#menu-ov{position:fixed; inset:0; z-index:9000; visibility:hidden; opacity:0; background:#2b1d19; color:#f6e8dc; transition:opacity .55s ease, visibility 0s linear .55s}
#menu-ov.is-open{visibility:visible; opacity:1; transition-delay:0s}
.mn-bgs,.mn-shade{position:absolute; inset:0}
.mn-bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.07); transition:opacity .9s ease, transform 7s ease-out}
.mn-bg.is-on{opacity:1; transform:scale(1)}
.mn-shade{background:linear-gradient(180deg,rgba(40,24,18,.66),rgba(40,24,18,.5) 50%,rgba(40,24,18,.74))}
.mn-close{position:absolute; top:0; right:0; z-index:5; width:clamp(54px,6vw,84px); aspect-ratio:1; border:0; cursor:pointer; background:#bba777; display:grid; place-items:center}
.mn-close:hover{background:#d6c9a4}
.mn-close svg{width:44%; height:44%; stroke:#3a2420; stroke-width:1.2; fill:none; stroke-linecap:round}
.mn-inner{position:relative; z-index:3; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(54px,8vh,90px) 20px clamp(60px,9vh,100px)}
.mn-kicker{font-style:italic; font-size:clamp(1.5rem,2.4vw,2.3rem); margin-bottom:clamp(6px,1.6vh,18px)}
.mn-list{list-style:none; margin:0; padding:0; text-align:center}
.mn-item{position:relative; display:block}
.mn-item>a{display:inline-block; font-family:var(--font-title); font-weight:400; text-transform:uppercase; text-decoration:none; color:#f6e8dc; font-size:clamp(2.2rem,6.1vw,5.5rem); line-height:.98; transition:color .35s, transform .5s cubic-bezier(.16,1,.3,1)}
.mn-item.is-active>a{color:#bba777; transform:scale(1.02)}
.mn-sub{position:absolute; left:100%; top:50%; transform:translateY(-50%); margin:0; padding:0 0 0 clamp(26px,4vw,70px); list-style:none; text-align:left; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .35s}
.mn-item.is-active .mn-sub{opacity:1; pointer-events:auto}
.mn-sub a{display:block; padding:5px 0; font-family:var(--font-sub); letter-spacing:.28em; text-transform:uppercase; font-size:clamp(.68rem,.98vw,.92rem); color:#f6e8dc; text-decoration:none; transition:color .3s, transform .3s}
.mn-sub a:hover{color:#bba777; transform:translateX(5px)}
.mn-foot{position:absolute; z-index:3; left:0; right:0; bottom:clamp(16px,3.4vh,38px); display:flex; flex-wrap:wrap; justify-content:center; gap:8px clamp(14px,2.4vw,34px); padding:0 16px}
.mn-foot a{font-family:var(--font-sub); letter-spacing:.26em; text-transform:uppercase; font-size:clamp(.58rem,.78vw,.74rem); color:rgba(246,232,220,.78); text-decoration:none}
.mn-foot a:hover{color:#bba777}
html.mn-lock,html.mn-lock body{overflow:hidden !important}
@media (max-width:820px){
  .mn-sub{position:static; transform:none; padding:0; text-align:center; display:none; margin-bottom:6px}
  .mn-item.is-active .mn-sub{display:flex; flex-wrap:wrap; justify-content:center; gap:2px 18px}
  .mn-item>a{font-size:clamp(2rem,10vw,3.4rem)}
}

/* ── pages intérieures : compléments ── */
.hero-util{padding:clamp(130px,20vh,210px) 0 clamp(36px,6vh,70px)}
.hero-util .h-title{font-size:clamp(2.2rem,5.4vw,5rem)}
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:clamp(28px,5vw,80px); margin-top:clamp(26px,5vh,54px); align-items:start}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }
.legal h2{margin:1.6em 0 .5em; font-size:clamp(1.1rem,1.8vw,1.5rem)}
.legal p{max-width:78ch}

/* ═══════════ V3 — héros encadré (comme l'accueil), grandes cartes, CTA, logo ═══════════ */
.hero{position:relative; min-height:100svh; overflow:hidden; display:flex; align-items:flex-end; color:#fff6ec; background:#2a1c19}
.hero--short{min-height:74svh}
.hero-ph{position:absolute; inset:0}
.hero-ph img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:heroSettle 2.8s cubic-bezier(.16,1,.3,1) forwards}
.hero-shade{position:absolute; inset:0; background:linear-gradient(180deg,rgba(40,26,21,.55) 0,rgba(40,26,21,.04) 26%,rgba(40,26,21,.06) 46%,rgba(40,26,21,.86) 100%),linear-gradient(90deg,rgba(40,26,21,.5),transparent 62%)}
.hero-blur{display:none}
.hero--p .hero-blur{display:block; position:absolute; inset:-60px; background:var(--img) center/cover; filter:blur(44px) brightness(.5) saturate(1.15)}
.hero--p .hero-ph{inset:12svh clamp(56px,8vw,140px) 12svh auto; width:min(34vw,540px); box-shadow:0 50px 90px -30px rgba(0,0,0,.75); outline:1px solid rgba(214,201,164,.55); outline-offset:14px}
.hero--p .hero-shade{background:linear-gradient(180deg,rgba(30,20,16,.45) 0,transparent 25%,transparent 55%,rgba(30,20,16,.8) 100%)}
.hero-frame{position:absolute; inset:clamp(16px,2.4vw,36px); z-index:4; pointer-events:none; opacity:0; animation:fadeIn 1.2s ease .5s forwards}
@keyframes fadeIn{to{opacity:1}}
@keyframes lineGrow{to{transform:scaleX(1)}}
.hero-frame .ln{position:absolute; bottom:0; height:1px; width:36%; transform:scaleX(0); animation:lineGrow 1.4s ease .6s forwards}
.hero-frame .ln.l{left:0; transform-origin:left; background:linear-gradient(90deg,rgba(255,250,247,.45) 0,rgba(255,250,247,.45) 30%,transparent)}
.hero-frame .ln.r{right:0; transform-origin:right; background:linear-gradient(270deg,rgba(255,250,247,.45) 0,rgba(255,250,247,.45) 30%,transparent)}
.hero-frame .c{position:absolute; width:30px; height:30px}
.hero-frame .c::before,.hero-frame .c::after{content:""; position:absolute; background:rgba(255,250,247,.6)}
.hero-frame .c::before{width:1px; height:100%} .hero-frame .c::after{width:100%; height:1px}
.hero-frame .c.bl{left:0; bottom:0} .hero-frame .c.bl::before{left:0; top:0} .hero-frame .c.bl::after{left:0; bottom:0}
.hero-frame .c.br{right:0; bottom:0} .hero-frame .c.br::before{right:0; top:0} .hero-frame .c.br::after{right:0; bottom:0}
.hero-frame .c.tl{left:0; top:0} .hero-frame .c.tl::before{left:0; top:0} .hero-frame .c.tl::after{left:0; top:0}
.hero-frame .c.tr{right:0; top:0} .hero-frame .c.tr::before{right:0; top:0} .hero-frame .c.tr::after{right:0; top:0}
.hero-top{position:absolute; z-index:5; top:clamp(24px,3.4vw,50px); left:0; right:0; margin:0; text-align:center; font-family:var(--font-sub); font-size:clamp(.6rem,.8vw,.76rem); letter-spacing:.5em; text-transform:uppercase; color:rgba(255,250,247,.85); pointer-events:none}
.hero-side{position:absolute; z-index:5; top:50%; font-family:var(--font-sub); font-size:.58rem; letter-spacing:.45em; text-transform:uppercase; color:rgba(255,250,247,.7); writing-mode:vertical-rl; white-space:nowrap}
.hero-side.l{left:clamp(26px,3.4vw,52px); transform:translateY(-50%) rotate(180deg)} .hero-side.r{right:clamp(26px,3.4vw,52px); transform:translateY(-50%)}
.hero--p .hero-side.r{display:none}
.hero-copy{position:relative; z-index:5; width:100%; padding:0 clamp(56px,8vw,140px) clamp(96px,15vh,170px); max-width:1180px}
.hero--p .hero-copy{max-width:min(1180px,58vw)}
.hero-copy .crumbs{color:rgba(255,250,247,.75)}
.hero-copy .h-title{font-size:clamp(2.3rem,5.4vw,5.2rem); color:#fff6ec; line-height:1}
.hero-copy .h-title em{color:#d6c9a4}
.hero-copy .lead{color:#f6e8dc; font-size:clamp(1.1rem,1.55vw,1.45rem); max-width:44ch}
.hero-copy .btn{color:#fff6ec; border-color:rgba(214,201,164,.85)} .hero-copy .btn:hover{background:#d6c9a4; color:#2a1c19}
.hero-copy .btn--solid{background:#d6c9a4; color:#2a1c19} .hero-copy .btn--solid:hover{background:transparent; color:#fff6ec}
@media (max-width:900px){
  .hero--p .hero-ph{inset:0; width:auto; outline:none; box-shadow:none} .hero--p .hero-blur{display:none} .hero--p .hero-copy{max-width:none}
  .hero-side{display:none} .hero-copy{padding:0 26px 110px}
}

/* ── déclarations : plus calmes, sur deux colonnes ── */
.sec--st{min-height:0; padding:clamp(80px,13vh,170px) 0}
.st-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(30px,6vw,110px); align-items:start}
.sec--st .statement{font-size:clamp(1.5rem,2.9vw,2.7rem); max-width:20ch; line-height:1.1}
.sec--st .prose{padding-top:clamp(0px,1.2vw,18px); border-left:1px solid var(--line); padding-left:clamp(20px,3.4vw,54px)}
.sec--st .prose p{font-size:clamp(1.06rem,1.25vw,1.2rem); line-height:1.6}
.sec--st .rule{display:none}
@media (max-width:860px){ .st-grid{grid-template-columns:1fr} .sec--st .prose{border-left:0; padding-left:0} }
.h-sub{font-size:clamp(1.15rem,2.1vw,1.9rem)}
.sec .h-sub{max-width:28ch}

/* ── grandes cartes de prestations ── */
.tiles{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:clamp(340px,42vw,640px); gap:clamp(10px,1.4vw,22px); margin-top:clamp(30px,5vh,60px)}
.tile{position:relative; display:block; aspect-ratio:auto; overflow:hidden; grid-column:span 6; text-decoration:none; color:#fff6ec; background:#2a1c19; isolation:isolate}
.tiles--mos .tile:nth-child(4n+1),.tiles--mos .tile:nth-child(4n+4){grid-column:span 7}
.tiles--mos .tile:nth-child(4n+2),.tiles--mos .tile:nth-child(4n+3){grid-column:span 5}
.tiles--tri{grid-auto-rows:clamp(380px,46vw,680px)} .tiles--tri .tile{grid-column:span 4}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.8s cubic-bezier(.16,1,.3,1); z-index:-2}
.tile:hover img{transform:scale(1.08)}
.tile::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(30,18,14,.9) 0%,rgba(30,18,14,.35) 38%,rgba(30,18,14,0) 62%)}
.tile::before{content:""; position:absolute; inset:clamp(10px,1.1vw,16px); border:1px solid rgba(214,201,164,0); z-index:3; pointer-events:none; transition:border-color .6s, inset .7s cubic-bezier(.16,1,.3,1)}
.tile:hover::before{border-color:rgba(214,201,164,.75); inset:clamp(16px,1.7vw,26px)}
.tile .no{position:absolute; z-index:2; top:clamp(18px,2vw,30px); left:clamp(20px,2.2vw,34px); font-family:'SG Outline','SG',serif; font-style:italic; font-size:clamp(1.6rem,2.6vw,2.6rem); color:#d6c9a4; line-height:1}
.tile .cap{position:absolute; z-index:2; left:clamp(22px,2.6vw,40px); right:clamp(22px,2.6vw,40px); bottom:clamp(22px,2.6vw,38px)}
.tile .cap small{display:block; font-family:var(--font-sub); font-size:.64rem; letter-spacing:.4em; text-transform:uppercase; color:#d6c9a4; margin-bottom:10px}
.tile .cap b{display:block; font-family:var(--font-title); font-weight:400; text-transform:uppercase; line-height:.98; font-size:clamp(1.6rem,3vw,2.9rem)}
.tile .cap p{margin:12px 0 0; max-width:40ch; font-size:clamp(1rem,1.2vw,1.15rem); line-height:1.4; color:#f6e8dc; opacity:.92; transform:none}
.tile .more{display:inline-flex; align-items:center; gap:14px; margin-top:18px; font-family:var(--font-sub); font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; color:#fff6ec; padding-bottom:7px; border-bottom:1px solid rgba(214,201,164,.7); transition:gap .5s, color .4s}
.tile .more svg{width:30px; height:10px; fill:none; stroke:currentColor; stroke-width:1.2}
.tile:hover .more{gap:24px; color:#d6c9a4}
@media (max-width:760px){ .tiles{grid-template-columns:1fr; grid-auto-rows:clamp(420px,112vw,560px)} .tiles .tile,.tiles--mos .tile:nth-child(n),.tiles--tri .tile{grid-column:auto} }

/* ── appel à l'action de fin de page ── */
.cta{position:relative; min-height:86svh; display:grid; place-items:center; text-align:center; overflow:hidden; background:#2a1c19; color:#fff6ec; padding:clamp(90px,14vh,180px) var(--gut)}
.cta-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; transform:scale(1.05)}
.cta-shade{position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(40,26,21,.2),rgba(40,26,21,.85) 85%),linear-gradient(180deg,rgba(40,26,21,.55),rgba(40,26,21,.35) 50%,rgba(40,26,21,.8))}
.cta .hero-frame{opacity:1; animation:none} .cta .hero-frame .ln{transform:scaleX(1); animation:none}
.cta-in{position:relative; z-index:5; max-width:880px}
.cta .eyebrow{color:#d6c9a4}
.cta-title{font-family:var(--font-title); font-weight:400; text-transform:uppercase; line-height:1; margin:0; font-size:clamp(2rem,4.8vw,4.4rem); color:#fff6ec}
.cta-title em{font-style:italic; color:#d6c9a4}
.cta .lead{margin:clamp(16px,2.6vh,28px) auto 0; color:#f6e8dc; text-align:center}
.cta .btns{justify-content:center}
.cta .btn{color:#fff6ec; border-color:rgba(214,201,164,.85); padding:18px 40px}
.cta .btn--solid{background:#d6c9a4; color:#2a1c19} .cta .btn--solid:hover{background:transparent; color:#fff6ec}
.cta .btn:hover{background:#d6c9a4; color:#2a1c19}
.contact-only{padding-top:clamp(120px,18vh,200px)}

/* ── logo du pied de page : net, dégradé, révélé de haut en bas au défilement ── */
.ft-mark{--rv:1; width:min(94vw,1500px); aspect-ratio:2800/908; margin:clamp(10px,2vh,26px) auto 0;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(var(--rv)*150% - 50%),transparent calc(var(--rv)*150%)); mask-image:linear-gradient(180deg,#000 calc(var(--rv)*150% - 50%),transparent calc(var(--rv)*150%))}
.ft-mark i{display:block; width:100%; height:100%; background:linear-gradient(180deg,#ecd2bd 0%,#cfa48c 52%,#9a6858 100%);
  -webkit-mask:url(/assets/images/logo-galyos-mask.png) center/contain no-repeat; mask:url(/assets/images/logo-galyos-mask.png) center/contain no-repeat}
[data-zone="light"] .ft-mark i{background:linear-gradient(180deg,#a8776a 0%,#c99f89 55%,#e6cbb8 100%)}

/* cartes : sortent de la colonne de texte, presque pleine largeur */
.tiles{width:min(1640px,calc(100vw - 2*clamp(14px,3vw,48px))); position:relative; left:50%; transform:translateX(-50%)}

/* ═══ V4 : héros toujours plein cadre, variante claire, cartes XL, logo texturé ═══ */
.hero--pale{color:#3a2420}
.hero--pale .hero-shade{background:linear-gradient(90deg,rgba(251,243,232,.45),transparent 62%)}
.hero--pale .hero-copy .h-title{color:#3a2420} .hero--pale .hero-copy .h-title em{color:#8f7d48}
.hero--pale .hero-copy .lead,.hero--pale .hero-copy .crumbs,.hero--pale .hero-top,.hero--pale .hero-side{color:#5a403a}
.hero--pale .hero-copy .btn{color:#3a2420; border-color:rgba(58,36,32,.7)} .hero--pale .hero-copy .btn:hover{background:#3a2420; color:#fbf0e3}
.hero--pale .hero-copy .btn--solid{background:#3a2420; color:#fbf0e3} .hero--pale .hero-copy .btn--solid:hover{background:transparent; color:#3a2420}
.hero--pale .hero-frame .c::before,.hero--pale .hero-frame .c::after{background:rgba(58,36,32,.55)}
.hero--pale .hero-frame .ln.l{background:linear-gradient(90deg,rgba(58,36,32,.4) 0,rgba(58,36,32,.4) 30%,transparent)}
.hero--pale .hero-frame .ln.r{background:linear-gradient(270deg,rgba(58,36,32,.4) 0,rgba(58,36,32,.4) 30%,transparent)}
.hero--pale .scroll-hint{border-color:rgba(58,36,32,.6); color:#3a2420}
.tiles{width:min(1760px,calc(100vw - 2*clamp(10px,2vw,32px)))}
.tiles--mos{grid-auto-rows:clamp(480px,58vw,940px)}
.tiles--tri{grid-auto-rows:clamp(440px,52vw,780px)}
.ft-mark i,[data-zone="light"] .ft-mark i{background:url(/assets/images/logo-galyos-tex.png) center/contain no-repeat; -webkit-mask:none; mask:none; opacity:.8}

/* ── un seul avis, sobre ── */
.sec--quote{min-height:0; padding:clamp(60px,9vh,110px) 0}
.quotes--one{display:block; max-width:860px; margin:0 auto}
.quotes--one .quote{border:0; padding:0; text-align:center}
.quotes--one .quote p{font-size:clamp(1.25rem,1.9vw,1.7rem); line-height:1.5}
.quotes--one .stars{justify-content:center}
.sec--quote .eyebrow{text-align:center}

/* ── V5 : logo du pied de page plus petit, discret, révélé comme celui du hero en version légère ── */
.ft-mark{width:min(58vw,860px) !important; margin:clamp(14px,1.8vw,28px) auto 0 !important; -webkit-mask-image:none !important; mask-image:none !important}
.ft-mark i,[data-zone="light"] .ft-mark i{opacity:.3 !important; transition:opacity 1.2s ease, filter 1.2s ease}
.ft-mark.ft-armed:not(.is-in) i{opacity:0 !important}
.ft-mark.is-in i{animation:ftLogoReveal 3.6s ease .1s both, ftLogoBreath 7s ease-in-out 3.8s infinite alternate}
.ft-mark.is-in:hover i{opacity:.62 !important; filter:brightness(1.18) drop-shadow(0 0 10px rgba(255,245,220,.55)) drop-shadow(0 0 28px rgba(168,149,92,.4)); animation:none; transition:opacity .6s, filter .6s}
@keyframes ftLogoReveal{
  0%{opacity:0; filter:brightness(1) saturate(0) drop-shadow(0 0 0 rgba(249,228,212,0))}
  14%{opacity:.05; filter:brightness(1) saturate(0) drop-shadow(0 0 1px rgba(255,250,247,.85)) drop-shadow(0 0 3px rgba(249,228,212,.4))}
  34%{opacity:.14; filter:brightness(1) saturate(.3) drop-shadow(0 0 2px rgba(255,250,247,.8)) drop-shadow(0 0 9px rgba(168,149,92,.4))}
  62%{opacity:.4; filter:brightness(1.3) saturate(1) drop-shadow(0 0 8px rgba(255,250,247,.5)) drop-shadow(0 0 22px rgba(168,149,92,.4))}
  100%{opacity:.3; filter:brightness(1.04) saturate(1) drop-shadow(0 0 10px rgba(168,149,92,.18))}}
@keyframes ftLogoBreath{from{opacity:.26; filter:brightness(1) drop-shadow(0 0 8px rgba(168,149,92,.12))}to{opacity:.38; filter:brightness(1.12) drop-shadow(0 0 16px rgba(168,149,92,.3))}}
@media (prefers-reduced-motion:reduce){.ft-mark.is-in i{animation:none}.ft-mark.ft-armed:not(.is-in) i{opacity:.3 !important}}
.ft-mark{opacity:.72}

/* chiffres clés */
.stats{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(10px,1.4vw,22px)}
.stats li{padding:clamp(20px,2.4vw,36px) clamp(16px,2vw,28px); border:1px solid rgba(175,120,102,.35); text-align:center}
.stats b{display:block; font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(2.2rem,4.6vw,4rem); line-height:1; color:#af7866; font-variant-numeric:lining-nums}
.stats span{display:block; margin-top:.7em; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; opacity:.8}

/* sous-menu : entrées mises en avant (Projets, Boutique) */
.mn-sub a[href$="#realisations"],.mn-sub a[href$="/boutique/"]{display:inline-block; margin:8px 0 2px; padding:10px 22px 10px 20px; border:1px solid #d9c58a; background:#bba777; color:#2a1512; font-weight:600; box-shadow:0 0 0 rgba(255,232,160,0); position:relative; transition:background .35s, box-shadow .35s, transform .3s, color .3s}
.mn-sub a[href$="#realisations"]::after,.mn-sub a[href$="/boutique/"]::after{content:"92"; margin-left:12px; display:inline-block; transition:transform .3s}
.mn-sub a[href$="#realisations"]:hover,.mn-sub a[href$="/boutique/"]:hover,.mn-sub a[href$="#realisations"]:focus-visible,.mn-sub a[href$="/boutique/"]:focus-visible{background:#f1e2b0; color:#2a1512; transform:translateX(5px); box-shadow:0 0 14px 2px rgba(255,236,170,.75),0 0 38px 8px rgba(255,220,130,.45)}
.mn-sub a[href$="#realisations"]:hover::after,.mn-sub a[href$="/boutique/"]:hover::after{transform:translateX(5px)}
.mn-sub li{display:block}

/* ── Services : grille éditoriale en paires (réf. effepinnastudio /work/) — images 16/9, étiquette, titre, description, lien à droite ── */
.tiles{display:grid !important; grid-template-columns:repeat(20,minmax(0,1fr)); grid-auto-rows:auto !important; column-gap:clamp(12px,1.05vw,20px); row-gap:clamp(48px,5vw,92px); align-items:start}
.tiles .tile,.tiles--mos .tile:nth-child(n),.tiles--tri .tile{grid-column:span 10; aspect-ratio:auto; overflow:visible; background:none; color:inherit; isolation:auto; display:block}
.tiles .tile:nth-child(4n+1),.tiles .tile:nth-child(4n+4){grid-column:span 9}
.tiles .tile:nth-child(4n+2),.tiles .tile:nth-child(4n+3){grid-column:span 11}
.tiles .tile::before,.tiles .tile::after{display:none !important}
.tiles .tile .no{display:none}
.tiles .tile img{position:static !important; inset:auto; display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; z-index:auto; transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.tiles .tile:hover img{transform:none}
.tiles .tile{overflow:hidden; position:relative}
.tiles .tile .cap{position:static !important; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 16px; padding-top:clamp(14px,1.4vw,22px)}
.tiles .tile .cap small{grid-column:1/-1; margin:0; color:inherit; opacity:.8; font-size:.64rem; letter-spacing:.34em}
.tiles .tile .cap b{grid-column:1/-1; color:inherit; font-size:clamp(1.5rem,2.6vw,2.6rem); line-height:1.02}
.tiles .tile .cap p{grid-column:1/-1; margin:0; max-width:38ch; opacity:.92; transform:none; color:inherit; font-size:clamp(.98rem,1.1vw,1.1rem)}
.tiles .tile .more{grid-column:1/-1; justify-self:end; margin-top:6px; color:inherit; border-bottom:1px solid currentColor; opacity:1}
.tiles .tile:hover .more{gap:24px; color:inherit}
@media (max-width:760px){ .tiles{grid-template-columns:1fr !important; row-gap:44px} .tiles .tile,.tiles .tile:nth-child(n){grid-column:auto !important} }

/* ── Projets : lignes pleine largeur empilées (réf. effepinnastudio, Selezione Lavori) — texte 30 % à gauche, image 70 % à droite ── */
.tiles.tiles--rows{display:block !important; position:relative; width:min(1760px,calc(100vw - 2*clamp(10px,2vw,32px))); left:50%; transform:translateX(-50%); margin-top:clamp(30px,5vh,60px)}
.tiles.tiles--rows .tile,.tiles.tiles--rows .tile:nth-child(n){display:grid !important; grid-template-columns:30% minmax(0,70%); grid-column:auto; overflow:hidden; border-top:1px solid var(--line,rgba(187,167,119,.4))}
.tiles.tiles--rows .tile:last-child{border-bottom:1px solid var(--line,rgba(187,167,119,.4))}
.tiles.tiles--rows .tile img{grid-column:2; grid-row:1; aspect-ratio:1001/592; width:100%; height:auto; object-fit:cover}
.tiles.tiles--rows .tile .cap{grid-column:1; grid-row:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:12px; padding:clamp(20px,3vw,42px) clamp(18px,3vw,40px) clamp(20px,3vw,42px) 0}
.tiles.tiles--rows .tile .cap small{padding-top:10px; width:100%; border-top:1px solid currentColor}
.tiles.tiles--rows .tile .more{align-self:flex-start; margin-top:14px}
@media (max-width:760px){
  .tiles.tiles--rows .tile,.tiles.tiles--rows .tile:nth-child(n){grid-template-columns:1fr; grid-column:auto !important}
  .tiles.tiles--rows .tile img{grid-column:1; grid-row:2}
  .tiles.tiles--rows .tile .cap{grid-column:1; grid-row:1; padding:22px 0 18px}
}

/* ── Services : marges latérales réduites (grille quasi pleine largeur) ── */
.tiles.tiles--mos,.tiles.tiles--tri{width:calc(100vw - 2*clamp(16px,1.4vw,28px))}

/* ── Typographie (toutes les pages sauf légales et boutique) : titres Skylar bien plus grands + Giflika (police de la page Album) en accent ── */
@font-face{font-family:'Giflika';src:url('/assets/fonts/Giflika.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
body:not(:has(.hero-util,.hero--shop)) .hero .h-title,body:not(:has(.hero-util,.hero--shop)) .hero-hub .h-title{font-size:clamp(3rem,min(9.6vw,12.5vh),10rem); line-height:.92}
body:not(:has(.hero-util,.hero--shop)) .h-title em,body:not(:has(.hero-util,.hero--shop)) .cta-title em{font-family:'Giflika','SG',serif; font-style:normal; text-transform:none; letter-spacing:0; font-size:1.08em}
body:not(:has(.hero-util,.hero--shop)) .h-sub{font-family:'Giflika','SG',serif; text-transform:none; letter-spacing:0; font-size:clamp(2.8rem,6.6vw,6.8rem); line-height:.98; max-width:none; margin-bottom:.35em}
body:not(:has(.hero-util,.hero--shop)) .h-sub em{font-family:'SG',serif; text-transform:uppercase; font-style:italic}
body:not(:has(.hero-util,.hero--shop)) .statement{font-size:clamp(2.6rem,6.2vw,6.2rem); line-height:1; max-width:18ch}
body:not(:has(.hero-util,.hero--shop)) .cta-title{font-size:clamp(3rem,8vw,8rem); line-height:.95}
body:not(:has(.hero-util,.hero--shop)) .tile .cap b{font-size:clamp(2.1rem,3.8vw,3.8rem); line-height:1}
body:not(:has(.hero-util,.hero--shop)) .col h3{font-size:clamp(1.7rem,2.7vw,2.6rem)}
body:not(:has(.hero-util,.hero--shop)) .eyebrow{font-size:clamp(.78rem,1.05vw,.98rem)}
body:not(:has(.hero-util,.hero--shop)) .tiles.tiles--rows .tile .cap b{font-size:clamp(2.2rem,3.6vw,3.6rem)}
body:not(:has(.hero-util,.hero--shop)) .tiles .tile .cap b{font-size:clamp(2.4rem,4.4vw,4.6rem) !important; line-height:1 !important}
body:not(:has(.hero-util,.hero--shop)) .tiles .tile .cap p{font-size:clamp(1.05rem,1.3vw,1.3rem) !important}
/* flèches « Découvrir / Voir le projet » : diagonales dynamiques, comme celles du menu */
.tile .more svg,.tiles .tile .more svg{width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:square; overflow:visible; transition:transform .55s cubic-bezier(.16,1,.3,1)}
.tile .more svg path{transition:transform .55s cubic-bezier(.16,1,.3,1)}
.tile:hover .more svg,.tile:focus-visible .more svg{transform:translate(4px,-4px) scale(1.18)}
.tile .more{font-size:.78rem}
/* flèche à côté du titre (plus de bouton « Découvrir ») */
.tile .cap b .ar{display:inline-block; width:.5em; height:.5em; margin-left:.3em; vertical-align:.12em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:square; overflow:visible; transition:transform .55s cubic-bezier(.16,1,.3,1)}
.tile:hover .cap b .ar,.tile:focus-visible .cap b .ar{transform:translate(.14em,-.14em) scale(1.2)}