/*
Theme Name: Ronces
Theme URI: https://collectif-sorores.fr
Author: Les Sorores
Description: Thème sur mesure pour le collectif Les Sorores — direction artistique fanzine / riso-print, responsive. Tout le contenu (textes, photos, travaux) se modifie depuis l'admin WordPress, sans toucher au code.
Version: 1.1
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: ronces
*/

/* =========================================================
   LES SORORES — feuille de style
   Direction artistique : fanzine féministe / riso-print
   Palette, typographies et espacements pilotés par variables
   pour une personnalisation facile en un seul endroit.
   ========================================================= */

:root{
  /* --- Couleurs --- */
  --paper:      #F2EDE2;   /* papier légèrement grisé, pas crème "IA" */
  --ink:        #17140F;   /* noir encre, presque noir */
  --ink-soft:   #4A453C;   /* texte secondaire */
  --line:       #17140F33;

  --pink:   #E63F86;
  --blue:   #2F5FD1;
  --yellow: #F0C419;
  --orange: #F2542D;
  --teal:   #1FA187;
  --violet: #7B4FE0;
  --lime:   #9CBF1E;

  /* --- Typographies --- */
  --font-display: "Archivo Black", "Arial Narrow", sans-serif;
  --font-body:    "Space Mono", "Courier New", monospace;

  /* --- Rythme --- */
  --gutter: clamp(1.25rem, 3vw, 3rem);
  --radius: 2px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 14px 14px;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; }

img, svg{ max-width:100%; display:block; }

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Skip link (accessibilité) ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:.6em 1em; z-index:100;
}
.skip-link:focus{ left: var(--gutter); top: var(--gutter); }

/* ---------- En-tête ---------- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 1rem; padding-bottom: 1rem;
  gap: 1rem; flex-wrap: wrap;
}
.logo{
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  letter-spacing: .02em;
  text-decoration:none;
  display:flex; align-items:baseline; gap:.5rem;
}
.logo .dot{ color: var(--pink); }

.site-nav{
  display:flex; gap: clamp(.9rem, 2vw, 1.8rem);
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  flex-wrap:wrap;
}
.site-nav a{
  text-decoration:none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.site-nav a:hover, .site-nav a:focus-visible{ border-color: var(--pink); }
.site-nav a.is-external{ color: var(--ink-soft); }

/* ---------- Hero ---------- */
.hero{
  padding: clamp(2.5rem, 7vw, 6rem) 0 clamp(2rem, 5vw, 4rem);
  position:relative;
  overflow:hidden;
}
.hero-eyebrow{
  display:inline-block;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--ink);
  color:var(--paper);
  padding:.35em .7em;
  transform: rotate(-1.5deg);
  margin-bottom:1.2rem;
}
.hero h1{
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 9vw, 6rem);
  line-height:.92;
  margin: 0 0 1.1rem;
  letter-spacing: -.01em;
}
.hero h1 .accent{ color: var(--pink); }
.hero-lead{
  max-width: 46ch;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--ink-soft);
}
.hero-lead[data-editable]{ position:relative; }
.editable-badge{
  display:inline-block;
  margin-top:.9rem;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--ink-soft);
  border:1px dashed var(--line);
  padding:.3em .6em;
}

/* ---------- Sections génériques ---------- */
.section{
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--line);
}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  margin-bottom: clamp(1.5rem, 4vw, 2.75rem);
}
.section-head h2{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  margin:0;
}
.section-num{
  font-size:.8rem; color: var(--ink-soft);
  letter-spacing:.1em;
}

/* ---------- Grille "mur de collages" — les 6 artistes ---------- */
.collage-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.2rem, 3vw, 2rem);
}
.artist-card{
  text-decoration:none;
  color: var(--ink);
  display:block;
  transform: rotate(var(--tilt, -2deg));
  transition: transform .25s ease;
}
.artist-card:hover, .artist-card:focus-visible{
  transform: rotate(0deg) translateY(-4px);
}
.artist-card:nth-child(1){ --tilt:-2deg; }
.artist-card:nth-child(2){ --tilt: 1.6deg; }
.artist-card:nth-child(3){ --tilt:-1deg; }
.artist-card:nth-child(4){ --tilt: 2.2deg; }
.artist-card:nth-child(5){ --tilt:-2.4deg; }
.artist-card:nth-child(6){ --tilt: 1deg; }

.card-photo{
  position:relative;
  aspect-ratio: 4/5;
  background: var(--card-color, var(--pink));
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.card-photo::before{ /* trame halftone */
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(var(--ink) 1.4px, transparent 1.4px);
  background-size: 8px 8px;
  opacity:.22;
  mix-blend-mode: multiply;
}
.card-photo .monogram{
  position:relative;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  color: var(--paper);
  mix-blend-mode: normal;
}
.card-photo .tape{
  position:absolute; top:-10px; left:50%;
  width: 64px; height: 22px;
  background: var(--paper);
  opacity:.85;
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.card-photo img{
  position:relative; width:100%; height:100%; object-fit:cover;
}
.card-caption{
  margin-top:.8rem;
  display:flex; justify-content:space-between; align-items:baseline;
}
.card-caption .name{
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.card-caption .role{
  font-size:.7rem; color: var(--ink-soft);
  text-transform:uppercase; letter-spacing:.06em;
}

/* ---------- Bande de petites vignettes (traces / extraits) ---------- */
.strip-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .7rem;
}
.strip-tile{
  aspect-ratio:1/1;
  border:2px solid var(--ink);
  position:relative;
  overflow:hidden;
}
.strip-tile::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--pattern);
  opacity:.9;
}
.strip-note{
  max-width: 52ch;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}

