/* =============================================================================
   FEATURE.CSS – 🧩 Section Fonctionnalités (Zig-zag + ligne SVG animée)
   Harmonisé le 2025-07-04
   -----------------------------------------------------------------------------
   ✔ Variables centralisées : plus de doublons avec base.css
   ✔ Commentaires & indentation uniformisés
   ✔ Correction d’un commentaire mal fermé
   ✔ Suppression des propriétés répétées (gap, color)
   ✔ Noms de classes conservés pour compatibilité Django/HTML
   ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
   1 · DESIGN TOKENS SPÉCIFIQUES À LA SECTION
   ------------------------------------------------------------------------ */
:root {
  /* Cartes */
  --bg-card-dark:  rgba(30 30 45 / .85);
  --bg-card-light: #ffffff;

  /* Ombres */
  --shadow-light:  rgba(0 0 0 / .15);
  --shadow-strong: rgba(0 0 0 / .40);

  /* Textes complémentaires */
  --text-secondary: #ccd6e0;

  /* Spacing */
  --gap-wide: 3rem;
  --gap-narrow: 1.5rem;
  --padding-base: 2rem;
}

/* ---------------------------------------------------------------------------
   2 · ANIMATIONS
   ------------------------------------------------------------------------ */
@keyframes fadeInTop {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------------------
   3 · WRAPPER & HEADING
   ------------------------------------------------------------------------ */
.feature-wrapper {
  max-width: 960px;
  width: 90%;
  margin: 4rem auto;
  padding: 4rem 1rem;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.feature-heading {
  text-align: center;
  margin-block-end: calc(var(--gap-wide) * .75);
  position: relative;
  z-index: 2;
}
.feature-heading h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-color);             /* hérite du thème */
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeInTop 1s ease forwards;
}

/* ---------------------------------------------------------------------------
   4 · SVG DIVIDER
   ------------------------------------------------------------------------ */
.feature-line {
  position: absolute;
  top: 9rem;
  left: 50%;
  bottom: var(--gap-wide);
  transform: translateX(-50%);
  width: 4%;
  height: calc(100% - 15rem);
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 4px rgb(0 0 0 / .10));
}
.feature-line path {
  stroke: rgb(255 255 255 / .60);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: drawLine 2s ease-out forwards;
}
html.light .feature-line path { stroke: rgb(0 0 0 / .10); }

/* ---------------------------------------------------------------------------
   5 · SECTIONS & ZIG-ZAG LAYOUT
   ------------------------------------------------------------------------ */
.feature-section {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-wide);
  margin-block-end: var(--gap-wide);
  z-index: 2;
}
.feature-section:nth-child(2n) .feature { margin-top: var(--gap-wide); }
.feature.reveal { opacity: 1; transform: translateY(0); }

.feature[data-dir="left"]  { transform:translateX(-60px); opacity:0; }
.feature[data-dir="right"] { transform:translateX( 60px); opacity:0; }
.feature.is-visible        { transform:translateX(0);    opacity:1; }
.feature[data-dir] {
  transition: transform .6s ease-out, opacity .6s ease-out;
}
/* ---------------------------------------------------------------------------
   6 · FEATURE CARDS
   ------------------------------------------------------------------------ */
.feature {
  flex: 0 0 47%;
  background: var(--bg-card-dark);
  color: var(--text-color);
  padding: var(--padding-base);
  min-height: 180px;
  border-radius: var(--radius);
  box-shadow: 0 6px 24px var(--shadow-strong);
  transition: transform .3s ease, box-shadow .3s ease;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInTop .8s ease forwards;
  line-height: 1.6;
}
.feature:nth-of-type(1) { animation-delay: .3s; }
.feature:nth-of-type(2) { animation-delay: .5s; }
.feature:nth-of-type(3) { animation-delay: .7s; }
.feature:nth-of-type(4) { animation-delay: .9s; }
.feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px var(--shadow-strong);
}

/* Thème clair */
html.light .feature {
  background: var(--bg-card-light);
  color: var(--text-color);
  box-shadow: 0 4px 15px var(--shadow-light);
}

/* Contenu interne */
.feature-title {
  font-size: 1.4rem;
  margin-block-end: 1rem;
  color: inherit;
}
.feature p {
  font-size: 1rem;
  margin: 0;
  color: var(--text-secondary);
}
html.light .feature p { color: #444; }

.feature-icon {
  font-size: 2rem;
  margin-block-end: .5rem;
  text-align: center;
  color: #00aaff;
}
html.light .feature-icon { color: #0077cc; }

/* ---------------------------------------------------------------------------
   7 · DARK-BLOCK ALIAS (shared with .big-block)
   ------------------------------------------------------------------------ */
html.dark .big-block,
html.dark .feature {
  background: var(--bg-card-dark);
  color: var(--text-color);
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: 0 6px 24px var(--shadow-strong);
}

html.light .big-block,
html.light .feature {
  border-radius: var(--radius);
}
/* ---------------------------------------------------------------------------
   8 · ZIG-ZAG OFFSETS (optionnels)
   ------------------------------------------------------------------------ */
.feature.fade-in.feature-bottom { margin-top: 8rem !important; }
.feature.fade-in.feature-top    { margin-top: 0 !important; }
.feature-bottom                 { padding-block-end: 3rem !important; }

/* ---------------------------------------------------------------------------
   9 · RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------------------ */
/* 9.1 · MOBILE-FIRST (≤ 767 px) */
@media (max-width: 767.98px) {
  .feature-section {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-block-end: 1.5rem;
  }
  .feature-section .feature { margin-top: 0 !important; }
  .feature-line { display: none !important; }
}

/* 9.2 · TABLETTE & DESKTOP (≥ 768 px) */
@media (min-width: 768px) {
  .feature-line {
    display: block !important;
    top: 8rem;
    height: calc(100% - 6rem);
  }
  .feature-wrapper { padding-inline: 2rem; }
  .feature-heading { margin-block-end: 2rem; }
}

/* 9.3 · GRAND DESKTOP (≥ 1024 px) */
@media (min-width: 1024px) {
  .feature-wrapper { padding-inline: 3rem; }
  .feature-heading { margin-block-end: 3rem; }
  .feature-section {
    gap: var(--gap-wide);
    margin-block-end: calc(var(--gap-wide) * 1.25);
  }
}