/* ============================================================================
   OPAQ — accueil.css
   ----------------------------------------------------------------------------
   La page d'accueil (plan §E.1, revu par R.6 : direction claire), avec les
   images fixes de la pièce. C'est à la fois la version « réduire les
   animations », la version sans WebGL et la base sur laquelle la scène 3D en
   direct se branchera : mêmes boîtes, mêmes ancres.
   Utilise les jetons de jetons.css et les composants de base.css.

      1. Mesures de la page             7. 04 Formules, bandes des formules
      2. Scène, actes, figures          8. 02 Compris
      3. Portrait : fenêtres, feuilles  9. 03 Méthode
      4. Ouverture
      5. Manifeste                     10. Fin (bloc sombre)
      6. 01 En bref                    11. Paysage (MODE)
                                       12. Scène active, impression
   (Ordre de la page, lot 2 du 19/10 : ouverture, manifeste, 01 En bref,
   02 Compris, 03 Méthode, 04 Formules, fin (Références retiré le 20/10). Les numéros de
   sections ci-dessus ne suivent plus cet ordre : d'autres fichiers les citent.)

   Deux mises en page, décidées par MODE et rien d'autre :
     - « portrait » (règles par défaut) : tout est empilé ; le texte est sur
       des feuilles opaques crème ; entre elles, des fenêtres (figure.etat),
       cartes aux coins arrondis, montrent la pièce ;
     - « paysage » (@media MODE, section 11) : texte à gauche (jamais au-delà
       de --partage, la moitié de l'écran), pièce à droite, sans interruption
       de l'ouverture à « 01 En bref » (E0 tenu, div.tenue). Seules les bandes
       des formules prennent toute la largeur ; elles n'ont pas de fond : leur
       mot passe devant la pièce, qui reste entière.
   Règles : seuls transform, opacity et clip-path s'animent ; aucun texte
   n'est jamais posé sur une image ; les figures ne reçoivent jamais de
   transform (ce sont les ancres de la scène) ; aucun texte cuivre sur crème.
   ============================================================================ */

/* 1. Mesures de la page -------------------------------------------------------
   --bord, --bord-d : bords gauche et droit du texte, les mêmes que .wrap
   (marge latérale, ou centrage au-delà de la largeur utile). Contiennent un
   %, résolu là où on les emploie : seulement sur des boîtes de toute la
   largeur de l'écran.
   --fenetre : hauteur d'une fenêtre de téléphone (plan §E.1) : 32 % de la
   hauteur du cadre portrait (1170 × 2532) tel qu'il couvre l'écran, plus
   48 px. 318 px à 390 × 844, 580 px à 768 × 1024.
   Tailles propres à l'accueil (échelle de R.2) :
     --fs-manifeste  le manifeste, un cran sous --fs-h2 : 28 → 63 px
     --fs-geant      les chiffres et mots d'« En bref » : 80 → 176 px (au plus)
     --fs-ligne      noms des formules, titres des étapes : 28 → 52 px (les prix :
                     taille de chapeau, --fs-lead, section 7)
   (Les mots des bandes : la largeur de la grille, exactement ; leur largeur
   en em est mesurée en Inter 800, section 7.) */
.accueil{
  --bord:max(var(--marge), env(safe-area-inset-left), (100% - var(--largeur-utile)) / 2);
  --bord-d:max(var(--marge), env(safe-area-inset-right), (100% - var(--largeur-utile)) / 2);
  --fenetre:calc(0.32 * max(100vh, 216.4vw) + 48px);
  --fs-manifeste:clamp(1.75rem, 0.95rem + 3.3vw, 4rem);
  --fs-geant:clamp(5rem, 2rem + 10vw, 11rem);
  --fs-ligne:clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem);
  position:relative; z-index:1; /* tout le contenu passe au-dessus de la toile */
}
@supports (height:1lvh){
  .accueil{ --fenetre:calc(0.32 * max(100lvh, 216.4vw) + 48px); }
}

/* 2. Scène, actes, figures ------------------------------------------------------ */

/* La toile de la scène : sous tout le contenu, ne capte rien. Elle ne
   s'affiche que si la scène est prévue (html.scene-prevue, posé dans le
   <head>) et n'a pas renoncé (html.scene-fixe). La couche a la hauteur de
   l'écran (100lvh) ; la toile est cachée tant qu'elle n'a pas sa première
   image (un contexte WebGL vide s'afficherait en noir), visible pendant le
   relais (sous les images identiques) puis quand la scène est active.
   direction.js lui donne sa hauteur en pixels : quand seule la hauteur de
   l'écran change (barre d'adresse), elle la garde et se centre (pas de
   nouvelle taille de toile, plan §C.8) ; ses bords sont crème, comme le fond.
   Portrait : la couche est posée DANS la page (position absolue) et
   direction.js la déplace (transform) là où elle vient de dessiner : elle
   défile avec la page, et la pièce reste au pixel près dans ses fenêtres.
   Paysage (section 11) : fixe, sur la droite de l'écran.
   overflow-anchor: none : posée au haut de l'écran, la couche était choisie
   par le navigateur comme repère du défilement à restaurer ; au retour
   arrière (page rechargée, couche revenue en haut de la page), le
   défilement repartait de 0. */
.scene-couche{
  display:none;
  position:absolute; top:0; left:0; right:0; z-index:0;
  height:100vh; height:100lvh;
  overflow:hidden; overflow-anchor:none;
  pointer-events:none;
  will-change:transform;
}
html.scene-prevue:not(.scene-fixe) .scene-couche{ display:block; }
.scene-toile{
  display:block; position:absolute; left:0; top:0;
  width:100%; height:100%;
  visibility:hidden;
}
html.scene-relais .scene-toile, html.scene-active .scene-toile{ visibility:visible; }

/* Un acte : un état de la pièce. Sa figure vient en premier, son texte ensuite. */
.acte{ position:relative; }
.acte-texte{ position:relative; z-index:1; }

/* Masque des titres révélés (data-app="lignes", base.css) : avec les
   interlignes serrés de la direction claire (0,9 à 0,95), le haut des lettres
   hautes (f, l, t, É) dépassait du masque, décalé de 105 % seulement : on
   voyait des éclats sous les repères avant l'entrée. Calcul : jusqu'à 133 %
   pour les grands chiffres ; 140 % sur l'accueil. (À reporter dans base.css
   pour toutes les pages.) */
