/* ============ Tokens & thèmes ============ */

:root {
  --maxw: 1200px;
  --radius: 18px;
  --shadow: 0 12px 40px rgba(0, 0, 0, .35);
  --focus: 0 0 0 3px rgba(76, 201, 240, .5);
  /* Viewport height fallback for Safari/iOS */
  --vh: 1vh;
  --slide-h: calc(var(--vh) * 100);
  /* Fallback values for older browsers */
  --slide-pad: 24px;
  --content-w: 92vw;
  /* Form controls */
  --control-h: 48px;
  /* Text shadows for readability on image backgrounds */
  --txtshadow-soft: 0 4px 3px rgba(0, 0, 0, .45);
  --txtshadow-strong: 0 8px 6px rgba(0, 0, 0, .55), 0 6px 20px rgba(0, 0, 0, .35);
  /* Couleur des titres (fixe, identique en light/dark sauf override spécifique) */
  --heading-color: #ffffff;
  /* Vignette de fondu aux bords haut/bas */
  --edge-fade: rgba(0, 0, 0, 0.18);
  /* Shoji (thème clair par défaut) — ton crème */
  --shoji-paper: rgba(245, 239, 230, 0.90);
  --shoji-grid: rgba(0, 0, 0, 0.07);
  --shoji-frame: rgba(139, 92, 52, 0.18);
  --shoji-edge: rgba(139, 92, 52, 0.24);
}

/* Prefer dynamic svh when supported */
@supports (height: 100svh) {
  :root {
    --slide-h: 100svh;
  }
}

/* Use clamp/min when supported */
@supports (width: clamp(1px, 1vw, 2px)) {
  :root {
    --slide-pad: clamp(24px, 4vw, 56px);
  }
}

@supports (width: min(10px, 5vw)) {
  :root {
    --content-w: min(860px, 92vw);
  }
}

/* Fallbacks when min() is unsupported (older Safari) */
@supports not (width: min(10px, 5vw)) {
  @media (min-width: 900px) {
    #guide .slide-inner {
      width: 94vw;
      max-width: 1040px;
    }
  }

  @media (min-width: 900px) {
    #presentation .presentation-text {
      max-width: 94vw;
    }
  }

  @media (min-width: 900px) {
    #devis .quote-text {
      max-width: 90vw;
    }
  }
}

[data-theme="light"] {
  --bg: #fafafa;
  --panel: #ffffff;
  --text: #0e1116;
  --muted: #4b5563;
  --line: #e5e7eb;
  --accent: #111827;
  --pill: #f5f5f5;
  --hero-grad: radial-gradient(1400px 500px at 60% -10%, rgba(0, 0, 0, .06), transparent),
    radial-gradient(800px 200px at 10% 0%, rgba(234, 179, 8, .15), transparent);
  --edge-fade: rgba(0, 0, 0, 0.10);

}

[data-theme="dark"] {
  --bg: #0b0f14;
  --panel: #11161e;
  --text: #e8edf5;
  --muted: #a8b3c7;
  --line: rgba(255, 255, 255, .08);
  --accent: #e8edf5;
  --pill: rgba(255, 255, 255, .06);
  --hero-grad: radial-gradient(1400px 500px at 60% -10%, rgba(76, 201, 240, .15), transparent),
    radial-gradient(800px 200px at 10% 0%, rgba(255, 238, 0, .08), transparent);
  --edge-fade: rgba(0, 0, 0, 0.22);
  /* Shoji (thème sombre) */
  --shoji-paper: rgba(16, 20, 27, 0.88);
  --shoji-grid: rgba(255, 255, 255, 0.08);
  --shoji-frame: rgba(255, 255, 255, 0.16);
  --shoji-edge: rgba(255, 255, 255, 0.20);
}

/* ============ Base ============ */
html {
  scroll-behavior: smooth
}

/* Mobile/tablet: avoid mid-word hyphenation; wrap at spaces only */
@media (max-width: 899px) {

  /* Stack hero title parts on separate lines on mobile/tablet */
  #top h1 .stack {
    display: block;
  }

  #top h1 br {
    display: none;
  }

  /* Smaller hero title on mobile/tablet */
  #top h1 {
    font-size: clamp(22px, 7vw, 32px);
    line-height: 1.1;
  }

  .slide h1,
  .slide h2,
  .slide h3,
  .slide h4,
  .slide p,
  .lead,
  .kicker,
  .tag,
  .rec-desc,
  .rec-pill,
  li,
  a,
  label,
  .btn {
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

/* Generic collapsible used across pages (programme, etc.) */
.more-collapsible {
  overflow: hidden;
  max-height: 0;
  transition: max-height 360ms cubic-bezier(.22, .61, .36, 1);
}

/* Ensure hero lead "more" block lays out cleanly when expanded */
/* .hero-lead-more supprimé (retour au rendu i18n simple) */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial
}

/* Bloque les interactions et le scroll pendant l'ouverture shoji initiale */
body.shoji-opening {
  overflow: hidden;
  touch-action: none;
}

body.shoji-opening::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1002;
  /* sous .shoji (1003), au-dessus du contenu */
  background: rgba(0, 0, 0, 0);
  /* transparent mais capte les clics */
  pointer-events: auto;
}

/* Synchronisation post-ouverture: garde le shoji local du HERO déjà ouvert, sans animation */
body.shoji-initial-sync #top .shoji-local .panel {
  transition: none !important;
}

body.shoji-initial-sync #top .shoji-local .panel.left {
  transform: translateX(-102%);
}

body.shoji-initial-sync #top .shoji-local .panel.right {
  transform: translateX(102%);
}

/* Skip link accessibilité */
.skip-link {
  position: absolute;
  left: 8px;
  top: -40px;
  background: #11161e;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  z-index: 1100;
}

.skip-link:focus {
  top: 8px;
}

* {
  box-sizing: border-box
}

a {
  color: var(--accent);
  text-decoration: none
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius)
}

.container {
  max-width: var(--maxw);
  margin: auto;
  padding: 0 20px
}

/* Formulaire de contact */
.contact-panel {
  /* glassy panel refined */
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: 22px 22px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .06);
  text-align: left;
}

/* Plus discret quand le formulaire est replié */
.contact-panel.collapsed {
  /* Remove the panel box entirely so only the heading is visible */
  display: contents;
}

.contact-mail {
  margin: 4px 0 0;
  font-size: .9rem;
  opacity: .85;
}

.contact-panel h2 {
  text-shadow: var(--txtshadow-strong);
  text-align: center;
}

.contact-heading {
  margin: 10px auto 16px;
  width: fit-content;
  max-width: min(620px, 92%);
  text-align: center;
  /* Style kicker */
  background: var(--pill);
  border: 0px solid var(--line);
  padding: clamp(6px, 1.2vw, 10px) clamp(12px, 2.2vw, 18px);
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
  font-size: clamp(18px, 4.4vw, 26px);
  letter-spacing: .2px;
  text-shadow: none;
  cursor: pointer;
  position: relative;
  transition: background .2s ease, border-color .2s ease;
}

.contact-heading::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  opacity: .9;
  transition: transform .2s ease;
}

#contact-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

.contact-heading:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .28);
}

.contact-heading:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.contact-panel h2,
.contact-panel p,
.contact-panel label,
.contact-panel legend,
.contact-panel .contact-mail,
.contact-panel .muted {
  color: #ffffff;
}

.contact-form {
  max-width: 860px;
  margin: 14px auto 0;
  display: grid;
  gap: 14px;
}

.contact-form .form-grid {
  display: grid;
  gap: 16px;
}

.contact-form .form-group {
  border-radius: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.contact-form .group-title {
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .3px;
  color: #fff;
  text-align: left;
}

.contact-form .group-body {
  display: grid;
  gap: 12px;
}

.contact-form .field {
  display: grid;
  gap: 6px;
}

/* Labels de champ (hors radios) en gras */
.contact-form .field>label {
  font-weight: 600;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="number"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 0px solid var(--line);
  background: color-mix(in oklab, var(--panel), transparent 0%);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 2px 14px rgba(0, 0, 0, .22);
  min-height: var(--control-h);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, .85);
  opacity: 1;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  box-shadow: var(--focus), 0 0 0 1px rgba(76, 201, 240, .45) inset;
  border-color: rgba(76, 201, 240, .6);
}

