/* 05-section.css — Section “infos” style .orgc
   Buts :
   - Carte gradient + ombres permanentes, sans masquer le texte.
   - “Pills” (titres) couplées aux 3 colonnes via :has().
   - Hover fluide, hitbox sans zones mortes, flèches qui suivent.
   - Responsive simple, accessibilité, reduced motion.
*/

/* ===== Thème local ===== */
.caa-intro{
  --ink:#0E1030;
  --muted:#243056;
  /* Teinte alignée sur l’entête */
  --g1:#BFC3F3; --g2:#8E94D8; --g3:#595EA8; --g4:#2E2C62;
  --bg:#F2F3ff;

  /* Durées / easing = transitions plus douces */
  --t-dur:.72s;
  --t-ease:cubic-bezier(.22,.61,.36,1);

  color:var(--ink);
  background:var(--bg);

  /* + Espace par rapport au HERO */
  margin-top: clamp(28px, 6vw, 64px);

  padding:18px 0 32px;
}

/* Largeur identique au HERO (fallback 1080px / 16px si variables absentes) */
.caa-intro .wrap{
  max-width: var(--content-w, 1080px);
  margin: 0 auto;
  padding: 0 var(--page-gutter, 16px);
}

/* ===== Carte principale (gradient + ombres) ===== */
.caa-card{
  position:relative; isolation:isolate; /* nouveau contexte z-index pour les calques internes */
  border:none; outline:none;
  padding:26px 22px 22px;
  border-radius:12px;
  background:
    radial-gradient(160% 200% at 50% 40%,
      var(--g1) 0%, var(--g2) 38%, var(--g3) 68%, var(--g4) 100%);
  background-color:var(--g4);
  /* Ombre permanente (même logique que l’entête) */
  box-shadow:
    0 0 0 1px rgba(230,231,255,.36),
    0 16px 40px rgba(198,201,255,.55),
    0 4px 10px rgba(0,0,0,.14),
    0 0 0 3px rgba(198,201,255,1),
    0 26px 60px rgba(158,168,255,.78),
    0 10px 22px rgba(0,0,0,.24) !important;
  transition: transform .25s ease; /* micro-flottement à l’hover */
}
.caa-card::before{
  /* Trait interne façon “cadre” (ne bloque pas la souris) */
  content:"";
  position:absolute;
  inset:10px;
  border-radius:8px;
  border:1px solid rgba(230,231,255,.9);
  opacity:0;
  transform:scale(.985);
  transition: opacity .6s ease, transform .6s ease;
  pointer-events:none;
}
.caa-intro.is-inview .caa-card::before{ opacity:1; transform:scale(1); }
.caa-card:hover,
.caa-card:focus-within{ transform:translateY(-1px); }

/* ===== Pills (titres) ===== */
.caa-intro .pills{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 2px;
}
.caa-intro .pill{
  background:rgba(255,255,255,.18);
  border:1.5px solid rgba(230,231,255,.85);
  box-shadow: inset 0 0 16px rgba(255,255,255,.12);
  border-radius:999px;
  padding:8px 12px;
  text-align:center;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.04em;
  backdrop-filter: blur(6px);
  font-size:clamp(14px,1.6vw,16px);
  color:#fff;
  cursor:pointer;
  transition:
    background-color var(--t-dur) var(--t-ease),
    color var(--t-dur) var(--t-ease),
    border-color var(--t-dur) var(--t-ease),
    box-shadow var(--t-dur) var(--t-ease),
    transform calc(var(--t-dur)*.6) var(--t-ease);
}
.caa-intro .pill small{ display:block; font-weight:700; opacity:.95; }
.caa-intro .pill:hover,
.caa-intro .pill:focus-visible{
  background:#fff; color:#0E1030; border-color:#fff; transform:translateY(-1px);
}

/* ===== Flèches entre titres et colonnes ===== */
.caa-intro .downs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  font-size:22px; color:rgba(222,211,231,.95);
  text-align:center; user-select:none; margin:2px 0 8px;
  pointer-events:none; /* déco only → ne bloque pas le hover */
}
.caa-intro .downs span::after{ content:"⬇"; transition: color var(--t-dur) var(--t-ease); }

/* ===== Grille colonnes ===== */
.caa-intro .cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  position:relative; z-index:0; /* sous le texte mais au-dessus du cadre */
}
.caa-intro .col{
  position:relative; z-index:1; overflow:hidden; /* pour le calque dégradé */
  background:rgba(255,255,255,.9);
  border:1px solid rgba(230,231,255,.9);
  border-radius:12px;
  padding:12px 12px 10px;
  box-shadow:0 6px 18px rgba(14,16,48,.12);
  transition:
    color var(--t-dur) var(--t-ease),
    border-color var(--t-dur) var(--t-ease),
    box-shadow var(--t-dur) var(--t-ease);
}
/* Calque gradient en fondu au survol (derrière le contenu) */
.caa-intro .col::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; z-index:0;
  background: radial-gradient(160% 200% at 50% 40%,
              var(--g1) 0%, var(--g2) 38%, var(--g3) 68%, var(--g4) 100%);
  opacity:0; transition: opacity var(--t-dur) var(--t-ease);
}
.caa-intro .col *{ position:relative; z-index:1; transition: color var(--t-dur) var(--t-ease); }

