:root{
  --black:#000000; --near:#0A0A0A; --offwhite:#F2F2EF; --graymid:#8A8A85;
  --graydim:#6E6E68; --white:#FFFFFF; --graylight:#F4F4F1; --charcoal:#1A1A1A;
  --line:#E3E3DE; --coral:#D64535; --ease:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  background:var(--white); color:var(--charcoal);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:#fff; color:#000; padding:12px 18px; font-weight:700; }
.skip:focus{ left:12px; top:12px; }

/* HEADER */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 6vw; background:transparent; border-bottom:1px solid transparent;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
}
.nav.solid{ background:rgba(0,0,0,.93); backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%); padding:12px 6vw; border-bottom-color:#1c1c1c; }
.nav.onlight:not(.solid) .nav-mark{ color:var(--charcoal); }
.nav.onlight:not(.solid) .nav-links a{ color:#77776F; }
.nav-mark{ font-size:11px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--offwhite); }
.nav-links{ display:flex; gap:24px; }
.nav-links a{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--graymid); transition:color .3s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--offwhite); }
.nav.onlight:not(.solid) .nav-links a:hover, .nav.onlight:not(.solid) .nav-links a[aria-current="page"]{ color:var(--charcoal); }

/* SHARED TYPE */
.eyebrow{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--coral); font-weight:700; }
.link-out{
  display:inline-flex; align-items:center; flex-wrap:wrap; overflow-wrap:anywhere; gap:9px;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  padding-bottom:5px; border-bottom:1px solid currentColor;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.link-out .arw{ transition:transform .3s var(--ease); }
.link-out:hover .arw{ transform:translateX(4px); }
.on-dark .link-out{ color:var(--offwhite); border-bottom-color:#3A3A36; }
.on-dark .link-out:hover{ color:var(--coral); border-bottom-color:var(--coral); }

/* CARDS */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); }
.card{ background:var(--white); padding:30px 26px 26px 26px; display:flex; flex-direction:column;
  justify-content:space-between; min-height:186px; position:relative;
  transition:background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
a.card:hover{ background:var(--black); transform:translateY(-2px); box-shadow:0 18px 44px rgba(0,0,0,.16); z-index:2; }
a.card:hover .card-name{ color:var(--white); }
a.card:hover .card-desc{ color:#B4B4AE; }
a.card:hover .card-domain{ color:var(--coral); border-top-color:#2A2A27; }
.card-name{ font-size:16px; font-weight:800; margin-bottom:9px; line-height:1.25; transition:color .35s var(--ease); }
.card-desc{ font-size:13.5px; line-height:1.6; color:#63635D; transition:color .35s var(--ease); }
.card-domain{ font-size:10.5px; letter-spacing:.1em; text-transform:lowercase; color:var(--graydim);
  margin-top:22px; padding-top:13px; border-top:1px solid var(--line); overflow-wrap:anywhere;
  transition:color .35s var(--ease), border-color .35s var(--ease); }
.card-soon{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--graymid); font-weight:700; }
.card-grid--solo{ grid-template-columns:1fr; }
.card-grid--solo .card{ min-height:0; padding:clamp(34px,4vw,52px) clamp(28px,3.4vw,46px);
  flex-direction:row; align-items:flex-end; justify-content:space-between;
  gap:clamp(20px,4vw,56px); flex-wrap:wrap; }
.card-grid--solo .card-name{ font-size:clamp(19px,2.3vw,27px); }
.card-grid--solo .card-desc{ max-width:520px; font-size:14.5px; }
.card-grid--solo .card-domain{ margin-top:0; padding-top:0; border-top:0; }

/* FOOTER */
footer{ background:var(--black); color:var(--graymid); padding:clamp(48px,6vw,72px) 6vw clamp(30px,4vw,44px) 6vw; border-top:1px solid #161614; }
.foot-top{ display:flex; justify-content:space-between; gap:36px; flex-wrap:wrap;
  padding-bottom:36px; border-bottom:1px solid #161614; margin-bottom:26px; }
.foot-logo{ width:72px; margin-bottom:16px; }
.foot-brand p{ font-size:13px; line-height:1.7; color:var(--graydim); }
.foot-col-title{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--offwhite); font-weight:700; margin-bottom:14px; }
.foot-col a{ display:block; font-size:13px; color:var(--graydim); margin-bottom:9px; transition:color .3s var(--ease); }
.foot-col a:hover{ color:var(--offwhite); }
.foot-base{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--graydim); }

/* REVEAL */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rv{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} }

@media (max-width:860px){
  .nav-links{ display:none; }
  /* sur mobile il n y a pas de survol : vrai bouton plein, toujours visible */
  a.card::after{ display:none; }
  .card-foot{ flex-direction:column; align-items:stretch; gap:14px; margin-top:20px; }
  .card-foot .card-domain{ text-align:left; }
  .card-go{
    display:flex; justify-content:center; align-items:center; width:100%;
    background:var(--coral); color:var(--white);
    border-bottom:0; border-radius:2px;
    padding:14px 16px; font-size:11px; letter-spacing:.16em;
  }
  a.card:active .card-go{ background:#B5392B; }
  a.card:hover .card-go{ color:var(--white); border-bottom-color:transparent; }
  .card{ min-height:0; }
  .card-grid{ grid-template-columns:1fr; }
  .card-grid--solo .card{ flex-direction:column; align-items:flex-start; gap:18px; }
  .foot-top{ flex-direction:column; }
}