/* ═══════════════════════════════════════════════════════════
   Expéria Park — Enquête de satisfaction
   Jetons repris du thème Avada d'experiapark.com :
   couleurs --awb-color*, Londrina Solid + Raleway,
   champs sable radius 15px h50, boutons corail pilule 50px.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Palette officielle du site */
  --awb-color1: #553421;   /* brun — texte, titres du formulaire */
  --awb-color2: #402611;   /* brun foncé */
  --awb-color3: #e96646;   /* corail — accent principal, boutons */
  --awb-color4: #cf5039;   /* corail foncé — hover */
  --awb-color5: #ffedc4;   /* crème — fond de page */
  --awb-color6: #f2d49c;   /* sable — fond des champs */
  --awb-color7: #ffffff;
  --awb-color8: #f2f3f5;
  --star: #f4cb4b;         /* --awb-custom_color_3 : étoiles actives */

  /* Jetons du thème */
  --form-radius: 15px;     /* --form_border_radius */
  --form-h: 50px;          /* --form_input_height */
  --btn-radius: 50px;      /* --button-border-radius */
  --erreur: #ba3e45;       /* --awb-custom_color_10 */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* corrige le bouton "précédent" visible à l'étape 1 */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Raleway', Arial, Helvetica, sans-serif;  /* body_typography */
  font-size: 16px;
  line-height: 1.6;
  color: var(--awb-color1);
  background: var(--awb-color5);
}

/* Texture grunge du site (le même SVG que sur experiapark.com,
   appliqué comme le .awb-background-pattern d'Avada).
   Pour l'héberger en local : téléchargez le fichier, placez-le dans
   assets/ et remplacez l'URL ci-dessous par assets/grunge-beige.svg */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url(https://www.experiapark.com/recrutement/wp-content/uploads/sites/6/2023/10/experiapark-mask-background_grunge-beige-3.svg);
  opacity: 1; mix-blend-mode: normal;
}
.site-header, .zipline, .survey-shell, .site-footer { position: relative; z-index: 1; }

h1, h2, h3, .display {
  font-family: 'Londrina Solid', Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--awb-color1);   /* titres du formulaire : --awb-text-color:var(--awb-color1) */
  margin: 0 0 .35em;
}

/* ── En-tête : logo officiel sur fond crème ──────────────── */
.site-header { text-align: center; padding: 28px 20px 0; }
.brand { display: inline-block; }
.brand-logo { height: 96px; width: auto; display: block; margin: 0 auto; }
.header-tag {
  font-family: 'Londrina Solid', sans-serif;
  color: var(--awb-color3);
  font-size: clamp(1.6rem, 4.5vw, 2.3rem);
  margin: 14px 0 0;
  text-transform: uppercase;
  letter-spacing: .02em;
}
@media (max-width: 560px) { .brand-logo { height: 72px; } }

/* ── Tyrolienne de progression ───────────────────────────── */
.zipline { max-width: 760px; margin: 26px auto 0; padding: 0 20px; position: relative; }
.zipline-rope {
  position: absolute; left: 40px; right: 40px; top: 15px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--awb-color6) 0 8px, transparent 8px 14px);
  border-radius: 2px;
}
.zipline-fill { height: 100%; width: 0%; background: var(--awb-color3); border-radius: 2px; transition: width .45s ease; }
.zipline-steps { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; }
.zipline-steps li { text-align: center; flex: 1; min-width: 0; }
.zip-dot {
  width: 34px; height: 34px; margin: 0 auto; border-radius: 50%;
  background: var(--awb-color7); border: 3px solid var(--awb-color6); color: var(--awb-color1);
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  transition: all .3s ease; position: relative; z-index: 1;
}
.zip-label {
  display: block; font-size: .68rem; margin-top: 6px; color: var(--awb-color1); opacity: .75;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px;
}
li.done .zip-dot { border-color: var(--awb-color3); background: var(--awb-color3); color: var(--awb-color5); }
li.current .zip-dot {
  border-color: var(--star); background: var(--star); color: var(--awb-color1);
  transform: scale(1.15); box-shadow: 0 0 0 6px rgba(244,203,75,.30);
}
li.current .zip-label { opacity: 1; }
@media (max-width: 640px) { .zip-label { display: none; } }

