/* situations : repris de home.html, adapté au balisage WordPress */
.situations{background:var(--blanc)}
.situations h2{margin-bottom:12px}
.situations .intro-section > p{color:var(--gris);margin-bottom:40px}
.grille-situations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.situation{--mx:50%;--my:50%;position:relative;overflow:hidden;isolation:isolate;padding:28px;border-radius:8px;background:var(--glace);display:flex;flex-direction:column;gap:12px;border:1px solid transparent;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .35s,border-color .35s}
.situation::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(0,144,192,.16),transparent 65%);opacity:0;transition:opacity .3s}
.situation:not(.urgence):hover{transform:translateY(-6px);background:#fff;border-color:var(--filet);box-shadow:0 24px 48px -28px rgba(10,34,64,.45)}
.situation:hover::before{opacity:1}
.situation h3{font-size:1.15rem}
.situation p{margin:0;color:var(--gris);font-size:.97rem}
.tuile-pi{width:64px;height:64px;border-radius:8px;display:grid;place-items:center;background:#fff;color:var(--bleu);box-shadow:0 10px 24px -16px rgba(10,34,64,.5);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.situation:not(.urgence):hover .tuile-pi{transform:scale(1.08) rotate(-3deg)}
.pi{width:44px;height:44px;overflow:visible}
.pi .acc{fill:var(--cyan-clair)}
.pi .acc-trait{color:var(--cyan)}
.pi *{transform-box:fill-box;transform-origin:center}
.situation.urgence{grid-column:span 2;grid-row:span 2;padding:clamp(28px,3.5vw,48px);justify-content:flex-end;gap:16px;color:#fff;background:linear-gradient(180deg,rgba(3,12,26,.05) 0%,rgba(3,12,26,.32) 40%,rgba(3,12,26,.88) 70%,rgba(3,12,26,.96) 100%),var(--nuit)}
.situation.urgence::before{background:radial-gradient(320px circle at var(--mx) var(--my),rgba(79,195,234,.22),transparent 65%)}
.situation.urgence .rond{position:absolute;z-index:-1;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.22),rgba(79,195,234,.1) 50%,rgba(79,195,234,0) 72%);border:1px solid rgba(255,255,255,.12);animation:flotte 9s ease-in-out infinite}
.situation.urgence .u1{width:240px;height:240px;right:-60px;top:-70px}
.situation.urgence .u2{display:none;width:110px;height:110px;right:22%;top:24%;animation-delay:-3s}
.situation.urgence .u3{display:none;width:56px;height:56px;right:9%;top:52%;animation-delay:-6s}
.situation.urgence .tuile-pi{width:84px;height:84px;margin-bottom:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;box-shadow:none}
.situation.urgence .pi{width:56px;height:56px}
.situation.urgence h3{font-size:clamp(1.6rem,2.4vw,2.2rem)}
.situation.urgence p{color:#c9dbea;font-size:1.05rem}
.urgence-tel{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;margin-top:8px;padding:14px 22px;border-radius:8px;background:var(--cyan);color:#fff;text-decoration:none;font:780 1.45rem/1 var(--titre);font-stretch:108%;transition:background .2s,transform .2s}
.urgence-tel:hover{background:#00a6dc;transform:translateY(-2px)}
.urgence-tel svg{width:24px;height:24px}
.pi-urgence .onde{fill:none;stroke:var(--cyan-clair);stroke-width:2;opacity:0;animation:onde-pi 2.4s ease-out infinite}
.pi-urgence .o2{animation-delay:1.2s}
.pi-urgence .excl{animation:clignote 1.2s ease-in-out infinite}
.situation.vu .pi-loupe .lentille{animation:scrute 1.6s ease-in-out .5s}
.situation:hover .pi-loupe .lentille{animation:scrute 1.6s ease-in-out infinite}
.situation.vu .pi-relais .f1{animation:vers-droite 1.2s ease-in-out .5s}
.situation.vu .pi-relais .f2{animation:vers-gauche 1.2s ease-in-out .5s}
.situation:hover .pi-relais .f1{animation:vers-droite 1.2s ease-in-out infinite}
.situation:hover .pi-relais .f2{animation:vers-gauche 1.2s ease-in-out infinite}
.pi-prevention .coche{stroke-dasharray:1;stroke-dashoffset:1}
.situation.vu .pi-prevention .coche{animation:trace .7s ease-out .6s forwards}
.situation:hover .pi-prevention .coche{animation:trace-boucle 1.8s ease-in-out infinite}
.situation:hover .pi-prevention .ecu{animation:pulse-ecu 1.8s ease-in-out infinite}
.pi-croissance rect{transform-origin:bottom}
.pi-croissance .courbe{stroke-dasharray:1;stroke-dashoffset:0}
.situation.vu .pi-croissance rect{animation:pousse .8s cubic-bezier(.3,1.4,.5,1) .5s backwards}
.situation.vu .pi-croissance .c2{animation-delay:.62s}
.situation.vu .pi-croissance .c3{animation-delay:.74s}
.situation.vu .pi-croissance .courbe{animation:trace-inverse .9s ease-out .8s backwards}
.situation:hover .pi-croissance rect{animation:pousse 1.6s cubic-bezier(.3,1.4,.5,1) infinite}
.situation:hover .pi-croissance .c2{animation-delay:.12s}
.situation:hover .pi-croissance .c3{animation-delay:.24s}
.situation:hover .pi-croissance .courbe{animation:trace-inverse 1.6s ease-out infinite}
.pi-reglement .lignes path{stroke-dasharray:1;stroke-dashoffset:0}
.situation.vu .pi-reglement .lignes path{animation:trace-inverse .6s ease-out .5s backwards}
.situation.vu .pi-reglement .l2{animation-delay:.7s}
.situation.vu .pi-reglement .l3{animation-delay:.9s}
.situation.vu .pi-reglement .tampon{animation:tampon .5s cubic-bezier(.3,1.6,.5,1) 1.2s backwards}
.situation:hover .pi-reglement .lignes path{animation:trace-inverse 1.8s ease-out infinite}
.situation:hover .pi-reglement .l2{animation-delay:.2s}
.situation:hover .pi-reglement .l3{animation-delay:.4s}
.situation:hover .pi-reglement .tampon{animation:tampon 1.8s cubic-bezier(.3,1.6,.5,1) .5s infinite}
.situation.revele{transition-delay:calc(var(--i,0) * 80ms)}
.pi-pied{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--cyan-clair);background:rgba(79,195,234,.1);transition:background .2s,color .2s}
.pi-pied svg{width:18px;height:18px}
.pied-domaines a:hover .pi-pied{background:var(--cyan);color:#fff}
@media (max-width:980px){
  .grille-situations{grid-template-columns:repeat(2,minmax(0,1fr))}
  .situation.urgence{grid-row:auto}
  .situation:last-child{grid-column:span 2}
}
@media (max-width:640px){
  .grille-situations{grid-template-columns:1fr}
  .situation.urgence,.situation:last-child{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .pi *,.situation.urgence .rond{animation:none!important}
  .pi-prevention .coche{stroke-dashoffset:0}
}

/* WordPress : image de l'urgence par le bloc Image de fond, voile au-dessus de l'image */
.situation.urgence{background:var(--nuit)}
.situation.urgence .fond-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,12,26,.05) 0%,rgba(3,12,26,.32) 40%,rgba(3,12,26,.88) 70%,rgba(3,12,26,.96) 100%)}
.situation.urgence .fond-image img{object-position:center 30%}
.situation.urgence .wp-block-buttons{align-self:flex-start}
.grille-situations > :nth-child(2){--i:0}.grille-situations > :nth-child(3){--i:1}.grille-situations > :nth-child(4){--i:2}.grille-situations > :nth-child(5){--i:3}.grille-situations > :nth-child(6){--i:4}