/* =========================================================
   Accueil V2 — Clair-obscur retravaillé (retours des 01 et 02/11/2026)
   S'ajoute à base.css.
   Tailles : Boska = hero / section / card ; Clash Display = small / body / label
   Fonds de blocs : blanc cassé → beige clair → olive, jamais deux fois de suite
   ========================================================= */
:root { interpolate-size: allow-keywords; }
.theme-v2 {
  --linen: #F3EDE6;            /* beige très clair */
  --chocolate: #1C120F;        /* brun café très foncé (footer) */

  --bg: var(--chalk);
  --bg-contrast: var(--night);
  --ink: var(--night);
  --ink-contrast: var(--chalk);
  --accent: var(--taupe);
  --nav-ink: var(--chalk);
  --footer-bg: var(--chocolate);
  --footer-ink: var(--chalk);
  --footer-accent: var(--almond);
  --btn-fill: var(--night);
  --btn-ink: var(--chalk);
  --grain: .1;

  /* Clash Display : 3 tailles seulement */
  --fs-small: .8125rem;                          /* interface, boutons, légendes */
  --fs-sub: var(--fs-small);
  --fs-label: clamp(1.15rem, 1.6vw, 1.45rem);    /* intitulés de section */
}
.theme-v2 .sub { letter-spacing: .16em; }

/* Photos : noir & blanc sépia partout, angles droits */
.theme-v2 .offer__media img,
.theme-v2 .about__media img,
.theme-v2 .elastic__item img { filter: grayscale(1) sepia(.3) contrast(1.05); }

/* ---------- Fonds des blocs ---------- */
.theme-v2 .manifesto, .theme-v2 .about-section { --bg: var(--chalk); }
.theme-v2 .offers-section { --bg: var(--linen); }
.theme-v2 .approach, .theme-v2 .faq-section, .theme-v2 .cta-section { --bg: var(--olive); --ink: var(--chalk); --accent: var(--almond); }

/* ---------- Intitulés de section (uniformes, précédés d'un trait) ---------- */
.label {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink);
}
.section__label { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.section__label::before { content: ""; flex: none; width: 2.5rem; height: 1px; background: currentColor; }

/* ---------- Boutons : un seul modèle, compact ---------- */
.theme-v2 .btn, .theme-v2 .nav__cta { padding: .6rem 1.15rem .6rem 1.3rem; gap: .7rem; line-height: 1.3; }
.theme-v2 .btn__arrow { width: 1.1rem; }
.theme-v2 .btn:hover .btn__arrow { width: 1.6rem; }

/* ---------- Navigation : Accueil | 3 prestations au centre | Journal, Contact + bouton ---------- */
/* Logo · Accueil · Nos prestations · Journal · Contact · bouton : espaces tous égaux */
.nav__inner--v2 { display: flex; align-items: center; justify-content: space-between; gap: 0; }
.nav__main { flex: 1; justify-content: center; gap: clamp(1.6rem, 2.4vw, 2.25rem) !important; }
.theme-v2 .nav__links { letter-spacing: .1em; }

/* Menu déroulant « Nos prestations » */
.nav__dd { position: relative; }
.nav__dd > a { display: inline-flex; align-items: center; gap: .6rem; }
.chevron {
  display: inline-block; width: .45rem; height: .45rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg); transition: transform .5s var(--ease);
}
.nav__dd:hover .chevron, .nav__dd:focus-within .chevron { transform: translateY(25%) rotate(-135deg); }
.theme-v2 .nav__dd > a::after { display: none; }
.nav__dd-menu {
  position: absolute; left: 50%; top: 100%; z-index: 2;
  min-width: 15rem; padding: 1.4rem 0 0;          /* le haut transparent relie le lien au menu */
  transform: translate(-50%, .5rem); opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.nav__dd-menu::before {
  content: ""; position: absolute; inset: 1.4rem 0 0; z-index: -1;
  background: var(--chalk); box-shadow: 0 18px 40px -20px rgba(24, 22, 17, .45);
}
.nav__dd-menu li a { display: block; padding: .7rem 1.4rem; color: var(--night); }
.nav__dd-menu li:first-child a { padding-top: 1.2rem; }
.nav__dd-menu li:last-child a { padding-bottom: 1.2rem; }
.nav__dd-menu li a::after { display: none; }
.nav__dd-menu li a:hover { color: var(--taupe); }
.nav__dd:hover .nav__dd-menu, .nav__dd:focus-within .nav__dd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.theme-v2 .btn { white-space: nowrap; letter-spacing: .1em; }
.theme-v2 .nav__links a { white-space: nowrap; }
.theme-v2 .nav__logo svg { width: clamp(8rem, 10vw, 10rem); }
/* Petits logos : à cette taille, les déliés (barre du A, jambages fins du M) font moins d'un pixel et disparaissent.
   Un contour très fin (≈ 0,4 px à l'écran, en unités du dessin) les rend visibles sans alourdir les lettres. */
.theme-v2 .nav__logo svg { stroke: currentColor; stroke-width: 45; stroke-linejoin: round; }
.theme-v2 .footer__mark { stroke: currentColor; stroke-width: 28; stroke-linejoin: round; }
.theme-v2 .nav .btn { --btn-fill: var(--chalk); --btn-ink: var(--night); }
.theme-v2 .nav.is-solid { background: color-mix(in srgb, var(--chalk) 90%, transparent); color: var(--night); }
.theme-v2 .nav.is-solid .btn { --btn-fill: var(--night); --btn-ink: var(--chalk); }
/* Le logo est déjà en grand dans le hero : il n'apparaît dans la barre qu'après */
.theme-v2 .nav__logo { transition: opacity .6s var(--ease); }
.theme-v2 .nav:not(.is-solid) .nav__logo { opacity: 0; pointer-events: none; }
.menu-open .nav__logo { opacity: 1 !important; pointer-events: auto !important; }
.theme-v2 .menu .btn { --btn-fill: var(--chalk); --btn-ink: var(--night); }
.theme-v2 .menu ul { gap: .2rem; }

/* ---------- Retour en haut ---------- */
.to-top {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 60;
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--night) 78%, transparent); color: var(--chalk);
  backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(1rem); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease), background-color .3s;
}
.past-hero .to-top { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--night); }
.to-top svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Hero ---------- */
.theme-v2 .hero { color: var(--chalk); background: var(--night); }
.theme-v2 .hero__media img { filter: grayscale(1) sepia(.35) contrast(1.08) brightness(.72); }
.theme-v2 .hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(24, 22, 17, .5), rgba(24, 22, 17, .2) 75%),
              linear-gradient(to top, rgba(24, 22, 17, .55), transparent 45%);
}
.theme-v2 .hero__content { align-self: center; justify-items: center; text-align: center; gap: 2rem; padding-block: 7rem 5rem; }
.hero__title { width: min(100%, 66rem); }
.hero__logo { display: block; width: 100%; height: auto; overflow: visible; clip-path: inset(-10% -2% -3% -2%); } /* masque : les lettres montent de derrière (marge en bas pour ne pas rogner les empattements) */
.js .hero__title { opacity: 0; }
.hero__services { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.1rem; }
.hero__services li + li::before { content: "–"; margin-right: 1.1rem; }
.theme-v2 .hero .btn { --btn-fill: var(--chalk); --btn-ink: var(--night); }
.rise-mask { overflow: hidden; padding: .1em .2em; }
.js [data-rise] { transform: translateY(110%); }

/* Indicateur « Défiler » : trait animé terminé par une flèche */
.theme-v2 .hero__scroll::after { content: none; }
.hero__scroll-line { position: relative; display: block; width: 7px; height: 3.5rem; }
/* Trait + flèche forment un seul élément, animé d'un bloc : il se dessine vers le bas puis s'efface */
.hero__scroll-line { animation: scrollArrow 2.4s var(--ease) infinite; }
@keyframes scrollArrow {
  0%   { clip-path: inset(0 -6px 100% -6px); }
  50%  { clip-path: inset(0 -6px -6px -6px); }
  100% { clip-path: inset(100% -6px -6px -6px); }
}
.hero__scroll-line::before {
  content: ""; position: absolute; left: 3px; top: 0; bottom: 1px; width: 1px; background: currentColor;
}
.hero__scroll-line::after {
  content: ""; position: absolute; left: 0; bottom: 1px; width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg);
}

/* ---------- La maison ---------- */
.theme-v2 .manifesto__text { max-width: none; }
.theme-v2 .manifesto__text .line { display: block; }
.theme-v2 .manifesto__text .w { opacity: 1; }
.js .theme-v2 [data-blurscrub] .w { opacity: .35; filter: blur(10px); will-change: filter, opacity; }
/* La signature s'aligne sur le bord droit du texte (le bloc prend la largeur de sa plus longue ligne) */
.manifesto__body { width: fit-content; max-width: 100%; }
.theme-v2 .manifesto__sign { margin-top: clamp(2rem, 4vw, 3rem); justify-content: flex-end; text-align: right; color: var(--ink-soft); }

