/* ==========================================================================
   Tarifs (maquette validée tarifs-v3)
   Le 800 € en très grand et en vraie 3D, dans le chrome fumé du cube, sur les nuages voilés.
   Puis ce qui est compris, les exemples, ce qui fait varier le prix, « Bon à savoir »,
   les 10 questions fréquentes, le coucher de soleil, et la fin sur Genève.
   Classes posées sur <html> par tarifs.js : « film » (animations), « relief3d » (le prix en 3D est prêt),
   « sans-relief » (sans 3D, ou police des chiffres refusée : le prix reste écrit à plat).
   ========================================================================== */

/* Le décor : les nuages qui passent, voilés, puis le coucher de soleil */
.decor { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: var(--nuit); }
.decor video, .decor img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.decor__coucher { opacity: 0; }
.decor__voile { position: absolute; inset: 0; background: rgb(12 13 16 / .58); }
/* Le ciel s'éclaire à l'arrivée. Si le script ne démarre jamais, il s'affiche au bout de 4 s. */
html.anime .decor { opacity: 0; }
html.anime:not(.film) .decor { animation: decor-secours 0s linear 4s forwards; }
@keyframes decor-secours { to { opacity: 1; } }

/* Le prix en 3D, dessiné par-dessus le décor */
.relief { position: fixed; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
html:not(.relief3d) .relief { display: none; }

.lien { display: inline-block; padding-block: 4px; font-weight: 600; text-underline-offset: .35em; }

/* En haut : le prix d'entrée, en très grand et en relief */
.entete { position: relative; z-index: 4; height: 100vh; height: 100svh; }
.entete h1 { position: absolute; left: var(--gouttiere); top: 21vh; font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: -.03em; }
.entete h1 .haut { display: block; }
.prix-zone { position: absolute; left: 0; right: 0; top: 29vh; height: 44vh; pointer-events: none; }
/* Le prix à plat, montré seulement si la 3D ne peut pas s'afficher */
.prix-plat { position: absolute; left: 22px; top: 50%; translate: 0 -50%; font-size: min(40vh, 21vw); font-weight: 700; line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.relief3d .prix-plat { visibility: hidden; }
/* La zone qui réagit au survol, posée exactement sur le prix en 3D */
.prix-ancre { position: absolute; pointer-events: auto; }
.entete .sous { position: absolute; left: var(--gouttiere); top: 76vh; max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--doux); }
/* Le texte monte à l'arrivée. Si le script ne démarre jamais, il s'affiche au bout de 4 s. */
html.anime .entete h1 .haut, html.anime .entete .sous { visibility: hidden; }
html.anime:not(.film) .entete h1 .haut, html.anime:not(.film) .entete .sous { animation: titre-secours 0s linear 4s forwards; }
@keyframes titre-secours { to { visibility: visible; } }

.bloc { position: relative; z-index: 4; max-width: 1180px; margin: 0 auto; padding: 16vh var(--gouttiere) 6vh; }
.bloc h2 { margin: 0 0 40px; font-size: clamp(2.2rem, 4.2vw, 4rem); line-height: 1.02; letter-spacing: -.045em; }

.exemple { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 30px 0; border-top: 1px solid var(--ligne); }
.exemple h3 { margin: 0; padding-bottom: .08em; overflow: hidden; font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.1; letter-spacing: -.035em; }
.exemple h3 span { display: block; }
.exemple p { align-self: center; font-size: 18px; line-height: 1.5; color: var(--doux); }
.note-devis { margin: 44px 0 0; max-width: 52ch; font-size: 20px; line-height: 1.5; }
.vers-creations { margin: 20px 0 0; font-size: 17px; }

.variations ul, .compris ul { margin: 0; padding: 0; list-style: none; }
.variations li, .compris li { padding: 22px 0; border-top: 1px solid var(--ligne); font-size: clamp(1.25rem, 2vw, 1.8rem); line-height: 1.3; letter-spacing: -.02em; font-weight: 500; }

.savoir__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; }
.savoir__item { border-top: 1px solid var(--ligne); padding-top: 16px; }
.savoir__item b { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 600; }
.savoir__item p { max-width: 42ch; font-size: 16px; line-height: 1.55; color: var(--doux); }
/* Sur le coucher de soleil, le texte doux est un peu plus blanc qu'ailleurs (contrastes mesurés le 26 octobre) */
main { --doux: rgb(242 244 248 / .9); }

/* Les questions fréquentes : le style de la maquette sur les questions communes du site (site.css, site.js) */
.faq .faq__item:last-of-type { border-bottom: 1px solid var(--ligne); }
.faq .faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 500; letter-spacing: -.02em; }
.faq .faq__item summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -4px; transition: rotate .3s, translate .3s; }
.faq .faq__item[open] summary::after { rotate: 225deg; translate: 0 4px; }
.faq .faq__answer { padding-bottom: 26px; }
.faq .faq__answer p { max-width: 64ch; font-size: 17px; line-height: 1.6; }

.demande { padding-bottom: 26vh; }
.demande p { margin: 0 0 28px; max-width: 30ch; font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.15; letter-spacing: -.035em; font-weight: 600; }

@media (max-width: 760px) {
  .entete h1 { top: 15vh; }
  .prix-zone { top: 21vh; height: 30vh; }
  .prix-plat { left: 12px; font-size: 28vw; }
  .entete .sous { right: var(--gouttiere); top: 54vh; font-size: 17px; }
  .bloc { padding: 12vh var(--gouttiere) 4vh; }
  .exemple { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .savoir__grille { grid-template-columns: 1fr; gap: 28px; }
  .demande { padding-bottom: 20vh; }
}