/* ------------------------------------------------------------------ *
 * pillar-extras.css
 * Couche de composants illustrés PROPRE aux pages piliers.
 * Chargée APRÈS profile-system.css : hérite de tous les tokens
 * (:root + [data-theme="night"]) => dark mode natif, zéro dérive.
 * Toutes les classes sont préfixées .pil- pour NE JAMAIS entrer en
 * collision avec les composants de profile.html (.hero, .section,
 * .card, .quote-band, .split, .section-head, .btn, .eyebrow, .lead...)
 * qui restent, eux, servis par profile-system.css.
 * ------------------------------------------------------------------ */

/* Fil d'Ariane ----------------------------------------------------- */
.pil-breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-bottom:22px;color:var(--muted);font-size:14px;
}
.pil-breadcrumb a{
  color:var(--forest);font-weight:760;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:5px;
}
.pil-breadcrumb span{opacity:.55}

/* Hero pilier (non plein écran, aligné sur le rythme de profile) ---- */
.pil-hero{position:relative;padding:clamp(48px,7vw,92px) 0 clamp(56px,7vw,96px)}
.pil-hero-grid{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(40px,6vw,80px);align-items:center;
}
.pil-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* Repères chiffrés -------------------------------------------------- */
.pil-metrics{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;margin-top:40px;
}
.pil-metric{
  min-height:130px;padding:22px;border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--panel-solid) 62%, transparent);
  box-shadow:var(--soft-shadow);backdrop-filter:blur(8px);
}
.pil-metric strong{
  display:block;color:var(--forest);font-family:var(--display);
  font-size:clamp(30px,3vw,44px);line-height:.95;
}
.pil-metric span{display:block;margin-top:10px;color:var(--muted);font-size:14px;line-height:1.45}

/* Visuel illustré (orbite + panneau + notes flottantes) ------------ */
.pil-visual{position:relative;min-height:520px;display:grid;place-items:center}
.pil-orbit{
  position:absolute;inset:30px;border:1px solid rgba(47,79,62,.13);
  border-radius:50%;box-shadow:var(--shadow);
  background:
    radial-gradient(circle, rgba(255,255,255,.72), transparent 56%),
    conic-gradient(from 110deg, var(--sage), var(--sand), var(--teal), var(--sage));
}
.pil-panel{
  position:relative;width:min(390px,86%);min-height:420px;overflow:hidden;
  border:1px solid rgba(255,255,255,.72);border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  background:
    linear-gradient(150deg, rgba(255,255,255,.82), rgba(255,253,248,.46)),
    radial-gradient(circle at 30% 12%, color-mix(in srgb,var(--sand) 55%,transparent), transparent 17rem);
}
.pil-panel img{
  position:absolute;left:50%;bottom:-22px;width:min(320px,88%);
  transform:translateX(-50%);
  filter:drop-shadow(0 32px 48px rgba(47,79,62,.18));
}
.pil-panel .pil-art{
  position:absolute;inset:0;width:100%;height:100%;padding:30px;
  filter:drop-shadow(0 22px 40px rgba(47,79,62,.14));
}
.pil-art .pil-art-label{
  font-family:var(--serif);font-weight:700;fill:var(--paper);
}
.pil-note{
  position:absolute;z-index:2;max-width:220px;padding:18px;
  border:1px solid var(--line);border-radius:24px;
  background:color-mix(in srgb, var(--panel-solid) 82%, transparent);
  box-shadow:var(--soft-shadow);backdrop-filter:blur(14px);
}
.pil-note strong{display:block;color:var(--forest);font-family:var(--serif);font-size:20px;line-height:1.12}
.pil-note span{display:block;margin-top:8px;color:var(--muted);font-size:13px;line-height:1.45}
.pil-note.one{left:0;top:64px}
.pil-note.two{right:0;bottom:64px}

/* Colonnes (contenu + aparté) ------------------------------------- */
.pil-split{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(34px,6vw,70px);align-items:start}
.pil-head{max-width:640px;margin-bottom:8px}
.pil-head h2{margin-top:14px}
.pil-head p{margin-top:18px;color:var(--muted);font-size:18px}
.pil-prose{display:grid;gap:18px;color:color-mix(in srgb, var(--charcoal) 90%, transparent)}
.pil-prose p{font-size:17px}

