/* ==========================================================================
   Services (maquette validée methode-a3)
   Le ciel en journée pour « Ce que je fais pour vous » et les 5 services, le coucher de soleil
   pour « Comment se passe un projet » (le grand chiffre en vraie 3D), puis Genève.
   Classes posées sur <html> par services.js : « film » (sections qui restent en place),
   « relief3d » (chiffres en 3D prêts). Sans « film » (moins de mouvement, script en panne) :
   tout s'affiche à la suite, la méthode et les prix sur la nuit, chaque étape avec son numéro.
   ========================================================================== */

.decor { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: #9db8d9; }
.decor video, .decor img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Brume et voile réglés pour que le texte se lise sur le ciel (contrastes mesurés le 26 octobre, accord de Marco) */
.decor__brume { position: absolute; inset: 0; background: rgb(242 244 248 / .55); }
.decor__coucher { opacity: 0; }
.decor__voile { position: absolute; inset: 0; background: rgb(12 13 16 / .9); opacity: 0; }
/* 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 grand chiffre des étapes, dessiné par-dessus le décor */
.relief { position: fixed; inset: 0; z-index: 2; 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; }

/* Sur le ciel : texte foncé, et le menu passe en foncé (site.js) */
.ciel-zone { position: relative; z-index: 4; color: var(--encre); }

.entete { position: relative; height: 100vh; height: 100svh; }
.entete__texte { position: absolute; left: var(--gouttiere); right: var(--gouttiere); top: 26vh; }
.entete h1 { font-size: clamp(2.6rem, 6.4vw, 6.6rem); line-height: 1; letter-spacing: -.045em; }
.entete h1 span { display: block; }
.entete h1 .suite { color: rgb(14 23 38 / .55); }
.entete p { max-width: 40ch; margin-top: 28px; font-size: 18px; line-height: 1.55; color: rgb(14 23 38 / .78); }
/* Le titre monte à l'arrivée. Si le script ne démarre jamais, il s'affiche au bout de 4 s. */
html.anime .entete h1, html.anime .entete p { visibility: hidden; }
html.anime:not(.film) .entete h1, html.anime:not(.film) .entete p { animation: titre-secours 0s linear 4s forwards; }
@keyframes titre-secours { to { visibility: visible; } }

/* Les cinq services, les uns sous les autres */
.offres { position: relative; padding: 0 var(--gouttiere) 10vh; }
.offres__noms { display: none; }
.offre { max-width: 640px; margin-bottom: 72px; }
.offre h2 { margin-bottom: 12px; font-size: 2.2rem; line-height: 1.05; letter-spacing: -.04em; }
.offre .pour { margin-bottom: 26px; font-size: 21px; line-height: 1.4; letter-spacing: -.01em; font-weight: 500; }
.offre h3 { margin-bottom: 6px; font-size: 15px; letter-spacing: 0; line-height: 1.4; }
.offre p { margin-bottom: 22px; font-size: 16px; line-height: 1.55; color: rgb(14 23 38 / .92); }
.offre ul { margin-bottom: 24px; padding: 0; list-style: none; font-size: 16px; line-height: 1.45; }
.offre li { padding: 9px 0; border-top: 1px solid rgb(14 23 38 / .18); }
.offre li b { font-weight: 600; }
.offre li span { color: rgb(14 23 38 / .92); }

/* Comment se passe un projet, sur la nuit, chaque étape avec son numéro */
.methode { position: relative; z-index: 4; padding: 20vh var(--gouttiere); background: var(--nuit); }
.methode h2 { margin-bottom: 48px; font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -.03em; }
.etapes { counter-reset: etape; }
.etape { margin-bottom: 48px; max-width: 560px; counter-increment: etape; }
.etape h3 { margin-bottom: 18px; padding-bottom: .08em; overflow: hidden; font-size: clamp(2rem, 3.8vw, 3.8rem); line-height: 1.04; letter-spacing: -.04em; }
.etape h3 span { display: block; }
.etape h3 span::before { content: counter(etape) ". "; }
.etape p { max-width: 40ch; font-size: 19px; line-height: 1.55; color: rgb(242 244 248 / .94); }
.chiffres { display: none; }
/* Le chiffre en 3D remplace le numéro écrit */
html.relief3d .etape h3 span::before { content: none; }

.prix { position: relative; z-index: 4; padding: 8vh max(var(--gouttiere), calc((100% - 1180px) / 2)) 30vh; background: var(--nuit); }
.prix h2 { margin-bottom: 18px; font-size: clamp(2.2rem, 4.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.045em; }
.prix p { max-width: 58ch; margin-bottom: 28px; font-size: 17px; line-height: 1.6; color: var(--clair); }
.prix__actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }

html:not(.film) .fin { background: var(--nuit); }

/* Avec les animations : sur le coucher de soleil, la méthode reste en place et les étapes passent une à une */
html.film .methode, html.film .prix { background: none; }
html.film .methode { height: 100vh; height: 100svh; padding: 0; }
html.film .methode__cadre { position: absolute; inset: 0; max-width: 1280px; margin: 0 auto; }
html.film .methode h2 { position: absolute; left: var(--gouttiere); top: 15vh; margin: 0; }
/* Centrés par des marges automatiques et non par translate : GSAP reprend translate dans ses propres déplacements
   (y) et le perdait pour certaines étapes et certains services, qui tombaient sous le milieu de l'écran (bug V9) */
html.film .etape { position: absolute; left: 50%; right: var(--gouttiere); top: 0; bottom: 0; height: fit-content; margin: auto 0; }
html.film .chiffres { display: block; position: absolute; left: 0; top: 50%; width: 48%; height: 70vh; translate: 0 -46%; pointer-events: none; }

/* Sur ordinateur, la liste des services reste à gauche et le détail change à droite */
@media (min-width: 761px) {
  html.film .offres { height: 100vh; height: 100svh; padding: 0; }
  html.film .offres__noms { display: block; position: absolute; left: var(--gouttiere); top: 50%; translate: 0 -50%; }
  html.film .offres__noms a { display: block; padding: 4px 0; font-size: clamp(2rem, 3.4vw, 3.4rem); font-weight: 600; line-height: 1.12; letter-spacing: -.04em; text-decoration: none; opacity: .28; transition: opacity .4s; }
  html.film .offres__noms a.actif { opacity: 1; }
  /* Centré dans la place libre entre le menu du haut (84 px) et le bouton fixe (78 px en bas) : retour de Marco
     sur un écran de 610 px de haut, où le bouton passait sur le texte */
  html.film .offre { position: absolute; left: 52%; right: var(--gouttiere); top: 84px; bottom: 78px; height: fit-content; max-width: 540px; margin: auto 0; }
  html.film .offre h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Écrans d'ordinateur peu hauts (portables) : le détail des services se resserre pour tenir dans cette place */
@media (min-width: 761px) and (max-height: 760px) {
  html.film .offre .pour { margin-bottom: 14px; font-size: 18px; line-height: 1.35; }
  html.film .offre h3 { margin-bottom: 2px; font-size: 14px; }
  html.film .offre p { margin-bottom: 12px; font-size: 15px; line-height: 1.45; }
  html.film .offre ul { margin-bottom: 12px; font-size: 15px; line-height: 1.38; }
  html.film .offre li { padding: 5px 0; }
}

@media (max-width: 760px) {
  .entete__texte { top: 18vh; }
  .entete h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .entete p { font-size: 17px; }
  .offre .pour { font-size: 18px; }
  .etape h3 { font-size: 2.1rem; margin-bottom: 12px; }
  .etape p { font-size: 17px; }
  html.film .methode h2 { top: 12vh; }
  html.film .etape { left: var(--gouttiere); top: auto; bottom: 108px; margin: 0; }
  html.film .chiffres { width: 100%; top: 17vh; height: 40vh; translate: none; }
  .prix { padding-top: 4vh; padding-bottom: 24vh; }
}