:root{
--or:#E9B824;
--or-clair:#F4D77A;
--vert:#2FA05E;
--vert-clair:#3CBB72;
/* Le vert fané des soirées du bar.
Il ne sert qu'à une chose : dire qu'une ligne rangée avec les matchs n'en
est pas un. Fané et non le vert vif de la maison — celui-là est pris par
les boutons et les pastilles « ouvert », et deux verts vifs côte à côte
ne se distinguent plus. Assez clair pour porter du texte noir dessus,
comme l'or. */
--vert-fade:#93B9A0;
--vert-fade-clair:#AECFB8;
--rouge:#C4553D;
--rouge-clair:#D2624A;
--creme:#F5EBD8;
--tx:#D8D2C6;
--tx-2:#BFC7BB;
--line:rgba(255,255,255,.06);
--line-2:rgba(255,255,255,.10);
--line-soft:rgba(255,255,255,.04);
--carte:#0F1612;
--carte-2:#0B120E;
--noir:#050606;
--noir-2:#0A0D0C;
--r:12px;
--pad:26px;
/* Interligne unique pour tous les titres. Les capitales accentuées
du display demandent nettement plus d'un cadratin ; les nombres
isolés (dates, prix) gardent leur 1, ce ne sont pas des titres. */
--titre-lh:1.16;
--ui:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
--disp: 'Oswald', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
--body:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
/* width:100% + padding ne doit jamais déborder du conteneur. */
*,*::before,*::after{box-sizing:border-box}
html,body{
margin:0;padding:0;height:100%;background:var(--noir);color:var(--creme);
}
html{scroll-behavior:smooth}
body{font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
/* Aucun lien souligné par défaut : le survol se signale par la couleur or. */
a{text-decoration:none;color:inherit}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--pad);box-sizing:border-box}
/* Le header est fixe : sans cette marge, il recouvrirait le haut
de la section visée par une ancre du menu. */
/* La section s'arrête pile sous la barre : les trente pixels de rab
laissaient voir la fin de la section précédente au-dessus du titre, et
c'est justement ce qu'on ne veut pas voir en arrivant. L'air, la section
l'a déjà — c'est son propre `padding` de 64px, au-dessus de son titre. */
section[id],#programme{scroll-margin-top:var(--tete-h,74px)}
/* Le programme arrive vingt pixels plus bas que les autres : son intitulé est
un filet doré collé au haut du bloc, sans le `padding` qui donne de l'air
aux sections suivantes. */
#programme{scroll-margin-top:calc(var(--tete-h,74px) + 60px)}
.sec{padding:64px 0}
.page{width:100%}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--ui);font-weight:600;font-size:13.5px;
letter-spacing:.16em;text-transform:uppercase;
padding:12px 32px;border-radius:8px;border:1px solid transparent;
cursor:pointer;transition:transform .18s ease,box-shadow .22s ease,background .2s ease,color .2s ease;
text-decoration:none;color:var(--creme);
}
.btn-or{background:var(--or);color:#12100A}
/* Au survol le bouton s'inverse : fond transparent, texte et contour dorés.
Il s'éclaircissait vers un jaune pâle et montait de deux pixels — le
contour existe déjà au repos, en transparent, donc rien ne change de
taille et la barre du haut ne frémit pas au passage de la souris. */
.btn-or:hover{background:transparent;color:var(--or);border-color:var(--or);box-shadow:none}
.btn-ghost{background:rgba(245,235,216,.03);border-color:var(--line-2);color:var(--creme)}
.btn-ghost:hover{background:rgba(233,184,36,.10);border-color:var(--or);color:var(--or)}
/* ── Cartes ───────────────────────────────────────────────── */
.card{
background:linear-gradient(170deg,var(--carte-2),var(--carte));
/* Même filet doré que le compte à rebours, la carte du hero,
l'ardoise et les bannières. */
border:1px solid color-mix(in srgb, var(--or) 30%, transparent);
border-radius:var(--r);
}
/* Icônes SVG recolorées en or via mask (les fichiers sources sont noirs) */
.ico{
display:block;width:46px;height:46px;
background:var(--or);
-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
transition:background .25s ease,transform .25s ease;
}
/* ══ NAV ═══════════════════════════════════════════════════ */
.nav{
position:fixed;top:0;left:0;right:0;z-index:60;
transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease,
transform .38s cubic-bezier(.2,.7,.3,1),opacity .28s ease;
border-bottom:1px solid transparent;
}
/* Escamotée à la descente, elle revient dès qu'on remonte. */
.nav.cachee{transform:translateY(-100%);opacity:0;pointer-events:none}
.nav.stuck{
background:rgba(8,11,9,.88);backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);border-bottom-color:var(--line);
}
.nav-in{
max-width:1320px;margin:0 auto;padding:14px var(--pad);
display:flex;align-items:center;justify-content:space-between;gap:24px;
}
/* ══ BANDEAU D'ANNONCE ═════════════════════════════════════
Premier enfant de l'en-tête : il partage son fond et son
escamotage au défilement. Un ruban continu y fait passer les
prochaines affiches, deux copies identiques à la suite. */
.bandeau{
display:flex;align-items:center;gap:16px;
padding:0 var(--pad);background:transparent;color:var(--creme);
/* 1px est le minimum réel : c'est l'opacité, pas l'épaisseur, qui
affine le filet à l'œil. Le trait n'est plus une bordure mais un
::before : une bordure vit hors de la boîte de padding, donc hors
de portée de la lueur, que l'overflow découperait. */
padding-bottom:1px;
}
.bandeau[hidden]{display:none}
/* Une lueur parcourt le filet doré, de gauche à droite, puis marque
une pause avant de repartir : un flux, pas un clignotant. Elle se
superpose au filet sans le remplacer — si l'animation ne tourne
pas, la bordure reste intacte. */
.bandeau{position:relative;overflow:hidden}
.bandeau::before{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:color-mix(in srgb, var(--or) 45%, transparent);
pointer-events:none;
}
.bandeau::after{
content:"";position:absolute;left:0;bottom:0;
width:40%;height:1px;pointer-events:none;
background:linear-gradient(90deg,
transparent,
color-mix(in srgb, var(--or) 70%, #fff) 45%,
#FFF3D0 50%,
color-mix(in srgb, var(--or) 70%, #fff) 55%,
transparent);
animation:filet-flux 5.5s linear infinite;
will-change:transform;
}
/* -100 % = la largeur de la lueur, soit 40 % du bandeau : elle part
hors champ à gauche et sort à droite à 250 % (= 100 % du bandeau).
Le palier final ménage la respiration entre deux passages. */
@keyframes filet-flux{
0% {transform:translateX(-100%)}
70% {transform:translateX(250%)}
100% {transform:translateX(250%)}
}
/* Le filet ne s'en va pas avec le bandeau : dès qu'on ferme celui-ci,
il se redessine au sommet de la barre de navigation, donc en haut de
l'en-tête. Les deux traits ne coexistent jamais — le sélecteur de
frère adjacent ne s'arme que lorsque le bandeau porte « hidden ».
Les traits partent du bord de la fenêtre et non de .nav-in, qui est
centrée et plafonnée à 1320 px : sans cela, le filet serait plus
court que le bandeau sur les grands écrans. */
.nav{overflow:hidden}
.nav-in{position:relative}
.bandeau[hidden] + .nav-in::before,
.bandeau[hidden] + .nav-in::after{
content:"";position:absolute;top:0;height:1px;
left:calc(50% - 50vw);pointer-events:none;
}
.bandeau[hidden] + .nav-in::before{
width:100vw;
background:color-mix(in srgb, var(--or) 45%, transparent);
}
.bandeau[hidden] + .nav-in::after{
width:40vw;
background:linear-gradient(90deg,
transparent,
color-mix(in srgb, var(--or) 70%, #fff) 45%,
#FFF3D0 50%,
color-mix(in srgb, var(--or) 70%, #fff) 55%,
transparent);
animation:filet-flux 5.5s linear infinite;
will-change:transform;
}
@media (prefers-reduced-motion:reduce){
.bandeau::after,
.bandeau[hidden] + .nav-in::after{animation:none;opacity:0}
}
/* Titre et croix ne défilent pas : seule la fenêtre du milieu bouge. */
.bandeau-titre{
/* 400 est une graisse réellement chargée pour Inter ; 700 était
synthétisé par le navigateur, donc plus épais que voulu. */
flex-shrink:0;color:#fff;font-family:var(--ui);font-weight:400;
font-size:13.5px;letter-spacing:.2em;text-transform:uppercase;
}
.bandeau-fenetre{
flex:1;min-width:0;overflow:hidden;text-decoration:none;color:inherit;
/* Le texte s'efface au lieu de se couper net contre le titre. */
-webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
}
.bandeau-fenetre:hover{text-decoration:none}
/* Croix tracée en SVG plutôt qu'avec le caractère × : l'épaisseur
du trait se règle au dixième, ce qu'aucune graisse de police ne
permet ici — Inter n'est chargé qu'en 400 et 600. */
.bandeau-fermer{
flex-shrink:0;width:22px;height:22px;padding:0;
border:0;background:none;color:#fff;cursor:pointer;
display:grid;place-items:center;
transition:opacity .2s ease;
}
.bandeau-fermer svg{
width:100%;height:100%;
fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;
}
.bandeau-fermer:hover{opacity:.6}
.bandeau-piste{
display:flex;width:max-content;
animation:defile var(--defile,40s) linear infinite;
}
/* Le ruban s'arrête sous le curseur : on peut lire une affiche
sans lui courir après. */
.bandeau-fenetre:hover .bandeau-piste{animation-play-state:paused}
/* -50% = la largeur d'une copie : la seconde arrive pile où la
première a commencé, la boucle ne saute pas. */
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bandeau-suite{display:flex;align-items:center}
.bandeau-ev{
display:flex;align-items:center;gap:11px;padding:8px 0;
font-family:var(--ui);font-weight:600;font-size:12.5px;letter-spacing:.04em;
white-space:nowrap;
}
.bandeau-point{
font-style:normal;font-size:8px;color:var(--or);opacity:.45;padding:0 38px;
}
/* Un seul corps de texte pour tout le ruban : la hiérarchie ne
passe que par la couleur et la graisse. Or pour ce qui situe
l'affiche — le quand, la compétition — blanc gras pour les
faits : l'heure et les équipes. */
/* Le pictogramme du sport, en blanc comme les faits qu'il annonce. */
.bandeau-ico{width:16px;height:16px;background:#fff;flex-shrink:0}
.bandeau-quand{
flex-shrink:0;color:var(--or);font-weight:600;
letter-spacing:.16em;text-transform:uppercase;
}
.bandeau-h{color:#fff;font-weight:700;font-family:inherit}
.bandeau-comp{
color:var(--or);font-weight:600;
letter-spacing:.16em;text-transform:uppercase;
}
.bandeau-aff{display:flex;align-items:center;gap:7px;color:#fff;font-weight:700}
.bandeau-sep{
font-style:normal;font-weight:600;color:var(--or);
letter-spacing:.12em;text-transform:uppercase;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 3px 10px rgba(0,0,0,.6))}
.brand span{
/* Kelly Slab, chargée en sous-ensemble dans le : elle ne
sert qu'ici. La fonte n'existe qu'en 400 : on épaissit au trait
plutôt qu'en déclarant un 700, que le navigateur simulerait en
écrasant les empattements. Le tracé se centre sur le contour,
d'où l'interlettrage relevé pour compenser. */
font-family:'Kelly Slab', var(--disp);font-size:19px;
-webkit-text-stroke:1px currentColor;
letter-spacing:.075em;color:var(--creme);text-transform:uppercase;
}
.brand{
text-decoration:none;color:var(--creme);
}
.brand:hover,.brand:focus{text-decoration:none}
/* Sélecteur de langue, entre l'écusson et le menu. */
.langue{
display:flex;gap:2px;padding:2px;flex-shrink:0;
border:1px solid var(--line-2);border-radius:7px;background:rgba(8,11,9,.5);
}
.langue button{
padding:5px 10px;border:0;border-radius:5px;background:transparent;
font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.1em;
color:var(--tx-2);cursor:pointer;transition:background .2s ease,color .2s ease;
}
.langue button:hover{color:var(--creme)}
.langue button[aria-pressed="true"]{background:var(--or);color:#12100A}
@media (max-width:960px){.nav-in .langue{margin-left:auto}}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{
font-family:var(--ui);font-weight:600;font-size:11.5px;
letter-spacing:.2em;text-transform:uppercase;color:#fff;
padding:6px 0;position:relative;transition:color .2s ease;
}
.nav-links a{ text-decoration:none }
.nav-links a::after{
content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
background:var(--or);transition:width .25s ease,height .15s ease,background .15s ease;
}
/* Pas de changement de graisse au survol : ça élargirait le texte
et ferait sauter les items voisins. Seule la couleur bouge. */
.nav-links a:hover{
color:var(--or);text-decoration:none;
}
.nav-links a:hover::after{width:100%;height:2px;background:var(--or)}
/* Accès à l'espace client. Le libellé bascule sur le prénom
une fois la personne connectée. */
/* Plus petite que ses voisins, et volontairement : le bouton doré et le
sélecteur de langue font 30px, elle en faisait 36 — elle dépassait des deux
et passait pour le bouton principal de la barre, alors qu'elle est le moins
important des trois. Le cadre serre le texte au plus près ; la taille des
lettres, elle, ne bouge pas : c'est un nom, il doit se lire. */
.compte{
display:flex;align-items:center;gap:5px;flex-shrink:0;
font-family:var(--ui);font-weight:600;font-size:11px;
letter-spacing:.12em;text-transform:uppercase;color:var(--creme);
height:26px;padding:0 4px;border:0;background:none;
transition:color .2s ease;
}
/* Ni cadre ni fond : c'est le moins important des trois éléments de la
barre, et il portait le seul contour. Le survol échange les deux couleurs
au lieu d'en imposer une troisième : déconnecté le nom passe au doré,
connecté il revient au crème. Sans cet échange, un compte connecté — déjà
doré — n'aurait montré aucune réponse au passage de la souris. */
.compte:hover{color:var(--or)}
/* L'icône garde sa couleur de repos : seul le TEXTE répond au survol.
Avec `currentColor` elle suivait le texte, et les deux changeaient
ensemble — Greg voulait le mot, pas le bonhomme. */
.compte svg{width:13px;height:13px;fill:var(--creme);flex-shrink:0}
.compte.connecte svg{fill:var(--or)}
/* Les capitales n'ont pas de jambages : sous elles, la ligne réserve une
place que rien n'occupe, et le mot paraît monté d'un cheveu alors que sa
boîte, elle, est bien centrée. On le redescend d'un pixel. L'icône n'a pas
ce problème — elle est géométrique et tombe juste. */
.compte span{line-height:1;transform:translateY(1px)}
/* Le prénom à la main, une fois connecté : c'est un nom de personne, pas un
intitulé de menu. Les capitales et l'interlettrage sautent — une écriture
manuscrite en majuscules espacées ne ressemble plus à rien — et la taille
monte, parce que cette police dessine plus petit à corps égal. */
.compte.connecte span{
font-family:'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
font-size:21px;font-weight:600;letter-spacing:0;text-transform:none;
transform:translateY(2px);
}
/* Connecté : le nom en doré signale l'état actif, et un pixel de plus —
c'est un prénom, pas un intitulé de menu, et il se lit mieux d'un degré
au-dessus. L'icône ne bouge pas : sa taille est fixée en pixels. */
.compte.connecte{color:var(--or);font-size:12px}
.compte.connecte:hover{color:var(--creme)}
/* ── L'avatar du membre ──────────────────────────────────────
Une liste fermée : le bar propose, le membre choisit, personne n'envoie
de photo. « Aucun » est une case comme les autres et vient en premier,
parce que se retirer un avatar doit être aussi facile que s'en donner un.
Le fond en damier derrière l'image : un avatar détouré sur fond sombre a
l'air d'un trou, et on ne voit pas qu'il est transparent. */
/* Sept par ligne : c'est ce qui les rend assez grands pour qu'on distingue
la chèvre au rugby de la chèvre au volley — à cinquante-six pixels elles
se ressemblaient toutes. Une grille et non un `flex` : les colonnes se
partagent la largeur, donc la taille suit celle de la carte au lieu d'être
fixée à l'avance. Quatre sur un téléphone, où sept feraient des jetons. */
/* `minmax(0,1fr)` et non `1fr` : `1fr` vaut `minmax(auto,1fr)`, et `auto`
refuse de descendre sous la taille du contenu — les colonnes restaient à
186 px sur un téléphone de 390, la grille débordait et TOUTE la page se
mettait à défiler de côté. */
.avatars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;max-width:780px}
@media (max-width:760px){.avatars{grid-template-columns:repeat(4,minmax(0,1fr))}}
.avatar{
width:100%;aspect-ratio:1;padding:0;border-radius:50%;overflow:hidden;
border:2px solid transparent;background:rgba(255,255,255,.04);
cursor:pointer;transition:border-color .18s ease,transform .18s ease;
display:flex;align-items:center;justify-content:center;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar:hover{border-color:color-mix(in srgb,var(--or) 45%,transparent)}
.avatar.choisi{border-color:var(--or)}
/* « Aucun » : un cadre vide et un tiret, pas une croix — on n'efface rien,
on choisit de ne rien mettre. */
.avatar-vide{
color:var(--tx-2);font-family:var(--ui);font-size:26px;
border-style:dashed;border-color:var(--line-2);
}
.avatar-vide.choisi{border-style:solid;border-color:var(--or);color:var(--or)}
/* L'avatar à la place de l'icône. Deux fois la taille de celle-ci : un
dessin de chèvre en tenue de sport ne se distingue pas à seize pixels, et
c'est la seule image personnelle de la barre.
La taille est portée par la CLASSE et non par l'endroit. Elle était écrite
`.compte .avatar-mini`, donc elle ne valait que pour la barre du haut :
dans le tiroir du téléphone, la même image sortait à sa taille naturelle
— 256 px — et remplissait l'écran par-dessus le menu. Un nom qui dit
« mini » doit être mini partout où il est posé.
Le bouton perd sa hauteur fixe quand il en porte un — sinon l'image
dépasserait de sa boîte et se ferait rogner en haut et en bas. */
.avatar-mini{
width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;
}
.compte:has(.avatar-mini){height:auto;min-height:40px}
/* Pas de cadre : les trois barres se suffisent. On garde malgré tout
les 44px de zone tactile, invisibles mais nécessaires au doigt. */
.burger{
display:none;width:44px;height:44px;border:0;background:none;
padding:0;cursor:pointer;
flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger i{display:block;width:18px;height:1.5px;background:var(--creme);transition:transform .25s ease,opacity .2s ease}
.burger.open i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.drawer{
position:fixed;top:var(--tete-h,74px);left:0;right:0;bottom:auto;z-index:55;
background:rgba(8,11,9,.97);backdrop-filter:blur(20px);
border-bottom:1px solid var(--line);
padding:20px var(--pad) 30px;
display:none;flex-direction:column;gap:4px;
}
.drawer.open{display:flex}
/* Le voile sous le tiroir : le fond s'assombrit pendant que le menu est
ouvert. Sans lui, la page continuait de vivre derrière un menu à moitié
transparent — une affiche, un carrousel, des boutons dorés — et l'œil ne
savait plus ce qui était ouvert.
Sous le tiroir (55) et sous la barre du haut (60), donc à 54 : le menu et
son bouton de fermeture restent en pleine lumière. */
.drawer-voile{
position:fixed;inset:0;z-index:54;
background:rgba(5,6,6,.74);
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
opacity:0;visibility:hidden;
transition:opacity .22s ease,visibility .22s ease;
}
.drawer-voile.ouvert{opacity:1;visibility:visible}
/* Sur grand écran il n'y a pas de tiroir, donc rien à voiler. */
@media (min-width:961px){.drawer-voile{display:none}}
.drawer a{
font-family:var(--ui);font-weight:600;font-size:15px;
letter-spacing:.18em;text-transform:uppercase;
padding:14px 0;border-bottom:1px solid var(--line-soft);color:#fff;
}
.drawer .btn{margin-top:18px}
/* Seule entrée du tiroir qui mène à un espace personnel, et pas à une ancre
de la page : elle passe en doré, texte compris, et se détache du bloc des
ancres. Avec la seule icône dorée elle se perdait en bas de la liste — on la
lisait comme une section de plus, alors que c'est la seule qui sort du
site. */
#compte-mobile{
display:flex;align-items:center;gap:11px;
color:var(--or);
/* Elle ouvre le tiroir, donc le trait doré va DESSOUS : il sépare le compte
des ancres de la page, qui sont autre chose. Le gris des autres entrées
l'aurait fondue dans la liste. */
border-bottom:1px solid rgba(233,184,36,.45);
padding-bottom:16px;margin-bottom:4px;
}
#compte-mobile svg{width:19px;height:19px;fill:var(--or);flex-shrink:0}
/* Dans le tiroir, un cran en dessous de la barre du haut : la ligne fait
quarante-trois pixels de haut, un avatar de quarante la ferait grandir à
elle seule. Trente-deux le laisse bien plus visible que l'icône de dix-neuf
qu'il remplace, sans déformer la liste. */
#compte-mobile .avatar-mini{width:32px;height:32px}
/* ══ HERO ══════════════════════════════════════════════════ */
.hero{
position:relative;min-height:100svh;display:flex;align-items:center;
padding:calc(var(--tete-h,74px) + 46px) 0 70px;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img,
.hero-bg video{width:100%;height:100%;object-fit:cover;object-position:center 38%}
/* Le film se pose sur l'image, qui sert de repli — et vers laquelle
il s'efface une fois passé. */
/* Même courbe que la respiration de l'écusson : les deux mouvements
sont simultanés, une accélération différente les désaccorderait. */
.hero-film{position:absolute;inset:0;transition:opacity 2.6s cubic-bezier(.37,0,.63,1)}
.hero-film.fondu{opacity:0}
.hero-film[hidden]{display:none}
.hero-bg video{display:block}
/* Deux calques distincts, et non un seul qu'on ferait changer de
fond : un dégradé vit dans background-image, un aplat dans
background-color. Les deux ne s'interpolent pas — le dégradé
disparaissait net et laissait voir la vidéo en clair pendant que
le noir montait. On anime donc une opacité, qui, elle, se
transitionne toujours.
::before — voile constant. La vidéo est plus claire que l'image
fixe ; sans lui, le titre doré et le menu perdent leur contraste.
Il s'AJOUTE au masque de `.hero-bg::after`, qui couvre les deux. Le
24-9-2026 ce masque a été assombri pour la nouvelle photo, et la
vidéo a pris l'assombrissement en plus du sien : trop sombre. Ce
voile-ci a donc été allégé d'autant — .76/.68/.82 devient
.63/.56/.71 —, ce qui redonne à la vidéo exactement ce qu'elle avait
(luminance mesurée : 27,45 avant, 27,08 après) pendant que l'image
fixe, elle, garde le masque plus dense.
La règle à retenir : ces deux valeurs vont par paire. Toucher l'une
sans l'autre change les deux moments du hero au lieu d'un seul. */
.hero-film::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(6,10,8,.63),rgba(6,10,8,.56) 45%,rgba(6,10,8,.71));
}
/* ::after — fermeture au noir, avant le fondu sur l'image. */
.hero-film::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:#040705;opacity:0;
transition:opacity 1.4s cubic-bezier(.37,0,.63,1);
}
.hero-film.noircit::after{opacity:1}
.hero-bg::after{
content:"";position:absolute;inset:0;
/* Le fondu vers le noir en bas pour la jonction avec la page, et
juste ce qu'il faut de voile en haut pour que la nav et le titre
restent lisibles.
Assombri en deux fois le 24-9-2026. La nouvelle photo a deux écrans
allumés et un néon : elle porte bien plus de lumière au milieu que
celle d'avant, et la salle passait devant l'écusson au lieu de
rester derrière. C'est un fond, et un fond se regarde en dernier.
Le cran d'après a été essayé et écarté : les écrans de foot sont
les pixels les plus clairs de l'image et résistent au voile, si
bien qu'en poussant encore on écrase la foule sans les calmer —
il reste deux rectangles verts sur du noir. */
background:
linear-gradient(180deg,rgba(8,11,9,.74) 0%,rgba(8,11,9,.48) 34%,rgba(8,11,9,.80) 78%,var(--noir) 100%),
radial-gradient(60% 55% at 50% 42%,transparent 0%,rgba(8,11,9,.44) 100%);
}
/* Le voile réglable, par-dessus les deux masques ci-dessus.
Un calque de PLUS et non un remplacement : ceux du dessus sont réglés à
l'œil sur deux moments distincts — la vidéo pendant qu'elle tourne, la
photo une fois le film fini — et vont par paire. Un curseur unique aurait
cassé cet accord ; celui-ci se pose au-dessus et les ignore.
`--hero-velo` est posée par le script à partir du réglage du panneau, et
vaut 0 tant que personne n'y touche : sans réglage, rien ne change. */
.hero-bg::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:rgba(8,11,9,var(--hero-velo,0));
}
/* Le bloc descend de 15px, réglé à l'œil le 24-9-2026 : l'écusson
arrivait trop haut sous la barre, 30 était trop. En `top` et non en
marge ou en padding — le hero centre son contenu verticalement, et
tout ce qui passe par la boîte se partage en deux : 15px de marge
n'en auraient donné que 7. */
.hero-in{position:relative;z-index:2;width:100%;text-align:center;top:15px}
.hero-crest-wrap{
position:relative;width:min(275px,47vw);
/* L'écusson remonte de 18px, et SEULEMENT lui : ce qu'on retire en haut on
le rend en bas, donc la hauteur du bloc ne change pas et le titre ne
bouge pas d'un pixel. -18 + 44 = les 26 d'avant. */
margin:-18px auto 44px;
display:grid;place-items:center;
}
/* Halo doré diffus derrière l'écusson. Sur le wrapper car un
ne peut pas porter de pseudo-élément. */
.hero-crest-wrap::before{
content:"";position:absolute;inset:-24%;z-index:-1;pointer-events:none;
background:radial-gradient(circle at 50% 47%,
rgba(233,184,36,.45) 0%,
rgba(233,184,36,.22) 32%,
rgba(233,184,36,.07) 54%,
transparent 72%);
filter:blur(16px);
animation:halo 7s ease-in-out infinite;
}
.hero-crest{
position:relative;width:100%;
/* Le premier drop-shadow épouse la silhouette : le halo suit le contour
de la chèvre, pas un simple disque. */
filter:drop-shadow(0 0 24px rgba(233,184,36,.55))
drop-shadow(0 18px 44px rgba(0,0,0,.75));
animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
/* Coup de zoom à l'ouverture du noir sur l'image. Porté par le
conteneur et non par l'image : .hero-crest anime déjà son propre
transform (le flottement), les deux s'écraseraient. Le halo, qui
vit sur le conteneur, suit le mouvement. */
@keyframes coupDeZoom{
0%{transform:scale(1)}
46%{transform:scale(1.085)}
100%{transform:scale(1)}
}
/* Lent et sans à-coup : la courbe est symétrique, l'aller et le
retour ont exactement la même douceur. */
.hero-crest-wrap.zoom{animation:coupDeZoom 6.5s cubic-bezier(.37,0,.63,1)}
@keyframes halo{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
/* Les deux effets de l'écusson s'éteignent depuis le panneau. Le halo part
en deux morceaux : le disque diffus derrière (::before) et l'ombre dorée
qui épouse la silhouette. Éteindre l'un sans l'autre laisse un contour
doré sur fond noir, ce qui n'est pas « sans halo », c'est à moitié. */
.hero-crest-wrap.sans-halo::before{display:none}
.hero-crest-wrap.sans-halo .hero-crest{filter:drop-shadow(0 18px 44px rgba(0,0,0,.75))}
.hero-crest-wrap.sans-flottement .hero-crest{animation:none}
/* ── Pop-up d'événement ──────────────────────────────────────
Une carte, pas un plein écran : sur mobile elle occupe environ trois quarts
de la hauteur et on voit le site derrière, ce qui dit tout de suite que ça
se ferme. La croix est posée SUR l'affiche, en haut à droite, dans une
pastille sombre : sur une photo claire une croix nue disparaît. */
#goat-popup{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;padding:20px}
#goat-popup .popup-voile{
position:absolute;inset:0;background:rgba(4,8,6,.78);
opacity:0;transition:opacity .26s ease;
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
#goat-popup.abierto .popup-voile{opacity:1}
/* Même construction que la bannière des fléchettes : la photo occupe tout,
le texte est posé dessus, en bas, sur un dégradé qui éteint l'image sous
les mots. C'est ce qui donne une affiche et non une fiche — et c'est la
façon de faire du site partout ailleurs. */
/* La photo et le texte sont empilés dans la MÊME case de grille : la carte
fait donc la hauteur du plus grand des deux. Le texte était posé en absolu
par-dessus, et dès qu'il dépassait la photo — un match a deux écussons, un
titre sur deux lignes et une compétition en plus — il sortait par le haut
et passait sous la croix. */
#goat-popup .popup-carte{
position:relative;z-index:1;overflow-x:hidden;overflow-y:auto;
/* Une seule colonne, et qui ne dépasse pas. Une colonne implicite `auto`
se dimensionne sur le contenu le plus large : dès que le titre passe en
`nowrap` pour être mesuré, la colonne prenait la largeur du titre, le
bloc de texte avec — et le titre « rentrait » dans une largeur plus
grande que la carte, qui le coupait ensuite. `minmax(0,1fr)` la cloue à
la largeur de la carte. */
display:grid;grid-template-areas:"pile";grid-template-columns:minmax(0,1fr);
width:min(520px,92vw);max-height:88dvh;
border:1px solid color-mix(in srgb, var(--or) 34%, transparent);
border-radius:16px;background:var(--carte-2);
box-shadow:0 30px 70px -24px rgba(0,0,0,.9);
opacity:0;transform:translateY(14px) scale(.985);
transition:opacity .26s ease,transform .26s cubic-bezier(.2,.7,.3,1);
}
#goat-popup.abierto .popup-carte{opacity:1;transform:none}
#goat-popup .popup-affiche{
grid-area:pile;display:block;width:100%;height:auto;
/* Le plancher évite qu'une photo très large écrase le texte posé dessus :
en dessous, on recadre plutôt que de rendre les mots illisibles. Si le
texte fait la loi, la photo s'étire à sa hauteur et se recadre. */
min-height:420px;object-fit:cover;background:#0B120E;
}
/* Le conteneur porte le focus, pas la croix : sinon l'anneau doré de
`:focus-visible` dessine un second cercle sur le premier. */
#goat-popup .popup-carte:focus,#goat-popup .popup-carte:focus-visible{outline:none}
#goat-popup .popup-fermer{
position:absolute;top:12px;right:12px;z-index:2;
width:44px;height:44px;display:grid;place-items:center;
border:1px solid rgba(244,239,230,.22);border-radius:50%;
background:rgba(4,8,6,.72);color:var(--creme);cursor:pointer;
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
transition:background .2s ease,color .2s ease,border-color .2s ease;
}
#goat-popup .popup-fermer:hover{background:var(--or);color:#12100A;border-color:var(--or)}
#goat-popup .popup-fermer svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* Le dégradé devient opaque très tôt : la ligne de la date est la première
du bloc, elle tombe donc tout en haut, là où l'image se voyait encore. En
doré clair sur une photo claire, elle ne se lisait pas. */
#goat-popup .popup-txt{
grid-area:pile;align-self:end;position:relative;z-index:1;
padding:84px 26px 30px;text-align:center;
background:linear-gradient(180deg,
transparent 0%,
rgba(4,8,6,.42) 12%,
rgba(4,8,6,.86) 30%,
rgba(4,8,6,.96) 46%,
rgba(4,8,6,.99) 100%);
}
/* Une fête ou une annonce a moins de lignes qu'un match — ni écussons ni
compétition —, donc son bloc de texte était plus court et le dégradé
commençait plus bas : la photo restait claire juste au-dessus de la date.
On lui rend la même réserve, pour que le voile monte pareil. */
#goat-popup .popup-carte:not(.popup-carte-match):not(.popup-carte-sinfoto) .popup-txt{
padding-top:180px;
}
/* La date respire avant le titre : collée, la petite ligne dorée se lisait
comme une surtitre du titre et non comme une information à elle. */
#goat-popup .popup-quand{
margin:0 0 22px;font-family:var(--ui);font-size:12px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:var(--or);
}
#goat-popup .popup-txt h2{
margin:0;font-family:var(--disp);font-size:clamp(26px,6vw,36px);
line-height:1.12;letter-spacing:.005em;text-transform:uppercase;color:var(--creme);
text-shadow:0 3px 18px rgba(0,0,0,.8);
}
#goat-popup .popup-txt h2 .or{color:var(--or)}
/* Un match : les écussons, le « vs » et la compétition, comme sur les
affiches de la page. Sans photo, les blasons tiennent l'affiche tout seuls
et le fond prend le halo doré du hero — un vide se lirait comme une image
qui n'a pas chargé. */
/* Sans photo, il n'y a plus d'image à éteindre : pas de dégradé, et le halo
doré tient lieu de fond. */
#goat-popup .popup-carte-sinfoto{
background:
radial-gradient(120% 70% at 50% 0%, rgba(233,184,36,.16) 0%, rgba(11,18,14,0) 64%),
var(--carte-2);
}
#goat-popup .popup-carte-sinfoto .popup-txt{
padding:64px 26px 32px;background:none;
}
#goat-popup .popup-duel{
display:flex;align-items:center;justify-content:center;gap:20px;margin:0 0 14px;
}
/* L'écusson nu, sans pastille derrière : un blason est déjà une forme, et
l'encadrer en fait une vignette d'application. Le drapeau garde son masque
rond — c'est un carré plein, et lui seul a besoin d'être découpé. */
#goat-popup .popup-blason{
width:68px;height:68px;display:grid;place-items:center;
}
#goat-popup .popup-blason-drapeau{overflow:hidden;border-radius:50%}
#goat-popup .popup-blason img{width:100%;height:100%;object-fit:contain}
#goat-popup .popup-blason-drapeau img{object-fit:cover}
#goat-popup .popup-blason b{font-family:var(--disp);font-size:20px;color:var(--tx)}
#goat-popup .popup-vs{
font-family:var(--disp);font-size:16px;font-weight:700;
text-transform:uppercase;color:var(--or);
}
/* La compétition se lit sous le titre, en second : c'est le contexte du
match, pas son nom. Marge propre — la règle générale des paragraphes du
bloc la décollerait comme une phrase. */
#goat-popup .popup-compet{
margin:8px 0 0;font-family:var(--ui);font-size:11px;font-weight:500;
letter-spacing:.2em;text-transform:uppercase;color:rgba(244,239,230,.62);
}
/* La phrase, et elle seule. La date et la compétition sont des `p` elles
aussi : sans ce `:not()`, cette règle-ci — plus bas dans la feuille ET
plus précise, parce qu'elle ajoute le nom de balise — leur remettait
`margin:16px 0 0`. La date perdait donc l'air qu'on lui donnait en
dessous et se collait au titre, quelle que soit la valeur écrite plus
haut. */
#goat-popup .popup-txt p:not(.popup-quand):not(.popup-compet){
margin:16px 0 0;font-size:15px;line-height:1.65;color:var(--tx);
}
#goat-popup .popup-cta{
display:inline-block;margin-top:26px;padding:15px 32px;border-radius:11px;
background:var(--or);color:#12100A;text-decoration:none;
font-family:var(--ui);font-weight:600;font-size:13px;
letter-spacing:.14em;text-transform:uppercase;
transition:background .2s ease,transform .2s ease;
}
#goat-popup .popup-cta:hover{background:var(--or-clair);transform:translateY(-1px)}
@media (max-width:700px){
/* Trois quarts de l'écran, pas plus : le reste du site reste visible
derrière, et la carte se lit comme quelque chose qui se ferme. */
#goat-popup .popup-carte{width:min(460px,92vw);max-height:86dvh}
#goat-popup .popup-affiche{min-height:340px}
/* Une carte de match sans photo ne fait que la hauteur de ses mots : sur un
téléphone elle flottait au milieu de l'écran comme une vignette. Elle
prend les trois quarts promis et répartit son contenu dedans — c'est la
hauteur qui fait l'affiche, pas la quantité de texte. */
#goat-popup .popup-carte-sinfoto{
min-height:72dvh;display:flex;flex-direction:column;justify-content:center;
}
#goat-popup .popup-carte-sinfoto .popup-txt{padding:60px 20px 34px}
#goat-popup .popup-carte-sinfoto .popup-duel{margin-bottom:20px}
#goat-popup .popup-carte-sinfoto .popup-txt p:not(.popup-quand):not(.popup-compet){
margin-top:20px;
}
#goat-popup .popup-carte-sinfoto .popup-compet{margin-top:12px}
#goat-popup .popup-carte-sinfoto .popup-cta{margin-top:32px}
#goat-popup .popup-txt{padding:72px 20px 24px}
#goat-popup .popup-carte:not(.popup-carte-match):not(.popup-carte-sinfoto) .popup-txt{
padding-top:150px;
}
#goat-popup .popup-duel{gap:14px}
#goat-popup .popup-blason{width:54px;height:54px}
#goat-popup .popup-vs{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
#goat-popup .popup-voile,#goat-popup .popup-carte{transition:none}
}
/* L'avis de clôture des réservations du jour : une règle de la maison, pas
un refus. Doré et non rouge — on n'est pas complet, on invite à venir. */
.resa-cloture{
margin:8px 0 0;font-family:var(--ui);font-size:12px;line-height:1.5;
color:var(--or);
}
/* ── Site fermé pour travaux ─────────────────────────────────
Un voile opaque par-dessus la page déjà chargée : rien à recharger, rien
à rediriger. L'icône est dorée mais discrète — c'est une information, pas
une alarme : le bar est ouvert, c'est le site qui se refait. */
#goat-travaux{
position:fixed;inset:0;z-index:9999;
display:grid;place-items:center;padding:24px;
background:#080B09;
animation:travauxEntre .35s ease both;
}
@keyframes travauxEntre{from{opacity:0}to{opacity:1}}
#goat-travaux .travaux-carte{
max-width:460px;text-align:center;
border:1px solid var(--line-2);border-radius:16px;
padding:40px 28px;background:rgba(255,255,255,.02);
}
/* L'écusson plutôt qu'un pictogramme : c'est la seule page du site qu'on
verra sans rien d'autre, autant qu'elle dise chez qui on est. Le halo
doré du hero en plus petit, pour qu'il ne flotte pas sur le noir. */
#goat-travaux .travaux-ecusson{
display:block;width:104px;height:auto;margin:0 auto 22px;
filter:drop-shadow(0 0 20px rgba(233,184,36,.4))
drop-shadow(0 12px 30px rgba(0,0,0,.7));
}
#goat-travaux h1{
font-family:var(--disp);font-size:clamp(21px,3.4vw,27px);
line-height:1.15;letter-spacing:.005em;text-transform:uppercase;
color:var(--or);margin:0 0 14px;text-shadow:none;
}
#goat-travaux p{
margin:0;font-size:14.5px;line-height:1.6;color:var(--creme);opacity:.78;
}
/* La version anglaise, un cran en dessous : les deux se lisent, mais la
première reste la principale. */
#goat-travaux .travaux-en{
margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);
font-size:13.5px;opacity:.6;
}
/* Les réseaux, centrés sous le texte : pendant la fermeture c'est le seul
endroit où aller. Ils peuvent passer à la ligne — ici on n'est pas dans le
pied de page, rien ne les serre. */
#goat-travaux .travaux-socials{
margin-top:22px;justify-content:center;flex-wrap:wrap;
}
/* Le bouton qui redemande la page. Le même que sur la page « travaux »
servie par nginx : deux écrans qui disent la même chose doivent avoir la
même tête. */
#goat-travaux .travaux-recarga{
margin-top:22px;display:inline-flex;align-items:center;gap:9px;
padding:11px 18px;border:1px solid var(--or);border-radius:10px;
background:rgba(233,184,36,.08);color:var(--or);cursor:pointer;
font-family:var(--ui);font-size:13px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;
transition:background .2s ease,color .2s ease;
}
#goat-travaux .travaux-recarga:hover{background:var(--or);color:#12100A}
#goat-travaux .travaux-recarga svg{
width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;
}
#goat-travaux .travaux-recarga[aria-busy="true"] svg{
animation:giraTravaux 1s linear infinite;
}
@keyframes giraTravaux{to{transform:rotate(360deg)}}
.hero h1{
font-family:var(--disp);
font-size:clamp(28px,5vw,60px);
line-height:var(--titre-lh);letter-spacing:.005em;text-transform:uppercase;
color:var(--or);
text-shadow:0 4px 26px rgba(0,0,0,.85),0 0 60px rgba(233,184,36,.22);
/* Le navigateur pose 0.67em de marge basse sur un h1 — 40px ici.
Elle fusionnait avec celle de la baseline et l'emportait : régler
la baseline ne changeait donc rien. On la remet à zéro pour que
l'écart vienne bien de .tag. */
margin-bottom:0;
}
.hero .tag{
font-family:var(--ui);font-weight:600;font-size:clamp(14px,2vw,19px);
letter-spacing:.34em;text-transform:uppercase;color:var(--creme);
margin-top:15px;
}
/* ── Prochaines affiches, sous les boutons du hero ─────────
Deux zones : une bande dorée à gauche, qui porte l'appel à
l'action sur toute la hauteur, et le corps à droite, où trois
affiches se relaient. Même gabarit que le compte à rebours. */
.hero-suivant{
display:flex;flex-direction:column;
width:100%;max-width:620px;margin:40px auto 0;
border:1px solid color-mix(in srgb, var(--or) 30%, transparent);
border-radius:16px;
/* Ce qui dépasse est coupé. Il manquait : l'affiche est un fond posé sur
un élément à angles droits, et elle débordait par-dessus le filet dans
le coin en haut à droite. Le commentaire du halo, trois lignes plus bas,
affirmait depuis toujours que cette ligne était là — elle ne l'était
pas, et c'est justement pour ça qu'on ne la cherchait pas.
Le halo reste une ombre portée : `overflow:hidden` ne coupe pas les
ombres extérieures, donc les deux vont bien ensemble. */
overflow:hidden;
/* La bande dorée va au bord : c'est l'en-tête qui arrondit. */
background:rgba(8,11,9,.5);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.hero-suivant[hidden]{display:none}
/* ── Le cadre qui respire ────────────────────────────────────
Pas un reflet qui tourne — celui-là on le suit des yeux et on ne lit plus
ce qu'il y a dedans. Ici c'est le filet entier qui s'éclaire et retombe,
lentement, comme une veilleuse : on le remarque du coin de l'œil et on
revient à l'affiche. Quatre secondes et demie de montée, autant de
descente.
Deux choses bougent ensemble : la couleur du filet et un halo posé juste
derrière. Le halo est une ombre portée, pas un élément : la carte a déjà
`overflow:hidden` pour que la bande dorée touche le bord, et tout ce qu'on
ajouterait dedans serait coupé. */
.hero-suivant{
animation:veilleuse 9s ease-in-out infinite;
}
@keyframes veilleuse{
0%,100%{
border-color:color-mix(in srgb, var(--or) 30%, transparent);
box-shadow:0 0 0 0 rgba(233,184,36,0);
}
50%{
border-color:color-mix(in srgb, var(--or) 72%, transparent);
box-shadow:0 0 22px -6px rgba(233,184,36,.28);
}
}
/* Les filets de l'intérieur respirent avec lui : celui qui sépare « Tous les
directs » de l'affiche, celui qui pose les deux actions en bas, et celui
qui les sépare l'une de l'autre. Sinon le cadre s'éclaire tout seul et les
traits du dedans restent éteints — la carte se découd. Même durée, même
courbe : c'est un seul mouvement, pas quatre. */
.hero-suivant .hs-lien,
.hero-suivant .hs-actions,
.hero-suivant .hs-action-sobre{
animation:veilleuseFilet 9s ease-in-out infinite;
}
@keyframes veilleuseFilet{
0%,100%{border-color:color-mix(in srgb, var(--or) 30%, transparent)}
50%{border-color:color-mix(in srgb, var(--or) 72%, transparent)}
}
@media (prefers-reduced-motion:reduce){
.hero-suivant,
.hero-suivant .hs-lien,
.hero-suivant .hs-actions,
.hero-suivant .hs-action-sobre{animation:none}
}
/* Pas de survol au niveau de la carte : elle réagirait aussi sur
l'affiche, qui n'est pas cliquable. Chaque case s'éclaire seule. */
/* Chaque case porte son propre lien et rien d'autre : aucun lien ne
s'étire au-delà du sien, sinon survoler l'affiche allumerait la
bande voisine. La zone de l'affiche n'est pas cliquable pour
l'instant — elle mènera à la réservation du match. */
.hs-haut{display:flex;align-items:stretch}
.hs-haut[hidden]{display:none}
/* ── Bande dorée, sur toute la hauteur du rang ── */
.hs-lien{
flex:0 0 13%;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
padding:14px 7px;
/* Fond de la carte, comme les deux actions : ce sont les filets,
et non des aplats, qui découpent les trois cases. */
background:transparent;color:var(--or);text-decoration:none;text-align:center;
border-right:1px solid color-mix(in srgb, var(--or) 30%, transparent);
font-family:var(--ui);font-size:10.5px;font-weight:600;
letter-spacing:.07em;line-height:1.3;text-transform:uppercase;
transition:background .25s ease;
}
.hs-lien svg{
width:15px;height:15px;flex-shrink:0;
fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;
/* Elle invite à descendre : un va-et-vient lent et court, qui
signale la direction sans attirer l'œil en permanence. */
animation:hs-fleche 2.8s ease-in-out infinite;
}
@keyframes hs-fleche{
0%,100%{transform:translateY(0)}
50% {transform:translateY(5px)}
}
.hs-lien:hover{background:rgba(233,184,36,.10);color:var(--or-clair);text-decoration:none}
.hs-lien:focus-visible{outline:2px solid var(--or);outline-offset:-4px}
/* ── Corps : la case de l'affiche ──
Fond des cartes tarif, sur cette case seulement — la bande dorée
et les deux actions gardent celui de la carte. */
.hs-corps{
background:linear-gradient(170deg,var(--carte-2),var(--carte));
flex:1;min-width:0;
display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:9px;
padding:14px 16px 15px;
}
/* Un événement mis en avant amène son affiche : elle passe en fond de la
case, sous un voile. Sans le voile, le doré de la date sur une photo
claire disparaît — et ici c'est le texte qui porte l'information, la photo
ne fait que donner le ton. Le fond de secours reste celui de la carte, au
cas où l'image ne charge pas. */
.hs-corps-affiche{
background-color:var(--carte-2);
background-size:cover;background-position:center;
position:relative;isolation:isolate;
/* Le double de la hauteur d'une ligne de programme : une photo dans une
bande de 80 px n'est plus une affiche, c'est une texture. Le contenu
reste centré dedans — `.hs-corps` s'en charge déjà. */
min-height:170px;
}
/* Le voile monte du bas, comme sur le pop-up : la photo se voit en haut et
s'éteint sous les mots. C'est ce qui fait une affiche et pas un fond. La
courbe est celle de `#goat-popup .popup-txt`, à une nuance près — la case
est basse et large, donc le noir arrive plus tard en proportion. */
.hs-corps-affiche::before{
content:'';position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,
transparent 0%,
rgba(4,8,6,.34) 22%,
rgba(4,8,6,.82) 48%,
rgba(4,8,6,.95) 68%,
rgba(4,8,6,.99) 100%);
}
/* Une affiche mise en avant ne s'aligne pas comme le relais de matchs :
l'intitulé en haut à gauche, puis au centre la date, le titre et la
phrase, les uns sous les autres — l'ordre du pop-up. Le relais, lui, tient
tout sur une ligne pour que trois affiches se succèdent sans que rien ne
bouge ; une seule affiche n'a rien à faire succéder. */
/* Le texte se pose en bas et laisse le tiers du haut à la photo : c'est ce
tiers nu qui fait voir qu'il y a une affiche derrière les mots. La réserve
du haut est écrite en pixels — un pourcentage de padding se calculerait
sur la LARGEUR de la case, qui n'a rien à voir. */
.hs-corps-affiche{justify-content:flex-end;gap:12px;padding:52px 18px 20px}
.hs-af-centre{
display:flex;flex-direction:column;align-items:center;gap:9px;
text-align:center;min-width:0;
}
.hs-af-quand{
margin:0;font-family:var(--ui);font-size:15px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--or);
}
.hs-af-titre{
margin:0;font-family:var(--disp);font-weight:600;
font-size:clamp(20px, 4.6vw, 30px);line-height:1.1;
letter-spacing:.03em;text-transform:uppercase;color:#fff;
max-width:100%;
}
.hs-af-titre .or{color:var(--or)}
/* Les deux camps sur une ligne, à la même taille : c'est le titre, et les
noms en héritent — d'où le `font-size:inherit`, sinon `.hs-eq b` leur
remettrait la taille des lignes de programme. */
.hs-af-duel{display:flex;align-items:center;justify-content:center;gap:14px}
.hs-af-duel .hs-eq{min-width:0}
.hs-af-duel .hs-eq b{
font-family:inherit;font-size:inherit;font-weight:inherit;
letter-spacing:inherit;color:inherit;line-height:inherit;
/* Pas de points de suspension ici : le titre rapetisse pour tenir, et
« LIVERPO… vs MANCHESTER C… » n'annonce rien. */
overflow:visible;text-overflow:clip;
}
.hs-af-duel .hs-sep{font-size:.6em;color:var(--or)}
/* Quand même les noms serrés ne tiennent pas : il ne reste que les blasons,
et l'affiche reste sur une ligne. Cachés pour l'œil, pas pour le lecteur
d'écran — c'est un nom d'équipe, pas de la décoration. La classe est posée
par `ajusteAffiche()`, qui est le seul à savoir si ça tient. */
.hs-af-duel.sans-noms .hs-eq b{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
/* Seuls sur la ligne, les blasons reprennent un peu de présence. */
.hs-af-duel.sans-noms .fx-crest{width:38px;height:38px}
.hs-af-duel.sans-noms .fx-crest img{max-width:38px;max-height:38px}
/* Sur un téléphone, l'affiche tient sur UNE ligne. Greg : « mobile je veux
toujours le match sur une ligne ».
Elle a d'abord été empilée en trois — les deux camps l'un sous l'autre et
le « vs » au milieu —, parce qu'en une ligne qui se replie, le second
écusson partait seul à la ligne avec son nom et le « vs » restait pendu au
bout du premier. Mais ce n'était pas la direction qu'il fallait changer,
c'était le REPLI : en `nowrap`, plus personne ne part seul, et c'est la
taille qui cède. Empilée, l'affiche prenait trois lignes et repoussait la
phrase et les boutons hors de la carte.
Les noms sont déjà les noms COURTS — « PSG », « Les Bleus » —, donc la
ligne a rarement à se serrer beaucoup. L'ellipse est là par sécurité :
elle n'annonce pas grand-chose, mais un nom qui déborde de la carte
annonce moins encore. */
@media (max-width:700px){
.hs-af-duel{flex-wrap:nowrap;gap:7px}
.hs-af-duel .hs-eq{justify-content:center;gap:5px;min-width:0}
.hs-af-duel .hs-eq b{overflow:hidden;text-overflow:ellipsis}
.hs-af-duel .hs-sep{font-size:.52em;line-height:1}
/* Le titre descend d'un cran : « LES BLEUS vs ITALIE » avec ses deux
drapeaux fait déjà près de trois cents pixels au minimum. */
.hs-af-titre{font-size:clamp(15px, 4.2vw, 24px)}
/* Et les blasons avec lui : à quarante-deux pixels chacun, ils mangeaient
à eux seuls le quart de la ligne. */
.hs-af-duel .fx-crest{width:26px;height:26px}
.hs-af-duel .fx-crest img{max-width:26px;max-height:26px}
.hs-af-duel .fx-crest .ico{width:19px;height:19px}
}
.hs-af-texte{
margin:0;font-family:var(--ui);font-size:13px;line-height:1.5;
color:rgba(244,239,230,.72);
}
/* ── Plusieurs annonces : les mêmes affiches, qui se relaient ──
Une annonce garde sa mise en page qu'elle soit seule ou accompagnée : ce
qu'on regarde est la même chose. Le relais des matchs, lui, aligne tout sur
une ligne pour faire défiler des rencontres, et ça ne va pas à une affiche.
Les vues occupent la même case de la grille : elles se superposent, la case
prend la hauteur de la PLUS HAUTE et rien ne saute d'une affiche à l'autre
— aucune hauteur fixe à tenir à jour, et la plus bavarde des trois donne la
mesure aux autres. La photo et le voile descendent sur chaque vue : posés
sur la case, ils vaudraient pour toutes et on ne verrait qu'une image. */
/* Deux classes, pas une : `.hs-corps` reprend un padding dans le bloc
téléphone plus bas, et à égalité de poids c'est la dernière qui gagne. La
réserve, ici, appartient aux vues — la case, elle, n'en a aucune. */
.hs-corps.hs-corps-vues{padding:0;gap:0;background-color:var(--carte-2);position:relative}
.hs-af-piste{display:grid;flex:1;min-width:0}
.hs-af-vue{
grid-area:1 / 1;position:relative;isolation:isolate;min-width:0;
display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
/* Le texte se pose en bas et laisse le haut à la photo : c'est ce qui fait
voir qu'il y a une affiche derrière les mots. */
padding:52px 18px 20px;min-height:170px;
background-color:var(--carte-2);background-size:cover;background-position:center;
opacity:0;pointer-events:none;transition:opacity .9s ease;
}
/* L'entrante attend que la sortante soit bien partie : en plein fondu croisé,
deux titres se superposent et plus rien ne se lit. */
.hs-af-vue.actif{opacity:1;pointer-events:auto;transition-delay:.35s}
/* Le voile monte du bas, comme sur le pop-up : la photo se voit en haut et
s'éteint sous les mots. Même courbe que `.hs-corps-affiche`. */
.hs-af-vue::before{
content:'';position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,
transparent 0%,
rgba(4,8,6,.34) 22%,
rgba(4,8,6,.82) 48%,
rgba(4,8,6,.95) 68%,
rgba(4,8,6,.99) 100%);
}
/* Les pastilles par-dessus, en bas : la photo va d'un bord à l'autre de la
case — c'est ce qui en fait une affiche et pas une bande illustrée —, donc
elles ne peuvent pas prendre leur place dans le flux. La réserve en bas des
vues leur laisse la ligne. */
.hs-corps-vues .hs-puces{
position:absolute;left:0;right:0;bottom:9px;z-index:2;margin:0;
}
.hs-corps-vues-puces .hs-af-vue{padding-bottom:30px}
/* Intitulé fixe et date qui tourne, sur la même ligne. */
.hs-tete{
display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;
/* Aucun espacement horizontal : il ne s'appliquerait qu'à gauche de
la piste des dates et décalerait son centre de la même valeur.
L'écart pastille/intitulé est porté par la pastille. */
row-gap:6px;column-gap:0;
font-family:var(--ui);font-size:11px;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;
}
.hs-label{color:var(--or);font-weight:300;font-size:11px;letter-spacing:.18em}
.hs-quand,.hs-h{color:#fff}
.hs-comp{color:#7A8479;font-weight:400}
/* Le point respire au lieu de clignoter : une onde qui s'éteint. */
.hs-point{
width:7px;height:7px;border-radius:50%;background:var(--or);flex-shrink:0;
position:relative;top:-1px;margin-right:9px;
animation:hs-pulse 2.6s ease-out infinite;
}
@keyframes hs-pulse{
0% {box-shadow:0 0 0 0 color-mix(in srgb, var(--or) 55%, transparent)}
70% {box-shadow:0 0 0 9px transparent}
100%{box-shadow:0 0 0 0 transparent}
}
/* Les affiches occupent la même case de la grille : elles se
superposent, et la piste prend la hauteur de la plus haute —
aucune hauteur fixe à tenir à jour. Deux pistes tournent de
concert : la date en haut, l'affiche en dessous. */
.hs-piste{display:grid;justify-items:center}
/* La piste des dates occupe tout ce qui reste après l'intitulé :
la date se centre donc entre « Prochainement » et le bord droit,
et non par rapport à la carte entière. */
.hs-piste-info{flex:1;min-width:0}
.hs-info,.hs-match{
grid-area:1 / 1;
opacity:0;pointer-events:none;
transition:opacity .28s ease,transform .28s ease;
transform:translateY(6px);
}
/* L'entrante attend que la sortante ait fini : sans ce décalage les
deux affiches se superposent en plein fondu, et le texte devient
illisible pendant une demi-seconde. */
.hs-info.actif,.hs-match.actif{
opacity:1;transform:none;pointer-events:auto;transition-delay:.22s;
}
/* Sans nowrap : la compétition la plus longue — « Vuelta · dernière
étape » — dépasse la largeur disponible sur mobile et sortait de la
carte. Elle passe maintenant à la ligne. */
.hs-info{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:4px 9px;min-width:0;
/* Sans cette borne, la case de grille se dimensionne sur le contenu
et le retour à la ligne ne se déclenche jamais. */
max-width:100%;
}
.hs-piste,.hs-piste-info{max-width:100%;min-width:0}
.hs-match{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:12px;min-width:0;width:100%}
.hs-eq{display:flex;align-items:center;gap:8px;min-width:0}
.hs-eq b{
font-family:var(--disp);font-weight:600;font-size:clamp(14px, 3.2vw, 22px);
letter-spacing:.04em;text-transform:uppercase;color:#fff;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
min-width:0;line-height:1;
}
/* Deux camps : colonnes égales, « vs » pile au milieu, sans
max-width en % (il se calculait sur la largeur du match, elle-même
définie par les équipes — d'où « PS… » et le trou à droite). */
.hs-match-duel{
display:grid;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
justify-items:stretch;
gap:10px 12px;
width:100%;
}
.hs-match-duel .hs-eq:first-child{justify-content:flex-end}
.hs-match-duel .hs-eq:last-child{justify-content:flex-start}
.hero-suivant .fx-crest{width:42px;height:42px;flex-shrink:0}
.hero-suivant .fx-crest img{max-width:42px;max-height:42px}
.hero-suivant .fx-crest .ico{width:29px;height:29px;background:var(--or)}
.hero-suivant .hs-letra{
display:flex;align-items:center;justify-content:center;
font-family:var(--disp);font-size:15px;font-weight:600;color:var(--or);
background:rgba(233,184,36,.12);
border:1px solid color-mix(in srgb, var(--or) 35%, transparent);
}
.hs-sep{
font-family:var(--disp);font-style:normal;font-size:13px;color:var(--or);
letter-spacing:.14em;text-transform:uppercase;
flex-shrink:0;line-height:1;align-self:center;padding:0 2px;
}
/* ── Pied de carte : les deux actions ───────────────────────
Deux segments pleine largeur plutôt que deux boutons posés dans
la carte : le pied se lit comme une barre, et l'action qui
rapporte reste la seule en aplat doré. */
.hs-actions{
display:flex;
border-top:1px solid color-mix(in srgb, var(--or) 30%, transparent);
}
.hs-action{
flex:1;display:flex;align-items:center;justify-content:center;
padding:15px 14px;text-align:center;text-decoration:none;
font-family:var(--ui);font-size:11.5px;font-weight:600;
letter-spacing:.13em;text-transform:uppercase;
transition:background .25s ease,color .25s ease;
}
.hs-action-or,.hs-action-sobre{background:transparent;color:var(--or)}
.hs-action-sobre{
border-left:1px solid color-mix(in srgb, var(--or) 30%, transparent);
}
.hs-action-or:hover,.hs-action-sobre:hover{
background:rgba(233,184,36,.10);color:var(--or-clair);text-decoration:none;
}
.hs-action:focus-visible{outline:2px solid var(--or);outline-offset:-4px}
/* Puces de relais, au-dessus du lien étiré pour garder leur clic. */
/* Le corps étire ses enfants pour que la ligne du haut se cale à
gauche : les puces, elles, restent centrées sous l'affiche. */
.hs-puces{display:flex;justify-content:center;gap:7px;margin-top:1px}
.hs-puce{
width:6px;height:6px;padding:0;border:0;border-radius:50%;cursor:pointer;
background:rgba(245,235,216,.28);
transition:background .3s ease,transform .3s ease;
}
.hs-puce:hover{background:rgba(245,235,216,.55)}
.hs-puce.actif{background:var(--or);transform:scale(1.25)}
.hs-puce:focus-visible{outline:2px solid var(--or);outline-offset:3px}
@media (max-width:560px){
/* 13 % d'une carte de 354 px ne laisseraient que 46 px : le mot
« programme » n'y tiendrait pas. La bande passe en largeur fixe. */
.hero-suivant{margin-top:22px}
.hs-lien{flex:0 0 78px;font-size:9.5px;padding:12px 6px;gap:12px}
.hs-corps{padding:12px 12px 13px;gap:8px}
.hs-corps-affiche{min-height:150px;padding:45px 14px 16px}
.hs-af-vue{min-height:150px;padding:45px 14px 16px}
.hs-corps-vues-puces .hs-af-vue{padding-bottom:26px}
.hs-af-quand{font-size:13px;letter-spacing:.14em}
.hs-af-texte{font-size:12px}
.hs-tete{gap:7px;font-size:10px;letter-spacing:.1em}
.hs-label{font-size:10px;letter-spacing:.14em}
/* La date ne tient pas sur la ligne de l'intitulé à cette largeur :
en base flexible à 100 %, elle passe dessous, pleine largeur et
toujours centrée, au lieu de déborder hors de la carte. */
/* La date prend sa propre ligne dès qu'elle ne tient plus à côté
de l'intitulé, et non seulement sous 560 px. */
.hs-piste-info{flex:1 0 100%}
.hs-info{gap:7px}
.hs-eq b{font-size:16px}
.hero-suivant .fx-crest{width:34px;height:34px}
.hero-suivant .fx-crest img{max-width:34px;max-height:34px}
.hero-suivant .fx-crest .ico{width:24px;height:24px}
.hs-match{gap:10px}
/* Côte à côte, chaque segment tomberait sous les 150 px : le
libellé passerait sur deux lignes. On les empile. */
.hs-actions{flex-direction:column}
.hs-action{padding:13px 14px;font-size:11px}
.hs-action-sobre{
border-left:0;
border-top:1px solid color-mix(in srgb, var(--or) 30%, transparent);
}
}
@media (prefers-reduced-motion:reduce){
.hs-point,.hs-lien svg{animation:none}
.hs-info,.hs-match{transition:none}
}
/* Compte à rebours */
.countdown{
display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
margin:38px auto 0;max-width:620px;
}
.cd{
flex:1;min-width:88px;
background:rgba(8,11,9,.62);backdrop-filter:blur(12px);
/* Même filet que la carte des affiches, juste en dessous : les deux
blocs se répondent au lieu de proposer deux gris différents. */
border:1px solid color-mix(in srgb, var(--or) 30%, transparent);
border-radius:12px;padding:16px 8px;
}
.cd b{
display:block;font-family:var(--disp);font-size:clamp(28px,4.4vw,42px);
line-height:1;color:var(--creme);font-variant-numeric:tabular-nums;
}
.cd span{
display:block;margin-top:8px;font-family:var(--ui);font-size:10px;
letter-spacing:.26em;text-transform:uppercase;color:var(--or);
}
.opening{
margin-top:26px;font-family:var(--ui);font-weight:300;
font-size:clamp(13px,1.7vw,16px);letter-spacing:.34em;
text-transform:uppercase;color:var(--tx-2);
}
.opening b{color:var(--or);font-weight:600}
/* ══ L'ESSENTIEL ═══════════════════════════════════════════ */
.essentiel{
display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:14px;margin-top:52px;
}
.ess{
position:relative;overflow:hidden;isolation:isolate;
padding:34px 20px;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:16px;
background:var(--carte-2);
transition:border-color .28s ease,transform .28s ease;
}
/* Photo de fond, puis voile : sans le second, ni l'icône dorée
ni le texte crème ne tiennent sur une image claire. */
.ess::before{
content:"";position:absolute;inset:0;z-index:-2;
background-size:cover;
/* --cadre vise la zone intéressante de chaque photo : la vignette
est étroite, un cadrage centré coupait le sujet. */
background-position:var(--cadre,center);
transition:opacity .35s ease,transform .6s cubic-bezier(.2,.7,.3,1);
opacity:.62;
}
.ess::after{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(6,10,8,.20) 0%,rgba(6,10,8,.55) 34%,rgba(6,10,8,.88) 68%,rgba(6,10,8,.99) 100%);
}
/* Au survol, le même reflet que le cadre des fléchettes fait le tour de la
carte. Ici pas de pseudo-élément libre — ::before porte la photo et ::after
le voile — alors le dégradé est peint dans le fond de la carte elle-même :
la couleur pleine découpée sur la boîte de contenu, le dégradé conique sur
la boîte de bordure. Il ne dépasse donc que par le liseré d'1px, et le
bord doit passer en transparent pour le laisser voir. */
.ess:hover{
border-color:transparent;
transform:translateY(-5px);
background:
linear-gradient(var(--carte-2),var(--carte-2)) padding-box,
conic-gradient(from var(--goat-flux),
color-mix(in srgb, var(--or) 26%, transparent) 0 58%,
color-mix(in srgb, var(--or) 70%, transparent) 70%,
#FFF0BE 76%,
color-mix(in srgb, var(--or) 70%, transparent) 82%,
color-mix(in srgb, var(--or) 26%, transparent) 94%) border-box;
animation:goatFlux 7s linear infinite;
}
.ess:hover::before{opacity:.82;transform:scale(1.07)}
/* Les chemins vivent ici, et non dans une variable posée en HTML :
une URL relative dans une variable CSS est résolue par rapport à
la feuille de style, ce qui donnait assets/css/assets/img/… */
.ess-direct::before{background-image:url('../img/4k.jpg')}
.ess-flechettes::before{background-image:url('../img/darts.jpg')}
.ess-evenements::before{background-image:url('../img/evenement.jpg')}
.ess-food::before{background-image:url('../img/drink.jpg')}
.ess-reservations::before{background-image:url('../img/reserved.jpg')}
.ess-ambiance::before{background-image:url('../img/ambiance.jpg')}
/* URL absolue depuis l'API (panel Web) : une relative se résoudrait contre le CSS. */
.ess-photo::before{background-image:var(--ess-photo)}
.ess:hover .ico{transform:scale(1.09)}
.ess b{
font-family:var(--ui);font-weight:500;font-size:12.5px;
letter-spacing:.18em;text-transform:uppercase;color:var(--creme);
}
.ess p{font-size:13px;color:var(--tx-2);line-height:1.55;max-width:24ch}
/* Carte sans icône : le contenu descend au bas de la carte pour que son
texte s'aligne sur celui des cartes voisines. Sans ça, il remontait de
toute la hauteur de l'icône et la ligne du bas devenait un escalier. */
.ess-sans-ico{justify-content:flex-end}
/* ══ PROGRAMME TV — bandeaux d'affiches ════════════════════ */
/* Même respiration au-dessus et en dessous du titre de section.
La marge basse du .h2 (8px) est absorbée par collapse, elle ne compte pas. */
.fixtures{display:flex;flex-direction:column;gap:14px;margin-top:56px}
.fixture{
display:grid;grid-template-columns:auto 1fr auto;
align-items:center;gap:22px;
padding:15px 22px;border-radius:14px;
border:1px solid var(--line-2);
background:linear-gradient(100deg,rgba(233,184,36,.11),rgba(233,184,36,.03) 45%,rgba(16,23,19,.55));
transition:border-color .25s ease;
}
.fixture:hover{border-color:var(--or)}
/* Pavé de date plein : l'ancre visuelle de la ligne. À 80 px, c'était lui
qui décidait de la hauteur de la fiche — il dépassait de quatre pixels les
deux lignes posées à côté et tirait tout le reste avec lui. Ramené à la
hauteur de ce qu'il accompagne, c'est le contenu qui commande. */
.fx-day{
display:flex;flex-direction:column;align-items:center;justify-content:center;
width:62px;height:62px;flex-shrink:0;
border-radius:12px;background:var(--or);color:#12100A;
}
.fx-day span{
font-family:var(--ui);font-size:9.5px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;opacity:.72;
}
.fx-day b{font-family:var(--disp);font-size:26px;line-height:1;margin-top:1px}
.fx-day i{
font-family:var(--ui);font-style:normal;font-size:8.5px;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-top:2px;
}
/* ── Une soirée du bar, rangée avec les matchs ──
Même gabarit, une seule chose qui change : le pavé de date. Dans une liste
de matchs, une ligne qui a exactement la même tête qu'un match est prise
pour un match, et on ne lit le titre qu'après s'être trompé. */
.fx-day-fete{background:var(--vert-fade)}
.fixture-fete{border-color:rgba(147,185,160,.30)}
.fixture-fete .fx-meta b{color:var(--vert-fade-clair)}
.fx-fete-titre{
margin:0 0 3px;
font-family:var(--disp);font-size:20px;line-height:1.15;
letter-spacing:.02em;color:var(--creme);
}
/* La phrase sous le titre.
Elle n'avait AUCUNE règle : un