/* ============================================================
   RUBIN PLUMMER — STYLE v3
   Formes organiques · Palette pop · Énergie BD
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Fredoka+One&family=Outfit:wght@300;400;500&display=swap');

/* ============================================================
   🎨 PALETTE — TOUT MODIFIER ICI
   ============================================================ */
:root {
  --jaune:    #FFB800;
  --orange:   #F44000;
  --fuchsia:  #FF0066;
  --violet:   #9933CC;
  --bleu:     #3366FF;
  --noir:     #111111;
  --blanc:    #FFFFFF;
  --creme:    #F5F0E8;
  --vert:    #3A7D2C;
  --accent:   var(--jaune); /* accent BD du shop refait ; surchargeable via config.php */
  --fond-bio:       var(--noir);
  --fond-pratiques: var(--creme);
  --fond-expos:     var(--vert);
  --fond-nav:       var(--noir);
  --fond-ticker:    var(--jaune);
  --fond-hero:      var(--noir);
  --fond-shop-hero: var(--fuchsia);
  --fond-contact-hero: var(--bleu);
  --fond-footer:    var(--noir);
  --texte-principal:  var(--noir);
  --texte-secondaire: #444444;
  --texte-discret:    #777777;
  --texte-tres-discret: #999999;
  --card-1-fond: #fff9e6;
  --card-2-fond: #fff3ee;
  --card-3-fond: #fff0f5;
  --card-4-fond: #f8f0ff;
  --card-5-fond: #f0f4ff;
  --nav-accent:    var(--jaune);
  --ticker-texte:  var(--noir);
  --ticker-sep:    var(--orange);
  --hero-nom:      var(--jaune);
  --hero-sub:      var(--orange);
  --hero-texte:    var(--blanc);
  --hero-en:       rgba(255,255,255,0.42);
  --expo-annee:    var(--fuchsia);
  --expo-hover:    #fffbe6;
  --galerie-fond:  #e8e4da;
  --shop-card-footer-fond: #fafafa;
  --quote-texte:   rgba(255,255,255,0.82);
  --lightbox-fond: rgba(0,0,0,0.94);
  --border:   3px solid var(--noir);
  --shadow:   5px 5px 0 var(--noir);
  --r:        4px;
  --texture-couleur: rgba(0,0,0,0.07);
  --texture-taille:  20px;
  --texture-point:   1.5px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--creme);
  background-image: radial-gradient(circle, var(--texture-couleur) var(--texture-point), transparent var(--texture-point));
  background-size: var(--texture-taille) var(--texture-taille);
  color: var(--texte-principal);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: 'Lilita One', cursive; line-height: 1.1; }

/* NAV */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--fond-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 62px;
  border-bottom: 4px solid var(--nav-accent);
}
.nav-logo { font-family: 'Lilita One', cursive; color: var(--blanc); font-size: 1.25rem; text-decoration: none; }
.nav-logo span { color: var(--jaune); }
.nav-links { display: flex; gap: 0.2rem; list-style: none; }
.nav-links a { font-family: 'Fredoka One', cursive; color: var(--blanc); text-decoration: none; padding: 0.3rem 1rem; border-radius: 50px; font-size: 1rem; transition: background 0.2s, color 0.2s; }
.nav-links a:hover { background: rgba(255,255,255,0.12); }
.nav-links a.active { background: var(--nav-accent); color: var(--noir); }
.lang-toggle { display: flex; gap: 0.3rem; }
.lang-btn { font-family: 'Fredoka One', cursive; font-size: 0.85rem; padding: 0.2rem 0.65rem; border: 2px solid rgba(255,255,255,0.4); background: transparent; color: var(--blanc); cursor: pointer; border-radius: 50px; transition: all 0.2s; text-decoration: none; }
.lang-btn.active, .lang-btn:hover { background: var(--fuchsia); border-color: var(--fuchsia); color: var(--blanc); }

/* TICKER */
.ticker-wrap { background: var(--fond-ticker); border-bottom: var(--border); overflow: hidden; height: 38px; display: flex; align-items: center; }
.ticker-track { display: flex; animation: ticker 28s linear infinite; white-space: nowrap; }
.ticker-track:hover { animation-play-state: paused; }
.ticker-item { font-family: 'Fredoka One', cursive; font-size: 1rem; color: var(--ticker-texte); padding: 0 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
.ticker-sep { color: var(--ticker-sep); font-size: 1.2rem; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* BLOBS */
.blob { position: absolute; border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%; animation: morphBlob 8s ease-in-out infinite alternate; z-index: 0; pointer-events: none; }

@keyframes morphBlob {
  0%   { border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%; }
  25%  { border-radius: 20% 80% 15% 85% / 80% 20% 75% 25%; }
  50%  { border-radius: 85% 15% 40% 60% / 20% 85% 30% 70%; }
  75%  { border-radius: 30% 70% 80% 20% / 70% 30% 20% 80%; }
  100% { border-radius: 75% 25% 55% 45% / 35% 65% 60% 40%; }
}
@keyframes morphBlobB {
  0%   { border-radius: 45% 55% 60% 40% / 60% 45% 55% 40%; }
  20%  { border-radius: 80% 20% 30% 70% / 25% 80% 15% 85%; }
  45%  { border-radius: 20% 80% 70% 30% / 75% 25% 80% 20%; }
  70%  { border-radius: 65% 35% 20% 80% / 15% 85% 55% 45%; }
  100% { border-radius: 30% 70% 80% 20% / 80% 20% 30% 70%; }
}
@keyframes morphBlobC {
  0%   { border-radius: 70% 30% 45% 55% / 40% 70% 30% 60%; }
  30%  { border-radius: 20% 80% 80% 20% / 80% 20% 20% 80%; }
  60%  { border-radius: 80% 20% 25% 75% / 15% 85% 75% 25%; }
  100% { border-radius: 35% 65% 70% 30% / 70% 30% 15% 85%; }
}
@keyframes pulseBlob1 {
  0%   { transform: scale(1); }
  30%  { transform: scale(var(--blob1-smax)); }
  65%  { transform: scale(var(--blob1-smin)); }
  100% { transform: scale(calc(var(--blob1-smax) * 0.8)); }
}
@keyframes pulseBlob2 {
  0%   { transform: scale(var(--blob2-smin)); }
  40%  { transform: scale(var(--blob2-smax)); }
  72%  { transform: scale(calc(var(--blob2-smin) * 0.9)); }
  100% { transform: scale(calc(var(--blob2-smax) * 0.7)); }
}
@keyframes pulseBlob3 {
  0%   { transform: scale(calc(var(--blob3-smax) * 0.65)); }
  38%  { transform: scale(var(--blob3-smin)); }
  70%  { transform: scale(var(--blob3-smax)); }
  100% { transform: scale(calc(var(--blob3-smin) * 1.8)); }
}

/* HERO */
.hero {
  position: relative;
  background-image: var(--hero-img, none);
  background-size: cover;
  background-position: center;
  background-color: var(--noir);
  color: var(--blanc);
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero-overlay { position: absolute; inset: 0; z-index: 0; }
.hero-content {   position: relative;
  z-index: 1;
  padding: 2rem;
  max-width: 860px;

  text-align: center;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center; }

.hero-name {
	/* Dégradé orange + trame halftone, repris de l'ancienne explosion BD */
	/*background-image:
		radial-gradient(circle, #a82800 25%, transparent 26%),
		linear-gradient(135deg, #ffb300 0%, #ff7900 46%, #e83d00 100%);*/
	background-size: 0.13em 0.13em, 100% 100%;
	background-repeat: repeat, no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	filter: drop-shadow(3px 4px 0 rgba(0,0,0,.32));
	position: relative;
	z-index: 3;
	margin: 0;
	font-size: clamp(4rem, 11vw, 9rem);
	line-height: 0.8;
	text-align: center;
	text-transform: none;
	letter-spacing: 1px;
	-webkit-text-stroke: 4px #000;
	paint-order: stroke fill;	
}

/* « Plummer » passe sous « Rubin » : le H1 contient bien le nom complet
   (bon pour le SEO + lecteurs d'écran) sans élargir la bulle BD. */
.hero-name-last {
	display: block;
	font-size: 0.62em;
	letter-spacing: 2px;
}

.hero-sub {   position: relative;
  z-index: 4;

  font-family: 'Fredoka One', cursive;
  font-size: clamp(2rem, 2.5vw, 1.4rem);
  color: var(--jaune);

  margin-top: -1.2rem;
  margin-bottom: 2rem;

  text-shadow:
    2px 2px 0 #000,
    4px 4px 0 rgba(0,0,0,0.25); }
.hero-headline { font-family: 'Lilita One', cursive; font-size: clamp(1.3rem, 3vw, 2.2rem); color: var(--blanc); line-height: 1.25; margin-bottom: 0.4rem; }
.hero-headline-en { font-weight: 300; font-size: clamp(0.9rem, 1.8vw, 1.1rem); color: rgba(255,255,255,0.5); margin-bottom: 2.5rem; }
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.btn { font-family: 'Fredoka One', cursive; font-size: 1.05rem; padding: 0.65rem 1.8rem; border: var(--border); border-radius: 50px; text-decoration: none; display: inline-block; transition: transform 0.15s, box-shadow 0.15s; cursor: pointer; }
.btn-primary { background: var(--jaune); color: var(--noir); box-shadow: 4px 4px 0 rgba(0,0,0,0.3); }
.btn-primary:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 rgba(0,0,0,0.3); }
.btn-ghost { background: transparent; color: var(--blanc); border-color: rgba(255,255,255,0.5); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); transform: translate(-2px,-2px); }
.comic-bubble {
  position: relative;
  margin: 0 auto 10px auto;

  display: flex;
  align-items: center;
  justify-content: center;
}

    /* Badge transparence IA sur les images de portfolio */
    .serie-diapo{ position: relative; }
    .ia-badge{
      position:absolute; top:14px; left:14px; z-index:6;
      display:inline-flex; align-items:center; gap:.5em;
      max-width:min(80%, 360px);
      padding:.4em .8em .4em .45em;
      background:rgba(255,255,255,.94);
      border:2.5px solid #1a1a1a;
      border-radius:999px;
      box-shadow:3px 3px 0 rgba(0,0,0,.82);
      font-size:.72rem; line-height:1.2; font-weight:500; color:#1a1a1a;
      pointer-events:none; /* le clic passe a travers vers la lightbox */
    }
    .ia-badge .ia-badge-i{
      flex:none; width:1.3em; height:1.3em; border-radius:50%;
      background:#1a1a1a; color:#fff; font-style:italic; font-weight:800;
      display:inline-flex; align-items:center; justify-content:center; font-size:.9em;
    }
    .ia-badge strong{ font-weight:800; }
    @media (max-width:600px){ .ia-badge{ font-size:.62rem; top:9px; left:9px; padding:.35em .6em .35em .4em; } }

/* SECTION ARTISTE */
.artiste-section {
  background: var(--fond-bio);
  border-top: var(--border);
  border-bottom: var(--border);
  overflow: hidden;
  position: relative;
}
.artiste-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.artiste-texte {
  position: relative;
  z-index: 1;
}
.artiste-img {
  position: relative;
  height: 600px;
  background-image: url(images/rubin.jpg);
  background-size: cover;
  background-position: center top;
  border-radius: 12px;
  border: var(--border);
  box-shadow: var(--shadow);
}

.bio-text { font-size: 1.08rem; line-height: 1.9; max-width: 800px; text-align: justify; color: var(--creme); }

/* PORTFOLIO — navigation sticky */
.portfolio-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1.25rem 2rem;
  border-bottom: var(--border);
  background: var(--fond-hero);
  position: sticky;
  top: 62px;
  z-index: 100;
}

.cat-btn {
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  padding: 0.45rem 1.2rem;
  border: 2px solid rgba(255,255,255,0.3);
  background: transparent;
  color: var(--blanc);
  cursor: pointer;
  border-radius: 50px;
  transition: all 0.2s;
}

.cat-btn:hover { border-color: var(--jaune); color: var(--jaune); }
.cat-btn.active { background: var(--jaune); border-color: var(--jaune); color: var(--noir); }

@media (max-width: 760px) {
  .artiste-inner { grid-template-columns: 1fr; }
  .artiste-img { height: 350px; }
}

/* Traits SVG — utilisés dans expos-anim */
.drawing-path { opacity: 0; }
.path-a { stroke-width: var(--trait-ep-a); stroke: var(--trait-color); animation: drawSnake var(--trait-va) linear infinite var(--trait-da); }
.path-b { stroke-width: var(--trait-ep-b); stroke: var(--trait-color); animation: drawSnake var(--trait-vb) linear infinite var(--trait-db); }
.path-c { stroke-width: var(--trait-ep-c); stroke: var(--trait-color); animation: drawSnake var(--trait-vc) linear infinite var(--trait-dc); }
.path-d { stroke-width: var(--trait-ep-d); stroke: var(--trait-color); animation: drawSnake var(--trait-vd) linear infinite var(--trait-dd); }
.path-e { stroke-width: var(--trait-ep-e); stroke: var(--trait-color); stroke-dasharray: 60 9999; animation: drawSnakeE var(--trait-ve) linear infinite var(--trait-de); }
@keyframes drawSnakeE {
  0%   { stroke-dashoffset: -60;  stroke-dasharray: 0  9999; opacity: 0; }
  5%   { stroke-dashoffset: -40;  stroke-dasharray: 60 9999; opacity: calc(var(--trait-op) * 1.4); }
  80%  { stroke-dashoffset: 380;  stroke-dasharray: 60 9999; opacity: calc(var(--trait-op) * 1.4); }
  92%  { stroke-dashoffset: 440;  stroke-dasharray: 10 9999; opacity: calc(var(--trait-op) * 0.4); }
  100% { stroke-dashoffset: 480;  stroke-dasharray: 0  9999; opacity: 0; }
}
@keyframes drawSnake {
  0%   { stroke-dashoffset: -1800; stroke-dasharray: 0 9999;                            opacity: 0; }
  6%   { stroke-dashoffset: -1600; stroke-dasharray: var(--trait-seg) 9999;             opacity: var(--trait-op); }
  75%  { stroke-dashoffset:  200;  stroke-dasharray: var(--trait-seg) 9999;             opacity: var(--trait-op); }
  90%  { stroke-dashoffset:  400;  stroke-dasharray: calc(var(--trait-seg) * 0.2) 9999; opacity: calc(var(--trait-op) * 0.35); }
  100% { stroke-dashoffset:  600;  stroke-dasharray: 0 9999;                            opacity: 0; }
}

