/* ========================================================== RÉSEAU TERRITORIAL — ACCUEIL V2 PREMIUM Fichier CSS exclusivement réservé à la page d’accueil. Règles : - aucune incidence sur Commune V2 ; - aucune incidence sur Acteur V2 ; - aucune incidence sur Association publique ; - développement mobile first ; - les nouvelles classes commenceront par .rt-home-v2. ========================================================== */ body.home-layout { --rt-home-primary: #2563eb; --rt-home-primary-dark: #1d4ed8; --rt-home-secondary: #0f172a; --rt-home-accent: #22c55e; --rt-home-background: #f8fafc; --rt-home-surface: #ffffff; --rt-home-text: #111827; --rt-home-muted: #64748b; --rt-home-border: #e2e8f0; } /* |-------------------------------------------------------------------------- | Le véritable socle graphique sera ajouté à la phase suivante. |-------------------------------------------------------------------------- */ /* ========================================================== ACCUEIL RÉSEAU TERRITORIAL — V2.1 DESKTOP FINAL - hiérarchie plus maîtrisée - titres moins imposants - meilleur rythme vertical - cartes plus lisibles - aucune incidence mobile ========================================================== */ @media (min-width:901px){ /* |-------------------------------------------------------------------------- | Cadre général de la page |-------------------------------------------------------------------------- */ body.home-layout{ background: radial-gradient( circle at 50% 0%, rgba(219,234,254,.58), transparent 34% ), #f7f9fc !important; } body.home-layout main{ width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; background:transparent !important; box-shadow:none !important; } body.home-layout .rt-home{ width:min(100%, 1480px) !important; max-width:1480px !important; margin:0 auto !important; padding:20px 30px 70px !important; overflow:visible !important; } body.home-layout .rt-home > section, body.home-layout .rt-home > div{ box-sizing:border-box !important; min-width:0 !important; } /* |-------------------------------------------------------------------------- | Rythme général entre les grandes sections |-------------------------------------------------------------------------- */ body.home-layout .rt-home > section{ margin-top:34px !important; margin-bottom:34px !important; } body.home-layout .rt-home > section:first-of-type{ margin-top:0 !important; } body.home-layout .rt-section-head, body.home-layout .rt-premium-head{ margin-top:54px !important; margin-bottom:22px !important; } body.home-layout .rt-section-head + *, body.home-layout .rt-premium-head + *{ margin-top:0 !important; } /* |-------------------------------------------------------------------------- | Titres généraux |-------------------------------------------------------------------------- */ body.home-layout .rt-section-head h2, body.home-layout .rt-premium-head h2{ max-width:980px !important; margin:0 !important; font-size:clamp(32px, 3vw, 46px) !important; line-height:1.04 !important; letter-spacing:-1.45px !important; font-weight:900 !important; color:#172033 !important; text-wrap:balance; } body.home-layout .rt-section-head p, body.home-layout .rt-premium-head p{ max-width:860px !important; margin-top:10px !important; margin-bottom:0 !important; font-size:15px !important; line-height:1.6 !important; color:#64748b !important; } body.home-layout .rt-premium-kicker{ margin-bottom:10px !important; padding:7px 12px !important; font-size:11px !important; line-height:1 !important; letter-spacing:.08em !important; text-transform:uppercase !important; } /* |-------------------------------------------------------------------------- | Hero principal |-------------------------------------------------------------------------- */ body.home-layout .rt-hero{ min-height:540px !important; margin:0 !important; padding:58px 56px !important; border-radius:38px !important; box-shadow: 0 30px 80px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.12) !important; } body.home-layout .rt-hero > div{ min-width:0 !important; } body.home-layout .rt-hero h1, body.home-layout .rt-animated-title{ max-width:690px !important; margin-bottom:18px !important; font-size:clamp(48px, 5vw, 70px) !important; line-height:.98 !important; letter-spacing:-3px !important; text-wrap:balance; } body.home-layout .rt-hero-description, body.home-layout .rt-hero p{ max-width:710px !important; margin-top:14px !important; font-size:15.5px !important; line-height:1.62 !important; } body.home-layout .rt-actions{ margin-top:24px !important; gap:10px !important; } body.home-layout .rt-actions .btn, body.home-layout .rt-actions a{ min-height:48px !important; padding:12px 20px !important; border-radius:15px !important; font-size:13px !important; font-weight:850 !important; } body.home-layout .rt-mini-map{ min-height:360px !important; border-radius:30px !important; } /* |-------------------------------------------------------------------------- | Recherche territoriale |-------------------------------------------------------------------------- */ body.home-layout .rt-search-panel{ position:relative !important; z-index:20 !important; width:min(860px, calc(100% - 80px)) !important; margin:-58px auto 30px !important; padding:17px !important; border:1px solid rgba(203,213,225,.9) !important; border-radius:24px !important; background:rgba(255,255,255,.94) !important; box-shadow: 0 25px 65px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.95) !important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } body.home-layout .rt-search-panel form{ gap:10px !important; } body.home-layout .rt-search-panel input{ min-height:52px !important; padding:0 18px !important; border-radius:15px !important; font-size:14px !important; } body.home-layout .rt-search-panel button{ min-height:52px !important; padding:0 24px !important; border-radius:15px !important; font-size:13px !important; font-weight:900 !important; } /* |-------------------------------------------------------------------------- | Job Territorial IA |-------------------------------------------------------------------------- */ body.home-layout .rt-job-widget{ grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr) !important; gap:34px !important; margin-top:28px !important; padding:34px 38px !important; border-radius:30px !important; box-shadow:0 26px 60px rgba(15,23,42,.16) !important; } body.home-layout .rt-job-widget > div{ min-width:0 !important; } body.home-layout .rt-job-widget h2{ margin-bottom:10px !important; font-size:34px !important; line-height:1.03 !important; letter-spacing:-1.2px !important; } body.home-layout .rt-job-widget p{ max-width:700px !important; margin-bottom:18px !important; font-size:14.5px !important; line-height:1.55 !important; } body.home-layout .rt-job-actions{ gap:9px !important; } body.home-layout .rt-job-actions a{ min-height:43px !important; padding:10px 16px !important; border-radius:14px !important; font-size:12px !important; font-weight:850 !important; } body.home-layout .rt-job-stats{ gap:10px !important; } body.home-layout .rt-job-stat{ min-height:105px !important; padding:17px 12px !important; border-radius:18px !important; background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.14) !important; } body.home-layout .rt-job-stat strong{ font-size:27px !important; line-height:1 !important; } body.home-layout .rt-job-stat span{ margin-top:7px !important; font-size:10px !important; line-height:1.25 !important; } /* |-------------------------------------------------------------------------- | Chiffres clés |-------------------------------------------------------------------------- */ body.home-layout .rt-stats{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:14px !important; margin:26px 0 50px !important; } body.home-layout .rt-stat{ min-height:116px !important; padding:22px 14px !important; border:1px solid #e2e8f0 !important; border-radius:22px !important; background: linear-gradient( 180deg, rgba(255,255,255,1), rgba(248,250,252,.96) ) !important; box-shadow:0 14px 32px rgba(15,23,42,.055) !important; } body.home-layout .rt-stat:hover{ transform:translateY(-4px) !important; box-shadow:0 22px 45px rgba(15,23,42,.10) !important; } body.home-layout .rt-stat h2{ margin:0 !important; font-size:31px !important; line-height:1 !important; letter-spacing:-1px !important; } body.home-layout .rt-stat p{ margin-top:8px !important; font-size:11px !important; line-height:1.25 !important; font-weight:800 !important; } /* |-------------------------------------------------------------------------- | Cartes et blocs clairs de la page |-------------------------------------------------------------------------- */ body.home-layout .rt-profile-card, body.home-layout .rt-preview-card, body.home-layout .rt-feature-item{ border:1px solid #e2e8f0 !important; background: linear-gradient( 180deg, #ffffff 0%, #fbfdff 100% ) !important; box-shadow:0 15px 38px rgba(15,23,42,.065) !important; } body.home-layout .rt-profile-card:hover, body.home-layout .rt-preview-card:hover, body.home-layout .rt-feature-item:hover{ border-color:#cbd5e1 !important; box-shadow:0 23px 50px rgba(15,23,42,.11) !important; } body.home-layout .rt-profile-card h3, body.home-layout .rt-preview-card h3{ color:#172033 !important; } body.home-layout .rt-profile-card p, body.home-layout .rt-preview-card p, body.home-layout .rt-feature-item span{ color:#64748b !important; } /* |-------------------------------------------------------------------------- | Moteur de plateforme |-------------------------------------------------------------------------- */ body.home-layout .rt-platform-engine{ gap:34px !important; padding:40px !important; border-radius:34px !important; } body.home-layout .rt-platform-engine h2{ max-width:670px !important; font-size:38px !important; line-height:1.04 !important; letter-spacing:-1.3px !important; } body.home-layout .rt-engine-actions{ gap:10px !important; } body.home-layout .rt-engine-actions .btn{ min-height:45px !important; padding:11px 17px !important; border-radius:14px !important; } /* |-------------------------------------------------------------------------- | Activité récente |-------------------------------------------------------------------------- */ body.home-layout .rt-preview-grid{ max-height:560px !important; gap:18px !important; padding:2px 9px 2px 2px !important; } body.home-layout .rt-preview-card{ min-height:185px !important; padding:22px !important; border-radius:24px !important; } body.home-layout .rt-preview-card h3{ font-size:20px !important; line-height:1.14 !important; letter-spacing:-.35px !important; } body.home-layout .rt-preview-card p{ font-size:13.5px !important; line-height:1.5 !important; } /* |-------------------------------------------------------------------------- | CTA final |-------------------------------------------------------------------------- */ body.home-layout .rt-final-cta, body.home-layout .rt-final-cta-premium{ min-height:330px !important; margin-top:50px !important; padding:46px 42px !important; border-radius:34px !important; } body.home-layout .rt-final-cta h2{ max-width:820px !important; margin-left:auto !important; margin-right:auto !important; font-size:38px !important; line-height:1.04 !important; letter-spacing:-1.35px !important; text-wrap:balance; } body.home-layout .rt-final-cta p{ max-width:740px !important; margin:12px auto 0 !important; font-size:14.5px !important; line-height:1.55 !important; } body.home-layout .rt-final-proof-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:12px !important; width:min(100%, 760px) !important; margin:28px auto !important; } body.home-layout .rt-final-proof-grid div{ min-height:94px !important; padding:16px 13px !important; border-radius:18px !important; } body.home-layout .rt-final-proof-grid strong{ font-size:27px !important; line-height:1 !important; } body.home-layout .rt-final-proof-grid span{ margin-top:7px !important; font-size:10px !important; line-height:1.25 !important; } body.home-layout .rt-final-actions{ gap:10px !important; } body.home-layout .rt-final-actions .btn{ min-height:45px !important; padding:11px 18px !important; border-radius:14px !important; font-size:12px !important; font-weight:850 !important; } /* |-------------------------------------------------------------------------- | Boutons flottants |-------------------------------------------------------------------------- */ body.home-layout .rt-job-floating-wrapper, body.home-layout .job-floating-button, body.home-layout .job-floating, body.home-layout .floating-job-button, body.home-layout #jobFloatingButton{ right:26px !important; bottom:28px !important; transform:scale(.92); transform-origin:right bottom; } body.home-layout #backToTop{ right:27px !important; bottom:88px !important; } } /* |-------------------------------------------------------------------------- | Écrans intermédiaires / petits ordinateurs |-------------------------------------------------------------------------- */ @media (min-width:901px) and (max-width:1180px){ body.home-layout .rt-home{ padding-left:20px !important; padding-right:20px !important; } body.home-layout .rt-hero{ padding:46px 40px !important; } body.home-layout .rt-hero h1, body.home-layout .rt-animated-title{ font-size:52px !important; } body.home-layout .rt-job-widget{ grid-template-columns:1fr !important; } body.home-layout .rt-stats{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } body.home-layout .rt-stats .rt-stat:nth-last-child(-n+2){ grid-column:auto !important; } } /* ========================================================== ACCUEIL RÉSEAU TERRITORIAL — V2.2 DESKTOP Compactage du haut de page - Flash Territorial plus compact - suppression des grands espaces vides - recherche mieux intégrée - transition Job IA / statistiques améliorée ========================================================== */ @media (min-width:901px){ /* |-------------------------------------------------------------------------- | Début de page |-------------------------------------------------------------------------- */ body.home-layout .rt-home{ padding-top:12px !important; } body.home-layout .rt-home > section{ margin-top:26px !important; margin-bottom:26px !important; } /* |-------------------------------------------------------------------------- | Flash Territorial |-------------------------------------------------------------------------- */ body.home-layout .rt-flash-stories-card{ min-height:0 !important; height:auto !important; margin-top:10px !important; margin-bottom:22px !important; padding:24px 28px !important; border-radius:28px !important; background: linear-gradient( 180deg, rgba(255,255,255,.98), rgba(248,250,252,.96) ) !important; border:1px solid #e2e8f0 !important; box-shadow: 0 16px 38px rgba(15,23,42,.07) !important; } body.home-layout .rt-flash-stories-head{ margin-bottom:18px !important; display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:24px !important; } body.home-layout .rt-flash-stories-head h2{ margin:0 0 5px !important; font-size:24px !important; line-height:1.05 !important; letter-spacing:-.55px !important; } body.home-layout .rt-flash-stories-head p{ margin:0 !important; font-size:13px !important; line-height:1.45 !important; color:#64748b !important; } body.home-layout .rt-flash-stories-head .btn{ min-height:42px !important; padding:10px 17px !important; border-radius:14px !important; font-size:12px !important; font-weight:850 !important; white-space:nowrap !important; } body.home-layout .rt-stories-row{ min-height:0 !important; height:auto !important; padding:2px 2px 8px !important; gap:18px !important; align-items:center !important; } body.home-layout .rt-story-create, body.home-layout .rt-story-bubble{ width:92px !important; min-width:92px !important; flex:0 0 92px !important; } body.home-layout .rt-story-create-circle, body.home-layout .rt-story-ring{ width:68px !important; height:68px !important; } body.home-layout .rt-story-create strong, body.home-layout .rt-story-bubble strong{ margin-top:8px !important; font-size:11px !important; line-height:1.2 !important; } body.home-layout .rt-story-bubble small{ font-size:9px !important; } /* |-------------------------------------------------------------------------- | Hero |-------------------------------------------------------------------------- */ body.home-layout .rt-hero{ margin-top:0 !important; margin-bottom:0 !important; } /* |-------------------------------------------------------------------------- | Titre de la mise en avant |-------------------------------------------------------------------------- */ body.home-layout .rt-hero + .rt-section-head, body.home-layout .rt-hero + section .rt-section-head{ margin-top:32px !important; } body.home-layout .rt-section-head{ margin-top:42px !important; margin-bottom:18px !important; } body.home-layout .rt-section-head h2{ font-size:clamp(30px, 2.7vw, 42px) !important; line-height:1.04 !important; } /* |-------------------------------------------------------------------------- | Recherche |-------------------------------------------------------------------------- */ body.home-layout .rt-search-panel{ width:min(820px, calc(100% - 120px)) !important; margin:-34px auto 22px !important; padding:14px !important; border-radius:21px !important; box-shadow: 0 20px 48px rgba(15,23,42,.13), inset 0 1px 0 rgba(255,255,255,.95) !important; } body.home-layout .rt-search-panel input{ min-height:48px !important; } body.home-layout .rt-search-panel button{ min-height:48px !important; } /* |-------------------------------------------------------------------------- | Job Territorial IA |-------------------------------------------------------------------------- */ body.home-layout .rt-job-widget{ margin-top:18px !important; margin-bottom:20px !important; padding:30px 34px !important; } body.home-layout .rt-job-widget h2{ font-size:31px !important; } body.home-layout .rt-job-stat{ min-height:96px !important; } /* |-------------------------------------------------------------------------- | Statistiques territoriales |-------------------------------------------------------------------------- */ body.home-layout .rt-stats{ margin-top:18px !important; margin-bottom:40px !important; } body.home-layout .rt-stat{ min-height:104px !important; padding:19px 12px !important; } body.home-layout .rt-stat h2{ font-size:29px !important; } /* |-------------------------------------------------------------------------- | Carte territoriale |-------------------------------------------------------------------------- */ body.home-layout .rt-stats + .rt-section-head{ margin-top:38px !important; } body.home-layout .rt-map-section, body.home-layout .rt-map-wrapper, body.home-layout .rt-territorial-map{ margin-top:0 !important; } } /* |-------------------------------------------------------------------------- | Ordinateurs de largeur intermédiaire |-------------------------------------------------------------------------- */ @media (min-width:901px) and (max-width:1180px){ body.home-layout .rt-flash-stories-card{ padding:22px 24px !important; } body.home-layout .rt-search-panel{ width:min(760px, calc(100% - 80px)) !important; } body.home-layout .rt-section-head h2{ font-size:36px !important; } } /* ============================================================ RÉSEAU TERRITORIAL — ACCUEIL — HEADER COMPACT FINAL ------------------------------------------------------------ Portée strictement limitée à body.home-layout. Ne modifie pas les pages Commune, Association ou Acteur. ============================================================ */ @media (min-width: 701px) { body.home-layout header { padding: 8px 24px !important; } body.home-layout .header-clean { gap: 8px !important; } body.home-layout .header-row { min-height: 72px !important; gap: 14px !important; flex-wrap: nowrap !important; } body.home-layout .brand-logo-pro { min-width: 220px !important; padding-right: 12px !important; } body.home-layout .brand-logo-pro img { width: auto !important; height: 72px !important; max-width: 220px !important; object-fit: contain !important; } body.home-layout .clean-nav { gap: 8px !important; align-items: center !important; } body.home-layout .nav-drop { padding-bottom: 4px !important; } body.home-layout .nav-drop-title { padding: 8px 13px !important; font-size: 12px !important; line-height: 1.2 !important; } body.home-layout .lang-current { padding: 8px 12px !important; } } @media (max-width: 1100px) and (min-width: 701px) { body.home-layout .header-row { flex-wrap: wrap !important; } body.home-layout .brand-logo-pro { min-width: 180px !important; } body.home-layout .brand-logo-pro img { height: 62px !important; max-width: 190px !important; } } @media (max-width: 700px) { body.home-layout header { padding: 8px 12px !important; } body.home-layout .header-clean { gap: 6px !important; } body.home-layout .header-row { min-height: 64px !important; gap: 8px !important; } body.home-layout .brand-logo-pro img { height: 54px !important; max-width: 165px !important; } } /* ============================================================ RÉSEAU TERRITORIAL — ACCUEIL — ORDRE FINAL DES BLOCS ------------------------------------------------------------ 1. Hero 2. À la une 3. Flash Territorial 4. Suite de la page Portée limitée exclusivement à body.home-layout. ============================================================ */ body.home-layout main { margin-top: 14px !important; padding-top: 14px !important; } body.home-layout .rt-home { display: flex !important; flex-direction: column !important; gap: 22px !important; } body.home-layout .rt-home > * { order: 20 !important; } /* 1 — Hero */ body.home-layout .rt-home > .rt-home-hero-v2, body.home-layout .rt-home > [data-rt-home-hero-v2] { order: 1 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* 2 — À la une */ body.home-layout .rt-home > .rt-home-featured-v2, body.home-layout .rt-home > [data-rt-home-featured] { order: 2 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* 3 — Flash Territorial */ body.home-layout .rt-home > .rt-flash-stories-card { order: 3 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Suppression des grands espaces parasites entre ces blocs */ body.home-layout .rt-home-hero-v2 + *, body.home-layout .rt-home-featured-v2 + *, body.home-layout .rt-flash-stories-card + * { margin-top: 0 !important; } @media (max-width: 700px) { body.home-layout main { margin-top: 8px !important; padding-top: 8px !important; } body.home-layout .rt-home { gap: 14px !important; } } /* ============================================================ RESEAU TERRITORIAL ACCUEIL MOBILE PREMIUM FINAL V3 ------------------------------------------------------------ Portée STRICTEMENT limitée à body.home-layout. - Hero mobile compact et lisible - Navigation basse type application - FAB Créer correctement positionné - Boutons flottants au-dessus de la navigation - Respect safe-area iPhone ============================================================ */ @media (max-width: 700px) { /* ======================================================== 1. PAGE / ZONE UTILE ======================================================== */ body.home-layout { overflow-x: hidden !important; } body.home-layout main { width: 100% !important; max-width: none !important; margin-top: 6px !important; padding-top: 6px !important; /* * Réserve sous le dernier contenu afin que la navigation * fixe ne masque jamais le bas de la page. */ padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important; } body.home-layout .rt-home { width: 100% !important; max-width: none !important; gap: 14px !important; overflow: visible !important; } /* ======================================================== 2. HERO V2 PREMIUM — MOBILE ======================================================== */ body.home-layout .rt-home-hero-v2 { position: relative !important; width: 100% !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 22px 16px 14px !important; border-radius: 24px !important; overflow: hidden !important; } body.home-layout .rt-home-hero-v2__inner { position: relative !important; z-index: 3 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: none !important; min-height: 0 !important; gap: 18px !important; margin: 0 !important; padding: 0 !important; } body.home-layout .rt-home-hero-v2__copy { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } /* Petit label supérieur */ body.home-layout .rt-home-hero-v2__eyebrow { width: fit-content !important; max-width: 100% !important; min-height: 30px !important; margin: 0 0 12px !important; padding: 7px 10px !important; gap: 7px !important; font-size: 10px !important; line-height: 1.15 !important; letter-spacing: .055em !important; border-radius: 999px !important; white-space: normal !important; } body.home-layout .rt-home-hero-v2__eyebrow-dot { width: 7px !important; height: 7px !important; flex: 0 0 7px !important; } /* Titre */ body.home-layout .rt-home-hero-v2 h1 { width: 100% !important; max-width: 100% !important; margin: 0 0 12px !important; font-size: clamp(29px, 8.8vw, 39px) !important; line-height: 1.02 !important; letter-spacing: -.045em !important; overflow-wrap: normal !important; word-break: normal !important; } body.home-layout .rt-home-hero-v2__accent { display: inline !important; } /* Promesse / mots-clés */ body.home-layout .rt-home-hero-v2__promise { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 5px 8px !important; width: 100% !important; margin: 0 0 12px !important; font-size: 11px !important; line-height: 1.35 !important; } body.home-layout .rt-home-hero-v2__promise span { display: inline-flex !important; align-items: center !important; } body.home-layout .rt-home-hero-v2__promise span::after { margin-left: 8px !important; } /* Description */ body.home-layout .rt-home-hero-v2__description { width: 100% !important; max-width: 560px !important; margin: 0 0 16px !important; font-size: 13px !important; line-height: 1.55 !important; } /* Boutons du Hero */ body.home-layout .rt-home-hero-v2__actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; gap: 8px !important; margin: 0 !important; } body.home-layout .rt-home-hero-v2__button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: none !important; min-height: 43px !important; padding: 10px 9px !important; border-radius: 13px !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 850 !important; text-align: center !important; white-space: normal !important; } /* ======================================================== 3. VISUEL RÉSEAU DU HERO ======================================================== */ body.home-layout .rt-home-hero-v2__visual { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; min-height: 0 !important; height: 250px !important; margin: 0 !important; overflow: hidden !important; } body.home-layout .rt-home-hero-v2__visual--network-wow { width: 100% !important; height: 250px !important; min-height: 250px !important; transform: none !important; } body.home-layout .rt-home-hero-v2__territory { position: absolute !important; left: 50% !important; top: 50% !important; width: 330px !important; max-width: 100% !important; height: 245px !important; margin: 0 !important; transform: translate(-50%, -50%) scale(.86) !important; transform-origin: center center !important; } body.home-layout .rt-home-hero-v2__network-stage { width: 100% !important; height: 100% !important; } /* * Le grand réseau décoratif arrière n'a pas besoin de prendre * de place supplémentaire sur petit écran. */ body.home-layout .rt-home-hero-v2__network { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: .45 !important; pointer-events: none !important; } /* ======================================================== 4. PROFILS / PORTES D'ENTRÉE DU HERO ======================================================== */ body.home-layout .rt-home-hero-v2__profiles { position: relative !important; z-index: 5 !important; display: flex !important; width: calc(100% + 16px) !important; max-width: none !important; margin: 12px -8px 0 !important; padding: 4px 8px 6px !important; gap: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; } body.home-layout .rt-home-hero-v2__profiles::-webkit-scrollbar { display: none !important; } body.home-layout .rt-home-hero-v2__profile { flex: 0 0 108px !important; width: 108px !important; min-width: 108px !important; max-width: 108px !important; min-height: 91px !important; padding: 10px 7px !important; border-radius: 15px !important; scroll-snap-align: start !important; } body.home-layout .rt-home-hero-v2__profile-icon { width: 34px !important; height: 34px !important; margin-bottom: 6px !important; border-radius: 11px !important; font-size: 17px !important; } body.home-layout .rt-home-hero-v2__profile strong { font-size: 11px !important; line-height: 1.15 !important; } body.home-layout .rt-home-hero-v2__profile small { margin-top: 2px !important; font-size: 9px !important; line-height: 1.2 !important; } /* ======================================================== 5. NAVIGATION MOBILE BASSE ======================================================== */ body.home-layout .rt-mobile-bottom-nav { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 1000000 !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; width: 100% !important; max-width: none !important; min-height: calc( 68px + env(safe-area-inset-bottom, 0px) ) !important; margin: 0 !important; padding: 6px 5px calc( 6px + env(safe-area-inset-bottom, 0px) ) !important; border-top: 1px solid rgba(148, 163, 184, .24) !important; border-radius: 0 !important; background: rgba(255, 255, 255, .96) !important; box-shadow: 0 -10px 35px rgba(15, 23, 42, .10) !important; backdrop-filter: blur(18px) saturate(150%) !important; -webkit-backdrop-filter: blur(18px) saturate(150%) !important; } body.home-layout .rt-mobile-nav-item { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; min-height: 54px !important; margin: 0 !important; padding: 4px 2px !important; gap: 3px !important; border: 0 !important; background: transparent !important; font-size: 9px !important; line-height: 1.05 !important; font-weight: 800 !important; text-align: center !important; white-space: nowrap !important; } body.home-layout .rt-mobile-nav-item > span:first-child { display: flex !important; align-items: center !important; justify-content: center !important; width: 27px !important; height: 27px !important; margin: 0 !important; font-size: 19px !important; line-height: 1 !important; } body.home-layout .rt-mobile-nav-item > strong { font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; } /* ======================================================== 6. BOUTON CENTRAL CRÉER ======================================================== */ body.home-layout .rt-mobile-nav-item.create { overflow: visible !important; padding-top: 0 !important; color: #0f172a !important; } body.home-layout .rt-mobile-nav-plus { width: 43px !important; height: 43px !important; margin-top: -18px !important; margin-bottom: 0 !important; border: 4px solid #ffffff !important; border-radius: 50% !important; background: linear-gradient( 135deg, #2563eb, #4f46e5 ) !important; color: #ffffff !important; font-size: 25px !important; font-weight: 500 !important; line-height: 35px !important; box-shadow: 0 8px 22px rgba(37, 99, 235, .30) !important; } /* Badges Messages / Profil */ body.home-layout .rt-mobile-badge { position: absolute !important; top: 2px !important; left: 55% !important; min-width: 17px !important; height: 17px !important; padding: 0 4px !important; border: 2px solid #ffffff !important; border-radius: 999px !important; font-size: 8px !important; line-height: 13px !important; text-align: center !important; } /* ======================================================== 7. PANNEAU "CRÉER RAPIDEMENT" ======================================================== */ body.home-layout .rt-mobile-fab-panel { position: fixed !important; left: 10px !important; right: 10px !important; bottom: calc( 82px + env(safe-area-inset-bottom, 0px) ) !important; z-index: 1000002 !important; max-height: calc( 100dvh - 120px - env(safe-area-inset-bottom, 0px) ) !important; overflow-y: auto !important; border-radius: 22px !important; } body.home-layout .rt-mobile-fab-backdrop { z-index: 1000001 !important; } /* ======================================================== 8. BOUTONS FLOTTANTS ======================================================== */ body.home-layout .rt-job-floating-wrapper { right: 12px !important; bottom: calc( 84px + env(safe-area-inset-bottom, 0px) ) !important; z-index: 999990 !important; transform: none !important; } body.home-layout .rt-job-floating-wrapper .job-floating-btn { max-width: 145px !important; padding: 8px 10px !important; font-size: 10px !important; transform: scale(.86) !important; transform-origin: right bottom !important; } /* Retour haut */ body.home-layout #backToTop { right: 14px !important; bottom: calc( 137px + env(safe-area-inset-bottom, 0px) ) !important; width: 41px !important; height: 41px !important; font-size: 18px !important; z-index: 999991 !important; } } /* ============================================================ TRÈS PETITS ÉCRANS ============================================================ */ @media (max-width: 390px) { body.home-layout .rt-home-hero-v2 { padding: 19px 13px 12px !important; } body.home-layout .rt-home-hero-v2 h1 { font-size: clamp(27px, 8.5vw, 34px) !important; } body.home-layout .rt-home-hero-v2__description { font-size: 12px !important; } body.home-layout .rt-home-hero-v2__actions { gap: 6px !important; } body.home-layout .rt-home-hero-v2__button { min-height: 41px !important; padding: 9px 6px !important; font-size: 10px !important; } body.home-layout .rt-home-hero-v2__visual, body.home-layout .rt-home-hero-v2__visual--network-wow { height: 225px !important; min-height: 225px !important; } body.home-layout .rt-home-hero-v2__territory { transform: translate(-50%, -50%) scale(.77) !important; } body.home-layout .rt-home-hero-v2__profile { flex-basis: 101px !important; width: 101px !important; min-width: 101px !important; max-width: 101px !important; } body.home-layout .rt-mobile-nav-item { font-size: 8.5px !important; } } /* ============================================================ ACCESSIBILITÉ — RÉDUCTION DES ANIMATIONS ============================================================ */ @media (prefers-reduced-motion: reduce) and (max-width: 700px) { body.home-layout .rt-home-hero-v2__connection, body.home-layout .rt-home-hero-v2__moving-dot, body.home-layout .rt-home-hero-v2__network-point, body.home-layout .rt-home-hero-v2__central-orbit { animation: none !important; } } /* ===== FIN ACCUEIL MOBILE PREMIUM FINAL V3 ===== */ /* ============================================================ RÉSEAU TERRITORIAL — ACCUEIL HERO MOBILE FULL BLEED FINAL V4 ------------------------------------------------------------ Objectif : - sortir uniquement le Hero du conteneur de l'accueil - utiliser réellement toute la largeur de l'écran - supprimer la bande blanche latérale - conserver le contenu interne correctement espacé ============================================================ */ @media (max-width: 700px) { body.home-layout .rt-home > .rt-home-hero-v2, body.home-layout .rt-home > [data-rt-home-hero-v2] { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; box-sizing: border-box !important; border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; overflow-x: hidden !important; } /* * Le padding appartient au contenu intérieur, * pas au grand conteneur bleu. */ body.home-layout .rt-home-hero-v2__inner { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 22px 16px 14px !important; box-sizing: border-box !important; } } /* Très petits écrans */ @media (max-width: 390px) { body.home-layout .rt-home > .rt-home-hero-v2, body.home-layout .rt-home > [data-rt-home-hero-v2] { padding: 0 !important; } body.home-layout .rt-home-hero-v2__inner { padding: 19px 13px 12px !important; } } /* ============================================================ RÉSEAU TERRITORIAL — FLASH TERRITORIAL MOBILE COMPACT V1 ------------------------------------------------------------ Portée : - accueil uniquement - Flash Territorial uniquement - aucun impact Hero / À la une / navigation ============================================================ */ @media (max-width:700px){ body.home-layout .rt-flash-stories-card{ width:100% !important; max-width:100% !important; min-height:0 !important; height:auto !important; margin:0 !important; padding:18px 15px 16px !important; border-radius:22px !important; box-sizing:border-box !important; overflow:hidden !important; } /* En-tête */ body.home-layout .rt-flash-stories-head{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; margin:0 0 12px !important; padding:0 !important; } body.home-layout .rt-flash-stories-head > div{ width:100% !important; min-width:0 !important; } body.home-layout .rt-flash-stories-head h2{ margin:0 0 5px !important; font-size:clamp(25px, 7.4vw, 29px) !important; line-height:1.02 !important; letter-spacing:-.7px !important; overflow-wrap:anywhere !important; } body.home-layout .rt-flash-stories-head p{ margin:0 !important; font-size:13px !important; line-height:1.42 !important; } /* Bouton Voir tous les flashs */ body.home-layout .rt-flash-stories-head .btn{ width:100% !important; max-width:none !important; min-height:44px !important; margin:0 !important; padding:10px 14px !important; border-radius:14px !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:12px !important; line-height:1.2 !important; font-weight:850 !important; } /* Zone stories */ body.home-layout .rt-flash-stories-card .rt-stories-row{ width:100% !important; min-height:0 !important; height:auto !important; margin:0 !important; padding:2px 0 4px !important; box-sizing:border-box !important; } /* État sans Flash : suppression du grand espace observé sur iPhone */ body.home-layout .rt-flash-stories-card .rt-flash-empty-state{ display:block !important; width:100% !important; min-height:0 !important; margin:6px 0 0 !important; padding:8px 2px 2px !important; color:#64748b !important; font-size:13px !important; line-height:1.4 !important; box-sizing:border-box !important; } } /* Très petits iPhone */ @media (max-width:390px){ body.home-layout .rt-flash-stories-card{ padding:16px 13px 14px !important; border-radius:20px !important; } body.home-layout .rt-flash-stories-head h2{ font-size:24px !important; } body.home-layout .rt-flash-stories-head p, body.home-layout .rt-flash-stories-card .rt-flash-empty-state{ font-size:12px !important; } }