/* Composant 2 : le héros de l'accueil. Le haut de la page est une feuille sur la presse :
   repères de coupe aux coins, logo 3D qui se peint, titre imprimé ligne par ligne, barre de contrôle en pied de feuille. */
.heros { max-width: 1440px; margin: 0 auto; padding: var(--espace-6) max(var(--espace-7), env(safe-area-inset-right, 0px)) var(--espace-8) max(var(--espace-7), env(safe-area-inset-left, 0px)); }
.heros__feuille {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto; column-gap: var(--espace-7);
  min-height: clamp(620px, calc(100vh - 84px - 64px), 860px); padding: var(--espace-7) var(--espace-7) 0;
}

.heros__texte { align-self: center; position: relative; z-index: 1; padding-bottom: var(--espace-6); }
.heros__titre { position: relative; isolation: isolate; margin: 0; font-family: var(--font-titre); font-weight: 700; font-size: clamp(44px, 5.1vw, 76px); line-height: 1.02; letter-spacing: -0.012em; text-wrap: balance; }
.heros__titre .ligne { display: block; }
/* Le titre s'imprime ligne par ligne, comme sous le rouleau encreur. */
@keyframes imprimer { from { clip-path: inset(-0.1em 100% -0.25em 0); } to { clip-path: inset(-0.1em -0.1em -0.25em 0); } }
.heros__titre .ligne { animation: imprimer 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(0.25s + var(--i, 0) * 0.14s); }
/* « grande série » : le pinceau bleu de l'en-tête, en grand. */
.heros__titre em { font-style: normal; position: relative; white-space: nowrap; }
.heros__titre em::after {
  content: ""; position: absolute; left: -0.06em; right: -0.1em; bottom: -0.04em; height: 0.2em; z-index: -1;
  background: url(/assets/img/pinceau-bleu.webp) center / 100% 100% no-repeat;
  animation: peindre 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.1s both;
}
@keyframes peindre { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.heros__chapo { margin: 28px 0 0; max-width: 33em; font-size: 20px; line-height: 30px; }
.heros__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin-top: 36px; }
.devis--grand { height: 58px; padding: 0 32px; font-size: 17px; }
.heros__whatsapp { display: grid; gap: 2px; text-decoration: none; font-size: 14px; line-height: 18px; color: var(--texte-doux); }
.heros__whatsapp strong { font-size: 17px; line-height: 22px; color: var(--texte); font-weight: 600; }
.heros__whatsapp:hover strong { text-decoration: underline; text-underline-offset: 4px; }

/* La scène 3D déborde un peu de sa colonne, vers la droite, comme un objet posé sur la feuille. */
.heros__scene { position: relative; min-height: 420px; }
.heros__scene canvas, .heros__repli { position: absolute; inset: -24px calc(-1 * var(--espace-7)) -8px -24px; width: calc(100% + 24px + var(--espace-7)); height: calc(100% + 32px); }
/* max-width: none : sans cela, la règle img { max-width: 100% } de la charte rétrécit le cadre de l'image fixe,
   qui tombe à côté du logo 3D (logo dédoublé pendant le fondu sur téléphone). */
.heros__repli { object-fit: contain; padding: 8%; max-width: none; }
.heros__scene.a-3d .heros__repli { opacity: 0; }
/* Téléphone : le logo 3D, monté après l'affichage de la page, remplace l'image fixe en fondu (heros.js). */
.heros__scene.fondu canvas { opacity: 0; transition: opacity 0.6s ease; }
.heros__scene.fondu .heros__repli { transition: opacity 0.6s ease; }
.heros__scene.fondu.a-3d canvas { opacity: 1; }

/* Barre de contrôle (styles communs dans charte.css) : dans le héros, elle prend toute la largeur de la feuille. */
.heros .barre-controle { grid-column: 1 / -1; margin: var(--espace-5) calc(-1 * var(--espace-7)) 0; padding: 12px var(--espace-7) 0; }

@media (max-width: 1000px) {
  .heros { overflow-x: clip; padding-top: var(--espace-4); padding-left: max(var(--espace-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--espace-4), env(safe-area-inset-right, 0px)); }
  .heros__feuille { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; padding: var(--espace-5) var(--espace-5) 0; }
  .heros__scene { order: -1; min-height: 0; aspect-ratio: 1 / 0.92; }
  .heros__scene canvas, .heros__repli { inset: -8px -24px 0; width: calc(100% + 48px); height: calc(100% + 8px); }
  .heros__texte { padding-bottom: var(--espace-4); }
  .heros__chapo { font-size: 18px; line-height: 28px; margin-top: 20px; }
  .heros__actions { margin-top: 28px; gap: 18px 28px; }
  .heros .barre-controle { margin-left: calc(-1 * var(--espace-5)); margin-right: calc(-1 * var(--espace-5)); padding-left: var(--espace-5); padding-right: var(--espace-5); }
}
@media (max-width: 420px) {
  .heros__titre { font-size: 40px; }
  .devis--grand { height: 52px; padding: 0 26px; font-size: 16px; }
}