/* Cryptauk PassGuard — feuille de style unique du site public.
   Écrite à la main, sans framework : le site ne charge aucune ressource externe (ni CDN, ni police
   distante), ce qui le rend rapide et évite de faire fuiter l'IP des visiteurs vers des tiers.
   Thème sombre par défaut, thème clair si le système le demande. */

:root {
    --fond: #0b1020;
    --fond-2: #111936;
    --carte: #141c3a;
    --bord: #243160;
    --texte: #eaeefb;
    --texte-doux: #a7b0d0;
    --accent: #5b8cff;
    --accent-clair: #8fb0ff;
    --vert: #35d6a4;
    --ambre: #ffb84d;
    --rayon: 14px;
    --largeur: 1140px;
    --ombre: 0 18px 50px rgba(2, 6, 23, .45);
}

@media (prefers-color-scheme: light) {
    :root {
        --fond: #f7f9ff;
        --fond-2: #eef2ff;
        --carte: #ffffff;
        --bord: #dfe5f7;
        --texte: #121a33;
        --texte-doux: #5a6689;
        --accent: #2f5fe0;
        --accent-clair: #1f47b8;
        --ombre: 0 16px 40px rgba(20, 30, 70, .10);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
a { color: var(--accent-clair); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .85em; }
hr { border: 0; border-top: 1px solid var(--bord); margin: 1.5rem 0; }
.sprite { display: none; }
.discret { color: var(--texte-doux); }

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 10;
    background: var(--accent); color: #fff; padding: .7rem 1rem; border-radius: 0 0 var(--rayon) 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.contenu { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; }
.section { padding: 3.5rem 0; }
.section-titre { padding: 4rem 0 1rem; max-width: 58ch; }
.chapeau { font-size: 1.12rem; color: var(--texte-doux); }

/* ---------- En-tête ---------- */

.entete {
    position: sticky; top: 0; z-index: 5;
    background: color-mix(in srgb, var(--fond) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bord);
}
.bande {
    width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto;
    display: flex; align-items: center; gap: 1rem; padding: .75rem 0;
}
.marque { display: inline-flex; align-items: center; gap: .6rem; color: var(--texte); font-weight: 600; letter-spacing: -.01em; }
.marque strong { color: var(--accent-clair); font-weight: 700; }
.marque:hover { text-decoration: none; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.35rem; }
.nav a { color: var(--texte-doux); font-size: .95rem; }
.nav a:hover { color: var(--texte); text-decoration: none; }
.nav .langue { display: inline-flex; align-items: center; gap: .35rem; }
.nav .langue svg { fill: currentColor; }

.menu-etat, .menu-bouton { display: none; }

/* ---------- Boutons ---------- */

.bouton {
    display: inline-block; padding: .8rem 1.4rem; border-radius: 999px; border: 1px solid transparent;
    background: linear-gradient(135deg, var(--accent), #7b5bff); color: #fff; font-weight: 600;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 35%, transparent);
    cursor: pointer; font-size: 1rem;
}
.bouton:hover { text-decoration: none; filter: brightness(1.08); }
.bouton-fantome { background: transparent; border-color: var(--bord); color: var(--texte); box-shadow: none; }
.bouton-petit { padding: .5rem 1rem; font-size: .92rem; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

.lien-fleche::after { content: " →"; }

/* ---------- Héros ---------- */

.heros {
    background:
        radial-gradient(900px 420px at 15% -10%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%),
        radial-gradient(700px 380px at 90% 0%, color-mix(in srgb, #7b5bff 22%, transparent), transparent 65%),
        var(--fond-2);
    border-bottom: 1px solid var(--bord);
}
.heros-grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; padding: 4.5rem 0; }
.surtitre {
    display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
    padding: .35rem .8rem; border: 1px solid var(--bord); border-radius: 999px;
    background: color-mix(in srgb, var(--carte) 70%, transparent);
    font-size: .88rem; color: var(--texte-doux);
}
.surtitre svg { fill: var(--vert); }

.heros-visuel { position: relative; }
.carte-coffre {
    background: var(--carte); border: 1px solid var(--bord); border-radius: calc(var(--rayon) + 6px);
    padding: 1.4rem; box-shadow: var(--ombre); transform: rotate(-1.5deg);
}
.carte-coffre .ligne { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; border-bottom: 1px dashed var(--bord); }
.carte-coffre .ligne:last-child { border-bottom: 0; }
.pastille { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), #7b5bff); flex: none; }
.barre { height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--texte-doux) 35%, transparent); }
.w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; }
.points { margin-left: auto; color: var(--texte-doux); letter-spacing: .12em; font-size: .8rem; }
.badge-chiffre {
    position: absolute; right: -.4rem; bottom: -1.1rem;
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--carte); border: 1px solid var(--bord); border-radius: 999px;
    padding: .5rem .9rem; font-size: .85rem; font-weight: 600; box-shadow: var(--ombre);
}
.badge-chiffre svg { fill: var(--vert); }

/* ---------- Cartes ---------- */

.grille-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.1rem; }
.carte {
    background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
    padding: 1.5rem; transition: transform .15s ease, border-color .15s ease;
}
.grille-cartes .carte:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, var(--bord)); }
.carte h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.2rem; }
.carte h2 svg, .carte-icone { fill: var(--accent-clair); }
.carte-icone { margin-bottom: .6rem; }
.carte p:last-child { margin-bottom: 0; }
.carte-verte { border-color: color-mix(in srgb, var(--vert) 45%, var(--bord)); }
.carte-verte h2 svg { fill: var(--vert); }
.carte-ambre { border-color: color-mix(in srgb, var(--ambre) 45%, var(--bord)); }
.carte-ambre h2 svg { fill: var(--ambre); }

