/* ======================================================================== PCO 24 — refonte.css Charge ce fichier APRÈS styles.css. Applique à TOUT le site : - Typo Nunito (Google Fonts) - Palette coral FF5441 / cream FAF6F1 / navy 1E2A3A Ajoute des composants modernes utilisables ponctuellement : - .r-open-panel (panneau vedette asymétrique) - .r-pro-grid + .r-pro (cluster verrouillé) - .r-bento + .r-tile (grille asymétrique pour familles) - .r-dir + .r-row (annuaire numéroté) ======================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap'); :root { --r-coral: #FF5441; --r-coral-deep: #DB4837; --r-coral-soft: rgba(255, 84, 65, .12); --r-navy: #1E2A3A; --r-cream: #F7F9FB; /* fond global : blanc neutre, frais et lisible (remplace le beige cassé) */ --r-paper: #FFFFFF; --r-line: #E6EBF0; /* bordures : gris-bleu doux, assorti au nouveau fond */ --r-line-dk: rgba(255, 255, 255, .14); --r-ink: #2A3340; --r-muted: #6E7480; --r-font: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; /* On rafraîchit aussi les tokens existants du site pour qu'ils utilisent la nouvelle palette */ --corail: #FF5441; --corail-dark: #DB4837; } /* ----- Typo Nunito sur tout le site ----- */ body, body * { font-family: var(--r-font); } /* ----- Lien externe "ressources parents" (flèche corail) ----- */ .res-ext-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--r-coral); font-weight: 700; font-size: .92rem; text-decoration: none; transition: gap .2s ease, color .2s ease; } .res-ext-link svg { width: 16px; height: 16px; flex: none; } .res-ext-link:hover { gap: 12px; color: var(--r-coral-deep); } /* ----- Carte ressource avec aperçu visuel ----- */ .res-ext-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .res-ext-thumb { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #eef1f4; border-bottom: 1px solid rgba(20,29,56,.08); } .res-ext-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .4s ease; } .res-ext-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,29,56,0) 60%, rgba(20,29,56,.10) 100%); pointer-events: none; } .res-ext-card:hover .res-ext-thumb img { transform: scale(1.04); } .res-ext-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; } .res-ext-body h3 { font-weight: 800; line-height: 1.25; } /* ----- Recalibrage palette existante ----- */ body { background: var(--r-cream); color: var(--r-ink); } /* ============================================================ Effet "section centrée mise en avant" (focus on scroll) — DEMO accueil Activé uniquement quand . ============================================================ */ .fx-scroll-focus { overflow-x: hidden; } /* évite tout débordement lié au zoom */ .fx-scroll-focus .fx-section { /* Sections "en retrait" par défaut : légèrement atténuées */ transition: transform .55s cubic-bezier(.2,.7,.3,1), opacity .55s ease, box-shadow .55s ease, border-radius .55s ease; transform: scale(.994); opacity: .82; will-change: transform, opacity; } .fx-scroll-focus .fx-section.is-focus { /* Section centrée : en avant, halo doux aux couleurs de la charte */ transform: scale(1.005); opacity: 1; border-radius: 22px; box-shadow: 0 26px 60px -28px rgba(30, 42, 58, .35); position: relative; z-index: 1; } /* Les bandeaux "hero" restent neutres (pas de scale agressif en haut de page) */ .fx-scroll-focus .hero.fx-section, .fx-scroll-focus .fiche-hero.fx-section { transform: none; opacity: 1; } .fx-scroll-focus .hero.fx-section.is-focus, .fx-scroll-focus .fiche-hero.fx-section.is-focus { box-shadow: none; } /* Accessibilité : on neutralise le mouvement, on garde une mise en avant très douce */ @media (prefers-reduced-motion: reduce) { .fx-scroll-focus .fx-section { transition: opacity .3s ease; transform: none; opacity: .85; } .fx-scroll-focus .fx-section.is-focus { transform: none; opacity: 1; box-shadow: none; } } .btn--corail { background: var(--r-coral); border-color: var(--r-coral); } .btn--corail:hover { background: var(--r-coral-deep); border-color: var(--r-coral-deep); } .dot { background: var(--r-coral); } .eyebrow { color: var(--r-coral); } .underline-corail::after, .underline-corail::before { background: var(--r-coral); } /* ============ PANNEAU VEDETTE — espace Parents (accès libre) ============ */ .r-open-panel { display: grid; grid-template-columns: 1.55fr 1fr; border-radius: 20px; overflow: hidden; background: var(--r-paper); border: 1px solid var(--r-line); text-decoration: none; color: inherit; transition: transform .3s, box-shadow .3s; } .r-open-panel:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(30,42,58,.08); } .r-open-panel .r-op-left { padding: 42px 44px; display: flex; flex-direction: column; } .r-open-panel .r-op-right { background: linear-gradient(150deg, var(--r-coral), var(--r-coral-deep)); padding: 42px; display: flex; flex-direction: column; justify-content: center; color: #fff; } .r-pill { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: var(--r-coral-soft); color: var(--r-coral-deep); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; border-radius: 30px; margin-bottom: 18px; } .r-pill .r-dot { width: 8px; height: 8px; border-radius: 50%; background: #3FA66A; box-shadow: 0 0 0 4px rgba(63,166,106,.18); } .r-open-panel h3 { font-size: 30px; font-weight: 700; color: var(--r-navy); letter-spacing: -.02em; margin: 0; } .r-open-panel p { margin-top: 14px; color: var(--r-muted); font-size: 16px; max-width: 46ch; line-height: 1.55; } .r-open-panel .r-meta { margin-top: 20px; font-size: 14px; color: var(--r-navy); font-weight: 700; } .r-open-panel .r-op-left .btn { margin-top: 26px; align-self: flex-start; } .r-open-panel .r-op-right .r-big { font-size: 64px; font-weight: 700; letter-spacing: -.03em; line-height: 1; } .r-open-panel .r-op-right .r-big span { display: block; font-size: 16px; font-weight: 600; opacity: .94; letter-spacing: 0; margin-top: 12px; } /* ============ CLUSTER VERROUILLÉ — espaces pros ============ */ .r-reserved-head { margin-top: 46px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .r-reserved-head h3 { font-size: 19px; font-weight: 700; color: var(--r-navy); margin: 0; } .r-reserved-head span { font-size: 13px; color: var(--r-muted); } .r-pro-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; } .r-pro { border: 1.5px solid var(--r-line); border-radius: 14px; background: transparent; padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; transition: background .3s, border-color .3s, transform .3s; position: relative; text-decoration: none; color: inherit; } .r-pro:hover { background: var(--r-navy); border-color: var(--r-navy); transform: translateY(-3px); } .r-pro .r-lock { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(30,42,58,.06); transition: .3s; } .r-pro:hover .r-lock { background: rgba(255,255,255,.12); } .r-pro .r-lock svg { width: 15px; height: 15px; stroke: var(--r-navy); transition: .3s; fill: none; } .r-pro:hover .r-lock svg { stroke: var(--r-coral); } .r-pro h4 { font-size: 17px; font-weight: 700; color: var(--r-navy); transition: .3s; margin: 0; } .r-pro:hover h4 { color: #fff; } .r-pro .r-go { font-size: 13px; font-weight: 700; color: var(--r-muted); transition: .3s; margin-top: auto; } .r-pro:hover .r-go { color: var(--r-coral); } /* ============ BENTO ESPACES PROS (accueil) ============ */ .r-pro-bento { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .r-pcard { position: relative; overflow: hidden; border-radius: 18px; padding: 26px 24px 24px; min-height: 250px; display: flex; flex-direction: column; text-decoration: none; color: #fff; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; box-shadow: 0 10px 30px -16px rgba(20,29,56,.45); } .r-pcard:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -20px rgba(20,29,56,.55); } .r-pc-ico { width: 50px; height: 50px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); margin-bottom: 16px; } .r-pc-ico svg { width: 26px; height: 26px; color: #fff; } .r-pc-badge { position: absolute; top: 20px; right: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.16); padding: 5px 11px 5px 9px; border-radius: 999px; } .r-pc-badge svg { width: 13px; height: 13px; } .r-pcard h4 { font-size: 1.18rem; font-weight: 700; color: #fff; margin: 0 0 8px; letter-spacing: -.01em; } .r-pcard p { font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.86); margin: 0; } .r-pc-go { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 700; color: #fff; transition: gap .25s; } .r-pc-go svg { width: 18px; height: 18px; } .r-pcard:hover .r-pc-go { gap: 14px; } /* Variantes de couleur par profession — bleu nuit (#141D38) & jaune (#FCDB32) */ /* Cartes bleu nuit : texte blanc, accents jaunes */ .r-pc-navy, .r-pc-green { background: linear-gradient(155deg, #1f2c54, #141D38); } .r-pc-navy .r-pc-ico, .r-pc-green .r-pc-ico { background: rgba(252,219,50,.18); } .r-pc-navy .r-pc-ico svg, .r-pc-green .r-pc-ico svg { color: #FCDB32; } .r-pc-navy .r-pc-badge, .r-pc-green .r-pc-badge { color: #141D38; background: #FCDB32; } .r-pc-navy .r-pc-go, .r-pc-green .r-pc-go { color: #FCDB32; } /* Cartes jaunes : texte bleu nuit pour la lisibilité */ .r-pc-coral, .r-pc-teal { background: linear-gradient(155deg, #FEE372, #FCDB32); box-shadow: 0 10px 30px -16px rgba(20,29,56,.4); } .r-pc-coral h4, .r-pc-teal h4 { color: #141D38; } .r-pc-coral p, .r-pc-teal p { color: rgba(20,29,56,.78); } .r-pc-coral .r-pc-ico, .r-pc-teal .r-pc-ico { background: rgba(20,29,56,.12); } .r-pc-coral .r-pc-ico svg, .r-pc-teal .r-pc-ico svg { color: #141D38; } .r-pc-coral .r-pc-badge, .r-pc-teal .r-pc-badge { color: #FCDB32; background: #141D38; } .r-pc-coral .r-pc-go, .r-pc-teal .r-pc-go { color: #141D38; } @media (max-width: 900px) { .r-pro-bento { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .r-pro-bento { grid-template-columns: 1fr; } .r-pcard { min-height: 0; } } /* ============ BENTO — Les professionnels de la PCO (page Parents) ============ */ /* Palette jaune #FCDB32 + bleu nuit #141D38, distincte du bento "Comprendre les troubles" */ .r-probento-parents { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .r-pfiche { position: relative; overflow: hidden; border-radius: 18px; padding: 26px 26px 24px; min-height: 180px; display: flex; flex-direction: column; text-decoration: none; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; box-shadow: 0 10px 30px -16px rgba(20,29,56,.4); } .r-pfiche:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -20px rgba(20,29,56,.5); } .r-pf-num { font-size: .82rem; font-weight: 800; letter-spacing: .08em; opacity: .55; margin-bottom: 10px; } .r-pfiche h3 { font-size: 1.22rem; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; } .r-pfiche p { font-size: .92rem; line-height: 1.55; margin: 0; } .r-pf-go { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 700; transition: gap .25s; } .r-pf-go svg { width: 18px; height: 18px; } .r-pfiche:hover .r-pf-go { gap: 14px; } /* Cartes bleu nuit : texte clair, accents jaunes */ .r-pf-dark { background: linear-gradient(155deg, #1f2c54, #141D38); color: #fff; } .r-pf-dark .r-pf-num { color: #FCDB32; opacity: .85; } .r-pf-dark h3 { color: #fff; } .r-pf-dark p { color: rgba(255,255,255,.85); } .r-pf-dark .r-pf-go { color: #FCDB32; } /* Cartes jaunes : texte bleu nuit pour la lisibilité */ .r-pf-gold { background: linear-gradient(155deg, #FEE372, #FCDB32); color: #141D38; } .r-pf-gold .r-pf-num { color: #141D38; opacity: .7; } .r-pf-gold h3 { color: #141D38; } .r-pf-gold p { color: rgba(20,29,56,.78); } .r-pf-gold .r-pf-go { color: #141D38; } @media (max-width: 640px) { .r-probento-parents { grid-template-columns: 1fr; } .r-pfiche { min-height: 0; } } /* ============ BENTO — Comprendre les troubles ============ */ .r-bento { margin-top: 28px; display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; grid-auto-flow: dense; } .r-tile { position: relative; overflow: hidden; border-radius: 16px; padding: 22px 22px 20px; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; transition: transform .35s cubic-bezier(.2,.7,.3,1); } .r-tile:hover { transform: translateY(-4px); } /* Acronyme en filigrane (TND, TSA, TDAH, DYS, TDI, TDC...) */ .r-tile .r-mono { position: absolute; top: 12px; right: 16px; font-weight: 800; letter-spacing: -.02em; line-height: 1; opacity: .18; pointer-events: none; font-size: 26px; text-transform: uppercase; z-index: 0; } .r-tile.r-span2 .r-mono { font-size: 32px; } .r-tile.r-hero-tile .r-mono { font-size: 38px; top: 18px; right: 22px; opacity: .22; } .r-tile h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; position: relative; z-index: 1; margin: 0; padding-right: 52px; } .r-tile.r-hero-tile h3 { padding-right: 0; } /* tuile au titre long : on réserve la zone du cadenas en décalant la 1re ligne */ .r-tile.r-title-long h3 { text-indent: 34px; } .r-tile p { font-size: 13.5px; margin-top: 6px; position: relative; z-index: 1; line-height: 1.5; } .r-tile .r-go-tile { margin-top: 14px; font-size: 13.5px; font-weight: 700; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; transition: gap .25s; } .r-tile:hover .r-go-tile { gap: 13px; } .r-tile.r-t-light { background: var(--r-paper); border: 1px solid #D4DCE6; box-shadow: 0 2px 6px rgba(30,42,58,.07), 0 12px 28px rgba(30,42,58,.10); } .r-tile.r-t-light:hover { box-shadow: 0 6px 14px rgba(30,42,58,.10), 0 22px 44px rgba(30,42,58,.16); border-color: #C2CCDA; } .r-tile.r-t-light h3 { color: var(--r-navy); } .r-tile.r-t-light p { color: var(--r-muted); } .r-tile.r-t-light .r-go-tile { color: var(--r-coral); } .r-tile.r-t-light .r-mono { color: var(--r-navy); } .r-tile.r-t-coral { background: var(--r-coral); } .r-tile.r-t-coral h3, .r-tile.r-t-coral p { color: #fff; } .r-tile.r-t-coral p { opacity: .92; } .r-tile.r-t-coral .r-go-tile { color: #fff; } .r-tile.r-t-coral .r-mono { color: #fff; opacity: .22; } .r-tile.r-t-navy { background: var(--r-navy); } .r-tile.r-t-navy h3 { color: #fff; } .r-tile.r-t-navy p { color: #C9CFD8; } .r-tile.r-t-navy .r-go-tile { color: var(--r-coral); } .r-tile.r-t-navy .r-mono { color: #fff; opacity: .1; } .r-tile.r-hero-tile { grid-column: span 2; grid-row: span 2; justify-content: space-between; padding: 30px; } .r-tile.r-hero-tile .r-badge { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--r-coral); } .r-tile.r-hero-tile h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.12; margin-top: auto; max-width: 16ch; } .r-tile.r-hero-tile p { font-size: 14.5px; max-width: 42ch; margin-top: 10px; } .r-tile.r-hero-tile .r-go-tile { margin-top: 20px; font-size: 15px; background: var(--r-coral); color: #fff; padding: 11px 20px; border-radius: 30px; width: max-content; transition: background .28s; } .r-tile.r-hero-tile:hover .r-go-tile { background: var(--r-coral-deep); } .r-tile.r-span2 { grid-column: span 2; } /* Variante 3 tuiles (zoom thématique : 1 large + 2 petites) */ .r-bento.r-bento-3 { grid-template-columns: repeat(4, 1fr); } .r-bento.r-bento-3 .r-tile.r-span2 { grid-column: span 2; } /* Variante verrouillée (pages pros) — cadenas + overlay au survol */ .r-tile.r-locked .r-lock-mini { position: absolute; top: 14px; left: 16px; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: rgba(30,42,58,.08); transition: background .3s; z-index: 2; } .r-tile.r-t-coral.r-locked .r-lock-mini, .r-tile.r-t-navy.r-locked .r-lock-mini { background: rgba(255,255,255,.18); } .r-tile.r-locked .r-lock-mini svg { width: 13px; height: 13px; stroke: var(--r-navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .r-tile.r-t-coral.r-locked .r-lock-mini svg, .r-tile.r-t-navy.r-locked .r-lock-mini svg { stroke: #fff; } .r-tile.r-locked .r-lock-over { position: absolute; inset: 0; background: rgba(30,42,58,.94); color: #fff; padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 3; border-radius: 16px; } .r-tile.r-locked:hover .r-lock-over, .r-tile.r-locked:focus-visible .r-lock-over { opacity: 1; } .r-tile.r-locked .r-lock-over strong { font-size: 14px; letter-spacing: .04em; } .r-tile.r-locked .r-lock-over span { display: inline-flex; align-items: center; gap: 8px; background: var(--r-coral); color: #fff; padding: 9px 16px; border-radius: 30px; font-size: 13.5px; font-weight: 700; } .r-tile.r-locked .r-lock-over svg.r-lock-icon { width: 28px; height: 28px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .r-tile.r-locked.r-hero-tile .r-lock-over { padding: 32px; } /* Quand l'accès pro est activé (body.is-approved) : on retire le verrou des tuiles */ body.is-approved .r-tile.r-locked .r-lock-mini, body.is-approved .r-tile.r-locked .r-lock-over { display: none !important; } body.is-approved .r-tile.r-locked { cursor: pointer; } /* ============ ANNUAIRE — les professionnels de la PCO ============ */ .r-dir { margin-top: 28px; border-top: 1.5px solid var(--r-navy); } .r-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 24px; padding: 26px 14px; border-bottom: 1px solid var(--r-line); text-decoration: none; color: inherit; position: relative; transition: background .3s, padding-left .3s; } .r-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--r-coral); transition: width .3s; } .r-row:hover { background: var(--r-cream); padding-left: 24px; } .r-row:hover::before { width: 4px; } .r-row .r-idx { font-size: 15px; font-weight: 700; color: var(--r-coral); letter-spacing: .05em; } .r-row .r-body h3 { font-size: 21px; font-weight: 700; color: var(--r-navy); letter-spacing: -.01em; transition: color .25s; margin: 0; } .r-row:hover .r-body h3 { color: var(--r-coral); } .r-row .r-body p { font-size: 14.5px; color: var(--r-muted); margin-top: 3px; max-width: 62ch; } .r-row .r-arrow { font-size: 22px; color: var(--r-navy); opacity: .35; transition: transform .3s, opacity .3s, color .3s; } .r-row:hover .r-arrow { opacity: 1; color: var(--r-coral); transform: translateX(6px); } .r-dir-foot { margin-top: 22px; font-size: 14px; color: var(--r-muted); } .r-dir-foot b { color: var(--r-navy); font-weight: 700; } /* ============ RESPONSIVE ============ */ @media (max-width: 980px) { .r-pro-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .r-open-panel { grid-template-columns: 1fr; } .r-open-panel .r-op-right { flex-direction: row; align-items: center; gap: 18px; padding: 26px 32px; } .r-open-panel .r-op-right .r-big { font-size: 50px; } .r-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; } .r-tile.r-hero-tile { grid-column: span 2; grid-row: span 1; min-height: 240px; } .r-tile.r-span2 { grid-column: span 2; } .r-tile .r-mono { font-size: 76px; } .r-tile.r-span2 .r-mono { font-size: 90px; } .r-row { grid-template-columns: 40px 1fr; gap: 14px; padding: 20px 8px; } .r-row .r-arrow { display: none; } .r-row .r-idx { font-size: 13px; align-self: start; padding-top: 4px; } } @media (max-width: 480px) { .r-open-panel .r-op-left { padding: 30px 26px; } .r-pro-grid { grid-template-columns: 1fr; } .r-bento { grid-template-columns: 1fr; grid-auto-rows: auto; } .r-tile { min-height: 160px; } .r-tile.r-hero-tile, .r-tile.r-span2 { grid-column: span 1; } } /* ── Carte ressource PUBLIQUE / téléchargeable (ex. Glossaire des TND) ── */ .res-card--open { text-decoration: none; color: inherit; cursor: pointer; } .res-card--open .res-thumb--pdf { background: linear-gradient(135deg, #FAD9CF, #F3B7A6); } .res-card--open .res-thumb .pdf-mini { color: rgba(232,114,90,.75); } /* neutralise le voile grisé "verrouillé" pour la carte ouverte */ .res-card--open.res-card[data-locked] .res-thumb::after { display: none; } .res-lock-pill--open { color: #fff; background: var(--vert-pco); } .res-card--open:hover .res-lock-pill--open { background: var(--vert-pco-dk); } /* Cartes ressources cliquables (lien externe verrouillé) */ .res-card[data-href] { cursor: pointer; } .res-card[data-href]:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,29,56,.16); } .res-card[data-href]:focus-visible { outline: 3px solid var(--corail, #FF5441); outline-offset: 3px; }