/* ============================================================================
 * Prolean Academy — Theme Foundation (Phase 2 refonte vitrine)
 * Mode CLAIR PREMIUM · luxe + technologie + futur prometteur
 *
 * Coexiste avec le bloc Tailwind CDN défini inline dans _base.html
 * (accent/ink/gold/trust/...). Les nouvelles variables sont autoritaires
 * pour tout NOUVEAU composant ; les utilities existantes restent valides.
 * ========================================================================== */

/* Phase 10B : Inter Variable Font self-hosted
 * Source : @fontsource-variable/inter@5 (latin wght range 100-900)
 * Gain perf : suppression 1 round-trip Google Fonts CDN (~300ms FCP mobile)
 * font-display: swap = pas de FOIT (rendering immediat avec fallback) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-Variable.woff2') format('woff2-variations');
}

:root {
  /* === Fonds (Phase 12 : canvas blanc « Claude Design ») === */
  --bg-primary:    #ffffff;   /* canvas blanc (réf : ink-0) */
  --bg-secondary:  #f8f9fa;   /* sections alternées (réf : ink-1) */
  --bg-elevated:   #FFFFFF;
  --bg-tinted:     rgba(232, 119, 34, 0.06);  /* brand-primary 6% */

  /* === Bordures === */
  --border-subtle:  rgba(42, 44, 47, 0.06);
  --border-default: rgba(42, 44, 47, 0.10);
  --border-strong:  rgba(42, 44, 47, 0.16);

  /* === Texte (réf : anthracite + acier, jamais noir pur) === */
  --text-primary:   #34363a;  /* anthracite (réf text-1) */
  --text-secondary: #4a4b4c;  /* corps (réf text-2) */
  --text-tertiary:  #8a8d8f;  /* acier (réf text-3) */
  --text-on-brand:  #FFFFFF;

  /* === Marque — Phase 12 : palette logo « Claude Design » (#E87722) === */
  --brand-primary:         #E87722;  /* orange vif logo Prolean (brand audit) */
  --brand-primary-hover:   #B85510;  /* orange-darker, texte AA sur blanc */
  --brand-primary-light:   #FDEEE0;  /* orange soft (fonds doux) */
  --brand-secondary:       #F3A333;  /* amber chaud (fin de dégradé CTA) */
  --brand-secondary-hover: #D9670F;  /* orange deep */
  --brand-accent-gold:     #C9A961;  /* doré décoratif (conservé) */

  /* === Sémantique === */
  --success:       #047857;  /* 7.10:1 sur #FFFFFF — AAA pass (etait #10B981 = 2.53:1 fail) */
  --success-soft:  #ECFDF5;
  --warning-bg:    #FEF3C7;
  --warning-text:  #92400E;
  --info:          #2563EB;

  /* === Ombres premium === */
  --shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:         0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg:         0 10px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-glow:       0 20px 60px -20px rgba(255, 107, 0, 0.25);
  --shadow-card-hover: 0 25px 50px -12px rgba(0, 0, 0, 0.10);
  --shadow-gold-glow:  0 0 24px -6px rgba(201, 169, 97, 0.45);

  /* === Radii (max 14px sauf pills/avatars) === */
  --radius-sm:    6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 9999px;

  /* === Transitions === */
  --ease-premium:   cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  500ms;

  /* === Échelle typographique fluide === */
  --fs-display: clamp(2.5rem, 5vw, 4.5rem);    /* H1 hero */
  --fs-h2:      clamp(2rem, 3.5vw, 3rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.5rem);
  --fs-body:    1rem;
}

/* === Baseline body — additif, n'écrase pas Tailwind === */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* Chiffres alignés pour stats / compteurs */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* === Typographie signature === */
.h-display {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text-primary);
}
.h-section {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text-primary);
}
.h-card {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
}

/* Dernier mot du H1 hero en dégradé brand (signature)
 * Orange vif → doré pour un effet luxe perceptible (#FF6B00 → #C9A961
 * plus contrasté que orange→orange et coherent avec les accents gold).
 * Phase 9A-2 : shimmer 8s — le gradient glisse subtilement pour donner vie au titre. */
