@charset "UTF-8";

/* ============================================================
   Habillage Klaro (bandeau + modale de consentement)
   Charte Culture Contrôle : vert #7bba2d, encre #151515,
   surface #f6f7f4, bordures #dce1d7, rayon 14px.
   Chargé après klaro.min.css — voir partials/footer.php.

   Klaro pilote ses couleurs par des variables CSS (--dark1,
   --green1…) laissées à leurs valeurs par défaut : on les
   redéfinit ici sur .klaro, puis on ajuste la mise en page.
   ============================================================ */

.klaro {
    /* panneaux : blanc au lieu du gris sombre */
    --dark1: #fff;
    --dark2: #5f655b;
    --dark3: #5f655b;
    --light1: #151515;
    --light2: #dce1d7;
    --light3: #5f655b;
    --white2: #eef1ea;
    --white3: #fff;
    /* vert foncé : contraste AA sur blanc (liens, interrupteurs actifs) */
    --green1: #4a7518;
    --green2: #7bba2d;
    --green3: #4a7518;
    --blue1: #0b3d63;
    --button-text-color: #fff;
    --border-radius: 12px;
    --font-size: 15px;
    font-size: 15px;
}

/* ----------------------------------------------------------
   Bandeau de consentement
   ---------------------------------------------------------- */

.klaro .cookie-notice:not(.cookie-modal-notice) {
    left: 12px;
    right: 12px;
    bottom: 96px; /* surmonte le widget d'accessibilité (bas droite) */
    width: auto;
    max-width: none;
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: inset 4px 0 0 var(--green), 0 18px 45px rgb(15 23 42 / .18);
    animation: cc-notice-in .3s ease both;
}

@media (min-width: 660px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        left: 24px;
        right: auto;
        bottom: 24px;
        width: auto;
        max-width: 440px;
    }
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    padding: 18px 20px;
}

.klaro .cookie-notice #id-cookie-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--ink);
}

.klaro .cookie-notice #id-cookie-title::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--green);
    box-shadow: 0 0 0 4px rgb(123 186 45 / .25);
}

.klaro .cookie-notice .cn-body p#id-cookie-notice {
    margin: 0 0 16px;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--muted);
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div {
    margin-top: 0;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
    flex-grow: 0;
    font-weight: 800;
    color: var(--green-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: auto;
    margin-top: 0;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
    width: auto;
    margin-top: 0;
}

/* ----------------------------------------------------------
   Boutons (bandeau + modale) : reprise du style .button
   ---------------------------------------------------------- */

.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    margin: 0;
    width: auto;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

/* primaire : vert de marque, texte encre */
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success {
    background: var(--green);
    border-color: var(--green);
    color: #151515;
}

.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .context-notice .cm-btn.cm-btn-success:hover {
    background: #91ce42;
    border-color: #91ce42;
    transform: translateY(-1px);
}

/* secondaire : contour encre */
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .context-notice .cm-btn.cm-btn-danger {
    background: var(--white);
    border-color: #151515;
    color: #151515;
}

.klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
.klaro .context-notice .cm-btn.cm-btn-danger:hover {
    background: #151515;
    color: var(--white);
}

/* enregistrer : bleu de marque */
.klaro .cookie-notice .cm-btn.cm-btn-info,
.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .context-notice .cm-btn.cm-btn-info {
    background: var(--blue1);
    border-color: var(--blue1);
    color: #fff;
}

.klaro .cookie-modal .cm-btn.cm-btn-close {
    background: var(--white2);
    color: var(--ink);
}

.klaro .cm-btn:hover {
    transform: translateY(-1px);
}

.klaro .cm-btn:focus-visible,
.klaro a:focus-visible {
    outline: 3px solid var(--green-dark);
    outline-offset: 2px;
}

/* ----------------------------------------------------------
   Modale de gestion des cookies
   ---------------------------------------------------------- */

.klaro .cookie-modal .cm-bg {
    background: rgb(11 31 45 / .55);
    backdrop-filter: blur(3px);
}

.klaro .cookie-modal .cm-modal.cm-klaro {
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgb(15 23 42 / .3);
    animation: cc-fade-in .25s ease both;
}

@media (min-width: 660px) {
    .klaro .cookie-modal .cm-modal.cm-klaro {
        max-width: 580px;
    }
}

.klaro .cookie-modal .cm-modal .cm-header {
    border-bottom-color: var(--border);
    padding: 22px 24px 14px;
}

.klaro .cookie-modal .cm-modal .cm-header h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--ink);
}

.klaro .cookie-modal .cm-modal .cm-header p {
    margin-bottom: 0;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--muted);
}

.klaro .cookie-modal .cm-modal .cm-header a,
.klaro .cookie-modal .cm-modal .cm-body a {
    color: var(--green-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.klaro .cookie-modal .cm-modal .hide {
    border-radius: 8px;
    padding: 6px;
}

.klaro .cookie-modal .cm-modal .hide:hover {
    background: var(--surface);
}

.klaro .cookie-modal .cm-modal .cm-body {
    padding: 14px 24px;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes > li.cm-purpose + li.cm-purpose {
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 12px;
}

.klaro .cookie-modal .cm-modal .cm-body li.cm-purpose .cm-toggle-all {
    border-top-color: var(--border);
}

.klaro .cookie-modal .cm-modal .cm-footer {
    border-top-color: var(--border);
    padding: 16px 24px;
    background: var(--surface);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-btn {
    width: auto;
    margin: 0;
}

/* Sous 660px, les actions du pied de modale passent en pile pleine largeur */
@media (max-width: 659px) {
    .klaro .cookie-modal .cm-modal .cm-footer-buttons {
        flex-direction: column;
    }

    .klaro .cookie-modal .cm-modal .cm-footer .cm-btn {
        width: 100%;
    }
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by {
    color: var(--muted);
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
    color: var(--muted);
    text-decoration: none;
}

/* Indication d'ouverture en nouvelle fenêtre (règle WCAG 2.4.4),
   masquée visuellement mais présente dans l'arbre d'accessibilité. */
.klaro a[target="_blank"]::after {
    content: " (nouvelle fenêtre)";
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ----------------------------------------------------------
   Interrupteurs
   ---------------------------------------------------------- */

.klaro .cm-list-input:checked + .cm-list-label .slider {
    background-color: var(--green-dark);
}

.klaro .cm-list-input:focus-visible + .cm-list-label .slider {
    outline: 3px solid var(--green-dark);
    outline-offset: 2px;
}

.klaro .cm-list-label .slider {
    box-shadow: none;
}

/* ----------------------------------------------------------
   Animations (désactivées si l'utilisateur limite les effets)
   ---------------------------------------------------------- */

@keyframes cc-notice-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes cc-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .klaro .cookie-notice:not(.cookie-modal-notice),
    .klaro .cookie-modal .cm-modal.cm-klaro {
        animation: none;
    }

    .klaro .cm-btn,
    .klaro .cm-btn:hover {
        transition: none;
        transform: none;
    }
}