/* Projet : Site 15A Fichier : css/autonome.css Version : 0.30.0 — 2026-07-20 11:22 Objectif : Styles propres à la page Terrain autonome. Ajout 0.30.0 : habillage du bouton d'action unique de clôture (« Demander un devis ») — fond de teal profond éclairé par le cyan #01CFE2 de la page, dans le langage relief/verre des autres boutons 15A (voir le bloc en fin de fichier). Reprise v0.6.0 : les deux grands fonds d'écran (mobile/tablette et grand écran) passent en WebP avec repli JPEG automatique via image-set() — rendu strictement identique, chargement bien plus léger. Aucune autre règle de mise en page modifiée (pixel perfect). */ /* RESET DE BASE */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } /* body { background: url(../images/Autonome/background.jpg); background-size: 125vh; background-attachment: fixed; } */ /* Le clip anti-débordement horizontal doit vivre sur , pas seulement sur . Posé sur seul, le body devient le conteneur de défilement et window.scrollY reste bloqué à 0 → l'animation de la boule de nav (qui lit window.scrollY) ne se déclenchait jamais sur cette page. Sur , la fenêtre reste le scroller et l'animation repart. */ html { overflow-x: hidden; } body { font-family: nulshock, sans-serif; line-height: 1.5; color: #ffffff; margin: 0; overflow-x: hidden; background: none; } body::before { content: ""; position: fixed; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url(../images/Autonome/background.jpg); background-image: image-set( url(../images/Autonome/background.webp) type("image/webp"), url(../images/Autonome/background.jpg) type("image/jpeg")); z-index: -1; transform: translateZ(0); } .perso-background { display: none; position: absolute; width: 128vh; right: 5%; object-fit: cover; mix-blend-mode: overlay; opacity: 0.75; } /* TEXTES */ h1, h2, h3, h4 { font-weight: bold; line-height: 1.2; } p { margin-bottom: 1rem; font-family: nulshock, sans-serif; } /* UTILITY CLASSES */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1rem; } img { display: block; max-width: 100%; height: auto; } .tournois-titre-gauche { display: none; } /* Main*/ .autonome { display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 3rem; padding-top: 10rem; } /* Intro */ .autonome__intro { text-align: center; color: white; } .autonome__title { font-size: 1.8rem; font-weight: bold; line-height: 1.3; text-transform: uppercase; } /* Présentation*/ .autonome__presentation { display: flex; flex-direction: column; align-items: center; padding: 2rem 1rem; margin: 0 1rem; gap: 2rem; text-align: center; border: solid 1px white; border-radius: 1rem; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 35%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0.5)); } .autonome__presentation-title { display: flex; flex-direction: column; align-items: center; } .autonome__presentation-title--logo { width: 12rem; } .autonome__presentation-title--1 { font-size: 2rem; } .autonome__presentation-title--2 { font-size: 3rem; } .autonome__presentation-title--3 { font-size: 1.5rem; } .autonome__presentation-text p { font-family: nulshock, sans-serif; } .autonome__presentation-visuals { position: relative; display: flex; flex-direction: column; align-items: center; } .autonome__smartphone { width: 80%; } .autonome__message-container { display: flex; flex-direction: column; align-items: center; position: absolute; z-index: 1; top: 30%; border: solid 1px blue; padding: 1rem 1rem; border-radius: 1rem; background: linear-gradient(to right, rgba(255, 255, 255, 0.61), rgb(255 255 255 / 27%)); backdrop-filter: blur(15px); width: 45%; } .autonome__message-image { width: 80%; } .autonome__message { font-size: 0.5rem; font-family: nulshock, sans-serif; text-align: center; color: blue; } .autonome__message-end { font-family: nulshock, sans-serif; text-align: center; color: blue; } .autonome__message-button { border: none; background: none; cursor: pointer; margin-bottom: 1rem; } .autonome__terrain { width: 100%; } /* Features */ .autonome__features { display: flex; flex-direction: column; align-items: center; padding: 2rem 0; margin: 0 1rem; gap: 2rem; text-align: center; } .autonome__feature { display: flex; flex-direction: column; align-items: center; justify-content: space-between; row-gap: 1rem; border-radius: 1rem; padding: 2rem 1rem; background: linear-gradient(to right, rgba(255, 255, 255, 0.61), rgb(255 255 255 / 27%)); backdrop-filter: blur(5px); width: 100%; } .autonome__feature-title { font-size: 1.5rem; font-weight: bold; font-family: nulshock, sans-serif; } .autonome__feature-text { font-size: 1rem; font-family: nulshock, sans-serif; text-align: center; color: white; } /* Avantages */ .autonome__advantages { display: flex; flex-direction: column; align-items: center; padding: 2rem 0; margin: 0 1rem; gap: 2rem; text-align: center; } .autonome__advantages-title { font-size: 1.8rem; font-weight: bold; font-family: nulshock, sans-serif; } .autonome__advantage { display: flex; flex-direction: column; align-items: center; row-gap: 1rem; } /* btns top */ .scroll-buttons button { background-color: #025d7b; color: white; border: none; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease, transform 0.2s ease; } /* Scroll Buttons */ .scroll-buttons { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 1111111; } .scroll-buttons button:hover { background-color: #025d7b87; transform: scale(1.1); } /* Responsive */ @media (min-width: 576px) { .autonome__presentation { display: grid; grid-template-areas: "title title" "text text" "imgA imgB"; } .autonome__presentation-title { grid-area: title; } .autonome__presentation-text { grid-area: text; } .autonome__presentation-visuals { grid-area: imgA; justify-self: center; } .autonome__message-image { width: 66%; } .autonome__terrain { grid-area: imgB; justify-self: center; width: 100%; } .autonome__features { flex-direction: row; align-items: stretch; gap: 1rem; } .autonome__feature { height: auto; min-height: 100%; } .autonome__feature-image { width: 50%; } .autonome__feature-image--phone { width: 25%; } .autonome__feature-title { font-size: 1rem; } .autonome__feature-text { font-size: 0.8rem; } .autonome__advantages { display: grid; grid-template-areas: "title title" "a b" "c d"; } .autonome__advantages-title { grid-area: title; } .autonome__advantage-text { font-size: 1.25rem; } .advantage-a { grid-area: a; } .advantage-b { grid-area: b; } .advantage-c { grid-area: c; } .advantage-d { grid-area: d; } } @media (min-width: 768px) { .autonome__features { gap: 2rem; } .mobile-nav-image.gif-scroll-mobile-bleu { height: auto; width: 155px !important; } .autonome__message-container { width: 60%; transform: scale(1); transition: transform 0.3s ease-in-out; } .autonome__message-container:hover { transform: scale(1.25); transition: transform 0.3s ease-in-out; } } @media (min-width: 992px) { body { background-size: 100%; background-attachment: fixed; } .tournois-titre-gauche { display: block; position: fixed; left: 0; top: 0; width: 6rem; z-index: 1; } .autonome__message-container { width: 45%; transform: scale(1); transition: transform 0.3s ease-in-out; } .autonome__message-container:hover { transform: scale(1.65); transition: transform 0.3s ease-in-out; } .autonome__feature-title { font-size: 1.25rem; } .autonome__feature-text { font-size: 1rem; } .autonome__advantages { row-gap: 4rem; column-gap: 6rem; } .autonome__presentation { margin: 0 10rem; } .autonome__features { margin: 0 10rem; } .mobile-images { display: none; } #pc-nav { display: block; } .pc-images { position: fixed; top: 453px; padding: 0; right: 20px; transform: translateY(-50%); z-index: 100; transition: right 0.3s ease; gap: 0; display: grid; border-radius: 45px; border-top-right-radius: 0; border-bottom-right-radius: 0; } } @media (min-width: 1200px) { body { background-image: url(../images/Autonome/Fond-autonome.jpg); background-image: image-set( url(../images/Autonome/Fond-autonome.webp) type("image/webp"), url(../images/Autonome/Fond-autonome.jpg) type("image/jpeg")); background-position: 0 0; background-repeat: repeat; background-attachment: scroll; background-size: cover; } .perso-background { display: block; } .autonome { row-gap: 5rem; padding-top: 5rem; } .autonome__title { font-size: 2.5rem; margin-bottom: 3rem; } .autonome__presentation { grid-template-areas: "title imgA imgB" "text imgA imgB"; grid-template-columns: 1fr 1fr 1fr; margin-right: 12rem; margin-left: 12rem; column-gap: 0; row-gap: 1rem; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 35%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0.5)); position: relative; } .autonome__presentation-title { font-size: 1.5rem; text-align: left; align-self: end; display: grid; grid-template-areas: "logo title1" "logo title2" "title3 title3"; grid-template-columns: 7rem auto; align-items: center; column-gap: 0.5rem; padding-right: 1.5rem; } .autonome__presentation-title--link { grid-area: logo; width: 7rem; } .autonome__presentation-title--logo { grid-area: logo; width: 7rem; } .autonome__presentation-title--1 { grid-area: title1; font-size: 1.8rem; position: relative; top: 0.5rem; } .autonome__presentation-title--2 { grid-area: title2; font-size: 2rem; position: relative; bottom: 0.5rem; text-wrap: nowrap; } .autonome__presentation-title--3 { grid-area: title3; margin-top: 1rem; } .autonome__presentation-text { text-align: left; align-self: start; font-size: 1rem; margin-right: 1rem; } .autonome__presentation-visuals { position: absolute; } .autonome__message-container { width: 65%; } .autonome__smartphone { width: 115%; max-width: none; } .autonome__features { margin-right: 12rem; margin-left: 12rem; position: relative; } .autonome__advantages-title { font-size: 2.25rem; } } @media (min-width: 1400px) { .advantage-a, .advantage-c { flex-direction: row; } .advantage-b, .advantage-d { flex-direction: row-reverse; } } @media (min-width: 1600px) { .autonome__presentation-title--1 { font-size: 2rem; } .autonome__presentation-title--2 { font-size: 3rem; } .autonome__presentation-text { font-size: 1.25rem; } } @media (min-width: 1700px) { .pc-images { top: 453px; } } /* ========================================================================= BOUTON D'ACTION DE CLÔTURE — « Demander un devis » (redesign Vinci — 0.30.0) ------------------------------------------------------------------------- Le bloc de clôture portait deux boutons (un orange plein « Demander une démo / un devis » + un contour « Appeler »). Le bouton d'appel est retiré : une page qui pose UNE seule action la pose plus fort. Reste un bouton unique, redessiné dans le langage des autres boutons 15A : socle .cta15a de cta.css (géométrie, hauteur, police nulshock, comportement mobile) conservé sans modification, habillage surchargé ici via .cta15a.autonome-cta (spécificité 0,0,2,0, pour battre .cta15a malgré l'ordre de chargement). COULEUR — le piège de cette page : son accent cyan #01CFE2 est déjà la couleur du FOND à cet endroit (grande nappe turquoise). Un bouton cyan y est invisible : premier essai fait, capture à l'appui, le bouton se fondait dans le décor. On inverse donc la valeur au lieu de la teinte : bouton TRÈS SOMBRE de la même famille (fond de teal), texte blanc (~12:1 de contraste), et le cyan #01CFE2 revient en LUMIÈRE — arête haute allumée + halo autour. C'est exactement le vocabulaire de la vidéo juste en dessous (scène sombre éclairée par l'accent de la page) : les deux blocs de bas de page se répondent, et le bouton redevient le point le plus contrasté. ========================================================================= */ .cta15a.autonome-cta { --auto-top: #0b4f5c; --auto-bottom: #05323b; --auto-lip: rgba(1, 20, 25, 0.85); --auto-glow: #01cfe2; border: none; border-radius: 16px; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); background: linear-gradient(180deg, var(--auto-top) 0%, var(--auto-bottom) 100%); backdrop-filter: none; /* lèvre 3D pleine + ombre ambiante + halo cyan + arête haute allumée */ box-shadow: 0 4px 0 var(--auto-lip), 0 10px 22px rgba(0, 0, 0, 0.3), 0 0 26px -6px var(--auto-glow), inset 0 1px 0 rgba(1, 207, 226, 0.6); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .cta15a.autonome-cta:hover, .cta15a.autonome-cta:focus-visible { transform: translateY(-2px); filter: brightness(1.12); color: #fff; background: linear-gradient(180deg, var(--auto-top) 0%, var(--auto-bottom) 100%); box-shadow: 0 6px 0 var(--auto-lip), 0 16px 30px rgba(0, 0, 0, 0.34), 0 0 34px -4px var(--auto-glow), inset 0 1px 0 rgba(1, 207, 226, 0.8); } /* Enfoncement au clic : la lèvre se réduit, le bouton « descend ». */ .cta15a.autonome-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--auto-lip), 0 4px 12px rgba(0, 0, 0, 0.26), 0 0 18px -8px var(--auto-glow), inset 0 1px 0 rgba(1, 207, 226, 0.5); } .cta15a.autonome-cta:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }