/* ========================================================= La Chatterie du Soleil Rouge Direction: "La lumière du soir" — la planche photographique animalière à l'heure dorée. Fond de braise chaud, lumière rasante diffuse, planches bordées légendées du nom complet. Voir .impeccable/surfaces/index-html.md ========================================================= */ /* Les polices (Cinzel + Archivo) sont déclarées dans le de chaque page, PAS ici. Un @import oblige le navigateur à télécharger et analyser cette feuille avant de découvrir l'adresse des polices : un aller-retour de plus avant que les titres ne s'affichent en Cinzel. Ne pas le réintroduire. */ :root{ --ink: #1a0907; --ink-raised: #241009; --ink-panel: #2d1210; --line: rgba(240, 216, 184, 0.15); --line-bright:rgba(217, 164, 65, 0.34); --red-deep: #5e1310; --red: #8f1a14; --red-bright: #b83a26; --red-press: #a5321f; /* palier braise — la lumière du couchant, absent du système précédent */ --ember: #e08a4a; --ember-soft: #f0b877; --gold: #d9a441; --gold-dim: #b8873a; --paper: #f5e7cd; --paper-dim: #dfc9a4; --text: #e8d5ae; --text-dim: #b59a89; --text-faint: #9b8474; --font-display: 'Cinzel', 'Times New Roman', serif; --font-body: 'Archivo', -apple-system, sans-serif; /* intensité du soleil, pilotée au défilement par js/main.js */ --sun: 0.75; --measure: 64ch; --container: 1180px; --space-1: clamp(0.4rem, 0.35rem + 0.3vw, 0.6rem); --space-2: clamp(0.8rem, 0.7rem + 0.5vw, 1.1rem); --space-3: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); --space-4: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem); --space-5: clamp(3.4rem, 2.6rem + 3.2vw, 5.6rem); --space-6: clamp(5rem, 3.6rem + 5.6vw, 8.8rem); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); color-scheme: dark; } /* ---------- reset ---------- */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; overflow-x: hidden; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body{ margin: 0; background: var(--ink); color: var(--text); font-family: var(--font-body); font-size: 16.5px; line-height: 1.72; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } ul{ margin: 0; padding: 0; list-style: none; } h1,h2,h3,h4,p,figure{ margin: 0; } button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea, select{ font: inherit; color: inherit; } ::selection{ background: var(--ember); color: #2a1006; } *:focus-visible{ outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 3px; } /* le curseur de saisie porte la braise, comme le reste du système */ input, textarea, select{ caret-color: var(--ember); } /* les liens en texte courant : souligné ambre posé bas, pas collé aux jambages */ .prose-link{ color: var(--gold); text-decoration: underline; text-decoration-color: rgba(217, 164, 65, 0.45); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color 0.3s var(--ease-out), text-decoration-color 0.3s var(--ease-out); } .prose-link:hover{ color: var(--ember-soft); text-decoration-color: var(--ember); } /* webkit scrollbar theming */ ::-webkit-scrollbar{ width: 12px; height: 12px; } ::-webkit-scrollbar-track{ background: var(--ink); } ::-webkit-scrollbar-thumb{ background: var(--ink-panel); border: 3px solid var(--ink); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover{ background: var(--red-deep); } * { scrollbar-color: var(--ink-panel) var(--ink); scrollbar-width: thin; } /* tabular numerals wherever counts/dates appear */ .num{ font-variant-numeric: tabular-nums; } /* ---------- type ---------- */ /* Les titres portent leur propre poids : aucune étiquette au-dessus. La lumière passe SOUS le titre, comme un horizon. */ .page-intro h1, .section-head h2, .titled{ position: relative; padding-bottom: var(--space-3); } .page-intro h1::after, .section-head h2::after, .titled::after{ content: ""; position: absolute; left: 0; bottom: 0; width: min(100%, 30ch); height: 1px; background: linear-gradient(90deg, rgba(224, 138, 74, calc(0.85 * var(--sun))) 0%, rgba(217, 164, 65, calc(0.35 * var(--sun))) 45%, transparent 100%); } h1, .h1{ font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem, 2rem + 3vw, 4.6rem); line-height: 1.06; letter-spacing: 0.005em; color: var(--paper); text-wrap: balance; } h2, .h2{ font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 1.6rem + 1.4vw, 2.7rem); line-height: 1.14; color: var(--paper); text-wrap: balance; } h3, .h3{ font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem); line-height: 1.25; color: var(--paper); } .lede{ font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); color: var(--text-dim); max-width: var(--measure); line-height: 1.78; } p{ max-width: var(--measure); } p + p{ margin-top: 1em; } .text-dim{ color: var(--text-dim); } .center-measure{ margin-left: auto; margin-right: auto; } /* ---------- layout ---------- */ .container{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.2rem, 4vw, 2.6rem); } .section{ padding-block: var(--space-6); } .section-head{ margin-bottom: var(--space-5); } .section-head h2{ margin-bottom: var(--space-2); } .rule{ height: 1px; background: var(--line); border: none; margin: 0; } .rule--bright{ background: var(--line-bright); } /* ---------- l'horizon : la signature du site ---------- Une seule source de lumière basse et diffuse, posée sur la frontière entre deux sections. Son intensité suit le passage du soleil (--sun, piloté au défilement), comme si le jour baissait pendant la visite. */ .horizon{ position: relative; height: 0; overflow: visible; } .horizon::before{ content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: min(1500px, 128vw); /* La lueur déborde largement dans la bande qui précède : sans cela l'heure dorée se réduisait à un trait et le milieu de page retombait dans un noir plat. */ height: clamp(260px, 34vw, 520px); pointer-events: none; background: radial-gradient(62% 100% at 50% 100%, rgba(224, 138, 74, calc(0.26 * var(--sun))) 0%, rgba(190, 74, 40, calc(0.17 * var(--sun))) 30%, rgba(130, 40, 26, calc(0.085 * var(--sun))) 55%, transparent 80%); } /* le fil d'horizon lui-même : une ligne de lumière, pas une bordure */ .horizon::after{ content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(1180px, 92vw); height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(217, 164, 65, calc(0.30 * var(--sun))) 22%, rgba(240, 184, 119, calc(0.62 * var(--sun))) 50%, rgba(217, 164, 65, calc(0.30 * var(--sun))) 78%, transparent 100%); } /* ---------- buttons / actions ---------- */ .btn{ position: relative; display: inline-flex; align-items: center; gap: 0.7em; font-family: var(--font-display); font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.95em 1.7em; border: 1px solid var(--line-bright); border-radius: 3px; transition: border-color 0.35s var(--ease-out), background-color 0.35s var(--ease-out), color 0.35s var(--ease-out); } .btn svg{ width: 0.9em; height: 0.9em; } /* la lumière accroche l'arête haute, elle n'éclaircit pas l'aplat */ .btn::before{ content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, transparent, rgba(240, 184, 119, 0.7), transparent); opacity: 0; transition: opacity 0.35s var(--ease-out); } .btn:hover::before, .btn:focus-visible::before{ opacity: 1; } .btn--primary{ background: var(--red-bright); border-color: var(--red-bright); color: var(--paper); } .btn--primary:hover{ background: var(--red-press); border-color: var(--red-press); } .btn--ghost{ color: var(--paper); border-color: var(--line-bright); } .btn--ghost:hover{ border-color: var(--ember); color: var(--ember-soft); } /* ---------- seal / crest ---------- */ .crest{ color: var(--gold); } .crest svg{ width: 100%; height: 100%; } /* real brand mark (provided logo) */ .brand-mark{ border-radius: 50%; overflow: hidden; flex: none; background: #000; box-shadow: 0 0 0 1px var(--line-bright), 0 6px 22px rgba(0,0,0,0.55); } .brand-mark img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- nav ---------- */ .site-header{ position: sticky; top: 0; z-index: 40; /* teinte du fond chaud, pas le noir neutre de l'ancien système */ background: rgba(26, 9, 7, 0.84); backdrop-filter: blur(10px) saturate(1.1); border-bottom: 1px solid var(--line); } .site-header .container{ display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-2); } .brand{ display: flex; align-items: center; gap: 0.75rem; color: var(--paper); } .brand .brand-mark{ width: 40px; height: 40px; } .brand-name{ font-family: var(--font-display); font-size: 1.02rem; letter-spacing: 0.05em; line-height: 1.15; } .brand-name small{ display: block; font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; margin-top: 0.2em; } .nav-list{ display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 1.9rem); } .nav-list a{ position: relative; font-size: 0.86rem; letter-spacing: 0.03em; color: var(--text-dim); padding-block: 0.4rem; white-space: nowrap; } .nav-list li{ flex-shrink: 0; } .nav-cta .btn{ white-space: nowrap; } .nav-list a::after{ content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--gold); transition: right 0.35s var(--ease-out); } .nav-list a:hover{ color: var(--paper); } .nav-list a:hover::after{ right: 0; } .nav-list a[aria-current="page"]{ color: var(--paper); } .nav-list a[aria-current="page"]::after{ right: 0; background: var(--red-bright); } .nav-cta{ margin-left: var(--space-2); } .nav-list .btn--primary, .nav-list .btn--ghost{ color: var(--paper); } .nav-cta .btn::after{ display: none; } /* dropdown submenu (desktop: hover panel; mobile: static nested list) */ .nav-has-sub{ position: relative; } .nav-has-sub > a{ display: inline-flex; align-items: center; gap: 0.35em; } .nav-has-sub .caret{ width: 0.55em; height: 0.55em; flex: none; } .nav-has-sub .caret path{ fill: none; stroke: currentColor; stroke-width: 1.6; } .nav-submenu{ position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 240px; margin-top: var(--space-2); padding: 0.5rem 0; background: var(--ink-raised); border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(4px); transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); z-index: 50; } .nav-has-sub:hover .nav-submenu, .nav-has-sub:focus-within .nav-submenu{ opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-submenu a{ display: block; padding: 0.6em 1.2em; font-size: 0.82rem; white-space: nowrap; color: var(--text-dim); } .nav-submenu a::after{ display: none; } .nav-submenu a:hover{ color: var(--paper); background: rgba(224,138,74,0.12); } @media (max-width: 1010px){ .nav-has-sub .caret{ display: none; } .nav-submenu{ position: static; transform: none; opacity: 1; pointer-events: auto; background: none; border: none; box-shadow: none; margin-top: 0.6rem; padding: 0 0 0 1.1rem; border-left: 1px solid var(--line); } .nav-submenu a{ padding: 0.5em 0; font-size: 0.95rem; white-space: normal; } } .nav-toggle{ display: none; flex-direction: column; gap: 5px; padding: 0.5rem; } .nav-toggle span{ width: 22px; height: 1.5px; background: var(--paper); transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); } @media (max-width: 1010px){ .nav-toggle{ display: flex; } .nav-list{ position: fixed; inset: 0 0 0 auto; width: min(78vw, 340px); height: 100vh; background: var(--ink-raised); border-left: 1px solid var(--line); flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-3); padding-inline: var(--space-4); transform: translateX(100%); transition: transform 0.4s var(--ease-out); z-index: 41; } .nav-list.is-open{ transform: translateX(0); } .nav-list a{ font-size: 1.05rem; } body.nav-open{ overflow: hidden; } body.nav-open::before{ content: ""; position: fixed; inset: 0; background: rgba(16,6,4,0.66); z-index: 39; } } /* ---------- footer ---------- */ .site-footer{ border-top: 1px solid var(--line); padding-block: var(--space-5) var(--space-4); background: radial-gradient(140% 100% at 50% 0%, rgba(143,26,20,0.06), transparent 60%), var(--ink); } .footer-grid{ display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-4); padding-bottom: var(--space-4); } .footer-brand .brand{ margin-bottom: var(--space-2); } .footer-brand p{ color: var(--text-dim); font-size: 0.92rem; } .footer-col h3{ font-family: var(--font-display); color: var(--gold); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--space-2); } .footer-col ul{ display: flex; flex-direction: column; gap: 0.6rem; } /* la ligne non cliquable ne doit pas être la plus lumineuse du bloc */ .footer-col li{ color: var(--text-dim); font-size: 0.92rem; } .footer-col a{ color: var(--text-dim); font-size: 0.92rem; } .footer-col a:hover{ color: var(--paper); } .footer-base{ display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--text-faint); font-size: 0.8rem; } @media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; gap: var(--space-3); } } /* ---------- placeholder plates (photo à venir) ---------- */ .plate{ position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, rgba(224,138,74,0.10), transparent 58%), linear-gradient(180deg, var(--ink-raised), var(--ink) 76%); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; } .plate::before{ content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; pointer-events: none; } .plate .ring-mark{ width: 42%; max-width: 130px; color: var(--gold-dim); opacity: 0.55; } .plate .ring-mark svg{ width: 100%; height: 100%; } .plate-tag{ position: absolute; z-index: 2; left: var(--space-2); bottom: var(--space-2); right: var(--space-2); display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding-top: var(--space-1); border-top: 1px solid var(--line); } .plate-tag .name{ font-family: var(--font-display); font-size: 0.95rem; color: var(--paper); } .plate-tag .note{ font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dim); white-space: nowrap; } .plate--hero{ aspect-ratio: auto; } .plate--wide{ aspect-ratio: 16 / 10; } /* plate with a real photo instead of the placeholder ring */ .plate--photo{ background: var(--ink); } .plate--photo img{ position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-pos, 50% 30%); } /* la lumière du soir passe sous la photo : elle assombrit pour la légende ET réchauffe le bas de l'image, comme un contre-jour au couchant */ .plate--photo::after{ content: ""; position: absolute; inset: auto 0 0 0; z-index: 1; height: 52%; background: radial-gradient(70% 120% at 50% 100%, rgba(224,138,74, calc(0.26 * var(--sun))), transparent 70%), linear-gradient(180deg, transparent, rgba(20,7,4,0.90) 84%); pointer-events: none; } /* ---------- affiche d'annonce (carte fournie par l'élevage) ---------- Elle porte son propre texte (noms, date) : elle est montrée ENTIÈRE, jamais recadrée et sans dégradé par-dessus. C'est une pièce rapportée dans la page, pas une planche photographique du système. */ .announce{ border: 1px solid var(--line-bright); border-radius: 4px; overflow: hidden; background: var(--ink-raised); line-height: 0; } .announce img{ display: block; width: 100%; height: auto; } /* Révélation : le contenu est TOUJOURS lisible au repos. La planche ne fait que se poser — elle n'attend jamais un observateur pour exister. */ .reveal-plate{ transform: translateY(14px) scale(1.012); transition: transform 1s var(--ease-out); } .reveal-plate.is-visible{ transform: none; } .reveal-up{ transform: translateY(14px); transition: transform 0.8s var(--ease-out); } .reveal-up.is-visible{ transform: none; } .reveal-stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); } /* ---------- ledger rows (replaces card grids) ---------- */ .ledger{ display: flex; flex-direction: column; } .ledger-row{ display: grid; grid-template-columns: 6rem 1fr; gap: var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--line); } .ledger-row > *{ min-width: 0; } .ledger-row:last-child{ border-bottom: 1px solid var(--line); } .ledger-row .mark{ font-family: var(--font-display); color: var(--gold); font-size: 0.82rem; letter-spacing: 0.08em; padding-top: 0.2em; } .ledger-row h3{ margin-bottom: 0.5rem; } .ledger-row p{ color: var(--text-dim); } /* rangée sans repère : le titre occupe toute la largeur */ .ledger-row--plain{ grid-template-columns: 1fr; } @media (max-width: 640px){ /* Le repère reste À CÔTÉ du titre, jamais au-dessus : empilé, il deviendrait une étiquette de surtitre — ce que le système interdit. */ .ledger-row{ grid-template-columns: minmax(4.2rem, auto) 1fr; gap: var(--space-2); } .ledger-row .mark{ font-size: 0.7rem; line-height: 1.35; } .ledger-row--plain{ grid-template-columns: 1fr; } } /* ---------- panneau : la lumière entre par le bas, comme partout ailleurs ---------- */ .label-panel{ position: relative; border: 1px solid var(--line-bright); border-radius: 4px; padding: var(--space-4); background: radial-gradient(90% 130% at 50% 100%, rgba(224,138,74, calc(0.09 * var(--sun))), transparent 62%), linear-gradient(180deg, rgba(143,26,20,0.07), transparent 45%); } /* ---------- top banner ---------- Le bord bas de la bannière se dissout dans le fond de page : aucune couture entre l'image de la cliente et le site. */ .top-banner{ position: relative; display: block; width: 100%; background: var(--ink); } .top-banner img{ display: block; width: 100%; height: auto; /* sur écran large la bannière est très haute : on rogne un peu de ciel et de reflet pour que la planche de tête entre dans le premier écran */ max-height: 54vh; object-fit: cover; object-position: 50% 34%; } .top-banner::after{ content: ""; position: absolute; inset: auto 0 -1px 0; height: clamp(56px, 11vw, 150px); pointer-events: none; background: linear-gradient(180deg, rgba(26,9,7,0) 0%, rgba(26,9,7,0.72) 58%, var(--ink) 96%); } /* ---------- hero (accueil) : la planche de tête ---------- */ .hero{ position: relative; } .hero-content{ position: relative; z-index: 2; width: 100%; padding-block: var(--space-4) var(--space-6); } /* L'accroche ouvre la page seule, sous la bannière : elle se pose, elle n'écrase pas. La justification reste tenue par --measure. */ .hero h1{ font-size: clamp(2rem, 1.5rem + 1.9vw, 3.1rem); margin-bottom: var(--space-3); max-width: 24ch; } .hero .lede{ font-size: clamp(1rem, 0.96rem + 0.22vw, 1.14rem); } .hero-foot{ display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); } @media (max-width: 880px){ .hero h1{ max-width: 22ch; } .hero-content{ padding-block: var(--space-3) var(--space-5); } } /* ---------- utility grids ---------- */ .grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; } .grid-2 > *, .grid-3 > *, .grid-plates > *, .form-grid > *{ min-width: 0; } .grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .grid-plates{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } @media (max-width: 900px){ .grid-3{ grid-template-columns: repeat(2, 1fr); } .grid-plates{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px){ .grid-2, .grid-3, .grid-plates{ grid-template-columns: 1fr; } } /* ---------- page hero (interior pages) ---------- */ .page-intro{ position: relative; padding-block: var(--space-5) var(--space-5); background: radial-gradient(130% 100% at 50% 0%, rgba(143,26,20,0.10), transparent 58%); } .page-intro h1{ max-width: 22ch; } .breadcrumb{ display: flex; gap: 0.5rem; align-items: center; color: var(--text-faint); font-size: 0.8rem; margin-bottom: var(--space-3); } .breadcrumb a:hover{ color: var(--gold); } /* ---------- forms ---------- */ .form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .field{ display: flex; flex-direction: column; gap: 0.5rem; } .field.full{ grid-column: 1 / -1; } .field label{ font-family: var(--font-display); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .field input, .field textarea, .field select{ width: 100%; min-width: 0; background: var(--ink-raised); border: 1px solid var(--line); color: var(--paper); padding: 0.85em 1em; border-radius: 1px; transition: border-color 0.25s var(--ease-out); } .field select{ appearance: none; background-image: none; } .field input:hover, .field textarea:hover, .field select:hover{ border-color: var(--line-bright); } .field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--gold); outline: none; } .field textarea{ resize: vertical; min-height: 140px; } .field-note{ font-size: 0.78rem; color: var(--text-faint); } @media (max-width: 640px){ .form-grid{ grid-template-columns: 1fr; } } /* ---------- info strip (contact / practical) ---------- */ .info-strip{ display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .info-strip > div{ padding: var(--space-3) var(--space-3); border-left: 1px solid var(--line); } .info-strip > div:first-child{ border-left: none; } .info-strip h2{ font-family: var(--font-display); color: var(--gold); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.6rem; } .info-strip p{ color: var(--text-dim); font-size: 0.94rem; } @media (max-width: 760px){ .info-strip{ grid-template-columns: 1fr; } .info-strip > div{ border-left: none; border-top: 1px solid var(--line); } .info-strip > div:first-child{ border-top: none; } } /* ---------- tag / status chip (used sparingly, not as card decoration) ---------- */ .chip{ display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--line-bright); padding: 0.3em 0.8em; } .chip.is-taken{ color: var(--text-faint); border-color: var(--line); } /* ---------- news list (actualités) ---------- */ .news-item{ display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-4); padding-block: var(--space-4); border-top: 1px solid var(--line); } .news-item:last-child{ border-bottom: 1px solid var(--line); } .news-date{ font-family: var(--font-display); color: var(--gold); } .news-date .day{ font-size: 2.2rem; display: block; line-height: 1; } .news-date .month{ font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); } @media (max-width: 700px){ .news-item{ grid-template-columns: 1fr; gap: 0.8rem; } .news-date{ display: flex; align-items: baseline; gap: 0.5rem; } .news-date .day{ font-size: 1.4rem; } } /* ---------- skip link ---------- */ .skip-link{ position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--ink); padding: 0.8em 1.2em; z-index: 100; } .skip-link:focus{ left: var(--space-2); top: var(--space-2); } .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================= Écrans courts — placé en fin de feuille à dessein : ces règles doivent l'emporter sur les règles .hero définies plus haut. Sur un portable ou un écran 800–900px de haut, la bannière mangeait tout le premier écran et repoussait l'accroche et les actions sous la ligne de flottaison. ========================================================= */ @media (max-height: 940px){ /* la fenêtre de recadrage se cale vers le haut : le lettrage de la bannière est la marque du client, il ne doit jamais être tronqué */ .top-banner img{ max-height: 32vh; object-position: 50% 17%; } .hero-content{ padding-block: var(--space-3) var(--space-5); } .hero h1{ font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.35rem); max-width: 25ch; } /* La justification reste tenue : 64ch d'Archivo rendent ~80 caractères réels, au-delà du plancher de lisibilité. */ .hero .lede{ font-size: 1rem; line-height: 1.6; max-width: 52ch; } .hero-content p:not(.lede){ font-size: 0.94rem; line-height: 1.58; max-width: 54ch; } .hero-foot{ margin-top: var(--space-3); } } @media (max-height: 940px) and (max-width: 880px){ .top-banner img{ max-height: 24vh; object-position: 50% 12%; } } /* Portables 800px de haut : il faut regagner une trentaine de pixels de plus pour que les deux actions restent dans le premier écran. */ @media (max-height: 840px) and (min-width: 881px){ .top-banner img{ max-height: 28vh; } .hero-content{ padding-block: var(--space-2) var(--space-4); } .hero-foot{ margin-top: var(--space-2); } } /* ========================================================= Niveaux de titre : le niveau est sémantique, la taille est présentationnelle. Ces titres ont été remontés d'un cran pour que le plan du document ne saute plus de niveau (lecteurs d'écran), sans rien changer à leur apparence. ========================================================= */ .news-item h2, .h-sub{ font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem); line-height: 1.25; }