.accueil .app-attente[data-app="lignes"] .mot > span{ transform:translateY(140%); }

/* Typographie commune des sections */
.accueil .reperes{ margin-bottom:var(--e-5); }
.accueil h2:not(.reperes){ max-width:15ch; }
.insecable{ white-space:nowrap; }

/* 3. Portrait : fenêtres et feuilles ----------------------------------------------
   Chaque figure est une fenêtre de hauteur --fenetre, de toute la largeur ;
   la pièce y apparaît dans une carte aux coins arrondis, tracée d'un filet
   fin (le fond des images est le crème de la page : sans ce filet, la carte
   ne se verrait pas). L'image fait toute la largeur de l'écran, comme la
   toile, et la carte la rogne : la pièce y a la même taille qu'en direct.
   Sans fenêtre (data-fenetre="non"), la figure existe (c'est l'ancre) mais
   n'a pas de hauteur. */
.etat{
  position:relative; z-index:0;
  height:var(--fenetre);
  overflow:hidden; overflow:clip;
}
.etat::before{ /* la carte */
  content:''; position:absolute; z-index:1; inset:0 var(--bord-d) 0 var(--bord);
  border:1px solid var(--filet-fort); border-radius:var(--rayon);
  pointer-events:none;
}
.etat picture{
  position:absolute; inset:0;
  clip-path:inset(0 var(--bord-d) 0 var(--bord) round var(--rayon));
}
.etat img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.acte[data-fenetre="non"] > .etat{ height:0; }
.acte[data-fenetre="non"] > .etat::before,
.acte[data-fenetre="non"] > .etat picture{ display:none; }

/* Feuilles : le texte, opaque, à la marge de la grille. Leur filet haut
   est dans le flux, juste au-dessus du repère ou du numéro qu'il annonce
   (il se trace : data-app="filet"). */
.accueil .feuille{ padding-left:var(--bord); padding-right:var(--bord-d); }
.accueil .feuille > .filet:first-child{ position:relative; inset:auto; margin-bottom:var(--e-5); }

/* 4. Ouverture (E0) ---------------------------------------------------------------
   Le titre en trois lignes, le sous-titre (ce qu'on fait ; aucun prix : ils
   viennent après ce qu'il y a dedans, « 04 Formules »), les deux pilules,
   puis (en portrait) la fenêtre de la pièce sous les boutons. Aucune animation sur le
   texte : il est lisible à la première image. L'image se pose (data-app="pose"). */
.acte-ouverture{ display:flex; flex-direction:column; }
.acte-ouverture > .acte-texte{ padding-top:calc(var(--nav-h) + var(--e-6)); padding-bottom:var(--e-7); }
.acte-ouverture > .etat{ order:1; }
.une-ligne{ display:block; }
/* Portrait : le titre remplit sa colonne (cqi : la largeur réelle de la
   colonne, barre de défilement déduite), au moins --fs-une, au plus 12 % de
   la hauteur de l'écran : 62 px à 390, 48 px à 320. Et au plus 7,5rem
   (120 px) : jamais plus grand que la plus grande une d'ordinateur (colonne
   de 648 px / 5,45 ≈ 119 px) ; sur tablette verticale, 120 px.
   5,62 em : la plus longue ligne mesurée aux petites tailles (« sans y
   perdre » : 5,47 em à 48 px ; Fraunces s'élargit quand elle rapetisse,
   axe opsz), plus 2 % de marge. La fin prend la même taille. */
.acte-ouverture > .acte-texte, .acte-fin > .acte-texte{ container-type:inline-size; }
.acte-ouverture .une, .fin-titre{
  font-size:min(7.5rem, max(var(--fs-une), min(100cqi / 5.62, 12vh)));
}
@supports (height:1svh){
  .acte-ouverture .une, .fin-titre{
    font-size:min(7.5rem, max(var(--fs-une), min(100cqi / 5.62, 12svh)));
  }
}
.acte-ouverture .reperes{ margin-bottom:var(--e-5); }
.ouverture-sous-titre{
  max-width:27em;
  margin-top:var(--e-6);
  font-size:clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); font-weight:500; line-height:1.45;
  color:var(--texte-2);
}
.ouverture-actions{ margin-top:var(--e-6); }
.ouverture-devise{ margin-top:var(--e-6); }
/* Très petits téléphones (320 × 568) : un cran de moins entre le titre, le
   sous-titre et les pilules, pour que les deux pilules tiennent entières
   dans l'écran quand l'ouverture arrive en haut. */
@media (max-width:359.98px){
  .ouverture-sous-titre, .ouverture-actions{ margin-top:var(--e-5); }
}
/* La pose de l'image d'ouverture : seulement quand la scène en direct n'est
   pas prévue. Sinon, c'est la scène qui fait l'ouverture, et l'image doit
   rester identique à sa première image. */
html.scene-prevue .acte-ouverture [data-app="pose"]{ transform:none; }

/* 4 bis. Le film d'ouverture --------------------------------------------------------
   Le film OPAQ (film.css, film.js). accueil.js (section 4) choisit son format
   (data-format : 16:9, 1:1 ou 9:16, d'après les proportions de l'écran).
   Sans JavaScript, en « réduire les animations » : une feuille dans le flux,
   le film dans un écran au cadre anthracite (une télé), sur sa dernière
   image, immobile, sous la barre du haut, le pied « Faire défiler » dessous.
   --film-h : la hauteur laissée à l'écran (barre, marges, pied ôtés) ;
   --film-l : sa largeur selon le format. Le pied a la même largeur. */
