/*
 * Design system partage — direction "sobre / marque", couleurs de la marque
 * Median Events (indigo #2F2A76 extrait du logo). Utilise par toutes les
 * pages cote client (personnalisation + galerie) : tokens + composants
 * generiques ici, mise en page propre a chaque flux dans customize.css /
 * gallery.css. Mode clair uniquement (contexte client maitrise).
 *
 * Remplace la direction "verre depoli" (glassmorphism) du premier jet,
 * jugee trop generique — ici : fond uni, cartes opaques a bordure nette,
 * zero flou/halo, rayons d'arrondi varies intentionnellement plutot
 * qu'uniformes partout.
 *
 * Badge de carte selectionnee : cercle + coche (cf. customize.css), PAS le
 * losange incline du logo — regle retablie le 2026-08-30 par Damien apres
 * une premiere version de cette regle (2026-08-27, "Chantier design
 * admin+client, Volet 3", cf. CLAUDE.md) qui reservait au contraire le
 * losange a ce seul usage client, refusant explicitement de l'etendre a
 * l'admin (qui utilisait deja le cercle+coche). Le 2026-08-30, Damien a
 * annule cette position pour l'inverse : une seule convention de selection
 * dans tout le produit (cercle+coche, deja en place cote admin), le losange
 * disparaissant de ce role partout, y compris ici. Le losange reste le
 * monogramme du logo, mais n'est plus utilise nulle part comme indicateur
 * de selection — et, comme avant, jamais comme pictogramme decoratif devant
 * un titre.
 */

@import url("/assets/css/fonts.css?ver=4d6526ca");

:root {
    --brand: #2F2A76;
    --brand-dark: #221D5C;
    --brand-tint: #EDEBF9;
    --brand-tint-strong: #DAD6F2;

    --bg: #F4F1EA;
    --surface: #FFFFFF;
    --border: #E3E0E6;
    --border-strong: #D6D2DC;

    --ink: #2C2C2C;
    --ink-muted: #6B675F;
    --white: #FFFFFF;

    --danger: #C0392B;
    --danger-tint: #FBEAE7;
    --success: #1F8A63;
    --success-tint: #E7F6EF;

    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(44, 34, 24, 0.06);
    --shadow-md: 0 4px 16px rgba(44, 34, 24, 0.10);

    --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    min-height: 100vh;
    background: var(--bg);
    line-height: 1.5;
}

/* ── Squelette "carte centree" pour les pages sans mise en page propre
   (verification telephone, erreurs, renvoi de lien...) ─────────────────── */

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
}

.auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: clamp(1.5rem, 5vw, 2.5rem);
}

.auth-card p { text-align: center; color: var(--ink-muted); }
.auth-card p:last-child { margin-bottom: 0; }

.auth-card button[type="submit"],
.auth-card .btn { width: 100%; }

.brand-header {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.brand-header img,
.page-header img {
    height: 32px;
    width: auto;
}

/* ── Bandeau hero + carte de rappel (chantier design admin+client, mobile
   d'abord — pages consultees majoritairement depuis un telephone). Introduit
   au Volet 4 (customize.php), repris a l'identique au Volet 5 (gallery.php),
   d'ou son emplacement ici plutot que duplique dans les deux feuilles de
   style page-a-page. Meme principe que le bandeau d'accueil admin (Volet 1) :
   badge translucide simple (rgba, sans flou) pour les infos d'evenement,
   effet verre reel (backdrop-filter) reserve a la seule carte qui chevauche
   le bas du bandeau -- jamais etendu au reste de la page. ─────────────── */

/* Logo hors du bandeau, deliberement : le fichier existant a son propre fond
   indigo plein (pas de version transparente/claire), illisible pose sur le
   bandeau indigo lui-meme (constate au rendu reel, Volet 4) -- reste sur le
   fond creme de la page, comme partout ailleurs dans l'app. */
.client-page-logo {
    display: block;
    height: 20px;
    margin: 0 auto 1.25rem;
}

.client-hero {
    background: var(--brand);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem 3rem;
    text-align: center;
}

.client-hero h1 {
    color: #fff;
    font-size: 1.3rem;
    margin: 0 0 0.75rem;
}

.client-hero-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-pill);
    padding: 0.45rem 1rem;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    max-width: 100%;
}

