/* --- POLICE SIGNATURE --- */
@font-face {
    font-family: 'AntoineSignature';
    src: url('fonts/font-av-01-webfont.woff2') format('woff2'),
        url('fonts/font-av-01-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ================= VARIABLES ================= */
:root {
    --bg-main: #fbf9f5;
    --bg-alt: #f5efe6;
    --brand-dark: #132023;
    --brand-light: #20373B;
    --text-main: #132023;
    --text-muted: #5a6b6e;
    --accent: #C9A050;
    --white: #ffffff;
    --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-soft: 0 10px 30px rgba(19, 32, 35, 0.06);
    --shadow-medium: 0 15px 40px rgba(19, 32, 35, 0.12);
}

/* ================= RESET ================= */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* L'attribut HTML "hidden" doit toujours cacher, même si on a un display: flex sur la classe */
[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Lato', sans-serif;
    color: var(--text-main);
    background: var(--bg-main);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ================= SIGNATURE FONT ================= */
.sig-char {
    font-family: 'AntoineSignature', cursive;
    font-size: 1.5em;
    line-height: 1;
}

/* ================= ANIMATIONS ================= */
@keyframes dotWave {
    0%, 60%, 100% { opacity: 0.2; transform: scale(1); }
    30% { opacity: 1; transform: scale(1.3); }
}

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

.anim-fade {
    opacity: 0;
    animation: fadeUp 0.7s var(--ease-premium) forwards;
}

.anim-d1 { animation-delay: 0.2s; }
.anim-d2 { animation-delay: 0.5s; }

/* ================= BOUTONS ================= */
.btn {
    display: inline-block;
    padding: 14px 28px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    letter-spacing: 1px;
    cursor: pointer;
    border: 2px solid transparent;
    font-size: 0.9rem;
    line-height: 1.2;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.35s var(--ease-premium),
                box-shadow 0.35s var(--ease-premium),
                background-color 0.35s ease,
                color 0.35s ease,
                border-color 0.35s ease;
}

.btn::after {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -42%;
    width: 34%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.42) 52%, rgba(255,255,255,0) 100%);
    transform: translateX(-180%) skewX(-22deg);
    opacity: 0;
    transition: transform 0.85s var(--ease-premium), opacity 0.35s ease;
    pointer-events: none;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:hover::after {
    opacity: 0.7;
    transform: translateX(420%) skewX(-22deg);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background-color: var(--accent);
    color: var(--brand-dark);
    border-color: var(--accent);
    box-shadow: 0 16px 34px rgba(201, 160, 80, 0.18);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--accent);
    box-shadow: 0 18px 36px rgba(19, 32, 35, 0.12);
}

.btn-block {
    width: 100%;
}

.btn[disabled] {
    opacity: 0.74;
    cursor: wait;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

/* ============================================================
   PAGE WIP
   ============================================================ */
.page-wip {
    background: var(--bg-main);
}

.wip-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---------- EN-TETE : nom + métier ---------- */
.wip-header {
    text-align: center;
    padding: 44px 20px 0;
}

.wip-logo-name {
    display: block;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    letter-spacing: 7px;
    text-transform: uppercase;
    color: var(--brand-dark);
}

.wip-logo-role {
    display: block;
    margin-top: 8px;
    font-size: clamp(0.82rem, 1.6vw, 0.92rem);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---------- ZONE CENTRALE : status + formulaire ---------- */
.wip-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(40px, 15vh, 150px) 20px 50px;
    gap: 0;
}

.wip-status {
    text-align: center;
    margin-bottom: clamp(40px, 15vh, 150px);
}

.wip-status-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 500;
    color: var(--brand-dark);
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.wip-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.wip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.2;
    animation: dotWave 1.8s ease-in-out infinite;
}

.wip-dot:nth-child(2) {
    animation-delay: 0.3s;
}

.wip-dot:nth-child(3) {
    animation-delay: 0.6s;
}

/* ---------- FORMULAIRE ---------- */
.wip-form-wrap {
    width: min(100%, 540px);
}

.wip-form-title {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    letter-spacing: 1px;
    margin-bottom: 24px;
    text-align: center;
    text-transform: none;
}

.wip-form,
.wip-success {
    width: 100%;
    padding: 36px;
    background: var(--white);
    box-shadow: var(--shadow-medium);
}

.wip-form-row {
    display: flex;
    gap: 14px;
}

.wip-form-row .form-group {
    flex: 1;
}

.form-group {
    margin-bottom: 18px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--brand-dark);
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    background: #fafafa;
    color: var(--text-main);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    cursor: pointer;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(201, 160, 80, 0.12);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.stealth-field {
    opacity: 0;
    position: absolute;
    top: 0; left: 0;
    height: 0; width: 0;
    z-index: -1;
    overflow: hidden;
}

.wip-turnstile {
    display: flex;
    justify-content: center;
    margin: 2px 0 14px;
}

.wip-feedback {
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid rgba(19, 32, 35, 0.12);
    background: rgba(255, 255, 255, 0.66);
    color: var(--brand-dark);
    font-size: 0.88rem;
    line-height: 1.5;
    text-align: center;
}

.wip-feedback.is-error {
    border-color: rgba(146, 41, 41, 0.18);
    color: #7b2323;
    background: rgba(123, 35, 35, 0.06);
}

.wip-feedback[hidden],
.wip-success[hidden] {
    display: none !important;
}

/* ---------- CONFIRMATION ---------- */
.wip-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.wip-success-icon {
    color: var(--accent);
}

.wip-success-title {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    letter-spacing: 2px;
    text-transform: none;
}

.wip-success-text {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
}

.wip-success-text strong {
    color: var(--brand-dark);
}

/* ---------- FOOTER ---------- */
.wip-footer {
    padding: 28px 20px;
    text-align: center;
    background: var(--brand-dark);
    color: var(--white);
}

.wip-footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.wip-footer-links a {
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.wip-footer-links a:hover {
    color: var(--accent);
}

.wip-footer-sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   PAGE MERCI
   ============================================================ */
.page-merci {
    background: var(--bg-main);
}

.merci-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.merci-home-link {
    display: block;
    text-decoration: none;
    color: inherit;
    text-align: center;
}

.merci-body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px 60px;
}

.merci-card {
    width: min(100%, 660px);
    padding: 44px clamp(24px, 5vw, 52px);
    text-align: center;
    background: var(--white);
    box-shadow: var(--shadow-medium);
}

.merci-card h1 {
    margin-bottom: 16px;
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    text-transform: none;
    letter-spacing: 1px;
}

.merci-card p {
    max-width: 36rem;
    margin: 0 auto 14px;
    color: var(--text-muted);
    line-height: 1.75;
    font-size: 0.98rem;
}

.merci-card p strong {
    color: var(--brand-dark);
}

/* ---------- BOUTONS AVIS ---------- */
.review-buttons {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.btn-review {
    min-width: 210px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
}

.btn-review svg {
    flex: none;
}

.btn-mariage {
    background: #e64a5d;
    color: var(--white);
    border-color: #e64a5d;
    box-shadow: 0 12px 28px rgba(230, 74, 93, 0.2);
}

.btn-mariage:hover {
    background: transparent;
    color: #e64a5d;
    border-color: #e64a5d;
}

.btn-google {
    background: var(--white);
    color: var(--brand-dark);
    border-color: rgba(19, 32, 35, 0.12);
    box-shadow: 0 12px 28px rgba(19, 32, 35, 0.08);
}

.btn-google:hover {
    background: #f5f5f5;
    color: var(--brand-dark);
}

.review-button-label {
    display: inline-flex;
    align-items: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
    .wip-main {
        padding-top: clamp(20px, 6vh, 75px);
    }

    .wip-status {
        margin-bottom: clamp(20px, 6vh, 75px);
    }

    .wip-form-row {
        flex-direction: column;
        gap: 0;
    }

    .wip-form,
    .wip-success {
        padding: 24px 18px;
    }

    .wip-footer-sep {
        display: none;
    }

    .wip-footer-links {
        gap: 10px;
    }

    .merci-card {
        padding: 30px 20px;
    }

    .btn-review {
        width: 100%;
        min-width: 0;
    }

    .merci-logo {
        letter-spacing: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .anim-fade { opacity: 1; animation: none; }
    .wip-dot { animation: none; opacity: 0.5; }
    .btn::after { display: none; }
}

/* ============================================================
   PAGE VOS MUSIQUES (espace privé mariés)
   ============================================================ */
.page-musiques {
    background: var(--bg-main);
}

.musiques-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.musiques-main {
    flex: 1 1 auto;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    /* Rythme un poil plus serré que la page d'accueil — la page est plus dense */
    padding: clamp(30px, 10vh, 110px) 20px 50px;
}

/* ---------- INTRO ---------- */
.musiques-intro {
    text-align: center;
    margin-bottom: clamp(28px, 6vh, 56px);
}

.musiques-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-transform: none;
    color: var(--accent);
}

.musiques-subtitle {
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.6;
    max-width: 36rem;
    margin: 0 auto;
}

/* ---------- INSTRUCTIONS (accordéon) ---------- */
.musiques-instructions {
    background: var(--white);
    box-shadow: var(--shadow-soft);
    margin-bottom: 24px;
    border-left: 3px solid var(--accent);
}

.musiques-instructions summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
    color: var(--brand-dark);
    font-size: 0.95rem;
    user-select: none;
}

.musiques-instructions summary::-webkit-details-marker {
    display: none;
}

.musiques-instructions-chevron {
    display: inline-flex;
    color: var(--accent);
    transition: transform 0.3s var(--ease-premium);
}

.musiques-instructions[open] .musiques-instructions-chevron {
    transform: rotate(180deg);
}

.musiques-instructions-body {
    padding: 0 22px 20px;
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 0.92rem;
}

.musiques-instructions-body p {
    margin-bottom: 10px;
}

.musiques-instructions-body p:last-child {
    margin-bottom: 0;
}

.musiques-instructions-body strong {
    color: var(--brand-dark);
}

.musiques-instructions-tuto {
    font-style: italic;
    font-size: 0.88rem;
    opacity: 0.8;
}

/* Liens dans la zone Instructions : en doré, soulignés */
.musiques-instructions-body a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.musiques-instructions-body a:hover {
    text-decoration: none;
}

/* Embed vidéo YouTube responsive (ratio 16:9) — prend toute la largeur du conteneur */
.video-embed-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 14px 0 4px;
    background: #000;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.video-embed-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Bouton custom click-to-play : remplit EXACTEMENT le même wrap que l'iframe.
   Au clic, le bouton est remplacé par l'iframe en place → aucun saut visuel. */
.video-play-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: block;
    overflow: hidden;
}

