/* Police des titres : déclarée en variable pour que le choix de thème
   la remplace partout d'un coup. Énumérer les sélecteurs obligeait à
   compléter la liste à chaque nouvelle règle — et c'est exactement ce
   qui a laissé des empattements sur le thème convivial. */
:root { --police-titre: 'Cormorant Garamond', Georgia, serif; }


/* Déclinaisons translucides de la couleur d'accent. Déclarées en clair
   plutôt que calculées : color-mix() n'est pas reconnu des navigateurs
   un peu anciens, et une déclaration ignorée ferait disparaître fonds
   et filets sans prévenir. */
:root {
  --gold-a5: rgba(201, 169, 110, .05);
  --gold-a6: rgba(201, 169, 110, .06);
  --gold-a12: rgba(201, 169, 110, .12);
  --gold-a15: rgba(201, 169, 110, .15);
  --gold-a20: rgba(201, 169, 110, .20);
  --gold-a30: rgba(201, 169, 110, .30);
  --gold-a35: rgba(201, 169, 110, .35);
}
/* public/css/app.css */

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

html { scroll-behavior: smooth; }

body {
  background: var(--light);
  color: var(--charcoal);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

/* ── HERO PHOTO ───────────────────────────────────── */
.hero {
  width: 100%;
  /* Hauteur réglable par événement ; 42vh reste le défaut.
     Le minimum en pixels évite un en-tête écrasé sur un écran bas,
     et le maximum garde une amorce du contenu visible : un visuel
     plein écran sans rien en dessous laisse croire à une page vide. */
  height: var(--hero-h, 42vh);
  min-height: 300px;
  max-height: 92vh;
  overflow: hidden;
}

.hero-photo {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* ── HERO CARD ────────────────────────────────────── */
.hero-card {
  position: relative;
  z-index: 10;
  max-width: 860px;
  margin: -35vh auto 0;
  background: #FCF9F5;
  border-radius: 2px;
  padding: 32px 48px 28px;
  text-align: center;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.10);
}

.hero-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
  
}

.hero-sender {
  font-size: 13px; color: var(--slate); letter-spacing: 0.04em;
  margin-bottom: 24px;
  
}
.hero-sender strong { color: var(--charcoal); font-weight: 500; }

.hero-sender-bottom {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--gold-a12);
  font-family: var(--police-titre);
  font-size: 15px;
  font-style: italic;
  color: var(--slate);
  text-align: center;
}
.hero-sender-bottom strong { color: var(--charcoal); font-weight: 500; font-style: normal; }

.hero-title { font-family: var(--police-titre);
  font-size: clamp(40px, 6vw, 80px); font-weight: 400; line-height: 1; color: var(--charcoal);
  margin-bottom: 8px; 
}
.hero-title em { font-style: italic; color: var(--gold); }

.hero-subtitle {
  font-family: var(--police-titre);
  font-size: clamp(16px, 2vw, 22px); font-weight: 400; font-style: italic;
  color: var(--slate); margin-bottom: 40px;
  
}

.hero-meta {
  display: flex; justify-content: center; gap: 48px; flex-wrap: wrap;
  padding: 24px 0; border-top: 1px solid var(--gold-a20); border-bottom: 1px solid var(--gold-a20);
  margin-bottom: 24px;
  
}
.hero-meta-item { text-align: center; }
.hero-meta-item .label {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 4px;
}
.hero-meta-item .value {
  font-family: var(--police-titre); font-size: 20px; font-weight: 400; color: var(--charcoal);
}

.hero-cobranding {
  margin-bottom: 20px; font-size: 12px; letter-spacing: 0.1em;
  color: var(--slate);
  
}

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

/* ── HERO LOGOS ───────────────────────────────────── */
.hero-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--gold-a15);
  margin-bottom: 24px;
  
}

.hero-logo {
  display: block;
  object-fit: contain;
}
.hero-logo--partner {
  max-height: 40px;
  max-width: 160px;
}
.hero-logo--l2d {
  max-height: 32px;
  max-width: 160px;
}

.hero-logos-sep {
  font-size: 16px;
  color: var(--slate-light);
  font-weight: 400;
  line-height: 1;
}

@media (max-width: 560px) {
  .hero-card { margin: -48px 16px 0; padding: 32px 24px 28px; }
  .hero-logo--partner { max-height: 32px; }
  .hero-logo--l2d { max-height: 26px; }
}


.description {
  max-width: 720px; margin: 0 auto; padding: 80px 24px 64px;
  text-align: center; border-bottom: 1px solid var(--gold-a20);
}
.description p {
  font-family: var(--police-titre);
  font-size: clamp(17px, 2vw, 20px); font-weight: 400; line-height: 1.75; color: var(--slate);
}
.description p + p { margin-top: 20px; }
.description p strong { color: var(--charcoal); font-weight: 500; }

/* ── ALERTES ──────────────────────────────────────── */
.alert-error {
  background: #faeaea;
  border: 1px solid #f0bcbc;
  border-radius: 3px;
  color: #a04040;
  font-size: 13px;
  padding: 12px 16px;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ── FORM SECTION ─────────────────────────────────── */
/* ── ÉDITO ────────────────────────────────────────── */
.edito-block {
  max-width: 860px;
  margin: 0 auto 64px;
  padding: 0 24px;
}

.edito-inner {
  border-top: 1px solid var(--gold-a20);
  padding-top: 48px;
  text-align: center;
}

h2.edito-lead, .edito-lead {
  font-family: var(--police-titre);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 400;
  color: var(--gold);
  line-height: 1.3;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--gold-a20);
  max-width: none;
}

.edito-inner p {
  font-family: var(--police-titre);
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 400;
  color: var(--slate);
  line-height: 1.85;
  max-width: 640px;
  margin: 0 auto;
}
.edito-inner p + p { margin-top: 16px; }
.edito-inner em { font-style: italic; color: var(--charcoal); }

/* ── FORM SECTION ─────────────────────────────────── */
/* ── HERO CONFIRMATION ────────────────────────────── */
.hero-confirmation {
  margin-top: 32px;
  padding-top: 32px;
  text-align: center;
}
.hero-confirm-icon {
  width: 52px; height: 52px;
  border: 1px solid var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-size: 22px; color: var(--gold);
}
.hero-confirm-icon--wait    { border-color: var(--slate);       color: var(--slate);       font-size: 18px; }
.hero-confirm-icon--decline { border-color: var(--slate-light); color: var(--slate-light); font-size: 20px; }
.hero-confirm-title {
  font-family: var(--police-titre);
  font-size: clamp(20px, 2.5vw, 26px); font-weight: 400;
  color: var(--charcoal); margin-bottom: 14px;
}
.hero-confirm-text {
  font-family: var(--police-titre);
  font-size: clamp(15px, 1.8vw, 18px); color: var(--slate);
  line-height: 1.8; max-width: 560px; margin: 0 auto;
}
.hero-confirm-contact {
  margin-top: 16px; font-size: 13px; color: var(--slate-light);
}
.hero-confirm-contact a { color: var(--gold); text-decoration: none; }
.hero-confirm-contact a:hover { text-decoration: underline; }

.hero-intro {
  margin-top: 22px;
  padding-top: 0;
  border-top: none;
  text-align: center;
}
.hero-intro p {
  font-family: var(--police-titre);
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 400;
  color: var(--slate);
  line-height: 1.85;
  max-width: 640px;
  margin: 0 auto;
}
.hero-intro p + p { margin-top: 10px; }

.form-section { max-width: 620px; margin: 0 auto; padding: 64px 24px 80px; }

/* ── LOGOS PARTENAIRES (sous le formulaire, page L2D) ── */
.partners-section {
  max-width: 860px;
  margin: 0 auto 56px;
  padding: 40px 24px 0;
  border-top: 1px solid var(--gold-a20);
  text-align: center;
}
.partners-eyebrow {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 28px;
}
.partners-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 36px 48px;
}
.partner-logo {
  display: block;
  max-height: 46px;
  max-width: 150px;
  object-fit: contain;
  opacity: 0.78;
  filter: grayscale(100%);
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.partner-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
}
@media (max-width: 560px) {
  .partners-logos { gap: 28px 32px; }
  .partner-logo { max-height: 38px; max-width: 120px; }
}


.section-eyebrow {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); text-align: center; margin-bottom: 12px;
}
.section-title {
  font-family: var(--police-titre);
  font-size: clamp(28px, 4vw, 40px); font-weight: 400;
  text-align: center; color: var(--charcoal); margin-bottom: 40px;
}

/* Banners */
.complet-banner, .decline-banner, .confirmation-block {
  background: var(--light-2); border: 1px solid var(--gold-a30);
  border-radius: 4px; padding: 32px 28px; text-align: center; margin-bottom: 32px;
}
.decline-banner { border-color: rgba(180,172,165,0.4); }
.complet-title, .decline-title, .confirm-title {
  font-family: var(--police-titre); font-size: 24px; font-weight: 400;
  color: var(--gold); margin-bottom: 12px;
}
.decline-title { color: var(--charcoal); }
.complet-banner p, .decline-banner p, .confirmation-block p {
  font-size: 14px; color: var(--slate); line-height: 1.7;
}
.complet-banner a, .decline-banner a, .confirmation-block a { color: var(--gold); text-decoration: none; }
.complet-banner a:hover, .decline-banner a:hover, .confirmation-block a:hover { text-decoration: underline; }

.confirmation-icon {
  width: 48px; height: 48px; border: 1px solid var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px; font-size: 20px; color: var(--gold);
}

/* Form elements */
#inscription-form { display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate);
}

input[type="text"], input[type="email"], input[type="tel"] {
  background: #FFFFFF; border: 1px solid rgba(180,172,165,0.6); border-radius: 2px;
  color: var(--charcoal); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400;
  padding: 12px 14px; transition: border-color 0.2s; outline: none; width: 100%;
}
input:focus { border-color: var(--gold); }
input::placeholder { color: var(--slate-light); }
input.invalid { border-color: var(--error); }

.field-note { font-size: 11px; color: var(--slate-light); font-style: italic; }
.field-error { font-size: 11px; color: var(--error); display: block; margin-top: 2px; }

/* Companion */
.companion-block {
  background: var(--light-2); border: 1px solid rgba(180,172,165,0.35);
  border-radius: 3px; padding: 20px; display: flex; flex-direction: column; gap: 16px;
}
.companion-toggle {
  display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
}
.companion-toggle input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--gold); cursor: pointer;
}
.companion-toggle span { font-size: 13px; color: var(--charcoal); text-transform: none; letter-spacing: 0; }
.badge {
  background: var(--gold-a12); color: var(--gold);
  font-size: 10px; padding: 2px 6px; border-radius: 8px; letter-spacing: 0.06em; margin-left: 4px;
}
.companion-fields { display: flex; flex-direction: column; gap: 16px; }

