/* =====================================================
   BASE
===================================================== */

body {
	margin:0px;
	font-family: inter, system-ui, sans-serif;
	visibility: hidden; /* cacher le texte jusqu'à ce que la police soit chargée */
	font-size: 1em;
	line-height: 1.5;
	color: #fff;
	background-color: #222;
	overflow-x: hidden;
	}

html {		
	overflow-y: scroll;
	font-size: 100%;		/* référence pour les unités em et rem */
	}

a {
	text-decoration:none;
	font-weight: normal;
	color: #999999;
	}

a:hover	{
	font-weight: normal;
	color: #ffffff;
	}

a:active {
	font-weight: normal;
	}

.nomarge {
	vertical-align: middle;
	display: block;
	}



/* =====================================================
   HEADER DE BASE
===================================================== */

.onglet {
	font-size: 0.8em;
	letter-spacing: 0.05em;
	color: #cccccc;
	/* text-align: left; */
	/* vertical-align: middle; */
	}

/* =====================================================
   HEADER MOBILE
===================================================== */

.header-mobile {
	display: none;
	width: 100%;
	padding: 10px 10px;
	box-sizing: border-box;
	}

.header-mobile-inner {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 6px;
	overflow: hidden;		/* interdit tout débordement */
	}

.header-mobile-logo {
	flex: 1 1 auto;			/* le logo "zeppelin" peut rétrécir si nécessaire */
	min-width: 80px;		/* limite basse */
	}

.header-mobile-logo img {
	width: 100%;
	height: auto;
	max-height: 50px;		/* augmente un peu le logo "zeppelin" */
	display: block;
	}

/* ONGLET CONTAINER */
.header-mobile-nav {
	display: flex;
	flex: 0 0 auto;			/* les onglets ne rétrécissent pas horizontalement */
	gap: 4px;				/* interstice fin entre les onglets */
	align-items: stretch;	/* les onglets prennent toute la hauteur du conteneur */
	}

/* ONGLET */
.header-mobile-nav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;			/* hauteur = hauteur du conteneur (logo) */
	padding: 3px 6px;		/* padding horizontal seulement (initialement 0 6px;) */
	font-size: 0.5em;		/* texte plus petit pour rentrer (initialement 11px) */
	white-space: nowrap;
	background: #333;
	color: #CCCCCC;
	text-decoration: none;
	border-radius: 0px;
	}

/* =====================================================
   HEADER SWITCH
===================================================== */

@media (max-width: 580px) {
	.header-desktop { display: none; }
	.header-mobile { display: block; }
	}



/* =====================================================
	TITRE DU REPORTAGE
===================================================== */

.feature-title {
  width: 100%;
  max-width: 1080px;
  margin: 60px auto 0 auto;
  box-sizing: border-box;

  font-size: 2.5em;
  line-height: 1.1;
  font-weight: bold;
  color: #fff;
}
.feature-title .gris {
  color: #555;
}

@media (max-width: 1080px) {
  .feature-title {
    font-size: 2.1em;
  }
}

@media (max-width: 580px) {
  .feature-title {
    font-size: 1.6em;
    margin-top: 15px;
  }
}







/* =====================================================
   INFOS DU REPORTAGE (LIEU, AUTEUR, ICONES)
===================================================== */

.container-info-icons {
  width: 100%;
  max-width: 1080px;
  margin: 5px auto 0 auto;			/* haut + droite + bas + gauche */
  box-sizing: border-box;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-info {
	flex: 1 1 0;        			/* prend tout l'espace disponible */
	min-width: 0;       			/* permet au texte de rétrécir */
	line-height: 1.4;
	font-size: 14px;
	color: #CC6666;
	}

.feature-info span {
	color: #888;
	}

.feature-icons {
	display: flex;
	flex-shrink: 0;					/* empêche les icônes de se rétrécir */
	align-items: flex-start;
	gap: 12px;
	}

.feature-icons img {				/* icônes fixes */
	width: 28px;
	height: 28px;
	display: block;
	}


/* inutile : permet de décaler les icônes vers une ligne inférieure, toujours à droite
@media (max-width: 1080px) {
.container-info-icons {flex-direction: column; align-items: flex-start;}
.feature-icons {align-self: flex-end; margin-top: 5px;}
} */


/* =====================================================
	CHAPO DU REPORTAGE
===================================================== */

.feature-chapo {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto 50px auto;
  box-sizing: border-box;

  color: #fff;
  font-size: 16px;
  line-height: 1.8;
}
.feature-chapo span {
	color: #ff9999;
	font-size: 13px;
	}


@media (max-width: 1080px) {		/* à placer en dessous des balises citées ! */
  .feature-title,
  .container-info-icons,
  .feature-chapo {
    max-width: 820px;   /* limite à 820px */
    padding: 0 15px;    /* marge intérieure */
  }

}




/* =====================================================
   GALERIE RESPONSIVE
===================================================== */

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
	grid-auto-rows: 8px;				/* unité de calcul */
	gap: 1rem;
	}

