/* =========================================================
   BASE
   Police : Jost (gratuite, très proche de Futura), chargée
   depuis Google Fonts dans le <head> du fichier index.html.
   ========================================================= */

:root {
  --noir: #000;
  --blanc: #fff;
  --gris-bloc: #e0e0de;
  --gris-survol: #f1f1ef;
  --police: "Jost", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--police);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
}

a {
  color: inherit;
}

/* Les boutons radio qui pilotent les onglets et les filtres
   sont invisibles (mais restent accessibles au clavier). */
input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   PAGE
   ========================================================= */

.page {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 5% 60px;
}

/* =========================================================
   EN-TÊTE (bloc réservé à ton image)
   ========================================================= */

.header-image {
  width: 51%;
  min-width: 260px;
  aspect-ratio: 665 / 147;
  background: var(--gris-bloc);
}

.header-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Dès qu'une image est placée dans le bloc, le gris disparaît */
.header-image:has(img) {
  aspect-ratio: auto;
  background: none;
}

/* =========================================================
   ONGLETS
   ========================================================= */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  width: 72%;
  max-width: 940px;
  margin: 46px auto 48px;
}

.tab {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: 0 12px;
  border: 1px solid var(--noir);
  font-size: 0.8rem;
  font-weight: 300;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.tab:hover {
  background: var(--gris-survol);
}

/* Onglet actif */
#tab-apropos:checked ~ .page label[for="tab-apropos"],
#tab-galerie:checked ~ .page label[for="tab-galerie"],
#tab-contacts:checked ~ .page label[for="tab-contacts"],
#tab-cv:checked ~ .page label[for="tab-cv"],
#tab-boutique:checked ~ .page label[for="tab-boutique"] {
  background: var(--noir);
  color: var(--blanc);
}

/* Panneaux : seul l'onglet actif est affiché */
.panel {
  display: none;
}

#tab-apropos:checked ~ .page #panel-apropos,
#tab-galerie:checked ~ .page #panel-galerie,
#tab-contacts:checked ~ .page #panel-contacts,
#tab-cv:checked ~ .page #panel-cv,
#tab-boutique:checked ~ .page #panel-boutique {
  display: block;
}

/* Panneaux de texte (à propos, cv, contacts, boutique) */
.panel-texte {
  width: 72%;
  max-width: 940px;
  margin: 0 auto;
}

.panel-texte h2 {
  margin: 0 0 12px;
  font-size: 1.5rem;
  font-weight: 500;
}

/* =========================================================
   FILTRES
   ========================================================= */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  width: 72%;
  max-width: 940px;
  margin: 0 auto 45px;
}

.chip {
  min-width: 98px;
  padding: 4px 22px;
  border: 1px solid var(--noir);
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.chip:hover {
  background: var(--gris-survol);
}

/* Filtre actif : gras + contour épaissi (sans décaler la mise en page) */
#f-tout:checked ~ .page .chip[for="f-tout"],
#f-visuel:checked ~ .page .chip[for="f-visuel"],
#f-sonore:checked ~ .page .chip[for="f-sonore"],
#f-design:checked ~ .page .chip[for="f-design"],
#f-performatif:checked ~ .page .chip[for="f-performatif"],
#ap-demarche:checked ~ .page .chip[for="ap-demarche"],
#ap-moment:checked ~ .page .chip[for="ap-moment"] {
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--noir);
}

/* Sous-onglets de "À propos" */
.panel-texte .chips {
  width: 100%;
  margin: 0 0 30px;
}

.sous-panel {
  display: none;
}

#ap-demarche:checked ~ .page #sp-demarche,
#ap-moment:checked ~ .page #sp-moment {
  display: block;
}

/* =========================================================
   GRILLE — 4 PROJETS PAR LIGNE
   ========================================================= */

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tabs,
  .chips,
  .panel-texte {
    width: 100%;
  }

  .tabs {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   CARTES (un projet = un lien vers son URL)
   ========================================================= */

.card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 6 / 5;
  background: var(--gris-bloc);
  text-decoration: none;
}

.card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card:hover img,
.card:focus-visible img {
  transform: scale(1.05);
}

/* =========================================================
   FILTRAGE
   Une carte peut avoir plusieurs classes (ex. "visuel performatif") :
   elle reste visible dès que l'une d'elles correspond au filtre.
   "Tout" n'a pas de règle : tout reste affiché.
   ========================================================= */

#f-visuel:checked ~ .page .card:not(.visuel),
#f-sonore:checked ~ .page .card:not(.sonore),
#f-design:checked ~ .page .card:not(.design),
#f-performatif:checked ~ .page .card:not(.performatif) {
  display: none;
}

/* =========================================================
   SURVOL
   ========================================================= */

.card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.card:hover .card-overlay,
.card:focus-visible .card-overlay {
  opacity: 1;
}

.card-title {
  color: var(--blanc);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.25;
  transform: translateY(4px);
  transition: transform 0.35s ease;
}

.card:hover .card-title,
.card:focus-visible .card-title {
  transform: none;
}

.card-cat {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  font-weight: 300;
}

/* Écrans tactiles : pas de survol, les titres restent visibles */
@media (hover: none) {
  .card-overlay {
    opacity: 1;
  }

  .card-title {
    transform: none;
  }
}

/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

.card:focus-visible,
.tab:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--noir);
  outline-offset: 3px;
}

/* Focus clavier sur les onglets et filtres (les radios sont invisibles) */
#tab-apropos:focus-visible ~ .page label[for="tab-apropos"],
#tab-galerie:focus-visible ~ .page label[for="tab-galerie"],
#tab-contacts:focus-visible ~ .page label[for="tab-contacts"],
#tab-cv:focus-visible ~ .page label[for="tab-cv"],
#tab-boutique:focus-visible ~ .page label[for="tab-boutique"],
#f-tout:focus-visible ~ .page label[for="f-tout"],
#f-visuel:focus-visible ~ .page label[for="f-visuel"],
#f-sonore:focus-visible ~ .page label[for="f-sonore"],
#f-design:focus-visible ~ .page label[for="f-design"],
#f-performatif:focus-visible ~ .page label[for="f-performatif"],
#ap-demarche:focus-visible ~ .page label[for="ap-demarche"],
#ap-moment:focus-visible ~ .page label[for="ap-moment"] {
  outline: 2px solid var(--noir);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}