/* ===========================
   ARTKWI – Les Jardins du Divers (2025)
   =========================== */
:root{
  --pink: #e6417a;
  --primary: rgb(16,48,128);
  --accent: rgb(48,64,144);
  --muted: rgb(32,48,128);
  --ink: rgb(16,32,128);
  --bg: #ffffff;
  --text: #0b0b0b;
  --header-h: 96px; /* hauteur header desktop */
}

/* Défilement & ancrages */
html{
  scroll-padding-top: var(--header-h);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.section{ scroll-margin-top: var(--header-h); }

/* Empêche tout scroll horizontal parasite */
html, body{ overflow-x:hidden }
.section{ overflow-x:clip }

/* Body : compense le header fixe */
body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue','Noto Sans', Arial, 'Apple Color Emoji','Segoe UI Emoji';
  line-height:1.5;
  padding-top: var(--header-h);
}

@media (max-width: 760px){
  :root{ --header-h: 118px; }
  body{ padding-top: var(--header-h); }
}

/* Images & conteneur */
*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
.container{width:min(1200px,94vw);margin:0 auto}

/* Header FIXE */
.header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(6px);
  border-bottom:1px solid #eee;
}
.header .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0; gap:1.25rem;
}

/* Bloc brand */
.brand a{
  /* IMPORTANT : le brand n'est pas rose */
    color: var(--primary) !important; text-decoration:none;
  font-family:'Oswald', Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial;
  font-weight:600;
  letter-spacing:.2px;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem);
  line-height:1.05;
}


.brand small{
  display:block;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial;
  font-weight:600; color:#444; opacity:.95;
  font-size: clamp(1rem, .9rem + .6vw, 1.25rem);
  margin-top:.1rem; margin-bottom:.2rem;
}

/* Navigation */
.nav{
  display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
  margin-top:.15rem;
}
.nav a{
  text-decoration:none; color:#333;
  padding:.4rem .6rem; border-radius:.5rem; transition:background .2s;
}
.nav a:hover{ background:rgba(0,0,0,.06) }

.burger{display:none}
@media (max-width: 760px){
  .nav{display:none}
  .burger{
    display:inline-flex; align-items:center; gap:.5rem;
    border:1px solid #ddd; padding:.35rem .6rem;
    border-radius:.6rem; background:#fff
  }
  .nav.open{display:flex;flex-direction:column;align-items:flex-start;padding:.5rem 0}
}

