/* Devis Piscine estimator, from the October 2026 identity boards (01 identity, 02 components, 15-16 quote request).
   Palette: deep blue, warm accent for the quote button only, clear water for boxes, sand background. No shadows.
   Every rule is scoped under .eb-estimateur (and .eb-form for controls) to win over the theme's buttons and fields. */

/* Self-hosted fonts (SIL Open Font License, see polices/OFL-*.txt). Never loaded from Google servers. */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('polices/nunito-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('polices/nunito-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap; src: url('polices/karla-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 600; font-display: swap; src: url('polices/karla-latin-600-normal.woff2') format('woff2'); }

/* Tokens, shared with the choice tool (.eb-choix). */
.eb-estimateur, .eb-choix {
  --eb-bleu: #0F4C6E;          /* 1 deep blue: titles of tables, links, current step */
  --eb-bleu-fonce: #0B3A54;
  --eb-accent: #E0892E;        /* 2 warm accent: quote button only */
  --eb-accent-survol: #C9741C;
  --eb-texte: #26323B;         /* 3 */
  --eb-encre: #10202B;         /* 4 titles; also text on the accent (6.2:1) */
  --eb-bord: #DCE3E3;          /* 5 */
  --eb-bord-fort: #8A9AA3;
  --eb-eau: #CFE9F3;           /* 6 clear water: boxes only, never text */
  --eb-sable: #F8F6F1;         /* 7 */
  --eb-blanc: #FFFFFF;         /* 8 */
  --eb-vert: #1E7F4F;          /* advantages / done */
  --eb-alerte: #B42318;
  --eb-alerte-fond: #FDF1EE;
  --eb-gris: #55656F;

  --eb-titres: "Nunito", "Trebuchet MS", sans-serif;
  --eb-corps: "Karla", "Segoe UI", sans-serif;
  --eb-t-titre: 30px; --eb-t-question: 19px; --eb-t-texte: 17px; --eb-t-petit: 15px; --eb-t-prix: 56px;

  --eb-r-champ: 10px; --eb-r-carte: 14px; --eb-r-encadre: 12px; --eb-r-pilule: 999px;
  --eb-h-champ: 52px; --eb-h-bouton: 54px; --eb-cible: 48px;
  --eb-pad-tete: 28px 36px 22px; --eb-pad-corps: 30px 36px 36px; --eb-ecart: 26px;
  --eb-focus: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--eb-bleu);
}
@media (max-width: 640px) {
  .eb-estimateur, .eb-choix { --eb-t-titre: 24px; --eb-t-question: 18px; --eb-t-prix: 38px; --eb-pad-tete: 20px; --eb-pad-corps: 20px; --eb-ecart: 22px; }
}

/* ---------- Frame ---------- */
.eb-estimateur {
  max-width: 1080px; margin: 0 auto 32px; padding: 0; scroll-margin-top: 90px; overflow: hidden;
  background: var(--eb-blanc); color: var(--eb-texte); border: 1px solid var(--eb-bord); border-radius: var(--eb-r-carte);
  font-family: var(--eb-corps); font-size: var(--eb-t-texte); font-weight: 400; line-height: 1.55; text-align: left;
}
.eb-estimateur *, .eb-estimateur *::before, .eb-estimateur *::after { box-sizing: border-box; }
.eb-estimateur [hidden] { display: none !important; }
.eb-estimateur p, .eb-estimateur ul, .eb-estimateur ol, .eb-estimateur li { margin: 0; }
.eb-estimateur h2, .eb-estimateur h3, .eb-estimateur h4 { margin: 0; padding: 0; text-transform: none; letter-spacing: 0; }
.eb-estimateur strong { font-weight: 600; }
.eb-estimateur a { color: var(--eb-bleu); text-decoration: underline; text-underline-offset: 3px; }
.eb-estimateur a:hover { color: var(--eb-bleu-fonce); }
.eb-estimateur :focus { outline: none; }
.eb-estimateur :focus-visible { outline: none; box-shadow: var(--eb-focus); }
.eb-estimateur .eb-ico { flex: none; display: block; }
.eb-estimateur .eb-lecteur { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.eb-estimateur .eb-piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.eb-estimateur .eb-form { margin: 0; padding: 0; }

/* ---------- Head: title, sub-title, progress bars (board 15) ---------- */
.eb-estimateur .eb-tete { display: flex; flex-direction: column; gap: 6px; padding: var(--eb-pad-tete); background: var(--eb-sable); border-bottom: 1px solid var(--eb-bord); }
.eb-estimateur .eb-titre { font-family: var(--eb-titres); font-weight: 800; font-size: var(--eb-t-titre); line-height: 1.15; color: var(--eb-encre); }
.eb-estimateur .eb-chapo { color: var(--eb-texte); }
.eb-estimateur .eb-ou-mobile { display: none; margin-top: 8px; font-size: var(--eb-t-petit); font-weight: 600; color: var(--eb-encre); }
.eb-estimateur .eb-progression { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.eb-estimateur .eb-progression li { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; }
.eb-estimateur .eb-progression li::before, .eb-estimateur .eb-progression li::marker { content: none; }
.eb-estimateur .eb-trait { display: block; height: 5px; border-radius: var(--eb-r-pilule); background: var(--eb-bord); }
.eb-estimateur .eb-etiquette { font-size: var(--eb-t-petit); font-weight: 600; color: var(--eb-gris); }
.eb-estimateur .eb-progression li:not(.est-fait) .eb-fait { display: none; }
.eb-estimateur .eb-progression li.est-en-cours .eb-trait { background: var(--eb-bleu); }
.eb-estimateur .eb-progression li.est-en-cours .eb-etiquette { color: var(--eb-bleu); }
.eb-estimateur .eb-progression li.est-fait .eb-trait { background: var(--eb-vert); }
.eb-estimateur .eb-progression li.est-fait .eb-etiquette { color: var(--eb-texte); }

/* ---------- Body and steps ---------- */
.eb-estimateur .eb-corps { display: flex; flex-direction: column; gap: 36px; padding: var(--eb-pad-corps); }
.eb-estimateur .eb-etape, .eb-estimateur .eb-bloc { margin: 0; padding: 0; border: 0; min-width: 0; background: none; }
.eb-estimateur .eb-etape { display: flex; flex-direction: column; gap: var(--eb-ecart); }
.eb-estimateur .eb-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--eb-ecart) 24px; }
.eb-estimateur .eb-colonnes--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; }
.eb-estimateur .eb-large { grid-column: 1 / -1; }
.eb-estimateur .eb-champ-bloc { min-width: 0; }
.eb-estimateur .eb-question {
  display: block; float: none; width: auto; margin: 0 0 12px; padding: 0;
  font-family: var(--eb-titres); font-weight: 700; font-size: var(--eb-t-question); line-height: 1.3; color: var(--eb-encre);
}
.eb-estimateur .eb-intitule { display: block; float: none; width: auto; margin: 0 0 8px; padding: 0; font-weight: 600; line-height: 1.4; color: var(--eb-encre); }
.eb-estimateur legend.eb-intitule { margin-bottom: 10px; }
.eb-estimateur .eb-facultatif { font-weight: 400; color: var(--eb-gris); }
.eb-estimateur .eb-note { font-size: var(--eb-t-petit); color: var(--eb-gris); }
.eb-estimateur .eb-sous-champ { margin-top: 6px; }

