@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* =============================================
   VARIABLES & RESET
   ============================================= */
:root {
  --bg:           #F7F5F1;
  --surface:      #FFFFFF;
  --dark:         #1A1815;
  --muted:        #928F89;
  --accent:       #B8965A;
  --accent-hover: #9A7A44;
  --accent-light: #EDE8DE;
  --border:       #E2DCD2;
  --shadow:       0 4px 30px rgba(26,24,21,0.08);
  /* Ombre portée des photos (accueil + à propos) : elle décolle la photo du
     fond crème. Trois couches superposées, comme une vraie ombre :
       1. contact — courte et dense, elle dessine le bord de la photo ;
       2. médiane — la chute juste sous le cadre ;
       3. ambiante — large et diffuse, c'est elle qui donne la hauteur.
     Une seule couche donnait un flou uniforme, qui « colle » la photo au fond.
     Point de réglage unique ; la version « survol » monte d'un cran. */
  --shadow-photo:
      0 2px 4px    rgba(26,24,21,0.12),
      0 12px 24px -8px  rgba(26,24,21,0.32),
      0 34px 64px -18px rgba(26,24,21,0.40);
  --shadow-photo-hover:
      0 4px 8px    rgba(26,24,21,0.14),
      0 18px 34px -8px  rgba(26,24,21,0.36),
      0 50px 90px -20px rgba(26,24,21,0.50);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --nav-h:  72px;
  --max-w:  1200px;
  --radius: 4px;
  --ease:   0.3s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* L'attribut `hidden` du HTML ne masque un élément que via une règle par défaut
   du navigateur, que n'importe quel `display:` explicite écrase silencieusement.
   Sans ce garde-fou, un `element.hidden = true` sur un bloc en `display:flex`
   reste visible — piège vécu avec les onglets de thèmes. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--dark);
  line-height: 1.6;
  font-size: 16px;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
input, select, textarea { font-family: var(--font-body); }

/* =============================================
   TYPOGRAPHY
   ============================================= */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
}
h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }

.label {
  /* Suit la même logique que .btn : un surtitre en capitales espacées a besoin
     d'un plancher lisible, et gagne à respirer sur les grands écrans. */
  font-size: clamp(0.7875rem, 0.73rem + 0.18vw, 0.92rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  font-family: var(--font-body);
}

/* =============================================
   LAYOUT
   ============================================= */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
}
/* Très grands écrans (24-27 pouces) : à 1200 px de large, le site n'occupait
   que la moitié d'un écran 2560 et les vignettes du portfolio restaient
   minuscules au milieu du vide. On élargit modérément — pas jusqu'au bord,
   sinon les lignes de texte deviennent illisibles (au-delà de ~90 caractères,
   l'œil perd le début de la ligne suivante). */
@media (min-width: 1800px) {
  :root { --max-w: 1400px; }
}
.section { padding: 6rem 0; }
.section-sm { padding: 4rem 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

/* =============================================
   NAVIGATION
   ============================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(247, 245, 241, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--dark);
}
.nav-logo span { color: var(--accent); }
.nav-links {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}
.nav-links a {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--dark);
  position: relative;
  padding-bottom: 3px;
  transition: color var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width var(--ease);
}
.nav-links a:hover { color: var(--accent); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links .nav-cta {
  background: var(--dark);
  color: var(--bg);
  padding: 0.55rem 1.25rem;
  border-radius: 100px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}
.nav-links .nav-cta::after { display: none; }
.nav-links .nav-cta:hover { background: var(--accent); color: white; }

/* 44 × 44 px minimum : c'est la taille d'un bout de pouce (WCAG 2.5.5, et la
   consigne d'Apple comme de Google). Le burger faisait 34 × 27, on le ratait
   une fois sur trois. Les barres restent visuellement à 22 px de large, c'est
   la zone cliquable qui grandit — d'où `justify-content:center`. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 6px;
  min-width: 44px;
  min-height: 44px;
  margin-right: -6px;   /* compense le padding pour garder l'alignement au bord */
}
.nav-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--dark);
  transition: var(--ease);
  transform-origin: center;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 2rem;
  font-family: var(--font-body);
  /* 0,72 rem = 11,5 px : trop petit pour un libellé en capitales espacées, et
     surtout figé — un bouton faisait la même taille sur un téléphone et sur un
     écran de 27 pouces. Le clamp part de 13 px et suit la largeur de la fenêtre. */
  font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 0.95rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  transition: var(--ease);
  border-radius: var(--radius);
  white-space: nowrap;
}
.btn-primary { background: var(--dark); color: var(--bg); }
.btn-primary:hover { background: var(--accent); }
.btn-outline { border: 1px solid var(--dark); color: var(--dark); }
.btn-outline:hover { background: var(--dark); color: var(--bg); }
.btn-accent { background: var(--accent); color: white; }
.btn-accent:hover { background: var(--accent-hover); }
.btn-ghost { color: var(--dark); padding-left: 0; padding-right: 0; border-bottom: 1px solid transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn svg { width: 14px; height: 14px; }

/* =============================================
   HERO — INDEX
   ============================================= */
.hero {
  height: 100vh;
  min-height: 620px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1A1815 0%, #2D2820 50%, #3A3028 100%);
}
.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0.55;
}
.hero-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1A1815 0%, #2D2820 40%, #3A3028 70%, #2A2218 100%);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(26,24,21,0.72) 0%, rgba(26,24,21,0.25) 55%, transparent 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  padding-top: var(--nav-h);
  color: white;
}
.hero-content .label { color: #C8A878; margin-bottom: 1.5rem; display: block; }
.hero-content h1 {
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  font-weight: 300;
  color: white;
  line-height: 1.0;
  margin-bottom: 1.75rem;
  max-width: 760px;
}
.hero-content h1 em { font-style: italic; color: #C8A878; }
.hero-content p {
  color: rgba(255,255,255,0.72);
  font-size: 1rem;
  max-width: 440px;
  margin-bottom: 2.5rem;
  font-weight: 300;
  line-height: 1.75;
}
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-btns .btn-outline {
  border-color: rgba(255,255,255,0.4);
  color: white;
}
.hero-btns .btn-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: white;
}

.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.55);   /* 0.4 sur fond sombre : sous le seuil de contraste */
  font-size: 0.8125rem;            /* était 0.62rem = 9,9 px, illisible */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  z-index: 2;
}
.hero-scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 50px;
  background: rgba(255,255,255,0.25);
  animation: scrollLine 2s ease infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  49%  { transform: scaleY(1); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* =============================================
   HOME — INTRO
   ============================================= */
.intro { background: var(--surface); }
.intro-text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2.0rem);
  font-weight: 300;
  line-height: 1.55;
  max-width: 820px;
}
.intro-text em { font-style: italic; color: var(--accent); }

/* =============================================
   HOME — FEATURED WORKS
   ============================================= */
/* Masonry en colonnes : chaque photo garde ses proportions, le cadre prend
   la forme de l'image. Aucun recadrage, aucune déformation. */
.featured-grid {
  columns: 2;
  /* Écart calé sur la portée de l'ombre : plus serré, l'ombre d'une photo
     retomberait sur sa voisine au lieu du fond. */
  column-gap: 2.25rem;
}
.featured-item {
  display: block;
  break-inside: avoid;
  margin-bottom: 2.25rem;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--accent-light);
  cursor: pointer;
  box-shadow: var(--shadow-photo);
  transition: box-shadow var(--ease), transform var(--ease);
}
.featured-item:hover {
  box-shadow: var(--shadow-photo-hover);
  transform: translateY(-4px);
}
.featured-item img {
  display: block;
  width: 100%;
  height: auto;
}
/* Faute d'image, les aplats de démonstration ont besoin d'une forme */
.feat-placeholder { aspect-ratio: 4 / 3; }
.featured-item:nth-child(1) .feat-placeholder { background: linear-gradient(145deg, #2D2820, #4A3C2E); aspect-ratio: 3 / 4; }
.featured-item:nth-child(2) .feat-placeholder { background: linear-gradient(145deg, #C4B09C, #A89080); }
.featured-item:nth-child(3) .feat-placeholder { background: linear-gradient(145deg, #8C9E8A, #6E7F6C); }
.featured-item:nth-child(4) .feat-placeholder { background: linear-gradient(145deg, #9C8E7A, #7A6E5C); aspect-ratio: 3 / 4; }
.featured-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,24,21,0.65) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
}
.featured-item:hover .featured-item-overlay { opacity: 1; }
.featured-item-overlay span {
  color: white;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.featured-item img { transition: transform 0.6s ease; }
.featured-item:hover img { transform: scale(1.04); }

/* ---------------------------------------------
   .media-auto — LA classe des photos de l'accueil et d'« À propos »
   ---------------------------------------------
   Une seule classe pour toutes ces photos, quel qu'en soit l'emplacement :
     - bords arrondis, comme partout ailleurs sur le site ;
     - le cadre prend la forme de l'image (ni recadrage, ni déformation) ;
     - la photo suit toujours la largeur de son conteneur, donc elle grandit
       et rétrécit avec le reste de la page.

   ⚠️ Ne PAS laisser une <img> sans ce cadre : la règle globale du reset
      (`img { width:100%; height:100%; object-fit:cover }`) lui ferait remplir
      son conteneur en la recadrant — c'est le comportement à part qu'on veut
      justement éviter ici.

   Les attributs width/height de l'<img> réservent la place avant le
   chargement (pas de saut de mise en page).
   --------------------------------------------- */
.media-auto {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--accent-light);
  line-height: 0;               /* supprime l'interligne sous l'image */
  box-shadow: var(--shadow-photo);
  transition: box-shadow var(--ease), transform var(--ease);
}
/* Un cadre agrandissable au clic se soulève légèrement au survol : c'est ce
   petit déplacement, plus que l'ombre seule, qui donne l'impression que la
   photo est posée SUR la page et non collée dedans. */
.media-auto[data-zoom]:hover {
  box-shadow: var(--shadow-photo-hover);
  transform: translateY(-4px);
}
.media-auto img {
  display: block;
  width: 100%;
  height: auto;                 /* écrase le height:100% du reset */
  object-fit: unset;
}
/* Curseur « loupe » — seulement quand le cadre contient vraiment une image
   (un cadre encore vide garde son comportement d'origine). */
[data-zoom]:has(img) { cursor: zoom-in; }

/* =============================================
   HOME — SERVICES PREVIEW
   ============================================= */
.services { background: var(--accent-light); }
.service-card {
  background: var(--surface);
  padding: 2.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: var(--ease);
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
.service-icon {
  width: 44px; height: 44px;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.service-card h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.service-card p { font-size: 0.88rem; line-height: 1.75; color: var(--muted); }

/* =============================================
   PAGE HEADER (all inner pages)
   ============================================= */
.page-header {
  padding-top: calc(var(--nav-h) + 4rem);
  padding-bottom: 3.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.page-header .label { display: block; margin-bottom: 1rem; }
.page-header h1 { margin-bottom: 1rem; }
.page-header p {
  max-width: 540px;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
}

/* =============================================
   GALLERY (photos.html)
   ============================================= */
.gallery-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.filter-btn {
  padding: 0.45rem 1.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--muted);
  transition: var(--ease);
  font-family: var(--font-body);
  font-weight: 400;
}
.filter-btn:hover, .filter-btn.active {
  background: var(--dark);
  color: white;
  border-color: var(--dark);
}

.gallery-masonry {
  columns: 3;
  column-gap: 0.85rem;
}
/* ---------------------------------------------
   Onglet « Tout » d'un projet à thèmes — MASONRY HORIZONTAL
   ---------------------------------------------
   Même esprit que le masonry habituel, mais tourné d'un quart de tour : on
   remplit LIGNE par ligne au lieu de colonne par colonne. C'est ce qui permet
   de lire les séries dans l'ordre (thème 1, puis thème 2…), ce que `columns`
   ne peut pas faire.

   Chaque ligne est étirée sur toute la largeur et toutes ses photos y prennent
   la même hauteur : les proportions sont conservées, rien n'est recadré, et il
   ne reste aucun trou.

   Mécanique : chaque photo porte son rapport largeur/hauteur dans `--r`
   (posé par galerie.js). `flex-basis` ET `flex-grow` sont proportionnels à
   `--r`, donc à la largeur : les photos d'une même ligne grandissent du même
   facteur et finissent donc à la même hauteur.
   `--h` = hauteur de ligne visée avant étirement ; c'est le seul réglage,
   l'augmenter met moins de photos par ligne.
   --------------------------------------------- */
.gallery-tout {
  --h: 240px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.gallery-tout .gallery-item {
  flex: var(--r) 1 calc(var(--r) * var(--h));
  aspect-ratio: var(--r);
  margin-bottom: 0;                 /* l'écart vient de `gap` */
}
/* Sans ce bouche-trou, la dernière ligne — presque toujours incomplète —
   serait étirée sur toute la largeur et ses photos deviendraient énormes. */
.gallery-tout::after { content: ''; flex-grow: 999999; }
.gallery-tout .gallery-item picture { display: block; width: 100%; height: 100%; }
.gallery-tout .gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item {
  break-inside: avoid;
  margin-bottom: 0.85rem;
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
  cursor: pointer;
  display: block;
}
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
  object-fit: unset;
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,24,21,0.38);
  opacity: 0;
  transition: opacity var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-overlay svg { width: 38px; height: 38px; color: white; }
/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(26,24,21,0.96);
  display: flex;
  /* En colonne : la légende se place SOUS l'image au lieu de flotter par-dessus
     (elle la chevauchait). Le rembourrage laisse la place à la croix et aux flèches. */
  flex-direction: column;
  gap: 1rem;
  padding: 3.5rem 1.5rem;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.lightbox.active { opacity: 1; pointer-events: all; }
.lightbox img {
  max-width: 90vw;
  max-height: calc(100vh - 10rem);   /* rembourrage + écart + légende */
  object-fit: contain;
  border-radius: var(--radius);
  width: auto;
  height: auto;
}
.lightbox-close {
  position: absolute;
  top: 1.25rem; right: 1.5rem;
  color: rgba(255,255,255,0.6);
  font-size: 2.2rem;
  cursor: pointer;
  line-height: 1;
  transition: color var(--ease);
  font-family: var(--font-display);
  font-weight: 300;
}
.lightbox-close:hover { color: white; }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.5);
  font-size: 2rem;
  cursor: pointer;
  padding: 1rem;
  transition: color var(--ease);
  font-family: var(--font-display);
  font-weight: 300;
  user-select: none;
}
.lightbox-nav:hover { color: white; }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

.lb-legende {
  max-width: 80vw;
  flex-shrink: 0;
  text-align: center;
  color: rgba(255,255,255,0.72);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

/* =============================================
   GRILLE DE PROJETS (photos.html + videos.html)
   ============================================= */
.projets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}
.projet-carte {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--ease), box-shadow var(--ease);
}
.projet-carte:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.projet-vignette {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--accent-light);
}
/* Vignette d'une carte de projet : cadrage brut de la miniature, sans zoom.
   Pour un projet de vidéos verticales, la miniature YouTube garde donc son
   fond flouté sur les côtés — choix assumé, il signale au premier coup d'œil
   qu'il s'agit de formats verticaux. Le recadrage 9/16 n'intervient qu'une
   fois DANS le projet (voir .video-thumb--vertical). */
.projet-vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.projet-carte:hover .projet-vignette img { transform: scale(1.05); }
.projet-vignette-vide { width: 100%; height: 100%; background: linear-gradient(145deg,#D4C8B8,#A89080); }
.projet-vignette-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1rem 0.85rem;
  background: linear-gradient(to top, rgba(26,24,21,0.55), transparent);
  color: white;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: right;
}
.projet-infos { padding: 1.35rem 1.5rem 1.6rem; }
.projet-infos .label { display: block; margin-bottom: 0.45rem; }
.projet-infos h3 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.projet-infos p { font-size: 0.82rem; color: var(--muted); }

/* Vue d'un projet */
.projet-retour {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.5rem 0;
  margin-bottom: 2rem;
  transition: color var(--ease);
}
.projet-retour:hover { color: var(--accent); }
.projet-retour span { font-size: 1.3rem; line-height: 0; font-family: var(--font-display); }
/* Texte à gauche, logo du client collé au bord droit de la galerie.
   Le `max-width` reste sur le TEXTE seul : sur l'en-tête entier, il empêcherait
   le logo d'atteindre le bord. */
.projet-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.projet-entete-texte { max-width: 700px; }
.projet-entete h2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); margin: 0.5rem 0 0.6rem; }
.projet-entete p { color: var(--muted); font-size: 0.95rem; }
.projet-logo { flex-shrink: 0; }
/* Le fichier fait 320 px de haut : on peut monter jusqu'à ~104 px sans flou. */
.projet-logo img {
  width: auto;
  height: clamp(64px, 8vw, 104px);
  max-width: 280px;
  object-fit: contain;
}
.projet-intro {
  max-width: 700px;
  margin: -1rem 0 2.5rem;
  color: var(--dark);
  font-size: 0.95rem;
  line-height: 1.9;
}
.projet-intro p + p { margin-top: 0.9rem; }
/* Onglets de thèmes : un cran plus discrets que les filtres de la grille,
   pour rester sous le titre du projet sans lui voler la vedette. */
.projet-themes { margin-bottom: 2rem; }
.projet-themes .filter-btn { font-size: 0.68rem; padding: 0.45rem 1rem; }

.galerie-vide {
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  padding: 4rem 1rem;
  line-height: 2;
}
.galerie-vide span { font-size: 0.82rem; }
.galerie-vide code {
  background: var(--accent-light);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.9em;
}

/* =============================================
   VIDEOS (videos.html)
   ============================================= */
.vid-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(145deg, #1A1815, #2D2820);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vid-placeholder svg { width: 48px; height: 48px; color: var(--accent); }

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
/* ┌── NOMBRE DE VIDÉOS PAR LIGNE ─────────────────────────────────────────┐
   │ Projet de réels / Shorts : les vignettes sont deux fois plus hautes   │
   │ que larges, on en met donc 3 par ligne au lieu de 2 — sinon elles     │
   │ sont loin les unes des autres et la page s'étire.                     │
   │ 👉 Pour changer : le chiffre de repeat() ci-dessous (2, 3, 4…).        │
   │ La classe est posée automatiquement dès qu'une vidéo du projet a      │
   │ vertical: true (voir js/galerie.js).                                  │
   └───────────────────────────────────────────────────────────────────────┘ */
.video-grid--vertical { grid-template-columns: repeat(3, 1fr); }

/* ---------- FILM À LA UNE (haut de videos.html) ----------
   Un seul film, en grand, avant la grille des projets. C'est ce qui distingue
   la page Vidéos de la page Photos : on entre par une image qui bouge, pas par
   une grille. Le film mis en avant est celui marqué `alaune: true` dans
   js/projets-video.js, sinon la première vidéo du projet le plus récent. */
/* Le film à la une prenait toute la largeur du contenu : trop imposant à
   l'ouverture de la page. On le ramène à 85 %, en réduisant le BLOC entier
   (cadre + ligne d'informations) plutôt que le seul cadre — sinon le titre et
   le bouton resteraient alignés sur les bords, en décalage avec la vidéo. */
[data-video-une] {
  max-width: 85%;
  margin-left: auto;
  margin-right: auto;
}
.video-une-cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--accent-light);
  box-shadow: var(--shadow-photo);
}
/* Un réel en pleine largeur serait démesuré : on le ramène à une colonne. */
.video-une-cadre--vertical {
  aspect-ratio: 9 / 16;
  max-width: 420px;
  margin: 0 auto;
}
.video-une-cadre iframe { width: 100%; height: 100%; border: none; }
.video-une-infos {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}
.video-une-infos .label { display: block; margin-bottom: 0.5rem; }
.video-une-infos h3 { font-size: 1.75rem; margin-bottom: 0.35rem; }
.video-une-infos p { font-size: 0.86rem; color: var(--muted); }

/* ┌── GRILLE DES PROJETS VIDÉO ───────────────────────────────────────────┐
   │ 2 par ligne (contre 3 pour les photos) : une vignette vidéo doit être │
   │ assez grande pour qu'on ait envie de cliquer, et ça distingue les     │
   │ deux pages au premier coup d'œil.                                     │
   │ 👉 Pour changer : le chiffre de repeat() ci-dessous.                   │
   │ Le cadre est en 16/9 — le format natif des miniatures YouTube, donc   │
   │ aucun recadrage. (Les photos, elles, restent en 4/3.)                 │
   └───────────────────────────────────────────────────────────────────────┘ */
.projets-grid[data-projets="video"] { grid-template-columns: repeat(2, 1fr); }
.projets-grid[data-projets="video"] .projet-vignette { aspect-ratio: 16 / 9; }
.video-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--ease);
}
.video-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--dark);
}
/* Vidéo verticale (réel, Short) : YouTube ne fournit que du 16:9, avec le
   format vertical au centre et un fond assombri de part et d'autre. Un cadre
   en 9/16 + object-fit:cover ne garde QUE la bande centrale — donc l'image
   utile, sans les côtés. */
.video-thumb--vertical { aspect-ratio: 9/16; }
/* La largeur est désormais donnée par la grille à 3 colonnes ci-dessus : plus
   besoin de brider la carte, elle serait juste décollée de sa voisine. */
.video-thumb iframe { width: 100%; height: 100%; border: none; }

/* Façade : image cliquable qui remplace le lecteur tant que rien n'est lancé */
.video-facade {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  overflow: hidden;
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease, opacity var(--ease); }
.video-facade:hover img { transform: scale(1.04); opacity: 0.75; }
.video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(26,24,21,0.55);
  border: 1px solid rgba(255,255,255,0.5);
  transition: background var(--ease);
}
.video-play::after {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: 16px solid white;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.video-facade:hover .video-play { background: var(--accent); }
.video-thumb .vid-placeholder { font-size: 0.65rem; gap: 0.75rem; }
.video-thumb .vid-placeholder svg { width: 36px; height: 36px; }
.video-info { padding: 1.5rem; }
.video-info .label { font-size: 0.65rem; margin-bottom: 0.5rem; display: block; }
.video-info h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.video-info p { font-size: 0.84rem; color: var(--muted); }
/* =============================================
   ABOUT / INFO (info.html)
   ============================================= */
.about-hero {
  padding-top: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
  overflow: hidden;
}
.about-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 4rem;
  background: var(--surface);
}
.about-hero-text .label { display: block; margin-bottom: 1.5rem; }
.about-hero-text h1 { font-size: clamp(2.5rem, 4.5vw, 4rem); margin-bottom: 1.5rem; }
.about-hero-text h1 em { font-style: italic; color: var(--accent); }
.about-hero-text p { font-size: 1rem; line-height: 1.85; color: var(--muted); max-width: 440px; }

/* Colonne de droite du hero : elle ne fait que centrer une photo `.media-auto`.
   Le rembourrage donne le même air qu'un cadre posé, et la photo garde ses
   proportions comme partout ailleurs. */
.about-hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}
.about-hero-media .media-auto { width: 100%; }

.team-section { background: var(--surface); }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
/* Les photos des bios sont des `.media-auto` : ici on ne règle que l'espace
   qui les sépare du prénom. */
.team-card .media-auto { margin-bottom: 1.5rem; }
.team-card h3 { font-size: 1.6rem; margin-bottom: 0.25rem; }
.team-card .role { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; font-family: var(--font-body); }
.team-card p { font-size: 0.88rem; color: var(--muted); line-height: 1.85; }

/* =============================================
   CONTACT (contact.html)
   ============================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: start;
}
.contact-info-aside h2 { font-size: clamp(2rem, 3.5vw, 2.8rem); margin-bottom: 1rem; }
.contact-info-aside > p { color: var(--muted); line-height: 1.8; margin-bottom: 3rem; font-size: 0.94rem; }

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.contact-icon {
  width: 42px; height: 42px;
  background: var(--accent-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-icon svg { width: 18px; height: 18px; color: var(--accent); }
.contact-detail-text strong {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 0.3rem;
}
.contact-detail-text span { font-size: 0.92rem; }

.social-links { display: flex; gap: 0.6rem; margin-top: 2.5rem; }
.social-link {
  width: 42px; height: 42px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--ease);
}
.social-link:hover { background: var(--dark); color: white; border-color: var(--dark); }
.social-link svg { width: 17px; height: 17px; }

/* Form */
.contact-form-wrap { background: var(--surface); padding: 3rem; border-radius: var(--radius); border: 1px solid var(--border); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 0.55rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  font-weight: 300;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--dark);
  transition: border-color var(--ease), background var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23928F89' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

/* Compteur de caractères (textareas, toutes pages) */
.char-counter {
  font-size: 0.7rem;
  color: var(--muted);
  text-align: right;
  margin-top: 0.3rem;
  letter-spacing: 0.02em;
}
.char-counter.limit { color: #C0392B; }

/* Astérisque champ obligatoire */
.req { color: #C0392B; font-weight: 600; }

.form-success {
  display: none;
  text-align: center;
  padding: 3rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--accent);
}
.form-success svg { width: 48px; height: 48px; margin: 0 auto 1rem; }

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background: var(--dark);
  color: white;
  padding: 5rem 0 2.5rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 2.5rem;
}
.footer-brand .footer-logo {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 300;
  color: white;
  display: block;
  margin-bottom: 1.25rem;
}
.footer-brand .footer-logo span { color: var(--accent); }
.footer-brand p { color: rgba(255,255,255,0.42); font-size: 0.85rem; line-height: 1.75; max-width: 280px; }
.footer-col h4 {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1.4rem;
  font-family: var(--font-body);
  font-weight: 400;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.85rem; }
.footer-col a { color: rgba(255,255,255,0.55); font-size: 0.86rem; transition: color var(--ease); }
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.25);
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom a { color: rgba(255,255,255,0.35); transition: color var(--ease); }
.footer-bottom a:hover { color: var(--accent); }

/* Footer de la carte de visite (autonome, 2 blocs) : bloc e-mails poussé et aligné à droite */
.footer--card .footer-inner { grid-template-columns: 1fr auto; }
.footer--card .footer-col { text-align: right; }

/* =============================================
   SCROLL ANIMATIONS
   ============================================= */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.fade-up.in { opacity: 1; transform: none; }
.fade-up:nth-child(2) { transition-delay: 0.1s; }
.fade-up:nth-child(3) { transition-delay: 0.2s; }
.fade-up:nth-child(4) { transition-delay: 0.3s; }

/* Une galerie compte des dizaines de photos : le décalage en cascade ci-dessus
   n'a pas de sens ici, et un déplacement vertical sur une grille en colonnes se
   voit mal. Fondu seul et court (calé sur les cartes de la page Devis, dont la
   vivacité fait référence) : c'est ce qui reste fluide quand plusieurs images
   se décodent en même temps. */
.gallery-item.fade-up {
  transform: none;
  transition: opacity 0.35s ease;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  /* L'ombre reste, seul le soulèvement disparaît. */
  .media-auto[data-zoom]:hover, .featured-item:hover { transform: none; }
}

/* =============================================
   VALIDATION DE FORMULAIRE (contact + devis)
   Utilisées par js/main.js (page contact) et js/devis.js : le champ fautif est
   souligné en rouge et un encadré explique l'erreur. Ces règles vivent ici,
   et pas dans devis.css, parce que contact.html ne charge pas devis.css.
   ============================================= */
