` de pied de page n'aurait rien changé aux 30 px mesurés. */
.site footer.site .cols a:not(.res) {
display: block; padding-block:8px; margin-block:-2px;
}
.site footer.site .bot a { display: inline-block; padding-block:8px; }
/* `.res` DÉSIGNE DEUX CHOSES DIFFÉRENTES. Écrite sans portée, la règle
`width: 44px; height: 44px` a touché les deux : les liens sociaux du pied
de page, qui font toute la largeur, se sont écrasés en carrés de 44 px —
icône par-dessus le texte — et la ligne de résultat du test de niveau,
qui porte la même classe pour une raison sans rapport, s'est repliée en
une colonne de 44 px qui débordait sur la section suivante.
Une cible tactile s'agrandit par sa HAUTEUR MINIMALE, jamais par une
largeur imposée : la largeur appartient à la mise en page. */
.site .ftab, .site .tvchip, .site .chip { min-height: 44px; }
.site .btn, .site .btn.gh, .site .btn.sm, .site .btn.nv, .site .hbtn {
min-height: 46px;
}
.site .topnav .tiroirbtn, .site .topnav .lg { min-height: 44px; min-width: 44px; }
.site .topnav .authbtns a { display: inline-flex; align-items: center; min-height: 44px; }
/* ── 3. LES BULLES TARIFAIRES : LE VIDE REMONTE ──────────────────────── */
/* Les six formules défilent au doigt, côte à côte, et le défilement les
met toutes à la hauteur de la plus grande. La formule « Découverte », qui
a trois avantages là où « Premium » en a huit, se retrouvait donc avec
81 px de vide MESURÉS sous son bouton — un trou au bas de la carte, qui
la fait paraître inachevée.
On ne peut pas supprimer ce vide : l'égalité des hauteurs est ce qui rend
la comparaison lisible. On le DÉPLACE. Le bouton est poussé contre le bas
de la carte ; le vide passe au-dessus de lui, où il devient une respiration
entre la liste et l'action, et les six boutons s'alignent sur une même
ligne d'un bout à l'autre du défilement. */
.site .grid4 > .card { display: flex; flex-direction: column; }
.site .grid4 > .card > .btn { margin-top:auto; }
.site .grid4 > .card > .sep { margin-top:auto; }
.site .grid4 > .card > .sep ~ .btn { margin-top:0; }
/* ── 4. LA RESPIRATION VERTICALE ─────────────────────────────────────── */
/* Le passage d'une section à l'autre coûtait jusqu'à 110 px de noir plein
sur un écran qui en fait 844. On resserre — mais sur la SECTION, pas sur
les cartes : c'est l'espace entre les blocs qui était trop grand, pas
celui à l'intérieur. Le confort de lecture vient du second. */
:root { --sect: clamp(40px, 9.5vw, 58px); }
.site .quickrow { margin-top:-20px; }
}
/* ── TABLETTE : le même plancher, un cran au-dessus ───────────────────────
Entre 641 et 1 080 px on tient l'appareil à la même distance qu'un
téléphone — c'est un écran tactile, pas un petit ordinateur. Le plancher
s'applique donc aussi, simplement moins haut : la place ne manque pas. */
@media (min-width: 641px) and (max-width: 1080px) {
.site ul.ck li, .site .pm ul li, .site .card ul li { font-size:15px; }
.site footer.site .cols a:not(.res) { font-size:15px; display: block; padding-block:8px; }
.site footer.site .cols h5 { font-size:13px; }
.site .eyebrow, .site .kick2 { font-size:12px; }
.site .roomgrp, .site .room .rt span, .site .mini2 { font-size:13px; }
.site .msg .nm { font-size:13px; }
.site .msg .tm, .site .msg .mtag { font-size:12px; }
/* `.res` DÉSIGNE DEUX CHOSES DIFFÉRENTES. Écrite sans portée, la règle
`width: 44px; height: 44px` a touché les deux : les liens sociaux du pied
de page, qui font toute la largeur, se sont écrasés en carrés de 44 px —
icône par-dessus le texte — et la ligne de résultat du test de niveau,
qui porte la même classe pour une raison sans rapport, s'est repliée en
une colonne de 44 px qui débordait sur la section suivante.
Une cible tactile s'agrandit par sa HAUTEUR MINIMALE, jamais par une
largeur imposée : la largeur appartient à la mise en page. */
}
/* ══════════════════════════════════════════════════════════════════════════
46. LE PLANCHER, DEUXIÈME PASSE — ET POURQUOI `.site.site`
La passe précédente a fait tomber le compte de 83 à 36 sur l'accueil, mais
une partie des déclarations n'a rien changé : `.site .bientot` restait à
10 px, `.site .kick2` à 10,5 px. Ce ne sont pas des règles oubliées, ce
sont des règles ÉCRASÉES — la règle d'origine était plus spécifique que la
correction, et une requête de média n'ajoute aucune spécificité.
C'est le même piège que la grille à trois colonnes qui refusait de se
replier, et que la pastille du sélecteur mensuel/annuel. Trois fois le
même. La parade adoptée ici : répéter la classe racine. `.site.site` vaut
deux classes au lieu d'une, ce qui suffit à passer devant sans recourir à
`!important` — lequel n'aurait fait que déplacer le problème d'un cran
plus loin, en rendant la règle suivante impossible à écrire.
Répéter une classe est laid. C'est aussi la seule façon honnête de dire
« ceci l'emporte » sans fermer la porte à la correction d'après.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.site.site .bientot, .site.site .kick2, .site.site .eyebrow,
.site.site .lb, .site.site .sub, .site.site .badge,
.site.site .tcard .foot span, .site.site .kpicard .sub,
.site.site .nslot, .site.site .rn2, .site.site .rv, .site.site .acc,
.site.site .clubkpi span, .site.site .chit span, .site.site .roomgrp,
.site.site .room .rt span, .site.site .mini2,
.site.site .cal .dn, .site.site .cal .slot, .site.site .cal .slot span,
.site.site .st, .site.site table.tb th, .site.site table.inv th,
.site.site .ladder .st3 span, .site.site .ladder .res b,
.site.site .tvhero .meta span, .site.site .tvhero .tag,
.site.site .tvfoot span { font-size:13px; }
.site.site .msg .tm, .site.site .msg .mtag { font-size:12px; }
.site.site .msg .nm { font-size:14px; }
/* LES AFFICHES DE TFA TV GROSSISSENT PLUTÔT QUE LEURS ÉTIQUETTES.
La durée et la mention « Premium » sont posées SUR l'affiche : les
grossir seules les ferait manger la vignette. On élargit donc l'affiche
— de 39 à 45 % de la largeur d'écran, soit deux et quart visibles au lieu
de deux et demie — et les étiquettes suivent en proportion. On perd un
quart d'affiche de vue d'ensemble, on gagne une image lisible. */
.site.site .tvcard { flex: 0 0 45vw; }
.site.site .prem { font-size:10px; padding:4px 8px; letter-spacing: .1em; }
.site.site .tvcard .thumb .lk2,
.site.site .tvcard .thumb .dur { font-size:12px; padding:4px 8px; }
.site.site .tvchip { font-size:14px; }
/* LE BOUTON CONTRE LE BAS DE LA CARTE.
`margin-top: auto` était bien écrit mais perdait contre une règle plus
spécifique — d'où les 76 px de vide qui subsistaient sous le bouton.
`:last-child` ajoute le poids qui manquait. */
.site.site .grid4 > .card { display: flex; flex-direction: column; }
.site.site .grid4 > .card > .btn:last-child { margin-top:auto; }
/* LE TABLEAU DÉFILE, IL NE DÉBORDE PAS.
Mesuré : 504 px de contenu dans une carte de 338. Un tableau de cinq
colonnes ne se replie pas — le rapport entre les colonnes EST
l'information. On le fait donc défiler horizontalement dans sa carte,
comme les rangées d'affiches, plutôt que de le laisser pousser la page
entière de 159 px vers la droite. */
.site.site .card > table.tb,
.site.site .card > table.inv { display: block; overflow-x: auto; }
.site.site table.tb, .site.site table.inv { min-width: 100%; }
}
/* ══════════════════════════════════════════════════════════════════════════
47. LE STYLE EN LIGNE QUI GAGNAIT TOUJOURS
Trois tentatives pour pousser le bouton d'une carte tarifaire contre son
bas — `margin-top: auto`, puis la même chose plus spécifique, puis encore
plus spécifique avec `:last-child`. Aucune n'a rien changé. Le vide sous le
bouton restait mesuré à 97 px.
La cause n'était dans aucune feuille de style : chaque bouton portait
`style="width:100%;text-align:center;margin-top:15px"` dans le balisage.
Un attribut `style` bat TOUTE règle de sélecteur, quelle qu'en soit la
spécificité — il n'est pas en haut de l'échelle, il est à côté. Aucune
surenchère de classes ne pouvait aboutir, et j'ai perdu deux passes à
monter une échelle qui ne menait nulle part.
Il restait `!important`, qui aurait marché. Ç'aurait été soigner le
symptôme : neuf boutons, trois propriétés purement présentationnelles
écrites dans le contenu, qu'aucune règle ne pourra jamais adapter à un
appareil. Ils portent maintenant une classe, et la règle vit ici.
LEÇON — quand une règle CSS « ne prend pas » malgré une spécificité
croissante, vérifier l'attribut `style` du balisage AVANT d'ajouter un
sélecteur de plus. Le symptôme d'une règle écrasée par une autre règle et
celui d'une règle écrasée par un style en ligne sont identiques ; le second
ne se corrige jamais depuis la feuille de style.
══════════════════════════════════════════════════════════════════════════ */
.site .cardcta { width: 100%; text-align: center; margin-top:16px; }
@media (max-width: 640px) {
/* le bouton descend au bas de la carte, le vide passe au-dessus de lui */
.site .grid4 > .card > .cardcta:last-child { margin-top:auto; }
}
/* ══════════════════════════════════════════════════════════════════════════
48. LE RESTE, ET LE MÊME PLANCHER SUR TABLETTE
Les trente dernières mentions sous 13 px, une par une : compteurs, libellés
de champ, âges, notes de bas de carte, horodatages du Club. Elles sont
nommées ici plutôt que rattrapées par une règle générale — parce qu'une
règle générale du type `font-size: max(13px, 1em)` posée sur tous les
éléments de texte écraserait aussi les titres, dont la taille propre est
supérieure à celle de leur parent. Le remède serait pire.
══ ET LA TABLETTE ══
Mesuré à 820 px : de 15 à 49 mentions sous 13 px par page, contre 1 à 13
sur téléphone. Le palier tablette n'avait reçu qu'une poignée de règles.
C'est une incohérence de raisonnement : une tablette se tient à la même
distance qu'un téléphone et se touche du même doigt. Le plancher de
lisibilité et le seuil de 44 px valent donc jusqu'à 1 080 px, sans
exception — c'est le NOMBRE DE COLONNES qui distingue les deux appareils,
pas la taille du texte.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
.site.site .lg b,
.site.site .row > div > span, .site.site .ag, .site.site .incl b,
.site.site .nat p, .site.site .billbadge, .site.site .rgpd b,
.site.site .acbadge, .site.site .acnote, .site.site .accessbar .txt span,
.site.site .roomhead b, .site.site .roomsearch,
.site.site .livebar b, .site.site .livebar span, .site.site .join,
.site.site .fixit b, .site.site .fixit s, .site.site .fld2,
.site.site .enonly b, .site.site .gain, .site.site .counter b,
.site.site .report p, .site.site .rline span,
.site.site .alab, .site.site .asep span, .site.site .aoubli a,
.site.site .authcote .sur, .site.site .vl small,
.site.site .lock, .site.site .day .slot span, .site.site .cal .slot span,
.site.site .ladder > div, .site.site .grid2 > div > div { font-size:13px; }
/* les mêmes rôles que sur téléphone : la tablette n'est pas un petit
ordinateur, c'est un grand téléphone */
.site.site ul.ck li, .site.site .pm ul li, .site.site .card ul li,
.site.site .rlist li { font-size:15px; line-height: 1.5; }
.site.site .eyebrow, .site.site .kick2, .site.site .bientot,
.site.site .badge, .site.site .lb, .site.site .sub, .site.site .st,
.site.site .nslot, .site.site .rn2, .site.site .rv, .site.site .acc,
.site.site .clubkpi span, .site.site .chit span, .site.site .roomgrp,
.site.site .room .rt span, .site.site .mini2, .site.site .tvchip,
.site.site table.tb th, .site.site table.inv th,
.site.site .ladder .st3 span, .site.site .ladder .res b,
.site.site .tcard .foot span, .site.site .kpicard .sub,
.site.site .tvhero .meta span, .site.site .tvfoot span { font-size:13px; }
.site.site footer.site .cols h5 { font-size:13px; letter-spacing: .1em; }
/* LE PIED DE PAGE ATTEINT ENFIN 44 PX.
Le rembourrage posé à la passe précédente perdait lui aussi contre une
règle plus spécifique : mesuré à 34 px au lieu des 46 attendus. Il fallait
le même poids de sélecteur que le reste de cette section. */
.site.site footer.site .cols a:not(.res) {
display: block; font-size:15px; padding-block:12px; margin-block:-4px;
}
.site.site footer.site .bot a { display: inline-block; padding-block:12px; }
/* le calendrier des créneaux : 37 mentions sous 13 px à lui seul sur
tablette, dont les heures elles-mêmes à 9 px */
.site.site .cal .dn, .site.site .cal .slot,
.site.site .day .dn, .site.site .day .slot { font-size:13px; }
.site.site .msg .bb, .site.site .msg b, .site.site .room b,
.site.site .thread b { font-size:14px; }
.site.site footer.site .cols p, .site.site footer.site .bot a,
.site.site footer.site .bot span, .site.site footer.site .bot em { font-size:14px; }
/* le bouton au bas de la carte vaut aussi sur tablette : c'est le même
défilement horizontal, donc les mêmes hauteurs égalisées */
.site.site .grid4 > .card { display: flex; flex-direction: column; }
.site.site .grid4 > .card > .cardcta:last-child { margin-top:auto; }
}
/* ══════════════════════════════════════════════════════════════════════════
49. LE PLUS PETIT ÉCRAN REPREND SES DROITS
Le plancher de lisibilité de la section 45 a porté « Se connecter » et
« S'inscrire » de 12 à 13,5 px, et leur a donné 44 px de haut. Bon pour le
doigt, et l'audit l'a immédiatement sanctionné : 20 px de débordement
horizontal sur les DIX-SEPT pages, à 320 px de large. La barre du haut ne
rentrait plus.
C'est le compromis inévitable d'une barre fixe : chaque pixel donné à un
élément est pris à un autre. À 320 px il n'y a plus de marge à distribuer.
On rend donc le pixel typographique — les deux libellés redescendent — mais
PAS la hauteur de 44 px, qui ne coûte rien en largeur. Le doigt garde sa
cible, l'œil perd un demi-point sur deux mots qu'il n'a pas besoin de lire.
320 px n'est pas un cas d'école : c'est un iPhone SE, et c'est aussi tout
téléphone récent dont l'utilisateur a agrandi la police du système.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
.site.site .topnav .authbtns a { font-size:12px; }
.site.site .topnav .authbtns .sgup,
.site.site .topnav .authbtns .lgin { padding-inline:8px; }
.site.site .topnav .rt { gap:8px; }
}
/* ══════════════════════════════════════════════════════════════════════════
50. LA RANGÉE D'ONGLETS SUR TÉLÉPHONE : PLUS DE CADRE, DONC PLUS DE CADRE
COUPÉ
Les quatre catégories de la collection tiennent sur 527 px. Un téléphone en
offre 350. La rangée défile donc — c'est le bon comportement — mais elle
porte un CADRE en pilule, bordure et fond compris, et ce cadre est coupé
net par le bord de l'écran. On ne lit pas « il y a la suite à droite », on
lit « ce bloc est cassé ». Les deux personnes qui l'ont signalé l'ont
entouré au feutre rouge, sur téléphone comme sur ordinateur.
Le cadre est la promesse d'un contenant fermé. Dès que le contenu le
dépasse, la promesse est fausse, et il vaut mieux la retirer que la tenir à
moitié. Sur téléphone la rangée devient donc une simple file d'onglets qui
glisse, sans boîte autour — la pastille active suffit à dire où l'on est —
et un dégradé sur le bord droit dit qu'il y a la suite.
Le masque est posé sur le CONTENEUR EXTÉRIEUR et non sur la rangée qui
défile : appliqué à la rangée, il aurait défilé avec elle et se serait
promené au milieu des onglets.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.site.site #famtabs {
background: none; border-color: transparent; box-shadow: none;
padding-inline:0;
display: flex; max-width: 100%;
scroll-padding-inline:0;
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
}
/* la pastille garde son fond : c'est elle qui porte maintenant la forme */
.site.site #famtabs .ftpuce { box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .5); }
.site.site #famtabs::-webkit-scrollbar { display: none; }
}
/* ══════════════════════════════════════════════════════════════════════════
51. CODER POUR LA STRUCTURE, STYLER POUR L'ŒIL
Six pages n'avaient AUCUN h1 : leur titre visuel était un h2 ou un h3,
choisi pour sa taille. Visuellement rien à redire — mais pour un moteur de
recherche et un lecteur d'écran, ces pages n'avaient pas de titre. La
hiérarchie du document et la hiérarchie visuelle sont deux choses
différentes : on promeut la balise, on garde la classe, et l'écran ne
change pas d'un pixel.
La page des cours n'a pas de titre à l'écran — elle ouvre sur la carte du
professeur, et c'est un choix de mise en page qu'on ne casse pas. Elle
reçoit un h1 masqué à la manière des lecteurs d'écran : présent dans le
document, absent du rendu. Ce n'est pas du texte caché pour tricher, c'est
l'étiquette de la page.
Et l'interligne des h4 de 17-18 px passait de 1,06 — un réglage de grand
titre — à des titres qui se replient sur deux lignes en mobile. 1,25 les
laisse serrés sans les coller. */
.site .sr-seul {
position: absolute; width: 1px; height: 1px; margin:-2px;
padding:0; border: 0; clip-path: inset(50%); overflow: hidden;
white-space: nowrap;
}
.site .mrow h4, .site .pm h4, .site .kcard h4 { line-height: 1.25; }
/* ── la vignette de couverture rejoint le langage des autres surfaces ──
Toutes les images posées sur une carte ont un rayon et une ombre ; celle-ci
n'en avait pas. Un rayon plus petit que celui de sa carte : un coin
intérieur est toujours plus serré que le coin qui l'entoure. */
.site .mc-img { border-radius: 10px; box-shadow: var(--sh2); }
/* ── le rang du copyright se replie au lieu de déborder ──
Cinq éléments en ligne (© · CGV · Mentions · Confidentialité · signature)
ne tiennent pas en 320 px depuis que le plancher de lisibilité a monté leur
taille de 11,5 à 13,5 px. L'audit l'a mesuré : 8 px coupés par
l'overflow:hidden du pied de page. Un rang d'étiquettes se replie. */
@media (max-width: 400px) {
.site.site footer.site .bot { flex-wrap: wrap; row-gap:0; }
}
/* ══════════════════════════════════════════════════════════════════════════
52. LES FONCTIONNALITÉS — test de niveau, formulaires, lecteur TV
Trois interfaces nouvelles, un seul langage : celui des panneaux existants.
Rayon, ombre à deux couches, rembourrage et échelle d'atténuation viennent
des jetons — rien n'est inventé ici, tout est réutilisé.
══════════════════════════════════════════════════════════════════════════ */
/* ── le test de niveau ── */
.site #test-niveau h3 { margin:8px 0 8px; }
.site .tn-actions { display: flex; gap:12px; flex-wrap: wrap; margin-top:12px; }
.site .tn-comment { margin-top:12px; }
.site .tn-comment p { font-size:15px; color: var(--soft); margin:0; }
.site .tn-q { font-size: clamp(19px, 2vw, 24px); margin:8px 0 16px; }
.site .tn-choix { display: flex; flex-direction: column; gap:12px; max-width: 560px; }
.site .tn-opt {
font: inherit; text-align: left; cursor: pointer;
background: var(--surf2, rgba(255,255,255,.06));
color: var(--ink); border: 1px solid var(--brd);
border-radius: 12px; padding:12px 16px;
transition: border-color var(--t-etat) var(--e), transform var(--t-etat) var(--e);
}
.site .tn-opt:hover:not(:disabled) { border-color: var(--crimson); transform: translateX(3px); }
.site .tn-opt.juste { border-color: var(--green); color: var(--green); font-weight: 700; }
.site .tn-opt.faux { border-color: var(--crimson); color: var(--crimson); }
.site .tn-opt:disabled { cursor: default; opacity: .85; }
.site .tn-explique { margin-top:12px; }
.site .tn-explique p { font-size:15px; margin:0 0 12px; }
.site .tn-niveau { font-style: normal; color: var(--crimson); }
.site .tn-note { font-size:14px; color: var(--soft2); margin:12px 0 0; }
/* ── la fenêtre de formulaire (réservation, licence, contact) ──
z-index AU-DESSUS de la barre collante (200) et du menu (300) : sinon le
haut de la fenêtre, et son bouton de fermeture, passent SOUS la barre du
haut. On aligne la fenêtre en haut (pas au centre) avec une marge propre,
pour qu'elle ne soit jamais rognée par la barre même quand elle est haute. */
.fvoile {
position: fixed; inset: 0; z-index: 500;
background: rgba(5, 9, 15, .62); backdrop-filter: blur(3px);
display: flex; align-items: flex-start; justify-content: center;
padding:max(24px, 5vh) 20px 24px; overflow-y: auto;
}
.fmodale {
background: var(--surf, #182130); color: var(--ink);
border: 1px solid var(--brd); border-radius: 22px;
box-shadow: 0 30px 80px -24px rgba(5,9,15,.7);
padding:30px 34px 32px; width: min(600px, 100%);
margin: auto;
position: relative;
}
body:not(.dark) .fmodale { background: #fff; }
/* l'en-tête de marque : le logo complet, un fichier par thème */
.fmarque { display:flex; justify-content:center; margin:6px 0 18px; }
.fmarque img { height:138px; width:auto; display:block; }
.fmarque .fls { display:none; }
body.dark .fmarque .flc { display:none; }
body.dark .fmarque .fls { display:block; }
.fmodale h3 { margin:0 0 4px; font-size:23px; font-weight:900; text-align:center;
letter-spacing:-.01em; }
.fmodale .fctx {
display: block; width: fit-content; margin:6px auto 2px;
font-size:12.5px; font-weight: 700; letter-spacing: .04em;
color: var(--crimson);
background: color-mix(in srgb, var(--crimson) 12%, transparent);
border-radius: 999px; padding:4px 14px;
}
.fmodale .ftxt { font-size:14.5px; color: var(--soft); margin:6px auto 20px;
text-align:center; max-width:44ch; line-height:1.55; }
/* nom + e-mail côte à côte : la fenêtre est large, on l'exploite et on
raccourcit d'autant la hauteur (moins de défilement, croix toujours visible) */
.frang { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.fmodale label { display: block; font-size:13px; font-weight: 700; margin:0 0 14px;
color:var(--soft); }
.fmodale label small { font-weight: 400; color: var(--soft2); }
.fmodale input, .fmodale textarea {
display: block; width: 100%; margin-top:5px;
font: inherit; font-size:15px; color: var(--ink);
background: var(--paper); border: 1px solid var(--brd);
border-radius: 11px; padding:12px 13px;
}
.fmodale textarea { resize: vertical; min-height: 84px; }
.fmodale input:focus, .fmodale textarea:focus {
outline: 2px solid var(--crimson); outline-offset: 1px; border-color: transparent;
}
.fmodale .fenvoi { width: 100%; justify-content: center; margin-top:6px;
padding:13px 0; font-size:15px; font-weight:700;
box-shadow:0 8px 22px -10px rgba(192,9,58,.55); }
.fmodale .fnote {
font-size:14px; color: var(--crimson);
margin:0 0 14px; padding:9px 13px;
background: color-mix(in srgb, var(--crimson) 10%, transparent);
border-radius: 11px;
}
.fmodale .fnote.ok { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
/* le bouton de fermeture : rond, discret, franchement rouge au survol */
.ffermer {
position: absolute; top: 16px; right: 16px;
width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center; padding:0; line-height:0;
cursor: pointer;
background: color-mix(in srgb, var(--ink) 6%, transparent);
color: var(--soft); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
transition: background-color var(--t-etat) var(--e), color var(--t-etat) var(--e),
border-color var(--t-etat) var(--e), transform var(--t-etat) var(--e);
}
.ffermer svg { width:16px; height:16px; display:block; }
.ffermer:hover { background: var(--crimson); color:#fff; border-color:var(--crimson);
transform: rotate(90deg) scale(1.05); }
.ffermer:active { transform: rotate(90deg) scale(.95); }
@media (max-width:520px){
.frang { grid-template-columns:1fr; }
.fmarque img { height:112px; }
.fmodale h3 { font-size:20px; }
}
/* ── le lecteur TFA TV ── */
.tvlecteur {
position: fixed; inset: 0; z-index: 60;
background: rgba(3, 6, 10, .88);
display: flex; align-items: center; justify-content: center;
padding:16px;
}
.tvl-cadre {
width: min(420px, 92vw); aspect-ratio: 9 / 16;
max-height: 88vh; border-radius: 16px; overflow: hidden;
background: #000; box-shadow: var(--sh2);
}
.tvl-cadre iframe, .tvl-cadre video { width: 100%; height: 100%; border: 0; display: block; }
.tvl-charge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
text-align: center; padding: 24px; color: #fff; background: rgba(8,12,22,.72);
font-weight: 600; font-size: 15px; line-height: 1.5; }
.tvl-charge.err { background: rgba(8,12,22,.9); color: #FFD7D7; }
/* ── Salle de cours en direct (RealtimeKit) ── */
.rtk-plein { position: fixed; inset: 0; z-index: 9999; background: #0A0E17; display: flex; }
.rtk-plein rtk-meeting { flex: 1; width: 100%; height: 100%; }
.rtk-fermer { position: absolute; top: 14px; right: 14px; z-index: 2; width: 42px; height: 42px;
border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 20px;
cursor: pointer; line-height: 42px; }
.rtk-fermer:hover { background: rgba(255,255,255,.24); }
.rtk-charge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
text-align: center; padding: 24px; color: #fff; font-weight: 600; font-size: 15px; line-height: 1.5; }
.rtk-charge.err { color: #FFD7D7; }
.rtk-marque { position: absolute; top: 14px; left: 16px; z-index: 4; pointer-events: none; opacity: .9; }
.rtk-marque img { height: 30px; width: auto; display: block; filter: drop-shadow(0 1px 5px rgba(0,0,0,.55)); }
.tvl-fiche {
background: var(--surf, #182130); color: var(--ink);
border: 1px solid var(--brd); border-radius: 18px; box-shadow: var(--sh2);
padding:24px 24px; width: min(430px, 100%);
}
.tvl-fiche h3 { margin:8px 0 8px; font-size:21px; }
.tvl-fiche p { font-size:15px; color: var(--soft); margin:0 0 12px; }
.tvl-note { font-size:14px; color: var(--soft2); }
.tvl-fermer {
position: fixed; top: 18px; right: 18px; z-index: 61;
width: 40px; height: 40px; border-radius: 50%;
font: inherit; font-size:16px; cursor: pointer;
background: rgba(255,255,255,.12); color: #fff; border: 0;
}
@media (max-width: 640px) {
.fmodale, .tvl-fiche { padding:20px 16px; }
}
/* ══════════════════════════════════════════════════════════════════════════
53. LA RANGÉE DES TARIFS SE COMPTE TOUTE SEULE
Cinq colonnes en dur dans la feuille, six imposées par un attribut
`style` sur la page, deux réclamées par la feuille mobile sous 1000 px et
jamais obtenues : trois avis contradictoires pour une seule rangée. Le
plus fort gagnait — l'attribut — et la sixième carte se faisait couper à
1024 px.
`auto-fit` + `minmax` remplace les trois : on déclare la largeur MINIMALE
qu'une formule doit avoir pour rester lisible, et le navigateur en met
autant que la place le permet. Six sur un grand écran, cinq à 1024 px,
quatre sur tablette, deux sur téléphone — sans une seule requête média,
et sans qu'on ait à connaître le nombre de formules à l'avance. Le jour
où Yann en ajoutera une septième, il n'y aura rien à changer ici.
══════════════════════════════════════════════════════════════════════════ */
.site .pricemini {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap:12px;
}
/* ══ SIX FORMULES NE SE RANGENT BIEN QU'EN 1, 2, 3 OU 6 COLONNES ══
`auto-fit` seul remplit la place au mieux, et donnait donc 5 + 1 à
1024 px et 4 + 2 à 900 px : une carte seule au bout d'une rangée, alors
que la page invite justement à COMPARER les formules. Une rangée
orpheline casse la comparaison.
Deux seuils suffisent à ne garder que des diviseurs de six — et ce sont
les deux mêmes que le reste du site emploiera : la tablette et
l'ordinateur. Sous 520 px, `auto-fit` reprend la main : une colonne sur
un petit téléphone, deux dès qu'il y a la place. */
@media (min-width: 521px) { .site .pricemini { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1141px) { .site .pricemini { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* ══════════════════════════════════════════════════════════════════════════
54. UNE SEULE HAUTEUR DE CIBLE TACTILE
Elle était déclarée quatre fois, dans quatre contextes différents, avec
quatre valeurs : 40 px sur tout écran sans souris, 36 px pour les
étiquettes, 44 px sur tablette, 46 px sur téléphone. Ce n'était pas une
progression réfléchie — un doigt ne rétrécit pas quand l'écran grandit.
C'était quatre décisions prises à quatre moments, dont seule la dernière
arrivait à l'écran sur téléphone, et dont la PREMIÈRE — 40 px, sous le
seuil recommandé — restait la règle effective sur les portables tactiles
et les grandes tablettes, c'est-à-dire exactement là où personne n'était
allé vérifier.
Une valeur, une règle, un endroit. 46 px partout où il n'y a pas de
souris. Sur ordinateur, le remplissage donne déjà 45 px : le plancher ne
change donc rien à ce qui existe, il empêche seulement de descendre
au-dessous sans s'en rendre compte.
══════════════════════════════════════════════════════════════════════════ */
@media (hover: none) {
.site.site .btn, .site.site .hbtn, .site.site .tvbtn, .site.site button {
min-height: 46px; display: inline-flex; align-items: center; justify-content: center;
}
.site.site .tvchip, .site.site .ftab, .site.site .chip, .site.site .audsw a {
min-height: 44px; display: inline-flex; align-items: center;
}
}
/* ── le bouton « grand » redevenait un bouton normal sous 400 px ──
`padding:12px 20px; font-size:15px` : exactement les valeurs du bouton de
base. L'appel à l'action principal d'une page perdait donc toute
hiérarchie sur les téléphones les plus étroits — l'endroit où il compte le
plus. Il reste plus petit qu'au bureau, parce que la place manque, mais il
reste plus grand que les autres. */
@media (max-width: 400px) {
.site .btn.lg { padding:14px 24px; font-size:16px; }
}
/* ══════════════════════════════════════════════════════════════════════════
55. LES COMPLÉMENTS D'ABONNEMENT SONT DEVENUS DE VRAIS LIENS
Les trois lignes « Une heure en plus · TFA Kids · Le manuel suivant »
étaient des `` avec une flèche → et rien derrière : elles avaient
toute l'apparence d'un lien et aucun comportement. On clique, il ne se
passe rien, et l'on ne sait pas si c'est cassé ou si c'est normal.
Ce sont maintenant des `
` vers les pages qui existent déjà. Le style
ne change pas d'un pixel — seule la couleur héritée du lien devait être
neutralisée, et le curseur devient enfin celui d'un lien.
══════════════════════════════════════════════════════════════════════════ */
.site a.ritem {
color: inherit;
text-decoration: none;
}
.site a.ritem:hover .ar { color: var(--crimson); }
.site a.ritem .ar { transition: transform var(--t-etat) var(--e), color var(--t-etat) var(--e); }
.site a.ritem:hover .ar { transform: translateX(3px); }
/* la ligne « aucun abonnement » : le montant à 0 € ne doit pas crier */
.site .member .row > div > b { font-variant-numeric: tabular-nums; }
/* Le reçu PDF est un vrai lien maintenant qu'il en existe : sans cette
règle il s'affichait en bleu souligné du navigateur, au milieu d'un
tableau qui n'a pas une seule autre couleur. */
.site .inv a {
color: var(--crimson); text-decoration: none; font-weight: 700;
white-space: nowrap;
}
.site .inv a:hover { text-decoration: underline; }
body.dark .site .inv a { color: #FF8FAB; }
/* ══════════════════════════════════════════════════════════════════════════
56. S'ENTRAÎNER — LES DÉCLENCHEURS DEVENUS RÉELS
Les « 10 questions / Série de 20 / 40 questions » étaient des ;
ce sont des