/* ============================================================================
   Piano Concerto Festival — socle visuel commun
   ============================================================================
   Pourquoi ce fichier :
   Chaque page portait sa propre copie des couleurs, boutons et formulaires —
   environ 120 Ko de CSS dupliqué sur 8 pages. C'est la cause directe des
   défauts corrigés cette semaine : menu blanc sur blanc, doré illisible à
   1,9:1, portraits ovales, effet de fusion dupliqué dans deux feuilles.

   Règle : aucune couleur en dur dans les pages. Tout passe par les variables
   ci-dessous. Une page nouvelle (billetterie sans compte, annexe bourse…)
   hérite de l'identité sans une ligne de CSS.
   ============================================================================ */

:root {
    /* Identité — reprise de l'existant, pas une nouvelle palette */
    --pcf-ink:          #1a1a2e;   /* bleu nuit, fonds sombres et texte */
    --pcf-ink-2:        #16213e;
    --pcf-accent:       #b38b6d;   /* doré, éléments décoratifs et survols */
    --pcf-accent-text:  #8f6836;   /* version foncée : doré LISIBLE sur blanc (5:1) */
    --pcf-accent-soft:  rgba(179, 139, 109, 0.12);

    /* Neutres, légèrement bleutés pour s'accorder au bleu nuit */
    --pcf-paper:        #f5f7fa;
    --pcf-surface:      #ffffff;
    --pcf-surface-2:    #eef1f6;
    --pcf-line:         #dde2ea;
    --pcf-line-soft:    #e9edf3;
    --pcf-muted:        #5a6178;

    /* Couleurs de sens — distinctes de l'accent, et toutes lisibles sur blanc */
    --pcf-ok:           #2b6f52;
    --pcf-ok-bg:        #e6f1ea;
    --pcf-warn:         #8a6614;
    --pcf-warn-bg:      #f8efd9;
    --pcf-danger:       #a63d34;
    --pcf-danger-bg:    #fae9e7;
    --pcf-info:         #3f5170;
    --pcf-info-bg:      #e8edf5;

    /* Échelle typographique */
    --pcf-text-xs:      0.78rem;
    --pcf-text-sm:      0.88rem;
    --pcf-text-base:    1rem;
    --pcf-text-lg:      1.15rem;
    --pcf-text-xl:      1.5rem;
    --pcf-text-2xl:     2rem;
    --pcf-text-3xl:     clamp(2rem, 4.5vw, 3rem);

    /* Rythme */
    --pcf-gap-xs:       0.5rem;
    --pcf-gap-sm:       0.85rem;
    --pcf-gap:          1.25rem;
    --pcf-gap-lg:       2rem;
    --pcf-gap-xl:       3.5rem;

    --pcf-radius:       10px;
    --pcf-radius-sm:    6px;
    --pcf-shadow:       0 1px 3px rgba(26, 26, 46, 0.06), 0 8px 24px rgba(26, 26, 46, 0.06);
    --pcf-shadow-lift:  0 4px 12px rgba(26, 26, 46, 0.10), 0 16px 40px rgba(26, 26, 46, 0.10);

    --pcf-measure:      68ch;
    --pcf-container:    1200px;
}

/* ---------------------------------------------------------------- Base ---- */

.pcf-page {
    background: var(--pcf-paper);
    color: var(--pcf-ink);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.pcf-container {
    max-width: var(--pcf-container);
    margin: 0 auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

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

/* Le bandeau réserve la place de la barre fixe, sans plus : un en-tête trop
   haut repousse le contenu utile hors de l'écran, ce qui coûte au visiteur
   un défilement avant même de voir quoi que ce soit. */
.pcf-hero {
    position: relative;
    background: linear-gradient(140deg, var(--pcf-ink) 0%, var(--pcf-ink-2) 100%);
    color: #fff;
    padding: calc(5.5rem + var(--pcf-gap)) 0 var(--pcf-gap-lg);
}

.pcf-hero__eyebrow {
    display: block;
    font-size: var(--pcf-text-xs);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pcf-accent);
    margin-bottom: var(--pcf-gap-sm);
}

.pcf-hero__title {
    font-size: clamp(1.9rem, 3.6vw, 2.5rem);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin: 0;
}

.pcf-hero__lead {
    margin: var(--pcf-gap-xs) 0 0;
    max-width: var(--pcf-measure);
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--pcf-text-base);
    font-weight: 300;
}

.pcf-hero__eyebrow { margin-bottom: var(--pcf-gap-xs); }

/* ------------------------------------------------------------- Sections ---- */

.pcf-section { padding-block: var(--pcf-gap-xl); }

.pcf-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pcf-gap);
    margin-bottom: var(--pcf-gap-lg);
    padding-bottom: var(--pcf-gap-sm);
    border-bottom: 1px solid var(--pcf-line);
}

.pcf-section__title {
    font-size: var(--pcf-text-xl);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0;
}

.pcf-section__note {
    font-size: var(--pcf-text-sm);
    color: var(--pcf-muted);
    margin: 0;
}

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

.pcf-card {
    background: var(--pcf-surface);
    border: 1px solid var(--pcf-line);
    border-radius: var(--pcf-radius);
    box-shadow: var(--pcf-shadow);
    overflow: hidden;
}

.pcf-card__body { padding: var(--pcf-gap-lg); }

.pcf-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pcf-card--link:hover {
    transform: translateY(-3px);
    box-shadow: var(--pcf-shadow-lift);
    border-color: var(--pcf-accent);
}

.pcf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--pcf-gap);
}

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

.pcf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pcf-gap-xs);
    padding: 0.8rem 1.6rem;
    font-family: inherit;
    font-size: var(--pcf-text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--pcf-radius-sm);
    cursor: pointer;
    transition: all 0.22s ease;
    white-space: nowrap;
}

