/* /public/css/public-modern.css */

/*
 * DT-ENERDIAG — langage visuel public Glass.
 *
 * Règles 18K :
 * - une information visible une seule fois ;
 * - pas de texte d'aide lorsque l'interface est explicite ;
 * - titres centrés, sobres et respirants ;
 * - texte clair sur Glass sombre, jamais bleu/ocre de contraste insuffisant ;
 * - les champs de saisie restent clairs avec texte sombre pour la lisibilité.
 */

:root {
  --public-ink: rgba(248, 250, 252, 0.98);
  --public-ink-soft: rgba(226, 232, 240, 0.9);
  --public-ink-muted: rgba(203, 213, 225, 0.82);
  --public-link: rgba(219, 234, 254, 0.98);
  --public-glass: rgba(8, 24, 43, 0.46);
  --public-glass-strong: rgba(7, 22, 40, 0.58);
  --public-glass-border: rgba(255, 255, 255, 0.22);
  --public-field-bg: rgba(248, 250, 252, 0.92);
  --public-field-ink: rgba(15, 23, 42, 0.96);
}

/* -------------------------------------------------------------------------
   Contenu : le contexte/titre de page vit désormais dans le bandeau supérieur.
   ------------------------------------------------------------------------- */

.public-page-main {
  width: min(calc(100% - 32px), 1240px);
  margin: 22px auto 38px;
}

.public-page-main--home-content {
  min-height: clamp(280px, 43vh, 620px);
}

.public-page-shell {
  width: 100%;
  padding: clamp(14px, 2vw, 24px);
  color: var(--public-ink);
}

.public-content-flow {
  display: grid;
  gap: 13px;
  padding-top: 0;
}

/* -------------------------------------------------------------------------
   Glass secondaire : sombre et lisible
   ------------------------------------------------------------------------- */

.public-glass-section,
.public-compact-bar,
.public-static-fallback {
  border: 1px solid var(--public-glass-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(147, 197, 253, 0.025)),
    var(--public-glass);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 14px 34px rgba(0, 8, 20, 0.16);
  backdrop-filter: blur(13px) saturate(1.1);
  -webkit-backdrop-filter: blur(13px) saturate(1.1);
}

.public-glass-section {
  padding: clamp(15px, 2vw, 21px);
  border-radius: 18px;
}

.public-glass-section h2,
.public-glass-section h3,
.public-glass-section strong {
  color: var(--public-ink);
  text-shadow: none;
}

.public-glass-section p {
  color: var(--public-ink-soft);
  text-shadow: none;
}

.public-glass-section a,
.public-static-fallback a {
  color: var(--public-link);
}

.public-compact-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
}

.public-compact-bar__label,
.public-compact-bar__value {
  color: var(--public-ink-soft);
}

.public-static-fallback {
  display: flex;
  justify-content: center;
  padding: 14px 16px;
  border-radius: 14px;
  text-align: center;
}

.public-static-fallback p {
  margin: 0;
  color: var(--public-ink-muted);
}

.public-static-fallback a {
  font-weight: 820;
}

/* -------------------------------------------------------------------------
   Cartes publiques héritées : on conserve le Glass, on corrige le contraste
   ------------------------------------------------------------------------- */

.page-contact .public-page-shell .rdv-card,
.page-retractation .public-page-shell .rdv-card,
.page-cgv .public-page-shell .rdv-card {
  border-color: var(--public-glass-border);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.1), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(14, 42, 69, 0.54), rgba(7, 25, 45, 0.48)),
    rgba(7, 22, 40, 0.42);
  box-shadow:
    0 18px 44px rgba(0, 8, 20, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.page-contact .public-page-shell .rdv-card p,
.page-contact .public-page-shell .rdv-card .hint,
.page-contact .public-page-shell .rdv-card label,
.page-contact .public-page-shell .rdv-card .contact-message-label,
.page-contact .public-page-shell .rdv-card .label-row label,
.page-retractation .public-page-shell .rdv-card p,
.page-retractation .public-page-shell .rdv-card label,
.page-retractation .public-page-shell .rdv-card .retractation-field > span,
.page-retractation .public-page-shell .rdv-card .retractation-checkbox-line span,
.page-retractation .public-page-shell .rdv-card .retractation-refund-box h3 {
  color: var(--public-ink-soft) !important;
  text-shadow: none !important;
}

.page-contact .public-page-shell .rdv-card strong,
.page-retractation .public-page-shell .rdv-card strong {
  color: var(--public-ink) !important;
}

.page-contact .public-page-shell .rdv-card a,
.page-retractation .public-page-shell .rdv-card a {
  color: var(--public-link) !important;
}

/* Les contrôles restent volontairement clairs : texte sombre très contrasté. */
.page-contact .public-page-shell input,
.page-contact .public-page-shell select,
.page-contact .public-page-shell textarea,
.page-retractation .public-page-shell input,
.page-retractation .public-page-shell select,
.page-retractation .public-page-shell textarea,
.page-cgv .cgv-version-picker__select {
  color: var(--public-field-ink) !important;
  -webkit-text-fill-color: var(--public-field-ink);
  border-color: rgba(255, 255, 255, 0.56) !important;
  background: var(--public-field-bg) !important;
  text-shadow: none !important;
}

.page-contact .public-page-shell input::placeholder,
.page-contact .public-page-shell textarea::placeholder,
.page-retractation .public-page-shell input::placeholder,
.page-retractation .public-page-shell textarea::placeholder {
  color: rgba(71, 85, 105, 0.7) !important;
  -webkit-text-fill-color: rgba(71, 85, 105, 0.7);
}

.page-contact .public-page-shell .checkbox-line.contact-rgpd {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

.page-contact .public-page-shell .checkbox-line.contact-rgpd label {
  color: var(--public-ink-soft) !important;
  text-shadow: none !important;
}

/* -------------------------------------------------------------------------
   Rétractation / confirmation
   ------------------------------------------------------------------------- */

.page-retractation .retractation-refund-box {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.055);
}

.page-retractation .retractation-refund-box p {
  color: var(--public-ink-muted);
  font-size: 0.82rem;
  font-weight: 560;
}

.page-retractation .retractation-checkbox-line a {
  color: var(--public-link);
}

.page-retractation-confirmation .confirmation-card {
  max-width: 620px;
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   CGV : lecture longue en Glass sombre, contrôles clairs
   ------------------------------------------------------------------------- */

.page-cgv .cgv-reference-header,
.page-cgv .cgv-control-bar {
  border-color: var(--public-glass-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    var(--public-glass);
  color: var(--public-ink-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-shadow: none;
}

.page-cgv .cgv-version-picker__label,
.page-cgv .cgv-company-panel p,
.page-cgv .cgv-company-panel__name,
.page-cgv .cgv-card .rdv-card-kicker,
.page-cgv .cgv-readable p,
.page-cgv .cgv-readable li,
.page-cgv .cgv-readable strong,
.page-cgv .cgv-readable em,
.page-cgv .cgv-content-lead,
.page-cgv .cgv-content-meta,
.page-cgv .cgv-content-subtitle,
.page-cgv .cgv-readable h3,
.page-cgv .cgv-readable h4 {
  color: var(--public-ink-soft) !important;
  text-shadow: none !important;
}

.page-cgv .cgv-company-panel__name,
.page-cgv .cgv-readable strong,
.page-cgv .cgv-content-lead {
  color: var(--public-ink) !important;
}

.page-cgv .cgv-readable a,
.page-cgv .cgv-version-picker__button,
.page-cgv .cgv-document-button {
  color: var(--public-link);
}

.page-cgv .cgv-readable {
  border-color: rgba(255, 255, 255, 0.08);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.page-cgv .cgv-version-picker__button,
.page-cgv .cgv-document-button {
  min-height: 40px;
  border-color: rgba(191, 219, 254, 0.28);
  background: linear-gradient(135deg, rgba(15, 58, 105, 0.96), rgba(31, 101, 158, 0.9));
  box-shadow: 0 9px 22px rgba(0, 8, 20, 0.2);
}

.page-cgv .cgv-content-notice {
  border-color: rgba(147, 197, 253, 0.18);
  color: var(--public-ink-soft);
  background: rgba(59, 130, 246, 0.11);
}

.page-cgv .cgv-content-warning {
  border-color: rgba(251, 191, 36, 0.22);
  color: rgba(254, 243, 199, 0.96);
  background: rgba(180, 83, 9, 0.14);
}

.page-cgv .cgv-readable li::marker {
  color: rgba(191, 219, 254, 0.78);
}

.page-cgv .cgv-content-part h2 {
  border: 1px solid rgba(191, 219, 254, 0.18);
  background: rgba(15, 58, 105, 0.72);
  box-shadow: 0 10px 24px rgba(0, 8, 20, 0.16);
}

/*
 * 18Q-bis A — titres de chapitres CGV.
 * Les sections sont déjà des cartes Glass sombres : l'ancien rdv-frame-head
 * clair créait un second niveau blanc et un contraste incohérent.
 */
.page-cgv .cgv-content-section > .rdv-frame-head--compact {
  margin: 0 0 12px;
  padding: 0 0 10px;
  border: 0 !important;
  border-bottom: 1px solid rgba(191, 219, 254, 0.2) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-cgv .cgv-content-section > .rdv-frame-head--compact::before {
  display: none !important;
}

.page-cgv .cgv-content-section > .rdv-frame-head--compact .rdv-card-kicker {
  color: var(--public-ink) !important;
  text-shadow: none !important;
}

/* -------------------------------------------------------------------------
   Footer : liens utiles, pas de phrase d'accompagnement
   ------------------------------------------------------------------------- */

.public-footer__contact--links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.public-footer__contact--links a {
  color: #ffffff;
  font-weight: 760;
}

.public-footer__contact--links span {
  color: rgba(219, 234, 254, 0.5);
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .public-page-main {
    width: min(calc(100% - 20px), 1240px);
    margin-top: 14px;
    margin-bottom: 24px;
  }

  .public-page-shell {
    padding: 11px;
  }

  .public-content-flow {
    gap: 10px;
    padding-top: 0;
  }

  .public-footer__contact--links {
    justify-content: flex-start;
  }

  .page-cgv .cgv-reference-header {
    color: var(--public-ink-soft) !important;
    border-bottom-color: rgba(255, 255, 255, 0.16) !important;
  }

  .page-cgv .cgv-readable p,
  .page-cgv .cgv-readable li,
  .page-cgv .cgv-readable h3,
  .page-cgv .cgv-content-subtitle,
  .page-cgv .cgv-readable h4 {
    color: var(--public-ink-soft) !important;
  }
}

/* -------------------------------------------------------------------------
   18N-bis — pages publiques : un seul niveau Glass principal
   ------------------------------------------------------------------------- */

.public-page-shell--flat {
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.page-contact .contact-card,
.page-retractation .retractation-card,
.page-retractation-confirmation .confirmation-card,
.page-cgv .cgv-control-bar,
.page-cgv .cgv-toc,
.page-cgv .cgv-content-section {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.1), transparent 34%),
    linear-gradient(145deg, rgba(15, 54, 91, 0.58), rgba(7, 25, 45, 0.5)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 18px 42px rgba(0, 8, 20, 0.18) !important;
  backdrop-filter: blur(13px) saturate(1.08);
  -webkit-backdrop-filter: blur(13px) saturate(1.08);
}

/* Le formulaire de rétractation est le contenu de la carte, pas une seconde carte. */
.page-retractation .retractation-form {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.page-retractation .retractation-refund-box {
  padding: 13px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* La référence de version CGV reste une information légère, pas un cadre supplémentaire. */
.page-cgv .cgv-reference-header {
  padding: 0 2px 9px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(125, 211, 252, 0.16) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .page-contact .contact-card,
  .page-retractation .retractation-card,
  .page-retractation-confirmation .confirmation-card,
  .page-cgv .cgv-control-bar,
  .page-cgv .cgv-toc,
  .page-cgv .cgv-content-section {
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}