/* ============================================================================
   O'taquet Beauty — Collection · Contact · Livraison & retours
   Blocs <style> des helmets de :
     Collection Parfums O'taquet.dc.html
     Contact O'taquet.dc.html
     Livraison Retours O'taquet.dc.html
   Repris VERBATIM. Les règles communes vivent dans page.css §0.
   ============================================================================ */

/* ── Collection Parfums (PLP) ─────────────────────────────────────────────── */
.plp-chip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text); font-family: var(--font-body); font-size: 12px; letter-spacing: .04em; padding: 9px 16px; transition: background .2s, border-color .2s, color .2s; }
.plp-chip:hover { border-color: var(--color-accent); }
.plp-chip[data-on="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-bg); }
.plp-chip[data-on="true"] .plp-count { color: var(--color-accent-light); }
.plp-count { font-size: 11px; color: var(--color-muted); }
.plp-card img { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.plp-card:hover img { transform: scale(1.05); }
.plp-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.plp-card { transition: box-shadow .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1); }
.plp-sort { font-family: var(--font-body); font-size: 12.5px; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; padding: 10px 16px; cursor: pointer; }
@media (max-width: 900px) { .plp-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 520px) { .plp-toolbar { flex-direction: column !important; align-items: stretch !important; } }
@media (prefers-reduced-motion: reduce) { .plp-card, .plp-card img, .plp-chip { transition: none !important; } }

/* ── Contact ──────────────────────────────────────────────────────────────── */
.ct-input { width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 14px; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; padding: 13px 15px; outline: none; transition: border-color .2s; }
.ct-input:focus { border-color: var(--color-primary); }
@media (max-width: 860px) { .ct-grid { grid-template-columns: 1fr !important; } }

/* ── Livraison & retours ──────────────────────────────────────────────────── */
@media (max-width: 820px) { .ship-grid { grid-template-columns: 1fr !important; } .zone-grid { grid-template-columns: 1fr 1fr !important; } }

/* ── Confort mobile — seules règles AJOUTÉES (cf. NOTES.md) ────────────────
   La source fige la grille du formulaire de contact (nom + e-mail) en deux
   colonnes, et les quatre chiffres-clés de Livraison ne descendent qu'à deux. */
@media (max-width: 480px) {
  .ct-namerow { grid-template-columns: 1fr !important; }
  .zone-grid { grid-template-columns: 1fr !important; }
}