/* ====== Police Caslon pour titres + menu ====== */
@font-face {
  font-family: "Caslon3";
  src: url("fonts/Caslon 3 Italic.otf") format("opentype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

/* Empêche le “faux gras/italique” */
@supports (font-synthesis: none) {
  .intro-type,
  .work-title,
  .work-card h2,
  h1, h2, h3, h4, h5, h6 {
    font-synthesis: none;
  }
}

/* ====== Variables & base ====== */
:root{
  --rose: #ffb6c1;
  --rose-bg: rgba(255,182,193,0.45);
  --text: #222;
  --intro-size: 15px; /* taille intro par défaut */
}

*{ box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }

body{
  margin: 10px 0 10px;
  font-size: 14px;
  font-family: Arial, sans-serif;
  line-height: 1.2;
  color: var(--text);
  background: url("images/fond.png") center/cover no-repeat fixed;
  position: relative;
}
body::before{
  content:"";
  position: fixed;
  inset:0;
  background: rgba(246,238,242,0.6);
  z-index:-1;
}

/* Conteneur */
.container{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 12px;
}

/* ====== Menu capsule ====== */
.topmenu{
  position: sticky;
  top: 12px;
  display: inline-flex;
  justify-content: center;
  gap: 10px;
  padding: 5px 5px;
  background: var(--rose-bg);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.20);
  backdrop-filter: blur(2px);
  z-index: 100;
  left: 50%;
  transform: translateX(-50%);
}

/* Espace sous le menu */
main.container { margin-top: 80px; }

/* Mobile : menu centré */
@media (max-width:700px){
  .topmenu{
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    max-width: 95%;
  }
}

/* Boutons menu */
.topmenu a{
  font-family: "Caslon3", serif;
  font-style: italic;
  font-weight: 400;
  display:inline-block;
  padding: 6px 12px;
  text-decoration:none;
  color: var(--text);
  background: rgba(255,255,255,0.4);
  border-radius: 999px;
  transition: background .2s, color .2s, transform .1s;
  font-size: 15px;
}
.topmenu a:hover{
  background: rgba(255,182,193,0.4);
  color:#fff;
  transform: translateY(-1px);
}
.topmenu a:first-child{ font-size:15px; line-height:1; padding:6px 10px; }

/* ====== Titres ====== */
h1,h2,h3,h4,h5,h6{
  font-family:"Caslon3", serif;
  font-style: italic;
  font-weight: 400;
  line-height:1.1;
  letter-spacing:.3px;
  margin:24px 0 12px;
}
h1{ font-size:20px; }
h2{ font-size:15px; }
h3{ font-size:10px; }

/* ====== Works : grille & cartes ====== */
.works-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:15px;
  margin-top:15px;
}
@media (max-width:700px){
  .works-grid{ grid-template-columns:1fr; }
}

/* Rangée double */
.work-row{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}
@media (max-width:700px){
  .work-row{ grid-template-columns:1fr; }
}

/* Cartes */
.work-card{
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
  padding:5px;
  overflow:hidden;
  position:relative;
  box-shadow: 0 6px 18px rgba(0,0,0,0.20);
  /* plus de flex/order ici => on suit l’ordre HTML naturel */
}
.work-card.full{ grid-column:1 / -1; }

/* Images simples */
.work-card img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:4px;
  object-fit: contain;
}

/* Titre/meta sous les visuels (mêmes espacements qu’ailleurs) */
.work-title{
  margin:12px 0 4px;
  font-family: "Caslon3", serif;
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
}
.work-meta{
  margin:0;
  opacity:.85;
  font-size:.85rem;
  line-height: 1.35;
  font-family: Arial, sans-serif;
  font-style: normal;
}
.work-title,
.work-meta,
.work-notes {
  display: block;
  margin-bottom: 8px;  
margin-top: 8px;
}

