/*
 * Page publique d'une fête : festive, lisible sur téléphone (c'est là que
 * les invités l'ouvriront, depuis un message).
 */
.fete {
    --fete-corail: #ff7a59;
    --fete-corail-fonce: #e85d3c;
    --fete-jaune: #ffc94d;
    --fete-menthe: #3cc6a5;
    --fete-ciel: #5aa9ff;
    --fete-lilas: #b28cff;
    --fete-encre: #2b2340;
    --fete-doux: #6b6480;
    --fete-fond: #fff8f1;
    --fete-carte: #ffffff;
    --fete-trait: #f1e4d8;

    background: var(--fete-fond);
    color: var(--fete-encre);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.fete h1, .fete h2, .fete h3 {
    font-family: "Fredoka", "Plus Jakarta Sans", sans-serif;
    color: var(--fete-encre);
}

.fete-conteneur {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
}

/* En-tête ---------------------------------------------------------------- */
.fete-entete {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ffe3d6 0%, #fff1c9 55%, #dff6ee 100%);
    padding: 56px 0 40px;
    text-align: center;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
}

.fete-surtitre {
    display: inline-block;
    background: var(--fete-carte);
    color: var(--fete-corail-fonce);
    font-weight: 700;
    border-radius: 999px;
    padding: 6px 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 14px rgba(232, 93, 60, .15);
}

.fete-entete h1 {
    font-size: clamp(2rem, 6vw, 3.4rem);
    font-weight: 700;
    margin-bottom: 12px;
    position: relative;
}

.fete-infos {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    color: var(--fete-doux);
    font-weight: 500;
}

.fete-infos i { margin-right: 6px; color: var(--fete-corail); vertical-align: -2px; }

.fete-heros {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.fete-heros a {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 110px;
    padding: 12px 18px;
    background: var(--fete-carte);
    border-radius: 20px;
    text-decoration: none;
    color: var(--fete-encre);
    box-shadow: 0 6px 18px rgba(43, 35, 64, .08);
    transition: transform .15s;
}

.fete-heros a:hover { transform: translateY(-3px); }
.fete-heros strong { font-family: "Fredoka", sans-serif; font-size: 1.3rem; }
.fete-heros span { color: var(--fete-corail-fonce); font-weight: 600; font-size: .9rem; }
.fete-heros li:nth-child(4n+2) span { color: #1f9c7f; }
.fete-heros li:nth-child(4n+3) span { color: #2e7fd6; }
.fete-heros li:nth-child(4n+4) span { color: #8a5cf0; }

/* Confettis décoratifs */
.fete-confettis span {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    opacity: .55;
    transform: rotate(25deg);
}
.fete-confettis span:nth-child(1) { top: 14%; left: 8%;  background: var(--fete-corail); }
.fete-confettis span:nth-child(2) { top: 30%; left: 20%; background: var(--fete-ciel); border-radius: 50%; }
.fete-confettis span:nth-child(3) { top: 70%; left: 6%;  background: var(--fete-menthe); }
.fete-confettis span:nth-child(4) { top: 82%; left: 26%; background: var(--fete-lilas); border-radius: 50%; }
.fete-confettis span:nth-child(5) { top: 12%; right: 10%; background: var(--fete-jaune); border-radius: 50%; }
.fete-confettis span:nth-child(6) { top: 40%; right: 22%; background: var(--fete-lilas); }
.fete-confettis span:nth-child(7) { top: 72%; right: 8%;  background: var(--fete-corail); border-radius: 50%; }
.fete-confettis span:nth-child(8) { top: 86%; right: 30%; background: var(--fete-menthe); }

/* Corps ------------------------------------------------------------------ */
.fete-message {
    background: var(--fete-carte);
    border-radius: 20px;
    padding: 20px 24px;
    margin: 32px auto 0;
    max-width: 720px;
    font-size: 1.05rem;
    line-height: 1.6;
    text-align: center;
    box-shadow: 0 6px 18px rgba(43, 35, 64, .06);
}

.fete-mode-emploi {
    max-width: 720px;
    margin: 24px auto 0;
    color: var(--fete-doux);
    text-align: center;
    font-size: .95rem;
}
.fete-mode-emploi i { color: var(--fete-corail); margin-right: 6px; vertical-align: -2px; }

.fete-personne { scroll-margin-top: 16px; }

.fete-personne-entete { margin-bottom: 20px; }
.fete-personne-entete p { margin: 6px 0 0; color: var(--fete-doux); font-size: .92rem; }

.fete-personne h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
}

.fete-personne h2 span {
    font-size: 1rem;
    background: var(--fete-jaune);
    border-radius: 999px;
    padding: 4px 12px;
    vertical-align: middle;
    margin-left: 8px;
    white-space: nowrap;
}

/*
 * Bureau : une colonne par personne (4 au plus côte à côte, au-delà elles
 * passent à la ligne). Chaque colonne a sa teinte pour bien séparer les listes.
 */
.fete-colonnes {
    --teinte: #ffe9df;
    display: grid;
    grid-template-columns: repeat(var(--colonnes, 1), minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    margin-top: 40px;
}

.fete-colonnes > .fete-personne {
    background: var(--teinte);
    border-radius: 28px;
    padding: 24px 20px;
}
.fete-colonnes > .fete-personne:nth-child(4n+2) { --teinte: #dcf5ec; }
.fete-colonnes > .fete-personne:nth-child(4n+3) { --teinte: #e1eeff; }
.fete-colonnes > .fete-personne:nth-child(4n+4) { --teinte: #eee6ff; }

/* En colonnes : une carte par ligne… */
.fete-colonnes > .fete-personne { container-type: inline-size; }
.fete-colonnes:not([style*="--colonnes: 1"]) .fete-grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

/* …couchée (image à gauche) quand la colonne est assez large. */
@container (min-width: 440px) {
    .fete-colonnes:not([style*="--colonnes: 1"]) .fete-cadeau {
        display: grid;
        grid-template-columns: 180px minmax(0, 1fr);
        grid-template-areas: "image corps" "image action";
        grid-template-rows: 1fr auto;
    }
    .fete-colonnes:not([style*="--colonnes: 1"]) .fete-cadeau-image {
        grid-area: image;
        aspect-ratio: auto;
        min-height: 170px;
    }
    .fete-colonnes:not([style*="--colonnes: 1"]) .fete-cadeau-image img { position: absolute; inset: 0; }
    .fete-colonnes:not([style*="--colonnes: 1"]) .fete-cadeau-corps { grid-area: corps; }
    .fete-colonnes:not([style*="--colonnes: 1"]) .fete-cadeau-action { grid-area: action; }
}

/* Une seule personne : pas de colonne, la grille de cartes prend la largeur. */
.fete-colonnes[style*="--colonnes: 1"] > .fete-personne { background: none; padding: 0; }

.fete-onglets { display: none; }

/* Téléphone : onglets fixés en haut, une seule liste visible à la fois. */
@media (max-width: 767.98px) {
    .fete-colonnes {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0;
    }

    .fete-colonnes[data-js] > .fete-personne:not(.est-active) { display: none; }

    .fete-colonnes > .fete-personne {
        border-radius: 0 0 24px 24px;
        padding: 20px 16px;
        margin: 0 -16px;
    }

    .fete-personne h2 { font-size: 1.45rem; }

    /* Une ancre (#personne-…, #cadeau-… après réservation) ne doit pas
       atterrir sous la barre d'onglets. */
    .fete-personne, .fete-cadeau { scroll-margin-top: 84px; }

    .fete-onglets {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        gap: 8px;
        margin: 24px -16px 0;
        padding: 10px 16px;
        overflow-x: auto;
        scrollbar-width: none;
        background: rgba(255, 248, 241, .94);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 6px 12px -10px rgba(43, 35, 64, .35);
    }
    .fete-onglets::-webkit-scrollbar { display: none; }

    .fete-onglet {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 84px;
        padding: 8px 14px;
        border-radius: 16px;
        background: var(--fete-carte);
        color: var(--fete-encre);
        text-decoration: none;
        line-height: 1.2;
        border: 2px solid transparent;
        box-shadow: 0 2px 8px rgba(43, 35, 64, .06);
    }
    .fete-onglet strong { font-family: "Fredoka", sans-serif; font-size: 1.05rem; font-weight: 600; }
    .fete-onglet span { font-size: .78rem; font-weight: 600; color: var(--fete-doux); }

    /* L'onglet actif prend la teinte de sa colonne. */
    .fete-onglet.est-actif { background: #ffe9df; border-color: var(--fete-corail); }
    .fete-onglet:nth-child(4n+2).est-actif { background: #dcf5ec; border-color: var(--fete-menthe); }
    .fete-onglet:nth-child(4n+3).est-actif { background: #e1eeff; border-color: var(--fete-ciel); }
    .fete-onglet:nth-child(4n+4).est-actif { background: #eee6ff; border-color: var(--fete-lilas); }
    .fete-onglet.est-actif span { color: var(--fete-encre); }

    /* Sans onglets (une seule personne), on garde l'espacement d'origine. */
    .fete-colonnes:not([data-js]) { margin-top: 32px; }
    .fete-colonnes:not([data-js]) > .fete-personne { margin: 0; padding: 0; background: none; }
    .fete-colonnes:not([data-js]) > .fete-personne + .fete-personne { margin-top: 40px; }
}

.fete-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.fete-cadeau {
    display: flex;
    flex-direction: column;
    background: var(--fete-carte);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(43, 35, 64, .07);
    scroll-margin-top: 16px;
    transition: opacity .2s;
}

.fete-cadeau-image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #fff3ea;
    display: grid;
    place-items: center;
}

.fete-cadeau-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.fete-cadeau-image > i { font-size: 3rem; color: var(--fete-corail); opacity: .5; }

.fete-ruban {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--fete-encre);
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    padding: 4px 12px;
    border-radius: 999px;
}

.est-a-moi .fete-ruban { background: var(--fete-menthe); }

.fete-cadeau-corps { padding: 16px 18px 8px; flex: 1; }
.fete-cadeau-corps h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 6px; }
.fete-cadeau-corps p { color: var(--fete-doux); font-size: .92rem; margin-bottom: 8px; overflow-wrap: anywhere; }

.fete-cadeau-lien {
    font-size: .9rem;
    font-weight: 600;
    color: var(--fete-corail-fonce);
    text-decoration: none;
}
.fete-cadeau-lien i { margin-right: 4px; vertical-align: -1px; }

.fete-cadeau-action { padding: 8px 18px 18px; }

.fete-etat { margin: 0 0 8px; font-weight: 600; color: var(--fete-doux); font-size: .92rem; }
.fete-etat i { margin-right: 6px; vertical-align: -2px; }
.est-a-moi .fete-etat { color: #1f9c7f; }

.est-pris { opacity: .55; }
.est-pris .fete-cadeau-image img { filter: grayscale(.7); }

.fete-reserver { display: flex; gap: 8px; }

.fete-reserver input {
    flex: 1;
    min-width: 0;
    border: 2px solid var(--fete-trait);
    border-radius: 12px;
    padding: 8px 12px;
    font: inherit;
    color: var(--fete-encre);
    background: #fff;
}
.fete-reserver input:focus { outline: none; border-color: var(--fete-corail); }

.fete-bouton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 12px;
    padding: 9px 14px;
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    background: var(--fete-corail);
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}
.fete-bouton:hover { background: var(--fete-corail-fonce); }

.fete-bouton-discret {
    background: transparent;
    color: var(--fete-doux);
    padding: 4px 0;
    font-weight: 600;
    text-decoration: underline;
}
.fete-bouton-discret:hover { background: transparent; color: var(--fete-encre); }

.fete-vide { color: var(--fete-doux); font-style: italic; }

/* Messages de retour ------------------------------------------------------ */
.fete-flash {
    position: relative;
    padding: 12px 16px;
    text-align: center;
    font-weight: 600;
    color: #fff;
    background: var(--fete-menthe);
}
.fete-flash-error { background: #e5484d; }
.fete-flash-warning { background: #f5a524; color: var(--fete-encre); }

/* Accueil ----------------------------------------------------------------- */
.fete-accueil {
    flex: 1;
    max-width: 520px;
    margin: 0 auto;
    padding: 96px 16px 48px;
    text-align: center;
}
.fete-accueil-icone {
    width: 88px; height: 88px;
    margin: 0 auto 24px;
    border-radius: 28px;
    display: grid; place-items: center;
    background: var(--fete-corail);
    color: #fff;
    font-size: 2.6rem;
    transform: rotate(-6deg);
}
.fete-accueil p { color: var(--fete-doux); font-size: 1.05rem; }
.fete-lien-discret { color: var(--fete-doux); font-size: .9rem; }

.fete-pied {
    margin-top: auto;
    padding: 48px 16px 24px;
    text-align: center;
    color: var(--fete-doux);
    font-size: .9rem;
}
.fete-pied i { color: var(--fete-corail); vertical-align: -2px; }
.fete-pied a { color: inherit; }

@media (max-width: 420px) {
    .fete-reserver { flex-direction: column; }
    .fete-bouton { justify-content: center; }
}