/* 1161 Studio — direction arretee par Zakaria le 2026-10-13 :
   fond #0D141A, accent #357DF9, Montserrat seule, images pleine largeur
   bord a bord.

   Refonte « epure » du 2026-10-13, reference hot-walls.ru : une seule graisse
   de titre (500), trois tailles de texte, pas de filet ni de cadre, pas de
   capitales espacees, des boutons en pastille, beaucoup de vide, et des
   transitions lentes a l'opacite. Rien ne decore : les images portent tout. */

:root {
  --nuit: #0D141A;
  --nuit-haut: #121b23;      /* surfaces posees sur le fond */
  --encre: #e6ebf0;          /* texte sur fond sombre, legerement casse */
  --encre-douce: #b3bdc7;
  --encre-faible: #7d8a97;
  --accent: #357DF9;
  --accent-clair: #6aa0fb;
  --verre: rgba(230, 235, 240, .08);   /* pastilles et champs : un voile, pas un bord */
  --verre-fort: rgba(230, 235, 240, .14);
  --filet: rgba(230, 235, 240, .1);    /* ne sert plus qu'au pied de page */
  --titre: Montserrat, system-ui, -apple-system, sans-serif;
  --corps: Montserrat, system-ui, -apple-system, sans-serif;
  --libelle: Montserrat, system-ui, -apple-system, sans-serif;
  --g: clamp(20px, 4vw, 56px);          /* gouttiere de page */
  --colonne: 62ch;                      /* largeur de lecture */
  --ease: cubic-bezier(.25, .6, .2, 1);
  --lent: 1.2s;
  --vide: clamp(88px, 15vh, 200px);     /* respiration entre les sections */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--encre);
  font-family: var(--corps);
  font-size: clamp(15px, .3vw + 14px, 16px);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;         /* les bandeaux debordent de 100vw au resize */
}

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

/* Visualisation seule (Zakaria, 2026-10-13) : pas de glisser-deposer, pas de
   selection, pas de menu contextuel (celui-ci est bloque dans site.js).
   ⚠️ Ce n'est PAS une protection : une image servie par un site est toujours
   recuperable (outils de developpement, cache, capture d'ecran, requete
   directe sur /img/…). Cela ecarte le geste le plus courant, rien de plus.
   Une vraie protection demanderait un filigrane incruste. */
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent-clair);
  outline-offset: 3px;
}

/* Une seule graisse de titre. La hierarchie se fait par la taille et le
   vide autour, pas par le poids. */
h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.15rem; letter-spacing: -.01em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- trames */

.enveloppe { width: 100%; max-width: 1560px; margin: 0 auto; padding: 0 var(--g); }
.colonne { max-width: var(--colonne); }
.section { padding: var(--vide) 0; }
.section--serre { padding: clamp(64px, 10vh, 140px) 0; }
.filet-haut { border-top: 0; }           /* plus de filets entre les sections */

/* Bandeau bord a bord : sort de l'enveloppe sans provoquer de scroll
   horizontal, y compris quand une barre de defilement verticale est la. */
.pleine-largeur {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Titre de section centre, comme sur hot-walls.ru : chaque bloc s'ouvre sur
   son nom, seul et au milieu, puis vient le contenu. */
.titre-section {
  text-align: center;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  margin-bottom: clamp(48px, 8vh, 96px);
}
.apres-section {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 8vh, 96px);
}

/* Tete de page interieure : titre seul, puis une ligne de texte. */
.tete-page { padding-top: clamp(130px, 22vh, 240px); }
.tete-page .colonne { margin-top: 1.2rem; color: var(--encre-douce); }

/* Petit texte de fait ou d'interface : gris, bas de casse, graisse legere. */
.mention, .fait {
  font-size: .9rem;
  font-weight: 300;
  color: var(--encre-faible);
}
.sur-titre { font-size: .9rem; font-weight: 300; color: var(--encre-faible); margin: 0 0 .8rem; }

/* ---------------------------------------------------------------- en-tete */