/* ---------- Fields ---------- */
.eb-estimateur .eb-form input.eb-saisie, .eb-estimateur .eb-form textarea.eb-saisie {
  display: block; width: 100%; max-width: none; min-height: var(--eb-h-champ); margin: 0; padding: 12px 14px;
  border: 1px solid var(--eb-bord-fort); border-radius: var(--eb-r-champ); background: var(--eb-blanc); box-shadow: none;
  font-family: var(--eb-corps); font-size: var(--eb-t-texte); font-weight: 400; line-height: 1.4; color: var(--eb-encre);
  text-transform: none; letter-spacing: 0; outline: none; -webkit-appearance: none; appearance: none;
}
.eb-estimateur .eb-form textarea.eb-saisie { min-height: 96px; resize: vertical; }
.eb-estimateur .eb-form .eb-saisie::placeholder { color: var(--eb-gris); opacity: 1; }
.eb-estimateur .eb-form .eb-saisie:focus { border-color: var(--eb-bleu); box-shadow: inset 0 0 0 1px var(--eb-bleu), var(--eb-focus); }
.eb-estimateur .eb-form .eb-saisie[aria-invalid="true"] { border-color: var(--eb-alerte); box-shadow: inset 0 0 0 1px var(--eb-alerte); }
.eb-estimateur .eb-form .eb-saisie[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--eb-alerte), var(--eb-focus); }
.eb-estimateur .eb-num, .eb-estimateur .eb-form input.eb-saisie[type="number"] { font-variant-numeric: tabular-nums; }
.eb-estimateur .eb-avec-unite { display: flex; align-items: stretch; max-width: 220px; }
.eb-estimateur .eb-form .eb-avec-unite input.eb-saisie { flex: 1; min-width: 0; width: auto; font-size: 18px; border-right: 0; border-radius: var(--eb-r-champ) 0 0 var(--eb-r-champ); -moz-appearance: textfield; }
.eb-estimateur .eb-unite { display: flex; align-items: center; padding: 0 16px; border: 1px solid var(--eb-bord-fort); border-radius: 0 var(--eb-r-champ) var(--eb-r-champ) 0; background: var(--eb-eau); color: var(--eb-encre); font-weight: 600; }

