/* ==========================================================================
   Kardelen Salvat — Portfolio
   Feuille de style principale
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600&display=swap');

:root{
  /* Palette */
  --bg:            #f8f5ef;
  --bg-alt:        #efe7d8;
  --surface:       #ffffff;
  --ink:           #211d18;
  --ink-soft:      #6f675c;
  --ink-faint:     #a49c8d;
  --accent:        #7c2e2a;   /* oxblood / rouge profond */
  --accent-dark:   #5e211e;
  --accent-soft:   #a9895a;   /* or mat */
  --line:          #e2d9c8;
  --shadow-sm:     0 2px 10px rgba(33,29,24,.06);
  --shadow-md:     0 14px 40px rgba(33,29,24,.10);

  /* Typo */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rythme */
  --container: 1560px;   /* largeur commune des pages du portfolio (avant : 1320px) */
  --radius: 2px;
  --nav-h: 84px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: .01em;
}
p{ margin: 0 0 1em; color: var(--ink-soft); }
.container{
  max-width: var(--container);
  margin: 0 auto;
  /* Marges laterales reduites (experimentation demandee par Clement, oct.
     2026) : un site plus "plein cadre", avec davantage de place pour les
     photos du deroule et du diaporama. */
  padding: 0 20px;
}
.eyebrow{
  display:block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  font-weight: 600;
}
.serif-italic{ font-style: italic; font-weight: 400; }
.name-title{ font-style: italic; letter-spacing: .005em; }

/* ---- Bascule de langue (affichage / masquage) ---- */
.lang-en{ display:none; }
html[data-lang="en"] .lang-fr{ display:none; }
html[data-lang="en"] .lang-en{ display:inline; }
html[data-lang="en"] .lang-en-block{ display:block; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content: space-between;
  height: var(--nav-h);
}
.logo{
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: .04em;
}
.logo span{ color: var(--accent); }
.nav-links{
  display:flex;
  align-items:center;
  gap: 30px;
}
.nav-links a{
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after{ transform: scaleX(1); }
.nav-links a.active{ color: var(--accent); }

/* Sous-menu "Portfolio" (regroupe les 5 catégories) */
.nav-item.dropdown{ position:relative; }
.dropdown-toggle{
  display:flex; align-items:center; gap:6px;
  background:none; border:none; font-family:inherit;
  font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  color: var(--ink); padding:6px 0;
}
.dropdown-toggle .chev{ font-size:9px; transition: transform .2s ease; }
.nav-item.dropdown:hover .chev,
.nav-item.dropdown.is-open .chev{ transform: rotate(180deg); }
.dropdown-toggle.active{ color: var(--accent); }
.dropdown-menu{
  position:absolute; top:calc(100% + 16px); left:50%;
  transform:translateX(-50%) translateY(6px);
  background: var(--surface); border:1px solid var(--line); box-shadow: var(--shadow-md);
  min-width:250px; padding:10px; border-radius: var(--radius);
  opacity:0; visibility:hidden;
  transition: all .2s ease;
}
.nav-item.dropdown:hover .dropdown-menu,
.nav-item.dropdown.is-open .dropdown-menu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.dropdown-menu a{
  display:block; padding:11px 14px; font-size:13.5px;
  text-transform:none; letter-spacing:.01em; border-radius: var(--radius);
}
.dropdown-menu a::after{ display:none; }
.dropdown-menu a:hover, .dropdown-menu a.active{ background: var(--bg-alt); color: var(--accent); }

.nav-tools{ display:flex; align-items:center; gap:18px; }
.lang-switch{
  display:flex; align-items:center; gap:6px;
  font-size: 12px; letter-spacing:.08em; font-weight:600;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 5px;
  background: var(--surface);
}
.lang-switch button{
  background:none; border:none;
  padding: 4px 10px; border-radius: 16px;
  color: var(--ink-faint);
}
.lang-switch button.is-active{
  background: var(--accent); color:#fff;
}
.nav-burger{
  display:none;
  flex-direction:column; gap:5px;
  background:none; border:none; padding: 6px;
}
.nav-burger span{ width:22px; height:1.5px; background: var(--ink); display:block; }

@media (max-width: 900px){
  .nav-burger{ display:flex; }
  .nav-links{
    position: fixed; inset: var(--nav-h) 0 0 0;
    background: var(--bg);
    flex-direction: column;
    align-items:flex-start;
    padding: 40px 32px;
    gap: 26px;
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y:auto;
  }
  .nav-links.is-open{ transform: translateX(0); }
  .nav-links a{ font-size: 16px; }
  .nav-item.dropdown{ width:100%; }
  .dropdown-toggle{ font-size:16px; }
  .dropdown-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; padding: 4px 0 4px 6px; margin-top:10px;
    display:none; min-width:0;
  }
  .nav-item.dropdown.is-open .dropdown-menu{ display:block; }
}

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size: 13px; letter-spacing:.08em; text-transform:uppercase;
  font-weight: 600;
  padding: 15px 30px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  transition: all .25s ease;
}
.btn-primary{ background: var(--ink); color:#fff; }
.btn-primary:hover{ background: var(--accent); border-color: var(--accent); }
.btn-outline{ background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color:#fff; }
.btn-arrow{ transition: transform .25s ease; }
.btn:hover .btn-arrow{ transform: translateX(4px); }

/* ==========================================================================
   Sections génériques
   ========================================================================== */
section{ padding: 64px 0; }
.section-tight{ padding: 40px 0; }
.section-head{
  max-width: 640px;
  margin-bottom: 32px;
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.bg-alt{ background: var(--bg-alt); }

/* ==========================================================================
   Hero (accueil)
   ========================================================================== */
.hero{
  padding: 30px 0 26px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items:center;
}
.hero h1{
  font-size: clamp(34px, 4.4vw, 52px);
  margin-bottom: 16px;
}
.hero-lede{
  font-size: 17px;
  max-width: 46ch;
}
.hero-actions{ display:flex; gap:16px; margin-top: 22px; flex-wrap:wrap; }
.hero-portrait{
  position:relative;
  width: 100%;
  aspect-ratio: 4/5;
  max-width: 460px;
  justify-self: end;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-md);
}
.hero-portrait .ph-visual-real{ position:absolute; inset:0; }
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-portrait{ max-width: 360px; justify-self:center; margin: 0 auto; order:-1; }
}

/* ==========================================================================
   Grille des catégories (accueil)
   ========================================================================== */
.cat-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cat-card{
  position:relative;
  display:block;
  aspect-ratio: 4/3;
  overflow:hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.cat-card .ph-visual, .cat-card .ph-visual-real{ position:absolute; inset:0; transition: transform .6s ease; }
.cat-card:hover .ph-visual, .cat-card:hover .ph-visual-real{ transform: scale(1.06); }
.cat-card-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(20,15,10,.82) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 20px;
  color:#fff;
}
.cat-card-index{
  font-family: var(--sans); font-size:11px; letter-spacing:.14em;
  color: rgba(255,255,255,.7); margin-bottom:4px; text-transform:uppercase;
}
.cat-card-title{
  font-family: var(--serif); font-size: 20px; margin:0 0 4px; color:#fff;
}
.cat-card-cta{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; color: #f1c9b0;
  opacity:0; transform: translateY(6px);
  transition: all .3s ease;
}
.cat-card:hover .cat-card-cta{ opacity:1; transform: translateY(0); }

.cat-grid.five{ grid-template-columns: repeat(5, 1fr); }
.cat-grid.four{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px){
  .cat-grid.five{ grid-template-columns: repeat(3, 1fr);}
  .cat-grid.four{ grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 640px){
  .cat-grid, .cat-grid.five, .cat-grid.four{ grid-template-columns: repeat(2, 1fr); gap:14px; }
  .cat-card-title{ font-size:18px; }
}

/* ==========================================================================
   À propos — bloc résumé (accueil)
   ========================================================================== */
.about-teaser{
  display:grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 60px;
  align-items:center;
}
.about-teaser .ph-visual, .about-teaser .ph-visual-real{ width:100%; aspect-ratio: 4/5; border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow:hidden; }
@media (max-width: 860px){
  .about-teaser{ grid-template-columns: 1fr; }
  .about-teaser .ph-visual, .about-teaser .ph-visual-real{ max-width:280px; margin:0 auto; }
}

/* ==========================================================================
   Protection basique des photos (dissuasion, cf. initImageProtection()
   dans main.js) — empêche la sélection/le glisser-déposer et, sur
   iOS/Safari, le menu "Enregistrer la photo" à l'appui long.
   ========================================================================== */
.ph-visual-real, .shop-cta-hero, .ens-ph, .ens-ph-img{
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* ==========================================================================
   Visuels placeholder (à remplacer par de vraies photos)
   ========================================================================== */
.ph-visual{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  color:#fff;
}
.ph-visual::before{
  content:""; position:absolute; inset:0;
  background: var(--ph-gradient, linear-gradient(135deg, var(--accent), var(--accent-dark)));
}
.ph-visual::after{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity:.5;
  mix-blend-mode: overlay;
}
.ph-visual .ph-icon{
  position:relative; z-index:1;
  width: 34%; max-width:96px;
  opacity:.9;
}
.ph-visual .ph-icon svg{ width:100%; height:auto; stroke: #fff; }
.ph-tag{
  position:absolute; z-index:2; left:14px; bottom:12px;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color: rgba(255,255,255,.82);
  background: rgba(0,0,0,.28);
  padding: 5px 9px; border-radius: 20px;
  backdrop-filter: blur(2px);
}
/* variantes de teintes pour varier les cartes */
.ph-1{ --ph-gradient: linear-gradient(135deg,#7c2e2a,#3c1613); }
.ph-2{ --ph-gradient: linear-gradient(135deg,#a9895a,#6d4c26); }
.ph-3{ --ph-gradient: linear-gradient(135deg,#4a4038,#211d18); }
.ph-4{ --ph-gradient: linear-gradient(135deg,#8f5a4a,#4a1f1c); }
.ph-5{ --ph-gradient: linear-gradient(135deg,#5d3b2e,#211d18); }
.ph-6{ --ph-gradient: linear-gradient(135deg,#b08d57,#7c2e2a); }

/* ==========================================================================
   Bannière de page (catégories / à propos / contact)
   ========================================================================== */
.page-banner{
  padding: 36px 0 22px;
  border-bottom: 1px solid var(--line);
}
.page-banner h1{ font-size: clamp(30px,3.6vw,44px); margin-bottom:10px; }
.page-banner p{ max-width: 62ch; font-size:16px; }
.breadcrumb{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--ink-faint); margin-bottom:14px;
}
.breadcrumb a{ color: var(--accent); }

/* ==========================================================================
   Sélecteur de mode d'affichage (Diaporama / Galerie)
   ========================================================================== */
.view-switch{
  display:inline-flex;
  border:1px solid var(--ink);
  border-radius: 30px;
  padding: 4px;
  gap:4px;
  margin: 18px 0 4px;
}
.view-switch button{
  background:none; border:none;
  padding: 9px 22px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  border-radius: 24px;
  color: var(--ink);
}
.view-switch button.is-active{ background: var(--ink); color:#fff; }

/* ==========================================================================
   Diaporama
   ========================================================================== */
.slideshow{ display:none; }
.slideshow.is-active{ display:block; }
.slide-stage{
  position:relative;
  /* Diaporama plus grand, plus "plein ecran" (demande Clement, oct. 2026) :
     la scene remplit desormais la plus grande partie de la hauteur visible,
     tout en laissant de la place pour la legende et les points de navigation. */
  height: min(66vh, 720px);
  width:auto;
  max-width:100%;
  margin:0 auto;
  aspect-ratio: 2/1; /* valeur de repli ; ajustée par JS selon le format de chaque photo */
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-md);
  background: var(--bg-alt);
}
@media (max-width: 700px){
  .slide-stage{
    height:auto;
    width:100%;
    max-height:58vh;
  }
}
.slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition: opacity .8s ease;
}
.slide.is-current{ opacity:1; visibility:visible; }
.slide-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3;
  width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,.85);
  border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  box-shadow: var(--shadow-sm);
}
.slide-nav.prev{ left:16px; }
.slide-nav.next{ right:16px; }
.slide-dots{
  display:flex; justify-content:center; gap:8px; margin-top:14px;
}
.slide-dots button{
  width:8px; height:8px; border-radius:50%;
  border:none; background: var(--line);
}
.slide-dots button.is-active{ background: var(--accent); width:22px; border-radius:5px; transition: all .3s ease; }
.slide-caption{
  padding-top: 16px;
  max-width: 62ch;
}
.slide-caption .num{
  font-size:12px; letter-spacing:.12em; color:var(--accent); text-transform:uppercase; font-weight:600;
}
.slide-caption h3{ font-size: 24px; margin:6px 0 6px; }

/* ==========================================================================
   Galerie + lightbox
   ========================================================================== */
.gallery{ display:none; }
.gallery.is-active{ display:block; }
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 22px;
  align-items: start;
}
.gallery-item{ display:block; }
.gallery-item-photo{
  border:none; padding:0; background:none; text-align:left;
  display:block; width:100%; cursor:pointer;
}
.gallery-item-photo .ph-visual, .gallery-item-photo .ph-visual-real{ aspect-ratio: 4/3; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow .25s ease; }
.gallery-item-photo:hover .ph-visual, .gallery-item-photo:hover .ph-visual-real{ box-shadow: var(--shadow-md); }
.gallery-item .g-title{
  margin-top:12px; font-family:var(--serif); font-size:17px;
}
.gallery-item .g-sub{
  font-size:12px; color: var(--ink-faint); letter-spacing:.03em;
}
@media (max-width: 860px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .gallery-grid{ grid-template-columns: 1fr; } }

/* Lien "voir le déroulé" (étapes d'un projet) — galerie et diaporama */
.process-link{
  display:inline-flex; align-items:center; gap:6px;
  border:none; background:none; padding:0; cursor:pointer;
  font-family: var(--sans); font-size:12px; letter-spacing:.05em; font-weight:600;
  color: var(--accent);
}
.process-link:hover{ text-decoration:underline; }
.gallery-item .process-link{ margin-top:8px; }
.slide-caption .process-link{ margin-top:16px; font-size:13px; }

.lightbox{
  position: fixed; inset:0; z-index: 1000;
  background: rgba(20,16,12,.92);
  display:flex; align-items:center; justify-content:center;
  padding: 40px 20px;
  opacity:0; visibility:hidden;
  transition: opacity .3s ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-inner{ max-width: 900px; width:100%; }
.lightbox .ph-visual{ aspect-ratio: 16/10; border-radius: var(--radius); }
.lightbox-caption{ color:#fff; padding-top:20px; text-align:center; }
.lightbox-caption h3{ color:#fff; font-size:22px; }
.lightbox-caption p{ color: rgba(255,255,255,.72); max-width:60ch; margin:0 auto; }
.lightbox-close{
  position:absolute; top:26px; right:30px;
  background:none; border:none; color:#fff; font-size:30px; line-height:1;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#fff; font-size:28px; padding: 10px;
}
.lightbox-nav.prev{ left: 10px; }
.lightbox-nav.next{ right: 10px; }

/* ==========================================================================
   Visionneuse de déroulé (étapes d'un projet : avant/après, évolution...)
   ========================================================================== */
.process-viewer{
  position: fixed; inset:0; z-index: 1100;
  background: rgba(20,16,12,.96);
  display:flex; align-items:center; justify-content:center;
  padding: 22px 16px;
  opacity:0; visibility:hidden;
  transition: opacity .3s ease;
}
.process-viewer.is-open{ opacity:1; visibility:visible; }
/* Visionneuse plus grande, plus "plein ecran" (demande Clement, oct. 2026).
   max-height + overflow-y:auto en filet de securite : sur un ecran bas
   (petit laptop), le contenu defile plutot que de deborder du plein ecran. */
.process-viewer-inner{ max-width: 1240px; width:100%; max-height:100%; overflow-y:auto; }
.process-visual{ position:relative; display:flex; justify-content:center; }
/* Chaque étape porte désormais son propre format (ratio réglé dans l'outil de
   cadrage, posé en inline style par main.js via --stage-ratio) : la largeur
   vise 100% du conteneur mais est plafonnée à ce qu'elle vaudrait pour une
   hauteur de --stage-max-h, et la hauteur reste "auto" (déduite par
   aspect-ratio). Ainsi la scène se cale toujours sur la contrainte la plus
   stricte (hauteur dispo ou largeur dispo) sans jamais déborder de la
   visionneuse plein écran, qu'il s'agisse d'un format très large ou très
   portrait. */
.process-stage{
  --stage-ratio: 1.3334; /* repli 4:3, remplacé en ligne par main.js selon l'étape */
  /* Scène agrandie : occupe desormais la quasi-totalite de la hauteur
     disponible de la visionneuse plein ecran (demande Clement, oct. 2026). */
  --stage-max-h: min(78vh, 860px);
  width: 100%;
  max-width: calc(var(--stage-max-h) * var(--stage-ratio));
  height: auto;
  aspect-ratio: var(--stage-ratio);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-md);
}
.process-info{ color:#fff; padding-top:12px; text-align:center; }
.process-project-title{
  font-family: var(--sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color: rgba(255,255,255,.6); margin-bottom:8px;
}
.process-step-num{ color: var(--accent-soft); }
.process-step-caption{ font-size:15px; color: rgba(255,255,255,.88); max-width:56ch; margin:0 auto 22px; }
.process-thumbs{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.process-thumbs button{
  width:52px; height:52px; flex-shrink:0; overflow:hidden;
  border-radius: var(--radius); border:2px solid transparent; padding:0;
  background:none; opacity:.45; transition: opacity .2s ease, border-color .2s ease;
}
.process-thumbs button.is-active{ opacity:1; border-color:#fff; }
.process-thumbs .ph-visual, .process-thumbs .ph-visual-real{ width:100%; height:100%; }
.process-thumbs .ph-tag{ display:none; }
@media (max-width:640px){ .process-thumbs button{ width:40px; height:40px; } }

/* ==========================================================================
   À propos — page complète
   ========================================================================== */
.bio-grid{
  display:grid; grid-template-columns: .8fr 1.2fr; gap:70px; align-items:start;
}
.bio-grid .ph-visual, .bio-grid .ph-visual-real{ width:100%; aspect-ratio: 4/5; border-radius: var(--radius); box-shadow: var(--shadow-md); position:sticky; top: calc(var(--nav-h) + 30px); overflow:hidden; }
.bio-grid .lede{ font-size:19px; color: var(--ink); font-family: var(--serif); font-style: italic; margin-bottom: 26px; }
@media (max-width: 860px){
  .bio-grid{ grid-template-columns:1fr; }
  .bio-grid .ph-visual, .bio-grid .ph-visual-real{ position:static; max-width:320px; margin: 0 auto 20px; }
}
.skills-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: 10px 30px; margin-top:10px; }
.skills-list li{ padding: 10px 0; border-bottom: 1px solid var(--line); font-size:14px; color: var(--ink-soft); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 70px; }
.contact-info-card{
  background: var(--surface); border:1px solid var(--line);
  padding: 34px; border-radius: var(--radius);
}
.contact-info-card h3{ font-size:19px; }
.contact-line{
  display:flex; gap:14px; padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size:14px;
}
.contact-line:last-child{ border-bottom:none; }
.contact-line .k{ color: var(--ink-faint); min-width: 90px; text-transform:uppercase; font-size:11px; letter-spacing:.08em; padding-top:2px; }
.social-row{ display:flex; gap:14px; margin-top:20px; }
.social-row a{
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:13px;
  color: var(--ink);
  transition: all .2s ease;
}
.social-row a svg{ width:17px; height:17px; fill: currentColor; }
.social-row a:hover{ background: var(--ink); color:#fff; border-color: var(--ink); }

.form-field{ margin-bottom: 20px; }
.form-field label{ display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:8px; }
.form-field input, .form-field textarea{
  width:100%; border:1px solid var(--line); background: var(--surface);
  padding: 14px 16px; font-family: var(--sans); font-size:14px; color: var(--ink);
  border-radius: var(--radius);
}
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color: var(--accent); }
/* Champ « Message » : pas de poignée d'agrandissement, il s'allonge tout seul (voir main.js) */
.form-field textarea{ resize: none; overflow: hidden; }
.form-note{ font-size:12px; color: var(--ink-faint); margin-top:14px; }
.form-success{
  display:none; background:#eef4ea; border:1px solid #c9dcc0; color:#3c5c30;
  padding:14px 18px; font-size:14px; border-radius: var(--radius); margin-bottom:20px;
}
.form-success.is-visible{ display:block; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Pédagogie & créations — sections spécifiques
   ========================================================================== */
.course-list{ display:grid; gap: 18px; }
.course-item{
  display:flex; justify-content:space-between; gap:20px; align-items:flex-start;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.course-item h4{ font-size:18px; margin-bottom:6px; }
.course-item .tag{
  flex-shrink:0; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--accent); border:1px solid var(--accent); padding:6px 12px; border-radius:20px;
}
.shop-cta{
  margin-top: 60px;
  background: var(--ink); color:#fff;
  padding: 54px 48px; border-radius: var(--radius);
  display:flex; justify-content:space-between; align-items:center; gap: 30px; flex-wrap:wrap;
}
.shop-cta h3{ color:#fff; font-size: 26px; margin-bottom:8px; }
.shop-cta p{ color: rgba(255,255,255,.7); margin:0; max-width:48ch; }
.shop-cta .btn-outline{ border-color:#fff; color:#fff; }
.shop-cta .btn-outline:hover{ background:#fff; color:var(--ink); }
/* Mise en avant en tête de la page Pédagogie & Créations — cadre agrandi
   avec la photo "création artisanale" (artisanal 1) en fond, assombrie par
   un dégradé pour garder le texte lisible tout en laissant bien voir la
   photo derrière. */
.shop-cta-hero{
  margin-top:0;
  /* Haut inchangé (92px) ; bas agrandi pour laisser voir davantage le bas
     de la photo de fond, sans toucher au haut du cadre. */
  padding: 92px 52px 170px;
  background:
    linear-gradient(120deg, rgba(18,14,12,.84) 0%, rgba(18,14,12,.58) 55%, rgba(18,14,12,.4) 100%),
    url('../img/pedagogie/artisanal-1/cover.jpg') center 45%/cover no-repeat;
}
.shop-cta-hero .eyebrow{ display:block; margin-bottom:10px; }
.shop-cta-hero h3{ font-size: 34px; }
.shop-cta-hero p{ font-size: 16.5px; }
@media (max-width: 700px){
  .shop-cta-hero{ padding: 56px 28px 110px; }
  .shop-cta-hero h3{ font-size: 27px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 60px 0 30px;
  margin-top: 60px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px;
}
.footer-grid h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:16px; }
.footer-grid a{ display:block; font-size:14px; padding: 6px 0; color: var(--ink-soft); }
.footer-grid a:hover{ color: var(--accent); }
.footer-bottom{
  border-top:1px solid var(--line); padding-top:24px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:12px; color: var(--ink-faint);
}
@media (max-width: 700px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Divers
   ========================================================================== */
.mt-lg{ margin-top: 56px; }
.text-center{ text-align:center; }
.small-note{ font-size:13px; color: var(--ink-faint); }

/* ==========================================================================
   Textes des projets (oct. 2026) : titre + auteur, accroche, description,
   techniques en étiquettes. Visionneuse de déroulé : panneau de texte à
   droite de la photo sur grand écran, en dessous sur petit écran.
   ========================================================================== */
.t-sub{ font-size:.72em; color: var(--ink-faint); font-style: normal; }
.gallery-item .g-title .t-sub{ display:block; font-size:13.5px; font-style:italic; color: var(--ink-soft); margin-top:1px; }
.gallery-item .g-title .t-dash{ display:none; }
.slide-caption h3 .t-sub{ font-size:.62em; }

.tech-tags{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; gap:6px; }
.tech-tags li{
  font-family: var(--sans); font-size:11.5px; letter-spacing:.03em; line-height:1.35;
  padding:4px 10px; border-radius:999px;
  border:1px solid var(--line); color: var(--ink-soft); background: var(--surface, #fff);
}

/* Lightbox (fond sombre) */
.lightbox-caption .t-sub, .process-viewer .t-sub{ color: rgba(255,255,255,.55); }
.lightbox-caption .p-tag{ color: rgba(255,255,255,.88); font-family: var(--serif); font-style: italic; margin-bottom:8px; }
.lightbox-caption .tech-tags{ justify-content:center; }
.lightbox-caption .tech-tags li, .process-viewer .tech-tags li{
  border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.8); background: rgba(255,255,255,.05);
}

/* Visionneuse de déroulé */
.process-viewer{ background: rgba(20,16,12,.985); }
.process-project-text{ max-width: 62ch; margin: 4px auto 18px; text-align:left; }
.process-project-text .process-h{ color:#fff; font-size:24px; margin:0 0 6px; line-height:1.2; }
.process-project-text .p-tag{ color: rgba(255,255,255,.9); font-family: var(--serif); font-style: italic; font-size:16.5px; margin:0 0 10px; }
.process-project-text .p-desc{ color: rgba(255,255,255,.72); font-size:14.5px; line-height:1.65; margin:0; }
.process-project-text .tech-tags{ margin-top:14px; }
@media (max-width:1099px){
  .process-project-text{ text-align:center; }
  .process-project-text .p-desc{ text-align:left; }
  .process-project-text .tech-tags{ justify-content:center; }
}
@media (min-width:1100px){
  .process-viewer-inner{
    max-width: 1460px;
    display:grid; grid-template-columns: minmax(0,1fr) 330px; gap: 40px; align-items:center;
  }
  .process-info{ text-align:left; padding-top:0; }
  .process-project-text{ margin:0 0 22px; max-width:none; }
  .process-step-caption{ margin:0 0 16px; }
  .process-thumbs{ justify-content:flex-start; }
}

/* Fondu doux entre les photos de la galerie / du déroulé (oct. 2026) */
@keyframes kSoftIn{ from{ opacity:0; } to{ opacity:1; } }
.soft-in{ animation: kSoftIn .6s ease; }
@media (prefers-reduced-motion: reduce){ .soft-in{ animation:none; } }

/* Contact : ligne discrète vers la boutique (+ Etsy quand elle existe) */
.contact-shop-line{ margin: 26px 0 8px; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.contact-shop-line a{ color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; font-family: var(--sans); font-size: 14px; }
.contact-shop-line a + a{ margin-left: 6px; }
.contact-shop-line a[hidden]{ display:none; }

/* Esperluette « & » plus sobre (voir initAmpersands dans main.js) */
.amp{ font-family: var(--sans); font-style: normal; font-weight: 300; font-size: .86em; margin: 0 .04em; }

/* Accueil — le texte d'introduction s'étire jusqu'à la photo (moins de vide) */
.hero-grid{ grid-template-columns: minmax(0,1fr) minmax(300px, 460px); gap: clamp(40px, 5vw, 80px); }
.hero-lede{ max-width: none; font-size: 18.5px; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }

/* Diaporama — légende centrée sous la photo */
.slide-caption{ max-width: 74ch; margin: 0 auto; text-align: center; }

/* Accueil — apparition douce du portrait à l'arrivée sur le site :
   il se dévoile en fondu et la photo se rapproche très légèrement. */
.hero-portrait{ animation: heroPortraitIn 1.6s cubic-bezier(.2,.7,.2,1) .2s both; }
.hero-portrait .ph-visual-real{ animation: heroPortraitZoom 3.2s cubic-bezier(.16,.7,.2,1) .2s both; }
@keyframes heroPortraitIn{ from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes heroPortraitZoom{ from{ transform: scale(1.09); } to{ transform: scale(1); } }
@media (prefers-reduced-motion: reduce){
  .hero-portrait, .hero-portrait .ph-visual-real{ animation: none; }
}

/* Accueil — photo de « Quelques mots sur Kardelen » : cadre + apparition douce */
.about-teaser .about-photo{ position:relative; width:100%; aspect-ratio: 4/5; border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow:hidden; }
.about-teaser .about-photo .ph-visual-real{ position:absolute; inset:0; box-shadow:none; border-radius:0; }
.about-photo.reveal-ready{ opacity:0; transform: translateY(16px); }
.about-photo.reveal-ready .ph-visual-real{ transform: scale(1.09); }
.about-photo.reveal-ready.is-in{ opacity:1; transform:none; transition: opacity 1.6s cubic-bezier(.2,.7,.2,1), transform 1.6s cubic-bezier(.2,.7,.2,1); }
.about-photo.reveal-ready.is-in .ph-visual-real{ transform: scale(1); transition: transform 3.2s cubic-bezier(.16,.7,.2,1); }
@media (max-width: 860px){ .about-teaser .about-photo{ max-width:280px; margin:0 auto; } }
@media (prefers-reduced-motion: reduce){
  .about-photo.reveal-ready, .about-photo.reveal-ready .ph-visual-real{ opacity:1; transform:none; transition:none; }
}

/* Accueil — portrait descendu un peu : il finit juste au-dessus de « Savoir-faire » */
.hero-portrait{ top: 40px; }
@media (max-width: 900px){ .hero-portrait{ top: 0; } }

/* Pédagogie — cadre « Créations à la vente » plus haut : sa hauteur suit
   maintenant la largeur (format proche de la photo), pour voir aussi la
   rangée du bas (théière bleue, chouette au violoncelle, théière cuivrée).
   La photo est passée dans un calque (::before) pour pouvoir s'animer
   comme le portrait de l'accueil : fondu + léger rapprochement. */
.shop-cta-hero{
  aspect-ratio: 1.7;
  padding: 80px 52px 60px;
  align-items: flex-start; align-content: flex-start;
  position: relative; overflow: hidden; isolation: isolate;
  background: #1b1612;
  animation: heroPortraitIn 1.6s cubic-bezier(.2,.7,.2,1) .15s both;
}
.shop-cta-hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(120deg, rgba(18,14,12,.82) 0%, rgba(18,14,12,.5) 50%, rgba(18,14,12,.3) 100%),
    url('../img/pedagogie/artisanal-1/cover.jpg') center 72%/cover no-repeat;
  animation: heroPortraitZoom 3.2s cubic-bezier(.16,.7,.2,1) .15s both;
}
@media (max-width: 700px){ .shop-cta-hero{ aspect-ratio: auto; padding: 56px 28px 160px; } }

/* Pédagogie — photos d'atelier : même apparition douce, l'une après l'autre,
   quand on arrive dessus en faisant défiler */
.ens-ph{ position: relative; overflow: hidden; }
.ens-ph-img{ position:absolute; inset:0; background-size: cover; background-repeat: no-repeat; }
.ens-ph.reveal-ready{ opacity:0; transform: translateY(16px); }
.ens-ph.reveal-ready .ens-ph-img{ transform: scale(1.09); }
.ens-ph.reveal-ready.is-in{ opacity:1; transform:none; transition: opacity 1.6s cubic-bezier(.2,.7,.2,1) var(--d,0s), transform 1.6s cubic-bezier(.2,.7,.2,1) var(--d,0s); }
.ens-ph.reveal-ready.is-in .ens-ph-img{ transform: scale(1); transition: transform 3.2s cubic-bezier(.16,.7,.2,1) var(--d,0s); }
@media (prefers-reduced-motion: reduce){
  .shop-cta-hero, .shop-cta-hero::before{ animation: none; }
  .ens-ph.reveal-ready, .ens-ph.reveal-ready .ens-ph-img{ opacity:1; transform:none; transition:none; }
}

/* Pédagogie — cadre « Créations à la vente » : réglages choisis par Kardelen
   dans outil-cadre-creations.html (hauteur 33 % de la largeur, photo à 56 %,
   assombrissement 87 %). */
.shop-cta-hero{ aspect-ratio: 3.0303; }
.shop-cta-hero::before{
  background:
    linear-gradient(120deg, rgba(18,14,12,.713) 0%, rgba(18,14,12,.435) 50%, rgba(18,14,12,.261) 100%),
    url('../img/pedagogie/artisanal-1/cover.jpg') 50% 56.35%/cover no-repeat;
}
@media (max-width: 700px){ .shop-cta-hero{ aspect-ratio: auto; } }

/* Pédagogie — « Créations à la vente » à la même taille que « Cours & ateliers » */
.shop-cta-hero h3{ font-size: 24px; }
@media (max-width: 700px){ .shop-cta-hero h3{ font-size: 24px; } }

/* Contact — petit point discret entre « Découvrir la boutique » et « Etsy » */
.contact-shop-sep{ margin: 0 8px; color: var(--ink-faint); font-family: var(--sans); font-size: 14px; }

/* En-tête — nom plus petit et plus discret (le grand nom reste dans l'accueil) */
.logo{ font-size: 16px; letter-spacing: .16em; }

/* ==========================================================================
   Accueil — bande sombre : le fond noir du portrait s'étire vers la gauche
   et devient un bandeau ; le texte passe en blanc par-dessus, la photo est
   un peu adoucie et se fond dans le noir sur son bord gauche.
   (Pour revenir en arrière : supprimer ce bloc.)
   ========================================================================== */
.hero{ padding: 26px 0 30px; }
.hero .hero-grid{
  position: relative;
  background: #080808;
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 0;
  padding: 0 0 0 clamp(32px, 5vw, 80px);
  min-height: min(72vh, 620px);
  width: calc(100% - 40px); max-width: calc(var(--container) - 40px); /* mêmes bords que le reste de la page */
}
.hero .hero-grid > div:first-child{ position: relative; z-index: 2; padding: 48px 0; }
.hero .eyebrow{ color: rgba(255,255,255,.55); }
.hero h1{ color: #fff; }
.hero-lede{ color: rgba(255,255,255,.74); }
.hero .btn-primary{ background:#fff; color: var(--ink); border-color:#fff; }
.hero .btn-primary:hover{ background: var(--accent); color:#fff; border-color: var(--accent); }
.hero .btn-outline{ color:#fff; border-color: rgba(255,255,255,.6); }
.hero .btn-outline:hover{ background:#fff; color: var(--ink); border-color:#fff; }
.hero-portrait{
  top: 0; align-self: stretch; justify-self: end;
  width: auto; height: 100%; max-width: none; aspect-ratio: 1 / 1;
  border-radius: 0; box-shadow: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%);
          mask-image: linear-gradient(to right, transparent 0%, #000 30%);
}
.hero-portrait .ph-visual-real{ filter: brightness(.88) contrast(.92); opacity: .9; }
@media (max-width: 900px){
  .hero .hero-grid{ grid-template-columns: 1fr; padding: 0 24px 8px; min-height: 0; width: 100%; }
  .hero-portrait{ order: -1; width: calc(100% + 48px); height: auto; margin: 0 -24px; max-width: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 65%, transparent 100%); }
  .hero .hero-grid > div:first-child{ padding: 0 0 32px; margin-top: -40px; }
}

/* Accueil — bande adoucie : noir chaud (anthracite) au lieu du noir pur,
   photo aux noirs légèrement relevés pour se fondre dans la bande,
   textes en blanc cassé crème plutôt qu'en blanc pur. */
.hero .hero-grid{ background: #1e1b18; }
.hero-portrait .ph-visual-real{ filter: contrast(.78) brightness(1.02) sepia(.18); opacity: .94; }
.hero .eyebrow{ color: rgba(241,235,227,.5); }
.hero h1{ color: #ece5da; }
.hero-lede{ color: rgba(236,229,218,.68); }
.hero .btn-primary{ background:#ece5da; border-color:#ece5da; color: var(--ink); }
.hero .btn-outline{ color:#ece5da; border-color: rgba(236,229,218,.45); }
.hero .btn-outline:hover{ background:#ece5da; border-color:#ece5da; color: var(--ink); }

/* Accueil — « Kardelen Salvat » un peu plus petit dans la bande */
.hero h1{ font-size: clamp(30px, 3.7vw, 44px); }

/* ==========================================================================
   Survol des photos (nov. 2026) : léger zoom (sans noir et blanc),
   sur les cartes des disciplines et sur les photos des projets.
   ========================================================================== */

/* Galerie : le cadre reste fixe, la photo zoome à l'intérieur */
.gallery-item-photo{ border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .25s ease; }
.gallery-item-photo .ph-visual, .gallery-item-photo .ph-visual-real{ border-radius: 0; box-shadow: none; transition: transform .6s ease, filter .6s ease; }
.gallery-item-photo:hover{ box-shadow: var(--shadow-md); }
.gallery-item-photo:hover .ph-visual, .gallery-item-photo:hover .ph-visual-real{ box-shadow: none; transform: scale(1.06); }

/* Diaporama : léger zoom seulement (la grande photo garde ses couleurs) */
.slide .ph-visual-real{ transition: transform .8s ease; }
.slide-stage:hover .slide.is-current .ph-visual-real{ transform: scale(1.04); }

/* Flèches et bouton « fermer » toujours au-dessus des photos (diaporama des projets) */
.lightbox-nav, .lightbox-close{ z-index: 6; }

/* ==========================================================================
   TÉLÉPHONE (nov. 2026) — mise en page dédiée aux petits écrans.
   Tout ce bloc ne s'applique qu'en dessous de 760 px de large :
   l'affichage sur ordinateur ne change pas.
   ========================================================================== */
.hero-mini{ display:none; }
.m-tabs{ display:none; }

/* Menu (burger) : la liste des disciplines s'affiche directement sous
   « Portfolio », bien dans le cadre de l'écran (plus de décalage à gauche). */
@media (max-width: 900px){
  .nav-item.dropdown .dropdown-menu,
  .nav-item.dropdown:hover .dropdown-menu,
  .nav-item.dropdown.is-open .dropdown-menu{
    display:block; position:static; transform:none; opacity:1; visibility:visible;
    background:transparent; box-shadow:none; border:none; border-left:1px solid var(--line);
    margin:12px 0 0 2px; padding:0 0 0 14px; min-width:0;
  }
  .dropdown-menu a{ padding:7px 0; font-size:14px; color: var(--ink-soft); background:none !important; }
  .dropdown-menu a.active{ color: var(--accent); }
  .dropdown-toggle .chev{ display:none; }
  .nav-links{ gap: 22px; padding: 30px 28px 40px; inset: var(--hdr-h, var(--nav-h)) 0 0 0; }

  /* Onglets toujours affichés sous l'en-tête : téléphone ET tablette (nov. 2026) */
  /* --- Onglets des pages principales (style Behance) ------------------- */
  .m-tabs{
    display:block; position:relative; border-top:1px solid var(--line);
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .m-tabs::-webkit-scrollbar{ display:none; }
  .m-tabs-track{ display:flex; gap:26px; padding:0 20px; width:max-content; position:relative; }
  .m-tabs a{
    display:block; padding:11px 0 10px; white-space:nowrap;
    font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint);
  }
  .m-tabs a.is-active{ color: var(--ink); }
  .m-tabs-bar{
    position:absolute; bottom:0; left:0; height:2px; background: var(--accent); border-radius:2px;
    transition: transform .55s cubic-bezier(.2,.7,.2,1), width .55s cubic-bezier(.2,.7,.2,1);
  }
}

@media (max-width: 760px){

  /* --- En-tête un peu plus compact ------------------------------------- */
  :root{ --nav-h: 64px; }
  .nav{ height: 64px; }

  /* --- Accueil : bande paysage (comme sur ordinateur) ------------------- */
  .hero{ padding: 14px 0 6px; }
  .hero .hero-grid{
    display:block; position:relative; height: 214px; min-height:0;
    width: calc(100% - 32px); max-width:none; margin: 0 auto; padding: 0 18px;
  }
  .hero-portrait{
    position:absolute; top:0; right:0; bottom:0; left:auto; order:0;
    width: 60%; height:100%; margin:0; max-width:none; aspect-ratio:auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 48%);
            mask-image: linear-gradient(to right, transparent 0%, #000 48%);
  }
  .hero .hero-grid > div:first-child{
    position:relative; z-index:2; width: 64%; height:100%; margin:0; padding: 0;
    display:flex; flex-direction:column; justify-content:center;
  }
  .hero .eyebrow{ font-size: 9px; letter-spacing:.16em; margin-bottom: 8px; }
  .hero h1{ font-size: 25px; margin-bottom: 8px; line-height:1.1; }
  .hero-lede, .hero-actions{ display:none; }
  .hero-mini{ display:block; margin:0; font-size: 12.5px; line-height:1.5; color: rgba(236,229,218,.72); }
}
/* TABLETTE (431–760 px, nov. 2026) : la bande s'élargissait sans grandir en hauteur
   et la photo était coupée (tête). Ici le cadre de la photo reste carré, comme sur
   le téléphone : tête et marionnette entières. Le téléphone ne change pas. */
@media (min-width: 431px) and (max-width: 760px){
  .hero .hero-grid{ height: clamp(214px, 40vw, 304px); }
  .hero-portrait{ width:auto; aspect-ratio: 1 / 1; height:100%; }
  .hero .hero-grid > div:first-child{ width: 58%; }
  .hero h1{ font-size: 30px; }
  .hero-mini{ font-size: 13.5px; }
}
@media (max-width: 760px){

  /* --- Titres de section plus compacts ---------------------------------- */
  section{ padding: 36px 0; }
  .section-tight{ padding: 22px 0; }
  #disciplines{ padding-top: 18px !important; }
  .section-head{ margin-bottom: 16px; }
  .section-head h2{ font-size: 23px; line-height:1.2; }
  .eyebrow{ font-size: 10px; }
  .page-banner{ padding: 18px 0 14px; }
  .page-banner h1{ font-size: 26px; margin-bottom: 6px; }
  .page-banner p{ font-size: 13.5px; margin-bottom: 0; }
  .breadcrumb{ display:none; }
  .page-banner.m-compact{ padding: 14px 0 10px; }
  .page-banner.m-compact p{ display:none; }
  .m-first{ padding: 14px 0 14px; }

  /* --- Cartes des disciplines : photo en entier, titre en dessous ------- */
  .cat-grid, .cat-grid.five, .cat-grid.four{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cat-card{
    aspect-ratio:auto; display:flex; flex-direction:column;
    background: var(--surface); border-radius: 8px; overflow:hidden;
    box-shadow: 0 2px 14px rgba(33,29,24,.08);
  }
  .cat-card .ph-visual, .cat-card .ph-visual-real{ position:relative; inset:auto; width:100%; aspect-ratio: 4/3; }
  .cat-card-overlay{
    position:static; background:none; color: var(--ink);
    padding: 9px 11px 12px; justify-content:flex-start; flex:1;
  }
  .cat-card-index{ color: var(--accent); font-size: 9.5px; margin-bottom: 3px; }
  .cat-card-title{ color: var(--ink); font-size: 14.5px; line-height: 1.25; margin:0; }
  .cat-card-cta{ display:none; }

  /* --- Galerie des projets : grandes photos, coins arrondis ------------- */
  .gallery-item-photo{ border-radius: 8px; }

  /* --- Pédagogie & Créations : les deux cadres visibles d'un coup ------- */
  .shop-cta-hero.m-card{
    aspect-ratio: 16 / 10 !important; padding: 14px 16px 15px !important;
    display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; flex-wrap:nowrap; gap: 8px;
    border-radius: 8px;
  }
  .shop-cta-hero.m-card::before{
    background:
      linear-gradient(180deg, rgba(18,14,12,0) 30%, rgba(18,14,12,.78) 100%),
      url('../img/pedagogie/artisanal-1/cover.jpg') 50% 50%/cover no-repeat;
  }
  a.ens-hero.shop-cta-hero.m-card::before{
    background:
      linear-gradient(180deg, rgba(18,14,12,0) 30%, rgba(18,14,12,.78) 100%),
      url('../img/pedagogie/enseignement/marionnette.jpg') center 42%/cover no-repeat !important;
  }
  .shop-cta-hero.m-card .eyebrow{ font-size: 9px; margin-bottom: 3px; }
  .shop-cta-hero.m-card h3{ font-size: 19px !important; margin: 0; }
  .shop-cta-hero.m-card p{ display:none; }
  .shop-cta-hero.m-card .btn{
    padding: 0 0 2px; border:0; border-bottom: 1px solid rgba(255,255,255,.55); border-radius:0;
    background:none !important; color: rgba(255,255,255,.88) !important; font-size: 10px; letter-spacing:.12em;
  }
  .ens-section{ padding-top: 0; }

  /* --- Contact : réseaux sociaux retirés -------------------------------- */
  .social-row{ display:none; }

  /* --- Passage d'une page à l'autre par glissement ---------------------- */
  body.m-leave-next main, body.m-leave-next footer{ opacity:0; transform: translateX(-28px); transition: opacity .22s ease, transform .22s ease; }
  body.m-leave-prev main, body.m-leave-prev footer{ opacity:0; transform: translateX(28px);  transition: opacity .22s ease, transform .22s ease; }
  body.m-enter-next main{ animation: mEnterNext .5s cubic-bezier(.2,.7,.2,1) both; }
  body.m-enter-prev main{ animation: mEnterPrev .5s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes mEnterNext{ from{ opacity:0; transform: translateX(32px); } to{ opacity:1; transform:none; } }
@keyframes mEnterPrev{ from{ opacity:0; transform: translateX(-32px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  body.m-enter-next main, body.m-enter-prev main{ animation:none; }
}

/* Visionneuses (photos / déroulé) et diaporamas : sur écran tactile, on glisse le doigt.
   « touch-action » doit être posé sur la zone ET sur tout ce qu'elle contient :
   sinon un cadre défilant intérieur (ex. .process-viewer-inner) laisse le téléphone
   reprendre le geste horizontal. La 1re ligne sert aux anciens navigateurs. */
.lightbox, .process-viewer, .slide-stage, .swipe-zone,
.lightbox *, .process-viewer *, .slide-stage *, .swipe-zone *{ touch-action: pan-y; touch-action: pan-y pinch-zoom; }
/* écrans tactiles uniquement : pas de bulle « enregistrer l'image », pas de
   sélection de texte qui démarre pendant un appui long sur une photo */
@media (hover: none){
  .slide-stage, .lightbox-stage, .process-stage, .swipe-zone .ph-visual-real, .swipe-zone .piece-arrow,
  .lightbox-nav, .slide-nav{
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
  }
}

/* ==========================================================================
   Apparition progressive des photos au défilement (nov. 2026) — même effet
   que sur Pédagogie & Créations et Cours & ateliers : fondu, léger glissement
   vers le haut, et la photo se rapproche doucement ; les photos d'une même
   rangée arrivent l'une après l'autre. Sur ordinateur et sur téléphone.
   (voir photoReveal() dans main.js)
   ========================================================================== */
.pr-ready{ opacity:0; transform: translateY(16px); }
.pr-ready .ph-visual-real{ transform: scale(1.09); }
.pr-ready.pr-in{ opacity:1; transform:none; transition: opacity 1.6s cubic-bezier(.2,.7,.2,1) var(--d,0s), transform 1.6s cubic-bezier(.2,.7,.2,1) var(--d,0s); }
.pr-ready.pr-in .ph-visual-real{ transform: scale(1); transition: transform 3.2s cubic-bezier(.16,.7,.2,1) var(--d,0s); }
@media (prefers-reduced-motion: reduce){
  .pr-ready, .pr-ready .ph-visual-real{ opacity:1; transform:none; transition:none; }
}