/* =====================================================
   Base
===================================================== */

:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#475569;

  --line:rgba(15,23,42,.10);
  --soft:rgba(15,23,42,.06);

  --blue:#2b8fbf;
  --blue-2:#1f7aa6;

  --orange:#f08a2b;
  --orange-2:#e67816;

  --card:#ffffff;

  --radius:18px;
  --shadow:0 10px 30px rgba(15,23,42,.10);
  --shadow-soft:0 6px 16px rgba(15,23,42,.10);
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--blue-2); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
}

h1,h2,h3{
  margin:0 0 10px 0;
  letter-spacing:-0.02em;
}

h1{
  font-size:clamp(32px,4vw,46px);
  line-height:1.08;
}

h2{
  font-size:clamp(22px,2.6vw,30px);
  margin-bottom:18px;
}

p{ margin:0 0 12px 0; color:var(--muted); }

.lead{
  font-size:18px;
  color:rgba(15,23,42,.70);
  margin-top:-6px;
  margin-bottom:18px;
}

/* =====================================================
   Header (cohérent partout)
===================================================== */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
}

.logo{ display:flex; align-items:center; }
.logo img{ height:44px; width:auto; }

.main-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.main-nav a{
  color:var(--text);
  font-weight:650;
  font-size:15px;
  padding:10px 12px;
  border-radius:999px;
  transition:background 180ms ease, transform 180ms ease, color 180ms ease;
}

.main-nav a:hover{
  background:rgba(15,23,42,.06);
  transform:translateY(-1px);
  text-decoration:none;
}

.main-nav a.active{
  background:rgba(43,143,191,.12);
  color:var(--blue-2);
}

.main-nav .btn-nav{
  background:var(--orange);
  color:#fff;
  box-shadow:0 10px 20px rgba(240,138,43,.25);
  border:1px solid rgba(0,0,0,.06);
}

.main-nav .btn-nav:hover{
  background:var(--orange-2);
}

/* =====================================================
   Sections
===================================================== */

.section-light{
  background:#f6fafc;
  border-top:1px solid var(--soft);
  border-bottom:1px solid var(--soft);
  padding:56px 0;
}

.section-white{
  background:#ffffff;
  padding:56px 0;
}

/* =====================================================
   Hero
===================================================== */

.hero{
  padding:56px 0 44px 0;
  background:
    radial-gradient(1000px 320px at 20% 25%, rgba(43,143,191,.18), transparent 60%),
    radial-gradient(900px 340px at 80% 30%, rgba(240,138,43,.14), transparent 55%),
    linear-gradient(180deg, #f7fbff, #ffffff 68%);
  border-bottom:1px solid var(--soft);
}

.hero-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:22px;
  align-items:start;
}

.eyebrow{
  font-size:14px;
  color:rgba(15,23,42,.65);
  margin-bottom:10px;
}

.hero-subtitle{
  font-size:18px;
  max-width:56ch;
  margin-top:10px;
}

.hero-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.hero-actions-wrapper{
  margin-top:18px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}

.btn-primary,.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:750;
  padding:14px 18px;
  font-size:16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  transition:transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  text-decoration:none !important;
}

.btn-primary{
  background:var(--orange);
  color:#fff;
  box-shadow:0 12px 24px rgba(240,138,43,.25);
}

.btn-primary:hover{
  background:var(--orange-2);
  transform:translateY(-1px);
}

.btn-secondary{
  background:rgba(43,143,191,.12);
  color:var(--blue-2);
  border:1px solid rgba(43,143,191,.18);
}

.btn-secondary:hover{
  background:rgba(43,143,191,.16);
  transform:translateY(-1px);
}

/* Ajout neutre : un bouton “outline” (utile sur les formulaires, ne casse rien ailleurs) */
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:750;
  padding:14px 18px;
  font-size:16px;
  border-radius:999px;
  border:1px solid rgba(43,143,191,.35);
  background:transparent;
  color:var(--blue-2);
  transition:transform 180ms ease, background 180ms ease;
  text-decoration:none !important;
}
.btn-outline:hover{
  background:rgba(43,143,191,.10);
  transform:translateY(-1px);
}

.hero-box{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow-soft);
  height:fit-content;
  align-self:start;
}

.box-title{
  font-size:28px;
  margin:0 0 12px 0;
}

.box-contact{
  padding-top:12px;
  border-top:1px solid var(--soft);
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.muted{ color:rgba(15,23,42,.65); }

/* =====================================================
   Callouts (info / important / but)
===================================================== */

.callout{
  width:100%;
  margin-top:8px;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid rgba(15,23,42,.10);
  background:rgba(15,23,42,.04);
  color:rgba(15,23,42,.85);
}

.callout strong{ color:var(--text); }

.callout-good{
  background:rgba(43,143,191,.10);
  border-color:rgba(43,143,191,.16);
}

.callout-warn{
  background:rgba(240,138,43,.10);
  border-color:rgba(240,138,43,.18);
}

/* =====================================================
   Cards (priorités)
===================================================== */

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:12px;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
  border-color:rgba(43,143,191,.28);
}

.card h3{ font-size:18px; margin-bottom:10px; }

/* =====================================================
   Schedule (dates réunions)
===================================================== */

.schedule-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  margin-top:14px;
}

.schedule-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 16px;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.schedule-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-soft);
  border-color:rgba(240,138,43,.28);
}

.schedule-date{
  font-weight:850;
  color:var(--text);
  font-size:18px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.schedule-time{
  font-weight:850;
  color:rgba(15,23,42,.70);
  font-size:16px;
}

.schedule-place{
  width:fit-content;
  background:rgba(43,143,191,.12);
  border:1px solid rgba(43,143,191,.18);
  color:var(--blue-2);
  padding:8px 12px;
  border-radius:999px;
  font-weight:750;
}

/* =====================================================
   Steps blocks (génériques)
===================================================== */

.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:12px;
}

.step{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 0 0 rgba(0,0,0,0);
}

.step h3{
  font-size:18px;
  margin-bottom:10px;
}

/* =====================================================
   Méthode : contenus aérés, titres visibles
===================================================== */

.content-stack{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.content-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

.content-cards.single-col{
  grid-template-columns:1fr;
}

.content-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow-soft);
}

.content-card h3{
  margin-top:6px;
  font-size:18px;
}

.content-kicker{
  font-size:13px;
  color:rgba(15,23,42,.65);
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:none;
}

.link-cta{
  display:inline-block;
  margin-top:10px;
  font-weight:750;
  color:var(--blue-2);
}

.two-panels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow-soft);
}

.panel h3{
  font-size:18px;
  margin-bottom:10px;
}

.bullets{
  margin:0;
  padding-left:18px;
  color:rgba(15,23,42,.80);
}

.bullets li{
  margin:10px 0;
  line-height:1.6;
}

/* =====================================================
   Méthode : "En 4 étapes" (alignement)
===================================================== */

.method-box{
  padding:22px;
}

