/* ============================================================ Omar Belkaab — portfolio Frandroid Accent #5770FF : couleur de marque Frandroid. Séries data-viz validées sur surface #171A28. ============================================================ */ :root{ color-scheme: dark; /* surfaces, teintées bleu nuit d'après le header Frandroid (#2C3049) */ --bg: #0E101A; --surface-1: #171A28; --surface-2: #1E2233; --surface-3: #262B3E; --line: #2E3446; --line-soft: #232838; /* encre */ --text-primary: #F2F4FA; --text-secondary: #B6BCD0; --text-muted: #7E869E; /* marque */ --accent: #5770FF; /* indigo Frandroid */ --accent-soft: #8496FF; --accent-dim: rgba(87,112,255,.13); /* séries data-viz (validées : bande de clarté, chroma, CVD, contraste) */ --series-1: #5770FF; --series-2: #E05A45; /* rampe séquentielle de la carte de chaleur : du plus faible au plus fort */ --heat-1: #414E9E; --heat-2: #4E60C9; --heat-3: #5C74FF; --heat-4: #8496FF; --heat-5: #B0BCFF; /* détails qui changent avec le thème */ --ink-hover: #FFFFFF; /* titre survolé */ --img-border: rgba(255,255,255,.10); /* liseré des photos */ --shadow-rgb: 0 0 0; --shadow-k: 1; /* ombres : couleur et intensité */ --tip-bg: #080A12; --tip-text: #F2F4FA; --tip-muted: #7E869E; --wrap: 1180px; --r: 14px; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Thème clair, activé par le bouton de l'en-tête (data-theme="light" sur ). Séries et rampe revalidées sur fond blanc : contraste, daltonisme, clarté. */ :root[data-theme="light"]{ color-scheme: light; --bg: #F5F6FA; --surface-1: #FFFFFF; --surface-2: #ECEEF5; --surface-3: #E1E5EE; --line: #D3D8E4; --line-soft: #E3E7EF; --text-primary: #151928; --text-secondary: #454E66; --text-muted: #636C86; --accent-soft: #3A50D9; /* l'indigo « texte » doit foncer sur fond clair */ --accent-dim: rgba(87,112,255,.11); --series-1: #4A63F0; --series-2: #D2462F; /* sur fond clair, « foncé = fort » : la rampe s'inverse */ --heat-1: #9DAAFF; --heat-2: #7A8CFF; --heat-3: #5B70F2; --heat-4: #3F52D2; --heat-5: #29379A; --ink-hover: #000000; --img-border: rgba(20,25,50,.10); --shadow-rgb: 30 38 70; --shadow-k: .28; --tip-bg: #151928; --tip-text: #F2F4FA; --tip-muted: #A3AAC0; } *,*::before,*::after{ box-sizing:border-box } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth } body{ margin:0; background:var(--bg); color:var(--text-primary); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; display:flex; flex-direction:column; min-height:100vh; } main{ flex:1 } a{ color:inherit } .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 } .skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:#fff; padding:10px 18px; border-radius:0 0 8px 0 } .skip:focus{ left:0 } :where(a,button,input,select,textarea):focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; border-radius:4px } /* ---------------- en-tête ---------------- */ .site-head{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft); } .head-inner{ display:flex; align-items:center; justify-content:space-between; height:62px; gap:20px } .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none } .brand .sig{ width:30px; height:30px; border-radius:8px; flex:none; background:linear-gradient(135deg, var(--accent), #8496FF); display:grid; place-items:center; color:#fff; font-weight:700; font-size:.82rem; letter-spacing:.02em; } .brand .who{ font-weight:600; font-size:.94rem; letter-spacing:-.01em } @media (max-width:520px){ .brand .who{ display:none } } .site-head nav{ display:flex; gap:4px; font-size:.91rem } .site-head nav a{ color:var(--text-secondary); text-decoration:none; padding:7px 13px; border-radius:8px; transition:color .15s, background .15s; } .site-head nav a:hover{ color:var(--text-primary); background:var(--surface-2) } .site-head nav a[aria-current="page"]{ color:var(--accent-soft); background:var(--accent-dim) } /* bouton clair / sombre, au bout de l'en-tête */ .head-inner{ position:relative } .theme-btn{ flex:none; width:38px; height:38px; display:grid; place-items:center; cursor:pointer; background:none; border:1px solid var(--line); border-radius:10px; color:var(--text-secondary); transition:color .15s, border-color .15s, background .15s; } .theme-btn:hover{ color:var(--text-primary); border-color:var(--accent); background:var(--surface-2) } .theme-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round } .site-head nav{ margin-left:auto } /* sous 780 px, l'en-tête passe sur deux lignes : les six entrées et le bouton de thème ne tiennent pas sur une seule sans déborder */ @media (max-width:780px){ .head-inner{ flex-direction:column; align-items:flex-start; height:auto; padding-block:11px; gap:9px; } .site-head nav{ width:100%; gap:2px; flex-wrap:wrap; margin-left:0 } .theme-btn{ position:absolute; top:9px; right:20px; width:34px; height:34px } .site-head nav a{ padding:6px 10px; font-size:.85rem } } /* ---------------- hero ---------------- */ .hero{ position:relative; padding:clamp(56px,10vw,112px) 0 clamp(40px,6vw,64px); overflow:hidden } .hero::before{ content:""; position:absolute; inset:-30% -10% auto -10%; height:120%; background:radial-gradient(52% 58% at 14% 0%, rgba(87,112,255,.22), transparent 68%); pointer-events:none; } .hero > .wrap{ position:relative } .eyebrow{ margin:0 0 18px; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-soft); font-weight:600; display:inline-flex; align-items:center; gap:10px; } .eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); border-radius:2px } h1{ margin:0 0 22px; font-size:clamp(2.5rem,7.5vw,4.9rem); line-height:1.03; letter-spacing:-.033em; font-weight:700; } .lede{ margin:0; max-width:60ch; font-size:clamp(1.05rem,2.2vw,1.28rem); line-height:1.62; color:var(--text-secondary); } .lede strong{ color:var(--text-primary); font-weight:650 } /* ---------------- compteurs ---------------- */ .kpis{ display:grid; gap:14px; margin:clamp(34px,6vw,54px) 0 0; padding:0; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); } .kpi{ background:var(--surface-1); border:1px solid var(--line-soft); border-radius:var(--r); padding:20px 18px 18px; position:relative; overflow:hidden; } .kpi::before{ content:""; position:absolute; inset:0 auto auto 0; width:100%; height:2px; background:linear-gradient(90deg, var(--accent), transparent 72%); } .kpi-num{ display:block; font-size:clamp(1.85rem,4vw,2.4rem); font-weight:700; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; } .kpi-lab{ display:block; margin-top:10px; font-size:.83rem; color:var(--text-secondary); line-height:1.35; } /* ---------------- sections ---------------- */ section{ padding:clamp(48px,7vw,84px) 0 } .band{ background:var(--surface-1); border-block:1px solid var(--line-soft) } .prose{ max-width:66ch } .bio-lead{ margin:0 0 16px; font-size:clamp(1.08rem,2.3vw,1.32rem); line-height:1.55; letter-spacing:-.012em } .bio{ margin:0; color:var(--text-secondary) } /* ---------------- parcours ---------------- */ .parcours{ list-style:none; margin:clamp(30px,5vw,46px) 0 0; padding:0 0 0 26px; position:relative; max-width:72ch; } .parcours::before{ content:""; position:absolute; left:5px; top:8px; bottom:12px; width:2px; background:linear-gradient(var(--accent), var(--line)); border-radius:2px; } .parcours li{ position:relative; padding:0 0 22px } .parcours li:last-child{ padding-bottom:0 } .parcours li::before{ content:""; position:absolute; left:-26px; top:7px; width:12px; height:12px; border-radius:50%; background:var(--surface-1); border:2px solid var(--line); } .band .parcours li::before{ background:var(--surface-1) } .parcours li.now::before{ background:var(--accent); border-color:var(--accent) } .parcours .an{ display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-soft); font-weight:600; margin-bottom:4px; } .parcours .fait{ display:block; color:var(--text-secondary); font-size:.95rem; line-height:1.55 } .parcours .fait b{ color:var(--text-primary); font-weight:600 } .parcours-suite{ margin:clamp(24px,4vw,34px) 0 0 } /* ---------------- page À propos ---------------- */ .photo-recit{ margin:0 0 clamp(30px,5vw,48px); max-width:880px } .photo-recit img{ display:block; width:100%; height:auto; border-radius:22px; border:1px solid var(--img-border); box-shadow:0 22px 50px -18px rgb(var(--shadow-rgb) / calc(.75 * var(--shadow-k))); } .recit p{ margin:0 0 1.1em; color:var(--text-secondary); line-height:1.7 } .recit .bio-lead{ color:var(--text-primary); line-height:1.55; margin-bottom:1.2em } .recit .chute{ color:var(--text-primary); font-weight:600 } .recit-suite{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin:0 !important; } .sec-head{ margin:0 0 clamp(30px,5vw,48px); max-width:62ch } .sec-head h2{ margin:0 0 12px; font-size:clamp(1.65rem,4vw,2.4rem); letter-spacing:-.028em; line-height:1.14; font-weight:700 } .sec-head p{ margin:0; color:var(--text-secondary) } .sec-head .tagline{ display:inline-flex; align-items:center; gap:9px; margin:0 0 14px; font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--accent-soft); font-weight:600; } .sec-head .tagline::before{ content:""; width:22px; height:2px; background:var(--accent); border-radius:2px } .row-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:0 0 26px } .row-head h2{ margin:0; font-size:clamp(1.35rem,3vw,1.75rem); letter-spacing:-.02em } .more-link{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--accent-soft); font-weight:600; font-size:.92rem; transition:gap .16s; } .more-link:hover{ gap:13px } .more-link::after{ content:"→" } /* ---------------- figures ---------------- */ .fig{ margin:0 0 clamp(26px,4vw,40px); background:var(--surface-1); border:1px solid var(--line-soft); border-radius:var(--r); padding:clamp(20px,3.2vw,32px); } .band .fig{ background:var(--surface-2) } .fig figcaption{ margin:0 0 26px; max-width:66ch } .fignum{ display:flex; align-items:center; gap:11px; font-family:var(--mono); font-size:.95rem; font-weight:600; letter-spacing:.06em; color:var(--accent-soft); margin-bottom:12px; } .fignum::after{ content:""; flex:0 1 46px; height:1px; background:var(--line) } .fig h3{ margin:0 0 10px; font-size:clamp(1.15rem,2.6vw,1.5rem); letter-spacing:-.018em; line-height:1.25; font-weight:650 } .fig figcaption p{ margin:0; color:var(--text-secondary); font-size:.95rem } .fig figcaption em{ display:block; margin-top:8px; font-style:normal; font-size:.83rem; color:var(--text-muted) } .fig figcaption p.fig-methode{ margin-top:10px; font-size:.83rem; color:var(--text-muted) } /* sélecteur de période, au-dessus d'un graphique */ .seg{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px } .seg button{ font:inherit; font-size:.86rem; color:var(--text-secondary); cursor:pointer; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:7px 14px; transition:color .15s, border-color .15s, background .15s; } .seg button:hover{ color:var(--text-primary); border-color:var(--surface-3) } .seg button[aria-pressed="true"]{ color:var(--accent-soft); background:var(--accent-dim); border-color:var(--accent); } .seg-note{ margin:0 0 18px; font-size:.83rem; color:var(--text-muted) } @media (max-width:480px){ .seg{ gap:5px } .seg button{ font-size:.8rem; padding:6px 10px } } .plot{ width:100% } .plot svg{ display:block; width:100%; height:auto; overflow:visible } .ax-line{ stroke:var(--line); stroke-width:1; fill:none } .grid-line{ stroke:var(--line-soft); stroke-width:1; fill:none } .ax-text{ fill:var(--text-muted); font-size:11px; font-family:var(--sans) } .ax-text.val{ font-variant-numeric:tabular-nums } .lbl{ fill:var(--text-secondary); font-size:11.5px; font-family:var(--sans) } .lbl-strong{ fill:var(--text-primary); font-size:12px; font-weight:600; font-family:var(--sans) } .bar{ transition:opacity .15s } .plot:hover .bar{ opacity:.5 } .plot .bar:hover, .plot .bar.on{ opacity:1 } .hit{ fill:transparent; cursor:pointer } .legend{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 0 18px; padding:0; list-style:none; font-size:.88rem; color:var(--text-secondary) } .legend li{ display:flex; align-items:center; gap:8px } .swatch{ width:22px; height:3px; border-radius:2px; flex:none } .tip{ position:fixed; z-index:60; pointer-events:none; background:var(--tip-bg); color:var(--tip-text); border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:.82rem; line-height:1.45; box-shadow:0 10px 32px rgb(var(--shadow-rgb) / calc(.6 * var(--shadow-k))); max-width:230px; } .tip b{ font-variant-numeric:tabular-nums } .tip .k{ color:var(--tip-muted); display:block; font-size:.73rem; letter-spacing:.07em; text-transform:uppercase; margin-bottom:3px } /* ---------------- filtres ---------------- */ .filters{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 20px; align-items:center } .field{ position:relative; display:flex; align-items:center } .field.grow{ flex:1 1 280px; min-width:0 } .field .ico{ position:absolute; left:14px; width:17px; height:17px; pointer-events:none; stroke:var(--text-muted); fill:none; stroke-width:1.7; stroke-linecap:round } .filters input, .filters select{ font:inherit; font-size:.92rem; color:var(--text-primary); background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:11px 14px; width:100%; transition:border-color .15s; } .filters input{ padding-left:40px } .filters input::placeholder{ color:var(--text-muted) } .filters input:hover, .filters select:hover{ border-color:var(--surface-3) } .filters input:focus, .filters select:focus{ border-color:var(--accent) } .filters select{ appearance:none; padding-right:36px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237E869E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:12px; } .reset{ font:inherit; font-size:.88rem; color:var(--text-secondary); cursor:pointer; background:none; border:1px solid var(--line); border-radius:10px; padding:11px 16px; transition:color .15s, border-color .15s } .reset:hover{ color:var(--text-primary); border-color:var(--accent) } .count{ margin:0 0 22px; font-size:.87rem; color:var(--text-muted); font-variant-numeric:tabular-nums } .count b{ color:var(--accent-soft); font-weight:600 } /* ---------------- grille de cartes ---------------- */ .grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)) } .card{ position:relative; display:flex; flex-direction:column; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; transition:border-color .16s, transform .16s; } .band .card{ background:var(--surface-2) } .card:hover{ border-color:var(--accent); transform:translateY(-3px) } .card:focus-within{ border-color:var(--accent) } .card .thumb{ position:relative; aspect-ratio:16/9; background:var(--surface-3); overflow:hidden; flex:none } .card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .3s } .card .thumb img.ok{ opacity:1 } .card .thumb.none::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 100% at 12% 0%, rgba(87,112,255,.24), transparent 62%), var(--surface-3); } .card .body{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:9px; flex:1 } .card .meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.72rem; color:var(--text-muted) } .card .rub{ color:var(--accent-soft); font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:.68rem } .card .dot{ opacity:.45 } .card h3{ margin:0; font-family:var(--sans); font-size:.98rem; line-height:1.38; font-weight:600; letter-spacing:-.008em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; } .card h3 a{ text-decoration:none; color:var(--text-primary) } .card:hover h3 a{ color:var(--ink-hover) } .card h3 a::after{ content:""; position:absolute; inset:0 } .card .tag{ margin-top:auto; font-size:.72rem; color:var(--text-muted); display:flex; align-items:center; gap:7px } .card .tag i{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none } .more-wrap{ margin-top:34px; text-align:center } .more{ font:inherit; font-size:.93rem; font-weight:600; cursor:pointer; color:var(--text-primary); background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:13px 32px; transition:border-color .15s, background .15s } .more:hover{ border-color:var(--accent); background:var(--surface-3) } .end{ margin:0; color:var(--text-muted); font-size:.87rem } .empty{ grid-column:1/-1; text-align:center; padding:56px 20px; color:var(--text-muted) } .empty b{ display:block; color:var(--text-secondary); margin-bottom:6px; font-size:1.05rem } /* ---------------- accroche tendances ---------------- */ .punch{ display:grid; gap:22px; align-items:center; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r); padding:clamp(24px,4vw,40px); } @media (max-width:760px){ .punch{ grid-template-columns:1fr } } .punch .big{ font-size:clamp(3rem,9vw,5.2rem); font-weight:700; line-height:.95; letter-spacing:-.04em; color:var(--accent-soft); font-variant-numeric:tabular-nums; } .punch .big small{ font-size:.36em; letter-spacing:-.01em; margin-left:.06em; vertical-align:.14em; font-weight:650 } .punch .cap{ margin:14px 0 0; color:var(--text-secondary); font-size:.95rem } .punch h3{ margin:0 0 12px; font-size:clamp(1.25rem,2.8vw,1.7rem); letter-spacing:-.02em; line-height:1.24 } .punch p{ margin:0 0 18px; color:var(--text-secondary) } /* ---------------- contact ---------------- */ .contact-grid{ display:grid; gap:34px; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) } @media (max-width:820px){ .contact-grid{ grid-template-columns:1fr } } .form{ display:grid; gap:16px } .form .pair{ display:grid; gap:16px; grid-template-columns:1fr 1fr } @media (max-width:560px){ .form .pair{ grid-template-columns:1fr } } .form label{ display:block; font-size:.83rem; color:var(--text-secondary); margin-bottom:7px; font-weight:550 } .form input, .form select, .form textarea{ font:inherit; font-size:.95rem; color:var(--text-primary); width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; transition:border-color .15s; } .form textarea{ min-height:170px; resize:vertical; line-height:1.55 } .form input:focus, .form select:focus, .form textarea:focus{ border-color:var(--accent) } .form input::placeholder, .form textarea::placeholder{ color:var(--text-muted) } .form .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none } .submit{ font:inherit; font-size:.96rem; font-weight:600; cursor:pointer; color:#fff; background:var(--accent); border:1px solid var(--accent); border-radius:11px; padding:13px 30px; justify-self:start; transition:background .15s, transform .12s; } .submit:hover{ background:#4660F0 } .submit:active{ transform:translateY(1px) } .submit[disabled]{ opacity:.55; cursor:progress } .form-msg{ margin:0; font-size:.9rem; padding:12px 14px; border-radius:10px; display:none } .form-msg.ok{ display:block; background:rgba(87,112,255,.12); border:1px solid var(--accent); color:var(--text-primary) } .form-msg.ko{ display:block; background:rgba(224,90,69,.12); border:1px solid var(--series-2); color:var(--text-primary) } .aside-card{ background:var(--surface-1); border:1px solid var(--line-soft); border-radius:var(--r); padding:24px } .band .aside-card{ background:var(--surface-2) } .aside-card h3{ margin:0 0 12px; font-size:1.05rem; letter-spacing:-.015em } .aside-card p{ margin:0 0 18px; color:var(--text-secondary); font-size:.92rem } .links{ list-style:none; margin:0; padding:0; display:grid; gap:9px } .links a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; text-decoration:none; font-weight:550; font-size:.92rem; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:10px; transition:border-color .15s, background .15s; } .band .links a{ background:var(--surface-3) } .links a:hover{ border-color:var(--accent) } .links a span{ font-weight:400; font-size:.84rem; color:var(--text-muted) } /* ---------------- pied ---------------- */ .site-foot{ border-top:1px solid var(--line-soft); padding:36px 0 48px; color:var(--text-muted); font-size:.87rem; margin-top:auto } .site-foot p{ margin:0 0 8px; max-width:72ch } .site-foot a{ color:var(--text-secondary) } .site-foot .fine{ font-size:.8rem; opacity:.75 } /* ---------------- mobile ---------------- */ @media (max-width:640px){ .grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px } .card .body{ padding:11px 12px 13px; gap:7px } .card h3{ font-size:.88rem; -webkit-line-clamp:5 } .card .meta{ font-size:.66rem; gap:5px } .card .rub{ font-size:.63rem; letter-spacing:.02em } .card .dot{ display:none } .card .tag{ font-size:.67rem } .field{ flex:1 1 100% } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *{ transition:none !important; animation:none !important } .card:hover{ transform:none } } /* gras dans les légendes de figure */ .fig figcaption p b{ color:var(--text-primary); font-weight:600 } /* ---------------- les quatre âges ---------------- */ .ages{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); } .age{ background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r); padding:22px 20px 24px; position:relative; } .age::before{ content:""; position:absolute; inset:0 auto auto 0; width:100%; height:2px; background:linear-gradient(90deg, var(--line), transparent 70%); border-radius:var(--r) var(--r) 0 0; } .age.now::before{ background:linear-gradient(90deg, var(--accent), transparent 72%) } .age-an{ display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); font-weight:600; margin-bottom:9px; } .age.now .age-an{ color:var(--accent-soft) } .age h3{ margin:0 0 12px; font-size:1.08rem; letter-spacing:-.018em; line-height:1.3 } .age-n{ margin:0 0 14px; font-size:.85rem; color:var(--text-muted); padding-bottom:14px; border-bottom:1px solid var(--line-soft); } .age-n b{ font-size:1.7rem; font-weight:700; color:var(--text-primary); letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin-right:7px; } .age > p:last-child{ margin:0; color:var(--text-secondary); font-size:.91rem; line-height:1.58 } /* ---------------- carte de chaleur ---------------- */ .heat-wrap{ display:grid; gap:clamp(24px,4vw,44px); align-items:start; grid-template-columns:auto minmax(0,1fr) } @media (max-width:900px){ .heat-wrap{ grid-template-columns:1fr } } .heat{ overflow-x:auto; padding-bottom:4px } .heat table{ border-collapse:separate; border-spacing:4px; margin:0; table-layout:fixed } .heat col.an{ width:46px } .heat th{ font-weight:600; font-size:.7rem; color:var(--text-muted); letter-spacing:.06em; text-transform:uppercase; padding:0 6px 4px 0; text-align:right; white-space:nowrap; } .heat thead th{ text-align:center; padding:0 0 6px } .heat td{ padding:0 } .heat i{ display:block; width:32px; height:32px; border-radius:6px; background:var(--surface-2); cursor:default; transition:transform .12s, outline-color .12s; outline:2px solid transparent; outline-offset:1px; } .heat td:hover i{ transform:scale(1.14); outline-color:var(--accent-soft) } .heat i.vide{ background:transparent } .heat-leg{ display:flex; align-items:center; gap:9px; margin:18px 0 0; font-size:.78rem; color:var(--text-muted); } .heat-leg .ech{ display:flex; gap:3px } .heat-leg .ech span{ width:20px; height:12px; border-radius:3px } @media (max-width:640px){ .heat i{ width:21px; height:21px; border-radius:4px } .heat table{ border-spacing:3px } .heat col.an{ width:34px } .heat th{ font-size:.63rem } } /* commentaire à côté de la carte de chaleur */ .heat-notes{ margin:0; padding:0; list-style:none; display:grid; gap:18px } .heat-notes li{ padding-left:16px; border-left:2px solid var(--line) } .heat-notes li.hi{ border-left-color:var(--accent) } .heat-notes b{ display:block; font-size:1.45rem; font-weight:700; letter-spacing:-.03em; color:var(--text-primary); font-variant-numeric:tabular-nums; margin-bottom:4px } .heat-notes span{ color:var(--text-secondary); font-size:.9rem; line-height:1.5 } .vide-note{ margin:0; padding:18px 20px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); color:var(--text-secondary); font-size:.9rem } .vide-note code{ font-family:var(--mono); font-size:.85em; color:var(--accent-soft) } /* ---------------- vidéos (façade sans cookie) ---------------- */ .vids{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)) } .vid{ background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:border-color .16s; } .band .vid{ background:var(--bg) } .vid:hover{ border-color:var(--accent) } .vid:focus-within{ border-color:var(--accent) } .vid-play{ position:relative; display:block; width:100%; padding:0; border:0; background:var(--surface-3); aspect-ratio:16/9; cursor:pointer; overflow:hidden; font:inherit; } .vid-play img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s, opacity .2s } .vid-play:hover img{ transform:scale(1.04); opacity:.72 } .vid-btn{ position:absolute; inset:50% auto auto 50%; translate:-50% -50%; width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:var(--accent); box-shadow:0 6px 22px rgb(var(--shadow-rgb) / calc(.45 * var(--shadow-k))); transition:transform .16s, background .16s; pointer-events:none; } .vid-play:hover .vid-btn{ transform:scale(1.09); background:#4660F0 } .vid-btn svg{ width:30px; height:30px; fill:#fff; margin-left:2px } .vid iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; background:#000 } .vid-body{ padding:15px 16px 17px } .vid-body h3{ margin:0; font-size:.98rem; line-height:1.4; font-weight:600; letter-spacing:-.008em } .vid-body h3 a{ text-decoration:none; color:var(--text-primary) } .vid:hover .vid-body h3 a{ color:var(--ink-hover) } .vid-meta{ margin:8px 0 0; font-size:.78rem; color:var(--text-muted) } .vid-note{ margin:22px 0 0; font-size:.83rem; color:var(--text-muted); max-width:66ch } @media (max-width:640px){ .vids{ gap:16px; grid-template-columns:1fr } .vid-btn{ width:52px; height:52px } .vid-btn svg{ width:26px; height:26px } } /* accueil : les derniers articles tiennent sur une seule ligne */ @media (min-width:900px){ .grid.une-ligne{ grid-template-columns:repeat(4,minmax(0,1fr)) } } @media (min-width:641px) and (max-width:899px){ .grid.une-ligne{ grid-template-columns:repeat(2,minmax(0,1fr)) } } /* ---------------- portrait dans le hero ---------------- */ .hero-haut{ display:grid; align-items:center; gap:clamp(28px,5vw,64px); grid-template-columns:minmax(0,1fr) clamp(240px,30%,360px); } .hero-texte{ min-width:0 } .portrait{ margin:0; position:relative; justify-self:end; width:100%; aspect-ratio:1; border-radius:22px; } /* halo indigo qui raccroche la photo à la charte du site */ .portrait::before{ content:""; position:absolute; inset:-14%; background:radial-gradient(circle at 50% 50%, rgba(87,112,255,.34), transparent 66%); filter:blur(10px); z-index:0; pointer-events:none; } .portrait picture, .portrait img{ display:block } .portrait img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; border-radius:22px; border:1px solid var(--img-border); box-shadow:0 22px 50px -18px rgb(var(--shadow-rgb) / calc(.75 * var(--shadow-k))); } /* sous 760 px : la photo passe au-dessus du texte, en vignette ronde */ @media (max-width:760px){ .hero-haut{ grid-template-columns:1fr; gap:22px } .portrait{ order:-1; justify-self:start; width:148px; border-radius:50%; } .portrait img{ border-radius:50%; box-shadow:0 14px 32px -14px rgb(var(--shadow-rgb) / calc(.7 * var(--shadow-k))) } .portrait::before{ inset:-18% } } /* ===================================================================== Touches Donjons & Dragons : croquis de d20, jet de dé, logo qui roule. Tout est décoratif (aria-hidden) sauf le dé du pied de page, qui est un vrai bouton. Les animations s'arrêtent avec prefers-reduced-motion (règle générale plus haut). ===================================================================== */ /* le d20 en masque : prend la couleur du fond de l'élément */ :root{ --d20:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50.5 4.5 89.5 27.2 90.2 72.6 49.6 95.6 10.4 72.9 9.8 27.6Z'/%3E%3Cpath d='M50.2 23.5 77.6 67.8 22.2 68.3Z'/%3E%3Cpath d='M50.2 23.5 50.5 4.5M50.2 23.5 9.8 27.6M50.2 23.5 89.5 27.2M77.6 67.8 89.5 27.2M77.6 67.8 90.2 72.6M77.6 67.8 49.6 95.6M22.2 68.3 9.8 27.6M22.2 68.3 10.4 72.9M22.2 68.3 49.6 95.6'/%3E%3C/svg%3E"); } /* petit titre de section : le tiret devient un d20 */ .sec-head .tagline.de::before{ width:17px; height:17px; border-radius:0; background:var(--accent-soft); -webkit-mask:var(--d20) center/contain no-repeat; mask:var(--d20) center/contain no-repeat; transform:rotate(-8deg); } /* séparateur : trait — d20 — trait */ .sep-de{ display:flex; align-items:center; gap:14px; margin:clamp(34px,5vw,48px) 0 26px; color:var(--line); } .sep-de::before, .sep-de::after{ content:""; flex:1; height:1px; background:currentColor } .sep-de i{ width:22px; height:22px; background:var(--text-muted); transform:rotate(12deg); -webkit-mask:var(--d20) center/contain no-repeat; mask:var(--d20) center/contain no-repeat; } /* croquis en marge (grand d20 dessiné, posé de travers) */ .croquis{ position:absolute; pointer-events:none; color:var(--accent-soft); opacity:.55 } .croquis svg{ display:block; width:100%; height:auto; overflow:visible } .photo-recit{ position:relative } .photo-recit .croquis{ width:92px; top:-34px; right:-30px; transform:rotate(14deg); z-index:1 } @media (max-width:960px){ .photo-recit .croquis{ width:68px; top:-26px; right:-8px } } /* logo : au survol, « OB » laisse place à un d20 qui roule */ .brand .sig{ position:relative; overflow:hidden } .brand .sig::after{ content:""; position:absolute; inset:5px; background:#fff; opacity:0; -webkit-mask:var(--d20) center/contain no-repeat; mask:var(--d20) center/contain no-repeat; } .brand:hover .sig{ color:transparent } .brand:hover .sig::after{ opacity:1; animation:roule .55s cubic-bezier(.3,.7,.3,1) } @keyframes roule{ from{ transform:rotate(-200deg) scale(.4) } to{ transform:none } } /* dé du pied de page */ .jet{ display:flex; align-items:center; gap:12px; margin:0 0 18px; min-height:44px } .jet button{ flex:none; width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer; color:var(--text-muted); border-radius:10px; transition:color .15s; } .jet button:hover{ color:var(--accent-soft) } .jet button svg{ display:block; width:100%; height:100%; overflow:visible } .jet button.roule svg{ animation:roule .5s cubic-bezier(.3,.7,.3,1) } .jet .msg{ font-size:.85rem; color:var(--text-muted) } .jet .msg b{ color:var(--text-primary); font-weight:600 } .jet.nat20 button{ color:var(--accent-soft) } .jet.nat1 button{ color:#E05A45 } /* page d'erreur */ .page-404{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,6vw,72px); align-items:center } .page-404 .grand-de{ width:clamp(120px,22vw,220px); color:#E05A45; transform:rotate(-9deg); opacity:.85 } .page-404 .grand-de svg{ display:block; width:100%; height:auto; overflow:visible } .page-404 .liens{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:26px } @media (max-width:640px){ .page-404{ grid-template-columns:1fr } .page-404 .grand-de{ order:-1; width:110px } } /* tirage au sort (Publications) : bouton centré, grand d20 dessiné */ .tirage{ display:flex; flex-direction:column; align-items:center; margin:8px 0 30px } .hasard{ display:inline-flex; align-items:center; gap:16px; cursor:pointer; text-align:left; font:inherit; color:var(--text-primary); background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); border:1.5px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius:18px; padding:14px 26px 14px 16px; box-shadow:0 12px 30px -18px color-mix(in srgb, var(--accent) 70%, transparent); transition:border-color .15s, transform .15s, box-shadow .15s; } .hasard:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 16px 34px -16px color-mix(in srgb, var(--accent) 80%, transparent) } .hasard:active{ transform:translateY(0) } .hasard-de{ width:58px; height:58px; flex:none; color:var(--accent-soft); transform:rotate(-8deg) } .hasard-de svg{ display:block; width:100%; height:100%; overflow:visible } .hasard:hover .hasard-de svg{ animation:hesite .6s ease-in-out } .hasard.roule .hasard-de svg{ animation:roule .5s cubic-bezier(.3,.7,.3,1) } @keyframes hesite{ 0%,100%{ transform:none } 30%{ transform:rotate(-12deg) } 65%{ transform:rotate(9deg) } } .hasard-txt{ display:flex; flex-direction:column; gap:2px } .hasard-txt b{ font-size:1.15rem; font-weight:700; letter-spacing:-.01em; color:var(--accent-soft) } .hasard-txt small{ font-size:.84rem; color:var(--text-secondary) } .tirage-res{ width:100%; display:flex; flex-direction:column; align-items:center } .tirage-res:not(:empty){ margin-top:22px } .tirage-note{ margin:0 0 12px; font-size:.87rem; color:var(--text-muted); text-align:center } .tirage-res .card{ width:100%; max-width:380px; animation:apparait .35s ease-out } @keyframes apparait{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } } @media (max-width:480px){ .hasard{ gap:12px; padding:12px 18px 12px 12px } .hasard-de{ width:48px; height:48px } .hasard-txt b{ font-size:1.05rem } } /* fiche de personnage (À propos) : à droite du récit sur grand écran */ .apropos{ display:grid; gap:clamp(36px,6vw,64px); align-items:start } @media (min-width:1000px){ .apropos{ grid-template-columns:minmax(0,66ch) minmax(280px,340px) } .fiche{ position:sticky; top:90px } } .fiche{ position:relative; background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r); padding:24px 24px 22px; box-shadow:0 18px 40px -24px rgb(var(--shadow-rgb) / calc(.7 * var(--shadow-k))); } .fiche-de{ width:44px; top:-18px; right:-12px; transform:rotate(16deg); opacity:.7 } .fiche-sur{ margin:0 0 4px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-soft); font-weight:600 } .fiche h3{ margin:0 0 16px; font-size:1.25rem; letter-spacing:-.015em } .fiche h4{ margin:20px 0 8px; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); font-weight:600 } .fiche dl{ margin:0 } .fiche-id{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; padding-bottom:16px; border-bottom:1px solid var(--line-soft) } .fiche-id dt, .fiche-faits dt{ font-size:.74rem; color:var(--text-muted) } .fiche-id dd{ margin:2px 0 0; font-weight:600; font-size:.93rem; color:var(--text-primary) } .fiche-xp{ display:flex; align-items:center; gap:14px; margin:16px 0 0 } .fiche-xp-n{ font-size:2rem; font-weight:700; letter-spacing:-.03em; color:var(--accent-soft); font-variant-numeric:tabular-nums; line-height:1 } .fiche-xp span:last-child{ font-size:.86rem; color:var(--text-secondary); line-height:1.3 } .fiche-xp small{ color:var(--text-muted); font-size:.78rem } .fiche-faits{ display:grid; gap:9px } .fiche-faits div{ display:grid; grid-template-columns:8.5em 1fr; gap:10px; align-items:baseline } .fiche-faits dd{ margin:0; font-size:.88rem; color:var(--text-primary) } .fiche-hobbies{ margin:0; font-size:.88rem; color:var(--text-secondary) } @media (max-width:420px){ .fiche-faits div{ grid-template-columns:1fr; gap:1px } }