.es-devis:where([data-es-rendu="genere"]) {
  --_fond: var(--es-devis-fond, #ffffff);
  --_texte: var(--es-devis-texte, #1a1a1a);
  --_accent: var(--es-devis-accent, #1f4b99);
  --_accent-texte: var(--es-devis-accent-texte, #ffffff);
  --_bord: var(--es-devis-bord, rgba(0, 0, 0, 0.18));
  --_rayon: var(--es-devis-rayon, 12px);
  position: relative;
  background: var(--_fond);
  color: var(--_texte);
  font-family: var(--es-devis-police, inherit);
  border: 1px solid var(--_bord);
  border-radius: var(--_rayon);
  padding: 0 clamp(16px, 3vw, 32px) clamp(16px, 3vw, 32px);
  max-width: 760px;
  margin-inline: auto;
  box-sizing: border-box;
}
.es-devis:where([data-es-rendu="genere"]) *, .es-devis:where([data-es-rendu="genere"]) *::before, .es-devis:where([data-es-rendu="genere"]) *::after { box-sizing: border-box; }

:where([data-es-rendu="genere"]) .es-devis__bandeau {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 calc(-1 * clamp(16px, 3vw, 32px)) 16px;
  padding: 10px 16px;
  background: #fff4c2;
  color: #3d3000;
  border-bottom: 1px solid #e4cf6a;
  border-radius: var(--_rayon) var(--_rayon) 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}

:where([data-es-rendu="genere"]) .es-devis__formulaire { display: grid; gap: 20px; }
:where([data-es-rendu="genere"]) .es-devis__groupe { border: 0; margin: 0; padding: 0; min-width: 0; }
:where([data-es-rendu="genere"]) .es-devis__groupe legend, :where([data-es-rendu="genere"]) .es-devis__champ label { font-weight: 600; margin-bottom: 8px; display: block; padding: 0; }

:where([data-es-rendu="genere"]) .es-devis__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
:where([data-es-rendu="genere"]) .es-devis__tuile-case { position: relative; }
:where([data-es-rendu="genere"]) .es-devis__tuile-case input { position: absolute; opacity: 0; width: 1px; height: 1px; }
:where([data-es-rendu="genere"]) .es-devis__tuile {
  display: flex; align-items: center; min-height: 56px; height: 100%;
  padding: 12px 14px; border: 1px solid var(--_bord); border-radius: calc(var(--_rayon) * 0.75);
  cursor: pointer; line-height: 1.25;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
:where([data-es-rendu="genere"]) .es-devis__tuile:hover { border-color: var(--_accent); }
:where([data-es-rendu="genere"]) .es-devis__tuile-case input:checked + .es-devis__tuile {
  border-color: var(--_accent); background: color-mix(in srgb, var(--_accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px var(--_accent);
}
:where([data-es-rendu="genere"]) .es-devis__tuile-case input:focus-visible + .es-devis__tuile { outline: 3px solid var(--_accent); outline-offset: 2px; }

:where([data-es-rendu="genere"]) .es-devis__champ input, :where([data-es-rendu="genere"]) .es-devis__champ textarea {
  width: 100%; font: inherit; color: inherit; background: transparent;
  border: 1px solid var(--_bord); border-radius: calc(var(--_rayon) * 0.6);
  padding: 12px 14px; min-height: 48px;
}
:where([data-es-rendu="genere"]) .es-devis__champ input:focus-visible, :where([data-es-rendu="genere"]) .es-devis__champ textarea:focus-visible,
:where([data-es-rendu="genere"]) .es-devis__choix input:focus-visible, :where([data-es-rendu="genere"]) .es-devis__envoyer:focus-visible {
  outline: 3px solid var(--_accent); outline-offset: 2px;
}
:where([data-es-rendu="genere"]) .es-devis__champ input[aria-invalid="true"] { border-color: #b3261e; }
:where([data-es-rendu="genere"]) .es-devis__champ--court input { max-width: 12ch; }
:where([data-es-rendu="genere"]) .es-devis__ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; align-items: start; }
:where([data-es-rendu="genere"]) .es-devis__delai { display: flex; flex-wrap: wrap; gap: 8px 16px; }
:where([data-es-rendu="genere"]) .es-devis__delai legend { width: 100%; }
:where([data-es-rendu="genere"]) .es-devis__choix { display: flex; align-items: center; gap: 8px; min-height: 44px; }
:where([data-es-rendu="genere"]) .es-devis__choix input { width: 20px; height: 20px; accent-color: var(--_accent); }

:where([data-es-rendu="genere"]) .es-devis__depot {
  display: block; padding: 18px; border: 2px dashed var(--_bord); border-radius: var(--_rayon);
  text-align: center; cursor: pointer; transition: border-color 160ms ease;
}
:where([data-es-rendu="genere"]) .es-devis__depot:hover { border-color: var(--_accent); }
:where([data-es-rendu="genere"]) .es-devis__champ input[type="file"] { border-style: dashed; }
:where([data-es-rendu="genere"]) .es-devis__aide { font-size: 0.9rem; opacity: 0.8; margin: 6px 0 0; }
:where([data-es-rendu="genere"]) .es-devis__apercu { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 8px 0 0; }
:where([data-es-rendu="genere"]) .es-devis__apercu img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }

:where([data-es-rendu="genere"]) .es-devis__coordonnees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
:where([data-es-rendu="genere"]) .es-devis__erreur { color: #b3261e; font-weight: 600; margin: 0; }
:where([data-es-rendu="genere"]) .es-devis__envoyer {
  justify-self: start; min-height: 52px; padding: 14px 28px; font: inherit; font-weight: 700;
  color: var(--_accent-texte); background: var(--_accent); border: 0; border-radius: 999px; cursor: pointer;
  transition: box-shadow 160ms ease, background-color 160ms ease;
}

:where([data-es-rendu="genere"]) .es-devis__envoyer:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--_accent) 35%, transparent); }

:where([data-es-rendu="genere"]) .es-devis__confirmation { margin-top: 20px; padding: 16px; border-radius: var(--_rayon); border: 1px solid var(--_accent); font-weight: 600; }
:where([data-es-rendu="genere"]) .es-devis__confirmation p { margin: 0; }
:where([data-es-rendu="genere"]) .es-devis__confirmation a { color: inherit; }
.es-devis--confirme:where([data-es-rendu="genere"]) .es-devis__formulaire { opacity: 0.55; }

@media (max-width: 640px) {
  :where([data-es-rendu="genere"]) .es-devis__ligne, :where([data-es-rendu="genere"]) .es-devis__coordonnees { grid-template-columns: minmax(0, 1fr); }
  :where([data-es-rendu="genere"]) .es-devis__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where([data-es-rendu="genere"]) .es-devis__envoyer { justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .es-devis:where([data-es-rendu="genere"]) *, .es-devis:where([data-es-rendu="genere"]) *::before, .es-devis:where([data-es-rendu="genere"]) *::after { transition: none !important; animation: none !important; }
}