/* TERRAE — accueil. ÉTAPE 1 : « la fenêtre, la grille, l'encre ».
   1. La scène remplit la fenêtre à toutes les proportions : aucun passe-partout, aucun flou, aucune ombre portée.
   2. Deux plans : le lockup est soudé à la planche (place mesurée sur l'image) ; tout le reste de l'écriture
      appartient à la fenêtre et se pose à ses bords. C'est cette dissociation qui interdit la lecture « photographie ».
   3. Une seule encre, une seule opacité pour tous les écrits ; l'état actif se dit par un filet, jamais par un gris. */
@font-face{font-family:"Cormorant Garamond";src:url(fonts/CormorantGaramond-400-latin.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/CormorantGaramond-italic-400-600-latin.woff2) format("woff2");font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(fonts/BodoniModa-Roman-latin.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --encre:#06100c; --ecrit:#F4F0E8;                    /* UNE seule encre pour tous les écrits */
  --filet-couleur:rgba(244,240,232,.62);
  --serif:"Bodoni Moda","Cormorant Garamond",Didot,"Times New Roman",serif;
  --texte:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  --sans:-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --courbe:cubic-bezier(.2,.7,.2,1);
  /* la grille de la fenêtre (ETAPE_1 §5.1) */
  --marge:clamp(24px,5.95vw,96px);
  --cap-micro:max(11px,.956vw);
  --cap-langue:clamp(13px,2.13vw,26px);
  --cap-menu:clamp(14px,2.02vw,26px);
  --cap-folio:clamp(12px,1.7vw,22px);
  --cap-entrer:clamp(18px,2.6vw,36px);
  /* la loi d'échelle, écrite par page.mjs */
  --s:1; --ox:0px; --oy:0px; --aile:0px;
}
*{box-sizing:border-box}
html{background:var(--encre);color:var(--ecrit);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{margin:0;font-family:var(--texte);font-size:clamp(17px,1.15vw,21px);line-height:1.62;overflow-x:hidden}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saut{position:fixed;left:16px;top:-64px;z-index:60;background:var(--encre);color:var(--ecrit);padding:10px 14px;border:1px solid rgba(244,240,232,.4);font:400 14px/1 var(--sans);transition:top .25s var(--courbe)}
.saut:focus{top:16px}
:where(a,button):focus-visible{outline:1px solid var(--ecrit);outline-offset:6px;box-shadow:0 0 0 3px rgba(6,16,12,.7)}

/* ---------------------------------------------------------------- la scène : elle remplit la fenêtre */
.entree{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--encre)}
/* le canevas du moteur : il occupe exactement la boîte de la scène, il ne reçoit jamais un clic, et il passe
   SOUS toute l'écriture (z-index 1 contre 18/20 pour le mobilier et l'en-tête). Absolu et non fixé : la page
   défile encore vers le film et le site, comme aujourd'hui.
   Un contexte alpha:false naît OPAQUE : le canevas est donc tenu à l'opacité 0 jusqu'à sa première image,
   sans quoi un rectangle noir recouvrirait le repli pendant le chargement des textures. */
#gl{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;pointer-events:none;opacity:0}
/* l'<img>, les ailes CSS et le signe ne cèdent la place qu'une fois la PREMIÈRE image peinte (dataset.peint) :
   sans JavaScript, sans WebGL2 ou sur contexte perdu, la classe n'existe pas et la page reste complète. */
.peint #gl{opacity:1}
.peint .plaque,.peint .aile,.peint .signe{display:none}
.plaque{position:absolute;left:var(--ox);top:var(--oy);width:calc(941px * var(--s));height:calc(1672px * var(--s));
  object-fit:cover;object-position:46.4% 45%;                     /* repli sans JavaScript : la fenêtre est remplie */
  transform:translate3d(var(--px,0),var(--py,0),0);will-change:transform}
.aile{position:absolute;top:var(--oy);width:var(--aile);height:calc(1672px * var(--s));pointer-events:none;
  background-size:calc(2024.09px * var(--s)) calc(1738.88px * var(--s));background-repeat:no-repeat;   /* les ailes RENDUES : la même gorge, même caméra, champ plus large (u −0,5755 → 1,5755, v −0,02 → 1,02) posée à l'échelle exacte : aucune roche étirée, aucune couture */
  transform:translate3d(var(--px,0),var(--py,0),0);will-change:transform}
.aile-g{left:0;background-position:calc(var(--ox) - 541.55px * var(--s)) calc(-33.44px * var(--s))}
.aile-d{right:0;background-position:calc(-1482.55px * var(--s)) calc(-33.44px * var(--s))}
.aile::before{display:none}                                                      /* plus de retournement : la roche des ailes est vraie */
.aile::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(6,16,12,.18),rgba(6,16,12,0))}
.aile-d::after{background:linear-gradient(to left,rgba(6,16,12,.18),rgba(6,16,12,0))}

