/* ============================================================= LAYOUT — coquille, sections, grilles, en-têtes de section ============================================================= */ /* ---- Coquille --------------------------------------------------- Une seule largeur maximale pour tout le site, une seule gouttière. */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .shell--wide { max-width: var(--shell-wide); } .shell--read { max-width: var(--shell-read); } .shell--flush { padding-inline: 0; } /* ---- Sections ---------------------------------------------------- */ .section { padding-block: var(--section-y); position: relative; } .section--tight { padding-block: calc(var(--section-y) * 0.6); } .section--flush-top { padding-top: 0; } .section--flush-bottom { padding-bottom: 0; } .section--alt { background: var(--bg-alt); } .section--tint { background: var(--bg-tint); } .section--deep { background: var(--bg-deep); color: var(--on-deep); } .section--deep :is(h1, h2, h3, h4) { color: #fff; } .section--deep p { color: var(--on-deep-muted); } .section--deep a { color: #fff; } /* ---- En-tête de section ------------------------------------------ */ .sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-7); } .sechead--center { flex-direction: column; align-items: center; text-align: center; } .sechead--center .sechead__text { max-width: 62ch; } .sechead__text > * + * { margin-top: var(--s-3); } .sechead__title { margin: 0; } .sechead__lead { margin: 0; color: var(--text-muted); font-size: var(--t-lg); max-width: 62ch; } .sechead__link { flex: none; } /* Surtitre — porte le filet teal, élément signature du site. */ .eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; font-family: var(--font-display); font-size: var(--t-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--primary); } .eyebrow__dot { width: 10px; height: 11px; background: var(--primary); clip-path: var(--hex-clip); flex: none; } .section--deep .eyebrow { color: var(--c-teal-200); } .section--deep .eyebrow__dot { background: var(--c-teal-300); } /* ---- Grilles ------------------------------------------------------ `auto-fit` + `minmax` : le nombre de colonnes suit la place réelle, sans une seule media query. `min()` évite le débordement à 320 px. */ .grid { display: grid; gap: var(--gap); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); } .grid--5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); } /* Deux colonnes asymétriques (contenu + colonne collante) */ .split { display: grid; gap: clamp(var(--s-6), 4vw, var(--s-9)); align-items: start; } @media (min-width: 62rem) { .split { grid-template-columns: minmax(0, 1fr) 22rem; } .split--reverse { grid-template-columns: 22rem minmax(0, 1fr); } .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split__aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); } } /* ---- Pile verticale ---------------------------------------------- */ .stack > * + * { margin-top: var(--s-4); } .stack--sm > * + * { margin-top: var(--s-2); } .stack--lg > * + * { margin-top: var(--s-6); } .cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } /* ---- Défilement horizontal --------------------------------------- Tout contenu large vit dans son propre conteneur qui défile : le , lui, ne défile JAMAIS horizontalement. */ .scroller { display: grid; grid-auto-flow: column; grid-auto-columns: var(--scroller-item, minmax(15rem, 1fr)); gap: var(--gap); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; /* la gouttière est reportée à l'intérieur pour que la première carte s'aligne sur la coquille tout en pouvant défiler bord à bord */ padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding-block: var(--s-2); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .scroller > * { scroll-snap-align: start; } .scroller::-webkit-scrollbar { height: 6px; } .scroller::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); } .scroller::-webkit-scrollbar-track { background: transparent; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---- Fil d'Ariane ------------------------------------------------- */ .crumbs { background: var(--bg-alt); border-bottom: 1px solid var(--border-soft); font-size: var(--t-sm); } .crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); list-style: none; margin: 0; padding-block: var(--s-3); } .crumbs__item { display: flex; align-items: center; gap: var(--s-2); margin: 0; } .crumbs a { color: var(--text-muted); text-decoration: none; } .crumbs a:hover { color: var(--primary); } .crumbs [aria-current="page"] { color: var(--text-strong); font-weight: var(--fw-medium); } .crumbs__sep { color: var(--text-faint); display: inline-flex; } /* ---- Utilitaires de mise en page ---------------------------------- */ .center { text-align: center; } .mx-auto { margin-inline: auto; } .full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }