/* ═══════════════════════════════════════════════════════
   Parlons livraisons ! — Enquête flash habitants
   ═══════════════════════════════════════════════════════ */

:root{
  --green:  #2bb673;
  --teal:   #14a0a5;
  --teal2:  #0c8fa0;
  --orange: #FF9800;
  --red:    #E53935;
  --blue:   #2196F3;
  --purple: #7C3AED;
  --text:   #1a2a3a;
  --muted:  #5a6a7a;
  --border: #d8e4ec;
  --bg:     #f4f8fb;
  --card:   #ffffff;
  --shadow: 0 2px 12px rgba(0,0,0,.09);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}

/* ─── BANDEAU ─── */
.banner{
  background: linear-gradient(135deg,#2bb673 0%,#14a0a5 60%,#0c8fa0 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.logo-interlud{ height:30px; max-width:180px; object-fit:contain; flex-shrink:0; }
.banner-center{ flex:1; text-align:center; padding:0 10px; min-width:0; }
.banner-center h1{ color:#fff; font-size:clamp(16px,2.5vw,22px); font-weight:800; line-height:1.15; }
.banner-center p{ color:rgba(255,255,255,.88); font-size:clamp(11px,1.4vw,13px); margin-top:3px; }
.banner-sub{ font-size:clamp(10px,1.2vw,12px) !important; color:rgba(255,255,255,.70) !important; margin-top:2px !important; }
.banner-right{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:8px; flex-shrink:0;
}
.btn-map-banner{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.18);
  border:1.5px solid rgba(255,255,255,.55);
  color:#fff;
  text-decoration:none;
  font-size:11.5px; font-weight:700;
  padding:6px 12px;
  border-radius:14px;
  white-space:normal;
  line-height:1.3;
  text-align:left;
  transition:background .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn-map-banner:hover{ background:rgba(255,255,255,.30); }

.banner-logos{ display:flex; align-items:center; gap:10px; }
.logo-ame{ height:36px; width:auto; }
.logo-mp{ height:32px; max-width:110px; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.logo-lai{ height:34px; width:34px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.2)); }

@media(max-width:600px){
  .banner{ padding:10px 14px; }
  .banner-center p{ display:none; }
  .logo-ame{ height:26px; }
  .logo-mp{ height:24px; }
  .logo-lai{ height:28px; width:28px; }
  .btn-map-label{ display:none; }   /* garde juste l'emoji 🗺️ sur mobile */
  .btn-map-banner{ padding:5px 9px; font-size:15px; }
}

/* ─── BARRE DE PROGRESSION ─── */
.progress-wrap{
  height: 4px;
  background: rgba(43,182,115,.18);
  position: sticky;
  top: 68px;
  z-index: 99;
}
.progress-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,var(--green),var(--teal));
  transition: width .2s ease;
}

/* ─── CONTENEUR ─── */
.container{
  max-width: 740px;
  margin: 0 auto;
  padding: 28px 16px 60px;
}

/* ─── INTRO ─── */
.intro-card{
  background: var(--card);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 28px;
  box-shadow: var(--shadow);
  border-left: 5px solid var(--green);
}
.intro-lead{
  font-size: 17px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 10px;
}
.intro-card p{ color: #334; font-size: 14.5px; line-height: 1.6; }
.intro-card p + p{ margin-top: 8px; }

.theme-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.pill{
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
}
.pill-vous    { background:rgba(43,182,115,.15);  color:#1a7a4a; }
.pill-colis   { background:rgba(20,160,165,.15);  color:#0b6e73; }
.pill-camions { background:rgba(255,152,0,.15);   color:#b35c00; }
.pill-nuisances{ background:rgba(229,57,53,.13); color:#9a1c1a; }
.pill-priorites{ background:rgba(33,150,243,.13); color:#0d5fa0; }

/* ─── SECTIONS DU FORMULAIRE ─── */
.form-section{
  background: var(--card);
  border-radius: 16px;
  padding: 24px 24px 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

.section-header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--border);
}
.section-icon{ font-size: 22px; line-height:1; }
.section-title{
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}
.optional-section{ font-size:13px; font-weight:500; color:var(--muted); }

/* Couleur de la barre par thème */
[data-theme="vous"]     .section-header{ border-color: var(--green); }
[data-theme="colis"]    .section-header{ border-color: var(--teal); }
[data-theme="camions"]  .section-header{ border-color: var(--orange); }
[data-theme="nuisances"].section-header{ border-color: var(--red); }
[data-theme="priorites"].section-header{ border-color: var(--blue); }
[data-theme="profil"]   .section-header{ border-color: #E91E8C; }
[data-theme="contact"]  .section-header{ border-color: var(--purple); }

/* ─── QUESTIONS ─── */
.question{ margin-bottom: 24px; }
.question:last-child{ margin-bottom: 0; }

.question-label{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.q-num{
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: linear-gradient(135deg,var(--green),var(--teal));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
}
.q-text{
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.q-constraint{
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.max-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(229,57,53,.1);
  color: #c0392b;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  width: fit-content;
}

/* ─── OPTIONS (checkbox / radio) ─── */
.options-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-card{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fafcfd;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.option-card:hover{
  border-color: #aac4d8;
  background: #f0f6fa;
}
.option-card input[type="radio"],
.option-card input[type="checkbox"]{
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px; height: 18px;
  accent-color: var(--green);
  cursor: pointer;
}
.option-body{
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
}
.option-note{
  font-size: 12px;
  color: var(--muted);
  display: block;
}

/* Carte sélectionnée */
.option-card:has(input:checked){
  border-color: var(--green);
  background: rgba(43,182,115,.07);
}
[data-theme="camions"]  .option-card:has(input:checked){ border-color:var(--orange); background:rgba(255,152,0,.07); }
[data-theme="nuisances"].option-card:has(input:checked){ border-color:var(--red);    background:rgba(229,57,53,.07); }
[data-theme="priorites"].option-card:has(input:checked){ border-color:var(--blue);   background:rgba(33,150,243,.07); }

/* ─── CHAMP LIBRE ─── */
.text-input,
.textarea-input{
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  transition: border-color .15s;
}
select.select-input{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6a7a' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.text-input:focus,
.textarea-input:focus{
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20,160,165,.15);
}
.textarea-input{ resize: vertical; min-height: 100px; }

.field-free{ margin-top: 14px; }
.field-free-label{
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.optional{ font-size:12px; }

/* ─── ÉCHELLE DE LIKERT ─── */
.likert-wrap{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.likert-label-left,
.likert-label-right{
  font-size: 12.5px;
  color: var(--muted);
  flex-shrink: 0;
  max-width: 110px;
  line-height: 1.3;
  text-align: center;
}
.likert-scale{
  display: flex;
  gap: 8px;
  flex: 1;
  justify-content: center;
}
.likert-btn{
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.likert-btn input{ position:absolute; opacity:0; width:0; height:0; }
.likert-btn span{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 2px solid var(--border);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 800;
  color: var(--muted);
  background: #fff;
  transition: all .15s;
}
.likert-btn:hover span{
  border-color: var(--teal);
  color: var(--teal);
}
.likert-btn input:checked + span{
  background: linear-gradient(135deg,var(--green),var(--teal));
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 2px 8px rgba(43,182,115,.4);
}

@media(max-width:500px){
  .likert-wrap{ flex-direction:column; gap:10px; }
  .likert-label-left,.likert-label-right{ max-width:none; }
  .likert-btn span{ width:42px; height:42px; font-size:15px; }
}

/* ─── NOTE DE CONFIDENTIALITÉ ─── */
.privacy-note{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

/* ─── MESSAGES D'ERREUR ─── */
.field-error{
  margin-top: 8px;
  font-size: 12.5px;
  color: #c0392b;
  font-weight: 600;
}
.hidden{ display:none !important; }

/* ─── BOUTON ENVOI ─── */
.submit-wrap{
  text-align: center;
  margin-top: 8px;
}
.btn-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg,var(--green),var(--teal));
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(43,182,115,.4);
  transition: filter .15s, transform .1s;
  min-width: 260px;
}
.btn-submit:hover{ filter:brightness(1.06); }
.btn-submit:active{ transform:scale(.98); }
.btn-submit:disabled{ opacity:.65; cursor:not-allowed; }
.submit-note{
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

/* ─── SPINNER ─── */
.spinner{
  width:16px; height:16px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .6s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ─── ÉCRAN DE CONFIRMATION ─── */
.confirm-screen{
  text-align: center;
  background: var(--card);
  border-radius: 20px;
  padding: 48px 32px;
  box-shadow: var(--shadow);
  animation: fadeIn .5s ease;
}
@keyframes fadeIn{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.confirm-icon{ font-size: 56px; margin-bottom: 18px; }
.confirm-screen h2{
  font-size: 24px;
  font-weight: 800;
  color: var(--green);
  margin-bottom: 16px;
}
.confirm-screen p{
  font-size: 15px;
  color: #334;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 12px;
}
.btn-map{
  display: inline-block;
  margin-top: 20px;
  background: linear-gradient(135deg,var(--green),var(--teal));
  color: #fff;
  text-decoration: none;
  padding: 13px 30px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(43,182,115,.35);
  transition: filter .15s;
}
.btn-map:hover{ filter:brightness(1.06); }

/* ─── PIED DE PAGE ─── */
.site-footer{
  text-align: center;
  padding: 24px 20px;
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px solid var(--border);
}