/* la couche vivante : bulles et brume, au-dessus de la planche et SOUS toute l'écriture, jamais cliquable */
.vivant{position:absolute;inset:0;z-index:1;display:block;pointer-events:none}
.perles{position:absolute;inset:0;z-index:1;display:block;pointer-events:none}   /* les perles passent au-dessus du lieu, sous l'écriture */
/* quand la scène vivante compose les quatre plans, elle remplace la planche : le canevas du moteur et le repli
   passent dessous et ne sont plus peints — une seule image à l'écran, jamais deux qui se recouvrent. */
.vivante #gl,.vivante .plaque,.vivante .aile,.vivante .signe{visibility:hidden}
/* 12 · Makemepulse — ENTRER vient à l'écran : une seule courbe, du lointain jusqu'à la place qu'il gardera */
.seuil{transition:transform .72s var(--courbe),opacity .72s var(--courbe)}
.seuil-pose .seuil{transform:translateX(-50%) scale(1)}
:root:not(.seuil-pose) .seuil{transform:translateX(-50%) scale(.955);opacity:1}

/* le signe : même repère que la planche, mais son propre calque */
.signe{position:absolute;left:var(--ox);top:var(--oy);width:calc(941px * var(--s));height:calc(1672px * var(--s));
  pointer-events:none;transform:translate3d(var(--px,0),var(--py,0),0);will-change:transform}

/* le lockup : soudé à la planche, exactement là où l'image le met.
   z-index 2 : au-dessus du canevas (1), comme TOUTE l'écriture de la page — le moteur ne compose jamais
   par-dessus une lettre, et c'est cette règle qui interdit qu'une hiérarchie typographique devienne un voile. */
.lockup{position:absolute;left:var(--ox);top:var(--oy);width:calc(941px * var(--s));height:calc(1672px * var(--s));pointer-events:none;z-index:2}
.lockup svg{display:block;width:100%;height:100%}
.lockup path,.lockup rect{fill:var(--ecrit)}
.titre{margin:0;font-weight:400}

/* ---------------------------------------------------------------- l'interface : elle appartient à la fenêtre */
.entete{position:fixed;left:var(--marge);right:var(--marge);top:clamp(14px,1.9vh,24px);z-index:20;
  display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
.marque{display:block;width:calc(var(--cap-langue) * 1.75);color:var(--ecrit);flex:none}
.mono{display:block;width:100%;height:auto}
.filet-v{width:1px;height:calc(var(--cap-langue) * 1.5);background:var(--filet-couleur);flex:none}
.filet-v.droite{margin-left:auto}
.langues{display:flex;gap:clamp(10px,1.4vw,24px)}
.langues a,.menu-ouvrir,.coin a,.folio,.entrer,.cmd-mvt{color:var(--ecrit)}
.langues a{position:relative;text-decoration:none;font:400 var(--cap-langue)/1 var(--sans);letter-spacing:.14em;padding:2px 0}
.langues a::after,.menu-ouvrir::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--ecrit);
  transform:scaleX(0);transform-origin:50% 50%;transition:transform .18s var(--courbe)}
.langues a[aria-current]::after,.langues a:hover::after,.langues a:focus-visible::after,.menu-ouvrir:hover::after,.menu-ouvrir:focus-visible::after{transform:scaleX(1)}
.menu-ouvrir{position:relative;background:none;border:0;padding:2px 0;cursor:pointer;font:400 var(--cap-menu)/1 var(--serif);letter-spacing:.02em}
.menu-ouvrir .plus{display:inline-block;font-family:var(--sans);font-weight:300;transition:transform .24s var(--courbe)}
.menu-ouvrir[aria-expanded=true] .plus{transform:rotate(45deg)}

