/* =========================================================
   DIRE OUI, L'HABILLAGE DU SITE
   Page invitée, espace marié, démonstration.

   Les jetons viennent de systeme.css, chargé avant. Rien
   ici ne redéclare une couleur ou une taille : si une valeur
   manque, elle s'ajoute au système, pas à ce fichier.

   Ordre des sections :
     1  Barre haute et navigation
     2  Accueil et photographies
     3  Le faire-part publié
     4  Informations pratiques
     5  Planning
     6  Le formulaire d'invitation
     7  Galeries, portfolio, souvenirs
     8  Prestataires, côté invité
     9  Connexion
    10  Espace marié : cadre et tableau de bord
    11  Espace marié : invités
    12  Espace marié : prestataires
    13  Rétroplanning
    14  Prestations
    15  Messagerie
    16  Page invitée, dans l'espace marié
    17  Bulle de contact
    18  Porte d'entrée de la démonstration
    19  Sortie de démonstration et inscription
    20  Téléphone
========================================================= */

/* =========================================================
   1. BARRE HAUTE ET NAVIGATION
   Une barre fine, translucide, qui se resserre au défilement.
   Elle ne contient que le strict nécessaire.
========================================================= */

.topbar {
    position: sticky;
    top: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: var(--e5);
    padding: 0 var(--e7);
    min-height: var(--barre-haute);
    background: var(--surface-voile);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--duree) var(--courbe),
                min-height var(--duree) var(--courbe),
                background var(--duree) var(--courbe);
}

.topbar.scrolled {
    min-height: 52px;
    border-bottom-color: var(--trait);
}

.tabs {
    display: flex;
    align-items: center;
    gap: var(--e1);
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar { display: none; }

.tab-btn {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: var(--e2) var(--e3);
    border-radius: var(--r-xs);
    color: var(--encre-3);
    font-size: var(--t-sm);
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--duree-courte) var(--courbe);
}

.tab-btn:hover { color: var(--encre); }
.tab-btn.active { color: var(--encre); }

/* Le repère de l'onglet actif : un trait court, dessous. */
.tab-btn.active::after {
    content: "";
    position: absolute;
    left: var(--e3);
    right: var(--e3);
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--encre);
}

.topbar-controls {
    display: flex;
    align-items: center;
    gap: var(--e3);
    flex: 0 0 auto;
    margin-left: auto;
    padding: var(--e3) 0;
}
/* Sur la page d'un invité, la barre de droite n'a rien à porter : sans
   cette règle elle occupe quand même sa place et déborde. */
.topbar-controls:not(:has(> *)) { display: none; }

.demo-toggle { display: flex; align-items: center; }

.toggle-divider {
    width: 1px;
    height: 22px;
    background: var(--trait);
}

/* =========================================================
   2. ACCUEIL ET PHOTOGRAPHIES
   L'image occupe l'écran, le texte se pose dessus sans le
   moindre effet : un voile, une graisse fine, rien d'autre.
========================================================= */

.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: min(88vh, 900px);
    overflow: hidden;
    background: var(--encre);
}

.hero-slides { position: absolute; inset: 0; }

/* Le fondu est une transition, le zoom une animation.
   En transition, la photo sortante repartait de scale(1) vers scale(1.04)
   pendant qu'elle s'effaçait : on voyait les deux images bouger en sens
   contraire. En animation, le zoom ne tourne que sur la photo affichée et
   se remet à zéro d'un coup quand elle est invisible. */
.hero-slides img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1.6s var(--courbe-douce);
    will-change: opacity, transform;
}
.hero-slides img.active {
    opacity: 1;
    /* 8.6s pour 7s d'affichage : le mouvement couvre le fondu suivant. */
    animation: hero-zoom 8.6s linear forwards;
}

@keyframes hero-zoom {
    from { transform: scale(1.05); }
    to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slides img.active { animation: none; transform: scale(1); }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(15, 13, 11, 0.34) 0%, rgba(15, 13, 11, 0) 34%),
        linear-gradient(0deg, rgba(15, 13, 11, 0.62) 0%, rgba(15, 13, 11, 0) 52%);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--colonne);
    padding: 0 var(--e7) var(--e10);
    text-align: center;
    color: #fff;
}

.hero-content .eyebrow { color: rgba(255, 255, 255, 0.74); }

.hero-names {
    font-family: var(--serif);
    font-size: clamp(3rem, 8vw, 6.5rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.hero-date-pill {
    display: inline-block;
    margin-top: var(--e5);
    padding: var(--e2) var(--e5);
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: var(--r-rond);
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: var(--t-sm);
    letter-spacing: 0.02em;
}

.hero-cta {
    display: flex;
    gap: var(--e3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--e7);
}

.hero-cta .btn-primary { background: #fff; border-color: #fff; color: var(--encre); }
.hero-cta .btn-primary:hover { background: #f2efec; }

.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: var(--e5);
    z-index: 2;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.68);
    font-size: var(--t-xs);
    letter-spacing: var(--chasse-etiquette);
    text-transform: uppercase;
    animation: respire 3.4s ease-in-out infinite;
}

@keyframes respire {
    0%, 100% { opacity: 0.5; transform: translate(-50%, 0); }
    50%      { opacity: 1;   transform: translate(-50%, 5px); }
}

/* ---- Les photographies posées en marge ----
   Elles ne s'affichent que lorsqu'il reste vraiment de la
   place de chaque côté de la colonne de lecture. */

.side-parallax-zone { position: relative; height: 0; overflow: visible; }
.side-photo { display: none; }

@media (min-width: 1560px) {
    .side-photo {
        display: block;
        position: absolute;
        width: 160px;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        border-radius: var(--r-sm);
        box-shadow: var(--ombre-2);
        opacity: 0.9;
        z-index: 2;
        pointer-events: none;
        will-change: transform;
    }
    .side-photo.side-left  { left: calc(50% - 780px); }
    .side-photo.side-right { right: calc(50% - 780px); }
}

@media (min-width: 1780px) {
    .side-photo { width: 188px; }
    .side-photo.side-left  { left: calc(50% - 830px); }
    .side-photo.side-right { right: calc(50% - 830px); }
}

/* =========================================================
   3. LE FAIRE-PART PUBLIÉ
========================================================= */

.faire-part-card {
    max-width: 620px;
    margin: 0 auto;
    padding: var(--e10) var(--e8);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    box-shadow: var(--ombre-1);
    text-align: center;
}

.fp-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--e6);
    border: 1px solid var(--or);
    border-radius: var(--r-rond);
    color: var(--or);
    font-family: var(--serif);
    font-size: var(--t-lg);
    letter-spacing: 0.06em;
}

.fp-lead, .fp-text {
    color: var(--encre-2);
    font-size: var(--t-base);
    line-height: var(--interligne-aere);
}
.fp-text { max-width: 46ch; margin: var(--e5) auto 0; }

.fp-names {
    margin: var(--e4) 0;
    font-family: var(--serif);
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 300;
    line-height: 1.05;
}
.fp-names span { color: var(--or); font-size: 0.7em; }

.fp-divider { margin: var(--e5) 0; color: var(--or); letter-spacing: 0.6em; font-size: var(--t-xs); }

.fp-date {
    display: inline-flex;
    align-items: center;
    gap: var(--e3);
    margin-top: var(--e6);
    padding-top: var(--e5);
    border-top: 1px solid var(--trait);
}
.fp-date-day { font-family: var(--serif); font-size: var(--t-2xl); font-weight: 300; line-height: 1; }
.fp-date-rest { font-size: var(--t-xs); letter-spacing: var(--chasse-etiquette); text-transform: uppercase; color: var(--encre-3); }

.fp-venue { margin-top: var(--e3); color: var(--encre-3); font-size: var(--t-sm); }

.fp-cta, .fp-cta-publie {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--e3);
    margin-top: var(--e7);
}

/* =========================================================
   4. INFORMATIONS PRATIQUES
========================================================= */

.infos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--e5);
    align-items: start;
}

.info-card { padding: var(--e6); }

.info-card h3 {
    display: flex;
    align-items: center;
    gap: var(--e3);
    margin-bottom: var(--e4);
    font-family: var(--sans);
    font-size: var(--t-base);
    font-weight: 600;
}

.info-card p { color: var(--encre-2); font-size: var(--t-sm); line-height: var(--interligne-aere); }

/* Titre, adresse, lien : trois lignes, toujours dans cet ordre. En
   ligne, le lien se calait derrière une adresse courte et sautait de
   place d'un lieu à l'autre. */
.venue-block {
    display: grid;
    gap: var(--e1);
    padding: var(--e4) 0;
    border-top: 1px solid var(--trait);
}
.venue-block:first-of-type { border-top: 0; padding-top: 0; }

.venue-block .venue-link {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    justify-self: start;
    margin-top: var(--e1);
    color: var(--encre-3);
    font-size: var(--t-xs);
    transition: color var(--duree-courte) var(--courbe);
}
.venue-block:hover .venue-link { color: var(--encre); }

.map-embed-wrap {
    position: relative;
    display: block;
    margin-top: var(--e4);
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--trait);
}

.map-embed-frame { aspect-ratio: 16 / 9; }
.map-embed-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.3) contrast(0.95); }

.map-cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
    background: var(--surface);
    border-top: 1px solid var(--trait);
    font-size: var(--t-sm);
}
.map-cta-arrow { color: var(--encre-3); }

.hotel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    padding: var(--e3) 0;
    border-top: 1px solid var(--trait);
    font-size: var(--t-sm);
}
.hotel-row:first-of-type { border-top: 0; }
/* Le nom au-dessus, l'adresse dessous : collés sur une ligne, les deux
   se lisaient comme un seul mot. */
.hotel-row > div { display: grid; gap: 2px; min-width: 0; }
.hotel-row > div > a { font-weight: 500; }
.hotel-row > div > span { color: var(--encre-3); font-size: var(--t-xs); }
.hotel-tag { flex: 0 0 auto; }

/* =========================================================
   5. PLANNING
   Une ligne verticale, des points, et rien qui distraie de
   l'heure.
========================================================= */

.timeline {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    padding-left: var(--e8);
}

.timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(180deg, var(--trait), var(--trait-fort), var(--trait));
}

.timeline-item { position: relative; padding-bottom: var(--e7); }
.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
    content: "";
    position: absolute;
    left: calc(var(--e8) * -1 + 3px);
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: var(--r-rond);
    background: var(--surface);
    border: 1px solid var(--or);
}

.timeline-time {
    display: block;
    color: var(--or);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: var(--chasse-etiquette);
}

.timeline-title {
    margin-top: var(--e1);
    font-family: var(--serif);
    font-size: var(--t-lg);
    font-weight: 400;
}

.timeline-desc, .timeline-address {
    margin-top: var(--e2);
    color: var(--encre-2);
    font-size: var(--t-sm);
    line-height: var(--interligne-aere);
}
.timeline-address {
    display: flex;
    align-items: flex-start;
    gap: var(--e2);
    color: var(--encre-3);
}
.timeline-address .icone { margin-top: 0.15em; }

/* =========================================================
   6. LE FORMULAIRE D'INVITATION
   C'est l'écran le plus important de la page invitée : c'est
   le seul qui demande quelque chose. Une colonne, une
   question par ligne, aucune colonne parasite.
========================================================= */

.form-shell {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--e8);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    box-shadow: var(--ombre-1);
}

.counter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
}

.counter-field {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    padding: var(--e1);
    border: 1px solid var(--trait);
    border-radius: var(--r-rond);
    background: var(--surface);
}

.counter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-rond);
    background: var(--fond-creux);
    color: var(--encre);
    font-size: var(--t-md);
    line-height: 1;
    transition: background var(--duree-courte) var(--courbe);
}
.counter-btn:hover { background: var(--trait); }

.counter-value {
    min-width: 34px;
    text-align: center;
    font-size: var(--t-md);
    font-variant-numeric: tabular-nums;
}

.kids-counters { display: grid; gap: var(--e3); margin-top: var(--e4); }

.name-fields { display: grid; gap: var(--e3); }

.name-fields-placeholder {
    padding: var(--e5);
    border: 1px dashed var(--trait);
    border-radius: var(--r-sm);
    color: var(--encre-3);
    font-size: var(--t-sm);
    text-align: center;
}

.name-field-item {
    padding: var(--e4);
    border: 1px solid var(--trait);
    border-radius: var(--r-sm);
    background: var(--fond);
}

.name-field-tag {
    display: block;
    margin-bottom: var(--e2);
    color: var(--encre-3);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: var(--chasse-etiquette);
    text-transform: uppercase;
}

.name-field-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }

/* ---- La boisson, personne par personne ---- */

.boissons { display: grid; gap: var(--e2); }

.boisson-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    flex-wrap: wrap;
    padding: var(--e3) var(--e4);
    border: 1px solid var(--trait);
    border-radius: var(--r-sm);
    background: var(--surface);
}

.boisson-nom { font-size: var(--t-sm); }
.choix-boisson { display: flex; gap: var(--e2); flex-wrap: wrap; }
.choix-boisson .choice-btn { min-height: 38px; padding: 8px var(--e3); font-size: var(--t-xs); }

/* ---- Allergies, adresse, zone ---- */

.allergy-box {
    padding: var(--e4);
    border: 1px solid var(--trait);
    border-radius: var(--r-sm);
    background: var(--fond-tendre);
}

.champs-adresse { display: grid; gap: var(--e3); }
.champs-adresse .double { display: grid; grid-template-columns: 1fr 2fr; gap: var(--e3); }

.case-hors-zone { margin-top: var(--e3); }

/* =========================================================
   7. GALERIES, PORTFOLIO, SOUVENIRS
========================================================= */

.gallery-block { margin-bottom: var(--e8); }

.gallery-block-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--e2) var(--e3);
    margin-bottom: var(--e4);
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--trait);
}
.gallery-block-heading p { flex: 1 1 auto; min-width: 0; }
.gallery-block-droite { display: inline-flex; align-items: baseline; gap: var(--e3); flex: 0 0 auto; }

.gallery-block-heading p {
    font-family: var(--serif);
    font-size: var(--t-lg);
    font-weight: 400;
}

.gallery-block-heading span { color: var(--encre-3); font-size: var(--t-xs); }
.gallery-block-heading .see-all-inline { margin-left: auto; }

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--e3);
}

.gallery-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--fond-creux);
    cursor: zoom-in;
}

.gallery-item img, .gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duree-longue) var(--courbe-douce);
}
.gallery-item:hover img { transform: scale(1.04); }

.video-badge {
    position: absolute;
    top: var(--e2);
    left: var(--e2);
    background: rgba(23, 21, 18, 0.62);
    color: #fff;
    backdrop-filter: blur(8px);
}

.photo-counter {
    position: absolute;
    right: var(--e2);
    bottom: var(--e2);
    padding: 2px 8px;
    border-radius: var(--r-rond);
    background: rgba(23, 21, 18, 0.62);
    color: #fff;
    font-size: var(--t-xs);
    backdrop-filter: blur(8px);
}

.souvenir-block { margin-bottom: var(--e10); }

.souvenirs-subheading {
    font-family: var(--serif);
    font-size: var(--t-xl);
    font-weight: 300;
}

.portfolio-intro {
    display: flex;
    align-items: baseline;
    gap: var(--e3);
    margin-bottom: var(--e5);
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--trait);
}
.portfolio-count { color: var(--encre-3); font-size: var(--t-xs); }

/* Le reportage sort de la colonne de lecture : des photos méritent la
   largeur de l'écran, un paragraphe non. La largeur de la barre de
   défilement est publiée par site.js, sans quoi 100vw déborde. */
.portfolio-breakout {
    position: relative;
    left: 50%;
    width: min(var(--colonne-large), calc(100vw - var(--largeur-defilement, 0px) - 2 * var(--e7)));
    margin-inline: 0;
    transform: translateX(-50%);
}

.portfolio-layout {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: var(--e7);
    align-items: start;
}

.portfolio-menu {
    position: sticky;
    top: calc(var(--barre-haute) + var(--e4));
    display: grid;
    gap: var(--e1);
}

/* L'index d'un album, pas une barre d'onglets : un filet marque la
   série ouverte, l'aplat noir écrasait les photos juste à côté. */
.portfolio-filter-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    padding: var(--e3) var(--e3) var(--e3) var(--e4);
    border-left: 2px solid transparent;
    color: var(--encre-3);
    font-size: var(--t-sm);
    text-align: left;
    transition: background var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe);
}
.portfolio-filter-btn:hover { color: var(--encre-2); border-left-color: var(--trait-fort); }
.portfolio-filter-btn.active { color: var(--encre); border-left-color: var(--or); font-weight: 500; }
.pf-count { font-size: var(--t-xs); color: var(--encre-4); font-variant-numeric: tabular-nums; }
.portfolio-filter-btn.active .pf-count { color: var(--or); }

/* ---- Le reportage : une mise en page justifiée ----

   Chaque photo garde son cadrage, toutes les photos d'une rangée
   partagent la même hauteur, et la rangée occupe exactement la largeur
   disponible. C'est la composition d'un album ou d'une planche contact,
   pas celle d'un dossier d'images.

   Le partage en rangées est fait par site.js. Ici, une rangée est une
   ligne flex où chaque photo grandit proportionnellement à son format :
   les hauteurs s'égalisent alors toutes seules, sans calcul de pixels.
*/

.portfolio-grid {
    --ecart-photos: 8px;
    display: grid;
    gap: var(--ecart-photos);
}

.portfolio-rangee {
    display: flex;
    gap: var(--ecart-photos);
    min-width: 0;
}

/* La dernière rangée est incomplète : elle garde la hauteur des autres et
   s'arrête où elle s'arrête, comme la dernière ligne d'un paragraphe. */
.portfolio-rangee-partielle { height: var(--hauteur-rangee, 320px); }
.portfolio-rangee-partielle .portfolio-item { flex: 0 0 auto; width: calc(var(--ratio, 1.5) * var(--hauteur-rangee, 320px)); max-width: 100%; }

.portfolio-item {
    position: relative;
    flex: var(--ratio, 1.5) 1 0;
    min-width: 0;
    aspect-ratio: var(--ratio, 1.5);
    /* Un rayon discret : au-delà, une photo cesse de ressembler à un
       tirage et commence à ressembler à une carte d'application. */
    border-radius: 3px;
    overflow: hidden;
    background: var(--fond-creux);
    cursor: zoom-in;
}
.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--courbe-douce), filter var(--duree) var(--courbe);
}
.portfolio-item:hover img { transform: scale(1.04); }

/* Au survol, les voisines s'estompent légèrement : le regard va sur la
   photo visée, comme lorsqu'on approche une planche de la lumière. */
.portfolio-rangee:hover .portfolio-item:not(:hover) img { filter: brightness(0.82); }

.portfolio-item-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--e7) var(--e4) var(--e3);
    background: linear-gradient(0deg, rgba(15, 13, 11, 0.58), transparent);
    color: #fff;
    font-size: var(--t-xs);
    letter-spacing: var(--chasse-etiquette);
    text-transform: uppercase;
    text-align: left;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.portfolio-item:hover .portfolio-item-overlay,
.portfolio-item:focus-visible .portfolio-item-overlay { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .portfolio-item img { transition: none; }
    .portfolio-item:hover img { transform: none; }
}

/* ---- Le film ---- */

.film-frame {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--encre);
    box-shadow: var(--ombre-2);
}
.film-frame video { width: 100%; display: block; }

.film-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 13, 11, 0.22);
    cursor: pointer;
    transition: background var(--duree) var(--courbe);
}
.film-play:hover { background: rgba(15, 13, 11, 0.34); }

.film-play span, .voicemail-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: var(--r-rond);
    background: rgba(255, 255, 255, 0.9);
    color: var(--encre);
    font-size: var(--t-lg);
    box-shadow: var(--ombre-2);
    backdrop-filter: blur(8px);
}

.film-dl-btn, .dl-btn {
    position: absolute;
    right: var(--e4);
    bottom: var(--e4);
    padding: var(--e2) var(--e4);
    border-radius: var(--r-rond);
    background: rgba(23, 21, 18, 0.6);
    color: #fff;
    font-size: var(--t-xs);
    backdrop-filter: blur(10px);
}

.film-caption {
    margin-top: var(--e4);
    color: var(--encre-3);
    font-size: var(--t-sm);
    text-align: center;
}

/* ---- Le photomaton ---- */

.strip-row {
    display: flex;
    gap: var(--e4);
    overflow-x: auto;
    padding-bottom: var(--e3);
    scrollbar-width: thin;
}

.strip-item {
    flex: 0 0 auto;
    width: 168px;
    padding: var(--e2);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-xs);
    box-shadow: var(--ombre-1);
    transform: rotate(-1.2deg);
    transition: transform var(--duree) var(--courbe);
}
.strip-item:nth-child(even) { transform: rotate(1.4deg); }
.strip-item:hover { transform: rotate(0) translateY(-4px); }

/* ---- La cabine à messages ---- */

.voicemail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--e3);
}

.voicemail-card {
    display: flex;
    align-items: center;
    gap: var(--e4);
    padding: var(--e4);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-sm);
}

.voicemail-play { width: 44px; height: 44px; flex: 0 0 auto; background: var(--fond-creux); box-shadow: none; }
.voicemail-card.playing .voicemail-play { background: var(--encre); color: var(--surface); }

.voicemail-body { flex: 1 1 auto; min-width: 0; }
.voicemail-name { font-size: var(--t-sm); font-weight: 600; }
/* Le type et la durée sont deux informations : un point médian les
   sépare, sinon on lit « audio0:48 ». */
.voicemail-meta { display: inline-flex; align-items: center; gap: var(--e2); }
.voicemail-type, .voicemail-meta { color: var(--encre-3); font-size: var(--t-xs); }
.voicemail-type::after { content: " ·"; }
.voicemail-wave { display: flex; align-items: flex-end; gap: 2px; height: 22px; margin-top: var(--e2); }
.voicemail-wave span { flex: 1 1 auto; background: var(--trait-fort); border-radius: 1px; }
.voicemail-card.playing .voicemail-wave span { background: var(--or); }

/* ---- Le dépôt de photos ---- */

.shared-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e3);
    align-items: center;
    margin-top: var(--e4);
    padding: var(--e5);
    border: 1px dashed var(--trait-fort);
    border-radius: var(--r-sm);
    background: var(--fond);
    transition: border-color var(--duree) var(--courbe), background var(--duree) var(--courbe);
}
.shared-actions.dragover { border-color: var(--encre); background: var(--fond-tendre); }
.shared-actions input[type="file"] { display: none; }

/* ---- La recherche par visage ----
   Un bandeau entre les deux galeries, parce qu'il puise dans les deux.
   Chaud et clair : c'est une invitation, pas un outil d'administration. */

.reconnaissance {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--e5);
    padding: var(--e6) var(--e7);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    background:
        radial-gradient(120% 160% at 0% 0%, var(--or-voile), transparent 58%),
        var(--surface);
}

.reconnaissance-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--r-rond);
    color: var(--or);
    background: var(--fond-tendre);
}
.reconnaissance-icone .icone { width: 26px; height: 26px; }

.reconnaissance h3 { font-family: var(--serif); font-size: var(--t-lg); font-weight: 400; }
.reconnaissance p { margin-top: var(--e2); color: var(--encre-2); font-size: var(--t-sm); line-height: var(--interligne-aere); max-width: 62ch; }
.reconnaissance .btn { flex: 0 0 auto; white-space: nowrap; }

/* ---- La fenêtre de recherche ---- */

.reco-etapes {
    display: grid;
    gap: var(--e3);
    margin: 0 0 var(--e6);
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.reco-etapes li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--e3);
    align-items: center;
    color: var(--encre-2);
    font-size: var(--t-sm);
    line-height: var(--interligne);
}
.reco-etape-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--r-rond);
    background: var(--fond-creux);
    color: var(--encre-3);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
}

.reco-zone {
    padding: var(--e7) var(--e5);
    border: 1px dashed var(--trait-fort);
    border-radius: var(--r-md);
    background: var(--fond);
    text-align: center;
}

.reco-cadre {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: var(--e4);
    border-radius: var(--r-rond);
    color: var(--or);
    background: var(--surface);
    box-shadow: var(--ombre-1);
}
.reco-cadre .icone { width: 30px; height: 30px; }

.reco-invite-titre { font-size: var(--t-base); font-weight: 600; }
.reco-invite-texte { margin: var(--e2) auto 0; max-width: 44ch; color: var(--encre-3); font-size: var(--t-xs); line-height: var(--interligne-aere); }

.reco-boutons { display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: center; margin-top: var(--e5); }

.reco-apercu { display: grid; justify-items: center; gap: var(--e4); }
.reco-apercu img {
    width: 148px;
    height: 148px;
    object-fit: cover;
    border-radius: var(--r-rond);
    box-shadow: var(--ombre-2);
}
.reco-reprendre { color: var(--encre-3); font-size: var(--t-xs); text-decoration: underline; text-underline-offset: 3px; }
.reco-reprendre:hover { color: var(--encre); }

.reco-note {
    margin-top: var(--e4);
    padding: var(--e4) var(--e5);
    border-radius: var(--r-sm);
    background: var(--ambre-fond);
    color: var(--ambre);
    font-size: var(--t-sm);
    line-height: var(--interligne-aere);
}

.souvenir-final {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e3);
    margin-top: var(--e8);
}

/* ---- La visionneuse ---- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--e7);
    background: rgba(12, 10, 9, 0.92);
    backdrop-filter: blur(14px);
}
.lightbox.open { display: flex; }

.lightbox-image, .lightbox-video {
    max-width: min(1200px, 92vw);
    max-height: 86vh;
    border-radius: var(--r-sm);
    box-shadow: var(--ombre-3);
}

.lightbox-close { position: absolute; top: var(--e5); right: var(--e5); background: transparent; border-color: rgba(255,255,255,0.3); color: #fff; }
.lightbox-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--r-rond);
    color: #fff;
    font-size: var(--t-lg);
    transition: background var(--duree-courte) var(--courbe);
}
.lightbox-arrow:hover { background: rgba(255, 255, 255, 0.14); }
.lightbox-arrow.previous { left: var(--e5); }
.lightbox-arrow.next { right: var(--e5); }

/* =========================================================
   8. PRESTATAIRES, CÔTÉ INVITÉ
   Une piste qui défile toute seule, en boucle. La piste
   contient deux fois la même série : quand la première sort
   par la gauche, la seconde est exactement à sa place.
========================================================= */

.presta-boucle {
    position: relative;
    overflow: hidden;
    margin: 0 calc(var(--e7) * -1);
    padding: var(--e2) 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.presta-piste {
    display: flex;
    gap: var(--e4);
    width: max-content;
    animation: presta-defile 52s linear infinite;
}

.presta-boucle:hover .presta-piste,
.presta-boucle:focus-within .presta-piste { animation-play-state: paused; }

/* Un défilement continu est le premier à couper quand on demande moins
   de mouvement : la liste reste lisible, simplement immobile. */
@media (prefers-reduced-motion: reduce) {
    .presta-piste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
    .presta-jeton[aria-hidden="true"] { display: none; }
}

@keyframes presta-defile {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.presta-jeton {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    padding: var(--e5);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
}

.presta-jeton-tete { display: flex; align-items: center; gap: var(--e3); }

.presta-jeton-visuel {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--r-rond);
    background: var(--fond-creux);
    background-size: cover;
    background-position: center;
    color: var(--encre-2);
    font-size: var(--t-sm);
    font-weight: 600;
}

.presta-jeton-nom { font-family: var(--serif); font-size: var(--t-md); line-height: 1.2; }

.presta-jeton-activite {
    margin-top: 2px;
    color: var(--encre-3);
    font-size: var(--t-xs);
    letter-spacing: var(--chasse-etiquette);
    text-transform: uppercase;
}

.presta-jeton-contact { display: grid; gap: 2px; }
.presta-jeton-contact a {
    color: var(--encre-3);
    font-size: var(--t-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--duree-courte) var(--courbe);
}
.presta-jeton-contact a:hover { color: var(--encre); }

@media (prefers-reduced-motion: reduce) {
    .presta-piste { animation: none; }
    .presta-boucle { overflow-x: auto; }
}

/* =========================================================
   9. CONNEXION
========================================================= */

.login-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--barre-haute));
    padding: var(--e9) var(--e5);
}

.login-card {
    width: min(420px, 100%);
    padding: var(--e8);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    box-shadow: var(--ombre-2);
    text-align: center;
}

.login-card h2 { margin-bottom: var(--e3); }
.login-card p { color: var(--encre-2); font-size: var(--t-sm); line-height: var(--interligne-aere); }
.login-card form { margin-top: var(--e6); text-align: left; }

.login-demo-note {
    margin-top: var(--e4);
    padding: var(--e3);
    border-radius: var(--r-xs);
    background: var(--fond-tendre);
    color: var(--encre-2);
    font-size: var(--t-xs);
}

.password-field { position: relative; }
.password-field input { padding-right: var(--e9); }

.eye-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: var(--e2);
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: var(--r-rond);
    color: var(--encre-3);
    font-size: var(--t-sm);
}
.eye-toggle:hover { color: var(--encre); }

/* =========================================================
   10. ESPACE MARIÉ : CADRE ET TABLEAU DE BORD
   Beaucoup de données, donc beaucoup de largeur et très peu
   de décor.
========================================================= */

#adminContent .container { max-width: var(--colonne-large); }

.admin-page-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e4);
    margin-bottom: var(--e7);
}

.admin-page-title h2 { font-size: var(--t-xl); }
.admin-page-title p, .admin-page-sous { margin-top: var(--e1); color: var(--encre-3); font-size: var(--t-sm); }

/* ---- Les chiffres du haut ---- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--e4);
    margin-bottom: var(--e6);
}

.stat-tile {
    padding: var(--e5);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    transition: border-color var(--duree) var(--courbe),
                box-shadow var(--duree) var(--courbe),
                transform var(--duree) var(--courbe);
}

.stat-tile.clickable { cursor: pointer; }
.stat-tile.clickable:hover {
    border-color: var(--trait-fort);
    box-shadow: var(--ombre-2);
    transform: translateY(-2px);
}

.stat-value {
    font-family: var(--serif);
    font-size: var(--t-2xl);
    font-weight: 300;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat-label { margin-top: var(--e2); color: var(--encre-2); font-size: var(--t-sm); }

.stat-hint {
    display: block;
    margin-top: var(--e3);
    color: var(--encre-3);
    font-size: var(--t-xs);
    letter-spacing: var(--chasse-etiquette);
    text-transform: uppercase;
    opacity: 0;
    transition: opacity var(--duree) var(--courbe);
}
.stat-tile.clickable:hover .stat-hint { opacity: 1; }

.stat-breakdown { display: grid; gap: var(--e2); }

/* ---- L'avancement ---- */

.progress-panel {
    padding: var(--e5) var(--e6);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    margin-bottom: var(--e6);
}

.progress-panel-title {
    margin-bottom: var(--e4);
    color: var(--encre-3);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: var(--chasse-etiquette);
    text-transform: uppercase;
}

.progress-bar {
    display: flex;
    height: 8px;
    border-radius: var(--r-rond);
    overflow: hidden;
    background: var(--fond-creux);
}

.progress-seg { height: 100%; transition: width var(--duree-longue) var(--courbe); }
.progress-seg.confirme { background: var(--vert); }
.progress-seg.excuse { background: var(--rouge); }

.progress-legend { display: flex; flex-wrap: wrap; gap: var(--e5); margin-top: var(--e3); }

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    color: var(--encre-2);
    font-size: var(--t-xs);
    cursor: pointer;
}

.legend-dot { width: 8px; height: 8px; border-radius: var(--r-rond); }
.legend-dot.confirme { background: var(--vert); }
.legend-dot.excuse { background: var(--rouge); }

/* ---- La répartition ---- */

.repartition {
    padding: var(--e5) var(--e6);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    margin-bottom: var(--e6);
}

.repartition-titre {
    margin-bottom: var(--e4);
    color: var(--encre-3);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: var(--chasse-etiquette);
    text-transform: uppercase;
}

.repartition-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }

.repartition-case {
    padding: var(--e4);
    border-radius: var(--r-sm);
    background: var(--fond);
}

.repartition-valeur {
    display: block;
    font-family: var(--serif);
    font-size: var(--t-xl);
    font-weight: 300;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.repartition-libelle { display: block; margin-top: var(--e2); color: var(--encre-3); font-size: var(--t-xs); }
.repartition-note { margin-top: var(--e4); color: var(--encre-3); font-size: var(--t-xs); }

/* ---- Le carnet ---- */

.carnet-bandeau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e5);
    flex-wrap: wrap;
    padding: var(--e5) var(--e6);
    margin-bottom: var(--e6);
    background: var(--fond-tendre);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
}

.carnet-bandeau h3 { font-family: var(--sans); font-size: var(--t-base); font-weight: 600; }
.carnet-bandeau p { margin-top: var(--e1); color: var(--encre-2); font-size: var(--t-sm); }
.carnet-actions { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* ---- Les deux services Dire Oui ---- */

.cases-services { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); margin-bottom: var(--e6); }

.case-service {
    display: flex;
    align-items: center;
    gap: var(--e4);
    padding: var(--e5);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    background: var(--surface);
    text-align: left;
    transition: border-color var(--duree) var(--courbe),
                box-shadow var(--duree) var(--courbe),
                transform var(--duree) var(--courbe);
}
.case-service:hover { border-color: var(--trait-fort); box-shadow: var(--ombre-2); transform: translateY(-2px); }

.case-service-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-rond);
    color: var(--or);
    background: var(--fond-tendre);
    font-size: var(--t-md);
}
.case-service-emoji .icone { width: 22px; height: 22px; }

.case-service-titre { font-size: var(--t-base); font-weight: 600; }
/* La mention du plan de table se centre sous le menu : posée à gauche,
   elle pendait sous une carte dont tout le reste est centré. */
.soon-note {
    justify-content: center;
    align-items: center;
    margin-top: var(--e6);
    color: var(--encre-3);
    font-size: var(--t-xs);
    text-align: center;
    border: 0;
    padding: 0;
    background: none;
}
.soon-note-tag { background: var(--or-voile); color: var(--or); }

/* =========================================================
   11. ESPACE MARIÉ : INVITÉS
========================================================= */

.table-input {
    width: 58px;
    min-height: 34px;
    padding: 5px var(--e2);
    border-radius: var(--r-xs);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.table-suite { color: var(--encre-4); font-size: var(--t-xs); }

.foyer-nom { color: var(--encre-3); font-size: var(--t-xs); font-weight: 500; }
tr.foyer-debut td { border-top: 1px solid var(--trait-fort); }

.guest-mail { color: var(--encre-2); }
.guest-mail:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 2px; }
.guest-address { color: var(--encre-3); font-size: var(--t-xs); max-width: 22ch; }

/* =========================================================
   12. ESPACE MARIÉ : PRESTATAIRES
   Une ligne de fiches qui défile, encadrée par deux flèches.
========================================================= */

.presta-cadre { display: flex; align-items: center; gap: var(--e2); padding: var(--e5) var(--e6); }
.presta-cadre .presta-defile { flex: 1 1 auto; min-width: 0; }

.presta-defile {
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--e1);
    margin: calc(var(--e1) * -1);
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.presta-ligne { display: flex; gap: var(--e3); align-items: stretch; width: max-content; min-width: 100%; }

.presta-fiche {
    flex: 0 0 258px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    padding: var(--e4);
    border: 1px solid var(--trait);
    border-radius: var(--r-sm);
    background: var(--surface);
    transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.presta-fiche:hover { border-color: var(--trait-fort); box-shadow: var(--ombre-1); }

.presta-fiche-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }

.presta-fiche-metier {
    color: var(--encre-3);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: var(--chasse-etiquette);
    text-transform: uppercase;
}

.presta-input { min-height: 38px; padding: 8px var(--e3); font-size: var(--t-sm); }
.presta-fiche-nom { font-weight: 600; }

.presta-status-select {
    min-height: 30px;
    padding: 4px var(--e6) 4px var(--e2);
    border-radius: var(--r-rond);
    font-size: var(--t-xs);
    background-position: right var(--e2) center;
    background-size: 9px;
}
.presta-status-select.presta-status-signe   { background-color: var(--bleu-fond); border-color: transparent; color: var(--bleu); }
.presta-status-select.presta-status-acompte { background-color: var(--ambre-fond); border-color: transparent; color: var(--ambre); }
.presta-status-select.presta-status-regle   { background-color: var(--vert-fond); border-color: transparent; color: var(--vert); }
.presta-status-select.presta-status-atrouver{ background-color: var(--fond-creux); border-color: transparent; color: var(--encre-3); }

.presta-fiche-rdv, .presta-fiche-factures { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: auto; }

.presta-fleche {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--trait);
    border-radius: var(--r-rond);
    background: var(--surface);
    color: var(--encre-2);
    font-size: var(--t-md);
    line-height: 1;
    transition: border-color var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe);
}
.presta-fleche:hover { border-color: var(--encre); color: var(--encre); }

.add-presta-row {
    display: flex;
    gap: var(--e3);
    flex-wrap: wrap;
    padding: 0 var(--e6) var(--e5);
}
.add-presta-row select { max-width: 320px; }

/* ---- Rendez-vous et factures ---- */

.rdv-chip, .rdv-add-btn, .facture-chip, .facture-add-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    padding: 5px var(--e3);
    border: 1px solid var(--trait);
    border-radius: var(--r-rond);
    background: var(--surface);
    color: var(--encre-2);
    font-size: var(--t-xs);
    transition: border-color var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe);
}
.rdv-chip:hover, .rdv-add-btn:hover, .facture-add-btn:hover { border-color: var(--encre); color: var(--encre); }
.rdv-add-btn, .facture-add-btn { border-style: dashed; color: var(--encre-3); }
.rdv-chip { background: var(--bleu-fond); border-color: transparent; color: var(--bleu); }
.rdv-sync { opacity: 0.7; }

.facture-chip { background: var(--fond-creux); border-color: transparent; }
.facture-chip a { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facture-suppr { color: var(--encre-4); font-size: var(--t-sm); line-height: 1; }
.facture-suppr:hover { color: var(--rouge); }

.rdv-popover {
    position: absolute;
    z-index: 700;
    width: 268px;
    padding: var(--e4);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-sm);
    box-shadow: var(--ombre-3);
}
.rdv-pop-step { display: grid; gap: var(--e2); }
.rdv-pop-recap { color: var(--encre-2); font-size: var(--t-sm); }
.rdv-pop-quiet { color: var(--encre-3); font-size: var(--t-xs); }
.rdv-pop-primary { margin-top: var(--e2); }

/* =========================================================
   13. RÉTROPLANNING
   L'écran d'ouverture de l'espace marié. Il doit se lire
   d'un regard : ce qui est fait s'efface, ce qui arrive
   ressort.
========================================================= */

.retro-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e5);
    flex-wrap: wrap;
    margin-bottom: var(--e6);
}

.retro-compteur { display: flex; align-items: baseline; gap: var(--e2); }
.retro-compteur-valeur { font-family: var(--serif); font-size: var(--t-2xl); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.retro-compteur-total { color: var(--encre-3); font-size: var(--t-md); }
.retro-compte { color: var(--encre-3); font-size: var(--t-sm); }

.retro-progress { height: 6px; border-radius: var(--r-rond); background: var(--fond-creux); overflow: hidden; margin-top: var(--e3); }
.retro-progress-bar { height: 100%; background: var(--encre); transition: width var(--duree-longue) var(--courbe); }

.retro-reglages, .retro-filtres, .retro-vues {
    display: flex;
    gap: var(--e2);
    flex-wrap: wrap;
    align-items: center;
}

.retro-filtre, .retro-vue {
    padding: 7px var(--e4);
    border: 1px solid var(--trait);
    border-radius: var(--r-rond);
    background: var(--surface);
    color: var(--encre-2);
    font-size: var(--t-xs);
    transition: border-color var(--duree-courte) var(--courbe),
                background var(--duree-courte) var(--courbe),
                color var(--duree-courte) var(--courbe);
}
.retro-filtre:hover, .retro-vue:hover { border-color: var(--trait-fort); }
.retro-filtre.active, .retro-vue.active { background: var(--encre); border-color: var(--encre); color: var(--surface); }

.retro-liste { display: grid; gap: var(--e6); }

.retro-groupe {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    overflow: hidden;
}

.retro-groupe-titre {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e4) var(--e5);
    border-bottom: 1px solid var(--trait);
    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 600;
}

.retro-groupe-emoji { font-size: var(--t-md); }

.retro-groupe-titre h3 { flex: 1 1 auto; display: flex; align-items: center; gap: var(--e2); font-family: var(--sans); font-size: var(--t-base); font-weight: 600; }

.retro-jalon {
    color: var(--encre-3);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.retro-compte {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: var(--r-rond);
    background: var(--fond-creux);
    color: var(--encre-3);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
}
.retro-groupe.retro-groupe-passee { opacity: 0.62; }

.retro-corps { display: grid; }

/* ---- Une étape ----
   Case à gauche, contenu au milieu, étiquettes à droite.
   Une étape cochée s'efface sans disparaître. */

.retro-tache {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--e4);
    padding: var(--e4) var(--e5);
    border-bottom: 1px solid var(--trait);
    transition: background var(--duree-courte) var(--courbe), opacity var(--duree) var(--courbe);
}
.retro-tache:last-child { border-bottom: 0; }
.retro-tache:hover { background: var(--fond); }

.retro-case { position: relative; display: inline-flex; margin-top: 2px; cursor: pointer; }
.retro-case input { position: absolute; opacity: 0; width: 0; height: 0; }

.retro-case span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--trait-fort);
    border-radius: var(--r-rond);
    background: var(--surface);
    transition: background var(--duree-courte) var(--courbe),
                border-color var(--duree-courte) var(--courbe);
}
.retro-case:hover span { border-color: var(--encre); }

.retro-case span::after {
    content: "";
    width: 9px;
    height: 5px;
    margin-top: -2px;
    border-left: 1.6px solid #fff;
    border-bottom: 1.6px solid #fff;
    transform: rotate(-45deg) scale(0.6);
    opacity: 0;
    transition: opacity var(--duree-courte) var(--courbe), transform var(--duree-courte) var(--courbe);
}

.retro-case input:checked + span { background: var(--encre); border-color: var(--encre); }
.retro-case input:checked + span::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.retro-case input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }

.retro-corps { min-width: 0; }
.retro-corps h4 {
    display: flex;
    align-items: center;
    gap: var(--e2);
    font-family: var(--sans);
    font-size: var(--t-base);
    font-weight: 600;
    line-height: 1.35;
}

.retro-echeance {
    margin-top: var(--e1);
    color: var(--encre-3);
    font-size: var(--t-xs);
}
.retro-echeance strong { font-weight: 500; color: var(--encre-2); }

/* Le conseil est une note, pas une alerte. Un aplat rosé répété sur
   quarante étapes transformait le rétroplanning en mur d'avertissements :
   un filet à gauche suffit à le distinguer du titre. */
.retro-conseil {
    display: block;
    margin-top: var(--e3);
    padding-left: var(--e4);
    border-left: 2px solid var(--trait);
    color: var(--encre-2);
    font-size: var(--t-sm);
    line-height: var(--interligne-aere);
}
.retro-tache:hover .retro-conseil { border-left-color: var(--trait-fort); }

.retro-action-ligne { margin-top: var(--e3); }

.retro-coin {
    display: flex;
    align-items: center;
    gap: var(--e2);
    flex-shrink: 0;
}

/* Une étape faite : le titre se barre, le reste s'atténue. */
.retro-tache.est-faite { opacity: 0.55; }
.retro-tache.est-faite .retro-corps h4 {
    text-decoration: line-through;
    text-decoration-color: var(--encre-4);
}

.retro-puce {
    width: 6px;
    height: 6px;
    border-radius: var(--r-rond);
    background: var(--rouge);
    flex: 0 0 auto;
}

.retro-jours { color: var(--encre-3); font-size: var(--t-xs); white-space: nowrap; }
.retro-jours.trop { color: var(--rouge); }

.retro-tag { background: var(--fond-creux); color: var(--encre-2); }
/* L'emoji reste un repère utile dans la vue par catégorie, où il titre
   un bloc. Sur une étiquette de deux mots, à côté d'un titre en gras, il
   ne dit rien de plus que le mot lui-même et casse la ligne. */
.retro-tag-emoji { display: none; }

.retro-porteurs { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e2); }
.retro-porteur {
    padding: 2px 8px;
    border-radius: var(--r-rond);
    background: var(--or-voile);
    color: var(--or);
    font-size: var(--t-xs);
}

.retro-action { flex: 0 0 auto; }
.retro-suppr {
    width: 30px;
    height: 30px;
    border-radius: var(--r-rond);
    color: var(--encre-4);
    font-size: var(--t-md);
    line-height: 1;
    transition: background var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe);
}
.retro-suppr:hover { background: var(--rouge-fond); color: var(--rouge); }

.retro-barre { display: flex; align-items: center; gap: var(--e3); }
.retro-coin { color: var(--encre-3); font-size: var(--t-xs); }
.retro-puce { width: 5px; height: 5px; border-radius: var(--r-rond); background: var(--trait-fort); }

/* =========================================================
   LE RÉTROPLANNING EN CALENDRIER
   La timeline dit dans quel ordre, le calendrier dit quand,
   et surtout combien dans la même semaine. Un quadrillage
   clair, des étapes posées sur leur jour, rien d'autre.
========================================================= */

.cal {
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
}

.cal-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    padding: var(--e5) var(--e6);
    border-bottom: 1px solid var(--trait);
}
.cal-mois {
    font-family: var(--serif);
    font-size: var(--t-xl);
    font-weight: 300;
    text-transform: capitalize;
}

.cal-navigation { display: flex; align-items: center; gap: var(--e2); }
.cal-fleche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--trait);
    border-radius: var(--r-rond);
    color: var(--encre-2);
    font-size: var(--t-md);
    line-height: 1;
    transition: border-color var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe);
}
.cal-fleche:hover { border-color: var(--encre); color: var(--encre); }

.cal-aujourdhui-btn {
    height: 34px;
    padding: 0 var(--e4);
    border: 1px solid var(--trait);
    border-radius: var(--r-rond);
    color: var(--encre-2);
    font-size: var(--t-sm);
    transition: border-color var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe);
}
.cal-aujourdhui-btn:hover { border-color: var(--encre); color: var(--encre); }

/* Le quadrillage : les filets sont portés par les cases, pour qu'aucune
   bordure ne double le cadre extérieur. */
.cal-grille {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-jour-nom {
    padding: var(--e3) var(--e3);
    border-bottom: 1px solid var(--trait);
    color: var(--encre-3);
    font-size: var(--t-xs);
    letter-spacing: var(--chasse-etiquette);
    text-transform: uppercase;
    text-align: center;
}

.cal-case {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    min-height: 118px;
    padding: var(--e2);
    border-right: 1px solid var(--trait);
    border-bottom: 1px solid var(--trait);
}
.cal-grille > .cal-case:nth-child(7n + 7) { border-right: 0; }

.cal-hors-mois { background: var(--fond-creux); }
.cal-hors-mois .cal-numero { color: var(--encre-4); }

.cal-numero {
    align-self: flex-end;
    color: var(--encre-3);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
}

/* Aujourd'hui : une pastille pleine sur le quantième, comme partout. */
.cal-aujourdhui .cal-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--r-rond);
    background: var(--encre);
    color: var(--surface);
}

/* Le jour du mariage : c'est le seul jour qui mérite de la couleur. */
.cal-jour-j { background: var(--fond-tendre); }
.cal-jour-j-etiquette {
    align-self: flex-start;
    padding: 2px 7px;
    border-radius: var(--r-rond);
    background: var(--or-voile);
    color: var(--or);
    font-size: var(--t-xs);
    font-weight: 500;
}

.cal-etapes { display: grid; gap: 3px; min-width: 0; }

.cal-etape {
    display: grid;
    gap: 2px;
    padding: var(--e2);
    border-radius: var(--r-xs);
    background: var(--fond-creux);
    cursor: pointer;
    transition: background var(--duree-courte) var(--courbe);
}
.cal-etape:hover { background: var(--trait); }
/* La case à cocher est celle de la timeline : même attribut, même
   gestionnaire. Elle est invisible, c'est la pastille qui la porte. */
.cal-etape input { position: absolute; opacity: 0; width: 0; height: 0; }

.cal-etape-titre {
    color: var(--encre);
    font-size: var(--t-xs);
    line-height: 1.35;
    /* Deux lignes au plus : au-delà, la case du jour se déforme. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cal-etape-tag { color: var(--encre-3); font-size: 10px; }

.cal-etape.est-faite { opacity: 0.5; }
.cal-etape.est-faite .cal-etape-titre { text-decoration: line-through; }

.cal-sans-date {
    padding: var(--e4) var(--e6);
    border-top: 1px solid var(--trait);
    color: var(--encre-3);
    font-size: var(--t-sm);
}

/* ---- Le même mois, en agenda (téléphone) ----
   Sept colonnes ne tiennent pas sur un écran de poche : on ne montre que
   les jours où il se passe quelque chose, le quantième à gauche. */

.cal-agenda .cal-entete { flex-wrap: wrap; }

.agenda-liste { display: grid; }

.agenda-jour {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: var(--e4);
    padding: var(--e4) var(--e5);
    border-bottom: 1px solid var(--trait);
}
.agenda-jour:last-child { border-bottom: 0; }

.agenda-date { display: grid; align-content: start; justify-items: center; gap: 2px; }
.agenda-numero {
    font-family: var(--serif);
    font-size: var(--t-lg);
    font-weight: 300;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.agenda-nom { color: var(--encre-3); font-size: var(--t-xs); }

.agenda-jour.est-aujourdhui .agenda-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-rond);
    background: var(--encre);
    color: var(--surface);
    font-size: var(--t-base);
}
.agenda-jour.est-jour-j { background: var(--fond-tendre); }

.agenda-jour .cal-etape { padding: var(--e3) var(--e4); }
.agenda-jour .cal-etape-titre { font-size: var(--t-sm); -webkit-line-clamp: 3; }

.agenda-vide { padding: var(--e9) var(--e5); text-align: center; color: var(--encre-3); font-size: var(--t-sm); }

.retro-vide, .retro-vide-depart {
    padding: var(--e8);
    text-align: center;
    color: var(--encre-2);
    font-size: var(--t-base);
    line-height: var(--interligne-aere);
}
.retro-vide-detail { color: var(--encre-3); font-size: var(--t-sm); }


/* ---- Ajouter une étape ---- */

.retro-ajout {
    padding: var(--e5);
    border: 1px dashed var(--trait-fort);
    border-radius: var(--r-md);
    background: var(--surface);
}
.retro-ajout-titre { margin-bottom: var(--e4); font-size: var(--t-sm); font-weight: 600; }
.retro-ajout-champs { display: grid; grid-template-columns: 2fr 1fr auto; gap: var(--e3); align-items: end; }
.retro-ajout-champ { display: grid; gap: var(--e2); }
.retro-ajout-actions { display: flex; gap: var(--e2); }

/* La vue par date ajoute un filet vertical devant les groupes. */
.retro-liste.vue-date .retro-groupe { border-left: 2px solid var(--or); }

/* =========================================================
   14. PRESTATIONS
========================================================= */

.prestation-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e2); }

.prestation-item {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
    border: 1px solid var(--trait);
    border-radius: var(--r-sm);
    background: var(--surface);
    text-align: left;
    transition: border-color var(--duree-courte) var(--courbe), background var(--duree-courte) var(--courbe);
}
.prestation-item:hover { border-color: var(--trait-fort); }
.prestation-item.est-choisie { border-color: var(--encre); background: var(--fond-tendre); }
.prestation-item.est-socle { opacity: 0.7; cursor: default; }

.prestation-emoji { font-size: var(--t-md); }
.prestation-nom { flex: 1 1 auto; font-size: var(--t-sm); }
.prestation-note, .prestation-deja { color: var(--encre-3); font-size: var(--t-xs); }

/* =========================================================
   15. MESSAGERIE
========================================================= */

.panneau-repliable summary { cursor: pointer; list-style: none; }
.panneau-repliable summary::-webkit-details-marker { display: none; }

.panneau-entete-droite { display: inline-flex; align-items: center; gap: var(--e3); }

.panneau-chevron {
    width: 9px;
    height: 9px;
    border-right: 1.5px solid var(--encre-3);
    border-bottom: 1.5px solid var(--encre-3);
    transform: rotate(45deg);
    transition: transform var(--duree) var(--courbe);
}
.panneau-repliable[open] .panneau-chevron { transform: rotate(-135deg); }

.repliable-corps { padding: var(--e5) var(--e6); }

.mail-status-tag {
    padding: 3px 9px;
    border-radius: var(--r-rond);
    background: var(--fond-creux);
    color: var(--encre-3);
    font-size: var(--t-xs);
}

.mail-bloc { padding-bottom: var(--e6); }
.mail-bloc + .mail-bloc { padding-top: var(--e6); border-top: 1px solid var(--trait); }
.mail-bloc-titre { margin-bottom: var(--e4); font-size: var(--t-sm); font-weight: 600; }
.mail-panel-intro { color: var(--encre-2); font-size: var(--t-sm); line-height: var(--interligne-aere); margin-bottom: var(--e4); }
.mail-panel-intro.is-dark { color: var(--encre-2); }
.mail-sent-recap { margin-top: var(--e3); color: var(--encre-3); font-size: var(--t-xs); }

.send-date-row { margin-bottom: var(--e4); }
.send-date-panel {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: var(--e3);
    margin-top: var(--e3);
    padding: var(--e4);
    border: 1px solid var(--trait);
    border-radius: var(--r-sm);
    background: var(--fond);
}
.send-date-panel label { font-size: var(--t-xs); color: var(--encre-3); white-space: nowrap; }

.messages-pied { margin-top: var(--e4); text-align: center; }

/* =========================================================
   16. PAGE INVITÉE, DANS L'ESPACE MARIÉ
========================================================= */

.apercu-invite-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    flex-wrap: wrap;
    padding: var(--e4) var(--e5);
    border: 1px solid var(--trait);
    border-radius: var(--r-md) var(--r-md) 0 0;
    background: var(--fond);
}

.apercu-invite-url {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--t-xs);
    color: var(--encre-2);
}

.apercu-invite-cadre {
    height: min(72vh, 900px);
    border: 1px solid var(--trait);
    border-top: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    overflow: hidden;
    background: var(--surface);
}
.apercu-invite-cadre iframe { width: 100%; height: 100%; border: 0; }

.admin-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e3); }
/* Une galerie vide dit pourquoi elle est vide : sans cela l'écran est
   une page blanche, et le marié croit à une panne. */
.admin-gallery:empty { display: block; }
.admin-gallery:empty::after {
    content: attr(data-vide);
    display: block;
    padding: var(--e10) var(--e5);
    text-align: center;
    color: var(--encre-3);
    font-size: var(--t-sm);
}
.admin-gallery-item { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--fond-creux); }
.admin-gallery-item img, .admin-gallery-item video { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   17. BULLE DE CONTACT
========================================================= */

.bulle-contact { position: fixed; right: var(--e6); bottom: var(--e6); z-index: 800; }

.bulle-bouton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--r-rond);
    background: var(--surface);
    border: 1px solid var(--trait);
    box-shadow: var(--ombre-2);
    font-size: var(--t-lg);
    transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.bulle-bouton:hover { transform: translateY(-2px); box-shadow: var(--ombre-3); }

.bulle-pastille {
    position: absolute;
    top: -2px;
    right: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-rond);
    background: var(--rouge);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
}

.bulle-panneau {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--e3));
    width: 288px;
    padding: var(--e5);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    box-shadow: var(--ombre-3);
    animation: fenetre-entree var(--duree) var(--courbe);
}

.bulle-titre { font-family: var(--serif); font-size: var(--t-md); margin-bottom: var(--e4); }
.bulle-liens { display: grid; gap: var(--e2); }

.bulle-lien {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e3);
    border-radius: var(--r-sm);
    text-align: left;
    transition: background var(--duree-courte) var(--courbe);
}
.bulle-lien:hover { background: var(--fond-creux); }

.bulle-lien-icone { display: inline-flex; color: var(--encre-2); }
.bulle-lien-icone .icone { width: 19px; height: 19px; }
.bulle-lien-quoi { display: block; color: var(--encre-3); font-size: var(--t-xs); }
.bulle-lien-valeur { display: block; font-size: var(--t-sm); }
.bulle-emoji { display: inline-flex; }
.bulle-emoji .icone { width: 22px; height: 22px; }

/* =========================================================
   18. PORTE D'ENTRÉE DE LA DÉMONSTRATION
========================================================= */

.porte-demo {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--e6);
}

/* Le fond n'est pas un noir plat : deux halos très sourds, l'un doré
   l'autre froid, donnent de la profondeur sans rien illustrer. */
.porte-demo-fond {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(169, 138, 95, 0.28), transparent 60%),
        radial-gradient(90% 70% at 15% 110%, rgba(47, 85, 115, 0.20), transparent 62%),
        var(--encre);
}
/* Un grain très fin : la surface respire au lieu de bander. */
.porte-demo-fond::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.28;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    pointer-events: none;
}

.porte-demo-carte {
    position: relative;
    width: min(620px, 100%);
    text-align: center;
    color: #fff;
    animation: porte-entree var(--duree-longue) var(--courbe);
}