.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--g);
  transition: background var(--lent) var(--ease), backdrop-filter var(--lent) var(--ease);
}
.entete[data-pose="oui"] {
  background: rgba(13, 20, 26, .6);
  backdrop-filter: blur(16px);
}
/* Logo agrandi x1.75 (Zakaria, 2026-10-15 : « x1.5 a x2 »). */
.entete__marque svg { display: block; height: 46px; width: auto; color: var(--encre); }
@media (max-width: 560px) { .entete__marque svg { height: 36px; } }
.entete__marque {
  font-family: var(--titre);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: -.01em;
}
.entete__marque span { color: var(--accent); }
.menu { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.menu a {
  font-family: var(--titre);
  font-size: .82rem;
  font-weight: 500;
  color: var(--encre-douce);
  padding: 6px 0;
  transition: color .5s var(--ease);
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--encre); }
/* Le dernier lien est une pastille, comme le « Написать нам » de hot-walls. */
.menu a.menu__cta {
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 9px 18px;
  transition: background .5s var(--ease);
}
.menu a.menu__cta:hover, .menu a.menu__cta[aria-current="page"] { background: var(--accent-clair); color: #fff; }

/* Bouton du menu mobile : trois traits, sans cadre. */
.menu__bouton {
  display: none;
  position: relative;
  z-index: 60;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--encre);
}
.menu__bouton span {
  position: absolute;
  left: 10px; right: 10px; top: 50%;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-5px);
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.menu__bouton span::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 10px;
  height: 1.5px;
  background: currentColor;
  transition: transform .5s var(--ease);
}
.menu__bouton[aria-expanded="true"] span { transform: translateY(0) rotate(45deg); }
.menu__bouton[aria-expanded="true"] span::before { transform: translateY(-10px) rotate(-90deg); }
@media (max-width: 860px) {
  .menu__bouton { display: block; }
  .menu {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    background: rgba(13, 20, 26, .97);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s var(--ease), visibility 0s linear .6s;
  }
  .menu[data-ouvert="oui"] { opacity: 1; visibility: visible; transition-delay: 0s; }
  .menu a { font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; }
  .menu a.menu__cta { font-size: 1rem; padding: 12px 24px; margin-top: 10px; }
}

/* ---------------------------------------------------------------- bandeau d'accueil */

/* Carrousel plein ecran, titre centre. Parti de hot-walls.ru retenu par
   Zakaria le 2026-10-13. Les diapos sont superposees et on ne fait varier que
   l'opacite : pas de deplacement horizontal, donc pas de reflow et rien qui
   deborde en largeur. */
.bandeau {
  position: relative;
  min-height: min(100svh, 1100px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #090f14;
}
.bandeau__diapos { position: absolute; inset: 0; }
.bandeau__diapo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s var(--ease);
}
.bandeau__diapo[data-actif="oui"] { opacity: 1; }
.bandeau__image { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .bandeau__image { object-position: 55% center; } }

/* Voile de lisibilite leger : l'image reste l'image. Le titre est en graisse
   moyenne et en grand, il n'a pas besoin qu'on assombrisse la vue. */
/* Filtre noir fume, demande par Zakaria le 2026-10-13 : le voile precedent
   (~.15) laissait le titre se perdre dans les rendus clairs. On monte a .42 au
   centre, la ou le titre se pose, et on tient les deux bords. */
.bandeau::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(4, 7, 10, .66) 0%,
                    rgba(4, 7, 10, .54) 48%, rgba(4, 7, 10, .64) 100%),
    linear-gradient(to top, rgba(4, 7, 10, .82) 0%, rgba(4, 7, 10, .18) 40%);
}

