/* =========================================================================
   Université d'Haptonomie 2026 — CSS pour formulaire EventsAir
   v7 — Override TOTAL des bleus/violets résiduels (checkboxes + flèche back)
   Palette : vert forêt / sauge / or chaud — Typo : DM Serif Display + DM Sans
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --uh-forest: #275f43;
  --uh-forest-dark: #1d4a34;
  --uh-forest-light: #3a7a5a;
  --uh-sage: #8FA882;
  --uh-gold: #C9A961;
  --uh-gold-dark: #A8893F;
  --uh-cream: #F5F1E8;
  --uh-cream-soft: #FAF7F0;
  --uh-ink: #1a2e22;
  --uh-muted: #6b7a70;
  --uh-border: #D4C9A8;
  --uh-border-soft: #E8DFC6;
}

/* ---------- Base ---------- */
html, body {
  background: var(--uh-cream) !important;
  color: var(--uh-ink) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 16px;
  line-height: 1.5;
}

* { box-sizing: border-box; }

/* v6 — Resserrer les paragraphes globalement */
p {
  margin: 0 0 0.4rem 0 !important;
  line-height: 1.5 !important;
}
p:empty { display: none !important; }
p + p { margin-top: 0 !important; }
br + br { display: none; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'DM Serif Display', Georgia, serif !important;
  color: var(--uh-forest) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 1rem 0 0.4rem 0 !important;
}

h1, .h1 { font-size: 2.25rem !important; }
h2, .h2 { font-size: 1.75rem !important; color: var(--uh-forest) !important; }
h3, .h3 { font-size: 1.375rem !important; color: var(--uh-forest-light) !important; }
h4, .h4 { font-size: 1.125rem !important; }

em, i { font-style: italic; color: var(--uh-gold-dark); }

a { color: var(--uh-forest); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--uh-gold-dark); }

/* =========================================================================
   CONTENT BLOCKS — EventsAir sort tout en <p>, on cible par font-size inline
   ========================================================================= */

p span[style*="font-size: 36"],
p span[style*="font-size:36"],
p span[style*="font-size: 32"],
p span[style*="font-size:32"],
p span[style*="font-size: 30"],
p span[style*="font-size:30"],
p span[style*="font-size: 28"],
p span[style*="font-size:28"] {
  font-family: 'DM Serif Display', Georgia, serif !important;
  color: var(--uh-forest) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  display: inline-block;
}

p span[style*="font-size: 24"],
p span[style*="font-size:24"],
p span[style*="font-size: 22"],
p span[style*="font-size:22"],
p span[style*="font-size: 20"],
p span[style*="font-size:20"] {
  font-family: 'DM Serif Display', Georgia, serif !important;
  color: var(--uh-forest-light) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  display: inline-block;
}

/* v6 — Faux titres : marge haute discrète, marge basse minime */
p:has(span[style*="font-size: 36"]),
p:has(span[style*="font-size: 32"]),
p:has(span[style*="font-size: 30"]),
p:has(span[style*="font-size: 28"]) {
  margin: 0.9rem 0 0.2rem 0 !important;
  line-height: 1.15 !important;
}
p:has(span[style*="font-size: 24"]),
p:has(span[style*="font-size: 22"]),
p:has(span[style*="font-size: 20"]) {
  margin: 0.7rem 0 0.15rem 0 !important;
  line-height: 1.2 !important;
}

/* Premier "faux titre" d'un bloc : pas de marge haute */
.contentBlock > p:first-child,
.content-block > p:first-child,
[class*="ontent"] > p:first-child {
  margin-top: 0 !important;
}

/* Premier paragraphe d'un content block = intro plus dense */
.contentBlock > p:first-child:not(:has(span[style*="font-size"])),
.content-block > p:first-child:not(:has(span[style*="font-size"])) {
  font-size: 1.05rem !important;
  color: var(--uh-forest-dark) !important;
  line-height: 1.5 !important;
}

/* Gras dans un faux titre */
p span[style*="font-size: 36"] strong,
p span[style*="font-size: 32"] strong,
p span[style*="font-size: 28"] strong,
p span[style*="font-size: 24"] strong {
  font-weight: 600 !important;
  color: var(--uh-forest) !important;
}

/* Italique dans un faux titre = or */
p span[style*="font-size: 36"] em,
p span[style*="font-size: 32"] em,
p span[style*="font-size: 28"] em,
p span[style*="font-size: 24"] em {
  color: var(--uh-gold-dark) !important;
  font-style: italic !important;
}

