/* SiloWeb — système visuel.
 *
 * Refonte complète. L'ancien site était noir, vert, et empruntait tout son
 * vocabulaire à un éditeur de code : onglets, chevrons, chasse fixe,
 * coloration syntaxique. C'était le monde de celui qui fabrique, pas celui
 * du boulanger ou du garagiste qui achète.
 *
 * Ce qui reste : le vert de marque, et lui seul.
 * Ce qui change : le fond, la typographie, la structure, et le principe même
 * de la page d'accueil.
 *
 * La lumière plutôt que la nuit. Val-d'Illiez est à mille mètres, sous les
 * Dents du Midi : la palette vient de là — la neige à l'ombre, la pierre
 * calcaire, et le vert comme seul accent. Sur fond clair, le vert se lit
 * comme une signature ; sur fond noir il devenait une ambiance, et il
 * saturait tout.
 */

/* ------------------------------------------------------------------ jetons */
:root{
  /* Le blanc est légèrement froid et tire imperceptiblement vers le vert.
     Un gris parfaitement neutre aurait l'air d'un réglage par défaut plutôt
     que d'un choix. */
  --jour:#EDF0EC;
  --brume:#DFE4DD;
  --pierre:#A3AEA4;
  --ink:#101A14;
  --vert:#2FA56D;
  --vert-fonce:#1C6B47;
  --vert-pale:#D6E8DE;

  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --texte:"Newsreader",Georgia,serif;

  --eout:cubic-bezier(.19,1,.22,1);
  --einout:cubic-bezier(.76,0,.24,1);

  --pad:clamp(20px,5vw,64px);
  --max:1240px;
}

/* --------------------------------------------------------------- fondation */
*{box-sizing:border-box}
html{background:var(--jour)}
body{
  margin:0;background:var(--jour);color:var(--ink);
  font-family:var(--texte);font-size:clamp(16px,1.05vw,18px);line-height:1.65;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--vert);color:var(--jour)}
input,textarea,button,select{font:inherit;color:inherit}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid var(--vert);outline-offset:3px;border-radius:2px}

/* Les titres sont la matière du site. Bricolage Grotesque, très grasse, avec
   un interlignage inférieur à 1 : à cette échelle les lignes doivent se
   toucher pour former un bloc, pas s'égrener en liste de mots. */
h1,h2,h3,h4{
  font-family:var(--disp);font-weight:800;
  letter-spacing:-.035em;line-height:.92;margin:0;
  text-wrap:balance;
}
p{margin:0}

/* Petites capitales espacées, en linéale : elles remplacent les étiquettes à
   chasse fixe de l'ancien site. */
.mention{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(10px,.78vw,12px);letter-spacing:.18em;text-transform:uppercase;
  color:var(--pierre);
}

/* ------------------------------------------------------------------ tramage
   Une trame de fines verticales, très pâle, posée sur toute la page. Elle
   donne une assise sans jamais vraiment se voir, et rappelle le papier
   millimétré d'un plan. */
.trame{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(16,26,20,.028) 1px,transparent 1px);
  background-size:calc(100vw / 12) 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}

/* --------------------------------------------------------------- en-tête */
/* L'en-tête flotte sans fond pour ne jamais interrompre le plan-séquence.
   Il était en mix-blend-mode:difference, qui le rendait lisible sur clair
   comme sur sombre — mais ce mode inverse aussi les couleurs de marque : le
   vert du logo virait au rose et le contour de « Silo » disparaissait.
   On inverse donc explicitement, et seulement quand un bloc sombre passe
   dessous. C'est un attribut posé par le script, pas un effet automatique. */
.chrome{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:clamp(16px,2.2vw,26px) var(--pad);
  color:var(--ink);
  transition:color .35s var(--eout);
}
.chrome a{color:inherit}
.chrome{--trait:var(--ink)}
.chrome[data-sur-sombre]{color:var(--jour);--trait:var(--jour)}
/* Le logo reprend le fichier de marque : « Silo » en lettres creuses cerclées
   d'un trait, « Web » plein et vert. Il est composé en texte vivant et non en
   image, ce qui permet de le découper lettre par lettre au survol — et lui
   évite de flouter sur les écrans à haute densité. */
.logo{
  position:relative;z-index:2;
  font-family:'Logo',var(--disp),sans-serif;font-weight:800;
  font-size:clamp(19px,1.7vw,24px);letter-spacing:-.005em;line-height:1;
  display:inline-flex;white-space:nowrap;
}
.logo b,.logo i{font-style:normal;font-weight:800;display:inline-flex}
.logo .car{display:inline-block;will-change:transform}
/* Le contour passe par une variable et non par currentColor : dans une règle
   qui pose color:transparent, currentColor vaut justement transparent, et le
   trait devenait invisible. --trait est défini par le contexte — sombre dans
   l'en-tête sur fond clair, clair dans le pied de page. */