.film-scene{
  --film-h:calc(100vh - var(--nav-h) - 132px);
  --film-l:min(var(--largeur-utile), var(--film-h) * 16 / 9);
  position:relative; z-index:2;
}
@supports (height:1svh){
  .film-scene{ --film-h:calc(100svh - var(--nav-h) - 132px); }
}
.film-scene[data-format="f11"]{ --film-l:min(720px, var(--film-h)); }
.film-scene[data-format="f916"]{ --film-l:calc(var(--film-h) * 9 / 16); }
.film-plateau{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--e-4);
  min-height:100vh; min-height:100svh;
  padding:calc(var(--nav-h) + var(--e-5)) var(--marge) var(--e-5);
}
.film-fond{ position:absolute; inset:0; z-index:-1; background:var(--fond); }
.film-ecran, .film-pied{ width:min(100%, var(--film-l)); }
.film-ecran{
  --cadre:clamp(5px, 0.55vw, 9px);
  flex:none;
  padding:var(--cadre);
  border-radius:calc(var(--rayon) + var(--cadre));
  background:var(--anthracite);
  box-shadow:0 1px 0 var(--filet-fort), 0 48px 90px -48px rgb(28 28 26 / .5);
  transform-origin:0 0;
}
.film-ecran .opaq-film{ border-radius:var(--rayon); }
.film-pied{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-4);
  min-height:44px;
}
.film-suite{
  font-size:.8125rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--texte-2);
}
.film-pause{
  min-width:44px; min-height:44px; padding:0 var(--e-5);
  border:1px solid var(--filet-fort); border-radius:var(--rayon-pilule);
  background:none; color:var(--texte);
  font:inherit; font-size:.875rem; font-weight:600;
  cursor:pointer;
}
@media (hover:hover) and (pointer:fine){
  .film-pause:hover{ border-color:var(--texte); }
}

/* Animé (JavaScript, animations permises), dès la première image : le film
   est un grand écran aux coins arrondis, posé sur le fond clair, juste sous
   la barre du haut (visible), à --film-marge des bords de l'écran (côtés et
   bas). La scène fait une course (--course, une hauteur d'écran) + --sus + un
   plateau collé en haut de l'écran (--plateau, 100lvh), et l'ouverture
   commence après --course (marge négative), comme dans le flux : les ancres
   de la 3D ne bougent pas. En faisant défiler la course, accueil.js tend le
   film (matrix3d) de cet écran vers la face de la pièce, dans la .tenue
   (paysage) ou dans la fenêtre sous les boutons (portrait), où il continue de
   jouer ; ses coins restent arrondis (rayon tenu à l'écran, de --film-rayon à
   celui du film posé).
     - portrait : --sus (posé par accueil.js) prolonge la course : l'ouverture
       a déjà monté de --sus quand le film se pose, la fenêtre est alors bien
       dans l'écran ; ensuite le plateau défile avec la page, et le film reste
       dans sa fenêtre sans aucun calcul ;
     - paysage (html.film-anime, plus bas) : la scène couvre toute la .tenue ;
       le plateau y reste collé, comme l'image de la pièce : le film reste sur
       la face pendant que le texte défile à gauche, puis s'efface avant que
       la pièce ne quitte sa pose.
   Netteté des bords : la carte graphique ne réduit jamais le film. accueil.js
   le fait dessiner à sa taille à l'écran (scale sur .opaq-film, dans l'écran
   qui porte la perspective, à peu près à l'échelle 1), et tout le film est
   dessiné dans une seule couche (aucun will-change dedans, GSAP en 2D) : le
   bord arrondi est lissé au dessin, à l'intérieur de la couche. Réduite après
   coup, une couche perd ce lissage une colonne sur deux : des tirets le long
   des arêtes.
   La scène ne capte rien, sauf le bouton Pause. Le pied (« Faire défiler »,
   Pause) est posé sur le film, en bas, en pilules sombres lisibles sur
   toutes ses couleurs.
   Avant le moteur du film (film.js, .film-pret) : l'image d'attente est la
   première scène, « Pas le temps de faire un bon site ? », qui n'apparaît
   (fondu) que si le moteur tarde ; arrivé avant, il part de 0 s, sinon de
   cette image (accueil.js, T_AFFICHE) : jamais la dernière image, jamais un
   écran vide qui dure. Sans moteur : cette image reste (.film-sans-moteur). */
