/* ============================================================================= intro-hero.css — bandeau d'ouverture ============================================================================= Repris de la maquette figee : `style.css` l. 293-332. ⚠️ LA BORNE HAUTE A ETE CORRIGEE : la premiere extraction partait de 296, soit AU MILIEU du commentaire-titre ouvert en 293. Le fichier recevait donc un delimiteur fermant orphelin, et surtout il perdait l'explication du `sticky`. Detecte par le comptage des delimiteurs, pas a la lecture — c'est exactement le mode de defaillance que `CLAUDE.md` decrit. ⚠️ ET LA CORRECTION A REPRODUIT LE DEFAUT : en ECRIVANT le delimiteur fermant dans cette phrase, j'ai referme ce commentaire douze lignes trop tot, et tout ce qui suivait est devenu du CSS. Ne jamais citer `slash-etoile` ni son inverse dans un commentaire CSS : les nommer en toutes lettres, comme ici. Les regles responsive de `mobile.css` sont EPARPILLEES sur quatre endroits (451, 883, 1249-1255, 1261, 1271) et partagees avec d'autres blocs — chacune est reprise seule, avec son motif, dans le bloc @media plus bas. ⚠️ LA SECTION EST `position:sticky`, ET CE N'EST PAS DECORATIF : elle reste collee en haut pendant que la section suivante remonte par-dessus. C'est la composition d'ouverture voulue depuis le 03/07 (« le hero planisphere n'est plus sticky — il recouvre le hero intro en remontant »). Retirer le `sticky` ne casse rien de visible tout de suite : ca supprime juste l'effet, en silence. ============================================================================= */ /* ========================================================================== HERO INTRO — photographe plein écran (NOUVEAU 03/07) Sticky top:0 : le hero planisphère (sibling suivant, sticky aussi) remonte par-dessus, puis .site-content (z210) par-dessus le tout. Fond sombre -> TEXTES CLAIRS. ========================================================================== */ /* ⚠️⚠️ `position:sticky` RETIRE LE 2026-10-06 — il etait dans la maquette, et le porter tel quel a CASSE la page. Signale par Alexandre : le bandeau restait colle en haut et les sections suivantes defilaient PAR-DESSUS lui en transparence, les textes superposes. Le mecanisme de la maquette tient a sa STRUCTURE, pas a cette ligne : ses deux bandeaux (`intro-hero` l. 301, `hero` l. 313) sont ECRITS AVANT `.site-content` (l. 440), donc DEHORS. C'est `.site-content`, opaque (`background:var(--creme)`) et en `z-index:210`, qui remonte par-dessus eux. Le sticky n'est que la moitie du dispositif. Chez nous, tous les blocs sont RENDUS DANS `.site-content` — le gabarit l'ouvre avant eux. Un bloc sticky y reste donc colle pendant que ses voisins, qui n'ont pas tous un fond opaque, glissent au-dessus sans le masquer. ⚠️ CE N'EST PAS REPARABLE PAR DU CSS DE BLOC : il faudrait que le premier bloc soit rendu HORS de `.site-content`, ce qui est une modification du GABARIT, pas du bloc. La question se reposera telle quelle pour `hero`, qui a le meme regime — a trancher a ce moment-la, pas en douce ici. ⚠️ Ne pas remettre `position:sticky` en lisant la maquette : sans le changement de structure, il reproduit exactement le defaut. */ .intro-hero{ position:relative; height:100vh; overflow:hidden; display:flex; align-items:center; color:var(--blanc); background:#241d12; } /* G3 (Nicolas 18/07, images fournies par Fix le 19/07) : le hero fait DÉFILER 3 photos. 2 couches superposées se croisent en fondu (la couche du dessus porte la photo suivante) : aucun clignotement, et la première photo est celle du CSS -> visible même sans JS. */ .intro-hero__bg{ position:absolute; inset:0; background:url('../img/hero/photographe.jpg') center/cover no-repeat; } .intro-hero__bg--next{ opacity:0; transition:opacity 1.4s ease; } .intro-hero__bg--next.is-on{ opacity:1; } @media (prefers-reduced-motion: reduce){ .intro-hero__bg--next{ transition:none; } /* pas de fondu : la photo reste fixe */ } /* voile : sombre du côté du TEXTE + léger assombrissement bas -> lisibilité du slogan. Par défaut texte à gauche ; variante .intro-hero--txt-right = photo avec sujet à gauche. */ .intro-hero__veil{ position:absolute; inset:0; background:linear-gradient(to right, rgba(14,14,14,.74) 0%, rgba(14,14,14,.40) 45%, rgba(14,14,14,.06) 78%), linear-gradient(to top, rgba(14,14,14,.42) 0%, rgba(14,14,14,0) 38%); } .intro-hero--txt-right .intro-hero__veil{ background:linear-gradient(to left, rgba(14,14,14,.74) 0%, rgba(14,14,14,.40) 45%, rgba(14,14,14,.06) 78%), linear-gradient(to top, rgba(14,14,14,.42) 0%, rgba(14,14,14,0) 38%); } .intro-hero--txt-right .intro-hero__inner{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; } .intro-hero__inner{ position:relative; z-index:1; } /* RÈGLE LISIBILITÉ : fond photo sombre -> surtitre en JAUNE (pas le gris foncé par défaut de .eyebrow) */ .intro-hero .eyebrow{ color:var(--jaune); } .intro-hero__slogan{ font-size:clamp(46px,6.4vw,92px); line-height:1.02; margin:16px 0 24px; color:var(--blanc); } .intro-hero__txt{ font-size:var(--fs-body); line-height:1.65; color:rgba(255,255,255,.85); max-width:46ch; } /* indicateur de scroll : label + flèche qui rebondit doucement */ .intro-hero__scroll{ position:absolute; left:50%; transform:translateX(-50%); bottom:26px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; font-size:var(--fs-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.85); transition:color .25s var(--ease); } .intro-hero__scroll:hover{ color:var(--jaune); } /* rollover jaune (demande Fix) */ .intro-hero__arrow{ display:block; animation:introBounce 1.8s ease-in-out infinite; } @keyframes introBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } } @media (prefers-reduced-motion: reduce){ .intro-hero__arrow{ animation:none; } } /* ============================================================================= APPARITION A L'ARRIVEE — en CSS, la ou la maquette emploie GSAP ============================================================================= La maquette ecrit `gsap.fromTo(items, {y:26, opacity:0}, {y:0, opacity:1, duration:0.9, ease:'power3.out', stagger:0.12, delay:0.2})` sur quatre elements. GSAP est ecarte (D121) et ces trois tweens devaient etre refaits a la main. ⚠️ REFAITS EN CSS ET NON EN JS, deliberement. Une animation de chargement en JavaScript doit masquer ses elements au depart ; si le script ne tourne pas — erreur, fichier non charge —, ils restent masques POUR TOUJOURS. C'est le piege des « inversions » que `CLAUDE.md` decrit. Une `@keyframes` se joue des que le CSS est la : il n'y a pas d'etat ou le texte resterait invisible. Valeurs reprises telles quelles : 26px, 0.9s, cascade de 0.12s, retard de 0.2s. `power3.out` de GSAP = cubic-bezier(.215,.61,.355,1). ============================================================================= */ @keyframes introMonte{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } } .intro-hero .eyebrow, .intro-hero__slogan, .intro-hero__txt, .intro-hero__scroll{ animation:introMonte .9s cubic-bezier(.215,.61,.355,1) both; } .intro-hero .eyebrow { animation-delay:.20s; } .intro-hero__slogan { animation-delay:.32s; } .intro-hero__txt { animation-delay:.44s; } .intro-hero__scroll { animation-delay:.56s; } /* ⚠️ `both` ci-dessus porte l'etat initial — donc sous `prefers-reduced-motion` il faut RETIRER l'animation, pas seulement la raccourcir, sinon les elements resteraient a `opacity:0`. C'est la meme precaution que la maquette prend en sortant de sa fonction. */ @media (prefers-reduced-motion: reduce){ .intro-hero .eyebrow, .intro-hero__slogan, .intro-hero__txt, .intro-hero__scroll{ animation:none; } } /* ============================================================================= RESPONSIVE — quatre regles, prises UNE A UNE dans des @media partagees ============================================================================= ⚠️ AUCUNE de ces regles n'est seule dans son bloc chez la maquette : · l. 451 partage avec `.hero`, `.cfiche`, `.feature`, `.py-culture__bg`… ; · l. 883 partage avec une dizaine de neutralisations de survol tactile ; · l. 1271 partage avec `.feature__inner` et `.cta-devis__inner`. Cette derniere a d'ailleurs ete OUBLIEE dans `feature.css` le 2026-10-05 et rattrapee le lendemain : le piege mord vraiment. ============================================================================= */ @media (max-width:1024px){ /* Hauteur : la photo n'occupe plus tout l'ecran, pour que le texte + l'en-tete + l'indicateur tiennent. */ .intro-hero{ height:min(120vw, 78dvh); min-height:420px; } /* Typographie d'un cran plus basse. */ .intro-hero .eyebrow{ font-size:11px; letter-spacing:.14em; } .intro-hero__slogan{ font-size:clamp(32px,8.4vw,64px); margin:10px 0 16px; } .intro-hero__txt{ font-size:var(--fs-small); line-height:1.55; max-width:32ch; } .intro-hero__scroll{ font-size:11px; bottom:16px; } /* Cadrage : sujet a droite sur telephone. */ .intro-hero__bg{ background-position:right center; } /* Gouttiere portee a 24px. */ .intro-hero__inner{ padding-inline:24px; } /* Pas de rollover sur tactile : il reste « colle » apres le tap. */ .intro-hero__scroll:hover{ color:inherit; } }