/* * ============================================================ * ELIOZ — DESIGN SYSTEM * Généré automatiquement depuis Figma KIT-DESIGN-ELIOZ * À importer en premier dans functions.php (wp_enqueue_style) * ============================================================ */ /* ============================================================ 1. IMPORT GOOGLE FONTS — Lexend ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;700;900&display=swap'); /* ============================================================ 2. CUSTOM PROPERTIES (CSS Variables) ============================================================ */ :root { /* --- Font Family --- */ --font-family-base: 'Lexend', sans-serif; /* --- Font Weights --- */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; /* --- Font Sizes --- */ --font-size-12: 0.75rem; /* 12px */ --font-size-14: 0.875rem; /* 14px */ --font-size-16: 1rem; /* 16px */ --font-size-18: 1.125rem; /* 18px */ --font-size-20: 1.25rem; /* 20px */ --font-size-24: 1.5rem; /* 24px */ --font-size-32: 2rem; /* 32px */ --font-size-48: 3rem; /* 48px */ --font-size-56: 3.5rem; /* 56px */ --font-size-64: 4rem; /* 64px */ /* --- Line Heights --- */ --line-height-18: 1.125rem; /* 18px */ --line-height-20: 1.25rem; /* 20px */ --line-height-22: 1.375rem; /* 22px */ --line-height-24: 1.5rem; /* 24px */ --line-height-26: 1.625rem; /* 26px */ --line-height-30: 1.875rem; /* 30px */ --line-height-32: 2rem; /* 32px */ --line-height-36: 2.25rem; /* 36px */ --line-height-48: 3rem; /* 48px */ --line-height-56: 3.5rem; /* 56px */ --line-height-64: 4rem; /* 64px */ --line-height-80: 5rem; /* 80px */ /* --- Letter Spacing --- */ --letter-spacing-default: 0; --letter-spacing-quote: 0.25px; /* ------------------------------------------------------- PALETTE DE MARQUE — Figma : Colors (node 2128:62) ------------------------------------------------------- */ /* Bleu marine — couleur primaire Elioz */ --color-navy: #1c1468; /* Bleu électrique */ --color-blue: #1000f0; /* Violet */ --color-purple: #5000b3; /* Rose */ --color-pink: #f9daea; /* Blanc magenta */ --color-white-magenta: #fffaff; /* Vert */ --color-green: #00661f; /* Vert cyan */ --color-cyan-green: #005f6b; /* Blanc cyan */ --color-white-cyan: #fbfdfe; /* Noir black */ --color-black: #101820; /* Orange & rose vif — gradient accent (Mid Hero, Footer) */ --color-orange: #FF9A54; --color-hot-pink: #FF538D; --gradient-accent: linear-gradient(90deg, #FF9A54 0%, #FF538D 100%); --border-gradient-top: var(--gradient-accent) top / 100% 4px no-repeat; /* Alias sémantiques */ --color-primary: var(--color-navy); --color-secondary: var(--color-blue); --color-accent: var(--color-purple); --color-bg: var(--color-white-magenta); /* ------------------------------------------------------- COULEURS D'UI — Figma : Colors UI (node 2134:3913) ------------------------------------------------------- */ /* États fonctionnels */ --color-success: #14ae5c; --color-warning: #e8b931; --color-danger: #ec221f; /* Chilled Gray — nuances de gris violacé */ --color-chilled-gray-50: #f2f3f7; --color-chilled-gray-200: #d3d5e4; --color-chilled-gray-300: #656b9f; --color-chilled-gray-600: #4b4e63; /* ------------------------------------------------------- COULEURS TEXTE — extraites du frame Typography ------------------------------------------------------- */ --color-title: #191b29; --color-chilled-gray-800: #333652; /* * SPACING — à compléter avec le lien Figma de tes tokens spacing * --spacing-xs: ; * --spacing-sm: ; * --spacing-md: ; * --spacing-lg: ; * --spacing-xl: ; * --spacing-2xl: ; */ /* * BORDER RADIUS — à compléter * --radius-sm: ; * --radius-md: ; * --radius-lg: ; * --radius-xl: 24px; (extrait du frame Typography) */ --radius-xl: 24px; } /* ============================================================ 3. BASE / RESET TYPOGRAPHIQUE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; /* base rem */ } body { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-16); line-height: var(--line-height-26); color: var(--color-title); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ 4. TYPOGRAPHY CLASSES Nomenclature : .display-{N} / .title-{N} / .subtitle-{N} .body-{N} / .caption-{N} / .quote-{N} ============================================================ */ /* --- DISPLAY (police : Lexend Black, weight 900) --- */ .display-100 { font-family: var(--font-family-base); font-weight: var(--font-weight-black); /* 900 */ font-size: var(--font-size-64); /* 64px */ line-height: var(--line-height-80); /* 80px */ letter-spacing: var(--letter-spacing-default); } .display-90 { font-family: var(--font-family-base); font-weight: var(--font-weight-black); font-size: var(--font-size-56); /* 56px */ line-height: var(--line-height-64); /* 64px */ letter-spacing: var(--letter-spacing-default); } .display-80 { font-family: var(--font-family-base); font-weight: var(--font-weight-black); font-size: var(--font-size-48); /* 48px */ line-height: var(--line-height-56); /* 56px */ letter-spacing: var(--letter-spacing-default); } .display-70 { font-family: var(--font-family-base); font-weight: var(--font-weight-black); font-size: var(--font-size-32); /* 32px */ line-height: var(--line-height-48); /* 48px */ letter-spacing: var(--letter-spacing-default); } .display-60 { font-family: var(--font-family-base); font-weight: var(--font-weight-black); font-size: var(--font-size-24); /* 24px */ line-height: var(--line-height-32); /* 32px */ letter-spacing: var(--letter-spacing-default); } /* --- TITLE (police : Lexend Bold, weight 700) --- */ .title-60 { font-family: var(--font-family-base); font-weight: var(--font-weight-bold); /* 700 */ font-size: var(--font-size-24); /* 24px */ line-height: var(--line-height-36); /* 36px */ letter-spacing: var(--letter-spacing-default); } .title-50 { font-family: var(--font-family-base); font-weight: var(--font-weight-bold); font-size: var(--font-size-20); /* 20px */ line-height: var(--line-height-32); /* 32px */ letter-spacing: var(--letter-spacing-default); } .title-40 { font-family: var(--font-family-base); font-weight: var(--font-weight-bold); font-size: var(--font-size-18); /* 18px */ line-height: var(--line-height-30); /* 30px */ letter-spacing: var(--letter-spacing-default); } .title-30 { font-family: var(--font-family-base); font-weight: var(--font-weight-bold); font-size: var(--font-size-16); /* 16px */ line-height: var(--line-height-26); /* 26px */ letter-spacing: var(--letter-spacing-default); } .title-20 { font-family: var(--font-family-base); font-weight: var(--font-weight-bold); font-size: var(--font-size-14); /* 14px */ line-height: var(--line-height-22); /* 22px */ letter-spacing: var(--letter-spacing-default); } .title-10 { font-family: var(--font-family-base); font-weight: var(--font-weight-bold); font-size: var(--font-size-12); /* 12px */ line-height: var(--line-height-20); /* 20px */ letter-spacing: var(--letter-spacing-default); } /* --- SUBTITLE (police : Lexend Medium, weight 500) --- */ .subtitle-50 { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); /* 500 */ font-size: var(--font-size-20); /* 20px */ line-height: var(--line-height-32); /* 32px */ letter-spacing: var(--letter-spacing-default); } .subtitle-40 { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-18); /* 18px */ line-height: var(--line-height-30); /* 30px */ letter-spacing: var(--letter-spacing-default); } .subtitle-30 { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-16); /* 16px */ line-height: var(--line-height-26); /* 26px */ letter-spacing: var(--letter-spacing-default); } .subtitle-20 { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-14); /* 14px */ line-height: var(--line-height-24); /* 24px */ letter-spacing: var(--letter-spacing-default); } .subtitle-10 { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-12); /* 12px */ line-height: var(--line-height-20); /* 20px */ letter-spacing: var(--letter-spacing-default); } /* --- BODY (police : Lexend Regular, weight 400) --- */ .body-50 { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); /* 400 */ font-size: var(--font-size-20); /* 20px */ line-height: var(--line-height-32); /* 32px */ letter-spacing: var(--letter-spacing-default); } .body-40 { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-18); /* 18px */ line-height: var(--line-height-30); /* 30px */ letter-spacing: var(--letter-spacing-default); } .body-30 { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-16); /* 16px */ line-height: var(--line-height-26); /* 26px */ letter-spacing: var(--letter-spacing-default); } .body-20 { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-14); /* 14px */ line-height: var(--line-height-24); /* 24px */ letter-spacing: var(--letter-spacing-default); } .body-10 { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-12); /* 12px */ line-height: var(--line-height-18); /* 18px */ letter-spacing: var(--letter-spacing-default); } /* --- CAPTION (police : Lexend Light, weight 300) --- */ .caption-50 { font-family: var(--font-family-base); font-weight: var(--font-weight-light); /* 300 */ font-size: var(--font-size-20); /* 20px */ line-height: var(--line-height-32); /* 32px */ letter-spacing: var(--letter-spacing-default); } .caption-40 { font-family: var(--font-family-base); font-weight: var(--font-weight-light); font-size: var(--font-size-18); /* 18px */ line-height: var(--line-height-30); /* 30px */ letter-spacing: var(--letter-spacing-default); } .caption-30 { font-family: var(--font-family-base); font-weight: var(--font-weight-light); font-size: var(--font-size-16); /* 16px */ line-height: var(--line-height-26); /* 26px */ letter-spacing: var(--letter-spacing-default); } .caption-20 { font-family: var(--font-family-base); font-weight: var(--font-weight-light); font-size: var(--font-size-14); /* 14px */ line-height: var(--line-height-22); /* 22px */ letter-spacing: var(--letter-spacing-default); } .caption-10 { font-family: var(--font-family-base); font-weight: var(--font-weight-light); font-size: var(--font-size-12); /* 12px */ line-height: var(--line-height-20); /* 20px */ letter-spacing: var(--letter-spacing-default); } /* --- QUOTE (police : Lexend Regular, weight 400 + letter-spacing 0.25px) --- */ .quote-50 { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-20); /* 20px */ line-height: var(--line-height-32); /* 32px */ letter-spacing: var(--letter-spacing-quote); /* 0.25px */ } .quote-40 { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-18); /* 18px */ line-height: var(--line-height-30); /* 30px */ letter-spacing: var(--letter-spacing-quote); } .quote-30 { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-16); /* 16px */ line-height: var(--line-height-26); /* 26px */ letter-spacing: var(--letter-spacing-quote); } .quote-20 { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-14); /* 14px */ line-height: var(--line-height-22); /* 22px */ letter-spacing: var(--letter-spacing-quote); } .quote-10 { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-12); /* 12px */ line-height: var(--line-height-20); /* 20px */ letter-spacing: var(--letter-spacing-quote); } /* ============================================================ 5. BALISES HTML SÉMANTIQUES — mapping vers les styles Elioz Permet d'utiliser

,

... directement en HTML/PHP ============================================================ */ h1, .h1 { font-family: var(--font-family-base); font-weight: var(--font-weight-black); font-size: var(--font-size-64); line-height: var(--line-height-80); letter-spacing: var(--letter-spacing-default); color: var(--color-title); } h2, .h2 { font-family: var(--font-family-base); font-weight: var(--font-weight-black); font-size: var(--font-size-48); line-height: var(--line-height-56); letter-spacing: var(--letter-spacing-default); color: var(--color-title); } h3, .h3 { font-family: var(--font-family-base); font-weight: var(--font-weight-bold); font-size: var(--font-size-24); line-height: var(--line-height-36); letter-spacing: var(--letter-spacing-default); color: var(--color-title); } h4, .h4 { font-family: var(--font-family-base); font-weight: var(--font-weight-bold); font-size: var(--font-size-20); line-height: var(--line-height-32); letter-spacing: var(--letter-spacing-default); color: var(--color-title); } h5, .h5 { font-family: var(--font-family-base); font-weight: var(--font-weight-bold); font-size: var(--font-size-18); line-height: var(--line-height-30); letter-spacing: var(--letter-spacing-default); color: var(--color-title); } h6, .h6 { font-family: var(--font-family-base); font-weight: var(--font-weight-bold); font-size: var(--font-size-16); line-height: var(--line-height-26); letter-spacing: var(--letter-spacing-default); color: var(--color-title); } p { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-16); line-height: var(--line-height-26); letter-spacing: var(--letter-spacing-default); } a { color: var(--color-primary); text-decoration: underline; transition: color 0.2s ease; } a:hover, a:focus { color: inherit; } ::selection { background: #1000F0; color: #fff; } strong, b { font-weight: var(--font-weight-bold); } blockquote { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-20); line-height: var(--line-height-32); letter-spacing: var(--letter-spacing-quote); color: var(--color-chilled-gray-600); border-left: 4px solid var(--color-primary); padding-left: 1.5rem; margin: 0; } small, .small { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-12); line-height: var(--line-height-18); } /* ============================================================ 6. COULEURS — Palette de marque + UI Figma : Colors (2128:62) + Colors UI (2134:3913) ============================================================ */ /* --- Backgrounds — palette de marque --- */ .bg-navy { background-color: var(--color-navy); } .bg-blue { background-color: var(--color-blue); } .bg-purple { background-color: var(--color-purple); } .bg-pink { background-color: var(--color-pink); } .bg-white-magenta { background-color: var(--color-white-magenta); } .bg-green { background-color: var(--color-green); } .bg-cyan-green { background-color: var(--color-cyan-green); } .bg-white-cyan { background-color: var(--color-white-cyan); } .bg-black { background-color: var(--color-black); } /* --- Backgrounds — alias sémantiques --- */ .bg-primary { background-color: var(--color-primary); } .bg-secondary { background-color: var(--color-secondary); } .bg-accent { background-color: var(--color-accent); } /* --- Backgrounds — états UI --- */ .bg-success { background-color: var(--color-success); } .bg-warning { background-color: var(--color-warning); } .bg-danger { background-color: var(--color-danger); } /* --- Backgrounds — Chilled Gray --- */ .bg-gray-50 { background-color: var(--color-chilled-gray-50); } .bg-gray-200 { background-color: var(--color-chilled-gray-200); } .bg-gray-300 { background-color: var(--color-chilled-gray-300); } .bg-gray-600 { background-color: var(--color-chilled-gray-600); } .bg-gray-800 { background-color: var(--color-chilled-gray-800); } /* --- Text colors — palette de marque --- */ .text-navy { color: var(--color-navy); } .text-blue { color: var(--color-blue); } .text-purple { color: var(--color-purple); } .text-pink { color: var(--color-pink); } .text-green { color: var(--color-green); } .text-cyan-green { color: var(--color-cyan-green); } .text-black { color: var(--color-black); } .text-white { color: #ffffff; } /* --- Text colors — alias sémantiques --- */ .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-secondary); } .text-accent { color: var(--color-accent); } .text-title { color: var(--color-title); } /* --- Text colors — états UI --- */ .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-danger { color: var(--color-danger); } /* --- Text colors — Chilled Gray --- */ .text-gray-300 { color: var(--color-chilled-gray-300); } .text-gray-600 { color: var(--color-chilled-gray-600); } .text-gray-800 { color: var(--color-chilled-gray-800); } /* --- Border colors --- */ .border-navy { border-color: var(--color-navy); } .border-blue { border-color: var(--color-blue); } .border-purple { border-color: var(--color-purple); } .border-primary { border-color: var(--color-primary); } .border-gray-200 { border-color: var(--color-chilled-gray-200); } .border-gray-300 { border-color: var(--color-chilled-gray-300); } .border-success { border-color: var(--color-success); } .border-warning { border-color: var(--color-warning); } .border-danger { border-color: var(--color-danger); } /* ============================================================ 7. ICÔNES — Système d'icônes Elioz Figma : Icons (node 2134:140) 284 icônes × 6 tailles (16 / 20 / 24 / 32 / 40 / 48px) Base : Feather Icons + icônes custom Elioz (LSF, Doctor, Ring…) ============================================================ */ /* * STRATÉGIE D'INTÉGRATION RECOMMANDÉE * ------------------------------------ * Les icônes Elioz sont des composants SVG dans Figma. * Pour les intégrer dans WordPress, 3 approches possibles : * * A) SVG inline (recommandé pour les icônes critiques) * → Coller le SVG directement dans le PHP/HTML * → Colorable via `fill: currentColor` et `color` CSS * → Exemple : …SVG… * * B) Sprite SVG (recommandé pour les icônes répétées) * → Générer un fichier icons.svg avec tous les * → Appeler via * * C) Font d'icônes (optionnel, via Icomoon ou Fontello) * → Générer depuis les SVG exportés de Figma * → Appeler via * * La section CSS ci-dessous couvre les approches A et B. */ /* --- Conteneur de base pour toutes les icônes --- */ .elioz-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: inherit; /* hérite la couleur du parent */ line-height: 1; } .elioz-icon svg { display: block; fill: none; /* Feather Icons sont en stroke, pas fill */ stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* --- Tailles (correspondent aux tailles Figma) --- */ .elioz-icon.size-16, .elioz-icon.size-16 svg { width: 16px; height: 16px; } .elioz-icon.size-20, .elioz-icon.size-20 svg { width: 20px; height: 20px; } .elioz-icon.size-24, .elioz-icon.size-24 svg { width: 24px; height: 24px; } .elioz-icon.size-32, .elioz-icon.size-32 svg { width: 32px; height: 32px; } .elioz-icon.size-40, .elioz-icon.size-40 svg { width: 40px; height: 40px; } .elioz-icon.size-48, .elioz-icon.size-48 svg { width: 48px; height: 48px; } /* --- Couleurs d'icônes --- */ .elioz-icon.icon-primary { color: var(--color-primary); } .elioz-icon.icon-secondary { color: var(--color-secondary); } .elioz-icon.icon-white { color: #ffffff; } .elioz-icon.icon-success { color: var(--color-success); } .elioz-icon.icon-warning { color: var(--color-warning); } .elioz-icon.icon-danger { color: var(--color-danger); } .elioz-icon.icon-muted { color: var(--color-chilled-gray-300); } /* * CATALOGUE COMPLET — 284 icônes Elioz * Noms Figma → noms CSS (kebab-case) * Usage : … * * CATÉGORIE : Alertes & statuts * activity alert-circle alert-octagon * alert-triangle check check-circle * check-square help-circle info * x x-circle x-octagon * x-square zap zap-off * * CATÉGORIE : Navigation & flèches * arrow-down arrow-down-circle arrow-down-left * arrow-down-right arrow-left arrow-left-circle * arrow-right arrow-right-circle arrow-up * arrow-up-circle arrow-up-left arrow-up-right * chevron-down chevron-left chevron-right * chevron-up chevrons-down chevrons-left * chevrons-right chevrons-up corner-down-left * corner-down-right corner-left-down corner-left-up * corner-right-down corner-right-up corner-up-left * corner-up-right navigation navigation-2 * switch-chevron * * CATÉGORIE : Médias & contenu * airplay camera camera-off * cast disc fast-forward * film mic mic-off * music pause pause-circle * play play-circle radio * repeat rewind skip-back * skip-forward sound speaker * stop-circle tv twitch * video video-messaging video-off * voicemail volume volume-1 * volume-2 volume-x youtube * * CATÉGORIE : Fichiers & données * archive book book-open * clipboard cloud cloud-off * cloud-rain cloud-snow copy * database delete document-search * download download-cloud edit * edit-2 edit-3 file * file-minus file-plus file-text * folder folder-minus folder-plus * hard-drive inbox layers * save server table * upload upload-cloud * * CATÉGORIE : Interface utilisateur * align-center align-justify align-left * align-right bar-chart bar-chart-2 * bell bell-off bookmark * calendar circle code * columns command compass * crop crosshair divide * divide-square filter flag * framer grid hash * hexagon home image * italic key layout * link link-2 list * loader lock log-in * log-out mail map * map-pin maximize maximize-2 * menu minimize minimize-2 * minus minus-circle minus-square * more-horizontal more-vertical mouse-pointer * move octagon package * paperclip pen-tool percent * pie-chart plus plus-circle * plus-square pocket power * printer refresh-ccw refresh-cw * rotate-ccw rotate-cw search * send settings share * share-2 shield shield-off * shopping-bag shopping-cart shuffle * sidebar sliders slash * square star sun * sunrise sunset tag * target text thermometer * thumbs-down thumbs-up toggle-left * toggle-right tool trash * trash-2 trending-down trending-up * triangle type underline * unlock wifi wifi-off * wind zoom-in zoom-out * * CATÉGORIE : Personnes & social * at-sign facebook github * gitlab instagram linkedin * person phone phone-call * phone-forwarded phone-incoming phone-missed * phone-off phone-outgoing smile * frown meh twitter * user user-check user-circle * user-minus user-plus user-x * users * * CATÉGORIE : Objets & divers * anchor aperture award * battery birthday bluetooth * box briefcase cart * clock coffee cpu * credit-card dog doctor * droplet eye eye-off * gift glasses globe * headphones heart hexagon * life-buoy lsf meh * monitor moon package * pie-chart ring rss * smartphone star tablet * thermometer tool tooth * truck umbrella zap */ /* * EXEMPLE D'UTILISATION EN PHP/HTML WORDPRESS * -------------------------------------------- * * * * * * * * * * * * * * * GÉNÉRATION DU SPRITE — commande recommandée : * → Exporter tous les SVG depuis Figma (taille 24px) * → Placer dans assets/icons/svg/ * → Générer le sprite avec svg-sprite ou svgo */ /* ============================================================ 8. COMPOSANTS — Site Vitrine Elioz Figma : Site-Vitrine (node 575:2558) ============================================================ */ /* ------------------------------------------------------- 8.1 BOUTON — .btn Figma : Button (583:2650) Couleur : Blue #1000f0 · Texte blanc · Radius 8px ------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 8px; border: none; cursor: pointer; font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-18); line-height: 18px; white-space: nowrap; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* Variante primaire — fond bleu électrique */ .btn--primary { background-color: var(--color-blue); /* #1000f0 */ color: #ffffff; } .btn--primary:hover { background-color: var(--color-navy); color: #ffffff; } /* Variante secondaire — fond violet clair, texte navy */ .btn--secondary { background-color: #ece9f8; color: #17166b; border: 2px solid #ece9f8; } .btn--secondary:hover { border-color: var(--color-navy); color: var(--color-navy); } /* Variante ghost — bordure navy, fond transparent */ .btn--ghost { background-color: transparent; color: var(--color-navy); border: 2px solid #ece9f8; } .btn--ghost:hover { border-color: var(--color-navy); } /* Variante démo — bordure #ece9f8, texte navy (Figma v2 : "Démonstration") */ .btn--demo { background-color: transparent; color: var(--color-navy); /* #1c1468 */ border: 2px solid #ece9f8; } .btn--demo:hover { border-color: var(--color-navy); background-color: transparent; } /* Variante annuaire — fond violet clair, texte navy bold uppercase */ .btn--annuaire { background-color: #ece9f8; color: #17166b; font-weight: var(--font-weight-bold); text-transform: uppercase; width: 154px; } /* Taille large (mobile menu) */ .btn--lg { padding: 16px 18px; width: 100%; justify-content: center; } /* ------------------------------------------------------- 8.2 BOUTON DE RECHERCHE — .btn-search Figma : Search Button (614:2596) Fond bleu · Bordure navy · Texte blanc · Radius pill ------------------------------------------------------- */ .btn-search { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; background-color: var(--color-blue); /* #1000f0 */ border: 1px solid var(--color-navy); /* #1c1468 */ border-radius: 1000px; /* pill */ cursor: pointer; width: 100%; max-width: 322px; transition: background-color 0.2s ease; } .btn-search__label { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); /* 500 */ font-size: var(--font-size-20); color: #ffffff; white-space: nowrap; } .btn-search__icon { display: flex; align-items: center; width: 24px; height: 24px; flex-shrink: 0; color: #ffffff; } .btn-search__icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .btn-search:hover { background-color: var(--color-navy); } /* ------------------------------------------------------- 8.3 CARD PRODUIT — .card-produit Figma : Card Produit (583:2703) Fond blanc-cyan · Bordure bleue 2px · Radius 53px Shadow navy 10% · 466×353px ------------------------------------------------------- */ .card-produit { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 52px 60px; background-color: var(--color-white-cyan); /* #fbfdfe */ border: 2px solid var(--color-blue); /* #1000f0 */ border-radius: 53px; box-shadow: 0 8px 10px 0 rgba(1, 22, 121, 0.10); width: 466px; height: 353px; transition: box-shadow 0.2s ease, transform 0.2s ease; } .card-produit:hover { box-shadow: 0 16px 24px 0 rgba(1, 22, 121, 0.15); transform: translateY(-4px); } .card-produit__logo { height: 64px; width: auto; object-fit: contain; flex-shrink: 0; } .card-produit__title { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: 26px; line-height: 38px; color: #011679; text-align: center; width: 100%; } /* Responsive card produit */ @media (max-width: 768px) { .card-produit { width: 100%; height: auto; padding: 36px 32px; } } /* ------------------------------------------------------- 8.4 MENU DESKTOP — .site-header / .site-nav Figma : MENU (614:4942) — Default + Variant2 (avec dropdown) Fond blanc-magenta · Bordure bas rose 4px · Radius bas 12px ------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--color-white-magenta); /* #fbfdfe */ border-bottom: 4px solid var(--color-pink); /* #f9daea */ border-radius: 0 0 12px 12px; width: 100%; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 24px 65px; max-width: 1661px; margin: 0 auto; } .site-header__logo { height: 48px; width: auto; flex-shrink: 0; } /* Navigation principale */ .site-nav { display: flex; align-items: center; gap: 5px; } .site-nav__group { display: flex; align-items: center; gap: 5px; padding-right: 16px; border-right: 1px solid #e4e0f5; } .site-nav__actions { display: flex; align-items: center; gap: 40px; } /* Item de menu simple */ .nav-item { display: flex; align-items: center; padding: 12px 18px; font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-18); color: var(--color-navy); /* #1c1468 */ text-decoration: none; white-space: nowrap; cursor: pointer; transition: color 0.2s ease; background: none; border: none; } .nav-item:hover { color: var(--color-blue); } /* Item de menu avec dropdown */ .nav-item--dropdown { display: flex; align-items: center; gap: 16px; } .nav-item--dropdown::after { content: ''; display: inline-block; width: 11px; height: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 6'%3E%3Cpath d='M1 1l4.5 4L10 1' stroke='%231c1468' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center; transition: transform 0.2s ease; flex-shrink: 0; } .nav-item--dropdown.is-open::after { transform: rotate(180deg); } /* * Navigation desktop — liens (Figma v2) * Default : Solutions ↓ | Etude de cas | Blog | [Démonstration] || [ANNUAIRE] * Variant2 : Solutions ↓ | Expertise | Blog | [Démonstration] || [ANNUAIRE] * Note : le texte "Démonstration" est identique dans les 2 variantes (v2 corrigé) */ /* ------------------------------------------------------- 8.5 DROPDOWN MENU — .nav-dropdown + .card-sub-menu Figma : Menu Dropdown (967:1827) ------------------------------------------------------- */ /* Wrapper — positionné */ .nav-dropdown-wrapper { position: relative; } /* Panneau dropdown — conteneur principal */ .nav-dropdown { position: absolute; top: calc(100% + 6px); left: 0; z-index: 200; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #ffffff; border: 1px solid #e4e0f5; border-radius: 12px; box-shadow: 0 8px 24px rgba(28, 20, 104, 0.10); min-width: 280px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease; } .nav-dropdown-wrapper:hover .nav-dropdown, .nav-dropdown-wrapper:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } /* Petite flèche décorative */ .nav-dropdown__arrow { position: absolute; top: -8px; left: 24px; width: 14px; height: 8px; } /* Card item — Figma : Card Sub-Item Menu Dropdown */ .card-sub-menu { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; background: #ffffff; border: 1px solid #ece9f8; border-radius: 12px; text-decoration: none; width: 100%; box-sizing: border-box; } .card-sub-menu:hover { border-color: #c8c4f0; box-shadow: 0 4px 12px rgba(28, 20, 104, 0.07); } /* Logo SVG dans la card */ .card-sub-menu__logo { height: 32px; width: 100%; display: flex; align-items: center; } .card-sub-menu__logo svg, .card-sub-menu__logo img { height: 32px; width: auto; } /* Description */ .card-sub-menu__desc { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-12); color: #908fbc; line-height: normal; } /* Ancien composant inutilisé */ .menu-dropdown { display: none; } /* ------------------------------------------------------- 8.6 MENU MOBILE — .site-header-mobile Figma : Menu Mobile (620:2652) Default (620:2651) : ouvert, gap 35px entre les blocs Variant2 (728:2601) : collapsed = topbar seule h=88px bg #fbfdfe · border-bottom #f9daea 3px · radius bas 12px ------------------------------------------------------- */ /* Panneau principal — état ouvert */ .site-header-mobile { display: flex; flex-direction: column; gap: 35px; /* Figma : gap 35px */ background-color: var(--color-white-cyan); /* #fbfdfe */ border-bottom: 3px solid var(--color-pink); /* #f9daea 3px */ border-radius: 0 0 12px 12px; width: 100%; } /* Variant2 — état collapsed (topbar seule) */ .site-header-mobile.is-collapsed { transform: translateY(-100%); visibility: hidden; pointer-events: none; } /* ── Topbar : logo 40px + bouton × Figma : padding 24px 36px ── */ .mobile-topbar { display: flex; align-items: center; justify-content: space-between; padding: 24px 36px; /* Figma : px 36px py 24px */ background-color: var(--color-white-cyan); flex-shrink: 0; } .mobile-topbar__logo { height: 40px; /* Figma : LogoElioz size=40 */ width: auto; display: block; } /* Bouton × / hamburger — Figma : 20×20 (×) ou 30×20 (hamburger) */ .mobile-topbar__btn { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; } /* ── Navigation items Figma : SubMenuItemDropdown (619:5219) padding 6px 38px · border-bottom #f3f3f8 · Lexend Regular 18px/30px ── */ .mobile-nav { display: flex; flex-direction: column; flex-shrink: 0; } .mobile-nav__item { display: flex; align-items: center; justify-content: space-between; padding: 6px 38px; /* Figma : py 6 px 38 */ border-bottom: 1px solid #f3f3f8; /* Figma : border #f3f3f8 */ font-family: var(--font-family-base); font-weight: var(--font-weight-regular); /* 400 */ font-size: var(--font-size-18); /* 18px */ line-height: 30px; /* Figma : leading-[30px] */ color: var(--color-navy); /* #1c1468 */ text-decoration: none; cursor: pointer; background: none; border-left: none; border-right: none; border-top: none; width: 100%; text-align: left; min-height: 42px; } .mobile-nav__item--dropdown .nav-item__chevron { transition: transform 0.2s ease; } .mobile-nav__item--dropdown.is-open .nav-item__chevron { transform: rotate(180deg); } /* Sous-menu accordéon Figma : Menu Dropdown mobile (774:2669) bg #fbfbff · flex col · gap 14px · p 14px Accordéon CSS : max-height + padding animés */ .mobile-nav__sub { background-color: #fbfbff; display: flex; flex-direction: column; gap: 14px; /* padding gauche/droite fixes, haut/bas animés à 0 → fermeture propre */ padding-left: 14px; padding-right: 14px; padding-top: 0; padding-bottom: 0; width: 100%; flex-shrink: 0; overflow: hidden; max-height: 0; transition: max-height .3s cubic-bezier(.16,1,.3,1), padding-top .3s cubic-bezier(.16,1,.3,1), padding-bottom .3s cubic-bezier(.16,1,.3,1); } .mobile-nav__sub.is-open { max-height: 500px; padding-top: 14px; padding-bottom: 14px; } /* Card sous-menu mobile Figma : Card Sub-Item Menu Dropdown (774:2670) bg white · border #ece9f8 · radius 12px · h 86px · gap 8px · px 18 py 14 */ .mobile-nav__sub-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; height: 86px; width: 100%; background-color: #ffffff; border: 1px solid #ece9f8; border-radius: 12px; text-decoration: none; cursor: pointer; flex-shrink: 0; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .mobile-nav__sub-card:hover { border-color: var(--color-blue); box-shadow: 0 4px 12px rgba(16, 0, 240, 0.08); } /* Logo — h 32px · overflow clip */ .mobile-nav__sub-card__logo { display: flex; align-items: center; height: 32px; width: 100%; overflow: hidden; flex-shrink: 0; } .mobile-nav__sub-card__logo svg { height: 100%; width: auto; max-width: 100%; } /* Description — Lexend Regular 12px · #908fbc */ .mobile-nav__sub-card__desc { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-12); line-height: normal; color: var(--color-chilled-gray-300); } /* ── Actions : ANNUAIRE + Démonstration Figma v2 : px-[36px] · py-[18px] · gap 25px ── */ .mobile-nav__actions { display: flex; flex-direction: column; gap: 25px; padding: 18px 36px; /* Figma v2 : py 18px (était 16px) */ flex-shrink: 0; } /* ── Bouton ANNUAIRE mobile — auto-layout responsive (Figma v2 777:2703) Structure flex row : texte (flex:1) | mascotte (largeur fixe) Le texte s'adapte à la largeur disponible, la mascotte reste collée à droite */ .btn--annuaire-mobile { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; min-height: 83px; background-color: #1000f0; border: 1px solid #000e9a; border-radius: 8px; overflow: hidden; text-decoration: none; cursor: pointer; flex-shrink: 0; padding: 15px 0 15px 13px; transition: background-color 0.15s ease; } .btn--annuaire-mobile:hover { background-color: #0c00cc; } /* Bloc texte — flex:1 pour pousser la mascotte à droite */ .btn--annuaire-mobile__text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; padding-right: 8px; } .btn--annuaire-mobile__title { font-family: var(--font-family-base); font-weight: var(--font-weight-bold); font-size: var(--font-size-18); line-height: 18px; color: #ffffff; white-space: nowrap; } /* Sous-titre — white-space: pre-line reproduit les 2 lignes Figma */ .btn--annuaire-mobile__subtitle { font-family: var(--font-family-base); font-weight: var(--font-weight-light); font-size: var(--font-size-12); line-height: 1.5; color: #ffffff; white-space: pre-line; } /* Mascotte — largeur fixe, déborde en haut via overflow:hidden du parent */ .btn--annuaire-mobile__mascot { position: relative; width: 120px; height: 83px; flex-shrink: 0; overflow: visible; pointer-events: none; align-self: stretch; display: flex; align-items: flex-end; } .btn--annuaire-mobile__mascot img { position: absolute; bottom: -5px; right: -5px; width: 120px; height: auto; max-width: none; object-fit: contain; object-position: bottom right; } /* ── Bouton Démonstration mobile — inchangé Figma : border 2px #ece9f8 · texte navy · py 16px · radius 8px */ .btn--demo-mobile { display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px 18px; background: transparent; color: var(--color-navy); font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-18); line-height: 18px; border: 2px solid #ece9f8; border-radius: 8px; text-decoration: none; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .btn--demo-mobile:hover { border-color: var(--color-navy); background: var(--color-chilled-gray-50); } /* ------------------------------------------------------- 8.7 DIAL / INDICATEUR — .dial Figma : Dial (622:2690) — point 9×9px ------------------------------------------------------- */ .dial { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background-color: var(--color-blue); flex-shrink: 0; } .dial--active { background-color: var(--color-blue); } .dial--inactive { background-color: var(--color-chilled-gray-200); } /* ============================================================ 9. UTILITAIRES ============================================================ */ /* --- Conteneur principal --- */ .container { width: 100%; max-width: 1661px; margin: 0 auto; padding: 0 65px; } @media (max-width: 1024px) { .container { padding: 0 36px; } } @media (max-width: 768px) { .container { padding: 0 24px; } } /* --- Visibilité responsive --- */ .hide-mobile { display: block; } .show-mobile { display: none; } @media (max-width: 768px) { .hide-mobile { display: none; } .show-mobile { display: block; } } /* --- Positionnement dropdown --- */ .relative { position: relative; } .absolute { position: absolute; } /* --- Transitions globales --- */ * { box-sizing: border-box; } a, button { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }