/* ===========================================================
   PILOTIS — Système visuel (charte)
   Trait fin · marine profond · bleu signé · accents pâles
   =========================================================== */

:root{
  /* neutres (gris froid) */
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --ink:#15171B;
  --ink-2:#5A6069;
  --ink-3:#8C929B;
  --line:#E7E9EC;
  --border:#DADDE2;

  /* sombre */
  --marine:#08193C;
  --marine-2:#0C2150;
  --marine-line:rgba(255,255,255,.07);

  /* bleu de marque */
  --blue:#0B42C3;
  --blue-2:#1B57F0;
  --blue-press:#0A3596;

  /* accents vifs */
  --c-blue:#2E7CF6;
  --c-green:#2EA862;
  --c-amber:#F5A623;
  --c-orange:#FF7A30;
  --c-red:#EB5545;
  --c-purple:#9264E6;
  --c-teal:#16A39A;
  --c-pink:#E45DA8;
  --tint:#EEF0F2;

  /* type */
  --font-d:'Space Grotesk',system-ui,sans-serif;
  --font-s:'DM Sans',system-ui,sans-serif;
  --font-m:'DM Mono',ui-monospace,monospace;

  --maxw:1140px;
  --gutter:clamp(18px,4vw,44px);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:70px;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-s);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{display:block;max-width:100%;}
::selection{background:var(--blue);color:#fff;}

/* ---- type presets ---- */
.t-eyebrow{font-family:var(--font-m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.t-h1{font-family:var(--font-d);font-weight:600;font-size:clamp(34px,5.2vw,58px);line-height:1.02;letter-spacing:-0.03em;margin:0;}
.t-h2{font-family:var(--font-d);font-weight:600;font-size:clamp(26px,3.4vw,38px);line-height:1.05;letter-spacing:-0.02em;margin:0;}
.t-h3{font-family:var(--font-d);font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-0.01em;margin:0;}
.t-lead{font-size:clamp(17px,1.7vw,21px);line-height:1.55;color:var(--ink-2);}
.t-mono{font-family:var(--font-m);font-size:13px;letter-spacing:.02em;}
.muted{color:var(--ink-2);}
.blue{color:var(--blue);}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.frame{position:relative;max-width:var(--maxw);margin-inline:auto;border-inline:1px solid var(--border);}
/* grilles de section : pleine largeur du cadre, lignes raccordées aux bords */
.frame .wrap>.grid,.frame .wrap>.mods{margin-inline:calc(-1*var(--gutter));border-block:1px solid var(--line);}
.frame .wrap>.mods{border-inline:0;}
.frame .wrap>.marine{margin-inline:calc(-1*var(--gutter));}
.section{padding-block:clamp(56px,7vw,100px);}
.rule{height:1px;background:var(--line);border:0;margin:0;}

/* ---- section header ---- */
.sec-head{margin-bottom:40px;}
.num{font-family:var(--font-m);font-size:12px;color:var(--blue);letter-spacing:.1em;}
.sec-head .t-h2{margin:10px 0 0;}
.sec-head .lead{margin:14px 0 0;max-width:64ch;}

/* ---- buttons ---- */
.btn{font-family:var(--font-s);font-weight:600;font-size:15px;padding:12px 22px;border:0;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:.15s;text-decoration:none;}
.btn-k{background:var(--ink);color:#fff;}
.btn-k:hover{background:#000;}
.btn-o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--border);}
.btn-o:hover{background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink-3);}
.btn-w{background:#fff;color:var(--ink);}
.btn-w:hover{opacity:.9;}
.btn-wo{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);}
.btn-wo:hover{background:rgba(255,255,255,.08);}

/* ---- marqueurs géométriques (forme pleine + icône) ---- */
.mk{width:46px;height:46px;display:grid;place-items:center;color:#fff;flex:none;}
.mk.circle{border-radius:50%;}
.mk.hex{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);}
.mk.diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transform:scale(1.22);}
.mk.pent{clip-path:polygon(50% 1%,100% 39%,82% 100%,18% 100%,0 39%);}
.mk.tri{clip-path:polygon(50% 8%,96% 92%,4% 92%);}
.mk-sm{width:30px;height:30px;}
.mk i{font-size:23px;line-height:1;}
.mk-sm i{font-size:15px;}

/* ---- modules grid + repères ---- */
.mods{position:relative;border:1px solid var(--border);background:var(--surface);display:grid;}
.mods .mod{padding:28px var(--gutter);border-right:1px solid var(--line);}
.mods .mod .mk{margin-bottom:16px;}
.mods .mod:last-child{border-right:0;}
.mod h3{margin-bottom:7px;}
.mod p{font-size:14px;color:var(--ink-2);margin:0;}
/* croix d'intersection — placées par JS sur tout le quadrillage */
.xcross{position:absolute;width:11px;height:11px;margin:-6px 0 0 -6px;color:var(--border);pointer-events:none;z-index:3;background:transparent !important;}
.xcross::before,.xcross::after{content:"";position:absolute;background:currentColor;}
.xcross::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%);}
.xcross::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%);}
@media(max-width:720px){
  .mods{grid-template-columns:1fr !important;}
  .mods .mod{border-right:0;border-bottom:1px solid var(--line);}
  .mods .mod:last-child{border-bottom:0;}
  .xcross{display:none;}
}

/* ---- grilles de cartes ---- */
.grid{display:grid;gap:1px;background:var(--line);}
.grid>*{background:var(--surface);}
.c2{grid-template-columns:repeat(2,1fr);}
.c3{grid-template-columns:repeat(3,1fr);}
.c4{grid-template-columns:repeat(4,1fr);}
@media(max-width:820px){.c3,.c4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.c2,.c3,.c4{grid-template-columns:1fr;}}

/* ---- bloc marine ---- */
.marine{background:var(--marine);color:#fff;position:relative;overflow:hidden;}
.marine .gridlines{position:absolute;inset:0;background-image:linear-gradient(var(--marine-line) 1px,transparent 1px),linear-gradient(90deg,var(--marine-line) 1px,transparent 1px);background-size:42px 42px;pointer-events:none;}
.marine h1,.marine h2,.marine h3{color:#fff;}
.on-dark .t-eyebrow{color:rgba(255,255,255,.55);}

/* ---- légende ---- */
.cap{font-family:var(--font-m);font-size:11.5px;letter-spacing:.03em;color:var(--ink-3);margin-top:10px;}
.cap b{color:var(--ink-2);font-weight:500;}

/* — coins anguleux partout (sauf points et marqueurs ronds) — */
*{border-radius:0 !important;}
.dot,.mk.circle{border-radius:50% !important;}