.devis-page [hidden] { display: none !important; }
.devis-section { padding-top: 20px; }
.devis-layout { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 980px; margin-inline: auto; }
#configurateur-devis { min-width: 0; padding: 36px; border: 1px solid var(--or-filet); border-radius: 16px; background: radial-gradient(ellipse at top left, var(--or-voile), transparent 50%), var(--noir-2); }
.devis-page .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.devis-progression { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0 0 28px; gap: 10px; }
.devis-progression li { border-bottom: 2px solid var(--noir-3); padding-bottom: 14px; color: var(--texte-doux); font-size: .78rem; }
.devis-progression span { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.devis-progression [aria-current] { color: var(--champagne); border-color: var(--or); }
.devis-progression .terminee { border-color: var(--or-filet); }
.devis-etape { padding-top: 18px; animation: devis-entree .3s ease; }
.devis-etape h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; margin: 12px 0 28px; scroll-margin-top: 110px; }
.devis-etape h3 { font-size: 1.1rem; margin-bottom: 18px; }
.devis-groupe, .devis-condition { min-width: 0; border: 0; padding: 0; margin: 0; }
.devis-condition { margin-top: 28px; padding: 22px; border: 1px solid var(--or-filet); border-radius: 10px; background: var(--or-voile); }
.devis-condition legend { padding: 0 6px; color: var(--champagne); font-size: 1rem; }
.devis-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.devis-carte { display: flex; align-items: center; gap: 12px; padding: 20px 16px; border: 1px solid var(--or-filet); border-radius: 9px; cursor: pointer; line-height: 1.45; background: var(--noir-2); transition: border-color .2s, background .2s; }
.devis-carte input { accent-color: var(--or); width: 18px; height: 18px; flex-shrink: 0; }
/* Un seul indicateur, sans le cercle natif gris propre à chaque navigateur. */
.devis-carte input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  outline: none;
}
.devis-carte input[type="radio"]:checked { background: var(--or); }
/* Les modèles ont déjà leur pastille dorée avec coche sur la carte. */
.devis-modele input[type="radio"] { opacity: 0; }
.devis-carte:has(:checked) { border-color: var(--or); background: var(--or-voile); color: var(--champagne); }
.devis-carte:has(:disabled) { opacity: .5; cursor: default; }
.devis-carte:focus-within { outline: 2px solid var(--or); outline-offset: 3px; }
.devis-modeles .devis-modele { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0; gap: 0; overflow: hidden; }
.devis-modele img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.devis-modele > span { padding: 16px; text-align: center; }
.devis-modele input { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; z-index: 1; }
.devis-modele:has(:checked) { box-shadow: 0 0 20px var(--or-voile), inset 0 0 0 1px var(--or); }
.devis-modele:has(:checked)::after { content: '✓'; position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--or); color: var(--noir); text-align: center; line-height: 26px; pointer-events: none; }
.devis-floral-photo { max-width: 420px; margin: 0 auto 20px; border: 1px solid var(--or-filet); border-radius: 9px; overflow: hidden; background: var(--noir-2); }
.devis-floral-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.devis-floral-photo figcaption { text-align: center; padding: 16px; }
.devis-retour { margin-top: 20px; white-space: pre-line; scroll-margin-top: 110px; }
.devis-retour:empty { display: none; }
.devis-retour.succes { padding: 24px; color: var(--champagne); background: var(--or-voile); border: 1px solid var(--or-filet); border-radius: 9px; }
.devis-retour.erreur { padding: 18px; color: #ffb7a8; border: 1px solid #ffb7a8; border-radius: 9px; }
.devis-aide { color: var(--texte-doux); font-size: .85rem; margin-bottom: 18px; }
.devis-inclus { padding: 0; list-style: none; margin: 0 0 24px; }
.devis-inclus li { margin-bottom: 8px; }
.devis-inclus li::before { content: '✓'; color: var(--or); margin-right: 10px; }
.devis-ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.devis-champ { min-width: 0; margin-bottom: 24px; }
.devis-champ label { display: block; font-size: .95rem; margin-bottom: 10px; }
.devis-champ input, .devis-champ select, .devis-champ textarea { width: 100%; min-width: 0; min-height: 54px; padding: 15px; font: inherit; font-size: 16px; color: var(--texte); background: var(--noir); border: 1px solid var(--or-filet); border-radius: 8px; transition: border-color .2s, box-shadow .2s; color-scheme: dark; }
.devis-champ textarea { resize: vertical; }
.devis-champ input:focus, .devis-champ select:focus, .devis-champ textarea:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px var(--or-voile); }
.devis-champ input[type=date]::-webkit-calendar-picker-indicator { filter: sepia(1) saturate(2); cursor: pointer; }
.devis-erreur { font-size: .85rem; color: #ffb7a8; margin-top: 8px; }
.devis-erreur:empty { display: none; }
.devis-page [aria-invalid=true] { border-color: #ffb7a8; }
.devis-recap { padding: 24px; margin-bottom: 24px; border: 1px solid var(--or-filet); border-radius: 10px; background: var(--noir); }
.devis-recap dt { font-size: .8rem; color: var(--texte-doux); margin-top: 16px; }
.devis-recap dd { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.devis-navigation { display: flex; gap: 16px; justify-content: space-between; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--or-filet); }
.devis-precedent { border: 0; background: transparent; color: var(--texte); font: inherit; padding: 12px; min-height: 48px; cursor: pointer; }
/* Conserver le style commun du bouton et son effet de survol. */
.devis-suivant { isolation: isolate; }
.devis-suivant:disabled { color: var(--or); border-color: var(--or-filet); opacity: .55; cursor: not-allowed; }
.devis-suivant:disabled::before { transform: translateY(100%); transition: none; }
/* Safari tactile : aucun remplissage ni transition dépendant du hover/focus. */
@media (max-width: 600px) {
  .devis-page :is(.devis-suivant, .devis-envoyer) {
    color: var(--or);
    border-color: var(--or);
    background: transparent;
    transition: none;
  }
  .devis-page :is(.devis-suivant, .devis-envoyer)::before { display: none; }
  .devis-page .devis-suivant:disabled { border-color: var(--or-filet); }
  .devis-page :is(.devis-suivant, .devis-envoyer):focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
}
.devis-envoyer { width: 100%; }
.devis-envoyer:disabled { opacity: .65; cursor: wait; }
.devis-delai { text-align: center; font-size: .85rem; color: var(--champagne); margin-top: 14px; }
@keyframes devis-entree { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { #configurateur-devis { padding: 24px 18px; } .devis-layout { padding: 0 16px; gap: 32px; } .devis-choix, .devis-ligne { grid-template-columns: minmax(0, 1fr); } .devis-condition { padding: 16px 12px; } .devis-progression { gap: 6px; } .devis-progression li { font-size: .65rem; } .devis-recap { padding: 18px; } .devis-navigation .bouton { padding: 16px 20px; } }
@media (prefers-reduced-motion: reduce) { .devis-etape { animation: none; } .devis-page * { transition: none !important; } }

/* Contenir aussi les contrôles natifs de Safari dans la colonne mobile. */
@media (max-width: 600px) {
  #configurateur-devis,
  .devis-etape,
  .devis-ligne,
  .devis-champ,
  .devis-champ input,
  .devis-champ select,
  .devis-champ textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .devis-champ input[type="date"] {
    display: block;
    -webkit-appearance: none;
    appearance: none;
    min-inline-size: 0;
  }

  .devis-champ input[type="date"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
  }

  .devis-champ input[type="date"]::-webkit-datetime-edit {
    min-width: 0;
    padding: 0;
  }

  /* Sur cette page, WhatsApp reste accessible après le footer sans superposition. */
  .devis-page ~ .wa-flottant {
    position: relative;
    display: flex;
    right: auto;
    bottom: auto;
    margin: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)) auto;
  }
}