/* ==========================================================================
   Morris & Chapman — View Transitions
   Morph vignette (.grid-item) -> hero de la case study (.single-heading)
   Fichier NOUVEAU : rien d'existant n'est modifié.
   ========================================================================== */

/* ==========================================================================
   ESSAI — format des tuiles de la grille
   Pour revenir à l'état d'origine : supprimer ce bloc entier.

   Mesures réelles (case study A.I.S.E.) :
     tuille d'origine  1.33:1  (4/3)
     hero affiché      2.11:1
     image source      2.50:1

   Plus les deux formats se ressemblent, plus le morph se lit comme UN SEUL
   objet qui se déplace, au lieu d'une image qui se reconfigure en route.
   ========================================================================== */
:root {
	--mc-grid-image-aspect-ratio: 16/9;   /* 1.78:1 — ferme ~60% de l'écart */
	/* --mc-grid-image-aspect-ratio: 2/1;    1.99:1 — colle presque au hero  */
	/* --mc-grid-image-aspect-ratio: 4/3;    1.33:1 — l'original             */
}

@view-transition { navigation: auto; }

@media ( prefers-reduced-motion: reduce ) {
	@view-transition { navigation: none; }
}

/* --- Chorégraphie : 3 temps (démo Chrome resserrée de 1,45 s à 1 s) ------ */
::view-transition {
	--before-duration: 0.2s;    /* le décor se retire     */
	--main-duration:   0.6s;    /* le média voyage, seul  */
	--after-duration:  0.25s;   /* le nouveau décor entre */

	/* Départ franc, arrivée qui se pose longuement.
	   C'est cette courbe qui fait la différence entre "ça bouge"
	   et "c'est conçu". La valeur par défaut est symétrique et molle. */
	--mc-ease: cubic-bezier( 0.22, 1, 0.36, 1 );
}

/* --- Temps 1 et 3 : le reste de la page --------------------------------- */
@keyframes mc-vt-root { to { translate: 0 2rem; opacity: 0; } }

::view-transition-old( root ) {
	animation-name: mc-vt-root;
	animation-duration: var( --before-duration );
}
::view-transition-new( root ) {
	animation-name: mc-vt-root;
	animation-direction: reverse;
	animation-delay: calc( var( --before-duration ) + ( var( --main-duration ) * 0.75 ) );
	animation-duration: var( --after-duration );
}

/* --- Nommage : côté grille (seule la tuile marquée par le JS) ------------ */
.grid-item.mc-last-clicked .media-container { view-transition-name: mc-photo; }
.grid-item.mc-last-clicked .grid-title      { view-transition-name: mc-title; }

/* --- Nommage : côté single case_study ----------------------------------- */
body.single-case_study .single-heading .media-container { view-transition-name: mc-photo; }
body.single-case_study #main-content h1                 { view-transition-name: mc-title; }
body.single-case_study .back-button-wrapper             { view-transition-name: mc-back; }

/* --- Désamorçage du conflit case study -> case study ---------------------
   Sur une case study, le hero ET la grille "related" coexistent. Si l'on
   part par une tuile related, hero et tuile porteraient tous deux
   "mc-photo" : un view-transition-name en double annule TOUT. */
body.mc-vt-from-grid .single-heading .media-container,
body.mc-vt-from-grid #main-content h1 { view-transition-name: none; }

/* --- Temps 2 : le voyage ------------------------------------------------- */
::view-transition-group( mc-photo ),
::view-transition-group( mc-title ) {
	animation-duration: var( --main-duration );
	animation-delay: var( --before-duration );
	animation-timing-function: var( --mc-ease );
}

/* Une seule version du média pendant le trajet (celle du grand format),
   sinon on voit un fondu croisé entre deux cadrages -> effet sale. */
:active-view-transition-type( to-detail )::view-transition-old( mc-photo ),
:active-view-transition-type( to-overview )::view-transition-new( mc-photo ) {
	display: none;
}
:active-view-transition-type( to-detail )::view-transition-new( mc-photo ),
:active-view-transition-type( to-overview )::view-transition-old( mc-photo ) {
	animation: none;
	height: 100%;
	overflow: clip;
	object-fit: cover;
}

/* --- Le bouton retour glisse depuis la gauche, après le voyage ---------- */
@keyframes mc-vt-back { from { opacity: 0; translate: -100% 0; } }

::view-transition-new( mc-back ):only-child,
::view-transition-old( mc-back ):only-child {
	animation-name: mc-vt-back;
	animation-timing-function: ease;
}
::view-transition-new( mc-back ):only-child {
	animation-duration: var( --after-duration );
	animation-delay: calc( var( --before-duration ) + var( --main-duration ) );
}
::view-transition-old( mc-back ):only-child {
	animation-duration: var( --before-duration );
	animation-direction: reverse;
}

/* --- Géométrie : le média doit remplir son cadre DES DEUX CÔTÉS ---------
   Sinon le cadrage diffère et le morph "dérape". C'est le premier réglage
   que tu auras envie de toucher. */
.grid-item .media-container,
body.single-case_study .single-heading .media-container { overflow: clip; }

.grid-item .media-container > img,
.grid-item .media-container > video,
body.single-case_study .single-heading .media-container > img,
body.single-case_study .single-heading .media-container > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   7. LE HEADER NE BOUGE PLUS
   --------------------------------------------------------------------------
   Sans ce bloc, le header fait partie du groupe "root" : il part vers le bas
   avec 2rem de décalage, s'efface, puis revient. C'est exactement ce qui
   trahit qu'on a changé de page.

   On le sort du groupe root en lui donnant son propre nom. Trois choix
   délibérés ensuite :

   - animation: none sur le groupe. Le header Divi se rétrécit au défilement
     (classe et-fixed-header). On quitte donc souvent une page au header
     réduit pour arriver sur une page au header entier : si on laissait le
     groupe s'animer, il interpolerait les deux hauteurs et l'image du logo
     serait étirée pendant le trajet.

   - old masqué, new non animé : pas de fondu croisé, donc aucun artefact.
     Le header est simplement là, immobile, pendant toute la transition.

   - z-index élevé : dans l'arbre des pseudo-éléments, l'ordre de peinture
     suit l'ordre du DOM, et #main-header précède #main-content. Sans
     z-index, le média en voyage passerait PAR-DESSUS le header, alors que
     sur la page réelle il passe dessous.
   -------------------------------------------------------------------------- */
#main-header {
	view-transition-name: mc-header;
}

::view-transition-group( mc-header ) {
	animation: none;
	z-index: 100;
}

::view-transition-old( mc-header ) {
	display: none;
}

::view-transition-new( mc-header ) {
	animation: none;
}

/* Variante fondu croisé, si tu préfères voir le surlignage du menu passer
   doucement d'un onglet à l'autre. Remplace les trois blocs ci-dessus :

	::view-transition-group( mc-header ) { z-index: 100; }
	::view-transition-old( mc-header ),
	::view-transition-new( mc-header ) { animation-duration: 0.3s; }
*/