.video-play-btn img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Logo play "à la YouTube" : rectangle arrondi, triangle blanc */
.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    border-radius: 14px;
    background: rgba(33, 33, 33, 0.82);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.video-play-icon svg {
    margin-left: 3px; /* compense l'asymétrie visuelle du triangle */
}

.video-play-btn:hover .video-play-icon,
.video-play-btn:focus-visible .video-play-icon {
    background: #ff0000;
}

.video-play-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Lien YouTube Music dans le paragraphe d'intro du mode saisie */
.musiques-saisie-intro a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.musiques-saisie-intro a:hover {
    text-decoration: none;
}

/* ---------- FORM WRAPPER ---------- */
.musiques-form-wrap {
    width: 100%;
}

.musiques-form {
    /* hérite de .wip-form */
    padding: clamp(22px, 4vw, 36px);
}

.musiques-token-error {
    margin-bottom: 18px;
}

/* ---------- CHOIX DU MODE ---------- */
.musiques-mode-label {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--brand-dark);
    font-size: 0.95rem;
}

.musiques-mode-choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.musiques-mode-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.musiques-mode-option:hover {
    border-color: var(--accent);
    background: var(--white);
}

/* Radio masqué visuellement mais accessible clavier
   (indicateur visuel = halo doré + strong en doré sur la card sélectionnée) */