/* Aparté / callout ------------------------------------------------- */
.pil-callout{
  padding:28px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--panel);box-shadow:var(--soft-shadow);backdrop-filter:blur(14px);
}
.pil-callout .label,.pil-micro{
  display:inline-flex;color:var(--clay-text);font-size:12px;font-weight:900;
  letter-spacing:.18em;text-transform:uppercase;
}
.pil-callout .label{margin-bottom:14px}

/* Cartes ----------------------------------------------------------- */
.pil-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pil-card{
  position:relative;min-height:220px;overflow:hidden;padding:28px;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--panel-solid) 86%, transparent);
  box-shadow:var(--soft-shadow);
}
.pil-card::after{
  content:"";position:absolute;right:-50px;bottom:-70px;width:150px;height:150px;
  border-radius:50%;background:color-mix(in srgb, var(--sage) 30%, transparent);
}
.pil-card .pil-micro{position:relative;z-index:1;margin-bottom:16px}
.pil-card h3,.pil-card p{position:relative;z-index:1}
.pil-card p{margin-top:14px;color:var(--muted)}

/* Étapes numérotées ------------------------------------------------ */
.pil-steps{display:grid;gap:14px;margin:0;padding:0;list-style:none;counter-reset:steps}
.pil-steps li{
  position:relative;min-height:84px;padding:20px 22px 20px 72px;
  border:1px solid var(--line);border-radius:24px;
  background:color-mix(in srgb, var(--panel-solid) 55%, transparent);
}
.pil-steps li::before{
  counter-increment:steps;content:counter(steps);
  position:absolute;left:22px;top:20px;width:34px;height:34px;display:grid;
  place-items:center;border-radius:50%;background:var(--forest);color:var(--paper);font-weight:900;
}
.pil-steps strong{display:block;color:var(--forest);margin-bottom:5px}

/* Panneau livrables ------------------------------------------------ */
.pil-panel-solid{
  padding:clamp(24px,4vw,34px);border:1px solid var(--line);
  border-radius:var(--radius-lg);background:var(--panel);
  box-shadow:var(--soft-shadow);backdrop-filter:blur(14px);
}
.pil-deliverables{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 0;padding:0;list-style:none}
.pil-deliverables li{
  position:relative;padding:16px 16px 16px 42px;border:1px solid var(--line);
  border-radius:20px;background:color-mix(in srgb,var(--panel-solid) 55%,transparent);
  color:color-mix(in srgb, var(--charcoal) 90%, transparent);font-size:15px;
}
.pil-deliverables li::before{
  content:"";position:absolute;left:16px;top:22px;width:10px;height:10px;border-radius:50%;
  background:var(--clay);box-shadow:0 0 0 6px rgba(224,122,95,.12);
}

/* Bandeau citation (fond pine) ------------------------------------ */
.pil-quote{
  position:relative;overflow:hidden;padding:clamp(36px,6vw,58px);
  border-radius:var(--radius-xl);color:var(--paper);box-shadow:var(--shadow);
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb,var(--sand) 30%,transparent), transparent 24rem),
    linear-gradient(135deg, var(--forest), var(--pine));
}
.pil-quote .eyebrow{color:var(--sand)}
.pil-quote h2{color:var(--paper)}
.pil-quote p{max-width:920px;margin-top:18px;color:rgba(255,253,248,.84);font-size:clamp(18px,2vw,22px)}
.pil-evidence{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px}
.pil-evidence-item{padding:20px;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:rgba(255,255,255,.08)}
.pil-evidence-item strong{display:block;color:var(--paper);font-family:var(--serif);font-size:20px}
.pil-evidence-item span{display:block;margin-top:8px;color:rgba(255,253,248,.74);font-size:14px;line-height:1.45}

/* CTA final -------------------------------------------------------- */
.pil-cta{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}

/* Teinte de section (alternance) ---------------------------------- */
.pil-tint{background:color-mix(in srgb, var(--mist) 30%, transparent)}

/* Responsive ------------------------------------------------------- */
@media (max-width:980px){
  .pil-hero-grid,.pil-split,.pil-cta{grid-template-columns:1fr}
  .pil-metrics,.pil-evidence{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pil-cards{grid-template-columns:1fr}
  .pil-visual{min-height:430px}
}
@media (max-width:680px){
  .pil-metrics,.pil-deliverables,.pil-evidence{grid-template-columns:1fr}
  .pil-visual{min-height:380px}
  .pil-note{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin-top:14px;max-width:none}
}