/* ========================================================================== Espace Santé Les Lucioles — tokens & socle CSS Autosuffisant : ce fichier remplace la feuille du design system Modernist pour une intégration HTML/CSS classique. Ne pas coder de valeur en dur ailleurs : tout passe par var(--*). ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap"); :root { /* ---- Palette active : « Vert forêt & sable » (défaut retenu) ---------- */ --color-bg: #F4F1EA; /* fond général, papier */ --color-surface: #E9E5DA; /* bandeaux secondaires, formulaire, encarts */ --color-text: #1C2A21; /* encre : texte, footer, bouton MENU */ --color-accent: #2F5D3A; /* vert : CTA, chiffres, kickers, liens */ --color-accent-600:#26492E; /* hover CTA */ --color-accent-700:#1B3722; /* pressed / texte accent taille courante */ --color-divider: rgba(28, 42, 33, .32); /* filets */ --ac-t: #DDE6DB; /* teinte accent : fond de survol des listes */ /* ---- Typographie ------------------------------------------------------ */ --font-heading: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif; --font-heading-weight: 800; /* ---- Espacement ------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; /* ---- Rayons : ZÉRO partout, règle non négociable ---------------------- */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; /* ---- Gabarit ---------------------------------------------------------- */ --wrap: 1320px; /* largeur max de contenu */ --gutter: clamp(18px, 4vw, 52px); /* marge latérale */ --rule: 2px; /* épaisseur des filets forts */ --header-h: clamp(68px, 8vw, 86px); /* hauteur du header sticky */ /* ---- Traitement photo ------------------------------------------------- */ --gs: grayscale(1) contrast(1.06); /* mettre à `none` pour la couleur */ } /* ---- Variantes de palette : ajouter la classe sur ----------------- */ html.pal-pastel { --color-bg: #FBF9F4; --color-surface: #F0F2E6; --color-text: #2E362C; --color-accent: #5E7A19; --color-accent-600: #4C6314; --color-accent-700: #3A4C0F; --color-divider: rgba(46, 54, 44, .26); --ac-t: #E8EFD8; } html.pal-cliente { --color-bg: #FDF3EC; --color-surface: #F6E7DA; --color-text: #2A2420; --color-accent: #2C7C3E; --color-accent-600: #22642F; --color-accent-700: #1A4D24; --color-divider: rgba(42, 36, 32, .30); --ac-t: #E2F0E3; } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-wrap: pretty; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 800; text-wrap: balance; } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-700); text-decoration: underline; } img { display: block; max-width: 100%; } ::selection { background: var(--ac-t); } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Conteneur standard */ .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } /* Filet fort */ .hr { border: 0; border-top: var(--rule) solid var(--color-divider); margin: 0; } /* Échelle typographique (fluide, à réutiliser telle quelle) */ .t-kicker { font-family: var(--font-heading); font-weight: 800; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; } .t-h1 { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.03; letter-spacing: -.03em; } .t-h1-home{ font-size: clamp(36px, 5.4vw, 68px); line-height: 1.03; letter-spacing: -.03em; } .t-h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -.025em; } .t-h3 { font-size: clamp(20px, 2.2vw, 27px); line-height: 1.1; letter-spacing: -.02em; } .t-lead { font-size: clamp(16px, 1.4vw, 19px); opacity: .78; } .t-body { font-size: 15px; opacity: .65; } .t-meta { font-size: 12.5px; opacity: .6; } /* ========================================================================== Composants ========================================================================== */ /* --- Boutons : label TOUJOURS aligné à gauche, jamais centré -------------- */ .btn { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: .01em; line-height: 1; padding: 14px 20px; border: var(--rule) solid var(--color-text); border-radius: 0; background: transparent; color: var(--color-text); cursor: pointer; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; } .btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); } .btn-secondary { background: transparent; border-color: var(--color-text); color: var(--color-text); } .btn-secondary:hover { background: var(--ac-t); border-color: var(--color-accent); color: var(--color-accent-700); } .btn-ghost { border-color: transparent; padding-inline: 0; } .btn-block { display: flex; width: 100%; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } /* --- Tags ---------------------------------------------------------------- */ .tag { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: .04em; padding: 5px 9px; border-radius: 0; text-transform: none; } .tag-neutral { background: var(--color-surface); color: var(--color-text); } .tag-outline { border: 1px solid var(--color-divider); color: var(--color-text); } .tag-accent { background: var(--ac-t); color: var(--color-accent-700); } /* --- Champs de formulaire ------------------------------------------------ */ .field { display: flex; flex-direction: column; gap: 6px; } .field > label { font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; } .input { width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--color-text); background: var(--color-bg); border: var(--rule) solid var(--color-divider); border-radius: 0; padding: 12px 14px; } .input::placeholder { opacity: .45; } .input:focus { outline: none; border-color: var(--color-accent); } input[type="checkbox"] { accent-color: var(--color-accent); } /* --- Grille en filets : cellules égales séparées par 2px ------------------ Le fond du conteneur fait office de filet, chaque cellule repose sur --color-bg. */ .grid-ruled { display: grid; gap: var(--rule); background: var(--color-divider); border: var(--rule) solid var(--color-divider); } .grid-ruled > * { background: var(--color-bg); } .cols-4 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .cols-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* --- Photographie : noir & blanc obligatoire ------------------------------ */ .grayscale img, .grayscale { filter: var(--gs); } /* --- Liste de liens à filets (pôles, spécialités, mega-menu) -------------- */ .list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text); font-size: 14.5px; } .list-row:hover { color: var(--color-accent); text-decoration: none; } .list-row .chev { opacity: .4; }