/* ============================================================
   Twinstars Works — charte d'identité visuelle v1.0
   Navy #0E1A2B · Or ambré #E3A93C · Or foncé #C08A2E
   Crème #F5F1E8 · Gris chaud #8A8578 · Inter Medium / Regular
   ============================================================ */
:root{
  --navy:#0E1A2B;
  --navy-70:#1B2B40;
  --or:#E3A93C;
  --or-fonce:#C08A2E;
  --creme:#F5F1E8;
  --gris:#8A8578;
  --gris-clair:#B5B0A4;
  --max:1140px;
  --pad:clamp(20px,5vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--creme);
  color:var(--navy);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
img,svg{display:block;max-width:100%}
a{color:inherit}

/* --- type scale ------------------------------------------------ */
.eyebrow{
  font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--or-fonce);margin:0 0 26px;
}
.eyebrow--sur-navy{color:var(--or)}
h1,h2,h3{font-weight:500;letter-spacing:-.018em;line-height:1.12;margin:0}
h1{font-size:clamp(38px,7vw,72px)}
h2{font-size:clamp(28px,4.4vw,44px)}
h3{font-size:19px;letter-spacing:-.005em;line-height:1.35}
.lede{font-size:clamp(17px,2.1vw,21px);line-height:1.6;color:#39485C;max-width:60ch}
.mono-label{
  font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gris);
}

/* --- structure -------------------------------------------------- */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.qa-liste{margin-top:46px;border-top:1px solid rgba(14,26,43,.14)}
.qa{border-bottom:1px solid rgba(14,26,43,.14)}
.qa summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;transition:color .18s ease}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--or-fonce)}
.qa summary h3{display:inline;font-size:17.5px;font-weight:500;letter-spacing:-.005em}
.qa .signe{position:absolute;right:6px;top:50%;width:13px;height:13px;margin-top:-6px;transition:transform .22s ease}
.qa[open] .signe{transform:rotate(45deg)}
.qa p{margin:0 0 26px;padding-right:44px;font-size:15.5px;line-height:1.68;color:#4A5769;max-width:76ch}
@media(max-width:640px){.qa p{padding-right:0}}
.band{padding:clamp(72px,10vw,124px) 0}
.band--navy{background:var(--navy);color:var(--creme)}
.band--navy .lede{color:#AFBACA}
.rule{height:1px;background:rgba(14,26,43,.14);border:0;margin:0}

/* --- logo ------------------------------------------------------- */
.lockup{display:flex;align-items:center;gap:18px}
.lockup__mark{width:52px;height:52px;flex:none}
.lockup__bar{width:1px;align-self:stretch;background:currentColor;opacity:.28}
.lockup__name{line-height:1}
.lockup__t1{
  display:block;font-size:26px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
}
.lockup__t2{
  display:block;font-size:11.7px;font-weight:400;letter-spacing:.46em;text-transform:uppercase;
  color:var(--gris);margin-top:5px;
}
.band--navy .lockup__t2{color:var(--gris-clair)}
.mark-rays{fill:var(--or)}
.mark-trail{fill:var(--or-fonce)}
.band--navy .mark-trail,.on-navy .mark-trail{fill:var(--or)}
.lockup__t2 .fire{color:var(--or)}
.mark-core{fill:var(--navy)}
.band--navy .mark-core,.on-navy .mark-core{fill:var(--creme)}

/* --- nav -------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(14,26,43,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(245,241,232,.10);
  color:var(--creme);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:70px}
.nav .lockup__mark{width:30px;height:30px}
.nav .lockup{gap:11px}
.nav .lockup__t1{font-size:15px}
.nav .lockup__t2{font-size:7px;letter-spacing:.42em;margin-top:3px}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a{
  font-size:13px;letter-spacing:.05em;text-decoration:none;color:#C7D0DC;
  transition:color .18s ease;
}
.nav__links a:hover{color:var(--or)}
@media(max-width:820px){.nav__links a:not(.btn){display:none}}

/* --- boutons ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13.5px;font-weight:500;letter-spacing:.06em;
  padding:13px 24px;border-radius:2px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;font-family:inherit;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn--or{background:var(--or);color:var(--navy)}
.btn--or:hover{background:var(--creme)}
.btn--ghost{border-color:rgba(245,241,232,.34);color:var(--creme);background:none}
.btn--ghost:hover{border-color:var(--or);color:var(--or)}
.btn--navy{background:var(--navy);color:var(--creme)}
.btn--navy:hover{background:var(--or);color:var(--navy)}
.nav .btn{padding:10px 18px}

/* --- hero ------------------------------------------------------- */
.hero{position:relative;isolation:isolate}
.hero>.wrap{position:relative;z-index:3}
.hero__fond{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__fond img{width:100%;height:100%;object-fit:cover;object-position:72% 42%;display:block}
.hero__voile{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(14,26,43,.94) 0%,rgba(14,26,43,.88) 28%,rgba(14,26,43,.80) 52%,rgba(14,26,43,.72) 78%,rgba(14,26,43,.72) 100%)}
.hero__bas{position:absolute;left:0;right:0;bottom:0;height:38%;z-index:2;background:linear-gradient(to bottom,rgba(14,26,43,0),rgba(14,26,43,.96))}
@media(max-width:820px){
  .hero__fond img{object-position:78% 38%}
  .hero__voile{background:linear-gradient(170deg,rgba(14,26,43,.86) 0%,rgba(14,26,43,.80) 45%,rgba(14,26,43,.90) 100%)}
}
.hero{
  background:var(--navy);color:var(--creme);
  padding:clamp(72px,12vw,132px) 0 clamp(56px,8vw,88px);
  position:relative;overflow:hidden;
}
.hero__mark{width:104px;height:104px;margin-bottom:38px}
.hero h1{max-width:15ch}
.hero h1 em{font-style:normal;color:var(--or)}
.hero__lede{margin:26px 0 38px;max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:8px 34px;margin-top:56px;
  padding-top:26px;border-top:1px solid rgba(245,241,232,.14);
}
.hero__meta span{color:var(--gris-clair)}
.hero__meta b{color:var(--creme);font-weight:400}

/* entrée orchestrée : une seule fois, au chargement */
.rise{opacity:0;transform:translateY(14px);animation:rise .85s cubic-bezier(.2,.7,.3,1) forwards}
.rise-1{animation-delay:.10s}.rise-2{animation-delay:.24s}
.rise-3{animation-delay:.36s}.rise-4{animation-delay:.46s}
@keyframes rise{to{opacity:1;transform:none}}
.burst{opacity:0;transform:scale(.72);animation:burst 1.05s cubic-bezier(.16,.9,.3,1) forwards}
@keyframes burst{to{opacity:1;transform:scale(1)}}

/* --- prestations ------------------------------------------------ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(14,26,43,.14);margin-top:52px}
.card{background:var(--creme);padding:34px 30px 38px}
.card__media{margin:-34px -30px 22px}
.card__media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.card__credit{display:block;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);padding:10px 30px 0}
.card__num{
  font-size:11px;letter-spacing:.2em;color:var(--or-fonce);font-weight:500;
  display:block;margin-bottom:20px;
}
.card h3{margin-bottom:12px}
.card p{margin:0;font-size:15.5px;line-height:1.62;color:#4A5769}
.card ul{margin:18px 0 0;padding:0;list-style:none}
.card li{
  font-size:13.5px;color:var(--gris);padding:7px 0 0;border-top:1px solid rgba(14,26,43,.09);
  margin-top:7px;
}
.card li:first-child{border-top:0;margin-top:0;padding-top:0}
@media(max-width:840px){.grid-3{grid-template-columns:1fr}}

/* --- CHRONOGRAMME (élément signature) --------------------------- */
.chrono__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
.chrono__scroll{
  margin-top:52px;overflow-x:auto;overflow-y:hidden;padding-bottom:14px;
  scrollbar-width:thin;
}
.chrono{min-width:760px;position:relative}
.chrono__ruler{
  display:flex;border-bottom:1px solid rgba(245,241,232,.22);
  padding-bottom:9px;margin-bottom:4px;
}
.chrono__tick{flex:1;font-size:10.5px;letter-spacing:.14em;color:var(--gris-clair);position:relative}
.chrono__tick::before{
  content:"";position:absolute;left:0;bottom:-10px;width:1px;height:7px;
  background:rgba(245,241,232,.3);
}
.chrono__row{
  display:grid;grid-template-columns:132px 1fr;align-items:center;gap:18px;
  padding:11px 0;border-bottom:1px solid rgba(245,241,232,.09);
}
.chrono__pos{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-clair)}
.chrono__track{position:relative;height:34px}
.cue{
  position:absolute;top:0;height:34px;border-radius:1px;
  background:var(--or-fonce);color:var(--navy);
  display:flex;align-items:center;padding:0 10px;
  font-size:11.5px;font-weight:500;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;
  border-left:2px solid var(--creme);
  transform-origin:left center;transform:scaleX(0);
  transition:background .16s ease;
}
.cue--lit{background:var(--or)}
.cue--final{background:var(--creme)}
.chrono.is-on .cue{animation:cue-in .62s cubic-bezier(.2,.75,.3,1) forwards}
@keyframes cue-in{to{transform:scaleX(1)}}
.cue:hover,.cue:focus-visible{background:var(--creme);outline:none}
.chrono__legend{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;
  font-size:12px;color:var(--gris-clair);
}
.chrono__legend b{font-weight:500;color:var(--creme)}
.chrono__note{margin-top:34px;font-size:14px;color:#AFBACA;max-width:66ch}

/* --- déroulé (séquence réelle → numérotation justifiée) --------- */
.steps{margin-top:52px;border-top:1px solid rgba(14,26,43,.14)}
.step{
  display:grid;grid-template-columns:56px 1fr 1.15fr;gap:28px;
  padding:26px 0;border-bottom:1px solid rgba(14,26,43,.14);align-items:start;
}
.step__n{font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--or-fonce);padding-top:4px}
.step h3{font-size:18px}
.step p{margin:0;font-size:15px;color:#4A5769;line-height:1.6}
@media(max-width:760px){
  .step{grid-template-columns:44px 1fr;gap:16px}
  .step p{grid-column:2}
}

/* --- sécurité --------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,84px);align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.facts{margin:0;padding:0;list-style:none}
.facts div{
  display:grid;grid-template-columns:150px 1fr;gap:20px;
  padding:15px 0;border-top:1px solid rgba(14,26,43,.14);font-size:15px;
}
.facts div:last-child{border-bottom:1px solid rgba(14,26,43,.14)}
.facts dt{color:var(--gris);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding-top:3px}
.facts dd{margin:0;color:#39485C}
.todo{background:rgba(227,169,60,.16);padding:1px 6px;color:#7A5A17;font-size:13px}

/* --- formulaire ------------------------------------------------- */
.form{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-clair)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:15.5px;color:var(--creme);
  background:rgba(245,241,232,.05);
  border:1px solid rgba(245,241,232,.20);border-radius:2px;
  padding:12px 14px;transition:border-color .18s ease,background .18s ease;
}
.field textarea{resize:vertical;min-height:118px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--or);background:rgba(245,241,232,.08);
}
.field select option{background:var(--navy);color:var(--creme)}
.form__etat{grid-column:1/-1;margin:0;padding:14px 16px;border-radius:2px;font-size:14.5px;line-height:1.5}
.form__etat--ok{background:rgba(227,169,60,.18);color:var(--creme);border-left:2px solid var(--or)}
.form__etat--ko{background:rgba(220,90,70,.16);color:var(--creme);border-left:2px solid #DC5A46}
.field input[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:#DC5A46}
.btn[disabled]{opacity:.55;cursor:progress}
.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:6px}
.form__note{font-size:13px;color:var(--gris-clair);max-width:44ch;margin:0}
@media(max-width:700px){.form{grid-template-columns:1fr}}

/* --- footer ----------------------------------------------------- */
.footer{background:var(--navy);color:var(--gris-clair);padding:56px 0 44px;font-size:13.5px;
  border-top:1px solid rgba(245,241,232,.12)}
.footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px;align-items:flex-start}
.footer__legal{max-width:52ch;line-height:1.75}
.footer__legal b{color:var(--creme);font-weight:500}
.footer__bar{
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(245,241,232,.12);
  display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;font-size:12px;
}
.footer a{color:var(--gris-clair);text-decoration:none}
.footer a:hover{color:var(--or)}

/* --- reveal au scroll ------------------------------------------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-on{opacity:1;transform:none}

/* --- accessibilité ---------------------------------------------- */
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--or);color:var(--navy);padding:12px 18px;z-index:99}
.skip:focus{left:12px;top:12px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rise,.burst,.reveal{opacity:1;transform:none}
  .cue{transform:scaleX(1)}
}

.chrono__ciel{position:relative;height:170px;margin-bottom:6px;pointer-events:none;overflow:hidden}
.chrono__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.fx-trait{stroke-dasharray:220;stroke-dashoffset:220;animation-name:fxTrait;animation-timing-function:cubic-bezier(.18,.8,.35,1);animation-fill-mode:forwards;opacity:0}
@keyframes fxTrait{0%{stroke-dashoffset:220;opacity:0}12%{opacity:1}70%{opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
.fx-point{opacity:0;animation-name:fxPoint;animation-timing-function:ease-out;animation-fill-mode:forwards}
@keyframes fxPoint{0%{opacity:0;transform:scale(.2)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.5)}}
.fx-anneau{opacity:0;transform-origin:center;animation-name:fxAnneau;animation-timing-function:cubic-bezier(.15,.75,.3,1);animation-fill-mode:forwards}
@keyframes fxAnneau{0%{opacity:0;r:4;stroke-width:3}20%{opacity:1}100%{opacity:0;r:56;stroke-width:.4}}
.fx-strobe{opacity:0;animation:fxStrobe 1100ms steps(2,end) forwards}
@keyframes fxStrobe{0%,100%{opacity:0}10%{opacity:1}20%{opacity:0}30%{opacity:1}45%{opacity:0}60%{opacity:1}75%{opacity:0}88%{opacity:.9}}
.cue{cursor:pointer}
.chrono__legende-fx{margin-top:14px;font-size:11.5px;letter-spacing:.02em;color:var(--gris-clair);font-style:normal}
@media(prefers-reduced-motion:reduce){
  .chrono__ciel{display:none}
}
@media(max-width:700px){
  .chrono__ciel{height:130px}
}
.lockup__mark{width:52px;height:52px;flex:none;display:block}
.nav .lockup__mark{width:34px;height:34px}
.footer .lockup__mark{width:46px;height:46px}
.hero__mark{width:112px;height:112px;display:block;margin-bottom:34px}

.lockup--hero{margin-bottom:40px;align-items:center}
.lockup--hero .lockup__mark{width:104px;height:104px}
.lockup--hero .lockup__bar{margin:0 4px;opacity:.3}
.lockup--hero .lockup__t1{font-size:36px;letter-spacing:.18em}
.lockup--hero .lockup__t2{font-size:16.2px;letter-spacing:.46em;margin-top:9px}
@media(max-width:640px){
.lockup--hero{gap:14px;margin-bottom:32px}
.lockup--hero .lockup__mark{width:72px;height:72px}
.lockup--hero .lockup__t1{font-size:25px}
.lockup--hero .lockup__t2{font-size:11.2px;letter-spacing:.4em}
}

.nav .lockup{transition:opacity .3s ease,transform .3s ease}
.nav--replie .lockup{opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden}
.nav--replie .lockup:focus-within{opacity:1;transform:none;pointer-events:auto;visibility:visible}
@media(prefers-reduced-motion:reduce){.nav .lockup{transition:none}}