/* Carte de rappel : sibling direct de .client-hero (pas un enfant) -- la
   marge negative remonte donc toujours contre le vrai bord bas du bandeau,
   quelle que soit la hauteur du bandeau (nom client court ou long, ou nom
   d'evenement long cote galerie). */
.client-hero-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 0.85rem 1.25rem;
    margin: -1.75rem 0.75rem 1.5rem;
    text-align: center;
    font-size: 0.88rem;
    position: relative;
}

@media (min-width: 640px) {
    .client-page-logo { height: 24px; margin-bottom: 1.5rem; }
    .client-hero { padding: 2.25rem 2rem 3.5rem; }
    .client-hero h1 { font-size: 1.5rem; }
    .client-hero-card { margin: -2rem 1.5rem 2rem; padding: 1rem 1.5rem; font-size: 0.92rem; }
}

/* ── Typo ─────────────────────────────────────────────────────────────── */

h1 {
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.6em;
    text-align: center;
}

h2 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.9em;
    padding-bottom: 0.6em;
    border-bottom: 1px solid var(--border);
}

p { margin: 0 0 1em; color: var(--ink); }

a { color: var(--brand); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; }

strong { font-weight: 700; }

/* ── Formulaires partages ────────────────────────────────────────────── */

label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

input[type="text"],
input[type="email"] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: var(--font-body);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--ink);
    margin-bottom: 1.25rem;
}

input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint);
}

button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--brand);
    color: var(--white);
    border: none;
    padding: 0.8rem 1.4rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

button:hover,
.btn:hover {
    background: var(--brand-dark);
    box-shadow: var(--shadow-md);
}

button:active,
.btn:active { transform: translateY(1px); }

/* Variante secondaire (Volet 5 du chantier design) -- premiere action non
   primaire de ce cote client, .btn seul jusqu'ici n'avait qu'un style plein. */
.btn-primary { background: var(--brand); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--border-strong); box-shadow: none; }
.btn-ghost:hover { background: var(--bg); border-color: var(--ink-muted); }

button:disabled,
.btn:disabled {
    background: var(--border-strong);
    color: var(--ink-muted);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

[role="alert"] {
    background: var(--danger-tint) !important;
    color: var(--danger) !important;
    border: 1px solid var(--danger);
    padding: 0.7rem 1rem;
    border-radius: var(--radius-xs);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem !important;
}

/* ── Pied de page légal de TOUTES les pages client (personnalisation,
   galerie, tirages, pages d'erreur) — audit C17, étendu par décision de Damien
   le 2026-09-23. Discret mais lisible : texte secondaire sur le fond de page,
   liens indigo, cibles tactiles de 44 px. ── */
.client-legal-footer {
    max-width: 960px;
    margin: 2.5rem auto 0;
    padding: 1.25rem 1rem 1.5rem;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.client-legal-footer p {
    margin: 0 0 0.25rem;
}

.client-legal-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 1.25rem;
}

.client-legal-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--brand);
}

/* Pages « carte centrée » (.auth-shell, 100vh) : sans ceci, le pied de page
   tomberait sous la ligne de flottaison, un écran plus bas. La carte reste
   centrée dans la hauteur restante et le pied de page se pose en bas de
   l'écran. Sans :has() (navigateur ancien), le pied de page reste simplement
   sous la carte. */
body:has(> .auth-shell) {
    display: flex;
    flex-direction: column;
}

body:has(> .auth-shell) > .auth-shell {
    flex: 1 0 auto;
    min-height: 0;
}

body:has(> .auth-shell) > .client-legal-footer {
    width: 100%;
    margin-top: 0;
}