/**
 * home-utilities.css
 * Classes utilitaires extraites des styles inline répétés de la page d'accueil.
 * Généré lors de l'optimisation performance — ne pas éditer manuellement les
 * valeurs sans mettre à jour les partials correspondants.
 *
 * TABLEAU AVANT → APRÈS
 * ──────────────────────────────────────────────────────────────────────────
 * style="width:20px;height:20px;"                        → .icon-20
 * style="width:24px;height:24px;"                        → .icon-24
 * style="width:40px;height:40px;"                        → .icon-40
 * style="background:linear-gradient(135deg,#0EA5E9,#38BDF8)"  → .grad-sky
 * style="background:linear-gradient(135deg,#7C3AED,#A78BFA)"  → .grad-violet
 * style="background:linear-gradient(135deg,#7C3AED,#5B21B6)"  → .grad-violet-deep
 * style="background:linear-gradient(135deg,#EF4444,#F87171)"  → .grad-coral
 * style="background:linear-gradient(135deg,#F97316,#FB923C)"  → .grad-orange
 * style="background:linear-gradient(135deg,#F59E0B,#FBBF24)"  → .grad-amber
 * style="background:linear-gradient(135deg,#10B981,#34D399)"  → .grad-green
 * style="background:linear-gradient(135deg,#EC4899,#F472B6)"  → .grad-pink
 * style="background:linear-gradient(135deg,#6366F1,#818CF8)"  → .grad-indigo
 * style="display:block;stroke:#4b5563;"                   → .svg-inline (sur <svg>)
 * Labels uppercase violet (label de filtre)               → .filter-label
 * Selects de recherche avec border violet                 → .filter-select
 * ──────────────────────────────────────────────────────────────────────────
 */

/* ── Tailles d'icônes ──────────────────────────────────────────────────── */
.icon-16 { width: 16px; height: 16px; flex-shrink: 0; }
.icon-20 { width: 20px; height: 20px; flex-shrink: 0; }
.icon-24 { width: 24px; height: 24px; flex-shrink: 0; }
.icon-40 { width: 40px; height: 40px; flex-shrink: 0; }

/* ── Icône SVG inline générique (remplace style="display:block;stroke:#4b5563;") */
.svg-inline {
  display: block;
  stroke: #4b5563;
}