.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
.deux-colonnes-asymetrique { grid-template-columns: 1.4fr .6fr; }

/* ---------- Listes ---------- */

.liste-check, .liste-oeil { list-style: none; margin: 0; padding: 0; }
.liste-check li, .liste-oeil li { position: relative; padding-left: 1.7rem; margin-bottom: .55rem; }
.liste-check li::before { content: "✓"; position: absolute; left: 0; color: var(--vert); font-weight: 700; }
.liste-oeil li::before { content: "•"; position: absolute; left: .35rem; color: var(--ambre); font-weight: 700; }

.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; counter-reset: etape; }
.etapes li { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.5rem; }
.etape-num {
    display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: .7rem;
    border-radius: 10px; background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent-clair); font-weight: 700;
}
.etapes li p:last-child { margin-bottom: 0; }

.definitions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; margin: 0; }
.definitions div { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.2rem 1.4rem; }
.definitions dt { font-weight: 650; margin-bottom: .3rem; }
.definitions dd { margin: 0; color: var(--texte-doux); }

.avertissement {
    display: flex; gap: 1.2rem; align-items: flex-start;
    background: color-mix(in srgb, var(--ambre) 10%, var(--carte));
    border: 1px solid color-mix(in srgb, var(--ambre) 45%, var(--bord));
    border-radius: var(--rayon); padding: 1.6rem;
}
.avertissement svg { fill: var(--ambre); flex: none; margin-top: .2rem; }
.avertissement h2 { font-size: 1.2rem; }
.avertissement p:last-child { margin-bottom: 0; }

.bande-finale { text-align: center; }
.bande-finale .actions { justify-content: center; }

/* ---------- Téléchargement ---------- */

.grille-plateformes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.carte-telechargement { display: flex; flex-direction: column; }
.carte-telechargement .bouton { margin: .4rem 0 1rem; text-align: center; }
.carte-telechargement.indisponible { opacity: .62; }
.etiquette {
    display: inline-block; margin-top: auto; padding: .3rem .75rem; border-radius: 999px;
    border: 1px solid var(--bord); font-size: .82rem; color: var(--texte-doux);
}
.meta { display: flex; gap: 1.6rem; margin: 0; }
.meta dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); }
.meta dd { margin: 0; font-weight: 600; }
.empreinte { margin-top: 1rem; }
.empreinte summary { cursor: pointer; color: var(--texte-doux); font-size: .9rem; }
.empreinte code { display: block; margin-top: .5rem; padding: .7rem; background: var(--fond-2); border: 1px solid var(--bord); border-radius: 8px; word-break: break-all; }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: .7rem; }
.faq details { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.1rem 1.4rem; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-clair); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: .9rem 0 0; color: var(--texte-doux); }

/* ---------- Formulaire ---------- */

.formulaire { display: grid; gap: 1rem; }
.formulaire label { display: grid; gap: .4rem; font-size: .92rem; color: var(--texte-doux); }
.formulaire input, .formulaire textarea {
    font: inherit; color: var(--texte); background: var(--fond-2);
    border: 1px solid var(--bord); border-radius: 10px; padding: .75rem .9rem; width: 100%;
}
.formulaire textarea { resize: vertical; }
.formulaire .bouton { justify-self: start; }
.piege { position: absolute; left: -9999px; }

.message { padding: .9rem 1.1rem; border-radius: 10px; margin-bottom: 1.2rem; }
.message-ok { background: color-mix(in srgb, var(--vert) 16%, transparent); border: 1px solid color-mix(in srgb, var(--vert) 50%, var(--bord)); }
.message-alerte { background: color-mix(in srgb, var(--ambre) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ambre) 50%, var(--bord)); }

/* ---------- Tableau confidentialité ---------- */

.tableau { border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; }
.tableau-ligne { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1rem; padding: 1rem 1.3rem; background: var(--carte); border-bottom: 1px solid var(--bord); }
.tableau-ligne:last-child { border-bottom: 0; }
.tableau-quoi { font-weight: 600; }
.tableau-pourquoi { color: var(--texte-doux); }

