/* ==========================================================================\n   LPE 2.13 — univers visuels, transitions animées et cartes passerelles\n   ========================================================================== */

/* --------------------------------------------------------------------------\n   Héros immersifs — uniquement les pages qui n'avaient pas déjà leur propre visuel\n   ----------------------------------------------------------------------- */
.lpe-page-hero--v213{
  position:relative;
  isolation:isolate;
  min-height:clamp(620px,78svh,850px);
  padding:clamp(115px,14vh,160px) 0 clamp(82px,10vh,120px);
  overflow:hidden;
  color:#fff;
  background:#061321;
}
.lpe-page-hero--v213 .lpe-page-hero__grid{
  position:relative;
  z-index:3;
  display:block;
  min-height:clamp(420px,56svh,610px);
}
.lpe-page-hero--v213 .lpe-page-hero__copy{
  position:relative;
  z-index:4;
  width:min(760px,63vw);
  padding:clamp(26px,4vw,48px) 0;
}
.lpe-page-hero--v213 .lpe-page-hero__media{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  max-height:none;
  border-radius:0;
  overflow:hidden;
  background:#061321;
}
.lpe-page-hero--v213 .lpe-page-hero__media picture,
.lpe-page-hero--v213 .lpe-page-hero__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.lpe-page-hero--v213 .lpe-page-hero__media img{
  transform:scale(1.035);
  animation:lpe-v213-hero-arrive 1.25s cubic-bezier(.2,.75,.2,1) both;
}
.lpe-page-hero--v213 .lpe-page-hero__media::before,
.lpe-page-hero--v213 .lpe-page-hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.lpe-page-hero--v213 .lpe-page-hero__media::before{
  background:
    linear-gradient(90deg,rgba(3,13,30,.94) 0%,rgba(3,13,30,.80) 32%,rgba(3,13,30,.38) 62%,rgba(3,13,30,.12) 100%),
    linear-gradient(0deg,rgba(4,13,28,.78) 0%,transparent 38%,rgba(3,10,24,.18) 100%);
}
.lpe-page-hero--v213 .lpe-page-hero__media::after{
  background:radial-gradient(circle at 18% 48%,rgba(23,103,198,.22),transparent 34%);
  mix-blend-mode:screen;
}
.lpe-page-hero--v213 h1{
  max-width:920px;
  margin:0 0 24px;
  color:#fff;
  text-wrap:balance;
  text-shadow:0 5px 34px rgba(0,0,0,.42);
}
.lpe-page-hero--v213 .lpe-kicker,
.lpe-page-hero--v213 .lpe-lede,
.lpe-page-hero--v213 .lpe-page-hero__note{color:rgba(255,255,255,.92)}
.lpe-page-hero--v213 .lpe-kicker span{background:#fff}
.lpe-page-hero--v213 .lpe-lede{max-width:720px;font-size:clamp(1.18rem,1.65vw,1.48rem);line-height:1.55;text-shadow:0 3px 22px rgba(0,0,0,.5)}
.lpe-page-hero--v213 .lpe-page-hero__note{max-width:680px;border-color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.6}
.lpe-page-hero--v213 .lpe-button--ghost{border-color:rgba(255,255,255,.66);color:#fff;background:rgba(4,15,34,.18);backdrop-filter:blur(12px)}
.lpe-page-hero--v213 .lpe-button--ghost:hover{background:rgba(255,255,255,.13)}

/* Nuances contextuelles, sans jamais écraser l'identité propre des ministères. */
.lpe-page-hero--v213[data-v213-world="pole-rouge"] .lpe-page-hero__media::after,
.lpe-page-hero--v213[data-v213-world="demo-industry"] .lpe-page-hero__media::after{background:radial-gradient(circle at 26% 45%,rgba(220,46,42,.22),transparent 38%)}
.lpe-page-hero--v213[data-v213-world="pole-blanc"] .lpe-page-hero__media::before,
.lpe-page-hero--v213[data-v213-world="france-interieur"] .lpe-page-hero__media::before,
.lpe-page-hero--v213[data-v213-world="mayors"] .lpe-page-hero__media::before{
  background:linear-gradient(90deg,rgba(3,16,36,.90) 0%,rgba(3,16,36,.72) 35%,rgba(3,16,36,.26) 67%,rgba(3,16,36,.06) 100%),linear-gradient(0deg,rgba(4,13,28,.58),transparent 42%);
}
@keyframes lpe-v213-hero-arrive{from{transform:scale(1.075);filter:saturate(.86) brightness(.86)}to{transform:scale(1.035);filter:saturate(1) brightness(1)}}

/* --------------------------------------------------------------------------\n   Cartes passerelles carrées — « Apple-like », mais dans le langage LPE\n   ----------------------------------------------------------------------- */
.lpe-v213-crossroads{position:relative;background:#f6f7f9;padding:clamp(68px,8vw,112px) 0}
.lpe-v213-crossroads--mid{margin:clamp(28px,5vw,62px) 0;padding:clamp(28px,4vw,48px) 0;background:transparent}
.lpe-main-column>.lpe-v213-crossroads--mid{width:100%}
.lpe-main-column>.lpe-v213-crossroads--mid .lpe-wrap{width:100%;max-width:none;padding:0}
.lpe-v213-crossroads__head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}
.lpe-v213-crossroads__head h2{max-width:760px;margin:0;font-size:clamp(2.25rem,4.4vw,4.8rem);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.lpe-v213-crossroads__mini{margin:0 0 15px;color:#5f6570;font-size:.74rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.lpe-v213-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.7vw,22px)}
.lpe-v213-crossroads--mid .lpe-v213-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.lpe-v213-card{
  --card-image:none;
  position:relative;
  isolation:isolate;
  aspect-ratio:1;
  min-width:0;
  padding:clamp(22px,2.7vw,36px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.42);
  border-radius:clamp(22px,2vw,32px);
  color:#fff;
  text-decoration:none;
  background:#071321;
  box-shadow:0 24px 58px rgba(22,35,55,.13);
  transform:translateZ(0);
  transition:transform .34s cubic-bezier(.2,.75,.2,1),box-shadow .34s ease;
}
.lpe-v213-card::before,.lpe-v213-card::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none}
.lpe-v213-card::before{background-image:var(--card-image);background-size:cover;background-position:center;transform:scale(1.02);transition:transform .55s cubic-bezier(.2,.75,.2,1),filter .35s ease}
.lpe-v213-card::after{z-index:-1;background:linear-gradient(180deg,rgba(2,10,24,.70) 0%,rgba(2,10,24,.22) 45%,rgba(2,10,24,.86) 100%)}
.lpe-v213-card:hover{transform:translateY(-8px);box-shadow:0 34px 72px rgba(18,34,58,.22)}
.lpe-v213-card:hover::before{transform:scale(1.075);filter:saturate(1.08)}
.lpe-v213-card>span{font-size:.68rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.lpe-v213-card h3{max-width:92%;margin:10px 0 0;color:#fff;font-size:clamp(1.75rem,2.75vw,3.25rem);line-height:.98;letter-spacing:-.025em;text-wrap:balance;text-shadow:0 3px 20px rgba(0,0,0,.35)}
.lpe-v213-card p{max-width:88%;margin:14px 0 0;color:rgba(255,255,255,.84);font-size:clamp(.88rem,1vw,1rem);line-height:1.5}
.lpe-v213-card strong{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:24px;border-top:1px solid rgba(255,255,255,.25);font-size:.82rem;letter-spacing:.02em}
.lpe-v213-card strong i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.14);font-style:normal;font-size:1rem;backdrop-filter:blur(10px);transition:transform .28s ease,background .28s ease}
.lpe-v213-card:hover strong i{transform:translate(3px,-3px);background:rgba(255,255,255,.24)}

/* --------------------------------------------------------------------------\n   Transitions 2.13 — 100 % image + CSS/SVG-like motion, aucune vidéo\n   ----------------------------------------------------------------------- */
html.lpe-transitioning{cursor:progress}
.lpe-transition.lpe-transition--v213{
  position:fixed;
  inset:0;
  z-index:5000;
  display:block;
  overflow:hidden;
  visibility:hidden;
  opacity:0;
  background:#061220;
  transition:opacity .16s ease,visibility .16s ease;
  pointer-events:none;
}
.lpe-transition.lpe-transition--v213.is-active{visibility:visible;opacity:1}
.lpe-transition--v213 .lpe-transition__backdrop{
  position:absolute;
  inset:-3%;
  background-position:center;
  background-size:cover;
  filter:saturate(.86) contrast(1.08) brightness(.62);
  transform:scale(1.06);
  opacity:.72;
  transition:transform .78s cubic-bezier(.2,.75,.2,1),filter .5s ease,opacity .4s ease;
}
.lpe-transition--v213.is-active .lpe-transition__backdrop{transform:scale(1.01);filter:saturate(1) contrast(1.06) brightness(.68)}
.lpe-transition--v213::before,.lpe-transition--v213::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.lpe-transition--v213::before{background:linear-gradient(90deg,rgba(1,7,18,.76),rgba(3,12,27,.28) 48%,rgba(1,7,18,.68)),radial-gradient(circle at 50% 50%,transparent 0 23%,rgba(1,7,18,.25) 75%)}
.lpe-transition--v213::after{inset:auto 0 0;height:4px;background:linear-gradient(90deg,#1774d1 0 33%,#f7f6f0 33% 66%,#da2936 66%);transform:scaleX(0);transform-origin:left;transition:transform .62s cubic-bezier(.2,.75,.2,1)}
.lpe-transition--v213.is-active::after{transform:scaleX(1)}
.lpe-transition--v213[data-kind="pole"] .lpe-transition__backdrop{background-image:url('../images/v213/transition-pole.webp')}
.lpe-transition--v213[data-kind="proof"] .lpe-transition__backdrop{background-image:url('../images/v213/transition-proof.webp')}
.lpe-transition--v213[data-kind="human"] .lpe-transition__backdrop{background-image:url('../images/v213/transition-human.webp')}
.lpe-transition--v213[data-kind="choice"] .lpe-transition__backdrop{background-image:url('../images/v213/transition-choice.webp')}
.lpe-transition--v213[data-kind="manifesto"] .lpe-transition__backdrop{background-image:url('../images/v213/transition-manifesto.webp')}
.lpe-transition--v213[data-kind="movement"] .lpe-transition__backdrop{background-image:url('../images/v213/transition-movement.webp')}
.lpe-transition--v213[data-kind="human"] .lpe-transition__backdrop{filter:saturate(.78) sepia(.08) brightness(.78)}
.lpe-transition--v213[data-kind="manifesto"] .lpe-transition__backdrop{filter:saturate(.55) brightness(.72)}
.lpe-transition--v213[data-tone="blue"]::after{background:#2b8be7}
.lpe-transition--v213[data-tone="white"]::after{background:#f4ead5}
.lpe-transition--v213[data-tone="red"]::after{background:#e74247}

.lpe-transition__copy{
  position:absolute;
  z-index:5;
  inset:0;
  width:min(1200px,86vw);
  margin:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  pointer-events:none;
}
.lpe-transition--v213 .lpe-transition__copy p{
  max-width:1050px;
  margin:0;
  color:#fff;
  font-family:Newsreader,Georgia,serif;
  font-size:clamp(2.55rem,6.4vw,7.4rem);
  font-weight:540;
  line-height:.91;
  letter-spacing:-.045em;
  text-transform:none;
  text-align:left;
  text-wrap:balance;
  opacity:0;
  transform:translateY(26px);
  text-shadow:0 8px 44px rgba(0,0,0,.45);
  transition:opacity .27s ease .06s,transform .52s cubic-bezier(.2,.8,.2,1) .03s;
}
.lpe-transition--v213 .lpe-transition__copy span{
  margin-top:clamp(18px,2.8vh,32px);
  padding:8px 13px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:999px;
  background:rgba(3,13,30,.25);
  color:rgba(255,255,255,.82);
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
  backdrop-filter:blur(12px);
  opacity:0;
  transform:translateY(12px);
  transition:opacity .28s ease .19s,transform .42s ease .17s;
}
.lpe-transition--v213.is-active .lpe-transition__copy p,
.lpe-transition--v213.is-active .lpe-transition__copy span{opacity:1;transform:translateY(0)}
.lpe-transition--v213.is-leaving .lpe-transition__copy{opacity:.15;transform:scale(.985);transition:.14s ease}

/* Les cinq traits changent de comportement selon l'univers. */
.lpe-transition__motion{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.lpe-transition__motion i{position:absolute;display:block;opacity:0}
/* Pôle : flux qui rejoignent un même cap. */
.lpe-transition--v213[data-kind="pole"] .lpe-transition__motion i{left:-15%;top:calc(18% + var(--n,0)*14%);width:65%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);transform:rotate(8deg) translateX(-20%)}
.lpe-transition--v213[data-kind="pole"] .lpe-transition__motion i:nth-child(1){--n:0}.lpe-transition--v213[data-kind="pole"] .lpe-transition__motion i:nth-child(2){--n:1}.lpe-transition--v213[data-kind="pole"] .lpe-transition__motion i:nth-child(3){--n:2}.lpe-transition--v213[data-kind="pole"] .lpe-transition__motion i:nth-child(4){--n:3}.lpe-transition--v213[data-kind="pole"] .lpe-transition__motion i:nth-child(5){--n:4}
.lpe-transition--v213.is-active[data-kind="pole"] .lpe-transition__motion i{animation:lpe-v213-flow .64s ease-out both}
/* Preuve : scan vertical et grille. */
.lpe-transition--v213[data-kind="proof"] .lpe-transition__motion{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:42px 42px}
.lpe-transition--v213[data-kind="proof"] .lpe-transition__motion i:first-child{top:0;bottom:0;width:2px;background:linear-gradient(transparent,#72c8ff,transparent);box-shadow:0 0 32px #46aef4}
.lpe-transition--v213.is-active[data-kind="proof"] .lpe-transition__motion i:first-child{opacity:.8;animation:lpe-v213-scan .68s ease-in-out both}
/* Choix : anneaux qui s'ouvrent. */
.lpe-transition--v213[data-kind="choice"] .lpe-transition__motion i{left:50%;top:50%;width:clamp(120px,20vw,300px);aspect-ratio:1;border:1px solid rgba(255,255,255,.3);border-radius:50%;transform:translate(-50%,-50%) scale(.2)}
.lpe-transition--v213[data-kind="choice"] .lpe-transition__motion i:nth-child(2){width:clamp(220px,34vw,520px)}.lpe-transition--v213[data-kind="choice"] .lpe-transition__motion i:nth-child(3){width:clamp(340px,48vw,760px)}
.lpe-transition--v213.is-active[data-kind="choice"] .lpe-transition__motion i{animation:lpe-v213-ring .65s ease-out both}
/* Humain : vagues souples. */
.lpe-transition--v213[data-kind="human"] .lpe-transition__motion i{left:-10%;right:-10%;height:18%;border-top:1px solid rgba(255,241,220,.42);border-radius:50%;transform:translateY(30px)}
.lpe-transition--v213[data-kind="human"] .lpe-transition__motion i:nth-child(1){top:32%}.lpe-transition--v213[data-kind="human"] .lpe-transition__motion i:nth-child(2){top:43%}.lpe-transition--v213[data-kind="human"] .lpe-transition__motion i:nth-child(3){top:54%}
.lpe-transition--v213.is-active[data-kind="human"] .lpe-transition__motion i{opacity:.75;animation:lpe-v213-wave .72s ease-out both}
/* Manifeste : colonnes qui s'alignent. */
.lpe-transition--v213[data-kind="manifesto"] .lpe-transition__motion i{top:0;bottom:0;width:1px;background:linear-gradient(transparent,rgba(255,255,255,.42),transparent);left:calc(16% + var(--n,0)*17%);transform:scaleY(0)}
.lpe-transition--v213[data-kind="manifesto"] .lpe-transition__motion i:nth-child(1){--n:0}.lpe-transition--v213[data-kind="manifesto"] .lpe-transition__motion i:nth-child(2){--n:1}.lpe-transition--v213[data-kind="manifesto"] .lpe-transition__motion i:nth-child(3){--n:2}.lpe-transition--v213[data-kind="manifesto"] .lpe-transition__motion i:nth-child(4){--n:3}.lpe-transition--v213[data-kind="manifesto"] .lpe-transition__motion i:nth-child(5){--n:4}
.lpe-transition--v213.is-active[data-kind="manifesto"] .lpe-transition__motion i{opacity:.55;animation:lpe-v213-column .56s ease-out both}
/* Mouvement : points qui convergent. */
.lpe-transition--v213[data-kind="movement"] .lpe-transition__motion i{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 26px rgba(255,255,255,.9)}
.lpe-transition--v213[data-kind="movement"] .lpe-transition__motion i:nth-child(1){left:12%;top:18%}.lpe-transition--v213[data-kind="movement"] .lpe-transition__motion i:nth-child(2){left:81%;top:24%}.lpe-transition--v213[data-kind="movement"] .lpe-transition__motion i:nth-child(3){left:18%;top:75%}.lpe-transition--v213[data-kind="movement"] .lpe-transition__motion i:nth-child(4){left:76%;top:74%}.lpe-transition--v213[data-kind="movement"] .lpe-transition__motion i:nth-child(5){left:50%;top:12%}
.lpe-transition--v213.is-active[data-kind="movement"] .lpe-transition__motion i{animation:lpe-v213-converge .7s cubic-bezier(.2,.75,.2,1) both}

@keyframes lpe-v213-flow{from{opacity:0;transform:rotate(8deg) translateX(-22%)}50%{opacity:.75}to{opacity:.08;transform:rotate(8deg) translateX(110%)}}
@keyframes lpe-v213-scan{from{left:3%}to{left:97%}}
@keyframes lpe-v213-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}55%{opacity:.58}100%{opacity:.04;transform:translate(-50%,-50%) scale(1.4)}}
@keyframes lpe-v213-wave{from{opacity:0;transform:translateY(35px)}to{opacity:.72;transform:translateY(-4px)}}
@keyframes lpe-v213-column{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes lpe-v213-converge{0%{opacity:0;transform:translate(0,0) scale(.5)}45%{opacity:.9}100%{opacity:.12;left:50%;top:50%;transform:translate(-50%,-50%) scale(1.7)}}

/* --------------------------------------------------------------------------\n   Responsive / accessibilité\n   ----------------------------------------------------------------------- */
@media(max-width:900px){
  .lpe-page-hero--v213{min-height:700px;padding:104px 0 72px}
  .lpe-page-hero--v213 .lpe-page-hero__grid{min-height:520px;display:flex;align-items:flex-end}
  .lpe-page-hero--v213 .lpe-page-hero__copy{width:100%;padding:24px 0}
  .lpe-page-hero--v213 .lpe-page-hero__media::before{background:linear-gradient(0deg,rgba(3,13,30,.95) 0%,rgba(3,13,30,.80) 40%,rgba(3,13,30,.26) 77%,rgba(3,13,30,.12) 100%)}
  .lpe-page-hero--v213 h1{font-size:clamp(3rem,12vw,5.7rem)}
  .lpe-v213-card-grid,.lpe-v213-crossroads--mid .lpe-v213-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lpe-transition__copy{width:min(90vw,900px)}
}
@media(max-width:650px){
  .lpe-page-hero--v213{min-height:680px;padding:94px 0 58px}
  .lpe-page-hero--v213 .lpe-lede{font-size:1.12rem;line-height:1.55}
  .lpe-page-hero--v213 .lpe-page-hero__note{font-size:.9rem}
  .lpe-v213-crossroads{padding:64px 0}
  .lpe-v213-crossroads--mid{margin:24px 0;padding:24px 0}
  .lpe-v213-crossroads__head{display:block;margin-bottom:22px}
  .lpe-v213-card-grid,.lpe-v213-crossroads--mid .lpe-v213-card-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 7vw 10px 0;scrollbar-width:none}
  .lpe-v213-card-grid::-webkit-scrollbar{display:none}
  .lpe-v213-card{flex:0 0 min(82vw,360px);scroll-snap-align:start;padding:24px;border-radius:25px}
  .lpe-v213-card h3{font-size:clamp(1.8rem,8vw,2.7rem)}
  .lpe-v213-card p{font-size:.9rem}
  .lpe-transition--v213 .lpe-transition__copy p{font-size:clamp(2.45rem,13vw,4.5rem);line-height:.94}
  .lpe-transition--v213 .lpe-transition__copy span{font-size:.64rem;letter-spacing:.1em}
}
@media(prefers-reduced-motion:reduce){
  .lpe-page-hero--v213 .lpe-page-hero__media img{animation:none;transform:none}
  .lpe-v213-card,.lpe-v213-card::before,.lpe-v213-card strong i{transition:none}
  .lpe-transition.lpe-transition--v213{display:none!important}
}