/* ===============================
   Atelier Antoine Leclercq — Index
   Mobile-first CSS
   =============================== */

/* ----- Variables & Reset ----- */
:root{
  --text:#111;
  --muted:#555;
  --bg:#fff;
  --border:#eee;
  --chip:#f6f6f6;

  --pad-min:16px;   /* padding latéral min */
  --pad-max:32px;   /* padding latéral max */
  --gap:16px;
  --radius:12px;

  /* gouttières renforcées (override global) */
  --gutter-sm: 20px;   /* mobile */
  --gutter-md: 32px;   /* tablette */
  --gutter-lg: 56px;   /* desktop large */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

/* ----- Conteneurs avec padding fluide ----- */
.container{
  padding-left: clamp(var(--pad-min), 5vw, var(--pad-max));
  padding-right: clamp(var(--pad-min), 5vw, var(--pad-max));
}
header,
footer.custom-footer{
  padding-left: clamp(var(--pad-min), 5vw, var(--pad-max));
  padding-right: clamp(var(--pad-min), 5vw, var(--pad-max));
}
/* Safe-area iOS */
@supports (padding:max(0px)) {
  .container{
    padding-left: max(clamp(var(--pad-min),5vw,var(--pad-max)), env(safe-area-inset-left));
    padding-right:max(clamp(var(--pad-min),5vw,var(--pad-max)), env(safe-area-inset-right));
  }
  header,
  footer.custom-footer{
    padding-left: max(clamp(var(--pad-min),5vw,var(--pad-max)), env(safe-area-inset-left));
    padding-right:max(clamp(var(--pad-min),5vw,var(--pad-max)), env(safe-area-inset-right));
  }
}

/* ======= FIX GLOBAL GOUTTIÈRES (écrase styles hérités) ======= */
:where(header, .container, footer.custom-footer){
  padding-left: clamp(var(--gutter-sm), 5vw, var(--gutter-md)) !important;
  padding-right: clamp(var(--gutter-sm), 5vw, var(--gutter-md)) !important;
}
@supports (padding:max(0px)){
  :where(header, .container, footer.custom-footer){
    padding-left: max(clamp(var(--gutter-sm), 5vw, var(--gutter-md)), env(safe-area-inset-left)) !important;
    padding-right: max(clamp(var(--gutter-sm), 5vw, var(--gutter-md)), env(safe-area-inset-right)) !important;
  }
}
@media (min-width: 1200px){
  :where(header, .container, footer.custom-footer){
    padding-left: var(--gutter-lg) !important;
    padding-right: var(--gutter-lg) !important;
  }
}

/* ----- Accessibilité visuelle ----- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ===============================
   Header / Navigation
   =============================== */
header{
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:1000;
  padding-top:12px; padding-bottom:12px;
}
nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
nav h1{ font-size:1.125rem; margin:0; font-weight:600; }
.nav-links{
  display:none; flex-direction:column; gap:10px; width:100%;
  list-style:none; margin:0; padding:0;
}
.nav-links a{ padding:10px 0; display:block; border-top:1px solid #f2f2f2; }

/* Bouton burger */
.nav-toggle{
  appearance:none; border:1px solid #ddd; background:#fff; border-radius:10px; padding:8px 10px;
  display:none; align-items:center; gap:8px; cursor:pointer;
}
.nav-toggle svg{ width:22px; height:22px; }
.nav-toggle:focus{ outline:2px solid #222; outline-offset:2px; }

/* Ouverture menu mobile via .nav-open sur header */
header.nav-open .nav-links{ display:flex !important; }

/* Desktop nav */
@media (min-width:900px){
  header{ padding-top:16px; padding-bottom:16px; }
  nav h1{ font-size:1.25rem; }
  .nav-toggle{ display:none; }
  .nav-links{ display:flex !important; flex-direction:row; gap:20px; width:auto; }
  .nav-links a{ border:0; padding:0; }
}

/* Mobile : montrer le burger et replier la nav */
@media (max-width:899.98px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{ display:none !important; }
}

/* ===============================
   Section Projets
   =============================== */
#projets{ padding:20px 0 40px; }

.project-header{
  display:flex; flex-direction:column; gap:.75em; align-items:flex-start;
  margin-bottom:1.25em;
}
.project-header h2{
  margin:0 !important;
  font-size:1.35rem;
  text-align:left !important; /* corrige le h2 centré global */
}
.filters{
  display:flex; flex-wrap:wrap; gap:.75em;
  margin-top:.25em; margin-bottom:1.25em;  /* plus d’air */
}
.filters button{
  padding:.6em 1.1em;
  border-radius:999px;
  border:1px solid #ddd;
  background:#f6f6f6;
  cursor:pointer;
  transition:transform .02s ease-in, background .2s, color .2s, border-color .2s;
}
.filters button:active{ transform:scale(.98); }
.filters button.active{ background:#111; color:#fff; border-color:#111; }

/* Hovers colorés (comme avant) */
.filters button[data-filter="identity"]:hover { background:#64F58D; color:#fff; border-color:#64F58D; }
.filters button[data-filter="typography"]:hover { background:#FFCA3A; color:#111; border-color:#FFCA3A; }
.filters button[data-filter="anime"]:hover { background:#2D4CC8; color:#fff; border-color:#2D4CC8; }
.filters button[data-filter="print"]:hover { background:#7FC8F8; color:#111; border-color:#7FC8F8; }

/* Grille responsive */
.grid{
  display:grid;
  grid-template-columns:repeat(1, minmax(0,1fr));
  gap:14px;
}
@media (min-width:600px){
  .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
}
@media (min-width:900px){
  .grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
}
@media (min-width:1200px){
  .grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

/* Carte projet — compatible deux variantes :
   - ancienne (.project-img en background)
   - nouvelle (<img class="thumb">) */
.project{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:box-shadow .2s ease;
  text-align:left;
}
.project:hover{ box-shadow:0 6px 22px rgba(0,0,0,.06); }
.project a{ display:block; height:100%; }

.project-img{
  width:100%;
  height:220px;
  background-size:cover;
  background-position:center;
  filter:grayscale(1);
  transition:filter .3s ease-in-out;
}
.project:hover .project-img{ filter:grayscale(0); }

/* Variante image balise */
.thumb{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  filter:grayscale(1); transition:filter .3s ease-in-out;
}
.project:hover .thumb{ filter:grayscale(0); }

.project .card-body{ padding:12px var(--gap) 14px; }
.project h4{ margin:0 0 4px; font-weight:600; font-size:1.05rem; }
.project p{ margin:0; font-size:.95rem; color:var(--muted); }

/* ===============================
   Sliders (si présents sur d’autres pages)
   =============================== */
.project-slider{ margin-bottom:2em; }
.project-slider .item img{
  width:100%; height:auto; display:block; border-radius:8px;
}

/* ===============================
   Footer
   =============================== */
.custom-footer{
  display:grid; gap:20px; grid-template-columns:1fr; 
  background:#fff; border-top:1px solid var(--border);
  padding-top:24px; padding-bottom:40px;
}
.footer-col{ min-width:0; }
.footer-col.left{ text-align:left; }
.footer-col h2, .footer-col h3{ margin:.25rem 0 .5rem; font-size:1.05rem; }
.footer-col p{ margin:.25rem 0 1rem; color:#333; }
.custom-footer a{ text-decoration:underline; }
.custom-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.footer-col li{ margin:0; }

.footer-col.right ul li a {
  text-decoration: none;
  color: inherit;
}
.footer-col.right ul li a:hover {
  text-decoration: underline;
}

@media (min-width:900px){
  .custom-footer{ grid-template-columns:2fr 1fr 1fr; }
}

/* ===============================
   Modale (si utilisée)
   =============================== */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.9);
  display:flex; justify-content:center; align-items:center;
  z-index:999;
}
.modal.hidden{ display:none; }
.modal img{ max-width:90vw; max-height:90vh; }
.close{
  position:absolute; top:1em; right:1em; font-size:2em; color:#fff; cursor:pointer;
}

/* ===============================
   Titres globaux (fallback)
   =============================== */
h2{
  text-align:left;
  margin-bottom:1em;
}

/* ===== Logo SVG (fichier) ===== */
.brand { display:flex; align-items:center; margin:0; }
#logo-icon{ height:28px; width:auto; display:block; }
@media (min-width:900px){ #logo-icon{ height:36px; } }

/* ===== Burger 3 barres + morph en X ===== */
.nav-toggle {
  position: relative;
  width: 44px; height: 40px;
  border:1px solid #ddd; border-radius:10px; background:#fff; cursor:pointer;
  display:none; align-items:center; justify-content:center;
}
.nav-toggle .bar{
  position:absolute; width:22px; height:2px; background:#111;
  transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.nav-toggle .bar:nth-child(1){ top:12px; }
.nav-toggle .bar:nth-child(2){ top:19px; }
.nav-toggle .bar:nth-child(3){ top:26px; }
.nav-toggle:focus{ outline:2px solid #222; outline-offset:2px; }

/* Mobile : burger visible, menu replié */
@media (max-width:899.98px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{ display:none !important; }
}

/* Morph en X quand ouvert */
header.nav-open .nav-toggle .bar:nth-child(1){ transform:rotate(45deg); top:19px; }
header.nav-open .nav-toggle .bar:nth-child(2){ opacity:0; }
header.nav-open .nav-toggle .bar:nth-child(3){ transform:rotate(-45deg); top:19px; }

/* ===== Menu plein écran (mobile) ===== */
@media (max-width:899.98px){
  .nav-links{
    position: fixed; inset: 0; background:#fff; display:none !important;
    padding: 96px clamp(20px, 5vw, 32px) 32px;
    align-items:center; justify-content:center; gap: 18px; flex-direction:column;
  }
  header.nav-open .nav-links{ display:flex !important; }
  .nav-links li{ list-style:none; }
  .nav-links a{ font-size: 1.75rem; font-weight:600; padding: 12px 0; border:0; }
  header.nav-open{ background:transparent; border-bottom-color: transparent; }
}

/* Empêche le scroll du body quand le menu est ouvert */
body.is-locked { height:100vh; overflow:hidden; }

/* === Padding & spacing des textes de carte === */

/* Cas A : h4 / p directement dans le <a> */
.project a > h4,
.project a > p{
  padding-left: var(--gap);
  padding-right: var(--gap);
}

.project a > h4{
  padding-top: 12px;
  margin: 0 0 4px;
  line-height: 1.25;
}

.project a > p{
  padding-bottom: 14px;
  margin: 0;
  color: var(--muted);
}

/* Cas B : si tu utilises .card-body sur certaines cartes */
.project .card-body{
  padding: 14px var(--gap) 16px;
}
@media (min-width: 900px){
  .project .card-body{
    padding: 16px calc(var(--gap) + 2px) 18px;
  }
}

/* Légère hausse du gap de grille pour mieux respirer */
@media (min-width: 900px){
  .grid{ gap: 22px; }
}

/* === Filtres : confort mobile & accessibilité === */
.filters{
  /* permet un défilement horizontal si ça déborde sur petits écrans */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 4px; /* pour éviter que les chips collent au bas */
}

.filters button{
  min-height: 44px;                /* cible tactile */
  min-width: 44px;
  font-size: 1rem;
  padding: .65em 1.15em;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #f6f6f6;
  transition: transform .06s ease, background .2s, color .2s, border-color .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent; /* iOS tap flash off */
  touch-action: manipulation;               /* réduit latence tactile */
}

.filters button:active{
  transform: scale(.98);
}

.filters button:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0,0,0,.12);
}

.filters button.active{
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Légère élévation sur hover (desktop) */
@media (hover:hover){
  .filters button:hover{
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
  }
}

/* Ligne de filtres "collante" en haut de la section (optionnel mais agréable) */
@media (max-width: 899.98px){
  #projets .project-header{
    position: sticky;
    top: calc(56px); /* ≈ hauteur du header ; ajuste si besoin */
    background: #fff;
    z-index: 10;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* --- Style des compteurs d’items sur les boutons --- */
.filters button {
  position: relative;
}
.filters button .count {
  margin-left: .35em;
  font-size: .75em;      /* exposant plus petit */
  line-height: 1;
  vertical-align: super; /* vrai exposant */
  opacity: .8;
}
/* assure une bonne lisibilité sur bouton actif (fond sombre) */
.filters button.active .count {
  opacity: 1;
}
/* Esthètique des crédits dans les pages projets */
.project-subtitle {
  margin: 0 0 .5rem;
  color: #555;
}
.project-credits {
  margin: 0 0 1.25rem;
  font-size: .9rem;
  color: #777;
  line-height: 1.5;
}
/* Esthètique de la grille des projets liés dans les pages projets */
.related-projects {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid #eee;
}
.related-projects h2 {
  font-size: 1.25rem;
  margin: 0 0 1rem;
}

.related-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.related-item {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.related-item img {
  border-radius: 8px;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.related-item .legend {
  font-weight: 500;
  text-align: center;
}
.related-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}