/*
 * 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-primaire: #ff7a59;
    --fete-primaire-fonce: #e85d3c;
    --fete-pastille: #ffc94d;
    --fete-accent-2: #3cc6a5;
    --fete-accent-3: #5aa9ff;
    --fete-accent-4: #b28cff;
    --fete-encre: #2b2340;
    --fete-doux: #6b6480;
    --fete-fond: #fff8f1;
    --fete-carte: #ffffff;
    --fete-trait: #f1e4d8;
    --fete-succes: #1f9c7f;

    /* Ce que chaque ambiance redéfinit (voir en fin de fichier). */
    --fete-police-titre: "Fredoka", "Plus Jakarta Sans", sans-serif;
    --fete-entete-fond: linear-gradient(135deg, #ffe3d6 0%, #fff1c9 55%, #dff6ee 100%);
    --fete-entete-texte: var(--fete-encre);
    --fete-entete-doux: var(--fete-doux);
    --fete-teinte-1: #ffe9df;
    --fete-teinte-2: #dcf5ec;
    --fete-teinte-3: #e1eeff;
    --fete-teinte-4: #eee6ff;
    --fete-accent-texte-1: var(--fete-primaire-fonce);
    --fete-accent-texte-2: #1f9c7f;
    --fete-accent-texte-3: #2e7fd6;
    --fete-accent-texte-4: #8a5cf0;
    --fete-image-fond: #fff3ea;
    --fete-barre-fond: rgba(255, 248, 241, .94);
    --fete-rayon: 22px;
    --fete-rayon-grand: 28px;

    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: var(--fete-police-titre);
    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: var(--fete-entete-fond);
    color: var(--fete-entete-texte);
    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-primaire-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 {
    color: var(--fete-entete-texte);
    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-entete-doux);
    font-weight: 500;
}

.fete-infos i { margin-right: 6px; color: var(--fete-primaire); 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: var(--fete-police-titre); font-size: 1.3rem; }
.fete-heros span { color: var(--fete-accent-texte-1); font-weight: 600; font-size: .9rem; }
.fete-heros li:nth-child(4n+2) span { color: var(--fete-accent-texte-2); }
.fete-heros li:nth-child(4n+3) span { color: var(--fete-accent-texte-3); }
.fete-heros li:nth-child(4n+4) span { color: var(--fete-accent-texte-4); }

/* 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-primaire); }
.fete-confettis span:nth-child(2) { top: 30%; left: 20%; background: var(--fete-accent-3); border-radius: 50%; }
.fete-confettis span:nth-child(3) { top: 70%; left: 6%;  background: var(--fete-accent-2); }
.fete-confettis span:nth-child(4) { top: 82%; left: 26%; background: var(--fete-accent-4); border-radius: 50%; }
.fete-confettis span:nth-child(5) { top: 12%; right: 10%; background: var(--fete-pastille); border-radius: 50%; }
.fete-confettis span:nth-child(6) { top: 40%; right: 22%; background: var(--fete-accent-4); }
.fete-confettis span:nth-child(7) { top: 72%; right: 8%;  background: var(--fete-primaire); border-radius: 50%; }
.fete-confettis span:nth-child(8) { top: 86%; right: 30%; background: var(--fete-accent-2); }

/* 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-primaire); 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-pastille);
    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: var(--fete-teinte-1);
    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: var(--fete-rayon-grand);
    padding: 24px 20px;
}
.fete-colonnes > .fete-personne:nth-child(4n+2) { --teinte: var(--fete-teinte-2); }
.fete-colonnes > .fete-personne:nth-child(4n+3) { --teinte: var(--fete-teinte-3); }
.fete-colonnes > .fete-personne:nth-child(4n+4) { --teinte: var(--fete-teinte-4); }

/* 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: var(--fete-barre-fond);
        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: var(--fete-police-titre); 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: var(--fete-teinte-1); border-color: var(--fete-primaire); }
    .fete-onglet:nth-child(4n+2).est-actif { background: var(--fete-teinte-2); border-color: var(--fete-accent-2); }
    .fete-onglet:nth-child(4n+3).est-actif { background: var(--fete-teinte-3); border-color: var(--fete-accent-3); }
    .fete-onglet:nth-child(4n+4).est-actif { background: var(--fete-teinte-4); border-color: var(--fete-accent-4); }
    .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(270px, 1fr));
    gap: 20px;
}

.fete-cadeau {
    display: flex;
    flex-direction: column;
    background: var(--fete-carte);
    border-radius: var(--fete-rayon);
    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: var(--fete-image-fond);
    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-primaire); 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-succes); }

.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-primaire-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: var(--fete-succes); }

.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-primaire); }

.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-primaire);
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}
.fete-bouton:hover { background: var(--fete-primaire-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-accent-2);
}
.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-primaire);
    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-primaire); vertical-align: -2px; }
.fete-pied a { color: inherit; }

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

/* Idées ajoutées par les invités ---------------------------------------- */
.fete-ajout-invite {
    margin: 0 0 4px !important;
    font-size: .78rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fete-primaire-fonce) !important;
}

.fete-ajout {
    margin-top: 16px;
    background: rgba(255, 255, 255, .7);
    border: 2px dashed rgba(43, 35, 64, .15);
    border-radius: 20px;
}
.fete-ajout[open] { background: var(--fete-carte); border-style: solid; border-color: transparent; box-shadow: 0 6px 18px rgba(43, 35, 64, .07); }

.fete-ajout summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 18px;
    font-weight: 700;
    color: var(--fete-encre);
}
.fete-ajout summary::-webkit-details-marker { display: none; }
.fete-ajout summary i { color: var(--fete-primaire); margin-right: 8px; vertical-align: -2px; }

.fete-ajout form { display: grid; gap: 12px; padding: 0 18px 18px; }
.fete-ajout-aide { margin: 0; color: var(--fete-doux); font-size: .9rem; }

.fete-ajout label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
.fete-ajout label small { font-weight: 400; color: var(--fete-doux); }

.fete-ajout input, .fete-ajout textarea {
    width: 100%;
    border: 2px solid var(--fete-trait);
    border-radius: 12px;
    padding: 8px 12px;
    font: inherit;
    font-weight: 400;
    color: var(--fete-encre);
    background: #fff;
}
.fete-ajout input:focus, .fete-ajout textarea:focus { outline: none; border-color: var(--fete-primaire); }
.fete-ajout .fete-bouton { justify-self: start; }

/* ======================================================================
 * Ambiances. L'anniversaire est le réglage par défaut ci-dessus ; Noël et
 * Mariage redéfinissent les variables, et changent le décor de l'en-tête
 * (.fete-confettis : confettis, flocons ou pétales).
 * ====================================================================== */

/* Noël : vert sapin et rouge, touches d'or, neige qui tombe. ----------- */
.fete.ambiance-noel {
    --fete-primaire: #c8102e;
    --fete-primaire-fonce: #9e0b23;
    --fete-pastille: #f2c14e;
    --fete-accent-2: #1f6f4a;
    --fete-accent-3: #7fb3d5;
    --fete-accent-4: #d4a017;
    --fete-encre: #1d2a24;
    --fete-doux: #5d6b64;
    --fete-fond: #f7f4ee;
    --fete-trait: #e6dfd2;
    --fete-succes: #1f6f4a;

    --fete-police-titre: "Playfair Display", Georgia, serif;
    --fete-entete-fond:
        radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, .10), transparent 55%),
        linear-gradient(165deg, #0f3d2e 0%, #1a5c40 55%, #12402f 100%);
    --fete-entete-texte: #ffffff;
    --fete-entete-doux: rgba(255, 255, 255, .82);
    --fete-teinte-1: #f9e1e3;
    --fete-teinte-2: #e1efe6;
    --fete-teinte-3: #e2edf5;
    --fete-teinte-4: #f8eed2;
    --fete-accent-texte-1: #b10e29;
    --fete-accent-texte-2: #1f6f4a;
    --fete-accent-texte-3: #2f6f9a;
    --fete-accent-texte-4: #9a7410;
    --fete-image-fond: #f3ede2;
    --fete-barre-fond: rgba(247, 244, 238, .94);
    --fete-rayon: 18px;
    --fete-rayon-grand: 24px;
}

