/* ========================================================================== TP APEX — socle : polices, jetons, primitives Peinture & finitions d'exception — Avenue du Maine, Paris Trois regles de fond, tirees des sites precedents de la serie : 1. AUCUNE hauteur de structure en vh / svh / dvh. Dans les navigateurs integres (Instagram, Facebook, TikTok) la barre d'outils revient a chaque changement de direction du defilement : une hauteur en dvh suit le mouvement, le plateau collant change de taille, l'image se recadre et la progression saute. Le script pose --stage-h et --safe-h en pixels, et ces variables ne font que GRANDIR. 2. Les blocs animes portent leur transformation sur un enfant .sec__mv, jamais sur la section elle-meme : la section reste mesurable. 3. Noms de blocs courts mais uniques (nav, seq, exp, nua...). Pas de .btn ni .card ni .note nus — trop de risque de collision. ========================================================================== */ /* ------------------------------------------------------------- polices -- */ @font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap; src:url("../fonts/jost-300-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap; src:url("../fonts/jost-300-latin-ext.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/jost-400-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/jost-400-latin-ext.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap; src:url("../fonts/jost-500-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap; src:url("../fonts/jost-500-latin-ext.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap; src:url("../fonts/jost-600-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap; src:url("../fonts/jost-600-latin-ext.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Jost';font-style:normal;font-weight:700;font-display:swap; src:url("../fonts/jost-700-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Jost';font-style:normal;font-weight:700;font-display:swap; src:url("../fonts/jost-700-latin-ext.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap; src:url("../fonts/manrope-300-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap; src:url("../fonts/manrope-300-latin-ext.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/manrope-400-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/manrope-400-latin-ext.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap; src:url("../fonts/manrope-500-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap; src:url("../fonts/manrope-500-latin-ext.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap; src:url("../fonts/manrope-600-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap; src:url("../fonts/manrope-600-latin-ext.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap; src:url("../fonts/manrope-700-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap; src:url("../fonts/manrope-700-latin-ext.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Playfair';font-style:italic;font-weight:500;font-display:swap; src:url("../fonts/playfair-500-italic-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Playfair';font-style:italic;font-weight:500;font-display:swap; src:url("../fonts/playfair-500-italic-latin-ext.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;} /* ------------------------------------------------------------- jetons --- */ :root{ --encre:#0B0B0D; --encre2:#141418; --encre3:#1E1E23; --craie:#F6F3EC; --craie2:#EDE7DB; --papier:#FCFBF8; --or:#B98A26; --or-clair:#E9C46A; --or-vif:#D2A03A; --or-fonce:#7E5C13; --gris:#6F6A62; --gris-c:#A9A399; --trait:rgba(11,11,13,.11); --trait-nuit:rgba(246,243,236,.13); --ombre-1:0 1px 2px rgba(11,11,13,.05),0 8px 24px -12px rgba(11,11,13,.16); --ombre-2:0 2px 6px rgba(11,11,13,.06),0 22px 48px -22px rgba(11,11,13,.30); --ombre-3:0 40px 90px -40px rgba(11,11,13,.46); --ray:16px; --ray-s:11px; --ray-l:26px; --marge:clamp(18px,5.2vw,44px); --large:1220px; --tempo:cubic-bezier(.22,.61,.28,1); --tempo-doux:cubic-bezier(.33,.02,.16,1); /* poses par le script, en pixels, et qui ne font que grandir */ /* --stage-h est la hauteur du GRAND viewport, celui sans barre d'outils. L'unite vh s'y refere et ne bouge PAS quand la barre va et vient — a la difference de dvh, de svh et de innerHeight. Le script la re-pose en pixels via une sonde 100vh des qu'il demarre, mais la valeur ci-dessous est deja la bonne : rien ne saute entre le premier rendu et le script. Ne jamais utiliser dvh ni svh pour une hauteur de structure. */ --stage-h:100vh; --nav-h:58px; } *,*::before,*::after{box-sizing:border-box;} /* Verrouillage du defilement horizontal — PIEGE MAJEUR. `overflow-x:hidden` ne doit se poser QUE sur , et surtout PAS sur . Regle CSS : l'overflow de l'element racine s'applique au viewport ; si n'est plus `visible`, celui de ne se propage plus et devient lui-meme un conteneur de defilement. Or `position:sticky` se cale sur le conteneur de defilement le plus proche : tous les plateaux collants du site se mettent alors a defiler comme du contenu ordinaire, laissant derriere eux la hauteur vide de leur section. C'est exactement ce qui faisait « descendre » la scene avant sa fin, avec une bande blanche. `overflow-x:clip` clippe sans creer de conteneur de defilement ; le repli `hidden` sur seul est sur, puisqu'il s'applique au viewport. */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth; overflow-x:clip;overscroll-behavior-x:none;} @supports not (overflow: clip){ html{overflow-x:hidden;} } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} body{ margin:0;background:var(--papier);color:var(--encre); /* Ni overflow-x ni max-width ici : voir le commentaire sur . */ overscroll-behavior-x:none; font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:16px;line-height:1.62;font-weight:400; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } body.est-fige{overflow:hidden;} img{max-width:100%;height:auto;display:block;} a{color:inherit;text-decoration:none;} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer; -webkit-tap-highlight-color:transparent;} input,select,textarea{font:inherit;color:inherit;} :focus-visible{outline:2px solid var(--or-vif);outline-offset:3px;border-radius:4px;} canvas{display:block;} ::selection{background:var(--or-clair);color:var(--encre);} h1,h2,h3,h4{font-family:'Jost',system-ui,sans-serif;font-weight:500; line-height:1.07;letter-spacing:-.018em;margin:0;} p{margin:0;} em,.ital{font-family:'Playfair',Georgia,serif;font-style:italic;font-weight:500; letter-spacing:0;} /* ------------------------------------------------------------ utilitaires */ .u-large{width:100%;max-width:var(--large);margin-inline:auto;padding-inline:var(--marge);} .u-etroit{max-width:780px;} .u-or{color:var(--or);} .u-cache{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0;} .u-sur{position:relative;z-index:2;} .u-centre{text-align:center;} .u-centre .sur{justify-content:center;} .u-centre .chapo{margin-inline:auto;} /* surtitre : le petit label en capitales espacees */ .sur{display:inline-flex;align-items:center;gap:.62em; font-family:'Jost',sans-serif;font-size:clamp(10px,2.5vw,11.5px);font-weight:600; letter-spacing:.30em;text-transform:uppercase;color:var(--or-fonce);margin-bottom:16px;} .sur::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55;flex:none;} .nuit .sur{color:var(--or-clair);} .titre{font-size:clamp(30px,8.1vw,56px);letter-spacing:-.028em;} .titre--xl{font-size:clamp(36px,10.2vw,76px);} .chapo{font-size:clamp(15.5px,4.1vw,18.5px);line-height:1.66;color:var(--gris); font-weight:400;margin-top:20px;max-width:64ch;} .nuit .chapo{color:rgba(246,243,236,.70);} .nuit{color:var(--craie);} /* -------------------------------------------------------------- boutons -- */ .act{position:relative;display:inline-flex;align-items:center;justify-content:center; gap:.6em;min-height:54px;padding:0 26px;border-radius:999px; font-family:'Jost',sans-serif;font-size:15px;font-weight:500;letter-spacing:.03em; overflow:hidden;isolation:isolate;text-align:center; transition:transform .42s var(--tempo),box-shadow .42s var(--tempo), color .3s ease,background-color .3s ease,border-color .3s ease;} .act svg{flex:none;} .act--or{color:#171106;box-shadow:0 10px 30px -12px rgba(185,138,38,.7);} .act--or::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; background:linear-gradient(100deg,var(--or-fonce),var(--or-vif) 40%,var(--or-clair) 62%,var(--or) 100%); background-size:230% 100%;background-position:0 0; transition:background-position .8s var(--tempo);} .act--or:hover,.act--or:focus-visible{transform:translateY(-2px); box-shadow:0 16px 40px -14px rgba(185,138,38,.85);} .act--or:hover::after{background-position:100% 0;} .act--fant{border:1px solid var(--trait);color:var(--encre);background:transparent;} .act--fant:hover{background:rgba(11,11,13,.045);transform:translateY(-2px);} .nuit .act--fant{border-color:var(--trait-nuit);color:var(--craie);} .nuit .act--fant:hover{background:rgba(246,243,236,.08);} .act--plein{background:var(--encre);color:var(--craie);} .act--plein:hover{transform:translateY(-2px);box-shadow:var(--ombre-2);} .act:active{transform:translateY(0) scale(.985);} .act[disabled]{opacity:.4;pointer-events:none;} .actrang{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;} /* lien souligne qui se remplit */ .lienor{position:relative;display:inline-block;font-family:'Jost',sans-serif; font-weight:500;letter-spacing:.02em;padding-bottom:3px;} .lienor::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px; background:var(--or-vif);transform:scaleX(0);transform-origin:left; transition:transform .5s var(--tempo);} .lienor:hover::after{transform:scaleX(1);} /* --------------------------------------------------- texte sur une image -- Un voile rectangulaire derriere un titre SE VOIT. La bonne reponse est une pile d'ombres SANS decalage : l'ombre epouse le dessin du glyphe et ne deborde que de quelques pixels. */ .pose{text-shadow: 0 0 2px rgba(252,251,248,.92), 0 0 6px rgba(252,251,248,.85), 0 0 14px rgba(252,251,248,.72), 0 0 30px rgba(252,251,248,.55), 0 0 60px rgba(252,251,248,.40);} /* la variante sombre, pour du texte clair pose sur une image sombre */ .pose--nuit{text-shadow: 0 0 2px rgba(8,8,10,.62), 0 0 5px rgba(8,8,10,.55), 0 0 11px rgba(8,8,10,.45), 0 0 22px rgba(8,8,10,.34), 0 0 44px rgba(8,8,10,.24);}