/* ========================================================================== K.R HOMÉNERGIE — Feuille de styles unique Site statique HTML/CSS/JS vanilla — mobile-first -------------------------------------------------------------------------- DIRECTION ARTISTIQUE — « grille suisse éditoriale, tenue chaude » Quatre règles structurent tout le fichier. Les enfreindre ramène le site vers l'esthétique de gabarit dont il cherche à sortir : 1. AUCUN ARRONDI. Il n'existe pas de --radius. Angles vifs partout. 2. AUCUNE OMBRE PORTÉE. La profondeur se fait avec des filets de 1px et des aplats, jamais avec du flou. 3. RIEN N'EST CENTRÉ par défaut. Mise en page asymétrique, sur une grille que l'on laisse voir. 4. LES FONDS SONT CHAUDS. Papier crème, sable, filets beige — jamais de blanc pur ni de gris bleuté. C'est ce qui empêche la rigueur de la grille de virer au froid. Survols par INVERSION (l'aplat et le texte échangent leurs couleurs), jamais par élévation. PAS DE PHOTOGRAPHIE POUR L'INSTANT. Là où viendront les images, le site pose des PANNEAUX GRAPHIQUES (section 05) : aplat de couleur + trame dessinée en CSS. Ils se suffisent à eux-mêmes et se remplacent un par un par de vraies photos — voir le mode d'emploi en tête de la section 05. -------------------------------------------------------------------------- SOMMAIRE 01. Variables et UNIVERS DE PAGE 02. Reset & bases 03. Typographie 04. Grille, bandes et filets 05. Panneaux graphiques (à la place des photos) 06. Boutons et liens 07. En-tête, navigation, progression de lecture 08. Barre d'action mobile 09. Hero 10. Index des prestations 11. Arguments 12. Bandeau marques 13. Subventions 14. Processus 15. Réalisations (préparé, non affiché en v1) 16. Formulaire 17. Pages intérieures et dispositions particulières 18. Pied de page 19. Mouvement : révélations et transitions 20. Accessibilité & mouvement réduit ========================================================================== */ /* ========================================================================== 01. VARIABLES ET UNIVERS DE PAGE -------------------------------------------------------------------------- Deux couches de couleur. • LA MARQUE, identique sur tout le site : le bleu nuit --ink, le vert --accent / --accent-ink, les papiers chauds. C'est ce qui fait tenir l'ensemble comme un seul site. • L'UNIVERS DE PAGE, porté par quatre variables --amb-* redéfinies selon l'attribut data-univers du . Elles ne colorent que l'ambiance : aplats sombres, bandes claires, trames et filets d'accent. Les boutons d'action restent verts partout — le repère d'action ne change jamais. Pour créer un univers : ajouter un bloc body[data-univers="…"] ci-dessous et vérifier les quatre contrastes (blanc sur --amb-deep, --amb-light sur --amb-deep, --amb sur --amb-wash, --ink sur --amb-wash). ========================================================================== */ :root { /* ---------- OPTION 1 — Bleu profond + vert énergie (ACTIVE) ------------ */ --ink: #0F2B46; /* bleu nuit : titres, aplats, filets forts */ --ink-deep: #081726; --ink-soft: #4E5A66; /* texte secondaire (6,8:1 sur papier) */ --paper: #FCFAF6; /* papier crème — jamais de blanc pur */ --paper-alt: #F4EFE6; /* sable */ --paper-tint: #EBE3D6; /* sable soutenu */ --rule: #DCD3C4; /* filets beige (et non gris) */ --accent: #3DA35D; /* vert du brief : trames, signaux */ --accent-ink: #2A733F; /* vert de texte et de bouton (AA 5,1:1) */ --accent-deep: #1F5A31; /* survol */ --accent-light: #9BDCB2; --sand-light: #E4D9C4; --on-ink: #FFFFFF; --on-ink-soft: rgba(255, 255, 255, 0.76); --rule-on-ink: rgba(255, 255, 255, 0.22); /* Compatibilité : anciens noms, au cas où un fragment y ferait référence */ --color-primary: var(--ink); --color-accent: var(--accent); --color-accent-strong: var(--accent-ink); --color-bg: var(--paper); --color-text: var(--ink); /* ---------- OPTION 2 — Bleu pétrole + orange soleil -------------------- Décommenter ce bloc ET commenter les valeurs de l'OPTION 1. --ink: #175873; --ink-deep: #0C3A4D; --ink-soft: #4C5C66; --paper: #FCFAF8; --paper-alt: #F4EFE8; --paper-tint: #EBE2D6; --rule: #DCD3C6; --accent: #F28C28; --accent-ink: #A85708; --accent-deep: #8A4705; --accent-light: #FFC489; --sand-light: #F0DCC0; */ /* ---------- OPTION 3 — Anthracite + vert vif --------------------------- Décommenter ce bloc ET commenter les valeurs de l'OPTION 1. --ink: #2B2B2B; --ink-deep: #141414; --ink-soft: #56544E; --paper: #FBFAF7; --paper-alt: #F2F0E9; --paper-tint: #E7E4DA; --rule: #D8D4C8; --accent: #8BC34A; --accent-ink: #4A741C; --accent-deep: #395A14; --accent-light: #C5E39A; --sand-light: #E6E0CE; */ /* ---------- Typographie ------------------------------------------------ Archivo : grotesque à largeur variable. L'axe wdth resserre les grands titres sans recourir à une seconde fonte. */ --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --fs-display: clamp(2.5rem, 6.2vw, 5rem); --fs-mega: clamp(3rem, 11vw, 9rem); /* titres pleine largeur */ --fs-h2: clamp(1.875rem, 3.8vw, 3.125rem); --fs-h3: clamp(1.25rem, 1.6vw, 1.5rem); --fs-h4: clamp(1.0625rem, 1vw, 1.1875rem); --fs-lead: clamp(1.125rem, 1.25vw, 1.375rem); --fs-body: 1.0625rem; --fs-sm: 1rem; --fs-xs: 0.875rem; --fs-label: 0.75rem; /* ---------- Espacements ------------------------------------------------ */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.75rem; --sp-8: 4rem; --sp-9: 6rem; --band-y: clamp(3.5rem, 7vw, 7rem); /* ---------- Structure --------------------------------------------------- */ --wrap: 1440px; --gutter: clamp(1.25rem, 4.5vw, 4rem); --measure: 62ch; --header-h: 72px; --t: 200ms cubic-bezier(0.2, 0, 0.1, 1); --t-slow: 620ms cubic-bezier(0.16, 1, 0.3, 1); } /* ---- UNIVERS PAR DÉFAUT (accueil, contact, mentions légales) ------------ */ body { --amb-deep: #0F2B46; /* aplat sombre de la page */ --amb: #2A733F; /* accent d'ambiance */ --amb-light: #9BDCB2; /* accent clair sur l'aplat */ --amb-wash: #F4EFE6; /* bande claire alternée */ } /* ---- Pompes à chaleur : terre cuite, registre de la chaleur ------------- */ body[data-univers="pac"] { --amb-deep: #45231A; --amb: #9E4620; --amb-light: #F0B99A; --amb-wash: #F8EDE5; } /* ---- Photovoltaïque : or et olive profond, registre solaire ------------- */ body[data-univers="pv"] { --amb-deep: #33290E; --amb: #7E6110; --amb-light: #EDC96A; --amb-wash: #F8F1DC; } /* ---- Sanitaire : sarcelle, registre de l'eau --------------------------- */ body[data-univers="sanitaire"] { --amb-deep: #123F47; --amb: #14606E; --amb-light: #9AD4DC; --amb-wash: #EAF2F3; } /* ---- Subventions : vert forêt, registre du vivant ---------------------- */ body[data-univers="subventions"] { --amb-deep: #1C4634; --amb: #2A733F; --amb-light: #9BDCB2; --amb-wash: #EDF2EA; } /* ---- À propos : terre et sable, registre humain ------------------------ */ body[data-univers="apropos"] { --amb-deep: #3A3226; --amb: #75592C; --amb-light: #E0CFA8; --amb-wash: #F5F0E4; } /* ========================================================================== 02. RESET & BASES ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: 1.65; color: var(--ink); background-color: var(--paper); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* 60 px pour la barre d'appel, plus la zone réservée par le système sur les iPhone à encoche (0 ailleurs). Sans viewport-fit=cover dans la balise viewport, env() renvoie 0 et la réserve ne s'applique pas. */ @media (max-width: 767px) { body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } } img, svg, picture { display: block; max-width: 100%; height: auto; } a { color: inherit; } ul, ol { padding-left: 1.1rem; } ::selection { background-color: var(--ink); color: var(--on-ink); } /* Aucun média ne doit pouvoir élargir la page. `overflow-x: hidden` sur masquerait le symptôme ; cette règle traite la cause. */ img, svg, video, iframe, table, pre { max-width: 100%; } /* ========================================================================== 03. TYPOGRAPHIE ========================================================================== */ h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; text-wrap: balance; /* « photovoltaïque » en très grande taille dépasse la largeur d'un écran de 320 px : on autorise la césure plutôt que le débordement. hyphens s'appuie sur lang="fr-CH", déclaré sur . */ overflow-wrap: break-word; hyphens: auto; } .display, h1 { font-size: var(--fs-display); font-stretch: 96%; line-height: 1.04; letter-spacing: -0.025em; } /* Titre pleine largeur, employé en ouverture de page intérieure */ .mega { font-size: var(--fs-mega); overflow-wrap: break-word; hyphens: auto; font-stretch: 88%; font-weight: 700; line-height: 0.92; letter-spacing: -0.04em; text-wrap: balance; } h2 { font-size: var(--fs-h2); font-stretch: 98%; line-height: 1.1; letter-spacing: -0.022em; } h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.012em; font-weight: 600; } h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; } p { margin: 0 0 1em; max-width: var(--measure); } p:last-child { margin-bottom: 0; } strong { font-weight: 600; } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); max-width: 46ch; } .muted { color: var(--ink-soft); } .label { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.2; } .label--accent { color: var(--amb); } .label--on-ink { color: var(--amb-light); } /* Numéro d'ordre : 01, 02, 03… */ .index { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; color: var(--amb); line-height: 1.2; } .index--on-ink { color: var(--amb-light); } /* Citation en grand, pour aérer une page dense */ .pull { margin: 0; font-size: clamp(1.375rem, 2.6vw, 2rem); font-weight: 600; font-stretch: 98%; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); max-width: 24ch; } .pull::before { content: ""; display: block; width: 2.5rem; height: 3px; margin-bottom: var(--sp-5); background-color: var(--amb); } /* ========================================================================== 04. GRILLE, BANDES ET FILETS ========================================================================== */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; /* En paysage sur iPhone, l'encoche mord sur le bord de l'écran : la gouttière s'élargit d'autant, et ne change pas ailleurs. */ padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px)); } .wrap--narrow { max-width: 980px; } .band { padding-block: var(--band-y); border-top: 1px solid var(--rule); } .band--flush { padding-block: 0; } .band--tight { padding-block: clamp(2rem, 3.5vw, 3rem); } .band--alt { background-color: var(--amb-wash); } /* Aplat sombre — prend la teinte de l'univers de la page */ .band--deep { background-color: var(--amb-deep); color: var(--on-ink-soft); border-top-color: var(--amb-deep); } .band--deep h2, .band--deep h3, .band--deep h4, .band--deep strong { color: var(--on-ink); } .band--deep .label { color: var(--amb-light); } .band--deep a:not(.btn) { color: var(--amb-light); } .band--deep a:not(.btn):hover { color: var(--on-ink); } /* Bleu nuit imposé, quel que soit l'univers : sert aux points de bascule qui doivent rester identiques partout (appel à l'action de fin de page). */ .band--ink { background-color: var(--ink); border-top-color: var(--ink); } /* ---- En-tête de bande -------------------------------------------------- */ .band__head { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--rule); } .band--deep .band__head { border-bottom-color: var(--rule-on-ink); } @media (min-width: 900px) { .band__head { grid-template-columns: 12.5rem 1fr; gap: var(--sp-6); align-items: end; } } .band__meta { display: flex; align-items: baseline; gap: var(--sp-3); } @media (min-width: 900px) { .band__meta { flex-direction: column; gap: var(--sp-2); padding-bottom: 0.35rem; } } .band__intro { margin-top: var(--sp-4); max-width: 52ch; color: var(--ink-soft); } .band--deep .band__intro { color: var(--on-ink-soft); } /* ---- Colonnes séparées par des filets ---------------------------------- */ .cols { display: grid; border-top: 1px solid var(--rule); } .cols > * { padding: var(--sp-5) 0; border-bottom: 1px solid var(--rule); } @media (min-width: 700px) { .cols--2 { grid-template-columns: repeat(2, 1fr); } .cols--2 > * { padding: var(--sp-6) var(--sp-6) var(--sp-6) 0; } .cols--2 > * + * { padding-left: var(--sp-6); border-left: 1px solid var(--rule); } } @media (min-width: 900px) { .cols--3 { grid-template-columns: repeat(3, 1fr); } .cols--4 { grid-template-columns: repeat(4, 1fr); } .cols--3 > *, .cols--4 > * { padding: var(--sp-6) var(--sp-5) var(--sp-6) 0; } .cols--3 > * + *, .cols--4 > * + * { padding-left: var(--sp-5); border-left: 1px solid var(--rule); } } /* ---- Palier tablette --------------------------------------------------- Entre 700 et 900 px, les grilles de trois et quatre colonnes passaient directement à une seule : sur un iPad en portrait, près de 700 px de large restaient inutilisés sous chaque bloc. Deux colonnes y tiennent confortablement (environ 330 px chacune). */ @media (min-width: 700px) and (max-width: 899px) { .cols--3, .cols--4 { grid-template-columns: repeat(2, 1fr); } .cols--3 > *, .cols--4 > * { padding: var(--sp-6) var(--sp-5) var(--sp-6) 0; border-left: 0; } /* Le filet vertical ne sépare que la seconde colonne de chaque rangée */ .cols--3 > *:nth-child(even), .cols--4 > *:nth-child(even) { padding-left: var(--sp-5); border-left: 1px solid var(--rule); } .band--deep .cols--3 > *:nth-child(even), .band--deep .cols--4 > *:nth-child(even) { border-left-color: var(--rule-on-ink); } } .band--deep .cols, .band--deep .cols > * { border-color: var(--rule-on-ink); } /* Colonnes décalées verticalement — casse l'alignement au cordeau */ @media (min-width: 900px) { .cols--stagger > *:nth-child(even) { transform: translateY(2.5rem); } .cols--stagger { padding-bottom: 2.5rem; } } /* ---- Duos asymétriques -------------------------------------------------- */ .duo { display: grid; gap: var(--sp-7); align-items: start; } @media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } .duo--wide-left { grid-template-columns: 1.25fr 1fr; } .duo--wide-right { grid-template-columns: 1fr 1.25fr; } .duo--aside { grid-template-columns: 18rem 1fr; gap: var(--sp-9); } /* Duo inversé : l'image passe à gauche, le texte à droite — uniquement à l'écran large. L'ordre du HTML reste texte puis image, si bien qu'en colonne (mobile, lecteur d'écran) on lit toujours le texte d'abord. */ .duo--mirror > *:first-child { order: 2; } .duo--mirror > *:last-child { order: 1; } /* Les deux colonnes démarrent à la même hauteur. Avec un centrage vertical, une image plus courte que le texte se retrouvait décrochée vers le bas, laissant un grand vide au-dessus d'elle. */ .duo--mirror { align-items: start; /* La colonne de gauche accueille l'image : on lui donne l'avantage. À largeur égale, une photographie 16:9 paraît minuscule à côté d'un bloc de texte qui, lui, se déploie en hauteur. */ grid-template-columns: 1.35fr 1fr; } .duo--mirror .figure { align-self: start; } .duo--center { align-items: center; } } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 0; z-index: 200; padding: var(--sp-3) var(--sp-5); background: var(--ink); color: var(--on-ink); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; } .skip-link:focus { top: 0; } /* ========================================================================== 05. PANNEAUX GRAPHIQUES — à la place des photographies -------------------------------------------------------------------------- Aucune photo n'est disponible pour l'instant. Plutôt que des cadres gris en attente, le site pose des aplats trames en CSS : ils sont finis, ils tiennent debout seuls, et ils portent la couleur de l'univers de page. POUR PASSER À DE VRAIES PHOTOS, une par une :
devient Description en français La classe .plate porte déjà le format et le recadrage ; le reste du HTML ne bouge pas. Les trames sont purement décoratives : elles ne portent aucune information et n'ont donc pas d'équivalent textuel à prévoir. ========================================================================== */ .plate { position: relative; overflow: hidden; background-color: var(--amb-deep); width: 100%; object-fit: cover; /* utile dès qu'une prend la classe */ } .plate--3-2 { aspect-ratio: 3 / 2; } .plate--1-1 { aspect-ratio: 1 / 1; } .plate--3-4 { aspect-ratio: 3 / 4; } /* Trame diagonale — registre technique, employée par défaut */ .plate--lines::before { content: ""; position: absolute; inset: -20%; background-image: repeating-linear-gradient( 115deg, transparent 0 22px, rgba(255, 255, 255, 0.09) 22px 23px ); } /* Rayons — registre solaire (photovoltaïque) */ .plate--rays::before { content: ""; position: absolute; inset: -30% -10% auto -10%; height: 150%; background-image: repeating-conic-gradient( from 200deg at 50% 115%, rgba(255, 255, 255, 0.10) 0deg 1.2deg, transparent 1.2deg 7deg ); } /* Ondes concentriques — registre de la chaleur (pompes à chaleur) */ .plate--waves::before { content: ""; position: absolute; inset: -40%; background-image: repeating-radial-gradient( circle at 28% 78%, transparent 0 26px, rgba(255, 255, 255, 0.10) 26px 28px ); } /* Strates horizontales — registre de l'eau (sanitaire) */ .plate--strata::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( to bottom, transparent 0 14px, rgba(255, 255, 255, 0.07) 14px 15px ); } /* Quadrillage — registre du document (subventions, mentions) */ .plate--grid::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 46px 46px; } /* Une remplace le panneau : mêmes format et recadrage, sans la trame (les images remplacées n'ont pas de pseudo-éléments). */ img.plate { display: block; object-fit: cover; } /* Photo à l'intérieur d'un panneau, avec du contenu par-dessus */ .plate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Contenu posé sur le panneau */ .plate__inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: var(--sp-6); color: var(--on-ink); } @media (min-width: 900px) { .plate__inner { padding: var(--sp-7); } } /* Sigle géant en filigrane dans un panneau */ .plate__mark { position: absolute; right: -0.06em; bottom: -0.24em; z-index: 1; margin: 0; font-size: clamp(7rem, 17vw, 15rem); font-weight: 700; font-stretch: 84%; line-height: 0.8; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22); pointer-events: none; user-select: none; } @supports not (-webkit-text-stroke: 1px currentColor) { .plate__mark { color: rgba(255, 255, 255, 0.12); } } /* ========================================================================== 05 bis. FIGURES — l'espace propre des photographies -------------------------------------------------------------------------- RÈGLE : une photographie n'est JAMAIS posée en arrière-plan sous un voile, et n'est JAMAIS recadrée de force dans un cadre qui ne lui correspond pas. Une photo derrière un voile opaque n'est plus une photo, c'est un aplat sali ; et une image panoramique écrasée dans une colonne haute perd son sujet. Les deux ont été essayés, les deux ont été rejetés. FORMAT RETENU : LE CARRÉ, de taille contenue. Les bandeaux pleine largeur ont été essayés puis abandonnés : une photo étalée sur toute la largeur d'un écran occupe des centaines de pixels de haut et écrase le reste de la page. Le carré, lui, garde une emprise constante quelle que soit la taille de l'écran, et se place naturellement en regard d'un texte. ========================================================================== */ .figure { /* ⬅️ LA TAILLE DES IMAGES SE RÈGLE ICI, et uniquement ici. */ --figure-size: clamp(200px, 30vw, 340px); margin: 0; position: relative; width: 100%; max-width: var(--figure-size); overflow: hidden; } .figure img { display: block; width: 100%; aspect-ratio: 1 / 1; /* carré, quel que soit le format d'origine */ object-fit: cover; object-position: center; } /* Carré un peu plus grand, en ouverture de page */ .figure--hero { --figure-size: clamp(220px, 34vw, 400px); } /* Deux photographies empilées dans la MÊME colonne d'un duo. Indispensable : sans ce conteneur, la grille à deux colonnes renvoie la seconde image à la ligne suivante, sous le texte, et les deux se retrouvent décalées de part et d'autre d'un vide. */ .figure-stack { align-self: start; width: 100%; max-width: 72%; } .figure-stack .figure { max-width: none; width: 100%; } /* ⚠️ Sans cette règle, les images de la pile héritent du carré défini plus haut pour .figure et se retrouvent amputées. Le 4:3 correspond au cadrage réel des photographies utilisées. */ .figure-stack .figure img { aspect-ratio: 4 / 3; } @media (max-width: 899px) { .figure-stack { max-width: 100%; } } /* Photo en regard d'un texte : elle occupe toute sa colonne et se cale en haut, au même niveau que la première ligne du texte voisin. Sans cela elle se retrouvait sous la liste, isolée dans un grand vide. */ .figure--column { --figure-size: none; max-width: none; align-self: start; } .figure--column img { aspect-ratio: 4 / 3; object-fit: cover; } /* Bande de section — la photographie occupe la largeur du contenu. Réservée aux images réellement panoramiques : une source carrée y perd trop de son sujet, et une source de faible résolution y devient floue. */ .figure--band { --figure-size: none; max-width: none; } .figure--band img { aspect-ratio: 16 / 9; max-height: clamp(200px, 30vw, 380px); object-fit: cover; } /* Format large — pour les images dont le sujet ne supporte pas le carré. L'étiquette énergétique en est le cas type : recadrée en carré, son échelle A-G est amputée et l'image perd son sens. */ .figure--wide { --figure-size: clamp(260px, 40vw, 420px); } .figure--wide img { aspect-ratio: 16 / 9; } /* Une figure placée directement dans un duo occupe toute sa colonne. Sans cela elle restait bridée à sa largeur maximale et paraissait minuscule en regard d'un texte qui, lui, remplit la sienne. */ .duo > .figure { --figure-size: none; max-width: none; width: 100%; } /* Dans une colonne de lecture, l'image se cale sur la mesure du texte — ni bridée à 420 px, où elle paraissait dérisoire, ni étalée sur toute la colonne, où elle occupait la moitié de l'écran en hauteur. 640 px de large donnent 360 px de haut en 16:9 : l'image reste lisible et le texte qui suit demeure visible sans défiler. */ .prose > .figure, .prose + .figure { --figure-size: none; max-width: 40rem; width: 100%; } /* Ratio d'origine préservé : à réserver aux images dont le sujet occupe tout le cadre et ne supporte aucun recadrage. */ .figure--native { --figure-size: none; } .figure--native img { aspect-ratio: auto; height: auto; object-fit: fill; } /* Filet de rappel sous l'image, dans la couleur de l'univers */ .figure--ruled::after { content: ""; display: block; height: 3px; background-color: var(--amb); } /* Débord jusqu'au bord droit de l'écran (conteneur centré) */ /* ========================================================================== 06. BOUTONS ET LIENS -------------------------------------------------------------------------- Le bouton d'action est VERT sur toutes les pages, quel que soit l'univers : c'est le repère d'action du site, il ne doit pas changer de sens d'une page à l'autre. ========================================================================== */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-6); min-height: 54px; padding: var(--sp-3) var(--sp-5); border: 1px solid var(--accent-ink); background-color: transparent; color: var(--on-ink); font-family: inherit; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; max-width: 100%; /* « Vérifier mes droits aux subventions » débordait d'un écran de 320 px */ text-align: left; transition: color var(--t), border-color var(--t); } /* Sur les très petits écrans, l'écart entre le libellé et la flèche est réduit et le libellé peut passer à la ligne plutôt que déborder. */ @media (max-width: 480px) { .btn { gap: var(--sp-3); padding-inline: var(--sp-4); font-size: var(--fs-xs); } } /* Le remplissage glisse depuis la gauche au survol : inversion animée, sans aucun déplacement du bouton lui-même. */ .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--accent-ink); transform-origin: left; transition: transform var(--t-slow); } .btn svg { flex-shrink: 0; transition: transform var(--t); } .btn:hover svg { transform: translateX(5px); } .btn--primary:hover { color: var(--accent-deep); } .btn--primary:hover::before { transform: scaleX(0); transform-origin: right; } /* Contour sombre sur fond clair */ .btn--secondary { border-color: var(--ink); color: var(--ink); } .btn--secondary::before { background-color: var(--ink); transform: scaleX(0); } .btn--secondary:hover { color: var(--on-ink); } .btn--secondary:hover::before { transform: scaleX(1); } /* Sur aplat sombre. Le contour est à 0,45 d'opacité et non 0,22 comme les filets décoratifs : c'est un contour de composant, il lui faut 3:1 (ici 4,1:1). Ne pas l'aligner sur --rule-on-ink. */ .btn--ghost { border-color: rgba(255, 255, 255, 0.45); color: var(--on-ink); } .btn--ghost::before { background-color: var(--on-ink); transform: scaleX(0); } .btn--ghost:hover { color: var(--amb-deep); border-color: var(--on-ink); } .btn--ghost:hover::before { transform: scaleX(1); } .btn--block { width: 100%; } .btn--sm { min-height: 44px; padding: var(--sp-2) var(--sp-4); gap: var(--sp-4); font-size: var(--fs-xs); } .actions { display: flex; flex-direction: column; gap: var(--sp-3); align-items: stretch; } @media (min-width: 560px) { .actions { flex-direction: row; align-items: center; gap: var(--sp-5); } } /* Lien fléché : soulignement qui se déplie de la gauche */ .arrow-link { display: inline-flex; align-items: center; gap: var(--sp-3); padding-bottom: 3px; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; color: var(--ink); background-image: linear-gradient(var(--amb), var(--amb)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size var(--t-slow), color var(--t); } .arrow-link svg { transition: transform var(--t); } .arrow-link:hover, a:hover .arrow-link { background-size: 100% 2px; color: var(--amb); } .arrow-link:hover svg, a:hover .arrow-link svg { transform: translateX(5px); } .band--deep .arrow-link { color: var(--on-ink); background-image: linear-gradient(var(--amb-light), var(--amb-light)); } .band--deep .arrow-link:hover { color: var(--amb-light); } .tel-inline { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; transition: color var(--t); } .tel-inline:hover { color: var(--amb); } .band--deep .tel-inline:hover { color: var(--amb-light); } /* ========================================================================== 07. EN-TÊTE, NAVIGATION, PROGRESSION DE LECTURE ========================================================================== */ .header { position: sticky; top: 0; z-index: 100; background-color: var(--paper); border-bottom: 1px solid var(--rule); transition: transform var(--t-slow), background-color var(--t); } /* L'en-tête s'efface en descendant, revient dès qu'on remonte : la lecture gagne de la hauteur d'écran sans jamais perdre l'accès à la navigation. */ .header.is-hidden { transform: translateY(-101%); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: var(--header-h); } /* Progression de lecture, collée sous l'en-tête */ .progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background-color: transparent; pointer-events: none; } .progress__bar { display: block; height: 100%; width: 0; background-color: var(--amb); transition: width 90ms linear; } /* ---- Logotype provisoire ---------------------------------------------- Pour le logo définitif : remplacer le contenu de