/* home.css — CSS spécifique à la page d'accueil (front-page.php). Extrait de style.css (bloc "SECTIONS HOMEPAGE", lignes 445-4161). Chargé UNIQUEMENT sur l'accueil via functions.php (is_front_page()). Les variables de marque restent dans style.css, chargé avant. */ /* ========================================================= SECTIONS HOMEPAGE (design d'origine, header/footer/outils exclus) ========================================================= */ /* ========================================================= HERO BLOG FINAL — PRO OCCASION RAYONNAGE Compatible avec le nouveau HTML hero Préfixe : porhero- ========================================================= */ body.porhero-body-lock{ overflow:hidden !important; } .porhero-section, .porhero-section *{ box-sizing:border-box; } .porhero-section{ width:100vw !important; margin-left:calc(50% - 50vw) !important; position:relative !important; overflow:visible !important; font-family:Roboto, Arial, sans-serif !important; color:#ffffff !important; /* Le fond du hero (élément LCP) n'est PLUS déclaré ici : il est injecté en ligne dans le par functions.php, en data-URI WebP 256x115. Motif : cette feuille est la 11e de la page ; tant que le fond vivait ici, l'image LCP n'était découverte qu'après ~302 Ko de CSS et ne pouvait pas recevoir fetchpriority. Ne pas réintroduire d'url() ici. */ background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important; } .porhero-section::before{ content:""; position:absolute; inset:0; z-index:1; background: radial-gradient(circle at 54% 42%, rgba(230,49,51,.12), transparent 30%), linear-gradient( 90deg, rgba(8,36,68,.46) 0%, rgba(16,88,149,.32) 45%, rgba(18,28,54,.42) 100% ); pointer-events:none; } .porhero-section::after{ content:""; position:absolute; inset:0; z-index:1; background:rgba(16,88,149,.04); pointer-events:none; } /* ========================================================= STRUCTURE DESKTOP ========================================================= */ .porhero-container{ width:min(1360px, calc(100% - 56px)) !important; margin:0 auto !important; min-height:760px !important; position:relative !important; z-index:2 !important; display:grid !important; grid-template-columns:minmax(0, 1fr) 500px !important; align-items:start !important; gap:64px !important; padding:70px 0 235px !important; } .porhero-content{ max-width:780px !important; position:static !important; z-index:auto !important; } .porhero-kicker{ display:inline-flex !important; align-items:center !important; gap:10px !important; padding:10px 16px !important; border-radius:999px !important; background:rgba(255,255,255,.96) !important; color:#105895 !important; font-size:13px !important; font-weight:950 !important; line-height:1.2 !important; box-shadow:0 14px 30px rgba(0,0,0,.15) !important; margin:0 0 28px !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .porhero-kicker::before{ content:""; width:10px; height:10px; border-radius:999px; background:#e63133; display:block; flex-shrink:0; box-shadow:0 0 0 5px rgba(230,49,51,.12); } .porhero-content h1{ margin:0 !important; max-width:820px !important; color:#ffffff !important; font-size:clamp(48px, 5.4vw, 80px) !important; line-height:.94 !important; letter-spacing:-.055em !important; font-weight:950 !important; text-shadow:0 10px 28px rgba(0,0,0,.25) !important; } .porhero-intro{ margin:28px 0 0 !important; max-width:760px !important; color:#ffffff !important; font-size:18px !important; line-height:1.72 !important; font-weight:700 !important; text-shadow:0 5px 18px rgba(0,0,0,.30) !important; } /* ========================================================= BOUTONS DESKTOP ========================================================= */ .porhero-main-actions{ display:flex !important; flex-wrap:wrap !important; gap:16px !important; margin-top:34px !important; position:static !important; z-index:auto !important; } .porhero-btn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:56px !important; padding:16px 26px !important; border-radius:14px !important; font-size:15px !important; font-weight:950 !important; text-decoration:none !important; border:0 !important; cursor:pointer !important; font-family:inherit !important; transition: transform .24s ease, box-shadow .24s ease, background-color .24s ease, color .24s ease !important; } .porhero-btn-red{ background:#e63133 !important; color:#ffffff !important; box-shadow: 0 16px 34px rgba(230,49,51,.34), inset 0 1px 0 rgba(255,255,255,.18) !important; } .porhero-btn-red:hover, .porhero-need-dropdown:hover .porhero-btn-red, .porhero-need-dropdown:focus-within .porhero-btn-red{ background:#c91f21 !important; color:#ffffff !important; transform:translateY(-3px) !important; box-shadow: 0 22px 42px rgba(230,49,51,.42), inset 0 1px 0 rgba(255,255,255,.18) !important; } .porhero-btn-label{ display:inline-block !important; } .porhero-btn-arrow{ display:inline-flex !important; align-items:center !important; justify-content:center !important; margin-left:14px !important; font-size:24px !important; line-height:1 !important; font-weight:950 !important; transform:rotate(0deg) !important; transition:transform .22s ease !important; } .porhero-need-dropdown:hover .porhero-btn-arrow, .porhero-need-dropdown:focus-within .porhero-btn-arrow{ transform:rotate(90deg) !important; } .porhero-btn-blue{ background:rgba(16,88,149,.92) !important; color:#ffffff !important; border:1px solid rgba(255,255,255,.20) !important; box-shadow: 0 16px 34px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.14) !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .porhero-btn-blue:hover{ background:#0d416e !important; color:#ffffff !important; transform:translateY(-3px) !important; } .porhero-btn-blue::after{ content:"→"; margin-left:12px; font-size:18px; } /* ========================================================= DESKTOP — PANNEAU DES 8 BESOINS EN BAS DU HERO ========================================================= */ .porhero-need-dropdown{ position:static !important; display:inline-flex !important; } .porhero-needs-panel{ position:absolute !important; left:0 !important; right:0 !important; top:auto !important; bottom:38px !important; width:100% !important; max-width:none !important; display:grid !important; grid-template-columns:repeat(8, minmax(0, 1fr)) !important; gap:14px !important; padding:16px !important; border-radius:30px !important; background:rgba(255,255,255,.78) !important; border:1px solid rgba(255,255,255,.62) !important; box-shadow: 0 30px 80px rgba(15,23,42,.25), inset 0 1px 0 rgba(255,255,255,.70) !important; backdrop-filter:blur(18px) saturate(150%) !important; -webkit-backdrop-filter:blur(18px) saturate(150%) !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transform:translateY(16px) scale(.985) !important; transition: opacity .24s ease, visibility .24s ease, transform .24s ease !important; z-index:80 !important; } .porhero-needs-panel::before{ content:"" !important; position:absolute !important; left:0 !important; right:0 !important; top:-230px !important; height:230px !important; } .porhero-need-dropdown:hover .porhero-needs-panel, .porhero-need-dropdown:focus-within .porhero-needs-panel{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateY(0) scale(1) !important; } /* ========================================================= CARTES DESKTOP DES 8 BESOINS ========================================================= */ .porhero-need-card{ min-height:158px !important; padding:18px 12px 16px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; text-align:center !important; color:#101828 !important; text-decoration:none !important; border-radius:20px !important; background:rgba(255,255,255,.92) !important; border:1px solid rgba(226,232,240,.96) !important; position:relative !important; overflow:hidden !important; box-shadow:0 10px 22px rgba(16,88,149,.07) !important; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background-color .24s ease !important; } .porhero-need-card::before{ content:"" !important; position:absolute !important; inset:0 !important; background:linear-gradient( 135deg, rgba(255,255,255,.44), rgba(255,255,255,0) ) !important; pointer-events:none !important; } .porhero-need-card::after{ content:"" !important; position:absolute !important; left:16px !important; right:16px !important; bottom:0 !important; height:4px !important; border-radius:999px 999px 0 0 !important; background:transparent !important; transition:.24s ease !important; } .porhero-need-card:hover{ transform:translateY(-7px) !important; background:rgba(255,255,255,.98) !important; border-color:rgba(230,49,51,.35) !important; box-shadow: 0 22px 45px rgba(16,88,149,.18), 0 8px 18px rgba(230,49,51,.10) !important; z-index:2 !important; } .porhero-need-card:hover::after{ background:#e63133 !important; } .porhero-need-icon{ width:46px !important; height:46px !important; border-radius:15px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; color:#ffffff !important; margin-bottom:12px !important; box-shadow: 0 10px 22px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.20) !important; flex-shrink:0 !important; position:relative !important; z-index:2 !important; } .porhero-need-icon svg{ width:24px !important; height:24px !important; display:block !important; stroke:#ffffff !important; fill:none !important; stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } .porhero-blue-icon{ background:linear-gradient(135deg, #105895, #0d416e) !important; } .porhero-red-icon{ background:linear-gradient(135deg, #e63133, #c91f21) !important; } .porhero-need-card strong{ display:block !important; color:#101828 !important; font-size:13px !important; line-height:1.18 !important; font-weight:950 !important; max-width:150px !important; margin:0 auto 7px !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; position:relative !important; z-index:2 !important; } .porhero-need-card em{ display:block !important; color:#8a94a6 !important; font-size:12px !important; line-height:1.18 !important; font-style:normal !important; font-weight:750 !important; max-width:150px !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; position:relative !important; z-index:2 !important; } /* ========================================================= VISUEL DROITE DESKTOP ========================================================= */ .porhero-visual{ display:flex !important; justify-content:center !important; align-items:flex-start !important; min-width:0 !important; position:relative !important; z-index:30 !important; } .porhero-panel{ width:min(500px, 100%) !important; background:rgba(255,255,255,.90) !important; border-radius:30px !important; padding:24px !important; color:#101828 !important; position:relative !important; z-index:30 !important; box-shadow: 0 30px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.60) !important; border:1px solid rgba(255,255,255,.62) !important; margin-top:0 !important; backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); } .porhero-panel-top{ display:flex !important; justify-content:flex-end !important; gap:8px !important; margin-bottom:18px !important; } .porhero-dot{ width:10px !important; height:10px !important; border-radius:999px !important; display:block !important; } .porhero-dot-red{ background:#e63133 !important; } .porhero-dot-yellow{ background:#f1d030 !important; } .porhero-dot-blue{ background:#105895 !important; } .porhero-panel-label{ position:absolute !important; top:28px !important; left:-14px !important; display:inline-flex !important; align-items:center !important; min-height:38px !important; padding:9px 16px !important; border-radius:999px !important; background:#f1d030 !important; color:#000000 !important; font-size:12px !important; font-weight:950 !important; box-shadow:0 14px 28px rgba(0,0,0,.16) !important; } .porhero-rack-scene{ display:grid !important; grid-template-columns:repeat(3, 1fr) !important; gap:18px !important; padding:26px 16px 22px !important; background:rgba(238,242,246,.92) !important; border-radius:22px !important; border:1px solid rgba(221,229,238,.92) !important; } .porhero-rack{ min-height:178px !important; border-left:8px solid #105895 !important; border-right:8px solid #105895 !important; position:relative !important; display:flex !important; flex-direction:column !important; justify-content:space-around !important; padding:18px 0 !important; } .porhero-rack::before, .porhero-rack::after{ content:"" !important; position:absolute !important; left:-8px !important; right:-8px !important; height:8px !important; background:#105895 !important; border-radius:999px !important; } .porhero-rack::before{ top:0 !important; } .porhero-rack::after{ bottom:0 !important; } .porhero-rack span{ display:block !important; height:8px !important; background:#105895 !important; border-radius:999px !important; } .porhero-rack-active span:nth-child(2){ background:#e63133 !important; } .porhero-mini-card{ margin-top:18px !important; padding:17px !important; border-radius:18px !important; background:rgba(255,255,255,.94) !important; border:1px solid rgba(230,235,241,.95) !important; box-shadow:0 14px 28px rgba(16,88,149,.10) !important; } .porhero-mini-card strong{ display:block !important; color:#105895 !important; font-size:18px !important; font-weight:950 !important; margin-bottom:6px !important; } .porhero-mini-card p{ margin:0 !important; color:#667085 !important; font-size:14px !important; line-height:1.5 !important; } /* ========================================================= MOBILE DRAWER — CACHÉ PAR DÉFAUT SUR ORDINATEUR ========================================================= */ .porhero-mobile-drawer, .porhero-mobile-drawer-head, .porhero-mobile-drawer-list, .porhero-mobile-menu-footer, .porhero-mobile-close{ display:none !important; } /* ========================================================= TABLETTE ========================================================= */ @media (max-width: 1220px) and (min-width: 761px){ .porhero-container{ grid-template-columns:1fr !important; gap:42px !important; min-height:auto !important; padding:68px 0 300px !important; } .porhero-visual{ justify-content:flex-start !important; } .porhero-panel{ width:min(620px, 100%) !important; } .porhero-needs-panel{ bottom:38px !important; grid-template-columns:repeat(4, minmax(0, 1fr)) !important; } .porhero-need-card{ min-height:145px !important; } } /* ========================================================= MOBILE — STRUCTURE HERO ========================================================= */ @media (max-width: 760px){ .porhero-section{ overflow:hidden !important; } .porhero-container{ width:100% !important; max-width:100% !important; min-height:auto !important; display:flex !important; flex-direction:column !important; gap:0 !important; padding:50px 34px 64px !important; margin:0 !important; } .porhero-content{ display:contents !important; } .porhero-kicker{ order:1 !important; width:fit-content !important; max-width:100% !important; margin:0 0 20px !important; padding:10px 14px !important; font-size:11.5px !important; line-height:1.35 !important; border-radius:999px !important; } .porhero-content h1{ order:2 !important; margin:0 !important; max-width:100% !important; font-size:clamp(38px, 11vw, 54px) !important; line-height:.98 !important; letter-spacing:-.045em !important; } .porhero-intro{ order:3 !important; margin:24px 0 0 !important; max-width:100% !important; font-size:16px !important; line-height:1.72 !important; font-weight:650 !important; } .porhero-visual{ order:4 !important; width:100% !important; margin:42px 0 0 !important; display:flex !important; justify-content:flex-start !important; align-items:flex-start !important; position:relative !important; z-index:1 !important; } .porhero-panel{ width:100% !important; max-width:none !important; margin:0 !important; padding:18px !important; border-radius:24px !important; position:relative !important; z-index:1 !important; } .porhero-panel-label{ top:-15px !important; left:20px !important; min-height:34px !important; padding:8px 14px !important; font-size:11px !important; border-radius:999px !important; } .porhero-panel-top{ margin-bottom:16px !important; } .porhero-rack-scene{ grid-template-columns:repeat(3, 1fr) !important; gap:10px !important; padding:24px 12px 18px !important; border-radius:18px !important; } .porhero-rack{ min-height:112px !important; border-left-width:6px !important; border-right-width:6px !important; } .porhero-rack::before, .porhero-rack::after{ left:-6px !important; right:-6px !important; height:6px !important; } .porhero-rack span{ height:6px !important; } .porhero-mini-card{ margin-top:16px !important; padding:17px !important; border-radius:17px !important; } .porhero-mini-card strong{ font-size:15.5px !important; line-height:1.3 !important; } .porhero-mini-card p{ font-size:13px !important; line-height:1.48 !important; } .porhero-main-actions{ order:5 !important; width:100% !important; display:grid !important; grid-template-columns:1fr !important; gap:12px !important; margin:30px 0 0 !important; position:relative !important; z-index:200000 !important; } .porhero-btn{ width:100% !important; min-height:56px !important; padding:16px 22px !important; border-radius:999px !important; font-size:15px !important; } .porhero-btn-red{ background:#e63133 !important; color:#ffffff !important; } .porhero-btn-blue{ background:#105895 !important; color:#ffffff !important; } .porhero-btn-arrow{ transition:transform .22s ease !important; } .porhero-mobile-open .porhero-btn-arrow{ transform:rotate(90deg) !important; } /* Sur mobile, le méga menu desktop est complètement caché */ .porhero-needs-panel{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } /* ========================================================= MOBILE DRAWER — SLIDE DROITE ========================================================= */ .porhero-mobile-drawer{ display:block !important; position:fixed !important; top:8px !important; right:0 !important; bottom:auto !important; left:auto !important; width:min(88vw, 390px) !important; max-width:390px !important; height:calc(100dvh - 72px) !important; max-height:calc(100dvh - 72px) !important; margin:0 !important; padding:66px 12px 14px !important; border-radius:24px 0 0 24px !important; background: linear-gradient(180deg, rgba(255,255,255,.995), rgba(245,248,252,.995)) !important; border-left:1px solid rgba(220,228,238,.95) !important; box-shadow: -24px 0 70px rgba(15,23,42,.28), -999px 0 0 999px rgba(15,23,42,.54) !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transform:translateX(105%) !important; transition: opacity .25s ease, visibility .25s ease, transform .32s cubic-bezier(.22,.8,.24,1) !important; z-index:999999999 !important; backdrop-filter:blur(18px) saturate(150%) !important; -webkit-backdrop-filter:blur(18px) saturate(150%) !important; } .porhero-mobile-open .porhero-mobile-drawer{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateX(0) !important; } .porhero-mobile-open .porhero-btn-red{ opacity:0 !important; pointer-events:none !important; } .porhero-mobile-open .porhero-visual, .porhero-mobile-open .porhero-panel{ z-index:0 !important; } .porhero-mobile-drawer-head{ position:fixed !important; top:8px !important; right:0 !important; left:auto !important; width:min(88vw, 390px) !important; max-width:390px !important; height:58px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 58px 0 18px !important; background:#ffffff !important; color:#101828 !important; border-bottom:1px solid #e5ebf1 !important; border-radius:24px 0 0 0 !important; box-shadow:0 8px 18px rgba(15,23,42,.07) !important; z-index:1000000000 !important; } .porhero-mobile-drawer-head strong{ display:block !important; font-size:15.5px !important; font-weight:950 !important; letter-spacing:-.02em !important; color:#101828 !important; } .porhero-mobile-close{ position:fixed !important; top:18px !important; right:14px !important; width:38px !important; height:38px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 0 2px 0 !important; margin:0 !important; border-radius:13px !important; border:1px solid rgba(230,49,51,.26) !important; background:#fff7f7 !important; color:#e63133 !important; font-size:27px !important; font-weight:300 !important; line-height:1 !important; font-family:Arial, sans-serif !important; box-shadow:0 8px 16px rgba(230,49,51,.08) !important; cursor:pointer !important; z-index:1000000002 !important; } .porhero-mobile-close:hover{ background:#e63133 !important; color:#ffffff !important; } .porhero-mobile-drawer-list{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; align-content:start !important; } /* Cartes du drawer mobile */ .porhero-mobile-need-card{ min-height:58px !important; max-height:64px !important; display:grid !important; grid-template-columns:38px 1fr !important; grid-template-areas: "icon title" "icon subtitle" !important; column-gap:11px !important; align-items:center !important; text-align:left !important; padding:9px 11px !important; border-radius:15px !important; background:#ffffff !important; border:1px solid #e2eaf2 !important; color:#101828 !important; text-decoration:none !important; box-shadow: 0 7px 16px rgba(16,88,149,.06), inset 0 1px 0 rgba(255,255,255,.92) !important; overflow:hidden !important; transform:none !important; position:relative !important; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important; } .porhero-mobile-need-card:hover{ transform:none !important; background:#ffffff !important; border-color:rgba(230,49,51,.20) !important; } .porhero-mobile-need-card::after{ content:"" !important; position:absolute !important; top:10px !important; right:0 !important; bottom:10px !important; left:auto !important; width:3px !important; height:auto !important; border-radius:999px 0 0 999px !important; background:#e63133 !important; } .porhero-mobile-need-card .porhero-need-icon{ grid-area:icon !important; width:38px !important; height:38px !important; min-width:38px !important; margin:0 !important; border-radius:12px !important; } .porhero-mobile-need-card .porhero-need-icon svg{ width:19px !important; height:19px !important; } .porhero-mobile-need-card strong{ grid-area:title !important; margin:0 0 2px !important; max-width:none !important; color:#101828 !important; font-size:12.7px !important; line-height:1.1 !important; font-weight:950 !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; } .porhero-mobile-need-card em{ grid-area:subtitle !important; margin:0 !important; max-width:none !important; color:#8a94a6 !important; font-size:10.9px !important; line-height:1.1 !important; font-weight:750 !important; font-style:normal !important; display:block !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } /* Footer mobile drawer */ .porhero-mobile-menu-footer{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:0 !important; margin-top:12px !important; padding:14px 12px 8px !important; border-top:1px solid rgba(226,232,240,.92) !important; } .porhero-mobile-shop-link{ width:100% !important; min-height:46px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin-top:8px !important; margin-bottom:18px !important; padding:0 18px !important; border-radius:999px !important; background:#e63133 !important; color:#ffffff !important; font-size:14px !important; font-weight:950 !important; line-height:1 !important; text-decoration:none !important; box-shadow: 0 16px 32px rgba(230,49,51,.24), inset 0 1px 0 rgba(255,255,255,.18) !important; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease !important; } .porhero-mobile-shop-link:hover{ background:#c91f21 !important; color:#ffffff !important; transform:translateY(-2px) !important; box-shadow: 0 20px 38px rgba(230,49,51,.30), inset 0 1px 0 rgba(255,255,255,.18) !important; } .porhero-mobile-logo-link{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; margin-top:2px !important; padding:4px 0 2px !important; text-decoration:none !important; } .porhero-mobile-logo-link img{ display:block !important; width:min(310px, 94%) !important; max-width:310px !important; max-height:115px !important; height:auto !important; object-fit:contain !important; filter:drop-shadow(0 12px 20px rgba(15,23,42,.12)) !important; } } /* ========================================================= TRÈS PETITS TÉLÉPHONES ========================================================= */ @media (max-width: 390px){ .porhero-container{ padding-left:26px !important; padding-right:26px !important; } .porhero-content h1{ font-size:36px !important; } .porhero-intro{ font-size:15.5px !important; } .porhero-mobile-drawer{ width:min(90vw, 365px) !important; max-width:365px !important; height:calc(100dvh - 68px) !important; max-height:calc(100dvh - 68px) !important; padding:64px 10px 12px !important; } .porhero-mobile-drawer-head{ width:min(90vw, 365px) !important; max-width:365px !important; height:56px !important; } .porhero-mobile-drawer-head strong{ font-size:15px !important; } .porhero-mobile-close{ top:17px !important; right:12px !important; width:36px !important; height:36px !important; font-size:25px !important; } .porhero-mobile-drawer-list{ gap:7px !important; } .porhero-mobile-need-card{ min-height:56px !important; max-height:61px !important; grid-template-columns:36px 1fr !important; column-gap:10px !important; padding:8px 10px !important; border-radius:14px !important; } .porhero-mobile-need-card .porhero-need-icon{ width:36px !important; height:36px !important; min-width:36px !important; border-radius:11px !important; } .porhero-mobile-need-card .porhero-need-icon svg{ width:18px !important; height:18px !important; } .porhero-mobile-need-card strong{ font-size:12.2px !important; line-height:1.08 !important; } .porhero-mobile-need-card em{ font-size:10.7px !important; } .porhero-mobile-menu-footer{ margin-top:10px !important; padding:12px 10px 6px !important; } .porhero-mobile-shop-link{ min-height:44px !important; margin-top:6px !important; margin-bottom:16px !important; font-size:13.5px !important; } .porhero-mobile-logo-link{ margin-top:0 !important; padding:2px 0 0 !important; } .porhero-mobile-logo-link img{ width:min(290px, 94%) !important; max-width:290px !important; max-height:105px !important; } } /* ========================================================= SECTION — TROUVEZ LE BON CONTENU SELON VOTRE BESOIN Préfixe : porneed- ========================================================= */ .porneed-section, .porneed-section *{ box-sizing:border-box; } .porneed-section{ width:100vw !important; margin-left:calc(50% - 50vw) !important; position:relative !important; background:#f4f7fb !important; padding:86px 0 92px !important; overflow:hidden !important; font-family:Roboto, Arial, sans-serif !important; } .porneed-section::before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(16,88,149,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(16,88,149,.045) 1px, transparent 1px); background-size:34px 34px; pointer-events:none; } .porneed-section::after{ content:""; position:absolute; width:460px; height:460px; right:-160px; top:-180px; background:radial-gradient(circle, rgba(230,49,51,.13), transparent 68%); pointer-events:none; } .porneed-container{ width:min(1360px, calc(100% - 56px)) !important; margin:0 auto !important; position:relative !important; z-index:2 !important; } .porneed-head{ display:grid !important; grid-template-columns:minmax(0, 1fr) minmax(300px, 470px) !important; gap:44px !important; align-items:end !important; margin-bottom:36px !important; } .porneed-kicker, .porneed-small-kicker{ display:inline-flex !important; align-items:center !important; width:fit-content !important; padding:8px 13px !important; border-radius:999px !important; background:#ffffff !important; color:#e63133 !important; font-size:12px !important; font-weight:950 !important; text-transform:uppercase !important; letter-spacing:.08em !important; box-shadow:0 10px 24px rgba(16,88,149,.08) !important; } .porneed-head h2{ grid-column:1 !important; margin:14px 0 0 !important; max-width:760px !important; color:#07152b !important; font-size:clamp(34px, 3.5vw, 54px) !important; line-height:1.02 !important; letter-spacing:-.045em !important; font-weight:950 !important; } .porneed-head p{ grid-column:2 !important; grid-row:1 / span 2 !important; margin:0 !important; color:#526075 !important; font-size:16px !important; line-height:1.75 !important; font-weight:500 !important; } .porneed-grid{ display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)) !important; gap:20px !important; } .porneed-card{ min-height:270px !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; padding:26px !important; border-radius:26px !important; background:#ffffff !important; border:1px solid rgba(221,229,238,.96) !important; color:#101828 !important; text-decoration:none !important; position:relative !important; overflow:hidden !important; box-shadow:0 18px 44px rgba(16,88,149,.09) !important; transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease !important; } .porneed-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.44), rgba(255,255,255,0)); pointer-events:none; } .porneed-card::after{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:#105895; transition:.24s ease; } .porneed-card-red::after{ background:#e63133; } .porneed-card-yellow::after{ background:#f1d030; } .porneed-card:hover{ transform:translateY(-8px) !important; border-color:rgba(230,49,51,.26) !important; box-shadow: 0 26px 60px rgba(16,88,149,.15), 0 10px 24px rgba(230,49,51,.08) !important; } .porneed-icon{ width:54px !important; height:54px !important; border-radius:17px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin-bottom:22px !important; color:#ffffff !important; background:linear-gradient(135deg, #105895, #0d416e) !important; box-shadow:0 14px 26px rgba(16,88,149,.18) !important; position:relative !important; z-index:2 !important; } .porneed-card-red .porneed-icon{ background:linear-gradient(135deg, #e63133, #c91f21) !important; box-shadow:0 14px 26px rgba(230,49,51,.18) !important; } .porneed-card-yellow .porneed-icon{ background:linear-gradient(135deg, #f1d030, #e6b800) !important; color:#07152b !important; } .porneed-icon svg{ width:27px !important; height:27px !important; stroke:currentColor !important; fill:none !important; stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } .porneed-card strong{ display:block !important; color:#07152b !important; font-size:21px !important; line-height:1.16 !important; font-weight:950 !important; letter-spacing:-.02em !important; margin:0 0 12px !important; position:relative !important; z-index:2 !important; } .porneed-card em{ display:block !important; color:#5d6b82 !important; font-size:14px !important; line-height:1.55 !important; font-style:normal !important; font-weight:500 !important; margin-bottom:22px !important; position:relative !important; z-index:2 !important; } .porneed-link{ margin-top:auto !important; display:inline-flex !important; align-items:center !important; color:#105895 !important; font-size:14px !important; font-weight:950 !important; position:relative !important; z-index:2 !important; } .porneed-link::after{ content:"→"; margin-left:9px; transition:transform .2s ease; } .porneed-card:hover .porneed-link::after{ transform:translateX(4px); } .porneed-card-red .porneed-link{ color:#e63133 !important; } .porneed-card-yellow .porneed-link{ color:#07152b !important; } /* Bloc parcours conseillé */ .porneed-path{ margin-top:28px !important; padding:30px !important; border-radius:30px !important; background: linear-gradient(135deg, rgba(16,88,149,.96), rgba(13,65,110,.96)) !important; color:#ffffff !important; display:grid !important; grid-template-columns:minmax(0, 420px) 1fr !important; gap:32px !important; align-items:center !important; box-shadow:0 24px 60px rgba(16,88,149,.22) !important; position:relative !important; overflow:hidden !important; } .porneed-path::after{ content:""; position:absolute; width:260px; height:260px; right:-90px; bottom:-120px; background:radial-gradient(circle, rgba(241,208,48,.26), transparent 65%); } .porneed-path .porneed-small-kicker{ background:rgba(255,255,255,.12) !important; color:#ffffff !important; box-shadow:none !important; border:1px solid rgba(255,255,255,.18) !important; } .porneed-path h3{ margin:14px 0 10px !important; color:#ffffff !important; font-size:30px !important; line-height:1.08 !important; letter-spacing:-.035em !important; font-weight:950 !important; } .porneed-path p{ margin:0 !important; color:rgba(255,255,255,.84) !important; font-size:15px !important; line-height:1.65 !important; font-weight:500 !important; } .porneed-pills{ display:flex !important; flex-wrap:wrap !important; gap:12px !important; position:relative !important; z-index:2 !important; } .porneed-pills a{ display:inline-flex !important; align-items:center !important; min-height:44px !important; padding:12px 16px !important; border-radius:999px !important; background:rgba(255,255,255,.12) !important; color:#ffffff !important; border:1px solid rgba(255,255,255,.18) !important; text-decoration:none !important; font-size:14px !important; font-weight:850 !important; transition: background-color .2s ease, transform .2s ease !important; } .porneed-pills a:hover{ background:#e63133 !important; transform:translateY(-2px) !important; } /* Responsive */ @media (max-width: 1024px){ .porneed-section{ padding:70px 0 76px !important; } .porneed-head{ grid-template-columns:1fr !important; gap:18px !important; } .porneed-head p{ grid-column:auto !important; grid-row:auto !important; max-width:760px !important; } .porneed-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } .porneed-path{ grid-template-columns:1fr !important; } } @media (max-width: 640px){ .porneed-section{ padding:58px 0 64px !important; } .porneed-container{ width:100% !important; padding:0 24px !important; } .porneed-head{ margin-bottom:26px !important; } .porneed-head h2{ font-size:34px !important; } .porneed-head p{ font-size:15px !important; line-height:1.65 !important; } .porneed-grid{ grid-template-columns:1fr !important; gap:14px !important; } .porneed-card{ min-height:auto !important; padding:22px !important; border-radius:22px !important; } .porneed-icon{ width:50px !important; height:50px !important; margin-bottom:18px !important; } .porneed-card strong{ font-size:19px !important; } .porneed-path{ margin-top:18px !important; padding:24px !important; border-radius:24px !important; } .porneed-path h3{ font-size:25px !important; } .porneed-pills{ gap:9px !important; } .porneed-pills a{ min-height:40px !important; padding:10px 13px !important; font-size:13px !important; } } /* ========================================================= SECTION — NOS DERNIÈRES SORTIES Préfixe : pornews- ========================================================= */ .pornews-section, .pornews-section *{ box-sizing:border-box; } .pornews-section{ width:100vw !important; margin-left:calc(50% - 50vw) !important; position:relative !important; background:#ffffff !important; padding:90px 0 96px !important; overflow:hidden !important; font-family:Roboto, Arial, sans-serif !important; } .pornews-section::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 14% 18%, rgba(16,88,149,.08), transparent 30%), radial-gradient(circle at 86% 10%, rgba(230,49,51,.08), transparent 28%); pointer-events:none; } .pornews-container{ width:min(1360px, calc(100% - 56px)) !important; margin:0 auto !important; position:relative !important; z-index:2 !important; } /* HEADER SECTION */ .pornews-head{ display:grid !important; grid-template-columns:minmax(0, 1fr) minmax(300px, 500px) !important; gap:48px !important; align-items:end !important; margin-bottom:38px !important; } .pornews-kicker{ display:inline-flex !important; align-items:center !important; width:fit-content !important; padding:8px 13px !important; border-radius:999px !important; background:#fff5f5 !important; color:#e63133 !important; font-size:12px !important; font-weight:950 !important; text-transform:uppercase !important; letter-spacing:.08em !important; border:1px solid rgba(230,49,51,.12) !important; } .pornews-head h2{ margin:14px 0 0 !important; color:#07152b !important; font-size:clamp(34px, 3.5vw, 56px) !important; line-height:1.02 !important; letter-spacing:-.045em !important; font-weight:950 !important; } .pornews-head p{ margin:0 !important; color:#526075 !important; font-size:16px !important; line-height:1.75 !important; font-weight:500 !important; } /* LAYOUT */ .pornews-layout{ display:grid !important; grid-template-columns:minmax(0, 1.1fr) minmax(420px, .9fr) !important; gap:24px !important; align-items:stretch !important; } /* ARTICLE PRINCIPAL */ .pornews-featured{ margin:0 !important; } .pornews-featured-link{ min-height:100% !important; display:grid !important; grid-template-rows:330px 1fr !important; background:#ffffff !important; border:1px solid rgba(221,229,238,.96) !important; border-radius:32px !important; overflow:hidden !important; text-decoration:none !important; color:#101828 !important; box-shadow:0 24px 64px rgba(16,88,149,.12) !important; transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease !important; } .pornews-featured-link:hover{ transform:translateY(-8px) !important; border-color:rgba(230,49,51,.24) !important; box-shadow: 0 34px 80px rgba(16,88,149,.18), 0 12px 28px rgba(230,49,51,.08) !important; } .pornews-visual{ position:relative !important; min-height:330px !important; overflow:hidden !important; display:flex !important; align-items:center !important; justify-content:center !important; background: linear-gradient(135deg, rgba(16,88,149,.98), rgba(13,65,110,.96)) !important; } .pornews-visual::before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size:32px 32px; opacity:.42; } .pornews-visual::after{ content:""; position:absolute; width:320px; height:320px; right:-120px; bottom:-140px; background:radial-gradient(circle, rgba(230,49,51,.35), transparent 68%); } .pornews-visual-label{ position:absolute !important; left:24px !important; top:24px !important; z-index:3 !important; display:inline-flex !important; align-items:center !important; min-height:36px !important; padding:8px 14px !important; border-radius:999px !important; background:#f1d030 !important; color:#07152b !important; font-size:12px !important; font-weight:950 !important; box-shadow:0 12px 26px rgba(0,0,0,.14) !important; } .pornews-rack-illustration{ width:min(360px, 70%) !important; height:210px !important; position:relative !important; z-index:2 !important; border-left:12px solid #ffffff !important; border-right:12px solid #ffffff !important; display:flex !important; flex-direction:column !important; justify-content:space-around !important; padding:24px 0 !important; opacity:.95 !important; } .pornews-rack-illustration::before, .pornews-rack-illustration::after{ content:""; position:absolute; left:-12px; right:-12px; height:12px; background:#ffffff; border-radius:999px; } .pornews-rack-illustration::before{ top:0; } .pornews-rack-illustration::after{ bottom:0; } .pornews-rack-illustration span{ display:block !important; height:12px !important; border-radius:999px !important; background:#ffffff !important; } .pornews-rack-illustration span:nth-child(2){ background:#e63133 !important; } .pornews-featured-content{ padding:30px !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; } .pornews-meta{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:10px !important; margin-bottom:16px !important; } .pornews-pill{ display:inline-flex !important; align-items:center !important; min-height:30px !important; padding:7px 11px !important; border-radius:999px !important; font-size:11px !important; line-height:1 !important; font-weight:950 !important; text-transform:uppercase !important; letter-spacing:.045em !important; } .pornews-pill-blue{ background:#edf6ff !important; color:#105895 !important; } .pornews-pill-red{ background:#fff2f2 !important; color:#e63133 !important; } .pornews-pill-yellow{ background:#fff8d6 !important; color:#7a6200 !important; } .pornews-meta time{ color:#7a8699 !important; font-size:13px !important; font-weight:800 !important; } .pornews-featured-content h3{ margin:0 !important; color:#07152b !important; font-size:clamp(26px, 2.2vw, 36px) !important; line-height:1.08 !important; letter-spacing:-.035em !important; font-weight:950 !important; } .pornews-featured-content p{ margin:18px 0 26px !important; color:#5d6b82 !important; font-size:16px !important; line-height:1.65 !important; font-weight:500 !important; } .pornews-readmore{ margin-top:auto !important; display:inline-flex !important; align-items:center !important; color:#e63133 !important; font-size:15px !important; font-weight:950 !important; } .pornews-readmore::after{ content:"→"; margin-left:10px; transition:transform .2s ease; } .pornews-featured-link:hover .pornews-readmore::after{ transform:translateX(5px); } /* LISTE ARTICLES */ .pornews-list{ display:grid !important; grid-template-columns:1fr !important; gap:16px !important; } .pornews-card{ margin:0 !important; } .pornews-card a{ min-height:152px !important; display:grid !important; grid-template-columns:132px 1fr !important; gap:0 !important; background:#ffffff !important; border:1px solid rgba(221,229,238,.96) !important; border-radius:26px !important; overflow:hidden !important; text-decoration:none !important; color:#101828 !important; box-shadow:0 14px 34px rgba(16,88,149,.08) !important; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important; } .pornews-card a:hover{ transform:translateY(-5px) !important; border-color:rgba(230,49,51,.22) !important; box-shadow: 0 24px 52px rgba(16,88,149,.14), 0 8px 18px rgba(230,49,51,.06) !important; } .pornews-card-visual{ display:flex !important; align-items:center !important; justify-content:center !important; position:relative !important; overflow:hidden !important; } .pornews-card-visual::before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px); background-size:22px 22px; opacity:.46; } .pornews-card-visual svg{ width:52px !important; height:52px !important; stroke:#ffffff !important; fill:none !important; stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important; position:relative !important; z-index:2 !important; } .pornews-card-light{ background:linear-gradient(135deg, #e63133, #c91f21) !important; } .pornews-card-security{ background:linear-gradient(135deg, #105895, #0d416e) !important; } .pornews-card-mezza{ background:linear-gradient(135deg, #f1d030, #d6ae00) !important; } .pornews-card-mezza svg{ stroke:#07152b !important; } .pornews-card-shop{ background:linear-gradient(135deg, #105895, #0d416e) !important; } .pornews-card-content{ padding:20px 22px !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; } .pornews-card-content .pornews-meta{ margin-bottom:10px !important; gap:8px !important; } .pornews-card-content h3{ margin:0 !important; color:#07152b !important; font-size:18px !important; line-height:1.18 !important; letter-spacing:-.02em !important; font-weight:950 !important; } .pornews-card-content p{ margin:10px 0 14px !important; color:#5d6b82 !important; font-size:13.5px !important; line-height:1.48 !important; font-weight:500 !important; } .pornews-card-link{ margin-top:auto !important; display:inline-flex !important; align-items:center !important; color:#105895 !important; font-size:13px !important; font-weight:950 !important; } .pornews-card-link::after{ content:"→"; margin-left:8px; transition:transform .2s ease; } .pornews-card a:hover .pornews-card-link::after{ transform:translateX(4px); } /* BOTTOM LINK */ .pornews-bottom{ display:flex !important; justify-content:center !important; margin-top:34px !important; } .pornews-all-link{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:52px !important; padding:15px 24px !important; border-radius:999px !important; background:#105895 !important; color:#ffffff !important; font-size:15px !important; font-weight:950 !important; text-decoration:none !important; box-shadow:0 16px 34px rgba(16,88,149,.20) !important; transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease !important; } .pornews-all-link::after{ content:"→"; margin-left:10px; } .pornews-all-link:hover{ background:#e63133 !important; color:#ffffff !important; transform:translateY(-3px) !important; box-shadow:0 22px 44px rgba(230,49,51,.22) !important; } /* RESPONSIVE */ @media (max-width: 1120px){ .pornews-layout{ grid-template-columns:1fr !important; } .pornews-featured-link{ grid-template-rows:300px 1fr !important; } .pornews-list{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } .pornews-card a{ grid-template-columns:1fr !important; } .pornews-card-visual{ min-height:150px !important; } } @media (max-width: 760px){ .pornews-section{ padding:62px 0 68px !important; } .pornews-container{ width:100% !important; padding:0 24px !important; } .pornews-head{ grid-template-columns:1fr !important; gap:18px !important; margin-bottom:28px !important; } .pornews-head h2{ font-size:36px !important; } .pornews-head p{ font-size:15px !important; line-height:1.65 !important; } .pornews-featured-link{ grid-template-rows:230px 1fr !important; border-radius:26px !important; } .pornews-visual{ min-height:230px !important; } .pornews-rack-illustration{ width:min(250px, 68%) !important; height:150px !important; border-left-width:9px !important; border-right-width:9px !important; } .pornews-rack-illustration::before, .pornews-rack-illustration::after{ left:-9px !important; right:-9px !important; height:9px !important; } .pornews-rack-illustration span{ height:9px !important; } .pornews-featured-content{ padding:24px !important; } .pornews-featured-content h3{ font-size:26px !important; } .pornews-featured-content p{ font-size:15px !important; line-height:1.58 !important; } .pornews-list{ grid-template-columns:1fr !important; gap:14px !important; } .pornews-card a{ grid-template-columns:94px 1fr !important; min-height:138px !important; border-radius:22px !important; } .pornews-card-visual{ min-height:auto !important; } .pornews-card-visual svg{ width:40px !important; height:40px !important; } .pornews-card-content{ padding:16px !important; } .pornews-pill{ min-height:26px !important; padding:6px 9px !important; font-size:10px !important; } .pornews-meta time{ font-size:12px !important; } .pornews-card-content h3{ font-size:16px !important; line-height:1.2 !important; } .pornews-card-content p{ font-size:13px !important; line-height:1.42 !important; } } @media (max-width: 460px){ .pornews-container{ padding:0 22px !important; } .pornews-card a{ grid-template-columns:1fr !important; } .pornews-card-visual{ min-height:110px !important; } } /* ========================================================= SECTION — COMPRENDRE LE RAYONNAGE Préfixe : porlearn- ========================================================= */ .porlearn-section, .porlearn-section *{ box-sizing:border-box; } .porlearn-section{ width:100vw !important; margin-left:calc(50% - 50vw) !important; position:relative !important; background:#f4f7fb !important; padding:92px 0 96px !important; overflow:hidden !important; font-family:Roboto, Arial, sans-serif !important; } .porlearn-section::before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(16,88,149,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(16,88,149,.045) 1px, transparent 1px); background-size:34px 34px; pointer-events:none; } .porlearn-section::after{ content:""; position:absolute; width:520px; height:520px; left:-190px; top:-210px; background:radial-gradient(circle, rgba(16,88,149,.12), transparent 68%); pointer-events:none; } .porlearn-container{ width:min(1360px, calc(100% - 56px)) !important; margin:0 auto !important; position:relative !important; z-index:2 !important; } /* HEADER */ .porlearn-head{ display:grid !important; grid-template-columns:minmax(0, 1fr) minmax(300px, 510px) !important; gap:48px !important; align-items:end !important; margin-bottom:40px !important; } .porlearn-kicker{ display:inline-flex !important; align-items:center !important; width:fit-content !important; padding:8px 13px !important; border-radius:999px !important; background:#ffffff !important; color:#105895 !important; font-size:12px !important; font-weight:950 !important; text-transform:uppercase !important; letter-spacing:.08em !important; border:1px solid rgba(16,88,149,.12) !important; box-shadow:0 10px 24px rgba(16,88,149,.08) !important; } .porlearn-head h2{ margin:14px 0 0 !important; max-width:780px !important; color:#07152b !important; font-size:clamp(34px, 3.5vw, 56px) !important; line-height:1.02 !important; letter-spacing:-.045em !important; font-weight:950 !important; } .porlearn-head p{ margin:0 !important; color:#526075 !important; font-size:16px !important; line-height:1.75 !important; font-weight:500 !important; } /* LAYOUT */ .porlearn-layout{ display:grid !important; grid-template-columns:minmax(360px, .86fr) minmax(0, 1.14fr) !important; gap:24px !important; align-items:stretch !important; } /* MAIN CARD */ .porlearn-main-card{ min-height:100% !important; display:grid !important; grid-template-rows:1fr 260px !important; border-radius:32px !important; overflow:hidden !important; text-decoration:none !important; color:#ffffff !important; background: linear-gradient(135deg, rgba(16,88,149,.98), rgba(13,65,110,.98)) !important; box-shadow:0 28px 70px rgba(16,88,149,.22) !important; position:relative !important; transition: transform .26s ease, box-shadow .26s ease !important; } .porlearn-main-card::before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size:34px 34px; opacity:.42; pointer-events:none; } .porlearn-main-card::after{ content:""; position:absolute; width:320px; height:320px; right:-120px; top:-120px; background:radial-gradient(circle, rgba(230,49,51,.30), transparent 68%); pointer-events:none; } .porlearn-main-card:hover{ transform:translateY(-8px) !important; box-shadow: 0 36px 86px rgba(16,88,149,.28), 0 10px 28px rgba(230,49,51,.10) !important; } .porlearn-main-content{ padding:34px !important; position:relative !important; z-index:2 !important; } .porlearn-main-label{ display:inline-flex !important; align-items:center !important; min-height:34px !important; padding:8px 13px !important; border-radius:999px !important; background:#f1d030 !important; color:#07152b !important; font-size:12px !important; font-weight:950 !important; text-transform:uppercase !important; letter-spacing:.07em !important; margin-bottom:22px !important; } .porlearn-main-content h3{ margin:0 !important; color:#ffffff !important; font-size:clamp(28px, 2.6vw, 42px) !important; line-height:1.04 !important; letter-spacing:-.04em !important; font-weight:950 !important; } .porlearn-main-content p{ margin:20px 0 26px !important; color:rgba(255,255,255,.86) !important; font-size:15.5px !important; line-height:1.7 !important; font-weight:500 !important; } .porlearn-main-link{ display:inline-flex !important; align-items:center !important; color:#ffffff !important; font-size:15px !important; font-weight:950 !important; } .porlearn-main-link::after{ content:"→"; margin-left:10px; transition:transform .2s ease; } .porlearn-main-card:hover .porlearn-main-link::after{ transform:translateX(5px); } .porlearn-main-visual{ position:relative !important; z-index:2 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:24px !important; } .porlearn-rack-visual{ width:min(300px, 82%) !important; height:170px !important; position:relative !important; border-left:10px solid #ffffff !important; border-right:10px solid #ffffff !important; display:flex !important; flex-direction:column !important; justify-content:space-around !important; padding:22px 0 !important; opacity:.96 !important; } .porlearn-rack-visual::before, .porlearn-rack-visual::after{ content:""; position:absolute; left:-10px; right:-10px; height:10px; border-radius:999px; background:#ffffff; } .porlearn-rack-visual::before{ top:0; } .porlearn-rack-visual::after{ bottom:0; } .porlearn-rack-visual span{ display:block !important; height:10px !important; border-radius:999px !important; background:#ffffff !important; } .porlearn-rack-visual span:nth-child(2){ background:#e63133 !important; } /* GRID CARDS */ .porlearn-grid{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:18px !important; } .porlearn-card{ min-height:245px !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; padding:24px !important; border-radius:26px !important; background:#ffffff !important; color:#101828 !important; text-decoration:none !important; border:1px solid rgba(221,229,238,.96) !important; box-shadow:0 16px 40px rgba(16,88,149,.08) !important; position:relative !important; overflow:hidden !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; } .porlearn-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.48), rgba(255,255,255,0)); pointer-events:none; } .porlearn-card::after{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:#105895; } .porlearn-card-red::after{ background:#e63133; } .porlearn-card-yellow::after{ background:#f1d030; } .porlearn-card:hover{ transform:translateY(-7px) !important; border-color:rgba(230,49,51,.26) !important; box-shadow: 0 26px 58px rgba(16,88,149,.15), 0 10px 24px rgba(230,49,51,.08) !important; } .porlearn-icon{ width:52px !important; height:52px !important; border-radius:17px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin-bottom:20px !important; background:linear-gradient(135deg, #105895, #0d416e) !important; color:#ffffff !important; box-shadow:0 14px 26px rgba(16,88,149,.18) !important; position:relative !important; z-index:2 !important; } .porlearn-card-red .porlearn-icon{ background:linear-gradient(135deg, #e63133, #c91f21) !important; box-shadow:0 14px 26px rgba(230,49,51,.18) !important; } .porlearn-card-yellow .porlearn-icon{ background:linear-gradient(135deg, #f1d030, #d6ae00) !important; color:#07152b !important; } .porlearn-icon svg{ width:26px !important; height:26px !important; stroke:currentColor !important; fill:none !important; stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } .porlearn-card strong{ display:block !important; color:#07152b !important; font-size:20px !important; line-height:1.15 !important; font-weight:950 !important; letter-spacing:-.02em !important; margin:0 0 10px !important; position:relative !important; z-index:2 !important; } .porlearn-card em{ display:block !important; color:#5d6b82 !important; font-size:14px !important; line-height:1.5 !important; font-style:normal !important; font-weight:500 !important; margin-bottom:20px !important; position:relative !important; z-index:2 !important; } .porlearn-card > span:last-child{ margin-top:auto !important; display:inline-flex !important; align-items:center !important; color:#105895 !important; font-size:14px !important; font-weight:950 !important; position:relative !important; z-index:2 !important; } .porlearn-card-red > span:last-child{ color:#e63133 !important; } .porlearn-card-yellow > span:last-child{ color:#07152b !important; } .porlearn-card > span:last-child::after{ content:"→"; margin-left:9px; transition:transform .2s ease; } .porlearn-card:hover > span:last-child::after{ transform:translateX(4px); } /* BOTTOM VOCAB */ .porlearn-bottom{ margin-top:26px !important; padding:26px !important; border-radius:30px !important; background:#ffffff !important; border:1px solid rgba(221,229,238,.96) !important; box-shadow:0 18px 44px rgba(16,88,149,.09) !important; display:grid !important; grid-template-columns:minmax(0, 1fr) auto !important; gap:24px !important; align-items:center !important; } .porlearn-vocab{ display:flex !important; align-items:center !important; gap:18px !important; } .porlearn-vocab-icon{ width:58px !important; height:58px !important; min-width:58px !important; border-radius:18px !important; display:flex !important; align-items:center !important; justify-content:center !important; background:#fff8d6 !important; color:#07152b !important; } .porlearn-vocab-icon svg{ width:28px !important; height:28px !important; stroke:currentColor !important; fill:none !important; stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } .porlearn-vocab strong{ display:block !important; color:#07152b !important; font-size:20px !important; line-height:1.2 !important; font-weight:950 !important; margin-bottom:6px !important; } .porlearn-vocab p{ margin:0 !important; color:#5d6b82 !important; font-size:14.5px !important; line-height:1.55 !important; } .porlearn-vocab-link{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:50px !important; padding:14px 22px !important; border-radius:999px !important; background:#e63133 !important; color:#ffffff !important; text-decoration:none !important; font-size:14px !important; font-weight:950 !important; white-space:nowrap !important; box-shadow:0 14px 30px rgba(230,49,51,.22) !important; transition: transform .2s ease, background-color .2s ease !important; } .porlearn-vocab-link::after{ content:"→"; margin-left:10px; } .porlearn-vocab-link:hover{ background:#c91f21 !important; color:#ffffff !important; transform:translateY(-2px) !important; } /* RESPONSIVE */ @media (max-width: 1180px){ .porlearn-layout{ grid-template-columns:1fr !important; } .porlearn-main-card{ grid-template-columns:minmax(0, 1fr) 360px !important; grid-template-rows:auto !important; } .porlearn-main-visual{ min-height:100% !important; } .porlearn-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 980px){ .porlearn-head{ grid-template-columns:1fr !important; gap:18px !important; } .porlearn-head p{ max-width:760px !important; } .porlearn-main-card{ grid-template-columns:1fr !important; grid-template-rows:auto 230px !important; } .porlearn-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } .porlearn-bottom{ grid-template-columns:1fr !important; } .porlearn-vocab-link{ width:fit-content !important; } } @media (max-width: 640px){ .porlearn-section{ padding:62px 0 68px !important; } .porlearn-container{ width:100% !important; padding:0 24px !important; } .porlearn-head{ margin-bottom:28px !important; } .porlearn-head h2{ font-size:34px !important; } .porlearn-head p{ font-size:15px !important; line-height:1.65 !important; } .porlearn-main-card{ border-radius:26px !important; grid-template-rows:auto 190px !important; } .porlearn-main-content{ padding:26px !important; } .porlearn-main-content h3{ font-size:29px !important; } .porlearn-main-content p{ font-size:15px !important; line-height:1.6 !important; } .porlearn-rack-visual{ width:min(240px, 78%) !important; height:135px !important; border-left-width:8px !important; border-right-width:8px !important; } .porlearn-rack-visual::before, .porlearn-rack-visual::after{ left:-8px !important; right:-8px !important; height:8px !important; } .porlearn-rack-visual span{ height:8px !important; } .porlearn-grid{ grid-template-columns:1fr !important; gap:14px !important; } .porlearn-card{ min-height:auto !important; padding:22px !important; border-radius:22px !important; } .porlearn-icon{ width:50px !important; height:50px !important; margin-bottom:18px !important; } .porlearn-card strong{ font-size:19px !important; } .porlearn-bottom{ padding:22px !important; border-radius:24px !important; } .porlearn-vocab{ align-items:flex-start !important; } .porlearn-vocab-icon{ width:52px !important; height:52px !important; min-width:52px !important; } .porlearn-vocab strong{ font-size:18px !important; } .porlearn-vocab p{ font-size:14px !important; } .porlearn-vocab-link{ width:100% !important; } } /* ========================================================= SECTION — REPRISE DE MATÉRIEL Préfixe : porbuyback- ========================================================= */ .porbuyback-section, .porbuyback-section *{ box-sizing:border-box; } .porbuyback-section{ width:100vw !important; margin-left:calc(50% - 50vw) !important; position:relative !important; overflow:hidden !important; padding:94px 0 96px !important; background: linear-gradient(135deg, rgba(16,88,149,.98), rgba(13,65,110,.98)) !important; color:#ffffff !important; font-family:Roboto, Arial, sans-serif !important; } .porbuyback-section::before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px); background-size:34px 34px; opacity:.42; pointer-events:none; } .porbuyback-section::after{ content:""; position:absolute; width:520px; height:520px; right:-180px; top:-210px; background:radial-gradient(circle, rgba(230,49,51,.32), transparent 68%); pointer-events:none; } .porbuyback-container{ width:min(1360px, calc(100% - 56px)) !important; margin:0 auto !important; position:relative !important; z-index:2 !important; } .porbuyback-layout{ display:grid !important; grid-template-columns:minmax(0, 1fr) minmax(380px, 520px) !important; gap:58px !important; align-items:center !important; } /* CONTENU */ .porbuyback-content{ max-width:780px !important; } .porbuyback-kicker{ display:inline-flex !important; align-items:center !important; width:fit-content !important; padding:9px 14px !important; border-radius:999px !important; background:#f1d030 !important; color:#07152b !important; font-size:12px !important; font-weight:950 !important; text-transform:uppercase !important; letter-spacing:.08em !important; box-shadow:0 12px 26px rgba(0,0,0,.16) !important; margin-bottom:24px !important; } .porbuyback-content h2{ margin:0 !important; color:#ffffff !important; font-size:clamp(38px, 4.4vw, 68px) !important; line-height:.98 !important; letter-spacing:-.055em !important; font-weight:950 !important; text-shadow:0 12px 30px rgba(0,0,0,.18) !important; } .porbuyback-intro{ margin:28px 0 0 !important; max-width:720px !important; color:rgba(255,255,255,.88) !important; font-size:18px !important; line-height:1.74 !important; font-weight:600 !important; } .porbuyback-highlight{ margin-top:30px !important; padding:24px !important; border-radius:24px !important; background:rgba(255,255,255,.11) !important; border:1px solid rgba(255,255,255,.18) !important; backdrop-filter:blur(14px) !important; -webkit-backdrop-filter:blur(14px) !important; } .porbuyback-highlight strong{ display:block !important; color:#ffffff !important; font-size:20px !important; line-height:1.25 !important; font-weight:950 !important; margin-bottom:10px !important; } .porbuyback-highlight p{ margin:0 !important; color:rgba(255,255,255,.78) !important; font-size:15px !important; line-height:1.65 !important; } .porbuyback-actions{ margin-top:34px !important; display:flex !important; flex-wrap:wrap !important; gap:14px !important; } .porbuyback-btn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:54px !important; padding:16px 24px !important; border-radius:999px !important; text-decoration:none !important; font-size:15px !important; font-weight:950 !important; transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease, color .22s ease !important; } .porbuyback-btn-red{ background:#e63133 !important; color:#ffffff !important; box-shadow:0 16px 34px rgba(230,49,51,.30) !important; } .porbuyback-btn-red:hover{ background:#c91f21 !important; color:#ffffff !important; transform:translateY(-3px) !important; box-shadow:0 22px 44px rgba(230,49,51,.38) !important; } .porbuyback-btn-red::after{ content:"→"; margin-left:10px; } .porbuyback-btn-white{ background:#ffffff !important; color:#105895 !important; box-shadow:0 16px 34px rgba(0,0,0,.16) !important; } .porbuyback-btn-white:hover{ background:#f4f7fb !important; color:#e63133 !important; transform:translateY(-3px) !important; } /* CARD PROCESS */ .porbuyback-card{ background:rgba(255,255,255,.92) !important; color:#101828 !important; border-radius:32px !important; padding:26px !important; border:1px solid rgba(255,255,255,.62) !important; box-shadow: 0 32px 78px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.65) !important; backdrop-filter:blur(18px) saturate(140%) !important; -webkit-backdrop-filter:blur(18px) saturate(140%) !important; } .porbuyback-card-head{ display:flex !important; justify-content:flex-end !important; gap:8px !important; margin-bottom:22px !important; } .porbuyback-card-dot{ width:10px !important; height:10px !important; border-radius:999px !important; display:block !important; } .porbuyback-dot-red{ background:#e63133 !important; } .porbuyback-dot-yellow{ background:#f1d030 !important; } .porbuyback-dot-blue{ background:#105895 !important; } .porbuyback-process{ display:grid !important; gap:16px !important; } .porbuyback-step{ display:grid !important; grid-template-columns:58px 1fr !important; gap:16px !important; align-items:flex-start !important; padding:20px !important; border-radius:22px !important; background:#ffffff !important; border:1px solid #e3eaf2 !important; box-shadow:0 12px 28px rgba(16,88,149,.08) !important; } .porbuyback-step-number{ width:58px !important; height:58px !important; border-radius:18px !important; display:flex !important; align-items:center !important; justify-content:center !important; background:linear-gradient(135deg, #e63133, #c91f21) !important; color:#ffffff !important; font-size:15px !important; font-weight:950 !important; box-shadow:0 14px 26px rgba(230,49,51,.20) !important; } .porbuyback-step strong{ display:block !important; color:#07152b !important; font-size:19px !important; line-height:1.2 !important; font-weight:950 !important; margin-bottom:7px !important; } .porbuyback-step p{ margin:0 !important; color:#5d6b82 !important; font-size:14px !important; line-height:1.55 !important; } /* MINI CARDS BOTTOM */ .porbuyback-bottom{ margin-top:28px !important; display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:18px !important; } .porbuyback-mini-card{ padding:24px !important; border-radius:26px !important; background:rgba(255,255,255,.11) !important; border:1px solid rgba(255,255,255,.18) !important; color:#ffffff !important; backdrop-filter:blur(14px) !important; -webkit-backdrop-filter:blur(14px) !important; transition: transform .24s ease, background-color .24s ease !important; } .porbuyback-mini-card:hover{ transform:translateY(-6px) !important; background:rgba(255,255,255,.15) !important; } .porbuyback-mini-icon{ width:52px !important; height:52px !important; border-radius:17px !important; display:flex !important; align-items:center !important; justify-content:center !important; background:#ffffff !important; color:#105895 !important; margin-bottom:18px !important; } .porbuyback-mini-icon svg{ width:26px !important; height:26px !important; stroke:currentColor !important; fill:none !important; stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } .porbuyback-mini-card strong{ display:block !important; color:#ffffff !important; font-size:19px !important; line-height:1.18 !important; font-weight:950 !important; margin-bottom:9px !important; } .porbuyback-mini-card p{ margin:0 !important; color:rgba(255,255,255,.78) !important; font-size:14px !important; line-height:1.55 !important; } /* RESPONSIVE */ @media (max-width: 1040px){ .porbuyback-layout{ grid-template-columns:1fr !important; gap:38px !important; } .porbuyback-content{ max-width:860px !important; } .porbuyback-card{ max-width:720px !important; } .porbuyback-bottom{ grid-template-columns:1fr !important; } } @media (max-width: 640px){ .porbuyback-section{ padding:66px 0 70px !important; } .porbuyback-container{ width:100% !important; padding:0 24px !important; } .porbuyback-content h2{ font-size:38px !important; line-height:1 !important; } .porbuyback-intro{ font-size:16px !important; line-height:1.65 !important; } .porbuyback-highlight{ padding:20px !important; border-radius:22px !important; } .porbuyback-highlight strong{ font-size:18px !important; } .porbuyback-actions{ display:grid !important; grid-template-columns:1fr !important; } .porbuyback-btn{ width:100% !important; } .porbuyback-card{ padding:18px !important; border-radius:26px !important; } .porbuyback-step{ grid-template-columns:48px 1fr !important; gap:14px !important; padding:16px !important; border-radius:18px !important; } .porbuyback-step-number{ width:48px !important; height:48px !important; border-radius:15px !important; font-size:13px !important; } .porbuyback-step strong{ font-size:17px !important; } .porbuyback-step p{ font-size:13.5px !important; } .porbuyback-mini-card{ padding:22px !important; border-radius:22px !important; } } /* ========================================================= SECTION — REPORTAGES TERRAIN / VIDÉOS Préfixe : porvideo- ========================================================= */ .porvideo-section, .porvideo-section *{ box-sizing:border-box; } .porvideo-section{ width:100vw !important; margin-left:calc(50% - 50vw) !important; position:relative !important; overflow:hidden !important; padding:92px 0 96px !important; background:#ffffff !important; font-family:Roboto, Arial, sans-serif !important; } .porvideo-section::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 12% 18%, rgba(16,88,149,.08), transparent 30%), radial-gradient(circle at 88% 8%, rgba(230,49,51,.08), transparent 28%); pointer-events:none; } .porvideo-container{ width:min(1360px, calc(100% - 56px)) !important; margin:0 auto !important; position:relative !important; z-index:2 !important; } /* HEADER */ .porvideo-head{ display:grid !important; grid-template-columns:minmax(0, 1fr) minmax(300px, 520px) !important; gap:48px !important; align-items:end !important; margin-bottom:40px !important; } .porvideo-kicker{ display:inline-flex !important; align-items:center !important; width:fit-content !important; padding:8px 13px !important; border-radius:999px !important; background:#fff5f5 !important; color:#e63133 !important; font-size:12px !important; font-weight:950 !important; text-transform:uppercase !important; letter-spacing:.08em !important; border:1px solid rgba(230,49,51,.12) !important; } .porvideo-head h2{ margin:14px 0 0 !important; max-width:760px !important; color:#07152b !important; font-size:clamp(34px, 3.6vw, 58px) !important; line-height:1.02 !important; letter-spacing:-.045em !important; font-weight:950 !important; } .porvideo-head p{ margin:0 !important; color:#526075 !important; font-size:16px !important; line-height:1.75 !important; font-weight:500 !important; } /* LAYOUT */ .porvideo-layout{ display:grid !important; grid-template-columns:minmax(0, 1.25fr) minmax(360px, .75fr) !important; gap:24px !important; align-items:stretch !important; } /* FEATURED */ .porvideo-featured{ margin:0 !important; border-radius:34px !important; overflow:hidden !important; background:#ffffff !important; border:1px solid rgba(221,229,238,.96) !important; box-shadow:0 26px 70px rgba(16,88,149,.13) !important; transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease !important; } .porvideo-featured:hover{ transform:translateY(-8px) !important; border-color:rgba(230,49,51,.24) !important; box-shadow: 0 36px 86px rgba(16,88,149,.18), 0 12px 28px rgba(230,49,51,.08) !important; } .porvideo-video-wrap, .porvideo-card-video{ position:relative !important; width:100% !important; overflow:hidden !important; background:#07152b !important; } .porvideo-video-wrap{ aspect-ratio:16 / 9 !important; } .porvideo-card-video{ aspect-ratio:16 / 9 !important; } .porvideo-video-wrap iframe, .porvideo-card-video iframe{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; border:0 !important; } .porvideo-featured-content{ padding:30px !important; } .porvideo-meta{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; margin-bottom:18px !important; } .porvideo-meta span, .porvideo-tag{ display:inline-flex !important; align-items:center !important; min-height:30px !important; padding:7px 11px !important; border-radius:999px !important; background:#edf6ff !important; color:#105895 !important; font-size:11px !important; font-weight:950 !important; text-transform:uppercase !important; letter-spacing:.045em !important; } .porvideo-meta span:first-child, .porvideo-tag-red{ background:#fff2f2 !important; color:#e63133 !important; } .porvideo-featured-content h3{ margin:0 !important; color:#07152b !important; font-size:clamp(26px, 2.3vw, 38px) !important; line-height:1.08 !important; letter-spacing:-.035em !important; font-weight:950 !important; } .porvideo-featured-content p{ margin:18px 0 0 !important; color:#5d6b82 !important; font-size:16px !important; line-height:1.65 !important; font-weight:500 !important; } /* SIDE CARDS */ .porvideo-side{ display:grid !important; grid-template-columns:1fr !important; gap:18px !important; } .porvideo-card{ margin:0 !important; display:grid !important; grid-template-rows:auto 1fr !important; border-radius:28px !important; overflow:hidden !important; background:#ffffff !important; border:1px solid rgba(221,229,238,.96) !important; box-shadow:0 18px 44px rgba(16,88,149,.09) !important; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important; } .porvideo-card:hover{ transform:translateY(-6px) !important; border-color:rgba(230,49,51,.22) !important; box-shadow: 0 28px 62px rgba(16,88,149,.15), 0 10px 22px rgba(230,49,51,.06) !important; } .porvideo-card-content{ padding:22px !important; } .porvideo-card-content h3{ margin:14px 0 10px !important; color:#07152b !important; font-size:20px !important; line-height:1.16 !important; letter-spacing:-.02em !important; font-weight:950 !important; } .porvideo-card-content p{ margin:0 !important; color:#5d6b82 !important; font-size:14px !important; line-height:1.5 !important; } /* BOTTOM */ .porvideo-bottom{ margin-top:28px !important; padding:28px !important; border-radius:30px !important; background: linear-gradient(135deg, rgba(16,88,149,.96), rgba(13,65,110,.96)) !important; color:#ffffff !important; display:grid !important; grid-template-columns:minmax(0, 1fr) auto !important; gap:24px !important; align-items:center !important; box-shadow:0 24px 60px rgba(16,88,149,.20) !important; overflow:hidden !important; position:relative !important; } .porvideo-bottom::after{ content:""; position:absolute; width:260px; height:260px; right:-90px; bottom:-130px; background:radial-gradient(circle, rgba(241,208,48,.24), transparent 65%); } .porvideo-note{ position:relative !important; z-index:2 !important; } .porvideo-note strong{ display:block !important; color:#ffffff !important; font-size:22px !important; line-height:1.2 !important; font-weight:950 !important; margin-bottom:8px !important; } .porvideo-note p{ margin:0 !important; max-width:760px !important; color:rgba(255,255,255,.82) !important; font-size:15px !important; line-height:1.6 !important; } .porvideo-btn{ position:relative !important; z-index:2 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:52px !important; padding:15px 24px !important; border-radius:999px !important; background:#e63133 !important; color:#ffffff !important; font-size:15px !important; font-weight:950 !important; text-decoration:none !important; white-space:nowrap !important; box-shadow:0 16px 34px rgba(230,49,51,.26) !important; transition: transform .22s ease, background-color .22s ease !important; } .porvideo-btn::after{ content:"→"; margin-left:10px; } .porvideo-btn:hover{ background:#c91f21 !important; color:#ffffff !important; transform:translateY(-3px) !important; } /* RESPONSIVE */ @media (max-width: 1080px){ .porvideo-layout{ grid-template-columns:1fr !important; } .porvideo-side{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 760px){ .porvideo-section{ padding:64px 0 70px !important; } .porvideo-container{ width:100% !important; padding:0 24px !important; } .porvideo-head{ grid-template-columns:1fr !important; gap:18px !important; margin-bottom:28px !important; } .porvideo-head h2{ font-size:36px !important; } .porvideo-head p{ font-size:15px !important; line-height:1.65 !important; } .porvideo-featured{ border-radius:26px !important; } .porvideo-featured-content{ padding:24px !important; } .porvideo-featured-content h3{ font-size:26px !important; } .porvideo-featured-content p{ font-size:15px !important; line-height:1.58 !important; } .porvideo-side{ grid-template-columns:1fr !important; gap:14px !important; } .porvideo-card{ border-radius:24px !important; } .porvideo-card-content{ padding:20px !important; } .porvideo-card-content h3{ font-size:18px !important; } .porvideo-bottom{ grid-template-columns:1fr !important; padding:24px !important; border-radius:24px !important; } .porvideo-btn{ width:100% !important; } } /* ========================================================= HOMEPAGE — adaptations dynamiques (front-page.php) ========================================================= */ .porhome{font-family:var(--por-font);} /* images à la une dans la section "dernières sorties" */ .pornews-visual img.porhome-thumb{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;z-index:1 !important;} .pornews-card-visual img.porhome-thumb{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;} .pornews-visual.porhome-novisual, .pornews-card-visual.porhome-novisual{background:linear-gradient(135deg,#0d416e,#105895) !important;} .pornews-visual.porhome-novisual .porhome-fallback, .pornews-card-visual.porhome-novisual .porhome-fallback{position:relative;z-index:2;width:58%;max-width:150px;opacity:.92;} .pornews-visual-label{z-index:3 !important;}