/* Blobs dans expos-anim */
.expos-anim {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  --trait-color: var(--jaune);
}
.expos-anim .blob-1 {
  width: var(--blob1-w); height: var(--blob1-h);
  position: absolute; top: -80px; left: -100px;
  background-color: color-mix(in srgb, var(--blob1-color) 40%, transparent);
  opacity: var(--blob1-op);
  animation: morphBlob var(--blob1-morph) ease-in-out infinite alternate, pulseBlob1 var(--blob1-pulse) ease-in-out infinite alternate;
}
.expos-anim .blob-1::before { content: ''; position: absolute; inset: var(--contour-inset1); border-radius: inherit; border: var(--contour-ep) solid rgba(255,255,255,0.3); opacity: var(--contour-op); animation: morphBlobC var(--contour-v1) ease-in-out infinite alternate; }
.expos-anim .blob-2 {
  width: var(--blob2-w); height: var(--blob2-h);
  position: absolute; bottom: -60px; right: -80px;
  background-color: color-mix(in srgb, var(--blob2-color) 40%, transparent);
  opacity: var(--blob2-op);
  animation: morphBlobB var(--blob2-morph) ease-in-out infinite alternate, pulseBlob2 var(--blob2-pulse) ease-in-out infinite alternate;
}
.expos-anim .blob-2::before { content: ''; position: absolute; inset: var(--contour-inset2); border-radius: inherit; border: var(--contour-ep) solid rgba(255,255,255,0.3); opacity: var(--contour-op); animation: morphBlob var(--contour-v2) ease-in-out infinite alternate; }
.expos-anim .blob-3 {
  width: var(--blob3-w); height: var(--blob3-h);
  position: absolute; top: 35%; right: 8%;
  background-color: color-mix(in srgb, var(--blob3-color) 40%, transparent);
  opacity: var(--blob3-op);
  animation: morphBlobC var(--blob3-morph) ease-in-out infinite alternate, pulseBlob3 var(--blob3-pulse) ease-in-out infinite alternate;
}
.expos-anim .blob-3::before { content: ''; position: absolute; inset: var(--contour-inset3); border-radius: inherit; border: var(--contour-ep) solid rgba(255,255,255,0.3); opacity: var(--contour-op); animation: morphBlobB var(--contour-v3) ease-in-out infinite alternate; }
.expos-anim .hero-drawing { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }

/* STRIPE */
.stripe { display: flex; height: 10px; }
.stripe span { flex: 1; }

/* SECTION GÉNÉRIQUE */
.page-wrap { padding-top: 62px; }
.section { padding: 5rem 2rem; max-width: 1100px; margin: 0 auto; }
.section-title {
	display: inline-block;
	font-size: clamp(2rem, 5vw, 3.5rem);
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--jaune);
	/* border: var(--bd); */
	padding: 0.4rem 1rem;
	border-radius: 30px;
	box-shadow: 3px 3px 0 var(--noir);
	margin-bottom: 1rem;
	transform: rotate(-1deg);
	color: var(--noir);
}
/*.section-title::after { content: ''; display: block; height: 6px; background: var(--jaune); margin-top: 0.3rem; border-radius: 3px; }*/

/* BIO */
.bio-section { background: var(--fond-bio); border-top: var(--border); border-bottom: var(--border); }

/* EXPOSITIONS */
.expos-section  {
	background: var(--fond-expos);
	border-top: var(--border);
	background-image: repeating-linear-gradient( 45deg, transparent 0 14px, color-mix(in srgb, #fe4790 100%, #4b78ff 10%) 50px 120px );
   	position: relative;
}
 .expos-section .section {
	        z-index: 1;
	position: relative;
}   
.expos-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
@media (max-width: 760px) { .expos-cols { grid-template-columns: 1fr; gap: 3rem; } }
.expos-list { margin-top: 1.5rem; border: var(--border); box-shadow: var(--shadow); overflow: hidden; background: var(--blanc); }
.expo-item { display: grid; grid-template-columns: 55px 1fr; gap: 1rem; align-items: start; padding: 1rem 1.25rem; border-bottom: 2px solid var(--noir); transition: background 0.15s; }
.expo-item:last-child { border-bottom: none; }
.expo-item:hover { background: var(--expo-hover); }
.expo-annee { font-family: 'Fredoka One', cursive; font-size: 1.05rem; color: var(--fuchsia); padding-top: 0.1rem; }
.expo-titre { font-weight: 500; font-size: 0.95rem; }
.expo-lieu { color: var(--texte-discret); font-size: 0.85rem; margin-top: 0.1rem; }
.expo-lieu a { color: var(--bleu); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; }
.expo-lieu a:hover { border-color: var(--bleu); }

/* PORTFOLIO ÉDITORIAL — split gauche/droite */
.portfolio-serie { display: none; }
.portfolio-serie.active { display: block; }

/* Split pleine hauteur */
.serie-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 62px - 56px); /* moins nav + portfolio-cats */
  border-bottom: var(--border);
}

/* GAUCHE — diaporama */
.serie-diapo {
  position: relative;
  overflow: hidden;
  background: var(--noir);
  border-right: var(--border);
  cursor: pointer;
}

.diapo-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.diapo-slide.active {
  opacity: 1;
  position: relative;
  height: 100%;
  pointer-events: auto;
}

.diapo-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Boutons nav */
.diapo-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  color: var(--blanc);
  border: 2px solid rgba(255,255,255,0.3);
  font-size: 2rem;
  line-height: 1;
  width: 48px; height: 48px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.diapo-btn:hover { background: rgba(0,0,0,0.75); }
.diapo-prev { left: 1rem; }
.diapo-next { right: 1rem; }

/* Dots */
.diapo-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.diapo-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  border: 1px solid rgba(255,255,255,0.6);
}
.diapo-dot.active { background: var(--blanc); transform: scale(1.3); }

/* DROITE — texte */
.serie-texte-wrap {
  background: var(--serie-couleur, var(--noir));
  color: var(--blanc);
  padding: 4rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}

.serie-titre {
  font-size: clamp(2.5rem, 4vw, 4rem);
  color: var(--blanc);
  line-height: 1;
}

.serie-accroche {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  color: rgba(255,255,255,0.7);
  font-style: italic;
}

.serie-texte {
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.85);
  max-width: 500px;
}

