/*
Theme Name: Vitrine Artisan
Description: Thème sur mesure, léger, pour un site d'artisan ou de petite entreprise : accueil, réalisations, témoignages et contact, entièrement réglables depuis « Contenu du site ».
Author: Auteur du thème
Version: 2.1.2
Text Domain: vitrineartisan
*/

/* ==========================================================================
   Police Rubik (SIL Open Font License) - hébergée dans le thème, aucun appel
   à Google Fonts (RGPD). Police variable : graisses 300 à 900 dans un seul
   fichier, réduite au latin (français inclus).
   ========================================================================== */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('assets/fonts/rubik-latin.woff') format('woff');
}
@font-face {
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('assets/fonts/rubik-italic-latin.woff') format('woff');
}

/* ==========================================================================
   Variables & reset
   ========================================================================== */
:root {
  --charcoal: #252525;
  --charcoal-soft: #333333;
  --cream: #f0f0f0;
  --white: #ffffff;
  --border: #e2e2e2;
  --text: #333333;
  --text-light: #6b6b6b;
  --max-width: 1320px; /* +140px : le site prend plus de place à l'écran */
  --radius: 3px;
  --ink: #111111;
  /* Typo de l'ancien site : Rubik (voir @font-face en haut du fichier).
     Repli : polices système proches. */
  --font: 'Rubik', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink); }
/* Liens dans les textes : soulignés (plus de couleur d'accent pour les repérer) */
.page-content a, .realisation-desc a { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 400;
  color: var(--charcoal);
  margin: 0 0 0.6em;
  line-height: 1.25;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.3rem; }
h4 {
  font-family: var(--font);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--ink);
  font-weight: 700;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.container--wide {
  max-width: 1840px; /* +140px */
  padding-left: clamp(24px, 8.4vw, 144px);
  padding-right: clamp(24px, 8.4vw, 144px);
}

/* Carrousel 3D des réalisations : mêmes largeur et marges que le container
   « classique » de la page réalisations (.container--portfolio, filtres et
   mosaïque), pour que les flèches restent dans ces marges plutôt que de
   déborder sur toute la largeur de l'écran. */
.container--carousel-depth {
  max-width: 1840px; /* +140px, identique à .container--portfolio */
  padding-left: clamp(24px, 9.35vw, 180px);
  padding-right: clamp(24px, 8.8vw, 170px);
}

.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.section--alt { background: var(--cream); }

ul { padding-left: 1.1em; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Accueil : menu seul (liens à droite) ; le logo est dans le bandeau dessous */
.site-header--nav-only .site-header__inner {
  justify-content: flex-end;
  max-width: none;
  padding: 6px clamp(24px, 5.17vw, 88px);
}

/* Bandeau sous le menu (logo + titre de page), sur toutes les pages du
   site : espacements harmonisés (45px 0 48px partout, plutôt qu'une valeur
   différente par page) — le 48px du bas correspond à l'ancienne hauteur du
   fil d'ariane de la page Contact, valeur restée comme référence commune.
   Les pages qui ont leurs propres marges (.page-title-band--inner,
   --single, --contact) n'ont donc plus besoin de redéfinir le padding. */
.page-title-band { background: var(--white); padding: 45px 0 48px; }
.page-title-band__inner {
  display: flex;
  align-items: center;
  gap: clamp(24px, 8.6vw, 146px);
}
.page-title-band__logo { margin-left: clamp(0px, 1.6vw, 27px); flex: 0 0 auto; }
.page-title-band__logo img { width: 96px; height: 96px; border-radius: 50%; }
.page-title-band__title {
  margin: 0;
  /* même taille que les titres « Nos réalisations » et « Contact » */
  font-size: clamp(2.2rem, 4.1vw, 4.5rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
}
/* Suffixe « : <catégorie sélectionnée> » du titre Réalisations (page principale
   mise à jour en JS au clic sur un onglet, page de catégorie posé une fois au
   chargement) : même graisse et même couleur que le reste du titre — vide (rien
   affiché) quand on est sur "Toutes". */
.page-title-band__filter { color: var(--ink); font-weight: 400; }
@media (max-width: 780px) {
  .page-title-band { padding: 32px 0 48px; }
  .page-title-band__logo img { width: 52px; height: 52px; }
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: clamp(28px, 4.2vw, 72px);
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.main-nav a:hover,
.main-nav a.is-active {
  border-color: var(--ink);
  color: var(--ink);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--charcoal);
  margin: 5px 0;
}

@media (max-width: 780px) {
  .menu-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    display: none;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav a { display: block; padding: 14px 24px; border-bottom: 1px solid var(--border); }
  .main-nav a.is-active {
    border-color: var(--border);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding: 140px 0 90px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,16,12,0.15), rgba(20,16,12,0.6));
}
.hero .container { position: relative; z-index: 1; }

/* Hero plein écran de la page d'accueil : occupe toute la fenêtre à
   l'arrivée ; le menu (sticky) est juste en dessous, hors écran, puis
   remonte et se fixe en haut quand on défile. */
.hero--fullscreen {
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero--fullscreen::before {
  background: linear-gradient(180deg, rgba(20,16,12,0.10), rgba(20,16,12,0.35));
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 5vw, 88px);
}
.hero__logo { flex: 0 0 auto; }
.hero__logo img {
  width: clamp(150px, 20vw, 290px);
  height: auto;
  border-radius: 50%;
}
.hero--fullscreen .hero__title {
  color: var(--white);
  margin: 0;
  max-width: 800px;
  font-size: clamp(2rem, 4vw, 4.25rem);
  line-height: 1.2;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}

/* Petite souris qui invite à défiler vers le bas */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 9vh, 90px);
  transform: translateX(-50%);
  z-index: 2;
  display: block;
  padding: 10px;
}
.hero__scroll-mouse {
  position: relative;
  display: block;
  width: 34px;
  height: 54px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.hero__scroll-wheel {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--charcoal);
  animation: hero-wheel 1.8s ease-in-out infinite;
}
@keyframes hero-wheel {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-wheel { animation: none; }
}

@media (max-width: 780px) {
  .hero__inner {
    flex-direction: column;
    text-align: center;
    gap: 28px;
  }
  .hero--fullscreen .hero__title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
}

/* Barre d'administration WordPress : le menu fixe se cale dessous */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* Section Notre savoir-faire : texte + carrousel de catégories */
.section--savoir-faire { padding: 0 0 72px; }
.savoir-faire-layout {
  --sf-radius: clamp(64px, 6.2vw, 104px);
  display: grid;
  grid-template-columns: minmax(0, 2.26fr) minmax(0, 1fr);
  grid-template-areas:
    "text media"
    "cta  cta";
  grid-template-rows: auto 1fr;
  column-gap: 28px;
  row-gap: 40px;
  align-items: start;
  min-height: calc(100vh - 340px);  /* la section couvre presque tout l'écran (hero exclu) */
  min-height: calc(100svh - 340px);
}
.savoir-faire-text {
  grid-area: text;
  border-top: 1px solid #e2e2e2;
  padding-top: 22px;
}
.savoir-faire-text h4 { margin: 0 0 26px; }
.savoir-faire-text h2 {
  font-weight: 700;
  font-size: clamp(1.35rem, 1.7vw, 1.75rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 24px;
}
.savoir-faire-text p {
  font-size: clamp(1rem, 1.06vw, 1.125rem);
  line-height: 1.85;
  color: var(--ink);
  margin: 0 0 20px;
}
.savoir-faire-cta { grid-area: cta; justify-self: end; align-self: end; }
@media (max-width: 900px) {
  .savoir-faire-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "media" "cta";
    grid-template-rows: auto;
    min-height: 0;
  }
  .savoir-faire-cta { justify-self: start; }
}
.savoir-faire-carousel {
  grid-area: media;
  margin-top: 19px;
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 0 var(--sf-radius) 0 0;   /* seul le coin supérieur droit est arrondi */
  background: var(--cream);
}
.savoir-faire-carousel__frame { position: relative; width: 100%; height: 100%; }
.savoir-faire-carousel__slide {
  display: block;
  cursor: pointer;
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.savoir-faire-carousel__slide.is-active { opacity: 1; pointer-events: auto; }
.savoir-faire-carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.savoir-faire-carousel__label {
  position: absolute; left: 16px; bottom: 16px;
  background: rgba(37,37,37,0.75);
  color: var(--white);
  font-size: 0.85rem;
  padding: 5px 12px;
  border-radius: var(--radius);
}
.savoir-faire-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.85);
  color: var(--charcoal);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.savoir-faire-carousel__nav--prev { left: 12px; }
