/* ============================================================
   STRASSTOI — les mises en page « avec photo » des parties.

   Chantier « Camillia autonome ». Quand Camillia ajoute une
   photo à une partie qui n'en avait pas, la partie prend l'une
   de ces trois mises en page (voir includes/socle-parties.php
   et parties.php). Sans photo, aucune de ces classes n'est
   posée : la partie reste exactement comme avant.

   Toutes les couleurs passent par les jetons des sections
   (--teinte, --noir, --encre) : la nuit rose suit d'elle-même.
   Le cadrage choisi par Camillia arrive en object-position,
   posé sur chaque image.
   ============================================================ */


/* --- 1. Fond voilé --------------------------------------------
   La photo derrière la partie, sous un voile de la couleur de la
   section : lilas le jour, nuit prune la nuit. Le voile est fixe
   à 0,85 : calculé sur les pires cas (photo noire en clair,
   photo blanche en nuit), le texte reste au-dessus de 11:1 et le
   texte doux au-dessus de 5:1. La photo donne une matière, pas
   un sujet : c'est voulu. */

.a-photo--fond {
  position: relative;
  isolation: isolate;
}
.partie-fond {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--teinte, var(--noir));
}
.partie-fond picture,
.partie-fond img {
  display: block;
  width: 100%;
  height: 100%;
}
.partie-fond img { object-fit: cover; }
.partie-fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--teinte, var(--noir));
  opacity: .85;
}


/* --- 2. Bandeau ------------------------------------------------
   Une photo large en tête de la partie, dans la largeur du
   contenu. Le reste de la partie ne bouge pas. */

.partie-bandeau {
  margin: 0 0 clamp(2.2rem, 5vw, 3.75rem);
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--encre);
}
.partie-bandeau picture,
.partie-bandeau img {
  display: block;
  width: 100%;
  height: 100%;
}
.partie-bandeau img { object-fit: cover; }

@media (max-width: 860px) {
  .partie-bandeau { aspect-ratio: 4 / 3; }
}


/* --- 3. Côte à côte -------------------------------------------
   La photo en portrait à gauche, le texte à droite. Sur
   téléphone, la photo passe au-dessus, moins haute. */

.partie-cote {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.partie-cote__photo {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--encre);
}
.partie-cote__photo picture,
.partie-cote__photo img {
  display: block;
  width: 100%;
  height: 100%;
}
.partie-cote__photo img { object-fit: cover; }
.partie-cote__texte { min-width: 0; }

@media (max-width: 900px) {
  .partie-cote { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .partie-cote__photo { aspect-ratio: 4 / 3; }
}


/* --- 4. Arriver juste au bon endroit ---------------------------
   Les liens « Voir sur le site » de l'intranet ouvrent la page sur
   une partie précise. Les volets de « La formation en détail » ne
   sont pas des sections : on leur donne la même marge que les
   sections (style.css), pour qu'ils ne passent pas sous le menu. */
.fv-volet[id] { scroll-margin-top: 84px; }
.a-fermeture .fv-volet[id] { scroll-margin-top: calc(84px + 2.5rem); }

/* Les deux choix de l'accueil ne sont pas des sections : même
   marge, pour que « Voir sur le site » les montre en entier. */
.voie[id] { scroll-margin-top: 84px; }
.a-fermeture .voie[id] { scroll-margin-top: calc(84px + 2.5rem); }


/* --- 5. La photo de secours de l'accueil ------------------------
   Celle d'origine porte déjà ce réglage dans son HTML ; une photo
   envoyée par Camillia le prend ici. */
.hero__media > img { display: block; }


/* --- 6. « Voir sur le site », depuis l'intranet --------------
   Seulement quand la page est ouverte avec ?voir= (voir.js) :
   l'endroit souligné quelques secondes, et une étiquette qui dit
   ce que c'est. Une visiteuse ne voit jamais ni l'un ni l'autre. */

.voir-ici {
  outline: 3px solid #9A5276;
  outline-offset: -3px;
  animation: voir-ici 6s ease forwards;
}
html[data-theme="sombre"] .voir-ici { outline-color: #D9A7BD; animation-name: voir-ici-nuit; }
@keyframes voir-ici      { 0%, 70% { outline-color: #9A5276; } 100% { outline-color: transparent; } }
@keyframes voir-ici-nuit { 0%, 70% { outline-color: #D9A7BD; } 100% { outline-color: transparent; } }

.voir-etiquette {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1.5rem;
  z-index: 200;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .35rem .35rem 1.1rem;
  background: #9A5276;
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: .85rem;
  letter-spacing: .02em;
  box-shadow: 0 6px 24px rgba(10, 10, 10, .25);
  transition: opacity .4s ease;
}
html[data-theme="sombre"] .voir-etiquette { background: #D9A7BD; color: #0A0A0A; }
.voir-etiquette.est-partie { opacity: 0; }
.voir-etiquette span { overflow-wrap: anywhere; }
.voir-etiquette button {
  flex: none;
  width: 40px; height: 40px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
/* Au-dessus de la barre « Prendre rendez-vous » du téléphone. */
@media (max-width: 860px) {
  .voir-etiquette { bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .voir-ici { animation: none; }
}


/* --- 7. Carte : la photo en haut de la carte du studio ---------
   « Avant de venir » (Prestations). La photo prend toute la largeur
   de la carte, bord à bord, au-dessus du quartier ; le reste de la
   carte ne bouge pas. Les marges reprennent celles de la carte
   (pages.css, studio.css). */
.partie-carte {
  --marge-carte: clamp(1.6rem, 2.6vw, 2.4rem);
  margin: calc(-1 * var(--marge-carte)) calc(-1 * var(--marge-carte)) 1.4rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--encre);
}
.partie-carte picture,
.partie-carte img {
  display: block;
  width: 100%;
  height: 100%;
}
.partie-carte img { object-fit: cover; }