/* =========================================================
   remanance-style.css — particularités de la page Rémanence
   Dépend de global.css (variables, header, footer, pull-quote…)
   ========================================================= */

.simple-section p{
  max-width: 62ch;
  margin: 0 0 1.2rem;
}
.simple-section p:last-child{ margin-bottom: 0; }

/* Première section — fond sombre, visuel à gauche */
.demarche-dark{
  background: var(--ink-strong);
}
.demarche-dark .eyebrow{ color: var(--ink-strong-soft); }
.demarche-dark .section-title{ color: var(--ink-strong-text); }
.demarche-dark p{ color: var(--ink-strong-soft); }

/* ---------------------------------------------------------
   Mosaïque de visuels — remplace le cadre unique par un bloc
   pouvant accueillir plusieurs images, horizontales ou
   verticales. Ajouter/retirer des .frame--h / .frame--v
   pour composer différentes mises en page.
   --------------------------------------------------------- */

.wrap.contrast-grid {
	grid-template-columns:1fr 1fr;
}

p.heightlight {
 font-style:italic;
 padding:0 1rem;
 border-style:solid;
 border-color:rgb(200, 15, 5);
border-width: 0 1px;
}

.container {  
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	gap: 0px 0px;
	grid-auto-flow: row dense;
	align-items: center;
	grid-template-areas:
    "g1 g1 g2 g2"
    "g1 g1 g3 g4"
    "g5 g6 g6 g4"
    "g5 g6 g6 g4";
	align-self: stretch;
}

.container .box { position: relative; width:100%; height:100%; overflow:hidden; }
.container .box img { 
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%; object-fit: cover;
 }
 
.containerTxt { padding: 2rem 0 3rem 0; }
.containerTxt p { 
	text-align:justify; line-height:1rem; 
 }

.g1 {
  grid-area: g1;
}

.g2 {
  grid-area: g2;
}

.g3 {
  grid-area: g3;
}

.g5 {
  grid-area: g5;
}

.g6 {
  grid-area: g6;
}

.g4 {
  grid-area: g4;
}

.diptych-grid figure.diptych figcaption {
	font-family:var(--font-display); font-style:italic; font-size:1.1rem;
}

.diptych-grid figure.diptych figcaption:after {
	content:""; margin:0 0 .5rem 0; padding:0;
	width:50svw; height:1px; position:absolute; background:var(--rule); left:50%; top:0; translate: -50% 0;
}

/* la grille .contrast-grid s'empile en une seule colonne dès 980px
   (texte puis mosaïque l'un sous l'autre) : il n'y a alors plus de
   hauteur de texte à épouser, donc on donne un plancher généreux
   plutôt qu'un ratio carré, pour garder un format élancé */
@media (max-width: 980px){
	.visual-mosaic{
		height: auto;
		min-height: 70vh;
	}
	  
	.simple-section p {
		max-width: none;
	}
	.wrap.contrast-grid {
		grid-template-rows:.7fr 1.3fr;
		grid-template-columns: 1fr;
	}
	
	.container {  display: grid;
	  grid-template-columns: 1fr 1fr 1fr 1fr;
	  grid-template-rows: 1fr 1fr;
	  gap: 0px 0px;
	  grid-auto-flow: row;
	  grid-template-areas:
		"g1 g1 g2 g3"
		"g1 g1 g4 g3";
	}

	.g1 {
	  grid-area: g1;
	  width: 100%;
	  height: 100%;
	}

	.g2 {
	  grid-area: g2;
	  width: 100%;
	  height: 100%;
	}

	.g3 {
	  grid-area: g3;
	  width: 100%;
	  height: 100%;
	}

	.g4 {
	  grid-area: g4;
	  width: 100%;
	  height: 100%;
	}

}

@media (max-width: 560px){
  .visual-mosaic{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    min-height: 60vh;
  }
  /* la grille change de forme : les zones fixes n'ont plus de sens,
     on repasse en placement automatique */
  .visual-mosaic [class*="area-"]{ grid-area: auto; }
}

/* ---------------------------------------------------------
   Galerie — 6 photos présentées par paires (diptyques)
   --------------------------------------------------------- */
.diptych-grid{
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4rem);
}
.diptych{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.6rem, 1.6vw, 1.1rem);
  background: rgb(255, 255, 255);
  padding: 1rem 2rem 2rem 2rem;
  box-shadow:0rem 0rem 1rem rgba(33, 33, 33, 0.1);
}

.diptych figcaption h2 {
	margin:0; text-align: left; font-weight: normal; border-bottom:1px solid rgba(120, 120, 120, .2);
}

.diptych .frame{ --ar: 4/5; }
.diptych figcaption{
  grid-column: 1 / -1;
  margin-top: 0.8rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  text-align: center;
}

@media (max-width: 560px){
  .diptych{ grid-template-columns: 1fr; }
}