:root {
  --fond: #1a120d;
  --surface: #2b1d15;
  --texte: #f3ece0;
  --texte-doux: #f3ece0;   /* même couleur que le titre : plus de gris pour les textes secondaires */
  --accent: #c19a5b;
  --filet: rgba(193, 154, 91, 0.28);

  /* Texture papier : grain fin en SVG (aucun fichier image à héberger) */
  --papier: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.05  0 0 0 0 0.03  0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --fibres: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='19' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.98  0 0 0 0 0.9  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  /* Espace entre le bas de l'en-tête et le début du contenu : IDENTIQUE sur toutes les pages (Projects, Services, About, Contact, pages projet) */
  --espace-tete: clamp(2.5rem, 6vw, 5rem);
  --hauteur-entete: calc(4.25rem + clamp(2.6rem, 6.4vw, 5rem) + 1.9 * clamp(0.62rem, 1vw, 0.82rem));   /* hauteur de l'en-tête fixe */

  /* Taille et espacement communs à tous les titres de pages (SERVICES, À PROPOS, NOUS CONTACTER, noms de projets) */
  --taille-titre: clamp(1.5rem, 3.4vw, 2.7rem);
  --espacement-titre: 0.04em;
  --nom: "Italiana", "Didot", Georgia, "Times New Roman", serif;   /* SANOA (logo) uniquement */
  --titre: "Syne", "Arial Black", "Helvetica Neue", Arial, sans-serif;   /* TITRES en majuscules, style Kelly Wearstler */
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;   /* police du TEXTE : menu, paragraphes, formulaire, libellés */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; background: var(--fond); }

body {
  min-height: 100vh;
  background-color: var(--fond);
  background-image: var(--papier);
  background-size: 240px 240px;
  color: var(--texte);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Les boutons et champs héritent de la police du site, jamais celle du navigateur */
button, input, textarea, select { font-family: inherit; }

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

a { color: inherit; text-decoration: none; }

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ---------- En-tête fixe ---------- */
.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 2rem clamp(1.5rem, 5vw, 4.5rem);
  background-color: transparent;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: padding 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.entete .nom {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.entete .nom .marque {
  font-family: var(--nom);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--texte);
  transition: font-size 0.35s ease;
}

.entete .nom .sous {
  margin-top: 0.9em;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(0.62rem, 1vw, 0.82rem);
  letter-spacing: 0.9em;
  text-indent: 0.9em;
  color: var(--texte-doux);
  transition: opacity 0.3s ease, max-height 0.35s ease, margin 0.35s ease;
  max-height: 2em;
}

.entete nav {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  gap: clamp(1rem, 2.2vw, 2.2rem);
  justify-self: start;
}

.entete nav a {
  position: relative;
  padding: 0.3rem 0;
  color: var(--texte-doux);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.entete nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.entete nav a:hover,
.entete nav a[aria-current] { color: var(--texte); }

.entete nav a:hover::after,
.entete nav a[aria-current]::after { transform: scaleX(1); }

/* Sur l'accueil : au repos, le nom géant est dans le visuel, on ne le répète pas dans l'en-tête */
.accueil .entete:not(.reduit) .nom { opacity: 0; pointer-events: none; }
.entete .nom { transition: opacity 0.4s ease, font-size 0.35s ease; }
.accueil .entete:not(.reduit) nav a {
  color: var(--texte);
  text-shadow: 0 1px 8px rgba(20, 13, 9, 0.55);
}
.accueil .entete:not(.reduit) nav a::after { background: #f3ece0; }

/* Pages intérieures (projets, contact) : l'en-tête est fixe, on réserve sa hauteur en haut de page.
   Formule = 2 x 2rem de marge + le nom + le sous-titre, comme dans .entete */
body:not(.accueil) { display: flex; flex-direction: column; }
body:not(.accueil) main { flex: 1; }

body:not(.accueil) main {
  padding-top: calc(var(--hauteur-entete) + var(--espace-tete));
}

/* En-tête réduit quand on défile */
.entete.reduit {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom-color: var(--filet);
  background-color: rgba(26, 18, 13, 0.94);
  background-image: var(--papier);
  background-size: 240px 240px;
}

.entete.reduit .nom .marque { font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: 0.2em; text-indent: 0.2em; }
.entete.reduit .nom .sous { opacity: 0; max-height: 0; margin-top: 0; }

/* ---------- Accueil : introduction ---------- */
/* ---------- Accueil : grand visuel plein écran ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  background: transparent;      /* on voit le fond du site : même brun que les autres pages */
}

.hero-diapos { position: absolute; inset: 0; }

.hero-diapo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s ease;
}

.hero-diapo.actif { opacity: 1; }

.hero-diapo img,
.hero-diapo .placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Photo provisoire (bloc de couleur) : transparente, pour que l'accueil ait exactement le fond des autres pages */
.hero-diapo .placeholder { background: transparent; }

/* Voile sombre par-dessus chaque vraie photo, pour la lisibilité du nom. Pas de voile sur le fond seul (photo provisoire). */
.hero-diapo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(26, 18, 13, 0.42) 0%,
      rgba(26, 18, 13, 0.34) 35%,
      rgba(26, 18, 13, 0.4) 62%,
      rgba(26, 18, 13, 0.62) 75%,
      rgba(26, 18, 13, 0.94) 100%);
  pointer-events: none;
}
.hero-diapo:has(.placeholder)::after { display: none; }