/* Notes optionnelles (mêmes styles que meta) */
.work-notes{
  margin-top: 8px;
  font-size: .85rem;
  line-height: 1.35;
  color: var(--text);
  font-family: Arial, sans-serif;
  font-style: normal;
}
.work-notes i{
  font-family: "Caslon3", serif;
  font-style: italic;
}

/* ====== Slideshow ====== */
.slider{ position:relative; margin-bottom:16px; }
.work-card > .slider{ margin-bottom: 0; } /* même rythme que cartes simples */

.slide-frame{
  position:relative;
  width:100%;
  aspect-ratio:1/1; /* le JS mettra le vrai ratio */
  border-radius:4px;
  overflow:hidden;
  background:#ddd;
}
.slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity .35s ease;
}
.slide.active{ opacity:1; }
.slide img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit: contain; display:block;
}


/* Mobile : éviter cadres géants */
@media (max-width:700px){
  .slide-frame{ max-height:80vh; margin-left:auto; margin-right:auto; }
}

/* Flèches */
.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5;
  width:32px; height:32px;
  border:1px solid rgba(255,182,193,0.5);
  border-radius:50%;
  background: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.9);
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: background .25s, color .25s, box-shadow .25s, transform .2s;
}
.slider-arrow:hover{
  background: rgba(255,182,193,0.4);
  color:#fff;
  box-shadow: 0 0 8px rgba(255,182,193,0.9);
  transform: translateY(-50%) scale(1.1);
}
.slider-arrow:active{ transform: translateY(-50%) scale(0.95); }
.slider-arrow.left{ left:8px; }
.slider-arrow.right{ right:8px; }
@media (max-width:700px){
  .slider-arrow{ width:24px; height:24px; font-size:14px; }
}

/* Dots */
.slider-dots{
  position:absolute; bottom:10px; left:50%;
  transform:translateX(-50%);
  display:flex; gap:6px; z-index:10;
}
.slider-dot{
  all:unset; width:6px; height:6px; display:block; border-radius:50%;
  cursor:pointer;
  background: rgba(255,255,255,0.6);
  box-shadow: 0 0 6px rgba(255,255,255,0.9);
  transition: background .2s, transform .2s;
}
.slider-dot:hover{ transform: scale(1.3); }
.slider-dot.active{
  background: var(--rose);
  box-shadow: 0 0 8px rgba(255,182,193,0.9);
}

/* ===== Page catégories : grille 3→2→1 ===== */
.cat-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
  justify-items: center;
}
@media (max-width: 900px){ .cat-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .cat-grid{ grid-template-columns: 1fr; } }

/* Boutons circulaires */
.cat-button{
  --size: 174px;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255,182,193,0.4);
  box-shadow: 0 0 12px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, background .25s;
}
.cat-button:hover{
  background: rgba(255,182,193,0.65);
  box-shadow: 0 0 20px rgba(0,0,0,0.25);
  transform: scale(1.04);
}

/* GIF centré */
.cat-button img{
  display: block;
  width: 83%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* Anneau + mot unique au-dessus du GIF */
.cat-button svg{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transform-origin: 50% 50%;
}
.cat-button text{
  font-family: "Caslon3", serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 1.2px;
  fill: #000;
}
.cat-button:hover text{ fill: #fff; }

/* Mobile : taille boutons */
@media (max-width: 700px){
  .cat-button{ --size: 160px; }
}

/* ===== Intro encadrée sombre ===== */
.project-intro {
  border: 2px dashed rgba(255,255,255,0.7);
  border-radius: 6px;
  padding: 10px 50px;
  background: rgba(20,20,20,0.2);
  margin: 20px 0;
  color: #fff;
}
.project-intro .intro-type,
.project-intro .intro-body {
  font-family: "Caslon3", serif;
  font-style: italic;
  color: #fff;
}

/* Phrase “tapée” fluide (version paragraphe) */
.intro-type{
  font-family:"Caslon3", serif;
  font-style: italic;
  font-size: var(--intro-size);
  line-height: 1.2;
  display: inline;
  white-space: normal;
}
/* curseur pendant la frappe */
.intro-type.caret::after{
  content: "";
  display: inline-block;
  width: 1px; height: 1em;
  margin-left: 4px;
  background: rgba(255,255,255,0.8);
  vertical-align: -0.15em;
  animation: caretBlink 1s step-end infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
/* fin de frappe */
.intro-type.done::after{ content: none; }

/* bouton (read more) petit + aligné */
.intro-toggle{
  display: none;
  margin-left: 8px;
  position: relative;
  top: -0.08em;
  vertical-align: baseline;
  font-family:"Caslon3", serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 1px 8px;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.intro-toggle:hover{
  background: rgba(255,255,255,0.4);
  color: #000;
}

/* Sécurise l'attribut hidden (au cas où un autre CSS écrase le UA stylesheet) */
[hidden]{ display: none !important; }

/* texte déplié */
.intro-body{
  margin-top: 2px;
  font-size: var(--intro-size);
  line-height: 1.2;
}
.intro-body p{ margin: 0 0 0.6em; }
.intro-body p:first-child{ margin-top: 0; }
.intro-body i{ font-family:"Caslon3", serif; font-style: italic; }

/* Ajuste la taille d’intro sur mobile */
@media (max-width:700px){
  :root { --intro-size: 13px; }
}

/* ===== PACK "clean" (images max, pas d’ombre/fond) ===== */
.project-pack.clean img{
  display:block;
  width:100%;
  height:auto;
  border-radius:6;
  object-fit:contain;
  box-shadow:none;
  background:none;
}
.project-pack.clean .pack-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}
@media (max-width:700px){
  .project-pack.clean .pack-row{ grid-template-columns:1fr; }
}
.project-pack.clean .pack-item{
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
}

/* Bloc global en bas */
.pack-global{
  margin-top:14px;
  text-align:left;
}
.pack-global h2{
  font-family:"Caslon3", serif;
  font-style:italic;
  font-weight:400;
  font-size:16px;
  margin:0 0 4px;
}
.pack-global p{
  margin:0;
  font-size:13px;
  line-height:1.3;
}


/* ===== ABOUT — disposition & styles (aligné à gauche) ===== */

/* Empile les catégories (un bouton par ligne, aligné à gauche) */
.cv-cats {
  display: block;           /* pile verticale */
  margin: 0;                /* reset */
  padding: 0;
}
.cv-cats > details {
  display: block;
  margin: 10px 0;           /* même écart entre boutons */
}

/* Bouton capsule pour les catégories (look du menu, aligné à gauche) */
.cv-cats > details > summary {
  list-style: none;
  -webkit-user-select: none; user-select: none;
  cursor: pointer;
  font-family: "Caslon3", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;

  display: inline-block;     /* largeur = contenu (aligné à gauche) */
  padding: 6px 12px;
  color: var(--text);
  background: rgba(255,255,255,0.4);
  border-radius: 999px;
  transition: background .2s, color .2s, transform .1s;
}
.cv-cats > details > summary::-webkit-details-marker { display:none; }
.cv-cats > details > summary:hover {
  background: rgba(255,182,193,0.4);
  color: #fff;
  transform: translateY(-1px);
}

/* Triangle à droite des boutons de CATEGORIES seulement */
.cv-cats > details > summary::after{
  content: "▷";                 /* fermé */
  display: inline-block;
  margin-left: 8px;
  font-size: 14px;
  line-height: 1;
  opacity: .75;
  transition: opacity .2s ease;
}

/* Quand la catégorie est ouverte → triangle vers le bas */
.cv-cats > details[open] > summary::after{
  content: "▽";                 /* ouvert */
  opacity: .95;
}


/* Conteneur des années (repliées tant que la catégorie est fermée) */
.cv-years {
  margin: 8px 0 0 0;        /* même logique d’espacement */
  padding-left: 0;
}

/* Années : titre cliquable + petit point discret (aligné à gauche) */
.cv-years > details { margin: 6px 0 0 8px; }
.cv-years > details > summary {
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.2;
  color: var(--text);
  padding: 2px 0;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.cv-years > details > summary::-webkit-details-marker { display:none; }
.cv-years > details > summary::before {
  content: "•"; opacity: .6; font-size: 14px; line-height: 1;
  transform: translateY(-1px);
}

/* Liste d’items d’une année (alignée à gauche, indentation douce) */
.cv-year {
  margin: 6px 0 8px 18px;
  padding: 0;
  list-style: none;
}
.cv-item { margin: 8px 0 10px; }

/* Titre en gras (ligne 1) + méta à la ligne suivante (tirets) */
.cv-item .title {
  display: block;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 2px;
}
.cv-item .meta {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  opacity: .9;
}

/* petits espacements globaux */
.cv { margin-top: 8px; }
.cv section { margin-bottom: 18px; }

/* ===== Vertical rhythm — packs & sliders (safe, HTML inchangé) ===== */

/* 0) Réglages simples, faciles à tweaker */
:root{
  --vr-pack: 20px;      /* espace entre deux gros packs plein large */
  --vr-after-intro: 14px;
  --vr-inside: 6px;     /* espace sous un visuel avant titre/méta */
}

/* 1) Écart entre gros blocs FULL successifs (sans toucher aux items 2-colonnes) */
.works-grid > .work-card.full + .work-card.full{
  margin-top: var(--vr-pack);
}

/* 2) Un peu d’air après l’intro, avant la grille */
.project-intro + .works-grid{
  margin-top: var(--vr-after-intro);
}

/* 3) Packs : petit coussin en haut + supprimer la marge inutile sur la 1re rangée */
.work-card.full.project-pack{
  padding-top: var(--vr-inside);
}
.project-pack .pack-row{
  margin-top: var(--vr-inside);
}
.project-pack .pack-row:first-child{
  margin-top: 0; /* pas de double marge en haut du pack */
}

/* 4) Dans les packs uniquement, serrer le rythme slider → titre/méta
      (n'affecte pas les sliders hors packs) */
.project-pack > .slider,
.project-pack .pack-item > .slider{
  margin-bottom: var(--vr-inside);
}

/* 5) Titres/métas dans les packs (régulier et discret) */
.project-pack .work-title{ margin: var(--vr-inside) 0 6px; }
.project-pack .work-meta { margin: 0 0 var(--vr-inside); }

/* 6) Petits fix / cohérences */
.project-pack.clean img{ border-radius: 6px; } /* unit manquante corrigée */

/* ===== YouTube : 1 seul voile + gros bouton ===== */

/* Le conteneur inline de tes iframes a déjà position:relative; le JS lui mettra .yt-holder */
.yt-holder { position: relative; }

/* Voile unique (rose pâle) — visible au repos, disparaît au hover/lecture */
.yt-veil{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,182,193,.22) 0%, rgba(255,182,193,.08) 45%, rgba(255,255,255,0) 70%),
    rgba(255,255,255,.04);
  transition: opacity .25s ease;
  opacity: 1;
}
.yt-holder:hover .yt-veil,
.yt-holder.playing .yt-veil{ opacity: 0; }

/* Gros bouton play (opaque), sans autre voile */
.yt-play{
  all: unset;
  position: absolute;
  inset: 0;                  /* clic partout */
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}
.yt-play .dot{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,182,193,.96);
  box-shadow:
    0 10px 22px rgba(0,0,0,.28),
    0 0 0 2px rgba(255,255,255,.55) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.yt-holder:hover .yt-play .dot{ transform: scale(1.06); background: rgba(255,182,193,1); }

/* triangle "play" */
.yt-play .triangle{
  width: 0; height: 0;
  margin-left: 8px;
  border-left: 30px solid #fff;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
}

/* Bouton masqué quand ça joue */
.yt-holder.playing .yt-play{
  opacity: 0;
  pointer-events: none;
}

/* Sécurité : on NE FILTRE PAS l'iframe (pour éviter un second voile) */
.yt-holder iframe{ filter: none !important; }