.pcf-btn--primary {
    background: var(--pcf-ink);
    border-color: var(--pcf-ink);
    color: #fff;
}
.pcf-btn--primary:hover { background: var(--pcf-ink-2); }

.pcf-btn--accent {
    background: var(--pcf-accent);
    border-color: var(--pcf-accent);
    color: var(--pcf-ink);
}
.pcf-btn--accent:hover { filter: brightness(1.06); }

.pcf-btn--ghost {
    background: transparent;
    border-color: var(--pcf-line);
    color: var(--pcf-ink);
}
.pcf-btn--ghost:hover { border-color: var(--pcf-ink); background: var(--pcf-surface-2); }

.pcf-btn--danger { background: var(--pcf-danger); border-color: var(--pcf-danger); color: #fff; }

.pcf-btn[disabled], .pcf-btn--disabled { opacity: 0.5; cursor: not-allowed; }

.pcf-btn:focus-visible,
.pcf-field input:focus-visible,
.pcf-field select:focus-visible,
.pcf-field textarea:focus-visible,
.pcf-card--link:focus-visible {
    outline: 2px solid var(--pcf-accent-text);
    outline-offset: 2px;
}

/* ---------------------------------------------------------- Formulaires ---- */

.pcf-form { display: flex; flex-direction: column; gap: var(--pcf-gap); }

.pcf-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--pcf-gap);
}

.pcf-field { display: flex; flex-direction: column; gap: 0.4rem; }
.pcf-field--full { grid-column: 1 / -1; }

.pcf-field__label {
    font-size: var(--pcf-text-sm);
    font-weight: 600;
    color: var(--pcf-ink);
}

.pcf-field__label .req { color: var(--pcf-danger); }

.pcf-field input,
.pcf-field select,
.pcf-field textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font-family: inherit;
    font-size: var(--pcf-text-base);
    color: var(--pcf-ink);
    background: var(--pcf-surface);
    border: 1px solid var(--pcf-line);
    border-radius: var(--pcf-radius-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pcf-field input:hover,
.pcf-field select:hover,
.pcf-field textarea:hover { border-color: var(--pcf-muted); }

.pcf-field input:focus,
.pcf-field select:focus,
.pcf-field textarea:focus {
    border-color: var(--pcf-accent);
    box-shadow: 0 0 0 3px var(--pcf-accent-soft);
    outline: none;
}

.pcf-field textarea { min-height: 7rem; resize: vertical; }

.pcf-field__help { font-size: var(--pcf-text-xs); color: var(--pcf-muted); }
.pcf-field__error { font-size: var(--pcf-text-xs); color: var(--pcf-danger); }

/* ------------------------------------------------------------- Messages ---- */

.pcf-alert {
    display: flex;
    gap: var(--pcf-gap-sm);
    align-items: flex-start;
    padding: var(--pcf-gap) ;
    border-radius: var(--pcf-radius-sm);
    border: 1px solid transparent;
    font-size: var(--pcf-text-sm);
}

.pcf-alert--ok     { background: var(--pcf-ok-bg);     color: var(--pcf-ok);     border-color: var(--pcf-ok); }
.pcf-alert--warn   { background: var(--pcf-warn-bg);   color: var(--pcf-warn);   border-color: var(--pcf-warn); }
.pcf-alert--danger { background: var(--pcf-danger-bg); color: var(--pcf-danger); border-color: var(--pcf-danger); }
.pcf-alert--info   { background: var(--pcf-info-bg);   color: var(--pcf-info);   border-color: var(--pcf-info); }

/* ------------------------------------------------------------ Pastilles ---- */

.pcf-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    font-size: var(--pcf-text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 999px;
    white-space: nowrap;
}

.pcf-badge--ok     { background: var(--pcf-ok-bg);     color: var(--pcf-ok); }
.pcf-badge--warn   { background: var(--pcf-warn-bg);   color: var(--pcf-warn); }
.pcf-badge--danger { background: var(--pcf-danger-bg); color: var(--pcf-danger); }
.pcf-badge--info   { background: var(--pcf-info-bg);   color: var(--pcf-info); }
.pcf-badge--accent { background: var(--pcf-accent-soft); color: var(--pcf-accent-text); }

/* -------------------------------------------------------------- Tableau ---- */

.pcf-table-wrap { overflow-x: auto; border-radius: var(--pcf-radius); border: 1px solid var(--pcf-line); background: var(--pcf-surface); }

.pcf-table { width: 100%; border-collapse: collapse; font-size: var(--pcf-text-sm); }

.pcf-table th,
.pcf-table td { padding: 0.9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--pcf-line-soft); vertical-align: middle; }

.pcf-table thead th {
    font-size: var(--pcf-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pcf-muted);
    background: var(--pcf-surface-2);
    border-bottom: 1px solid var(--pcf-line);
}

.pcf-table tbody tr:last-child td { border-bottom: none; }
.pcf-table tbody tr:hover { background: var(--pcf-surface-2); }
.pcf-table .num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ État vide ---- */

.pcf-empty {
    text-align: center;
    padding: var(--pcf-gap-xl) var(--pcf-gap);
    color: var(--pcf-muted);
}

.pcf-empty__title { font-size: var(--pcf-text-lg); color: var(--pcf-ink); margin: 0 0 var(--pcf-gap-xs); font-weight: 500; }
.pcf-empty p { margin: 0 auto var(--pcf-gap); max-width: 46ch; }

/* --------------------------------------------------------- Accessibilité --- */

.pcf-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .pcf-card--link, .pcf-btn { transition: none; }
    .pcf-card--link:hover { transform: none; }
}