/* styles.css */

/* ---------- Design tokens ---------- */
:root{
  --bg-blue: #e9f2ff;
  --bg-orange: #ffe9d6;
  --ink-900:#0f172a;
  --ink-700:#334155;
  --ink-500:#64748b;
  --ink-300:#94a3b8;
  --white:#ffffff;

  --primary:#2d6cdf;
  --primary-600:#2157bd;
  --accent:#fb8c00;
  --accent-700:#e57700;
  --ring:#90caf9;

  --radius:16px;
  --shadow:0 10px 30px rgba(16,24,40,.08);

  --bar-height:3px;
  --bar-color:#2d6cdf;

  --success:#22c55e;
  --success-700:#16a34a;
  --surface-100: rgba(255,255,255,.9);
  --surface-200: rgba(255,255,255,.72);
  --surface-border: rgba(255,255,255,.5);
  --surface-shadow: 0 24px 60px rgba(15,23,42,.14);
  --surface-glow-blue: rgba(45,108,223,.12);
  --surface-glow-orange: rgba(251,140,0,.1);
  --input-bg: rgba(255,255,255,.78);
  --input-border: rgba(148,163,184,.28);
  --input-border-strong: rgba(45,108,223,.35);

  --glass-border:rgba(255,255,255,.55);
  --glass-fill:rgba(255,255,255,.32);
  --glass-fill-soft:rgba(255,255,255,.18);
  --line-blue:rgba(45,108,223,.08);
  --line-orange:rgba(251,140,0,.06);
}

body{ margin:0; }
body.hydrated{}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  position:relative;
  min-height:100%;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink-900);
  font-size: 18px;
  line-height:1.6;
  background:
    radial-gradient(1100px 640px at 12% 18%, rgba(45,108,223,.34), transparent 62%),
    radial-gradient(1200px 720px at 88% 12%, rgba(251,140,0,.28), transparent 60%),
    radial-gradient(1600px 960px at 50% 108%, rgba(21,94,164,.22), transparent 72%),
    linear-gradient(200deg, #edf3ff 0%, #ffe4c9 56%, #fef2e8 96%);
  background-repeat:no-repeat;
  overflow-x:hidden;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:-10% -12% -6%;
  pointer-events:none;
  z-index:0;
}

/* ---------- Intro loader ---------- */
#introLoader{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(32px, 6vw, 72px);
  background:
    radial-gradient(120% 110% at 50% 0%, rgba(13,37,69,.65), rgba(13,37,69,.85)),
    linear-gradient(160deg, rgba(45,108,223,.18), rgba(251,140,0,.16));
  z-index: 10000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .65s ease, visibility .65s ease;
}
#introLoader.visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
body.intro-active #introLoader{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
#introLoader.done{
  opacity:0;
  visibility:hidden;
}
.intro-loader__inner{
  text-align:center;
  color: var(--white);
}
#introLoader .logo-mark{
  width: clamp(140px, 18vw, 220px);
  height:auto;
  margin: 0 auto clamp(18px, 2.8vw, 28px);
}
#introLoader .logo-base{
  fill:none;
  stroke:#fb8c00;
  stroke-width:8;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.4;
}
#introLoader .logo-spark{
  fill:none;
  stroke:#ffe28a;
  stroke-width:8;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 0 rgba(255,196,96,.75));
  animation: sparkDraw 5s ease-in-out forwards, sparkGlow 5s ease-in-out forwards;
  animation-play-state: paused;
}
#introLoader.visible .logo-spark{
  animation-play-state: running;
}
#introLoader .brand-word{
  display:block;
  font-family:"DM Sans", Inter, system-ui, sans-serif;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  font-weight:600;
  opacity:0;
}
#introLoader.visible .brand-word{
  animation: brandReveal 2.6s ease forwards 1.2s;
}
@keyframes sparkDraw{
  from{ stroke-dashoffset: 1; }
  to{ stroke-dashoffset: 0; }
}
@keyframes sparkGlow{
  0%{ filter: drop-shadow(0 0 0 rgba(255,196,96,0)); }
  25%{ filter: drop-shadow(0 0 12px rgba(255,200,96,.45)); }
  50%{ filter: drop-shadow(0 0 18px rgba(255,210,120,.65)); }
  100%{ filter: drop-shadow(0 0 6px rgba(255,210,120,.3)); }
}
@keyframes brandReveal{
  0%{ opacity:0; transform: translateY(12px); }
  100%{ opacity:1; transform: translateY(0); }
}

