/* deploy-db : feuille unique, sans dépendance externe. */

:root {
    --fond: #f5f6fa;
    --surface: #ffffff;
    --surface-2: #f9fafb;
    --texte: #111827;
    --texte-2: #4b5563;
    --texte-3: #6b7280;
    --bordure: #e5e7eb;
    --bordure-forte: #d1d5db;

    --primaire: #4f46e5;
    --primaire-fonce: #4338ca;
    --primaire-fond: #eef2ff;
    --dev: #047857;
    --dev-fond: #ecfdf5;
    --dev-bordure: #a7f3d0;
    --prod: #b45309;
    --prod-fond: #fffbeb;
    --prod-bordure: #fde68a;
    --danger: #dc2626;
    --danger-fonce: #b91c1c;
    --danger-fond: #fef2f2;
    --danger-bordure: #fecaca;
    --succes: #047857;
    --succes-fond: #ecfdf5;

    --rayon: 12px;
    --rayon-petit: 8px;
    --ombre: 0 1px 2px rgba(16, 24, 40, .05);
    --ombre-haute: 0 10px 24px -6px rgba(16, 24, 40, .14);
    --police: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --police-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.55 var(--police); color: var(--texte); background: var(--fond); -webkit-font-smoothing: antialiased; }
a { color: var(--primaire); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; margin: 0 0 .4rem; font-weight: 700; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; font-weight: 650; }
code { font: .85em var(--police-code); background: #f1f2f6; color: #374151; padding: .1em .35em; border-radius: 4px; }
strong { font-weight: 650; }

/* ---------- En-tête ---------- */
.entete { background: var(--surface); border-bottom: 1px solid var(--bordure); }
.entete__contenu { max-width: 1120px; margin: 0 auto; padding: .75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: .7rem; color: var(--texte); }
.marque:hover { text-decoration: none; }
.marque__logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--primaire); color: #fff; font-size: 1.1rem; font-weight: 700; }
.marque__texte { display: flex; flex-direction: column; font-weight: 700; line-height: 1.15; }
.marque__sous-titre { font-weight: 400; font-size: .8rem; color: var(--texte-3); }
.navigation { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.navigation form { margin: 0; }
.navigation__lien { padding: .4rem .75rem; border-radius: var(--rayon-petit); color: var(--texte-2); font-weight: 550; }
.navigation__lien:hover { background: var(--surface-2); color: var(--texte); text-decoration: none; }
.navigation__lien--actif { background: var(--primaire-fond); color: var(--primaire); }
.navigation__compte { margin: 0 .25rem 0 .75rem; color: var(--texte-3); font-size: .85rem; }

/* ---------- Page ---------- */
.page { max-width: 1120px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.intro { margin: 1.75rem 0 1.5rem; }
.intro p { margin: 0; color: var(--texte-2); max-width: 70ch; }
.bloc { margin-top: 2.25rem; }
.bloc__texte { color: var(--texte-2); }
.bloc__pied { margin-top: .75rem; }
.fil { margin: 0 0 .5rem; }
.vide { color: var(--texte-3); margin: 0; }
.pile { display: flex; flex-direction: column; gap: 1rem; }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .62rem 1.1rem; border: 1px solid transparent; border-radius: var(--rayon-petit); background: var(--primaire); color: #fff; font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.bouton:hover { background: var(--primaire-fonce); text-decoration: none; }
.bouton:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, .35); }
.bouton--plein { width: 100%; padding: .72rem 1.1rem; }
.bouton--secondaire { background: var(--surface); color: var(--primaire); border-color: #c7d2fe; }
.bouton--secondaire:hover { background: var(--primaire-fond); }
.bouton--discret { background: transparent; color: var(--texte-2); border-color: var(--bordure-forte); }
.bouton--discret:hover { background: var(--surface-2); color: var(--texte); }
.bouton--danger { background: var(--danger); }
.bouton--danger:hover { background: var(--danger-fonce); }
.bouton--petit { padding: .38rem .7rem; font-size: .85rem; }
.lien { background: none; border: 0; padding: 0; color: var(--texte-3); font: inherit; font-size: .9rem; cursor: pointer; }
.lien:hover { color: var(--texte); text-decoration: underline; }

/* ---------- Champs ---------- */
.champ { display: flex; flex-direction: column; gap: .4rem; }
.champ__libelle { font-weight: 550; font-size: .92rem; }
.champ__saisie { width: 100%; padding: .65rem .8rem; border: 1px solid var(--bordure-forte); border-radius: var(--rayon-petit); background: var(--surface); font: inherit; color: var(--texte); transition: border-color .15s, box-shadow .15s; }
.champ__saisie:focus { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 3px rgba(79, 70, 229, .18); }
.champ__saisie--code { font: 1.4rem var(--police-code); letter-spacing: .35em; text-align: center; }

/* ---------- Alertes ---------- */
.alerte { margin: 0 0 1.25rem; padding: .85rem 1rem; border: 1px solid; border-radius: var(--rayon-petit); font-size: .95rem; }
.alerte ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.alerte__texte { margin: .3rem 0 0; }
.alerte li + li { margin-top: .25rem; }
.alerte--erreur { color: #991b1b; background: var(--danger-fond); border-color: var(--danger-bordure); }
.alerte--attention { color: #78350f; background: var(--prod-fond); border-color: var(--prod-bordure); }
.alerte--succes { color: #065f46; background: var(--succes-fond); border-color: var(--dev-bordure); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; padding: .1rem .55rem; border-radius: 999px; background: #f1f2f6; color: var(--texte-2); font-size: .76rem; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.badge--dev { background: var(--dev-fond); color: var(--dev); }
.badge--prod { background: var(--prod-fond); color: var(--prod); }
.badge--succes { background: var(--succes-fond); color: var(--succes); }
.badge--erreur { background: var(--danger-fond); color: var(--danger); }

/* ---------- Panneau (connexion, double authentification) ---------- */
.panneau { max-width: 400px; margin: 3rem auto; padding: 2rem; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre-haute); }
.panneau--large { max-width: 460px; }
.panneau__titre { font-size: 1.35rem; margin-bottom: .3rem; }
.panneau__texte { margin: 0 0 1.5rem; color: var(--texte-2); }
.panneau__pied { margin-top: 1.25rem; text-align: center; }
.liste-etapes { margin: 0; padding-left: 1.2rem; color: var(--texte-2); }
.qr { display: block; margin: 1rem auto; padding: .5rem; background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); }
.secret { margin: 0 0 1.25rem; font-size: .9rem; color: var(--texte-3); text-align: center; }
.secret summary { cursor: pointer; }
.secret code { display: block; margin-top: .6rem; padding: .5rem; word-break: break-all; letter-spacing: .08em; }

/* ---------- Étapes ---------- */
.etapes { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.etapes__item { flex: 1 1 200px; display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-petit); color: var(--texte-3); }
.etapes__num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--bordure-forte); font-weight: 700; font-size: .85rem; }
.etapes__texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.etapes__titre { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.etapes__valeur { color: var(--texte); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etapes__modifier { margin-left: auto; font-size: .85rem; }
.etapes__item--courante { border-color: var(--primaire); box-shadow: 0 0 0 3px var(--primaire-fond); color: var(--primaire); }
.etapes__item--courante .etapes__num { background: var(--primaire); border-color: var(--primaire); color: #fff; }
.etapes__item--faite .etapes__num { background: var(--succes-fond); border-color: var(--dev-bordure); color: var(--succes); }

/* ---------- Choix des bases (étapes 1 et 2) ---------- */
.colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.colonne__titre { display: flex; align-items: center; gap: .55rem; margin-bottom: .9rem; }
.colonne__compte { color: var(--texte-3); font-weight: 500; font-size: .95rem; }
.pastille-type { width: 10px; height: 10px; border-radius: 50%; }
.pastille-type--dev { background: var(--dev); }
.pastille-type--prod { background: var(--prod); }
.cartes { display: flex; flex-direction: column; gap: .75rem; }

.carte-base { position: relative; display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem 1rem 1.35rem; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); color: var(--texte); overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
.carte-base::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--dev); }
.carte-base--prod::before { background: var(--prod); }
a.carte-base:hover { text-decoration: none; border-color: #c7d2fe; box-shadow: var(--ombre-haute); transform: translateY(-1px); }
a.carte-base:focus-visible { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 3px rgba(79, 70, 229, .25); }
.carte-base__haut { display: flex; gap: .35rem; margin-bottom: .25rem; }
.carte-base__nom { font-size: 1.1rem; font-weight: 700; }
.carte-base__id { font: .8rem var(--police-code); color: var(--texte-3); }
.carte-base__chiffres { display: flex; gap: 1rem; margin-top: .4rem; color: var(--texte-2); font-size: .9rem; }
.carte-base__chiffres strong { color: var(--texte); }
.carte-base__action { margin-top: .75rem; padding-top: .7rem; border-top: 1px solid var(--bordure); color: var(--primaire); font-weight: 600; font-size: .92rem; }
.carte-base--inactive { background: var(--surface-2); box-shadow: none; }
/* Étape 2 : cartes à cocher. */
.carte-base--cochable { cursor: pointer; padding-right: 3rem; }
.carte-base--cochable:hover { border-color: #c7d2fe; box-shadow: var(--ombre-haute); }
.carte-base__case { position: absolute; top: 1rem; right: 1rem; width: 20px; height: 20px; margin: 0; accent-color: var(--primaire); cursor: pointer; }
.carte-base--cochable:has(.carte-base__case:checked) { border-color: var(--primaire); background: #fafaff; box-shadow: 0 0 0 1px var(--primaire); }
.colonne__entete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .9rem; }
.colonne__entete .colonne__titre { margin-bottom: 0; }
.barre-suite { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding: .9rem 0; background: linear-gradient(to top, var(--fond) 70%, transparent); flex-wrap: wrap; }
.carte-base--inactive .carte-base__action { color: var(--texte-3); }

/* ---------- Étape 3 : que copier ---------- */
.trajet { display: flex; align-items: stretch; gap: .9rem; margin-top: 1rem; flex-wrap: wrap; }
.trajet__base { display: flex; flex-direction: column; gap: .15rem; min-width: 220px; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--bordure); border-left: 4px solid var(--dev); border-radius: var(--rayon-petit); }
.trajet__base--prod { border-left-color: var(--prod); }
.trajet__base .badge { align-self: flex-start; margin-bottom: .2rem; }
.trajet__base strong { font-size: 1.05rem; }
.trajet__base small { color: var(--texte-3); }
.trajet__fleche { align-self: center; font-size: 1.6rem; color: var(--texte-3); }
.trajet__cibles { display: flex; gap: .6rem; flex-wrap: wrap; }
.trajet__base--refusee { opacity: .6; }
.tableau__erreur { color: var(--danger); }

.theme { margin-top: 1.75rem; }
.theme__titre { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-3); font-weight: 700; }
.groupes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .75rem; }
.groupe { display: flex; gap: .85rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.groupe:hover { border-color: #c7d2fe; }
.groupe:has(.groupe__case:checked) { border-color: var(--primaire); background: #fafaff; box-shadow: 0 0 0 1px var(--primaire); }
.groupe--sensible:has(.groupe__case:checked) { border-color: var(--prod); background: #fffdf5; box-shadow: 0 0 0 1px var(--prod); }
.groupe__case { flex: none; width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--primaire); cursor: pointer; }
.groupe--sensible .groupe__case { accent-color: var(--prod); }
.groupe__corps { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.groupe__titre { font-weight: 650; }
.groupe__description { color: var(--texte-3); font-size: .88rem; }
.groupe__effet { display: flex; flex-direction: column; gap: .15rem; margin-top: .45rem; padding-top: .45rem; border-top: 1px dashed var(--bordure); color: var(--texte-3); font-size: .85rem; }
.effet { color: var(--primaire); font-weight: 600; }
.effet--neutre { color: var(--succes); font-weight: 550; }
.effet--ecarte { color: var(--texte-3); font-weight: 400; }
.detail { font-size: .83rem; }
.detail summary { width: fit-content; color: var(--texte-3); cursor: pointer; }
.detail summary:hover { color: var(--texte); }
.detail ul { margin: .35rem 0 0; padding-left: 1rem; color: var(--texte-2); }
.detail li + li { margin-top: .15rem; }
.detail code { margin-right: .3rem; }
.alerte--info { color: #3730a3; background: var(--primaire-fond); border-color: #c7d2fe; }

.tout-cocher { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; flex-wrap: wrap; }
.tout-cocher__compte { margin-right: auto; color: var(--texte-3); font-size: .9rem; }
.tout-cocher + .theme { margin-top: .5rem; }
.bouton--inactif, .bouton--inactif:hover { opacity: .45; cursor: default; background: transparent; color: var(--texte-2); }

.barre-recalcul { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1.25rem; color: var(--texte-3); font-size: .9rem; flex-wrap: wrap; }

.confirmation { margin-top: 2.5rem; padding: 1.5rem 1.6rem; background: var(--surface); border: 1px solid var(--danger-bordure); border-top: 4px solid var(--danger); border-radius: var(--rayon); box-shadow: var(--ombre-haute); }
.confirmation__titre { font-size: 1.25rem; margin-bottom: .6rem; }
.confirmation__resume { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .9rem; }
.confirmation__texte { margin: 0 0 1.1rem; color: var(--texte-2); }
.confirmation .champ { max-width: 460px; }
.confirmation__actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; }

/* ---------- Tableaux ---------- */
.tableau-cadre { overflow-x: auto; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); }
.tableau { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau th, .tableau td { padding: .7rem 1rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--bordure); }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau th { background: var(--surface-2); color: var(--texte-3); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.tableau tbody tr:hover td { background: #fafbff; }
.tableau__date { white-space: nowrap; }
.tableau__discret { color: var(--texte-3); }
.tableau__fleche { color: var(--texte-3); margin: 0 .2rem; }
.code-bloc { display: block; padding: .6rem .8rem; word-break: break-all; }

@media (max-width: 760px) {
    .page { padding: 1.25rem 1rem 3rem; }
    .colonnes { grid-template-columns: 1fr; }
    .navigation__compte { display: none; }
    .trajet__fleche { transform: rotate(90deg); }
    .confirmation__actions { flex-direction: column-reverse; }
    .confirmation__actions .bouton { width: 100%; }
}