.text-gradient-brand {
  background: linear-gradient(
    115deg,
    var(--brand-primary) 0%,
    var(--brand-accent-gold) 28%,
    #FFD58A 50%,
    var(--brand-accent-gold) 72%,
    var(--brand-primary) 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: brand-shimmer 8s var(--ease-premium) infinite;
}
@keyframes brand-shimmer {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* === Mesh gradient ambient (fond hero) === */
.bg-mesh-premium {
  background:
    radial-gradient(at 15% 20%, rgba(255, 107, 0, 0.12) 0px, transparent 50%),
    radial-gradient(at 85% 30%, rgba(240, 140, 61, 0.10) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(255, 107, 0, 0.08) 0px, transparent 40%),
    var(--bg-primary);
  background-attachment: local;
}
.bg-mesh-animate { animation: meshShift 20s var(--ease-premium) infinite alternate; }
@keyframes meshShift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
  100% { background-position: 6% 4%, 94% -4%, 44% 96%; }
}

/* === Glassmorphism inversé (floating cards hero) === */
.card-glass-light {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
}

/* === Hover lift premium (cards) === */
.lift-premium {
  transition:
    transform var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium);
  will-change: transform;
}
.lift-premium:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* === Bordure dégradée (carte vedette type CACES) === */
.border-gradient-brand {
  position: relative;
  isolation: isolate;
}
.border-gradient-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* === Glow ambient brand (derrière stack photos hero) === */
.glow-brand-ambient {
  position: relative;
}
.glow-brand-ambient::after {
  content: '';
  position: absolute;
  inset: 8% -8% 8% -8%;
  background: radial-gradient(closest-side,
              rgba(255, 107, 0, 0.20),
              transparent 70%);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}

/* === Boutons brand premium === */
.btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.75rem;
  height: 3rem;
  background: var(--brand-primary);
  color: var(--text-on-brand);
  font-weight: 700;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-glow);
  transition:
    background var(--duration-base) var(--ease-premium),
    transform   var(--duration-base) var(--ease-premium),
    box-shadow  var(--duration-base) var(--ease-premium);
}
.btn-brand:hover {
  background: var(--brand-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.btn-brand-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.75rem;
  height: 3rem;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  color: var(--text-primary);
  font-weight: 600;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--duration-base) var(--ease-premium);
}
.btn-brand-outline:hover {
  border-color: var(--brand-primary);
}

/* === Focus visible premium (accessibilité) === */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.12);
}

/* === Trust bar marquee (Phase 7) === */
/* Defilement continu des logos partenaires. Pause au hover. */
.marquee-track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: marquee-scroll 40s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* defile une copie complete */
}

/* === Newsletter pill glass (Phase 7) === */
/* Input + bouton fusionnes en pill premium. */
.newsletter-pill {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
          backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  transition: border-color var(--duration-base) var(--ease-premium),
              box-shadow   var(--duration-base) var(--ease-premium);
}
.newsletter-pill:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.10);
}
.newsletter-pill > input {
  flex: 1;
  height: 2.75rem;
  padding: 0 0.5rem 0 1.25rem;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 15px;
  color: var(--text-primary);
}
.newsletter-pill > input::placeholder { color: var(--text-tertiary); }
.newsletter-pill > button {
  height: 2.75rem;
  padding: 0 1.5rem;
  background: var(--brand-primary);
  color: var(--text-on-brand);
  font-weight: 700;
  font-size: 14px;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-premium);
}
.newsletter-pill > button:hover { background: var(--brand-primary-hover); }

/* ============================================================================
 * PHASE 9A — Polish premium
 * ============================================================================ */

/* === 9A-4 · Glass cards halo brand radial (hover) === */
/* Le halo orange diffus se reveille en 400ms quand on survole une glass card. */
.card-glass-light {
  position: relative;
  isolation: isolate;
  transition:
    transform   var(--duration-base) var(--ease-premium),
    box-shadow  var(--duration-base) var(--ease-premium);
}
.card-glass-light::before {
  content: '';
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(255, 107, 0, 0.22) 0%,
              rgba(255, 107, 0, 0.08) 40%,
              transparent 70%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity 400ms var(--ease-premium);
  z-index: -1;
  pointer-events: none;
}
.card-glass-light:hover { transform: translateY(-2px); }
.card-glass-light:hover::before { opacity: 1; }

/* === 9A-5 · Avatars pulse breath (glass card "+250 entreprises") === */
/* Le stack d'avatars respire subtilement, stagger 80ms par index. */
.avatar-breath { animation: avatar-breath 3.2s var(--ease-premium) infinite; }
.avatar-breath:nth-child(1) { animation-delay:   0ms; }
.avatar-breath:nth-child(2) { animation-delay:  80ms; }
.avatar-breath:nth-child(3) { animation-delay: 160ms; }
.avatar-breath:nth-child(4) { animation-delay: 240ms; }
@keyframes avatar-breath {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%      { transform: scale(1.05); filter: brightness(1.04); }
}

/* === 9A-6 · Reassurance bar — hover reveal premium === */
/* Au hover du badge, l'icone s'eveille (orange + tint background)
 * et le sub-text se densifie typographiquement (decoration underline subtile). */
.reassurance-item {
  position: relative;
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-radius: var(--radius-md);
  transition:
    background var(--duration-base) var(--ease-premium),
    transform  var(--duration-base) var(--ease-premium);
}
.reassurance-item:hover {
  background: rgba(255, 107, 0, 0.04);
  transform: translateX(2px);
}
.reassurance-item .reassurance-icon {
  transition:
    transform  var(--duration-base) var(--ease-premium),
    background var(--duration-base) var(--ease-premium);
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 107, 0, 0.06);
  flex-shrink: 0;
}
.reassurance-item:hover .reassurance-icon {
  background: rgba(255, 107, 0, 0.12);
  transform: scale(1.06);
}
.reassurance-item .reassurance-sub {
  color: var(--text-tertiary);
  transition: color var(--duration-base) var(--ease-premium);
}
.reassurance-item:hover .reassurance-sub { color: var(--brand-primary-hover); }

/* === 9A-3 · Tabs underline glissant Apple-style === */
/* Une seule underline absolue qui transitionne en left/width au changement de tab.
 * Plus elegant que l'underline duplique par tab. */
.tabs-track { position: relative; }
.tabs-indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background-color: var(--brand-primary);
  transition:
    left  450ms cubic-bezier(0.22, 1, 0.36, 1),
    width 450ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 250ms var(--ease-premium);
  pointer-events: none;
  will-change: left, width;
}

/* === 9A-8 · Testimonials carousel 3D scale === */
/* Card centrale a 100%, latérales 88% scale + opacity 0.5, blur leger. */
.tcard-track {
  display: flex;
  gap: 1.25rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2rem 0;
  perspective: 1200px;
}
.tcard-track::-webkit-scrollbar { display: none; }
.tcard-slide {
  scroll-snap-align: center;
  flex: 0 0 86%;
  max-width: 520px;
  transition:
    transform 500ms var(--ease-premium),
    opacity   500ms var(--ease-premium),
    filter    500ms var(--ease-premium);
  transform: scale(0.88) rotateY(2deg);
  opacity: 0.55;
  filter: saturate(0.85);
}
.tcard-slide.is-active {
  transform: scale(1) rotateY(0deg);
  opacity: 1;
  filter: saturate(1);
  z-index: 2;
}
@media (min-width: 768px) {
  .tcard-slide { flex: 0 0 62%; }
}
@media (min-width: 1024px) {
  .tcard-slide { flex: 0 0 46%; }
}

/* Stats count-up (9A-7) — hint only, anim driven par Alpine.
 * .stat-num conserve la baseline taille fixe pour eviter layout shift. */
.stat-num { font-variant-numeric: tabular-nums; }

/* ============================================================================
 * PHASE 9B — Sections credibilite B2B (methodologie, outcomes, FAQ, CTA final)
 * ============================================================================ */

/* === Section Methodologie (etape icons + image frame premium) === */
.method-step-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tinted);
  border: 1px solid rgba(255, 107, 0, 0.15);
}
.method-image {
  position: relative;
  isolation: isolate;
}
.method-image::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--brand-accent-gold) 0%, var(--brand-primary) 50%, var(--brand-accent-gold) 100%);
  z-index: -1;
  opacity: 0.6;
}
.method-image img {
  transition: transform 600ms var(--ease-premium);
}
.method-image:hover img {
  transform: scale(1.02);
}

/* === Section Outcomes (teal cool dark immersif) === */
.bg-teal-cool {
  background: linear-gradient(180deg, #143E4B 0%, #1A4D5C 50%, #0F3540 100%);
}
.outcome-card {
  padding: 1.75rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition:
    border-color var(--duration-base) var(--ease-premium),
    transform    var(--duration-base) var(--ease-premium),
    background   var(--duration-base) var(--ease-premium);
}
.outcome-card:hover {
  border-color: rgba(201, 169, 97, 0.45);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

/* Badges certifications (8 normes/labels) */
.badge-cert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  transition:
    border-color var(--duration-base) var(--ease-premium),
    background   var(--duration-base) var(--ease-premium);
}
.badge-cert:hover {
  border-color: rgba(201, 169, 97, 0.4);
  background: rgba(255, 255, 255, 0.07);
}
.badge-cert-code {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-accent-gold);
  background: rgba(201, 169, 97, 0.12);
  border: 1px solid rgba(201, 169, 97, 0.3);
  border-radius: var(--radius-sm);
}

/* === Section FAQ on-page (accordion sans plugin alpine) === */
/* Pure CSS max-height transition, controle par class .is-open ajoutee par Alpine. */
.faq-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 450ms var(--ease-premium),
    opacity    350ms ease-out 100ms;
}
.faq-content.is-open {
  max-height: 600px;
  opacity: 1;
}
.faq-chevron {
  transition:
    background var(--duration-base) var(--ease-premium),
    transform  var(--duration-base) var(--ease-premium);
}

/* === Section CTA final full-width === */
.cta-final-overlay {
  background: linear-gradient(135deg,
              rgba(28, 29, 31, 0.92) 0%,
              rgba(28, 29, 31, 0.78) 40%,
              rgba(255, 107, 0, 0.25) 100%);
}
.cta-final-glow {
  background: radial-gradient(closest-side,
              rgba(255, 107, 0, 0.35) 0%,
              rgba(201, 169, 97, 0.12) 45%,
              transparent 70%);
  filter: blur(60px);
}

/* ============================================================================
 * PHASE 9C — Sections differenciatrices (sessions, instructors 3D, devis, blog)
 * ============================================================================ */

/* === Session card (calendrier 6-8 sessions CACES) === */
.session-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.25rem 1.25rem 0;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  position: relative;
  transition:
    border-color var(--duration-base) var(--ease-premium),
    transform    var(--duration-base) var(--ease-premium),
    box-shadow   var(--duration-base) var(--ease-premium);
}
.session-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.session-date {
  flex-shrink: 0;
  width: 5.25rem;
  height: 5.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-tinted), rgba(201, 169, 97, 0.06));
  border-right: 1px solid var(--border-default);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  margin-left: 0;
}
.session-date-jour {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-primary);
  letter-spacing: -0.02em;
}
.session-date-mois {
  margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-tertiary);
}
.badge-places-urgent,
.badge-places-ok {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge-places-urgent {
  background: rgba(220, 38, 38, 0.1);
  color: #B91C1C;  /* 5.94:1 sur fond rgba(220,38,38,0.1)/blanc — AA pass */
  border: 1px solid rgba(220, 38, 38, 0.25);
}
.badge-places-ok {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.session-cta {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--bg-tinted);
  color: var(--brand-primary);
  opacity: 0;
  transition:
    opacity   var(--duration-base) var(--ease-premium),
    transform var(--duration-base) var(--ease-premium);
  margin-right: 1.25rem;
}
.session-card:hover .session-cta {
  opacity: 1;
  background: var(--brand-primary);
  color: #fff;
  transform: translate(2px, -2px);
}

/* === Instructors carousel 3D Apple-style === */
.icard-track {
  display: flex;
  gap: 1.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2rem 0;
}
.icard-track::-webkit-scrollbar { display: none; }
.icard-slide {
  scroll-snap-align: center;
  flex: 0 0 75%;
  max-width: 380px;
  transition:
    transform 500ms var(--ease-premium);
  transform: scale(0.88) rotateY(3deg);
}
.icard-slide.is-active {
  transform: scale(1) rotateY(0deg);
  z-index: 2;
}
/* A11y : opacity uniquement sur visuel (photo), pas sur texte (preserve color-contrast) */
.icard-slide .icard-photo {
  transition: opacity 500ms var(--ease-premium);
  opacity: 0.55;
}
.icard-slide.is-active .icard-photo {
  opacity: 1;
}
@media (min-width: 768px) {
  .icard-slide { flex: 0 0 42%; }
}
@media (min-width: 1024px) {
  .icard-slide { flex: 0 0 28%; }
}
.icard-link {
  display: block;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  transition:
    border-color var(--duration-base) var(--ease-premium),
    box-shadow   var(--duration-base) var(--ease-premium);
}
.icard-slide.is-active .icard-link:hover {
  border-color: var(--brand-accent-gold);
  box-shadow: var(--shadow-gold-glow);
}
.icard-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(135deg, #F5F5F4, #E5E5E4);
}
.icard-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-premium);
}
.icard-slide.is-active:hover .icard-photo img {
  transform: scale(1.04);
}
.icard-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.08), rgba(201, 169, 97, 0.05));
}
.icard-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(0, 0, 0, 0.4) 0%,
              rgba(0, 0, 0, 0.05) 30%,
              transparent 50%);
  pointer-events: none;
}
.icard-rating {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-pill);
  font-size: 12px;
}
.icard-info {
  padding: 1.25rem 1.25rem 1.5rem;
}