/* Remboursement */
.remboursement-note {
  font-size: 12px; color: var(--slate); line-height: 1.7;
  padding: 12px 14px; background: var(--gold-a5);
  border-left: 2px solid var(--gold-a35);
}
.remboursement-note strong { color: var(--charcoal); font-weight: 400; }

/* CGU */
.cgu-block { border: 1px solid rgba(180,172,165,0.35); border-radius: 3px; overflow: hidden; }
.cgu-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; cursor: pointer; background: var(--light-2);
  transition: background 0.2s; width: 100%; border: none; color: inherit; text-align: left;
}
.cgu-header:hover { background: var(--gold-a6); }
.cgu-header span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.cgu-chevron { color: var(--gold); font-size: 14px; transition: transform 0.3s; }
.cgu-chevron.open { transform: rotate(180deg); }
.cgu-content {
  padding: 20px 16px; font-size: 12px; color: var(--slate); line-height: 1.7;
  background: #FFFFFF; max-height: 260px; overflow-y: auto;
}
.cgu-content h4 {
  font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold); margin: 16px 0 6px;
}
.cgu-content h4:first-child { margin-top: 0; }
.cgu-content a { color: var(--gold); }

/* Checkboxes */
.checkbox-group { display: flex; align-items: flex-start; gap: 10px; }
.checkbox-group input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
  accent-color: var(--gold); cursor: pointer;
}
.checkbox-group label {
  font-size: 12px; letter-spacing: 0; text-transform: none;
  color: var(--slate); line-height: 1.6; cursor: pointer;
}
.link-btn {
  background: none; border: none; color: var(--gold); text-decoration: none;
  cursor: pointer; font-size: 12px; padding: 0; font-family: inherit;
}
.link-btn:hover { text-decoration: underline; }

/* Submit */
.btn-submit {
  background: transparent; border: 1px solid var(--gold); color: var(--gold);
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 16px 32px; cursor: pointer; transition: background 0.25s, color 0.25s;
  border-radius: 2px; width: 100%; margin-top: 8px;
}
.btn-submit:hover { background: var(--gold); color: #FFFFFF; }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Footer */
.site-footer {
  border-top: 1px solid rgba(180,172,165,0.3);
  padding: 32px 24px; text-align: center;
}
.site-footer p { font-size: 11px; color: var(--slate-light); letter-spacing: 0.06em; }
.site-footer p + p { margin-top: 8px; }
.site-footer a { color: var(--gold); text-decoration: none; }

/* ── RESPONSIVE ───────────────────────────────────── */
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
  .hero-meta { gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── HERO CTA BUTTONS ─────────────────────────────── */
.hero-cta {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.btn-hero {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 2px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  cursor: pointer;
  white-space: nowrap;
}

.btn-hero--primary {
  background: var(--gold);
  color: #FFFFFF;
  border: 1px solid var(--gold);
}
.btn-hero--primary:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
}

.btn-hero--secondary {
  background: transparent;
  color: var(--slate);
  border: 1px solid rgba(90,85,80,0.4);
}
.btn-hero--secondary:hover {
  border-color: var(--slate);
  color: var(--charcoal);
}

.hero-cta-done {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 14px 0;
  display: inline-block;
}
.hero-cta-done--declined {
  color: var(--slate);
}

/* ── DÉCLIN – confirmation ───────────────────────── */
#decline-form .form-group {
  text-align: left;
  margin-top: 16px;
}

.decline-confirm-block {
  background: var(--light-2);
  border: 1px solid rgba(180,172,165,0.35);
  border-radius: 4px;
  padding: 32px 28px;
  text-align: center;
}

.decline-intro {
  font-family: var(--police-titre);
  font-size: 18px;
  color: var(--slate);
  line-height: 1.7;
  margin-bottom: 24px;
}

.decline-recap {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding: 12px 20px;
  background: var(--gold-a6);
  border-radius: 2px;
}
.decline-recap span {
  font-size: 13px;
  color: var(--charcoal);
}
.decline-recap span + span::before {
  content: '·';
  margin-right: 16px;
  color: var(--slate-light);
}

.decline-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 32px;
}

.btn-decline-confirm,
.btn-decline-cancel {
  width: 100%;
  max-width: 280px;
  text-align: center;
}

.btn-decline-confirm {
  background: transparent;
  border: 1px solid rgba(180,172,165,0.5);
  color: var(--slate);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  width: 100%;
  max-width: 320px;
}
.btn-decline-confirm:hover {
  border-color: var(--slate);
  color: var(--charcoal);
}

.btn-decline-cancel {
  display: inline-block;
  background: var(--gold);
  color: #FFFFFF;
  border: 1px solid var(--gold);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.25s;
  width: 100%;
  max-width: 320px;
}
.btn-decline-cancel:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
}

/* ── DÉCLIN – résultat confirmé ──────────────────── */
.decline-confirmed-block p {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.7;
}

@media (max-width: 560px) {
  .hero-cta { flex-direction: column; align-items: center; }
  .btn-hero { width: 100%; max-width: 300px; text-align: center; }
}

/* ── INTRO ÉLÉGANTE ───────────────────────────────── */
.intro-elegante {
  max-width: 620px;
  margin: 0 auto;
  padding: 64px 24px 0;
  text-align: center;
}

.intro-chapeau {
  font-family: var(--police-titre);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 400;
  font-style: italic;
  color: var(--gold);
  line-height: 1.5;
  margin-bottom: 20px;
}

.intro-elegante p {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.8;
}
.intro-elegante p + p { margin-top: 12px; }

/* ── LIENS DANS LA PAGE ───────────────────────────── */
.hero-lieu-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(201,169,110,0.4);
  transition: border-color 0.2s;
}
.hero-lieu-link:hover { border-color: var(--gold); }

.description-link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-a30);
  transition: border-color 0.2s, color 0.2s;
}
.description-link:hover { color: var(--gold-dark); border-color: var(--gold-dark); }

.footer-link-perruche {
  color: var(--slate-light);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}
.footer-link-perruche:hover { color: var(--gold); }

/* ── LOADING OVERLAY ─────────────────────────────── */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(252, 249, 245, 0.93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.loading-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

.loading-spinner {
  width: 44px;
  height: 44px;
  border: 2px solid var(--gold-a20);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

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

.loading-text {
  color: var(--charcoal);
  font-family: var(--police-titre);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0 24px;
}

.loading-sub {
  color: var(--slate);
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: -18px;
}

/* ── Lien "décliner" sous le formulaire ───────────────── */
.decline-after-form { text-align: center; margin: 26px auto 4px; }
.decline-link {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-a35);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.decline-link:hover { color: var(--gold); border-color: var(--gold); }

/* ── Flèche flottante "scroller vers le formulaire" ───── */
.scroll-cue {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin: 16px auto 0;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px var(--gold-a35);
  animation: scrollCueFloat 2.4s ease-in-out infinite;
  transition: background .2s ease, box-shadow .2s ease;
}
.scroll-cue-arrow { display: block; }
.scroll-cue:hover { background: var(--charcoal); box-shadow: 0 8px 22px rgba(0,0,0,0.22); }
@keyframes scrollCueFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
}

/* Bandeau des événements de test (page publique) */
.ev-test-bandeau { position:relative; z-index:11; max-width:860px; margin:-35vh auto 0;
  background:#4a3a18; color:#f0dcae; font-size:12px; letter-spacing:.04em; text-align:center;
  padding:8px 16px; border-radius:2px 2px 0 0; }
.ev-test-bandeau + .hero-card { margin-top:0; }

/* ── RESPONSIVE (complément) ──────────────────────────────────
   Les blocs publics respirent beaucoup en grand écran (80px de
   marge verticale) : sur téléphone, cela oblige à faire défiler
   longuement avant d'atteindre le contenu. On resserre. */
@media (max-width: 700px) {
  .description   { padding: 44px 20px 36px; }
  .form-section  { padding: 36px 20px 48px; }
  .site-footer   { padding: 24px 16px; }
}

@media (max-width: 560px) {
  .description   { padding: 32px 16px 28px; }
  .form-section  { padding: 28px 16px 40px; }
  /* Le bandeau des événements de test ne doit pas remonter hors écran. */
  .ev-test-bandeau { margin-top: -28vh; font-size: 11px; }
}


/* ── Attribut hidden ──────────────────────────────────────────
   Une règle d'auteur comme « display: flex » l'emporte sur la règle
   native du navigateur : un élément marqué hidden restait alors visible.
   C'est ce qui masquait l'aperçu caméra derrière un voile opaque. */
[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════
   PAGE D'INSCRIPTION — compte à rebours, plan d'accès, FAQ
   ════════════════════════════════════════════════════════════ */

/* ── Compte à rebours ── */
.cpt-section { background: var(--gold, var(--gold)); color: #fff; padding: 44px 24px; text-align: center; }
.cpt-wrap { max-width: 720px; margin: 0 auto; }
.cpt-titre { font-size: 26px; font-weight: 600; letter-spacing: .01em; }
.cpt-sub { font-size: 14px; opacity: .82; margin-top: 6px; }
.cpt-grille { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.cpt-bloc { flex: 0 1 110px; background: rgba(255,255,255,.16); border-radius: 10px; padding: 16px 8px; }
.cpt-bloc b { display: block; font-size: 38px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; }
.cpt-bloc span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  opacity: .8; margin-top: 6px; }
.cpt-limite { font-size: 14px; margin-top: 22px; opacity: .92; }
.cpt-section.is-fini .cpt-grille { opacity: .5; }

/* ── Plan d'accès ── */
.plan-section { padding: 48px 24px; background: var(--cream, #f7f4ef); }
.plan-wrap { max-width: 720px; margin: 0 auto; text-align: center; }
.plan-titre { font-size: 24px; font-weight: 500; color: var(--ink, #1a1714); margin: 0 0 6px; }
.plan-lieu { font-size: 15px; color: #6b6560; margin: 0 0 16px; }
.plan-lien { display: inline-block; border: 1px solid var(--gold, var(--gold)); color: #8B6840;
  border-radius: 4px; padding: 11px 22px; text-decoration: none; font-size: 14px; }
.plan-lien:hover { background: var(--gold, var(--gold)); color: #fff; }

/* ── Questions fréquentes ── */
.faq-section { padding: 48px 24px 64px; }
.faq-wrap { max-width: 720px; margin: 0 auto; }
.faq-titre { font-size: 24px; font-weight: 500; color: var(--ink, #1a1714); margin: 0 0 18px; text-align: center; }
.faq-item { border-bottom: 1px solid rgba(0,0,0,.08); padding: 4px 0; }
.faq-item summary { cursor: pointer; padding: 14px 4px; font-size: 16px; font-weight: 600;
  color: var(--ink, #1a1714); list-style: none; position: relative; padding-right: 30px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 6px; top: 12px;
  font-size: 20px; font-weight: 400; color: var(--gold, var(--gold)); }
.faq-item[open] summary::after { content: '−'; }
.faq-rep { padding: 0 4px 16px; font-size: 15px; line-height: 1.65; color: #5f5950; }

@media (max-width: 560px) {
  .cpt-section { padding: 34px 16px; }
  .cpt-titre { font-size: 21px; }
  .cpt-grille { gap: 6px; }
  .cpt-bloc { padding: 12px 4px; }
  .cpt-bloc b { font-size: 27px; }
  .cpt-bloc span { font-size: 9.5px; }
  .plan-section, .faq-section { padding: 34px 16px; }
}

/* ════════════════════════════════════════════════════════════
   THÈME « FUN » — charte des maquettes Juris'Cup
   Corail et pêche, angles arrondis, titres en bleu profond.

   Tout passe par la surcharge des variables : la structure des
   pages reste identique, seul l'habillage change. Un thème ne
   doit pas dupliquer la mise en page, sinon les deux divergent
   au premier correctif.
   ════════════════════════════════════════════════════════════ */
body.tpl-fun {
  --gold:        #EE8B72;   /* corail : accents, boutons, traits */
  --gold-light:  #FBE3D5;   /* pêche : fonds de section */
  --gold-dark:   #D96A4E;
  --light:       #FEF7F3;
  --light-2:     #FBE3D5;
  --charcoal:    #2A3192;   /* bleu profond : titres */
  --slate:       #4A4F86;
  --slate-light: #8E93B8;
}
body.tpl-fun {
  --gold-a5: rgba(238, 139, 114, .05);
  --gold-a6: rgba(238, 139, 114, .06);
  --gold-a12: rgba(238, 139, 114, .12);
  --gold-a15: rgba(238, 139, 114, .15);
  --gold-a20: rgba(238, 139, 114, .20);
  --gold-a30: rgba(238, 139, 114, .30);
  --gold-a35: rgba(238, 139, 114, .35);
}


/* ── Typographie ──
   La charte classique repose sur une serif (Cormorant Garamond) pour les
   titres ; la charte conviviale lui substitue Outfit, sans empattement,
   aux formes géométriques et plus larges — le contraste entre les deux
   présentations tient autant à la police qu'aux couleurs. */
.tpl-fun,
.tpl-fun body {
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  /* Une seule ligne suffit désormais à supprimer tout empattement. */
  --police-titre: 'Outfit', system-ui, sans-serif;
}

.tpl-fun h1, .tpl-fun h2, .tpl-fun h3,
.tpl-fun .hero-title,
.tpl-fun .hero-eyebrow,
.tpl-fun .form-title,
.tpl-fun .faq-titre,
.tpl-fun .plan-titre,
.tpl-fun .cpt-titre,
.tpl-fun .description h2,
.tpl-fun .hero-meta-value {
  font-family: 'Outfit', system-ui, sans-serif;
  font-style: normal;            /* la serif employait des italiques */
  letter-spacing: -0.015em;      /* resserrement propre aux géométriques */
}


.tpl-fun .form-title, .tpl-fun .faq-titre, .tpl-fun .plan-titre { font-weight: 600; }
.tpl-fun .hero-title em { font-style: normal; font-weight: 700; }

/* Corps de texte : mêmes formes, un rien plus aéré. */
.tpl-fun p, .tpl-fun label, .tpl-fun .faq-rep { font-family: 'Outfit', 'Inter', system-ui, sans-serif; }
.tpl-fun .faq-rep { line-height: 1.7; }

/* Rondeur générale : c'est ce qui distingue le plus les deux chartes. */
.tpl-fun .hero-card,
.tpl-fun .form-section form,
.tpl-fun .cpt-bloc,
.tpl-fun .plan-lien,
.tpl-fun .evp-card { border-radius: 18px; }

.tpl-fun .btn-primary,
.tpl-fun .hero-cta,
.tpl-fun .plan-lien { border-radius: 999px; }

/* Titres : le bleu du brief, plus affirmé que le doré. */
.tpl-fun .hero-title,
.tpl-fun .form-title,
.tpl-fun .faq-titre,
.tpl-fun .plan-titre { color: #2A3192; font-weight: 700; }

/* Le compte à rebours reprend le bloc corail des maquettes. */
.tpl-fun .cpt-section { background: #EE8B72; }
.tpl-fun .cpt-bloc { background: rgba(255,255,255,.24); }
.tpl-fun .cpt-titre { font-weight: 700; }

/* Sections alternées pêche / blanc, comme sur les captures. */
.tpl-fun .description { background: #FBE3D5; }
.tpl-fun .plan-section { background: #FEF7F3; }
.tpl-fun .faq-item summary { color: #2A3192; }
.tpl-fun .faq-item summary::after { color: #EE8B72; }

/* Pied de page assorti. */
.tpl-fun .site-footer { background: #2A3192; }
.tpl-fun .site-footer p,
.tpl-fun .site-footer a { color: #D9DBF0; }
.collab-solo { font-size: 14px; color: #6b6560; background: var(--light-2, #F5F1EA);
  border-radius: 8px; padding: 12px 14px; margin: 4px 0 18px; }
.tpl-fun .collab-solo { border-radius: 14px; }

/* ── Thème convivial : ajustements de la page d'inscription ──
   Outfit est nettement plus grasse et plus large que la serif : à
   taille égale, le titre écrase le reste. On le réduit, on allège
   la graisse, et on rend au bandeau de test sa discrétion.
   ── */
.tpl-fun .hero-title {
  font-size: clamp(30px, 4vw, 52px);   /* au lieu de 40–80px */
  font-weight: 600;                    /* 700 était trop appuyé */
  line-height: 1.08;
}

/* Le bandeau « événement de test » est une mention de service :
   il ne doit pas rivaliser avec le contenu. */
.tpl-fun .ev-test-bandeau,
.ev-test-bandeau {
  background: rgba(30, 26, 20, .72);
  color: #efe6d4;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 7px 14px;
  border-radius: 6px 6px 0 0;
  text-align: center;
  backdrop-filter: blur(2px);
}
.tpl-fun .ev-test-bandeau { border-radius: 16px 16px 0 0; }

/* Respiration entre la carte d'information et le bandeau du décompte. */
.hero-card { margin-bottom: 48px; }
.cpt-section { margin-top: 0; }
.tpl-fun .hero-card { margin-bottom: 56px; }

@media (max-width: 640px) {
  .hero-card { margin-bottom: 30px; }
  .tpl-fun .hero-card { margin-bottom: 34px; }
  .tpl-fun .hero-title { font-size: clamp(26px, 7vw, 34px); }
}

/* ════════════════════════════════════════════════════════════
   AJUSTEMENTS DE LA PAGE D'INSCRIPTION
   Retours d'écran : bandeau de test trop voyant, titre trop
   imposant en thème convivial, bloc d'information collé au
   bandeau du compte à rebours.
   ════════════════════════════════════════════════════════════ */

/* ── Mention « événement de test » ──
   C'est une note de service, pas un élément de la page : elle doit
   se voir sans s'imposer. Petite étiquette centrée plutôt qu'un
   bandeau pleine largeur au-dessus de la carte. */
.ev-test-bandeau {
  display: inline-block;
  width: auto;
  max-width: min(90%, 520px);
  margin: 0 auto 14px;
  padding: 5px 14px;
  background: rgba(30, 26, 20, .58);
  color: #f2e9d9;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .03em;
  border-radius: 999px;
  text-align: center;
  box-shadow: none;
}
/* La carte reprend son ancrage : l'étiquette ne la décale plus. */
.ev-test-bandeau + .hero-card { margin-top: 0; }
.tpl-fun .ev-test-bandeau { border-radius: 999px; }

/* Conteneur centré pour l'étiquette, sans perturber la mise en page. */
.ev-test-wrap { text-align: center; margin: -35vh auto 0; position: relative; z-index: 11; }
.ev-test-wrap + .hero-card { margin-top: 12px; }

/* ── Titre du thème convivial ──
   Outfit est une géométrique large : à graisse et corps égaux, elle
   pèse bien plus que la serif d'origine. On compense. */
.tpl-fun .hero-title {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ── Respiration avant le compte à rebours ──
   Le bandeau coloré arrivait au ras du bloc d'information. */
.cpt-section { margin-top: 56px; }
.tpl-fun .cpt-section { margin-top: 64px; }

@media (max-width: 640px) {
  .tpl-fun .hero-title { font-size: clamp(24px, 6.5vw, 32px); }
  .cpt-section, .tpl-fun .cpt-section { margin-top: 34px; }
}

/* Carte du plan d'accès */
.plan-carte { border-radius: 10px; overflow: hidden; margin: 0 auto 18px; max-width: 720px;
  border: 1px solid rgba(0,0,0,.1); background: #e8e4dd; }
.plan-carte iframe { display: block; width: 100%; height: 340px; border: 0; }
.tpl-fun .plan-carte { border-radius: 18px; }
@media (max-width: 560px) { .plan-carte iframe { height: 240px; } }

/* ── Plan d'accès : carte habillée selon le thème ────────────
   Le marqueur est dessiné en SVG plutôt qu'importé : il suit
   ainsi les couleurs de la charte sans fichier supplémentaire. */
.plan-carte { padding: 0; }
#plan-carte { width: 100%; height: 340px; }

/* Repère : pastille colorée et halo pulsé, pour le retrouver d'un regard. */
.plan-pin { position: relative; width: 34px; height: 44px; cursor: pointer; }
.plan-pin svg { display: block; }
.plan-pin svg { position: relative; z-index: 2; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.plan-pin__halo {
  position: absolute; left: 50%; top: 34px; width: 26px; height: 26px;
  margin-left: -13px; border-radius: 50%; z-index: 1;
  animation: plan-halo 2.6s ease-out infinite;
}
@keyframes plan-halo {
  0%   { transform: scale(.5); opacity: .9; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Habillage classique : cadre sombre, la carte prolonge le carton d'invitation. */
.plan-carte { border: 1px solid rgba(0,0,0,.12); background: #17150f; }
#plan-carte { position: relative; }
.maplibregl-map { font-family: inherit; }
.maplibregl-canvas-container canvas { outline: none; }
.maplibregl-ctrl-attrib { font-size: 10px; background: rgba(23,21,15,.7) !important; color: #9a948a; }
.maplibregl-ctrl-attrib a { color: var(--gold, #C9A96E) !important; }
.maplibregl-ctrl-group { background: #24211a !important; box-shadow: 0 0 0 1px rgba(255,255,255,.12) !important; }
.maplibregl-ctrl-group button + button { border-top-color: rgba(255,255,255,.12) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(.85) sepia(.3); }
.maplibregl-ctrl-group button:hover { background: #2f2b22 !important; }
.maplibregl-popup-content { font-family: inherit; font-size: 13px; padding: 8px 12px; border-radius: 8px; }
/* Avis affiché sur la carte quand la clé CARTO manque ou est refusée */
.plan-avis { position: absolute; left: 10px; bottom: 10px; z-index: 5; background: rgba(255,255,255,.94); color: #6b3d3d;
  font-size: 12px; padding: 6px 10px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.15); max-width: 260px; }

/* Habillage convivial : cadre clair, commandes assorties. */
.tpl-fun .plan-carte { background: #FBEFE6; border-color: rgba(42,49,146,.14); }
.tpl-fun .maplibregl-ctrl-attrib { background: rgba(255,255,255,.78) !important; color: #6b6f9a; }
.tpl-fun .maplibregl-ctrl-attrib a { color: #2A3192 !important; }
.tpl-fun .maplibregl-ctrl-group { background: #fff !important; box-shadow: 0 0 0 1px rgba(42,49,146,.15) !important; }
.tpl-fun .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: none; }
.tpl-fun .maplibregl-ctrl-group button:hover { background: #FBE3D5 !important; }

@media (max-width: 560px) { #plan-carte { height: 250px; } }

/* Les teintes du fond de carte sont appliquées dans le style vectoriel
   (carte.js, palette par thème) : plus de voile CSS sur les tuiles. */

/* ── Ajustements du thème convivial ──
   Deux éléments gardaient une facture « papier à en-tête » : le filet
   sous le lien de désistement et l'encadré à filet gauche. Le thème
   convivial préfère des formes pleines et arrondies. */
.tpl-fun .decline-link {
  border-bottom: none;
  background: var(--gold-a12);
  border-radius: 999px;
  padding: 9px 18px;
  color: #2A3192;
  font-weight: 500;
}
.tpl-fun .decline-link:hover { background: var(--gold-a20); color: #2A3192; }

.tpl-fun .remboursement-note {
  border-left: none;
  background: var(--gold-a12);
  border-radius: 14px;
  padding: 14px 18px;
  line-height: 1.65;
}

/* ── Après inscription ───────────────────────────────────────
   Ces blocs prolongent la confirmation affichée dans la carte :
   même page, même charte, sans rupture visuelle. */
.apr-billet { max-width: 620px; margin: 0 auto 24px; font-size: 14px; line-height: 1.6;
  color: var(--slate); background: var(--gold-a5); border-radius: 10px; padding: 16px 20px; }
.apr-billet strong { display: block; color: var(--charcoal); margin-bottom: 3px; }
.apr-suivre { max-width: 620px; margin: 0 auto; text-align: center; padding: 4px 0 8px; }
.apr-suivre p { font-size: 14.5px; color: var(--slate); margin: 0 0 14px; }
.apr-btn { display: inline-block; text-decoration: none; font-size: 14px; border-radius: 4px;
  padding: 12px 24px; background: var(--charcoal); color: #f2ede6; transition: background .18s; }
.apr-btn:hover { background: #2c2721; color: #fff; }
.tpl-fun .apr-btn { border-radius: 999px; background: #2A3192; }
.tpl-fun .apr-btn:hover { background: #1f2570; }
.tpl-fun .apr-billet { border-radius: 16px; }

/* ── Section du formulaire : espacement selon le contenu ─────
   Sans cet ajustement, la section conserve la hauteur prévue pour
   un formulaire complet et repousse le plan d'accès en bas de page. */
.form-section--apres { padding-top: 28px; padding-bottom: 32px; }
.form-section--vide  { padding: 0; }
@media (max-width: 640px) {
  .form-section--apres { padding-top: 20px; padding-bottom: 24px; }
}

/* Aperçu d'un événement en brouillon (organisateurs seulement) */
.ev-brouillon { position: relative; z-index: 20; max-width: 720px; margin: 0 auto 8px;
  background: #8a1c1c; color: #ffeaea; font-size: 13px; line-height: 1.5;
  padding: 10px 16px; border-radius: 0 0 8px 8px; text-align: center; }
.ev-brouillon strong { color: #fff; }

/* ── Barre d'équipe sur les pages publiques ──────────────────
   Visible uniquement des personnes connectées. Discrète mais
   reconnaissable, et nettement distincte du contenu de la page :
   il ne faut pas une seconde d'hésitation sur ce qui est public. */
.bar-eq { background: #1C1A17; color: #d9d2c4; font-size: 13px; position: relative; z-index: 60; }
.bar-eq__in { max-width: 1100px; margin: 0 auto; padding: 8px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bar-eq a { color: #d9d2c4; text-decoration: none; border-bottom: 1px solid transparent; }
.bar-eq a:hover { color: #fff; border-bottom-color: var(--gold); }
.bar-eq__et { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: #8a6d1f; color: #fff; border-radius: 3px; padding: 3px 8px; }
.bar-eq__et--ok { background: #2f6b45; }
.bar-eq__x { color: #9a948a; font-size: 12px; }
.bar-eq__app { margin-left: auto; }
.bar-eq.is-brouillon { border-bottom: 2px solid #c9922f; }

@media (max-width: 640px) {
  .bar-eq__in { padding: 7px 14px; gap: 11px; font-size: 12px; }
  .bar-eq__x { display: none; }   /* l'étiquette « Brouillon » suffit */
  .bar-eq__app { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════
   BOUTONS DE LA PAGE PUBLIQUE — trois niveaux, pas cinq

   La page comptait cinq traitements visuels distincts, avec deux
   incohérences : le bouton d'inscription — l'action la plus
   importante — était en contour discret, tandis que « Finalement,
   je souhaite m'inscrire » s'affichait en doré plein ; et les blocs
   d'après-inscription introduisaient une troisième famille de
   couleur.

   Trois niveaux suffisent, et se lisent sans réfléchir :
     · plein doré      → l'action attendue, une seule par écran
     · contour         → l'alternative, sans rivaliser
     · texte souligné  → le repli, presque effacé

   Réglé ici plutôt que dans le balisage : les classes existantes
   sont conservées, seule leur apparence est harmonisée.
   ══════════════════════════════════════════════════════════ */

/* Socle commun : mêmes proportions, même typographie, mêmes temps
   de transition. C'est ce qui donne l'impression d'un seul jeu de
   boutons plutôt que d'un assemblage. */
/* « .apr-btn » est retiré de ce socle : il impose un border-radius de
   2px, qui annulait l'arrondi propre au thème Convivial (999px), et des
   majuscules très espacées qui ne conviennent pas à un lien de courtoisie
   comme « Nous suivre sur LinkedIn ». */
.btn-submit,
.btn-decline-cancel,
.btn-decline-confirm {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 2px;
  border: 1px solid transparent;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

/* ── Niveau 1 : l'action attendue ───────────────────────────
   L'inscription et le retour au formulaire depuis la fenêtre de
   refus. Les deux ne s'affichent jamais ensemble. */
.btn-submit,
.btn-decline-cancel {
  background: var(--gold);
  border-color: var(--gold);
  color: #FFFFFF;
  width: 100%;
}
.btn-submit:hover,
.btn-decline-cancel:hover {
  background: var(--gold-dark, #8a6d1f);
  border-color: var(--gold-dark, #8a6d1f);
  color: #FFFFFF;
}

/* ── Niveau 2 : l'alternative ───────────────────────────────
   LinkedIn, infolettre : utiles, jamais prioritaires. Le fond
   sombre est abandonné — il créait une troisième famille. */
/* En unifiant les boutons, j'avais imposé ici un contour doré. Il
   écrasait le fond bleu du thème Convivial : on obtenait du doré sur
   bleu foncé, illisible et hors charte. Ce bouton garde donc son
   apparence d'origine — fond plein, texte clair — et l'on ne reprend
   que ses proportions. */
.apr-btn {
  font-size: 12px;
  padding: 12px 26px;
}

/* ── Niveau 3 : le repli ────────────────────────────────────
   Confirmer un refus doit rester possible sans être encouragé :
   le bouton s'efface, sans jamais se cacher. */
.btn-decline-confirm {
  background: transparent;
  border-color: transparent;
  color: var(--slate);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.1em;
  text-transform: none;
  font-size: 13px;
  width: 100%;
}
.btn-decline-confirm:hover { color: var(--charcoal, #2b2622); }

/* Les deux boutons de la fenêtre de refus partagent la même largeur
   pour rester alignés sous le texte. */
.btn-decline-cancel,
.btn-decline-confirm { max-width: 320px; }

/* Rappel de la réponse déjà donnée, au retour sur un lien d'invitation.
   Même présentation que la confirmation : l'invité doit reconnaître l'état
   de sa réponse, pas découvrir un troisième habillage. */
.hero-rappel { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hero-rappel .btn-decline-confirm,
.hero-rappel .btn-decline-cancel { margin-top: 14px; max-width: 320px; }

/* ── Formulaire de refus : la hiérarchie suit l'intention ────
   Sur cette page, confirmer le refus EST l'action attendue. Le doré
   était réservé à « je viens » ; l'utiliser ici pour « annuler mon
   annulation » plaçait l'action principale sur un lien discret, et
   l'on cliquait naturellement sur le mauvais bouton.

   Le refus prend donc l'apparence d'une action pleine, mais dans un
   gris sombre plutôt qu'en doré : c'est une décision assumée, pas une
   célébration. */
.btn-decline-confirm--principal {
  background: var(--charcoal, #2b2622);
  border-color: var(--charcoal, #2b2622);
  color: #f2ede6;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  width: 100%;
}
.btn-decline-confirm--principal:hover {
  background: #1a1714;
  border-color: #1a1714;
  color: #FFFFFF;
}

/* Se raviser reste offert, sans rivaliser avec l'action de la page. */
.btn-decline-cancel--retrait {
  background: transparent;
  border-color: transparent;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 13px;
  width: 100%;
  padding: 12px 20px;
}
.btn-decline-cancel--retrait:hover { color: var(--gold-dark, #8a6d1f); background: transparent; }

/* Inscriptions closes : la mention se voit sans être alarmante. Elle
   informe, elle ne reproche rien à qui arrive trop tard. */
.hero-closed {
  display: inline-block;
  background: rgba(180, 172, 165, 0.16);
  border-left: 2px solid var(--slate);
  padding: 9px 14px;
  font-size: 14px;
  color: var(--slate);
  margin: 4px 0 0;
}

/* ══════════════════════════════════════════════════════════
   ACCESSIBILITÉ — corrections de l'audit

   Trois défauts mesurés sur les pages publiques :
     · le bouton principal n'avait que 2,45 de contraste (4,5 requis)
     · le texte atténué 2,82, les liens dorés 2,31
     · la mise au point clavier était supprimée sans remplacement

   Sur 1 044 invités, il y aura des gens qui lisent mal l'écran ou qui
   naviguent au clavier. Ces trois points les concernent directement.
   ══════════════════════════════════════════════════════════ */

/* ── Mise au point clavier ──────────────────────────────────
   « outline: none » sur les champs rendait la navigation au clavier
   invisible : on ne savait plus où l'on était dans le formulaire.
   La bordure colorée ne suffit pas — trop discrète, et invisible pour
   qui distingue mal les couleurs. */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
  border-color: var(--charcoal);
}

/* Les boutons et liens aussi : la même marque partout, pour qu'on
   apprenne à la reconnaître. */
a:focus-visible,
button:focus-visible,
.btn-submit:focus-visible,
.btn-decline-confirm:focus-visible,
.btn-decline-cancel:focus-visible,
.apr-btn:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 3px;
}

/* ── Contrastes ─────────────────────────────────────────────
   Le doré #EE8B72 est la couleur de la marque : on le garde comme
   fond, mais le texte posé dessus passe en sombre plutôt qu'en blanc.
   Le contraste passe de 2,45 à plus de 7 — et le bouton reste doré. */
.btn-submit,
.btn-decline-cancel {
  color: #2A1710;
  font-weight: 600;
}
.btn-submit:hover,
.btn-decline-cancel:hover {
  /* #D96A4E ne donnait que 3,43 avec du texte blanc. Cette teinte, à
     peine plus sombre, atteint 4,82 tout en restant dans la palette. */
  background: #B85436;
  border-color: #B85436;
  color: #FFFFFF;
}

/* Un lien doré sur fond clair est illisible (2,31). Sur les pages
   publiques, les liens prennent la couleur du texte et gardent leur
   soulignement, qui suffit à les désigner. */
.hero-intro a,
.form-section a:not([class]),
.faq-answer a {
  color: var(--slate);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hero-intro a:hover,
.form-section a:not([class]):hover,
.faq-answer a:hover { color: var(--charcoal); }

/* Le texte atténué n'atteint que 2,82 : réservé aux mentions
   décoratives, jamais à une information nécessaire. On le rapproche
   du texte courant. */
.hero-sender-bottom,
.form-hint,
input::placeholder { color: var(--slate); }

/* Lien d'évitement : hors écran, révélé à la tabulation. */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--charcoal); color: #FFFFFF;
  padding: 12px 18px; font-size: 14px; z-index: 999;
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ══════════════════════════════════════════════════════════
   Corrections d'apparence

   1. « Ouvrir dans une carte » sur le thème Convivial : le texte doré
      #8B6840 ne donne que 3,96 de contraste sur le fond rosé de ce
      thème (4,5 requis). Le survol était correct, pas l'état de repos —
      c'est-à-dire celui qu'on voit tout le temps.

   2. « Confirmer ma présence » était trop imposant : pleine largeur,
      angles droits, majuscules très espacées. Un bouton doit se voir,
      pas occuper le tiers de l'écran.
   ══════════════════════════════════════════════════════════ */

/* Le bleu de la marque, lisible sur les deux fonds du thème. */
.tpl-fun .plan-lien {
  color: var(--charcoal);
  border-color: var(--charcoal);
}
.tpl-fun .plan-lien:hover {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: #FFFFFF;
}

/* ── Bouton d'inscription : présent sans écraser ─────────────
   Il reste l'action principale — fond doré, texte sombre lisible —
   mais cesse de barrer toute la largeur. Les angles suivent le thème :
   arrondi discret sur Classique, pleinement rond sur Convivial. */
.btn-submit {
  width: auto;
  min-width: 240px;
  max-width: 100%;
  padding: 13px 34px;
  font-size: 12px;
  letter-spacing: 0.1em;
  border-radius: 4px;
}
.tpl-fun .btn-submit { border-radius: 999px; }

/* Centré dans son bloc, plutôt qu'étiré. */
.form-actions,
.form-section form > .btn-submit { text-align: center; }
.btn-submit { display: block; margin-left: auto; margin-right: auto; }

@media (max-width: 520px) {
  /* Sur petit écran la pleine largeur reprend son sens : la cible
     tactile doit rester confortable. */
  .btn-submit { width: 100%; min-width: 0; }
}

/* ── Changement de créneau (sous-événements) ──────────────────
   La bascule d'un créneau à l'autre se fait en un seul geste : la page
   nomme le créneau déjà retenu et confirme l'échange. Un enchaînement
   « annuler puis se réinscrire » laisserait au créneau visé le temps de
   se remplir. */
.chg-bloc { border: 1px solid var(--gold-a30); border-radius: 12px;
  padding: 22px 24px; background: var(--gold-a5); }
.chg-intro { font-size: 16px; line-height: 1.65; color: var(--slate); }
.chg-intro strong { color: var(--charcoal); font-weight: 500; }
.chg-actions { display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap; margin-top: 20px; }
.chg-actions .btn-submit { margin: 0; }
.chg-retour { font-size: 14px; color: var(--slate); text-decoration: underline; }
.chg-retour:hover { color: var(--charcoal); }

/* ════════════════════════════════════════════════════════════
   THÈME « CONGRÈS » — charte du Congrès de l'Ordre des experts-
   comptables (81e, « (Re)fondation des cabinets », septembre 2026).

   Indigo profond du pied de page, turquoise du bloc « empreinte
   carbone », et le dégradé du pont (vert-eau → turquoise → jaune →
   orange) repris en un seul filet signature. Montserrat pour tout.

   Même principe que le convivial : on surcharge les variables et
   quelques surfaces, jamais la structure.
   ════════════════════════════════════════════════════════════ */
body.tpl-congres {
  --gold:        #1FAFC6;   /* turquoise (un ton plus sombre que le bloc carbone, pour le contraste sur blanc) */
  --gold-light:  #DDF4F8;   /* turquoise très pâle : fonds de section */
  --gold-dark:   #12857F;   /* vert-eau du pont : survols */
  --light:       #F5F7FB;
  --light-2:     #E9EEF6;
  --charcoal:    #2A2A73;   /* indigo : titres et texte fort */
  --slate:       #4C5089;
  --slate-light: #8B8FB8;
  --cream:       #F5F7FB;

  --gold-a5:  rgba(31, 175, 198, .05);
  --gold-a6:  rgba(31, 175, 198, .06);
  --gold-a12: rgba(31, 175, 198, .12);
  --gold-a15: rgba(31, 175, 198, .15);
  --gold-a20: rgba(31, 175, 198, .20);
  --gold-a30: rgba(31, 175, 198, .30);
  --gold-a35: rgba(31, 175, 198, .35);

  /* Le dégradé du pont, déclaré une fois. */
  --congres-arc: linear-gradient(90deg, #12857F 0%, #2BC5DD 38%, #FFC20E 72%, #F28C1E 100%);
  --congres-indigo: #2A2A73;
  --congres-turquoise: #2BC5DD;

  --police-titre: 'Montserrat', 'Inter', system-ui, sans-serif;
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
}

/* ── Typographie : une seule famille, graisses marquées ── */
.tpl-congres h1, .tpl-congres h2, .tpl-congres h3,
.tpl-congres .hero-title,
.tpl-congres .hero-eyebrow,
.tpl-congres .form-title,
.tpl-congres .faq-titre,
.tpl-congres .plan-titre,
.tpl-congres .cpt-titre,
.tpl-congres .description h2,
.tpl-congres .hero-meta-value {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-style: normal;
  letter-spacing: -0.01em;
}
.tpl-congres p, .tpl-congres label, .tpl-congres .faq-rep,
.tpl-congres input, .tpl-congres select, .tpl-congres textarea, .tpl-congres button {
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
}

/* Titre : indigo, capitales serrées comme « (RE)FONDATION ». La partie
   mise en avant (<em>) passe en turquoise et perd l'italique. */
.tpl-congres .hero-title {
  color: var(--congres-indigo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(28px, 3.8vw, 50px);
  line-height: 1.08;
}
.tpl-congres .hero-title em { font-style: normal; font-weight: 400; color: var(--congres-indigo); }
.tpl-congres .hero-subtitle {
  color: #1FAFC6;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 14px;
}
.tpl-congres .hero-eyebrow,
.tpl-congres .hero-label,
.tpl-congres .hero-meta-item .label { color: var(--slate); letter-spacing: 0.18em; }
.tpl-congres .form-title,
.tpl-congres .faq-titre,
.tpl-congres .plan-titre,
.tpl-congres .cpt-titre { color: var(--congres-indigo); font-weight: 700; }

/* ── Le filet signature : le dégradé du pont en haut de la carte ── */
.tpl-congres .hero-card,
.tpl-congres .form-section form,
.tpl-congres .evp-card { border-radius: 12px; }
.tpl-congres .hero-card {
  position: relative;
  overflow: hidden;
  border-top: 0;
}
.tpl-congres .hero-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--congres-arc);
}
.tpl-congres .ev-test-bandeau { border-radius: 12px 12px 0 0; }

/* ── Boutons : turquoise plein, texte indigo, coins à 8 px ──
   (.hero-cta est le conteneur des boutons, pas un bouton : on habille
   .btn-hero, comme le socle.) */
.tpl-congres .btn-hero,
.tpl-congres .plan-lien,
.tpl-congres .apr-btn {
  font-family: 'Montserrat', 'Inter', sans-serif;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.tpl-congres .btn-hero--primary,
.tpl-congres .plan-lien {
  background: var(--congres-turquoise);
  border-color: var(--congres-turquoise);
  color: var(--congres-indigo);
}
.tpl-congres .btn-hero--primary:hover,
.tpl-congres .plan-lien:hover { background: #1493A8; border-color: #1493A8; color: #fff; }
.tpl-congres .btn-hero--secondary { color: var(--congres-indigo); border-color: rgba(42,42,115,.35); }
.tpl-congres .btn-hero--secondary:hover { border-color: var(--congres-indigo); }

/* Carte d'information sur blanc : le crème du thème classique jurerait
   avec le turquoise. */
.tpl-congres .hero-card { background: #FFFFFF; }
.tpl-congres .hero-subtitle { font-style: normal; }

/* ── Sections : alternance blanc / turquoise pâle, indigo pour le décompte ── */
.tpl-congres .description { background: #DDF4F8; }
.tpl-congres .plan-section { background: #F5F7FB; }
.tpl-congres .faq-item summary { color: var(--congres-indigo); }
.tpl-congres .faq-item summary::after { color: var(--congres-turquoise); }

.tpl-congres .cpt-section {
  background: var(--congres-indigo);
  position: relative;
}
.tpl-congres .cpt-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--congres-arc);
}
.tpl-congres .cpt-bloc { background: rgba(43,197,221,.16); border-radius: 10px; }
.tpl-congres .cpt-bloc b { color: #fff; }
.tpl-congres .cpt-bloc span { color: #BFEFF7; }
.tpl-congres .cpt-titre { color: #fff; }

/* ── Champs de formulaire : contour indigo léger, focus turquoise ── */
.tpl-congres input:not([type=checkbox]):not([type=radio]),
.tpl-congres select,
.tpl-congres textarea { border-radius: 8px; }

/* ── Pied de page : l'indigo du site du Congrès, liens clairs soulignés ── */
.tpl-congres .site-footer { background: var(--congres-indigo); position: relative; }
.tpl-congres .site-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--congres-arc);
}
.tpl-congres .site-footer p { color: #C9CCE8; }
.tpl-congres .site-footer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.tpl-congres .site-footer a:hover { color: var(--congres-turquoise); }

/* ── Carte : cadre et commandes aux couleurs du Congrès (teinte dans carte.js) ── */
.tpl-congres .plan-carte { background: #F3FBFC; border-color: rgba(42,42,115,.14); }
.tpl-congres .maplibregl-ctrl-attrib { background: rgba(255,255,255,.78) !important; color: #4a6f86; }
.tpl-congres .maplibregl-ctrl-attrib a { color: #2A2A73 !important; }
.tpl-congres .maplibregl-ctrl-group { background: #fff !important; box-shadow: 0 0 0 1px rgba(42,42,115,.15) !important; }
.tpl-congres .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: none; }
.tpl-congres .maplibregl-ctrl-group button:hover { background: #DDF4F8 !important; }

.tpl-congres .collab-solo { border-radius: 10px; }
.tpl-congres .hero-card { margin-bottom: 56px; }

@media (max-width: 640px) {
  .tpl-congres .hero-card { margin-bottom: 34px; }
  .tpl-congres .hero-title { font-size: clamp(24px, 6.5vw, 32px); }
}

/* Congrès — boutons d'action : turquoise plein, texte indigo (contraste
   ≈ 6,2), survol turquoise foncé sur blanc. Coins à 8 px. */
.tpl-congres .btn-submit,
.tpl-congres .btn-decline-cancel,
.tpl-congres .btn-decline-confirm,
.tpl-congres .apr-btn {
  font-family: 'Montserrat', 'Inter', sans-serif;
  border-radius: 8px;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.tpl-congres .btn-submit,
.tpl-congres .btn-decline-cancel {
  background: var(--congres-turquoise);
  border-color: var(--congres-turquoise);
  color: var(--congres-indigo);
}
.tpl-congres .btn-submit:hover,
.tpl-congres .btn-decline-cancel:hover {
  background: #1493A8;
  border-color: #1493A8;
  color: #FFFFFF;
}

/* ════════════════════════════════════════════════════════════
   ATELIERS — page d'un événement auquel Legal2digital participe :
   tous les ateliers, un créneau par atelier, un seul formulaire.

   Rythme : un numéro et un titre par atelier, les jours en onglets,
   des créneaux compacts, un récapitulatif avant les coordonnées.
   ════════════════════════════════════════════════════════════ */
.atl-intro { text-align: center; color: var(--slate); font-size: 15px; margin: -10px auto 30px; line-height: 1.6; max-width: 620px; }
.atl-vide  { text-align: center; color: var(--slate-light); font-size: 15px; padding: 24px 0; }
.atl-sr    { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.atl-liste { display: flex; flex-direction: column; gap: 22px; margin-bottom: 30px; }

.atl { position: relative; border: 1px solid transparent; border-radius: 14px; padding: 22px 24px 18px; margin: 0; min-width: 0;
  background: #fff; box-shadow: 0 1px 0 var(--gold-a20), 0 10px 30px -22px rgba(28,26,23,.35); transition: border-color .2s; }
.atl.a-choix { border-color: var(--gold); }
.atl.est-complet { background: var(--light); box-shadow: none; }

.atl-head { display: flex; align-items: flex-start; gap: 16px; }
.atl-num  { font-family: var(--police-titre); font-size: 40px; line-height: 1; color: var(--gold-a35); font-weight: 400; flex: 0 0 auto; letter-spacing: -.02em; margin-top: -2px; }
.atl.a-choix .atl-num { color: var(--gold); }
.atl-head-txt { flex: 1 1 auto; min-width: 0; }
.atl-titre { font-family: var(--police-titre); font-size: 24px; line-height: 1.15; color: var(--charcoal); margin: 2px 0 0; }
.atl-desc  { font-size: 14px; color: var(--slate); line-height: 1.55; margin: 6px 0 0; }
.atl-badge { flex: 0 0 auto; font-size: 13px; font-weight: 500; color: var(--slate);
  background: var(--light-2); border-radius: 20px; padding: 6px 13px; white-space: nowrap; margin-top: 4px; }
.atl.a-choix .atl-badge { background: var(--charcoal); color: #fff; font-weight: 600; }
.atl.a-choix .atl-badge::before { content: '✓  '; white-space: pre; }
.atl-badge.est-plein { background: var(--error, #C0614A); color: #fff; font-weight: 600; }

/* Onglets des jours */
.atl-jours { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 12px; border-bottom: 1px solid var(--light-2); padding-bottom: 10px; }
.atl-onglet { font: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 7px 12px; color: var(--slate); }
.atl-onglet b { font-size: 14px; font-weight: 600; color: inherit; }
.atl-onglet small { font-size: 11px; color: var(--slate-light); }
.atl-onglet:hover { background: var(--gold-a6); }
.atl-onglet.is-on { background: var(--charcoal); color: #fff; }
.atl-onglet.is-on small { color: rgba(255,255,255,.7); }
.atl-onglet.est-plein:not(.is-on) { opacity: .55; }
.atl-jour-panneau.is-off { display: none; }
.atl-jour  { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dark); margin: 16px 0 8px; }

/* Créneaux compacts : des pastilles, pas des lignes */
.atl-heures { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.atl-creneau { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px;
  border: 1px solid var(--light-2); border-radius: 10px; background: #fff; cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s; }
.atl-creneau:active { transform: scale(.98); }
.atl-creneau input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.atl-coche { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--slate-light);
  background: #fff; position: relative; transition: border-color .15s, background .15s; }
.atl-coche::after { content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.atl-creneau:hover { border-color: var(--gold-a35); background: var(--gold-a5); }
.atl-creneau.est-choisi, .atl-creneau:has(input:checked) { border-color: var(--gold); background: var(--gold-a12); }
.atl-creneau.est-choisi .atl-coche, .atl-creneau:has(input:checked) .atl-coche { border-color: var(--gold); background: var(--gold); }
.atl-creneau.est-choisi .atl-coche::after, .atl-creneau:has(input:checked) .atl-coche::after { opacity: 1; }
.atl-creneau:has(input:focus-visible) { outline: 2px solid var(--charcoal); outline-offset: 2px; }
.atl-quand  { font-size: 15px; font-weight: 500; color: var(--charcoal); white-space: nowrap; }
.atl-quand small { color: var(--slate-light); font-size: 11px; font-weight: 400; }
.atl-places { font-size: 11px; color: var(--slate-light); white-space: nowrap; padding-left: 8px; border-left: 1px solid var(--light-2); }
.atl-places.est-rare { color: var(--gold-dark); font-weight: 600; }

/* Complet ou fermé : la pastille reste, barrée, pas cliquable. */
.atl-creneau.est-indispo { cursor: default; background: var(--light); border-style: dashed; }
.atl-creneau.est-indispo:hover { border-color: var(--light-2); background: var(--light); }
.atl-creneau.est-indispo .atl-coche { border-color: var(--light-2); background: var(--light-2); }
.atl-creneau.est-indispo .atl-quand { color: var(--slate-light); text-decoration: line-through; font-weight: 400; }
.atl-places.est-plein { color: var(--error, #C0614A); font-weight: 600; }

/* Les deux options de repli : discrètes, sur une ligne. */
.atl-autres { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--light-2); }
.atl-autres .atl-creneau { border-color: transparent; background: transparent; padding: 5px 2px; }
.atl-autres .atl-creneau:hover { background: transparent; }
.atl-autres .atl-quand { font-size: 13px; font-weight: 400; color: var(--slate); white-space: normal; }
.atl-autres .atl-creneau.est-choisi, .atl-autres .atl-creneau:has(input:checked) { background: transparent; border-color: transparent; }
.atl-autres .atl-creneau--recontact.est-choisi .atl-quand, .atl-autres .atl-creneau--recontact:has(input:checked) .atl-quand { color: var(--charcoal); font-weight: 500; }
.atl.est-complet .atl-autres { border-top: 0; margin-top: 8px; }

/* Récapitulatif */
.atl-recap { display: flex; gap: 18px; align-items: flex-start; background: var(--charcoal); color: #fff; border-radius: 12px; padding: 16px 20px; margin: 0 auto 36px; max-width: 620px; }
.atl-recap-titre { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; padding-top: 3px; }
.atl-recap-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.atl-recap-liste b { font-weight: 600; }
.atl-recap-vide { color: rgba(255,255,255,.6); font-style: italic; }

.atl-titre-coord { margin-top: 8px; }
.atl-deja { font-size: 12px; color: var(--slate-light); text-align: center; margin: 14px 0 6px; line-height: 1.5; }
.form-group label small { text-transform: none; letter-spacing: 0; color: var(--slate-light); font-weight: 400; }
.hero-confirm-creneaux { list-style: none; margin: 14px auto 6px; padding: 0; display: inline-flex; flex-direction: column; gap: 6px; text-align: left; }
.hero-confirm-creneaux li { font-size: 14px; color: var(--charcoal); padding: 8px 14px; background: var(--gold-a6); border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0; }
.hero-confirm-text--attn { color: var(--error, #C0614A); }

/* Repli « être rappelé » (route conservée). */
.prg-repli { border: 1px solid var(--gold-a30); background: var(--gold-a6); border-radius: 12px; padding: 20px 24px; margin-top: 8px; text-align: center; font-size: 15px; color: var(--slate); line-height: 1.6; }
.prg-repli__t { font-family: var(--police-titre); font-size: 22px; color: var(--charcoal); margin-bottom: 6px; }
.prg-erreur { color: var(--error, #C0614A); font-size: 14px; margin-top: 6px; }

.form-section--ateliers { max-width: 780px; }
.form-section--ateliers .form-row, .form-section--ateliers .form-group, .form-section--ateliers .consents-block,
.form-section--ateliers .btn-submit { max-width: 620px; margin-left: auto; margin-right: auto; }
.form-section--ateliers .btn-submit { display: block; }
.form-section label.atl-creneau, .form-section .atl-creneau .atl-quand { text-transform: none; letter-spacing: 0; }
.form-section .atl-creneau .atl-quand { font-weight: 500; }
.form-section .atl-autres .atl-quand { font-weight: 400; }

.tpl-congres .atl { border-radius: 10px; }
.tpl-congres .atl.a-choix { border-color: var(--congres-turquoise); }
.tpl-congres .atl-num { color: #BFEFF7; }
.tpl-congres .atl.a-choix .atl-num { color: #1FAFC6; }
.tpl-congres .atl.a-choix .atl-badge { background: var(--congres-indigo); color: #fff; }
.tpl-congres .atl-onglet.is-on { background: var(--congres-indigo); }
.tpl-congres .atl-recap { background: var(--congres-indigo); }
.tpl-congres .atl-recap-titre { color: var(--congres-turquoise); }
.tpl-congres .atl-places.est-rare { color: #1493A8; }
.tpl-congres .atl-creneau.est-choisi, .tpl-congres .atl-creneau:has(input:checked) { border-color: var(--congres-turquoise); background: #DDF4F8; }
.tpl-congres .atl-creneau.est-choisi .atl-coche, .tpl-congres .atl-creneau:has(input:checked) .atl-coche { border-color: #1FAFC6; background: #1FAFC6; }
.tpl-congres .atl-autres .atl-creneau.est-choisi, .tpl-congres .atl-autres .atl-creneau:has(input:checked) { background: transparent; border-color: transparent; }
.tpl-congres .hero-confirm-creneaux li { border-left-color: var(--congres-turquoise); background: #DDF4F8; }
.tpl-fun .atl { border-radius: 18px; }
.tpl-fun .atl-onglet.is-on { background: #2A3192; }
.tpl-fun .atl-recap { background: #2A3192; }
@media (max-width: 560px) {
  .atl { padding: 16px 14px 12px; }
  .atl-num { font-size: 30px; }
  .atl-head { gap: 10px; flex-wrap: wrap; }
  .atl-head-txt { flex-basis: calc(100% - 50px); }
  .atl-badge { margin: 4px 0 0 40px; }
  .atl-creneau { padding: 7px 10px 7px 8px; }
  .atl-recap { flex-direction: column; gap: 8px; }
}

/* ════════════════════════════════════════════════════════════
   THÈME « LEGAL2DIGITAL » — la marque elle-même.
   Deux bleus du logo : marine #122054 (titres, texte fort, pied de
   page) et bleu vif #00A7E2 (accents, boutons, filets). Fonds blancs
   et gris-bleu très pâle, angles doux, Poppins. Pour les webinaires,
   matinales et événements signés Legal2digital sans co-marquage.
   ════════════════════════════════════════════════════════════ */
body.tpl-l2d {
  --gold:        #00A7E2;
  --gold-light:  #E3F4FC;
  --gold-dark:   #0088BC;
  --light:       #F6F9FC;
  --light-2:     #E6EDF5;
  --charcoal:    #122054;
  --slate:       #4A5678;
  --slate-light: #8B95B0;
  --cream:       #F6F9FC;
  --gold-a5:  rgba(0, 167, 226, .05);
  --gold-a6:  rgba(0, 167, 226, .06);
  --gold-a12: rgba(0, 167, 226, .12);
  --gold-a15: rgba(0, 167, 226, .15);
  --gold-a20: rgba(0, 167, 226, .20);
  --gold-a30: rgba(0, 167, 226, .30);
  --gold-a35: rgba(0, 167, 226, .35);
  --l2d-marine: #122054;
  --l2d-bleu:   #00A7E2;
  --police-titre: 'Poppins', 'Inter', system-ui, sans-serif;
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
}
.tpl-l2d h1, .tpl-l2d h2, .tpl-l2d h3, .tpl-l2d .hero-title, .tpl-l2d .hero-eyebrow, .tpl-l2d .form-title,
.tpl-l2d .faq-titre, .tpl-l2d .plan-titre, .tpl-l2d .cpt-titre, .tpl-l2d .description h2, .tpl-l2d .hero-meta-value {
  font-family: 'Poppins', system-ui, sans-serif; font-style: normal; letter-spacing: -0.01em;
}
.tpl-l2d p, .tpl-l2d label, .tpl-l2d .faq-rep, .tpl-l2d input, .tpl-l2d select, .tpl-l2d textarea, .tpl-l2d button {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
}
/* Titre : marine, graisse 600, sans capitales — le logo est en minuscules.
   Le <em> prend le bleu du « II » du logo. */
.tpl-l2d .hero-title { color: var(--l2d-marine); font-weight: 600; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12; }
.tpl-l2d .hero-title em { font-style: normal; color: var(--l2d-bleu); font-weight: 600; }
.tpl-l2d .hero-subtitle { color: var(--slate); font-style: normal; font-weight: 400; font-size: clamp(15px, 1.6vw, 18px); }
.tpl-l2d .hero-eyebrow, .tpl-l2d .hero-label, .tpl-l2d .hero-meta-item .label { color: var(--l2d-bleu); letter-spacing: 0.14em; font-weight: 600; }
.tpl-l2d .form-title, .tpl-l2d .faq-titre, .tpl-l2d .plan-titre, .tpl-l2d .cpt-titre { color: var(--l2d-marine); font-weight: 600; }

/* Carte d'information blanche, angles doux, ombre bleutée légère. */
.tpl-l2d .hero-card, .tpl-l2d .form-section form, .tpl-l2d .evp-card { border-radius: 16px; }
.tpl-l2d .hero-card { background: #FFFFFF; box-shadow: 0 -8px 40px rgba(18,32,84,.10); position: relative; overflow: hidden; }
/* Signature : un trait bleu court centré sous les logos, comme le « II ». */
.tpl-l2d .hero-logos { flex-direction: column; align-items: center; gap: 0; }
.tpl-l2d .hero-logos::after { content: ''; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--l2d-bleu); margin: 12px auto 0; }

/* Boutons : bleu vif plein, texte blanc (contraste 3,4 en gras 11 px capitales
   — on grossit à 12 px et 600 pour compenser), survol marine. */
.tpl-l2d .btn-hero, .tpl-l2d .btn-submit, .tpl-l2d .btn-decline-cancel, .tpl-l2d .btn-decline-confirm, .tpl-l2d .plan-lien, .tpl-l2d .apr-btn {
  font-family: 'Poppins', sans-serif; border-radius: 10px; font-weight: 600; letter-spacing: 0.06em; font-size: 12px;
}
.tpl-l2d .btn-hero--primary, .tpl-l2d .btn-submit, .tpl-l2d .btn-decline-cancel, .tpl-l2d .plan-lien {
  background: var(--l2d-bleu); border-color: var(--l2d-bleu); color: #FFFFFF;
}
.tpl-l2d .btn-hero--primary:hover, .tpl-l2d .btn-submit:hover, .tpl-l2d .btn-decline-cancel:hover, .tpl-l2d .plan-lien:hover {
  background: var(--l2d-marine); border-color: var(--l2d-marine); color: #FFFFFF;
}
.tpl-l2d .btn-hero--secondary { color: var(--l2d-marine); border-color: rgba(18,32,84,.3); }
.tpl-l2d .btn-hero--secondary:hover { border-color: var(--l2d-marine); }

/* Sections : blanc / gris-bleu pâle ; le décompte en marine. */
.tpl-l2d .description { background: #E3F4FC; }
.tpl-l2d .plan-section { background: #F6F9FC; }
.tpl-l2d .faq-item summary { color: var(--l2d-marine); }
.tpl-l2d .faq-item summary::after { color: var(--l2d-bleu); }
.tpl-l2d .cpt-section { background: var(--l2d-marine); }
.tpl-l2d .cpt-bloc { background: rgba(0,167,226,.18); border-radius: 12px; }
.tpl-l2d .cpt-bloc b { color: #fff; }
.tpl-l2d .cpt-bloc span { color: #A9DDF5; }
.tpl-l2d .cpt-titre { color: #fff; }
.tpl-l2d input:not([type=checkbox]):not([type=radio]), .tpl-l2d select, .tpl-l2d textarea { border-radius: 10px; }

/* Pied de page marine, liens bleu clair. */
.tpl-l2d .site-footer { background: var(--l2d-marine); }
.tpl-l2d .site-footer p { color: #B8C2DC; }
.tpl-l2d .site-footer a { color: #7FD3F5; }
.tpl-l2d .site-footer a:hover { color: #fff; }

/* Carte : voile bleu léger. */
/* Carte : cadre et commandes Legal2digital (teinte dans carte.js) */
.tpl-l2d .plan-carte { background: #F6F9FC; border-color: rgba(11,42,74,.12); }
.tpl-l2d .maplibregl-ctrl-attrib { background: rgba(255,255,255,.8) !important; color: #4a6f86; }
.tpl-l2d .maplibregl-ctrl-attrib a { color: #0B2A4A !important; }
.tpl-l2d .maplibregl-ctrl-group { background: #fff !important; box-shadow: 0 0 0 1px rgba(11,42,74,.15) !important; }
.tpl-l2d .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: none; }
.tpl-l2d .maplibregl-ctrl-group button:hover { background: #E3F4FC !important; }

/* Ateliers et confirmation. */
.tpl-l2d .atl { border-radius: 14px; }
.tpl-l2d .atl.a-choix { border-color: var(--l2d-bleu); }
.tpl-l2d .atl-num { color: #BFE6F7; }
.tpl-l2d .atl.a-choix .atl-num { color: var(--l2d-bleu); }
.tpl-l2d .atl.a-choix .atl-badge { background: var(--l2d-marine); color: #fff; }
.tpl-l2d .atl-onglet.is-on { background: var(--l2d-marine); }
.tpl-l2d .atl-recap { background: var(--l2d-marine); }
.tpl-l2d .atl-recap-titre { color: #7FD3F5; }
.tpl-l2d .atl-creneau.est-choisi, .tpl-l2d .atl-creneau:has(input:checked) { border-color: var(--l2d-bleu); background: #E3F4FC; }
.tpl-l2d .atl-creneau.est-choisi .atl-coche, .tpl-l2d .atl-creneau:has(input:checked) .atl-coche { border-color: var(--l2d-bleu); background: var(--l2d-bleu); }
.tpl-l2d .atl-autres .atl-creneau.est-choisi, .tpl-l2d .atl-autres .atl-creneau:has(input:checked) { background: transparent; border-color: transparent; }
.tpl-l2d .hero-confirm-creneaux li { border-left-color: var(--l2d-bleu); background: #E3F4FC; }
.tpl-l2d .hero-card { margin-bottom: 56px; }
@media (max-width: 640px) {
  .tpl-l2d .hero-card { margin-bottom: 34px; }
  .tpl-l2d .hero-title { font-size: clamp(24px, 6.5vw, 32px); }
}

/* ════════════════════════════════════════════════════════════
   « Ajouter à mon agenda »  (préfixe ag-)
   Tout en variables de thème : le bloc suit classique, convivial,
   congrès et l2d sans une seule surcharge par gabarit.

   .ag-bloc reste en « flex » et non « inline-flex » : c'est un
   conteneur, et une classe de mise en ligne posée sur un conteneur
   est exactement ce que le 10e contrôle de verifier.php refuse.
   ════════════════════════════════════════════════════════════ */
.ag-bloc {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 0 auto 24px; padding: 16px 20px; max-width: 440px;
  border: 1px solid var(--gold-a20); border-radius: 10px;
  background: var(--gold-a5);
}
.ag-titre {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
}
.ag-liens { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ag-lien {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border: 1px solid var(--gold-a30); border-radius: 8px;
  background: #fff; color: var(--charcoal); text-decoration: none;
  font-size: 13px; line-height: 1.2;
  transition: border-color .18s, color .18s, background .18s;
}
.ag-lien:hover { border-color: var(--gold-dark); color: var(--gold-dark); background: var(--gold-a6); }
.ag-lien strong { font-weight: 600; }
.ag-lien .ag-ico { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold-dark); }
.ag-note { font-size: 12px; color: var(--slate); font-style: italic; }

.hero-confirmation .ag-bloc { margin-top: 20px; }

@media (max-width: 480px) {
  .ag-liens { flex-direction: column; width: 100%; }
  .ag-lien { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   « Legal2digital est présent »  (préfixe pres-)
   Prend la place du formulaire sur un événement où l'on n'inscrit
   personne. Tout en variables de thème, comme le bloc agenda qu'il
   contient : il suit les quatre gabarits sans surcharge.
   ════════════════════════════════════════════════════════════ */
.pres-bloc {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 560px; margin: 0 auto; padding: 8px 0 4px;
}
.pres-titre {
  margin: 0 0 6px; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(26px, 3.2vw, 32px); font-weight: 500; line-height: 1.1; color: var(--charcoal);
}
.pres-texte { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--slate); }
.pres-ou {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 0 0 24px; padding: 14px 22px; min-width: 240px;
  border-top: 1px solid var(--gold-a20); border-bottom: 1px solid var(--gold-a20);
}
.pres-ou-titre {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
}
.pres-ou strong { font-size: 17px; font-weight: 600; color: var(--charcoal); }

/* ════════════════════════════════════════════════════════════
   CARROUSEL 3D (public/js/carrousel-3d.js) — accueil, galerie, diaporama.
   Les photos s'ouvrent en éventail ; le fond reprend les couleurs de la
   photo du centre (--c3d-a, --c3d-b, posées par le script), dans le cadre
   du carrousel seulement : les couleurs du thème restent celles de la page.
   Sans JavaScript (pas de .is-pret) : une bande qui défile à la main.
   ════════════════════════════════════════════════════════════ */
@property --c3d-a { syntax: '<color>'; inherits: true; initial-value: #e8edf3; }
@property --c3d-b { syntax: '<color>'; inherits: true; initial-value: #f3eee6; }
.c3d { --c3d-l: clamp(220px, 26vw, 340px); position: relative; isolation: isolate; overflow: hidden; border-radius: 24px;
       padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px); outline: none;
       transition: --c3d-a 1.1s ease, --c3d-b 1.1s ease; }
.c3d:focus-visible { box-shadow: 0 0 0 3px var(--gold-a35, rgba(201,169,110,.35)); }
.c3d-fond { position: absolute; inset: -20%; z-index: -1; pointer-events: none;
            background: radial-gradient(40% 50% at 32% 42%, var(--c3d-a), transparent 72%),
                        radial-gradient(40% 50% at 70% 58%, var(--c3d-b), transparent 72%), var(--light-2, #f1ede6);
            filter: blur(36px) saturate(1.05); }
.c3d-scene { position: relative; height: calc(var(--c3d-l) * 1.32); perspective: 1500px; perspective-origin: 50% 45%;
             touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.c3d.is-glisse .c3d-scene { cursor: grabbing; }
.c3d-piste { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; pointer-events: none; }
/* La piste est un plan à z = 0, devant les cartes repoussées au fond : sans
   « pointer-events: none », elle interceptait les clics sur les photos de côté. */
.c3d-carte { pointer-events: auto; }
.c3d-carte { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: var(--c3d-l); aspect-ratio: 4 / 5;
             border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.4);
             box-shadow: 0 30px 60px -24px rgba(0,0,0,.38), 0 8px 18px -10px rgba(0,0,0,.2);
             will-change: transform, opacity; backface-visibility: hidden; }
.c3d-carte[hidden] { display: none; }
.c3d-lien { display: block; width: 100%; height: 100%; outline: none; -webkit-user-drag: none; }
.c3d-carte img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.c3d-carte.is-centre .c3d-lien:focus-visible { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--charcoal, #1c1a17); }
.c3d-bas { display: flex; align-items: center; justify-content: center; gap: 12px 16px; flex-wrap: wrap;
           margin-top: clamp(24px, 3.5vw, 40px); padding: 0 20px; }
.c3d-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 12px;
              border: 0; border-radius: 999px; background: rgba(255,255,255,.72); color: var(--charcoal, #1c1a17);
              font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); transition: background .15s, transform .15s; }
.c3d-bouton:hover { background: #fff; }
.c3d-bouton:focus-visible { outline: 2px solid var(--charcoal, #1c1a17); outline-offset: 2px; }
.c3d-bouton svg { width: 16px; height: 16px; flex: none; }
.c3d-bouton[hidden] { display: none; }
.c3d-pause { padding: 0 16px; }
.c3d-pause .c3d-ico-lecture, .c3d-pause[aria-pressed="true"] .c3d-ico-pause { display: none; }
.c3d-pause[aria-pressed="true"] .c3d-ico-lecture { display: block; }
.c3d-texte { order: -1; flex-basis: 100%; margin: 0 0 6px; min-height: 2.6em; text-align: center; color: var(--charcoal, #1c1a17); line-height: 1.35; }
.c3d-texte strong { display: block; font-family: var(--police-titre); font-size: clamp(18px, 2vw, 22px); font-weight: 600; }
.c3d-texte span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--slate, #5a5550); }
.c3d-compteur { min-width: 64px; text-align: center; font-size: 12.5px; letter-spacing: .06em; color: var(--slate, #5a5550); font-variant-numeric: tabular-nums; }
/* Sans JavaScript : bande horizontale. */
.c3d:not(.is-pret) .c3d-scene { height: auto; perspective: none; overflow-x: auto; cursor: auto; padding: 0 24px; }
.c3d:not(.is-pret) .c3d-piste { position: static; display: flex; gap: 16px; width: max-content; }
.c3d:not(.is-pret) .c3d-carte { position: relative; left: auto; top: auto; translate: none; width: 220px; }
@media (max-width: 640px) {
  .c3d { --c3d-l: 58vw; border-radius: 18px; }
  .c3d-bouton.c3d-prec, .c3d-bouton.c3d-suiv { display: none; }   /* au doigt, on glisse */
}

/* Toute la largeur de la fenêtre, même dans une page centrée. La largeur de
   la barre de défilement (--c3d-barre, mesurée par le script) est retirée :
   « 100vw » la compte, et la page déborderait de quelques pixels. Sans
   JavaScript, la bande reste dans la colonne. */
.c3d--large.is-pret { --c3d-l: clamp(230px, 24vw, 400px); --c3d-vw: calc(100vw - var(--c3d-barre, 0px));
                      width: var(--c3d-vw); margin-left: calc(50% - var(--c3d-vw) / 2); border-radius: 0; }
@media (max-width: 640px) { .c3d--large.is-pret { --c3d-l: 62vw; } }

/* Plein écran (diaporama de la galerie) : photos entières, fond sombre. */
.c3d--plein { position: fixed; inset: 0; z-index: 1100; border-radius: 0; padding: 0; display: flex; flex-direction: column; justify-content: center;
              --c3d-h: min(68vh, 62vw); background: #0d0c0b; }
.c3d--plein .c3d-fond { background: radial-gradient(40% 50% at 32% 42%, var(--c3d-a), transparent 72%),
                                    radial-gradient(40% 50% at 70% 58%, var(--c3d-b), transparent 72%), #0d0c0b; filter: blur(60px); opacity: .9; }
.c3d--plein .c3d-scene { height: calc(var(--c3d-h) * 1.12); perspective: 1800px; }
.c3d--plein .c3d-carte { width: auto; height: var(--c3d-h); aspect-ratio: var(--c3d-r, 1.5); border-radius: 8px; background: #1b1916; }
.c3d--plein .c3d-carte img { object-fit: contain; }
.c3d--plein .c3d-carte img { transition: filter .45s ease; }
.c3d--plein .c3d-carte:not(.is-centre) img { filter: brightness(.5) saturate(.85); }
.c3d--plein .c3d-texte, .c3d--plein .c3d-texte span, .c3d--plein .c3d-compteur { color: #f1ece4; }
.c3d--plein .c3d-texte span { opacity: .75; }
.c3d--plein .c3d-bouton { background: rgba(255,255,255,.14); color: #fff; }
.c3d--plein .c3d-bouton:hover { background: rgba(255,255,255,.26); }
.c3d--plein .c3d-bouton:focus-visible { outline-color: #fff; }
.c3d-fermer { position: absolute; top: 18px; right: 18px; z-index: 5; }
@media (max-width: 640px) {
  /* Téléphone : la photo du centre prend la largeur, entière, sans déborder. */
  .c3d--plein { --c3d-h: min(62vh, 100vw); }
  .c3d--plein .c3d-carte { max-width: 88vw; }
}
@media (prefers-reduced-motion: reduce) { .c3d { transition: none; } }