/* ── Zone du formulaire : à même le fond crème, comme le site ── */
.survey-shell { max-width: 760px; margin: 22px auto 60px; padding: 0 20px; }
.survey-card { background: transparent; padding: 10px 0 0; }
.step { animation: stepIn .35s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step { animation: none; } .zipline-fill { transition: none; } }

.step h2 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); }
.step h3 {
  font-size: 1.35rem; color: var(--awb-color3);
  margin-top: 1.8em; padding-bottom: .25em;
  border-bottom: 2px dashed var(--awb-color6);
}
.step-intro { color: var(--awb-color1); opacity: .85; margin: 0 0 1.5em; }

/* ── Champs — style Avada exact : sable, radius 15, h50 ──── */
.field { margin: 0 0 22px; }
.field > label, .field > .field-label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--awb-color1); }
.field .hint { font-weight: 400; opacity: .7; font-size: .85rem; }
.req { color: var(--awb-color3); }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
select, textarea {
  width: 100%; min-height: var(--form-h); padding: 12px 18px;
  font: inherit; color: var(--awb-color1);
  border: 1px solid var(--awb-color6);            /* --form_border_color */
  border-radius: var(--form-radius);
  background: var(--awb-color6);                  /* --form_bg_color */
  transition: border-color .2s, background .2s;
}
input::placeholder, textarea::placeholder { color: var(--awb-color1); opacity: .55; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--awb-color3); /* --form_focus_border_color */
  background: #f6dcaa;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23553421' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
  padding-right: 44px;
}
textarea { resize: vertical; min-height: 96px; }

/* Icônes de champs — équivalents des icônes maison du formulaire d'origine */
input[type="date"], input[type="email"], input[type="tel"],
[data-field="parc"] select {
  padding-left: 48px;
  background-repeat: no-repeat;
  background-position: left 16px center, right 18px center;
}
input[type="date"] {  /* calendrier (horaires du parc) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23553421' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
}
input[type="email"] {  /* enveloppe */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23553421' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}
input[type="tel"] {  /* téléphone */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23553421' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h4l2 5-2.5 1.5a12 12 0 0 0 5 5L16 12l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 4 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}
[data-field="parc"] select {  /* repère du parc + chevron */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23553421' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23553421' stroke-width='2'/%3E%3C/svg%3E");
}

/* Pastilles radio / checkbox — sable, sélection corail */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span {
  display: inline-block; padding: 10px 18px; border-radius: var(--form-radius);
  border: 1px solid var(--awb-color6); background: var(--awb-color6);
  color: var(--awb-color1); font-weight: 600; font-size: .93rem; cursor: pointer; transition: all .15s;
}
.pill input:checked + span { background: var(--awb-color3); border-color: var(--awb-color3); color: var(--awb-color5); }
.pill input:focus-visible + span { box-shadow: 0 0 0 4px rgba(233,102,70,.30); }
.pill:hover span { border-color: var(--awb-color3); }

/* Étoiles — inactives brun clair, actives jaune (custom_color_3) */
.stars { display: inline-flex; gap: 4px; }
.stars button {
  background: none; border: none; padding: 2px; cursor: pointer;
  font-size: 1.9rem; line-height: 1; color: rgba(85,52,33,.28); transition: transform .1s, color .1s;
}
.stars button.on { color: var(--star); text-shadow: 0 1px 0 rgba(85,52,33,.25); }
.stars button:hover { transform: scale(1.18); }
.stars button:focus-visible { outline: 3px solid var(--awb-color3); outline-offset: 2px; border-radius: 6px; }
.rating-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--awb-color6); flex-wrap: wrap;
}
.rating-row .field-label { margin: 0; font-weight: 600; flex: 1 1 260px; }

/* Échelle 1–10 */
.scale10 { display: flex; flex-wrap: wrap; gap: 6px; }
.scale10 button {
  width: 46px; height: 46px; border-radius: var(--form-radius);
  border: 1px solid var(--awb-color6); background: var(--awb-color6);
  color: var(--awb-color1); font: inherit; font-weight: 700; cursor: pointer; transition: all .15s;
}
.scale10 button:hover { border-color: var(--awb-color3); }
.scale10 button.on { background: var(--awb-color3); border-color: var(--awb-color3); color: var(--awb-color5); transform: scale(1.06); }
.scale-legende { display: flex; justify-content: space-between; font-size: .78rem; opacity: .7; margin-top: 5px; max-width: 520px; }

/* Consentements */
.consent { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: .93rem; }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--awb-color3); flex: none; }

