/* =============================================================================
   SOCLE COMMUN (espace équipe + vitrine)
   Police, couleurs, typographie, boutons, formulaires.
   ============================================================================= */

/* --- Police hébergée dans le projet (pas d'appel à Google) --------------------
   Archivo (OFL) : une seule famille, variable en LARGEUR (62 % → 125 %) et en graisse.
   Titres condensés et très gras (comme les vrais sites de créateurs : Dude Perfect, Yes Theory),
   texte en largeur normale. Une famille = un site cohérent, la variété vient de la largeur. */
@font-face {
    font-family: 'Archivo';
    src: url("../fonts/archivo-Wa7z_Iw.woff2") format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Archivo';
    src: url("../fonts/archivo-italic-IoHLeLP.woff2") format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: italic;
    font-display: swap;
}

/* --- Variables (le "nuancier" de l'app) -------------------------------------
   Couleurs prises DANS LE LOGO GDM : les deux gones (doudoune bleue / doudoune orange),
   la Terre bleue et le bouton lecture rouge. Le duo opposé est la marque. */
:root {
    color-scheme: dark;

    /* Fond : bleu nuit tiré du bleu de la Terre du logo (un bleu, pas un noir) */
    --night: #10213F;
    --night-deep: #0B1830;
    --snow: #EFF3F6;      /* « blanc norvégien » des sections claires : neige à l'ombre, froid, pas crème */
    --surface: rgba(255, 255, 255, 0.05);
    --surface-strong: rgba(255, 255, 255, 0.08);
    --line: rgba(241, 244, 249, 0.12);
    --line-strong: rgba(241, 244, 249, 0.22);
    --ink: #F1F4F9;
    --mist: #AAB7CD;      /* texte secondaire : contraste AA sur --night */
    --mist-dim: #8190AB;

    /* Le duo : Pierre = bleu GDM (froid, carré), Lucas = orange GDM (chaud, fonce) */
    --pierre: #3D8BFF;
    --lucas: #F58A1F;
    /* Action (boutons, aujourd'hui, liens actifs) : l'orange de Lucas, celui qui fonce */
    --signal: var(--lucas);
    --signal-ink: #2B1400; /* texte posé sur l'orange */
    /* Vidéo : le rouge du bouton lecture du logo */
    --play: #E8352B;

    /* Anciens noms gardés comme alias (tout le CSS existant les utilise) */
    --aurora: var(--signal);
    --aurora-ink: var(--signal-ink);

    /* Catégories (valeurs par défaut ; l'admin les surcharge via des styles inline) */
    --cat-home: var(--pierre);    /* couleur de Pierre sur la vitrine */
    --cat-tidiane: var(--lucas);  /* couleur de Lucas sur la vitrine */
    --cat-duo: #F1F4F9;
    --cat-trip: #2EB6A8;          /* le vert-bleu des océans du logo */
    --key-moment: #FF7EB6;

    --danger: #FF6B6B;
    --warning: #FFD166;

    /* Typographie */
    --font-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* Largeur des titres : 78 % = condensé. Mettre 125 % pour des titres très larges. */
    --display-stretch: 78%;

    /* Échelle typographique (ratio ~1.25) */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5625rem;
    --text-2xl: 1.953rem;
    --text-3xl: 2.441rem;

    /* Espacements */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* Rayons : petits pour les éléments denses, plus grands pour les panneaux */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 18px;

    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* --- Reset minimal ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100dvh;
    background: var(--night);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'tnum' 0;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4 {
    font-family: var(--font-display); font-stretch: var(--display-stretch);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

/* Focus clavier toujours visible */
:focus-visible {
    outline: 2px solid var(--aurora);
    outline-offset: 2px;
    border-radius: 4px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--aurora);
    color: var(--aurora-ink);
    border-radius: var(--radius-sm);
    font-weight: 700;
}
.skip-link:focus { top: var(--space-4); }

/* --- Lueurs d'aurore en arrière-plan ---------------------------------------
   Trois dégradés radiaux très diffus, fixés derrière le contenu. */
.aurora-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Fond uni : l'ambiance vient des vraies photos, pas de lueurs décoratives */
    background: var(--night);
}

/* --- Boutons ----------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px; /* cible tactile confortable */
    padding: 0 var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
    white-space: nowrap;
}
.btn:hover { background: var(--surface-strong); border-color: var(--mist-dim); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--primary {
    background: var(--aurora);
    border-color: var(--aurora);
    color: var(--aurora-ink);
}
.btn--primary:hover { background: #FF9D3A; border-color: #FF9D3A; }
.btn--whatsapp { background: #25D366; border-color: #25D366; color: #052E16; }
.btn--whatsapp:hover { background: #3EE07A; border-color: #3EE07A; }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--surface); border-color: transparent; }
.btn--danger { color: var(--danger); }
.btn--sm { min-height: 34px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn--icon { width: 44px; padding: 0; }
.btn--sm.btn--icon { width: 34px; }

/* --- Formulaires ------------------------------------------------------------ */
.field { display: grid; gap: var(--space-1); }
.field label, .field__label { font-size: var(--text-sm); font-weight: 600; color: var(--mist); }
.input, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    background: rgba(11, 24, 48, 0.6);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--ink);
}
.field textarea { min-height: 120px; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--aurora);
    box-shadow: 0 0 0 3px rgba(245, 138, 31, 0.2);
}
.field__help { font-size: var(--text-xs); color: var(--mist-dim); }
.field__error { font-size: var(--text-sm); color: var(--danger); }

/* --- Pastille de couleur (catégorie, personne) ------------------------------- */
.dot {
    display: inline-block;
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background: var(--dot, var(--mist));
    flex: none;
}

/* Avatar rond avec initiales, teinté par la couleur de la personne */
.avatar {
    --size: 28px;
    display: inline-grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: color-mix(in srgb, var(--person, var(--mist)) 22%, var(--night));
    border: 1.5px solid var(--person, var(--mist));
    color: var(--ink);
    font-size: calc(var(--size) * .38);
    font-weight: 800;
    letter-spacing: .02em;
    flex: none;
}
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar + .avatar { margin-left: -8px; }

/* --- Logo (wordmark) ------------------------------------------------------- */
.wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display); font-stretch: var(--display-stretch);
    font-weight: 800;
    font-size: var(--text-lg);
    letter-spacing: -0.03em;
    text-decoration: none;
    line-height: 1;
}
.wordmark__logo { width: 36px; height: 40px; flex: none; object-fit: contain; }


/* --- Compte à rebours (tableau de bord + vitrine) -------------------------- */
.countdown {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    margin-top: var(--space-5);
}
.countdown__unit { display: grid; }
.countdown__value {
    font-family: var(--font-display); font-stretch: var(--display-stretch);
    font-weight: 800;
    font-size: clamp(2.5rem, 9vw, 4.5rem);
    line-height: .9;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}
.countdown__name { color: var(--mist); font-size: var(--text-sm); }


/* Respect de "réduire les animations" (réglage du téléphone / de l'OS) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}