@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/josefin-sans.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/jost.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bodoni-moda-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/bodoni-moda-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bodoni-moda-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/fraunces-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/fraunces-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fraunces-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/archivo-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/archivo-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Italiana';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/italiana-latin-400-normal.woff2) format('woff2')}
/* AbsoVision, feuille de style du site. Identité Regard, art déco moderne. Modes clair et sombre. */

:root{
  --nuit:#0A2136; --abysse:#061523; --emeraude:#256E5E; --jade:#7AD9BC; --or:#DA9A52;
  --ivoire:#F4EFE6; --platre:#FBF8F2; --brume:#A9B6C2; --ardoise:#4A5A68;
  --f-display:'Josefin Sans','Century Gothic','Futura',sans-serif;
  --f-text:'Jost','Futura','Century Gothic',system-ui,sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --max:1320px;
  --hd-h:64px;
  --ease:cubic-bezier(.22,.7,.2,1);
  /* surfaces papier, mode clair */
  --p-bg:#F4EFE6; --p-bg2:#FBF8F2; --p-fg:#0A2136; --p-muted:#4A5A68; --p-accent:#256E5E; --p-line:rgba(10,33,54,.22);
  --p-panel:#FBF8F2; --p-panel2:#F4EFE6; --p-focus:#256E5E; --p-btn:#0A2136; --p-btn-fg:#F4EFE6; --p-btn-hover:#256E5E;
  --p-err:#9A2B1B; --p-pupil:#256E5E; --p-sel:#0A2136; --p-sel-fg:#F4EFE6; --p-scheme:light;
  --lv-vert:#1D6656; --lv-orange:#8A500C; --lv-rouge:#A33A26;
  color-scheme:light dark;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}
/* surfaces papier, mode sombre : réglage du système, sauf choix contraire */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --p-bg:#102A44; --p-bg2:#0D243B; --p-fg:#F4EFE6; --p-muted:#B4C0CB; --p-accent:#7AD9BC; --p-line:rgba(244,239,230,.17);
    --p-panel:#16344F; --p-panel2:#122E48; --p-focus:#7AD9BC; --p-btn:#DA9A52; --p-btn-fg:#0A2136; --p-btn-hover:#F4EFE6;
    --p-err:#FF9B85; --p-pupil:#DA9A52; --p-sel:#F4EFE6; --p-sel-fg:#0A2136; --p-scheme:dark;
    --lv-vert:#7AD9BC; --lv-orange:#E9B37C; --lv-rouge:#FF9B85;
  }
}
/* surfaces papier, mode sombre choisi */
:root[data-theme="dark"]{
  --p-bg:#102A44; --p-bg2:#0D243B; --p-fg:#F4EFE6; --p-muted:#B4C0CB; --p-accent:#7AD9BC; --p-line:rgba(244,239,230,.17);
  --p-panel:#16344F; --p-panel2:#122E48; --p-focus:#7AD9BC; --p-btn:#DA9A52; --p-btn-fg:#0A2136; --p-btn-hover:#F4EFE6;
  --p-err:#FF9B85; --p-pupil:#DA9A52; --p-sel:#F4EFE6; --p-sel-fg:#0A2136; --p-scheme:dark;
  --lv-vert:#7AD9BC; --lv-orange:#E9B37C; --lv-rouge:#FF9B85;
}
:root[data-theme="light"]{ color-scheme:light }
:root[data-theme="dark"]{ color-scheme:dark }
@media (min-width:1280px){ :root{ --hd-h:80px } }

*,*::before,*::after{ box-sizing:border-box }
html{ background:var(--abysse); -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hd-h) + 16px) }
body{ margin:0; background:var(--nuit); color:var(--ivoire); font:400 1.0625rem/1.6 var(--f-text); overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
img,svg{ display:block; max-width:100% }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{ margin:0 }
ul,ol{ padding:0; list-style:none }
a{ color:inherit }
button{ font:inherit; color:inherit }
[hidden]{ display:none !important }
::selection{ background:var(--or); color:var(--nuit) }
:focus-visible{ outline:2px solid var(--focus,var(--jade)); outline-offset:3px }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
@media (max-width:1279px){ html{ scroll-padding-bottom:96px } }

/* Thèmes de section */
.t-nuit,.t-abysse{ --fg:var(--ivoire); --muted:var(--brume); --accent:var(--or); --line:rgba(244,239,230,.2); --focus:var(--jade);
  --btn:var(--or); --btn-fg:var(--nuit); --btn-hover:var(--ivoire); --err:#FF9B85; --pupil:var(--or); --sel:var(--ivoire); --sel-fg:var(--nuit);
  background:var(--bg); color:var(--fg); color-scheme:dark }
.t-nuit{ --bg:var(--nuit); --panel:#0E2A43 }
.t-abysse{ --bg:var(--abysse); --panel:var(--nuit) }
.t-ivoire,.t-platre{ --fg:var(--p-fg); --muted:var(--p-muted); --accent:var(--p-accent); --line:var(--p-line); --focus:var(--p-focus);
  --btn:var(--p-btn); --btn-fg:var(--p-btn-fg); --btn-hover:var(--p-btn-hover); --err:var(--p-err); --pupil:var(--p-pupil); --sel:var(--p-sel); --sel-fg:var(--p-sel-fg);
  background:var(--bg); color:var(--fg); color-scheme:var(--p-scheme) }
.t-ivoire{ --bg:var(--p-bg); --panel:var(--p-panel) }
.t-platre{ --bg:var(--p-bg2); --panel:var(--p-panel2) }
.t-emeraude{ --bg:var(--emeraude); --fg:var(--ivoire); --muted:var(--ivoire); --accent:var(--ivoire); --line:rgba(244,239,230,.36); --panel:#1F6052; --focus:var(--ivoire); background:var(--bg); color:var(--fg); color-scheme:dark }

/* Typographie */
h1,h2,h3,.display{ font-family:var(--f-display); font-weight:300; line-height:1.04; letter-spacing:-.012em; text-wrap:balance }
h1{ font-size:clamp(2.7rem,7.4vw,5.6rem) }
h2{ font-size:clamp(2.05rem,4.7vw,3.75rem) }
h3{ font-size:1.5rem; font-weight:400; line-height:1.15; letter-spacing:0 }
p{ text-wrap:pretty }
.lead{ font-size:clamp(1.15rem,1.7vw,1.375rem); line-height:1.5 }
.muted{ color:var(--muted) }
.small{ font-size:.9375rem }
.caps{ font:600 .8125rem/1.2 var(--f-display); letter-spacing:.2em; text-transform:uppercase }
.measure{ max-width:62ch }
.link{ text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1px; text-underline-offset:.3em }
.link:hover{ text-decoration-thickness:2px }
.more{ display:inline-flex; align-items:center; gap:.9em; padding:.5em 0 .35em; font:600 .8125rem/1.2 var(--f-display); letter-spacing:.2em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--accent) }
.more .loz{ width:7px; height:12px; fill:var(--accent); transition:transform .25s var(--ease) }
.more:hover .loz{ transform:translateX(5px) }
.skip{ position:absolute; left:16px; top:-80px; z-index:100; padding:14px 18px; background:var(--or); color:var(--nuit); font-weight:600 }
.skip:focus{ top:16px }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* Mise en page */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter) }
.wrap--narrow{ max-width:880px }
.sec{ padding-block:clamp(72px,10vw,148px) }
.sec--tight{ padding-block:clamp(56px,7vw,96px) }
.sec-head{ max-width:940px; margin:0 auto clamp(40px,6vw,84px); text-align:center }
.sec-head .lead{ max-width:58ch; margin:1.4rem auto 0; color:var(--muted) }
.sec-head--left{ margin-inline:0; text-align:left }
.sec-head--left .lead{ margin-inline:0 }
.orn{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:clamp(22px,3vw,34px) }
.orn::before,.orn::after{ content:''; width:56px; height:1px; background:var(--or) }
.orn .loz{ width:9px; height:15px; fill:var(--or) }
.sec-head--left .orn{ justify-content:flex-start }
.sec-head--left .orn::before{ display:none }
.stack > * + *{ margin-top:1.1em }
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center }
.center{ text-align:center }
.center .cta-row{ justify-content:center }
.duo{ display:grid; gap:clamp(36px,6vw,88px); align-items:center }
.duo > *,.cols > *,.dial-grid > *,.offers > *,.fam > *{ min-width:0 }
@media (min-width:960px){ .duo{ grid-template-columns:1fr 1fr } .duo--wide{ grid-template-columns:.78fr 1.22fr } }

/* Boutons */
.btn{ --cut:9px; --chamfer:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
  position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:.25em 1.7em 0;
  font:600 .8125rem/1.15 var(--f-display); letter-spacing:.2em; text-transform:uppercase; text-decoration:none; text-align:center;
  color:var(--btn-fg,var(--nuit)); background:var(--btn,var(--or)); border:0; cursor:pointer; clip-path:var(--chamfer); transition:background-color .2s,color .2s }
.btn:hover{ background:var(--btn-hover,var(--ivoire)); color:var(--btn-fg,var(--nuit)) }
.btn:focus-visible{ outline:0; box-shadow:inset 0 0 0 3px var(--bg,var(--nuit)), inset 0 0 0 5px var(--fg,var(--ivoire)) }
.btn.btn--ghost{ background:var(--fg); color:var(--fg) }
.btn.btn--ghost::before{ content:''; position:absolute; inset:1px; z-index:-1; background:var(--bg); clip-path:var(--chamfer); transition:background-color .2s }
.btn.btn--ghost:hover{ color:var(--bg) }
.btn.btn--ghost:hover::before{ background:var(--fg) }
.btn.btn--ghost:focus-visible{ box-shadow:none }
.btn.btn--ghost:focus-visible::before{ inset:3px }
.btn[disabled]{ opacity:.55; cursor:progress }
.btn--sm{ min-height:44px; padding-inline:1.3em; font-size:.75rem; white-space:nowrap }
.btn--block{ display:flex; width:100% }

/* Marque */
.mark{ --mk:var(--ivoire); --mk-pupil:var(--or); overflow:visible }
.mk-letters{ fill:var(--mk); fill-rule:evenodd }
.mk-ring,.mk-seal,.mk-ray{ fill:none; stroke:var(--mk) }
.mk-pupil{ fill:var(--mk-pupil) }
.wm{ font:500 .9375rem/1 var(--f-display); letter-spacing:.26em; padding-top:.16em; white-space:nowrap }

