/* ================================================ TSC DIGITAL — Design System v2.0 Auteur : Tristan Santos Cabral — tscdigital.fr ================================================ */ /* Fonts chargées via dans le de chaque page HTML — pas d'@import ici : un @import CSS n'est découvert qu'après le téléchargement de style.css lui-même, ce qui retarde le fetch des fonts par rapport au déjà présent en . */ /* === RESET === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } section[id] { scroll-margin-top: 84px; } /* la nav fixe (72px) ne masque plus le haut des sections ciblées par ancre */ body { font-family: var(--font-body); background-color: var(--bg-primary); color: var(--white); line-height: 1.6; overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ul, ol { list-style: none; } input, select, textarea { font-family: inherit; } [hidden] { display: none !important; } /* === TYPOGRAPHIE — ANTI-ORPHELINS === */ /* text-wrap:balance équilibre les lignes des titres (élimine les orphelins h1/h2/h3) */ /* text-wrap:pretty évite les orphelins en fin de paragraphe — ignoré gracieusement par les navigateurs anciens */ h1, h2, h3 { text-wrap: balance; } p, li { text-wrap: pretty; } /* === CORPS DE TEXTE — JUSTIFICATION === */ /* Réservé aux pages légales (mesure large, ~700-800px) : la justification + les césures de mots (hyphens:auto) sur des colonnes de card étroites (300-450px) créent des espaces inégaux entre les mots et des coupures de mots en fin de ligne, illisibles. Retiré de toutes les cards/textes courts : left-align. */ .legal-page p, .legal-page li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } /* === VARIABLES === */ :root { --bg-primary: #0D0D14; --bg-secondary: #14141F; --bg-card: #3A3E58; --bg-card-hover: #454A68; --border: rgba(107, 79, 232, 0.45); --border-hover: rgba(107, 79, 232, 0.7); --violet: #6B4FE8; --blue: #3B82F6; --white: #F8F8FF; --muted: #ACACC2; --success: #10B981; --gradient-text: linear-gradient(135deg, #ffffff 0%, #6B4FE8 50%, #3B82F6 100%); --gradient-brand: linear-gradient(135deg, #6B4FE8, #3B82F6); --gradient-card-border: linear-gradient(135deg, rgba(107,79,232,0.5), rgba(59,130,246,0.5)); --glow-violet: 0 0 40px rgba(107, 79, 232, 0.4); --glow-blue: 0 0 40px rgba(59, 130, 246, 0.22); --glow-cta: 0 8px 32px rgba(107, 79, 232, 0.55); --font-display: 'Barlow Condensed', sans-serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; --section-padding: clamp(60px, 8vw, 120px) clamp(20px, 5vw, 80px); --max-width: 1200px; --radius-card: 12px; --radius-badge: 6px; --transition-fast: 0.15s ease; --transition-mid: 0.3s ease; --transition-slow: 0.6s ease; } /* === UTILITIES === */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 clamp(20px, 5vw, 80px); } .gradient-text { background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .badge { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--violet); background: rgba(107,79,232,0.1); border: 1px solid rgba(107,79,232,0.2); border-radius: var(--radius-badge); padding: 4px 10px; display: inline-block; } .badge-blue { color: var(--blue); background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.2); } .slash-line { width: 60px; height: 2px; background: var(--gradient-brand); border-radius: 2px; margin-bottom: 24px; } /* Texture fibre de carbone — matière signature des surfaces du site. Volontairement PAS un damier : le damier est un signal (l'arrivée, utilisé une seule fois en bas de page). En faire un fond de card lui ferait perdre ce sens, et son contraste élevé passerait devant le texte. La fibre de carbone est une matière, pas un signe : elle se lit de près, disparaît de loin, et ne concurrence jamais le contenu. */ .carbon-surface, .card { background: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(107,79,232,0.028) 12px, rgba(107,79,232,0.028) 24px), var(--bg-card); } .card { border: 1px solid var(--border); border-radius: var(--radius-card); transition: border-color var(--transition-mid), box-shadow var(--transition-mid), transform var(--transition-mid); } .card:hover { border-color: rgba(107,79,232,0.4); box-shadow: var(--glow-violet); transform: translateY(-4px); } /* NOTE : script.js retire l'attribut data-reveal après le reveal pour que ce transform hover ne soit pas écrasé */ .btn-primary { background: var(--gradient-brand); color: var(--white); font-family: var(--font-body); font-weight: 600; padding: 14px 28px; border-radius: 8px; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: box-shadow var(--transition-mid), transform var(--transition-fast); text-decoration: none; font-size: 15px; line-height: 1; position: relative; overflow: hidden; } /* Balayage lumineux au hover — clin d'œil "vitesse" discret */ .btn-primary::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent); transform: skewX(-20deg); transition: left 0.45s ease; pointer-events: none; } .btn-primary:hover::after { left: 120%; } .btn-primary:hover { box-shadow: var(--glow-cta); transform: translateY(-2px); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: transparent; color: var(--white); border: 1px solid var(--border-hover); padding: 14px 28px; border-radius: 8px; font-weight: 500; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: border-color var(--transition-mid), background var(--transition-mid); text-decoration: none; } .btn-secondary:hover { border-color: var(--violet); background: rgba(107,79,232,0.05); } /* Tertiaire — "Mon parcours". Était un simple lien texte (.hero-link) posé sous deux vrais boutons : on ne comprenait ni que c'était cliquable, ni pourquoi il était là. Il garde un poids visuel inférieur aux deux autres (pas de fond, bordure discrète) mais il a désormais une forme de bouton, donc une affordance. */ .btn-tertiary { background: transparent; color: var(--muted); border: 1px dashed rgba(255,255,255,0.16); padding: 14px 22px; border-radius: 8px; font-weight: 500; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; transition: border-color var(--transition-mid), color var(--transition-mid), background var(--transition-mid); } .btn-tertiary:hover { border-color: rgba(107,79,232,0.5); color: var(--white); background: rgba(107,79,232,0.04); } /* Icônes course auto dans les boutons — remplacent les flèches → ↓ génériques. currentColor : l'icône suit la couleur du bouton, y compris au hover. */ .btn-ico { width: 17px; height: 17px; flex-shrink: 0; color: currentColor; } .btn-primary .btn-ico { opacity: 0.95; } .nav-cta .btn-ico { width: 15px; height: 15px; } .btn-large { padding: 18px 36px; font-size: 17px; } .section-header { text-align: center; margin-bottom: clamp(40px, 6vw, 80px); } .section-header .slash-line { margin: 0 auto 24px; } .section-title { font-family: var(--font-display); font-size: clamp(32px, 5vw, 54px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; margin-bottom: 16px; } .section-subtitle { color: var(--muted); font-size: clamp(15px, 2vw, 18px); max-width: 600px; margin: 0 auto; line-height: 1.7; } /* === SCROLL REVEAL === */ /* Easing décéléré (type ease-out-quint) — arrivée douce, départ vif : plus "précision F1" que le ease symétrique */ [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } [data-reveal="left"] { transform: translateX(-30px); } [data-reveal="right"] { transform: translateX(30px); } [data-reveal].revealed { opacity: 1; transform: translate(0,0); } [data-reveal][data-delay="1"] { transition-delay: 0.1s; } [data-reveal][data-delay="2"] { transition-delay: 0.2s; } [data-reveal][data-delay="3"] { transition-delay: 0.3s; } [data-reveal][data-delay="4"] { transition-delay: 0.4s; } [data-reveal][data-delay="5"] { transition-delay: 0.5s; } [data-reveal][data-delay="6"] { transition-delay: 0.6s; } /* === CHORÉGRAPHIE D'ENTRÉE DE SECTION === Avant : chaque section faisait le même fondu-monté d'un bloc, donc aucun rythme et une impression de diaporama. Ici les éléments du header entrent en séquence (numéro, trait, titre, sous-titre) : le trait signature se TRACE au lieu d'apparaître, ce qui marque l'ouverture d'un chapitre. */ .section-num { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--violet); margin-bottom: 14px; } /* Le bloc ne se déplace plus lui-même : ses enfants portent le mouvement. */ .section-header[data-reveal] { opacity: 1; transform: none; } .section-header[data-reveal] > * { opacity: 0; transform: translateY(16px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .section-header.revealed > * { opacity: 1; transform: none; } .section-header.revealed .section-num { transition-delay: 0.02s; } .section-header.revealed .slash-line { transition-delay: 0.12s; } .section-header.revealed .section-title { transition-delay: 0.20s; } .section-header.revealed .section-subtitle { transition-delay: 0.32s; } /* Le trait signature se trace depuis le centre (margin auto) ou depuis la gauche (#about) */ .section-header .slash-line, .section-header-seq .slash-line { width: 0; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s, opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .section-header.revealed .slash-line, .section-header-seq.revealed .slash-line { width: 60px; } /* Cards de grille : légère mise à l'échelle en plus de la montée — elles "arrivent" au lieu de simplement glisser, ce qui différencie leur entrée de celle du header. */ .approche-grid [data-reveal], .use-cases-grid [data-reveal] { transform: translateY(28px) scale(0.985); } /* === NAVIGATION === */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background var(--transition-mid), border-color var(--transition-mid); border-bottom: 1px solid transparent; } .scroll-progress { position: absolute; bottom: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, #ffffff 0%, #6B4FE8 45%, #3B82F6 100%); border-radius: 0 1px 1px 0; pointer-events: none; will-change: width; } nav.scrolled { background: rgba(10,10,15,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom-color: var(--border); } .nav-container { max-width: 100%; padding: 0 clamp(24px, 4vw, 72px); height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 0; } .nav-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } .nav-logo-img { height: 75px; width: auto; display: block; object-fit: contain; } .nav-links { display: none; gap: 28px; align-items: center; } .nav-links a { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; position: relative; transition: background var(--transition-fast); } .nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 2px; background: var(--gradient-brand); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .nav-links a:hover, .nav-links a.active { background: var(--gradient-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } .nav-cta { display: none; } .nav-hamburger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; z-index: 200; } .nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: transform var(--transition-mid), opacity var(--transition-mid); } .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-mobile-menu { position: fixed; inset: 0; background: var(--bg-primary); z-index: 150; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; transform: translateX(100%); transition: transform var(--transition-mid); } .nav-mobile-menu.open { transform: translateX(0); } .nav-mobile-menu a { font-family: var(--font-display); font-size: clamp(28px, 8vw, 48px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--white); transition: color var(--transition-fast); } .nav-mobile-menu a:hover { color: var(--violet); } @media (min-width: 1024px) { .nav-links { display: flex; flex: 1; justify-content: space-evenly; padding: 0 clamp(16px, 2.5vw, 48px); gap: 0; } .nav-cta { display: flex; } .nav-hamburger { display: none; } } /* === HERO === */ #hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; } .hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; } .hero-glow { position: absolute; bottom: -10%; right: -5%; width: 60vw; height: 60vw; max-width: 800px; max-height: 800px; background: radial-gradient(circle, rgba(107,79,232,0.12) 0%, transparent 70%); border-radius: 50%; } .hero-glow-2 { position: absolute; top: 10%; left: -10%; width: 40vw; height: 40vw; max-width: 500px; background: radial-gradient(circle, rgba(59,130,246,0.06) 0%, transparent 70%); border-radius: 50%; } .hero-dots { position: absolute; bottom: 0; left: 0; width: 40%; height: 50%; background-image: radial-gradient(rgba(107,79,232,0.4) 1px, transparent 1px); background-size: 24px 24px; opacity: 0.12; mask-image: linear-gradient(to top right, rgba(0,0,0,1), rgba(0,0,0,0)); -webkit-mask-image: linear-gradient(to top right, rgba(0,0,0,1), rgba(0,0,0,0)); } /* Taille plafonnée pour que la plus longue tagline ("sans perdre vos soirées.") tienne sur une ligne sans être rognée — le slot est en white-space: nowrap pour éviter que la hauteur du h1 saute à chaque changement de tagline. */ .hero-title { font-family: var(--font-display); font-size: clamp(32px, 8vw, 50px); font-weight: 800; text-transform: uppercase; line-height: 1.05; letter-spacing: 0.01em; margin-bottom: 28px; animation: fadeInUp 0.8s ease 0.1s both; max-width: 900px; text-wrap: balance; } /* Deux rangées : l'action principale seule sur la première (donc large), les deux actions secondaires côte à côte sur la seconde. Avant, les trois boutons étaient sur une même ligne à largeurs libres : le CTA principal n'avait pas plus de poids visuel que les autres et le tout paraissait déséquilibré. */ .hero-ctas { display: flex; flex-direction: column; gap: 14px; align-items: stretch; animation: fadeInUp 0.8s ease 0.3s both; } .hero-cta-main { justify-content: center; padding: 17px 32px; font-size: 16px; } .hero-ctas-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .hero-ctas-row > * { justify-content: center; } /* Au-delà du mobile, la colonne de gauche est assez large pour qu'un CTA pleine largeur devienne disgracieux : on borne l'ensemble du bloc d'actions. */ @media (min-width: 560px) { .hero-ctas { max-width: 470px; } } /* .hero-link : plus référencé par aucune page du site depuis que « Mon parcours » est passé en .btn-tertiary. Conservé pour l'instant (règle courte, sans effet de bord) — à purger lors du prochain nettoyage de CSS mort. */ .hero-link { color: var(--muted); font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: color var(--transition-fast); } .hero-link:hover { color: var(--white); } /* Séparé plus nettement de la rangée de CTA au-dessus (24px au lieu de 16px) et allégé (500 au lieu de 700) : avant, ce disclaimer mono/gras collé à 16px sous "Mon parcours →" se lisait comme la suite du lien plutôt que comme une note à part sur le CTA principal. Le point violet reprend le repère visuel de "Réponse garantie" en section contact (.pulse-dot), même famille de micro-copy rassurante à deux endroits du site. */ .hero-cta-hint { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0.03em; margin-top: 24px; animation: fadeInUp 0.8s ease 0.4s both; } .hero-stats { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--border); animation: fadeInUp 0.8s ease 0.5s both; } .hero-stat { display: flex; flex-direction: column; gap: 4px; } .hero-stat-num { font-family: var(--font-display); font-size: 36px; font-weight: 700; } .hero-stat-label { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; } /* La mention sur la nature des chiffres du hero (estimations, pas des moyennes mesurées) a été déplacée dans mentions-legales.html — hors du hero, mais accessible et liée depuis l'attribut title des chiffres. */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* === APPROCHE === */ #approche { padding: var(--section-padding); background: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary) 12%, var(--bg-secondary) 88%, var(--bg-primary)); } .approche-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } .approche-card { padding: 36px; } .approche-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .approche-number { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: rgba(107,79,232,0.35); letter-spacing: 0; line-height: 1; } .approche-icon { width: 48px; height: 48px; background: rgba(107,79,232,0.1); border: 1px solid rgba(107,79,232,0.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .approche-icon svg { width: 22px; height: 22px; } .approche-card h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.03em; min-height: 2.5em; display: flex; align-items: flex-start; } .approche-card p { color: var(--muted); font-size: 15px; line-height: 1.8; orphans: 2; widows: 2; } /* === USE CASES === */ #use-cases { padding: var(--section-padding); } .use-cases-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } .use-case-card { padding: 36px; display: flex; flex-direction: column; } .use-case-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .use-case-tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 4px; display: inline-block; } .use-case-tag.violet { color: var(--violet); background: rgba(107,79,232,0.1); border: 1px solid rgba(107,79,232,0.2); } .use-case-tag.blue { color: var(--blue); background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2); } .use-case-problem { font-family: var(--font-display); font-size: clamp(18px, 2.5vw, 22px); font-weight: 700; color: var(--white); margin-bottom: 16px; line-height: 1.3; } .use-case-solution { color: var(--muted); font-size: 15px; line-height: 1.8; margin-bottom: 24px; flex: 1; } .use-case-divider { height: 1px; background: var(--border); margin-bottom: 20px; } .use-case-impact { font-family: var(--font-mono); font-size: 12px; color: var(--success); letter-spacing: 0.05em; } /* === SERVICES STRIP === Remplace l'ancienne section #projets (4 cards pleine taille, même structure problème/solution/impact que les cas clients juste au-dessus — répétition inutile). Bande compacte : icône + titre + une ligne, sans card, sans padding généreux. */ .services-strip { margin-top: clamp(32px, 5vw, 56px); } .services-strip-label { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.05em; margin-bottom: 20px; } .services-strip-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } .service-chip { display: flex; gap: 14px; align-items: flex-start; padding-top: 18px; border-top: 1px solid var(--border); } .service-chip-icon { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; } .service-chip h3 { font-family: var(--font-display); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 4px; } .service-chip p { color: var(--muted); font-size: 13.5px; line-height: 1.5; } @media (min-width: 640px) { .services-strip-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .services-strip-grid { grid-template-columns: repeat(4, 1fr); } .service-chip { flex-direction: column; gap: 10px; } } .section-closing { text-align: center; margin-top: 32px; font-size: 15px; color: var(--muted); } .section-closing a { color: var(--violet); font-weight: 600; white-space: nowrap; } .section-closing a:hover { text-decoration: underline; } /* === PRODUITS === */ #produits { padding: var(--section-padding); } .produits-container { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: stretch; } .goconform-card { position: relative; background: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(107,79,232,0.028) 12px, rgba(107,79,232,0.028) 24px), var(--bg-card); border-radius: var(--radius-card); padding: 44px; overflow: hidden; transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); border: 1px solid rgba(107,79,232,0.25); display: flex; flex-direction: column; } .goconform-card::before { display: none; } .goconform-card:hover { transform: translateY(-4px); border-color: rgba(107,79,232,0.55); box-shadow: var(--glow-violet); } .marie-produit-title { font-size: 1.5rem; font-weight: 700; color: var(--white); margin: 0 0 0.75rem; position: relative; z-index: 1; } .goconform-bg-pattern { position: absolute; top: 0; right: 0; width: 45%; height: 100%; background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(107,79,232,0.03) 12px, rgba(107,79,232,0.03) 24px); pointer-events: none; } .goconform-card-header { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; position: relative; z-index: 1; } .badge-coming-soon { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--white); background: rgba(107,79,232,0.75); border-radius: 20px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(107,79,232,0.5); } .badge-coming-soon::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--white); border-radius: 50%; animation: pulseAnim 2s infinite; } .goconform-name { font-family: var(--font-display); font-size: clamp(40px, 6vw, 60px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 8px; position: relative; z-index: 1; } .goconform-tagline { font-size: 16px; color: var(--muted); margin-bottom: 24px; position: relative; z-index: 1; line-height: 1.6; } .goconform-desc { color: var(--muted); font-size: 15px; line-height: 1.8; margin-bottom: 8px; position: relative; z-index: 1; } .goconform-quote { font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-style: italic; margin-bottom: 32px; position: relative; z-index: 1; } .goconform-card .btn-primary { position: relative; z-index: 1; } .goconform-card .card-footer { margin-top: auto; position: relative; z-index: 1; } /* === MODAL GOCONFORM === */ .product-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.2s ease; } .product-modal-content { background: var(--bg-secondary); border: 1px solid var(--border-hover); border-radius: 16px; max-width: 540px; width: 100%; padding: 40px; position: relative; box-shadow: var(--glow-violet), 0 32px 80px rgba(0,0,0,0.6); max-height: 90vh; overflow-y: auto; } .modal-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: color var(--transition-fast), background var(--transition-fast); } .modal-close:hover { color: var(--white); background: rgba(255,255,255,0.1); } .modal-header { margin-bottom: 32px; padding-right: 40px; } .modal-header h2 { font-family: var(--font-display); font-size: 44px; font-weight: 800; text-transform: uppercase; margin: 12px 0 8px; } .modal-header p { color: var(--muted); font-size: 15px; line-height: 1.7; } .modal-origin { margin-top: 12px; font-size: 14px; color: var(--muted); font-style: italic; } .modal-features { margin-bottom: 32px; } .feature-item { display: flex; gap: 16px; margin-bottom: 24px; } .feature-item:last-child { margin-bottom: 0; } .feature-icon { color: var(--violet); font-size: 18px; flex-shrink: 0; margin-top: 3px; } .feature-item strong { display: block; font-size: 15px; color: var(--white); margin-bottom: 4px; } .feature-item p { color: var(--muted); font-size: 14px; line-height: 1.7; } .modal-cta { text-align: center; padding-top: 24px; border-top: 1px solid var(--border); } .modal-status { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 16px; } .modal-note { font-size: 13px; color: var(--muted); margin-top: 12px; } .modal-notify-label { font-size: 14px; color: var(--text); margin-bottom: 12px; } .modal-notify-form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .modal-notify-input { background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; font-size: 14px; color: var(--text); font-family: var(--font-body); outline: none; flex: 1; min-width: 200px; max-width: 280px; } .modal-notify-input::placeholder { color: var(--muted); } .modal-notify-input:focus { border-color: var(--violet); } .marie-cta-note { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 16px; display: block; } /* === À PROPOS === */ #about { padding: var(--section-padding); } .about-grid { display: grid; grid-template-columns: 1fr; gap: 64px; align-items: start; } .about-timeline { display: flex; flex-direction: column; height: 100%; } .timeline { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .timeline .timeline-item { margin-bottom: 0; } .about-text p { color: var(--muted); font-size: clamp(15px, 1.8vw, 17px); line-height: 1.9; margin-bottom: 20px; } .about-text p.lead { font-size: clamp(18px, 2.5vw, 22px); color: var(--white); font-weight: 500; } .about-quote { font-family: var(--font-display); font-size: clamp(18px, 3vw, 28px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.3; margin: 40px 0; padding: 28px 32px; border-left: 3px solid var(--violet); background: rgba(107,79,232,0.05); border-radius: 0 var(--radius-card) var(--radius-card) 0; } .about-skills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; } .skill-badge { font-family: var(--font-mono); font-size: 11px; color: var(--muted); background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; letter-spacing: 0.08em; transition: color var(--transition-fast), border-color var(--transition-fast); } .skill-badge:hover { color: var(--white); border-color: var(--border-hover); } .timeline { position: relative; padding-left: 36px; } .timeline::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 0; width: 2px; background: linear-gradient(180deg, #6B4FE8 0%, #3B82F6 50%, #6B4FE8 100%); background-size: 100% 200%; animation: circuit-flow 2.4s linear infinite; border-radius: 2px; } @keyframes circuit-flow { 0% { background-position: 0% 0%; } 100% { background-position: 0% 200%; } } .timeline-item { position: relative; margin-bottom: 44px; } .timeline-item:last-child { margin-bottom: 0; } .timeline-item::before { content: ''; position: absolute; left: -41px; top: 30px; width: 10px; height: 10px; background: var(--violet); border-radius: 50%; border: 2px solid var(--bg-primary); animation: dot-pulse 2.4s ease-in-out infinite; } .timeline-item:nth-child(1)::before { animation-delay: 0s; } .timeline-item:nth-child(2)::before { animation-delay: 0.6s; } .timeline-item:nth-child(3)::before { animation-delay: 1.2s; } .timeline-item:nth-child(4)::before { animation-delay: 1.8s; } @keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(107,79,232,0.6); transform: scale(1); } 50% { box-shadow: 0 0 22px rgba(107,79,232,1), 0 0 44px rgba(59,130,246,0.4); transform: scale(1.35); } } .timeline-sector { font-family: var(--font-mono); font-size: 14px; color: var(--violet); letter-spacing: 0.12em; margin-bottom: 8px; opacity: 0.88; } .timeline-sector-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .timeline-sector-row .timeline-sector { margin-bottom: 0; } .timeline-sector-row .timeline-icon { margin-bottom: 0; } .timeline-icon { width: 22px; height: 22px; margin-bottom: 10px; display: block; } .timeline-icon svg { width: 100%; height: 100%; } .timeline-item:nth-child(odd) .timeline-icon { filter: drop-shadow(0 0 5px rgba(107,79,232,0.5)); } .timeline-item:nth-child(even) .timeline-icon { filter: drop-shadow(0 0 5px rgba(59,130,246,0.45)); } .timeline-year { font-family: var(--font-display); font-size: clamp(32px, 5vw, 48px); font-weight: 700; letter-spacing: 0.04em; line-height: 1; margin-bottom: 6px; background: var(--gradient-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .timeline-event { font-size: 14px; color: var(--muted); font-weight: 500; line-height: 1.5; } /* === CONTACT === */ #contact { padding: var(--section-padding); background: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary) 12%, var(--bg-secondary) 88%, var(--bg-primary)); } .contact-grid { display: grid; grid-template-columns: 1fr; gap: 60px; } .contact-main { display: flex; flex-direction: column; } .contact-tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--border); } .contact-tab { padding: 12px 4px; margin-right: 24px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast); } .contact-tab:hover { color: var(--white); } .contact-tab.active { color: var(--violet); border-bottom-color: var(--violet); } .contact-panel { display: none; } .contact-panel.active { display: flex; flex-direction: column; } .contact-panel-hint { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; } /* Pas de cadre à nous ici : Calendly dessine déjà sa propre carte arrondie à l'intérieur de l'iframe, plus courte que la hauteur fixe du conteneur. Ajouter notre propre border-radius/overflow par-dessus créait un second cadre arrondi, plus grand, qui ne s'alignait jamais avec celui de Calendly (l'effet "les coins arrondis sont plus grands en bas, Calendly s'arrête avant"). */ .contact-form { gap: 20px; } .form-row { display: grid; grid-template-columns: 1fr; gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-group label { font-size: 13px; font-weight: 500; color: var(--white); letter-spacing: 0.03em; } .form-group input, .form-group select, .form-group textarea { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--white); font-size: 15px; padding: 14px 16px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); outline: none; resize: none; -webkit-appearance: none; appearance: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(107,79,232,0.1); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--muted); } .form-group select option { background: var(--bg-card); color: var(--white); } .form-rgpd { font-size: 12px; color: var(--muted); line-height: 1.6; } .form-rgpd a { color: var(--violet); text-decoration: underline; } #form-confirmation { display: none; padding: 16px 20px; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); border-radius: 8px; color: var(--success); font-size: 15px; } #form-confirmation.visible { display: block; } .contact-info { display: flex; flex-direction: column; gap: 4px; } .contact-info-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; text-transform: uppercase; margin-bottom: 20px; } .contact-item { display: flex; align-items: flex-start; gap: 14px; color: var(--muted); font-size: 15px; line-height: 1.6; padding: 8px 0; } .contact-icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; } .contact-item a { transition: color var(--transition-fast); } .contact-item a:hover { color: var(--white); } .linkedin-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: 14px; font-weight: 500; transition: border-color var(--transition-fast), color var(--transition-fast); margin-top: 12px; } .linkedin-btn:hover { border-color: var(--blue); color: var(--white); } .contact-tagline { margin-top: 32px; padding: 24px; background: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(107,79,232,0.028) 12px, rgba(107,79,232,0.028) 24px), var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); font-family: var(--font-mono); font-size: 12px; color: var(--muted); line-height: 1.8; } .contact-tagline strong { color: var(--violet); } /* === FOOTER === */ /* Le padding bas dégage la zone du widget flottant Eiram (fixed, bottom 32px + 64px de haut) : arrivé en bas de page, il survole cet espace vide au lieu de couvrir les liens légaux. C'est ce qui permet de garder le footer réellement centré — avant, le widget était esquivé par un padding-right sur .footer-inner, qui décalait tout le contenu vers la gauche de façon très visible. */ /* Footer aéré : padding vertical augmenté, colonnes plus espacées entre elles et en interne, icônes sociales séparées du texte au-dessus et l'une de l'autre — avant, .footer-socials n'avait que 8px au-dessus de la citation et 10px entre les deux pastilles, ce qui donnait un bloc tassé. */ footer { padding: 72px clamp(20px, 5vw, 80px) 0; border-top: 1px solid var(--border); } .footer-inner { max-width: var(--max-width); margin: 0 auto; } .footer-top { display: flex; flex-direction: column; gap: 48px; padding-bottom: 48px; } .footer-col { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .footer-col-title { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .footer-col-title--spaced { margin-top: 10px; } .footer-col a { font-size: 14px; color: var(--muted); transition: color var(--transition-fast); } .footer-col a:hover { color: var(--white); } .footer-logo-text { display: flex; align-items: center; text-decoration: none; } .footer-logo-img { height: 60px; width: auto; display: block; object-fit: contain; } .footer-quote { font-family: var(--font-display); font-style: italic; font-size: 14px; font-weight: 600; color: var(--muted); line-height: 1.4; max-width: 26ch; } /* Rangée d'icônes sociales — pastilles carrées uniformes, extensible sans retoucher le CSS (TikTok à venir) : il suffit d'ajouter un .footer-social de plus dans le HTML. */ .footer-socials { display: flex; gap: 16px; margin-top: 18px; } .footer-social { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .footer-social:hover { color: var(--white); border-color: var(--violet); transform: translateY(-2px); } .footer-contact .footer-location { font-size: 14px; color: var(--muted); } .footer-cta { margin-top: 12px; padding: 10px 20px; font-size: 14px; } .footer-legal { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; padding: 24px 0; border-top: 1px solid var(--border); } .footer-copy { font-size: 12px; color: var(--text-dim, var(--muted)); } .footer-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .footer-legal-links a { font-size: 12px; color: var(--text-dim, var(--muted)); transition: color var(--transition-fast); } .footer-legal-links a:hover { color: var(--white); } /* === CHATBOT MARIE WIDGET === */ .marie-trigger { position: fixed; bottom: 32px; right: 32px; z-index: 1000; cursor: pointer; display: flex; align-items: center; gap: 12px; } .marie-trigger-label { background: var(--bg-secondary); border: 1px solid var(--border-hover); color: var(--white); font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.35); white-space: nowrap; transition: transform var(--transition-fast); } .marie-trigger:hover .marie-trigger-label { transform: translateY(-2px); } .marie-trigger-avatar { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--violet); box-shadow: var(--glow-violet); background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform var(--transition-fast); } .marie-trigger:hover .marie-trigger-avatar { transform: scale(1.05); } .marie-trigger-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .marie-trigger-fallback { width: 100%; height: 100%; border-radius: 50%; background: var(--gradient-brand); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--white); } .marie-pulse { position: absolute; bottom: -2px; right: -2px; width: 24px; height: 24px; background: var(--violet); border-radius: 50%; border: 2px solid var(--bg-primary); display: flex; align-items: center; justify-content: center; animation: pulseAnim 2s infinite; } @media (max-width: 640px) { .marie-trigger-label { display: none; } } @keyframes pulseAnim { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } } .marie-modal { position: fixed; bottom: 110px; right: 32px; width: 380px; max-height: 560px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--glow-violet), 0 20px 60px rgba(0,0,0,0.5); display: flex; flex-direction: column; z-index: 999; overflow: hidden; animation: slideUp 0.3s ease; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .marie-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--bg-primary); border-bottom: 1px solid var(--border); flex-shrink: 0; } .marie-header-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gradient-brand); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--white); flex-shrink: 0; border: 1px solid rgba(107,79,232,0.5); overflow: hidden; } .marie-header-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .marie-header-info { flex: 1; } .marie-header strong { display: block; font-size: 14px; font-weight: 600; } .marie-status { font-size: 12px; color: var(--success); } #marie-close { background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 4px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: color var(--transition-fast), background var(--transition-fast); } #marie-close:hover { color: var(--white); background: rgba(255,255,255,0.1); } .marie-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; } .marie-messages::-webkit-scrollbar { width: 4px; } .marie-messages::-webkit-scrollbar-track { background: transparent; } .marie-messages::-webkit-scrollbar-thumb { background: rgba(107,79,232,0.3); border-radius: 4px; } .marie-message { max-width: 86%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.6; } .marie-side { background: rgba(107,79,232,0.1); border: 1px solid rgba(107,79,232,0.2); align-self: flex-start; border-radius: 4px 12px 12px 12px; } .user-side { background: var(--gradient-brand); align-self: flex-end; border-radius: 12px 4px 12px 12px; color: var(--white); } .marie-typing { display: flex; align-items: center; gap: 8px; align-self: flex-start; } .marie-typing-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--gradient-brand); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 10px; color: var(--white); flex-shrink: 0; } .marie-typing span { background: rgba(107,79,232,0.1); border: 1px solid rgba(107,79,232,0.2); padding: 10px 18px; border-radius: 4px 12px 12px 12px; font-size: 16px; letter-spacing: 3px; color: var(--violet); animation: typingBlink 1.2s infinite; } @keyframes typingBlink { 0%, 60%, 100% { opacity: 1; } 30% { opacity: 0.3; } } .marie-input-zone { padding: 10px 14px 14px; border-top: 1px solid var(--border); flex-shrink: 0; } .marie-buttons { display: flex; flex-wrap: wrap; gap: 8px; } .marie-btn { font-size: 12px; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border-hover); background: transparent; color: var(--white); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .marie-btn:hover { background: rgba(107,79,232,0.1); border-color: var(--violet); } /* ── Multi-select : état sélectionné ── */ .marie-multiselect { display: flex; flex-wrap: wrap; gap: 8px; } .marie-multiselect-btn { position: relative; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .marie-multiselect-btn.selected { background: rgba(107,79,232,0.22); border-color: var(--violet); transform: scale(1.04); } .marie-multiselect-btn.selected::after { content: " ✓"; color: #a78bfa; font-weight: 700; } /* ── Bouton Valider : CTA hiérarchisé ── */ .marie-btn-confirm { width: 100%; margin-top: 10px; padding: 11px 20px; background: linear-gradient(135deg, #6b4fe8, #3b82f6); border-color: transparent; font-weight: 600; font-size: 13px; letter-spacing: 0.2px; opacity: 0.35; cursor: not-allowed; pointer-events: none; border-radius: 20px; } .marie-btn-confirm.active { opacity: 1; cursor: pointer; pointer-events: auto; } .marie-btn-confirm.active:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(107,79,232,0.4); } .marie-audit-hint { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 0 0 10px; text-align: center; } .marie-text-input { display: flex; gap: 8px; } .marie-text-input input { flex: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--white); font-size: 13px; padding: 10px 12px; outline: none; transition: border-color var(--transition-fast); } .marie-text-input input:focus { border-color: var(--violet); } .marie-text-input input::placeholder { color: var(--muted); } .marie-text-input .btn-primary { padding: 10px 16px; font-size: 14px; flex-shrink: 0; } @media (max-width: 480px) { .marie-modal { width: calc(100vw - 24px); right: 12px; bottom: 100px; } .marie-trigger { bottom: 20px; right: 16px; } } /* === COOKIE BANNER — styles dans la section .cookie-banner en bas de ce fichier === */ /* === PAGES LÉGALES === */ .page-bg { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; } .legal-page { max-width: 800px; margin: 0 auto; padding: 120px clamp(20px, 5vw, 80px) 80px; } .legal-page h1 { font-family: var(--font-display); font-size: clamp(32px, 6vw, 56px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 8px; } .legal-updated { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 48px; display: block; } .legal-page h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--white); margin: 44px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .legal-page p, .legal-page li { color: var(--muted); font-size: 15px; line-height: 1.9; margin-bottom: 12px; } .legal-page ul { padding-left: 20px; } .legal-page ul li { list-style: disc; } .legal-page a { color: var(--violet); text-decoration: underline; } .legal-page strong { color: var(--white); } /* === PAGE GOCONFORM === */ .goconform-page-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 120px clamp(20px, 5vw, 80px) 80px; } .goconform-page-glow { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 700px; height: 700px; background: radial-gradient(circle, rgba(107,79,232,0.1) 0%, transparent 70%); pointer-events: none; z-index: 0; } .goconform-page-content { position: relative; z-index: 1; max-width: 640px; text-align: center; display: flex; flex-direction: column; align-items: center; } .goconform-page-title { font-family: var(--font-display); font-size: clamp(64px, 14vw, 128px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; margin: 20px 0 16px; } .goconform-page-tagline { font-size: clamp(16px, 2.2vw, 20px); color: var(--muted); line-height: 1.7; margin-bottom: 20px; } .goconform-page-origin { font-size: 15px; color: var(--muted); line-height: 1.8; margin-bottom: 32px; font-style: italic; } .launch-status { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--success); background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); border-radius: 20px; padding: 8px 16px; margin-bottom: 40px; text-transform: uppercase; letter-spacing: 0.08em; } .pulse-dot { width: 7px; height: 7px; background: var(--success); border-radius: 50%; animation: pulseAnim 2s infinite; flex-shrink: 0; } .goconform-page-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 44px; text-align: left; width: 100%; } .goconform-page-features div { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--muted); } .goconform-page-features div::before { content: '✦'; color: var(--violet); flex-shrink: 0; } .back-link { margin-top: 24px; color: var(--muted); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; transition: color var(--transition-fast); } .back-link:hover { color: var(--white); } /* === RESPONSIVE === */ @media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } .use-cases-grid { grid-template-columns: 1fr 1fr; } .produits-container { grid-template-columns: 1fr 1fr; } } @media (min-width: 768px) { .approche-grid { grid-template-columns: repeat(3, 1fr); } .contact-grid { grid-template-columns: 3fr 2fr; } .about-grid { grid-template-columns: 3fr 2fr; gap: 80px; align-items: stretch; } .marie-section-grid { grid-template-columns: 1fr 1fr; } .footer-top { flex-direction: row; align-items: flex-start; justify-content: space-between; } .footer-col { flex: 1 1 0; } .footer-brand { flex: 1.3 1 0; } /* Le widget Eiram est esquivé par le padding bas de