/* Styles communs à toutes les pages du site public (en plus de Tailwind).
   Couleurs : variables de css/palette.css (générée depuis outils/palettes.cjs) — aucune couleur en dur ici. */

html { scroll-behavior: smooth; }

/* Grain papier très léger sur toute la page (évoque l'herbier) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cadre photo : tant que l'image n'est pas chargée (ou absente), une couronne dessinée s'affiche.
   Le dessin est un masque : il prend la couleur "dore" de la palette. */
.photo { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--ecru) 0%, rgb(var(--dore-rgb) / .18) 100%); }
.photo::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 46%; aspect-ratio: 1; opacity: .6;
  background-color: var(--dore);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='.8' stroke-linecap='round'%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3Ccircle cx='50' cy='50' r='30' stroke-dasharray='1 3'/%3E%3Cpath d='M50 16c4 4 4 9 0 12-4-3-4-8 0-12zM84 50c-4 4-9 4-12 0 3-4 8-4 12 0zM50 84c-4-4-4-9 0-12 4 3 4 8 0 12zM16 50c4-4 9-4 12 0-3 4-8 4-12 0zM74 26c0 6-4 9-8 8 0-5 3-8 8-8zM74 74c-6 0-9-4-8-8 5 0 8 3 8 8zM26 74c0-6 4-9 8-8 0 5-3 8-8 8zM26 26c6 0 9 4 8 8-5 0-8-3-8-8z'/%3E%3Cpath d='M44 84l-6 10M56 84l6 10'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='.8' stroke-linecap='round'%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3Ccircle cx='50' cy='50' r='30' stroke-dasharray='1 3'/%3E%3Cpath d='M50 16c4 4 4 9 0 12-4-3-4-8 0-12zM84 50c-4 4-9 4-12 0 3-4 8-4 12 0zM50 84c-4-4-4-9 0-12 4 3 4 8 0 12zM16 50c4-4 9-4 12 0-3 4-8 4-12 0zM74 26c0 6-4 9-8 8 0-5 3-8 8-8zM74 74c-6 0-9-4-8-8 5 0 8 3 8 8zM26 74c0-6 4-9 8-8 0 5-3 8-8 8zM26 26c6 0 9 4 8 8-5 0-8-3-8-8z'/%3E%3Cpath d='M44 84l-6 10M56 84l6 10'/%3E%3C/svg%3E") center/contain no-repeat;
}
.photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }

/* Révélation douce au défilement */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s ease, transform 1s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Squelettes de chargement */
.squelette { background: linear-gradient(90deg, var(--ecru) 25%, var(--lin) 50%, var(--ecru) 75%); background-size: 200% 100%; animation: squelette 1.6s ease-in-out infinite; }
@keyframes squelette { to { background-position: -200% 0; } }

/* Formulaires (16px minimum : sinon l'iPhone zoome sur le champ) */
.champ {
  display: block; width: 100%; border-radius: 0.875rem; border: 1px solid rgb(var(--foret-rgb) / .18);
  background: #fff; padding: 0.8rem 1rem; font-size: 16px; color: var(--foret); transition: border-color .2s, box-shadow .2s;
}
.champ::placeholder { color: rgb(var(--sauge-rgb) / .6); }
.champ:focus { outline: none; border-color: var(--osier); box-shadow: 0 0 0 3px rgb(var(--osier-rgb) / .2); }
.champ[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgb(var(--danger-rgb) / .12); }
.libelle { display: block; margin-bottom: .4rem; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sauge); }
.erreur-champ { margin-top: .35rem; font-size: 12px; color: var(--danger); }

/* Choix sous forme de cartes (livraison / retrait, occasion) */
.choix > input { position: absolute; opacity: 0; pointer-events: none; }
/* ">" : seul le cadre extérieur est stylé, pas les textes qu'il contient */
.choix > span { display: block; border: 1px solid rgb(var(--foret-rgb) / .18); border-radius: 1rem; padding: .85rem 1rem; background: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.choix input:checked + span { border-color: var(--foret); background: var(--ecru); box-shadow: inset 0 0 0 1px var(--foret); }
.choix input:focus-visible + span { box-shadow: 0 0 0 3px rgb(var(--osier-rgb) / .35); }

/* Galerie photo d'une pièce : défilement horizontal par glissé du doigt */
.defilement { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.defilement::-webkit-scrollbar { display: none; }
.defilement > * { flex: 0 0 100%; scroll-snap-align: start; }