/* =====================================================================
   Invitation — « Une journée avec moi »
   Tokens et composants repris à l'identique du handoff de design.
   Mobile uniquement (portrait). Sur grand écran : cadre téléphone centré.
   ===================================================================== */

:root {
    --accent:        #F0731E;
    --accent-dark:   #C2410C;
    --accent-hover:  #9A3412;

    --ink:           #2B1B3D;
    --ink-2:         #5B4A5E;
    --ink-3:         #7A687D;
    --ink-4:         #8B7890;
    --ink-5:         #A08C9B;
    --ink-off:       #C4B4C6;
    --day-off:       #D6C6CC;
    --weekday:       #B0A0B4;

    --border-soft:   #E0CDBB;
    --border-dash:   #DFC7B4;
    --border-err:    #E8927A;

    --surface:       #FFFFFF;
    --surface-sel:   #FFF1E4;
    --bg-top:        #FFF9F2;
    --bg-bot:        #FDEFE0;

    --hair:          rgba(43, 27, 61, .07);
    --track:         rgba(43, 27, 61, .12);

    --grad:          linear-gradient(180deg, #F0731E 0%, #C2410C 100%);

    --sh-opt:        0 6px 18px rgba(43, 27, 61, .05);
    --sh-card:       0 8px 22px rgba(43, 27, 61, .07);
    --sh-key:        0 3px 8px rgba(43, 27, 61, .07);
    --sh-slot:       0 4px 10px rgba(43, 27, 61, .07);
    --sh-icon:       0 10px 26px rgba(43, 27, 61, .09);
    --sh-cal:        0 10px 30px rgba(43, 27, 61, .07);
    --sh-sel:        0 10px 26px rgba(240, 115, 30, .18);
    --sh-badge:      0 18px 40px rgba(194, 65, 12, .35);

    --serif:         'Instrument Serif', Georgia, 'Times New Roman', serif;
    --sans:          'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------------------ base -- */

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

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

body {
    margin: 0;
    background: var(--bg-bot);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

button {
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    user-select: none;
}

button:disabled { cursor: default; }

input {
    font-family: inherit;
    border-radius: 0; /* iOS */
}

.noscript {
    padding: 40px 24px;
    font: 300 16px/1.55 var(--sans);
    color: var(--ink-2);
    text-align: center;
}

/* ---------------------------------------------------------------- cadre --- */

.frame {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

.app {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bot) 100%);
    padding: 64px 24px 40px;
    padding-top: max(64px, calc(env(safe-area-inset-top) + 20px));
    padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 20px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Au-delà de la taille d'un téléphone : on garde le format mobile, centré. */
@media (min-width: 620px) and (min-height: 700px) {
    body { background: radial-gradient(120% 90% at 50% 0%, #FBEFE2 0%, #EFDCC9 60%, #E7CFB8 100%); }

    .frame {
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
    }

    .app {
        flex: 0 0 auto;
        width: 402px;
        height: 874px;
        min-height: 0;
        max-height: calc(100dvh - 80px);
        padding: 64px 24px 40px;
        border-radius: 44px;
        box-shadow: 0 0 0 10px #16121c, 0 0 0 12px #3a3145, 0 34px 90px rgba(43, 27, 61, .28);
    }
}

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

.screen {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    animation: vrise .5s ease both;
}

.screen--fast { animation-duration: .4s; }

.sp    { flex: 1; min-height: 20px; }
.sp-14 { flex: 1; min-height: 14px; }
.sp-18 { flex: 1; min-height: 18px; }
.sp-26 { flex: 1; min-height: 26px; }

/* ------------------------------------------------------------ typographie - */

.kicker {
    font: 400 12px/1 var(--sans);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent-dark);
}

.kicker--lg   { font-size: 13px; }
.kicker--step { letter-spacing: .2em; }

.title-56 { font: 400 56px/1.02 var(--serif); letter-spacing: -.01em; color: var(--ink); margin: 14px 0 0; }
.title-44 { font: 400 44px/1.05 var(--serif); color: var(--ink); margin: 12px 0 0; }
.title-42 { font: 400 42px/1.08 var(--serif); color: var(--ink); margin: 26px 0 0; }
.title-36 { font: 400 36px/1.1  var(--serif); color: var(--ink); margin: 10px 0 6px; }
.title-34 { font: 400 34px/1.1  var(--serif); color: var(--ink); margin: 10px 0 4px; }

.em { font-style: italic; color: var(--accent-dark); }

.lead   { font: 300 16px/1.55 var(--sans); color: var(--ink-2); margin: 16px 0 0; text-wrap: pretty; }
.lead-l { font: 300 17px/1.55 var(--sans); color: var(--ink-2); margin: 22px 0 0; text-wrap: pretty; }
.lead-l + .lead-l { margin-top: 14px; }

.sub      { font: 300 15px/1.5   var(--sans); color: var(--ink-3); margin: 0 0 20px; }
.sub--opt { margin-bottom: 22px; }
.sub-sm   { font: 300 14.5px/1.5 var(--sans); color: var(--ink-3); margin: 0; }

/* -------------------------------------------------------- 1. mot de passe - */

.lock {
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    border-radius: 20px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sh-icon);
}

.field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 9px 10px 9px 18px;
    background: var(--surface);
    border-radius: 20px;
    border: 1.5px solid var(--hair);
    box-shadow: var(--sh-card);
}

.field.is-error { border-color: var(--border-err); }
.field.shake    { animation: vshake .4s ease; }

.field input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font: 500 18px var(--sans);
    color: var(--ink);
    letter-spacing: .04em;
    padding: 0;
}

.field input::placeholder { color: var(--ink-off); }

.field-go {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: none;
    border-radius: 14px;
    background: var(--grad);
    color: #fff;
    font: 600 18px var(--sans);
    line-height: 1;
}

.err {
    font: 400 14px var(--sans);
    color: var(--accent-dark);
    margin: 12px 0 0;
    min-height: 18px;
    opacity: 0;
    transition: opacity .2s ease;
}

.err.is-on { opacity: 1; }

/* -------------------------------------------------------------- 2. pendu - */

.hang-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0 4px;
}

