/* ==========================================================================
   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); }
.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; }