/* PROVOQUE L'EXCEPTION — feuille de style commune
   Système d'unités : 1 "u" = 1 pixel de la maquette de référence.
   --W = largeur de la maquette (941 landing / 1024 contact).
   À la largeur de référence, 1u = 1px ; en dessous, tout se réduit proportionnellement
   (aucun recadrage de la photo), avec des tailles minimales pour la lisibilité. */

@font-face{font-family:"Montserrat";font-weight:400;font-style:normal;font-display:swap;src:url(montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:500;font-style:normal;font-display:swap;src:url(montserrat-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:600;font-style:normal;font-display:swap;src:url(montserrat-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:700;font-style:normal;font-display:swap;src:url(montserrat-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:800;font-style:normal;font-display:swap;src:url(montserrat-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:900;font-style:normal;font-display:swap;src:url(montserrat-latin-900-normal.woff2) format("woff2")}

:root{
  /* Palette échantillonnée dans les maquettes */
  --black:#040004;
  --white:#fbfbfb;
  --gold:#f3cf5e;
  --gold-2:#f2da5b;
  --gold-border:#f1ca54;
  --violet-hi:#ed91f9;
  --violet-mid:#cb51f9;
  --violet-lo:#a204f2;
  --magenta:#ff01ff;
  --icon-purple:#b801f1;
  --trophy:#fbc94c;
  --field:#fdfdfd;
  --ink:#3f3e40;
  --placeholder:#4a494b;
  --red:#fd0531;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  --maxw:calc(var(--W) * 1px);
  --u:calc(min(100vw, var(--maxw)) / var(--W));
  min-height:100vh;
  font-family:"Montserrat",system-ui,sans-serif;
  color:var(--white);
  background-color:#0b0010;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.u{position:absolute}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.stage{width:calc(var(--W) * var(--u));margin:0 auto;padding-top:calc(var(--card-top) * var(--u));padding-bottom:calc(var(--page-bottom) * var(--u))}

/* ---------- Carte + cadre néon ---------- */
.card{
  position:relative;
  margin-left:calc(var(--card-left) * var(--u));
  width:calc(var(--card-w) * var(--u));
  min-height:calc(var(--card-h) * var(--u));
  border-radius:calc(var(--radius) * var(--u));
  background:var(--card-bg);
  box-shadow:var(--glow-out);
  isolation:isolate;
}
.card__clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:-1;background:var(--card-bg)}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  border:calc(var(--neon-w) * var(--u)) solid var(--neon-core);
  box-shadow:var(--glow-ring), var(--glow-in);
}
.photo{position:absolute;left:calc(var(--ph-x) * var(--u));top:calc(var(--ph-y) * var(--u));width:calc(var(--ph-w) * var(--u));height:auto;display:block;user-select:none;-webkit-user-drag:none}

/* ---------- Héro (zone à échelle pure) ---------- */
.hero{position:relative;height:calc(var(--hero-h) * var(--u))}
.line{position:absolute;left:0;right:0;text-align:center;white-space:nowrap;line-height:1}
.t1,.t2{font-weight:800}
.grad-violet{
  background:linear-gradient(180deg,var(--g2a) 0%,var(--g2b) 52%,var(--g2c) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.glowline{position:absolute;height:calc(2 * var(--u));border-radius:2px;
  background:linear-gradient(90deg,rgba(150,0,255,0) 0%,rgba(160,20,255,.75) 9%,rgba(190,70,255,.95) 26%,#fff 40%,#fff 60%,rgba(190,70,255,.95) 74%,rgba(160,20,255,.75) 91%,rgba(150,0,255,0) 100%);
  box-shadow:0 0 calc(4 * var(--u)) calc(2 * var(--u)) rgba(175,40,255,.7),0 0 calc(12 * var(--u)) calc(3 * var(--u)) rgba(150,0,255,.45)}
.sub{font-weight:700;color:#fff}
.gold{color:var(--gold)}

/* ---------- Formulaire (tailles minimales pour mobile) ---------- */
.form{position:relative;padding:0 calc(var(--f-x) * var(--u));display:flex;flex-direction:column}
.field{
  position:relative;display:flex;align-items:center;
  height:max(46px, calc(var(--h) * var(--u)));
  margin-top:calc(var(--mt) * var(--u));
  background:var(--field);border-radius:calc(var(--f-r) * var(--u));
  color:var(--ink);
}
.field:first-child{margin-top:0}
.field .ico{flex:0 0 auto;width:max(20px, calc(var(--ico) * var(--u)));height:max(20px, calc(var(--ico) * var(--u)));margin-left:calc(var(--ico-x) * var(--u));color:#3a3939}
.field input,.field textarea{display:block;
  flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;resize:none;
  font:400 max(16px, calc(var(--ph-size) * var(--u)))/1.2 "Montserrat",sans-serif;letter-spacing:var(--ph-ls);
  color:#1c1b1d;padding:0 calc(14 * var(--u)) 0 0;margin-left:calc(var(--txt-x) * var(--u));
}
.field input::placeholder{color:var(--placeholder);opacity:1}
.field:focus-within{box-shadow:0 0 0 2px rgba(184,1,241,.55)}
.field--tel .ico{margin-left:calc(var(--ico-x) * var(--u))}
.cc{position:relative;display:flex;align-items:center;height:100%;flex:0 0 auto;
  width:calc(var(--cc-w) * var(--u));border-right:1px solid #cecece;margin-left:calc(var(--flag-x) * var(--u))}
.cc .flag{width:max(17px, calc(var(--flag-w) * var(--u)));height:max(12px, calc(var(--flag-h) * var(--u)));border-radius:calc(3 * var(--u));overflow:hidden;display:block}
.cc .chev{width:max(9px, calc(var(--chev-w) * var(--u)));margin-left:calc(var(--chev-x) * var(--u));color:#424042}
.cc select{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:16px}
.field--tel input{margin-left:calc(var(--tel-x) * var(--u))}

/* ---------- Bouton ---------- */
.cta{
  position:relative;display:flex;align-items:center;justify-content:center;gap:calc(var(--arrow-gap) * var(--u));
  margin:calc(var(--btn-mt) * var(--u)) calc(var(--btn-x) * var(--u)) 0;
  width:calc(100% - 2 * var(--btn-x) * var(--u));
  height:max(50px, calc(var(--btn-h) * var(--u)));
  border-radius:calc(var(--btn-r) * var(--u));
  border:calc(2 * var(--u)) solid #f3e4fb;
  background:var(--btn-bg);
  box-shadow:0 0 calc(5 * var(--u)) calc(1 * var(--u)) rgba(160,20,255,.9),0 0 calc(16 * var(--u)) calc(3 * var(--u)) rgba(125,0,245,.6),0 0 calc(36 * var(--u)) calc(4 * var(--u)) rgba(100,0,220,.38),var(--btn-inset);
  color:#fff;cursor:pointer;font:700 max(13px, calc(var(--btn-size) * var(--u)))/1 "Montserrat",sans-serif;letter-spacing:var(--btn-ls);
  text-transform:none;white-space:nowrap;
}
.cta .arrow{width:max(12px, calc(var(--arrow-w) * var(--u)));height:auto;flex:0 0 auto}
.cta:hover{filter:brightness(1.08)}
.cta:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- Pied de réassurance ---------- */
.rule{height:max(1px, calc(var(--rule-h) * var(--u)));background:var(--rule-c)}
.trust{display:grid;align-items:center;grid-template-columns:var(--cols);height:max(40px, calc(var(--trust-h) * var(--u)))}
.trust > div{display:flex;align-items:center;height:100%;white-space:nowrap}
.trust .sep{border-left:1px solid var(--sep-c);height:calc(var(--sep-h) * var(--u))}
.trust svg{flex:0 0 auto;height:auto}
.trust .txt{font-weight:600;line-height:1.28;font-size:max(10px, calc(var(--tr-size) * var(--u)));letter-spacing:-.01em}
.trust .small{font-weight:600;font-size:max(10px, calc(var(--tr2-size) * var(--u)));letter-spacing:-.02em;line-height:1.38;text-align:center}
.trust .small .g{color:var(--gold-2)}

.legal{font-size:max(10px, calc(13 * var(--u)));color:rgba(255,255,255,.42);text-align:center;line-height:1.4}
.legal a{color:inherit}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#160022;border:1px solid #b801f1;color:#fff;padding:12px 18px;border-radius:12px;font:500 14px/1.4 "Montserrat",sans-serif;box-shadow:0 0 20px rgba(150,0,255,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:50;max-width:90vw;text-align:center}
.toast.show{opacity:1}

/* Tablette / ordinateur : la composition reste celle de la maquette, centrée */
@media (min-width: 1100px){ body{background-size:cover} }

[data-ico]{display:block}
[data-ico] svg{display:block;width:100%;height:100%}
.trust [data-ico] svg{height:auto}

/* Petits écrans : la bande de réassurance se resserre au lieu de déborder */
@media (max-width:500px){
  .trust{grid-template-columns:auto auto auto;justify-content:space-between;column-gap:4px}
  .trust > div{padding-left:6px!important;padding-right:2px}
  .trust > div:first-child{padding-left:2px!important}
  .trust .txt,.trust .small{margin-left:6px!important}
}

.field textarea{height:1.3em;line-height:1.3;overflow:hidden;align-self:center}
.field textarea::placeholder{color:var(--placeholder);opacity:1}
@media (max-width:600px){
  .field--long{height:auto;min-height:56px;padding:9px 0}
  .field--long textarea{height:2.6em;font-size:16px}
  .field--long textarea::placeholder{font-size:13.5px;line-height:1.35}
  .field .ico{align-self:center}
}