/* ============================================================ EchoFirst — REPORTAGE photo (page au design propre) 3 mises en page commutables : immersif / magazine / pellicule. Le porte rep-immersif | rep-magazine | rep-pellicule. ============================================================ */ :root{ --rp-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } /* ---------- placeholder rayé (photo à venir) ---------- */ .rp-ph{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden; background:repeating-linear-gradient(45deg,rgba(255,255,255,.035),rgba(255,255,255,.035) 16px,rgba(255,255,255,.075) 16px,rgba(255,255,255,.075) 32px);} .rp-ph span{font-family:var(--rp-mono);font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.5);padding:0 18px;text-align:center;} .rp-ph .idx{position:absolute;top:12px;left:12px;font-family:var(--rp-mono);font-style:normal;font-size:10px;letter-spacing:.08em; color:rgba(255,255,255,.65);background:rgba(8,26,52,.55);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:3px 9px;} body.rep-magazine .rp-ph{background:repeating-linear-gradient(45deg,var(--tint),var(--tint) 16px,#E4EBF5 16px,#E4EBF5 32px);} body.rep-magazine .rp-ph span{color:var(--grey);} body.rep-magazine .rp-ph .idx{color:var(--navy);background:rgba(255,255,255,.8);border-color:var(--border);} body.rep-pellicule .rp-ph{background:repeating-linear-gradient(45deg,#161B25,#161B25 16px,#1C2330 16px,#1C2330 32px);} body.rep-pellicule .rp-ph span{color:#7C8698;} body.rep-pellicule .rp-ph .idx{color:#B7C0D1;background:#0A0E15;border-color:#242C3A;} /* ---------- révélation (caché seulement avec JS : html.js) ---------- */ :where(html.js) .rp-rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);} .rp-rv.in{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){.rp-rv{opacity:1;transform:none;transition:none;}} /* ============================================================ EN-TÊTE (statique, thémé par mode) ============================================================ */ body.rep-immersif{background:#081A34;} body.rep-pellicule{background:#10141C;} body.rep-magazine{background:#F4F7FB;} .rep-head{--rpad:clamp(24px,5vw,70px);color:#fff;} body.rep-magazine .rep-head{color:var(--navy);} .rep-head__in{max-width:1280px;margin:0 auto;padding:clamp(118px,16vh,180px) var(--rpad) clamp(38px,6vh,66px);} .rep-kick{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--teal-vif,#4FD2E0);} .rep-kick .dot{width:7px;height:7px;border-radius:50%;background:var(--teal-vif,#4FD2E0);box-shadow:0 0 0 0 rgba(79,210,224,.5);animation:repPulse 2.4s ease-out infinite;} @keyframes repPulse{0%{box-shadow:0 0 0 0 rgba(79,210,224,.45);}70%{box-shadow:0 0 0 7px rgba(79,210,224,0);}100%{box-shadow:0 0 0 0 rgba(79,210,224,0);}} @media(prefers-reduced-motion:reduce){.rep-kick .dot{animation:none;}} body.rep-magazine .rep-kick{color:var(--teal-ink);} body.rep-magazine .rep-kick .dot{background:var(--teal);} .rep-title{margin-top:20px;font-size:clamp(52px,9vw,124px);font-weight:700;line-height:.95;letter-spacing:-.035em;} .rep-title em{font-style:normal;color:var(--teal-vif,#4FD2E0);} body.rep-magazine .rep-title em{color:var(--teal);} .rep-sub{margin-top:24px;max-width:660px;font-weight:300;font-size:clamp(15px,1.6vw,18px);line-height:1.7;color:rgba(255,255,255,.72);text-wrap:pretty;} body.rep-magazine .rep-sub{color:#41536E;} .rep-facts{margin-top:clamp(30px,5vh,46px);display:flex;gap:clamp(24px,4.5vw,58px);flex-wrap:wrap;} .rep-facts span{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:rgba(255,255,255,.55);} .rep-facts b{font-size:clamp(22px,2.6vw,32px);font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1;} body.rep-magazine .rep-facts span{color:var(--grey);} body.rep-magazine .rep-facts b{color:var(--navy);} body.rep-magazine .rep-head__in{border-bottom:2.5px solid rgba(16,57,110,.85);box-shadow:0 7px 0 -6px rgba(16,57,110,.22);padding-bottom:30px;} /* ============================================================ MODE IMMERSIF ============================================================ */ .ri-day{padding-top:clamp(44px,8vh,88px);} .ri-head{display:flex;align-items:flex-end;gap:clamp(18px,3vw,34px);max-width:1280px;margin:0 auto; padding:0 clamp(24px,5vw,70px) clamp(22px,4vh,34px);color:#fff;} .ri-n{font-size:clamp(64px,9vw,124px);font-weight:800;line-height:.78;color:transparent; -webkit-text-stroke:1.5px rgba(79,210,224,.55);letter-spacing:-.02em;flex-shrink:0;} .ri-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal-vif,#4FD2E0);} .ri-head h2{margin-top:8px;font-size:clamp(25px,3.2vw,42px);font-weight:600;letter-spacing:-.02em;color:#fff;} .ri-head h2::after{display:none;} .ri-head p{margin-top:10px;max-width:560px;font-size:14.5px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.62);} .ri-lead{margin:0;position:relative;} .ri-lead .rp-ph{height:min(84vh,760px);} .ri-lead figcaption{position:absolute;left:clamp(20px,4.5vw,64px);bottom:clamp(18px,4vh,34px);max-width:min(540px,80%); font-size:13px;line-height:1.65;color:rgba(255,255,255,.9);background:rgba(8,26,52,.62); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:13px 18px;} .ri-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1280px;margin:0 auto; padding:18px clamp(24px,5vw,70px) 0;} .ri-row .rp-shot{margin:0;} .ri-row .rp-ph{height:clamp(240px,38vh,360px);border-radius:16px;} .ri-row figcaption{margin-top:11px;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.55);} @media(max-width:720px){.ri-row{grid-template-columns:1fr;}.ri-lead .rp-ph{height:62vh;}} .ri-quote{max-width:840px;margin:clamp(60px,10vh,100px) auto 0;padding:0 28px;text-align:center;color:#fff;} .ri-quote p{font-size:clamp(20px,2.7vw,31px);font-weight:300;font-style:italic;line-height:1.45;text-wrap:balance;} .ri-quote span{display:block;margin-top:16px;font-size:12.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--teal-vif,#4FD2E0);} /* ============================================================ MODE MAGAZINE ============================================================ */ .rm-wrap{max-width:1180px;margin:0 auto;padding:clamp(30px,5vh,58px) clamp(26px,4vw,58px) 26px; display:flex;flex-direction:column;gap:clamp(52px,9vh,96px);} .rm-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,36px);align-items:start; border-top:2.5px solid var(--navy);padding-top:20px;} .rm-n{font-size:clamp(44px,6vw,76px);font-weight:800;line-height:.85;color:var(--navy);letter-spacing:-.03em;} .rm-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal-ink);} .rm-head h2{margin-top:6px;font-size:clamp(22px,2.6vw,32px);font-weight:600;letter-spacing:-.018em;color:var(--navy);} .rm-head h2::after{display:none;} .rm-head p{margin-top:9px;max-width:600px;font-size:14.5px;font-weight:300;line-height:1.7;color:var(--grey);} .rm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px;} .rm-shot{margin:0;} .rm-shot.wide{grid-column:span 2;} .rm-shot .rp-ph{height:clamp(260px,34vw,400px);border-radius:6px;} .rm-shot figcaption{margin-top:11px;padding-top:9px;border-top:1px solid var(--border); font-size:12.5px;line-height:1.6;color:var(--grey);} .rm-shot figcaption .no{display:block;font-family:var(--rp-mono);font-size:10.5px;letter-spacing:.08em;color:var(--teal-ink);margin-bottom:5px;} @media(max-width:760px){.rm-grid{grid-template-columns:1fr;}.rm-shot.wide{grid-column:auto;}} .rm-quote{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:clamp(30px,5vh,44px) 20px;text-align:center;} .rm-quote p{font-size:clamp(20px,2.6vw,30px);font-weight:300;font-style:italic;color:var(--navy);line-height:1.45;text-wrap:balance;} .rm-quote span{display:block;margin-top:14px;font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--grey);} /* ============================================================ MODE PELLICULE ============================================================ */ .rk-wrap{padding:clamp(18px,4vh,38px) 0 clamp(40px,7vh,64px);} .rk-hint{display:flex;justify-content:space-between;align-items:center;gap:14px;max-width:1280px;margin:0 auto; padding:0 clamp(20px,5vw,70px);font-family:var(--rp-mono);font-size:11.5px;letter-spacing:.05em;color:#7C8698;} .rk-nav{display:flex;gap:8px;} .rk-nav button{width:38px;height:38px;border-radius:50%;border:1px solid #2A3342;background:#141924;color:#B7C0D1; font-size:15px;cursor:pointer;transition:border-color .2s,color .2s;} .rk-nav button:hover{border-color:var(--teal-vif,#4FD2E0);color:var(--teal-vif,#4FD2E0);} .rk-strip{display:flex;align-items:stretch;gap:28px;overflow-x:auto;scroll-snap-type:x proximity; padding:24px clamp(20px,5vw,70px) 30px;scrollbar-width:thin;scrollbar-color:#2A3342 transparent;} .rk-frame{flex:0 0 auto;width:min(74vw,520px);scroll-snap-align:center;margin:0;position:relative; background:#0A0E15;border-radius:8px;padding:32px 16px 18px;} .rk-frame::before,.rk-frame::after{content:'';position:absolute;left:16px;right:16px;height:10px; background-image:radial-gradient(circle at 5px 5px,#232B3A 3px,transparent 3.6px); background-size:20px 10px;background-repeat:repeat-x;} .rk-frame::before{top:10px;} .rk-frame::after{bottom:10px;} .rk-frame .rp-ph{height:clamp(260px,40vh,340px);border-radius:2px;} .rk-frame figcaption{margin:14px 4px 12px;font-size:12.5px;line-height:1.65;color:#98A2B5;} .rk-frame figcaption .no{display:block;font-family:var(--rp-mono);font-size:10.5px;letter-spacing:.08em;color:var(--teal-vif,#4FD2E0);margin-bottom:6px;} .rk-day{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 6px;} .rk-day b{font-size:clamp(44px,6vw,72px);font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.3px #39445A;} .rk-day span{writing-mode:vertical-rl;font-family:var(--rp-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7C8698;} .rk-quote{flex:0 0 auto;width:min(64vw,400px);display:flex;flex-direction:column;justify-content:center;margin:0;padding:0 14px;text-align:center;} .rk-quote p{font-size:clamp(17px,1.9vw,22px);font-weight:300;font-style:italic;line-height:1.5;color:#DDE3EE;text-wrap:balance;} .rk-quote span{margin-top:14px;font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--teal-vif,#4FD2E0);} /* ============================================================ FIN DE PAGE (CTA) ============================================================ */ .rep-end{padding:clamp(56px,10vh,104px) 26px clamp(70px,11vh,120px);color:#fff;} .rep-end__in{max-width:780px;margin:0 auto;text-align:center;} .rep-end h2{font-size:clamp(27px,3.4vw,44px);font-weight:600;letter-spacing:-.022em;color:inherit;} .rep-end h2::after{display:none;} .rep-end .next{margin-top:16px;display:inline-flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.66);} .rep-end .next .live{width:7px;height:7px;border-radius:50%;background:var(--teal-vif,#4FD2E0);flex-shrink:0;} .rep-end .acts{margin-top:28px;display:flex;align-items:center;justify-content:center;gap:12px 26px;flex-wrap:wrap;} .rep-end .link-back{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s;} .rep-end .link-back:hover{color:#fff;} body.rep-magazine .rep-end{color:var(--navy);} body.rep-magazine .rep-end .next{color:var(--grey);} body.rep-magazine .rep-end .next .live{background:var(--teal);} body.rep-magazine .rep-end .link-back{color:var(--grey);} body.rep-magazine .rep-end .link-back:hover{color:var(--navy);} /* footer sur fonds sombres : conserver la lisibilité de la nav déjà gérée par chrome */