.hang-row > svg { flex: 0 0 auto; }
.hang-side      { flex: 1; }

.slots {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.slot {
    width: 26px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 18px var(--sans);
    color: var(--ink);
    background: transparent;
    border-bottom: 3px solid var(--border-dash);
    transition: all .2s ease;
}

.slot.is-shown {
    background: var(--surface);
    border-bottom: none;
    box-shadow: var(--sh-slot);
}

.slots.is-won .slot { color: var(--accent-dark); }

.lives {
    font: 300 13px/1.4 var(--sans);
    color: var(--ink-5);
    margin: 12px 0 0;
}

.keys {
    --kgap: 5px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.krow {
    display: flex;
    gap: var(--kgap);
    justify-content: center;
}

/* Toutes les touches ont la largeur d'une rangée de 10 : la dernière rangée
   (WXCVBN) garde le même gabarit et se centre, comme un vrai clavier. */
.key {
    flex: 0 1 calc((100% - 9 * var(--kgap)) / 10);
    min-width: 0;
    height: 42px;
    border: none;
    border-radius: 10px;
    font: 600 15px var(--sans);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--sh-key);
    transition: background .16s ease, color .16s ease, box-shadow .16s ease, opacity .16s ease, transform .09s ease;
    padding: 0;
    touch-action: manipulation;
}

.key.is-good { background: var(--grad); color: #fff; box-shadow: none; }
.key.is-bad  { background: var(--hair); color: var(--ink-off); box-shadow: none; }

/* Retour au doigt : la touche s'enfonce. */
.key:not(:disabled):active,
.key.is-hit {
    transform: scale(.92);
    box-shadow: 0 1px 3px rgba(43, 27, 61, .09);
}

/* Partie finie : les touches non jouées ne font plus mine d'attendre un appui. */
.keys.is-over .key:not(.is-good):not(.is-bad) {
    opacity: .4;
    box-shadow: none;
}

/* Écrans étroits : on récupère de la largeur sur les espaces entre touches. */
@media (max-width: 359px) {
    .keys { --kgap: 4px; }
    .key  { font-size: 14px; }
}

/* --------------------------------------------------------- 3. invitation - */

.btn-primary {
    width: 100%;
    height: 60px;
    border: none;
    border-radius: 20px;
    background: var(--grad);
    color: #fff;
    font: 600 19px var(--sans);
    letter-spacing: .01em;
}

.btn-primary--sm { height: 54px; border-radius: 18px; font-size: 17px; }
.btn-primary.is-pulse { animation: vpulse 2.6s ease-in-out infinite; }
.btn-primary:active { transform: scale(.97); }

.cta-zone {
    position: relative;
    height: 150px;
}

.refuse {
    position: absolute;
    left: 50%;
    top: 78px;
    height: 54px;
    min-width: 220px;
    padding: 0 22px;
    border-radius: 18px;
    border: 1.5px solid var(--border-soft);
    background: var(--surface);
    color: var(--ink-5);
    font: 400 16px var(--sans);
    white-space: nowrap;
    transition: transform .28s cubic-bezier(.2, 1.2, .4, 1), background .3s, color .3s;
}

.refuse.is-morphed {
    border: none;
    background: var(--grad);
    color: #fff;
    font-weight: 600;
}

.note {
    font: 300 12.5px/1.5 var(--sans);
    color: var(--ink-5);
    text-align: center;
    margin: 12px 0 0;
}

/* ------------------------------------------------------- 4. + 5. étapes --- */

.dots {
    display: flex;
    gap: 6px;
    margin-bottom: 26px;
}

.dot {
    height: 4px;
    flex: 1;
    border-radius: 4px;
    background: var(--track);
    transition: background .3s ease;
}

.dot.is-done { background: var(--accent-dark); }
.dot.is-now  { background: var(--accent); }

.cal {
    background: var(--surface);
    border-radius: 26px;
    padding: 20px 18px;
    box-shadow: var(--sh-cal);
}

.cal-head {
    font: 600 17px var(--sans);
    color: var(--ink);
    text-align: center;
    margin-bottom: 14px;
}

.cal-week,
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cal-week { margin-bottom: 6px; }

.wd {
    text-align: center;
    font: 500 11px var(--sans);
    color: var(--weekday);
}

.day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    font: 300 15px var(--sans);
    color: var(--day-off);
    transition: all .18s ease;
    cursor: default;
}

.day.is-open {
    background: var(--surface-sel);
    font-weight: 600;
    color: var(--accent-dark);
    cursor: pointer;
}

.day.is-sel {
    background: var(--grad);
    color: #fff;
    transform: scale(1.06);
}

.day--void { visibility: hidden; }

.freeform {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .55);
    border: 1.5px dashed var(--border-dash);
    margin-top: 12px;
}

