/* =============================================================
   Olentzero maskatua — feuille de style
   Direction : nuit d'hiver basque + billet de tirage en papier kraft.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root {
    /* Couleurs */
    --nuit: #182420;
    --nuit-haut: #1d2b26;
    --surface: #223530;
    --surface-line: #33473f;
    --ticket: #f3ecda;
    --ticket-ombre: #e6dcc2;
    --encre: #241f18;
    --braise: #c97a2b;
    --braise-vif: #e08f3c;
    --pin: #5c8268;
    --brume: #8c9c96;
    --brume-vive: #cbd6d0;
    --alerte: #c1543f;

    /* Typo */
    --police-affichage: 'Fraunces', Georgia, serif;
    --police-corps: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --police-ticket: 'Space Mono', 'Courier New', monospace;

    /* Rythme */
    --rayon: 14px;
    --rayon-s: 8px;
    --ombre-carte: 0 20px 40px -24px rgba(0, 0, 0, 0.55);
    --transition: 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :root { --transition: 0ms; }
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

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

* { box-sizing: border-box; }

body {
    background:
        radial-gradient(ellipse 900px 500px at 15% -10%, rgba(201, 122, 43, 0.10), transparent 60%),
        var(--nuit);
    color: var(--brume-vive);
    font-family: var(--police-corps);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

.container {
    max-width: 720px;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

h1, h2, h3 {
    font-family: var(--police-affichage);
    color: #fff;
    letter-spacing: -0.01em;
    margin: 0;
}

h1 {
    font-size: clamp(1.75rem, 4vw + 0.5rem, 2.75rem);
    font-weight: 600;
    text-align: center;
    padding-block: clamp(0.5rem, 3vw, 1.25rem) clamp(1.5rem, 4vw, 2.5rem);
}

h2 {
    font-size: clamp(1.1rem, 2vw + 0.6rem, 1.4rem);
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--brume-vive);
}

h2::before {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--braise);
    margin-right: 0.6em;
    vertical-align: middle;
}

a { color: var(--braise-vif); }

/* Accessibilité : focus visible cohérent partout */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--braise-vif);
    outline-offset: 3px;
    border-radius: var(--rayon-s);
}

/* ---------- Sélecteur de langue ---------- */

.text-end.mb-4 { display: flex; justify-content: flex-end; margin-bottom: 1.5rem !important; }

#language-selector.form-select {
    width: auto !important;
    background-color: var(--surface);
    color: var(--brume-vive);
    border: 1px solid var(--surface-line);
    border-radius: 999px;
    padding: 0.4rem 2.2rem 0.4rem 1rem;
    font-family: var(--police-ticket);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238c9c96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 11px 11px;
}

#language-selector.form-select:focus {
    border-color: var(--braise);
    box-shadow: 0 0 0 3px rgba(201, 122, 43, 0.25);
}

/* ---------- Carte du formulaire ---------- */

form.mb-5 {
    background: var(--surface);
    border: 1px solid var(--surface-line);
    border-radius: var(--rayon);
    padding: clamp(1.25rem, 4vw, 2.25rem);
    box-shadow: var(--ombre-carte);
}

/* ---------- Lignes de participants ---------- */

#participants-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.participant-row {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--surface-line);
    border-radius: var(--rayon-s);
    padding: 0.9rem 1rem;
    margin: 0;
    background: rgba(0, 0, 0, 0.12);
    transition: border-color var(--transition);
}

.participant-row:focus-within {
    border-color: var(--braise);
}

.participant-row label {
    font-family: var(--police-ticket);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brume);
    margin-bottom: 0.6rem;
    font-weight: 400;
    font-style: normal;
}

.name-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
}

.name-input-wrapper { width: auto; margin-bottom: 0; }

.name-input-wrapper input,
.name-input.form-control {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--surface-line);
    border-radius: 0;
    padding: 0.35rem 0.1rem;
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    box-shadow: none;
}

.name-input.form-control:focus {
    background: transparent;
    border-bottom-color: var(--braise);
    color: #fff;
    box-shadow: none;
}

.name-input::placeholder {
    font-style: italic;
    font-size: 0.85em;
    color: var(--brume);
    opacity: 0.8;
    font-weight: 400;
}

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

.btn {
    border-radius: 999px;
    font-family: var(--police-corps);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 1.4rem;
    border-width: 1px;
    transition: transform var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition);
}

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

.btn-success {
    background: var(--braise);
    border-color: var(--braise);
    color: #fff;
}
.btn-success:hover,
.btn-success:focus {
    background: var(--braise-vif);
    border-color: var(--braise-vif);
    color: #fff;
}
.btn-success:disabled {
    background: var(--surface-line);
    border-color: var(--surface-line);
    color: var(--brume);
    opacity: 1;
}

.btn-outline-secondary {
    background: transparent;
    border-color: var(--surface-line);
    color: var(--brume-vive);
}
.btn-outline-secondary:hover {
    background: var(--surface-line);
    border-color: var(--surface-line);
    color: #fff;
}