.bandeau__texte {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  padding: 0 var(--g);
  text-align: center;
}
.bandeau h1 {
  font-size: clamp(2.3rem, 5.4vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -.035em;
  color: #e9edf1;
}

/* L'accroche et le bouton tiennent dans une pastille au bas du bandeau,
   comme sur hot-walls : le titre reste seul au milieu de l'image. */
.bandeau__pastille {
  position: absolute;
  z-index: 3;
  bottom: clamp(56px, 10vh, 96px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: min(92vw, 640px);
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: rgba(13, 20, 26, .42);
  backdrop-filter: blur(14px);
}
.bandeau__accroche {
  font-size: .78rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--encre-douce);
  margin: 0;
  text-align: left;
}
.bandeau__pastille .bouton { flex: none; }
@media (max-width: 700px) {
  .bandeau__pastille {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 18px 18px 12px;
    border-radius: 28px;
    width: calc(100vw - 2 * var(--g));
    bottom: clamp(60px, 9vh, 80px);
  }
  .bandeau__accroche { text-align: center; }
  .bandeau__pastille .bouton { justify-content: center; }
}

.bandeau__puces {
  position: absolute;
  z-index: 3;
  bottom: clamp(20px, 3.4vh, 36px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.bandeau__puce {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(230, 235, 240, .32);
  cursor: pointer;
  transition: background .6s var(--ease), transform .6s var(--ease);
}
.bandeau__puce[aria-current="true"] { background: var(--encre); transform: scale(1.3); }

/* Fleches : pastilles rondes en verre, sans bord. */
.bandeau__pas {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(13, 20, 26, .35);
  backdrop-filter: blur(10px);
  color: var(--encre);
  cursor: pointer;
  transition: background .5s var(--ease);
}
.bandeau__pas svg { width: 14px; height: 14px; display: block; }
.bandeau__pas:hover { background: rgba(13, 20, 26, .6); }
.bandeau__pas--arriere { left: clamp(12px, 2vw, 32px); }
.bandeau__pas--avant { right: clamp(12px, 2vw, 32px); }
@media (max-width: 700px) { .bandeau__pas { display: none; } }

/* ---------------------------------------------------------------- chiffres */

/* Les chiffres remplacent le paragraphe de presentation du cabinet. Ils
   figuraient deja sur l'ancien site ; Zakaria les a reactualises le
   2026-10-13. Petits, comme sur hot-walls : un fait, pas une affiche. */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: clamp(24px, 4vw, 56px) clamp(16px, 3vw, 40px);
  padding: 0 0 clamp(40px, 6vh, 64px);
}
.chiffre { display: flex; flex-direction: column; gap: .25rem; }
.chiffre__valeur {
  font-family: var(--titre);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.02em;
}
.chiffre__libelle {
  font-size: .85rem;
  font-weight: 300;
  color: var(--encre-faible);
}

/* La photo d'equipe est posee dans un cadre a la gouttiere, pas bord a bord :
   c'est l'image du cabinet, pas une vue de projet. */
.equipe { position: relative; padding: var(--vide) 0; }
.equipe__cadre { position: relative; padding: 0 var(--g); }
.equipe__image { position: relative; overflow: hidden; }
/* Photo d'equipe en noir et blanc (Zakaria, 2026-10-15), comme chez
   hot-walls : elle cesse de concurrencer les rendus par la couleur. */
.equipe__image img {
  width: 100%;
  max-height: 82svh;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}
.equipe__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 20, 26, .22);
}
.equipe__titre {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.equipe__titre h2 { font-size: clamp(2rem, 4vw, 3.4rem); color: #e9edf1; }

/* ---------------------------------------------------------------- tuiles de pole */

.tuiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
@media (max-width: 760px) { .tuiles { grid-template-columns: 1fr; } }
/* Tuile de categorie, relevee sur hot-walls.ru (capture envoyee par Zakaria
   le 2026-10-13) : le titre en haut a gauche sur l'image, un bouton « Voir le
   portfolio » en pastille de verre en bas a gauche, et un voile leger aux
   deux bords seulement, la ou le texte se pose. */
.tuile { position: relative; display: block; overflow: hidden; }
.tuile__cadre { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tuile__cadre img { width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--ease); }
.tuile:hover .tuile__cadre img { transform: scale(1.04); }
.tuile__cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(9, 15, 20, .62) 0%, rgba(9, 15, 20, .2) 30%, rgba(9, 15, 20, 0) 48%),
    linear-gradient(to top, rgba(9, 15, 20, .38) 0%, rgba(9, 15, 20, 0) 36%);
}
.tuile__texte {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  padding: clamp(18px, 2.2vw, 30px);
}
.tuile__texte h3 { font-size: clamp(1.25rem, 1.7vw, 1.75rem); font-weight: 500; letter-spacing: -.02em; }
.tuile__texte p {
  font-size: .85rem;
  font-weight: 300;
  color: var(--encre-douce);
  margin: .35rem 0 0;
}
.tuile__bouton {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 2.2vw, 30px);
  bottom: clamp(18px, 2.2vw, 30px);
  display: inline-flex;
  align-items: center;
  font-family: var(--titre);
  font-size: .85rem;
  font-weight: 500;
  line-height: 1;
  padding: 14px 24px;
  border-radius: 999px;
  color: var(--encre);
  background: rgba(13, 20, 26, .42);
  backdrop-filter: blur(14px);
  transition: background .5s var(--ease);
}
.tuile:hover .tuile__bouton { background: rgba(13, 20, 26, .62); }

