/* Candidoo — identité commune : polices, couleurs, composants. Bootstrap fournit la mécanique
   (grilles, formulaires, modales) ; ce fichier lui donne l'apparence de Candidoo. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/bricolage.woff2") format("woff2"); }

:root {
    /* Marque */
    --c-violet: #5240f0;
    --c-violet-fonce: #3f2bd6;
    --c-violet-pale: #eeecff;
    --c-violet-trait: #d9d4ff;
    --c-ambre: #ffb547;
    --c-ambre-pale: #fff4e0;

    /* Surfaces et texte */
    --c-fond: #f6f5fb;
    --c-surface: #ffffff;
    --c-surface-2: #faf9fe;
    --c-encre: #17142e;
    --c-texte: #2b2840;
    --c-doux: #6b6884;
    --c-tres-doux: #9a97b0;
    --c-bord: #e6e3f0;
    --c-bord-fort: #d3cfe2;

    /* États */
    --c-succes: #12805c;
    --c-succes-pale: #e3f6ee;
    --c-alerte: #b25e09;
    --c-alerte-pale: #fff3e2;
    --c-danger: #c2312b;
    --c-danger-pale: #fdecea;

    /* Formes */
    --c-rayon-s: 8px;
    --c-rayon: 14px;
    --c-rayon-l: 20px;
    --c-ombre: 0 1px 2px rgba(23, 20, 46, .05), 0 2px 8px rgba(23, 20, 46, .05);
    --c-ombre-haute: 0 12px 40px rgba(40, 28, 120, .14), 0 2px 6px rgba(23, 20, 46, .06);
    --c-police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --c-police-titre: "Bricolage Grotesque", "Inter", system-ui, sans-serif;

    /* Bootstrap aux couleurs de Candidoo */
    --bs-body-font-family: var(--c-police);
    --bs-body-color: var(--c-texte);
    --bs-body-bg: var(--c-fond);
    --bs-border-color: var(--c-bord);
    --bs-primary: var(--c-violet);
    --bs-primary-rgb: 82, 64, 240;
    --bs-link-color: var(--c-violet);
    --bs-link-color-rgb: 82, 64, 240;
    --bs-link-hover-color: var(--c-violet-fonce);
    --bs-link-hover-color-rgb: 63, 43, 214;
    --bs-border-radius: var(--c-rayon-s);
    --bs-focus-ring-color: rgba(82, 64, 240, .25);
}