.logo b .car{
  color:transparent;
  -webkit-text-stroke:1.4px var(--trait,var(--ink));
  paint-order:stroke fill;
}
.logo i .car{color:var(--vert)}
.pied{--trait:var(--jour)}

/* ── le mot qui tourne dans le titre d'accueil ─────────────────────────────
   Une autre voix typographique : l'italique de la serif au milieu de la
   linéale grasse. Le contraste fait le mot, pas la couleur seule. */
.tourne{
  display:inline-block;position:relative;
  color:var(--vert);
  font-family:'Newsreader Italic',Georgia,serif;font-style:italic;font-weight:400;
  letter-spacing:-.01em;
}
.tourne .fenetre{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.06em;transition:width .5s var(--eout)}
.tourne .mot{display:inline-block;will-change:transform}

/* ── étiquette de haut de page ─────────────────────────────────────────────
   Le nom de la section devient une pastille aux couleurs de la marque plutôt
   qu'une ligne de petites capitales grises : elle ancre la page et elle se
   voit. */
.badge{
  display:inline-block;align-self:flex-start;
  padding:7px 15px 8px;background:var(--vert);color:var(--jour);
  font-family:var(--disp);font-weight:600;
  font-size:clamp(10px,.8vw,12px);letter-spacing:.16em;text-transform:uppercase;
  line-height:1;
}
.chrome nav{display:flex;align-items:center;gap:clamp(14px,2vw,32px)}
.navlink{
  font-family:var(--disp);font-weight:600;font-size:clamp(11px,.85vw,13px);
  letter-spacing:.1em;text-transform:uppercase;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:border-color .4s var(--eout);
}
.navlink:hover,.navlink[aria-current="page"]{border-bottom-color:currentColor}
@media (max-width:760px){.chrome nav > .navlink{display:none}}

/* ── menu mobile ───────────────────────────────────────────────────────────
   Sous 760 px les liens ne tiennent plus dans la barre. Plutôt que de les
   faire disparaître dans le pied de page, on les replie dans un panneau qui
   se déroule depuis le haut. C'est un <details> : il s'ouvre et se ferme sans
   une ligne de JavaScript, et il reste utilisable si le script ne charge pas. */
.menu{display:none;position:relative}
/* Le bouton reste au-dessus du panneau, qui le suit dans le HTML et le
   recouvrirait sinon. */
.menu summary{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:9px;
  font-family:var(--disp);font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;
}
.menu .barres{display:inline-flex;flex-direction:column;gap:4px;width:17px}
.menu .barres i{display:block;height:1.5px;background:currentColor;
  transition:transform .4s var(--eout),opacity .3s var(--eout)}
.menu[open] .barres i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu[open] .barres i:nth-child(2){opacity:0}
.menu[open] .barres i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
/* Le panneau couvre tout l'écran. Il était en z-index:-1, ce qui le plaçait
   derrière la page : on lisait le contenu au travers. */
.menu .panneau-menu{
  position:fixed;inset:0;height:100dvh;overflow-y:auto;
  padding:calc(clamp(16px,2.2vw,26px) + 46px) var(--pad) 30px;
  background:var(--ink);color:var(--jour);
  display:flex;flex-direction:column;gap:2px;
}

/* L'en-tête est en mix-blend-mode:difference pour rester lisible sur clair
   comme sur sombre. Ce mode s'applique à toute sa descendance : le panneau
   ouvert voyait donc ses couleurs inversées — le vert virait au rose. On
   suspend le mélange le temps que le menu est ouvert. */
body[data-menu-ouvert] .chrome{color:var(--jour);--trait:var(--jour)}
.menu .panneau-menu a{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(1.6rem,8vw,2.4rem);letter-spacing:-.03em;line-height:1.25;
  padding:6px 0;
}
.menu .panneau-menu a[aria-current="page"]{color:var(--vert)}
.menu .panneau-menu .filet-menu{height:1px;background:rgba(237,240,236,.16);margin:14px 0}
.menu .panneau-menu small{font-family:var(--disp);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;opacity:.5}
@media (max-width:760px){.menu{display:block}}

/* ---------------------------------------------------------------- boutons */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--disp);font-weight:600;font-size:clamp(13px,1vw,15px);
  letter-spacing:.02em;padding:16px 30px;
  background:var(--ink);color:var(--jour);
  transition:background .4s var(--eout),color .4s var(--eout);
}
.btn:hover{background:var(--vert);color:var(--jour)}
.btn-clair{background:transparent;color:var(--ink);
           box-shadow:inset 0 0 0 1px var(--ink)}