.hero-centre {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.hero-centre .marque {
  font-family: var(--nom);
  font-weight: 400;
  font-size: clamp(3.6rem, 12vw, 10rem);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  line-height: 1;
  color: var(--texte);
}

.hero-centre .sous {
  margin-top: 1.4rem;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(0.75rem, 1.6vw, 1.15rem);
  letter-spacing: 0.9em;
  text-indent: 0.9em;
  color: var(--texte);
}

/* Traits du diaporama */
.hero-traits {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 0.8rem;
}

.hero-traits button {
  width: clamp(2rem, 4vw, 3.2rem);
  height: 2px;
  padding: 1rem 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.hero-traits button::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  background: rgba(243, 236, 224, 0.4);
  transition: background 0.3s;
}

.hero-traits button.actif::before,
.hero-traits button:hover::before { background: #f3ece0; }

.hero-traits button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Accueil : projets en bandes horizontales ---------- */
.grille { border-bottom: 1px solid var(--filet); }
.grille .projet:first-child { border-top: 0; padding-top: 0; }

.projet {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.6fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2rem, 3.4vw, 3rem) clamp(1.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--filet);
}
.projet:last-of-type { padding-bottom: clamp(5rem, 12vw, 8rem); }

.projet-texte { align-self: start; }

.projet-texte h2 {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(1rem, 1.65vw, 1.6rem);     /* Syne est très large : la taille suit la colonne pour que le nom le plus long tienne */
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.projet-texte h2 a { transition: color 0.2s; }
.projet-texte h2 a:hover,
.projet:has(.projet-images a:hover) .projet-texte h2 a { color: var(--accent); }

.projet-texte .meta {
  margin-top: 0.5rem;
  color: var(--texte-doux);
  font-size: 0.92rem;
}

.projet-texte .prestation {
  margin-top: 0.3rem;
  color: var(--texte-doux);
  font-size: 0.92rem;
  font-weight: 300;
}

.projet-images {
  display: grid;
  gap: clamp(0.5rem, 1vw, 1.1rem);
  height: clamp(20rem, 46vw, 45rem);
}

/* 2 images : une étroite (portrait) + une large (paysage) ; 3 images : trois portraits égaux */
.projet-images.deux  { grid-template-columns: 1fr 2fr; }
.projet-images.trois { grid-template-columns: var(--colonnes, repeat(3, 1fr)); }

.projet-images a {
  display: block;
  overflow: hidden;
  background: var(--surface);
}

.projet-images .placeholder,
.projet-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.projet-images a:hover .placeholder,
.projet-images a:hover img { transform: scale(1.03); }

/* Placeholders (à remplacer par tes photos) */
.placeholder.v2 { filter: hue-rotate(-8deg) brightness(1.18); }
.placeholder.v3 { filter: hue-rotate(6deg) brightness(0.82); }

.placeholder { background: linear-gradient(160deg, var(--c1), var(--c2)); }
.p1 { --c1: #3b2a1f; --c2: #6b4f36; }
.p2 { --c1: #5a3524; --c2: #241811; }
.p3 { --c1: #2f2118; --c2: #7a5f44; }
.p4 { --c1: #4d3a26; --c2: #241811; }
.p5 { --c1: #2a1d14; --c2: #6a4630; }
.p6 { --c1: #43301f; --c2: #8a6a48; }
.p7 { --c1: #3a2a1c; --c2: #7a5a3e; }
.p8 { --c1: #2e2117; --c2: #6f5238; }
.p9 { --c1: #33261a; --c2: #7a5a3a; }

/* ---------- Page projet ---------- */
.projet-tete {
  padding: 0 clamp(1.5rem, 5vw, 4.5rem) 0;
}

.retour {
  display: block;
  width: fit-content;
  margin: 0 auto;
  color: var(--texte-doux);
  font-size: 0.95rem;
  transition: color 0.2s;
}

.retour:hover { color: var(--texte); }

.projet-tete { text-align: center; }

.projet-tete h1 {
  margin: 2rem auto 0;
  font-family: var(--titre);
  font-weight: 800;
  font-size: var(--taille-titre);
  line-height: 1.12;
  letter-spacing: var(--espacement-titre);
  text-transform: uppercase;
  max-width: 50rem;
}

.projet-image-principale {
  margin: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 5vw, 4.5rem) 0;
  outline: 1px solid var(--filet);
  outline-offset: 0.6rem;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  overflow: hidden;
}

.projet-image-principale img,
.projet-image-principale .placeholder { width: 100%; height: 100%; object-fit: cover; }

.projet-corps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.125rem, 3.75vw, 3.375rem);
}

.fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.6rem 3rem; align-content: start; }
.projet-corps:has(.texte) { grid-template-columns: 1fr 2fr; }
.projet-corps:has(.texte) .fiche { grid-template-columns: 1fr; gap: 1.2rem; }

.fiche dt { color: var(--texte-doux); font-size: 0.9rem; }
.fiche dd { font-size: 1.15rem; font-weight: 300; margin-top: 0.15rem; }

.texte p { max-width: 47.5rem; font-size: 1.08rem; }
.texte p + p { margin-top: 1.4rem; }

.galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.8rem, 2vw, 1.6rem);
  padding: 0 clamp(1.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
}

.galerie figure { background: var(--surface); overflow: hidden; aspect-ratio: 4 / 5; }
.galerie figure.large { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.galerie figure img,
.galerie figure .placeholder { width: 100%; height: 100%; object-fit: cover; }

/* Légende discrète posée sur une photo (par exemple « Before ») */
.galerie figure { position: relative; }
.galerie figcaption {
  position: absolute; left: 0.9rem; bottom: 0.9rem;
  padding: 0.4rem 0.75rem;
  background: rgba(26, 18, 13, 0.78);
  color: var(--texte);
  font-family: var(--sans); font-size: 0.68rem; font-weight: 400; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase;
}

/* Galerie en mosaïque : rectangles 4/5 uniquement, par rangées de 3 puis de 2 photos, sans aucun arrondi */
.galerie.mosaique { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.galerie.mosaique figure { grid-column: span 2; aspect-ratio: 4 / 5; border-radius: 0; }
.galerie.mosaique figure.moitie { grid-column: span 3; }
.galerie.mosaique figure.paysage { grid-column: span 3; aspect-ratio: 3 / 2; }      /* paysage : 2 par rangée */
.galerie.mosaique figure.quatre-trois { grid-column: span 3; aspect-ratio: 4 / 3; }      /* format 4/3 : 2 par rangée */
.galerie.mosaique figure.large { grid-column: 1 / -1; aspect-ratio: 16 / 9; }      /* pleine largeur */
.galerie.mosaique figure.panorama { grid-column: 1 / -1; aspect-ratio: 21 / 9; }   /* panorama pleine largeur */

/* Navigation entre projets */
.suite {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.5rem clamp(1.5rem, 5vw, 4.5rem);
  border-top: 1px solid #3a2e24;
}

.suite a { font-family: var(--titre); font-weight: 800; font-size: 1rem; letter-spacing: 0.02em; text-transform: uppercase; transition: color 0.2s; }
.suite a:hover { color: var(--accent); }
.suite .info { display: block; margin-bottom: 0.5rem; color: var(--texte-doux); font-family: var(--sans); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.22em; }
.suite .droite { text-align: right; margin-left: auto; }


/* ---------- Sections Services / À propos / Contact ---------- */
.bloc {
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--filet);
  scroll-margin-top: 4.5rem;
}

.bloc-titre {
  font-family: var(--titre);
  font-weight: 800;
  font-size: var(--taille-titre);
  line-height: 1.12;
  letter-spacing: var(--espacement-titre);
  text-indent: var(--espacement-titre);   /* compense l'espace ajouté après la dernière lettre : le titre reste centré */
  text-transform: uppercase;
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Services : trois familles, chacune avec ses sous-catégories */
.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 4rem);
  align-items: start;
  max-width: 80rem;
  margin: 0 auto;
}

/* Titre d'une famille : majuscules, même police que le texte, trait doré au-dessus */
.services h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--accent);
}

/* Sous-catégorie : titre un peu plus marqué que sa description */
.services h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.services p { font-weight: 300; font-size: 0.98rem; line-height: 1.75; color: var(--texte-doux); }
.services .sous + .sous { margin-top: 1.9rem; }

/* Phrase d'introduction sous le titre "Services" */
.bloc-titre:has(+ .services-intro) { margin-bottom: 1.2rem; }
.services-intro {
  max-width: 38rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  font-weight: 300;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.7;
}

/* Chaque service : titre en gras, puis ce que le client y gagne (majuscules dorées), puis les rubriques.
   Les trois colonnes partagent les mêmes lignes : résumés et rubriques restent alignés d'une colonne à l'autre. */
.services { row-gap: 0; }
.service { display: grid; grid-template-rows: subgrid; grid-row: span 6; align-content: start; }
.services h2 { margin-bottom: 1.3rem; }
.services .resume {
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2.2rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--filet);
}
.services h3 { color: var(--accent); }

/* Un visuel par service, sous le résumé : illustration au trait pour l'instant.
   Pour mettre un vrai document, remplacer le <svg> par une image : <img src="..." alt="..."> */
.services .visuel {
  aspect-ratio: 300 / 188;
  margin-bottom: 2.4rem;
  color: #bfa582;   /* marron très clair : dessins et contour du cadre */
  border: 1px solid currentColor;
  overflow: hidden;
}
.services .visuel svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.services .visuel svg * { vector-effect: non-scaling-stroke; }
.services .visuel svg .f { opacity: 0.5; }
.services .visuel svg .p { fill: currentColor; fill-opacity: 0.14; }
.services .visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1000px) { .service + .service { margin-top: clamp(3rem, 8vw, 4rem); } }

/* Fin de page : invitation à prendre contact */
.services-suite {
  max-width: 80rem;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--filet);
  text-align: center;
}
.services-suite p { font-weight: 300; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.7; margin-bottom: 1.6rem; }
.lien-contact {
  display: inline-block;
  padding: 0.95rem 2.3rem;
  border: 1px solid var(--texte);
  color: var(--texte);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 0.25s, color 0.25s;
}
.lien-contact:hover { background: var(--texte); color: var(--fond); }
.lien-contact:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.apropos {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 1.4rem;
  align-items: start;
  max-width: none;
  margin: 0;
}

/* Titre de section : petit, à gauche, en capitales grasses (comme "ABOUT") */
.apropos-titre {
  grid-column: 1 / -1;          /* le titre passe au-dessus de la photo et du texte */
  font-family: var(--titre);
  font-weight: 800;
  font-size: var(--taille-titre);
  line-height: 1.12;
  letter-spacing: var(--espacement-titre);
  text-transform: uppercase;
  margin-bottom: clamp(1.1rem, 3.6vw, 2.6rem);
}

/* Grande photo rectangulaire : aucun cadre, aucun arrondi */
.apropos .portrait {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface);
  max-width: 44rem;              /* photo plafonnée sur les très grands écrans */
}

.apropos .portrait .placeholder,
.apropos .portrait img { width: 100%; height: 100%; object-fit: cover; }

/* Texte en serif, lisible, alignement en haut de la photo */
.apropos-texte p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.8;
  max-width: 38rem;
}
.apropos-texte p + p { margin-top: 1.6rem; }

main > .bloc:first-child { border-top: 0; padding-top: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Page de contact ---------- */
.contact-page { padding-left: clamp(1.5rem, 5vw, 4.5rem); padding-right: clamp(1.5rem, 5vw, 4.5rem); padding-bottom: clamp(4rem, 8vw, 7rem); }

.contact-tete {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: 0 0 clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--filet);
}

.contact-tete h1 {
  font-family: var(--titre);
  font-weight: 800;
  font-size: var(--taille-titre);
  line-height: 1.12;
  letter-spacing: var(--espacement-titre);
  text-transform: uppercase;
}

.contact-corps {
  display: grid;
  grid-template-columns: minmax(0, 2.9fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
  padding-top: clamp(2.5rem, 6vw, 5rem);
}

/* Formulaire : champs soulignés, sans boîte */
.formulaire { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
.formulaire .duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 2.4rem); }
.champ { display: flex; flex-direction: column; gap: 0.35rem; }

.champ label {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.champ .req { margin-left: 0.5em; color: var(--accent); }

.champ input,
.champ textarea {
  width: 100%;
  padding: 0.85rem 0 0.9rem;
  border: 0;
  border-bottom: 1px solid var(--filet);
  border-radius: 0;
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 300;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.champ textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }

.champ input::placeholder,
.champ textarea::placeholder { color: rgba(243, 236, 224, 0.42); }

/* Le contour du navigateur est remplacé par un trait doré plus épais : le focus reste bien visible */
.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}

/* Remplissage automatique du navigateur : on garde le fond et la couleur du site */
.champ input:-webkit-autofill {
  -webkit-text-fill-color: var(--texte);
  -webkit-box-shadow: 0 0 0 1000px #1a120d inset;
  caret-color: var(--texte);
}

.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.formulaire .actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; padding-top: 0.4rem; }

.bouton {
  padding: 0.95rem 2.3rem;
  border: 1px solid var(--texte);
  background: transparent;
  color: var(--texte);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.bouton:hover { background: var(--texte); color: var(--fond); }
.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bouton:disabled { opacity: 0.5; cursor: default; background: transparent; color: var(--texte); }

.formulaire .discret { font-size: 0.82rem; max-width: 22rem; opacity: 0.8; }

.statut { min-height: 1.6em; font-size: 0.98rem; }
.statut:empty { display: none; }
.statut.ok, .statut.info, .statut.erreur { padding: 0.9rem 1.1rem; border: 1px solid var(--filet); border-left-width: 3px; }
.statut.ok, .statut.info { border-left-color: var(--accent); }
.statut.erreur { border-left-color: #d98b6a; }
.statut a { border-bottom: 1px solid var(--filet); }

/* Coordonnées à droite : petit trait doré + libellé, valeur dessous, filet fin */
.infos { display: grid; gap: 0; }

.infos .info { padding: 0 0 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--filet); }
.infos .info:first-child { padding-top: 0.2rem; }

.info-label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.info-label::before { content: ""; width: 1.8rem; height: 1px; background: var(--accent); }

.infos .info a, .infos .info p { font-size: 1.1rem; overflow-wrap: anywhere; }
.infos .info a { border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s; }
.infos .info a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.dispo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--filet);
  background: rgba(243, 236, 224, 0.03);
  font-size: 0.9rem;
}
.dispo .point { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(193, 154, 91, 0.2); }

