/* ============================================================
   FOC STUDIO — PAGE DEVIL'S TOUCH
   Sections propres à la page :
   - Hero "flammes" (GIF mask + reveal du grand titre)
   - C'est pour toi si…        (repris du Diagnostic, fond rose)
   - Concrètement, tu obtiens quoi ?  (grille, fond feu)
   - Comment ça se passe        (repris du Diagnostic, fond noir)
   - Résultats clients / Demande ton offre / Pas encore prêt·e ?
   (Titres = système global base.css · cartes = primitive .card)
   ============================================================ */

/* ============================================================
   HERO — Flammes SVG mask + reveal du titre
   ------------------------------------------------------------
   Repris À L'IDENTIQUE de la v-animation : un <image> GIF couleur
   en fond plein écran, et le grand titre « DEVIL'S TOUCH » masqué
   (mask: url(#dt-flame-mask)) par un GIF noir/blanc des flammes →
   le texte se découpe dans la forme du feu. Le titre fade-in se
   synchronise au chargement du GIF (.is-revealed, cf. JS).
   ============================================================ */
.dt-hero {
  position: relative;
  /* Le CONTENEUR est en 100% (= largeur de contenu, hors scrollbar) : 100vw
     inclurait la scrollbar et créerait une barre horizontale parasite sur
     desktop. Les ENFANTS (flammes + titre masqué) restent en 100vw : ils sont
     déjà clippés par l'overflow:hidden ci-dessous, et leur 100vw partagé garde
     l'alignement du masque SVG (cf. .dt-hero__flames / .dt-hero__brand). */
  width: 100%;
  height: 100dvh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  background: var(--feu);
  overflow: hidden;
  padding: 0;
}

/* SVG plein écran : les flammes couleur en fond. Le dimensionnement en
   100vw/100vh (et NON %) est nécessaire pour que le mask SVG (userSpaceOnUse)
   s'aligne sur le titre masqué, lui aussi en 100vw. */
.dt-hero__flames {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.dt-hero__flames image,
.dt-hero__flames mask image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.dt-hero__flames > image { z-index: -1; }

/* Wrapper du titre = simple conteneur d'opacité (porte la taille de police
   dont hérite le span masqué). Caché au départ → fade-in synchro au GIF. */
.dt-hero__brand-wrap {
  font-family: var(--font-title);
  font-size: clamp(3.8rem, 9.5vw, 116px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  opacity: 0;
}
.dt-hero__brand-wrap.is-revealed {
  /* delay 1.3s = 13 frames × 0.1s du GIF → le texte apparaît pile quand
     les flammes ont "pris". */
  animation: dtFlameTitleSync 0.1s linear 1.3s forwards;
}
@keyframes dtFlameTitleSync {
  to { opacity: 1; }
}

/* Le grand titre masqué = brand display (élément graphique à part, hors
   système des 3 titres : sa taille lui est propre, comme le logo géant du
   hero d'accueil). Le texte noir se découpe dans la forme des flammes via
   le mask SVG. Occupe les 70% hauts du hero. */
.dt-hero__brand {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 70%;
  display: block;
  align-content: center;
  text-align: center;
  color: var(--noir);
  mask: url(#dt-flame-mask);
  -webkit-mask: url(#dt-flame-mask);
}

/* Contenu : ligne SEO + tagline + CTA, posés sous la zone du titre flammes. */
.dt-hero__content {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(3rem, 7vw, 6rem);
  text-align: center;
  color: var(--noir);
}

.dt-hero__seo { color: var(--noir); }

.dt-hero__tagline {
  font-family: var(--font-body);
  color: var(--noir);
  max-width: 760px;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  text-transform: inherit;
}

.dt-hero__cta {
  display: flex;
  justify-content: center;
  min-height: 3.4rem;   /* réserve la place du CTA jumpy quand il s'arrime (.jump-cta) */
}

/* ============================================================
   2. C'EST POUR TOI SI… (fond rose) — liste à flèches feu
   ------------------------------------------------------------
   Reprise de la mise en page diagnostic.php (.diag-pourtoi).
   ============================================================ */
.dt-pourtoi {
  background: var(--rose);
  padding: var(--section-pad) var(--gutter);
  min-height: 100vh;
  align-content: center;
}
.dt-pourtoi-inner { max-width: var(--max-width); margin: 0 auto; }
.dt-pourtoi-title { color: var(--noir); margin-bottom: var(--title-gap); }

/* Liste (pas de cartes) : flèche feu + énoncé, séparés par un filet fin. */
.dt-pourtoi-list {
  list-style: none;
  max-width: 920px;
}
.dt-pourtoi-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.18);
}
.dt-pourtoi-arrow {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.25;
  color: var(--feu);
}
.dt-pourtoi-desc {
  font-family: var(--font-body);
  color: var(--noir);
  line-height: 1.1;
  text-wrap-style: balance;
  display: block;
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-weight: 600;
}

/* ============================================================
   3. CONCRÈTEMENT, TU OBTIENS QUOI ? (fond feu) — grille de cartes
   ------------------------------------------------------------
   Mise en page v-animation : 3 colonnes, fond feu (comme .offres /
   le hero d'accueil). Cartes = primitive .card (.card--ghost-light).
   ============================================================ */
.dt-concret {
  background: var(--feu);
  padding: var(--section-pad) var(--gutter);
}
.dt-concret-inner { max-width: var(--max-width); margin: 0 auto; }
.dt-concret-title {
  color: var(--noir);
  text-align: center;
  margin-bottom: var(--title-gap);
}

.dt-concret-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Gaps resserrés (façon v-animation) → boîtes plus larges et plus homogènes. */
  gap: 1rem;
}

/* CTA sous les cartes "Concrètement" → relance vers la demande d'offre. */
.dt-concret-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* .dt-concret-card : structure portée par .card (voir base.css). */
.dt-concret-card-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--noir);
  margin-bottom: 0.75rem;
}
.dt-concret-card p {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  color: var(--noir);
  line-height: 1.45;
}

/* ============================================================
   DÉVOILEMENT "EN VOLET" — wipe clip-path au scroll
   ------------------------------------------------------------
   Rappel des rideaux de la v-animation, mais en version sobre et
   robuste : js/devils-touch.js anime le clip-path d'une section
   .dt-volet de "fermé" (inset droite 100%) à "ouvert" quand elle
   entre dans le viewport. Sans JS / reduced-motion : visible direct.
   ============================================================ */
.dt-volet { will-change: clip-path; }

/* ============================================================
   RIDEAUX (curtain) — base FIGÉE (pin) + section qui s'OUVRE
   en clip-path PAR-DESSUS (reprise fidèle de la v-animation) :
   - "Comment ça se passe"  s'ouvre droite → gauche sur "Concrètement"
   - "Demande ton offre"    s'ouvre bas → haut sur les résultats
   Pin + scrub clip-path gérés par js/devils-touch.js. La base reste
   visible derrière, le rideau la recouvre à mesure qu'il s'ouvre.
   Desktop uniquement (≥ 1025px) ; en dessous, flux vertical normal.
   ============================================================ */
.dt-curtain { position: relative; }

/* La superposition n'est active QUE quand le JS la pilote (classe .is-curtain
   ajoutée par js/devils-touch.js sur desktop, hors reduced-motion). Sans JS /
   reduced-motion : flux vertical normal, tout reste lisible. */
@media (min-width: 1024px) {
  .dt-curtain.is-curtain { isolation: isolate; }

  /* ---------- MODE "WIPE PINNÉ" (rideau 2 : formulaire) ----------
     La scène est figée 100vh ; le rideau (over) s'ouvre en clip-path
     PAR-DESSUS la base, puis on libère. Base + over superposés en absolute. */
  .dt-curtain.is-curtain:not(.dt-curtain--release) {
    height: 100vh;
    overflow: hidden;
  }
  .dt-curtain.is-curtain:not(.dt-curtain--release) .dt-curtain__base {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .dt-curtain.is-curtain:not(.dt-curtain--release) .dt-curtain__over {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
  }
  /* Le formulaire (court) est centré dans l'écran. */
  .dt-curtain.is-curtain .dt-curtain__over.dt-form-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* ---------- MODE "RELEASE" (rideau 1 : Concrètement figée / process libéré) ----------
     Superposition sticky : "Concrètement" se FIGE (sticky 100vh) et le process,
     en flux normal juste après, DÉFILE NATURELLEMENT par-dessus (z-index > base).
     Comme le wrapper fait 100vh + hauteur du process, "Concrètement" reste figée
     pendant TOUT le défilement du process → chaque étape/numéro respire. Le
     rideau d'ouverture (clip-path droite→gauche) est ajouté en JS pendant l'entrée. */
  .dt-curtain--release.is-curtain { position: relative; }
  .dt-curtain--release.is-curtain .dt-concret {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .dt-curtain--release.is-curtain .dt-process {
    position: relative;
    z-index: 2;
    min-height: 100vh;            /* couvre toujours la base figée (pas de débord) */
    /* commence sous le header (logo) → le titre SEO n'est jamais masqué */
    padding-top: clamp(7rem, 13vh, 9.5rem);
    padding-bottom: var(--section-pad);
  }
}

/* ============================================================
   4. COMMENT ÇA SE PASSE (fond noir)
   ------------------------------------------------------------
   Reprise de la mise en page diagnostic.php (.diag-process).
   ============================================================ */
.dt-process {
  background: var(--noir);
  padding: var(--section-pad) var(--gutter);
  color: var(--blanc);
}
.dt-process-inner { max-width: var(--max-width); margin: 0 auto; }
.dt-process-label { color: var(--feu); }
.dt-process-title { color: var(--blanc); margin-bottom: var(--title-gap); }
.dt-process-title .text-feu { color: var(--feu); }

/* Flux : un grand numéro qui "voyage" à gauche + la liste des étapes. */
.dt-process-flow {
  position: relative;
  max-width: 960px;
  /* --num-size = taille du grand numéro (source unique). La gouttière en
     découle : largeur du numéro (~1.25em à 2 chiffres) + un petit écart
     proportionnel. → l'espacement suit DYNAMIQUEMENT la taille du texte,
     jamais de débordement ni de trou béant, à toutes les largeurs. */
  --num-size: clamp(2rem, 6vw, 6rem);
  padding-left: calc(var(--num-size) * 1.45 + 0.5rem);
}
/* Le numéro voyageur : suit l'étape active (JS) — change de valeur ET de position. */
.dt-process-num {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--num-size);
  line-height: 0.8;
  /* Jamais de retour à la ligne ni de débordement sur le filet des étapes. */
  white-space: nowrap;
  color: var(--feu);
  opacity: 0;
  transition: transform 0.5s var(--ease-out-quart), opacity 0.4s ease;
  pointer-events: none;
}
.dt-process-num.is-on { opacity: 1; }

.dt-process-steps {
  list-style: none;
  /* Reset du padding/marge par défaut du <ol> (sinon ~40px d'indent ajouté
     fausseraient l'espacement calculé via la gouttière). */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Étapes bien espacées → elles se révèlent l'une après l'autre au scroll. */
  gap: clamp(2rem, 5vw, 5rem);
}
/* Chaque étape = filet vertical + titre + description. */
.dt-process-step {
  border-left: 2px solid rgba(255, 255, 255, 0.18);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  transition: border-color 0.4s ease;
}
.dt-process-step.is-active { border-left-color: var(--feu); }

/* Reveal propre au process (piloté par js/devils-touch.js) : caché tant que
   l'étape n'est pas .is-shown. */
@media (prefers-reduced-motion: no-preference) {
  .dt-process-step {
    opacity: 0;
    transform: translateX(-30px);
    transition: border-color 0.4s ease,
                opacity 0.7s var(--ease-out-quart),
                transform 0.7s var(--ease-out-quart);
  }
  .dt-process-step.is-shown { opacity: 1; transform: none; }
}
.dt-process-step h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--blanc);
  margin-bottom: 0.6rem;
}
.dt-process-step p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--light-text);
  line-height: 1.5;
}

/* ============================================================
   6. DEMANDE TON OFFRE — formulaire (fond feu)
   ------------------------------------------------------------
   Porté de la v-animation (.dt3-* → .dt-form*), centré.
   ============================================================ */
.dt-form-section {
  background: var(--feu);
  padding: var(--section-pad) var(--gutter);
}
.dt-form-inner {
  width: min(720px, 100%);
  margin: 0 auto;
  text-align: center;
  color: var(--noir);
}
.dt-form-small { color: var(--noir); }
.dt-form-title { color: var(--noir); margin-bottom: 0.4rem; }

/* Honeypot anti-spam : hors écran (et non display:none, que certains bots
   ignorent). Invisible pour les humains, rempli par les robots. */
.dt-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Message de retour après envoi (succès / erreur), sur le fond feu. */
.dt-form__status {
  margin-top: 1.1rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--noir);
  text-wrap: balance;
}
.dt-form__status.is-error { color: var(--noir); text-decoration: underline; text-underline-offset: 3px; }
.dt-form__submit.is-loading { opacity: 0.6; pointer-events: none; }
.dt-form-sub {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1vw, 1rem);
  color: var(--noir);
  opacity: 0.8;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.dt-form {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
}
.dt-form__group { border: 0; padding: 0; margin: 0; }
.dt-form__label {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  margin-bottom: 0.6rem;
  color: var(--noir);
}
.dt-form__req { margin-left: 2px; }

