/* ============================================================ ProLodges — corrections de rendu mobile POURQUOI UNE FEUILLE À PART Le site est multi-pages avec son style écrit dans chaque page. Poser ces corrections page par page garantissait d'en oublier une, puis de les voir diverger. Une seule feuille, liée partout, est l'endroit où ces règles peuvent rester vraies ensemble — et le banc d'essai test/suites/mobile.js vérifie à chaque passage qu'elles tiennent sur les 29 pages, à 320, 390 et 768 px. ELLE NE CHANGE RIEN SUR GRAND ÉCRAN. Tout ce qui suit est sous une requête de média : la mise en page de bureau, qui convient, n'est pas touchée. ============================================================ */ /* ============================================================ 1. LE ZOOM AUTOMATIQUE DE SAFARI SUR iPHONE Safari iOS zoome sur tout champ dont le texte fait MOINS DE 16 px. La page saute, se recadre, et il faut pincer pour revenir en arrière. Les champs du site étaient à 14,4 px : sur le formulaire de création d'annonce, qui compte sept étapes, cela faisait sept sauts. Ce n'est pas un réglage de confort : c'est le seul moyen d'empêcher ce comportement, qui ne se désactive pas autrement — et surtout pas avec « user-scalable=no », qui empêcherait aussi le zoom VOLONTAIRE et rendrait le site inutilisable à qui voit mal. ============================================================ */ /* POURQUOI « !important » ICI, ET NULLE PART AILLEURS Le style de chaque page cible ses champs par une classe (« .sfield input », « .news-f input »), ce qui l'emporte sur un sélecteur simple. Sans cette marque, la règle ci-dessous serait battue sur la moitié des pages — et l'alternative serait de modifier à la main le style de 29 pages, puis de recommencer à chaque nouvelle. Une feuille de correction dont le rôle est précisément de passer devant est l'un des rares endroits où cette marque est l'outil juste plutôt qu'un aveu. Le banc d'essai vérifie le résultat, pas l'intention. Seuls les champs de SAISIE sont visés : une case à cocher, un bouton radio, un sélecteur de plage ou un champ de fichier ne déclenchent aucun zoom. */ @media (max-width: 820px) { input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], input:not([type]), select, textarea { font-size: 16px !important; } } /* ============================================================ 2. LE TEXTE TROP PETIT Le banc d'essai a relevé 60 familles d'éléments sous 12 px, jusqu'à 9 px dans la navigation des tableaux de bord. Sous 12 px, un texte n'est plus lu : il est deviné ou ignoré — y compris quand il porte un prix, un statut ou une mention légale. CETTE LISTE N'EST PAS TENUE À LA MAIN. Elle vient de la mesure, et c'est le banc qui la garde complète : le jour où une page introduit une étiquette à 10 px, la vérification échoue et la classe s'ajoute ici. Une liste qu'on complète de mémoire se périme en trois semaines. LA NAVIGATION DES TABLEAUX DE BORD EST TRAITÉE À PART, et sur TOUTES les largeurs : à 9 px, ce n'est plus un parti pris graphique, c'est illisible, et un écran de travail se consulte tous les jours. ============================================================ */ .nav-brand-role, .nav-logo-role, .nav-plan-lbl, .nav-plan-up, .nav-sec, .nav-section, .nav-urole, .nav-version { font-size: 12px; letter-spacing: .02em; } @media (max-width: 820px) { .btn, .card-link, .cat, .chart-bar-tip, .cm, .db-exit, .dux-sms-head, .dux-sms-time, .eyebrow, .fbadge, .fh, .field-hint, .flag, .fs-title, .fsep, .go, .hero-stat-label, .hint, .hub-section-label, .k, .kpi-delta, .kpi-lbl, .l, .lab, .lbl, .occ-lbl, .p-chip, .pc-sub, .photo-slot-label, .plan-badge, .pricing-eyebrow, .prof-badge, .pw-strength-label, .rc-desc, .roi-tkl, .role-desc, .score-row-city, .score-row-fill, .section-eyebrow, .section-number, .sidebar-label, .sidebar-legal-group-label, .stat-label, .step-badge, .step-label, .step-t, .sticky-ring-num, .sub, .tag, .tlbl, .upload-sub, .verdict-sub { /* Même raison que pour les champs de saisie : la plupart de ces classes sont ciblées dans leur page par un sélecteur plus spécifique (« .hero .eyebrow »), qui l'emporterait sinon. */ font-size: 12px !important; } /* Les titres de rubrique du pied de page et les petits tableaux : ils ne portent pas de classe, on les atteint par leur contexte. */ footer .fc h5, footer h5 { font-size: 12px !important; } table th, table td { font-size: 12px !important; } /* Les trois derniers passages sous 10 px, trouvés un par un : ils n'ont ni classe ni sélecteur partagé, et c'est pour cela qu'ils avaient échappé à la liste. 9,6 px pour « (opt.) » à côté d'un titre d'étape, 9,9 px pour la légende du calendrier du professionnel — soit « Réservé » et « Aujourd'hui », qui disent précisément ce qu'on vient y lire. */ .step-label span { font-size: 11px !important; } #pl-cal-pro div, #pl-cal-pro-maquette div { font-size: 11px; } } /* Au-dessus de 10 px mais en dessous de 12, il reste une queue de petites étiquettes décoratives — chapeaux de section, pastilles, mentions. C'est un parti pris graphique assumé, lisible en capitales espacées, et le remonter davantage changerait l'allure du site sans gain clair. Le banc continue de les compter : si vous voulez aller plus loin, la liste est prête. */ /* ============================================================ 3. LE PIED DE PAGE EN CARROUSEL (choix du 04/10/2026) Treize liens empilés à 16–22 px de haut : c'était, sur presque toutes les pages, la plus grosse réserve de cibles tactiles trop petites. Les trois rubriques défilent désormais horizontalement, chacune pleine largeur, avec des liens à 44 px. SUR GRAND ÉCRAN, RIEN NE CHANGE. Le conteneur injecté passe en « display:contents » : ses colonnes redeviennent les enfants directs de la grille, qui retrouve ses quatre colonnes d'origine. C'est ce qui permet d'envelopper le balisage sans le modifier, et de revenir en arrière au simple redimensionnement de la fenêtre. ============================================================ */ /* Au-dessus du seuil mobile, le carrousel n'existe pas. */ .plf-piste { display: contents; } .plf-nav { display: none; } @media (max-width: 820px) { .plf-piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; /* Sans cela, un balayage un peu vertical fait défiler la page au lieu de la piste, et l'on croit le carrousel bloqué. */ overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; margin-top: 18px; } .plf-piste::-webkit-scrollbar { display: none; } .plf-vol { flex: 0 0 100%; scroll-snap-align: start; padding-right: 4px; } /* Chaque lien devient une vraie cible : 44 px, c'est la surface d'un doigt. */ .plf-vol a { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; border-bottom: 1px solid rgba(232, 224, 212, .6); } .plf-vol a:last-child { border-bottom: 0; } .plf-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 10px; } .plf-fl { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line, #E8E0D4); background: #fff; color: var(--navy, #2F4558); font-size: 1.15rem; line-height: 1; cursor: pointer; } .plf-fl:disabled { opacity: .35; cursor: default; } /* LES PASTILLES PORTENT LE NOM DE LA RUBRIQUE, pas un point anonyme : c'est ce qui évite d'avoir à deviner dans quelle colonne se trouve ce qu'on cherche — et de ne pas voir qu'une rubrique « Légal » existe. */ /* SUR UNE SEULE LIGNE, toujours. En les laissant passer à la ligne, la rangée grandissait et les deux flèches se décalaient verticalement d'un appui à l'autre — on visait alors un bouton qui venait de bouger. */ .plf-points { display: flex; gap: .15rem; flex: 1 1 auto; min-width: 0; justify-content: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .plf-points::-webkit-scrollbar { display: none; } .plf-pt { min-height: 44px; flex: 0 0 auto; padding: 0 .45rem; border: 0; background: none; color: var(--grey, #545E69); font: 700 .74rem/1 inherit; white-space: nowrap; cursor: pointer; border-bottom: 2px solid transparent; } .plf-pt.on { color: var(--navy, #2F4558); border-bottom-color: var(--gold, #8C6A1F); } } /* ════════════════════════════════════════════════════════════ LES VIGNETTES D'ANNONCE EN MOBILE (09/10/2026 — mesuré par test/outils/mesure-vignettes.mjs) CE QUI SE PASSAIT, EN CHIFFRES À 320 px, la carte mesure 241 × 275 px. Son bloc de texte en mesurait 303 : il DÉBORDAIT DE 27 PX PAR LE HAUT et le titre traversait le cœur sur 74 % de sa surface. « Espace esthétique lumineux NIMES Jean jaurès » se lisait par-dessus le bouton favori, et le bouton favori par-dessus le titre — on ne pouvait plus lire ni cliquer proprement. LA CAUSE N'EST PAS LE TITRE, C'EST LA GÉOMÉTRIE .card impose aspect-ratio:1/1.14, donc une hauteur fixe. .card-b est posé en absolu sur le bas, SANS AUCUNE BORNE : il grandit vers le haut autant que son contenu l'exige. Sur un grand écran la carte est large, le titre tient sur une ligne, personne ne voit rien. Sur 241 px il passe à trois lignes, et les deux éléments se rencontrent. Ce n'est donc pas un défaut d'une annonce en particulier : c'est une collision qui attendait un titre assez long. Elle serait revenue au prochain hôte bavard. TROIS RÈGLES, ET LA TROISIÈME EST LA SEULE GARANTIE 1. la carte respire : 1/1.32 au lieu de 1/1.14 ; 2. le texte tient : titre plus petit, borné à deux lignes, marges resserrées — le contenu réel occupe alors ~162 px sur 228 ; 3. ET SURTOUT, le bloc ne peut PLUS atteindre la bande du cœur : max-height:calc(100% - 58px). Les deux premières règles font que la troisième ne se déclenche jamais avec les annonces d'aujourd'hui ; la troisième fait que la collision est impossible, quoi qu'écrive un hôte demain. Une mise en page qui tient par chance n'est pas une mise en page qui tient. LES FLÈCHES DU CARROUSEL DISPARAISSENT, ET C'EST UN GAIN .c-nav est en opacity:0 et ne se révèle qu'au :hover. Sur un écran tactile il n'y a pas de survol : les flèches surgissaient au moment où l'on TOUCHE la carte pour l'ouvrir, par-dessus les pastilles (jusqu'à 43 % de recouvrement mesuré). Un contrôle qui n'apparaît qu'au moment où l'on fait autre chose n'est pas un contrôle. Le défilement des photos se fait au doigt ; les points, eux, deviennent permanents et montent dans la bande réservée en haut, où plus rien ne peut les recouvrir. ════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { .card { aspect-ratio: 1/1.32; } .card-b { padding: 16px; /* La bande des 58 px du haut appartient au cœur (12 px de marge + 38 px de bouton + 8 px de garde). Le texte n'y entre jamais. */ max-height: calc(100% - 58px); overflow: hidden; } .card-b h3 { font-size: 1.12rem; line-height: 1.25; margin-bottom: 8px; /* Deux lignes, et la suite en points de suspension. Le titre complet reste accessible : il est sur la fiche, et il est déjà le texte de remplacement de l'image. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-b .tags { margin-bottom: 8px; } .card-b .c-loc { margin-bottom: 4px; } .c-nav { display: none; } .c-dots { top: 22px; opacity: 1; } } /* La liste de résultats de la recherche a sa propre géométrie : .reslist .card impose aspect-ratio:1/.78 — des cartes larges et basses, empilées. À 320 px cela donne 234 px de haut pour un bloc de texte de 199 px plus les 58 px réservés au cœur : il manquait 23 px, et la borne se serait mise à rogner le texte. On allonge donc ces cartes en mobile, où la largeur disponible ne permet plus le format paysage. 1/1,12 ET NON 1/1 : le carré a d'abord semblé suffire, parce que la suite mesurait AVANT le chargement des polices et travaillait donc sur la police de repli. Une fois Synonym chargée, il manquait encore 16 px à 320 px et la borne rognait le titre. Les deux défauts — celui de la mise en page et celui de la mesure — se cachaient l'un l'autre. */ @media (max-width: 700px) { .reslist .card { aspect-ratio: 1/1.12; } } /* ════════════════════════════════════════════════════════════ LES TABLEAUX DE BORD EN MOBILE (09/10/2026) 1. LE BOUTON DE MENU CACHAIT LA CLOCHE Côté professionnel (.mob-nav-toggle) et côté hôte (.mob-toggle), le bouton rond du menu est en position:fixed, top:1rem, right:1rem — c'est exactement l'emplacement du bouton de notifications dans la barre d'outils. Sur les captures, on ne voyait du bouton de notifications que le bord de son cercle et le coin de sa pastille, dépassant derrière le menu. Deux contrôles au même endroit, et c'est le moins important qui gagnait. Il descend donc en bas à droite, là où le pouce arrive naturellement, et il libère le haut de l'écran pour la cloche. 2. ET IL NE DOIT PLUS RECOUVRIR LA DERNIÈRE CARTE Côté administration il était déjà en bas, et il passait par-dessus le contenu. Déplacer les trois boutons sans traiter cela aurait simplement transporté le défaut. On réserve donc sa hauteur au bas de la zone défilante : le contenu peut défiler jusqu'au bout et passer dessous. ════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .mob-nav-toggle, .mob-toggle { top: auto; bottom: 1rem; right: 1rem; } /* 46 px de bouton + 2 × 1 rem de marge, arrondi large : la dernière carte doit pouvoir se lire en entier, pas s'arrêter au ras du bouton. */ .content { padding-bottom: 92px; } } /* ════════════════════════════════════════════════════════════ LE PANNEAU D'ALERTES DE L'ADMINISTRATION SORTAIT DE L'ÉCRAN Ancré à droite du bouton (right:0) et plus large que le téléphone, il débordait par la GAUCHE : sur la capture du 09/10 on lisait « nt attend votre décision », « epuis 12 jours », « ien à traiter ». Le panneau fonctionnait, on ne pouvait simplement pas le lire. Sous 420 px il cesse d'être ancré au bouton et se pose sur l'écran, avec une marge de chaque côté. Le même traitement est appliqué au panneau des cloches hôte et professionnel (.plc-panneau), qui a le même ancrage et aurait eu le même défaut. ════════════════════════════════════════════════════════════ */ @media (max-width: 420px) { .pl-al-pop { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; max-width: none; } } /* ════════════════════════════════════════════════════════════ LE BOUTON « PARAMÈTRES » DÉBORDAIT DE L'EN-TÊTE Dans la barre d'outils de l'administration, le mot « Paramètres » suivi de son engrenage poussait le bouton hors de l'écran : sur la capture, on lisait « Paramètre » et la fin était coupée. Sous 700 px le mot s'efface et l'engrenage reste seul — il est compris, il est plus petit, et le bouton garde son nom pour les lecteurs d'écran grâce au libellé posé dans la page. ════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { .tb-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* ════════════════════════════════════════════════════════════ LES TABLEAUX DE L'ADMINISTRATION DÉBORDAIENT SANS LE DIRE (09/10/2026 — mesuré par test/outils/mesure-admin.mjs) À 320 px, le tableau des réservations mesure 620 px pour une zone de contenu de 320 : il sortait de l'écran par la droite, sans barre de défilement ni la moindre indication. On voyait « ID · PROFESSIONNEL · HÔTE · ESPA… » et la suite n'existait pas. Deux des neuf tableaux de l'administration étaient enveloppés dans un conteneur défilant, les sept autres non : la correction avait été faite au cas par cas, donc incomplètement. Une règle unique vaut mieux que sept enveloppes à ne pas oublier. Le tableau devient lui-même défilable horizontalement : rien n'est tronqué, et le doigt atteint les colonnes de droite. -webkit-overflow-scrolling pour l'inertie sur iOS, où un défilement horizontal sans élan se remarque à peine et passe pour un blocage. ════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .content .table, .content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Les cellules cessent de se replier sur plusieurs lignes : dans un tableau qui défile, un mot coupé en trois coûte plus qu'un geste. */ .content .table th, .content .table td { white-space: nowrap; } } /* ════════════════════════════════════════════════════════════ LE TITRE D'ÉCRAN CHEVAUCHAIT L'EN-TÊTE « Accès aux locaux » se cassait en trois lignes et débordait sous la barre, par-dessus le contenu : l'en-tête a une hauteur fixe de 54 px que le titre ne respectait pas. Il tient désormais sur une ligne, et c'est la fin qui s'efface en points de suspension plutôt que le titre qui pousse. ════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { .topbar-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.05rem; } } /* ════════════════════════════════════════════════════════════ « NOS OFFRES » : LE SÉLECTEUR SORTAIT DE L'ÉCRAN Mesuré à 320 px : le groupe Professionnel / Hôte va de 20 à 336 px, soit 16 px au-delà du bord. Sur la capture, la pastille « Hôte » est coupée. LA CORRECTION EXISTAIT DÉJÀ, ET ELLE NE S'APPLIQUAIT PAS. La page contient bien, sous @media(max-width:860px), une règle « .seg-b{min-width:0;padding:10px 20px} ». Mais elle est écrite À LA LIGNE 184, tandis que la règle de base « .seg-b{…min-width:150px} » est à la ligne 391. À spécificité égale, c'est la dernière qui gagne : la règle mobile était écrasée par celle qu'elle devait corriger. Deux boutons de 150 px minimum, plus les marges, donnent les 316 px mesurés. On la repose ici, dans la feuille liée APRÈS les styles de la page. C'est aussi pourquoi ces corrections vivent dans un fichier à part plutôt que dispersées : l'ordre y est garanti. ════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .seg { max-width: 100%; } .seg-b { min-width: 0; flex: 1 1 auto; padding: 10px 14px; white-space: nowrap; } }