.btn-clair:hover{background:var(--ink);color:var(--jour);box-shadow:none}
.fl{transition:transform .4s var(--eout);display:inline-block}
.btn:hover .fl,.lien-fleche:hover .fl{transform:translateX(6px)}

/* Lien en très gros caractères, dont le soulignement se dessine au survol. */
.lien-fleche{
  display:inline-flex;align-items:baseline;gap:14px;
  font-family:var(--disp);font-weight:800;
  font-size:clamp(1.4rem,3.2vw,2.6rem);letter-spacing:-.03em;line-height:1;
  padding-bottom:6px;background-image:linear-gradient(var(--vert),var(--vert));
  background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .5s var(--eout),color .35s var(--eout);
}
.lien-fleche:hover{color:var(--vert);background-size:100% 2px}

/* ------------------------------------------------------------- structure */
.enveloppe{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad);
           position:relative;z-index:1}
.bloc{padding:clamp(70px,11vh,150px) 0}
.filet{height:1px;background:var(--pierre);opacity:.5;border:0;margin:0}

.titre-geant{
  font-size:clamp(2.6rem,9vw,7.5rem);line-height:.86;letter-spacing:-.045em;
  margin-bottom:clamp(20px,3vh,40px);
}
.titre-moyen{font-size:clamp(1.8rem,4.6vw,3.4rem);margin-bottom:clamp(16px,2.4vh,30px)}
.titre-petit{font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.05}

.intro{font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.55;max-width:36ch}
.prose{max-width:62ch;display:flex;flex-direction:column;gap:1.1em}
.prose p{line-height:1.7}
.prose strong{font-weight:600}
.prose em{font-style:normal;color:var(--vert);font-weight:500}
.prose h3{font-size:clamp(1.2rem,2vw,1.6rem);margin-top:.6em}
.sourdine{color:var(--pierre)}

/* Deux colonnes décalées en escalier. La mise en page ne doit jamais être une
   grille de rectangles alignés — c'était le reproche fait à la version
   précédente, et c'est ce qui fait qu'un site ressemble à tous les autres. */
.paire{
  display:grid;gap:clamp(28px,5vw,80px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start;
}
.paire > *:last-child{padding-top:clamp(0px,4vw,60px)}
@media (max-width:820px){
  .paire{grid-template-columns:1fr}
  .paire > *:last-child{padding-top:0}
}

/* ------------------------------------------------------------------ tarifs
   Un registre, pas des cartes. Chaque offre est une ligne : le nom, ce
   qu'elle couvre, le prix. Les prix s'alignent en colonne et se comparent
   d'un seul regard de haut en bas — ce qu'une rangée de rectangles côte à
   côte ne permet jamais. */
.registre{border-top:1px solid var(--ink)}
.ligne-tarif{
  display:grid;gap:clamp(14px,3vw,48px);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;
  padding:clamp(26px,4vh,46px) 0;border-bottom:1px solid var(--pierre);
  transition:background .4s var(--eout);
}
.ligne-tarif:hover{background:var(--brume)}
.ligne-tarif .nom{font-family:var(--disp);font-weight:800;
  font-size:clamp(1.5rem,3.4vw,2.6rem);letter-spacing:-.035em;line-height:.95}
.ligne-tarif .desc{font-size:.98rem;line-height:1.6}
.ligne-tarif .desc ul{margin:14px 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:6px 16px}
.ligne-tarif .desc li{font-size:.86rem;color:var(--pierre);
  font-family:var(--disp);font-weight:500}
.ligne-tarif .desc li::before{content:"— ";color:var(--vert)}
.ligne-tarif .somme{
  font-family:var(--disp);font-weight:800;text-align:right;white-space:nowrap;
  font-size:clamp(1.5rem,3.4vw,2.6rem);letter-spacing:-.04em;line-height:.95;
  font-variant-numeric:tabular-nums;
}
.ligne-tarif .somme small{display:block;font-size:.36em;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--pierre);margin-top:8px}
.ligne-tarif.mise .nom{color:var(--vert)}
@media (max-width:760px){
  .ligne-tarif{grid-template-columns:1fr auto;gap:10px 20px}
  .ligne-tarif .desc{grid-column:1 / -1}
}

