:root { --ac: #0055ff; }
body { margin: 0; background: #ffffff; -webkit-font-smoothing: antialiased; }
  a { color: var(--ac, #0055ff); text-decoration: none; }
  a:hover { color: #0041cc; text-decoration: underline; text-underline-offset: 3px; }
  ::selection { background: rgba(0, 85, 255, 0.16); }
  :focus-visible { outline: 2px solid var(--ac, #0055ff); outline-offset: 3px; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  html { scroll-behavior: smooth; }
  @keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes navIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
  @keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @media (max-width: 820px) {
    section > div > div[style*="grid-template-columns"] { gap: 20px; }
  }
  @media (max-width: 640px) {
    [data-step-col] { border-right: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.09); padding-bottom: 26px !important; }
    [data-step-col]:last-child { border-bottom: 0; }
    [data-menu-panel] { width: min(82vw, 260px) !important; }
    input, select, textarea { font-size: 16px !important; }
  }
  @media (max-width: 420px) {
    [data-wide-visual] { aspect-ratio: 4 / 3 !important; }
  }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
[hidden] { display: none !important; }

/* grille realisations : 3 colonnes, repli 2 puis 1 */
.cards-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cards-grid { grid-template-columns: 1fr; } }
.cards-grid--home { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .cards-grid--home { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cards-grid--home { grid-template-columns: 1fr; } }

/* grille poles */
.poles-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.poles-grid > div { padding: 22px 18px !important; }
.poles-grid h3 { font-size: 18px !important; }
.poles-grid p { font-size: 14px !important; }
@media (max-width: 900px) { .poles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .poles-grid { grid-template-columns: 1fr; } }

/* ---- palette degradee (bleu -> violet -> rose) ---- */
:root {
  --g1: #4285f4;
  --g2: #7c5cd6;
  --g3: #c2568f;
  --g4: #d9576b;
  --grad: linear-gradient(95deg, var(--g1), var(--g2), var(--g3), var(--g4));
}

/* surtitre anime de la page d'accueil */
.hero-kicker {
  display: inline-block;
  margin: 0 0 22px !important;
  font-size: clamp(21px, 3.4vw, 38px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em;
  line-height: 1.1;
  background: var(--grad);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradShift 9s ease-in-out infinite,
             fadeUp .9s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes gradShift {
  0%,  100% { background-position:   0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* titres de section : meme degrade, sans animation */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* pastilles numerotees des poles */
.poles-grid > div > span:first-child {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* filet degrade sous les sections cles */
.grad-rule {
  height: 3px;
  border: 0;
  border-radius: 3px;
  background: var(--grad);
}

@media (prefers-reduced-motion: reduce) {
  .hero-kicker { animation: none; }
}

/* --- style global degrade --- */
.grad-logo {
  background: var(--grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradShift 11s ease-in-out infinite,
             fadeUp 1s cubic-bezier(.16, 1, .3, 1) both !important;
}

.grad-kicker {
  margin: 0 0 16px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* liseres degrades a la place des bordures grises */
section { border-color: rgba(124, 92, 214, 0.16) !important; }

/* boutons principaux : degrade plein, texte blanc (contraste conserve) */
a[style*="background:#0055ff"],
a[style*="background:var(--ac"] {
  background: var(--grad) !important;
  background-size: 180% 100% !important;
  transition: background-position .5s ease, transform .3s cubic-bezier(.16,1,.3,1),
              box-shadow .3s ease !important;
}
a[style*="background:#0055ff"]:hover,
a[style*="background:var(--ac"]:hover {
  background-position: 100% 50% !important;
}

/* focus visible accorde a la palette */
:focus-visible { outline-color: var(--g2) !important; }

@media (prefers-reduced-motion: reduce) {
  .grad-logo { animation: fadeUp 1s ease both !important; }
}

/* --- tous les titres en degrade --- */
h1, h2, h3 {
  background: var(--grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* exceptions : sur fond sombre, garder un texte lisible */
.poles-grid > div[style*="background:#000000"] h3,
.poles-grid > div[style*="background:#15171c"] h3,
[style*="background:#15171c"] h1,
[style*="background:#15171c"] h2,
[style*="background:#15171c"] h3,
[style*="background:#0b0b0d"] h3,
[style*="linear-gradient(135deg,#131a2e"] h1,
[style*="linear-gradient(135deg,#131a2e"] h2,
[style*="linear-gradient(135deg,#131a2e"] h3,
footer h3 {
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}