.gallery a {
	display: inline-block;
	width: 100%;
	margin-bottom: 1rem;
	break-inside: avoid;
	}

.gallery img {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
	border: 1px solid #000;
	box-sizing: border-box;
	}


/* =====================================================
   PIED DE PAGE (AUTEUR + BIO + VOIR AUSSI)
===================================================== */

.auteur,
.voiraussi {
	width: 100%;
	padding: 3rem 1.5rem;
	}

.auteur {
	background-color: #111111;
	box-sizing: border-box;
	}

.voiraussi {
	background-color: #222222;
	box-sizing: border-box;
	}

/* conteneur interne centré comme le reste du site */
.auteur .inner,
.voiraussi .inner {
	max-width: 1080px;
	margin: 0 auto;
	box-sizing: border-box;
	}

.portrait {
	float: left;
	width: 180px;
	max-width: 40%;
	margin: 0 1.5rem 1rem 0;
}

.portrait img {
	width: 100%;
	height: auto;
	display: block;
}

.footer-auteur {
	font-size: 0.85rem;
	line-height: 1.6;
	color: #cccccc;
	}

.footer-auteur .nom {
	font-weight: bold;
	color: #ffffff;
	}

.footer-auteur .titre {
	font-weight: bold;
	color: #aaaaaa;
	}

.footer-auteur .texte {
	margin-top: 0.8rem;
	color: #fff;
	}

.footer-auteur::after {		/* clear float */
	content: "";
	display: block;
	clear: both;
	}

/* responsive mobile */
@media (max-width: 768px) {
.portrait {
	float: none;
	display: block;
	margin: 0 auto 1.5rem auto;
	width: 220px;
	max-width: 80%;
	}
}






/* =====================================================
   TABLEAU PHOTO in 001, 002...
===================================================== */

.photo-layout {
	display: grid;
	grid-template-columns: 820px 230px; /* photo + légende */
	grid-template-rows: auto auto;      /* 1ère ligne = photo+legend, 2ème = info */
	column-gap: 30px;
	row-gap: 6px;
	max-width: 1080px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: auto;
	margin-left: auto;
	align-items: start;
	grid-template-areas:
		"photo legend"					/* ligne 1 = photo + légende */
		"info  info";					/* ligne 2 = copyright + back-gallery */
	}

/* =====================================================
   ZONE PHOTO
===================================================== */

.photo-zone {
	grid-area: photo;
	position: relative;
	width: 820px;
	}

.photo-wrapper img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 546px;
	border: 1px solid #000;
	}

/* =====================================================
   NAVIGATION FLÈCHES
===================================================== */

.nav-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 5;
	}

.nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 36px;
	padding: 8px 12px;
	background: rgba(0,0,0,0.35);
	color: #fff;
	text-decoration: none;
	border-radius: 8px;
	opacity: 0;
	pointer-events: auto;
	transition: opacity 0.25s ease;
	z-index: 10;				/* sinon clics inaccessibles */
	}

.photo-zone:hover .nav,
.photo-zone.force-hover .nav {
	opacity: 1;
	}

.nav.prev { left: 0; }
.nav.next { right: 0; }

@media (max-width: 1080px) {
.nav {
	opacity: 1;					/* toujours visibles */
	}
}