/* Hero */
.hero{background:#f9f9f9}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:2rem 0}
@media (max-width: 900px){ .hero .wrap{grid-template-columns:1fr;gap:1rem} }
.badge{display:inline-block;background:var(--pink);color:white;padding:.25rem .6rem;border-radius:999px;font-size:.85rem;letter-spacing:.3px}

/* Boutons */
.cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem .9rem;border-radius:.7rem;font-weight:600;text-decoration:none}
.btn.primary{background:var(--primary);color:#fff}
.btn.ghost{border:1px solid var(--primary);color:var(--primary)}
.btn:hover{filter:brightness(1.05)}

/* Sections */
.section{padding:3rem 0;border-top:1px solid #efefef}
.section h2{
  font-family:'Oswald', Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial;
  font-weight:600; letter-spacing:.2px; line-height:1.05;
  font-size:clamp(1.4rem,1.2rem + 1vw,2rem); color:var(--primary); margin:.2rem 0 1rem
}
.section p.lead{font-size:1.05rem;opacity:.95}

/* Grilles */
.card{border:1px solid #eee;border-radius:14px;padding:1rem;background:#fff}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width: 820px){ .grid-2{grid-template-columns:1fr} }

/* Galerie */
.kv-three{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
@media (max-width: 480px){ .kv-three{ grid-template-columns:1fr } }

/* Planning */
.schedule{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start;margin-top:1rem}
.schedule .item{border-left:4px solid var(--accent);padding-left:.75rem}
@media (max-width: 860px){ .schedule{grid-template-columns:1fr} }

/* Partenaires (logos jamais débordants) */
.partners{ padding:.5rem; overflow:hidden; }
.partners img{ display:block; width:100%; max-width:100%; height:auto; object-fit:contain }

/* Images jamais recadrées */
.nocrop img{object-fit:contain;width:100%}

/* Petits utilitaires */
.small{font-size:.92rem;opacity:.9}
.u-underline{background:linear-gradient(transparent 60%, rgba(230,65,122,.25) 0) no-repeat}
.mark{background:rgba(230,65,122,.12); padding:.05rem .2rem; border-radius:.25rem}

/* Typo : titres secondaires */
h3, h4{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial;
  font-weight:700; letter-spacing:.2px; line-height:1.2;
}
h1{font-size:clamp(2rem,1.2rem + 3.2vw,3.2rem)} /* H1 hero */
.hero h1{
  color: var(--primary);
}
/* Listes denses */
.bullets-tight > li{ margin-bottom:.35rem }
.bullets-tight ul{ margin:.35rem 0 0 .9rem }

/* Liens en rose charte (hors menu & brand) */
a{
  color: var(--pink);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--pink) 40%, transparent);
}
a:hover{ color:var(--pink); text-decoration-color: var(--pink); }
a:visited{ color:var(--pink); }
a:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--pink) 60%, white 40%);
  outline-offset: 2px; border-radius: 4px;
}
/* exceptions : menu et brand */
.nav a{ color:#333; text-decoration:none }
.nav a:hover{ background:rgba(0,0,0,.06) }

/* Mentions légales : lien en noir dans le footer, sans souligné */
.footer a[href$="mentions-legales.html"]{ color:#000; text-decoration:none }
.footer a[href$="mentions-legales.html"]:hover,
.footer a[href$="mentions-legales.html"]:focus{ color:#000; text-decoration:none }
.footer a[href$="mentions-legales.html"]:visited{ color:#000 }

/* Footer */
.footer{padding:2rem 0;border-top:1px solid #eee;font-size:.95rem;color:#333}
@media (max-width: 640px){
  .footer .container > div{
    justify-content: center !important; text-align: center; gap: .5rem !important;
  }
  .footer .container > div > *{ width:100% }
}

/* Bouton retour haut (vraiment caché par défaut) */
.to-top{
  position: fixed;
  right: clamp(10px, 3vw, 20px);
  bottom: 20px;
  z-index: 60;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--primary) 70%, transparent);
  color:#fff; box-shadow: 0 6px 18px rgba(0,0,0,.15);
  cursor:pointer;

  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .2s ease, transform .2s ease, bottom .2s ease, background .2s ease, visibility 0s linear .2s;
}
.to-top.show{
  opacity:.8; visibility:visible; pointer-events:auto;
  transition: opacity .2s ease, transform .2s ease, bottom .2s ease, background .2s ease, visibility 0s;
}
.to-top:hover{ opacity:1; background: color-mix(in srgb, var(--primary) 85%, transparent) }
.to-top:active{ transform: translateY(1px) }
.to-top.avoid-footer{ bottom: 96px; }
@media (max-width: 640px){
  .to-top{ width:36px; height:36px; right:12px; bottom:16px }
  .to-top.avoid-footer{ bottom:88px }
}


/* Dropdown mobile sous le bouton "Menu" */
@media (max-width: 760px){
  .header .bar{ position: relative; }          /* ancre pour le positionnement absolu */
  .nav{
    position: absolute;
    top: 100%;                                  /* juste sous la barre */
    right: 0;
    display: none;                              /* caché par défaut */
    flex-direction: column;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: .35rem;
    width: clamp(220px, 60vw, 320px);
    box-shadow: 0 14px 36px rgba(0,0,0,.12);
    margin-top: .4rem;
    z-index: 200;                               /* au-dessus du contenu */
  }
  .nav.open{ display: flex; }
  .nav a{
    display:block;
    padding:.6rem .8rem;
    border-radius: .55rem;
  }
  .nav a:hover{ background: rgba(0,0,0,.06); }

  /* Le bouton ne bouge pas, texte inchangé */
  .burger{ white-space: nowrap; }
}
/* Burger toujours noir (iOS/Android) */
.burger{
  color:#000 !important;            /* texte + icône noirs */
  background:#fff;
  border:1px solid #ddd;
  -webkit-appearance:none;          /* retire le style système iOS */
  appearance:none;
  -webkit-tap-highlight-color: transparent; /* pas d’éclair bleuté au tap */
}
.burger *{ color:#000 !important; } /* au cas où un span/svg serait dedans */

.burger:focus,
.burger:active{
  color:#000 !important;
  background:#f5f5f5;               /* petit feedback gris au tap */
  outline:none;
}
/* Galerie : toujours 3 images côte à côte */
#galerie .kv-three{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px;
}
#galerie .kv-three img{
  width: 100%;
  height: auto;           /* pas de recadrage */
  object-fit: contain;
}

/* Neutralise tes anciens breakpoints qui mettaient la galerie en 1 colonne */
@media (max-width: 9000px){
  .kv-three{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* Une carte qui occupe les 2 colonnes de la grille */
.grid-2 .card.span-2{
  grid-column: 1 / -1;
}