/* Charte HMV enquetes - calquee sur le rendu Jotform existant. Couleur station via --station. */
:root{
  --station:#61accf; --station-dark:#4f97ba; --ink:#2b2b38; --muted:#6b7280; --line:#e6e9ee; --bg:#f3f4f6;
  --sjs-font-family:'Lato',-apple-system,Segoe UI,Roboto,sans-serif;
  --sjs-primary-backcolor:var(--station);
  --sjs-primary-backcolor-dark:var(--station-dark);
  --sjs-primary-forecolor:#ffffff;
  --sjs-general-backcolor:#ffffff;
  --sjs-general-forecolor:var(--ink);
  --sjs-corner-radius:6px; --sjs-base-unit:8px;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:'Lato',-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); background:var(--bg); }

/* Logo centre au-dessus de la carte, comme Jotform */
.brand{ text-align:center; padding:26px 16px 18px; }
.brand img{ width:340px; max-width:74%; height:auto; }

/* Carte blanche */
.card{ position:relative; max-width:752px; margin:0 auto 48px; background:#fff; border:1px solid var(--line);
       border-radius:8px; overflow:hidden; box-shadow:0 10px 30px -22px rgba(20,40,60,.3); }
.lang{ position:absolute; top:12px; right:12px; z-index:6; display:flex; background:#fff;
       border:1px solid var(--line); border-radius:999px; overflow:hidden; box-shadow:0 2px 10px -4px rgba(0,0,0,.25); }
.lang button{ border:none; background:#fff; color:var(--muted); font-family:'Lato',sans-serif;
       font-weight:700; font-size:12px; letter-spacing:.5px; padding:6px 13px; cursor:pointer; }
.lang button.on{ background:var(--station); color:#fff; }
.card .hero{ display:block; width:100%; height:auto; }
.intro{ padding:26px 28px 2px; text-align:center; }
.intro h1{ margin:0 0 6px; font-size:24px; font-weight:800; color:var(--ink); line-height:1.25; }
.intro p{ margin:0; color:var(--muted); font-size:14px; }

/* barre de progression fine (facultative, discrete) */
.pbar{ height:4px; background:var(--line); margin:18px 28px 0; border-radius:999px; overflow:hidden; }
.pbar .fill{ height:100%; width:0; background:var(--station); transition:width .3s; }

.shell{ padding:8px 10px 0; }

/* SurveyJS : fondre dans la carte (pas de fond ni ombre propre) */
#surveyElement .sd-root-modern,#surveyElement .sd-container-modern{ background:transparent !important; }
#surveyElement .sd-body{ padding:8px 18px 0 !important; }
.sd-title.sd-container-modern__title{ display:none !important; }
#surveyElement .sd-page{ background:transparent !important; box-shadow:none !important; border:none !important; padding:6px 0 0 !important; }
.sd-page__title,.sd-page__description{ display:none !important; }

/* En-tete de section (control_head Jotform) */
.sect{ margin:18px 6px 2px; font-size:18px; font-weight:800; color:var(--ink); }
.sect-sub{ margin:2px 6px 10px; font-size:13px; color:var(--muted); }

/* Questions facon Jotform */
#surveyElement .sd-question{ padding:14px 10px 10px !important; }
.sd-question__title{ font-weight:700 !important; font-size:16px !important; color:var(--ink) !important; }
.sd-question__required-text{ color:#e34b4b !important; }
.sd-question__description,.sd-description{ color:var(--muted) !important; font-size:12.5px !important; margin-top:8px !important; font-style:normal !important; }

/* Etoiles : 2 SVG absolus par etoile -> le label doit garder une largeur fixe (sinon il s'effondre),
   et l'espacement vient d'une marge (toutes les etoiles sont dans un seul fieldset, pas de gap utile). */
.sd-rating{ display:flex; flex-wrap:wrap; }
.sd-rating__item-star{ width:26px !important; height:26px !important; margin:0 12px 8px 0 !important; padding:0 !important; }
.sd-rating__item-star svg{ width:26px !important; height:26px !important; fill:#c7ccd4; }
.sd-rating__item-star--selected svg,.sd-rating__item-star:hover svg{ fill:var(--station); }

/* Coeurs (questions de recommandation / NPS) : glyphe en ::after, centre dans le label */
.rating-hearts .sd-rating__item-star{ display:inline-flex !important; align-items:center; justify-content:center; }
.rating-hearts .sd-rating__item-star svg{ display:none; }
.rating-hearts .sd-rating__item-star::after{ content:"\2665"; font-size:23px; line-height:1; color:#c7ccd4; }
.rating-hearts .sd-rating__item-star--selected::after,
.rating-hearts .sd-rating__item-star:hover::after{ color:var(--station); }

/* Champs texte / selects */
.sd-input{ border:1px solid #cfd4db !important; border-radius:5px !important; }
.sd-input:focus{ border-color:var(--station) !important; box-shadow:0 0 0 2px color-mix(in srgb, var(--station) 28%, transparent) !important; }

/* Choix radio / checkbox */
.sd-item__control:checked + .sd-item__decorator{ background:var(--station) !important; border-color:var(--station) !important; }

/* Boutons de navigation facon Jotform (bleu, radius 4px, a droite) */
.sd-action-bar{ padding:30px 18px !important; justify-content:center !important; align-items:center !important; }
.sd-btn{ border-radius:4px !important; font-weight:700 !important; font-family:'Lato',sans-serif !important; padding:12px 26px !important; }
.sd-btn--action,.sd-navigation__complete-btn,.sd-navigation__next-btn{ background:var(--station) !important; color:#fff !important; border:none !important; }
.sd-navigation__prev-btn{ background:#fff !important; color:var(--muted) !important; border:1px solid #cfd4db !important; }

/* Interstitiel funnel + remerciement */
.panel{ padding:34px 28px 38px; text-align:center; }
.panel .big{ font-size:40px; margin:0 0 6px; }
.panel h2{ margin:4px 0 8px; color:var(--ink); font-size:22px; font-weight:800; }
.panel p{ color:#4b5563; font-size:14.5px; line-height:1.55; margin:8px auto; max-width:540px; }
.prize{ background:#eef6fb; border:1px solid #d7e9f3; border-radius:8px; padding:14px 16px; margin:18px auto; max-width:540px; font-size:14px; color:var(--ink); }
.prize b{ color:var(--station-dark); }
.btns{ margin-top:22px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{ border:none; cursor:pointer; font-family:'Lato',sans-serif; font-weight:700; font-size:15px; padding:13px 24px; border-radius:4px; }
.btn-primary{ background:var(--station); color:#fff; }
.btn-ghost{ background:#fff; color:var(--muted); border:1px solid #cfd4db; }

/* Mobile : photo pleine largeur, carte sans marges laterales (comme Jotform) */
@media (max-width:560px){
  .card{ margin:0 0 30px; border-radius:0; border-left:none; border-right:none; }
  .brand{ padding:20px 16px 14px; }
  .intro{ padding:22px 18px 2px; }
  .intro h1{ font-size:22px; }
  #surveyElement .sd-body{ padding:6px 8px 0 !important; }
  .sd-rating__item-star{ width:30px !important; height:30px !important; margin:0 14px 10px 0 !important; }
  .sd-rating__item-star svg{ width:30px !important; height:30px !important; }
  .rating-hearts .sd-rating__item-star::after{ font-size:26px; }
  .sd-btn{ width:100%; }
  .sd-action-bar{ flex-direction:column-reverse; gap:10px; }
}