.dt-form__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.dt-form__choice { position: relative; cursor: pointer; display: block; }
.dt-form__choice input { position: absolute; opacity: 0; pointer-events: none; }
.dt-form__choice-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.25rem;
  padding: clamp(0.8rem, 1.6vw, 1.2rem) 1rem;
  border: 2px solid var(--noir);
  background: transparent;
  color: var(--noir);
  transition: background 0.25s ease, color 0.25s ease;
  min-height: 88px;
}
.dt-form__choice:hover .dt-form__choice-box { background: rgba(10, 10, 10, 0.06); }
.dt-form__choice input:checked + .dt-form__choice-box {
  background: var(--noir);
  color: var(--feu);
}
.dt-form__choice input:focus-visible + .dt-form__choice-box {
  outline: 2px solid var(--noir);
  outline-offset: 3px;
}
.dt-form__choice-title {
  font-family: var(--font-title);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}
.dt-form__choice-desc {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  opacity: 0.8;
  line-height: 1.2;
}

.dt-form__field { position: relative; }
.dt-form__field input,
.dt-form__field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--noir);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1rem);
  color: var(--noir);
  padding: 1.4rem 0 0.5rem;
  outline: none;
  resize: none;
}
.dt-form__field textarea { min-height: 70px; padding-top: 1.6rem; }
.dt-form__field label {
  position: absolute;
  left: 0;
  top: 1.2rem;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1rem);
  color: var(--noir);
  opacity: 0.75;
  pointer-events: none;
  transition: top 0.2s ease, font-size 0.2s ease, opacity 0.2s ease;
}
.dt-form__field input:focus + label,
.dt-form__field input:not(:placeholder-shown) + label,
.dt-form__field textarea:focus + label,
.dt-form__field textarea:not(:placeholder-shown) + label {
  top: 0;
  font-size: 0.72rem;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dt-form__field input:focus,
.dt-form__field textarea:focus { border-bottom-width: 2px; }

.dt-form__actions { display: flex; justify-content: flex-end; margin-top: 0.4rem; }
.dt-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--noir);
  color: var(--feu);
  font-family: var(--font-title);
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.95rem 1.8rem;
  border: 0;
  cursor: pointer;
  transition: transform 0.25s ease;
}
.dt-form__submit:hover { transform: scale(1.04); }
.dt-form__arrow { transition: transform 0.25s ease; }
.dt-form__submit:hover .dt-form__arrow { transform: translateX(4px); }

/* ============================================================
   7. PAS ENCORE PRÊT·E ? — redirect Diagnostic (fond rose, centré)
   ============================================================ */
.dt-redirect {
  background: var(--rose);
  padding: clamp(4rem, 7vw, 8rem) var(--gutter);
  text-align: center;
  min-height: 60vh;
  align-content: center;
}
.dt-redirect-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dt-redirect-small {
  color: var(--noir);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.dt-redirect-title { color: var(--noir); }
.dt-redirect-title .text-feu { color: var(--feu); }

/* Lien "le Diagnostic" : on GARDE la mise en forme du titre (taille/typo/feu),
   mais on lui donne l'ANIMATION du .btn--inline (la flèche FOC qui slide, injectée
   par main.js). Les dimensions de la flèche/lane sont en em → à l'échelle du titre. */
.dt-redirect-title .dt-redirect-link {
  font: inherit;                 /* hérite de la taille/typo du titre-user */
  color: var(--feu);
  text-transform: inherit;
  letter-spacing: inherit;
  padding: 0 0.85em 0 0;         /* "lane" de la flèche, proportionnelle au texte */
  vertical-align: baseline;
}
.dt-redirect-title .dt-redirect-link .btn__arr {
  width: 0.6em;
  height: 0.6em;
  margin-top: -0.1em;
}
.dt-redirect-title .dt-redirect-link .btn__arr--2 { left: -0.85em; }
.dt-redirect-title .dt-redirect-link:hover .btn__text { transform: translateX(0.85em); }
.dt-redirect-title .dt-redirect-link:hover .btn__arr--1 { right: -0.85em; }
.dt-redirect-title .dt-redirect-link:hover .btn__arr--2 { left: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .dt-concret-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .dt-hero__brand-wrap { height: 45%; }
  .dt-concret-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dt-form__choices { grid-template-columns: 1fr; }
  .dt-form__choice-box { min-height: 72px; }
}