/* Entête de marque — habillé ICI et pas par le projet : le kit doit
           rester présentable sur un projet qui ne monte ni style.css ni
           common.css (cf. renderHeader). Couleurs prises aux variables du
           socle quand elles existent, valeurs de repli sinon. */
        .consentHeader { padding: 4vh 4vw 0; box-sizing: border-box; }
        .consentLogo { color: var(--color-txt, #1c1c1c); text-decoration: none;
            font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em;
            font-family: var(--font-title, inherit); }
        .consentLogo:hover { color: var(--color-primary, #FF9430); }
        .consentLogo img { max-height: 40px; width: auto; display: block; }
        .consentHeader + .consentKit { padding-top: 4vh; }
        .consentKit { min-height: 80vh; padding: 8vh 4vw; box-sizing: border-box; }

        /* ---- JEU DE COULEURS DE LA CARTE -------------------------------
           La carte est une surface CLAIRE imposée par le kit (texte foncé).
           Ce qui s'y peint ne peut donc PAS hériter des variables du projet :
           --color-a, --color-a-hover, --color-primary, --color-button-before
           sont réglées pour le FOND DE PAGE, pas pour cette carte. Sur un
           thème sombre (Destin : --color-a #E7E7F0, --color-a-hover #FFFFFF)
           ça donnait du gris clair sur carte claire, et du BLANC SUR BLANC au
           survol des liens de l'index ?rgpd.
           Le kit porte donc ses propres jetons, contrastés par défaut sur
           blanc (accent #2f6feb : 4,6:1 — AA sur texte courant). Un projet qui
           veut ses teintes surcharge les --consent-* dans SON CSS : c'est le
           CAS PARTICULIER, jamais le cas de base. Exemple, côté projet :
             .consentKit { --consent-accent: #7C6CF1; --consent-surface: #fff; }
           ------------------------------------------------------------------ */
        .consentKit { --cs-surface: var(--consent-surface, #fff);
            --cs-fg: var(--consent-fg, #1c2230);
            --cs-muted: var(--consent-muted, #5b6577);
            --cs-accent: var(--consent-accent, #2f6feb);
            --cs-accent-strong: var(--consent-accent-strong, #1b4fbf);
            --cs-accent-soft: var(--consent-accent-soft, rgba(0,0,0,.05)); }

        /* Liens dans la carte : accent du kit, souligné (un lien doit se voir
           autrement que par la couleur), survol plus FONCÉ donc plus contrasté. */
        .consentKit a { color: var(--cs-accent); text-decoration: underline; text-underline-offset: .15em; }
        .consentKit a:hover { color: var(--cs-accent-strong); }
        .consentKit a:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
        /* Liens COMPOSITES : ce sont des blocs cliquables, pas du texte de lien.
           On leur rend la couleur du corps et on neutralise le soulignement —
           y compris au survol, sinon a:hover du socle reprend la main. */
        .consentKit .consentListLink, .consentKit .consentListLink:hover {
            color: var(--cs-fg); text-decoration: none; }
        /* <a class='button'> (Renouveler / Redonner mon accord) : c'est un
           bouton du projet, sa couleur de texte est celle prévue pour ça. */
        .consentKit .button, .consentKit .button:hover {
            color: var(--color-button-txt, #fff); text-decoration: none; }

        .consentCard { width: 840px; max-width: 90vw; background: var(--cs-surface); color: var(--cs-fg);
            border-radius: 16px; padding: 2.4rem; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
        .consentTitle { margin: 0 0 .4rem; color: var(--cs-fg); }
        .consentIntro { margin: 0 0 1.4rem; color: var(--cs-muted); }
        .consentLegal { background: rgba(0,0,0,.04); border-left: 4px solid var(--cs-accent);
            padding: 1rem 1.2rem; border-radius: 8px; font-size: .92rem; line-height: 1.55; margin-bottom: 1.6rem; }
        .consentErrors { background: #fdecea; color: #a3201a; border-radius: 8px; padding: .8rem 1.2rem 0.8rem 2.2rem; margin: 0 0 1.2rem; }
        .consentFields { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.2rem; }
        .consentFields .inputDiv { display: flex; flex-direction: column; gap: .35rem; }
        .consentFields label.labelBefore { font-weight: 600; font-size: .9rem; }
        .consentFields input { width: 100%; padding: .7rem .9rem; border: 1px solid #cfcfcf; border-radius: 8px;
            font-size: 1rem; box-sizing: border-box; background: #fff; color: #111; }
        .consentFields input:focus { outline: none; border-color: var(--cs-accent);
            box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
        .consentCheck { display: flex; align-items: flex-start; gap: .6rem; margin: 1rem 0 1.4rem; }
        .consentCheck input[type=checkbox] { margin-top: .25rem; width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--cs-accent); }
        .consentCheck label { font-size: .95rem; line-height: 1.45; }
        .consentSignature { margin-bottom: 1.4rem; }
        .consentSignLabel { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
        .consentSignWrap { border: 1px dashed #b4b4b4; border-radius: 10px; background: #fff; }
        .consentSignCanvas { width: 100%; height: 180px; display: block; touch-action: none; cursor: crosshair; border-radius: 10px; }
        /* Boutons secondaires : plus spécifiques que la règle .consentKit .button
           ci-dessus, qui sinon leur imposerait la couleur de texte des boutons
           primaires (blanc sur fond clair). */
        .consentKit .consentSignClear { margin-top: .5rem; background: #efefef; color: #333; border: none; }
        .consentActions { display: flex; justify-content: flex-end; }
        .consentSubmit { font-size: 1.05rem; padding: .8rem 1.8rem; }
        .consentList { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
        .consentListItem { margin: 0; }
        .consentListLink { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid #e2e2e2;
            border-radius: 12px; background: var(--cs-surface); transition: border-color .15s, transform .15s, box-shadow .15s; }
        .consentListLink:hover { border-color: var(--cs-accent); transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(0,0,0,.12); }
        .consentListIco { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
            border-radius: 10px; background: var(--cs-accent-soft); color: var(--cs-accent); font-size: 1.2rem; }
        .consentListBody { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 auto; min-width: 0; }
        .consentListTitle { font-weight: 600; font-size: 1.02rem; }
        .consentListIntro { font-size: .88rem; color: var(--cs-muted); line-height: 1.4; }
        .consentListArrow { flex: 0 0 auto; color: #b4b4b4; }
        .consentListLink:hover .consentListArrow { color: var(--cs-accent); }
        .consentFlash { background: rgba(46,158,91,.14); border-left: 4px solid var(--consent-ok, #2e9e5b);
            color: var(--cs-fg); padding: .9rem 1.1rem; border-radius: 8px; margin-bottom: 1.2rem; font-weight: 500; }
        .consentBadge { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 999px;
            font-weight: 600; font-size: .92rem; }
        .consentBadge--active { background: rgba(111,197,109,.18); color: #2e7d32; }
        .consentBadge--withdrawn { background: #fdecea; color: #a3201a; }
        .consentValid { margin: .6rem 0 0; font-size: .95rem; color: var(--cs-muted); }
        .consentHistoryTitle { font-size: 1.05rem; margin: 1.6rem 0 .6rem; }
        .consentHistory { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
        .consentHistoryItem { display: flex; align-items: center; gap: .8rem; padding: .65rem .9rem; border-radius: 10px;
            background: rgba(0,0,0,.03); }
        .consentHistoryIco { flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
            border-radius: 50%; font-size: .85rem; color: #fff; }
        .consentHistoryItem--accept .consentHistoryIco { background: #6fc56d; }
        .consentHistoryItem--reject .consentHistoryIco { background: #d9534f; }
        .consentHistoryLib { flex: 1 1 auto; font-weight: 500; }
        .consentHistorySign { color: var(--cs-muted); margin-left: .3rem; }
        .consentHistoryDate { flex: 0 0 auto; font-size: .85rem; color: var(--cs-muted); }
        .consentStatusActions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
        .consentWithdrawForm { margin: 0; }
        .consentKit .consentWithdrawBtn { background: #fff; color: #a3201a; border: 1px solid #e0a9a4; }
        .consentKit .consentWithdrawBtn:hover { background: #fdecea; color: #a3201a; }
        .consentDone { text-align: center; }
        /* Vert de réussite FIXE : --color-tertiary est une teinte décorative du
           projet (lavande pâle sur Destin), illisible en gros pictogramme sur
           carte claire — et sans rapport avec la sémantique « c'est validé ». */
        .consentIcon { font-size: 3.4rem; color: var(--consent-ok, #2e9e5b); margin-bottom: .6rem; }
        .consentDoneMsg { font-size: 1.05rem; line-height: 1.5; }
        @media (max-width: 600px){ .consentCard { padding: 1.6rem; } }