/* ===== POLICE DU SITE : remplacer « garamond » par « zodiak » (ou l'inverse) ===== */
@import url('polices/zodiak.css');
/* ===== TAILLE DE TOUS LES TEXTES : 1 = normal, 1.1 = +10 %, 0.9 = -10 % ===== */
:root { --taille-texte: 1; }
/* ===========================
INITIALISATION
=========================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* Inclut padding et border dans width */
}
/* Hauteur réelle du header fixe (mêmes valeurs que .header, ajustées dans les media queries) */
:root {
--header-h: max(3.75rem, 5vh);
}
html {
scroll-behavior: smooth; /* Défilement fluide pour les ancres */
/* Taille de base de tous les textes (en rem), réglée par --taille-texte (en haut).
ÉCHELLE SELON L'ÉCRAN : 16 px jusqu'à 1700 px de large (ordinateurs portables : rien ne change),
puis proportionnelle à la largeur (1920 px -> 18,1 px ; 3840 px -> 36,1 px) : sur très grand écran
le site entier (textes, marges, blocs, images) garde les proportions d'un écran de 1700 px. */
font-size: calc(max(100%, 100vw / 106.25) * var(--taille-texte));
}
/* "clip" (et non "hidden") : coupe le débordement horizontal sans faire de body
un conteneur de défilement. C'est la fenêtre qui défile : header fixe et contenu
ont la même largeur (barre de scroll comprise), et window.pageYOffset fonctionne. */
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow-x: clip; /* Évite le scroll horizontal */
}
body {
display: flex;
flex-direction: column;
font-family: var(--police-texte);
}
/* Contenu + partenaires occupent au moins toute la hauteur de l'écran : sur les pages
courtes, les partenaires restent en bas de l'écran et le footer n'apparaît qu'en
scrollant. svh = hauteur visible sur mobile, barre d'adresse comprise. */
.page-wrap {
flex-shrink: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100svh;
}
.page-content {
flex: 1;
background: white;
padding-top: 5vh; /* Compense le header fixe */
display: flex;
flex-direction: column;
align-items: stretch;
}
/* ===========================
POLICE
=========================== */
/* La police est choisie par la 1re ligne de ce fichier (@import) :
css/polices/zodiak.css ou css/polices/garamond.css.
Partout ailleurs, on utilise var(--police-titre) et var(--police-texte). */
/* ===========================
HEADER
=========================== */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 3000;
/* Colonnes latérales de même largeur : le titre est centré sur l'écran,
quelle que soit la largeur du logo (à gauche) et du burger (à droite). */
display: grid;
grid-template-columns: 1fr minmax(0, max-content) 1fr;
align-items: center;
height: 5vh;
min-height: 3.75rem; /* Hauteur minimale pour mobile */
background: linear-gradient(135deg, #ff7800, #ffb700, #06276b);
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.15);
padding: 0 max(0.9375rem, 2vw); /* Assure un padding minimum de 15px */
box-sizing: border-box; /* Important pour éviter le débordement */
}
.header-logo {
display: flex;
align-items: center;
justify-self: start;
}
.header-logo img {
height: 5vh;
min-height: 2.8125rem;
max-height: 4.375rem;
width: auto;
object-fit: contain;
}
/* Garamond réservé au titre du header, quelle que soit la police choisie pour le reste du site */
@font-face {
font-family: 'Garamond Titre';
src: url('../assets/fonts/garamond/eb-garamond-latin-800-normal.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.header-title {
min-width: 0; /* Permet l'ellipsis "..." quand la place manque */
text-align: center;
padding: 0 1.25rem;
}
.header-title h1 {
margin: 0;
font-size: clamp(1.2rem, calc(3vw * var(--taille-texte)), 2rem); /* Taille responsive */
font-family: var(--police-titre);
color: white;
text-shadow: 0.1875rem 0.1875rem 0.1875rem #1a4aa0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Lettres du titre (découpées par js/navigation.js) : « étincelle puis braise ». Toutes les 7 s
de pause, une onde traverse le titre de gauche à droite. Chaque lettre devient incandescente
(blanc éclatant), puis se colore (--c : orange sur « La », jaune au milieu, bleu sur « Vence »,
comme le dégradé du footer) avant de refroidir et de redevenir blanche. Seules les lettres
changent de couleur : aucun halo, le fond du header ne bouge pas. Elle grossit aussi très
légèrement, une seule fois, sans se déplacer : rien ne tremble. L'ombre bleue reste derrière
pour que les lettres se détachent du fond. */
.header-lettre {
display: inline-block;
will-change: transform; /* couche préparée à l'avance : évite le tremblement */
transform-origin: 50% 60%;
text-shadow: 0.1875rem 0.1875rem 0.1875rem #1a4aa0;
animation: lettre-onde 11s ease-in-out infinite;
animation-delay: calc(1s + var(--i) * 0.11s); /* le décalage de chaque lettre fait l'onde */
}
/* La lueur dure 3 s (≈ 28 % de 11 s) : blanc éclatant à 4 %, couleur à 12 %, retour au blanc à 28 %.
La lettre grossit d'un seul mouvement continu (jusqu'à +6 %, depuis son centre) jusqu'à la
braise, puis revient à sa taille. Le transform n'a volontairement que 3 étapes : s'il en avait
davantage, la vitesse ralentirait à chacune et on croirait voir plusieurs pulsations. */
@keyframes lettre-onde {
0% { color: white; transform: scale(1); }
4% { color: white; } /* étincelle */
12% { color: var(--c); transform: scale(1.06); } /* braise */
28% { color: white; transform: scale(1); } /* refroidit */
100% { color: white; transform: scale(1); }
}
/* mouvement réduit : pas d'effet, titre blanc comme avant */
@media (prefers-reduced-motion: reduce) {
.header-lettre {
animation: none;
}
}
/* ===========================
MENU BURGER
=========================== */
.header-burger {
width: 2.1875rem;
height: 1.5625rem;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index: 3100;
background: transparent;
border: none;
padding: 0;
justify-self: end;
transition: transform 0.7s ease;
}
.header-burger:hover {
transform: scale(1.05);
}
.header-burger span {
display: block;
height: 0.1875rem;
width: 100%;
background: white;
border-radius: 0.1875rem;
transition: all 0.7s ease;
}
.header-burger:hover span {
background: #ffb700;
box-shadow: 0 0.1875rem 0.5rem rgba(0, 0, 0, 0.4);
}
/* Animation croix quand le menu est ouvert */
.header-burger.active span:nth-child(1) {
transform: translateY(0.6875rem) rotate(45deg);
}
.header-burger.active span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.header-burger.active span:nth-child(3) {
transform: translateY(-0.6875rem) rotate(-45deg);
}
.header-burger.active span {
background: #1a4aa0;
}
/* ===========================
MENU NAV
=========================== */
.menu-title {
font-family: var(--police-titre);
font-size: clamp(1.4rem, calc(4vw * var(--taille-texte)), 1.8rem);
color: #1a4aa0;
letter-spacing: 0.1875rem;
text-align: center;
margin-bottom: 1.875rem;
text-shadow: 0.125rem 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
animation: fadeInDown 0.5s ease;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-1.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.header-nav {
position: fixed;
top: 0;
right: -100%;
width: min(21.875rem, 85vw); /* Largeur adaptative */
height: 100%;
background: linear-gradient(135deg, #ff7800, #ffb700, #1a4aa0);
box-shadow: -0.25rem 0 1.25rem rgba(0, 0, 0, 0.3);
padding: 5rem 1.25rem 2.5rem;
transition: right 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Animation plus douce et fluide */
z-index: 2500;
overflow-x: hidden;
}
.header-nav.active {
right: 0;
}
/* Structure du menu */
.header-nav ul {
list-style: none;
text-align: center;
}
.header-nav li {
margin: 0;
opacity: 0;
transform: translateX(1.6875rem); /* Distance réduite pour une animation plus douce */
transition: opacity 0.7s ease, transform 0.7s ease; /* Transition légèrement plus rapide */
}
/* Animation des éléments du menu */
.header-nav.active li {
opacity: 1;
transform: translateX(0);
}
.header-nav.active li:nth-child(1) { transition-delay: 0.70s; }
.header-nav.active li:nth-child(2) { transition-delay: 0.75s; }
.header-nav.active li:nth-child(3) { transition-delay: 0.80s; }
.header-nav.active li:nth-child(4) { transition-delay: 0.85s; }
.header-nav.active li:nth-child(5) { transition-delay: 0.90s; }
.header-nav.active li:nth-child(6) { transition-delay: 0.95s; }
.header-nav.active li:nth-child(7) { transition-delay: 1.00s; }
.header-nav.active li:nth-child(8) { transition-delay: 1.05s; }
.header-nav.active li:nth-child(9) { transition-delay: 1.10s; }
.header-nav.active li:nth-child(10) { transition-delay: 1.15s; }
.header-nav.active li:nth-child(11) { transition-delay: 1.20s; }
.header-nav.active li:nth-child(12) { transition-delay: 1.25s; }
.header-nav.active li:nth-child(13) { transition-delay: 1.30s; }
.header-nav.active li:nth-child(14) { transition-delay: 1.35s; }
.header-nav.active li:nth-child(15) { transition-delay: 1.40s; }
.header-nav.active li:nth-child(16) { transition-delay: 1.45s; }
.header-nav.active li:nth-child(17) { transition-delay: 1.50s; }
.header-nav.active li:nth-child(18) { transition-delay: 1.55s; }
.header-nav a {
color: #fcf0f0;
text-decoration: none;
font-size: 1.1rem;
font-family: var(--police-texte);
transition: all 0.3s ease;
display: block;
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
}
.nav-title {
padding: 0.625rem 0rem;
border-top: 0.0625rem solid rgba(255, 255, 255, 0.3); /* Barre horizontale de séparation */
}
.nav-title:first-child {
margin-top: 0;
padding-top: 0;
border-top: none; /* Pas de barre pour le premier élément */
}
.nav-title a {
color: white;
font-size: 1.3rem;
font-family: var(--police-titre);
}
.header-nav a:hover {
color: #1a4aa0;
background: rgba(255, 255, 255, 0.1);
text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
transform: translateX(-0.3125rem);
}
/* ===========================
OVERLAY NOIR
=========================== */
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.7s ease, visibility 0.7s ease; /* Transition plus douce */
z-index: 2000;
backdrop-filter: blur(0.125rem);
}
.menu-overlay.active {
opacity: 1;
visibility: visible;
}
/* ===========================
SECTION HERO
=========================== */
.hero-section {
position: relative;
width: 100%;
line-height: 0; /* Évite l'espace blanc sous l'image */
}
.hero-section img {
display: block;
width: 100%;
height: auto; /* Garde le ratio d'origine, aucune partie de la photo n'est coupée */
}
/* ===== Accueil : photo des coureurs + flyer cliquable + deux blocs =====
La photo est une vraie image (balise ![]()
), entière, jamais coupée.
- le flyer est une petite vignette en haut à droite, lien vers La Course ;
- petit écran : les deux blocs sont sous la photo ;
- grand écran : les deux blocs flottent en bas à gauche de la photo. */
.page-content--home {
padding-top: var(--header-h);
}
.hero-section--home {
line-height: 1.3;
background-color: rgb(251, 245, 234);
}
/* la photo remplit sa zone (rognée sur les côtés si besoin) :
- petit écran : le bloc d'accueil fait exactement la hauteur de l'écran sous le header ;
la photo prend toute la place au-dessus des deux boutons, qui restent tout en bas,
et la photo reste centrée ;
- grand écran : la photo fait toute la hauteur de l'écran (règle plus bas) */
.hero-section--home {
display: flex;
flex-direction: column;
height: calc(100vh - var(--header-h));
height: calc(100svh - var(--header-h));
height: calc(100dvh - var(--header-h)); /* hauteur réellement visible (barre du navigateur comprise) */
}
.hero-section--home .hero-photo {
flex: 1 1 0;
min-height: 0;
object-fit: cover;
object-position: center;
}
.hero-section--home .hero-flyer {
position: absolute;
z-index: 2;
top: 0.625rem;
right: 0.625rem;
width: clamp(4.75rem, 22vw, 11.875rem);
line-height: 0;
border-radius: 0.5rem;
border: 0.1875rem solid white;
box-shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, 0.4);
transform: rotate(3deg);
transform-origin: top right; /* au survol, le flyer grandit vers la gauche et le bas : il ne touche ni le header ni le bord droit */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Contour du survol : même dégradé que le header, sur 6px (le contour blanc + 3px de plus).
C'est un calque derrière l'image, qui apparaît en fondu : l'image ne bouge pas. */
.hero-section--home .hero-flyer::before {
content: '';
position: absolute;
inset: -0.375rem; /* couvre le contour blanc de 3px + 3px à l'extérieur */
z-index: -1;
border-radius: 0.6875rem;
background: linear-gradient(135deg, #ff7800 0%, #ffb700 35%, #1a4aa0 66%, #06276b 100%); /* décalé : moins d'orange, le bleu commence plus tôt */
opacity: 0;
transition: opacity 0.3s ease;
}
.hero-section--home .hero-flyer:hover {
transform: rotate(0deg) scale(1.25);
box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.5);
}
.hero-section--home .hero-flyer:hover::before {
opacity: 1;
}
.hero-section--home .hero-flyer img {
border-radius: 0.3125rem;
opacity: 1;
}
/* Police Gagalin (gratuite, voir assets/fonts/gagalin/readme.txt) : réservée au slogan de l'accueil */
@font-face {
font-family: 'Gagalin';
src: url('../assets/fonts/gagalin/Gagalin-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* slogan sur 2 lignes. Petit écran : entre le bord gauche et le flyer,
à hauteur du flyer (vignette ≈ 1,41 × sa largeur de haut, posée à 10px du haut) */
.hero-tagline {
position: absolute;
z-index: 2;
top: calc(0.25rem + clamp(4.75rem, 22vw, 11.875rem) * 0.72);
left: 0.75rem;
transform: translateY(-50%);
width: calc(100% - clamp(6.25rem, 22vw, 11.875rem) - 2.5rem);
margin: 0;
line-height: 1.2;
text-align: center;
font-family: 'Gagalin', var(--police-titre);
font-size: clamp(1.1rem, calc(5.2vw * var(--taille-texte)), 1.9rem);
color: white;
text-shadow: 0.1875rem 0.1875rem 0.375rem rgba(32, 23, 10, 0.9);
}
.hero-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
padding: 0.875rem 1rem 1rem;
}
/* iPhone (Safari) : la barre d'adresse flottante recouvre le bas de l'écran,
les boutons restent donc un peu au-dessus */
@supports (-webkit-touch-callout: none) {
@media (max-width: 799px) {
.hero-actions {
padding-bottom: calc(env(safe-area-inset-bottom, 0rem) + 3.5rem);
}
}
}
.hero-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.375rem;
padding: 1.125rem 0.875rem;
border-radius: 1.125rem;
text-align: center;
text-decoration: none;
color: white;
box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.25);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-card--gauche {
background: linear-gradient(135deg, #ff7800, #ffb700);
}
.hero-card--droite {
background: linear-gradient(135deg, #1a4aa0, #06276b);
}
.hero-card:hover {
transform: translateY(-0.375rem) scale(1.02);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}
/* reflet lumineux, comme sur les autres cartes du site */
.hero-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.25), transparent 45%);
pointer-events: none;
}
.hero-card-title {
position: relative;
font-family: var(--police-titre);
font-size: 1.15rem;
text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
}
.hero-card-badge {
position: relative;
padding: 0.1875rem 0.75rem;
border-radius: 62.4375rem;
background: rgba(255, 255, 255, 0.9);
color: #c25a00;
font-family: var(--police-titre);
font-size: 0.8rem;
line-height: 1.2;
white-space: nowrap;
}
.hero-card-text,
.hero-card-arrow {
display: none; /* petit écran : seulement le titre, en bouton */
}
/* Grand écran : les blocs sont posés sur le bas de la photo */
@media (min-width: 800px) {
.hero-section--home {
display: block;
}
.hero-section--home .hero-photo {
height: calc(100vh - var(--header-h));
height: calc(100svh - var(--header-h));
object-position: 70% center;
}
/* grand écran : centré sur la photo */
.hero-tagline {
color: white;
text-shadow: 0.625rem 0.625rem 0.625rem rgba(32, 23, 10, 0.9);
top: 22%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
font-size: clamp(2rem, calc(3.6vw * var(--taille-texte)), 3.5rem);
}
.hero-actions {
position: absolute;
z-index: 2;
left: clamp(1.25rem, 4vw, 4.375rem);
bottom: clamp(1rem, 4vw, 3.75rem);
width: min(35rem, 52%);
padding: 0;
gap: 1rem;
}
.hero-section--home .hero-flyer {
top: 1.125rem;
right: 1.5rem;
}
.hero-card {
padding: 1.25rem 1rem;
border-radius: 1.375rem;
}
.hero-card-title {
font-size: clamp(1.2rem, calc(1.6vw * var(--taille-texte)), 1.7rem);
}
.hero-card-text {
display: block;
position: relative;
font-size: 0.85rem;
line-height: 1.3;
}
.hero-card-arrow {
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 2.125rem;
height: 2.125rem;
border-radius: 50%;
background: white;
font-family: var(--police-titre);
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.hero-card--gauche .hero-card-arrow {
color: #ff7800;
}
.hero-card--droite .hero-card-arrow {
color: #1a4aa0;
}
.hero-card:hover .hero-card-arrow {
transform: translateX(0.375rem);
}
}
/* Hero "titre seul" (pas d'image) : .hero-section hérite de line-height:0
(prévu pour coller une image), ce qui écrase la hauteur du et le
fait passer sous le header fixe. On restaure une vraie bannière ici. */
.hero-section--title {
line-height: normal;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
/* Le header (max(60px, 5vh)) dépasse le padding-top de .page-content (5vh) :
on rajoute cet écart en haut pour que la partie visible soit symétrique. */
padding: calc(2.5rem + max(0rem, 3.75rem - 5vh)) 1.25rem 2.5rem;
background-color: rgb(251, 245, 234);
}
.hero-section--title h2 {
margin: 0;
font-family: var(--police-titre);
font-size: clamp(1.7rem, calc(4.7vw * var(--taille-texte)), 2.7rem);
color: #1a4aa0;
filter: drop-shadow(0.625rem 0.625rem 0.4375rem rgba(0, 0, 0, 0.5));
}
/* Espace réservé pour du contenu à venir, entre la photo et les partenaires/footer */
.hero-below {
width: 100%;
min-height: 20vh;
}
/* ===========================
PARTENAIRES
=========================== */
.partners {
background: white;
border-top: 0.125rem solid #e0e0e0;
padding: 1.25rem 1.25rem;
}
.partners-container {
display: flex;
/* logos répartis sur toute la largeur du bandeau : espace égal entre
les logos et sur les bords ; « gap » ne fixe que l'écart minimum */
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
gap: 1.875rem 1.75rem; /* lignes 30px, écart minimum entre logos 28px */
max-width: 87.5rem;
margin: 0 auto;
}
.partners img {
/* hauteur commune des logos (redéfinie selon la taille d'écran plus bas) */
--logo-h: clamp(2.5rem, 6vw, 3.75rem);
height: var(--logo-h);
width: auto;
object-fit: contain;
opacity: 1;
transition: all 0.3s ease;
filter: grayscale(20%);
}
.partners img:hover {
opacity: 1;
transform: scale(1.20);
filter: grayscale(0%);
}
/* Tailles particulières : on change la vraie hauteur du logo (et non un
transform: scale) pour que l'espacement entre les logos reste identique. */
/* Logo du Département un peu plus petit que les autres */
.partners img[src*="logo_departement_06"] {
height: calc(var(--logo-h) * 0.7);
}
/* Logo Saint-Paul-de-Vence plus grand que les autres */
.partners img[src*="logo_st_paul_de_vence"] {
height: calc(var(--logo-h) * 1.55);
}
/* ===========================
FOOTER
=========================== */
.footer {
background: linear-gradient(135deg, #ff7800, #ffb700, #1a4aa0);
padding: clamp(1.875rem, 5vw, 3.125rem) 1.25rem;
display: flex;
justify-content: center;
align-items: center;
gap: clamp(1.875rem, 5vw, 4.375rem);
flex-wrap: wrap;
}
.footer-logo {
display: flex;
align-items: center;
justify-content: center;
min-width: 12.5rem; /* Empêche le logo d'être trop petit */
}
.footer-logo img {
height: clamp(11.25rem, 30vw, 21.25rem);
width: auto;
filter: drop-shadow(0.75rem 0.75rem 0.4375rem rgba(0, 0, 0, 0.3));
}
.footer-right {
flex: 1;
min-width: 31.25rem; /* Largeur minimale pour grands écrans */
max-width: 62.5rem; /* Largeur maximale augmentée */
}
.footer-content {
color: white;
display: flex;
justify-content: space-between;
gap: clamp(2.5rem, 6vw, 5rem); /* Gap augmenté pour grands écrans */
flex-wrap: wrap;
margin-bottom: 1.875rem;
}
.footer-column {
flex: 1;
min-width: 13.75rem; /* Largeur minimale pour chaque colonne */
max-width: 20rem; /* Empêche les colonnes d'être trop larges */
}
.footer-social-media h3,
.footer-column h3 {
font-family: var(--police-titre);
font-size: clamp(1rem, calc(2.5vw * var(--taille-texte)), 1.25rem);
margin-bottom: 1.25rem;
background: linear-gradient(135deg, #ffb700, #ff7800);
padding: 0.5rem 0.75rem;
border-radius: 0.75rem;
box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.3);
color: white;
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.0625rem;
}
.footer-column p,
.footer-column a {
font-family: var(--police-texte);
font-size: clamp(0.85rem, calc(2vw * var(--taille-texte)), 0.95rem);
line-height: 1.6;
margin: 0.5rem 0;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer-links a {
display: block;
}
.footer-column .link {
text-decoration: none;
color: #e8e6ed;
display: inline-block;
transition: all 0.3s ease;
position: relative;
}
.footer-column .link::after {
content: '';
position: absolute;
bottom: -0.125rem;
left: 0;
width: 0;
height: 0.125rem;
background: #1a4aa0;
transition: width 0.3s ease;
}
.footer-column .link:hover {
color: #1a4aa0;
text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.5);
}
.footer-column .link:hover::after {
width: 100%;
}
/* Ligne "Email :" du footer : le libellé reste sur la première ligne,
l'adresse commence à sa suite et se poursuit sur une 2e ligne si besoin */
.footer-email-label {
white-space: nowrap;
}
.footer-email .link {
display: inline;
/* l'adresse reste sur 2 lignes (coupure avant le « @ »), jamais plus */
white-space: nowrap;
font-size: clamp(0.7rem, calc(3.3vw * var(--taille-texte)), 0.85rem);
overflow-wrap: anywhere;
word-break: break-word;
/* Même animation de soulignement (largeur 0 -> 100%) que .footer-column .link,
mais via un background par ligne : ça reste correct même si le texte
replie sur plusieurs lignes, contrairement à la barre ::after (un seul
bloc en position absolute, qui ne suit que la 1re ligne). */
background-image: linear-gradient(#1a4aa0, #1a4aa0);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 0.125rem;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition: background-size 0.3s ease;
}
/* La barre ::after (position absolute) ne suit que la 1re ligne d'un lien
multi-lignes : on la désactive ici au profit du background ci-dessus. */
.footer-email .link::after {
content: none;
}
.footer-email .link:hover {
background-size: 100% 0.125rem;
}
.footer-social-media {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
flex-wrap: wrap;
padding-top: 1.25rem;
border-top: 0.0625rem solid rgba(255, 255, 255, 0.2);
}
.footer-social-media h3 {
margin: 0;
}
.social-media {
display: flex;
gap: 0.9375rem;
flex-wrap: wrap;
justify-content: center;
}
.social-media a {
display: block;
transition: transform 0.3s ease;
}
.social-media img {
height: 2.5rem;
width: 2.5rem;
object-fit: contain;
filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.2));
}
.social-media a:hover {
transform: translateY(-0.3125rem) scale(1.1);
}
.social-media a:hover img {
filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.4));
}
/* ===========================
SECTIONS DE CONTENU
(texte long : historique, présentation...)
=========================== */
.content-section {
max-width: 56.25rem;
width: 100%;
margin: 0 auto;
padding: clamp(1.875rem, 5vw, 3.75rem) 1.25rem;
}
.content-section h3 {
font-family: var(--police-titre);
font-size: clamp(1.4rem, calc(3vw * var(--taille-texte)), 2rem);
color: #1a4aa0;
margin-bottom: 1.25rem;
}
.content-section p {
font-family: var(--police-texte);
font-size: clamp(1rem, calc(1.5vw * var(--taille-texte)), 1.1rem);
line-height: 1.7;
color: #2b2b2b;
margin-bottom: 1rem;
}
.content-section p:last-child {
margin-bottom: 0;
}
.content-list {
list-style: none;
margin: 1rem 0 0;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.content-list li {
position: relative;
font-family: var(--police-texte);
font-size: clamp(1rem, calc(1.5vw * var(--taille-texte)), 1.1rem);
line-height: 1.5;
color: #2b2b2b;
padding-left: 1.5rem;
}
.content-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.55em;
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background: linear-gradient(135deg, #ff7800, #ffb700);
}
/* Lien dans un texte de contenu */
.content-section p a {
color: #1a4aa0;
font-weight: bold;
text-decoration: underline;
}
.content-section p a:hover {
color: #ff7800;
}
.content-section h4 {
font-family: var(--police-titre);
font-size: clamp(1.1rem, calc(2.2vw * var(--taille-texte)), 1.3rem);
color: #ff7800;
margin: 1.5rem 0 0.5rem;
}
/* Liste « clé / valeur » (horaires, tarifs) */
.info-rows {
list-style: none;
margin: 1rem 0 0;
}
.info-rows li {
display: flex;
gap: 1.25rem;
padding: 0.75rem 0;
border-bottom: 0.0625rem solid rgba(26, 74, 160, 0.15);
font-family: var(--police-texte);
font-size: clamp(1rem, calc(1.5vw * var(--taille-texte)), 1.1rem);
line-height: 1.5;
color: #2b2b2b;
}
.info-rows li:last-child {
border-bottom: none;
}
.info-key {
flex: 0 0 var(--key-w, 5rem);
font-family: var(--police-titre);
color: #1a4aa0;
}
/* ===== Grille de flyers (blocs cliquables, pages Résultats / Photos) ===== */
/* section plus large que le texte pour que 4 flyers par ligne restent lisibles */
.content-section:has(> .flyers-grid) {
max-width: 77.5rem;
}
.flyers-grid {
display: grid;
/* 4 flyers par ligne sur ordinateur, 3 puis 2 sur tablette, 1 sur mobile */
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-top: 0.625rem;
}
.flyer-card {
display: flex;
flex-direction: column;
align-items: stretch;
background: white;
border-radius: 1rem;
overflow: hidden;
text-decoration: none;
box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Carte sans lien (année dont les résultats ne sont pas encore publiés) */
.flyer-card--soon {
cursor: default;
}
.flyer-card:hover {
transform: translateY(-0.5rem) scale(1.02);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}
/* Flyer affiché en entier (contain) : rien n'est coupé, même les
partenaires en bas. Format commun proche de celui des flyers. */
.flyer-card img {
display: block;
width: 100%;
aspect-ratio: 7 / 10;
object-fit: contain;
background-color: white;
}
.flyer-card .flyer-year {
display: block;
padding: 0.625rem 0;
text-align: center;
font-family: var(--police-titre);
font-size: 1.1rem;
color: white;
background: linear-gradient(135deg, #ff7800, #ffb700);
}
.flyer-card:hover .flyer-year {
background: linear-gradient(135deg, #1a4aa0, #06276b);
}
@media (max-width: 1000px) {
.flyers-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 760px) {
.flyers-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.flyers-grid {
grid-template-columns: 1fr;
}
}
/* ================================================= */
/* ================= RESPONSIVE ================= */
/* ================================================= */
/* 1. GRANDS ÉCRANS (à partir de 1700 px) : tout le site grandit dans les mêmes proportions.
Toutes les tailles du CSS sont en rem : en agrandissant la taille de base (html) avec la largeur
de l'écran, la mise en page reste exactement celle d'un écran de 1700 px, en plus grand. */
/* 2. TABLETTES (max-width: 1024px) */
@media (max-width: 1024px) {
.header-title h1 {
font-size: clamp(1rem, calc(2.5vw * var(--taille-texte)), 1.5rem);
}
.footer {
flex-direction: column;
text-align: center;
}
.footer-content {
flex-direction: column;
text-align: center;
}
.footer-right {
min-width: 0;
width: 100%;
}
.footer-column {
min-width: 100%;
}
}
/* 3. MOBILES (max-width: 768px) */
@media (max-width: 768px) {
:root {
--header-h: 3.75rem;
}
.header {
height: 3.75rem;
min-height: 3.75rem;
padding: 0 0.625rem;
}
.header-logo img {
height: 2.8125rem;
max-width: 3.75rem;
}
.header-title {
padding: 0 0.5rem;
overflow: visible;
}
.header-title h1 {
font-size: clamp(0.75rem, calc(3.5vw * var(--taille-texte)), 0.95rem);
padding: 0;
}
.header-burger {
width: 1.875rem;
height: 1.375rem;
}
.header-burger span {
height: 0.15625rem;
}
.header-burger.active span:nth-child(1) {
transform: translateY(0.59375rem) rotate(45deg);
}
.header-burger.active span:nth-child(3) {
transform: translateY(-0.59375rem) rotate(-45deg);
}
.page-content {
padding-top: 3.75rem;
}
.hero-section--title {
padding: 2.1875rem 1.25rem;
}
.menu-title {
font-size: 1.5rem;
margin-bottom: 1.25rem;
}
.header-nav {
padding: 4.375rem 0.9375rem 1.875rem;
width: 90vw;
}
.header-nav a {
font-size: 1rem;
padding: 0.625rem 0.9375rem;
}
.nav-title a {
font-size: 1.2rem;
}
.hero-below {
min-height: 10vh;
}
.partners-container {
gap: 1.5625rem 3.4375rem;
}
.partners img {
--logo-h: 2.8125rem;
}
.footer {
padding: 1.875rem 0.9375rem;
}
.footer-logo img {
height: 8.75rem;
}
.footer-content {
gap: 1.5625rem;
}
.footer-social-media {
flex-direction: column;
gap: 0.9375rem;
}
.social-media img {
height: 2.1875rem;
width: 2.1875rem;
}
}
/* Entre téléphone et tablette : écart plus large pour répartir les logos en 3 + 2
(plutôt que 4 + 1 avec un logo seul) */
@media (min-width: 620px) and (max-width: 759px) {
.partners-container {
gap: 1.5625rem 5.625rem;
}
}
/* Tablette en portrait (768 px) : écart réduit pour garder les 5 logos sur une ligne */
@media (min-width: 760px) and (max-width: 768px) {
.partners-container {
gap: 1.5625rem 1.875rem;
}
}
/* 4. PETITS MOBILES ET PAYSAGE (max-width: 480px OU landscape) */
@media (max-width: 480px), (max-height: 500px) and (orientation: landscape) {
:root {
--header-h: 3.125rem;
}
.header {
height: 3.125rem;
min-height: 3.125rem;
padding: 0 0.5rem;
}
.header-logo img {
height: 2.375rem;
}
.header-title h1 {
font-size: clamp(0.7rem, calc(3vw * var(--taille-texte)), 0.85rem);
}
.header-burger {
width: 1.75rem;
height: 1.25rem;
}
.page-content {
padding-top: 3.125rem;
}
.header-nav {
padding: 3.75rem 0.9375rem 1.25rem;
}
.menu-title {
margin-bottom: 0.9375rem;
font-size: 1.3rem;
}
.header-nav a {
padding: 0.375rem 0.9375rem;
font-size: 0.95rem;
}
.nav-title a {
font-size: 1.1rem;
}
/* téléphone : écart réduit pour garder les logos sur 2 lignes */
.partners-container {
gap: 1.5625rem 2.8125rem;
}
.partners img {
--logo-h: 2.5rem;
}
.footer-logo img {
height: 7.5rem;
}
.social-media img {
height: 2rem;
width: 2rem;
}
}
/* ===== Pages d'attente (inscriptions en attente, photos pas encore disponibles) ===== */
.hero-section--big h2 {
font-size: clamp(2.2rem, calc(7vw * var(--taille-texte)), 4.5rem);
}
.hero-section--big {
padding-top: calc(clamp(3.75rem, 10vw, 6.875rem) + max(0rem, 3.75rem - 5vh));
padding-bottom: clamp(3.75rem, 10vw, 6.875rem);
}
/* Sous-titre sous le grand titre (ex. date d'ouverture des inscriptions) */
.hero-section--big {
flex-direction: column;
gap: clamp(0.75rem, 2vw, 1.375rem);
}
.hero-subtitle {
margin: 0;
padding: 0.5rem 1.375rem;
border-radius: 62.4375rem;
font-family: var(--police-titre);
font-size: clamp(1.2rem, calc(3vw * var(--taille-texte)), 2rem);
line-height: 1.3;
color: white;
background: linear-gradient(135deg, #ff7800, #ffb700);
box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15);
}
.hero-subtitle sup {
line-height: 0;
}
.status-section {
text-align: center;
min-height: 25vh;
}
.status-section a {
color: #1a4aa0;
font-weight: bold;
text-decoration: underline;
}
.status-section a:hover {
color: #ff7800;
}
.status-section sup {
line-height: 0;
}
/* ================================================= */
/* ==== BLOCS CLIQUABLES ORANGE / BLEU : EFFETS ==== */
/* ================================================= */
/* Cartes de l'accueil (.hero-card), cartes de choix (.choice-card) et boutons
(.home-btn, .friend-btn, .sponsor-btn, .village-btn). Au survol :
1. un reflet de lumière traverse le bloc en diagonale, comme sur du verre ;
2. l'ombre prend la couleur du bloc (halo orange ou bleu) ;
3. (cartes seulement) le dégradé glisse : l'orange file vers le jaune, le bleu vers le bleu nuit.
Pour tout annuler : supprimer ce bloc. Les classes doublées (.x.x) servent à passer
devant les règles des autres fichiers CSS, chargés après celui-ci. */
/* le reflet (calque ::after, ne capte pas la souris) */
.hero-card.hero-card::after,
.choice-card.choice-card::after,
.home-btn.home-btn::after,
.friend-btn.friend-btn::after,
.sponsor-btn.sponsor-btn::after,
.village-btn.village-btn::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 38%;
z-index: 3;
pointer-events: none;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
transform: translateX(-160%) skewX(-20deg); /* au repos : hors du bloc, à gauche */
}
.hero-card.hero-card:hover::after,
.choice-card.choice-card:hover::after,
.home-btn.home-btn:hover::after,
.friend-btn.friend-btn:hover::after,
.sponsor-btn.sponsor-btn:hover::after,
.village-btn.village-btn:hover::after {
transform: translateX(380%) skewX(-20deg); /* traverse le bloc et sort à droite */
transition: transform 1.2s ease;
}
/* les boutons doivent couper le reflet à leur bord (les cartes le font déjà) */
.home-btn.home-btn,
.friend-btn.friend-btn,
.sponsor-btn.sponsor-btn,
.village-btn.village-btn {
position: relative;
overflow: hidden;
}
/* halo coloré sous le bloc */
.hero-card--gauche:hover,
.choice-card.inscrire:hover,
.choice-card.orange:hover,
.choice-card.photos:hover,
.choice-card.kids:hover,
.choice-card.corrida:hover,
.village-btn--white:hover,
.friend-btn:hover,
.sponsor-btn:hover {
box-shadow: 0 1.125rem 2.375rem rgba(255, 120, 0, 0.5);
}
.hero-card--droite:hover,
.choice-card.verifier:hover,
.choice-card.violet:hover,
.choice-card.resultats:hover,
.home-btn:hover {
box-shadow: 0 1.125rem 2.375rem rgba(26, 74, 160, 0.55);
}
/* dégradé qui glisse (cartes) : le fond est 2 fois plus grand que le bloc, on le déplace au survol */
.hero-card.hero-card,
.choice-card.choice-card {
background-size: 220% 220%;
background-position: 0% 0%;
transition: transform 0.3s ease, box-shadow 0.3s ease, background-position 1.1s ease;
}
.hero-card.hero-card:hover,
.choice-card.choice-card:hover {
background-position: 100% 100%;
}
/* Cartes de l'accueil : comme les cartes de choix (S'inscrire / Vérifier son inscription), le titre
et le bouton (la flèche) changent de couleur au survol : bleu sur la carte orange, orange sur la
carte bleue. La flèche prend le dégradé opposé et devient blanche. */
.hero-card-title {
transition: color 0.4s ease;
}
.hero-card--gauche:hover .hero-card-title {
color: #1a4aa0;
}
.hero-card--droite:hover .hero-card-title {
color: #ff7800;
}
.hero-card--gauche:hover .hero-card-arrow {
background: linear-gradient(135deg, #1a4aa0, #06276b);
color: white;
}
/* le badge « 350 dossards » (carte orange) suit : fond bleu et texte blanc, comme la flèche */
.hero-card--gauche:hover .hero-card-badge {
background: linear-gradient(135deg, #1a4aa0, #06276b);
color: white;
}
.hero-card--droite:hover .hero-card-arrow {
background: linear-gradient(135deg, #ff7800, #ffb700);
color: white;
}
/* mouvement réduit : pas de reflet ni de glissement */
@media (prefers-reduced-motion: reduce) {
.hero-card.hero-card::after,
.choice-card.choice-card::after,
.home-btn.home-btn::after,
.friend-btn.friend-btn::after,
.sponsor-btn.sponsor-btn::after,
.village-btn.village-btn::after {
display: none;
}
.hero-card.hero-card,
.choice-card.choice-card {
background-size: auto;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
}