/* Mise en page des pages projet (partagée par toutes les pages fabriquées par build.py) */
/* La page projet est un panneau qui monte à l'ouverture et redescend à la fermeture (×) */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.panneau { animation: monte .55s cubic-bezier(.6, 0, .2, 1) both; background: #fff; }
.vt .panneau { animation: none; } /* navigateur récent : c'est la transition entre pages qui anime */
.panneau.ferme { animation: descend .45s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes monte { from { transform: translateY(100vh); } }
@keyframes descend { to { transform: translateY(100vh); } }
@media (prefers-reduced-motion: reduce) { .panneau, .panneau.ferme { animation: none; } }

/* Premier écran : barre haute, deux diaporamas, barre basse */
.ecran { height: 100vh; min-height: 480px; display: grid; grid-template-rows: auto 1fr auto; }
.barre { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px 20px; font-family: "D-DIN Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-size: clamp(22px, 2vw, 30px); letter-spacing: .02em; }
.barre > :last-child, #c-plans { justify-self: end; } /* compteur des plans à droite (le bouton « Plans » caché est le dernier élément) */
/* nom du projet un peu plus grand, descendu et décalé à droite de la même distance */
.ecran > .barre:first-child > :first-child { margin: 14px 0 0 14px; font-size: 1.2em; }
/* ville et code postal sous le nom, en plus petit */
.barre .lieu { display: block; font-size: .6em; letter-spacing: .03em; margin-top: .2em; }
.fermer { position: relative; width: 28px; height: 28px; background: none; border: 0; cursor: pointer; transition: transform .3s; }
.fermer::before, .fermer::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; background: #111; transform: translate(-50%, -50%) rotate(45deg); }
.fermer::after { transform: translate(-50%, -50%) rotate(-45deg); }
.fermer:hover { transform: rotate(90deg); }

.vues { display: grid; grid-template-columns: 1fr 1fr; height: 63vh; align-self: center; }
.diapo { position: relative; height: 100%; overflow: hidden; cursor: none; }
.diapo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.diapo img.actif { opacity: 1; }
.diapo.plans img { object-fit: contain; object-position: center; padding: 0 2vw; } /* plan centré dans sa colonne ; les plans d'un projet ont la même toile, donc la même échelle et ils se superposent */
.infos-lien { justify-self: center; }
.infos-lien:hover { color: #888; }

/* Infos en dessous */
/* Comme KGDVS : le texte occupe la moitié gauche (sous les photos), la fiche démarre au milieu (sous les plans) */
.infos { display: grid; grid-template-columns: 1fr 1fr; padding: 48px 0 120px; font-size: clamp(17px, 1.3vw, 22px); line-height: 1.38; }
/* titre sur la 1re ligne ; la fiche démarre à la hauteur du 1er paragraphe */
.infos .texte { display: contents; }
.infos .texte > * { grid-column: 1; padding: 0 5vw 0 20px; }
.infos .fiche { grid-column: 2; grid-row: 2; }
.texte .titre { font-size: 1em; line-height: 1.38; letter-spacing: .02em; margin-bottom: .9em; }
.desc p + p { margin-top: .9em; }
.desc .mention { margin-top: 1.6em; font-size: .78em; color: #777; text-align: left; } /* projet réalisé en agence */
.desc p { text-align: justify; hyphens: none; } /* texte justifié : bord droit net, sans couper les mots */
.fiche { align-self: start; display: grid; grid-template-columns: minmax(8em, auto) 1fr; gap: .25em 1.5em; align-items: baseline; padding-right: 20px; }
.fiche dt { font-size: .68em; letter-spacing: .05em; }
.fiche dd { font-size: .85em; } /* valeurs un peu plus petites : moins de retours à la ligne */
/* Cartouche : la fiche est séparée par de fins traits noirs horizontaux uniquement (ni en haut ni en bas du tableau, ni de traits verticaux) */
.infos .fiche { gap: 0; align-items: stretch; padding: 0; margin-right: 20px; }
.fiche dt, .fiche dd { padding: 10px 14px; border-bottom: 1px solid #111; display: flex; align-items: center; }
.fiche dt { padding-left: 0; }
.fiche dt:nth-last-of-type(1), .fiche dd:nth-last-of-type(1) { border-bottom: 0; }
/* 1re ligne (SURFACE…) alignée sur la 1re ligne du paragraphe de gauche */
.fiche dt:first-of-type, .fiche dd:first-of-type { padding-top: 2px; } /* recalé au pixel sur le texte du paragraphe */
/* Trait vertical entre la colonne des photos et celle des plans */
.vues { position: relative; align-self: stretch; height: auto; }
.vues .diapo { align-self: center; height: 63vh; }
.vues::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #111; pointer-events: none; }

.bascule { display: none; font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
@media (max-width: 800px) {
  /* Téléphone, comme KGDVS : un seul diaporama plein écran ; « Plans » bascule des photos aux plans */
  .ecran { height: 100vh; height: 100svh; min-height: 0; }
  .vues { grid-template-columns: 1fr; height: 100%; min-height: 0; align-self: stretch; }
  .diapo img { object-fit: contain; }
  .diapo.plans img { padding: 0 20px; }
  .vues .plans, .voir-plans .vues .diapo:first-child { display: none; }
  .voir-plans .vues .plans { display: block; }
  #c-plans, .voir-plans #c-photos { display: none; }
  .voir-plans #c-plans { display: block; grid-area: 1 / 1; justify-self: start; }
  .bascule { display: block; grid-area: 1 / 3; justify-self: end; }
  .ecran > .barre:last-child { font-size: 16px; } /* compteur, « ↓ Infos », « Plans » plus petits */
  .vues::after { display: none; }
  .vues .diapo { height: 100%; align-self: stretch; } /* une seule image plein cadre : les images sont en position absolue, la zone doit donc avoir une hauteur */
  .infos .fiche { margin: 40px 20px 0; }
  .infos { grid-template-columns: 1fr; }
  .infos .texte > * { padding: 0 20px; }
  .infos .fiche { grid-column: 1; grid-row: auto; padding: 0 20px; margin-top: 40px; }
}
br.tel { display: none; } /* coupure du nom seulement sur téléphone */
@media (max-width: 800px) { br.tel { display: inline; } }