.serie-texte--2 {
  color: rgba(255,255,255,0.6);
  font-size: 0.92rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.serie-texte--3 {
  color: rgba(255,255,255,0.6);
  font-size: 0.92rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.serie-compteur {
  font-family: 'Fredoka One', cursive;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.4);
  margin-top: auto;
}

@media (max-width: 900px) {
  .serie-split { grid-template-columns: 1fr; min-height: auto; }
  .serie-diapo { height: 60vw; border-right: none; border-bottom: var(--border); }
  .serie-texte-wrap { padding: 2.5rem 1.5rem; }
}
@media (max-width: 900px) { .pele-mele-wrap { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; } .pele-mele-texte { grid-column: span 2; } }
@media (max-width: 560px) { .pele-mele-wrap { grid-template-columns: 1fr; grid-auto-rows: 240px; } .pele-mele-texte { grid-column: span 1; } .pele-mele-item.large { grid-column: span 1; } }

/* LIGHTBOX */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.94); z-index: 999; align-items: center; justify-content: center; padding: 2rem; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border: 4px solid var(--blanc); box-shadow: 0 0 60px rgba(0,0,0,0.8); }
.lightbox-close { position: absolute; top: 1.25rem; right: 1.75rem; font-family: 'Lilita One', cursive; font-size: 2.5rem; color: var(--blanc); cursor: pointer; background: none; border: none; line-height: 1; opacity: 0.7; transition: opacity 0.2s; }
.lightbox-close:hover { opacity: 1; }

/* CE QUE JE FAIS — blobs organiques */
.pratiques-section { background: var(--fond-pratiques); border-top: var(--border); border-bottom: var(--border); overflow: hidden; padding: 0 0 4rem; position:relative; }

.pratiques-section:before {  
    content:'';
  position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(15,12,9,.12) 2px, transparent 2px);
  background-size:32px 32px;
  pointer-events:none;
}

.pratiques-blobs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 2rem 3rem 4rem;
  position: relative;
}

.pratique-blob {
  display: block;
  text-decoration: none;
  color: var(--blanc);
  position: relative;
  background-color: var(--blob-color, var(--fuchsia));
  border: 3px solid var(--noir);
  box-shadow: 6px 6px 0 var(--noir);
  border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
  animation: blobMorphHome 8s ease-in-out infinite alternate var(--blob-delay, 0s), blobPulseHome 20s ease-in-out infinite alternate var(--blob-delay, 0s);
  overflow: hidden;
  transition: box-shadow 0.2s, z-index 0s;
}

/* --- TAILLES VARIÉES + CHEVAUCHEMENTS --- */
.pratique-blob.blob-xl { width: clamp(320px, 34vw, 560px); height: clamp(300px, 30vw, 520px); z-index: 3; }
.pratique-blob.blob-lg { width: clamp(280px, 28vw, 490px); height: clamp(260px, 26vw, 500px); z-index: 2; }
.pratique-blob.blob-md { width: clamp(240px, 23vw, 430px); height: clamp(220px, 21vw, 400px); z-index: 4; }
.pratique-blob.blob-sm { width: clamp(190px, 18vw, 360px); height: clamp(180px, 17vw, 340px); z-index: 5; }

/* Chevauchements — marges négatives + décalages verticaux */
.pratique-blob:nth-child(1) { margin-right: -3rem;  margin-top: 2rem; }
.pratique-blob:nth-child(2) { margin-right: -2.5rem; margin-top: -3.5rem; }
.pratique-blob:nth-child(3) { margin-right: -3.5rem; margin-top: 3.5rem; }
.pratique-blob:nth-child(4) { margin-right: -2rem;  margin-top: -2.5rem; }
.pratique-blob:nth-child(5) { margin-top: -4.5rem; }
.pratique-blob:nth-child(6) { margin-right: -3rem;  margin-top: 2.5rem; }
.pratique-blob:nth-child(7) { margin-top: -3rem; }

/* --- MOTIFS — couleur de base adoucie + pattern par-dessus --- */
/* La couleur est mélangée avec du blanc pour adoucir */
.pratique-blob { background-color: color-mix(in srgb, var(--blob-color, var(--fuchsia)) 72%, white); }

.motif-pois {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--blob-color) 100%, black 12%) 18%, transparent 19%);
  background-size: 34px 34px;
}

.motif-rayures {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 14px,
    color-mix(in srgb, var(--blob-color) 100%, black 10%) 14px 26px
  );
}

.motif-damier {
  background-image:
    linear-gradient(45deg,  color-mix(in srgb, var(--blob-color) 100%, black 10%) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--blob-color) 100%, black 10%) 75%),
    linear-gradient(45deg,  color-mix(in srgb, var(--blob-color) 100%, black 10%) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--blob-color) 100%, black 10%) 75%);
  background-size: 44px 44px;
  background-position: 0 0, 22px 22px;
}

.motif-zigzag {
  background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--blob-color) 100%, black 12%) 25%, transparent 25%),
    linear-gradient(225deg, color-mix(in srgb, var(--blob-color) 100%, black 12%) 25%, transparent 25%),
    linear-gradient(45deg,  color-mix(in srgb, var(--blob-color) 100%, black 12%) 25%, transparent 25%),
    linear-gradient(315deg, color-mix(in srgb, var(--blob-color) 100%, black 12%) 25%, transparent 25%);
  background-size: 36px 36px;
  background-position: 18px 0, 18px 0, 0 0, 0 0;
}

.motif-croix {
  background-image:
    radial-gradient(circle, transparent 20%, color-mix(in srgb, var(--blob-color) 88%, white) 20%, color-mix(in srgb, var(--blob-color) 88%, white) 80%, transparent 80%, transparent),
    radial-gradient(circle, transparent 20%, color-mix(in srgb, var(--blob-color) 88%, white) 20%, color-mix(in srgb, var(--blob-color) 88%, white) 80%, transparent 80%, transparent),
    linear-gradient(color-mix(in srgb, var(--blob-color) 100%, black 14%) 2.4px, transparent 2.4px),
    linear-gradient(90deg, color-mix(in srgb, var(--blob-color) 100%, black 14%) 2.4px, transparent 2.4px);
  background-size: 60px 60px, 60px 60px, 30px 30px, 30px 30px;
  background-position: 0 0, 30px 30px, 0 -1.2px, -1.2px 0;
}

/* --- IMAGE — zoom progressif pendant l'apparition --- */
.pratique-blob-img {
  position: absolute;
  inset: 0;
  background-image: var(--blob-img, none);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.8s ease;
  animation: blobImgFurtif var(--blob-furtif-duration, 18s) ease-in-out infinite var(--blob-furtif-delay, 0s);
  z-index: 0;
}

.pratique-blob:hover .pratique-blob-img {
  opacity: 0.6 !important;
    transform: scale(1.18);
  animation-play-state: paused;
}
/* L'image zoome doucement pendant son apparition furtive */
@keyframes blobImgFurtif {
  0%   { opacity: 0;    transform: scale(1); }
  8%   { opacity: 0.85; transform: scale(1.08); }
  18%  { opacity: 0;    transform: scale(1.16); }
  19%  { transform: scale(1); }
  100% { opacity: 0;    transform: scale(1);  }
}

.pratique-blob::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 35% at 35% 25%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 30% 20% at 65% 70%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(145deg, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0.25) 100%);
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
}

.pratique-blob::after {
  content: '';
  position: absolute;
  top: 8%; left: 15%;
  width: 28%; height: 14%;
  background: rgba(255,255,255,0.45);
  border-radius: 50%;
  filter: blur(4px);
  z-index: 4;
  pointer-events: none;
  transform: rotate(-20deg);
}

