:root {
  --bleu: #1456b8;
  --bleu-fonce: #0d3a7d;
  --bleu-clair: #eaf1fb;
  --vert: #1aa179;
  --gris: #5b6675;
  --gris-clair: #f4f6f9;
  --bordure: #d9e0ea;
  --texte: #1c2530;
  --ombre: 0 6px 24px rgba(20, 86, 184, .08);
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--texte);
  background: var(--gris-clair);
  line-height: 1.5;
}

a { color: var(--bleu); }

/* ---------- En-tête ---------- */
header.site {
  background: #fff;
  border-bottom: 1px solid var(--bordure);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site .wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-weight: 800;
  font-size: 22px;
  color: var(--bleu);
  text-decoration: none;
  letter-spacing: -.3px;
}
.logo span { color: var(--vert); }
.site nav a {
  margin-left: 22px;
  text-decoration: none;
  color: var(--gris);
  font-weight: 600;
  font-size: 15px;
}
.site nav a:hover { color: var(--bleu); }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* ---------- Accueil ---------- */
.hero {
  background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
  color: #fff;
  border-radius: 22px;
  padding: 56px 48px;
  box-shadow: var(--ombre);
}
.hero h1 { font-size: 40px; margin: 0 0 14px; line-height: 1.15; letter-spacing: -.5px; }
.hero p { font-size: 18px; max-width: 640px; opacity: .95; margin: 0; }

.section-titre { text-align: center; margin: 56px 0 8px; font-size: 26px; }
.section-soustitre { text-align: center; color: var(--gris); margin: 0 0 32px; }

.cartes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.carte-devis {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  text-decoration: none;
  color: var(--texte);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.carte-devis:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre);
  border-color: var(--bleu);
}
.carte-devis .ico { font-size: 46px; margin-bottom: 10px; }
.carte-devis h3 { margin: 6px 0 4px; font-size: 19px; }
.carte-devis p { margin: 0 0 16px; color: var(--gris); font-size: 14px; min-height: 38px; }
.carte-devis .cta {
  background: var(--bleu);
  color: #fff;
  padding: 10px 18px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 14px;
  margin-top: auto;
}
.carte-devis:hover .cta { background: var(--bleu-fonce); }

.atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.atout { background: #fff; border-radius: var(--radius); padding: 24px; border: 1px solid var(--bordure); }
.atout .ico { font-size: 28px; }
.atout h4 { margin: 10px 0 6px; }
.atout p { margin: 0; color: var(--gris); font-size: 15px; }

/* ---------- Page devis ---------- */
.fil { color: var(--gris); font-size: 14px; margin-bottom: 6px; }
.fil a { text-decoration: none; }
h1.titre-page { font-size: 30px; margin: 4px 0 6px; }
.intro { color: var(--gris); margin: 0 0 28px; max-width: 760px; }

.colonnes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.col {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.col .num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bleu-clair); color: var(--bleu);
  font-weight: 800; display: grid; place-items: center; font-size: 15px;
  margin-bottom: 10px;
}
.col h2 { font-size: 18px; margin: 0 0 4px; }
.col .sous { color: var(--gris); font-size: 13.5px; margin: 0 0 16px; }

/* Zone upload */
.upload {
  border: 2px dashed var(--bleu);
  background: var(--bleu-clair);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
}
.upload .titre-up { font-weight: 700; margin-bottom: 4px; }
.upload .hint { font-size: 12.5px; color: var(--gris); margin-bottom: 12px; }
.upload-actions { display: flex; flex-direction: column; gap: 8px; }
.btn-up {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; border: 1px solid var(--bleu); color: var(--bleu);
  padding: 10px 12px; border-radius: 9px; font-weight: 600; font-size: 14px;
  cursor: pointer;
}
.btn-up:hover { background: var(--bleu); color: #fff; }
.btn-up input { display: none; }
.fichier-ok { font-size: 13px; color: var(--vert); font-weight: 600; margin-top: 8px; min-height: 18px; }

.sep-ou { display: flex; align-items: center; gap: 10px; color: var(--gris); font-size: 12px; margin: 16px 0; }
.sep-ou::before, .sep-ou::after { content: ""; flex: 1; height: 1px; background: var(--bordure); }

/* Accordéon */
.accordeon > .tete {
  cursor: pointer;
  font-weight: 600;
  color: var(--bleu);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--gris-clair);
  border-radius: 9px;
  border: 1px solid var(--bordure);
  font-size: 14px;
}
.accordeon > .tete .chev { transition: transform .2s; }
.accordeon.ouvert > .tete .chev { transform: rotate(180deg); }
.accordeon > .corps { display: none; padding-top: 14px; }
.accordeon.ouvert > .corps { display: block; }