@media (max-width: 835px) {		/* décaler les flèches sur un smartphone */
.nav-container {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;				/* toute la largeur de la fenêtre */
	height: 100%;				/* hauteur exacte de l'image */
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 5;
	}
.nav {
	opacity: 1;					/* toujours visibles */
	pointer-events: auto;
	}
.nav.prev { left: 0; }
.nav.next { right: 0; }
}

/* =====================================================
   LÉGENDE
===================================================== */

.photo-meta {
	grid-area: legend;
	align-self: end;			/* légende alignée sur le bas de la photo */
	}

.photo-info {
	grid-area: info;
	display: flex;
	flex-direction: column;		/* copyright puis numéro/lien-galerie */
	gap: 4px;					/* espace entre copyright et numéro/lien-galerie */
	}

.photo-credit,
.back-gallery {
	grid-area: meta;			/* ligne 2 du tableau */
	}

.photo-legend {
	font-size: 0.8em;
	line-height: 1.5;
	margin-top: 15px;			/* compense la proximité de numéro/lien-galerie  */
	}

.photo-legend span {
	color: #999;
	}

@media (max-width: 1080px) {	/* même style que le résumé  */
.photo-legend {
	font-size: 0.9em;
	line-height: 1.6;
	}
.photo-legend span {
	color: #fff;
	}
}



/* =====================================================
   META SOUS PHOTO (COPYRIGHT + RETOUR GALERIE)
===================================================== */

.photo-credit {
	grid-area: meta;
	font-size: 0.7em;
	line-height: 1.0;
	color: #999;
	}

.back-gallery {
	grid-area: meta;
	display: flex;
	gap: 10px;
	align-items: baseline;
	margin-top: 18px;
	}

.back-gallery .photo-id {
	font-size: 0.85em;
	color: #fff;
	pointer-events: none;
	}

.back-gallery a {
	display: inline-block;
	padding: 4px 8px;
	border: 1px solid #333;
	background: #333;
	font-size: 0.85em;
	line-height: 1.2;
	color: #ccc;
	text-decoration: none;
	transition: color 0.2s ease, background 0.2s ease;
	}

.back-gallery a:hover {
	color: #fff;
	background: #444;
	}



/* =====================================================
   RESPONSIVE – MOBILE
===================================================== */

@media (max-width: 1080px) {
.photo-layout {
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;
	/* row-gap: 12px; */
	max-width: 820px;
	margin-top: 5px;
	margin-bottom: 0;
	margin-right: auto;
	margin-left: auto;
	padding: 0 15px;			/* /////////////////// vérifier cette merde /////////////////// */
	box-sizing: border-box;
	grid-template-areas:
	  "photo"
	  "info"
	  "legend";
	}

.photo-zone,
.photo-meta,
.photo-info {
	width: 100%;
	max-width: 820px;
	padding: 0;
	}

.photo-meta {
	align-self: start;		/* la légende suit le flux */
	}
}



/* =====================================================
   RÉSUMÉ
===================================================== */

.container-abstract {
	max-width: 1080px;
	margin: 0 auto;      /* haut/bas + gauche/droite => centre le container */
	}

.abstract {
	max-width: 820px;
	font-size: 0.9em;
	line-height: 1.6;
	color: #999;
	}

@media (max-width: 1080px) {
.container-abstract {
	max-width: 820px;
	padding: 15px 15px;
	box-sizing: border-box;
	}
}

/* @media (max-width: 580px) {.abstract {max-width: 100%;}} */ /* inutile sauf width: 300px; */


/* =====================================================
   FOOTER - TOUS DROITS RÉSERVÉS
===================================================== */

.footer-band {
	width: 100%;
	background: #050505;
	margin-top: 40px;
	}

.footer-content {
	margin: 0 auto;
	padding: 5px 0;
	box-sizing: border-box;
	color: #333;
	font-size: 0.7em;
	line-height: 1.5;
	}

@media (min-width: 1081px) {
.footer-content {
	max-width: 1080px;
	padding-left: 0;
	padding-right: 0;
	}
}

@media (max-width: 1080px) {
.footer-content {
	max-width: 820px;
	padding-left: 15px;
	padding-right: 15px;
	}
}

/* @media (max-width: 580px) {.footer-content {max-width: 100%;}} */ /* inutile sauf width: 300px; */