/* Listes resserrées */
ul, ol { margin: 0.4rem 0 0.6rem 1.25rem !important; padding: 0 !important; }
li { margin: 0.15rem 0 !important; line-height: 1.5 !important; }

/* ---------- Conteneur principal ---------- */
.container, .container-fluid, .main-content, #mainContent, .form-container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  background: #FFFFFF !important;
  padding: 2.5rem !important;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(39, 95, 67, 0.08);
}

/* ---------- Header / Footer EventsAir ---------- */
.header, .site-header, header, .navbar {
  background: var(--uh-forest) !important;
  color: var(--uh-cream) !important;
  border: none !important;
}
.header *, .site-header *, header * {
  color: var(--uh-cream) !important;
  border-color: rgba(245, 241, 232, 0.2) !important;
}
/* v8 : on évite la double bande verte en bas de page.
   Les wrappers .footer / .site-footer restent transparents (fond crème),
   seul le <footer> réel le plus bas porte le vert. */
.footer, .site-footer {
  background: transparent !important;
  color: inherit !important;
}
footer {
  background: var(--uh-forest-dark) !important;
  color: var(--uh-cream) !important;
}
footer * { color: var(--uh-cream) !important; }

/* ---------- Boutons : override AGGRESSIF du bleu Bootstrap ---------- */
.btn,
.btn-primary,
.btn-default,
.btn-success,
.btn-info,
button[type="submit"],
input[type="submit"],
input[type="button"],
.button,
a.btn,
a.button {
  background: var(--uh-forest) !important;
  background-color: var(--uh-forest) !important;
  background-image: none !important;
  border: 1px solid var(--uh-forest) !important;
  border-color: var(--uh-forest) !important;
  color: var(--uh-cream) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 0.75rem 1.75rem !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(39, 95, 67, 0.18);
  cursor: pointer;
}
.btn:hover,
.btn-primary:hover,
.btn-default:hover,
.btn-success:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.button:hover,
a.btn:hover {
  background: var(--uh-forest-dark) !important;
  background-color: var(--uh-forest-dark) !important;
  border-color: var(--uh-forest-dark) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(39, 95, 67, 0.28);
}
.btn:focus, .btn-primary:focus, button:focus, input[type="submit"]:focus {
  outline: 2px solid var(--uh-gold) !important;
  outline-offset: 2px;
}

/* Bouton secondaire (Back, Cancel) */
.btn-secondary, .btn-light, .btn-cancel, a.back-link {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--uh-forest) !important;
  border: 1px solid var(--uh-forest) !important;
  box-shadow: none !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-cancel:hover {
  background: var(--uh-forest) !important;
  background-color: var(--uh-forest) !important;
  color: var(--uh-cream) !important;
}

/* Bouton "warning" / accent or */
.btn-warning, .btn-accent {
  background: var(--uh-gold) !important;
  background-color: var(--uh-gold) !important;
  border-color: var(--uh-gold) !important;
  color: var(--uh-ink) !important;
}
.btn-warning:hover, .btn-accent:hover {
  background: var(--uh-gold-dark) !important;
  background-color: var(--uh-gold-dark) !important;
  border-color: var(--uh-gold-dark) !important;
  color: #FFFFFF !important;
}

/* Override toutes les couleurs bleues résiduelles */
[style*="#007bff"], [style*="#0d6efd"], [style*="#1976d2"], [style*="rgb(0, 123, 255)"] {
  background-color: var(--uh-forest) !important;
  border-color: var(--uh-forest) !important;
  color: var(--uh-cream) !important;
}

/* ---------- Champs formulaire ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="search"],
select,
textarea,
.form-control {
  background: #FFFFFF !important;
  border: 1px solid var(--uh-border) !important;
  border-radius: 6px !important;
  color: var(--uh-ink) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1rem !important;
  padding: 0.65rem 0.85rem !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--uh-forest) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(39, 95, 67, 0.15) !important;
}

label, .control-label, .form-label {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  color: var(--uh-forest) !important;
  font-size: 0.9rem !important;
  margin-bottom: 0.35rem !important;
  display: inline-block;
}

.required, .req, .mandatory { color: var(--uh-gold-dark) !important; }

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--uh-forest);
  width: 1.1rem;
  height: 1.1rem;
  margin-right: 0.5rem;
}

/* ---------- Sections / Panels / Cards ---------- */
.panel, .card, .section, .well, fieldset {
  background: var(--uh-cream-soft) !important;
  border: 1px solid var(--uh-border-soft) !important;
  border-radius: 8px !important;
  padding: 1.5rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: none !important;
}
.panel-heading, .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--uh-border-soft) !important;
  padding: 0 0 0.6rem 0 !important;
  margin-bottom: 0.75rem !important;
  color: var(--uh-forest) !important;
}
.panel-title, .card-title {
  font-family: 'DM Serif Display', serif !important;
  color: var(--uh-forest) !important;
  margin: 0 !important;
}