/* Champs */
.champ { margin-bottom: 12px; }
.champ label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.champ input, .champ select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--bordure);
  border-radius: 9px; font-size: 14px; font-family: inherit; background: #fff;
}
.champ input:focus, .champ select:focus { outline: 2px solid var(--bleu-clair); border-color: var(--bleu); }
.champ .aide { font-size: 12px; color: var(--gris); margin-top: 3px; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.pilule {
  display: inline-block; background: var(--bleu-clair); color: var(--bleu);
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-top: 6px;
}

/* Radios en boutons */
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix label {
  border: 1px solid var(--bordure); border-radius: 9px; padding: 9px 14px;
  cursor: pointer; font-size: 14px; font-weight: 600; background: #fff;
}
.choix input { display: none; }
.choix input:checked + span { color: var(--bleu); }
.choix label:has(input:checked) { border-color: var(--bleu); background: var(--bleu-clair); }

/* Sinistres */
.ligne-sinistre {
  display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px;
  margin-bottom: 8px; align-items: end;
}
.ligne-sinistre .champ { margin: 0; }
.mini-titre { font-weight: 700; font-size: 14px; margin: 16px 0 8px; }

/* Sections pleine largeur */
.bloc {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--radius);
  padding: 26px; margin-top: 26px;
}
.bloc h2 { margin: 0 0 4px; font-size: 20px; }
.bloc .sous { color: var(--gris); margin: 0 0 18px; }

/* Résumé */
#resume .grille-resume { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.resume-carte { background: var(--gris-clair); border-radius: 12px; padding: 16px; border: 1px solid var(--bordure); }
.resume-carte h4 { margin: 0 0 10px; font-size: 15px; color: var(--bleu); }
.resume-carte .lignes { font-size: 13.5px; }
.resume-carte .lignes div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed var(--bordure); }
.resume-carte .lignes div span:first-child { color: var(--gris); }
.resume-carte .lignes div span:last-child { font-weight: 600; text-align: right; }
.vide { color: var(--gris); font-style: italic; }

/* Garanties */
.garanties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.garantie {
  border: 2px solid var(--bordure); border-radius: var(--radius); padding: 20px;
  background: #fff; transition: border-color .15s, box-shadow .15s, background .15s;
  position: relative;
}
.garantie.actif { border-color: var(--bleu); background: var(--bleu-clair); box-shadow: var(--ombre); }
.garantie .select-tete { text-align: center; margin-bottom: 14px; }
.garantie .btn-select {
  width: 100%; padding: 11px; border-radius: 9px; border: 1px solid var(--bleu);
  background: #fff; color: var(--bleu); font-weight: 700; cursor: pointer; font-size: 14px;
}
.garantie.actif .btn-select { background: var(--bleu); color: #fff; }
.garantie h3 { text-align: center; margin: 4px 0; font-size: 18px; }
.garantie .prix { text-align: center; font-size: 30px; font-weight: 800; color: var(--bleu); margin: 6px 0 2px; }
.garantie .prix small { font-size: 14px; font-weight: 600; color: var(--gris); }
.garantie .periode { text-align: center; color: var(--gris); font-size: 13px; margin-bottom: 14px; }
.garantie ul { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.garantie li { padding: 6px 0; border-bottom: 1px solid var(--bordure); display: flex; gap: 8px; }
.garantie li .ok { color: var(--vert); font-weight: 800; }
.garantie li .no { color: #c2553a; font-weight: 800; }

.barre-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; flex-wrap: wrap; }
.btn {
  padding: 13px 26px; border-radius: 10px; border: none; font-weight: 700; font-size: 15px;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.btn-primaire { background: var(--bleu); color: #fff; }
.btn-primaire:hover { background: var(--bleu-fonce); }
.btn-secondaire { background: #fff; color: var(--bleu); border: 1px solid var(--bleu); }

footer.site { text-align: center; color: var(--gris); font-size: 13px; padding: 28px; border-top: 1px solid var(--bordure); background: #fff; }

/* Responsive */
@media (max-width: 980px) {
  .cartes { grid-template-columns: repeat(2, 1fr); }
  .colonnes, .garanties, #resume .grille-resume, .atouts { grid-template-columns: 1fr; }
  .hero { padding: 40px 28px; }
  .hero h1 { font-size: 30px; }
}
@media (max-width: 520px) {
  .cartes { grid-template-columns: 1fr; }
  .ligne-sinistre { grid-template-columns: 1fr; }
}