.method-steps{
  list-style:none;
  padding:0;
  margin:0 0 14px 0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.method-steps li{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.step-num{
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(240,138,43,.14);
  border:1px solid rgba(240,138,43,.18);
  color:rgba(15,23,42,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  flex:0 0 auto;
}

.step-content{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.step-title{
  font-weight:850;
  color:var(--text);
}

.step-desc{
  color:rgba(15,23,42,.70);
  font-size:14px;
}

/* =====================================================
   Footer (cohérent partout)
===================================================== */

.site-footer{
  background:#0b1220;
  color:rgba(255,255,255,.92);
  padding:34px 0;
  margin-top:40px;
}

.site-footer p{
  color:rgba(255,255,255,.75);
  margin:8px 0 0 0;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 0.9fr 0.9fr;
  gap:18px;
  align-items:start;
}

.site-footer a{
  color:rgba(255,255,255,.92);
  font-weight:650;
  line-height:1.9;
  text-decoration:none;
}

.site-footer a:hover{ text-decoration:underline; }

/* =====================================================
   Responsive
===================================================== */

@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }

  .cards{ grid-template-columns:1fr; }

  .schedule-grid{ grid-template-columns:1fr; }

  .steps{ grid-template-columns:1fr; }

  .content-cards{ grid-template-columns:1fr; }

  .two-panels{ grid-template-columns:1fr; }

  .footer-grid{ grid-template-columns:1fr; }

  .main-nav{ gap:6px; }
}

/* =====================================================
   Accessibilité : focus clavier
===================================================== */

a:focus-visible, button:focus-visible{
  outline:3px solid rgba(43,143,191,.45);
  outline-offset:2px;
  border-radius:10px;
}

/* =====================================================
   AJOUTS — Proposer une idée (SCOPÉ À LA PAGE)
   Objectif : améliorer lisibilité, cohérence header/footer,
   sans impacter les autres pages.
===================================================== */

.idea-page .page-wrap{
  max-width:1100px;
  margin:auto;
  padding:30px 24px 60px;
}

.idea-page .page-title{
  font-size:2rem;
  line-height:1.15;
  margin:10px 0 12px;
}

.idea-page .page-lead{
  max-width:78ch;
  margin-bottom:18px;
  color:rgba(15,23,42,.85);
}

.idea-page .idea-grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:24px;
  align-items:start;
}

@media (max-width: 900px){
  .idea-page .idea-grid{ grid-template-columns:1fr; }
}

/* Panel (sur cette page : un peu plus “premium”) */
.idea-page .panel{
  padding:20px;
}

/* Form */
.idea-page label{
  display:block;
  font-weight:750;
  margin:14px 0 6px;
}

.idea-page .req{
  color:#b42318;
  font-weight:900;
}

.idea-page .help{
  color:rgba(15,23,42,.60);
  font-size:.92rem;
  margin:6px 0 0;
}

.idea-page input[type="text"],
.idea-page input[type="email"],
.idea-page input[type="tel"],
.idea-page textarea,
.idea-page select{
  width:100%;
  padding:12px 12px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.18);
  background:#fff;
  font:inherit;
  outline:none;
}

.idea-page textarea{
  min-height:120px;
  resize:vertical;
}

.idea-page input:focus,
.idea-page textarea:focus,
.idea-page select:focus{
  border-color: rgba(43,143,191,.45);
  box-shadow: 0 0 0 4px rgba(43,143,191,.12);
}

.idea-page .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

@media (max-width: 700px){
  .idea-page .row{ grid-template-columns:1fr; }
}

.idea-page .actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

/* Notice (texte “liste” + meilleure lisibilité) */
.idea-page .notice{
  background: rgba(43,143,191,.08);
  border:1px solid rgba(43,143,191,.20);
  border-radius:12px;
  padding:12px 14px;
  color:rgba(15,23,42,.85);
  margin-top:12px;
  font-size:.95rem;
  line-height:1.45;
}

/* Colonne conseils : lisibilité */
.idea-page .tips-title{
  font-size:1.25rem;
  margin-bottom:10px;
}

.idea-page .tips-list{
  margin:0 0 14px;
  padding-left:18px;
  color:rgba(15,23,42,.88);
}

.idea-page .tips-list li{
  margin:10px 0;
  line-height:1.45;
}

.idea-page .tips-contact{
  background: rgba(43,143,191,.08);
  border:1px solid rgba(43,143,191,.20);
  border-radius:12px;
  padding:12px 14px;
  margin-top:12px;
}

.idea-page .tips-contact strong{
  color:var(--text);
}

.idea-page .hidden{ display:none !important; }
/* =====================================================
   AJOUTS — Proposer une idée (SCOPÉ À LA PAGE)
   Objectif : améliorer lisibilité + colonne Conseils
   sans impacter les autres pages.
===================================================== */

/* IMPORTANT :
   Dans proposer-une-idee.html, ajoute class="idea-page" sur <body>
*/

.idea-page .page-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:30px 24px 60px;
}

.idea-page .page-title{
  font-size:clamp(28px, 3.2vw, 44px);
  line-height:1.12;
  margin:10px 0 12px;
  color:var(--text);
}

.idea-page .page-lead{
  max-width:78ch;
  margin-bottom:18px;
  color:rgba(15,23,42,.78);
}

.idea-page .idea-grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:24px;
  align-items:start;
}

@media (max-width: 900px){
  .idea-page .idea-grid{ grid-template-columns:1fr; }
}

/* Colonne droite : meilleure hiérarchie visuelle */
.idea-page .tips-title{
  font-size:20px;
  margin:0 0 10px 0;
  color:var(--text);
}

.idea-page .tips-list{
  margin:0 0 14px 0;
  padding-left:18px;
  color:rgba(15,23,42,.84);
}

.idea-page .tips-list li{
  margin:10px 0;
  line-height:1.5;
}

/* Bloc contact dans la colonne Conseils */
.idea-page .tips-contact{
  background:rgba(43,143,191,.08);
  border:1px solid rgba(43,143,191,.20);
  border-radius:var(--radius);
  padding:14px 14px;
  margin-top:12px;
}

.idea-page .tips-contact strong{
  display:block;
  margin-top:6px;
  color:var(--text);
}

/* Formulaire : labels + champs plus lisibles */
.idea-page label{
  display:block;
  font-weight:750;
  margin:14px 0 6px 0;
  color:var(--text);
}

.idea-page .req{
  color:#b42318;
  font-weight:900;
}

.idea-page input[type="text"],
.idea-page input[type="email"],
.idea-page input[type="tel"],
.idea-page textarea,
.idea-page select{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.18);
  background:#fff;
  font:inherit;
  outline:none;
}

.idea-page textarea{
  min-height:130px;
  resize:vertical;
}

.idea-page input:focus,
.idea-page textarea:focus,
.idea-page select:focus{
  border-color: rgba(43,143,191,.45);
  box-shadow: 0 0 0 4px rgba(43,143,191,.12);
}

/* Lignes 2 colonnes si tu as des champs côte à côte */
.idea-page .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

@media (max-width: 700px){
  .idea-page .row{ grid-template-columns:1fr; }
}

/* Boutons de fin : aération */
.idea-page .actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

/* Texte légal / consentement : plus propre + correction “liste” */
.idea-page .notice{
  background:rgba(43,143,191,.08);
  border:1px solid rgba(43,143,191,.20);
  border-radius:12px;
  padding:12px 14px;
  color:rgba(15,23,42,.85);
  margin-top:12px;
  font-size:14px;
  line-height:1.45;
}
/* =====================================================
   AJOUTS — Compat header/footer + Questionnaire (scopé)
   À COLLER TOUT EN BAS de styles.css (sans rien supprimer)
===================================================== */

/* ---------- 1) Compatibilité HEADER : .nav (ancien) -> style .main-nav ---------- */

.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav a{
  color:var(--text);
  font-weight:650;
  font-size:15px;
  padding:10px 12px;
  border-radius:999px;
  transition:background 180ms ease, transform 180ms ease, color 180ms ease;
}

.nav a:hover{
  background:rgba(15,23,42,.06);
  transform:translateY(-1px);
  text-decoration:none;
}

/* Si une page met "active" sur le lien */
.nav a.active{
  background:rgba(43,143,191,.12);
  color:var(--blue-2);
}

/* CTA "Questionnaire" (ancien : nav-cta) */
.nav .nav-cta{
  background:var(--orange);
  color:#fff;
  box-shadow:0 10px 20px rgba(240,138,43,.25);
  border:1px solid rgba(0,0,0,.06);
}

.nav .nav-cta:hover{
  background:var(--orange-2);
}

/* ---------- 2) Compatibilité FOOTER : <footer><div class="footer-inner">... ---------- */

footer{
  background:#0b1220;
  color:rgba(255,255,255,.92);
  padding:34px 0;
  margin-top:40px;
}

footer a{
  color:rgba(255,255,255,.92);
  font-weight:650;
  line-height:1.9;
  text-decoration:none;
}

footer a:hover{ text-decoration:underline; }

.footer-inner{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
  display:grid;
  grid-template-columns:1.2fr 0.9fr 0.9fr;
  gap:18px;
  align-items:start;
}

@media (max-width: 980px){
  .footer-inner{ grid-template-columns:1fr; }
}

/* ---------- 3) QUESTIONNAIRE : améliorations (SCOPÉES) ---------- */
/* IMPORTANT : dans questionnaire.html, mets <body class="survey-page"> */

.survey-page .page-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:34px 24px 60px;
}

/* “Votre avis compte” : plus visible */
.survey-page .kicker{
  font-size:.9rem;
  font-weight:800;
  padding:8px 12px;
  border-width:2px;
}

/* Titre + intro : un peu plus lisibles */
.survey-page .page-title{
  font-size:clamp(28px, 3.2vw, 44px);
  line-height:1.12;
}

.survey-page .page-lead{
  color:rgba(15,23,42,.80);
  font-size:16px;
}

/* Stepper : meilleure lisibilité “senior” */
.survey-page .step-item{
  padding:16px 16px;
  border-width:2px;
}

.survey-page .step-item strong{
  font-size:16px;
}

.survey-page .step-item small{
  font-size:14px;
}

/* Boutons : taille confortable */
.survey-page .btn{
  padding:13px 18px;
  font-size:16px;
}

/* Boîte “Thèmes déjà ajoutés” : mieux séparée */
.survey-page .saved-box{
  margin-top:16px;
}

/* Colonne droite “Comment ça marche” : plus contrastée */
.survey-page .right-card h3{
  font-size:20px;
}

.survey-page .right-card p,
.survey-page .right-card li{
  font-size:15px;
  color:rgba(15,23,42,.78);
}

.survey-page .right-card ul{
  margin-top:10px;
}

/* Notice mail : plus lisible */
.survey-page .notice{
  font-size:15px;
  line-height:1.45;
}
/* =========================================================
   QUESTIONNAIRE (Option A) — AJOUT uniquement, page ciblée
   (n'impacte pas les autres pages)
========================================================= */

.survey-page .after-theme{
  margin-top: 14px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(10,123,167,.22);
  background: rgba(10,123,167,.08);
}

.survey-page .after-theme-title{
  font-weight: 900;
  font-size: 16px;
  color: rgba(15,23,42,.92);
}

.survey-page .after-theme-sub{
  margin-top: 4px;
  color: rgba(15,23,42,.72);
  font-size: 14px;
}

.survey-page .after-theme-actions{
  margin-top: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Rend “Votre avis compte” plus visible (sans casser le style global) */
.survey-page .kicker{
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}

/* Footer propre mais uniquement sur cette page */
.survey-page footer{
  margin-top: 0;
  background: #f3f8fb;
  border-top: 1px solid rgba(15,23,42,.10);
}

.survey-page .footer-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 18px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px){
  .survey-page .footer-inner{
    grid-template-columns: 1fr;
  }
}

.survey-page footer a{
  color: #0a7ba7;
  text-decoration: none;
}

.survey-page footer a:hover{
  text-decoration: underline;
}
/* =========================================================
   HEADER — FIX Questionnaire uniquement (body.survey-page)
   Objectif: même header que index, logo normal, menu aligné
========================================================= */

.survey-page .site-header{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.10);
}

.survey-page .header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
}

/* Empêche le logo géant */
.survey-page .brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.survey-page .brand img{
  height: 46px;   /* ajuste si besoin: 42–52 */
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

/* Menu comme index */
.survey-page .nav{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.survey-page .nav a{
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  color: rgba(15,23,42,.86);
}

.survey-page .nav a:hover{
  background: rgba(10,123,167,.08);
}

.survey-page .nav a.active{
  background: rgba(10,123,167,.12);
  color: #0a7ba7;
  border: 1px solid rgba(10,123,167,.22);
}

/* Responsive: on empile proprement */
@media (max-width: 860px){
  .survey-page .header-inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .survey-page .nav{
    justify-content: flex-start;
  }
}
/* =========================================================
   FIX FINAL — Questionnaire uniquement (footer + header)
   À coller TOUT EN BAS de styles.css
   Objectif :
   - Annuler le footer clair (texte illisible) sur questionnaire
   - Revenir à un footer identique aux autres pages
   - Sécuriser la taille du logo/header sur questionnaire
========================================================= */

/* ---------- FOOTER : forcer le modèle dark, lisible ---------- */
.survey-page footer{
  background:#0b1220 !important;
  color:rgba(255,255,255,.92) !important;
  border-top:none !important;
  margin-top:40px !important;
}

.survey-page footer p,
.survey-page footer small,
.survey-page footer div{
  color:rgba(255,255,255,.80) !important;
}

.survey-page footer a{
  color:rgba(255,255,255,.92) !important;
  text-decoration:none;
}

.survey-page footer a:hover{
  text-decoration:underline;
}

/* remettre la grille footer “normale” (comme les autres pages) */
.survey-page .footer-inner{
  width:min(1120px, calc(100% - 40px)) !important;
  margin:0 auto !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:1.2fr 0.9fr 0.9fr !important;
  gap:18px !important;
  align-items:start !important;
}

@media (max-width: 980px){
  .survey-page .footer-inner{
    grid-template-columns:1fr !important;
  }
}

/* ---------- HEADER : empêcher logo géant / header “cassé” ---------- */
/* Quel que soit le HTML exact de la page, on borne toute image dans le header */
.survey-page header img{
  max-height:46px !important;
  height:auto !important;
  width:auto !important;
  object-fit:contain !important;
}

/* si la page utilise .brand, on verrouille aussi */
.survey-page .brand img{
  height:46px !important;
  width:auto !important;
  max-width:220px !important;
  object-fit:contain !important;
}
/* =========================================================
   QUESTIONNAIRE — correctifs UX (à coller tout en bas)
   Scopé via body.survey-page
========================================================= */

.survey-page .stepChip{
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
  border:1px solid rgba(148,163,184,35);
  background: rgba(148,163,184,10);
  color: rgba(15,23,42,85);
}

.survey-page .stepChip.is-active{
  border:1px solid rgba(2,132,199,35);
  background: rgba(56,189,248,12);
}

/* Boutons thèmes */
.survey-page .themeBtn{
  text-align:left;
  border:1px solid rgba(148,163,184,35);
  background:#fff;
  border-radius:16px;
  padding:14px 14px;
  cursor:pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.survey-page .themeBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(2,132,199,35);
  background: rgba(56,189,248,06);
}

.survey-page .themeBtn .t-title{
  font-weight:950;
  margin-bottom:2px;
}

.survey-page .themeBtn .t-desc{
  color: rgba(15,23,42,70);
  font-size:14px;
}

.survey-page .themeBtn.is-done{
  opacity:.55;
  cursor:not-allowed;
  filter: grayscale(10%);
}

/* Radios note (pills) */
.survey-page .ratingPill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,35);
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
}

.survey-page .radioPill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,35);
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
}

/* Champs formulaire (cohérence avec proposer-une-idee) */
.survey-page .lbl{
  display:block;
  font-weight:900;
  margin-bottom:6px;
  color: rgba(15,23,42,90);
}

.survey-page .req{
  color:#b42318;
  font-weight:900;
}

/* Mise en page champs */
.survey-page .survey-fields-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

@media (max-width: 780px){
  .survey-page .survey-fields-grid{ grid-template-columns: 1fr; }
}

/* Inputs/select/textarea : plein champ mais lisibles */
.survey-page form select,
.survey-page form input[type="text"],
.survey-page form input[type="email"],
.survey-page form input[type="tel"],
.survey-page form textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,18);
  background:#fff;
  font:inherit;
  outline:none;
}

/* IMPORTANT : borne la largeur “visuelle” des champs sur desktop */
.survey-page form .field{
  max-width: 520px;
}

@media (max-width: 780px){
  .survey-page form .field{ max-width: none; }
}

