/* ============================================================= planning_hero.css — v6 Charger AVANT planning.css dans le ============================================================= */ /* ══════════════════════════════════════════════════════════ HERO — photo de fond, overlay léger, titre à gauche en bas ══════════════════════════════════════════════════════════ */ .ph-hero { position: relative; background-color: #0d2e38; background-size: cover; background-position: center top; min-height: 340px; margin-top: 100px; display: flex; flex-direction: column; justify-content: flex-end; /* titre collé en bas */ } @media (max-width: 980px) { .ph-hero { margin-top: 90px; min-height: 260px; } } @media (max-width: 700px) { .ph-hero { margin-top: 0px; min-height: 280px; } } /* Overlay très léger — uniquement pour lire le titre */ .ph-hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,.0) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.55) 100% ); pointer-events: none; } /* Mot géant et badge masqués */ .ph-bg-word { display: none; } .ph-badge { display: none; } /* Titre + sous-titre en bas à gauche */ .ph-hero-content { position: relative; z-index: 2; max-width: 900px; width: 100%; margin: 0 auto; padding: 0 24px 24px; box-sizing: border-box; } @media (max-width: 980px) { .ph-hero-content { padding: 0 16px 20px; } } @media (max-width: 700px) { .ph-hero-content { padding: 0 12px 16px; } } .ph-h1 { font-size: 52px; font-weight: 800; color: #fff; letter-spacing: -1px; margin: 0 0 4px; font-family: 'Protest Riot', 'Poppins', sans-serif; text-align: left; line-height: 1.05; text-shadow: 0 2px 14px rgba(0,0,0,.5); } .ph-h1 em { font-style: normal; color: #F97316; } @media (max-width: 980px) { .ph-h1 { font-size: 38px; } } @media (max-width: 700px) { .ph-h1 { font-size: 26px; } } .ph-sub { color: rgba(255,255,255,.75); font-size: 14px; font-family: 'Poppins', sans-serif; text-align: left; text-shadow: 0 1px 6px rgba(0,0,0,.4); margin: 0; } @media (max-width: 700px) { .ph-sub { font-size: 12px; } } /* ══════════════════════════════════════════════════════════ BARRE UNIFIÉE — sur la photo, une seule ligne ══════════════════════════════════════════════════════════ */ .ph-bar-wrap { max-width: 900px; margin-left: auto; margin-right: auto; padding: 0 24px 28px; position: relative; z-index: 2; width: 100%; box-sizing: border-box; } @media (max-width: 980px) { .ph-bar-wrap { padding: 0 16px 22px; } } @media (max-width: 700px) { .ph-bar-wrap { padding: 0 12px 18px; } } /* La barre elle-même */ .ph-ubar { display: flex; align-items: stretch; background: rgba(255,255,255,.97); border-radius: 16px; box-shadow: 0 6px 30px rgba(0,0,0,.22); overflow: hidden; backdrop-filter: blur(6px); } /* Chaque segment cliquable */ .ph-seg { flex: 1; padding: 14px 20px; cursor: pointer; transition: background .15s; min-width: 0; } .ph-seg:hover { background: #f0f8fa; } .ph-seg.ph-seg-active .ph-seg-val { color: #3A6F7E; font-weight: 700; } .ph-seg-label { font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .6px; font-family: 'Poppins', sans-serif; margin-bottom: 3px; } .ph-seg-val { font-size: 14px; font-weight: 500; color: #1a3a45; font-family: 'Poppins', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Séparateur vertical */ .ph-sep { width: 1px; background: #e0ecef; margin: 10px 0; flex-shrink: 0; } /* ══════════════════════════════════════════════════════════ MOBILE — valeurs trouvées à l'inspecteur ══════════════════════════════════════════════════════════ */ @media (max-width: 700px) { .ph-hero { overflow: visible; margin-top: 0px; min-height: 280px; } .ph-hero-content { padding: 80px 12px 24px; } .ph-bar-wrap { padding: 0 12px; padding-bottom: 0; margin-top: -55px; position: relative; z-index: 5; top: 70px; } .ph-create-wrap { padding: 0 12px; margin-top: 150px; margin-bottom: 24px; } .ph-ubar { flex-direction: column; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.22); } .ph-sep { width: auto; height: 1px; margin: 0 14px; } .ph-seg { padding: 13px 16px; } } /* ══════════════════════════════════════════════════════════ LIGNE "SI AUCUNE DATE..." + BOUTON CRÉER FONCÉ ══════════════════════════════════════════════════════════ */ .ph-create-wrap { max-width: 900px; margin: 16px auto 32px; padding: 0 24px; box-sizing: border-box; } @media (max-width: 980px) { .ph-create-wrap { padding: 0px 16px; padding-top: 70px; } } /* Ligne complète en orange */ .ph-create-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; font-family: 'Poppins', sans-serif; font-weight: 600; color: #FF8000; } /* Texte orange */ .ph-create-txt { color: #FF8000; } /* Bouton foncé inline — sans fond */ .ph-create-btn { display: inline-flex !important; align-items: center !important; gap: 7px !important; background: none !important; color: #1a3a45 !important; border-radius: 0 !important; border: none !important; padding: 0 !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .5px !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer !important; font-family: 'Asap Condensed', 'Poppins', sans-serif !important; transition: color .2s !important; white-space: nowrap !important; } .ph-create-btn:hover, .ph-create-btn:visited, .ph-create-btn:active { background: none !important; color: #3A6F7E !important; text-decoration: none !important; } .ph-create-btn svg { flex-shrink: 0; } /* ══════════════════════════════════════════════════════════ OVERLAY & MODAL ══════════════════════════════════════════════════════════ */ .ph-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9999; align-items: flex-start; justify-content: center; padding-top: 130px; /* juste sous le header desktop */ } .ph-overlay.on { display: flex; } .ph-modal { background: #fff; border-radius: 20px; width: calc(100% - 40px); max-width: 500px; max-height: calc(100vh - 140px); overflow-y: auto; padding-bottom: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.25); } @media (max-width: 700px) { .ph-overlay { align-items: flex-start !important; padding-top: 60px !important; } .ph-modal { width: calc(100% - 24px) !important; max-width: 100% !important; border-radius: 16px !important; max-height: calc(100vh - 68px) !important; padding-bottom: 20px !important; margin: 0 12px !important; } } .ph-mhandle { width: 40px; height: 4px; background: #d0dfe3; border-radius: 2px; margin: 16px auto 0; } .ph-mclose { position: absolute; right: 16px; top: 14px; width: 36px; height: 36px; background: #f0f8fa; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #004559; } @media (max-width: 700px) { .ph-mclose { width: 40px; height: 40px; } } .ph-mhead { position: relative; padding: 16px 18px 10px; font-size: 17px; font-weight: 700; color: #004559; font-family: 'Poppins', sans-serif; } @media (max-width: 700px) { .ph-mhead { font-size: 16px; } } .ph-msearch { margin: 0 18px 14px; display: flex; align-items: center; gap: 10px; background: #f0f8fa; border: 1.5px solid #d0dfe3; border-radius: 12px; padding: 11px 14px; } @media (max-width: 700px) { .ph-msearch { margin: 0 14px 12px; padding: 13px 14px; } } .ph-msearch input { border: none; background: transparent; font-size: 15px; color: #004559; outline: none; width: 100%; font-family: 'Poppins', sans-serif; } .ph-msearch input::placeholder { color: #9ca3af; } /* Liste lieux */ .ph-places { padding: 0 18px; max-height: 230px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d0dfe3 transparent; } .ph-places::-webkit-scrollbar { width: 4px; } .ph-places::-webkit-scrollbar-thumb { background: #d0dfe3; border-radius: 4px; } @media (max-width: 700px) { .ph-places { padding: 0 14px; max-height: 200px; } } .ph-pitem { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #f0f8fa; cursor: pointer; border-radius: 8px; transition: background .1s; } .ph-pitem:last-child { border-bottom: none; } .ph-pitem:hover { background: #f0f8fa; } @media (max-width: 700px) { .ph-pitem { padding: 14px 4px; } } .ph-pico { width: 42px; height: 42px; background: #e8f4f7; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ph-pico svg { width: 18px; height: 18px; color: #3A6F7E; } @media (max-width: 700px) { .ph-pico { width: 46px; height: 46px; } } .ph-pname { font-size: 14px; font-weight: 600; color: #004559; font-family: 'Poppins', sans-serif; } .ph-psub { font-size: 12px; color: #6b7280; margin-top: 1px; font-family: 'Poppins', sans-serif; } @media (max-width: 700px) { .ph-pname { font-size: 15px; } .ph-psub { font-size: 13px; } } .ph-pcount { font-size: 11px; color: #9ca3af; padding: 4px 18px; font-family: 'Poppins', sans-serif; } .ph-slabel { font-size: 11px; font-weight: 700; color: #6b7280; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; font-family: 'Asap Condensed', sans-serif; } /* Grille activités */ .ph-agrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 18px; } @media (max-width: 700px) { .ph-agrid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 14px; } } .ph-acard { border: 2px solid #e0ecef; border-radius: 14px; padding: 16px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; } .ph-acard:hover { background: #f0f8fa; border-color: #3A6F7E; } .ph-acard.sel { border-color: #3A6F7E; background: #f0f8fa; } @media (max-width: 700px) { .ph-acard { padding: 20px 10px; } } .ph-aico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 26px; } @media (max-width: 700px) { .ph-aico { width: 52px; height: 52px; font-size: 30px; } } .ph-albl { font-size: 13px; font-weight: 700; color: #004559; text-align: center; font-family: 'Asap Condensed', 'Poppins', sans-serif; letter-spacing: .3px; text-transform: uppercase; } @media (max-width: 700px) { .ph-albl { font-size: 15px; } } /* Calendrier */ .ph-chead { display: flex; align-items: center; justify-content: space-between; padding: 0 18px 8px; } @media (max-width: 700px) { .ph-chead { padding: 0 14px 8px; } } .ph-cmonth { font-size: 15px; font-weight: 700; color: #004559; font-family: 'Poppins', sans-serif; } .ph-cnav { display: flex; gap: 6px; } .ph-cnav button { width: 28px; height: 28px; background: #f0f8fa; border: 1.5px solid #d0dfe3; border-radius: 8px; cursor: pointer; color: #004559; display: flex; align-items: center; justify-content: center; } .ph-cnav button:hover { background: #e0ecef; } .ph-cdh { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 18px; margin-bottom: 2px; } @media (max-width: 700px) { .ph-cdh { padding: 0 14px; } } .ph-cdh span { font-size: 10px; font-weight: 600; color: #9ca3af; text-align: center; text-transform: uppercase; font-family: 'Poppins', sans-serif; } .ph-cgrid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 18px; gap: 1px; } @media (max-width: 700px) { .ph-cgrid { padding: 0 14px; } } .ph-cday { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; border-radius: 50%; cursor: pointer; color: #004559; position: relative; z-index: 1; user-select: none; font-family: 'Poppins', sans-serif; min-height: 32px; } @media (max-width: 700px) { .ph-cday { font-size: 13px; min-height: 28px; } } .ph-cday:hover:not(.emp):not(.past) { background: #e8f4f7; } .ph-cday.emp { pointer-events: none; } .ph-cday.past { color: #d1d5db; pointer-events: none; } .ph-cday.range-start { background: #3A6F7E; color: #fff; border-radius: 50%; } .ph-cday.range-end { background: #3A6F7E; color: #fff; border-radius: 50%; } .ph-cday.ctoday:not(.range-start):not(.range-end) { color: #FF8000; font-weight: 700; } .ph-cday.in-range { background: #d0e8ed; color: #004559; border-radius: 0; } .ph-cday.range-start.in-range { border-radius: 50% 0 0 50%; } .ph-cday.range-end.in-range { border-radius: 0 50% 50% 0; } .ph-range-info { text-align: center; font-size: 12px; color: #3A6F7E; font-weight: 600; padding: 6px 18px 0; min-height: 20px; font-family: 'Poppins', sans-serif; } @media (max-width: 700px) { .ph-range-info { font-size: 13px; padding: 6px 14px 0; } } .ph-shortcuts { display: flex; gap: 6px; padding: 8px 18px 0; flex-wrap: wrap; } @media (max-width: 700px) { .ph-shortcuts { padding: 8px 14px 0; } } .ph-sc { padding: 5px 12px; border-radius: 8px; border: 1.5px solid #d0dfe3; background: #f0f8fa; font-size: 11px; font-weight: 600; color: #004559; cursor: pointer; font-family: 'Asap Condensed', 'Poppins', sans-serif; text-transform: uppercase; letter-spacing: .3px; transition: background .15s, border-color .15s; } .ph-sc:hover { background: #e0ecef; border-color: #3A6F7E; } .ph-sc.on { background: #3A6F7E; color: #fff; border-color: #3A6F7E; } @media (max-width: 700px) { .ph-sc { font-size: 12px; padding: 7px 14px; } } .ph-apply { margin: 10px 18px 0; width: calc(100% - 36px); background: #FF8000; color: #fff; border: none; border-radius: 12px; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: .5px; display: block; font-family: 'Asap Condensed', 'Poppins', sans-serif; transition: background .2s; } @media (max-width: 700px) { .ph-apply { margin: 10px 14px 0; width: calc(100% - 28px); padding: 13px; font-size: 15px; } } .ph-apply:hover { background: #e06210; }