/* ===================================================================== HAYTAMBATRA — Style portail public Les couleurs proviennent du back-end via les variables CSS injectées dans le (voir includes/header_public.php). ===================================================================== */ :root{ --c-primary:#1f6f4b; --c-secondary:#0f4c75; --c-accent:#e08a3c; --c-dark:#16241f; --c-bg:#f7f5ef; --radius:14px; --gap:14px; --shadow:0 6px 24px rgba(20,36,31,.10); --shadow-lg:0 16px 48px rgba(20,36,31,.18); --maxw:1320px; --font-display:"Fraunces",Georgia,"Times New Roman",serif; --font-body:"Public Sans",-apple-system,"Segoe UI",Roboto,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--font-body); color:#1c2622; background:var(--c-bg); -webkit-font-smoothing:antialiased; line-height:1.55; } img{max-width:100%; display:block} a{color:var(--c-secondary); text-decoration:none} a:hover{text-decoration:underline} /* ---------- HEADER FIXE ---------- */ .site-header{ position:sticky; top:0; z-index:50; background:var(--c-dark); color:#fff; box-shadow:0 2px 14px rgba(0,0,0,.25); } .header-top{ max-width:var(--maxw); margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .brand{display:flex; align-items:center; gap:14px; min-width:0} .brand img{height:48px; width:auto; background:transparent} .brand-titles{line-height:1.15} .brand-titles .t1{ font-family:var(--font-display); font-weight:600; font-size:1.18rem; letter-spacing:.2px; } .brand-titles .t2{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; color:var(--c-accent); letter-spacing:.5px; } .header-tools{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap} /* Recherche */ .search-box{display:flex; align-items:center; background:#fff; border-radius:999px; overflow:hidden} .search-box input{ border:0; padding:9px 14px; font-size:.92rem; width:230px; max-width:46vw; outline:none; font-family:inherit; } .search-box button{ border:0; background:var(--c-primary); color:#fff; padding:0 16px; cursor:pointer; align-self:stretch; font-weight:600; } .search-box button:hover{filter:brightness(1.08)} /* Sélecteur de langue */ .lang-switch a{ color:#fff; opacity:.65; padding:4px 7px; font-weight:700; font-size:.82rem; border-radius:6px; } .lang-switch a.active{opacity:1; background:rgba(255,255,255,.16)} .lang-switch a:hover{opacity:1; text-decoration:none} /* Barre de filtres multicritères */ .filter-bar{ background:rgba(255,255,255,.06); border-top:1px solid rgba(255,255,255,.10); } .filter-bar form{ max-width:var(--maxw); margin:0 auto; padding:10px 20px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .filter-bar select{ background:#fff; border:0; border-radius:8px; padding:7px 10px; font-size:.85rem; font-family:inherit; color:#1c2622; cursor:pointer; min-width:130px; } .filter-bar .btn-mini{ background:var(--c-accent); color:#fff; border:0; border-radius:8px; padding:7px 14px; cursor:pointer; font-weight:600; font-size:.85rem; } .filter-bar .btn-reset{background:transparent; color:#fff; opacity:.8; text-decoration:underline} /* ---------- NUAGE DE MOTS-CLÉS ---------- */ .kw-cloud{ max-width:var(--maxw); margin:18px auto 0; padding:0 20px; display:flex; flex-wrap:wrap; gap:8px; } .kw-cloud .chip{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #e3ddcf; border-radius:999px; padding:5px 12px; font-size:.86rem; color:#3a463f; box-shadow:var(--shadow); } .kw-cloud .chip:hover{border-color:var(--c-primary); text-decoration:none; transform:translateY(-1px)} .kw-cloud .chip .n{ background:var(--c-primary); color:#fff; border-radius:999px; font-size:.72rem; font-weight:700; padding:1px 7px; min-width:20px; text-align:center; } /* ---------- TITRE DE SECTION ---------- */ .section-head{ max-width:var(--maxw); margin:26px auto 14px; padding:0 20px; display:flex; align-items:baseline; gap:14px; } .section-head h2{ font-family:var(--font-display); font-weight:600; font-size:1.6rem; margin:0; color:var(--c-dark); } .section-head .count{color:#8a8475; font-size:.9rem} /* ---------- BENTO GRID ---------- */ .bento{ max-width:var(--maxw); margin:0 auto 40px; padding:0 20px; display:grid; grid-template-columns:repeat(5,1fr); gap:var(--gap); grid-auto-flow:dense; } /* Première carte mise en avant (effet bento) */ .bento .card:first-child{grid-column:span 2; grid-row:span 2} .card{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--c-dark); box-shadow:var(--shadow); aspect-ratio:595/842; transition:transform .25s, box-shadow .25s; isolation:isolate; } .card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)} .card a.card-link{position:absolute; inset:0; z-index:3} .card .cover{width:100%; height:100%; object-fit:cover; transition:transform .4s} .card:hover .cover{transform:scale(1.05)} .card .placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--c-primary),var(--c-secondary)); color:#fff; font-family:var(--font-display); font-size:1.1rem; padding:18px; text-align:center; } /* Titre superposé en bas, fond transparent sombre */ .card .overlay{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:30px 14px 12px; background:linear-gradient(to top,rgba(8,14,11,.92) 10%,rgba(8,14,11,.55) 55%,transparent); color:#fff; } .card .overlay .title{ font-family:var(--font-display); font-weight:600; font-size:1rem; line-height:1.25; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .card .badges{position:absolute; top:10px; left:10px; z-index:2; display:flex; gap:6px; flex-wrap:wrap} .badge{ font-size:.66rem; font-weight:700; letter-spacing:.3px; text-transform:uppercase; padding:3px 8px; border-radius:6px; color:#fff; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); } .badge.type{background:var(--c-accent)} .badge.st-draft{background:#9aa0a6} .badge.st-relu{background:var(--c-secondary)} .badge.st-final{background:var(--c-primary)} .card .rating-mini{ position:absolute; top:10px; right:10px; z-index:2; background:rgba(0,0,0,.55); color:#ffd166; font-size:.72rem; font-weight:700; padding:3px 8px; border-radius:6px; backdrop-filter:blur(3px); } /* ---------- PAGE DÉTAIL ---------- */ .detail{max-width:1080px; margin:26px auto 50px; padding:0 20px} .detail .back{display:inline-block; margin-bottom:14px; font-weight:600} .detail .layout{display:grid; grid-template-columns:300px 1fr; gap:34px; align-items:start} .detail .cover-wrap{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg)} .detail h1{font-family:var(--font-display); font-weight:600; font-size:2rem; line-height:1.15; margin:0 0 6px; color:var(--c-dark)} .detail .theme{color:var(--c-secondary); font-size:1.05rem; font-weight:600; margin:0 0 18px} .detail .meta{display:flex; flex-wrap:wrap; gap:10px 22px; margin:16px 0; font-size:.92rem} .detail .meta b{color:#5a6660; font-weight:600; margin-right:5px} .detail .summary{font-size:1.04rem; line-height:1.7; margin:18px 0} .detail .kw{display:flex; gap:7px; flex-wrap:wrap; margin:14px 0} .detail .kw a{background:#fff; border:1px solid #e3ddcf; border-radius:999px; padding:4px 11px; font-size:.84rem; color:#3a463f} .detail .viewer{margin:26px 0} .embed{position:relative; padding-bottom:56.25%; height:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)} .embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0} .detail .downloads{display:flex; gap:12px; flex-wrap:wrap; margin:22px 0} .btn{ display:inline-flex; align-items:center; gap:8px; background:var(--c-primary); color:#fff; padding:11px 20px; border-radius:10px; font-weight:600; border:0; cursor:pointer; font-size:.95rem; } .btn:hover{filter:brightness(1.08); text-decoration:none} .btn.secondary{background:var(--c-secondary)} .btn.ghost{background:#fff; color:var(--c-dark); border:1px solid #d9d3c4} .stars{color:#e6b400; font-size:1.15rem; letter-spacing:1px} .stars .empty{color:#d8d2c4} /* ---------- FOOTER ---------- */ .site-footer{background:var(--c-dark); color:#cdd6d1; margin-top:30px} .footer-inner{max-width:var(--maxw); margin:0 auto; padding:30px 20px; display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between} .footer-funding .label{font-size:.85rem; text-transform:uppercase; letter-spacing:.6px; opacity:.7; margin-bottom:12px} .footer-logos{display:flex; gap:18px; flex-wrap:wrap; align-items:center} .footer-logos img{height:46px; width:auto; background:rgba(255,255,255,.92); padding:6px 10px; border-radius:8px} .footer-contact{font-size:.92rem; line-height:1.9} .footer-contact a{color:#fff} .footer-bottom{border-top:1px solid rgba(255,255,255,.12); text-align:center; padding:12px; font-size:.82rem; opacity:.65} /* ---------- RESPONSIVE ---------- */ @media (max-width:1100px){ .bento{grid-template-columns:repeat(4,1fr)} } @media (max-width:900px){ .bento{grid-template-columns:repeat(3,1fr)} .detail .layout{grid-template-columns:1fr} .detail .cover-wrap{max-width:280px} } @media (max-width:640px){ .bento{grid-template-columns:repeat(2,1fr)} .bento .card:first-child{grid-column:span 2; grid-row:span 1} .header-tools{width:100%; margin-left:0} .search-box{flex:1} .search-box input{width:100%; max-width:none} .brand-titles .t2{font-size:1.25rem} .filter-bar select{flex:1 1 40%; min-width:0} } @media (max-width:380px){ .bento{grid-template-columns:1fr} .bento .card:first-child{grid-column:span 1} }