/* LE FILS — intro « un toit qui se trace » + hero vivant (vidéo locale, titre mot par mot, parallaxe, pastilles). Préfixe : li-. À charger APRÈS /assets/eco/css/site.css. Tout ce qui est caché ici l'est par une classe posée par un mini-script du (html.li-pre / html.li-wait) ou par intro.js (html.li-hide) ; chaque cache se retire seul par animation CSS : sans JS ou en mouvement réduit, le site reste identique. Transform / opacity / stroke-dashoffset uniquement. Écrit le 16/10/2026 sur le squelette des intros V3 du parc (deux demi-rideaux, scène, garde-fous), geste propre à Le Fils : la charpente se dessine trait par trait, la couverture se pose, le logo apparaît. CHRONOLOGIE de l'intro (ms depuis l'insertion de l'overlay, dès le chargement de la page) : 0–180 la sablière (trait bleu marine, base du toit) se trace 40–350 les deux chevrons (rouge) montent vers le faîte, l'un après l'autre (40 ms d'écart) 190–370 le poinçon (bleu marine) descend du faîte ; 250–460 les deux jambes de force ; 340–470 l'entrait ; 380–540 deux lattes horizontales (fines) 300–830 la couverture se pose, rang par rang du BAS vers le HAUT (comme un couvreur), 7 rangs : 38 ms entre deux rangs, 6 ms entre deux tuiles, 220 ms par tuile (chute de 16 px, légère rotation, petit tassement) 700–900 le faîtage (trait rouge foncé qui suit les deux chevrons) se trace 800–1100 le toit s'efface (opacité 0) ; le logo Le Fils se pose au centre (0,3 s) sur un halo blanc 1100 le rideau s'ouvre en deux (gauche / droite), les mots du titre démarrent ; fin à 1550 ms 1600 retrait de l'overlay 2600 garde-fous CSS : rideau et overlay disparaissent seuls si le JS est mort 3600/3900 garde-fous CSS : titre / pastilles réapparaissent seuls Rideau CLAIR (blanc, léger dégradé chaud) : le logo de la V1 est rouge et bleu marine sur fond blanc (17:1) ; l'écran se fond dans l'accueil clair sans flash sombre. Tuiles rouges #BE0F10 / #a10d0c / #d4181a ; charpente bleu marine #2c3584 (celui du logo) et rouge ; contrastes : le logo (noir à 17:1 pour le rouge foncé) reste > 6:1 sur le halo ; le toit a disparu quand le logo atteint sa taille pleine. */ :root{--li-bg:radial-gradient(ellipse at 50% 46%,#ffffff 0,#fcfbf9 55%,#f1efea 100%);--li-ease:cubic-bezier(.2,.8,.2,1)} /* ---------- 0. Rideau clair dès le premier affichage (évite le flash du hero avant l'intro) ---------- Posé par le mini-script du (1re visite de la session seulement). Sorties de secours : intro.js retire la classe, l'animation le fait disparaître seule à 2,6 s, et il n'existe pas sans JS. */ @media (prefers-reduced-motion:no-preference){ html.li-pre::after{content:'';position:fixed;inset:0;z-index:99998;background:var(--li-bg);pointer-events:none;animation:liCover .01s linear 2.6s forwards} } @media (scripting:none){html.li-pre::after{display:none}} @keyframes liCover{to{opacity:0;visibility:hidden}} /* ---------- 1. INTRO : le toit qui se trace ---------- */ #li-intro{position:fixed;inset:0;z-index:99999;overflow:hidden;cursor:pointer;contain:strict;animation:liGone .01s linear 2.6s forwards} @keyframes liGone{to{opacity:0;visibility:hidden;pointer-events:none}} @media (scripting:none){#li-intro{display:none}} .li-half{position:absolute;top:0;bottom:0;width:50%;background:var(--li-bg);background-size:200% 100%;will-change:transform;transition:transform .45s cubic-bezier(.7,0,.2,1)} .li-hl{left:0;background-position:0 0} .li-hr{right:0;background-position:100% 0} .li-open .li-hl{transform:translateX(-101%)} .li-open .li-hr{transform:translateX(101%)} .li-fast .li-half{transition-duration:.3s} /* liseré rouge à la jointure, visible seulement pendant l'ouverture */ .li-half::after{content:'';position:absolute;top:0;bottom:0;width:2px;background:#BE0F10;box-shadow:0 0 14px 2px rgba(190,15,16,.45);opacity:0;transition:opacity .15s} .li-hl::after{right:0} .li-hr::after{left:0} .li-open .li-half::after{opacity:1} .li-scene{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .22s ease,transform .45s ease} .li-open .li-scene{opacity:0;transform:scale(1.05)} .li-scene>*{grid-area:1/1} /* le toit : un SVG 440 x 280 (construit par intro.js) ; chaque trait est un dont le tracé avance de 0 à 1 */ .li-roof{width:min(82vw,620px);height:auto;aspect-ratio:440/240;overflow:visible;animation:liDim .3s ease .8s forwards} .li-roof .li-tr{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:liTrace var(--du,.2s) cubic-bezier(.45,.05,.3,1) var(--d,0ms) forwards} .li-roof .li-b{stroke:#2c3584} .li-roof .li-r{stroke:#BE0F10} .li-roof .li-rd{stroke:#a10d0c} .li-roof .li-t{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:translateY(-16px) rotate(var(--rot,0deg));animation:liDrop .22s cubic-bezier(.3,.7,.3,1.1) var(--d,0ms) forwards; stroke:rgba(0,0,0,.18);stroke-width:.8} @keyframes liTrace{to{stroke-dashoffset:0}} @keyframes liDrop{0%{opacity:0;transform:translateY(-16px) rotate(var(--rot,0deg))}22%{opacity:1}70%{transform:translateY(1.5px) rotate(calc(var(--rot,0deg) * -.15))}100%{opacity:1;transform:none}} @keyframes liDim{to{opacity:0;transform:scale(1.04)}} .li-nologo .li-roof{animation:none} .li-glow{width:min(86vmin,720px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,255,255,.92) 34%,rgba(255,255,255,0) 68%);opacity:0;pointer-events:none;animation:liGlow .5s ease-out .8s forwards} @keyframes liGlow{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:scale(1)}} .li-logo{display:block;width:min(70vw,420px);height:auto;aspect-ratio:380/182;opacity:0;animation:liPop .3s cubic-bezier(.2,.9,.3,1.25) .82s forwards} @keyframes liPop{0%{opacity:0;transform:scale(.86)}100%{opacity:1;transform:none}} @media (max-width:480px){ .li-roof{width:86vw} .li-logo{width:76vw} } /* ---------- 2. HERO : vidéo locale, voile, titre mot par mot ---------- */ .lf-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;display:block;background:#1a1a1a} .li-par{scale:1.06;will-change:translate} .li-w{display:inline-block} .li-w>i{display:inline-block;font-style:normal;transition:opacity .7s var(--li-ease),transform .85s var(--li-ease),filter .7s ease;transition-delay:calc(var(--i,0)*70ms)} /* garde-fou CSS : même si le JS plante, les mots se montrent seuls au bout de 3,6 s */ html.li-hide .li-w>i{opacity:0;transform:translateY(.55em);filter:blur(6px);animation:liShow .01s linear 3.6s forwards} @keyframes liShow{to{opacity:1;transform:none;filter:none}} /* avant que le script ait découpé le titre (visites suivantes, sans rideau) : pas de flash du titre plein. Le mini-script du pose li-wait ; intro.js le retire dès que le titre est découpé ; sinon 3,6 s. */ html.li-wait h1,html.li-wait .li-garanties{opacity:0;animation:liWaitOut .01s linear 3.6s forwards} @keyframes liWaitOut{to{opacity:1}} /* VOILE : jusqu'au 23/10/2026, noir à 84-92 % derrière le texte (contrastes mesurés le 16/10 : titre 14,1:1, paragraphe 12,3:1, sur-titre 9,0:1). Le 23/10, Wakny a essayé 5 % puis 25 % de noir uniforme (trop clair), puis choisi la bannière « Noir & rouge » ci-dessous ; le contraste n'est plus garanti sur les toits clairs (jusqu'à 98 % de luminance) ; l'ombre portée ci-dessous le rattrape à vue sur captures 1440 / 390, sans mesure chiffrée. Boutons : #a10d0c sur blanc 8,14:1. */ /* BANNIÈRE « Noir & rouge Le Fils » (proposition D choisie par Wakny le 23/10/2026, démo le-fils-bannieres) : vidéo un peu désaturée + zoom très lent (propriété scale : intro.js déplace la vidéo avec translate), dégradé noir derrière le texte, lueur rouge discrète en bas à gauche et liseré rouge de 5 px en pied (li-voile-bas), trait rouge qui se dessine sous le titre. */ .lf-hero-video{filter:grayscale(.55) contrast(1.08) brightness(.95);animation:lfZoomLent 24s ease-in-out infinite alternate} @keyframes lfZoomLent{from{scale:1}to{scale:1.09}} .li-voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.65) 45%,rgba(0,0,0,.2) 100%)} .li-voile-bas{position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--accent),var(--accent)) bottom/100% 5px no-repeat,radial-gradient(ellipse 60% 50% at 0% 100%,rgba(190,15,16,.35),transparent 70%)} .li-hero-in h1{position:relative;padding-bottom:18px} .li-hero-in h1::after{content:"";position:absolute;left:0;bottom:0;height:5px;width:0;background:var(--accent);border-radius:3px;animation:lfTrait 1.1s cubic-bezier(.2,.7,.2,1) 1.8s forwards} @keyframes lfTrait{to{width:120px}} @media (max-width:1099px){.li-voile{background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.65) 55%,rgba(0,0,0,.25) 100%)}} @media (prefers-reduced-motion:reduce){.lf-hero-video{animation:none}.li-hero-in h1::after{animation:none;width:120px}} /* ombre portée sous le texte du hero, en renfort du dégradé noir */ .li-hero-in .eco-entree :is(.li-sur,h1,p){text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 18px rgba(0,0,0,.6)} @media (max-width:767px){ .lf-hero-video{object-position:62% 50%} } /* sur-titre du hero (V1 : « Couvreur · Bruxelles et alentours ») : rose très clair sur le voile noir */ .li-sur{display:block;font-size:13px;font-weight:700;color:#ffc4c4;text-transform:uppercase;letter-spacing:.14em} /* boutons du hero ROUGES, texte blanc (Wakny, 23/10/2026) : blanc sur #BE0F10 = 6,4:1 ; bouton sur le voile noir = 3,3:1 (≥ 3:1 exigé pour un composant) */ .li-btn-p{background:var(--accent)!important;color:#fff!important} .li-btn-p:hover{background:var(--accent-fonce)!important} /* mobile : le contenu du hero se resserre pour que les pastilles restent AU-DESSUS de la pastille de langue (bas gauche) et de la bulle d'appel (bas droite) sur un écran de 844 px de haut (le bas du texte est alors à ~730 px ; la pastille commence à ~776 px) */ @media (max-width:767px){ .li-hero-in{padding-top:36px!important;padding-bottom:104px!important} .li-hero-in .eco-entree{gap:18px!important} .li-btn-p{padding:14px 26px!important;font-size:14.5px!important} } /* passe commune (16/10/2026) : pastilles du hero et pastilles fixes (bulle d'appel en bas à droite, langue en bas à gauche). Le bloc du hero fait ~680 px de haut quelle que soit la hauteur de l'écran : sur un écran plus bas, ses pastilles (bas du bloc) tombaient dans la zone des deux pastilles fixes à l'arrivée sur la page. - téléphone de 604 à 783 px de haut : marge AU-DESSUS des pastilles seules (titre, texte et boutons ne bougent pas) pour qu'elles commencent SOUS le bord de l'écran, hors du coin des deux pastilles fixes ; elles se découvrent en défilant. À 784 px et plus elles tiennent dans l'écran avec ≥ 104 px libres sous elles (> les 82 px de la bulle) ; à 603 px et moins elles sont déjà sous le bord. - ordinateur de 760 px de haut et moins (portables, ~650 px utiles) : la marge haute du hero (120 px d'origine) se réduit jusqu'à 12 px et la hauteur minimale du hero (640 px) est levée, le hero prend la hauteur de son contenu : les pastilles remontent au-dessus de la pastille de langue (elle couvrait la 1re pastille entre ~665 et ~750 px de haut). */ @media (max-width:767px) and (min-height:604px) and (max-height:783px){ .li-garanties{margin-top:calc(100vh - 592px)!important;margin-top:calc(100svh - 592px)!important} } @media (min-width:768px) and (max-height:760px){ main#contenu>section[aria-label="Présentation"]{min-height:0!important} .li-hero-in{padding-top:clamp(12px,calc(100vh - 640px),120px)!important;padding-top:clamp(12px,calc(100svh - 640px),120px)!important} } /* ---------- 3. HERO : pastilles (verre léger + icône SVG), en cascade après le titre ---------- Même déclencheur que les mots du titre : html.li-hide (posée par intro.js, retirée à l'ouverture de l'intro). Garde-fou : sans JS ou si le script plante, elles apparaissent seules à 3,9 s. */ .li-garanties{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0;padding:0;list-style:none} .li-garanties li{display:inline-flex;align-items:center;gap:10px;padding:7px 18px 7px 8px;border-radius:40px;font-size:14px;font-weight:600;line-height:1.2;color:#fff; background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.08)),rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.3); -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2); box-shadow:0 10px 24px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22);text-shadow:0 1px 2px rgba(0,0,0,.35); transition:opacity .7s var(--li-ease),transform .85s var(--li-ease),filter .7s ease,background .3s,border-color .3s; transition-delay:calc(.75s + var(--i,0)*.14s),calc(.75s + var(--i,0)*.14s),calc(.75s + var(--i,0)*.14s),0s,0s} .li-g-ico{display:flex;flex:none;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%; background:rgba(255,90,90,.3);border:1px solid rgba(255,140,140,.7);color:#ffe6e6} .li-g-ico svg{display:block} .li-garanties li:hover{background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,.12)),rgba(0,0,0,.3);border-color:rgba(255,140,140,.85)} html.li-hide .li-garanties li{opacity:0;transform:translateY(16px) scale(.96);filter:blur(5px);transition:none;animation:liShow .01s linear 3.9s forwards} @media (max-width:480px){ .li-garanties{gap:8px} .li-garanties li{font-size:13px;padding:6px 14px 6px 6px;gap:8px} .li-g-ico{width:26px;height:26px} .li-g-ico svg{width:16px;height:16px} } /* ---------- Mouvement réduit : tout est coupé (la vidéo ne se lit pas non plus : intro.js + script du hero, il ne reste que l'affiche) ---------- */ @media (prefers-reduced-motion:reduce){ html.li-pre::after{display:none!important} #li-intro{display:none!important} .li-w>i{transition:none!important} html.li-hide .li-w>i{opacity:1!important;transform:none!important;filter:none!important;animation:none!important} html.li-wait h1,html.li-wait .li-garanties{opacity:1!important;animation:none!important} html.li-hide .li-garanties li{opacity:1!important;transform:none!important;filter:none!important;animation:none!important} .li-garanties li{transition:none!important} .li-par{scale:1;translate:none!important} }