/* ==========================================================================
   Site public — socle partage
   Extrait de templates/partials/_public_styles.html.twig.
   Charge par le site vitrine, les pages de connexion, l'aide et les pages
   legales. Ecrit contre public/css/tokens.css.
   ========================================================================== */

/* Alias de l'ancienne charte, remappes sur les jetons actuels.
   Ils restent declares parce que le balisage de ces pages les utilise encore
   (.btn, --gray-200, ...). Point d'entree unique pour finir la bascule. */
:root {
    /* Le violet du site vitrine n'a pas de jeton equivalent : il est plus
       sature que --mod-documents. Conserve tel quel, voir le rapport. */
    --primary:       #6022C4;
    --primary-50:    #F5F0FF;
    --primary-hover: #7439D9;

    --gray-100: var(--surface-sunken);
    --gray-200: var(--border);
    --gray-300: var(--border-strong);
    --gray-700: var(--ink-secondary);
    --white:    var(--surface);

    --radius-xlg: var(--radius-pill);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Boutons herites ------------------------------------------------
   Vocabulaire .btn de l'ancienne charte. Conserve tant que le site vitrine,
   l'aide et les pages legales s'en servent ; les ecrans recettes utilisent
   .ui-btn / <twig:ui:Button>.
   -------------------------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 0.8rem 1.25rem;
    line-height: 1.2;
    font-size: 0.75rem;
    font-weight: var(--weight-medium);
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-xlg);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    font-family: var(--font-ui);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
    border: 2px solid var(--primary);
}

.btn-primary:hover:not(:disabled) {
    border-color: var(--primary-hover);
    background: var(--surface);
    color: var(--primary-hover);
}

.btn-secondary {
    background: var(--gray-100);
    color: var(--gray-700);
    border: 2px solid var(--gray-100);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--gray-200);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--gray-300);
    color: var(--gray-700);
}

.btn-outline:hover:not(:disabled) {
    border-color: var(--primary-hover);
    color: var(--primary);
}

.btn-success {
    background: var(--success);
    color: var(--ink-on-dark);
    border: 2px solid var(--success);
}

.btn-success:hover:not(:disabled) {
    background: var(--success-ink);
    border-color: var(--success-ink);
}

.btn-warning {
    background: var(--warning);
    color: var(--ink-on-dark);
    border: 2px solid var(--warning);
}

.btn-warning:hover:not(:disabled) {
    background: var(--warning-ink);
    border-color: var(--warning-ink);
}

.btn-danger {
    background: var(--danger);
    color: var(--ink-on-dark);
    border: 2px solid var(--danger);
}

.btn-danger:hover:not(:disabled) {
    background: var(--danger-ink);
    border-color: var(--danger-ink);
}

.btn-sm {
    padding: 0.4rem 0.875rem;
    font-size: 0.8rem;
}

.btn-lg {
    padding: 1rem 1.75rem;
    font-size: 1rem;
}

.btn-block {
    display: block;
    width: 100%;
}

/* ---------- Pied de page public ------------------------------------------- */
.home-footer {
    background: var(--ink);
    color: var(--ink-faint);
    padding: var(--space-16) var(--gutter-page) var(--space-8);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-16);
    max-width: 1200px;
    margin: 0 auto var(--space-4);
}

.footer-brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--track-title);
    color: var(--ink-on-dark);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

/* Meme raison qu'en en-tete : la marque est carree. */
.footer-brand img {
    width: 27px;
    height: 27px;
}

.footer-desc {
    font-size: 0.9rem;
    line-height: var(--lh-loose);
    max-width: 300px;
}

.footer-section h4 {
    color: var(--ink-on-dark);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links a {
    color: var(--ink-faint);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--duration) var(--ease);
}

.footer-links a:hover {
    color: var(--ink-on-dark);
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .home-footer {
        padding: var(--space-12) var(--gutter-page) var(--space-8);
    }
}