.texte { max-width: 72ch; }
.texte h2 { margin-top: 2rem; font-size: 1.25rem; }

.section-404 { text-align: center; max-width: none; padding: 5rem 0; }
.section-404 .actions { justify-content: center; }
.code404 { font-size: clamp(4rem, 14vw, 8rem); font-weight: 800; line-height: 1; margin: 0; background: linear-gradient(135deg, var(--accent), #7b5bff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Pied ---------- */

.pied { border-top: 1px solid var(--bord); background: var(--fond-2); margin-top: 2rem; }
.pied-grille {
    width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; padding: 3rem 0 2rem;
    display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem;
}
.pied h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-doux); }
.pied nav { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.pied nav a { color: var(--texte-doux); }
.pied nav a:hover { color: var(--texte); }
.pied-bas { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; padding-bottom: 2rem; font-size: .88rem; }

/* ---------- Documentation (page API des tâches) ---------- */

.doc { padding-bottom: 4rem; }
.doc-section { padding-top: 2.4rem; scroll-margin-top: 1rem; }
.doc-section h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.doc-section > p, .doc-liste { max-width: 78ch; }

.doc-alerte {
    display: flex; gap: .7rem; align-items: flex-start; margin: 0;
    background: color-mix(in srgb, var(--vert) 10%, var(--carte));
    border: 1px solid color-mix(in srgb, var(--vert) 45%, var(--bord));
    border-radius: var(--rayon); padding: 1rem 1.25rem;
}
.doc-alerte svg { fill: var(--vert); flex: none; margin-top: .1rem; }

.doc-sommaire { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.1rem 1.4rem; margin-top: 1.5rem; }
.doc-sommaire h2 { font-size: 1rem; margin-bottom: .6rem; }
.doc-sommaire ol { columns: 2 240px; column-gap: 2rem; margin: 0; padding-left: 1.3rem; }
.doc-sommaire li { break-inside: avoid; padding: .1rem 0; }

.doc-liste { padding-left: 1.3rem; margin: 0 0 1em; }
.doc-liste li { margin: .4rem 0; }

/* Code en ligne : distinct du texte, lisible dans les deux thèmes */
.doc code { background: var(--fond-2); border: 1px solid var(--bord); border-radius: 6px; padding: .06em .38em; overflow-wrap: anywhere; }

/* Blocs de code : défilement horizontal plutôt que retour à la ligne, qui casserait l'indentation */
.doc-code { margin: 1.2rem 0; }
.doc-code figcaption { font-size: .85rem; color: var(--texte-doux); margin-bottom: .35rem; }
.doc pre {
    margin: 0; padding: 1rem 1.15rem; overflow-x: auto;
    background: var(--fond-2); border: 1px solid var(--bord); border-radius: 10px;
    line-height: 1.55; tab-size: 2;
}
.doc pre code { background: none; border: 0; padding: 0; font-size: .82rem; overflow-wrap: normal; }

/* Tableaux : le conteneur défile sur petit écran, la page ne déborde jamais */
.doc-tableau { overflow-x: auto; margin: 1.2rem 0; border: 1px solid var(--bord); border-radius: 10px; }
.doc table { border-collapse: collapse; width: 100%; font-size: .92rem; }
/* À trois colonnes, un tableau écrasé sur téléphone ne laisse que quelques lettres par ligne à la dernière :
   mieux vaut une largeur lisible et un défilement dans le cadre. Sans effet sur un écran large. */
.doc table:has(th:nth-child(3)) { min-width: 36rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: .65rem .85rem; border-bottom: 1px solid var(--bord); }
.doc th { background: var(--carte); font-weight: 650; }
.doc tbody tr:last-child td { border-bottom: 0; }
/* Dans un tableau, un code ne se coupe jamais (il doit rester lisible et copiable) : la cellule passe à la
   ligne entre deux codes, et le tableau défile dans son cadre sur petit écran */
.doc td code { white-space: nowrap; overflow-wrap: normal; }

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
    .heros-grille, .deux-colonnes, .deux-colonnes-asymetrique { grid-template-columns: 1fr; }
    .heros-visuel { order: -1; }
    .pied-grille { grid-template-columns: 1fr; }
    .tableau-ligne { grid-template-columns: 1fr; gap: .25rem; }

    .menu-bouton { display: grid; gap: 5px; margin-left: auto; cursor: pointer; padding: .5rem; }
    .menu-bouton span { width: 24px; height: 2px; background: var(--texte); border-radius: 2px; }
    .nav {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: flex-start; gap: .9rem;
        background: var(--fond); border-bottom: 1px solid var(--bord); padding: 1.2rem 1.25rem 1.6rem;
    }
    .menu-etat:checked ~ .nav { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .carte-coffre { transform: none; }
}