/* ---------- Choices: tiles and pills ---------- */
.eb-estimateur .eb-form input.eb-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; pointer-events: none; -webkit-appearance: none; appearance: none; }
.eb-estimateur .eb-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; }
.eb-estimateur .eb-tuile, .eb-estimateur .eb-pastille { position: relative; display: flex; margin: 0; padding: 0; cursor: pointer; font-weight: 400; }
.eb-estimateur .eb-tuile-corps {
  flex: 1; display: flex; flex-direction: column; gap: 2px; min-height: var(--eb-cible); padding: 14px 16px;
  border: 1px solid var(--eb-bord); border-radius: var(--eb-r-encadre); background: var(--eb-blanc); transition: border-color .15s, background .15s;
}
.eb-estimateur .eb-tuile-nom { font-family: var(--eb-titres); font-weight: 700; color: var(--eb-encre); }
.eb-estimateur .eb-tuile-detail { font-size: var(--eb-t-petit); color: var(--eb-gris); }
.eb-estimateur .eb-tuile:hover .eb-tuile-corps { border-color: var(--eb-bleu); }
.eb-estimateur input.eb-radio:checked + .eb-tuile-corps { border-color: var(--eb-bleu); background: var(--eb-eau); box-shadow: inset 0 0 0 1px var(--eb-bleu); }
.eb-estimateur input.eb-radio:focus-visible + .eb-tuile-corps { box-shadow: inset 0 0 0 1px var(--eb-bleu), var(--eb-focus); }

.eb-estimateur .eb-pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.eb-estimateur .eb-pastille > span {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--eb-cible); padding: 6px 20px;
  border: 1px solid var(--eb-bord-fort); border-radius: var(--eb-r-champ); background: var(--eb-blanc);
  font-weight: 600; line-height: 1.25; color: var(--eb-encre); text-align: center; transition: border-color .15s, background .15s;
}
.eb-estimateur .eb-pastille:hover > span { border-color: var(--eb-bleu); }
.eb-estimateur .eb-pastille input.eb-radio:checked + span { border: 2px solid var(--eb-bleu); padding: 5px 19px; color: var(--eb-bleu); background: var(--eb-blanc); }
.eb-estimateur .eb-pastilles input.eb-radio:focus-visible + span { box-shadow: var(--eb-focus); }

