/* ═══════════════════════════════════════════════════════════════════════════ PETANQUE BELGE (Pétanque Belge) — L'ACCUEIL, « l'Horloge du dimanche ». Direction EMAIL & ACIER. Aucune couleur en dur : rien que les jetons de assets/css/app.css, si bien que Plein Cagnard et La Buvette s'appliquent ici sans une regle de plus. Trois decisions commandent le reste. 1. L'ORDRE EST DANS LE DOCUMENT, PAS DANS LA FEUILLE. Moment::blocs() rend une liste, la vue la pose dans cet ordre, et cette feuille ne contient AUCUN « order ». L'ordre du DOM reste donc l'ordre du clavier et celui du lecteur d'ecran. La grille ne fait que decider de la LARGEUR d'un bloc, jamais de sa place dans la lecture. 2. UN SEUL CHIFFRE DOMINANT PAR ECRAN (commandement 3). Sur l'accueil c'est le nom du terrain dans l'en-tete — l'objet le plus gros de la page. Le rang de « Et moi ? » plafonne donc a 2,6 rem, comme la ligne de classement : il domine SON bloc, pas la page. 3. LA METEO EST UNE INFORMATION, PAS UN DECOR. Le commandement 2 interdit les degrades decoratifs ; la drache et le cagnard n'en sont pas. Ils portent la meme donnee que la phrase juste en dessous, sous une seconde forme, pour le joueur qui balaye la page sans la lire (WCAG 1.4.1 pris a l'envers : jamais la couleur SEULE, mais la couleur en plus du mot). Une seule couche, une seule opacite, et rien sous les 640 px de large. Ce que cette feuille ne fait PAS : redefinir .scene, .carte, .pastille, .bouton, .ligne-classement, .journee, .prochaine, .jeton, .surtitre — ils appartiennent au socle et sont consommes tels quels. ═══════════════════════════════════════════════════════════════════════════ */ @layer pages { /* ═══════════════════════════════════════════════════════ 1. L'HORLOGE ══ Une grille bornee. minmax(0, 1fr) et non 1fr : sans le zero, un tableau ou un nom long pousse la colonne au-dela de la page (blow-out), et le text-overflow des noms cesse de fonctionner. Deux largeurs, pas trois : un bloc prend la page entiere (.acc-bloc-large) ou une demi-colonne. Moment::blocs() garantit que « fil » et « annonces » tombent cote a cote — ce sont les deux seuls demi-blocs du systeme, et l'invariant est ecrit dans l'enum, pas ici. */ .horloge { display: grid; gap: clamp(var(--r5), 3.5vw, var(--r7)); grid-template-columns: minmax(0, 1fr); padding-block: var(--r2) var(--r4); } .horloge > * { min-width: 0; } @media (min-width: 62rem) { .horloge { grid-template-columns: repeat(2, minmax(0, 1fr)); } .horloge > .acc-bloc-large { grid-column: 1 / -1; } } /* Les jours ou l'on joue, l'ecran ne se partage pas : le terrain d'abord, et une seule colonne quoi qu'il arrive. Le selecteur d'attribut porte sa propre specificite (0,2,0) — il gagne sur la regle de la media query sans dependre de l'ordre d'ecriture. */ .horloge[data-moment="tirage"], .horloge[data-moment="direct"] { grid-template-columns: minmax(0, 1fr); } /* Le titre de bloc. La vue ecrit

: le socle donne aux h2 la famille d'affiche et un interlignage de .95, que .surtitre ne surcharge pas (il ne porte ni font-family ni line-height). Un surtitre en Big Shoulders a 11 px se lit mal — c'est exactement le defaut T2 corrige par le socle sur h3/h4. On le repare ici pour les six titres de la page, sans toucher ni la vue ni le composant. */ .acc-bloc > .surtitre { font-family: var(--texte); line-height: 1.3; } /* ══════════════════════════════════════════ 2. LE BANDEAU — LA SCENE ══ Quand aucune journee ne fait l'actualite (Veille, Hors-saison), l'accueil retombe sur la photo. Elle passe par la Scene du socle — halo dore, vignettage, voile en cinq arrets, grain — parce que le commandement 5 ne souffre pas d'exception. Pourquoi le traitement est REECRIT ici plutot que consomme : la vue ecrit
, pas « scene ». Les valeurs ci-dessous sont la transcription litterale du rapport 01 § 4.5, celle-la meme que app.css (.scene) et p-acces.css (.acces-scene) portent deja — pas une variante. Le jour ou la vue ecrira « scene acc-scene », ce bloc tombe : c'est note dans le journal de colmatage. */ .acc-scene { position: relative; isolation: isolate; overflow: hidden; background: var(--bleu-nuit); } .acc-scene > picture, .acc-scene > img, .acc-scene > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; /* le socle borne les images a 100% : ici c'est le cadre qui borne, pas l'image */ object-fit: cover; object-position: 50% 42%; z-index: -3; } /* La chaleur doree en haut a droite rattache la photo a la marque ; le vignettage referme le cadre sur le sujet. Identique dans les deux themes : c'est la matiere, pas l'humeur. */ .acc-scene::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(circle at 78% 8%, rgba(245, 180, 28, .20) 0%, transparent 62%), radial-gradient(ellipse 100% 98% at 50% 45%, transparent 34%, rgba(5, 9, 22, .50) 100%); background: radial-gradient(circle at 78% 8%, oklch(80.9% .162 81.4 / .20) 0%, transparent 62%), radial-gradient(ellipse 100% 98% at 50% 45%, transparent 34%, oklch(9% .02 268 / .50) 100%); } /* Le voile — LA BUVETTE par defaut ici, comme dans le socle : cinq arrets 0/26/52/82/100 % aux opacites .62/.14/.30/.86/1, transcription des 0x9E/0x24/0x4D/0xDB de Scene (terrain.dart). C'est lui qui permet au titre de tenir en bas SANS text-shadow. Chaque degrade est ecrit deux fois : la version rgba() sert de repli aux navigateurs sans oklch(), qui ignorent la seconde declaration. Sans elle, ils n'auraient AUCUN voile — c'est-a-dire du texte nu sur une photo. Le repli ne peut pas passer par une variable : une valeur invalide stockee dans un jeton ne tombe pas en repli, elle invalide la declaration. */ .acc-scene::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(16, 24, 56, .62) 0%, rgba(16, 24, 56, .14) 26%, rgba(16, 24, 56, .30) 52%, rgba(16, 24, 56, .86) 82%, rgba(16, 24, 56, 1) 100%); background: linear-gradient(180deg, oklch(18.3% .05 270 / .62) 0%, oklch(18.3% .05 270 / .14) 26%, oklch(18.3% .05 270 / .30) 52%, oklch(18.3% .05 270 / .86) 82%, oklch(18.3% .05 270 / 1) 100%); } .acc-scene > .enveloppe { position: relative; padding-block: clamp(var(--r6), 7vw, var(--r8)); min-height: clamp(220px, 26vw, 320px); display: flex; flex-direction: column; justify-content: flex-end; } .acc-scene h1 { color: var(--jaune); } .acc-scene-surtitre { color: var(--jaune); } .acc-scene-sous { margin: 0; max-width: 46ch; color: var(--sur-panneau); font-size: 1.02rem; } @media (max-width: 640px) { .acc-scene > .enveloppe { min-height: 240px; } } } /* — PLEIN CAGNARD : la meme architecture, RETOURNEE. Le voile n'est plus marine mais ivoire, et il monte du bas comme la lumiere rasante de 13 h sur du gravier clair. Deux portes d'entree, et une seule raison : une regle @media ne se combine pas avec un selecteur d'attribut. Il faut donc ecrire le cas « choix explicite » ET le cas « aucun choix, telephone regle en clair ». Sans le second, un joueur en Auto garderait une photo de nuit sur une page de jour. Le surtitre passe au bronze --or-800 : l'or de la marque ne fait que 1,66:1 sur l'ivoire, il n'a pas le droit d'etre une lettre la (commandement premier). */ @media (prefers-color-scheme: light) { @layer pages { :root:not([data-theme="buvette"]):not([data-theme="sombre"]) .acc-scene h1 { color: var(--marine-900); } :root:not([data-theme="buvette"]):not([data-theme="sombre"]) .acc-scene .acc-scene-sous { color: var(--marine-800); } :root:not([data-theme="buvette"]):not([data-theme="sombre"]) .acc-scene .acc-scene-surtitre { color: var(--or-800); } :root:not([data-theme="buvette"]):not([data-theme="sombre"]) .acc-scene::after { background: linear-gradient(180deg, rgba(250, 243, 227, .10) 0%, rgba(250, 243, 227, .04) 30%, rgba(250, 243, 227, .38) 62%, rgba(250, 243, 227, .92) 86%, rgba(250, 243, 227, 1) 100%); background: linear-gradient(180deg, oklch(96.5% .022 87 / .10) 0%, oklch(96.5% .022 87 / .04) 30%, oklch(96.5% .022 87 / .38) 62%, oklch(96.5% .022 87 / .92) 86%, oklch(96.5% .022 87 / 1) 100%); } } } @layer pages { :root[data-theme="cagnard"] .acc-scene h1, :root[data-theme="clair"] .acc-scene h1 { color: var(--marine-900); } :root[data-theme="cagnard"] .acc-scene .acc-scene-sous, :root[data-theme="clair"] .acc-scene .acc-scene-sous { color: var(--marine-800); } :root[data-theme="cagnard"] .acc-scene .acc-scene-surtitre, :root[data-theme="clair"] .acc-scene .acc-scene-surtitre { color: var(--or-800); } :root[data-theme="cagnard"] .acc-scene::after, :root[data-theme="clair"] .acc-scene::after { background: linear-gradient(180deg, rgba(250, 243, 227, .10) 0%, rgba(250, 243, 227, .04) 30%, rgba(250, 243, 227, .38) 62%, rgba(250, 243, 227, .92) 86%, rgba(250, 243, 227, 1) 100%); background: linear-gradient(180deg, oklch(96.5% .022 87 / .10) 0%, oklch(96.5% .022 87 / .04) 30%, oklch(96.5% .022 87 / .38) 62%, oklch(96.5% .022 87 / .92) 86%, oklch(96.5% .022 87 / 1) 100%); } /* ══════════════════════════════════ 3. LE BANDEAU — L'ETAT DU CIRCUIT ══ Des qu'il se passe quelque chose, la photo cede la place a un etat. Il est COURT : 96 px la ou la Scene en prend 260. Le rapport 03 § 3.2-d le dit sans detour — le bloc le plus haut de la page etait le moins utile, et c'etait le LCP. Une seule regle a retenir : l'or dit que quelque chose se passe A CETTE MINUTE (tirage, direct), le marine dit un etat pose (la veille, la cloture, le lendemain). L'or cesse d'etre une couleur d'humeur pour devenir une information — c'est Moment::bandeau() qui tranche, pas la feuille. */ .acc-etat { padding-block: var(--r5); } .acc-etat h1 { font-size: clamp(2rem, 6.5vw, 3.2rem); } .acc-etat-surtitre { display: flex; align-items: center; gap: .55rem; margin: 0 0 .35rem; font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } /* Le trait de tete du surtitre, comme .surtitre du socle : c'est la meme grammaire d'en-tete d'un bout a l'autre du site. */ .acc-etat-surtitre::before { content: ""; flex: none; width: 24px; height: 3px; } .acc-etat-sous { margin: .4rem 0 0; font-size: 1rem; font-weight: 600; } /* — L'OR : il se passe quelque chose sur un terrain, maintenant. */ .acc-etat-or { background: var(--jaune); color: var(--bleu-nuit); } .acc-etat-or h1 { color: var(--bleu-nuit); } .acc-etat-or .acc-etat-surtitre { color: var(--or-950); } .acc-etat-or .acc-etat-surtitre::before { background: var(--bleu-nuit); } .acc-etat-or .acc-etat-sous { color: var(--or-950); } /* — LE MARINE : un etat du circuit, pose et lisible. */ .acc-etat-marine { background: var(--panneau); color: var(--sur-panneau); } .acc-etat-marine h1 { color: var(--jaune); } .acc-etat-marine .acc-etat-surtitre { color: var(--sur-panneau-2); } .acc-etat-marine .acc-etat-surtitre::before { background: var(--jaune); } .acc-etat-marine .acc-etat-sous { color: var(--sur-panneau-2); } /* ═══════════════════════════════════════════════════ 4. LA JOURNEE ══ La carte marine du socle (.prochaine), plus ce que le site n'avait pas : la meteo et la distance, rapatriees de l'application (rapport 03, P6). */ .acc-journee { position: relative; isolation: isolate; /* le ciel reste DANS la carte, sous le texte */ overflow: hidden; } .acc-delai { font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--or-300); /* le seul or ecrivable sur le marine : 8,7:1 */ white-space: nowrap; } /* — LE CIEL. Une couche, une opacite, et rien d'autre. « Ca risque de dracher sur Latour » se voit avant de se lire : les traits de pluie tombent a 68°, exactement comme le signe « drache » des quatorze signes du circuit (helpers.php). Le cagnard, lui, est un soleil DUR venu du haut-droite — pas une aurore. Sous 640 px la couche disparait : sur un telephone la carte est deja pleine, et une texture derriere un texte de 15 px coute plus qu'elle ne rapporte. */ .acc-journee[data-ciel]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } .acc-journee[data-ciel="drache"]::before { background: repeating-linear-gradient(68deg, transparent 0 14px, color-mix(in oklch, var(--marine-100) 22%, transparent) 14px 15px, transparent 15px 27px, color-mix(in oklch, var(--marine-100) 13%, transparent) 27px 28px); } .acc-journee[data-ciel="cagnard"]::before { background: radial-gradient(circle at 88% -6%, color-mix(in oklch, var(--or-500) 34%, transparent) 0%, color-mix(in oklch, var(--or-500) 10%, transparent) 26%, transparent 58%); } .acc-journee[data-ciel="vent"]::before { background: repeating-linear-gradient(96deg, transparent 0 22px, color-mix(in oklch, var(--marine-100) 15%, transparent) 22px 24px, transparent 24px 46px); } .acc-journee[data-ciel="frais"]::before { background: linear-gradient(196deg, color-mix(in oklch, var(--marine-300) 20%, transparent) 0%, transparent 54%); } @media (max-width: 640px) { .acc-journee[data-ciel]::before { display: none; } } /* La phrase de la buvette. C'est elle qui porte l'information — la couche ci-dessus n'en est que le double visuel. */ .acc-ciel { margin: var(--r4) 0 0; padding-left: .8rem; border-left: 3px solid var(--jaune); color: var(--blanc); font-size: 1.02rem; font-weight: 600; line-height: 1.4; max-width: 44ch; } .acc-ciel-chiffres { margin: .3rem 0 0 .8rem; font-size: .82rem; font-weight: 600; color: var(--marine-200); font-variant-numeric: tabular-nums; } /* Une journee annulee : ambre, jamais rouge. Personne n'a rien casse, il drache. La pastille rouge de la vue dit l'etat, cette phrase dit la suite. */ .acc-annulee { margin: var(--r4) 0 0; padding: .7rem .9rem; border-radius: var(--arrondi); background: rgba(255, 255, 255, .09); border-left: 4px solid var(--ambre-300); color: var(--marine-100); font-size: .93rem; font-weight: 600; } /* — QUI VIENT. Le lien du bas de carte : les cinq premiers jetons, puis le compte. Cible tactile pleine largeur, et un filet de separation qui marque la fin de la carte. */ .acc-presents { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; margin-top: var(--r5); padding-top: var(--r4); min-height: 44px; border-top: 1px solid rgba(255, 255, 255, .16); color: var(--marine-100); text-decoration: none; font-size: .9rem; font-weight: 600; } .acc-presents:hover { color: var(--jaune); } .acc-presents:hover .acc-presents-mot { text-decoration: underline; } .acc-presents-mot { min-width: 0; } /* Le « +33 » ferme la file : creux, pour qu'on lise les visages d'abord. */ .acc-jeton-plus { background: transparent; color: var(--marine-100); box-shadow: inset 0 0 0 1.5px var(--marine-500); font-size: .68rem; } /* ═══════════════════════════════════════════════════ 5. ET MOI ? ══ Quatre comptes actifs sur plus de quatre cents licencies. Pour qui n'est pas entre, ce bloc EST la porte du circuit ; pour les autres, c'est le seul endroit de l'accueil qui parle d'eux (rapport 03 § 3.2-a). */ /* — LA PORTE — */ .acc-porte { padding: var(--r5); } .acc-porte-titre { margin: 0; font-family: var(--titre); font-weight: 800; font-size: clamp(1.6rem, 4.5vw, 2.1rem); line-height: .95; letter-spacing: -.012em; color: var(--encre-accent); } .acc-porte-texte { margin: var(--r3) 0 var(--r4); max-width: 52ch; color: var(--encre-2); line-height: 1.55; } /* — MOI — */ .acc-moi { padding: var(--r5); } .acc-moi-vide { margin: 0 0 var(--r4); max-width: 52ch; color: var(--encre-2); line-height: 1.55; } /* La rangee de chiffres. Le rang tient la colonne de tete, exactement comme dans la ligne de classement : un joueur qui a appris a lire une page les a toutes apprises. Les deux mesures qui suivent sont separees par un filet, pas par un cadre — trois cases donneraient trois chiffres a egalite. */ .acc-moi-chiffres { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--r4) var(--r5); } .acc-moi-rang, .acc-moi-mesure { margin: 0; } .acc-moi-rang { flex: none; } .acc-moi-mesure { flex: none; padding-left: var(--r5); border-left: 1px solid var(--trait); } .acc-moi-chiffres .etiquette { display: block; margin-top: .15rem; } .acc-rang { display: block; font-family: var(--titre); font-weight: 800; font-size: 2.6rem; line-height: .86; letter-spacing: -.02em; color: var(--encre); font-variant-numeric: tabular-nums; } .acc-rang sup { font-size: .36em; vertical-align: super; letter-spacing: 0; } /* Les points et les journees : Archivo tabulaire, pas une seconde affiche. C'est la meme discipline que .ligne-classement .score .pts. */ .acc-nombre { display: block; font-family: var(--texte); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--chart-moi); font-variant-numeric: tabular-nums; } /* La phrase du deuxieme couteau. Elle vaut le podium pour les 90 % qui ne le verront jamais : elle est donc ECRITE, pas suggeree. */ .acc-moi-mot { margin: var(--r4) 0 0; padding: .65rem .9rem; background: var(--jaune-voile); border-left: 4px solid var(--jaune); border-radius: 0 var(--arrondi) var(--arrondi) 0; color: var(--encre); font-size: .95rem; font-weight: 600; line-height: 1.45; max-width: 54ch; } .acc-moi-suite { margin: var(--r4) 0 0; color: var(--encre-2); font-size: .95rem; } .acc-moi-suite strong { color: var(--encre); font-weight: 800; } .acc-moi .actions, .acc-porte .actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: var(--r5); } /* ═══════════════════════════════════════════════════ 6. LE PODIUM ══ Trois marches, en LISTE et non en escalier : l'escalier a trois colonnes appartient a /classement, ou il est l'objet de la page. Ici le podium est un bloc parmi six, et il doit rester lisible dans une demi-colonne comme dans la page entiere. La boule d'acier marque le podium ; le filet or marque le premier. Le rang ne repose donc jamais sur la seule couleur (WCAG 1.4.1). */ .acc-podium-carte { padding: var(--r5); } .acc-podium-lieu { margin: 0 0 var(--r4); font-family: var(--titre); font-weight: 900; font-size: clamp(1.5rem, 4vw, 2rem); line-height: .95; letter-spacing: -.012em; color: var(--encre-accent); } .acc-podium-lieu .muet { font-family: var(--texte); font-weight: 600; font-size: .82rem; letter-spacing: 0; white-space: nowrap; } .acc-podium { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--r2); } .acc-marche { display: grid; grid-template-columns: auto 1.9rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: var(--arrondi); background: var(--sol-2); } /* Le premier : l'email marine, et le filet or a gauche. C'est la seule marche qui change de fond — deux marches sur trois resteraient sinon a departager par une nuance de gris. */ .acc-marche-1 { background: var(--panneau); color: var(--blanc); box-shadow: inset 4px 0 0 var(--jaune); } .acc-marche-1 .acc-place { color: var(--jaune); } .acc-marche-1 .acc-bilan { color: var(--marine-200); } .acc-marche-1 .muet { color: var(--marine-300); } /* LA BOULE D'ACIER — la recette du socle (--acier), consommee et non recopiee : eclat dur, reflet de comptoir par le bas-droite, corps froid. Le liseré interieur d'1 px detache le bas de la sphere de l'email du panneau, ou sans lui la boule se lit en croissant. */ .acc-boule { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--acier); box-shadow: var(--acier-ombre), inset 0 0 0 1px rgba(255, 255, 255, .12); } .acc-marche-1 .acc-boule { width: 30px; height: 30px; } .acc-place { font-family: var(--titre); font-weight: 900; font-size: 1.7rem; line-height: .9; text-align: center; color: var(--encre-2); font-variant-numeric: tabular-nums; } .acc-equipe { font-weight: 700; font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; } .acc-bilan { text-align: right; font-weight: 800; font-size: .92rem; color: var(--encre-2); font-variant-numeric: tabular-nums; white-space: nowrap; } /* « La tournee est pour… » — la phrase que le circuit attend depuis le matin. Elle a droit a l'or profond, qui est une lettre lisible partout. */ .acc-tournee { margin: var(--r4) 0 0; padding: .6rem .85rem; background: var(--jaune-voile); border-radius: var(--arrondi); color: var(--encre); font-size: .98rem; line-height: 1.4; } .acc-tournee strong { color: var(--jaune-profond); font-weight: 800; } .acc-podium-carte .actions { margin-top: var(--r4); } /* ═════════════════════════════════════ 7. LE FIL ET LES ANNONCES ══ Les deux seuls blocs en demi-colonne. Ils tombent toujours cote a cote : Moment::blocs() les cite toujours l'un apres l'autre. */ /* Le fil et les annonces se partagent une rangee : leurs cartes doivent descendre au meme fond, sinon la rangee montre une marche. Le bloc s'etire, la carte remplit, et le bouton du fil se pose en bas (margin-top: auto). */ .acc-fil { display: flex; flex-direction: column; } .acc-fil-carte { padding: var(--r5); display: flex; flex-direction: column; gap: var(--r4); flex: 1 1 auto; } .acc-fil-mot { margin: 0; color: var(--encre); font-size: 1.02rem; line-height: 1.5; max-width: 42ch; } .acc-fil-carte .actions { margin-top: auto; } .acc-annonces .annonce .titre { color: var(--encre); } /* ══════════════════════════════════════════════════ 8. LE CLASSEMENT ══ */ .acc-series { display: grid; gap: var(--r5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .acc-series > div { min-width: 0; } /* ═════════════════════════════════════════════════ 9. SANCTUAIRES ══ */ @media (prefers-reduced-motion: reduce) { /* Rien de cette page n'anime : les seuls mouvements sont ceux du socle (survol de carte, de bouton). On coupe le survol souleve, qui est le seul deplacement qu'un lecteur sensible puisse rencontrer ici. */ .acc-bloc .carte-lien:hover { transform: none; } } /* L'accueil ne s'imprime pas — mais s'il part a l'imprimante, il doit rester une page, pas une photo de nuit sur du papier. */ @media print { .acc-scene { background: none; min-height: 0; } .acc-scene > picture, .acc-scene::before, .acc-scene::after { display: none !important; } .acc-scene h1, .acc-scene-sous, .acc-scene-surtitre { color: #000 !important; } .acc-journee[data-ciel]::before { display: none !important; } .acc-presents { display: none !important; } .horloge { gap: var(--r4); } .acc-bloc { break-inside: avoid; } } }