@media (prefers-reduced-motion:no-preference){
  html.js .tenue{
    --course:100vh; --plateau:100vh; --ecran-h:100vh;
    --film-marge:clamp(12px, 2.2vw, 32px);
    --film-rayon:clamp(18px, 2vw, 30px);
  }
  @supports (height:1svh){
    html.js .tenue{ --course:100svh; --plateau:100lvh; --ecran-h:100svh; }
  }
  html.js .film-scene{
    height:calc(var(--course) + var(--sus, 0px) + var(--plateau));
    margin-bottom:calc(-1 * (var(--plateau) + var(--sus, 0px)));
    pointer-events:none;
  }
  /* overflow: clip : la boîte de l'écran est plus grande que le film visible (le masque) ;
     tendue en perspective, elle déborderait loin et élargirait la page (barre du haut
     poussée hors de l'écran du téléphone). */
  html.js .film-plateau{
    position:sticky; top:0;
    display:block; height:var(--plateau); min-height:0; padding:0;
    overflow:hidden; overflow:clip;
  }
  html.js .film-fond{ display:none; }
  /* L'écran déborde de 1,5 px (le retrait du masque, accueil.js RETRAIT) : la forme
     visible est exactement l'écran arrondi de l'arrivée. Le masque : quatre disques
     aux coins (bord lissé sur 1 px) et deux bandes ; accueil.js en recalcule la taille
     et la place pendant le trajet. */
  html.js .film-ecran{
    --d:calc(2 * var(--film-rayon));
    --coin:radial-gradient(closest-side, #000 calc(100% - 1px), transparent 100%);
    --bande:linear-gradient(#000, #000);
    position:absolute; left:calc(var(--film-marge) - 1.5px); top:calc(var(--nav-h) - 1.5px);
    width:calc(100% - 2 * var(--film-marge) + 3px);
    height:calc(var(--ecran-h) - var(--nav-h) - var(--film-marge) + 3px);
    padding:0; border-radius:0; background:none; box-shadow:none;
    will-change:transform;
    -webkit-mask-image:var(--coin), var(--coin), var(--coin), var(--coin), var(--bande), var(--bande);
            mask-image:var(--coin), var(--coin), var(--coin), var(--coin), var(--bande), var(--bande);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:var(--d) var(--d), var(--d) var(--d), var(--d) var(--d), var(--d) var(--d), calc(100% - 3px) calc(100% - 3px - var(--d)), calc(100% - 3px - var(--d)) calc(100% - 3px);
            mask-size:var(--d) var(--d), var(--d) var(--d), var(--d) var(--d), var(--d) var(--d), calc(100% - 3px) calc(100% - 3px - var(--d)), calc(100% - 3px - var(--d)) calc(100% - 3px);
    -webkit-mask-position:left 1.5px top 1.5px, right 1.5px top 1.5px, right 1.5px bottom 1.5px, left 1.5px bottom 1.5px, left 1.5px top calc(1.5px + var(--film-rayon)), left calc(1.5px + var(--film-rayon)) top 1.5px;
            mask-position:left 1.5px top 1.5px, right 1.5px top 1.5px, right 1.5px bottom 1.5px, left 1.5px bottom 1.5px, left 1.5px top calc(1.5px + var(--film-rayon)), left calc(1.5px + var(--film-rayon)) top 1.5px;
  }
  html.js .film-ecran .opaq-film{
    width:100%; height:100%; aspect-ratio:auto; border-radius:0;
    transform-origin:0 0;
  }
  html.js .film-ecran .opaq-film *{ will-change:auto; }
  /* Le pied, au ras du bas du film (sous ses légendes, à 6 % de son petit côté),
     hors des coins arrondis : des pilules de 30 px ; le bouton garde 44 px de
     cible (la pilule est son ::before). */
  html.js .film-pied{
    border-radius:var(--film-rayon); /* sans effet visible : accueil.js y lit le rayon en px */
    position:absolute; left:0; right:0;
    top:calc(var(--ecran-h) - var(--film-marge) - 44px - var(--e-2));
    width:auto; padding:0 calc(var(--film-marge) + var(--e-4));
  }
  html.js .film-suite, html.js .film-pause::before{
    border:1px solid rgb(237 233 225 / .22); border-radius:var(--rayon-pilule);
    background:rgb(28 28 26 / .78);
  }
  html.js .film-suite{
    display:inline-flex; align-items:center; height:30px; padding:0 var(--e-3);
    color:var(--lumiere); font-size:.6875rem;
  }
  html.js .film-pause{
    position:relative; isolation:isolate;
    display:inline-flex; align-items:center; min-height:44px; padding:0 var(--e-3);
    border:0; background:none; color:var(--lumiere); font-size:.8125rem;
    pointer-events:auto;
  }
  html.js .film-pause::before{ content:''; position:absolute; inset:7px 0; z-index:-1; }
  html.js .film-pause:focus-visible{ outline-color:var(--lumiere); }
  @media (hover:hover) and (pointer:fine){
    html.js .film-pause:hover::before{ border-color:var(--lumiere); }
  }

  /* L'image d'attente : la première scène, posée, en fondu après 0,6 s. */
  html.js .opaq-film:not(.film-pret) > :not(.s1){ visibility:hidden; }
  html.js .opaq-film:not(.film-pret) .s1 > *{ opacity:0; animation:film-affiche .4s var(--douce) .6s forwards; }
  html.js .opaq-film.film-sans-moteur .s1 > *{ opacity:1; animation:none; }
  html.js .opaq-film:not(.film-pret) .hook{ transform:scale(1.034); transform-origin:0 50%; }
  html.js .opaq-film:not(.film-pret) .clock .hh{ transform:rotate(20deg); transform-origin:50px 50px; }

}
@keyframes film-affiche{ to{ opacity:1; } }

/* Paysage, effet branché (accueil.js pose html.film-anime) : la scène couvre
   la .tenue, l'ouverture garde sa place grâce à la marge haute de la .tenue.
   (Avant le branchement, ou s'il échoue, la scène reste dans le flux, comme
   en portrait : le film défile hors de l'écran avec son plateau.) */
@media (prefers-reduced-motion:no-preference){
  @media (min-aspect-ratio: 6/5) and (min-width: 640px){
    html.film-anime .tenue{ padding-top:var(--course); }
    html.film-anime .film-scene{ position:absolute; inset:0; height:auto; margin:0; }
  }
}

/* 5. Manifeste ---------------------------------------------------------------------
   Très grand, Inter 600. accueil.js découpe le texte en mots (.manifeste-mot)
   et allume chacun (opacité 0,2 → 1) quand il passe la ligne de lecture.
   Sans JavaScript, en « réduire les animations » et à l'impression : tout
   est allumé. Portrait : feuille pleine largeur. Paysage (section 11) :
   dans la colonne de gauche, à côté de la pièce E0 tenue (R.6.2 : « au-
   dessus de la toile seulement là où la pièce n'est pas »). */
.manifeste{ padding-top:var(--section); padding-bottom:var(--section); }
.manifeste-texte{
  font-size:var(--fs-manifeste); font-weight:600; line-height:1.14; letter-spacing:-.03em;
  color:var(--texte);
  text-wrap:pretty;
}
.manifeste-mot{ display:inline; }

/* 6. 01 En bref (E0 tenu, pas de fenêtre) -------------------------------------------
   Cinq faits en très grands caractères, mots ou chiffres (« Tout compris »,
   « Avant de signer », « 7 jours ouvrés », « 1 modification par mois », « Ce
   site est notre démonstration »), révélés sous masque (aucun compteur qui
   défile). Portrait : le chiffre et son unité sur la même ligne de base
   (l'unité passe dessous quand elle n'y tient pas). Paysage (section 11) :
   dans la colonne de gauche, l'unité sous le chiffre, la pièce E0 tenue à
   droite (plan E.1.2). Sur deux colonnes, le cinquième, la conclusion, prend
   toute la largeur : aucune case vide.
   Une seule taille pour les cinq (la même échelle, la conclusion comprise) :
   elle se règle sur --case, la largeur d'une case de la grille (cqi de
   .faits), la même pour le cinquième, plus large que sa case. Largeurs
   mesurées (boîte, Inter 800, interlettrage −0,055 em) : « Ce site » 3,01 em,
   « Avant » 2,64, « Tout » 2,02 (« 59 € » faisait 1,99), « 7 » 0,53, « 1 »
   0,39. Unités (650, taille h3) : « est notre démonstration » 11,19 em,
   « modification par mois » 10,13. */
.acte-bref{ padding-top:var(--e-6); padding-bottom:var(--section); }
.faits{
  --case:100cqi;
  display:grid; gap:var(--e-8) var(--gouttiere); margin-top:var(--e-6);
  container-type:inline-size;
}
.fait > .filet{ margin-bottom:var(--e-5); }
.fait-valeur{
  display:flex; flex-wrap:wrap; align-items:baseline;
  column-gap:var(--e-4); row-gap:var(--e-1);
}
.fait-chiffre{
  /* au plus 30 % de la case : « Ce site », le plus large, en fait 90 % (sur une
     colonne ; 79 % pour « Avant » sur deux) */
  font-size:var(--fs-geant); font-size:min(var(--fs-geant), .3 * var(--case)); font-weight:800; line-height:.9; letter-spacing:-.055em;
  font-variant-numeric:lining-nums;
  color:var(--texte);
  /* Le masque de la révélation rogne un peu le bas des chiffres : de la place. */
  padding-bottom:.04em;
}
.fait-unite{
  font-size:var(--fs-h3); font-weight:650; line-height:1.1; letter-spacing:var(--ap-h3);
  color:var(--texte);
}
.fait-texte{ max-width:24em; margin-top:var(--e-4); color:var(--texte-2); }
.faits .fait-texte, .faits .fait-unite{ --app-delai:150ms; }
@media (min-width:768px){
  .faits{
    --case:calc((100cqi - var(--gouttiere)) / 2);
    grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:var(--e-9);
  }
  .fait:last-child:nth-child(odd){ grid-column:1 / -1; }
}

/* 7. 04 Formules (E1 → E2 → E3), bandes des formules --------------------------------
   Portrait : feuille du titre, puis trois fois [bande + fenêtre + ligne], puis
   le pied. Chaque ligne entière est un lien vers sa formule.
   Les prix arrivent ici, après ce qu'il y a dedans (01 à 04), en clair et en
   taille de texte : sous le titre, le prix de départ (650, la taille d'un
   chapeau) puis la création, plus petite ; dans chaque ligne, le prix
   (650, taille d'un chapeau), loin sous le nom de la formule et le titre.
   Aucun prix n'est jamais plus gros que le titre de la section. */
.formules-tete{ padding-top:var(--section); padding-bottom:var(--e-6); }
.formules-depart{
  max-width:var(--mesure-corps);
  margin-top:var(--e-6);
  font-size:var(--fs-lead); font-weight:650; line-height:1.4; letter-spacing:-.01em;
  color:var(--texte);
}
.formules-creation{
  max-width:var(--mesure-corps);
  margin-top:var(--e-1);
  font-size:.9375rem; line-height:1.5;
  color:var(--texte-2);
}
.formules-lignes .acte-texte{ padding-top:var(--e-3); padding-bottom:var(--e-5); }
.formules-pied{ padding-top:var(--e-6); padding-bottom:var(--section); }
.formules-pied p{ max-width:var(--mesure-corps); color:var(--texte-2); }
.formules-pied p + p{ margin-top:var(--e-3); }
.formules-pied .lien{ margin-top:var(--e-4); }

.formules-lignes .acte-texte{ container-type:inline-size; }
.formule{
  --deborde:var(--e-4);          /* le lien déborde de 16 px de chaque côté du texte */
  position:relative; isolation:isolate;
  display:grid;
  grid-template-columns:2.25rem minmax(0, 1fr);
  grid-template-areas:"num corps" ". prix";
  column-gap:var(--e-3); row-gap:var(--e-4);
  margin-inline:calc(-1 * var(--deborde));
  padding:var(--e-5) var(--deborde);
  border-radius:var(--rayon);
  color:var(--texte); text-decoration:none;
  touch-action:manipulation;
}
.formule-num{
  grid-area:num;
  font-family:var(--serif); font-optical-sizing:auto; font-style:italic; font-weight:400;
  font-size:clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height:1.25;
  color:var(--em);
}
.formule-corps{ grid-area:corps; }
.formule-nom{
  display:flex; align-items:center; column-gap:.3em;
  font-size:var(--fs-ligne); font-weight:800; line-height:1; letter-spacing:-.045em;
}
.formule-desc{ margin-top:var(--e-3); color:var(--texte-2); }
.formule-pages{ margin-top:var(--e-1); font-size:var(--fs-petit); font-weight:500; color:var(--texte-2); }
.formule-prix{
  grid-area:prix;
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:var(--e-2);
  font-size:var(--fs-petit); line-height:1.3; color:var(--texte-2);
  white-space:nowrap;
}
.formule-prix strong{
  font-size:var(--fs-lead); font-weight:650; line-height:1.2; letter-spacing:-.01em;
  color:var(--texte);
}
/* Le prix à l'année, sous le prix mensuel : plus petit, sur sa ligne (il peut passer à la ligne). */
.formule-annee{ flex-basis:100%; margin-top:var(--e-2); font-size:.8125rem; line-height:1.4; white-space:normal; }
/* Le trait du lien : juste après le nom, sur sa ligne, comme le trait final
   des pilules après leur libellé (même geste : il s'allonge au survol). Le
   nom est le libellé du lien ; le trait ne finit jamais seul sur sa ligne
   (le h3 est une rangée flex). Mêmes proportions que celui des pilules
   (1,1 em de long, réduit à 60 % au repos), 2 px : 31 à 57 px. À l'encre :
   un trait cuivre de cette finesse ne se voit pas sur crème. */
.formule-nom::after{
  content:''; flex:none; width:1.1em; height:2px;
  background:currentColor;
  transform:scaleX(.6); transform-origin:left center;
  transition:transform calc(var(--d-voile) * .6) var(--sortie);
}
/* Le voile : anthracite à 4 %, se déroule au survol (pointeur fin), au focus et à l'appui. */
.formule::before{
  content:''; position:absolute; z-index:-1; inset:0;
  border-radius:inherit;
  background:rgb(28 28 26 / .045);
  clip-path:inset(0 100% 0 0 round var(--rayon));
  transition:clip-path calc(var(--d-voile) * .6) var(--sortie);
}
.formule:focus-visible{ outline-offset:0; }
.formule:focus-visible::before, .formule:active::before{ clip-path:inset(0 0 0 0 round var(--rayon)); transition-duration:var(--d-voile); }
.formule:focus-visible .formule-nom::after, .formule:active .formule-nom::after{ transform:scaleX(1); transition-duration:var(--d-voile); }
@media (hover:hover) and (pointer:fine){
  .formule:hover::before{ clip-path:inset(0 0 0 0 round var(--rayon)); transition-duration:var(--d-voile); }
  .formule:hover .formule-nom::after{ transform:scaleX(1); transition-duration:var(--d-voile); }
}
/* La ligne active (paysage seulement, section 11) : un filet cuivre vertical
   de 2 px, qui se trace (accueil.js pose .est-active). Il est posé sur le
   bord gauche de la ligne, celui du voile de survol : au survol, il appartient
   à la carte. À 24 px du haut et du bas, il reste sur la partie droite du
   bord (--rayon : 23 px à 1440 ; à 28 px, son maximum, l'écart à la courbe
   reste sous le demi-pixel). */
.formule::after{
  content:''; position:absolute; top:var(--e-5); bottom:var(--e-5); left:0; width:2px;
  background:var(--trait);
  transform:scaleY(0); transform-origin:center top;
  transition:transform calc(500ms * .6) var(--douce);
  display:none;
}
/* Assez de place : le prix passe à droite de la ligne. */
@container (min-width:520px){
  .formule{
    grid-template-columns:3.25rem minmax(0, 1fr) auto;
    grid-template-areas:"num corps prix";
  }
  .formule-prix{ flex-direction:column; align-items:flex-end; text-align:right; }
  .formule-prix strong{ margin-bottom:var(--e-1); }
  .formule-annee{ flex-basis:auto; margin-top:0; white-space:nowrap; }
}

/* Les bandes des formules (plan R.6.4) : le nom de chaque formule, géant, de
   la largeur exacte de la grille, juste avant sa ligne. accueil.js le fait
   traverser l'écran au défilement (transform seulement, réversible) ; sans
   JavaScript ou en « réduire les animations », il reste posé sur la grille.
   Chaque bande prend toute la largeur mais n'a aucun fond (10/10) : la pièce
   reste entière derrière le mot, qui passe devant elle (la toile est opaque,
   le mot ne peut pas passer derrière sans refaire la 3D et ses images fixes).
   La taille suit le mot (--mot-em : sa largeur en em, de l'origine de la boîte
   au bord droit de l'encre, en Inter 800, interlettrage −0,05 em ; mesurée sur
   les pixels par scripts/bandes.mjs, qui donne la valeur à poser) : les trois
   mots font la même largeur, pas la même hauteur. Le repli (vw) vaut pour un
   navigateur sans unités de conteneur. */
.bande{
  position:relative; container-type:inline-size;
  overflow:hidden; overflow:clip;
  /* Téléphone (4vw sous les minimums) : 24 + 32 px ; ordinateur : 4vw, 58 px à 1440.
     Trois bandes au lieu d'une (10/10) : sur téléphone, 8 px de moins en haut et 16 en
     bas qu'avant, pour ne pas trop rallonger la section. */
  padding-top:clamp(var(--e-5), 4vw, var(--e-8));
  padding-bottom:clamp(var(--e-6), 4vw, var(--e-8));
  background:none; /* .feuille ne sert qu'aux bords de la grille */
}
.bande-mot{
  --mot-em:5.72;
  display:block; width:max-content;
  font-size:calc(90vw / var(--mot-em)); font-size:calc(100cqi / var(--mot-em));
  font-weight:800; line-height:.86; letter-spacing:-.05em;
  white-space:nowrap;
  color:var(--texte);
  /* le bas du « g » et du « q » : la bande les rogne sinon */
  padding-bottom:.08em;
}
.bande-mot[data-mot="essentiel"]{ --mot-em:4.08; }
.bande-mot[data-mot="avance"]{ --mot-em:3.44; }
.js .bande-mot{ will-change:transform; }

/* 8. 02 Compris (E4) --------------------------------------------------------------------
   Juste après « 01 En bref » : ce qu'il y a dedans, avant les prix. Six
   atouts (libellé, phrase), puis, sous un repère (« En plus, selon la
   formule », h3 au style des repères), les deux qui ne sont pas compris dans
   tous les abonnements, de la même construction. La liste (.compris) sert
   aussi à l'ancien bloc Références (retiré le 20/10). */
.acte-compris > .acte-texte{ padding-top:var(--e-7); padding-bottom:var(--section); }
.compris{ margin-top:var(--e-7); container-type:inline-size; --decalage:60ms; }
.compris li + li{ margin-top:var(--e-5); }
.compris .filet{ margin-bottom:var(--e-4); }
.compris p{ display:grid; gap:var(--e-1); color:var(--texte-2); --app-delai:150ms; }
.compris strong{ font-size:1.125rem; font-weight:650; letter-spacing:-.01em; color:var(--texte); }
@container (min-width:520px){
  .compris p{ grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); column-gap:var(--gouttiere); }
}
.accueil .compris-plus{ margin-top:var(--e-8); margin-bottom:0; }
.compris-plus + .compris{ margin-top:var(--e-5); }

/* 9. 03 Méthode (E5 → E6 → E0 → E7) ---------------------------------------------------------
   Portrait : feuille du titre, puis [fenêtre + feuille] pour 01, 02 et 04 ;
   03 sans fenêtre. */
.methode{ scroll-margin-top:var(--e-2); } /* avec scroll-padding-top : barre + 24 px */
.methode-tete{ padding-top:var(--section); padding-bottom:var(--e-6); }
.etapes .acte-texte{ padding-top:var(--e-6); padding-bottom:var(--e-7); }
.etape-num{
  font-family:var(--serif); font-optical-sizing:auto; font-style:italic; font-weight:400;
  font-size:clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height:1.1;
  color:var(--em);
  font-variant-numeric:lining-nums tabular-nums;
}
.etapes h3{
  margin-top:var(--e-3);
  font-size:var(--fs-ligne); font-weight:800; line-height:1; letter-spacing:-.045em;
}
.etapes h3 + p{ max-width:var(--mesure-corps); margin-top:var(--e-4); color:var(--texte-2); }

/* 10. Fin (E0) : le début du bloc sombre ------------------------------------------------------
   « Parlons de votre site. » à la taille de la une, en deux lignes ; la
   pièce ne s'y dessine plus (sa figure n'est qu'une ancre). Le bloc se
   poursuit dans le pied de page (base.css). */
.acte-fin{ padding-top:var(--section); padding-bottom:var(--e-8); }
.acte-fin > .acte-texte{ padding-left:var(--bord); padding-right:var(--bord-d); }
.fin-titre em{ display:block; }
.fin-suite{ margin-top:var(--e-7); }
.fin-texte{
  max-width:var(--mesure-lead);
  font-size:var(--fs-lead); line-height:1.55; color:var(--texte-2);
}
/* Le lien courriel : une cible de 44 px de haut au moins, sans changer la
   ligne (le remplissage est repris par une marge négative ; le lien est
   insécable, comme une adresse). */
.fin-texte a{
  display:inline-block; padding-block:9px; margin-block:-9px;
  color:var(--texte);
}
.fin-actions{ margin-top:var(--e-6); --app-delai:var(--suite); }
@media (min-width:1024px){
  /* Le texte et les pilules côte à côte, sous le titre. */
  .fin-suite{
    display:flex; align-items:flex-end; justify-content:space-between; gap:var(--e-6) var(--gouttiere);
  }
  .fin-actions{ flex:none; margin-top:0; }
}

/* 11. Paysage (MODE) -------------------------------------------------------------------------------
   Texte à gauche, jusqu'à --partage (la moitié de l'écran) moins une demi-
   gouttière ; chaque figure occupe la droite de son acte, et son image y
   reste collée en haut de l'écran (100lvh) tant que l'acte défile, comme la
   toile. Un acte moins haut que l'écran : l'image prend sa hauteur (cover,
   centrée) et la pièce reste centrée sur le texte ; les hauteurs minimales
   des actes (plus bas) garantissent qu'elle y tient entière.
   E0 tenu : l'ouverture n'est pas positionnée, sa figure se cale donc sur
   div.tenue, qui contient aussi le manifeste et « 01 En bref ». La pièce
   reste immobile à droite pendant que le manifeste et les chiffres défilent
   à gauche, comme le fera la scène en direct (E0, E0). Toutes les feuilles
   sont transparentes, les bandes des formules comprises : la toile en direct
   n'est jamais masquée. */
@media (min-aspect-ratio: 6/5) and (min-width: 640px){
  .accueil{ --partage:50%; }
  .scene-couche{ position:fixed; left:50%; will-change:auto; }

  .acte{ display:flex; flex-direction:column; justify-content:center; }
  .etat,
  .acte[data-fenetre="non"] > .etat{
    position:absolute; inset:0 0 0 var(--partage); height:auto;
  }
  .etat::before{ display:none; }
  .etat picture,
  .acte[data-fenetre="non"] > .etat picture{
    display:block;
    position:sticky; top:0;
    height:min(100vh, 100%); height:min(100lvh, 100%);
    clip-path:none;
  }
  .etat img{ object-position:0 50%; }

  /* E0 tenu : la figure de l'ouverture couvre toute la .tenue. */
  .tenue{ position:relative; }
  .acte-ouverture{ position:static; }

  /* Le texte : la gauche. Les feuilles qui ne sont pas des actes (manifeste,
     « En bref », dont la feuille est la section, têtes et pieds de sections) gardent leur bord gauche et s'arrêtent au même
     endroit que le texte des actes. */
  .acte > .acte-texte,
  .accueil :is(.formules-tete, .formules-pied, .methode-tete){
    width:calc(var(--partage) - var(--gouttiere) / 2);
    padding-right:0;
  }
  .accueil :is(.manifeste, .acte-bref){ padding-right:calc(100% - var(--partage) + var(--gouttiere) / 2); }
  .acte-bref > .acte-texte{ width:auto; }
  .accueil :is(.manifeste, .acte-bref, .formules-tete, .formules-pied, .methode-tete),
  .formules .acte-texte, .acte-compris > .acte-texte, .etapes .acte-texte{ background:none; }

  /* Ouverture : le titre en haut à gauche, la pièce à droite. Sa taille suit
     la colonne : la plus longue ligne (« Un bon site, », 5,33 em mesurés)
     n'en sort jamais ; et la hauteur, sur les écrans bas. */
  .acte-ouverture{ min-height:100vh; min-height:100svh; justify-content:flex-start; }
  .acte-ouverture > .acte-texte{
    padding-top:calc(var(--nav-h) + clamp(var(--e-6), 8vh, var(--e-9)));
    padding-bottom:var(--e-8);
  }
  .acte-ouverture .une{ font-size:min(var(--fs-une), 100cqi / 5.45, 15vh); }
  @supports (height:1svh){
    .acte-ouverture .une{ font-size:min(var(--fs-une), 100cqi / 5.45, 15svh); }
  }
  /* Les deux pilules sur une ligne. La colonne (cqi) décide : 475 px pour les
     pilules ordinaires ; en dessous (1024 × 768 : 442 px), un cran plus
     compactes (15 px, 20 px de côté : 423 px) ; plus étroite encore (écran
     presque carré), elles s'empilent, de la même largeur. Un navigateur sans
     requêtes de conteneur garde le retour à la ligne : rien ne déborde. */
  @container (min-width:425px){
    .ouverture-actions{ flex-wrap:nowrap; }
  }
  @container (min-width:425px) and (max-width:479.98px){
    .ouverture-actions{ gap:10px; }
    .acte-ouverture .ouverture-actions > .btn{ padding-inline:20px; font-size:.9375rem; }
  }
  @container (max-width:424.98px){
    .ouverture-actions{ display:grid; width:max-content; max-width:100%; }
  }
  /* Écrans bas (téléphone tourné : 667 × 375, 740 × 360, 844 × 390) : le
     titre, le sous-titre et les deux pilules tiennent dans un écran, avec
     de la marge pour la barre d'outils du navigateur (R.6.1). Le texte prend
     58 % de la largeur (la pièce, 42 % : la toile suit), le repère tient sur
     une ligne, le titre fait 10 % de la hauteur, et les pilules sont côte à
     côte : 52 px de haut (la hauteur des pilules du téléphone, R.3 ; le bas
     des pilules est à 325–335 px, mesuré de 640 × 360 à 844 × 390), 15 px,
     sans le trait final, libellés insécables (329 px pour les deux ; la
     colonne la plus étroite, à 640 × 360, en fait 335). */
  @media (max-height:500px){
    .accueil{ --partage:58%; }
    .scene-couche{ left:58%; }
    .acte-ouverture > .acte-texte{ padding-top:calc(var(--nav-h) + var(--e-3)); padding-bottom:var(--e-6); }
    .acte-ouverture .reperes{ margin-bottom:var(--e-2); white-space:nowrap; }
    .acte-ouverture .une{ font-size:min(var(--fs-une), 100cqi / 5.45, 10vh); }
    .ouverture-sous-titre{ margin-top:var(--e-3); font-size:var(--fs-corps); line-height:1.4; }
    .ouverture-actions{
      display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center;
      width:auto; margin-top:var(--e-4); gap:var(--e-2);
    }
    .acte-ouverture .ouverture-actions > .btn{ width:auto; min-height:52px; padding-inline:12px; font-size:.9375rem; white-space:nowrap; }
    .acte-ouverture .ouverture-actions > .btn::after{ display:none; }
    @supports (height:1svh){
      .acte-ouverture .une{ font-size:min(var(--fs-une), 100cqi / 5.45, 10svh); }
    }
  }

  /* 01 En bref, dans la colonne : deux colonnes, le cinquième fait sur les
     deux ; l'unité sous le chiffre (la même construction pour les cinq). Le
     chiffre : au plus 34 % d'une case (« Avant », le plus large dans une
     case, 2,64 em, en fait 90 %) ; 105 px à 1440 et à 1920, 72 px à 1024,
     55 px à 640 × 360. Sans unités de conteneur : 6vw et 104 px au plus,
     rien ne déborde. */
  .faits{
    --case:calc((100cqi - var(--gouttiere)) / 2);
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .fait:last-child:nth-child(odd){ grid-column:1 / -1; }
  .fait-valeur{ flex-direction:column; align-items:flex-start; row-gap:var(--e-2); }
  .fait-chiffre{ font-size:min(var(--fs-geant), 6vw, 6.5rem); font-size:min(var(--fs-geant), .34 * var(--case)); }
  /* L'unité tient sur une ligne : « modification par mois », la plus longue
     dans une case, fait 10,13 em ; au plus 9 % d'une case, jamais sous 20 px
     (« est notre démonstration », 11,19 em, a toute la largeur). */
  .fait-unite{ font-size:min(var(--fs-h3), max(1.25rem, .09 * var(--case))); }

  /* Hauteur des actes (plan : 58vh pour les formules, 56vh pour la méthode).
     Leurs images « côté » (2:3) sont cadrées pour une figure de la hauteur
     de l'écran, comme la toile ; un acte moins haut les rogne en haut et en
     bas (cover, centrée). En largeur, l'image fait la moitié de l'écran,
     donc sa hauteur vaut 75vw ; une pièce qui s'étend jusqu'à e × la hauteur
     de l'image de part et d'autre du milieu demande un acte de 2 × e × 75vw,
     plus 24 px de crème en haut et en bas. Mesures sur les rendus crème du
     07/10 (scratchpad L2-accueil, r3/etendues.py) :
       - formules (cinq, dix, relief) : e = 0,18 → 27vw + 48 px ; on prend
         28vw + 48 px. À 1440 × 900 comme à 1280 × 720, c'est 58vh qui
         décide (522 et 418 px) ; à 2560 × 1080, 765 px ;
       - méthode (plan, contenus, a-jour ; pose, plus basse, à l'étape 03) :
         e = 0,24 à 0,285 → 42vw + 48 px : 653 px à 1440 × 900, 586 px à
         1280 × 720, 478 px à 1024 × 768.
     Jamais plus que l'écran (l'image colle alors, la pièce tient dans la
     zone réservée) ; jamais moins que le plan. Si les rendus changent de
     cadrage : relancer r3/etendues.py. */
  .accueil{
    --acte-formule:min(100vh, 28vw + 48px);
    --acte-piece:min(100vh, 42vw + 48px);
  }
  @supports (height:1lvh){
    .accueil{
      --acte-formule:min(100lvh, 28vw + 48px);
      --acte-piece:min(100lvh, 42vw + 48px);
    }
  }

  /* Formules */
  .formules-lignes .acte{ min-height:max(58vh, var(--acte-formule)); }
  .formules-lignes .acte-texte{ padding-top:var(--e-2); padding-bottom:var(--e-2); }
  .formules-tete{ padding-bottom:var(--e-7); }
  .formules-pied{ padding-top:var(--e-7); }
  .formule::after{ display:block; }
  .formules-lignes .est-active .formule::after{ transform:scaleY(1); transition-duration:500ms; }
  /* Le voile ne dépasse jamais la ligne médiane : il déborde d'une demi-
     gouttière au plus (12 px de 768 à 1199 px de large). */
  .formule{ --deborde:min(var(--e-4), var(--gouttiere) / 2); }

  /* Compris */
  /* Un seul espacement entre « 01 En bref » et « 02 Compris » : le bas d'En
     bref (--section), plus 32 px. */
  .acte-compris{ min-height:100vh; padding-top:var(--e-6); padding-bottom:var(--section); }
  .acte-compris > .acte-texte{ padding-top:0; padding-bottom:0; }

  /* Méthode : l'étape la plus proche du milieu de l'écran est active ; les
     titres des autres s'estompent (les paragraphes, jamais). Intention :
     s'orienter. */
  .etapes .acte{ min-height:max(56vh, var(--acte-piece)); }
  .etapes h3{ transition:opacity calc(var(--d-ui) * .6) var(--douce); }
  .etapes.est-suivi .acte:not(.est-active) h3{ opacity:.55; }
  .etapes .est-active h3{ transition-duration:var(--d-ui); }

  /* Fin : toute la largeur (la pièce ne s'y dessine plus) ; le titre à la
     taille de la une. */
  .acte-fin > .acte-texte{ width:auto; padding-right:var(--bord-d); }
  .fin-titre{ font-size:var(--fs-une); }
}

/* 12. Scène active, impression ------------------------------------------------------------------------
   Scène en direct (direction.js) : les images fixes disparaissent, leurs
   boîtes restent (aucun saut ; les images différées jamais atteintes ne se
   téléchargent pas). En portrait, dès le relais, chaque carte devient un
   trou arrondi dans la page : un étalement de la couleur du fond tout autour
   (rogné par la figure) cache la toile hors de la carte, là où l'image, elle,
   est rognée (clip-path). C'est un masque, pas une ombre.
   Paysage, relais hors d'une ancre (direction.js, accroche) : les images des
   autres actes encore visibles restent par-dessus la toile (.image-gardee),
   le temps que le visiteur commence à faire défiler ; leur opacité suit. */
html.scene-active .accueil .etat:not(.image-gardee) picture{ display:none; }
html:is(.scene-active, .scene-relais) .accueil .acte:not([data-fenetre="non"]) > .etat::before{
  box-shadow:0 0 0 100vmax var(--fond);
}
@media (min-aspect-ratio: 6/5) and (min-width: 640px){
  html:is(.scene-active, .scene-relais) .accueil .acte > .etat::before{ box-shadow:none; }
}

@media print{
  .etat, .bande, .scene-couche, .film-scene{ display:none !important; }
  .manifeste-mot{ opacity:1 !important; }
}