/* ---------- Nos prestations ---------- */
.theme-v2 .offer { display: flex; flex-direction: column; gap: 1.2rem; }
.theme-v2 .offer__media { margin-bottom: .4rem; }
.theme-v2 .offer:hover .offer__media img { filter: grayscale(0) sepia(.1); }
.theme-v2 .offer .link { margin-top: auto; align-self: flex-start; }

/* ---------- Notre approche : panneaux élastiques ---------- */
.elastic { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(.5rem, 1vw, 1rem); height: min(78svh, 42rem); }
.elastic__item {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer;
  transition: flex-grow .9s cubic-bezier(.25, 1, .5, 1);
}
.elastic__item.is-active { flex-grow: 4; cursor: default; }
.elastic__item img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.1);
  transition: transform 1.2s var(--ease), filter 1s var(--ease);
}
.theme-v2 .elastic__item:not(.is-active) img { filter: grayscale(1) sepia(.3) contrast(1.05) brightness(.5); }
.theme-v2 .elastic__item:not(.is-active):hover img { filter: grayscale(1) sepia(.3) contrast(1.05) brightness(.65); }
.theme-v2 .elastic__item.is-active img { transform: scale(1); filter: grayscale(0) sepia(.12) contrast(1.02); }
.elastic__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(24, 22, 17, .85), rgba(24, 22, 17, .25) 45%, transparent 70%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.is-active > .elastic__shade { opacity: 1; }
.elastic__content {
  position: absolute; left: 0; bottom: 0;
  width: min(34rem, 100vw - 4rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  display: grid; gap: .8rem; text-align: left;
  color: var(--chalk);
  opacity: 0; transform: translateY(2.5rem);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.is-active > .elastic__content { opacity: 1; transform: none; transition-delay: .25s; }
.elastic__content .body { color: color-mix(in srgb, var(--chalk) 82%, transparent); }
.elastic__num { color: var(--almond); }
/* Carte fermée : « Étape 0X » + titre, à l'horizontale, en bas à gauche */
.elastic__tab {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 5rem clamp(1rem, 1.6vw, 1.5rem) clamp(1rem, 1.6vw, 1.5rem);
  display: grid; gap: .25rem; text-align: left; color: var(--chalk);
  /* léger dégradé noir depuis le bas, pour la lisibilité */
  background: linear-gradient(to top, rgba(12, 11, 9, .72), rgba(12, 11, 9, .35) 55%, rgba(12, 11, 9, 0));
  transition: opacity .4s var(--ease) .45s;
}
.elastic__tab-title { font-size: var(--fs-body); font-weight: 400; line-height: 1.3; }
.is-active > .elastic__tab { opacity: 0; transition-delay: 0s; }

/* ---------- Rencontrer Karla ---------- */
/* Trait vertical entre photo et texte, à égale distance des deux */
.theme-v2 .about { --about-gap: clamp(2rem, 5vw, 5rem); grid-template-columns: 1fr 1fr; gap: var(--about-gap); align-items: center; }
.theme-v2 .about__media .frame { aspect-ratio: 1 / 1; }
.theme-v2 .about__media img { height: 100%; object-position: center; }
.theme-v2 .about__text { position: relative; align-content: center; padding-left: var(--about-gap); }
/* Trait vertical qui s estompe à ses deux extrémités */
.theme-v2 .about__text::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 30%, var(--line) 70%, transparent);
}
.theme-v2 .about__text > * { max-width: 28em; }

/* ---------- Questions fréquentes ---------- */
.faq__list summary .t-card { font-style: italic; }
.theme-v2 .faq__list { border-top: 0; }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding: clamp(.85rem, 1.2vw, 1rem) 0;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary .t-card { color: var(--ink-soft); transition: color .4s var(--ease); }
.faq__list summary:hover .t-card, .faq__list details[open] summary .t-card { color: var(--ink); }
.theme-v2 .faq__icon {
  flex: none; width: .65rem; height: .65rem; margin-right: .3rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  color: var(--ink-soft);
  transform: translateY(-25%) rotate(45deg);
  transition: transform .5s var(--ease), color .4s var(--ease);
}
.theme-v2 .faq__icon::before, .theme-v2 .faq__icon::after { content: none; }
.faq__list summary:hover .faq__icon { color: var(--ink); }
.faq__list details[open] .faq__icon { transform: translateY(25%) rotate(-135deg); }
.theme-v2 .faq__answer { padding: 0 0 clamp(1.6rem, 3vw, 2.4rem); max-width: 44em; }
/* Lien dans une réponse (ex. vers le formulaire de contact) : souligné fin, plus clair que le texte */
.faq__answer a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; transition: opacity .3s; }
.faq__answer a:hover { opacity: .7; }
/* Ouverture en douceur (navigateurs récents) */
.faq__list details::details-content { height: 0; overflow: hidden; transition: height .6s var(--ease), content-visibility .6s allow-discrete; }
.faq__list details[open]::details-content { height: auto; }