/* ---------- Check boxes ---------- */
.eb-estimateur .eb-case { display: flex; gap: 14px; align-items: center; min-height: var(--eb-cible); margin: 0; cursor: pointer; color: var(--eb-encre); font-weight: 400; }
.eb-estimateur .eb-form input.eb-coche {
  flex: none; width: 26px; height: 26px; margin: 0; padding: 0; border: 2px solid var(--eb-bleu); border-radius: 6px; background: var(--eb-blanc);
  -webkit-appearance: none; appearance: none; cursor: pointer; box-shadow: none;
}
.eb-estimateur .eb-form input.eb-coche:checked {
  background: var(--eb-bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
.eb-estimateur .eb-form input.eb-coche:focus-visible { box-shadow: var(--eb-focus); }
.eb-estimateur .eb-form input.eb-coche[aria-invalid="true"] { border-color: var(--eb-alerte); }
.eb-estimateur .eb-case--accord { align-items: flex-start; }
.eb-estimateur .eb-case--accord input.eb-coche { margin-top: 1px; }
.eb-estimateur .eb-accord-txt { font-weight: 600; }
.eb-estimateur .eb-accord { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: var(--eb-r-encadre); background: var(--eb-sable); }
.eb-estimateur .eb-accord.a-corriger { border: 2px solid var(--eb-alerte); background: var(--eb-alerte-fond); }
.eb-estimateur .eb-accord-note { margin-left: 40px; font-size: var(--eb-t-petit); color: var(--eb-texte); }
.eb-estimateur .eb-mentions { max-width: 820px; font-size: var(--eb-t-petit); color: var(--eb-gris); }
.eb-estimateur .eb-turnstile { min-height: 65px; }

/* ---------- Commune suggestions ---------- */
.eb-estimateur .eb-suggestions { position: relative; }
.eb-estimateur .eb-liste { margin: 6px 0 0; padding: 4px; list-style: none; max-height: 240px; overflow-y: auto; border: 1px solid var(--eb-bord); border-radius: var(--eb-r-champ); background: var(--eb-blanc); }
.eb-estimateur .eb-liste li { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; list-style: none; color: var(--eb-encre); cursor: pointer; }
.eb-estimateur .eb-liste li::before, .eb-estimateur .eb-liste li::marker { content: none; }
.eb-estimateur .eb-liste li:hover, .eb-estimateur .eb-liste li[aria-selected="true"] { background: var(--eb-eau); font-weight: 600; }

/* ---------- Buttons: pill with a drop, accent background, ink text (board 02) ---------- */
.eb-estimateur .eb-form button.eb-bouton, .eb-estimateur .eb-form button.eb-bouton:focus, .eb-estimateur .eb-form button.eb-bouton:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; max-width: 100%; min-height: var(--eb-h-bouton);
  margin: 0; padding: 0 30px; border: 0; border-radius: var(--eb-r-pilule); background: var(--eb-accent); color: var(--eb-encre); box-shadow: none;
  font-family: var(--eb-titres); font-weight: 800; font-size: 18px; line-height: 1.2; text-align: center; text-transform: none; letter-spacing: 0;
  text-decoration: none; text-shadow: none; white-space: normal; cursor: pointer; transform: none; transition: background .15s;
}
.eb-estimateur .eb-form button.eb-bouton:hover { background: var(--eb-accent-survol); color: var(--eb-encre); }
.eb-estimateur .eb-form button.eb-bouton:focus-visible { box-shadow: var(--eb-focus); }
.eb-estimateur .eb-form button.eb-bouton:active { transform: translateY(1px); }
.eb-estimateur .eb-form button.eb-bouton[disabled], .eb-estimateur .eb-form button.eb-bouton[disabled]:hover { background: var(--eb-bord); color: var(--eb-gris); cursor: not-allowed; transform: none; }
.eb-estimateur .eb-form button.eb-bouton.en-envoi { cursor: progress; }
.eb-estimateur .eb-bouton .eb-ico--roue { display: none; }
.eb-estimateur .eb-bouton.en-envoi .eb-ico--roue { display: block; animation: eb-tourne .9s linear infinite; }
.eb-estimateur .eb-bouton.en-envoi .eb-ico--goutte { display: none; }
@keyframes eb-tourne { to { transform: rotate(360deg); } }

.eb-estimateur .eb-form button.eb-lien, .eb-estimateur .eb-form button.eb-lien:hover, .eb-estimateur .eb-form button.eb-lien:focus, .eb-estimateur .eb-form button.eb-lien:active {
  display: inline-flex; align-items: center; width: auto; min-height: var(--eb-cible); margin: 0; padding: 0 2px; border: 0; border-radius: 2px;
  background: transparent; box-shadow: none; color: var(--eb-bleu); font-family: var(--eb-corps); font-weight: 600; font-size: var(--eb-t-petit);
  line-height: 1.4; text-transform: none; letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px; text-shadow: none; cursor: pointer; transform: none;
}
.eb-estimateur .eb-form button.eb-lien:hover { color: var(--eb-bleu-fonce); }
.eb-estimateur .eb-form button.eb-lien:focus-visible { box-shadow: var(--eb-focus); }
.eb-estimateur .eb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.eb-estimateur .eb-actions--separees { padding-top: 18px; border-top: 1px solid var(--eb-bord); }

/* ---------- Step 2: price and scale ---------- */
.eb-estimateur .eb-resultat { display: flex; flex-direction: column; gap: 6px; }
.eb-estimateur .eb-resultat-pour { font-size: var(--eb-t-petit); color: var(--eb-gris); }
.eb-estimateur .eb-prix { font-family: var(--eb-titres); font-weight: 800; font-size: var(--eb-t-prix); line-height: 1.05; letter-spacing: -0.01em; color: var(--eb-bleu); font-variant-numeric: tabular-nums; }
.eb-estimateur .eb-prix:focus, .eb-estimateur .eb-prix:focus-visible { box-shadow: none; }
.eb-estimateur .eb-echelle { position: relative; height: 60px; }
.eb-estimateur .eb-echelle-fond { position: absolute; left: 0; right: 0; top: 12px; height: 14px; border-radius: var(--eb-r-pilule); background: var(--eb-eau); }
.eb-estimateur .eb-echelle-plage { position: absolute; left: 0; width: 100%; top: 8px; height: 22px; border-radius: var(--eb-r-pilule); background: var(--eb-bleu); transition: left .3s, width .3s; }
.eb-estimateur .eb-echelle-val { position: absolute; top: 36px; transform: translateX(-50%); white-space: nowrap; font-family: var(--eb-titres); font-weight: 700; font-size: var(--eb-t-petit); color: var(--eb-bleu); font-variant-numeric: tabular-nums; }
.eb-estimateur .eb-rappel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: var(--eb-t-petit); }
.eb-estimateur .eb-encadre { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border-radius: var(--eb-r-encadre); background: var(--eb-eau); font-size: var(--eb-t-petit); color: var(--eb-encre); }
.eb-estimateur .eb-direct { margin: 0; padding: 12px 16px; border-radius: var(--eb-r-encadre); background: var(--eb-eau); color: var(--eb-encre); }
.eb-estimateur .eb-direct-prix { font-family: var(--eb-titres); font-weight: 800; font-size: 1.2rem; color: var(--eb-bleu); white-space: nowrap; }
.eb-estimateur .eb-direct-note { font-size: var(--eb-t-petit); color: var(--eb-gris); }