/* ---------------------------------------------------------------- boutons */

/* Pastilles, sans bord ni fleche. Pleine pour l'action principale, en verre
   pour les autres. */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titre);
  font-size: .85rem;
  font-weight: 500;
  line-height: 1;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background .5s var(--ease), color .5s var(--ease);
}
.bouton:hover { background: var(--accent-clair); }
.bouton--creux { background: var(--verre); color: var(--encre); }
.bouton--creux:hover { background: var(--verre-fort); }

/* ---------------------------------------------------------------- grille de projets */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(40px, 6vh, 72px) clamp(14px, 1.6vw, 26px);
}
/* Deux colonnes, bord a bord, sans gouttiere entre les images : la liste
   de hot-walls.ru. Les legendes sont posees sous l'image, decalees d'une
   marge, et les rangees sont separees par beaucoup de vide. */
.grille--deux {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(56px, 10vh, 140px) 0;
}
@media (max-width: 760px) { .grille--deux { grid-template-columns: 1fr; gap: clamp(48px, 8vh, 80px); } }

.fiche { position: relative; display: block; }
.fiche__cadre {
  position: relative;
  overflow: hidden;
  background: var(--nuit-haut);
  aspect-ratio: 4 / 3;        /* cadrage constant : la grille se lit en systeme */
}
.fiche__cadre img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2s var(--ease);
}
.fiche:hover .fiche__cadre img { transform: scale(1.03); }
/* Plus de voile sur l'image : la legende est posee en dessous. */
.fiche__nom {
  font-family: var(--titre);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.2vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 1.3rem 0 0;
}
.fiche__meta {
  font-size: .95rem;
  font-weight: 300;
  color: var(--encre-faible);
  margin: .35rem 0 0;
}
.grille--deux .fiche__nom, .grille--deux .fiche__meta { padding: 0 clamp(18px, 2.8vw, 40px); }
.grille--deux .fiche__nom { margin-top: 1.6rem; }

/* Filtres de /projets : des pastilles en verre, la courante est pleine.
   Depuis le 2026-10-13 ce sont des liens vers les pages de categorie
   (/projets/villas/…), plus des boutons JavaScript : la liste est paginee et
   un filtre client ne survivrait pas au changement de page. */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(32px, 6vh, 64px); }
.filtre {
  display: inline-block;
  font-family: var(--titre);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--encre-douce);
  background: var(--verre);
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: color .5s var(--ease), background .5s var(--ease);
}
.filtre:hover { color: var(--encre); background: var(--verre-fort); }
.filtre[aria-pressed="true"], .filtre[aria-current="page"] { color: #fff; background: var(--accent); }
.fiche[hidden] { display: none; }

/* Pagination de /projets, relevee sur hot-walls.ru : des ronds de 36 px en
   Montserrat 14 px, gris, la page courante cerclee d'un trait fin, une fleche
   vers la suivante, le tout centre sous la grille. C'est le seul cercle et
   la seule fleche du site : Zakaria a envoye cette capture comme reference. */
.pages {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: clamp(56px, 10vh, 120px);
}
.pages__num, .pages__suite {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: var(--titre);
  font-size: .875rem;
  font-weight: 400;
  color: var(--encre-faible);
  transition: color .5s var(--ease), background .5s var(--ease);
}
a.pages__num:hover, .pages__suite:hover { color: var(--encre); background: var(--verre); }
.pages__num[aria-current="page"] { color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre-douce); }
.pages__suite svg { width: 16px; height: 16px; display: block; }

/* ---------------------------------------------------------------- page projet */

/* Mise en page reprise de hot-walls.ru : le titre en haut a gauche, une
   ligne de faits, puis les vues empilees sur toute la largeur du cadre,
   separees par beaucoup de vide. La page s'ouvre sur l'image. */

.cadre { width: 100%; max-width: 1700px; margin: 0 auto; padding: 0 var(--g); }

.projet__tete { padding: clamp(130px, 22vh, 240px) 0 clamp(32px, 5vh, 56px); }
.projet__ligne {
  display: flex;
  flex-wrap: wrap;
  gap: .4em 2em;
  font-size: .95rem;
  font-weight: 300;
  color: var(--encre-faible);
  margin-top: 1rem;
}

.projet__vues { padding-bottom: var(--vide); }
.vue { margin: 0 0 clamp(48px, 9vh, 140px); }
.vue:last-child { margin-bottom: 0; }
/* Une vue en portrait ne s'etire pas sur toute la largeur : elle est posee
   au milieu, plus etroite, comme sur hot-walls. */
.vue--portrait .vue__zoom { max-width: 66%; margin: 0 auto; }
@media (max-width: 760px) { .vue--portrait .vue__zoom { max-width: 100%; } }

/* Le zoom est un bouton : atteignable au clavier et annonce comme actionnable.
   On lui retire l'apparence de bouton, pas son comportement. */
.vue__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}
.vue__zoom img { width: 100%; }

/* Bloc de texte d'un projet, entre deux vues. Reproche de Zakaria le
   2026-10-13 : « espacement pas proportionne avec la taille du texte ». Il
   etait colle a la vue du dessus (8 a 24 px) et loin de celle du dessous, avec
   un chapeau plus grand mais plus serre que le corps. Desormais : la meme
   respiration au-dessus et au-dessous que celle qui separe deux vues, un
   chapeau a 1.5 rem avec un interligne de 1.45, un corps a 1.05 rem avec un
   interligne de 1.8, et des paragraphes separes d'un vrai blanc (1.6 em).
   La colonne est un peu plus etroite (58 ch) : a 1.05 rem elle tient toujours
   dans les 60-70 caracteres par ligne qui se lisent sans effort. */
.projet__texte {
  --colonne: 58ch;
  padding: clamp(8px, 3vh, 40px) 0 clamp(48px, 9vh, 140px);
}
.projet__texte p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--encre-douce);
  margin: 0 0 1.6em;
}
.projet__texte p:last-child { margin-bottom: 0; }
.projet__texte .projet__intro {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--encre);
  margin-bottom: 1.1em;
}
@media (max-width: 760px) {
  .projet__texte { padding: 0 0 clamp(48px, 8vh, 80px); }
  .projet__texte p { font-size: 1rem; line-height: 1.75; }
}

/* Projet precedent / suivant : deux liens sobres, le libelle au-dessus. */
.projet__voisins { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.projet__voisin { display: grid; gap: .25rem; max-width: 46%; }
.projet__voisin--suivant { text-align: right; margin-left: auto; }
.projet__voisin strong { font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; transition: color .5s var(--ease); }
.projet__voisin:hover strong { color: var(--accent-clair); }

/* ---------------------------------------------------------------- visionneuse */

.loupe {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 10, 13, .96);
  padding: clamp(12px, 3vw, 44px);
}
.loupe[data-ouvert="oui"] { display: flex; }
.loupe img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.loupe__fermer, .loupe__pas {
  position: absolute;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--verre);
  border: 0;
  border-radius: 50%;
  color: var(--encre);
  font-family: var(--libelle);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .5s var(--ease);
}
.loupe__fermer:hover, .loupe__pas:hover { background: var(--verre-fort); }
.loupe__fermer { top: clamp(12px, 2vw, 26px); right: clamp(12px, 2vw, 26px); }
.loupe__pas--avant { right: clamp(12px, 2vw, 26px); top: 50%; transform: translateY(-50%); }
.loupe__pas--arriere { left: clamp(12px, 2vw, 26px); top: 50%; transform: translateY(-50%); }
.loupe__compte {
  position: absolute;
  bottom: clamp(12px, 2vw, 26px);
  left: 50%;
  transform: translateX(-50%);
  font-size: .85rem;
  font-weight: 300;
  color: var(--encre-faible);
}
@media (max-width: 700px) {
  .loupe__pas { display: none; }   /* sur telephone on balaie, voir site.js */
}

/* ---------------------------------------------------------------- poles */

/* Quatre poles sur cinq n'ont pas de texte : ils sont portes par leurs
   projets. Sur /services/, chaque pole ouvre sur un bandeau bord a bord (la
   vue de garde d'un de ses projets) qui porte le titre et le compte ; le
   texte publie et les autres projets suivent dans l'enveloppe. */
.pole { padding: 0 0 var(--vide); }
.pole__chapeau { margin-top: 1.2rem; color: var(--encre-douce); }

.pole__bandeau {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: clamp(360px, 70svh, 820px);
  overflow: hidden;
  background: var(--nuit-haut);
}
@media (orientation: portrait) { .pole__bandeau { height: clamp(320px, 56svh, 820px); } }
.pole__bandeau picture, .pole__bandeau img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pole__bandeau img { object-fit: cover; }
/* Voile bas seulement, la ou le titre se pose. */
.pole__bandeau::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 20, 26, .82) 0%, rgba(13, 20, 26, .45) 28%,
                              rgba(13, 20, 26, 0) 58%);
}
.pole__bandeau--texte {
  height: auto;
  min-height: clamp(200px, 30svh, 360px);
  background: none;
}
.pole__bandeau--texte::after { display: none; }
.pole__titre {
  position: relative;
  z-index: 2;
  padding-top: clamp(28px, 5vh, 56px);
  padding-bottom: clamp(32px, 6vh, 64px);
}
.pole__titre h2, .pole__titre h1 {
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  max-width: 16ch;
}
/* Page de categorie /projets/<pole>/ : les pastilles de poles sous le
   chapeau, puis la grille. */
.pole--page .pole__filtres { margin-top: clamp(32px, 5vh, 56px); }
.pole--page .pole__filtres .filtres { margin-bottom: 1.6rem; }
.pole__meta {
  margin: .8rem 0 0;
  font-size: .95rem;
  font-weight: 300;
  color: var(--encre-douce);
}
.pole__meta span + span::before { content: ", "; }
/* Le projet qui prete son visuel au bandeau, nomme et clicable, en
   filigrane dans l'angle. */
.pole__source {
  position: absolute;
  z-index: 3;
  bottom: clamp(16px, 2.6vh, 28px);
  right: var(--g);
  font-size: .78rem;
  font-weight: 300;
  color: var(--encre-douce);
  transition: color .5s var(--ease);
}
.pole__source:hover { color: var(--encre); }
.pole__corps { padding-top: clamp(40px, 7vh, 80px); }
.pole__projets { margin-top: clamp(48px, 8vh, 96px); }
.pole__suite { margin-top: clamp(40px, 7vh, 72px); }

/* ---------------------------------------------------------------- contact */

.formulaire { display: grid; gap: 16px; max-width: 46rem; }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.champ { display: grid; gap: 8px; }
.champ label {
  font-size: .85rem;
  font-weight: 300;
  color: var(--encre-faible);
  padding-left: 4px;
}
.champ input, .champ textarea, .champ select {
  font: inherit;
  color: var(--encre);
  background: var(--verre);
  border: 0;
  border-radius: 14px;
  padding: 14px 18px;
  width: 100%;
  transition: background .5s var(--ease);
}
.champ input:hover, .champ textarea:hover, .champ select:hover { background: var(--verre-fort); }
.champ textarea { min-height: 160px; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--encre-faible); font-weight: 300; }
.contact__lien { color: var(--encre); border-bottom: 1px solid var(--encre-faible); transition: border-color .5s var(--ease); }
.contact__lien:hover { border-color: var(--encre); }

/* ---------------------------------------------------------------- bande contact */