main{
  transition: opacity .6s ease, transform .6s ease;
}
body.intro-active main{
  opacity:0;
  transform: translateY(18px);
  pointer-events:none;
}
body:not(.intro-active) main{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  #introLoader .logo-spark,
  #introLoader .brand-word{
    animation: none !important;
  }
}
body::before{
  background:
    radial-gradient(38% 50% at 20% 22%, rgba(45,108,223,.42), transparent 70%),
    radial-gradient(42% 52% at 78% 20%, rgba(251,140,0,.35), transparent 72%),
    radial-gradient(34% 38% at 48% 80%, rgba(21,94,164,.28), transparent 75%);
  opacity:.78;
  mix-blend-mode:screen;
}

body::after{
  background-image:
    linear-gradient(120deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,0) 58%),
    repeating-linear-gradient(135deg, rgba(45,108,223,.14), rgba(45,108,223,.14) 1px, transparent 1px, transparent 16px),
    repeating-linear-gradient(135deg, rgba(251,140,0,.12), rgba(251,140,0,.12) 1px, transparent 1px, transparent 28px);
  opacity:.68;
  mix-blend-mode:soft-light;
}

main.container{
  position:relative;
  z-index:1;
}

main.container::before,
main.container::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:32px;
  border:1px solid var(--glass-border);
  background:linear-gradient(140deg, var(--glass-fill), var(--glass-fill-soft));
  box-shadow:0 30px 70px rgba(15,23,42,.18);
  z-index:-1;
}

main.container::before{
  top:-90px;
  right:-170px;
  width:360px;
  height:440px;
  transform:rotate(6deg);
}

main.container::after{
  bottom:-120px;
  left:-150px;
  width:320px;
  height:420px;
  transform:rotate(-8deg);
  background:linear-gradient(165deg, rgba(255,255,255,.38), rgba(255,255,255,.08));
}

@supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)){
  main.container::before,
  main.container::after{
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
}

/* ---------- Layout ---------- */
.container--wide{
  max-width: min(1600px, 96vw);
}

/* === OnlyOffice: le parent doit avoir une hauteur pour que l'iframe 100% fonctionne === */
#editor{
  position: relative;
  width: 100%;
  height: 100%;
}
@media (min-width:1280px){
  #editor{ height: 88vh; }
}
.card.editor-card{
  padding: 0;
  overflow: hidden;
  height: 82vh;
  min-height: 600px;
  background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 28px 55px rgba(15,23,42,.16);
}
.card.editor-card > *{
  position: relative;
  z-index: 1;
}

.hero{
  text-align:center;
  margin-bottom: 24px;
}
.hero h1{
  font-family: "DM Sans", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing:.2px;
  margin: 0 0 6px;
}
.hero p{
  color: var(--ink-500);
  margin:0 0 10px;
}