.caa-intro .col:hover::after,
.caa-intro .col:focus-within::after{ opacity:1; }
.caa-intro .col:hover,
.caa-intro .col:focus-within{
  color:#fff;
  border-color:rgba(230,231,255,.9);
  box-shadow:0 6px 18px rgba(14,16,48,.22), inset 0 0 0 1px rgba(230,231,255,.5);
}
.caa-intro .col:hover h3,
.caa-intro .col:focus-within h3,
.caa-intro .col:hover strong,
.caa-intro .col:focus-within strong{ color:#fff; }
.caa-intro .col:hover li,
.caa-intro .col:focus-within li{ color:rgba(255,255,255,.92); }
.caa-intro .col:hover li::before,
.caa-intro .col:focus-within li::before{ color:#fff; opacity:.9; }

/* Titres colonnes + liste */
.caa-intro h3{
  margin:0 0 6px;
  font-size:clamp(15px,1.6vw,17px);
  text-transform:uppercase;
  letter-spacing:.03em;
  font-weight:900;
  color:var(--ink);
  text-align:center;
}
.caa-intro ul{ list-style:none; margin:0; padding:0; }
.caa-intro li{
  margin:.35rem 0; padding-left:18px;
  color:var(--muted);
  line-height:1.7; font-weight:300;
  position:relative; font-size:clamp(14px,1.55vw,16.5px);
}
.caa-intro li::before{
  content:"➤";
  position:absolute; left:0; top:0; transform:translateY(2px);
  color:#6F79B7;
}
.caa-intro strong{ color:var(--ink); font-weight:700; }

/* ===== Couplages : pills ↔ colonnes ↔ flèches ===== */
.caa-card:has(.pills .pill:nth-child(1):hover) .downs span:nth-child(1),
.caa-card:has(.cols  .col:nth-child(1):hover)  .downs span:nth-child(1){ color:#0E1030; }
.caa-card:has(.pills .pill:nth-child(2):hover) .downs span:nth-child(2),
.caa-card:has(.cols  .col:nth-child(2):hover)  .downs span:nth-child(2){ color:#0E1030; }
.caa-card:has(.pills .pill:nth-child(3):hover) .downs span:nth-child(3),
.caa-card:has(.cols  .col:nth-child(3):hover)  .downs span:nth-child(3){ color:#0E1030; }

.caa-card:has(.pills .pill:nth-child(1):hover) .cols .col:nth-child(1),
.caa-card:has(.pills .pill:nth-child(2):hover) .cols .col:nth-child(2),
.caa-card:has(.pills .pill:nth-child(3):hover) .cols .col:nth-child(3){
  /* appliquer l’état “actif” des colonnes */
  color:#fff;
  border-color:rgba(230,231,255,.9);
  box-shadow:0 6px 18px rgba(14,16,48,.22), inset 0 0 0 1px rgba(230,231,255,.5);
}
.caa-card:has(.pills .pill:nth-child(1):hover) .cols .col:nth-child(1)::after,
.caa-card:has(.pills .pill:nth-child(2):hover) .cols .col:nth-child(2)::after,
.caa-card:has(.pills .pill:nth-child(3):hover) .cols .col:nth-child(3)::after{ opacity:1; }
.caa-card:has(.pills .pill:nth-child(1):hover) .cols .col:nth-child(1) h3,
.caa-card:has(.pills .pill:nth-child(2):hover) .cols .col:nth-child(2) h3,
.caa-card:has(.pills .pill:nth-child(3):hover) .cols .col:nth-child(3) h3,
.caa-card:has(.pills .pill:nth-child(1):hover) .cols .col:nth-child(1) strong,
.caa-card:has(.pills .pill:nth-child(2):hover) .cols .col:nth-child(2) strong,
.caa-card:has(.pills .pill:nth-child(3):hover) .cols .col:nth-child(3) strong{ color:#fff; }
.caa-card:has(.pills .pill:nth-child(1):hover) .cols .col:nth-child(1) li,
.caa-card:has(.pills .pill:nth-child(2):hover) .cols .col:nth-child(2) li,
.caa-card:has(.pills .pill:nth-child(3):hover) .cols .col:nth-child(3) li{ color:rgba(255,255,255,.92); }
.caa-card:has(.pills .pill:nth-child(1):hover) .cols .col:nth-child(1) li::before,
.caa-card:has(.pills .pill:nth-child(2):hover) .cols .col:nth-child(2) li::before,
.caa-card:has(.pills .pill:nth-child(3):hover) .cols .col:nth-child(3) li::before{ color:#fff; }

/* Symétrie inverse : survol grande colonne → inverser la pill correspondante */
.caa-card:has(.cols .col:nth-child(1):hover) .pills .pill:nth-child(1),
.caa-card:has(.cols .col:nth-child(2):hover) .pills .pill:nth-child(2),
.caa-card:has(.cols .col:nth-child(3):hover) .pills .pill:nth-child(3){
  background:#fff; color:#0E1030; border-color:#fff;
  box-shadow:inset 0 0 0 1px rgba(14,16,48,.06), 0 6px 16px rgba(0,0,0,.12);
}

/* ===== Responsive ===== */
@media (max-width:980px){
  .caa-intro .pills,
  .caa-intro .downs,
  .caa-intro .cols{ grid-template-columns:1fr; }
  .caa-intro .downs{ margin-bottom:6px; }
}

/* ===== Accessibilité : réduire l’animation si demandé ===== */
@media (prefers-reduced-motion: reduce){
  .caa-card,
  .caa-card::before,
  .caa-intro .pill,
  .caa-intro .downs span::after,
  .caa-intro .col,
  .caa-intro .col::after,
  .caa-intro .col *{
    transition:none !important;
  }
}