.opts .freeform { margin-top: 0; }

.freeform input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font: 400 15.5px var(--sans);
    color: var(--ink);
    padding: 0;
}

.freeform input::placeholder { color: var(--ink-5); }

/* iOS zoome sur les champs sous 16px — imperceptible, mais évite le saut. */
@media (pointer: coarse) {
    .freeform input { font-size: 16px; }
}

.freeform-go {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: none;
    border-radius: 13px;
    font: 600 17px var(--sans);
    line-height: 1;
    background: rgba(43, 27, 61, .06);
    color: var(--ink-off);
    transition: all .2s ease;
}

.freeform-go.is-on { background: var(--grad); color: #fff; }

.back {
    align-self: flex-start;
    background: none;
    border: none;
    font: 400 14px var(--sans);
    color: var(--ink-5);
    padding: 8px 0;
}

.opts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 16px 18px;
    border-radius: 20px;
    background: var(--surface);
    border: 1.5px solid var(--hair);
    box-shadow: var(--sh-opt);
    transition: all .18s ease;
}

.opt.is-sel {
    background: var(--surface-sel);
    border-color: var(--accent);
    box-shadow: var(--sh-sel);
    transform: scale(.985);
}

.opt b {
    display: block;
    font: 500 17px/1.25 var(--sans);
    color: var(--ink);
}

.opt span {
    display: block;
    font: 300 13.5px/1.4 var(--sans);
    color: var(--ink-4);
    margin-top: 3px;
}

/* -------------------------------------------------------- 6. confirmation - */

.confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.piece {
    position: absolute;
    top: -30px;
}

.done {
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    animation: vpop .6s cubic-bezier(.2, 1.3, .4, 1) both;
}

.badge {
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sh-badge);
    animation: vfloat 3s ease-in-out infinite;
}

.recap {
    font: 300 16px/1.55 var(--sans);
    color: var(--ink-2);
    margin: 16px 0 0;
    max-width: 280px;
}

.outro {
    font: 300 15px/1.55 var(--sans);
    color: var(--ink-4);
    margin: 22px 0 0;
    max-width: 280px;
}

.sign {
    font: 400 20px var(--serif);
    font-style: italic;
    color: var(--accent-dark);
    margin: 20px 0 0;
}

.restart {
    margin-top: 30px;
    background: none;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 11px 22px;
    font: 400 14px var(--sans);
    color: var(--ink-5);
}

/* ----------------------------------------------------------- animations --- */

@keyframes vpop {
    0%   { transform: scale(.86); opacity: 0; }
    60%  { transform: scale(1.03); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes vrise {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes vfall {
    0%   { transform: translateY(-40px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(860px) rotate(720deg); opacity: 0; }
}

@keyframes vfloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

@keyframes vpulse {
    0%, 100% { box-shadow: 0 10px 26px rgba(194, 65, 12, .32); }
    50%      { box-shadow: 0 14px 38px rgba(194, 65, 12, .5); }
}

@keyframes vshake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-9px); }
    40%      { transform: translateX(8px); }
    60%      { transform: translateX(-5px); }
    80%      { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .screen, .done, .badge, .btn-primary.is-pulse, .piece { animation: none !important; }
    .screen, .done { opacity: 1; transform: none; }
}