/* ==========================================================================
   Sensibilisation cybersécurité
   ========================================================================== */

/* Approche : texte + vidéo */

.approach {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2.5rem 4rem;
    align-items: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.approach__text .lead { margin-top: 1.25rem; }
.approach__video { margin: 0; }
.approach__video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.approach__video figcaption { margin-top: .75rem; font-size: .8125rem; color: var(--ink-3); }

@media (max-width: 860px) {
    .approach { grid-template-columns: 1fr; }
}

/* Piliers */

.pillars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
.pillar {
    padding: clamp(1.5rem, 2.5vw, 2rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.pillar__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.75rem; }
.pillar__num { font-size: .8125rem; color: var(--ink-3); }
.pillar .h3 { margin-bottom: .75rem; }
.pillar p { color: var(--ink-2); }

@media (max-width: 860px) {
    .pillars { grid-template-columns: 1fr; }
}

/* Thèmes */

.topics__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2.5rem 5rem;
}
.topics__intro { margin-top: 1.25rem; color: var(--ink-2); }

.topics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    list-style: none;
    border-top: 1px solid var(--line);
}
.topics li { padding: 1.75rem 1.75rem 1.75rem 0; border-bottom: 1px solid var(--line); }
.topics li:nth-child(even) { padding-left: 1.75rem; padding-right: 0; border-left: 1px solid var(--line); }
.topics h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; font-size: 1.125rem; letter-spacing: -.01em; }
.topics h3 .icon { width: 20px; height: 20px; flex: none; color: var(--accent); }
.topics p { margin: 0; font-size: .9375rem; color: var(--ink-2); }

@media (max-width: 860px) {
    .topics__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .topics { grid-template-columns: 1fr; }
    .topics li,
    .topics li:nth-child(even) { padding: 1.5rem 0; border-left: 0; }
}

/* Projet de jeu */

.project {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 1.5rem 4rem;
    padding: clamp(2rem, 5vw, 3.5rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.project__status {
    display: flex;
    align-items: center;
    gap: .6rem;
    align-self: start;
    font-size: .8125rem;
    color: var(--ink-2);
}
.status-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d08a1c;
    box-shadow: none;
}
.status-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid #d08a1c;
    opacity: .5;
    animation: status-ping 2s ease-out infinite;
}

@keyframes status-ping {
    from { transform: scale(.6); opacity: .8; }
    to { transform: scale(1.6); opacity: 0; }
}
.project__body .h2 { margin-bottom: 1.25rem; }
.project__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

@media (max-width: 860px) {
    .project { grid-template-columns: 1fr; }
}