/* ==========================================================================
   Power 21 — page « Notre différence » (route 'difference', content/<lang>/p_difference.php)
   Chargée après common.css et layout.css (hero, titres, conclusion .lyt-).
   Blocs de section : .lyt-block (layout.css).
   Préfixe : .dif-
   ========================================================================== */

/* Texte + encart (même monde, neurosciences, trois niveaux) */
.dif-split { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.dif-text { display: grid; gap: 22px; max-width: 680px; }
.dif-text p { font-size: 17px; line-height: 1.7; color: var(--c-body); text-wrap: pretty; }
.dif-text .dif-text__lead { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.4; font-weight: 600; letter-spacing: -.015em; color: var(--c-ink); }
.lyt-block--blue .dif-text p { color: rgba(255,255,255,.86); }
.lyt-block--blue .dif-text .dif-text__lead { color: var(--c-white); }

/* Encart chiffre : 70+ ans d'expérience */
.dif-stat {
  padding: clamp(32px, 3.5vw, 48px); background: linear-gradient(155deg, #E8EEF8 30%, var(--c-white));
  border: 1px solid rgba(91,124,182,.14); border-left: 3px solid var(--c-yellow);
}
.dif-stat__num { font-weight: 800; font-size: clamp(88px, 10vw, 150px); line-height: .85; letter-spacing: -.06em; color: var(--c-blue); }
.dif-stat__num span { color: var(--c-yellow); }
.dif-stat__label { margin-top: 12px; font-family: var(--ff-serif); font-style: italic; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.02em; }
.dif-stat__tags { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dif-stat__tags li {
  padding: 7px 14px; border: 1px solid rgba(91,124,182,.35); border-radius: 999px;
  background: rgba(255,255,255,.7); font-size: 14px; font-weight: 600; color: var(--c-blue-deep);
}

/* Constellation en forme de cerveau (points et liens dessinés par brain.js, animés
   par difference.js) ; au reveal, les points s'allument au hasard puis les liens se
   tracent (--d). .is-fire : lien qui s'allume brièvement en jaune. */
.dif-brain { display: block; width: 100%; max-width: 520px; justify-self: center; overflow: visible; }
.dif-brain circle { fill: var(--c-white); fill-opacity: .85; transition: opacity .5s ease var(--d, 0s); }
.dif-brain line {
  stroke: var(--c-white); stroke-opacity: .22; stroke-width: 1;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s var(--ease) var(--d, 0s), stroke .4s ease, stroke-opacity .4s ease;
}
.dif-brain line.is-outline { stroke-opacity: .45; }
.dif-brain line.is-fire { stroke: var(--c-yellow); stroke-opacity: 1; stroke-width: 1.5; transition-delay: 0s; }
.js-reveal .dif-brain:not(.is-in) circle { opacity: 0; }
.js-reveal .dif-brain:not(.is-in) line { stroke-dashoffset: 1; }

/* 2. Pédagogie : deux piliers -------------------------------------------------- */
.dif-pillars {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.dif-pillar {
  position: relative; overflow: hidden; display: grid; align-content: start; gap: 16px;
  padding: clamp(32px, 3.5vw, 56px); padding-right: clamp(96px, 10vw, 160px);
  background: linear-gradient(155deg, #EEF2F9 30%, var(--c-white));
  border: 1px solid rgba(91,124,182,.14); border-top: 3px solid var(--c-yellow);
}
.dif-pillar__num {
  position: absolute; top: .05em; right: .2em; pointer-events: none;
  font-size: clamp(120px, 13vw, 200px); line-height: 1; color: rgba(91,124,182,.22);
}
.dif-pillar h3 { margin: 0; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; font-weight: 800; letter-spacing: -.03em; }
.dif-pillar p { font-size: 17px; line-height: 1.7; color: var(--c-body); text-wrap: pretty; }

/* 3. Trois niveaux : cercles emboîtés posés sur leur base (illustration reprise
   d'eqlab21.com/fr/approche) + liste --------------------------------------------- */
.dif-split--levels { grid-template-columns: 5fr 7fr; }
.dif-circles { position: relative; width: min(100%, 460px); aspect-ratio: 1; justify-self: center; }
.dif-circles__c {
  position: absolute; bottom: 0; border-radius: 50%; aspect-ratio: 1;
  display: flex; justify-content: center; align-items: flex-start; padding-top: 10%;
  font-size: clamp(12px, 1.1vw, 15px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-align: center;
  transform-origin: 50% 100%; transition: transform .9s var(--ease) var(--d, 0s), opacity .6s ease var(--d, 0s);
}
.dif-circles__c--3 { left: 0;     width: 100%; background: #2E4777; color: var(--c-white); }
.dif-circles__c--2 { left: 12.5%; width: 75%;  background: var(--c-blue-deep); color: var(--c-white); box-shadow: 0 -12px 40px -20px rgba(15,17,21,.5); --d: .15s; }
.dif-circles__c--1 { left: 25%;   width: 50%;  background: var(--c-white); color: var(--c-ink); align-items: center; padding-top: 0; box-shadow: 0 -12px 40px -20px rgba(15,17,21,.5); --d: .3s; }
.js-reveal .dif-circles:not(.is-in) .dif-circles__c { opacity: 0; transform: scale(.7); }

.dif-levels { list-style: none; margin: 0; padding: 0; display: grid; }
.dif-level { display: grid; gap: 12px; padding: 28px 0; border-top: 1px solid rgba(255,255,255,.35); }
.dif-level:first-child { border-top: 0; padding-top: 0; }
.dif-level h3 {
  display: flex; align-items: center; gap: 14px; margin: 0;
  font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em;
}
.dif-level h3::before {   /* pastille de la couleur du cercle correspondant */
  content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-white); box-shadow: 0 0 0 1px rgba(255,255,255,.6);
}
.dif-level:nth-child(2) h3::before { background: var(--c-blue-deep); }
.dif-level:nth-child(3) h3::before { background: #2E4777; }
.dif-level p { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.86); text-wrap: pretty; }

/* 4. Processus en 5 étapes (frise) ------------------------------------------------ */
.dif-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px;
}
.dif-step { position: relative; display: grid; align-content: start; gap: 12px; padding-top: 36px; }
.dif-step::before {   /* la frise : un trait continu, interrompu par les pastilles */
  content: ''; position: absolute; top: 7px; left: 0; right: -24px; height: 2px; background: rgba(91,124,182,.25);
}
.dif-step:last-child::before { right: 0; }
.dif-step::after {
  content: ''; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-white); border: 3px solid var(--c-blue); box-sizing: border-box;
}
.dif-step:last-child::after { background: var(--c-yellow); border-color: var(--c-yellow); }
.dif-step__num { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-grey); }
.dif-step h3 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
.dif-step p:not(.dif-step__num) { font-size: 15px; line-height: 1.65; color: var(--c-body); text-wrap: pretty; }
.dif-step a { color: var(--c-blue); background: linear-gradient(var(--c-yellow), var(--c-yellow)) 0 100% / 100% 2px no-repeat; }
.dif-step a:hover { color: var(--c-blue-deep); }

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 1100px) {
  .dif-steps { grid-template-columns: 1fr; gap: 0; max-width: 680px; }
  .dif-step { padding: 0 0 32px 40px; }
  .dif-step::before { top: 0; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
  .dif-step:last-child::before { display: none; }
}
@media (max-width: 900px) {
  .dif-split, .dif-split--levels, .dif-pillars { grid-template-columns: 1fr; }
  .dif-circles { width: min(100%, 380px); }
}