.field-invalid {
  outline: 1.5px solid #C0392B;
  outline-offset: 5px;
  border-radius: var(--radius);
}
.devis-error-msg {
  display: none;
  background: #FBEAE8;
  border: 1px solid #E2B5AE;
  color: #9B3024;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .gallery-masonry { columns: 2; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 768px) {
  :root { --nav-h: 60px; }

  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--surface);
    flex-direction: column;
    padding: 2rem 1.5rem 2.5rem;
    gap: 1.5rem;
    border-bottom: 1px solid var(--border);
    /* Escamotage du panneau fermé : il faut remonter sa PROPRE hauteur, PUIS la
       hauteur de la barre sous laquelle il est ancré (top: var(--nav-h)).
       Un pourcentage seul ne suffit pas : `-110%` ne remonte que 110 % de la
       hauteur du panneau, soit 393 px pour un menu de 357 px — il en restait
       24 px à l'écran, une bande blanche posée sur le logo et sur le bouton
       burger. Le calcul ci-dessous le sort du champ quelle que soit sa hauteur,
       donc quel que soit le nombre d'entrées du menu. */
    transform: translateY(calc(-100% - var(--nav-h)));
    transition: transform 0.4s ease;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    align-items: flex-start;
  }
  .nav-links.open { transform: none; }
  /* Menu déroulé : les liens faisaient 21 px de haut, empilés — impossible à
     viser au pouce sans se tromper de ligne. On leur donne toute la largeur et
     44 px de hauteur utile. Le `gap` du conteneur descend d'autant, sinon le
     menu devient plus haut que l'écran. */
  .nav-links { gap: 0.25rem; }
  .nav-links li { width: 100%; }
  .nav-links a {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    min-height: 44px;
    width: 100%;
  }
  .nav-links .nav-cta { justify-content: center; }
  .nav-toggle { display: flex; }

  .about-hero { grid-template-columns: 1fr; }
  .about-hero-media { padding: 2rem 1.5rem; }
  .about-hero-text { padding: 3rem 1.5rem; }

  /* .grid-3 n'avait AUCUNE règle mobile : ses trois colonnes restaient côte à
     côte sur téléphone et débordaient de l'écran (visible sur la section
     « Comment ça se passe » d'index.html et videos.html). */
  .grid-2, .grid-3, .team-grid { grid-template-columns: 1fr; }
  /* Plus la place de mettre le logo à côté du titre : il repasse au-dessus. */
  .projet-entete { flex-direction: column-reverse; align-items: flex-start; gap: 1.25rem; }
  .gallery-masonry { columns: 1; }
  /* Lignes un peu plus basses : sur un écran étroit, une photo horizontale
     occupe la ligne entière et deux verticales tiennent côte à côte. */
  .gallery-tout { --h: 180px; }
  .video-grid { grid-template-columns: 1fr; }
  /* Un réel reste lisible en petit : on en garde 2 par ligne sur téléphone. */
  .video-grid--vertical { grid-template-columns: repeat(2, 1fr); }
  /* La grille des projets vidéo est forcée à 2 colonnes sur ordinateur :
     il faut donc la ramener explicitement à 1 sur téléphone. */
  .projets-grid[data-projets="video"] { grid-template-columns: 1fr; }
  /* Sur téléphone la largeur est déjà contrainte par le conteneur : les 85 %
     ne feraient que rogner une image déjà petite. */
  [data-video-une] { max-width: none; }
  .video-une-infos { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .video-une-infos h3 { font-size: 1.4rem; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 2rem 1.25rem; }

  .featured-grid { columns: 1; }

  .footer-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer--card .footer-inner { grid-template-columns: 1fr; }
  .footer--card .footer-col { text-align: left; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .section { padding: 4rem 0; }
  .section-sm { padding: 3rem 0; }
  .container { padding: 0 1.25rem; }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn { width: fit-content; }

  /* Téléphone : les trois boutons du hero passent l'un sous l'autre et le bloc
     grandit de 130 px. Sur un écran court (375 × 667, et pire encore une fois
     la barre d'adresse déduite), « Nous écrire » venait alors recouvrir
     l'indicateur « Découvrir » ancré en bas du hero.
     On retire l'indicateur sur mobile : il est purement décoratif (aria-hidden)
     et il n'apprend rien à quelqu'un qui tient un téléphone — on y fait défiler
     la page par réflexe. Pour le remettre, supprimer ces deux lignes. */
  .hero-scroll { display: none; }

  /* La barre de navigation est fixe et flotte AU-DESSUS du hero : sans cette
     réserve, sur un écran court, le titre centré verticalement remonte jusqu'à
     passer dessous. */
  .hero { padding-top: var(--nav-h); }
}

@media (max-width: 480px) {
  .gallery-masonry { columns: 1; }
  .hero-content h1 { font-size: 2.8rem; }
}