/* ============================================================
   Pop-up « Ses dix dates cles » des predecesseurs
   (dirigeants.php + js/dates_cles.js).
   Les variables --dc-* sont posees par le JS a partir des
   couleurs du drapeau du pays ; valeurs par defaut = EPOC.
   ============================================================ */

/* --- Carte cliquable du carrousel ---------------------------- */
.carousel-card.has-dates {
    cursor: pointer;
    position: relative;
}
.carousel-card.has-dates::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: var(--dc-stripes, linear-gradient(90deg, #00507D, #FF6A00));
}
.carousel-card.has-dates:focus-visible {
    outline: 3px solid var(--dc-1, #00507D);
    outline-offset: 3px;
}
.dc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: var(--dc-1, #00507D);
    color: var(--dc-1t, #fff);
    font: 700 0.78rem/1 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dc-badge svg { width: 13px; height: 13px; }
.carousel-card.has-dates:hover .dc-badge {
    transform: scale(1.06);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
/* Carte sans dates cles (personne identifiee) : mention discrete, non
   cliquable, sur deux lignes si besoin dans la carte etroite */
.dc-badge.dc-badge-off {
    justify-content: center;
    padding: 5px 10px;
    background: transparent;
    color: #8a94a6;
    border: 1px dashed #cfd6e0;
    box-shadow: none;
    font-size: 0.7rem;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
    cursor: default;
}

/* --- Lisere du drapeau en haut du bloc du dirigeant ------------
   (et de l'en-tete des pages pays.php / region.php).
   Meme motif que sur les cartes, mais attenue pour se fondre dans le
   cadre gris translucide : fin, semi-transparent, extremites estompees.
   --dc-flag n'est pose par le JS qu'une fois les couleurs du drapeau
   extraites. */
.profile-hero[data-flag]::before,
.country-header-block[data-flag]::before {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 0;
    height: 4px;
    background: var(--dc-flag, transparent);
    opacity: 0.65;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    pointer-events: none;
}

/* --- pays.php / region.php : drapeau a gauche du nom -------------
   (pays.css empile le drapeau au-dessus du nom ; ici une seule ligne,
   drapeau a la hauteur du titre, largeur selon ses proportions) */
.page-wrapper-pays .country-header-block .header-container.header-inline {
    flex-direction: row;
    justify-content: center;
}
.page-wrapper-pays .country-header-block .header-container.header-inline img {
    width: auto;
    height: clamp(30px, 3.4vw, 46px);
    border-radius: 6px;
}
.page-wrapper-pays .country-header-block .header-container.header-inline h1 {
    min-width: 0;
    text-align: left;
}

html.dc-lock { overflow: hidden; }

/* --- Boite de dialogue --------------------------------------- */
.dc-modal {
    --dc-bg: #f4f6fa;
    --dc-page: #ffffff;
    --dc-ink: #111827;
    --dc-ink-2: #3d4657;
    --dc-line: #e2e6ee;
    margin: auto;           /* styles.css remet toutes les marges a 0 */
    padding: 0;
    border: 0;
    background: transparent;
    width: min(820px, calc(100vw - 32px));
    max-width: none;
    max-height: min(90vh, 920px);
    overflow: visible;
    color: var(--dc-ink);
    font-family: Arial, Helvetica, sans-serif;
}
.dc-modal::backdrop {
    background: rgba(8, 13, 24, 0.66);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.dc-modal[open] .dc-shell { animation: dc-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.dc-modal[open]::backdrop { animation: dc-fade 0.3s ease; }
.dc-modal.is-closing .dc-shell { animation: dc-out 0.2s ease forwards; }
.dc-modal.is-closing::backdrop { animation: dc-fade 0.2s ease reverse forwards; }
@keyframes dc-in   { from { opacity: 0; transform: translateY(26px) scale(0.97); } }
@keyframes dc-out  { to   { opacity: 0; transform: translateY(16px) scale(0.98); } }
@keyframes dc-fade { from { opacity: 0; } }

.dc-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: min(90vh, 920px);
    background: var(--dc-bg);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}

/* Barre de lecture aux couleurs du drapeau */
.dc-progress {
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.12);
}
.dc-progress span {
    display: block;
    height: 100%;
    background: var(--dc-stripes, linear-gradient(90deg, #00507D, #FF6A00));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.12s linear;
}

/* --- En-tete --------------------------------------------------- */
.dc-hero {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 34px 64px 26px 30px;
    color: #fff;
    overflow: hidden;
    background:
        radial-gradient(120% 160% at 100% 0%, var(--dc-glow2, rgba(255, 106, 0, 0.45)) 0%, transparent 55%),
        radial-gradient(90% 140% at 0% 100%, var(--dc-glow1, rgba(0, 80, 125, 0.55)) 0%, transparent 60%),
        var(--dc-hero, #0b1a2b);
}
.dc-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background 0.2s ease, transform 0.2s ease;
}
.dc-close svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}
.dc-close:hover { background: rgba(255, 255, 255, 0.24); transform: rotate(90deg); }
.dc-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.dc-photo {
    flex: 0 0 auto;
    width: 104px;
    height: 104px;
    padding: 4px;
    border-radius: 50%;
    background: var(--dc-ring, conic-gradient(#00507D, #FF6A00, #00507D));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.dc-photo img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--dc-hero, #0b1a2b);
    background: #dfe6ee;
}
.dc-head { position: relative; min-width: 0; }
.dc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font: 700 0.95rem/1 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}
.dc-kicker::before {
    content: "";
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background: var(--dc-stripes, linear-gradient(90deg, #00507D, #FF6A00));
}
.dc-name {
    margin: 0;
    font: 600 2.5rem/1.02 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    letter-spacing: 0.01em;
    color: #fff;
}
.dc-name strong { font-weight: 800; text-transform: uppercase; }
.dc-sub {
    margin: 8px 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.78);
}
.dc-range {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font: 700 1.05rem/1 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    letter-spacing: 0.06em;
}
.dc-range i {
    position: relative;
    width: 54px;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    transform-origin: left;
    animation: dc-grow 0.9s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.dc-range i::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -4px;
    border: 5px solid transparent;
    border-left: 7px solid rgba(255, 255, 255, 0.8);
    border-right: 0;
}
@keyframes dc-grow { from { transform: scaleX(0); } }

.dc-flagbar {
    height: 6px;
    flex: 0 0 auto;
    background: var(--dc-stripes, linear-gradient(90deg, #00507D, #FF6A00));
}

/* --- Pastilles d'annees (navigation) -------------------------- */
.dc-chips {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 12px 22px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--dc-page);
    border-bottom: 1px solid var(--dc-line);
}
.dc-chips::-webkit-scrollbar { display: none; }
.dc-chip {
    flex: 0 0 auto;
    padding: 7px 13px;
    border: 1.5px solid var(--dc-line);
    border-radius: 999px;
    background: #fff;
    color: var(--dc-ink-2);
    font: 700 0.95rem/1 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.dc-chip:hover { border-color: var(--c); color: var(--ci); transform: translateY(-1px); }
.dc-chip.is-past { border-color: var(--cs); background: var(--cs); color: var(--ci); }
.dc-chip.is-active { background: var(--c); border-color: var(--c); color: var(--ct); box-shadow: 0 6px 14px var(--cs); }
.dc-chip:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }

/* --- Frise des dates ------------------------------------------ */
.dc-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px 30px 30px;
}
.dc-tl { position: relative; }
.dc-rail {
    position: absolute;
    left: 23px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: var(--dc-line);
}
.dc-rail span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    border-radius: 3px;
    background: var(--dc-rail, linear-gradient(180deg, #00507D, #FF6A00));
    transition: height 0.15s linear;
}
.dc-list { list-style: none; margin: 0; padding: 0; }
.dc-item {
    position: relative;
    padding-left: 72px;
    margin: 0 0 20px;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dc-item:last-child { margin-bottom: 0; }
.dc-item.is-in { opacity: 1; transform: none; }
.dc-marker {
    position: absolute;
    left: 0;
    top: 14px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--c);
    color: var(--ct);
    font: 800 1.15rem/1 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    box-shadow: 0 0 0 5px var(--dc-bg), 0 8px 18px rgba(0, 0, 0, 0.18);
    transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.35s ease;
}
.dc-item.is-active .dc-marker {
    transform: scale(1.12);
    box-shadow: 0 0 0 5px var(--dc-bg), 0 0 0 10px var(--cs), 0 10px 22px rgba(0, 0, 0, 0.22);
}
.dc-card {
    position: relative;
    overflow: hidden;
    padding: 18px 24px 20px;
    border-radius: 16px;
    background: var(--dc-page);
    border: 1px solid rgba(17, 24, 39, 0.06);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 10px 30px rgba(17, 24, 39, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dc-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--c);
}
.dc-card:hover,
.dc-item.is-active .dc-card {
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 16px 40px rgba(17, 24, 39, 0.1);
}
.dc-card:hover { transform: translateY(-2px); }
.dc-year {
    position: absolute;
    right: 14px;
    top: -8px;
    font: 800 5.2rem/1 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    letter-spacing: -0.02em;
    color: var(--c);
    opacity: 0.09;
    pointer-events: none;
}
.dc-date {
    display: inline-block;
    margin: 0 0 10px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--cs);
    color: var(--ci);
    font: 700 0.85rem/1 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.dc-title {
    position: relative;
    margin: 0 0 8px;
    font: 700 1.45rem/1.15 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    color: var(--dc-ink);
}
.dc-text p {
    position: relative;
    margin: 0 0 8px;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--dc-ink-2);
}
.dc-text p:last-child { margin-bottom: 0; }
.dc-foot {
    margin: 26px 0 0;
    padding-top: 16px;
    border-top: 1px dashed var(--dc-line);
    text-align: center;
    font-size: 0.85rem;
    color: #6b7383;
}
.dc-foot span { font-weight: 700; color: var(--dc-ink-2); }

/* --- Mobile : feuille plein ecran glissant du bas ------------- */
@media (max-width: 640px) {
    .dc-modal {
        width: 100vw;
        margin: auto 0 0;
        max-height: 94dvh;
    }
    .dc-shell {
        max-height: 94dvh;
        border-radius: 20px 20px 0 0;
    }
    .dc-modal[open] .dc-shell { animation-name: dc-up; }
    @keyframes dc-up { from { transform: translateY(100%); } }
    .dc-hero { gap: 14px; padding: 26px 56px 20px 16px; }
    .dc-photo { width: 72px; height: 72px; padding: 3px; }
    .dc-kicker { font-size: 0.8rem; letter-spacing: 0.16em; }
    .dc-kicker::before { width: 18px; }
    .dc-name { font-size: 1.8rem; }
    .dc-sub { font-size: 0.85rem; }
    .dc-range { font-size: 0.95rem; margin-top: 10px; }
    .dc-range i { width: 34px; }
    .dc-close { top: 12px; right: 12px; width: 36px; height: 36px; }
    .dc-chips { padding: 10px 16px; }
    .dc-body { padding: 20px 16px 24px; }
    .dc-rail { left: 17px; }
    .dc-item { padding-left: 50px; margin-bottom: 16px; }
    .dc-marker { width: 36px; height: 36px; font-size: 0.95rem; top: 12px; box-shadow: 0 0 0 4px var(--dc-bg), 0 6px 14px rgba(0, 0, 0, 0.18); }
    .dc-card { padding: 15px 16px 16px; }
    .dc-year { font-size: 3.8rem; }
    .dc-title { font-size: 1.25rem; }
    .dc-text p { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-modal[open] .dc-shell,
    .dc-modal[open]::backdrop,
    .dc-range i { animation: none; }
    .dc-item { opacity: 1; transform: none; transition: none; }
    .dc-progress span,
    .dc-rail span { transition: none; }
}