.musiques-mode-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    margin: 0;
}

.musiques-mode-option input[type="radio"]:focus-visible + .musiques-mode-option-content {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.musiques-mode-option input[type="radio"]:checked ~ .musiques-mode-option-content strong {
    color: var(--accent);
}

.musiques-mode-option:has(input[type="radio"]:checked) {
    border-color: var(--accent);
    background: var(--white);
    box-shadow: 0 0 0 2px rgba(201, 160, 80, 0.18);
}

.musiques-mode-option-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.musiques-mode-option-content strong {
    font-size: 0.95rem;
    color: var(--brand-dark);
    transition: color 0.25s ease;
}

.musiques-mode-option-content small {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ---------- BLOC PAR MODE ---------- */
.musiques-mode-block {
    margin-top: 22px;
    padding-top: 22px;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-top: 1px dashed #e0e0e0;
    border-bottom: 1px dashed #e0e0e0;
}

.musiques-saisie-intro {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 18px;
}

.musiques-saisie-intro strong {
    color: var(--brand-dark);
}

/* ---------- LISTE MUSIQUES ---------- */
.musiques-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.musique-row {
    padding: 14px 16px;
    background: #fafafa;
    border: 1px solid #ececec;
}

.musique-row-header {
    margin-bottom: 10px;
}

.musique-row-num {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand-dark);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.musique-row-optional {
    font-weight: 400;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.78rem;
}

.musique-row-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 10px;
}

.musique-row-fields .form-group {
    margin-bottom: 0;
}

.musique-row-fields input {
    background: var(--white);
    font-size: 0.9rem;
    padding: 10px 12px;
}

/* Placeholder très fade pour ne pas confondre exemple et contenu rempli */
.musique-row-fields input::placeholder,
#playlist_url::placeholder,
#note::placeholder {
    color: rgba(19, 32, 35, 0.28);
    font-style: italic;
}