/* En-tête */
.hd{ position:sticky; top:env(safe-area-inset-top,0px); z-index:50; height:var(--hd-h); background:var(--nuit); color:var(--ivoire); border-bottom:1px solid rgba(244,239,230,.14); transition:background-color .3s,border-color .3s }
.hd.is-over{ background:transparent; border-bottom-color:transparent }
.menu-open .hd{ background:transparent; border-bottom-color:transparent }
.hd-in{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:100% }
.hd-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; min-height:44px }
.hd-brand .mark{ width:34px; height:34px; flex:none }
.hd-nav{ display:none }
.hd-tools{ display:flex; align-items:center; gap:6px }
.hd-tools .btn{ display:none }
.lang{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding-top:.16em; font:600 .8125rem/1 var(--f-display); letter-spacing:.2em; text-decoration:none; color:var(--brume) }
.lang:hover{ color:var(--ivoire) }
.theme{ display:none; align-items:center; justify-content:center; width:44px; height:44px; padding:0; background:none; border:0; cursor:pointer; color:var(--brume) }
.theme svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4; transition:transform .45s var(--ease) }
.theme svg path{ fill:currentColor; stroke:none }
.theme:hover{ color:var(--ivoire) }
.theme[aria-pressed="true"] svg{ transform:rotate(180deg) }
@media (min-width:720px){ .theme{ display:inline-flex } }
.burger{ display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:.16em 0 0 10px; background:none; border:0; cursor:pointer; font:600 .8125rem/1 var(--f-display); letter-spacing:.2em; text-transform:uppercase }
.burger i{ position:relative; display:block; width:24px; height:10px; margin-top:-.16em }
.burger i::before,.burger i::after{ content:''; position:absolute; left:0; right:0; height:1.5px; background:currentColor; transition:transform .3s var(--ease) }
.burger i::before{ top:0 } .burger i::after{ bottom:0 }
.burger[aria-expanded="true"] i::before{ transform:translateY(4.25px) rotate(21deg) }
.burger[aria-expanded="true"] i::after{ transform:translateY(-4.25px) rotate(-21deg) }
@media (min-width:1280px){
  .hd-nav{ display:flex; align-items:center; gap:clamp(18px,2.2vw,36px) }
  .hd-nav a{ position:relative; padding:.9em 0 .7em; font:500 1rem/1 var(--f-text); text-decoration:none; color:var(--ivoire); white-space:nowrap }
  .hd-nav a::after{ content:''; position:absolute; left:0; right:0; bottom:.3em; height:1px; background:var(--or); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease) }
  .hd-nav a:hover::after,.hd-nav a[aria-current="page"]::after{ transform:scaleX(1) }
  .hd-tools .btn{ display:inline-flex; margin-left:10px }
  .burger{ display:none }
}

/* Menu mobile, ouverture en portes d'ascenseur */
.menu{ position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; padding:calc(var(--hd-h) + env(safe-area-inset-top,0px) + 24px) var(--gutter) calc(28px + env(safe-area-inset-bottom,0px)); color:var(--ivoire); overflow-y:auto; visibility:hidden; pointer-events:none }
.menu::before,.menu::after{ content:''; position:fixed; top:0; bottom:0; width:50.2%; background:var(--abysse); transition:transform .5s var(--ease) }
.menu::before{ left:0; transform:translateX(-101%); border-right:1px solid rgba(218,154,82,.5) }
.menu::after{ right:0; transform:translateX(101%) }
.menu.is-open{ visibility:visible; pointer-events:auto }
.menu.is-open::before,.menu.is-open::after{ transform:none }
.menu > *{ position:relative; z-index:1; opacity:0; transform:translateY(10px); transition:opacity .3s,transform .4s var(--ease) }
.menu.is-open > *{ opacity:1; transform:none; transition-delay:.28s }
.menu-nav{ display:flex; flex-direction:column; margin-block:auto }
.menu-nav a{ display:flex; align-items:baseline; justify-content:space-between; padding:.46em 0 .3em; font:300 clamp(1.9rem,8.6vw,2.6rem)/1.1 var(--f-display); text-decoration:none; border-bottom:1px solid rgba(244,239,230,.14) }
.menu-nav a[aria-current="page"]{ color:var(--or) }
.menu-foot{ display:flex; flex-direction:column; gap:16px; padding-top:28px }
.menu-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px }
.menu-foot .lang{ justify-content:flex-start; color:var(--brume) }
.theme-row{ display:inline-flex; align-items:center; gap:14px; min-height:44px; padding:0; background:none; border:0; cursor:pointer; font:500 1rem/1 var(--f-text); color:var(--ivoire) }
.theme-row i{ position:relative; width:46px; height:24px; border:1px solid rgba(244,239,230,.55) }
.theme-row i::after{ content:''; position:absolute; top:4px; left:5px; width:10px; height:14px; background:var(--brume); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); transition:transform .3s var(--ease),background-color .3s }
.theme-row[aria-pressed="true"] i::after{ transform:translateX(24px); background:var(--or) }
.menu-open{ overflow:hidden }
@media (min-width:1280px){ .menu{ display:none } }

/* Barre d'action mobile */
.dock{ position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; gap:10px; align-items:center; padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px)); background:var(--abysse); border-top:1px solid rgba(218,154,82,.55); color:var(--ivoire); transform:translateY(105%); visibility:hidden; transition:transform .4s var(--ease),visibility 0s .4s }
.dock.is-on{ transform:none; visibility:visible; transition:transform .4s var(--ease),visibility 0s }
.dock .btn{ flex:1; min-height:48px; padding-inline:1em; letter-spacing:.16em; font-size:.75rem }
.dock .btn--ghost{ flex:0 0 auto; padding-inline:1.5em }
@media (min-width:1280px){ .dock{ display:none } }

