@layer reset, tokens, global, layout, components, blocks, utilities; /** * LG Groupe — Point d'entrée CSS * * Compilé par PostCSS (postcss-import + tailwindcss/nesting + tailwindcss + autoprefixer) * vers assets/css/dist/main.css. * * Le fichier compilé est COMMITÉ dans le repo (Hostinger n'a pas Node.js). * * Architecture : CSS Cascade Layers * Ordre des couches (priorité croissante) : * reset → tokens → global → layout → components → blocks → utilities * * @since 1.0.0 */ /* ============================================ ORDRE DES COUCHES Les dernières couches ont la priorité la plus haute. ============================================ */ /* ============================================ BASE ============================================ */ /** * Modern CSS Reset — LG Groupe * * Reset minimal pour une base cohérente cross-browser. * Inspiré de Josh Comeau et Andy Bell. * Couche : @layer reset (priorité la plus basse) * * @since 1.0.0 */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } html:focus-within { scroll-behavior: smooth; } body { min-height: 100dvh; line-height: 1.6; text-rendering: optimizeSpeed; overflow-x: clip; } #main-content { overflow-x: clip; } h1, h2, h3, h4, h5, h6, p { overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } p { text-wrap: pretty; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img, picture, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } table { border-collapse: collapse; } /* Réduire les animations pour les utilisateurs qui le préfèrent */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } } /** * Design Tokens — LG Groupe * * Source de vérité pour toutes les custom properties du projet. * Valeurs extraites des maquettes finales et alignées avec theme.json. * * Couche : @layer tokens * Direction artistique : O2 — Innovation & Fluidité * * @since 1.0.0 */ @layer tokens { :root { /* ============================================ COULEURS ============================================ */ /* Palette principale */ --color-rouge-lg: #E52A19; --color-noir-primary: #1A1A1A; --color-blanc: #FFFFFF; /* Échelle de gris */ --color-gris-50: #F5F5F5; --color-gris-100: #E8E8E8; --color-gris-200: #E0E0E0; --color-gris-300: #979797; --color-gris-400: #888888; --color-gris-600: #666666; --color-gris-700: #4A4A4A; --color-gris-800: #525252; --color-gris-900: #1A1A1A; /* Services */ --color-trucks: #EFAA1C; --color-rent: #3C68B0; --color-mobe: #24E5EA; /* Sémantiques */ --color-text: var(--color-noir-primary); --color-text-muted: var(--color-gris-600); --color-text-subtle: var(--color-gris-300); --color-text-inverse: var(--color-blanc); --color-accent: var(--color-rouge-lg); --color-surface: var(--color-blanc); --color-surface-alt: var(--color-gris-50); --color-border: var(--color-gris-200); /* États désactivés (boutons / CTA sans URL configurée — Figma) */ --color-disabled-bg: #D9D9D9; --color-disabled-text: #979797; /* Aliases rétrocompatibles */ --color-white: var(--color-blanc); --color-grey-200: var(--color-gris-200); --color-grey-600: var(--color-gris-600); --color-grey-800: var(--color-gris-800); /* Dégradés */ --gradient-noir: linear-gradient(272.29deg, #1A1A1A 1.95%, #525252 98.1%); --gradient-rouge: linear-gradient(270deg, #E52A19 0%, #BF1E10 100%); /* ============================================ TYPOGRAPHIE ============================================ */ --ff-heading: 'Inria Sans', system-ui, sans-serif; --ff-body: 'Inria Sans', system-ui, sans-serif; /* Échelle responsive avec clamp() — 375px → 1440px */ --fs-display: clamp(2.5rem, 1.5rem + 4.2vw, 4.5rem); /* 40px → 72px */ --fs-hero-surtitle: clamp(1.75rem, 1rem + 3.1vw, 3.5rem); /* 28px → 56px */ --fs-h1: clamp(2rem, 1.4rem + 2.5vw, 3rem); /* 32px → 48px */ --fs-h2: clamp(1.5rem, 1.2rem + 1.25vw, 2rem); /* 24px → 32px */ --fs-h3: clamp(1.25rem, 1.1rem + 0.625vw, 1.5rem); /* 20px → 24px */ --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18px → 20px */ --fs-body-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18px → 20px */ --fs-body: 1rem; /* 16px */ --fs-body-sm: 0.875rem; /* 14px */ --fs-body-xs: 0.75rem; /* 12px */ --fs-caption: 1.5rem; /* 12px */ --fs-bloc-label: clamp(0.875rem, -1rem + 3.906vw, 1.5rem); /* 14px → 24px (768px → 1024px) */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-heading: 1.2; --lh-body: 1.6; --lh-tight: 1.15; /* ============================================ ESPACEMENTS — base 8px ============================================ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem; --space-12: 5rem; --space-16: 8rem; /* ============================================ BORDER RADIUS ============================================ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px; /* Alias rétrocompatible */ --radius-soft: 30px; --radius-full: 9999px; /* ============================================ OMBRES ============================================ */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.2); /* ============================================ GLASS / GLASSMORPHISME ============================================ */ --glass-bg: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.15); --glass-blur: blur(16px); /* ============================================ GLOW ============================================ */ --glow-accent: 0 0 20px rgba(227, 6, 19, 0.3); --glow-light: 0 0 20px rgba(255, 255, 255, 0.2); /* ============================================ TRANSITIONS ============================================ */ --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease-out; /* ============================================ Z-INDEX ============================================ */ --z-dropdown: 50; --z-header: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; /* ============================================ LAYOUT ============================================ */ --container-max: 1440px; /* Max-width des containers (desktop) -> changer à 1200px */ --container-px: 2rem; --grid-gap: var(--space-4); } /* Desktop — container padding élargi (cohérent avec .l-container : 4rem) */ @media (min-width: 1024px) { :root { --container-px: 4rem; } } /* Grand écran — container étendu à 1440px au-delà de 1700px (évite les marges trop faibles sur MacBook 13" ≈ 1512px) */ @media (min-width: 1700px) { :root { --container-max: 1440px; } } } /** * Global — Styles de base body, typographie, liens, focus * * Couche : @layer global * * @since 1.0.0 */ @layer global { body { font-family: var(--ff-body); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); color: var(--color-text); background-color: var(--color-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--ff-heading); font-weight: var(--fw-bold); line-height: var(--lh-heading); color: var(--color-text); } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { text-decoration: underline; } ::-moz-selection { background-color: var(--color-rouge-lg); color: var(--color-blanc); } ::selection { background-color: var(--color-rouge-lg); color: var(--color-blanc); } /* Focus visible — accessibilité clavier (WCAG AA) */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } } /** * Layout — Primitives de mise en page * * Classes : .l-container, .l-section, .l-grid * Couche : @layer layout * * @since 1.0.0 */ @layer layout { /* ============================================ CONTAINER — centrage + largeur max + padding ============================================ */ .l-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: 2rem; position: relative; } /* Petits mobiles (< 414px) : réduit le padding latéral */ @media (max-width: 414px) { .l-container { padding-inline: 1rem; } } /* ============================================ SECTION — espacement vertical entre blocs ============================================ */ .l-section { padding-block: var(--space-8); } @media (min-width: 1024px) { .l-section { padding-block: var(--space-10); } } /* Fond alterné gris clair */ .l-section--alt { background-color: var(--color-surface-alt); } /* Fond sombre */ .l-section--dark { background-color: var(--color-noir-primary); color: var(--color-text-inverse); } /* ============================================ GRID — grille de base responsive ============================================ */ .l-grid { display: grid; gap: var(--grid-gap); } /* Variantes colonnes — mobile-first (1 col par défaut) */ @media (min-width: 768px) { .l-grid--2 { grid-template-columns: repeat(2, 1fr); } .l-grid--3 { grid-template-columns: repeat(2, 1fr); } .l-grid--4 { grid-template-columns: repeat(2, 1fr); } .l-container { padding-inline: var(--container-px); } } @media (min-width: 1024px) { .l-grid--3 { grid-template-columns: repeat(3, 1fr); } .l-grid--4 { grid-template-columns: repeat(4, 1fr); } } /* Desktop (≥1024px) — Figma : padding latéral 64px */ @media (min-width: 1024px) { .l-container { padding-inline: 4rem; } } } /* ============================================ COMPOSANTS ============================================ */ /** * Button — Composant bouton * * Classes : .btn, .btn--primary (rouge), .btn--dark (noir), * .btn--outline (bordure), .btn--ghost (transparent) * Style pill arrondi conforme aux maquettes. * Couche : @layer components * * @since 1.0.0 */ /** * Badge — Labels, tags, indicateurs * * Classes : .badge, .badge--rouge, .badge--noir, .badge--label, * .badge--open, .badge--closed * Couche : @layer components * * @since 1.0.0 */ /** * Badge group — Conteneur + barres dégradées * * Pattern décoratif partagé : badge label + 5 barres verticales dégradées * (noir → gris clair), utilisé dans tous les blocs de section. * * Classes : * .badge-group — Conteneur flex (badge + barres) * .badge-group .badge — Padding + white-space partagés pour tous les badges de section * .badge-bar — Barre décorative (base) * .badge-bar--1 à 5 — Variantes largeur + couleur * * Note : le font-size reste défini par bloc (fs-body-sm ou fs-body selon le contexte). * * Couche : @layer components * * @since 1.0.0 */ /** * Card — Base commune pour les cards * * Classes : .card, .card__body * Spécialisé dans les blocs : card-actu.css, card-marque.css, etc. * Couche : @layer components * * @since 1.0.0 */ /** * Actu Card — Composant card actualité image-overlay * * Styles partagés entre tous les blocs utilisant la mosaïque actus : * dernieres-actus, actualites-grid… * * Classes : .lg-actus__card, .lg-actus__badge, .lg-actus__card-* * Couche : @layer components * * @see views/partials/actu-card.twig * @see views/partials/actus-mosaic.twig * @since 1.0.0 */ /** * Form — Styles de base inputs, selects, textareas * * Styles globaux pour les éléments de formulaire. * Les styles spécifiques au formulaire multi-étapes sont dans le bloc dédié. * Couche : @layer components (overridable par Tailwind utilities) * * @since 1.0.0 */ /** * Form Page — formulaire de contact intelligent (B2a + B2b) * * PAGE dédiée plein écran (/lg-contact/), pas un overlay (DEC-044). State * machine : assets/js/form/form.js. Étapes 1→4 (étape 4 = parcours atelier) + * 3 pop-ups sur socle mutualisé (redirection, confirmation, fin de navigation). * BEM préfixe `lg-form`. Fidèle Figma (desktop ≥1024 / tablette 768-1023 / mobile <768). * * Couche : @layer components * @since 1.4.0 */ /** * Bloc : lg/cta-services * * Bandeau CTA services — 6 cards glassmorphism. * Mobile-first : colonne verticale. Tablette : grille 2 colonnes. Desktop : row pleine largeur. * * Chargé globalement via main.css (bloc présent sur toutes les pages via base.twig). * * @since 1.0.0 */ @layer blocks { /* ---- Section ---- */ .lg-cta-services { position: relative; overflow: hidden; background: rgb(13, 13, 15); } /* Background photographique */ .lg-cta-services::before { content: ''; position: absolute; inset: 0; max-width: var(--container-max); margin-inline: auto; background-image: url('../../images/cta-services/bg-push-contact.png'); background-size: cover; background-position: center; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); } .lg-cta-services__inner { position: relative; z-index: 1; } /* ---- Header ---- */ .lg-cta-services__header { text-align: center; margin-bottom: var(--space-8); } .lg-cta-services__title { font-family: var(--ff-heading); font-size: 1.5rem; font-weight: var(--fw-bold); line-height: 1.33; text-transform: uppercase; color: var(--color-blanc); margin-bottom: var(--space-3); } .lg-cta-services__subtitle { font-family: var(--ff-body); font-size: 1.25rem; line-height: 1.2; color: var(--color-blanc); max-width: 280px; margin-inline: auto; } /* ---- Barre floutée : wrappe la grille, padding 2rem haut/bas et déborde dans le padding-inline du .l-container (var(--container-px)). Mobile/tablette : padding-inline interne pour ré-indenter les cards au niveau du contenu du container (Figma : inset 32px), pendant que la barre, elle, reste en pleine largeur via la marge négative. ---- */ .lg-cta-services__blur-bar { padding-block: 2rem; padding-inline: var(--container-px, 2rem); margin-inline: calc(-1 * var(--container-px, 2rem)); background: rgba(116, 116, 116, 0.3); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-block: 2px solid #525252; } /* ---- Grid de cards ---- */ .lg-cta-services__grid { display: flex; flex-direction: column; gap: var(--space-5); } /* ---- Card glassmorphism ---- */ .lg-cta-services__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); width: 100%; padding: var(--space-5); background: rgba(116, 116, 116, 0.3); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid #d1d1d1; border-radius: 20px; text-align: left; cursor: pointer; transition: background var(--transition-base), transform var(--transition-base); } /* Inner glow */ .lg-cta-services__card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 30px 0 rgba(255, 255, 255, 0.25); pointer-events: none; } .lg-cta-services__card:hover { background: rgba(116, 116, 116, 0.45); transform: translateY(-2px); } /* ---- Arrow icon ---- */ .lg-cta-services__card-arrow { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; } /* ---- Service icon ---- */ .lg-cta-services__card-icon { width: 50px; height: 50px; flex-shrink: 0; } .lg-cta-services__card-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } /* ---- Label ---- */ .lg-cta-services__card-label { font-family: var(--ff-heading); font-size: 1rem; font-weight: var(--fw-bold); line-height: 27px; text-transform: uppercase; white-space: normal; color: var(--color-blanc); } /* Mobile & tablette : pas de
forcé, le label reste sur une ligne s'il rentre et passe à la ligne naturellement seulement si nécessaire (white-space: normal ci-dessus) pour éviter tout débordement en largeur. */ .lg-cta-services__card-label br { display: none; } /* ============================================ Tablette (768px) — grille 2 colonnes ============================================ */ @media (min-width: 768px) { /* Sous-titre sur une seule ligne (Figma tablette) : pas de contrainte de largeur */ .lg-cta-services__subtitle { max-width: none; } .lg-cta-services__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) 5.5%; } } /* ============================================ Desktop (1280px) — row de 6 cards ============================================ */ @media (min-width: 1280px) { /* Row pleine largeur centrée : la barre redevient pleine largeur sans inset interne (la grille gère son propre max-width + margin auto). */ .lg-cta-services__blur-bar { padding-inline: 0; /* Fondu G/D uniforme (bg + bordures + blur) dès que la barre passe en pleine largeur (row desktop). La barre fait alors --container-max de large à toutes ces tailles ; le fondu 12% est donc homogène et reste cohérent avec le fondu du fond photo (.lg-cta-services::before, actif à toutes les tailles). Avant : ce fondu était gaté à ≥1700px seulement, laissant la plage 1280–1699px sans fondu (bug visible ~1513px). */ -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); } .lg-cta-services__header { margin-bottom: var(--space-10); } .lg-cta-services__title { font-size: 3.5rem; line-height: 1.1; margin-bottom: 18px; } .lg-cta-services__subtitle { font-size: 1.5rem; line-height: 1.3; max-width: none; } .lg-cta-services__grid { display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; gap: 0; max-width: 1280px; margin-inline: auto; } .lg-cta-services__card { padding: 36px 24px; width: auto; flex-shrink: 0; } .lg-cta-services__card-icon { width: 60px; height: 60px; } .lg-cta-services__card-label { font-size: 1.125rem; } /* Desktop : labels sur 2 lignes via
(layout Figma) */ .lg-cta-services__card-label br { display: inline; } } /* ============================================ DESKTOP MEDIUM (1024px → 1700px) MacBook Air / laptops 13"–15" : alignement Figma 1280px. ============================================ */ @media (min-width: 1024px) and (max-width: 1700px) { /* Titre — 56 → 48 */ .lg-cta-services__title { font-size: 3rem; /* 48px */ } /* Sous-titre — 24 → 20 */ .lg-cta-services__subtitle { font-size: 1.25rem; /* 20px */ } /* Cards row — 1280 → 1151 (Figma 1280) */ .lg-cta-services__grid { max-width: 71.9375rem; /* 1151px */ } /* Card — gap interne 12 → 24 */ .lg-cta-services__card { gap: 1.5rem; } /* Icône — 60×60 → 48×48 */ .lg-cta-services__card-icon { width: 48px; height: 48px; } /* Label — 18/27 → 16/20 */ .lg-cta-services__card-label { font-size: 1rem; line-height: 1.25rem; } } } /* end @layer blocks */ /** * Error Page — Pages d'erreur 404 / 410 * * Carte centrée commune aux deux templates (seul le contenu change). * Classes : .lg-error, .lg-error__card, .lg-error__heading, * .lg-error__code, .lg-error__subtitle, .lg-error__text, * .lg-error__cta (associé à .btn.btn--dark) * Couche : @layer components * * Maquette : Figma « DESKTOP/TABLETTE/MOBILE - Page 404/410 ». * Typo fluide (clamp) : mobile 375px → desktop 1440px. * * @since 1.0.0 */ /* ============================================ STRUCTURE ============================================ */ /** * Header — Navigation principale * * Classes : .site-header, navigation, CTAs, mobile overlay * Direction O2 : navigation pilule, fond blanc sticky, ombre légère * Couche : @layer components (overridable par Tailwind utilities) * * @since 1.0.0 */ /** * Footer — Pied de page * * Mobile-first : accordions mobile/tablette, 4 colonnes desktop. * Breakpoints : 768px (tablette), 1024px (desktop) * Couche : @layer components * * @since 2.0.0 */ /* ============================================ UTILITAIRES ============================================ */ /** * Utilities — Classes utilitaires transversales * * Classes : .u-sr-only, .u-sr-only--focusable, .u-text-accent, .u-container * Couche : @layer utilities (priorité la plus haute) * * @since 1.0.0 */ /* ============================================ TAILWIND Génère les classes utilitaires pour les templates Twig. Base (Preflight) omis — remplacé par reset.css. ============================================ */ .\!container{ width: 100% !important; margin-right: auto !important; margin-left: auto !important; padding-right: 16px !important; padding-left: 16px !important; } .container{ width: 100%; margin-right: auto; margin-left: auto; padding-right: 16px; padding-left: 16px; } @media (min-width: 576px){ .\!container{ max-width: 576px !important; } .container{ max-width: 576px; } } @media (min-width: 768px){ .\!container{ max-width: 768px !important; } .container{ max-width: 768px; } } @media (min-width: 1024px){ .\!container{ max-width: 1024px !important; padding-right: 32px !important; padding-left: 32px !important; } .container{ max-width: 1024px; padding-right: 32px; padding-left: 32px; } } @media (min-width: 1280px){ .\!container{ max-width: 1280px !important; } .container{ max-width: 1280px; } } @media (min-width: 1440px){ .\!container{ max-width: 1440px !important; } .container{ max-width: 1440px; } } .\!btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--space-2) !important; padding: var(--space-3) var(--space-5) !important; font-family: var(--ff-body) !important; font-size: var(--fs-body) !important; font-weight: var(--fw-bold) !important; line-height: 1 !important; text-transform: uppercase !important; text-decoration: none !important; border: none !important; border-radius: var(--radius-pill) !important; cursor: pointer !important; transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base) !important; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); font-family: var(--ff-body); font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1; text-transform: uppercase; text-decoration: none; border: none; border-radius: var(--radius-pill); cursor: pointer; transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base); } .btn--primary { background: var(--color-rouge-lg); color: var(--color-blanc); } .btn--primary:hover { background: var(--gradient-rouge); box-shadow: var(--glow-accent); text-decoration: none; color: var(--color-blanc); } .btn--dark { background: var(--color-noir-primary); color: var(--color-blanc); } .btn--dark:hover { background: #2a2a2a; text-decoration: none; color: var(--color-blanc); } .btn--outline { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); } .btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; } .btn--ghost { background: var(--glass-bg); color: var(--color-blanc); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .btn--ghost:hover { background: rgba(255, 255, 255, 0.15); text-decoration: none; } .badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); font-size: var(--fs-bloc-label); font-weight: var(--fw-bold); line-height: 1; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.02em; } /* Variante rouge — ex: "COMMUNIQUÉ OFFICIEL" */ /* Variante noir — ex: "REVUE DE PRESSE" */ .badge--noir { background: var(--color-noir-primary); color: var(--color-blanc); } /* Variante neutre */ .badge--label { background: var(--color-surface-alt); color: var(--color-text-muted); } /* Statut ouverture concession */ .badge--open { background: #E6F9E6; color: #1A7A1A; } .badge--closed { background: #FDE8E8; color: #B91C1C; } .badge-group { position: relative; display: flex; align-items: stretch; gap: var(--space-1); align-self: flex-start; } /* Padding et wrapping partagés — mobile-first */ .badge-group .badge { padding: var(--space-1) var(--space-2); /* 4px 8px — mobile + tablette */ white-space: nowrap; } @media (min-width: 1024px) { .badge-group .badge { padding: var(--space-2) var(--space-4); /* 8px 16px — desktop */ } } /* Desktop medium (1024px → 1700px) — laptops type MacBook Air : font 24 → 16, padding vertical 8 → 4 (Figma 1280px). */ @media (min-width: 1024px) and (max-width: 1700px) { .badge-group .badge { font-size: 1rem; /* 16px (override clamp --fs-bloc-label) */ padding: var(--space-1) var(--space-4); /* 4px 16px */ } } /* Micro-ajustement 1280px — padding vertical légèrement augmenté (label écrasé sinon). */ @media (min-width: 1280px) and (max-width: 1700px) { .badge-group .badge { padding-block: 0.375rem; /* 6px — entre --space-1 (4px) et --space-2 (8px) */ } } .badge-bar { display: block; border-radius: var(--radius-sm); } .badge-bar--1 { width: 10px; background: var(--color-noir-primary); } .badge-bar--2 { width: 8px; background: var(--color-noir-primary); } .badge-bar--3 { width: 8px; background: var(--color-gris-400); } .badge-bar--4 { width: 8px; background: var(--color-gris-200); } .badge-bar--5 { width: 4px; background: var(--color-gris-100); } .card { display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow var(--transition-base), transform var(--transition-base); } .card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } /* ============================================ CARD — Conteneur image-overlay ============================================ */ .lg-actus__card { position: relative; border-radius: 16px; overflow: hidden; min-height: 135px; min-width: 0; } .lg-actus__card-link { display: block; position: relative; width: 100%; height: 100%; min-height: inherit; text-decoration: none; color: var(--color-blanc); } .lg-actus__card-link:hover { text-decoration: none; } /* Image de fond */ .lg-actus__card-img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .lg-actus__card:hover .lg-actus__card-img { transform: scale(1.05); } /* Gradient overlay — bas vers haut */ .lg-actus__card-link::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.08) 100% ); pointer-events: none; z-index: 1; } /* Badge flottant — pill glass en haut à droite */ .lg-actus__card-float { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 3; padding: 4px 10px; background: rgba(30, 30, 30, 0.65); backdrop-filter: blur(8px); border-radius: var(--radius-pill); font-family: var(--ff-heading); font-size: 0.75rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-blanc); } /* Contenu bas de card */ .lg-actus__card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.5rem; z-index: 2; color: var(--color-blanc); } /* Meta : badge univers + date */ .lg-actus__card-meta { display: flex; align-items: center; gap: 0.38rem; margin-bottom: 0.38rem; flex-wrap: wrap; } /* Date */ .lg-actus__card-date { font-family: var(--ff-body); font-size: var(--fs-body-xs); font-weight: var(--fw-bold); color: rgba(255, 255, 255, 0.8); text-transform: uppercase; letter-spacing: 0.03em; } /* Titre */ .lg-actus__card-title { font-family: var(--ff-heading); font-size: 0.875rem; font-weight: var(--fw-bold); line-height: 1.3; color: var(--color-blanc); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Hero card : titre plus gros */ .lg-actus__card--hero .lg-actus__card-title { font-size: 0.875rem; -webkit-line-clamp: 4; line-clamp: 4; } .lg-actus__card--hero .lg-actus__card-meta { flex-direction: column-reverse; align-items: start; } /* ============================================ BADGE UNIVERS — couleurs par slug ============================================ */ .lg-actus__badge { display: inline-block; padding: 0.06rem 0.56rem; border-radius: 0.3125rem; font-family: var(--ff-heading); font-size: 0.875rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-blanc); } .lg-actus__badge--red { background: var(--color-rouge-lg); } .lg-actus__badge--dark { background: rgba(0, 0, 0, 0.6); } .lg-actus__badge--green { background: #2e7d32; } .lg-actus__badge--blue { background: var(--color-rent); } .lg-actus__badge--orange { background: var(--color-trucks); } .lg-actus__badge--teal { background: var(--color-mobe); } /* ============================================ MOBILE (< 768px) — meta sur une seule ligne Les cards 50 % de la mosaïque sont trop étroites pour la taille par défaut : on réduit la typo du label + date pour les garder côte à côte (label à gauche, date à droite) au lieu de basculer haut/bas. ============================================ */ @media (max-width: 767px) { .lg-actus__card-meta { flex-wrap: nowrap; gap: 0.25rem; } /* Le label peut rétrécir (ellipsis) ; la date reste entière à droite. */ .lg-actus__card-meta .lg-actus__badge { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6875rem; /* 11px */ padding: 1px 6px; } .lg-actus__card-date { flex-shrink: 0; white-space: nowrap; font-size: 0.625rem; /* 10px */ } } /* ============================================ TABLET (≥ 768px) ============================================ */ @media (min-width: 768px) { .lg-actus__card-float { top: 0.5rem; right: 0.75rem; } /* Padding Figma tablette : ~14px bas / ~16-18px latéral. Le texte ne doit pas coller au bord gauche de l'image (maquette node 2560-2744). */ .lg-actus__card-content { padding: 0.875rem 1rem; } } /* ============================================ DESKTOP (≥ 1024px) ============================================ */ @media (min-width: 1024px) { .lg-actus__card { min-height: 150px; } .lg-actus__card-float { top: 0.87rem; right: 1.12rem; } .lg-actus__card-content { padding: 0.87rem 1.12rem; } } /* ============================================ DESKTOP MEDIUM (1024px → 1700px) Alignement Figma 1280px : radius 12, date 14, gap 14, float padding 4/9 + blur 25. ============================================ */ @media (min-width: 1024px) and (max-width: 1700px) { .lg-actus__card { border-radius: 12px; } .lg-actus__card-title { line-height: 1rem; /* 16px (Figma 1280) */ } .lg-actus__card-date { font-size: 0.875rem; /* 14px (au lieu de 12px) */ line-height: normal; } .lg-actus__card-meta { gap: 0.875rem; /* 14px Figma */ margin-bottom: 0.375rem; /* 6px Figma */ } /* Padding contenu : Figma 1280 montre 21-22px latéraux et ~13px bas */ .lg-actus__card-content { padding: 0.8125rem 1.375rem; /* 13px / 22px */ } /* Tag "ACTUALITÉ" en overlay : padding plus serré + blur plus prononcé */ .lg-actus__card-float { top: 0.5rem; right: 0.5rem; padding: 4px 9px; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); letter-spacing: 0; } /* Badge univers : padding Figma 1px / 9px, rounded 5 */ .lg-actus__badge { padding: 1px 9px; border-radius: 5px; letter-spacing: 0; } } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select { width: 100%; padding: var(--space-3) var(--space-4); font-family: var(--ff-body); font-size: var(--fs-body); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color var(--transition-fast); } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-accent); } input[type="text"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="url"]::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder { color: var(--color-text-muted); } input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="tel"]::placeholder, input[type="url"]::placeholder, textarea::placeholder, select::placeholder { color: var(--color-text-muted); } /* Layout autonome de la page formulaire (pas de chrome de site). */ body.lg-form-page { margin: 0; max-width: 100%; overflow-x: clip; background: var(--color-gris-50, #f4f4f4); } html:has(body.lg-form-page) { overflow-x: clip; } /* ========================================================= Conteneur de page ========================================================= */ .lg-form { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; background: var(--color-gris-50, #f4f4f4); } .lg-form, .lg-form * { box-sizing: border-box; } /* ========================================================= Header sticky ========================================================= */ .lg-form__header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; background: var(--color-blanc, #fff); border-bottom: 1px solid var(--color-gris-200, #d9d9d9); } .lg-form__logo { display: inline-flex; align-items: center; height: 1.75rem; font-family: var(--ff-heading, "Inria Sans", sans-serif); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.01em; line-height: 1; } .lg-form__logo-lg { color: var(--color-rouge-lg, #e52a19); } .lg-form__logo-groupe { color: var(--color-noir-primary, #141414); } .lg-form__logo-img { display: block; max-height: 100%; width: auto; } /* logo du site (noir) */ .lg-form__close { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.25rem; background: none; border: 0; color: var(--color-noir-primary, #141414); font-family: var(--ff-heading, "Inria Sans", sans-serif); font-weight: 700; font-size: 1.125rem; text-transform: uppercase; text-decoration: none; cursor: pointer; } .lg-form__close-icon { display: block; } /* ========================================================= Corps : conteneur centré ========================================================= */ .lg-form__body { flex: 1 0 auto; width: 100%; max-width: 1440px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; } .lg-form__step { animation: lg-form-fade 0.25s ease; } .lg-form__step[hidden] { display: none; } @keyframes lg-form-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= Stepper ========================================================= */ .lg-form__stepper { margin: 0 auto 2.5rem; max-width: 1137px; } .lg-form__stepper-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .lg-form__stepper-top--center { justify-content: center; } .lg-form__back { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0; background: none; border: 0; color: var(--color-noir-primary, #141414); font-family: var(--ff-heading, "Inria Sans", sans-serif); font-size: 1.25rem; text-transform: uppercase; cursor: pointer; } .lg-form__step-indicator { font-family: var(--ff-heading, "Inria Sans", sans-serif); font-size: 1.25rem; text-transform: uppercase; color: var(--color-noir-primary, #141414); text-align: right; } .lg-form__step-indicator b { font-weight: 700; } .lg-form__progress { display: flex; gap: 0; /* segments jointifs : l'écart vient de l'encoche concave (cf. ci-dessous) */ list-style: none; margin: 0; padding: 0; } .lg-form__progress-item { flex: 1 1 0; display: flex; } /* Segment = bouton : étapes faites cliquables, à venir = disabled (JS). */ .lg-form__progress-seg { position: relative; width: 100%; height: 1.125rem; /* 18px (iso Figma 3962-5355) */ border: 0; padding: 0; border-radius: 999px; background: var(--color-gris-200, #d9d9d9); cursor: pointer; transition: background-color 0.15s ease, opacity 0.15s ease; } .lg-form__progress-seg:disabled { cursor: default; } .lg-form__progress-seg:not(:disabled):hover { opacity: 0.85; } .lg-form__progress-seg:focus-visible { outline: 2px solid var(--color-rouge-lg, #e52a19); outline-offset: 3px; } /* Tooltip custom « Étape X/4 » (hover + focus) — l'aria-label reste pour les SR. */ .lg-form__progress-seg[data-lg-tip]::after { content: attr(data-lg-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 10px; border-radius: 6px; background: var(--color-noir-primary, #141414); color: #fff; font-size: 0.75rem; font-weight: 600; text-transform: none; opacity: 0; pointer-events: none; transition: opacity 0.12s ease; z-index: 5; } .lg-form__progress-seg[data-lg-tip]:hover::after, .lg-form__progress-seg[data-lg-tip]:focus-visible::after { opacity: 1; } .lg-form__progress-seg.is-done { background: var(--color-noir-primary, #141414); } .lg-form__progress-seg.is-current { background: var(--color-rouge-lg, #e52a19); } /* Formes Figma (3959-5030/5031) : 1er segment = pill (border-radius:999px par défaut ci-dessus). Les suivants = bout droit arrondi + ENCOCHE CONCAVE à gauche (cercle r≈10px centré sur le bord) qui crée l'écart visuel. */ .lg-form__progress-item:not(:first-child) .lg-form__progress-seg { border-radius: 0 999px 999px 0; -webkit-mask: radial-gradient(circle 10px at left center, transparent 9.5px, #000 10px); mask: radial-gradient(circle 10px at left center, transparent 9.5px, #000 10px); } /* ========================================================= Titre d'étape ========================================================= */ .lg-form__title { margin: 0 0 2.5rem; font-family: var(--ff-heading, "Inria Sans", sans-serif); font-weight: 700; font-size: clamp(1.625rem, 1.2rem + 2vw, 2.375rem); line-height: 1.1; text-align: center; text-transform: uppercase; color: var(--color-noir-primary, #141414); } .lg-form__title--left { margin: 0; text-align: left; } /* Focus PROGRAMMATIQUE du titre (annonce a11y au changement d'étape) : pas de ring rouge à l'arrivée. Le focus clavier réel reste visible ailleurs. */ .lg-form__title:focus { outline: none; } /* Carte sélectionnée (persistance visuelle du choix, cf. Figma : gris + blanc). */ .lg-form__card.is-selected { background: var(--color-gris-300, #979797); border-color: var(--color-gris-300, #979797); } .lg-form__card.is-selected .lg-form__card-label { color: #fff; } /* ========================================================= Grilles de cartes (étapes 1-3) ========================================================= */ .lg-form__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 1137px; margin: 0 auto; } .lg-form__grid--concessions { gap: 1rem; } .lg-form__card { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.5rem; background: #fff; /* cards BLANCHES (iso maquette Figma 3907-5548/6203/6664) */ border: 1px solid #d9d9d9; /* #D9D9D9 exact (le token gris-200 = #E0E0E0) */ border-radius: 20px; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); font-family: var(--ff-heading, "Inria Sans", sans-serif); cursor: pointer; text-align: center; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } /* Survol = rendu de l'état ACTIF/sélectionné (demande) : fond gris + label blanc + (marque) cadre logo blanc & logo rouge + (projet) icône active. */ .lg-form__card:hover { transform: translateY(-3px); box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18); background: var(--color-gris-300, #979797); border-color: var(--color-gris-300, #979797); } .lg-form__card:hover .lg-form__card-label { color: var(--color-blanc, #fff); } .lg-form__card--marque:hover .lg-form__card-logo { background: var(--color-blanc, #fff); } .lg-form__card--marque:hover .lg-form__card-logo svg, .lg-form__card--marque:hover .lg-form__card-logo svg * { fill: var(--color-rouge-lg, #e52a19) !important; } .lg-form__card--projet:hover .lg-form__card-icon > svg { display: none !important; } .lg-form__card--projet:hover .lg-form__card-icon-active { display: block; } .lg-form__card:focus-visible { outline: 2px solid var(--color-rouge-lg, #e52a19); outline-offset: 2px; } .lg-form__card-label { font-weight: 700; font-size: 1.5rem; line-height: 1.3; text-transform: uppercase; overflow-wrap: break-word; max-width: 100%; color: var(--color-noir-primary, #141414); } .lg-form__card--projet { padding: 2.25rem 1.5rem; } .lg-form__card-icon { display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; /* Pictos = SVG INLINE Figma : --fill-0 = cadre interne, --stroke-0 = glyphe. Cadre #F4F4F4 + glyphe foncé (spec PO). Recoloration au sélectionné ci-dessous. */ --fill-0: var(--color-gris-50, #f4f4f4); --stroke-0: var(--color-noir-primary, #141414); } .lg-form__card-icon img, .lg-form__card-icon svg { max-width: 100%; max-height: 100%; width: 100%; height: 100%; } /* Sélectionné (étape 1) : on REMPLACE le picto inline par l'icône dédiée -active.svg (boîte blanche + glyphe rouge intégrés) plutôt que de recolorer le glyphe en CSS (le SVG inline n'expose pas le glyphe au recolor). */ .lg-form__card-icon-active { display: none; } /* !important : le SVG inline (export Figma) porte style="display:block" en inline, qui primerait une règle CSS classique → le picto resterait visible à côté de l'icône active. */ .lg-form__card--projet.is-selected .lg-form__card-icon > svg { display: none !important; } .lg-form__card--projet.is-selected .lg-form__card-icon-active { display: block; } .lg-form__card-logo { display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; padding: 1rem; background: var(--color-gris-50, #f4f4f4); border-radius: 20px; } .lg-form__card-logo img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .lg-form__card-logo svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; } /* Marque sélectionnée : logo (SVG inline) recoloré en rouge LG. `!important` pour primer un éventuel fill inline du SVG. Sans effet sur un logo . */ .lg-form__card--marque.is-selected .lg-form__card-logo svg, .lg-form__card--marque.is-selected .lg-form__card-logo svg * { fill: var(--color-rouge-lg, #e52a19) !important; } .lg-form__card--projet.is-selected, .lg-form__card--marque.is-selected, .lg-form__card--projet:active, .lg-form__card--marque:active { background: var(--color-gris-300, #979797); border-color: var(--color-gris-300, #979797); } .lg-form__card--projet.is-selected .lg-form__card-label, .lg-form__card--marque.is-selected .lg-form__card-label, .lg-form__card--projet:active .lg-form__card-label, .lg-form__card--marque:active .lg-form__card-label { color: var(--color-blanc, #fff); } .lg-form__card--marque.is-selected .lg-form__card-logo, .lg-form__card--marque:active .lg-form__card-logo { background: var(--color-blanc, #fff); } .lg-form__card--concession { justify-content: center; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1); } .lg-form__card--concession .lg-form__card-label { font-size: 1.375rem; } /* Concession : état actif = ROUGE (iso Figma 3907-6690), pas gris. Le `:hover` doit donc primer le survol générique gris (même spécificité → placé après). */ .lg-form__card--concession.is-selected, .lg-form__card--concession:active, .lg-form__card--concession:hover { background: var(--color-rouge-lg, #e52a19); border-color: var(--color-rouge-lg, #e52a19); } .lg-form__card--concession.is-selected .lg-form__card-label, .lg-form__card--concession:active .lg-form__card-label { color: var(--color-blanc, #fff); } .lg-form__status { margin: 0 0 1.5rem; font-family: var(--ff-body, "Inria Sans", sans-serif); font-size: 1.125rem; text-align: center; color: var(--color-gris-600, #666); } /* ========================================================= Pilule récap (étape 4 + confirmation) ========================================================= */ .lg-form__recap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem; margin: 0 auto 2rem; padding: 0.75rem 1.75rem; max-width: -moz-max-content; max-width: max-content; background: rgba(231, 231, 231, 0.8); border: 1px solid #cfcfcf; border-radius: 999px; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.06); font-family: var(--ff-heading, "Inria Sans", sans-serif); text-transform: uppercase; color: var(--color-noir-primary, #141414); } .lg-form__recap-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; } .lg-form__recap-icon, .lg-form__recap-logo { width: 24px; height: 24px; -o-object-fit: contain; object-fit: contain; } .lg-form__recap-icon[hidden], .lg-form__recap-logo[hidden] { display: none; } .lg-form__recap-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-gris-300, #979797); } /* ========================================================= Étape 4 — panneau + formulaire atelier ========================================================= */ .lg-form__panel { max-width: 1440px; margin: 0 auto; padding: 2.5rem; background: var(--color-blanc, #fff); border: 1px solid var(--color-gris-200, #d9d9d9); border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .lg-form__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; } .lg-form__required-note { margin: 0; font-family: var(--ff-heading, "Inria Sans", sans-serif); font-weight: 700; font-size: 1rem; text-transform: uppercase; white-space: nowrap; color: var(--color-noir-primary, #141414); } .lg-form__form { display: flex; flex-direction: column; gap: 2rem; } .lg-form__form[hidden] { display: none; } /* form parcours inactif */ .lg-form__section { border: 0; margin: 0; padding: 0; min-width: 0; } .lg-form__section-title { width: 100%; margin-bottom: 1.25rem; padding: 0 0 0.75rem; border-bottom: 2px solid var(--color-gris-100, #e8e8e8); font-family: var(--ff-heading, "Inria Sans", sans-serif); font-weight: 700; font-size: 1.375rem; text-transform: uppercase; color: var(--color-rouge-lg, #e52a19); } /* « Votre demande concerne » : titre foncé, sans liseré (cf. Figma). */ .lg-form__section-title--dark { border-bottom: 0; padding-bottom: 0; margin-bottom: 1rem; font-size: 1.5rem; color: var(--color-noir-primary, #141414); } /* Switch VN/VO (essai + financement). */ .lg-form__vovn { display: flex; flex-wrap: wrap; gap: 1rem; } .lg-form__vovn-btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; padding: 0.75rem 1.5rem; border: 1px solid var(--color-gris-200, #d9d9d9); border-radius: 14px; background: #fff; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1); font-family: var(--ff-heading, "Inria Sans", sans-serif); font-weight: 700; font-size: 1.375rem; text-transform: uppercase; color: var(--color-noir-primary, #141414); transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .lg-form__vovn-btn.is-active { background: var(--color-rouge-lg, #e52a19); border-color: var(--color-rouge-lg, #e52a19); color: #fff; } .lg-form__vovn-btn:focus-visible { outline: 2px solid var(--color-rouge-lg, #e52a19); outline-offset: 2px; } /* Champ numérique avec suffixe (ex. « Mois »). */ .lg-form__input-affix { position: relative; display: flex; align-items: center; } .lg-form__field .lg-form__input-affix .lg-form__input { width: 100%; padding-right: 4rem; } .lg-form__input-suffix { position: absolute; right: 1.25rem; font-family: var(--ff-heading, "Inria Sans", sans-serif); font-weight: 700; font-size: 1rem; text-transform: uppercase; color: var(--color-noir-primary, #141414); pointer-events: none; } .lg-form__row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } /* Espace entre lignes, ET entre une ligne et un champ seul qui la suit (ex. « Votre commentaire », posé en .lg-form__field directement après la ligne des selects). `row + field` ne matche QUE des frères de même niveau → jamais les champs INTERNES à la grille d'une .lg-form__row (qui en sont enfants), donc pas de décalage dans les grilles. */ .lg-form__row + .lg-form__row, .lg-form__row + .lg-form__field { margin-top: 1.25rem; } .lg-form__field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .lg-form__label { font-family: var(--ff-heading, "Inria Sans", sans-serif); font-weight: 700; font-size: 1rem; text-transform: uppercase; color: var(--color-noir-primary, #141414); } .lg-form__req-star { color: var(--color-noir-primary, #141414); } .lg-form__label-optional { font-weight: 400; font-style: italic; font-size: 0.75rem; text-transform: none; color: var(--color-gris-600, #666); } /* Préfixe `.lg-form__field` sur toute la famille : la règle de base input[type=...] (form.css, 0,0,1,1) bat sinon `.lg-form__input` (0,0,1,0) et écrase le pill (radius), le padding et le placeholder. +1 classe suffit et conserve l'ordre relatif interne (affix / select / lock). */ .lg-form__field .lg-form__input { width: 100%; height: 46px; padding: 0 1.125rem; background: var(--color-gris-50, #f4f4f4); border: 1px solid transparent; border-radius: 2000px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08); font-family: var(--ff-body, "Inria Sans", sans-serif); font-size: 1rem; color: var(--color-noir-primary, #141414); } .lg-form__field .lg-form__input::-moz-placeholder { color: var(--color-gris-300, #979797); /* spec PO étape 4 */ text-transform: uppercase; font-size: 0.9375rem; } .lg-form__field .lg-form__input::placeholder { color: var(--color-gris-300, #979797); /* spec PO étape 4 */ text-transform: uppercase; font-size: 0.9375rem; } .lg-form__field .lg-form__input:focus, .lg-form__field .lg-form__textarea:focus, .lg-form__field .lg-form__select:focus { outline: 2px solid var(--color-rouge-lg, #e52a19); outline-offset: 1px; } .lg-form__field .lg-form__input--lock { display: flex; align-items: center; background: #d9d9d9; /* #D9D9D9 exact (spec PO autorité) — pas le token gris-200 (#E0E0E0) */ color: var(--color-gris-300, #979797); /* #979797 gras (spec PO) */ font-family: var(--ff-heading, "Inria Sans", sans-serif); font-weight: 700; text-transform: uppercase; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10); /* champs verrouillés (demande PO) */ } .lg-form__select-wrap { position: relative; } .lg-form__field .lg-form__select { -moz-appearance: none; appearance: none; -webkit-appearance: none; padding-right: 2.75rem; text-transform: uppercase; cursor: pointer; } /* Chevron dans un cercle gris (iso Figma 3962-5080). */ .lg-form__select-chevron { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-gris-300, #979797); pointer-events: none; color: #fff; } /* Champ avec icône préfixe (ex. e-mail, B9). */ .lg-form__input-wrap { position: relative; display: block; width: 100%; } .lg-form__input-prefix-icon { position: absolute; left: 1.125rem; top: 50%; transform: translateY(-50%); width: 20px; height: 16px; pointer-events: none; } .lg-form__field .lg-form__input--prefixed { padding-left: 3.625rem; } /* Trait vertical séparant l'icône préfixe (e-mail) du texte (iso Figma 3959-5141). */ .lg-form__input-divider { position: absolute; left: 3.125rem; top: 50%; transform: translateY(-50%); width: 1px; height: 24px; background: #d9d9d9; pointer-events: none; } /* intl-tel-input (téléphone international) : pleine largeur, pill conservé. */ .lg-form__field .iti { display: block; width: 100%; } /* Sélecteur pays = BOÎTE BLANCHE inset dans le champ (drapeau + chevron, sans indicatif), iso Figma 3959-5084. `!important` : la feuille vendor iti est hors @layer → ses déclarations primeraient sinon les nôtres (layered). */ .lg-form__field .iti__flag-container { padding: 0 !important; } .lg-form__field .iti__selected-flag, .lg-form__field .iti__flag-container:hover .iti__selected-flag { height: 30px !important; margin: 8px !important; padding: 0 10px !important; background: #fff !important; border: 1px solid #d9d9d9 !important; border-radius: 2000px !important; } /* Préfixe indicatif « (+33) » : après la boîte pays, texte foncé persistant. padding-left = repli (champ masqué à l'init) ; le JS l'ajuste au pixel quand l'étape 4 devient visible / au changement de pays. */ .lg-form__field .iti--allow-dropdown input.lg-form__input { padding-left: 120px !important; } .lg-form__field .lg-form__tel-dialcode { position: absolute; left: 70px; top: 50%; transform: translateY(-50%); color: var(--color-noir-primary, #141414); font-family: var(--ff-body, "Inria Sans", sans-serif); font-size: 1rem; line-height: 1; pointer-events: none; z-index: 2; } /* Drapeaux (sélecteur + liste) en pastille RONDE. La largeur du sprite (5762px) reste inchangée → positions par pays valides ; on force un carré et on étire la hauteur du sprite pour remplir le cercle. Le 2e sélecteur couvre la liste quand iti la déplace dans (.iti--container). */ .lg-form__field .iti__flag, .iti--container .iti__flag { width: 18px !important; height: 18px !important; border-radius: 50%; background-size: 5762px 18px !important; background-position-y: 0 !important; } /* iti ouvre un dropdown PLEIN ÉCRAN sur appareils détectés « mobile » (classe iti-mobile sur + position:fixed bord à bord). On rétablit le dropdown CLASSIQUE ancré au champ (top/left déjà posés en JS) → même rendu que desktop sur tablette/mobile. Hors @layer côté vendor → !important. */ .lg-form__textarea { width: 100%; min-height: 120px; padding: 1rem 1.125rem; background: var(--color-gris-50, #f4f4f4); border: 1px solid transparent; border-radius: 10px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08); font-family: var(--ff-body, "Inria Sans", sans-serif); font-size: 1rem; resize: vertical; } /* Honeypot (hors écran) */ .lg-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Opt-ins */ .lg-form__optins { display: flex; flex-direction: column; gap: 0.75rem; } .lg-form__optin { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; } .lg-form__optin input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-rouge-lg, #e52a19); } .lg-form__optin-text { font-family: var(--ff-heading, "Inria Sans", sans-serif); font-weight: 700; font-size: 0.875rem; text-transform: uppercase; color: var(--color-noir-primary, #141414); } .lg-form__badge { flex-shrink: 0; padding: 0.25rem 0.75rem; border-radius: 200px; font-family: var(--ff-heading, "Inria Sans", sans-serif); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; color: var(--color-blanc, #fff); } .lg-form__badge--req { background: var(--color-rouge-lg, #e52a19); } .lg-form__badge--opt { background: var(--color-gris-300, #979797); } /* Mobile : badge « Requis / Facultatif » AU-DESSUS du texte (iso maquette), pas à côté. Grille : case à cocher à gauche (sur 2 lignes), badge en haut, texte en dessous. Placement explicite → indépendant de l'ordre DOM. */ @media (max-width: 767px) { .lg-form__optin { display: grid; grid-template-columns: auto 1fr; -moz-column-gap: 0.75rem; column-gap: 0.75rem; row-gap: 0.4rem; align-items: start; } .lg-form__optin input { grid-area: 1 / 1 / 3 / 2; align-self: center; } /* centré en Y sur badge+texte */ .lg-form__badge { grid-area: 1 / 2 / 2 / 3; justify-self: start; } .lg-form__optin-text { grid-area: 2 / 2 / 3 / 3; } } /* Submit + notes + légal */ .lg-form__submit { align-self: center; width: min(595px, 100%); margin-top: 1rem; padding: 0.875rem 2rem; background: var(--color-rouge-lg, #e52a19); border: 0; border-radius: 2000px; color: var(--color-blanc, #fff); font-family: var(--ff-heading, "Inria Sans", sans-serif); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; cursor: pointer; transition: filter 0.15s ease; } .lg-form__submit:hover:not(:disabled) { filter: brightness(0.94); } .lg-form__submit:disabled { background: var(--color-gris-300, #979797); color: var(--color-gris-200, #d9d9d9); cursor: not-allowed; } .lg-form__submit-note { margin: 0; text-align: center; font-size: 1rem; text-transform: uppercase; color: var(--color-noir-primary, #141414); } .lg-form__legal { margin: 0; text-align: center; font-size: 0.875rem; line-height: 1.4; color: var(--color-noir-primary, #141414); } .lg-form__form-error { margin: 0; text-align: center; font-weight: 700; color: var(--color-rouge-lg, #e52a19); } .lg-form__form-error[hidden] { display: none; } /* ========================================================= Erreurs serveur → champ (rouge + ligne sous le champ) ========================================================= */ .lg-form__field-error { display: block; margin-top: 0.25rem; font-family: var(--ff-body, "Inria Sans", sans-serif); font-size: 0.8125rem; color: var(--color-rouge-lg, #e52a19); } .lg-form__field-error:empty { display: none; } .lg-form__field.has-error .lg-form__input, .lg-form__field.has-error .lg-form__textarea, .lg-form__field.has-error .lg-form__select { border-color: var(--color-rouge-lg, #e52a19); } .lg-form__optin.has-error .lg-form__optin-text { color: var(--color-rouge-lg, #e52a19); } /* ========================================================= Socle pop-up mutualisé (redirect / leave / confirm) ========================================================= */ .lg-form__popup { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .lg-form__popup[hidden] { display: none; } .lg-form__popup.is-open { opacity: 1; visibility: visible; } .lg-form__popup-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); } .lg-form__popup-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.75rem; width: 100%; padding: 3.5rem 4.5rem; background: var(--color-blanc, #fff); border-radius: 40px; text-align: center; } .lg-form__popup--sm .lg-form__popup-card { max-width: 815px; } .lg-form__popup--lg .lg-form__popup-card { max-width: 1100px; } .lg-form__popup-close { position: absolute; top: 1.5rem; right: 1.5rem; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--color-gris-100, #e8e8e8); border: 0; border-radius: 999px; color: var(--color-noir-primary, #141414); cursor: pointer; } .lg-form__popup-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; color: var(--color-rouge-lg, #e52a19); } /* Logo de redirection (self-contained : boîte + glyphe + ombre dans le SVG). */ .lg-form__popup-icon--redirect { width: auto; height: auto; } .lg-form__popup-icon--redirect img { display: block; width: 84px; height: 84px; } .lg-form__popup-title { margin: 0; font-family: var(--ff-heading, "Inria Sans", sans-serif); font-weight: 700; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.375rem); text-transform: uppercase; color: var(--color-noir-primary, #141414); } .lg-form__popup-text { margin: 0; max-width: 36rem; font-family: var(--ff-body, "Inria Sans", sans-serif); font-size: 1.25rem; line-height: 1.4; text-transform: uppercase; color: var(--color-noir-primary, #141414); } .lg-form__popup-text strong { font-weight: 700; } /* phrases en gras (confirmation) */ .lg-form__popup-countdown { margin: 0; font-size: 0.9375rem; color: var(--color-gris-600, #666); } .lg-form__popup-countdown:empty { display: none; } /* Boutons mutualisés (popups) */ .lg-form__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.875rem 1.875rem; border: 0; border-radius: 2000px; font-family: var(--ff-heading, "Inria Sans", sans-serif); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: filter 0.15s ease; } .lg-form__btn--red { background: var(--color-rouge-lg, #e52a19); color: var(--color-blanc, #fff); } .lg-form__btn--dark { background: var(--color-noir-primary, #141414); color: var(--color-blanc, #fff); } .lg-form__btn:hover { filter: brightness(0.94); } /* CTA de la popup de redirection : casse normale + flèche cerclée à droite (arrow-cta-form.svg, cercle blanc + flèche noire), conforme maquette (node 3907:7782). */ .lg-form__btn[data-lg-redirect-go] { text-transform: none; gap: 1.25rem; padding: 0.75rem 0.75rem 0.75rem 1.875rem; } .lg-form__btn[data-lg-redirect-go] .lg-form__btn-arrow { flex-shrink: 0; width: 1.8125rem; height: 1.8125rem; } .lg-form__btn-row { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; width: 100%; } /* Confirmation */ .lg-form__popup-card--confirm { gap: 1.5rem; padding: 3rem 4rem; } /* Check de confirmation : SVG dédié (form-check-confirmation.svg) qui contient déjà le double cercle rosé + la coche rouge → pas de cercle CSS. */ .lg-form__confirm-check { display: inline-flex; line-height: 0; } .lg-form__confirm-check img { width: 120px; height: 120px; } .lg-form__confirm-email { margin: 0; font-size: 1.125rem; color: var(--color-noir-primary, #141414); } .lg-form__confirm-email strong { color: var(--color-rouge-lg, #e52a19); } /* ========================================================= Tablette (≥768px) ========================================================= */ @media (min-width: 768px) { .lg-form__header { padding: 2rem 4rem; } .lg-form__body { padding: 3.5rem 2rem 5rem; } .lg-form__grid--projets { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } .lg-form__grid--marques, .lg-form__grid--concessions { grid-template-columns: repeat(3, 1fr); } .lg-form__grid--marques { gap: 1.75rem; } .lg-form__row--4 { grid-template-columns: repeat(2, 1fr); } .lg-form__row--3 { grid-template-columns: repeat(2, 1fr); } } /* ========================================================= Desktop (≥1024px) ========================================================= */ @media (min-width: 1024px) { .lg-form__grid--marques, .lg-form__grid--concessions { grid-template-columns: repeat(4, 1fr); } .lg-form__row--4 { grid-template-columns: repeat(4, 1fr); } .lg-form__row--3 { grid-template-columns: repeat(3, 1fr); } } /* ========================================================= Mobile (<768px) ========================================================= */ @media (max-width: 767px) { .lg-form__header { padding: 1rem 1.25rem; } .lg-form__logo { font-size: 1.25rem; } .lg-form__close-label { font-size: 0.9375rem; } .lg-form__body { padding: 1.5rem 1rem 3rem; } .lg-form__stepper-top { gap: 0.5rem; } /* Chaque élément (Revenir / Étape) : 50% max de l'espace → le texte wrappe au lieu de forcer une largeur min qui déborde la page. */ .lg-form__stepper-top > * { flex: 1 1 0; max-width: 50%; min-width: 0; } .lg-form__back, .lg-form__step-indicator { font-size: 0.8125rem; } .lg-form__back { gap: 0.375rem; text-align: left; } /* Recap mobile (iso maquette) : 3 COLONNES horizontales, icône AU-DESSUS du label, points conservés entre les colonnes, dans le bandeau arrondi. */ .lg-form__recap { flex-wrap: nowrap; align-items: flex-start; /* top-align → icônes sur la même ligne (iso maquette) */ gap: 0.375rem; padding: 0.875rem 0.625rem; border-radius: 24px; width: 100%; max-width: none; } .lg-form__recap-item { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; /* icône → label */ font-size: 0.875rem; } /* Icônes normalisées EN HAUTEUR (28px), largeur auto (aspect conservé, pas d'écrasement) → tous les labels démarrent à la même ligne. */ .lg-form__recap-icon, .lg-form__recap-logo { width: auto; height: 28px; max-width: 100%; } /* Points alignés sur la 1re ligne de texte, entre les colonnes. */ .lg-form__recap-dot { flex-shrink: 0; align-self: flex-start; margin-top: 2rem; } .lg-form__recap-label { overflow-wrap: anywhere; } /* longs noms : jamais de débordement */ .lg-form__panel { padding: 1.5rem 1.25rem; border-radius: 16px; } .lg-form__panel-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .lg-form__title--left { margin-bottom: 0; } .lg-form__submit { width: 100%; font-size: 1.25rem; } .lg-form__btn-row { flex-direction: column; } .lg-form__btn { width: 100%; } .lg-form__popup-card { padding: 2.5rem 1.5rem; border-radius: 24px; gap: 1.25rem; } .lg-form__popup-text { font-size: 1.0625rem; } } @media (prefers-reduced-motion: reduce) { .lg-form, .lg-form__step, .lg-form__card, .lg-form__popup { transition: none; animation: none; } } .lg-error { display: flex; align-items: center; justify-content: center; min-height: 70vh; background-color: var(--color-surface-alt); /* #F5F5F5 ≈ maquette #F4F4F4 */ /* Mobile : le header est position:fixed sans offset body (header.css) → on dégage le haut pour que la carte ne passe pas dessous. */ padding: calc(72px + var(--space-6)) var(--space-5) var(--space-10); } @media (min-width: 1024px) { .lg-error { /* Desktop : body a déjà padding-top:76px (header.css) → offset géré. */ padding-block: var(--space-10); } } .lg-error__card { display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); /* 24 → 40px */ width: 100%; max-width: 798px; padding: clamp(2rem, 1rem + 3vw, 3.75rem) clamp(1.5rem, 0.5rem + 4vw, 4.5rem); text-align: center; background: var(--color-blanc); border: 1px solid #D9D9D9; /* Palette de Soutien / Gris Medium (maquette) */ border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .lg-error__heading { display: flex; flex-direction: column; align-items: center; gap: clamp(0.75rem, 0.5rem + 0.6vw, 1.125rem); /* 12 → 18px */ } .lg-error__code { font-family: var(--ff-heading); font-weight: var(--fw-bold); font-size: clamp(1.75rem, 1rem + 2.4vw, 2.375rem); /* 28 → 38px */ line-height: 1.05; text-transform: uppercase; color: var(--color-rouge-lg); } .lg-error__subtitle { font-family: var(--ff-heading); font-weight: var(--fw-bold); font-size: clamp(1.125rem, 0.85rem + 0.9vw, 1.5rem); /* 18 → 24px */ line-height: 1.3; text-transform: uppercase; color: var(--color-noir-primary); } .lg-error__text { max-width: 46ch; font-family: var(--ff-body); font-weight: var(--fw-regular); font-size: clamp(1rem, 0.8rem + 0.7vw, 1.5rem); /* 16 → 24px */ line-height: 1.42; color: var(--color-noir-primary); } .lg-error__text strong { font-weight: var(--fw-bold); } /* CTA : réutilise .btn.btn--dark, agrandi pour le contexte pleine page. */ .lg-error__cta { max-width: 100%; padding: clamp(0.625rem, 0.5rem + 0.5vw, 0.75rem) clamp(1.5rem, 1rem + 2vw, 1.875rem); font-size: clamp(0.9375rem, 0.7rem + 0.9vw, 1.5rem); /* 15 → 24px */ line-height: 1.3; } /* ============================================ WRAPPER PRINCIPAL ============================================ */ .site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; transition: box-shadow var(--transition-base); } /* Fond + flou sur un pseudo-élément : évite le containing-block trap que `backdrop-filter` créerait pour les descendants position:fixed (sinon le menu mobile s'ancre au header au lieu du viewport). */ .site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: background var(--transition-base), backdrop-filter var(--transition-base); } /* ── Header transparent (maquette 1) — avant scroll ── */ .header-transparent .site-header { box-shadow: none; } .header-transparent .site-header::before { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Trait blanc en bas — fondu sur les côtés */ .header-transparent .site-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.8) 15%, rgba(255, 255, 255, 0.8) 85%, transparent 100% ); transition: opacity var(--transition-base); } /* Masquer le trait au scroll */ .header-transparent .site-header.is-scrolled::after { opacity: 0; } /* ── Retour au mode coloré au scroll ── */ .header-transparent .site-header.is-scrolled::before { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); padding-block: 14px; min-height: 88px; } /* ============================================ LOGO ============================================ */ .site-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; height: 1.4rem; } .site-header__logo-img { max-height: 100%; width: auto; } @media (max-width: 1023px) { .site-header__logo-img { width: 8.45569rem; } } .site-header__logo-text { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--ff-heading); font-size: 22px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; } .site-header__logo-lg { color: var(--color-rouge-lg); } .site-header__logo-groupe { color: var(--color-white); transition: color var(--transition-base); } /* Pages transparentes avant scroll : GROUPE en foncé */ .header-transparent .site-header:not(.is-scrolled) .site-header__logo-groupe { color: var(--color-noir-primary); } /* ============================================ NAVIGATION DESKTOP — conteneur pill ============================================ */ .site-header__nav { position: relative; display: none; align-items: center; gap: 4px; border-radius: var(--radius-full); padding: 4px; background: rgba(199, 199, 199, 0.40); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* Gradient border blanc — visible haut/bas, fondu sur les côtés */ .site-header__nav::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.5) 80%, transparent 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .site-header__nav-link { display: inline-block; padding: 8px 18px; font-family: var(--ff-body); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--color-noir-primary); text-decoration: none; border-radius: var(--radius-full); transition: background var(--transition-fast), color var(--transition-fast); white-space: nowrap; } .site-header__nav-link:hover { background: rgba(20, 20, 20, 0.08); text-decoration: none; } .site-header__nav-link--active { background: var(--color-noir-primary); color: var(--color-white); } .site-header__nav-link--active:hover { background: var(--color-noir-primary); color: var(--color-white); } /* ============================================ CTAs DESKTOP ============================================ */ .site-header__ctas { display: none; align-items: center; gap: var(--space-2); flex-shrink: 0; } .site-header__cta { display: flex; padding: 0.375rem 0.75rem; justify-content: center; align-items: center; gap: 0.5rem; /* display: inline-flex; */ /* align-items: center; */ /* gap: var(--space-2); */ /* padding: 10px 20px; */ font-family: var(--ff-body); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); border-radius: var(--radius-full); text-decoration: none; white-space: nowrap; /* transition: background var(--transition-base), box-shadow var(--transition-base); */ } .site-header__cta--rdv { background: var(--color-rouge-lg); color: var(--color-white); } /* .site-header__cta--rdv:hover { background: var(--gradient-rouge); box-shadow: var(--glow-accent); text-decoration: none; color: var(--color-white); } */ .site-header__cta--contact { background: var(--color-white); color: var(--color-noir-primary); } .site-header__cta--contact:hover { background: #2a2a2a; text-decoration: none; color: var(--color-white); } .site-header__cta-icon { /* display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; */ background-color: var(--color-white); border-radius: 100%; display: flex; width: 1.125rem; height: 1.125rem; /* padding: 0.8125rem; */ justify-content: center; align-items: center; gap: 0.625rem; aspect-ratio: 1/1; } .site-header__cta-icon svg { stroke-width: 1px; stroke: var(--color-noir-primary); width: 0.375rem; height: 0.375rem; flex-shrink: 0; aspect-ratio: 1/1; } /* ============================================ BURGER MOBILE ============================================ */ .site-header__burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; /* width: 40px; */ /* height: 40px; */ padding: 8px; background: none; border: none; cursor: pointer; flex-shrink: 0; } .site-header__burger img { width: 3.6rem; max-height: 1.5rem; } /* ============================================ MENU MOBILE / TABLETTE — overlay plein écran Maquette : fond gris #979797 + texture vague, logo & nav en blanc, CTAs, réseaux sociaux colorés. ============================================ */ .site-header__mobile-menu { display: flex; flex-direction: column; gap: 40px; position: fixed; inset: 0; background-color: var(--color-gris-300); background-image: url('../../images/bg-wave-menu-mobile.png'); background-position: center top; background-size: cover; background-repeat: no-repeat; z-index: 200; overflow-y: auto; padding: 24px 24px 36px; transform: translateX(100%); transition: transform var(--transition-base); } .site-header__mobile-menu[aria-hidden="false"] { transform: translateX(0); } .site-header__mobile-header { display: flex; align-items: center; justify-content: space-between; } .site-header__mobile-close { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--color-blanc); border: none; border-radius: var(--radius-full); cursor: pointer; color: var(--color-noir-primary); flex-shrink: 0; transition: background var(--transition-fast); } .site-header__mobile-close:hover { background: var(--color-gris-100); } /* Logo dans le menu : « GROUPE » toujours en blanc sur le fond gris, y compris sur les pages à header transparent non scrollées. */ .site-header__mobile-menu .site-header__logo-groupe, .header-transparent .site-header:not(.is-scrolled) .site-header__mobile-menu .site-header__logo-groupe { color: var(--color-blanc); } /* Bloc central : navigation + CTAs (gap 60px dans la maquette) */ .site-header__mobile-main { display: flex; flex-direction: column; gap: 60px; } /* Navigation — liste verticale, séparateurs entre les items */ .site-header__mobile-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .site-header__mobile-item:not(:last-child) { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .site-header__mobile-link { display: block; font-family: var(--ff-heading); font-size: 26px; line-height: 32px; font-weight: var(--fw-bold); color: var(--color-blanc); text-decoration: none; transition: color var(--transition-fast); } .site-header__mobile-link:hover, .site-header__mobile-link--active { color: var(--color-rouge-lg); } /* CTAs — pleine largeur, empilés sur mobile */ .site-header__mobile-ctas { display: flex; flex-direction: column; gap: 24px; } .site-header__mobile-ctas .site-header__cta { width: 100%; font-size: 18px; line-height: 27px; } .site-header__mobile-ctas .site-header__cta--rdv { justify-content: space-between; padding: 12px 16px 12px 80px; } .site-header__mobile-ctas .site-header__cta--contact { justify-content: center; padding: 12px; background: var(--color-blanc); color: var(--color-noir-primary); border: none; } .site-header__mobile-ctas .site-header__cta--contact:hover { background: var(--color-gris-100); } /* Icône flèche : cercle blanc CSS + flèche (échelle du bouton mobile) */ .site-header__mobile-ctas .site-header__cta-icon { width: 1.5rem; height: 1.5rem; } .site-header__mobile-ctas .site-header__cta-icon svg { width: 0.5rem; height: 0.5rem; } /* Section réseaux sociaux */ .site-header__mobile-social { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.4); } .site-header__mobile-social-title { text-align: center; font-family: var(--ff-heading); font-size: 24px; line-height: 31px; font-weight: var(--fw-bold); color: var(--color-blanc); margin: 0; } .site-header__mobile-social-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; max-width: 260px; /* 3 × 60 + 2 × 40 → 3 icônes par ligne sur mobile */ margin-inline: auto; } .site-header__mobile-social-link { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--color-gris-50); border-radius: var(--radius-full); flex-shrink: 0; transition: transform var(--transition-fast); } .site-header__mobile-social-link:hover { transform: scale(1.06); } .site-header__mobile-social-link img { width: 30px; height: 30px; -o-object-fit: contain; object-fit: contain; } /* ── Tablette (768px → 1023px) ── CTAs côte à côte, réseaux sociaux sur une seule ligne, plus grands. */ @media (min-width: 768px) and (max-width: 1023px) { .site-header__mobile-menu { background-image: url('../../images/bg-wave-menu-tablette.png'); } .site-header__mobile-ctas { flex-direction: row; } .site-header__mobile-ctas .site-header__cta { flex: 1 1 0; min-width: 0; font-size: 24px; line-height: 31px; } .site-header__mobile-ctas .site-header__cta--rdv { padding-left: 70px; } .site-header__mobile-social-icons { max-width: none; } .site-header__mobile-social-link { width: 80px; height: 80px; } .site-header__mobile-social-link img { width: 40px; height: 40px; } } /* ============================================ DESKTOP (≥ 1024px) ============================================ */ @media (min-width: 1024px) { .site-header__nav { display: flex; } .site-header__ctas { display: flex; } .site-header__burger { display: none; } .site-header__mobile-menu { display: none; } } /* ============================================ BODY OFFSET — compense le header fixed ============================================ */ @media (min-width: 1024px) { body:not(.header-transparent) { padding-top: 76px; } } /* ============================================ WRAPPER PRINCIPAL ============================================ */ .site-footer { background: var(--color-white); border-top: 1px solid var(--color-border); } .site-footer__inner { max-width: var(--container-max); margin-inline: auto; padding: var(--space-10) var(--space-8); display: flex; flex-direction: column; gap: var(--space-8); } /* ============================================ HEADER : logo + tagline + social (visible mobile/tablette, masqué desktop) ============================================ */ .site-footer__header { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); } .site-footer__header-brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } /* ============================================ LOGO + TAGLINE (partagés header & brand col) ============================================ */ .site-footer__brand-logo { display: inline-flex; align-items: center; text-decoration: none; } .site-footer__brand-logo img { height: 28px; width: auto; } .site-footer__tagline { font-family: var(--ff-heading); font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--color-noir-primary); margin: 0; } /* ============================================ RESEAUX SOCIAUX ============================================ */ .site-footer__social { display: flex; align-items: center; gap: var(--space-6); } .site-footer__social-link { display: inline-flex; align-items: center; justify-content: center; color: var(--color-noir-primary); transition: color var(--transition-fast); } .site-footer__social-link:hover { color: var(--color-grey-600); } .site-footer__social-link svg { width: 24px; height: 24px; } /* ============================================ SECTIONS NAVIGATION (accordions mobile) ============================================ */ .site-footer__cols { display: flex; flex-direction: column; } .site-footer__section { border-bottom: 1px solid var(--color-border); } .site-footer__section:first-child { border-top: 1px solid var(--color-border); } .site-footer__section-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-block: var(--space-5); cursor: pointer; list-style: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } /* Supprime le marker natif
*/ .site-footer__section-toggle::-webkit-details-marker, .site-footer__section-toggle::marker { display: none; content: ''; } .site-footer__section-title { font-family: var(--ff-heading); font-size: 26px; font-weight: var(--fw-bold); line-height: 32px; color: var(--color-noir-primary); text-transform: uppercase; } /* Icone + / × */ .site-footer__section-icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; } .site-footer__section-icon::before, .site-footer__section-icon::after { content: ''; position: absolute; background: var(--color-noir-primary); transition: transform var(--transition-fast); } /* Barre horizontale */ .site-footer__section-icon::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); } /* Barre verticale */ .site-footer__section-icon::after { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); } /* Rotation quand ouvert : + → – */ .site-footer__section[open] .site-footer__section-icon::after { transform: translateX(-50%) rotate(90deg); } /* Liste de liens dans l'accordion */ .site-footer__links { list-style: none; margin: 0; padding: 0 0 var(--space-5) 0; display: flex; flex-direction: column; gap: var(--space-2); } .site-footer__link { font-family: var(--ff-body); font-size: var(--fs-body); line-height: 1.5; color: var(--color-noir-primary); text-decoration: none; transition: color var(--transition-fast); } .site-footer__link:hover { color: var(--color-grey-600); text-decoration: none; } /* ============================================ BRAND COLUMN (desktop uniquement) ============================================ */ .site-footer__brand { display: none; } /* ============================================ INFO ROW (mobile/tablette) ============================================ */ .site-footer__info { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); } .site-footer__address { font-family: var(--ff-body); font-size: 18px; font-style: normal; line-height: 1.5; color: var(--color-noir-primary); margin: 0; } /* Mobile/tablette : l'adresse coule sur une seule ligne, le
est neutralisé (devient un espace via l'espace présent dans le markup). Le saut de ligne est rétabli en desktop. */ .site-footer__address br { display: none; } .site-footer__badges { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-5); /* Ne pas laisser le space-between de la rangée écraser les badges : sinon le pill se compresse (chevron à 0, padding asymétrique) et le logo FIDCAR rétrécit. L'adresse absorbe la place restante en passant à la ligne. */ flex-shrink: 0; } /* Language switcher (pill + dropdown) */ .lang-switcher { position: relative; } .lang-switcher__toggle { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--color-white); border: 1px solid var(--color-grey-200); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); font-family: var(--ff-body); font-size: 14px; color: var(--color-noir-primary); cursor: pointer; transition: border-color var(--transition-fast); } .lang-switcher__toggle:hover { border-color: var(--color-grey-400); } .lang-switcher__flag { width: 18px; height: 18px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; } .lang-switcher__code { font-weight: var(--fw-regular); } .lang-switcher__chevron { width: 16px; height: 16px; color: var(--color-noir-primary); transition: transform var(--transition-fast); } /* Rotation chevron quand ouvert */ .lang-switcher[data-open] .lang-switcher__chevron { transform: rotate(180deg); } /* Dropdown */ .lang-switcher__dropdown { display: none; position: absolute; bottom: calc(100% + var(--space-2)); left: 0; list-style: none; margin: 0; padding: var(--space-1) 0; background: var(--color-white); border: 1px solid var(--color-grey-200); border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); min-width: 100%; z-index: var(--z-dropdown); } .lang-switcher[data-open] .lang-switcher__dropdown { display: block; } .lang-switcher__option { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-4); font-family: var(--ff-body); font-size: 14px; color: var(--color-noir-primary); text-decoration: none; transition: background var(--transition-fast); } .lang-switcher__option:hover { background: var(--color-surface-alt); text-decoration: none; } /* FIDCAR badge */ .site-footer__fidcar img { width: 88px; height: auto; } /* ============================================ BARRE LEGALE ============================================ */ .site-footer__legal { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding-top: var(--space-8); border-top: 1px solid var(--color-border); } /* Flux de texte inline : les libellés se coupent naturellement et les séparateurs « | » restent dans le flux (comme la maquette mobile), au lieu de wrapper en blocs atomiques qui orphelinent les « | ». */ .site-footer__legal-links { list-style: none; margin: 0; padding: 0; text-align: center; } .site-footer__legal-links li { display: inline; } .site-footer__legal-links li + li::before { content: '|'; color: var(--color-text-subtle); margin-inline: var(--space-2); } .site-footer__legal-link { font-family: var(--ff-heading); font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--color-text-subtle); text-decoration: none; transition: color var(--transition-fast); } .site-footer__legal-link:hover { color: var(--color-noir-primary); text-decoration: none; } .site-footer__copyright { font-family: var(--ff-heading); font-size: 14px; font-weight: var(--fw-bold); color: var(--color-text-subtle); margin: 0; text-align: center; } /* ============================================ TABLETTE — min-width: 768px ============================================ */ @media (min-width: 768px) { .site-footer__inner { padding: var(--space-10) var(--space-8); } /* Header passe en row : brand à gauche, social à droite */ .site-footer__header { flex-direction: row; align-items: flex-start; justify-content: space-between; padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-border); } /* Masquer la border-top de la première section (la ligne vient du header) */ .site-footer__section:first-child { border-top: none; } .site-footer__header-brand { align-items: flex-start; } /* Icônes sociales tablette */ .site-footer__social-link svg { width: 32px; height: 32px; } /* Badges en row sur tablette */ .site-footer__info .site-footer__badges { flex-direction: row; align-items: center; gap: var(--space-5); } } /* ============================================ DESKTOP — min-width: 1024px ============================================ */ @media (min-width: 1024px) { .site-footer__inner { padding: var(--space-10) var(--space-12); gap: var(--space-8); } /* Masquer le header mobile/tablette */ .site-footer__header { display: none; border-bottom: none; } /* Masquer l'info row mobile */ .site-footer__info { display: none; } /* Grille 4 colonnes */ .site-footer__cols { flex-direction: row; gap: var(--space-6); } /* Chaque section prend 1fr */ .site-footer__section { flex: 1; border-top: none; border-bottom: none; } /* Forcer les details ouverts en desktop */ .site-footer__section[open] > .site-footer__links, .site-footer__section > .site-footer__links { display: flex; } /* Masquer le toggle icon */ .site-footer__section-icon { display: none; } /* Redesign du summary en titre simple */ .site-footer__section-toggle { cursor: default; padding-top: 0; padding-bottom: var(--space-2); pointer-events: none; } .site-footer__section-title { font-size: 18px; line-height: 27px; text-transform: uppercase; } /* Liens : style desktop */ .site-footer__links { padding: 0; gap: var(--space-1); } .site-footer__link { font-size: var(--fs-body); line-height: 24px; } /* Colonne brand visible en desktop */ .site-footer__brand { display: flex; flex-direction: column; gap: var(--space-5); flex: 1; min-width: 240px; } .site-footer__brand .site-footer__brand-logo img { height: 24px; } .site-footer__brand .site-footer__tagline { font-size: 18px; line-height: 27px; } .site-footer__brand .site-footer__social { gap: var(--space-4); } .site-footer__brand .site-footer__social-link svg { width: 24px; height: 24px; } .site-footer__brand .site-footer__address { font-size: 14px; line-height: 1.5; } /* Desktop : on rétablit le saut de ligne de l'adresse */ .site-footer__address br { display: inline; } .site-footer__brand .site-footer__badges { flex-direction: row; align-items: center; gap: var(--space-5); } .site-footer__brand .site-footer__fidcar img { width: 102px; } /* Legal bar : row, copyright gauche, liens droite */ .site-footer__legal { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); } .site-footer__copyright { order: -1; text-align: left; } } .visible{ visibility: visible; } .invisible{ visibility: hidden; } .static{ position: static; } .absolute{ position: absolute; } .relative{ position: relative; } .sticky{ position: sticky; } .mx-auto{ margin-left: auto; margin-right: auto; } .mb-2{ margin-bottom: 8px; } .mb-4{ margin-bottom: 16px; } .mb-6{ margin-bottom: 32px; } .mb-8{ margin-bottom: 48px; } .mt-4{ margin-top: 16px; } .block{ display: block; } .inline-block{ display: inline-block; } .inline{ display: inline; } .flex{ display: flex; } .table{ display: table; } .grid{ display: grid; } .hidden{ display: none; } .h-\[200px\]{ height: 200px; } .max-w-\[400px\]{ max-width: 400px; } .max-w-container{ max-width: var(--container-max); } .transform{ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes fadeIn{ 0%{ opacity: 0; } 100%{ opacity: 1; } } .animate-fade-in{ animation: fadeIn 0.5s ease-out; } .resize{ resize: both; } .grid-cols-1{ grid-template-columns: repeat(1, minmax(0, 1fr)); } .flex-wrap{ flex-wrap: wrap; } .items-start{ align-items: flex-start; } .gap-4{ gap: 16px; } .gap-5{ gap: 24px; } .truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rounded-full{ border-radius: 9999px; } .rounded-lg{ border-radius: 16px; } .rounded-md{ border-radius: 12px; } .rounded-sm{ border-radius: 8px; } .rounded-soft{ border-radius: 30px; } .rounded-xl{ border-radius: 24px; } .border{ border-width: 1px; } .border-grey-200{ --tw-border-opacity: 1; border-color: rgb(217 217 217 / var(--tw-border-opacity, 1)); } .bg-grey-200{ --tw-bg-opacity: 1; background-color: rgb(217 217 217 / var(--tw-bg-opacity, 1)); } .bg-mobe{ --tw-bg-opacity: 1; background-color: rgb(36 229 234 / var(--tw-bg-opacity, 1)); } .bg-noir-primary{ --tw-bg-opacity: 1; background-color: rgb(20 20 20 / var(--tw-bg-opacity, 1)); } .bg-rent{ --tw-bg-opacity: 1; background-color: rgb(60 104 176 / var(--tw-bg-opacity, 1)); } .bg-rouge-lg{ --tw-bg-opacity: 1; background-color: rgb(229 42 25 / var(--tw-bg-opacity, 1)); } .bg-surface-alt{ --tw-bg-opacity: 1; background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1)); } .bg-trucks{ --tw-bg-opacity: 1; background-color: rgb(239 170 28 / var(--tw-bg-opacity, 1)); } .bg-white{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .bg-gradient-noir{ background-image: linear-gradient(272.29deg, #141414 1.95%, #525252 98.1%); } .bg-gradient-rouge{ background-image: linear-gradient(270deg, #E52A19 0%, #BF1E10 100%); } .object-cover{ -o-object-fit: cover; object-fit: cover; } .p-2{ padding: 8px; } .p-4{ padding: 16px; } .p-5{ padding: 24px; } .p-6{ padding: 32px; } .px-4{ padding-left: 16px; padding-right: 16px; } .px-5{ padding-left: 24px; padding-right: 24px; } .py-10{ padding-top: 64px; padding-bottom: 64px; } .py-2{ padding-top: 8px; padding-bottom: 8px; } .font-heading{ font-family: 'Inria Sans', system-ui, sans-serif; } .text-body{ font-size: 16px; line-height: 1.6; } .text-body-lg{ font-size: 18px; line-height: 1.6; } .text-body-sm{ font-size: 14px; line-height: 1.5; } .text-caption{ font-size: 12px; line-height: 1.4; } .text-h1{ font-size: 32px; line-height: 1.15; font-weight: 700; } .text-h2{ font-size: 24px; line-height: 1.2; font-weight: 700; } .text-h3{ font-size: 20px; line-height: 1.25; font-weight: 700; } .uppercase{ text-transform: uppercase; } .capitalize{ text-transform: capitalize; } .text-grey-600{ --tw-text-opacity: 1; color: rgb(107 107 107 / var(--tw-text-opacity, 1)); } .text-grey-800{ --tw-text-opacity: 1; color: rgb(82 82 82 / var(--tw-text-opacity, 1)); } .text-noir-primary{ --tw-text-opacity: 1; color: rgb(20 20 20 / var(--tw-text-opacity, 1)); } .text-white{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .underline{ text-decoration-line: underline; } .shadow-card{ --tw-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-card-hover{ --tw-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-modal{ --tw-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); --tw-shadow-colored: 0 16px 48px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-sm{ --tw-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .outline{ outline-style: solid; } .blur{ --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .drop-shadow{ --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .filter{ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .backdrop-filter{ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================ SCREEN READER ONLY Masque visuellement, reste accessible aux lecteurs d'écran. ============================================ */ .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip link — visible au focus clavier */ .u-sr-only--focusable:focus { position: fixed; top: var(--space-2); left: var(--space-2); z-index: var(--z-toast); width: auto; height: auto; padding: var(--space-2) var(--space-4); margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--color-noir-primary); color: var(--color-blanc); border-radius: var(--radius-sm); font-size: var(--fs-body); } /* ============================================ TEXTE ============================================ */ .u-text-accent { color: var(--color-accent); } /* ============================================ CONTAINER ============================================ */ /* ============================================ WAVES — cap à la largeur max du site Les waves décoratives (SVG/PNG) sont positionnées en `width: Xvw` et centrées sur le viewport via `left: 50%; transform: translateX(-50%)`. Sans contrainte, elles débordent sur écran > 1440px. On les cap au container max ; le centrage reste aligné avec `.l-container` (centré viewport aussi). ============================================ */ [class*="__wave"], [class*="__bg-wave"] { max-width: var(--container-max); margin-inline: auto; } @media (min-width: 768px){ .md\:block{ display: block; } .md\:hidden{ display: none; } .md\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px){ .lg\:block{ display: block; } .lg\:hidden{ display: none; } .lg\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:text-body-lg-desktop{ font-size: 20px; line-height: 1.6; } .lg\:text-h1-desktop{ font-size: 48px; line-height: 1.15; font-weight: 700; } .lg\:text-h2-desktop{ font-size: 32px; line-height: 1.2; font-weight: 700; } .lg\:text-h3-desktop{ font-size: 24px; line-height: 1.25; font-weight: 700; } }