/* Page d'invitation nominative — mise en page inspirée du modèle Atelier Décor, habillée Courtoisville */

body.inv { background: linear-gradient(180deg, #f7f5f1 0%, var(--cn-fond) 40%, var(--cn-fond-2) 100%) fixed; }

.inv h2 {
  position: relative; margin: 0 0 1.6rem; padding-bottom: 0.75rem;
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--cn-ardoise);
}
.inv h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: var(--cn-or); }

.inv-chargement { padding: 4rem 1rem; text-align: center; }

/* ---------- Bandeau : la mer d'un côté, l'invitation de l'autre */
.inv-hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--cn-carte); color: var(--cn-ardoise);
  border-bottom: 1px solid var(--cn-ligne);
}
.inv-hero-media {
  position: relative; overflow: hidden;
  min-height: min(70vh, 640px);
  background: #15355c; /* bleu marine de l'affiche 2026 */
}
.inv-hero-media img.inv-affiche { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.inv-hero-contenu {
  align-self: center; justify-self: center; text-align: center;
  max-width: 34rem; padding: clamp(2.25rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
}
.inv-hero-logo { width: clamp(170px, 40vw, 230px); margin: 0 auto 2rem; }
.inv-surtitre {
  display: block; margin: 0 0 1.5rem; padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--cn-ligne);
}
.inv-bonjour { margin: 0 0 0.5rem; font-size: 1rem; color: var(--cn-texte); }
.inv-titre {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 6.4vw, 3.4rem); line-height: 1.02; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--cn-ardoise); font-weight: 700; text-wrap: balance;
}
.inv-accroche { margin: 0 auto 2.25rem; max-width: 34ch; font-size: 1.05rem; color: var(--cn-texte); }
.inv-accroche:empty { display: none; }
.inv-date {
  display: inline-flex; flex-direction: column; gap: 0.15rem; margin: 0; padding: 1rem 0 0;
  border-top: 2px solid var(--cn-or);
  font-family: var(--cn-police-titre); font-weight: 700; font-size: clamp(1.05rem, 3.4vw, 1.4rem); color: var(--cn-ardoise);
}
.inv-date-heure { font-family: var(--cn-police-corps); font-weight: 400; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cn-or-fonce); }

@media (max-width: 860px) {
  .inv-hero { grid-template-columns: 1fr; }
  .inv-hero-media { min-height: 0; aspect-ratio: 16 / 9; }
  .inv-hero-media img.inv-affiche { position: static; height: auto; object-fit: contain; }
  .inv-hero-contenu { justify-self: stretch; max-width: none; padding: clamp(1.75rem, 7vw, 2.5rem) clamp(1.25rem, 6vw, 2rem) clamp(2rem, 8vw, 3rem); }
}

/* ---------- Page et cartes */
.inv-page { display: grid; gap: 1.25rem; max-width: 720px; margin: 0 auto; padding: 1.25rem clamp(1rem, 4vw, 1.5rem) 3rem; }
.inv-carte { padding: clamp(1.5rem, 5vw, 2.5rem); background: var(--cn-carte); border: 1px solid var(--cn-ligne); }
.inv-message p { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.75; }
.inv-message p:last-child { margin-bottom: 0; }
.inv-erreur { margin-top: 2rem; border-top: 3px solid var(--cn-or); text-align: center; }
.inv-erreur .inv-hero-logo { margin: 0 auto 1.25rem; }
.inv-accueil-affiche { margin: 0 0 1.5rem; }
.inv-accueil-affiche img { width: 100%; }
.inv-accueil-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 1.5rem 0 0.5rem; }

