/* ==========================================================================
   Projéta - Pages
   --------------------------------------------------------------------------
   Styles propres à chaque page : accueil, membres, prévente, contact,
   partage, page de renvoi, légale, erreur, lieu, ce qu'on propose.
   ========================================================================== */

/* --- Accueil ---------------------------------------------------------------- */

.hero { padding: 76px var(--section-pad-x) 68px; }

.hero__logo {
  width: min(360px, 74vw);
  height: 132px;
  margin: 26px 0 8px;
  transform: rotate(-2.5deg);
  transform-origin: left center;
}

.hero__tagline {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.35;
  max-width: 560px;
  margin: 18px 0 0;
}

.hero__valeurs {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 30px;
  font: 400 11px var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Entrées du hub - chaque carte porte l'encre attitrée de sa page
   (--accent-hub, posée par le template depuis $page->encre()). */
.hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}
.carte-hub {
  --accent-hub: var(--bleu);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  min-height: 170px;
  background: var(--paper);
  border: var(--trait);
  border-radius: var(--rayon-carte);
  padding: 20px;
  text-decoration: none;
  transition: transform .12s;
}
.carte-hub:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--accent-hub);
}
.carte-hub__titre {
  display: block;
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.05;
}
.carte-hub__sous {
  display: block;
  font: 400 12px var(--font-mono);
  line-height: 1.5;
  opacity: .65;
  margin-top: 10px;
}
.carte-hub__fleche { font: 700 14px var(--font-mono); color: var(--accent-hub); }

/* --- Sélection shop de l'accueil ------------------------------------------------ */

.home-shop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 44px;
  align-items: end;
  margin-bottom: 40px;
}

/* --- Carte prévente (accueil, shop, page prévente) ----------------------------- */

.prevente-panneau {
  background: var(--ink);
  color: var(--paper);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  /* La prévente garde SES couleurs de titre, quelle que soit l'encre
     de la page qui l'accueille (accueil, shop, page prévente). */
  --titre-top: var(--bleu);
  --titre-bottom: var(--rose);
}
@media (max-width: 800px) {
  .prevente-panneau { grid-template-columns: 1fr; }
}

.prevente-panneau__texte { padding: 44px 40px; min-width: 0; }
@media (max-width: 700px) {
  .prevente-panneau__texte { padding: 28px 22px; }
}

.prevente-panneau__kicker {
  font: 700 10px var(--font-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--jaune);
}

.prevente-panneau__titre {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(30px, 5.2vw, 76px);
  line-height: .95;
  margin: 14px 0 6px;
}

.prevente-panneau__accroche {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  max-width: 420px;
  opacity: .85;
  margin: 18px 0 26px;
}

.prevente-panneau__actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.prevente-panneau__note { font: 400 12px var(--font-mono); opacity: .7; }

/* Bouton contour sur le panneau noir (« Découvrir », Instagram) :
   le trait et le texte passent au papier pour rester lisibles. */
.prevente-panneau .btn--contour {
  color: var(--paper);
  border-color: var(--paper);
}
.prevente-panneau .btn--contour:hover {
  background: var(--paper);
  color: var(--ink);
}

/* Prix public barré + remise, quand la prévente coûte moins cher que
   ses produits liés (« 8 € offerts en prévente ») */
.prevente-panneau__remise { font: 400 12px var(--font-mono); }
.prevente-panneau__remise s { opacity: .55; margin-right: 4px; }

/* Décompte avant la fin (rempli par site.js - sans JS, la date reste) */
.prevente-compte {
  font: 700 12px var(--font-mono);
  letter-spacing: .08em;
  color: var(--jaune);
}

/* Volet droit : trame animée (classes .trame--* sur l'élément) + cartel
   penché. La couleur de fond suit l'encre choisie pour la prévente. */
.prevente-panneau__visuel {
  --trame-fond: var(--prevente-encre, var(--bleu));
  --trame-encre: var(--jaune);
  border-left: 2px solid var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 32px;
}
@media (max-width: 800px) {
  .prevente-panneau__visuel { border-left: 0; border-top: 2px solid var(--paper); }
}

.prevente-panneau__visuel img {
  max-height: 300px;
  width: auto;
  border: var(--trait);
  transform: rotate(-3deg);
}

