/* ==========================================================================
   Accueil V3 (maquette validée accueil-v3)
   Le cube de Marco en chrome fumé, les 4 univers, les 6 étapes avec leur chiffre en 3D,
   « Décrivez votre projet. », la montée dans les nuages, le 800 € en 3D, puis Genève.
   Classes posées par accueil.js sur <html> :
   « immersion » (la mise en scène au défilement), « scene3d » (le cube est dessiné),
   « sans3d » (pas de 3D), « chiffres3d » et « prix3d » (chiffres et prix en 3D prêts).
   Sans « immersion » (moins de mouvement, pas de 3D, script en panne), la page est simple :
   les univers les uns sous les autres avec leur couleur, les étapes en liste, le prix à plat.
   ========================================================================== */

.page-home { --nuit-accueil: #050506; }

/* Le fond change de couleur avec chaque univers. Un aplat, jamais un dégradé. */
.fond { position: fixed; inset: 0; z-index: 0; background: var(--nuit-accueil); }
/* La toile suit la fenêtre visible (sculpture.js dessine à sa taille) : sur iPhone, 100vh dépasse quand les barres de Safari sont affichées */
.scene { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
html:not(.anime) .scene { position: absolute; bottom: auto; height: 100vh; height: 100svh; }
.sans3d .scene { display: none; }
/* Les chiffres des étapes et le 800 €, sur leur propre toile, au-dessus des nuages */
.relief { position: fixed; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }

.btn--grand { min-height: 58px; padding: 0 30px; font-size: 18px; }

/* 1. L'ouverture : le cube à droite, le titre de Marco en très grand */
/* Titre, introduction et signature empilés depuis le bas : le titre garde toujours son écart avec l'introduction,
   quelle que soit la hauteur de l'écran (avant, chacun avait sa place fixe et ils se touchaient sur un portable) */
.ouverture { position: relative; z-index: 4; height: 100vh; min-height: 640px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gouttiere) 26px; }
.ouverture h1 { max-width: 56vw; margin-bottom: clamp(28px, 4.5vh, 48px); font-size: clamp(2.4rem, 5.1vw, 5.6rem); line-height: 1.02; letter-spacing: -.045em; text-wrap: initial; }
.ouverture h1 .ligne { display: block; }
.ouverture h1 .gris { color: var(--gris); }
.ouverture .intro { max-width: 520px; margin-bottom: max(24px, calc(11vh - 46px)); font-size: 18px; line-height: 1.5; color: var(--doux); }
.ouverture .signature { font-size: 13px; color: var(--gris); }
.ouverture .defiler { position: absolute; right: var(--gouttiere); bottom: 26px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris); }
.ouverture .defiler .icone { width: 14px; height: 14px; fill: currentColor; }
/* Le titre attend sa police pour monter ligne par ligne. Si le script ne démarre jamais, il s'affiche au bout de 4 s. */
html.anime:not(.titre-pret) .ouverture h1 { visibility: hidden; animation: titre-secours 0s linear 4s forwards; }
@keyframes titre-secours { to { visibility: visible; } }

/* 2. « Mes créations » : le cube se brise en éclats autour du titre */
.eclat { position: relative; z-index: 4; padding: 18vh var(--gouttiere) 10vh; }
.eclat h2 { text-align: center; font-size: clamp(2.6rem, 7vw, 7rem); letter-spacing: -.05em; line-height: 1; text-wrap: wrap; }
.immersion .eclat { height: 170vh; padding: 0; }
.immersion .eclat h2 { position: sticky; top: 42vh; }

/* 3. Les univers. Page simple : les uns sous les autres, chacun sur sa couleur.
   Avec l'immersion : chacun reste en place pendant qu'on le parcourt, sur le fond qui change de couleur. */