/* ---------- Tables ---------- */
table, .table {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF !important;
  margin: 0.75rem 0;
}
table th, .table th {
  background: var(--uh-forest) !important;
  color: var(--uh-cream) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  padding: 0.65rem !important;
  text-align: left;
  border: none !important;
}
table td, .table td {
  padding: 0.6rem 0.65rem !important;
  border-bottom: 1px solid var(--uh-border-soft) !important;
  color: var(--uh-ink) !important;
}
table tr:nth-child(even) td { background: var(--uh-cream-soft) !important; }

/* ---------- Alerts ---------- */
.alert, .message, .notice {
  border-radius: 6px !important;
  padding: 0.85rem 1.1rem !important;
  border: 1px solid transparent !important;
  font-family: 'DM Sans', sans-serif !important;
  margin: 0.6rem 0 !important;
}
.alert-info, .alert-primary {
  background: rgba(143, 168, 130, 0.15) !important;
  border-color: var(--uh-sage) !important;
  color: var(--uh-forest-dark) !important;
}
.alert-success {
  background: rgba(39, 95, 67, 0.1) !important;
  border-color: var(--uh-forest) !important;
  color: var(--uh-forest-dark) !important;
}
.alert-warning {
  background: rgba(201, 169, 97, 0.15) !important;
  border-color: var(--uh-gold) !important;
  color: var(--uh-gold-dark) !important;
}
.alert-danger, .alert-error, .error {
  background: #FDF0EE !important;
  border-color: #C44536 !important;
  color: #8B2A1E !important;
}

/* ---------- Steps / Progress ---------- */
.progress, .progress-bar, .step-indicator, .wizard-steps {
  background: var(--uh-cream-soft) !important;
  border-radius: 999px !important;
}
.progress-bar > div, .progress-bar-active, .step.active, .step-active {
  background: var(--uh-forest) !important;
  color: var(--uh-cream) !important;
}
.step-completed, .step.completed { color: var(--uh-forest) !important; }

/* ---------- Nav ---------- */
.nav-link, .nav-item a {
  color: var(--uh-cream) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
}
.nav-link:hover, .nav-link.active { color: var(--uh-gold) !important; }

/* ---------- Aides / petits textes ---------- */
.help-text, .help-block, small, .small {
  color: var(--uh-muted) !important;
  font-size: 0.85rem !important;
}

/* ---------- Badges ---------- */
.badge, .tag, .label {
  background: var(--uh-sage) !important;
  color: #FFFFFF !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  padding: 0.25rem 0.6rem !important;
  border-radius: 999px !important;
  font-size: 0.8rem !important;
}

/* ---------- Modals ---------- */
.modal-content {
  background: #FFFFFF !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25) !important;
}
.modal-header {
  background: var(--uh-forest) !important;
  color: var(--uh-cream) !important;
  border-radius: 10px 10px 0 0 !important;
  border: none !important;
}
.modal-header * { color: var(--uh-cream) !important; }
.modal-footer { border-top: 1px solid var(--uh-border-soft) !important; }

/* ---------- Selection ---------- */
::selection { background: var(--uh-gold); color: var(--uh-ink); }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .container, .container-fluid, .main-content, .form-container {
    padding: 1.25rem !important;
    border-radius: 0;
  }
  h1, .h1 { font-size: 1.75rem !important; }
  h2, .h2 { font-size: 1.4rem !important; }
  p span[style*="font-size: 36"],
  p span[style*="font-size: 32"],
  p span[style*="font-size: 28"] { font-size: 1.6rem !important; }
}