.ambiance-noel .fete-entete { border-bottom: 6px solid #c8102e; box-shadow: inset 0 -10px 0 -4px #d4a017; }
.ambiance-noel .fete-entete h1 { font-weight: 700; letter-spacing: -.01em; }
.ambiance-noel .fete-surtitre { color: #b10e29; }
.ambiance-noel .fete-infos i { color: #f2c14e; }
.ambiance-noel .fete-heros a { box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.ambiance-noel .fete-personne h2 span { color: #1d2a24; }
.ambiance-noel .fete-ruban { background: #1f6f4a; }
.ambiance-noel .est-a-moi .fete-ruban { background: #c8102e; }

/* Flocons : petits ronds blancs qui descendent doucement. */
.ambiance-noel .fete-confettis span {
    background: #fff !important;
    border-radius: 50% !important;
    opacity: .75;
    transform: none;
    animation: fete-neige 9s linear infinite;
}
.ambiance-noel .fete-confettis span:nth-child(odd) { width: 8px; height: 8px; animation-duration: 12s; }
.ambiance-noel .fete-confettis span:nth-child(3n) { width: 5px; height: 5px; animation-delay: -4s; }
.ambiance-noel .fete-confettis span:nth-child(4n) { animation-delay: -7s; }
.ambiance-noel .fete-confettis span:nth-child(5n) { animation-delay: -2s; }

@keyframes fete-neige {
    from { translate: 0 -60px; }
    to   { translate: 18px 420px; }
}

/* Mariage : ivoire, rose poudré, sauge et doré ; sobre et aérien. ------ */
.fete.ambiance-mariage {
    --fete-primaire: #b08a52;
    --fete-primaire-fonce: #8c6a38;
    --fete-pastille: #f3e1da;
    --fete-accent-2: #9caf88;
    --fete-accent-3: #d9a5a0;
    --fete-accent-4: #c9b79c;
    --fete-encre: #3b3330;
    --fete-doux: #7a6e68;
    --fete-fond: #fbf8f3;
    --fete-trait: #ebe2d6;
    --fete-succes: #6f8a5b;

    --fete-police-titre: "Cormorant Garamond", Georgia, serif;
    --fete-entete-fond: linear-gradient(180deg, #f6e9e3 0%, #faf3ee 55%, #fbf8f3 100%);
    --fete-teinte-1: #f6ebe6;
    --fete-teinte-2: #edf0e6;
    --fete-teinte-3: #f5ede3;
    --fete-teinte-4: #f1ece6;
    --fete-accent-texte-1: #8c6a38;
    --fete-accent-texte-2: #5f7a4c;
    --fete-accent-texte-3: #a5635d;
    --fete-accent-texte-4: #7d6a4f;
    --fete-image-fond: #f4eee6;
    --fete-barre-fond: rgba(251, 248, 243, .95);
    --fete-rayon: 10px;
    --fete-rayon-grand: 14px;
}

.ambiance-mariage .fete-entete { padding: 72px 0 52px; border-radius: 0; }
.ambiance-mariage .fete-entete::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 120px;
    height: 1px;
    translate: -50% 0;
    background: linear-gradient(90deg, transparent, #b08a52, transparent);
}
.ambiance-mariage .fete-entete h1 { font-weight: 600; font-size: clamp(2.4rem, 7vw, 4rem); letter-spacing: .01em; }
.ambiance-mariage .fete-surtitre {
    background: transparent;
    box-shadow: none;
    color: #8c6a38;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid rgba(176, 138, 82, .45);
}
.ambiance-mariage .fete-infos i { color: #b08a52; }
.ambiance-mariage .fete-heros a { box-shadow: none; border: 1px solid #ebe2d6; border-radius: 12px; }
.ambiance-mariage .fete-personne h2 { font-weight: 600; font-size: 2rem; }
.ambiance-mariage .fete-personne h2 span { font-family: "Plus Jakarta Sans", sans-serif; font-size: .8rem; }
.ambiance-mariage .fete-cadeau { box-shadow: 0 1px 0 #ebe2d6, 0 8px 24px rgba(59, 51, 48, .05); }
.ambiance-mariage .fete-cadeau-corps h3 { font-size: 1.35rem; font-weight: 600; }
.ambiance-mariage .fete-bouton { border-radius: 999px; letter-spacing: .02em; }
.ambiance-mariage .fete-reserver input, .ambiance-mariage .fete-ajout input, .ambiance-mariage .fete-ajout textarea { border-width: 1px; }
.ambiance-mariage .fete-ruban { background: rgba(59, 51, 48, .78); font-weight: 600; letter-spacing: .04em; }
.ambiance-mariage .est-a-moi .fete-ruban { background: #6f8a5b; }
.ambiance-mariage .fete-message { box-shadow: none; border: 1px solid #ebe2d6; font-style: italic; font-family: var(--fete-police-titre); font-size: 1.25rem; }

/* Pétales : ovales rose poudré et anneaux dorés, posés en biais. */
.ambiance-mariage .fete-confettis span { opacity: .6; width: 12px; height: 18px; border-radius: 50% 50% 50% 0 !important; background: #e8bdb6 !important; }
.ambiance-mariage .fete-confettis span:nth-child(3n) { width: 14px; height: 14px; border-radius: 50% !important; background: transparent !important; border: 1.5px solid #c9a46a; }
.ambiance-mariage .fete-confettis span:nth-child(4n) { background: #cdd8bf !important; }

@media (prefers-reduced-motion: reduce) {
    .fete-confettis span { animation: none !important; }
}

@media (max-width: 520px) {
    .ambiance-mariage .fete-surtitre { letter-spacing: .08em; font-size: .7rem; }
}