:root {--fond:#F6F9FD;--fond2:#EDF3FB;--encre:#1B2B44;--encre2:#13203A;--texte:#4A5B74;--bleu:#2F5FB3;--bleu2:#88ABE3;--bleu3:#D3E1F5;--corail:#B8502F;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost',system-ui,sans-serif;}
*,*::before,*::after {box-sizing:border-box;}
html,body {overflow-x:clip;}
html {scroll-behavior:smooth;}
body {margin:0;background:var(--fond);color:var(--encre);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.6;}
img,svg {max-width:100%;}
a {color:var(--bleu);}
a:hover {color:var(--encre);}
h1,h2,h3 {font-family:var(--serif);font-weight:400;line-height:1.1;margin:0;}
h1 em,h2 em {color:var(--bleu);}
.wrap {max-width:1200px;margin:0 auto;padding:0 32px;}
.surtitre {margin:0 0 18px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--bleu);font-weight:400;}
.btn {display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 28px;border-radius:999px;background:var(--corail);color:#fff;text-decoration:none;font-size:15px;font-weight:400;letter-spacing:.03em;transition:transform .3s,box-shadow .3s;}
.btn:hover {color:#fff;transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(184,80,47,.6);}
.btn svg {width:18px;height:18px;}
.lien {display:inline-flex;align-items:center;min-height:48px;color:var(--encre);text-decoration:none;font-size:15px;border-bottom:1px solid var(--encre);}
.entete {position:sticky;top:0;z-index:50;background:rgba(246,249,253,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #E3ECF7;}
.entete .wrap {display:flex;align-items:center;justify-content:space-between;gap:24px;height:80px;}
.logo {display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--encre);}
.logo svg {width:38px;height:24px;}
.logo span {font-family:var(--serif);font-size:30px;font-weight:500;}
.menu {display:flex;gap:36px;}
.menu a {color:var(--encre);text-decoration:none;font-size:15px;letter-spacing:.04em;padding:10px 0;border-bottom:1px solid transparent;transition:border-color .3s;}
.menu a:hover,.menu a.actif {border-bottom-color:var(--bleu);}
.actions {display:flex;align-items:center;gap:16px;}
.langue {font-size:13px;letter-spacing:.1em;color:var(--texte);text-decoration:none;padding:12px 4px;}
.actions .btn {min-height:44px;padding:0 22px;}
.burger {display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative;}
.burger span,.burger span::before,.burger span::after {position:absolute;left:11px;width:22px;height:1.5px;background:var(--encre);transition:transform .3s,opacity .3s;content:'';}
.burger span {top:21px;}
.burger span::before {left:0;top:-7px;}
.burger span::after {left:0;top:7px;}
.ouvert .burger span {background:transparent;}
.ouvert .burger span::before {transform:translateY(7px) rotate(45deg);}
.ouvert .burger span::after {transform:translateY(-7px) rotate(-45deg);}
.hero {padding:80px 0 120px;}
.hero .wrap {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;}
.hero h1 {font-size:68px;line-height:1.04;letter-spacing:-.01em;}
.hero .intro {margin:32px 0 0;max-width:520px;font-size:19px;line-height:1.65;color:var(--texte);}
.hero .boutons {display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:44px;}
.visuel {position:relative;}
.halo {position:absolute;inset:8% 4% 4% 14%;border-radius:50%;background:radial-gradient(circle,var(--bleu3) 0%,rgba(211,225,245,0) 70%);animation:halo 6s ease-in-out infinite;}
.coquille {position:relative;display:block;width:100%;height:auto;animation:respire 9s ease-in-out infinite;transform-origin:72% 70%;}
.coquille .ch {opacity:0;transform-box:fill-box;transform-origin:center;animation:eclore 1.2s cubic-bezier(.2,.7,.2,1) forwards;}
.spi {stroke-dasharray:1600;stroke-dashoffset:1600;animation:tracer 4.5s 1.4s cubic-bezier(.45,0,.2,1) forwards;}
.legende {margin:18px 0 0;text-align:right;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--texte);}
.chemin {padding:120px 0;background:var(--fond2);}
.chemin .tete {max-width:720px;margin-bottom:72px;}
.chemin h2 {font-size:52px;}
.etapes {display:flex;align-items:flex-end;gap:20px;}
.etape {flex:1 1 0;background:#fff;border-radius:28px;padding:32px;min-height:260px;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;}
.etape:hover {transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(27,43,68,.35);}
.etape .num {margin:0;font-family:var(--serif);font-size:44px;line-height:1;color:var(--bleu2);}
.etape h3 {margin:24px 0 10px;font-weight:500;font-size:26px;}
.etape p {margin:0;font-size:16px;color:var(--texte);}
.etape.e2 {flex-grow:1.15;padding:36px;min-height:310px;}
.etape.e2 .num {font-size:56px;color:#6E96DA;}
.etape.e3 {flex-grow:1.3;padding:40px;min-height:360px;}
.etape.e3 .num {font-size:70px;color:#4473C4;}
.etape.e4 {flex-grow:1.45;padding:44px;min-height:420px;background:var(--encre);color:var(--fond);}
.etape.e4 .num {font-size:88px;color:#A3BFEA;}
.etape.e4 h3 {font-size:34px;}
.etape.e4 p {color:var(--bleu3);}
.section {padding:140px 0;}
.section.bleu {padding:120px 0;background:var(--fond2);}
.deux {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center;}
.deux h2 {margin-bottom:28px;font-size:48px;line-height:1.12;}
.deux p {margin:0 0 20px;font-size:18px;line-height:1.7;color:var(--texte);}
.citation {position:relative;overflow:hidden;margin:0;padding:56px 48px;border-radius:32px;background:#fff;}
.citation svg {position:absolute;right:-60px;bottom:-40px;width:340px;opacity:.12;}
.citation blockquote {position:relative;margin:0;font-family:var(--serif);font-style:italic;font-size:32px;line-height:1.35;}
.citation figcaption {position:relative;margin-top:24px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--texte);}
.situations {padding:0 0 140px;}
.situations h2 {margin-bottom:36px;font-size:40px;}
.puces {display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none;}
.puces li {padding:10px 20px;border:1px solid #BCD1F0;border-radius:999px;font-size:15px;background:#fff;}
.portrait {aspect-ratio:4/5;border-radius:200px 200px 32px 32px;background:var(--bleu3);display:flex;align-items:center;justify-content:center;color:var(--texte);overflow:hidden;}
.portrait img {width:100%;height:100%;object-fit:cover;}
.seances h2 {margin-bottom:56px;font-size:48px;text-align:center;}
.trois {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.carte {padding:40px 36px;border:1px solid var(--bleu3);border-radius:28px;background:#fff;}
.carte h3 {margin-bottom:12px;font-weight:500;font-size:28px;}
.carte p {margin:0;font-size:16px;color:var(--texte);}
.appel {position:relative;overflow:hidden;padding:120px 0;background:var(--encre);color:var(--fond);text-align:center;}
.appel svg {position:absolute;left:50%;top:50%;width:1100px;transform:translate(-30%,-50%);opacity:.08;}
.appel .wrap {position:relative;}
.appel h2 {max-width:760px;margin:0 auto 24px;font-size:54px;}
.appel p {max-width:560px;margin:0 auto 44px;font-size:18px;line-height:1.7;color:var(--bleu3);}
.pied {padding:56px 0;background:var(--encre2);color:#BCD1F0;font-size:14px;}
.pied .wrap {display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;}
.pied p {margin:0;}
.pied p+p {max-width:480px;}
.bandeau {position:relative;overflow:hidden;padding:96px 0 88px;background:var(--fond2);}
.bandeau .filigrane {position:absolute;right:-120px;top:-60px;width:720px;height:auto;animation:tourne 60s linear infinite;transform-origin:72% 72%;}
.bandeau .wrap {position:relative;}
.bandeau h1 {max-width:760px;font-size:64px;line-height:1.05;}
.bandeau .intro {margin:28px 0 0;max-width:580px;font-size:19px;line-height:1.65;color:var(--texte);}
.corps {padding-top:32px;padding-bottom:120px;}
.ariane {margin-bottom:56px;font-size:14px;color:var(--texte);}
.ariane a {color:var(--texte);}
.ariane span {margin:0 10px;color:var(--bleu2);}
.colonnes {display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start;}
.sous-menu {flex:0 1 260px;}
.sous-menu p {margin:0 0 14px 16px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--texte);}
.sous-menu ul {margin:0;padding:0;list-style:none;}
.sous-menu a {display:flex;align-items:center;gap:12px;min-height:44px;padding:0 16px;border-radius:14px;color:var(--texte);text-decoration:none;font-size:15px;transition:background .3s,color .3s;}
.sous-menu a::before {content:'';width:8px;height:8px;border-radius:50%;border:2px solid #BCD1F0;}
.sous-menu a:hover {background:var(--fond2);color:var(--encre);}
.sous-menu a.actif {background:#fff;color:var(--encre);font-weight:400;box-shadow:0 8px 24px -16px rgba(27,43,68,.4);}
.sous-menu a.actif::before {border-color:var(--bleu);}
.article {flex:999 1 560px;min-width:0;max-width:760px;}
.article h2 {margin:64px 0 20px;font-size:40px;line-height:1.15;}
.article p {margin:0 0 20px;font-size:18px;line-height:1.75;color:#3A4B64;}
.article .chapo {font-size:22px;line-height:1.6;color:var(--encre);}
.article ol {margin:0 0 20px;padding:0;list-style:none;counter-reset:e;}
.article ol li {counter-increment:e;position:relative;padding:0 0 22px 64px;font-size:18px;line-height:1.7;color:#3A4B64;}
.article ol li::before {content:counter(e);position:absolute;left:0;top:-6px;width:44px;height:44px;border-radius:50%;background:var(--fond2);color:var(--bleu);font-family:var(--serif);font-size:24px;display:flex;align-items:center;justify-content:center;}
.article .citation {margin:48px 0;padding:40px 44px;border-radius:28px;}
.article .citation svg {right:-40px;bottom:-30px;width:240px;opacity:.14;}
.article .citation blockquote {font-size:30px;}
.encart {margin-top:64px;padding:44px;border-radius:28px;background:var(--encre);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;}
.article .encart p {margin:0;font-family:var(--serif);font-size:30px;line-height:1.2;color:var(--fond);}
.bandeau .spi {animation-delay:.3s;}
.contact {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:64px;align-items:start;}
.coord h2 {margin-bottom:16px;font-size:40px;}
.coord p {margin:0 0 32px;font-size:18px;line-height:1.7;color:var(--texte);}
.coord ul {margin:0;padding:0;list-style:none;}
.coord li {padding:18px 0;border-top:1px solid var(--bleu3);font-size:17px;}
.coord li span {display:block;margin-bottom:4px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--texte);}
.coord a {color:var(--encre);text-decoration:none;}
.coord a:hover {color:var(--bleu);}
.formulaire {padding:48px;border-radius:32px;background:#fff;box-shadow:0 30px 60px -40px rgba(27,43,68,.35);}
.champs {position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;}
.champ {display:flex;flex-direction:column;gap:8px;}
.champ.large {grid-column:1/-1;}
.champ label {font-size:14px;letter-spacing:.04em;color:var(--texte);}
.champ input,.champ textarea {width:100%;font:inherit;font-size:17px;color:var(--encre);padding:14px 18px;border:1px solid var(--bleu3);border-radius:16px;background:var(--fond);transition:border-color .3s,box-shadow .3s,background .3s;}
.champ input:focus,.champ textarea:focus {outline:none;border-color:var(--bleu);background:#fff;box-shadow:0 0 0 4px rgba(47,95,179,.12);}
.champ textarea {min-height:180px;resize:vertical;}
.piege {position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.formulaire .btn {margin-top:28px;border:0;cursor:pointer;font-family:inherit;}
.mention {margin:16px 0 0;font-size:13px;color:var(--texte);}
.alerte {margin:0 0 28px;padding:16px 22px;border-radius:16px;background:#FBEAE4;color:#8A3417;font-size:16px;}
.alerte p {margin:4px 0;}
.merci {padding:24px 0;text-align:center;}
.merci svg {width:180px;height:auto;margin-bottom:24px;}
.merci h2 {margin-bottom:12px;font-size:36px;}
.merci p {margin:0 0 24px;font-size:18px;color:var(--texte);}
@keyframes eclore {
from {opacity:0;transform:scale(.6) rotate(-20deg);}
to {opacity:1;transform:scale(1) rotate(0);}
}
@keyframes tracer {
to {stroke-dashoffset:0;}
}
@keyframes respire {
0%,100% {transform:rotate(0) scale(1);}
50% {transform:rotate(-3deg) scale(1.02);}
}
@keyframes halo {
0%,100% {opacity:.35;transform:scale(1);}
50% {opacity:.6;transform:scale(1.08);}
}
@keyframes tourne {
to {transform:rotate(360deg);}
}
@keyframes monter {
from {opacity:0;transform:translateY(50px);}
to {opacity:1;transform:none;}
}
@supports (animation-timeline:view()) {
.revele {animation:monter linear both;animation-timeline:view();animation-range:entry 0% entry 100%;}
}
@media (max-width:1100px) {
.menu {gap:24px;}
.hero h1 {font-size:56px;}
.etapes {flex-wrap:wrap;align-items:stretch;}
.etape,.etape.e2,.etape.e3,.etape.e4 {flex:1 1 calc(50% - 10px);min-height:0;}
}
@media (max-width:900px) {
.burger {display:block;order:3;}
.actions .btn {display:none;}
.menu {position:absolute;top:80px;left:0;right:0;flex-direction:column;gap:0;padding:8px 32px 24px;background:var(--fond);border-bottom:1px solid #E3ECF7;display:none;}
.ouvert .menu {display:flex;}
.menu a {padding:14px 0;border-bottom:1px solid #E3ECF7;font-size:17px;}
.hero {padding:48px 0 80px;}
.hero .wrap {grid-template-columns:minmax(0,1fr);}
.hero h1 {font-size:44px;}
.visuel {max-width:520px;margin:0 auto;}
.chemin,.section,.section.bleu,.appel {padding:80px 0;}
.chemin h2,.deux h2,.seances h2,.appel h2 {font-size:38px;}
.chemin .tete {margin-bottom:44px;}
.deux {grid-template-columns:minmax(0,1fr);gap:40px;}
.trois {grid-template-columns:minmax(0,1fr);}
.situations {padding:0 0 80px;}
.portrait {max-width:420px;}
.bandeau {padding:64px 0 56px;}
.bandeau h1 {font-size:44px;}
.bandeau .filigrane {width:480px;right:-160px;opacity:.6;}
.colonnes {gap:40px;}
.sous-menu {flex:1 1 100%;}
.article h2 {margin-top:48px;font-size:32px;}
.contact {grid-template-columns:minmax(0,1fr);gap:40px;}
}
@media (max-width:560px) {
.wrap {padding:0 20px;}
.logo span {font-size:26px;}
.menu {padding:8px 20px 24px;}
.hero h1,.bandeau h1 {font-size:38px;}
.etape,.etape.e2,.etape.e3,.etape.e4 {flex-basis:100%;padding:28px;}
.citation,.article .citation {padding:36px 28px;}
.citation blockquote,.article .citation blockquote {font-size:26px;}
.encart {padding:32px 28px;}
.article ol li {padding-left:56px;}
.champs {grid-template-columns:minmax(0,1fr);}
.formulaire {padding:32px 24px;border-radius:24px;}
}
@media (prefers-reduced-motion:reduce) {
.coquille,.halo,.coquille .ch,.spi,.revele,.bandeau .filigrane {animation:none;opacity:1;stroke-dashoffset:0;}
}