.btn-outline-primary {
    background: transparent;
    border-color: var(--surface-line);
    color: var(--brume-vive);
}
.btn-outline-primary:hover {
    background: var(--surface);
    border-color: var(--braise);
    color: var(--braise-vif);
}

.d-flex.gap-3.mt-3,
.d-flex.gap-2 {
    flex-wrap: wrap;
}

/* ---------- Le billet de résultat (élément signature) ---------- */

#resultat-wrapper { margin-top: clamp(2rem, 5vw, 3rem) !important; }

.koadroa {
    display: block;
    padding: 0;
    margin: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

#emaitza {
    position: relative;
    display: block;
    margin: 0.5rem auto 2rem;
    padding: 1.75rem 1.75rem 1.5rem;
    max-width: 480px;
    background: var(--ticket);
    color: var(--encre);
    border-radius: var(--rayon-s);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 24px 40px -20px rgba(0, 0, 0, 0.6);
    transform: rotate(-0.6deg);
    transition: transform var(--transition);
}

#emaitza:focus-within,
#emaitza:hover { transform: rotate(0deg); }

/* Dents de billet, à gauche et à droite */
#emaitza::before,
#emaitza::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 14px;
    background: radial-gradient(circle at center, var(--nuit) 0 5px, transparent 5.5px) repeat-y;
    background-size: 14px 16px;
}
#emaitza::before { left: -7px; }
#emaitza::after { right: -7px; }

#emaitza h3 {
    font-family: var(--police-ticket);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pin);
    margin-bottom: 0.35rem;
}

#date-text.data {
    position: relative;
    font-family: var(--police-ticket);
    font-style: normal;
    font-size: 0.78rem;
    color: rgba(36, 31, 24, 0.65);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 2px dashed rgba(36, 31, 24, 0.25);
}

/* Encoches rondes qui « perforent » la ligne pointillée */
#date-text.data::before,
#date-text.data::after {
    content: "";
    position: absolute;
    bottom: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--nuit-haut);
}
#date-text.data::before { left: -1.75rem; }
#date-text.data::after { right: -1.75rem; }

#resultat {
    font-family: var(--police-ticket);
    font-size: 0.95rem;
}

#resultat p {
    margin: 0;
    padding: 0.5rem 0.1rem;
    border-bottom: 1px solid rgba(36, 31, 24, 0.1);
}
#resultat p:last-child { border-bottom: none; }

/* État initial : bouton placeholder à l'intérieur du billet, avant tirage */
#resultat > button.btn {
    width: 100%;
    background: transparent;
    border: 1.5px dashed rgba(36, 31, 24, 0.3);
    color: var(--encre);
    font-family: var(--police-corps);
}
#resultat > button.btn:hover {
    border-color: var(--braise);
    color: var(--braise);
    background: rgba(201, 122, 43, 0.08);
}

#copy-confirm.text-success {
    font-family: var(--police-ticket);
    font-size: 0.8rem;
    color: var(--pin) !important;
    align-self: center;
}

/* ---------- Verrouillage ---------- */

.row.align-items-center.mb-3.mt-4 { margin-top: 2rem !important; row-gap: 1rem; }

.irekia, .hetsia {
    border-radius: var(--rayon-s);
    padding: 0.65rem 1.1rem;
    font-family: var(--police-corps);
    font-weight: 600;
    font-size: 0.85rem;
}

.irekia {
    background: transparent;
    border: 1px solid var(--surface-line);
    color: var(--brume-vive);
}
.irekia:hover:not(:disabled) {
    border-color: var(--braise);
    color: var(--braise-vif);
}
.irekia:disabled { opacity: 0.4; }

.hetsia {
    background: rgba(92, 130, 104, 0.12);
    border: 1px solid var(--pin);
    color: var(--pin);
}
.hetsia:hover {
    background: var(--pin);
    border-color: var(--pin);
    color: #fff;
}

.icon-box {
    width: 34px;
    height: 34px;
    margin-top: 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    border: none !important;
}

.hidden { display: none !important; }

/* ---------- Lien permanent ---------- */

.lotura {
    font-family: var(--police-ticket);
    font-size: 0.85rem;
    color: var(--brume);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
}

.lotura .prov,
.lotura a {
    color: var(--braise-vif);
    word-break: break-all;
}

/* ---------- Petits écrans ---------- */

@media (max-width: 576px) {
    .container { padding-inline: 1rem; }

    form.mb-5 { padding: 1.25rem; border-radius: var(--rayon-s); }

    #emaitza {
        transform: none;
        margin-inline: 0;
        padding: 1.25rem 1.25rem 1.1rem;
    }
    #emaitza::before, #emaitza::after { display: none; }

    #date-text.data::before { left: -0.6rem; }
    #date-text.data::after { right: -0.6rem; }

    .d-flex.gap-3.mt-3 .btn,
    .d-flex.gap-2 .btn {
        flex: 1 1 100%;
    }

    .row.align-items-center.mb-3.mt-4 .col-auto {
        display: flex;
        gap: 0.6rem;
        width: 100%;
    }
    .row.align-items-center.mb-3.mt-4 .col-auto .btn { flex: 1; }
}

@media (min-width: 577px) and (max-width: 768px) {
    .container { max-width: 92vw; }
}