/* Ouverture : le signe en soleil, halo émeraude sur fond nuit */
.hero{ position:relative; margin-top:calc(-1 * var(--hd-h)); padding-top:var(--hd-h); background:linear-gradient(180deg,#0E2C46 0%,#0B2439 34%,var(--nuit) 78%); overflow:hidden; --bg:var(--nuit) }
.hero-in{ position:relative; display:grid; gap:8px; padding-block:clamp(28px,4vw,56px) clamp(48px,7vw,104px) }
.hero-mark{ position:relative; isolation:isolate; justify-self:center; width:min(62vw,320px) }
.hero-mark::before{ content:''; position:absolute; left:50%; top:50%; width:340%; aspect-ratio:1; transform:translate(-50%,-50%); z-index:-2; pointer-events:none;
  background:radial-gradient(circle,rgba(47,138,116,.62) 0,rgba(37,110,94,.36) 20%,rgba(37,110,94,.12) 40%,rgba(37,110,94,0) 62%) }
.hero-mark .mark{ position:relative; width:100%; height:auto; aspect-ratio:1 }
.aura{ position:absolute; left:50%; top:50%; width:340%; max-width:none; height:auto; aspect-ratio:1; transform:translate(-50%,-50%); z-index:-1; pointer-events:none;
  -webkit-mask-image:radial-gradient(circle,#000 24%,rgba(0,0,0,.5) 46%,transparent 66%); mask-image:radial-gradient(circle,#000 24%,rgba(0,0,0,.5) 46%,transparent 66%) }
.aura line{ stroke:var(--or); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.8 }
.aura circle{ fill:none; stroke:var(--ivoire); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.2 }
.aura-turn{ transform-origin:500px 500px }
.hero h1{ font-size:clamp(2.7rem,7.4vw,5.2rem); line-height:1; letter-spacing:-.025em; margin-left:-.04em }
.hero-copy{ position:relative }
.hero-copy .lead{ max-width:34ch; margin-top:clamp(18px,2.4vw,30px) }
.hero-copy .cta-row{ margin-top:clamp(26px,3.4vw,44px) }
.hero-note{ margin-top:20px; color:var(--brume); font-size:.9375rem }
@media (max-width:519px){ .hero .cta-row .btn{ flex:1 1 100% } }
@media (min-width:720px){
  .hero-in{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:center; gap:clamp(16px,3vw,48px); min-height:min(78vh,760px) }
  .hero-copy{ grid-column:1; grid-row:1 }
  .hero-mark{ grid-column:2; grid-row:1; width:min(100%,500px) }
  .aura{ -webkit-mask-image:radial-gradient(circle,#000 24%,rgba(0,0,0,.5) 46%,transparent 66%),linear-gradient(90deg,transparent 19%,#000 36%); -webkit-mask-composite:source-in; mask-image:radial-gradient(circle,#000 24%,rgba(0,0,0,.5) 46%,transparent 66%),linear-gradient(90deg,transparent 19%,#000 36%); mask-composite:intersect }
  .hero-copy .lead{ max-width:38ch }
}

/* Animation d'ouverture du monogramme, une seule fois */
@media (prefers-reduced-motion:no-preference){
  .mark--live .mk-ring{ stroke-dasharray:1; animation:mk-draw 1.3s var(--ease) both }
  .mark--live .mk-letters{ animation:mk-rise .9s var(--ease) .45s both; transform-origin:500px 500px }
  .mark--live .mk-ray{ stroke-dasharray:1; animation:mk-draw .7s var(--ease) both, mk-breathe 7s ease-in-out infinite; animation-delay:calc(1s + var(--i) * 45ms), calc(3s + var(--i) * 180ms) }
  .mark--live .mk-seal{ animation:mk-fade .8s ease 1.6s both }
  .mark--live .mk-pupil{ transform-origin:500px 500px; animation:mk-pop .6s cubic-bezier(.3,1.6,.5,1) 1.5s both }
  .mk-gaze{ transition:transform .5s var(--ease) }
  .aura line{ stroke-dasharray:1; animation:mk-draw 1.5s var(--ease) both; animation-delay:calc(.9s + var(--i) * 16ms) }
  .aura circle{ animation:aura-in 1.6s ease 1.4s both }
  .aura-turn{ animation:aura-turn 420s linear infinite }
}
@keyframes mk-draw{ from{ stroke-dashoffset:1 } to{ stroke-dashoffset:0 } }
@keyframes mk-rise{ from{ opacity:0; transform:scale(.94) } to{ opacity:1; transform:none } }
@keyframes mk-fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes mk-pop{ from{ opacity:0; transform:scale(0) } to{ opacity:1; transform:none } }
@keyframes aura-turn{ to{ transform:rotate(360deg) } }
@keyframes aura-in{ from{ opacity:0 } to{ opacity:.2 } }
@keyframes mk-breathe{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }

/* Les trois engagements */
.vows{ display:grid; border-top:1px solid var(--line) }
.vow{ display:grid; grid-template-columns:auto 1fr; gap:4px 18px; align-items:baseline; align-content:start; padding:22px 0; border-bottom:1px solid var(--line) }
.vow .loz{ width:9px; height:15px; fill:var(--or); align-self:center; grid-row:1 }
.vow h2{ font:400 1.375rem/1.15 var(--f-display); letter-spacing:0 }
.vow p{ grid-column:2; color:var(--muted) }
@media (min-width:860px){
  .vows{ grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line) }
  .vow{ padding:30px clamp(18px,2.4vw,36px); border-bottom:0 }
  .vow + .vow{ border-left:1px solid var(--line) }
  .vow:first-child{ padding-left:0 }
}

/* Cadres à gradins */
.gradin{ --s:10px; --gr:polygon(0 calc(2*var(--s)),var(--s) calc(2*var(--s)),var(--s) var(--s),calc(2*var(--s)) var(--s),calc(2*var(--s)) 0,calc(100% - 2*var(--s)) 0,calc(100% - 2*var(--s)) var(--s),calc(100% - var(--s)) var(--s),calc(100% - var(--s)) calc(2*var(--s)),100% calc(2*var(--s)),100% 100%,0 100%);
  position:relative; isolation:isolate; background:var(--edge,var(--line)); clip-path:var(--gr) }
.gradin::before{ content:''; position:absolute; inset:1px; z-index:-1; background:var(--panel); clip-path:var(--gr) }
.flute{ height:22px; background-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 11px); opacity:.34 }

/* Offres */
.offers{ display:grid; gap:20px }
@media (min-width:640px){ .offers{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1000px){ .offers--3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px) } .offers--4{ gap:clamp(16px,2vw,28px) } }
.offer{ display:flex; flex-direction:column; padding:calc(2*var(--s) + 22px) clamp(22px,2.6vw,36px) 28px; color:var(--fg); transition:background-color .25s }
.offer:hover{ --edge:var(--or) }
.offer.offer--featured{ --edge:rgba(218,154,82,.6); --panel:var(--nuit); background:var(--edge) }
.offer:focus-within{ --edge:var(--focus) }
.offer:focus-within::before{ inset:3px }
.offer-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:22px }
.offer-glyph{ width:54px; height:54px; stroke:var(--or); fill:none; stroke-width:1.5 }
.offer-glyph .f{ fill:var(--or); stroke:none }
.offer h3{ font-size:clamp(1.6rem,2.3vw,1.95rem); font-weight:300 }
.offer-link{ color:inherit; text-decoration:none }
.offer-link::after{ content:''; position:absolute; inset:0; z-index:1 }
.offer-link:focus-visible{ outline:0 }
.offer-pitch{ margin-top:14px; color:var(--muted) }
.offer-gets{ margin-top:20px }
.offer-gets-t{ font-weight:600; font-size:.9375rem }
.offer-gets ul{ margin-top:10px; display:grid; gap:8px }
.offer-gets li{ position:relative; padding-left:20px; font-size:.9375rem; line-height:1.4; color:var(--muted) }
.offer-gets li::before{ content:''; position:absolute; left:2px; top:.38em; width:6px; height:10px; background:var(--accent); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%) }
.offer-meta{ margin-top:auto; padding-top:24px }
.offer-meta div{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--line); font-size:.9375rem }
.offer-meta dt{ color:var(--muted) }
.offer-meta dd{ text-align:right; font-weight:500 }
.offer-go{ align-self:flex-start; display:inline-flex; align-items:center; gap:.9em; margin-top:20px; padding:.5em 0 .35em; font:600 .8125rem/1.2 var(--f-display); letter-spacing:.2em; text-transform:uppercase; border-bottom:1px solid var(--accent) }
.offer-go .loz{ width:7px; height:12px; fill:var(--accent); transition:transform .25s var(--ease) }
.offer:hover .offer-go .loz{ transform:translateX(5px) }
.badge{ flex:none; display:inline-flex; align-items:center; padding:.45em .75em .32em; font:600 .6875rem/1 var(--f-display); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); border:1px solid currentColor; white-space:nowrap }
.fam{ display:grid; gap:24px; padding-block:clamp(40px,5vw,72px); border-top:1px solid var(--line) }
.fam:first-child{ border-top:0; padding-top:0 }
.fam:last-child{ padding-bottom:0 }
.fam-head h2{ font-size:clamp(1.8rem,3.2vw,2.6rem) }
.fam-head p{ margin-top:12px; color:var(--muted); max-width:34ch }
@media (min-width:1000px){ .fam{ grid-template-columns:minmax(0,.75fr) minmax(0,2fr); gap:clamp(32px,4vw,64px) } }
.fam-aside{ align-self:start; padding:22px 24px; border-left:2px solid var(--or) }
.fam-aside p{ color:var(--muted) }
.fam-aside .more{ margin-top:16px }
.later{ display:grid; margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--line) }
.later-item{ display:grid; gap:4px 28px; padding:20px 0; border-bottom:1px solid var(--line) }
.later-item h3{ font-size:1.3125rem }
.later-item p{ color:var(--muted) }
@media (min-width:860px){ .later-item{ grid-template-columns:minmax(220px,1fr) 2fr; align-items:baseline } }

/* Parcours en trois phases */
.path{ display:grid; border-top:1px solid var(--fg) }
.path > li{ position:relative; display:flex; flex-direction:column; padding:30px 0 32px; border-bottom:1px solid var(--line) }
.path > li::before{ content:''; position:absolute; top:-8px; left:0; width:9px; height:15px; background:var(--or); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%) }
.path-n{ font:300 clamp(3.2rem,6vw,4.6rem)/.9 var(--f-display); color:var(--accent) }
.path h3{ margin-top:18px; font-size:clamp(1.6rem,2.4vw,2rem); font-weight:300 }
.path h3 + p{ margin-top:12px; color:var(--muted); max-width:40ch }
.path .path-meta{ margin-top:auto; padding-top:20px; font-weight:500 }
.path .path-link{ margin-top:12px }
@media (min-width:900px){
  .path{ grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line) }
  .path > li{ padding:34px clamp(20px,2.6vw,40px) 36px; border-bottom:0 }
  .path > li + li{ border-left:1px solid var(--line) }
  .path > li:first-child{ padding-left:0 }
  .path > li + li::before{ left:clamp(20px,2.6vw,40px) }
}

/* Cadran */
.dial-sec{ position:relative }
.dial-grid{ display:grid }
.dial-stick{ position:sticky; top:calc(var(--hd-h) + env(safe-area-inset-top,0px)); z-index:5; margin-inline:calc(var(--gutter) * -1); padding:14px var(--gutter) 10px; background:var(--bg); border-bottom:1px solid var(--line) }
.dial{ width:min(100%,330px); margin-inline:auto; overflow:visible }
.dial-arc{ fill:none; stroke:var(--fg); stroke-width:10 }
.dial-hair{ fill:none; stroke:var(--fg); stroke-width:1; opacity:.5 }
.dial-tick{ stroke:var(--fg); stroke-width:1; opacity:.5 }
.dial-tick--major{ stroke-width:2; opacity:1 }
.dial-gold{ fill:none; stroke:var(--or); stroke-width:10; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--p,.125)); transition:stroke-dashoffset .9s var(--ease) }
.dial-num{ font:300 40px/1 var(--f-display); fill:var(--fg); opacity:.4; text-anchor:middle; transition:opacity .4s,fill .4s }
.dial-num.is-on{ fill:var(--or); opacity:1 }
.dial-needle{ fill:var(--fg); transform-origin:260px 270px; transform:rotate(var(--a,-67.5deg)); transition:transform 1s cubic-bezier(.34,1.5,.5,1) }
.dial-hub{ fill:var(--or) }
.dial-base{ fill:none; stroke:var(--fg); stroke-width:1.5 }
.dial-label{ margin-top:2px; text-align:center; color:var(--or) }
@media (prefers-reduced-motion:reduce){ .dial-needle,.dial-gold{ transition:none } }
.stage{ display:grid; grid-template-columns:auto 1fr; gap:6px clamp(18px,3vw,36px); padding-block:clamp(34px,7vh,72px); border-bottom:1px solid var(--line); transition:opacity .4s }
.stage:last-child{ border-bottom:0 }
.stage-n{ grid-row:1 / span 2; font:300 clamp(3.4rem,8vw,5.5rem)/.9 var(--f-display); color:var(--muted); transition:color .4s; min-width:1.1ch }
.stage h3{ font-size:clamp(1.6rem,2.6vw,2.2rem); font-weight:300; align-self:end }
.stage p{ grid-column:2; color:var(--muted); max-width:46ch }
.js .stage:not(.is-on) h3{ opacity:.72 }
.stage.is-on .stage-n{ color:var(--or) }
.dial-after{ margin-top:clamp(28px,4vw,48px) }
@media (min-width:960px){
  .dial-grid{ grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px); align-items:start }
  .dial-stick{ top:calc(var(--hd-h) + 9vh); margin:0; padding:0; border:0; background:none }
  .dial{ width:min(100%,520px) }
  .dial-label{ margin-top:14px }
  .stage{ padding-block:clamp(48px,11vh,110px) }
  .stage:first-child{ padding-top:clamp(20px,5vh,56px) }
}

/* Trois niveaux de demande */
.levels{ display:grid; gap:16px }
.level{ padding:26px clamp(20px,2.4vw,30px) 28px; background:var(--panel); border-top:3px solid var(--lv) }
.level--vert{ --lv:var(--lv-vert) } .level--orange{ --lv:var(--lv-orange) } .level--rouge{ --lv:var(--lv-rouge) }
.level-tag{ display:flex; align-items:center; gap:10px; font:600 .8125rem/1 var(--f-display); letter-spacing:.2em; text-transform:uppercase; color:var(--lv); padding-top:.16em }
.level-dot{ width:10px; height:16px; margin-top:-.16em; background:var(--lv); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%) }
.level h3{ margin-top:16px; font-size:1.5rem; font-weight:300 }
.level-ex{ margin-top:12px; color:var(--muted) }
.level-who{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); font-weight:500 }
@media (min-width:900px){ .levels{ grid-template-columns:repeat(3,1fr) } }

