/* ========================================================================= /css/responsive.css : TELEPHONE ET TABLETTE, POUR TOUT LE SITE ------------------------------------------------------------------------- Ajoutee le 2026-09-29. Chargee APRES la feuille compilee (/assets/style-*.css) sur chaque page. POURQUOI UN FICHIER A PART ET PAS UNE RETOUCHE DE LA FEUILLE COMPILEE Celle-ci est produite par Vite ; la modifier a la main la desaccorderait de ses sources, et le prochain build effacerait la correction. Ce fichier vit dans site/public/css/ (Vite le recopie tel quel) et dans site/dist/css/ (ce que nginx sert). POURQUOI « html » DEVANT CHAQUE SELECTEUR Pour gagner a egalite de classes sans dependre de l'ordre des balises : au prochain build, Vite peut injecter sa feuille APRES celle-ci. MESURE AVANT CORRECTION (_outils/audit_ecrans.js, 360 px, connecte) /profil page de 511 px pour un ecran de 360 /sections 382 px /certificats 401 px toutes le debut du contenu cache sous l'en-tete (185 px de haut sur telephone pour un espace reserve de 100 a 140 px) 768 et plus 15 px de defilement horizontal sur ordinateur ========================================================================= */ /* --- 1. La page ne doit jamais etre plus large que l'ecran --------------- La feuille compilee pose « body { width: 100vw; overflow-x: hidden } ». 100vw COMPTE la barre de defilement verticale : sur un ordinateur, la page faisait donc 15 px de trop. Et overflow-x: hidden ne corrige rien, il CACHE : sur telephone, tout ce qui depassait etait coupe net, sans moyen de le faire defiler (« BOXING CLUB ENER » tronque dans l'en-tete). */ html body { width: auto; } /* --- 2. Les mots longs des titres ------------------------------------------ « QUESTIONNAIRES » en 2,5 rem ne tient pas dans 360 px : le mot sortait de l'ecran. On reduit les titres de section sur telephone et on autorise la coupure (avec trait d'union, la page est declaree en francais). */ html h1, html h2, html h3 { overflow-wrap: break-word; } @media (max-width: 600px) { html .section-title h1, html .section-title h2 { font-size: clamp(1.55rem, 7.2vw, 2.2rem); hyphens: auto; } } /* --- 3. L'en-tete : compact, sur deux lignes au plus --------------------- Sous 992 px, la feuille compilee empile le logo puis TOUS les liens, qui passent a la ligne : trois rangees, environ 185 px de haut. Or l'en-tete est fixe et chaque page ne reserve dessous que 100 a 140 px : le debut du contenu (le titre, souvent) etait cache. Ici : le logo sur une ligne, puis UNE ligne de liens qui defile au doigt si elle ne tient pas. Environ 93 px, sous tous les espaces reserves. JUSQU A 1200 px ET NON 992 : entre 993 et 1200 px (tablette en paysage, petit portable), la forme « ordinateur » passait sur deux rangees, 125 px pour un espace reserve de 100 : les titres de /certificats, /chartes... etaient caches (mesure du 29/09 a 1024 px). Au-dessus de 992 px le logo et la ligne de liens restent cote a cote, la ligne defilant si besoin. Centree quand elle tient (marges automatiques aux extremites), alignee a gauche quand elle defile : un justify-content: center rendrait le debut de la ligne inatteignable des qu'elle deborde. */ @media (max-width: 1200px) { html .navbar { padding: 0.35rem 0 !important; } html .navbar .nav-content { gap: 0.3rem !important; padding-bottom: 0.1rem !important; } html .navbar .logo { max-width: 100%; justify-content: center; flex: 0 0 auto; } html .navbar .logo a { gap: 0.45rem !important; min-width: 0; } html .navbar .nav-logo-img { width: 38px; height: 38px; } html .navbar .logo span { font-size: clamp(0.95rem, 4.4vw, 1.15rem); letter-spacing: 1px; white-space: nowrap; } html .navbar .nav-actions { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0.1rem !important; padding: 0 0.5rem 0.1rem !important; min-width: 0; flex: 1 1 auto; } html .navbar .nav-actions::-webkit-scrollbar { display: none; } html .navbar .nav-actions > * { flex: 0 0 auto; } html .navbar .nav-actions > :first-child { margin-left: auto !important; } html .navbar .nav-actions > a:last-of-type { margin-right: auto !important; } html .navbar .nav-actions .nav-link { white-space: nowrap; font-size: 0.8rem !important; padding: 6px 8px !important; } } /* --- 4. Boutons pleine largeur poses COTE A COTE ---------------------------- Sous 768 px, la feuille compilee met tout .btn-primary a width: 100 %. C'est juste pour un bouton seul, faux pour deux boutons d'une meme rangee : le second sortait de l'ecran (« Deconnexion » sur le profil). Une rangee de boutons passe a la ligne a la place. */ @media (max-width: 768px) { html .rangee-boutons { flex-wrap: wrap; } html .rangee-boutons > * { flex: 1 1 100% !important; } } /* --- 5. Bandeaux des pages de sections (/sections, /junior, /senior) ------- Hauteur FIXE de 40vh et contenu centre, sans place pour l'en-tete fixe : sur telephone, 40 % de la hauteur ne contient pas titre + sous-titre + en-tete. Le mot « SECTION » etait cache sous l'en-tete et le sous-titre recouvert par la carte suivante (mesure du 29/09, 360 et 390 px). */ @media (max-width: 1200px) { html .hero-mini, html .sections-hero { height: auto; min-height: 40vh; padding: 110px 1rem 3rem; box-sizing: border-box; } } /* --- 6. Menus deroulants ------------------------------------------------- Un