/* ---------- Appel final ---------- */
.theme-v2 .cta-section { padding-block: calc(var(--section-y) * .5); }
.theme-v2 .cta-section .btn { --btn-fill: var(--chalk); --btn-ink: var(--olive); }
.theme-v2 .cta { gap: 1.6rem; }
.cta__actions { display: grid; justify-items: center; gap: .75rem; }
.cta__or { color: var(--ink-soft); }
.theme-v2 .cta__contact { display: grid; justify-items: center; gap: .125rem; color: var(--ink); }
.theme-v2 .cta__contact a { transition: opacity .3s; }
.theme-v2 .cta__contact a:hover { opacity: .6; }

/* ---------- Footer dévoilé (principe Solenne) ----------
   Le contenu passe au-dessus avec une ombre portée ;
   le footer, collé en bas de l'écran, se découvre dessous. */
.theme-v2 .page { box-shadow: 0 40px 60px -30px rgba(24, 22, 17, .6); }
.theme-v2 .footer {
  --ink: var(--chalk);
  position: sticky; bottom: 0; z-index: 0;
  min-height: 100svh; display: flex;
  padding-top: clamp(6rem, 12vw, 9rem);
}
.theme-v2 .footer__inner { display: flex; flex-direction: column; justify-content: space-between; gap: 4rem; }
.footer__top { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); }
.footer__brand { display: grid; gap: 1.6rem; align-content: start; }
.footer__mark { display: block; width: clamp(11rem, 16vw, 15rem); height: auto; fill: currentColor; }
.theme-v2 .footer__intro { max-width: 26em; opacity: 1; }
.footer__right {
  display: grid; align-content: space-between; gap: 3rem;
  padding-left: clamp(2rem, 4vw, 4rem);
  border-left: 1px solid color-mix(in srgb, var(--chalk) 25%, transparent);
}
.theme-v2 .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 0; gap: 2rem; }
.theme-v2 .footer__cols ul a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.theme-v2 .footer__bottom { border-top: 0; padding-block: 0; }
.theme-v2 .footer__logo { padding-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav__inner--v2 { display: flex; justify-content: space-between; }
  .nav__inner--v2 .nav__links, .nav__inner--v2 .nav__cta { display: none; }
  .nav__inner--v2 .nav__burger { display: block; }
}
@media (max-width: 960px) {
  .elastic { flex-direction: column; height: 40rem; }
  .elastic__content { width: 100%; }
  .theme-v2 .about { grid-template-columns: 1fr; }
  .theme-v2 .about__text { padding-left: 0; }
  .theme-v2 .about__text::before { display: none; }
  .theme-v2 .footer { position: relative; min-height: 0; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__right { padding-left: 0; border-left: 0; padding-top: 2.5rem; border-top: 1px solid color-mix(in srgb, var(--chalk) 25%, transparent); }
}
@media (max-width: 560px) {
  .hero__services { flex-direction: column; align-items: center; }
  .hero__services li + li::before { content: none; }
  .theme-v2 .footer__cols { grid-template-columns: 1fr 1fr; }
  .elastic { height: 46rem; }
}

/* ---------- Ajustements du 02/11 (soir) ---------- */
/* « Défiler » plus discret que les autres textes du hero */
.theme-v2 .hero__scroll { color: color-mix(in srgb, var(--chalk) 55%, transparent); }

/* FAQ compacte : intitulé à gauche, questions serrées à droite */
.faq-layout { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.theme-v2 .faq-layout .section__label { margin-bottom: 0; }
.theme-v2 .faq-section { padding-block: calc(var(--section-y) * .45); }
.theme-v2 .faq__list summary { padding: .85rem 0; gap: 1.5rem; }
.theme-v2 .faq__list summary .t-card { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.3; }
.theme-v2 .faq__answer { padding-bottom: 1.1rem; }
@media (max-width: 960px) {
  .faq-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* FAQ : aide et contact sous l'intitulé (remplace l'ancien bloc d'appel final) */
@media (min-width: 961px) { .theme-v2 .faq-layout { grid-template-columns: 5fr 7fr; } }
.faq__aside { display: grid; gap: 1.6rem; align-content: start; }
.theme-v2 .faq__aside .section__label { margin-bottom: 0; }
.faq__help { color: var(--ink-soft); }
.faq__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.faq__coords { display: grid; gap: .1rem; color: var(--ink); }
.faq__coords a { transition: opacity .3s; }
.faq__coords a:hover { opacity: .6; }
.theme-v2 .faq-section .btn { --btn-fill: var(--chalk); --btn-ink: var(--olive); }

/* ---------- Thème WordPress (03/11) ---------- */
/* Menu mobile ouvert : la barre devient transparente sur le fond sombre du menu (corrige la barre restée claire) */
.menu-open .theme-v2 .nav.is-solid { background: transparent; backdrop-filter: none; color: var(--chalk); }
.menu-open .theme-v2 .nav .btn { --btn-fill: var(--chalk); --btn-ink: var(--night); }
/* Barre d'administration WordPress (visible seulement quand on est connecté) */
.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .nav { top: 46px; } }

/* ---------- Menu burger (mobile) : 3 traits courts dans une pastille ronde ---------- */
.theme-v2 .nav__burger {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: color-mix(in srgb, var(--night) 38%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.theme-v2 .nav.is-solid .nav__burger { background: color-mix(in srgb, var(--night) 7%, transparent); }
.menu-open .theme-v2 .nav .nav__burger { background: color-mix(in srgb, var(--chalk) 12%, transparent); }
.theme-v2 .nav__burger span { left: calc(50% - .5rem); right: auto; width: 1rem; height: 1.5px; border-radius: 1px; }
.theme-v2 .nav__burger span:nth-child(1) { top: calc(50% - .4rem); }
.theme-v2 .nav__burger span:nth-child(2) { top: calc(50% - .75px); transition: opacity .3s var(--ease); }
.theme-v2 .nav__burger span:nth-child(3) { top: calc(50% + .4rem - 1.5px); }
.menu-open .theme-v2 .nav__burger span:nth-child(1) { top: calc(50% - .75px); transform: rotate(45deg); }
.menu-open .theme-v2 .nav__burger span:nth-child(2) { opacity: 0; }
.menu-open .theme-v2 .nav__burger span:nth-child(3) { top: calc(50% - .75px); transform: rotate(-45deg); }

/* ---------- Rideau entre les pages ----------
   Monte depuis le bas au clic sur un lien, puis repart vers le haut sur la nouvelle page.
   Fond uni, de la même couleur que le footer (choix de Karla du 11 novembre 2026,
   à la place de « Velours doux »). Logo Maison Boucly au milieu. */
.curtain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden;
  display: grid; place-items: center;
  color: var(--chalk);
  background: var(--footer-bg, #1C120F);
  transform: translateY(100%); visibility: hidden;
}
.curtain__logo { position: relative; z-index: 1; width: min(72vw, 26rem); height: auto; overflow: visible; opacity: 0; transform: translateY(1.5rem); }
html.curtain-in .curtain, html.curtain-enter .curtain, html.curtain-leave .curtain { visibility: visible; pointer-events: auto; }
html.curtain-in .curtain { transform: none; }
html.curtain-in .curtain__logo { opacity: 1; transform: none; }
html.curtain-enter .curtain { transform: none; transition: transform .8s cubic-bezier(.76, 0, .24, 1); }
html.curtain-enter .curtain__logo { opacity: 1; transform: none; transition: opacity .5s ease .3s, transform .8s var(--ease) .25s; }
html.curtain-leave .curtain { transform: translateY(-100%); transition: transform .95s cubic-bezier(.76, 0, .24, 1); }
html.curtain-leave .curtain__logo { opacity: 0; transform: translateY(-2rem); transition: opacity .4s ease, transform .9s var(--ease); }
/* Sécurité : si le script ne se lance pas, le rideau d'arrivée disparaît seul après 3 s */
/* Variante crème (couleurs inversées), en alternance avec le fond uni : une page sur deux (main.js) */
html[data-curtain="creme"] .curtain { background: var(--chalk); color: var(--chocolate, #1C120F); }


html.curtain-in .curtain { animation: curtain-safety 0s 3s forwards; }
@keyframes curtain-safety { to { visibility: hidden; pointer-events: none; } }