/* ==========================================================================
   « Pizza dans le ciel » — les sections de l'accueil
   ========================================================================== */

/* =======================================================================
   1. LE VOL — haut de page
   Le décor du monde 1 défile vers le bas en boucle : on monte.
   Trois plans : le ciel peint (fixe, en parallaxe douce), la bande qui
   défile, le voile qui rend le texte lisible.
   ===================================================================== */
.vol{position:relative;overflow:hidden;min-height:92svh;display:flex;flex-direction:column;justify-content:center;background:var(--ciel)}
.vol-ciel{position:absolute;inset:-14% 0 -14%;z-index:0}
.vol-ciel img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
/* Le sol, lui, défile : il occupe le bas du cadre et se fond dans le ciel.
   Le fondu se fait au masque, pour que la peinture ne soit pas coupée net.
   L'image est posée en ligne dans le HTML : une url() passée par variable CSS
   se résout depuis la FEUILLE, pas depuis la page — piège vérifié le 24/09. */
.vol-sol{position:absolute;left:0;right:0;top:54%;bottom:0;z-index:1;overflow:hidden;opacity:.94;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);
  mask-image:linear-gradient(180deg,transparent 0,#000 24%)}
/* Un seul plan, pavé par le navigateur — et non deux div empilées : leur
   jointure laissait une ligne d'un pixel dès que la translation tombait entre
   deux pixels, le « raccord » qui traversait l'écran au bout de trois secondes.
   La largeur du motif ne descend jamais sous 980 px : forcée à 100 % du cadre,
   la peinture était comprimée de 2 040 px à la largeur du téléphone et tout le
   décor paraissait étiré en hauteur. Le script recalcule cette taille en pixels
   entiers (le pavage d'une hauteur fractionnaire laisse, lui aussi, une ligne). */
.vol-defile{position:absolute;left:0;right:0;top:0;height:260%;will-change:transform;
  background-repeat:repeat-y;background-position:center top;background-size:max(100%,980px) auto}
/* Deux voiles : un halo sous le texte pour qu'il reste lisible quoi qu'il passe
   derrière, et un dégradé qui ramène la page au papier en bas de cadre. */
.vol-voile{position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(116% 74% at 24% 40%,rgba(247,240,226,.88) 0%,rgba(247,240,226,.52) 44%,rgba(247,240,226,0) 72%),
    linear-gradient(180deg,rgba(247,240,226,.40) 0%,rgba(247,240,226,.14) 26%,rgba(247,240,226,.26) 56%,rgba(247,240,226,.80) 90%,var(--papier) 100%)}
@media (max-width:900px){
  .vol-voile{background:
    radial-gradient(120% 60% at 50% 52%,rgba(247,240,226,.9) 0%,rgba(247,240,226,.55) 46%,rgba(247,240,226,0) 76%),
    linear-gradient(180deg,rgba(247,240,226,.46) 0%,rgba(247,240,226,.2) 26%,rgba(247,240,226,.3) 56%,rgba(247,240,226,.82) 90%,var(--papier) 100%)}
}
.vol-dedans{position:relative;z-index:3;display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:24px;padding-top:86px;padding-bottom:9vh}
.vol-sur{font-family:var(--titre);font-style:italic;font-weight:500;font-size:16px;color:var(--terre-f);letter-spacing:.05em}
.vol h1{font-size:clamp(48px,8.2vw,94px);margin:8px 0 0;text-shadow:0 2px 0 rgba(255,255,255,.62)}
.vol h1 em{display:block;font-size:.46em;font-weight:500;font-style:italic;margin-top:4px;color:var(--terre)}
.vol-phrase{max-width:27ch;margin:20px 0 0;font-size:clamp(17px,2.1vw,21px)}
.vol-note{margin-top:10px;font-size:15px;color:var(--encre)}
.vol-magasins{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.vol-part{display:flex;justify-content:center;align-items:flex-end}
.vol-part img{width:clamp(210px,30vw,390px);filter:drop-shadow(0 18px 28px rgba(60,44,30,.3));will-change:transform}
.vol-fleche{position:absolute;left:50%;bottom:18px;z-index:4;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-decoration:none;color:var(--encre-doux);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.vol-fleche svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
@media (max-width:900px){
  .vol-dedans{grid-template-columns:1fr;text-align:center;padding-top:92px;padding-bottom:7vh}
  .vol-phrase{margin-left:auto;margin-right:auto}
  .vol-magasins{justify-content:center}
  .vol-part{order:-1}
  .vol-part img{width:min(48vw,240px)}
}

/* =======================================================================
   2. LES CHIFFRES — bande kraft, comptés à l'entrée
   ===================================================================== */
.chiffres{background:var(--kraft);border-top:1px solid rgba(74,64,56,.12);border-bottom:1px solid rgba(74,64,56,.12)}
.chiffres .dedans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:center;
  padding-top:34px;padding-bottom:34px;text-align:center}
.chiffre{display:flex;flex-direction:column;justify-content:center;min-height:84px}
.chiffre b{display:block;font-family:var(--titre);font-weight:900;font-size:clamp(30px,4.4vw,46px);line-height:1;color:var(--terre-f)}
.chiffre span{display:block;margin-top:6px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-doux)}
@media (max-width:620px){
  .chiffres .dedans{grid-template-columns:repeat(2,1fr);gap:10px 18px;padding-top:26px;padding-bottom:26px}
  .chiffre{min-height:78px}
  .chiffre span{font-size:13px;line-height:1.3}
}

/* =======================================================================
   3. L'ASCENSION — les quinze ciels
   Sur grand écran : la section se fige et les mondes glissent pendant
   qu'on descend. Sur téléphone : un ruban qu'on fait glisser au doigt.
   ===================================================================== */
.ascension{background:var(--papier);padding:var(--rythme) 0 0}
.asc-chapeau{text-align:center;max-width:46ch;margin:0 auto 26px;padding:0 var(--gouttiere)}
.asc-chapeau h2{font-size:clamp(32px,5.2vw,50px)}
.asc-chapeau p{margin-top:14px;color:var(--encre-doux)}
.asc-arc{height:6px;border-radius:3px;max-width:var(--large);margin:0 auto 30px;
  background:linear-gradient(90deg,#c9d99a,#8fb36a,#d8b77f,#6fb2b8,#5b6f7d,#8a7f63,#b9c3cc,#7d9a6a,#6b5a4c,#2f2c30,#6d655c,#c98a52,#9a948c,#8e3b2c,#8d8f92)}

.asc-cadre{overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.asc-cadre::-webkit-scrollbar{display:none}
/* En mode figé, c'est le script qui déplace la piste : le cadre ne doit plus
   défiler tout seul, sinon les deux se battent. */
.fige .asc-cadre{overflow:hidden;scroll-snap-type:none}
.asc-piste{display:flex;gap:18px;padding:0 var(--gouttiere) 26px;will-change:transform}
.ciel{flex:0 0 auto;width:clamp(170px,21vw,232px);scroll-snap-align:center}
.ciel-vue{position:relative;border-radius:16px;overflow:hidden;background:var(--papier-o);
  aspect-ratio:620/1102;box-shadow:0 10px 26px rgba(60,44,30,.22);
  transition:transform .4s ease, box-shadow .4s ease}
.ciel:hover .ciel-vue{transform:translateY(-6px);box-shadow:0 16px 32px rgba(60,44,30,.3)}
.ciel-vue img{width:100%;height:100%;object-fit:cover}
.ciel-num{position:absolute;top:9px;left:9px;min-width:27px;height:27px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;font-family:var(--titre);font-weight:700;font-size:14px;
  background:rgba(247,240,226,.94);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ciel h3{margin-top:11px;font-size:17px}
.ciel p{font-size:14px;color:var(--encre-doux);margin-top:2px}

/* le tableau de bord de l'ascension : visible seulement en mode figé */
.asc-jauge{display:none;max-width:var(--large);margin:0 auto;padding:0 var(--gouttiere) 10px;align-items:center;gap:14px}
.asc-jauge-piste{flex:1;height:4px;border-radius:2px;background:rgba(74,64,56,.16);overflow:hidden}
.asc-jauge-part{display:block;height:100%;width:0;background:var(--terre);border-radius:2px}
.asc-jauge-nom{font-family:var(--titre);font-weight:700;font-size:15px;white-space:nowrap;min-width:14ch;text-align:right}
.fige .asc-jauge{display:flex}
/* Figée, la section tient dans un écran : les vignettes se dimensionnent sur la
   hauteur disponible, jamais sur une largeur fixe qui déborderait en bas. */
.fige{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:76px;padding-bottom:10px}
.fige .asc-chapeau{margin-bottom:20px}
.fige .ciel{width:calc(44svh * 620 / 1102)}
.fige .ciel-vue{height:44svh}
.asc-glisse{text-align:center;font-size:14px;color:var(--encre-doux);font-style:italic;padding-bottom:var(--rythme)}
.fige .asc-glisse{display:none}
/* Le voile qui dit « ça continue à droite » se pose sur la ZONE, jamais sur le
   cadre : un élément absolu posé dans un conteneur qui défile part avec lui, et
   le voile finissait au milieu de la deuxième vignette. */
.asc-zone{position:relative}
.asc-zone::after{content:'';position:absolute;top:0;right:0;bottom:26px;width:80px;pointer-events:none;
  background:linear-gradient(90deg,rgba(247,240,226,0),var(--papier))}
.fige .asc-zone::after{display:none}

/* =======================================================================
   4. LE JEU — un téléphone qui reste, un écran qui change
   Le téléphone tient tout seul avec `position: sticky` : pas d'épinglage
   JavaScript, donc rien à recalculer et rien à casser. Le script ne fait que
   changer l'écran et incliner l'appareil.
   ===================================================================== */
.jeu{background:var(--papier-c);padding:var(--rythme) 0}
.jeu-cadre{display:grid;grid-template-columns:1fr minmax(280px,40%);gap:clamp(26px,5vw,72px);align-items:start}

.jeu-mots{display:flex;flex-direction:column}
.jeu-mot{min-height:78vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.28;transition:opacity .5s ease}
.jeu-mot.actif{opacity:1}
.jeu-mot h3{font-size:clamp(26px,3.6vw,38px)}
.jeu-mot p{margin-top:14px}
.jeu-numero{display:inline-flex;align-items:center;gap:10px;font-family:var(--titre);font-weight:700;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--terre);margin-bottom:14px}
.jeu-numero::after{content:'';width:34px;height:2px;background:var(--terre);opacity:.5}
.bloc-liste{margin-top:16px;padding-left:0;list-style:none;color:var(--encre-doux)}
.bloc-liste li{padding:6px 0 6px 18px;position:relative}
.bloc-liste li::before{content:'·';position:absolute;left:4px;color:var(--terre);font-weight:700}
.bloc-liste b{color:var(--encre)}

.jeu-tel{position:sticky;top:calc(50vh - 27vh);display:flex;justify-content:center;perspective:1400px}
.jeu-tel .tel{width:clamp(200px,26vw,262px);will-change:transform}
.tel{position:relative;border-radius:32px;background:#1d1a17;padding:7px;
  box-shadow:0 22px 48px rgba(60,44,30,.38),0 2px 0 rgba(255,255,255,.32) inset}
.tel-ecran{position:relative;border-radius:25px;overflow:hidden;background:#000;aspect-ratio:390/844}
.tel-ecran img,.tel-ecran video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.06);backface-visibility:hidden;will-change:opacity,transform}
.tel-ecran img.on,.tel-ecran video.on{opacity:1;transform:scale(1)}
.tel-encoche{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:34%;height:16px;
  border-radius:0 0 12px 12px;background:#1d1a17;z-index:2}

/* le bloc d'histoire, pleine image, hors de la colonne qui défile */
.histoire{background:var(--papier-c);padding:0 0 var(--rythme)}
.histoire-cadre{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,72px);align-items:center;
  border-top:1px solid rgba(74,64,56,.13);padding-top:var(--rythme)}
.histoire-vue img{border-radius:18px;box-shadow:0 16px 36px rgba(60,44,30,.26)}
.histoire-mot h3{font-size:clamp(26px,3.6vw,36px)}
.histoire-mot p{margin-top:14px}

@media (max-width:900px){
  .jeu-cadre{grid-template-columns:1fr;gap:10px}
  .jeu-tel{position:sticky;top:78px;order:-1;margin-bottom:18px;
    padding:10px 0;background:linear-gradient(180deg,var(--papier-c) 72%,rgba(236,224,201,0))}
  .jeu-tel .tel{width:min(46vw,210px)}
  .jeu-mot{min-height:auto;padding:26px 0;opacity:1}
  .jeu-mot+.jeu-mot{border-top:1px solid rgba(74,64,56,.13)}
  .histoire-cadre{grid-template-columns:1fr;gap:22px}
}

/* =======================================================================
   LA MUSIQUE — dire le calme, et le faire entendre
   ===================================================================== */
.musique{background:var(--papier);padding:var(--rythme) 0;text-align:center}
.musique h2{font-size:clamp(30px,5vw,46px);max-width:18ch;margin:0 auto}
.musique-texte{max-width:52ch;margin:18px auto 0;color:var(--encre)}
.lecteur{display:flex;align-items:center;gap:18px;max-width:520px;margin:34px auto 0;
  padding:14px 18px;border-radius:999px;background:var(--papier-c);
  border:1px solid rgba(74,64,56,.16);box-shadow:0 6px 18px rgba(60,44,30,.10)}
.lecteur-bouton{display:inline-flex;align-items:center;gap:10px;flex:none;cursor:pointer;
  padding:10px 18px 10px 14px;border:0;border-radius:999px;font:inherit;font-weight:600;
  background:var(--terre);color:#fff;box-shadow:0 3px 0 var(--terre-f);transition:background .2s ease}
.lecteur-bouton:hover{background:var(--terre-f)}
.lecteur-icone{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #fff;margin-left:2px}
.lecteur-bouton[aria-pressed="true"] .lecteur-icone{width:12px;height:14px;border:0;margin-left:0;
  background:linear-gradient(90deg,#fff 0 4px,transparent 4px 8px,#fff 8px 12px)}
.lecteur-piste{flex:1;text-align:left;min-width:0}
.lecteur-nom{display:block;font-size:14px;color:var(--encre-doux);font-style:italic;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecteur-jauge{display:block;margin-top:7px;height:4px;border-radius:2px;background:rgba(74,64,56,.16);overflow:hidden}
.lecteur-part{display:block;height:100%;width:0;background:var(--terre);border-radius:2px}
@media (max-width:520px){
  .lecteur{flex-direction:column;border-radius:20px;gap:12px}
  .lecteur-piste{width:100%;text-align:center}
}

/* =======================================================================
   5. LE MUR DES BOSS
   ===================================================================== */
.boss{background:var(--nuit);color:var(--papier);padding:var(--rythme) 0;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:17px 17px}
.boss h2{font-size:clamp(32px,5.2vw,50px);text-align:center}
.boss-chapeau{text-align:center;max-width:44ch;margin:14px auto 34px;color:rgba(247,240,226,.68)}
.mur{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(13px,2vw,22px)}
@media (max-width:900px){.mur{grid-template-columns:repeat(2,1fr)}}
.carte{appearance:none;border:0;padding:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
/* Avant / après, en fondu et non en retournement 3D : une carte retournée dans
   un contexte `preserve-3d` n'est pas toujours repeinte — elle reste vide, ou
   montre encore sa face avant. Mesuré : zéro pixel de différence au clic.
   Le fondu, lui, se voit partout et se vérifie. */
.carte-face{display:block;position:relative;border-radius:13px;overflow:hidden;aspect-ratio:4/3;
  border:2px solid var(--or);box-shadow:0 12px 28px rgba(0,0,0,.46)}
.carte-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .45s ease, transform .6s ease}
.carte-face img+img{opacity:0}
.carte:hover .carte-face img,
.carte:focus-visible .carte-face img,
.carte[aria-pressed="true"] .carte-face img{transform:scale(1.04)}
.carte:hover .carte-face img+img,
.carte:focus-visible .carte-face img+img,
.carte[aria-pressed="true"] .carte-face img+img{opacity:1}
.carte-nom{display:block;margin-top:11px;font-family:var(--titre);font-weight:700;font-size:17px}
.carte-mot{display:block;font-size:14px;color:rgba(247,240,226,.62);font-style:italic}
.boss-note{margin-top:30px;text-align:center;font-size:14px;color:rgba(247,240,226,.55);font-style:italic}

/* =======================================================================
   6. LA FIN — être prévenu
   ===================================================================== */
.fin{position:relative;overflow:hidden;padding:var(--rythme) 0;text-align:center;background:var(--ciel)}
.fin-fond{position:absolute;inset:-10% 0 0;z-index:0}
.fin-fond img{width:100%;height:118%;object-fit:cover;object-position:center 40%}
.fin-voile{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(247,240,226,.9),rgba(247,240,226,.95))}
.fin .dedans{position:relative;z-index:2}
.fin h2{font-size:clamp(32px,5.2vw,50px)}
.fin p{margin-top:16px}
.formulaire{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.formulaire input[type=email]{flex:1 1 290px;max-width:370px;padding:14px 16px;font:inherit;font-size:16px;
  border:1px solid rgba(74,64,56,.34);border-radius:12px;background:rgba(255,255,255,.8);color:var(--encre)}
.formulaire input[type=email]:focus{border-color:var(--terre);background:#fff}
.formulaire-note{margin-top:14px;font-size:13px;color:var(--encre-doux)}
/* Laissée vide, la mention disparaît : le paragraphe reste dans la page pour
   qu'on puisse l'écrire depuis le Personnaliseur sans toucher au thème. */
.formulaire-note:empty{display:none}
.formulaire-reponse{margin-top:14px;font-weight:600;min-height:1.6em}

/* =======================================================================
   7. LE STUDIO — « créé par », en pleine page
   ===================================================================== */
/* La façade de nuit et son sol mouillé : le décor de la maquette du logo,
   repris tel quel (Logo/source/fond-nuit.png). Le chemin est relatif à CETTE
   feuille, donc ../img/ — c'est ce que le thème WordPress recopie aussi. */
.studio{position:relative;overflow:hidden;color:#D3DEEC;text-align:center;
  min-height:54svh;display:flex;align-items:center;
  padding:clamp(26px,4vh,44px) 0;
  background:#080818 url('../img/decor/fond-nuit.webp') center 58% / cover no-repeat}
.studio::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 36% at 50% 34%,rgba(22,119,255,.20),transparent 70%),
    radial-gradient(26% 24% at 62% 30%,rgba(181,28,120,.15),transparent 72%),
    linear-gradient(180deg,rgba(8,8,24,.58) 0%,rgba(8,8,24,.06) 28%,rgba(8,8,24,.04) 56%,rgba(8,8,24,.40) 86%,rgba(8,8,24,.72) 100%)}
.studio .dedans{position:relative;z-index:1}
.studio-mot{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#7A8BA6}
/* L'enseigne : le logo du studio en néon, qui s'allume quand on arrive dessus,
   et son reflet sur le sol mouillé — la copie retournée est fabriquée en JS
   pour qu'il n'y ait qu'un seul logo à maintenir. */
.studio-enseigne{position:relative;width:min(336px,66vw);margin:14px auto 0}
.studio-enseigne svg{display:block;width:100%;height:auto;overflow:visible}
/* L'intensité du néon : le fichier du logo donne le dessin, l'éclat se règle
   ici. Halo large sur la couche « lueur », rayonnement coloré sur le tube,
   pointe blanche sur le cœur — on vise le rendu de la maquette du studio. */
.studio-enseigne #lueur{filter:blur(13px) saturate(1.25)}
.studio-enseigne #tube{filter:drop-shadow(0 0 5px rgba(83,200,255,.5))}
.studio-enseigne #coeur{filter:drop-shadow(0 0 3px rgba(234,247,255,.75))}
/* Sans JavaScript, le néon s'allume quand même, en douceur, après un instant. */
.studio-enseigne #eteint{opacity:1}
.studio-enseigne :is(#lueur,#tube,#coeur){opacity:0;animation:pdc-secours .5s 3.4s forwards}
.studio-enseigne.pilotee :is(#lueur,#tube,#coeur){animation:none}
@keyframes pdc-secours{to{opacity:1}}
.studio-sol{position:absolute;left:0;right:0;top:100%;height:52%;margin-top:1%;z-index:0;pointer-events:none;opacity:.42;filter:blur(7px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.35) 38%,transparent 78%);
          mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.35) 38%,transparent 78%)}
.studio-sol svg{display:block;width:100%;height:100%;overflow:visible;transform:scaleY(-1)}
.studio-logo{width:min(340px,72vw);margin:20px auto 0}
.studio-phrase{position:relative;z-index:1;margin-top:86px;color:#9DAEC6;max-width:46ch;margin-left:auto;margin-right:auto}
.studio-lien{display:inline-block;margin-top:18px;color:#EAF7FF;text-decoration:none;
  border:1px solid rgba(83,200,255,.5);border-radius:999px;padding:11px 22px;font-weight:600;
  transition:box-shadow .25s ease, border-color .25s ease}
.studio-lien:hover{border-color:#53C8FF;box-shadow:0 0 22px rgba(22,119,255,.45)}

/* =======================================================================
   8. LE PIED
   ===================================================================== */
.pied{background:var(--papier-o);padding:30px 0 42px;font-size:14px;color:var(--encre-doux)}
.pied-liens{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center}
.pied a{color:var(--encre);text-decoration:none;border-bottom:1px solid rgba(74,64,56,.28)}
.pied a:hover{color:var(--terre)}
.pied-fin{margin-top:18px;text-align:center}