/* ---------- Cards ---------- */
.card{
  position: relative;
  border-radius: calc(var(--radius) + 4px);
  padding: clamp(20px, 2.2vw, 28px);
  margin: 22px 0;
  background: linear-gradient(160deg, var(--surface-100), var(--surface-200));
  border: 1px solid var(--surface-border);
  box-shadow: var(--surface-shadow);
  overflow: hidden;
}
.card > *{
  position: relative;
  z-index: 1;
}
.card:not(.editor-card)::before,
.card:not(.editor-card)::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events:none;
  z-index: 0;
}
.card:not(.editor-card)::before{
  background:
    linear-gradient(135deg, var(--surface-glow-blue) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(300deg, var(--surface-glow-orange) 0%, rgba(255,255,255,0) 60%);
  opacity: .95;
}
.card:not(.editor-card)::after{
  background:
    radial-gradient(60% 55% at 82% 0%, rgba(255,255,255,.6), transparent 65%),
    radial-gradient(40% 35% at 12% 100%, rgba(255,255,255,.35), transparent 70%);
  opacity: .7;
}
@supports (backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px)){
  .card{
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}

.card h2{
  margin: 0 0 14px;
  font-weight: 600;
  letter-spacing:.25px;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  color: var(--ink-900);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

/* ---------- Form controls ---------- */
.row{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
}

input[type="file"]{
  display:inline-block;
  padding: 10px 12px;
  border:1px dashed rgba(148,163,184,.45);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
input[type="file"]:hover{
  border-color: var(--input-border-strong);
  background: rgba(255,255,255,.85);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input:not([type]),
select{
  display:inline-block;
  width:100%;
  padding:10px 14px;
  border:1px solid var(--input-border);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--ink-700);
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.row input[type="text"],
.row input[type="email"],
.row input[type="password"],
.row input[type="search"],
.row input[type="tel"],
.row input[type="url"],
.row input[type="number"],
.row input:not([type]),
.row select{
  flex:1 1 220px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input:not([type]):focus,
select:focus{
  border-color: var(--input-border-strong);
  box-shadow: 0 0 0 3px rgba(45,108,223,.18);
  background: rgba(255,255,255,.9);
  outline:none;
}

textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--input-border);
  border-radius: 14px;
  background: var(--input-bg);
  font: inherit;
  resize: vertical;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
textarea:focus{
  border-color: var(--input-border-strong);
  box-shadow: 0 0 0 3px rgba(45,108,223,.18);
  background: rgba(255,255,255,.9);
}

/* ---------- Buttons ---------- */
.btn{
  appearance: none;
  border:0;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 2px 8px rgba(16,24,40,.08);
  color:#fff;
}
.btn:active{ transform: translateY(1px); }

.btn.primary{ background: var(--primary); }
.btn.primary:hover{ background: var(--primary-600); }

.btn.accent{ background: var(--accent); }
.btn.accent:hover{ background: var(--accent-700); }

.btn.success{ background: var(--success); }
.btn.success:hover{ background: var(--success-700); }

/* ---------- Status & result ---------- */
.status{
  min-height: 1.4em;
  color: var(--ink-500);
  margin: 8px 0 2px;
}
.status.success{
  display:flex;
  align-items:center;
  gap:8px;
  background:#e6f4ea;
  color:#1b5e20;
  padding:8px 12px;
  border-radius:6px;
  font-weight:500;
}
.status.success .status-extra,
.status.success .status-exp{
  display:block;
  margin-top:4px;
  font-size:0.85em;
  color:#2e7d32;
}
.status.success .status-icon{
  font-size:1.1em;
}
.status.error{
  background:#fdecea;
  color:#c62828;
  padding:8px 12px;
  border-radius:6px;
}
.result a{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
  color: var(--primary);
  font-weight:600;
}
.result a:hover{ text-decoration: underline; }

/* ---------- Footer ---------- */
.footnote{
  text-align:center;
  margin-top: 22px;
  color: var(--ink-300);
}

/* ---------- Loading bar (top) ---------- */
#loadingBar{
  position: fixed;
  top:0; left:0; right:0;
  height: var(--bar-height);
  background: transparent;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
#loadingBar.active{ opacity: 1; }
#loadingBar .bar{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  background: linear-gradient(90deg, var(--bar-color), #fb8c00);
  box-shadow: 0 0 12px rgba(45,108,223,.35);
  transform-origin: left center;
  transition: width .2s ease;
}

input.readonly{background:#f4f6fa;color:#555;cursor:not-allowed;}

/* ---------- Responsive background tweaks ---------- */
@media (max-width: 1024px){
  main.container::before{
    top:-70px;
    right:-90px;
    width:300px;
    height:360px;
    transform:rotate(4deg);
  }
  main.container::after{
    left:-110px;
    bottom:-80px;
    width:260px;
    height:340px;
    transform:rotate(-6deg);
  }
}

@media (max-width: 768px){
  body{
    background:
      radial-gradient(900px 540px at 20% 10%, rgba(45,108,223,.2), transparent 60%),
      radial-gradient(800px 520px at 100% 0%, rgba(251,140,0,.16), transparent 55%),
      linear-gradient(200deg, #f7fbff 0%, #fff5ed 65%, #ffffff 95%);
  }
  body::after{ opacity:.35; }
  main.container::before,
  main.container::after{ display:none; }
}