/* ============================================================================ MAIN — couche de composants. Ne consomme QUE des rôles sémantiques. ============================================================================ ⚠️ Aucune valeur hexadécimale dans ce fichier. Si un rôle manque, on l'ajoute dans `tokens.css` — on ne l'écrit pas ici. La règle date de l'époque des trois chartes ; elle tient toujours, pour une autre raison : une couleur en dur échappe à `npm run contrast`, qui ne mesure que ce qui est déclaré en tokens. ⚠️ `brandings.css` n'existe plus — le site n'a qu'une charte. Ne pas remettre d'import : `fonts.css` puis `tokens.css`, et c'est tout. */ @import url("fonts.css"); @import url("tokens.css"); /* ================================================================== Base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* ⚠️ AUCUNE RÉSERVE PAR DÉFAUT, ET C'EST SOLIDAIRE DU HEADER. Le header n'est sticky qu'à partir de 64em (voir « Header » plus bas) : en dessous, il défile avec la page et ne masque donc aucune cible d'ancre. Une réserve y décalerait les ancres vers le bas sans raison. Historique utile : la valeur a été de 6,75rem sous 30em et de 5rem au-delà, du temps où le header était sticky partout et ne portait que deux liens d'épreuve (97 px sur mobile, 62-65 px au-delà). Le menu en compte QUATRE depuis le retrait du bouton de conversion : replié, il monte à 132 px, ce qui reste trop pour rester collé en haut d'un écran de téléphone (il valait 175 px à cinq éléments). */ scroll-padding-top: 0; -webkit-text-size-adjust: 100%; } /* La réserve n'existe que là où le header est réellement sticky, et elle vaut sa hauteur mesurée sur une ligne (62-65 px). ⚠️ Le point de rupture est le MÊME que celui de `position: sticky` : les désynchroniser rendrait la cible de `#deposer-demande` — la conversion du site — masquée sous la barre. */ @media (min-width: 64em) { html { scroll-padding-top: 5rem; } } @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; } } body { margin: 0; background: var(--bg-page); color: var(--text-body); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; /* Réserve pour la barre d'action mobile, qui est en `position: fixed` et recouvrirait sinon la fin du footer. Remise à 0 quand la barre disparaît — les deux valeurs bougent ensemble, voir `.sticky-cta`. ⚠️ `--cookie-banner-h` s'y AJOUTE : le bandeau cookies est lui aussi en `position: fixed`, et il est bien plus haut que la barre. Sa hauteur est MESURÉE par assets/js/tracking.js (elle dépend de la longueur des textes et du nombre de boutons, donc de site.json) et posée sur ``. Elle vaut 0px quand le bandeau est fermé — c'est le repli de `var()`, et c'est aussi ce que voit un visiteur sans JavaScript. */ padding-bottom: calc(4.5rem + var(--cookie-banner-h, 0px)); } img, svg { max-width: 100%; } img { height: auto; } a { color: var(--accent-bright); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:hover { text-decoration-thickness: 2px; } /* Focus visible. `outline` et non `box-shadow` : le mode contrastes forcés de Windows supprime les ombres portées et ne garde que les outlines — avec une ombre, il n'y aurait AUCUN focus visible dans ce mode. `--focus-ring` est une variable de contexte : les sections sombres la repassent en blanc plus bas, et l'héritage des custom properties suffit, sans dupliquer cette règle. */ :focus-visible { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-offset); } /* ================================================= Titres et prose partagée */ h1, h2, h3 { color: var(--text-strong); font-family: var(--font-display); font-weight: var(--display-weight); line-height: var(--lh-tight); letter-spacing: var(--display-tracking); margin: 0 0 var(--sp-4); text-wrap: balance; /* ⚠️ Garde-fou de DÉBORDEMENT, pas de confort. Un mot long en capitales à `--fs-hero` déborde la fenêtre : « CONFIDENTIALITÉ » réclame ~333 px à 320 px de large, et `npm run layout` attrapait le scroll horizontal qui en résultait sur /politique-de-confidentialite/. `break-word` ne coupe QUE lorsque le mot ne tient pas sur une ligne à lui seul — les titres courts ne bougent pas. ⚠️ Pas de `hyphens: auto` ici, et ne pas le remettre. Il ajoutait bien le trait d'union (le `lang="fr"` du document donne le dictionnaire), mais il coupait en plein mot alors que le mot tenait sur la ligne SUIVANTE : « DOSSARDS RÉ- / SERVÉS » dans le hero de /devenir-association-beneficiaire/. Un titre en capitales à `--fs-hero` veut le retour à la ligne, pas la césure. Contrepartie assumée : la coupure du garde-fou ci-dessus se fait sans signe. ⚠️ Les deux dépôts d'épreuve n'ont jamais porté cette déclaration — ils sont déjà conformes, rien à y changer. */ overflow-wrap: break-word; } h1, h2 { text-transform: var(--display-transform); } /* `pre-line` rend actif le saut de ligne écrit dans le JSON (« \n » dans `hero.title`). C'est le seul levier de mise en page laissé à la rédaction : le contenu vit en JSON, donc pas de `
` à poser dans un gabarit paginé, et un titre de hero se coupe là où la phrase le demande, pas là où la largeur tombe. ⚠️ Ne vaut QUE pour le saut de ligne : `pre-line` réduit toujours les suites d'espaces, donc l'espace du gabarit entre `{{ doc.hero.title }}` et le `` reste un espace simple. Et `text-wrap: balance` (plus haut) continue d'équilibrer chacun des deux fragments ainsi obtenus. ⚠️ Les deux gabarits écrivent leur `

` sur UNE ligne source ; y revenir à la ligne rendrait ce retour visible dans la page. */ h1 { font-size: var(--fs-hero); white-space: pre-line; } h2 { font-size: var(--fs-h2); } /* h3 reste en bas-de-casse et droit, dans les trois thèmes. Deux raisons : les h3 portent des phrases (« Des collecteurs déjà motivés ») et non des libellés, et une page qui empile capitales + oblique à trois niveaux de titre devient illisible. C'est la règle des deux dépôts d'épreuve, reprise telle quelle. */ h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); text-transform: none; font-style: normal; } p { margin: 0 0 var(--sp-4); max-width: var(--measure); } p:last-child { margin-bottom: 0; } strong { color: var(--text-strong); font-weight: 700; } /* Surtitre. En capitales dans les trois thèmes : c'est un libellé, pas une phrase, et sa fonction est de nommer la section. */ .eyebrow { display: block; margin: 0 0 var(--sp-3); color: var(--accent-bright); font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; max-width: none; } .eyebrow--on-dark { color: var(--text-highlight-on-dark); } .lead { font-size: var(--fs-lead); line-height: var(--lh-snug); } /* ================================================================ Structure */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 820px; } .section { position: relative; padding-block: var(--section-y); } .section--alt { background: var(--bg-alt); } .section--soft { background: var(--accent-soft); } /* Sections sombres. Trois choses basculent ensemble, et il faut les trois : la couleur du texte, celle des titres, et l'anneau de focus — un anneau bleu sur un aplat bleu nuit ne se voit pas (mesuré à 1,7:1 dans le dépôt Marathon). */ .section--accent, .section--accent-deep, .section--night { color: var(--text-on-dark-muted); --focus-ring: var(--c-white); } .section--accent { background: var(--bg-accent); } .section--accent-deep { background: var(--bg-accent-deep); } .section--night { background: var(--bg-night); } .section--accent h1, .section--accent h2, .section--accent h3, .section--accent-deep h1, .section--accent-deep h2, .section--accent-deep h3, .section--night h1, .section--night h2, .section--night h3 { color: var(--text-on-dark); } .section--accent strong, .section--accent-deep strong, .section--night strong { color: var(--text-on-dark); } .section--accent a:not(.btn), .section--accent-deep a:not(.btn), .section--night a:not(.btn) { color: var(--text-highlight-on-dark); } .section__head { margin-bottom: var(--sp-12); } .section__head > p { font-size: var(--fs-lead); line-height: var(--lh-snug); } /* Filet de marque : la signature graphique la moins coûteuse à décliner. Le neutre en fait un aplat, les deux épreuves un dégradé — `--rule-brand` change de NATURE d'un thème à l'autre, d'où `background` et non `background-color`. */ .rule { width: 100%; max-width: 240px; height: var(--rule-h); margin: 0 0 var(--sp-6); border: 0; background: var(--rule-brand); } .rule--full { max-width: none; } /* ================================================================= Boutons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.75rem 1.5rem; border: 2px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } /* Bouton fantôme sur fond CLAIR : le trait porte l'accent, donc il est à `--accent`, pas à une bordure décorative. */ .btn--ghost { background: transparent; border-color: var(--accent); color: var(--accent); } .btn--ghost:hover { background: var(--accent); color: var(--text-on-accent); } /* Bouton fantôme sur fond SOMBRE. `--border-on-dark` vaut 0,55 d'opacité et pas 0,24 : ce trait est la seule limite du bouton, il lui faut 3:1 (WCAG 1.4.11). */ .btn--ghost-dark { background: transparent; border-color: var(--border-on-dark); color: var(--text-on-dark); } .btn--ghost-dark:hover { background: var(--c-white); border-color: var(--c-white); color: var(--text-strong); } .btn--lg { padding: 1rem 2rem; font-size: var(--fs-body); } .btn--sm { padding: 0.5rem 1rem; font-size: var(--fs-eyebrow); } .btn--block { width: 100%; } @media (min-width: 40em) { .btn--block { width: auto; } } .actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); } .actions__note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--text-body); } /* ====================================================== Hero : sous-titre et chiffres */ /* Seconde ligne du titre de page. `

` et non `

` : un titre de niveau 2 ici ouvrirait une section qui n'existe pas, et se mélangerait aux vrais

de la page dans le plan du document. Il prend la fonte d'affichage de la charte parce qu'il PROLONGE le h1 — c'est une ligne de titre, pas du chapô. */ .section__head > p.hero__subtitle, .hero__subtitle { margin: var(--sp-3) 0 var(--sp-6); max-width: none; color: var(--text-strong); font-family: var(--font-display); font-size: var(--fs-subtitle); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: var(--lh-tight); text-transform: var(--display-transform); } /* Les chiffres clés du PROGRAMME, sur une ligne. Ils ont remplacé la grille de quatre tuiles par épreuve : le contenu livré donne des chiffres agrégés sur les deux courses — une grille de tuiles serait disproportionnée pour trois valeurs qui ne dépendent plus d'une course. Le séparateur est en `::before` sur les items SUIVANTS, jamais après le dernier, et il est décoratif : `aria-hidden` n'existe pas en CSS, mais un pseudo-élément n'est de toute façon pas restitué comme du texte par les lecteurs d'écran modernes lorsqu'il ne porte que de la ponctuation. */ .hero__stats { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-8) 0 0; padding: 0; max-width: none; list-style: none; color: var(--text-strong); font-size: var(--fs-small); font-weight: 700; } /* ⚠️ Le séparateur n'existe qu'à partir du moment où les chiffres tiennent RÉELLEMENT sur une ligne. En dessous, la liste passe en colonne et un point médian en tête de ligne se lit comme une puce mal réglée — le CSS ne sait pas détecter un retour à la ligne, d'où le point de rupture explicite. */ .hero__stats { flex-direction: column; } @media (min-width: 48em) { .hero__stats { flex-direction: row; } .hero__stats li + li::before { content: "\00B7 "; margin-right: var(--sp-4); color: var(--border-strong); font-weight: 400; } } /* ⚠️ PAS DE PHOTO EN PIED DE HERO — retirée le 4 septembre 2026, et ce n'est pas un oubli. La seule photo disponible pour cet emplacement était un recadrage de `hero-foule-2027.jpg` (dépôt Marathon) amputé de sa bande de barrières ASICS : ce qui rendait le cliché admissible ici le vidait aussi de son sujet. Le hero garde donc son `padding-bottom` normal, et `.section--hero` a disparu avec la figure — la classe ne servait QU'À passer ce padding à 0 pour coller la photo à l'aplat de `.section--alt`. Toute réintroduction d'image ici doit repasser par la règle « aucune épreuve n'est nommée » : voir docs/design-system.md. */ /* ========================================================= Les événements */ /* ⚠️ Cette liste est la SEULE de la page à parler d'une autre épreuve que celle du branding courant : elle les liste toutes. Le style reste donc neutre — pas de lockup, pas de couleur d'épreuve — sinon la carte du Semi porterait la charte du Marathon sur la page du Marathon, ce qui serait faux. */ .events { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; } .event { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); } /* Le nom et la date occupent la place restante ; le bouton et son lien restent groupés à droite en grand écran, et repassent dessous en petit. */ .event__head { flex: 1 1 14rem; } .event__head h3 { margin: 0; } .event__date { margin: var(--sp-1) 0 0; max-width: none; font-size: var(--fs-small); } /* Les actions de la carte : LE bouton de demande, puis un lien discret SOUS lui. ⚠️ COLONNE, ET C'EST LE POINT. « Consulter le site dédié » était un `btn--ghost` à GAUCHE du bouton de demande jusqu'au 4 septembre 2026 : deux boutons de même taille côte à côte se lisent comme deux actions de même rang, alors qu'une seule est la conversion de la page. Le lien passe dessous, en `--fs-small` : la hiérarchie se voit sans rien lire. ⚠️ IL N'Y A PLUS DE PASTILLE DE STATUT (`.event__status`), et le lien discret n'est pas le retour du `.event__more` (« En savoir plus ») d'avant le 3 septembre 2026 : ce qu'on reprochait à celui-là était de ne pas dire où il menait. Le statut, lui, vit toujours dans le LIBELLÉ du bouton principal. `margin-left: auto` colle le groupe à droite quand la carte tient sur une ligne ; en dessous, `.event` se replie et le groupe passe sous le titre, à gauche. */ .event__actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-left: auto; /* ⚠️ Pleine largeur SOUS 480 px, et le bouton s'y étire : « DÉPOSER UNE DEMANDE D'INTÉRÊT » ne tient pas en largeur automatique à cette taille, et un bouton court collé à gauche de la carte se lisait comme un accident. Étiré, le repli se lit comme une intention. */ width: 100%; align-items: stretch; } /* Le lien discret. `--text-body` et non `--accent-bright` : un lien bleu sous un bouton bleu rejoue l'égalité de rang que la colonne vient de défaire. Le soulignement porte l'affordance de lien, la couleur d'accent arrive au survol. ⚠️ Centré sur le bouton (`align-self: center`) et non aligné à gauche : sous 480 px le bouton occupe toute la carte, un lien collé à son bord gauche paraîtrait détaché de lui. */ .event__site-link { align-self: center; color: var(--text-body); font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 0.2em; } .event__site-link:hover { color: var(--accent-bright); } @media (min-width: 30em) { .event__actions { width: auto; align-items: center; } } /* ============================ Comment ça marche : prose + illustration */ /* Deux colonnes à partir de 60em — la prose, puis une photo verticale. ⚠️ LE CONTENEUR EST LE CONTENEUR PLEIN, et ça se tient avec la grille : la colonne de texte y mesure ~540 px, soit la longueur de ligne qu'un `container--narrow` (820 px) donnait en pleine largeur. Remettre `container--narrow` sans retirer la grille couperait la prose à ~380 px. ⚠️ Sous 60em, une seule colonne et la photo EN DERNIER : elle illustre le bloc, elle ne l'introduit pas. Au-dessus du texte, elle repousserait le titre de section hors du premier écran. */ .how { display: grid; gap: var(--sp-8); } @media (min-width: 60em) { .how { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: var(--sp-16); align-items: center; } } /* `.section__head` porte une marge basse de 3rem, calibrée pour un titre qui précède une grille. Ici il précède une prose : la même marge ouvrirait un trou au milieu de la colonne. */ .how__body > .section__head { margin-bottom: var(--sp-6); } .how__figure { position: relative; margin: 0; } .how__figure img { display: block; position: relative; /* Au-dessus de l'aplat décalé du ::before. */ z-index: 1; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; /* Le visage est dans le tiers haut : un cadrage centré le décapite. */ object-position: 50% 28%; border-radius: var(--radius-lg); } @media (min-width: 60em) { .how__figure img { /* Le format natif de la photo (602x852). En colonne, plus de recadrage à faire : c'est la hauteur qui porte le bloc face à la prose. */ aspect-ratio: 3 / 4; object-position: 50% 50%; } /* Aplat décalé derrière la photo — la seule respiration graphique de la page en dehors des aplats de section. ⚠️ IL DÉBORDE VERS LA GOUTTIÈRE INTERNE, jamais vers le bord de l'écran : le décalage de 1,5rem se loge dans le `gap` de 4rem à gauche et dans le padding bas de la section en dessous. C'est pour ça qu'il n'existe QU'À PARTIR DE 60em — empilé, la colonne touche la gouttière du conteneur (1,25rem au minimum) et l'aplat sortirait de la page, ce que `npm run layout` signalerait en débordement horizontal. */ .how__figure::before { content: ""; position: absolute; z-index: 0; left: calc(var(--sp-6) * -1); bottom: calc(var(--sp-6) * -1); width: 62%; height: 58%; background: var(--accent-soft); border-radius: var(--radius-lg); } } /* ============================================================ Bandeau photo */ /* Une respiration pleine largeur entre les étapes et la section sombre. ⚠️ IMAGE DE FOND, pas de `` : le bandeau n'a pas de rapport de forme à respecter — sa hauteur est fixée par le `clamp`, la photo s'y recadre. Un `` demanderait `object-fit` + `aspect-ratio` pour le même résultat, et exposerait un élément vide de plus à l'arbre d'accessibilité. ⚠️ Cette hauteur est un PLANCHER autant qu'un plafond : sous ~140 px, une photo de foule ne se lit plus et le bandeau passe pour une bande de couleur sale. */ .photo-band { height: clamp(150px, 24vw, 280px); background-image: url("/assets/img/band-coureurs.jpg"); background-size: cover; background-position: center; } /* =========================================== Phrase mise en avant (statement) */ /* Une phrase isolée, en gras, qui porte la promesse d'un bloc — « L'intégralité des dons collectés revient à l'association », « L'éligibilité ne garantit pas l'attribution ». Le document livré les met en gras sur leur propre ligne : c'est une phrase d'appui, pas un paragraphe de plus. Sur fond sombre, la couleur est reprise par `.section--night strong` ; d'où le `` implicite du poids ici et la couleur héritée plutôt que forcée. */ .statement { margin-top: var(--sp-6); color: var(--text-strong); font-size: var(--fs-lead); font-weight: 700; line-height: var(--lh-snug); } .section--night .statement, .section--accent-deep .statement { color: var(--text-on-dark); } /* ============================================================== Sous-blocs */ /* Deux sous-blocs sous un même titre de section — les conditions d'éligibilité et les règles d'attribution. Les fusionner en une seule liste ferait disparaître exactement ce qu'il fallait dire : remplir les conditions ne donne pas droit à des dossards. */ .subsections { display: grid; gap: var(--sp-12); } @media (min-width: 60em) { .subsections { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-16); } } .subsection h3 { margin-top: 0; } .subsection .statement { margin-top: var(--sp-4); } /* ========================================================= Étapes numérotées */ .steps__grid { display: grid; gap: var(--sp-8); margin: 0; padding: 0; list-style: none; /* Le compteur porte la numérotation : elle ne doit JAMAIS être écrite dans les titres, sinon insérer une étape demande de renuméroter la prose. */ counter-reset: step; } @media (min-width: 48em) { .steps__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 72em) { .steps__grid { grid-template-columns: repeat(4, 1fr); } } .step { counter-increment: step; } .step::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--sp-4); background: var(--accent-soft); border-radius: var(--radius-pill); color: var(--text-on-soft); font-family: var(--font-display); font-size: var(--fs-lead); font-weight: var(--display-weight); line-height: 1; } .step h3 { margin-bottom: var(--sp-2); } .step p { margin: 0; font-size: var(--fs-small); } /* =============================================================== Checklists */ .checklist { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; max-width: var(--measure); } .checklist li { position: relative; padding-left: 2rem; } /* La coche est un pseudo-élément et pas un caractère du texte : elle est décorative, un lecteur d'écran n'a pas à l'annoncer avant chaque item. La structure