/* --- carrousel chantiers (modele Pierre Gautier, pose le 18/09/2026) --- */
.chantiers-carrousel { position: relative; }
.chantiers-piste {
  display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 4px 16px; margin: 0 -4px; list-style: none;
}
.chantiers-vue {
  flex: 0 0 clamp(228px, 74vw, 330px); scroll-snap-align: center; margin: 0;
  background: var(--card-bg); border: var(--border); border-radius: var(--radius-lg, 22px);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.chantiers-vue img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4;
  object-fit: cover; background: var(--bg-alt);
}
.chantiers-vue figcaption {
  padding: 15px 17px 18px; font-size: .93rem; line-height: 1.5; color: var(--muted);
}
.chantiers-fleche {
  display: none; position: absolute; top: calc(50% - 40px); transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 999px; border: var(--border); cursor: pointer;
  background: var(--card-bg); color: var(--ink); box-shadow: var(--shadow-lg);
  font-size: 1.5rem; line-height: 1; align-items: center; justify-content: center; z-index: 3;
}
.chantiers-fleche:disabled { opacity: .35; cursor: default; }
.chantiers-fleche.prev { left: -10px; }
.chantiers-fleche.next { right: -10px; }
@media (min-width: 900px) { .chantiers-fleche { display: flex; } }
.chantiers-points { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.chantiers-points button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--muted); opacity: .3; transition: opacity .2s, width .2s;
}
.chantiers-points button[aria-current="true"] { opacity: 1; width: 22px; background: var(--accent); }
.chantiers-pont {
  max-width: 640px; margin: 30px auto 0; text-align: center;
  font-family: var(--font-display); font-weight: var(--weight-display, 700);
  font-size: clamp(1.08rem, 2.2vw, 1.3rem); line-height: 1.4; color: var(--ink);
}
@media (prefers-reduced-motion: reduce) { .chantiers-piste { scroll-behavior: auto; } }

/* --- ouverture d'une photo en grand (MDO Concept, 18/09/2026) --- */
.chantiers-vue .chantiers-zoom {
  /* le lien ne doit rien ajouter au dessin de la vignette : ni soulignement, ni couleur */
  display: block; position: relative; cursor: zoom-in;
  text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent;
}
.chantiers-vue .chantiers-zoom:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* La loupe n'est qu'un indice : aria-hidden cote balisage, et pointer-events:none pour
   qu'elle n'avale jamais le clic. */
.chantiers-zoom-loupe {
  position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: rgba(17, 17, 17, .58); color: #fff; pointer-events: none;
  opacity: .9; transition: opacity .2s, transform .2s;
}
.chantiers-zoom:hover .chantiers-zoom-loupe { opacity: 1; transform: scale(1.06); }

dialog.photo-plein {
  position: fixed; inset: 0;
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  /* Le fond sombre est porte par le dialog ET par son ::backdrop, volontairement a la meme
     valeur : un dialog transparent laisserait la photo sur le fond clair de la page si le
     backdrop n'est pas peint. */
  background: rgba(12, 12, 14, .95); color: #fff;
}
@supports (height: 100dvh) {
  /* sur telephone, 100vh vaut l'ecran SANS la barre d'URL : la photo deborderait du bas */
  dialog.photo-plein { height: 100dvh; max-height: 100dvh; }
}
dialog.photo-plein::backdrop { background: rgba(12, 12, 14, .95); }
dialog.photo-plein:not([open]) { display: none; }
dialog.photo-plein[open] { display: flex; }

.photo-plein-fig {
  display: grid; grid-template-rows: 1fr auto; gap: 12px;
  width: 100%; height: 100%; margin: 0; box-sizing: border-box;
  padding: clamp(52px, 7vw, 66px) clamp(10px, 2.2vw, 24px) clamp(14px, 2.4vw, 24px);
}
.photo-plein-fig img {
  /* min-height:0 est OBLIGATOIRE : sans lui, une rangee `1fr` ne descend jamais sous la
     hauteur intrinseque de l'image, et la photo deborde par le bas sur telephone. */
  min-height: 0; min-width: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  transition: opacity .18s ease;
}
dialog.photo-plein.chargement img { opacity: .4; }
.photo-plein-bas { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.photo-plein-bas figcaption {
  max-width: 62ch; margin: 0; text-align: center;
  font-size: clamp(.9rem, 2.3vw, 1rem); line-height: 1.5; color: rgba(255, 255, 255, .9);
}
.photo-plein-rang {
  margin: 0; font-size: .8rem; letter-spacing: .05em; color: rgba(255, 255, 255, .6);
}
.photo-plein-btn {
  display: flex; align-items: center; justify-content: center; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .15); transition: background .2s, opacity .2s;
}
.photo-plein-btn:hover { background: rgba(255, 255, 255, .28); }
.photo-plein-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.photo-plein-btn:disabled { opacity: .25; cursor: default; }
.photo-plein-fermer {
  position: absolute; z-index: 2; top: 10px; right: 10px;
  width: 44px; height: 44px; font-size: 1.6rem; line-height: 1;
}
/* Au-dessus de 620 px, les deux fleches sont posees SUR la photo, a gauche et a droite ;
   `display:contents` sur leur conteneur le fait disparaitre de la mise en page sans toucher
   aux boutons. Sous 620 px elles repassent dans le flux, sous la photo. */
.photo-plein-nav { display: contents; }
.photo-plein-prec, .photo-plein-suiv {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; font-size: 1.8rem; line-height: 1;
}
.photo-plein-prec { left: 10px; }
.photo-plein-suiv { right: 10px; }
@media (min-width: 900px) {
  .photo-plein-prec, .photo-plein-suiv { width: 54px; height: 54px; }
  .photo-plein-prec { left: 22px; }
  .photo-plein-suiv { right: 22px; }
}
@media (max-width: 619px) {
  /* Sur telephone, une fleche posee sur la photo couvre le sujet et tombe sous le pouce au
     moment du balayage. Le balayage reste le geste principal, les fleches passent dessous. */
  .photo-plein-nav { display: flex; justify-content: center; gap: 20px; margin-top: 4px; }
  .photo-plein-prec, .photo-plein-suiv { position: static; transform: none; width: 48px; height: 48px; }
}
/* Le corps ne defile plus quand la fenetre est ouverte. La compensation de largeur evite que
   toute la page saute de cote au moment ou la barre de defilement disparait. */
html.photo-plein-ouverte { overflow: hidden; padding-right: var(--photo-plein-barre, 0px); }
@media (prefers-reduced-motion: reduce) {
  .photo-plein-fig img, .photo-plein-btn, .chantiers-zoom-loupe { transition: none; }
}