.prevente-cartel {
  background: var(--paper);
  color: var(--ink);
  border: var(--trait);
  border-radius: var(--rayon-carte);
  padding: 20px 26px;
  text-align: center;
  transform: rotate(-3deg);
}
.prevente-cartel__label {
  font: 700 10px var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.prevente-cartel__annee {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
}
.prevente-cartel__tirage { font: 400 11px var(--font-mono); }

/* Fin de la vente des tickets (propre à la tombola - elle peut différer
   de la fin de la prévente) */
.tombola__fin { margin: 8px 0 0; font: 400 12px var(--font-mono); opacity: .7; }

/* Tombola (upsell sur la page prévente) */
.tombola {
  margin-top: 40px;
  border: 2px dashed var(--ink);
  border-radius: var(--rayon-bloc);
  padding: 28px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background: var(--paper);
}

/* Le dialog d'upsell : proposé quand la prévente rejoint le panier -
   même vocabulaire que l'encart tombola (trait pointillé). */
.upsell-tombola {
  border: 2px dashed var(--ink);
  border-radius: var(--rayon-bloc);
  background: var(--paper);
  box-shadow: var(--ombre-double);
  padding: 32px;
  max-width: 420px;
  text-align: center;
}
.upsell-tombola::backdrop { background: rgba(20, 20, 20, .75); }
body:has(.upsell-tombola[open]) { overflow: hidden; }

.upsell-tombola__kicker {
  font: 700 12px var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bleu);
}
.upsell-tombola__titre {
  font-family: var(--font-titre);
  font-size: 26px;
  margin: 10px 0 0;
}
.upsell-tombola__lot { margin: 12px auto 0; max-width: 320px; }
.upsell-tombola__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* --- Carrousel de l'évolution du lieu (fin de page Lieu) ---------------------------
   Ruban qui défile en continu : la piste est doublée, l'animation la
   translate d'une moitié - boucle invisible. ~6 s par image quelle que
   soit la longueur du ruban ; pause au survol. Pas de double ombre
   ici : elle est réservée au Shop, où elle signale le cliquable. */

.carrousel { margin-top: 34px; }

/* Repli sans JS : défilement CSS pur (vitesse selon --carrousel-n),
   en pause au survol. Avec JS, carrousel.js pose .carrousel--js et
   pilote la translation à la souris (voir plus bas). */
.carrousel__piste {
  display: flex;
  width: max-content;
  animation: carrousel-defile calc(var(--carrousel-n, 6) * 6s) linear infinite;
}
.carrousel:hover .carrousel__piste { animation-play-state: paused; }

/* Le margin (et pas un gap) : chaque image emporte son espacement,
   la moitié de piste garde une largeur exacte - pas de ressaut. */
.carrousel__image {
  height: 320px;
  width: auto;
  border: var(--trait-photo);
  margin-right: 28px;
}

@keyframes carrousel-defile {
  to { transform: translateX(-50%); }
}

/* Mode JS (desktop) : le script pilote translateX, la souris règle
   vitesse et sens - pas d'animation CSS. */
.carrousel--js .carrousel__piste {
  animation: none;
  will-change: transform;
}

/* Statique (carrousel.js) : les images tiennent dans la largeur, rien à
   dérouler - pas de doublon, pas de translation, contenu centré. */
.carrousel--statique { cursor: default; }
.carrousel--statique .carrousel__piste {
  animation: none;
  transform: none;
  width: 100%;
}
.carrousel--statique .carrousel__image[aria-hidden="true"] { display: none; }

/* Mode manuel (tactile ou mouvements réduits, posé par carrousel.js -
   et repli @media pour le no-JS) : ruban glissable au doigt, sans
   auto-défilement ni image doublée. */
.carrousel--manuel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carrousel--manuel::-webkit-scrollbar { display: none; }
.carrousel--manuel .carrousel__piste { animation: none; }
.carrousel--manuel .carrousel__image[aria-hidden="true"] { display: none; }

@media (max-width: 700px) {
  .carrousel__image { height: 200px; margin-right: 16px; }
}

/* Sans JS, moins d'animations : le ruban ne défile plus, il se fait défiler */
@media (prefers-reduced-motion: reduce) {
  .carrousel { overflow-x: auto; }
  .carrousel__piste { animation: none; }
  .carrousel__image[aria-hidden="true"] { display: none; }
}

/* --- Membres & collectifs -------------------------------------------------------- */

.annuaire {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.carte-membre {
  position: relative;
  display: block;
  background: var(--paper);
  border: var(--trait);
  border-radius: 14px;
  padding: 18px;
  text-decoration: none;
  transition: transform .12s;
}
.carte-membre:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--rose); }

