/* Micro-interactions et états (survol, focus, transitions), chargé après style.css et configurateur.css.
   Esprit papeterie : sobre, précis, doux. Rien ici ne touche à la mise en page ; tout est coupé sous prefers-reduced-motion.
   Attention : « .vignette » désigne à la fois les miniatures de modèles (button.vignette dans .vignettes) et l'état réduit
   de l'aperçu mobile (.scene.vignette). Les règles ci-dessous ne visent que « .vignettes .vignette ». */

/* ── 1. transitions courtes (jamais sur width/height) ───────────────────── */
button:not(.scene-agrandir), .bouton, .lien-doux, .entete-nav a, .carte, summary,
.reglages input, .commande input, .qte-ctrl input {
  transition: color .18s ease-out, background-color .18s ease-out, border-color .18s ease-out,
    box-shadow .18s ease-out, opacity .18s ease-out, transform .18s ease-out, filter .18s ease-out;
}

/* ── 2. retour au clic : léger « press » ────────────────────────────────── */
button:not(.scene-agrandir):not([disabled]):active, .bouton:active {
  transform: scale(.98);
  transition-duration: .12s;
}

/* survol des choix non retenus : la bordure se réchauffe, sans changer de taille */
@media (hover: hover) {
  .choix button:not([aria-pressed=true]):hover,
  .options button:not([disabled]):not([aria-pressed=true]):hover,
  .filtres button:not([aria-pressed=true]):hover,
  .vignettes .vignette:not([aria-pressed=true]):hover,
  .carte:not(.choisie):hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--ligne)); }
  .entete-nav a:hover { color: var(--encre); }
  .lien-doux:hover { border-bottom-color: var(--accent); }
  .pastille:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, var(--accent) 45%, var(--ligne)); }
  .pastille[aria-pressed=true]:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
}
.reglages input:focus, .commande input:focus, .qte-ctrl input:focus { border-color: var(--accent); }

/* apparition du bord ou de l'anneau sur l'élément qui vient d'être choisi (classe posée par interactions.js, 300 ms) */
.vient-d-etre-choisi { animation: halo-choix .3s ease-out; }
.pastille.vient-d-etre-choisi { animation: anneau-pastille .3s ease-out; }
@keyframes halo-choix {
  0% { box-shadow: 0 0 0 0 rgba(122, 92, 62, .35); }
  100% { box-shadow: 0 0 0 7px rgba(122, 92, 62, 0); }
}
@keyframes anneau-pastille {
  0% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px var(--accent); transform: scale(1.08); }
  100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); transform: scale(1); }
}

/* ── 3. nom de la couleur : infobulle fine au-dessus de la pastille ───────── */
.infobulle {
  position: fixed; z-index: 30; pointer-events: none;
  background: var(--encre); color: #fff; font-size: .78rem; line-height: 1.3; letter-spacing: .01em;
  padding: 4px 9px; border-radius: 6px; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 8px));
  opacity: 0; transition: opacity .15s ease-out;
}
.infobulle::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px;
  background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 1px;
}
.infobulle.visible { opacity: 1; }

/* ── 4. mise à jour du prix : léger pulse ─────────────────────────────────── */
[data-total].prix-pulse {
  animation: prix-pulse .3s ease-out;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em;
}
@keyframes prix-pulse {
  0% { opacity: .45; text-decoration-color: var(--accent); }
  100% { opacity: 1; text-decoration-color: transparent; }
}

/* ── 5. date du mariage : une seule transition d'attention, pas de clignotement ── */
[data-livraison].alerte-apparue, .delai.alerte-apparue { animation: attention .35s ease-out; }
@keyframes attention {
  0% { transform: translateX(-4px); opacity: .45; }
  100% { transform: none; opacity: 1; }
}

/* ── 6. formulaire : état du bouton d'envoi et champ en erreur ───────────── */
.cmd-envoyer.envoi-en-cours { cursor: progress; opacity: .88; }
.cmd-envoyer.envoi-ok { background: var(--ok); border-color: var(--ok); }
.secoue { animation: secousse .24s ease-in-out; }
@keyframes secousse {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-2px); }
  40%, 80% { transform: translateX(2px); }
}
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── 7. défilement : la cible garde le focus clavier, sans outline à la souris ── */
.cible-focus:focus:not(:focus-visible) { outline: none; }
#modeles, #budget, #faq { scroll-margin-top: calc(var(--entete) + 16px); }

/* ── 8. vignettes de modèles et cartes : léger soulèvement au survol ───────── */
@media (hover: hover) {
  .vignettes .vignette:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(43, 38, 34, .08); }
  .vignettes .vignette[aria-pressed=true]:hover { box-shadow: 0 0 0 2px var(--accent-c), 0 6px 14px rgba(43, 38, 34, .08); }
  .vignettes .vignette:active { transform: translateY(-1px) scale(.98); }
  .carte:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(43, 38, 34, .07); }
  .carte.choisie:hover { box-shadow: 0 0 0 2px var(--accent-c), 0 8px 18px rgba(43, 38, 34, .07); }
}

/* ── 9. details/summary : chevron fin qui pivote, contenu qui s'estompe ───── */
summary { list-style: none; position: relative; padding-right: 26px; }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg); opacity: .75;
  transition: transform .2s ease-out, opacity .18s ease-out;
}
details[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
details.deplie > :not(summary) { animation: deplier .22s ease-out; }
@keyframes deplier {
  0% { opacity: 0; transform: translateY(-3px); }
  100% { opacity: 1; transform: none; }
}

/* ── 10. mouvement réduit : tout est coupé ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  button, .bouton, .lien-doux, .entete-nav a, .carte, summary, summary::after, details > *,
  .reglages input, .commande input, .qte-ctrl input, .pastille, .vignettes .vignette,
  .infobulle, [data-total], [data-livraison], .delai, .secoue, .vient-d-etre-choisi {
    transition: none !important; animation: none !important;
  }
  button:not(.scene-agrandir):active, .bouton:active, .vignettes .vignette:hover, .carte:hover { transform: none !important; }
}

/* coordination finale : cibles tactiles des puces de filtre */
.filtres button { min-height: 40px; }
.entete .marque { padding-block: 10px; }

/* coordination finale : espaces autour du chiffre des garanties, texte de la barre mobile non tronqué */
.garanties b { margin-inline: .28em; }
@media (max-width: 1000px) { .pied .pied-liv, .pied .pied-total span { white-space: normal; overflow: visible; text-overflow: clip; } }