/* [SUPPRIMÉ 2026-07-01] L'ancien bloc « Fix V8 du 14 mai 2026 » (@media max-width:767px ciblant .ch-manage-row en grid 3×3) a été retiré : écrit pour l'ANCIEN DOM 6-enfants, il forçait display:grid + overflow:hidden + des règles positionnelles !important sur la carte redesignée « variante A » (head→titre→progress→actions), la cassant en mobile (titre en bas, badges tronqués, « Débloquer » clippé). La carte est désormais gérée par le CSS inline variante A + les @media(≤600/≤360) d'account.html. NE PAS réintroduire. */ /* ════════════════════════════════════════════════════════════════ LEBANIM — responsive.css Refonte responsive desktop-first ajoutée le 10 mai 2026. ════════════════════════════════════════════════════════════════ Conventions : - Approche DESKTOP-FIRST : on ajoute UNIQUEMENT des règles dans @media (max-width: 1023px) et (max-width: 767px). Les règles desktop existantes ne sont jamais modifiées ni supprimées. - Breakpoints unifiés : Mobile : 0 — 767px Tablette : 768 — 1023px Desktop : 1024px+ - UX 60+ : tout élément cliquable ≥44×44px en mobile. Polices ≥14px en mobile, jamais en-dessous. - Inclus en fin de dans les 6 HTML (account, cgu, confidentialite, index, mentions-legales, questionnaire) — APRÈS toutes les autres CSS pour avoir la priorité de cascade. ════════════════════════════════════════════════════════════════ */ :root { /* CSS custom properties documentaires des breakpoints. Les @media queries CSS ne peuvent pas utiliser var() — on les écrit en valeurs littérales. Ces vars servent uniquement de documentation et peuvent être lues en JS si besoin. */ --bp-mobile-max: 767px; --bp-tablet-min: 768px; --bp-tablet-max: 1023px; --bp-desktop-min: 1024px; } /* ════════════════════════════════════════════════════════════════ BLOC GLOBAL — règles transverses sur les 6 pages ════════════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { /* Tablette : containers principaux sans marge horizontale énorme. */ body { font-size: 15px; } /* Toutes les images doivent rester dans leur container. */ img, video, iframe, svg { max-width: 100%; height: auto; } /* Tableaux : scroll horizontal interne plutôt que push de la page. */ table { display: block; overflow-x: auto; max-width: 100%; } /* Grilles 3 colonnes par défaut → 2 en tablette pour la plupart des usages (accueil, dashboard cartes). */ .features-grid, .how-grid, .spaces-grid, .hero-stats { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 767px) { /* Mobile : tout passe en colonne unique. */ body { font-size: 14px; line-height: 1.55; } /* Forcer toutes les grilles communes en 1 colonne mobile. */ .features-grid, .how-grid, .spaces-grid, .hero-stats, .hero-grid, .story-bilingual-grid, .footer-inner, .footer-legal-inner { grid-template-columns: 1fr !important; gap: 16px !important; } /* Boutons : taille tactile minimale UX 60+. */ button, .btn, .btn-primary, .btn-secondary, a.btn, input[type="button"], input[type="submit"] { min-height: 44px; min-width: 44px; padding: 12px 16px; font-size: 15px; } /* Inputs : empêcher le zoom iOS au focus (font-size ≥16px) + largeur 100% avec box-sizing border-box. */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], input[type="url"], textarea, select { font-size: 16px; max-width: 100%; box-sizing: border-box; } /* Padding latéral réduit pour les containers principaux. */ .header-inner, .footer-inner, .footer-legal-inner, .hero-grid, .features-grid, .how-grid, .spaces-grid, .map-wrap, .story-bilingual-grid, .section-header, .legal-container { padding-left: 16px !important; padding-right: 16px !important; } /* Hero stats spécifique : marges importantes en desktop, à réduire. */ .hero-stats { padding: 24px 16px 0 !important; margin-top: 32px !important; gap: 18px !important; } /* Hero CTA et autres groupes de boutons côte à côte → column en mobile pour éviter les boutons coupés à droite. Width 100% sur les boutons enfants direct pour qu'ils respirent. */ .hero-ctas, .final-cta-buttons { flex-direction: column !important; align-items: stretch !important; width: 100% !important; gap: 12px !important; } .hero-ctas > a, .hero-ctas > button, .final-cta-buttons > a, .final-cta-buttons > button { width: 100% !important; box-sizing: border-box !important; text-align: center !important; justify-content: center !important; } /* ──────────────────────────────────────────────────────────── Marges latérales hero (V3 — Section B fix groupé du 11 mai). Diagnostic V2 (commit f70869c) : le padding cumulé (.hero + .hero-grid + .hero-grid > div = 48px de chaque côté) marchait mathématiquement mais le COUPABLE RÉEL était .book-mockup (book 220×2 + rotate ~440px wide) sans règle responsive → débordement à droite, clippé par overflow:hidden, pousse visuellement le contenu adjacent. La pill .eyebrow-pill est en display: inline-flex (pas .pill !) et ne se centre pas via text-align du parent — il faut align-self ou wrapper. V3 — strategie corrigée : 1. Padding 16px UNIQUEMENT sur .hero (pas de cumul) 2. .book-mockup masqué en ≤767px (display:none) — la valeur décorative ne justifie pas le risque d'overflow 3. Pill : align-self center + flex-shrink + max-width 100% 4. Subtitle/CTA : text-align center hérité du grid 1col ──────────────────────────────────────────────────────────── */ .hero { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } /* Reset du padding hérité du V2 sur les enfants pour éviter le cumul (responsive.css V2 mettait padding sur 3 niveaux). */ .hero > .hero-grid, .hero > .hero-grid > div { padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; max-width: 100% !important; } /* Pill DE GÉNÉRATION EN GÉNÉRATION : élément inline-flex qui ne respecte pas text-align du parent. Forcer align-self center + flex-wrap pour le contenu long, max-width pour ne jamais dépasser le container. */ .eyebrow-pill { align-self: center !important; max-width: 100% !important; box-sizing: border-box !important; flex-wrap: wrap !important; white-space: normal !important; } /* Section A fix V5 — sous-éléments de la pill : FR et HE ne doivent jamais être splittés en mots, même si la pill wrappe entre eux. white-space:nowrap garantit l'intégrité. */ .eyebrow-pill .eyebrow-fr, .eyebrow-pill .eyebrow-he { white-space: nowrap !important; } /* Titre + subtitle : forcés dans la largeur dispo, word-wrap pour les longs mots (en français : 'petits-enfants', etc). */ .hero-title, .hero-subtitle { max-width: 100% !important; box-sizing: border-box !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } /* Container des CTA : centrer horizontalement. Le flex-wrap existant (.hero-ctas { flex-wrap: wrap } desktop) reste actif. */ .hero-ctas { justify-content: center !important; max-width: 100% !important; box-sizing: border-box !important; } /* Boutons CTA : ne jamais dépasser le viewport disponible. Le padding interne 17px×30px rend le bouton large — sur 320px ça peut déborder. On limite à largeur dispo (viewport - 32 de padding hero - sécurité). */ .hero-ctas > a, .hero-ctas > button { max-width: 100% !important; box-sizing: border-box !important; white-space: normal !important; text-align: center !important; } /* Sections génériques : padding vertical réduit. */ section { padding-top: 36px !important; padding-bottom: 36px !important; } /* Titres : tailles adaptées (≥18px pour h2, ≥16px pour h3). */ h1 { font-size: 26px !important; line-height: 1.2 !important; } h2 { font-size: 22px !important; line-height: 1.25 !important; } h3 { font-size: 18px !important; line-height: 1.3 !important; } } /* ════════════════════════════════════════════════════════════════ index.html — fix scroll horizontal critique Bug observé 6 mai : zone blanche à droite + scroll horizontal à 393px (Samsung A35). Causes typiques : grids 3 colonnes forcées, paddings horizontaux importants, hero-grid à 2 colonnes. ════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* Section A fix V5 — pill bilingue FR / HE sur 2 lignes. Mobile uniquement (≤767px) : la pill passe en column, FR ligne 1, HE ligne 2, séparateur · masqué (cosmétique inutile en stacked). En desktop la pill garde son layout horizontal natif (FR · HE sur 1 ligne). */ .eyebrow-pill { flex-direction: column !important; gap: 4px !important; padding-top: 10px !important; padding-bottom: 10px !important; align-items: center !important; } .eyebrow-pill .eyebrow-sep, .eyebrow-pill .eyebrow-dot { display: none !important; } /* Hero : 2 colonnes desktop → 1 colonne mobile. Pas de gap 80px. */ .hero-grid { grid-template-columns: 1fr !important; gap: 24px !important; text-align: center; } .hero-subtitle { max-width: 100% !important; margin-left: auto; margin-right: auto; } /* Book mockup : largeur fixe ~440px (220×2 + transform rotate + ombres) sans règle responsive native → débordait à droite et poussait visuellement le contenu adjacent (clippé par overflow:hidden de .hero, mais effet d'optique : "contenu coupé à droite"). Décoratif uniquement, masquage propre en mobile (cf. Section B fix V3 du 11 mai). */ .book-mockup { display: none !important; } /* Map et offered card : padding raisonnable. */ .map-wrap, .offered-card { padding: 20px !important; grid-template-columns: 1fr !important; gap: 16px !important; } .offered-content p { max-width: 100% !important; } /* Footer : éviter les colonnes étroites étirées. */ .footer-tagline { max-width: 100% !important; } } /* ════════════════════════════════════════════════════════════════ Pages légales (cgu, confidentialite, mentions-legales) Container .legal-container avec padding desktop important. ════════════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { .legal-container { padding: 2rem 1.5rem !important; max-width: 100% !important; } } @media (max-width: 767px) { .legal-container { padding: 1.5rem 1rem !important; } .legal-container h1 { font-size: 1.6rem !important; } .legal-container h2 { font-size: 1.15rem !important; } .legal-container h3 { font-size: 1rem !important; } .legal-container p, .legal-container li { font-size: 15px; line-height: 1.65; } } /* ════════════════════════════════════════════════════════════════ account.html — dashboard utilisateur, vues multiples Cartes de profil V2 (6), bandeau force, sidebar settings. ════════════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { /* Settings : sidebar tabs déjà responsive à 768px (cf. inline CSS). On laisse ce comportement, on intervient seulement < 768px. */ /* Topbar : compresser */ .topbar-inner, .acc-header-inner { padding: 0 12px !important; } /* Cards profil V2 : grille 2 cols → 1 col en tablette si trop serré. */ .acc-pcard-grid { grid-template-columns: 1fr !important; } /* Radios cartes (Vouvoiement / Tutoiement) : 1 colonne tablette. */ .acc-radio-cards { grid-template-columns: 1fr !important; } } @media (max-width: 767px) { /* Page entière : padding réduit. */ .page { padding: 16px 12px !important; } /* Dashboard : carte continue + cartes statistiques en colonne. */ .dash-stats-grid, .dash-fullbook-card, .dash-continue-card { grid-template-columns: 1fr !important; flex-direction: column !important; } /* Liste chapitres dashboard : padding réduit, label tronqué OK. */ .dash-chapter-row { padding: 12px 14px !important; gap: 10px !important; } .dash-chapter-label { font-size: 14px; } .dash-chapter-pdf { padding: 6px 8px !important; font-size: 13px !important; } /* Settings : sidebar nav en barre horizontale scrollable. */ .acc-settings-layout { grid-template-columns: 1fr !important; gap: 14px !important; } /* Section B fix V5 — tabs Paramètres en column verticale. Avant : flex-direction:row + overflow-x:auto produisait un scroll horizontal (inacceptable UX 60+). Désormais en mobile les tabs s'empilent verticalement, plein-largeur, taille tactile ≥48 px, l'onglet actif clairement marqué (style existant .acc-settings-tab.is-active déjà gold-soft + gold-dark, on renforce juste le poids et la hauteur). */ .acc-settings-nav { flex-direction: column !important; flex-wrap: nowrap !important; overflow: visible !important; position: static !important; gap: 8px !important; padding: 8px 0 !important; width: 100% !important; } .acc-settings-tab { flex: none !important; width: 100% !important; min-height: 48px !important; padding: 12px 16px !important; font-size: 15px !important; white-space: normal !important; box-sizing: border-box !important; text-align: left !important; border-radius: 8px !important; } .acc-settings-tab.is-active { font-weight: 700 !important; } /* Bandeau force du profil : éléments empilés. */ .acc-strength-row { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } .acc-strength-bar { width: 100% !important; } /* Cartes profil V2 : header en colonne pour respirer. */ .acc-pcard { padding: 16px 14px !important; } .acc-pcard-hdr { flex-wrap: wrap !important; gap: 8px !important; } .acc-pcard-meter { margin-left: 44px; /* aligné avec le titre, sous l'avatar */ } /* Chips Pour qui : largeur libre */ .acc-chips { gap: 6px !important; } /* Modale d'intro profil : fullscreen en mobile. */ .lebanim-intro-modal { width: calc(100vw - 16px) !important; max-width: none !important; max-height: calc(100vh - 16px) !important; margin: 8px !important; } .lebanim-intro-content { padding: 20px 18px 0 !important; } .lebanim-intro-footer { padding: 14px 18px 18px !important; } .lebanim-intro-title { font-size: 22px !important; } /* Modale dirty : fullscreen mobile aussi. */ .acc-dirty-modal { width: calc(100vw - 16px) !important; max-width: none !important; } /* Auth screen : form pleine largeur. */ .auth-card { width: calc(100vw - 24px) !important; max-width: none !important; padding: 22px 18px !important; } .auth-form input, .auth-form button { width: 100% !important; box-sizing: border-box; } /* Sticky savebar : padding réduit */ .acc-profile-savebar { padding: 12px 14px !important; flex-wrap: wrap !important; gap: 10px !important; } .acc-profile-savebar button { width: 100% !important; } } /* ════════════════════════════════════════════════════════════════ questionnaire.html — récit en cours, sidebar chapitres, pop-up IA ════════════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { /* Layout : passer la sidebar au-dessus en colonne, pas en barre horizontale (qui créait un scroll horizontal sur la zone). Sidebar : height auto pour ne PAS réserver la hauteur viewport (sinon ~400-500px de blanc en mobile entre la sidebar et la première question). */ .q-layout { grid-template-columns: 1fr !important; /* Annule aussi le min-height: calc(100vh - var(--header-height)) du grid parent qui forçait du blanc bas de page mobile. */ min-height: 0 !important; } .q-sidebar { display: block !important; position: static !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: visible !important; padding: 12px 16px !important; width: 100% !important; box-sizing: border-box !important; align-self: stretch !important; /* Le background sombre original .ink ferait une grosse barre noire en mobile — on l'override avec le background page clair. */ background: var(--color-paper, #FAF7F0) !important; border-bottom: 0.5px solid var(--color-border-soft, rgba(0,0,0,0.08)) !important; border-right: none !important; } .q-main { padding: 24px 16px !important; } } @media (max-width: 767px) { /* Layout questionnaire mobile */ .q-main { padding: 16px 12px !important; } .q-text { font-size: 22px !important; line-height: 1.3 !important; } .q-hint { font-size: 15px !important; } /* Topbar et subnav mobile */ .header-inner, .topbar-inner { padding: 0 12px !important; gap: 8px !important; } .subnav-inner { padding: 8px 12px !important; flex-wrap: wrap !important; gap: 8px !important; } .breadcrumb-current, [data-question-progress] { font-size: 15px; } /* Sidebar mobile : compact, pas de scroll horizontal. Le sélecteur de chapitre est suffisant pour naviguer (ouvre le panneau plein écran via openChaptersPanel). On cache la liste des questions du chapitre courant en mobile pour éviter une barre dense répétitive — l'utilisateur navigue par "Suivant" entre questions. */ .q-sidebar { padding: 10px 14px !important; border-bottom: 0.5px solid var(--color-border-soft, rgba(0,0,0,0.08)); } .q-chapter-selector { width: 100% !important; box-sizing: border-box !important; flex-wrap: wrap !important; } .q-chapter-selector-eyebrow { font-size: 11px !important; } .q-chapter-selector-title { font-size: 14px !important; } .q-book-progress { margin: 10px 0 !important; } .q-book-progress-label { font-size: 11px !important; } .q-sidebar-divider { margin: 10px 0 !important; } /* Liste questions du chapitre courant : masquée en mobile pour gagner de la place (la nav par "Suivant" est suffisante). */ .q-questions-section { display: none !important; } /* Bouton PDF du chapitre garde sa visibilité (utile, ≥44px). */ .q-sidebar-pdf-btn { display: flex !important; margin-top: 8px !important; } /* Bandeau de progression chapitre */ .q-chapter-header { padding: 12px !important; flex-wrap: wrap !important; } /* Zone de réponse : largeur 100% */ .q-editor-wrap, .q-textarea, .q-ta { max-width: 100% !important; box-sizing: border-box !important; width: 100% !important; } /* Boutons-cartes Parler/Mâider/Photo */ .q-pilot-cards { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .q-pilot-card { padding: 12px 6px !important; min-height: 70px !important; } .q-pilot-card-title { font-size: 12px !important; } .q-pilot-card-sub { font-size: 10px !important; } /* ──────────────────────────────────────────────────────────── Pop-up IA — Section C fix groupé V3 (11 mai 2026). Bug critique remonté par Mordehai : en mobile 393px, le bouton ✕ de fermeture est invisible / inaccessible. Utilisateur 60+ stuck dans l'assistant, oblige à recharger la page. Diagnostic : - Le bouton .ai-float-close existe (questionnaire.html:1171, onclick=closeAiPanel) et la touche Échap fonctionne (questionnaire.html:3114). Clic backdrop est volontairement désactivé (décision produit, ne pas changer). - .ai-float-redesigned .ai-float-close est à 36×36 en desktop (sous seuil tactile 44×44) — repris tel quel en mobile. - Le header .ai-float-hdr est en display:flex SANS flex-wrap. En mobile <400px, l'avatar (36) + gap (10) + headtxt + 🔊 (36) + ✕ (36) peut dépasser, et .ai-float a overflow:hidden → le ✕ est CLIPPÉ visuellement. Fix : (1) masquer l'avatar décoratif en mobile pour libérer ~46px ; (2) forcer le close + voice à 44×44 (UX 60+) ; (3) flex-shrink:0 explicite sur les boutons + min-width:0 sur le headtxt pour ellipsis du sub-titre ; (4) z-index sur le close pour garantir cliquabilité. ──────────────────────────────────────────────────────────── */ /* Pop-up IA : fullscreen mobile (au lieu de 640×720 desktop) */ .ai-float-bg.open { padding: 8px !important; } /* En staging uniquement : décaler la pop-up sous le bandeau STAGING (z-index 99999) pour rendre le bouton ✕ visible. Hooks posés par staging-banner.js : body.lebanim-staging-active + --lebanim-staging-h. Variable defaults à 0 si non staging. On compense la hauteur de la pop-up en parallèle pour qu'elle ne déborde pas en bas du viewport. */ body.lebanim-staging-active .ai-float-bg.open { padding-top: calc(8px + var(--lebanim-staging-h, 0px)) !important; } body.lebanim-staging-active .ai-float, body.lebanim-staging-active .ai-float.ai-float-redesigned { height: calc(100vh - 16px - var(--lebanim-staging-h, 0px)) !important; } .ai-float, .ai-float.ai-float-redesigned { width: calc(100vw - 16px) !important; max-width: none !important; height: calc(100vh - 16px) !important; max-height: calc(100vh - 16px) !important; border-radius: 12px !important; } .ai-float-hdr { padding: 10px 12px !important; gap: 8px !important; flex-wrap: nowrap !important; overflow: visible !important; position: relative !important; } /* Avatar étoile décoratif : masqué en mobile pour libérer ~46px (avatar 36 + gap) — laisse la place au titre + sub + boutons d'action sans risque de débordement clippé. */ .ai-float-redesigned .ai-float-rd-avatar { display: none !important; } /* Headtxt : flex:1 + min-width:0 pour pouvoir shrink jusqu'à 0 si nécessaire. Sub-titre tronqué par ellipsis si trop long. */ .ai-float-redesigned .ai-float-rd-headtxt { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; } .ai-float-rd-title { font-size: 15px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .ai-float-rd-sub { font-size: 14px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Boutons header : taille tactile 44×44 (UX 60+) + flex-shrink:0 pour garantir qu'ils restent dans le viewport. Z-index élevé sur le close pour cliquabilité absolue. */ .ai-float-redesigned .ai-float-voice-btn, .ai-float-redesigned .ai-float-close { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; flex-shrink: 0 !important; font-size: 18px !important; } .ai-float-close { position: relative !important; z-index: 10 !important; } .ai-float-msgs { padding: 14px 16px !important; gap: 14px !important; } .ai-float-input-area { padding: 12px 14px 8px !important; } .ai-float-redesigned .ai-float-inp { font-size: 16px !important; /* anti-zoom iOS */ min-height: 70px !important; } .ai-float-rd-cards { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .ai-float-rd-card { min-height: 48px !important; } /* Bandeau status enregistrement */ .ai-float-rd-status { padding: 6px 14px !important; } .ai-float-rd-status-txt { font-size: 13px !important; } /* Bottom extra (engage + stop row) */ .ai-float-redesigned .ai-float-rd-bottom-extra { padding: 0 14px 10px !important; } .ai-float-rd-engage { font-size: 14px !important; margin-top: 8px !important; } /* Onboarding 6 slides : fullscreen mobile */ .onboarding-modal { padding: 12px !important; } .onboarding-content { width: calc(100vw - 24px) !important; max-width: none !important; padding: 24px 16px !important; } .onboarding-title { font-size: 22px !important; line-height: 1.25 !important; } .onboarding-text { font-size: 14px !important; line-height: 1.5 !important; } /* Modale chapitre PDF : fullscreen aussi */ .modal-bg.open .modal { width: calc(100vw - 24px) !important; max-width: none !important; padding: 20px !important; } } /* ════════════════════════════════════════════════════════════════ HAMBURGER MENU MOBILE/TABLETTE (≤1023px) Bouton injecté par assets/js/mobile-nav.js, drawer slide-in depuis la droite. Masqué en desktop (≥1024px). ════════════════════════════════════════════════════════════════ */ /* Le bouton hamburger n'existe pas en desktop — par défaut hidden. */ .lebanim-mobile-hamburger { display: none; } .lebanim-mobile-overlay, .lebanim-mobile-drawer { display: none; } @media (max-width: 1023px) { /* Affiche le bouton hamburger en mobile/tablette */ .lebanim-mobile-hamburger { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 14px; background: transparent; border: 0.5px solid rgba(201, 168, 76, 0.4); border-radius: 8px; color: var(--gold, #C9A84C); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; flex-shrink: 0; transition: background 150ms, border-color 150ms; } .lebanim-mobile-hamburger:hover, .lebanim-mobile-hamburger:focus { background: rgba(201, 168, 76, 0.1); border-color: rgba(201, 168, 76, 0.7); outline: none; } .lebanim-mobile-hamburger-label { line-height: 1; } /* Masque les éléments topbar inline qui ne tiennent pas en mobile. Logo conservé visible (à gauche), tout le reste passe dans le drawer. */ .topbar-inner .nav-links, .topbar-inner .topbar-right { display: none !important; } /* Overlay drawer */ .lebanim-mobile-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 9997; opacity: 0; pointer-events: none; transition: opacity 220ms ease; } .lebanim-mobile-overlay.is-open { display: block; opacity: 1; pointer-events: auto; } /* Drawer (slide-in from right) */ .lebanim-mobile-drawer { position: fixed; top: 0; right: 0; width: min(80vw, 320px); height: 100vh; background: #FAF7F0; border-left: 0.5px solid rgba(201, 168, 76, 0.3); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.18); z-index: 9998; transform: translateX(100%); transition: transform 240ms ease; display: flex; flex-direction: column; overflow-y: auto; } .lebanim-mobile-drawer.is-open { display: flex; transform: translateX(0); } .lebanim-mobile-drawer-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 0.5px solid rgba(0, 0, 0, 0.08); background: #fff; } .lebanim-mobile-drawer-title { font-family: var(--font-serif, 'Playfair Display', serif); font-size: 18px; font-weight: 500; color: #1A1209; } .lebanim-mobile-drawer-close { background: transparent; border: 0.5px solid rgba(0, 0, 0, 0.15); border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: 18px; line-height: 1; color: #5F5E5A; font-family: inherit; padding: 0; } .lebanim-mobile-drawer-close:hover { background: rgba(0, 0, 0, 0.05); color: #1A1209; } .lebanim-mobile-drawer-list { display: flex; flex-direction: column; padding: 12px 0; flex: 1; } .lebanim-mobile-drawer-item { display: flex; align-items: center; min-height: 48px; padding: 12px 22px; text-decoration: none; color: #2C2C2A; font-family: inherit; font-size: 16px; line-height: 1.3; background: transparent; border: none; border-bottom: 0.5px solid rgba(0, 0, 0, 0.05); cursor: pointer; text-align: left; width: 100%; transition: background 120ms; } .lebanim-mobile-drawer-item:hover, .lebanim-mobile-drawer-item:focus { background: #FDF6E8; outline: none; } .lebanim-mobile-drawer-item.is-disabled { color: #B4B2A9; cursor: not-allowed; pointer-events: none; opacity: 0.45; } /* Fix 11 mai 2026 — alignement avec le statut desktop des features 'Bientôt disponible'. Le drawer mobile (mobile-nav.js V4 commit cf32ff7) exposait ces items sans la classe .is-disabled, en s'attendant à un placeholder côté page cible. Comme ces pages n'ont pas encore de contenu, les liens étaient cliquables mais ne faisaient rien. On les grise via [href*="..."] pour matcher le rendu desktop (.nav-link.is-disabled : opacity 0.45 + pointer-events: none + cursor not-allowed). Mise à jour 11 mai 2026 (fin de journée) : Parcours est désormais ACTIVE (page #parcours complète + CRUD), retirée de la liste. Mon livre reste grisée (feature pas encore implémentée). */ .lebanim-mobile-drawer-item[href*="#mon-livre"] { opacity: 0.45 !important; pointer-events: none !important; cursor: not-allowed !important; } .lebanim-mobile-drawer-item.is-danger { color: #C62828; font-weight: 500; } .lebanim-mobile-drawer-item.is-cta { margin: 14px 18px 0; background: #C9A84C; color: #1A1209; border: none; border-radius: 8px; font-weight: 600; text-align: center; justify-content: center; min-height: 48px; width: calc(100% - 36px); } .lebanim-mobile-drawer-item.is-cta:hover { background: #B89740; } .lebanim-mobile-drawer-empty { padding: 24px 22px; color: #8A7A65; font-size: 14px; font-style: italic; } .lebanim-mobile-drawer-sep { height: 1px; margin: 8px 18px; background: rgba(0, 0, 0, 0.08); } /* Quand le drawer principal est ouvert, masquer tout FAB / bouton flottant pour éviter qu'il vienne par-dessus. La classe .drawer-open est posée sur body par mobile-nav.js à l'ouverture et retirée à la fermeture. */ body.drawer-open .floating-action-button, body.drawer-open .chapter-toggle-button, body.drawer-open .fab, body.drawer-open [data-chapter-toggle], body.drawer-open #q-chapter-selector { display: none !important; } } /* ════════════════════════════════════════════════════════════════ FILET DE SÉCURITÉ GLOBAL — toujours en dernière position. Empêche absolument tout overflow horizontal sur toutes les pages, quelle que soit la cause. Complément aux corrections ciblées ci-dessus, pas substitut. ════════════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { html, body { /* overflow-x: clip — au lieu de hidden — pour ne PAS créer un contexte de défilement qui casserait position:sticky des descendants (cas concret : la .topbar disparaissait au scroll en mobile parce que html/body avait overflow-x:hidden, ce qui neutralisait son sticky natif). 'clip' a le même effet visuel (clippage strict) mais préserve sticky. Supporté Chrome 90+, Safari 16+, Firefox 81+ — couvre la cible 60+ Lebanim. */ overflow-x: clip; max-width: 100vw; } } /* ════════════════════════════════════════════════════════════════ Blocs « Vous racontez » index — Section D fix groupé V6 Section #how-it-works : 3 cards .how-card avec numéro absolu en haut-gauche (.how-step-num) + icône carrée gold-soft (.how-card-icon) + titre + description + meta footer. Desktop : layout en 3 colonnes via .how-grid, esthétique propre (numéro 44 px débordant la card, icône 64 px en gold-soft, titre serif 26 px). Pas de problème. Mobile : héritage du layout vertical (grid 1fr), MAIS le numéro absolu en haut-gauche et l'icône carrée en bloc créent un alignement déséquilibré + l'espacement vertical reste calé sur les valeurs desktop, peu lisible 60+. Refonte mobile (≤767 px) : - Header de bloc : numéro circulaire (gold) + icône (carrée gold-soft) sur la même ligne, centrés - Numéro plus discret (32 px au lieu de 44, repositionné en flow normal) - Icône réduite (48 px au lieu de 64) pour cohérence visuelle - Titre centré, espacement aéré - Description centrée, line-height 1.65, max-width 320px - Meta footer : centrée, séparateur visuel respiré ════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { .how-grid { gap: 28px !important; } .how-card { padding: 28px 22px 24px !important; text-align: center !important; align-items: center !important; } /* Header de bloc : numéro + icône sur la même ligne, centrés. On désolidarise .how-step-num du positionnement absolu desktop (top:-22px;left:36px) pour le ramener dans le flow inline. */ .how-card .how-step-num { position: static !important; width: 32px !important; height: 32px !important; font-size: 16px !important; border-width: 2px !important; margin-right: 12px !important; flex-shrink: 0 !important; display: inline-flex !important; vertical-align: middle !important; } .how-card .how-card-icon { width: 48px !important; height: 48px !important; border-radius: 12px !important; margin: 0 !important; display: inline-flex !important; vertical-align: middle !important; } .how-card .how-card-icon svg { width: 24px !important; height: 24px !important; } /* Wrapper synthétique : .how-step-num + .how-card-icon affichés côte à côte via inline-flex sur leur parent. On force le bloc parent à les aligner. La structure HTML place .how-step-num puis .how-card-icon en flow direct dans .how-card — on les groupe visuellement avec un container flex induit. */ .how-card > .how-step-num, .how-card > .how-card-icon { margin-top: 0 !important; margin-bottom: 16px !important; } /* Titre */ .how-card h3 { font-size: 22px !important; line-height: 1.25 !important; margin: 4px 0 12px !important; text-align: center !important; } /* Description : lisibilité 60+ */ .how-card p { font-size: 15px !important; line-height: 1.65 !important; color: rgba(0, 0, 0, 0.72) !important; max-width: 320px !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 20px !important; } /* Meta footer : centrée, séparateur respiré */ .how-card .how-card-meta { justify-content: center !important; text-align: center !important; font-size: 11px !important; padding-top: 14px !important; line-height: 1.5 !important; } } /* ════════════════════════════════════════════════════════════════ Toggles UI — Section C fix groupé V6 (11 mai 2026) Redesign global pour cohérence palette Lebanim 60+. Override les sélecteurs .acc-toggle (Paramètres) et .pdf-toggle (modal export PDF) qui partageaient le même design 36×20 trop discret. Application globale (pas sous @media) — vaut desktop ET mobile. Spec : - 52×30 visuel (au lieu de 36×20) → état ON/OFF visible de loin - Background OFF : #d9d4c8 (gris-beige doux Lebanim) au lieu de rgba(0,0,0,0.15) (gris pur trop neutre, peu visible) - Background ON : #c8a04a (gold Lebanim) inchangé - Knob 24×24 (au lieu de 16×16) → contraste visuel renforcé - Box-shadow sur knob pour effet 'soulevé' - Transition 200ms ease (au lieu de 0.2s linéaire) - Zone tactile étendue à ≥44×44 via ::before invisible (le visuel reste 52×30, mais le clic capte une zone plus large autour — UX 60+) - Focus accessible : outline gold offset 2px ════════════════════════════════════════════════════════════════ */ .acc-toggle, .pdf-toggle { /* Micro-fix V6.2 — proportions iOS-like 40×20 (au lieu de 46×24 V6.1, lui-même au lieu de 52×30 V6 initial). Ratio 2:1 alignement référence Adobe Stock / iOS. Couleurs Lebanim conservées : OFF #d9d4c8 (gris-beige), ON gold #c8a04a. Knob blanc avec ombre conservé. */ width: 40px !important; height: 20px !important; background: #d9d4c8 !important; border-radius: 10px !important; position: relative !important; transition: background 200ms ease !important; border: none !important; flex-shrink: 0 !important; padding: 0 !important; cursor: pointer !important; } /* Knob (cercle blanc qui glisse) — 16×16, padding interne 2 px. */ .acc-toggle::after, .pdf-toggle::after { content: '' !important; position: absolute !important; top: 2px !important; left: 2px !important; width: 16px !important; height: 16px !important; background: #ffffff !important; border-radius: 50% !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18) !important; transition: left 200ms ease, transform 200ms ease !important; /* Annule l'ancien transform translateX qui décale de 16px */ transform: none !important; } /* État ON — knob à droite : (width - knob - padding) = 40-16-2 = 22 */ .acc-toggle.is-on, .pdf-option.checked .pdf-toggle { background: var(--color-gold, #c8a04a) !important; } .acc-toggle.is-on::after, .pdf-option.checked .pdf-toggle::after { left: 22px !important; transform: none !important; } /* Zone tactile étendue (UX 60+) — ≥44×44 cliquable sans changer le visuel 40×20. Pseudo-élément invisible qui étend le clic au-delà du visuel. Calcul : 20 + 2×12 = 44 en hauteur, 40 + 2×4 = 48 en largeur (≥44×44 respecté). */ .acc-toggle::before, .pdf-toggle::before { content: '' !important; position: absolute !important; top: -12px !important; bottom: -12px !important; left: -4px !important; right: -4px !important; /* Pas de background : zone cliquable invisible. */ } /* Focus accessible — focus visible pour navigation clavier */ .acc-toggle:focus-visible, .pdf-toggle:focus-visible, .pdf-option:focus-within .pdf-toggle { outline: 2px solid var(--color-gold, #c8a04a) !important; outline-offset: 2px !important; } /* ════════════════════════════════════════════════════════════════ Validation signup — Section E fix groupé V5 (11 mai 2026) Styles globaux (desktop + mobile) pour les messages d'erreur et la checklist du formulaire d'inscription. Comportement géré par assets/js/signup-validation.js, lui-même greffé au-dessus de doRegister() existant sans le modifier. Cible 60+ : messages bienveillants, checklist visuelle, couleurs sobres (rouge sourd pour erreur, gold-dark pour règle satisfaite). ════════════════════════════════════════════════════════════════ */ .lebanim-signup-msg { font-size: 13px; line-height: 1.45; color: #c93434; margin-top: 6px; padding: 8px 12px; background: rgba(201, 52, 52, 0.06); border-left: 3px solid #c93434; border-radius: 6px; font-family: inherit; } .lebanim-signup-pwd-checklist { list-style: none; padding: 8px 0 0; margin: 8px 0 0; font-size: 13px; font-family: inherit; } .lebanim-signup-pwd-rule { display: flex; align-items: center; gap: 8px; color: #888; padding: 4px 0; transition: color 150ms ease; } .lebanim-signup-pwd-rule.is-ok { color: var(--color-gold-dark, #B8893E); font-weight: 600; } .lebanim-signup-pwd-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; font-weight: 700; color: inherit; flex-shrink: 0; } input.is-invalid { border-color: #c93434 !important; box-shadow: 0 0 0 3px rgba(201, 52, 52, 0.12) !important; } /* ════════════════════════════════════════════════════════════════ Select natif harmonisé — Section D fix groupé V5 (11 mai 2026) Tous les