/* ---------- Page artiste ---------- */
.artist-hero{
  display:grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items:start;
  padding: clamp(2rem, 6vw, 4rem) 0;
}
@media (max-width: 720px){
  .artist-hero{ grid-template-columns: 1fr; }
}
.artist-photo{
  aspect-ratio: 4/5;
  border:3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  background: var(--card-color, var(--pink));
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.artist-photo::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(var(--ink) 1.4px, transparent 1.4px);
  background-size: 8px 8px;
  opacity:.22;
  mix-blend-mode: multiply;
}
.artist-photo .monogram{
  position:relative;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 5rem);
  color: var(--paper);
}
.back-link{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.85rem; text-transform:uppercase; letter-spacing:.08em;
  text-decoration:none;
  margin-bottom:1.5rem;
  border-bottom: 2px solid var(--ink);
}
.artist-name{
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height:.95;
  margin:.2em 0 .4em;
}
.artist-role{
  display:inline-block;
  background: var(--ink); color:var(--paper);
  padding:.3em .7em;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
  transform: rotate(-1deg);
  margin-bottom:1.2rem;
}
.artist-bio p{ color: var(--ink-soft); max-width:60ch; }

/* ---------- Formulaire de contact ---------- */
.contact-form{
  max-width: 46ch;
  margin-top: 1.5rem;
  display:flex; flex-direction:column; gap:1.1rem;
}
.form-field{ display:flex; flex-direction:column; gap:.4rem; }
.form-field span{
  font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--ink-soft);
}
.form-field input, .form-field textarea{
  font-family: var(--font-body);
  font-size: 1rem;
  padding: .7em .8em;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.form-field textarea{ resize: vertical; }
.form-submit{
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: .95rem;
  text-transform:uppercase; letter-spacing:.06em;
  background: var(--ink);
  color: var(--paper);
  border: 3px solid var(--ink);
  padding: .7em 1.4em;
  cursor:pointer;
  box-shadow: 5px 5px 0 var(--pink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.form-submit:hover{
  transform: translate(-2px,-2px);
  box-shadow: 7px 7px 0 var(--pink);
}
.form-notice{
  padding:.8em 1em;
  border:2px solid var(--ink);
  margin-bottom:1.5rem;
  max-width:46ch;
}
.form-notice--ok{ background: var(--teal); color:var(--paper); }
.form-notice--error{ background: var(--orange); color:var(--paper); }

/* ---------- Carrousel de travaux ---------- */
.sorores-carousel{
  position: relative;
  margin-top: .5rem;
}
.sorores-carousel-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  gap: 1.2rem;
  padding-bottom: .5rem;
  scrollbar-width: none;
}
.sorores-carousel-track::-webkit-scrollbar{ display:none; }
.sorores-carousel-slide{
  flex: 0 0 min(480px,86vw);
  scroll-snap-align: start;
}
.sorores-carousel-slide img{
  width:100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.sorores-carousel-caption{
  margin-top: .7rem;
  font-size: .85rem;
  color: var(--ink-soft);
  max-width: 36ch;
}
.sorores-carousel-caption--empty{
  font-style: italic;
  border: 1px dashed var(--line);
  padding: .3em .6em;
  display: inline-block;
}
.sorores-carousel-nav{
  display:flex; align-items:center; gap: 1rem;
  margin-top: 1rem;
}
.sorores-carousel-prev, .sorores-carousel-next{
  font-family: var(--font-display);
  background: var(--ink); color: var(--paper);
  border: none;
  width: 36px; height: 36px;
  cursor: pointer;
  font-size: 1rem;
}
.sorores-carousel-prev:hover, .sorores-carousel-next:hover{ background: var(--pink); }
.sorores-carousel-dots{ display:flex; gap:.5rem; }
.sorores-carousel-dot{
  width:10px; height:10px; border-radius:50%;
  border: 2px solid var(--ink);
  background: transparent;
  cursor:pointer; padding:0;
}
.sorores-carousel-dot.is-active{ background: var(--pink); border-color: var(--pink); }

/* ---------- Pied de page ---------- */
.site-footer{
  border-top:3px solid var(--ink);
  padding: clamp(2rem, 5vw, 3rem) 0;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.footer-grid{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:1.5rem; flex-wrap:wrap;
}
.footer-title{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin:0 0 .4rem;
}
.footer-links{
  display:flex; gap:1.2rem; flex-wrap:wrap;
  font-size:.85rem; text-transform:uppercase; letter-spacing:.06em;
}
.footer-links a{ text-decoration:none; border-bottom:2px solid var(--pink); }
.footer-fine{
  font-size:.75rem; color:var(--ink-soft);
  margin-top:1.5rem;
}

/* ---------- Focus visible clavier ---------- */
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ---------- Réduction de mouvement ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}