.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-msg {
  text-align: center;
  font-size: .95rem;
}

/* Contact width on desktop */
@media (min-width: 900px) {
  #contact .slide-inner.contact-panel {
    width: 100%;
    margin: 0 auto;
  }
}

/* No special width when collapsed — the panel is not rendered */

/* Radios / Fieldsets */
.contact-form fieldset.field {
  display: grid;
  gap: 8px;
  border: 0px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .04);
  min-height: var(--control-h);
  align-items: center;
}

.contact-form fieldset.field legend {
  padding: 0 4px;
  font-weight: 700;
  color: var(--text);
}

.contact-form fieldset.field label {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
  font-weight: 400;
  padding: 10px 12px;
  border: 0px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.contact-form fieldset.field label:hover {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
}

/* highlight selected card (progressive enhancement; fallback keeps radio focus visible) */
.contact-form fieldset.field label:has(input[type="radio"]:checked) {
  border-color: rgba(76, 201, 240, .6);
  background: rgba(76, 201, 240, .12);
  box-shadow: 0 0 0 3px rgba(76, 201, 240, .18) inset;
}

.contact-form fieldset.field label+label {
  margin-top: 6px;
}

.contact-form input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: transparent;
  display: inline-grid;
  place-content: center;
  flex: 0 0 20px;
}

.contact-form input[type="radio"]::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 120ms ease-in-out;
  background: #ffffff;
}

.contact-form input[type="radio"]:checked::before {
  transform: scale(1);
}

.contact-form input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.contact-form .muted {
  font-size: .85rem;
  color: rgba(255, 255, 255, .9);
}

/* Mobile-friendly adjustments for contact form */
@media (max-width: 600px) {
  .contact-panel {
    padding: 14px 14px;
    border-radius: 14px;
  }

  .contact-form {
    gap: 16px;
  }

  .contact-form .field {
    gap: 8px;
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="number"],
  .contact-form input[type="tel"],
  .contact-form select,
  .contact-form textarea {
    padding: 12px 14px;
    font-size: 16px;
  }

  .contact-form fieldset.field {
    padding: 10px 12px;
  }

  .contact-form fieldset.field label {
    align-items: flex-start;
    padding: 10px 12px;
  }

  .contact-form input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
  }

  .contact-form .btn {
    width: 100%;
  }
}

/* Desktop: two-column layout with spans */
@media (min-width: 700px) {

  /* Stack fields vertically on tablet/desktop for better alignment */
  #contact .contact-form .group-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #contact .contact-form .group-body .field.half {
    grid-column: 1 / -1;
  }
}

/* CTA button refinement inside contact */
#contact .contact-form .btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
  border: 0px solid rgba(255, 255, 255, .24);
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
}

#contact .contact-form .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .12);
}

#contact .contact-form .btn:active {
  transform: translateY(0);
}

.contact-form .form-actions {
  display: grid;
  place-items: center;
  margin-top: 12px;
}

/* Date range popover */
.contact-form .field.date-range {
  position: relative;
}

.date-popover {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  z-index: 1010;
  background: rgba(21, 27, 36, .85);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .06);
  width: min(420px, 94vw);
  color: #fff;
}

.date-popover .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.date-popover label {
  font-weight: 600;
  font-size: .9rem;
}

.date-popover input[type="date"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  min-height: var(--control-h);
}

.date-popover .actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}

.date-popover .btn.gray {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
}

.date-popover .btn {
  padding: 10px 14px;
  border-radius: 10px;
}

@media (max-width: 600px) {
  .date-popover {
    left: 0;
    right: 0;
    width: 100%;
  }

  .date-popover .row {
    grid-template-columns: 1fr;
  }
}

/* ===== Guestbook ===== */
#guestbook .slide-inner {
  width: var(--content-w);
  text-align: center;
}

.guest-display {
  position: relative;
  min-height: clamp(160px, 28vh, 360px);
}

.guest-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  max-width: min(800px, 92vw);
  text-align: left;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}

.guest-card {
  color: #ffffff;
}

.guest-card .text,
.guest-card .name,
.guest-card .stars {
  text-shadow: var(--txtshadow-soft);
}

.guest-card .name {
  font-weight: 800;
}

.guest-card .stars {
  color: #ffde59;
  letter-spacing: 1px;
}

.guest-actions {
  margin-top: 12px;
  display: grid;
  place-items: center;
}

/* Animations */
@keyframes guest-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) translateX(12%);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) translateX(0);
  }
}

@keyframes guest-out {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) translateX(0);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -50%) translateX(-12%);
  }
}

.guest-card.enter {
  animation: guest-in 360ms ease both;
}

.guest-card.leave {
  animation: guest-out 320ms ease both;
}

/* Popover form */
.guest-popover {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .35);
}

.guest-popover[hidden] {
  display: none;
}

.guest-popover form {
  width: min(560px, 92vw);
  background: rgba(21, 27, 36, .88);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  padding: 14px;
  color: #fff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .30);
}

.guest-title {
  margin: 0 0 8px;
  text-align: left;
}

.guest-popover .field {
  display: grid;
  gap: 6px;
  margin: 8px 0;
}

.guest-popover input, .guest-popover textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.guest-popover .stars label {
  display: inline-block;
  cursor: pointer;
  margin-right: 6px;
}

.guest-popover .stars input {
  display: none;
}

.guest-popover .actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}

.guest-popover .btn.gray {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
}

/* Desktop alignment: labels on left, inputs same width on right */
@media (min-width: 900px) {
  .contact-form .field {
    grid-template-columns: 220px 1fr;
    align-items: center;
    min-height: var(--control-h);
  }

  .contact-form .field>label {
    grid-column: 1;
    margin: 0;
  }

  .contact-form .field>input,
  .contact-form .field>select,
  .contact-form .field>textarea {
    grid-column: 2;
    width: 100%;
  }

  .contact-form .field>.muted {
    grid-column: 2;
  }

  .contact-form fieldset.field {
    grid-template-columns: 220px 1fr;
  }

  .contact-form fieldset.field legend {
    grid-column: 1;
  }

  .contact-form fieldset.field label {
    grid-column: 2;
  }
}

/* ============ Nav ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(14, 17, 22, .6);
  backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid var(--line)
}

[data-theme="light"] .nav {
  background: rgba(255, 255, 255, .65)
}

/* ——— Nav “façade japonaise” ——— */
.nav.jpn {
  position: sticky;
  top: 0;
  background: rgba(12, 16, 23, .24);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  overflow: hidden;
}

[data-theme="light"] .nav.jpn {
  background: rgba(255, 255, 255, .42);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
}

.nav.jpn.scrolled {
  background: rgba(12, 16, 23, .36);
  border-bottom-color: rgba(255, 255, 255, .14);
}

[data-theme="light"] .nav.jpn.scrolled {
  background: rgba(255, 255, 255, .62);
  border-bottom-color: rgba(0, 0, 0, .09);
}

.nav.jpn .inner {
  padding-top: 10px;
}

/* Noren retiré pour un rendu plus épuré */
.nav.jpn .noren {
  display: none;
}

.nav.jpn .noren::after {
  display: none;
}

/* Marque épurée: texte seul */
.nav.jpn .brand .sign {
  padding: 0;
  background: transparent;
  color: var(--accent);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  letter-spacing: .4px;
  font-weight: 800;
  white-space: nowrap;
  font-size: clamp(12px, 2.4vw, 18px);
  letter-spacing: clamp(0.2px, 0.08vw, 0.4px);
}

/* Lanternes cachées pour un look épuré */
.nav.jpn .lantern {
  display: none !important;
}

/* Boutons dans la nav: style verre subtil */
.nav.jpn .btn {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
}

.nav.jpn .btn:hover {
  background: rgba(255, 255, 255, .13);
}

[data-theme="light"] .nav.jpn .btn {
  background: rgba(255, 255, 255, .6);
  border-color: rgba(0, 0, 0, .08);
}

[data-theme="light"] .nav.jpn .btn:hover {
  background: rgba(255, 255, 255, .7);
}

@media (max-width: 600px) {
  .nav.jpn .inner {
    padding-top: 8px;
    position: relative;
    /* ancre le menu déroulant mobile */
  }

  .nav.jpn .noren {
    height: 5px;
  }
}

.nav .inner {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  padding: 12px 24px;
  /* Taille standard des boutons de la zone droite du header */
  --hdr-btn: clamp(34px, 4.2vw, 40px);
}

/* Étire la nav en pleine largeur, indépendamment du conteneur générique */
.nav .inner.container {
  max-width: none;
  width: 100%;
}

/* Desktop plein écran: avance légèrement la marque vers la gauche,
   sans dépasser la bordure arrondie de la nav */
@media (min-width: 1200px) {
  .nav .inner {
    padding-left: 32px;
    padding-right: 32px;
  }

  .nav .brand {
    margin-left: -4px;
  }

  /* Desktop: plus d'air entre les liens et les contrôles */
  .nav .links {
    gap: 16px;
  }

  .nav .inner> :last-child {
    gap: 12px;
  }
}

@media (min-width: 1600px) {
  .nav .inner {
    padding-left: 40px;
    padding-right: 40px;
  }

  .nav .brand {
    margin-left: -6px;
  }

  /* Très grands écrans: aération renforcée */
  .nav .links {
    gap: 18px;
  }

  .nav .inner> :last-child {
    gap: 14px;
  }
}

.brand {
  font-weight: 800;
  letter-spacing: .2px
}

.brand .brand-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.brand .brand-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.brand .hinomaru {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 5px;
  margin-top: -1px;
  border-radius: 999px;
  background: #e60026;
  /* rouge drapeau japonais */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .35);
  vertical-align: middle;
}

[data-theme="light"] .brand .hinomaru {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .18);
}

.brand .brand-sub {
  font-size: 0.5em;
  font-style: normal;
  /* letter-spacing: .02em; */
  color: var(--accent);
  align-self: flex-end;
  margin-right: 35px;
  margin-top: -7px;
  line-height: 1.05;
  font-family: inherit;
  white-space: nowrap;
}

.links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

/* Nav links: pas de retour à la ligne; tailles adaptatives */
.nav .links {
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 12px;
}

.nav .links a {
  font-size: clamp(13px, 1.6vw, 16px);
  padding: clamp(6px, 0.8vw, 10px) clamp(10px, 1.4vw, 14px);
}

.nav .btn {
  font-size: clamp(12px, 1.5vw, 15px);
  padding: clamp(6px, 0.8vw, 10px) clamp(9px, 1.3vw, 13px);
}

/* ——— Menu burger (mobile) ——— */
.menu-btn {
  display: none !important;
}

@media (max-width: 720px) {
  .nav .inner {
    gap: 10px;
    position: relative;
    /* ancre le menu déroulant */
  }

  .links {
    display: none;
    /* caché par défaut sur mobile */
  }

  .menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
  }

  /* Dropdown container */
  .nav.jpn {
    overflow: visible;
  }

  .nav.jpn .links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(12, 16, 23, .90);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border: 1px solid rgba(255, 255, 255, .10);
    border-top: none;
    padding: 8px;
    gap: 6px;
    z-index: 1001;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  }

  /* Cache seulement le bouton "Demander un devis" dans le header (mobile) pour gagner de la place */
  .nav .inner> :last-child a[href*="#devis"] {
    display: none !important;
  }

  /* Actions mobiles dans le menu déroulant */
  .nav.jpn .links .mobile-actions {
    display: flex;
    gap: 8px;
    width: 100%;
    padding-top: 4px;
  }

  /* Ordonne les contrôles à droite: thème, langue, menu */
  .nav .inner> :last-child {
    display: flex;
  }

  .nav .inner> :last-child #theme {
    order: 1;
  }

  .nav .inner> :last-child #lang {
    order: 2;
  }

  .nav .inner> :last-child #menu {
    order: 3;
  }

  [data-theme="light"] .nav.jpn .links {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(0, 0, 0, .08);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .50);
  }

  .nav.jpn.menu-open .links {
    display: flex;
    /* affiché quand menu ouvert */
    flex-wrap: wrap;
  }

  /* Quand le menu est ouvert: fondre le dropdown dans le header */
  .nav.jpn.menu-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none !important;
    /* supprime la ligne de séparation */
    box-shadow: none !important;
    /* supprime le liseré inset */
  }

  .nav.jpn.scrolled.menu-open {
    border-bottom: none !important;
    box-shadow: none !important;
  }

  .nav.jpn.menu-open .links {
    background: rgba(12, 16, 23, .24);
    /* même transparence que le header par défaut */
    box-shadow: none;
    /* se fond sans ombre de séparation */
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    border-left-color: rgba(255, 255, 255, .10);
    border-right-color: rgba(255, 255, 255, .10);
    border-bottom-color: rgba(255, 255, 255, .10);
  }

  .nav.jpn.scrolled.menu-open .links {
    background: rgba(12, 16, 23, .36);
    /* même fond que header scrolled */
  }

  [data-theme="light"] .nav.jpn.menu-open .links {
    background: rgba(255, 255, 255, .42);
    border-left-color: rgba(0, 0, 0, .08);
    border-right-color: rgba(0, 0, 0, .08);
    border-bottom-color: rgba(0, 0, 0, .08);
  }

  [data-theme="light"] .nav.jpn.scrolled.menu-open .links {
    background: rgba(255, 255, 255, .62);
  }

  .nav.jpn .links a,
  .nav.jpn .links .btn {
    flex: 1 1 auto;
    font-size: clamp(12px, 1.4vw, 14px);
    padding: clamp(6px, 0.8vw, 10px) clamp(8px, 1.2vw, 12px);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    color: var(--accent);
    box-shadow: none;
    transition: background .2s ease, border-color .2s ease, filter .2s ease;
  }

  .nav.jpn .links a:hover,
  .nav.jpn .links .btn:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .24);
    filter: none;
  }

  [data-theme="light"] .nav.jpn .links a,
  [data-theme="light"] .nav.jpn .links .btn {
    background: rgba(0, 0, 0, .04);
    border-color: rgba(0, 0, 0, .10);
  }

  [data-theme="light"] .nav.jpn .links a:hover,
  [data-theme="light"] .nav.jpn .links .btn:hover {
    background: rgba(0, 0, 0, .06);
    border-color: rgba(0, 0, 0, .16);
  }

  /* Réduit le sous-titre pour éviter les retours */
  .brand .brand-sub {
    font-size: 10px;
    margin-right: 8px;
  }
}

@media (max-width: 520px) {
  .brand .brand-sub {
    display: none;
  }
}

.links a {
  padding: 8px 10px;
  border-radius: 10px
}

.links a:hover {
  background: var(--pill)
}

.cta {
  background: var(--accent);
  color: #0b0f14;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.btn {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  /* tailles responsives et cohérentes */
  font-size: clamp(12px, 1.4vw, 14px);
  padding: clamp(6px, 0.8vw, 10px) clamp(8px, 1.2vw, 12px);
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* unifie taille police entre <a> et <button> */
  line-height: 1.1;
  /* évite variations de hauteur entre navigateurs */
  font-weight: 600;
}

/* Flag button visuals (conserve proportions des autres boutons) */
#lang.lang-flag {
  padding: clamp(6px, 0.8vw, 10px) clamp(8px, 1.2vw, 12px);
}

#lang.lang-flag svg {
  display: block;
  width: auto;
  height: 1.2em;
  /* aligne visuellement avec l’icône thème */
  vertical-align: middle;
  border-radius: 4px;
}

/* Icon-only button sizing */
.btn.icon svg {
  width: 1.2em;
  height: 1.2em;
}

/* Uniformise la width/height des boutons du header (zone droite) */
.nav .inner> :last-child .btn {
  width: var(--hdr-btn);
  height: var(--hdr-btn);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Icône enveloppe adaptée à la taille standard */
.nav .inner> :last-child .btn.icon svg {
  width: 1.05em;
  height: 1.05em;
}

/* Drapeau adapté à la taille standard */
.nav .inner> :last-child #lang.lang-flag svg {
  width: auto;
  height: calc(var(--hdr-btn) * 0.6);
  border-radius: 2px;
}

/* Bouton thème: garde une échelle confortable */
.nav .inner> :last-child #theme {
  font-size: 1rem;
}

.btn:hover {
  filter: brightness(1.06)
}


.btn.cta:hover {
  filter: brightness(1.08);
}

/* Variante outline (contour) plus épurée */
.btn.outline {
  background: transparent;
  border-width: 1.5px;
  border-style: solid;
  border-color: var(--line);
  color: var(--accent);
  box-shadow: none;
}

.btn.outline:hover {
  background: rgba(255, 255, 255, .08);
}

[data-theme="light"] .btn.outline:hover {
  background: rgba(0, 0, 0, .04);
}

/* Ajuste l'outline dans la nav verre */
.nav.jpn .btn.outline {
  background: transparent;
  border-color: rgba(255, 255, 255, .35);
  color: var(--accent);
}

[data-theme="light"] .nav.jpn .btn.outline {
  border-color: rgba(0, 0, 0, .22);
}

/* ============ Slides layout (centré + parallax) ============ */
.slides {
  scroll-snap-type: y proximity;
  /* Dégradé global pour éviter les ruptures entre slides */
  background: var(--hero-grad);
  position: relative;
}

/* Légers fondus haut/bas pour effacer toute couture visuelle au scroll */
.slides::before, .slides::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: clamp(16px, 6vh, 64px);
  pointer-events: none;
  z-index: 900;
  /* sous la nav (1000) et la toolbar (1001) */
}

.slides::before {
  top: 0;
  background: linear-gradient(to bottom, var(--edge-fade), rgba(0, 0, 0, 0));
}

.slides::after {
  bottom: 0;
  background: linear-gradient(to top, var(--edge-fade), rgba(0, 0, 0, 0));
}

.slide {
  position: relative;
  min-height: var(--slide-h);
  display: grid;
  place-items: center;
  /* Padding unifié, avec axes personnalisables */
  padding: var(--slide-pad-y, var(--slide-pad)) var(--slide-pad-x, var(--slide-pad));
  /* pas de bordure pour éviter la ligne visible entre sections */
  border-top: none;
  /* Arrondi uniforme des 4 angles de toutes les sections */
  border-radius: var(--radius);
  scroll-snap-align: start;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
}

/* Improve legibility of text on slide backgrounds */
.slide h1,
.slide h2 {
  text-shadow: var(--txtshadow-strong);
}

.slide h3,
.slide h4,
.slide p,
.slide .lead,
.slide li,
.slide a,
.slide .kicker,
.slide .tag,
.slide .kpi .val,
.slide .kpi .lab {
  text-shadow: var(--txtshadow-soft);
}

/* Ensure list markers created via ::before stay crisp */
.list.check li::before {
  text-shadow: none;
}

/* ===== Guide section — refined layout ===== */
#guide .slide-inner {
  background: transparent;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: clamp(12px, 2.4vw, 22px);
  width: var(--content-w);
  text-align: left;
}

#guide h2 {
  margin-bottom: 10px;
}

#guide h3 {
  margin: 10px 0 6px;
  font-weight: 800;
}

#guide p {
  margin: 6px 0;
  font-size: 1.06rem;
  line-height: 1.7;
}

#guide .list {
  margin-top: 8px;
}

#guide .list li {
  padding-left: 26px;
  font-size: 1.06rem;
  line-height: 1.7;
}

#guide .list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
}

/* Guide header (profil) */
#guide .guide-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

#guide .guide-header .avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  color: #0e1116;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: .4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

#guide .guide-header .meta .role {
  font-size: .9rem;
  opacity: .9;
}

#guide .guide-header .meta h2 {
  margin: 0;
}

/* Guide: tags essentiels mis en avant */
#guide .tags.key .tag {
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .22);
}

/* Guide: collapsible */
#guide .more-collapsible {
  overflow: hidden;
  max-height: 0;
  transition: max-height 360ms cubic-bezier(.22, .61, .36, 1);
}

#guide .more-toggle {
  white-space: nowrap;
}

@media (min-width: 900px) {
  #guide .slide-inner {
    width: min(1040px, 94vw);
  }

  /* split points into two columns on desktop for a balanced block */
  #guide .list {
    column-count: 2;
    column-gap: 20px;
  }

  #guide .list li {
    break-inside: avoid;
  }
}

/* ===== Devis section — refined essentials + collapsible ===== */
#devis .slide-inner {
  width: var(--content-w);
  text-align: left;
}

#devis p {
  margin: 6px 0;
}

#devis .tags.key .tag {
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .22);
}

#devis .more-collapsible {
  overflow: hidden;
  max-height: 0;
  transition: max-height 360ms cubic-bezier(.22, .61, .36, 1);
}

#devis .more-toggle {
  white-space: nowrap;
}

/* (revert) pas de padding-bottom spécifique mobile pour #devis */
@media (min-width: 900px) {
  #devis .grid-2 {
    align-items: start;
  }
}

/* Assure la même teinte pour les listes dans les slides */
.slide li {
  color: var(--muted);
}

.slide-inner {
  width: var(--content-w);
  text-align: center;
  display: grid;
  gap: 12px;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Programme: aligner le contenu en haut à gauche */
body[data-page="programme"] .slide-inner {
  text-align: left;
  justify-items: start;
  align-items: start;
  will-change: transform;
}

/* Lisibilité accrue du texte sur la page programme */
body[data-page="programme"] .slide-inner h1,
body[data-page="programme"] .slide-inner h2,
body[data-page="programme"] .slide-inner p,
body[data-page="programme"] .slide-inner li {
  text-shadow: var(--txtshadow-strong);
}

/* Programme: améliorer la lisibilité des paragraphes par un fond léger */
body[data-page="programme"] .slide-inner p {
  background: var(--pill);
  border-radius: 12px;
  padding: 8px 12px 8px 28px;
  /* espace pour la pastille */
  display: block;
  width: fit-content;
  max-width: min(900px, 92vw);
  backdrop-filter: saturate(120%) blur(2px);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  margin: 6px 0 6px 12px;
  color: #ffffff;
  position: relative;
}

/* Variante thème clair: fond adouci pour éviter le contraste trop fort */
[data-theme="light"] body[data-page="programme"] .slide-inner p {
  background: var(--pill);
  border-color: var(--line);
}

/* Liens dans les paragraphes programme: toujours lisibles */
body[data-page="programme"] .slide-inner p a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Pastille/repère avant chaque paragraphe (séparateur visuel) */
body[data-page="programme"] .slide-inner p::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  opacity: .95;
}

/* Mobile: plus petite H2 et alignée en haut-gauche, paragraphe légèrement indenté */
@media (max-width: 600px) {
  body[data-page="programme"] .slide-inner h2 {
    font-size: clamp(13px, 3.6vw, 16px);
    margin-left: 0;
  }

  body[data-page="programme"] .slide-inner p {
    margin-left: 10px;
  }
}

/* Tablette: toujours en haut-gauche, taille modérée */
@media (min-width: 601px) and (max-width: 899px) {
  body[data-page="programme"] .slide-inner h2 {
    font-size: clamp(14px, 2.2vw, 20px);
    margin-left: 0;
  }

  body[data-page="programme"] .slide-inner p {
    margin-left: 14px;
  }
}

/* Desktop: H2 à gauche, paragraphes un peu plus indentés */
@media (min-width: 900px) {
  body[data-page="programme"] .slide-inner h2 {
    margin-left: 0;
  }

  body[data-page="programme"] .slide-inner p {
    margin-left: 18px;
  }
}

/* ====== Lists & layout helpers for readable slides ====== */
.list {
  list-style: none;
  margin: 4px auto 0;
  padding: 0;
  text-align: left;
}

.list li {
  position: relative;
  margin: 6px 0;
  padding-left: 26px;
  color: var(--muted);
}

.list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  opacity: .9;
}

.list.check li::before {
  content: "✓";
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  color: #9be7a5;
  font-weight: 800;
}

.grid-2 {
  display: grid;
  gap: 12px;
}

@media (min-width: 900px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Présentation — disposition desktop en 2 blocs */
@media (min-width: 900px) {

  /* Plein 50/50: conteneur à 100% et colonnes sans espace */
  /* Conserve le padding standard pour uniformiser l'espacement des sections */
  #presentation {
    /* padding hérité de .slide */
  }

  #presentation .slide-inner {
    width: 100%;
    max-width: none;
    padding: 0;
    height: var(--slide-h);
  }

  #presentation .grid-2 {
    gap: 0;
    align-items: center;
    align-content: center;
    justify-items: center;
    min-height: var(--slide-h);
  }

  #presentation .grid-2>* {
    height: 100%;
  }

  /* Présentation: texte seul (fond retiré), en une colonne, centré */
  .presentation-text {
    text-align: center;
    background: transparent;
    padding: 24px;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  #presentation .grid-2 {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  /* Centrer tout le contenu textuel de la slide Présentation en desktop */
  #presentation .presentation-text h1,
  #presentation .presentation-text h2,
  #presentation .presentation-text h3,
  #presentation .presentation-text p,
  #presentation .presentation-text .lead,
  #presentation .presentation-text .kpis,
  #presentation .presentation-text .tags,
  #presentation .presentation-text .btn,
  #presentation .presentation-text a {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Listes centrées visuellement (réarrange le check) */
  #presentation .list {
    text-align: center;
  }

  #presentation .list li {
    padding-left: 0;
  }

  #presentation .list.check li::before {
    position: static;
    display: inline-block;
    margin-right: 6px;
    top: auto;
    left: auto;
  }

  /* Remplir davantage l'espace texte en desktop */
  #presentation .presentation-text {
    max-width: min(1100px, 94vw);
  }

  #presentation .presentation-text p,
  #presentation .presentation-text li {
    font-size: 1.06rem;
    line-height: 1.7;
  }
}

/* Tablette: augmente légèrement la largeur et la lisibilité */
@media (min-width: 700px) and (max-width: 899px) {
  #presentation .presentation-text {
    max-width: min(980px, 94vw);
  }

  #presentation .presentation-text p,
  #presentation .presentation-text li {
    font-size: 1.04rem;
    line-height: 1.65;
  }

  #presentation .grid-2 {
    align-items: center;
    align-content: center;
    justify-items: center;
  }

  #presentation .presentation-grid {
    margin-top: 0 !important;
  }
}

/* Collapsible (Présentation) */
#presentation .more-collapsible {
  overflow: hidden;
  max-height: 0;
  transition: max-height 360ms cubic-bezier(.22, .61, .36, 1);
}

#presentation .more-toggle {
  white-space: nowrap;
}

/* Carte image à droite (desktop) */
.illus-card {
  display: none;
  overflow: hidden;
  border-radius: 16px;
}

.illus-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

@media (min-width: 900px) {
  .illus-card {
    display: block;
  }

  /* Présentation: arrondit l'image sur tous les coins */
  #presentation .illus-card img {
    border-radius: 16px;
  }
}

/* Présentation — fond lisible et cohérent (mobile/tablette) */
.presentation-text {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 16px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Présentation — ajustements pour tenir dans la hauteur en mobile/tablette */
@media (max-width: 900px) {
  #presentation .slide-inner {
    gap: 10px;
  }

  #presentation .presentation-text {
    max-height: calc(var(--slide-h) - 2 * (var(--slide-pad-y, var(--slide-pad))));
    overflow: auto;
  }

  #presentation .presentation-text h2 {
    font-size: clamp(22px, 4.6vw, 30px);
    line-height: 1.15;
    margin: 0 0 6px;
  }

  #presentation .presentation-text h3 {
    font-size: clamp(16px, 3.4vw, 20px);
    margin: 8px 0 4px;
  }

  #presentation .presentation-text p {
    font-size: clamp(14px, 2.8vw, 16px);
    line-height: 1.45;
    margin: 6px 0;
  }

  #presentation .presentation-text .list li {
    margin: 4px 0;
    font-size: clamp(14px, 2.8vw, 16px);
  }

  /* KPIs compacts en grille, moins hauts */
  #presentation .kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  #presentation .kpi .val {
    font-size: clamp(16px, 4.2vw, 20px);
  }

  #presentation .kpi .lab {
    font-size: clamp(10px, 2.6vw, 12px);
  }
}

@media (max-width: 640px) {
  #presentation .slide-inner {
    gap: 8px;
  }

  #presentation .presentation-text {
    padding: 12px;
  }

  #presentation .presentation-text h2 {
    font-size: clamp(20px, 5.6vw, 26px);
  }

  #presentation .presentation-text p {
    margin: 4px 0;
  }

  #presentation .presentation-text .list li {
    margin: 3px 0;
  }

  /* KPIs sur 2 colonnes encore plus compacts; peut être masqués si souhaité */
  #presentation .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  #presentation .kpi .val {
    font-size: clamp(15px, 4.8vw, 18px);
  }

  #presentation .kpi .lab {
    font-size: clamp(10px, 3vw, 12px);
  }

  /* Optionnel: limiter le premier paragraphe si trop long (mobile Safari/Chrome support) */
  #presentation .presentation-text p:first-of-type {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Devis — même layout 50/50 que Présentation, image à gauche, texte à droite */
@media (min-width: 900px) {

  /* Conserve le padding standard pour uniformiser l'espacement des sections */
  #devis {
    /* padding hérité de .slide */
  }

  #devis .quote-inner {
    width: 100%;
    max-width: none;
    padding: 0;
    height: var(--slide-h);
  }

  #devis .quote-grid {
    gap: 0;
    align-items: stretch;
    min-height: var(--slide-h);
  }

  #devis .quote-grid>* {
    height: 100%;
  }

  /* Devis: texte seul (fond retiré), en une colonne, centré */
  #devis .quote-text {
    text-align: center;
    background: transparent;
    padding: clamp(20px, 2.6vw, 32px);
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  #devis .quote-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  /* Centre verticalement le bloc et borne sa largeur pour une lecture optimale */
  #devis .quote-inner {
    display: grid;
    place-items: center;
    min-height: var(--slide-h);
  }

  #devis .quote-text {
    max-width: min(760px, 90vw);
    margin: 0 auto;
  }

  /* Garde les listes lisibles à gauche à l'intérieur du bloc centré */
  #devis .quote-text .list {
    text-align: left;
  }

  #devis .quote-text .grid-2 {
    gap: clamp(12px, 2vw, 20px);
  }
}

/* Devis — fond lisible (mobile/tablette) */
#devis .quote-text {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 16px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (min-width: 900px) {
  #presentation .illus-card {
    height: 100%;
    border-radius: 0;
    margin: 0;
  }

  #presentation .illus-card img {
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
    border-radius: 16px;
  }
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--pill);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 600;
}

/* KPIs pour la présentation */
.kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 8px;
}

.kpi {
  display: grid;
  place-items: center;
  min-width: 86px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.kpi .val {
  font-weight: 800;
  font-size: clamp(14px, 2.2vw, 18px);
  color: var(--accent);
  line-height: 1.05;
}

.kpi .lab {
  font-size: 12px;
  color: var(--muted);
}

.divider {
  height: 1px;
  background: var(--line);
  margin: 12px 0 8px;
  opacity: .8;
}

/* Présentation: titres lisibles sur fond Shoji */
.presentation-text h2, .presentation-text h3 {
  color: var(--heading-color);
}

.presentation-text p {
  color: var(--text);
}


/* Compact cards for Sommaire */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}

.card h3 {
  margin: 0 0 6px;
  font-size: clamp(18px, 2.4vw, 22px);
  color: #fff;
}

.card .list li {
  margin: 4px 0;
}

/* ===== Sommaire: cards en colonne (inspiration Japan Experience) ===== */
.rec-list {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.rec-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.rec-card:hover, .rec-card:focus-within {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .36);
}

/* Améliore la visibilité clavier sur les cartes */
.rec-card:focus-visible {
  outline: none;
  box-shadow: var(--focus), 0 24px 64px rgba(0, 0, 0, .36);
}

.rec-media {
  border-radius: 16px;
  overflow: hidden;
}

.rec-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
}

.rec-body {
  display: grid;
  gap: 8px;
  text-align: center;
  justify-items: center;
}

.rec-title {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  color: #fff;
  text-align: center
}

.rec-desc {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 85%;
  text-align: center
}

.rec-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.rec-cta::after {
  content: '→';
  opacity: .9;
}

.rec-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--pill);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 600;
  font-size: .9rem
}

@media (max-width: 640px) {
  .rec-card {
    grid-template-columns: 1fr;
  }

  .rec-media img {
    aspect-ratio: 16/9;
  }
}

/* Mobile — centrer mieux la carte Sommaire et utiliser toute la largeur utile */
@media (max-width: 640px) {
  #sommaire .carousel-item {
    padding: 0;
  }

  #sommaire .rec-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
}

/* Mobile — remettre une image de fond sur la section #presentation */
/* (supprimé) Mobile: plus d'image CSS forcée pour #presentation; la slide utilise data-bg */

/* (legacy Sommaire card styles removed: replaced by slide-mode styles) */

/* (legacy desktop horizontal variant removed) */

/* ===== Carousel for Sommaire ===== */
.carousel {
  position: relative;
  margin-top: 10px;
  width: 100%;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform .5s ease;
  will-change: transform;
  /* Meilleure prise en charge du swipe tactile et souris */
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.carousel-track.dragging {
  cursor: grabbing;
}

#sommaire .carousel {
  overscroll-behavior-x: contain;
}

.carousel-item {
  flex: 0 0 100%;
  padding: 0;
  /* supprime toute marge pour que la carte et l'image remplissent 100% */
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 100% !important;
  overflow: hidden;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(12, 16, 23, .35);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border-radius: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

[data-theme="light"] .carousel-btn {
  background: rgba(255, 255, 255, .75);
  color: #0e1116;
  border-color: rgba(0, 0, 0, .12);
}

.carousel-btn.prev {
  left: 6px;
}

.carousel-btn.next {
  right: 6px;
}

.carousel-btn:hover {
  filter: brightness(1.05);
}

/* ===== Carousel dots: plus visibles sur tous formats ===== */
/* Carousel dots — même esthétique que les progress-dots (droite) */
.carousel-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(48px, 12vh, 140px);
  display: flex;
  gap: 10px;
  z-index: 3;
}

.carousel-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.carousel-dots button:hover {
  transform: scale(1.15);
}

.carousel-dots button:focus {
  outline: none;
  box-shadow: var(--focus);
}

.carousel-dots button[aria-current="true"] {
  background: #ffffff;
  border-color: #ffffff;
  transform: scale(1.25);
}

/* Pas de variante light: on garde la même esthétique que les progress-dots */

/* Petits écrans: remonte légèrement les dots au-dessus de la zone gestuelle/bars */
@media (max-width: 640px) {
  .carousel-dots {
    bottom: calc(72px + env(safe-area-inset-bottom));
    gap: 10px;
  }

  .carousel-dots button {
    width: 11px;
    height: 11px;
  }
}

/* ===== Sommaire — arrière-plan style Shoji ===== */
#sommaire .slide-bg {
  /* Fond plein rappellant le Shoji; s'adapte au thème (clair/sombre) */
  background: var(--shoji-paper) !important;
}

#sommaire .slide-overlay {
  /* Voile très léger pour la lisibilité du texte, sans masquer la teinte crème */
  background:
    radial-gradient(55% 45% at 50% 25%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 60%),
    linear-gradient(to top, rgba(0, 0, 0, .18), rgba(0, 0, 0, .06) 40%, rgba(0, 0, 0, 0)) !important;
}

[data-theme="light"] #sommaire .slide-overlay {
  background:
    radial-gradient(55% 45% at 50% 25%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 60%),
    linear-gradient(to top, rgba(0, 0, 0, .16), rgba(0, 0, 0, .06) 40%, rgba(0, 0, 0, 0)) !important;
}

/* Présentation & Devis: la slide utilise l'image en arrière-plan via data-bg */

/* (legacy Shoji card styling removed) */

/* ===== Planning — overrides consolidés pour garantir l'image plein cadre ===== */
/* (fusionné avec le bloc "mode slide" ci-dessous pour éviter les conflits) */

/* ===== Planning — mode slide (texte superposé sur l'image) ===== */
/* Garde le carrousel, remplace l'apparence des cartes par une slide visuelle */
#sommaire .rec-card {
  box-sizing: border-box;
  position: relative;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
  /* bord gauche à fleur d'écran, aucun arrondi visible */
  overflow: hidden;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  /* Full-bleed en hauteur dans la slide */
  height: 100% !important;
}

#sommaire .rec-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25) 42%, rgba(0, 0, 0, 0));
  border-radius: inherit;
  /* suit l'arrondi de la carte */
  pointer-events: none;
}

#sommaire .rec-media {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit;
  overflow: hidden;
  border: none;
  margin: 0;
  will-change: transform;
}

#sommaire .rec-media img {
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: auto !important;
}

#sommaire .rec-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(40px, 8vh, 120px);
  /* rehaussé pour éviter les dots par défaut */
  padding: clamp(12px, 3vw, 22px);
  display: grid;
  gap: 8px;
  text-align: left;
  justify-items: start;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 6px 20px rgba(0, 0, 0, .35);
}

/* Tablet/Desktop: panneau lisible en bas-gauche (verre + bordure) */
@media (min-width: 640px) {
  #sommaire .rec-body {
    left: clamp(12px, 4vw, 48px);
    right: auto;
    max-width: min(760px, 92vw);
    /* Fond retiré sur demande: conserve seulement le positionnement */
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
}

/* Mobile/Tablet: s'assure que le bloc passe au-dessus des dots */
@media (max-width: 900px) {
  #sommaire .rec-body {
    bottom: calc(110px + env(safe-area-inset-bottom));
  }
}

/* Desktop: légèrement plus haut pour un meilleur équilibre visuel */
@media (min-width: 900px) {
  #sommaire .rec-body {
    bottom: clamp(56px, 10vh, 160px);
  }
}

#sommaire .rec-title {
  color: #ffffff !important;
  text-align: left !important;
}

#sommaire .rec-desc {
  color: #ffffff !important;
  text-align: left !important;
  max-width: 92%;
  -webkit-line-clamp: 4;
}

#sommaire .rec-pill {
  background: rgba(0, 0, 0, .35) !important;
  border-color: rgba(255, 255, 255, .28) !important;
  color: #fff !important;
}

@media (max-width: 640px) {
  #sommaire .rec-body {
    text-align: center;
    justify-items: center;
  }

  #sommaire .rec-title, #sommaire .rec-desc {
    text-align: center !important;
  }
}

/* Étendre la card à la taille de la section et superposer titre/tags */
#sommaire {
  /* Full-bleed horizontal, parallax conservé; padding vertical géré par variables si besoin */
  --slide-pad-x: 0;
  /* Laisse --slide-pad-y non défini pour garder le comportement plein écran du carrousel */
  place-items: stretch;
}

#sommaire .slide-inner {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: var(--slide-h);
  /* Variables d'espacement pour titre et tags (ajustables) */
  --sommaire-title-offset: clamp(36px, 4.5vw, 64px);
  --sommaire-tags-gap: clamp(8px, 2.8vh, 24px);
}

#sommaire .carousel {
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 1;
  /* sous le titre/tags, au-dessus des overlays */
  /* 100% pour éviter le décalage lié à 100vw/scrollbar */
  width: 100%;
  left: 0;
  transform: none;
}

