/*
Theme Name: aresset
Description: Thème du portail Aresset. Présentation uniquement. Toute la logique métier vit dans l'extension Aresset Core.
Version: 0.1.0
Author: Aresset
Requires PHP: 8.1
Text Domain: aresset
*/

:root{
  --sky-high:#1743C3;
  --sky:#3E8FEE;
  --sky-low:#8FD3F4;
  --horizon:#FFC46B;
  --sun:#FFDD57;
  --coral:#FF5B6E;
  --ink:#08152F;
  --ink-soft:#4A5C7A;

  --glass:rgba(255,255,255,.58);
  --edge:rgba(255,255,255,.75);
  --shade:0 20px 60px -18px rgba(8,21,47,.42), 0 2px 8px -2px rgba(8,21,47,.14);

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;

  --r:26px;
  --r-sm:16px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:var(--body);
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background:var(--sky);
  min-height:100vh;
}

a{color:inherit}

/* ---------- ciel ---------- */
.atmos{position:fixed;inset:0;z-index:0;overflow:hidden}
.atmos::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(60% 48% at 78% 96%, var(--sun) 0%, rgba(255,221,87,0) 62%),
    radial-gradient(72% 54% at 34% 104%, var(--horizon) 0%, rgba(255,196,107,0) 66%),
    radial-gradient(50% 40% at 88% 74%, var(--coral) 0%, rgba(255,91,110,0) 58%),
    linear-gradient(178deg, var(--sky-high) 0%, var(--sky) 42%, var(--sky-low) 78%, #FFE9C4 100%);
  animation:aresset-drift 34s ease-in-out infinite alternate;
}
@keyframes aresset-drift{
  from{transform:translate3d(-1.5%,-1%,0) scale(1.04)}
  to{transform:translate3d(1.5%,1.5%,0) scale(1.09)}
}
.atmos::after{
  content:"";position:absolute;inset:0;opacity:.16;
  background:repeating-linear-gradient(101deg,rgba(255,255,255,.9) 0 1px,transparent 1px 190px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 62%,transparent 92%);
  mask-image:linear-gradient(180deg,transparent,#000 24%,#000 62%,transparent 92%);
}

.wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 22px}

/* ---------- verre ---------- */
.g{
  background:var(--glass);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
  border-radius:var(--r);
  box-shadow:var(--shade), inset 0 1px 0 var(--edge), inset 0 0 0 1px rgba(255,255,255,.28);
}

/* ---------- navigation ---------- */
.nav{position:sticky;top:14px;z-index:30;margin-top:14px}
.nav .bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 10px 9px 20px;border-radius:100px}
.mark{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.mark i{font-style:normal;color:var(--coral)}
.readout{font-family:var(--mono);font-size:11px;color:var(--ink-soft);display:flex;gap:20px}
.readout b{color:var(--ink);font-weight:500}
@media(max-width:1080px){.readout{display:none}}

.links{display:flex;align-items:center;gap:6px;flex:none}
.links a{
  font-size:13px;font-weight:500;color:var(--ink);text-decoration:none;
  padding:8px 12px;border-radius:100px;
  transition:background .16s ease;
}
.links a:hover{background:rgba(255,255,255,.6)}
.links a.quiet{color:var(--ink-soft);font-size:12px}
.links a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:640px){
  .links a{padding:8px 9px;font-size:12px}
  .links a.quiet{display:none}
}
.cta{
  font-family:var(--body);font-weight:600;font-size:13px;
  background:var(--ink);color:#fff;border:0;border-radius:100px;
  padding:10px 18px;cursor:pointer;text-decoration:none;display:inline-block;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.4),box-shadow .18s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(8,21,47,.6)}
.cta:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:820px){.readout{display:none}}

/* ---------- hero ---------- */
.hero{padding:82px 0 44px;text-align:center}
.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding:7px 15px;border-radius:100px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 0 rgba(255,221,87,.9);animation:aresset-pulse 2.4s ease-out infinite}
@keyframes aresset-pulse{70%{box-shadow:0 0 0 9px rgba(255,221,87,0)}100%{box-shadow:0 0 0 0 rgba(255,221,87,0)}}

.hero h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(40px,6.4vw,78px);
  line-height:.98;letter-spacing:-.035em;
  color:#fff;margin:24px auto 0;max-width:15ch;
  text-shadow:0 2px 30px rgba(8,21,47,.28);
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--sun),var(--horizon) 55%,var(--coral));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{max-width:52ch;margin:22px auto 0;color:rgba(255,255,255,.94);font-size:18px;text-shadow:0 1px 14px rgba(8,21,47,.3)}

