/* ==========================================================================
   LES MAÇONS DU CŒUR — utilities.css
   Classes utilitaires réutilisables
   ========================================================================== */

/* ---------- Alignement ---------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ---------- Espacements ---------- */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 3rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Couleurs ---------- */
.texte-accent { color: var(--orange-ivoire); }
.texte-terre { color: var(--terre-cuite); }
.texte-vert { color: var(--vert-ivoire); }
.texte-blanc { color: var(--blanc); }

.bg-sable { background: var(--sable); }
.bg-sable-fonce { background: var(--sable-fonce); }
.bg-blanc-casse { background: var(--blanc-casse); }

/* ---------- Affichage ---------- */
.hidden { display: none !important; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Images ---------- */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-round {
    border-radius: 50%;
    object-fit: cover;
}

.img-radius { border-radius: var(--radius); }

/* ---------- Conteneur de texte lisible ---------- */
.contenu-lisible {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.contenu-lisible p {
    font-size: 1rem;
    line-height: 2;
}

/* ---------- Ombres ---------- */
.ombre-sm { box-shadow: var(--ombre-sm); }
.ombre { box-shadow: var(--ombre); }
.ombre-lg { box-shadow: var(--ombre-lg); }

/* ---------- Rayons ---------- */
.radius { border-radius: var(--radius); }
.radius-pill { border-radius: var(--radius-pill); }

/* Tablette ≥ 576px */
@media (min-width: 576px) {
    .contenu-lisible { padding: 0 30px; }
}