/* ══════════════════════════════════════════════════════════════════════════
   Le Radar — bandeau « à la une » sous le header
   Tokens du RB Design System, écrits à la main comme search.css.

   Pourquoi pas des classes Tailwind : public/assets contient un dump compilé
   qui masque les classes utilitaires nouvellement introduites en dev. Un
   fichier CSS dédié, chargé par base.html.twig, est insensible à ce problème.
   ══════════════════════════════════════════════════════════════════════════ */

.rdr {
    --rdr-pos: #2fd39b;
    --rdr-watch: #f7bd59;
    --rdr-info: #81a8ff;
    --rdr-ink: #eaf1f9;
    --rdr-ink-2: #c2d2e2;
    --rdr-muted: #8ea3b8;
    --rdr-faint: #66798d;

    position: relative;
    z-index: 30;
    color: var(--rdr-ink);
    background:
        radial-gradient(900px 200px at 12% 0%, rgba(1, 88, 255, .30), transparent 62%),
        radial-gradient(700px 220px at 88% 100%, rgba(247, 189, 89, .10), transparent 60%),
        linear-gradient(100deg, #01192a 0%, #001738 46%, #02203f 100%);
    border-bottom: 1px solid rgba(129, 168, 255, .20);
    font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.rdr::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(1, 88, 255, .75), rgba(247, 189, 89, .45), transparent);
}

/* ── Rail replié ─────────────────────────────────────────────────────── */
.rdr-rail {
    max-width: 1536px;
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.rdr-id {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    padding-right: 16px;
    border-right: 1px solid rgba(255, 255, 255, .10);
}

.rdr-id-ico {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: rgba(1, 88, 255, .18);
    border: 1px solid rgba(129, 168, 255, .36);
    color: var(--rdr-info);
}

.rdr-id-ico svg { width: 15px; height: 15px; }

.rdr-id-txt { display: flex; flex-direction: column; line-height: 1.15; }

/* Le nom et son infobulle sur une même ligne. */
.rdr-id-head { display: inline-flex; align-items: center; gap: 3px; }

.rdr-name {
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #fff;
    white-space: nowrap;
}

.rdr-sub {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #7f97b3;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* ── Infobulle « durée de vie » ───────────────────────────────────────────
   Infobulle CSS plutôt qu'un attribut `title` : le title natif met une seconde à
   apparaître et ne se déclenche pas au focus clavier. Ici l'ouverture répond au
   survol comme au focus, et le bouton reste atteignable au clavier. */
.rdr-info {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: #5d7490;
    cursor: help;
    transition: color .15s;
}

.rdr-info:hover, .rdr-info:focus-visible { color: var(--rdr-ink-2); }
.rdr-info svg { width: 12px; height: 12px; }

.rdr-tip {
    position: absolute;
    top: calc(100% + 8px);
    left: -8px;
    z-index: 40;
    width: 260px;
    padding: 9px 11px;
    border-radius: 10px;
    background: #020d1a;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--rdr-ink-2);
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    transition: opacity .16s, transform .16s, visibility .16s;
    pointer-events: none;
}

.rdr-info:hover .rdr-tip,
.rdr-info:focus-visible .rdr-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 480px) {
    .rdr-tip { left: 0; width: min(260px, calc(100vw - 32px)); }
}

.rdr-live {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--rdr-pos);
    animation: rdr-ping 2.6s infinite;
}

@keyframes rdr-ping {
    0%   { box-shadow: 0 0 0 0 rgba(47, 211, 155, .5); }
    70%  { box-shadow: 0 0 0 7px rgba(47, 211, 155, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 211, 155, 0); }
}

/* Pas de scroll-behavior:smooth ici : sur certains moteurs il neutralise les
   scrollTo() programmatiques. Le lissage est demandé au cas par cas en JS. */
/* padding vertical de 6px : `overflow-x:auto` fait calculer `overflow-y` en auto
   aussi, donc ce conteneur clippe les deux axes. Sans ce dégagement, l'onde radar
   qui sort du logo serait tranchée net en haut et en bas. */
.rdr-scroll {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 0;
}

.rdr-scroll::-webkit-scrollbar { display: none; }

.rdr-story {
    position: relative;
    flex-shrink: 0;
    width: 62px;
    padding: 1px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border-radius: 12px;
    border: 0;
    background: none;
    cursor: pointer;
    transition: .16s;
}

.rdr-story:hover { background: rgba(255, 255, 255, .05); }
.rdr-story:focus-visible { outline: 2px solid #81a8ff; outline-offset: 2px; }

.rdr-ring {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 2px;
    display: grid;
    place-items: center;
    background: conic-gradient(from 200deg, #0158ff, var(--rdr-info), var(--rdr-watch), #0158ff);
    transition: .2s;
}

/* ── Onde radar ──────────────────────────────────────────────────────────
   Deux anneaux qui s'éloignent de la bordure en se diffusant. Uniquement sur
   les signaux non lus : c'est ce qui porte le sens « nouveauté ». Dès qu'une
   vignette est ouverte, .is-seen coupe l'animation — sinon l'effet devient un
   simple ornement permanent et ne signale plus rien.
   Transform + opacity seulement : composité par le GPU, aucun reflow malgré
   9 vignettes animées en continu. */
.rdr-ring::before,
.rdr-ring::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(129, 168, 255, .6);
    pointer-events: none;
    animation: rdr-radar 3s cubic-bezier(.22, .61, .36, 1) infinite;
}

/* Décalage par vignette, calculé depuis --rdr-i posé par le gabarit : l'onde balaie
   le rail de gauche à droite au lieu de faire clignoter tous les logos ensemble.
   Un calcul plutôt qu'une liste de :nth-child, pour rester valable quel que soit le
   nombre de signaux affichés (le plafond est passé de 12 à 20). */
.rdr-ring::before { animation-delay: calc(var(--rdr-i, 0) * .18s); }

/* Le second anneau part à mi-cycle : l'onde paraît continue plutôt que pulsée. */
.rdr-ring::after { animation-delay: calc(1.5s + var(--rdr-i, 0) * .18s); }

@keyframes rdr-radar {
    0%   { transform: scale(1);    opacity: .7; border-width: 1.5px; }
    60%  { opacity: .18; }
    100% { transform: scale(1.62); opacity: 0;  border-width: .5px; }
}

/* Signal déjà consulté : plus d'onde. */
.rdr-story.is-seen .rdr-ring::before,
.rdr-story.is-seen .rdr-ring::after,
.rdr-story.is-active .rdr-ring::before,
.rdr-story.is-active .rdr-ring::after {
    animation: none;
    opacity: 0;
}

.rdr-story:hover .rdr-ring { transform: scale(1.06); }
.rdr-story.is-seen .rdr-ring { background: rgba(255, 255, 255, .16); }
.rdr-story.is-active .rdr-ring { background: conic-gradient(from 200deg, #fff, var(--rdr-info), #fff); }

.rdr-ring > span {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #01192a;
    padding: 2px;
    display: block;
}

.rdr-logo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #0c3b82;
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
    overflow: hidden;
}

/* Une image de fond ne doit pas afficher aussi le monogramme de repli. */
.rdr-logo.has-image { color: transparent; background-color: #fff; }

.rdr-lbl {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #b9cbdd;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.rdr-story.is-seen .rdr-lbl { color: #7f97b3; }
.rdr-story.is-active .rdr-lbl { color: #fff; }

.rdr-dot {
    position: absolute;
    top: -1px;
    right: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid #01192a;
}

.rdr-dot svg { width: 7px; height: 7px; color: #01192a; }
.rdr-dot.t-positive { background: var(--rdr-pos); }
.rdr-dot.t-neutral  { background: var(--rdr-info); }
.rdr-dot.t-watch    { background: var(--rdr-watch); }
.rdr-dot.t-sector   { background: #fff; }

.rdr-end {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, .10);
}

.rdr-ico {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--rdr-muted);
    border: 0;
    background: none;
    cursor: pointer;
    transition: .15s;
}

.rdr-ico:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.rdr-ico svg { width: 15px; height: 15px; }

/* ── Panneau déplié ──────────────────────────────────────────────────── */
.rdr-panel { display: none; border-top: 1px solid rgba(255, 255, 255, .08); position: relative; overflow: hidden; }
.rdr.is-open .rdr-panel { display: block; animation: rdr-drop .34s cubic-bezier(.22, 1, .36, 1); }

@keyframes rdr-drop {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}

.rdr-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: background .5s;
    background: radial-gradient(620px 260px at 22% 50%, rgba(1, 88, 255, .22), transparent 70%);
}

.rdr-panel[data-tone="positive"] .rdr-glow { background: radial-gradient(620px 260px at 22% 50%, rgba(47, 211, 155, .17), transparent 70%); }
.rdr-panel[data-tone="watch"] .rdr-glow    { background: radial-gradient(620px 260px at 22% 50%, rgba(247, 189, 89, .17), transparent 70%); }
.rdr-panel[data-tone="sector"] .rdr-glow   { background: radial-gradient(620px 260px at 22% 50%, rgba(41, 104, 122, .30), transparent 70%); }

.rdr-segs { position: relative; max-width: 1536px; margin: 0 auto; padding: 11px 16px 0; display: flex; gap: 4px; }
.rdr-seg { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.rdr-seg > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--rdr-info), #fff); border-radius: 2px; }
.rdr-seg.is-done > i { width: 100%; background: rgba(255, 255, 255, .5); }
/* 10s : doit rester égal à la constante HOLD du script du composant. */
.rdr-seg.is-run > i { animation: rdr-fill 10s linear forwards; }
.rdr.is-paused .rdr-seg.is-run > i { animation-play-state: paused; }

@keyframes rdr-fill { from { width: 0; } to { width: 100%; } }

.rdr-body {
    position: relative;
    max-width: 1536px;
    margin: 0 auto;
    padding: 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
}

@media (min-width: 721px) and (max-width: 1599px) {
    .rdr-body { padding-left: 48px; padding-right: 48px; }
}

.rdr-idt { display: flex; align-items: center; gap: 13px; min-width: 0; }

.rdr-idt-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 2.5px;
    flex-shrink: 0;
    background: conic-gradient(from 200deg, #0158ff, var(--rdr-info), var(--rdr-watch), #0158ff);
}

.rdr-idt-ring > span { width: 100%; height: 100%; border-radius: 50%; background: #01192a; padding: 2.5px; display: block; }

.rdr-idt-logo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #0c3b82;
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.rdr-idt-logo.has-image { color: transparent; background-color: #fff; }

.rdr-idt-name {
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
}

.rdr-idt-meta {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 11px;
    color: var(--rdr-muted);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.rdr-tick { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--rdr-ink-2); letter-spacing: .03em; }
.rdr-sep { color: #4d647d; }

.rdr-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }

.rdr-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2.5px 9px;
    border-radius: 999px;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.rdr-pill svg { width: 10px; height: 10px; }
.rdr-pill.t-positive { background: rgba(47, 211, 155, .15); color: var(--rdr-pos); border: 1px solid rgba(47, 211, 155, .3); }
.rdr-pill.t-neutral  { background: rgba(129, 168, 255, .15); color: var(--rdr-info); border: 1px solid rgba(129, 168, 255, .3); }
.rdr-pill.t-watch    { background: rgba(247, 189, 89, .15); color: var(--rdr-watch); border: 1px solid rgba(247, 189, 89, .32); }
.rdr-pill.t-sector   { background: rgba(255, 255, 255, .10); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }

.rdr-ai {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7f97b3;
}

.rdr-ai svg { width: 11px; height: 11px; color: var(--rdr-info); }

.rdr-head {
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.32;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: -.005em;
}

.rdr-lede {
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    font-size: 14.5px;
    line-height: 1.58;
    color: #c6d6e6;
    margin: 0;
    max-width: 74ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rdr-facts { display: flex; align-items: center; gap: 7px; margin-top: 11px; flex-wrap: wrap; }

.rdr-fact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .09);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 11.5px;
    color: var(--rdr-ink-2);
    white-space: nowrap;
}

.rdr-fact b { color: #fff; font-weight: 600; }

.rdr-src {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 5px;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 10.5px;
    color: var(--rdr-faint);
    margin-top: 9px;
}

.rdr-src svg { width: 11px; height: 11px; }
.rdr-src a { color: var(--rdr-muted); text-decoration: underline; text-decoration-color: rgba(142, 163, 184, .4); text-underline-offset: 2px; }
.rdr-src a:hover { color: var(--rdr-ink-2); }

.rdr-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex-shrink: 0; }

.rdr-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 17px;
    border-radius: 999px;
    background: #0158ff;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 15px rgba(1, 88, 255, .2), 0 0 5px rgba(1, 88, 255, .2);
    transition: .16s;
    white-space: nowrap;
}

.rdr-cta:hover { background: #1a68ff; transform: translateY(-1px); }
.rdr-cta svg { width: 15px; height: 15px; transition: transform .16s; }
.rdr-cta:hover svg { transform: translateX(2px); }

.rdr-act-row { display: flex; align-items: center; gap: 5px; }

.rdr-act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: none;
    color: #b9cbdd;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: .16s;
}

.rdr-act:hover { background: rgba(255, 255, 255, .09); color: #fff; border-color: rgba(255, 255, 255, .3); }
.rdr-act svg { width: 15px; height: 15px; transition: transform .18s; }

.rdr-hint { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 10px; color: #5d7490; letter-spacing: .04em; }

/* Recoloration du QuoteFavoriteToggle pour le fond sombre du bandeau.
   Le composant est partagé avec le Screener et les cartes calendrier, où il vit sur
   du blanc : on ne touche pas à son variant, on le surcharge ici seulement.
   Deux classes de sélecteur suffisent à battre les utilitaires Tailwind, qui n'en
   portent qu'une — pas besoin de !important. */
.rdr-fav-slot { display: inline-flex; }

.rdr-fav-slot button {
    height: 34px;
    min-width: 34px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .15);
    color: #b9cbdd;
    transition: .16s;
}

.rdr-fav-slot button:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

/* En favori, le composant passe au variant `warning` : on garde l'ambre du design
   system, mais sur un fond translucide au lieu de warning-100 (quasi blanc). */
.rdr-fav-slot button.bg-warning-100 {
    background: rgba(247, 189, 89, .12);
    border-color: rgba(247, 189, 89, .42);
    color: var(--rdr-watch);
}

.rdr-fav-slot button.bg-warning-100:hover { background: rgba(247, 189, 89, .2); }

.rdr-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(2, 13, 26, .55);
    border: 1px solid rgba(255, 255, 255, .14);
    color: var(--rdr-ink-2);
    z-index: 3;
    cursor: pointer;
    transition: .15s;
}

.rdr-arrow:hover { background: rgba(2, 13, 26, .85); color: #fff; }
.rdr-arrow svg { width: 15px; height: 15px; }
.rdr-arrow.is-prev { left: 6px; }
.rdr-arrow.is-next { right: 6px; }
.rdr-close { position: absolute; top: 10px; right: 12px; z-index: 4; }

@media (min-width: 1600px) {
    .rdr-arrow.is-prev { left: calc((100vw - 1536px) / 2 - 40px); }
    .rdr-arrow.is-next { right: calc((100vw - 1536px) / 2 - 40px); }
}

/* ── Story plein écran (mobile) ──────────────────────────────────────── */
.rdr-panel.is-fs {
    position: fixed;
    inset: 0;
    z-index: 101;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    background:
        radial-gradient(680px 420px at 20% 6%, rgba(1, 88, 255, .30), transparent 62%),
        radial-gradient(560px 380px at 86% 96%, rgba(247, 189, 89, .12), transparent 60%),
        linear-gradient(168deg, #01192a 0%, #001738 52%, #02203f 100%);
}

.rdr.is-fs { z-index: 100; }
body.rdr-fs-open { overflow: hidden; }

/* `margin:0 auto` annule le stretch en flex colonne et réduirait les segments
   à la largeur de leur contenu. */
.rdr-panel.is-fs .rdr-segs,
.rdr-panel.is-fs .rdr-body { width: 100%; margin: 0; max-width: none; }

.rdr-panel.is-fs .rdr-segs { padding: calc(13px + env(safe-area-inset-top)) 14px 0; gap: 3px; z-index: 4; }
.rdr-panel.is-fs .rdr-seg { height: 2.5px; }
.rdr-panel.is-fs .rdr-arrow { display: none; }

/* ── Navigation au tap, façon story ──────────────────────────────────────
   Le contenu n'est pas sélectionnable en plein écran : un appui près d'un bord
   déclencherait sinon la sélection de texte ou le menu contextuel iOS au lieu de
   changer de signal. C'est la condition pour que les zones de tap soient
   utilisables au pouce. */
.rdr-panel.is-fs {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.rdr-tap { display: none; }

.rdr-panel.is-fs .rdr-tap {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 25%;
    z-index: 2;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rdr-panel.is-fs .rdr-tap.is-prev { left: 0; }
.rdr-panel.is-fs .rdr-tap.is-next { right: 0; }

/* Le corps couvre tout l'écran et intercepterait les taps destinés aux zones. On
   le rend transparent aux pointeurs et on réactive uniquement ce qui est
   réellement cliquable — sinon un tap sur le vide au-dessus du texte ne ferait
   rien du tout. */
.rdr-panel.is-fs .rdr-body { pointer-events: none; }

.rdr-panel.is-fs .rdr-body a,
.rdr-panel.is-fs .rdr-body button,
.rdr-panel.is-fs .rdr-fav-slot { pointer-events: auto; }

.rdr-panel.is-fs::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58%;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to top, rgba(1, 17, 32, .92), rgba(1, 17, 32, .6) 44%, transparent);
}

.rdr-panel.is-fs .rdr-body {
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 2;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 14px;
    padding: 15px 16px calc(18px + env(safe-area-inset-bottom));
}

/* Texte centré dans l'espace restant, et non collé en bas comme dans la maquette :
   une story Instagram remplit ce vide avec une photo, un signal n'a rien à y mettre.
   Sur un grand écran, bas-alignement = un trou de 1200 px sous l'identité ; centré,
   la respiration se répartit et se lit comme voulue. */
.rdr-panel.is-fs .rdr-txt { align-self: center; }
.rdr-panel.is-fs .rdr-idt-ring { width: 52px; height: 52px; }
.rdr-panel.is-fs .rdr-idt-logo { font-size: 15px; }
.rdr-panel.is-fs .rdr-head { font-size: 20px; line-height: 1.28; }
.rdr-panel.is-fs .rdr-lede { font-size: 15px; -webkit-line-clamp: 6; }

.rdr-panel.is-fs .rdr-close {
    top: calc(17px + env(safe-area-inset-top));
    right: 14px;
    width: 38px;
    height: 38px;
    background: rgba(2, 13, 26, .55);
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--rdr-ink);
    /* Au-dessus de la zone de tap « suivant », qui couvre le même coin. */
    z-index: 4;
}

.rdr-panel.is-fs .rdr-close svg { width: 19px; height: 19px; }

.rdr-panel.is-fs .rdr-acts {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .10);
}

.rdr-panel.is-fs .rdr-cta { flex: 1; justify-content: center; }
.rdr-panel.is-fs .rdr-hint { display: none; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .rdr-body { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
    .rdr-acts {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }
    .rdr-hint { display: none; }

    /* ── Hauteur commune dès que les actions passent en ligne ──────────────
       En colonne (desktop) le CTA est au-dessus des icônes et leurs hauteurs
       n'ont pas à concorder. Côte à côte, si : le CTA tirait sa hauteur de son
       padding (39 px) alors que les icônes étaient fixées à 34 px, ce qui se
       voyait immédiatement. On impose la même valeur aux trois, et on la monte
       à 40 px plutôt que de descendre le CTA — la cible tactile y gagne.
       Le sélecteur couvre aussi le plein écran, qui n'existe que sous 720 px. */
    .rdr-acts {
        --rdr-btn-h: 40px;
    }

    .rdr-acts .rdr-cta,
    .rdr-acts .rdr-act,
    .rdr-acts .rdr-fav-slot button {
        height: var(--rdr-btn-h);
        min-height: var(--rdr-btn-h);
    }

    /* La hauteur explicite remplace le padding vertical, sinon les deux s'ajoutent. */
    .rdr-acts .rdr-cta { padding-top: 0; padding-bottom: 0; }

    /* Icônes seules : carrées, pour ne pas paraître écrasées à 40 px de haut. */
    .rdr-acts .rdr-act,
    .rdr-acts .rdr-fav-slot button {
        min-width: var(--rdr-btn-h);
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 720px) {
    /* ── Bloc d'identité en pile ──────────────────────────────────────────
       « Le Radar » et son infobulle au-dessus du logo, le compteur en dessous.
       On ne masque plus le texte : il tient en colonne dans la hauteur déjà
       occupée par les vignettes, donc sans allonger le rail. */
    .rdr-id {
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding-right: 12px;
    }

    /* `display: contents` fait remonter le nom et le compteur au rang d'enfants
       directs de la pile : c'est ce qui permet d'intercaler le logo entre les deux
       avec `order`, sans toucher à l'ordre du HTML. */
    .rdr-id .rdr-id-txt { display: contents; }

    /* Le logo porte aria-hidden : le déplacer visuellement ne change rien à
       l'ordre de lecture d'un lecteur d'écran. */
    .rdr-id-head { order: 1; }
    .rdr-id-ico  { order: 2; width: 24px; height: 24px; }
    .rdr-id-ico svg { width: 12px; height: 12px; }
    .rdr-sub     { order: 3; }

    .rdr-name { font-size: 11px; }
    .rdr-sub  { font-size: 8.5px; letter-spacing: .08em; }
    .rdr-info { width: 12px; height: 12px; }
    .rdr-info svg { width: 10px; height: 10px; }

    .rdr-body { grid-template-columns: 1fr; gap: 13px; padding: 14px 16px 16px; }
    .rdr-idt-ring { width: 48px; height: 48px; }
    .rdr-idt-logo { font-size: 14px; }
    .rdr-head { font-size: 16px; }
    .rdr-lede { font-size: 13.5px; -webkit-line-clamp: 3; }
    .rdr-cta { flex: 1; justify-content: center; }
    .rdr-arrow { display: none; }
    .rdr-src { flex-direction: column; align-items: flex-start; gap: 4px; }
    .rdr-src .rdr-sep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rdr-live { animation: none; }
    .rdr-ring::before,
    .rdr-ring::after { animation: none; opacity: 0; }
    .rdr-seg.is-run > i { animation: none; width: 100%; }
    .rdr.is-open .rdr-panel { animation: none; }
}