#sommaire .carousel-track,
#sommaire .carousel-item {
  height: 100%;
}

/* Évite tout décalage dû à des marges/paddings implicites */
#sommaire .carousel-track {
  margin: 0;
  padding: 0;
}

/* Chaque item occupe toute la largeur du conteneur */
#sommaire .carousel-item {
  flex: 0 0 100% !important;
  width: 100% !important;
}

#sommaire .slide-inner>h2 {
  position: absolute;
  top: var(--slide-pad);
  /* aligne l’entête avec le padding standard des slides */
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 6px 20px rgba(0, 0, 0, .35);
}

#sommaire .slide-inner>.tags {
  position: absolute;
  /* place les tags sous le titre avec un gap responsive */
  top: calc(var(--slide-pad) + var(--sommaire-title-offset) + var(--sommaire-tags-gap));
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}

/* Mobile & tablette: titres et tags mieux agencés, non centrés pour éviter la superposition */
@media (max-width: 900px) {

  /* Titre compact en haut-gauche, fond semi-transparent pour lisibilité */
  #sommaire .slide-inner>h2 {
    left: 12px;
    right: auto;
    transform: none;
    top: calc(env(safe-area-inset-top) + 72px);
    /* abaisse davantage pour dégager le header */
    text-align: left;
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1.2;
    display: inline-block;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    max-width: calc(100vw - 24px);
  }

  /* Tags en bandeau défilant horizontal sous le titre */
  #sommaire .slide-inner>.tags {
    left: 12px;
    right: 12px;
    transform: none;
    top: calc(env(safe-area-inset-top) + 72px + 64px);
    /* espace accru sous le titre */
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 6px;
    justify-content: flex-start;
  }

  #sommaire .slide-inner>.tags::-webkit-scrollbar {
    display: none;
  }

  #sommaire .slide-inner>.tags .tag {
    white-space: nowrap;
  }
}

/* Très petits écrans: abaisse encore un peu pour éviter tout chevauchement */
@media (max-width: 640px) {
  #sommaire .slide-inner>h2 {
    top: calc(env(safe-area-inset-top) + 84px);
  }

  #sommaire .slide-inner>.tags {
    top: calc(env(safe-area-inset-top) + 84px + 64px);
  }
}

/* (ratio forcé retiré: plein écran en hauteur/largeur) */

/* Ajuste les variables sur petits écrans très compacts */
@media (max-width: 480px) {
  #sommaire .slide-inner {
    --sommaire-title-offset: clamp(28px, 6vw, 44px);
    --sommaire-tags-gap: clamp(6px, 2vh, 16px);
  }
}

[data-theme="light"] #sommaire .rec-card {
  border-color: var(--shoji-edge);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .14);
}

[data-theme="light"] #sommaire .rec-card .rec-title {
  color: #1f2937;
}

[data-theme="light"] #sommaire .rec-card .rec-desc {
  color: #374151;
}

[data-theme="light"] #sommaire .rec-card .rec-pill {
  color: #374151;
  background: rgba(0, 0, 0, .04);
  border-color: var(--shoji-edge);
}

/* Carousel buttons: more glassy */
#sommaire .carousel-btn {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.slide h1 {
  margin: 0 0 8px;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.07
}

.slide h2 {
  margin: 0 0 8px;
  font-size: clamp(28px, 3.6vw, 44px)
}

/* Titres: même couleur en light/dark par défaut */
.slide h1, .slide h2, .slide h3, .slide h4, .slide h5, .slide h6 {
  color: var(--heading-color);
}

.slide p {
  margin: 0 auto;
  color: var(--muted)
}

.kicker {
  display: inline-block;
  background: var(--pill);
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600
}

/* Programme: titres H2 dans l'esprit des .kicker */
body[data-page="programme"] .slide-inner h2 {
  display: inline-block;
  background: var(--pill);
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .2px;
  text-shadow: none;
  font-size: clamp(16px, 2.2vw, 24px);
  line-height: 1.2;
  -webkit-hyphens: none;
  hyphens: none;
  word-break: keep-all;
}

/* Light theme: exactly match .kicker look */
[data-theme="light"] body[data-page="programme"] .slide-inner h2 {
  background: var(--pill);
  border-color: var(--line);
  color: var(--muted);
}

/* Dark theme: keep current subtle pill */
[data-theme="dark"] body[data-page="programme"] .slide-inner h2 {
  background: var(--pill);
  border-color: rgba(255, 255, 255, .18);
  color: var(--muted);
}

@media (max-width: 700px) {
  body[data-page="programme"] .slide-inner h2 {
    padding: 6px 10px;
    font-weight: 700;
  }
}

/* Background parallax par slide */
.slide-bg, .slide-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center
}

.slide-bg {
  transform: translate3d(0, 0, 0) scale(1.16);
  /* un peu plus de marge pour éviter tout bord visible */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.slide-overlay {
  z-index: -1;
  background: radial-gradient(80% 60% at 50% 30%, transparent, rgba(0, 0, 0, .35))
}

/* === Palette "on-image" pour texte lisible sur photo === */
/* Par défaut, quand une slide a une image de fond, on adopte une encre claire. */
.slide[data-ink="light"] {
  --text: #ffffff;
  --muted: rgba(255, 255, 255, .9);
  --accent: #ffffff;
  --panel: rgba(255, 255, 255, .14);
  --line: rgba(255, 255, 255, .25);
  --pill: rgba(255, 255, 255, .14);
}

/* CTA en mode on-image: bouton blanc qui ressort bien */
.slide[data-ink="light"] .cta {
  background: #ffffff;
  color: #0b0f14;
}

/* Variante si vous voulez du texte sombre par-dessus une image très claire + overlay fort */
.slide[data-ink="dark"] {
  --text: #0e1116;
  --muted: #4b5563;
  --accent: #111827;
  --panel: rgba(0, 0, 0, .06);
  --line: rgba(0, 0, 0, .15);
  --pill: rgba(0, 0, 0, .06);
}

/* Si vous forcez encre sombre sur image très claire, force les titres en sombre */
.slide[data-ink="dark"] h1,
.slide[data-ink="dark"] h2,
.slide[data-ink="dark"] h3,
.slide[data-ink="dark"] h4,
.slide[data-ink="dark"] h5,
.slide[data-ink="dark"] h6 {
  color: #0e1116;
}

.overlay-bg1 {
  /* Uniquement un voile: l'image reste sur .slide-bg pour éviter le double rendu */
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0));
}

/* Timeline centrée */
.timeline.centered {
  width: var(--content-w);
  margin: 0 auto;
  text-align: left
}

.timeline {
  position: relative
}

.timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line)
}

.step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  margin: 10px 0
}

.dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pill);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  font-weight: 700
}

/* ============ Footer & Toolbar ============ */
footer {
  padding: 16px 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
  /* Esprit verre + coins arrondis en haut */
  background: rgba(12, 16, 23, .24);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid rgba(255, 255, 255, .10);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  overflow: hidden;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .04) inset;
}

/* Aligne le footer avec la marque en plein écran */
@media (min-width: 1200px) {
  footer .container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-left: 6px;
    padding-right: 6px;
  }
}

@media (min-width: 1600px) {
  footer .container {
    padding-left: 4px;
    padding-right: 4px;
  }
}

[data-theme="light"] footer {
  background: rgba(255, 255, 255, .42);
  border-top-color: rgba(0, 0, 0, .06);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset;
}

.toolbar {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1001;
  display: flex;
  gap: 8px
}

/* Language suggestion banner */
.lang-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  background: rgba(12, 16, 23, .32);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

[data-theme="light"] .lang-banner {
  background: rgba(255, 255, 255, .70);
  color: #0e1116;
  border-color: rgba(0, 0, 0, .08);
}

.lang-banner .btn {
  padding: 6px 10px;
  border-radius: 10px;
}

.lang-banner .btn.outline {
  border-color: rgba(255, 255, 255, .6);
}

[data-theme="light"] .lang-banner .btn.outline {
  border-color: rgba(0, 0, 0, .2);
}

