/* ✦ 11/09/2026 — ORION ESSENCE, deuxième palette (Séléna : « évite le blanc et le noir, essaye
   l'argenté, l'or sur du noir »).
   Ce que font les maisons de soin haut de gamme : un ancrage TRÈS sombre mais jamais noir pur,
   un or champagne pour ce qui compte, un argent froid en second, et une écriture couleur parchemin
   plutôt que blanche. Rien ici n'est #000000 ni #FFFFFF.
     fond      #14110F  brun-noir chaud (le noir pur écrase, celui-ci respire)
     surface   #1C1815  les blocs
     carte     #221D18  les cases du catalogue et les champs
     trait     #3A322B  les filets
     or        #C9A227  l'or, pour les traits et les survols
     champagne #D7C69D  l'or clair, pour les titres de section
     argent    #B9BDC0  le second métal, pour les liens
     texte     #E3DCCD  l'écriture, parchemin — jamais blanche
     doux      #A2988A  les mentions */
:root {
  --fond:#1E1730; --surface:#271E3E; --carte:#2E2447; --trait:#4A3C6B;
  --or:#B49BF5; --champagne:#D9C7F53; --argent:#C3B4E8; --texte:#E0CFFF; --doux:#B0A3C9;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--fond); color:var(--texte); font-family:'Jost',-apple-system,Segoe UI,Arial,sans-serif;
       font-weight:300; font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:'Cormorant Garamond',Georgia,serif; font-weight:300; color:var(--champagne); line-height:1.2; }
a { color:inherit; }
.bande { max-width:1080px; margin:0 auto; padding:0 26px; }

/* ── L'en-tête ── */
.haut { background:var(--surface); border-bottom:1px solid var(--trait); }
.haut .bande { display:flex; align-items:center; justify-content:space-between; padding:22px 26px; flex-wrap:wrap; gap:14px; }
.marque { font-family:'Cormorant Garamond',serif; font-size:19px; letter-spacing:0.42em; color:var(--champagne);
          text-transform:uppercase; text-decoration:none; }
nav { display:flex; gap:22px; flex-wrap:wrap; }
nav a { font-size:14px; letter-spacing:0.1em; color:var(--doux); text-decoration:none; }
nav a:hover, nav a.actif { color:var(--or); }

/* ── Le bandeau de tête ── */
.tete { background:linear-gradient(180deg,var(--surface) 0%,var(--fond) 100%); padding:0 0 88px; }
.tete h1 { font-size:clamp(36px,6vw,64px); margin:56px 0 24px; max-width:18ch; color:var(--texte); }
.tete p { color:var(--doux); font-size:clamp(16px,2.1vw,19px); max-width:58ch; }
.filet { width:88px; height:1px; background:var(--or); margin:34px 0 0; }

section { padding:78px 0; }
section + section { border-top:1px solid var(--trait); }
h2 { font-size:clamp(27px,4vw,38px); margin:0 0 10px; }
.sur { font-size:12.5px; letter-spacing:0.32em; text-transform:uppercase; color:var(--or); margin:0 0 16px; }
.intro { max-width:62ch; margin:0 0 40px; color:var(--doux); }

.grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:1px; background:var(--trait); border:1px solid var(--trait); }
.case { background:var(--carte); padding:26px 24px; }
.case h3 { font-size:22px; margin:0 0 8px; color:var(--champagne); }
.case p { font-size:15.5px; color:var(--doux); line-height:1.7; }
.case ul { margin:10px 0 0 18px; font-size:15px; color:var(--doux); }
.case li { margin:0 0 4px; }

.etapes { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:32px; }
.etape { border-top:1px solid var(--or); padding:20px 0 0; }
.etape span { font-family:'Cormorant Garamond',serif; font-size:32px; color:var(--or); display:block; margin:0 0 6px; }
.etape h3 { font-size:20px; margin:0 0 8px; }
.etape p { font-size:15.5px; color:var(--doux); }
.etape + div p { color:var(--doux); }

.appel { background:var(--surface); }
.appel .bande { text-align:center; }
.appel .intro { margin-left:auto; margin-right:auto; }
.bouton { display:inline-block; background:var(--or); color:#1E1730; text-decoration:none;
          padding:15px 32px; font-size:15px; letter-spacing:0.08em; margin:22px 8px 0; border:1px solid var(--or); }
.bouton.clair { background:transparent; color:var(--champagne); border:1px solid var(--trait); }
.bouton:hover { background:var(--champagne); color:#1E1730; border-color:var(--champagne); }
.bouton.clair:hover { border-color:var(--or); color:var(--or); background:transparent; }

/* ── Le formulaire ── */
form { max-width:640px; }
label { display:block; font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--or); margin:22px 0 6px; }
input, select, textarea { width:100%; background:var(--carte); border:1px solid var(--trait); color:var(--texte);
                          font-family:inherit; font-size:16px; padding:13px 14px; }
input::placeholder, textarea::placeholder { color:#8C7FA8; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--or); }
textarea { min-height:130px; resize:vertical; }
.aide { font-size:14px; color:var(--doux); margin:8px 0 0; }

footer { background:var(--surface); border-top:1px solid var(--trait); color:var(--doux); padding:56px 0; font-size:14.5px; }
footer a { color:var(--argent); text-decoration:none; border-bottom:1px solid rgba(180,155,245,0.45); }
footer a:hover { color:var(--or); }
.contact { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:24px; margin:0 0 30px; }
.contact strong { display:block; color:var(--champagne); font-weight:400; font-family:'Cormorant Garamond',serif;
                  font-size:13px; letter-spacing:0.3em; text-transform:uppercase; margin:0 0 6px; }
.legal { border-top:1px solid var(--trait); padding:22px 0 0; font-size:13px; color:#9A8DB5; }
.legal a { border:0; color:var(--doux); }