/* =====================================================================
   4D — Fablab numérique  ·  Design system "briques"
   Style clair & ludique. Univers brique 100% original.
   Aucune marque, logo, couleur officielle ni proportion déposée n'est
   utilisée : briques et figurines sont des créations génériques.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  /* Surfaces */
  --bg:#eef2f9;
  --bg-2:#e3e9f5;
  --surface:#ffffff;
  --ink:#1b2030;
  --muted:#5d6478;
  --soft:#8b93a7;
  --line:rgba(27,32,48,.10);

  /* Accent territoire (hérité de Carte4D) */
  --accent:#0a84ff;
  --accent-ink:#0a3a82;

  /* Palette briques */
  --b-red:#e8453c;
  --b-orange:#ff8a1e;
  --b-yellow:#ffc21a;
  --b-green:#2ec06a;
  --b-teal:#16b8a6;
  --b-blue:#2f7ff0;
  --b-indigo:#6c63ff;
  --b-purple:#a259e6;
  --b-pink:#f25fae;
  --b-slate:#5b6a86;

  /* Codes départements */
  --d16:#e8453c; /* Charente */
  --d17:#16b8a6; /* Charente-Maritime */
  --d24:#ff8a1e; /* Dordogne */
  --d33:#2f7ff0; /* Gironde */

  --font:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:Fredoka,Nunito,system-ui,sans-serif;
  --radius:18px;
  --wrap:1140px;

  /* Masque d'un tenon (coins arrondis, à plat) — répété sur le haut des briques.
     Bas volontairement débordant pour un raccord net avec le corps de la brique. */
  --stud-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='13'%3E%3Crect x='5' y='2' width='14' height='16' rx='3.5'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, #f7faff 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 10%, #fdf3ee 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:84px 0}
.section.tight{padding:56px 0}

/* Subtle stud-grid backdrop, very faint */
.dotfield{
  background-image:radial-gradient(rgba(27,32,48,.06) 2px, transparent 2.6px);
  background-size:30px 30px;
}