/* Dots de progression (clicable) */
.progress-dots {
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
  z-index: 1002;
}

.progress-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.progress-dots button:hover {
  transform: scale(1.15);
}

.progress-dots button:focus {
  outline: none;
  box-shadow: var(--focus);
}

.progress-dots button[aria-current="true"] {
  background: #ffffff;
  border-color: #ffffff;
  transform: scale(1.25);
}

@media (max-width: 480px) {
  .progress-dots {
    right: 8px;
    gap: 8px;
  }
}

/* ============ Effet Shoji (ouverture de porte japonaise) ============ */
.shoji {
  position: fixed;
  inset: 0;
  z-index: 1003;
  pointer-events: none;
  display: none;
}

.shoji.visible {
  display: block;
}

.shoji .panel {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 50vw;
  background: var(--shoji-paper);
  /* Trame façon shoji (lattes) */
  background-image:
    repeating-linear-gradient(90deg, var(--shoji-grid) 0 1px, transparent 1px 110px),
    repeating-linear-gradient(0deg, var(--shoji-grid) 0 1px, transparent 1px 110px);
  box-shadow: inset 0 0 0 2px var(--shoji-frame);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  will-change: transform;
}

.shoji .panel.left {
  right: 50%;
  transform: translateX(0);
  border-right: 2px solid var(--shoji-edge);
}

.shoji .panel.right {
  left: 50%;
  transform: translateX(0);
  border-left: 2px solid var(--shoji-edge);
}

.shoji .panel.left.open {
  transform: translateX(-102%);
  transition: transform 460ms cubic-bezier(.16, 1, .3, 1);
}

.shoji .panel.right.open {
  transform: translateX(102%);
  transition: transform 460ms cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .shoji .panel {
    transition: none !important;
  }
}

/* === Shoji local par slide (fermé par défaut, s'ouvre au survol) === */
.slide .shoji-local {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* au-dessus du contenu pour l'effet, mais pointer-events none */
  pointer-events: none;
}

/* ==== Intro Hinomaru (fond crème + point rouge animé) ==== */
.intro-hinomaru {
  position: fixed;
  inset: 0;
  z-index: 2000;
  /* Pas de fond: l'animation se joue sans voile */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  display: block;
}

/* Variante thème clair: couleur du header (light) */
[data-theme="light"] .intro-hinomaru {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.intro-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e60026;
  /* rouge drapeau japonais */
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .06) inset, 0 8px 28px rgba(0, 0, 0, .28);
  will-change: transform;
}

.slide .shoji-local .panel {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background: var(--shoji-paper);
  background-image:
    repeating-linear-gradient(90deg, var(--shoji-grid) 0 1px, transparent 1px 110px),
    repeating-linear-gradient(0deg, var(--shoji-grid) 0 1px, transparent 1px 110px);
  box-shadow: inset 0 0 0 2px var(--shoji-frame);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  will-change: transform;
  transition: transform 460ms cubic-bezier(.16, 1, .3, 1);
}

.slide .shoji-local .panel.left {
  left: 0;
  transform: translateX(0);
  border-right: 2px solid var(--shoji-edge);
}

.slide .shoji-local .panel.right {
  right: 0;
  transform: translateX(0);
  border-left: 2px solid var(--shoji-edge);
}

/* Ouverture au survol/focus de la slide */
.slide:hover .shoji-local .panel.left,
.slide:focus-within .shoji-local .panel.left {
  transform: translateX(-102%);
}

.slide:hover .shoji-local .panel.right,
.slide:focus-within .shoji-local .panel.right {
  transform: translateX(102%);
}

/* Ouverture pilotée par JS (classe .open) */
.slide .shoji-local.open .panel.left {
  transform: translateX(-102%);
}

.slide .shoji-local.open .panel.right {
  transform: translateX(102%);
}

/* Touch (pas de hover): fermé par défaut, ouverture pilotée par JS (.open) */
@media (hover: none) {
  .slide .shoji-local .panel.left {
    transform: translateX(0);
  }

  .slide .shoji-local .panel.right {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide .shoji-local .panel {
    transition: none;
  }
}

/* Pendant l'ouverture initiale du HERO, désactive l'ouverture au survol sur #top */
body.hero-shoji-opening #top:hover .shoji-local .panel.left,
body.hero-shoji-opening #top:focus-within .shoji-local .panel.left {
  transform: translateX(0);
}

body.hero-shoji-opening #top:hover .shoji-local .panel.right,
body.hero-shoji-opening #top:focus-within .shoji-local .panel.right {
  transform: translateX(0);
}

/* Pendant l'ouverture shoji initiale, on masque les shoji locaux pour éviter un double effet */
body.shoji-opening .slide .shoji-local {
  display: none !important;
}

/* ============ Responsive ============ */
@media (max-width:720px) {
  .nav .links {
    display: none
  }

  .slides {
    scroll-snap-type: y proximity
  }
}

/* ============ Responsive — petits écrans (≤ 480px) ============ */
@media (max-width: 480px) {
  :root {
    --slide-pad: 18px;
    --content-w: 92vw;
  }

  .nav .inner {
    padding: 8px 12px;
    gap: 10px;
  }

  .brand {
    font-size: 0.95rem;
  }

  .btn {
    font-size: 0.95rem;
    padding: 9px 11px;
  }

  .btn.cta {
    padding: 9px 12px;
  }

  .kicker {
    padding: 5px 9px;
  }

  .timeline::before {
    left: 10px;
  }

  .step {
    grid-template-columns: 24px 1fr;
    gap: 10px;
  }

  .dot {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
}

/* ============ Responsive — très petits écrans (≤ 360px, ex. iPhone SE) ============ */
@media (max-width: 360px) {
  :root {
    --slide-pad: 16px;
  }

  .nav .inner {
    padding: 6px 10px;
  }

  .brand {
    font-size: 0.9rem;
  }

  .btn {
    font-size: 0.9rem;
    padding: 8px 10px;
  }

  .slide h1 {
    font-size: clamp(26px, 8vw, 56px);
  }

  .slide h2 {
    font-size: clamp(22px, 5.6vw, 36px);
  }

  .step {
    grid-template-columns: 22px 1fr;
    gap: 8px;
  }

  .dot {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
}

/* ============ Hero vidéo (plein écran) ============ */
.hero.slide {
  align-items: end
}

.hero-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1
}

.hero-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03)
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, .15) 35%, rgba(0, 0, 0, 0));
  pointer-events: none
}

@keyframes slow-zoom {
  from {
    transform: scale(1.03)
  }

  to {
    transform: scale(1.07)
  }
}

.hero-video-el {
  animation: slow-zoom 18s ease-in-out infinite alternate
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-el {
    animation: none;
    transform: none
  }
}

/* === Readability boost on HERO video === */
.hero .slide-inner {
  position: relative;
}

/* Stronger bottom gradient for video */
.hero-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.25) 38%, rgba(0, 0, 0, 0));
}

/* Text shadow for titles and lead over video */
.hero .slide-inner h1,
.hero .slide-inner .lead,
.hero .slide-inner p {
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* Lead (sous-titre) plus lisible et mis en avant sur le HERO */
.hero .slide-inner .lead {
  font-size: clamp(16px, 2.4vw, 18px);
  line-height: 1.5;
  margin-top: 8px;
}

.hero .slide-inner .lead strong {
  font-weight: 800;
}

/* Optional: subtle frosted vignette behind the hero text (no HTML change) */
.hero .slide-inner::after {
  content: "";
  position: absolute;
  inset: -8px -12px;
  border-radius: 24px;
  background: radial-gradient(70% 60% at 50% 35%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.22) 60%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: -1;
}

/* Make primary CTA pop more over video */
.hero .cta {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* === Option: panneau "frost" pour texte sur image très chargée === */
.slide[data-panel="frost"] .slide-inner {
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border-radius: 16px;
  padding: clamp(16px, 3vw, 24px);
}

.slide[data-panel="frost"] .slide-inner h1,
.slide[data-panel="frost"] .slide-inner h2,
.slide[data-panel="frost"] .slide-inner p {
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}