.carte-membre__portrait {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: var(--trait);
  object-fit: cover;
  margin-bottom: 14px;
}
/* Sans portrait : une trame en guise d'avatar - toujours la même grille
   de points, mais encres et angle de grille propres à chaque membre
   (graine calculée par le snippet, --trame-angle fait pivoter la grille) */
.carte-membre__portrait--trame { --trame-pas: 6px; }
.carte-membre__portrait--trame::before {
  inset: -60%;
  transform: rotate(var(--trame-angle, 0deg));
}

.carte-membre__nom {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
}
.carte-membre__competences {
  font: 400 11px var(--font-mono);
  opacity: .7;
  margin-top: 5px;
}

/* Le métier, écrit « à la main » dans le coin de la carte - encre et
   inclinaison varient d'un membre à l'autre (posées par le snippet) */
.carte-membre__metier {
  position: absolute;
  top: 12px;
  right: 16px;
  font: 700 22px/1 'Caveat', cursive;
  text-align: center;
  color: var(--encre-metier, var(--rose));
  transform: rotate(var(--penche-metier, -6deg));
}

/* Carte collectif : fond encre, label jaune ; sous le nom, le
   descriptif reprend la typo des compétences des membres. */
.carte-collectif {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--paper);
  border: var(--trait);
  border-radius: 14px;
  padding: 18px;
  text-decoration: none;
  transition: transform .12s;
}
.carte-collectif:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--jaune); }

.carte-collectif__label {
  font: 700 10px var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jaune);
}
.carte-collectif__nom {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  margin-top: 16px;
}
.carte-collectif__meta { font: 400 11px var(--font-mono); opacity: .7; margin-top: 6px; }

/* « Ils sont passé·e·s par Projéta » : les mêmes cartes que les
   actif·ves - seule l'ombre du survol passe à l'encre noire. */
.carte--ancienne:hover { box-shadow: 4px 4px 0 var(--ink); }

/* --- Fiche membre / collectif -------------------------------------------------------- */