@keyframes porte-entree {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

.porte-demo-marque {
    display: block;
    margin-bottom: var(--e6);
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.porte-demo-carte h1 {
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 300;
    color: #fff;
}

.porte-demo-carte p {
    max-width: 44ch;
    margin: var(--e5) auto 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--t-base);
    line-height: var(--interligne-aere);
}

/* Les deux sélecteurs ont la même largeur et la même trame : ils posent
   la même question, ils ne peuvent pas avoir deux tailles. */
.porte-demo-choix { display: grid; gap: var(--e3); margin: var(--e8) 0; justify-items: center; }
.porte-demo-choix-ligne { display: flex; justify-content: center; width: min(380px, 100%); }
.porte-demo-choix .switch { width: 100%; }
.porte-demo-choix .switch-option { flex: 1 1 0; justify-content: center; text-align: center; }

.porte-demo-choix .switch { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
.porte-demo-choix .switch-option { color: rgba(255, 255, 255, 0.66); }
.porte-demo-choix .switch-option.active { background: #fff; color: var(--encre); box-shadow: none; }

.porte-demo .btn-primary { background: #fff; border-color: #fff; color: var(--encre); }
.porte-demo .btn-primary:hover { background: #efecea; }

.porte-demo.porte-demo-sortie { opacity: 0; transition: opacity var(--duree-longue) var(--courbe); pointer-events: none; }
body.porte-ouverte { overflow: hidden; }

/* =========================================================
   19. SORTIE DE DÉMONSTRATION ET INSCRIPTION
========================================================= */

.demo-sortie {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--e9) var(--e7);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-lg);
    box-shadow: var(--ombre-1);
}
.demo-sortie p { max-width: 48ch; margin: var(--e4) auto 0; color: var(--encre-2); line-height: var(--interligne-aere); }
.demo-sortie-liens { display: flex; justify-content: center; gap: var(--e3); margin-top: var(--e7); }

.fenetre-inscription { padding: var(--e8); }
.fenetre-inscription h2 { font-size: var(--t-xl); }
.fenetre-intro { margin: var(--e3) 0 var(--e6); color: var(--encre-2); font-size: var(--t-sm); line-height: var(--interligne-aere); }
.fenetre-fermer { position: absolute; top: var(--e4); right: var(--e4); }

.sans-lieu { margin-top: var(--e2); min-height: 36px; padding: 6px var(--e3); font-size: var(--t-xs); }

.inscription-erreur {
    margin-bottom: var(--e4);
    padding: var(--e3) var(--e4);
    border-radius: var(--r-sm);
    background: var(--rouge-fond);
    color: var(--rouge);
    font-size: var(--t-sm);
}

.inscription-ok {
    padding: var(--e5);
    border-radius: var(--r-sm);
    background: var(--vert-fond);
    color: var(--vert);
    font-size: var(--t-base);
    line-height: var(--interligne-aere);
}

/* =========================================================
   20. CE QUI RESTE
   Panneaux d'état, feuille du bas, menu du repas, petites
   classes d'usage.
========================================================= */

.tabpanel { display: block; }
.site-state-panel { display: block; }

/* La barre d'onglets d'une section qui vient de se coller
   en haut de l'écran gagne son filet. */
.est-collee { box-shadow: var(--ombre-1); }

/* La bulle de contact a été vue au moins une fois : elle
   perd sa pastille d'appel. */
.bulle-contact.est-vue .bulle-pastille { display: none; }

.side-parallax-zone-toggle { position: relative; }

.gallery-item-video { cursor: pointer; }
.shared-gallery-block { margin-bottom: var(--e6); }

.warning-icon { flex: 0 0 auto; font-size: var(--t-md); line-height: 1.2; }
.check { color: var(--vert); }

/* ---- Le menu du repas, sur la page invitée ---- */

.menu-card {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--e9) var(--e8);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    text-align: center;
}

.menu-card-title { font-family: var(--serif); font-size: var(--t-xl); font-weight: 300; }
.menu-card-sub { margin-top: var(--e2); color: var(--encre-3); font-size: var(--t-xs); letter-spacing: var(--chasse-etiquette); text-transform: uppercase; }
.menu-divider { width: 48px; height: 1px; margin: var(--e6) auto; background: var(--or); }
.menu-course { padding: var(--e4) 0; }
.menu-course-name { color: var(--or); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--chasse-etiquette); text-transform: uppercase; }
.menu-course-item { margin-top: var(--e2); font-family: var(--serif); font-size: var(--t-md); }
.menu-note { margin-top: var(--e5); color: var(--encre-3); font-size: var(--t-xs); }

/* ---- La feuille qui monte du bas ----
   Elle sert au choix des prestations. Sur ordinateur, elle
   se comporte comme une fenêtre centrée. */

.feuille {
    position: fixed;
    inset: 0;
    z-index: 940;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--e6);
}
.feuille.feuille-ouverte { display: flex; }

.feuille-fond {
    position: absolute;
    inset: 0;
    background: rgba(23, 21, 18, 0.38);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.feuille-panneau {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: min(86vh, 900px);
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--ombre-3);
    animation: fenetre-entree var(--duree-longue) var(--courbe);
    overflow: hidden;
}

.feuille-poignee { display: none; }

.feuille-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e4);
    padding: var(--e6) var(--e7) var(--e4);
}
.feuille-entete h3 { font-family: var(--serif); font-size: var(--t-xl); font-weight: 300; }

.feuille-corps { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--e7) var(--e5); }

.feuille-pied {
    display: flex;
    gap: var(--e3);
    justify-content: flex-end;
    padding: var(--e5) var(--e7);
    border-top: 1px solid var(--trait);
    background: var(--fond);
}

/* ---- Alignements et tailles d'appoint ---- */

.centre { text-align: center; }
.gauche { text-align: left; }
.droite { text-align: right; }
.large  { width: 100%; }
.small  { font-size: var(--t-xs); }
.choisie { border-color: var(--encre); }

/* =========================================================
   21. TÉLÉPHONE
   Presque tous les visiteurs arrivent par là. La règle est
   simple : une seule colonne, des cibles larges, la barre
   d'onglets qui défile au doigt, et les fenêtres qui montent
   du bas.
========================================================= */

