/* © 2026 DRAK Infinity (NEQ 2281240509), Montréal (Québec), Canada. Tous droits réservés.
   Feuille de style commune des pages du site — thème « Nébuleuse », aligné sur la page d'accueil
   (Cormorant Garamond + Manrope, fond #04050b, or #C8962B / #e7c878, violet #6a4bd6, marine #1D3686). */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#04050b;--bg2:#0a0c18;--ink:#f1f2f8;--muted:#aab0c4;--line:rgba(255,255,255,.12);
  --navy:#1D3686;--violet:#6a4bd6;--gold:#C8962B;--gold2:#e7c878;--vert:#7fdca0;--erreur:#ff8a80;
  --verre:rgba(8,10,22,.55);--verre2:rgba(14,17,34,.7);
  --serif:"Cormorant Garamond",Georgia,serif;--sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* alias des anciens noms, pour les pages encore écrites avec le thème Océan */
  --marine:var(--gold2);--marine-fonce:var(--bg2);--vert-fonce:var(--vert);--fond:var(--bg);--carte:var(--verre);--encre:var(--ink);--gris:var(--muted);--ligne:var(--line);
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;min-height:100vh;position:relative;overflow-x:hidden}
a{color:var(--gold2);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#fff}
a:focus-visible,.bouton:focus-visible,input:focus,select:focus,textarea:focus{outline:2px solid var(--gold2);outline-offset:3px}
::selection{background:rgba(200,150,43,.45);color:#fff}
.conteneur{max-width:1080px;margin:0 auto;padding:0 22px}
.etroit{max-width:800px}
h1,h2,h3,.marque{font-family:var(--serif);font-weight:500;letter-spacing:.005em}
h1 em,h2 em,.heros em{font-style:italic;color:var(--gold2);font-weight:400}

/* En-tête */
.barre{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(4,5,11,.72),rgba(4,5,11,.35));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.barre .conteneur{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:12px;padding-bottom:12px}
.marque{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;white-space:nowrap}
.marque .brandlogo{height:54px;width:auto;display:block;filter:drop-shadow(0 2px 11px rgba(0,0,0,.6))}
.marque .brandtext{font-family:var(--serif);letter-spacing:.34em;font-size:14px;text-transform:uppercase;color:#fff}
.marque span.lieu{font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.barre nav{display:flex;flex-wrap:wrap;gap:4px 22px;justify-content:flex-end;align-items:center}
.barre nav a{color:var(--muted);text-decoration:none;font-size:14px;letter-spacing:.04em;padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;margin-left:0}
.barre nav a:hover,.barre nav a:focus,.barre nav a[aria-current]{color:var(--gold2);border-bottom-color:var(--gold)}
.barre nav a.accueil{color:var(--ink)}

/* Pied de page */
footer{margin-top:72px;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(4,5,11,.8));padding:34px 0 42px;font-size:14px;color:var(--muted)}
footer a{color:var(--muted)}
footer a:hover{color:var(--gold2)}
footer .conteneur{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;align-items:center}
footer .flogo{width:84px;height:84px;object-fit:contain;display:block;margin:0 auto 18px;opacity:.92;filter:drop-shadow(0 0 26px rgba(106,75,214,.5));animation:float 9s ease-in-out infinite;flex-basis:100%}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
footer .avis{flex-basis:100%;font-size:13px;opacity:.8;margin-top:6px}

/* Héros et sections */
.heros{padding:clamp(64px,10vw,120px) 0 clamp(40px,6vw,64px);color:var(--ink);background:none;position:relative}
.heros::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(231,200,120,.5),transparent)}
.heros h1{font-size:clamp(38px,6vw,64px);line-height:1.05;max-width:20ch;font-weight:400}
.heros p{font-family:var(--sans);font-size:clamp(17px,2vw,20px);max-width:58ch;margin-top:22px;color:var(--muted)}
.heros .sur{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold2);margin:0 0 18px}
.actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
section{padding:clamp(48px,7vw,80px) 0}
section.blanc{background:transparent;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-size:clamp(30px,4vw,44px);line-height:1.1;margin-bottom:12px;color:var(--ink)}
h3{color:var(--ink)}
.chapeau{color:var(--muted);max-width:62ch;margin-bottom:34px;font-size:17.5px}
.bouton{display:inline-block;font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.03em;padding:13px 26px;border-radius:999px;cursor:pointer;text-decoration:none;color:var(--bg);background:linear-gradient(135deg,var(--gold2),var(--gold));border:1px solid transparent;box-shadow:0 10px 30px rgba(200,150,43,.22);transition:transform .2s,box-shadow .2s,filter .2s}
.bouton:hover,.bouton:focus{transform:translateY(-2px);box-shadow:0 14px 36px rgba(200,150,43,.32);filter:brightness(1.05);color:var(--bg)}
.bouton.contour,.bouton.secondaire{background:rgba(255,255,255,.04);color:var(--ink);border-color:rgba(255,255,255,.28);box-shadow:none}
.bouton.contour:hover,.bouton.contour:focus,.bouton.secondaire:hover,.bouton.secondaire:focus{background:rgba(255,255,255,.1);border-color:var(--gold2);color:#fff}

/* Cartes (catalogue, articles, services) */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px}
.carte{background:var(--verre);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .25s,border-color .25s,background .25s;border-top:1px solid var(--line);padding:0}
.carte:hover{transform:translateY(-4px);border-color:rgba(231,200,120,.55);background:var(--verre2)}
.carte img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--bg2);border-bottom:1px solid var(--line)}
.carte .corps{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.carte>h3,.carte>p,.carte>ul,.carte>.prix{margin-left:26px;margin-right:26px}
.carte>h3{margin-top:24px}
.carte>.prix{margin-bottom:24px}
.carte h3{font-size:24px;line-height:1.2;margin-bottom:8px}
.carte h3 a{color:inherit;text-decoration:none}
.carte h3 a:hover{color:var(--gold2)}
.carte p{color:var(--muted);font-size:15.5px;flex:1}
.carte ul{margin:14px 0 0 18px;color:var(--ink);font-size:15px}
.carte li{margin-bottom:4px}
.carte .pied{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.carte .prix,.prix{font-family:var(--serif);font-weight:500;color:var(--gold2);font-size:26px;white-space:nowrap}
.carte>.prix{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.carte .prix small,.prix small{display:block;font-family:var(--sans);font-weight:400;color:var(--muted);font-size:13px;white-space:normal}
.carte .note{font-size:13.5px;color:var(--muted);margin-top:10px;flex:0}
.carte .pied{flex-wrap:wrap}
.carte .pied .note{flex:1 1 auto;margin:0;white-space:nowrap;letter-spacing:.02em;font-size:13px}
.carte .pied .lien{margin-left:auto}
.carte .lien{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.03em;color:var(--gold2);text-decoration:none;white-space:nowrap;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.carte .lien span{display:inline-block;transition:transform .2s}
.carte .lien:hover,.carte .lien:focus{color:#fff;border-bottom-color:var(--gold2)}
.carte .lien:hover span{transform:translateX(4px)}
.etiquette{display:inline-block;align-self:flex-start;background:rgba(200,150,43,.14);color:var(--gold2);border:1px solid rgba(200,150,43,.35);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-bottom:12px}

/* Étapes et pastilles */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;counter-reset:etape}
.etape{counter-increment:etape;padding-left:58px;position:relative}
.etape::before{content:counter(etape);position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;border:1px solid var(--gold2);color:var(--gold2);font-family:var(--serif);font-size:22px;display:flex;align-items:center;justify-content:center;background:rgba(200,150,43,.08)}
.etape h3{font-size:21px;margin-bottom:4px}
.etape p{color:var(--muted);font-size:15.5px}
.kits{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.kits a{background:var(--verre);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14.5px;text-decoration:none;color:var(--ink);transition:border-color .2s,background .2s}
.kits a:hover,.kits a:focus{border-color:var(--gold2);background:var(--verre2);color:#fff}

/* Formulaires */
form{background:var(--verre);border:1px solid var(--line);border-radius:18px;padding:30px;max-width:720px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.champ{margin-bottom:18px}
label{display:block;font-weight:600;margin-bottom:7px;font-size:14.5px;letter-spacing:.02em}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:rgba(4,5,11,.6);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:12px 14px;transition:border-color .2s}
input::placeholder,textarea::placeholder{color:rgba(170,176,196,.6)}
input:focus,select:focus,textarea:focus{border-color:var(--gold2);outline:none;box-shadow:0 0 0 3px rgba(200,150,43,.2)}
select option{background:var(--bg2);color:var(--ink)}
input[type=checkbox]{width:auto;accent-color:var(--gold)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mention{font-size:13.5px;color:var(--muted);margin-top:14px}
.erreur{color:var(--erreur)}
.surmesure{background:var(--verre);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:14px;padding:24px 28px;max-width:800px}
.surmesure p{margin:6px 0 18px;color:var(--muted)}

/* Articles */
article.texte{background:var(--verre);border:1px solid var(--line);border-radius:22px;padding:clamp(28px,5vw,56px) clamp(22px,6vw,64px) clamp(32px,5vw,52px);margin:40px auto 64px;max-width:860px;line-height:1.7;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
article.texte h1{font-size:clamp(34px,5.4vw,52px);line-height:1.08;margin:0 0 12px;font-weight:400}
article.texte .meta{color:var(--muted);font-size:14px;margin-bottom:34px;letter-spacing:.02em}
article.texte h2{font-size:clamp(26px,3.4vw,34px);margin:42px 0 10px;line-height:1.15}
article.texte h3{font-size:21px;margin:26px 0 6px}
article.texte p{margin:0 0 16px;color:#dfe2ee}
article.texte strong{color:#fff;font-weight:600}
article.texte ul,article.texte ol{margin:0 0 16px 24px;color:#dfe2ee}
article.texte li{margin-bottom:6px}
article.texte table{border-collapse:collapse;width:100%;margin:16px 0;font-size:15px}
article.texte th,article.texte td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
article.texte th{background:rgba(255,255,255,.06);color:#fff;font-weight:600}
article.texte .encart{background:rgba(200,150,43,.08);border-left:3px solid var(--gold);padding:16px 20px;margin:28px 0;border-radius:6px}
article.texte .cta{background:linear-gradient(135deg,rgba(29,54,134,.55),rgba(106,75,214,.4));border:1px solid rgba(231,200,120,.35);color:#fff;padding:28px;border-radius:16px;margin:42px 0}
article.texte .cta strong{font-family:var(--serif);font-size:26px;font-weight:500;line-height:1.15;display:block;margin-bottom:6px}
article.texte .cta p{margin:6px 0;color:#e9ebf5}
article.texte .cta a.b{display:inline-block;background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--bg);padding:12px 22px;border-radius:999px;text-decoration:none;font-weight:600;margin-top:14px;box-shadow:0 10px 30px rgba(200,150,43,.25)}
article.texte .cta a.b:hover{filter:brightness(1.05);transform:translateY(-1px)}
article.texte code{background:rgba(255,255,255,.08);border:1px solid var(--line);padding:2px 6px;border-radius:5px;font-size:.9em;color:var(--gold2)}
article.texte sup{font-size:.7em;line-height:0}
article.texte p.meta a{color:var(--gold2)}
.fil{font-size:13.5px;color:var(--muted);margin:26px auto -18px;max-width:860px;padding:0 4px;letter-spacing:.04em;text-transform:uppercase}
.fil a{color:var(--muted);text-decoration:none}
.fil a:hover{color:var(--gold2)}

/* Pages courtes (merci) */
.merci{max-width:640px;margin:0 auto;text-align:center;padding:40px 0}
.merci h1{font-size:clamp(34px,5vw,54px);font-weight:400}

@media (max-width:720px){
  .barre .conteneur{flex-direction:column;align-items:flex-start;gap:10px}
  .barre nav{justify-content:flex-start;gap:4px 16px}
  .marque .brandlogo{height:40px}.marque .brandtext{font-size:12px;letter-spacing:.22em}
  .carte>h3,.carte>p,.carte>ul,.carte>.prix{margin-left:20px;margin-right:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Compléments pour les pages autonomes (automatisation, confidentialité, merci) */
.deux{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.note{font-size:14px;color:var(--muted);margin-top:14px}
label .fac{font-weight:400;color:var(--muted)}
.date{color:var(--muted);font-size:14px;margin-bottom:30px;letter-spacing:.02em}
.resume{background:rgba(200,150,43,.08);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:18px 22px;margin-bottom:14px;color:#dfe2ee}
main.juridique{padding:56px 0 64px}
main.juridique h1{font-size:clamp(34px,5vw,52px);line-height:1.08;margin-bottom:8px;font-weight:400}
main.juridique h2{font-size:26px;margin:36px 0 8px}
main.juridique p,main.juridique li{color:#dfe2ee}
main.juridique ul{margin:0 0 14px 22px}
body.centre{display:flex;flex-direction:column}
body.centre main{flex:1;display:flex;align-items:center;justify-content:center;padding:60px 20px}
body.centre .carte{padding:40px;max-width:580px;text-align:center;display:block}
body.centre h1{font-size:clamp(30px,4.5vw,44px);line-height:1.1;margin-bottom:14px;font-weight:400}
body.centre p{margin-bottom:14px;color:var(--muted)}
body.centre footer{margin-top:0;text-align:center}
@media (max-width:640px){.deux{grid-template-columns:1fr}}

/* ===== Scène commune (identique à l'accueil) : nébuleuse, étoiles, voile, halo, son ===== */
.stage3d{position:fixed;inset:0;z-index:-3;overflow:hidden;background:#04050b;will-change:transform}
.neb{position:absolute;inset:-10%;background-image:url(/commun/nebuleuse.webp);background-size:cover;background-position:center;will-change:transform;transform-origin:center;animation:nebDrift 50s ease-in-out infinite alternate}
@keyframes nebDrift{0%{transform:scale(1.12) translate(-2%,-1.6%)}100%{transform:scale(1.22) translate(2%,2.2%)}}
#stars{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;display:block;pointer-events:none}
.grade{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(4,5,11,.30) 0%,rgba(4,5,11,.5) 55%,rgba(4,5,11,.74) 100%),radial-gradient(120% 85% at 50% 8%,transparent 34%,rgba(4,5,11,.5) 100%),linear-gradient(120deg,rgba(29,54,134,.14),transparent 42%,rgba(200,150,43,.08))}
.drak-halo{position:fixed;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(200,150,43,.13),transparent 62%);pointer-events:none;mix-blend-mode:screen;transform:translate(-50%,-50%);z-index:5;left:-700px;top:-700px}
@media(hover:none){.drak-halo{display:none}}
.snd{position:fixed;right:20px;bottom:20px;z-index:60;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(8,10,22,.6);backdrop-filter:blur(8px);color:#fff;font-size:18px;cursor:pointer;transition:.3s;display:flex;align-items:center;justify-content:center;font-family:inherit}
.snd:hover{border-color:var(--gold);transform:scale(1.06)}
.snd.on{border-color:var(--gold2);box-shadow:0 0 22px rgba(231,200,120,.5)}
.snd .ping{position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--gold2);opacity:.7;animation:ping 2.6s ease-out infinite}
.snd.on .ping{display:none}
@keyframes ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.5);opacity:0}}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.neb{animation:none}.reveal{opacity:1;transform:none}.snd .ping{animation:none}}