.pratique-blob:hover { box-shadow: 10px 10px 0 var(--noir); z-index: 5; }

@keyframes blobMorphHome {
  0%   { border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; }
  20%  { border-radius: 40% 60% 30% 70% / 65% 35% 60% 40%; }
  40%  { border-radius: 70% 30% 60% 40% / 35% 65% 40% 60%; }
  60%  { border-radius: 35% 65% 45% 55% / 55% 45% 65% 35%; }
  80%  { border-radius: 55% 45% 70% 30% / 40% 60% 35% 65%; }
  100% { border-radius: 45% 55% 40% 60% / 60% 40% 55% 45%; }
}

@keyframes blobPulseHome {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); }
  70%  { transform: scale(0.93); }
  100% { transform: scale(1.05); }
}

/* Contenu — toujours centré, le texte apparaît au survol sans décalage */
.pratique-blob-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1.75rem;
  z-index: 2;
  background: transparent;
  border-radius: inherit;
  transition: background 0.35s ease;
}

.pratique-blob:hover .pratique-blob-inner { background: rgba(0,0,0,0.62); }

/* Titre — toujours visible et centré */
.pratique-blob h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--blanc);
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
  line-height: 1.1;
  margin: 0;
  transition: transform 0.35s ease;
}
/* léger recul du titre pour laisser respirer la description */
.pratique-blob:hover h3 { transform: translateY(-0.2rem); }

/* Description — masquée par défaut, apparaît centrée + plus grosse au survol */
.pratique-blob p {
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  margin: 0;
  max-width: 90%;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.35s ease, margin 0.35s ease;
}
.pratique-blob:hover p { opacity: 1; max-height: 12rem; margin: 0.65rem 0 0; }

.pratique-link {
  font-family: 'Fredoka One', cursive;
  font-size: 0.9rem;
  color: var(--blanc);
  opacity: 0;
  transform: translateY(0.3rem);
  transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
}
.pratique-blob:hover .pratique-link { opacity: 0.9; transform: translateY(0); margin-top: 0.7rem; }

/* Écrans tactiles : pas de survol → titre + description visibles d'emblée */
@media (hover: none) {
  .pratique-blob-inner { background: rgba(0,0,0,0.5); }
  .pratique-blob p { opacity: 1; max-height: 12rem; margin: 0.6rem 0 0; }
  .pratique-link { opacity: 0.9; transform: none; margin-top: 0.7rem; }
}

@media (max-width: 760px) {
  .pratiques-blobs { gap: 2rem; padding: 1rem 1.5rem 2rem; }
  .pratique-blob { width: clamp(220px, 44vw, 300px); height: clamp(220px, 44vw, 300px); }
/* --- TAILLES VARIÉES + CHEVAUCHEMENTS --- */
.pratique-blob.blob-xl, 
.pratique-blob.blob-lg,
.pratique-blob.blob-md,
.pratique-blob.blob-sm
{ width: 100%; height: 50%; min-height: 370px;}
}


 

/* SHOP */
.shop-hero { background: var(--noir); color: var(--blanc); padding: 5rem 2rem; text-align: center; border-bottom: var(--border); position: relative; overflow: hidden; }
.shop-hero::before { content: 'SHOP'; position: absolute; font-family: 'Lilita One', cursive; font-size: 22vw; color: rgba(255,255,255,0.04); top: 50%; left: 50%; transform: translate(-50%,-50%); white-space: nowrap; pointer-events: none; }
.shop-hero-content { position: relative; z-index: 1; }
.shop-hero h1 { font-size: clamp(3.5rem, 8vw, 7rem); color: var(--jaune); margin-bottom: 0.5rem; line-height: 1; }
.shop-hero p { font-size: 1.1rem; color: rgba(255,255,255,0.7); max-width: 480px; margin: 0 auto; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; max-width: 1400px; margin: 0 auto; padding: 3rem 2rem; }
.shop-card { border: var(--border); box-shadow: var(--shadow); overflow: hidden; background: var(--blanc); transition: transform 0.2s, box-shadow 0.2s; }
.shop-card:hover { transform: translate(-4px,-4px); box-shadow: 9px 9px 0 var(--noir); }
.shop-card-img-wrap { position: relative; overflow: hidden; }
.shop-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-bottom: var(--border); transition: transform 0.4s; }
.shop-card:hover .shop-card-img { transform: scale(1.05); }
.shop-card-serie { position: absolute; top: 0.75rem; left: 0.75rem; font-family: 'Fredoka One', cursive; font-size: 0.78rem; background: var(--jaune); color: var(--noir); padding: 0.2rem 0.6rem; border: 2px solid var(--noir); border-radius: 50px; }
.shop-card-vendu { position: absolute; top: 0.75rem; right: 0.75rem; font-family: 'Fredoka One', cursive; font-size: 0.78rem; background: var(--fuchsia); color: var(--blanc); padding: 0.2rem 0.6rem; border: 2px solid var(--noir); border-radius: 50px; }
.shop-card-body { padding: 1.25rem 1.25rem 0; }
.shop-card-body h3 { font-size: 1.4rem; margin-bottom: 0.4rem; color: var(--noir); }
.shop-card-body p { font-size: 0.9rem; color: var(--texte-secondaire); line-height: 1.6; margin-bottom: 1rem; }
.shop-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-top: 2px solid var(--noir); background: var(--creme); }
.prix { font-family: 'Lilita One', cursive; font-size: 1.6rem; color: var(--fuchsia); }
.btn-acheter { font-family: 'Fredoka One', cursive; font-size: 1rem; padding: 0.55rem 1.4rem; background: var(--noir); color: var(--blanc); border: var(--border); box-shadow: 3px 3px 0 var(--fuchsia); text-decoration: none; display: inline-block; border-radius: 50px; transition: all 0.15s; }
.btn-acheter:hover { background: var(--fuchsia); transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--noir); }