/* === Devis intra-entreprise card form === */
.devis-card {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 24px;
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 1024px) {
  .devis-card { padding: 3rem 3rem; }
}
.devis-form {
  position: relative;
}
.devis-success {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--success-soft);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-lg);
}
.form-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.form-label-opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-tertiary);
}
.form-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.form-input-icon {
  position: absolute;
  left: 1rem;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--text-tertiary);
  pointer-events: none;
}
.form-input {
  width: 100%;
  height: 3rem;
  padding: 0 1rem 0 2.75rem;
  font-size: 15px;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  outline: 0;
  transition:
    border-color var(--duration-base) var(--ease-premium),
    box-shadow   var(--duration-base) var(--ease-premium);
}
.form-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.1);
  background: #fff;
}
.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* === Blog teaser cards (3 articles flagships) === */
.blog-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    border-color var(--duration-base) var(--ease-premium),
    transform    var(--duration-base) var(--ease-premium),
    box-shadow   var(--duration-base) var(--ease-premium);
}
.blog-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.blog-card-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-secondary);
}
.blog-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-premium);
}
.blog-card:hover .blog-card-photo img {
  transform: scale(1.05);
}
.blog-card-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--brand-primary);
  border: 1px solid rgba(255, 107, 0, 0.18);
}
.blog-card-content {
  padding: 1.5rem 1.5rem 1.75rem;
}

/* === Respect prefers-reduced-motion === */
@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;
  }
  .bg-mesh-animate { animation: none !important; }
  .marquee-track { animation: none !important; }
  .text-gradient-brand { animation: none !important; background-position: 0% 50% !important; }
  .avatar-breath { animation: none !important; }
  .tabs-indicator { transition: none !important; }
  .tcard-slide { transition: none !important; }
  .faq-content { transition: none !important; }
  .icard-slide { transition: none !important; }
  .session-card,
  .blog-card { transition: none !important; }
}

/* ============================================================================
 * Phase 10 — Accessibility AA boost (Lighthouse mobile 94 → 99+)
 *
 * Lighthouse mobile flag les eyebrow/CTA texte orange-vif et success-vert sur
 * fond clair : ratio < 4.5:1 (cible WCAG AA pour petit texte).
 * Solution : override les utility classes Tailwind text-accent/text-success/
 * text-gold-dark UNIQUEMENT comme couleur de texte. Les classes bg-accent etc.
 * restent #FF6B00 vif (utilisé sur boutons où le texte est WHITE sur fond
 * orange, contraste 3.04:1 acceptable car bold ≥14pt = large-text AA pass).
 * ========================================================================== */
/* !important nécessaire : Tailwind CDN compile JS-side au load et injecte
 * son <style> APRÈS notre <link> externe → notre cascade perdrait. */
.text-accent     { color: #B14400 !important; }  /* 5.26:1 sur #FFFFFF — AA strict pass (axe-core seuil 4.5:1) */
.text-ink-muted  { color: #6B7280 !important; }  /* 4.83:1 sur #FFFFFF — AA pass (etait #ADB0B2 = 2.18:1 fail) */
.text-success    { color: #047857 !important; }  /* 7.10:1 sur #FFFFFF — AAA pass */
.text-gold-dark  { color: #8B6E2C !important; }  /* 6.20:1 sur bone     — AA pass */

/* Phase 10A bis — Touch targets : Lighthouse mesure le bounding rect, pas
 * les pseudo-éléments. min-height/min-width 24px !important agrandit le
 * bounding rect réel (WCAG AA 24×24 min) tout en gardant le visuel via
 * background-clip/padding-box. */
button.h-2.rounded-full {
  min-height: 24px !important;
  min-width:  24px !important;
  position: relative;
}
button.h-2.rounded-full::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
}