/* ============================================================
   DA « app » — reprend le langage du timer et du menu de gestion
   (teinte bleu nuit, liseré or, pastilles d'icône, survols dorés).
   Chargée en dernier sur toutes les pages : elle prime sur les
   styles propres à chaque page. Les sélecteurs doublés (.x.x)
   servent à passer devant les styles déclarés dans les pages.
   ============================================================ */
:root {
    --da-tint: rgba(22, 32, 48, 0.62);
    --da-tint-strong: rgba(22, 32, 48, 0.82);
    --da-line: rgba(255, 255, 255, 0.08);
    --da-gold-app: #ac9a71;
    --da-gold-grad: linear-gradient(135deg, #93742f 0%, #7f6325 48%, #6a5320 100%);
    --da-edge: linear-gradient(90deg, transparent 0%, var(--phg-gold) 18%, var(--da-gold-app) 50%, var(--phg-gold) 82%, transparent 100%);
    --da-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 38%, rgba(255, 255, 255, 0) 70%);
    --da-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --da-spring-soft: cubic-bezier(0.34, 1.4, 0.64, 1);
    --da-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Boutons : dock du timer ---------- */
.btn.btn {
    position: relative;
    overflow: clip; /* clip et non hidden : garde la hauteur minimale des boutons en flex */
    border-radius: 12px;
    border: 1px solid var(--da-line);
    transition: transform 0.35s var(--da-spring), color 0.2s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.btn.btn:active { transform: scale(0.94); transition-duration: 0.08s; }
.btn.btn:focus-visible { outline: 2px solid var(--phg-gold-light); outline-offset: 2px; }
.btn-primary.btn-primary {
    color: #fff;
    border-color: color-mix(in srgb, var(--phg-gold-light) 60%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--phg-gold) 85%, #fff 15%) 0%, var(--phg-gold) 48%, color-mix(in srgb, var(--phg-gold) 82%, #000 18%) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 12px 26px -14px var(--phg-gold);
    filter: none;
}
.btn-primary.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
}
.btn-primary.btn-primary:hover { transform: none; filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 16px 32px -14px var(--phg-gold); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .btn-primary.btn-primary:hover::after { transform: translateX(120%); transition: transform 0.8s var(--da-ease); }
}
.btn-glass.btn-glass { color: #eaf1f8; background: rgba(0, 0, 0, 0.2); }
.btn-glass.btn-glass:hover { transform: none; color: #fff; border-color: var(--phg-gold-glow); background: var(--phg-gold-muted); box-shadow: none; }

/* ---------- Liens ---------- */
.inline-link.inline-link { color: var(--phg-gold-light); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--phg-gold-light) 40%, transparent); text-underline-offset: 3px; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.inline-link.inline-link:hover { color: #f1d49a; text-decoration-color: currentColor; }

/* ---------- En-têtes de page ---------- */
.article-hero.article-hero { padding-top: 36px; padding-bottom: 28px; }
.article-hero .hero-title { letter-spacing: -0.02em; line-height: 1.06; }
.article-hero .hero-subtitle, .article-header .hero-subtitle { text-align: center; text-wrap: balance; }
.article-badge.article-badge,
.badge-premium.badge-premium {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--phg-gold-light);
    background: var(--phg-gold-muted);
    border: 1px solid color-mix(in srgb, var(--phg-gold-light) 30%, transparent);
    box-shadow: none;
}
.article-badge.article-badge::before,
.badge-premium.badge-premium::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--phg-gold-light);
    box-shadow: 0 0 0 3px rgba(168, 137, 74, 0.25);
}
.hero-pill.hero-pill {
    border-radius: 10px;
    color: #e0e0e0;
    background: var(--da-tint);
    border: 1px solid var(--da-line);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.3s var(--da-spring);
}
.hero-pill.hero-pill:hover { border-color: var(--phg-gold-glow); background: var(--phg-gold-muted); transform: translateY(-2px); }