.savoir-faire-carousel__nav--next { right: 12px; }
.savoir-faire-carousel__nav:hover { background: var(--white); }

/* Section Nos valeurs : deux grandes images côte à côte + texte à droite */
.section--valeurs { padding: 95px 0; }
.valeurs-layout {
  --val-h: clamp(420px, calc(100vh - 320px), 700px);  /* section quasi plein écran */
  --val-h: clamp(420px, calc(100svh - 320px), 700px);
  display: grid;
  grid-template-columns: minmax(0, 49.5%) minmax(0, 33.9%);
  justify-content: space-between;
  align-items: start;
}
.valeurs-images { display: flex; gap: 10px; height: var(--val-h); }
.valeurs-images img {
  height: 100%;
  min-width: 0;
  object-fit: cover;
  border-radius: 0;
}
.valeurs-images img:first-child { flex: 236 1 0; }
.valeurs-images img:last-child {
  flex: 462 1 0;
  border-bottom-right-radius: clamp(60px, 6.7vw, 115px);  /* coin inférieur droit arrondi */
}
.valeurs-text h4 { margin: 8px 0 34px; }
.valeurs-text h2 {
  font-weight: 700;
  font-size: clamp(1.35rem, 1.55vw, 1.65rem);
  color: var(--ink);
  margin: 0 0 22px;
}
.valeurs-text ul { list-style: none; padding: 0; margin: 0 0 64px; }
.valeurs-text ul:last-child { margin-bottom: 0; }
.valeurs-text li {
  font-size: clamp(1rem, 1.06vw, 1.125rem);
  line-height: 1.85;
  color: var(--ink);
  margin: 0 0 20px;
}
@media (max-width: 900px) {
  .section--valeurs { padding: 56px 0; }
  .valeurs-layout {
    --val-h: 340px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
  .valeurs-images img:last-child { border-bottom-right-radius: 64px; }
}

/* Section Notre histoire : texte à gauche, grande image à droite avec
   le coin inférieur gauche arrondi (même hauteur que « Nos valeurs ») */
.section--histoire { padding: 95px 0; }
.histoire-layout {
  --val-h: clamp(420px, calc(100vh - 320px), 700px);
  --val-h: clamp(420px, calc(100svh - 320px), 700px);
  padding-right: clamp(24px, 13.9vw, 236px);  /* l'image s'arrête avant le bord droit, comme avant */
  display: grid;
  grid-template-columns: minmax(0, 64.3%) minmax(0, 32%);
  justify-content: space-between;
  align-items: start;
}
.histoire-text {
  border-top: 1px solid #e2e2e2;
  padding-top: 22px;
}
.histoire-text h4 { margin: 0 0 26px; }
.histoire-text h2 {
  font-weight: 700;
  font-size: clamp(1.35rem, 1.7vw, 1.75rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 clamp(36px, 4.2vw, 72px);
}
.histoire-text p {
  font-size: clamp(1rem, 1.075vw, 1.14rem);
  line-height: 1.85;
  color: var(--ink);
  margin: 0 0 20px;
}
.histoire-media { height: var(--val-h); }
.histoire-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 0 0 clamp(64px, 7vw, 120px);  /* seul le coin inférieur gauche est arrondi (comme sur l'ancien site) */
}
@media (max-width: 900px) {
  .section--histoire { padding: 56px 0; }
  .histoire-layout {
    --val-h: 380px;
    padding-right: clamp(24px, 8.4vw, 144px);
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
  .histoire-media img { border-bottom-left-radius: 64px; }
}

/* Sections de la page d'accueil : chacune fait à peu près la hauteur de la
   fenêtre (sous le menu collé), contenu centré verticalement. */
body.home main > .section:not(.section--tight):not(.section--savoir-faire):not(.section--text) {
  min-height: clamp(560px, calc(100vh - 90px), 980px);
  min-height: clamp(560px, calc(100svh - 90px), 980px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.home main > .section:not(.section--tight) > .container { width: 100%; }
@media (max-width: 900px) {
  body.home main > .section:not(.section--tight):not(.section--savoir-faire):not(.section--text) { min-height: 0; }
}

/* Section Nos dernières réalisations : 4 vignettes carrées, catégorie en
   gras au-dessus, titre de la réalisation en dessous, bouton en bas à droite */
.section--dernieres { padding: 95px 0; }
.section--dernieres h4 { margin: 0 0 clamp(36px, 3.2vw, 56px); }
.dernieres-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(20px, 3.2vw, 54px);
  padding: 0 clamp(0px, 1.6vw, 27px);   /* les vignettes sont légèrement en retrait du petit titre */
}
.dernieres-item {
  display: flex;
  flex-direction: column;
  color: var(--ink);
}
.dernieres-item:hover { color: var(--ink); }
.dernieres-item__cat {
  font-weight: 700;
  font-size: clamp(1.25rem, 1.55vw, 1.65rem);
  line-height: 1.2;
  margin: 0 0 20px;
  min-height: 1.2em;
}
.dernieres-item__img {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #e2e2e2;
}
.dernieres-item__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.dernieres-item:hover .dernieres-item__img img { transform: scale(1.04); }
.dernieres-item__title {
  margin-top: 8px;
  text-align: center;
  font-size: clamp(1rem, 1.06vw, 1.125rem);
  line-height: 1.5;
}
.dernieres-cta {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(32px, 2.8vw, 46px);
  padding: 0 clamp(0px, 1.6vw, 27px);
}
@media (max-width: 900px) {
  .section--dernieres { padding: 56px 0; }
  .dernieres-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; padding: 0; }
  .dernieres-cta { padding: 0; justify-content: flex-start; }
}

/* Section Témoignages : carrousel (un témoignage à la fois, points de
   navigation) à gauche, image « Chat noir » à droite avec le coin
   inférieur gauche arrondi */
.section--temoignages { padding: 95px 0; }
.temoignages-layout {
  padding-right: clamp(24px, 13.9vw, 236px);  /* même largeur de contenu que « Notre histoire » */
  display: grid;
  grid-template-columns: minmax(0, 64.3%) minmax(0, 32%);
  justify-content: space-between;
  align-items: start;
}
.temoignages-text {
  border-top: 1px solid #e2e2e2;
  padding-top: 22px;
}
.temoignages-text h4 { margin: 0 0 clamp(28px, 2.5vw, 42px); }
.temoignages-media img {
  width: 100%;
  aspect-ratio: 434 / 350;
  object-fit: cover;
  border-radius: 0 0 0 clamp(64px, 7vw, 120px);
}

.temoignages-carousel { position: relative; }
.temoignages-carousel__slides { display: grid; }       /* tous les témoignages superposés : la hauteur = le plus long */
.temoignage {
  grid-area: 1 / 1;
  margin: 0;
  padding-left: clamp(0px, 1.6vw, 27px);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.temoignage.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.temoignage__text { margin: 0; color: var(--ink); }
.temoignage__text p {
  margin: 0 0 0.7em;
  font-style: italic;
  font-size: clamp(1.05rem, 1.12vw, 1.2rem);
  line-height: 1.45;
  color: var(--ink);
}
.temoignage__author {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 34px 0 0 calc(clamp(0px, 1.6vw, 27px) * -1);  /* l'icône s'aligne avec le petit titre */
}
.temoignage__avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 40px;
}
.temoignage__avatar img {
  height: 40px;
  width: auto;
  max-width: 88px;
  object-fit: contain;
}
.temoignage__icon { width: 30px; height: 40px; fill: var(--ink); }
.temoignage__name {
  font-style: normal;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

.temoignages-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 40px;
}
.temoignages-carousel__dots { display: flex; align-items: center; gap: 9px; }
.temoignages-carousel__dot {
  position: relative;
  width: 13px; height: 13px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.temoignages-carousel__dot::after { content: ""; position: absolute; inset: -8px; }  /* zone de clic plus grande */
.temoignages-carousel__dot.is-active { background: var(--ink); }
.temoignages-carousel__arrow {
  border: 0;
  background: none;
  padding: 0 6px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.temoignages-carousel__arrow:hover { opacity: 1; }
.temoignages-carousel__dot:focus-visible,
.temoignages-carousel__arrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 900px) {
  .section--temoignages { padding: 56px 0; }
  .temoignages-layout {
    padding-right: clamp(24px, 8.4vw, 144px);
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .temoignages-media { order: 2; }
  .temoignages-media img { border-bottom-left-radius: 64px; }
  .temoignage__name { font-size: 0.95rem; letter-spacing: 0.15em; }
}

.btn {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid var(--charcoal);
  color: var(--charcoal);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  border-radius: var(--radius);
  transition: all 0.2s ease;
}
.btn:hover { background: var(--charcoal); color: var(--white); }
/* Bouton plein : blanc sur noir, noir sur blanc au survol (style de l'ancien site) */
.btn--solid {
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 20px;
}
.btn--solid:hover { background: var(--white); color: var(--ink); }

/* ==========================================================================
   Page Réalisations (portfolio) : bandeau logo + grand titre, onglets de
   catégories entre deux fines lignes, mosaïque (masonry) de 3 colonnes
   ========================================================================== */
.container--portfolio {
  max-width: 1840px; /* +140px */
  padding-left: clamp(24px, 9.35vw, 180px);
  padding-right: clamp(24px, 8.8vw, 170px);
}
.page-title-band--inner .page-title-band__logo { margin-left: clamp(0px, 0.4vw, 7px); }

.section--portfolio { padding: 0 0 110px; }

.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0 30px;
  list-style: none;
  padding: 0;
  margin: 0 0 56px;
  border-top: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
}
.portfolio-filters li { margin: 0; }
.portfolio-filters a {
  display: block;
  margin-top: -1px;                     /* la barre de l'onglet actif recouvre la fine ligne du haut */
  padding: 4px 0 2px;
  border-top: 3px solid transparent;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
}
.portfolio-filters a:hover { color: var(--ink); border-top-color: #bdbdbd; }
.portfolio-filters a.is-active { color: var(--ink); border-top-color: var(--ink); }

/* Même filtre, en menu déroulant : affiché uniquement sur mobile (voir plus
   bas), à la place de la liste d'onglets qui devient vite illisible/peu
   tactile sur petit écran dès qu'il y a plusieurs catégories. */
.portfolio-filters-mobile {
  display: none;
  width: 100%; margin: 0 0 40px; padding: 12px 40px 12px 16px;
  border: 1px solid #dcdcdc; border-radius: 2px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23111111' stroke-width='1.6'><path d='M5 8l5 5 5-5'/></svg>") no-repeat right 14px center;
  background-size: 13px auto;
  -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 1rem; color: var(--ink);
}
.portfolio-filters-mobile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Même seuil que partout ailleurs dans le thème (mosaïque, carrousel,
   diaporama…) : mobile = 900 px et moins. */
@media (max-width: 900px) {
  .portfolio-filters { display: none; }
  .portfolio-filters-mobile { display: block; }
}

/* Mosaïque : sans JavaScript, colonnes CSS ; avec JavaScript (classe
   .is-masonry), les vignettes sont positionnées dans la colonne la plus courte. */
.portfolio-grid { column-count: 3; column-gap: 4px; }
/* position: relative sert d'ancrage à .is-target-flash::after ci-dessous
   (repris tel quel par la règle .is-masonry qui suit, plus spécifique, en
   position: absolute pour la mise en page masonry elle-même). */
.portfolio-grid__item { position: relative; break-inside: avoid; margin: 0 0 5px; }
.portfolio-grid.is-masonry { display: block; position: relative; column-count: auto; }
.portfolio-grid.is-masonry .portfolio-grid__item {
  position: absolute;
  margin: 0;
  transition: opacity 0.25s ease;
}
.portfolio-grid__item.is-hidden { display: none; }
/* Vignette ciblée par un lien ?realisation=slug (ex. depuis « Dernières
   réalisations » de l'accueil) : bref contour pour la repérer après le
   défilement automatique jusqu'à elle (voir realisations-mosaic.js). */
.portfolio-grid__item.is-target-flash::after {
  content: '';
  position: absolute; inset: 0;
  outline: 3px solid var(--ink);
  outline-offset: -3px;
  animation: v_artisan-target-flash 1.6s ease-out;
  pointer-events: none;
}
@keyframes v_artisan-target-flash {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-grid__item.is-target-flash::after { animation: none; opacity: 1; }
}
@media (max-width: 900px) { .portfolio-grid { column-count: 2; } }
@media (max-width: 520px) { .portfolio-grid { column-count: 1; } }
.portfolio-grid__item a { position: relative; display: block; overflow: hidden; }
.portfolio-grid__item img { display: block; width: 100%; height: auto; }

/* Pastille « N photos » : posée sur une vignette (mosaïque ou carrousel 3D),
   purement informative — c'est la vignette entière qui ouvre le diaporama. */
.v_artisan-gallery-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 9px 5px 7px; border-radius: 999px;
  background: rgba(17, 17, 17, 0.62); color: #fff;
  font-size: 0.78rem; font-weight: 500; line-height: 1;
}
.v_artisan-gallery-badge svg { width: 14px; height: 14px; flex: none; }

/* Titre + texte d'une réalisation au survol de sa vignette (mosaïque et
   carrousel 3D, y compris ses vignettes non centrales) : vignette épurée
   (juste la photo) au repos, voile + texte révélés au survol/focus. Un seul
   style pour les deux présentations (voir v_artisan_vignette_hover() dans
   inc/site-content.php). */
.v_artisan-vignette-hover {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 36px 16px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.7));
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.portfolio-grid__item a:hover .v_artisan-vignette-hover,
.portfolio-grid__item a:focus-visible .v_artisan-vignette-hover,
.v_artisan-depth-carousel__slide:hover .v_artisan-vignette-hover,
.v_artisan-depth-carousel__slide:focus-visible .v_artisan-vignette-hover { opacity: 1; }
.v_artisan-vignette-hover__title { color: #fff; font-size: 1rem; font-weight: 500; }
.v_artisan-vignette-hover__text {
  color: rgba(255, 255, 255, 0.86); font-size: 0.86rem; font-weight: 300; line-height: 1.35;
  /* Coupe proprement au bout de 3 lignes plutôt que déborder si le texte est long. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (hover: none) {
  /* Pas de survol tactile : afficher le titre seul en permanence plutôt que
     rendre le texte totalement inaccessible sur mobile/tablette. */
  .v_artisan-vignette-hover { opacity: 1; padding: 22px 14px 10px; }
  .v_artisan-vignette-hover__text { display: none; }
}

/* ==========================================================================
   Carrousel 3D des réalisations (alternative à la mosaïque, avec les mêmes
   onglets de catégories) : sans JavaScript, une simple bande défilante ;
   avec JavaScript (classe .is-depth3d), un carrousel en profondeur — une
   vignette centrale, les autres réduites et inclinées de part et d'autre.
   ========================================================================== */
.v_artisan-depth-carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; /* le trio flèche-scène-flèche se centre en bloc,
    pour que les flèches restent proches du carrousel (voir flex:none plus
    bas sur .is-depth3d .scene, qui ne doit plus s'étirer sur toute la ligne) */
  gap: 4px;
  padding: 8px 0 28px;
}
.v_artisan-depth-carousel__arrow {
  display: none;                        /* révélé par JS une fois initialisé */
  position: relative; z-index: 20;      /* toujours au-dessus des vignettes inclinées (z-index ≤ 10) */
  border: none; background: transparent; color: var(--text-light);
  cursor: pointer; padding: 10px; flex: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.v_artisan-depth-carousel.is-ready .v_artisan-depth-carousel__arrow { display: flex; }
.v_artisan-depth-carousel__arrow:hover, .v_artisan-depth-carousel__arrow:focus-visible { color: var(--ink); }
.v_artisan-depth-carousel__arrow svg { width: 20px; height: auto; display: block; }
.v_artisan-depth-carousel__arrow--prev:hover { transform: translateX(-3px); }
.v_artisan-depth-carousel__arrow--next:hover { transform: translateX(3px); }

.v_artisan-depth-carousel__scene {
  position: relative;
  flex: 1; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.v_artisan-depth-carousel__track { display: flex; gap: 14px; padding: 4px 2px; }

/* Le carrousel reste caché (place déjà réservée) tant que le JavaScript n'a
   pas fini de le positionner : évite l'effet « bizarre » d'un court instant
   en bande plate qui s'anime ensuite d'un coup vers la présentation en
   profondeur. Un petit indicateur de chargement s'affiche à la place. */
.v_artisan-depth-carousel:not(.is-ready) .v_artisan-depth-carousel__track { visibility: hidden; }
/* La bande à plat (secours sans JavaScript) défile horizontalement
   (overflow-x: auto juste au-dessus) : tant que le carrousel n'est pas prêt,
   ce défilement doit rester désactivé, sinon son ascenseur/curseur horizontal
   reste visible en bas, même avec le contenu caché. */
.v_artisan-depth-carousel:not(.is-ready) .v_artisan-depth-carousel__scene { overflow: hidden; }
.v_artisan-depth-carousel__loader {
  display: none;
  position: absolute; inset: 0; z-index: 1;
  align-items: center; justify-content: center;
}
.v_artisan-depth-carousel:not(.is-ready) .v_artisan-depth-carousel__loader { display: flex; }
.v_artisan-depth-carousel__spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid rgba(17, 17, 17, 0.12);
  border-top-color: var(--ink);
  animation: v_artisan-depth-carousel-spin 0.8s linear infinite;
}
@keyframes v_artisan-depth-carousel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .v_artisan-depth-carousel__spinner { animation: none; }
}
.v_artisan-depth-carousel__slide {
  position: relative; flex: none; width: min(72vw, 300px);
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px;
  display: block; color: #fff;
}
.v_artisan-depth-carousel__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* !important nécessaire : la version 3D (.is-depth3d, plus bas) a une règle
   plus spécifique qui pose `display: flex` sur les vignettes non centrales
   (:not(.is-current)) — sans le !important ici, cette règle l'emportait sur
   .is-hidden malgré l'ordre dans la feuille de style, et une vignette
   filtrée (catégorie retirée) restait affichée, figée à sa dernière
   position/opacité au lieu de disparaître : c'était la vraie cause des
   vignettes « qui s'accumulent » en arrière-plan après un changement de
   catégorie. */
.v_artisan-depth-carousel__slide.is-hidden { display: none !important; }
.v_artisan-depth-carousel__empty { padding: 24px 0; color: var(--text-light); }

/* Version enrichie par JavaScript */
.v_artisan-depth-carousel.is-depth3d {
  /* Les flèches sont repoussées dans les marges du container (même largeur
     que .container--portfolio, voir plus haut) par justify-content ci-
     dessous ; la scène (vignettes) remplit tout l'espace entre elles. Le gap
     n'est qu'un minimum de sécurité si l'espace venait à manquer. */
  gap: 12px;
  justify-content: space-between;
}
.v_artisan-depth-carousel.is-depth3d .v_artisan-depth-carousel__scene {
  overflow: visible;
  perspective: 1700px;
  display: flex; justify-content: center;
  flex: 1; min-width: 0; /* remplit l'espace laissé par les flèches, repoussées
    aux extrémités du container par justify-content: space-between ci-dessus */
}
.v_artisan-depth-carousel.is-depth3d .v_artisan-depth-carousel__track {
  position: relative; display: block;
  width: 100%; /* toute la largeur laissée par les flèches dans le container */
  /* Plafond en hauteur de fenêtre (62vh) : utile dans le diaporama plein
     écran, où le carrousel doit tenir entre le texte et le bas de l'écran
     même sur un écran bas (mobile en paysage). Plafond en largeur (46vw) :
     évite un carrousel démesurément haut sur un très grand écran. */
  height: min(46vw, 62vh, 640px);
  transform-style: preserve-3d;
}
.v_artisan-depth-carousel.is-depth3d .v_artisan-depth-carousel__slide {
  /* Hauteur fixe (celle du carrousel) ; largeur automatique, selon les
     proportions propres à chaque photo (pas de recadrage). La vignette
     centrale est en plus plafonnée à 85 % de la largeur disponible (les
     15 % restants pour les flèches) — en pixels, posé en JavaScript
     (place(), realisations-mosaic.js) plutôt qu'en max-width CSS en % :
     un max-width en % ici (sur la vignette ou sur l'image) perturbe le
     calcul de la largeur "auto" du navigateur (résultat non fiable,
     vérifié) — le pixel évite le problème. Au-delà de 85 % (photo très
     panoramique), la largeur devient la contrainte et la hauteur affichée
     descend sous 100 % (object-fit: contain sur l'image ci-dessous, qui
     laisse alors un léger espace au-dessus/en dessous plutôt que de
     déborder ou se déformer). */
  position: absolute; top: 50%; left: 50%; width: auto; height: 100%; aspect-ratio: auto;
  overflow: visible; /* le titre (en dessous, voir .caption plus bas) ne doit pas être rogné */
  box-shadow: 0 26px 60px -22px rgba(17, 17, 17, 0.4);
  transition: transform 0.65s cubic-bezier(0.16, 0.84, 0.44, 1), opacity 0.65s ease, filter 0.65s ease;
  cursor: pointer;
}
.v_artisan-depth-carousel.is-depth3d .v_artisan-depth-carousel__slide img {
  width: auto; height: 100%; max-width: none; object-fit: contain;
}
/* Vignettes voisines (pas la centrale) : largeur plafonnée plus bas encore
   (45 %, contre 85 % pour la centrale ci-dessus) et rognée (overflow:
   hidden) plutôt que réduite en hauteur — elles sont déjà inclinées et
   réduites par la 3D, pas besoin d'y préserver le cadrage complet comme
   pour la centrale. % de la largeur du track (plutôt qu'une valeur fixe en px) : la vignette
   voisine remplit une bonne partie de l'espace disponible — au lieu de
   rester petite au milieu d'un grand vide — tout en gardant une marge sûre
   avec les flèches à n'importe quelle taille de container, puisque les deux
   grandissent ensemble. Vérifié jusqu'à la photo la plus large du site
   (1024×640) sans jamais passer sous les flèches, à 1024, 1440 et 1920px. */
.v_artisan-depth-carousel.is-depth3d .v_artisan-depth-carousel__slide:not(.is-current) {
  max-width: 45%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.v_artisan-depth-carousel.is-depth3d .v_artisan-depth-carousel__slide.is-current { cursor: default; }
/* ... sauf sur la page réalisations, où la vignette centrale (un vrai lien
   <a>, contrairement au carrousel interne du diaporama qui n'utilise que des
   <div>) ouvre le diaporama au clic : la main indique que c'est cliquable. */
.v_artisan-depth-carousel.is-depth3d a.v_artisan-depth-carousel__slide.is-current { cursor: pointer; }
/* Vignettes non centrales : un voile blanc (plutôt qu'un gris terne) les
   estompe fortement, en plus du léger flou déjà posé via `filter` — degré
   posé en JavaScript (variable --v_artisan-fade, 0 = invisible/pas de voile). */
.v_artisan-depth-carousel.is-depth3d .v_artisan-depth-carousel__slide::after {
  content: '';
  position: absolute; inset: 0;
  background: #fff;
  opacity: var(--v_artisan-fade, 0);
  pointer-events: none;
  transition: opacity 0.65s ease;
}

@media (max-width: 900px) {
  .v_artisan-depth-carousel.is-depth3d .v_artisan-depth-carousel__track { width: min(76vw, 560px); height: min(76vw, 460px); }
}
@media (max-width: 520px) {
  .v_artisan-depth-carousel { padding-bottom: 20px; }
  .v_artisan-depth-carousel__arrow { padding: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .v_artisan-depth-carousel__slide,
  .v_artisan-depth-carousel__slide::after { transition: none !important; }
}

/* Type de section « Mosaïque des réalisations » unique : l'affichage mobile
   et l'affichage grand écran se choisissent indépendamment (mosaïque ou
   carrousel 3D). Quand les deux réglages diffèrent, la mosaïque et le
   carrousel sont tous les deux présents dans la page ; ces règles masquent
   celui qui ne correspond pas à la largeur d'écran ET au réglage choisi. */
@media (max-width: 900px) {
  .v_artisan-mosaic--mobile-masonry .v_artisan-mosaic-block--carousel { display: none; }
  .v_artisan-mosaic--mobile-carousel .v_artisan-mosaic-block--masonry { display: none; }
}
@media (min-width: 901px) {
  .v_artisan-mosaic--desktop-masonry .v_artisan-mosaic-block--carousel { display: none; }
  .v_artisan-mosaic--desktop-carousel .v_artisan-mosaic-block--masonry { display: none; }
}

/* ==========================================================================
   Diaporama plein écran d'une réalisation (déclenché au clic sur une
   vignette, mosaïque ou carrousel 3D, sans quitter la page) : deux
   présentations selon la largeur d'écran — voir le commentaire plus bas.
   Construit par JavaScript, voir assets/js/realisations-mosaic.js.
   ========================================================================== */
.v_artisan-photo-viewer {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  background: #fff; color: var(--ink); /* remplacé en JS (voir applyViewerBackground())
    par la couleur ou l'image réglée dans « Contenu du site » > Réalisations ;
    ces valeurs ne restent que comme filet de sécurité. */
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.35s ease;
}
/* Fond image (voir applyViewerBackground()) : l'image est posée en JS avec un
   léger voile sombre superposé (dans la même déclaration background-image,
   en dégradé) pour garantir un minimum de lisibilité quel que soit le sujet
   de la photo, sans dépendre du réglage "Texte clair" ci-dessous. */
.v_artisan-photo-viewer.has-bg-image {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
/* Texte clair (case à cocher) : pour un fond sombre (couleur ou image),
   les éléments qui utilisaient jusque-là --ink (texte sombre) passent en
   clair. Ne concerne pas les flèches (toujours blanches avec halo, voir
   plus bas — elles restent lisibles sur n'importe quel fond sans ce
   réglage) ni les vignettes de la bande (déjà claires par défaut, voir
   .v_artisan-photo-viewer__thumb). */
.v_artisan-photo-viewer.has-light-text { color: #f3ede2; }
.v_artisan-photo-viewer.has-light-text .v_artisan-photo-viewer__close {
  background: rgba(255, 255, 255, 0.14); color: #f3ede2;
}
.v_artisan-photo-viewer.has-light-text .v_artisan-photo-viewer__close:hover,
.v_artisan-photo-viewer.has-light-text .v_artisan-photo-viewer__close:focus-visible { background: rgba(255, 255, 255, 0.24); }
.v_artisan-photo-viewer.has-light-text .v_artisan-photo-viewer__caption,
.v_artisan-photo-viewer.has-light-text .v_artisan-depth-carousel__caption { color: #f3ede2; }
.v_artisan-photo-viewer.has-light-text .v_artisan-photo-viewer__text { color: rgba(243, 237, 226, 0.75); }
.v_artisan-photo-viewer.has-light-text .v_artisan-photo-viewer__counter { color: rgba(243, 237, 226, 0.55); }
.v_artisan-photo-viewer.has-light-text .v_artisan-photo-viewer__thumb.is-active { box-shadow: 0 0 0 2px #f3ede2; }
/* visibility (en plus de pointer-events) : son propre carrousel 3D (grand
   écran) réactive pointer-events: auto en style inline sur sa vignette
   courante (voir place() dans v_artisanDepthCarousel) — un enfant peut annuler le
   pointer-events: none hérité de ce conteneur fermé, ce qui laissait cette
   vignette invisible mais toujours cliquable, par-dessus la page, tant que
   le diaporama avait déjà été ouvert une fois puis refermé. visibility ne
   s'annule pas de la même façon (rien ne le repasse à "visible" ailleurs) :
   fermé, tout son contenu est bien exclu des clics, quel que soit son
   pointer-events inline. */
.v_artisan-photo-viewer.is-open { opacity: 1; pointer-events: auto; visibility: visible; }
html.v_artisan-photo-viewer-open, html.v_artisan-photo-viewer-open body { overflow: hidden; }

.v_artisan-photo-viewer__tools { display: flex; justify-content: flex-end; padding: 16px 18px 0; }
.v_artisan-photo-viewer__close {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(17, 17, 17, 0.06); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.v_artisan-photo-viewer__close:hover, .v_artisan-photo-viewer__close:focus-visible { background: rgba(17, 17, 17, 0.12); }
.v_artisan-photo-viewer__close svg { width: 16px; height: 16px; }

/* Deux présentations coexistent dans le HTML ; seule celle qui correspond à
   la largeur d'écran est affichée (comme la mosaïque des réalisations). */
.v_artisan-photo-viewer__mobile,
.v_artisan-photo-viewer__desktop {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
@media (min-width: 901px) { .v_artisan-photo-viewer__mobile { display: none; } }
@media (max-width: 900px) { .v_artisan-photo-viewer__desktop { display: none; } }

.v_artisan-photo-viewer__stage {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px clamp(10px, 4vw, 56px);
}
.v_artisan-photo-viewer__main {
  position: relative; width: min(92vw, 1400px); height: 100%;
  border-radius: 2px; overflow: hidden;
}
.v_artisan-photo-viewer__slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.5s ease;
}
.v_artisan-photo-viewer__slide.is-active { opacity: 1; }
.v_artisan-photo-viewer__slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

/* Flèches (version mobile ci-dessous + carrousel 3D en version grand écran,
   plus bas) : icône blanche cerclée d'une ombre sombre (halo), au lieu
   d'une couleur unique. Une photo a toujours des zones claires et des
   zones sombres : une seule couleur fixe finit par se fondre dedans par
   endroits, alors que le halo reste lisible partout — plus besoin de
   distinguer les deux états de "Texte clair" pour les flèches (qui ne
   change donc plus que le titre, le texte et les vignettes). */
.v_artisan-photo-viewer__arrow {
  border: none; background: transparent; color: #fff;
  cursor: pointer; padding: 10px; flex: none;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
  transition: filter 0.2s ease;
}
.v_artisan-photo-viewer__arrow:hover, .v_artisan-photo-viewer__arrow:focus-visible {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 1)) drop-shadow(0 1px 5px rgba(0, 0, 0, 0.7));
}
/* Taille ×1,5 (18 → 27px) et trait ×3 (1,6 → 4,8 — attribut stroke-width
   d'origine du SVG, surchargé ici en CSS) par rapport à la version d'avant
   les flèches en halo/néon : icône plus visible et plus affirmée, quel que
   soit le style (halo sombre par défaut ou néon en option). */
.v_artisan-photo-viewer__arrow svg { width: 27px; height: auto; display: block; stroke-width: 4.8px; }

.v_artisan-photo-viewer__caption {
  flex: none; text-align: center; color: var(--ink);
  padding: 14px 20px 0; max-width: 720px; margin: 0 auto;
}
.v_artisan-photo-viewer__title { margin: 0; font-size: 1.15rem; font-weight: 600; }
.v_artisan-photo-viewer__text {
  margin: 6px 0 0; font-size: 0.92rem; line-height: 1.5;
  color: var(--text-light);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.v_artisan-photo-viewer__text:empty { display: none; }
.v_artisan-photo-viewer__counter { margin: 6px 0 0; font-size: 0.78rem; color: rgba(17, 17, 17, 0.45); }

.v_artisan-photo-viewer__strip {
  display: flex; gap: 8px;
  padding: 18px clamp(16px, 5vw, 60px) clamp(18px, 4vh, 36px);
  overflow-x: auto; scrollbar-width: none;
}
.v_artisan-photo-viewer__strip::-webkit-scrollbar { display: none; }
.v_artisan-photo-viewer__thumb {
  position: relative; flex: none; width: 74px; height: 54px; border-radius: 2px; overflow: hidden;
  border: none; padding: 0; cursor: pointer;
  opacity: 0.5; filter: blur(1.5px) grayscale(35%);
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}
.v_artisan-photo-viewer__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v_artisan-photo-viewer__thumb:hover { opacity: 0.8; filter: blur(0) grayscale(0%); }
.v_artisan-photo-viewer__thumb.is-active { opacity: 1; filter: blur(0) grayscale(0%); transform: translateY(-3px); box-shadow: 0 0 0 2px var(--ink); }

/* Grand écran (≥ 901px) : titre/texte au-dessus, puis le même carrousel 3D
   que la page réalisations (voir plus haut), centré dans l'espace restant —
   entre le bas du texte et le bas de la page. */
.v_artisan-photo-viewer__caption--desktop { padding-top: clamp(8px, 2.5vh, 28px); }
/* Le diaporama n'a pas de container (il occupe tout l'écran) : sans ça, les
   flèches se retrouvent collées aux bords de l'écran. Le balisage (JS) place
   le carrousel dans .container.container--carousel-depth — le même que sur
   la page réalisations — plutôt que de recopier ses marges ici : si elles
   évoluent un jour, le diaporama suit automatiquement.
   width: 100% + display: flex sur le container sont nécessaires en plus de
   flex: 1 : flex: 1 seul (flex-basis: 0%) ne suffit pas à faire remplir
   toute la largeur disponible une fois max-width/padding ajoutés (vérifié
   en direct : sans ça, le container se réduit à peine plus large que ses
   marges). display: flex sur le container fait ensuite remplir toute sa
   hauteur ET sa largeur par .v_artisan-depth-carousel (flex: 1 ci-dessous). */
.v_artisan-photo-viewer__desktop .v_artisan-photo-viewer__carousel-wrap {
  flex: 1; min-height: 0; width: 100%;
  display: flex;
}
.v_artisan-photo-viewer__desktop .v_artisan-photo-viewer__carousel-wrap .v_artisan-depth-carousel {
  flex: 1; min-width: 0;
}
/* Le carrousel du diaporama (contrairement à celui de la page Réalisations,
   qui doit cohabiter avec le reste de cette page) n'a au-dessus de lui que
   le texte de la réalisation, et le bas de l'écran en dessous : il peut
   donc prendre presque tout l'espace vertical restant, au lieu du plafond
   (min(46vw, 62vh, 640px)) pensé pour la page Réalisations, qui reste
   inchangé là-bas. min-height: 0 pour qu'il accepte de se réduire si
   l'espace manque (écran bas) sans jamais déborder : la hauteur suit
   simplement l'espace réellement disponible sous le texte, à chaque
   écran. */
.v_artisan-photo-viewer__desktop .v_artisan-depth-carousel {
  min-height: 0;
}
.v_artisan-photo-viewer__desktop .v_artisan-depth-carousel__scene {
  align-self: stretch;
}
.v_artisan-photo-viewer__desktop .v_artisan-depth-carousel.is-depth3d .v_artisan-depth-carousel__track {
  height: 100%;
}
/* Flèches du carrousel 3D quand il est utilisé dans le diaporama (grand
   écran) : même traitement halo que les flèches mobiles ci-dessus, pour les
   mêmes raisons. Spécifique au diaporama (deux classes) : le carrousel 3D
   de la page Réalisations, lui, reste sur le fond uni de la page (jamais
   sur une photo, voir 1.10.0) — sa couleur d'origine y reste parfaitement
   lisible, donc pas concerné par ce changement. */
.v_artisan-photo-viewer__desktop .v_artisan-depth-carousel__arrow {
  color: #fff;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
}
.v_artisan-photo-viewer__desktop .v_artisan-depth-carousel__arrow:hover,
.v_artisan-photo-viewer__desktop .v_artisan-depth-carousel__arrow:focus-visible {
  color: #fff;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 1)) drop-shadow(0 1px 5px rgba(0, 0, 0, 0.7));
}
/* Même agrandissement ×1,5 (20 → 30px) et trait ×3 (4,8px) que les flèches
   mobiles ci-dessus, pour les mêmes raisons — uniquement dans le diaporama :
   le carrousel 3D de la page Réalisations garde sa taille de flèche
   d'origine (20px). */
.v_artisan-photo-viewer__desktop .v_artisan-depth-carousel__arrow svg {
  width: 30px; stroke-width: 4.8px;
}

/* Flèches "néon holographique" (case facultative et flashy, réglable dans
   « Contenu du site » > Réalisations, désactivée par défaut — le thème
   garde sa palette noir / blanc / gris tant qu'elle n'est pas cochée).
   Remplace le halo sombre par un halo rose/magenta façon enseigne au néon
   (plusieurs ombres portées de la même teinte, de plus en plus larges et
   diffuses) et un léger scintillement, comme un vrai tube néon. */
.v_artisan-photo-viewer.has-neon-arrows .v_artisan-photo-viewer__arrow,
.v_artisan-photo-viewer.has-neon-arrows .v_artisan-depth-carousel__arrow {
  color: #ff6df0;
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 6px #ff2fd6)
    drop-shadow(0 0 14px #ff2fd6)
    drop-shadow(0 0 28px rgba(255, 30, 210, 0.7));
  animation: v_artisan-neon-flicker 2.6s ease-in-out infinite;
}
.v_artisan-photo-viewer.has-neon-arrows .v_artisan-photo-viewer__arrow:hover,
.v_artisan-photo-viewer.has-neon-arrows .v_artisan-photo-viewer__arrow:focus-visible,
.v_artisan-photo-viewer.has-neon-arrows .v_artisan-depth-carousel__arrow:hover,
.v_artisan-photo-viewer.has-neon-arrows .v_artisan-depth-carousel__arrow:focus-visible {
  color: #fff;
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 8px #ff2fd6)
    drop-shadow(0 0 18px #ff2fd6)
    drop-shadow(0 0 34px rgba(255, 30, 210, 0.85));
}
@keyframes v_artisan-neon-flicker {
  0%, 19%, 21%, 23%, 54%, 56%, 100% { opacity: 1; }
  20%, 22%, 55% { opacity: 0.78; }
}

@media (max-width: 780px) {
  .v_artisan-photo-viewer__arrow { padding: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .v_artisan-photo-viewer, .v_artisan-photo-viewer__slide, .v_artisan-photo-viewer__thumb { transition: none !important; }
  .v_artisan-photo-viewer.has-neon-arrows .v_artisan-photo-viewer__arrow,
  .v_artisan-photo-viewer.has-neon-arrows .v_artisan-depth-carousel__arrow { animation: none !important; opacity: 1; }
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 28px;
}
.breadcrumb a { color: var(--text-light); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { margin: 0 6px; }

/* ==========================================================================
   Single realisation
   ========================================================================== */
.container--single {
  max-width: 1840px; /* +140px */
  padding-left: clamp(24px, 9.6vw, 180px);
  padding-right: clamp(24px, 9.6vw, 180px);
}
.page-title-band--single .page-title-band__logo { margin-left: 0; }
@media (max-width: 780px) {
  .page-title-band--single { padding: 32px 0 28px; }
}
.section--single { padding: 0 0 110px; }
.section--single .breadcrumb {
  margin: 0 0 39px;
  font-size: 0.875rem;
  color: #555;
}
.section--single .breadcrumb a { color: #555; }
.section--single .breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

/* Pages standard (mentions légales, etc.) : même bandeau que les fiches,
   puis texte en Rubik sur une colonne de lecture confortable. */
.section--page .page-content {
  max-width: 62rem;
  font-size: clamp(1rem, 1.06vw, 1.2rem);
  line-height: 1.75;
  color: var(--ink);
}
.section--page .page-content > :first-child { margin-top: 0; }
.section--page .page-content > :last-child { margin-bottom: 0; }
.section--page .page-content p { margin: 0 0 1.2em; }
.section--page .page-content h2,
.section--page .page-content h3 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
  margin: 1.9em 0 0.6em;
}
.section--page .page-content h2 { font-size: clamp(1.4rem, 1.9vw, 2.1rem); }
.section--page .page-content h3 { font-size: clamp(1.15rem, 1.4vw, 1.5rem); }
.section--page .page-content h4 { margin: 1.8em 0 0.8em; }
.section--page .page-content h2 a { text-decoration: none; }
.section--page .page-content h2 a:hover { text-decoration: underline; }
.section--page .page-content ul,
.section--page .page-content ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.section--page .page-content li { margin: 0 0 0.4em; }
.section--page .page-content blockquote {
  margin: 1.8em 0;
  padding: 0.1em 0 0.1em 1.4em;
  border-left: 3px solid var(--ink);
  font-style: italic;
}
.section--page .page-content hr { border: 0; border-top: 1px solid var(--border); margin: 2.4em 0; }
.section--page .page-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 0.95em; }
.section--page .page-content th,
.section--page .page-content td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.section--page .page-content th { font-weight: 700; border-bottom-color: var(--ink); }
.section--page .page-content figure { margin: 1.6em 0; }
.section--page .page-content figcaption { font-size: 0.85em; color: #555; margin-top: 8px; }
.section--page .page-content img { border-radius: 0; }
.section--page .page-content .alignleft { float: left; margin: 0.3em 1.6em 1em 0; }
.section--page .page-content .alignright { float: right; margin: 0.3em 0 1em 1.6em; }
.section--page .page-content .aligncenter { margin-left: auto; margin-right: auto; }
.section--page .page-content::after { content: ""; display: block; clear: both; }
.section--page .page-content--entry + .page-content--entry { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--border); }
@media (max-width: 600px) {
  .section--page .page-content .alignleft,
  .section--page .page-content .alignright { float: none; margin: 1.2em 0; }
}

/* Texte à gauche (étroit), mosaïque à droite */
.realisation-layout {
  display: grid;
  grid-template-columns: minmax(0, 13.9%) minmax(0, 82.7%);
  column-gap: 3.4%;
  align-items: start;
}
.realisation-layout > .gallery-masonry { grid-column: 2; }
.realisation-desc {
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.8;
}
.realisation-desc p { margin: 0 0 20px; }
@media (max-width: 900px) {
  .realisation-layout { grid-template-columns: 1fr; row-gap: 32px; }
  .realisation-layout > .gallery-masonry { grid-column: 1; }
}

/* Mosaïque : identique à celle de la page Réalisations (fine marge blanche de
   4-5 px). Sans JavaScript : colonnes CSS ; avec JavaScript (.is-masonry) :
   chaque photo est posée dans la colonne la plus courte. */
.gallery-masonry { column-count: 3; column-gap: 4px; }
.gallery-masonry__item {
  display: block;
  margin: 0 0 5px;
  break-inside: avoid;
  cursor: zoom-in;
  overflow: hidden;
}
.gallery-masonry img { display: block; width: 100%; height: auto; }
.gallery-masonry.is-masonry { display: block; position: relative; column-count: auto; }
.gallery-masonry.is-masonry .gallery-masonry__item { position: absolute; margin: 0; }
@media (max-width: 900px) { .gallery-masonry { column-count: 2; } }
@media (max-width: 520px) { .gallery-masonry { column-count: 1; } }

/* Diaporama plein écran (comme l'ancien site) : voile blanc légèrement
   transparent, grande photo avec fine bordure blanche et ombre douce, flèches
   fines sur les côtés, pellicule de miniatures en bas, glissement latéral
   d'une photo à l'autre. */
html.lightbox-open { overflow: hidden; }
.lightbox-overlay {
  position: fixed; inset: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  --lb-side: clamp(52px, 6.2vw, 110px);
  --lb-strip: 104px;
}
.lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}
.lightbox-tools {
  position: absolute; top: 12px; left: 14px;
  z-index: 3;
  display: flex; gap: 6px;
}
.lightbox-btn, .lightbox-arrow {
  border: 0; background: none; padding: 0;
  color: #333; cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.lightbox-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.lightbox-btn svg { width: 16px; height: 16px; }
.lightbox-btn:hover, .lightbox-arrow:hover { color: #000; opacity: 0.7; }
.lightbox-arrow {
  position: absolute; top: calc((100% - var(--lb-strip)) / 2);
  transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-arrow svg { width: 30px; height: 70px; }
.lightbox-arrow--prev { left: 10px; }
.lightbox-arrow--next { right: 10px; }

.lightbox-stage {
  position: absolute;
  top: 44px; bottom: var(--lb-strip);
  left: var(--lb-side); right: var(--lb-side);
  overflow: hidden;
}
.lightbox-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 6px;                          /* laisse voir l'ombre de la photo */
  will-change: transform;
}
.lightbox-slide img {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border: 3px solid #fff;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.28);
  background: #fff;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-slide.is-anim { transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }

.lightbox-strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--lb-strip);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.7);   /* la pellicule : bande un peu plus claire */
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.lightbox-strip::-webkit-scrollbar { display: none; }
.lightbox-strip button:first-child { margin-left: auto; }
.lightbox-strip button:last-child { margin-right: auto; }
.lightbox-thumb {
  flex: 0 0 auto;
  width: 104px; height: 78px;
  padding: 0;
  border: 3px solid #fff;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lightbox-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lightbox-thumb:hover { opacity: 0.9; }
.lightbox-thumb.is-active { opacity: 1; transform: translateY(-3px); }

@media (max-width: 780px) {
  .lightbox-overlay { --lb-side: 8px; --lb-strip: 84px; }
  .lightbox-stage { top: 46px; }
  .lightbox-arrow { width: 36px; height: 60px; background: rgba(255,255,255,0.7); }
  .lightbox-arrow svg { width: 20px; height: 44px; }
  .lightbox-arrow--prev { left: 4px; }
  .lightbox-arrow--next { right: 4px; }
  .lightbox-thumb { width: 64px; height: 48px; border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox-slide.is-anim, .lightbox-overlay { transition-duration: 0.01s; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.map-wrapper {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  height: 100%;
  min-height: 260px;
}
.map-wrapper iframe { width: 100%; height: 100%; min-height: 260px; border: 0; display: block; }

/* ==========================================================================
   Footer partagé : skyline FIXE en bas de la fenêtre, derrière le contenu.
   En arrivant en bas de page, le contenu remonte et on découvre la skyline
   posée "au sol". Le footer est transparent ; les sections de contenu
   gardent leur fond clair et le recouvrent tant qu'on n'est pas en bas.
   Hauteur du footer (--footer-h) : estimée en CSS, puis mesurée exactement
   par main.js.
   ========================================================================== */
:root {
  /* Hauteur de la silhouette : pleine largeur (43.5% = ratio de footer.png,
     3500x1524), mais limitée pour que silhouette + bloc d'infos + barre
     + menu fixe (~85px) tiennent toujours dans la fenêtre. Le double réglage (vh puis svh) sert
     de repli pour les anciens navigateurs. */
  --skyline-h: max(120px, min(calc(var(--skyline-ratio, 43.5) * 1vw), calc(100vh - 340px)));
  --skyline-h: max(120px, min(calc(var(--skyline-ratio, 43.5) * 1vw), calc(100svh - 340px)));
  --footer-h: calc(var(--skyline-h) + 260px); /* estimation, mesurée par main.js */
}
body.has-bar-only-footer { --footer-h: 54px; }

/* Tout le contenu (hors footer) est opaque et passe devant le footer fixe */
main {
  position: relative;
  display: flow-root;
  background: var(--white);
}
/* La dernière section avant la skyline reste blanche (pas de liseré gris
   entre la section et le ciel de la silhouette). */
body:not(.has-bar-only-footer) main > .section--alt:last-child { background: var(--white); }

/* Espace réservé en bas de page pour le footer fixe. En padding du body (et
   non en marge de <main>) pour que le menu sticky reste bien collé en haut
   jusqu'à la toute fin du défilement.
   pointer-events: none sur body + auto sur ses enfants directs : sans ça, la
   zone de ce padding (le "trou" qui laisse deviner le footer en z-index -1
   dessous) intercepte quand même les clics — même invisible/transparent,
   c'est la boîte de body elle-même (pas son contenu) qui passe devant le
   footer dans l'ordre d'empilement, et donc sous le curseur. Conséquence
   avant ce correctif : header, silhouette, bloc d'infos, icônes de contact et
   barre de copyright du footer n'étaient jamais cliquables (bug préexistant,
   pas lié aux icônes de contact spécifiquement). Vérifié : rétablit le clic
   sur les icônes du footer (desktop, mobile portrait/court, mobile paysage)
   sans rien changer au reste (menu, boutons, liens des pages). */
body { padding-bottom: var(--footer-h); pointer-events: none; }
body > * { pointer-events: auto; }

.site-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: -1;               /* derrière tout le contenu de la page */
  background: transparent;
}
.site-footer__illustration {
  /* fine bande de "sol" sur toute la largeur : prolonge la silhouette
     jusqu'au bord droit quand elle est réduite (fenêtre basse) */
  background: linear-gradient(var(--footer-ground, #545454), var(--footer-ground, #545454)) left bottom / 100% 2.7% no-repeat;
}
/* Wrapper = exactement la taille de l'image de la silhouette (elle rétrécit
   sur les fenêtres basses) : le logo y est positionné en pourcentages, donc
   il suit toujours la ligne du terrain. */
.site-footer__skyline {
  position: relative;
  width: fit-content;
  max-width: 100%;
  height: var(--skyline-h);
}
.site-footer__skyline-img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
}
/* Bloc d'infos : posé sur le "sol", même couleur que la silhouette (#545454),
   donc dans la continuité de celle-ci. Trois colonnes : Atelier, Heures
   d'ouverture + Contact, logo du pied de page. */
.site-footer__ground {
  position: relative;
  margin-top: -1px; /* recouvre la jointure avec la silhouette (pas de trait) */
  background: var(--footer-ground, #545454);
  color: #ffffff;
  padding: 2px 0 30px;
}
/* Sans silhouette : le bloc d'infos ouvre le pied de page, on lui rend de l'air en haut */
.site-footer__ground:first-child { padding-top: 34px; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.site-footer__grid h4,
.site-footer__grid a { color: #ffffff; }
.site-footer__grid h4 { margin: 0 0 10px; }
.site-footer__grid p { margin: 0; }
.site-footer__col-subtitle { margin-top: 22px !important; }
.site-footer__grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Logo du pied de page (fond transparent) : il se détache sur le
   fond gris foncé du bloc. */
.site-footer__col--logo { display: flex; justify-content: flex-end; }
.site-footer__logo {
  display: block;
  width: clamp(120px, 12vw, 190px);
  height: auto;
}

.site-footer__bar {
  background: var(--charcoal);
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  padding: 16px 24px;
}
.site-footer__bar--standalone { margin-top: 0; }

@media (max-width: 900px) {
  .site-footer__ground { padding-bottom: 24px; }
}
@media (max-width: 600px) {
  .site-footer__grid,
  .site-footer__grid--3 { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .site-footer__grid p { font-size: 0.85rem; }
  .site-footer__col--logo { grid-column: 1 / -1; justify-content: flex-start; }
  .site-footer__logo { width: 110px; }
}

.icon-row { display: flex; gap: 14px; }
.icon-row a {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
}
.icon-row a:hover { border-color: #fff; color: #fff; }

/* Section Instagram (contenu de page, pas footer) */
/* Aligné sur l'ancien site : même colonne que les autres sections
   (léger retrait), grand titre léger, grande icône Instagram. */
.instagram-cta { padding: 95px 0 110px; }
.instagram-cta h4,
.instagram-cta h2,
.instagram-carousel { padding-left: clamp(0px, 1.6vw, 27px); padding-right: clamp(0px, 1.6vw, 27px); }
.instagram-cta h4 { margin: 0 0 clamp(28px, 4vw, 68px); }
.instagram-cta h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px clamp(10px, 1vw, 16px);
  margin: 0;
  font-size: clamp(1.7rem, 3.15vw, 3.4rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
}
.ig-inline { display: inline-flex; color: var(--ink); }
.ig-inline svg { width: clamp(44px, 4.7vw, 80px); height: clamp(44px, 4.7vw, 80px); stroke-width: 1.9; }
.ig-inline:hover { opacity: 0.7; }
.instagram-carousel { margin-top: 40px; }

/* ==========================================================================
   Page Contact — alignée sur l'ancien site : menu seul, logo rond, petit
   titre + grand titre de page à gauche, téléphone / e-mail / icônes
   à droite ; puis bande grise (atelier, carte satellite, photo) et barre
   de copyright noire juste sous le contenu.
   ========================================================================== */
.container--contact {
  max-width: 2040px; /* +140px */
  padding-left: clamp(24px, 9.93vw, 240px);
  padding-right: clamp(24px, 9.93vw, 240px);
}
.page-title-band--contact .page-title-band__logo { margin-left: 0; }

.section--contact { padding: 0 0 60px; }

.contact-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24%);
  gap: 40px;
  padding: 31px 0 67px;
}
.contact-top h4, .contact-bottom__text h4 {
  font-size: clamp(0.62rem, 0.63vw, 0.7rem);
  letter-spacing: 0.32em;
  font-weight: 800;
}
.contact-top h4 {
  margin: 0 0 clamp(12px, 1.5vw, 26px);
  color: #181818;
}
.contact-top__intro p {
  margin: 0;
  font-size: clamp(1rem, 1.06vw, 1.2rem);
  color: #181818;
}
.contact-top__info { padding-top: clamp(0px, 2.3vw, 39px); }
.contact-top__phone, .contact-top__email {
  display: block;
  font-size: clamp(0.95rem, 1.175vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
  color: #181818;
  white-space: nowrap;
}
.contact-top__phone { margin-bottom: clamp(16px, 2.1vw, 36px); }
.contact-top__email { margin-bottom: clamp(16px, 2.1vw, 36px); }
.contact-top__phone:hover, .contact-top__email:hover { text-decoration: underline; }

/* Icônes sans cercle (comme l'ancien site) */
.icon-row--plain { gap: clamp(14px, 1.1vw, 19px); }
.icon-row--plain a {
  width: auto; height: auto;
  border: 0; border-radius: 0;
  color: #181818;
}
.icon-row--plain a:hover { color: #181818; opacity: 0.6; background: none; }

.contact-bottom { background: #f6f6f6; padding: 49px 0 85px; }
.contact-bottom__grid {
  display: grid;
  grid-template-columns: minmax(0, 250fr) minmax(0, 501fr) minmax(0, 502fr);
  column-gap: clamp(24px, 3.23vw, 60px);
  align-items: start;
}
.contact-bottom__text { padding-top: 38px; }
.contact-bottom__text h4 { margin: 0 0 clamp(14px, 1.6vw, 27px); line-height: 1.4; color: #181818; }
.contact-bottom__text h3 {
  margin: 0 0 clamp(14px, 1.4vw, 24px);
  font-size: clamp(1.35rem, 1.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.5;
  color: #181818;
}
.contact-bottom__text p { margin: 0; font-size: clamp(1rem, 1.06vw, 1.2rem); line-height: 1.8; color: #181818; }
.contact-bottom .map-wrapper {
  margin-top: 10px;
  height: auto;
  aspect-ratio: 501 / 300;
  min-height: 0;
  border: 0;
  border-radius: 0;
}
.contact-bottom .map-wrapper iframe { min-height: 0; }
.contact-bottom__photo img {
  width: 100%;
  aspect-ratio: 502 / 334;
  object-fit: cover;
  border-radius: 0;
  box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.32);
}
@media (max-width: 900px) {
  .contact-top h4, .contact-bottom__text h4 { font-size: 0.7rem; }
  .contact-top { grid-template-columns: 1fr; gap: 32px; padding: 28px 0 48px; }
  .contact-top__info { padding-top: 0; }
  .contact-top__phone, .contact-top__email { white-space: normal; overflow-wrap: anywhere; }
  .contact-bottom { padding: 40px 0 48px; }
  .contact-bottom__grid { grid-template-columns: 1fr; row-gap: 28px; }
  .contact-bottom__text { padding-top: 0; }
  .contact-bottom .map-wrapper { margin-top: 0; }
  .page-title-band--contact { padding: 28px 0 48px; }
  .page-title-band--contact .page-title-band__logo img { width: 52px; height: 52px; }
}

/* Barre de copyright de la page Contact : noire, juste sous le contenu,
   puis le fond gris clair de l'ancien site sous la barre. */
body.has-bar-only-footer { background: #f6f6f6; padding-bottom: 0; }
body.has-bar-only-footer .site-footer { position: static; z-index: auto; }
.site-footer__bar--standalone {
  background: #181818;
  color: #888;
  font-size: 0.8125rem;
  padding: 28px 24px;
}

/* ==========================================================================
   Sections réglables depuis l'admin (« Contenu du site ») : types et options
   ========================================================================== */
/* Section « Texte seul » : même colonne de lecture que « Notre histoire » */
.section--text { padding: 95px 0; }
.section-text-layout { padding-right: clamp(24px, 13.9vw, 236px); }
.section-text { max-width: 900px; }
@media (max-width: 900px) {
  .section--text { padding: 56px 0; }
  .section-text-layout { padding-right: clamp(24px, 8.4vw, 144px); }
}
/* Bouton facultatif sous un texte */
.section-cta { margin: 32px 0 0; }
.valeurs-text .section-cta { margin-top: 44px; }

/* Texte d'introduction facultatif au-dessus de la mosaïque des réalisations */
.portfolio-intro { margin: 0 0 clamp(32px, 3vw, 56px); }
.portfolio-intro h4 { margin: 0 0 20px; }
.portfolio-intro h2 {
  font-weight: 700;
  font-size: clamp(1.35rem, 1.7vw, 1.75rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 20px;
}
.portfolio-intro p {
  font-size: clamp(1rem, 1.06vw, 1.125rem);
  line-height: 1.85;
  color: var(--ink);
  margin: 0 0 20px;
}

/* Page Contact : bande « atelier » sur fond blanc (option) */
.contact-bottom--white { background: var(--white); }

/* Image du côté opposé à sa position d'origine (option « Position de l'image »,
   ordinateur seulement : sur mobile tout s'empile comme avant) */
@media (min-width: 901px) {
  .histoire-layout--reverse,
  .temoignages-layout--reverse {
    padding-right: clamp(24px, 8.4vw, 144px);
    padding-left: clamp(24px, 13.9vw, 236px);
    grid-template-columns: minmax(0, 32%) minmax(0, 64.3%);
  }
  .histoire-layout--reverse .histoire-media,
  .temoignages-layout--reverse .temoignages-media { order: -1; }
  .histoire-layout--reverse .histoire-media img,
  .temoignages-layout--reverse .temoignages-media img { border-radius: 0 0 clamp(64px, 7vw, 120px) 0; }

  .valeurs-layout--reverse { grid-template-columns: minmax(0, 33.9%) minmax(0, 49.5%); }
  .valeurs-layout--reverse .valeurs-images { order: 2; }

  .savoir-faire-layout--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.26fr);
    grid-template-areas:
      "media text"
      "cta   cta";
  }
  .savoir-faire-layout--reverse .savoir-faire-carousel { border-radius: var(--sf-radius) 0 0 0; }
}

/* Page Contact : les sections ajoutées s'alignent sur les marges de la page */
.section--contact .container--wide {
  max-width: 2040px; /* +140px */
  padding-left: clamp(24px, 9.93vw, 240px);
}
.section--contact .section-text-layout { padding-right: clamp(24px, 9.93vw, 240px); }

/* Page Réalisations : les sections ajoutées s'alignent sur la mosaïque */
.main--portfolio .container--wide {
  max-width: 1840px; /* +140px */
  padding-left: clamp(24px, 9.35vw, 180px);
}
.main--portfolio .section-text-layout { padding-right: clamp(24px, 8.8vw, 170px); }