/* --------------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--pierre)}
.faq summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:clamp(20px,2.6vh,30px) 0;
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.05rem,1.7vw,1.35rem);letter-spacing:-.02em;line-height:1.2;
  transition:color .3s var(--eout);
}
.faq summary:hover{color:var(--vert)}
.faq .signe{flex:none;font-family:var(--disp);font-weight:400;font-size:1.4em;
  line-height:1;transition:transform .45s var(--eout);color:var(--vert)}
.faq details[open] .signe{transform:rotate(45deg)}
.faq .reponse{padding:0 0 clamp(22px,3vh,34px);max-width:60ch}

/* ---------------------------------------------------------------- formulaire */
.champ{display:flex;flex-direction:column;gap:8px;min-width:0}
.champ span{font-family:var(--disp);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pierre)}
.champ input,.champ textarea{
  width:100%;min-width:0;padding:12px 0;border:0;
  border-bottom:1px solid var(--pierre);background:transparent;border-radius:0;
  transition:border-color .3s var(--eout);
}
.champ input:focus,.champ textarea:focus{border-bottom-color:var(--vert);outline:none}
.champ textarea{resize:vertical;min-height:120px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,32px)}
.pot-de-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:620px){.duo{grid-template-columns:1fr}}

/* ------------------------------------------------------------- pied de page */
.pied{background:var(--ink);color:var(--jour);padding:clamp(56px,9vh,110px) 0 32px;
      position:relative;z-index:1}
