/* =========================================================
   Artisium — feuille de style commune (accueil + /apercu/)
   Direction artistique « Atelier numérique »
   ========================================================= */

/* ---- Polices auto-hébergées (installées dans /assets/fonts/) ----
   Si les fichiers sont absents, les polices de secours prennent le relais. */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight:200 800; font-display:swap;
}
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url("fonts/atkinson-regular.woff2") format("woff2");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url("fonts/atkinson-bold.woff2") format("woff2");
  font-weight:700; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/jetbrains-mono.woff2") format("woff2");
  font-weight:100 800; font-display:swap;
}

:root{
  /* Palette tirée du logo */
  --nuit:#14191f;
  --nuit-2:#1c242d;
  --nuit-3:#26303b;
  --ardoise:#3d4a57;
  --papier:#f6f3ec;
  --papier-2:#ece6da;
  --blanc:#ffffff;
  --encre:#1b2128;
  --encre-douce:#4a5562;
  --clair:#eef1f4;
  --clair-doux:#a9b4c0;
  --vert:#4fbf7c;          /* sur fond sombre */
  --vert-fonce:#2b7a4b;    /* sur fond clair */
  --vert-pale:#e3efe5;
  --orange:#e8843f;        /* fonds de boutons (texte sombre dessus) */
  --orange-texte:#a24c17;  /* texte orange sur fond clair */
  --trait:rgba(27,33,40,.14);
  --trait-clair:rgba(238,241,244,.14);

  --display:"Bricolage Grotesque","Segoe UI",system-ui,-apple-system,sans-serif;
  --texte:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  --r-s:10px; --r-m:16px; --r-l:24px;
  --ombre:0 24px 60px -28px rgba(20,25,31,.45);
  --ease:cubic-bezier(.22,.8,.24,1);
  --large:1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--papier); color:var(--encre);
  font-family:var(--texte); font-size:1.125rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--display); line-height:1.1; margin:0 0 .5em; letter-spacing:-.015em; font-weight:700; }
p{ margin:0 0 1em; }
a{ color:inherit; }
button{ font:inherit; }
:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:6px; }

.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; }
.wrap{ max-width:var(--large); margin:0 auto; padding:0 20px; }
/* Les liens du menu ne cachent plus le titre de la section sous la barre fixe */
section[id]{ scroll-margin-top:72px; }
@media(min-width:760px){ .wrap{ padding:0 32px; } }

/* Petites étiquettes techniques */
.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--orange-texte);
}
.tag::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.sombre .tag{ color:var(--orange); }

/* Emplacements à compléter : bien visibles pour ne rien oublier */
.a-remplir{ background:#fff3c4; color:#5a4300; border:1px dashed #c9a227; border-radius:4px; padding:0 4px; font-family:var(--mono); font-size:.85em; }

/* ---- Boutons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 26px; border-radius:999px;
  font-family:var(--texte); font-weight:700; font-size:1.05rem; text-decoration:none;
  border:2px solid transparent; cursor:pointer;
  transition:transform .2s var(--ease), background-color .2s, border-color .2s, box-shadow .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-orange{ background:var(--orange); color:var(--nuit); box-shadow:0 12px 28px -14px rgba(232,132,63,.9); }
.btn-orange:hover{ background:#f0924f; }
.btn-ligne{ border-color:currentColor; color:inherit; background:transparent; }
.btn-ligne:hover{ background:color-mix(in srgb, currentColor 8%, transparent); }
.btn-nuit{ background:var(--nuit); color:var(--clair); }
.btn-nuit:hover{ background:#000; }
.btn svg{ flex:none; }

/* ---- Navigation ---- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(20,25,31,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--trait-clair); color:var(--clair);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; }
.marque{ display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--clair); }
.marque img{ height:38px; width:38px; border-radius:9px; box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.nav-liens{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nav-liens a{ text-decoration:none; font-size:1rem; padding:10px 12px; border-radius:8px; color:var(--clair-doux); white-space:nowrap; }
.nav-actions .btn{ white-space:nowrap; }
.nav-liens a:hover{ color:var(--clair); background:rgba(255,255,255,.06); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-actions .btn{ min-height:44px; padding:8px 18px; font-size:.98rem; }
.btn-tel{ width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid var(--trait-clair); color:var(--clair); text-decoration:none; }
.btn-tel:hover{ border-color:var(--orange); color:var(--orange); }
.burger{ display:none; width:44px; height:44px; border-radius:10px; border:1.5px solid var(--trait-clair); background:transparent; color:var(--clair); cursor:pointer; align-items:center; justify-content:center; }
@media(max-width:1180px){
  .burger{ display:inline-flex; }
  .nav-liens{
    position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0;
    background:var(--nuit); border-bottom:1px solid var(--trait-clair); padding:8px 20px 20px; display:none;
  }
  .nav-liens.ouvert{ display:flex; }
  .nav-liens a{ display:block; padding:14px 8px; font-size:1.1rem; border-bottom:1px solid var(--trait-clair); border-radius:0; }
  .nav-actions .btn-apercu{ display:none; }
}

/* ---- Pied de page ---- */
.pied{ background:var(--nuit); color:var(--clair-doux); padding:56px 0 40px; font-size:1rem; }
.pied-grille{ display:grid; gap:32px; }
@media(min-width:760px){ .pied-grille{ grid-template-columns:1.4fr 1fr 1fr; } }
.pied .marque{ margin-bottom:12px; }
.pied h3{ font-size:1rem; color:var(--clair); margin-bottom:12px; font-family:var(--texte); }
.pied ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pied a{ color:var(--clair-doux); text-decoration:underline; text-underline-offset:3px; }
.pied a:hover{ color:var(--clair); }
.pied .marque{ text-decoration:none; color:var(--clair); }
.pied-bas{ margin-top:40px; padding-top:20px; border-top:1px solid var(--trait-clair); font-size:.9rem; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; }

/* ---- Apparitions au défilement ---- */
.revele{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.revele.vu{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .revele{ opacity:1; transform:none; }
  .btn:hover{ transform:none; }
}