/* ---------- Cartes de fonctionnalité ---------- */
.formats-card.formats-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 16px;
    background: var(--da-sheen), var(--da-tint);
    border: 1px solid var(--da-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px -26px rgba(0, 0, 0, 0.8);
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.35s var(--da-spring-soft);
}
.formats-card.formats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2;
    background: var(--da-edge);
    opacity: 0.45;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.formats-card.formats-card:hover {
    transform: translateY(-3px);
    border-color: var(--phg-gold-glow);
    background: var(--da-sheen), color-mix(in srgb, var(--phg-gold) 12%, rgba(22, 32, 48, 0.62));
}
.formats-card.formats-card:hover::before { opacity: 1; }
.formats-card__icon.formats-card__icon,
.type-detail__head .formats-card__icon.formats-card__icon {
    border-radius: 11px;
    border: 1px solid var(--da-line);
    background: #0f2033;
    color: var(--phg-gold-light);
    transition: transform 0.45s var(--da-spring-soft), background 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
}
.formats-card.formats-card:hover .formats-card__icon {
    border-color: color-mix(in srgb, var(--phg-gold-light) 60%, transparent);
    background: var(--da-gold-grad);
    color: #fff;
    transform: scale(1.07) rotate(-4deg);
    box-shadow: 0 6px 14px -8px rgba(127, 99, 37, 1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.formats-card__tag.formats-card__tag { flex: none; align-self: flex-start; border-radius: 7px; color: var(--phg-gold-light); background: var(--phg-gold-muted); border-color: color-mix(in srgb, var(--phg-gold-light) 30%, transparent); }
.formats-card--gold.formats-card--gold { border-color: color-mix(in srgb, var(--phg-gold-light) 35%, transparent); }
.formats-card--gold.formats-card--gold::before { opacity: 1; }

/* Titres de bloc : pastille d'icône dorée, comme les sections de l'accueil */
.type-detail__head .formats-card__icon.formats-card__icon {
    border-color: color-mix(in srgb, var(--phg-gold-light) 60%, transparent);
    background: var(--da-gold-grad);
    color: #fff;
    transform: rotate(-4deg);
    box-shadow: 0 6px 14px -8px rgba(127, 99, 37, 1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.type-detail.type-detail + .type-detail.type-detail { border-top-color: var(--da-line); }

/* Listes d'avantages, éléments HUD, étapes */
.advantage-item.advantage-item,
.hud-list__item.hud-list__item,
.device-card.device-card {
    border-radius: 14px;
    background: var(--da-tint);
    border: 1px solid var(--da-line);
    transition: border-color 0.25s ease, background 0.25s ease;
}
.advantage-item.advantage-item:hover,
.hud-list__item.hud-list__item:hover,
.device-card.device-card:hover { border-color: var(--phg-gold-glow); background: color-mix(in srgb, var(--phg-gold) 10%, rgba(22, 32, 48, 0.62)); }

/* ---------- Encarts ---------- */
.tip-callout.tip-callout,
.article-cta.article-cta,
.cta-box.cta-box,
.pro-tip.pro-tip,
.definition-box.definition-box,
.highlight-box.highlight-box {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 16px;
    background: var(--da-sheen), var(--da-tint);
    border: 1px solid var(--da-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px -26px rgba(0, 0, 0, 0.8);
}
.tip-callout.tip-callout::before,
.article-cta.article-cta::before,
.cta-box.cta-box::before,
.pro-tip.pro-tip::before,
.definition-box.definition-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2;
    background: var(--da-edge);
    pointer-events: none;
}
.tip-callout.tip-callout::after,
.article-cta.article-cta::after,
.cta-box.cta-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    z-index: -1;
    background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--phg-gold) 22%, transparent), transparent 70%);
    pointer-events: none;
}
.tip-callout__icon.tip-callout__icon {
    color: #fff;
    border-radius: 11px;
    border-color: color-mix(in srgb, var(--phg-gold-light) 60%, transparent);
    background: var(--da-gold-grad);
    transform: rotate(-4deg);
    box-shadow: 0 6px 14px -8px rgba(127, 99, 37, 1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.tip-callout__label.tip-callout__label { color: var(--phg-gold-light); }
.highlight-box.highlight-box { border-left: 3px solid var(--phg-gold-light); }
.alert-box.alert-box { border-radius: 14px; background: var(--phg-gold-muted); border: 1px solid color-mix(in srgb, var(--phg-gold-light) 30%, transparent); }
.cta-box.cta-box h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); letter-spacing: -0.01em; }
.cta-section.cta-section { padding: 24px 0 56px; }

/* ---------- Chronologies ---------- */
.timeline__node.timeline__node {
    color: #fff;
    background: var(--da-gold-grad);
    border: 1px solid color-mix(in srgb, var(--phg-gold-light) 60%, transparent);
    box-shadow: 0 0 0 5px rgba(168, 137, 74, 0.18), 0 8px 18px -8px rgba(127, 99, 37, 1);
}
.step-list.step-list li::before {
    border-radius: 11px;
    color: #fff;
    background: var(--da-gold-grad);
    border: 1px solid color-mix(in srgb, var(--phg-gold-light) 60%, transparent);
    transform: rotate(-4deg);
    box-shadow: 0 6px 14px -8px rgba(127, 99, 37, 1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.timeline__item.timeline__item:not(:last-child)::after { background: linear-gradient(90deg, var(--phg-gold), color-mix(in srgb, var(--phg-gold-light) 25%, transparent)); }

/* ---------- Images ---------- */
.article-image.article-image,
.article-cover.article-cover {
    border-radius: 16px;
    border: 1px solid var(--da-line);
    box-shadow: 0 40px 80px -45px rgba(0, 0, 0, 0.95);
}
.article-image-caption.article-image-caption { font-style: normal; font-size: 0.86rem; color: var(--text-secondary); }

/* ---------- Articles ---------- */
.back-to-blog.back-to-blog {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--da-line);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.3s var(--da-spring);
}
.back-to-blog.back-to-blog:hover { border-color: var(--phg-gold-glow); background: var(--phg-gold-muted); transform: translateX(-2px); }
.article-meta.article-meta span { padding: 5px 10px; border-radius: 8px; background: var(--da-tint); border: 1px solid var(--da-line); }

/* ---------- Panneaux génériques ---------- */
.glass-panel.glass-panel:not(.cookie-banner-container) { background: var(--da-sheen), var(--da-tint); border-color: var(--da-line); }

@media (prefers-reduced-motion: reduce) {
    .formats-card.formats-card, .hero-pill.hero-pill, .btn.btn, .back-to-blog.back-to-blog { transition: none; }
}