@media (max-width: 1200px) {
    .portfolio-layout { grid-template-columns: 160px 1fr; gap: var(--e5); }
    .cases-services { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .topbar { padding: 0 var(--e5); gap: var(--e3); }
    .hero { min-height: min(78vh, 720px); }
    .hero-content { padding: 0 var(--e5) var(--e9); }

    .portfolio-layout { grid-template-columns: 1fr; }
    .portfolio-menu {
        position: static;
        display: flex;
        gap: var(--e2);
        overflow-x: auto;
        padding-bottom: var(--e2);
        scrollbar-width: none;
    }
    .portfolio-menu::-webkit-scrollbar { display: none; }
    /* Couché, l'index se marque par un filet dessous et non à gauche. */
    .portfolio-filter-btn {
        flex: 0 0 auto;
        padding: var(--e2) var(--e3);
        border-left: 0;
        border-bottom: 2px solid transparent;
    }
    .portfolio-filter-btn:hover { border-left-color: transparent; border-bottom-color: var(--trait-fort); }
    .portfolio-filter-btn.active { border-left-color: transparent; border-bottom-color: var(--or); }

    .form-shell { padding: var(--e6); }
    .retro-ajout-champs { grid-template-columns: 1fr; }
    .send-date-panel { grid-template-columns: 1fr; }
    .repartition-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {

    /* ---- La barre du haut ----
       Le nom du mariage disparaît, il ne reste que les
       rubriques, qui défilent au doigt avec un repère
       d'accroche. */
    .topbar {
        padding: 0 0 0 var(--e5);
        gap: var(--e2);
        flex-wrap: wrap;
        row-gap: 0;
    }
    .tabs { padding: var(--e2) var(--e5) var(--e2) 0; gap: 2px; }
    .tab-btn { padding: var(--e2) var(--e3); font-size: var(--t-sm); }
    .tab-btn.active::after { left: var(--e3); right: var(--e3); bottom: 0; }

    .topbar-controls {
        width: 100%;
        margin-left: 0;
        padding: 0 var(--e5) var(--e3);
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .topbar-controls::-webkit-scrollbar { display: none; }
    .toggle-divider { display: none; }
    .switch-option { padding: 7px var(--e3); }

    /* L'espace marié n'a qu'un bouton dans la barre : il ne mérite
       pas une ligne entière, il reste au bout des rubriques. */
    .topbar:not(:has(.demo-toggle)) { flex-wrap: nowrap; }
    .topbar:not(:has(.demo-toggle)) .topbar-controls {
        width: auto;
        margin-left: auto;
        padding: var(--e2) var(--e4) var(--e2) var(--e5);
        overflow: visible;
        /* Un voile à gauche du bouton : les rubriques passent dessous
           sans venir le toucher. */
        background: linear-gradient(to right, rgba(247, 246, 244, 0), var(--fond) var(--e5));
    }
    .topbar:not(:has(.demo-toggle)) .topbar-controls .btn {
        padding: 6px var(--e3);
        font-size: var(--t-xs);
        min-height: 34px;
    }

    /* ---- L'accueil ---- */
    .hero { min-height: 76vh; }
    .hero-names { font-size: clamp(2.5rem, 13vw, 3.5rem); }
    .hero-cta { flex-direction: column; }
    .hero-cta .btn { width: 100%; }
    .scroll-hint { display: none; }

    /* ---- Les blocs de contenu ---- */
    .faire-part-card { padding: var(--e8) var(--e5); }
    .infos-grid { grid-template-columns: 1fr; }
    .info-card { padding: var(--e5); }
    .timeline { padding-left: var(--e7); }
    .timeline-item::before { left: calc(var(--e7) * -1 + 3px); }

    /* ---- Le formulaire ----
       Plus de colonnes jumelles : au doigt, une question par
       ligne se remplit sans jamais rater la cible. */
    .form-shell { padding: var(--e5); border-radius: var(--r-sm); }
    .name-field-split, .champs-adresse .double { grid-template-columns: 1fr; }
    .counter-row { flex-direction: column; align-items: stretch; gap: var(--e3); }
    .counter-field { justify-content: space-between; }
    .counter-btn { width: 44px; height: 44px; }
    .boisson-item { flex-direction: column; align-items: stretch; }
    .boisson-item .choix-boisson .choice-btn { flex: 1 1 0; justify-content: center; }
    .choice-group .choice-btn { flex: 1 1 auto; justify-content: center; }

    /* ---- Les galeries ---- */
    .gallery { grid-template-columns: repeat(2, 1fr); gap: var(--e2); }
    .portfolio-grid { --ecart-photos: 5px; }
    .reconnaissance { grid-template-columns: 1fr; justify-items: start; gap: var(--e4); padding: var(--e5); text-align: left; }
    .reconnaissance .btn { width: 100%; }
    .reco-boutons { flex-direction: column; }
    .reco-boutons .btn { width: 100%; }
    .voicemail-grid { grid-template-columns: 1fr; }
    .strip-item { width: 140px; }
    .lightbox { padding: var(--e4); }
    .lightbox-arrow.previous { left: var(--e2); }
    .lightbox-arrow.next { right: var(--e2); }

    /* ---- L'espace marié ----
       Les tableaux deviennent des fiches : une ligne de
       tableau à dix colonnes n'existe pas sur un téléphone. */
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
    .stat-tile { padding: var(--e4); }
    .stat-hint { display: none; }
    .repartition-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-page-title { flex-direction: column; align-items: flex-start; }
    .carnet-bandeau { flex-direction: column; align-items: flex-start; }

    .admin-panel .table-scroll table,
    .admin-panel .table-scroll thead,
    .admin-panel .table-scroll tbody,
    .admin-panel .table-scroll tr,
    .admin-panel .table-scroll td { display: block; width: 100%; }

    .admin-panel .table-scroll thead { display: none; }

    .admin-panel .table-scroll tr {
        margin-bottom: var(--e3);
        padding: var(--e4);
        border: 1px solid var(--trait);
        border-radius: var(--r-sm);
        background: var(--surface);
    }
    .admin-panel .table-scroll td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--e4);
        padding: var(--e2) 0;
        border-bottom: 0;
    }
    .admin-panel .table-scroll td::before {
        content: attr(data-libelle);
        flex: 0 0 auto;
        color: var(--encre-3);
        font-size: var(--t-xs);
        letter-spacing: var(--chasse-etiquette);
        text-transform: uppercase;
    }
    .guest-address { max-width: none; text-align: right; }

    .presta-cadre { padding: var(--e4); }
    .presta-fleche { display: none; }
    .presta-fiche { flex-basis: 82vw; }
    .add-presta-row { padding: 0 var(--e4) var(--e4); }
    .add-presta-row select, .add-presta-row .btn { width: 100%; max-width: none; }

    .repliable-corps { padding: var(--e4); }
    .admin-panel-header { padding: var(--e4); align-items: flex-start; }

    /* Le libellé de droite passe sous le titre plutôt que de l'écraser
       sur deux lignes. */
    .panneau-repliable summary.admin-panel-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--e1) var(--e3);
    }
    .panneau-repliable summary.admin-panel-header > h3 { grid-column: 1; }
    .panneau-repliable summary.admin-panel-header .panneau-entete-droite {
        display: contents;
    }
    .panneau-repliable summary.admin-panel-header .panneau-chevron {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }
    .panneau-repliable summary.admin-panel-header .mail-status-tag {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: start;
    }
    .panneau-repliable summary.admin-panel-header .mail-status-tag:empty { display: none; }

    /* ---- Le rétroplanning ---- */
    .retro-entete { flex-direction: column; align-items: flex-start; gap: var(--e4); }
    .retro-tache { grid-template-columns: auto 1fr; gap: var(--e3); padding: var(--e4); }
    .retro-coin { grid-column: 2; justify-content: flex-start; }
    .retro-filtres, .retro-vues { width: 100%; overflow-x: auto; scrollbar-width: none; }
    .retro-filtres::-webkit-scrollbar, .retro-vues::-webkit-scrollbar { display: none; }
    .retro-filtre, .retro-vue { flex: 0 0 auto; }

    /* ---- Les prestations ---- */
    .prestation-liste { grid-template-columns: 1fr; }

    /* ---- La feuille du bas ----
       Poignée visible, coins arrondis en haut seulement : le
       geste attendu sur téléphone. */
    .feuille { align-items: flex-end; padding: 0; }
    .feuille-panneau {
        width: 100%;
        max-height: 90vh;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        animation: feuille-entree var(--duree-longue) var(--courbe);
    }
    .feuille-poignee {
        display: block;
        width: 38px;
        height: 4px;
        margin: var(--e3) auto 0;
        border-radius: var(--r-rond);
        background: var(--trait-fort);
    }
    .feuille-entete { padding: var(--e4) var(--e5) var(--e3); }
    .feuille-corps { padding: 0 var(--e5) var(--e4); }
    .feuille-pied { padding: var(--e4) var(--e5); }
    .feuille-pied .btn { flex: 1 1 0; }

    /* ---- La bulle de contact ----
       Elle recule dans le coin pour ne pas couvrir le bouton
       d'action en bas de page. */
    .bulle-contact { right: var(--e4); bottom: var(--e4); }
    .bulle-bouton { width: 48px; height: 48px; }
    .bulle-panneau { width: min(300px, calc(100vw - var(--e8))); }

    /* ---- La porte d'entrée ---- */
    .porte-demo { padding: var(--e5); }
    .porte-demo-choix { margin: var(--e7) 0; }
    .porte-demo .btn { width: 100%; }

    .demo-sortie { padding: var(--e8) var(--e5); }
    .demo-sortie-liens { flex-direction: column; }
    .demo-sortie-liens .btn { width: 100%; }

    .fenetre-inscription { padding: var(--e6) var(--e5) var(--e7); }

    .presta-boucle { margin: 0 calc(var(--e5) * -1); }
    .presta-jeton { flex-basis: 230px; }
}

/* Quatre classes d'appoint, posées à la fin pour ne pas
   casser la lecture des sections. */
.mail-panel-body { display: grid; gap: var(--e4); }
.presta-fleche-gauche, .presta-fleche-droite { /* la place est donnée par .presta-cadre */ }
.pap-offre.vedette { border-color: var(--encre); }

/* ---------------------------------------------------------------
   L'habillage papeterie de l'en-tête

   Avant le mariage, un couple qui n'a pas encore déposé ses photos
   n'a pas pour autant une page nue : c'est sa papeterie qui habille
   l'en-tête. Le fond prend le papier de son coloris, le double filet
   reprend celui des gabarits imprimés, et l'ornement vient du modèle
   qu'il a choisi dans l'atelier. Aucune image à héberger, aucune
   photo d'inconnu sur la page d'un client.

   Les dix jetons du coloris sont posés en ligne par site.js, comme
   pour les gabarits : --pap-bg, --pap-ink, --pap-soft, --pap-accent.
--------------------------------------------------------------- */

.hero-papeterie { position: absolute; inset: 0; z-index: 1; }

/* Le grain du papier, dessiné plutôt que photographié. */
.hero-papeterie::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.055'/></svg>");
}

/* Le double filet, aux mêmes proportions que sur la carte imprimée. */
.hero-papeterie::after {
    content: "";
    position: absolute;
    inset: var(--e6);
    border: 1px solid var(--pap-accent);
    opacity: 0.3;
}
.hero-filet-interieur {
    position: absolute;
    inset: calc(var(--e6) + 6px);
    border: 1px solid var(--pap-accent);
    opacity: 0.16;
}

.hero-sans-photo {
    align-items: center;
    background: var(--pap-bg);
    min-height: min(84vh, 860px);
}
.hero-sans-photo .hero-overlay { display: none; }
.hero-sans-photo .scroll-hint { color: var(--pap-soft); }
.hero-sans-photo .hero-content {
    /* Le contenu reste à l'intérieur du filet : une ligne de date qui
       traverse le cadre se voit tout de suite sur un téléphone. */
    padding-block: var(--e10);
    padding-inline: calc(var(--e6) + var(--e5));
    color: var(--pap-ink);
}
.hero-sans-photo .hero-date-pill { max-width: 100%; }
.hero-sans-photo .hero-content .eyebrow { color: var(--pap-soft); }
.hero-sans-photo .hero-names { color: var(--pap-ink); }

/* L'esperluette prend l'accent et passe à la ligne, comme sur la carte. */
.hero-sans-photo .hero-names .hero-esperluette {
    display: block;
    font-size: 0.42em;
    font-style: italic;
    color: var(--pap-accent);
    margin: 0.12em 0;
}

.hero-ornement {
    width: min(340px, 62%);
    margin: 0 auto var(--e3);
}
.hero-ornement > div { width: 100%; }

.hero-registre {
    max-width: 34ch;
    margin: var(--e4) auto 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-lg);
    color: var(--pap-soft);
    text-wrap: balance;
}

/* La pastille de date redevient un texte entre deux filets : sur du
   papier, une pastille en verre dépoli n'a aucun sens. */
.hero-sans-photo .hero-date-pill {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-color: var(--pap-accent);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--pap-ink);
    letter-spacing: var(--chasse-etiquette);
    text-transform: uppercase;
}

.hero-sans-photo .hero-cta .btn-primary {
    background: var(--pap-ink);
    border-color: var(--pap-ink);
    color: var(--pap-bg);
}
.hero-sans-photo .hero-cta .btn-primary:hover { opacity: 0.88; background: var(--pap-ink); }
.hero-sans-photo .hero-cta .btn-ghost-light {
    border-color: var(--pap-accent);
    color: var(--pap-ink);
}
.hero-sans-photo .hero-cta .btn-ghost-light:hover { background: rgba(0, 0, 0, 0.04); }

/* ---------------------------------------------------------------
   Les emplacements latéraux

   Ils reçoivent une photo du couple quand il en a déposé, sinon une
   vraie pièce de sa papeterie, dessinée par le même moteur que celui
   qui part à l'impression.
--------------------------------------------------------------- */

/* Un emplacement resté vide (ni photo déposée, ni faire-part publié)
   ne laisse pas un trou : il disparaît. */
.side-photo:empty { display: none !important; }

.side-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--r-sm);
    display: block;
}

/* Une pièce de papeterie n'est pas une photo : pas de recadrage, pas de
   coin arrondi, et l'ombre d'une carte posée sur une table. */
.side-photo.side-piece {
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
}
.side-photo.side-piece .pap-carte {
    box-shadow: 0 18px 40px rgba(38, 34, 30, 0.16), 0 2px 6px rgba(38, 34, 30, 0.10);
}