/* ---------- Typographie ---------- */
h1,h2,h3,.display{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.4vw,4rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.15rem,2vw,1.45rem)}
.eyebrow{font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.lead{font-size:clamp(1.05rem,2vw,1.28rem);color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* =====================================================================
   BRIQUE — composant central
   --c = couleur. Tenons générés en CSS.
   ===================================================================== */
.brick{
  --c:var(--b-blue);
  --c-dk:color-mix(in srgb,var(--c) 72%, #000);
  --c-lt:color-mix(in srgb,var(--c) 80%, #fff);
  position:relative;
  display:inline-block;
  background:var(--c);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  border-radius:13px;
  padding:8px 20px 11px;
  box-shadow:
    inset 0 -7px 0 0 var(--c-dk),
    0 12px 22px -12px rgba(20,30,60,.5);
}
/* Tenons (haut de brique). RÈGLE ANTI-ROGNAGE : les tenons débordent de 9px
   au-dessus de la brique. Tout conteneur de briques doit donc réserver ~12px
   en haut (padding-top) et ne jamais utiliser overflow:hidden sur l'axe vertical
   (préférer overflow-x:clip). Voir .hero, .wall, .bx-wrap, .towerCard. */
.brick::before{
  content:"";position:absolute;left:14px;right:14px;top:-9px;height:13px;pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb,var(--c) 80%,#fff), var(--c) 70%);
  -webkit-mask:var(--stud-mask) center top / 24px 13px repeat-x;
          mask:var(--stud-mask) center top / 24px 13px repeat-x;
}
.brick.flat{margin-top:0}
.brick.flat::before{display:none}
.brick.lg{padding:10px 28px 14px;border-radius:15px}

/* couleurs utilitaires */
.c-red{--c:var(--b-red)} .c-orange{--c:var(--b-orange)} .c-yellow{--c:var(--b-yellow);color:#5a4500}
.c-green{--c:var(--b-green)} .c-teal{--c:var(--b-teal)} .c-blue{--c:var(--b-blue)}
.c-indigo{--c:var(--b-indigo)} .c-purple{--c:var(--b-purple)} .c-pink{--c:var(--b-pink)}
.c-slate{--c:var(--b-slate)} .c-accent{--c:var(--accent)}
.c-d16{--c:var(--d16)} .c-d17{--c:var(--d17)} .c-d24{--c:var(--d24)} .c-d33{--c:var(--d33)}
.c-yellow .stud-label,.c-yellow small{color:#5a4500}

/* ---------- Boutons "brique" ---------- */
.btn{
  --c:var(--accent);
  --c-dk:color-mix(in srgb,var(--c) 66%, #000);
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  background:var(--c);color:#fff;border:none;cursor:pointer;
  padding:14px 26px;border-radius:13px;text-decoration:none;
  box-shadow:0 5px 0 0 var(--c-dk), 0 12px 20px -8px rgba(10,40,90,.45);
  transition:transform .08s ease, box-shadow .08s ease, filter .15s;
  white-space:nowrap;
}
.btn:hover{filter:brightness(1.04);transform:translateY(-1px)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 0 var(--c-dk),0 5px 10px -6px rgba(10,40,90,.4)}
.btn.ghost{background:var(--surface);color:var(--ink);box-shadow:0 5px 0 0 #cdd4e4,0 12px 20px -10px rgba(20,30,60,.3)}
.btn.ghost:active{box-shadow:0 1px 0 0 #cdd4e4}
.btn.sm{padding:10px 18px;font-size:.9rem;border-radius:11px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Chips / tags ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.82rem;
  padding:6px 13px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}

/* =====================================================================
   NAVIGATION
   ===================================================================== */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(10px);
  background:rgba(238,242,249,.82);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--font-display);
  font-weight:700;font-size:1.25rem;color:var(--ink)}
.brandmark{height:40px;width:auto;display:block;flex:0 0 auto}
.foot .brandmark{height:38px}

/* Petites briques "code" (4D16…) avec tenons */
.code-bricks{display:flex;gap:9px;flex-wrap:wrap;margin:4px 0 16px}
/* Rangée code + nom de département (nom sous le bon 4D) */
.dept-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 20px;max-width:560px}
@media(max-width:540px){.dept-row{grid-template-columns:repeat(2,1fr)}}
.dept-col{display:flex;flex-direction:column;align-items:center;gap:7px}
.dept-col .dn{font-family:var(--font-display);font-weight:700;font-size:.66rem;color:var(--muted);
  white-space:nowrap;line-height:1.2}
.mini-brick{--c:var(--accent);--c-dk:color-mix(in srgb,var(--c) 72%,#000);
  position:relative;display:inline-block;background:var(--c);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.02em;
  padding:8px 13px 7px;border-radius:9px;
  box-shadow:inset 0 -4px 0 var(--c-dk),0 6px 12px -8px rgba(20,30,60,.45)}
.mini-brick::before{content:"";position:absolute;left:9px;right:9px;top:-5px;height:8px;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 80%,#fff),var(--c) 70%);
  -webkit-mask:var(--stud-mask) center top / 15px 8px repeat-x;
          mask:var(--stud-mask) center top / 15px 8px repeat-x}
.nav-links{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav-links a{font-weight:700;font-size:.95rem;color:var(--muted);text-decoration:none;
  padding:8px 13px;border-radius:10px;transition:background .15s,color .15s}
.nav-links a:hover{color:var(--ink);background:rgba(10,132,255,.08)}
.nav-links a.active{color:var(--accent-ink);background:rgba(10,132,255,.12)}
.nav-cta{margin-left:6px}
.nav-toggle{display:none;margin-left:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;width:44px;height:40px;cursor:pointer;font-size:1.3rem;align-items:center;justify-content:center}
@media(max-width:860px){
  .nav-links{position:fixed;inset:62px 0 auto 0;flex-direction:column;gap:4px;align-items:stretch;
    background:var(--bg);padding:16px 24px 22px;border-bottom:1px solid var(--line);
    transform:translateY(-130%);transition:transform .3s ease;box-shadow:0 20px 30px -20px rgba(0,0,0,.3)}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:13px}
  .nav-cta{margin:6px 0 0}
  .nav-toggle{display:flex}
}

/* =====================================================================
   HERO
   ===================================================================== */
/* overflow-x:clip contient l'horizontal sans rogner les tenons qui dépassent en haut */
.hero{position:relative;padding:72px 0 40px;overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:32px}}
.hero h1{margin:14px 0 18px}
.hero h1 .hl{color:var(--accent)}
.tagbar{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 0}

/* Mur de briques animé (hero visual) */
.wall{position:relative;display:flex;flex-direction:column;gap:0;align-items:center;
  padding:18px 10px 10px;filter:drop-shadow(0 30px 40px rgba(20,40,80,.18))}
.wall .row{display:flex;gap:9px;margin-top:20px}
.wall .brick{margin-top:0}
.wall .brick.drop{opacity:0;transform:translateY(-60px) rotate(-4deg);animation:drop .6s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes drop{60%{opacity:1}100%{opacity:1;transform:translateY(0) rotate(0)}}
/* Mur réordonnable : survol = petit mouvement, maintien + glisser = changer l'ordre */
/* RÈGLE ANTI-ROGNAGE : l'écart vertical (row-gap) entre briques doit toujours
   dépasser la hauteur des tenons (~9px) pour qu'ils ne soient jamais coupés. */
.wall.sortable{flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;gap:24px 14px}
.wall.sortable .brick{margin-top:0;cursor:grab;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,opacity .18s}
.wall.sortable .brick:not(.drop):hover{transform:translateY(-4px) rotate(-2deg)}
.wall.sortable .brick:active{cursor:grabbing}
.wall.sortable .brick.dragging{opacity:.45;transform:scale(1.06) rotate(2deg)}

/* =====================================================================
   CARTES / GRILLES
   ===================================================================== */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:0 18px 40px -28px rgba(20,30,60,.5);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(20,30,60,.55)}
.card .ico{width:52px;height:46px;border-radius:11px;display:grid;place-items:center;font-size:1.5rem;
  color:#fff;margin-bottom:16px;position:relative;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),inset 0 3px 0 rgba(255,255,255,.22)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:.97rem}

.step-num{font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--accent);
  letter-spacing:.1em}

/* Bandeau plaque */
.plate{position:relative;background:var(--bg-2);border-radius:22px;padding:30px;
  border:1px solid var(--line)}

/* Section colorée */
.band{background:linear-gradient(170deg,#0d2a57 0%,#103a76 100%);color:#fff}
.band .lead,.band .muted{color:rgba(255,255,255,.78)}
.band .eyebrow{color:#7fc0ff}

/* ---------- Footer ---------- */
.foot{background:#0d1426;color:#c9d2e6;padding:54px 0 30px;margin-top:40px}
.foot a{color:#c9d2e6;text-decoration:none}
.foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
.foot h4{font-family:var(--font-display);color:#fff;margin-bottom:14px;font-size:1rem}
.foot .dept-codes{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.code-pill{font-family:var(--font-display);font-weight:700;font-size:.8rem;color:#fff;
  padding:5px 11px;border-radius:8px;background:rgba(255,255,255,.08)}
.foot-bottom{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.85rem;color:#8b95ad;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* =====================================================================
   REVEAL au scroll
   ===================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease, transform .6s cubic-bezier(.34,1.4,.64,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .wall .brick.drop{animation:none;opacity:1;transform:none}
}

/* utilitaires */
.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt40{margin-top:40px}
.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}.mb40{margin-bottom:40px}
.pill-note{display:inline-flex;gap:8px;align-items:center;font-size:.85rem;font-weight:700;color:var(--muted);
  background:var(--surface);border:1px dashed var(--line);border-radius:999px;padding:7px 15px}

/* Icônes SVG */
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.16em;flex:0 0 auto}
.card .ico{display:flex;align-items:center;justify-content:center}
.ico .ic{width:26px;height:26px;display:block}
.btn .ic{width:1.05em;height:1.05em;vertical-align:-.16em}
.pill-note .ic,.fiche-links .ic{width:1.05em;height:1.05em}