/* ============================================================
   Maroclic — « 1 clic »
   Jetons : bleu de Fès / nuit / ciel / papier / étincelle
   Anybody (titres, largeur resserrée) + Schibsted Grotesk (texte)
   ============================================================ */
@font-face{
  font-family:"Anybody"; font-style:normal; font-weight:600 900; font-stretch:50% 150%; font-display:swap;
  src:url(polices/anybody-latin.woff2) format("woff2");
}
@font-face{
  font-family:"Schibsted Grotesk"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(polices/schibsted-grotesk-latin.woff2) format("woff2");
}

:root{
  --accent:#2446E8;
  --accent-fonce:#1B35C0;
  --ciel:#DCE5FF;
  --ciel-clair:#A9BBFF;
  --spark:#FF6B4A;
  --encre:#0B1437;
  --encre-2:#16224D;
  --papier:#F3F5FC;
  --beton:#E2E7F5;
  --blanc:#FFFFFF;
  --ardoise:#475069;
  --trait:rgba(11,20,55,.12);
  --alerte:#B3261E;

  --f-display:"Anybody","Arial Black","Segoe UI",system-ui,sans-serif;
  --f-text:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --gut:clamp(18px,4.4vw,64px);
  --maxw:1240px;
  --hdr:68px;
  --r:24px;
  --ombre:0 1px 2px rgba(11,20,55,.06),0 12px 32px -12px rgba(11,20,55,.18);
}
@media (min-width:1000px){ :root{ --hdr:80px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--hdr) + 12px); }
body{
  margin:0; background:var(--blanc); color:var(--encre);
  font:400 17px/1.55 var(--f-text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
html.menu-open, html.menu-open body{ overflow:hidden; }
img,svg{ max-width:100%; }
a{ color:inherit; }
h1,h2,h3,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:3px solid var(--encre); outline-offset:3px; border-radius:6px; }
.nw{ white-space:nowrap; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{ width:1em; height:1em; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.skip{ position:absolute; left:12px; top:-120px; z-index:100; background:var(--encre); color:var(--blanc); padding:12px 18px; font-weight:700; text-decoration:none; border-radius:12px; }
.skip:focus{ top:12px; }
.skip:focus-visible{ outline-color:var(--ciel-clair); }

.wrap{ max-width:calc(var(--maxw) + 2 * var(--gut)); margin:0 auto; padding:0 var(--gut); }

/* ---------- typographie ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font:700 13.5px/1.2 var(--f-display); font-stretch:80%;
  letter-spacing:.1em; text-transform:uppercase;
}
.kicker::before{ content:""; flex:none; width:26px; height:8px; border-radius:99px; background:var(--accent); }

.h2{
  font:850 clamp(32px,4.4vw,60px)/1 var(--f-display); font-stretch:86%;
  letter-spacing:-.012em; text-wrap:balance;
}
.mark{ background:var(--accent); color:var(--blanc); padding:0 .14em; border-radius:.16em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  min-height:56px; padding:0 28px; border:0; border-radius:99px;
  font:700 17px/1.1 var(--f-text); text-decoration:none; text-align:center;
  transition:background-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.btn .arr{ display:inline-block; transition:transform .25s; }
.btn:hover .arr{ transform:translateX(4px); }
.btn--encre{ background:var(--encre); color:var(--blanc); }
.btn--encre:hover{ background:var(--accent); box-shadow:0 10px 24px -10px rgba(36,70,232,.6); transform:translateY(-1px); }
.btn--accent{ background:var(--accent); color:var(--blanc); }
.btn--accent:hover{ background:var(--accent-fonce); }
.link{
  display:inline-flex; align-items:center; gap:.4em; min-height:44px;
  font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; text-decoration-color:var(--accent);
}
.link:hover{ text-decoration-thickness:4px; }

/* ============================================================
   EN-TÊTE
   ============================================================ */
.hdr{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.hdr.is-scrolled, html.menu-open .hdr{ border-bottom-color:var(--trait); }
.hdr__in{
  height:var(--hdr); display:flex; align-items:center; gap:8px;
  max-width:calc(var(--maxw) + 2 * var(--gut)); margin:0 auto; padding:0 var(--gut);
}
.brand{ display:flex; align-items:center; gap:9px; min-height:44px; margin-right:auto; text-decoration:none; color:var(--encre); }
.brand__mark{ width:34px; height:34px; flex:none; color:var(--accent); }
.brand__dot{ fill:var(--spark); }
.brand__txt{ font:850 25px/1 var(--f-display); font-stretch:84%; letter-spacing:-.02em; }
.brand--blanc{ color:var(--blanc); margin-right:0; }
.brand--blanc .brand__mark{ color:var(--ciel-clair); }
.nav{ display:none; }
.nav ul{ list-style:none; display:flex; gap:2px; }
.nav a{
  display:flex; align-items:center; min-height:44px; padding:0 16px; border-radius:99px;
  font-weight:600; font-size:16px; text-decoration:none; transition:background-color .2s;
}
.nav a:hover{ background:var(--papier); }
.hdr__cta{ min-height:44px; padding:0 18px; font-size:15.5px; white-space:nowrap; flex:none; }
.hdr__cta .long{ display:none; }
.menu-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; min-width:44px; padding:0 16px;
  background:var(--encre); color:var(--blanc); border:0; border-radius:99px; font-weight:700; font-size:16px;
}
.menu-btn__bars{ position:relative; width:18px; height:12px; flex:none; }
.menu-btn__bars::before,.menu-btn__bars::after{
  content:""; position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor; transition:transform .2s, top .2s;
}
.menu-btn__bars::before{ top:1px; }
.menu-btn__bars::after{ top:9px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before{ top:5px; transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after{ top:5px; transform:rotate(-45deg); }
.menu-btn:focus-visible{ outline-offset:2px; }
@media (max-width:379px){
  .menu-btn{ padding:0 14px; }
  .menu-btn__txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .btn{ padding:0 18px; font-size:16px; }
}
@media (min-width:480px){ .hdr__in{ gap:12px; } }
@media (min-width:1000px){
  .hdr__in{ gap:24px; }
  .nav{ display:block; }
  .hdr__cta{ min-height:48px; padding:0 24px; font-size:16px; }
  .hdr__cta .long{ display:inline; }
  .hdr__cta .short{ display:none; }
  .menu-btn{ display:none; }
  .brand__mark{ width:38px; height:38px; }
  .brand__txt{ font-size:28px; }
}

/* menu mobile : un aplat bleu plein écran */
.menu{
  position:fixed; left:0; right:0; top:var(--hdr); bottom:0; z-index:45;
  background:var(--accent); color:var(--blanc); overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; padding:12px var(--gut) 28px;
}
.menu[hidden]{ display:none; }
.menu ul{ list-style:none; }
.menu li a{
  display:flex; justify-content:space-between; align-items:center; min-height:68px;
  border-bottom:1px solid rgba(255,255,255,.3); text-decoration:none;
  font:850 clamp(32px,9vw,46px)/1 var(--f-display); font-stretch:84%; letter-spacing:-.02em;
}
.menu li a::after{ content:"→"; font-family:var(--f-text); font-size:.55em; font-weight:700; }
.menu__cta{ margin-top:26px; width:100%; }
.menu :focus-visible{ outline-color:var(--blanc); }
.menu__foot{ margin-top:auto; padding-top:28px; font-size:16px; }
@media (min-width:1000px){ .menu{ display:none!important; } }

/* ============================================================
   HÉROS — la thèse, puis la preuve : une conversation, un lundi
   ============================================================ */
.hero{ position:relative; overflow-x:clip; }
.hero__grid{
  max-width:calc(var(--maxw) + 2 * var(--gut)); margin:0 auto;
  padding:clamp(28px,4vw,56px) var(--gut) clamp(56px,7vw,104px);
  display:grid; grid-template-columns:minmax(0,1fr); row-gap:56px;
}
.hero__text{ min-width:0; }
.h1__what{ display:block; }
.h1__main{
  display:block; margin-top:22px;
  font:900 clamp(40px,10.6vw,112px)/.95 var(--f-display); font-stretch:82%; letter-spacing:-.022em; text-wrap:balance;
}
.lede{ margin-top:28px; max-width:33em; font-size:clamp(17.5px,1.4vw,20px); color:var(--ardoise); }
.lede strong{ color:var(--encre); font-weight:700; }
.hero__ctas{ margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; }
.facts{ list-style:none; margin-top:38px; display:flex; flex-wrap:wrap; gap:10px; }
.facts li{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 10px; border-radius:99px;
  background:var(--papier); font-size:15px; font-weight:600; line-height:1.2;
}
.facts .ico{ width:18px; height:18px; padding:3px; border-radius:50%; background:var(--accent); color:var(--blanc); stroke-width:2.6; }

/* la scène : le tableau d'une matinée, six automatisations différentes */
.stage{ position:relative; min-width:0; display:grid; justify-items:center; padding:28px 0 8px; }
.stage::before{
  content:""; position:absolute; inset:2% 2% 12% 8%; background:var(--accent); border-radius:48px; transform:rotate(2.5deg);
}
.board{
  position:relative; width:min(100%,430px); background:var(--blanc); border-radius:30px;
  box-shadow:0 40px 80px -24px rgba(20,20,19,.45),0 0 0 1px rgba(20,20,19,.08); overflow:hidden;
}
.board__bar{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:18px 22px; background:var(--encre); color:var(--blanc); }
.board__t{ font:850 20px/1.1 var(--f-display); font-stretch:86%; letter-spacing:-.01em; }
.board__s{ font-size:13px; color:#A9B3D6; }
.feed{ list-style:none; display:grid; }
.feed li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:15px 22px; }
.feed li + li{ border-top:1px solid var(--trait); }
.feed .ico{ width:40px; height:40px; padding:10px; border-radius:13px; background:var(--ciel); color:var(--accent); }
.feed b{ display:block; font-size:16px; line-height:1.25; }
.feed span span{ display:block; margin-top:2px; font-size:14px; line-height:1.35; color:var(--ardoise); }
.feed time{ font-size:13px; font-weight:600; color:var(--ardoise); align-self:start; padding-top:4px; }
.stage__note{ position:relative; margin-top:30px; font-size:13.5px; color:var(--encre); font-weight:600; text-align:center; }

@media (min-width:1000px){
  .hero__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:56px; align-items:center; }
  .h1__main{ font-size:clamp(56px,6.9vw,104px); }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{ padding:clamp(64px,8vw,116px) 0; }
.sec--papier{ background:var(--papier); }
.sec--encre{ background:var(--encre); color:var(--blanc); }
.sec--encre :focus-visible{ outline-color:var(--ciel-clair); }
.sec--encre .kicker::before{ background:var(--ciel-clair); }
.sec__head{ display:grid; gap:18px; margin-bottom:clamp(34px,4.5vw,60px); }
.sec__intro{ max-width:34em; font-size:clamp(17px,1.35vw,19px); color:var(--ardoise); }
.sec--encre .sec__intro{ color:#C3CBE6; }
@media (min-width:1000px){
  .sec__head{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end; column-gap:56px; }
  .sec__head .kicker{ grid-column:1 / -1; justify-self:start; }
}

/* --- pour qui --- */
.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; }
.tags li{ padding:12px 20px; border-radius:99px; background:var(--blanc); font-weight:600; font-size:16.5px; box-shadow:0 0 0 1px var(--trait); }
.rule{
  margin-top:34px; padding:26px clamp(22px,3vw,36px); max-width:46em; border-radius:var(--r); background:var(--encre); color:var(--blanc);
  font:800 clamp(20px,2vw,28px)/1.18 var(--f-display); font-stretch:88%; letter-spacing:-.01em; text-wrap:balance;
}
.rule em{ font-style:normal; color:var(--ciel-clair); }

/* --- services --- */
.svc{ list-style:none; display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.card{
  display:flex; flex-direction:column; gap:14px; padding:26px 26px 24px; border-radius:var(--r);
  background:var(--blanc); box-shadow:0 0 0 1px var(--trait); transition:transform .25s, box-shadow .25s;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 0 0 1px var(--accent),0 22px 40px -22px rgba(36,70,232,.45); }
.card__ico{ width:52px; height:52px; padding:13px; border-radius:16px; background:var(--ciel); color:var(--accent); transition:transform .25s, background-color .25s, color .25s; }
.card:hover .card__ico{ transform:rotate(-6deg) scale(1.06); background:var(--accent); color:var(--blanc); }
.card__name{ font:850 clamp(22px,1.9vw,27px)/1.05 var(--f-display); font-stretch:86%; letter-spacing:-.015em; }
.card__p{ font-size:16px; line-height:1.45; color:var(--ardoise); }
.card__p b{ display:block; margin-bottom:2px; font:800 11.5px/1.4 var(--f-display); font-stretch:80%; letter-spacing:.1em; text-transform:uppercase; color:var(--encre); }
.card__p--apres{ color:var(--encre); font-weight:500; }
.card__you{ padding:10px 14px; border-radius:14px; background:var(--papier); font-size:15px; line-height:1.4; }
.card__you b{ font-weight:700; }
.card__prix{ margin-top:auto; padding-top:6px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline; font-size:15px; }
.card__prix strong{ font:850 20px/1 var(--f-display); font-stretch:90%; letter-spacing:-.01em; }
.card__prix span{ color:var(--ardoise); }
@media (min-width:760px){ .svc{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){
  .svc{ grid-template-columns:repeat(12,minmax(0,1fr)); }
  .svc .card{ grid-column:span 4; }
  .svc .card:nth-child(n+7){ grid-column:span 3; padding:24px 22px 22px; }
}

/* --- jamais (fond encre) --- */
.never{ list-style:none; display:grid; gap:14px; grid-template-columns:minmax(0,1fr); }
.never li{ padding:24px 26px 26px; border-radius:var(--r); background:var(--encre-2); font-size:17.5px; line-height:1.5; color:#E8ECFA; }
.never li::before{ content:""; display:block; width:34px; height:6px; margin-bottom:16px; border-radius:99px; background:var(--ciel-clair); }
@media (min-width:860px){ .never{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* --- démarche --- */
.steps{ list-style:none; display:grid; gap:16px; counter-reset:etape; }
.steps li{ counter-increment:etape; position:relative; padding:28px 26px 30px; border-radius:var(--r); background:var(--papier); }
.steps li::before{
  content:counter(etape); display:grid; place-items:center; width:48px; height:48px; margin-bottom:18px; border-radius:50%;
  background:var(--accent); color:var(--blanc); font:900 22px/1 var(--f-display); font-stretch:90%;
}
.steps h3{ font:850 clamp(22px,1.9vw,27px)/1.05 var(--f-display); font-stretch:86%; letter-spacing:-.015em; margin-bottom:8px; }
.steps p{ color:var(--ardoise); }
@media (min-width:860px){ .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* --- prix --- */
.prices{ border-radius:var(--r); background:var(--blanc); box-shadow:0 0 0 1px var(--trait); overflow:hidden; }
.prices > div{ display:grid; gap:6px 28px; padding:22px 26px; }
.prices > div + div{ border-top:1px solid var(--trait); }
.prices dt{ font:800 clamp(19px,1.6vw,22px)/1.15 var(--f-display); font-stretch:88%; letter-spacing:-.01em; }
.prices dd{ margin:0; font-size:16px; color:var(--ardoise); }
.prices .amount{ font:850 clamp(22px,2.1vw,30px)/1.1 var(--f-display); font-stretch:86%; letter-spacing:-.015em; color:var(--encre); }
.prices__row--hl{ background:var(--accent); }
.prices__row--hl dt, .prices__row--hl dd, .prices__row--hl .amount{ color:var(--blanc); }
.prices__note{ margin-top:22px; max-width:46em; font-size:15.5px; color:var(--ardoise); }
@media (min-width:860px){
  .prices > div{ grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,5fr); align-items:center; padding:26px 32px; }
}

/* --- FAQ --- */
.faq{ max-width:54em; display:grid; gap:10px; }
.faq details{ border-radius:18px; background:var(--papier); }
.faq summary{
  list-style:none; cursor:pointer; min-height:64px; padding:18px 62px 18px 24px; position:relative; border-radius:18px;
  font:800 clamp(18px,1.6vw,21px)/1.25 var(--f-display); font-stretch:90%; letter-spacing:-.005em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:18px; top:50%; width:32px; height:32px; margin-top:-16px; border-radius:50%;
  display:grid; place-items:center; background:var(--blanc); font:700 22px/1 var(--f-text); transition:transform .25s, background-color .25s;
}
.faq details[open] summary::after{ content:"+"; transform:rotate(45deg); background:var(--accent); color:var(--blanc); }
.faq p{ padding:0 24px 24px; max-width:44em; color:var(--ardoise); }

/* --- contact --- */
.contact{ display:grid; gap:28px; }
.form{ display:grid; gap:20px; padding:clamp(24px,3vw,40px); border-radius:28px; background:var(--blanc); box-shadow:0 30px 60px -30px rgba(20,20,19,.45); }
.field{ display:grid; gap:7px; min-width:0; }
.field label{ font-weight:700; font-size:15.5px; }
.field .hint{ font-weight:400; color:var(--ardoise); }
.field input, .field select, .field textarea{
  width:100%; min-height:54px; padding:13px 16px; background:var(--blanc); border:1.5px solid #C9C9C2; border-radius:14px;
  transition:border-color .2s, box-shadow .2s;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(36,70,232,.28);
}
.field--two{ display:grid; gap:20px; }
@media (min-width:560px){ .field--two{ grid-template-columns:1fr 1fr; } }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; }
.check input{ flex:none; width:24px; height:24px; margin-top:2px; accent-color:var(--accent); }
.trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.form__small{ font-size:14.5px; color:var(--ardoise); }
.contact__side{ display:grid; gap:14px; align-content:start; }
.contact__side p{ max-width:28em; font-size:18px; }
.contact__side .big{ font:850 clamp(26px,2.6vw,36px)/1.05 var(--f-display); font-stretch:84%; letter-spacing:-.02em; }
@media (min-width:1000px){ .contact{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); column-gap:72px; } }

/* --- pied --- */
.ftr{ background:var(--encre); color:var(--blanc); padding:60px 0 34px; }
.ftr a{ text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--ciel-clair); }
.ftr__top{ display:grid; gap:30px; }
.ftr__brand p{ margin-top:14px; max-width:26em; color:#C3CBE6; }
.ftr ul{ list-style:none; display:grid; gap:2px; align-content:start; }
.ico--f{ fill:currentColor; stroke:none; }
.ftr .social{ display:flex; gap:10px; margin-top:22px; }
.ftr .social a{
  display:grid; place-items:center; width:46px; height:46px; min-height:0; border-radius:50%;
  background:var(--encre-2); color:var(--blanc); text-decoration:none; transition:background-color .2s, transform .2s;
}
.ftr .social a:hover{ background:var(--accent); transform:translateY(-2px); }
.ftr .social .ico{ width:22px; height:22px; }
.ftr li a{ display:inline-flex; align-items:center; min-height:44px; }
.ftr :focus-visible{ outline-color:var(--ciel-clair); }
.ftr__copy{ margin-top:34px; padding-top:18px; border-top:1px solid #26336B; font-size:14px; color:#C3CBE6; }
@media (min-width:860px){ .ftr__top{ grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr); } }

/* --- pages secondaires (mentions, confidentialité, retour du formulaire) --- */
.page{ max-width:46em; margin:0 auto; padding:clamp(36px,6vw,72px) var(--gut) 90px; }
.page h1{ font:900 clamp(34px,5vw,56px)/1 var(--f-display); font-stretch:84%; letter-spacing:-.03em; margin-bottom:28px; }
.page h2{ font:850 clamp(21px,2vw,26px)/1.15 var(--f-display); font-stretch:88%; margin:34px 0 8px; }
.page p, .page li{ margin-top:10px; }
.page ul{ padding-left:1.2em; }
.page .btn{ margin-top:28px; }

/* ---------- mouvement : apparition à l'entrée dans l'écran (sans script) ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rv{ animation:monte linear both; animation-timeline:view(); animation-range:entry 0% entry 40%; }
    @keyframes monte{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
  }
  .board{ animation:entre .8s cubic-bezier(.2,.8,.2,1) .1s both; }
  @keyframes entre{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}