.musique-row-fields input::-webkit-input-placeholder,
#playlist_url::-webkit-input-placeholder,
#note::-webkit-input-placeholder {
    color: rgba(19, 32, 35, 0.28);
    font-style: italic;
}

/* ---------- HINTS ---------- */
.form-hint {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.musiques-progressive-hint,
.musiques-max-hint {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(201, 160, 80, 0.08);
    border-left: 2px solid var(--accent);
    color: var(--brand-dark);
    text-align: center;
    font-size: 0.85rem;
}

.musiques-max-hint {
    background: rgba(19, 32, 35, 0.06);
    border-left-color: var(--brand-dark);
    color: var(--text-muted);
}

/* ---------- SR-ONLY ---------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- ANIMATION APPARITION D'UNE NOUVELLE MUSIQUE ---------- */
@keyframes musiqueRowIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.anim-fade-in {
    animation: musiqueRowIn 0.4s var(--ease-premium) both;
}

/* ---------- RESPONSIVE MUSIQUES ---------- */
@media (max-width: 600px) {
    .musique-row-fields {
        grid-template-columns: 1fr;
    }

    .musiques-mode-choice {
        grid-template-columns: 1fr;
    }

    .musiques-instructions summary {
        padding: 14px 16px;
        font-size: 0.9rem;
    }

    .musiques-instructions-body {
        padding: 0 16px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .anim-fade-in { animation: none; opacity: 1; }
}

/* ============================================================
   ÉTAT DE CHARGEMENT (étape 6)
   ============================================================ */
.musiques-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 60px 24px;
    background: var(--white);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.musiques-loading-spinner {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(201, 160, 80, 0.18);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: musiqueSpin 0.9s linear infinite;
}

.musiques-loading-text {
    color: var(--text-muted);
    font-size: 0.92rem;
    letter-spacing: 0.5px;
}

@keyframes musiqueSpin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   ÉTAT FORM FERMÉ (read-only)
   ============================================================ */
.musiques-closed-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    margin-bottom: 18px;
    background: rgba(19, 32, 35, 0.04);
    border-left: 3px solid var(--brand-dark);
    color: var(--brand-dark);
    font-size: 0.92rem;
    line-height: 1.6;
}

.musiques-closed-banner svg {
    flex: none;
    margin-top: 2px;
    color: var(--brand-dark);
}

.musiques-closed-banner strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.98rem;
}