/* ---------- annunciator ---------- */
.hud{max-width:680px;margin:44px auto 0;padding:16px;border-radius:var(--r)}
.annunciator{display:flex;gap:8px}
.lamp{
  flex:1;border-radius:var(--r-sm);
  background:rgba(255,255,255,.34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  padding:13px 8px 11px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);text-align:center;
  transition:background .45s cubic-bezier(.2,.9,.3,1), color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.2,.9,.3,1.5);
}
.lamp.lit{
  background:linear-gradient(180deg,var(--sun),var(--horizon));
  color:#3A2500;transform:translateY(-2px);
  box-shadow:0 0 24px rgba(255,206,90,.7), inset 0 1px 0 rgba(255,255,255,.85);
}
.hud .legend{font-family:var(--mono);font-size:11px;color:var(--ink-soft);text-align:center;margin-top:13px}
.annunciator.mini{gap:4px}
.annunciator.mini .lamp{padding:5px 3px 4px;font-size:8px;letter-spacing:.06em;border-radius:8px}
.annunciator.mini .lamp.lit{transform:none;box-shadow:0 0 12px rgba(255,206,90,.55)}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;padding:34px 0 90px}
.b-roll{grid-column:span 12}
.b-wide{grid-column:span 12}
.b-file{grid-column:span 5}
.b-money{grid-column:span 7}
.b-clerk{grid-column:span 7}
@media(max-width:980px){.b-file,.b-clerk,.b-money{grid-column:span 12}}