.mobilier{position:fixed;inset:0;z-index:18;pointer-events:none}
.mobilier::before{content:"";position:absolute;left:50%;bottom:0;width:min(620px,74vw);height:clamp(150px,26vh,260px);transform:translateX(-50%);
  background:radial-gradient(60% 72% at 50% 78%,rgba(6,16,12,.52),rgba(6,16,12,0) 72%);pointer-events:none}   /* réserve de contraste sous le seuil */
.mobilier>*{position:absolute;pointer-events:auto}
.coin{margin:0;font:400 var(--cap-micro)/1.9 var(--sans);letter-spacing:.26em;text-transform:uppercase}
.coin a{text-decoration:none;display:inline-block}
.coin a::after{content:"";display:block;width:calc(var(--cap-micro) * 2.6);height:1px;background:var(--filet-couleur);margin-top:calc(var(--cap-micro) * .9);
  transform:scaleX(.45);transform-origin:0 50%;transition:transform .18s var(--courbe)}
.coin a:hover::after,.coin a:focus-visible::after{transform:scaleX(1)}
.coin-hg{left:var(--marge);top:clamp(96px,13.4vh,150px)}
.coin-hd{right:var(--marge);top:clamp(96px,13.4vh,150px);text-align:right}
.coin-hd a::after,.coin-bd a::after{margin-left:auto;transform-origin:100% 50%}
.coin-bg{left:var(--marge);bottom:clamp(36px,5.6vh,64px)}
.coin-bd{right:var(--marge);bottom:clamp(36px,5.6vh,64px);text-align:right}

.seuil{left:50%;transform:translateX(-50%);bottom:clamp(22px,3.4vh,34px);display:flex;flex-direction:column;align-items:center;gap:0}
.folio{margin:0;font:400 var(--cap-folio)/1 var(--serif);letter-spacing:.06em}
.folio sup{font-size:.62em;vertical-align:super}
.filet-vertical{width:1px;height:calc(var(--cap-folio) * 1.1);background:var(--filet-couleur);margin:calc(var(--cap-folio) * .32) 0}
.entrer{font:400 var(--cap-entrer)/1 var(--serif);letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;text-decoration:none}
.filet-entrer{width:calc(var(--cap-entrer) * 5);max-width:40vw;height:1px;background:var(--filet-couleur);margin:calc(var(--cap-entrer) * .45) 0 0;
  transform:scaleX(.68);transition:transform .18s var(--courbe)}
.seuil:hover .filet-entrer,.entrer:focus-visible~.filet-entrer{transform:scaleX(1)}
.chevron{display:block;width:calc(var(--cap-entrer) * .58);margin-top:calc(var(--cap-entrer) * .28);color:var(--ecrit)}
.chevron svg{display:block;width:100%;height:auto}

.commandes{position:fixed;left:var(--marge);bottom:clamp(12px,1.8vh,20px);z-index:19}
.cmd-mvt{background:none;border:0;padding:4px 0;cursor:pointer;font:400 var(--cap-micro)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--filet-couleur)}

