/* ============================================================ FONTS ============================================================ */ @font-face { font-family: 'Oswald'; src: url('../assets/fonts/Oswald-VariableFont_wght.ttf') format('truetype'); font-weight: 200 700; font-display: swap; } /* CLS: Fallback font metric override to reduce layout shift during font swap */ @font-face { font-family: 'Oswald-fallback'; src: local('Arial'); size-adjust: 88%; ascent-override: 110%; descent-override: 28%; line-gap-override: 0%; } /* ============================================================ CSS VARIABLES / THEMES ============================================================ */ :root { --navy: #081a2d; --navy-light: #0e2238; --navy-mid: #132940; --red: #f40024; --red-hover: #d10020; --white: #ffffff; --gray-light: #f5f5f5; --gray: #cccccc; --gray-dark: #666666; --font-main: 'Oswald', 'Oswald-fallback', sans-serif; --font-body: 'Oswald', 'Oswald-fallback', sans-serif; --max-width: 100%; --header-height: 120px; --transition: 0.3s ease; } [data-theme="light"] { --bg-primary: #fcfcfc; --bg-secondary: var(--gray-light); --bg-header: #fcfcfc; --bg-nav: #fcfcfc; --text-primary: #081a2d; --text-secondary: #081a2d; --text-nav: var(--navy); --border-color: #e0e0e0; --card-bg: var(--white); --card-shadow: 0 2px 8px rgba(0,0,0,0.08); --ticker-bg: var(--white); --section-title-color: var(--red); --footer-bg: var(--navy); --overlay-bg: rgba(255,255,255,0.95); } [data-theme="dark"] { --bg-primary: var(--navy); --bg-secondary: var(--navy-light); --bg-header: var(--navy); --bg-nav: var(--navy); --text-primary: var(--white); --text-secondary: #b0b8c8; --text-nav: var(--white); --border-color: #2a3a52; --card-bg: var(--navy-light); --card-shadow: 0 2px 8px rgba(0,0,0,0.3); --ticker-bg: var(--navy); --section-title-color: var(--red); --footer-bg: var(--navy-light); --overlay-bg: rgba(15,27,45,0.95); } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x: `clip` et non `hidden`. `hidden` fait de / un conteneur de defilement : les elements position:sticky (.main-nav, .ticker "Infos en direct") se calent alors sur ce conteneur, qui ne defile jamais -> le sticky est neutralise. `clip` coupe le debordement horizontal a l'identique, sans conteneur de defilement. La declaration `hidden` est conservee juste avant comme repli pour les navigateurs sans support de `clip` (Safari < 16). */ html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } body { font-family: var(--font-body); font-size: 16px; background: var(--bg-primary); color: var(--text-primary); line-height: 1.65; transition: background var(--transition), color var(--transition); overflow-x: hidden; overflow-x: clip; /* voir commentaire sur html ci-dessus */ } a { color: inherit; text-decoration: none; transition: color var(--transition); } a:hover { color: var(--red); } img { max-width: 100%; height: auto; display: block; content-visibility: auto; } /* CLS: Reserve space for images via aspect-ratio fallbacks */ img[width][height] { aspect-ratio: attr(width) / attr(height); } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } .section-separator { border: none; border-top: 2px solid var(--red); margin: 0; } /* ============================================================ 1. TOP BAR (Social Icons Row) ============================================================ */ .top-bar { background: var(--navy); padding: 22px 0; border-bottom: none; transition: background var(--transition); } .top-bar .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; } .social-icons { display: flex; gap: 12px; align-items: center; justify-self: start; } .social-icons a { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.10); transition: all var(--transition); } .social-icons a:hover { background: var(--red); transform: scale(1.1); } .social-icons a svg { width: 15px; height: 15px; fill: var(--white); transition: fill var(--transition); } .social-icons a:hover svg { fill: var(--white); } .logo-area { display: flex; flex-direction: column; align-items: center; justify-self: center; grid-column: 2; } .logo-area .logo { display: block; line-height: 0; } .logo-area .logo img { display: block; height: 64px; width: auto; } .header-actions { display: flex; align-items: center; gap: 14px; justify-self: end; } .search-container { position: relative; display: flex; flex-direction: column; align-items: flex-end; } .search-row { display: flex; align-items: center; gap: 0; } .search-input { border: none; background: var(--white); color: var(--navy); height: 44px; padding: 0; border-radius: 22px; font-size: 0.95rem; width: 0; opacity: 0; font-family: var(--font-body); transition: width 0.42s cubic-bezier(0.22,1,0.36,1), padding 0.42s cubic-bezier(0.22,1,0.36,1), opacity 0.28s ease; overflow: hidden; } .search-input::placeholder { color: #6b7686; opacity: 1; font-style: italic; } .search-input:focus { outline: none; } .search-btn { width: 44px; height: 44px; background: rgba(255,255,255,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 2; transition: background var(--transition), margin var(--transition); } .search-btn:hover { background: rgba(255,255,255,0.24); } .search-btn svg { width: 19px; height: 19px; fill: var(--white); } /* Crea "1- Desktop Header / Reference" mesuree a 1920 : icones sociales, icone de recherche et icone Connexion ont toutes leur centre sur la meme ligne (y = 60 dans un bandeau de 120). Les libelles "Recherche avancee" et "Connexion" sont SOUS cette ligne : ils sont donc sortis du flux, sinon ils participent au centrage (l'icone remonte) et le header grandit a l'ouverture de la recherche. */ .search-advanced { position: absolute; /* ancre sur la ligne de centre commune (50% du bloc) + 24 px : les deux libelles "Recherche avancee" et "Connexion" tombent ainsi sur la meme ligne, que la recherche soit ouverte ou fermee */ top: calc(50% + 24px); right: 0; font-size: 0.75rem; line-height: 1; color: rgba(255,255,255,0.85); white-space: nowrap; transition: color var(--transition), opacity 0.3s ease 0.06s, transform 0.3s ease 0.06s, visibility 0.3s; display: block; opacity: 0; visibility: hidden; transform: translateY(-4px); } .search-advanced:hover { color: var(--red); } /* Open (animated) state — revealed on click of the search icon */ .search-container.search-open .search-input { width: 240px; opacity: 1; padding: 0 52px 0 20px; } .search-container.search-open .search-btn { background: #0d2a44; margin-left: -44px; } .search-container.search-open .search-btn:hover { background: var(--red); } .search-container.search-open .search-advanced { opacity: 1; visibility: visible; transform: translateY(0); } .user-btn { position: relative; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: var(--white); transition: color var(--transition); white-space: nowrap; } /* le libelle (Connexion / J. Doe) pend sous l'icone sans peser sur le centrage */ .user-btn > span { position: absolute; top: calc(50% + 24px); left: 50%; transform: translateX(-50%); font-size: 0.75rem; line-height: 1; } .user-btn:hover { color: var(--red); } .user-btn .user-icon { width: 36px; height: 36px; display: block; } /* ============================================================ THEME TOGGLE ============================================================ */ .theme-toggle-bar { background: var(--red); padding: 4px 0; display: flex; justify-content: center; align-items: center; gap: 14px; } .mode-btn { background: none; border: none; padding: 0; line-height: 0; cursor: pointer; border-radius: 16px; transition: transform var(--transition), opacity var(--transition); } .mode-btn img { display: block; height: 30px; width: auto; } .mode-btn:hover { transform: scale(1.05); } .theme-toggle { display: flex; align-items: center; gap: 0; background: var(--navy); border-radius: 50px; padding: 3px; cursor: pointer; } .theme-toggle .toggle-option { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background var(--transition), color var(--transition); color: var(--white); } .theme-toggle .toggle-option svg { width: 17px; height: 17px; display: block; } .theme-toggle .toggle-option.active { background: var(--white); color: var(--navy); box-shadow: 0 1px 4px rgba(0,0,0,0.2); } [data-theme="dark"] .theme-toggle { background: #041018; } [data-theme="dark"] .theme-toggle .toggle-option.active { background: var(--white); color: var(--navy); box-shadow: 0 1px 5px rgba(0,0,0,0.35); } /* ============================================================ 2. MAIN NAVIGATION ============================================================ */ .main-nav { background: var(--bg-nav); border-bottom: 1px solid var(--border-color); /* Non collante : seul le bandeau "Infos en direct" (.ticker) reste en haut au scroll. `relative` + z-index conserves pour que les sous-menus (.nav-dropdown) passent bien au-dessus du contenu de la page. */ position: relative; z-index: 100; transition: background var(--transition); } .nav-list { display: flex; justify-content: center; align-items: center; gap: 0; padding: 0; flex-wrap: nowrap; } .nav-item { position: relative; } .nav-item + .nav-item::before { content: ''; position: absolute; left: 0; top: 25%; height: 50%; width: 1px; background: var(--border-color); } [data-theme="dark"] .nav-item + .nav-item::before { background: rgba(255,255,255,0.2); } .nav-item > a { display: flex; align-items: center; gap: 5px; padding: 14px 14px; font-family: var(--font-main); font-size: 0.88rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-nav); white-space: nowrap; transition: color var(--transition); } .nav-item > a:hover { color: var(--red); } .nav-item > a .nav-arrow { width: 8px; height: 5px; transition: transform 0.3s ease; flex-shrink: 0; } .nav-item > a .nav-arrow path, .nav-item > a .nav-arrow polyline { stroke: var(--text-nav); transition: stroke var(--transition); } .nav-item:hover > a .nav-arrow { transform: rotate(180deg); } .nav-item:hover > a .nav-arrow path, .nav-item:hover > a .nav-arrow polyline { stroke: var(--red); } /* "Nos Podcasts" SVG label, pinned to the far right while the rest stays centered */ .main-nav .container { position: relative; } .nav-item-podcast { position: absolute; right: 1vw; top: 50%; transform: translateY(-50%); } .nav-item-podcast::before { display: none !important; } .nav-item-podcast > a { position: relative; padding: 12px 0 12px 18px; } .nav-item-podcast .podcast-svg { height: 26px; width: auto; display: block; transition: opacity var(--transition); } .nav-item-podcast .podcast-svg-hover { position: absolute; top: 50%; left: 18px; transform: translateY(-50%); opacity: 0; pointer-events: none; } .nav-item-podcast:hover .podcast-svg-static { opacity: 0; } .nav-item-podcast:hover .podcast-svg-hover { opacity: 1; } /* Dropdown */ .nav-dropdown { position: absolute; top: calc(100% + 0px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 200px; border-radius: 0 0 12px 12px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; z-index: 200; padding: 0; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.15); } /* Light mode dropdown */ [data-theme="light"] .nav-dropdown { background: var(--white); border: 1px solid var(--border-color); } /* Dark mode dropdown */ [data-theme="dark"] .nav-dropdown { background: #0d2a44; border: 1px solid #1a3a5c; } .nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-dropdown a { display: block; padding: 9px 20px; font-size: 0.88rem; text-align: center; transition: background var(--transition), color var(--transition); } [data-theme="light"] .nav-dropdown a { color: var(--text-primary); border-bottom: 1px solid var(--red); } [data-theme="dark"] .nav-dropdown a { color: var(--white); border-bottom: 1px solid var(--red); } .nav-dropdown a:last-child { border-bottom: none; } [data-theme="light"] .nav-dropdown a:hover { background: #f5f5f5; color: var(--red); } [data-theme="dark"] .nav-dropdown a:hover { background: rgba(255,255,255,0.06); color: var(--red); } .nav-dropdown .voir-plus { background: var(--red); color: var(--white) !important; margin: 0; border-radius: 0 0 12px 12px; text-align: center; padding: 10px 24px; font-size: 0.88rem; font-family: var(--font-main); font-weight: 500; letter-spacing: 0.5px; border-bottom: none !important; } .nav-dropdown .voir-plus:hover { background: var(--red-hover); } /* ============================================================ 3. BREAKING NEWS TICKER ============================================================ */ .ticker { background: var(--ticker-bg); border-bottom: 2px solid var(--red); padding: 8px 0; overflow: hidden; transition: background var(--transition); min-height: 42px; /* CLS: reserve ticker height */ position: sticky; top: 0; /* seul element colle en haut de fenetre */ z-index: 99; } .ticker .container { display: flex; align-items: center; gap: 16px; } .ticker-label { font-family: var(--font-main); font-weight: 700; font-size: 1rem; color: var(--red); white-space: nowrap; display: flex; align-items: center; gap: 6px; } .ticker-label .dot { width: 8px; height: 8px; background: var(--red); border-radius: 50%; animation: pulse 1.5s infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} } .ticker-text { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); } .ticker-track { display: inline-flex; align-items: center; width: max-content; white-space: nowrap; animation: ticker-scroll 90s linear infinite; will-change: transform; } .ticker-text:hover .ticker-track { animation-play-state: paused; } .ticker-item { font-size: 1rem; color: var(--text-primary); padding: 0 14px; transition: color var(--transition); } .ticker-item:hover { color: var(--red); } .ticker-sep { color: var(--red); font-weight: 700; } .ticker-dup { display: contents; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } } /* ============================================================ 4. HERO SECTION (Cartouche + Side articles + Sidebar) ============================================================ */ .hero { padding: 24px 0; } .hero-grid { display: grid; grid-template-columns: 1fr 1.95fr 0.93fr; gap: 32px; } /* Side articles (left) */ .side-articles { display: flex; flex-direction: column; gap: 20px; } .side-article { display: flex; flex-direction: column; gap: 8px; } .side-article img { width: 100%; height: 160px; object-fit: cover; border-radius: 4px; aspect-ratio: 250/160; } .side-article h3 { font-family: var(--font-main); font-size: 1.1rem; font-weight: 600; line-height: 1.35; } .side-article p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.4; } /* Main cartouche (center) - image on top, title/description below */ .main-cartouche { display: flex; flex-direction: column; gap: 14px; } .main-cartouche img { width: 100%; height: 380px; object-fit: cover; border-radius: 4px; aspect-ratio: 16/9; } .main-cartouche .cartouche-body { display: flex; flex-direction: column; gap: 10px; padding: 0 2px; } .main-cartouche h2 { font-family: var(--font-main); font-size: 1.85rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; margin-bottom: 0; } .main-cartouche .description { font-size: 1rem; color: var(--text-secondary); line-height: 1.55; } .main-cartouche .author { margin-top: 4px; font-size: 0.95rem; color: var(--text-secondary); opacity: 0.8; } .article-meta { display: flex; align-items: center; gap: 0; font-size: 0.8rem; color: var(--text-secondary); opacity: 0.75; margin-top: 2px; } .article-meta .article-author { font-weight: 600; } .article-meta .article-date::before { content: ' · '; } /* Ad banner */ .ad-banner { display: flex; align-items: center; justify-content: center; padding: 16px; margin: 20px auto; max-width: 728px; min-height: 90px; border-radius: 4px; font-family: var(--font-main); font-size: 1rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 2px; } .ad-billboard { max-width: 970px; min-height: 250px; } /* Sidebar */ .sidebar { display: flex; flex-direction: column; gap: 20px; } /* Liban en bref */ .liban-bref { position: relative; border: none; border-left: 3px solid var(--navy); border-radius: 0; padding: 0px; overflow: visible; } [data-theme="dark"] .liban-bref { border-left-color: var(--red); } .liban-bref-title { font-family: var(--font-main); font-size: 0.95rem; font-weight: 600; padding: 4px 10px; background: transparent; border: 1px solid var(--red); border-radius: 3px; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; margin-left: 12px; } .liban-bref-title .label { color: var(--red); } .liban-bref ul { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; } .liban-bref li { position: relative; display: flex; align-items: flex-start; padding: 0 0 0 16px; font-size: 0.95rem; line-height: 1.4; } .liban-bref li::before { content: ""; position: absolute; left: -3px; top: 0.5em; width: 14px; height: 2px; background: var(--red); } .liban-bref li a.leb-text { color: var(--navy); font-weight: 600; text-decoration: none; } .liban-bref li a.leb-text:hover { color: var(--red); } [data-theme="dark"] .liban-bref li a.leb-text { color: var(--white); } /* L'express du jour (sidebar) */ .express-du-jour { border-radius: 4px; overflow: hidden; background: var(--card-bg); box-shadow: var(--card-shadow); } .express-header { background: var(--navy); padding: 10px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--red); } [data-theme="dark"] .express-header { background: var(--navy-light); } .express-header .play-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--red); border-radius: 3px; flex-shrink: 0; } .express-header .play-icon::after { content: ""; width: 0; height: 0; border-left: 8px solid var(--white); border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; } .express-header .label { font-family: var(--font-main); font-size: 1.05rem; font-weight: 600; color: var(--white); } .express-portrait { position: relative; width: 100%; aspect-ratio: 280/380; overflow: hidden; background: var(--navy); } .express-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .express-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 14px; text-align: center; background: linear-gradient(transparent, rgba(0,0,0,0.85)); } .express-meta .name { font-family: var(--font-main); font-size: 1rem; font-weight: 700; color: var(--white); line-height: 1.2; } .express-meta .role { font-size: 0.85rem; color: #081a2d; margin-top: 2px; } /* Titres du jour — Le JT (sidebar HDLs) */ /* NE PAS retirer l'arrondi des coins du haut. Le bandeau porte son propre coin arrondi dans l'image (rayon 5,11 sur 407,12 dans jt-titres-*.svg) et le PNG est donc transparent dans l'encoche. Sans le clip du conteneur, c'est le background navy de .titres-du-jour qui remplit cette encoche : on voit un coin navy en biais mordre dans la bande rouge « LE » (essaye et mesure avant de changer : teste 0 0 4px 4px, le defaut reapparait). */ .titres-du-jour { border-radius: 4px; overflow: hidden; background: var(--navy); box-shadow: var(--card-shadow); display: flex; flex-direction: column; } /* Header Le JT / Titres du jour — PNG en fond. HISTORIQUE : les exports d'origine LeJT-header-light/dark.png font 408x70 alors que le dessin ne va que de la ligne 1 a la ligne 60 : 9 lignes entierement transparentes en bas (12,9 % de la hauteur) + 1 en haut. Avec aspect-ratio 408/70 et un fond etire, ces 9 lignes laissaient voir le navy de .titres-du-jour sous le filet rouge (la « bande bleue » du client), et la ligne du haut empechait le bandeau rouge « LE » de toucher le bord. On utilise donc les versions detourees 408x60 (-trim), sans compensation. Les fichiers non detoures sont conserves a cote a titre d'archive. */ .tdj-header { display: block; width: 100%; aspect-ratio: 408 / 60; background-image: url('../assets/images/LeJT-header-light-trim@3x.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: left top; font-size: 0; line-height: 0; vertical-align: top; } [data-theme="dark"] .tdj-header { background-image: url('../assets/images/LeJT-header-dark-trim@3x.png'); } /* Portrait */ .tdj-portrait { display: block; width: 100%; aspect-ratio: 280 / 200; overflow: hidden; background: var(--navy); margin-top: 0; } .tdj-slide-img { display: none; width: 100%; height: 100%; object-fit: cover; } .tdj-slide-img.active { display: block; } /* Items */ .tdj-item { display: block; text-decoration: none; } /* Corps des items 2 et 3 : miniature + texte côte à côte */ .tdj-item-body { display: flex; gap: 8px; align-items: flex-start; padding: 8px; background: var(--navy); } .tdj-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 2px; flex-shrink: 0; } .tdj-item-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .tdj-date { font-size: 0.72rem; color: rgba(255,255,255,0.55); display: block; } .tdj-cat { background: var(--navy); color: var(--white); font-family: var(--font-main); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; text-align: center; padding: 7px 8px; } [data-theme="dark"] .tdj-cat { background: var(--navy-light); } /* Sous-titre rouge : caché par défaut, visible si .active */ .tdj-headline { display: none; background: var(--red); color: var(--white); font-family: var(--font-main); font-weight: 500; font-size: 0.92rem; text-align: center; line-height: 1.25; padding: 9px 12px; transition: background var(--transition); } /* Item 1 actif : headline pleine largeur */ .tdj-item.active .tdj-headline { display: block; } .tdj-item.active:hover .tdj-headline { background: var(--red-hover); } /* Items 2-3 actifs : headline dans le bloc info (inline) */ .tdj-item-info .tdj-headline { background: transparent; color: var(--white); text-align: left; padding: 0; font-size: 0.82rem; line-height: 1.3; } .tdj-item.active .tdj-item-info .tdj-headline { display: block; background: transparent; } .tdj-item:not(.active) .tdj-item-info .tdj-headline { display: block; color: rgba(255,255,255,0.7); } /* Liban en bref - Horizontal Bar */ .liban-bref-bar { background: rgba(var(--navy), 0.05); border-top: 3px solid var(--red); border-bottom: 1px solid var(--border-color); } .liban-bref-bar-title { background: var(--red); color: var(--white); text-align: center; font-family: var(--font-main); font-size: 1rem; font-weight: 600; padding: 8px 0; letter-spacing: 1px; } .liban-bref-cards { display: grid; grid-template-columns: repeat(3, 1fr); max-width: var(--max-width); margin: 0 auto; } .liban-bref-card { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-right: 1px solid var(--border-color); background: var(--bg-secondary); transition: background var(--transition); cursor: pointer; } .liban-bref-card:last-child { border-right: none; } .liban-bref-card:hover { background: var(--card-bg); } .liban-bref-card p { font-size: 0.9rem; color: var(--text-primary); line-height: 1.4; flex: 1; margin-right: 12px; } .liban-bref-arrow { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; height: 28px; background: var(--red); color: var(--white); font-size: 1.2rem; font-weight: bold; border-radius: 2px; flex-shrink: 0; } /* ============================================================ 5. DECRYPTAGE / SLIDE SECTION (4 large cards) ============================================================ */ .decryptage { padding: 0; overflow: hidden; border-top: 3px solid var(--red); } .decryptage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: var(--navy); } .decryptage-card { position: relative; aspect-ratio: 3/4; overflow: hidden; } .decryptage-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, filter 0.35s ease; } .decryptage-card:hover img { transform: scale(1.05); } /* On hover within the slider, blur the non-hovered cards */ .decryptage-grid:hover .decryptage-card img { filter: blur(4px) brightness(0.6); } .decryptage-grid:hover .decryptage-card:hover img { filter: none; } .decryptage-card .overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.85)); padding: 20px 16px 16px; } .decryptage-card .rubrique { font-family: var(--font-main); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 3px; color: var(--white); opacity: 0.7; margin-bottom: 4px; } .decryptage-card:last-child .rubrique { color: var(--red); font-weight: 600; opacity: 1; } .decryptage-card h3 { font-family: var(--font-main); font-size: 1.15rem; font-weight: 600; color: var(--white); line-height: 1.3; } /* ============================================================ 6. SONDAGE BAR ============================================================ */ .sondage-bar { background: linear-gradient(90deg, var(--navy) 0%, #1a0a0e 40%, var(--red) 65%, #8b0010 100%); margin: 0; display: flex; align-items: stretch; /* let the Participez block fill the bar height */ min-height: 56px; /* CLS: reserve sondage bar height */ margin: 15px 0px; } .sondage-bar .close-btn { display: flex; align-items: center; justify-content: center; color: var(--white); opacity: 0.7; padding: 0 22px; background: none; } .sondage-bar .close-btn:hover { opacity: 1; } .sondage-bar .close-btn svg { width: 22px; height: 22px; display: block; } .sondage-bar .text { flex: 1; align-self: center; text-align: center; font-family: var(--font-main); font-size: 1.15rem; font-weight: 600; color: var(--white); letter-spacing: 1px; text-transform: uppercase; } .sondage-bar .check-icon { display: flex; align-items: center; color: var(--white); opacity: 0.7; padding: 0 22px; } .sondage-bar .check-icon svg { width: 22px; height: 22px; display: block; } .sondage-bar .participez-btn { background: var(--red); color: var(--white); font-family: var(--font-main); font-weight: 700; font-size: 1rem; padding: 0 48px; display: flex; align-items: center; text-transform: uppercase; letter-spacing: 1px; border-radius: 999px 0 0 999px; /* left end fully rounded, right edge flush */ transition: background var(--transition); } .sondage-bar .participez-btn:hover { background: var(--red-hover); } /* ============================================================ 7. REPORTAGES & EMISSIONS (Show Logos) ============================================================ */ .reportages-section { padding: 0; } .reportages-title-bar { background: var(--red); text-align: center; padding: 12px; font-family: var(--font-main); font-weight: 700; font-size: 1.05rem; letter-spacing: 3px; text-transform: uppercase; color: var(--white); } .show-logos { display: flex; justify-content: center; align-items: center; gap: 40px; padding: 30px 20px; flex-wrap: wrap; background: var(--bg-primary); transition: background var(--transition); } .show-logo { width: 110px; height: 110px; border-radius: 50%; border: 2px solid var(--red); background: var(--navy); overflow: hidden; flex-shrink: 0; display: block; transition: transform var(--transition), border-color var(--transition); cursor: pointer; } .show-logo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .show-logo:hover { transform: scale(1.08); border-color: var(--white); } [data-theme="light"] .show-logo:hover { border-color: var(--navy); } /* ============================================================ 8. VIDEO SECTION (Monde) ============================================================ */ .video-section { background: var(--navy) url('../assets/images/VideoSection-Background.png') center center / 100% 100% no-repeat; padding: 0 16%; border-top: 1px solid var(--red); border-bottom: 1px solid var(--red); } .video-grid { display: grid; grid-template-columns: 2fr 1fr; align-items: start; gap: 4px; max-width: 100%; margin: 10px 0 0 0; padding: 0; } .video-main { position: relative; border-radius: 0; overflow: hidden; background: #000; } .video-main img { width: 100%; height: 100%; object-fit: cover; min-height: 350px; } /* YouTube embed */ .video-embed { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: block; } .video-main .video-info { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; background: linear-gradient(transparent, rgba(0,0,0,0.82)); padding: 30px 16px 12px; } .video-main .tag { position: absolute; top: 16px; right: 16px; background: var(--navy); color: var(--white); font-family: var(--font-main); font-weight: 700; font-size: 0.95rem; padding: 4px 12px; text-transform: uppercase; } /* .video-main .video-info moved inline with .video-embed block above */ .video-main .video-info .logo-sm { font-family: var(--font-main); font-weight: 700; font-size: 0.85rem; color: var(--white); display: flex; align-items: center; gap: 3px; margin-bottom: 2px; } .video-main .video-info .logo-sm .play-sm { display: inline-block; width: 0; height: 0; border-left: 8px solid var(--red); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .video-main .video-info h3 { font-family: var(--font-main); font-size: 1.25rem; font-weight: 700; color: var(--white); text-transform: uppercase; line-height: 1.2; margin: 2px 0 0; } .video-side { position: relative; border-radius: 0; overflow: hidden; height: 0; padding-bottom: 112.5%; } .video-side img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .video-side .video-side-info { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.85)); padding: 20px 16px; } .video-side .video-side-info .label { background: var(--red); color: var(--white); font-family: var(--font-main); font-weight: 700; font-size: 0.85rem; padding: 3px 10px; display: inline-block; margin-bottom: 6px; } .video-side .video-side-info p { color: var(--white); font-size: 1rem; line-height: 1.3; } .voir-plus-btn { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 20px 14px; color: var(--white); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; max-width: 100%; margin: 4px 0 0; padding: 6px 4px 10px; } /* .voir-plus-btn .circle removed — using VoirPlus_Button.svg img */ /* ============================================================ 9. PODCASTS SECTION ============================================================ */ .podcasts-section { background: var(--navy) url('../assets/images/NosPodcasts_Background-light.png') center/100% 100% no-repeat; padding: 30px 0; } [data-theme="dark"] .podcasts-section { background-image: url('../assets/images/NosPodcasts_Background-dark.png'); } .podcasts-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; align-items: center; max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } /* Logo "Nos Podcasts" SVG */ .podcast-logo { display: block; height: 52px; width: auto; margin-bottom: 10px; } .podcast-logo--light { display: block; } .podcast-logo--dark { display: none; } [data-theme="dark"] .podcast-logo--light { display: none; } [data-theme="dark"] .podcast-logo--dark { display: block; } .podcast-info h3 { font-family: var(--font-main); font-size: 1.5rem; font-weight: 700; color: var(--white); line-height: 1.3; margin-bottom: 6px; } .podcast-info .description { font-size: 0.95rem; color: #b0b8c8; line-height: 1.4; margin-bottom: 12px; } .podcast-controls { display: flex; align-items: center; gap: 14px; } .podcast-play-btn { display: block; cursor: pointer; } .podcast-duration { color: var(--white); font-size: 1rem; } .podcast-save-btn { display: block; opacity: 0.85; cursor: pointer; } .podcast-save-label { color: var(--white); font-size: 0.9rem; opacity: 0.85; } /* Image + icône overlay */ .podcast-image { border-radius: 8px; overflow: hidden; position: relative; } .podcast-image img:first-child { width: 100%; height: 200px; object-fit: cover; display: block; } .podcast-img-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; } /* Col droite */ .podcast-right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; } /* Waveform — égaliseur animé */ .podcast-waveform { display: flex; align-items: flex-end; gap: 3px; } .podcast-waveform .bar { width: 4px; height: var(--h, 20px); background: var(--red); border-radius: 2px; animation: equalizer 1s ease-in-out infinite alternate; animation-delay: var(--d, 0s); } @keyframes equalizer { 0% { height: calc(var(--h, 20px) * 0.25); opacity: 0.5; } 100% { height: var(--h, 20px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .podcast-waveform .bar { animation: none; } } .podcast-spotify { display: flex; align-items: center; gap: 6px; color: var(--white); font-size: 0.95rem; opacity: 0.85; } .voir-plus-podcast { display: flex; align-items: center; gap: 8px; color: var(--white); font-size: 1rem; font-weight: 600; cursor: pointer; } /* ============================================================ 10. BILLBOARD AD ============================================================ */ .billboard-section { padding: 40px 0; display: flex; justify-content: center; } /* ============================================================ CLS: Reserve space for below-the-fold sections ============================================================ */ .dossiers-section, .categories-section, .last-pictures, .eclairage-section { content-visibility: auto; contain-intrinsic-size: auto 700px; } /* ============================================================ 11. DOSSIERS SECTION — slider vertical Créa "Dossiers Slider-NewDesign.pdf" : planche 1920 x 1140,12 • bandeaux rouges 55,3 px (#f40024), texte Oswald Bold 30 px centré • zone image 1029,5 px — ratio 1920 / 1030 • titre Oswald SemiBold 70 px, x0 = 224,3 px (11,68 %), 40,8 px au-dessus du bandeau bas • pastilles Ø 40,4 px, pas de 119,85 px, centre à 82,7 px du bord droit (4,31 %) Ramené à l'échelle de la page : verticales et typo x0,55, horizontales en %. ============================================================ */ .dossiers-section { padding: 0; margin-bottom: 0; background: var(--navy); } .dossiers-title-bar { background: var(--red); text-align: center; padding: 12px; font-family: var(--font-main); font-weight: 700; font-size: 1.05rem; letter-spacing: 3px; text-transform: uppercase; color: var(--white); } /* --- Fenêtre du slider --- */ .dossiers-slider { position: relative; overflow: hidden; background: var(--navy); height: clamp(420px, 29.5vw, 620px); /* 1029,5 x 0,55 = 566 px à 1920 */ } .dossiers-track { height: 100%; transition: transform 0.75s cubic-bezier(0.77, 0, 0.18, 1); will-change: transform; } /* --- Diapositive --- */ .dossier-slide { position: relative; height: 100%; overflow: hidden; background: var(--navy); } .dossier-slide-link { position: absolute; inset: 0; display: block; text-decoration: none; color: inherit; } .dossier-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease-out; } /* Dégradé bleu nuit vers le bas, comme sur la planche */ .dossier-slide-link::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( to bottom, rgba(8, 26, 45, 0) 35%, rgba(8, 26, 45, 0.16) 50%, rgba(8, 26, 45, 0.92) 92%, var(--navy) 100% ); } .dossier-slide-title { position: absolute; z-index: 2; left: 0; right: 0; bottom: 22px; /* 40,8 x 0,55 */ padding: 0 11.7%; /* marges 224,3 / 1920 — titre centre sur 960 dans la crea */ margin: 0; color: var(--white); font-family: var(--font-main); font-weight: 600; font-size: clamp(1.35rem, 2vw, 2.4rem); /* 70 x 0,55 = 38,5 px à 1920 */ line-height: 1.04; letter-spacing: -0.02em; text-align: center; text-wrap: balance; } .dossier-slide-link:hover .dossier-slide-img { transform: scale(1.04); } /* --- Pastilles de navigation --- */ .dossiers-dots { position: absolute; z-index: 3; top: 50%; right: 4.31%; /* 82,7 / 1920 */ transform: translate(50%, -50%); display: flex; flex-direction: column; align-items: center; } .dossier-dot { position: relative; z-index: 1; width: 22px; /* 40,4 x 0,55 */ height: 22px; margin: 0 0 44px; /* pas de 66 px = 22 + 44 */ padding: 0; border: 1.5px solid var(--white); border-radius: 50%; background: transparent; cursor: pointer; transition: background 0.25s ease; } /* Le fil blanc est trace segment par segment DANS LES ECARTS entre pastilles. Sur la planche, l'interieur des pastilles inactives est transparent (l'image se voit au travers) et le trait s'arrete net au bord de chaque cercle : il ne faut donc pas un trait continu derriere la colonne. */ .dossier-dot::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 1px; height: 44px; /* = l'ecart entre deux pastilles */ background: rgba(255, 255, 255, 0.85); } .dossier-dot:last-child { margin-bottom: 0; } .dossier-dot:last-child::after { content: none; } .dossier-dot.is-active { background: var(--white); } .dossier-dot:hover { background: rgba(255, 255, 255, 0.28); } .dossier-dot.is-active:hover { background: var(--white); } .dossier-dot:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; } /* --- Bandeau "Voir plus" --- */ .dossiers-more { display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--red); color: var(--white); text-decoration: none; font-family: var(--font-main); font-weight: 700; font-size: 1.05rem; letter-spacing: 3px; text-transform: uppercase; transition: background var(--transition); } .dossiers-more:hover, .dossiers-more:focus-visible { background: var(--red-hover); } @media (prefers-reduced-motion: reduce) { .dossiers-track, .dossier-slide-img { transition: none; } } /* ============================================================ 12. CATEGORY SECTIONS (Liban, Monde, Economie, Culture, Sports, Sciences) ============================================================ */ .categories-section { padding: 40px 0; } .categories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; } .category-block {} .category-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 4px; border-bottom: none; } .category-header h2 { font-family: var(--font-main); font-size: 1.15rem; font-weight: 700; text-transform: uppercase; color: var(--red); letter-spacing: 1px; } .category-header .line { flex: 1; height: 1px; background: var(--border-color); } .category-header .arrow-icon { width: 16px; height: 16px; fill: var(--text-secondary); } /* Meme comportement au survol que .category-list-item juste en dessous : tout le bloc (image + titre) est cliquable et le titre passe en rouge. */ .category-main-article { display: block; margin-bottom: 16px; color: var(--text-primary); text-decoration: none; transition: color var(--transition); } .category-main-article:hover { color: var(--red); } .category-main-article:hover h3 { color: var(--red); } .category-main-article img { width: 100%; aspect-ratio: 16/9; height: auto; object-fit: cover; border-radius: 4px; margin-bottom: 10px; display: block; } .category-main-article h3 { font-family: var(--font-main); font-size: 1.1rem; font-weight: 600; line-height: 1.3; margin-bottom: 6px; color: inherit; transition: color var(--transition); } .category-main-article p { display: none; font-size: 0.95rem; color: var(--text-secondary); line-height: 1.4; } .category-list { display: flex; flex-direction: column; gap: 0; } .category-list-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border-color); text-decoration: none; color: var(--text-primary); transition: color var(--transition); } .category-list-item:hover { color: var(--red); } .cat-thumb { width: 72px; height: 52px; object-fit: cover; border-radius: 3px; flex-shrink: 0; } .cat-item-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .cat-item-title { font-size: 0.9rem; font-weight: 600; line-height: 1.35; } .cat-item-date { font-size: 0.75rem; color: var(--text-secondary); opacity: 0.75; } /* ============================================================ 13. ECLAIRAGE (Highlight Article) ============================================================ */ .eclairage-section { padding: 30px 0; } .eclairage-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 8px; overflow: hidden; background: var(--card-bg); box-shadow: var(--card-shadow); max-width: 700px; } .eclairage-card img { width: 100%; height: 300px; object-fit: cover; } .eclairage-card .info { padding: 30px 24px; display: flex; flex-direction: column; justify-content: center; } .eclairage-card .tag { font-family: var(--font-main); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: var(--white); background: var(--red); display: inline-block; padding: 3px 12px; margin-bottom: 12px; align-self: flex-start; } .eclairage-card h3 { font-family: var(--font-main); font-size: 1.6rem; font-weight: 400; line-height: 1.3; color: var(--text-secondary); } /* ============================================================ 14. LAST 4 PICTURES (Chiffre, Mot de tete, Sondage, Photo) ============================================================ */ .last-pictures { padding: 40px 0; } .last-pictures-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .last-picture-card { position: relative; height: 220px; border-radius: 8px; overflow: hidden; cursor: pointer; } .last-picture-card img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); transition: all 0.5s ease; } .last-picture-card:hover img { transform: scale(1.05); filter: brightness(0.6); } .last-picture-card .label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-main); font-size: 1.5rem; font-weight: 600; color: var(--white); text-align: center; text-transform: uppercase; letter-spacing: 2px; line-height: 1.3; } .last-picture-card .label span { color: var(--red); font-weight: 700; } /* ============================================================ 15. FOOTER ============================================================ */ .footer { background: var(--footer-bg); padding: 0; } .footer-top { display: flex; align-items: center; justify-content: flex-end; padding: 8px 20px; } .back-to-top { display: flex; align-items: center; gap: 6px; font-size: 0.95rem; color: var(--white); opacity: 0.7; cursor: pointer; } .back-to-top:hover { opacity: 1; } .back-to-top .arrow-up { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--red); color: var(--red); font-size: 0.7rem; } .footer-logo-bar { text-align: center; padding: 16px 0 8px; border-bottom: 2px solid var(--red); } .footer-logo { font-family: var(--font-main); font-weight: 700; font-size: 1.6rem; color: var(--white); display: inline-flex; /* baseline (et non center) : la base du triangle se pose sur la ligne de base du texte, comme dans IBLogo-Slogan.svg ou il est a cheval exact sur les capitales */ align-items: baseline; gap: 0.23em; } .footer-logo .play-ft { display: inline-block; width: 0; height: 0; /* Hauteur = hauteur de capitale d'Oswald (sCapHeight 810/1000 = 0,81 em) ; ratio largeur/hauteur 0,9458 releve sur IBLogo-Slogan.svg (35,11 x 37,12). Mesure de controle sur la planche Web-4 last pictures+Footer a 1920 : capitales 28 px, triangle 26 x 28, aligne haut et bas sur les capitales. */ border-left: 0.766em solid var(--red); border-top: 0.405em solid transparent; border-bottom: 0.405em solid transparent; } .footer-content { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: 30px; padding: 24px 20px; max-width: var(--max-width); margin: 0 auto; } .footer-social h4, .footer-nav h4, .footer-links h4, .footer-newsletter h4 { font-family: var(--font-main); font-size: 1rem; font-weight: 600; color: var(--white); margin-bottom: 12px; } .footer-social .social-icons a svg { fill: var(--white); } .footer-social .social-icons a:hover svg { fill: var(--white); } .footer-nav a, .footer-links a { display: block; padding: 4px 0; font-size: 0.95rem; color: #b0b8c8; } .footer-nav a:hover, .footer-links a:hover { color: var(--white); } .footer-newsletter .newsletter-form { display: flex; gap: 0; } .newsletter-input { flex: 1; padding: 8px 12px; border: 1px solid #3a4a62; background: transparent; color: var(--white); font-size: 0.95rem; border-radius: 0; } .newsletter-input::placeholder { color: #6a7a92; } .newsletter-submit { background: var(--red); color: var(--white); padding: 8px 14px; font-size: 1rem; cursor: pointer; border: none; transition: background var(--transition); } .newsletter-submit:hover { background: var(--red-hover); } .footer-bottom { text-align: center; padding: 14px; border-top: 1px solid #2a3a52; font-size: 0.875rem; color: #6a7a92; } /* ============================================================ MOBILE BOTTOM NAV (visible on mobile only) ============================================================ */ .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--navy); border-top: 2px solid var(--red); z-index: 500; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); } .mobile-bottom-nav .container { display: flex; justify-content: space-around; align-items: center; } .mobile-bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--white); font-size: 0.65rem; } .mobile-bottom-nav a svg { width: 24px; height: 24px; } .mobile-bottom-nav .bottom-nav-play svg { width: 32px; height: 32px; } /* ============================================================ MOBILE HAMBURGER ============================================================ */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; } .hamburger-left { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; } .hamburger span, .hamburger-left span { width: 24px; height: 2.5px; background: var(--text-primary); border-radius: 2px; transition: all var(--transition); } .mobile-search-icon { display: none; color: var(--text-primary); padding: 8px; justify-self: end; } .mobile-connexion-btn { display: none; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; padding: 4px; color: var(--text-primary); font-size: 0.55rem; font-family: var(--font-main); text-transform: capitalize; } .mobile-connexion-btn svg { width: 28px; height: 28px; stroke: var(--text-primary); fill: none; stroke-width: 1.5; } /* Top bar is always navy — keep its mobile controls white in both themes */ .top-bar .hamburger-left span { background: var(--white); } .top-bar .mobile-connexion-btn { color: var(--white); } .top-bar .mobile-connexion-btn svg { stroke: var(--white); } /* Mobile menu header */ .mobile-menu-header { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 18px 16px 14px; min-height: 70px; } .mobile-menu-logo { grid-column: 2; justify-self: center; font-family: var(--font-main); font-weight: 700; font-size: 1.2rem; color: var(--white); display: flex; flex-direction: column; align-items: center; gap: 2px; letter-spacing: 2px; text-decoration: none; line-height: 1.2; } .mobile-menu-logo-row { display: flex; align-items: center; gap: 3px; } .mobile-play-icon { display: inline-block; width: 0; height: 0; border-left: 10px solid var(--red); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin: 0 2px; } .mobile-menu-logo-slogan { font-family: var(--font-main); font-size: 0.5rem; font-weight: 400; letter-spacing: 3px; color: rgba(255,255,255,0.7); text-transform: uppercase; } .mobile-menu-user { grid-column: 3; justify-self: end; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; padding: 4px; color: var(--white); font-size: 0.6rem; font-family: var(--font-main); } .mobile-menu-user span { font-size: 0.6rem; color: rgba(255,255,255,0.8); } /* Mobile menu theme toggle bar */ .mobile-menu-theme-bar { display: flex; justify-content: center; align-items: center; background: var(--red); padding: 6px 0; } .mobile-menu-theme-bar .theme-toggle { background: rgba(0,0,0,0.25); } /* Mobile menu backdrop */ .mobile-menu-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.4); z-index: 999; } .mobile-menu-backdrop.active { display: block; } /* Mobile menu overlay - side drawer */ .mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 48%; max-width: 420px; min-width: 280px; height: 100vh; background: var(--navy); z-index: 1000; overflow-y: auto; padding: 0 0 20px; transform: translateX(-100%); transition: transform 0.3s ease; display: flex; flex-direction: column; } .mobile-menu-overlay.active { transform: translateX(0); } .mobile-menu-close { grid-column: 1; justify-self: start; background: none; border: none; color: var(--white); cursor: pointer; z-index: 1001; padding: 4px; line-height: 1; } .mobile-menu-close svg { width: 22px; height: 22px; stroke: var(--white); stroke-width: 2.5; } .mobile-menu-overlay .mobile-nav-list { display: flex; flex-direction: column; gap: 0; list-style: none; flex: 1; padding: 10px 16px 0; } .mobile-menu-overlay .mobile-nav-item > a { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; font-family: var(--font-main); font-size: 1.05rem; font-weight: 500; color: var(--white); border: 1px solid rgba(255,255,255,0.12); border-radius: 0; margin-bottom: -1px; background: transparent; transition: background 0.2s ease; } .mobile-menu-overlay .mobile-nav-item > a:hover { background: rgba(255,255,255,0.05); } .mob-arrow { font-size: 1.1rem; color: rgba(255,255,255,0.5); transition: transform 0.3s ease; } .mob-arrow-down { font-size: 0.9rem; } /* Mobile submenus */ .mobile-submenu { display: none; list-style: none; background: rgba(0,0,0,0.12); border: 1px solid rgba(255,255,255,0.08); border-top: none; margin-bottom: -1px; } .has-submenu.open .mobile-submenu { display: block; } .has-submenu.open > a .mob-arrow-down { transform: rotate(180deg); } .has-submenu.open > a { background: rgba(255,255,255,0.04); border-bottom-color: transparent; } .mobile-submenu li a { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px 11px 24px; font-family: var(--font-main); font-size: 0.95rem; font-weight: 400; color: rgba(255,255,255,0.9); border-bottom: 1px solid rgba(255,255,255,0.06); } .mobile-submenu li:last-child a { border-bottom: none; } /* Mobile menu footer */ .mobile-menu-footer { padding: 20px; margin-top: auto; } .mobile-menu-social { margin-bottom: 16px; } .mobile-social-label { font-family: var(--font-main); font-size: 0.95rem; font-weight: 600; color: var(--white); margin-bottom: 10px; display: block; } .mobile-social-icons { display: flex; gap: 12px; align-items: center; } .mobile-social-icons a svg { width: 22px; height: 22px; fill: var(--white); } .mobile-menu-separator { height: 1px; background: rgba(255,255,255,0.15); margin: 16px 0; } .mobile-menu-newsletter h4 { font-family: var(--font-main); font-size: 0.95rem; font-weight: 600; color: var(--white); margin-bottom: 4px; } .mobile-menu-newsletter p { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-bottom: 10px; } .mobile-newsletter-form { display: flex; gap: 0; } .mobile-newsletter-form input { flex: 1; padding: 8px 12px; background: transparent; border: 1px solid rgba(255,255,255,0.3); color: var(--white); font-size: 0.85rem; border-radius: 0; } .mobile-newsletter-form input::placeholder { color: rgba(255,255,255,0.4); } .mobile-newsletter-form button { padding: 8px 14px; background: var(--red); color: var(--white); border: none; cursor: pointer; font-size: 1rem; } /* ============================================================ CONNEXION / INSCRIPTION PANEL ============================================================ */ /* Auth panel - always dark navy design */ .auth-overlay { position: fixed; top: 0; right: -450px; width: 420px; height: 100vh; background: #081a2d; z-index: 2000; box-shadow: -4px 0 20px rgba(0,0,0,0.4); transition: right 0.35s ease; overflow-y: auto; } .auth-overlay.active { right: 0; } .auth-overlay-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .auth-overlay-backdrop.active { opacity: 1; visibility: visible; } .auth-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: #ffffff; cursor: pointer; z-index: 2; padding: 4px; line-height: 1; } .auth-close svg { width: 26px; height: 26px; stroke: #ffffff; stroke-width: 2; } .auth-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.15); padding-top: 10px; } .auth-tab { flex: 1; padding: 18px; text-align: center; font-family: var(--font-main); font-size: 1.1rem; font-weight: 600; text-transform: capitalize; letter-spacing: 0.5px; color: rgba(255,255,255,0.4); background: none; border: none; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: all 0.3s ease; } .auth-tab.active { color: #ffffff; border-bottom-color: #f40024; } .auth-form { padding: 24px 28px; display: none; } .auth-form.active { display: block; } .auth-form p.auth-intro { font-size: 0.88rem; color: rgba(255,255,255,0.7); margin-bottom: 8px; line-height: 1.5; } .auth-form p.auth-required { font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-bottom: 24px; } .auth-field { margin-bottom: 20px; } .auth-field label { display: block; font-family: var(--font-main); font-size: 0.85rem; font-weight: 600; color: #f40024; margin-bottom: 0; text-transform: capitalize; padding-left: 14px; border-left: 3px solid #f40024; line-height: 1.8; } .auth-field label .required { color: #f40024; } .auth-field input { width: 100%; padding: 10px 14px; border: none; border-bottom: 1px solid rgba(255,255,255,0.2); border-radius: 0; background: transparent; color: #ffffff; font-size: 0.9rem; font-family: var(--font-body); transition: border-color 0.3s ease; } .auth-field input:focus { outline: none; border-bottom-color: #f40024; } .auth-field input::placeholder { color: rgba(255,255,255,0.35); } .auth-field .field-hint { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-top: 4px; } .auth-field .password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.5); } .auth-field .password-toggle svg { width: 20px; height: 20px; stroke: rgba(255,255,255,0.5); fill: none; } .auth-field .field-wrapper { position: relative; } .auth-forgot { display: block; text-align: right; font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-top: 6px; text-decoration: none; } .auth-forgot:hover { color: rgba(255,255,255,0.8); } .auth-submit { display: block; margin: 28px auto 0; padding: 12px 40px; background: transparent; color: #ffffff; border: 1.5px solid #ffffff; font-family: var(--font-main); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; transition: all 0.3s ease; } .auth-submit:hover { background: #f40024; color: #ffffff; border-color: #f40024; } .auth-checkboxes { margin-bottom: 16px; margin-top: 20px; } .auth-checkbox { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 0.78rem; color: rgba(255,255,255,0.7); line-height: 1.4; } .auth-checkbox input[type="checkbox"] { accent-color: #f40024; margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; } .auth-checkbox a { color: rgba(255,255,255,0.9); text-decoration: underline; } .auth-checkbox a:hover { color: #f40024; } .auth-password-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; font-size: 0.72rem; color: rgba(255,255,255,0.5); margin-top: 6px; } @media (max-width: 480px) { .auth-overlay { width: 100%; right: -100%; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1fr; } .sidebar { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .categories-grid { grid-template-columns: repeat(2, 1fr); } .video-grid { grid-template-columns: 1fr; } .video-side { padding-bottom: 112.5%; } } @media (max-width: 768px) { .dossiers-slider { height: clamp(320px, 62vw, 460px); } .dossier-slide-title { bottom: 16px; padding: 0 7%; font-size: clamp(1.15rem, 4.4vw, 1.6rem); } .dossiers-dots { right: 5%; } .dossier-dot { width: 16px; height: 16px; margin-bottom: 26px; } .dossier-dot::after { height: 26px; } .dossiers-title-bar, .dossiers-more { font-size: 0.9rem; letter-spacing: 2px; padding: 10px; } .top-bar .social-icons { display: none; } .header-actions { display: none; } .hamburger-left { display: flex; } .mobile-search-icon { display: none; } .mobile-connexion-btn { display: flex; } .nav-list { display: none; } .main-nav { display: none; } .top-bar { padding: 8px 0; } .top-bar .container { display: grid; grid-template-columns: 44px 1fr 56px; grid-template-rows: auto; align-items: center; padding: 0 12px; gap: 0; } .hamburger-left { grid-column: 1; grid-row: 1; justify-self: start; align-self: center; padding: 6px; } .logo-area { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; } .mobile-connexion-btn { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; } .logo-area .logo img { height: 42px; } .hero-grid { grid-template-columns: 1fr; } .hero-grid > * { min-width: 0; } .side-articles { display: none; } .sidebar { display: none; } .main-cartouche img { height: 300px; } .main-cartouche .description { display: none; } .main-cartouche .author { display: none; } .express-portrait { aspect-ratio: 280/340; } .decryptage { display: none; } /* hidden on mobile — not in reference design */ .categories-grid { grid-template-columns: 1fr; } .podcasts-grid { grid-template-columns: 1fr; } .podcast-waveform { display: none; } .eclairage-card { grid-template-columns: 1fr; } .eclairage-card img { height: 200px; } .last-pictures-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .last-picture-card { height: 160px; } .footer-content { grid-template-columns: 1fr 1fr; } .mobile-bottom-nav { display: block; } body { padding-bottom: 70px; } /* ── Video section : on garde une respiration latérale sur mobile ── */ .video-section { padding: 0 12px 14px; } /* ── Video grid : un vrai écart entre la vidéo YouTube et le reel Instagram ── */ .video-grid { margin: 12px 0 0; gap: 10px; } /* ── Reel Instagram : la source est un portrait (400 x 450). Le 16:9 précédent en rognait les deux tiers → format carré. ── */ .video-side { height: auto; padding-bottom: 0; aspect-ratio: 1 / 1; } /* pastille "play" pour signaler qu'il s'agit d'une vidéo */ .video-side::before, .video-side::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; pointer-events: none; } .video-side::before { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); border: 2px solid rgba(255, 255, 255, 0.9); } .video-side::after { width: 0; height: 0; margin: -10px 0 0 -5px; border-left: 17px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } /* ── Voir plus button: align to end (right) on single column ── */ .voir-plus-btn { justify-content: flex-end; } .sondage-bar .text { font-size: 0.9rem; } /* ── Global overflow guard ── */ .container, section, article { max-width: 100%; } /* ── Rubriques : un seul article par rubrique, mais en grand ── */ .category-list { display: none; } .category-main-article { display: block; margin-bottom: 0; } /* hauteur explicite : la regle img[width][height]{aspect-ratio:attr(...)} annule l'aspect-ratio 16/9, et une image de hauteur 0 n'est jamais chargee par le lazy-loading. */ .category-main-article img { height: 50vw; max-height: 240px; content-visibility: visible; margin-bottom: 12px; } .category-main-article h3 { font-size: 1.25rem; line-height: 1.25; margin-bottom: 4px; } .category-main-article .cat-item-date { display: block; } .categories-section { padding: 24px 0; } .categories-grid { gap: 28px 0; } } @media (max-width: 480px) { .hero-grid { gap: 16px; } .main-cartouche img { height: 250px; } .main-cartouche h2 { font-size: 1.2rem; } .last-pictures-grid { grid-template-columns: 1fr; } .last-picture-card { height: 140px; } .footer-content { grid-template-columns: 1fr; } .video-main img { min-height: 220px; } } /* ============================================================ FLOATING BACK TO TOP BUTTON ============================================================ */ .floating-top-btn { position: fixed; bottom: 2rem; right: 2rem; width: 44px; height: 54px; background-color: var(--red); border: none; border-radius: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; /* si le bouton ne contient qu'un caractere (▲) on le masque : la fleche est en CSS */ font-size: 0; line-height: 0; color: transparent; opacity: 1; visibility: visible; transition: var(--transition); z-index: 1000; padding: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); } .floating-top-btn img { width: 100%; height: 100%; display: block; object-fit: contain; } /* Fleche blanche, proportions de la crea (Hautdepage-Icon.svg : carre 36,85 x 44,59, triangle 18,39 de base x 15,93 de haut, centre) */ .floating-top-btn::after { content: ""; display: block; width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 19px solid var(--white); } /* quand le bouton contient le SVG (pages de la crea), c'est lui qui porte le carre rouge */ .floating-top-btn:has(img) { background-color: transparent; box-shadow: none; } .floating-top-btn:has(img)::after { display: none; } .floating-top-btn.visible { opacity: 1; visibility: visible; } .floating-top-btn:hover { opacity: 1; background-color: #c60020; transform: translateY(-2px); } .floating-top-btn:has(img):hover { background-color: transparent; } @media (max-width: 768px) { .floating-top-btn { bottom: 5.5rem; right: 1rem; width: 40px; height: 49px; } .floating-top-btn::after { border-left-width: 10px; border-right-width: 10px; border-bottom-width: 18px; } } @media (max-width: 480px) { .floating-top-btn { bottom: 5rem; right: 0.75rem; width: 36px; height: 44px; } .floating-top-btn::after { border-left-width: 9px; border-right-width: 9px; border-bottom-width: 16px; } } /* ============================================================ ARTICLE PRINCIPAL « EN DIRECT » Créa : EnDirect_SVG & Video.rar (EnDirect_BG.svg 913,7 x 38,05 — mesuré 1:1 sur EnDirect_Reference.mp4 à 1920 px). Activation :
============================================================ */ .main-cartouche .cartouche-media { position: relative; border-radius: 4px; overflow: hidden; line-height: 0; } .main-cartouche .cartouche-media > img, .main-cartouche .cartouche-media > video { display: block; width: 100%; height: 380px; object-fit: cover; border-radius: 4px; aspect-ratio: 16/9; background: var(--navy); } /* Bandeau : reprise exacte du masque dégradé de EnDirect_BG.svg. Rouge #f40024 opaque à gauche, alpha 0 à 80,76 % de la largeur. */ .main-cartouche.is-live .live-badge { position: absolute; left: 0; right: 0; bottom: 0; height: 38.05px; display: flex; align-items: center; padding-left: 10px; pointer-events: none; background: linear-gradient(to right, rgba(244, 0, 36, 1) -0.45%, rgba(244, 0, 36, 0.937) 2.79%, rgba(244, 0, 36, 0.655) 19.85%, rgba(244, 0, 36, 0.420) 36.09%, rgba(244, 0, 36, 0.239) 50.71%, rgba(244, 0, 36, 0.106) 62.90%, rgba(244, 0, 36, 0.027) 73.45%, rgba(244, 0, 36, 0) 80.76%); } .main-cartouche.is-live .live-badge img { display: block; height: 20.97px; width: auto; } @media (max-width: 768px) { .main-cartouche.is-live .live-badge { height: 28px; padding-left: 8px; } .main-cartouche.is-live .live-badge img { height: 15.4px; } } @media (max-width: 480px) { .main-cartouche.is-live .live-badge { height: 24px; padding-left: 7px; } .main-cartouche.is-live .live-badge img { height: 13.2px; } } /* ============================================================ MENU UTILISATEUR CONNECTÉ (créa « Personalized UX » p.3) L'état est porté par (ou "out"). ============================================================ */ .user-menu { position: relative; display: flex; } html:not([data-auth="in"]) .user-menu [data-auth="in"] { display: none; } html[data-auth="in"] .user-menu [data-auth="out"] { display: none; } html:not([data-auth="in"]) .mobile-connexion-btn[data-auth="in"] { display: none; } html[data-auth="in"] .mobile-connexion-btn[data-auth="out"] { display: none; } .user-menu-panel { position: absolute; /* + 32 et non + 14 : le libelle du bouton est desormais hors flux, .user-menu ne fait plus que la hauteur de l'icone */ top: calc(100% + 32px); right: -20px; min-width: 240px; background: #fff; border-radius: 2px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); z-index: 1500; overflow: hidden; display: none; } .user-menu.open .user-menu-panel { display: block; } .user-menu-panel a { display: flex; align-items: center; gap: 16px; padding: 0 22px; height: 52px; font-family: var(--font-main); font-weight: 400; font-size: 1rem; color: var(--navy); border-bottom: 1px solid var(--navy); white-space: nowrap; } .user-menu-panel a svg { width: 20px; height: 20px; flex-shrink: 0; } .user-menu-panel a:hover { background: #f1f3f5; color: var(--navy); } .user-menu-panel a.logout { background: var(--red); color: #fff; border-bottom: none; height: 44px; /* créa : dernière ligne plus courte */ } .user-menu-panel a.logout:hover { background: var(--red-hover); color: #fff; } @media (max-width: 768px) { .user-menu-panel { right: 0; } } /* ============================================================ BASCULE ANCIEN / NOUVEAU PANNEAU DE CONNEXION Attribut sur la balise : data-auth-ui="v1" -> ancien panneau (celui d'avant le 01/09) data-auth-ui="v2" -> nouveau panneau (crea Personalized UX p.1/p.2) Absence d'attribut = v2 (comportement des 20 autres pages, inchangees). ============================================================ */ html[data-auth-ui="v1"] .auth-form.v2 { display: none !important; } html:not([data-auth-ui="v1"]) .auth-form.v1 { display: none !important; } /* ============================================================ PANNEAU CONNEXION / INSCRIPTION — mise en conformité créa « Personalized UX (After SignUp)_V.2 » p.1 et p.2 ============================================================ */ /* Onglet actif : fond navy clair, sans soulignement rouge (créa) */ html:not([data-auth-ui="v1"]) .auth-tabs { border-bottom: none; } html:not([data-auth-ui="v1"]) .auth-tab { border-bottom: none; margin-bottom: 0; padding: 16px 18px; } html:not([data-auth-ui="v1"]) .auth-tab.active { color: #fff; background: #0d2a44; border-bottom-color: transparent; } /* Champ : boîte navy clair, filet rouge à gauche, libellé à l'intérieur */ html:not([data-auth-ui="v1"]) .auth-field { margin-bottom: 20px; } html:not([data-auth-ui="v1"]) .auth-field .field-box { position: relative; display: flex; align-items: center; height: 39.6px; /* créa 72 px */ background: #0d2a44; border-left: 6px solid var(--red); /* créa 11 px */ border-radius: 0 3px 3px 0; } html:not([data-auth-ui="v1"]) .auth-field .field-box input { width: 100%; height: 100%; padding: 0 14px; border: none; background: transparent; color: #fff; font-family: var(--font-body); font-size: 0.9rem; outline: none; border-radius: 0 3px 3px 0; } html:not([data-auth-ui="v1"]) .auth-field .field-box input::placeholder { color: transparent; } html:not([data-auth-ui="v1"]) .auth-field .field-box .field-legend { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-family: var(--font-main); font-weight: 600; font-size: 0.9rem; color: #fff; pointer-events: none; transition: opacity 0.15s; } html:not([data-auth-ui="v1"]) .auth-field .field-box input:not(:placeholder-shown) ~ .field-legend { opacity: 0; } html:not([data-auth-ui="v1"]) .auth-field .field-box .field-legend .required { color: var(--red); } html:not([data-auth-ui="v1"]) .auth-field .field-box .password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0; cursor: pointer; color: #fff; opacity: 0.85; line-height: 0; } html:not([data-auth-ui="v1"]) .auth-field .field-note { display: block; font-size: 0.55rem; /* créa 16 px */ color: rgba(255, 255, 255, 0.5); margin: 6px 0 0 14px; } html:not([data-auth-ui="v1"]) .auth-field .auth-forgot { display: inline-block; margin: 6px 0 0 14px; font-size: 0.55rem; } /* Cases à cocher (créa : filet blanc, réserve navy, pastille rouge) */ html:not([data-auth-ui="v1"]) .auth-checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14.5px; height: 15.5px; /* créa 26,4 x 28,2 px */ border: 1px solid #fff; background: var(--navy); border-radius: 2px; cursor: pointer; position: relative; } html:not([data-auth-ui="v1"]) .auth-checkbox input[type="checkbox"]:checked::after { content: ''; position: absolute; inset: 1.65px; background: var(--red); border-radius: 1px; } /* Bouton d'envoi : pastille blanche alignée à droite (créa) */ html:not([data-auth-ui="v1"]) .auth-submit { display: block; margin: 28px 0 0 auto; padding: 0 22px; height: 28.3px; /* créa 51,5 px */ line-height: 28.3px; background: #fcfcfc; color: var(--navy); border: 1px solid #fcfcfc; border-radius: 999px; font-family: var(--font-main); font-weight: 300; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; } html:not([data-auth-ui="v1"]) .auth-submit:hover { background: var(--red); border-color: var(--red); color: #fff; } /* Étape de vérification e-mail (créa p.2) */ html:not([data-auth-ui="v1"]) .auth-overlay.verify .auth-tabs { display: none; } html:not([data-auth-ui="v1"]) .auth-verify-title { font-family: var(--font-main); font-weight: 700; font-size: 1.375rem; /* créa 40 px */ color: #fff; margin: 0 0 10px; } html:not([data-auth-ui="v1"]) .auth-verify-lead { font-family: var(--font-main); font-weight: 300; font-size: 0.83rem; /* créa 24 px */ line-height: 1.35; color: rgba(255, 255, 255, 0.85); margin: 0 0 8px; } html:not([data-auth-ui="v1"]) .auth-verify-lead b { font-weight: 500; color: #fff; } html:not([data-auth-ui="v1"]) .auth-code { display: flex; gap: 15.8px; margin: 24px 0 0; } html:not([data-auth-ui="v1"]) .auth-code input { width: 49px; /* créa 89 px */ height: 52.2px; /* créa 94,9 px */ border: 2px solid #fcfcfc; border-radius: 5px; background: var(--navy); color: #fff; font-family: var(--font-main); font-weight: 300; font-size: 2.72rem; /* créa 79,19 px */ text-align: center; outline: none; box-sizing: border-box; padding: 0; } html:not([data-auth-ui="v1"]) .auth-code input:focus { border-color: var(--red); } html:not([data-auth-ui="v1"]) .auth-resend { display: inline-block; margin-top: 16px; font-size: 0.72rem; color: rgba(255, 255, 255, 0.7); text-decoration: underline; } html:not([data-auth-ui="v1"]) .auth-resend:hover { color: #fff; } @media (max-width: 480px) { html:not([data-auth-ui="v1"]) .auth-code { gap: 9px; } html:not([data-auth-ui="v1"]) .auth-code input { width: 100%; height: 48px; font-size: 2.1rem; } } /* ============================================================ PANNEAU « MOT DE PASSE OUBLIÉ » (vues #authForgot / #authForgotSent) Ajout du 2026-09-08 — pour l'instant sur index.html uniquement. Volontairement NON préfixé par html:not([data-auth-ui="v1"]) : la vue doit s'afficher à l'identique dans l'ancien (v1) et le nouveau (v2) panneau. Les sélecteurs d'id (1,x,x) passent donc devant les règles v2 (0,3,x) sans !important. ============================================================ */ .auth-overlay.forgot .auth-tabs { display: none; } #authForgot .auth-verify-title, #authForgotSent .auth-verify-title { font-family: var(--font-main); font-weight: 700; font-size: 1.375rem; color: #fff; margin: 0 0 10px; } #authForgot .auth-verify-lead, #authForgotSent .auth-verify-lead { font-family: var(--font-main); font-weight: 300; font-size: 0.83rem; line-height: 1.35; color: rgba(255, 255, 255, 0.85); margin: 0 0 8px; } #authForgot .auth-verify-lead b, #authForgotSent .auth-verify-lead b { font-weight: 500; color: #fff; } #authForgot .auth-field { margin: 24px 0 0; } #authForgot .field-box { position: relative; display: flex; align-items: center; height: 39.6px; background: #0d2a44; border-left: 6px solid var(--red); border-radius: 0 3px 3px 0; } #authForgot .field-box input { width: 100%; height: 100%; padding: 0 14px; border: none; background: transparent; color: #fff; font-family: var(--font-body); font-size: 0.9rem; outline: none; border-radius: 0 3px 3px 0; } #authForgot .field-box input::placeholder { color: transparent; } #authForgot .field-box .field-legend { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-family: var(--font-main); font-weight: 600; font-size: 0.9rem; color: #fff; pointer-events: none; transition: opacity 0.15s; } #authForgot .field-box input:not(:placeholder-shown) ~ .field-legend { opacity: 0; } #authForgot .field-box .field-legend .required { color: var(--red); } #authForgot .field-note { display: block; font-size: 0.55rem; color: rgba(255, 255, 255, 0.5); margin: 6px 0 0 14px; } #authForgot .auth-submit, #authForgotSent .auth-submit { display: block; margin: 28px 0 0 auto; padding: 0 22px; height: 28.3px; line-height: 28.3px; background: #fcfcfc; color: var(--navy); border: 1px solid #fcfcfc; border-radius: 999px; font-family: var(--font-main); font-weight: 300; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; } #authForgot .auth-submit:hover, #authForgotSent .auth-submit:hover { background: var(--red); border-color: var(--red); color: #fff; } #authForgot .auth-back, #authForgotSent .auth-resend { display: inline-block; margin-top: 16px; font-family: var(--font-main); font-weight: 300; font-size: 0.72rem; color: rgba(255, 255, 255, 0.7); text-decoration: underline; } #authForgot .auth-back:hover, #authForgotSent .auth-resend:hover { color: #fff; } /* ============================================================ MESSAGES D'ERREUR DU PANNEAU (.auth-error) — ajout 2026-09-08 Non préfixé par html:not([data-auth-ui="v1"]) : le message doit s'afficher à l'identique dans l'ancien et le nouveau panneau. Vide et masqué par défaut, révélé par la classe .show. Bloc rouge plein + pastille « ! » : sur le navy du panneau, un simple texte rouge ou un fond translucide passait inaperçu. ============================================================ */ .auth-error { display: none; } .auth-error.show { display: flex; align-items: center; gap: 11px; margin: 20px 0 0; padding: 13px 16px; background: var(--red); border-radius: 3px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); font-family: var(--font-main); font-weight: 400; font-size: 0.92rem; line-height: 1.3; color: #fff; animation: authErrorIn 0.32s ease-out both; } .auth-error.show::before { content: '!'; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 50%; background: #fff; color: var(--red); font-family: var(--font-main); font-weight: 700; font-size: 0.95rem; line-height: 1; } @keyframes authErrorIn { 0% { opacity: 0; transform: translateY(-6px); } 60% { opacity: 1; transform: translateX(3px); } 80% { transform: translateX(-2px); } 100% { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .auth-error.show { animation: none; } }