/* ========================================================================== Carrosserie Essalmi — feuille de style unique Toutes les couleurs sont déclarées ici, dans :root. Nulle part ailleurs. Pour changer la charte, modifier les 4 premières variables. Quadrillage des sections claires : mettre --quadrillage à « transparent » dans :root désactive la trame partout d'un coup. ========================================================================== */ /* ---------- Polices auto-hébergées (Barlow, Barlow Condensed — licence OFL) ---------- */ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400-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: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-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+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: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500-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: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-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+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: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600-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: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-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+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: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-600-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: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-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+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: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-700-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: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Polices de secours recalées sur Barlow ---------- Mesurées dans le navigateur (largeur d'un même texte, métriques verticales). Tant que les woff2 ne sont pas chargés, Arial occupe la place de Barlow : la bascule (font-display: swap) ne décale plus la mise en page. */ @font-face { font-family: "Barlow Repli"; src: local("Arial"), local("ArialMT"); size-adjust: 94.44%; ascent-override: 105.88%; descent-override: 21.18%; line-gap-override: 0%; } @font-face { font-family: "Barlow Condensed Repli"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); size-adjust: 72.88%; ascent-override: 137.21%; descent-override: 27.44%; line-gap-override: 0%; } @font-face { font-family: "Barlow Condensed Repli"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); size-adjust: 74.71%; ascent-override: 133.86%; descent-override: 26.77%; line-gap-override: 0%; } /* Titres h1 (en capitales) : en capitales, Arial Bold est 12,25 % plus large que Barlow Condensed (mesuré sur « ESSALMI CARROSSERIE »). Sans ce repli dédié, le titre du hero passait de 3 à 2 lignes au chargement de la police (412 px de large) et décalait toute la suite du hero (CLS 0,126). Métriques verticales compensées : même hauteur de ligne. */ @font-face { font-family: "Barlow Condensed Repli Capitales"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); size-adjust: 66.56%; ascent-override: 150.24%; descent-override: 30.05%; line-gap-override: 0%; } :root { /* --- Charte (les 4 variables à modifier pour changer d'identité) --- */ --rouge: #d81f26; /* boutons, filets, accents */ --rouge-fonce: #a8151b; /* survol */ --noir: #14161a; /* fonds sombres, titres */ --noir-doux: #22262c; /* cartes sur fond sombre */ /* --- Neutres --- */ --gris-texte: #4a5058; --gris-clair: #f4f5f7; /* sections alternées */ --gris-bordure: #e2e5ea; --blanc: #ffffff; /* --- Teintes dérivées (transparences, repli du shader) --- */ --fond-shader: #171717; /* fond uni si WebGL indisponible */ --voile-noir: rgba(20, 22, 26, 0.55); /* voile derrière une photo agrandie */ /* Voile du hero plafonné à 50 % (audit, règle 40) : le texte tient par son ombre portée. */ --voile-hero-haut: rgba(20, 22, 26, 0.20); --voile-hero-bas: rgba(20, 22, 26, 0.50); --voile-bandeau: rgba(20, 22, 26, 0.82); --blanc-attenue: rgba(255, 255, 255, 0.72); --blanc-filet: rgba(255, 255, 255, 0.14); --ombre: rgba(20, 22, 26, 0.14); --ombre-forte: rgba(20, 22, 26, 0.45); --gris-pied: #9aa1aa; /* liens du pied de page */ --piste: rgba(128, 134, 142, 0.35); /* rail vidéo au repos */ --voile-lecteur: rgba(20, 22, 26, 0.35); /* fond de la commande centrale */ /* --- Balayage de titre (« Nos services », seule occurrence) --- */ --degrade-titre: linear-gradient(100deg, var(--noir) 0%, var(--noir) 25%, var(--rouge) 50%, var(--noir) 75%, var(--noir) 100%); /* --- Courbes d'animation reprises des composants d'origine --- */ --courbe-sortie: cubic-bezier(0.22, 1, 0.36, 1); --courbe-ressort: cubic-bezier(0.34, 1.4, 0.64, 1); --duree-accordeon: 420ms; /* --- Dégradés de repli des shaders Silk --- Reconstruits à partir de la première image réelle du shader (DECALAGE_PREMIERE_IMAGE = 20 s), échantillonnée en neuf points : coins, milieux de bords, centre. Coins par-dessus, milieux de bords ensuite, centre en fond. Valeurs mobiles (autre format d'image) sous 620 px. */ --hero-hg: #391616; --hero-hm: #fbf0de; --hero-hd: #3f1515; --hero-mg: #6c1313; --hero-c: #d69a90; --hero-md: #f5e0d0; --hero-bg: #9c1716; --hero-bm: #4d1414; --hero-bd: #a6312f; --degrade-hero: radial-gradient(50% 50% at 0% 0%, var(--hero-hg) 0%, transparent 100%), radial-gradient(50% 50% at 100% 0%, var(--hero-hd) 0%, transparent 100%), radial-gradient(50% 50% at 0% 100%, var(--hero-bg) 0%, transparent 100%), radial-gradient(50% 50% at 100% 100%, var(--hero-bd) 0%, transparent 100%), radial-gradient(50% 50% at 50% 0%, var(--hero-hm) 0%, transparent 100%), radial-gradient(50% 50% at 0% 50%, var(--hero-mg) 0%, transparent 100%), radial-gradient(50% 50% at 100% 50%, var(--hero-md) 0%, transparent 100%), radial-gradient(50% 50% at 50% 100%, var(--hero-bm) 0%, transparent 100%), var(--hero-c); /* Devis et cadres « contour » : shader Auralis (shader-contour.js), première image à u_time = 8, échantillonnée en neuf points au format du cadre du devis (816 × 1000) et d'un cadre contour (1152 × 520). */ --devis-hg: #070606; --devis-hm: #1f0b0c; --devis-hd: #070606; --devis-mg: #0c0909; --devis-c: #380f10; --devis-md: #470f10; --devis-bg: #0e0606; --devis-bm: #10090a; --devis-bd: #3f0b0d; --contour-hg: #060505; --contour-hm: #0c0909; --contour-hd: #080506; --contour-mg: #0d0909; --contour-c: #2d0e0e; --contour-md: #0f0909; --contour-bg: #0e0606; --contour-bm: #2d0d0d; --contour-bd: #140708; --degrade-contour: radial-gradient(50% 50% at 0% 0%, var(--contour-hg) 0%, transparent 100%), radial-gradient(50% 50% at 100% 0%, var(--contour-hd) 0%, transparent 100%), radial-gradient(50% 50% at 0% 100%, var(--contour-bg) 0%, transparent 100%), radial-gradient(50% 50% at 100% 100%, var(--contour-bd) 0%, transparent 100%), radial-gradient(50% 50% at 50% 0%, var(--contour-hm) 0%, transparent 100%), radial-gradient(50% 50% at 0% 50%, var(--contour-mg) 0%, transparent 100%), radial-gradient(50% 50% at 100% 50%, var(--contour-md) 0%, transparent 100%), radial-gradient(50% 50% at 50% 100%, var(--contour-bm) 0%, transparent 100%), var(--contour-c); --degrade-devis: radial-gradient(50% 50% at 0% 0%, var(--devis-hg) 0%, transparent 100%), radial-gradient(50% 50% at 100% 0%, var(--devis-hd) 0%, transparent 100%), radial-gradient(50% 50% at 0% 100%, var(--devis-bg) 0%, transparent 100%), radial-gradient(50% 50% at 100% 100%, var(--devis-bd) 0%, transparent 100%), radial-gradient(50% 50% at 50% 0%, var(--devis-hm) 0%, transparent 100%), radial-gradient(50% 50% at 0% 50%, var(--devis-mg) 0%, transparent 100%), radial-gradient(50% 50% at 100% 50%, var(--devis-md) 0%, transparent 100%), radial-gradient(50% 50% at 50% 100%, var(--devis-bm) 0%, transparent 100%), var(--devis-c); /* --- Boutons métalliques (repli CSS et ombres du composant d'origine) --- */ --metal-contour: rgba(0, 0, 0, 0.3); --metal-contour-survol: rgba(0, 0, 0, 0.4); --metal-contour-actif: rgba(0, 0, 0, 0.5); --metal-ombre-1: rgba(0, 0, 0, 0.02); --metal-ombre-2: rgba(0, 0, 0, 0.08); --metal-ombre-3: rgba(0, 0, 0, 0.12); --metal-ombre-4: rgba(0, 0, 0, 0.15); --metal-ombre-5: rgba(0, 0, 0, 0.05); --metal-ombre-6: rgba(0, 0, 0, 0.1); --metal-ombre-7: rgba(0, 0, 0, 0.2); --metal-ombre-8: rgba(0, 0, 0, 0.3); --metal-creux-1: rgba(0, 0, 0, 0.4); --metal-face-haut: #202020; --metal-face-bas: #000; --metal-ombre-texte: rgba(0, 0, 0, 0.5); --metal-onde: rgba(255, 255, 255, 0.4); --metal-onde-fin: rgba(255, 255, 255, 0); /* Repli : première trame réelle du shader, échantillonnée tous les 10° sur le liseré (moyenne de trois largeurs de bouton) : la bascule vers le shader au survol ne produit pas de saut visible. */ --metal-repli: conic-gradient(from 0deg, #ce2a47 0deg, #c5292b 10deg, #bc2729 20deg, #b12527 30deg, #a32325 40deg, #932023 50deg, #7c1c1f 60deg, #5f171b 70deg, #66181c 80deg, #891f22 90deg, #aa2528 100deg, #905b7e 110deg, #3d181d 120deg, #802322 130deg, #101013 140deg, #0a080c 150deg, #13090d 160deg, #1c0b0e 170deg, #240d0f 180deg, #2f0e11 190deg, #391013 200deg, #461315 210deg, #441a1c 220deg, #511d1f 230deg, #622021 240deg, #6b2425 250deg, #781d1f 260deg, #4c1415 270deg, #1b0b0c 280deg, #71130b 290deg, #40141a 300deg, #f5c9f3 310deg, #ed9fd4 320deg, #e573b1 330deg, #de458e 340deg, #d62c6b 350deg, #ce2a47 360deg); /* --- Formulaire de devis sur fond animé : carte opaque, pas de voile --- */ --ombre-carte-devis: rgba(0, 0, 0, 0.35); /* Texte posé à même le shader (titre, chapeau, fil des étapes) : contour d'ombre serré + halo large, sans voile sur le fond. Épaissie jusqu'à tenir sur la teinte la plus claire du shader (#FFF7E5, 1,07:1 nue) : contraste médian mesuré titre 20,6:1, chapeau 6,2:1, fil 8,2:1. */ --ombre-texte-1: #000; --ombre-texte-2: rgba(0, 0, 0, 0.95); --ombre-texte-3: rgba(0, 0, 0, 0.85); --ombre-texte-4: rgba(0, 0, 0, 0.75); --ombre-texte-5: rgba(0, 0, 0, 0.7); --ombre-texte-shader: 0 0 2px var(--ombre-texte-1), 0 0 2px var(--ombre-texte-1), 0 0 5px var(--ombre-texte-2), 0 0 10px var(--ombre-texte-3), 0 2px 16px var(--ombre-texte-4), 0 0 40px var(--ombre-texte-5); --piste-shader: rgba(255, 255, 255, 0.35); /* Vidéos d'ambiance du hero */ --cadre-video: rgba(255, 255, 255, 0.92); --ombre-video: rgba(0, 0, 0, 0.45); --fond-video: #14161a; --pause-fond: rgba(20, 22, 26, 0.72); /* Sections à shader (au plus deux sur le site) et avis clients */ --ombre-texte-section: rgba(0, 0, 0, 0.65); --degrade-titre-clair: linear-gradient(100deg, var(--blanc) 0%, var(--blanc) 25%, var(--nuance-or-clair) 50%, var(--blanc) 75%, var(--blanc) 100%); /* Logos : retour au survol */ --ombre-logo: rgba(20, 22, 26, 0.10); /* --- Pied de page (hover-footer recoloré) --- */ --pied-fond-haut: rgba(20, 22, 26, 0.4); --pied-fond-bas: rgba(216, 31, 38, 0.2); --evide-neutre: #2a2e35; --evide-rampe-1: #fff; --evide-rampe-2: #f5a3a6; --evide-rampe-3: #d81f26; --evide-rampe-4: #a8151b; --evide-rampe-5: #fff; --evide-masque-centre: #fff; --evide-masque-bord: #000; /* --- Quadrillage des sections claires (« transparent » pour le désactiver) --- */ --quadrillage: rgba(20, 22, 26, 0.04); --quadrillage-pas: 32px; --masque-plein: #000; /* couleur opaque des masques CSS (canal alpha seul) */ /* --- États --- */ --vert: #1c8a4a; /* pastille « ouvert » */ --vert-fond: #e6f4ec; --rouge-fond: #fdecec; /* fond des messages d'erreur */ /* --- Nuancier des finitions de jantes (échantillons indicatifs) --- */ --nuance-argent: #c9ced4; --nuance-argent-clair: #f1f3f5; --nuance-anthracite: #3b4046; --nuance-anthracite-clair: #6b7178; --nuance-noir: #111316; --nuance-noir-clair: #2a2e33; --nuance-or: #b8923a; --nuance-or-clair: #e8cf8a; --nuance-brillant: rgba(255, 255, 255, 0.85); /* --- Durées d'animation (mises à ~0 si l'utilisateur réduit les animations) --- */ --t-rapide: 0.2s; --t-moyen: 0.35s; --t-lent: 0.45s; /* --- Mise en page --- */ --largeur: 1200px; --gouttiere: 24px; --hauteur-entete: 88px; --entete-h: var(--hauteur-entete); --hauteur-barre-mobile: 60px; --rayon: 6px; /* --- Typographie --- */ --police-titre: "Barlow Condensed", "Barlow Condensed Repli", "Arial Narrow", Arial, sans-serif; --police-titre-capitales: "Barlow Condensed", "Barlow Condensed Repli Capitales", "Arial Narrow", Arial, sans-serif; --police-texte: "Barlow", "Barlow Repli", Arial, Helvetica, sans-serif; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Toute cible (ancre, Tab, scrollIntoView) s'arrête sous l'en-tête collant. */ scroll-padding-top: calc(var(--entete-h) + 16px); } body { margin: 0; font-family: var(--police-texte); font-size: 17px; line-height: 1.7; color: var(--gris-texte); background: var(--blanc); } img, video, iframe { max-width: 100%; display: block; } img { height: auto; } a { color: var(--rouge); } a:hover { color: var(--rouge-fonce); } h1, h2, h3, h4 { font-family: var(--police-titre); font-weight: 700; line-height: 1.1; color: var(--noir); margin: 0 0 0.5em; letter-spacing: 0.01em; } h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); text-transform: uppercase; font-family: var(--police-titre-capitales); } h2 { font-size: clamp(2rem, 4vw, 3rem); } h3 { font-size: 1.6rem; font-weight: 600; } h4 { font-size: 1.25rem; font-weight: 600; } p { margin: 0 0 1em; } /* Focus clavier : contour rouge 3px sur tout élément interactif */ :focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; } /* Lien d'évitement */ .lien-evitement { position: absolute; left: 16px; top: -80px; z-index: 1000; padding: 12px 20px; background: var(--noir); color: var(--blanc); font-weight: 600; text-decoration: none; border-radius: var(--rayon); } .lien-evitement:focus { top: 16px; color: var(--blanc); } .visuellement-masque { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Conteneur et sections ---------- */ .conteneur { width: 100%; max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding: 0 var(--gouttiere); position: relative; z-index: 1; /* passe au-dessus du quadrillage des sections claires */ } .section { padding: 88px 0; } .section--gris { background: var(--gris-clair); } .section--sombre { background: var(--noir); color: var(--blanc-attenue); } .section--sombre h2, .section--sombre h3, .section--sombre h4 { color: var(--blanc); } .section--serree { padding: 48px 0; } /* Quadrillage discret des sections à fond blanc (ni grises, ni sombres, ni hero) */ .section:not(.section--gris):not(.section--sombre):not(.section--shader) { position: relative; } .section:not(.section--gris):not(.section--sombre):not(.section--shader)::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--quadrillage) 1px, transparent 1px), linear-gradient(90deg, var(--quadrillage) 1px, transparent 1px); background-size: var(--quadrillage-pas) var(--quadrillage-pas); /* La trame s'efface vers le bas pour ne pas buter sur la section suivante. */ -webkit-mask-image: linear-gradient(to bottom, var(--masque-plein) 0%, var(--masque-plein) 55%, transparent 100%); mask-image: linear-gradient(to bottom, var(--masque-plein) 0%, var(--masque-plein) 55%, transparent 100%); } .titre-section { position: relative; padding-bottom: 20px; margin-bottom: 32px; } .titre-section::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; background: var(--rouge); } .centre { text-align: center; } .centre .titre-section::after, .titre-section.centre::after { left: 50%; transform: translateX(-50%); } .intro { max-width: 760px; font-size: 1.1rem; } .centre .intro, .intro.centre { margin-left: auto; margin-right: auto; } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px; border: 2px solid transparent; border-radius: var(--rayon); font-family: var(--police-titre); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color var(--t-rapide), color var(--t-rapide), border-color var(--t-rapide); } .btn--rouge { background: var(--rouge); color: var(--blanc); } .btn--rouge:hover { background: var(--rouge-fonce); color: var(--blanc); } .btn--noir { background: var(--noir); color: var(--blanc); } .btn--noir:hover { background: var(--rouge); color: var(--blanc); } .btn--contour { border-color: var(--blanc); color: var(--blanc); background: transparent; } .btn--contour:hover { background: var(--blanc); color: var(--noir); } .btn--contour-noir { border-color: var(--noir); color: var(--noir); background: transparent; } .btn--contour-noir:hover { background: var(--noir); color: var(--blanc); } .groupe-boutons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; } .centre .groupe-boutons { justify-content: center; } /* ---------- En-tête ---------- */ .entete { position: sticky; top: 0; z-index: 100; height: var(--hauteur-entete); background: var(--blanc); border-bottom: 1px solid var(--gris-bordure); } .entete__interieur { height: 100%; display: flex; align-items: center; gap: 24px; } .entete__logo { flex-shrink: 0; display: block; padding: 4px 10px; background: var(--noir); /* le logo est blanc : il lui faut un fond sombre */ border-radius: var(--rayon); } .entete__logo img { height: 56px; width: auto; } .menu { margin-left: auto; } .menu__liste { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; } .menu__lien { display: block; padding: 8px 12px; font-family: var(--police-titre); font-size: 1.12rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; color: var(--noir); white-space: nowrap; border-bottom: 3px solid transparent; transition: color var(--t-rapide), border-color var(--t-rapide); } .menu__lien:hover { color: var(--rouge); } .menu__lien[aria-current="page"] { color: var(--rouge); border-bottom-color: var(--rouge); } .entete__action { flex-shrink: 0; } .burger { display: none; margin-left: auto; width: 48px; height: 48px; padding: 12px; border: 0; background: transparent; cursor: pointer; } .burger__barre { display: block; height: 3px; background: var(--noir); border-radius: 2px; transition: transform var(--t-moyen), opacity var(--t-rapide); } .burger__barre + .burger__barre { margin-top: 6px; } .burger[aria-expanded="true"] .burger__barre:nth-child(1) { transform: translateY(9px) rotate(45deg); } .burger[aria-expanded="true"] .burger__barre:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger__barre:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* ---------- Hero de l'accueil (fond shader) ---------- */ .hero { position: relative; overflow: hidden; min-height: calc(100vh - var(--hauteur-entete)); min-height: calc(100svh - var(--hauteur-entete)); display: flex; align-items: center; padding: 96px 0; background: var(--degrade-hero); /* jamais d'aplat noir avant la première image du shader */ color: var(--blanc); } .hero__shader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; /* apparaît en fondu une fois le shader compilé */ /* Fondu court (mesuré V8 : 0,45 s pesait un tiers du délai perçu). Le dégradé de repli est calé sur la première image : 200 ms suffisent à masquer le passage du dégradé lisse aux motifs du shader. */ transition: opacity 200ms ease; } .hero__shader.est-pret { opacity: 1; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--voile-hero-haut) 0%, var(--voile-hero-bas) 100%); } .hero__contenu { position: relative; z-index: 2; pointer-events: none; } /* Texte à gauche, deux vidéos encadrées à droite (empilées sous 920 px). */ .hero__contenu { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; gap: 48px; } .hero__videos { position: relative; justify-self: center; width: min(100%, 340px); padding-bottom: 32px; pointer-events: auto; } .hero__video { overflow: hidden; aspect-ratio: 9 / 16; border: 4px solid var(--cadre-video); border-radius: 18px; background: var(--fond-video); box-shadow: 0 24px 60px var(--ombre-video); } .hero__video video { display: block; width: 100%; height: 100%; object-fit: cover; } .hero__video--principale { width: 78%; } .hero__video--secondaire { position: absolute; right: 0; bottom: 0; width: 46%; transform: rotate(3deg); } .hero__pause { position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--pause-fond); color: var(--blanc); cursor: pointer; } .hero__pause svg { width: 22px; height: 22px; fill: currentColor; } .hero__pause-icone { display: grid; } .hero__pause-icone--lire, .hero__pause.est-en-pause .hero__pause-icone--pause { display: none; } .hero__pause.est-en-pause .hero__pause-icone--lire { display: grid; } .hero__pause:focus-visible { outline-color: var(--blanc); } .hero__contenu a, .hero__contenu button { pointer-events: auto; } .hero h1 { color: var(--blanc); margin-bottom: 0.3em; } .hero h1, .hero__contenu p, .hero__telephone { text-shadow: var(--ombre-texte-shader); } .hero__ligne2 { display: block; color: var(--rouge); } .hero__accroche { max-width: 620px; font-size: 1.25rem; color: var(--blanc-attenue); } .hero__telephone { display: inline-block; margin: 12px 0 8px; font-family: var(--police-titre); font-size: clamp(2.4rem, 7vw, 4.4rem); font-weight: 700; line-height: 1.1; color: var(--blanc); text-decoration: underline; text-decoration-color: var(--rouge); text-decoration-thickness: 6px; text-underline-offset: 10px; min-height: 44px; /* cible tactile */ } .hero__telephone:hover { color: var(--blanc); text-decoration-color: var(--blanc); } /* ---------- Bandeau des pages intérieures ---------- */ .bandeau { position: relative; padding: 72px 0 80px; background-color: var(--noir); background-size: cover; background-position: center; color: var(--blanc-attenue); } .bandeau::before { content: ""; position: absolute; inset: 0; background: var(--voile-bandeau); } .bandeau > .conteneur { position: relative; } .bandeau h1 { color: var(--blanc); } .bandeau__chapeau { max-width: 780px; font-size: 1.15rem; } .ariane ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.95rem; } .ariane li + li::before { content: "/"; margin-right: 6px; color: var(--rouge); } .ariane a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blanc); text-decoration: none; } /* cible tactile 44 px */ .ariane a:hover { text-decoration: underline; color: var(--blanc); } .ariane [aria-current="page"] { color: var(--blanc-attenue); } /* ---------- Bloc texte + média ---------- */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .duo__media img, .duo__media video { width: 100%; border-radius: var(--rayon); box-shadow: 0 18px 40px var(--ombre); } .duo__media--vertical img, .duo__media--vertical video { max-height: 620px; width: auto; margin: 0 auto; } .duo--inverse .duo__media { order: -1; } .duo--haut { align-items: start; } .duo h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); } /* ---------- Grilles et cartes ---------- */ .grille { display: grid; gap: 28px; } .grille--2 { grid-template-columns: repeat(2, 1fr); } .grille--3 { grid-template-columns: repeat(3, 1fr); } .grille--4 { grid-template-columns: repeat(4, 1fr); } /* Une seule carte (atelier de Leers) : centrée, largeur de lecture. */ .grille--seule { grid-template-columns: minmax(0, 960px); justify-content: center; } /* Carte seule : photo et coordonnées côte à côte (empilées sous 760 px). */ @media (min-width: 760px) { .grille--seule .agence { display: grid; grid-template-columns: 1fr 1fr; } /* La photo (portrait) est recadrée à la hauteur des coordonnées : c'est le texte qui fixe la hauteur de la carte, pas l'image. */ .grille--seule .agence picture { position: relative; min-height: 280px; } .grille--seule .agence .carte__image { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; } } .carte { display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--gris-bordure); border-top: 4px solid var(--rouge); border-radius: var(--rayon); overflow: hidden; color: var(--gris-texte); } .carte__image { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; } .carte__corps { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 28px; } .carte__corps p:last-of-type { flex: 1; } /* seul le dernier paragraphe pousse le bouton vers le bas */ .carte__corps .btn-metal { align-self: flex-start; margin-top: 8px; } .carte h3 { color: var(--noir); } .section--sombre .carte { background: var(--noir-doux); border-color: var(--noir-doux); border-top-color: var(--rouge); color: var(--blanc-attenue); } .section--sombre .carte h3 { color: var(--blanc); } /* ---------- Listes à coche ---------- */ .liste-check { list-style: none; margin: 0 0 1em; padding: 0; } .liste-check li { position: relative; padding-left: 34px; margin-bottom: 12px; } .liste-check li::before { content: ""; position: absolute; left: 4px; top: 0.42em; width: 16px; height: 8px; border-left: 3px solid var(--rouge); border-bottom: 3px solid var(--rouge); transform: rotate(-45deg); } /* ---------- Chiffres clés ---------- */ .chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; margin: 64px 0 0; padding-left: 0; padding-top: 48px; border-top: 1px solid var(--blanc-filet); text-align: center; } .chiffre b { display: block; font-family: var(--police-titre); font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 700; line-height: 1; color: var(--rouge); font-variant-numeric: tabular-nums; /* largeur fixe : le bandeau ne tressaute pas */ white-space: nowrap; } .chiffre span { display: block; margin-top: 8px; font-weight: 500; } /* ---------- Logos (agréments, confiance) ---------- */ .logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 20px; } /* En couleur et encadrés dès le repos : ce sont des preuves de confiance. */ .logos li { display: block; } .logos picture { display: block; } .logos img { display: block; width: 100%; height: auto; filter: none; opacity: 1; background: var(--blanc); border: 1px solid var(--gris-bordure); border-radius: var(--rayon); padding: 16px; aspect-ratio: 1; object-fit: contain; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } /* Logos très larges (Keolis, Stellantis…) : moins de marge, sinon ils paraissent minuscules. */ .logos img.logo--large { padding: 4px; } @media (hover: hover) { .logos img:hover { border-color: var(--rouge); box-shadow: 0 6px 18px var(--ombre-logo); transform: translateY(-2px); } } /* ---------- Galerie ---------- */ .galerie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); } .galerie--5 { grid-template-columns: repeat(5, 1fr); } .galerie--portrait img { aspect-ratio: 3 / 4; } .image-pleine { width: 100%; border-radius: var(--rayon); } /* ---------- Vidéos ---------- */ .videos { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .videos video { width: 100%; aspect-ratio: 9 / 16; object-fit: contain; background: var(--noir); border-radius: var(--rayon); } .video-presentation { width: 100%; max-height: 560px; aspect-ratio: 9 / 16; object-fit: contain; margin: 0 auto; background: var(--noir-doux); border-radius: var(--rayon); } /* ========================================================================== Contenants : aucun bloc de texte posé à nu sur le fond d'une section. Quatre traitements, alternés (jamais deux fois le même sur deux sections consécutives — audit, règle 54) : .contenant--clair carte blanche, bordure, filet rouge en haut (défaut, sur les sections grises) .contenant--sombre carte --noir, texte clair, filet rouge (poids visuel) .contenant--encadre bordure seule, fond transparent, filet rouge à gauche (bloc court sur un fond déjà travaillé) .contour cadre à shader autour d'une carte opaque (au plus deux par page) ========================================================================== */ .contenant { padding: 32px 36px; border-radius: var(--rayon); } .contenant > :last-child { margin-bottom: 0; } .contenant--clair { background: var(--blanc); border: 1px solid var(--gris-bordure); border-top: 4px solid var(--rouge); } .contenant--sombre { background: var(--noir); border-top: 4px solid var(--rouge); color: var(--blanc-attenue); } .contenant--sombre h2, .contenant--sombre h3, .contenant--sombre .titre-section, .contenant--sombre .intro { color: var(--blanc); } .contenant--sombre a:not(.btn-metal) { color: var(--blanc); } .contenant--encadre { background: transparent; border: 1px solid var(--gris-bordure); border-left: 4px solid var(--rouge); } .section--sombre .contenant--encadre { border-color: var(--blanc-filet); border-left-color: var(--rouge); } .contenant--etroit { max-width: 860px; margin-inline: auto; } .centre .contenant { text-align: center; } /* Colonne de texte d'un bloc texte + média posée dans un contenant */ .duo__texte.contenant { align-self: center; } /* ---------- Cadre à shader (« contour ») ---------- Le shader n'apparaît que comme un cadre : canvas sur toute la surface du conteneur (créé par pool-webgl.js dans .contour__fond), carte opaque en retrait de 20 px (10 px sur mobile). Repli : dégradé calé sur la première image du shader. Jamais de shader sous 620 px, sur tactile ou en mouvement réduit (shader-contour.js). */ .contour { position: relative; isolation: isolate; padding: 20px; border-radius: 14px; background: var(--degrade-contour); overflow: hidden; } .contour__fond { position: absolute; inset: 0; z-index: -1; border-radius: 14px; overflow: hidden; pointer-events: none; } .contour__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity var(--t-moyen) ease; } .contour__canvas.est-pret { opacity: 1; } .contour__carte { border-radius: 8px; box-shadow: 0 12px 32px var(--ombre-carte-devis); } .contour__carte--claire { padding: 32px 36px; background: var(--blanc); } .contour__carte--sombre { padding: 32px 36px; background: var(--noir); color: var(--blanc-attenue); } .contour__carte--cartes { box-shadow: none; } /* le contenu porte déjà ses cartes opaques */ .contour__carte--cartes .carte { box-shadow: 0 12px 32px var(--ombre-carte-devis); } .contour__carte .intro { margin: 0 auto; } .contour__carte .groupe-boutons { margin-top: 20px; } .centre + .contour, .contour + .galerie { margin-top: 0; } .contour + .galerie { margin-top: 32px; } /* ---------- Notre atelier : un cadre, photo | bloc structuré ---------- */ .atelier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; background: var(--blanc); border: 1px solid var(--gris-bordure); border-top: 4px solid var(--rouge); border-radius: var(--rayon); } .atelier__photo { position: relative; min-height: 320px; } .atelier__photo picture { position: absolute; inset: 0; } .atelier__image { width: 100%; height: 100%; object-fit: cover; } .atelier__infos { padding: 36px 40px; border-left: 1px solid var(--gris-bordure); /* séparation nette entre les deux colonnes */ } .atelier__infos h3 { margin: 0 0 16px; } .atelier__adresse { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; } .atelier__adresse a { display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; } .atelier__actions { margin: 0 0 24px; } .atelier__horaires { width: 100%; border-collapse: collapse; font-size: 0.98rem; } .atelier__horaires caption { padding-bottom: 8px; text-align: left; font-family: var(--police-titre); font-size: 1.15rem; font-weight: 600; color: var(--noir); } .atelier__horaires th, .atelier__horaires td { padding: 9px 0; border-top: 1px solid var(--gris-bordure); text-align: left; } .atelier__horaires th { padding-right: 16px; font-weight: 600; color: var(--noir); } .atelier__horaires td { text-align: right; } .agence .carte__image { aspect-ratio: 16 / 9; } .agence dl { margin: 0; } .agence dt { font-family: var(--police-titre); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--noir); } .agence dd { margin: 0 0 12px; } /* ---------- Carte Google (page contact) ---------- */ .carte-google iframe { width: 100%; height: 420px; border: 0; border-radius: var(--rayon); } /* ---------- Mentions légales ---------- */ .texte-legal { max-width: 860px; } .texte-legal h2 { margin-top: 1.6em; font-size: 2rem; } /* ---------- Pied de page (hover-footer, recoloré à la charte) ---------- */ .pied { position: relative; isolation: isolate; overflow: hidden; padding: 72px 0 0; background: var(--noir); color: var(--blanc-attenue); font-size: 0.98rem; } .pied__fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(125% 125% at 50% 10%, var(--pied-fond-haut) 50%, var(--pied-fond-bas) 100%); } .pied__colonnes { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 40px; } .pied h2 { font-size: 1.35rem; color: var(--blanc); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 18px; } .pied__logo { display: inline-block; margin-bottom: 18px; } .pied__logo img { height: 64px; width: auto; } .pied ul { list-style: none; margin: 0; padding: 0; } .pied li { margin-bottom: 0; } .pied a { color: var(--gris-pied); text-decoration: none; } .pied a:hover { color: var(--blanc); text-decoration: underline; } .pied li a, .pied address a, .pied__bas a { display: inline-flex; align-items: center; min-height: 44px; } .pied address { font-style: normal; } .pied__agence { margin: 0 0 12px; } .pied__agence strong, .pied__horaires strong { color: var(--blanc); } .pied__horaires { margin: 0; } .reseaux { display: flex; gap: 10px; } .reseaux a { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--noir-doux); color: var(--blanc); transition: background-color var(--t-rapide); } .reseaux a:hover { background: var(--rouge); } .reseaux svg { width: 20px; height: 20px; fill: currentColor; } .pied__bas { margin-top: 48px; padding: 18px 0; border-top: 1px solid var(--blanc-filet); font-size: 0.9rem; } .pied__bas .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; } .pied__bas p { margin: 0; } /* Mot ESSALMI en lettres évidées : pièce décorative, grand écran seulement */ .pied__evide { display: none; max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: -8px auto -48px; padding: 0 var(--gouttiere); } .pied__evide svg { display: block; width: 100%; height: auto; overflow: visible; user-select: none; } .evide__texte { font-family: var(--police-titre); font-size: 72px; font-weight: 700; letter-spacing: 0.02em; } .evide__neutre { stroke: var(--evide-neutre); opacity: 0; transition: opacity var(--t-moyen); } .pied__evide:hover .evide__neutre { opacity: 0.7; } .evide__trace { stroke: var(--rouge); stroke-dasharray: 1000; stroke-dashoffset: 1000; } .pied__evide.est-visible .evide__trace { animation: evide-trace 4s ease-in-out forwards; } @keyframes evide-trace { to { stroke-dashoffset: 0; } } .evide__arret--1 { stop-color: var(--evide-rampe-1); } .evide__arret--2 { stop-color: var(--evide-rampe-2); } .evide__arret--3 { stop-color: var(--evide-rampe-3); } .evide__arret--4 { stop-color: var(--evide-rampe-4); } .evide__arret--5 { stop-color: var(--evide-rampe-5); } .evide__masque-centre { stop-color: var(--evide-masque-centre); } .evide__masque-bord { stop-color: var(--evide-masque-bord); } @media (min-width: 1024px) { .pied__evide { display: block; } } @media (prefers-reduced-motion: reduce) { /* Lettres dessinées d'emblée ; le masque au curseur reste actif. */ .evide__trace, .pied__evide.est-visible .evide__trace { animation: none; stroke-dashoffset: 0; } } /* ---------- Bandeau cookies ---------- */ .cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; max-width: 760px; margin: 0 auto; padding: 20px 24px; background: var(--noir-doux); color: var(--blanc-attenue); border-top: 4px solid var(--rouge); border-radius: var(--rayon); box-shadow: 0 12px 40px var(--ombre-forte); } .cookies[hidden] { display: none; } .cookies p { margin: 0 0 14px; font-size: 0.95rem; } .cookies a { color: var(--blanc); } .cookies__boutons { display: flex; gap: 12px; flex-wrap: wrap; } .cookies .btn-metal { min-width: 120px; } /* ---------- Barre mobile (visible sous 620px uniquement) ---------- */ .barre-mobile { display: none; } /* ---------- Images responsives ---------- */ picture { display: block; } /* ---------- Signature du pied de page ---------- */ .signature { color: var(--gris-pied); } .signature a { color: var(--gris-pied); text-decoration: none; } .signature a:hover { color: var(--blanc); text-decoration: underline; } /* Éléments de l'en-tête collant : scroll-padding-top les croirait masqués et ferait remonter la page au focus (Maj+Tab). Marge négative qui l'annule. */ .entete a, .entete button { scroll-margin-top: calc(-1 * (var(--entete-h) + 16px)); } /* Ancres internes : le décalage sous l'en-tête vient de scroll-padding-top sur html (un scroll-margin-top en plus doublerait l'écart). */ /* ---------- Icônes au trait (SVG en ligne) ---------- */ .icone { width: 32px; height: 32px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- Sommaire des prestations (carrosserie) ---------- */ .sommaire { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .sommaire a { display: flex; align-items: center; gap: 14px; min-height: 64px; height: 100%; padding: 14px 18px; background: var(--blanc); border: 1px solid var(--gris-bordure); border-left: 4px solid var(--rouge); border-radius: var(--rayon); font-family: var(--police-titre); font-size: 1.2rem; font-weight: 600; line-height: 1.2; color: var(--noir); text-decoration: none; transition: border-color var(--t-rapide), color var(--t-rapide); } .sommaire a .icone { color: var(--rouge); } .sommaire a:hover { border-color: var(--noir); color: var(--rouge); } /* ---------- Variante de bloc : texte en encart ---------- */ .duo--encart .duo__texte { padding: 40px; background: var(--gris-clair); border-left: 4px solid var(--rouge); border-radius: var(--rayon); } .section--gris .duo--encart .duo__texte { background: var(--blanc); } .duo--encart .duo__media { margin-block: -32px; } /* ---------- Parcours numéroté (séquence chronologique) ---------- */ .etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; counter-reset: etape; } .etapes--3 { grid-template-columns: repeat(3, 1fr); } .etapes li { position: relative; counter-increment: etape; padding-top: 64px; color: var(--noir); font-weight: 500; line-height: 1.45; } .etapes li::before { content: counter(etape); position: absolute; top: 0; left: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--rouge); color: var(--blanc); font-family: var(--police-titre); font-size: 1.5rem; font-weight: 700; } /* Filet gris reliant une pastille à la suivante */ .etapes li:not(:last-child)::after { content: ""; position: absolute; top: 23px; left: 60px; right: -12px; height: 2px; background: var(--gris-bordure); } .etapes--compact li { padding-top: 52px; font-size: 1rem; } .etapes--compact li::before { width: 38px; height: 38px; font-size: 1.2rem; } .etapes--compact li:not(:last-child)::after { top: 18px; left: 50px; } /* ---------- Tableau des prestations (mécanique) ---------- */ .tableau-prestations { width: 100%; border-collapse: collapse; background: var(--blanc); border-top: 4px solid var(--rouge); font-size: 1rem; } .tableau-prestations caption { caption-side: bottom; padding-top: 14px; text-align: left; font-size: 0.95rem; } .tableau-prestations th, .tableau-prestations td { padding: 14px 18px; border-bottom: 1px solid var(--gris-bordure); text-align: left; vertical-align: top; } .tableau-prestations thead th { background: var(--noir); color: var(--blanc); font-family: var(--police-titre); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .tableau-prestations tbody th { font-family: var(--police-titre); font-size: 1.15rem; font-weight: 600; color: var(--noir); } /* ---------- Nuancier des finitions (jantes) ---------- */ .nuancier { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; align-items: start; text-align: center; } .nuancier__pastille { display: block; width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%; border: 1px solid var(--gris-bordure); box-shadow: 0 8px 18px var(--ombre); } .nuancier strong { display: block; color: var(--noir); font-family: var(--police-titre); font-size: 1.15rem; line-height: 1.25; } /* Brillant : reflet net ; mat : dégradé doux sans reflet */ .nuance--argent-brillant { background: radial-gradient(circle at 32% 28%, var(--nuance-brillant) 0 8%, var(--nuance-argent-clair) 18%, var(--nuance-argent) 60%, var(--nuance-anthracite-clair) 100%); } .nuance--noir-mat { background: radial-gradient(circle at 40% 35%, var(--nuance-noir-clair) 0%, var(--nuance-noir) 75%); } .nuance--anthracite-brillant { background: radial-gradient(circle at 32% 28%, var(--nuance-brillant) 0 7%, var(--nuance-anthracite-clair) 20%, var(--nuance-anthracite) 70%); } .nuance--or-brillant { background: radial-gradient(circle at 32% 28%, var(--nuance-brillant) 0 7%, var(--nuance-or-clair) 22%, var(--nuance-or) 75%); } .nuance--bicolore-noir { background: conic-gradient(var(--nuance-noir) 0 25%, var(--nuance-argent-clair) 25% 50%, var(--nuance-noir) 50% 75%, var(--nuance-argent-clair) 75%); } .nuance--bicolore-rouge { background: conic-gradient(var(--rouge) 0 25%, var(--nuance-argent-clair) 25% 50%, var(--rouge) 50% 75%, var(--nuance-argent-clair) 75%); } .nuancier-cadre .nuancier li { padding: 22px 12px 18px; border: 1px solid var(--gris-bordure); border-radius: var(--rayon); background: var(--blanc); } .nuancier-note { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--gris-bordure); font-size: 0.95rem; text-align: center; } /* ---------- Icône en tête de carte (engagements) ---------- */ .carte__icone { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: var(--gris-clair); color: var(--rouge); } /* ---------- Page contact : blocs d'appel ---------- */ .appels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; } .appels--seul { grid-template-columns: minmax(0, 560px); justify-content: center; } /* Renvoi « * Selon nos disponibilités » : gris, distinct de l'astérisque rouge des champs obligatoires. */ .renvoi { color: var(--gris-texte); font-weight: 400; } .appel { padding: 24px 26px; background: var(--noir-doux); border-top: 4px solid var(--rouge); border-radius: var(--rayon); color: var(--blanc-attenue); } .appel h2 { margin: 0 0 4px; font-size: 1.5rem; color: var(--blanc); } .appel h2 span { font-weight: 600; color: var(--blanc-attenue); } .appel__numero { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--police-titre); font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 700; line-height: 1.1; color: var(--blanc); text-decoration: none; } .appel__numero:hover { color: var(--blanc); text-decoration: underline; text-decoration-color: var(--rouge); } .appel address { font-style: normal; font-size: 0.95rem; margin: 6px 0 16px; } .appel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } .appel__actions a:not(.btn-metal) { color: var(--blanc); display: inline-flex; align-items: center; min-height: 44px; } .ouverture { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 6px 14px; border-radius: 999px; background: var(--noir-doux); color: var(--blanc); font-weight: 600; } .ouverture[hidden] { display: none; } .ouverture::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gris-pied); } .ouverture--ouvert::before { background: var(--vert); box-shadow: 0 0 0 3px var(--vert-fond); } /* ---------- Formulaire de devis ---------- */ .champ { margin: 0 0 22px; } .champ > label, .champ legend { display: block; margin-bottom: 6px; padding: 0; font-weight: 600; color: var(--noir); } fieldset.champ { border: 0; padding: 0; min-width: 0; } .champ__aide { display: block; margin-top: 4px; font-size: 0.95rem; } .champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .questionnaire input[type="text"], .questionnaire input[type="tel"], .questionnaire input[type="email"], .questionnaire input[type="date"], .questionnaire textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--gris-bordure); border-radius: var(--rayon); background: var(--blanc); font: inherit; font-size: 17px; /* ≥ 16px : évite le zoom automatique d'iOS */ color: var(--noir); } .questionnaire textarea { min-height: 130px; resize: vertical; } .questionnaire input:focus, .questionnaire textarea:focus { border-color: var(--rouge); } .questionnaire [aria-invalid="true"] { border-color: var(--rouge); background: var(--rouge-fond); } .obligatoire { color: var(--rouge); } /* Choix en cartes (boutons radio) */ .choix { display: flex; flex-wrap: wrap; gap: 10px; } .choix label { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 10px 18px; border: 2px solid var(--gris-bordure); border-radius: var(--rayon); background: var(--blanc); font-weight: 600; color: var(--noir); cursor: pointer; transition: border-color var(--t-rapide), background-color var(--t-rapide); } .choix input { position: absolute; opacity: 0; width: 1px; height: 1px; } .choix label:hover { border-color: var(--noir); } .choix label:has(input:checked) { border-color: var(--rouge); background: var(--rouge-fond); color: var(--rouge-fonce); } .choix label:has(input:focus-visible) { outline: 3px solid var(--rouge); outline-offset: 3px; } /* Zone de dépôt des photos */ .depot { position: relative; display: block; padding: 28px 20px; border: 2px dashed var(--gris-texte); border-radius: var(--rayon); background: var(--gris-clair); text-align: center; cursor: pointer; transition: border-color var(--t-rapide), background-color var(--t-rapide); } .depot strong { display: block; font-family: var(--police-titre); font-size: 1.35rem; color: var(--noir); } .depot:hover, .depot.est-survolee { border-color: var(--rouge); background: var(--rouge-fond); } .erreur { display: block; margin-top: 6px; color: var(--rouge-fonce); font-weight: 600; font-size: 0.95rem; } .erreur:empty { display: none; } .consentement { display: flex; gap: 12px; align-items: flex-start; } .consentement input { width: 24px; height: 24px; margin-top: 3px; flex-shrink: 0; accent-color: var(--rouge); } /* Pots de miel anti-spam : hors écran, jamais visibles */ .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .envoi-etat { padding: 28px; border-radius: var(--rayon); border-left: 4px solid var(--vert); background: var(--vert-fond); color: var(--noir); } .envoi-etat--erreur { border-left-color: var(--rouge); background: var(--rouge-fond); } .envoi-etat h3 { margin-top: 0; } .envoi-etat[hidden] { display: none; } /* ---------- Tableau des horaires ---------- */ .tableau-horaires { width: 100%; max-width: 620px; margin: 0 auto 40px; border-collapse: collapse; background: var(--blanc); } .tableau-horaires caption { font-family: var(--police-titre); font-size: 1.5rem; font-weight: 600; color: var(--noir); margin-bottom: 10px; } .tableau-horaires th, .tableau-horaires td { padding: 10px 16px; border-bottom: 1px solid var(--gris-bordure); text-align: left; } .tableau-horaires thead th { background: var(--noir); color: var(--blanc); font-weight: 600; } .tableau-horaires tbody th { color: var(--noir); font-weight: 600; } .tableau-horaires .ferme { font-style: italic; } /* ---------- Cartes d'agence ---------- */ .agence .btn-metal { align-self: flex-start; } .agence dd a { display: inline-flex; align-items: center; min-height: 44px; } /* ---------- Divers ---------- */ .bandeau__chapeau a { color: var(--blanc); } .bandeau__chapeau a:hover { color: var(--blanc); text-decoration-color: var(--rouge); } .conclusion { margin-top: 40px; } .titre-ensuite { margin-top: 0; } .image-pleine { width: 100%; height: 100%; object-fit: cover; } .image-cadree { aspect-ratio: 4 / 3; } .chiffres--seul { margin-top: 8px; padding-top: 0; border-top: 0; } .depot:has(+ input:focus-visible) { outline: 3px solid var(--rouge); outline-offset: 3px; } address { font-style: normal; } .tableau-horaires { margin-top: 48px; } /* ---------- Menu mobile ouvert : le fond ne défile plus ---------- Le corps est figé en position fixe par interactions.js (top = -position), ce qui conserve la position sur iOS. L'en-tête collant perdrait alors son ancrage : il passe en position fixe, et le corps garde sa place. */ body.menu-ouvert { padding-top: var(--hauteur-entete); } body.menu-ouvert .entete { position: fixed; top: 0; left: 0; right: 0; } body.menu-ouvert .menu { max-height: calc(100vh - var(--hauteur-entete)); max-height: calc(100svh - var(--hauteur-entete)); overflow-y: auto; overscroll-behavior: contain; } /* ---------- Clavier virtuel ouvert : la barre d'appel ne masque aucun champ ---------- */ body.clavier-ouvert .barre-mobile { display: none; } /* ---------- Rendu différé des sections lointaines (galerie, vidéos, logos) ---------- */ .section--differee { content-visibility: auto; contain-intrinsic-size: auto 900px; } /* ---------- Révélation mot à mot du hero (BlurOutUp) ---------- Seuls opacity, transform et filter sont animés : composités par le GPU, sans recalcul de mise en page au-dessus du shader WebGL. */ .mot { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(10px); animation: mot-arrivee 0.56s var(--courbe-sortie) forwards; animation-delay: calc(var(--decalage, 0ms) + var(--mot, 0) * 28ms); will-change: opacity, transform, filter; } .espace { white-space: pre; } .mots--arrives .mot { will-change: auto; } @keyframes mot-arrivee { to { opacity: 1; filter: blur(0); transform: translateY(0); } } /* ---------- Balayage de dégradé sur un titre (DiaTextReveal) ---------- Couleur pleine par défaut ; clipping activé seulement si pris en charge, et jamais sous prefers-reduced-motion. */ @supports ((background-clip: text) or (-webkit-background-clip: text)) { @media (prefers-reduced-motion: no-preference) { .titre-balayage { background-image: var(--degrade-titre); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .titre-balayage.est-balaye { animation: balayage 1.5s var(--courbe-sortie) forwards; } } } @keyframes balayage { from { background-position: 100% 0; } to { background-position: 0% 0; } } /* ---------- Cartes en éventail (TeamStack) ---------- Contenu toujours lisible. Pile et éventail seulement sur grand écran à pointeur fin ; ailleurs, trois cartes l'une sous l'autre. */ .eventail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; } .carte-eventail { position: relative; padding: 30px 30px 32px; background: var(--blanc); border: 1px solid var(--gris-bordure); border-top: 4px solid var(--rouge); border-radius: var(--rayon); box-shadow: 0 12px 30px var(--ombre); transition: transform var(--t-lent) var(--courbe-sortie); } .carte-eventail h3 { margin-bottom: 18px; } .carte-eventail .liste-check { margin: 0; } .carte-eventail--avant { background: var(--noir); border-color: var(--noir); border-top-color: var(--rouge); color: var(--blanc-attenue); } .carte-eventail--avant h3 { color: var(--blanc); } @media (hover: hover) and (pointer: fine) and (min-width: 920px) { .eventail { gap: 0; padding: 16px 12px; } .carte-eventail { transform: translate(var(--pile-x), var(--pile-y)) rotate(var(--pile-r)); } .carte-eventail--avant { z-index: 1; } .eventail:hover .carte-eventail, .eventail:focus-within .carte-eventail { transform: translate(var(--ecart-x), var(--ecart-y)) rotate(var(--rotation)); } } /* Pastille d'action : rond de 36 px qui s'étend à la largeur du libellé */ .pastille-action { display: inline-flex; align-items: center; width: 36px; height: 36px; margin-top: 22px; overflow: hidden; white-space: nowrap; border-radius: 18px; background: var(--rouge); color: var(--blanc); font-family: var(--police-titre); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.03em; text-decoration: none; transition: width 240ms var(--courbe-sortie), background-color var(--t-rapide); } .pastille-action:hover, .pastille-action:focus-visible { color: var(--blanc); background: var(--rouge-fonce); } .pastille-action__icone { flex: 0 0 36px; text-align: center; font-size: 1.2rem; } .pastille-action__texte { padding-right: 16px; } /* La carte entière est cliquable (lien étendu). */ .pastille-action::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon); } .carte-eventail:hover .pastille-action, .pastille-action:focus-visible { width: var(--largeur-cible, 190px); } @media (hover: none), (max-width: 919px) { .pastille-action { width: auto; } } /* ---------- Lecteur vidéo (VideoSlider) ---------- */ .lecteur { position: relative; color: var(--gris-texte); } .section--sombre .lecteur { color: var(--blanc-attenue); } .lecteur__ecran { position: relative; } .lecteur__surface { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--rayon); background: transparent; cursor: pointer; } .lecteur__surface[hidden] { display: none; } .lecteur__surface:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; } .lecteur__icone { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--voile-lecteur); color: var(--blanc); transition: opacity var(--t-moyen) var(--courbe-ressort), transform var(--t-moyen) var(--courbe-ressort); } .lecteur__icone svg { width: 28px; height: 28px; fill: currentColor; } .lecteur__icone--pause { opacity: 0; transform: scale(0.6); } .est-en-lecture .lecteur__icone--lire { opacity: 0; transform: scale(0.6); } .est-en-lecture .lecteur__surface:hover .lecteur__icone--pause, .est-en-lecture .lecteur__surface:focus-visible .lecteur__icone--pause { opacity: 1; transform: scale(1); } .lecteur__commandes { position: relative; height: 80px; contain: layout; } /* Place de la barre réservée dès le premier rendu (pas de décalage à l'initialisation) ; sans JavaScript, un