/** * Media queries responsive unifiées * À placer dans /assets/css/responsive.css * Remplace tous les fichiers responsive séparés * À charger en DERNIER après tous les autres CSS */ /* DASHBOARD : voir assets/css/admin_dashboard.css (chargé uniquement par admin/dashboard.php). */ /* ========================================== TABLETTES (≤ 992px) ========================================== */ @media (max-width: 992px) { /* Footer */ footer .footer-content { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-2xl); } /* Admin */ .sidebar { width: 200px; } .main-content { margin-left: 220px; } /* Menus */ .menu-cards { gap: var(--spacing-xl); } .menu-cards .card { max-width: calc(50% - var(--spacing-xl)); min-width: 45%; } /* Steps */ .step-cards { gap: var(--spacing-2xl); } .step-card { max-width: 45%; } /* Testimonials */ .testimonial-cards { gap: var(--spacing-xl); } .testimonial-card { max-width: calc(50% - var(--spacing-xl)); } } /* ========================================== BASCULE MENU BURGER — deux seuils selon l'état de connexion `.container` est plafonné à max-width: var(--max-width-xl) = 1200px (base.css) pour tout viewport entre 1200px et 1919px — il ne s'élargit à 1600px qu'à partir de 1920px. Le menu horizontal a été resserré (gap de nav ul réduit à --spacing-lg, voir public.css) pour tenir dans ces 1200px dans le pire cas (français, déconnecté : 5 liens + sélecteur de langue + 2 boutons "S'inscrire"/"Connexion"). Mais un visiteur connecté n'affiche qu'une icône compte à la place de ces deux boutons — bien moins large — et le menu tiendrait alors sur une ligne à des largeurs nettement inférieures à 1200px. Utiliser le même seuil pour les deux cas ferait donc basculer le menu connecté en burger bien avant que ce soit nécessaire. Les deux blocs ci-dessous sont scindés par la classe posée sur par templates/header.php (is-guest / is-authenticated) pour donner à chacun le seuil qui lui correspond réellement. Voir aussi le bloc @media (max-width: 768px) plus bas : le menu burger y est redéclaré sans condition de classe (identique aux deux blocs ci-dessous, dupliqué pour ne pas élargir tous les autres réglages "mobile" de ce bloc-là — cartes de menu, hero, etc.) puisqu'à cette largeur les deux états ont de toute façon besoin du menu burger. */ @media (max-width: 1200px) { body.is-guest .menu-toggle { display: flex; } body.is-guest #mainNav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--background-color); box-shadow: var(--shadow-lg); padding: var(--spacing-lg) 0; z-index: 1099; border-top: 1px solid var(--border-light); } body.is-guest #mainNav.nav-open { display: block; animation: slideDown 0.25s ease; } body.is-guest header .container { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 0; } body.is-guest nav ul { flex-direction: column; width: 100%; gap: 0; padding: 0 var(--spacing-lg); } body.is-guest nav ul li { width: 100%; border-bottom: 1px solid var(--border-light); } body.is-guest nav ul li:last-child { border-bottom: none; } body.is-guest nav ul li a, body.is-guest nav ul li a.btn { width: 100%; padding: 14px 0; margin: 0; justify-content: flex-start; } /* Sépare visuellement les boutons pleins (fond coloré) les uns des autres et du sélecteur de langue au-dessus : avec `nav ul` en gap: 0 (cf. ci-dessus), seule une bordure fine les séparerait sinon, ce qui les fait paraître collés/non stylés vu leur fond opaque. */ body.is-guest nav ul li a.btn { margin-top: var(--spacing-md); } body.is-guest .user-menu { width: 100%; flex-direction: column; align-items: flex-start; margin-top: var(--spacing-lg); } body.is-guest .language-selector { width: 100%; flex-direction: column; align-items: flex-start; margin-top: var(--spacing-lg); } /* Même correctif que le bloc ≤768px plus bas (.language-dropdown) — nécessaire dès ce seuil-ci (1200px) côté invité, puisque c'est à ce seuil que .language-selector devient pleine largeur ci-dessus : sans ce correctif, le menu restait en position absolute/right:0, détaché à droite du bouton devenu pleine largeur/aligné à gauche. */ body.is-guest .language-dropdown { position: static; top: auto; right: auto; left: auto; width: 100%; min-width: 0; margin-top: var(--spacing-sm); box-shadow: none; border: 1px solid var(--border-light); } } /* Seuil connecté : mesuré empiriquement (menu sans les 2 boutons "S'inscrire"/"Connexion", juste l'icône compte — nettement moins large que le cas invité ci-dessus). Technique : nav forcée en layout horizontal à toute largeur via override CSS, comparaison de la hauteur de chaque

de #mainNav à la largeur testée vs. à une largeur de référence de 2000px (une hauteur significativement plus grande signale un retour à la ligne du texte du lien, pas juste un lien naturellement plus haut comme l'icône compte/les boutons). Résultat identique en français et en anglais : tient sur une ligne jusqu'à 930px, bascule sur 2 lignes dès 925px (les liens "Menus" et "About"/"À propos" se replient en premier). 1000px retenu : ~70px de marge de sécurité au-dessus du point de bascule mesuré (930px), pour absorber d'éventuelles variations de rendu de police (chargement des polices Google Fonts, sous-pixel) sans faire réapparaître le repli prématurément. */ @media (max-width: 1000px) { body.is-authenticated .menu-toggle { display: flex; } body.is-authenticated #mainNav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--background-color); box-shadow: var(--shadow-lg); padding: var(--spacing-lg) 0; z-index: 1099; border-top: 1px solid var(--border-light); } body.is-authenticated #mainNav.nav-open { display: block; animation: slideDown 0.25s ease; } body.is-authenticated header .container { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 0; } body.is-authenticated nav ul { flex-direction: column; width: 100%; gap: 0; padding: 0 var(--spacing-lg); } body.is-authenticated nav ul li { width: 100%; border-bottom: 1px solid var(--border-light); } body.is-authenticated nav ul li:last-child { border-bottom: none; } body.is-authenticated nav ul li a, body.is-authenticated nav ul li a.btn { width: 100%; padding: 14px 0; margin: 0; justify-content: flex-start; } body.is-authenticated nav ul li a.btn { margin-top: var(--spacing-md); } body.is-authenticated .user-menu { width: 100%; flex-direction: column; align-items: flex-start; margin-top: var(--spacing-lg); } body.is-authenticated .language-selector { width: 100%; flex-direction: column; align-items: flex-start; margin-top: var(--spacing-lg); } /* Même correctif que le bloc ≤768px plus bas (.language-dropdown / .user-dropdown) — nécessaire dès ce seuil-ci (1000px) côté authentifié, puisque c'est à ce seuil que .language-selector/ .user-menu deviennent pleine largeur ci-dessus : sans ces correctifs, les deux menus restaient en position absolute/right:0, détachés à droite du bouton devenu pleine largeur/aligné à gauche. */ body.is-authenticated .language-dropdown { position: static; top: auto; right: auto; left: auto; width: 100%; min-width: 0; margin-top: var(--spacing-sm); box-shadow: none; border: 1px solid var(--border-light); } body.is-authenticated .user-dropdown { position: static; top: auto; right: auto; left: auto; transform: none; width: 100%; min-width: 0; margin-top: var(--spacing-sm); box-shadow: none; border: 1px solid var(--border-light); } body.is-authenticated .user-dropdown.active { transform: none; } body.is-authenticated .user-dropdown::before { display: none; } } /* ========================================== TABLETTES PETITES (≤ 768px) ========================================== */ @media (max-width: 768px) { /* Hamburger menu visible */ .menu-toggle { display: flex; } /* Navigation mobile — masquée par défaut, visible quand .nav-open */ #mainNav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--background-color); box-shadow: var(--shadow-lg); padding: var(--spacing-lg) 0; z-index: 1099; border-top: 1px solid var(--border-light); } #mainNav.nav-open { display: block; animation: slideDown 0.25s ease; } header { position: sticky; top: 0; } header .container { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 0; } nav ul { flex-direction: column; width: 100%; gap: 0; padding: 0 var(--spacing-lg); } nav ul li { width: 100%; border-bottom: 1px solid var(--border-light); } nav ul li:last-child { border-bottom: none; } nav ul li a, nav ul li a.btn { width: 100%; padding: 14px 0; margin: 0; justify-content: flex-start; } /* Sépare visuellement les boutons pleins (fond coloré) les uns des autres et du sélecteur de langue au-dessus : avec `nav ul` en gap: 0 (cf. ci-dessus), seule une bordure fine les séparerait sinon, ce qui les fait paraître collés/non stylés vu leur fond opaque. */ nav ul li a.btn { margin-top: var(--spacing-md); } .user-menu { width: 100%; flex-direction: column; align-items: flex-start; margin-top: var(--spacing-lg); } .language-selector { width: 100%; flex-direction: column; align-items: flex-start; margin-top: var(--spacing-lg); } /* Menus */ .menus { padding: var(--spacing-3xl) 0; } .menus h2 { font-size: var(--font-size-3xl); } .menu-cards { flex-direction: column; align-items: center; gap: var(--spacing-2xl); } .menu-cards .card { max-width: 100%; width: 100%; } /* Steps */ .steps { padding: var(--spacing-3xl) 0; } .steps h2 { font-size: var(--font-size-3xl); } .step-cards { flex-direction: column; align-items: center; gap: var(--spacing-2xl); } .step-card { max-width: 100%; width: 100%; padding: var(--spacing-2xl); } .step-card .icon { font-size: 40px; } /* Testimonials */ .testimonials { padding: var(--spacing-3xl) 0; } .testimonials h2 { font-size: var(--font-size-3xl); } .testimonial-cards { flex-direction: column; align-items: center; gap: var(--spacing-2xl); } .testimonial-card { max-width: 100%; width: 100%; } /* Typographie responsive */ h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } /* `header .container` used to be redeclared here a second time with `flex-direction: column` (instead of `row` set above) — the same leftover-duplicate pattern as the `nav ul` rule below. It forced the logo and hamburger button to stack vertically on mobile instead of sitting side by side, wasting vertical space and making the logo look oversized/unfinished. Removed; the `row` declaration above (logo left, hamburger right) is the only one in effect now. */ /* `nav ul` / `nav ul li` / `nav ul li a` used to be redeclared here a second time with `gap: var(--spacing-sm)` (instead of `gap: 0` set above) and no `width`/`border-bottom` — a leftover duplicate that silently won the cascade (later declaration, same specificity) and stacked a 10px flex-gap on top of each link's own 14px top+bottom padding, producing ~38px of dead space between plain nav links. Removed: the `width: 100%` duplicates were no-ops anyway (already set above), and `gap` is intentionally 0 here — separation between plain links comes from `border-bottom` (see above), matching the list style used elsewhere (e.g. `.language-option`). */ /* Hero */ .hero { height: 400px; } .hero h1 { font-size: var(--font-size-3xl); } .hero p { font-size: var(--font-size-lg); } /* Footer */ footer .footer-main { padding: var(--spacing-3xl) 0 var(--spacing-2xl); } footer .footer-content { grid-template-columns: 1fr; gap: var(--spacing-2xl); } footer .footer-column { text-align: center; } footer .footer-column ul.footer-links { flex-direction: row !important; justify-content: center !important; flex-wrap: wrap !important; } footer .social-media { justify-content: center; } footer .footer-bottom .container { flex-direction: column; gap: var(--spacing-sm); text-align: center; } /* Menu utilisateur — sur mobile, le sous-menu se déplie dans le flux normal (accordéon) sous l'icône plutôt qu'en superposition absolue : positionné en absolu et centré/aligné à droite, il se retrouvait détaché du bouton (devenu pleine largeur/aligné à gauche via .user-menu ci-dessus) et pouvait déborder de l'écran sur les petits écrans. */ .user-dropdown { position: static; top: auto; right: auto; left: auto; transform: none; width: 100%; min-width: 0; margin-top: var(--spacing-sm); box-shadow: none; border: 1px solid var(--border-light); } .user-dropdown.active { transform: none; } .user-dropdown::before { display: none; } .user-icon { width: 40px; height: 40px; font-size: var(--font-size-lg); } /* Même correctif pour le sélecteur de langue (même schéma de bug). */ .language-dropdown { position: static; top: auto; right: auto; left: auto; width: 100%; min-width: 0; margin-top: var(--spacing-sm); box-shadow: none; border: 1px solid var(--border-light); } /* Admin */ .sidebar { width: 200px; } .main-content { margin-left: 220px; padding: var(--spacing-md); } .table-wrapper { padding: var(--spacing-lg); } .table-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-md); } .table-controls { flex-direction: column; width: 100%; } .search-container input[type="text"] { width: 100%; } .data-table { font-size: var(--font-size-xs); } .data-table thead th, .data-table tbody td { padding: 8px 6px; } .autocomplete-dropdown { max-height: 200px; } .autocomplete-item { padding: 8px 10px; font-size: var(--font-size-sm); } /* Inscription */ .inscription-section { padding: var(--spacing-2xl) 0 var(--spacing-5xl); } .inscription-header h1 { font-size: var(--font-size-4xl); } #inscriptionForm { padding: var(--spacing-2xl) var(--spacing-xl); border-radius: var(--radius-2xl); } .form-row { grid-template-columns: 1fr; } .progress-indicator { margin-bottom: var(--spacing-3xl); padding: 0 var(--spacing-lg); } .progress-indicator::before { left: 60px; right: 60px; } .step-number { width: 50px; height: 50px; font-size: var(--font-size-xl); } .step-label { font-size: var(--font-size-sm); max-width: 100px; } .form-actions { flex-direction: column; gap: var(--spacing-md); } .form-actions button, .form-actions .btn { max-width: 100%; } .criteria-grid { grid-template-columns: 1fr; } .child-card, .school-card, .dietary-card { padding: var(--spacing-lg); } .child-header h3, .school-card h3, .dietary-card h3 { font-size: var(--font-size-2xl); } .inscription-methods { padding: var(--spacing-3xl) var(--spacing-xl); margin: 0 var(--spacing-lg) var(--spacing-3xl); border-radius: var(--radius-2xl); } .google-signup-btn, .manual-signup-btn { padding: 16px 25px; font-size: var(--font-size-md); gap: 12px; } .google-signup-btn svg { width: 22px; height: 22px; } .manual-signup-btn i { font-size: var(--font-size-lg); } .login-link { font-size: var(--font-size-md); margin: var(--spacing-xl) var(--spacing-lg) 0; } .google-registration-container { padding: var(--spacing-3xl) var(--spacing-xl); margin: var(--spacing-sm); } .google-registration-header h1 { font-size: var(--font-size-2xl); } .google-profile img, .google-profile-avatar { width: 45px; height: 45px; font-size: var(--font-size-xl); } .google-registration-buttons { gap: 8px; } .google-registration-buttons button { padding: 12px; font-size: 0.95em; } /* Record form */ .record-form { padding: var(--spacing-lg); } .record-form .form-group input, .record-form .form-group select, .record-form .form-group textarea { font-size: 16px; /* Évite le zoom sur mobile */ } .record-form .form-actions { flex-direction: column; } .record-form .btn-save, .record-form .btn-cancel { width: 100%; } } /* ========================================== MOBILES (≤ 480px) ========================================== */ @media (max-width: 480px) { /* Menus */ .menus { padding: var(--spacing-2xl) 0; } .menus h2 { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-md); } .menus p { font-size: var(--font-size-md); margin-bottom: var(--spacing-2xl); } .menu-cards { gap: var(--spacing-xl); } .card h3 { font-size: var(--font-size-xl); } .card p { font-size: var(--font-size-sm); } /* Steps */ .steps { padding: var(--spacing-2xl) 0; } .steps h2 { font-size: var(--font-size-2xl); } .step-cards { gap: var(--spacing-xl); } .step-card { padding: var(--spacing-xl) var(--spacing-lg); } .step-card .icon { font-size: 35px; margin-bottom: var(--spacing-md); } .step-card h3 { font-size: var(--font-size-lg); } .step-card p { font-size: var(--font-size-sm); } /* Testimonials */ .testimonials { padding: var(--spacing-2xl) 0; } .testimonials h2 { font-size: var(--font-size-2xl); } .testimonial-cards { gap: var(--spacing-xl); } .testimonial-card { padding: var(--spacing-xl); } .testimonial-card img { width: 80px; height: 80px; } .testimonial-card p { font-size: var(--font-size-sm); } .testimonial-card h4 { font-size: var(--font-size-md); } /* Typographie */ h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); } .container { padding: 0 var(--spacing-md); } /* Header */ .logo { font-size: var(--font-size-xl); } /* Hero */ .hero h1 { font-size: var(--font-size-2xl); } .hero p { font-size: var(--font-size-md); } /* Boutons */ .btn { padding: 8px 16px; font-size: var(--font-size-sm); } /* Footer */ footer .footer-logo { font-size: var(--font-size-xl); } footer .footer-column h4 { font-size: var(--font-size-md); } footer .footer-column ul.footer-links { gap: var(--spacing-md) !important; } footer .footer-column ul.footer-links li a { font-size: var(--font-size-sm) !important; } footer .input-group input { font-size: var(--font-size-sm); padding: 10px 15px; } footer .btn-newsletter { padding: 10px 15px; font-size: var(--font-size-sm); } footer .copyright, footer .footer-credit { font-size: var(--font-size-xs); } /* Admin — sidebar slide-in mobile */ .sidebar { transform: translateX(-250px); transition: transform 0.3s ease; z-index: 1050; height: 100%; top: 0; } .sidebar.sidebar-open { transform: translateX(0); } .main-content { margin-left: 0; } .admin-hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 36px; height: 26px; position: fixed; top: 22px; right: 16px; z-index: 1100; background: none; border: none; cursor: pointer; padding: 0; } .admin-hamburger span { display: block; width: 100%; height: 3px; background: white; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } .admin-hamburger.active span:nth-child(1) { transform: translateY(11px) rotate(45deg); } .admin-hamburger.active span:nth-child(2) { opacity: 0; } .admin-hamburger.active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); } .table-wrapper { padding: var(--spacing-md); } .table-header h2 { font-size: var(--font-size-xl); } /* Inscription */ .inscription-header h1 { font-size: var(--font-size-3xl); } .inscription-header p { font-size: var(--font-size-md); } .form-step h2 { font-size: var(--font-size-3xl); } #inscriptionForm { padding: var(--spacing-xl) var(--spacing-lg); } .child-card, .school-card, .dietary-card { padding: var(--spacing-lg) var(--spacing-md); } /* Sélecteur volontairement .btn.btn-add (pas .btn-add seul) : ce bouton CTA agrandi sur mobile est celui d'inscription.php/mes-enfants.php ("+ Ajouter un enfant", classe "btn btn-add"), les deux seuls endroits du site à combiner ces deux classes. .btn-add seul (sans .btn) est la classe utilisée pour les boutons "Ajouter"/"Créer" des en-têtes admin (record_list.php, sprint_manage.php, dashboard.php) — un sélecteur trop large agrandissait aussi ces boutons sur mobile, les rendant visiblement disproportionnés à côté des boutons .btn-sm du même tableau (signalé par l'utilisateur, voir decisions.md D59 addendum). */ .btn.btn-add { padding: 16px; font-size: var(--font-size-md); } .progress-indicator { padding: 0 var(--spacing-sm); } .step-number { width: 45px; height: 45px; font-size: var(--font-size-lg); } .step-label { font-size: var(--font-size-xs); max-width: 80px; } .inscription-methods { padding: var(--spacing-2xl) var(--spacing-lg); margin: 0 var(--spacing-sm) var(--spacing-2xl); border-radius: var(--radius-xl); } .method-container { gap: var(--spacing-md); } .google-signup-btn, .manual-signup-btn { padding: 14px 20px; font-size: var(--font-size-md); gap: var(--spacing-sm); border-radius: var(--radius-lg); } .google-signup-btn svg { width: 20px; height: 20px; } .manual-signup-btn i { font-size: var(--font-size-md); } .divider { margin: var(--spacing-lg) 0; } .divider span { font-size: var(--font-size-xs); padding: 0 12px; } .login-link { font-size: var(--font-size-sm); margin: var(--spacing-lg) var(--spacing-md) 0; line-height: 1.4; } .google-registration-container { padding: var(--spacing-xl) var(--spacing-md); border-radius: var(--radius-2xl); } .google-registration-header h1 { font-size: var(--font-size-xl); } .google-profile { flex-direction: column; text-align: center; gap: var(--spacing-sm); } .google-profile-info { width: 100%; } .google-registration-buttons { flex-direction: column; gap: var(--spacing-sm); } .google-registration-buttons button { width: 100%; padding: 14px; } } /* ========================================== TRÈS PETITS MOBILES (≤ 320px) ========================================== */ @media (max-width: 320px) { .inscription-methods { padding: var(--spacing-xl) var(--spacing-md); } .google-signup-btn, .manual-signup-btn { padding: 12px 15px; font-size: var(--font-size-sm); } .google-signup-btn svg { width: 18px; height: 18px; } .google-registration-container { padding: var(--spacing-xl) var(--spacing-md); border-radius: var(--radius-xl); } .google-profile img, .google-profile-avatar { width: 40px; height: 40px; font-size: var(--font-size-lg); } } /* ========================================== MODE PAYSAGE SUR MOBILE ========================================== */ @media (max-height: 500px) and (orientation: landscape) { .inscription-methods { padding: var(--spacing-lg); margin: 0 auto var(--spacing-lg); } .google-signup-btn, .manual-signup-btn { padding: 12px 20px; } .divider { margin: var(--spacing-md) 0; } .login-link { margin-top: var(--spacing-md); } .inscription-header { margin-bottom: var(--spacing-2xl); } .inscription-header h1 { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-sm); } .inscription-header p { font-size: var(--font-size-md); } } /* ========================================== GRANDES TABLETTES (769px - 1024px) ========================================== */ @media (min-width: 769px) and (max-width: 1024px) { .inscription-methods { max-width: 550px; padding: var(--spacing-4xl) var(--spacing-3xl); } .google-signup-btn, .manual-signup-btn { padding: 18px 35px; font-size: var(--font-size-lg); } .login-link { font-size: var(--font-size-md); margin-top: var(--spacing-3xl); } } /* ========================================== ÉCRANS HAUTE RÉSOLUTION (≥ 1920px) ========================================== */ @media (min-width: 1920px) { .container { max-width: 1600px; } .inscription-methods { max-width: 600px; padding: var(--spacing-5xl) var(--spacing-4xl); } .google-signup-btn, .manual-signup-btn { padding: 20px 40px; font-size: var(--font-size-xl); border-radius: 14px; } .google-signup-btn svg { width: 26px; height: 26px; } .manual-signup-btn i { font-size: 22px; } .divider span { font-size: var(--font-size-md); padding: 0 var(--spacing-xl); } .login-link { font-size: var(--font-size-lg); margin-top: var(--spacing-3xl); } } /* ========================================== AJOUTS RESPONSIVE POUR LE SÉLECTEUR DE LANGUE À ajouter dans responsive.css ========================================== */ /* ========================================== TABLETTES PETITES (≤ 768px) — suite ========================================== */ @media (max-width: 768px) { /* Sélecteur de langue */ .language-selector { margin-left: 0; } .language-toggle { padding: 10px 12px; font-size: var(--font-size-sm); width: 100%; justify-content: center; } .language-dropdown { right: auto; left: 0; width: 100%; min-width: auto; } /* Dashboard : voir assets/css/admin_dashboard.css. */ } /* ========================================== MOBILES (≤ 480px) ========================================== */ @media (max-width: 480px) { .language-toggle { padding: 8px 10px; font-size: var(--font-size-xs); gap: 4px; } .language-toggle .flag { font-size: var(--font-size-md); } .language-option { padding: 10px 12px; gap: 8px; } .language-option .flag { font-size: var(--font-size-md); } .language-option .lang-name { font-size: var(--font-size-xs); } } /* DASHBOARD (480px) : voir assets/css/admin_dashboard.css. */