/* ============================================================ mobile.css — Overrides responsive global À charger APRÈS toutes les autres CSS (dernier dans ). Breakpoints : - 1100px : tablette + petit desktop (nav burger, grilles plus compactes) - 768px : mobile (stack vertical, hero réduit, mosaïques 1 col) - 480px : petit mobile (typo encore réduite, padding minimal) ============================================================ */ /* ========== Reset & base mobile ========== */ @media (max-width: 1100px) { body { overflow-x: hidden; } /* Padding sections réduit */ section { padding-left: 24px !important; padding-right: 24px !important; } } /* ============================================================ NAV — burger mobile (s'applique a .v7__nav et derivees) ============================================================ */ /* Burger button (caché par défaut, visible < 1100px) */ .v7__nav-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--rlg-encre, #0E2540); border-radius: 50%; background: transparent; cursor: pointer; position: relative; align-items: center; justify-content: center; } .v7__nav-burger span, .v7__nav-burger span::before, .v7__nav-burger span::after { content: ""; display: block; position: absolute; left: 50%; width: 18px; height: 1.5px; background: var(--rlg-encre, #0E2540); transform: translateX(-50%); transition: transform .3s, opacity .3s; } .v7__nav-burger span { top: 50%; transform: translate(-50%, -50%); } .v7__nav-burger span::before { top: -6px; left: 0; transform: none; } .v7__nav-burger span::after { top: 6px; left: 0; transform: none; } .v7__nav.is-menu-open .v7__nav-burger span { background: transparent; } .v7__nav.is-menu-open .v7__nav-burger span::before { transform: rotate(45deg); top: 0; } .v7__nav.is-menu-open .v7__nav-burger span::after { transform: rotate(-45deg); top: 0; } @media (max-width: 1100px) { /* Nav en flex sur mobile : logo | CTA | burger sur une ligne */ .v7__nav { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; padding: 10px 16px !important; flex-wrap: wrap; } .v7__nav-burger { display: inline-flex !important; } .v7__nav-logo img { height: 44px !important; } .v7__nav.is-scrolled .v7__nav-logo img { height: 40px !important; } /* Le menu central passe en sous-bloc plein largeur quand ouvert */ .v7__nav-c { display: none !important; order: 99; flex-basis: 100%; width: 100%; flex-direction: column !important; padding: 18px 4px 12px !important; gap: 4px !important; border-top: 1px solid rgba(168, 136, 75, 0.18); margin-top: 10px; } .v7__nav.is-menu-open .v7__nav-c { display: flex !important; } .v7__nav-c a { font-family: var(--rlg-f-display, 'DM Serif Display', serif) !important; font-style: italic !important; font-size: 22px !important; padding: 12px 0 !important; border-bottom: 1px solid rgba(168, 136, 75, 0.18); text-align: left !important; } .v7__nav-c a:last-child { border-bottom: 0; } .v7__nav-r { display: flex !important; align-items: center !important; gap: 8px !important; } .v7__nav-r .v7__nav-cta { padding: 8px 14px !important; font-size: 10px !important; letter-spacing: .12em !important; } } /* ============================================================ ACCUEIL (.v7__*, .ax__*) ============================================================ */ @media (max-width: 1100px) { .v7__hero { padding: 100px 24px 64px !important; min-height: auto !important; } .v7__hero-h1 { font-size: clamp(48px, 13vw, 96px) !important; } .v7__hero-bottom { grid-template-columns: 1fr !important; gap: 32px !important; } .v7__hero-circle { display: none !important; } .v7__intro { padding: 40px 24px !important; } .v7__intro p { font-size: clamp(18px, 4vw, 24px) !important; } .v7__approche { padding: 64px 24px !important; } .v7__approche-in { grid-template-columns: 1fr !important; gap: 32px !important; } .v7__approche aside { position: static !important; } .ax__explore { padding: 64px 24px !important; } .ax__cards { grid-template-columns: 1fr !important; gap: 16px !important; } .v7__faq { padding: 64px 24px !important; } .v7__faq details summary { grid-template-columns: 36px 1fr 24px !important; gap: 12px !important; padding: 18px 0 !important; } .v7__faq summary span:nth-child(2) { font-size: 17px !important; } .v7__foot { padding: 56px 24px 24px !important; } .v7__foot-in { grid-template-columns: 1fr !important; gap: 32px !important; } } @media (max-width: 768px) { .v7__hero-h1 { font-size: clamp(40px, 14vw, 80px) !important; } .v7__hero-slog { font-size: 15px !important; } .v7__hero-eb { font-size: 10px !important; letter-spacing: .18em !important; } .v7__hero-intro { font-size: 16px !important; line-height: 1.5 !important; } } /* ============================================================ LES SÉANCES (.s2__*, .s3__*) ============================================================ */ @media (max-width: 1100px) { .s3__rail { display: none !important; } .s2__hero { padding: 100px 24px 56px !important; min-height: auto !important; } .s2__hero h1 { font-size: clamp(56px, 16vw, 120px) !important; line-height: .95 !important; } .s2__hero-strip { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 32px !important; } .s2__hero-strip .cell { padding: 14px 16px !important; } .s2__hero-strip .cell .val { font-size: 18px !important; } .s2__hero-strip .cell .lab { font-size: 9px !important; } .s2__hero-strip .cell .sub { font-size: 11px !important; } .s2__hero-jump { flex-wrap: wrap; gap: 12px !important; font-size: 12px !important; } .v7__aqui { padding: 64px 24px !important; } .v7__aqui-list { grid-template-columns: 1fr !important; gap: 18px !important; } .v7__aqui-list li { padding: 14px 0 !important; } .v7__aqui-list h3 { font-size: 17px !important; } .v7__aqui-list p { font-size: 14px !important; line-height: 1.5 !important; } .s2__cadres { padding: 64px 24px !important; } .s2__cadres-switch { grid-template-columns: 1fr !important; gap: 24px !important; } .s2__cadres-tabs { flex-direction: row !important; overflow-x: auto; padding-bottom: 8px; } .s2__cadres-tabs .tab { min-width: 160px; flex-shrink: 0; } .s2__deroul { padding: 64px 24px !important; } .s2__deroul .step { grid-template-columns: 36px 1fr !important; gap: 12px !important; } .s2__deroul .step-rail { display: none !important; } .s2__deroul .step-num { font-size: 28px !important; } .s3__tools { grid-template-columns: 1fr !important; gap: 12px !important; } .s2__tarifs { padding: 64px 24px !important; } .s2__tarifs-cols { grid-template-columns: 1fr !important; gap: 24px !important; } .s2__cab { padding: 64px 24px !important; } .s2__cab-mosaic { gap: 8px !important; } .s2__cab-mosaic-circle { display: none !important; } .s2__cab-prose { padding: 32px 0 0 !important; } .s2__foot { padding: 56px 24px 24px !important; } .s2__foot-in { grid-template-columns: 1fr !important; gap: 32px !important; } } @media (max-width: 768px) { .s2__hero h1 { font-size: clamp(44px, 15vw, 92px) !important; } .s2__hero .line { display: inline; } .s2__hero-strip { grid-template-columns: 1fr !important; } } /* ============================================================ QUI JE SUIS (.qjs__*) ============================================================ */ @media (max-width: 1100px) { .qjs__hero { padding: 100px 24px 56px !important; min-height: auto !important; } .qjs__hero h1 { font-size: clamp(48px, 14vw, 110px) !important; } /* Hero : logo + portrait en colonne, portrait centré et réduit */ .qjs__hero-in { grid-template-columns: 1fr !important; gap: 40px !important; } .qjs__hero-portrait { max-width: 320px !important; margin: 0 auto !important; } .qjs__hero-trio { font-size: 11px !important; gap: 10px !important; } /* "D'où je parle" : prose + photo en colonne, photo centrée 280px */ .qjs__parle { padding: 64px 24px !important; } .qjs__parle-in { grid-template-columns: 1fr !important; gap: 32px !important; } .qjs__parle-photo { position: relative !important; top: 0 !important; max-width: 280px !important; margin: 0 auto !important; } /* Formation académique : 3 colonnes -> 1 */ .qjs__acad { padding: 64px 24px !important; } .qjs__acad-grid { grid-template-columns: 1fr !important; gap: 18px !important; } /* Formation clinique : cbloc → stack */ .qjs__form-cli, .cbloc { padding: 64px 24px !important; } .cbloc { grid-template-columns: 1fr !important; gap: 18px !important; } /* Recherche & publications : onglets sticky en scroll horizontal */ .qjs__rech { padding: 64px 24px !important; } .qjs__rech-tabs { overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; margin: 0 -24px 32px !important; padding: 8px 24px !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; top: 64px !important; z-index: 20 !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .qjs__rech-tabs::-webkit-scrollbar { display: none; } .qjs__rech-tabs .tab { flex-shrink: 0 !important; font-size: 10px !important; padding: 8px 14px !important; letter-spacing: .08em !important; } .qjs__rech-tabs .tab .n { font-size: 12px !important; margin-right: 4px !important; } /* Livres : 2 col -> 1 */ .qjs__livres { grid-template-columns: 1fr !important; gap: 24px !important; } /* Articles académiques */ .aart { grid-template-columns: 60px 1fr !important; gap: 16px !important; padding: 18px 0 !important; } .aart .title { font-size: 14px !important; } /* Médias chips */ .qjs__medias { gap: 6px !important; } .qjs__medias .m { font-size: 11px !important; padding: 6px 12px !important; } /* Footer */ .qjs__foot { padding: 56px 24px 24px !important; } .qjs__foot-in { grid-template-columns: 1fr !important; gap: 32px !important; } } @media (max-width: 768px) { .qjs__hero h1 { font-size: clamp(40px, 15vw, 80px) !important; } .aart { grid-template-columns: 1fr !important; } .aart .year { font-size: 22px !important; margin-bottom: 8px; } } /* ============================================================ LE LIVRE (.lv__*) ============================================================ */ @media (max-width: 1100px) { .lv__hero { padding: 100px 24px 56px !important; min-height: auto !important; } .lv__hero h1 { font-size: clamp(44px, 14vw, 110px) !important; } .lv__hero-in { grid-template-columns: 1fr !important; gap: 32px !important; text-align: left !important; } .lv__pitch { padding: 64px 24px !important; } .lv__pitch p { font-size: 17px !important; line-height: 1.6 !important; } .lv__struct { padding: 64px 24px !important; } .lv__fictions { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .lv__fictions .fcard { padding: 22px 18px !important; } .lv__fictions .fcard h4 { font-size: 18px !important; } .lv__fictions .fcard p { font-size: 13px !important; } .lv__extrait { padding: 64px 24px !important; } .lv__extrait p { font-size: 17px !important; } .lv__auto { padding: 64px 24px !important; } .lv__capture { padding: 64px 24px !important; } .lv__capture-in { grid-template-columns: 1fr !important; gap: 24px !important; } .lv__cal { padding: 64px 24px !important; } .lv__cal-steps { grid-template-columns: 1fr !important; gap: 16px !important; } .res__foot { padding: 56px 24px 24px !important; } .res__foot-in { grid-template-columns: 1fr !important; gap: 32px !important; } } @media (max-width: 768px) { .lv__fictions { grid-template-columns: 1fr !important; } .lv__hero h1 { font-size: clamp(40px, 16vw, 80px) !important; } } /* ============================================================ RESSOURCES (.res__*) ============================================================ */ @media (max-width: 1100px) { .res__hero { padding: 100px 24px 56px !important; } .res__hero h1 { font-size: clamp(56px, 16vw, 110px) !important; } .res__hero-sub { font-size: 17px !important; } .res__outils { padding: 64px 24px !important; } .res__outils-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .res__outils-grid .ocard { padding: 24px 22px !important; } .res__biblio { padding: 64px 24px !important; } .res__biblio-tabs-in { overflow-x: auto; flex-wrap: nowrap !important; padding: 8px 4px; } .res__biblio-tabs .chip { flex-shrink: 0; } .res__works { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } .res__works .work .meta .ttl { font-size: 15px !important; } .res__works .work .meta .auth { font-size: 11px !important; } .res__works .work .meta .note { font-size: 12px !important; } .res__pod { padding: 64px 24px !important; } .res__pod-blocs { grid-template-columns: 1fr !important; gap: 32px !important; } .res__livre { padding: 64px 24px !important; } .res__livre-in { grid-template-columns: 1fr !important; gap: 32px !important; } } @media (max-width: 768px) { .res__works { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } } @media (max-width: 480px) { .res__works { grid-template-columns: 1fr !important; } .res__works .work { display: grid !important; grid-template-columns: 100px 1fr !important; gap: 14px !important; align-items: start !important; } .res__works .work .cover { aspect-ratio: 2/3 !important; width: 100px !important; } .res__works .work .meta { padding-top: 0 !important; } } /* ============================================================ BLOG (.bg__*) ============================================================ */ @media (max-width: 1100px) { .bg__hero { padding: 100px 24px 56px !important; min-height: auto !important; } .bg__hero h1 { font-size: clamp(40px, 12vw, 80px) !important; } .bg__hero-meta { gap: 16px !important; flex-wrap: wrap; } .bg__hero-meta .m { font-size: 13px !important; } .bg__roman { padding: 48px 24px !important; } .bg__filters { padding: 16px 24px !important; } .bg__filters-in { overflow-x: auto; flex-wrap: nowrap !important; } .bg__chip { flex-shrink: 0; font-size: 12px !important; padding: 8px 14px !important; } .bg__hubs { padding: 48px 24px !important; } .bg__hubs-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .bg__hubs-grid .bg__hub { padding: 24px 22px !important; } .bg__grid-section { padding: 48px 24px !important; } .bg__grid { grid-template-columns: 1fr !important; gap: 16px !important; } .bg__grid .bg__card { display: grid !important; grid-template-columns: 100px 1fr !important; gap: 14px !important; } .bg__grid .bg__card-thumb { aspect-ratio: 1 !important; width: 100px !important; } .bg__grid .bg__card-body { padding: 8px 12px 8px 0 !important; } .bg__grid .bg__card-body h3 { font-size: 16px !important; line-height: 1.2 !important; } .bg__grid .bg__card-body .bg__card-excerpt { font-size: 13px !important; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .bg__grid .bg__card-foot { font-size: 11px !important; } } /* ============================================================ CAS CLINIQUES (.cc__*) ============================================================ */ @media (max-width: 1100px) { .cc__rail { display: none !important; } .cc__hero { padding: 100px 24px 56px !important; } .cc__hero h1 { font-size: clamp(40px, 12vw, 80px) !important; } .cc__hero-meta { flex-direction: column !important; gap: 12px !important; text-align: center; } .cc__intro { padding: 48px 24px !important; } .cc__cas { padding: 48px 24px !important; } .cc__cas-head { grid-template-columns: 1fr !important; gap: 20px !important; } .cc__cas-num .num { font-size: 60px !important; } .cc__cas-meta h2 { font-size: clamp(36px, 10vw, 64px) !important; } .cc__cas-body { grid-template-columns: 1fr !important; gap: 24px !important; } .cc__cas-analyse { position: static !important; padding: 24px !important; } .cc__cas-recit { font-size: 15px !important; line-height: 1.65 !important; } .cc__bridge { padding: 40px 24px !important; } .cc__conclusion { padding: 64px 24px !important; } .cc__mentions { padding: 40px 24px !important; } } /* ============================================================ CONTACT (.ct__*) ============================================================ */ @media (max-width: 1100px) { .ct__hero { padding: 100px 24px 56px !important; } .ct__hero h1 { font-size: clamp(40px, 12vw, 80px) !important; } .ct__main { padding: 48px 24px !important; } .ct__main-in { grid-template-columns: 1fr !important; gap: 32px !important; } .ct__calendly { padding: 16px !important; } } /* ============================================================ ROMAN — page d'entrée (.ro__*) ============================================================ */ @media (max-width: 1100px) { .ro__hero { padding: 110px 24px 64px !important; } .ro__hero h1 { font-size: clamp(40px, 12vw, 80px) !important; } .ro__hero-sub { font-size: 18px !important; } .ro__hero-meta { gap: 28px !important; } .ro__hero-meta .item b { font-size: 30px !important; } .ro__hero-cta { gap: 12px !important; } .ro__hero-cta a { padding: 14px 22px !important; font-size: 11px !important; } .ro__intro { padding: 64px 24px !important; } .ro__intro h2 { font-size: clamp(28px, 7vw, 44px) !important; } .ro__intro p { font-size: 17px !important; } .ro__voix { padding: 64px 24px !important; } .ro__voix-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } .ro__voix-card { min-height: 180px; padding: 22px 18px !important; } .ro__voix-card .name { font-size: 22px !important; } .ro__voix-card .lead { font-size: 44px !important; } .ro__voix-card .hint { font-size: 13px !important; } .ro__toc { padding: 64px 24px !important; } .ro__toc-list a { grid-template-columns: 32px 1fr auto !important; gap: 16px !important; padding: 18px 4px !important; } .ro__toc-list .ttl { font-size: 17px !important; } .ro__toc-list .min { font-size: 10px !important; } .ro__credits { padding: 56px 24px !important; } } @media (max-width: 480px) { .ro__voix-grid { grid-template-columns: 1fr !important; } .ro__hero-meta { flex-direction: column; gap: 18px !important; } } /* ============================================================ SINGLE POST (article blog: mon-copain-ne-veut-pas-sengager) .sp__* ============================================================ */ @media (max-width: 1100px) { .sp__hero { padding: 96px 24px 48px !important; } .sp__hero h1 { font-size: clamp(32px, 8vw, 56px) !important; } .sp__main { padding: 32px 24px 64px !important; } .sp__main-in { grid-template-columns: 1fr !important; gap: 32px !important; } .sp__main-aside { position: static !important; } .sp__content { font-size: 16px !important; line-height: 1.7 !important; } .sp__content p { margin-bottom: 14px; } .sp__content h2 { font-size: 24px !important; } .sp__content h3 { font-size: 20px !important; } }