/* ---------- l'examen, en quatre temps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{
  background:rgba(255,255,255,.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
  border-radius:var(--r-sm);padding:18px;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.4);
}
.step:hover{transform:translateY(-3px)}
.stepn{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--ink-soft);margin-bottom:8px;
}
.step h3{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.02em;line-height:1.2;margin-bottom:7px}
.step p{font-size:12.5px;color:var(--ink-soft);line-height:1.5}

/* ---------- le barème ---------- */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
@media(max-width:640px){.ladder{grid-template-columns:1fr}}
.rung{
  background:rgba(255,255,255,.42);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
  border-radius:var(--r-sm);padding:18px;
}
.rung.hot{background:linear-gradient(165deg,var(--sun),var(--horizon));box-shadow:0 14px 34px -14px rgba(255,150,40,.75)}
.rungn{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.rung.hot .rungn{color:#7A5200}
.rungv{
  font-family:var(--display);font-weight:800;font-size:40px;
  letter-spacing:-.04em;line-height:1;margin:8px 0 8px;
}
.rungv span{font-size:17px;font-weight:700;letter-spacing:-.02em}
.rung.hot .rungv{color:#3A2500}
.rungw{font-size:12.5px;color:var(--ink-soft);line-height:1.45}
.rung.hot .rungw{color:#5A3D00}

/* ---------- les portes ---------- */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
@media(max-width:900px){.doors{grid-template-columns:1fr}}
.door{
  background:rgba(255,255,255,.42);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
  border-radius:var(--r-sm);padding:20px;
  display:flex;flex-direction:column;
}
.doorn{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.door h3{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.03em;margin:8px 0 9px;line-height:1.1}
.door p{font-size:13px;color:var(--ink-soft);line-height:1.5;flex:1}
.door .cta{margin-top:16px;align-self:flex-start}

.empty{
  font-size:13.5px;color:var(--ink-soft);margin:0;
  padding:18px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.empty strong{color:var(--ink)}

.pane{padding:24px}
.panehead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px}
.panehead h2{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.03em}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);background:rgba(255,255,255,.5);padding:5px 10px;border-radius:100px}
.note{color:var(--ink-soft);font-size:13.5px;max-width:62ch;margin-bottom:18px}

/* ---------- filtres ---------- */
.filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.chip{
  font-family:var(--body);font-weight:500;font-size:12.5px;
  background:rgba(255,255,255,.46);color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
  border:0;border-radius:100px;padding:7px 14px;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.5),background .16s;
}
.chip:hover{transform:translateY(-1px);background:rgba(255,255,255,.72)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- roll ---------- */
.rows{display:flex;flex-direction:column;gap:7px}
.row{
  display:grid;grid-template-columns:96px 1fr 110px 68px 172px;
  gap:14px;align-items:center;
  background:rgba(255,255,255,.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
  border-radius:var(--r-sm);padding:13px 16px;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.4), background .18s, box-shadow .18s;
}
.row:hover{transform:translateY(-2px) scale(1.004);background:rgba(255,255,255,.72);box-shadow:0 14px 30px -14px rgba(8,21,47,.5)}
.row:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.id{font-family:var(--mono);font-weight:500;font-size:13px}
.dom{font-weight:600;font-size:14px;display:flex;align-items:center;gap:9px}
.dom .dotk{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.dom small{display:block;color:var(--ink-soft);font-size:11.5px;font-weight:400;font-family:var(--mono)}
.meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
.free{font-family:var(--mono);font-size:11px;letter-spacing:.05em}
.free.now{color:#0B7A48}
.free.later{color:var(--ink-soft)}
@media(max-width:900px){
  .row{grid-template-columns:1fr 1fr;gap:9px}
  .row .annunciator{grid-column:1/-1}
}

/* ---------- fiche ---------- */
.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(8,21,47,.09);font-size:13px}
.kv:last-child{border-bottom:0}
.kv dt{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.kv dd{font-family:var(--mono);font-size:12px;font-weight:500}
.kv dd.warn{color:var(--coral)}

.manifest{list-style:none;margin-top:4px}
.manifest li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(8,21,47,.09);font-size:13px}
.manifest li:last-child{border-bottom:0}
.tickmark{
  font-family:var(--mono);font-size:9px;flex:none;margin-top:2px;
  background:linear-gradient(180deg,var(--sun),var(--horizon));color:#3A2500;
  padding:2px 6px;border-radius:100px;
}
.manifest small{display:block;color:var(--ink-soft);font-size:11.5px}
.when{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-soft);flex:none}

/* ---------- clerc ---------- */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:720px){.three{grid-template-columns:1fr}}
.slot{
  background:rgba(255,255,255,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
  border-radius:var(--r-sm);padding:16px;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.4);
}
.slot:hover{transform:translateY(-3px)}
.slot.first{background:linear-gradient(165deg,var(--sun),var(--horizon));box-shadow:0 14px 34px -14px rgba(255,150,40,.8)}
.slotnum{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.slot.first .slotnum{color:#7A5200}
.slot .id{font-size:16px;margin:5px 0 6px}
.slot p.why{font-size:12.5px;color:var(--ink-soft);line-height:1.45}
.slot.first p.why{color:#5A3D00}

/* ---------- pied ---------- */
.site-foot{padding:0 0 44px}
.foot{padding:18px 24px;border-radius:100px;display:flex;justify-content:center}
.foot p{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);text-align:center}
.foot b{color:var(--ink);font-weight:500}

/* ---------- apparition ---------- */
.rise{opacity:0;transform:translateY(18px)}
.rise.in{opacity:1;transform:none;transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.3,1)}

.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;word-wrap:normal;
}

/* ---------- formulaires ---------- */
.b-form{grid-column:span 7}
@media(max-width:980px){.b-form{grid-column:span 12}}

.subhead{
  font-family:var(--display);font-weight:700;font-size:17px;
  letter-spacing:-.02em;margin:26px 0 6px;
}

.notice{
  font-size:13px;padding:11px 14px;border-radius:var(--r-sm);margin-bottom:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.notice.ok{background:linear-gradient(165deg,var(--sun),var(--horizon));color:#4A3200}
.notice.no{background:rgba(255,91,110,.16);color:#8A1220;box-shadow:inset 0 0 0 1px rgba(255,91,110,.4)}

.form .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.form .pair{grid-template-columns:1fr}}

.form label{display:block;margin-bottom:2px}
.form label > span{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px;
}
.form label > span i{color:var(--coral);font-style:normal}

.form input[type=text],
.form input[type=email],
.form input[type=url],
.form input[type=date],
.form input[type=number],
.form select{
  width:100%;font-family:var(--body);font-size:14px;color:var(--ink);
  background:rgba(255,255,255,.62);
  border:0;border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);
  padding:11px 13px;
  transition:box-shadow .16s ease,background .16s ease;
}
.form input:focus,
.form select:focus{
  outline:0;background:rgba(255,255,255,.86);
  box-shadow:inset 0 0 0 2px var(--ink);
}
.form input[type=file]{
  width:100%;font-family:var(--mono);font-size:12px;color:var(--ink-soft);
  background:rgba(255,255,255,.4);border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
  padding:10px 12px;
}
.form input[type=file]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.form label.inline{display:flex;align-items:center;gap:10px;align-self:end;padding:11px 0}
.form label.inline > span{margin:0}
.form input[type=checkbox]{width:18px;height:18px;accent-color:var(--ink)}

.form small{
  display:block;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-soft);margin-top:5px;
}
.form small.on-file{color:#0B7A48}

.cta.wide{
  width:100%;text-align:center;margin-top:20px;padding:14px 18px;font-size:14px;
}

.fine{
  font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);
  text-align:center;margin-top:12px;
}

/* Pot de miel. Retire du flux plutot que display:none : certains automates
   ignorent precisement ce qui est masque ainsi. */
.hp{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}

/* ---------- examen ---------- */
.countdown{
  font-family:var(--mono);font-size:26px;font-weight:500;
  letter-spacing:-.01em;color:var(--ink);
  padding:12px 0 4px;font-variant-numeric:tabular-nums;
}
.countdown.tight{color:var(--coral)}

/* ---------- roll ---------- */
label.chip{cursor:pointer;user-select:none}
label.chip:has(input:checked){background:var(--ink);color:#fff;box-shadow:none}
.chip.go{
  background:var(--ink);color:#fff;box-shadow:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;
}
.chip.go:hover{background:#132C5E}
.meta.revealed{
  font-weight:600;color:var(--ink);
  font-family:var(--body);font-size:13px;
}
form.filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;align-items:center}

.questions{
  list-style:none;counter-reset:q;margin:14px 0 22px;
}
.questions li{
  counter-increment:q;position:relative;
  padding:14px 16px 14px 46px;margin-bottom:7px;
  background:rgba(255,255,255,.46);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
  border-radius:var(--r-sm);
  font-size:14px;line-height:1.5;
}
.questions li::before{
  content:counter(q,decimal-leading-zero);
  position:absolute;left:16px;top:14px;
  font-family:var(--mono);font-size:11px;color:var(--ink-soft);
}


@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .rise{opacity:1;transform:none}
}