/* ---------- SHOP refait : deux rayons, style BD ---------- */
.shopx-rayon{ max-width:1100px; margin:0 auto 4.5rem; padding:0 1.2rem; }
.shopx-rayon-head{ margin:2.6rem 0 1.6rem; }
.shopx-rayon-titre{
  display:inline-block; margin:0;
  font-family:'Lilita One', system-ui, sans-serif;
  font-size:clamp(1.8rem, 4vw, 2.8rem); line-height:1; color:#1a1a1a;
  background:var(--accent); padding:.22em .55em;
  border:3px solid #1a1a1a; border-radius:14px 18px 12px 20px;
  box-shadow:4px 4px 0 rgba(0,0,0,.85); transform:rotate(-1.5deg);
}
.shopx-rayon-sub{ margin:1rem 0 0; max-width:46ch; font-size:1rem; color:#3a3330; }
.shopx-grid{ display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); }
.shopx-prod{
  display:flex; flex-direction:column; background:#fff;
  border:3px solid #1a1a1a; border-radius:18px;
  box-shadow:5px 6px 0 rgba(0,0,0,.85); overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.shopx-prod:hover{ transform:translate(-2px,-3px); box-shadow:8px 10px 0 rgba(0,0,0,.85); }
.shopx-prod.is-vendu{ opacity:.72; }
.shopx-prod-img{ position:relative; aspect-ratio:1/1; cursor:zoom-in; background:#f4efe6; border-bottom:3px solid #1a1a1a; }
.shopx-prod-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.shopx-vendu{
  position:absolute; top:10px; left:-6px; z-index:2; background:#1a1a1a; color:#fff;
  font-weight:800; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.32em .8em; transform:rotate(-6deg); box-shadow:2px 2px 0 rgba(0,0,0,.4);
}
.shopx-prod-body{ display:flex; flex-direction:column; gap:.45rem; padding:.95rem 1rem 1.1rem; flex:1; }
.shopx-prod-titre{ margin:0; font-family:'Fredoka One', system-ui, sans-serif; font-size:1.18rem; color:#1a1a1a; }
.shopx-prod-mat{ margin:0; font-size:.8rem; color:#6a615b; line-height:1.3; }
.shopx-prod-foot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:auto; padding-top:.5rem; }
.shopx-prix{ font-family:'Lilita One', system-ui, sans-serif; font-size:1.15rem; color:#1a1a1a; white-space:nowrap; }
.shopx-btn{
  font-weight:700; font-size:.85rem; text-decoration:none; color:#1a1a1a;
  background:var(--accent); padding:.45em .9em; border:2.5px solid #1a1a1a;
  border-radius:999px; box-shadow:2px 2px 0 rgba(0,0,0,.85); transition:transform .12s ease;
}
.shopx-btn:hover{ transform:translate(-1px,-1px); }
.shopx-btn.is-off{ background:#e7e1d6; color:#8a807a; box-shadow:none; cursor:default; }
.shopx-vide{ max-width:1100px; margin:0 auto; padding:0 1.2rem; color:#6a615b; font-style:italic; }
@media (max-width:600px){
  .shopx-grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:1.1rem; }
  .shopx-prod-titre{ font-size:1.05rem; }
}
.shopx-rayon-note{ margin:.85rem 0 0; max-width:54ch; font-size:.84rem; font-style:italic; color:#6a615b; line-height:1.45; }
.shopx-pricewrap{ display:flex; flex-direction:column; line-height:1.05; }
.shopx-port{ font-size:.68rem; font-style:normal; font-weight:400; color:#6a615b; }
.shopx-prod--lot{ position:relative; }
.shopx-prod--lot .shopx-prod-img{ outline:2px dashed rgba(0,0,0,.28); outline-offset:-10px; }
.shopx-prod-img--ph{ display:flex; align-items:center; justify-content:center; background:var(--accent); }
.shopx-prod-img--ph span{ font-family:'Lilita One', system-ui, sans-serif; font-size:3.2rem; color:#1a1a1a; opacity:.85; }

/* TEXTES & DOCUMENTS */
.docs-hero { background: var(--violet); color: var(--blanc); padding: 5rem 2rem 4rem; text-align: center; border-bottom: var(--border); }
.docs-hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); margin-bottom: 0.75rem; }
.docs-hero p { font-size: 1.05rem; opacity: 0.85; }
.doc-texte { border: var(--border); box-shadow: var(--shadow); margin-bottom: 2rem; overflow: hidden; }
.doc-texte-header { background: var(--noir); color: var(--blanc); padding: 1.5rem 2rem; border-bottom: var(--border); }
.doc-texte-header h3 { font-size: 1.4rem; margin-bottom: 0.3rem; color: var(--jaune); }
.doc-texte-meta { font-size: 0.9rem; color: rgba(255,255,255,0.6); font-family: 'Fredoka One', cursive; }
.doc-texte-body { padding: 2rem; background: var(--blanc); }
.doc-texte-body p { font-size: 1rem; line-height: 1.85; color: var(--texte-secondaire); margin-bottom: 1.2rem; }
.doc-texte-body p:last-child { margin-bottom: 0; }
.docs-download-section { background: var(--creme); border-top: var(--border); }
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.doc-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 1.5rem; border: var(--border); box-shadow: var(--shadow); background: var(--blanc); text-decoration: none; color: var(--noir); transition: transform 0.15s, box-shadow 0.15s; }
.doc-card:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 var(--noir); }
.doc-card-icon { font-size: 2rem; color: var(--fuchsia); font-family: 'Lilita One', cursive; }
.doc-card-type { font-family: 'Fredoka One', cursive; font-size: 0.78rem; background: var(--jaune); color: var(--noir); padding: 0.1rem 0.5rem; border: 2px solid var(--noir); border-radius: 50px; }
.doc-card-titre { font-weight: 500; font-size: 0.95rem; line-height: 1.4; }

/* CONTACT — split */
.contact-split { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 62px); }
.contact-left { background: var(--noir); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.contact-left-inner { position: relative; z-index: 1; padding: 4rem 3rem; }
.contact-titre { font-size: clamp(3.5rem, 7vw, 6rem); color: var(--blanc); line-height: 0.95; margin-bottom: 1.5rem; }
.contact-titre span { color: var(--jaune); }
.contact-intro { font-size: 1.05rem; color: rgba(255,255,255,0.65); line-height: 1.7; margin-bottom: 2.5rem; max-width: 320px; }
.contact-links { list-style: none; }
.contact-links li { margin-bottom: 1rem; }
.contact-link-item { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--blanc); font-size: 1rem; transition: color 0.2s; font-family: 'Fredoka One', cursive; }
.contact-link-item:hover { color: var(--jaune); }
.contact-link-icon { width: 40px; height: 40px; background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; transition: background 0.2s, border-color 0.2s; }
.contact-link-item:hover .contact-link-icon { background: var(--jaune); border-color: var(--jaune); color: var(--noir); }
.contact-blob { position: absolute; width: 400px; height: 400px; background: color-mix(in srgb, var(--fuchsia) 25%, transparent); border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%; bottom: -100px; right: -100px; animation: morphBlob 9s ease-in-out infinite alternate; pointer-events: none; z-index: 0; }
.contact-right { background: var(--creme); display: flex; align-items: center; justify-content: center; border-left: var(--border); }
.contact-right-inner { padding: 4rem 3rem; width: 100%; max-width: 480px; }
.contact-right-inner h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 2rem; }
.contact-success { background: var(--jaune); color: var(--noir); padding: 1rem 1.25rem; border: var(--border); font-family: 'Fredoka One', cursive; margin-bottom: 1.5rem; }
.contact-error { background: var(--fuchsia); color: var(--blanc); padding: 1rem 1.25rem; border: var(--border); font-family: 'Fredoka One', cursive; margin-bottom: 1.5rem; }
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label { font-family: 'Fredoka One', cursive; font-size: 0.95rem; color: var(--texte-principal); }
.form-group input, .form-group textarea { font-family: 'Outfit', sans-serif; font-size: 1rem; padding: 0.7rem 1rem; border: var(--border); background: var(--blanc); outline: none; border-radius: 2px; transition: box-shadow 0.2s; }
.form-group input:focus, .form-group textarea:focus { box-shadow: 4px 4px 0 var(--fuchsia); }
.form-group textarea { min-height: 140px; resize: vertical; }
.btn-envoyer { font-family: 'Fredoka One', cursive; font-size: 1.1rem; padding: 0.8rem 2.5rem; background: var(--noir); color: var(--blanc); border: var(--border); box-shadow: var(--shadow); cursor: pointer; align-self: flex-start; border-radius: 50px; transition: all 0.15s; }
.btn-envoyer:hover { background: var(--fuchsia); transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--noir); }

/* FOOTER */
footer { background: var(--fond-hero); color: rgba(255,255,255,0.45); text-align: center; padding: 1.75rem 2rem; font-size: 0.85rem; border-top: 4px solid var(--jaune); }
footer a { color: var(--jaune); text-decoration: none; }
footer a:hover { color: var(--orange); }

/* RESPONSIVE */
@media (max-width: 760px) {
  .contact-split { grid-template-columns: 1fr; }
  .contact-left { min-height: 50vh; }
  .contact-right { border-left: none; border-top: var(--border); }
  .contact-right-inner, .contact-left-inner { padding: 2.5rem 1.5rem; }
  .nav-links a { font-size: 0.85rem; padding: 0.3rem 0.7rem; }
  .hero { min-height: auto; }
}
@media (max-width: 480px) {
  .nav-logo { font-size: 1rem; }
  .hero-btns { flex-direction: column; align-items: center; }
}

/* ============================================================
   ON PARLE DE MON TRAVAIL
   ============================================================ */
 
.presse-section {
  background: var(--noir);
  border-top: var(--border);
}
 
.presse-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: var(--border);
}
 