.musiques-closed-banner span {
    color: var(--text-muted);
}

.musiques-closed-banner a {
    color: var(--accent);
    text-decoration: underline;
}

/* Désactivation visuelle en read-only — disabled est déjà géré par le navigateur,
   on adoucit juste l'opacité */
.musiques-form input:disabled,
.musiques-form select:disabled,
.musiques-form textarea:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .musiques-loading-spinner { animation: none; border-top-color: rgba(201, 160, 80, 0.5); }
}

/* ============================================================
   PAGE INFOS (form contrat) — réutilise majoritairement les
   classes .musiques-* pour le layout. Quelques ajouts spécifiques.
   ============================================================ */

/* Fieldset section (regroupement de champs : Vous / Moitié / Adresse, etc.) */
.infos-section {
    border: none;
    padding: 0;
    margin: 0 0 24px 0;
    padding-bottom: 24px;
    border-bottom: 1px dashed #e0e0e0;
}

.infos-section:last-of-type {
    border-bottom: none;
    padding-bottom: 8px;
}

.infos-section-title {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(201, 160, 80, 0.25);
    letter-spacing: 0.5px;
}

/* Adresse : CP petit / Ville large */
.infos-cp-ville {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
    gap: 14px;
}

/* On override la règle parente .wip-form-row qui est en flex */
.wip-form-row.infos-cp-ville {
    display: grid;
}

/* Autorisation diffusion : on force 1 seule colonne (par défaut .musiques-mode-choice fait auto-fit, qui peut donner 2 colonnes sur écran large) */
.infos-diffusion-choice {
    grid-template-columns: 1fr !important;
}

@media (max-width: 600px) {
    .infos-cp-ville {
        grid-template-columns: 1fr;
    }
    .wip-form-row.infos-cp-ville {
        grid-template-columns: 1fr;
    }
}


/* ============================================================================
   GARDE-FOUS DU FORMULAIRE D'INFORMATIONS
   ============================================================================
   Posés le 24/09/2026, après un contrat parti au nom de « Nicolas Nougier » alors que la
   mariée s'appelle Elsa. La chaîne avait été fidèle de bout en bout : le mauvais prénom est
   entré dans leur navigateur, entre l'ouverture de la page et l'envoi (remplissage automatique
   ou saisie, on ne peut pas le savoir). Ce qu'ils écrivent reste ce qui est généré : on ne
   corrige rien à leur place, on leur donne seulement à relire avant d'envoyer. */

/* Deux prénoms identiques : c'est possible, c'est rare. On le signale, on ne bloque rien. */
.gf-doublon {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid #e0b4a4;
    background: #fbf1ed;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #8a4a34;
}
.gf-doublon[hidden] { display: none; }
.gf-doublon svg { flex: 0 0 auto; margin-top: 2px; }

/* Le récapitulatif, juste avant le bouton : ce qui sera écrit sur le contrat, mot pour mot. */
.gf-recap {
    border: 1px solid #e6e1d8;
    border-top: 3px solid var(--accent);
    border-radius: 4px;
    background: #fffdf9;
    padding: 22px 24px;
    margin: 4px 0 22px;
}
.gf-recap h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--brand-dark);
    margin: 0 0 4px;
}
.gf-recap-sous {
    font-size: 0.82rem;
    color: #7b8486;
    margin: 0 0 16px;
}
.gf-ligne {
    display: flex;
    gap: 14px;
    padding: 9px 0;
    border-top: 1px solid #efe9de;
    font-size: 0.92rem;
    line-height: 1.5;
}
.gf-ligne:first-of-type { border-top: 0; }
.gf-quoi {
    flex: 0 0 132px;
    color: #7b8486;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 2px;
}
.gf-valeur { color: var(--brand-dark); font-weight: 600; }
.gf-corriger {
    display: inline-block;
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
}

@media (max-width: 600px) {
    .gf-recap { padding: 18px 16px; }
    .gf-ligne { flex-direction: column; gap: 2px; }
    .gf-quoi { flex: none; }
}