/* ========================================================================== Silicom Technology Solutions — Feuille de style principale Thème : Tech moderne — bleu nuit / cyan, avec mode clair et mode sombre ========================================================================== */ /* ---------- 0. Polices auto-hébergées ---------- Les fichiers sont servis depuis assets/fonts/ et non depuis Google Fonts : cela évite deux connexions externes (fonts.googleapis.com et fonts.gstatic.com) avant l'affichage, supprime toute transmission de l'adresse IP du visiteur à un tiers, et rend le site indépendant d'un service extérieur. Sous-ensemble latin, suffisant pour le français. font-display: swap affiche immédiatement le texte dans une police système, puis le remplace dès que la police de marque est chargée : jamais de page vide à l'attente. */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/sora-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/sora-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/sora-latin-700-normal.woff2") format("woff2"); } /* ---------- 1. Tokens de design ---------- */ :root { /* Palette de marque */ --brand-900: #061a33; --brand-800: #0a2647; --brand-700: #0f3a66; --brand-600: #14539a; --brand-500: #1c6dc4; --accent-500: #00b3d6; --accent-400: #22d3ee; --accent-300: #67e8f9; /* Surfaces & textes — mode clair (par défaut) */ --bg: #ffffff; --bg-soft: #f4f7fb; --bg-elev: #ffffff; --bg-invert: #061a33; --border: #dbe4ef; --border-strong: #c2d0e2; --text: #0d1b2a; --text-soft: #4a5b70; --text-mute: #6b7c92; --text-invert: #eaf2fb; --link: #14539a; --accent: #0e7fa3; --accent-contrast: #ffffff; --shadow-sm: 0 1px 2px rgba(6, 26, 51, .06), 0 2px 8px rgba(6, 26, 51, .05); --shadow-md: 0 4px 12px rgba(6, 26, 51, .08), 0 12px 32px rgba(6, 26, 51, .08); --shadow-lg: 0 12px 28px rgba(6, 26, 51, .12), 0 32px 64px rgba(6, 26, 51, .12); --ring: rgba(28, 109, 196, .35); /* Typographie & rythme */ --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-display: "Sora", "IBM Plex Sans", system-ui, sans-serif; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --maxw: 1180px; --gutter: clamp(1.15rem, 4vw, 2.5rem); --section-y: clamp(3.5rem, 8vw, 6.5rem); } /* Mode sombre : suit le système... */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #060f1c; --bg-soft: #0b1a2e; --bg-elev: #0e2036; --bg-invert: #030a14; --border: #1c3350; --border-strong: #2a4a70; --text: #e9f1fa; --text-soft: #b4c6da; --text-mute: #8ba1ba; --text-invert: #e9f1fa; --link: #67e8f9; --accent: #22d3ee; --accent-contrast: #04202b; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow-md: 0 6px 18px rgba(0, 0, 0, .45); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55); --ring: rgba(34, 211, 238, .45); } } /* ...et le choix explicite de l'utilisateur l'emporte */ :root[data-theme="dark"] { --bg: #060f1c; --bg-soft: #0b1a2e; --bg-elev: #0e2036; --bg-invert: #030a14; --border: #1c3350; --border-strong: #2a4a70; --text: #e9f1fa; --text-soft: #b4c6da; --text-mute: #8ba1ba; --text-invert: #e9f1fa; --link: #67e8f9; --accent: #22d3ee; --accent-contrast: #04202b; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow-md: 0 6px 18px rgba(0, 0, 0, .45); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55); --ring: rgba(34, 211, 238, .45); } /* ---------- 2. Réinitialisation ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { margin: 0; padding: 0; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0; letter-spacing: -.02em; font-weight: 600; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); text-wrap: balance; } h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); } h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); } p { margin: 0; } :focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 4px; } /* ---------- 3. Utilitaires de mise en page ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--soft { background: var(--bg-soft); } .section--invert { background: var(--bg-invert); color: var(--text-invert); } .section--invert h2, .section--invert h3 { color: #fff; } .section--invert p { color: rgba(233, 241, 250, .78); } .stack > * + * { margin-top: 1rem; } .center { text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; } .eyebrow::before { content: ""; width: 7px; height: 7px; background: currentColor; border-radius: 2px; } .lead { font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--text-soft); max-width: 62ch; } .section-head { max-width: 66ch; margin-bottom: clamp(2rem, 4vw, 3rem); } .section-head.center { margin-inline: auto; } .grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--accent); color: var(--accent-contrast); padding: .7rem 1.1rem; border-radius: 0 0 var(--r-sm) 0; } .skip-link:focus { left: 0; } /* ---------- 4. Boutons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-sans); font-size: .95rem; font-weight: 600; line-height: 1; padding: .85rem 1.5rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; text-decoration: none; white-space: nowrap; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn--primary { background: linear-gradient(135deg, var(--brand-600), var(--accent-500)); color: #fff; box-shadow: var(--shadow-md); } .btn--primary:hover { box-shadow: var(--shadow-lg); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .section--invert .btn--ghost, .hero .btn--ghost, .cta-band .btn--ghost, .page-head .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .38); } .section--invert .btn--ghost:hover, .hero .btn--ghost:hover, .cta-band .btn--ghost:hover, .page-head .btn--ghost:hover { border-color: var(--accent-400); color: var(--accent-300); background: rgba(255, 255, 255, .06); } .btn--light { background: #fff; color: var(--brand-800); } .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; } .arrow { transition: transform .18s ease; } .btn:hover .arrow { transform: translateX(3px); } /* ---------- 5. En-tête & navigation ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; gap: 1rem; min-height: 76px; } .brand { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; color: var(--text); letter-spacing: -.01em; } .brand:hover { text-decoration: none; } .brand__mark { width: 38px; height: 38px; flex: 0 0 38px; } .brand__name { display: flex; flex-direction: column; line-height: 1.1; } .brand__name small { font-family: var(--font-sans); font-size: .63rem; white-space: nowrap; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); } .nav__links { display: flex; align-items: center; gap: .35rem; list-style: none; margin-left: auto; } .nav__links a { display: block; padding: .55rem .8rem; border-radius: var(--r-sm); white-space: nowrap; font-size: .92rem; font-weight: 500; color: var(--text-soft); } .nav__links a:hover { color: var(--text); background: var(--bg-soft); text-decoration: none; } .nav__links a[aria-current="page"] { color: var(--accent); font-weight: 600; } .nav__tools { display: flex; align-items: center; gap: .5rem; margin-left: .6rem; } .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-soft); cursor: pointer; transition: .18s ease; } .icon-btn:hover { color: var(--accent); border-color: var(--accent); } .lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; } .lang-switch button { border: 0; background: transparent; cursor: pointer; padding: .45rem .7rem; font: 600 .78rem/1 var(--font-sans); color: var(--text-mute); letter-spacing: .04em; } .lang-switch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-contrast); } .nav__toggle { display: none; } .nav__cta { margin-left: .3rem; } @media (max-width: 960px) { .nav__toggle { display: inline-grid; } .nav__cta { display: none; } .nav__links { position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: .6rem var(--gutter) 1.4rem; box-shadow: var(--shadow-lg); transform: translateY(-130%); transition: transform .28s ease; margin-left: 0; } .nav__links.is-open { transform: translateY(0); } .nav__links a { padding: .85rem .4rem; border-bottom: 1px solid var(--border); font-size: 1rem; } .nav__tools { margin-left: auto; } } /* Entre 961 px et 1150 px (petits portables, tablette en paysage), la barre complète réclame plus de place que l'écran n'en offre et la page se met à défiler horizontalement. On resserre les liens et on retire le bouton de devis, que le visiteur retrouve dans le corps de chaque page. */ @media (min-width: 961px) and (max-width: 1150px) { .nav__cta { display: none; } .nav__links { gap: .1rem; } .nav__links a { padding: .5rem .55rem; font-size: .87rem; } .nav__tools { margin-left: .4rem; } } /* Très petits écrans (iPhone SE et équivalents, 320 à 360 px) : la ligne de marque complète et les boutons contenant l'adresse e-mail ne tiennent pas dans la largeur. */ @media (max-width: 360px) { .brand__name small { display: none; } .btn { white-space: normal; max-width: 100%; overflow-wrap: anywhere; padding-inline: 1.1rem; } } @media (max-width: 430px) { .nav { gap: .5rem; } .brand { font-size: .96rem; gap: .5rem; } .brand__mark { width: 34px; height: 34px; flex-basis: 34px; } .brand__name small { font-size: .55rem; letter-spacing: .11em; } .nav__tools { gap: .3rem; margin-left: auto; } .icon-btn { width: 36px; height: 36px; } .lang-switch button { padding: .4rem .52rem; font-size: .72rem; } } /* ---------- 6. Hero ---------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(1100px 520px at 78% -12%, rgba(34, 211, 238, .22), transparent 62%), radial-gradient(900px 480px at 8% 6%, rgba(28, 109, 196, .28), transparent 60%), linear-gradient(165deg, #061a33 0%, #0a2647 55%, #061a33 100%); color: #eaf2fb; padding-block: clamp(3.5rem, 9vw, 6.5rem); } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at 50% 30%, #000, transparent 78%); } .hero > .container { position: relative; z-index: 1; } .hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } } .hero h1 { color: #fff; } .hero h1 .hl { background: linear-gradient(100deg, var(--accent-400), var(--accent-300)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { color: rgba(234, 242, 251, .82); } .hero .eyebrow { color: var(--accent-300); } .hero__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.2rem; } .badge { font-size: .78rem; font-weight: 500; padding: .4rem .85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: rgba(234, 242, 251, .9); } .hero-card { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-xl); padding: clamp(1.4rem, 3vw, 2rem); backdrop-filter: blur(8px); } .hero-card ul { list-style: none; display: grid; gap: .95rem; } .hero-card li { display: flex; gap: .8rem; align-items: flex-start; font-size: .93rem; color: rgba(234, 242, 251, .88); } .hero-card .tick { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(34, 211, 238, .18); color: var(--accent-300); } .hero-card strong { color: #fff; display: block; font-size: .97rem; } /* ---------- 7. Cartes ---------- */ .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.3rem, 2.6vw, 1.85rem); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; display: flex; flex-direction: column; gap: .7rem; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); } .card__icon { width: 50px; height: 50px; border-radius: var(--r-md); display: grid; place-items: center; background: linear-gradient(135deg, rgba(28, 109, 196, .16), rgba(34, 211, 238, .18)); color: var(--accent); margin-bottom: .35rem; } .card h3 { color: var(--text); } .card p { color: var(--text-soft); font-size: .95rem; } .card__list { list-style: none; display: grid; gap: .4rem; margin-top: .4rem; font-size: .89rem; color: var(--text-mute); } .card__list li { padding-left: 1.1rem; position: relative; } .card__list li::before { content: "▸"; position: absolute; left: 0; color: var(--accent); } .card__link { margin-top: auto; padding-top: .9rem; font-size: .9rem; font-weight: 600; color: var(--accent); display: inline-flex; gap: .4rem; align-items: center; } /* ---------- 8. Chiffres clés ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .stat { background: var(--bg-elev); padding: 1.6rem 1.3rem; text-align: center; } .stat__num { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; color: var(--accent); line-height: 1; } .stat__label { font-size: .85rem; color: var(--text-mute); margin-top: .5rem; } /* Rangée de 5 chiffres : colonnes fixes, puis 2 colonnes avec le dernier bloc sur toute la largeur, sinon la grille laisse une cellule vide bien visible sur les petits écrans. */ .stats--five { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1050px) { .stats--five { grid-template-columns: 1fr 1fr; } .stats--five > .stat:last-child { grid-column: 1 / -1; } } /* ---------- 8b. Références clients et technologies déployées ---------- .refs accepte indifféremment un nom en toutes lettres (.ref__name) ou un logo (.ref__logo) : le passage de l'un à l'autre ne demande aucun autre changement que le remplacement du contenu de la case. */ .refs { list-style: none; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); } .refs > * { min-width: 0; } /* Cases indépendantes plutôt qu'un tableau à fond commun : le nombre de références peut alors changer librement sans laisser de cellule vide visible en fin de grille. */ .ref { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); min-height: 158px; padding: 1rem; display: grid; place-items: center; text-align: center; transition: border-color .18s ease, transform .18s ease; } .ref:hover { border-color: var(--accent); transform: translateY(-2px); } .ref__name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text); letter-spacing: -.01em; overflow-wrap: anywhere; } /* Bascule nom / logo. Le logo reste masqué tant qu'il n'a pas été chargé avec succès : une case sans fichier affiche donc le nom, jamais une image cassée. Sans JavaScript, le nom s'affiche également. */ /* Le logo occupe presque toute la case. « contain » garantit qu'il n'est ni déformé ni rogné, quelles que soient ses proportions : un logo carré et un logo très large y tiennent tous les deux, en gardant leur forme d'origine. */ .ref__logo { display: none; width: 100%; height: 134px; object-fit: contain; } .ref.has-logo .ref__logo { display: block; } .ref.has-logo .ref__name { display: none; } /* La plupart des logos de marque sont dessinés pour un fond clair. En thème sombre on garde donc la case blanche, plutôt que d'inverser les logos, ce qui dénaturerait les couleurs des marques. */ :root[data-theme="dark"] .ref.has-logo { background: #fff; border-color: rgba(255, 255, 255, .16); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ref.has-logo { background: #fff; border-color: rgba(255, 255, 255, .16); } } /* Pastilles de technologies et d'environnements, sur les pages de service. */ .chips { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem .6rem; } .chips li { border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elev); padding: .5rem 1.05rem; font-size: .9rem; font-weight: 500; color: var(--text-soft); } /* ---------- 9. Étapes / process ---------- */ .steps { list-style: none; display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); counter-reset: step; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .steps li { position: relative; padding-top: 3.3rem; } .steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--accent); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .steps h3 { margin-bottom: .45rem; } .steps p { color: var(--text-soft); font-size: .94rem; } /* ---------- 10. Panneau média / texte ---------- */ .split { display: grid; gap: clamp(1.8rem, 5vw, 3.5rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; } .split--reverse .split__media { order: 2; } } .split__media { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border); background: var(--bg-soft); box-shadow: var(--shadow-md); } .check-list { list-style: none; display: grid; gap: .85rem; margin-top: 1.5rem; } .check-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--text-soft); font-size: .96rem; } .check-list svg { flex: 0 0 20px; color: var(--accent); margin-top: .25rem; } /* ---------- 11. Secteurs / pastilles ---------- */ .pill-grid { display: flex; flex-wrap: wrap; gap: .6rem; } .pill { border: 1px solid var(--border); border-radius: 999px; padding: .5rem 1.05rem; font-size: .88rem; color: var(--text-soft); background: var(--bg-elev); } /* ---------- 12. Étude de cas ---------- */ .case { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elev); display: flex; flex-direction: column; height: 100%; } .case__head { padding: 1.4rem 1.5rem; background: linear-gradient(135deg, var(--brand-800), var(--brand-600)); color: #fff; } .case__tag { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-300); font-weight: 600; } .case__head h3 { color: #fff; margin-top: .35rem; font-size: 1.15rem; } .case__body { padding: 1.4rem 1.5rem; display: grid; gap: .9rem; } .case__body dt { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; } .case__body dd { margin: .2rem 0 0; color: var(--text-soft); font-size: .94rem; } .case__result { border-top: 1px solid var(--border); padding: 1rem 1.5rem; margin-top: auto; font-size: .92rem; color: var(--accent); font-weight: 600; background: var(--bg-soft); } /* ---------- 13. Témoignages ---------- */ .quote { border-left: 3px solid var(--accent); padding: .3rem 0 .3rem 1.3rem; } .quote p { font-size: 1.02rem; color: var(--text); font-style: italic; } .quote footer { margin-top: .8rem; font-size: .86rem; color: var(--text-mute); font-style: normal; } /* ---------- 14. FAQ ---------- */ .faq { display: grid; gap: .8rem; } .faq details { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elev); } .faq summary { cursor: pointer; padding: 1.05rem 1.3rem; font-weight: 600; font-size: .98rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; } .faq details[open] summary::after { content: "–"; } .faq p { padding: 0 1.3rem 1.2rem; color: var(--text-soft); font-size: .94rem; } /* ---------- 15. Formulaire ---------- */ .form { display: grid; gap: 1.05rem; } .form__row { display: grid; gap: 1.05rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .field { display: grid; gap: .4rem; } .field label { font-size: .86rem; font-weight: 600; color: var(--text); } .field input, .field select, .field textarea { font: inherit; font-size: .95rem; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: .75rem .9rem; width: 100%; } .field textarea { min-height: 148px; resize: vertical; } /* Un