/* ========================================================================== MEETennis — assets/correctifs.css CORRECTIFS D'AFFICHAGE — à charger EN DERNIER dans le Ce fichier ne dessine rien de nouveau. Il ne fait que réparer ce qui cassait sur téléphone, et chaque bloc dit lequel. Pourquoi un fichier à part plutôt que des retouches dans app.css : app.css, app-v2.css et les trois layout-*.css ont chacun leur logique et leurs commentaires. Un correctif glissé au milieu se perd, et on ne sait plus, six mois après, s'il est là pour une raison ou par accident. Ici, tout ce qui est écrit répare quelque chose de daté et d'observé. ========================================================================== */ /* ========================================================================== 1. LA BARRE D'ÉTAT MANGEAIT LE HAUT DE PAGE -------------------------------------------------------------------------- Constaté sur la fiche produit : l'heure et les icônes réseau de l'iPhone se superposaient au titre. Pourquoi. L'app est installée en PWA avec apple-mobile-web-app-status-bar-style = black-translucent et un viewport en viewport-fit=cover : c'est ce couple qui permet au bandeau orange de remonter jusqu'en haut de l'écran, sous l'heure. La page occupe donc toute la hauteur, barre d'état comprise. Sur les écrans QUI ONT le bandeau, tout va bien : le bandeau est orange et opaque, l'heure se lit dessus. Sur les écrans lancés avec $hide_topbar = true — la fiche produit, la formation, le panier — il n'y a rien à cet endroit : le texte de la page défile directement sous l'heure. La réparation : une bande opaque, de la hauteur exacte de la zone protégée, posée uniquement sur les écrans sans bandeau. ========================================================================== */ body::before{ content:""; position:fixed; top:0;left:0;right:0; height:env(safe-area-inset-top); background:var(--app-bg,#fdf9f5); z-index:35; /* sous la barre d'onglets (40) et les feuilles (60) */ pointer-events:none; display:none; } /* On ne l'allume QUE sans bandeau : sur les autres écrans elle viendrait poser un rectangle beige au-dessus de l'orange. */ body:not(:has(.app-hero))::before{display:block} /* Le navigateur qui ne connaît pas :has() n'affichera jamais la bande — c'est exactement l'affichage d'avant, donc aucune régression. */ /* ========================================================================== 2. « COMMUNAUTÉ » SORTAIT DE L'ÉCRAN -------------------------------------------------------------------------- Cinq onglets, des libellés de longueur très inégale (« Vidéos » contre « Communauté »), et des .tab en flex:1 SANS min-width:0. Un élément flex ne descend pas sous la largeur de son contenu tant qu'on ne l'y autorise pas : le dernier libellé débordait donc du cadre, coupé par le bord de l'écran. Trois réparations, dans cet ordre d'importance : · min-width:0 — l'onglet a enfin le droit de rétrécir · text-size-adjust — iOS agrandissait le texte de sa propre initiative · une taille qui descend d'un cran sous 360 px (iPhone SE) ========================================================================== */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* AJOUT — ces trois règles sont bornées à 1099 px. Ce fichier est chargé EN DERNIER : sans cette borne, il gagnait contre layout-desktop.css sur les seules propriétés qu'il touche, et le menu de l'ordinateur héritait des réglages du téléphone — 2 px de marge au lieu de la gouttière de la coquille, des onglets en flex:1 1 0 étirés d'un bord à l'autre de la dalle, et des libellés en 10,5 px sur une barre dessinée pour du 12,5. Un menu à moitié téléphone, à moitié ordinateur. Rien n'est modifié en dessous de 1100 px : c'est le correctif d'origine, intact, là où il servait. */ @media (max-width:1099px){ body .tabbar{padding-left:2px;padding-right:2px} body .tabbar .tab{ min-width:0; /* LA correction */ padding-left:1px;padding-right:1px; flex:1 1 0; } body .tabbar .tab span{ display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10.5px; letter-spacing:-.2px; text-align:center; } } /* Au-delà, la barre a la place : les libellés ne sont plus tronqués, on garde seulement le droit de rétrécir (min-width:0), sans quoi un onglet ne peut jamais passer sous la largeur de son texte. */ @media (min-width:1100px){ body .tabbar .tab{min-width:0} body .tabbar .tab span{display:block;text-align:center;white-space:nowrap} } @media (max-width:359px){ body .tabbar .tab span{font-size:9.5px;letter-spacing:-.3px} body .tabbar .tab svg{width:21px;height:21px} } /* ========================================================================== 3. LA PHRASE D'AIDE CHEVAUCHAIT LE BOUTON -------------------------------------------------------------------------- « Tu peux ajouter plusieurs contenus et tout régler en une fois. » passait par-dessus le bas du bouton orange. Pourquoi. .cta porte margin-bottom:16px ET une ombre portée de 26 px ; la phrase, elle, portait un style en ligne margin-top:-6px destiné à rattraper cette marge. Sur un bouton dont le texte tient sur deux lignes — ce qui arrive dès qu'on zoome ou qu'on allonge le libellé — le compte n'y est plus. La marge négative a été retirée du PHP. On fixe ici le rythme du bloc d'achat une bonne fois, pour que le prochain libellé plus long ne rouvre pas le même défaut. ========================================================================== */ .pd-buy .cta{margin-bottom:12px} .pd-buy .hint{ margin:12px 0 0; font-size:12.5px;line-height:1.55; color:var(--ink-soft); text-align:center; } .pd-buy form + .hint{margin-top:14px} .pd-buy .d-cta.ghost{margin-top:10px} /* ========================================================================== 4. CHAMPS ET BOUTONS -------------------------------------------------------------------------- Trois défauts qui se voyaient partout où il y a un formulaire : a) iOS ZOOME sur tout champ dont le texte fait moins de 16 px. On tapait dans un code promo, la page grossissait et ne revenait jamais à sa taille. Les champs passent donc à 16 px sur téléphone — c'est la seule valeur qui empêche ce zoom, il n'y a pas d'autre réglage. b) Les champs n'avaient pas de box-sizing : un input en width:100% avec 15 px de padding fait 100 % + 30 px, donc dépasse de son cadre. C'est la cause des champs qui sortaient de leur carte. c) Les boutons ne géraient pas les libellés longs : pas de retour à la ligne, pas de hauteur minimale. Un « Débloquer — prix libre » sur un petit écran sortait du bouton. ========================================================================== */ input,select,textarea,button{font-family:inherit;max-width:100%} input,select,textarea{box-sizing:border-box} @media (max-width:700px){ input:not([type=checkbox]):not([type=radio]), select, textarea{font-size:16px} } .input,select.input,textarea.input{box-sizing:border-box;min-height:48px} select.input{ appearance:none;-webkit-appearance:none; padding-right:38px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 12px center; background-size:18px 18px; } .input:focus,select.input:focus,textarea.input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(225,94,1,.12); } .cta,.d-cta,.p-btn,.li-dl{ min-height:48px; display:flex;align-items:center;justify-content:center; text-align:center; line-height:1.3; overflow-wrap:anywhere; /* un libellé long se plie au lieu de sortir */ } .p-btn,.li-dl{min-height:38px;display:inline-flex} .cta{padding:15px 18px} /* La cible tactile minimale. Une pastille de galerie de 8 px se rate une fois sur deux ; on agrandit la zone cliquable sans agrandir le point. */ .pd-gal-pt{position:relative} .pd-gal-pt::after{content:"";position:absolute;inset:-11px} /* ========================================================================== 5. LE SOMMAIRE DE LA FICHE (voir produit.php) -------------------------------------------------------------------------- Avant : un compteur (« 4 vidéos et 2 documents ») d'un côté, une liste de fichiers de l'autre, et rien qui disait ce qu'on allait recevoir. Maintenant : une seule liste, cadenassée tant qu'on n'a pas acheté. ========================================================================== */ .pd-som{margin:18px 0 4px} .pd-som-h{ display:flex;align-items:baseline;justify-content:space-between;gap:10px; margin:0 0 10px; } .pd-som-h h3{font:800 15px/1.3 Montserrat,sans-serif;margin:0;color:var(--ink)} .pd-som-h span{font-size:12px;color:var(--ink-soft);font-weight:600;white-space:nowrap} .pd-som-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .pd-som-l li{margin:0} .pd-som-i{ display:flex;align-items:center;gap:11px; padding:11px 12px; border-radius:12px; background:rgba(128,128,128,.06); color:var(--ink); text-decoration:none; } a.pd-som-i:active{background:rgba(225,94,1,.10)} .pd-som-i .ic{ width:30px;height:30px;flex:none; border-radius:9px; display:grid;place-items:center; background:rgba(225,94,1,.11);color:var(--brand); } .pd-som-i .ic svg{width:16px;height:16px} .pd-som-i.lock .ic{background:rgba(128,128,128,.14);color:var(--ink-soft)} .pd-som-i .m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .pd-som-i .m b{font:700 13.5px/1.35 Raleway,sans-serif;color:var(--ink); overflow-wrap:anywhere} .pd-som-i .m small{font-size:11.5px;color:var(--ink-soft)} .pd-som-tag{ font:800 9.5px/1 Montserrat,sans-serif;letter-spacing:.3px;text-transform:uppercase; background:rgba(22,163,74,.14);color:#16a34a; padding:4px 7px;border-radius:6px;flex:none; } .pd-som-note{margin:10px 2px 0;font-size:12px;line-height:1.5;color:var(--ink-soft)} /* Le rappel adressé à l'administrateur quand des fichiers dorment dans private_files sans être rattachés. Invisible pour un membre. */ .pd-admin{ margin:14px 0 0;padding:12px 14px; border:1.5px dashed rgba(225,94,1,.45);border-radius:12px; background:rgba(225,94,1,.06); font-size:12.5px;line-height:1.55;color:var(--ink); } .pd-admin b{font-family:Montserrat,sans-serif} .pd-admin a{color:var(--brand);font-weight:800} /* ========================================================================== 6. DÉTAILS DE MISE EN PAGE QUI DÉBORDAIENT ========================================================================== */ /* Une description collée depuis un traitement de texte contient parfois un tableau ou une image en largeur fixe : elle élargissait toute la page, et c'est ce qui faisait apparaître une barre de défilement horizontale. */ .pd-desc img,.d-desc img{max-width:100%;height:auto} .pd-desc table,.d-desc table{display:block;max-width:100%;overflow-x:auto} .pd-desc a,.d-desc a{overflow-wrap:anywhere} /* Titres très longs sans espace (noms de fichiers, adresses) : on autorise la coupure plutôt que de laisser dépasser. */ .pd-title,.fo-head h1{overflow-wrap:anywhere} /* Le pied de page laissait 110 px sous le contenu ; avec la barre d'onglets ET le panier flottant, ce n'était plus assez sur les écrans à encoche. AJOUT — borné à 1099 px. Au-delà, la réserve du bas dépend de la hauteur réelle du menu (--nav-h), qui vaut 78 px avec la barre en bas et 0 avec la barre latérale : c'est layout-desktop.css qui la calcule. Sans cette borne, ce fichier — chargé en dernier — imposait 118 px dans les deux cas, donc un trou sous le contenu en mode barre latérale. */ @media (max-width:1099px){ body .app{padding-bottom:calc(118px + env(safe-area-inset-bottom))} } /* ========================================================================== 7. LES TÉMOIGNAGES DE LA FICHE -------------------------------------------------------------------------- Des captures d'avis, posées juste avant le prix. Elles ne sont pas dans le carrousel du haut, et c'est délibéré : un avis montré avant d'avoir dit ce qu'on vend n'est qu'une image de plus ; au moment du prix, il répond à la question qu'on se pose vraiment. Défilement horizontal avec accroche : sur téléphone, empiler quatre captures en pleine largeur repousse le bouton d'achat de deux écrans. ========================================================================== */ .pd-avis{margin:22px 0 4px} .pd-avis h3{font:800 15px/1.3 Montserrat,sans-serif;margin:0 0 11px;color:var(--ink)} .pd-avis-l{ display:flex;gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:6px; margin:0 -18px;padding-left:18px;padding-right:18px; /* déborde jusqu'aux bords */ scrollbar-width:none; } .pd-avis-l::-webkit-scrollbar{display:none} .pd-avis-l figure{ margin:0;flex:0 0 auto;width:min(78%,270px); scroll-snap-align:start; background:rgba(128,128,128,.06); border-radius:13px;overflow:hidden; } .pd-avis-l img{width:100%;display:block;height:auto} .pd-avis-l figcaption{ padding:9px 11px 11px; font-size:11.5px;line-height:1.45;color:var(--ink-soft); } @media (min-width:620px){ .pd-avis-l{margin:0;padding-left:0;padding-right:0;flex-wrap:wrap;overflow:visible} .pd-avis-l figure{width:calc(50% - 6px)} } /* ========================================================================== 8. LES BADGES DE PAIEMENT HORS DU CHECKOUT -------------------------------------------------------------------------- Le panier annonçait « Carte, Apple Pay, Google Pay et PayPal » en deux lignes de texte, et la liste était écrite en dur : elle promettait PayPal même quand PayPal n'était pas branché. Ce sont les mêmes badges qu'à l'étape suivante — reconnaître le logo de sa carte rassure plus qu'une phrase, et la continuité visuelle entre les deux écrans compte autant. partials/paiement_logos.php produit le balisage ; checkout.css garde ses propres réglages de conteneur, il ne charge pas ce fichier. ========================================================================== */ .ck-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px;align-items:center} .ck-badges li{display:flex} .ck-badges .pl{height:26px;width:auto;display:block;border-radius:4px} .pay-note{margin-top:14px} .pay-note p{ display:flex;align-items:center;gap:8px; margin:11px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-soft); } .pay-note p svg{width:16px;height:16px;flex:none;color:#5b8c5a} /* ========================================================================== 9. ORDINATEUR — CE QUI SE VOYAIT SUR GRAND ÉCRAN -------------------------------------------------------------------------- Trois défauts que la vue téléphone masquait, parce qu'à 390 px de large « pleine largeur » et « largeur de lecture » sont la même chose. ========================================================================== */ @media (min-width:1100px){ /* --- a) Deux boutons de retour empilés ----------------------------------- La barre boutique porte son retour ; certaines pages en affichaient un second juste dessous. Le second est retiré du PHP là où c'était le cas (produit.php) ; cette règle est le filet : si une page en rajoute un demain, il ne s'empilera pas. */ body:has(.shop-bar) .back-btn{display:none} /* --- b) Deux paniers à l'écran ------------------------------------------- Le panier flottant est rendu par partials/footer.php sur TOUTES les pages — y compris celles qui ont déjà une icône panier dans la barre boutique, et y compris le panier lui-même, où il proposait d'aller là où l'on était déjà. */ body:has(.shop-bar) .cart-fab{display:none} /* --- c) Des boutons de 1 200 px ------------------------------------------ Un bouton pleine largeur est juste sur téléphone : la largeur du pouce est celle de l'écran. Sur ordinateur, le même bouton traverse la page et ne ressemble plus à un bouton. On lui donne une largeur de lecture, centré dans sa carte. */ .card-panel > .btn, .card-panel > form > .btn, .card-panel > a.btn{ max-width:380px; margin-left:auto; margin-right:auto; display:block; } .card-panel .promo-row .btn{max-width:none;margin:0} /* La colonne de lecture du panier et de la commande : plus étroite que le catalogue, parce qu'on y lit des lignes, pas une grille de vignettes. Une ligne de panier étirée sur 1 000 px sépare le titre de son prix par un demi-mètre de vide. */ body:has(.cart-line) .card-panel, body:has(.cart-line) .page-title, body:has(.cart-line) .count-line, body:has(.cart-line) > .app > .muted-link{max-width:640px;margin-left:auto;margin-right:auto} }