/* Espace client, démonstration (toujours en clair, comme une capture d'écran) */
.portal{ color:var(--nuit); background:var(--platre); box-shadow:0 0 0 1px rgba(244,239,230,.25), 0 50px 90px -40px rgba(0,0,0,.75); color-scheme:light;
  --fg:var(--nuit); --bg:var(--platre); --muted:var(--ardoise); --line:rgba(10,33,54,.16); --accent:var(--emeraude); --focus:var(--emeraude);
  --btn:var(--nuit); --btn-fg:var(--ivoire); --btn-hover:var(--emeraude) }
.portal .btn:hover{ color:var(--ivoire) }
.portal-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; background:var(--abysse); color:var(--ivoire) }
.portal-brand{ display:flex; align-items:center; gap:10px }
.portal-brand .mark{ width:24px; height:24px }
.portal-brand .wm{ font-size:.75rem }
.portal-demo{ font-size:.8125rem; color:var(--brume); text-align:right }
.portal-tabs{ display:flex; overflow-x:auto; border-bottom:1px solid var(--line); scrollbar-width:none }
.portal-tabs::-webkit-scrollbar{ display:none }
.portal-tabs button{ flex:1 0 auto; min-height:48px; padding:.3em 16px 0; background:none; border:0; border-bottom:2px solid transparent; cursor:pointer; font:600 .75rem/1 var(--f-display); letter-spacing:.16em; text-transform:uppercase; color:var(--ardoise) }
.portal-tabs button[aria-selected="true"]{ color:var(--nuit); border-bottom-color:var(--or) }
.portal-tabs button:focus-visible{ outline-offset:-3px }
.portal-main{ padding:clamp(20px,3vw,34px); min-height:392px }
.portal-ref{ font-size:.875rem; color:var(--ardoise) }
.portal h3{ margin-top:4px; font-size:clamp(1.5rem,2.4vw,1.9rem); font-weight:300 }
.track{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:26px }
.track button{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:4px 2px 0; background:none; border:0; cursor:pointer; font:500 .8125rem/1.2 var(--f-text); color:var(--ardoise) }
.track button::before{ content:''; position:absolute; top:13px; left:-50%; right:50%; height:1px; background:var(--line) }
.track button:first-child::before{ display:none }
.track button .loz{ position:relative; width:12px; height:20px; fill:var(--platre); stroke:var(--ardoise); stroke-width:1; overflow:visible }
.track button.is-done::before,.track button.is-now::before{ background:var(--emeraude); height:2px; top:12.5px }
.track button.is-done .loz{ fill:var(--emeraude); stroke:var(--emeraude) }
.track button.is-now{ color:var(--nuit); font-weight:600 }
.track button.is-now .loz{ fill:var(--or); stroke:var(--or); transform:scale(1.25) }
.portal-status{ margin-top:22px; padding:14px 16px; background:var(--ivoire); border-left:2px solid var(--or); font-size:.9375rem; min-height:4.6em }
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px 22px; margin-top:22px }
.facts dt{ font-size:.8125rem; color:var(--ardoise) }
.facts dd{ font:400 1.25rem/1.2 var(--f-display); padding-top:.2em }
.rows > li{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:.9375rem }
.rows > li:first-child{ border-top:1px solid var(--line) }
.rows small{ display:block; color:var(--ardoise); font-size:.8125rem }
.pill{ flex:none; padding:.42em .8em .28em; font:600 .6875rem/1 var(--f-display); letter-spacing:.14em; text-transform:uppercase; border:1px solid currentColor; color:var(--ardoise) }
.pill--ok{ color:var(--emeraude) }
.portal-panel > .rows{ margin-top:22px }
.mock{ margin-top:18px; background:#FFFDF9; border:1px solid var(--line) }
.mock-bar{ display:flex; align-items:center; gap:6px; padding:9px 12px; background:var(--ivoire); border-bottom:1px solid var(--line) }
.mock-bar span{ width:8px; height:8px; border-radius:50%; background:rgba(10,33,54,.22) }
.mock-bar em{ margin-left:8px; font-style:normal; font-size:.8125rem; color:var(--ardoise); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mock-body{ padding:18px 18px 20px }
.mock-kicker{ font:600 .75rem/1 var(--f-display); letter-spacing:.16em; text-transform:uppercase; color:var(--emeraude) }
.mock-new{ margin-top:12px; padding:10px 12px; background:rgba(122,217,188,.28); border-left:2px solid var(--emeraude) }
.mock-old{ margin-top:10px; color:var(--ardoise); font-size:.9375rem }
.mock-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }

/* Bandeau défilant */
.marquee{ position:relative; overflow:hidden; padding-block:clamp(22px,3vw,36px); border-block:1px solid var(--line) }
.marquee.is-paused .marquee-track{ animation-play-state:paused }
.marquee-pause{ position:absolute; right:0; top:0; bottom:0; z-index:2; display:flex; align-items:center; justify-content:center; width:clamp(64px,7vw,96px); padding:0 0 0 18px; background:linear-gradient(90deg,rgba(37,110,94,0),var(--emeraude) 38%); border:0; cursor:pointer; color:var(--ivoire) }
.marquee-pause:focus-visible{ outline:2px solid var(--ivoire); outline-offset:-6px }
.marquee-pause::before,.marquee-pause::after{ content:""; width:4px; height:18px; margin:0 2px; background:currentColor }
.marquee-pause[aria-pressed="true"]::before{ width:0; height:0; margin:0 0 0 4px; background:none; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent currentColor }
.marquee-pause[aria-pressed="true"]::after{ display:none }
.marquee-track{ display:flex; width:max-content; animation:marquee 46s linear infinite }
.marquee-set{ display:flex; align-items:center; flex:none }
.marquee-set span{ font:300 clamp(1.7rem,4.2vw,3.1rem)/1 var(--f-display); padding-top:.16em; white-space:nowrap }
.marquee-set .loz{ flex:none; width:11px; height:19px; margin-inline:clamp(22px,3.6vw,52px); fill:var(--or) }
@keyframes marquee{ to{ transform:translateX(-50%) } }
.marquee:hover .marquee-track{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; width:auto; flex-wrap:wrap } .marquee-set{ flex-wrap:wrap; justify-content:center; row-gap:10px } .marquee-set[aria-hidden]{ display:none } .marquee-pause{ display:none } }

/* Publics */
.split{ display:grid; border-top:1px solid var(--line) }
.split-item{ padding:clamp(28px,4vw,56px) 0; border-bottom:1px solid var(--line) }
.split-item h3{ font-size:clamp(1.7rem,3vw,2.5rem); font-weight:300 }
.split-item p{ margin-top:16px; color:var(--muted); max-width:44ch }
.split-item .more{ margin-top:24px }
@media (min-width:860px){
  .split{ grid-template-columns:1fr 1fr }
  .split-item{ padding-inline:clamp(28px,4vw,64px) }
  .split-item:first-child{ padding-left:0; border-right:1px solid var(--line) }
  .split-item:last-child{ padding-right:0 }
}

/* Plaque fondateur */
.plate{ padding:calc(2*var(--s) + 26px) clamp(24px,4vw,56px) clamp(28px,4vw,48px); text-align:center }
.plate .mark{ width:120px; height:120px; margin:0 auto 22px; --mk:var(--fg); --mk-pupil:var(--pupil) }
.plate-name{ font:400 1.5rem/1.2 var(--f-display) }
.plate-role{ margin-top:10px; color:var(--accent) }
.plate-rule{ width:56px; height:2px; margin:20px auto; background:var(--or) }

/* Questions fréquentes */
.faq{ border-top:1px solid var(--fg) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0 20px; cursor:pointer; list-style:none; font:400 clamp(1.2rem,2vw,1.45rem)/1.25 var(--f-display) }
.faq summary::-webkit-details-marker{ display:none }
.faq summary .loz{ flex:none; width:10px; height:17px; fill:none; stroke:var(--accent); stroke-width:1.2; overflow:visible; transition:transform .3s var(--ease),fill .3s }
.faq details[open] summary .loz{ transform:rotate(90deg); fill:var(--accent) }
.faq details > div{ padding:0 0 26px; max-width:68ch; color:var(--muted) }
.faq details > div > * + *{ margin-top:.8em }

/* Appel final, soleil levant */
.close{ position:relative; overflow:hidden; text-align:center; padding-bottom:0 }
.close h2{ max-width:17ch; margin-inline:auto; font-size:clamp(2.3rem,6vw,4.8rem) }
.close .lead{ margin:1.4rem auto 0; max-width:40ch; color:var(--muted) }
.close .cta-row{ justify-content:center; margin-top:clamp(28px,4vw,44px) }
.sunrise{ width:100%; height:clamp(170px,28vw,360px); margin-top:clamp(40px,6vw,72px) }
.sunrise line,.sunrise path{ fill:none; stroke:var(--or); stroke-width:1; vector-effect:non-scaling-stroke }
.sunrise .sun{ fill:var(--or); stroke:none }

/* En-tête de page intérieure */
.phero{ position:relative; margin-top:calc(-1 * var(--hd-h)); padding-top:var(--hd-h); overflow:hidden; background:radial-gradient(90% 120% at 100% 0,rgba(37,110,94,.42) 0,rgba(37,110,94,.14) 38%,rgba(37,110,94,0) 66%),linear-gradient(180deg,#0E2C46 0%,var(--nuit) 70%) }
.phero-in{ position:relative; display:grid; gap:clamp(28px,4vw,56px); padding-block:clamp(40px,7vw,104px) clamp(48px,7vw,96px) }
.phero h1{ max-width:16ch }
.phero .lead{ max-width:46ch; margin-top:clamp(18px,2.4vw,28px); color:var(--brume) }
.phero .cta-row{ margin-top:clamp(24px,3vw,40px) }
.fan{ position:absolute; top:0; right:0; width:min(74vw,560px); height:auto; opacity:.5; pointer-events:none }
.fan line{ stroke:var(--or); stroke-width:1; vector-effect:non-scaling-stroke }
.fan path{ fill:none; stroke:var(--or); stroke-width:1; vector-effect:non-scaling-stroke }
.phero-top{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin-bottom:clamp(18px,2.4vw,28px) }
.crumb{ display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--or); text-decoration:none }
.crumb .loz{ width:7px; height:12px; fill:var(--or) }
.phero .badge{ color:var(--or) }
@media (min-width:960px){ .phero-in--duo{ grid-template-columns:1.2fr .8fr; align-items:end } }
.ticket{ padding:calc(2*var(--s) + 20px) clamp(22px,2.6vw,34px) 28px; color:var(--fg); --edge:rgba(218,154,82,.7) }
.ticket-title{ font:300 clamp(2.1rem,3.4vw,2.75rem)/1 var(--f-display); letter-spacing:-.01em }
.ticket .offer-meta{ padding-top:18px }
.ticket .btn{ margin-top:22px }
.ticket-note{ margin-top:14px; font-size:.875rem; color:var(--muted) }

/* Blocs de contenu */
.cols{ display:grid; gap:clamp(28px,4vw,64px) }
.cols .sec-head--left{ margin-bottom:clamp(20px,2.4vw,32px) }
@media (min-width:860px){ .cols-2{ grid-template-columns:1fr 1fr } .cols-3{ grid-template-columns:repeat(3,1fr) } .cols-side{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) } }
.block h3{ margin-bottom:14px }
.block p{ color:var(--muted) }
.ticks > li{ position:relative; padding:13px 0 13px 30px; border-bottom:1px solid var(--line) }
.ticks > li:first-child{ border-top:1px solid var(--line) }
.ticks > li::before{ content:''; position:absolute; left:4px; top:1.25em; width:8px; height:14px; background:var(--accent); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%) }
.ticks--no > li{ color:var(--muted) }
.ticks--no > li::before{ height:1.5px; width:12px; top:1.6em; left:2px; clip-path:none; background:var(--muted) }
.timeline{ display:grid; border-top:1px solid var(--fg) }
.timeline > li{ display:grid; gap:4px 28px; padding:22px 0; border-bottom:1px solid var(--line) }
.timeline .when{ font:400 1.25rem/1.2 var(--f-display); color:var(--accent); padding-top:.1em }
.timeline p{ color:var(--muted) }
@media (min-width:720px){ .timeline > li{ grid-template-columns:200px 1fr } }
.quote{ font:300 clamp(1.5rem,3vw,2.3rem)/1.25 var(--f-display); max-width:26ch }
.table-wrap{ overflow-x:auto; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter) }
table{ width:100%; min-width:640px; border-collapse:collapse; font-size:.9375rem }
th,td{ padding:16px 18px 14px 0; text-align:left; vertical-align:top; border-bottom:1px solid var(--line) }
thead th{ font:600 .75rem/1.2 var(--f-display); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--fg) }
tbody th{ font:400 1.125rem/1.25 var(--f-display); padding-top:18px }
.vs{ min-width:0 }
.vs td{ width:36% }
.vs td:nth-child(2){ color:var(--muted) }
.vs td:last-child{ font-weight:500 }
.vs thead th:last-child{ color:var(--accent) }
.figs{ display:grid; border-top:1px solid var(--fg) }
.fig{ display:grid; gap:6px 28px; padding:24px 0; border-bottom:1px solid var(--line) }
.fig-n{ font:300 clamp(2.4rem,5vw,3.5rem)/1 var(--f-display); letter-spacing:-.02em; white-space:nowrap }
.fig-n small{ font-size:.45em; letter-spacing:0; margin-left:.12em }
.fig p{ max-width:56ch }
.fig cite{ display:block; margin-top:6px; font-style:normal; font-size:.875rem; color:var(--muted) }
@media (min-width:720px){ .fig{ grid-template-columns:230px 1fr; align-items:baseline } }
.gloss{ border-top:1px solid var(--fg) }
.gloss > div{ display:grid; gap:6px 28px; padding:20px 0; border-bottom:1px solid var(--line) }
.gloss dt{ font:400 1.25rem/1.25 var(--f-display) }
.gloss dd{ color:var(--muted); max-width:60ch }
@media (min-width:720px){ .gloss > div{ grid-template-columns:230px 1fr } }
.idlist{ border-top:1px solid var(--fg) }
.idlist > div{ display:grid; gap:4px 24px; padding:14px 0; border-bottom:1px solid var(--line) }
.idlist dt{ color:var(--muted); font-size:.9375rem; padding-top:.15em }
@media (min-width:720px){ .idlist > div{ grid-template-columns:220px 1fr; align-items:baseline } }
.notice{ padding:18px 20px; border-left:2px solid var(--or); background:var(--panel) }
.prose > * + *{ margin-top:1em }
.prose h2{ font-size:clamp(1.6rem,3vw,2.1rem); margin-top:2.2em }
.prose h2:first-child{ margin-top:0 }
.prose ul{ padding-left:1.2em; list-style:square }
.prose li + li{ margin-top:.4em }
.prose .idlist{ margin-top:1.4em }
.reveal{ display:inline-flex; align-items:center; min-height:44px; padding:.2em 0 0; background:none; border:0; border-bottom:1px solid var(--accent); cursor:pointer; font:500 1rem/1.3 var(--f-text); color:inherit; text-align:left }
.reveal:hover{ border-bottom-width:2px }
html:not(.js) .reveal{ display:none }
.revealed{ overflow-wrap:anywhere }

/* Questionnaire et formulaire */
.quiz{ max-width:860px; margin-inline:auto }
.steps-bar{ display:flex; align-items:center; gap:10px; margin-bottom:clamp(24px,4vw,40px) }
.steps-bar .loz{ width:11px; height:19px; fill:none; stroke:var(--fg); stroke-width:1.2; overflow:visible; transition:fill .3s,stroke .3s }
.steps-bar .loz.is-done{ fill:var(--accent); stroke:var(--accent) }
.steps-bar .loz.is-now{ fill:var(--or); stroke:var(--or) }
.steps-bar span{ margin-left:auto; font-size:.9375rem; color:var(--muted) }
.quiz h2{ font-size:clamp(1.8rem,4.2vw,3rem) }
.quiz h2:focus{ outline:0 }
.quiz-help{ margin-top:12px; color:var(--muted) }
.opts{ display:grid; gap:10px; margin-top:clamp(24px,3.4vw,36px) }
.opt{ position:relative; isolation:isolate; display:flex; align-items:center; gap:16px; width:100%; min-height:62px; padding:14px 18px; text-align:left; background:var(--panel); border:1px solid var(--line); cursor:pointer; font:400 1.0625rem/1.35 var(--f-text); color:var(--fg); transition:background-color .2s,color .2s,border-color .2s }
.opt .loz{ flex:none; width:9px; height:15px; fill:none; stroke:var(--accent); stroke-width:1.2; overflow:visible }
.opt:hover{ border-color:var(--fg) }
.opt.is-on{ background:var(--sel); color:var(--sel-fg); border-color:var(--sel) }
.opt.is-on .loz{ fill:var(--or); stroke:var(--or) }
.opt input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer }
.opt input:checked ~ span{ color:var(--sel-fg) }
.opt input:checked ~ span::before{ content:''; position:absolute; inset:-1px; z-index:-1; background:var(--sel) }
.opt input:checked ~ .loz{ fill:var(--or); stroke:var(--or) }
.opt input:focus-visible ~ span::after{ content:''; position:absolute; inset:-6px; border:2px solid var(--focus); pointer-events:none }
.opts--chips{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) }
.quiz-nav{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px }
.textbtn{ min-height:44px; padding:.2em 0 0; background:none; border:0; cursor:pointer; font:600 .8125rem/1 var(--f-display); letter-spacing:.2em; text-transform:uppercase; color:var(--fg); border-bottom:1px solid var(--accent) }
.textbtn[disabled]{ visibility:hidden }
.result{ padding:calc(2*var(--s) + 26px) clamp(22px,4vw,48px) clamp(26px,4vw,44px); --edge:var(--fg); color:var(--fg) }
.result-kicker{ color:var(--accent) }
.result h2{ margin-top:8px }
.result-path{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:22px; font-weight:500 }
.result-path .loz{ width:7px; height:12px; fill:var(--or) }
.result-why{ margin-top:22px }
.result .cta-row{ margin-top:28px }
.result-alt{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted) }
.field{ display:block; margin-top:22px }
.field > span{ display:block; font-size:.9375rem; font-weight:500 }
.field input,.field textarea{ width:100%; margin-top:6px; padding:.75em 0 .6em; font:400 1.0625rem/1.4 var(--f-text); color:var(--fg); background:transparent; border:0; border-bottom:1px solid var(--fg); border-radius:0 }
.field textarea{ min-height:8.5em; padding:.8em; border:1px solid var(--fg); resize:vertical }
.field input:focus-visible,.field textarea:focus-visible{ outline:0; border-color:var(--accent); box-shadow:0 2px 0 var(--accent) }
.field textarea:focus-visible{ box-shadow:0 0 0 1px var(--accent) }
.field input:-webkit-autofill{ -webkit-text-fill-color:var(--fg); box-shadow:0 0 0 100px var(--bg) inset; caret-color:var(--fg) }
.field-hint{ display:block; margin-top:6px; font-size:.875rem; color:var(--muted); font-weight:400 }
.field-err{ display:block; margin-top:8px; font-size:.9375rem; color:var(--err); font-weight:500 }
.form fieldset{ margin:0; padding:0; border:0; min-width:0 }
.form legend{ padding:0; font:300 clamp(1.7rem,3.6vw,2.5rem)/1.1 var(--f-display) }
.form fieldset + fieldset{ margin-top:clamp(40px,5vw,64px) }
.js .form fieldset + fieldset{ margin-top:0 }
.hp{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden }
.form:not([data-ready]){ display:none }
.form[data-ready] ~ .form-wait{ display:none }
.js .form-wait{ visibility:hidden; animation:show-late 0s 3s forwards }
@keyframes show-late{ to{ visibility:visible } }
.copybox{ margin-top:20px; padding:18px 20px; background:var(--panel); border:1px solid var(--line); white-space:pre-wrap; font-size:.9375rem; max-height:320px; overflow:auto }
.done-ref{ display:inline-block; margin-top:16px; padding:.55em .9em .4em; border:1px solid var(--accent); font:500 1.25rem/1 var(--f-display); letter-spacing:.08em }
.mail{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px }