.pied a:hover{color:var(--vert)}
.pied .mention{color:rgba(237,240,236,.42)}
.pied-grille{display:grid;gap:clamp(28px,4vw,60px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.pied ul{margin:12px 0 0;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:7px}
.pied-bas{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;
  align-items:center;margin-top:clamp(40px,6vh,70px);padding-top:24px;
  border-top:1px solid rgba(237,240,236,.16);font-size:.85rem;
  color:rgba(237,240,236,.5)}

/* -------------------------------------------------------------- WhatsApp */
/* Le bouton flottant est volontairement discret. En pastille large, il
   recouvrait la colonne des prix, qui est justement ce qu'on vient lire.
   Il ne s'ouvre qu'au survol. */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:55;
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 15px;background:var(--vert);color:var(--jour);
  font-family:var(--disp);font-weight:600;font-size:12.5px;
  box-shadow:0 10px 30px rgba(16,26,20,.18);
  transition:transform .4s var(--eout),padding .4s var(--eout);
}
.wa:hover{transform:translateY(-2px);color:var(--jour)}
.wa b{font-weight:600}
.wa span span{display:none}
.wa:hover span span{display:inline;font-weight:400;opacity:.78;margin-left:6px}
@media (max-width:620px){.wa{right:12px;bottom:12px;padding:11px 15px;font-size:12px}}

/* ------------------------------------------------------------------ divers */
.saut{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;
      background:var(--vert);color:var(--jour);font-family:var(--disp)}
.saut:focus{left:12px;top:12px}
.tete-page{padding:calc(clamp(70px,12vh,120px) + 40px) 0 clamp(30px,5vh,60px)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════════ l'accueil : la descente
 *
 * Une caméra fixe, un monde qui recule. La scène est plaquée sur l'écran
 * pendant toute la durée de la piste ; les plans sont posés à des profondeurs
 * différentes et traversent l'objectif un par un.
 *
 * perspective sur le cadre, preserve-3d sur le monde : c'est tout ce que
 * demande un plan-séquence en CSS. Le reste est du texte.
 */
.scene{
  position:fixed;inset:0;z-index:2;overflow:hidden;
  perspective:900px;perspective-origin:50% 46%;
  pointer-events:none;
}
.monde{
  position:absolute;inset:0;transform-style:preserve-3d;
  will-change:transform;
}
.plan{
  position:absolute;left:50%;top:50%;
  transform:translate3d(-50%,-50%,0);
  width:max-content;max-width:94vw;
  visibility:hidden;pointer-events:auto;
}
/* Les plans se croisent en profondeur : celui qu'on regarde doit toujours
   passer devant celui qui arrive derrière. */
.plan-porte,.ouverture{z-index:2}

/* Le verbe : la matière du site. Aussi grand que l'écran le permet, cadré
   serré, il devient un mur qu'on franchit plutôt qu'un titre qu'on lit. */
.verbe{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(4.5rem,19vw,17rem);line-height:.78;letter-spacing:-.055em;
  color:var(--ink);white-space:nowrap;margin:0;
  display:block;
}
.verbe em{font-style:normal;color:var(--vert)}
/* Le trait sous le verbe se dessine quand on approche le pointeur : c'est le
   seul signe qu'un mot est aussi une porte. */
.plan-porte .verbe{
  background-image:linear-gradient(var(--vert),var(--vert));
  background-size:0 .06em;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .55s var(--eout),color .4s var(--eout);
}
.plan-porte:hover .verbe{background-size:100% .06em;color:var(--vert)}
.plan-porte .sous{
  display:flex;align-items:baseline;gap:14px;margin-top:clamp(10px,1.4vh,20px);
  font-family:var(--disp);font-weight:600;
  font-size:clamp(12px,1.15vw,16px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--pierre);
}
.plan-porte:hover .sous{color:var(--ink)}

/* Panneau de texte : ce qui se lit entre deux verbes. Étroit, aligné à
   gauche, jamais centré — un paragraphe centré ne se lit pas. */
.panneau{max-width:min(46ch,86vw);text-align:left}
.panneau .titre-petit{margin-bottom:14px}
.panneau p{font-size:clamp(1rem,1.35vw,1.3rem);line-height:1.55}

/* Premier écran. Il ne recule pas comme les autres : il tient la marque et
   doit rester lisible le temps qu'on comprenne où l'on est. */
.ouverture{max-width:none}
.ouverture h1{
  font-size:clamp(2.6rem,11vw,10rem);line-height:.82;letter-spacing:-.05em;
  margin:0;
}
/* Chaque ligne est un masque de la hauteur d'une ligne, et son contenu monte
   depuis le dessous. Sans white-space:nowrap le titre se coupait au milieu
   des mots : .ouverture portait une largeur en « ch », unité calculée sur la
   police du texte courant et non sur celle du titre, soit dix fois trop
   étroite. */
.ouverture .ligne{display:block;overflow:hidden;white-space:nowrap}
.ouverture .ligne > span{display:block;transform:translateY(110%)}
.ouverture .accroche{
  margin-top:clamp(16px,2.6vh,32px);max-width:32ch;
  font-size:clamp(1rem,1.4vw,1.35rem);line-height:1.5;
  opacity:0;
}

/* La piste : un vide qui n'existe que pour donner sa distance au scroll. */
.piste{position:relative;z-index:1}

/* Graduation de progression, en bas à gauche. Elle nomme le passage en cours
   plutôt que d'afficher un pourcentage, qui n'aurait rien dit du contenu. */
.graduation{
  position:fixed;left:var(--pad);bottom:clamp(20px,3.5vh,40px);z-index:58;
  display:flex;flex-direction:column;gap:9px;pointer-events:none;
}
.graduation li{
  display:flex;align-items:center;gap:11px;list-style:none;
  font-family:var(--disp);font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--pierre);transition:color .5s var(--eout);
}
.graduation li::before{
  content:"";width:20px;height:1px;background:currentColor;
  transition:width .6s var(--eout);
}
.graduation li[data-actif]{color:var(--ink)}
.graduation li[data-actif]::before{width:44px;background:var(--vert)}
@media (max-width:760px){.graduation{display:none}}

/* Repli : sans JavaScript, sans GSAP, ou en mouvement réduit, la scène
   redevient une page verticale ordinaire. Le contenu ne dépend jamais de
   l'animation pour être atteignable. */
.scene[data-plat]{
  position:static;perspective:none;overflow:visible;height:auto;
  padding:calc(clamp(70px,12vh,120px) + 40px) var(--pad) 0;
}
.scene[data-plat] .monde{position:static;transform:none!important;display:flex;
  flex-direction:column;gap:clamp(50px,9vh,110px);align-items:flex-start}
.scene[data-plat] .plan{position:static;transform:none!important;
  visibility:visible!important;opacity:1!important;max-width:100%}
.scene[data-plat] .verbe{font-size:clamp(3rem,11vw,7rem)}
.scene[data-plat] ~ .piste{display:none}
.scene[data-plat] .ouverture .ligne > span{transform:none}

/* Sur téléphone, la perspective ramène tous les plans vers le centre : les
   écarts latéraux exprimés en vw n'y séparent plus rien. On y renonce donc,
   on cale tout à gauche, et on réduit les corps pour que chaque plan tienne
   sur un écran sans en toucher un autre. */
@media (max-width:760px){
  .scene{perspective:620px;perspective-origin:50% 44%}
  .plan{margin-left:0!important;margin-top:0!important;max-width:88vw}
  .verbe{font-size:clamp(3.2rem,21vw,7rem);line-height:.82}
  .ouverture h1{font-size:clamp(2.4rem,13.5vw,5rem)}
  .ouverture .accroche{font-size:1rem;max-width:26ch}
  .panneau{max-width:88vw}
  .panneau p{font-size:1rem}
}

/* Le verre. Une seule toile, fixe, entre le fond de page et les mots : elle
   doit être derrière la typographie et devant la trame, sans jamais capter
   le pointeur. */
.verre{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;display:block;
}