/* Carrousel d'images dans un article du Carnet (includes/carnet-carrousel.php).
   Sans JavaScript : les pages s'empilent. Avec : diaporama (classe .cc-on posée par le JS). */
.cc-carrousel { margin: 28px auto; max-width: 560px; }
.cc-slide img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,.12); }
.cc-slide + .cc-slide { margin-top: 16px; }

.cc-carrousel.cc-on { position: relative; }
.cc-on .cc-track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; border-radius: 14px; outline: none;
}
.cc-on .cc-track::-webkit-scrollbar { display: none; }
.cc-on .cc-track:focus-visible { box-shadow: 0 0 0 3px #0061BD; }
.cc-on .cc-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.cc-on .cc-slide + .cc-slide { margin-top: 0; }
.cc-on .cc-slide img { box-shadow: none; }

.cc-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.92); color: #0a0f1f; font-size: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center;
    transition: opacity .2s;
}
.cc-btn:disabled { opacity: 0; pointer-events: none; }
.cc-prev { left: 10px; }
.cc-next { right: 10px; }

.cc-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.cc-dots { display: flex; gap: 4px; }
.cc-dot {
    width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.cc-dot::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; transition: background .2s, transform .2s; }
.cc-dot[aria-current="true"]::before { background: #0061BD; transform: scale(1.25); }
.cc-count { font-size: 13px; color: #6b7280; font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
    .cc-btn { width: 36px; height: 36px; font-size: 15px; }
    .cc-prev { left: 6px; }
    .cc-next { right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .cc-on .cc-track { scroll-behavior: auto; } }

/* Légende facultative, en paragraphe juste après le marqueur : <p class="cc-legende">…</p> */
.cc-legende { text-align: center; font-size: 13px !important; color: #6b7280 !important; margin: -8px 0 24px !important; }