/* ========================================
   UTILITIES.CSS
   Classes utilitaires (espacement, texte, fond, flex, etc.)
   ======================================== */

/* ══════════════════════════════════════════════════════════════════
   ESPACEMENT (Margin Top)
══════════════════════════════════════════════════════════════════ */

.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-7  { margin-top: var(--space-7); }
.mt-8  { margin-top: var(--space-8); }
.mt-9  { margin-top: var(--space-9); }
.mt-10 { margin-top: var(--space-10); }

/* Margin Bottom */
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-7  { margin-bottom: var(--space-7); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-9  { margin-bottom: var(--space-9); }
.mb-10 { margin-bottom: var(--space-10); }

/* Margin Left */
.ml-1  { margin-left: var(--space-1); }
.ml-2  { margin-left: var(--space-2); }
.ml-3  { margin-left: var(--space-3); }
.ml-4  { margin-left: var(--space-4); }
.ml-5  { margin-left: var(--space-5); }

/* Margin Right */
.mr-1  { margin-right: var(--space-1); }
.mr-2  { margin-right: var(--space-2); }
.mr-3  { margin-right: var(--space-3); }
.mr-4  { margin-right: var(--space-4); }
.mr-5  { margin-right: var(--space-5); }

/* Margin Top & Bottom */
.my-1  { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2  { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3  { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4  { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-5  { margin-top: var(--space-5); margin-bottom: var(--space-5); }

/* Margin Left & Right */
.mx-1  { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2  { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3  { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4  { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-5  { margin-left: var(--space-5); margin-right: var(--space-5); }

/* Margin All */
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }
.m-5  { margin: var(--space-5); }

/* Padding */
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }

/* Padding Top */
.pt-1  { padding-top: var(--space-1); }
.pt-2  { padding-top: var(--space-2); }
.pt-3  { padding-top: var(--space-3); }
.pt-4  { padding-top: var(--space-4); }
.pt-5  { padding-top: var(--space-5); }

/* Padding Bottom */
.pb-1  { padding-bottom: var(--space-1); }
.pb-2  { padding-bottom: var(--space-2); }
.pb-3  { padding-bottom: var(--space-3); }
.pb-4  { padding-bottom: var(--space-4); }
.pb-5  { padding-bottom: var(--space-5); }

/* Padding Left */
.pl-1  { padding-left: var(--space-1); }
.pl-2  { padding-left: var(--space-2); }
.pl-3  { padding-left: var(--space-3); }
.pl-4  { padding-left: var(--space-4); }
.pl-5  { padding-left: var(--space-5); }

/* Padding Right */
.pr-1  { padding-right: var(--space-1); }
.pr-2  { padding-right: var(--space-2); }
.pr-3  { padding-right: var(--space-3); }
.pr-4  { padding-right: var(--space-4); }
.pr-5  { padding-right: var(--space-5); }

/* ══════════════════════════════════════════════════════════════════
   VISIBILITÉ
══════════════════════════════════════════════════════════════════ */

.hidden         { display: none; }
.hidden-mobile  { display: none; }
@media (max-width: 767px) {
  .hidden-mobile { display: block; }
  .hidden-desktop { display: none; }
}
@media (min-width: 768px) {
  .hidden-desktop { display: block; }
  .hidden-mobile { display: none; }
}

.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;
}

/* ══════════════════════════════════════════════════════════════════
   TEXTE
══════════════════════════════════════════════════════════════════ */

.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }

.text-rouge     { color: var(--color-rouge); }
.text-or        { color: var(--color-or); }
.text-bleu-nuit { color: var(--color-bleu-nuit); }
.text-texte     { color: var(--color-texte); }
.text-texte-discret { color: var(--color-texte-discret); }
.text-inverse   { color: var(--color-texte-inverse); }

/* ══════════════════════════════════════════════════════════════════
   FOND
══════════════════════════════════════════════════════════════════ */

.bg-fond-base { background-color: var(--color-fond-base); }
.bg-fond-subtil { background-color: var(--color-fond-subtil); }
.bg-bleu-nuit { background-color: var(--color-bleu-nuit); }
.bg-rouge { background-color: var(--color-rouge); }
.bg-or { background-color: var(--color-or); }

/* ══════════════════════════════════════════════════════════════════
   FLEX & GRID
══════════════════════════════════════════════════════════════════ */

.flex           { display: flex; }
.flex-wrap      { flex-wrap: wrap; }
.flex-nowrap    { flex-wrap: nowrap; }
.flex-column    { flex-direction: column; }
.flex-row       { flex-direction: row; }

.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

.items-start     { align-items: flex-start; }
.items-center    { align-items: center; }
.items-end       { align-items: flex-end; }
.items-stretch   { align-items: stretch; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* ══════════════════════════════════════════════════════════════════
   BORDURES
══════════════════════════════════════════════════════════════════ */

.border-subtile { border: 1px solid var(--color-bordure-subtile); }
.border-bordure { border: 1px solid var(--color-bordure); }
.border-rouge { border-color: var(--color-rouge); }

.border-radius-sm { border-radius: var(--radius-sm); }
.border-radius-md { border-radius: var(--radius-md); }
.border-radius-lg { border-radius: var(--radius-lg); }
.border-radius-pill { border-radius: var(--radius-pill); }

.no-border { border: none; }

/* ══════════════════════════════════════════════════════════════════
   TAILLES
══════════════════════════════════════════════════════════════════ */

.w-full { width: 100%; }
.h-full { height: 100%; }

/* ══════════════════════════════════════════════════════════════════
   POSITION
══════════════════════════════════════════════════════════════════ */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ══════════════════════════════════════════════════════════════════
   OVERFLOW
══════════════════════════════════════════════════════════════════ */

.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

/* ══════════════════════════════════════════════════════════════════
   WPFORMS
══════════════════════════════════════════════════════════════════ */

/* Conteneur global */
.wpforms-container {
  font-family: var(--font-corps) !important;
}

/* Labels */
.wpforms-field-label {
  font-family: var(--font-corps) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--color-bleu-nuit) !important;
  margin-bottom: var(--space-2) !important;
}

/* Champs texte, textarea, select */
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field input[type="url"],
.wpforms-field input[type="number"],
.wpforms-field textarea,
.wpforms-field select {
  font-family: var(--font-corps) !important;
  font-size: var(--text-base) !important;
  color: var(--color-texte) !important;
  background-color: var(--color-texte-inverse) !important;
  border: 1.5px solid var(--color-bordure) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) var(--space-4) !important;
  width: 100% !important;
  transition: border-color var(--transition-fast) !important;
  box-shadow: none !important;
}

.wpforms-field input:focus,
.wpforms-field textarea:focus,
.wpforms-field select:focus {
  border-color: var(--color-bleu-nuit) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(26, 42, 74, 0.1) !important;
}

/* Textarea — hauteur confortable */
.wpforms-field textarea {
  min-height: 140px !important;
  resize: vertical !important;
}

/* Texte d'aide / description */
.wpforms-field-description {
  font-size: var(--text-xs) !important;
  color: var(--color-texte-discret) !important;
  margin-top: var(--space-1) !important;
}

/* Espacement entre champs */
.wpforms-field {
  margin-bottom: var(--space-5) !important;
}

/* Bouton submit */
.wpforms-submit-container .wpforms-submit,
button.wpforms-submit {
  font-family: var(--font-corps) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  background-color: var(--color-rouge) !important;
  color: var(--color-fond-base) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) var(--space-7) !important;
  cursor: pointer !important;
  transition: background-color var(--transition-fast) !important;
  letter-spacing: 0.02em !important;
}

.wpforms-submit-container .wpforms-submit:hover,
button.wpforms-submit:hover {
  background-color: var(--color-rouge-hover) !important;
}

/* Message d'erreur champ */
.wpforms-field .wpforms-error {
  font-size: var(--text-xs) !important;
  color: var(--color-rouge) !important;
  margin-top: var(--space-1) !important;
}

/* Champ en erreur */
.wpforms-field input.wpforms-error,
.wpforms-field textarea.wpforms-error,
.wpforms-field select.wpforms-error {
  border-color: var(--color-rouge) !important;
}

/* Message de confirmation (après envoi) */
.wpforms-confirmation-container-full,
.wpforms-confirmation-container {
  background-color: var(--color-fond-subtil) !important;
  border-left: 4px solid var(--color-or) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-5) var(--space-6) !important;
  font-family: var(--font-corps) !important;
  font-size: var(--text-base) !important;
  color: var(--color-texte) !important;
}