/* ==========================================================================
   JMP PEINTURE · Thème « Atelier » (sombre premium)
   Chargé après style.css : redéfinit les jetons de couleur et modernise les composants.
   Hiérarchie des fonds : nuit (page) < surface (cartes) < relief (blocs marine) ; l'orange est la seule lumière.
   ========================================================================== */
:root {
  --night: #061429;
  --chaux: #071A33;          /* fond de page */
  --paper: #0C2342;          /* surfaces, cartes */
  --sand: #112B4F;           /* surfaces en relief */
  --ink: #EDF1F7;            /* texte courant */
  --heading: #FFFFFF;        /* titres et libellés */
  --muted: #A3B3C9;          /* texte secondaire (contraste ≥ 7:1 sur la nuit) */
  --line: rgba(255, 255, 255, .10);
  --line-light: rgba(255, 255, 255, .14);
  --orange-text: #F6A04D;    /* orange lisible en petit sur fond sombre */
  --orange-soft: rgba(239, 138, 34, .14);
  --glow: 0 0 0 1px rgba(239, 138, 34, .35), 0 20px 50px -20px rgba(239, 138, 34, .35);
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -28px rgba(0, 0, 0, .7);
}
html { background: var(--night); color-scheme: dark; }
body { background: var(--chaux); color: var(--ink); }
body::before { /* grain très léger sur tout le site */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay; background: var(--noise);
}
main, .footer { position: relative; z-index: 1; }