.survey-page form select:focus,
.survey-page form input:focus,
.survey-page form textarea:focus{
  border-color: rgba(43,143,191,45);
  box-shadow: 0 0 0 4px rgba(43,143,191,12);
}

.survey-page form textarea{
  resize: vertical;
  min-height: 120px;
}
/* =========================================================
   QUESTIONNAIRE — Wizard (page questionnaire uniquement)
   Ciblé via body.survey-page
========================================================= */

.survey-page .survey-main{
  padding-top: 34px;
  padding-bottom: 28px;
}

.survey-page .survey-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(2,132,199,.25);
  background: rgba(56,189,248,.12);
  color: #0f172a;
  font-weight: 800;
}

.survey-page .survey-title{
  margin-top: 14px;
  margin-bottom: 10px;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.05;
}

.survey-page .survey-intro{
  max-width: 980px;
  margin-top: 0;
  color: rgba(15,23,42,.85);
  font-size: 18px;
}

.survey-page .survey-help{
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 16px 18px;
}

.survey-page .survey-help h2{
  margin-top: 6px;
  margin-bottom: 8px;
  font-size: 26px;
}

.survey-page .survey-help p,
.survey-page .survey-help li{
  color: rgba(15,23,42,.84);
  line-height: 1.65;
}

.survey-page .survey-help ul{
  margin: 0;
  padding-left: 18px;
}

.survey-page .survey-help .notice-mail{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(2,132,199,.25);
  background: rgba(56,189,248,.10);
}

/* Wizard container */
.survey-page .wizard{
  padding: 18px;
}

.survey-page .wizard-stepper{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.survey-page .wizard-chip{
  cursor: pointer;
  border: 1px solid rgba(148,163,184,.50);
  background: rgba(148,163,184,.10);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
}

.survey-page .wizard-chip[aria-current="step"]{
  border: 1px solid rgba(2,132,199,.45);
  background: rgba(56,189,248,.14);
}

.survey-page .wizard-viewport{
  overflow: hidden;
  border-radius: 16px;
}

.survey-page .wizard-track{
  display: flex;
  width: 400%;
  transition: transform 260ms ease;
}

.survey-page .wizard-slide{
  flex: 0 0 100%;
  padding: 10px;
}

.survey-page .wizard-slide h2{
  margin: 6px 0 10px;
  font-size: 28px;
}

.survey-page .muted{
  color: rgba(15,23,42,.75);
}

.survey-page .muted.small{
  font-size: 14px;
}

.survey-page .themes-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}

.survey-page .themeBtn{
  text-align: left;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.35);
  background: #fff;
  cursor: pointer;
}

.survey-page .themeBtn:hover{
  border-color: rgba(2,132,199,.40);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}

.survey-page .themeBtn.isDone{
  opacity: .55;
  cursor: not-allowed;
}

.survey-page .themeTitle{
  font-weight: 900;
  color: rgba(15,23,42,.95);
}

.survey-page .themeSub{
  color: rgba(15,23,42,.70);
  font-size: 14px;
  margin-top: 2px;
}

.survey-page .saved-box{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(148,163,184,.25);
}

/* Form cards */
.survey-page .form-card{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.35);
  background: #fff;
}

.survey-page .label{
  font-weight: 900;
  display: block;
  margin-bottom: 6px;
}

.survey-page textarea{
  width: 100%;
  border: 1px solid rgba(148,163,184,.45);
  border-radius: 14px;
  padding: 12px 12px;
  font-size: 16px;
  resize: vertical;
}

.survey-page .control{
  width: 100%;
  border: 1px solid rgba(148,163,184,.45);
  border-radius: 12px;
  padding: 10px 10px;
  font-size: 16px;
  background: #fff;
}

/* Évite “select plein écran” : on limite la largeur des champs */
.survey-page .field{
  max-width: 520px;
}

.survey-page .grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 860px){
  .survey-page .grid-2{
    grid-template-columns: 1fr;
  }
  .survey-page .field{
    max-width: 100%;
  }
}

