/* Thème commun Procédural (30/09/2026) — pour les pages annexes (crédits, compte client…).
   Mêmes couleurs, logo et boutons que index.html : si l'un change, reporter l'autre. */
:root {
    --or: #E6B450;  --or-vif: #EFC46A;
    --or-doux: rgba(230,180,80,.10);  --or-trait: rgba(230,180,80,.40);
    --surface: #0a1122;
    --trait: rgba(148,163,184,.16);  --trait-fort: rgba(148,163,184,.32);
    --encre: #e8edf5;  --discret: #8b97ac;  --tres-discret: #66738a;
    --ok: #6cc5a1;  --sur-or: #1b1405;
}

/* Logo : monogramme + nom */
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--encre); }
.logo__marque { width: 34px; height: 34px; flex: none; transition: transform .2s ease; }
.logo__nom { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 1.55rem; letter-spacing: -.03em; line-height: 1; color: var(--or); transition: color .15s ease; }
.logo:hover .logo__nom { color: var(--or-vif); }
.logo:hover .logo__marque { transform: rotate(-4deg); }
.logo:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; border-radius: 8px; }

/* Boutons or : toute balise button/a portant la classe « bg-amber-500 » */
:is(button, a)[class~="bg-amber-500"] {
    background-image: none;
    background-color: var(--or);
    color: var(--sur-or);
    font-family: inherit;
    font-weight: 600;
    letter-spacing: .005em;
    text-transform: none;
    border: 0;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 1px 2px rgba(0,0,0,.40);
    transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
:is(button, a)[class~="bg-amber-500"]:hover:not(:disabled) {
    background-color: #F6D386;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 22px rgba(230,180,80,.38);
    cursor: pointer;
}
:is(button, a)[class~="bg-amber-500"]:active:not(:disabled) {
    background-color: #C98F2B;
    transform: translateY(1px) scale(.985);
    box-shadow: inset 0 3px 6px rgba(0,0,0,.40);
    transition-duration: .05s;
}
:is(button, a)[class~="bg-amber-500"]:focus-visible,
.btn-second:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
:is(button, a)[class~="bg-amber-500"]:disabled {
    background-color: rgba(230,180,80,.14); color: rgba(230,180,80,.72);
    box-shadow: inset 0 0 0 1px rgba(230,180,80,.22); cursor: not-allowed;
}

/* Bouton secondaire : contour or */
.btn-second {
    display: inline-block; text-align: center; cursor: pointer;
    background: transparent; color: var(--or);
    border: 1px solid var(--or-trait); border-radius: 10px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease;
}
.btn-second:hover { background: var(--or-doux); border-color: var(--or); }

/* Champs : focus doré */
.champ:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px var(--or-doux); }

/* Pages de guides (Tailwind) : le jaune « amber » de Tailwind passe au doré du thème.
   Préfixe :root pour passer devant les styles que Tailwind injecte après cette feuille. */
:root .text-amber-500 { color: var(--or); }
:root .text-amber-400 { color: var(--or-vif); }
:root .hover\:text-amber-400:hover { color: var(--or-vif); }
:root .hover\:text-amber-500:hover { color: var(--or); }
:root .border-amber-500\/30 { border-color: rgba(230,180,80,.30); }
:root .hover\:border-amber-500\/50:hover { border-color: rgba(230,180,80,.50); }
:root .bg-amber-500\/10 { background-color: var(--or-doux); }
:root .from-amber-500\/10 {
    --tw-gradient-from: rgba(230,180,80,.10) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(230,180,80,0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* En-tête des guides : version du site, discrète */
.logo__version { font-size: .6875rem; color: var(--tres-discret); border: 1px solid var(--trait); border-radius: 6px; padding: 2px 6px; font-family: ui-monospace, monospace; }
.logo--pied .logo__marque { width: 28px; height: 28px; }
.logo--pied .logo__nom { font-size: 1.3rem; }