.bande { text-align: center; }
.bande .colonne { margin: 0 auto; }
.bande .bouton { margin-top: 2rem; }

/* ---------------------------------------------------------------- pied */

/* Repris de hot-walls.ru (Zakaria, 2026-10-13) : aucun intitule de colonne,
   l'information fait le titre. La ville, le telephone et l'e-mail s'ecrivent
   en grand ; ce qui les precise vient dessous, en petit et en gris. Aucun
   filet, conformement au reste du site. */
.pied { padding: clamp(80px, 12vh, 160px) 0 clamp(32px, 5vh, 56px); }
.pied__trame {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(32px, 4vw, 56px);
}
@media (max-width: 1000px) { .pied__trame { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pied__trame { grid-template-columns: 1fr; } }

.pied__bloc { display: flex; flex-direction: column; align-items: flex-start; }

/* Le secondaire d'abord, la ligne forte ensuite : a specificite egale c'est la
   derniere regle qui gagne, et « .pied p » ecrasait « .pied__fort ». */
.pied p {
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--encre-faible);
  margin: 0 0 .9rem;
}
.pied p:last-child { margin-bottom: 0; }
.pied a { color: var(--encre-faible); transition: color .3s var(--ease); }
.pied a:hover { color: var(--encre); }

.pied p.pied__fort {
  font-family: var(--titre);
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--encre);
  margin: 0 0 1.1rem;
}
.pied .pied__fort a { color: var(--encre); }
.pied .pied__fort a:hover { color: var(--accent-clair); }

/* Le bouton garde sa couleur propre : « .pied a » le decolorait. */
.pied a.bouton { color: #fff; margin-top: .2rem; }
.pied a.bouton:hover { color: #fff; }

/* Icones de reseaux : surface de clic de 40 px, bien au-dessus du minimum
   tactile, et contraste au survol plutot qu'une couleur de marque. */
.pied__reseaux { display: flex; flex-wrap: wrap; gap: 14px; margin-top: .2rem; }
.pied__reseaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--encre-faible);
  transition: color .3s var(--ease);
}
.pied__reseaux a:hover { color: var(--encre); }
.pied__reseaux svg { width: 21px; height: 21px; display: block; }

.pied__bas {
  margin-top: clamp(56px, 9vh, 104px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: .9rem;
  font-weight: 300;
  color: var(--encre-faible);
}

/* ---------------------------------------------------------------- animation */

/* Apparition au defilement, a l'opacite surtout : lente et discrete. Le JS
   pose data-vu="oui" ; sans JS, la regle ci-dessous n'est jamais appliquee
   et tout reste visible. */
.js [data-anime] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
.js [data-anime][data-vu="oui"] { opacity: 1; transform: none; }
/* Bandeau de pole et vues de projet : le bloc reste en place, l'image se
   revele lentement. */
.js [data-anime="bandeau"] { opacity: 1; transform: none; }
.js [data-anime="bandeau"] img { opacity: 0; transform: scale(1.03); transition: opacity 1.6s var(--ease), transform 2.4s var(--ease); }
.js [data-anime="bandeau"][data-vu="oui"] img { opacity: 1; transform: none; }

/* Bandeau d'accueil : le titre puis la pastille, en fondu. */
.js .bandeau h1 { opacity: 0; animation: fondu 1.8s var(--ease) .3s forwards; }
.js .bandeau__pastille {
  opacity: 0;
  transform: translate(-50%, 10px);
  animation: fondu-pastille 1.8s var(--ease) .9s forwards;
}
@keyframes fondu { to { opacity: 1; } }
@keyframes fondu-pastille { to { opacity: 1; transform: translate(-50%, 0); } }

@media (prefers-reduced-motion: reduce) {
  .js [data-anime], .js .bandeau h1, .js .bandeau__pastille {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .js .bandeau__pastille { transform: translateX(-50%) !important; }
  .bandeau__diapo { transition: none; }
  .fiche:hover .fiche__cadre img, .tuile:hover .tuile__cadre img { transform: none; }
  .js [data-anime="bandeau"] img { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- impression */

@media print {
  .entete, .menu, .pied__trame, .bouton { display: none; }
  body { background: #fff; color: #000; }
}