body { background: var(--c-fond); color: var(--c-texte); font-family: var(--c-police); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .titre { font-family: var(--c-police-titre); color: var(--c-encre); letter-spacing: -.015em; }
h1 { font-size: 1.65rem; font-weight: 700; margin: 0 0 .3rem; }
h2 { font-size: 1.15rem; font-weight: 650; margin: 0 0 .8rem; }
h3 { font-size: 1rem; font-weight: 650; margin: 0 0 .45rem; }
a { text-underline-offset: 2px; }
code { color: var(--c-violet-fonce); background: var(--c-violet-pale); padding: .05rem .3rem; border-radius: 5px; font-size: .85em; }
.texte-doux { color: var(--c-doux); }
.petit { font-size: .86rem; }
.tres-petit { font-size: .78rem; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Boutons et champs ---------- */
.btn { font-weight: 600; border-radius: 10px; }
.btn-primary { --bs-btn-bg: var(--c-violet); --bs-btn-border-color: var(--c-violet); --bs-btn-hover-bg: var(--c-violet-fonce); --bs-btn-hover-border-color: var(--c-violet-fonce); --bs-btn-active-bg: var(--c-violet-fonce); --bs-btn-active-border-color: var(--c-violet-fonce); --bs-btn-disabled-bg: var(--c-violet); --bs-btn-disabled-border-color: var(--c-violet); box-shadow: 0 1px 2px rgba(63, 43, 214, .25); }
.btn-outline-primary { --bs-btn-color: var(--c-violet); --bs-btn-border-color: var(--c-violet-trait); --bs-btn-hover-bg: var(--c-violet-pale); --bs-btn-hover-color: var(--c-violet-fonce); --bs-btn-hover-border-color: var(--c-violet-trait); --bs-btn-active-bg: var(--c-violet-pale); --bs-btn-active-color: var(--c-violet-fonce); }
.btn-outline-secondary { --bs-btn-color: var(--c-texte); --bs-btn-border-color: var(--c-bord-fort); --bs-btn-hover-bg: var(--c-surface-2); --bs-btn-hover-color: var(--c-encre); --bs-btn-hover-border-color: var(--c-bord-fort); --bs-btn-active-bg: var(--c-violet-pale); --bs-btn-active-color: var(--c-encre); }
.btn-outline-danger { --bs-btn-color: var(--c-danger); --bs-btn-border-color: #f1c3c0; --bs-btn-hover-bg: var(--c-danger-pale); --bs-btn-hover-color: var(--c-danger); --bs-btn-hover-border-color: #f1c3c0; }
.btn-lien { background: none; border: 0; padding: 0; color: var(--c-violet); font-weight: 550; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.btn-lien:hover { color: var(--c-violet-fonce); }
.form-control, .form-select { border-color: var(--c-bord-fort); border-radius: 10px; }
.form-control:focus, .form-select:focus { border-color: var(--c-violet); box-shadow: 0 0 0 .2rem rgba(82, 64, 240, .18); }
.form-check-input:checked { background-color: var(--c-violet); border-color: var(--c-violet); }
.champ { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.champ > label, .etiquette-champ { font-size: .84rem; font-weight: 600; color: var(--c-encre); }
.champ .aide { font-size: .78rem; color: var(--c-doux); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
@media (max-width: 640px) { .deux, .trois { grid-template-columns: 1fr; } }
.case { display: inline-flex; align-items: flex-start; gap: .5rem; font-size: .92rem; cursor: pointer; user-select: none; }
.case input { margin-top: .2rem; accent-color: var(--c-violet); }

/* ---------- Cartes, badges, messages ---------- */
.c-carte { background: var(--c-surface); border: 1px solid var(--c-bord); border-radius: var(--c-rayon); box-shadow: var(--c-ombre); padding: 1.35rem 1.4rem; margin-bottom: 1.25rem; }
.c-carte > h2:first-child { margin-top: 0; }
.c-carte-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; }
.c-carte-entete h2 { margin: 0; }
.badge-c { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 650; background: var(--c-violet-pale); color: var(--c-violet-fonce); white-space: nowrap; }
.badge-c.succes { background: var(--c-succes-pale); color: var(--c-succes); }
.badge-c.alerte { background: var(--c-alerte-pale); color: var(--c-alerte); }
.badge-c.danger { background: var(--c-danger-pale); color: var(--c-danger); }
.badge-c.neutre { background: #efeef4; color: var(--c-doux); }
.message { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem 1rem; border-radius: 12px; font-size: .92rem; margin-bottom: 1rem; border: 1px solid transparent; }
.message.succes { background: var(--c-succes-pale); color: #0b5e43; border-color: #bfe8d6; }
.message.erreur { background: var(--c-danger-pale); color: #8f201b; border-color: #f6c9c5; }
.message.info { background: var(--c-violet-pale); color: #2e2290; border-color: var(--c-violet-trait); }
.message.alerte { background: var(--c-alerte-pale); color: #7a4106; border-color: #f6dcb6; }
.message p:last-child { margin-bottom: 0; }

/* ---------- Logo ---------- */
.marque { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--c-encre); }
.marque img { width: 34px; height: 34px; }
.marque span { font-family: var(--c-police-titre); font-weight: 750; font-size: 1.3rem; letter-spacing: -.02em; }
.marque span b { color: var(--c-violet); font-weight: inherit; }

/* ---------- Pages d'accès (connexion, invitation, 2FA) ---------- */
.acces { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.acces-visuel { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 0% 0%, #6e5bff 0%, #4330d9 45%, #2a1c9c 100%); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.acces-visuel::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; border: 60px solid rgba(255, 181, 71, .18); }
.acces-visuel .marque { color: #fff; }
.acces-visuel .marque span b { color: var(--c-ambre); }
.acces-visuel h2 { color: #fff; font-size: 2.1rem; line-height: 1.15; max-width: 22ch; margin-bottom: 1.25rem; }
.acces-visuel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; max-width: 40ch; position: relative; z-index: 1; }
.acces-visuel li { display: flex; gap: .65rem; align-items: flex-start; color: rgba(255, 255, 255, .88); }
.acces-visuel li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: .1rem; border-radius: 50%; background: var(--c-ambre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.6 2.6L14 7.4' fill='none' stroke='%232a1c9c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.acces-visuel .pied { font-size: .82rem; color: rgba(255, 255, 255, .65); position: relative; z-index: 1; }
.acces-formulaire { display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.acces-boite { width: 100%; max-width: 400px; }
.acces-boite .marque { display: none; margin-bottom: 2rem; }
.acces-boite h1 { font-size: 1.85rem; }
.acces-boite > p.texte-doux { margin-bottom: 1.75rem; }
.acces-boite .btn-primary { width: 100%; padding: .7rem; }
.acces-boite .bas { margin-top: 1.5rem; text-align: center; font-size: .88rem; color: var(--c-doux); }
.code-otp { font-size: 1.6rem; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; padding-left: .5em; }
@media (max-width: 900px) {
    .acces { grid-template-columns: 1fr; }
    .acces-visuel { display: none; }
    .acces-boite .marque { display: inline-flex; }
}

/* ---------- Administration ---------- */
.admin { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.admin-menu { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.4rem 1rem; background: var(--c-encre); color: #cfcce3; }
.admin-menu .marque { color: #fff; padding: 0 .5rem; }
.admin-menu .marque span b { color: var(--c-ambre); }
.admin-menu .rubrique { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #807c9e; padding: 0 .6rem; margin-bottom: .35rem; }
.admin-menu nav { display: grid; gap: .15rem; }
.admin-menu nav a, .admin-menu nav button { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 9px; color: #d6d3ea; text-decoration: none; font-weight: 550; font-size: .93rem; background: none; border: 0; width: 100%; text-align: left; }
.admin-menu nav a:hover, .admin-menu nav button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.admin-menu nav a.actif { background: rgba(110, 91, 255, .28); color: #fff; }
.admin-menu svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.admin-menu .bas-menu { margin-top: auto; display: grid; gap: .6rem; }
.admin-menu .qui { padding: .7rem; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: .82rem; }
.admin-menu .qui strong { display: block; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.admin-contenu { padding: 2rem 2.25rem 4rem; max-width: 1180px; width: 100%; }
.admin-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.admin-entete p { margin: 0; }
@media (max-width: 900px) {
    .admin { grid-template-columns: 1fr; }
    .admin-menu { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .8rem 1rem; }
    .admin-menu .rubrique, .admin-menu .qui { display: none; }
    .admin-menu nav { display: flex; flex-wrap: wrap; }
    .admin-menu nav a, .admin-menu nav button { width: auto; }
    .admin-menu .bas-menu { margin: 0; display: flex; }
    .admin-contenu { padding: 1.25rem 1rem 3rem; }
}

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.chiffre { background: var(--c-surface); border: 1px solid var(--c-bord); border-radius: var(--c-rayon); padding: 1rem 1.15rem; box-shadow: var(--c-ombre); }
.chiffre .valeur { font-family: var(--c-police-titre); font-size: 1.9rem; font-weight: 700; color: var(--c-encre); line-height: 1.1; }
.chiffre .libelle { font-size: .82rem; color: var(--c-doux); margin-top: .2rem; }

.controles { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.controles li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--c-bord); }
.controles li:last-child { border-bottom: 0; }
.controles .pastille-etat { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; }
.controles .ok .pastille-etat { background: var(--c-succes-pale); color: var(--c-succes); }
.controles .ko .pastille-etat { background: var(--c-alerte-pale); color: var(--c-alerte); }
.controles .detail { margin-left: auto; font-size: .82rem; color: var(--c-doux); text-align: right; }

.tableau-c { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.tableau-c th { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c-doux); padding: .55rem .75rem; border-bottom: 1px solid var(--c-bord); text-align: left; white-space: nowrap; }
.tableau-c td { padding: .75rem; border-bottom: 1px solid var(--c-bord); vertical-align: middle; }
.tableau-c tr:last-child td { border-bottom: 0; }
.tableau-c .actions { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
.defilement-x { overflow-x: auto; margin: 0 -1.4rem; padding: 0 1.4rem; }
.jauge-ligne { height: 6px; border-radius: 99px; background: #ecebf3; overflow: hidden; min-width: 70px; }
.jauge-ligne span { display: block; height: 100%; background: var(--c-violet); border-radius: inherit; }
.jauge-ligne.pleine span { background: var(--c-alerte); }

.lien-copie { display: flex; gap: .5rem; align-items: stretch; }
.lien-copie input { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .85rem; }

.moteur { border: 1px solid var(--c-bord); border-radius: 12px; padding: 1rem; margin-bottom: .8rem; background: var(--c-surface-2); }
.moteur-entete { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.moteur-entete strong { font-size: .98rem; color: var(--c-encre); }
.resultat-verif { display: block; margin-top: .45rem; font-size: .84rem; }
.resultat-verif.ok { color: var(--c-succes); }
.resultat-verif.ko { color: var(--c-danger); }
.sources-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; }
.source-choix { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--c-bord); border-radius: 10px; background: var(--c-surface); cursor: pointer; }
.source-choix:has(input:checked) { border-color: var(--c-violet-trait); background: var(--c-violet-pale); }
.source-choix input { margin-top: .25rem; accent-color: var(--c-violet); }
.barre-enregistrer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: .6rem; padding: .9rem 0; background: linear-gradient(to top, var(--c-fond) 70%, transparent); }

/* ---------- Double authentification ---------- */
.etapes-2fa { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.qr { background: #fff; border: 1px solid var(--c-bord); border-radius: 14px; padding: .5rem; width: 196px; }
.qr img { width: 100%; height: auto; display: block; }
.secret-manuel { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .85rem; word-break: break-all; background: var(--c-surface-2); border: 1px dashed var(--c-bord-fort); border-radius: 8px; padding: .4rem .6rem; }
@media (max-width: 640px) { .etapes-2fa { grid-template-columns: 1fr; } }

.page-simple { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.page-simple .haut { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; gap: 1rem; }
.chiffre .valeur.petit-titre { font-size: 1.1rem; padding: .45rem 0 .2rem; }
.form-control, .form-select { background-color: var(--c-surface); }
.c-carte-entete > div:first-child { flex: 1 1 280px; }