/* Sobr'Eau : couleurs de la marque (reprises de la présentation animée) */
:root {
  --bleu: #1F5FA8;
  --bleu-clair: #5AA2E6;
  --bleu-pale: #E3EEF8;
  --vert: #2E9E6B;
  --vert-pale: #E3F4EA;
  --terre: #8A5A3B;
  --soleil: #F2B33D;
  --fond: #F6F8F4;
  --encre: #17324D;
  --gris: #5F7285;
  --carte: #FFFFFF;
  --bord: #DCE5EE;
  --rayon: 16px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--fond);
}

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

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

.conteneur { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }

.accent { color: var(--bleu); }
.discret { color: var(--gris); }

/* En-tête */
.entete { padding: 20px 0; }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.entete .logo { width: 170px; }
.bouton {
  display: inline-block;
  background: var(--bleu);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}
.bouton:hover { background: #184d89; }
.bouton.petit { padding: 9px 16px; font-size: .9rem; }

/* Bandeau principal */
.hero { padding: 40px 0 70px; }
.hero .conteneur { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero .chapeau { font-size: 1.2rem; color: var(--gris); max-width: 34em; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 24px; }

/* Maquette de l'app */
.telephone {
  background: var(--carte);
  border-radius: 28px;
  padding: 22px;
  box-shadow: 0 20px 50px rgba(23, 50, 77, .14);
  max-width: 360px;
  margin: 0 auto;
  border: 1px solid var(--bord);
}
.telephone .ligne-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.telephone .etiquette { font-size: .75rem; background: var(--vert-pale); color: var(--vert); padding: 3px 10px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.jauge { margin: 18px 0 6px; height: 16px; background: var(--bleu-pale); border-radius: 999px; position: relative; overflow: hidden; }
.jauge span { position: absolute; inset: 0 auto 0 0; width: 38%; background: linear-gradient(90deg, var(--bleu), var(--bleu-clair)); border-radius: 999px; }
.jauge i { position: absolute; top: -3px; bottom: -3px; left: 45%; width: 2px; background: var(--encre); }
.decision { margin-top: 16px; background: var(--fond); border-radius: 12px; padding: 12px 14px; font-size: .95rem; }
.barres { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: 16px; }
.barres b { flex: 1; background: var(--bleu-clair); border-radius: 4px 4px 0 0; }
.barres b.pluie { background: var(--vert); }
.barres b.vide { background: var(--bord); }
.legende { display: flex; gap: 14px; font-size: .75rem; color: var(--gris); margin-top: 8px; }
.legende em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; }
.legende em::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--bleu-clair); }
.legende em.pluie::before { background: var(--vert); }

/* Sections */
section { padding: 70px 0; }
.blanc { background: var(--carte); }
.intro-section { max-width: 40em; margin-bottom: 36px; }

.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 26px;
}
.blanc .carte { background: var(--fond); border-color: transparent; }
.carte p:last-child { margin-bottom: 0; }
.picto { font-size: 2rem; line-height: 1; margin-bottom: 14px; }

.etape-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bleu); color: #fff; font-weight: 700; margin-bottom: 12px;
}

.liste-points { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; }
.liste-points li { padding-left: 30px; position: relative; }
.liste-points li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--vert); font-weight: 700; }

/* Où en est le projet */
.frise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 10px; }
.frise div { padding: 18px 18px 0 0; border-top: 4px solid var(--bord); position: relative; }
.frise div::before { content: ""; position: absolute; top: -10px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bord); }
.frise div.fait { border-top-color: var(--vert); }
.frise div.fait::before { background: var(--vert); }
.frise div.encours::before { background: var(--bleu); box-shadow: 0 0 0 5px var(--bleu-pale); }
.frise strong { display: block; }
.frise span { color: var(--gris); font-size: .95rem; }

/* Inscription */
.inscription { background: var(--bleu); color: #fff; }
.inscription .conteneur { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.inscription h2 { color: #fff; }
.inscription .sous-titre { color: #D6E6F7; }
.inscription ul { padding-left: 1.2em; color: #D6E6F7; }
.formulaire { background: var(--carte); color: var(--encre); border-radius: var(--rayon); padding: 28px; }
.champ { margin-bottom: 16px; }
.champ label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; }
.champ input[type="text"], .champ input[type="email"], .champ select {
  width: 100%; padding: 12px 14px; font-size: 1rem; border: 1px solid var(--bord);
  border-radius: 10px; background: #fff; color: var(--encre); font-family: inherit;
}
.champ input:focus, .champ select:focus { outline: 3px solid var(--bleu-pale); border-color: var(--bleu); }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; margin-bottom: 14px; }
.case input { margin-top: 5px; width: 18px; height: 18px; flex: none; }
.formulaire .bouton { width: 100%; margin-top: 6px; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.petit-texte { font-size: .8rem; color: var(--gris); margin-top: 12px; }
.message { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: .95rem; }
.message.visible { display: block; }
.message.ok { background: var(--vert-pale); color: #1d6b48; }
.message.attente { background: #FFF4DE; color: #7a5410; }

/* Questions */
details { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; }
summary { font-weight: 600; cursor: pointer; }
details p { margin: 10px 0 0; color: var(--gris); }

/* Pied de page */
.pied { background: var(--encre); color: #C9D6E3; padding: 40px 0; font-size: .9rem; }
.pied .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; }
.pied img { width: 150px; }
.pied a { color: #fff; }
.pied nav { display: flex; flex-wrap: wrap; gap: 18px; }

/* Pages de texte (mentions légales, confidentialité) */
.page-texte { max-width: 760px; padding: 20px 20px 70px; }
.page-texte h1 { font-size: 2rem; margin-top: 10px; }
.page-texte h2 { font-size: 1.3rem; margin-top: 1.8em; }
.a-completer { background: #FFF4DE; padding: 1px 6px; border-radius: 4px; }

/* Statut d'une fonction : disponible / en préparation */
.badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.badge.dispo { background: var(--vert-pale); color: #1d6b48; }
.badge.prepa { background: #FFF4DE; color: #7a5410; }

/* Bandeau vers la page pro */
.bandeau-pro { background: var(--encre); color: #fff; padding: 22px 0; }
.bandeau-pro .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.bandeau-pro p { margin: 0; }
.bandeau-pro .bouton { background: #fff; color: var(--encre); }
.bandeau-pro .bouton:hover { background: var(--bleu-pale); }

/* Page pro */
.hero-pro { background: var(--encre); color: #fff; padding: 60px 0 70px; }
.hero-pro h1 { color: #fff; max-width: 18em; }
.hero-pro .chapeau { color: #C9D6E3; font-size: 1.2rem; max-width: 36em; }
.hero-pro .actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 24px; }
.hero-pro .actions a:not(.bouton) { color: #fff; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }

/* Téléphone */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .hero .conteneur, .inscription .conteneur { grid-template-columns: 1fr; gap: 36px; }
  .grille-3, .grille-4 { grid-template-columns: 1fr 1fr; }
  .grille-2 { grid-template-columns: 1fr; }
  .liste-points { grid-template-columns: 1fr; }
  .frise { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  section { padding: 54px 0; }
}
@media (max-width: 560px) {
  .conteneur { padding: 0 16px; }
  .grille-3, .grille-4, .frise { grid-template-columns: 1fr; }
  .entete .logo { width: 140px; }
  .hero { padding: 20px 0 50px; }
  .formulaire { padding: 20px; }
}