.presse-card {
  padding: 3rem 2.5rem;
  border-right: 3px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
 
.presse-card:last-child {
  border-right: none;
}
 
.presse-titre {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: var(--jaune);
  line-height: 1.2;
}
 
.presse-texte {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
 
.presse-texte p {
  font-size: 0.92rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.72);
}
 
.presse-auteur {
  font-family: 'Fredoka One', cursive;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
 
@media (max-width: 900px) {
  .presse-cols { grid-template-columns: 1fr; }
  .presse-card { border-right: none; border-bottom: 3px solid rgba(255,255,255,0.1); }
  .presse-card:last-child { border-bottom: none; }
}

/* ============================================================
   📝 CACOGRAPHIE — RUBRIQUE AUTONOME
   Pêle-mêle d'images carrées, tailles variables. Pas de titres.
   Identité sobre, accent rouge BD pour le clin d'œil.
   ============================================================ */

.caco-page {
  position: relative;
  background-color: #faf6ee;
  min-height: 100vh;
}
.caco-page::before {
  content: '';
  position: fixed;
  inset: 62px 0 0 0;
  background-color: #faf6ee;
  z-index: -1;
}

/* En-tête */
.caco-header {
  max-width: 880px;
  margin: 0 auto;
  padding: 4rem 2rem 2rem;
  text-align: center;
}
.caco-titre {
  font-family: 'Lilita One', cursive;
  font-size: clamp(3rem, 7vw, 5rem);
  color: var(--noir);
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
  position: relative;
  display: inline-block;
}
/* Petit accent rouge sous le titre — discret mais signé */
.caco-titre::after {
  content: '';
  position: absolute;
  bottom: 0.15em;
  left: 12%;
  right: 12%;
  height: 0.12em;
  background: var(--fuchsia);
  border-radius: 2px;
  opacity: 0.7;
}
.caco-baseline {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--noir);
  font-style: italic;
}

/* Filtres */
.caco-filtres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem 2rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.caco-filtre {
  font-family: 'Fredoka One', cursive;
  font-size: 0.95rem;
  padding: 0.45rem 1.2rem;
  border: 2px solid var(--noir);
  background: transparent;
  color: var(--noir);
  cursor: pointer;
  border-radius: 50px;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}
.caco-filtre:hover {
  background: var(--fuchsia);
  border-color: var(--fuchsia);
  color: #faf6ee;
}
.caco-filtre.active {
  background: var(--noir);
  color: #faf6ee;
}

/* Description (intro de section) */
.caco-intro {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 2rem 2rem;
  text-align: center;
}
.caco-description {
  font-family: 'Outfit', sans-serif;
  color: var(--texte-secondaire);
  line-height: 1.7;
  margin: 0;
}
.caco-description--longue {
  font-size: 1.05rem;
}
.caco-description--courte {
  font-size: 0.98rem;
  font-style: italic;
}

/* ============================================================
   PÊLE-MÊLE — Structure fixe à 11 zones, tout carré
   Grille 5×5 avec aspect-ratio 1/1 → toutes les cellules sont carrées
   et les zones multi-cellules aussi (3×3, 2×2, 1×1).

   Disposition :
     +-------+---+---+
     |       | b | c |       a = grand carré (3×3)
     |   a   +---+---+       b, c = petits côte à côte
     |       |   d   |       d = moyen droite (2×2)
     |       |       |       e = moyen bas-gauche (2×2)
     +---+---+---+---+       f, g, h, i, j, k = 6 petits
     |   |   | f | g | h |
     | e +---+---+---+---+
     |   |   | i | j | k |
     +---+---+---+---+---+
   ============================================================ */
.caco-pelemele {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 2rem 5rem;
}
.caco-pelemele-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  aspect-ratio: 1 / 1;
  gap: 0.9rem;
  grid-template-areas:
    "a a a b c"
    "a a a d d"
    "a a a d d"
    "e e f g h"
    "e e i j k";
}

.caco-tuile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  cursor: zoom-in;
  background: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.caco-tuile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.caco-tuile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  z-index: 2;
}
.caco-tuile:hover img {
  transform: scale(1.04);
}

/* Affectation des 11 emplacements par ordre d'apparition */
.caco-pelemele-inner > .caco-tuile:nth-child(1)  { grid-area: a; }
.caco-pelemele-inner > .caco-tuile:nth-child(2)  { grid-area: b; }
.caco-pelemele-inner > .caco-tuile:nth-child(3)  { grid-area: c; }
.caco-pelemele-inner > .caco-tuile:nth-child(4)  { grid-area: d; }
.caco-pelemele-inner > .caco-tuile:nth-child(5)  { grid-area: e; }
.caco-pelemele-inner > .caco-tuile:nth-child(6)  { grid-area: f; }
.caco-pelemele-inner > .caco-tuile:nth-child(7)  { grid-area: g; }
.caco-pelemele-inner > .caco-tuile:nth-child(8)  { grid-area: h; }
.caco-pelemele-inner > .caco-tuile:nth-child(9)  { grid-area: i; }
.caco-pelemele-inner > .caco-tuile:nth-child(10) { grid-area: j; }
.caco-pelemele-inner > .caco-tuile:nth-child(11) { grid-area: k; }

/* Au-delà de 11 : les tuiles supplémentaires se placent automatiquement
   sous la grille principale (auto-flow par défaut) */
.caco-pelemele-inner > .caco-tuile:nth-child(n+12) {
  aspect-ratio: 1 / 1;
}

.caco-vide {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--texte-discret);
  font-style: italic;
  font-family: 'Outfit', sans-serif;
}

