:root{
  --navy:#0A1B3D;--navy-2:#0d2550;--navy-3:#132f61;
  --sky:#22C0F2;--cyan:#48D6FF;--pink:#FF1FA0;
  --ink:#EAF7FF;--soft:rgba(234,247,255,.74);
  --accent:var(--pink);--accent-2:var(--cyan);
  --radius:22px;--max:1100px;--ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--ink);font-size:18px;line-height:1.7;
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:8px}
.wrap{width:min(100% - 40px,var(--max));margin-inline:auto}
h1,h2,h3{margin:0;line-height:1.08;font-weight:800;letter-spacing:-.4px;text-align:center}
h1{font-size:clamp(32px,5.6vw,58px);text-transform:uppercase;margin-bottom:16px}
h2{font-size:clamp(25px,3.6vw,40px);text-transform:uppercase;margin:52px 0 14px}
h3{font-size:clamp(19px,2.4vw,25px);text-transform:uppercase;color:var(--cyan)}
p,li{color:var(--soft)}
p{margin:0 0 16px}
.pink{color:var(--pink)}.cy{color:var(--cyan)}
.lead{font-size:clamp(18px,2.2vw,22px);text-align:center;max-width:64ch;margin:0 auto 10px}
.center{text-align:center}

/* en-tête */
header{position:sticky;top:0;z-index:50;background:rgba(10,27,61,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(72,214,255,.22)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;flex-wrap:wrap}
.mark{font-size:clamp(19px,2.2vw,24px);font-weight:900;text-transform:uppercase;letter-spacing:.5px}
nav ul{display:flex;flex-wrap:wrap;gap:20px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:600}
nav a{color:var(--soft);transition:color .25s}
nav a:hover,nav a[aria-current]{color:var(--ink)}
.tel{display:inline-flex;align-items:center;gap:9px;background:var(--pink);color:#fff;padding:11px 18px;
  border-radius:999px;font-weight:800;white-space:nowrap;box-shadow:0 8px 24px rgba(255,31,160,.34);
  transition:transform .25s var(--ease)}
.tel:hover{transform:translateY(-2px)}

/* fil d'ariane */
.bread{font-size:14px;color:rgba(234,247,255,.5);padding:18px 0 0}
.bread a:hover{color:var(--cyan)}

/* contenu */
main{padding:24px 0 70px}
.hero-p{padding:34px 0 10px;position:relative}
.hero-p::before{content:"";position:absolute;inset:-40% -20% auto -20%;height:220px;z-index:-1;
  background:radial-gradient(50% 60% at 30% 30%,rgba(34,192,242,.3),transparent 62%),
             radial-gradient(45% 55% at 70% 40%,rgba(255,31,160,.28),transparent 64%)}
.box{background:var(--navy-2);border:3px solid var(--accent);border-radius:var(--radius);
  padding:26px 28px;margin:20px 0;transition:transform .3s var(--ease)}
.box:nth-of-type(even){border-color:var(--accent-2)}
.box:hover{transform:translateY(-5px)}
.box h3{margin-bottom:8px}
.box p:last-child{margin-bottom:0}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:26px}
.grid .box{margin:0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.grid-3 .box{margin:0}
ul.ticks{list-style:none;padding:0;margin:20px auto;max-width:62ch;display:grid;gap:12px}
ul.ticks li{display:flex;gap:12px;align-items:flex-start}
ul.ticks li::before{content:"✓";flex:0 0 26px;height:26px;border-radius:50%;background:var(--pink);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:900;margin-top:3px}
.note{border-left:4px solid var(--cyan);padding:4px 0 4px 18px;margin:22px auto;max-width:66ch}

/* appel à l'action */
.cta{background:linear-gradient(155deg,var(--sky),var(--pink));color:var(--navy);border-radius:30px;
  padding:clamp(30px,5vw,50px);text-align:center;margin:56px 0 20px}
.cta h2{color:var(--navy);margin:0 0 10px}
.cta p{color:rgba(10,27,61,.86);font-weight:600;margin-bottom:22px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-weight:800;
  background:var(--navy);color:#fff;transition:transform .25s var(--ease),box-shadow .25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(10,27,61,.4)}
.btn-2{background:transparent;border:2px solid var(--navy);color:var(--navy)}

/* pied de page */
footer{border-top:2px solid rgba(72,214,255,.25);padding:40px 0 26px;text-align:center}
.fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;font-size:15px;color:var(--soft);margin-bottom:18px}
.fnav a:hover{color:var(--cyan)}
.group{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.group-title{width:100%;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--soft);margin-bottom:4px}
.group a{font-size:clamp(14px,1.7vw,17px);font-weight:800;text-transform:uppercase;padding:9px 16px;
  border-radius:999px;border:2px solid rgba(72,214,255,.45);background:var(--navy-2);color:var(--cyan);
  transition:transform .25s var(--ease),box-shadow .25s}
.group a:nth-child(odd){color:var(--pink);border-color:rgba(255,31,160,.5)}
.group a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.legal{font-size:14px;color:var(--soft);margin-top:22px}
.legal a{text-decoration:underline;text-underline-offset:3px}

/* apparition */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

@media(max-width:820px){.grid,.grid-3{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}