/* =========================================================
Cuitata — feuille de style complémentaire à Tailwind
Seul ce qui ne se fait pas en classes Tailwind vit ici :
polices, placeholders, masonry, filtres, champs, boutons.
Palette : voir tailwind.config dans le de chaque page.
========================================================= */
/* --- Polices --------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');
:root {
--noir: #0A0A0B; /* fond dominant */
--noir-carte: #0D0D0F; /* fond des cartes */
--ligne: #1E1E21; /* bordures discrètes */
--ligne-forte: #2A2A2E; /* bordures de boutons */
--rouge: #FF2D1F; /* accent principal */
--rouge-clair: #FF6A5C;
--gris: #8C8C93; /* texte secondaire */
--blanc: #F2F2F3; /* texte principal */
}
html { scroll-behavior: smooth; }
body { background: var(--noir); color: var(--blanc); -webkit-font-smoothing: antialiased; }
::selection { background: var(--rouge); color: var(--noir); }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }
/* --- Liens ----------------------------------------------------------- */
a { color: var(--rouge); text-decoration: none; }
a:hover { color: var(--rouge-clair); }
/* --- Boutons ----------------------------------------------------------
.cta = action principale (rouge plein)
.cta-ghost = action secondaire (contour)
.cta-lg = version large, utilisée dans les hero et les formules */
.cta, .cta-ghost {
display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
font-weight: 800; font-size: 16px; padding: 18px 32px; text-align: center;
transition: background-color .18s, border-color .18s, transform .18s, color .18s;
}
.cta { background: var(--rouge); color: var(--noir); }
.cta:hover { background: var(--rouge-clair); color: var(--noir); transform: translateY(-2px); }
.cta:active { transform: translateY(0); }
.cta-ghost { border: 1px solid var(--ligne-forte); color: var(--blanc); }
.cta-ghost:hover { border-color: var(--rouge); color: var(--blanc); transform: translateY(-2px); }
.cta-lg { font-size: 18px; padding: 22px 36px; }
.cta-block { display: flex; width: 100%; }
/* --- Placeholder image / vidéo ---------------------------------------
À remplacer par une ![]()
ou une