,
sur l'accueil c'est un . */
section.scene {
margin-top: 0;
border-top: none;
padding: 0;
background: var(--c);
color: #FCFBF7;
/* La hauteur d'ecran se pose ICI, sur la section entiere, et non sur son
contenu : l'onglet « 1 · Votre image » est un enfant a part, et le
compter en dur dans un calc() faisait deborder le bas de 32 px. La
section se partage en colonne, l'onglet prend ce qu'il faut, le reste
va au contenu. */
height: calc(100svh - 63px);
min-height: 620px;
display: flex;
flex-direction: column;
}
/* `display: flex` d'auteur l'emporte sur le `display: none` que le navigateur
attache a [hidden] : sans cette ligne, l'ecran 1 resterait affiche sous la
caisse au passage a l'etape 2. */
section.scene[hidden] { display: none; }
section.scene .onglet {
position: static;
transform: none;
display: block;
width: max-content;
margin: 0 auto;
background: #FCFBF7;
color: #1D2F4F;
padding: 7px 24px 6px;
}
.scene-in {
/* Le contenu prend tout ce que l'onglet n'a pas pris. `min-height: 0` est
ce qui l'autorise a etre plus court que son contenu, donc a distribuer
une hauteur exacte au plateau. */
flex: 1 1 auto;
min-height: 0;
/* `width: 100%` n'est pas decoratif : dans une colonne flexible, une marge
laterale `auto` ANNULE l'etirement, et la boite se reduisait alors a la
largeur de son contenu (mesure : 620 px au lieu de 1128, affiche a 183 px
de large). La largeur explicite la remet a plat. */
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: clamp(14px, 2.2vh, 26px) 26px clamp(16px, 2.4vh, 30px);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(8px, 1.4vh, 18px);
}
.scene-tete { text-align: center; flex: none; }
.scene-titre {
font-family: "Anton", "Oswald", sans-serif;
font-weight: 400;
font-size: clamp(24px, 3.4vh, 40px);
line-height: 1;
letter-spacing: .005em;
text-transform: uppercase;
margin: 0;
color: #FCFBF7;
}
.scene-recette {
font-family: "Oswald", sans-serif;
font-weight: 500;
font-size: clamp(12px, 1.6vh, 15px);
letter-spacing: .14em;
text-transform: uppercase;
margin: 6px 0 0;
opacity: .82;
}
section.scene .parrain { margin: 0 0 8px; }
/* Le plateau : les univers a gauche, l'affiche au centre, les mises en page
a droite. Trois colonnes plutot qu'une pile, pour une raison mesuree : en
pile, les quatre vignettes mangeaient 270 px de hauteur et il ne restait que
337 px a l'affiche sur un ecran de 900. Posees sur les cotes, elles ne
coutent plus rien a la hauteur, l'affiche double, et la largeur qui etait
vide sert enfin a quelque chose. */
.scene-plateau {
flex: 1 1 auto;
min-height: 240px;
width: 100%;
display: grid;
grid-template-columns: minmax(132px, 196px) minmax(0, 1fr) minmax(118px, 168px);
/* La rangee prend TOUTE la hauteur du plateau : c'est elle qui donne sa
hauteur definie a la colonne du milieu, donc sa taille a l'affiche. */
grid-template-rows: minmax(0, 1fr);
gap: clamp(16px, 2.4vw, 40px);
}
/* Les deux colonnes de reglages se centrent sur la hauteur de l'affiche,
l'affiche, elle, s'etire. */
.scene-colonne { align-self: center; min-width: 0; }
.scene-etiquette {
font-family: "Oswald", sans-serif;
font-weight: 600;
font-size: 9.5px;
letter-spacing: .17em;
text-transform: uppercase;
margin: 0 0 10px;
opacity: .7;
text-align: center;
}
/* Les quatre univers en carre plutot qu'en colonne : quatre vignettes
empilees demandent 700 px de haut, le carre en demande 300, et le plateau
n'en a que 580 sur un ecran de 900. */
.scene-univers .bandeau { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 0; }
.scene-univers .bandeau p { font-size: 9px; margin-top: 5px; }
.scene-pages .rangagencement { grid-template-columns: 1fr; gap: 8px; margin-top: 0; }
.scene-pages .rangagencement label { padding: 11px 6px; }
/* La jauge du mur d'apercus, posee par mur.js juste apres les mises en page.
Sa mise en ligne (une puce, puis le texte) ne tient pas dans une colonne de
160 px : elle passe en bloc, et la puce disparait. */
.scene-pages .mur-jauge {
display: block;
color: #FCFBF7;
opacity: .72;
margin-top: 14px;
font-size: 9px;
line-height: 1.55;
text-align: center;
}
.scene-pages .mur-jauge i { display: none; }
/* L'affiche. Sa taille n'est plus commandee par sa largeur mais par la hauteur
qui reste, sans quoi elle deborde de l'ecran des que la fenetre est basse.
Le positionnement absolu est ce qui rend cette hauteur DEFINIE : dans une
simple boite flexible, le navigateur calcule d'abord la largeur d'apres le
contenu et `aspect-ratio` arrive trop tard. Mesure du 18/08 avant la
correction, contenu vide : 0 px de large sur 0 de haut. */
.scene-image { position: relative; height: 100%; min-height: 0; }
.scene-image .porte {
position: absolute;
inset: 0;
margin: auto;
height: 100%;
width: auto;
aspect-ratio: 3 / 4;
max-width: 100%;
background: transparent;
cursor: zoom-in;
box-shadow: 0 30px 60px -28px rgba(11, 24, 44, .55);
}
.scene-image .porte > [data-affiche] {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.scene-image .apercu-toile,
.scene-image .apercu-img {
height: 100%;
width: 100%;
object-fit: contain;
box-shadow: none;
border-radius: 0;
}
.scene-image .apercu-encours { height: 100%; width: 100%; aspect-ratio: auto; }
.scene-image .poster { height: 100%; }
/* Le bouton. Sur le bleu du présentoir, `var(--c)` serait bleu sur bleu :
il passe en crème, et c'est la seule tache claire pleine de l'écran. */
.scene-pied { flex: none; width: 100%; max-width: 420px; text-align: center; }
.scene-veux {
background: #FCFBF7;
color: #1D2F4F;
padding: 15px 30px;
font-size: 15px;
transition: transform .13s, box-shadow .13s;
box-shadow: 0 12px 26px -14px rgba(11, 24, 44, .7);
}
.scene-veux:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(11, 24, 44, .75); }
.scene-veux.inerte { background: rgba(252, 251, 247, .45); }
.scene-mention {
font-family: "Oswald", sans-serif;
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
margin: 10px 0 0;
opacity: .78;
}
.scene-mention a { text-decoration: underline; }
section.scene .alerte-longueur { flex: none; width: 100%; max-width: 620px; margin: 0; }
.scene-desamorce {
flex: none;
color: #FCFBF7;
opacity: .62;
max-width: 620px;
margin: 0;
text-align: center;
font-size: 11.5px;
line-height: 1.4;
}
/* Sous 900 px de haut, le texte de désamorce et le sous-titre mangent la
place de l'affiche : ils partent, l'affiche reste. */
@media (max-height: 780px) {
.scene-desamorce { display: none; }
.scene-image .jauge { font-size: 8.5px; letter-spacing: .1em; padding: 3px 7px; }
.scene-univers .bandeau p { font-size: 8.5px; }
}
@media (max-height: 640px) {
.scene-recette { display: none; }
}
/* Téléphone : on ne force plus l'écran unique, une affiche de 3/4 dans une
hauteur de 600 px donnerait un timbre-poste. Elle reprend sa largeur, et
la page redevient une page qui défile. */
@media (max-width: 900px) {
.scene { height: auto; min-height: 0; }
.scene-in { padding: 18px 20px 30px; gap: 16px; }
.scene-plateau {
grid-template-columns: 1fr;
min-height: 0;
gap: 16px;
max-width: 460px;
margin: 0 auto;
}
/* L'affiche repasse devant les reglages et reprend sa largeur : un 3/4
contraint par la hauteur d'un telephone donnerait un timbre-poste. */
.scene-image { order: -1; position: static; height: auto; }
/* `relative` et non `static` : la mention « apercu basse definition » est
posee en absolu DANS la porte, et une porte non positionnee la renvoyait
en bas de page, sous le pied. */
.scene-image .porte {
position: relative;
inset: auto;
height: auto;
width: 100%;
aspect-ratio: 3 / 4;
margin: 0;
}
.scene-univers .bandeau { grid-template-columns: repeat(4, 1fr); }
.scene-pages .rangagencement { grid-template-columns: repeat(3, 1fr); }
.scene-etiquette { text-align: left; }
.scene-desamorce { display: block; }
.scene-recette { display: block; }
}
/* ═══════════════════════════════════════════════════════════════════════
20/08/2026 — TELEPHONE : L'AFFICHE RECOUVRAIT LE STYLE ET LA MISE EN PAGE
Retour Sebastian, capture a l'appui : « dans l'image avec l'apercu de la
recette on ne peut pas changer de style ni de configuration ».
Les reglages etaient bien la, sous l'affiche, mais dessous au sens propre :
l'affiche leur passait par-dessus. Deux causes, toutes deux dans le bloc
telephone du 18/08, qui croyait avoir range la scene en pile.
1. `.scene { height: auto }` ne pouvait pas gagner contre le
`section.scene { height: calc(100svh - 63px) }` pose plus haut : une
classe seule ne bat pas un element plus une classe. La section gardait
donc une hauteur d'ecran, et le plateau la hauteur qui restait.
2. Le plateau gardait `grid-template-rows: minmax(0, 1fr)`, qui n'a de sens
qu'en trois colonnes. En pile, la premiere rangee - l'affiche - recevait
ce qui restait apres les reglages, soit 158 px mesures a 390 px de large,
pendant que la porte, elle, tenait son 3/4 sur 350 px de large, donc 466
px de haut. L'affiche debordait de 308 px, exactement de quoi couvrir
« Le style » et « La mise en page ».
Mesure avant : plateau 463 px, affiche 158, bandeau des styles a y=425 sous
une affiche qui descend a y=692. Les deux lignes ci-dessous suffisent.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
section.scene { height: auto; min-height: 0; }
.scene-plateau { grid-template-rows: auto; }
/* `1fr` vaut `minmax(auto, 1fr)` : une colonne ne descend pas sous la
largeur minimale de son contenu. Tant que l'apercu n'est pas revenu du
moteur, la vignette porte le mot « COMPOSITION », large de 85 px, et les
quatre colonnes reclamaient 373 px pour 350 disponibles : le quatrieme
style sortait de l'ecran, donc redevenait inatteignable, le defaut meme
qu'on repare ici. `minmax(0, 1fr)` rend aux colonnes le droit de retrecir. */
.scene-univers .bandeau { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scene-pages .rangagencement { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}