/* * ============================================================================ * GIE-SCEVN — couche de design * ============================================================================ * * Ce fichier est ECRIT A LA MAIN et n'est JAMAIS purge : docs/purge-css.php * regenere style.css, plugins.css et aqua.css a partir des sources du theme, * et ecraserait toute modification qu'on y ferait. Tous nos choix de design * vivent donc ici, et cette feuille est chargee APRES celles du theme. * * Trois defauts mesures sur le theme d'origine, corriges ci-dessous : * * 1. Aucune police n'etait appliquee. Le theme declare * --bs-font-sans-serif: "Manrope" sans jamais la charger, et la police * THICCCBOI livree avec lui n'est referencee nulle part. Le site tombait * donc sur la police par defaut du navigateur. * * 2. Tout etait 20 % trop petit : --bs-body-font-size valait 0.8rem, soit * 12,8 px de texte courant, et .lead 14,4 px — un chapo a peine plus gros * que le corps, hierarchie invisible. * * 3. Les 28 sections du site partageaient le meme py-14 py-md-16 : aucune * respiration differenciee, d'ou un defilement plat. * ============================================================================ */ /* ---------------------------------------------------------------- Polices */ /* * Auto-hebergees volontairement. La politique de confidentialite affirme que * Cloudflare est le SEUL service tiers du site : passer par Google Fonts la * rendrait fausse, et ajouterait une requete bloquante vers un domaine * externe — penalisant sur les connexions lentes. * * Sous-ensemble latin uniquement : il couvre l'integralite des caracteres * employes par le site, oe et Oe compris. Le latin-ext aurait coute 91 Ko * de plus pour rien. */ @font-face { font-family: 'Lexend'; src: url('../fonts/lexend/lexend-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3/source-sans-3-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* * PISTE 2 — appairage editorial, en reserve. * Public Sans est la police du gouvernement americain (US Web Design System) : * concue pour l'administration, tres lisible en petit corps. Libre Bodoni * apporte un contraste franc sur les titres. * * Pour revenir a la piste 1 (Lexend + Source Sans 3), voir --gie-police-* * plus bas : deux lignes a changer, les quatre fichiers restent sur le disque. */ @font-face { font-family: 'Libre Bodoni'; src: url('../fonts/libre-bodoni/libre-bodoni-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Public Sans'; src: url('../fonts/public-sans/public-sans-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ----------------------------------------------------------------- Tokens */ :root { /* * Couleur. Le theme etait en #4751C7 (bleu-violet) alors que le logo est * en #1F2F8E (marine) : deux bleus concurrents. On ancre tout sur le logo. */ --gie-marine: #1F2F8E; --gie-marine-fonce:#16225F; /* survol, etats actifs */ --gie-marine-clair:#4A5AC0; --gie-marine-voile: #EEF1FB; /* aplats de section */ /* Encre. Titres presque noirs, texte courant a 7,5:1 sur blanc. */ --gie-encre: #16203A; --gie-texte: #4A5568; --gie-discret: #5D6675; --gie-filet: #E2E6F0; /* * ------------------------------------------------------------------ * FACTEUR D'ECHELLE — une seule valeur pour toute la taille du site * ------------------------------------------------------------------ * 1.00 = valeurs de reference ci-dessous. * 0.90 = tout est 10 % plus petit, typographie ET respiration. * * Le theme d'origine tournait a l'equivalent de 0,80 : du texte * courant a 12,8 px, trop petit pour de la lecture soutenue. On ne * redescend pas en dessous de 0,85 sans y regarder de pres. */ --gie-echelle: 0.90; /* Reference a 1.00 : 48 / 34 / 24 / 18 / 16 / 14 px */ --gie-t-hero: calc(3rem * var(--gie-echelle)); --gie-t-section: calc(2.125rem * var(--gie-echelle)); --gie-t-sous: calc(1.5rem * var(--gie-echelle)); --gie-t-titre: calc(1.125rem * var(--gie-echelle)); --gie-t-chapo: calc(1.125rem * var(--gie-echelle)); --gie-t-corps: calc(1rem * var(--gie-echelle)); --gie-t-petit: calc(0.875rem * var(--gie-echelle)); /* Rythme vertical : trois cadences au lieu d'une seule. */ /* Hauteur des deux barres de l'en-tete. */ --gie-bandeau-h: calc(1.9rem * var(--gie-echelle)); /* bandeau de contact */ --gie-logo-h: calc(2rem * var(--gie-echelle)); /* logo dans la navbar */ --gie-air-hero: calc(6rem * var(--gie-echelle)); --gie-air-entete: calc(4rem * var(--gie-echelle)); --gie-air-large: calc(4.5rem * var(--gie-echelle)); --gie-air-serre: calc(3rem * var(--gie-echelle)); /* * Appairage typographique. Deux lignes a echanger pour changer de piste : * piste 1 — 'Lexend' / 'Source Sans 3' (geometrique, ACTIF) * piste 2 — 'Libre Bodoni' / 'Public Sans' (editorial) * Les quatre fichiers restent sur le disque : basculer ne demande que * d'echanger ces deux lignes et les deux du layout. */ --gie-police-titres: 'Lexend', system-ui, sans-serif; --gie-police-texte: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Variables Bootstrap reprises a notre compte. */ --bs-body-font-family: var(--gie-police-texte); --bs-body-font-size: var(--gie-t-corps); --bs-body-font-weight: 400; --bs-body-line-height: 1.65; --bs-body-color: var(--gie-texte); --bs-primary: var(--gie-marine); --bs-link-color: var(--gie-marine); --bs-link-hover-color: var(--gie-marine-fonce); --bs-border-color: var(--gie-filet); } /* ----------------------------------------------------------- Typographie */ body { font-family: var(--bs-body-font-family); font-size: var(--gie-t-corps); font-weight: 400; line-height: 1.65; color: var(--gie-texte); -webkit-font-smoothing: antialiased; } /* Lexend pour les titres : geometrique, lisible, sans effet de mode. */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .navbar-nav .nav-link, .btn { font-family: var(--gie-police-titres); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { color: var(--gie-encre); line-height: 1.15; letter-spacing: -0.015em; } /* Le theme figeait ces tailles en calc(rem + vw) : on reprend la main. */ .display-1, h1, .h1 { font-size: clamp(calc(1.8rem * var(--gie-echelle)), 1.3rem + 2vw, var(--gie-t-hero)); font-weight: 700; } .display-2 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); font-weight: 700; } .display-3 { font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.75rem); font-weight: 700; } .display-4, h2, .h2 { font-size: clamp(calc(1.45rem * var(--gie-echelle)), 1.1rem + 1.3vw, var(--gie-t-section)); font-weight: 700; } .display-5 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2rem); font-weight: 600; } .display-6, h3, .h3 { font-size: clamp(calc(1.2rem * var(--gie-echelle)), 1rem + 0.55vw, var(--gie-t-sous)); font-weight: 600; } h4, .h4 { font-size: var(--gie-t-titre); font-weight: 600; } h5, .h5 { font-size: 1.125rem; font-weight: 600; } h6, .h6 { font-size: var(--gie-t-corps); font-weight: 600; } /* * Un chapo doit se distinguer du corps : il valait 14,4 px contre 12,8. * * On ne fixe SURTOUT PAS sa couleur : le chapo du hero se pose sur une photo * sombre et doit heriter du blanc de la section. Lui imposer le gris du corps * le ramenait a 1,41:1 — illisible. */ .lead { font-size: var(--gie-t-chapo); font-weight: 400; line-height: 1.6; } /* * Utilitaires de taille du theme. Ils portent tous un !important et * echappaient donc au facteur d'echelle : le hero restait a 58 px malgre * un display-1 calcule a 43. On les rattache a l'echelle. */ .fs-14 { font-size: calc(0.8125rem * var(--gie-echelle)) !important; } .fs-15 { font-size: var(--gie-t-petit) !important; } .fs-22 { font-size: calc(1.25rem * var(--gie-echelle)) !important; } .fs-24 { font-size: calc(1.375rem * var(--gie-echelle)) !important; } .fs-30 { font-size: calc(1.625rem * var(--gie-echelle)) !important; } .fs-56 { font-size: var(--gie-t-hero) !important; } /* Confort de lecture : au-dela de 75 caracteres, l'oeil perd sa ligne. */ .post-content p, .container p:not(.lead):not(.mb-0) { max-width: 68ch; } /* --------------------------------------------------------------- Couleur */ .text-primary { color: var(--gie-marine) !important; } .bg-primary { background-color: var(--gie-marine) !important; } .bg-soft-primary { background-color: var(--gie-marine-voile) !important; } .link-dark:hover, a { color: var(--gie-marine); } a:hover { color: var(--gie-marine-fonce); } .btn-primary { background-color: var(--gie-marine); border-color: var(--gie-marine); color: #fff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--gie-marine-fonce) !important; border-color: var(--gie-marine-fonce) !important; } .btn-soft-primary { background-color: var(--gie-marine-voile); color: var(--gie-marine); } .btn-soft-primary:hover { background-color: var(--gie-marine); color: #fff; } /* Les pastilles d'icone reprennent le marine plutot que le bleu-violet. */ .icon.btn-soft-primary { color: var(--gie-marine); } /* ---------------------------------------------------------------- Rythme */ /* * Trois cadences la ou le theme n'en avait qu'une. Les classes s'appliquent * sur la section, en complement des utilitaires Bootstrap deja en place. */ /* * Quatre cadences la ou le theme n'en avait qu'une : les 28 sections du site * partageaient toutes py-14 py-md-16, d'ou un defilement sans relief. * hero — accueil uniquement * entete — bandeau de titre des pages interieures * large — sections de contenu principal * serre — bandeaux d'appel, sections de cloture */ .gie-air-hero > .container { padding-top: var(--gie-air-hero); padding-bottom: var(--gie-air-hero); } .gie-air-entete > .container { padding-top: var(--gie-air-entete); padding-bottom: calc(var(--gie-air-entete) * .75); } .gie-air-large > .container { padding-top: var(--gie-air-large); padding-bottom: var(--gie-air-large); } .gie-air-serre > .container { padding-top: var(--gie-air-serre); padding-bottom: var(--gie-air-serre); } @media (max-width: 767.98px) { :root { --gie-air-hero: 4.5rem; --gie-air-large: 3.5rem; --gie-air-serre: 2.5rem; } } /* Filet de separation discret entre deux sections de meme fond. */ .gie-filet-haut { border-top: 1px solid var(--gie-filet); } /* ---------------------------------------------------------------- Cartes */ .card { border: 1px solid var(--gie-filet); border-radius: 0.75rem; box-shadow: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .card:hover { border-color: var(--gie-marine-clair); transform: translateY(-2px); box-shadow: 0 0.75rem 2rem rgba(22, 34, 95, .08); } .card-img-top, .card-img-top img { border-radius: 0.75rem 0.75rem 0 0; } /* ------------------------------------------------------- Accessibilite */ /* Le theme n'affichait aucun anneau de focus lisible au clavier. */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--gie-marine-clair); outline-offset: 2px; box-shadow: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* * Derniers restes du bleu-violet du theme (#4751C7). aqua.css les pose sur * des selecteurs tres specifiques : on les reprend un a un plutot que * d'arroser le site de !important. */ .progress-wrap svg.progress-circle path { stroke: var(--gie-marine); } [class*='offcanvas-'].text-inverse a:not(.btn):not([class*='link-']):hover, .text-inverse a:not(.btn):not([class*='link-']):hover { color: var(--gie-marine-clair); } blockquote { border-color: var(--gie-marine); } @media (min-width: 992px) { .navbar-expand-lg.navbar-light .navbar-nav .dropdown:not(.dropdown-submenu) > .dropdown-toggle::after { color: var(--gie-marine); } } /* .text-primary porte un !important dans aqua.css : il faut le meme ici. */ .link-dark:hover, .text-primary, .list-unstyled li a.active { color: var(--gie-marine) !important; } /* Barre collante : le fond blanc translucide du theme, mais notre marine. */ .navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) { background-color: var(--gie-marine); border-color: var(--gie-marine); } /* -------------------------------------------------------- Etat de saisie */ .form-control:focus { border-color: var(--gie-marine-clair); box-shadow: 0 0 0 0.2rem rgba(31, 47, 142, .12); } /* ====================================================================== */ /* Contraste */ /* ====================================================================== */ /* * Mesures WCAG relevees sur le theme avant correction : * * .text-muted (#aab0bc) sur blanc ............... 2,18:1 ECHEC * .text-muted (#aab0bc) sur le voile bleu ....... 1,93:1 ECHEC * survol des liens du pied (#3f78e0) sur #222 ... 3,77:1 insuffisant * * Le seuil WCAG AA est de 4,5:1 pour du texte courant. Le gris du theme * servait aux sur-titres de section et aux mentions legales : deux endroits * ou le texte est deja petit. Il disparaissait litteralement du fond. */ /* #5D6675 : 5,80:1 sur blanc, 5,14:1 sur le voile bleu. */ .text-muted { color: var(--gie-discret) !important; } /* * Sur-titres de section (« Nos services », « En images »). Plutot que de les * laisser en gris, on les passe au marine : 11,32:1, et ils rattachent chaque * section a la charte au lieu de s'effacer. */ .fs-15.text-uppercase, .fs-14.text-uppercase { color: var(--gie-marine) !important; font-family: var(--gie-police-titres); font-weight: 600; letter-spacing: .08em; } /* Pied de page : #7FA9EF donne 6,69:1 sur le #222 du fond, contre 3,77:1. */ .text-inverse a:not(.btn):not([class*='link-']):hover, [class*='offcanvas-'].text-inverse a:not(.btn):not([class*='link-']):hover { color: #7FA9EF; } /* * Texte courant du pied de page. Le theme le posait a #cacaca : correct sur * le fond sombre (9,71:1), on le conserve, mais on remonte les liens au blanc * pur pour qu'ils se distinguent du texte qui les entoure. */ .text-inverse a:not(.btn):not([class*='link-']) { color: #e8eaee; } /* ====================================================================== */ /* Sections sur photo : ne rien imposer */ /* ====================================================================== */ /* * Le hero, les bandeaux d'appel et le fil d'Ariane se posent sur une photo * assombrie. Toute couleur fixee ailleurs dans cette feuille doit y ceder la * place a l'heritage, sinon le texte disparait. * * Deux regressions reelles corrigees ici : * .lead -> gris #4a5568 sur photo = 1,41:1 * .fs-15.text-uppercase -> marine force sur « Nos realisations » */ .text-white .lead, .text-white p, .text-white .text-muted, .bg-overlay.text-white .lead { color: inherit !important; } .text-white .fs-15.text-uppercase, .text-white .fs-14.text-uppercase { color: inherit !important; opacity: .85; } /* Le pied de page est sombre lui aussi : meme regle. */ .text-inverse .fs-15.text-uppercase, .text-inverse .text-muted { color: inherit !important; } /* ====================================================================== */ /* En-tete : hauteur des deux barres */ /* ====================================================================== */ /* * Le bandeau de contact et la barre de navigation occupaient ensemble * pres de 120 px avant le moindre contenu. Deux causes : des icones a * 18 px dans une bande deja padee, et .navbar-brand a 1,2 rem de padding * haut et bas autour d'un logo de 40 px. * * Les deux hauteurs suivent le facteur d'echelle global. */ .gie-bandeau-contact > .container { min-height: var(--gie-bandeau-h); padding-top: calc(var(--gie-bandeau-h) * .18); padding-bottom: calc(var(--gie-bandeau-h) * .18); align-items: center; } .gie-bandeau-contact .icon { font-size: calc(1rem * var(--gie-echelle)); line-height: 1; display: inline-flex; align-items: center; } .gie-bandeau-contact address, .gie-bandeau-contact p { line-height: 1.4; } /* Barre de navigation : padding du logo divise par deux. */ .navbar-expand-lg .navbar-brand { padding-top: calc(0.55rem * var(--gie-echelle)); padding-bottom: calc(0.55rem * var(--gie-echelle)); } .navbar-brand img { height: var(--gie-logo-h); width: auto; } .navbar-expand-lg.transparent:not(.fixed) { padding-top: 0; } /* La barre clonee (apres defilement) reprend les memes proportions. */ .navbar-clone .navbar-brand img { height: calc(var(--gie-logo-h) * .9); } /* ====================================================================== */ /* Photos de faible definition */ /* ====================================================================== */ /* * Les photos du GIE ont ete agrandies x4 depuis des copies de 250 a 375 px : * elles font desormais 1000 a 2400 px. La borne d'affichage a 420 px qui * figurait ici n'a plus lieu d'etre — chaque emplacement declare sa propre * largeur via l'attribut `sizes` du partiel partials/site/photo. */ /* Vignettes de service sur l'accueil : deja proches du 1:1, on les protege d'un futur elargissement de colonne. */ .card-img-top img { max-width: 100%; } /* ====================================================================== */ /* Fil d'Ariane et etat actif de la navigation */ /* ====================================================================== */ /* * Le theme ne repasse en blanc que les LIENS du fil d'Ariane et son element * actif : .breadcrumb.text-white .breadcrumb-item a et .active. Un maillon * intermediaire sans page dediee — « Services » sur les pages service — * n'est ni l'un ni l'autre. Il restait donc au #60697b de .breadcrumb-item, * soit 1,35:1 sur la partie la plus claire de la photo. Invisible. */ .breadcrumb.text-white .breadcrumb-item { color: #fff; } /* La page courante ressort par la graisse, pas par la couleur : sur une photo, jouer sur la couleur coute toujours du contraste. */ .breadcrumb.text-white .breadcrumb-item.active { font-weight: 600; } /* * Etat actif dans les menus deroulants. Le theme le prevoit mais rien ne le * declenchait : aucune entree ne portait la classe. Sur une page service, le * menu n'indiquait donc pas quel service on consultait. */ .dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item[aria-current='page'] { color: var(--gie-marine) !important; font-weight: 600; background-color: transparent; } /* * Le panneau .offcanvas-nav contient le menu deroulant a TOUTES les tailles : * sur grand ecran il est simplement affiche en ligne au lieu d'etre un tiroir. * Cibler .offcanvas-nav sans borne mettait donc l'entree active en blanc sur * le fond blanc du menu de bureau — elle disparaissait purement et simplement. * * Le theme lui-meme ne passe ses entrees en blanc que sous 992 px * (.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item). On * s'aligne exactement sur ce point de rupture. */ @media (max-width: 991.98px) { .offcanvas-nav .dropdown-menu .dropdown-item.active, .offcanvas-nav .dropdown-menu .dropdown-item[aria-current='page'] { color: #fff !important; } } /* Repere discret devant l'entree courante. */ .dropdown-menu .dropdown-item.active::before { content: ''; display: inline-block; width: .35rem; height: .35rem; margin-right: .45rem; vertical-align: middle; border-radius: 50%; background: currentColor; } /* --------------------------------------------------------------------------- Indicateur d'envoi — formulaire de contact --------------------------------------------------------------------------- Bootstrap fournit .spinner-border, mais la purge CSS l'a retire : aucune page analysee ne le rendait. On le redefinit ici, dans la feuille jamais purgee. `currentColor` le fait heriter de la couleur du bouton, donc lisible quel que soit l'etat de ce dernier. -------------------------------------------------------------------------- */ .gie-spinner { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gie-rotation 0.75s linear infinite; } @keyframes gie-rotation { to { transform: rotate(360deg); } } /* Mouvement reduit : on ralentit plutot que de supprimer — l'utilisateur doit garder un signe que quelque chose se passe. */ @media (prefers-reduced-motion: reduce) { .gie-spinner { animation-duration: 2.5s; } }