/* ---------- Menu flottant en verre dépoli ---------- */
.header { inset: 14px 0 auto; height: auto; pointer-events: none; transition: inset .35s var(--ease); }
.header .container {
  pointer-events: auto; width: min(100% - 2 * var(--gutter), 1180px); padding: 10px 10px 10px 20px; border-radius: 18px;
  background: rgba(7, 26, 51, .55); border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 10px 40px -18px rgba(0,0,0,.6); transition: background .35s, border-color .35s;
}
.header.is-solid, .header.is-dark { background: transparent; box-shadow: none; height: auto; backdrop-filter: none; -webkit-backdrop-filter: none; }
.header.is-solid .container, .header.is-dark .container { background: rgba(6, 20, 41, .82); border-color: rgba(255,255,255,.14); }
.header.is-solid .logo-white { opacity: 1; }
.header.is-solid .logo-color { opacity: 0; }
.header.is-solid .nav a:not(.btn) { color: #fff; }
.header.is-solid .burger { color: #fff; }
.brand, .header.is-solid .brand, .header.is-dark .brand { width: 104px; height: 40px; }
.nav { gap: clamp(14px, 2vw, 28px); }
.nav a:not(.btn) { font-size: 14px; color: rgba(255,255,255,.82); }
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: #fff; }
.nav .btn[aria-current="page"] { color: var(--night); }
.nav .btn { padding: 11px 18px; }
@media (max-width: 900px) {
  .header .container { padding: 8px 8px 8px 16px; }
  .nav { background: var(--night); }
}

/* ---------- Typographie XXL sur les ouvertures ---------- */
.h-display { font-size: clamp(46px, 8vw, 132px); line-height: .92; letter-spacing: -.04em; }
.hero__title { font-size: clamp(46px, 8.4vw, 140px); }
.page-hero .h1 { font-size: clamp(38px, 6vw, 88px); line-height: .95; letter-spacing: -.035em; max-width: 14ch; }
.section-head .h2, .wall__head .h2 { letter-spacing: -.03em; }
h1 em, h2 em, h3 em, .h-display em, .h1 em, .h2 em { color: var(--orange); }
.hero__title .accent em, .accent { color: var(--orange); }

/* ---------- Fonds de section : alternance nuit / surface ---------- */
.section--white { background: var(--paper); }
.section--sand { background: var(--sand); }
.section--navy, .claims { background: linear-gradient(180deg, var(--night), #0A2140); }
.wall { background: var(--chaux); }
.pain { background: var(--chaux); }
.trust { background: var(--night); border-color: var(--line); }
.marquee { background: var(--night); color: #fff; border-block: 1px solid var(--line); }
.marquee__row--rev { -webkit-text-stroke-color: rgba(255,255,255,.28); }
.page-hero, .hero { background: var(--night); }
.page-hero::after { background: linear-gradient(100deg, var(--night) 28%, rgba(6,20,41,.78) 62%, rgba(6,20,41,.5)); }
.footer { background: var(--night); border-top: 1px solid var(--line); }

/* ---------- Cartes : verre sombre, filet clair, halo orange au survol ---------- */
.card, .value, .pains li, .logos li, .tool, .zone, .metre-ex, .sim-step, .sim-room, .sim-detail, .compare, .form, .aud, .metre__formula span {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), var(--paper);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.value:hover, .metre-ex:hover, .logos li:hover, .work:hover .work__img { box-shadow: var(--glow); border-color: transparent; }
.card--navy, .aud--pro, .sim-total, .pain__turn, .tool:first-child, .metre__formula span:first-child {
  background: radial-gradient(120% 140% at 0% 0%, #1A4A85, var(--navy) 55%, #0E2F58); border-color: rgba(255,255,255,.12);
}
.pains li::before { background: var(--orange); }
.pains b { color: var(--orange-text); }
.compare .is-jmp { background: rgba(255,255,255,.04); }
.compare thead .is-jmp { background: var(--orange); color: var(--night); }
.compare__total .is-jmp { background: var(--orange-soft); }
.compare td.is-jmp::before { color: #5FD3A0; }
.classes { background: var(--paper); }

/* Contrôles : l'état sélectionné prend l'orange */
.opt span, .chip, .sim-mini--chk span, .sim-presets button, .sim-choice span { color: var(--ink); border-color: var(--line-light); }
.opt input:checked + span, .chip[aria-pressed="true"], .sim-mini--chk input:checked + span { background: var(--orange); border-color: var(--orange); color: var(--night); }
.sim-choice input:checked + span { border-color: var(--orange); background: var(--orange-soft); box-shadow: inset 0 0 0 1px var(--orange); }
.sim-seg { background: rgba(0,0,0,.25); border-color: var(--line); }
.sim-seg input:checked + span { background: var(--orange); color: var(--night); box-shadow: none; }
.sim-seg--stack strong { color: inherit; }
.sim-presets button:hover { background: var(--orange); border-color: var(--orange); color: var(--night); }
.sim-room.is-active { border-color: var(--orange); box-shadow: var(--glow); }
.field input, .field select, .field textarea, .sim-input, .sim-mini select { background: rgba(0,0,0,.22); border-color: var(--line-light); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus, .sim-input:focus-within { background: rgba(0,0,0,.32); border-color: var(--orange); }
.sim-input input { color: var(--ink); }
.sim-step-btn { color: var(--ink); }
.sim-room__sum, .sim-room__name:hover, .sim-room__name:focus { background: rgba(0,0,0,.22); }
.form legend b, .sim-step legend b { color: var(--night); }
.btn--ghost { --fg: #fff; }
.btn--navy { --bg: rgba(255,255,255,.08); --fg: #fff; box-shadow: inset 0 0 0 1px var(--line-light); }
.sim-detail__actions .btn--ghost { color: #fff; }

/* Éléments clairs conservés (étiquettes sur photo, cartes d'exemple) : texte foncé forcé */
.wall__tag, .work__badge, .sim-teaser__card, .sim-viewer__name, .sim-lbl--dim { color: #0F2440; }
.sim-teaser__card span, .sim-teaser__card small { color: #56657A; }
.sim-teaser__card b { color: #123A6B; }
.sim-teaser__card--alt span, .sim-teaser__card--alt small { color: var(--night); opacity: .85; }
.sim-teaser__card--alt b { color: var(--night); }
.sim-teaser { background: radial-gradient(120% 140% at 100% 0%, #1A4A85, var(--navy) 50%, #0B2748); border: 1px solid rgba(255,255,255,.1); }

/* Simulateur : studio sombre */
.sim-viewer { background: radial-gradient(ellipse at 50% 25%, #1B3B66, var(--night) 75%); border-color: var(--line); }
.sim-viewer__tip { background: rgba(6,20,41,.7); color: var(--muted); }
.sim-legend { background: rgba(6,20,41,.78); border: 1px solid var(--line); }
.sim-legend li:hover { background: rgba(239,138,34,.18); }
.sim-table__ttc th, .sim-table__ttc td { background: var(--orange-soft); }
.sim-restored button, .metre-ex em { color: var(--orange-text); }

/* Divers */
.trust__item b, .pledge__v { color: #fff; }
.pledge__v small { color: var(--orange-text); }
.svc__num { -webkit-text-stroke-color: var(--orange); }
.svc-nav a.is-active, .svc-nav a:hover { color: #fff; }
.next b { background: var(--orange); color: var(--night); }
.coord i { border-color: var(--line-light); }
.faq summary { color: #fff; }
.tags li { color: var(--ink); }
.work__cap h3 { color: #fff; }
.crumbs a:hover { color: var(--orange); }
.chapters { mix-blend-mode: normal; }
.tools__note, .metre__note, .form__est, .sim-restored, .compare__note { color: var(--ink); }
.zones { gap: 12px; }

/* ==========================================================================
   Grille « bento » de l'accueil
   ========================================================================== */
.bento { background: var(--chaux); padding: clamp(28px, 4vw, 56px) 0 clamp(64px, 8vw, 110px); }
.bento__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(150px, auto); gap: 14px; }
.tile {
  position: relative; overflow: hidden; border-radius: 22px; padding: 24px; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--paper);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  transition: transform .5s var(--ease), border-color .3s, box-shadow .4s;
}
.tile::after { /* halo qui suit la souris */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(239,138,34,.18), transparent 60%);
}
.tile:hover::after { opacity: 1; }
a.tile:hover { transform: translateY(-4px); border-color: rgba(239,138,34,.45); }
.tile__k { font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-text); }
.tile h3 { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: -.015em; }
.tile p { margin: 0; color: var(--muted); font-size: 15px; max-width: 40ch; }
.tile__go { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid var(--line-light); color: #fff; transition: background .3s, transform .4s var(--ease); }
a.tile:hover .tile__go { background: var(--orange); color: var(--night); transform: rotate(-45deg); }
.tile__go svg { width: 18px; height: 18px; }
.tile--photo { min-height: 300px; }
.tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.tile--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,20,41,.05) 30%, rgba(6,20,41,.88)); }
a.tile--photo:hover img { transform: scale(1.05); }
.tile--stat { justify-content: space-between; }
.tile--stat b { font-family: var(--font-display); font-size: clamp(54px, 6vw, 88px); line-height: .85; letter-spacing: -.05em; color: #fff; }
.tile--stat b small { font-size: .34em; letter-spacing: 0; color: var(--orange); margin-left: 4px; }
.tile--orange { background: var(--orange); border-color: var(--orange); color: var(--night); }
.tile--orange h3, .tile--orange .tile__k { color: var(--night); }
.tile--orange p { color: rgba(6,20,41,.75); }
.tile--orange .tile__go { background: var(--night); color: #fff; border-color: transparent; }
.tile--orange::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), transparent 60%); }
.tile--tags { justify-content: space-between; }
.tile--tags ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tile--tags li { font-size: 13px; padding: 6px 11px; border-radius: 30px; border: 1px solid var(--line-light); color: var(--ink); }
.t-hero { grid-column: span 7; grid-row: span 2; }
.t-a { grid-column: span 5; }
.t-s1 { grid-column: span 2; }
.t-s2 { grid-column: span 3; }
.t-c, .t-d, .t-e, .t-f { grid-column: span 3; }
@media (max-width: 1024px) {
  .t-hero { grid-column: span 12; grid-row: span 1; min-height: 360px; }
  .t-a { grid-column: span 6; } .t-s1, .t-s2 { grid-column: span 3; }
  .t-c, .t-d, .t-e, .t-f { grid-column: span 6; }
}
@media (max-width: 600px) {
  .bento__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .t-hero, .t-a, .t-c, .t-d, .t-e, .t-f { grid-column: span 2; }
  .t-s1, .t-s2 { grid-column: span 1; }
  .tile { padding: 20px; border-radius: 18px; }
  .tile--photo { min-height: 240px; }
  .tile--stat b { font-size: 48px; }
}
.hero.has-3d .hero__content { margin-top: 4vh; }
.hero__title { font-size: clamp(44px, 7vw, 116px); }

/* ==========================================================================
   Ouverture : s'adapte à la hauteur de l'écran (menu flottant compris)
   ========================================================================== */
.hero__sticky { padding: calc(var(--header-h) + 18px) 0 clamp(16px, 4vh, 40px); box-sizing: border-box; }
.hero.has-3d .hero__content, .hero__content { margin-top: 0; }
.hero__title { font-size: clamp(36px, min(7vw, 10.5vh), 116px); margin-top: clamp(10px, 2.2vh, 26px); }
.hero__sub { margin-top: clamp(12px, 2.6vh, 28px); font-size: clamp(15.5px, min(1.5vw, 2.3vh), 20px); }
.hero__cta { margin-top: clamp(16px, 3.4vh, 38px); }
.hero__scroll { bottom: clamp(10px, 2.4vh, 28px); }
@media (max-height: 780px) { .hero__scroll { display: none; } }
@media (max-height: 640px) {
  .hero__sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 52ch; }
  .hero__cta .btn { padding: 12px 20px; font-size: 14.5px; }
}
@media (max-height: 520px) { .hero__sub { display: none; } }

/* ==========================================================================
   Signature « Made in Réunion » : drapeau Lö Mahavéli
   ========================================================================== */
.flag { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 0 0 .5px rgba(255,255,255,.55), 0 2px 6px -1px rgba(0,0,0,.5); }
.made-in {
  position: fixed; left: 0; top: 50%; z-index: 40; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 8px 14px;
  background: rgba(6, 20, 41, .72); border: 1px solid rgba(255,255,255,.12); border-left: 0; border-radius: 0 12px 12px 0;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.made-in .flag { width: 24px; }
.made-in span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.78); white-space: nowrap; }
.flag-mini { display: none; width: 22px; margin-left: 10px; margin-right: auto; }
.footer__made { display: inline-flex; align-items: center; gap: 8px; }
.footer__made .flag { width: 18px; }
@media (max-width: 1240px) { .made-in { display: none; } .flag-mini { display: block; } }
@media print { .made-in, .flag-mini { display: none; } }

/* ==========================================================================
   Sections collantes : tiennent dans les écrans peu hauts
   ========================================================================== */
.trades__sticky { padding-top: calc(var(--header-h) + 10px); padding-bottom: 16px; box-sizing: border-box; gap: clamp(16px, 3vh, 44px); }
.trade { min-height: clamp(280px, 56vh, 460px); }
.trade__img { height: clamp(96px, 15vh, 160px); }
@media (max-height: 760px) {
  .trades__head .h2 { font-size: clamp(24px, 4.6vh, 40px); }
  .trades__cur { font-size: clamp(44px, 9vh, 96px); }
  .trade { gap: 14px; }
  .trade p { font-size: 14px; line-height: 1.5; }
  .trade .h3 { font-size: clamp(18px, 3.2vh, 23px); margin-bottom: 6px; }
  .wall__head .h2 { font-size: clamp(22px, 4.4vh, 40px); }
  .wall__meter { margin-top: 10px; }
}
@media (max-height: 640px) {
  .trade__more { margin-top: 8px; }
  .wall__stage { max-height: 30vh; }
  .step .h3 { font-size: 19px; margin: 4px 0 6px; }
  .step p { font-size: 14px; line-height: 1.5; }
  .steps { min-height: 130px; }
}
@media (max-height: 640px) and (min-width: 861px) { .wall__stage { max-height: 62vh; } }

/* Téléphone à l'horizontale (hauteur ≤ 500 px) : récit au défilement désactivé, contenu empilé */
@media (max-height: 500px) {
  .wall, .tints, .trades { height: auto !important; }
  .wall__sticky, .tints__sticky, .trades__sticky { position: relative; top: auto; height: auto; min-height: 0; padding: calc(var(--header-h) + 28px) 0 56px; }
  .wall__inner { grid-template-columns: 1fr; }
  .wall__stage { display: none; }
  .steps { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
  .step { position: static; opacity: 1; transform: none; pointer-events: auto; }
  .trades__track { transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; }
  .trade { scroll-snap-align: start; min-height: 0; }
  .tints__sticky { padding-bottom: 130px; }
  .tints__name { min-height: 0; }
}
/* Petits téléphones en portrait */
@media (max-width: 860px) and (max-height: 700px) {
  .wall__stage { max-height: 32vh; }
  .wall__head .h2 { font-size: 22px; }
  .step p { font-size: 14px; line-height: 1.5; }
  .steps { min-height: 150px; }
}
@media (max-width: 860px) and (max-height: 620px) {
  .law__pair { display: none; }
  .law__text { font-size: 13.5px; }
  .tints__name { font-size: 34px; }
}
@media (max-width: 600px) { .cta .h-display, .h-display { line-height: 1; } }

/* Éléments ajoutés pour le référencement (aspect identique aux anciens titres) */
.card .card__t { margin: 0 0 14px; font-family: var(--font); font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--heading); }
.card--navy .card__t { color: var(--orange); }
.footer .footer__h { color: #fff; font-size: 12.5px; letter-spacing: .28em; text-transform: uppercase; margin: 0 0 18px; font-weight: 700; }
.footer__zones { font-size: 13.5px; color: rgba(255,255,255,.55); max-width: 52ch; margin-top: 14px; }
.nav__tel { display: none; font-weight: 700; color: #fff !important; font-variant-numeric: tabular-nums; padding: 10px 0; text-decoration: none; }
.nav__tel::before { content: "☎ "; color: var(--orange); }
@media (min-width: 1240px) { .nav__tel { display: inline-block; } }
@media (max-width: 900px) { .nav__tel { display: block; font-size: 22px !important; } }

/* ==========================================================================
   Frise du déroulé : un trait de pinceau relie les étapes au défilement
   ========================================================================== */
.frise { position: relative; margin-top: clamp(20px, 3vw, 40px); }
.frise__trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.frise__trace .track { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.frise__trace .bristle { fill: none; stroke: var(--orange); stroke-linecap: round; }
.frise__trace .tip { fill: #FFD9A8; filter: drop-shadow(0 0 10px rgba(239,138,34,.9)); }
.frise__list { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; display: grid; gap: clamp(18px, 3vw, 34px); }
.frise__step { display: grid; grid-template-columns: 1fr 72px 1fr; align-items: center; }
.frise__node {
  grid-column: 2; grid-row: 1; justify-self: center; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--muted);
  background: var(--night); border: 1.5px solid rgba(255,255,255,.18);
  transition: background .5s var(--ease), color .4s, border-color .4s, box-shadow .6s var(--ease), transform .5s var(--ease);
}
.frise__card {
  grid-row: 1; padding: 22px 24px; border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--paper);
  box-shadow: var(--shadow); opacity: .35; transform: translateX(var(--from, -24px)); filter: saturate(.6);
  transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .5s, filter .6s;
}
.frise__step:nth-child(odd) .frise__card { grid-column: 1; margin-right: 8px; }
.frise__step:nth-child(even) .frise__card { grid-column: 3; margin-left: 8px; --from: 24px; }
.frise__when { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-text); margin-bottom: 6px; }
.frise__card h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(19px, 1.7vw, 23px); font-weight: 700; color: #fff; }
.frise__card p { margin: 0; color: var(--muted); font-size: 15.5px; }
.frise__step.is-on .frise__node { background: var(--orange); color: var(--night); border-color: var(--orange); box-shadow: 0 0 0 6px rgba(239,138,34,.18), 0 0 30px rgba(239,138,34,.45); transform: scale(1.06); }
.frise__step.is-on .frise__card { opacity: 1; transform: none; filter: none; border-color: rgba(239,138,34,.35); }
@media (max-width: 860px) {
  .frise__step { grid-template-columns: 48px 1fr; gap: 0 14px; }
  .frise__node { grid-column: 1; width: 44px; height: 44px; font-size: 14px; }
  .frise__step:nth-child(odd) .frise__card, .frise__step:nth-child(even) .frise__card { grid-column: 2; margin: 0; --from: 18px; }
  .frise__card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .frise__card { opacity: 1; transform: none; filter: none; } }
/* Correctifs d'audit */
.frise { overflow-x: clip; }
.work:nth-child(5n+1) .work__img { height: auto; min-height: 0; aspect-ratio: 16 / 9.4; }

/* ==========================================================================
   Navigation mobile et tablette
   Le verre dépoli passe sur un pseudo-élément : un backdrop-filter sur la barre elle-même
   en ferait le cadre de référence du menu plein écran, qui resterait enfermé dedans.
   ========================================================================== */
.header .container, .header.is-solid .container, .header.is-dark .container {
  position: relative; background: none; border-color: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.header .container::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: rgba(7, 26, 51, .55); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 10px 40px -18px rgba(0,0,0,.6);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); transition: background .35s;
}
.header.is-solid .container::before, .header.is-dark .container::before { background: rgba(6, 20, 41, .82); border-color: rgba(255,255,255,.14); }

@media (max-width: 900px) {
  .brand, .flag-mini { position: relative; z-index: 2; }
  .burger { width: 48px; height: 48px; border-radius: 12px; }
  .burger:focus-visible { outline-offset: -2px; }
  .nav {
    inset: 0; padding: calc(var(--header-h) + 40px) max(24px, env(safe-area-inset-left)) calc(28px + env(safe-area-inset-bottom));
    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0;
    background: radial-gradient(120% 60% at 100% 0%, #133A68, var(--night) 60%); overflow-y: auto; overscroll-behavior: contain;
    clip-path: circle(0 at calc(100% - 52px) 46px);
  }
  body.menu-open .nav { clip-path: circle(150% at calc(100% - 52px) 46px); }
  .nav a:not(.btn):not(.nav__tel), .header.is-solid .nav a:not(.btn):not(.nav__tel) {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-family: var(--font-display); font-size: clamp(24px, 6.4vw, 32px); font-weight: 700; letter-spacing: -.02em;
    color: #fff; padding: 16px 2px; border-bottom: 1px solid rgba(255,255,255,.08);
    opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease), transform .5s var(--ease), color .2s;
  }
  .nav a:not(.btn):not(.nav__tel)::after {
    content: "→"; position: static; width: auto; height: auto; background: none; transform: none;
    font-family: var(--font); font-size: 20px; color: rgba(255,255,255,.35); transition: color .2s, transform .3s var(--ease);
  }
  .nav a:not(.btn):not(.nav__tel):active::after, .nav a:not(.btn):not(.nav__tel):hover::after { color: var(--orange); transform: translateX(4px); }
  .nav a:not(.btn)[aria-current="page"] { color: var(--orange); }
  .nav a:not(.btn)[aria-current="page"]::after { content: "●"; font-size: 10px; color: var(--orange); }
  .nav a[href="simulateur.html"]:not(.btn)::before { order: 2; margin: 0 0 0 auto; }
  body.menu-open .nav a { opacity: 1; transform: none; }
  body.menu-open .nav a:nth-child(2) { transition-delay: .04s; } body.menu-open .nav a:nth-child(3) { transition-delay: .08s; }
  body.menu-open .nav a:nth-child(4) { transition-delay: .12s; } body.menu-open .nav a:nth-child(5) { transition-delay: .16s; }
  .nav__tel {
    margin-top: auto; display: flex !important; align-items: center; justify-content: center; gap: 10px;
    min-height: 54px; border-radius: 40px; border: 1.5px solid rgba(255,255,255,.22); font-size: 18px !important;
    opacity: 0; transition: opacity .4s .2s;
  }
  .nav .btn { justify-content: center; width: 100%; min-height: 54px; margin-top: 10px; font-size: 16px; opacity: 0; transition: opacity .4s .24s; }
  body.menu-open .nav__tel, body.menu-open .nav .btn { opacity: 1; }
  .nav::after { content: "Made in Réunion · 974"; display: block; text-align: center; margin-top: 18px; font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.45); }
}
@media (max-width: 900px) and (max-height: 560px) {
  .nav { padding-top: calc(var(--header-h) + 18px); }
  .nav a:not(.btn):not(.nav__tel) { font-size: 20px; padding: 10px 2px; }
  .nav__tel, .nav .btn { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .nav a, .nav__tel, .nav .btn { transition: none; } }
@media (max-width: 900px) { .nav a:not(.btn):not(.nav__tel)::after { order: 3; } }
@media (max-width: 900px) { body.menu-open .nav a:not(.btn):not(.nav__tel) { opacity: 1; transform: none; } }