/* Responsive : sur petit écran, la structure 5×5 devient trop dense.
   On simplifie en grille carrée uniforme (toutes les tuiles même taille). */
@media (max-width: 700px) {
  .caco-pelemele-inner {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    grid-template-areas: none;
    aspect-ratio: auto;
  }
  .caco-pelemele-inner > .caco-tuile,
  .caco-pelemele-inner > .caco-tuile:nth-child(n) {
    grid-area: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 600px) {
  .caco-header { padding: 2.5rem 1.25rem 1.5rem; }
  .caco-intro  { padding: 0.5rem 1.25rem 1.5rem; }
  .caco-filtres { padding: 1rem 1.25rem 0.5rem; }
  .caco-filtre { font-size: 0.85rem; padding: 0.35rem 0.95rem; }
  .caco-pelemele {
    padding: 0.5rem 1.25rem 3rem;
  }
  .caco-pelemele-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
}

/* ============================================================
   BANDEAU DE PAGE ANIMÉ (.page-hero)
   En-tête des pages internes : fond CLAIR dédié par page (.ph-*),
   motif en filigrane, blobs + traits animés (mécanique .expos-anim),
   titre en bulle + texte de présentation.
   Variables de thème (définies sur .ph-*) :
     --ph-bg    couleur de fond claire
     --ph-trait couleur des traits SVG (foncée, pour contraster)
     --ph-motif couleur du motif (-> --blob-color de la couche motif)
     --blob1/2/3-color  palette des blobs (translucides)
   ============================================================ */
.page-hero {
  position: relative;
  background-color: var(--ph-bg, var(--creme));
  color: var(--noir);
  min-height: clamp(280px, 42vh, 460px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  border-bottom: var(--border);
}
/* Couche motif en filigrane */
.page-hero-motif {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.42;
  --blob-color: var(--ph-motif, var(--jaune));
  pointer-events: none;
}
/* Couche animée : blobs + traits. On surcharge .expos-anim pour le fond clair. */
.page-hero .page-hero-anim {
  z-index: 1;
  --trait-color: var(--ph-trait, #1a1a1a);
}
/* Contours de blobs : foncés (la version blanche de l'accueil est invisible sur fond clair) */
.page-hero .blob-1::before,
.page-hero .blob-2::before,
.page-hero .blob-3::before {
  border-color: rgba(0,0,0,0.16);
}
.page-hero-content {
  position: relative;
  z-index: 2;
  padding: 3.5rem 2rem;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-hero .comic-bubble { margin-bottom: 0.6rem; }
.page-hero-titre {
  font-family: 'Lilita One', cursive;
  margin: 0;
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  line-height: 0.9;
  color: var(--jaune);
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  letter-spacing: 1px;
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.28));
}
.page-hero-texte {
  font-family: 'Lilita One', cursive;
  font-weight: 400;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  line-height: 1.4;
  color: var(--noir);
  max-width: 56ch;
  margin: 0.6rem auto 0;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.45);
}
.page-hero .hero-btns { margin-top: 1.8rem; }

/* --- Thèmes : une couleur de fond claire dédiée + palette par page --- */
.ph-portfolio {
  --ph-bg:    #FFF1CF;            /* jaune très clair */
  --ph-motif: var(--jaune);
  --ph-trait: #6a4a00;
  --blob1-color: var(--orange);
  --blob2-color: var(--jaune);
  --blob3-color: var(--fuchsia);
}
.ph-caco {
  --ph-bg:    #FFE1ED;            /* rose très clair */
  --ph-motif: var(--fuchsia);
  --ph-trait: #8a0a3c;
  --blob1-color: var(--fuchsia);
  --blob2-color: var(--violet);
  --blob3-color: var(--jaune);
}
.ph-shop {
  --ph-bg:    #DCF1E1;            /* vert très clair */
  --ph-motif: var(--vert);
  --ph-trait: #154a25;
  --blob1-color: var(--vert);
  --blob2-color: var(--jaune);
  --blob3-color: var(--bleu);
}
.ph-contact {
  --ph-bg:    #DEE7FF;            /* bleu très clair */
  --ph-motif: var(--bleu);
  --ph-trait: #102a7a;
  --blob1-color: var(--bleu);
  --blob2-color: var(--violet);
  --blob3-color: var(--fuchsia);
}

/* ============================================================
   SHOP — bandeau d'information SumUp + repli mail / téléphone
   ============================================================ */
.shop-notice {
  background: var(--creme);
  border-bottom: var(--border);
  padding: 1.6rem 2rem;
}
.shop-notice-inner {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.6rem 1rem;
}
.shop-notice-icon {
  font-family: 'Lilita One', cursive;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--fuchsia);
  -webkit-text-stroke: 1px var(--noir);
}
.shop-notice-txt {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #3a3330;
}
.shop-notice-txt strong { color: var(--noir); }
.shop-notice-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.9rem;
}
.shop-notice-btn {
  font-family: 'Fredoka One', cursive;
  font-size: 0.92rem;
  text-decoration: none;
  padding: 0.5rem 1.2rem;
  border: var(--border);
  border-radius: 50px;
  background: var(--noir);
  color: var(--blanc);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.shop-notice-btn:hover {
  background: var(--fuchsia);
  transform: translate(-2px,-2px);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.25);
}
.shop-notice-btn--ghost {
  background: transparent;
  color: var(--noir);
}
.shop-notice-btn--ghost:hover {
  background: var(--jaune);
  color: var(--noir);
}

/* ============================================================
   CONTACT — texte chaleureux + coordonnées (sans formulaire)
   ============================================================ */
.contact-invite {
  position: relative;
  background: var(--creme);
  overflow: hidden;
}
.contact-invite-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 4.5rem 2rem 5rem;
}
.contact-invite-texte p {
  font-size: 1.15rem;
  line-height: 1.85;
  color: var(--noir);
  margin-bottom: 1.4rem;
}
.contact-invite-texte p:last-child { margin-bottom: 0; }
.contact-invite .contact-links {
  list-style: none;
  margin-top: 2.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.contact-invite .contact-link-item {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 1.1rem;
  text-decoration: none;
  color: var(--noir);
  font-family: 'Fredoka One', cursive;
  font-size: 1.05rem;
  border: var(--border);
  border-radius: 50px;
  background: var(--blanc);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.18);
  width: fit-content;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.contact-invite .contact-link-item:hover {
  background: var(--noir);
  color: var(--blanc);
  transform: translate(-2px,-2px);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.25);
}
.contact-invite .contact-link-icon {
  font-size: 1.2rem;
  line-height: 1;
}
.contact-invite .contact-blob {
  position: absolute;
  width: 420px;
  height: 420px;
  background: color-mix(in srgb, var(--fuchsia) 18%, transparent);
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%;
  bottom: -140px;
  right: -120px;
  animation: morphBlob 9s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 600px) {
  .page-hero-content { padding: 2.6rem 1.5rem; }
  .shop-notice-inner { grid-template-columns: 1fr; }
  .shop-notice-icon { display: none; }
  .shop-notice-actions { grid-column: 1; }
  .contact-invite-inner { padding: 3rem 1.5rem 4rem; }
  .contact-invite-texte p { font-size: 1.05rem; }
}