.survey-page .ratingRow{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.survey-page .ratingRow label,
.survey-page .radioRow label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 12px;
  cursor: pointer;
  background: #fff;
}

.survey-page .actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.survey-page .btn{
  padding: 13px 18px;
  font-size: 16px;
  border-radius: 999px;
  font-weight: 900;
}

.survey-page .btn.primary{
  border: 1px solid rgba(2,132,199,.35);
  background: rgba(56,189,248,.14);
  color: #075985;
}

.survey-page .btn.secondary{
  border: 1px solid rgba(148,163,184,.45);
  background: #fff;
  color: rgba(15,23,42,.92);
}

.survey-page .btn.ghost{
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.45);
  background: #fff;
  font-weight: 900;
}

.survey-page .error{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.08);
  color: #7f1d1d;
  font-weight: 800;
}

.survey-page .submit-state{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.92);
  font-weight: 800;
}

.survey-page .submit-state.ok{
  border-color: rgba(16,185,129,.35);
  background: rgba(16,185,129,.10);
  color: #064e3b;
}

.survey-page .submit-state.error{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
  color: #7f1d1d;
}
/* =========================================
   MÉTHODE – Photo du collectif
========================================= */

.team-figure {
  margin: 24px 0 0;
}

.team-photo {
  width: 100%;
  max-width: 1000px;
  display: block;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.team-caption {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: rgba(15,23,42,0.7);
}

.callout-neutral {
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(15,23,42,0.04);
  font-size: 15px;
}
/* =========================================================
   PRIORITÉS — Aération + badges plus lisibles
========================================================= */

.priorites-page .grid {
  gap: 22px; /* aération générale */
}

.priorites-page .section {
  padding-top: 56px;
  padding-bottom: 56px;
}

.priorites-page .section h2 {
  margin-bottom: 10px;
}

.priorites-page .lead {
  margin-bottom: 20px;
}

.priorites-page .card {
  padding: 22px;
}

/* Badge catégorie : trop discret actuellement */
.priorites-page .badge {
  display: inline-block;
  margin: 0 0 10px 0;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .2px;
  border: 1px solid rgba(2,132,199,.25);
  background: rgba(56,189,248,.14);
  color: rgba(15,23,42,.92);
}

/* Carte “priorité forte” (commerces) : légère mise en avant */
.priorites-page .card-priority {
  border: 1px solid rgba(2,132,199,.25);
  box-shadow: 0 18px 40px rgba(2,6,23,.06);
}

/* “Participer, c’est simple” : éviter l’effet collé */
.priorites-page .participate-grid {
  margin-top: 18px;
  gap: 22px;
}

/* Sur mobile, on garde de l’air aussi */
@media (max-width: 860px) {
  .priorites-page .section {
    padding-top: 44px;
    padding-bottom: 44px;
  }
  .priorites-page .card {
    padding: 18px;
  }
}
/* =========================================================
   PRIORITÉS – ESPACEMENT + SURVOL (UX)
   À AJOUTER TEL QUEL EN FIN DE styles.css
========================================================= */

/* 1) Les blocs ne sont plus collés */
.priorites-page .card {
  margin-bottom: 28px;   /* espace ENTRE les blocs */
  padding: 26px;         /* air À L’INTÉRIEUR des blocs */
}

/* 2) Survol léger (recommandé en UX)
   → actif uniquement sur ordinateur */
@media (hover: hover) {
  .priorites-page .card {
    transition:
      box-shadow 0.25s ease,
      border-color 0.25s ease,
      transform 0.25s ease;
  }

  .priorites-page .card:hover {
    border-color: rgba(2,132,199,0.35);
    box-shadow: 0 18px 40px rgba(2,6,23,0.08);
    transform: translateY(-2px);
  }
}

/* 3) Catégories (Famille, Culture, etc.) plus visibles */
.priorites-page .badge {
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 900;
  background: rgba(56,189,248,0.18);
}

/* 4) Même aération pour "Participer, c’est simple" */
.priorites-page .participate-grid .card {
  margin-bottom: 24px;
  padding: 26px;
}