.univers { position: relative; z-index: 4; background: var(--fond-univers); }
.univers__scene { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); align-items: center; gap: 4vw; padding: 90px var(--gouttiere) 80px; }
.immersion .univers { height: 230vh; background: none; }
.immersion .univers__scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.univers__texte { position: relative; z-index: 2; }
.univers__nom { font-size: clamp(3rem, 7.4vw, 8rem); }
.u-cless .univers__nom { font-size: clamp(3.4rem, 8.6vw, 9.4rem); }
.univers__media { position: relative; height: 72vh; display: flex; align-items: center; justify-content: center; }
.porte { position: relative; width: 100%; overflow: hidden; border-radius: 6px; }
.porte img { width: 100%; height: 100%; object-fit: cover; }
.porte--ordi { aspect-ratio: 16 / 10; }
.porte--tel { position: absolute; width: 23%; aspect-ratio: 780 / 1688; left: -6%; bottom: -4%; border-radius: 14px; }
.porte--tel img { object-position: top; }
.u-pepite .porte--tel { outline: 1px solid rgb(243 235 221 / .25); }
.u-cless .porte { aspect-ratio: 16 / 9; }
.u-cless .porte img { position: absolute; inset: 0; filter: saturate(.55) contrast(1.05); }
.u-cless .porte .deux, .u-cless .porte .trois { opacity: 0; }
.u-glace .porte { border-radius: 12px; outline: 3px solid #140b22; }
.u-glace .porte--tel { border-radius: 18px; }
.u-rappel .porte { width: auto; height: 100%; aspect-ratio: 780 / 1688; border-radius: 22px; outline: 1px solid rgb(241 243 238 / .2); }
.u-rappel .porte img { object-position: top; }

/* 4. Comment se passe un projet. Page simple : la liste numérotée.
   Avec l'immersion : la section reste en place et les étapes passent une par une, dès le départ
   (la page ne change pas de longueur quand les chiffres en 3D arrivent). Avec les chiffres en 3D,
   le numéro écrit laisse sa place au gros chiffre chromé. */
.etapes-zone { position: relative; z-index: 4; padding: 30vh var(--gouttiere) 8vh; }
.etapes-zone h2, .appel h2 { margin: 0 0 7vh; max-width: 52vw; font-size: clamp(2.4rem, 5vw, 5rem); line-height: 1; letter-spacing: -.045em; text-wrap: wrap; }
ol.etapes { max-width: 34em; display: grid; gap: 6vh; counter-reset: etape; }
.etape { counter-increment: etape; }
.etape h3 { margin: 0 0 10px; font-size: clamp(1.6rem, 2.8vw, 2.6rem); letter-spacing: -.03em; line-height: 1.1; }
.etape h3::before { content: counter(etape) ". "; color: var(--gris); }
.etape p { font-size: 17px; line-height: 1.55; color: var(--doux); }
.etapes__ancre { display: none; }
.immersion .etapes-zone { height: 460vh; padding: 0; }
.immersion .etapes__scene { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0 var(--gouttiere); display: flex; flex-direction: column; justify-content: center; }
.immersion .etapes-zone h2 { margin-bottom: 6vh; }
.immersion ol.etapes { gap: 0; }
.immersion .etape { grid-area: 1 / 1; opacity: 0; }
.chiffres3d .etape h3::before { content: none; }
.chiffres3d .etapes__ancre { display: block; position: absolute; right: 4vw; top: 16vh; width: 42vw; height: 68vh; pointer-events: none; }

/* « Décrivez votre projet. » : le cube se reforme à droite */
.appel { position: relative; z-index: 4; padding: 22vh var(--gouttiere) 48vh; }
.appel p { margin: 0 0 30px; max-width: 30em; font-size: 18px; line-height: 1.55; color: var(--doux); }
.appel .actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
html:not(.immersion) .appel { padding-bottom: 22vh; }

/* 5. La montée : le cube descend et sort par le bas pendant que les nuages de la V2 montent */
.plongee { display: none; }
.immersion .plongee { display: block; height: 150vh; }
.ciel-bloc { position: relative; }
/* Page simple : les nuages derrière la phrase, les 4 points et le prix */
.ciel { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #a9b9cb; }
.ciel video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ciel__brume { position: absolute; inset: 0; background: rgb(242 244 248 / .42); }
.ciel__nuit { display: none; }
/* Avec l'immersion : les nuages attendent sous l'écran, puis montent et prennent toute la place (la montée).
   Montée douce (choix de Marco en V9) : les nuages dépassent l'écran vers le haut et leur bord haut est fondu,
   et un voile de nuit s'efface pendant la montée (accueil.js) : on entre dans les nuages sombres puis le jour se lève */
.immersion .ciel { position: fixed; top: -40vh; transform: translateY(100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28%); mask-image: linear-gradient(to bottom, transparent 0, #000 28%); }
.immersion .ciel__nuit { display: block; position: absolute; inset: 0; background: linear-gradient(180deg, #050506 0%, #121a2b 55%, #2a3550 100%); }

/* 6. Dans les nuages : la phrase, les 4 points et le prix, en texte foncé comme en V2 */
/* Sur ordinateur, le texte des nuages est dans une colonne centrée de 1040 px (choix de Marco en V9 : il n'a rien
   à côté de lui, et collé à gauche il laissait un grand vide à droite) */
.ciel-zone { position: relative; z-index: 4; color: var(--encre); padding: 22vh max(var(--gouttiere), calc((100vw - 1040px) / 2)) 55vh; }
.ciel-zone .manifeste { max-width: 900px; margin: 0 0 22vh; font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1.22; letter-spacing: -.025em; font-weight: 500; }
.immersion .ciel-zone .mot { opacity: .2; }
ul.faits { max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px 48px; }
.fait b { display: block; margin-bottom: 8px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.fait span { display: block; font-size: 16px; line-height: 1.55; color: rgb(14 23 38 / .8); }
.prix { margin-top: 26vh; }
.prix .de { margin: 0 0 6px; font-size: 22px; font-weight: 500; }
.prix .montant { margin: 0 0 28px; font-size: clamp(6rem, 19vw, 17rem); font-weight: 600; letter-spacing: -.06em; line-height: .88; }
/* Le prix en 3D se pose sur le prix à plat, qui reste là pour le survol et les lecteurs d'écran */
.prix3d .prix .montant { color: transparent; cursor: default; }
.prix .detail { margin: 0 0 22px; max-width: 34em; font-size: 18px; line-height: 1.55; }
.prix a { display: inline-block; padding-block: 4px; font-weight: 600; text-underline-offset: 6px; }
.ciel-zone :focus-visible { outline-color: var(--encre); }

@media (max-width: 900px) {
  /* En bas, la place du bouton fixe « Créer mon site » */
  .ouverture { padding-bottom: 84px; }
  .ouverture h1 { max-width: none; font-size: clamp(2.2rem, 9.6vw, 3.6rem); }
  .ouverture .intro { margin-bottom: max(16px, calc(12vh - 104px)); font-size: 16px; }
  .ouverture .defiler { display: none; }
  .immersion .univers { height: 240vh; }
  .univers__scene { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-content: start; gap: 22px; padding: 76px var(--gouttiere) 90px; }
  .univers__media { order: -1; height: 40vh; }
  .univers__nom { margin-bottom: 12px; font-size: clamp(2.6rem, 13vw, 4.2rem); }
  .u-cless .univers__nom { font-size: clamp(3rem, 15vw, 5rem); }
  .univers__type { font-size: 16px; margin-bottom: 8px; }
  .univers__fait { font-size: 15px; margin-bottom: 16px; }
  .porte--ordi { aspect-ratio: auto; height: 100%; }
  .porte--tel { width: 30%; left: auto; right: 4%; bottom: -6%; }
  .etapes-zone { padding: 24vh var(--gouttiere) 6vh; }
  .immersion .etapes__scene { padding: 0 var(--gouttiere) 15vh; justify-content: flex-end; }
  .immersion .etapes-zone h2 { margin-bottom: 3vh; }
  .chiffres3d .etapes__ancre { left: var(--gouttiere); right: var(--gouttiere); top: 9vh; width: auto; height: 34vh; }
  .etape p { font-size: 16px; }
  .appel { padding: 16vh var(--gouttiere) 40vh; }
  .etapes-zone h2, .appel h2 { max-width: none; }
  .etapes-zone h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .ciel-zone { padding: 18vh var(--gouttiere) 26vh; }
  ul.faits { grid-template-columns: 1fr; gap: 28px; }
}