/* ---------- Réponse */
.inv-reponse { border-top: 3px solid var(--cn-or); }
.inv-nominatif { margin: 0 0 0.4rem; text-align: center; font-size: 0.9rem; color: #6f6a62; }
.inv-nom-invite {
  margin: 0 0 0.2rem; text-align: center;
  font-family: var(--cn-police-titre); font-weight: 700; font-size: clamp(1.3rem, 5vw, 1.8rem); color: var(--cn-ardoise);
}
.inv-entreprise { margin: 0 0 1.25rem; text-align: center; color: var(--cn-or-fonce); }
.inv-entreprise:empty { display: none; }
.inv-statut:empty { display: none; }
.inv-statut { margin: 0 0 1rem; padding: 0.9rem 1.1rem; background: var(--cn-fond); border-left: 4px solid var(--cn-or); }
.inv-statut-oui { background: var(--cn-ok-fond); border-left-color: var(--cn-ok); color: var(--cn-ok); }
.inv-statut-non { background: var(--cn-non-fond); border-left-color: var(--cn-non); color: var(--cn-non); }
.inv-boutons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1rem; }
.inv-boutons .cn-bouton { flex: 1 1 14rem; min-height: 54px; }
.inv-alerte { margin: 0; padding: 0.75rem 1rem; background: var(--cn-alerte-fond); border-left: 4px solid var(--cn-alerte); }
.inv-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

/* ---------- Programme, infos pratiques, lieu */
.inv-programme { margin: 0; padding: 0; list-style: none; }
.inv-programme li { display: grid; grid-template-columns: 5.5rem 1fr; column-gap: 1rem; padding: 0.8rem 0; border-top: 1px solid var(--cn-ligne); }
.inv-programme li:first-child { border-top: 0; padding-top: 0; }
.inv-programme li.sans-heure { grid-template-columns: 1fr; }
.inv-programme-heure { font-family: var(--cn-police-titre); font-weight: 700; color: var(--cn-or-fonce); }
.inv-programme-titre { font-weight: 600; color: var(--cn-encre); }
.inv-pratique dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.25rem; margin: 0; }
.inv-pratique dt { font-family: var(--cn-police-titre); font-weight: 600; color: var(--cn-ardoise); }
.inv-pratique dd { margin: 0; }
.inv-lieu-nom { margin: 0; font-family: var(--cn-police-titre); font-weight: 700; font-size: 1.15rem; color: var(--cn-encre); }
.inv-lieu-adresse { margin: 0.2rem 0 0.5rem; }
.inv-itineraires { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0.75rem; }

/* ---------- Pied */
.inv-pied { padding: 2.5rem 1rem 3rem; text-align: center; color: #cfd6d9; background: var(--cn-ardoise); }
.inv-pied-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 3rem; margin: 0 auto 1.25rem; }
.inv-pied-logos img { width: min(200px, 60vw); margin: 0; }
.inv-pied-logos img.inv-pied-rdr { width: min(130px, 36vw); }

/* Barre haute de la page d'accueil : lien vers le site et accès administration */
.inv-barre-haut { display: flex; justify-content: flex-end; align-items: center; gap: 1.25rem; max-width: 720px; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 1.5rem) 0; }
.inv-barre-haut > a:first-child { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--cn-or-fonce); }
.inv-barre-haut > a:first-child:hover { color: var(--cn-encre); }

/* Bouton anime : reflet qui glisse toutes les quelques secondes, leger soulevement au survol */
.cn-bouton.anime { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 8px 22px -12px rgba(175, 151, 119, 0.9); transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.2s, border-color 0.2s; }
.cn-bouton.anime::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: skewX(-20deg); animation: cn-reflet 3.6s ease-in-out infinite; pointer-events: none;
}
.cn-bouton.anime:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(175, 151, 119, 1); }
@keyframes cn-reflet { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.inv-pied p { margin: 0 0 0.6rem; }
.inv-pied .cn-discret { color: #9aa6ab; }
.inv-pied a { color: var(--cn-or); }

@media (prefers-reduced-motion: reduce) {
  .inv *, .inv *::before, .inv *::after { animation: none !important; transition: none !important; }
}
@media print {
  body.inv { background: #fff; }
  .inv-hero-media, .inv-pied, .inv-boutons, .inv-actions, .inv-itineraires { display: none !important; }
  .inv-hero { grid-template-columns: 1fr; border: 0; }
  .inv-carte { border: 1px solid #000; break-inside: avoid; }
}