/* Pied de page */
.ft{ padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)) }
@media (min-width:1280px){ .ft{ padding-bottom:0 } }
.ft .flute{ color:var(--or); opacity:.5 }
.ft-top{ display:grid; gap:44px; padding-block:clamp(48px,6vw,84px) }
.ft-brand .mark{ width:84px; height:84px }
.ft-brand .wm{ display:block; margin-top:20px; font-size:1.0625rem; letter-spacing:.3em }
.ft-brand p{ margin-top:14px; color:var(--brume); max-width:32ch }
.ft-cols{ display:grid; grid-template-columns:1fr 1fr; gap:36px 24px }
.ft h2{ font:600 .75rem/1.2 var(--f-display); letter-spacing:.2em; text-transform:uppercase; color:var(--or); margin-bottom:14px }
.ft li a{ display:inline-block; padding:7px 0; text-decoration:none; color:var(--ivoire) }
.ft li a:hover{ text-decoration:underline; text-decoration-color:var(--or); text-underline-offset:.3em }
.ft li{ color:var(--brume) }
.ft .reveal{ font-size:inherit; font-weight:400; color:var(--ivoire); border-bottom-color:var(--or) }
.ft-bot{ display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; justify-content:space-between; padding-block:22px; border-top:1px solid rgba(244,239,230,.16); font-size:.875rem; color:var(--brume) }
.ft-bot nav{ display:flex; flex-wrap:wrap; gap:4px 22px }
.ft-bot a{ display:inline-block; padding:8px 0; color:var(--brume) }
@media (min-width:900px){ .ft-top{ grid-template-columns:1fr 1.6fr; gap:64px } .ft-cols{ grid-template-columns:repeat(3,1fr) } }
.copy{ min-height:44px; padding:.3em .9em 0; background:none; border:1px solid var(--line); cursor:pointer; font:600 .6875rem/1 var(--f-display); letter-spacing:.16em; text-transform:uppercase; color:inherit }
.copy:hover{ border-color:currentColor }

@media print{ .hd,.dock,.menu,.marquee,.sunrise,.fan{ display:none !important } body,.t-nuit,.t-abysse,.t-emeraude,.t-ivoire,.t-platre{ background:#fff !important; color:#000 !important } }

/* Ajustements petits écrans */
@media (max-width:719px){
  .table-wrap{ overflow:visible; margin-inline:0; padding-inline:0 }
  table{ min-width:0 }
  thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
  table,tbody,tr,th,td{ display:block }
  tbody tr{ padding:18px 0; border-bottom:1px solid var(--fg) }
  tbody tr:first-child{ border-top:1px solid var(--fg) }
  tbody th{ padding:0 0 8px; border:0; font-size:1.375rem }
  td{ display:grid; grid-template-columns:96px 1fr; gap:12px; padding:9px 0; border-bottom:0; border-top:1px solid var(--line) }
  td::before{ content:attr(data-label); color:var(--muted); font-size:.8125rem; padding-top:.15em }
  .portal-tabs button{ flex:1 1 0; padding-inline:4px; letter-spacing:.08em; font-size:.6875rem }
  .vs td{ width:auto; grid-template-columns:118px 1fr }
  .fan{ opacity:.34 }
  .cols-side > .form-col{ order:-1 }
  .hd-in{ gap:10px }
  .hd-brand{ gap:10px }
}
@media (max-width:389px){
  .hd-brand .wm{ font-size:.8125rem; letter-spacing:.2em }
  .burger span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
  .burger{ padding-left:6px; min-width:44px; justify-content:center }
  .lang{ min-width:40px }
}

/* ================================================================ 2026-10-22 : studio des maisons de goût */
.hero-kicker{ color:var(--or); margin-bottom:clamp(14px,2vw,22px) }
.hero h1{ font-size:clamp(2.4rem,6.2vw,4.6rem) }

/* Trois savoir-faire */
.crafts{ display:grid; border-top:1px solid var(--line) }
.craft{ display:flex; flex-direction:column; padding:28px 0 30px; border-bottom:1px solid var(--line) }
.craft .offer-glyph{ width:46px; height:46px }
.craft h3{ margin-top:18px; font-size:clamp(1.6rem,2.4vw,2rem); font-weight:300 }
.craft p{ margin-top:12px; color:var(--muted); max-width:42ch }
.craft .more{ margin-top:auto; padding-top:1.4em; align-self:flex-start }
@media (min-width:900px){
  .crafts{ grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line) }
  .craft{ padding:34px clamp(20px,2.6vw,40px) 36px; border-bottom:0 }
  .craft + .craft{ border-left:1px solid var(--line) }
  .craft:first-child{ padding-left:0 }
}

/* Réalisations */
.cases{ display:grid; gap:clamp(20px,2.4vw,32px) }
@media (min-width:720px){ .cases{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1080px){ .cases{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.case{ position:relative; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); transition:border-color .25s }
.case:hover,.case:focus-within{ border-color:var(--accent) }
.case-link{ position:absolute; inset:0; z-index:2 }
.case-link:focus-visible{ outline-offset:-4px }
.case-body{ display:flex; flex-direction:column; flex:1; padding:22px clamp(18px,2vw,26px) 24px }
.case-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:.875rem; color:var(--muted) }
.badge--study{ color:var(--muted) }
.case-name{ margin-top:14px; font-size:clamp(1.5rem,2.2vw,1.85rem); font-weight:300 }
.case-text{ margin-top:10px; color:var(--muted) }
.case-crafts{ margin-top:auto; padding-top:16px; font-weight:500; font-size:.9375rem }
.cover{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--abysse); border-bottom:1px solid var(--line) }
.cover img{ width:100%; height:100%; object-fit:cover; object-position:top left }
.cover .ms{ height:100% }
.cover--regard{ display:grid; place-items:center; background:radial-gradient(circle at 50% 50%,rgba(47,138,116,.5),rgba(37,110,94,0) 60%),var(--nuit) }
.cover-mark{ width:38% }
.cover-mark .mark,.regard-mark .mark{ width:100%; height:auto; aspect-ratio:1 }
.cover--type{ display:flex; flex-direction:column; justify-content:flex-end; padding:8% 7%; background:#0E0F12; color:#F4EFE6 }
.cover-name{ font:300 clamp(2rem,4.4vw,3rem)/1 var(--f-display); letter-spacing:-.01em }
.cover-line{ margin-top:10px; color:#C9B27C; font:600 .75rem/1.2 var(--f-display); letter-spacing:.2em; text-transform:uppercase }
.cover-rule{ display:block; width:46px; height:2px; margin-top:18px; background:#C9B27C }

/* Page d'une réalisation */
.facts--case{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px 28px; margin:0 0 clamp(32px,4vw,52px); padding:20px 0; border-block:1px solid var(--line) }
.facts--case dt{ color:var(--muted) }
.facts--case dd{ font:400 1.125rem/1.3 var(--f-display) }
.case-visual{ margin-bottom:clamp(40px,5vw,72px) }
.case-parts{ margin-bottom:clamp(40px,5vw,64px) }
.frame{ margin:0; background:#FFFDF9; border:1px solid var(--line); box-shadow:0 40px 80px -50px rgba(6,21,35,.55) }
.frame-bar{ display:flex; align-items:center; gap:6px; padding:9px 12px; background:#ECE6DA; border-bottom:1px solid rgba(10,33,54,.14) }
.frame-bar span{ width:8px; height:8px; border-radius:50%; background:rgba(10,33,54,.25) }
.frame-bar em{ margin-left:8px; font-style:normal; font-size:.8125rem; color:#4A5A68; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.frame-body img{ width:100%; height:auto }
.frame-body .ms{ border:0 }
.gallery{ display:grid; gap:clamp(24px,3vw,40px) }
@media (min-width:900px){ .gallery{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.cap{ margin-top:12px; font-size:.9375rem; color:var(--muted) }
.duo--phone{ margin-top:clamp(48px,6vw,88px) }
.phone{ margin:0 auto; width:min(100%,300px); padding:10px; background:#0D0E10; border-radius:38px; box-shadow:0 40px 80px -46px rgba(6,21,35,.7) }
.phone-body{ overflow:hidden; border-radius:28px }
.phone-body img{ width:100%; height:auto }
.kit{ display:grid; gap:clamp(28px,4vw,56px); margin-top:clamp(8px,2vw,24px) }
@media (min-width:860px){ .kit{ grid-template-columns:1fr 1fr } }
.kit-t{ font-size:clamp(1.5rem,2.6vw,2rem); font-weight:300; margin-bottom:18px }
.swatches{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.swatches li{ display:flex; align-items:center; gap:12px }
.sw{ flex:none; width:54px; height:54px; border:1px solid var(--line) }
.swatches small{ display:block; color:var(--muted); font-size:.8125rem; font-variant-numeric:tabular-nums }
.specs li{ display:flex; flex-direction:column; gap:4px; padding:14px 0; border-bottom:1px solid var(--line) }
.specs li:first-child{ border-top:1px solid var(--line) }
.specs small{ color:var(--muted) }
.spec{ font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.1 }
.spec--body{ font-family:var(--f-text); font-size:clamp(1.4rem,2.4vw,1.8rem) }
.spec--josefin{ font-family:var(--f-display); font-weight:300 }
.spec--crayere{ font-family:'Cormorant Garamond',Georgia,serif; text-transform:uppercase; letter-spacing:.14em }
.spec--jardin{ font-family:'Bodoni Moda',Didot,Georgia,serif; font-style:italic }
.spec--velours{ font-family:'Italiana','Cormorant Garamond',Georgia,serif; text-transform:uppercase; letter-spacing:.08em }
.regard-board{ display:grid; place-items:center; padding:clamp(40px,8vw,110px) 20px; background:radial-gradient(circle at 50% 50%,rgba(47,138,116,.55),rgba(37,110,94,0) 58%),var(--nuit) }
.regard-mark{ width:min(64%,360px) }
.regard-sizes{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(28px,4vw,48px) }
.regard-sizes > div{ display:grid; place-items:center; aspect-ratio:3/2; background:var(--bg); border:1px solid var(--line) }
.regard-sizes .mark{ width:34%; height:auto; aspect-ratio:1; --mk:var(--fg) }
.flow{ display:grid; gap:10px; counter-reset:f }
.flow li{ display:flex; align-items:center; gap:16px; padding:16px 18px; background:var(--panel); border-left:2px solid var(--or) }
.flow-n{ font:300 1.8rem/1 var(--f-display); color:var(--accent); min-width:1.2ch }
@media (min-width:1000px){ .flow{ grid-template-columns:repeat(5,1fr) } .flow li{ flex-direction:column; align-items:flex-start } }
.next{ display:grid; gap:10px; justify-items:start }
.next-link{ display:inline-flex; align-items:center; gap:.5em; font:300 clamp(2rem,5vw,3.4rem)/1.05 var(--f-display); text-decoration:none }
.next-link .loz{ width:12px; height:20px; fill:var(--or); transition:transform .25s var(--ease) }
.next-link:hover .loz{ transform:translateX(6px) }

/* Parcours en quatre temps */
@media (min-width:700px){ .path--4{ grid-template-columns:repeat(2,1fr) } .path--4 > li:nth-child(odd){ padding-left:0 } .path--4 > li:nth-child(3){ border-left:0 } .path--4 > li:nth-child(3)::before{ left:0 } }
@media (min-width:1100px){ .path--4{ grid-template-columns:repeat(4,1fr) } .path--4 > li:nth-child(3){ border-left:1px solid var(--line); padding-left:clamp(20px,2.6vw,40px) } .path--4 > li:nth-child(3)::before{ left:clamp(20px,2.6vw,40px) } }
.offers--1{ grid-template-columns:minmax(0,1fr) !important }
@media (min-width:860px){ .offers--1 .offer-gets ul{ grid-template-columns:repeat(3,1fr); gap:10px 24px } }
.plate-langs{ display:flex; justify-content:center; flex-wrap:wrap; gap:4px 14px; margin-top:6px; color:var(--muted); font-size:.9375rem }
.plate-langs span + span::before{ content:''; display:inline-block; width:5px; height:8px; margin-right:14px; background:var(--or); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); vertical-align:.1em }

/* Aperçu du profil de goût sur l'accueil */
.duo--teaser{ align-items:center; overflow-x:clip; padding-block:12px }
@media (max-width:719px){ .teaser{ width:min(74%,320px) } }
.teaser{ position:relative; width:min(100%,380px); margin-inline:auto; aspect-ratio:4/5.4 }
.teaser-card{ position:absolute; inset:0 0 auto 0; box-shadow:0 30px 60px -36px rgba(0,0,0,.8) }
.teaser-card--0{ transform:translate(-10%,6%) rotate(-7deg); opacity:.75 }
.teaser-card--1{ transform:translate(10%,3%) rotate(5deg); opacity:.88 }
.teaser-card--2{ transform:none; z-index:3 }
.teaser-card--0{ z-index:1 } .teaser-card--1{ z-index:2 }

/* ---------------------------------------------------------------- maquettes miniatures */
.ms{ --u:1cqw; container-type:inline-size; position:relative; display:flex; flex-direction:column; aspect-ratio:4/5; overflow:hidden; color:var(--ms-fg); background:var(--ms-bg);
  font-family:var(--ms-fb,'Jost',sans-serif); -webkit-user-select:none; user-select:none; text-align:left }
.ms--big{ aspect-ratio:16/10 }
.ms *{ margin:0 }
.ms-bar{ display:flex; justify-content:space-between; align-items:center; padding:calc(5 * var(--u)) calc(6 * var(--u)) 0 }
.ms--big .ms-bar{ padding:3cqw 5cqw 0 }
.ms-logo{ font:var(--ms-lw,500) calc(3.4 * var(--u))/1 var(--ms-fh); letter-spacing:var(--ms-lls,.06em); text-transform:var(--ms-ltt,uppercase) }
.ms--big .ms-logo{ font-size:1.9cqw }
.ms-nav{ display:flex; gap:calc(2 * var(--u)) }
.ms-nav i{ width:calc(5 * var(--u)); height:max(1px,calc(.5 * var(--u))); background:currentColor; opacity:.55 }
.ms--big .ms-nav i{ width:3cqw; height:max(1px,.3cqw) }
.ms-hero{ position:relative; flex:1; display:grid; background:var(--ms-bg); min-height:0; gap:calc(3 * var(--u)); padding:calc(4 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)) }
.ms-art{ min-height:0; color:var(--ms-line) }
.ms-art svg{ width:100%; height:100%; overflow:visible }
.ms-art path,.ms-art circle{ fill:none; stroke:var(--ms-line); stroke-width:1.3; vector-effect:non-scaling-stroke }
.ms-art .a2{ fill:var(--ms-fill); stroke:none }
.ms-art .a1{ fill:var(--ms-acc); stroke:none }
.ms-copy{ position:relative; z-index:1; min-width:0 }
.ms-kick{ font:600 calc(2.5 * var(--u))/1.2 var(--ms-fb,'Jost',sans-serif); letter-spacing:.18em; text-transform:uppercase; color:var(--ms-kick,var(--ms-acc)) }
.ms-h{ margin-top:calc(2 * var(--u)) !important; font:var(--ms-hst,normal) var(--ms-hw,400) calc(var(--ms-hs,8.4) * var(--u))/1.02 var(--ms-fh); letter-spacing:var(--ms-hls,-.01em); text-transform:var(--ms-htt,none); text-wrap:balance }
.ms-sub{ margin-top:calc(2.4 * var(--u)) !important; font-size:calc(3.1 * var(--u)); line-height:1.4; opacity:.82 }
.ms-btn{ display:inline-block; margin-top:calc(3.4 * var(--u)); padding:calc(2.1 * var(--u)) calc(4 * var(--u)) calc(1.8 * var(--u)); font:600 calc(2.4 * var(--u))/1 var(--ms-fb,'Jost',sans-serif); letter-spacing:.14em; text-transform:uppercase;
  background:var(--ms-btn-bg,var(--ms-fg)); color:var(--ms-btn-fg,var(--ms-bg)); border:1px solid var(--ms-btn-line,transparent); border-radius:var(--ms-r,0) }
.ms-pal{ display:flex; flex:none; height:calc(4.4 * var(--u)) }
.ms-pal i{ flex:1 }
.ms-c1{ background:var(--ms-bg); box-shadow:inset 0 1px 0 var(--ms-line) }
.ms-c2{ background:var(--ms-fg) } .ms-c3{ background:var(--ms-acc) } .ms-c4{ background:var(--ms-fill) }
/* mises en page */
.ms--top .ms-hero,.ms--center .ms-hero{ grid-template-rows:minmax(0,1fr) auto }
.ms--center .ms-hero{ justify-items:center; text-align:center }
.ms--center .ms-art{ width:74% }
.ms--side .ms-hero{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end }
.ms--side .ms-art{ order:2; height:100% }
.ms--side .ms-copy{ align-self:center }
.ms--over .ms-art,.ms--grid .ms-art{ position:absolute; left:0; right:0; bottom:0; height:62% }
.ms--over .ms-copy{ align-self:start }
.ms--grid .ms-art{ height:100%; top:0; opacity:.95 }
.ms--grid .ms-copy{ align-self:start; justify-self:start; width:58%; padding:calc(3 * var(--u)); background:var(--ms-bg) }
/* grand format, paysage : texte à gauche, dessin à droite */
.ms--big{ --u:.6cqw }
.ms--big .ms-hero{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:none; align-items:center; justify-items:start; text-align:left; padding:3cqw 5cqw 3cqw }
.ms--big .ms-art{ order:2; position:relative; inset:auto; width:100%; height:100%; opacity:1 }
.ms--big .ms-copy{ width:auto; padding:0; background:none; align-self:center }
.ms--big .ms-pal{ height:2.4cqw }
/* zone choisie dans le profil de goût */
.deck .ms [data-zone]{ cursor:pointer }
.ms .is-zone{ outline:3px solid #DA9A52; outline-offset:calc(1.4 * var(--u)); box-shadow:0 0 0 calc(1.4 * var(--u) + 3px) rgba(10,33,54,.55) }
.ms-pal.is-zone{ outline-offset:-3px }

/* douze directions */
.ms--craie{ --ms-bg:#F3EFE7; --ms-fg:#2B2A28; --ms-acc:#6E5F45; --ms-fill:#E4DCCD; --ms-line:#A89A82; --ms-fh:'Cormorant Garamond',Georgia,serif; --ms-hs:9.4; --ms-lls:.2em }
.ms--nuit{ --ms-bg:#0B1A2B; --ms-fg:#F2E9D8; --ms-acc:#C9A15B; --ms-fill:#13283F; --ms-line:#C9A15B; --ms-fh:'Josefin Sans','Futura',sans-serif; --ms-hw:300; --ms-hs:6.4; --ms-htt:uppercase; --ms-hls:.16em; --ms-btn-bg:#C9A15B; --ms-btn-fg:#0B1A2B; --ms-lls:.3em }
.ms--edito{ --ms-bg:#FFFFFF; --ms-fg:#111111; --ms-acc:#C2361F; --ms-fill:#F0ECE6; --ms-line:#111111; --ms-fh:'Bodoni Moda',Didot,Georgia,serif; --ms-hw:700; --ms-hs:24; --ms-hls:-.045em; --ms-lls:.12em }
.ms--terroir{ --ms-bg:#EFE4D3; --ms-fg:#3B2A1E; --ms-acc:#8E4524; --ms-fill:#D9C7A9; --ms-line:#6B7A3A; --ms-fh:'Fraunces',Georgia,serif; --ms-hw:600; --ms-hs:8.6; --ms-btn-bg:#56632D; --ms-btn-fg:#F6EFE3; --ms-r:999px; --ms-ltt:none; --ms-lls:0 }
.ms--epure{ --ms-bg:#ECEAE6; --ms-fg:#1C1C1C; --ms-acc:#5E5A53; --ms-fill:#D6D2CA; --ms-line:#1C1C1C; --ms-fh:'Archivo','Helvetica Neue',sans-serif; --ms-hs:11; --ms-hls:-.045em; --ms-ltt:none; --ms-lls:-.02em }
.ms--baroque{ --ms-bg:#3A0F17; --ms-fg:#F1DFC7; --ms-acc:#D4A64A; --ms-fill:#4E1A24; --ms-line:#D4A64A; --ms-fh:'Cormorant Garamond',Georgia,serif; --ms-hst:italic; --ms-hs:9.4; --ms-btn-bg:#D4A64A; --ms-btn-fg:#3A0F17; --ms-lls:.24em }
.ms--riviera{ --ms-bg:#FBF3E4; --ms-fg:#1F3A5F; --ms-acc:#B14E33; --ms-fill:#A9CBE0; --ms-line:#1F3A5F; --ms-fh:'Fraunces',Georgia,serif; --ms-hst:italic; --ms-hs:9.2; --ms-btn-bg:#B14E33; --ms-btn-fg:#FFF8EE; --ms-r:999px; --ms-ltt:none; --ms-lls:0 }
.ms--atelier{ --ms-bg:#D8C3A0; --ms-fg:#2E2418; --ms-acc:#8B2E1F; --ms-fill:#CBB089; --ms-line:#2E2418; --ms-fh:'Archivo','Helvetica Neue',sans-serif; --ms-hw:800; --ms-hs:8.2; --ms-htt:uppercase; --ms-hls:-.01em; --ms-lw:800 }
.ms--velours{ --ms-bg:#10261F; --ms-fg:#E9DCC2; --ms-acc:#C49A5C; --ms-fill:#173A2F; --ms-line:#C49A5C; --ms-fh:'Italiana','Cormorant Garamond',Georgia,serif; --ms-hs:8.6; --ms-htt:uppercase; --ms-hls:.08em; --ms-btn-bg:transparent; --ms-btn-fg:#E9DCC2; --ms-btn-line:#C49A5C; --ms-lls:.28em }
.ms--brut{ --ms-bg:#CFCBC4; --ms-fg:#121212; --ms-acc:#E4572E; --ms-kick:#121212; --ms-fill:#121212; --ms-line:#121212; --ms-fh:'Archivo','Helvetica Neue',sans-serif; --ms-hw:800; --ms-hs:11.5; --ms-htt:uppercase; --ms-hls:-.035em; --ms-btn-bg:#E4572E; --ms-btn-fg:#121212; --ms-lw:800 }
.ms--crayere{ --ms-bg:#1E1D1B; --ms-fg:#E8E1D3; --ms-acc:#C2A874; --ms-fill:#2C2A27; --ms-line:#8A7F6D; --ms-fh:'Cormorant Garamond',Georgia,serif; --ms-hs:7; --ms-htt:uppercase; --ms-hls:.14em; --ms-btn-bg:transparent; --ms-btn-fg:#E8E1D3; --ms-btn-line:#C2A874; --ms-lls:.3em }
.ms--jardin{ --ms-bg:#E9EFE4; --ms-fg:#1F3B2C; --ms-acc:#3E6A43; --ms-fill:#D2DDC9; --ms-line:#1F3B2C; --ms-fh:'Bodoni Moda',Didot,Georgia,serif; --ms-hst:italic; --ms-hs:9; --ms-ltt:none; --ms-lls:.02em }
.ms--brut .ms-art .a2{ fill:#121212 } .ms--brut .ms-art path{ stroke:#121212 }
.ms--epure .ms-art .a2{ fill:#D6D2CA } .ms--epure .ms-art .a1{ fill:#1C1C1C }

/* ---------------------------------------------------------------- profil de goût */
.sec--taste{ padding-block:clamp(40px,6vw,88px) clamp(64px,8vw,112px) }
.taste{ max-width:1080px; margin-inline:auto }
.taste-play{ display:grid; gap:24px 56px }
@media (min-width:900px){ .taste-play{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start } .taste-top{ grid-column:1 / -1 } }
.taste-top{ display:flex; align-items:center; gap:18px }
.taste-bar{ position:relative; flex:1; height:2px; background:var(--line) }
.taste-bar i{ position:absolute; left:0; top:-1px; height:4px; width:0; background:var(--or); transition:width .35s var(--ease) }
.taste-count{ font-size:.9375rem; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums }
.taste-stage{ position:relative }
.deck{ display:grid; width:min(100%,400px); margin-inline:auto; padding-top:28px; outline:0; touch-action:pan-y }
.deck:focus-visible{ outline:2px solid var(--focus); outline-offset:8px }
.card{ grid-area:1 / 1; transform-origin:50% 0; transition:transform .38s var(--ease),opacity .3s; will-change:transform }
.card-in{ box-shadow:0 26px 50px -30px rgba(6,21,35,.65); border:1px solid var(--line) }
.card[data-depth="1"]{ transform:translateY(-14px) scale(.95); pointer-events:none }
.card[data-depth="2"]{ transform:translateY(-26px) scale(.9); pointer-events:none }
.card[data-depth="0"]{ z-index:3; cursor:grab }
.card.is-drag{ transition:none; cursor:grabbing }
.card-name{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 2px 0; font:400 1.3rem/1.2 var(--f-display) }
.card[data-depth="1"] .card-name,.card[data-depth="2"] .card-name{ visibility:hidden }
.card-n{ font:400 .875rem/1 var(--f-text); color:var(--muted) }
.stamp{ position:absolute; top:52px; z-index:5; padding:.5em .8em .35em; font:600 .875rem/1 var(--f-display); letter-spacing:.2em; text-transform:uppercase; border:2px solid; background:var(--bg); opacity:0; pointer-events:none }
.stamp--keep{ left:calc(50% - min(50%,200px) + 14px); color:var(--accent); transform:rotate(-8deg) }
.stamp--pass{ right:calc(50% - min(50%,200px) + 14px); color:var(--err); transform:rotate(8deg) }
.taste-side{ display:flex; flex-direction:column }
.taste-help{ color:var(--muted) }
.zones{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.zone{ min-height:44px; padding:.35em 1.1em .2em; background:none; border:1px solid var(--line); cursor:pointer; font:500 .9375rem/1 var(--f-text); color:var(--fg); transition:border-color .2s,background-color .2s }
.zone:hover{ border-color:var(--fg) }
.zone[aria-pressed="true"]{ background:var(--sel); color:var(--sel-fg); border-color:var(--sel) }
.zone.has-note::after{ content:''; display:inline-block; width:6px; height:10px; margin-left:8px; background:var(--or); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%) }
.note .field textarea{ min-height:5em }
.tips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.tip{ min-height:40px; padding:.3em .9em .15em; background:var(--panel); border:1px dashed var(--line); cursor:pointer; font:400 .9375rem/1.2 var(--f-text); color:var(--fg) }
.tip:hover{ border-style:solid; border-color:var(--fg) }
.acts{ display:grid; grid-template-columns:1fr auto 1fr; gap:10px; margin-top:24px }
.act{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:.3em 1em 0; background:var(--panel); border:1px solid var(--fg); cursor:pointer;
  font:600 .8125rem/1 var(--f-display); letter-spacing:.16em; text-transform:uppercase; color:var(--fg); transition:background-color .2s,color .2s }
.act svg{ width:18px; height:18px; margin-top:-.2em; fill:none; stroke:currentColor; stroke-width:2 }
.act--love svg{ fill:var(--or); stroke:none }
.act--keep{ background:var(--btn); color:var(--btn-fg); border-color:var(--btn) }
.act:hover{ background:var(--fg); color:var(--bg) }
.act--keep:hover{ background:var(--btn-hover); border-color:var(--btn-hover) }
.act--love{ padding-inline:1.1em }
@media (max-width:899px){
  .taste-side .acts{ order:-1; margin:6px 0 18px }
  .act span{ font-size:.75rem; letter-spacing:.1em }
}
@media (max-width:420px){ .act--love span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) } }
.taste-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:18px }
.taste-result:focus{ outline:0 }
.res{ padding:calc(2*var(--s) + 26px) clamp(22px,4vw,48px) clamp(26px,4vw,44px); --edge:var(--fg); color:var(--fg) }
.res-kicker{ color:var(--accent) }
.res h2{ margin-top:8px; font-size:clamp(2.2rem,5vw,3.6rem) }
.res-text{ margin-top:14px; max-width:52ch }
.res-grid{ display:grid; gap:clamp(28px,4vw,48px); margin-top:clamp(28px,4vw,44px) }
@media (min-width:900px){ .res-grid{ grid-template-columns:1fr 1fr } }
.res-h{ font:600 .8125rem/1.2 var(--f-display); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:14px }
.axes{ display:grid; gap:16px }
.axis-l{ display:flex; justify-content:space-between; font-size:.9375rem }
.axis-track{ position:relative; height:2px; margin-top:12px; background:var(--line) }
.axis-track::before{ content:''; position:absolute; left:50%; top:-5px; width:1px; height:12px; background:var(--line) }
.axis-dot{ position:absolute; top:-7px; width:10px; height:16px; margin-left:-5px; background:var(--or); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%) }
.res-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
@media (min-width:520px){ .res-cards{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.res-card p{ margin-top:6px; font-size:.8125rem; color:var(--muted) }
.res-card .ms{ border:1px solid var(--line) }
.res-notes li{ padding:10px 0; border-bottom:1px solid var(--line); font-size:.9375rem }
.res-notes li:first-child{ border-top:1px solid var(--line) }
.res-notes b{ font-weight:600 }
.res-near{ display:grid; gap:10px }
.res-near a{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 16px; background:var(--panel); border-left:2px solid var(--or); text-decoration:none }
.res-near small{ color:var(--muted) }
.res .cta-row{ margin-top:clamp(28px,4vw,40px) }

/* Profil joint à la demande */
.attach{ margin-top:26px; padding:18px 20px; background:var(--panel); border-left:2px solid var(--or) }
.attach-t{ font-weight:600 }
.attach-name{ margin-top:4px; font:400 1.4rem/1.2 var(--f-display) }
.attach .small{ margin-top:6px }
.attach .textbtn{ margin-top:10px }
@media (prefers-reduced-motion:reduce){ .card,.taste-bar i{ transition:none } }
.form > .attach{ margin:0 0 30px }
.block-t{ margin-bottom:14px; font-size:1.5rem; font-weight:400; line-height:1.15; letter-spacing:0 }
.frame figcaption{ padding:12px 14px; font-size:.9375rem; color:#4A5A68; background:#FFFDF9; border-top:1px solid rgba(10,33,54,.12) }