/* ── Gradients de fond réutilisables ───────────────────────────────────── */
/* Ciel / bleu clair */
.grad-sky     { background: linear-gradient(135deg, #0EA5E9, #38BDF8); }
/* Violet standard */
.grad-violet  { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
/* Violet profond */
.grad-violet-deep { background: linear-gradient(135deg, #7C3AED, #5B21B6); }
/* Coral / rouge */
.grad-coral   { background: linear-gradient(135deg, #EF4444, #F87171); }
/* Orange */
.grad-orange  { background: linear-gradient(135deg, #F97316, #FB923C); }
/* Ambre / jaune */
.grad-amber   { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
/* Vert émeraude */
.grad-green   { background: linear-gradient(135deg, #10B981, #34D399); }
/* Rose / pink */
.grad-pink    { background: linear-gradient(135deg, #EC4899, #F472B6); }
/* Indigo */
.grad-indigo  { background: linear-gradient(135deg, #6366F1, #818CF8); }

/* ── Badge / label de section (uppercase violet) ──────────────────────── */
/* Remplace les style inline répétés sur les <label> de filtres de recherche */
.filter-label {
  font-size: .72rem;
  font-weight: 800;
  color: #7C3AED;
  text-transform: uppercase;
  letter-spacing: .05em;
  display: block;
  margin-bottom: 4px;
}

/* ── Select de filtre (bordure violet) ────────────────────────────────── */
.filter-select {
  border-radius: 10px;
  font-size: .88rem;
  border-color: #DDD6FE;
}

/* ── Wrapper icône pour les feat-cards (remplace style="background:...") */
/* Utilisé avec .grad-* → ex: class="feat-icon-wrap grad-violet" */
.feat-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

/* ── Avatar circulaire avec gradient ──────────────────────────────────── */
/* Remplace style="background:linear-gradient(135deg,#7C3AED,#A78BFA)" sur
   les éléments .nav-avatar et assimilés */
.avatar-grad-violet {
  background: linear-gradient(135deg, #7C3AED, #A78BFA);
}

/* ── Icône de chargement (spinner) ───────────────────────────────────── */
/* Remplace style="animation:spin 1s linear infinite" */
.spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Élément flottant animé (slides carousel) ────────────────────────── */
/* Remplace style="animation:floatAnim 6s ease-in-out infinite alternate;" */
.float-6  { animation: floatAnim 6s  ease-in-out infinite alternate; }
.float-7  { animation: floatAnim 7s  ease-in-out infinite alternate-reverse; }
.float-8  { animation: floatAnim 8s  ease-in-out infinite alternate; }

/* floatAnim est déjà défini dans design.css — si absent, fallback ici */
@keyframes floatAnim {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-12px); }
}

/* ── Conteneur de slide "hero" (remplace style inline position:relative;height:400px) */
.slide-visual-wrap {
  position: relative;
  height: 400px;
}

/* ── Carte flottante dans les slides ─────────────────────────────────── */
.slide-float-card {
  position: absolute;
  background: white;
  padding: 15px;
  border-radius: 15px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
  width: 250px;
}

/* ── Puce de type/catégorie dans les cartes flottantes ───────────────── */
.slide-float-label {
  font-weight: 800;
  font-size: .8rem;
  margin-bottom: 5px;
}
.slide-float-title {
  font-weight: 700;
  font-size: .95rem;
}

/* ── Groupe d'avatars en pile (hero) ─────────────────────────────────── */
.avatar-stack {
  display: flex;
  align-items: center;
  gap: 0;
}
.avatar-stack-item {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.avatar-stack-item + .avatar-stack-item {
  margin-left: -10px;
}

/* ── Texte de compteur communauté (hero) ─────────────────────────────── */
.community-count {
  font-size: .85rem;
  font-weight: 700;
  color: var(--dark, #1E1B4B);
}
.community-count .sub {
  color: var(--muted, #6B7280);
  font-weight: 600;
}

/* ── Badge pied de page (100% Gratuit / FR·AR) ───────────────────────── */
/* Remplace style="background:rgba(255,255,255,.1);padding:6px 10px;border-radius:999px;…" */
.footer-badge {
  background: rgba(255, 255, 255, .1);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
}

/* ── Liens du bas de footer ───────────────────────────────────────────── */
/* Remplace les style="color:rgba(255,255,255,.65);font-size:.82rem;" sur les <a> */
.footer-bottom-link {
  color: rgba(255, 255, 255, .65);
  font-size: .82rem;
}

/* ── Positionnement cartes flottantes de slide (complément de .slide-float-card) */
/* Permet de ne garder que top/left/bottom/right en inline (valeurs positionnelles) */
.slide-float-card {
  position: absolute;
  background: white;
  padding: 15px;
  border-radius: 15px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
  width: 250px;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION RECHERCHE — classes extraites de home-search.partial.php
   ══════════════════════════════════════════════════════════════════════════ */

/* Remplace style="padding:40px 0 32px;background:white;border-bottom:2px solid #F1F5F9;" */
.search-section {
  padding: 40px 0 32px;
  background: white;
  border-bottom: 2px solid #F1F5F9;
}

/* Remplace style="text-align:center;margin-bottom:24px;" */
.search-section-header {
  text-align: center;
  margin-bottom: 24px;
}

/* Remplace style="font-family:'Nunito'…;font-weight:900;font-size:1.6rem;color:#1E1B4B;margin:8px 0 4px;" */
.search-section-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  color: #1E1B4B;
  margin: 8px 0 4px;
}

/* Remplace style="color:#6B7280;font-size:.9rem;" */
.search-section-subtitle {
  color: #6B7280;
  font-size: .9rem;
}

/* Remplace style="background:#F8F7FF;border-radius:20px;padding:20px 24px;border:2px solid #E5E7EB;box-shadow:…" */
.search-form-wrap {
  background: #F8F7FF;
  border-radius: 20px;
  padding: 20px 24px;
  border: 2px solid #E5E7EB;
  box-shadow: 0 4px 24px rgba(124, 58, 237, .07);
}

/* Remplace style="display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;" sur .home-search-bar */
.home-search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* Remplace style="flex:1;min-width:0;position:relative;" */
.search-input-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* Remplace style="position:absolute;left:14px;top:50%;transform:translateY(-50%);…pointer-events:none;" */
.search-icon-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  pointer-events: none;
  display: flex;
  align-items: center;
}

/* Remplace style="padding-left:42px;font-size:1rem;border-radius:12px;border:2px solid #DDD6FE;background:white;width:100%;" */
.search-main-input {
  padding-left: 42px;
  font-size: 1rem;
  border-radius: 12px;
  border: 2px solid #DDD6FE;
  background: white;
  width: 100%;
}

/* Remplace style="padding:12px 28px;border-radius:12px;font-size:1rem;white-space:nowrap;flex-shrink:0;" */
.search-submit-btn {
  padding: 12px 28px;
  border-radius: 12px;
  font-size: 1rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Remplace style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;" */
.search-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

/* Remplace style="margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;" */
.search-shortcuts {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Remplace style="font-size:.75rem;font-weight:700;color:#9CA3AF;" */
.search-shortcuts-label {
  font-size: .75rem;
  font-weight: 700;
  color: #9CA3AF;
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER — classes extraites de footer.php
   ══════════════════════════════════════════════════════════════════════════ */

/* Remplace style="margin-bottom:14px;" sur le logo du footer */
.footer-logo {
  margin-bottom: 14px;
}

/* Remplace style="color:rgba(255,255,255,.68);font-size:.9rem;line-height:1.7;margin:0 0 18px;" */
.footer-desc {
  color: rgba(255, 255, 255, .68);
  font-size: .9rem;
  line-height: 1.7;
  margin: 0 0 18px;
}

/* Remplace style="color:rgba(255,255,255,.55);font-size:.82rem;margin:0;" sur le copyright */
.footer-copyright {
  color: rgba(255, 255, 255, .55);
  font-size: .82rem;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   SLIDES CAROUSEL — classes extraites de slides-carousel.php
   ══════════════════════════════════════════════════════════════════════════ */

/* Remplace style="display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px;" */
.slide-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* Remplace style="display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;"
   et la variante margin-bottom:10px (utilisé sur les 2 cartes score BAC) */
.slide-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px; /* compromis visuel entre 10px et 15px */
}

/* Remplace style="display:flex;gap:10px;align-items:center;" sur les rangées input */
.slide-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Remplace le long style= sur les inputs des cartes score BAC */
.slide-score-input {
  flex: 1;
  padding: 12px;
  border: 2px solid #eee;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.1rem;
  text-align: center;
}

/* Remplace style="font-weight:700;color:var(--muted);" */
.slide-muted-text {
  font-weight: 700;
  color: var(--muted, #6B7280);
}

/* Remplace style="display:flex;align-items:center;gap:15px;" (hero community row) */
.slide-community-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* ══════════════════════════════════════════════════════════════════════════
   COUNTDOWN BAC (slide 5) — classes extraites de slides-carousel.php
   ══════════════════════════════════════════════════════════════════════════ */

/* Icône wrapper dans les cards countdown */
/* Remplace style="font-size:2rem;color:var(--violet/electric);margin-bottom:10px;" */
.cd-icon-wrap {
  font-size: 2rem;
  margin-bottom: 10px;
}
.cd-icon-violet  { color: var(--violet,  #7C3AED); }
.cd-icon-electric { color: var(--electric, #0EA5E9); }

/* Label de l'événement dans les cards countdown */
/* Remplace style="font-weight:900;font-size:1.2rem;color:var(--dark);margin-bottom:20px;" */
.cd-event-label {
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--dark, #1E1B4B);
  margin-bottom: 20px;
}

/* Date texte sous le countdown */
/* Remplace style="color:var(--muted);font-weight:700;font-size:.9rem;" */
.cd-date-text {
  color: var(--muted, #6B7280);
  font-weight: 700;
  font-size: .9rem;
}

/* Icône atom (slide 1 linktree) */
/* Remplace le long style= sur .atom-icon */
.atom-icon-wrap {
  background: var(--lime, #84CC16);
  color: var(--dark, #1E1B4B);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 30px rgba(132, 204, 22, .4);
}

/* Icône 30px (dans edu-img du slide 1) */
.icon-30 {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}