/* ---------- Errors ---------- */
.eb-estimateur .eb-correctifs { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; border: 2px solid var(--eb-alerte); border-radius: var(--eb-r-encadre); background: var(--eb-alerte-fond); color: var(--eb-encre); }
.eb-estimateur .eb-correctifs-titre { font-weight: 600; }
.eb-estimateur .eb-correctifs ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: var(--eb-t-petit); }
.eb-estimateur .eb-correctifs li { list-style: disc; }
.eb-estimateur .eb-correctifs a { color: var(--eb-alerte); }
.eb-estimateur .eb-erreur-champ { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: var(--eb-t-petit); color: var(--eb-alerte); }
.eb-estimateur .eb-erreur-champ .eb-ico { margin-top: 2px; }
.eb-estimateur .eb-accord .eb-erreur-champ { margin: 0 0 0 40px; font-weight: 600; }
.eb-estimateur .eb-echec { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border: 1px solid var(--eb-alerte); border-radius: var(--eb-r-encadre); background: var(--eb-alerte-fond); color: var(--eb-encre); }
.eb-estimateur .eb-echec > .eb-ico { color: var(--eb-alerte); }
.eb-estimateur .eb-echec > div { display: flex; flex-direction: column; gap: 4px; }
.eb-estimateur .eb-sans-js { color: var(--eb-alerte); font-weight: 600; }

/* ---------- End panels ---------- */
.eb-estimateur .eb-fin { display: flex; flex-direction: column; gap: 24px; }
.eb-estimateur .eb-fin:focus { box-shadow: none; }
.eb-estimateur .eb-fin-tete { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.eb-estimateur .eb-medaillon { flex: none; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.eb-estimateur .eb-medaillon--ok { background: var(--eb-vert); color: #FFFFFF; }
.eb-estimateur .eb-medaillon--info { background: var(--eb-eau); color: var(--eb-bleu); }
.eb-estimateur .eb-fin-textes { flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; }
.eb-estimateur .eb-fin-titre { font-family: var(--eb-titres); font-weight: 800; font-size: var(--eb-t-titre); line-height: 1.2; color: var(--eb-encre); }
.eb-estimateur .eb-fin-textes .eb-lien { align-self: flex-start; }
.eb-estimateur .eb-discret { font-size: var(--eb-t-petit); color: var(--eb-gris); }
.eb-estimateur .eb-sms { display: flex; flex-direction: column; gap: 12px; }
.eb-estimateur .eb-sms .eb-question { margin: 0; }
.eb-estimateur .eb-sms-zone { min-height: 120px; }
.eb-estimateur .eb-ensuite { margin: 0; padding: 0; list-style: none; counter-reset: eb-ensuite; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.eb-estimateur .eb-ensuite--apres-sms { counter-reset: eb-ensuite 1; }
.eb-estimateur .eb-ensuite li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--eb-bord); border-radius: var(--eb-r-encadre); list-style: none; counter-increment: eb-ensuite; }
.eb-estimateur .eb-ensuite li strong { color: var(--eb-encre); }
.eb-estimateur .eb-ensuite-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--eb-bleu); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: var(--eb-titres); font-weight: 800; }
.eb-estimateur .eb-ensuite-num::before { content: counter(eb-ensuite); }

