/* ========================================================================== POWERLOOP - Feuille de style principale Système : thème sombre unique (imposé par la charte : lettres blanches sur fond sombre). Accent unique : le rouge REC #FF4433. Rayons : 0 partout (cadre cinéma), sauf éléments interactifs en pilule. ========================================================================== */ /* --- Polices auto-hébergées (RGPD : aucun appel à un service tiers) ------- */ @font-face{font-family:'Audiowide';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/audiowide-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Audiowide';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/audiowide-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Sora';font-style:normal;font-weight:200 800;font-display:swap; src:url('../fonts/sora-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Sora';font-style:normal;font-weight:200 800;font-display:swap; src:url('../fonts/sora-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} /* --- Jetons ------------------------------------------------------------- */ :root{ /* Couleurs */ --noir:#08090B; --noir-2:#0E1013; --noir-3:#15181C; --noir-4:#1D2126; --trait:rgb(255 255 255 / .09); --trait-fort:rgb(255 255 255 / .22); --blanc:#F4F5F7; --gris:#9DA3AB; --gris-bas:#6C737B; --rec:#FF4433; --rec-vif:#FF6152; --rec-bas:#C4321F; /* Typographie */ --f-marque:'Audiowide',var(--f-texte); --f-texte:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; /* Formes : cadre cinéma net, interactif en pilule */ --r:0px; --r-pilule:999px; /* Rythme */ --gouttiere:clamp(1.25rem,5vw,4.5rem); --large:1440px; --sec:clamp(5.5rem,11vw,10rem); /* Mouvement */ --sortie:cubic-bezier(.16,1,.3,1); --doux:cubic-bezier(.65,0,.35,1); /* Couches */ --z-fond:0; --z-contenu:1; --z-entete:40; --z-menu:50; --z-modale:60; --z-intro:90; --z-grain:100; color-scheme:dark; } /* --- Base --------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem} body{ margin:0;background:var(--noir);color:var(--blanc); font-family:var(--f-texte);font-weight:300;font-size:clamp(1rem,.96rem + .2vw,1.0625rem); line-height:1.65;letter-spacing:-.005em; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } body.est-verrouille{overflow:hidden} /* Verrou de défilement pendant l'intro. Posé par un script en ligne dans le : si JavaScript est absent, la classe n'existe pas et la page reste défilable en toutes circonstances. */ html.intro-active,html.intro-active body{overflow:hidden} img,svg,video,canvas{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit} h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.04;text-wrap:balance} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} ::selection{background:var(--rec);color:#fff} :focus-visible{outline:2px solid var(--rec-vif);outline-offset:3px;border-radius:2px} .enveloppe{width:100%;max-width:var(--large);margin-inline:auto;padding-inline:var(--gouttiere)} .invisible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .saut-contenu{position:fixed;top:.5rem;left:.5rem;z-index:200;padding:.75rem 1.25rem;background:var(--rec);color:#fff;font-family:var(--f-marque);font-size:.75rem;transform:translateY(-160%)} .saut-contenu:focus{transform:none} /* --- Typographie utilitaire --------------------------------------------- */ .titre-xxl{font-size:clamp(2.375rem,1.35rem + 5vw,5.25rem)} .titre-xl{font-size:clamp(2.125rem,1.2rem + 4.2vw,4.25rem)} .titre-l{font-size:clamp(1.625rem,1.1rem + 2.2vw,2.75rem);letter-spacing:-.03em} .titre-m{font-size:clamp(1.25rem,1.05rem + .9vw,1.625rem);letter-spacing:-.025em;line-height:1.15} .chapeau{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.6;color:var(--gris);max-width:56ch;font-weight:300} .texte{color:var(--gris);max-width:68ch} .mention{ display:inline-flex;align-items:center;gap:.6rem; font-family:var(--f-marque);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase; color:var(--gris-bas); } .mention::before{content:"";width:1.75rem;height:1px;background:var(--rec)} /* --- Icônes -------------------------------------------------------------- */ .ic{width:1em;height:1em;flex:none;fill:currentColor} /* --- Boutons (seuls éléments en pilule) --------------------------------- */ .btn{ --fond:var(--rec); --texte:#fff; --bord:transparent; position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem; padding:.95rem 1.6rem;border:1px solid var(--bord);border-radius:var(--r-pilule); background:var(--fond);color:var(--texte);cursor:pointer; font-family:var(--f-marque);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;line-height:1; white-space:nowrap; transition:transform .28s var(--sortie),background-color .28s var(--doux),border-color .28s var(--doux),color .28s var(--doux),box-shadow .28s var(--doux); } .btn .ic{font-size:1.05em;transition:transform .35s var(--sortie)} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.985)} .btn--primaire:hover{background:var(--rec-vif);box-shadow:0 10px 30px -12px rgb(255 68 51 / .7)} .btn--primaire:hover .ic{transform:translateX(3px)} .btn--fantome{--fond:transparent;--texte:var(--blanc);--bord:var(--trait-fort)} .btn--fantome:hover{--bord:var(--blanc);background:rgb(255 255 255 / .06)} .btn--clair{--fond:var(--blanc);--texte:var(--noir)} .btn--clair:hover{--fond:#fff} .btn[disabled]{opacity:.5;pointer-events:none} /* Lien fléché */ .lien-fleche{ display:inline-flex;align-items:center;gap:.55rem; font-family:var(--f-marque);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase; color:var(--blanc);padding-bottom:.35rem;border-bottom:1px solid var(--trait-fort); transition:border-color .3s var(--doux),color .3s var(--doux); } .lien-fleche .ic{transition:transform .35s var(--sortie)} .lien-fleche:hover{border-color:var(--rec);color:var(--rec-vif)} .lien-fleche:hover .ic{transform:translate(3px,-3px)} /* --- Point REC (marque, pas décor) -------------------------------------- */ .rec{width:.5rem;height:.5rem;border-radius:50%;background:var(--rec);flex:none} @media (prefers-reduced-motion:no-preference){ .rec--vivant{animation:battement 1.6s steps(1,end) infinite} } @keyframes battement{0%,49%{opacity:1}50%,100%{opacity:.15}} /* ========================================================================== En-tête ========================================================================== */ .entete{ position:fixed;inset:0 0 auto;z-index:var(--z-entete); transition:background-color .4s var(--doux),border-color .4s var(--doux),backdrop-filter .4s; border-bottom:1px solid transparent; } .entete.est-collee{ background:rgb(8 9 11 / .78);backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--trait); } @media (prefers-reduced-transparency:reduce){.entete.est-collee{background:var(--noir);backdrop-filter:none}} .entete__barre{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:72px} @media(max-width:900px){.entete__barre{height:64px}} .logo{display:flex;align-items:center;gap:.75rem} .logo img{height:20px;width:auto} @media(max-width:900px){.logo img{height:17px}} .nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.25rem)} .nav__lien{ position:relative;font-family:var(--f-marque);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase; color:var(--gris);padding:.4rem 0;transition:color .25s var(--doux);white-space:nowrap; } .nav__lien::after{ content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--rec); transform:scaleX(0);transform-origin:right;transition:transform .4s var(--sortie); } .nav__lien:hover,.nav__lien[aria-current="page"]{color:var(--blanc)} .nav__lien:hover::after,.nav__lien[aria-current="page"]::after{transform:scaleX(1);transform-origin:left} .entete__actions{display:flex;align-items:center;gap:1rem} .entete .btn{padding:.7rem 1.15rem;font-size:.6875rem} .burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:1px solid var(--trait);border-radius:var(--r-pilule);cursor:pointer;font-size:1.15rem} @media(max-width:980px){ .nav,.entete__actions .btn{display:none} .burger{display:inline-flex} } /* Menu plein écran */ .menu{ position:fixed;inset:0;z-index:var(--z-menu);background:var(--noir); display:grid;grid-template-rows:auto 1fr auto; /* Le menu mesure environ 500 px de haut. Sur un telephone tenu en paysage (844 x 390, par exemple), son bas depassait la fenetre et RIEN ne permettait de l'atteindre : pas d'overflow ici, et body en overflow:hidden pendant l'ouverture. L'adresse, le telephone et le bouton « Demander un devis » — l'appel a l'action du menu — etaient donc inaccessibles, y compris au clavier, ou le focus partait hors ecran. */ overflow-y:auto;overscroll-behavior:contain; opacity:0;visibility:hidden;transition:opacity .45s var(--doux),visibility .45s; } .menu.est-ouvert{opacity:1;visibility:visible} .menu__haut{display:flex;align-items:center;justify-content:space-between;height:64px} /* min-height:0 : sans lui, la piste « 1fr » de la grille refuse de se reduire sous la taille de son contenu, et le defilement ci-dessus ne servirait a rien. */ .menu__corps{display:flex;flex-direction:column;justify-content:center;gap:.25rem;padding-block:2rem;min-height:0} .menu__lien{ font-size:clamp(2rem,9vw,3.25rem);font-weight:700;letter-spacing:-.04em;line-height:1.15; color:var(--blanc);opacity:0;transform:translateY(18px); transition:opacity .5s var(--sortie),transform .5s var(--sortie),color .25s; } .menu.est-ouvert .menu__lien{opacity:1;transform:none;transition-delay:calc(.06s * var(--i,0) + .1s)} .menu__lien:hover{color:var(--rec-vif)} .menu__bas{padding-bottom:2.5rem;display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center;border-top:1px solid var(--trait);padding-top:1.5rem} .menu__contact{display:flex;flex-direction:column;gap:.35rem;font-size:.9375rem;color:var(--gris)} .menu__contact a:hover{color:var(--blanc)} /* ========================================================================== Héros (accueil) ========================================================================== */ .heros{position:relative;min-height:100dvh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate} .heros__scene{position:absolute;inset:0;z-index:var(--z-fond)} .heros__scene canvas{width:100%;height:100%;display:block} .heros__repli{ position:absolute;inset:0;display:grid;align-items:center;justify-items:end; padding-right:clamp(1rem,6vw,7rem); background:radial-gradient(110% 75% at 72% 42%,#1b2027 0%,#0c0e12 52%,#08090B 100%); } .heros__repli[hidden]{display:none} .heros__repli img{width:min(38vw,300px);opacity:.14;filter:blur(.5px)} @media(max-width:1023px){.heros__repli{justify-items:center;padding-right:0}.heros__repli img{opacity:.08}} .heros__voile{ position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(to top,var(--noir) 0%,rgb(8 9 11 / .82) 22%,rgb(8 9 11 / .18) 55%,transparent 78%), linear-gradient(to right,rgb(8 9 11 / .78) 0%,rgb(8 9 11 / .25) 42%,transparent 68%); } /* En portrait le texte occupe le bas de l'écran : on assombrit davantage. */ @media(max-width:1023px){ .heros__voile{ background:linear-gradient(to top,var(--noir) 0%,var(--noir) 30%,rgb(8 9 11 / .88) 48%,rgb(8 9 11 / .35) 72%,rgb(8 9 11 / .1) 100%); } } .heros__contenu{position:relative;z-index:2;width:100%;padding-block:clamp(3rem,9vh,6rem) clamp(3.5rem,10vh,7rem)} .heros__grille{display:grid;gap:2rem;align-items:end} @media(min-width:1024px){.heros__grille>*{max-width:min(56rem,70%)}} .heros h1{margin-top:1.25rem;text-wrap:normal} .heros__soustitre{margin-top:1.5rem;max-width:44ch;color:var(--gris);font-size:clamp(1rem,.95rem + .35vw,1.1875rem);line-height:1.6} .heros__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem} /* --- Revoir l'animation : discret, en bas a droite, au-dessus du voile. Masque tant que la 3D n'a pas demarre, et pendant l'intro elle-meme. --- */ .heros__rejouer{ position:absolute;right:var(--gouttiere);bottom:1.75rem;z-index:3; display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1.05rem; background:rgb(255 255 255 / .04);border:1px solid var(--trait);border-radius:var(--r-pilule); font-family:var(--f-marque);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase; color:var(--gris);cursor:pointer; opacity:.5;transition:opacity .25s,color .25s,border-color .25s,background-color .25s; } .heros__rejouer .ic{width:.75rem;height:.75rem} .heros__rejouer:hover,.heros__rejouer:focus-visible{ opacity:1;color:var(--blanc);border-color:var(--trait-fort);background:rgb(255 255 255 / .09); } .heros__rejouer[hidden]{display:none} @media(max-width:640px){ .heros__rejouer{bottom:1rem;padding:.5rem .8rem;font-size:.5rem;letter-spacing:.16em} } /* ========================================================================== Introduction 3D ========================================================================== */ .intro{ position:fixed;inset:0;z-index:var(--z-intro);background:#000; display:grid;place-items:center; transition:opacity .9s var(--doux),visibility .9s; } /* Le voile ne s'affiche que si l'intro doit jouer — mais SURTOUT PAS pendant qu'elle se termine. fermerIntro() retire « intro-active » en premier, pour rendre le défilement tout de suite ; sans l'exception « est-finie », cette règle escamotait le voile dans la même image et le fondu de sortie, logo compris, n'avait tout simplement jamais lieu. */ .intro[hidden], html:not(.intro-active) .intro:not(.est-finie){display:none} .intro.est-finie{opacity:0;visibility:hidden;pointer-events:none} .intro__scene{position:absolute;inset:0} .intro__scene canvas{width:100%;height:100%} .intro__marque{ position:relative;z-index:2;display:grid;place-items:center;gap:1.25rem; opacity:0;transform:scale(.985);transition:opacity .7s var(--doux),transform .7s var(--doux); pointer-events:none;will-change:opacity,transform,filter; } .intro__marque.est-visible{opacity:1;transform:none} .intro__marque img{width:min(62vw,520px)} .intro__accroche{ font-family:var(--f-marque);font-size:clamp(.55rem,1.6vw,.75rem);letter-spacing:.42em; text-transform:uppercase;color:var(--gris-bas); opacity:0;transform:translateY(8px);transition:opacity .7s .25s var(--doux),transform .7s .25s var(--sortie); } .intro__marque.est-visible .intro__accroche{opacity:1;transform:none} /* --- Sortie du logo. Il s'effaçait avec le voile, du même fondu plat, et ça se voyait : la marque disparaissait d'un coup, sans geste. Elle part maintenant en avant, en se dilatant très légèrement et en se défocalisant, comme un plan qu'on quitte. L'accroche s'en va la première, ce décalage suffit à faire lire l'ensemble comme voulu et non comme une coupure. La sortie est plus rapide que le voile (0,55 s contre 0,9) : la marque a donc entièrement disparu quand le héros finit de se découvrir. --- */ .intro.est-finie .intro__marque{ opacity:0;transform:scale(1.03); transition:opacity .85s var(--doux),transform 1.1s var(--sortie); } /* Quand le logo s'envole vers l'en-tête, il ne doit pas fondre en même temps : le clone en vol est ailleurs dans le document, mais l'accroche, elle, reste ici et doit partir seule. On neutralise donc le fondu du bloc et on ne garde que celui de l'accroche. */ .intro.est-finie.logo-envole .intro__marque{opacity:1;transform:none;transition:none} .intro.est-finie .intro__accroche{ opacity:0;transform:translateY(-8px); transition:opacity .45s var(--doux),transform .6s var(--sortie); } @media(prefers-reduced-motion:reduce){ .intro__marque,.intro.est-finie .intro__marque, .intro__accroche,.intro.est-finie .intro__accroche{ transform:none;transition:opacity .3s linear; } } .intro__passer{ position:absolute;right:var(--gouttiere);bottom:2rem;z-index:3; display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.2rem; background:rgb(255 255 255 / .05);border:1px solid var(--trait);border-radius:var(--r-pilule); font-family:var(--f-marque);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris); cursor:pointer;transition:color .25s,border-color .25s,background-color .25s; } .intro__passer:hover{color:var(--blanc);border-color:var(--trait-fort);background:rgb(255 255 255 / .1)} .intro__jauge{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--rec);z-index:3;transition:width .3s linear} /* ========================================================================== Sections génériques ========================================================================== */ .sec{padding-block:var(--sec);position:relative} .sec--serre{padding-block:clamp(4rem,8vw,7rem)} .sec__entete{display:grid;gap:1.25rem;max-width:64ch;margin-bottom:clamp(2.75rem,5vw,4.5rem)} .sec__entete--large{max-width:none} .sec__lien{margin-top:.5rem} /* --- Bande de chiffres --------------------------------------------------- */ .chiffres{border-block:1px solid var(--trait);background:var(--noir-2)} .chiffres__grille{display:grid;grid-template-columns:1fr} @media(min-width:760px){.chiffres__grille{grid-template-columns:repeat(3,1fr)}} .chiffre{padding:clamp(2.25rem,4.5vw,3.5rem) clamp(1rem,3vw,2.5rem);display:grid;gap:.5rem;border-top:1px solid var(--trait)} @media(min-width:760px){ .chiffre{border-top:0;border-left:1px solid var(--trait)} .chiffre:first-child{border-left:0;padding-left:0} .chiffre:last-child{padding-right:0} } @media(max-width:759px){.chiffre:first-child{border-top:0}} /* Chiffres a chasse fixe : pendant le decompte, un « 1 » plus etroit qu'un « 8 » ferait vibrer le nombre entier a chaque image. */ .chiffre__val{font-family:var(--f-marque);font-size:clamp(2.25rem,1.4rem + 3.4vw,3.75rem);line-height:1;color:var(--blanc);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .chiffre__val span{color:var(--rec)} .chiffre__lib{font-size:.9375rem;color:var(--gris);max-width:32ch} /* --- Bento prestations --------------------------------------------------- */ .bento{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait)} @media(min-width:900px){.bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(0,auto)}} .presta{ position:relative;isolation:isolate;overflow:hidden;background:var(--noir-2); padding:clamp(1.75rem,3vw,2.75rem);display:flex;flex-direction:column;gap:1rem; min-height:clamp(15rem,26vw,20rem); } @media(min-width:900px){ .presta--large{grid-column:span 4} .presta--petit{grid-column:span 2} .presta--moitie{grid-column:span 3} } .presta__fond{position:absolute;inset:0;z-index:-2;object-fit:cover;width:100%;height:100%;opacity:.34;transition:transform 1.1s var(--sortie),opacity .6s var(--doux)} .presta__fond+.presta__ombre{position:absolute;inset:0;z-index:-1;background:linear-gradient(150deg,rgb(8 9 11 / .94) 12%,rgb(8 9 11 / .62) 58%,rgb(8 9 11 / .82))} .presta--teinte{background:linear-gradient(155deg,#1a1114 0%,#111417 62%)} .presta--motif{background:var(--noir-2)} .presta--motif::before{ content:"";position:absolute;inset:0;z-index:-1;opacity:.5; background-image:linear-gradient(var(--trait) 1px,transparent 1px),linear-gradient(90deg,var(--trait) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(120% 90% at 80% 15%,#000 0%,transparent 72%); mask-image:radial-gradient(120% 90% at 80% 15%,#000 0%,transparent 72%); } .presta:hover .presta__fond{transform:scale(1.06);opacity:.45} .presta__ic{width:2rem;height:2rem;color:var(--rec)} /* Le titre de chaque carte mene a sa page. Le lien est etire sur toute la carte par un ::after, plutot que d'envelopper le bloc entier dans une ancre : les listes d'etiquettes et les images resteraient selectionnables, et on n'imbrique aucun element interactif. */ .presta__lien{color:inherit;text-decoration:none} .presta__lien::after{content:"";position:absolute;inset:0;z-index:1} .presta__lien:hover{color:var(--rec-vif)} .presta:has(.presta__lien){cursor:pointer} /* --- Entree et survol du bento ------------------------------------------ Les quatre cartes arrivent des COTES de l'ecran et se referment vers le centre, rangee par rangee : la grande et la petite d'abord, les deux moities ensuite. Chacune vient du bord dont elle est la plus proche, de sorte que la grille a l'air de s'assembler plutot que de defiler. 70vw suffit a les sortir du champ quelle que soit la largeur, et body porte deja overflow-x:hidden : rien ne depasse, aucune barre n'apparait. L'opacite monte sur le premier cinquieme seulement. Un fondu etale sur tout le trajet donnerait une carte fantome qui glisse ; la, elle est franche des qu'elle entre dans le champ, et c'est le mouvement qui porte l'effet. Ce sont des ANIMATIONS et non des transitions, a dessein : une transition laisserait son transition-delay en place, et le survol de l'image serait ensuite retarde d'autant. « backwards » tient la pose de depart pendant l'attente puis rend la main aux regles normales. Le fondu commun de « reveler-suite » est neutralise ici, sinon son translateY et ses propres retards se superposeraient a tout ceci. */ /* Les cartes viennent de l'exterieur de l'ecran : on borne le debordement ICI plutot que de le laisser remonter au document. body porte bien overflow-x:hidden, mais sur certains mobiles cela n'empeche pas de faire glisser la page vers la droite, et on decouvrirait 800 px de vide pendant l'animation. « clip » et non « hidden » : hidden ferait de la section un conteneur de defilement. clip se contente de couper, sans rien changer d'autre. */ #prestations{overflow-x:clip} /* Le bento dessine ses filets avec sa PROPRE couleur de fond, que les cartes laissent voir dans les interstices d'un pixel. Tant qu'elles sont parties sur les cotes, ce fond n'est plus masque par rien : on verrait un rectangle gris clair de la taille du bloc, en plein ecran, avant que quoi que ce soit n'arrive. On ne l'allume donc qu'une fois les cartes posees, et les filets se tirent alors entre elles. */ .js .bento{background-color:transparent;border-color:transparent} .bento.est-revele{ background-color:var(--trait);border-color:var(--trait); transition:background-color .55s var(--doux) .6s,border-color .55s var(--doux) .6s; } @keyframes presta-gauche{ from{opacity:0;transform:translate3d(-70vw,0,0)} 20%{opacity:1} to{transform:none} } @keyframes presta-droite{ from{opacity:0;transform:translate3d(70vw,0,0)} 20%{opacity:1} to{transform:none} } @keyframes presta-fond{from{transform:scale(1.10)}} @keyframes presta-icone{from{opacity:0;transform:translateY(14px) scale(.84)}} @keyframes presta-puce{from{opacity:0;transform:translateY(9px)}} .bento .presta:nth-child(1){--d:0s} .bento .presta:nth-child(2){--d:.06s} .bento .presta:nth-child(3){--d:.15s} .bento .presta:nth-child(4){--d:.21s} @media (prefers-reduced-motion:no-preference){ /* Le bento a sa propre entree : on retire le glissement vertical commun. */ .js .bento.reveler-suite>*{transform:none;transition:none} .bento.est-revele .presta:nth-child(odd){animation:presta-gauche .95s var(--sortie) var(--d) backwards} .bento.est-revele .presta:nth-child(even){animation:presta-droite .95s var(--sortie) var(--d) backwards} /* Une fois la carte posee, l'image se detend et l'icone puis les etiquettes arrivent. Tout demarre APRES l'atterrissage, sans quoi l'oeil aurait deux mouvements a suivre en meme temps. */ .bento.est-revele .presta__fond{animation:presta-fond 1.1s var(--sortie) calc(var(--d) + .35s) backwards} .bento.est-revele .presta__ic{animation:presta-icone .6s var(--sortie) calc(var(--d) + .45s) backwards} .bento.est-revele .puce{animation:presta-puce .5s var(--sortie) calc(var(--d) + .55s) backwards} .bento.est-revele .puce:nth-child(2){animation-delay:calc(var(--d) + .61s)} .bento.est-revele .puce:nth-child(3){animation-delay:calc(var(--d) + .67s)} .bento.est-revele .puce:nth-child(4){animation-delay:calc(var(--d) + .73s)} } /* Survol. Deux des quatre cartes n'ont pas d'image : sans ce lavis, elles ne repondraient pas du tout au pointeur. Il est pose en ::after, donc au-dessus du fond et du motif mais sous le texte, et il vaut pour les quatre. */ .presta::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0; background:radial-gradient(130% 85% at 50% 100%,rgb(255 68 51 / .09),transparent 62%); transition:opacity .5s var(--doux); } .presta:hover::after,.presta:focus-within::after{opacity:1} .presta__ic{transition:transform .45s var(--sortie)} .presta:hover .presta__ic{transform:translateY(-4px)} .presta .puce{transition:border-color .3s var(--doux),color .3s var(--doux)} .presta:hover .puce{border-color:var(--trait-fort);color:var(--blanc)} .presta h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);letter-spacing:-.03em} .presta p{color:var(--gris);font-size:.9375rem;max-width:42ch} .presta__liste{margin-top:auto;padding-top:1.25rem;display:flex;flex-wrap:wrap;gap:.4rem} .puce{ display:inline-block;padding:.35rem .75rem;border:1px solid var(--trait);border-radius:var(--r-pilule); font-family:var(--f-marque);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris); } /* ========================================================================== Réalisations ========================================================================== */ .filtres{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(2rem,4vw,3rem)} .filtre{ padding:.6rem 1.05rem;border:1px solid var(--trait);border-radius:var(--r-pilule);background:transparent; font-family:var(--f-marque);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris); cursor:pointer;transition:color .25s var(--doux),border-color .25s var(--doux),background-color .25s var(--doux); } .filtre:hover{color:var(--blanc);border-color:var(--trait-fort)} .filtre[aria-pressed="true"]{background:var(--blanc);border-color:var(--blanc);color:var(--noir)} .filtre__n{opacity:.55;margin-left:.4rem} .grille{display:grid;gap:clamp(1rem,2vw,1.75rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))} .grille--vedette{grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr))} @media(min-width:1000px){ .grille--vedette>.fiche:first-child{grid-column:span 2} .grille--vedette>.fiche:first-child .fiche__media{aspect-ratio:21/9} .grille--vedette>.fiche:first-child .fiche__titre{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem)} } .grille__vide{ display:none;padding:clamp(2.5rem,6vw,4.5rem);border:1px dashed var(--trait);text-align:center;color:var(--gris); } .grille__vide.est-visible{display:block} .grille__vide p{margin-bottom:1.25rem} .fiche{position:relative;display:flex;flex-direction:column;gap:1rem} .fiche[hidden]{display:none} .fiche__media{ position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--noir-3); border:1px solid var(--trait);transition:border-color .4s var(--doux); } .fiche__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--sortie),filter .5s var(--doux);filter:saturate(.85) contrast(1.02)} .fiche__media::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,rgb(8 9 11 / .72),rgb(8 9 11 / .1) 45%,transparent); opacity:.85;transition:opacity .5s var(--doux); } .fiche:hover .fiche__media img,.fiche:focus-within .fiche__media img{transform:scale(1.05);filter:saturate(1) contrast(1.04)} .fiche:hover .fiche__media,.fiche:focus-within .fiche__media{border-color:var(--trait-fort)} .fiche__lecture{ position:absolute;left:1rem;bottom:1rem;z-index:2; width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center; background:rgb(255 255 255 / .1);border:1px solid rgb(255 255 255 / .28);color:#fff;font-size:1.05rem; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transition:background-color .35s var(--doux),transform .45s var(--sortie),border-color .35s; } .fiche:hover .fiche__lecture,.fiche:focus-within .fiche__lecture{background:var(--rec);border-color:var(--rec);transform:scale(1.08)} .fiche__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.35rem} .fiche__tag{ padding:.28rem .6rem;border:1px solid var(--trait);border-radius:var(--r-pilule); font-family:var(--f-marque);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-bas); transition:border-color .3s var(--doux),color .3s var(--doux); } .fiche:hover .fiche__tag{border-color:var(--trait-fort);color:var(--gris)} .fiche__corps{display:grid;gap:.45rem} .fiche__client{font-family:var(--f-marque);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rec)} .fiche__titre{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);font-weight:600;letter-spacing:-.02em;line-height:1.25} .fiche__titre a::before{content:"";position:absolute;inset:0;z-index:3} .fiche__titre a{transition:color .25s var(--doux)} .fiche:hover .fiche__titre a{color:var(--blanc)} .fiche__desc{font-size:.875rem;color:var(--gris-bas);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden} /* ========================================================================== Bande showreel ========================================================================== */ .showreel{position:relative;isolation:isolate;overflow:hidden;border-block:1px solid var(--trait)} .showreel__fond{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.35;filter:saturate(.7)} .showreel__voile{position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 120% at 50% 50%,rgb(8 9 11 / .5),rgb(8 9 11 / .93))} .showreel__contenu{padding-block:clamp(5rem,11vw,9rem);display:grid;justify-items:center;text-align:center;gap:1.5rem} .showreel h2{max-width:18ch} .showreel p{max-width:48ch;color:var(--gris)} .bouton-lecture{ --taille:clamp(5rem,10vw,7rem); width:var(--taille);height:var(--taille);border-radius:50%;display:grid;place-items:center; background:var(--rec);border:0;color:#fff;font-size:calc(var(--taille) * .3);cursor:pointer; transition:transform .4s var(--sortie),box-shadow .4s var(--doux); box-shadow:0 0 0 0 rgb(255 68 51 / .45); } .bouton-lecture:hover{transform:scale(1.07);box-shadow:0 22px 60px -20px rgb(255 68 51 / .85)} @media (prefers-reduced-motion:no-preference){ .bouton-lecture::after{ content:"";position:absolute;width:var(--taille);height:var(--taille);border-radius:50%; border:1px solid var(--rec);animation:onde 2.8s var(--doux) infinite; } } @keyframes onde{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.85);opacity:0}} .bouton-lecture{position:relative} /* ========================================================================== Bloc studio (image + texte) ========================================================================== */ .studio-bloc{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center} @media(min-width:900px){.studio-bloc{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}} .studio-bloc__media{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--trait);background:var(--noir-2)} @media(max-width:899px){.studio-bloc__media{aspect-ratio:16/10}} .studio-bloc__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.05)} .studio-bloc__texte{display:grid;gap:1.5rem} .studio-bloc__liste{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait);margin-top:.75rem} .studio-bloc__liste li{background:var(--noir);padding:1.15rem 1.35rem;display:flex;gap:1rem;align-items:baseline} .studio-bloc__liste b{font-family:var(--f-marque);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rec);flex:none;min-width:7.5rem} .studio-bloc__liste span{color:var(--gris);font-size:.9375rem} @media(max-width:520px){.studio-bloc__liste li{flex-direction:column;gap:.35rem}} /* ========================================================================== Appel final ========================================================================== */ .appel{position:relative;overflow:hidden;background:var(--noir-2);border:1px solid var(--trait)} .appel__contenu{padding:clamp(3rem,8vw,6.5rem) clamp(1.5rem,5vw,5rem);display:grid;gap:1.75rem;justify-items:center;text-align:center} .appel h2{max-width:20ch} .appel__coord{display:flex;flex-wrap:wrap;gap:1.75rem;justify-content:center;margin-top:.5rem} .appel__coord a{display:inline-flex;align-items:center;gap:.6rem;color:var(--gris);font-size:.9375rem;transition:color .25s} .appel__coord a:hover{color:var(--blanc)} .appel__coord .ic{color:var(--rec);font-size:1.1rem} .appel::before{ content:"";position:absolute;inset:auto 50% -60% 50%;width:min(120%,52rem);aspect-ratio:1;transform:translateX(-50%); background:radial-gradient(circle,rgb(255 68 51 / .17),transparent 62%);pointer-events:none; } /* ========================================================================== Pied de page ========================================================================== */ .pied{border-top:1px solid var(--trait);background:var(--noir);padding-block:clamp(3rem,6vw,4.5rem) 2rem} .pied__haut{display:grid;gap:2.5rem} @media(min-width:820px){.pied__haut{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem)}} .pied__marque img{height:22px;margin-bottom:1.25rem} .pied__marque p{color:var(--gris-bas);font-size:.875rem;max-width:34ch} .pied__col h3{font-family:var(--f-marque);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-bas);margin-bottom:1rem;font-weight:400} .pied__col li+li{margin-top:.6rem} .pied__col a{font-size:.9375rem;color:var(--gris);transition:color .25s} .pied__col a:hover{color:var(--blanc)} .reseaux{display:flex;gap:.6rem;margin-top:1.5rem} .reseaux a{ width:2.5rem;height:2.5rem;display:grid;place-items:center;border:1px solid var(--trait);border-radius:var(--r-pilule); color:var(--gris);font-size:1.05rem;transition:color .25s,border-color .25s,background-color .25s,transform .3s var(--sortie); } .reseaux a:hover{color:var(--blanc);border-color:var(--trait-fort);background:rgb(255 255 255 / .06);transform:translateY(-2px)} .pied__bas{ margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;border-top:1px solid var(--trait); display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center; font-size:.8125rem;color:var(--gris-bas); } .pied__bas nav{display:flex;flex-wrap:wrap;gap:1.25rem} .pied__bas a:hover{color:var(--blanc)} /* ========================================================================== Visionneuse vidéo ========================================================================== */ .visio{ position:fixed;inset:0;z-index:var(--z-modale);display:grid;place-items:center;padding:var(--gouttiere); background:rgb(4 5 6 / .93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); opacity:0;visibility:hidden;transition:opacity .4s var(--doux),visibility .4s; } .visio.est-ouverte{opacity:1;visibility:visible} .visio__boite{width:min(100%,78rem);display:grid;gap:1.25rem;transform:scale(.97);transition:transform .5s var(--sortie)} .visio.est-ouverte .visio__boite{transform:none} .visio__cadre{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--trait);overflow:hidden} .visio__cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .visio__legende{display:flex;flex-wrap:wrap;gap:.35rem 1rem;align-items:baseline;justify-content:space-between} .visio__client{font-family:var(--f-marque);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rec)} .visio__titre{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em} .visio__fermer{ position:absolute;top:1rem;right:1rem;z-index:2;width:2.75rem;height:2.75rem;border-radius:var(--r-pilule); display:grid;place-items:center;background:rgb(255 255 255 / .07);border:1px solid var(--trait);color:var(--blanc); cursor:pointer;font-size:1.1rem;transition:background-color .25s,border-color .25s,transform .3s var(--sortie); } .visio__fermer:hover{background:rgb(255 255 255 / .14);border-color:var(--trait-fort);transform:rotate(90deg)} /* ========================================================================== Formulaire ========================================================================== */ .contact-grille{display:grid;gap:clamp(2.5rem,6vw,5rem)} @media(min-width:960px){.contact-grille{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}} .form{display:grid;gap:1.5rem} .form__ligne{display:grid;gap:1.5rem} @media(min-width:640px){.form__ligne{grid-template-columns:1fr 1fr}} .champ{display:grid;gap:.5rem} .champ label{font-family:var(--f-marque);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blanc)} .champ label .req{color:var(--rec)} .champ input,.champ textarea,.champ select{ width:100%;padding:.95rem 1.05rem;background:var(--noir-2);color:var(--blanc); border:1px solid var(--trait);border-radius:2px;font-size:.9375rem;font-weight:300; transition:border-color .25s var(--doux),background-color .25s var(--doux); } .champ textarea{min-height:9.5rem;resize:vertical} .champ select{appearance:none;background-image:none;cursor:pointer} .champ__select{position:relative} .champ__select .ic{position:absolute;right:1rem;bottom:1.15rem;color:var(--gris);pointer-events:none} .champ input::placeholder,.champ textarea::placeholder{color:#7A8087} .champ input:hover,.champ textarea:hover,.champ select:hover{border-color:var(--trait-fort)} .champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;border-color:var(--rec);background:var(--noir-3)} .champ__aide{font-size:.8125rem;color:var(--gris-bas)} .champ__erreur{font-size:.8125rem;color:var(--rec-vif);display:none} .champ.est-invalide input,.champ.est-invalide textarea,.champ.est-invalide select{border-color:var(--rec)} .champ.est-invalide .champ__erreur{display:block} .pot-de-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .consentement{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem .85rem;align-items:start} .consentement .champ__erreur{grid-column:1/-1;margin-top:-.15rem} .consentement input{appearance:none;width:1.15rem;height:1.15rem;flex:none;margin-top:.2rem;border:1px solid var(--trait-fort);border-radius:2px;background:var(--noir-2);cursor:pointer;display:grid;place-items:center;transition:background-color .2s,border-color .2s} .consentement input:checked{background:var(--rec);border-color:var(--rec)} .consentement input:checked::after{content:"";width:.4rem;height:.7rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)} /* Le bloc de consentement n'est pas un « .champ » : les deux regles d'erreur ecrites plus haut ne l'atteignaient donc pas. Le script posait bien « est-invalide » et ecrivait bien « Merci de cocher cette case. », mais le message restait en display:none et la case n'etait pas marquee. On disait au visiteur de corriger « les champs signales en rouge » alors que rien ne l'etait : impasse sur le seul formulaire du site. */ .consentement.est-invalide .champ__erreur{display:block} .consentement.est-invalide input{border-color:var(--rec)} .consentement label{font-family:var(--f-texte);font-size:.8125rem;letter-spacing:0;text-transform:none;color:var(--gris);line-height:1.55;cursor:pointer} .consentement a{color:var(--blanc);text-decoration:underline;text-underline-offset:3px} .form__pied{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;justify-content:space-between} /* La region d'etat reste TOUJOURS dans l'arbre d'accessibilite : une region live doit exister avant que son contenu ne change, sinon le lecteur d'ecran n'annonce rien du tout. En display:none elle n'existait qu'a partir du moment ou l'on ecrivait dedans — trop tard. Vide, elle est simplement sortie du flux (meme motif que .invisible), donc la grille du formulaire ne gagne pas un intervalle au passage. */ .form__etat{font-size:.875rem;padding:1rem 1.15rem;border:1px solid var(--trait);background:var(--noir-2)} .form__etat:not(.est-visible){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .form__etat[data-etat="ok"]{border-color:rgb(90 200 130 / .5);color:#8FE0AC} .form__etat[data-etat="ko"]{border-color:var(--rec-bas);color:var(--rec-vif)} .btn .ic--chargement{display:none} .btn.est-en-cours .ic--chargement{display:block;animation:tourne 1s linear infinite} .btn.est-en-cours .ic--envoi{display:none} @keyframes tourne{to{transform:rotate(360deg)}} .coord{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait);align-content:start} .coord__item{background:var(--noir-2);padding:1.5rem 1.6rem;display:grid;gap:.4rem} .coord__item dt{display:flex;align-items:center;gap:.6rem;font-family:var(--f-marque);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-bas)} .coord__item dt .ic{color:var(--rec);font-size:1rem} .coord__item dd{margin:0;font-size:1.0625rem;color:var(--blanc)} .coord__item dd a:hover{color:var(--rec-vif)} /*
est en italique par defaut dans tous les navigateurs. C'est le bon element semantiquement, mais pas la bonne allure ici. */ address{font-style:normal} .pied__adresse{color:inherit;line-height:1.5} .coord__item dd small{display:block;font-size:.8125rem;color:var(--gris-bas);margin-top:.35rem} /* ========================================================================== Page intérieure : bandeau ========================================================================== */ .bandeau{position:relative;padding-top:clamp(9rem,16vw,13rem);padding-bottom:clamp(3rem,6vw,5rem);border-bottom:1px solid var(--trait);overflow:hidden} .bandeau::before{ content:"";position:absolute;inset:-30% 0 auto 50%;width:min(150%,70rem);aspect-ratio:2;transform:translateX(-50%); background:radial-gradient(ellipse at 50% 0%,rgb(255 68 51 / .12),transparent 65%);pointer-events:none; } .bandeau__grille{display:grid;gap:1.5rem} @media(min-width:900px){.bandeau__grille{grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:end;gap:clamp(2rem,5vw,4rem)}} .bandeau h1{max-width:16ch} /* --- Chronologie (page studio) ------------------------------------------ */ .parcours{display:grid;gap:0} .parcours__item{ display:grid;gap:.75rem 2.5rem;padding-block:clamp(1.75rem,3.5vw,2.75rem);border-top:1px solid var(--trait); } .parcours__item:last-child{border-bottom:1px solid var(--trait)} @media(min-width:820px){.parcours__item{grid-template-columns:minmax(0,3fr) minmax(0,8fr);align-items:start}} .parcours__cle{font-family:var(--f-marque);font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);color:var(--blanc);line-height:1} .parcours__cle small{display:block;font-family:var(--f-texte);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rec);margin-top:.6rem;font-weight:400} .parcours__val{color:var(--gris);max-width:62ch} .parcours__val h3{font-size:1.125rem;font-weight:600;color:var(--blanc);margin-bottom:.6rem;letter-spacing:-.02em} /* --- Matériel ------------------------------------------------------------ */ .materiel{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait)} @media(min-width:700px){.materiel{grid-template-columns:repeat(2,1fr)}} @media(min-width:1100px){.materiel{grid-template-columns:repeat(4,1fr)}} .materiel__bloc{background:var(--noir-2);padding:clamp(1.5rem,3vw,2.25rem);display:grid;gap:1rem;align-content:start} .materiel__bloc h3{font-family:var(--f-marque);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rec);font-weight:400} .materiel__bloc li{font-size:.9375rem;color:var(--gris);padding-left:1.1rem;position:relative} .materiel__bloc li::before{content:"";position:absolute;left:0;top:.72em;width:.35rem;height:1px;background:var(--gris-bas)} .materiel__bloc li+li{margin-top:.55rem} /* ========================================================================== Révélations au défilement ========================================================================== */ /* Le masquage est conditionne a « .js », posee par le script en tete de page. Sans ce garde-fou, un visiteur sans JavaScript ne voyait RIEN : c'est la classe « est-revele » — ajoutee par site.js seul — qui leve opacity:0, donc neuf blocs de l'accueil, huit du studio et le formulaire de contact entier restaient invisibles, tout en gardant leurs champs dans l'ordre de tabulation. La classe existait deja, elle ne servait a rien. */ @media (prefers-reduced-motion:no-preference){ .js .reveler{opacity:0;transform:translateY(26px);transition:opacity .85s var(--doux),transform .85s var(--sortie)} .reveler.est-revele{opacity:1;transform:none} .js .reveler-suite>*{opacity:0;transform:translateY(22px);transition:opacity .75s var(--doux),transform .75s var(--sortie)} .reveler-suite.est-revele>*{opacity:1;transform:none} .reveler-suite.est-revele>*:nth-child(1){transition-delay:.02s} .reveler-suite.est-revele>*:nth-child(2){transition-delay:.09s} .reveler-suite.est-revele>*:nth-child(3){transition-delay:.16s} .reveler-suite.est-revele>*:nth-child(4){transition-delay:.23s} .reveler-suite.est-revele>*:nth-child(5){transition-delay:.3s} .reveler-suite.est-revele>*:nth-child(6){transition-delay:.37s} .reveler-suite.est-revele>*:nth-child(n+7){transition-delay:.44s} } /* Grain fixe, hors flux, sans coût de repaint au défilement */ .grain{ position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay; } /* --- Mouvement réduit ---------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} .heros__scene,.intro{display:none !important} }