/* ========================================================================== TECO — feuille de style du site public ========================================================================== Assemblage du CSS achromatique validé sur la maquette statique. Concaténé en un seul fichier plutôt qu'en @import : une requête au lieu de quatorze, et pas de cascade de chargement. Ordre volontaire : jetons → base → gabarit → composants → sections. NE PAS l'inverser, la cascade en dépend. Fichier généré. La source reste le dossier assets/css/ du site statique. ========================================================================== */ /* ── base/_tokens.css ────────────────────────────────────────────────── */ /* ========================================================================== TECO — Jetons de design Palette achromatique : noir, blanc, gris. Aucune couleur chromatique. Le contraste et l'espace font tout le travail. Deux thèmes : défaut → papier blanc, texte encre → encre, texte papier Un seul bloc de variables change ; aucune règle n'est dupliquée. ========================================================================== */ :root { /* --- Échelle achromatique --------------------------------------------- */ --n-000: #ffffff; --n-050: #f7f7f7; --n-100: #efefef; --n-200: #e2e2e2; --n-300: #c9c9c9; --n-400: #a3a3a3; --n-500: #7a7a7a; --n-600: #545454; --n-700: #333333; --n-800: #1a1a1a; --n-900: #0f0f0f; --n-950: #070707; /* --- Rôles sémantiques ------------------------------------------------ Voir plus bas : ces valeurs sont réaffectées par thème et par bloc. -------------------------------------------------------------------- */ /* --- Typographie ------------------------------------------------------- */ --f-display: "Inter Tight", "Segoe UI", system-ui, sans-serif; --f-corps: "Inter", system-ui, -apple-system, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --t-xs: 0.6875rem; /* 11px — étiquettes */ --t-sm: 0.8125rem; /* 13px */ --t-base: 0.9375rem; /* 15px — corps */ --t-md: clamp(1rem, 0.95rem + 0.22vw, 1.125rem); --t-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); --t-xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem); --t-2xl: clamp(1.75rem, 1.45rem + 1.35vw, 2.625rem); --t-3xl: clamp(2.125rem, 1.6rem + 2.35vw, 3.75rem); --lh-titre: 1.08; --lh-corps: 1.62; --ls-mono: 0.12em; --ls-titre: -0.03em; /* --- Espacements (échelle 4pt) ----------------------------------------- */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --e-section: clamp(3.5rem, 2.25rem + 5vw, 6.5rem); /* --- Gabarit ------------------------------------------------------------ */ --l-max: 72rem; --l-etroit: 42rem; --l-gouttiere: clamp(1.25rem, 4vw, 2.5rem); /* --- Formes ------------------------------------------------------------ */ --r-sm: 3px; --r-md: 6px; --r-lg: 10px; --r-pill: 999px; --tr-rapide: 120ms ease; --tr-base: 220ms ease; --z-header: 100; --z-menu: 200; } /* ========================================================================== Rôles sémantiques Deux jeux de valeurs seulement — clair et sombre — appliqués à quatre situations via des listes de sélecteurs, sans une seule duplication : page claire → jeu clair page sombre → jeu sombre bloc .est-inverse dans le clair → jeu sombre bloc .est-inverse dans le sombre → jeu clair L'ordre des deux blocs compte, ainsi que leur spécificité. ========================================================================== */ /* Jeu clair */ :root, [data-theme="sombre"] .est-inverse { --c-fond: var(--n-000); --c-fond-alt: var(--n-050); --c-surface: var(--n-000); --c-texte: var(--n-950); --c-texte-doux: #5c5c5c; /* 6,7:1 sur blanc — AA texte normal */ --c-texte-tres-doux: #767676; /* 4,5:1 sur blanc — AA texte normal */ --c-trait: var(--n-200); --c-trait-fort: var(--n-300); --c-inverse-fond: var(--n-950); --c-inverse-texte: var(--n-000); } /* Jeu sombre */ [data-theme="sombre"], .est-inverse { --c-fond: var(--n-950); --c-fond-alt: var(--n-900); --c-surface: var(--n-900); --c-texte: var(--n-000); --c-texte-doux: var(--n-400); --c-texte-tres-doux: var(--n-500); --c-trait: rgb(255 255 255 / 13%); --c-trait-fort: rgb(255 255 255 / 26%); --c-inverse-fond: var(--n-000); --c-inverse-texte: var(--n-950); } [data-theme="sombre"] { color-scheme: dark; } /* Le bloc inversé applique lui-même son fond et sa couleur de texte. */ .est-inverse { background-color: var(--c-fond); color: var(--c-texte); } /* ── base/_reset.css ────────────────────────────────────────────────── */ /* ========================================================================== TECO — Reset Complète modern-normalize (chargé via CDN). Ne contient que les corrections que normalize ne fait pas. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; /* Compense le header collant lors des ancres */ scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; } body { min-height: 100svh; background-color: var(--c-fond); color: var(--c-texte); font-family: var(--f-corps); font-size: var(--t-base); line-height: var(--lh-corps); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } ul[class], ol[class] { list-style: none; padding: 0; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } :where(h1, h2, h3, h4) { text-wrap: balance; } p, li { text-wrap: pretty; } /* Accessibilité : focus toujours visible, jamais supprimé. */ :focus-visible { outline: 2px solid var(--c-texte); outline-offset: 3px; border-radius: var(--r-sm); } /* Lien d'évitement */ .saut-contenu { position: absolute; left: var(--e-4); top: var(--e-4); z-index: calc(var(--z-menu) + 10); padding: var(--e-3) var(--e-4); background: var(--c-texte); color: var(--c-fond); border-radius: var(--r-md); transform: translateY(-200%); transition: transform var(--tr-rapide); } .saut-contenu:focus { transform: translateY(0); } /* Réservé aux lecteurs d'écran */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── base/_typography.css ────────────────────────────────────────────────── */ /* ========================================================================== TECO — Typographie Deux familles seulement, plus une monospace pour les repères structurels. Inter Tight (titres) / Inter (corps) / IBM Plex Mono (étiquettes). La sobriété se joue ici : interlettrage resserré sur les grands titres, étiquettes minuscules en majuscules espacées, rien d'autre. ========================================================================== */ .titre-1, .titre-2, .titre-3, .titre-4 { font-family: var(--f-display); color: var(--c-texte); letter-spacing: var(--ls-titre); font-weight: 600; } .titre-1 { font-size: var(--t-3xl); line-height: var(--lh-titre); letter-spacing: -0.038em; } .titre-2 { font-size: var(--t-2xl); line-height: 1.12; letter-spacing: -0.032em; } .titre-3 { font-size: var(--t-xl); line-height: 1.18; letter-spacing: -0.025em; } .titre-4 { font-size: var(--t-lg); line-height: 1.25; letter-spacing: -0.018em; } /* Étiquette : le seul repère structurel du site. Elle nomme la section, elle ne la décore pas. */ .etiquette { display: block; font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-texte-doux); } /* Chapô : paragraphe d'introduction. */ .chapo { font-size: var(--t-md); line-height: 1.6; color: var(--c-texte-doux); max-inline-size: 52ch; } .texte-doux { color: var(--c-texte-doux); } .mono { font-family: var(--f-mono); font-size: var(--t-sm); } /* Lien de texte : soulignement fin, jamais de couleur. */ .lien { color: var(--c-texte); text-decoration: underline; text-decoration-color: var(--c-trait-fort); text-underline-offset: 0.25em; transition: text-decoration-color var(--tr-rapide); } .lien:hover { text-decoration-color: currentColor; } /* Bloc de texte long. */ .prose { max-inline-size: var(--l-etroit); } .prose > * + * { margin-block-start: var(--e-4); } .prose h2 { margin-block-start: var(--e-7); } /* ── base/_utilities.css ────────────────────────────────────────────────── */ /* ========================================================================== TECO — Utilitaires Jeu volontairement restreint : tout le reste appartient à un composant. ========================================================================== */ .pile { display: flex; flex-direction: column; } .pile > * + * { margin-block-start: var(--pile-espace, var(--e-4)); } .pile--serree { --pile-espace: var(--e-3); } .pile--large { --pile-espace: var(--e-6); } .rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rangee-espace, var(--e-3)); } .mesure { max-inline-size: var(--l-etroit); } .mt-2 { margin-block-start: var(--e-2); } .mt-4 { margin-block-start: var(--e-4); } .mt-5 { margin-block-start: var(--e-5); } .mt-6 { margin-block-start: var(--e-6); } .mt-7 { margin-block-start: var(--e-7); } @media (width < 60rem) { .cache-mobile { display: none !important; } } @media (width >= 60rem) { .cache-bureau { display: none !important; } } /* ── layout/_layout.css ────────────────────────────────────────────────── */ /* ========================================================================== TECO — Gabarit Conteneurs, rythme vertical, grilles. Les sections sont séparées par un filet d'un pixel plutôt que par de la couleur : c'est le seul élément structurel visible du site. ========================================================================== */ .contenant { inline-size: 100%; max-inline-size: var(--l-max); margin-inline: auto; padding-inline: var(--l-gouttiere); } .contenant--etroit { max-inline-size: calc(var(--l-etroit) + var(--l-gouttiere) * 2); } /* Une section = un bloc avec sa respiration. La marge appartient toujours à .section, jamais aux composants internes : pas de conflit de spécificité. */ .section { padding-block: var(--e-section); background-color: var(--c-fond); } .section--compacte { padding-block: calc(var(--e-section) * 0.62); } .section--sans-haut { padding-block-start: 0; } .section--alt { background-color: var(--c-fond-alt); } /* Filet de séparation entre deux sections de même fond. */ .section--filet { border-block-start: 1px solid var(--c-trait); } .filet { block-size: 1px; border: 0; margin: 0; background: var(--c-trait); } /* En-tête de section : étiquette, titre, chapô. */ .entete-section { display: grid; gap: var(--e-4); margin-block-end: var(--e-7); max-inline-size: 46rem; } .entete-section .chapo { margin-block-start: var(--e-1); } /* Variante deux colonnes : titre à gauche, chapô à droite. */ @media (width >= 62rem) { .entete-section--partagee { max-inline-size: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: var(--e-8); } .entete-section--partagee .etiquette { grid-column: 1 / -1; } .entete-section--partagee .chapo { margin-block-start: 0.35rem; } } /* Grilles génériques ------------------------------------------------------ */ .grille { display: grid; gap: var(--grille-espace, var(--e-6)); } @media (width >= 42rem) { .grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (width >= 62rem) { .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Deux colonnes : texte + visuel. */ .duo { display: grid; gap: var(--e-7); align-items: center; } @media (width >= 62rem) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-9); } .duo--texte-large { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .duo--visuel-large { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } /* Aligne en haut quand une colonne est nettement plus haute que l'autre. */ .duo--haut { align-items: start; } /* Inverse l'ordre visuel sans toucher à l'ordre du DOM. */ .duo--inverse > *:first-child { order: 2; } } /* ── layout/_header.css ────────────────────────────────────────────────── */ /* ========================================================================== TECO — En-tête et navigation ========================================================================== */ .entete { position: sticky; inset-block-start: 0; z-index: var(--z-header); background-color: var(--c-fond); border-block-end: 1px solid transparent; transition: border-color var(--tr-base); } .entete.est-detachee { border-block-end-color: var(--c-trait); } .entete__interieur { display: flex; align-items: center; justify-content: space-between; gap: var(--e-5); min-block-size: 4rem; } /* Logo -------------------------------------------------------------------- */ .logo { display: inline-flex; align-items: baseline; gap: var(--e-3); text-decoration: none; flex-shrink: 0; } .logo__mot { font-family: var(--f-display); font-size: 1.1875rem; font-weight: 600; letter-spacing: 0.01em; color: var(--c-texte); } /* Retour n°2 : le suffixe « TECHNOLOGIES & CONSEIL » a été retiré du logo. La classe subsiste pour un usage éventuel hors en-tête. */ .logo__suffixe { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-texte-doux); } /* Navigation -------------------------------------------------------------- */ .nav { display: flex; align-items: center; gap: var(--e-5); } .nav__lien { position: relative; font-size: var(--t-sm); color: var(--c-texte-doux); text-decoration: none; transition: color var(--tr-rapide); } .nav__lien:hover, .nav__lien:focus-visible { color: var(--c-texte); } .nav__lien[aria-current="page"] { color: var(--c-texte); } /* Un point discret plutôt qu'un soulignement : moins bavard. */ .nav__lien[aria-current="page"]::after { content: ""; position: absolute; inset-block-end: -0.55rem; inset-inline-start: 50%; translate: -50% 0; inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--c-texte); } .entete__actions { display: flex; align-items: center; gap: var(--e-2); } /* Sélecteur de langue ----------------------------------------------------- Retour n°1. Deux options côte à côte, séparées par un filet. La langue non encore traduite est rendue mais inerte (aria-disabled) : on ne renvoie pas le visiteur vers une page inexistante. */ .langues { display: flex; align-items: center; border: 1px solid var(--c-trait); border-radius: var(--r-md); overflow: hidden; } .langues__option { display: grid; place-items: center; min-inline-size: 2.125rem; block-size: 2.125rem; padding-inline: var(--e-2); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--c-texte-doux); text-decoration: none; transition: color var(--tr-rapide), background-color var(--tr-rapide); } .langues__option + .langues__option { border-inline-start: 1px solid var(--c-trait); } .langues__option:hover { color: var(--c-texte); background-color: var(--c-fond-alt); } .langues__option[aria-current="true"] { color: var(--c-inverse-texte); background-color: var(--c-inverse-fond); } .langues__option[aria-disabled="true"] { color: var(--c-texte-tres-doux); cursor: not-allowed; } .langues__option[aria-disabled="true"]:hover { color: var(--c-texte-tres-doux); background-color: transparent; } /* Boutons ronds de l'en-tête (thème, menu) -------------------------------- */ .bouton-icone { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--r-md); color: var(--c-texte-doux); transition: color var(--tr-rapide), background-color var(--tr-rapide); } .bouton-icone:hover { color: var(--c-texte); background-color: var(--c-fond-alt); } .bouton-icone[data-role="bascule-menu"] { color: var(--c-texte); } .bascule-menu__barres { position: relative; inline-size: 1.0625rem; block-size: 1px; background: currentColor; transition: background-color var(--tr-rapide); } .bascule-menu__barres::before, .bascule-menu__barres::after { content: ""; position: absolute; inset-inline-start: 0; inline-size: 100%; block-size: 1px; background: currentColor; transition: transform var(--tr-base); } .bascule-menu__barres::before { transform: translateY(-5px); } .bascule-menu__barres::after { transform: translateY(5px); } .bouton-icone[aria-expanded="true"] .bascule-menu__barres { background-color: transparent; } .bouton-icone[aria-expanded="true"] .bascule-menu__barres::before { transform: rotate(45deg); } .bouton-icone[aria-expanded="true"] .bascule-menu__barres::after { transform: rotate(-45deg); } /* Menu mobile ------------------------------------------------------------- */ @media (width < 60rem) { .nav { position: fixed; inset: 4rem 0 auto; z-index: var(--z-menu); flex-direction: column; align-items: stretch; gap: 0; padding: var(--e-2) var(--l-gouttiere) var(--e-6); background-color: var(--c-fond); border-block-end: 1px solid var(--c-trait); visibility: hidden; opacity: 0; transition: opacity var(--tr-base), visibility var(--tr-base); } .nav.est-ouvert { visibility: visible; opacity: 1; } .nav__lien { padding: var(--e-4) 0; font-size: var(--t-md); border-block-end: 1px solid var(--c-trait); } .nav__lien[aria-current="page"]::after { inset-block: auto; inset-inline: auto 0; top: 50%; translate: 0 -50%; } } @media (width >= 60rem) { .bouton-icone[data-role="bascule-menu"] { display: none; } } /* Le disque du bouton de thème pivote pour indiquer l'état courant. */ .bouton-icone[data-role="bascule-theme"] svg { transition: rotate var(--tr-base); } .bouton-icone[aria-pressed="true"] svg { rotate: 180deg; } /* ── layout/_footer.css ────────────────────────────────────────────────── */ /* ========================================================================== TECO — Pied de page ========================================================================== */ .pied { padding-block: var(--e-8) var(--e-5); border-block-start: 1px solid var(--c-trait); background-color: var(--c-fond); } .pied__haut { display: grid; gap: var(--e-7); } @media (width >= 62rem) { .pied__haut { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--e-6); } } .pied__pitch { margin-block-start: var(--e-4); max-inline-size: 32ch; color: var(--c-texte-doux); font-size: var(--t-sm); line-height: 1.7; } .pied__titre { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-texte-tres-doux); margin-block-end: var(--e-4); } .pied__liste { display: grid; gap: var(--e-3); font-size: var(--t-sm); } .pied__liste a { color: var(--c-texte-doux); text-decoration: none; transition: color var(--tr-rapide); } .pied__liste a:hover { color: var(--c-texte); } .pied__bas { margin-block-start: var(--e-8); padding-block-start: var(--e-5); border-block-start: 1px solid var(--c-trait); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.05em; color: var(--c-texte-tres-doux); } /* ── components/_buttons.css ────────────────────────────────────────────────── */ /* ========================================================================== TECO — Boutons et liens d'action Deux variantes seulement : plein (inverse du fond) et contour. Pas de couleur, pas d'ombre, pas de déplacement au survol. ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.6875rem 1.125rem; font-family: var(--f-corps); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0; text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-radius: var(--r-md); transition: background-color var(--tr-base), color var(--tr-base), border-color var(--tr-base); } /* Plein : toujours l'inverse du fond courant. Fonctionne en clair, en sombre et dans un bloc .est-inverse sans une seule règle supplémentaire. */ .btn--plein { background-color: var(--c-inverse-fond); color: var(--c-inverse-texte); border-color: var(--c-inverse-fond); } .btn--plein:hover { background-color: var(--c-texte-doux); border-color: var(--c-texte-doux); } .btn--contour { background-color: transparent; color: var(--c-texte); border-color: var(--c-trait-fort); } .btn--contour:hover { border-color: var(--c-texte); } .btn--large { padding: 0.875rem 1.375rem; font-size: var(--t-base); } /* La flèche est un caractère, pas une icône : zéro dépendance. */ .btn__fleche, .lien-fleche__fleche { display: inline-block; transition: translate var(--tr-base); } .btn:hover .btn__fleche { translate: 3px 0; } /* Lien fléché : alternative discrète au bouton. */ .lien-fleche { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--t-sm); font-weight: 500; text-decoration: none; color: var(--c-texte); border-block-end: 1px solid var(--c-trait-fort); padding-block-end: 3px; transition: border-color var(--tr-base); } .lien-fleche:hover { border-block-end-color: var(--c-texte); } .lien-fleche:hover .lien-fleche__fleche { translate: 3px 0; } /* Pastille : métadonnée courte. */ .pastille { display: inline-flex; align-items: center; gap: var(--e-2); padding: 0.25rem 0.625rem; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-texte-doux); border: 1px solid var(--c-trait); border-radius: var(--r-pill); } .pastille__point { inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* Retour n°3 : bouton « Nous contacter » de l'en-tête. Fond gris plutôt que blanc, plus compact que .btn--plein — il ne doit pas peser autant qu'un appel à l'action de fin de page. */ .btn--sourd { padding: 0.5rem 0.875rem; background-color: var(--c-fond-alt); color: var(--c-texte); border-color: var(--c-trait); font-size: var(--t-sm); } .btn--sourd:hover { background-color: var(--c-trait); border-color: var(--c-trait-fort); } /* Bouton de téléchargement d'application : intitulé sur deux lignes. */ .btn--magasin { align-items: center; gap: 0.625rem; padding: 0.5625rem 1rem; text-align: start; } .btn--magasin svg { inline-size: 1.125rem; block-size: 1.125rem; flex-shrink: 0; } .btn--magasin small { display: block; font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; line-height: 1.3; } .btn--magasin strong { display: block; font-weight: 500; font-size: var(--t-sm); line-height: 1.25; } /* Bouton désactivé : lien de magasin pas encore ouvert. */ .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ── components/_cards.css ────────────────────────────────────────────────── */ /* ========================================================================== TECO — Blocs de contenu Il n'y a plus de « cartes » au sens d'aplats posés sur un fond : tout repose sur des filets et de l'espace. ========================================================================== */ /* Bloc encadré (vision, mission). */ .bloc { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-6); border: 1px solid var(--c-trait); border-radius: var(--r-lg); } .bloc__titre { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.022em; line-height: 1.25; margin-block-start: var(--e-2); } .bloc__texte { color: var(--c-texte-doux); line-height: 1.65; } /* Bloc sans cadre, marqué par un filet supérieur. */ .mention { display: grid; gap: var(--e-2); padding-block-start: var(--e-4); border-block-start: 1px solid var(--c-trait); } .mention__titre { font-family: var(--f-display); font-size: var(--t-md); font-weight: 600; letter-spacing: -0.018em; } .mention__texte { font-size: var(--t-base); color: var(--c-texte-doux); line-height: 1.65; } /* Bandeau des trois articulations. */ .articulations { display: grid; gap: var(--e-6); } @media (width >= 48rem) { .articulations { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .articulation { display: grid; gap: var(--e-2); padding-block-start: var(--e-4); border-block-start: 1px solid var(--c-texte); } .articulation__titre { font-family: var(--f-display); font-size: var(--t-md); font-weight: 600; letter-spacing: -0.018em; } .articulation__texte { font-size: var(--t-sm); color: var(--c-texte-doux); line-height: 1.65; } /* ── components/_registre.css ────────────────────────────────────────────────── */ /* ========================================================================== TECO — Le registre ⟵ élément signature Les huit expertises ne sont plus des cartes mais les lignes d'un registre : un numéro, un intitulé, une ligne de description, séparés par des filets d'un pixel. Aucun aplat, aucune ombre. Le numéro est légitime ici : il donne une adresse stable à chaque domaine (« fil 03 »), pas un ordre. ========================================================================== */ .registre { border-block-start: 1px solid var(--c-trait); } .registre__ligne { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: start; gap: var(--e-4); padding-block: var(--e-5); border-block-end: 1px solid var(--c-trait); text-decoration: none; color: inherit; transition: background-color var(--tr-base), padding-inline var(--tr-base); } @media (width >= 62rem) { .registre__ligne { grid-template-columns: 4rem minmax(0, 18rem) minmax(0, 1fr); align-items: baseline; gap: var(--e-6); } } /* Au survol, la ligne recule légèrement dans sa gouttière : le seul mouvement du site, et il reste dans le plan. */ a.registre__ligne:hover, a.registre__ligne:focus-visible { background-color: var(--c-fond-alt); padding-inline: var(--e-4); margin-inline: calc(var(--e-4) * -1); } .registre__num { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--ls-mono); color: var(--c-texte-tres-doux); padding-block-start: 0.25rem; } .registre__titre { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.022em; line-height: 1.2; color: var(--c-texte); } .registre__texte { font-size: var(--t-base); line-height: 1.6; color: var(--c-texte-doux); max-inline-size: 58ch; } @media (width < 62rem) { .registre__texte { margin-block-start: var(--e-2); } /* En dessous de 62rem la grille n'a que deux colonnes : le numéro, puis le contenu. Tout ce qui n'est pas le numéro va donc en colonne 2 — sans quoi le texte se retrouve écrasé dans les 3,25rem réservés au numéro. Formulé ainsi plutôt qu'avec une classe dédiée, le gabarit n'a rien à savoir de la grille. */ .registre__ligne > :not(.registre__num) { grid-column: 2; } } /* Pied de registre : la promesse que le registre démontre. */ .registre__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4); padding-block-start: var(--e-5); font-size: var(--t-sm); color: var(--c-texte-doux); } /* -------------------------------------------------------------------------- Notice : bloc de définition long (page expertises). Même logique de filets, davantage de place pour le texte. -------------------------------------------------------------------------- */ .notice { display: grid; gap: var(--e-3); padding-block: var(--e-6); border-block-start: 1px solid var(--c-trait); scroll-margin-block-start: 6rem; } @media (width >= 62rem) { .notice { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--e-8); align-items: start; } } .notice__num { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--ls-mono); color: var(--c-texte-tres-doux); margin-block-end: var(--e-2); } .notice__titre { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; } .notice__texte { color: var(--c-texte-doux); line-height: 1.7; max-inline-size: 62ch; } /* ── components/_hero.css ────────────────────────────────────────────────── */ /* ========================================================================== TECO — Héros et bannières Aucun fond, aucun motif : la respiration et le corps du titre suffisent. ========================================================================== */ .heros { padding-block: clamp(3rem, 2rem + 6vw, 6.5rem) var(--e-section); } .heros__contenu { max-inline-size: 56rem; } .heros__titre { margin-block-start: var(--e-4); } .heros__chapo { margin-block-start: var(--e-5); font-size: var(--t-md); max-inline-size: 48ch; } .heros__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-block-start: var(--e-6); } /* Bande de repères sous le héros. */ .heros__reperes { display: grid; gap: var(--e-5); margin-block-start: var(--e-8); padding-block-start: var(--e-5); border-block-start: 1px solid var(--c-trait); } @media (width >= 42rem) { .heros__reperes { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .repere { display: grid; gap: var(--e-1); } .repere__valeur { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--c-texte); } .repere__libelle { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-texte-doux); } /* Bannière des pages internes -------------------------------------------- */ .banniere { padding-block: clamp(2.5rem, 2rem + 4vw, 4.5rem) clamp(2rem, 1.75rem + 2.5vw, 3.5rem); border-block-end: 1px solid var(--c-trait); } .banniere__titre { margin-block-start: var(--e-4); } .banniere__chapo { margin-block-start: var(--e-4); max-inline-size: 54ch; font-size: var(--t-md); } .banniere__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-block-start: var(--e-6); } /* Fil d'Ariane */ .ariane { margin-block-end: var(--e-5); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-texte-tres-doux); } .ariane ol { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; margin: 0; } .ariane a { color: inherit; text-decoration: none; } .ariane a:hover { color: var(--c-texte); text-decoration: underline; text-underline-offset: 0.25em; } .ariane li + li::before { content: "/"; margin-inline-end: var(--e-2); color: var(--c-trait-fort); } /* ── components/_maquette.css ────────────────────────────────────────────────── */ /* ========================================================================== TECO — Maquette « Facile » Aperçu produit dessiné en HTML/CSS, achromatique. Il pourra être remplacé par de vraies captures sans toucher au reste de la mise en page : substituer
par . ========================================================================== */ .maquette { display: grid; gap: var(--e-4); padding: var(--e-5); background-color: var(--c-fond); border: 1px solid var(--c-trait); border-radius: var(--r-lg); } .maquette__capture { inline-size: 100%; border: 1px solid var(--c-trait); border-radius: var(--r-lg); } .maquette__barre { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding-block-end: var(--e-4); border-block-end: 1px solid var(--c-trait); } .maquette__appli { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-texte); } .maquette__etat { display: inline-flex; align-items: center; gap: var(--e-2); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-texte-doux); } /* Fiches de suivi véhicule ------------------------------------------------ */ .maquette__liste { display: grid; } .fiche { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e-4); padding-block: var(--e-4); border-block-end: 1px solid var(--c-trait); } .fiche:last-child { border-block-end: 0; } .fiche__immat { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; color: var(--c-texte-doux); } .fiche__titre { font-size: var(--t-sm); font-weight: 500; color: var(--c-texte); margin-block-start: 0.2rem; } .fiche__meta { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-texte-tres-doux); margin-block-start: 0.2rem; } .fiche__statut { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; padding: 0.2rem 0.5rem; border: 1px solid var(--c-trait-fort); border-radius: var(--r-sm); color: var(--c-texte-doux); } /* L'étape terminée est la seule à passer en plein contraste. */ .fiche__statut[data-statut="pret"] { background-color: var(--c-inverse-fond); color: var(--c-inverse-texte); border-color: var(--c-inverse-fond); } /* Jauge ------------------------------------------------------------------- */ .maquette__jauge { display: grid; gap: var(--e-2); padding-block-start: var(--e-3); border-block-start: 1px solid var(--c-trait); } .maquette__jauge-tete { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.05em; color: var(--c-texte-doux); } .maquette__piste { block-size: 3px; background-color: var(--c-trait); overflow: hidden; } .maquette__remplissage { block-size: 100%; inline-size: 68%; background-color: var(--c-texte); } /* Liste de fonctionnalités ------------------------------------------------ */ .fonctions { display: grid; gap: var(--e-5); margin-block-start: var(--e-6); } .fonction { display: grid; gap: var(--e-1); padding-block-start: var(--e-4); border-block-start: 1px solid var(--c-trait); } .fonction__titre { font-family: var(--f-display); font-size: var(--t-md); font-weight: 600; letter-spacing: -0.018em; } .fonction__texte { font-size: var(--t-sm); color: var(--c-texte-doux); line-height: 1.65; } /* -------------------------------------------------------------------------- Galerie de captures produit Emplacements en attente des vraies captures d'écran de Facile. Pour publier : remplacer chaque
par …. -------------------------------------------------------------------------- */ .galerie { display: grid; gap: var(--e-4); } @media (width >= 42rem) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .capture { display: grid; place-content: center; gap: var(--e-2); aspect-ratio: 9 / 16; padding: var(--e-4); text-align: center; border: 1px dashed var(--c-trait-fort); border-radius: var(--r-lg); color: var(--c-texte-tres-doux); } .capture__image { inline-size: 100%; border: 1px solid var(--c-trait); border-radius: var(--r-lg); } .capture__legende { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; } .capture__note { font-size: var(--t-sm); line-height: 1.5; } /* Bandeau d'accès au produit : web et mobile. */ .acces { display: grid; gap: var(--e-5); padding-block-start: var(--e-5); border-block-start: 1px solid var(--c-trait); } @media (width >= 52rem) { .acces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-7); } } .acces__titre { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-texte-tres-doux); margin-block-end: var(--e-3); } .acces__texte { font-size: var(--t-sm); color: var(--c-texte-doux); line-height: 1.65; margin-block-end: var(--e-4); max-inline-size: 44ch; } .acces__boutons { display: flex; flex-wrap: wrap; gap: var(--e-3); } /* ── components/_forms.css ────────────────────────────────────────────────── */ /* ========================================================================== TECO — Formulaires Champs à filet inférieur uniquement : moins de traits à l'écran, la même lisibilité. Structure déjà prête pour un branchement serveur. ========================================================================== */ .formulaire { display: grid; gap: var(--e-5); } .formulaire__grille { display: grid; gap: var(--e-5); } @media (width >= 42rem) { .formulaire__grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .champ { display: flex; flex-direction: column; gap: var(--e-2); } .champ__label { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-texte-doux); } .champ__requis { color: var(--c-texte); } .champ__saisie { inline-size: 100%; padding: 0.625rem 0; font-size: var(--t-base); color: var(--c-texte); background-color: transparent; border: 0; border-block-end: 1px solid var(--c-trait-fort); border-radius: 0; transition: border-color var(--tr-rapide); } .champ__saisie::placeholder { color: var(--c-texte-tres-doux); } .champ__saisie:hover { border-block-end-color: var(--c-texte-doux); } .champ__saisie:focus { outline: none; border-block-end-color: var(--c-texte); border-block-end-width: 2px; padding-block-end: calc(0.625rem - 1px); } textarea.champ__saisie { min-block-size: 7rem; resize: vertical; line-height: 1.6; } select.champ__saisie { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 0.35rem center, right 0.05rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-inline-end: 1.5rem; color: var(--c-texte); } .champ__aide { font-size: var(--t-sm); color: var(--c-texte-doux); } /* Case à cocher */ .champ--case { flex-direction: row; align-items: flex-start; gap: var(--e-3); } .champ--case input { inline-size: 1rem; block-size: 1rem; margin-block-start: 0.2rem; accent-color: var(--c-texte); flex-shrink: 0; } .champ--case label { font-size: var(--t-sm); color: var(--c-texte-doux); line-height: 1.55; } /* Zone de statut, remplie après envoi. */ .formulaire__statut { display: none; padding: var(--e-4); border: 1px solid var(--c-trait-fort); border-radius: var(--r-md); font-size: var(--t-sm); } .formulaire__statut[data-etat] { display: block; } .formulaire__statut[data-etat="erreur"] { border-color: var(--c-texte); border-inline-start-width: 3px; } /* Coordonnées ------------------------------------------------------------- */ .contact-info { display: grid; } .contact-info__ligne { display: grid; gap: var(--e-1); padding-block: var(--e-4); border-block-start: 1px solid var(--c-trait); } .contact-info__ligne:last-child { border-block-end: 1px solid var(--c-trait); } .contact-info__cle { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-texte-tres-doux); } .contact-info__valeur { font-size: var(--t-md); word-break: break-word; } .contact-info__valeur a { text-decoration: none; border-block-end: 1px solid var(--c-trait-fort); transition: border-color var(--tr-rapide); } .contact-info__valeur a:hover { border-block-end-color: var(--c-texte); } /* -------------------------------------------------------------------------- Champ téléphone international (retour n°7) Indicatif pays à gauche, numéro national à droite, sur un filet commun. -------------------------------------------------------------------------- */ /* Le champ téléphone porte deux contrôles : il occupe toute la largeur de la grille plutôt qu'une demi-colonne, sans quoi le numéro est tronqué. */ .formulaire__grille--2 > .champ--pleine, .formulaire__grille--2 > .champ--telephone { grid-column: 1 / -1; } .champ--telephone .champ__groupe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); align-items: end; } @media (width >= 34rem) { .champ--telephone .champ__groupe { grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); } } .champ__saisie--indicatif { font-family: var(--f-mono); font-size: var(--t-sm); } /* Un champ signalé en erreur par le script de validation. */ .champ__saisie[aria-invalid="true"] { border-block-end-color: var(--c-texte); border-block-end-width: 2px; padding-block-end: calc(0.625rem - 1px); } .champ__erreur { font-size: var(--t-sm); color: var(--c-texte); padding-inline-start: var(--e-3); border-inline-start: 2px solid var(--c-texte); } .champ__erreur:empty { display: none; } /* ── components/_cta.css ────────────────────────────────────────────────── */ /* ========================================================================== TECO — Appel à l'action de fin de page Un filet, un titre, un bouton. Rien d'autre. ========================================================================== */ .appel { display: grid; gap: var(--e-6); padding-block-start: var(--e-7); border-block-start: 1px solid var(--c-trait); align-items: end; } @media (width >= 62rem) { .appel { grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-8); } } .appel__titre { margin-block-start: var(--e-4); } .appel__texte { margin-block-start: var(--e-4); color: var(--c-texte-doux); max-inline-size: 46ch; } .appel__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); } /* ── pages/_accueil.css ────────────────────────────────────────────────── */ /* ========================================================================== TECO — Page d'accueil ========================================================================== */ /* Bloc « À notre sujet » : énoncé à gauche, développement à droite. */ .sujet { display: grid; gap: var(--e-6); } @media (width >= 62rem) { .sujet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-9); align-items: start; } } .sujet__enonce { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 500; line-height: 1.3; letter-spacing: -0.025em; color: var(--c-texte); } .sujet__texte { color: var(--c-texte-doux); line-height: 1.7; } .sujet__texte > p + p { margin-block-start: var(--e-4); } /* Vision / mission */ .cap { display: grid; gap: var(--e-5); } @media (width >= 52rem) { .cap { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Valeurs : sept entrées en colonnes de filets. */ .valeurs { display: grid; gap: var(--e-5); } @media (width >= 46rem) { .valeurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (width >= 68rem) { .valeurs { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ── pages/_facile.css ────────────────────────────────────────────────── */ /* ========================================================================== TECO — Page produit « Facile » ========================================================================== */ /* Parcours véhicule : la numérotation est légitime, l'ordre porte l'information (arrivée → diagnostic → intervention → restitution). */ .parcours { display: grid; gap: var(--e-6); counter-reset: etape; } @media (width >= 62rem) { .parcours { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-5); } } .etape { counter-increment: etape; display: grid; gap: var(--e-2); padding-block-start: var(--e-4); border-block-start: 1px solid var(--c-texte); } .etape::before { content: counter(etape, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--ls-mono); color: var(--c-texte-tres-doux); } .etape__titre { font-family: var(--f-display); font-size: var(--t-md); font-weight: 600; letter-spacing: -0.018em; } .etape__texte { font-size: var(--t-sm); color: var(--c-texte-doux); line-height: 1.65; } /* Publics servis */ .publics { display: grid; gap: var(--e-6); } @media (width >= 52rem) { .publics { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .public { display: grid; gap: var(--e-2); padding-block-start: var(--e-4); border-block-start: 1px solid var(--c-trait); } .public__cle { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-texte-tres-doux); } .public__titre { font-family: var(--f-display); font-size: var(--t-md); font-weight: 600; letter-spacing: -0.018em; } .public__texte { font-size: var(--t-sm); color: var(--c-texte-doux); line-height: 1.65; } /* ── Sections dynamiques ───────────────────────────────────────── Classes utilisées par templates/content/section/*.html.twig et absentes de la maquette statique, où ces blocs étaient écrits à la main. ─────────────────────────────────────────────────────────────── */ /* Enveloppe posée par sections.html.twig autour de chaque section. */ .section--register, .section--columns, .section--steps, .section--pair, .section--split, .section--gallery, .section--rich_text, .section--faq, .section--callout { padding-block: var(--e-section); background-color: var(--c-fond); } /* Alternance : une section sur deux prend le fond secondaire, ce qui remplace le choix manuel de la maquette statique. */ .section--register + .section--columns, .section--columns + .section--rich_text, .section--rich_text + .section--steps { background-color: var(--c-fond-alt); } /* Le bloc d'appel à l'action passe en négatif. */ /* Bloc d'appel à l'action, en négatif. Les valeurs sont écrites en dur et non dérivées des jetons inverses : redéfinir --c-inverse-fond sur l'élément qui l'utilise crée une référence circulaire, le navigateur invalide toute la chaîne et le fond reste blanc. C'est le même piège que sur .est-inverse. */ .section--callout { background-color: var(--n-950); color: var(--n-000); --c-fond: var(--n-950); --c-fond-alt: var(--n-900); --c-texte: var(--n-000); --c-texte-doux: var(--n-400); --c-texte-tres-doux: var(--n-500); --c-trait: rgb(255 255 255 / 13%); --c-trait-fort: rgb(255 255 255 / 26%); --c-inverse-fond: var(--n-000); --c-inverse-texte: var(--n-950); } /* Colonnes génériques : valeurs, articulations, coordonnées. */ .colonnes { display: grid; gap: var(--e-5); } @media (width >= 46rem) { .colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (width >= 68rem) { .colonnes { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Suite de notices ancrées (page Expertises). */ .notices > .notice:first-child { border-block-start: 0; } /* Questions fréquentes, en HTML natif : aucun JavaScript requis. */ .faq { border-block-start: 1px solid var(--c-trait); } .faq__item { border-block-end: 1px solid var(--c-trait); } .faq__question { cursor: pointer; padding-block: var(--e-4); font-family: var(--f-display); font-size: var(--t-md); font-weight: 600; letter-spacing: -0.018em; list-style: none; } .faq__question::-webkit-details-marker { display: none; } .faq__question::after { content: "+"; float: inline-end; font-family: var(--f-mono); color: var(--c-texte-doux); transition: rotate var(--tr-base); } .faq__item[open] .faq__question::after { content: "−"; } .faq__reponse { padding-block-end: var(--e-4); color: var(--c-texte-doux); line-height: 1.65; max-inline-size: 62ch; } /* Sélecteur de langue de l'en-tête (templates/core/front/shared/header). */ .lang-switch { display: flex; align-items: center; border: 1px solid var(--c-trait); border-radius: var(--r-md); overflow: hidden; } .lang-option { display: grid; place-items: center; min-inline-size: 2.125rem; block-size: 2.125rem; padding-inline: var(--e-2); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--c-texte-doux); text-decoration: none; transition: color var(--tr-rapide), background-color var(--tr-rapide); } .lang-option + .lang-option { border-inline-start: 1px solid var(--c-trait); } .lang-option:hover { color: var(--c-texte); background-color: var(--c-fond-alt); } .lang-option.is-active { color: var(--c-inverse-texte); background-color: var(--c-inverse-fond); } /* En-tête : classes du gabarit Twig réécrit. */ .site-header { position: sticky; inset-block-start: 0; z-index: 100; background-color: var(--c-fond); border-block-end: 1px solid var(--c-trait); } .logo-word { font-family: var(--f-display); font-size: 1.1875rem; font-weight: 600; letter-spacing: 0.01em; color: var(--c-texte); text-decoration: none; } .main-nav { display: flex; align-items: center; gap: var(--e-5); } .main-nav .nav-link { font-size: var(--t-sm); color: var(--c-texte-doux); text-decoration: none; transition: color var(--tr-rapide); } .main-nav .nav-link:hover { color: var(--c-texte); } .btn-contact { padding: 0.5rem 0.875rem; background-color: var(--c-fond-alt); color: var(--c-texte); border: 1px solid var(--c-trait); border-radius: var(--r-md); font-size: var(--t-sm); text-decoration: none; } .btn-contact:hover { background-color: var(--c-trait); } .nav-toggle { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 0; background: none; border-radius: var(--r-md); color: var(--c-texte); } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; inline-size: 1.0625rem; block-size: 1px; background: currentColor; } .nav-toggle-bars { position: relative; } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; inset-inline-start: 0; transition: transform var(--tr-base); } .nav-toggle-bars::before { transform: translateY(-5px); } .nav-toggle-bars::after { transform: translateY(5px); } /* Menu déplié en mobile. */ @media (width < 60rem) { .main-nav { position: fixed; inset: 4rem 0 auto; z-index: 200; flex-direction: column; align-items: stretch; gap: 0; padding: var(--e-2) var(--l-gouttiere) var(--e-6); background-color: var(--c-fond); border-block-end: 1px solid var(--c-trait); visibility: hidden; opacity: 0; transition: opacity var(--tr-base), visibility var(--tr-base); } .main-nav.est-ouvert { visibility: visible; opacity: 1; } .main-nav .nav-link { padding: var(--e-4) 0; font-size: var(--t-md); border-block-end: 1px solid var(--c-trait); } } @media (width >= 60rem) { .nav-toggle { display: none; } } /* Pied de page. */ .site-footer { padding-block: var(--e-8) var(--e-5); border-block-start: 1px solid var(--c-trait); background-color: var(--c-fond); } /* ══════════════════════════════════════════════════════════════════ Ajouts pour le rendu dynamique Classes employées par templates/teco/ et absentes de la maquette statique, où ces blocs étaient écrits à la main. La couche de compatibilité Bootstrap précédente a été retirée : les gabarits TECO n'utilisent plus aucune classe Bootstrap ni du thème bancaire. Elle reste consultable dans docs/heritage/. ══════════════════════════════════════════════════════════════════ */ /* Ossature de page. */ body { display: flex; flex-direction: column; min-block-size: 100svh; } main { flex: 1 0 auto; } /* Suite de notices ancrées (page Expertises). */ .notices > .notice:first-child { border-block-start: 0; } /* Questions fréquentes, en HTML natif. */ .faq { border-block-start: 1px solid var(--c-trait); } .faq__item { border-block-end: 1px solid var(--c-trait); } .faq__question { cursor: pointer; padding-block: var(--e-4); font-family: var(--f-display); font-size: var(--t-md); font-weight: 600; letter-spacing: -0.018em; list-style: none; } .faq__question::-webkit-details-marker { display: none; } .faq__question::after { content: "+"; float: inline-end; font-family: var(--f-mono); color: var(--c-texte-doux); } .faq__item[open] .faq__question::after { content: "\2212"; } .faq__reponse { padding-block-end: var(--e-4); color: var(--c-texte-doux); line-height: 1.65; max-inline-size: 62ch; } /* Le registre en mobile : la grille n'a que deux colonnes, tout ce qui n'est pas le numéro va en colonne 2 — sans quoi le texte est écrasé dans les 3,25rem réservés au numéro. */ @media (width < 62rem) { .registre__ligne > :not(.registre__num) { grid-column: 2; } }