/* ---------- Without JavaScript: all fields visible, no steps, no price ---------- */
.eb-estimateur:not(.eb-actif) .eb-progression, .eb-estimateur:not(.eb-actif) .eb-ou-mobile,
.eb-estimateur:not(.eb-actif) .eb-etape[data-etape="2"], .eb-estimateur:not(.eb-actif) .eb-form button[type="button"] { display: none; }

/* ---------- Mobile (board 16) ---------- */
@media (max-width: 640px) {
  .eb-estimateur .eb-ou-mobile { display: block; }
  .eb-estimateur .eb-progression { gap: 6px; margin-top: 10px; }
  .eb-estimateur .eb-etiquette { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .eb-estimateur .eb-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .eb-estimateur .eb-form .eb-actions > button.eb-lien { align-self: flex-start; }
  .eb-estimateur .eb-form button.eb-bouton, .eb-estimateur .eb-form button.eb-bouton:focus { width: 100%; }
  .eb-estimateur .eb-tuiles { grid-template-columns: 1fr; }
  .eb-estimateur .eb-pastilles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eb-estimateur .eb-pastille > span { width: 100%; padding: 6px 10px; }
  .eb-estimateur .eb-pastille input.eb-radio:checked + span { padding: 5px 9px; }
}
@media (prefers-reduced-motion: reduce) { .eb-estimateur * { transition: none; animation: none; } }

/* ---------- Choice tool ---------- */
/* [estimateur_bassin_choix] (inc/choix.php, eb-choix.js): same frame, tokens and tiles as the estimator, scoped under .eb-choix.
   Warm accent on the button to the recommended type's estimator only; the form's own button is deep blue. */
.eb-choix {
  max-width: 1080px; margin: 0 auto 32px; padding: 0; scroll-margin-top: 90px; overflow: hidden;
  background: var(--eb-blanc); color: var(--eb-texte); border: 1px solid var(--eb-bord); border-radius: var(--eb-r-carte);
  font-family: var(--eb-corps); font-size: var(--eb-t-texte); font-weight: 400; line-height: 1.55; text-align: left;
}
.eb-choix *, .eb-choix *::before, .eb-choix *::after { box-sizing: border-box; }
.eb-choix [hidden] { display: none !important; }
.eb-choix p, .eb-choix ul, .eb-choix li { margin: 0; }
.eb-choix h2, .eb-choix h3, .eb-choix h4 { margin: 0; padding: 0; text-transform: none; letter-spacing: 0; }
.eb-choix strong { font-weight: 600; }
.eb-choix a { color: var(--eb-bleu); text-decoration: underline; text-underline-offset: 3px; }
.eb-choix a:hover { color: var(--eb-bleu-fonce); }
.eb-choix :focus { outline: none; }
.eb-choix :focus-visible { outline: none; box-shadow: var(--eb-focus); }
.eb-choix .eb-ico { flex: none; display: block; }
.eb-choix .eb-lecteur { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.eb-choix .eb-choix-form { margin: 0; padding: 0; }

.eb-choix .eb-choix-tete { display: flex; flex-direction: column; gap: 6px; padding: var(--eb-pad-tete); background: var(--eb-sable); border-bottom: 1px solid var(--eb-bord); }
.eb-choix .eb-choix-titre { font-family: var(--eb-titres); font-weight: 800; font-size: var(--eb-t-titre); line-height: 1.15; color: var(--eb-encre); }
.eb-choix .eb-choix-corps { display: flex; flex-direction: column; gap: 28px; padding: var(--eb-pad-corps); }
.eb-choix .eb-choix-questions { display: flex; flex-direction: column; gap: var(--eb-ecart); }
.eb-choix .eb-choix-question { margin: 0; padding: 0; border: 0; min-width: 0; background: none; }
.eb-choix .eb-choix-intitule {
  display: flex; align-items: center; gap: 12px; float: none; width: auto; margin: 0 0 12px; padding: 0;
  font-family: var(--eb-titres); font-weight: 700; font-size: var(--eb-t-question); line-height: 1.3; color: var(--eb-encre);
}
.eb-choix .eb-choix-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--eb-bleu); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: var(--eb-titres); font-weight: 800; font-size: 16px; }

/* Tiles and pills: same look as the estimator's. */
.eb-choix input.eb-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; pointer-events: none; -webkit-appearance: none; appearance: none; }
.eb-choix .eb-choix-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.eb-choix .eb-choix-tuile, .eb-choix .eb-choix-pastille { position: relative; display: flex; margin: 0; padding: 0; cursor: pointer; font-weight: 400; }
.eb-choix .eb-choix-tuile-corps {
  flex: 1; display: flex; flex-direction: column; gap: 2px; min-height: var(--eb-cible); padding: 14px 16px;
  border: 1px solid var(--eb-bord); border-radius: var(--eb-r-encadre); background: var(--eb-blanc); transition: border-color .15s, background .15s;
}
.eb-choix .eb-choix-tuile-nom { font-family: var(--eb-titres); font-weight: 700; color: var(--eb-encre); }
.eb-choix .eb-choix-tuile-detail { font-size: var(--eb-t-petit); color: var(--eb-gris); }
.eb-choix .eb-choix-tuile:hover .eb-choix-tuile-corps { border-color: var(--eb-bleu); }
.eb-choix input.eb-radio:checked + .eb-choix-tuile-corps { border-color: var(--eb-bleu); background: var(--eb-eau); box-shadow: inset 0 0 0 1px var(--eb-bleu); }
.eb-choix input.eb-radio:focus-visible + .eb-choix-tuile-corps { box-shadow: inset 0 0 0 1px var(--eb-bleu), var(--eb-focus); }
.eb-choix .eb-choix-pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.eb-choix .eb-choix-pastille > span {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--eb-cible); padding: 6px 20px;
  border: 1px solid var(--eb-bord-fort); border-radius: var(--eb-r-champ); background: var(--eb-blanc);
  font-weight: 600; line-height: 1.25; color: var(--eb-encre); text-align: center; transition: border-color .15s, background .15s;
}
.eb-choix .eb-choix-pastille:hover > span { border-color: var(--eb-bleu); }
.eb-choix .eb-choix-pastille input.eb-radio:checked + span { border: 2px solid var(--eb-bleu); padding: 5px 19px; color: var(--eb-bleu); background: var(--eb-blanc); }
.eb-choix .eb-choix-pastille input.eb-radio:focus-visible + span { box-shadow: var(--eb-focus); }

/* Form button (deep blue pill) and the note beside it. */
.eb-choix .eb-choix-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; padding-top: 18px; border-top: 1px solid var(--eb-bord); }
.eb-choix .eb-choix-form button.eb-choix-valider, .eb-choix .eb-choix-form button.eb-choix-valider:focus {
  display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: 100%; min-height: var(--eb-h-bouton);
  margin: 0; padding: 0 30px; border: 0; border-radius: var(--eb-r-pilule); background: var(--eb-bleu); color: #FFFFFF; box-shadow: none;
  font-family: var(--eb-titres); font-weight: 800; font-size: 18px; line-height: 1.2; text-align: center; text-transform: none; letter-spacing: 0;
  text-decoration: none; text-shadow: none; white-space: normal; cursor: pointer; transform: none; transition: background .15s;
}
.eb-choix .eb-choix-form button.eb-choix-valider:hover { background: var(--eb-bleu-fonce); color: #FFFFFF; }
.eb-choix .eb-choix-form button.eb-choix-valider:focus-visible { box-shadow: var(--eb-focus); }
.eb-choix .eb-choix-note { font-size: var(--eb-t-petit); color: var(--eb-gris); }

/* Result: main type in a clear-water card, alternatives side by side. */
.eb-choix .eb-choix-resultat { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 90px; }
.eb-choix .eb-choix-resultat:focus { box-shadow: none; }
.eb-choix .eb-choix-sur { font-size: var(--eb-t-petit); font-weight: 600; color: var(--eb-gris); }
.eb-choix h3.eb-choix-sur--autres { margin-top: 8px; font-family: var(--eb-corps); font-size: var(--eb-t-petit); font-weight: 600; line-height: 1.4; color: var(--eb-gris); }
.eb-choix .eb-choix-carte { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 22px; border: 1px solid var(--eb-bord); border-radius: var(--eb-r-encadre); background: var(--eb-blanc); }
.eb-choix .eb-choix-carte--principale { gap: 10px; padding: 24px 26px; border: 2px solid var(--eb-bleu); background: var(--eb-eau); }
.eb-choix .eb-choix-nom { font-family: var(--eb-titres); font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--eb-encre); }
.eb-choix .eb-choix-carte--principale .eb-choix-nom { font-size: var(--eb-t-titre); }
.eb-choix .eb-choix-raison { color: var(--eb-encre); }
.eb-choix .eb-choix-prix { color: var(--eb-texte); }
.eb-choix .eb-choix-prix strong { font-family: var(--eb-titres); font-weight: 800; font-size: 1.15em; color: var(--eb-bleu); white-space: nowrap; font-variant-numeric: tabular-nums; }
.eb-choix .eb-choix-fourchette { font-size: var(--eb-t-petit); color: var(--eb-gris); font-variant-numeric: tabular-nums; }
.eb-choix .eb-choix-autres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.eb-choix .eb-choix-autres .eb-choix-bouton { margin-top: auto; }
.eb-choix a.eb-choix-bouton, .eb-choix a.eb-choix-bouton:visited, .eb-choix a.eb-choix-bouton:focus {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; min-height: var(--eb-h-bouton);
  margin: 6px 0 0; padding: 0 28px; border: 0; border-radius: var(--eb-r-pilule); background: var(--eb-accent); color: var(--eb-encre); box-shadow: none;
  font-family: var(--eb-titres); font-weight: 800; font-size: 18px; line-height: 1.2; text-align: center; text-decoration: none; transition: background .15s;
}
.eb-choix a.eb-choix-bouton:hover { background: var(--eb-accent-survol); color: var(--eb-encre); }
.eb-choix a.eb-choix-bouton--second, .eb-choix a.eb-choix-bouton--second:visited, .eb-choix a.eb-choix-bouton--second:focus {
  min-height: var(--eb-cible); padding: 0 22px; border: 2px solid var(--eb-bleu); background: var(--eb-blanc); color: var(--eb-bleu); font-size: 17px;
}
.eb-choix a.eb-choix-bouton--second:hover { background: var(--eb-eau); color: var(--eb-bleu); }
.eb-choix a.eb-choix-bouton:focus-visible { box-shadow: var(--eb-focus); }
.eb-choix .eb-choix-alerte { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border: 1px solid var(--eb-accent); border-radius: var(--eb-r-encadre); background: var(--eb-sable); color: var(--eb-encre); }
.eb-choix .eb-choix-alerte .eb-ico { margin-top: 2px; color: var(--eb-bleu); }
.eb-choix .eb-choix-manque { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; border: 2px solid var(--eb-alerte); border-radius: var(--eb-r-encadre); background: var(--eb-alerte-fond); color: var(--eb-encre); }
.eb-choix .eb-choix-manque ul { margin: 0; padding-left: 20px; font-size: var(--eb-t-petit); }
.eb-choix .eb-choix-manque li { list-style: disc; }
.eb-choix .eb-choix-piste { padding: 12px 16px; border-radius: var(--eb-r-encadre); background: var(--eb-sable); font-size: var(--eb-t-petit); color: var(--eb-encre); }
.eb-choix .eb-choix-indicatif { font-size: var(--eb-t-petit); color: var(--eb-gris); }

@media (max-width: 640px) {
  .eb-choix .eb-choix-tuiles { grid-template-columns: 1fr; }
  .eb-choix .eb-choix-pastilles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eb-choix .eb-choix-pastille > span { width: 100%; padding: 6px 10px; }
  .eb-choix .eb-choix-pastille input.eb-radio:checked + span { padding: 5px 9px; }
  .eb-choix .eb-choix-actions { flex-direction: column; align-items: stretch; }
  .eb-choix .eb-choix-form button.eb-choix-valider, .eb-choix a.eb-choix-bouton { width: 100%; }
  .eb-choix .eb-choix-carte, .eb-choix .eb-choix-carte--principale { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .eb-choix * { transition: none; animation: none; } }