/* ---------- Boutons paiement ---------- */
.btn-pay, .btn-checkout, .btn-add-cart, .add-to-cart {
  background: var(--uh-gold) !important;
  background-color: var(--uh-gold) !important;
  border-color: var(--uh-gold) !important;
  color: var(--uh-ink) !important;
  font-weight: 700 !important;
}
.btn-pay:hover, .btn-checkout:hover, .add-to-cart:hover {
  background: var(--uh-gold-dark) !important;
  background-color: var(--uh-gold-dark) !important;
  color: #FFFFFF !important;
}

/* ============================================================
   v5 — Override violet/indigo des cards sélectionnées + icônes
   ============================================================ */

*, *::before, *::after { accent-color: var(--uh-forest) !important; }

[aria-checked="true"],
[aria-selected="true"],
[data-state="checked"],
[data-selected="true"],
.is-selected, .selected, .active, .checked,
label.selected, label.is-selected, label.active,
.option.selected, .option.is-selected, .option.active,
.choice.selected, .choice.is-selected,
.card.selected, .card.is-selected, .card.active {
  border-color: var(--uh-forest) !important;
  outline-color: var(--uh-forest) !important;
  box-shadow: 0 0 0 2px var(--uh-forest) !important;
  color: var(--uh-forest) !important;
}
[aria-checked="true"] *,
[data-state="checked"] *,
.is-selected *, .selected *, .checked * {
  color: var(--uh-forest) !important;
}

[aria-checked="true"]::before,
[data-state="checked"]::before,
.checkbox.checked, .radio.checked,
.checkbox[data-state="checked"], .radio[data-state="checked"],
.checkmark, .check-icon, .radio-dot {
  background: var(--uh-forest) !important;
  background-color: var(--uh-forest) !important;
  border-color: var(--uh-forest) !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

[style*="#6b21a8"], [style*="#7c3aed"], [style*="#8b5cf6"],
[style*="#6366f1"], [style*="#4f46e5"], [style*="#4338ca"],
[style*="#a855f7"], [style*="#9333ea"], [style*="#5b21b6"],
[style*="rgb(107, 33, 168)"], [style*="rgb(124, 58, 237)"],
[style*="rgb(139, 92, 246)"], [style*="rgb(99, 102, 241)"],
[style*="purple"], [style*="indigo"], [style*="violet"] {
  color: var(--uh-forest) !important;
  background-color: var(--uh-forest) !important;
  border-color: var(--uh-forest) !important;
}

.btn svg, button svg, a svg,
.btn svg *, button svg *, a svg * {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
.btn svg path[fill]:not([fill="none"]),
button svg path[fill]:not([fill="none"]) { fill: currentColor !important; }
.btn svg path[stroke]:not([stroke="none"]),
button svg path[stroke]:not([stroke="none"]) { stroke: currentColor !important; }

svg [fill="#6b21a8"], svg [fill="#7c3aed"], svg [fill="#8b5cf6"],
svg [fill="#6366f1"], svg [fill="#4f46e5"], svg [fill="#a855f7"],
svg [stroke="#6b21a8"], svg [stroke="#7c3aed"], svg [stroke="#8b5cf6"],
svg [stroke="#6366f1"], svg [stroke="#4f46e5"], svg [stroke="#a855f7"] {
  fill: var(--uh-forest) !important;
  stroke: var(--uh-forest) !important;
}

*:focus, *:focus-visible {
  outline-color: var(--uh-forest) !important;
}
*:focus-visible {
  box-shadow: 0 0 0 3px rgba(39, 95, 67, 0.25) !important;
}

/* ============================================================
   v7 — Override TOTAL bleu/violet sur checkboxes + flèche back
   ============================================================ */

/* --- 1. Checkboxes "custom" EventsAir (box rendu en <span>/<div>) --- */
/* La case cochée a souvent un fond bleu/violet inline ou via classe.
   On force tout ce qui ressemble à une "checkbox visuelle" cochée en vert. */

.checkbox-custom.checked, .checkbox-custom[data-checked="true"],
.custom-checkbox.checked, .custom-checkbox[aria-checked="true"],
.checkbox-indicator[data-state="checked"],
[role="checkbox"][aria-checked="true"],
[role="checkbox"][data-state="checked"],
[role="radio"][aria-checked="true"],
[role="radio"][data-state="checked"],
input[type="checkbox"]:checked + span,
input[type="checkbox"]:checked + label::before,
input[type="checkbox"]:checked ~ .checkmark,
input[type="radio"]:checked + span,
input[type="radio"]:checked ~ .checkmark,
label.checked > span:first-child,
label.is-checked > span:first-child,
.option.checked .box, .option.checked .indicator,
.option-card.selected .box, .option-card.selected .indicator,
.session-card.selected .box, .session-card.selected .indicator {
  background: var(--uh-forest) !important;
  background-color: var(--uh-forest) !important;
  background-image: none !important;
  border-color: var(--uh-forest) !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* SVG check/dot à l'intérieur d'une case cochée */
[aria-checked="true"] svg,
[data-state="checked"] svg,
[role="checkbox"][aria-checked="true"] svg,
[role="radio"][aria-checked="true"] svg,
.checkbox-custom.checked svg,
.custom-checkbox.checked svg,
input[type="checkbox"]:checked + * svg,
input[type="checkbox"]:checked ~ * svg,
label.checked svg, label.is-checked svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
}
[aria-checked="true"] svg *,
[data-state="checked"] svg *,
.checkbox-custom.checked svg *,
.custom-checkbox.checked svg * {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* --- 2. Flèche du bouton "Retour / Back" --- */
/* Le bouton est vert mais sa flèche SVG reste bleue (fill/stroke inline). */

.btn svg, .btn svg *,
button svg, button svg *,
a.btn svg, a.btn svg *,
.button svg, .button svg *,
[class*="back"] svg, [class*="back"] svg *,
[class*="prev"] svg, [class*="prev"] svg *,
[class*="Back"] svg, [class*="Back"] svg *,
[aria-label*="back" i] svg, [aria-label*="back" i] svg *,
[aria-label*="retour" i] svg, [aria-label*="retour" i] svg *,
[aria-label*="précédent" i] svg, [aria-label*="précédent" i] svg * {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* --- 3. Override universel des fills/strokes bleu/violet sur TOUT SVG --- */
svg [fill="#0d6efd"], svg [fill="#007bff"], svg [fill="#1976d2"],
svg [fill="#2196f3"], svg [fill="#3b82f6"], svg [fill="#2563eb"],
svg [fill="#1d4ed8"], svg [fill="#1e40af"], svg [fill="#0ea5e9"],
svg [fill="#0284c7"], svg [fill="#0369a1"], svg [fill="blue"],
svg [stroke="#0d6efd"], svg [stroke="#007bff"], svg [stroke="#1976d2"],
svg [stroke="#2196f3"], svg [stroke="#3b82f6"], svg [stroke="#2563eb"],
svg [stroke="#1d4ed8"], svg [stroke="#1e40af"], svg [stroke="#0ea5e9"],
svg [stroke="#0284c7"], svg [stroke="#0369a1"], svg [stroke="blue"] {
  fill: var(--uh-forest) !important;
  stroke: var(--uh-forest) !important;
}

/* Même chose pour les couleurs bleues/violettes en inline style sur n'importe quel élément */
[style*="background:#3b82f6"], [style*="background-color:#3b82f6"],
[style*="background: #3b82f6"], [style*="background-color: #3b82f6"],
[style*="background:#2563eb"], [style*="background-color:#2563eb"],
[style*="background: #2563eb"], [style*="background-color: #2563eb"],
[style*="background:#1976d2"], [style*="background-color:#1976d2"],
[style*="background:#0d6efd"], [style*="background-color:#0d6efd"],
[style*="background:#007bff"], [style*="background-color:#007bff"],
[style*="background:#2196f3"], [style*="background-color:#2196f3"],
[style*="background:blue"],   [style*="background-color:blue"] {
  background: var(--uh-forest) !important;
  background-color: var(--uh-forest) !important;
  background-image: none !important;
  border-color: var(--uh-forest) !important;
  color: #FFFFFF !important;
}

/* Dernier filet de sécurité : si la box d'une checkbox cochée garde une couleur
   "non-verte", on remplace via une boîte verte par-dessus. */
[role="checkbox"][aria-checked="true"]::before,
[role="radio"][aria-checked="true"]::before {
  background: var(--uh-forest) !important;
  border-color: var(--uh-forest) !important;
}

/* =========================================================================
   v9 — Overrides ULTRA-CIBLÉS sur les vraies classes EventsAir "Modern"
   - .callout.modern-option / .fee-option-card  -> fond lavande -> crème
   - .modern-panel / .radio-group               -> conteneur violet -> transparent
   - .modern-checkbox-box / .modern-radio-input -> bleu cochée -> vert
   - .modern-secondary-button (back)            -> couleur/flèche bleue -> verte
   - <footer> + .navbar.navbar-inverse imbriqués -> 1 seule bande verte
   ========================================================================= */

/* ---------- 1. Cards d'options (fee-option-card, modern-option, callout) ---------- */
.callout,
.callout.modern-option,
.callout.fee-option-card,
.callout.fee-option-card.modern-option,
.callout.fee-option-card.modern-option.radio-marker,
.modern-option,
.fee-option-card,
.input-container.modern-option {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid var(--uh-border-soft) !important;
  box-shadow: 0 1px 3px rgba(39, 95, 67, 0.06) !important;
  color: var(--uh-ink) !important;
  border-radius: 8px !important;
}
.callout:hover,
.modern-option:hover,
.fee-option-card:hover,
.input-container.modern-option:hover {
  background: var(--uh-cream-soft) !important;
  background-color: var(--uh-cream-soft) !important;
  border-color: var(--uh-sage) !important;
  box-shadow: 0 2px 8px rgba(39, 95, 67, 0.10) !important;
}

/* Card sélectionnée */
.callout:has(input:checked),
.modern-option:has(input:checked),
.fee-option-card:has(input:checked),
.input-container.modern-option:has(input:checked) {
  background: rgba(143, 168, 130, 0.12) !important;
  background-color: rgba(143, 168, 130, 0.12) !important;
  border-color: var(--uh-forest) !important;
  box-shadow: 0 0 0 2px var(--uh-forest) !important;
}

/* ---------- 2. Conteneur "modern-panel" / "radio-group" (la bande violette autour) ---------- */
.modern-panel,
.modern-spacing-3xl.modern-panel,
.radio-group,
.modern-component,
.component.modern-component,
.theme-component-registration {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Labels & textes dans les cards */
.callout-label,
.callout-label *,
.fee-option,
.fee-option-header,
.fee-option-details,
.fee-option-details-header,
.label-text,
.theme-modern-label,
.modern-input-label-container,
.modern-input-label-container * {
  color: var(--uh-ink) !important;
  background: transparent !important;
}
.label-text,
.theme-modern-label {
  font-weight: 600 !important;
  color: var(--uh-forest) !important;
}
.fee-amount,
.amount,
.amount-value,
.summary-value {
  color: var(--uh-forest-dark) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* ---------- 3. CHECKBOX "modern" EventsAir ---------- */
/* Box au repos */
.modern-checkbox-wrapper,
.modern-checkbox-wrapper * {
  background: transparent !important;
}
.modern-checkbox-box {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 2px solid var(--uh-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
/* Box cochée */
.modern-checkbox-wrapper input[type="checkbox"]:checked + .modern-checkbox-box,
.modern-checkbox-wrapper input:checked + .modern-checkbox-box,
input.callout-input[type="checkbox"]:checked + .modern-checkbox-box {
  background: var(--uh-forest) !important;
  background-color: var(--uh-forest) !important;
  border-color: var(--uh-forest) !important;
}
.modern-checkbox-check-icon,
.modern-checkbox-check-icon path {
  stroke: #FFFFFF !important;
  fill: none !important;
}

/* RADIO "modern" EventsAir */
.modern-radio-input {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 2px solid var(--uh-border) !important;
  border-radius: 50% !important;
  width: 1.1rem;
  height: 1.1rem;
  display: inline-block;
  position: relative;
}
input[type="radio"]:checked + .modern-radio-input,
input.callout-input[type="radio"]:checked + .modern-radio-input {
  background: #FFFFFF !important;
  border-color: var(--uh-forest) !important;
}
input[type="radio"]:checked + .modern-radio-input::after,
input.callout-input[type="radio"]:checked + .modern-radio-input::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--uh-forest) !important;
}

/* ---------- 4. Bouton RETOUR + flèche (modern-secondary-button) ---------- */
.modern-secondary-button,
.modern-secondary-button-icon,
.btn.back-button,
.btn.page-backward,
.navbar-btn.back-button {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--uh-cream) !important;
  border: 1px solid var(--uh-cream) !important;
  box-shadow: none !important;
}
.modern-secondary-button:hover,
.modern-secondary-button-icon:hover,
.btn.back-button:hover,
.btn.page-backward:hover {
  background: var(--uh-cream) !important;
  background-color: var(--uh-cream) !important;
  color: var(--uh-forest-dark) !important;
  border-color: var(--uh-cream) !important;
}
.modern-secondary-button .btn-text,
.modern-secondary-button-icon .btn-text,
.back-button .btn-text {
  color: inherit !important;
}
/* Flèche back : pseudo-element ::before sur le bouton */
.modern-secondary-button::before,
.modern-secondary-button-icon::before,
.back-button::before,
.page-backward::before,
.modern-secondary-button::after,
.modern-secondary-button-icon::after,
.back-button::after,
.page-backward::after {
  color: currentColor !important;
  background: currentColor !important;
  border-color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* Si la flèche est une image SVG inline */
.modern-secondary-button svg,
.modern-secondary-button svg *,
.modern-secondary-button-icon svg,
.modern-secondary-button-icon svg *,
.back-button svg, .back-button svg *,
.page-backward svg, .page-backward svg * {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* Flèche du bouton "Next" (arrow-icon span) */
.arrow-icon {
  color: currentColor !important;
  background: currentColor !important;
}
.theme-btn-primary .arrow-icon { background: var(--uh-cream) !important; }

/* ---------- 5. Footer EventsAir : footer + navbar.navbar-inverse imbriqués ---------- */
/* Le HTML réel = <footer><nav class="navbar navbar-inverse">...</nav></footer>
   Pour n'avoir QU'UNE bande verte, on rend le <footer> transparent et
   on garde le vert uniquement sur le .navbar.navbar-inverse interne. */
footer {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}
footer > .navbar,
footer .navbar.navbar-inverse,
.navbar.navbar-inverse,
.navbar-inside-page {
  background: var(--uh-forest-dark) !important;
  background-color: var(--uh-forest-dark) !important;
  background-image: none !important;
  color: var(--uh-cream) !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
footer .navbar *, .navbar.navbar-inverse * {
  color: var(--uh-cream) !important;
  border-color: rgba(245, 241, 232, 0.2) !important;
}


/* =========================================================================
   v10 — BRUTE-FORCE FINAL : nuke des résidus bleu/violet
   - On cible TOUT élément dont la classe contient "modern", "callout",
     "checkbox", "radio", "secondary", "back", "page-backward"
   - On masque les background-image (la flèche bleue est un SVG inline-bg)
   - On injecte une vraie flèche unicode "‹ Retour"
   - On ne garde qu'UN SEUL footer vert (le dernier)
   ========================================================================= */

/* ---------- 0. RESET universel de tout fond bleu/violet ---------- */
[class*="modern-"],
[class*="modern-"]::before,
[class*="modern-"]::after,
[class*="callout"],
[class*="fee-option"],
[class*="radio-group"],
[class*="checkbox"]:not(input):not(.modern-checkbox-box),
[class*="theme-component"],
[class*="component-registration"],
[class*="input-container"] {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Re-applique le fond blanc UNIQUEMENT pour les cards d'options */
.callout.modern-option,
.fee-option-card,
.input-container.modern-option,
li.callout,
li.modern-option {
  background-color: #FFFFFF !important;
  border: 1px solid var(--uh-border-soft) !important;
  box-shadow: 0 1px 3px rgba(39, 95, 67, 0.06) !important;
  border-radius: 8px !important;
}
.callout.modern-option:has(input:checked),
.fee-option-card:has(input:checked),
.input-container.modern-option:has(input:checked) {
  background-color: rgba(143, 168, 130, 0.14) !important;
  border-color: var(--uh-forest) !important;
  box-shadow: 0 0 0 2px var(--uh-forest) !important;
}

/* ---------- 1. CHECKBOX & RADIO : box repeinte ---------- */
.modern-checkbox-box,
span.modern-checkbox-box {
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 2px solid var(--uh-border) !important;
  border-radius: 4px !important;
}
input:checked + .modern-checkbox-box,
input:checked + span.modern-checkbox-box {
  background-color: var(--uh-forest) !important;
  border-color: var(--uh-forest) !important;
}
.modern-checkbox-box svg,
.modern-checkbox-box svg *,
.modern-checkbox-check-icon,
.modern-checkbox-check-icon * {
  stroke: #FFFFFF !important;
  fill: none !important;
  color: #FFFFFF !important;
}
input { accent-color: var(--uh-forest) !important; }

/* ---------- 2. BOUTON RETOUR — masquage TOTAL du SVG bleu d'origine ---------- */
/* La flèche bleue est généralement une background-image SVG sur le bouton */
.back-button,
.btn.back-button,
.btn.page-backward,
.navbar-btn.back-button,
.modern-secondary-button,
.modern-secondary-button-icon {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  color: var(--uh-cream) !important;
  border: 1px solid var(--uh-cream) !important;
  padding: 0.4rem 0.9rem 0.4rem 0.7rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
}
.back-button:hover,
.btn.back-button:hover,
.btn.page-backward:hover,
.modern-secondary-button:hover,
.modern-secondary-button-icon:hover {
  background-color: var(--uh-cream) !important;
  color: var(--uh-forest-dark) !important;
}
/* Cacher tout enfant non-text (svg, img, i, span icon) */
.back-button > svg,
.back-button > img,
.back-button > i,
.btn.page-backward > svg,
.btn.page-backward > img,
.btn.page-backward > i,
.modern-secondary-button > svg,
.modern-secondary-button > img,
.modern-secondary-button > i,
.modern-secondary-button-icon > svg,
.modern-secondary-button-icon > img,
.modern-secondary-button-icon > i {
  display: none !important;
}
/* Injecter une vraie flèche AVANT le label */
.back-button .btn-text::before,
.btn.page-backward .btn-text::before,
.modern-secondary-button .btn-text::before,
.modern-secondary-button-icon .btn-text::before {
  content: "‹ " !important;
  font-weight: 700 !important;
  color: inherit !important;
  margin-right: 0.15rem !important;
}
.back-button .btn-text,
.btn.page-backward .btn-text,
.modern-secondary-button .btn-text,
.modern-secondary-button-icon .btn-text {
  color: inherit !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ---------- 3. FOOTER : masquer le 1er vert, garder le dernier ---------- */
/* Si plusieurs <footer> ou <nav.navbar-inverse> sont empilés, on n'affiche
   que le dernier. */
footer ~ footer { display: none !important; }
.navbar.navbar-inverse ~ .navbar.navbar-inverse,
footer:not(:last-of-type) {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
footer:not(:last-of-type) * {
  background: transparent !important;
  color: var(--uh-muted) !important;
}
/* Le footer final reste vert */
body > footer:last-of-type,
footer:last-of-type {
  background-color: var(--uh-forest-dark) !important;
  color: var(--uh-cream) !important;
}
footer:last-of-type * { color: var(--uh-cream) !important; }

/* =========================================================================
   v11 — FIX flèches carrées (Suivant) + visibilité bouton Retour
   ========================================================================= */

/* ---------- 1. Flèche "Suivant" : enlever le carré blanc ---------- */
/* En v10, .arrow-icon a background: currentColor → rectangle plein.
   On nettoie le fond et on injecte une flèche unicode "›". */
.arrow-icon,
.modern-primary-button .arrow-icon,
.theme-btn-primary .arrow-icon,
.btn .arrow-icon {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: inherit !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 1.1em !important;
  line-height: 1 !important;
}
/* Masquer tout SVG/img interne (souvent un chevron bleu d'origine) */
.arrow-icon > svg,
.arrow-icon > img,
.arrow-icon > i,
.arrow-icon svg,
.arrow-icon img { display: none !important; }
/* Injecter le chevron */
.arrow-icon::before {
  content: "›" !important;
  color: inherit !important;
  font-weight: 700 !important;
  font-size: 1.2em !important;
  line-height: 1 !important;
  margin-left: 0.25rem !important;
}

/* ---------- 2. Bouton Retour : VISIBLE sur fond blanc ---------- */
/* En v10 on l'avait peint en crème → invisible sur la carte blanche.
   On force vert forêt + bordure verte + fond blanc. */
.back-button,
.btn.back-button,
.btn.page-backward,
.navbar-btn.back-button,
.modern-secondary-button,
.modern-secondary-button-icon {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: var(--uh-forest) !important;
  border: 1.5px solid var(--uh-forest) !important;
  box-shadow: 0 1px 3px rgba(39,95,67,0.12) !important;
  font-weight: 600 !important;
}
.back-button:hover,
.btn.back-button:hover,
.btn.page-backward:hover,
.modern-secondary-button:hover,
.modern-secondary-button-icon:hover {
  background: var(--uh-forest) !important;
  background-color: var(--uh-forest) !important;
  color: #FFFFFF !important;
  border-color: var(--uh-forest) !important;
}
.back-button .btn-text,
.btn.page-backward .btn-text,
.modern-secondary-button .btn-text,
.modern-secondary-button-icon .btn-text {
  color: inherit !important;
  font-weight: 600 !important;
}
/* Le chevron "‹" injecté en v10 hérite déjà via color:inherit */