/* ---------------------------------------------------------------- le seuil : le survol des vignes */
.descente{position:relative;height:100dvh;min-height:360px;overflow:hidden;background:#040a08;isolation:isolate}
.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04)}
.film-sequence{opacity:0;transition:opacity 1.6s cubic-bezier(.22,.61,.36,1)}
.film-sequence.is-active{opacity:1}
.film-ardoise{position:absolute;right:var(--marge);top:85px;display:grid;gap:4px;max-width:min(36rem,50vw);margin:0;color:var(--ecrit);font:400 10px/1.5 var(--sans);letter-spacing:.1em;text-align:right;text-transform:uppercase;text-shadow:0 1px 8px #000}
.film-index{color:#df7540;font-size:13px;letter-spacing:.22em;font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(223,117,64,.32)}
.film-chapitres{position:absolute;z-index:4;left:var(--marge);right:var(--marge);bottom:62px;height:28px;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(4px,.7vw,10px)}
.film-chapitre{position:relative;min-width:0;height:28px;padding:0;border:0;background:transparent;cursor:pointer}
.film-chapitre::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(244,240,232,.28);transform:translateY(-50%);transition:height .35s var(--courbe),background-color .35s var(--courbe),box-shadow .35s var(--courbe)}
.film-chapitre::after{content:attr(data-flight-number);position:absolute;left:0;top:calc(50% + 4px);color:rgba(244,240,232,.65);font:400 8px/1 var(--sans);letter-spacing:.06em;font-variant-numeric:tabular-nums;transition:color .35s var(--courbe)}
.film-chapitre[data-flight-state="past"]::before{background:rgba(244,240,232,.82)}
.film-chapitre[data-flight-state="past"]::after{color:rgba(244,240,232,.86)}
.film-chapitre[aria-current="step"]::before{height:4px;background:#df7540;box-shadow:0 0 13px rgba(223,117,64,.42)}
.film-chapitre[aria-current="step"]::after{color:#df7540;font-weight:600}
.film-chapitre:hover::before{background:#f4c1a2}
.film-chapitre:hover::after{color:#f4c1a2}
.film-chapitre:focus-visible{outline:1px solid #df7540;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.film-sequence{transition:none}}
.film-voile{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(4,10,8,.25),transparent 28%,transparent 62%,rgba(4,10,8,.72))}
.film-texte{position:absolute;left:0;right:0;bottom:12vh;padding:0 var(--marge);max-width:min(1100px,100vw);margin:0 auto}
.film-texte h2{margin:.6rem 0 0}
.film-controle{position:absolute;right:var(--marge);bottom:clamp(16px,4vh,40px);background:rgba(6,16,12,.45);border:1px solid rgba(244,240,232,.3);
  color:var(--ecrit);font:400 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;cursor:pointer}
.film-controle:hover{border-color:rgba(244,240,232,.62)}
.dans-site .mobilier,.dans-site .commandes{visibility:hidden;pointer-events:none}
.film-texte .chapo{display:none}
.film-texte .sur-titre{margin-bottom:.7rem}
.film-controle{right:auto;left:var(--marge);bottom:25px}
.film-plein{position:absolute;left:calc(var(--marge) + 95px);bottom:25px;background:#06100cb0;border:1px solid #f4f0e850;color:var(--ecrit);font:400 12px/1 var(--sans);padding:9px 14px;cursor:pointer}
.film-prototype{position:absolute;left:var(--marge);top:85px;color:var(--ecrit);font:400 10px/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 8px #000}
.film-suite{position:absolute;right:var(--marge);bottom:30px;color:var(--ecrit);font:400 12px/1.4 var(--sans);text-underline-offset:5px}
.film-message{position:absolute;left:var(--marge);right:var(--marge);top:40%;padding:20px;background:#06100ddd;color:var(--ecrit)}
.descente:fullscreen{width:100vw;height:100vh}
@media(max-width:540px){.film-suite{bottom:78px;left:var(--marge);right:auto}.film-texte{bottom:150px}.film-texte h2{font-size:32px}.film-ardoise{top:auto;right:var(--marge);bottom:136px;max-width:58vw;font-size:9px}.film-index{font-size:11px}.film-chapitres{bottom:74px;height:44px}.film-chapitre{height:44px}}

/* ---------------------------------------------------------------- le site */
.maison,.terres{max-width:min(1100px,88vw);margin:0 auto;padding:16vh 0 12vh}
.sur-titre{margin:0 0 3.2rem;font:400 12px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--ecrit)}
h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(38px,6.4vw,86px);line-height:1.04;letter-spacing:-.01em}
h2{margin:0 0 1.6rem;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,48px);line-height:1.12}
.chapo{max-width:46ch;margin:2.2rem 0 0;font-size:1.18em}
hr{border:0;border-top:1px solid rgba(244,240,232,.18);margin:6vh 0}
.colonnes{display:grid;gap:3.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,34ch),1fr))}
.liste{list-style:none;margin:5vh 0 0;padding:0;border-top:1px solid rgba(244,240,232,.14)}
.liste a{display:flex;flex-wrap:wrap;align-items:baseline;gap:1.4rem;padding:1.5rem .4rem;border-bottom:1px solid rgba(244,240,232,.14);
  color:var(--ecrit);text-decoration:none;transition:padding-left .6s var(--courbe),background-color .6s var(--courbe)}
.liste a:hover,.liste a:focus-visible{padding-left:1.4rem;background:rgba(244,240,232,.045)}
.liste span{font-family:var(--serif);font-size:clamp(22px,2.6vw,34px)}
.liste em{font-style:normal;font-size:.94em}
.pied{max-width:min(1100px,88vw);margin:0 auto;padding:8vh 0 6vh;border-top:1px solid rgba(244,240,232,.14);
  font:400 13px/1.8 var(--sans);letter-spacing:.08em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.pied p{margin:0}
.pied-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.pied-nav a{color:var(--ecrit);text-decoration:none;border-bottom:1px solid rgba(244,240,232,.35);padding-bottom:2px}
.pied-nav a:hover{border-bottom-color:var(--ecrit)}

/* ---------------------------------------------------------------- le menu : un recul dans la gorge, pas un trou noir */
.menu{position:fixed;inset:0;z-index:40}
.menu[hidden]{display:none}
.menu-fond{position:absolute;inset:0;background:rgba(6,16,12,.52);backdrop-filter:blur(6px) saturate(.82) brightness(.88);opacity:0;transition:opacity .7s var(--courbe)}
.menu-corps{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 var(--marge);opacity:0;transform:translateY(12px);
  transition:opacity .7s var(--courbe),transform .9s var(--courbe)}
.menu.la .menu-fond{opacity:1}.menu.la .menu-corps{opacity:1;transform:none}
.menu-fermer{position:absolute;top:clamp(14px,1.9vh,24px);right:var(--marge);background:none;border:0;color:var(--ecrit);font:300 34px/1 var(--sans);cursor:pointer;padding:8px 12px}
.menu ul{list-style:none;margin:0;padding:0;width:max-content;max-width:86vw}
.menu li{border-bottom:1px solid rgba(244,240,232,.12)}
.menu li a{display:block;white-space:nowrap;padding:1.1rem 0;color:var(--ecrit);text-decoration:none;font-family:var(--serif);
  font-size:clamp(24px,2.9vw,40px);line-height:1.1;transition:padding-left .6s var(--courbe)}
.menu li a:hover,.menu li a:focus-visible{padding-left:1rem}
.menu-pied{margin:3rem 0 0;font:400 12px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase}

/* ---------------------------------------------------------------- téléphone : le mobilier descend sous le nom, le chevron se sacrifie */
@media (max-width:560px){
  .seuil{bottom:clamp(58px,9vh,86px)}
  .chevron{display:none}                       /* décoratif : premier sacrifié quand la zone sûre mord */
  .coin-bg,.coin-bd{bottom:max(18px,env(safe-area-inset-bottom))}
  .commandes{display:none}                     /* la commande de mouvement vit dans le menu sur téléphone */
  .menu .cmd-mvt{display:inline-block}
}
.menu .cmd-mvt{display:inline-block;align-self:flex-start;margin-top:2.2rem}

/* mode capture : la référence intacte, sans mobilier ni lockup (recette A1 pendant les étapes 1 et 2) */
.repos .signe,.repos .entete,.repos .mobilier,.repos .lockup,.repos .commandes,.repos .aile,.repos .saut{display:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .plaque,.aile{transform:none!important}
}

/* ======================================================================== LA PARTITION (gabarits/partition.json)
   Les couches d'écriture apparaissent par la lumière seule : opacité pilotée image par image par partition.mjs
   (--p-wordmark, --p-filet, --p-mentions, --p-numero, --p-seuil, --p-entete), jamais par une transition CSS —
   une seule horloge, seek() exact. Acte I (.acte-lieu) : ni signe, ni écriture ; FR/IT/EN et Menu à 0,55 ;
   les commandes d'accessibilité toujours visibles. Le mode ?repos=1 n'est pas concerné. */
:root:not(.repos){--p-wordmark:1;--p-filet:1;--p-mentions:1;--p-numero:1;--p-seuil:1;--p-entete:1}
:root:not(.repos) #marque-terrae,:root:not(.repos) #marque-caravelli{opacity:var(--p-wordmark)}
:root:not(.repos) #marque-trait{opacity:var(--p-filet)}
:root:not(.repos) #marque-patrimoines,:root:not(.repos) #marque-italia,:root:not(.repos) .coin{opacity:var(--p-mentions)}
:root:not(.repos) .folio,:root:not(.repos) .filet-vertical{opacity:var(--p-numero)}
:root:not(.repos) .entrer,:root:not(.repos) .filet-entrer,:root:not(.repos) .chevron{opacity:var(--p-seuil)}
:root:not(.repos) .marque{opacity:var(--p-entete)}
:root:not(.repos) .langues,:root:not(.repos) .menu-ouvrir{opacity:calc(.55 + .45 * var(--p-entete))}
:root:not(.repos) .langues:hover,:root:not(.repos) .menu-ouvrir:hover,:root:not(.repos) .langues:focus-within,:root:not(.repos) .menu-ouvrir:focus-visible{opacity:1}
.coin a,.entrer,.chevron{pointer-events:auto}
:root:not(.repos) .coin[style],:root:not(.repos) .seuil{}
/* tant qu'une couche est à zéro elle ne se clique pas : pas de lien invisible sous la souris */
:root:not(.repos)[data-acte="lieu"] .coin a,:root:not(.repos)[data-acte="effondrement"] .coin a,
:root:not(.repos)[data-acte="lieu"] .marque,:root:not(.repos)[data-acte="effondrement"] .marque,:root:not(.repos)[data-acte="installation"] .marque{pointer-events:none}
/* 23/09 — le visiteur n'est jamais pris en otage : ENTRER et le chevron se cliquent dès la première image */
.corps3d{position:absolute;inset:0;z-index:1;display:block;pointer-events:none;width:100%;height:100%}
/* P7 — l'écriture est peinte par le moteur (grain, vignettage, aberration, vibration communes) : le DOM garde le
   texte pour les lecteurs d'écran et le focus, mais son encre devient transparente une fois la peinture prête. */
.ecriture-peinte .lockup path,.ecriture-peinte .lockup rect{fill:transparent}
.ecriture-peinte .coin a{color:transparent}
.ecriture-peinte .coin a:focus-visible{color:var(--ecrit)}
.ecriture-peinte .coin a::after{opacity:1}

/* ===== HAUT LUXE (24/09, « met le paquet ») — le seuil ne garde que le nom, une ligne et ENTRER ; le reste descend sous le pli ===== */
.entree .coin, .entree .folio, .entree .filet-vertical { display: none }
.commandes { left: auto; right: var(--marge); bottom: clamp(14px, 2vh, 22px) }
.cmd-mvt { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid #f4f0e838; font-size: 0; letter-spacing: 0; position: relative; opacity: .55; transition: opacity .4s var(--courbe), border-color .4s var(--courbe) }
.cmd-mvt::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ecrit); opacity: .9; transition: transform .4s var(--courbe) }
.cmd-mvt[aria-pressed="true"]::before { transform: scale(.55); opacity: .5 }
.cmd-mvt:hover, .cmd-mvt:focus-visible { opacity: 1; border-color: #f4f0e880 }
/* le seuil : magnétique, respiration lente, filet qui s'étire */
.seuil { will-change: transform }
.entrer { display: inline-block; padding: 14px 26px; transition: letter-spacing .9s var(--courbe), transform .6s var(--courbe) }
.entrer:hover, .entrer:focus-visible { letter-spacing: .34em }
/* le curseur (pointeur fin) : la page cache la flèche, un anneau la remplace */
@media (pointer: fine) {
  .entree, .entree a, .entree button { cursor: none }
  .curseur { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid #f4f0e8aa; border-radius: 50%; pointer-events: none; z-index: 60; mix-blend-mode: difference; transition: width .35s var(--courbe), height .35s var(--courbe), margin .35s var(--courbe), opacity .5s; opacity: 0 }
  .curseur.visible { opacity: 1 }
  .curseur.sur-lien { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: #f4f0e8 }
  .curseur::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: #f4f0e8 }
}
/* la ligne d'attente : un fil qui grandit en haut de l'écran tant que le lieu se prépare, puis s'efface */
.fil-attente { position: fixed; left: 0; top: 0; height: 1px; width: 0; background: linear-gradient(90deg, #f4f0e800, #f4f0e8cc 40%, #f4f0e8); z-index: 70; transition: width 1.4s var(--courbe), opacity .8s var(--courbe) }
.fil-attente.fin { width: 100%; opacity: 0 }
@media (prefers-reduced-motion: reduce) { .curseur { display: none } .entree, .entree a, .entree button { cursor: auto } }

/* 25/09 : les ailes de repli (image fixe) ne se téléchargent qu'en repli sans WebGL2 (classe sans-webgl posée par page.mjs) ou sans JavaScript (noscript dans index.html) */
.sans-webgl .aile{background-image:url(plaque/ailes/ailes_intactes.png?v=20260924-ailes)}