/* À l'Unisson : page d'attente (haut de l'accueil de la maquette).
   La nuit du logo, le champ d'ondes autour du cercle, le nom qui s'écrit. Thème sombre unique, voulu. */
@font-face{font-family:'Gloock';src:url(../polices/gloock-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url(../polices/jost-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url(../polices/jost-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url(../polices/jost-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@property --p{syntax:'<percentage>';inherits:false;initial-value:120%}

:root{
  --creme:#FBF5EC; --nuit:#141C45; --indigo:#2B2170; --violet:#4A3490; --prune:#6B3A8C;
  --corail:#E4605A; --corail-clair:#F08A74; --peche:#F2B59B; --bleu:#2F5DA8;
  --creme-doux:rgba(251,245,236,.82); --filet:rgba(251,245,236,.2);
  --f-titre:'Gloock',Georgia,'Times New Roman',serif; --f-texte:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--nuit)}
body{margin:0;color:var(--creme);background:var(--nuit);font-family:var(--f-texte);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--peche);outline-offset:4px;border-radius:4px}
.evitement{position:absolute;left:-9999px;top:0;z-index:50;background:var(--creme);color:var(--nuit);padding:10px 16px;border-radius:0 0 8px 0}
.evitement:focus{left:0}

.page{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(ellipse 48% 55% at 74% 40%,#3F2C86 0%,rgba(63,44,134,0) 70%),radial-gradient(ellipse 45% 40% at 4% 100%,rgba(228,96,90,.5) 0%,rgba(228,96,90,0) 70%),radial-gradient(ellipse 35% 30% at 98% 100%,rgba(47,93,168,.55) 0%,rgba(47,93,168,0) 70%),linear-gradient(165deg,#10163A 0%,#1A1D5A 55%,#2B2170 100%)}
.champ{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.wrap{position:relative;z-index:3;width:100%;max-width:1360px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px),5vw);padding-right:max(18px,env(safe-area-inset-right,0px),5vw)}
@media (min-width:1440px){.wrap{padding-left:72px;padding-right:72px}}
.serif{font-family:var(--f-titre);font-weight:400;letter-spacing:-.01em;text-wrap:balance}
.caps{text-transform:uppercase;letter-spacing:.32em;font-size:13px;font-weight:500;margin:0}

/* ---------- en-tête ---------- */
.haut{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:max(22px,env(safe-area-inset-top,0px));padding-bottom:12px}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.marque img{width:44px;height:44px;object-fit:contain}
.marque span{font-family:var(--f-titre);font-size:19px}
.son-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 18px 8px 14px;border-radius:999px;border:1.5px solid rgba(251,245,236,.55);background:transparent;color:var(--creme);font:500 15px/1 var(--f-texte);cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.son-btn:hover{border-color:var(--peche);color:var(--peche)}
.son-btn[aria-pressed="true"]{background:var(--corail);border-color:var(--corail);color:var(--nuit)}
.son-btn svg{width:22px;height:22px;flex:none}
.son-btn .onde-a,.son-btn .onde-b{opacity:0;transition:opacity .3s}
.son-btn[aria-pressed="true"] .onde-a,.son-btn[aria-pressed="true"] .onde-b{opacity:1}
.son-btn[aria-pressed="true"] .barre-son{opacity:0}

/* ---------- accueil : composition ---------- */
.grille{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);padding-block:clamp(16px,4vh,48px) clamp(32px,6vh,72px)}
.texte{min-width:0;display:flex;flex-direction:column;gap:22px}
.titre{margin:0;width:min(100%,540px)}
.titre img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p) - 14%),transparent var(--p));mask-image:linear-gradient(90deg,#000 calc(var(--p) - 14%),transparent var(--p))}
.signature{display:flex;flex-direction:column;gap:8px;margin-top:-6px}
.signature p{margin:0}
.baseline{color:var(--peche)}
.lieu{color:var(--creme-doux);font-size:16px}

.bientot{display:flex;flex-direction:column;gap:10px;max-width:520px;padding-top:22px;border-top:1px solid var(--filet)}
.bientot h2{margin:0;font-size:clamp(34px,3.6vw,52px);line-height:1.05}
.bientot h2 em{font-style:normal;color:var(--corail-clair)}
.bientot p{margin:0;color:var(--creme-doux);max-width:46ch}

.rdv{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;row-gap:4px;align-items:start;max-width:560px}
.rdv > *{grid-column:2}
.rdv-note{grid-column:1 !important;grid-row:1 / span 4;width:30px;height:64px;margin-top:4px}
.rdv-note ellipse{fill:var(--corail)}
.rdv-note line{stroke:var(--corail);stroke-width:2.4}
.rdv .caps{color:var(--peche);font-size:12px}
.rdv h3{margin:0;font-size:30px;line-height:1.15}
.rdv-infos{margin:0;color:var(--creme-doux);font-size:17px}
.rdv-attente{margin:6px 0 0;color:var(--peche);font-size:16px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:10px}
.bouton{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:12px 26px;border-radius:999px;background:var(--corail);color:var(--nuit);text-decoration:none;font-weight:600;transition:background .3s,gap .3s}
.bouton:hover{background:var(--peche);gap:16px}
.contact{margin:0;color:var(--creme-doux)}
.contact-liens{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:4px}
.lien{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:500;text-decoration:none;color:var(--creme);border-bottom:1.5px solid currentColor;transition:gap .3s,color .3s}
.lien:hover{gap:16px;color:var(--peche)}

/* ---------- le cercle ---------- */
.scene{position:relative;justify-self:center;width:min(100%,640px);aspect-ratio:1/1;max-width:100%}
.anneaux{position:absolute;inset:-22%;width:144%;height:144%;overflow:visible;pointer-events:none}
.anneaux circle{fill:none;stroke:var(--peche);stroke-width:1;vector-effect:non-scaling-stroke;transform-origin:50% 50%;transform-box:fill-box}
.cercle{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.cercle-btn{position:absolute;inset:13%;border-radius:50%;border:0;background:transparent;cursor:pointer;z-index:3}
.onde-dom{position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1/1;border-radius:50%;border:1.5px solid var(--corail-clair);transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;animation:onde 3s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes onde{from{transform:translate(-50%,-50%) scale(.6);opacity:.9}to{transform:translate(-50%,-50%) scale(2.1);opacity:0}}
.indice{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);margin:0;white-space:nowrap;color:rgba(251,245,236,.68);font-size:14px;z-index:4}

/* ---------- pages simples (mentions, confidentialité, 404) ---------- */
.feuille{flex:1;max-width:820px;padding-block:clamp(24px,6vh,64px) 72px}
.feuille h1{font-family:var(--f-titre);font-weight:400;font-size:clamp(40px,7vw,64px);line-height:1.05;letter-spacing:-.01em;margin:0 0 10px;text-wrap:balance}
.feuille .maj{margin:0 0 36px;color:var(--creme-doux);font-size:15px}
.feuille h2{margin:36px 0 10px;padding-top:24px;border-top:1px solid var(--filet);font-size:13px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--peche)}
.feuille h3{margin:24px 0 8px;font-family:var(--f-titre);font-weight:400;font-size:24px}
.feuille p,.feuille li{color:var(--creme-doux);max-width:66ch}
.feuille ul{padding-left:1.2em}
.feuille a{color:var(--peche)}
.feuille a:hover{color:var(--creme)}

/* ---------- pied ---------- */
.pied{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;padding-top:18px;padding-bottom:max(22px,env(safe-area-inset-bottom,0px));border-top:1px solid var(--filet);font-size:14px;color:rgba(251,245,236,.72)}
.pied p{margin:0}
.pied nav a{text-decoration:none;display:inline-block;padding:6px 0}
.pied nav a:hover,.pied nav a[aria-current="page"]{color:var(--peche)}

/* ---------- ouverture (seulement avec JavaScript et sans « réduire les animations ») ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .titre img{animation:ecrire 2.4s cubic-bezier(.65,0,.35,1) .5s both}
  .js .cercle{animation:arriver 2s cubic-bezier(.2,.8,.2,1) both}
  .js .anneaux circle{animation:anneau 1.8s cubic-bezier(.2,.8,.2,1) both}
  .js .anneaux circle:nth-child(2){animation-delay:.15s}
  .js .anneaux circle:nth-child(3){animation-delay:.3s}
  .js .anneaux circle:nth-child(4){animation-delay:.45s}
  .js .monte{animation:monter 1s cubic-bezier(.2,.8,.2,1) both}
  .js .monte:nth-child(2){animation-delay:1.4s}
  .js .monte:nth-child(3){animation-delay:1.55s}
  .js .monte:nth-child(4){animation-delay:1.7s}
  .js .monte:nth-child(5){animation-delay:1.85s}
  .js .accueil .haut,.js .accueil .pied{animation:apparaitre 1s ease 1.8s both}
}
@keyframes ecrire{from{--p:0%}to{--p:120%}}
@keyframes arriver{from{opacity:0;transform:rotate(-50deg) scale(.82)}to{opacity:1;transform:none}}
@keyframes anneau{from{opacity:0;transform:scale(.5)}}
@keyframes monter{from{opacity:0;transform:translateY(24px)}}
@keyframes apparaitre{from{opacity:0}}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .grille{grid-template-columns:minmax(0,1fr);gap:8px;padding-top:4px}
  .scene{order:-1;width:min(86%,420px)}
  .indice{display:none}
  .titre{width:min(100%,520px)}
  .son-btn span{display:none}
  .son-btn{padding:8px;min-width:44px;justify-content:center}
}