.fiche__entete {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.fiche__portrait {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: var(--trait);
  object-fit: cover;
}
/* Logo de collectif : souvent un PNG transparent - ni bordure ni fond
   (sinon il est cerné d'un cadre), et une boîte à sa mesure : hauteur
   fixe proche du titre, largeur libre selon les proportions du logo. */
.fiche__portrait--logo {
  width: auto;
  height: 96px;
  max-width: 250px;
  border: none;
  border-radius: 0;
  background: none;
  object-fit: contain;
}

.fiche__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.fiche__liens { display: flex; gap: 12px; flex-wrap: wrap; margin: 34px 0 0; }

.fiche__images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.fiche__images img {
  border: var(--trait);
  border-radius: var(--rayon-carte);
  width: 100%;
}

.retour {
  display: inline-block;
  font: 700 11px var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 28px;
}
.retour:hover { color: var(--accent, var(--bleu)); }

/* --- Ce qu'on propose ---------------------------------------------------------------------
   Savoir-faire : que du texte, rangé par catégories (des verbes -
   Imaginer, Créer, Fabriquer, Partager…). À gauche le verbe, son numéro
   et son sous-texte ; à droite la liste des savoir-faire, façon index. */

.savoir-faire { display: flex; flex-direction: column; gap: 64px; margin-top: 44px; }

.savoir-faire__categorie {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: 24px 56px;
  align-items: start;
}
@media (max-width: 800px) {
  .savoir-faire__categorie { grid-template-columns: 1fr; gap: 18px; }
}

.savoir-faire__num { font: 700 13px var(--font-mono); color: var(--accent, var(--rose)); margin-bottom: 8px; }

.savoir-faire__soustexte { margin: 12px 0 0; line-height: 1.55; opacity: .75; }

.savoir-faire__liste {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 40px;
  margin-top: 30px;
}
@media (max-width: 560px) {
  .savoir-faire__liste { grid-template-columns: 1fr; }
}

.savoir-faire__item dt { font: 700 17px/1.25 var(--font-titre); }
.savoir-faire__item dd { margin: 5px 0 0; font-size: 14px; line-height: 1.55; opacity: .8; }

.reseau-texte { margin: 12px 0 0; max-width: 560px; line-height: 1.55; opacity: .8; }

.partenaires { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* Chaque « activité » (Expositions, Impression…) : titre + description
   dans la boîte, puis ses images en carrousel (même composant que le
   Lieu, voir snippets/carrousel.php et assets/js/carrousel.js). */
.galerie-activites { margin-top: 56px; }
.galerie-activites__desc { max-width: 65ch; margin-top: 10px; }

/* --- Contact ------------------------------------------------------------------------------ */

/* Le bloc formulaire (contrôleur contact.php : honeypot, piège
   temporel, Turnstile facultatif) */
.contact__ecrire { margin-top: 56px; }

.formulaire {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
  margin-top: 24px;
}
.formulaire__rang {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 560px) {
  .formulaire__rang { grid-template-columns: 1fr; }
}
.formulaire .btn { align-self: flex-start; }

/* Honeypot : sorti de l'écran au lieu de display:none (les robots
   sérieux sautent les champs display:none) */
.champ--leurre {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alerte {
  font: 700 13px var(--font-mono);
  border: var(--trait);
  border-radius: var(--rayon-carte);
  padding: 14px 18px;
  max-width: 560px;
  margin: 24px 0 0;
}
.alerte--succes { background: var(--vert); color: #fff; }
.alerte--erreur { background: var(--rouge); color: #fff; }

.contact__coordonnees {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.contact__email { font-size: clamp(22px, 4vw, 34px); }
.contact__adresse { font: 400 13px var(--font-mono); line-height: 1.7; white-space: pre-line; }
.contact__reseaux { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Partage --------------------------------------------------------------------------------- */

.documents { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; }

.document {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border: var(--trait);
  border-radius: var(--rayon-carte);
  padding: 18px 22px;
  background: var(--paper);
}
.document__titre { font-family: var(--font-titre); font-weight: 700; font-size: 18px; }
.document__meta { font: 400 11px var(--font-mono); opacity: .6; margin-top: 4px; }

/* --- FAQ --------------------------------------------------------------------------------------
   Accordéon natif <details> : le signe + pivote en croix à l'ouverture,
   le survol teinte la question à l'encre de la page. */

.faq {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 34px;
  max-width: 760px;
}

.faq__entree {
  border: var(--trait);
  border-radius: var(--rayon-carte);
  background: var(--paper);
}

.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: var(--accent, var(--bleu)); }

.faq__signe {
  flex-shrink: 0;
  font: 700 20px/1 var(--font-mono);
  transition: transform .15s;
}
.faq__entree[open] .faq__signe { transform: rotate(45deg); }

.faq__reponse {
  padding: 0 22px 20px;
  max-width: 60ch;
  line-height: 1.6;
}
.faq__reponse > *:first-child { margin-top: 0; }
.faq__reponse > *:last-child { margin-bottom: 0; }

/* --- Page de renvoi (lien-en-bio) -------------------------------------------------------------- */

.renvoi {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 20px;
  text-align: center;
}
.renvoi__logo { width: 200px; height: 74px; margin: 26px auto 0; }
.renvoi__intro { max-width: 380px; margin: 18px auto 0; }
.renvoi__liens {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(420px, 100%);
  margin-top: 34px;
}
.renvoi__liens .btn { justify-content: center; }

/* La prévente en cours passe d'elle-même en tête des liens : carte
   noire compacte, même vocabulaire que le panneau prévente (kicker
   jaune, prix/date) - l'ombre du survol suit l'encre de la prévente. */
.renvoi__prevente {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, 100%);
  margin-top: 34px;
  background: var(--ink);
  color: var(--paper);
  border: var(--trait);
  border-radius: var(--rayon-bloc);
  padding: 22px 24px;
  text-decoration: none;
  text-align: left;
  transition: transform .12s;
}
.renvoi__prevente:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--prevente-encre, var(--jaune));
}
.renvoi__prevente-kicker {
  font: 700 10px var(--font-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--jaune);
}
.renvoi__prevente-titre {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.05;
}
.renvoi__prevente-note { font: 700 12px var(--font-mono); color: var(--jaune); }

/* Quand la prévente est là, les liens la suivent de près */
.renvoi__prevente + .renvoi__liens { margin-top: 16px; }
.renvoi__pied { margin-top: auto; padding-top: 48px; font: 400 11px var(--font-mono); opacity: .6; }

/* --- Pages légales ------------------------------------------------------------------------------- */

.legale { max-width: 65ch; }
.legale h2 { font-size: 22px; margin-top: 1.6em; }

/* --- Erreur 404 ------------------------------------------------------------------------------------ */

.erreur {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}
.erreur__note { font: 400 13px var(--font-mono); opacity: .7; max-width: 420px; }