/* Grille coordonnées */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

/* ── Boutons — pilule corail Avada (radius 50, Londrina 18 upper) ── */
.step-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.btn {
  font-family: 'Londrina Solid', sans-serif;      /* button_typography = typography3 */
  font-weight: 400; font-size: 18px; letter-spacing: .02em;
  text-transform: uppercase;                       /* --button_text_transform */
  padding: 13px 30px;
  border-radius: var(--btn-radius);
  border: 1px solid var(--awb-color3);
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: background .15s, color .15s, transform .12s;
  background: var(--awb-color3);                   /* gradient top/bottom = color3 */
  color: var(--awb-color5);                        /* accent = color5 */
}
.btn:hover { background: var(--awb-color4); border-color: var(--awb-color4); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--awb-color3); color: var(--awb-color5); }
/* Bouton "précédent" : fond transparent, texte/bordure corail (custom_color_1) */
.btn-ghost { background: transparent; color: var(--awb-color3); }
.btn-ghost:hover { background: var(--awb-color3); color: var(--awb-color5); }
.btn:focus-visible { outline: 3px solid var(--awb-color1); outline-offset: 2px; }

/* Erreurs */
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--erreur); background: #f9d9cf; }
.field .field-error { color: var(--erreur); font-size: .85rem; font-weight: 700; margin-top: 5px; display: none; }
.field.invalid .field-error { display: block; }
.rating-row.invalid { background: rgba(233,102,70,.12); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.form-error {
  color: var(--awb-color5); font-weight: 700; text-align: center;
  background: var(--erreur); border-radius: var(--form-radius); padding: 12px; margin: 18px 0 0;
}

/* Succès */
.success-card { text-align: center; padding-top: 50px; padding-bottom: 50px; }
.success-icon {
  width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--awb-color3); color: var(--star); font-size: 2.7rem;
  display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(233,102,70,.18);
}
.success-card h2 { font-size: 2.3rem; }
.success-card .btn { margin-top: 18px; }

/* Pied de page */
.site-footer { text-align: center; padding: 26px 20px 40px; color: var(--awb-color1); opacity: .8; font-size: .85rem; }
.site-footer a { color: var(--awb-color3); }


/* ── Sélecteur de langue (drapeaux) ─────────────────────── */
.lang-switch { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.lang-btn {
  line-height: 0; padding: 5px; cursor: pointer; display: inline-flex;
  border: 2px solid transparent; background: transparent;
  border-radius: 8px; transition: all .15s; filter: grayscale(.35); opacity: .7;
}
.lang-btn:hover { filter: none; opacity: 1; }
.lang-btn.on { filter: none; opacity: 1; border-color: var(--awb-color3); box-shadow: 0 2px 8px rgba(85,52,33,.2); }
.lang-btn .flag { box-shadow: 0 0 0 1px rgba(85,52,33,.2); border-radius: 4px; }

/* Champs demi-largeur (coordonnées) */
.grid-2 .field.demi { margin-bottom: 18px; }

/* Lien discret vers le back office */
.admin-link { opacity: .55; }
.admin-link:hover { opacity: 1; }

/* DEV 2.2 — reprise, réseau et progression */
.survey-banner{max-width:780px;margin:0 auto 14px;border-radius:var(--form-radius);padding:12px 14px;font-size:.9rem;line-height:1.45;box-shadow:0 4px 14px rgba(85,52,33,.12)}
.survey-banner--network{background:#fff1ef;border:1px solid #efb0a7;color:#8a2418;font-weight:700}
.survey-banner--draft{background:#fff7df;border:1px solid #e5c56c;color:var(--awb-color1);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.survey-banner--draft>div:last-child{display:flex;gap:7px}
.draft-action{border:0;border-radius:999px;background:var(--awb-color3);color:#fff;padding:8px 14px;font:700 .82rem Raleway,sans-serif;cursor:pointer}
.draft-action--ghost{background:transparent;color:var(--awb-color3);border:1px solid var(--awb-color3)}
.progress-meta{text-align:center;color:var(--awb-color1);opacity:.72;font-size:.8rem;margin:16px 0 -14px}
.form-error[hidden],.survey-banner[hidden]{display:none!important}
@media(max-width:560px){.survey-banner--draft{align-items:flex-start}.survey-banner--draft>div:last-child{width:100%}.draft-action{flex:1}.progress-meta{margin-bottom:-8px}}