/* ---------- Bouton son (vagues) ---------- */
.son {
  position: fixed;
  left: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 2.4vw, 2rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1rem 0.55rem 0.8rem;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: rgba(26, 18, 13, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--texte);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}

.son:hover { border-color: var(--accent); color: var(--texte); }
body:has(.formulaire :is(input, textarea, button):focus) .son { opacity: 0; pointer-events: none; }
.son:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.son svg { width: 1.7rem; height: 1rem; overflow: visible; }

.son svg path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* Vagues immobiles quand le son est coupé, qui ondulent quand il joue */
.son .v2 { opacity: 0.6; }
.son.actif .v1 { animation: houle 2.8s ease-in-out infinite; }
.son.actif .v2 { animation: houle 2.8s ease-in-out infinite -1.4s; }

@keyframes houle {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-3px); }
}

.son .etat { min-width: 1.6rem; }

/* Quand un son est indisponible (fichier absent), le bouton s'atténue au lieu de casser */
.son.indisponible { opacity: 0.55; cursor: default; }

/* ---------- Pied de page ---------- */
.pied {
  border-top: 1px solid var(--filet);
  padding: clamp(1.8rem, 3vw, 2.4rem) clamp(1.5rem, 5vw, 4.5rem);
  color: var(--texte-doux);
  font-size: 0.92rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Le bouton Son est fixé en bas à gauche : on décale le © pour qu'ils ne se chevauchent jamais */
.pied > span { margin-left: 9rem; }

.pied a { transition: color 0.2s; }
.pied a:hover { color: var(--accent); }

/* ---------- Mobile ---------- */
/* À propos : le texte est long. Quand la colonne de droite devient trop étroite, il passe sous la photo
   (photo en paysage, sinon un portrait pleine largeur serait démesuré) */
@media (max-width: 1180px) {
  .apropos { grid-template-columns: 1fr; }
  .apropos .portrait { aspect-ratio: 3 / 4; max-width: 26rem; }
  .apropos-texte p { max-width: 42rem; }
}

/* En dessous de 1280 px, le menu ne tient plus à gauche du logo SANOA (il le chevauchait) :
   le nom passe au-dessus, le menu dessous, centré. */
@media (max-width: 1279px) {
  .entete {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 1.1rem 1.25rem 0.9rem;
    gap: 0.7rem;
  }
  .entete .nom { grid-column: 1; grid-row: 1; }
  .entete .nom .marque { font-size: 2.6rem; letter-spacing: 0.2em; text-indent: 0.2em; }
  .entete .nom .sous { font-size: 0.55rem; letter-spacing: 0.75em; text-indent: 0.75em; }
  .entete nav { grid-column: 1; grid-row: 2; justify-self: center; gap: 1.6rem; }
  .entete nav a { font-size: 0.74rem; letter-spacing: 0.14em; }
  .entete.reduit { padding-top: 0.6rem; padding-bottom: 0.5rem; gap: 0.3rem; }
  .entete.reduit .nom .marque { font-size: 1.4rem; }
}

@media (max-width: 1279px) {
  :root { --hauteur-entete: 8.4rem; }      /* hauteur de l'en-tête sur deux rangées */
}

@media (max-width: 760px) {
  .projet { grid-template-columns: 1fr; gap: 1.2rem; }
  .projet-texte h2 { font-size: 1.3rem; }
  .projet-images { height: clamp(14rem, 70vw, 24rem); }
  .projet-images.trois { grid-template-columns: var(--colonnes, repeat(3, 1fr)); }
  .projet-corps:has(.texte) { grid-template-columns: 1fr; }
  .projet-corps { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr; }
  .galerie.mosaique { grid-template-columns: 1fr; }
  .galerie.mosaique figure, .galerie.mosaique figure.moitie, .galerie.mosaique figure.paysage, .galerie.mosaique figure.large, .galerie.mosaique figure.panorama, .galerie.mosaique figure.quatre-trois { grid-column: auto; }
  .galerie.mosaique figure.panorama { aspect-ratio: 16 / 9; }      /* sur téléphone, le panorama serait trop plat */
  .apropos { grid-template-columns: 1fr; gap: 1.4rem; }
  .apropos .portrait { margin: 0; aspect-ratio: 3 / 4; }
  .bloc { scroll-margin-top: 7rem; }
  .galerie figure, .galerie figure.large { aspect-ratio: 4 / 3; }
  /* Téléphone : menu un peu plus petit et plus serré que sur tablette */
  .entete nav { gap: 0.9rem; }
  .entete nav a { font-size: 0.66rem; letter-spacing: 0.1em; }
  .entete .nom .marque { font-size: 2.6rem; letter-spacing: 0.2em; text-indent: 0.2em; }
  .entete .nom .sous { font-size: 0.55rem; letter-spacing: 0.75em; text-indent: 0.75em; }
}

/* En dessous de 1000 px, la colonne des coordonnées serait trop étroite pour l'adresse e-mail : tout passe sur une colonne */
@media (max-width: 1000px) {
  .contact-corps { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr; max-width: 42rem; }
}

/* Téléphones : les noms longs de projets (HAUSSMANNIEN...) demandent un peu moins que la taille commune des titres */
@media (max-width: 480px) {
  .projet-tete h1 { font-size: clamp(1.25rem, 5.4vw, 1.5rem); }
}

/* Tablette : colonne du nom plus large, pour que les noms en capitales espacées ne débordent pas */
@media (min-width: 761px) and (max-width: 900px) {
  .projet { grid-template-columns: minmax(0, 1.4fr) minmax(0, 2.2fr); }
}

@media (max-width: 760px) {
  .formulaire .duo { grid-template-columns: 1fr; }
  .formulaire .actions { flex-direction: column; align-items: stretch; gap: 1rem; }
  .bouton { width: 100%; }
  .pied { flex-direction: column; justify-content: center; text-align: center; gap: 0.8rem; padding-bottom: 7rem; }
  .pied > span { margin-left: 0; }
  .son { left: 1rem; bottom: 4.6rem; padding: 0.45rem 0.85rem 0.45rem 0.7rem; font-size: 0.78rem; }
  .hero-centre .marque { letter-spacing: 0.16em; text-indent: 0.16em; }
  .hero-centre .sous { letter-spacing: 0.6em; text-indent: 0.6em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-diapo { transition: none; }
  .son.actif .v1, .son.actif .v2 { animation: none; }
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}


/* Protection des images : pas de glisser-déposer, pas de menu « enregistrer l'image »
   (clic droit sur ordinateur, appui long sur téléphone). Les clics passent au lien qui entoure l'image. */
img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#app img { pointer-events: none; }
#app figure, #app .hero, #app .cadre, #app .apropos-photo { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }