/* ==========================================================================
   diplomatie.css - styles spécifiques à la page Action Diplomatique
   (diplomatie.html). Les styles communs sont dans style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cards "Dossiers clés" - hover lift + zoom léger
   -------------------------------------------------------------------------- */
.dossier-card {
    transition: transform .35s ease, box-shadow .35s ease;
}
.dossier-card:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 44px rgba(0, 58, 117, 0.16);
}

/* Rotation du chevron quand la card est ouverte */
.dossier-card .dossier-chevron {
    transition: transform .35s ease;
}
.dossier-card.is-open .dossier-chevron {
    transform: rotate(180deg);
}

/* Zone dépliable : transition douce d'ouverture */
.dossier-details {
    border-top: 1px dashed rgba(0, 58, 117, 0.18);
}

/* --------------------------------------------------------------------------
   Frise chronologique horizontale
   -------------------------------------------------------------------------- */
.chrono-scroll {
    scrollbar-width: thin;
    scrollbar-color: #007FFF #E8F4FD;
    scroll-snap-type: x proximity;
    padding-bottom: .5rem;
}
.chrono-scroll::-webkit-scrollbar {
    height: 8px;
}
.chrono-scroll::-webkit-scrollbar-track {
    background: #E8F4FD;
    border-radius: 99px;
}
.chrono-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #007FFF, #003A75);
    border-radius: 99px;
}

/* La frise : ligne horizontale décorative reliant les étapes */
.chrono-track {
    position: relative;
}
.chrono-track::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #007FFF 0%, #F7D918 50%, #CE1126 100%);
    opacity: .35;
    z-index: 0;
}

.chrono-card {
    scroll-snap-align: start;
    transition: transform .3s ease, box-shadow .3s ease;
}
.chrono-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 32px rgba(0, 58, 117, 0.14);
}

/* Pastille date au-dessus de chaque card de la frise */
.chrono-dot {
    box-shadow: 0 0 0 4px #F8F9FA;
}

/* --------------------------------------------------------------------------
   Citations fortes - guillemets décoratifs (font-quote Lora)
   -------------------------------------------------------------------------- */
.quote-block {
    position: relative;
}
.quote-block::before {
    content: "\201C";
    position: absolute;
    top: -.35em;
    left: -.15em;
    font-family: Georgia, 'Times New Roman', serif;
    color: rgba(247, 217, 24, 0.28);
    line-height: 1;
    font-size: 4.5rem;
    pointer-events: none;
}
.quote-block.quote-lead::before {
    font-size: 7rem;
    top: -.28em;
    color: rgba(247, 217, 24, 0.32);
}

/* --------------------------------------------------------------------------
   Section Accord de Washington - image de fond décorative très discrète
   -------------------------------------------------------------------------- */
.washington-bg {
    position: relative;
    isolation: isolate;
}
.washington-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/tkw-accord-washington.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0.05;
    z-index: -1;
}

/* Petit ornement : barre tricolore décorative en titres de section */
.deco-tricolore {
    display: inline-flex;
    height: .375rem;
    width: 3.5rem;
    border-radius: 99px;
    overflow: hidden;
}
.deco-tricolore > span {
    flex: 1;
}