/* ============================================================
   Stephane ASTRO — Accessibilité WCAG 2.2 AA · v90.25.1
   ============================================================
   Version chirurgicale : ne touche QUE les vrais éléments
   interactifs (button, a.btn, [role="button"]), JAMAIS les
   pilules d'affichage astrologique (.zodiac-pill) ni les
   méta-labels (.meta-label) qui sont purement informatifs.
   ============================================================ */

/* === 1. TOUCH TARGETS 44×44 sur cibles RÉELLEMENT cliquables === */
button.btn,
button.btn-primary,
button.btn-secondary,
button.sg-cookie-btn,
.sgm-burger,
.sgm-close,
.delete-close,
.auth-tab,
a.btn,
a.btn-primary,
a.btn-secondary {
  min-width: 44px;
  min-height: 44px;
}

/* .modal-close : intentionnellement NON ciblé — la taille existante du
   composant est conservée pour ne pas casser le layout des modales. */

/* === 2. FOCUS VISIBLE WCAG 2.4.13 AA === */
:focus-visible {
  outline: 3px solid #D4A24A;
  outline-offset: 2px;
}

/* Boutons sombres : focus contrasté clair */
.sgm-burger:focus-visible,
.sg-google-btn--dark:focus-visible,
.btn-primary:focus-visible {
  outline-color: #FFFFFF;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(212, 162, 74, 0.4);
}

/* Inputs : focus + ring + couleur bordure */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #D4A24A;
  outline-offset: 0;
  border-color: #D4A24A;
}

/* Suppression outline par défaut au profit du :focus-visible */
*:focus:not(:focus-visible) {
  outline: none;
}

/* === 3. PREFERS REDUCED MOTION (WCAG 2.3.3) === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === 4. FONT-SIZE INPUTS minimum 16px (anti-zoom iOS) === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
  font-size: max(16px, 1rem);
}

/* === 5. SAFE AREA iPhone notch (préparation Capacitor)
   Très ciblé : nav + footer + burger, JAMAIS sur body
   pour éviter les décalages horizontaux qui cassent les grilles === */
@supports (padding: max(0px)) {
  .site-nav {
    padding-top: max(1rem, env(safe-area-inset-top));
  }
  .site-footer {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .sgm-burger {
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
  }
}

/* === 6. SKIP LINK toujours visible au focus === */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  padding: 8px 16px;
  background: #D4A24A;
  color: #0B1020;
  text-decoration: none;
  font-weight: 600;
  z-index: 10000;
  border-radius: 0;
}
.skip-link:focus {
  top: 0;
  outline: none;
}

/* === 7. ÉCRAN LECTEUR (visually hidden mais accessible) === */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* === 8. STATES erreur formulaires WCAG 3.3.1/3.3.3 === */
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #B33B2E !important;
  background-color: #FCEBEB;
}

[role="alert"][hidden] { display: none !important; }
[role="alert"]:not([hidden]) {
  background: #FCEBEB;
  border-left: 4px solid #B33B2E;
  padding: 12px 16px;
  border-radius: 0;
  color: #791F1F;
  font-weight: 500;
}
/* ============================================================
   Stephane ASTRO — UI polish v90.25.9
   ============================================================
   Corrections visuelles MEDIUM identifiées dans l'audit :
   - Ellipsis trop court sur les headers de cartes mon-espace
     (Schœlcher, Fort-de-France, Martinique, 97... → wrap sur 2 lignes)
   - Espaces vides verticaux excessifs sur les calculateurs
     (compte, trinité, trouver-l-amour, palazzo-chat)
   ============================================================ */

/* === 1. Header carte mon-espace : wrap sur 2 lignes au lieu d'ellipsis 1 ligne === */
.compte-card-header h3,
.compte-card-header .compte-card-title,
.theme-card-header h3,
.theme-card-header .theme-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  word-break: break-word;
  hyphens: auto;
}

/* === 2. Réduction des espaces verticaux excessifs sur les calculateurs === */
/* Le pattern observé : intro centrée puis énorme vide vertical puis formulaire.
   On rapproche le formulaire de son intro pour éviter le scroll mort. */
.syn-form-section,
.calculator-form-section,
.form-section-padded {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* Les calculateurs 1-thème (Trinité, Trouver l'amour, Boussole, Rapport argent) */
.single-theme-form-wrapper,
.theme-form-wrapper {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* L'écart entre le hero d'intro et le formulaire en dessous */
.calculator-hero + .calculator-form,
.page-hero + .page-form,
.syn-hero + .syn-form {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* === 3. Espaces blancs entre sections compte.html === */
/* La section Mes Profils était trop éloignée de Palazzo */
#compte-mes-profils,
.compte-section,
.compte-profile-list {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* === 4. Bouton 404 / page d'erreur : cohérence avec design system === */
@media (max-width: 480px) {
  .compte-card-header h3,
  .theme-card-header h3 {
    font-size: 0.95rem;
  }
}